/* Generated by tools/build-styles.mjs; edit the source styles. */
:root{--navy:#152a4f;--navy-2:#203b68;--ink:#18243b;--muted:#76839a;--line:#e6ebf2;--paper:#f7f9fc;--white:#fff;--purple:#7659d6;--purple-soft:#f0edff;--blue:#367bd5;--blue-soft:#e8f2ff;--orange:#e27d43;--orange-soft:#fff0e6;--green:#28a779;--green-soft:#e6f8f1;--shadow:0 16px 45px rgba(25,46,84,.08);font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0;background:var(--paper)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(54,123,213,.25);outline-offset:2px}.hidden{display:none!important}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.17em;color:#92a0b6}.button{border:0;border-radius:10px;padding:11px 16px;font-weight:800;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.button-primary{background:var(--purple);color:white;box-shadow:0 8px 18px rgba(118,89,214,.2)}.button-secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}.button-dark{background:var(--navy);color:#fff}.button-wide{width:100%;justify-content:center;padding:14px}.text-button{border:0;background:none;color:var(--purple);font-weight:800;padding:4px 0}.mini-button{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:8px;padding:7px 10px;font-size:12px;font-weight:800}.mini-button.primary{color:#fff;background:var(--purple);border-color:var(--purple)}.mini-button.is-done{background:var(--green-soft);color:var(--green);border-color:#c8eddf}.tag{display:inline-flex;align-items:center;border-radius:999px;font-size:11px;padding:4px 8px;font-weight:800}.tag-purple{background:var(--purple-soft);color:var(--purple)}.tag-blue{background:var(--blue-soft);color:var(--blue)}.tag-orange{background:var(--orange-soft);color:var(--orange)}.tag-green{background:var(--green-soft);color:var(--green)}.toast{position:fixed;z-index:20;right:28px;top:24px;background:var(--navy);color:#fff;padding:12px 17px;border-radius:10px;box-shadow:var(--shadow);font-size:13px;transform:translateY(-16px);opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateY(0)}.toast[data-kind=error]{background:#b74249}
.login-screen{min-height:100vh;display:grid;grid-template-columns:minmax(320px,1fr) minmax(400px,540px);background:#fff}.login-art{position:relative;overflow:hidden;background:linear-gradient(145deg,#172f59 0%,#1b426c 58%,#287d83 100%);padding:clamp(40px,7vw,100px);color:#fff;display:flex;flex-direction:column;justify-content:center}.login-art h1{font-size:clamp(32px,4vw,56px);line-height:1.2;letter-spacing:-.05em;margin:20px 0 18px;position:relative}.login-art p{color:#d5e4ef;line-height:1.9;margin:0;font-size:15px;position:relative}.login-art .eyebrow{color:#9ee5d2}.orb{position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%}.orb-one{width:580px;height:580px;right:-220px;top:-110px;box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 84px rgba(255,255,255,.02)}.orb-two{width:320px;height:320px;left:-170px;bottom:-120px;background:rgba(255,255,255,.03)}.login-art-note{position:relative;margin-top:70px;color:#b9eadd;font-size:12px}.pulse-dot,.status-dot,.warning-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#48d4a4;margin-right:7px;box-shadow:0 0 0 4px rgba(72,212,164,.12)}.warning-dot{background:#efad59;box-shadow:0 0 0 4px rgba(239,173,89,.12)}.login-panel{width:min(100%,460px);margin:auto;padding:42px 30px}.brand-mark,.sidebar-brand,.user-badge{display:flex;align-items:center;gap:12px}.brand-mark span,.brand-symbol{display:grid;place-items:center;background:var(--navy);color:#fff;width:38px;height:38px;border-radius:11px;font-weight:900}.brand-mark strong,.sidebar-brand strong{display:block;letter-spacing:.04em;font-size:14px}.brand-mark small,.sidebar-brand small{display:block;color:#95a2b6;font-size:10px;margin-top:3px}.login-heading h2{font-size:30px;margin:10px 0 8px;letter-spacing:-.04em}.login-heading p{color:var(--muted);font-size:13px;margin:0 0 28px}.stack-form{display:grid;gap:15px}.stack-form label,.inline-form label,.compact-form label,.form-row label{display:grid;gap:7px;font-size:12px;color:#58677e;font-weight:800}.stack-form input,.inline-form input,.inline-form select,.inline-form textarea,.compact-form input,.compact-form select,.form-row input,.form-row select,.date-input{width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;padding:11px 12px;color:var(--ink);font-size:13px;font-weight:500}.form-error{min-height:18px;text-align:center;color:#c84b4f;font-size:12px;margin:0}.demo-box{background:#f6f8fb;border:1px solid var(--line);padding:14px;border-radius:12px;margin-top:24px}.demo-box>div:first-child{display:flex;align-items:center;gap:7px;font-size:11px}.demo-box>div:first-child span:last-child{color:#9aa6b7;margin-left:auto}.demo-buttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.demo-buttons button{border:1px solid #dfe5ed;background:#fff;color:var(--navy);border-radius:7px;padding:6px 9px;font-size:11px}.privacy-note{color:#a0aabc;text-align:center;font-size:10px;line-height:1.6;margin:24px 0 0}
.app-shell{min-height:100vh;display:flex}.sidebar{width:242px;background:#fff;border-right:1px solid var(--line);padding:26px 16px 20px;display:flex;flex-direction:column;flex-shrink:0}.sidebar-brand{padding:0 10px 28px}.brand-symbol{width:34px;height:34px;border-radius:9px}.sidebar-brand strong{font-size:13px}.user-badge{padding:13px 10px;border-radius:12px;background:#f7f9fc;margin-bottom:24px}.avatar,.student-avatar{display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#8067e5,#4e8ad9);font-weight:900}.avatar{width:32px;height:32px;font-size:13px}.user-badge strong{font-size:12px;display:block}.user-badge small{font-size:10px;color:var(--muted);display:block;margin-top:3px}.chevron{margin-left:auto;color:#aab5c5}.main-nav{flex:1}.nav-section{text-transform:uppercase;color:#a7b2c1;font-size:9px;font-weight:900;letter-spacing:.15em;padding:0 12px;margin:16px 0 8px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;color:#758197;padding:12px;border-radius:9px;text-align:left;font-size:13px;font-weight:800;margin:2px 0}.nav-item:hover{background:#f5f7fb;color:var(--navy)}.nav-item.active{color:var(--purple);background:var(--purple-soft)}.nav-icon{width:18px;text-align:center;font-size:17px}.nav-item b{margin-left:auto;background:var(--orange);color:#fff;border-radius:99px;padding:2px 6px;font-size:10px}.sidebar-footer{border-top:1px solid var(--line);padding:18px 10px 0}.secure-label{font-size:10px;color:#9aa6b7;margin-bottom:18px}.logout-button{border:0;background:none;color:#7a879b;font-size:12px;padding:0;font-weight:800}.main-area{min-width:0;flex:1}.topbar{height:67px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;color:#9aa6b7;font-size:11px}.topbar-actions{display:flex;align-items:center;gap:20px}.sync-status{color:#748298}.icon-button,.mobile-brand{display:none}.page-content{max-width:1450px;margin:auto;padding:42px clamp(20px,4vw,58px) 70px}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}.page-heading h1{font-size:32px;letter-spacing:-.05em;margin:7px 0 7px;color:var(--navy)}.page-heading p{color:var(--muted);margin:0;font-size:13px}.heading-action{align-self:center}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}.quick-action{border:1px solid var(--line);background:#fff;border-radius:13px;padding:18px;text-align:left;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:12px;box-shadow:0 5px 16px rgba(22,39,67,.025)}.quick-action:hover{border-color:#cfc5fb;transform:translateY(-1px)}.quick-action>span{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--purple-soft);color:var(--purple);font-size:20px}.quick-action strong{font-size:13px;align-self:end}.quick-action small{color:#97a2b3;font-size:10px;margin-top:4px}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.metric-card{border-radius:13px;padding:19px 20px;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line)}.metric-card:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-24px;bottom:-38px;background:currentColor;opacity:.06}.metric-label{font-size:11px;color:#8190a5;font-weight:800;margin-bottom:12px}.metric-card strong{display:block;font-size:29px;letter-spacing:-.06em;color:var(--navy);min-height:36px}.metric-card>span{font-size:10px;color:#a1adbd}.metric-navy{color:var(--navy)}.metric-blue{color:var(--blue)}.metric-orange{color:var(--orange)}.metric-purple{color:var(--purple)}.metric-green{color:var(--green)}.content-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:18px}.dashboard-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:23px;box-shadow:0 5px 18px rgba(22,39,67,.025)}.panel-tall{min-height:390px}.panel-wide{grid-column:1/-1}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}.panel-header.small{align-items:center;margin-bottom:13px}.panel-header h2{font-size:18px;color:var(--navy);letter-spacing:-.03em;margin:5px 0 0}.panel-header h3{font-size:13px;margin:0}.panel-header .eyebrow{display:block}.date-chip,.count-pill{background:#f5f7fb;color:#8190a5;padding:6px 9px;border-radius:7px;font-size:10px;font-weight:800}.count-pill{color:var(--purple);background:var(--purple-soft)}.attendance-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.attendance-summary div{padding:14px 10px;background:#f8fafc;border-radius:10px;text-align:center}.attendance-summary strong{font-size:23px;color:var(--navy);display:block}.attendance-summary span{font-size:10px;color:#8c99aa}.section-divider{border-top:1px solid var(--line);margin:24px 0}.task-list,.announcement-list{display:grid;gap:10px}.task-card{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line);border-radius:11px;background:#fff}.task-card.compact{border:0;border-bottom:1px solid #edf0f5;border-radius:0;padding:12px 0}.task-card.compact:last-child{border-bottom:0}.task-check{width:19px;height:19px;border:1.5px solid #cbd4e1;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:12px;flex-shrink:0}.task-check.checked{background:var(--green);border-color:var(--green)}.task-main{min-width:0;flex:1}.task-top{display:flex;gap:8px;align-items:center;margin-bottom:5px}.task-due{font-size:10px;color:#9ca8b9}.task-main h3{font-size:13px;margin:0;color:var(--navy)}.task-main p{font-size:11px;color:#8996a8;margin:5px 0 0;line-height:1.6}.task-note{display:block;font-size:10px;color:var(--green);margin-top:5px}.task-audience{font-size:10px;color:#8a97a9;white-space:nowrap}.task-complete .task-main h3{color:#8d9aab;text-decoration:line-through}.announcement-card{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid #edf0f5}.announcement-card:last-child{border-bottom:0}.announcement-icon{width:31px;height:31px;display:grid;place-items:center;background:var(--orange-soft);border-radius:9px;color:var(--orange);flex-shrink:0}.announcement-card span{font-size:10px;color:#a2adbc}.announcement-card h3{font-size:12px;margin:4px 0;color:var(--navy)}.announcement-card p{font-size:11px;line-height:1.6;color:#8b98aa;margin:0}.student-focus{display:flex;gap:18px;align-items:center;padding:20px;background:#f8fafc;border-radius:12px}.focus-ring{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;border:6px solid var(--purple-soft);border-top-color:var(--purple);color:var(--purple);font-size:25px;font-weight:900}.student-focus strong,.student-focus span{display:block}.student-focus span{font-size:11px;color:var(--muted);margin-top:5px}.report-card{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid #edf0f5}.report-card:last-child{border-bottom:0}.report-icon{width:32px;height:32px;display:grid;place-items:center;background:var(--orange-soft);color:var(--orange);border-radius:9px}.report-card>div:nth-child(2){flex:1}.report-card strong{font-size:12px}.report-card p{font-size:10px;color:#8d99aa;margin:5px 0 0}.report-actions{display:flex;gap:7px}.empty-state{min-height:120px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#9ba7b6;font-size:12px;text-align:center}.empty-state strong{color:#718097;font-size:13px}.empty-icon{font-size:30px;color:#cdd5e1}.filter-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:#8190a5;font-size:12px}.legend{display:flex;align-items:center;gap:6px;font-size:10px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:8px}.dot:first-child{margin-left:0}.dot.purple{background:var(--purple)}.dot.blue{background:var(--blue)}.dot.orange{background:var(--orange)}.task-board{display:grid;gap:10px}.create-details{position:relative}.create-details summary{list-style:none}.create-details summary::-webkit-details-marker{display:none}.inline-form{display:grid;grid-template-columns:1.5fr .8fr .9fr 1fr;gap:12px;background:#fff;border:1px solid #ddd7fb;border-radius:12px;padding:16px;margin-top:10px}.inline-form .wide-field{grid-column:1/-1}.inline-form .button{justify-content:center}.attendance-grid{grid-template-columns:minmax(0,1.3fr) minmax(310px,.7fr)}.attendance-metrics{grid-template-columns:repeat(3,1fr)}.attendance-table{border-top:1px solid var(--line)}.attendance-row{display:grid;grid-template-columns:55px 1fr 120px 80px;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #edf0f5;font-size:12px}.attendance-row.table-head{font-size:10px;color:#9aa6b7;font-weight:800}.attendance-row select{border:1px solid var(--line);border-radius:7px;padding:7px;color:var(--ink);background:#fff;font-size:11px}.attendance-row small{color:#9aa6b7;font-size:10px}.seat-number{color:var(--purple);font-weight:900;font-size:11px}.side-stack{display:grid;gap:18px;align-content:start}.panel-note{font-size:11px;color:#8d99aa;line-height:1.7;margin-top:-8px}.compact-form{display:grid;gap:11px}.event-list{border-top:1px solid var(--line);margin-top:17px;padding-top:8px}.event-list>div{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:11px}.event-check{color:var(--green);font-weight:900}.event-list small{margin-left:auto;color:#9aa6b7}.muted{color:#9aa6b7}.form-row{display:flex;gap:12px;margin:18px 0}.form-row .grow{flex:1}.student-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.student-check{border:1px solid var(--line);border-radius:9px;padding:10px;display:flex;align-items:center;gap:8px;font-size:12px}.student-check:has(input:checked){border-color:#bcb0f4;background:var(--purple-soft)}.student-check input{accent-color:var(--purple)}.rule-list{padding-left:18px;color:#7e8da2;font-size:12px;line-height:2.2}.privacy-banner{display:flex;gap:13px;align-items:flex-start;background:#eef8f5;border:1px solid #d9f0e7;border-radius:12px;padding:15px 17px;margin-bottom:18px;color:var(--green)}.privacy-banner>span{font-size:22px}.privacy-banner strong{font-size:12px}.privacy-banner p{font-size:11px;color:#6d9386;margin:5px 0 0}.student-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.student-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px}.student-card-top{display:flex;align-items:center;gap:10px}.student-avatar{width:40px;height:40px;font-size:15px;flex-shrink:0}.seat-label{font-size:10px;color:#9aa6b7}.student-card h3{font-size:15px;margin:3px 0 0}.student-card-top .tag{margin-left:auto;font-size:9px}.private-note{background:#fafbfc;border-radius:8px;margin:17px 0;padding:10px}.private-note span{font-size:10px;color:#9aa6b7}.private-note p{font-size:11px;color:#79879b;line-height:1.6;margin:5px 0 0}.student-card-footer{display:flex;justify-content:space-between;align-items:center;color:#a4afbd;font-size:9px}.audit-panel{padding-bottom:10px}.audit-list{display:grid}.audit-row{display:grid;grid-template-columns:110px 90px 190px 1fr;gap:12px;align-items:center;border-bottom:1px solid #edf0f5;padding:12px 0;font-size:11px}.audit-time{color:#a1adbc}.audit-action{color:var(--purple);font-weight:800}.loading-line{color:#9da9b8;font-size:12px;padding:20px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.profile-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}.profile-list div{background:#f8fafc;border-radius:9px;padding:12px}.profile-list span,.profile-list strong{display:block}.profile-list span{color:#9aa6b7;font-size:10px}.profile-list strong{font-size:13px;margin-top:4px}.settings-actions{display:grid;gap:10px}.setting-action{display:flex;align-items:center;gap:13px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px}.setting-action>span{font-size:22px;color:var(--purple);width:27px;text-align:center}.setting-action strong,.setting-action small{display:block}.setting-action strong{font-size:12px;color:var(--navy)}.setting-action small{font-size:10px;color:#98a4b4;margin-top:4px}.account-policy{display:grid;gap:12px}.account-policy div{display:grid;grid-template-columns:110px 1fr;gap:15px;padding:12px 0;border-bottom:1px solid #edf0f5;font-size:12px}.account-policy div:last-child{border-bottom:0}.account-policy b{color:var(--purple)}.account-policy span{color:#7f8da1;line-height:1.6}
@media(max-width:1050px){.sidebar{width:210px}.content-grid,.dashboard-grid,.attendance-grid{grid-template-columns:1fr}.panel-wide{grid-column:auto}.student-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.login-screen{display:block}.login-art{min-height:260px;padding:38px 28px}.login-art h1{font-size:32px;margin:14px 0}.login-art-note{margin-top:28px}.orb-one{width:350px;height:350px;right:-180px;top:-140px}.login-panel{padding:32px 22px}.brand-mark{margin-bottom:42px}.sidebar{position:fixed;z-index:10;left:0;top:0;bottom:0;transform:translateX(-105%);transition:.25s;width:242px;box-shadow:var(--shadow)}.sidebar.mobile-open{transform:translateX(0)}.topbar{height:58px;padding:0 18px}.mobile-brand{display:block;font-size:11px;font-weight:900;color:var(--navy);letter-spacing:.1em}.topbar>#topbar-date{display:none}.icon-button{display:block;background:none;border:0;color:var(--navy);font-size:20px}.sync-status{font-size:10px}.page-content{padding:28px 16px 50px}.page-heading{display:block;margin-bottom:22px}.page-heading h1{font-size:27px}.heading-action{margin-top:15px}.quick-grid{grid-template-columns:1fr}.metrics-grid,.attendance-metrics{grid-template-columns:repeat(2,1fr)}.metric-card{padding:15px}.metric-card strong{font-size:24px}.content-grid{gap:14px}.panel{padding:17px}.student-check-grid{grid-template-columns:repeat(2,1fr)}.inline-form{grid-template-columns:1fr}.inline-form .wide-field{grid-column:auto}.attendance-row{grid-template-columns:40px 1fr 100px}.attendance-row small{display:none}.student-grid,.settings-grid{grid-template-columns:1fr}.audit-row{grid-template-columns:80px 70px 1fr}.audit-row>span:last-child{grid-column:3}.form-row{display:grid}.report-card{align-items:flex-start;flex-wrap:wrap}.report-actions{width:100%;padding-left:45px}.panel-header{margin-bottom:15px}}

/* Gundam tactical command deck theme */
:root{--navy:#08182b;--navy-2:#102f50;--ink:#d8e8f2;--muted:#7893a8;--line:#1a4b68;--paper:#07111d;--white:#0d2238;--purple:#ffd32a;--purple-soft:#263a42;--blue:#22c8ff;--blue-soft:#10384d;--orange:#ff9f1c;--orange-soft:#422e18;--green:#32e0a2;--green-soft:#123c3b;--red:#ff5b5b;--shadow:0 20px 55px rgba(0,0,0,.34);font-family:"Rajdhani","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
body{min-height:100vh;background-color:#07111d;background-image:linear-gradient(rgba(32,111,145,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(32,111,145,.08) 1px,transparent 1px),radial-gradient(circle at 75% 0%,rgba(0,194,255,.11),transparent 34%),radial-gradient(circle at 10% 100%,rgba(255,174,0,.07),transparent 30%);background-size:32px 32px,32px 32px,auto,auto}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.035;background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 4px)}button,input,select,textarea{font-family:inherit}.eyebrow{font-family:"Rajdhani","Noto Sans TC",sans-serif;color:#40d9ff;letter-spacing:.2em;font-weight:900}.button{border-radius:2px;text-transform:uppercase;letter-spacing:.07em;font-size:12px}.button-primary{background:#ffd32a;color:#08182b;box-shadow:0 0 20px rgba(255,211,42,.24);border:1px solid #fff09c}.button-primary:hover{background:#ffe56b;box-shadow:0 0 28px rgba(255,211,42,.42)}.button-secondary{background:#102b45;border-color:#277894;color:#bceeff}.button-dark{background:#0b2e47;color:#8ceaff;border:1px solid #1c7195}.button-dark:hover,.button-secondary:hover{background:#144766;border-color:#49d9ff;color:#fff}.text-button{color:#43d9ff;text-transform:uppercase;letter-spacing:.04em}.mini-button{border-radius:2px;background:#0c263d;color:#b9edff;border-color:#286a87}.mini-button.primary{color:#06121f;background:#ffd32a;border-color:#ffe887}.mini-button.is-done{color:#6af0bc;background:#103c3b;border-color:#2ebd8a}.tag{border-radius:2px;padding:4px 9px;text-transform:uppercase;letter-spacing:.06em;font-size:10px;border:1px solid currentColor}.tag-purple{background:#25362e;color:#ffd32a}.tag-blue{background:#10384d;color:#3ed6ff}.tag-orange{background:#422e18;color:#ffb23c}.tag-green{background:#123c3b;color:#40e4aa}.toast{background:#0a2b42;border:1px solid #36d9ff;border-left:4px solid #ffd32a;border-radius:2px;color:#e4f8ff;box-shadow:0 0 30px rgba(0,196,255,.2);font-family:"Rajdhani","Noto Sans TC",sans-serif}.toast[data-kind=error]{background:#401c25;border-color:#ff7777}
.login-screen{background:#06111e}.login-art{background:linear-gradient(135deg,#061525 0%,#0b2944 57%,#0d4e66 100%);border-right:1px solid #1f7390}.login-art:before{content:"TACTICAL DISPLAY // 01";position:absolute;top:30px;left:clamp(40px,7vw,100px);font:900 11px/1 "Rajdhani",sans-serif;letter-spacing:.22em;color:#39d9ff}.login-art:after{content:"";position:absolute;inset:26px;border:1px solid rgba(57,217,255,.18);clip-path:polygon(0 0,28% 0,28% 1px,72% 1px,72% 0,100% 0,100% 28%,calc(100% - 1px) 28%,calc(100% - 1px) 72%,100% 72%,100% 100%,72% 100%,72% calc(100% - 1px),28% calc(100% - 1px),28% 100%,0 100%,0 72%,1px 72%,1px 28%,0 28%);pointer-events:none}.login-art h1{font-family:"Rajdhani","Noto Sans TC",sans-serif;font-weight:900;letter-spacing:.03em;text-shadow:0 0 24px rgba(69,221,255,.25)}.login-art p{color:#9ac7d9}.login-art .eyebrow{color:#ffd32a}.orb{border-color:rgba(67,218,255,.45);box-shadow:0 0 30px rgba(0,190,255,.12)}.orb-one{box-shadow:0 0 0 28px rgba(67,218,255,.05),0 0 0 84px rgba(67,218,255,.035),inset 0 0 35px rgba(67,218,255,.1)}.orb-two{background:rgba(255,211,42,.04);border-color:rgba(255,211,42,.28)}.login-art-note{color:#ffd32a;font-family:"Rajdhani","Noto Sans TC",sans-serif;letter-spacing:.08em}.pulse-dot,.status-dot,.warning-dot{box-shadow:0 0 0 4px rgba(50,224,162,.14),0 0 12px rgba(50,224,162,.8)}.warning-dot{background:#ff9f1c;box-shadow:0 0 0 4px rgba(255,159,28,.14),0 0 12px rgba(255,159,28,.7)}.login-panel{background:linear-gradient(180deg,#0b1e32,#071524);border-left:1px solid #153f59}.brand-mark{margin-bottom:72px}.brand-mark span,.brand-symbol{background:#ffd32a;color:#07111d;border-radius:2px;box-shadow:0 0 18px rgba(255,211,42,.25);font-family:"Rajdhani","Noto Sans TC",sans-serif}.brand-mark strong,.sidebar-brand strong{color:#e9f9ff;text-transform:uppercase;letter-spacing:.13em}.brand-mark small,.sidebar-brand small{color:#5bb6d5;text-transform:uppercase;letter-spacing:.12em}.login-heading h2{font-family:"Rajdhani","Noto Sans TC",sans-serif;color:#fff;font-weight:900;letter-spacing:.02em}.login-heading p{color:#7893a8}.stack-form label,.inline-form label,.compact-form label,.form-row label{color:#8fb4c5;text-transform:uppercase;letter-spacing:.05em}.stack-form input,.inline-form input,.inline-form select,.inline-form textarea,.compact-form input,.compact-form select,.form-row input,.form-row select,.date-input{border-radius:2px;background:#071a2c;border-color:#205674;color:#e4f8ff;box-shadow:inset 0 0 12px rgba(0,0,0,.2)}.stack-form input:focus,.inline-form input:focus,.inline-form select:focus,.inline-form textarea:focus,.compact-form input:focus,.compact-form select:focus,.form-row input:focus,.form-row select:focus{border-color:#3ddcff;box-shadow:0 0 0 2px rgba(61,220,255,.12),inset 0 0 12px rgba(0,0,0,.2)}.demo-box{background:#081b2c;border:1px solid #205674;border-radius:2px;position:relative}.demo-box:before{content:"DEMO ACCESS";position:absolute;right:12px;top:-8px;background:#081b2c;color:#45d9ff;padding:0 6px;font:900 10px "Rajdhani",sans-serif;letter-spacing:.12em}.demo-box>div:first-child{color:#d9f6ff}.demo-box>div:first-child span:last-child{color:#668ca0}.demo-buttons button{border-radius:2px;background:#0e2b43;border-color:#286681;color:#a9eaff}.demo-buttons button:hover{background:#174766;color:#fff;border-color:#4addff}.privacy-note{color:#65869a}.form-error{color:#ff8585}
.app-shell{background:transparent}.sidebar{background:linear-gradient(180deg,#081a2d 0%,#061321 100%);border-right:1px solid #155273;box-shadow:12px 0 30px rgba(0,0,0,.18);position:relative}.sidebar:after{content:"";position:absolute;top:0;right:-2px;width:2px;height:86px;background:#ffd32a;box-shadow:0 0 18px #ffd32a}.sidebar-brand{border-bottom:1px solid #123c57;padding-bottom:22px}.user-badge{background:#0c2940;border:1px solid #1e6380;border-radius:2px;box-shadow:inset 0 0 18px rgba(0,0,0,.18)}.avatar,.student-avatar{background:linear-gradient(145deg,#ffd32a,#f57f2a);color:#07111d;border-radius:2px;box-shadow:0 0 14px rgba(255,168,35,.25)}.user-badge strong{color:#e9faff}.user-badge small{color:#6dbbd5}.chevron{color:#39cfee}.nav-section{color:#4e87a0;font-family:"Rajdhani",sans-serif;letter-spacing:.24em}.nav-item{color:#7da3b5;border-radius:2px;border-left:2px solid transparent;text-transform:uppercase;letter-spacing:.05em}.nav-item:hover{background:#0d3048;color:#d7f7ff;border-left-color:#25c8f1}.nav-item.active{color:#ffd32a;background:linear-gradient(90deg,#173947,#0c263a);border-left-color:#ffd32a;box-shadow:inset 0 0 18px rgba(255,211,42,.08)}.nav-icon{color:#43d9ff}.nav-item.active .nav-icon{color:#ffd32a;text-shadow:0 0 10px rgba(255,211,42,.6)}.nav-item b{background:#ff9f1c;color:#101820;border-radius:2px}.sidebar-footer{border-top-color:#123c57}.secure-label{color:#6b91a3}.logout-button{color:#83b1c2;text-transform:uppercase;letter-spacing:.08em}.logout-button:hover{color:#ffd32a}.topbar{background:#071827;border-bottom:1px solid #1a5975;color:#75a7bb;position:relative}.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,#ffd32a 0 9%,transparent 9% 10%,#1684a9 10% 68%,transparent 68% 69%,#ff5b5b 69% 74%,transparent 74%);opacity:.8}.sync-status{color:#62c4d9}.page-content{position:relative}.page-heading{position:relative}.page-heading:after{content:"// SYSTEM ONLINE";align-self:flex-end;color:#3b819a;font:900 10px "Rajdhani",sans-serif;letter-spacing:.17em;margin-bottom:7px}.page-heading h1{font-family:"Rajdhani","Noto Sans TC",sans-serif;color:#f2fbff;font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 16px rgba(43,209,255,.15)}.page-heading p{color:#7898aa}.quick-action{border:1px solid #1a5a75;background:linear-gradient(145deg,#0d2941,#091a2b);border-radius:2px;box-shadow:inset 0 0 20px rgba(0,0,0,.15),0 8px 24px rgba(0,0,0,.14);position:relative;overflow:hidden}.quick-action:after{content:"";position:absolute;right:-24px;top:-24px;width:78px;height:78px;border:1px solid rgba(59,218,255,.22);transform:rotate(45deg)}.quick-action:hover{border-color:#ffd32a;background:#12334a;transform:translateY(-2px);box-shadow:0 0 22px rgba(28,194,242,.15)}.quick-action>span{border-radius:2px;background:#ffd32a;color:#08182b;box-shadow:0 0 14px rgba(255,211,42,.25)}.quick-action strong{color:#e8faff;text-transform:uppercase;letter-spacing:.04em}.quick-action small{color:#72a0b4}.metrics-grid{gap:10px}.metric-card{border-radius:2px;background:linear-gradient(135deg,#0e2b44,#091b2d);border-color:#1d5d78;box-shadow:inset 0 0 20px rgba(0,0,0,.16);color:#42d8ff}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:currentColor;box-shadow:0 0 12px currentColor}.metric-card strong{color:#f3fbff;font-family:"Rajdhani",sans-serif;font-size:32px}.metric-card>span{color:#75a3b4}.metric-label{color:#77b7ca;text-transform:uppercase;letter-spacing:.1em}.metric-navy{color:#ffd32a}.metric-blue{color:#2bd3ff}.metric-orange{color:#ff9f1c}.metric-purple{color:#c487ff}.metric-green{color:#32e0a2}.panel{background:linear-gradient(145deg,#0d263e,#081a2c);border:1px solid #1b5c78;border-radius:2px;box-shadow:inset 0 0 25px rgba(0,0,0,.16),0 10px 35px rgba(0,0,0,.16);position:relative}.panel:before{content:"";position:absolute;top:-1px;left:-1px;width:20px;height:20px;border-top:2px solid #ffd32a;border-left:2px solid #ffd32a;pointer-events:none}.panel-header h2,.panel-header h3{color:#eafaff;font-family:"Rajdhani","Noto Sans TC",sans-serif;letter-spacing:.04em;text-transform:uppercase}.date-chip,.count-pill{background:#0a354c;color:#75d8ef;border:1px solid #277893;border-radius:2px}.count-pill{background:#3f3714;color:#ffd32a;border-color:#9b7818}.attendance-summary div{background:#0a2336;border:1px solid #184f69;border-radius:2px}.attendance-summary strong{color:#f4fbff;font-family:"Rajdhani",sans-serif}.attendance-summary span{color:#70a2b4}.section-divider{border-top-color:#1b536c}.task-card{border-color:#1a5772;background:#0b2135;border-radius:2px}.task-card:hover{border-color:#3bc8eb;background:#0e2a42}.task-card.compact{border-bottom-color:#194c65;background:transparent}.task-check{border-color:#2a6c86;border-radius:2px}.task-check.checked{background:#32e0a2;border-color:#32e0a2;color:#06111d;box-shadow:0 0 12px rgba(50,224,162,.3)}.task-main h3{color:#e7f9ff;font-family:"Rajdhani","Noto Sans TC",sans-serif;letter-spacing:.03em}.task-main p{color:#79a4b6}.task-due,.task-audience{color:#72aec0}.announcement-card{border-bottom-color:#194c65}.announcement-icon{background:#3c3211;color:#ffd32a;border-radius:2px;border:1px solid #866b14}.announcement-card span{color:#70a0b3}.announcement-card h3{color:#e9faff;font-family:"Rajdhani","Noto Sans TC",sans-serif}.announcement-card p{color:#79a4b6}.student-focus{background:#0a2336;border:1px solid #194f69;border-radius:2px}.focus-ring{border-color:#1b506b;border-top-color:#ffd32a;color:#ffd32a}.student-focus strong{color:#effcff}.student-focus span{color:#79a4b6}.report-card{border-bottom-color:#194c65}.report-icon{background:#422c16;color:#ffad31;border-radius:2px;border:1px solid #8f5c14}.report-card strong{color:#e8faff}.report-card p{color:#79a4b6}.empty-state{color:#638da3}.empty-state strong{color:#9bc9d7}.empty-icon{color:#27728b}.filter-row{color:#79a8b8}.legend{color:#7faabc}.task-audience{font-family:"Rajdhani",sans-serif;letter-spacing:.04em}.inline-form{background:#0a2337;border-color:#26627d;border-radius:2px}.attendance-row{border-bottom-color:#184c65}.attendance-row.table-head{color:#61a4bc}.attendance-row strong{color:#e9faff}.attendance-row select{border-color:#24617b;border-radius:2px;background:#071a2c;color:#e4f8ff}.attendance-row small{color:#76aabd}.seat-number{color:#ffd32a}.panel-note{color:#79a4b6}.event-list{border-top-color:#1a526a}.event-list small{color:#72a1b3}.form-row{margin:18px 0}.student-check{border-color:#1d5b75;background:#0a2235;border-radius:2px;color:#d8f5ff}.student-check:has(input:checked){border-color:#ffd32a;background:#3d3413;box-shadow:0 0 15px rgba(255,211,42,.12)}.student-check input{accent-color:#ffd32a}.rule-list{color:#80a8b7}.privacy-banner{background:#0d3737;border-color:#1e806f;border-radius:2px;color:#44e0ad}.privacy-banner p{color:#83c4b3}.student-card{background:#0b2236;border-color:#1b5b75;border-radius:2px}.student-card:hover{border-color:#ffd32a}.student-avatar{background:linear-gradient(145deg,#ffd32a,#ff8f22)}.seat-label{color:#6da3b6}.student-card h3{color:#effcff;font-family:"Rajdhani","Noto Sans TC",sans-serif}.private-note{background:#081b2c;border:1px solid #174963;border-radius:2px}.private-note span{color:#67a2b6}.private-note p{color:#8ab0bd}.student-card-footer{color:#668fa2}.audit-row{border-bottom-color:#194c65}.audit-time{color:#6e9caf}.audit-action{color:#ffd32a}.loading-line{color:#78a5b6}.profile-list div{background:#0a2336;border:1px solid #194f69;border-radius:2px}.profile-list span{color:#6fa1b3}.profile-list strong{color:#e8faff}.setting-action{background:#0a2336;border-color:#1c5b76;border-radius:2px;color:#dff8ff}.setting-action:hover{border-color:#ffd32a;background:#10334a}.setting-action>span{color:#ffd32a}.setting-action strong{color:#effcff}.setting-action small{color:#78a3b3}.account-policy div{border-bottom-color:#194c65}.account-policy b{color:#ffd32a}.account-policy span{color:#83aab8}
@media(max-width:760px){.login-art:before{top:18px;left:28px}.login-art:after{inset:15px}.page-heading:after{display:none}.sidebar{background:#071a2b}.topbar{background:#071827}.mobile-brand{color:#ffd32a}.icon-button{color:#43d9ff}.metrics-grid,.attendance-metrics{gap:8px}.metric-card{padding:14px 12px}.metric-card strong{font-size:25px}.panel:before{width:14px;height:14px}}
/* 公開頁只顯示非敏感的快取來源與時間，不揭露學生或外部連結。 */
.public-sync-status{display:block;margin-top:12px;color:#557185;font-size:.78rem;line-height:1.5}
/* 公告管理：導師可在同一張公告卡完成編輯、完成與移入存查。 */
.announcement-content { min-width: 0; flex: 1; }
.announcement-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.announcement-expiry, .announcement-status { font-size: 10px; color: var(--muted); }
.announcement-status { padding: 3px 7px; border: 1px solid var(--line); border-radius: 99px; }
.announcement-status.is-completed { color: var(--green); }
.announcement-status.is-expired { color: var(--orange); }
.announcement-status.is-archived { color: var(--muted); }
.announcement-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.announcement-editor { margin: -8px 0 22px; }
.announcement-editor .form-hint { display: block; margin-top: 4px; }
.announcement-archive-panel { margin-top: 18px; }
@media (max-width: 760px) {
  .announcement-card-actions .mini-button { min-height: 38px; }
}

:root {
  --navy: #24486c;
  --navy-2: #356d98;
  --ink: #26384e;
  --muted: #718399;
  --line: #dbe5ee;
  --paper: #f4f7fb;
  --white: #ffffff;
  --purple: #4d79b7;
  --purple-soft: #e9f1fb;
  --blue: #2f8bb8;
  --blue-soft: #e7f6fc;
  --orange: #d9873c;
  --orange-soft: #fff2e3;
  --green: #329b7b;
  --green-soft: #e8f7f1;
  --red: #d96065;
  --shadow: 0 16px 38px rgba(41, 76, 110, .10);
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

body {
  background: var(--paper);
  background-image: linear-gradient(rgba(67, 126, 164, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 126, 164, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink);
}

body::after { display: none; }
.eyebrow { color: #4c88ae; }
.button { border-radius: 9px; text-transform: none; letter-spacing: 0; }
.button-primary { background: #3f78ad; border: 1px solid #3f78ad; color: #fff; box-shadow: 0 8px 18px rgba(63, 120, 173, .20); }
.button-primary:hover { background: #326896; box-shadow: 0 10px 22px rgba(63, 120, 173, .24); }
.button-secondary { background: #fff; border-color: var(--line); color: var(--navy); }
.button-dark { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.button-dark:hover, .button-secondary:hover { background: #edf4fa; border-color: #aac4d8; color: var(--navy); }
.text-button { color: #3974a6; text-transform: none; letter-spacing: 0; }
.mini-button { border-radius: 8px; background: #fff; color: var(--navy); border-color: #cad9e5; }
.mini-button.primary { color: #fff; background: #3f78ad; border-color: #3f78ad; }
.mini-button.is-done { color: var(--green); background: var(--green-soft); border-color: #c8e9dc; }
.tag { border: 0; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.tag-purple { background: var(--purple-soft); color: #4d79b7; }
.tag-blue { background: var(--blue-soft); color: #2f8bb8; }
.tag-orange { background: var(--orange-soft); color: #c77831; }
.tag-green { background: var(--green-soft); color: #2f946f; }
.toast { background: var(--navy); border: 0; border-left: 4px solid #74c4bd; border-radius: 9px; color: #fff; box-shadow: var(--shadow); font-family: inherit; }

.login-screen { background: #fff; }
.login-art { background: linear-gradient(145deg, #eaf4fb 0%, #deedf7 56%, #d8f0eb 100%); border-right: 1px solid #cbdde9; color: #23415f; }
.login-art::before { color: #4b8bae; }
.login-art::after { border-color: rgba(47, 110, 165, .20); }
.login-art h1 { color: #1e4263; text-shadow: none; }
.login-art p { color: #59738a; }
.login-art .eyebrow { color: #287da3; }
.orb { border-color: rgba(54, 125, 167, .25); box-shadow: none; }
.orb-one { box-shadow: 0 0 0 28px rgba(54, 125, 167, .045), 0 0 0 84px rgba(54, 125, 167, .025), inset 0 0 35px rgba(54, 125, 167, .06); }
.orb-two { background: rgba(102, 190, 166, .08); border-color: rgba(54, 125, 167, .20); }
.pulse-dot, .status-dot, .warning-dot { box-shadow: 0 0 0 4px rgba(50, 155, 123, .12); }
.warning-dot { box-shadow: 0 0 0 4px rgba(217, 135, 60, .12); }
.login-panel { background: #fff; border-left: 1px solid var(--line); }
.brand-mark span, .brand-symbol { background: #3f78ad; color: #fff; border-radius: 10px; box-shadow: none; }
.brand-mark strong, .sidebar-brand strong { color: #24486c; text-transform: none; letter-spacing: .02em; }
.brand-mark small, .sidebar-brand small { color: #758aa0; text-transform: none; letter-spacing: .02em; }
.login-heading h2 { color: #24486c; font-family: inherit; text-shadow: none; }
.login-heading p { color: var(--muted); }
.stack-form label, .inline-form label, .compact-form label, .form-row label { color: #5b6f84; text-transform: none; letter-spacing: 0; }
.stack-form input, .inline-form input, .inline-form select, .inline-form textarea, .compact-form input, .compact-form select, .form-row input, .form-row select, .date-input { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: none; }
.stack-form input:focus, .inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus, .compact-form input:focus, .compact-form select:focus, .form-row input:focus, .form-row select:focus { border-color: #78a9c6; box-shadow: 0 0 0 3px rgba(63, 120, 173, .12); }
.demo-box { background: #f7fafc; border-color: var(--line); border-radius: 12px; }
.demo-box::before { background: #f7fafc; color: #4c88ae; }
.demo-box > div:first-child { color: var(--ink); }
.demo-box > div:first-child span:last-child { color: #8a9aac; }
.demo-buttons button { background: #fff; border-color: #d6e1ea; color: var(--navy); border-radius: 7px; }
.demo-buttons button:hover { background: #edf5fb; color: #2e6d9c; border-color: #a9c7db; }
.privacy-note, .form-error { color: #8696a8; }

.app-shell { background: transparent; }
.sidebar { background: rgba(255, 255, 255, .96); border-right: 1px solid var(--line); box-shadow: 10px 0 28px rgba(41, 76, 110, .06); }
.sidebar::after { background: #63b6bd; box-shadow: none; }
.sidebar-brand { border-bottom-color: var(--line); }
.user-badge { background: #f7fafc; border-color: var(--line); border-radius: 11px; box-shadow: none; }
.avatar, .student-avatar { background: linear-gradient(145deg, #76b8d3, #4c79ad); color: #fff; border-radius: 10px; box-shadow: none; }
.user-badge strong { color: var(--navy); }
.user-badge small, .secure-label { color: #7c8ea2; }
.chevron { color: #6a9ab9; }
.nav-section { color: #97a5b5; font-family: inherit; letter-spacing: .12em; }
.nav-item { color: #667b91; border-radius: 9px; border-left-color: transparent; text-transform: none; letter-spacing: 0; }
.nav-item:hover { background: #f0f6fb; color: #2f6f9d; border-left-color: #8ebbd2; }
.nav-item.active { color: #2f6f9d; background: #eaf3fb; border-left-color: #4c8db8; box-shadow: none; }
.nav-icon, .nav-item.active .nav-icon { color: #5e9bbb; text-shadow: none; }
.nav-item b { background: #f1b56e; color: #fff; border-radius: 999px; }
.sidebar-footer { border-top-color: var(--line); }
.logout-button { color: #71859a; text-transform: none; letter-spacing: 0; }
.logout-button:hover { color: #3974a6; }
.topbar { background: rgba(255, 255, 255, .94); border-bottom-color: var(--line); color: #71859a; }
.topbar::after { background: linear-gradient(90deg, #4f89b4 0 25%, #7bc2b0 25% 65%, #e5ae65 65% 80%, transparent 80%); box-shadow: none; opacity: .85; }
.page-heading h1 { color: #24486c; font-family: inherit; text-shadow: none; text-transform: none; letter-spacing: -.03em; }
.page-heading p { color: #718399; }
.quick-action { border-color: var(--line); background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(41, 76, 110, .06); }
.quick-action::after { border-color: rgba(63, 120, 173, .16); }
.quick-action:hover { border-color: #9fc2d7; background: #f8fbfd; box-shadow: 0 10px 28px rgba(41, 76, 110, .10); }
.quick-action > span { background: #e8f2fa; color: #3f78ad; border-radius: 10px; box-shadow: none; }
.quick-action strong { color: #2c4663; text-transform: none; letter-spacing: 0; }
.quick-action small { color: #7b8da0; }
.metric-card { background: #fff; border-color: var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgba(41, 76, 110, .06); }
.metric-card::before { box-shadow: none; }
.metric-card strong { color: #24486c; font-family: inherit; }
.metric-card > span { color: #7b8da0; }
.metric-label { color: #60819c; text-transform: none; letter-spacing: 0; }
.metric-navy { color: #4f81b3; }
.metric-blue { color: #3d9abd; }
.panel { background: #fff; border-color: var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(41, 76, 110, .07); }
.panel-header h2, .panel-header h3 { color: #2b4663; font-family: inherit; letter-spacing: 0; text-transform: none; }
.date-chip, .count-pill { background: #edf5fb; color: #4c88ae; border-color: #c9dfeb; border-radius: 999px; }
.attendance-summary div { background: #f7fafc; border-color: var(--line); border-radius: 10px; }
.attendance-summary strong { color: #2b4663; font-family: inherit; }
.attendance-summary span { color: #7b8da0; }
.section-divider { border-top-color: var(--line); }
.task-card { border-color: var(--line); background: #fbfdff; border-radius: 10px; }
.task-card:hover { border-color: #9fc2d7; background: #f7fbfd; }
.task-card.compact { border-bottom-color: var(--line); background: transparent; }
.task-card-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.task-delete-button { padding: 7px 10px; }
.task-check { border-color: #b8cfde; border-radius: 7px; }
.task-check.checked { background: #68b99b; border-color: #68b99b; color: #fff; box-shadow: none; }
.task-main h3 { color: #2c4663; font-family: inherit; letter-spacing: 0; }
.task-main p, .task-due, .task-audience { color: #7b8da0; }
.announcement-card { border-bottom-color: var(--line); }
.announcement-icon { background: #fff2df; color: #ce8339; border-color: #f3d5ac; border-radius: 9px; }
.announcement-card span, .announcement-card p { color: #7b8da0; }
.announcement-card h3 { color: #2c4663; font-family: inherit; }
.student-focus { background: #f6fafc; border-color: var(--line); border-radius: 11px; }
.student-focus strong { color: #2c4663; }
.student-focus span { color: #7b8da0; }
.report-card { border-bottom-color: var(--line); }
.report-icon { background: #fff2df; color: #ce8339; border-color: #f3d5ac; border-radius: 9px; }
.report-card strong { color: #2c4663; }
.report-card p, .empty-state, .filter-row, .legend, .panel-note { color: #7b8da0; }
.empty-state strong { color: #57728e; }
.empty-icon { color: #7cabc3; }
.inline-form { background: #f7fafc; border-color: var(--line); border-radius: 11px; }
.attendance-row { border-bottom-color: var(--line); }
.attendance-row.table-head { color: #7190a6; }
.attendance-row strong { color: #2c4663; }
.attendance-row select { border-color: #cbdbe6; border-radius: 8px; background: #fff; color: var(--ink); }
.attendance-row small, .event-list small { color: #7b8da0; }
.attendance-status-buttons { display: flex; gap: 6px; }
.attendance-status-button { border: 1px solid #cbdbe6; border-radius: 5px; background: #fff; color: #58758a; padding: 7px 13px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.attendance-status-button:hover, .attendance-status-button.is-selected { border-color: #2d91b2; background: #e8f6fa; color: #1c7295; }
.seat-number { color: #4f81b3; }
.event-list { border-top-color: var(--line); }
.student-check { border-color: var(--line); background: #fbfdff; border-radius: 9px; color: #506b85; }
.privacy-banner { background: #edf8f4; border-color: #c7e8dc; border-radius: 11px; color: #329b7b; }
.student-card { background: #fff; border-color: var(--line); border-radius: 12px; }
.student-card:hover { border-color: #9fc2d7; }
.seat-label { color: #7b9ab0; }
.student-card h3 { color: #2c4663; font-family: inherit; }
.private-note { background: #f7fafc; border-color: var(--line); border-radius: 9px; }
.private-note span { color: #7390a3; }
.private-note p { color: #5f7488; }
.student-card-footer { color: #8798a8; }
.audit-row { border-bottom-color: var(--line); }
.audit-time { color: #7d97aa; }
.audit-action { color: #4f81b3; }
.loading-line { color: #7b8da0; }
.profile-list div { background: #f7fafc; border-color: var(--line); border-radius: 9px; }
.profile-list span { color: #7b8da0; }
.profile-list strong { color: #2c4663; }
.profile-form { display: grid; gap: 18px; }
.profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-form label { display: grid; gap: 7px; color: #5b6f84; font-size: 12px; font-weight: 800; }
.profile-form input { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 11px 12px; color: var(--ink); font-size: 13px; font-weight: 500; box-sizing: border-box; }
.profile-form input:focus { outline: none; border-color: #78a9c6; box-shadow: 0 0 0 3px rgba(63, 120, 173, .12); }
.backup-list { display: grid; gap: 0; margin-top: 14px; border: 1px solid #cfe0ea; border-radius: 8px; overflow: hidden; }
.backup-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #e1ebf1; background: #fbfdff; }
.backup-row:last-child { border-bottom: 0; }
.backup-row time { color: #4d7089; font: 800 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.backup-row small { min-width: 0; overflow: hidden; color: #7890a2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.backup-row .button { min-height: 34px; padding: 7px 10px; font-size: 11px; white-space: nowrap; }
@media (max-width: 760px) { .backup-row { grid-template-columns: 1fr auto; gap: 8px; } .backup-row small { grid-column: 1 / -1; grid-row: 2; } .backup-row .button { min-width: 74px; } }
.settings-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.settings-save-bar span { color: #7b8da0; font-size: 11px; line-height: 1.6; }
.settings-save-bar button:disabled { cursor: wait; opacity: .65; }
.setting-action { background: #f7fafc; border-color: var(--line); border-radius: 10px; color: #506b85; }
.setting-action:hover { border-color: #9fc2d7; background: #eef6fb; }
.setting-action > span { color: #4f89b4; }
.setting-action strong { color: #2c4663; }
.setting-action small { color: #7b8da0; }
.account-policy div { border-bottom-color: var(--line); }
.account-policy b { color: #4f81b3; }
.account-policy span { color: #7b8da0; }
.import-details { margin: 18px 0 22px; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); box-shadow: 0 10px 24px rgba(41, 76, 110, .06); }
.import-details summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; padding: 15px 17px; color: #2f6f9d; }
.import-details summary::-webkit-details-marker { display: none; }
.import-details summary > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 3px; background: #e6f2f8; color: #3f78ad; font-size: 18px; }
.import-details summary strong { font-size: 14px; }
.import-details summary small { margin-left: auto; color: #8295a7; font-size: 11px; font-weight: 500; }
.import-body { display: grid; gap: 14px; border-top: 1px solid var(--line); padding: 16px 17px 18px; }
.import-body form { display: grid; gap: 14px; }
.import-file-label { display: grid; gap: 8px; color: #5b6f84; font-size: 12px; font-weight: 800; }
.import-file-label input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px dashed #a9c4d6; border-radius: 4px; background: #f8fbfd; color: #526f86; font: inherit; }
.import-preview { display: grid; gap: 11px; overflow: hidden; border: 1px solid #cfe0ea; background: #fbfdff; padding: 12px; }
.import-preview-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 12px; }
.import-preview-summary strong { color: #2c4663; font-size: 13px; overflow-wrap: anywhere; }
.import-preview-summary span, .import-hint { color: #7b8da0; font-size: 11px; }
.import-field-list { display: flex; flex-wrap: wrap; gap: 5px; }
.import-field-list span { padding: 4px 7px; border: 1px solid #cce2e8; border-radius: 3px; background: #eff8fa; color: #398293; font-size: 10px; }
.import-table-wrap { max-width: 100%; overflow-x: auto; }
.import-table { width: 100%; min-width: 510px; border-collapse: collapse; color: #4f687f; font-size: 11px; }
.import-table th, .import-table td { padding: 7px 8px; border-bottom: 1px solid #e5edf2; text-align: left; white-space: nowrap; }
.import-table th { background: #edf5fb; color: #4f81b3; font-size: 10px; }
.import-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.import-actions button:disabled { cursor: not-allowed; opacity: .45; }
.import-empty { border: 1px dashed #d4e2eb; padding: 12px; color: #8295a7; font-size: 12px; line-height: 1.7; }
.student-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0; color: #6e879a; font-size: 11px; }
.student-facts span { padding: 4px 6px; border: 1px solid #dbe8ef; border-radius: 3px; background: #f7fafc; }
.student-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px; color: #2c4663; }
.student-list { display: grid; gap: 10px; }
.student-edit-form { display: grid; gap: 12px; border: 1px solid var(--line); border-left: 3px solid #b9d5e3; border-radius: 4px; background: #fff; padding: 14px; box-shadow: 0 8px 20px rgba(41, 76, 110, .045); }
.student-edit-form:focus-within { border-left-color: var(--hud-cyan); box-shadow: 0 10px 24px rgba(41, 76, 110, .08); }
.student-edit-heading { display: flex; align-items: center; gap: 12px; }
.student-edit-identity { display: flex; align-items: center; gap: 9px; min-width: 170px; }
.student-edit-identity strong { display: block; color: #2c4663; font-size: 14px; }
.student-edit-identity small { display: block; margin-top: 3px; color: #7b8da0; font-size: 11px; }
.student-account-note { display: flex; align-items: baseline; gap: 7px; margin-left: auto; color: #6f8798; font-size: 11px; }
.student-account-note strong { color: #4f81b3; }
.student-account-note small { color: #8799a8; }
.student-edit-form label { display: grid; gap: 5px; color: #71859a; font-size: 10px; font-weight: 800; }
.student-edit-form input, .student-edit-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #d5e2ea; border-radius: 3px; background: #fbfdff; color: var(--ink); padding: 8px 9px; font: 500 12px/1.4 inherit; }
.student-edit-form textarea { resize: vertical; min-height: 42px; }
.student-edit-form input:focus, .student-edit-form textarea:focus { outline: none; border-color: #78a9c6; box-shadow: 0 0 0 3px rgba(63, 120, 173, .12); background: #fff; }
.student-edit-primary { display: grid; grid-template-columns: .8fr .7fr 1.2fr 1.2fr .8fr; gap: 9px; }
.student-edit-secondary { display: grid; grid-template-columns: 1.2fr 1fr .7fr 1fr 1.25fr 1fr; gap: 9px; }
.student-note-field { max-width: 700px; }
.student-save-button { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }

@media (max-width: 760px) {
  .login-art { min-height: 260px; }
  .sidebar { position: fixed; z-index: 10; left: 0; top: 0; bottom: 0; width: min(82vw, 280px); transform: translateX(-105%); transition: .25s; background: #fff; box-shadow: var(--shadow); }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-area { width: 100%; min-width: 0; }
  .topbar { padding: 0 16px; }
  .mobile-brand, .icon-button { color: #3f78ad; }
  .page-content { overflow-x: hidden; }
  .page-heading h1 { font-size: 26px; line-height: 1.3; }
  .page-heading p { line-height: 1.7; }
  .quick-action, .panel, .metric-card { min-width: 0; }
  .task-card { align-items: flex-start; }
  .task-card .mini-button { margin-left: auto; }
  .task-card-actions .mini-button { margin-left: 0; }
  .report-card { gap: 10px; }
  .report-actions { padding-left: 0; }
  .audit-row { overflow-wrap: anywhere; }
  .topbar-actions { gap: 10px; }
  .sync-status { max-width: 125px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 八德修習錄：全站水墨玉簡風格。保留既有版面與表單語意，只更換視覺語彙。 */
:root {
  --navy: #1c3937;
  --navy-2: #28524d;
  --ink: #263432;
  --muted: #6c7b71;
  --line: #c8d3c4;
  --paper: #f4f0df;
  --white: #fffdf5;
  --purple: #697b8f;
  --purple-soft: #e8edf0;
  --blue: #477e79;
  --blue-soft: #e6f1ec;
  --orange: #ae693d;
  --orange-soft: #f9ead7;
  --green: #477b65;
  --green-soft: #e7f1e5;
  --red: #a44f43;
  --shadow: 0 14px 30px rgba(61, 70, 47, .12);
  font-family: "Noto Serif TC", "PMingLiU", "Microsoft JhengHei", serif;
}
body {
  color: var(--ink);
  background-color: #f4f0df;
  background-image: radial-gradient(ellipse at 12% 8%, rgba(68, 113, 96, .10), transparent 28%), radial-gradient(ellipse at 92% 100%, rgba(164, 83, 62, .08), transparent 29%), repeating-linear-gradient(0deg, rgba(77, 89, 59, .035) 0 1px, transparent 1px 5px);
}
button, input, select, textarea { font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
.login-screen { background: #f7f3e6; }
.login-art { background: radial-gradient(ellipse at 18% 22%, rgba(70, 124, 106, .18), transparent 28%), linear-gradient(135deg, #e3eadc, #f2edda 54%, #e2ebe2); border-right-color: #b9c9b7; }
.login-art::before { color: rgba(31, 70, 63, .17); }
.login-art h1, .login-heading h2, .page-heading h1 { color: #244640; font-family: "Noto Serif TC", "PMingLiU", serif; letter-spacing: .05em; }
.login-art .eyebrow, .eyebrow { color: #4c7b6c; letter-spacing: .12em; }
.login-art-note { color: #9a523f; }
.login-panel, .sidebar, .topbar { background: rgba(255, 253, 245, .92); border-color: #c8d3c4; }
.brand-mark span, .brand-symbol { border-radius: 50%; background: #3f7063; box-shadow: inset 0 0 0 3px #dce7da, 0 2px 0 #244a41; }
.sidebar-brand strong, .brand-mark strong, .user-badge strong, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3 { color: #294a43; font-family: "Noto Serif TC", "PMingLiU", serif; }
.sidebar-brand small, .brand-mark small, .user-badge small, .secure-label { color: #78867b; }
.user-badge, .quick-action, .metric-card, .panel, .task-card, .student-card, .seat-cell, .cleaning-zone, .unassigned-panel { background: rgba(255, 253, 245, .91); border-color: #c8d3c4; box-shadow: 0 8px 22px rgba(65, 73, 49, .08); }
.nav-section { color: #8c9587; }
.nav-item { color: #5d7068; border-left-color: transparent; }
.topbar::after { background: linear-gradient(90deg, #9a4d3a 0 18%, #cfb27f 18% 44%, #4b806f 44% 80%, transparent 80%); }
.button-primary, .mini-button.primary { background: #3f7365; border-color: #3f7365; box-shadow: 0 5px 12px rgba(48, 89, 77, .18); }
.button-primary:hover, .mini-button.primary:hover { background: #305f53; border-color: #305f53; }
.button-secondary:hover, .mini-button:hover, .button-dark:hover { background: #e7eee4; border-color: #7fa28d; color: #244c42; }
.stack-form input, .inline-form input, .inline-form select, .inline-form textarea, .compact-form input, .compact-form select, .form-row input, .form-row select, .date-input, .reward-form input, .reward-form select, .reward-resolution-form input, .reward-resolution-form select, .blackboard-form input, .blackboard-form textarea { color: #283c36; background: #fffdf5; border-color: #bccbbb; }
.stack-form input:focus, .inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus, .compact-form input:focus, .compact-form select:focus, .form-row input:focus, .form-row select:focus, .reward-form input:focus, .reward-form select:focus, .reward-resolution-form input:focus, .reward-resolution-form select:focus, .blackboard-form input:focus, .blackboard-form textarea:focus { border-color: #5c9480; box-shadow: 0 0 0 3px rgba(68, 119, 101, .13); }
.metric-card::before { background: #74a08a; }
.metric-navy { color: #3d6e62; }.metric-blue { color: #4d8179; }.metric-orange { color: #a5613b; }.metric-purple { color: #6d7488; }.metric-green { color: #4d8066; }
.metric-card strong, .attendance-summary strong, .focus-ring { color: #294d45; }
.date-chip, .tag-green { background: #e8f0e5; border-color: #c5d6c4; color: #3e755f; }.tag-blue { background: #e6f0ed; color: #3f756f; }.tag-orange { background: #faecda; color: #a1613c; }.tag-purple { background: #ebedf1; color: #657085; }
.panel::before { border-color: #85aa92; }.page-heading::after { color: #729681; }
.reward-card-tile { color: #263b35; border: 2px solid #87a990; background: linear-gradient(145deg, #edf1df, #fffaf0 56%, #dde9dc) !important; box-shadow: 0 10px 22px rgba(48, 83, 67, .16); }
.reward-card-tile.reward-ocean, .reward-card-tile.reward-violet, .reward-card-tile.reward-sun, .reward-card-tile.reward-nebula, .reward-card-tile.reward-plasma, .reward-card-tile.reward-aurora { background: linear-gradient(145deg, #e8efdf, #fffaf0 58%, #dce9dd) !important; }
.reward-card-top { color: #527568; font-family: "Noto Sans TC", sans-serif; }.reward-card-badge { background: #edf3e4; border-color: #6e9a80; box-shadow: 0 0 0 5px rgba(156, 77, 56, .16); color: #9b4d3a; }.reward-card-effect { color: #32483f; background: rgba(255, 253, 245, .74); border-color: #c0d0be; }.reward-card-actions button, .reward-card-preview { color: #2f6054; background: rgba(255, 253, 245, .74); border-color: #a7bfaa; }.reward-card-actions button:hover, .reward-card-preview:hover { color: #8e4939; border-color: #b86d53; background: #fff8ed; }
.blackboard-stage { border-color: #6f9b80; border-left-color: #a9553f; background: radial-gradient(ellipse at 85% 12%, rgba(194, 161, 101, .22), transparent 26%), linear-gradient(135deg, #234d45, #386b5c 55%, #244e44); box-shadow: 0 18px 36px rgba(45, 72, 54, .23); }.blackboard-stage::before { background-image: repeating-linear-gradient(12deg, rgba(229, 237, 216, .10) 0 1px, transparent 1px 13px); }.blackboard-topline, .blackboard-title-row, .blackboard-stage footer { border-color: rgba(231, 240, 218, .34); color: #dbead8; }.blackboard-title-row h2, .blackboard-content li { color: #fffdf1; text-shadow: 0 1px 0 rgba(21, 52, 44, .55); }
.cultivation-role-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; padding: 13px 16px; border: 1px solid #b9cab8; border-left: 4px solid #9b513d; background: linear-gradient(90deg, #fffaf0, #ecf3e7); color: #395b50; }.cultivation-role-strip b { color: #914b38; font-family: "Noto Serif TC", serif; }.cultivation-role { border-bottom: 1px solid #b6c9b8; padding-bottom: 2px; font-size: 13px; }.cultivation-role i { color: #a45b44; font-style: normal; }
.cultivation-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }.cultivation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }.cultivation-panel { min-width: 0; }.treasury-cultivation-settings { display: grid; gap: 18px; margin: 0 0 18px; }.cultivation-treasury-heading { background: linear-gradient(125deg, #fffaf0, #edf4e8); }.cultivation-compact-table { width: 100%; border-collapse: collapse; color: #3f6155; font: 12px/1.35 "Noto Sans TC", sans-serif; }.cultivation-compact-table th, .cultivation-compact-table td { padding: 7px 8px; border-bottom: 1px solid #d3dfcf; text-align: left; vertical-align: middle; }.cultivation-compact-table thead th { color: #6c7e72; font-size: 11px; font-weight: 800; }.cultivation-compact-table tbody th { min-width: 74px; color: #31584d; }.cultivation-compact-table input[type="number"] { min-width: 68px; padding: 6px 7px; text-align: right; }.compact-number { display: flex; align-items: center; gap: 5px; }.compact-number b { color: #8e553e; }.compact-toggle { display: inline-flex !important; align-items: center; gap: 6px; color: #31584d !important; white-space: nowrap; }.cultivation-form { display: grid; gap: 11px; }.cultivation-form label { display: grid; gap: 6px; color: #476159; font: 700 12px/1.4 "Noto Sans TC", sans-serif; }.cultivation-form input, .cultivation-form select, .cultivation-form textarea, .cultivation-recovery-submit-form input { box-sizing: border-box; width: 100%; border: 1px solid #bdcebc; background: #fffdf5; color: #2b403a; padding: 10px; font: 14px/1.5 "Noto Sans TC", sans-serif; }.cultivation-form textarea { min-height: 72px; resize: vertical; }.cultivation-student-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 280px; overflow: auto; padding: 3px; }.cultivation-student-check { display: grid; grid-template-columns: auto 28px 1fr; gap: 5px 8px; align-items: center; padding: 8px; border: 1px solid #cad8c7; background: #fffdf6; color: #405e55; font: 12px/1.35 "Noto Sans TC", sans-serif; }.cultivation-student-check small { grid-column: 2 / -1; color: #7a887d; }.cultivation-student-check:has(input:checked) { border-color: #5d947e; background: #edf4e9; }.cultivation-review-list { display: grid; gap: 9px; }.cultivation-review-row, .cultivation-co-practice, .cultivation-appearance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #c6d5c4; background: #fffdf6; padding: 11px; }.cultivation-review-row > div:first-child, .cultivation-co-practice > div, .cultivation-appearance > div { display: grid; min-width: min(100%, 210px); gap: 3px; }.cultivation-review-row b, .cultivation-co-practice b, .cultivation-appearance b { color: #31584d; }.cultivation-review-row span, .cultivation-co-practice span, .cultivation-co-practice small, .cultivation-appearance span { color: #6f7f73; font: 12px/1.5 "Noto Sans TC", sans-serif; }.cultivation-recovery-submit-form { display: flex; flex: 1 1 270px; gap: 7px; }.cultivation-realm-copy { color: #526a61; line-height: 1.7; }.cultivation-semester-list { display: grid; gap: 7px; margin-bottom: 12px; }.cultivation-semester { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed #c6d3c2; padding: 7px 0; color: #3f6155; }.cultivation-semester span { color: #748176; font-size: 12px; }.cultivation-appearance-list { display: grid; gap: 9px; }.cultivation-appearance.equipped { border-color: #66967c; background: #eaf2e6; }
.cultivation-grid:has(#cultivation-school-day-form) > .cultivation-panel { display: none; }
.unified-reward-panel { display: grid; gap: 18px; }
.unified-reward-list { display: grid; gap: 8px; }
.unified-reward-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(170px, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid #c6d5c4; background: #fffdf6; }
.unified-reward-row > div { display: grid; gap: 3px; }
.unified-reward-row small { color: #748176; font: 12px/1.4 "Noto Sans TC", sans-serif; }
.unified-reward-row em { color: #3f7a61; font: 700 11px/1.4 "Noto Sans TC", sans-serif; font-style: normal; white-space: nowrap; }
.status-toggle { border: 1px solid #7fa890; border-radius: 999px; background: #edf4e9; color: #2f6d55; cursor: pointer; font: 700 12px/1.4 "Noto Sans TC", sans-serif; padding: 5px 10px; white-space: nowrap; }.status-toggle:hover { filter: brightness(.96); }.status-toggle.is-paused { border-color: #c7a277; background: #fff4df; color: #956334; }
.unified-reward-actions, .unified-reward-form-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.unified-reward-actions { justify-content: flex-end; }
.reward-issue-workbench { border-top: 1px solid #c6d5c4; padding-top: 18px; }
.reward-issue-workbench h3 { color: #31584d; margin: 0; font-size: 16px; }
.reward-issue-defaults { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; padding: 12px; border: 1px solid #c6d5c4; background: #f4f8ef; }
.reward-issue-defaults label { min-width: 130px; flex: 0 1 170px; }
.reward-issue-defaults .button { white-space: nowrap; }
.reward-issue-table { width: 100%; }
.reward-issue-table th, .reward-issue-table td { vertical-align: middle; }
.reward-issue-table input[type="number"] { width: 90px; min-width: 70px; padding: 7px; text-align: right; }
.reward-issue-student { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 7px; color: #31584d !important; white-space: nowrap; }
.reward-issue-student span { color: #748176; min-width: 24px; }
.reward-issue-student input { width: auto; }
.checkin-target-picker { display: grid; gap: 9px; padding: 12px; border: 1px solid #c6d5c4; background: #f4f8ef; }
.checkin-target-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 230px; overflow: auto; }
.fixed-recipient-quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 7px 0; }.fixed-recipient-quick-actions > span { color: #476159; font: 700 12px/1.4 "Noto Sans TC", sans-serif; margin-right: 2px; }.fixed-recipient-quick-actions .button { min-height: 30px; padding: 4px 9px; font-size: 12px; }
.checkin-target-option { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #cad8c7; background: #fffdf6; color: #405e55 !important; font: 12px/1.35 "Noto Sans TC", sans-serif !important; }
.checkin-target-option:has(input:checked) { border-color: #5d947e; background: #edf4e9; }
.checkin-target-option input { width: auto; }
.checkin-target-option small { color: #7a887d; }
@media (max-width: 760px) { .unified-reward-row { grid-template-columns: 1fr; gap: 5px; } .reward-issue-table { min-width: 560px; } .reward-issue-defaults { align-items: stretch; } .reward-issue-defaults .button { flex: 1 1 140px; } }
@media (max-width: 760px) { .cultivation-metrics, .cultivation-grid { grid-template-columns: 1fr; }.cultivation-student-grid, .checkin-target-list { grid-template-columns: 1fr; }.cultivation-review-row, .cultivation-co-practice, .cultivation-appearance { align-items: stretch; }.cultivation-recovery-submit-form { flex-direction: column; }.cultivation-semester { align-items: flex-start; flex-direction: column; gap: 2px; } }

.cultivation-outfit-panel { display: grid; gap: 16px; background: linear-gradient(125deg, #fffdf5, #edf5ec); }
.cultivation-outfit-current { display: flex; align-items: center; gap: 16px; }
.cultivation-current-avatar { width: 108px; height: 108px; border-radius: 16px; background: linear-gradient(145deg, #f8f3dc, #dcebdc); }
.cultivation-outfit-current h2 { margin: 5px 0 0; color: #31584d; font-size: 19px; }
.cultivation-outfit-current p { margin: 6px 0 0; }
.cultivation-realm-outfit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cultivation-realm-outfit { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; padding: 9px 10px; border: 1px solid #cad8c7; background: rgba(255, 253, 246, .8); }
.cultivation-realm-outfit > div { display: grid; gap: 3px; min-width: 0; }
.cultivation-realm-outfit b { color: #31584d; font-size: 12px; }
.cultivation-realm-outfit span { color: #77867a; font-size: 10px; }
.cultivation-realm-outfit strong { flex: 0 0 auto; color: #7b8a7e; font-size: 10px; }
.cultivation-realm-outfit.unlocked strong { color: #4d8067; }
.cultivation-realm-outfit.current { border-color: #8c6c44; background: #fff6d9; box-shadow: inset 3px 0 #c18b48; }
.cultivation-realm-outfit.current strong { color: #9a6630; }
.cultivation-realm-outfit.locked { opacity: .7; }
@media (max-width: 760px) { .cultivation-outfit-current { align-items: flex-start; }.cultivation-realm-outfit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.cultivation-current-avatar { width: 88px; height: 88px; } }

/* Tactical HUD skin: Gundam-inspired navy, cobalt, cyan and warning amber. */
:root {
  --navy: #071321;
  --navy-2: #0c2034;
  --ink: #dceaf8;
  --muted: #86a4bc;
  --line: #234764;
  --paper: #040b14;
  --white: #0a1828;
  --purple: #7893ff;
  --purple-soft: #142653;
  --blue: #35d9ff;
  --blue-soft: #0d3049;
  --orange: #f0bf45;
  --orange-soft: #3c2e0d;
  --green: #39dfaa;
  --green-soft: #0b382d;
  --red: #ff5964;
  --hud-cyan: #35d9ff;
  --shadow: 0 18px 42px rgba(0, 0, 0, .38);
  color-scheme: dark;
}

html, body {
  background: var(--paper);
  color: var(--ink);
}

body {
  background-image: linear-gradient(rgba(53, 217, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 217, 255, .055) 1px, transparent 1px), radial-gradient(circle at 80% 0%, rgba(29, 89, 139, .24), transparent 34rem);
  background-size: 32px 32px, 32px 32px, auto;
}

.login-screen, .login-panel, .app-shell, .main-area {
  background: var(--paper);
  color: var(--ink);
}

.login-art {
  background: radial-gradient(circle at 75% 24%, rgba(42, 157, 207, .28), transparent 16rem), linear-gradient(145deg, #07182a 0%, #0b2942 55%, #071321 100%);
  border-right-color: #245778;
  color: #dceaf8;
}

.login-art::before { color: #5cddff; }
.login-art::after { border-color: rgba(53, 217, 255, .22); }
.login-art h1, .login-heading h2, .page-heading h1 { color: #f2f8ff; text-shadow: 0 0 22px rgba(53, 217, 255, .12); }
.orb { border-color: rgba(53, 217, 255, .28); box-shadow: 0 0 30px rgba(53, 217, 255, .08); }
.orb-one { box-shadow: 0 0 0 28px rgba(53, 217, 255, .05), 0 0 0 84px rgba(53, 217, 255, .025), inset 0 0 35px rgba(53, 217, 255, .08); }
.orb-two { background: rgba(240, 191, 69, .07); border-color: rgba(240, 191, 69, .24); }
.pulse-dot, .status-dot { box-shadow: 0 0 0 4px rgba(57, 223, 170, .13), 0 0 16px rgba(57, 223, 170, .55); }
.warning-dot { box-shadow: 0 0 0 4px rgba(240, 191, 69, .13), 0 0 14px rgba(240, 191, 69, .45); }
.login-panel { border-left-color: #234764; }
.brand-mark span, .brand-symbol { background: linear-gradient(145deg, #188bb7, #164e83); color: #fff; border-radius: 4px; box-shadow: 0 0 18px rgba(53, 217, 255, .18); }
.brand-mark strong, .sidebar-brand strong { color: #e4f2ff; text-transform: uppercase; letter-spacing: .08em; }
.login-heading h2 { font-family: inherit; }
.stack-form label, .inline-form label, .compact-form label, .form-row label { color: #91abc0; text-transform: uppercase; letter-spacing: .08em; }
.stack-form input, .inline-form input, .inline-form select, .inline-form textarea, .compact-form input, .compact-form select, .form-row input, .form-row select, .date-input, .profile-form input {
  background: #071522;
  border-color: #2a5b7a;
  color: #e1f3ff;
  box-shadow: inset 0 0 0 1px rgba(53, 217, 255, .035);
}
.demo-buttons button:hover, .button-secondary:hover, .mini-button:hover { background: #10324b; border-color: #35d9ff; color: #fff; }
.button-primary, .button-dark, .mini-button.primary { background: linear-gradient(135deg, #147ba6, #0b4f78); border-color: #35d9ff; color: #fff; box-shadow: 0 0 16px rgba(53, 217, 255, .13); }
.button-primary:hover, .button-dark:hover, .mini-button.primary:hover { background: linear-gradient(135deg, #1b9bc6, #12618f); }

.sidebar { background: rgba(7, 19, 33, .97); border-right-color: #1c405c; box-shadow: 10px 0 30px rgba(0, 0, 0, .28); }
.sidebar::after { background: linear-gradient(#35d9ff 0 42%, #f0bf45 42% 58%, #ff5964 58%); box-shadow: 0 0 12px rgba(53, 217, 255, .35); }
.sidebar-brand { border-bottom-color: #1e405c; }
.user-badge, .quick-action, .metric-card, .panel, .student-card, .inline-form, .setting-action, .task-card {
  background: #0a1a2b;
  border-color: #234764;
  color: #dceaf8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
.avatar, .student-avatar { background: linear-gradient(145deg, #158db7, #174d83); color: #fff; box-shadow: 0 0 14px rgba(53, 217, 255, .16); }
.user-badge strong, .quick-action strong, .metric-card strong, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .profile-list strong, .setting-action strong { color: #e4eff8; }
.nav-section, .student-list-toolbar span, .task-main p, .task-due, .task-audience, .announcement-card span, .announcement-card p, .report-card p, .empty-state, .filter-row, .legend, .panel-note, .loading-line { color: #7897b0; }
.nav-item { color: #86a2ba; border-radius: 3px; }
.topbar::before { content: "TACTICAL DATA BUS // ONLINE"; color: #6687a1; }
.topbar::after { background: linear-gradient(90deg, #35d9ff 0 28%, #2b79b4 28% 68%, #f0bf45 68% 82%, #ff5964 82%); box-shadow: 0 0 10px rgba(53, 217, 255, .2); }
.quick-action:hover, .task-card:hover, .student-card:hover, .setting-action:hover { border-color: #35d9ff; background: #0c2237; }
.quick-action > span { background: #0d3049; color: #5cddff; border-color: #286488; }
.metric-card::before { background: #35d9ff; box-shadow: 0 0 12px rgba(53, 217, 255, .5); }
.attendance-summary strong, .student-focus strong, .student-card h3, .student-card-footer { color: #dceaf8; }
.attendance-summary span, .student-focus span, .profile-list span, .student-card-footer { color: #7897b0; }
.task-card.compact { background: transparent; border-bottom-color: #1e405c; }
.student-check:has(input:checked) { border-color: #2c8497; background: #0b302f; box-shadow: inset 0 0 0 1px rgba(57, 223, 170, .2); }
.private-note span { color: #70a6ba; }
.private-note p { color: #abc4d3; }
.import-details summary { color: #5cddff; }
.import-details summary > span { background: #0d3049; color: #5cddff; }
.import-details summary small, .import-preview-summary span, .import-hint, .import-empty { color: #7897b0; }
.import-body, .import-table th, .import-table td { border-color: #1e405c; }
.import-file-label { color: #91abc0; }
.import-file-label input { background: #071522; border-color: #2a5b7a; color: #abc4d3; }
.import-table { color: #b5cbd9; }
.import-table th { background: #0c2a42; color: #6adfff; }
.import-table td { border-bottom-color: #1e405c; }
.import-field-list span { background: #0d3049; color: #78dfff; border-color: #286488; }
.toast { background: #0b2337; border-color: #35d9ff; color: #e5f6ff; box-shadow: var(--shadow); }

/* Excel-like student data grid. The desktop width is intentionally wide; phones scroll horizontally. */
.student-sheet-wrap { overflow-x: auto; border: 1px solid #234764; background: #071321; box-shadow: 0 16px 34px rgba(0, 0, 0, .24); -webkit-overflow-scrolling: touch; }
.student-sheet-header, .student-sheet-row { display: grid; grid-template-columns: .55fr 1.25fr .9fr 1.25fr .7fr 1fr .7fr; min-width: 960px; }
.student-sheet-header { position: sticky; top: 0; z-index: 2; padding: 0 12px; background: #0c2a42; border-bottom: 1px solid #2c698d; color: #74dbff; font: 800 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.student-sheet-header span { padding: 11px 8px; }
.student-edit-form { display: block; min-width: 960px; border: 0; border-bottom: 1px solid #1d3d58; border-left: 3px solid transparent; border-radius: 0; background: #071522; padding: 0 12px; box-shadow: none; }
.student-edit-form:hover, .student-edit-form:focus-within { background: #0a2033; border-left-color: #35d9ff; box-shadow: none; }
.student-sheet-row { align-items: stretch; gap: 0; }
.student-sheet-row .sheet-cell { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 8px; border-right: 1px solid #173a56; }
.student-sheet-row input { min-width: 0; border: 0; border-radius: 0; background: transparent; padding: 7px 2px; color: #dceaf8; }
.student-sheet-row input:focus { background: #0c2a42; border-color: #35d9ff; box-shadow: inset 0 0 0 1px #35d9ff; }
.student-sheet-row .student-save-button { align-self: center; min-width: 64px; margin: 8px; }
.student-sheet-detail { border-top: 1px dashed #21435e; padding: 10px 8px 12px; }
.student-account-note { justify-content: flex-start; margin: 0 0 9px; color: #7fa6be; }
.student-account-note strong { color: #5cddff; }
.student-account-note small { color: #879fb3; }
.student-edit-secondary { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 8px; }
.student-edit-secondary .sheet-cell { display: grid; gap: 4px; }
.student-edit-secondary .sheet-cell > span, .student-note-field > span { display: block; color: #6e9ab6; font-size: 10px; }
.student-edit-form input, .student-edit-form textarea { background: #0a1b2a; border-color: #244c68; color: #dceaf8; }
.student-edit-form input:focus, .student-edit-form textarea:focus { border-color: #35d9ff; box-shadow: 0 0 0 3px rgba(53, 217, 255, .12); background: #0d263b; }
.student-note-field { color: #6e9ab6; }

@media (max-width: 760px) {
  .student-sheet-wrap { margin-inline: -2px; }
  .student-sheet-header, .student-sheet-row, .student-edit-form { min-width: 900px; }
  .student-sheet-header { position: sticky; top: 0; }
  .student-edit-detail { min-width: 900px; }
}

/* Light HUD command interface layer */
:root {
  --hud-blue: #3d83b4;
  --hud-cyan: #4ba9b0;
  --hud-amber: #d69a4b;
  --hud-grid: rgba(61, 131, 180, .075);
}

body {
  background-color: #f1f6fa;
  background-image:
    linear-gradient(var(--hud-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hud-grid) 1px, transparent 1px),
    radial-gradient(circle at 88% 2%, rgba(83, 177, 182, .13), transparent 28%),
    radial-gradient(circle at 8% 92%, rgba(73, 132, 190, .09), transparent 30%);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.login-art {
  background-image:
    linear-gradient(rgba(61, 131, 180, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 131, 180, .08) 1px, transparent 1px),
    linear-gradient(145deg, #eaf4fb 0%, #deedf7 56%, #d8f0eb 100%);
  background-size: 30px 30px, 30px 30px, auto;
}

.login-art::after {
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .16), 0 0 0 1px rgba(61, 131, 180, .05);
}

.login-panel {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.login-panel::before {
  content: "SECURE ACCESS // 01";
  position: absolute;
  top: 24px;
  right: 30px;
  color: #8eafc1;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
}

.brand-mark span, .brand-symbol {
  border-radius: 3px;
  background: linear-gradient(145deg, #4a88b8, #316b9c);
  box-shadow: 0 0 0 3px rgba(75, 169, 176, .10);
}

.brand-mark strong, .sidebar-brand strong {
  letter-spacing: .06em;
}

.login-heading h2, .page-heading h1, .panel-header h2, .panel-header h3 {
  letter-spacing: -.02em;
}

.stack-form input, .inline-form input, .inline-form select, .inline-form textarea, .compact-form input, .compact-form select, .form-row input, .form-row select, .date-input {
  border-radius: 3px;
  background: rgba(255, 255, 255, .88);
}

.button-primary, .button-dark, .mini-button.primary {
  border-radius: 3px;
  background: linear-gradient(135deg, #4383b4, #326e9e);
}

.demo-box, .user-badge, .quick-action, .metric-card, .panel, .task-card, .student-card, .inline-form, .setting-action {
  border-radius: 4px;
}

.app-shell {
  background-image: linear-gradient(90deg, rgba(61, 131, 180, .018) 1px, transparent 1px);
  background-size: 42px 42px;
}

.sidebar {
  background-image: linear-gradient(rgba(61, 131, 180, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 131, 180, .025) 1px, transparent 1px);
  background-size: 22px 22px;
}

.sidebar::after {
  width: 3px;
  height: 112px;
  background: linear-gradient(#4ba9b0 0 42%, #d69a4b 42% 58%, #4f89b4 58%);
}

.sidebar-brand {
  position: relative;
  padding-bottom: 26px;
}

.sidebar-brand::after {
  content: "CMD // CLASSROOM LINK";
  position: absolute;
  right: 0;
  bottom: 8px;
  color: #9ab1c0;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

.nav-section {
  font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .18em;
}

.nav-item {
  border-radius: 3px;
  position: relative;
}

.nav-item.active {
  background: linear-gradient(90deg, #e7f3fa, #f7fbfd);
  box-shadow: inset 0 0 0 1px rgba(79, 137, 180, .10);
}

.nav-item.active::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hud-cyan);
  box-shadow: 0 0 0 3px rgba(75, 169, 176, .12);
}

.topbar {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, .84);
}

.topbar::before {
  content: "TACTICAL DATA BUS // ONLINE";
  position: absolute;
  left: 24px;
  top: 7px;
  color: #9ab1c0;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
}

.topbar::after {
  height: 3px;
  background: linear-gradient(90deg, #4f89b4 0 18%, transparent 18% 19%, #7bc2b0 19% 56%, transparent 56% 58%, #e5ae65 58% 67%, transparent 67% 100%);
}

.sync-status {
  font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

.page-heading {
  border-bottom: 1px solid rgba(113, 144, 166, .22);
  padding-bottom: 18px;
}

.page-heading::before {
  content: "COMMAND MODULE // 01";
  display: block;
  margin-bottom: 8px;
  color: #8aaaba;
  font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
}

.page-heading::after {
  color: #4ba9b0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.quick-action, .metric-card, .panel {
  box-shadow: 0 12px 26px rgba(41, 76, 110, .065), inset 0 0 0 1px rgba(255, 255, 255, .65);
}

.quick-action::before, .metric-card::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 9px;
  right: 10px;
  border-top: 1px solid rgba(75, 169, 176, .42);
  border-right: 1px solid rgba(75, 169, 176, .42);
}

.quick-action > span {
  border-radius: 3px;
  background: linear-gradient(145deg, #e4f3f7, #eaf0fa);
  box-shadow: inset 0 0 0 1px rgba(75, 169, 176, .15);
}

.metric-card {
  overflow: hidden;
}

.metric-card::before {
  height: 2px;
}

.panel {
  overflow: hidden;
}

.panel::before {
  width: 28px;
  height: 28px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.panel-header {
  border-bottom: 1px solid rgba(113, 144, 166, .15);
  padding-bottom: 12px;
}

.date-chip, .count-pill {
  border-radius: 3px;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.task-card, .student-card, .setting-action {
  position: relative;
  border-left: 3px solid #b9d5e3;
}

.task-card:hover, .student-card:hover, .setting-action:hover {
  border-left-color: var(--hud-cyan);
}

.task-check, .student-avatar, .announcement-icon, .report-icon {
  border-radius: 3px;
}

.text-button {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}

@media (max-width: 760px) {
  .login-panel::before { top: 15px; right: 22px; font-size: 8px; }
  .topbar::before { left: 16px; top: 5px; font-size: 7px; }
  .topbar-actions { padding-top: 7px; }
  .page-heading { padding-bottom: 14px; }
  .page-heading::before { font-size: 8px; }
  .page-heading::after { margin-top: 8px; }
  .panel-header { gap: 8px; }
  .profile-fields { grid-template-columns: 1fr; }
  .settings-save-bar { align-items: stretch; flex-direction: column; }
  .settings-save-bar .button { width: 100%; justify-content: center; }
  .import-details summary { align-items: flex-start; }
  .import-details summary small { width: 100%; margin: 2px 0 0 34px; }
  .import-body { padding: 14px 12px 15px; }
  .import-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .import-actions .button { justify-content: center; padding-inline: 8px; }
  .student-list-toolbar { align-items: flex-start; flex-direction: column; }
  .student-edit-heading { align-items: stretch; flex-wrap: wrap; }
  .student-edit-identity { min-width: 0; flex: 1 1 180px; }
  .student-account-note { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .student-save-button { width: 100%; margin-left: 0; justify-content: center; }
  .student-edit-primary, .student-edit-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-edit-primary label:nth-child(3), .student-edit-secondary label:first-child, .student-edit-secondary label:nth-child(5), .student-note-field { grid-column: 1 / -1; }
}

/* Final theme lock: this block intentionally comes after the legacy light HUD layer. */
html, body { background: #040b14; color: #dceaf8; }
body {
  background-color: #040b14;
  background-image: linear-gradient(rgba(53, 217, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 217, 255, .055) 1px, transparent 1px), radial-gradient(circle at 80% 0%, rgba(29, 89, 139, .24), transparent 34rem);
  background-size: 32px 32px, 32px 32px, auto;
}
.login-screen, .login-panel, .app-shell, .main-area { background: #040b14; color: #dceaf8; }
.login-art {
  background-image: radial-gradient(circle at 75% 24%, rgba(42, 157, 207, .28), transparent 16rem), linear-gradient(145deg, #07182a 0%, #0b2942 55%, #071321 100%);
  background-size: auto;
  border-right-color: #245778;
}
.login-art h1, .login-heading h2, .page-heading h1 { color: #f2f8ff; }
.login-art p, .login-heading p, .page-heading p { color: #8aa9c4; }
.login-art .eyebrow, .eyebrow { color: #5cddff; }
.login-art-note { color: #f0c44f; }
.login-panel { background: #071321; border-left-color: #234764; }
.brand-mark span, .brand-symbol, .avatar, .student-avatar { background: linear-gradient(145deg, #188bb7, #164e83); color: #fff; }
.brand-mark strong, .sidebar-brand strong, .user-badge strong { color: #e4f2ff; }
.brand-mark small, .sidebar-brand small, .user-badge small, .secure-label { color: #7897b0; }
.stack-form label, .inline-form label, .compact-form label, .form-row label { color: #91abc0; }
.stack-form input, .inline-form input, .inline-form select, .inline-form textarea, .compact-form input, .compact-form select, .form-row input, .form-row select, .date-input, .profile-form input { background: #071522; border-color: #2a5b7a; color: #e1f3ff; }
.stack-form input:focus, .inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus, .compact-form input:focus, .compact-form select:focus, .form-row input:focus, .form-row select:focus, .profile-form input:focus { border-color: #35d9ff; box-shadow: 0 0 0 3px rgba(53, 217, 255, .12); }
.demo-box, .import-details, .import-preview { background: #071522; border-color: #234764; }
.demo-box::before { background: #071522; color: #5cddff; }
.demo-box > div:first-child { color: #dceaf8; }
.demo-box > div:first-child span:last-child, .privacy-note, .form-error { color: #7f9bb5; }
.demo-buttons button, .button-secondary, .mini-button { background: #0b1a2b; border-color: #2c5c7e; color: #c7e7fa; }
.button-primary, .button-dark, .mini-button.primary { background: linear-gradient(135deg, #147ba6, #0b4f78); border-color: #35d9ff; color: #fff; }
.sidebar { background: rgba(7, 19, 33, .97); background-image: linear-gradient(rgba(53, 217, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 217, 255, .025) 1px, transparent 1px); border-right-color: #1c405c; }
.sidebar::after { background: linear-gradient(#35d9ff 0 42%, #f0bf45 42% 58%, #ff5964 58%); }
.user-badge, .quick-action, .metric-card, .panel, .student-card, .inline-form, .setting-action, .task-card { background: #0a1a2b; border-color: #234764; color: #dceaf8; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.nav-item { color: #86a2ba; }
.nav-item:hover, .nav-item.active { background: linear-gradient(90deg, #0e324b, #0a1a2b); color: #53d9ff; border-left-color: #35d9ff; }
.nav-item.active::after { background: #35d9ff; box-shadow: 0 0 9px #35d9ff; }
.nav-icon, .nav-item.active .nav-icon { color: #4fbad8; }
.topbar { background: rgba(4, 14, 25, .94); border-bottom-color: #234764; color: #92b1c9; }
.topbar::after { background: linear-gradient(90deg, #35d9ff 0 28%, #2b79b4 28% 68%, #f0bf45 68% 82%, #ff5964 82%); }
.sync-status { color: #53dfb0; }
.page-heading::after { color: #7098b2; }
.page-heading h1, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .metric-card strong, .profile-list strong, .setting-action strong { color: #e4eff8; }
.quick-action > span { background: #0d3049; color: #5cddff; }
.metric-label { color: #68b8d4; }
.metric-navy, .metric-blue { color: #54d8ff; }
.metric-orange { color: #f0bf45; }
.metric-purple { color: #91a5ff; }
.metric-green { color: #43e0af; }
.panel::before { border-color: #3a83a7; }
.panel-header { border-bottom-color: #21435e; }
.date-chip, .count-pill { background: #0d3049; color: #6adfff; border-color: #2c698d; }
.count-pill { background: #3a2b0d; color: #f5cf67; border-color: #78602b; }
.attendance-summary div, .profile-list div, .student-focus, .private-note { background: #071522; border-color: #234764; }
.attendance-summary strong, .student-focus strong { color: #dceaf8; }
.attendance-summary span, .student-focus span, .profile-list span, .student-card-footer, .task-main p, .task-due, .task-audience, .announcement-card span, .announcement-card p, .report-card p, .empty-state, .filter-row, .legend, .panel-note, .loading-line { color: #7897b0; }
.section-divider, .announcement-card, .report-card, .audit-row, .event-list { border-color: #1e405c; }
.task-check { border-color: #2d6686; background: #071522; }
.task-check.checked { background: #159b77; border-color: #39dfaa; }
.announcement-icon, .report-icon { background: #3a2b0d; color: #f0bf45; border-color: #78602b; }
.focus-ring { border-color: #2d6686; border-top-color: #35d9ff; color: #5cddff; }
.student-check { border-color: #234764; background: #071522; color: #a4bed1; }
.student-check:has(input:checked) { border-color: #2c8497; background: #0b302f; }
.student-check input { accent-color: #35d9ff; }
.privacy-banner { background: #0b302a; border-color: #1d6a58; color: #53e2b0; }
.privacy-banner p { color: #87cbb7; }
.student-list-toolbar { color: #e4eff8; }
.toast { background: #0b2337; border-color: #35d9ff; color: #e5f6ff; }
.toast[data-kind="error"] { background: #401d2a; border-color: #ff5964; }

/* Final light command-deck layer. Keep the technical grid while restoring a light workspace. */
:root {
  --navy: #193b5b;
  --navy-2: #2f6f9d;
  --ink: #25445f;
  --muted: #6f8498;
  --line: #d2e1eb;
  --paper: #f4f8fb;
  --white: #ffffff;
  --purple: #397bb2;
  --purple-soft: #e8f2fa;
  --blue: #2e9cc4;
  --blue-soft: #e4f5fa;
  --orange: #d58a36;
  --orange-soft: #fff2df;
  --green: #2b9a7a;
  --green-soft: #e7f7f1;
  --red: #c9535b;
  --hud-cyan: #4ba9b0;
  --shadow: 0 14px 34px rgba(41, 76, 110, .10);
  color-scheme: light;
}
html, body { background: #f4f8fb; color: #25445f; }
body {
  background-color: #f4f8fb;
  background-image: linear-gradient(rgba(61, 131, 180, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 131, 180, .07) 1px, transparent 1px), radial-gradient(circle at 88% 2%, rgba(83, 177, 182, .13), transparent 28%), radial-gradient(circle at 8% 92%, rgba(73, 132, 190, .09), transparent 30%);
  background-size: 28px 28px, 28px 28px, auto, auto;
}
.login-screen, .login-panel, .app-shell, .main-area { background: #f4f8fb; color: #25445f; }
.login-art { background-image: linear-gradient(rgba(61, 131, 180, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 131, 180, .08) 1px, transparent 1px), linear-gradient(145deg, #eaf4fb 0%, #deedf7 56%, #d8f0eb 100%); background-size: 30px 30px, 30px 30px, auto; border-right-color: #cbdde9; color: #23415f; }
.login-art h1, .login-heading h2, .page-heading h1 { color: #1e4263; text-shadow: none; }
.login-art p, .login-heading p, .page-heading p { color: #59738a; }
.login-art .eyebrow, .eyebrow { color: #287da3; }
.login-art-note { color: #2d8b70; }
.login-panel { background: #fff; border-left-color: #d2e1eb; }
.brand-mark span, .brand-symbol, .avatar, .student-avatar { background: linear-gradient(145deg, #76b8d3, #4c79ad); color: #fff; box-shadow: none; }
.brand-mark strong, .sidebar-brand strong, .user-badge strong { color: #24486c; }
.brand-mark small, .sidebar-brand small, .user-badge small, .secure-label { color: #758aa0; }
.stack-form label, .inline-form label, .compact-form label, .form-row label { color: #5b6f84; }
.stack-form input, .inline-form input, .inline-form select, .inline-form textarea, .compact-form input, .compact-form select, .form-row input, .form-row select, .date-input, .profile-form input { background: #fff; border-color: #d2e1eb; color: #25445f; }
.stack-form input:focus, .inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus, .compact-form input:focus, .compact-form select:focus, .form-row input:focus, .form-row select:focus, .profile-form input:focus { border-color: #78a9c6; box-shadow: 0 0 0 3px rgba(63, 120, 173, .12); }
.demo-box, .import-details, .import-preview { background: #fff; border-color: #d2e1eb; }
.demo-box::before { background: #fff; color: #4c88ae; }
.demo-box > div:first-child, .student-list-toolbar { color: #2c4663; }
.demo-box > div:first-child span:last-child, .privacy-note, .form-error { color: #8696a8; }
.demo-buttons button, .button-secondary, .mini-button { background: #fff; border-color: #d2e1eb; color: #24486c; }
.demo-buttons button:hover, .button-secondary:hover, .mini-button:hover { background: #edf5fb; border-color: #a9c7db; color: #2e6d9c; }
.button-primary, .button-dark, .mini-button.primary { background: linear-gradient(135deg, #4383b4, #326e9e); border-color: #4383b4; color: #fff; box-shadow: 0 8px 18px rgba(63, 120, 173, .18); }
.sidebar { background: rgba(255, 255, 255, .97); background-image: linear-gradient(rgba(61, 131, 180, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 131, 180, .025) 1px, transparent 1px); border-right-color: #d2e1eb; box-shadow: 10px 0 28px rgba(41, 76, 110, .06); }
.sidebar::after { background: linear-gradient(#4ba9b0 0 42%, #d69a4b 42% 58%, #4f89b4 58%); box-shadow: none; }
.user-badge, .quick-action, .metric-card, .panel, .student-card, .inline-form, .setting-action, .task-card { background: #fff; border-color: #d2e1eb; color: #25445f; box-shadow: 0 8px 24px rgba(41, 76, 110, .06); }
.nav-item { color: #667b91; }
.nav-item:hover, .nav-item.active { background: #eaf3fb; color: #2f6f9d; border-left-color: #4c8db8; }
.nav-item.active::after { background: #4ba9b0; box-shadow: none; }
.nav-icon, .nav-item.active .nav-icon { color: #5e9bbb; }
.topbar { background: rgba(255, 255, 255, .94); border-bottom-color: #d2e1eb; color: #71859a; }
.topbar::after { background: linear-gradient(90deg, #4f89b4 0 28%, #7bc2b0 28% 68%, #e5ae65 68% 82%, #c9535b 82%); box-shadow: none; }
.sync-status { color: #4f91a6; }
.page-heading::after { color: #7ca6bd; }
.page-heading h1, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .metric-card strong, .profile-list strong, .setting-action strong { color: #24486c; }
.quick-action > span { background: #e8f2fa; color: #3f78ad; }
.quick-action:hover, .task-card:hover, .student-card:hover, .setting-action:hover { border-color: #9fc2d7; background: #f8fbfd; }
.metric-label { color: #60819c; }
.metric-navy, .metric-blue { color: #4f81b3; }
.metric-orange { color: #d9873c; }
.metric-purple { color: #7b71c5; }
.metric-green { color: #329b7b; }
.metric-card::before { background: #4f89b4; box-shadow: none; }
.panel::before { border-color: #9dc7d9; }
.panel-header { border-bottom-color: #dbe5ee; }
.date-chip, .count-pill { background: #edf5fb; color: #4c88ae; border-color: #c9dfeb; }
.count-pill { background: #fff2df; color: #c77a31; border-color: #f3d5ac; }
.attendance-summary div, .profile-list div, .student-focus, .private-note { background: #f7fafc; border-color: #d2e1eb; }
.attendance-summary strong, .student-focus strong { color: #2b4663; }
.attendance-summary span, .student-focus span, .profile-list span, .student-card-footer, .task-main p, .task-due, .task-audience, .announcement-card span, .announcement-card p, .report-card p, .empty-state, .filter-row, .legend, .panel-note, .loading-line { color: #7b8da0; }
.section-divider, .announcement-card, .report-card, .audit-row, .event-list { border-color: #dbe5ee; }
.task-check { border-color: #b8cfde; background: #fff; }
.task-check.checked { background: #68b99b; border-color: #68b99b; }
.announcement-icon, .report-icon { background: #fff2df; color: #ce8339; border-color: #f3d5ac; }
.focus-ring { border-color: #c8dae5; border-top-color: #4f89b4; color: #3f78ad; }
.student-check { border-color: #d2e1eb; background: #fbfdff; color: #506b85; }
.student-check:has(input:checked) { border-color: #8cb9cf; background: #edf7fb; box-shadow: none; }
.student-check input { accent-color: #4f89b4; }
.privacy-banner { background: #edf8f4; border-color: #c7e8dc; color: #329b7b; }
.privacy-banner p { color: #6d9a8d; }
.import-details summary { color: #2f6f9d; }
.import-details summary > span { background: #e6f2f8; color: #3f78ad; }
.import-body, .import-table th, .import-table td { border-color: #dbe5ee; }
.import-file-label { color: #5b6f84; }
.import-file-label input { background: #f8fbfd; border-color: #a9c4d6; color: #526f86; }
.import-table { color: #4f687f; }
.import-table th { background: #edf5fb; color: #4f81b3; }
.import-table td { border-bottom-color: #e5edf2; }
.import-field-list span { background: #eff8fa; color: #398293; border-color: #cce2e8; }
.toast { background: #193b5b; border-color: #74c4bd; color: #fff; }
.toast[data-kind="error"] { background: #a9444d; border-color: #f3b1ae; }

/* One-line-per-student Excel grid. The wide sheet scrolls horizontally on phones. */
.students-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.student-roster-form { display: block; min-width: 0; }
.student-list-toolbar { align-items: center; }
.student-list-toolbar > div { display: grid; gap: 4px; }
.student-list-toolbar span { color: #7b8da0; font-size: 11px; }
.student-roster-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid #cfe0ea; border-radius: 8px; background: #f7fbfd; color: #6f8497; font-size: 12px; }
.student-roster-save-bar .button { flex: 0 0 auto; }
.student-save-hint { margin-left: auto; }
.student-sheet-wrap { max-width: 100%; overflow-x: auto; overflow-y: visible; border: 1px solid #cfe0ea; background: #fff; box-shadow: 0 10px 24px rgba(41, 76, 110, .06); -webkit-overflow-scrolling: touch; }
.student-sheet-header, .student-sheet-row { grid-template-columns: 54px 88px 102px 140px 54px 120px 104px 64px 92px 130px 130px 180px; min-width: 1370px; }
.student-sheet-header { background: #eaf4fb; border-bottom-color: #b9d5e3; color: #2f6f9d; }
.student-sheet-header span { white-space: nowrap; }
.student-list { display: block; }
.student-sheet-row { min-height: 56px; border-bottom: 1px solid #e5edf2; border-left: 3px solid transparent; background: #fff; }
.student-sheet-row:hover, .student-sheet-row:focus-within { background: #f6fbfe; border-left-color: #4ba9b0; }
.student-sheet-row .sheet-cell { min-width: 0; padding: 7px 8px; border-right-color: #e5edf2; }
.student-sheet-row .sheet-cell > span { display: none; }
.student-sheet-row input { min-width: 0; width: 100%; border: 1px solid transparent; border-radius: 3px; background: transparent; padding: 7px 5px; color: #294762; }
.student-sheet-row input:hover { border-color: #d2e1eb; background: #fbfdff; }
.student-sheet-row input:focus { background: #fff; border-color: #78a9c6; box-shadow: 0 0 0 3px rgba(63, 120, 173, .12); }
.student-seat-preferences { margin-top: 18px; }
.student-seat-preferences .panel-header { margin-bottom: 8px; }
.student-seat-check { display: inline-flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #cfe0ea; border-radius: 6px; background: #f8fcfe; color: #294762; }
.student-seat-check input { accent-color: #2d91b2; }
.student-seat-check span { display: grid; gap: 3px; }
.student-seat-check small { color: #7b8da0; font-size: 10px; }
.seat-preference-pair-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.seat-preference-pair-form label { display: grid; gap: 5px; color: #5f788e; font-size: 11px; font-weight: 700; }
.seat-preference-pair-form select { min-width: 260px; border: 1px solid #cddfe9; border-radius: 4px; background: #fff; color: #25445f; padding: 8px; font: inherit; }
.seat-preference-pair-form > span { padding-bottom: 9px; color: #7b8da0; font-size: 11px; }
.seat-preference-list { display: grid; gap: 6px; max-width: 620px; margin: 14px 0; padding: 0; list-style: none; }
.seat-preference-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #e0ebf1; border-radius: 4px; color: #385d76; font-size: 11px; }
.seat-preference-list .button { padding: 5px 9px; font-size: 10px; }
.seat-preference-empty { color: #7b8da0 !important; }

@media (max-width: 760px) {
  .students-heading-actions { justify-content: stretch; }
  .students-heading-actions .button { flex: 1 1 160px; justify-content: center; }
  .student-list-toolbar { align-items: flex-start; flex-direction: column; }

  .student-roster-save-bar { align-items: stretch; flex-direction: column; }
  .student-roster-save-bar .button { width: 100%; }
  .student-save-hint { margin-left: 0; }
  .student-sheet-wrap { width: 100%; }
  .student-sheet-header, .student-sheet-row { min-width: 1370px; }
}

/* Requested roster simplification: hide 年班 from the visible grid but keep it in each row's hidden form value. */
.student-list-toolbar > div > strong { font-size: 12px; }
.student-list-toolbar > div > span, .student-save-hint { font-size: 10px; }
.student-sheet-header { font-size: 9px; }
.student-sheet-header, .student-sheet-row { grid-template-columns: 56px 100px 140px 56px 84px 124px 116px 108px 68px 100px 132px 170px 170px 120px; min-width: 1544px; }
.student-sheet-row input { font-size: 11px; }
.role-sheet-cell { display: flex; align-items: center; }
.role-sheet-cell strong { color: #385d76; font-size: 11px; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .student-sheet-header, .student-sheet-row { min-width: 1544px; }
  .seat-preference-pair-form { align-items: stretch; flex-direction: column; }
  .seat-preference-pair-form > span { padding: 0; }
  .seat-preference-pair-form select { width: 100%; }
}

/* Class data modules: light, tactile control surfaces that remain usable on phones. */
.seat-planner, .organization-panel {
  border: 1px solid #cfe0ea;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 24px rgba(41, 76, 110, .06);
}
.seat-planner { padding: 18px; overflow-x: auto; }
.seat-toolbar, .assignment-toolbar, .seat-bottom-panel, .seat-panel-heading { display: flex; align-items: center; gap: 10px; }
.seat-toolbar { flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #dbe7ee; }
.seat-toolbar label { display: inline-flex; align-items: center; gap: 7px; color: #5f788e; font-size: 12px; font-weight: 700; }
.seat-toolbar input { width: 72px; border: 1px solid #cddfe9; border-radius: 4px; background: #fff; color: #25445f; padding: 8px; font: inherit; }
.seat-plan-count { margin-left: auto; color: #5b899d; font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; }
.seat-selection-status { margin: 14px 0 10px; border-left: 3px solid #6fb6c2; background: #eff8fa; color: #497188; padding: 10px 12px; font-size: 12px; }
.podium-label { min-width: 660px; margin: 0 auto 12px; border: 1px solid #bdd4e3; border-bottom: 3px solid #5791ba; background: linear-gradient(90deg, #e5f2f8, #f6fbfd, #e5f2f8); color: #3e7294; padding: 10px; text-align: center; font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .15em; }
.seat-grid { display: grid; grid-template-columns: repeat(5, minmax(96px, 1fr)); min-width: 660px; gap: 10px; padding: 8px 2px 16px; }
.seat-grid[data-seat-columns="2"] { grid-template-columns: repeat(2, minmax(96px, 1fr)); }
.seat-grid[data-seat-columns="3"] { grid-template-columns: repeat(3, minmax(96px, 1fr)); }
.seat-grid[data-seat-columns="4"] { grid-template-columns: repeat(4, minmax(96px, 1fr)); }
.seat-grid[data-seat-columns="5"] { grid-template-columns: repeat(5, minmax(96px, 1fr)); }
.seat-grid[data-seat-columns="6"] { grid-template-columns: repeat(6, minmax(96px, 1fr)); }
.seat-grid[data-seat-columns="7"] { grid-template-columns: repeat(7, minmax(96px, 1fr)); }
.seat-grid[data-seat-columns="8"] { grid-template-columns: repeat(8, minmax(96px, 1fr)); }
.seat-grid[data-seat-columns="9"] { grid-template-columns: repeat(9, minmax(96px, 1fr)); }
.seat-grid[data-seat-columns="10"] { grid-template-columns: repeat(10, minmax(96px, 1fr)); }
.seat-cell { position: relative; min-height: 132px; border: 1px solid #cddfe9; background: #fbfdff; transition: .18s ease; }
.seat-cell:hover { border-color: #79a8c2; box-shadow: 0 6px 14px rgba(46, 112, 157, .10); }
.seat-cell.is-selected { border-color: #4a98ae; box-shadow: 0 0 0 3px rgba(75, 169, 176, .18); }
.seat-cell.is-locked { border-color: #c79d50; box-shadow: inset 0 0 0 2px rgba(199, 157, 80, .2); }
.seat-cell.is-disabled { border-color: #e3c6aa; background: repeating-linear-gradient(135deg, #fff9f0 0 7px, #fff4e4 7px 14px); }
.seat-cell-button { display: grid; width: 100%; min-height: 132px; align-content: center; gap: 5px; border: 0; background: transparent; color: #294a67; cursor: pointer; padding: 14px 8px 30px; text-align: center; }
.seat-cell-button strong { font-size: 15px; }
.seat-cell-button small, .seat-code { color: #7d94a5; font-size: 10px; }
.seat-role-list { display: grid; gap: 3px; min-width: 0; margin-top: 3px; }
.seat-role { display: block; overflow: hidden; color: #44738f; font-size: 12px; line-height: 1.32; text-overflow: ellipsis; white-space: nowrap; }
.seat-role-tutor { color: #765c96; }
.seat-code { position: absolute; top: 8px; left: 9px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.seat-disable-toggle { position: absolute; right: 7px; bottom: 7px; border: 0; background: #eef5f8; color: #5b8399; padding: 4px 6px; font-size: 10px; cursor: pointer; }
.seat-lock-toggle { position: absolute; left: 7px; bottom: 7px; border: 0; background: #fff7df; color: #9a7024; padding: 4px 6px; font-size: 10px; cursor: pointer; }
.seat-lock-toggle[aria-pressed="true"] { background: #e9c878; color: #5c4314; font-weight: 800; }
.is-disabled .seat-disable-toggle { background: #f9e9d3; color: #a76b2e; }
.seat-bottom-panel { justify-content: space-between; margin-top: 4px; padding-top: 16px; border-top: 1px solid #dbe7ee; }
.seat-bottom-panel > div:first-child { min-width: 0; flex: 1; }
.seat-panel-heading { justify-content: space-between; color: #395c77; font-size: 12px; }
.seat-panel-heading span { color: #7b95a7; font-size: 11px; }
.seat-student-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.seat-student-chip { display: inline-flex; align-items: baseline; gap: 7px; border: 1px solid #cddfe9; background: #fff; color: #365673; padding: 8px 10px; cursor: grab; }
.seat-student-chip strong { font-size: 12px; }
.seat-student-chip span { color: #7c94a4; font-size: 10px; }
.seat-student-chip.is-selected { border-color: #55a4b2; background: #eaf8f8; box-shadow: 0 0 0 2px rgba(75, 169, 176, .14); }
.seat-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; color: #7890a2; font-size: 10px; }
.seat-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.seat-dot { width: 8px; height: 8px; border-radius: 99px; background: #fff; border: 1px solid #a9c8d9; }
.seat-dot.occupied { background: #68a8c3; border-color: #68a8c3; }
.seat-dot.locked { background: #c79d50; border-color: #c79d50; }
.seat-dot.disabled { background: #e4ad72; border-color: #e4ad72; }
.seat-empty-note { color: #7d94a5; font-size: 12px; }

.organization-panel { padding: 18px; }
.assignment-toolbar { justify-content: space-between; flex-wrap: wrap; padding-bottom: 15px; border-bottom: 1px solid #dbe7ee; }
.assignment-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.assignment-toolbar strong { color: #315c7e; }
.assignment-toolbar span { color: #8097a8; font-size: 11px; }
.assignment-head, .assignment-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(180px, 1.2fr) minmax(200px, 1.5fr) 36px; gap: 8px; align-items: center; }
.assignment-head { color: #6f8ea4; padding: 14px 8px 7px; font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.assignment-head.cadre-head { grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.15fr) minmax(160px, 1.35fr) 58px 54px; }
.assignment-list { display: grid; gap: 7px; }
.assignment-row { border: 1px solid #d4e3ec; background: #fbfdff; padding: 8px; }
.assignment-row input, .assignment-row select, .cleaning-fields input { min-width: 0; width: 100%; border: 1px solid #d0e0ea; border-radius: 3px; background: #fff; color: #294963; padding: 9px; font: inherit; font-size: 12px; }
.assignment-row input:focus, .assignment-row select:focus, .cleaning-fields input:focus { outline: 0; border-color: #78a9c6; box-shadow: 0 0 0 3px rgba(63, 120, 173, .12); }
.icon-button { width: 30px; height: 30px; border: 1px solid #d4e1e8; background: #fff; color: #6c879c; cursor: pointer; font-size: 19px; line-height: 1; }
.icon-button.danger:hover { border-color: #e5b7b7; background: #fff4f4; color: #be5b63; }
.cleaning-list { display: grid; gap: 12px; margin-top: 14px; }
.cleaning-row { border: 1px solid #d4e3ec; background: #fbfdff; padding: 10px; }
.cleaning-fields { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.7fr) 90px 34px; gap: 8px; align-items: center; }
.assignment-student-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d7e6ee; }
.assignment-student-chip { border: 1px solid #d3e2eb; background: #fff; color: #52718a; padding: 6px 8px; cursor: pointer; font-size: 11px; }
.assignment-student-chip span { display: inline-block; margin-right: 4px; color: #7f9aab; font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.assignment-student-chip.is-selected { border-color: #75aeba; background: #e9f7f5; color: #2e7776; }

.cleaning-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 16px; }
.cleaning-zones { display: grid; gap: 16px; min-width: 0; }
.cleaning-zone { min-width: 0; border: 1px solid #cfe0ea; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 24px rgba(41, 76, 110, .06); padding: 16px; }
.cleaning-zone[data-cleaning-zone-panel="indoor"] { border-top: 3px solid #2d91b2; }
.cleaning-zone[data-cleaning-zone-panel="outdoor"] { border-top: 3px solid #e1aa23; }
.cleaning-zone-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #dbe7ee; }
.cleaning-zone-header h3 { margin: 5px 0 0; color: #234d6b; font-size: 20px; }
.cleaning-responsible { color: #51788f; border: 1px solid #c9e0e8; background: #eef8fa; padding: 7px 9px; font-size: 11px; white-space: nowrap; }
.cleaning-zone[data-cleaning-zone-panel="outdoor"] .cleaning-responsible { border-color: #ead8a5; background: #fff9e8; color: #86631e; }
.cleaning-zone .assignment-toolbar { margin-bottom: 2px; }
.cleaning-zone .empty-state { margin-top: 12px; }
.cleaning-layout > .unassigned-panel { position: sticky; top: 16px; }

@media (max-width: 760px) {
  .seat-planner, .organization-panel { padding: 13px; }
  .seat-toolbar .button { flex: 1 1 130px; justify-content: center; }
  .seat-plan-count { width: 100%; margin-left: 0; }
  .seat-bottom-panel { align-items: flex-start; flex-direction: column; }
  .seat-legend { justify-content: flex-start; }
  .assignment-toolbar { align-items: flex-start; }
  .assignment-toolbar > div:last-child { width: 100%; }
  .assignment-toolbar .button { flex: 1 1 145px; justify-content: center; padding-inline: 8px; }
  .assignment-head { display: none; }
  .assignment-row { grid-template-columns: 1fr 32px; }
  .assignment-row input, .assignment-row select { grid-column: 1; }
  .assignment-row .icon-button { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .cleaning-fields { grid-template-columns: 1fr 32px; }
  .cleaning-fields input { grid-column: 1; }
  .cleaning-fields .icon-button { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* Allocation layout: keep all unassigned students visible in a seat-numbered right rail. */
.planning-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 16px; }
.planning-layout > .seat-planner, .planning-layout > .organization-panel { min-width: 0; }
.unassigned-panel { position: sticky; top: 16px; border: 1px solid #cfe0ea; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 24px rgba(41, 76, 110, .06); padding: 14px; }
.unassigned-heading { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid #dbe7ee; }
.unassigned-heading h2 { margin: 0; color: #315c7e; font-size: 18px; }
.unassigned-heading small, .unassigned-panel > p { color: #7b93a4; font-size: 11px; }
.unassigned-panel > p { margin: 10px 0; line-height: 1.55; }
.vertical-list, .available-student-list { display: grid; gap: 7px; max-height: min(62vh, 620px); overflow-y: auto; padding-right: 3px; }
.vertical-list .seat-student-chip { justify-content: space-between; width: 100%; cursor: pointer; }
.available-student-card { display: grid; grid-template-columns: 30px 1fr 16px; align-items: center; gap: 7px; width: 100%; border: 1px solid #d2e1eb; background: #fbfdff; color: #385b75; padding: 9px; text-align: left; cursor: pointer; }
.available-student-card:hover { border-color: #78a9c6; background: #eff8fa; }
.available-student-card.is-selected { border-color: #55a4b2; background: #eaf8f8; box-shadow: 0 0 0 2px rgba(75, 169, 176, .14); }
.seat-available-student-card { cursor: grab; }
.available-student-card > span { color: #6194aa; font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.available-student-card strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.available-student-card i { color: #4a9b9e; font-size: 16px; font-style: normal; }
.assignment-row { grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.15fr) minmax(160px, 1.35fr) 58px 54px; }
.assignment-row.is-selected, .cleaning-row.is-selected { border-color: #69aab8; background: #f0f9fa; box-shadow: 0 0 0 2px rgba(75, 169, 176, .12); }
.assignment-select-control { border: 1px solid #bdd8e4; background: #edf7fa; color: #447994; min-height: 34px; padding: 7px 6px; cursor: pointer; font-size: 11px; }
.assignment-select-control:hover { border-color: #78a9c6; background: #e1f2f7; }
.assignment-delete-control { min-height: 34px; border: 1px solid #edc2c2; background: #fff6f6; color: #b25962; padding: 7px 5px; cursor: pointer; font-size: 11px; }
.assignment-delete-control:hover { border-color: #de9197; background: #ffeaea; }
.cleaning-head { grid-template-columns: 34px minmax(120px, .8fr) minmax(160px, 1.7fr) 58px 84px 58px 54px; }
.cleaning-fields { grid-template-columns: 34px minmax(120px, .8fr) minmax(160px, 1.7fr) 58px 84px 58px 54px; }
.cleaning-drag-handle { align-self: stretch; border: 1px solid #bdd8e4; background: #edf7fa; color: #447994; cursor: grab; font-size: 20px; line-height: 1; touch-action: none; }
.cleaning-drag-handle:active { cursor: grabbing; }
.cleaning-row.is-drop-target { border-color: #3f99ad; box-shadow: 0 -3px 0 #3f99ad, 0 0 0 2px rgba(63, 153, 173, .12); }
.assigned-student-chip { border: 1px solid #bcdde2; background: #edf8f5; color: #347973; padding: 6px 8px; cursor: pointer; font-size: 11px; }
.assigned-student-chip span { margin-right: 4px; color: #66959b; font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }

@media (max-width: 980px) {
  .planning-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; }
}
@media (max-width: 760px) {
  .planning-layout { grid-template-columns: 1fr; }
  .unassigned-panel { position: static; order: 2; }
  .vertical-list, .available-student-list { max-height: 360px; }
  .assignment-row { grid-template-columns: 1fr 58px 52px; }
  .assignment-row input, .assignment-row select { grid-column: 1; }
  .assignment-row .assignment-select-control { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .assignment-row .icon-button { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .assignment-row .assignment-delete-control { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .cleaning-fields { grid-template-columns: 32px 1fr 58px 52px; }
  .cleaning-fields input { grid-column: 2; }
  .cleaning-fields .cleaning-drag-handle { grid-column: 1; grid-row: 1 / span 4; }
  .cleaning-fields .assignment-select-control { grid-column: 3; grid-row: 1 / span 4; align-self: center; }
  .cleaning-fields .icon-button { grid-column: 4; grid-row: 1 / span 4; align-self: center; }
  .cleaning-fields .assignment-delete-control { grid-column: 4; grid-row: 1 / span 4; align-self: center; }
  .cleaning-layout { grid-template-columns: 1fr; }
  .cleaning-layout > .unassigned-panel { position: static; order: 2; }
  .cleaning-zone { padding: 13px; }
  .cleaning-zone-header { align-items: flex-start; flex-direction: column; }
  .cleaning-responsible { align-self: stretch; }
}

/* Daily blackboard: projector-friendly, light tactical display. */
.blackboard-layout { display: grid; grid-template-columns: minmax(300px, .84fr) minmax(420px, 1.16fr); gap: 18px; align-items: start; }
.blackboard-editor { display: grid; gap: 16px; padding: 18px; }
.blackboard-form { display: grid; gap: 14px; }
.blackboard-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(116px, .34fr); gap: 12px; }
.blackboard-form label { display: grid; gap: 7px; color: #57728a; font-size: 12px; font-weight: 800; }
.blackboard-form input, .blackboard-form textarea { min-width: 0; box-sizing: border-box; width: 100%; border: 1px solid #cddfe9; border-radius: 7px; background: #fbfdff; color: #1d415d; padding: 10px 11px; font: 500 13px/1.55 inherit; }
.blackboard-form textarea { min-height: 228px; resize: vertical; }
.blackboard-form input:focus, .blackboard-form textarea:focus { outline: none; border-color: #58a2c4; background: #fff; box-shadow: 0 0 0 3px rgba(59, 130, 173, .12); }
.blackboard-form label small { color: #7c94a8; font-size: 11px; font-weight: 500; }
.blackboard-carry { display: grid; gap: 10px; border: 1px solid #cbe1e8; border-left: 3px solid #33a2b5; background: linear-gradient(135deg, #effbfa, #f8fcff); padding: 12px; }
.blackboard-carry > div:first-child { display: grid; gap: 3px; }
.blackboard-carry strong { color: #275b75; font-size: 14px; }
.blackboard-carry small { color: #7590a0; font-size: 11px; }
.blackboard-carry-list { display: flex; flex-wrap: wrap; gap: 7px; }
.blackboard-carry-list span { border: 1px solid #b9dce0; background: #fff; color: #387b83; padding: 6px 8px; font-size: 11px; line-height: 1.35; }
.blackboard-carry-list .is-empty { border-style: dashed; color: #7890a0; }
.blackboard-editor-actions, .button-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.blackboard-date-field { grid-column: 1 / -1; display: grid; grid-template-columns: max-content minmax(170px, 1fr) max-content; align-items: end; gap: 8px; min-width: 0; }
.blackboard-date-field label { min-width: 170px; white-space: nowrap; }
.blackboard-date-field input[type="date"] { min-width: 170px; }
.blackboard-date-shift { border: 1px solid #c6dce6; border-radius: 6px; background: #f4fafc; color: #2c6884; padding: 10px 9px; font: 800 11px/1.1 inherit; cursor: pointer; white-space: nowrap; }
.blackboard-date-shift:hover, .blackboard-date-shift:focus-visible { border-color: #44a6c0; background: #e9f7fb; color: #12516e; outline: none; }
.blackboard-preview-panel { min-width: 0; }
.blackboard-stage { --blackboard-font-size: 28px; position: relative; overflow: hidden; display: grid; min-height: 560px; grid-template-rows: auto auto 1fr auto; border: 1px solid #7fc0d2; border-left: 5px solid #e1b128; background: radial-gradient(circle at 89% 16%, rgba(77, 204, 227, .19), transparent 23%), linear-gradient(135deg, #063b56 0%, #0b5872 50%, #073d5c 100%); color: #f3fcff; box-shadow: 0 18px 38px rgba(24, 75, 105, .2); }
.blackboard-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .42; background-image: linear-gradient(rgba(142, 225, 239, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(142, 225, 239, .12) 1px, transparent 1px); background-size: 34px 34px; }
.blackboard-stage::after { content: ""; position: absolute; right: -100px; top: -160px; width: 430px; height: 430px; border: 1px solid rgba(141, 228, 239, .55); border-radius: 50%; box-shadow: 0 0 0 48px rgba(141, 228, 239, .055), 0 0 0 96px rgba(141, 228, 239, .035); pointer-events: none; }
.blackboard-stage > * { position: relative; z-index: 1; }
.blackboard-topline { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid rgba(151, 228, 240, .34); color: #9de7f4; font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.blackboard-topline-actions { display: flex; align-items: center; gap: 12px; }
.blackboard-fullscreen-button { border: 1px solid rgba(157, 231, 244, .62); border-radius: 4px; background: rgba(3, 43, 63, .42); color: #e5fbff; padding: 7px 10px; font: 800 10px/1.1 inherit; letter-spacing: .04em; cursor: pointer; }
.blackboard-fullscreen-button:hover { border-color: #f5d34a; background: rgba(246, 211, 74, .16); color: #fff7c9; }
.blackboard-fullscreen-button:focus-visible { outline: 2px solid #f5d34a; outline-offset: 3px; }
.blackboard-topline b { color: #f5ce3e; font-size: 10px; }
.blackboard-topline b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #53e0b4; box-shadow: 0 0 10px #53e0b4; }
.blackboard-title-row { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 28px 30px 20px; border-bottom: 1px solid rgba(151, 228, 240, .3); }
.blackboard-title-row .eyebrow { color: #8de4f4; }
.blackboard-title-row h2 { margin: 7px 0 0; color: #fff; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: .03em; }
.blackboard-title-row time { flex: 0 0 auto; color: #f6d74e; font: 800 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; }
.blackboard-title-meta { display: grid; justify-items: end; gap: 10px; }
.blackboard-public-date-controls { display: flex; align-items: center; gap: 5px; }
.blackboard-public-date-controls label { display: block; }
.blackboard-public-date-controls input { border: 1px solid rgba(157, 231, 244, .62); border-radius: 4px; background: rgba(3, 43, 63, .42); color: #e5fbff; padding: 6px 7px; font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; color-scheme: dark; }
.blackboard-public-date-controls input:focus-visible { outline: 2px solid #f5d34a; outline-offset: 2px; }
.blackboard-date-shift { min-height: 30px; }
.blackboard-content { display: grid; align-content: center; padding: 32px 42px; }
.blackboard-content ol { display: grid; gap: .65em; margin: 0; padding-left: 1.5em; }
.blackboard-content li { padding-left: .1em; color: #f8feff; font-size: var(--blackboard-font-size); font-weight: 750; line-height: 1.5; text-shadow: 0 2px 0 rgba(3, 44, 64, .35); }
.blackboard-item-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
.blackboard-item-text { min-width: 0; overflow-wrap: anywhere; }
.blackboard-item-delete { flex: 0 0 auto; border: 1px solid rgba(255, 190, 190, .65); border-radius: 4px; background: rgba(96, 26, 38, .34); color: #ffd7d7; padding: 6px 9px; font: 800 11px/1.1 inherit; cursor: pointer; }
.blackboard-item-delete:hover, .blackboard-item-delete:focus-visible { border-color: #fff; background: rgba(167, 48, 64, .58); color: #fff; outline: none; }
.blackboard-content li::marker { color: #f6ce3b; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.blackboard-empty { border: 1px dashed rgba(169, 235, 245, .55); background: rgba(4, 43, 64, .32); color: #b7eaf3; padding: 28px; text-align: center; font-size: 17px; }
.blackboard-stage footer { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; border-top: 1px solid rgba(151, 228, 240, .32); color: #a3d9e5; font: 700 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.blackboard-status { margin: 10px 0 0; color: #7790a1; font-size: 11px; text-align: right; }
.public-blackboard-panel { margin: 20px 0; }
.public-blackboard-panel .blackboard-stage { min-height: 350px; }
.public-blackboard-panel .blackboard-content { padding-block: 22px; }
.public-blackboard-panel .blackboard-content li { font-size: clamp(18px, 2vw, 28px); }
.blackboard-stage:fullscreen { box-sizing: border-box; width: 100vw; height: 100vh; min-height: 100vh; border: 0; padding: min(4vh, 44px) min(6vw, 88px); }
.blackboard-stage:fullscreen .blackboard-content li { font-size: clamp(28px, 3.6vw, 60px); }
.blackboard-stage:fullscreen .blackboard-item-delete { display: none; }
@media (max-width: 980px) { .blackboard-layout { grid-template-columns: 1fr; } .blackboard-stage { min-height: 480px; } }
@media (max-width: 760px) { .blackboard-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .blackboard-form-grid > label:nth-child(2) { grid-column: 1 / -1; grid-row: 1; } .blackboard-date-field { grid-column: 1 / -1; grid-row: 2; } .blackboard-date-field .blackboard-date-shift { padding-inline: 6px; } .blackboard-editor-actions, .button-group { justify-content: stretch; } .blackboard-editor-actions .button, .button-group .button { flex: 1 1 150px; } .blackboard-stage { min-height: 430px; } .blackboard-title-row { align-items: flex-start; flex-direction: column; padding: 22px 22px 16px; } .blackboard-title-meta { justify-items: start; } .blackboard-title-row time { text-align: left; } .blackboard-content { padding: 24px 28px; } .blackboard-content li { font-size: max(18px, calc(var(--blackboard-font-size) * .82)); } .blackboard-item-line { align-items: flex-start; flex-direction: column; gap: 8px; } }
@media print { body * { visibility: hidden !important; } .blackboard-stage, .blackboard-stage * { visibility: visible !important; } .blackboard-stage { position: fixed; inset: 0; min-height: 100vh; width: 100vw; border: 0; box-shadow: none; } }

/* Points and physical reward-card workshop. */
.reward-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.reward-workbench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.reward-workbench .panel { min-width: 0; }
.reward-workbench .panel-wide { grid-column: 1 / -1; }
.reward-form { display: grid; gap: 12px; }
.reward-form label { display: grid; gap: 6px; color: #4d6d82; font-size: 12px; font-weight: 800; }
.reward-form input, .reward-form select, .reward-resolution-form input, .reward-resolution-form select { box-sizing: border-box; min-width: 0; width: 100%; border: 1px solid #cddfe9; border-radius: 7px; background: #fbfdff; color: #1d415d; padding: 10px 11px; font: 500 13px/1.35 inherit; }
.reward-form input:focus, .reward-form select:focus, .reward-resolution-form input:focus, .reward-resolution-form select:focus { outline: none; border-color: #58a2c4; background: #fff; box-shadow: 0 0 0 3px rgba(59, 130, 173, .12); }
.reward-form-row, .reward-inline-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.reward-inline-form { grid-template-columns: minmax(260px, 1fr) minmax(100px, .22fr) max-content max-content; }
.reward-form fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; margin: 0; border: 1px solid #d6e4eb; border-radius: 7px; color: #57728a; font-size: 12px; }
.reward-form fieldset legend { padding: 0 5px; color: #6c899a; font-size: 11px; font-weight: 800; }
.reward-form fieldset label { display: inline-flex; align-items: center; gap: 4px; color: #3f6175; font-weight: 700; }
.reward-form fieldset input, .reward-table input { width: auto; padding: 0; }
.point-schedule-settings { display: grid !important; gap: 10px; }
.point-schedule-settings[hidden], .point-manual-settings[hidden] { display: none !important; }
.point-schedule-actors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; max-height: 210px; overflow: auto; }
.point-schedule-actor { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; padding: 8px 10px; border: 1px solid #d6e4eb; border-radius: 8px; background: rgba(255,255,255,.76); color: #285775 !important; }
.point-schedule-actor input { width: auto !important; }
.point-schedule-actor span { display: grid; gap: 2px; }
.point-schedule-actor small { color: #7190a2; font-size: 11px; font-weight: 600; }
.point-target-details { border: 1px solid #d6e4eb; border-radius: 8px; background: #f8fcfe; padding: 9px 11px; }
.point-target-details summary { cursor: pointer; color: #2e637f; font-size: 12px; font-weight: 800; }
.point-student-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(102px, 1fr)); gap: 6px; max-height: 220px; margin-top: 9px; overflow: auto; }
.point-student-picker label { display: flex; align-items: center; gap: 4px; border: 1px solid #d7e5eb; background: #fff; color: #406379; padding: 6px 7px; font-size: 11px; font-weight: 600; }
.point-student-picker b { color: #226e91; font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.reward-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.reward-table th, .reward-table td { border-bottom: 1px solid #d9e6ed; padding: 9px 8px; text-align: left; vertical-align: top; }
.reward-table th { color: #54748a; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.reward-table td small { display: block; margin-top: 3px; color: #7891a1; font-size: 10px; }
.point-positive { color: #16766b; font-weight: 800; }
.point-negative { color: #af3f4a; font-weight: 800; }
.reward-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-top: 15px; }
.reward-card-tile { position: relative; isolation: isolate; display: grid; min-height: 285px; grid-template-rows: auto 1fr auto auto; overflow: hidden; border: 2px solid rgba(222, 245, 250, .78); border-radius: 12px; padding: 13px; color: #f8feff; box-shadow: 0 10px 22px rgba(24, 65, 95, .2); }
.reward-card-tile.reward-ocean { background: linear-gradient(145deg, #073e62, #147ba6 55%, #072f55); }
.reward-card-tile.reward-violet { background: linear-gradient(145deg, #30225d, #7454c8 55%, #2a1a56); }
.reward-card-tile.reward-sun { background: linear-gradient(145deg, #66251d, #cf6a29 55%, #54201a); }
.reward-card-tile > :not(.reward-card-glow) { position: relative; z-index: 1; }
.reward-card-glow { position: absolute; z-index: 0; width: 175px; height: 175px; right: -58px; top: 38px; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,255,255,.08), 0 0 0 50px rgba(255,255,255,.04); transform: rotate(20deg); }
.reward-card-top, .reward-card-bottom, .reward-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.reward-card-top { color: #d9f8ff; font: 800 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.reward-card-top b { border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 3px 6px; color: #fff8cf; font: 800 9px/1.2 inherit; }
.reward-card-badge { display: grid; place-items: center; width: 74px; height: 74px; margin: 23px auto 14px; border: 4px solid #f8f2d0; background: rgba(255,255,255,.7); box-shadow: 0 0 0 6px rgba(15, 36, 57, .25); color: #174e70; font-size: 43px; transform: rotate(45deg); }
.reward-card-badge::first-letter { transform: rotate(-45deg); }
.reward-card-effect { align-self: stretch; min-height: 64px; border: 1px solid rgba(255,255,255,.36); background: rgba(6, 26, 44, .49); padding: 10px; color: #fff; font-size: 14px; font-weight: 800; line-height: 1.5; }
.reward-card-bottom { margin-top: 12px; color: #fff7c8; font: 800 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.reward-card-bottom span { color: #d9edf3; font-size: 10px; }
.reward-card-actions { margin-top: 10px; }
.reward-card-actions button, .reward-card-preview { flex: 1; border: 1px solid rgba(255,255,255,.52); border-radius: 5px; background: rgba(5, 27, 47, .34); color: #fff; padding: 7px 6px; font: 800 10px/1.1 inherit; cursor: pointer; }
.reward-card-actions button:hover, .reward-card-preview:hover { border-color: #fff4aa; background: rgba(255,255,255,.16); }
.reward-card-actions button:disabled { cursor: not-allowed; opacity: .45; }
.reward-preview-output { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(130px, .55fr); align-items: center; gap: 14px; min-height: 0; margin-top: 14px; }
.reward-preview-output > div { display: grid; gap: 5px; color: #426b83; font-size: 12px; }
.reward-preview-output canvas { width: min(100%, 220px); height: auto; justify-self: start; border: 1px solid #b9d6e3; box-shadow: 0 8px 18px rgba(29, 70, 100, .18); }
.reward-serial-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.reward-serial-list span { border: 1px solid #c7dde7; background: #f6fbfd; color: #4d7188; padding: 6px 8px; font-size: 10px; }
.reward-serial-list b { color: #1e6084; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.reward-resolution-list { display: grid; gap: 10px; }
.reward-resolution-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, .7fr) minmax(130px, .8fr) auto; gap: 8px; align-items: center; border: 1px solid #d5e5eb; background: #f9fcfe; padding: 10px; }
.reward-resolution-form > div:first-child { display: grid; gap: 2px; color: #385f75; font-size: 12px; }
.reward-resolution-form span, .reward-resolution-form small { color: #718b9b; font-size: 10px; }
.reward-resolution-form > div:last-child { display: flex; gap: 6px; }
.reward-issued-row { grid-template-columns: minmax(160px, 1fr) minmax(140px, .8fr) auto; }
.leaderboard-list, .my-reward-row { display: grid; gap: 8px; }
.leaderboard-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid #dbe8ee; padding: 9px 3px; color: #456a80; font-size: 12px; }
.leaderboard-row b { color: #b78221; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.leaderboard-row strong { color: #16766b; }
.leaderboard-self { border-left: 3px solid #3b99b7; background: #edf9fb; padding-left: 8px; }
.my-reward-row { border: 1px solid #cde0e9; background: #f6fbfd; padding: 10px; color: #38627a; font-size: 12px; }
.my-reward-row span, .my-reward-row small { color: #7390a1; font-size: 11px; }
@media (max-width: 980px) { .reward-workbench { grid-template-columns: 1fr; } .reward-workbench .panel-wide { grid-column: auto; } .reward-inline-form { grid-template-columns: 1fr 120px max-content; } .reward-inline-form #reward-a4-mixed-print { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 760px) { .reward-metrics, .reward-form-row, .reward-inline-form, .reward-preview-output, .reward-resolution-form, .reward-issued-row { grid-template-columns: 1fr; } .reward-inline-form #reward-a4-mixed-print { grid-column: auto; } .reward-resolution-form > div:last-child { flex-wrap: wrap; } .reward-resolution-form .button { flex: 1; } .reward-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reward-card-tile { min-height: 255px; padding: 10px; } .reward-card-effect { font-size: 12px; } }

/* Points/reward refinements: compact, collapsible actor permissions and an at-a-glance forge. */
.permission-group { margin: 0 0 10px; padding: 0; border: 1px solid #c9e0ea; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #f8fcfe, #eef8fb); }
.permission-group > summary, .permission-individual-details > summary { list-style: none; cursor: pointer; }
.permission-group > summary::-webkit-details-marker, .permission-individual-details > summary::-webkit-details-marker { display: none; }
.permission-group-summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 15px; color: #1c4d6b; }
.permission-group-summary::after { content: "＋"; flex: 0 0 auto; color: #66879a; font-size: 19px; line-height: 1; }
.permission-group[open] > .permission-group-summary::after { content: "－"; }
.permission-group-summary > span { display: flex; align-items: baseline; gap: 10px; }
.permission-group-summary b { font-size: 18px; }
.permission-group-summary small, .permission-group-summary em { color: #66879a; font-size: 12px; font-style: normal; }
.permission-group-summary em { margin-left: auto; }
.permission-group-body { display: grid; gap: 10px; padding: 0 14px 14px; }
.permission-all-row { display: grid; gap: 9px; padding: 12px; border-top: 1px solid rgba(169, 203, 217, .65); border-radius: 9px; background: rgba(255, 255, 255, .65); }
.permission-all-heading { display: flex; align-items: baseline; gap: 9px; }
.permission-all-heading b { color: #1c4d6b; }
.permission-all-heading small, .permission-actor-row small { color: #66879a; font-size: 12px; }
.permission-individual-details { border: 1px solid rgba(169, 203, 217, .85); border-radius: 9px; background: rgba(255, 255, 255, .4); }
.permission-individual-details > summary { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; color: #315c73; }
.permission-individual-details > summary::after { content: "＋"; color: #66879a; }
.permission-individual-details[open] > summary::after { content: "－"; }
.permission-individual-details > summary span { font-weight: 750; }
.permission-individual-details > summary small { color: #66879a; font-size: 12px; }
.permission-actor-list { display: grid; gap: 0; padding: 0 12px 8px; }
.permission-actor-row { display: grid; grid-template-columns: minmax(150px, .27fr) minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid rgba(169, 203, 217, .65); }
.permission-actor-name b { color: #1c4d6b; }
.permission-actor-name small { display: block; margin-top: 3px; }
.permission-check-grid { display: flex; flex-wrap: wrap; gap: 7px 11px; }
.permission-check { display: inline-flex; align-items: center; gap: 5px; color: #315c73; font-size: 13px; }
.permission-check input { accent-color: #1777a7; }
.reward-forge-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.reward-card-library { display: grid; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #c9e0ea; }
.reward-card-library .reward-card-grid { margin-top: 0; }
.reward-card-library .reward-card-tile { min-height: 340px; }
.reward-preview-output { grid-template-columns: minmax(270px, 390px) minmax(180px, 1fr); gap: 20px; padding: 12px; border: 1px solid #c2dce7; border-radius: 12px; background: radial-gradient(circle at 20% 15%, #f7fdff, #eef7fb); }
.reward-preview-output > div { align-self: center; }
.reward-preview-output canvas { width: min(100%, 360px); border: 2px solid #9cc9dc; box-shadow: 0 14px 32px rgba(13, 67, 102, .25); }
.reward-card-tile.reward-nebula { background: linear-gradient(145deg, #101c54, #3a8ac4 55%, #101c54); }
.reward-card-tile.reward-plasma { background: linear-gradient(145deg, #58145f, #c63c95 55%, #58145f); }
.reward-card-tile.reward-aurora { background: linear-gradient(145deg, #0b4c46, #1dbb98 55%, #0b4c46); }
.reward-card-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.reward-card-actions button { font-size: 12px; }
.reward-card-name { margin: 8px 0 0; color: #f3fcff; font-size: 18px; letter-spacing: .05em; text-shadow: 0 2px 8px rgba(0, 0, 0, .42); }
@media (max-width: 760px) { .permission-group-summary { align-items: flex-start; } .permission-group-summary > span { flex-direction: column; gap: 2px; } .permission-group-summary em { margin-left: 0; } .permission-all-heading, .permission-individual-details > summary { align-items: flex-start; flex-direction: column; gap: 2px; } .permission-actor-row { grid-template-columns: 1fr; gap: 5px; } .reward-preview-output canvas { width: min(100%, 330px); justify-self: center; } .reward-card-library .reward-card-tile { min-height: 290px; } }

/* Card-library previews are for browsing, while configured inventory cards keep their exact print size. */
.reward-card-library .reward-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); justify-content: start; }
.reward-card-library .reward-card-tile { min-height: 260px; }
.reward-preview-output canvas { width: min(100%, 220px); }
@media (max-width: 760px) { .reward-card-library .reward-card-tile { min-height: 240px; } .reward-preview-output canvas { width: min(100%, 220px); justify-self: center; } }

/* Keep the final cascade in the ink-and-jade palette even for older module-specific rules above. */
body { color: #263b35; background-color: #f4f0df; background-image: radial-gradient(ellipse at 12% 8%, rgba(68, 113, 96, .10), transparent 28%), radial-gradient(ellipse at 92% 100%, rgba(164, 83, 62, .08), transparent 29%), repeating-linear-gradient(0deg, rgba(77, 89, 59, .035) 0 1px, transparent 1px 5px); }
.sidebar, .topbar, .login-panel { background: rgba(255,253,245,.94); border-color: #c8d3c4; }.sidebar::after { background: linear-gradient(#9b4f3b, #cfac76, #3f7063); }.nav-item:hover, .nav-item.active { color: #285c50; background: #e7eee4; border-left-color: #4a8071; }.nav-icon, .nav-item.active .nav-icon { color: #4d8172; }
.panel, .quick-action, .metric-card, .task-card, .student-card, .seat-cell, .cleaning-zone, .unassigned-panel, .assignment-row, .cleaning-row { border-color: #c8d3c4; background: rgba(255,253,245,.92); box-shadow: 0 8px 22px rgba(65,73,49,.08); }.panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .page-heading h1 { color: #294a43; font-family: "Noto Serif TC", "PMingLiU", serif; }.eyebrow { color: #4c7b6c; }.button-primary, .mini-button.primary { background: #3f7365; border-color: #3f7365; }.button-secondary, .mini-button { background: #fffdf5; border-color: #b9cbbd; color: #315f55; }.button-dark { background: #2a4d45; border-color: #2a4d45; }.text-button { color: #3e7868; }
.reward-preview-output { border-color: #b9cbbd; background: linear-gradient(135deg, #fffaf0, #e9f1e5); }.reward-preview-output canvas { border-color: #7da48a; box-shadow: 0 12px 25px rgba(55,88,67,.18); }.reward-card-tile, .reward-card-tile.reward-ocean, .reward-card-tile.reward-violet, .reward-card-tile.reward-sun, .reward-card-tile.reward-nebula, .reward-card-tile.reward-plasma, .reward-card-tile.reward-aurora { color: #263b35; border-color: #87a990; background: linear-gradient(145deg, #edf1df, #fffaf0 56%, #dde9dc) !important; }.reward-card-top { color: #527568; }.reward-card-top b { color: #9b4d3a; border-color: #b97259; }.reward-card-name { color: #274e45; text-shadow: none; font-family: "Noto Serif TC", "PMingLiU", serif; }.reward-card-badge { background: #edf3e4; border-color: #6e9a80; color: #9b4d3a; }.reward-card-effect { color: #32483f; background: rgba(255,253,245,.74); border-color: #c0d0be; }.reward-card-bottom { color: #9a583d; }.reward-card-bottom span { color: #5d766b; }.reward-card-actions button, .reward-card-preview { color: #2f6054; background: rgba(255,253,245,.74); border-color: #a7bfaa; }
.blackboard-stage { border-color: #6f9b80; border-left-color: #a9553f; background: radial-gradient(ellipse at 85% 12%, rgba(194,161,101,.22), transparent 26%), linear-gradient(135deg,#234d45,#386b5c 55%,#244e44); }.blackboard-stage::before { background-image: repeating-linear-gradient(12deg,rgba(229,237,216,.10) 0 1px,transparent 1px 13px); }.blackboard-topline, .blackboard-title-row, .blackboard-stage footer { border-color: rgba(231,240,218,.34); color: #dbead8; }.blackboard-topline b, .blackboard-title-row time, .blackboard-content li::marker { color: #e7c47d; }

.demo-badge { display: block; max-width: 170px; margin-top: 4px; color: #9b6220; line-height: 1.25; }

/* Light mecha HUD: a bright workspace with Gundam-inspired control accents. */
:root {
  --navy: #183b5a;
  --navy-2: #2d638f;
  --ink: #18364f;
  --muted: #667f92;
  --line: #c9dce8;
  --paper: #f4f8fb;
  --white: #ffffff;
  --purple: #386ca0;
  --purple-soft: #e8f1f8;
  --blue: #218bb9;
  --blue-soft: #e2f5fa;
  --orange: #d48a32;
  --orange-soft: #fff3df;
  --green: #258d72;
  --green-soft: #e6f6ef;
  --red: #c94f57;
  --hud-cyan: #22a8bb;
  --hud-blue: #2b7eb8;
  --hud-yellow: #edbf28;
  --hud-red: #d85058;
  --shadow: 0 16px 34px rgba(35, 77, 108, .10);
  color-scheme: light;
}

html, body, .login-screen, .login-panel, .app-shell, .main-area {
  background: var(--paper);
  color: var(--ink);
}

body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(34, 131, 180, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 131, 180, .065) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 48%, rgba(35, 153, 175, .045) 48% 52%, transparent 52% 100%),
    radial-gradient(circle at 88% 3%, rgba(43, 155, 195, .16), transparent 27rem),
    radial-gradient(circle at 5% 92%, rgba(237, 191, 40, .12), transparent 22rem);
  background-size: 30px 30px, 30px 30px, 220px 220px, auto, auto;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(0deg, rgba(25, 86, 123, .022) 0 1px, transparent 1px 5px);
}

.eyebrow {
  color: #177da9;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 900;
  letter-spacing: .16em;
}

.button, .mini-button, .text-button {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .055em;
}

.button {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.button-primary, .button-dark, .mini-button.primary {
  color: #fff;
  border-color: #1b6f9e;
  background: linear-gradient(135deg, #236f9f, #18577f);
  box-shadow: 0 8px 16px rgba(24, 87, 127, .18);
}

.button-primary::before, .button-dark::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--hud-yellow);
}

.button-primary:hover, .button-dark:hover, .mini-button.primary:hover {
  background: linear-gradient(135deg, #2984b8, #1c6796);
  border-color: #0f96b2;
  box-shadow: 0 10px 21px rgba(24, 87, 127, .24);
}

.button-secondary, .mini-button, .demo-buttons button {
  color: #28516e;
  border-color: #bcd5e4;
  background: #fff;
}

.button-secondary:hover, .mini-button:hover, .demo-buttons button:hover {
  color: #16486d;
  border-color: #4a9dc1;
  background: #edf8fb;
}

.button-danger {
  color: #a9464f;
  border-color: #e9b5b9;
  background: #fff8f8;
}

.button-danger:hover {
  color: #fff;
  border-color: #d9515c;
  background: #d9515c;
}

.login-art {
  color: #1b4562;
  border-right: 1px solid #bad6e6;
  background-image:
    linear-gradient(rgba(40, 132, 177, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 132, 177, .09) 1px, transparent 1px),
    radial-gradient(circle at 72% 30%, transparent 0 17%, rgba(39, 132, 176, .12) 17.2% 17.8%, transparent 18% 31%, rgba(39, 132, 176, .10) 31.2% 31.7%, transparent 32%),
    linear-gradient(145deg, #f9fcff 0%, #e0eff7 56%, #d8efe9 100%);
  background-size: 30px 30px, 30px 30px, 460px 460px, auto;
}

.login-art::before {
  content: "TACTICAL DISPLAY // 01";
  color: #1d7fa8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 900;
  letter-spacing: .2em;
}

.login-art::after {
  inset: 24px;
  border-color: rgba(29, 117, 163, .28);
  clip-path: polygon(0 0, 30% 0, 30% 2px, 70% 2px, 70% 0, 100% 0, 100% 30%, calc(100% - 2px) 30%, calc(100% - 2px) 70%, 100% 70%, 100% 100%, 70% 100%, 70% calc(100% - 2px), 30% calc(100% - 2px), 30% 100%, 0 100%, 0 70%, 2px 70%, 2px 30%, 0 30%);
}

.login-art h1, .login-heading h2, .page-heading h1 {
  color: #173d5c;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.035em;
  text-shadow: none;
}

.login-art p, .login-heading p, .page-heading p { color: #5a748a; }
.login-art .eyebrow { color: #d28a27; }
.login-art-note { color: #1f876e; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.orb { border-color: rgba(32, 139, 181, .35); box-shadow: 0 0 32px rgba(41, 143, 185, .08); }
.orb-one { box-shadow: 0 0 0 28px rgba(38, 144, 185, .045), 0 0 0 84px rgba(38, 144, 185, .022), inset 0 0 35px rgba(38, 144, 185, .08); }
.orb-two { background: rgba(237, 191, 40, .08); border-color: rgba(201, 142, 36, .25); }
.pulse-dot, .status-dot { box-shadow: 0 0 0 4px rgba(37, 141, 114, .12), 0 0 12px rgba(37, 141, 114, .45); }

.login-panel { background: rgba(255, 255, 255, .96); border-left-color: #c9dce8; }
.brand-mark span, .brand-symbol, .avatar, .student-avatar {
  color: #173d5c;
  border-radius: 4px;
  background: linear-gradient(135deg, #f5d34d, #e7ad2d);
  box-shadow: 0 6px 12px rgba(212, 138, 50, .18);
}

.brand-mark strong, .sidebar-brand strong, .user-badge strong { color: #234764; }
.brand-mark small, .sidebar-brand small, .user-badge small, .secure-label { color: #6b879b; }
.stack-form label, .inline-form label, .compact-form label, .form-row label { color: #537088; }

.stack-form input, .inline-form input, .inline-form select, .inline-form textarea,
.compact-form input, .compact-form select, .form-row input, .form-row select,
.date-input, .profile-form input, .attendance-row select {
  color: #23445e;
  border-color: #c3d8e4;
  border-radius: 4px;
  background: #fbfdff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.stack-form input:focus, .inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus,
.compact-form input:focus, .compact-form select:focus, .form-row input:focus, .form-row select:focus,
.profile-form input:focus, .attendance-row select:focus {
  border-color: #2d91b2;
  box-shadow: 0 0 0 3px rgba(45, 145, 178, .14), inset 0 1px 0 #fff;
}

.demo-box, .import-details, .import-preview { border-color: #c9dce8; background: #faffff; }
.demo-box::before { color: #267fa5; background: #faffff; }
.demo-box > div:first-child { color: #284a65; }
.demo-box > div:first-child span:last-child, .privacy-note, .form-error { color: #7890a2; }

.sidebar {
  background-color: rgba(249, 253, 255, .97);
  background-image: linear-gradient(rgba(39, 128, 174, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 128, 174, .045) 1px, transparent 1px), linear-gradient(180deg, rgba(230, 245, 250, .72), rgba(255, 255, 255, .9));
  background-size: 22px 22px, 22px 22px, auto;
  border-right-color: #bed8e6;
  box-shadow: 11px 0 30px rgba(35, 75, 105, .07);
}

.sidebar::after {
  right: -2px;
  width: 3px;
  height: 104px;
  background: linear-gradient(#edbf28 0 34%, #298db7 34% 74%, #d85058 74%);
  box-shadow: none;
}

.sidebar-brand { border-bottom-color: #d6e5ed; }
.sidebar-footer { border-top-color: #d6e5ed; }
.user-badge { border: 1px solid #c4dce8; border-radius: 4px; background: rgba(255, 255, 255, .86); box-shadow: none; }
.nav-section { color: #6a8fa5; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.nav-item { color: #55748a; border-radius: 3px; border-left: 3px solid transparent; }
.nav-item:hover { color: #1d6f97; background: #edf8fb; border-left-color: #73bfd1; }
.nav-item.active { color: #173e5c; background: linear-gradient(90deg, #e5f6f8, #f6fbfd); border-left-color: #258ab6; box-shadow: inset -3px 0 0 #edbf28; }
.nav-item.active::after { background: #edbf28; box-shadow: none; }
.nav-icon, .nav-item.active .nav-icon { color: #2b8bb4; text-shadow: none; }
.nav-item b { color: #fff; background: #d85058; border-radius: 10px; }
.logout-button { color: #58788f; }
.logout-button:hover { color: #c34a53; }

.topbar {
  color: #628197;
  border-bottom-color: #c7dce8;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 5px 18px rgba(34, 72, 98, .04);
}

.topbar::before {
  content: "CLASSROOM CONTROL BUS // ONLINE";
  color: #5d94ad;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
}

.topbar::after {
  background: linear-gradient(90deg, #edbf28 0 9%, transparent 9% 10%, #2488b3 10% 67%, transparent 67% 68%, #d85058 68% 74%, transparent 74%);
  box-shadow: none;
}

.sync-status { color: #23836e; }
.mobile-brand, .icon-button { color: #1d6f97; }
.page-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "system status"
    "content actions";
  column-gap: 30px;
  row-gap: 10px;
  padding: 17px 22px 18px;
  margin-bottom: 24px;
  border: 1px solid #c5dce8;
  border-left: 4px solid #e1b227;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .98), rgba(239, 249, 253, .92)),
    repeating-linear-gradient(90deg, transparent 0 33px, rgba(69, 143, 180, .055) 33px 34px);
  box-shadow: 0 13px 30px rgba(32, 78, 107, .08);
}
.page-heading::before {
  grid-area: system;
  content: "CLASSROOM OS // COMMAND PANEL";
  align-self: center;
  color: #287da3;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
}
.page-heading::after {
  grid-area: status;
  content: "STATUS: READY";
  align-self: center;
  justify-self: end;
  color: #23836e;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
}
.page-heading > div:first-of-type { grid-area: content; min-width: 0; }
.page-heading > .heading-action { grid-area: actions; align-self: end; justify-self: end; max-width: 100%; }
.page-heading h1 { margin: 0 0 7px; font-size: clamp(29px, 2.5vw, 37px); line-height: 1.12; }
.page-heading p { max-width: 700px; line-height: 1.65; }

/* Student roster actions form one compact command console instead of wrapping independently. */
.students-heading-actions {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  gap: 0;
  overflow: hidden;
  border: 1px solid #9ec6da;
  border-radius: 4px;
  background: #f8fcfe;
  box-shadow: 0 8px 18px rgba(30, 91, 125, .08);
}
.students-heading-actions .button {
  min-width: 142px;
  min-height: 46px;
  margin: 0;
  padding: 10px 15px;
  border: 0;
  border-left: 1px solid #c5dce8;
  border-radius: 0;
  justify-content: center;
  box-shadow: none;
  font-size: 12px;
}
.students-heading-actions .button:first-child { border-left: 0; }
.students-heading-actions #table-tent-export { min-width: 190px; }
.students-heading-actions .button-primary { box-shadow: inset 3px 0 #edbf28; }
.students-heading-actions .button:hover { position: relative; z-index: 1; }
.student-source-warning { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; margin: 0 0 18px; padding: 15px 18px; color: #754b13; border: 1px solid #e4bd66; border-left: 4px solid #e5a625; border-radius: 5px; background: linear-gradient(108deg, #fff9e7, #fffdf5); box-shadow: 0 10px 22px rgba(143, 99, 19, .08); }
.student-source-warning > span { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; border-radius: 50%; background: #d88b18; font: 900 16px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.student-source-warning strong { display: block; color: #714914; font-size: 14px; }
.student-source-warning p { margin: 4px 0 0; color: #876533; font-size: 12px; line-height: 1.65; }

/* 試算表是正式來源，但每一頁都要清楚說明目前使用的安全資料層。 */
.sync-health-panel {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 0 0 17px;
  padding: 12px 16px;
  border: 1px solid #b8dce5;
  border-left: 4px solid #2e95bd;
  border-radius: 5px;
  background: linear-gradient(104deg, #f7fdff, #edf9f5);
  box-shadow: 0 9px 20px rgba(28, 95, 121, .07);
}
.sync-health-dot { width: 9px; height: 9px; border-radius: 50%; background: #1fa881; box-shadow: 0 0 0 5px rgba(31, 168, 129, .13); }
.sync-health-panel strong { display: block; color: #176b59; font-size: 13px; }
.sync-health-panel p { margin: 2px 0; color: #4f7280; font-size: 12px; line-height: 1.45; }
.sync-health-panel small { color: #668594; font: 700 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .02em; }
.sync-health-panel[data-state="cached"], .sync-health-panel[data-state="degraded"] { border-color: #e5c06b; border-left-color: #e1a51b; background: linear-gradient(104deg, #fffaf0, #fffdf6); }
.sync-health-panel[data-state="cached"] .sync-health-dot, .sync-health-panel[data-state="degraded"] .sync-health-dot { background: #d99113; box-shadow: 0 0 0 5px rgba(217, 145, 19, .13); }
.sync-health-panel[data-state="cached"] strong, .sync-health-panel[data-state="degraded"] strong { color: #805718; }
.sync-health-panel[data-state="local"] { border-color: #c9d9e4; border-left-color: #628ca4; background: linear-gradient(104deg, #f8fbfd, #f2f7fa); }
.sync-health-panel[data-state="local"] .sync-health-dot { background: #6e8fa1; box-shadow: 0 0 0 5px rgba(88, 128, 151, .13); }
.sync-health-panel[data-state="local"] strong { color: #416578; }
.sync-health-action { min-height: 33px; padding: 6px 12px; color: #135f84; border: 1px solid #9bc5d9; border-radius: 3px; background: #fff; font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; cursor: pointer; }
.sync-health-action:hover { color: #fff; border-color: #167da7; background: #197da5; }

.quick-action, .metric-card, .panel, .student-card, .inline-form, .setting-action, .task-card {
  color: var(--ink);
  border-color: #c8dce8;
  border-radius: 5px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
}

.quick-action, .metric-card, .panel { position: relative; overflow: hidden; }
.quick-action::before, .metric-card::after { content: ""; position: absolute; pointer-events: none; }
.quick-action::before { inset: 0 auto auto 0; width: 20px; height: 3px; background: #edbf28; }
.metric-card::after { inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, currentColor 0 72%, transparent 72%); opacity: .85; }
.quick-action:hover, .task-card:hover, .student-card:hover, .setting-action:hover { border-color: #70b6ce; background: #fbfeff; box-shadow: 0 17px 34px rgba(35, 77, 108, .14); }
.quick-action > span { color: #155b81; border: 1px solid #b8dce9; border-radius: 4px; background: #e2f4f8; box-shadow: none; }
.quick-action strong, .metric-card strong, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .profile-list strong, .setting-action strong { color: #1d425f; }
.quick-action small, .task-main p, .task-due, .task-audience, .announcement-card span, .announcement-card p, .report-card p, .empty-state, .filter-row, .legend, .panel-note, .loading-line { color: #6b8294; }
.metric-card { border-top-width: 2px; }
.metric-card strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.metric-label { color: #4d88a4; letter-spacing: .08em; }
.metric-navy, .metric-blue { color: #2089b6; }
.metric-orange { color: #cf8430; }
.metric-purple { color: #386ca0; }
.metric-green { color: #258d72; }
.panel::before { border-color: #2d88ae; }
.panel-header { border-bottom-color: #d8e6ee; }
.date-chip, .count-pill { color: #1e7196; border: 1px solid #b9dce8; border-radius: 4px; background: #e4f5f8; }
.count-pill { color: #9a681c; border-color: #ead69a; background: #fff6d9; }

.attendance-summary div, .profile-list div, .student-focus, .private-note { border-color: #d2e3eb; background: #f7fbfd; }
.attendance-summary strong, .student-focus strong { color: #244761; }
.attendance-summary span, .student-focus span, .profile-list span, .student-card-footer { color: #718899; }
.attendance-table .attendance-row {
  grid-template-columns: 55px minmax(0, .82fr) 128px minmax(180px, 1.18fr);
}

@media (max-width: 760px) {
  .attendance-table .attendance-row {
    grid-template-columns: 42px minmax(0, 1fr) 116px minmax(150px, 1fr);
    gap: 6px;
  }
}
.section-divider, .announcement-card, .report-card, .audit-row, .event-list { border-color: #dce8ee; }
.task-card.compact { background: transparent; border-bottom-color: #dbe7ed; }
.task-check { border-color: #a9cbd9; background: #fff; }
.task-check.checked { color: #fff; border-color: #258d72; background: #258d72; }
.announcement-icon, .report-icon { color: #a16a1c; border: 1px solid #efd297; background: #fff5d8; }
.focus-ring { color: #1f8ab4; border-color: #b4d7e3; border-top-color: #edbf28; }
.student-check { color: #31566e; border-color: #c8dce7; background: #fbfeff; }
.student-check:has(input:checked) { border-color: #63aabf; background: #e9f7f5; box-shadow: inset 0 0 0 1px rgba(37, 141, 114, .12); }
.student-check input { accent-color: #2089b6; }
.privacy-banner { color: #1d8069; border-color: #b8e1d3; background: #eaf8f3; }
.privacy-banner p { color: #5c9987; }
.toast { color: #20445e; border: 1px solid #65aac3; border-left: 4px solid #edbf28; border-radius: 4px; background: #fafdff; box-shadow: var(--shadow); }
.toast[data-kind="error"] { color: #7d2631; border-color: #db8388; border-left-color: #d85058; background: #fff4f4; }

.seat-planner, .unassigned-panel, .organization-planner, .planning-layout > aside {
  border-color: #c7dce8;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
}
.podium-label { color: #315c76; border-color: #b5d2e0; background: #edf7fa; }
.seat-cell-button { color: #315a72; border-color: #c7dce8; background: #f9fcfe; }
.seat-cell-button:hover, .seat-cell.is-selected .seat-cell-button { border-color: #2d91b2; background: #e7f6f9; }
.seat-cell.is-disabled .seat-cell-button { color: #8a9ca8; background: #eef2f5; }
.seat-disable-toggle, .seat-student-chip, .available-student-card { border-color: #c8dce8; background: #f8fcfe; color: #315b75; }
.seat-student-chip:hover, .seat-student-chip.is-selected, .available-student-card:hover { border-color: #52a7bf; background: #e7f6f8; }

.student-sheet-wrap { border-color: #bdd6e3; background: #fff; box-shadow: var(--shadow); }
.student-sheet-header { color: #e7f6fb; border-bottom-color: #164e71; background: linear-gradient(90deg, #1a5b80, #236f97 65%, #2b9aac); }
.student-edit-form { border-bottom-color: #d5e4eb; background: #fff; }
.student-edit-form:hover, .student-edit-form:focus-within { border-left-color: #edbf28; background: #f7fcfe; }
.student-sheet-row .sheet-cell { border-right-color: #dbe7ed; }
.student-sheet-row input { color: #274a62; }
.student-sheet-row input:focus { color: #173f5c; background: #eaf7fa; box-shadow: inset 0 0 0 1px #2d91b2; }
.student-edit-form input, .student-edit-form textarea { color: #294a62; border-color: #c8dce7; background: #fbfdff; }
.student-edit-form input:focus, .student-edit-form textarea:focus { border-color: #2d91b2; background: #fff; box-shadow: 0 0 0 3px rgba(45, 145, 178, .12); }
.student-edit-secondary .sheet-cell > span, .student-note-field > span, .student-account-note { color: #698497; }
.student-account-note strong { color: #1e7fa5; }

/* Public information board: intentionally omits roster, attendance, seating and personal data. */
.public-screen { min-height: 100vh; color: var(--ink); padding: 20px; position: relative; }
.public-topbar, .public-content { width: min(1180px, 100%); margin-inline: auto; }
.public-topbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #c6dce8; background: rgba(255,255,255,.9); box-shadow: var(--shadow); padding: 10px 16px 10px 12px; }
.public-brand { display: flex; align-items: center; gap: 11px; }
.public-brand > span { display: grid; place-items: center; width: 42px; height: 42px; background: linear-gradient(135deg, #e4bd28, #f5d657); color: #183b5a; font: 900 22px/1 "Microsoft JhengHei", sans-serif; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.public-brand strong, .public-brand small { display: block; }
.public-brand strong { color: #173d5a; font-size: 16px; letter-spacing: .08em; }
.public-brand small { margin-top: 3px; color: #4283a6; font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.public-content { padding: 34px 0 48px; }
.public-hero { position: relative; overflow: hidden; border: 1px solid #c2dae7; background: linear-gradient(118deg, rgba(255,255,255,.96), rgba(229,245,249,.88)); box-shadow: var(--shadow); padding: clamp(28px, 5vw, 56px); }
.public-hero::before, .public-hero::after { content: ""; position: absolute; pointer-events: none; }
.public-hero::before { width: 330px; height: 330px; right: -125px; top: -172px; border: 1px solid rgba(35, 135, 175, .32); border-radius: 50%; box-shadow: 0 0 0 34px rgba(35,135,175,.04), 0 0 0 74px rgba(35,135,175,.025); }
.public-hero::after { height: 4px; width: min(55%, 480px); left: 0; bottom: 0; background: linear-gradient(90deg, #e8bd29 0 82%, #2795b6 82% 94%, #d35158 94%); }
.public-hero h1 { position: relative; margin: 12px 0 10px; color: #193e5d; font-size: clamp(30px, 4.3vw, 52px); letter-spacing: .045em; }
.public-hero p { position: relative; max-width: 620px; margin: 0; color: #58778c; font-size: 16px; line-height: 1.75; }
.public-hero-meta { position: relative; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; color: #37799b; font: 800 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.public-board { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 18px; margin-top: 20px; }
.public-board.public-board-tasks-only { grid-template-columns: minmax(0, 1fr); }
.public-panel { min-width: 0; border: 1px solid #cadde7; background: rgba(255,255,255,.94); box-shadow: var(--shadow); padding: 22px; }
.public-panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid #dbe8ee; }
.public-panel-heading h2 { margin: 5px 0 0; color: #234760; font-size: 22px; }
.public-panel-heading > span { color: #3b8ba4; font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 7px 8px; border: 1px solid #b7d8e4; background: #eef8fb; }
.public-announcement-list, .public-task-list { display: grid; }
.public-panel .announcement-card { padding: 15px 0; }
.public-task-card { display: flex; gap: 14px; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #e0ebf0; }
.public-task-card:last-child { border-bottom: 0; }
.public-task-card h3 { margin: 9px 0 4px; color: #234760; font-size: 15px; }
.public-task-card p { margin: 0; color: #637e8f; font-size: 12px; line-height: 1.65; }
.public-task-card time { flex: 0 0 auto; color: #538098; font: 800 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; }
.public-empty, .public-loading { color: #6d8999; padding: 26px 0; font-size: 13px; }
.public-privacy-note { margin: 18px 0 0; color: #698497; font-size: 11px; line-height: 1.7; }
.login-public-link { margin-top: 18px; padding: 0; text-align: left; font-size: 11px; }

/* The roster remains one row per student. Role cells mirror the two assignment modules. */
.student-sheet-header, .student-sheet-row { grid-template-columns: 54px 102px 140px 54px 120px 112px 104px 64px 92px 130px 145px 155px 115px 180px; min-width: 1567px; }
.role-sheet-cell { background: #f4fafc; }
.role-sheet-cell strong { color: #2a7293; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.seat-toolbar select { border: 1px solid #cddfe9; border-radius: 4px; background: #fff; color: #25445f; padding: 8px; font: inherit; }

.profile-avatar-panel { display: flex; align-items: center; gap: 16px; margin: -2px 0 18px; padding: 12px; border: 1px solid #d2e3eb; border-radius: 9px; background: #f7fbfd; }
.profile-avatar-panel > div:last-child { min-width: 0; }
.profile-avatar-panel strong { display: block; color: #1d425f; font-size: 13px; }
.profile-avatar-panel p { margin: 5px 0 0; color: #718899; font-size: 11px; line-height: 1.6; }
.private-avatar { display: grid; place-items: center; position: relative; overflow: hidden; flex: 0 0 auto; width: 92px; height: 92px; border: 1px solid #b9d5c7; border-radius: 14px; background: linear-gradient(145deg, #edf2df, #d6e2d4); }
.private-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.private-avatar-fallback { color: #6b8d78; font-size: 28px; font-weight: 800; }
.student-profile-sheet-cell { display: flex !important; align-items: center; justify-content: center; }
.student-profile-sheet-cell > span { display: none !important; }
.student-profile-link { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 7px; border: 1px solid #a8c8d8; border-radius: 4px; color: #1c4e6d; background: #fcfeff; font: inherit; font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.student-profile-link:hover, .student-profile-link:focus-visible { border-color: #7ca8bc; color: #125e88; background: #eaf7fa; box-shadow: 0 0 0 3px rgba(94, 148, 171, .18); }
.student-sheet-header, .student-sheet-row { grid-template-columns: 64px 54px 102px 140px 54px 120px 112px 104px 64px 92px 130px 145px 155px 115px 180px; min-width: 1631px; }

/* Contrast pass: retain the bright HUD surface while separating controls and reading text more clearly. */
:root { --ink: #123a55; --muted: #536f82; --line: #afcad9; --paper: #f2f7fa; }
.sidebar { border-right-color: #a7c6d6; box-shadow: 12px 0 28px rgba(23, 66, 96, .10); }
.topbar { color: #4d6e84; border-bottom-color: #afcad9; box-shadow: 0 5px 18px rgba(23, 66, 96, .07); }
.nav-section { color: #557d96; }
.nav-item { color: #3e637c; font-weight: 700; }
.nav-item:hover { color: #125e88; background: #e3f3f8; border-left-color: #429bb8; }
.nav-item.active { color: #103d5c; background: linear-gradient(90deg, #dceff5, #f7fcfe); border-left-color: #167ca8; }
.button-secondary, .mini-button, .demo-buttons button { color: #1c4e6d; border-color: #a8c8d8; background: #fcfeff; }
.quick-action, .metric-card, .panel, .student-card, .inline-form, .setting-action, .task-card { border-color: #b4cdda; box-shadow: 0 15px 30px rgba(28, 70, 100, .11); }
.quick-action strong, .metric-card strong, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .profile-list strong, .setting-action strong { color: #153d59; }
.quick-action small, .task-main p, .task-due, .task-audience, .announcement-card span, .announcement-card p, .report-card p, .empty-state, .filter-row, .legend, .panel-note, .loading-line { color: #567185; }
.page-heading { border-bottom-color: #bdd4e0; }
.login-art p, .login-heading p, .page-heading p { color: #4d6d82; }
.stack-form label, .inline-form label, .compact-form label, .form-row label { color: #46667d; }
.public-topbar, .public-hero, .public-panel { border-color: #b2cedc; }
.public-hero p, .public-task-card p { color: #4d6f84; }
.public-panel-heading h2, .public-task-card h3 { color: #173f5b; }

/* Bright public HUD: retain a light page, but make the front door feel like an active command display. */
.public-screen {
  background-image: linear-gradient(rgba(38, 146, 192, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 146, 192, .10) 1px, transparent 1px), radial-gradient(circle at 88% 7%, rgba(34, 184, 206, .19), transparent 30%), radial-gradient(circle at 2% 90%, rgba(246, 204, 47, .20), transparent 27%);
  background-size: 38px 38px, 38px 38px, auto, auto;
}
.public-topbar { border-top: 3px solid #f0be29; border-bottom: 2px solid #2b91ba; background: linear-gradient(100deg, rgba(255,255,255,.98), rgba(236,250,255,.93)); }
.public-hero { border-color: #78b7d3; background: linear-gradient(118deg, rgba(255,255,255,.98) 0%, rgba(220,247,252,.95) 58%, rgba(204,238,249,.92) 100%); box-shadow: 0 22px 46px rgba(23, 94, 129, .18), inset 0 1px 0 #fff; }
.public-hero::before { border-color: rgba(22, 141, 190, .48); box-shadow: 0 0 0 32px rgba(36, 160, 196, .07), 0 0 0 78px rgba(36, 160, 196, .035); }
.public-hero h1 { color: #0d4165; text-shadow: 2px 2px 0 rgba(255,255,255,.8); }
.public-hero .eyebrow { color: #007fb8; }
.public-hero-meta { color: #10648d; }
.public-panel { border-color: #a5cddd; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,252,255,.93)); }
.public-board .public-panel:first-child { border-top: 3px solid #f0be29; }
.public-board .public-panel:last-child { border-top: 3px solid #28a0c5; }
.public-calendar-panel { margin-top: 18px; border-top: 3px solid #e85c67; }
.public-calendar-week-controls { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; align-items: center; gap: 10px; margin-top: 14px; }
.public-calendar-week-controls button { color: #155f80; border: 1px solid #98c8da; border-radius: 4px; background: #f5fcff; padding: 7px 10px; cursor: pointer; font: 700 12px/1.2 inherit; }
.public-calendar-week-controls button:hover { color: #fff; border-color: #147da1; background: #147da1; }
.public-calendar-week-controls strong { color: #174a69; text-align: center; font-size: 13px; }
.calendar-week-grid .calendar-day { min-height: 126px; }
.public-cultivation-panel { margin-top: 18px; border-top: 3px solid #9273c5; }
.public-panel-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.public-ranking-toggle { display: inline-flex; overflow: hidden; border: 1px solid #b7d8e4; border-radius: 4px; background: #eef8fb; }
.public-ranking-toggle-button { color: #3b7388; border: 0; border-right: 1px solid #b7d8e4; background: transparent; padding: 7px 9px; cursor: pointer; font: 800 11px/1 inherit; }
.public-ranking-toggle-button:last-child { border-right: 0; }
.public-ranking-toggle-button:hover { color: #174a69; background: #dff2f8; }
.public-ranking-toggle-button.is-active { color: #fff; background: #397968; }
.public-cultivation-list { display: grid; gap: 0; }
.public-cultivation-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid #dbe8ee; padding: 11px 3px; }
.public-cultivation-row:last-child { border-bottom: 0; }
.public-cultivation-row b { color: #805bb0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.public-cultivation-row strong { color: #214d66; }
.public-cultivation-row span { color: #7b5b30; font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.public-cultivation-note { margin: 12px 0 0; color: #668092; font-size: 11px; }

.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.calendar-board-panel, .calendar-add-panel { min-width: 0; }
.calendar-month-switch { display: inline-flex; align-items: center; gap: 8px; }
.calendar-month-switch strong { color: #174a69; min-width: 118px; text-align: center; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.calendar-grid { position: relative; margin-top: 17px; border: 1px solid #79b7d1; background: linear-gradient(145deg, #fafdff 0%, #e8f7fb 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 12px 24px rgba(24, 101, 134, .10); overflow: hidden; }
.calendar-grid::before { content: ""; position: absolute; z-index: 0; inset: 44px 0 0; pointer-events: none; background: linear-gradient(110deg, transparent 0 38%, rgba(43, 164, 198, .055) 38.2% 38.5%, transparent 38.7% 73%, rgba(238, 187, 42, .07) 73.2% 73.45%, transparent 73.7%); }
.calendar-grid-system { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 11px; min-height: 43px; padding: 0 13px; color: #dff8ff; border-bottom: 2px solid #e7bc2d; background: linear-gradient(90deg, #0e3f61 0%, #126b8e 64%, #178aa6 100%); font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.calendar-grid-system span { color: #f4d45c; }
.calendar-grid-system b { color: #d9f8ff; padding: 5px 7px; border: 1px solid rgba(173,239,252,.48); background: rgba(1, 44, 69, .34); font-size: 9px; }
.calendar-grid-system i { color: #d8fbf2; font-style: normal; font-size: 9px; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { position: relative; z-index: 1; color: #275f7e; background: linear-gradient(90deg, #dff2f8, #eefaff); font: 900 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; letter-spacing: .12em; }
.calendar-weekdays span { padding: 10px 3px; border-right: 1px solid #badce8; }
.calendar-day { position: relative; z-index: 1; min-height: 91px; padding: 7px 6px 6px; border-top: 1px solid #c8e1eb; border-right: 1px solid #c8e1eb; background: rgba(255,255,255,.78); }
.calendar-day::after { content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-top: 2px solid rgba(24, 128, 166, .35); border-right: 2px solid rgba(24, 128, 166, .35); }
.calendar-day:nth-child(7n), .calendar-weekdays span:nth-child(7n) { border-right: 0; }
.calendar-day.is-empty { background: rgba(225, 240, 246, .68); }
.calendar-day.is-today { background: linear-gradient(145deg, #fffbe1, #e5fbff); box-shadow: inset 0 0 0 2px #efbc29, inset 5px 0 0 #1e9ab9; }
.calendar-date { display: inline-grid; min-width: 24px; place-items: center; color: #d8f8ff; border-left: 3px solid #edbf28; background: #1b6788; padding: 3px 5px; font: 900 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.calendar-day-events { display: grid; gap: 3px; margin-top: 6px; }
.calendar-day-event { display: block; overflow: hidden; color: #0f5e80; border-left: 3px solid #e8b529; background: rgba(234, 250, 252, .95); padding: 4px 5px; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(91, 174, 199, .16); }
.calendar-day-event.is-google { color: #4e58a0; border-left-color: #4c75c8; background: #edf1ff; }
.calendar-day-event.is-manual { border-right: 2px solid rgba(232, 181, 41, .42); }
button.calendar-day-event { width: 100%; border-top: 0; border-bottom: 0; border-radius: 0; font-family: inherit; font-weight: inherit; line-height: inherit; text-align: left; cursor: pointer; }
button.calendar-day-event.is-editable:hover { color: #0b4865; background: #d7f2f6; }
.calendar-day-events small { color: #5d8295; font-size: 10px; }
.calendar-timeline { display: grid; gap: 0; margin-top: 14px; }
.calendar-event { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 0 12px 9px; border-bottom: 1px solid #dbe8ee; border-left: 3px solid #e7b526; background: linear-gradient(90deg, rgba(242, 253, 255, .86), transparent); }
.calendar-event.is-google { border-left-color: #4c75c8; }
.calendar-event:last-child { border-bottom: 0; }
.calendar-event > time { color: #17739a; font: 800 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.calendar-event strong { display: block; color: #153f5d; font-size: 13px; }
.calendar-event p { margin: 4px 0 0; color: #5e7b8e; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.calendar-source { display: inline-block; margin: 0 5px 4px 0; color: #15799e; border: 1px solid #acd2df; background: #ebf8fa; padding: 2px 4px; font: 800 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; vertical-align: 1px; }
.calendar-event.is-google .calendar-source { color: #53649a; border-color: #c7cfef; background: #f1f2ff; }
.calendar-delete { color: #a9464f; border: 1px solid #e9b5b9; background: #fff8f8; padding: 2px 7px; cursor: pointer; font-size: 16px; line-height: 1; }
.calendar-delete:hover { color: #fff; border-color: #d9515c; background: #d9515c; }
.calendar-actions { display: flex; gap: 6px; align-items: center; }
.calendar-edit { color: #176f94; border: 1px solid #b8d8e4; background: #f2fbfd; padding: 5px 8px; cursor: pointer; font-size: 11px; font-weight: 700; }
.calendar-edit:hover { color: #fff; border-color: #197fa4; background: #197fa4; }
.calendar-add-panel { margin-top: 18px; }
.calendar-event-form { display: grid; grid-template-columns: 145px 145px minmax(145px, .8fr) 120px 120px minmax(135px, .8fr) auto; gap: 12px; align-items: end; }
.calendar-event-form label, .calendar-source-form label { display: grid; gap: 6px; color: #46667d; font-size: 12px; font-weight: 700; }
.calendar-event-form input, .calendar-event-form textarea, .calendar-event-form select, .calendar-source-form input { min-width: 0; color: #23445e; border: 1px solid #c3d8e4; border-radius: 4px; background: #fbfdff; padding: 9px 10px; font: inherit; }
.calendar-event-form textarea { resize: vertical; }
.calendar-time-mode { min-width: 145px; }
.calendar-time-field[hidden] { display: none; }
.calendar-event-form .calendar-event-title { grid-column: span 2; }
.calendar-event-form .calendar-event-description { grid-column: 1 / -2; }
.calendar-all-day span:last-child { display: flex; align-items: center; gap: 7px; min-height: 38px; color: #23445e; font-weight: 700; }
.calendar-all-day input { width: 16px; height: 16px; accent-color: #1986aa; }
.calendar-form-actions { display: flex; gap: 8px; align-items: end; }
.calendar-source-form { display: grid; gap: 12px; padding: 0 18px 18px; }
.calendar-source-form p { margin: 0; color: #5a788b; font-size: 12px; line-height: 1.65; }
.calendar-settings-panel { border-top: 3px solid #2a98bd; }
.calendar-board-panel { border-top: 3px solid #1d92b5; }

/* LINE 班級管家：管理頁只呈現設定狀態，不顯示任何 Channel 憑證。 */
.line-bot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.line-bot-grid .panel { min-width: 0; }
.line-bot-grid .panel-wide { grid-column: 1 / -1; }
.line-bot-status { border-top: 3px solid #21b673; }
.line-bot-webhook { border-top: 3px solid #2698bd; }
.line-bot-controls { border-top: 3px solid #e7b526; }
.line-rich-menu-panel { border-top: 3px solid #267ea5; }
.line-status-list { display: grid; gap: 0; padding: 0 18px 8px; }
.line-status-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #dce8ee; font-size: 12px; }
.line-status-list span { color: #5a788b; }
.line-status-list b { color: #174a69; text-align: right; }
.line-bot-status .panel-note, .line-bot-webhook .panel-note { margin: 0; padding: 0 18px 18px; }
.line-bot-webhook > label { display: grid; gap: 6px; padding: 0 18px; color: #46667d; font-size: 12px; font-weight: 700; }
.line-bot-webhook input, .line-bot-form input { min-width: 0; color: #23445e; border: 1px solid #c3d8e4; border-radius: 4px; background: #fbfdff; padding: 9px 10px; font: inherit; }
.line-bot-webhook input { color: #176687; font: 800 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.line-webhook-actions { display: flex; gap: 8px; padding: 12px 18px; }
.line-webhook-actions .button { text-decoration: none; }
.line-bot-form { display: grid; gap: 16px; padding: 0 18px 18px; }
.line-bot-form > label:not(.line-enabled) { display: grid; gap: 6px; color: #46667d; font-size: 12px; font-weight: 700; }
.line-bot-form small { color: #5b798b; font-size: 11px; font-weight: 500; line-height: 1.6; }
.line-enabled { display: grid; grid-template-columns: 21px minmax(0, 1fr); align-items: start; gap: 10px; color: #23445e; cursor: pointer; }
.line-enabled input { width: 18px; height: 18px; margin-top: 2px; padding: 0; accent-color: #1582a9; }
.line-enabled span { display: grid; gap: 3px; }
.line-enabled b { color: #153d59; font-size: 13px; }
.line-attendance-alerts { display: grid; gap: 16px; border-top: 3px solid #b77927; }
.line-attendance-alerts > .panel-note { margin: 0 18px; line-height: 1.8; }
.line-alert-summary { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0 18px; color: #526b70; font-size: 12px; }
.line-alert-summary b { color: #184e59; }
.line-alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 18px; }
.line-alert-actions form { display: flex; flex: 1 1 430px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.line-alert-review, .line-alert-calendar { display: grid; gap: 10px; margin: 0 18px; padding: 16px; border: 1px solid #dfd1ac; border-radius: 6px; background: rgba(255, 251, 233, .76); }
.line-alert-review h3, .line-alert-calendar h3 { margin: 0; color: #194b58; font-size: 15px; }
.line-alert-review pre { overflow-wrap: anywhere; white-space: pre-wrap; margin: 0; padding: 12px; border-radius: 4px; background: #fffdf5; color: #314e51; font-family: inherit; font-size: 13px; line-height: 1.8; }
.line-alert-review p, .line-alert-calendar p { margin: 0; color: #596f70; font-size: 12px; line-height: 1.8; }
.line-alert-review small { color: #637b75; }
.line-alert-calendar form { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(210px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: 9px; }
.line-alert-calendar label { display: grid; gap: 5px; color: #526b70; font-size: 12px; font-weight: 700; }
.line-alert-calendar input, .line-alert-calendar select { min-width: 0; min-height: 40px; padding: 8px; border: 1px solid #d3c89f; border-radius: 4px; background: #fffdf5; color: #294a4e; font: inherit; }
.line-alert-list { display: grid; gap: 7px; }
.line-alert-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(154, 133, 84, .24); }
.line-alert-row > div { display: grid; gap: 4px; min-width: 0; }
.line-alert-row b { color: #234b51; font-size: 12px; }
.line-alert-row span { color: #657677; font-size: 11px; line-height: 1.5; }
.line-manual-binding { display: grid; gap: 14px; margin: 8px 18px 18px; padding: 16px; border: 1px solid #d9c694; border-radius: 6px; background: linear-gradient(135deg, rgba(255, 250, 226, .9), rgba(247, 239, 212, .72)); }
.line-manual-binding h3 { margin: 4px 0 6px; color: #194b58; font-size: 16px; }
.line-manual-binding p { margin: 0; color: #536b6a; font-size: 12px; line-height: 1.7; }
.line-manual-binding .line-manual-binding-note { color: #806a43; font-size: 11px; }
.line-manual-binding-fields { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(140px, .7fr) minmax(200px, 1.2fr) auto; align-items: end; gap: 10px; }
.line-manual-binding-fields label { display: grid; gap: 5px; color: #46667d; font-size: 12px; font-weight: 700; }
.line-manual-binding-fields input, .line-manual-binding-fields select { min-width: 0; min-height: 40px; padding: 8px 10px; color: #23445e; border: 1px solid #c3d8e4; border-radius: 4px; background: #fffdf5; font: inherit; }
.line-manual-binding-fields .button { min-height: 40px; }
.line-guardian-contact-results { display: grid; gap: 8px; }
.line-guardian-contact-results > .muted { color: #637c81; font-size: 12px; line-height: 1.6; }
.line-guardian-contact-results > .button { justify-self: start; }
.line-guardian-contact { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #e3dcc3; border-radius: 5px; background: rgba(255, 255, 255, .75); }
.line-guardian-contact > img, .line-contact-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; object-fit: cover; background: #e3eee8; color: #337765; font-size: 9px; font-weight: 800; }
.line-guardian-contact-name { display: grid; min-width: 0; gap: 3px; }
.line-guardian-contact-name strong { overflow: hidden; color: #194b58; text-overflow: ellipsis; white-space: nowrap; }
.line-guardian-contact-name small, .line-contact-state { color: #697e7d; font-size: 11px; }
.line-contact-state { text-align: right; }
.line-rich-menu-layout { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(220px, .8fr); gap: 20px; align-items: center; padding: 0 18px 18px; }
.line-rich-menu-layout img { display: block; width: 100%; border: 1px solid #a8cddb; border-radius: 8px; background: #eefaff; box-shadow: 0 12px 26px rgba(28, 90, 121, .15); }
.line-rich-menu-layout p { margin: 0 0 12px; color: #577488; font-size: 12px; line-height: 1.7; }
.line-rich-menu-layout .button { margin-top: 3px; }

@media (max-width: 860px) {
  .page-heading {
    grid-template-columns: 1fr;
    grid-template-areas:
      "system"
      "content"
      "actions";
  }
  .page-heading::after { display: none; }
  .page-heading > .heading-action { justify-self: stretch; }
  .students-heading-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .students-heading-actions .button, .students-heading-actions #table-tent-export { min-width: 0; }
  .calendar-layout { grid-template-columns: 1fr; }
  .calendar-event-form { grid-template-columns: 1fr 1fr; }
  .calendar-event-form .calendar-event-title, .calendar-event-form .calendar-event-description { grid-column: 1 / -1; }
  .calendar-event-form .calendar-form-actions { grid-column: 1 / -1; }
  .line-bot-grid { grid-template-columns: 1fr; }
  .line-bot-grid .panel-wide { grid-column: auto; }
  .line-alert-actions form, .line-alert-calendar form { grid-template-columns: 1fr; }
  .line-alert-actions form { display: grid; }
  .line-alert-row { align-items: flex-start; flex-direction: column; }
  .line-manual-binding-fields { grid-template-columns: 1fr 1fr; }
  .line-manual-binding-fields .line-manual-search { grid-column: 1 / -1; }
  .line-manual-binding-fields .button { width: 100%; }
  .line-guardian-contact { grid-template-columns: 38px minmax(0, 1fr); }
  .line-guardian-contact .button, .line-contact-state { grid-column: 2; justify-self: start; }
  .line-rich-menu-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { background-size: 24px 24px, 24px 24px, 170px 170px, auto, auto; }
  .sync-health-panel { grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
  .sync-health-action { grid-column: 2; justify-self: start; }
  .login-art::after { inset: 15px; }
  .login-art::before { top: 18px; left: 28px; font-size: 8px; }
  .sidebar { background-color: #fafdff; }
  .topbar::before, .page-heading::after { display: none; }
  .page-heading { padding: 15px; row-gap: 8px; }
  .students-heading-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .students-heading-actions .button:first-child { grid-column: 1 / -1; }
  .students-heading-actions .button { min-height: 44px; padding: 9px 8px; font-size: 11px; }
  .student-source-warning { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 13px; }
  .panel::before { width: 14px; height: 14px; }
  .metric-card { padding: 14px 12px; }
  .public-screen { padding: 10px; }
  .public-topbar { min-height: 58px; padding: 8px 10px; }
  .public-brand > span { width: 36px; height: 36px; font-size: 18px; }
  .public-brand strong { font-size: 13px; }
  .public-brand small { font-size: 8px; }
  .public-topbar .button { padding: 9px 10px; font-size: 10px; }
  .public-content { padding: 15px 0 34px; }
  .public-board { grid-template-columns: 1fr; gap: 13px; margin-top: 13px; }
  .public-panel { padding: 16px; }
  .public-hero { padding: 27px 20px; }
  .public-task-card { display: grid; }
  .public-task-card time { text-align: left; }
  .student-sheet-header, .student-sheet-row { min-width: 1631px; }
  .calendar-day { min-height: 68px; padding: 4px; }
  .calendar-grid-system { grid-template-columns: 1fr auto; min-height: 38px; padding: 0 9px; font-size: 8px; }
  .calendar-grid-system b { display: none; }
  .calendar-grid-system i { font-size: 8px; }
  .calendar-weekdays { font-size: 8px; letter-spacing: .04em; }
  .calendar-date { min-width: 20px; padding: 2px 3px; font-size: 9px; }
  .calendar-day-event { font-size: 9px; }
  .calendar-month-switch { width: 100%; justify-content: space-between; }
  .line-webhook-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .line-webhook-actions .button { min-height: 42px; text-align: center; }
  .line-status-list > div { align-items: start; }
}

/* Official weekly timetable: a compact desktop grid that remains legible on phones. */
.timetable-panel { min-width: 0; margin-top: 18px; border-top: 3px solid #277fa4; }
.timetable-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 0 18px 14px; border-bottom: 1px solid #dce9ef; }
.timetable-week-select { display: flex; align-items: center; gap: 8px; color: #365d75; font-size: 12px; font-weight: 800; white-space: nowrap; }
.timetable-week-select select { max-width: min(390px, 72vw); min-height: 36px; border: 1px solid #bad4e1; border-radius: 5px; background: #f9fcfe; color: #1f5878; padding: 7px 28px 7px 10px; font: 700 12px/1.2 inherit; }
.timetable-class-label { color: #5e7d90; font: 800 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.timetable-grid-wrap { overflow: auto; max-width: 100%; border: 1px solid #d4e3ea; border-radius: 7px; background: #f7fbfd; overscroll-behavior-inline: contain; }
.timetable-grid { width: 100%; min-width: 730px; border-collapse: separate; border-spacing: 0; color: #23465e; font-size: 12px; }
.timetable-grid th, .timetable-grid td { border-right: 1px solid #dbe8ee; border-bottom: 1px solid #dbe8ee; }
.timetable-grid tr:last-child > * { border-bottom: 0; }
.timetable-grid tr > *:last-child { border-right: 0; }
.timetable-grid thead th { position: sticky; top: 0; z-index: 3; min-width: 120px; background: #e7f3f8; color: #235876; padding: 10px 8px; text-align: center; font-weight: 800; box-shadow: 0 1px 0 #c8dfe9; }
.timetable-grid thead th small { display: block; margin-top: 3px; color: #608196; font: 700 10px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; }
.timetable-grid .timetable-period-head { position: sticky; left: 0; z-index: 5; min-width: 105px; background: #d6eaf3; }
.timetable-grid .timetable-period { position: sticky; left: 0; z-index: 2; width: 105px; min-width: 105px; background: #f3f9fb; color: #2d627f; padding: 9px 7px; text-align: center; box-shadow: 1px 0 0 #cddfe8; }
.timetable-grid .timetable-period b, .timetable-grid .timetable-period small { display: block; }
.timetable-grid .timetable-period small { margin-top: 4px; color: #7895a5; font-size: 9px; line-height: 1.35; }
.timetable-grid td { min-width: 120px; height: 66px; background: #fff; padding: 8px 9px; vertical-align: top; }
.timetable-grid td:nth-child(odd) { background: #fbfdff; }
.timetable-grid td strong, .timetable-grid td small, .timetable-grid td em { display: block; overflow-wrap: anywhere; }
.timetable-grid td strong { color: #1c567c; font-size: 13px; line-height: 1.35; }
.timetable-grid td small { margin-top: 4px; color: #527f98; font-size: 11px; line-height: 1.35; }
.timetable-grid td em { margin-top: 3px; color: #8399a6; font-size: 10px; font-style: normal; }
.timetable-grid td.is-empty { background: #f4f8fa; color: #a0b1ba; text-align: center; vertical-align: middle; }
.timetable-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px 0; color: #8b6427; font-size: 11px; line-height: 1.5; }
.timetable-status.is-ready { color: #33756e; }
.timetable-status a { flex: 0 0 auto; color: #287493; font-weight: 800; text-decoration: none; }
.timetable-empty { display: grid; gap: 6px; padding: 22px 18px; color: #5c7789; }
.timetable-empty strong { color: #315d76; font-size: 15px; }
.public-panel.timetable-panel { margin-top: 20px; }
.public-panel .timetable-grid-wrap { margin: 0; }

@media (max-width: 760px) {
  .timetable-panel { margin-top: 14px; }
  .timetable-toolbar { align-items: stretch; padding: 0 0 12px; }
  .timetable-week-select { justify-content: space-between; width: 100%; }
  .timetable-week-select select { flex: 1 1 auto; max-width: none; }
  .timetable-class-label { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .timetable-grid-wrap { border-radius: 5px; }
  .timetable-grid { min-width: 685px; font-size: 11px; }
  .timetable-grid thead th, .timetable-grid td { min-width: 112px; }
  .timetable-grid .timetable-period-head, .timetable-grid .timetable-period { min-width: 88px; width: 88px; }
  .timetable-grid td { min-height: 64px; padding: 7px; }
  .timetable-status { align-items: flex-start; flex-direction: column; padding-inline: 0; }
}

/* 八德修習錄：此檔案在所有介面樣式後載入，統一公開頁與工作台為水墨玉簡。 */
body { color: #283e37; background: #f4f0df repeating-linear-gradient(0deg, rgba(73,86,59,.035) 0 1px, transparent 1px 5px); }
.public-screen { padding: 22px; background: radial-gradient(ellipse at 10% 0, rgba(67,111,93,.13), transparent 32%), radial-gradient(ellipse at 95% 100%, rgba(158,82,61,.10), transparent 30%); }
.public-topbar { border: 1px solid #b7c8b5; border-top: 4px solid #638c78; border-bottom: 2px solid #a55742; background: rgba(255,252,241,.94); box-shadow: 0 10px 25px rgba(62,77,52,.10); }
.public-brand > span { border-radius: 3px; background: linear-gradient(145deg, #e8cf70, #c79e36); color: #29473e; box-shadow: inset 0 0 0 2px #f6edbd; }.public-brand strong { color: #2e5147; font-family: "Noto Serif TC", "PMingLiU", serif; }.public-brand small { color: #728277; }
.public-content { padding-top: 28px; }.public-hero, .public-panel { border-color: #b8c8b4; background: linear-gradient(135deg, rgba(255,252,240,.97), rgba(231,239,224,.90)); box-shadow: 0 14px 32px rgba(62,77,52,.09); }
.public-hero::before { width: 380px; height: 250px; right: -70px; top: -75px; border: 0; border-radius: 48% 52% 42% 58%; box-shadow: none; background: repeating-radial-gradient(ellipse at center, transparent 0 25px, rgba(55,96,81,.09) 26px 27px, transparent 28px 52px); transform: rotate(-12deg); }.public-hero::after { height: 3px; background: linear-gradient(90deg, #9d4c39 0 22%, #c6a561 22% 48%, #4e806e 48% 78%, transparent 78%); }
.public-hero h1, .public-panel-heading h2 { color: #2d4d44; font-family: "Noto Serif TC", "PMingLiU", serif; text-shadow: none; }.public-hero p, .public-task-card p { color: #61766d; }.public-hero .eyebrow, .public-hero-meta, .public-panel-heading > span { color: #4d796a; }.public-panel-heading { border-color: #d4ddce; }
.public-panel.timetable-panel { border-top-color: #6f997d; }.public-panel .timetable-grid-wrap { border-color: #bfcdba; background: #f8f6eb; }.timetable-grid { color: #344b43; }.timetable-grid th, .timetable-grid td { border-color: #d4ddce; }.timetable-grid thead th, .timetable-grid .timetable-period-head { background: #e5eee0; color: #375d50; box-shadow: 0 1px 0 #bccbb8; }.timetable-grid .timetable-period { background: #f1f3e9; color: #4e7063; box-shadow: 1px 0 0 #cbd6c6; }.timetable-grid td, .timetable-grid td:nth-child(odd) { background: rgba(255,253,245,.9); }.timetable-grid td strong { color: #315a4e; }.timetable-grid td small, .timetable-grid td em, .timetable-class-label { color: #718178; }
.blackboard-stage { border: 1px solid #73977e; border-left: 5px solid #a45640; background: linear-gradient(135deg, #274d43, #427362 56%, #2b5549); box-shadow: 0 16px 32px rgba(48,75,61,.18); }.blackboard-stage::before { opacity: .35; background-image: repeating-linear-gradient(11deg, rgba(234,239,214,.12) 0 1px, transparent 1px 15px); background-size: auto; }.blackboard-stage::after { display: none; }.blackboard-topline, .blackboard-title-row, .blackboard-stage footer { border-color: rgba(231,239,214,.32); color: #d9e6d4; }.blackboard-title-row .eyebrow, .blackboard-topline { color: #c6ddcf; }.blackboard-title-row h2 { font-family: "Noto Serif TC", "PMingLiU", serif; }.blackboard-topline b, .blackboard-title-row time, .blackboard-content li::marker { color: #e5c47d; }.blackboard-fullscreen-button, .blackboard-public-date-controls input { border-color: rgba(224,232,205,.65); background: rgba(21,54,46,.52); color: #f7f0d4; }.blackboard-empty { border-color: rgba(217,231,202,.55); background: rgba(20,53,45,.42); color: #d5e5d1; }
.app-shell .sidebar, .app-shell .topbar, .login-panel { background: rgba(255,253,245,.96); border-color: #c2cdbd; }.app-shell .topbar::before { content: "八德修習錄 · 宗門雲端"; color: #718477; }.app-shell .topbar::after { background: linear-gradient(90deg,#a04f3a 0 21%,#c5a465 21% 48%,#4e806e 48% 78%,transparent 78%); box-shadow: none; }.app-shell .sidebar::after { background: linear-gradient(#a04f3a,#c5a465,#4e806e); }.app-shell .sidebar-brand strong, .app-shell .brand-mark strong, .app-shell .user-badge strong { color: #2c4f44; font-family: "Noto Serif TC", "PMingLiU", serif; }.app-shell .nav-item.active, .app-shell .nav-item:hover { color: #285d50; background: #e8eee2; border-left-color: #517f6f; }.app-shell .panel, .app-shell .page-heading, .app-shell .metric-card { border-color: #c6d1c1; background: rgba(255,253,245,.93); box-shadow: 0 8px 20px rgba(62,77,52,.08); }
@media (max-width: 760px) { .public-screen { padding: 10px; }.public-hero { padding: 27px 20px; } }

/* 武俠卷軸細節：表格、行事曆、黑板與藏珍院共用同一套江湖紙墨語彙。 */
:root { --ink-jade: #294c43; --ink-indigo: #2f3a58; --jade-line: #93aa92; --vermillion: #a64e3b; --paper: #fffaf0; --paper-deep: #eadfbe; --gold: #c49b52; }
.panel, .public-panel, .page-heading, .metric-card, .quick-action, .task-card, .student-card, .seat-cell, .cleaning-zone, .unassigned-panel, .assignment-row, .cleaning-row { border-radius: 2px; position: relative; }
.panel::after, .public-panel::after, .page-heading::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(73,108,89,.13); pointer-events: none; }
.table-wrap { border: 1px solid #aebb9f; border-radius: 2px; background: linear-gradient(135deg, #fffaf0, #e9e0c5); box-shadow: inset 0 0 0 4px rgba(196,155,82,.10), 0 8px 18px rgba(60,74,52,.08); }
.table-wrap table { color: #314e43; }.table-wrap thead th { background: linear-gradient(#e7eedf, #d5e2d1); color: #315c4c; border-bottom: 2px solid #a64e3b; font-family: "Noto Serif TC", "PMingLiU", serif; letter-spacing: .08em; }.table-wrap tbody tr:nth-child(even) { background: rgba(215,228,210,.28); }.table-wrap tbody tr:hover { background: rgba(196,155,82,.15); }.table-wrap td, .table-wrap th { border-color: rgba(132,156,128,.4); }
.calendar-grid { border: 1px solid #9dac91; border-radius: 2px; background: linear-gradient(135deg, #fcf7e8, #e3eadb); box-shadow: inset 0 0 0 4px rgba(196,155,82,.11), 0 12px 24px rgba(59,77,55,.1); }.calendar-grid::before { background: repeating-linear-gradient(135deg, transparent 0 70px, rgba(69,104,84,.055) 71px 72px, transparent 73px 140px); }.calendar-grid-system { border-bottom-color: #a64e3b; background: linear-gradient(90deg, #3b5f50, #5a8068 62%, #3e6254); color: #f7e8bd; font-family: "Noto Serif TC", "PMingLiU", serif; }.calendar-grid-system b { border-color: rgba(245,225,163,.5); background: rgba(33,61,51,.36); color: #f5e6bd; }.calendar-day { border-color: rgba(137,157,129,.5); background: rgba(255,251,239,.74); }.calendar-day:nth-child(7n), .calendar-day:nth-child(7n + 1) { background: rgba(239,226,201,.45); }.calendar-day.is-today { box-shadow: inset 0 0 0 2px #b36a45; }.calendar-date { color: #486f5d; }.calendar-day-event { border-color: #a9bca5; background: #eff4e8; color: #466958; }.calendar-day-event.is-class { border-left-color: #a64e3b; }.calendar-day-event.is-google { border-left-color: #c49b52; }
.timetable-grid-wrap { border-radius: 2px; background: #f6f0dc; box-shadow: inset 0 0 0 4px rgba(196,155,82,.10); }.timetable-grid thead th, .timetable-grid .timetable-period-head { background: linear-gradient(#dce8d7, #c8dac8); color: #315747; border-bottom-color: #a64e3b; font-family: "Noto Serif TC", "PMingLiU", serif; }.timetable-grid .timetable-period { background: #eee8d2; color: #537160; }.timetable-grid td, .timetable-grid td:nth-child(odd) { background: rgba(255,251,239,.82); }.timetable-grid td strong { color: #345c4c; }.timetable-grid td small { color: #6d7d6d; }
.blackboard-stage { border-color: #9a8b70; border-left-color: #ad583e; background: radial-gradient(circle at 78% 19%, rgba(237,205,126,.28), transparent 7%), radial-gradient(circle at 79% 19%, rgba(237,205,126,.10), transparent 19%), linear-gradient(135deg, #303a5b, #4c5473 52%, #29324e); box-shadow: 0 18px 36px rgba(42,49,78,.24); }.blackboard-stage::before { opacity: .3; background-image: repeating-linear-gradient(12deg, rgba(231,220,188,.16) 0 1px, transparent 1px 17px); }.blackboard-topline, .blackboard-title-row, .blackboard-stage footer { border-color: rgba(236,222,183,.34); }.blackboard-title-row h2 { color: #fff8e7; text-shadow: 0 2px 0 rgba(34,40,66,.55); }.blackboard-title-row .eyebrow, .blackboard-topline { color: #ddd4b7; }.blackboard-topline b, .blackboard-title-row time, .blackboard-content li::marker { color: #f1ce7d; }.blackboard-empty { border-color: rgba(238,224,191,.55); background: rgba(39,46,76,.48); color: #e4dbc1; }.blackboard-fullscreen-button, .blackboard-public-date-controls input { border-color: rgba(240,222,177,.64); background: rgba(37,43,71,.62); color: #f7edcf; }
.reward-card-tile, .reward-card-tile.reward-ocean, .reward-card-tile.reward-violet, .reward-card-tile.reward-sun, .reward-card-tile.reward-nebula, .reward-card-tile.reward-plasma, .reward-card-tile.reward-aurora { border: 2px solid #8d5a43; border-radius: 3px; clip-path: polygon(6% 0, 94% 0, 100% 4%, 100% 96%, 79% 96%, 50% 100%, 21% 96%, 0 96%, 0 4%); background: linear-gradient(145deg, #fff8e6, #ecdfbc 56%, #d7be8d) !important; color: #3b4b3d; box-shadow: 0 12px 25px rgba(71,61,44,.18), inset 0 0 0 4px rgba(166,78,59,.13); }.reward-card-tile::before { content: ""; position: absolute; left: 14%; right: 14%; top: 12px; height: 6px; background: #a64e3b; box-shadow: 0 12px 0 #c49b52; opacity: .85; }.reward-card-glow { right: 8px; top: 74px; width: 72px; height: 72px; border: 2px solid rgba(166,78,59,.3); border-radius: 50%; box-shadow: 0 0 0 11px rgba(196,155,82,.12), 0 0 0 22px rgba(166,78,59,.08); }.reward-card-top { margin-top: 18px; color: #557360; }.reward-card-top b { border-color: #a64e3b; color: #9a4636; background: rgba(255,250,236,.72); }.reward-card-name { color: #6c3f32; font-family: "Noto Serif TC", "PMingLiU", serif; letter-spacing: .12em; }.reward-card-badge { width: 76px; height: 76px; margin: 23px auto 14px; border: 3px solid #a64e3b; border-radius: 50%; background: rgba(255,248,224,.84); box-shadow: 0 0 0 6px rgba(196,155,82,.18); color: #a64e3b; font-size: 41px; transform: none; }.reward-card-effect { border: 1px dashed #a78859; background: rgba(255,251,239,.70); color: #394e40; }.reward-card-bottom { color: #9b4a38; }.reward-card-bottom span { color: #567462; }.reward-card-actions button, .reward-card-preview { border-color: #ad8a58; background: rgba(255,250,236,.72); color: #5d4035; }.reward-preview-output { border-color: #aebb9f; background: linear-gradient(135deg, #fffaf0, #e5ecd9); }
/* 八德修習錄 · 仙門夜卷 */
:root {
  --xian-void: #071721;
  --xian-panel: rgba(13, 38, 49, .92);
  --xian-jade: #7dc5a9;
  --xian-jade-strong: #4f9a86;
  --xian-mist: #c8dfd4;
  --xian-gold: #d8b36a;
  --xian-gold-soft: #f0d9a0;
  --xian-vermilion: #c56b54;
  --xian-ink: #e9f1e8;
  --xian-muted: #94b1ac;
  --xian-line: rgba(108, 171, 157, .38);
  --xian-shadow: 0 22px 46px rgba(0, 8, 14, .34);
}

html { background: var(--xian-void); }
body, html body, .login-screen, .login-panel, .app-shell, .main-area { color: var(--xian-ink); background-color: var(--xian-void); }
body {
  background-image:
    radial-gradient(circle at 12% 4%, rgba(81, 161, 144, .22), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(65, 95, 163, .22), transparent 34rem),
    radial-gradient(circle at 60% 100%, rgba(193, 132, 75, .12), transparent 30rem),
    repeating-linear-gradient(125deg, transparent 0 54px, rgba(144, 208, 184, .025) 55px 56px, transparent 57px 110px);
  background-attachment: fixed;
}
body::after { opacity: .22; background: radial-gradient(ellipse at 50% 15%, transparent 0 23%, rgba(210, 234, 220, .04) 23.2% 23.5%, transparent 24% 36%, rgba(210, 234, 220, .03) 36.2% 36.5%, transparent 37%), repeating-linear-gradient(0deg, rgba(218, 233, 214, .025) 0 1px, transparent 1px 6px); }

.public-screen { color: var(--xian-ink); background: radial-gradient(ellipse at 8% 0, rgba(69, 145, 130, .25), transparent 34%), radial-gradient(ellipse at 92% 100%, rgba(104, 82, 157, .25), transparent 35%), var(--xian-void); }
.public-topbar, .public-hero, .public-panel { border-color: var(--xian-line); background: linear-gradient(140deg, rgba(16, 48, 59, .96), rgba(9, 28, 39, .90)); box-shadow: var(--xian-shadow); color: var(--xian-ink); backdrop-filter: blur(12px); }
.public-topbar { border-top: 3px solid var(--xian-gold); border-bottom: 1px solid rgba(125, 197, 169, .65); }
.public-topbar::after, .app-shell .topbar::after { background: linear-gradient(90deg, var(--xian-vermilion) 0 18%, var(--xian-gold) 18% 43%, var(--xian-jade-strong) 43% 72%, transparent 72%); }
.public-brand > span, .brand-mark span, .brand-symbol { color: #19362f; border: 1px solid rgba(255, 239, 180, .8); background: radial-gradient(circle at 34% 28%, #f5df98, #c09245 74%); box-shadow: 0 5px 18px rgba(216, 179, 106, .24), inset 0 0 0 2px rgba(255, 248, 208, .30); }
.public-brand strong, .public-hero h1, .public-panel-heading h2, .login-heading h2, .login-art h1, .page-heading h1, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .profile-list strong, .setting-action strong, .cultivation-role-strip b, .cultivation-realm-copy b { color: var(--xian-gold-soft); font-family: "Noto Serif TC", "PMingLiU", serif; text-shadow: 0 2px 18px rgba(226, 204, 145, .15); }
.public-brand small, .public-hero .eyebrow, .public-hero-meta, .public-panel-heading > span, .eyebrow { color: var(--xian-jade); }
.public-hero p, .public-task-card p, .public-empty, .public-privacy-note, .page-heading p, .panel-note, .task-main p, .task-due, .task-audience, .announcement-card span, .announcement-card p, .report-card p, .empty-state, .filter-row, .legend, .loading-line, .student-card-footer, .profile-list span, .setting-action small { color: var(--xian-muted); }
.public-hero::before { border: 0; background: repeating-radial-gradient(ellipse at center, transparent 0 24px, rgba(126, 197, 169, .14) 25px 26px, transparent 27px 54px), linear-gradient(135deg, transparent 46%, rgba(216, 179, 106, .10) 47% 48%, transparent 49%); opacity: .8; }
.public-hero::after { background: linear-gradient(90deg, var(--xian-vermilion), var(--xian-gold) 48%, var(--xian-jade-strong) 80%, transparent); }
.public-panel-heading { border-bottom-color: rgba(126, 197, 169, .24); }
.public-panel-heading > span { border-color: rgba(216, 179, 106, .38); background: rgba(216, 179, 106, .12); }
.public-board .public-panel:first-child { border-top-color: var(--xian-vermilion); }
.public-board .public-panel:last-child { border-top-color: var(--xian-jade); }

.app-shell .sidebar { color: var(--xian-ink); background: linear-gradient(180deg, rgba(14, 44, 54, .98), rgba(5, 20, 29, .99)), repeating-linear-gradient(0deg, transparent 0 31px, rgba(124, 195, 168, .035) 32px 33px); border-right-color: rgba(123, 194, 169, .42); box-shadow: 14px 0 38px rgba(0, 8, 14, .38); }
.app-shell .sidebar::after { background: linear-gradient(var(--xian-vermilion), var(--xian-gold), var(--xian-jade-strong)); }
.app-shell .sidebar-brand { border-bottom-color: rgba(123, 194, 169, .24); }
.app-shell .sidebar-brand strong, .app-shell .brand-mark strong, .app-shell .user-badge strong { color: var(--xian-gold-soft); font-family: "Noto Serif TC", "PMingLiU", serif; }
.app-shell .sidebar-brand small, .app-shell .brand-mark small, .app-shell .user-badge small, .app-shell .secure-label { color: var(--xian-muted); }
.app-shell .user-badge { border-color: rgba(123, 194, 169, .34); background: rgba(16, 53, 63, .68); box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .08); }
.app-shell .avatar, .app-shell .student-avatar { color: #1d3b34; background: radial-gradient(circle at 35% 30%, #cce6d4, #579d86 78%); box-shadow: 0 4px 16px rgba(84, 167, 139, .28); }
.app-shell .nav-section { color: #6f9e9b; }
.app-shell .nav-item { color: #a7c4be; border-left-color: transparent; }
.app-shell .nav-item:hover { color: var(--xian-gold-soft); background: rgba(92, 159, 143, .17); border-left-color: var(--xian-jade); }
.app-shell .nav-item.active { color: #f1d99e; background: linear-gradient(90deg, rgba(83, 151, 132, .38), rgba(22, 65, 72, .16)); border-left-color: var(--xian-gold); box-shadow: inset -3px 0 0 var(--xian-vermilion), 0 7px 20px rgba(0, 11, 17, .22); }
.app-shell .nav-item.active::after { background: var(--xian-gold); }
.app-shell .nav-icon, .app-shell .nav-item.active .nav-icon { color: var(--xian-jade); text-shadow: 0 0 14px rgba(125, 197, 169, .36); }
.app-shell .nav-item b { background: var(--xian-vermilion); }
.app-shell .sidebar-footer { border-top-color: rgba(123, 194, 169, .24); }
.app-shell .logout-button { color: #9ab9b0; }
.app-shell .logout-button:hover { color: #f0c98f; }

.app-shell .topbar { color: var(--xian-muted); border-bottom-color: rgba(123, 194, 169, .36); background: rgba(7, 27, 37, .88); box-shadow: 0 8px 24px rgba(0, 8, 14, .28); backdrop-filter: blur(14px); }
.app-shell .topbar::before { color: var(--xian-gold); }
.app-shell .mobile-brand, .app-shell .icon-button { color: var(--xian-gold-soft); }
.app-shell .sync-status { color: var(--xian-jade); }

.sync-health-panel { border-color: rgba(117, 191, 169, .42); border-left-color: var(--xian-jade); background: linear-gradient(110deg, rgba(16, 54, 62, .94), rgba(11, 37, 47, .88)); box-shadow: 0 12px 28px rgba(0, 11, 17, .28); }
.sync-health-panel strong { color: #cfe8d4; }
.sync-health-panel p { color: #9bbab4; }
.sync-health-panel small { color: #7fa69f; }
.sync-health-panel[data-state="cached"], .sync-health-panel[data-state="degraded"] { border-color: rgba(216, 179, 106, .55); border-left-color: var(--xian-gold); background: linear-gradient(110deg, rgba(67, 54, 32, .86), rgba(29, 40, 36, .9)); }
.sync-health-panel[data-state="cached"] strong, .sync-health-panel[data-state="degraded"] strong { color: #f0d59b; }
.sync-health-action { color: var(--xian-gold-soft); border-color: rgba(216, 179, 106, .6); background: rgba(216, 179, 106, .12); }
.sync-health-action:hover { color: #132d2a; border-color: var(--xian-gold); background: var(--xian-gold); }

.app-shell .page-heading, .app-shell .panel, .app-shell .quick-action, .app-shell .metric-card, .app-shell .task-card, .app-shell .student-card, .app-shell .setting-action, .app-shell .seat-planner, .app-shell .unassigned-panel, .app-shell .organization-planner, .app-shell .planning-layout > aside, .app-shell .inline-form { color: var(--xian-ink); border-color: rgba(111, 181, 163, .38); background: linear-gradient(145deg, rgba(15, 46, 57, .94), rgba(8, 28, 39, .94)); box-shadow: var(--xian-shadow); }
.app-shell .page-heading { border-left-color: var(--xian-gold); background: linear-gradient(120deg, rgba(15, 49, 57, .96), rgba(10, 30, 41, .92)); }
.app-shell .page-heading::before { color: var(--xian-jade); content: "宗門雲端 // 仙門總覽"; }
.app-shell .page-heading::after { color: var(--xian-gold); content: "靈脈：穩定"; border-color: rgba(111, 181, 163, .15); }
.app-shell .panel::before { border-color: var(--xian-jade-strong); }
.app-shell .panel::after { border-color: rgba(125, 197, 169, .16); }
.app-shell .panel-header { border-bottom-color: rgba(125, 197, 169, .24); }
.app-shell .quick-action:hover, .app-shell .task-card:hover, .app-shell .student-card:hover, .app-shell .setting-action:hover { border-color: var(--xian-gold); background: linear-gradient(145deg, rgba(24, 65, 70, .98), rgba(11, 33, 43, .96)); box-shadow: 0 18px 38px rgba(0, 11, 17, .38); }
.app-shell .quick-action > span { color: var(--xian-gold-soft); border-color: rgba(216, 179, 106, .45); background: rgba(216, 179, 106, .14); }
.app-shell .quick-action strong, .app-shell .metric-card strong, .app-shell .attendance-summary strong, .app-shell .student-focus strong { color: var(--xian-gold-soft); }
.app-shell .metric-label { color: var(--xian-jade); }
.app-shell .metric-navy, .app-shell .metric-blue { color: #67c1cf; }
.app-shell .metric-orange { color: #d79865; }
.app-shell .metric-purple { color: #bfa5e2; }
.app-shell .metric-green { color: #7dccaa; }
.app-shell .date-chip, .app-shell .count-pill { color: var(--xian-gold-soft); border-color: rgba(216, 179, 106, .45); background: rgba(216, 179, 106, .14); }
.app-shell .attendance-summary div, .app-shell .profile-list div, .app-shell .student-focus, .app-shell .private-note { border-color: rgba(125, 197, 169, .25); background: rgba(19, 56, 64, .68); }
.app-shell .attendance-summary span, .app-shell .student-focus span, .app-shell .profile-list span { color: var(--xian-muted); }
.app-shell .section-divider, .app-shell .announcement-card, .app-shell .report-card, .app-shell .audit-row, .app-shell .event-list { border-color: rgba(125, 197, 169, .23); }
.app-shell .task-card.compact { background: transparent; border-bottom-color: rgba(125, 197, 169, .23); }
.app-shell .task-check { border-color: rgba(125, 197, 169, .55); background: rgba(8, 29, 38, .8); }
.app-shell .task-check.checked { background: var(--xian-jade-strong); border-color: var(--xian-jade); }
.app-shell .announcement-icon, .app-shell .report-icon { color: var(--xian-gold); border-color: rgba(216, 179, 106, .45); background: rgba(216, 179, 106, .12); }
.app-shell .focus-ring { color: var(--xian-jade); border-color: rgba(125, 197, 169, .24); border-top-color: var(--xian-gold); }
.app-shell .student-check { color: var(--xian-mist); border-color: rgba(125, 197, 169, .35); background: rgba(10, 34, 44, .84); }
.app-shell .student-check:has(input:checked) { border-color: var(--xian-jade); background: rgba(64, 130, 111, .27); }
.app-shell .student-check input { accent-color: var(--xian-gold); }

.app-shell input, .app-shell select, .app-shell textarea, .login-panel input { color: var(--xian-ink); border-color: rgba(125, 197, 169, .42); background: rgba(6, 27, 37, .86); box-shadow: inset 0 1px 0 rgba(222, 243, 225, .06); }
.app-shell input::placeholder, .app-shell textarea::placeholder, .login-panel input::placeholder { color: #70908e; }
.app-shell input:focus, .app-shell select:focus, .app-shell textarea:focus, .login-panel input:focus { border-color: var(--xian-gold); box-shadow: 0 0 0 3px rgba(216, 179, 106, .14), inset 0 1px 0 rgba(222, 243, 225, .08); }
.button-primary, .button-dark, .mini-button.primary { color: #153a31; border-color: var(--xian-gold); background: linear-gradient(135deg, #efd28a, #bf8f46); box-shadow: 0 10px 22px rgba(216, 179, 106, .20); }
.button-primary::before, .button-dark::before { background: var(--xian-vermilion); }
.button-primary:hover, .button-dark:hover, .mini-button.primary:hover { color: #173d35; border-color: #f2dca4; background: linear-gradient(135deg, #f4dda2, #d7aa5e); }
.button-secondary, .mini-button, .demo-buttons button { color: var(--xian-mist); border-color: rgba(125, 197, 169, .48); background: rgba(16, 53, 62, .78); }
.button-secondary:hover, .mini-button:hover, .demo-buttons button:hover { color: var(--xian-gold-soft); border-color: var(--xian-gold); background: rgba(93, 126, 91, .25); }
.text-button { color: var(--xian-gold); }

.table-wrap, .timetable-grid-wrap, .student-sheet-wrap, .import-table-wrap { border-color: rgba(125, 197, 169, .42); background: linear-gradient(145deg, rgba(8, 29, 39, .96), rgba(15, 51, 59, .86)); box-shadow: inset 0 0 0 4px rgba(216, 179, 106, .08), 0 14px 30px rgba(0, 8, 14, .28); }
.table-wrap table, .reward-table, .import-table { color: var(--xian-mist); }
.table-wrap thead th, .reward-table thead th, .import-table thead th { color: var(--xian-gold-soft); border-bottom-color: var(--xian-vermilion); background: linear-gradient(#1b4c52, #12353f); font-family: "Noto Serif TC", "PMingLiU", serif; }
.table-wrap tbody tr:nth-child(even), .reward-table tbody tr:nth-child(even), .import-table tbody tr:nth-child(even) { background: rgba(87, 151, 132, .10); }
.table-wrap tbody tr:hover, .reward-table tbody tr:hover, .import-table tbody tr:hover { background: rgba(216, 179, 106, .14); }
.table-wrap td, .table-wrap th, .reward-table td, .reward-table th, .import-table td, .import-table th { border-color: rgba(125, 197, 169, .23); }

.calendar-grid { border-color: rgba(125, 197, 169, .46); background: linear-gradient(145deg, rgba(16, 50, 58, .95), rgba(7, 28, 39, .96)); box-shadow: inset 0 0 0 4px rgba(216, 179, 106, .08), 0 16px 32px rgba(0, 8, 14, .34); }
.calendar-grid-system { border-bottom-color: var(--xian-gold); background: linear-gradient(90deg, #173f4b, #276b6d 58%, #1b4851); color: #ecf3db; }
.calendar-grid-system span, .calendar-grid-system i { color: var(--xian-gold-soft); }
.calendar-grid-system b { border-color: rgba(216, 179, 106, .55); background: rgba(7, 29, 37, .45); color: var(--xian-mist); }
.calendar-day { border-color: rgba(125, 197, 169, .25); background: rgba(9, 34, 43, .76); }
.calendar-day:nth-child(7n), .calendar-day:nth-child(7n + 1) { background: rgba(73, 67, 58, .32); }
.calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--xian-vermilion); }
.calendar-date { color: var(--xian-gold-soft); }
.calendar-day-event { border-color: rgba(125, 197, 169, .40); background: rgba(64, 128, 111, .24); color: var(--xian-mist); }
.calendar-day-event.is-class { border-left-color: var(--xian-vermilion); }
.calendar-day-event.is-google { border-left-color: var(--xian-gold); }
.calendar-event { border-bottom-color: rgba(125, 197, 169, .24); }
.calendar-event p, .calendar-event time, .calendar-source { color: var(--xian-muted); }

.timetable-grid { color: var(--xian-mist); }
.timetable-grid th, .timetable-grid td { border-color: rgba(125, 197, 169, .25); }
.timetable-grid thead th, .timetable-grid .timetable-period-head { color: var(--xian-gold-soft); border-bottom-color: var(--xian-vermilion); background: linear-gradient(#1e5158, #173b45); }
.timetable-grid .timetable-period { color: var(--xian-jade); background: rgba(66, 106, 98, .34); }
.timetable-grid td, .timetable-grid td:nth-child(odd) { background: rgba(8, 31, 41, .78); }
.timetable-grid td strong { color: #d7ead8; }
.timetable-grid td small, .timetable-grid td em, .timetable-class-label { color: var(--xian-muted); }
.public-panel.timetable-panel .timetable-grid .timetable-period { color: var(--xian-gold-soft); background: linear-gradient(180deg, #1e5158, #153942); box-shadow: inset -1px 0 0 rgba(216, 179, 106, .22), 1px 0 0 rgba(125, 197, 169, .18); }
.public-panel.timetable-panel .timetable-grid .timetable-period small { color: var(--xian-mist); }

.blackboard-stage { border-color: rgba(216, 179, 106, .58); border-left-color: var(--xian-vermilion); background: radial-gradient(circle at 78% 19%, rgba(237, 205, 126, .28), transparent 7%), radial-gradient(circle at 79% 19%, rgba(86, 188, 166, .17), transparent 22%), linear-gradient(135deg, #172c4a, #263f62 52%, #111d36); box-shadow: 0 22px 44px rgba(0, 8, 18, .44); }
.blackboard-stage::before { opacity: .40; background-image: repeating-linear-gradient(12deg, rgba(231, 220, 188, .16) 0 1px, transparent 1px 17px); }
.blackboard-title-row h2 { color: #fff8e7; font-family: "Noto Serif TC", "PMingLiU", serif; }
.blackboard-topline, .blackboard-title-row .eyebrow { color: #bed5ce; }
.blackboard-topline b, .blackboard-title-row time, .blackboard-content li::marker { color: var(--xian-gold-soft); }

.calendar-month-switch strong { color: var(--xian-gold-soft); }
.calendar-weekdays { color: var(--xian-gold-soft); background: linear-gradient(90deg, #173f4b, #1d555c 58%, #173e49); }
.calendar-weekdays span { border-right-color: rgba(125, 197, 169, .28); }
.calendar-day::after { border-color: rgba(216, 179, 106, .45); }
.calendar-day.is-empty { background: rgba(4, 23, 32, .70); }
.calendar-day.is-today { background: linear-gradient(145deg, rgba(103, 79, 48, .48), rgba(37, 76, 76, .66)); box-shadow: inset 0 0 0 2px var(--xian-vermilion), inset 5px 0 0 var(--xian-gold); }
.calendar-day-event.is-google { color: #d9e4f4; border-left-color: #7e9fd0; background: rgba(66, 82, 132, .42); }
.calendar-day-event.is-manual { color: var(--xian-mist); background: rgba(64, 128, 111, .24); }
.calendar-day-event.is-editable:hover { color: #152d2b; background: var(--xian-gold-soft); }
.calendar-day-events small { color: var(--xian-muted); }
.calendar-event { background: linear-gradient(90deg, rgba(24, 70, 72, .45), transparent); }
.calendar-event.is-google { border-left-color: #7e9fd0; }
.calendar-event > time { color: var(--xian-jade); }
.calendar-event strong { color: var(--xian-gold-soft); }
.calendar-source { color: var(--xian-jade); border-color: rgba(125, 197, 169, .38); background: rgba(64, 128, 111, .18); }
.calendar-event.is-google .calendar-source { color: #cbd8f1; border-color: rgba(126, 159, 208, .48); background: rgba(66, 82, 132, .34); }
.calendar-delete, .calendar-edit { color: var(--xian-gold-soft); border-color: rgba(216, 179, 106, .48); background: rgba(216, 179, 106, .12); }
.calendar-delete:hover, .calendar-edit:hover { color: #142f2a; border-color: var(--xian-gold); background: var(--xian-gold); }
.calendar-event-form label, .calendar-source-form label, .calendar-all-day span:last-child { color: var(--xian-mist); }
.calendar-source-form p { color: var(--xian-muted); }

.reward-card-tile, .reward-card-tile.reward-ocean, .reward-card-tile.reward-violet, .reward-card-tile.reward-sun, .reward-card-tile.reward-nebula, .reward-card-tile.reward-plasma, .reward-card-tile.reward-aurora { border-color: #8d5a43; background: linear-gradient(145deg, #fff8e6, #ecdfbc 56%, #d7be8d) !important; }
.reward-card-tile:hover { transform: translateY(-4px) rotate(-.35deg); box-shadow: 0 18px 34px rgba(216, 179, 106, .28), inset 0 0 0 4px rgba(166, 78, 59, .16); }

.login-screen { background: var(--xian-void); }
.login-art { color: var(--xian-ink); border-right-color: rgba(125, 197, 169, .38); background-image: radial-gradient(circle at 72% 30%, transparent 0 16%, rgba(125, 197, 169, .14) 16.2% 16.7%, transparent 17% 30%, rgba(216, 179, 106, .10) 30.2% 30.7%, transparent 31%), linear-gradient(145deg, #0e3340 0%, #0b2433 55%, #141b3a 100%); background-size: 560px 560px, auto; }
.login-art::before { color: var(--xian-gold); content: "八德修習錄 // 宗門入山"; }
.login-art::after { border-color: rgba(125, 197, 169, .30); }
.login-art h1, .login-heading h2 { color: var(--xian-gold-soft); font-family: "Noto Serif TC", "PMingLiU", serif; }
.login-art p, .login-heading p { color: var(--xian-muted); }
.login-art .eyebrow { color: var(--xian-jade); }
.login-art-note { color: var(--xian-jade); }
.orb { border-color: rgba(125, 197, 169, .38); box-shadow: 0 0 32px rgba(125, 197, 169, .10); }
.orb-two { background: rgba(216, 179, 106, .09); border-color: rgba(216, 179, 106, .32); }
.login-panel { background: rgba(8, 28, 39, .94); border-left-color: rgba(125, 197, 169, .34); box-shadow: -18px 0 42px rgba(0, 8, 14, .28); }
.login-panel .brand-mark strong { color: var(--xian-gold-soft); }
.login-panel .brand-mark small { color: var(--xian-muted); }
.stack-form label { color: var(--xian-mist); }
.demo-box, .import-details, .import-preview { border-color: rgba(125, 197, 169, .30); background: rgba(16, 53, 62, .58); }
.demo-box > div:first-child { color: var(--xian-mist); }
.privacy-note { color: #779690; }

@media (max-width: 760px) {
  body { background-attachment: scroll; }
  .app-shell .sidebar { background: linear-gradient(180deg, #0b2b37, #061a25); }
  .public-screen { padding: 10px; }
  .public-topbar { background: rgba(10, 34, 44, .96); }
  .public-brand strong { color: var(--xian-gold-soft); }
  .public-topbar .button { background: rgba(216, 179, 106, .15); }
  .table-wrap, .timetable-grid-wrap, .student-sheet-wrap, .import-table-wrap { box-shadow: inset 0 0 0 2px rgba(216, 179, 106, .08); }
  .reward-card-tile:hover { transform: none; }
}

/* 水墨武俠修仙 · 全站總體卷軸主題 */
:root {
  --wuxia-paper: #f3edda;
  --wuxia-paper-deep: #e6dcc0;
  --wuxia-ink: #293b33;
  --wuxia-muted: #66766b;
  --wuxia-jade: #527763;
  --wuxia-jade-soft: #dfe9db;
  --wuxia-gold: #b3873e;
  --wuxia-gold-soft: #ead29a;
  --wuxia-vermilion: #9f4e3c;
  --wuxia-indigo: #3d4967;
  --wuxia-line: rgba(92, 119, 95, .42);
  --wuxia-shadow: 0 14px 30px rgba(73, 67, 49, .14);
  color-scheme: light;
}

html { background: var(--wuxia-paper-deep); }
body, html body, .login-screen, .login-panel, .app-shell, .main-area {
  color: var(--wuxia-ink);
  background-color: var(--wuxia-paper);
}
body {
  background-image:
    radial-gradient(ellipse at 6% 0%, rgba(82, 119, 98, .18), transparent 34%),
    radial-gradient(ellipse at 94% 16%, rgba(159, 78, 60, .10), transparent 28%),
    repeating-linear-gradient(0deg, rgba(73, 80, 57, .045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(125deg, transparent 0 90px, rgba(129, 99, 57, .035) 91px 93px, transparent 94px 180px);
  background-attachment: fixed;
}
body::after {
  opacity: .22;
  background:
    radial-gradient(ellipse at 76% 11%, transparent 0 8%, rgba(82, 119, 98, .10) 8.2% 8.6%, transparent 8.8% 16%, rgba(82, 119, 98, .07) 16.2% 16.6%, transparent 16.8%),
    repeating-linear-gradient(0deg, rgba(86, 80, 58, .04) 0 1px, transparent 1px 7px);
}

.public-screen {
  color: var(--wuxia-ink);
  background:
    radial-gradient(ellipse at 0 0, rgba(82, 119, 98, .18), transparent 36%),
    radial-gradient(ellipse at 100% 100%, rgba(159, 78, 60, .12), transparent 34%),
    var(--wuxia-paper);
}
.public-topbar, .public-hero, .public-panel {
  color: var(--wuxia-ink);
  border-color: var(--wuxia-line);
  background: linear-gradient(135deg, rgba(255, 251, 238, .97), rgba(231, 237, 220, .93));
  box-shadow: var(--wuxia-shadow);
  backdrop-filter: none;
}
.public-topbar { border-top: 4px solid var(--wuxia-gold); border-bottom: 2px solid var(--wuxia-vermilion); }
.public-topbar::after, .app-shell .topbar::after { background: linear-gradient(90deg, var(--wuxia-vermilion) 0 20%, var(--wuxia-gold) 20% 48%, var(--wuxia-jade) 48% 78%, transparent 78%); }
.public-brand > span, .brand-mark span, .brand-symbol {
  color: #2d4538;
  border-color: #d7b765;
  background: radial-gradient(circle at 33% 28%, #f4dda0, #b9883d 76%);
  box-shadow: 0 5px 14px rgba(145, 101, 42, .20), inset 0 0 0 2px rgba(255, 249, 207, .45);
}
.public-brand strong, .public-hero h1, .public-panel-heading h2, .login-heading h2, .login-art h1, .page-heading h1, .panel-header h2, .panel-header h3, .task-main h3, .student-card h3, .profile-list strong, .setting-action strong, .cultivation-role-strip b, .cultivation-realm-copy b {
  color: #314d3f;
  font-family: "Noto Serif TC", "PMingLiU", serif;
  text-shadow: 0 1px 0 rgba(255, 252, 237, .9);
}
.public-brand small, .public-hero .eyebrow, .public-hero-meta, .public-panel-heading > span, .eyebrow { color: var(--wuxia-jade); }
.public-hero p, .public-task-card p, .public-empty, .public-privacy-note, .page-heading p, .panel-note, .task-main p, .task-due, .task-audience, .announcement-card span, .announcement-card p, .report-card p, .empty-state, .filter-row, .legend, .loading-line, .student-card-footer, .profile-list span, .setting-action small { color: var(--wuxia-muted); }
.public-hero::before { opacity: .68; background: repeating-radial-gradient(ellipse at center, transparent 0 27px, rgba(82, 119, 98, .13) 28px 29px, transparent 30px 58px), linear-gradient(135deg, transparent 46%, rgba(159, 78, 60, .12) 47% 48%, transparent 49%); }
.public-hero::after { background: linear-gradient(90deg, var(--wuxia-vermilion), var(--wuxia-gold) 48%, var(--wuxia-jade) 80%, transparent); }
.public-panel-heading { border-bottom-color: rgba(82, 119, 98, .24); }
.public-panel-heading > span { border-color: rgba(179, 135, 62, .45); background: rgba(179, 135, 62, .12); }
.public-board .public-panel:first-child { border-top-color: var(--wuxia-vermilion); }
.public-board .public-panel:last-child { border-top-color: var(--wuxia-jade); }

.blackboard-stage {
  border-color: rgba(170, 133, 65, .72);
  border-left-color: var(--wuxia-vermilion);
  background: radial-gradient(circle at 78% 19%, rgba(222, 186, 100, .22), transparent 8%), linear-gradient(135deg, #29473b, #47715a 56%, #263f35);
  box-shadow: 0 18px 34px rgba(44, 65, 49, .25);
}
.blackboard-stage::before { opacity: .38; background-image: repeating-linear-gradient(12deg, rgba(241, 231, 196, .17) 0 1px, transparent 1px 17px); }
.blackboard-topline, .blackboard-title-row, .blackboard-stage footer { border-color: rgba(235, 224, 185, .36); color: #e5e7cf; }
.blackboard-title-row .eyebrow, .blackboard-topline { color: #c9dec8; }
.blackboard-title-row h2 { color: #fff8e5; font-family: "Noto Serif TC", "PMingLiU", serif; text-shadow: 0 2px 0 rgba(28, 51, 39, .45); }
.blackboard-topline b, .blackboard-title-row time, .blackboard-content li::marker { color: #efd28b; }
.blackboard-fullscreen-button, .blackboard-public-date-controls input { border-color: rgba(235, 223, 183, .68); background: rgba(29, 67, 52, .58); color: #f7edcf; }
.blackboard-empty { border-color: rgba(229, 226, 192, .58); background: rgba(26, 62, 48, .44); color: #dce7cf; }

.app-shell .sidebar {
  color: var(--wuxia-ink);
  background: linear-gradient(180deg, #eee6cf, #ddd5bb), repeating-linear-gradient(0deg, transparent 0 31px, rgba(82, 119, 98, .06) 32px 33px);
  border-right-color: rgba(82, 119, 98, .46);
  box-shadow: 12px 0 30px rgba(73, 67, 49, .16);
}
.app-shell .sidebar::after { background: linear-gradient(var(--wuxia-vermilion), var(--wuxia-gold), var(--wuxia-jade)); }
.app-shell .sidebar-brand { border-bottom-color: rgba(82, 119, 98, .25); }
.app-shell .sidebar-brand strong, .app-shell .brand-mark strong, .app-shell .user-badge strong { color: #314d3f; font-family: "Noto Serif TC", "PMingLiU", serif; }
.app-shell .sidebar-brand small, .app-shell .brand-mark small, .app-shell .user-badge small, .app-shell .secure-label { color: var(--wuxia-muted); }
.app-shell .user-badge { color: var(--wuxia-ink); border-color: rgba(82, 119, 98, .38); background: rgba(255, 251, 238, .62); box-shadow: inset 0 0 0 1px rgba(179, 135, 62, .13); }
.app-shell .avatar, .app-shell .student-avatar { color: #2b4839; background: radial-gradient(circle at 35% 30%, #eff4d9, #6c9a78 78%); box-shadow: 0 4px 13px rgba(82, 119, 98, .24); }
.app-shell .nav-section { color: #6b806b; }
.app-shell .nav-item { color: #4e6758; border-left-color: transparent; }
.app-shell .nav-item:hover { color: #7a5a2c; background: rgba(179, 135, 62, .13); border-left-color: var(--wuxia-gold); }
.app-shell .nav-item.active { color: #314d3f; background: linear-gradient(90deg, rgba(109, 151, 116, .24), rgba(255, 251, 238, .25)); border-left-color: var(--wuxia-vermilion); box-shadow: inset -3px 0 0 var(--wuxia-gold), 0 5px 15px rgba(73, 67, 49, .10); }
.app-shell .nav-item.active::after { background: var(--wuxia-gold); }
.app-shell .nav-icon, .app-shell .nav-item.active .nav-icon { color: var(--wuxia-jade); text-shadow: none; }
.app-shell .nav-item b { color: #fff9e9; background: var(--wuxia-vermilion); }
.app-shell .sidebar-footer { border-top-color: rgba(82, 119, 98, .25); }
.app-shell .logout-button { color: #647568; }
.app-shell .logout-button:hover { color: var(--wuxia-vermilion); }
.app-shell .topbar { color: var(--wuxia-muted); border-bottom-color: rgba(82, 119, 98, .36); background: rgba(248, 243, 226, .90); box-shadow: 0 7px 20px rgba(73, 67, 49, .12); backdrop-filter: blur(8px); }
.app-shell .topbar::before { color: var(--wuxia-jade); }
.app-shell .mobile-brand, .app-shell .icon-button { color: #314d3f; }
.app-shell .sync-status { color: var(--wuxia-jade); }

.app-shell .page-heading, .app-shell .panel, .app-shell .quick-action, .app-shell .metric-card, .app-shell .task-card, .app-shell .student-card, .app-shell .setting-action, .app-shell .seat-planner, .app-shell .unassigned-panel, .app-shell .organization-planner, .app-shell .planning-layout > aside, .app-shell .inline-form {
  color: var(--wuxia-ink);
  border-color: rgba(82, 119, 98, .40);
  background: linear-gradient(135deg, rgba(255, 251, 238, .97), rgba(230, 237, 220, .92));
  box-shadow: var(--wuxia-shadow);
}
.app-shell .page-heading { border-left-color: var(--wuxia-vermilion); background: linear-gradient(120deg, rgba(252, 247, 230, .98), rgba(226, 235, 218, .92)); }
.app-shell .page-heading::before { color: var(--wuxia-jade); content: "宗門卷宗 // 仙門總覽"; }
.app-shell .page-heading::after { color: var(--wuxia-gold); content: "靈脈：穩定"; border-color: rgba(82, 119, 98, .18); }
.app-shell .panel::before { border-color: var(--wuxia-jade); }
.app-shell .panel::after { border-color: rgba(82, 119, 98, .15); }
.app-shell .panel-header { border-bottom-color: rgba(82, 119, 98, .25); }
.app-shell .quick-action:hover, .app-shell .task-card:hover, .app-shell .student-card:hover, .app-shell .setting-action:hover { border-color: var(--wuxia-gold); background: linear-gradient(135deg, #fffaf0, #e5ecd9); box-shadow: 0 16px 30px rgba(73, 67, 49, .19); }
.app-shell .quick-action > span { color: #76572b; border-color: rgba(179, 135, 62, .50); background: rgba(179, 135, 62, .14); }
.app-shell .quick-action strong, .app-shell .metric-card strong, .app-shell .attendance-summary strong, .app-shell .student-focus strong { color: #314d3f; }
.app-shell .metric-label { color: var(--wuxia-jade); }
.app-shell .metric-navy, .app-shell .metric-blue { color: #547b8a; }
.app-shell .metric-orange { color: #a05d39; }
.app-shell .metric-purple { color: #756486; }
.app-shell .metric-green { color: #527763; }
.app-shell .date-chip, .app-shell .count-pill { color: #76572b; border-color: rgba(179, 135, 62, .48); background: rgba(179, 135, 62, .14); }
.app-shell .attendance-summary div, .app-shell .profile-list div, .app-shell .student-focus, .app-shell .private-note { border-color: rgba(82, 119, 98, .28); background: rgba(226, 235, 218, .62); }
.app-shell .attendance-summary span, .app-shell .student-focus span, .app-shell .profile-list span { color: var(--wuxia-muted); }
.app-shell .section-divider, .app-shell .announcement-card, .app-shell .report-card, .app-shell .audit-row, .app-shell .event-list { border-color: rgba(82, 119, 98, .24); }
.app-shell .task-card.compact { background: transparent; border-bottom-color: rgba(82, 119, 98, .24); }
.app-shell .task-check { border-color: rgba(82, 119, 98, .55); background: rgba(255, 251, 238, .72); }
.app-shell .task-check.checked { background: var(--wuxia-jade); border-color: #3f6552; }
.app-shell .announcement-icon, .app-shell .report-icon { color: var(--wuxia-gold); border-color: rgba(179, 135, 62, .48); background: rgba(179, 135, 62, .14); }
.app-shell input, .app-shell select, .app-shell textarea, .login-panel input { color: var(--wuxia-ink); border-color: rgba(82, 119, 98, .40); background: rgba(255, 252, 240, .92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); }
.app-shell input::placeholder, .app-shell textarea::placeholder, .login-panel input::placeholder { color: #8a9585; }
.app-shell input:focus, .app-shell select:focus, .app-shell textarea:focus, .login-panel input:focus { border-color: var(--wuxia-gold); box-shadow: 0 0 0 3px rgba(179, 135, 62, .16), inset 0 1px 0 rgba(255, 255, 255, .9); }

.button-primary, .button-dark, .mini-button.primary { color: #304536; border-color: var(--wuxia-gold); background: linear-gradient(135deg, #e8c878, #ad7d35); box-shadow: 0 8px 16px rgba(145, 101, 42, .18); }
.button-primary::before, .button-dark::before { background: var(--wuxia-vermilion); }
.button-primary:hover, .button-dark:hover, .mini-button.primary:hover { color: #2c4537; border-color: #d6b267; background: linear-gradient(135deg, #f0d995, #c79445); }
.button-secondary, .mini-button, .demo-buttons button { color: #466454; border-color: rgba(82, 119, 98, .42); background: rgba(255, 251, 238, .76); }
.button-secondary:hover, .mini-button:hover, .demo-buttons button:hover { color: #6c4d27; border-color: var(--wuxia-gold); background: #f7edcf; }
.button-danger { color: var(--wuxia-vermilion); border-color: rgba(159, 78, 60, .42); background: #fff4e9; }
.button-danger:hover { color: #fff7e6; border-color: var(--wuxia-vermilion); background: var(--wuxia-vermilion); }
.text-button { color: #7a5a2d; }

.table-wrap, .timetable-grid-wrap, .student-sheet-wrap, .import-table-wrap { border-color: rgba(82, 119, 98, .42); background: linear-gradient(135deg, #fffaf0, #e7eddc); box-shadow: inset 0 0 0 4px rgba(179, 135, 62, .08), 0 11px 24px rgba(73, 67, 49, .11); }
.table-wrap table, .reward-table, .import-table { color: #3d5748; }
.table-wrap thead th, .reward-table thead th, .import-table thead th { color: #f6e5ad; border-bottom-color: var(--wuxia-vermilion); background: linear-gradient(#3f6654, #2d5042); font-family: "Noto Serif TC", "PMingLiU", serif; }
.table-wrap tbody tr:nth-child(even), .reward-table tbody tr:nth-child(even), .import-table tbody tr:nth-child(even) { background: rgba(82, 119, 98, .08); }
.table-wrap tbody tr:hover, .reward-table tbody tr:hover, .import-table tbody tr:hover { background: rgba(179, 135, 62, .15); }
.table-wrap td, .table-wrap th, .reward-table td, .reward-table th, .import-table td, .import-table th { border-color: rgba(82, 119, 98, .24); }

.calendar-grid { border-color: rgba(82, 119, 98, .48); background: linear-gradient(135deg, #fcf7e8, #e3eadb); box-shadow: inset 0 0 0 4px rgba(179, 135, 62, .10), 0 12px 24px rgba(73, 67, 49, .12); }
.calendar-grid::before { background: repeating-linear-gradient(135deg, transparent 0 70px, rgba(82, 119, 98, .06) 71px 72px, transparent 73px 140px); }
.calendar-grid-system { border-bottom-color: var(--wuxia-vermilion); background: linear-gradient(90deg, #355c4b, #5a8064 62%, #3e6251); color: #f4e6bd; }
.calendar-grid-system span, .calendar-grid-system i { color: #ecd08b; }
.calendar-grid-system b { border-color: rgba(245, 225, 163, .52); background: rgba(33, 61, 51, .34); color: #f5e6bd; }
.calendar-day { border-color: rgba(82, 119, 98, .34); background: rgba(255, 251, 239, .78); }
.calendar-day:nth-child(7n), .calendar-day:nth-child(7n + 1) { background: rgba(239, 226, 201, .48); }
.calendar-day.is-today { background: linear-gradient(145deg, #fff8d8, #e4efdf); box-shadow: inset 0 0 0 2px var(--wuxia-vermilion), inset 5px 0 0 var(--wuxia-gold); }
.calendar-date { color: #496c58; }
.calendar-day-event { border-color: rgba(82, 119, 98, .40); background: #eef4e7; color: #456a56; }
.calendar-day-event.is-class { border-left-color: var(--wuxia-vermilion); }
.calendar-day-event.is-google { border-left-color: var(--wuxia-gold); }
.calendar-weekdays { color: #f3e5b6; background: linear-gradient(90deg, #355c4b, #5a8064 58%, #3e6251); }
.calendar-weekdays span { border-right-color: rgba(239, 224, 180, .28); }
.calendar-day::after { border-color: rgba(179, 135, 62, .45); }
.calendar-day.is-empty { background: rgba(222, 214, 188, .40); }
.calendar-event { border-bottom-color: rgba(82, 119, 98, .24); background: linear-gradient(90deg, rgba(227, 237, 220, .72), transparent); }
.calendar-event strong { color: #385b48; }
.calendar-event p, .calendar-event time { color: var(--wuxia-muted); }
.calendar-source { color: #527763; border-color: rgba(82, 119, 98, .38); background: rgba(82, 119, 98, .10); }
.calendar-event.is-google .calendar-source { color: #59668a; border-color: rgba(92, 110, 154, .38); background: rgba(92, 110, 154, .10); }
.calendar-delete, .calendar-edit { color: #76572b; border-color: rgba(179, 135, 62, .48); background: rgba(179, 135, 62, .12); }

.timetable-grid { color: #3d5748; }
.timetable-grid th, .timetable-grid td { border-color: rgba(82, 119, 98, .28); }
.timetable-grid thead th, .timetable-grid .timetable-period-head { color: #f3e4b4; border-bottom-color: var(--wuxia-vermilion); background: linear-gradient(#3f6654, #2d5042); }
.timetable-grid .timetable-period { color: #4d725d; background: #eee8d2; box-shadow: 1px 0 0 #bdc9b6; }
.timetable-grid td, .timetable-grid td:nth-child(odd) { background: rgba(255, 251, 239, .88); }
.timetable-grid td strong { color: #345b49; }
.timetable-grid td small, .timetable-grid td em, .timetable-class-label { color: #6d7d6d; }
.public-panel.timetable-panel .timetable-grid .timetable-period { color: #456a56; background: linear-gradient(180deg, #e6eddd, #d3e1d0); box-shadow: inset -1px 0 0 rgba(159, 78, 60, .16), 1px 0 0 rgba(82, 119, 98, .20); }
.public-panel.timetable-panel .timetable-grid .timetable-period small { color: #6d7d6d; }

.login-screen { background: var(--wuxia-paper); }
.login-art { color: var(--wuxia-ink); border-right-color: rgba(82, 119, 98, .38); background-image: radial-gradient(circle at 72% 30%, transparent 0 16%, rgba(82, 119, 98, .15) 16.2% 16.7%, transparent 17% 30%, rgba(179, 135, 62, .12) 30.2% 30.7%, transparent 31%), linear-gradient(145deg, #f8f2e0 0%, #e6ecd9 55%, #e8d9c4 100%); }
.login-art::before { color: var(--wuxia-vermilion); content: "八德修習錄 // 宗門入山"; }
.login-art::after { border-color: rgba(82, 119, 98, .30); }
.login-art h1, .login-heading h2 { color: #314d3f; font-family: "Noto Serif TC", "PMingLiU", serif; }
.login-art p, .login-heading p { color: var(--wuxia-muted); }
.login-art .eyebrow { color: var(--wuxia-vermilion); }
.login-art-note { color: var(--wuxia-jade); }
.orb { border-color: rgba(82, 119, 98, .38); box-shadow: 0 0 32px rgba(82, 119, 98, .10); }
.orb-two { background: rgba(179, 135, 62, .09); border-color: rgba(159, 78, 60, .28); }
.login-panel { background: rgba(255, 251, 239, .96); border-left-color: rgba(82, 119, 98, .30); box-shadow: -16px 0 34px rgba(73, 67, 49, .12); }
.login-panel .brand-mark strong { color: #314d3f; }
.login-panel .brand-mark small { color: var(--wuxia-muted); }
.demo-box, .import-details, .import-preview { border-color: rgba(82, 119, 98, .28); background: rgba(227, 237, 220, .62); }
.demo-box > div:first-child { color: #3d5d4a; }

@media (max-width: 760px) {
  body { background-attachment: scroll; }
  .app-shell .sidebar { background: linear-gradient(180deg, #eee6cf, #ddd5bb); }
  .public-topbar { background: rgba(248, 242, 224, .96); }
  .public-brand strong { color: #314d3f; }
  .public-topbar .button { color: #466454; background: rgba(179, 135, 62, .14); }
  .table-wrap, .timetable-grid-wrap, .student-sheet-wrap, .import-table-wrap { box-shadow: inset 0 0 0 2px rgba(179, 135, 62, .08); }
}

/* 雲海山水圖樣：取附圖的宣紙留白、雲紋、遠山與宗門印記語彙，使用 CSS 生成，避免引入角色或商標素材。 */
:root {
  --wuxia-cloud-ink: rgba(82, 119, 98, .12);
  --wuxia-mountain-ink: rgba(67, 93, 76, .11);
  --wuxia-seal-ink: rgba(159, 78, 60, .17);
}

body {
  background-image:
    radial-gradient(ellipse at 12% 14%, transparent 0 44px, var(--wuxia-cloud-ink) 45px 47px, transparent 48px 88px, rgba(82, 119, 98, .07) 89px 91px, transparent 92px 142px),
    linear-gradient(158deg, transparent 0 66%, var(--wuxia-mountain-ink) 66.3% 67%, transparent 67.3% 100%),
    linear-gradient(173deg, transparent 0 73%, rgba(159, 78, 60, .055) 73.2% 73.8%, transparent 74% 100%),
    radial-gradient(ellipse at 6% 0%, rgba(82, 119, 98, .18), transparent 34%),
    radial-gradient(ellipse at 94% 16%, rgba(159, 78, 60, .10), transparent 28%),
    repeating-linear-gradient(0deg, rgba(73, 80, 57, .045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(125deg, transparent 0 90px, rgba(129, 99, 57, .035) 91px 93px, transparent 94px 180px);
  background-attachment: fixed;
}

body::after {
  opacity: .18;
  background:
    radial-gradient(ellipse at 82% 12%, transparent 0 34px, rgba(82, 119, 98, .10) 35px 36px, transparent 37px 70px, rgba(82, 119, 98, .055) 71px 72px, transparent 73px 115px),
    repeating-linear-gradient(0deg, rgba(86, 80, 58, .04) 0 1px, transparent 1px 7px);
}

.public-screen {
  background-image:
    radial-gradient(ellipse at 16% 6%, transparent 0 56px, rgba(82, 119, 98, .13) 57px 59px, transparent 60px 116px),
    linear-gradient(163deg, transparent 0 68%, rgba(67, 93, 76, .12) 68.2% 69%, transparent 69.2% 100%),
    linear-gradient(178deg, transparent 0 75%, rgba(159, 78, 60, .06) 75.2% 75.8%, transparent 76% 100%),
    radial-gradient(ellipse at 0 0, rgba(82, 119, 98, .18), transparent 36%),
    radial-gradient(ellipse at 100% 100%, rgba(159, 78, 60, .12), transparent 34%);
}

.public-topbar, .public-hero, .public-panel {
  background-image:
    radial-gradient(ellipse at 100% 0%, transparent 0 24px, rgba(82, 119, 98, .10) 25px 26px, transparent 27px 52px, rgba(82, 119, 98, .05) 53px 54px, transparent 55px 92px),
    linear-gradient(144deg, rgba(255, 251, 238, .97), rgba(231, 237, 220, .93));
}

.public-hero::before {
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 25px, rgba(82, 119, 98, .12) 26px 27px, transparent 28px 54px),
    linear-gradient(152deg, transparent 0 50%, rgba(67, 93, 76, .11) 50.3% 51%, transparent 51.3%),
    linear-gradient(170deg, transparent 0 64%, rgba(159, 78, 60, .10) 64.3% 65%, transparent 65.3%);
}

.public-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 150px;
  height: 150px;
  right: -68px;
  bottom: -76px;
  border: 1px solid rgba(82, 119, 98, .13);
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, transparent 0 20px, rgba(82, 119, 98, .10) 21px 22px, transparent 23px 43px);
  pointer-events: none;
}

.app-shell .sidebar {
  background-image:
    linear-gradient(180deg, rgba(238, 230, 207, .96), rgba(221, 213, 187, .96)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(82, 119, 98, .06) 32px 33px);
}

.app-shell .page-heading {
  background-image:
    radial-gradient(ellipse at 100% 0%, transparent 0 26px, rgba(82, 119, 98, .11) 27px 28px, transparent 29px 58px),
    linear-gradient(120deg, rgba(252, 247, 230, .98), rgba(226, 235, 218, .92));
}

.app-shell .panel, .app-shell .quick-action, .app-shell .metric-card, .app-shell .task-card, .app-shell .student-card, .app-shell .setting-action, .app-shell .seat-planner, .app-shell .unassigned-panel, .app-shell .organization-planner, .app-shell .planning-layout > aside, .app-shell .inline-form {
  background-image:
    radial-gradient(ellipse at 100% 0%, transparent 0 22px, rgba(82, 119, 98, .10) 23px 24px, transparent 25px 48px),
    linear-gradient(135deg, rgba(255, 251, 238, .97), rgba(230, 237, 220, .92));
}

.table-wrap, .timetable-grid-wrap, .student-sheet-wrap, .import-table-wrap {
  background-image:
    linear-gradient(145deg, transparent 0 74%, rgba(67, 93, 76, .08) 74.2% 75%, transparent 75.2%),
    repeating-linear-gradient(160deg, transparent 0 45px, rgba(82, 119, 98, .055) 46px 47px, transparent 48px 92px),
    linear-gradient(135deg, #fffaf0, #e7eddc);
}

.calendar-grid {
  background-image:
    linear-gradient(155deg, transparent 0 67%, rgba(67, 93, 76, .10) 67.2% 68%, transparent 68.2%),
    linear-gradient(174deg, transparent 0 76%, rgba(159, 78, 60, .07) 76.2% 76.8%, transparent 77%),
    linear-gradient(135deg, #fcf7e8, #e3eadb);
}

.calendar-grid-system, .calendar-weekdays, .timetable-grid thead th, .timetable-grid .timetable-period-head, .table-wrap thead th, .reward-table thead th, .import-table thead th {
  background-image:
    repeating-linear-gradient(120deg, transparent 0 28px, rgba(236, 208, 139, .10) 29px 30px, transparent 31px 60px),
    linear-gradient(90deg, #355c4b, #5a8064 58%, #3e6251);
}

.blackboard-stage {
  background-image:
    radial-gradient(circle at 78% 19%, rgba(222, 186, 100, .22), transparent 8%),
    repeating-radial-gradient(ellipse at 88% 82%, transparent 0 24px, rgba(233, 221, 180, .08) 25px 26px, transparent 27px 52px),
    linear-gradient(156deg, transparent 0 61%, rgba(226, 214, 174, .13) 61.3% 62%, transparent 62.3%),
    linear-gradient(174deg, transparent 0 74%, rgba(226, 214, 174, .10) 74.2% 75%, transparent 75.2%),
    linear-gradient(135deg, #29473b, #47715a 56%, #263f35);
}

.reward-card-tile, .reward-card-tile.reward-ocean, .reward-card-tile.reward-violet, .reward-card-tile.reward-sun, .reward-card-tile.reward-nebula, .reward-card-tile.reward-plasma, .reward-card-tile.reward-aurora {
  background-image:
    radial-gradient(ellipse at 18% 24%, transparent 0 18px, rgba(166, 78, 59, .09) 19px 20px, transparent 21px 40px),
    linear-gradient(158deg, transparent 0 68%, rgba(82, 119, 98, .12) 68.3% 69%, transparent 69.3%),
    linear-gradient(145deg, #fff8e6, #ecdfbc 56%, #d7be8d) !important;
}

.reward-card-glow {
  background: repeating-radial-gradient(ellipse at center, transparent 0 10px, rgba(166, 78, 59, .07) 11px 12px, transparent 13px 22px);
}

@media (max-width: 760px) {
  body { background-attachment: scroll; }
  .public-panel::before { opacity: .65; }
  .app-shell .panel, .app-shell .quick-action, .app-shell .metric-card, .app-shell .task-card, .app-shell .student-card { background-image: linear-gradient(135deg, rgba(255, 251, 238, .98), rgba(230, 237, 220, .94)); }
}

@media (prefers-reduced-motion: reduce) {
  .reward-card-tile:hover, .app-shell .quick-action:hover, .app-shell .task-card:hover, .app-shell .student-card:hover, .app-shell .setting-action:hover { transform: none; }
}

/* 行事曆事件可讀性修正：Google 與手動事件使用明確的高對比玉簡色階。 */
.calendar-day-event {
  color: #294b3c;
  border-color: rgba(82, 119, 98, .55);
  background: #d7e8d8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .01em;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 1px 0 rgba(82, 119, 98, .10);
}

.calendar-day-event.is-manual {
  color: #294b3c;
  border-left-color: #a64e3b;
  border-right-color: rgba(159, 78, 60, .42);
  background: #d7e8d8;
}

.calendar-day-event.is-google {
  color: #fff8e6;
  border-left-color: #b3873e;
  border-right-color: rgba(61, 73, 103, .55);
  background: #56627d;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 230, .20), 0 1px 0 rgba(61, 73, 103, .18);
}

button.calendar-day-event.is-editable:hover,
.calendar-day-event.is-editable:hover {
  color: #243f34;
  border-left-color: #9f4e3c;
  background: #f0d995;
}

button.calendar-day-event.is-google.is-editable:hover,
.calendar-day-event.is-google.is-editable:hover {
  color: #2c3c38;
  border-left-color: #9f4e3c;
  background: #ead29a;
}

.calendar-day-events small {
  color: #52685a;
  font-weight: 700;
}

button.calendar-day-event {
  font-weight: 750;
}

@media (max-width: 760px) {
  .calendar-day-event { font-size: 10px; }
}

/* 行事曆日期徽章：深色底配米白字，避免日期被山水底紋與事件色塊吃掉。 */
.calendar-day .calendar-date {
  min-width: 30px;
  min-height: 24px;
  padding: 5px 7px 4px;
  color: #fff8e6;
  border: 1px solid rgba(82, 119, 98, .58);
  border-left: 3px solid #b3873e;
  background: #325f51;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(34, 60, 48, .42);
  box-shadow: 0 2px 4px rgba(45, 71, 54, .16), inset 0 0 0 1px rgba(255, 248, 230, .16);
}

.calendar-day.is-today .calendar-date {
  color: #fff8e6;
  border-color: rgba(159, 78, 60, .64);
  border-left-color: #f0d995;
  background: #9f4e3c;
  box-shadow: 0 2px 5px rgba(159, 78, 60, .22), inset 0 0 0 1px rgba(255, 248, 230, .20);
}

@media (max-width: 760px) {
  .calendar-day .calendar-date {
    min-width: 26px;
    min-height: 22px;
    padding: 4px 6px 3px;
    font-size: 10px;
  }
}

/* 幹部／小老師名單：沿用打掃工作分配的玉簡拖曳把手與落點提示。 */
.assignment-head.cadre-head,
.assignment-row.cadre-row {
  grid-template-columns: 34px minmax(120px, 1fr) minmax(150px, 1.15fr) minmax(160px, 1.35fr) 58px 54px;
}

.assignment-drag-handle {
  align-self: stretch;
  min-height: 34px;
  border: 1px solid #b8cdbb;
  background: linear-gradient(180deg, #edf3e4, #dce9dc);
  color: #3f7365;
  cursor: grab;
  font-size: 20px;
  line-height: 1;
  touch-action: none;
}

.assignment-drag-handle:hover {
  border-color: #8aaa91;
  background: #d4e5d4;
}

.assignment-drag-handle:active {
  cursor: grabbing;
}

.assignment-row.is-drop-target {
  border-color: #3f7365;
  box-shadow: 0 -3px 0 #b3873e, 0 0 0 2px rgba(63, 115, 101, .16);
}

@media (max-width: 760px) {
  .assignment-row.cadre-row {
    grid-template-columns: 32px 1fr 58px 52px;
  }

  .assignment-row.cadre-row input,
  .assignment-row.cadre-row select {
    grid-column: 2;
  }

  .assignment-row.cadre-row .assignment-drag-handle {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: stretch;
  }

  .assignment-row.cadre-row .assignment-select-control {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .assignment-row.cadre-row .assignment-delete-control {
    grid-column: 4;
    grid-row: 1 / span 3;
    align-self: center;
  }
}

/* 參考圖對齊：宣紙、墨條與朱砂卷軸（保留原有功能，只調整視覺語彙）。 */
:root {
  --scroll-paper: #eee6d1;
  --scroll-paper-light: #fffaf0;
  --scroll-paper-deep: #ded2b5;
  --scroll-ink: #302d27;
  --scroll-ink-soft: #625d4f;
  --scroll-line: #a79a7c;
  --scroll-red: #9a4435;
  --scroll-red-dark: #71362e;
  --scroll-jade: #587565;
  --scroll-gold: #b58b49;
}

html,
body,
.app-shell,
.main-area,
.login-screen {
  background-color: var(--scroll-paper);
  color: var(--scroll-ink);
}

body {
  background-image:
    radial-gradient(ellipse at 7% 12%, rgba(74, 92, 71, .15), transparent 24%),
    radial-gradient(ellipse at 96% 87%, rgba(154, 68, 53, .10), transparent 25%),
    linear-gradient(156deg, transparent 0 67%, rgba(72, 87, 68, .08) 67.2% 67.7%, transparent 68%),
    linear-gradient(171deg, transparent 0 75%, rgba(72, 87, 68, .06) 75.2% 75.7%, transparent 76%),
    repeating-linear-gradient(0deg, rgba(84, 74, 54, .05) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(124deg, transparent 0 92px, rgba(129, 96, 49, .035) 93px 95px, transparent 96px 184px);
  background-attachment: fixed;
}

body::after {
  opacity: .24;
  background:
    radial-gradient(ellipse at 87% 12%, transparent 0 32px, rgba(74, 105, 82, .10) 33px 34px, transparent 35px 68px, rgba(74, 105, 82, .06) 69px 70px, transparent 71px 112px),
    repeating-linear-gradient(0deg, rgba(86, 75, 55, .045) 0 1px, transparent 1px 7px);
}

.app-shell .sidebar {
  width: 252px;
  background:
    linear-gradient(180deg, rgba(235, 225, 199, .98), rgba(213, 201, 170, .98)),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(74, 105, 82, .06) 33px 34px);
  border-right: 1px solid #9d927b;
  box-shadow: 13px 0 26px rgba(73, 63, 45, .15);
}

.app-shell .sidebar::after {
  width: 3px;
  background: linear-gradient(var(--scroll-red), var(--scroll-gold), var(--scroll-jade));
}

.app-shell .sidebar-brand {
  border-bottom: 1px solid rgba(89, 105, 80, .28);
}

.app-shell .sidebar-brand strong,
.app-shell .brand-mark strong,
.app-shell .user-badge strong,
.app-shell .nav-item,
.app-shell .logout-button {
  font-family: "Noto Serif TC", "PMingLiU", serif;
}

.app-shell .sidebar-brand strong,
.app-shell .brand-mark strong,
.app-shell .user-badge strong {
  color: var(--scroll-ink);
}

.app-shell .sidebar-brand small,
.app-shell .brand-mark small,
.app-shell .user-badge small,
.app-shell .secure-label,
.app-shell .nav-section {
  color: var(--scroll-ink-soft);
}

.app-shell .user-badge {
  border: 1px solid rgba(100, 111, 83, .38);
  border-radius: 3px;
  background: rgba(255, 250, 239, .56);
  box-shadow: inset 0 0 0 1px rgba(181, 139, 73, .13);
}

.app-shell .nav-item {
  color: #4a5c50;
  border-left-color: transparent;
  border-radius: 2px;
}

.app-shell .nav-item:hover {
  color: var(--scroll-red-dark);
  background: rgba(181, 139, 73, .15);
  border-left-color: var(--scroll-gold);
}

.app-shell .nav-item.active {
  color: var(--scroll-ink);
  background: linear-gradient(90deg, rgba(111, 143, 111, .28), rgba(255, 250, 239, .18));
  border-left-color: var(--scroll-red);
  box-shadow: inset -3px 0 0 var(--scroll-gold);
}

.app-shell .nav-icon,
.app-shell .nav-item.active .nav-icon {
  color: var(--scroll-jade);
  text-shadow: none;
}

.app-shell .nav-item b {
  border-radius: 2px;
  background: var(--scroll-red);
}

.app-shell .topbar {
  height: 72px;
  color: var(--scroll-ink-soft);
  border-bottom: 1px solid #a79a7c;
  background: rgba(250, 245, 229, .92);
  box-shadow: 0 7px 18px rgba(73, 63, 45, .11);
}

.app-shell .topbar::before { color: var(--scroll-jade); }
.app-shell .topbar::after { background: linear-gradient(90deg, var(--scroll-red) 0 20%, var(--scroll-gold) 20% 48%, var(--scroll-jade) 48% 78%, transparent 78%); }
.app-shell .mobile-brand,
.app-shell .icon-button { color: var(--scroll-ink); }
.app-shell .sync-status { color: var(--scroll-jade); }

.page-content {
  max-width: 1380px;
  padding-top: 34px;
}

.app-shell .page-heading,
.app-shell .panel,
.app-shell .quick-action,
.app-shell .metric-card,
.app-shell .task-card,
.app-shell .student-card,
.app-shell .setting-action,
.app-shell .seat-planner,
.app-shell .unassigned-panel,
.app-shell .organization-planner,
.app-shell .planning-layout > aside,
.app-shell .inline-form {
  color: var(--scroll-ink);
  border: 1px solid var(--scroll-line);
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 100% 0, transparent 0 24px, rgba(74, 105, 82, .10) 25px 26px, transparent 27px 52px),
    linear-gradient(135deg, rgba(255, 250, 239, .98), rgba(229, 225, 204, .94));
  box-shadow: inset 0 0 0 4px rgba(181, 139, 73, .07), 0 12px 24px rgba(73, 63, 45, .12);
}

.app-shell .page-heading {
  border-left: 6px solid var(--scroll-red);
  background:
    linear-gradient(90deg, rgba(255, 250, 239, .99), rgba(237, 231, 208, .94)),
    repeating-linear-gradient(0deg, rgba(86, 75, 55, .04) 0 1px, transparent 1px 5px);
}

.app-shell .page-heading::before { color: var(--scroll-jade); }
.app-shell .page-heading::after { color: var(--scroll-red); border-color: rgba(154, 68, 53, .22); }
.app-shell .panel::before { border-color: var(--scroll-jade); }
.app-shell .panel::after { border-color: rgba(94, 109, 80, .18); }
.app-shell .panel-header { border-bottom-color: rgba(94, 109, 80, .26); }

.app-shell .panel-header h2,
.app-shell .panel-header h3,
.app-shell .quick-action strong,
.app-shell .metric-card strong,
.app-shell .attendance-summary strong,
.app-shell .student-focus strong,
.app-shell .task-main h3,
.app-shell .announcement-card h3,
.app-shell .report-card strong,
.app-shell .student-card h3,
.app-shell .setting-action strong {
  color: var(--scroll-ink);
  font-family: "Noto Serif TC", "PMingLiU", serif;
  text-shadow: none;
}

.app-shell .panel-header h2::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 5px;
  margin: 0 8px 3px 0;
  background: var(--scroll-ink);
  box-shadow: 10px 0 0 rgba(48, 45, 39, .25);
  transform: skewX(-18deg);
}

.app-shell .page-heading p,
.app-shell .panel-note,
.app-shell .task-main p,
.app-shell .task-due,
.app-shell .task-audience,
.app-shell .announcement-card span,
.app-shell .announcement-card p,
.app-shell .report-card p,
.app-shell .empty-state,
.app-shell .filter-row,
.app-shell .legend,
.app-shell .loading-line,
.app-shell .student-card-footer,
.app-shell .profile-list span,
.app-shell .setting-action small {
  color: var(--scroll-ink-soft);
}

.app-shell .quick-action:hover,
.app-shell .task-card:hover,
.app-shell .student-card:hover,
.app-shell .setting-action:hover {
  border-color: var(--scroll-gold);
  background: linear-gradient(135deg, #fffaf0, #e4ecd9);
  box-shadow: 0 16px 30px rgba(73, 63, 45, .18);
}

.app-shell .quick-action > span,
.app-shell .announcement-icon,
.app-shell .report-icon {
  border: 1px solid rgba(154, 68, 53, .48);
  border-radius: 3px;
  color: var(--scroll-red);
  background: rgba(154, 68, 53, .10);
}

.app-shell .metric-label { color: var(--scroll-jade); }
.app-shell .metric-card { border-top: 4px solid var(--scroll-ink); }
.app-shell .metric-navy,
.app-shell .metric-blue { color: #456c77; }
.app-shell .metric-orange { color: var(--scroll-red); }
.app-shell .metric-purple { color: #71607a; }
.app-shell .metric-green { color: var(--scroll-jade); }
.app-shell .date-chip,
.app-shell .count-pill { color: var(--scroll-red-dark); border-color: rgba(154, 68, 53, .38); background: rgba(154, 68, 53, .10); }
.app-shell .attendance-summary div,
.app-shell .profile-list div,
.app-shell .student-focus,
.app-shell .private-note { border-color: rgba(88, 117, 101, .28); background: rgba(224, 233, 217, .68); }
.app-shell .section-divider,
.app-shell .announcement-card,
.app-shell .report-card,
.app-shell .audit-row,
.app-shell .event-list { border-color: rgba(88, 117, 101, .26); }
.app-shell .task-card.compact { border-bottom-color: rgba(88, 117, 101, .26); }
.app-shell .task-check { border-color: rgba(88, 117, 101, .58); border-radius: 2px; background: rgba(255, 250, 239, .8); }
.app-shell .task-check.checked { background: var(--scroll-jade); border-color: #426153; }

.app-shell input,
.app-shell select,
.app-shell textarea,
.login-panel input {
  color: var(--scroll-ink);
  border-color: rgba(88, 117, 101, .45);
  border-radius: 3px;
  background: rgba(255, 252, 241, .94);
}

.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus,
.login-panel input:focus {
  border-color: var(--scroll-gold);
  box-shadow: 0 0 0 3px rgba(181, 139, 73, .17), inset 0 1px 0 #fff;
}

.button-primary,
.button-dark,
.mini-button.primary {
  color: #fff8e8;
  border: 1px solid var(--scroll-red-dark);
  border-radius: 3px;
  background: linear-gradient(135deg, #ad5540, #813b31);
  box-shadow: 0 7px 14px rgba(113, 54, 46, .18);
}

.button-primary:hover,
.button-dark:hover,
.mini-button.primary:hover { color: #fff8e8; background: linear-gradient(135deg, #bd634a, #934338); }
.button-secondary,
.mini-button,
.demo-buttons button { color: var(--scroll-ink); border-color: #a79a7c; border-radius: 3px; background: rgba(255, 250, 239, .82); }
.button-secondary:hover,
.mini-button:hover,
.demo-buttons button:hover { color: var(--scroll-red-dark); border-color: var(--scroll-red); background: #f7edcf; }
.text-button { color: var(--scroll-red-dark); }

.table-wrap,
.timetable-grid-wrap,
.student-sheet-wrap,
.import-table-wrap {
  border-color: #a79a7c;
  border-radius: 3px;
  background: linear-gradient(135deg, #fffaf0, #e5dfc6);
  box-shadow: inset 0 0 0 4px rgba(181, 139, 73, .09), 0 11px 24px rgba(73, 63, 45, .12);
}

.table-wrap thead th,
.reward-table thead th,
.import-table thead th,
.timetable-grid thead th,
.timetable-grid .timetable-period-head {
  color: #f8ecd0;
  border-bottom-color: var(--scroll-red);
  background: linear-gradient(90deg, #393934, #222522 65%, #393934);
  font-family: "Noto Serif TC", "PMingLiU", serif;
}

.table-wrap tbody tr:nth-child(even),
.reward-table tbody tr:nth-child(even),
.import-table tbody tr:nth-child(even) { background: rgba(88, 117, 101, .08); }
.table-wrap tbody tr:hover,
.reward-table tbody tr:hover,
.import-table tbody tr:hover { background: rgba(181, 139, 73, .15); }
.table-wrap td,
.table-wrap th,
.reward-table td,
.reward-table th,
.import-table td,
.import-table th { border-color: rgba(126, 112, 82, .30); }

.calendar-grid {
  border-color: #9d927b;
  border-radius: 4px;
  background: linear-gradient(135deg, #fcf7e8, #e3eadb);
  box-shadow: inset 0 0 0 4px rgba(181, 139, 73, .10), 0 12px 24px rgba(73, 63, 45, .12);
}

.calendar-grid-system,
.calendar-weekdays { background: linear-gradient(90deg, #373936, #252824 62%, #403d34); border-bottom-color: var(--scroll-red); color: #f4e6bd; }
.calendar-grid-system span,
.calendar-grid-system i { color: #ecd08b; }
.calendar-date { color: var(--scroll-jade); }
.calendar-day-event { color: #304f3d; border-color: rgba(88, 117, 101, .48); background: #d9e8d7; }
.calendar-day-event.is-class { border-left-color: var(--scroll-red); }
.calendar-day-event.is-google { border-left-color: var(--scroll-gold); }

.login-art {
  color: var(--scroll-ink);
  border-right-color: #9d927b;
  background-image: linear-gradient(135deg, #f1ead9 0%, #eee6d2 56%, #e4ecdf 100%);
  background-position: center;
  background-size: cover;
}

.login-art::before { color: var(--scroll-red); }
.login-art h1,
.login-heading h2 { color: var(--scroll-ink); font-family: "Noto Serif TC", "PMingLiU", serif; text-shadow: 0 1px 0 #fff9e9; }
.login-art p,
.login-heading p { color: var(--scroll-ink-soft); }
.login-art .eyebrow { color: var(--scroll-red); }
.login-art-note { color: var(--scroll-jade); }
.login-panel { background: rgba(255, 250, 239, .97); border-left-color: #a79a7c; }
.login-panel .brand-mark strong { color: var(--scroll-ink); }
.login-panel .brand-mark small { color: var(--scroll-ink-soft); }
.stack-form label { color: #536b5b; }
.demo-box,
.import-details,
.import-preview { border-color: rgba(88, 117, 101, .34); border-radius: 3px; background: rgba(224, 233, 217, .68); }
.privacy-note { color: #788879; }

@media (max-width: 760px) {
  body { background-attachment: scroll; }
  .app-shell .sidebar { width: 248px; background: linear-gradient(180deg, #eee6cf, #d8ceb1); }
  .app-shell .topbar { height: 60px; }
  .app-shell .page-content { padding: 24px 14px 50px; }
  .app-shell .panel-header h2::before { width: 20px; margin-right: 5px; }
  .login-art { min-height: 320px; background-position: center, 72% center; }
}

.private-avatar-status { position: absolute; bottom: 7px; color: #6b806f; font-size: 10px; font-weight: 700; }
.profile-summary-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.profile-summary-loading { margin: 18px 0; padding: 20px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .55); }
.profile-record-panel { margin-top: 18px; }
.profile-record-month + .profile-record-month { margin-top: 18px; }
.profile-record-month-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.profile-record-month-heading h3 { margin: 0; color: var(--ink); font-family: "Noto Serif TC", "PMingLiU", serif; font-size: 16px; }
.profile-record-month-heading span { color: var(--muted); font-size: 11px; }
.profile-record-list { display: grid; gap: 7px; margin-top: 8px; }
.profile-record-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, .6); }
.profile-record-row > div:first-child { min-width: 0; }
.profile-record-row strong { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; }
.profile-record-row span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.profile-record-deltas { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; text-align: right; }
.profile-record-deltas span { display: inline-block; margin: 0; padding: 3px 6px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-weight: 800; white-space: nowrap; }
.profile-record-deltas .profile-record-stones { color: var(--orange); background: var(--orange-soft); }
.profile-record-deltas .negative { color: var(--red); background: #fff0f0; }

@media (max-width: 760px) {
  .profile-summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .profile-record-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .profile-record-deltas { justify-content: flex-start; text-align: left; }
}

/* 八德修習錄 · 宗門帳冊。Material layers sit behind live, selectable content. */
:root {
  --ledger-grain: url('/assets/ledger-grain.svg');
  --ledger-paper: #f2e5c6;
  --ledger-ink: #303b32;
  --ledger-jade: #35594a;
  --ledger-bronze: #8e7850;
  --ledger-line: #b6b097;
  --ledger-surface: radial-gradient(ellipse at 0 0, #a87b3430, transparent 32%),
    radial-gradient(ellipse at 100% 100%, #93693622, transparent 35%),
    var(--ledger-grain), linear-gradient(110deg, #efe0bb, #f8efd9 48%, #f0e3c4);
  --ledger-stud: radial-gradient(circle at 38% 30%, #eee0a8 0 12%, #bfa471 24%, #695538 48%, #b59a67 59%, #524832 67%, transparent 74%);
  --ledger-plaque: var(--ledger-grain), linear-gradient(110deg, #426855, #35594a 65%, #3c6050);
}

/* A quiet stone-green desktop gives the warm paper an actual silhouette. */
html, html body, .app-shell, .main-area, .public-screen {
  background-color: #d1d5c3;
  color: var(--ledger-ink);
}
.main-area, .public-screen {
  background-image: var(--ledger-grain), radial-gradient(ellipse at 25% 0, #eff0dc80, transparent 70%);
}
.public-screen { min-height: 100vh; }
body::after { opacity: .09; }

/* Book covers: patina at the edge, a fine inner rule, and two offset leaves. */
.app-shell :is(.panel, .page-heading, .seat-planner, .organization-panel, .cleaning-zone, .unassigned-panel),
.public-hero, .public-panel, .login-panel {
  position: relative;
  color: var(--ledger-ink);
  border: 2px solid var(--ledger-bronze);
  border-radius: 9px 5px 8px 5px;
  background: var(--ledger-surface);
  box-shadow: inset 0 0 0 3px #f8efd5, inset 0 0 0 4px #a3906266,
    inset 0 0 22px #9b763325, 3px 3px 0 -1px #e6d7b4, 3px 3px 0 0 #9a8860,
    6px 6px 0 -1px #e8dabe, 6px 6px 0 0 #afa17c, 0 12px 25px #3a423526;
  backdrop-filter: none;
}
.app-shell :is(.panel, .organization-panel, .seat-planner, .cleaning-zone, .unassigned-panel)::after,
.public-panel::after, .public-hero::after {
  content: '';
  display: block;
  position: absolute;
  inset: 7px;
  width: auto;
  height: auto;
  border: 1px solid #96815a60;
  border-radius: 4px;
  background: var(--ledger-stud) top left / 9px 9px no-repeat,
    var(--ledger-stud) top right / 9px 9px no-repeat,
    var(--ledger-stud) bottom left / 9px 9px no-repeat,
    var(--ledger-stud) bottom right / 9px 9px no-repeat;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.app-shell .panel::before, .public-panel::before { display: none; }
.app-shell .page-heading { padding: 27px 25px; border-left: 5px solid #7d4f38; }
.app-shell .page-heading::before { color: #556449; letter-spacing: .16em; }
.app-shell .page-heading::after { color: #71572c; border: 0; background: none; }
.page-heading h1, .public-hero h1 { color: #304b3d; text-shadow: 0 1px #fff8df; }
.public-hero::before { opacity: .23; }
.public-board .public-panel:first-child, .public-board .public-panel:last-child,
.public-panel.timetable-panel { border-top: 2px solid var(--ledger-bronze); }
.app-shell :is(.panel, .organization-panel, .seat-planner, .cleaning-zone), .public-panel { padding: 24px; }

/* Inset painted title plates. Small bronze pins are decorative, never controls. */
.app-shell .panel > .panel-header, .public-panel > .public-panel-heading,
.organization-panel > .assignment-toolbar, .cleaning-zone > .cleaning-zone-header,
.unassigned-panel > .unassigned-heading {
  position: relative;
  gap: 12px;
  padding: 14px 22px;
  margin-bottom: 18px;
  color: #fcf1d4;
  border: 1px solid #8b7950;
  border-radius: 5px;
  background: var(--ledger-plaque);
  box-shadow: inset 0 0 0 2px #c6c79945, inset 0 1px 3px #132e2970,
    0 2px 0 #fffae4, 0 4px 6px #574b3224;
}
.app-shell .panel > .panel-header::after, .public-panel > .public-panel-heading::after,
.organization-panel > .assignment-toolbar::after, .unassigned-heading::after,
.cleaning-zone-header::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: var(--ledger-stud) top left / 6px 6px no-repeat,
    var(--ledger-stud) top right / 6px 6px no-repeat,
    var(--ledger-stud) bottom left / 6px 6px no-repeat,
    var(--ledger-stud) bottom right / 6px 6px no-repeat;
  pointer-events: none;
}
.app-shell .panel > .panel-header :is(h2, h3), .public-panel-heading h2,
.organization-panel > .assignment-toolbar strong, .unassigned-heading h2, .cleaning-zone-header h3 {
  color: #fff2d1;
  font-family: 'Noto Serif TC', 'PMingLiU', serif;
  font-weight: 800;
  letter-spacing: .06em;
  text-shadow: 0 1px 1px #1c352c;
}
.app-shell .panel > .panel-header .eyebrow,
.public-panel-heading .eyebrow, .unassigned-heading :is(.eyebrow, small),
.organization-panel > .assignment-toolbar span, .cleaning-zone-header :is(p, .eyebrow, p strong) {
  color: #e3e7ce;
}
.public-panel-heading > span, .panel-header > .tag, .cleaning-zone-header .cleaning-responsible {
  color: #fcf1d4;
  border-color: #b9bd91;
  background: #29483c;
}
.app-shell .panel-header :is(.text-button, .panel-note),
.public-panel-heading .text-button { color: #fff0c9; }

/* Ruled ledger rows: clear ink and rules, with less decoration inside dense data. */
.table-wrap, .student-sheet-wrap, .timetable-grid-wrap {
  border: 1px solid #8d927b;
  border-radius: 3px;
  background: #f6edd8;
  box-shadow: inset 3px 0 #ac5c4740, 0 2px 0 #fff6e0;
}
.table-wrap :is(td, th), .timetable-grid :is(td, th) { border-color: #abb49e; }
.table-wrap tbody tr, .app-shell .assignment-row, .app-shell .cleaning-row,
.app-shell .available-student-card, .public-task-card {
  color: var(--ledger-ink);
  border-color: #aeb39a;
  background: #f9efd9;
  box-shadow: 0 1px 0 #fff9e7;
}
.table-wrap tbody tr:nth-child(even), .app-shell .assignment-row:nth-child(even) { background: #eee4c9; }
.app-shell .assignment-row.is-selected, .app-shell .cleaning-row.is-selected {
  background: #dbe5ce;
  border-color: #4f725b;
  box-shadow: inset 3px 0 #4f725b;
}
.app-shell .assignment-row.is-drop-target, .app-shell .cleaning-row.is-drop-target {
  border-color: #526b51;
  box-shadow: 0 -3px #916331, 0 0 0 2px #52736340;
}
.assignment-head, .organization-panel .panel-note { color: #4d604a; }
.table-wrap thead th, .timetable-grid thead th, .timetable-grid .timetable-period-head {
  color: #fff2d1;
  background: var(--ledger-plaque);
  border-bottom: 2px solid #aa8957;
}
.timetable-grid thead th small { color: #e4e7ce; }
.timetable-grid td, .timetable-grid td:nth-child(odd) { background: #f7edd5; }
.timetable-grid .timetable-period { background: #e4d8b9; color: #374c3e; }
.timetable-grid td :is(small, em), .timetable-grid .timetable-period small { color: #596550; }

/* Calendar keeps the tested opaque event colors and large contrasting date seals. */
.calendar-grid {
  border: 2px solid #8b825d;
  border-radius: 4px;
  background: #f3e9cd;
  box-shadow: 0 2px 0 #fff7de;
}
.calendar-grid::before { opacity: .12; }
.calendar-grid-system { background: var(--ledger-plaque); color: #fff2d1; }
.calendar-weekday { color: #fff2d1; background: #3e604d; }
.calendar-day { background: #f9f0dc; border-color: #b2b39a; }
.calendar-day:nth-child(7n), .calendar-day:nth-child(7n + 1) { background: #eae0c5; }
.calendar-day.is-today { background: #fbf0c9; }
.calendar-toolbar strong, .calendar-toolbar span, .calendar-month-label { color: #4d563b; }

/* The navigation is a green cloth binding; small cards are individual paper slips. */
.app-shell .sidebar {
  background: var(--ledger-grain), linear-gradient(100deg, #28493e, #385b4b 88%, #203e35);
  border-right: 3px double #ab9865;
  box-shadow: 6px 0 18px #25392e35;
}
.app-shell .sidebar :is(.brand-mark strong, .sidebar-brand strong, .nav-item, .nav-icon, .logout-button) { color: #f3e8c9; }
.app-shell .sidebar :is(.brand-mark small, .sidebar-brand small, .nav-section, .secure-label) { color: #d4dec6; }
.app-shell .sidebar .nav-item.active { color: #304b3d; background: var(--ledger-surface); border-left-color: #ab6143; box-shadow: inset 0 0 0 1px #b7aa77, 0 3px 5px #17342750; }
.app-shell .sidebar .nav-item.active .nav-icon { color: #42614b; }
.app-shell .sidebar .nav-item:hover:not(.active) { color: #fff7dd; background: #b2b98c22; }
.app-shell .sidebar .user-badge { background: var(--ledger-surface); border-color: #b8a174; }
.app-shell .sidebar .user-badge :is(strong, small) { color: #304b3d; }
.app-shell .topbar, .public-topbar { background: var(--ledger-surface); border-color: #a29165; backdrop-filter: none; }
.app-shell :is(.metric-card, .quick-action, .task-card, .student-card, .setting-action) {
  background: var(--ledger-surface);
  border: 1px solid #a9976b;
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px #fff3d466, 2px 3px 0 #b1a784, 0 7px 12px #35433216;
}
.app-shell :is(.page-heading p, .panel-note, .task-main p, .student-card-footer),
.public-hero p, .public-task-card p, .public-privacy-note, .public-empty { color: #55604b; }
.app-shell :is(input, select, textarea), .login-panel input {
  color: #2f3d32;
  border-color: #aaa47f;
  background: #fff7e3;
  box-shadow: inset 0 1px 3px #65563218, 0 1px #fff9e9;
}
.app-shell :is(input, textarea)::placeholder { color: #72765d; opacity: 1; }
.button-primary, .button-dark, .mini-button.primary {
  color: #fff3d6;
  background: var(--ledger-plaque);
  border: 1px solid #958251;
  box-shadow: inset 0 0 0 2px #bdbb8555, 0 3px 0 #334e3d, 0 5px 8px #38463230;
  text-shadow: 0 1px #203e30;
}
.button-primary:hover, .button-dark:hover, .mini-button.primary:hover { color: #fff8e5; background-color: #466b54; filter: brightness(1.08); }
.button-secondary { color: #3d5441; border-color: #a69970; background: var(--ledger-surface); box-shadow: inset 0 0 0 2px #fff5db99, 0 2px 0 #b8aa80; }
button:focus-visible, a:focus-visible { outline: 3px solid #9e5738; outline-offset: 3px; }
.sync-health-panel { background: var(--ledger-plaque); border-color: #8c8255; border-radius: 5px; }
.sync-health-panel small { color: #d6e1c8; }
.sync-health-panel p { color: #e0e8d1; }
.blackboard-stage {
  border: 5px ridge #9a845b;
  border-radius: 6px;
  background-image: var(--ledger-grain), radial-gradient(ellipse at 50% 20%, #44644d, #263f33);
  box-shadow: inset 0 0 24px #172c2466, 3px 4px 0 #6d6347, 0 15px 25px #293e3030;
}
.blackboard-stage::before { opacity: .15; }

@media (max-width: 980px) {
  .organization-panel > .assignment-toolbar { align-items: flex-start; }
  .assignment-head.cadre-head, .assignment-row.cadre-row { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.35fr) 46px 44px; }
}
@media (max-width: 760px) {
  .app-shell :is(.panel, .organization-panel, .seat-planner, .cleaning-zone), .public-panel { padding: 16px; }
  .app-shell .page-heading { padding: 21px 18px; }
  .app-shell .panel > .panel-header, .public-panel > .public-panel-heading,
  .organization-panel > .assignment-toolbar, .unassigned-heading { padding: 12px 15px; flex-wrap: wrap; }
  .public-screen { padding: 10px 15px 18px 10px; }
  .assignment-row.cadre-row { grid-template-columns: 28px minmax(0, 1fr) 48px 44px; }
}
.reward-card-tile.reward-jade { background: var(--ledger-surface) !important; padding: 14px; border: 1px solid var(--ledger-bronze); border-radius: 5px; clip-path: none; }
.reward-card-tile.reward-jade::before, .reward-card-tile.reward-jade::after { display: none; }
.reward-card-tile.reward-jade .reward-card-name { writing-mode: horizontal-tb; color: #304b3d; text-align: center; margin: 12px 0; }
.reward-card-tile.reward-jade .reward-card-effect { color: #303b32; background: #fbf1da; padding: 8px; }
.reward-card-tile.reward-jade .reward-card-top { color: #3e543c; flex-wrap: wrap; }
.reward-card-art { aspect-ratio: 3 / 5; overflow: hidden; background: #ead9b6; display: grid; place-items: center; }
.reward-card-art canvas { display: block; width: 100%; height: auto; }
.reward-preview-output canvas { width: min(100%, 280px); height: auto; aspect-ratio: 3 / 5; }
.reward-preview-output { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.reward-preview-output > div { min-width: 0; color: #334d3b; font-size: 14px; }
.reward-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.reward-card-library .reward-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 180px)); justify-content: start; }
.reward-card-library .reward-card-tile { min-height: 240px; }
.stone-photo-import { display: grid; gap: 10px; margin: 14px 0; padding: 12px 14px; border: 1px solid #b8cbb9; border-radius: 6px; background: linear-gradient(135deg, #eef3e5, #fffaf0); }
.stone-photo-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.stone-photo-controls .file-picker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #9eb6a0; border-radius: 4px; color: #2f5e4d; background: #fffaf0; cursor: pointer; }
.stone-photo-controls .file-picker input { max-width: 220px; }
.stone-photo-status[data-tone="error"] { color: #a44735; }
.stone-photo-status[data-tone="warn"] { color: #8a641f; }
.stone-photo-status[data-tone="success"] { color: #2f7654; }
.stone-photo-preview { width: min(100%, 420px); max-height: 280px; object-fit: contain; object-position: left center; border: 1px solid #b8cbb9; border-radius: 4px; background: #f7f2e5; }
.reward-issue-table tr.stone-ocr-low-confidence { background: #fff2d6; outline: 2px solid #d2a34e; outline-offset: -2px; }
#reward-card-form .panel-note { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .reward-preview-output { grid-template-columns: minmax(0, 1fr); }
  .reward-card-grid { grid-template-columns: minmax(0, 1fr); }
  .reward-preview-output canvas { width: min(100%, 240px); justify-self: center; }
  .reward-card-library .reward-card-tile { min-height: 220px; }
}
@media print {
  .app-shell :is(.panel, .organization-panel, .page-heading, .cleaning-zone), .public-panel, .public-hero { background: #fff; box-shadow: none; border: 1px solid #777; }
  .app-shell .panel::after, .public-panel::after, .public-hero::after { display: none; }
}

/* 公開打卡牆：只呈現座號與狀態，不把學生識別資料帶到免登入頁面。 */
.public-hero-actions { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.public-attendance-panel { margin-top: 22px; }
.public-attendance-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 18px 0 22px; }
.public-attendance-summary > div { padding: 14px 10px; border: 1px solid #b6b097; border-radius: 4px; background: #f8efd9; text-align: center; }
.public-attendance-summary strong, .public-attendance-summary span { display: block; }
.public-attendance-summary strong { color: #304b3d; font: 800 25px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.public-attendance-summary span { margin-top: 7px; color: #55604b; font-size: 11px; }
.public-attendance-summary .is-present { border-color: #6e9c75; background: #e5f0df; }
.public-attendance-summary .is-unmarked { border-color: #c7ae73; background: #fff4d1; }
.public-attendance-summary .is-leave { border-color: #7896b1; background: #e6eef7; }
.public-attendance-summary .is-absent { border-color: #b77c6a; background: #f7e3da; }
.public-attendance-summary .is-late { border-color: #c89a51; background: #f9ead1; }
.public-attendance-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.public-attendance-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 10px 12px; border: 1px solid #b6b097; border-radius: 4px; background: #f9efd9; box-shadow: 0 1px 0 #fff9e7; }
.public-attendance-seat { color: #304b3d; font-weight: 900; }
.public-attendance-status { padding: 5px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.public-attendance-status.is-present { color: #2f7654; background: #e5f0df; }
.public-attendance-status.is-unmarked { color: #8a641f; background: #fff4d1; }
.public-attendance-status.is-leave { color: #426b91; background: #e6eef7; }
.public-attendance-status.is-absent { color: #a44735; background: #f7e3da; }
.public-attendance-status.is-late { color: #9a651e; background: #f9ead1; }
@media (max-width: 900px) {
  .public-attendance-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .public-attendance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-attendance-summary > div:last-child { grid-column: 1 / -1; }
  .public-attendance-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .public-attendance-row { padding: 9px 10px; }
}

/* Mobile interaction layer: keep navigation, touch targets, and dense data usable without changing desktop workflows. */
.mobile-nav-scrim { display: none; }

@media (max-width: 760px) {
  body.mobile-nav-active { position: fixed; top: var(--mobile-nav-scroll-y, 0); width: 100%; overflow: hidden; }
  .mobile-nav-scrim { position: fixed; z-index: 50; inset: 0; display: block; width: 100%; height: 100%; margin: 0; border: 0; background: rgba(20, 33, 28, .48); opacity: 1; transition: opacity .2s ease; touch-action: manipulation; }
  .mobile-nav-scrim[aria-hidden="true"] { visibility: hidden; opacity: 0; pointer-events: none; }
  .app-shell .sidebar { z-index: 60; width: min(86vw, 320px); height: 100vh; height: 100dvh; padding: 20px 14px calc(18px + env(safe-area-inset-bottom)); overflow: hidden; overscroll-behavior: contain; }
  .sidebar-brand, .user-badge, .sidebar-footer { flex: 0 0 auto; }
  .sidebar-brand { padding-bottom: 18px; }
  .user-badge { margin-bottom: 12px; }
  .main-nav { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 0 2px 12px; scrollbar-gutter: stable; }
  .sidebar-footer { padding-top: 14px; }
  .nav-item { min-height: 44px; }
  .icon-button, #mobile-menu { min-width: 44px; min-height: 44px; padding: 8px; touch-action: manipulation; }
  .page-content { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .app-shell .button:not(.mini-button), .app-shell .setting-action { min-height: 44px; }
  .app-shell :is(.page-heading, .panel-header, .assignment-toolbar, .reward-forge-actions, .reward-issue-defaults, .unified-reward-form-actions) { row-gap: 10px; }
  .app-shell :is(.page-heading, .panel-header, .assignment-toolbar) > .button { width: 100%; justify-content: center; }
  .public-panel-heading { flex-wrap: wrap; }
  .public-panel-heading > div:first-child { flex: 1 1 100%; }
  .public-panel-heading-actions { flex: 1 1 auto; justify-content: flex-start; }
  .table-wrap, .student-sheet-wrap, .timetable-grid-wrap, .import-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  /* The source column is hidden on phones; remove its desktop grid track too,
     otherwise student names collapse beside the status buttons. */
  .attendance-table .attendance-row { grid-template-columns: 38px minmax(84px, 1fr) minmax(104px, auto); gap: 8px; align-items: center; }
  .attendance-table .attendance-row.table-head span:last-child,
  .attendance-table .attendance-row > small { display: none; }
  .attendance-status-buttons { display: flex; gap: 6px; justify-content: flex-end; }
  .attendance-status-button { min-width: 48px; min-height: 38px; padding: 7px 8px; }
  .has-mobile-horizontal-overflow { box-shadow: inset -14px 0 14px -16px rgba(46, 70, 51, .95), inset 14px 0 14px -16px rgba(46, 70, 51, .75); }
  .mobile-scroll-hint { margin: 6px 2px 12px; color: #59705b; font-size: 11px; font-weight: 700; text-align: center; }
  .mobile-scroll-hint[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mobile-nav-scrim { transition: none; } }