/* z1-shell — 由該區 agent 維護
   外殼（視窗／標題列／選單列／狀態列／工作列）＋共用元件。
   方向：Win95 灰色斜面更銳利、更乾淨；未來感只放在「膜」與「光」：全像標題列＋細掃描線、霓虹髮絲線、液晶托盤。 */

:root{
  --z1-hair:linear-gradient(90deg,rgba(43,246,255,0) 0%,rgba(43,246,255,.9) 18%,rgba(255,79,216,.85) 55%,rgba(43,246,255,0) 100%);
  --z1-tb-h:46px;              /* 工作列高度（桌面） */
  --z1-tap:40px;               /* 最小點擊區 */
  /* 更銳利的斜面：外 1px 純白／純深，內 1px 亮灰／中灰 */
  --out:inset -1px -1px #0E1116,inset 1px 1px #FFFFFF,inset -2px -2px #7C838C,inset 2px 2px #E6E8EB;
  --in:inset 1px 1px #7C838C,inset -1px -1px #FFFFFF,inset 2px 2px #0E1116,inset -2px -2px #E6E8EB;
}

/* ---------- 桌面背景 ---------- */
body{display:flow-root;padding-bottom:calc(var(--z1-tb-h) + 24px + env(safe-area-inset-bottom,0px))}
.desktop{background:
  radial-gradient(70% 8% at 50% 78%,rgba(43,246,255,.14),transparent 70%),
  radial-gradient(60% 38% at 50% 58%,rgba(255,79,216,.08),transparent 70%),
  linear-gradient(180deg,rgba(2,35,39,0) 0%,rgba(2,35,39,0) 52%,rgba(1,18,21,.55) 100%)}
.desktop::before{opacity:.12}
.floor{height:160%;bottom:var(--z1-tb-h);transform:perspective(420px) rotateX(60deg);
  left:-260%;right:-260%;opacity:.75;animation:none;
  background-image:linear-gradient(rgba(43,246,255,.6) 2px,transparent 2px),linear-gradient(90deg,rgba(255,79,216,.5) 2px,transparent 2px);background-size:64px 64px;
  -webkit-mask-image:linear-gradient(transparent 0%,transparent 55%,rgba(0,0,0,.4) 75%,#000 95%);mask-image:linear-gradient(transparent 0%,transparent 55%,rgba(0,0,0,.4) 75%,#000 95%)}
/* 地平線：一條很細的霓虹光 */
.floor::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--z1-hair);opacity:.9;filter:blur(1px)}
.desktop::after{display:none}

/* ---------- 應用程式視窗 ---------- */
.wrap{max-width:866px;margin:21px auto 0;padding:3px;
  box-shadow:var(--out),0 0 0 1px rgba(0,0,0,.6),12px 14px 0 rgba(0,0,0,.34),0 0 0 4px rgba(43,246,255,.06),0 30px 90px -24px rgba(43,246,255,.28)}
.wrap::after{background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 20%,transparent 82%,rgba(255,255,255,.04))}

/* 標題列：全像彩虹膜＋細掃描線＋底部霓虹髮絲 */
.titlebar{height:40px;min-height:40px;padding:0 10px 0 9px;gap:9px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.38) 0,rgba(255,255,255,0) 45%,rgba(0,0,0,.05) 100%),
    var(--foil);
  background-size:100% 100%,300% 100%;animation:z1foil 28s linear infinite;
  box-shadow:inset 0 -1px 0 rgba(10,12,16,.55)}
@keyframes z1foil{from{background-position:0 0,0 0}to{background-position:0 0,300% 0}}
.titlebar::after{background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 2px,rgba(10,12,16,.035) 2px 3px)}
.titlebar::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--z1-hair);opacity:.75;pointer-events:none;z-index:1}
/* 標題列圖示：拾訊標誌 16 格小尺寸版（與工作列一致；保留原 20px 方塊，不動版面） */
.tb-ico{width:20px;height:20px;position:relative;z-index:1;
  background:url(../icons/logo-16.svg) center/16px 16px no-repeat;box-shadow:none;image-rendering:pixelated}
.brand{position:relative;z-index:1;font-size:1.08rem;line-height:1;letter-spacing:.07em;text-shadow:1px 1px 0 rgba(255,255,255,.55)}
.brand small{font-size:1.1rem;opacity:.62;margin-left:3px}
.who{position:relative;z-index:1;font-size:.76rem;opacity:.8;letter-spacing:.03em}

/* 選單列：Win95 選單＋霓虹選取底線。電腦 36px；手機 40px（整列即點擊區，不與內容重疊） */
.menubar{height:36px;min-height:36px;overflow-y:hidden;align-items:stretch;gap:0;padding:0 4px;font-size:.88rem;
  border-bottom:0;box-shadow:inset 0 -1px 0 var(--lo),0 1px 0 var(--hi);overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-mask-image:none}
.menubar button{display:flex;align-items:center;flex:none;min-height:0;height:100%;padding:0 11px;position:relative;scroll-snap-align:start;color:var(--ink);letter-spacing:.03em}
.menubar button::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:2px;background:var(--z1-hair);opacity:0;transition:opacity .12s}
.menubar button:hover{background:var(--sel);color:var(--on-sel)}
.menubar button:hover::after,.menubar button:focus-visible::after{opacity:1}
.menubar button:active{background:#081F6E;color:var(--on-sel)}
.menubar button:focus-visible{outline:1px dotted currentColor;outline-offset:-5px}
.menubar u{text-underline-offset:3px;text-decoration-thickness:1px}

/* 內容區 */
#main{padding:0 32px 8px}

/* 狀態列：凹陷格＋液晶小燈 */
.statusbar{height:26px;padding:3px 0 0;font-size:.74rem;align-items:stretch}
.statusbar span{display:block;padding:0 9px;line-height:23px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.statusbar span[hidden]{display:none}
.statusbar span:first-child::before{content:"";display:inline-block;vertical-align:1px;width:6px;height:6px;margin-right:7px;background:var(--ok);box-shadow:0 0 5px #3CFF9E}

/* 視窗控制鈕：視覺 22×20 小斜面鈕，點擊區 40×40（負邊距，不撐高標題列） */
.who{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-ctl{display:flex;align-items:center;gap:9px;flex:none;position:relative;z-index:2;margin-left:2px}
.win-ctl button{width:40px;height:40px;margin:-10px -9px;border:0;padding:0;background:none;cursor:pointer;position:relative;
  display:grid;place-items:center;font-family:var(--pixel);font-size:.8rem;line-height:1;color:var(--ink)}
.win-ctl button::before{content:"";position:absolute;left:9px;top:10px;width:22px;height:20px;background:var(--chrome);box-shadow:var(--out)}
.win-ctl button:hover::before{background:var(--chrome-2)}
.win-ctl button:active::before{box-shadow:var(--in)}
.win-ctl button:active{padding:2px 0 0 2px}
.win-ctl button:focus-visible{outline:none}
.win-ctl button:focus-visible::before{outline:1px dotted var(--ink);outline-offset:-4px}
.win-ctl .wc-max{margin-left:-18px;margin-right:0;justify-items:end;padding-right:6px}
.win-ctl .wc-max::before{left:auto;right:0}
.win-ctl .wc-max:active{padding:2px 4px 0 0}
.win-ctl button{isolation:isolate}
.win-ctl button::before{z-index:-1}
.wc-close{font-size:.95rem}
body[data-view=home] .wc-close,body[data-view=login] .win-ctl,body[data-view=waitlist] .win-ctl,body[data-view=noconfig] .win-ctl{display:none}
@media (max-width:640px){.wc-max{display:none!important}}
@media (min-width:641px){
  body.maxed .wrap{max-width:none;margin:12px -4px 0}
  body.maxed #main > .page{max-width:1100px;margin-left:auto;margin-right:auto;width:100%}
}

/* ---------- 工作列 ---------- */
.taskbar{height:calc(var(--z1-tb-h) + env(safe-area-inset-bottom,0px));min-height:0;gap:4px;align-items:center;
  padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));
  background:var(--chrome);box-shadow:inset 0 1px var(--chrome-2),inset 0 2px var(--hi),0 -1px 0 #7C838C,0 -2px 0 rgba(0,0,0,.25)}
.taskbar::before{content:"";position:absolute;left:0;right:0;top:-3px;height:1px;background:var(--z1-hair);opacity:.7;pointer-events:none}
.start,.tab{min-height:38px;height:38px}
.start{padding:0 12px 0 10px;font-size:.94rem;letter-spacing:.04em;font-weight:400}
/* 「拾訊」開始鈕的圖示：拾訊標誌 16 格小尺寸版（保留原 18px 方塊，不動版面） */
.start i{animation:none;width:18px;height:18px;background:url(../icons/logo-16.svg) center/16px 16px no-repeat;box-shadow:none;image-rendering:pixelated}
.start:focus-visible,.tab:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}
.tabs{align-self:stretch;align-items:center;gap:4px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.tab{padding:0 13px;display:inline-flex;align-items:center;scroll-snap-align:start;color:var(--ink)}
.tab:hover{background:var(--chrome-2)}
.tab:active{box-shadow:var(--in)}
.tab[aria-current="true"]{position:relative;color:var(--ink)}
.tab[aria-current="true"]::after{content:"";position:absolute;left:5px;right:5px;bottom:4px;height:2px;background:var(--z1-hair);pointer-events:none}
.tab.add{color:var(--sel)}
/* 托盤：液晶時鐘 */
.tray{min-height:38px;height:38px;padding:0 10px;gap:8px;background:var(--lcd);
  box-shadow:inset 1px 1px #7C838C,inset -1px -1px #FFFFFF,inset 2px 2px #0E1116,inset -2px -2px #E6E8EB}
.tray .led{box-shadow:0 0 6px #3CFF9E,0 0 0 1px #003A26}
.clock{color:var(--lcd-ink);font-size:1.3rem;text-shadow:0 0 8px rgba(124,255,233,.7)}

/* ---------- 字級 ---------- */
h1{line-height:1.22}
h2{font-size:1.05rem;line-height:1.35}

/* ---------- 共用元件 ---------- */
.btn{min-height:40px;padding:8px 16px;line-height:1.25}
.btn:active{padding:9px 15px 7px 17px}
.btn[disabled]:active{padding:8px 16px}
.btn.primary{animation:none;background-position:30% 0;box-shadow:inset -1px -1px #0E1116,inset 1px 1px #FFFFFF,inset -2px -2px #7C838C,0 0 0 1px #0E1116,0 0 16px -3px rgba(43,246,255,.7)}
.btn.primary:active{box-shadow:var(--in),0 0 0 1px #0E1116}
.btn.ghost:hover{background:var(--chrome-2)}
.btn.sm{min-height:34px;padding:4px 11px;font-size:.82rem}
.btn.sm:active{padding:5px 10px 3px 12px}
.btn.sm[disabled]:active{padding:4px 11px}

/* 勾選框：視覺 24px，點擊區 40×40（負邊距不改變佔位） */
.check{width:40px;height:40px;margin:-8px;background:none;box-shadow:none;position:relative;flex:none;align-self:start}
.check::before{content:"";position:absolute;inset:8px;background:var(--field);box-shadow:var(--in)}
.check svg{position:relative;width:16px;height:16px}
.check[aria-pressed="true"]{background:none}
.check[aria-pressed="true"]::before{background:#DFFFEF;box-shadow:var(--in),inset 0 0 6px rgba(0,132,90,.35)}
.check:hover::before{background:#EEF3FF}
.check:active{transform:none}
.check:active::before{inset:9px}
.check:focus-visible{outline:none}
.check:focus-visible::before{outline:1px dotted var(--ink);outline-offset:2px}

.pill{min-height:24px;padding:2px 9px;line-height:1.2}
.role{display:inline-flex;align-items:center;min-height:24px;padding:1px 8px;line-height:1.2;background:transparent;box-shadow:none;border:1px solid #7C838C;color:var(--ink-2);letter-spacing:.04em}
.cchip{line-height:1.5;padding:0 6px;box-shadow:inset -1px -1px rgba(0,0,0,.35),inset 1px 1px rgba(255,255,255,.3)}

/* 區塊標題：群組框的蝕刻線＋液晶計數 */
.sec-head{min-height:34px;padding-bottom:7px;border-bottom:1px solid #7C838C;box-shadow:0 1px 0 #FFFFFF}
.sec-head::before{width:12px;height:12px}
.sec-head .count{min-width:28px;text-align:center;padding:3px 8px 2px}

.list{padding:2px}
.empty{line-height:1.65}
.empty b{line-height:1.4}
.note{font-size:.85rem;line-height:1.65;color:var(--ink);padding:8px 12px;border:1px solid var(--dk);box-shadow:2px 2px 0 rgba(0,0,0,.18)}
.err-box{min-height:52px;line-height:1.6;box-shadow:var(--out),inset 3px 0 0 var(--imp)}
.hint{line-height:1.5}
.inp,.field input{min-height:40px}

/* 整理中：視窗化進度框 */
.progress{position:relative;padding:14px 16px;gap:12px}
.progress::before{content:"";position:absolute;left:3px;right:3px;top:3px;height:3px;background:var(--foil);background-size:100% 100%}
.xpbar{height:24px}
.xpbar i{background:repeating-linear-gradient(90deg,var(--sel) 0 10px,transparent 10px 13px);box-shadow:0 0 0 0 transparent}
.plog{padding:9px 12px;position:relative;overflow:hidden}
.plog::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}

.skel{gap:12px}
.sk{background:linear-gradient(90deg,#BBBFC5 0 30%,#DCDFE3 50%,#BBBFC5 70%) 0 0/300% 100%}

/* 提示泡泡 */
.toast{bottom:calc(var(--z1-tb-h) + 12px + env(safe-area-inset-bottom,0px));line-height:1.55;padding:10px 14px 10px 36px;
  box-shadow:3px 3px 0 rgba(0,0,0,.35),0 0 0 1px rgba(43,246,255,.25);animation:z1toast .16s steps(3)}
.toast::before{content:"i";position:absolute;left:11px;top:11px;width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#7FB2FF,#0B44D6);color:#fff;font:italic 700 .72rem/17px Georgia,serif;text-align:center}
@keyframes z1toast{from{transform:translateY(6px);opacity:0}}

/* ---------- 手機 ---------- */
@media (max-width:640px){
  :root{--z1-tb-h:54px}
  body{padding-bottom:calc(var(--z1-tb-h) + env(safe-area-inset-bottom,0px))}
  .wrap{margin:0;padding:0;max-width:none;box-shadow:none;
    min-height:calc(100vh - var(--z1-tb-h) - env(safe-area-inset-bottom,0px));
    min-height:calc(100dvh - var(--z1-tb-h) - env(safe-area-inset-bottom,0px))}
  .wrap::after{display:none}
  .titlebar{padding:0 14px}
  .menubar{height:40px;min-height:40px;padding:0 3px}
  .menubar button{padding:0 10px}
  .menubar button{height:39px}
  .menubar button::after{bottom:6px}
  #main{padding:0 14px 10px}
  .statusbar{padding:3px 3px 3px}
  .taskbar{padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px));gap:4px}
  .start,.tab,.tray{min-height:44px;height:44px}
  .start{padding:0 12px}
  .tab{padding:0 12px;font-size:.88rem}
  .tabs{flex:1 1 0;min-width:0;overflow-x:auto;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:18px}
  .tray{flex:none;position:relative;z-index:1;padding:0 6px;gap:0}
  .clock{font-size:1.02rem;letter-spacing:0}
  .btn.sm{min-height:40px;padding:6px 12px}
  .btn.sm:active{padding:7px 11px 5px 13px}
  .btn.sm[disabled]:active{padding:6px 12px}
  .toast{left:12px;right:12px;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .titlebar,.floor,.progress::before,.toast{animation:none!important}
  .menubar button::after{transition:none}
}

/* 整合：狀態燈在整理中改黃色閃爍；手機提示框移到固定操作列之上 */
.statusbar.busy span:first-child::before{background:#FFD23F;box-shadow:0 0 6px #FFD23F;animation:blinkr .8s steps(2) infinite}
@media (max-width:640px){
  body:has(.page .actions) .toast{bottom:calc(var(--z1-tb-h) + 66px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.statusbar.busy span:first-child::before{animation:none}}

/* 整合：動畫克制——裝飾性的無限循環一律只播一次或停止 */
.summary::after{animation-iteration-count:1}
.summary p::after{animation:none;opacity:.7}
.sheet::before,.v-login .panel::before,.card .ctag,.tb-ico,.start i{animation:none}

/* ===== 整合 r3 ===== */
/* 1. 不能按的狀態標記一律扁平（凹陷細框），和凸起的按鈕明確區分 */
.pill{box-shadow:none;background:rgba(255,255,255,.35);border:1px solid var(--lo);cursor:default}
span.src{box-shadow:none!important;background:transparent!important;border:1px dashed var(--lo);cursor:default}
span.src::before,span.src::after{content:none!important;display:none!important}
/* 2. 工作列：開始鈕＋固定的「＋ 新課程」鈕，分頁列在中間 */
.start.add-course{color:var(--sel);gap:4px}
.start.add-course b{font-weight:400;font-size:1.1rem;line-height:1}
@media (max-width:640px){
  .start span{display:inline}
  .start{padding:0 10px}
  .start.add-course{width:44px;padding:0;justify-content:center}
  .start.add-course span{display:none}
  .tray .clock{font-size:.95rem}
}
/* 7. 輔助小字最小 12.5px、對比加深 */
.basis,.statusbar,.tile .sub,.bm,.fine,.sec-desc{font-size:max(.78rem,12.5px)}
.basis,.sec-desc,.fine{color:#3E464F}
/* 10. 次要（ghost）按鈕：平時有淡框提示可按，hover 才出斜面 */
.btn.ghost{box-shadow:inset 0 0 0 1px rgba(17,20,24,.22)}
.btn.ghost:hover{box-shadow:var(--out)}
.btn.ghost:active{box-shadow:var(--in)}

/* 整合 r3：hidden 屬性一律生效 */
[hidden]{display:none!important}

/* ===== 整合 r4 ===== */
/* 手機：工作列改成「拾訊｜＋｜目前課程 ▾｜時鐘」，分頁列隱藏，不再有被切的字 */
.start.course-switch{display:none}
@media (max-width:640px){
  .taskbar .tabs{display:none}
  .start.course-switch{display:flex;flex:1 1 0;min-width:0;justify-content:space-between;gap:6px;font-size:.9rem}
  .start.course-switch[hidden]{display:none}
  .start.course-switch span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .start.course-switch b{font-weight:400;color:var(--sel)}
  .menubar{height:41px;min-height:41px}
  .menubar button{height:40px}
}
/* 液晶格說明字：亮一點、至少 13px */
.tile .sub{color:#B8E6DF;font-size:max(.8rem,13px)}
.basis{font-size:max(.8rem,13px)}

/* ===== 整合 r5 ===== */
/* 次要按鈕保留凸起斜面（平面會被誤認為停用），用較淡字色分層級 */
.btn.ghost{box-shadow:var(--out);background:var(--chrome);color:#2C333B}
.btn.ghost:active{box-shadow:var(--in)}
.btn.ghost.back{color:var(--ink)}