/* Warm design tokens and component skin. Layout belongs to workbench.css. */
:root {
  --bg: #fff9e7;
  --side: #fffdf7;
  --panel: #fff;
  --ink: #263149;
  --ink2: #49536a;
  --ink3: #686071;
  --line: #f0e1cc;
  --line2: #e7d5bc;
  --fill: #fcf4e7;
  --fill2: #f9e9d5;
  --blue: #a85113;
  --blue-soft: #fff0af;
  --red: #bc3656;
  --red-soft: #fce9ee;
  --amber: #b76a10;
  --amber-soft: #fff3d2;
  --tag-bg: #fff1d7;
  --tag-ink: #8a4a14;
  --brand-action: #ffd21c;
  --brand-hover: #f2be00;
  --brand-selected: #fff0af;
  --brand-title: linear-gradient(100deg, #bd4f0d, #cc285f);
  --sh-card: 0 12px 40px rgba(91, 47, 29, .075), 0 2px 6px rgba(91, 47, 29, .04);
  --sh-pop: 0 18px 60px rgba(91, 47, 29, .12), 0 3px 10px rgba(91, 47, 29, .05);
}
body {
  background: linear-gradient(145deg, var(--bg) 0%, #fffdf9 52%, #fff3ef 100%);
}
.pro-auth-app {
  background: linear-gradient(145deg, var(--bg) 0%, #fffdf9 54%, #fff3ef 100%);
}
.page-title, .pro-auth-title, .pro-auth-brand > :last-child, .ai-hello h1 {
  color: #a83c25;
  background-image: var(--brand-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav a:hover, .nav button:hover, .me:hover, .set-nav button:hover {
  background-color: var(--fill);
}
.nav a.on, .set-nav button.on, .an-scope button.on {
  background-color: var(--brand-selected);
  color: var(--ink);
}
.an-scope button.on small, .an-scope button.on .sub-flag { color: var(--ink2); }
.btn-dark, .pro-auth-shell .btn-dark,
.seg button.on, .chips button.on, .send, .tpl-tabs button.on {
  background: var(--brand-action) !important;
  border-color: var(--brand-action) !important;
  color: var(--ink) !important;
}
.btn-dark:hover, .pro-auth-shell .btn-dark:hover, .send:hover {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: var(--ink) !important;
}
.tabs button.on::after { background-color: #d66d27; }
.chk input { accent-color: #bb5a22; }
.pro-auth-shell .inp:focus {
  border-color: #ba6926;
  box-shadow: 0 0 0 3px #f5be593c;
}
.tag.blue { color: #87420d; }
.scene-svg #gFloor stop:first-child { stop-color: #f4e6ce; }
.scene-svg #gFloor stop:last-child { stop-color: #fff4dc; }
.scene-svg #gWall stop:nth-child(1) { stop-color: #fffaf0; }
.scene-svg #gWall stop:nth-child(2) { stop-color: #f9ebd4; }
.scene-svg #gWall stop:nth-child(3) { stop-color: #f3e3ca; }
.scene-svg #gDeskTop stop:last-child { stop-color: #fff6e4; }
.scene-svg #gDeskFace stop:first-child { stop-color: #eddfcb; }
.scene-svg #gDeskFace stop:last-child { stop-color: #e0cfb8; }
.scene-svg #gChair stop:last-child { stop-color: #f6e6d2; }
.scene-svg #gChalk stop:first-child { stop-color: #59464e; }
.scene-svg #gChalk stop:last-child { stop-color: #443339; }
.scene-svg #gScreen stop:first-child { stop-color: #ffe58a; }
.scene-svg #gScreen stop:last-child { stop-color: #ffd16b; }
.scene-svg .screen text { fill: #573124; }

/* Shared controls: one accent, visible boundaries and consistent focus. */
:root {
  color-scheme: light;
  --focus: #a85113;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}
body { text-rendering: optimizeLegibility; }
::selection { background: #ffe68a; color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.side { background: var(--side); }
.brand-name { letter-spacing: -.25px; }
.brand-sub { color: var(--ink2); }
.brand-mark { border-radius: 9px; }
.nav a.on { box-shadow: inset 3px 0 #efb71a; }
.nav a, .nav button, .set-nav button { transition: background-color 120ms ease; }
.nav a.on, .nav a[aria-current="page"] { font-weight: 650; }
.search input { border: 1px solid transparent; }
.search input:focus { box-shadow: 0 0 0 2px #f2c96c; }
.panel, .tbl-wrap, .pro-paper, .set-sec {
  box-shadow: 0 0 0 1px var(--line), 0 3px 12px #60371e04;
}
.btn { font-weight: 550; transition: background-color 140ms ease, box-shadow 140ms ease, transform 120ms var(--ease-out); }
.btn-dark { box-shadow: 0 3px 10px #e9ad151a; }
.btn-light { background: #fffefa; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:focus-visible, .seg button:focus-visible, .chips button:focus-visible { outline-offset: 3px; }
.btn[disabled] { cursor: not-allowed; }
.inp, .ta, .sel { box-shadow: inset 0 0 0 1px #e7d5bc; background-color: #fffaf0; }
.inp:hover, .ta:hover, .sel:hover { box-shadow: inset 0 0 0 1px #c8a572; }
.inp:focus, .ta:focus, .sel:focus { background-color: #fff; box-shadow: inset 0 0 0 1.5px #ad681e, 0 0 0 3px #ffd21c26; }
input::placeholder, textarea::placeholder { color: #7b7480; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: #a95b13; }
select option { background: #fffdf7; color: var(--ink); }
input[type="file"] { max-width: 100%; font-size: 13px; }
input::file-selector-button { border: 1px solid var(--line2); background: #fff1bc; padding: 7px 12px; margin-right: 10px; border-radius: 8px; color: var(--ink); cursor: pointer; }
.field .hint, .panel-sub, .page-desc { line-height: 1.65; }
.seg.light button.on { background: #fff0af; box-shadow: none; }
.tag.blue, .sub-flag, .an-ov th small.me { color: #87420d; background: #fff0c0; }
.tag.green { color: #705214; background: #fff4d5; }
.tag.gray { color: var(--ink2); background: var(--fill); }
.tag.red { color: #9f2d4b; background: var(--red-soft); }
.tag.amber { color: #92550d; }
.an-card.on { background: var(--brand-selected); color: var(--ink); box-shadow: inset 0 0 0 1px #e8c756; }
.an-card.on span { color: var(--ink2); }
.an-card.on em.up { color: #86520c; }
.an-card.on em.dn { color: #a63150; }
.exam-item.on, .gender-pick button.on, .w-mode button.on { box-shadow: 0 0 0 2px #d99b25; }
.gender-pick button.on, .w-mode button.on { background: #fff9e7; }
.w-avatars button.on .circle { box-shadow: 0 0 0 2.5px #d99b25, 0 10px 30px #8f4b1310; }
.prog i, .mini-bar i { background-color: #e5a625; }
.tbl th { background: #fffdf7; font-weight: 600; }
.tbl td { border-bottom-color: #f4eadb; }
.tbl tbody tr:hover td { background: #fff9e8; }
.tbl tr:focus-within td { background-color: #fff9e8; }
.tbl tr:focus-within .ops { opacity: 1; }
.tbl .ops:focus-within { opacity: 1; }
.paste-hint, .pro-notice { background: #fff3d8; }
.pro-error { color: #9f2d4b; background: #fff1f2; border-color: #f0bac7; }
.pro-loading { min-height: 180px; }
.pro-loading::before { content: ""; display: block; width: 24px; height: 24px; border: 3px solid #f4e2b2; border-top-color: #ac6c19; border-radius: 50%; margin: 0 auto 14px; animation: workbench-spin .7s linear infinite; }
.pro-account-stats strong { letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.pro-account-stats .panel:first-child { background: linear-gradient(135deg, #fff5c6, #fffdf7); }
.pro-auth-shell .pro-login { border: 1px solid var(--line); box-shadow: 0 18px 50px #b6851b0a; }
.pro-auth-shell .pro-tabs .btn, .pro-auth-shell .pro-wide { height: 40px; }
.pro-auth-shell .inp { height: 43px; }
.pro-auth-title { letter-spacing: -.3px; }
.pro-support-contact { padding: 8px 0; }
.pro-qr { border-color: var(--line2); }
.pro-model-card { border-bottom-color: var(--line); }
.pro-model-row { gap: 8px; }
.pro-model-tags { flex-wrap: wrap; justify-content: flex-end; }
.modal { border: 1px solid var(--line); animation-duration: 200ms; animation-timing-function: var(--ease-out); }
.modal-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.modal-body { padding-top: 18px; }
.modal-foot { flex-wrap: wrap; background: #fffdf9; border-radius: 0 0 18px 18px; }
.modal-x { width: 32px; height: 32px; color: var(--ink2); flex-shrink: 0; }
.mask { background: #30283830; }
.drawer { background: #fffaf0; animation-duration: 240ms; animation-timing-function: var(--ease-drawer); }
.search-pop, .pop { border: 1px solid var(--line); }
.search-pop button.on { background: #fff0af; }
.toast { border-radius: 12px; box-shadow: var(--sh-pop); }
.tip { background: #302d3d; color: #fff9ed; }
.tip .tk { color: #e4d8ef; }
.mini-item:hover, .todo:hover, .lsn:hover { background: #fff0d9; }
.todo-add .inp { background: #fffaf0; }
.tabs button.on::after { height: 3px; }
.rail-close { display: none; }
.scroll, .page, .modal-body, .drawer-body, .tbl-wrap, .book-wrap { scrollbar-color: #dbbf8f transparent; scrollbar-width: thin; }
.rail::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background: #dbbf8f; }
.scene-svg .lbl { fill: var(--ink); stroke: #fff9e7; }
.scene-svg .zone-lbl { fill: #806f58; }
.seat:hover .hit { fill: #ffd21c20; }
.solid-stick-student .body { transform-origin: 0 20px; }
.solid-stick-avatar { flex-shrink: 0; }
#scoreInputNotice { border-left: 3px solid var(--red); }
.overflow-hint { font-size: 12px; color: var(--ink2); margin: 7px 0; }
.scroll-region { scrollbar-width: thin; scrollbar-color: #d4b578 #fff9e7; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 130; padding: 8px 14px; background: #ffd21c; color: var(--ink); border-radius: 8px; }
.skip-link:focus { top: 12px; }
@keyframes workbench-spin { to { transform: rotate(360deg); } }
@media (hover: none) { .tbl .ops, .todo .x, .tl-item .del { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pro-loading::before { animation: none; border-top-color: #ac6c19; } }
html[data-input="keyboard"] .modal, html[data-input="keyboard"] .drawer,
html[data-input="keyboard"] .mask, html[data-input="keyboard"] .pop { animation: none; }
html[data-motion="off"] *, html[data-motion="off"] *::before,
html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }