/* muzix 場地夥伴 App — Center role colour system (Master Bible Brand Patch 2026-06-19).
   Accent #3c7ed4 over the shared neutral base; panel tint 12%, page surface 2.5%.
   The accent token is kept named --violet so the shared component CSS/JS (copied from
   the tutor app) re-themes with a pure value swap — no layout/logic/i18n changes.
   Semantic status colours (--ok green / --alert red / amber) are NOT role-themed. */
:root{
  --ink:#0a0a0f;--ink-2:#4b4b57;--ink-3:#9a9aa6;
  --bg:#fafcfe;--paper:#eef0f4;--card:#ffffff;--line:#e9e9ef;
  --violet:#3c7ed4;--violet-deep:#2f6bb8;--violet-tint:#e8f0fa;--violet-line:#cfe0f5;
  --tutor-accent:#3c7ed4; /* legacy alias (unused here); aligned to Center accent */
  --alert:#c8503e;--alert-tint:#fbeeec;
  --ok:#2e7d5b;--ok-tint:#e9f4ef;
  --r:22px;
  --sans:"DM Sans","Noto Sans TC",-apple-system,system-ui,sans-serif;
  --serif:"Noto Serif TC",serif;
  --mono:"DM Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#dcdce4;font-family:var(--sans);color:var(--ink);display:flex;justify-content:center}
.phone{width:100%;max-width:420px;background:var(--bg);min-height:100dvh;display:flex;flex-direction:column;position:relative;box-shadow:0 0 60px rgba(10,10,15,.16)}
/* On a phone the "desktop frame" (grey body + box-shadow halo + max-width cap)
   must not show — it reads as a grey edge around a full-screen app. */
@media (max-width:440px){
  body{background:var(--bg)}
  .phone{max-width:none;box-shadow:none}
}

/* ---------- generic ---------- */
.screen{flex:1;overflow-y:auto;padding-bottom:110px;display:none}
.screen.active{display:block}
.topbar{position:sticky;top:0;z-index:20;background:rgba(248,249,250,.86);backdrop-filter:blur(12px);padding:14px 18px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:8px;width:100%}
.brand .logo{height:17px;width:auto;display:block}
.hex{width:18px;height:18px;background:var(--violet);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%)}
.role-tag{margin-left:auto;font-size:11px;font-weight:700;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-line);padding:3px 10px;border-radius:999px;letter-spacing:.08em}
.linkbtn{background:none;border:none;color:var(--ink-3);font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;padding:4px 8px}
.section{padding:18px 18px 0}
.sec-title{font-family:var(--serif);font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sec-title .count{font-family:var(--mono);font-size:11px;color:var(--violet);background:var(--violet-tint);padding:1px 8px;border-radius:999px;font-weight:500}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 10px rgba(10,10,15,.04)}
.btn{font-weight:700;border:none;border-radius:999px;cursor:pointer;transition:transform .06s,background .15s;font-family:var(--sans)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--violet);color:#fff;padding:14px 18px;font-size:15px;width:100%}
.btn-primary:disabled{background:#c9c5e8;cursor:default}
.muted{color:var(--ink-3);font-size:12px}
.empty{padding:18px 16px;color:var(--ink-3);font-size:13px;text-align:center}
.spin{padding:40px 0;text-align:center;color:var(--ink-3);font-size:13px}

/* ---------- login ---------- */
#login{display:none;min-height:100dvh;flex-direction:column;justify-content:center;padding:28px 22px}
#login.active{display:flex}
.login-brand{display:flex;align-items:center;gap:9px;margin-bottom:26px}
.login-brand .logo{height:21px;width:auto;display:block}
.login-brand .role-tag{margin-left:0}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 8px 30px rgba(10,10,15,.06)}
.login-card h1{font-size:22px;letter-spacing:-.01em;margin-bottom:8px}
.login-card p.sub{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-bottom:20px}
.login-card label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.login-card input{width:100%;border:1px solid var(--line);background:#fcfcfd;border-radius:14px;padding:14px 15px;font-size:15px;font-family:var(--sans);margin-bottom:16px;outline:none}
.login-card input:focus{border-color:var(--violet-line);box-shadow:0 0 0 3px var(--violet-tint)}
.note{margin-top:16px;font-size:12px;line-height:1.6;color:var(--ink-3)}
.flash{margin-top:16px;border-radius:14px;padding:13px 15px;font-size:13px;line-height:1.55;display:none}
.flash.show{display:block}
.flash.ok{background:var(--ok-tint);color:var(--ok)}
.flash.err{background:var(--alert-tint);color:var(--alert)}

/* ---------- home (今日) ---------- */
.greet{padding:22px 18px 0}
.greet .hi{font-size:24px;font-weight:500;color:var(--ink-3);line-height:1.25;letter-spacing:-.01em}
.greet h1{font-family:var(--sans);font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-top:2px}
.greet h1 .n{color:var(--violet)}
.greet .date{display:inline-flex;font-family:var(--mono);font-size:12px;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-line);padding:6px 14px;border-radius:999px;margin-top:12px}
.alert-strip{margin:14px 18px 0;background:var(--alert-tint);border:1px solid #efcdc6;border-radius:18px;padding:12px 16px;display:flex;gap:10px;align-items:center}
.alert-strip .dot{width:9px;height:9px;border-radius:50%;background:var(--alert);flex:none;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.alert-strip b{color:var(--alert);font-size:13.5px}
.alert-strip span{font-size:12px;color:var(--ink-2)}
.next-card{margin:18px 18px 0;background:#12101f;border-radius:28px;color:#fff;padding:24px 22px;position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(18,16,31,.28)}
.next-card::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;background:var(--violet);opacity:.3;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%)}
.next-card .eyebrow{display:inline-block;font-size:11px;letter-spacing:.1em;color:#12101f;background:#cfc8ff;font-weight:700;margin-bottom:14px;padding:5px 12px;border-radius:999px}
.next-card .time{font-family:var(--mono);font-size:34px;letter-spacing:-.02em}
.next-card .who{font-size:18px;font-weight:700;margin-top:8px}
.next-card .where{font-size:13px;color:#b9b4d8;margin-top:3px}
.lesson-row{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line)}
.lesson-row:last-child{border-bottom:none}
.lesson-row .t{font-family:var(--mono);font-size:12px;color:var(--ink-2);background:var(--paper);border-radius:999px;padding:6px 10px;flex:none}
.lesson-row .mid{flex:1;min-width:0}
.lesson-row .nm{font-weight:700;font-size:14.5px}
.lesson-row .vn{font-size:12px;color:var(--ink-3);margin-top:1px}
.pill{margin-left:auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;flex:none}
.pill.done{background:var(--ok-tint);color:var(--ok)}
.pill.todo{background:var(--violet-tint);color:var(--violet)}
.pill.overdue{background:var(--alert-tint);color:var(--alert)}
.pill.next{background:var(--ink);color:#fff}

/* day group (upcoming / timetable) */
.daygroup{padding:0 18px;margin-top:16px}
.dayhead{display:flex;align-items:center;gap:8px;margin:0 2px 8px}
.dayhead .d{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink)}
.dayhead .wd{font-size:11px;color:var(--ink-3)}
.dayhead.today .d{color:var(--violet)}
.dayhead .todaytag{font-size:10px;font-weight:700;color:var(--violet);background:var(--violet-tint);padding:2px 8px;border-radius:999px;margin-left:auto}

/* ---------- tab bar ---------- */
.tabbar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:388px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;display:flex;z-index:30;padding:7px;box-shadow:0 8px 28px rgba(10,10,15,.14)}
.tab{flex:1;padding:10px 0;text-align:center;font-size:11.5px;color:var(--ink-3);cursor:pointer;font-weight:700;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;transition:.2s}
.tab .ico{font-size:16px;line-height:1;filter:grayscale(1);opacity:.55}
.tab.active{background:var(--ink);color:#fff}
.tab.active .ico{filter:none;opacity:1}
.tab.soon{opacity:.5}

/* stub tabs (學生/我的 — M2) */
.stub{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 30px}
.stub .hex{width:34px;height:34px;margin-bottom:16px;opacity:.5}
.stub h2{font-family:var(--serif);font-size:20px;margin-bottom:6px}
.stub p{font-size:13px;color:var(--ink-3);line-height:1.6}

/* ====================================================================
   M2 — Lesson Hub + Song teaching page (read-only)
   ==================================================================== */
.view{display:none}
.view.active{display:flex}
.lesson-row.tap{cursor:pointer}
.lesson-row .arr{margin-left:auto;color:var(--ink-3);flex:none}

/* sub-page top bar with back button */
.ws-top{position:sticky;top:0;z-index:25;background:rgba(248,249,250,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.ws-head{display:flex;align-items:center;gap:10px;padding:12px 16px 8px}
.back{width:40px;height:40px;border-radius:50%;border:none;background:#fff;font-size:17px;cursor:pointer;flex:none;box-shadow:0 2px 8px rgba(10,10,15,.12)}
.ws-head .avatar{width:42px;height:42px;border-radius:50%;background:var(--violet-tint);color:var(--violet);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:none;font-family:var(--serif);cursor:pointer}
.ws-head .hd-main{flex:1;min-width:0}
.ws-head .stu{font-family:var(--serif);font-weight:700;font-size:17px;cursor:pointer}
.ws-head .stu .sub{font-weight:400;font-size:12px;color:var(--ink-3)}
.gradepill{display:inline-block;font-size:11px;font-weight:700;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-line);padding:2px 9px;border-radius:999px;vertical-align:middle;font-family:var(--sans)}
.viewstu{flex:none;align-self:center;background:var(--violet-tint);color:var(--violet);border:1px solid var(--violet-line);border-radius:999px;font-size:11.5px;font-weight:700;padding:7px 11px;cursor:pointer;font-family:var(--sans);white-space:nowrap}

/* Lesson Hub header — Option B (white card + slim time-driven bars) */
.hub-bar{display:flex;align-items:center;gap:10px;padding:12px 16px 4px}
.hub-bar-lb{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-card-wrap{padding:10px 16px 14px}
.b-card{background:#fff;border-radius:22px;padding:16px;box-shadow:0 3px 14px rgba(28,32,48,.07);position:relative;overflow:hidden}
.b-card::after{content:"";position:absolute;right:-24px;top:-24px;width:96px;height:96px;border-radius:50%;background:var(--violet);opacity:.06}
.b-top{display:flex;align-items:flex-start;gap:12px;position:relative;z-index:1}
.b-av{width:48px;height:48px;border-radius:50%;background:var(--violet-tint);color:var(--violet);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:none;font-family:var(--serif);cursor:pointer}
.b-namecol{flex:1;min-width:0}
.b-name{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.2;cursor:pointer}
.b-name .chev{color:var(--violet);font-size:15px;font-weight:400}
.b-grade{display:inline-block;font-size:11px;font-weight:700;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-line);padding:2px 9px;border-radius:99px;margin-top:5px}
.b-tap{margin-left:auto;flex:none;font-size:11px;color:var(--ink-3);background:var(--paper);border:none;padding:5px 11px;border-radius:99px;white-space:nowrap;cursor:pointer;font-family:var(--sans)}
.b-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;position:relative;z-index:1}
.b-chip{font-size:12px;color:var(--ink-2);background:var(--paper);padding:6px 11px;border-radius:99px;display:flex;align-items:center;gap:5px}
.b-prog{display:flex;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);position:relative;z-index:1}
.b-step{flex:1;text-align:center}
.b-bar{height:5px;border-radius:99px;background:#e4e4ec;overflow:hidden}
.b-bar i{display:block;height:100%;border-radius:99px;width:0}
.b-step.done .b-bar i{width:100%;background:var(--ok)}
.b-step.cur .b-bar i{width:55%;background:var(--violet)}
.b-slb{font-size:10.5px;font-weight:700;color:var(--ink-3);margin-top:6px}
.b-step.done .b-slb{color:var(--ok)}
.b-step.cur .b-slb{color:var(--violet)}

/* slim sticky stage strip (pinned under the app bar) */
.stage-strip{display:flex;gap:8px;padding:6px 16px 8px}
.stage-strip .b-bar{height:4px}
.stage-strip .b-slb{margin-top:4px;font-size:10px}

/* archived re-add row */
.arch-main{flex:1;min-width:0}
.reactivate{flex:none;font-size:12px;font-weight:700;color:var(--violet);background:#fff;border:1.5px solid var(--violet-line);border-radius:999px;padding:6px 12px;cursor:pointer;font-family:var(--sans)}

/* re-add modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,10,15,.45);z-index:80;display:none;align-items:center;justify-content:center;padding:24px}
.modal-backdrop.show{display:flex}
.modal{background:#fff;border-radius:22px;padding:22px;max-width:340px;width:100%;box-shadow:0 18px 50px rgba(10,10,15,.32)}
.modal-title{font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.3}
.modal-sub{font-size:12px;color:var(--ink-3);margin-top:4px}
.modal-lb{font-size:13px;font-weight:700;color:var(--ink-2);margin:16px 0 10px}
.modal-opts{display:flex;flex-wrap:wrap;gap:9px}
.modal-opts button{font-size:14px;font-weight:700;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-line);border-radius:999px;padding:11px 18px;cursor:pointer;font-family:var(--sans)}
.modal-opts button:disabled{opacity:.45;cursor:default;color:var(--ink-3);background:var(--paper);border-color:var(--line)}
.modal-hint{font-size:11.5px;color:var(--alert);background:var(--alert-tint);border-radius:10px;padding:9px 12px;margin-top:12px;line-height:1.55}
.modal-cancel{margin-top:16px;width:100%;background:var(--paper);color:var(--ink-2);border:none;border-radius:999px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.modal-result{font-size:13px;line-height:1.6;border-radius:11px;padding:11px 13px;margin-top:8px}
.modal-result.warn{color:#8a5a00;background:#fbf2df}
.modal-result.err{color:var(--alert);background:var(--alert-tint)}
.modal-danger{font-size:14px;font-weight:700;color:#fff;background:var(--alert);border:none;border-radius:999px;padding:12px 18px;cursor:pointer;font-family:var(--sans);width:100%}

/* add-song button + song picker */
.add-song-wrap{padding:11px 2px 2px}
.btn-add-song{width:100%;background:var(--violet-tint);color:var(--violet);border:1px solid var(--violet-line);border-radius:999px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.lvl-row{display:flex;gap:7px;overflow-x:auto;margin:14px 0 2px;padding-bottom:2px;scrollbar-width:none}
.lvl-row::-webkit-scrollbar{display:none}
.lvl-chip{flex:none;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;font-family:var(--sans);white-space:nowrap}
.lvl-chip.sel{background:var(--violet);color:#fff;border-color:var(--violet)}
.as-search{width:100%;border:1px solid var(--line);background:#fcfcfd;border-radius:12px;padding:11px 13px;font-size:14px;font-family:var(--sans);margin:10px 0;outline:none}
.as-search:focus{border-color:var(--violet-line);box-shadow:0 0 0 3px var(--violet-tint)}
.as-list{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.as-song{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;font-family:var(--sans)}
.as-nm{font-size:14px;font-weight:700;color:var(--ink)}
.as-comp{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}

/* song-page archive action */
.song-archive-wrap{padding:6px 16px 0;text-align:center}
.btn-archive{font-size:13px;font-weight:700;color:var(--ink-3);background:none;border:none;cursor:pointer;font-family:var(--sans);padding:8px}
.ws-head .meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px}

/* hexagon stage rail (decorative hexagons in horizontal orientation) */
.stages{display:flex;align-items:center;justify-content:center;padding:8px 18px 13px}
.stage{display:flex;flex-direction:column;align-items:center;gap:5px;width:84px}
.stage .node{width:26px;height:26px;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);background:#dddbe9;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;transition:.3s}
.stage.cur .node{background:var(--violet);box-shadow:0 0 0 5px var(--violet-tint)}
.stage.done .node{background:var(--ok)}
.stage .lb{font-size:11px;font-weight:700;color:var(--ink-3)}
.stage.cur .lb{color:var(--violet)}
.stage.done .lb{color:var(--ok)}
.stage-link{height:2px;width:30px;background:#dddbe9;margin-bottom:18px}
.stage-link.done{background:var(--ok)}

/* view-only / window banner */
.viewonly{margin:14px 18px 0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:11px 15px;display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.viewonly .lk{flex:none;color:var(--ink-3)}
.m3note{font-size:11.5px;color:var(--ink-3);line-height:1.6;padding:8px 16px 0}

/* last-lesson review */
.review-card{padding:14px}
.review-card .sum{font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.review-card .cmt{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin-top:8px}
.hw-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{font-size:12px;background:var(--paper);border:1px solid var(--line);padding:5px 11px;border-radius:999px;color:var(--ink-2)}

/* learning song cards */
.song-card{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:left;background:none;border-left:none;border-right:none;border-top:none}
.song-card:last-child{border-bottom:none}
.song-card .ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.song-card .ic.haspic{background-size:cover;background-position:25% center;background-repeat:no-repeat;font-size:0}
.song-card .ic.ph{background:linear-gradient(135deg,#eceef2,#e3e5ea);font-size:0}
.song-card .ic.sky{background:linear-gradient(180deg,#cfe3f5,#dcecd9 70%,#f0e6c8)}
.song-card .ic.rose{background:linear-gradient(180deg,#f5d9cf,#f0e3d2 70%,#e3ecd9)}
.song-card .ic.mint{background:linear-gradient(180deg,#d4ecdf,#e8f0d2 70%,#f5ecd0)}
.song-card .ic.dusk{background:linear-gradient(180deg,#d6cfee,#e6dfe2 70%,#f5ecd6)}
.song-card .mid{flex:1;min-width:0}
.song-card .nm{font-weight:700;font-size:14.5px}
.song-card .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.song-card .prog{height:4px;background:var(--paper);border-radius:99px;margin-top:7px;overflow:hidden;width:100%}
.song-card .prog i{display:block;height:100%;background:var(--violet);border-radius:99px}
.song-card .badge{flex:none;font-size:11px;font-weight:700;color:var(--ok);background:var(--ok-tint);padding:3px 8px;border-radius:999px}
.song-card .arr{flex:none;color:var(--ink-3)}

/* archived collapse */
.arch-toggle{display:flex;align-items:center;gap:8px;padding:13px 14px;cursor:pointer;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);font-weight:500}
.arch-toggle .count{font-family:var(--mono);font-size:11px;color:var(--ink-3);background:var(--paper);padding:1px 8px;border-radius:999px}
.arch-toggle .arr{margin-left:auto;transition:.2s}
.arch-open .arch-toggle .arr{transform:rotate(90deg)}
.arch-list{display:none}
.arch-open .arch-list{display:block}
.arch-row{display:flex;align-items:center;gap:11px;padding:12px 14px;border-top:1px solid var(--line);background:#fbfbfd}
.arch-row .nm{font-size:13.5px;color:var(--ink-2)}
.arch-row .sub{font-size:11px;color:var(--ink-3);margin-top:1px}

/* Hub song groups (Patch 04 P4.3 P2.A): 考試曲 / 練習曲 / 興趣曲 */
.song-group{margin-bottom:13px}
.song-group:last-of-type{margin-bottom:0}
.grp-title{display:flex;align-items:center;gap:8px;padding:0 4px 7px;font-size:13px;font-weight:700;color:var(--ink-2)}
.grp-cap{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-3);background:var(--paper);border-radius:999px;padding:2px 9px}
.grp-cap.over{color:var(--alert);background:var(--alert-tint)}
.grp-cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);background:var(--paper);border-radius:999px;padding:1px 8px}
.grp-warn{font-size:11.5px;color:var(--alert);background:var(--alert-tint);border-radius:10px;padding:8px 11px;margin-bottom:8px;line-height:1.5}
#arch.card .arch-toggle{border-top:none}

/* 轉類別 trigger: tappable hero category chip (Patch 04 P4.3 P2.B, sheet variant) */
.hero-info .h-meta.cat-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#2f3548;background:rgba(255,255,255,.5);border:1px solid rgba(35,40,63,.16);border-radius:999px;padding:7px 13px;cursor:pointer;font-family:var(--sans);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cat-chip .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;display:inline-block;opacity:.7}

/* Bottom sheet (轉換歌曲分類) */
.modal-backdrop.sheet-mode{align-items:flex-end;padding:0}
.sheet{width:100%;max-width:420px;background:var(--card);border-radius:24px 24px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom, 0px));box-shadow:0 -10px 40px rgba(10,10,15,.22);animation:sheetUp .22s ease}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-grip{width:38px;height:4px;background:var(--line);border-radius:99px;margin:6px auto 14px}
.sheet-title{font-family:var(--serif);font-size:17px;font-weight:700;margin-bottom:14px}
.sheet-rows{display:flex;flex-direction:column;gap:8px}
.sheet-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);cursor:pointer}
.sheet-row .sheet-sub{font-size:12px;font-weight:500;color:var(--alert)}
.sheet-row .sheet-tick{margin-left:auto;color:var(--violet);font-weight:700}
.sheet-row.cur{background:var(--violet-tint);border-color:var(--violet-line);color:var(--violet);cursor:default}
.sheet-row.off{opacity:.55;cursor:default}
.sheet-row.off .sheet-nm{color:var(--ink-3)}

/* hub read lists */
.cov-row{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;align-items:center}
.cov-row:last-child{border-bottom:none}
.cov-row .tick{color:var(--ok);font-weight:700;flex:none}
.cov-row .tick.disp{color:var(--violet)}
.cov-row .at{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);flex:none}

/* ---------- song teaching page ---------- */
/* #song-view / #lesson-view are the real scroll containers (body is flex, so the
   .phone view is stretched to viewport height and scrolls internally). Always
   reserve the scrollbar track so hero text width is constant across filter
   switches — independent of whether the scrollbar is present. */
#song-view,#lesson-view,#student-view,#settings-view{max-width:420px;overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable}

/* Student roster rows */
.ros-row{width:100%;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 10px rgba(10,10,15,.04);padding:11px 14px;margin-bottom:9px;cursor:pointer;text-align:left;font-family:var(--sans)}
.ros-av{width:42px;height:42px;border-radius:50%;flex:none;background:var(--violet-tint);color:var(--violet);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:16px}
.ros-av.haspic{background-size:cover;background-position:center;color:transparent}
.ros-mid{flex:1;min-width:0}
.ros-nm{font-size:15px;font-weight:700;color:var(--ink)}
.ros-grade{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.ros-badge{flex:none;font-size:10.5px;font-weight:700;color:var(--ink-3);background:var(--paper);border-radius:999px;padding:2px 9px}
.ros-badge.on{color:var(--ok);background:var(--ok-tint)}
.ros-row .arr{flex:none;color:var(--ink-3)}

/* Student Detail Page */
.b-card .b-meta{flex-wrap:wrap}
.stu-area{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px}
.stu-area .lb{flex:none;color:var(--ink-3);font-weight:700}
.stu-area .val{color:var(--ink-2)}
.stu-song{width:100%;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 10px rgba(10,10,15,.04);padding:13px 14px;margin-bottom:9px;cursor:pointer;text-align:left;font-family:var(--sans)}
.stu-song .mid{flex:1;min-width:0}
.stu-song .nm{font-size:14px;font-weight:700;color:var(--ink)}
.stu-song .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.stu-counts{font-size:11px;color:var(--ink-2);margin-top:5px}
.stu-song .prog{height:5px;background:var(--paper);border-radius:99px;overflow:hidden;margin-top:7px}
.stu-song .prog i{display:block;height:100%;background:var(--violet);border-radius:99px}
.stu-song .arr{flex:none;color:var(--ink-3)}
.hw-text{font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.hw-foot{font-size:10.5px;color:var(--ink-3);font-family:var(--mono);margin-top:5px}
.lesson-card{padding:14px 15px;margin-bottom:10px}
.ls-head{cursor:pointer}
.ls-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ls-date{font-family:var(--mono);font-size:12px;color:var(--violet);font-weight:500}
.ls-sum{font-size:13px;line-height:1.6;color:var(--ink)}
.ls-cmt{font-size:12px;color:var(--ink-2);margin-top:9px;line-height:1.55}
.ls-taught{margin-top:10px;border-top:1px dashed var(--line);padding-top:9px}
.ls-tt{font-size:12px;color:var(--ink-2);margin-top:3px;display:flex;gap:6px}
.ls-tt .tick{color:var(--ok);flex:none}
.ls-hw{margin-top:10px}
.ls-disc{display:flex;align-items:center;gap:8px;margin-top:10px}
.ls-disc .lb{font-size:12px;color:var(--ink-2);font-weight:700}

/* generic collapsible section / card — direct-child selectors so nesting works
   (a collapsed section can contain its own per-lesson accordions). */
.coll > .coll-body{display:none}
.coll.open > .coll-body{display:block}
.coll > [data-coll]{cursor:pointer}
.coll > [data-coll] .arr{transition:transform .2s}
.coll.open > [data-coll] .arr{transform:rotate(90deg)}
.section.coll > .sec-title .arr{margin-left:auto;color:var(--ink-3)}

/* flippable student card → DREAMT radar on the back. Swap-flip (no 3D context, so
   iOS can't mirror it): squash on X, swap the visible face, squash back. Only one
   face is in flow, so the card auto-sizes (front short, ability back tall). */
.flip-card{position:relative}
.flip-inner{position:relative;min-height:256px;transition:transform .17s ease;transform-origin:center;will-change:transform}
/* faces overlap at the SAME fixed size → back can never be bigger than front */
.flip-front,.flip-back{position:absolute;inset:0}
.flip-front{display:flex;flex-direction:column}
.flip-card:not(.flipped) .flip-back{display:none}
.flip-card.flipped .flip-front{display:none}
.flip-back{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* flip icon — bottom-right on BOTH faces (same style/position); avatar stays top-right */
.flip-ico{position:absolute;right:12px;bottom:12px;z-index:2;width:30px;height:30px;border-radius:999px;border:1px solid var(--violet-line);background:var(--violet-tint);color:var(--violet);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans)}
.b-av.haspic{background-size:cover;background-position:center;color:transparent}
.radar-svg{width:100%;max-width:190px;height:auto;display:block}
.radar-title{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:2px}
.radar-empty{font-size:13.5px;color:var(--ink-3);padding:40px 14px;line-height:1.6}
.rg-ring,.rg-spoke{fill:none;stroke:var(--line);stroke-width:1}
/* two reference lines distinguished by BOTH colour AND dash pattern (8 4 vs 4 3) */
.rg-req{fill:none;stroke:#c9a84c;stroke-width:1.4;stroke-dasharray:8 4;stroke-linejoin:round;stroke-linecap:round}
.rg-prev{fill:none;stroke:#b3aad6;stroke-width:1.2;stroke-dasharray:4 3;stroke-linejoin:round}
.rg-area{fill:rgba(91,79,207,.20);stroke:var(--violet);stroke-width:1.9;stroke-linejoin:round}
.rg-dot{fill:var(--violet)}
.rg-lb{fill:var(--ink-2);font-size:9px;font-family:var(--sans)}
/* legend swatches = real line segments (same colour + dash as on the chart) */
.radar-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:9px;font-size:10.5px;color:var(--ink-2)}
.radar-legend .rl{display:inline-flex;align-items:center;gap:5px}
.rl-sw{flex:none}
/* compact ability readout */
.rd-readout{width:100%;margin-top:11px;border-top:1px solid var(--line);padding-top:9px;display:flex;flex-direction:column;gap:2px}
.rd-row{display:flex;align-items:center;gap:8px;font-size:12px}
.rd-lb{flex:1;text-align:left;color:var(--ink-2)}
.rd-cur{font-family:var(--mono);color:var(--ink);font-weight:500;width:42px;text-align:right}
.rd-d{font-family:var(--mono);font-size:11px;width:54px;text-align:right}
.rd-d.up{color:var(--ok)}
.rd-d.dn{color:var(--alert)}
.rd-d.na{color:var(--ink-3)}
.rd-insight{display:flex;justify-content:center;gap:14px;font-size:11.5px;color:var(--ink-2);margin-top:10px}
.rd-met{font-size:12px;font-weight:700;color:var(--violet);margin-top:7px}
.rd-caption{font-size:10.5px;color:var(--ink-3);margin-top:4px;line-height:1.4}
/* Full-bleed to the very top: fill the iOS status-bar/notch area; square top
   corners (no grey peeking), 42px rounded bottom (Patch 05 P5.4). */
.song-hero{position:relative;min-height:calc(262px + env(safe-area-inset-top, 0px));flex:0 0 auto;border-radius:0 0 42px 42px;overflow:hidden;box-shadow:0 10px 26px rgba(10,10,15,.12)}
/* clean (image-free) hero by default; full-bleed image + scrim when tagged */
.hero-art{position:absolute;inset:0;display:block;background:#edeef2}
.hero-art.haspic{background-size:cover;background-position:left center;background-repeat:no-repeat}
.hero-art.haspic::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(248,249,250,.97) 0%,rgba(248,249,250,.86) 38%,rgba(248,249,250,.34) 60%,transparent 80%);pointer-events:none}
.hero-info{position:absolute;right:22px;top:calc(50% + env(safe-area-inset-top, 0px) / 2);transform:translateY(-50%);width:56%;min-width:0;max-height:calc(100% - 24px);z-index:2;text-align:right}
.hero-info .h-name{font-family:var(--serif);font-size:25px;font-weight:700;color:#23283f;line-height:1.18;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-info .h-comp{font-family:var(--mono);font-size:12px;color:#454b60;margin-top:7px}
.hero-info .h-era{font-family:var(--mono);font-size:12px;color:#5a6072;margin-top:3px}
.hero-info .h-div{width:38px;height:2px;background:#8b86a8;margin:11px 0 11px auto;border-radius:99px}
.hero-info .h-meta{font-size:12.5px;color:#2f3548;font-weight:700}
.hero-back{position:absolute;top:calc(env(safe-area-inset-top, 0px) + 14px);left:14px;z-index:3}

.filters{display:flex;gap:9px;padding:14px 16px;overflow-x:auto;flex:0 0 auto;scrollbar-width:none;-ms-overflow-style:none}
.filters::-webkit-scrollbar{display:none;width:0;height:0}
.fchip{flex:none;font-size:13.5px;font-weight:700;padding:10px 17px;border-radius:999px;border:none;background:#fff;color:var(--ink-2);cursor:pointer;box-shadow:0 2px 8px rgba(10,10,15,.06)}
.fchip.sel{background:var(--violet);color:#fff}
.fchip .n{font-family:var(--mono);font-weight:500;opacity:.6;margin-left:4px}

.tlist{padding:2px 16px 16px;display:flex;flex-direction:column;gap:12px}
.trow{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 2px 10px rgba(10,10,15,.04)}
.trow-head{display:flex;align-items:center;gap:13px;padding:17px 16px;cursor:pointer}
.st-dot{width:16px;height:16px;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);flex:none}
.st-dot.new{background:#d8d6e4}
.st-dot.prog{background:#6f63e8}
.st-dot.done{background:var(--ok)}
.trow .tn{font-size:15.5px;font-weight:700;line-height:1.35}
.trow .ts{font-size:12px;color:var(--ink-3);margin-top:3px}
.trow .mid{flex:1;min-width:0}
.trow .right{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.scoretag{font-size:13.5px;font-weight:700;color:var(--violet)}
.scoretag.none{color:var(--ink-3);font-weight:500;font-size:12px}
/* task-row score = 3-star display (filled 1..score, rest grey) */
.scoretag.scorestars{display:inline-flex;gap:1px}
.scorestars b{font-size:15px;line-height:1;font-weight:400;color:#d4d6df}
.scorestars b.on{color:#f5b301}
.trow .arr{color:var(--ink-3);transition:.2s}
.trow.open .arr{transform:rotate(90deg)}
.tbody{display:none;border-top:1px solid var(--line);background:#fbfbfd;padding:13px 14px}
.trow.open .tbody{display:block}
.tk-content{font-size:13px;color:var(--ink-2);line-height:1.7;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:12px}
/* Score Code chip — display only, brand violet (Patch 05 P5.1) */
.codechip{display:inline-flex;align-items:center;gap:8px;background:var(--violet);color:#fff;border-radius:10px;padding:8px 12px;margin-bottom:12px;max-width:100%;flex-wrap:wrap}
.codechip .lb{font-size:10.5px;color:#e2defb;font-weight:700;letter-spacing:.06em}
.codechip .cd{font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:#fff;word-break:break-all}
.media-strip{display:flex;gap:8px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px;scrollbar-width:none}
.media-strip::-webkit-scrollbar{display:none;width:0;height:0}
.m-thumb{flex:none;width:96px;height:68px;border-radius:10px;border:1px solid var(--line);object-fit:cover;background:var(--paper);display:block;cursor:zoom-in}
.m-video{display:block;width:100%;max-width:340px;border-radius:12px;margin:0 0 12px;background:#000}
.hw-block .hlb{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.hw-item{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;display:flex;gap:11px;align-items:center;margin-bottom:8px}
.hw-item:last-child{margin-bottom:0}
.hw-thumb{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--violet-tint),#e3def8);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.hw-item .hn{font-size:13px;font-weight:700}
.hw-item .hw-mid{flex:1;min-width:0}
.hw-song{font-size:11px;color:var(--ink-3);margin-top:2px}
.hw-thumb.haspic{background:#eceef2 center/cover no-repeat;border:none;cursor:zoom-in;padding:0}
.hwt-mid{flex:1;min-width:0}
.hwt-song{font-size:11px;color:var(--ink-3);margin-top:1px}
/* shared full-image lightbox (homework images) */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,10,15,.92);display:none;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.lightbox.show{display:flex}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 12px 44px rgba(0,0,0,.5)}

/* add-song: song-info preview step (read-only) */
.song-info{max-width:360px;max-height:82vh;overflow-y:auto}
.si-line{font-size:13px;color:var(--ink-2);margin-top:3px}
.si-line.muted{color:var(--ink-3);font-size:12px}
.si-chip{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-line);border-radius:999px;padding:5px 11px}
.si-sec{margin-top:16px}
.si-lb{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.si-text{font-size:13px;line-height:1.6;color:var(--ink)}
.si-dist-lb{font-size:12px;font-weight:700;color:var(--ink-2);margin:14px 0 8px}
.si-pie-wrap{display:flex;align-items:center;gap:16px}
.pie{width:108px;height:108px;border-radius:50%;flex:none}
.pie-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pie-leg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.pie-leg .dot{width:10px;height:10px;border-radius:3px;flex:none}
.pie-leg .pl-nm{flex:1;min-width:0}
.pie-leg .pl-pct{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.hw-add{flex:none;font-size:12px;font-weight:700;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-line);border-radius:999px;padding:7px 12px;cursor:pointer;font-family:var(--sans)}
.hw-add.added{color:var(--ok);background:var(--ok-tint);border-color:var(--ok);opacity:.85;cursor:default}

/* 功課暫存 rows (with remove) + 派發暫存功課 */
.hwt-row{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;align-items:center}
.hwt-row:last-child{border-bottom:none}
.hwt-row .tick{flex:none;font-weight:700}
.hwt-nm{flex:1;min-width:0}
.hwt-rm{flex:none;width:26px;height:26px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-3);font-size:13px;cursor:pointer;font-family:var(--sans);line-height:1}
.hw-dispatch-wrap{padding:11px 2px 2px}
.btn-dispatch{width:100%;background:var(--violet);color:#fff;border:none;border-radius:999px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.tk-acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:4px}
.taught{padding:9px 16px;font-size:13px;font-weight:700;border-radius:999px;border:1.5px solid var(--violet-line);background:#fff;color:var(--violet)}
.taught:disabled{opacity:.45;cursor:default}
.score{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.score b{width:42px;text-align:center;padding:9px 0;font-size:13.5px;color:var(--ink-3);font-weight:700;border-right:1px solid var(--line)}
.score b:last-child{border-right:none}
.score b{cursor:pointer}
.score b.sel{background:var(--violet);color:#fff}
/* 1–3 star skin over the same 1/2/3 value (display only) */
.score.stars{border:none;border-radius:0;overflow:visible;background:none;gap:3px}
.score.stars b{width:auto;padding:1px 2px;border:none;font-size:27px;line-height:1;font-weight:400;color:#d4d6df;cursor:pointer}
.score.stars b.on{color:#f5b301}
.rate-legend{font-size:11px;color:var(--ink-3);margin:-2px 16px 8px;letter-spacing:.02em}

/* 遞交課堂報告 (Insight) entry + form */
.insight-cta-wrap{padding:11px 14px 13px;border-top:1px solid var(--line)}
.btn-insight{width:100%;background:var(--violet);color:#fff;border:none;border-radius:999px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.insight-form{max-width:380px}
.insight-form .if-lb{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin:14px 0 6px}
.insight-form .if-ta{width:100%;border:1px solid var(--line);background:#fcfcfd;border-radius:12px;padding:10px 12px;font-size:14px;font-family:var(--sans);line-height:1.5;outline:none;resize:vertical}
.insight-form .if-ta:focus{border-color:var(--violet-line);box-shadow:0 0 0 3px var(--violet-tint)}
.insight-form .if-stars{margin-top:2px}
.insight-form .modal-opts{margin-top:18px}
.insight-form .modal-opts button{flex:1}
.taught-row{margin-top:8px}
.taught-toggle{display:inline-flex;align-items:center;gap:10px;border:none;background:none;cursor:pointer;padding:0;font-family:var(--sans)}
.taught-toggle .tg-track{width:42px;height:24px;border-radius:999px;background:#d8d6e4;position:relative;transition:.2s;flex:none}
.taught-toggle .tg-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(10,10,15,.25)}
.taught-toggle.on .tg-track{background:var(--violet)}
.taught-toggle.on .tg-knob{left:21px}
.taught-toggle .tg-label{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.taught-toggle.on .tg-label{color:var(--violet)}
.score-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.rubric-btn{font-size:12.5px;font-weight:700;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-line);border-radius:999px;padding:8px 14px;cursor:pointer;font-family:var(--sans)}
.rubric{margin-top:10px;font-size:13px;line-height:1.7;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;white-space:pre-wrap}
.disabled-acts{opacity:.5;pointer-events:none;filter:grayscale(.4)}

/* toast */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:13px;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:80%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* sticky song bottom bar */
.songbar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:388px;background:var(--ink);color:#fff;display:flex;align-items:center;gap:14px;padding:11px 12px 11px 20px;z-index:40;border-radius:999px;box-shadow:0 8px 28px rgba(10,10,15,.3)}
.songbar .stat{font-size:12.5px;color:#b9b4d8;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.songbar .stat b{color:#fff;font-family:var(--mono);font-weight:500}
.songbar button{margin-left:auto;background:var(--violet);color:#fff;border:none;border-radius:999px;padding:11px 18px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:var(--sans)}

/* ---------- tutor settings (/tutor-settings) ---------- */
.set-sec-head{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);margin:22px 16px 2px}
.set-hint{font-size:12.5px;color:var(--ink-2);margin:0 16px 10px;line-height:1.5}
.set-card{display:flex;flex-direction:column;gap:14px;padding:16px}
.set-field{display:flex;flex-direction:column;gap:6px}
.set-lb{font-size:13px;font-weight:700;color:var(--ink-2)}
.set-input,.set-ta,.set-select{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:11px 13px;font-size:15px;font-family:var(--sans);color:var(--ink);box-sizing:border-box}
.set-input:focus,.set-ta:focus,.set-select:focus{outline:none;border-color:var(--violet)}
.set-ta{resize:vertical;line-height:1.5}
.set-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23867fa6' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.set-photo-row{display:flex;align-items:center;gap:12px}
.set-photo{width:64px;height:64px;border-radius:50%;flex:none;background:var(--violet-tint);color:var(--violet);display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;padding:4px;box-sizing:border-box}
.set-photo.haspic{background-size:cover;background-position:center;color:transparent}
.set-photo-note{font-size:12px;color:var(--ink-2);line-height:1.45}
/* multi-select chip cloud */
.chip-cloud{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt{border:1px solid var(--line);background:var(--paper);color:var(--ink-2);border-radius:99px;padding:7px 13px;font-size:13px;font-family:var(--sans);cursor:pointer;transition:.15s}
.chip-opt.sel{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:700}
.set-coll-lb{display:flex;align-items:center;cursor:pointer}
.set-coll-lb .arr{margin-left:auto;color:var(--ink-2);transition:transform .2s}
.coll.open > .set-coll-lb .arr{transform:rotate(90deg)}
.set-subcount{font-weight:400;color:var(--violet);margin-left:8px}
.set-field.coll > .coll-body{padding-top:10px}
/* save button */
.set-save-wrap{padding:4px 16px 6px}
.btn-set-save{width:100%;background:var(--violet);color:#fff;border:none;border-radius:14px;padding:14px;font-size:15px;font-weight:700;font-family:var(--sans);cursor:pointer}
.btn-set-save:disabled{opacity:.6}
/* §3 weekly availability rows */
.tpl-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line)}
.tpl-row:last-child{border-bottom:none}
.tpl-mid{flex:1;min-width:0}
.tpl-time{font-size:14.5px;font-weight:600;color:var(--ink);font-family:var(--mono)}
.tpl-ven{font-size:12px;color:var(--ink-2);margin-top:2px}
.set-toggle{border:none;background:none;cursor:pointer;padding:0;flex:none}
.set-toggle .tg-track{width:42px;height:24px;border-radius:999px;background:#d8d6e4;position:relative;transition:.2s;display:block}
.set-toggle .tg-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(10,10,15,.25)}
.set-toggle.on .tg-track{background:var(--violet)}
.set-toggle.on .tg-knob{left:21px}
/* §4 venue-by-weekday rows */
.ven-row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line)}
.ven-row:last-child{border-bottom:none}
.ven-wd{font-size:14px;font-weight:600;color:var(--ink);width:64px;flex:none}
.ven-select{flex:1}
/* §5 account rows */
.acct-row{display:flex;align-items:baseline;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.acct-row:last-child{border-bottom:none}
.acct-row .lb{font-size:13px;font-weight:700;color:var(--ink-2);width:72px;flex:none}
.acct-row .val{font-size:14.5px;color:var(--ink);word-break:break-all}
.acct-row .val.mono{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}

/* settings — 3-tab shell + Tab 2 weekday accordion */
.set-tabs{display:flex;gap:6px;padding:12px 16px 4px}
.set-tab{flex:1;padding:10px 0;border:1px solid var(--line);background:var(--card);border-radius:12px;font-size:13.5px;font-weight:700;color:var(--ink-2);cursor:pointer;font-family:var(--sans)}
.set-tab.active{background:var(--violet);border-color:var(--violet);color:#fff}
.set-pane{display:none}
.set-pane.active{display:block}
.set-banner{margin:12px 16px 2px;background:var(--violet-tint);border:1px solid var(--violet-line);border-radius:14px;padding:11px 14px;font-size:12.5px;color:var(--violet-deep);line-height:1.5}
.set-day-head{display:flex;align-items:center;gap:8px;cursor:pointer}
.set-day-nm{font-family:var(--serif);font-weight:700}
.set-day-sum{font-size:12px;font-weight:400;color:var(--ink-2);margin-left:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-day-sum .warn{color:var(--alert);font-weight:700}
.set-day-head .arr{margin-left:auto;color:var(--ink-2);transition:transform .2s;flex:none}
.coll.open > .set-day-head .arr{transform:rotate(90deg)}
.set-slots{margin-top:2px}
.tpl-row.tpl-locked{opacity:.4}
.set-toggle:disabled{opacity:.5;cursor:default}

/* settings accent = tutor role accent (--tutor-accent), scoped to the settings view */
#settings-view .set-tab.active{background:var(--tutor-accent);border-color:var(--tutor-accent)}
#settings-view .btn-set-save{background:var(--tutor-accent)}
#settings-view .set-toggle.on .tg-track{background:var(--tutor-accent)}
#settings-view .chip-opt.sel{background:var(--tutor-accent);border-color:var(--tutor-accent)}
/* day cards — elevated, obviously-tappable surface on the grey page */
#settings-view .set-day{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 12px rgba(10,10,15,.07);margin:10px 16px 0;padding:0;overflow:hidden}
#settings-view .set-day-head{padding:15px 16px;min-height:44px;margin:0;box-sizing:border-box}
#settings-view .set-day-head:active{background:var(--violet-tint)}
#settings-view .set-day-head .arr{font-size:22px;font-weight:400;color:var(--tutor-accent);line-height:1;margin-left:auto}
#settings-view .set-day-body{border-top:1px solid var(--line)}

/* ====================================================================
   muzix 場地夥伴 App — Surface ① 開放時段 (M0)
   ==================================================================== */
/* bottom-nav app: screens clear the floating tab bar (base .screen pads 110px) */

/* login — stacked cards + OTP */
#login .login-card{margin-bottom:14px}
.otp-input{width:100%;border:1px solid var(--line);background:#fcfcfd;border-radius:14px;padding:14px 15px;font-size:22px;font-family:var(--mono);letter-spacing:.32em;text-align:center;margin-bottom:16px;outline:none}
.otp-input:focus{border-color:var(--violet-line);box-shadow:0 0 0 3px var(--violet-tint)}
.otp-foot{display:flex;justify-content:space-between;margin-top:14px}
.otp-foot .linkbtn{color:var(--violet)}
.login-foot{display:flex;justify-content:flex-end;margin-top:12px}
.login-foot .linkbtn{color:var(--violet)}


/* venue header / picker */
.vp-head{padding:18px 18px 0}
.vp-name{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink)}
.vp-select{font-family:var(--serif);font-weight:700;font-size:16px}
.vp-ref{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:5px}
.oh-title-wrap{padding-top:4px}
.oh-title-wrap .set-sec-head{margin-top:16px}

/* archived toggle */
.arch-switch-wrap{padding:4px 16px 0;text-align:right}
.arch-switch{background:none;border:none;color:var(--ink-3);font-family:var(--sans);font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 2px;text-decoration:underline}

/* day accordion cards (this app has no #settings-view wrapper, so style here) */
.set-day{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 12px rgba(10,10,15,.07);margin:10px 16px 0;overflow:hidden}
.set-day-head{padding:15px 16px;min-height:44px;box-sizing:border-box}
.set-day-head:active{background:var(--violet-tint)}
.set-day-head .arr{font-size:22px;font-weight:400;color:var(--violet);line-height:1;margin-left:auto}
.set-day-body{border-top:1px solid var(--line);padding:8px 14px 14px}

/* opening-window rows */
.oh-windows{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.oh-empty{font-size:12.5px;color:var(--alert);background:var(--alert-tint);border-radius:11px;padding:11px 13px;text-align:center;font-weight:700}
.oh-win{display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:12px 13px}
.oh-win.arch{opacity:.6;background:#fbfbfd}
.oh-win-main{flex:1;min-width:0}
.oh-time{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--ink);letter-spacing:.01em}
.oh-time .sep{color:var(--ink-3);font-size:12px}
.oh-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.oh-notes{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.st-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.st-pill.on{color:var(--ok);background:var(--ok-tint)}
.st-pill.paused{color:#8a5a00;background:#fbf2df}
.st-pill.arch{color:var(--ink-3);background:var(--paper);border:1px solid var(--line)}
.v-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.v-pill.ok{color:var(--ok);background:var(--ok-tint)}
.v-pill.pending{color:var(--ink-2);background:var(--paper)}
.v-pill.bad{color:var(--alert);background:var(--alert-tint)}

/* per-window action buttons (stacked on the right) */
.oh-acts{display:flex;flex-direction:column;gap:6px;flex:none;align-items:stretch}
.oh-act{font-size:12px;font-weight:700;color:var(--violet);background:#fff;border:1px solid var(--violet-line);border-radius:999px;padding:6px 12px;cursor:pointer;font-family:var(--sans);white-space:nowrap}
.oh-act[data-act="archive"]{color:var(--ink-3);border-color:var(--line)}
.oh-act:active{transform:scale(.97)}

/* add-window button */
.oh-add{width:100%;background:var(--violet-tint);color:var(--violet);border:1px solid var(--violet-line);border-radius:999px;padding:11px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:var(--sans)}

/* add/edit form (bottom sheet) */
.fm-grid{display:flex;gap:12px;margin-top:6px}
.fm-field{flex:1;min-width:0}
.fm-lb{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin:14px 0 6px}
.fm-grid .fm-lb{margin-top:0}
.fm-err{font-size:12px;color:var(--alert);min-height:16px;margin-top:8px}
.fm-save{margin-top:6px}

/* ====================================================================
   Surface ③ — 預約 (today's bookings, anonymised) + 更多
   ==================================================================== */
.bk-empty{margin:40px 18px;padding:26px 16px;text-align:center;color:var(--ink-3);font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.bk-list{padding:6px 16px 0;display:flex;flex-direction:column;gap:9px}
.bk-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px rgba(10,10,15,.04);padding:13px 15px}
.bk-row.done{opacity:.62;background:#fbfbfd}
.bk-time{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--ink);flex:none;letter-spacing:.01em}
.bk-time .sep{color:var(--ink-3);font-size:12px}
.bk-tags{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.bk-type{font-size:11.5px;font-weight:700;color:var(--violet);background:var(--violet-tint);border:1px solid var(--violet-line);padding:3px 10px;border-radius:999px}
.bk-code{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:3px 9px;border-radius:999px}
.bk-done-head{padding:18px 18px 2px;font-size:12.5px;font-weight:700;color:var(--ink-3)}
/* booking status pills reuse .st-pill; add neutral + no-show skins */
.st-pill.neutral{color:var(--ink-2);background:var(--paper);border:1px solid var(--line)}
.st-pill.noshow{color:#8a5a00;background:#fbf2df}

/* 更多 */
.more-wrap{padding:18px 16px}
.more-card{padding:4px 0;margin-top:2px}
.more-row{display:flex;align-items:baseline;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.more-row:last-child{border-bottom:none}
.more-row .lb{font-size:13px;font-weight:700;color:var(--ink-2);width:84px;flex:none}
.more-row .val{font-size:14.5px;color:var(--ink);word-break:break-all}
.more-row .val.mono{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.more-logout{margin-top:18px;background:var(--paper);color:var(--ink-2)}
.more-soon{margin-top:18px;font-size:12px;line-height:1.6;color:var(--ink-3);text-align:center}