/* ============================================================
   ai-empower — 學生自學頁共用樣式（reflect / practice / showcase）
   2026-10-01 新增；依附 assets/ae.css 的色票與元件
============================================================ */
.phead{background:linear-gradient(120deg,var(--primary),var(--primary-2) 55%,#5B6FE0);color:#fff;border-radius:18px;padding:22px 24px;box-shadow:var(--shadow);margin:18px 0;position:relative;overflow:hidden}
.phead.eco{background:linear-gradient(120deg,#0F766E,var(--eco) 55%,#14B8A6)}
.phead.ipo{background:linear-gradient(120deg,#5B21B6,var(--ipo) 55%,#A78BFA)}
.phead h1{font-size:21px;line-height:1.3}
.phead h1 .en{font-size:12px;font-weight:600;opacity:.9;margin-left:8px}
.phead p{font-size:13px;opacity:.93;margin-top:6px;max-width:760px}
.phead .idrow{margin-top:12px;max-width:620px}
.lw{max-width:860px;margin:0 auto}

/* 分頁 */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 auto 12px;max-width:860px}
.tabs button{font:inherit;font-size:13.5px;font-weight:800;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:8px 16px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.pane{display:none}.pane.on{display:block}

/* 表單 */
.fcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:14px}
.fcard h2{font-size:16px;color:var(--primary);margin-bottom:4px}
.fcard .sub{font-size:12.5px;color:var(--muted);margin-bottom:12px;line-height:1.6}
.fq{margin:14px 0}
.fq>label,.fq>.lb{display:block;font-weight:800;font-size:13.5px;margin-bottom:6px}
.fq .hint{font-weight:500;color:var(--muted);font-size:12px;margin-left:6px}
.fq input[type=text],.fq input[type=url],.fq select,.fq textarea{width:100%;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff;color:var(--ink)}
.fq textarea{min-height:76px;resize:vertical;line-height:1.6}
.fq input:focus,.fq select:focus,.fq textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips label{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;font-size:13.5px;background:#fff;user-select:none}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label:has(input:checked){border-color:var(--primary);background:var(--accent-soft);color:var(--primary);font-weight:800}
.chips label.big{font-size:22px;padding:6px 12px}
.chips label.big small{font-size:11.5px;font-weight:700;color:var(--muted)}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;background:var(--soft);border:1px dashed var(--line);border-radius:10px;padding:10px 12px}
.consent input{margin-top:4px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.anon{display:inline-block;background:#E0E7FF;color:#3730A3;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800}
.named{display:inline-block;background:#FCE7F3;color:#9D174D;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800}
.note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.6}

/* 歷程清單 */
.hist{list-style:none;display:grid;gap:8px;margin-top:8px}
.hist li{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--soft);font-size:13px;line-height:1.6}
.hist li b{color:var(--primary)}
.hist .t{font-size:11.5px;color:var(--muted)}

/* 練習 */
.qcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:12px}
.qhead{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);margin-bottom:6px}
.qstem{font-size:15px;font-weight:700;line-height:1.6;margin-bottom:10px}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;font:inherit;font-size:14px;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff;cursor:pointer;color:var(--ink)}
.opt .L{font-weight:800;color:var(--primary);min-width:18px}
.opt.sel{border-color:var(--primary);background:var(--accent-soft)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.wrong{border-color:var(--err);background:var(--err-bg)}
.opt[disabled]{cursor:default}
.fb{font-size:13px;margin-top:8px;font-weight:700}
.fb.ok{color:var(--ok)}.fb.err{color:var(--err)}
.bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.axrow{display:grid;grid-template-columns:70px 1fr 60px;gap:10px;align-items:center;font-size:13px;margin:6px 0}
.stick{position:sticky;top:8px;z-index:20;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:10px 14px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px;font-size:13.5px;font-weight:700}
.big-score{font-size:34px;font-weight:900;color:var(--primary)}
.rub{font-size:12.5px;background:var(--soft);border-radius:10px;padding:8px 12px;margin-top:8px;line-height:1.7}

/* 作品牆 */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.wk{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.wk .img{aspect-ratio:16/9;background:var(--soft) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:40px}
.wk .bd{padding:12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.wk h3{font-size:14.5px;color:var(--primary);line-height:1.4}
.wk .by{font-size:12px;color:var(--muted)}
.wk p{font-size:12.5px;line-height:1.6;flex:1}
.wk .tg{display:flex;gap:5px;flex-wrap:wrap}
.wk .tg span{font-size:10.5px;font-weight:700;background:var(--accent-soft);color:var(--primary);border-radius:99px;padding:2px 8px}
.wk a.go{align-self:flex-start;font-weight:800;font-size:13px;color:#fff;background:var(--primary);border-radius:8px;padding:6px 12px;margin-top:6px}
.empty{background:#fff;border:1.5px dashed var(--line);border-radius:var(--radius);padding:22px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.8}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters select{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fff}
/* 右下角「教學影片」浮動卡在手機會蓋住表單底部：保留捲動空間 */
@media(max-width:560px){main.wrap{padding-bottom:220px!important}}