:root {
  --admin-accent:#e86d85;
  --admin-deep:#c9526b;
  --admin-panel:#fcedf0;
  --admin-surface:#fefbfc;
  --admin-line:#f3d3db;
  --ink:#17171d;
  --ink-2:#555561;
  --ink-3:#8d8d99;
  --canvas:#f5f5f7;
  --paper:#fff;
  --soft:#f0f1f4;
  --line:#e4e5ea;
  --success:#237458;
  --success-bg:#e8f4ee;
  --warning:#8a5a00;
  --warning-bg:#fff3d9;
  --danger:#b74436;
  --danger-bg:#fbeceb;
  --shadow:0 12px 32px rgba(29,23,26,.08);
  --sans:"DM Sans","Noto Sans TC",system-ui,sans-serif;
  --serif:"Noto Serif TC",serif;
  --mono:"DM Mono",ui-monospace,monospace;
}

* { box-sizing:border-box; }
html, body { min-height:100%; }
html { background:var(--canvas); }
body { margin:0; min-width:768px; background:var(--canvas); color:var(--ink); font:14px/1.5 var(--sans); }
button, input, select, textarea { font:inherit; }
button, summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:3px solid var(--admin-line); outline-offset:2px; }
[hidden] { display:none !important; }

.wordmark { font-size:19px; font-weight:700; letter-spacing:-.02em; }
.brand-lockup { display:flex; align-items:center; gap:9px; }
.role-tag { border:1px solid var(--admin-line); border-radius:999px; background:var(--admin-panel); color:var(--admin-deep); padding:3px 9px; font-size:10px; font-weight:700; letter-spacing:.11em; }
.eyebrow, .pane-kicker { margin:0; color:var(--admin-deep); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.mono { font-family:var(--mono); }

.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; border:1px solid transparent; border-radius:10px; padding:8px 13px; font-weight:700; text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, transform .08s, opacity .15s; }
.button:active { transform:translateY(1px); }
.button:disabled { cursor:not-allowed; opacity:.48; }
.button-primary { background:var(--admin-accent); color:#fff; }
.button-primary:hover:not(:disabled) { background:var(--admin-deep); }
.button-secondary { border-color:var(--line); background:var(--paper); color:var(--ink); }
.button-secondary:hover:not(:disabled), .button-quiet:hover:not(:disabled) { border-color:var(--admin-line); background:var(--admin-panel); }
.button-quiet { border-color:transparent; background:transparent; color:var(--ink-2); }
.button-danger-quiet { border-color:transparent; background:transparent; color:var(--danger); }
.button-danger-quiet:hover:not(:disabled) { background:var(--danger-bg); }
.button-block { width:100%; }
.icon-button { display:inline-grid; place-items:center; width:30px; height:30px; flex:none; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink-2); cursor:pointer; }
.icon-button:disabled { opacity:.35; cursor:default; }
.icon-button.danger { border-color:transparent; color:var(--danger); background:transparent; }
.icon-button.danger:hover { background:var(--danger-bg); }

