/* Academy shared visual system. Loaded last; feature styles use these tokens. */
:root {
  color-scheme: dark;
  --academy-bg: #091320;
  --academy-surface: #111f30;
  --academy-raised: #182a3d;
  --academy-input: #0c1928;
  --academy-line: #2b4056;
  --academy-control: #647d94;
  --academy-text: #e8f0f8;
  --academy-muted: #a4b7cb;
  --academy-accent: #62dfba;
  --academy-accent-ink: #082b20;
  --academy-focus: #7ac8ff;
  --academy-success: #7be0ad;
  --academy-success-bg: #17392e;
  --academy-warning: #f5d18b;
  --academy-warning-bg: #3b3020;
  --academy-danger: #ff9a9f;
  --academy-danger-bg: #3f2230;
  --academy-info: #9bc7ff;
  --academy-info-bg: #1a3150;
  --ink: var(--academy-text);
  --muted: var(--academy-muted);
  --line: var(--academy-line);
  --blue: var(--academy-accent);
  --green: var(--academy-success);
  --amber: var(--academy-warning);
  --bg: var(--academy-bg);
  --radius: 16px;
}

body {
  color: var(--academy-text);
  background: radial-gradient(ellipse at 85% 0, #17354750, transparent 50vh), var(--academy-bg);
  -webkit-font-smoothing: antialiased;
}
::selection { background: #2a665e; color: #f3fff9; }
* { scrollbar-color: #4b647b #101d2b; scrollbar-width: thin; }
a { color: var(--academy-accent); }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
h1, h2, h3, h4 { color: var(--academy-text); }
.muted, .small.muted, .help, .topic, .problem-code, .problem-summary,
.file-description, .stat-label, .stat small, .table-foot, footer { color: var(--academy-muted); }
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--academy-focus);
  outline-offset: 3px;
}
button { transition: background-color .12s, border-color .12s; }
button:disabled { cursor: not-allowed; }
.primary, .secondary, .danger-button { min-height: 44px; border-radius: 10px; }
.primary {
  background: var(--academy-accent);
  color: var(--academy-accent-ink);
  border-color: var(--academy-accent);
  box-shadow: 0 3px 14px #0002;
}
.primary:hover { background: #8becce; border-color: #8becce; text-decoration: none; }
.secondary {
  background: var(--academy-raised);
  color: var(--academy-text);
  border-color: var(--academy-control);
}
.secondary:hover { background: #21384c; border-color: #5a7c91; text-decoration: none; }
.inline-button { color: var(--academy-accent); min-height: 44px; }
.icon-button { color: var(--academy-muted); min-width: 44px; min-height: 44px; border-radius: 10px; }
.icon-button:hover { background: var(--academy-raised); color: var(--academy-text); }
.danger-button { background: var(--academy-danger-bg); color: var(--academy-danger); border-color: #98515e; }
.danger-button:hover { background: #59303c; }
.error { color: var(--academy-danger); }
input, select, textarea {
  background: var(--academy-input);
  color: var(--academy-text);
  border-color: var(--academy-control);
  border-radius: 10px;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { min-height: 44px; }
input::placeholder, textarea::placeholder { color: #92a8be; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--academy-accent); }
input[type=checkbox], input[type=radio] { accent-color: var(--academy-accent); }
input:disabled, select:disabled, textarea:disabled { color: var(--academy-muted); }
option { color: var(--academy-text); background: var(--academy-input); }

/* One application shell, with the same surface and control hierarchy everywhere. */
.sidebar { background: #0b1827; border-color: var(--academy-line); }
.sidebar .brand { color: var(--academy-text); }
.sidebar .brand small { color: var(--academy-muted); font-size: 14px; }
.login-story .brand small { font-size: 14px; }
.sidebar .brand { font-size: 34px; }
.sidebar .brand > span { font-size: 17px; }
.nav-caption { color: var(--academy-muted); }
.sidebar nav a { color: var(--academy-muted); border: 1px solid transparent; border-radius: 10px; }
.sidebar nav a:hover { background: var(--academy-raised); color: var(--academy-text); text-decoration: none; }
.sidebar nav a.active {
  color: #a1f1d8;
  background: #15352f;
  border-color: #2f6457;
  box-shadow: inset 3px 0 var(--academy-accent);
}
.sidebar-bottom { border-color: var(--academy-line); }
.avatar { background: var(--academy-raised); color: var(--academy-accent); }
.topbar { background: #0e1b2a; color: var(--academy-muted); border-color: var(--academy-line); }
.live { color: var(--academy-accent); }
.live i { background: var(--academy-accent); }
.page-heading { margin-bottom: 26px; }
.page-heading h1 { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.45; margin-bottom: 8px; }
.page-heading p { max-width: 70ch; color: var(--academy-muted); }
.panel, .stat, .student-card, .student-score {
  background: var(--academy-surface);
  border-color: var(--academy-line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px #0000000d;
}
.panel-head { background: #142436; border-color: var(--academy-line); }
.panel h2 { color: var(--academy-text); }
.filters { background: var(--academy-surface); }
.problem-layout > *, .teacher-grid > *, .profile-grid > * { min-width: 0; }
#student-overview .filters { grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(140px, 1fr)); }
.assignments { background: #132f32; border-color: #2c5b52; }
.assignment a { background: #1b443b; color: #acedd8; border: 1px solid #38715f; padding: 5px 10px; }
.pill { background: var(--academy-raised); color: var(--academy-muted); }
.pill.green, .status-icon.done { background: var(--academy-success-bg); color: var(--academy-success); }
.pill.amber, .restricted { background: var(--academy-warning-bg); color: var(--academy-warning); }
.pill.blue { background: var(--academy-info-bg); color: var(--academy-info); }
.restricted { border: 1px solid #78613c; }
.status-icon { background: var(--academy-raised); color: var(--academy-muted); }
.bookmark { color: var(--academy-muted); min-width: 40px; min-height: 40px; }
.bookmark.on { color: var(--academy-warning); }

th { background: #152638; color: var(--academy-muted); border-color: var(--academy-line); }
td { border-color: #24384d; }
tbody tr:hover { background: #182e42; }
.problem-title { color: var(--academy-text); }
.problem-title:hover { color: var(--academy-accent); }
.score-label strong { color: var(--academy-info); }
.score-label > span { color: var(--academy-muted); }
.score-block.complete strong { color: var(--academy-success); }
.score-track, .progressbar { background: #2a3d50; }
.progressbar > div { background: #4dbd98; }
.progress-topic, .account-setting, .account-table tr { border-color: var(--academy-line); }
.account-table td::before { color: var(--academy-muted); }
.file-picker { background: var(--academy-input); border-color: #58728a; border-radius: 12px; }
.file-picker.invalid { border-color: var(--academy-danger); }
.file-picker.invalid .file-description { color: var(--academy-danger); }
.file-input:focus-visible + .file-button { outline-color: var(--academy-focus); }
.file-clear { color: var(--academy-accent); }
.statement-frame { background: var(--academy-input); color-scheme: light; }
.code-editor { background: var(--academy-input); color: var(--academy-text); }
.source-display { background: var(--academy-input); color: var(--academy-text); font-size: 14px; border: 1px solid var(--academy-line); }
dialog { background: var(--academy-surface); color: var(--academy-text); border-color: var(--academy-line); box-shadow: 0 22px 80px #0008; }
dialog::backdrop { background: #030a15b8; backdrop-filter: blur(3px); }
.account-dialog .dialog-head { padding-bottom: 14px; border-bottom: 1px solid var(--academy-line); }
.account-dialog ul { background: var(--academy-input); border: 1px solid var(--academy-line); border-radius: 10px; padding: 14px 14px 14px 34px; }
.account-dialog li + li { margin-top: 10px; }
.account-dialog small { display: block; color: var(--academy-muted); font-size: 14px; margin-top: 8px; }
.toast { background: #20394c; border: 1px solid #56758c; color: var(--academy-text); box-shadow: 0 10px 36px #0005; }
footer { border-color: var(--academy-line); }

/* Login belongs to the application, using its same palette and native controls. */
.login { background: var(--academy-bg); }
.login-story {
  border-right: 1px solid var(--academy-line);
  background: radial-gradient(ellipse at 25% 15%, #23635555, transparent 55%), linear-gradient(145deg, #142a3b, #0b1827);
}
.login-story .brand { color: var(--academy-text); }
.login-story h1 { color: var(--academy-text); }
.login-story p { color: #b8cbda; }
.login-story .dot { color: var(--academy-accent); }
.login-form { max-width: 500px; }
.login-status { color: var(--academy-success); }
.login-foot { color: var(--academy-muted); }

@media (max-width: 700px) {
  .sidebar { box-shadow: 14px 0 45px #0007; }
  .sidebar:not(.open) { box-shadow: none; }
  .sidebar .brand > span { font-size: 17px; }
  .login-story { border-right: 0; border-bottom: 1px solid var(--academy-line); }
  .login-form { padding-top: 28px; padding-bottom: 32px; }
  .topbar { gap: 8px; }
  .page-heading p { font-size: 14px; }
  #student-overview .filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .account-table td:nth-child(3)::before { content: 'สถานะ: '; color: var(--academy-muted); }
  .account-table td:nth-child(4)::before { content: 'วันหมดสิทธิ์: '; color: var(--academy-muted); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.back{min-height:44px;display:inline-flex;align-items:center}