input, select, textarea { width:100%; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); padding:10px 11px; }
textarea { resize:vertical; }
input:hover, select:hover, textarea:hover { border-color:#cfd0d7; }
input:focus, select:focus, textarea:focus { border-color:var(--admin-accent); outline:none; box-shadow:0 0 0 3px var(--admin-panel); }
.readonly { background:var(--soft); color:var(--ink-2); cursor:default; }
label > span, .field-label { display:flex; justify-content:space-between; gap:8px; margin-bottom:5px; color:var(--ink-2); font-size:11px; font-weight:700; }
label > span em, legend em { color:var(--admin-deep); font-size:9px; font-style:normal; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

.login-screen { min-height:100vh; display:grid; place-items:center; padding:32px; background:radial-gradient(circle at 50% 15%, var(--admin-panel), transparent 42%), var(--canvas); }
.login-card { width:min(410px, 100%); border:1px solid var(--line); border-radius:24px; background:var(--admin-surface); padding:32px; box-shadow:var(--shadow); }
.login-card .brand-lockup { margin-bottom:30px; }
.login-card h1 { margin:5px 0 5px; font:700 26px/1.25 var(--serif); }
.login-card .lede { margin:0 0 24px; color:var(--ink-2); }
.login-card form { display:grid; }
.login-card input { margin-bottom:15px; padding:12px 13px; }
.login-note { margin:17px 0 0; color:var(--ink-3); font-size:11px; }
.flash { display:none; margin-top:15px; border-radius:10px; padding:10px 12px; font-size:12px; }
.flash.show { display:block; }
.flash.error { background:var(--danger-bg); color:var(--danger); }
.flash.ok { background:var(--success-bg); color:var(--success); }

#app { min-height:100vh; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; min-height:58px; border-bottom:1px solid var(--line); background:rgba(254,251,252,.96); padding:9px 18px; backdrop-filter:blur(14px); }
.topbar-status { display:flex; align-items:center; gap:7px; margin-left:28px; color:var(--ink-3); font-size:11px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px var(--success-bg); }
.topbar-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.who { color:var(--ink-3); font:11px var(--mono); }
.app-shell { flex:1; display:grid; grid-template-columns:215px minmax(0,1fr); min-height:0; }
.rail { position:sticky; top:58px; height:calc(100vh - 58px); border-right:1px solid var(--line); background:var(--paper); padding:20px 12px; }
.rail-label { margin:0 10px 9px; color:var(--ink-3); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.nav-item { display:flex; align-items:center; gap:10px; width:100%; margin-bottom:5px; border:1px solid transparent; border-radius:12px; background:transparent; padding:10px; color:var(--ink-2); text-align:left; cursor:pointer; }
.nav-item:hover { background:var(--admin-panel); }
.nav-item.active { border-color:var(--admin-line); background:var(--admin-panel); color:var(--ink); }
.nav-icon { display:grid; place-items:center; width:31px; height:31px; flex:none; border-radius:9px; background:var(--soft); color:var(--ink-3); font:600 13px var(--mono); }
.nav-item.active .nav-icon { background:var(--admin-accent); color:#fff; }
.nav-item span:last-child { display:flex; flex-direction:column; }
.nav-item strong { font-size:13px; }
.nav-item small { color:var(--ink-3); font:10px var(--mono); }
.workspace { min-width:0; padding:24px; overflow:auto; outline:none; }

.view-head, .song-toolbar { display:flex; align-items:flex-end; gap:18px; margin-bottom:18px; }
.view-head > div:first-child, .song-toolbar > div:first-child { flex:1; }
.view-head h1, .song-toolbar h1 { margin:3px 0 2px; font:700 25px/1.25 var(--serif); }
.view-head p:not(.eyebrow), .song-toolbar p:not(.eyebrow) { margin:0; color:var(--ink-2); }
.level-picker, .song-picker { width:min(330px, 32vw); }
.panel, .pane { border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 4px 18px rgba(20,20,25,.035); }
.panel-head, .pane-head, .section-title { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.panel-head { border-bottom:1px solid var(--line); padding:18px 20px; }
.panel-head h2, .pane-head h2, .section-title h3, .section-title h4 { margin:0; }
.panel-head p, .pane-head p, .section-title p { margin:3px 0 0; color:var(--ink-3); font-size:11px; }
.formula-chip, .record-code, .skill-code { border-radius:8px; background:var(--soft); color:var(--ink-2); padding:5px 8px; font:10px var(--mono); white-space:nowrap; }

.table-wrap { overflow:auto; }
.target-table { width:100%; border-collapse:collapse; }
.target-table th { background:#fafafc; color:var(--ink-3); font-size:10px; letter-spacing:.08em; text-align:left; text-transform:uppercase; }
.target-table th, .target-table td { border-bottom:1px solid var(--line); padding:13px 18px; }
.target-table tbody tr:last-child td { border-bottom:0; }
.target-table td:first-child { display:flex; align-items:center; gap:10px; }
.target-table .target-input { max-width:160px; }
.dimension-code { display:grid; place-items:center; width:32px; height:27px; border-radius:7px; background:var(--admin-panel); color:var(--admin-deep); font:600 10px var(--mono); }
.live-output { font:500 14px var(--mono); }
.row-error { background:var(--danger-bg); }
.badge { display:inline-flex; align-items:center; width:max-content; margin:2px 4px 2px 0; border:1px solid var(--line); border-radius:999px; padding:3px 7px; color:var(--ink-3); font-size:8px; font-weight:700; letter-spacing:.06em; }
.badge-success { border-color:#c9e6d7; background:var(--success-bg); color:var(--success); }
.badge-warning { border-color:#efdaa8; background:var(--warning-bg); color:var(--warning); }
.badge-error { border-color:#efc7c2; background:var(--danger-bg); color:var(--danger); }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding:15px 20px; }
.form-footer p { margin:0; color:var(--ink-3); font-size:11px; }

.song-toolbar { align-items:center; }
.song-toolbar .song-picker { margin-left:auto; }
.create-popover { position:relative; }
.create-popover > summary { list-style:none; }
.create-popover > summary::-webkit-details-marker { display:none; }
.popover-card { position:absolute; top:calc(100% + 8px); right:0; z-index:30; display:grid; gap:11px; width:320px; border:1px solid var(--admin-line); border-radius:14px; background:var(--admin-surface); padding:16px; box-shadow:var(--shadow); }
.popover-card h3 { margin:0 0 2px; }

.three-pane { display:grid; grid-template-columns:minmax(250px,.82fr) minmax(410px,1.48fr) minmax(290px,1fr); gap:14px; min-width:970px; align-items:start; }
.pane { min-width:0; overflow:hidden; }
.pane-head { border-bottom:1px solid var(--line); padding:15px 16px; }
.pane-head h2 { font:700 18px var(--serif); }
.stack-form { display:grid; gap:12px; padding:16px; }
.stack-form label, .form-grid label, .task-form > label, .skill-card > label { display:block; }
.concept-field { border:1px solid var(--admin-line); border-radius:12px; background:var(--admin-surface); padding:10px; }
.syllabus-section { margin:0 12px 14px; border:1px dashed #cfd0d8; border-radius:12px; background:#fafafd; padding:13px; }
.syllabus-section > p { margin:8px 0; color:var(--ink-2); font-size:11px; }
.phase-note { border-radius:8px; background:var(--soft); padding:9px; color:var(--ink-3); font-size:10px; }
.meta-pane > .button-danger-quiet { margin:0 12px 14px; width:calc(100% - 24px); }

.inline-create { display:grid; gap:7px; border-bottom:1px solid var(--line); background:#fafafd; padding:11px; }
.task-create { grid-template-columns:minmax(130px,1.2fr) minmax(130px,.9fr) minmax(130px,.9fr) auto; }
.skill-create { grid-template-columns:minmax(120px,1fr) auto; }
.inline-create input, .inline-create select, .inline-create .button { min-height:38px; padding:8px 9px; }
.task-list, .skill-list { display:grid; gap:9px; padding:11px; }
.task-card { border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; transition:border-color .15s, opacity .15s, transform .15s; }
.task-card.dragging { opacity:.45; }
.task-card.drag-over { border-color:var(--admin-accent); transform:translateY(3px); }
.task-card.expanded { border-color:var(--admin-line); box-shadow:0 6px 18px rgba(232,109,133,.08); }
.task-summary { display:flex; align-items:stretch; min-height:58px; }
.drag-handle { width:30px; flex:none; border:0; border-right:1px solid var(--line); background:#fafafd; color:var(--ink-3); cursor:grab; writing-mode:vertical-lr; }
.drag-handle:active { cursor:grabbing; }
.task-toggle { display:flex; align-items:center; gap:9px; min-width:0; flex:1; border:0; background:transparent; padding:9px; text-align:left; cursor:pointer; }
.sequence { display:grid; place-items:center; width:27px; height:27px; flex:none; border-radius:8px; background:var(--admin-panel); color:var(--admin-deep); font:600 10px var(--mono); }
.task-title { display:flex; flex:1; min-width:0; flex-direction:column; }
.task-title strong, .task-title small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-title small { color:var(--ink-3); font-size:10px; }
.chevron { color:var(--ink-3); font-size:18px; }
.reorder-buttons { display:flex; flex-direction:column; justify-content:center; gap:2px; padding:4px 5px; border-left:1px solid var(--line); }
.reorder-buttons .icon-button { width:24px; height:22px; border:0; }
.task-detail { border-top:1px solid var(--line); background:#fdfdfd; }
.task-form { display:grid; gap:13px; padding:15px; }
.form-grid { display:grid; gap:10px; }
.form-grid.two { grid-template-columns:1fr 1fr; }
.field-warning { display:block; margin-top:4px; color:var(--warning); font-size:9px; }
.score-panel { display:flex; align-items:center; justify-content:space-between; gap:13px; border:1px solid var(--line); border-radius:11px; background:var(--soft); padding:11px; }
.score-panel.fallback { border-color:#efd9a7; background:var(--warning-bg); }
.score-panel > div { display:flex; min-width:0; flex-direction:column; }
.score-panel small { color:var(--ink-3); font-size:9px; }
.mini-label { color:var(--ink-3); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.toggle { display:flex; align-items:center; gap:8px; cursor:pointer; }
.toggle input { position:absolute; opacity:0; pointer-events:none; }
.toggle > span { position:relative; width:37px; height:21px; flex:none; margin:0; border-radius:999px; background:#c9cad1; transition:.15s; }
.toggle > span::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; transition:.15s; }
.toggle input:checked + span { background:var(--admin-accent); }
.toggle input:checked + span::after { transform:translateX(16px); }
.toggle b { max-width:140px; font-size:10px; line-height:1.3; }
.analytics-strip { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border:1px solid var(--line); border-radius:10px; }
.analytics-strip > div { display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line); padding:9px; }
.analytics-strip > div:last-child { border-right:0; }
.analytics-strip span { color:var(--ink-3); font-size:9px; text-transform:uppercase; }
.analytics-strip strong { margin-top:1px; font:600 16px var(--mono); }
.analytics-strip small { color:var(--ink-3); font-size:8px; }
.analytics-strip .muted { background:var(--soft); }
.task-actions { display:flex; justify-content:space-between; }

.homework-section { border-top:1px solid var(--line); padding:14px 15px 15px; }
.homework-list { display:grid; gap:6px; margin-top:9px; }
.homework-row { display:grid; grid-template-columns:39px minmax(0,1fr) auto; align-items:center; gap:8px; border:1px solid var(--line); border-radius:9px; padding:6px; }
.homework-row img, .homework-placeholder { width:39px; height:39px; flex:none; border-radius:7px; object-fit:cover; }
.homework-placeholder { display:grid; place-items:center; background:var(--soft); color:var(--ink-3); font:9px var(--mono); }
.homework-fields { display:grid; grid-template-columns:1fr .55fr; min-width:0; gap:5px; }
.homework-fields input { min-width:0; padding:6px 7px; font-size:10px; }
.homework-fields small { grid-column:1/-1; color:var(--ink-3); font-size:8px; }
.homework-actions { display:flex; align-items:center; gap:4px; }
.compact { min-height:29px; padding:5px 7px; font-size:9px; }
.homework-form { display:grid; grid-template-columns:1fr .7fr auto auto; gap:6px; margin-top:9px; }
.homework-form input, .homework-form .button, .file-button { min-height:35px; padding:7px 8px; }
.file-button { display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; background:var(--paper); cursor:pointer; }
.file-button input { position:absolute; width:1px; height:1px; opacity:0; }
.file-button span { margin:0; color:var(--ink-2); font-size:10px; }

.skill-card { display:grid; gap:10px; border:1px solid var(--line); border-radius:12px; padding:12px; }
.skill-head { display:flex; align-items:center; justify-content:space-between; }
.skill-code { padding:3px 6px; font-size:8px; }
.skill-card fieldset { min-width:0; margin:0; border:1px solid var(--line); border-radius:9px; padding:8px; }
.skill-card legend { color:var(--ink-2); font-size:10px; font-weight:700; }
.check-list { display:grid; max-height:170px; overflow:auto; }
.check-list label { display:flex; align-items:flex-start; gap:7px; border-radius:6px; padding:5px; cursor:pointer; }
.check-list label:hover { background:var(--admin-panel); }
.check-list input { width:14px; height:14px; flex:none; margin:2px 0 0; accent-color:var(--admin-accent); }
.check-list span { display:block; margin:0; color:var(--ink-2); font-size:10px; font-weight:500; }
.mini-empty { margin:0; color:var(--ink-3); font-size:10px; }
.mini-empty.boxed { border:1px dashed var(--line); border-radius:10px; padding:18px; text-align:center; }

.loading, .empty-state { display:flex; min-height:420px; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.loading { gap:12px; color:var(--ink-3); }
.spinner { width:25px; height:25px; border:3px solid var(--admin-line); border-top-color:var(--admin-accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--admin-panel); color:var(--admin-deep); font:600 18px var(--mono); }
.empty-state h2 { margin:13px 0 4px; font:700 19px var(--serif); }
.empty-state p { max-width:470px; margin:0 0 16px; color:var(--ink-3); }
.error-state .empty-icon { background:var(--danger-bg); color:var(--danger); }
.toast { position:fixed; right:22px; bottom:22px; z-index:100; max-width:420px; border:1px solid #c9e6d7; border-radius:11px; background:var(--success-bg); color:var(--success); padding:11px 14px; box-shadow:var(--shadow); font-size:12px; font-weight:700; opacity:0; transform:translateY(10px); pointer-events:none; transition:.18s; }
.toast.show { opacity:1; transform:none; }
.toast.error { border-color:#efc7c2; background:var(--danger-bg); color:var(--danger); }

@media (max-width:1100px) {
  .app-shell { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .rail { position:sticky; top:58px; z-index:40; display:flex; align-items:center; gap:7px; width:100%; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:8px 12px; }
  .rail-label { display:none; }
  .nav-item { width:auto; min-width:185px; margin:0; padding:7px 10px; }
  .workspace { padding:18px; }
  .three-pane { min-width:960px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}