:root {
    color-scheme: light;
    --page-bg: #F3F4F6;
    --surface: #FFFFFF;
    --surface-subtle: #F8F9FB;
    --text-primary: #253248;
    --text-secondary: #596579;
    --line: #D9DFE7;
    --muted-decor: #99A1AF;
    --accent: #0065FF;
    --accent-soft: #E9F1FF;
    --brand-blue: #0065FF;
    --positive: #416B56;
    --positive-soft: #EAF3EC;
    --danger-text: #B63245;
    --danger-bg: #FFF0F0;
    --navy: #0F172B;
    --blue: var(--accent);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --border: var(--line);
    --bg: var(--page-bg);
    --green: var(--positive);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #0F172B;
    --surface: #182238;
    --surface-subtle: #1D2941;
    --text-primary: #CAD5E2;
    --text-secondary: #A5B3C7;
    --line: #344158;
    --muted-decor: #77869D;
    --accent: #8CB8FF;
    --accent-soft: #213755;
    --positive: #A0C5AD;
    --positive-soft: #223B32;
    --danger-text: #FFA7B2;
    --danger-bg: #432733;
}
body { background: var(--page-bg); color: var(--text-primary); }
button, input, select, textarea { background: var(--surface); color: var(--text-primary); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: .85; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.primary { background: var(--brand-blue); border-color: var(--brand-blue); color: white; }
.success { background: #416B56; border-color: #416B56; color: white; }
.danger { color: var(--danger-text); }
.brand-icon { background: var(--brand-blue); border-radius: 6px; }
.theme-toggle, [data-theme-toggle] { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 8px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text-secondary); cursor: pointer; }
[data-theme-toggle] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
[data-theme-toggle]:hover { background: var(--surface-subtle); color: var(--text-primary); }
.topbar, .panel, .stat, .meal, .auth-card, .guide, dialog { background: var(--surface); border-color: var(--line); color: var(--text-primary); }
.panel, .stat, .meal { border-radius: 7px; }
.category-tabs button.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.add { background: var(--brand-blue); color: white; border-radius: 5px; }
.sidebar { background: #0F172B; color: #CAD5E2; }
.sidebar .logo, .sidebar .portal { color: #CAD5E2; }
.nav-item.active { background: var(--brand-blue); color: white; box-shadow: none; }
.sidebar-bottom a, .sidebar-bottom > button { color: #CAD5E2; }
.topbar { height: 68px; }
.avatar { background: var(--accent-soft); color: var(--accent); border-color: var(--surface); }
.stat-icon, .info-box { background: var(--accent-soft); color: var(--accent); border-color: var(--line); }
.info-box p { color: inherit; }
.payment-confirmed { background: var(--positive-soft); color: var(--positive); }
th, .order-summary { background: var(--surface-subtle); }
td, th { border-color: var(--line); }
.badge { background: var(--surface-subtle); color: var(--text-secondary); }
.error { background: var(--danger-bg); color: var(--danger-text); }
.chart { background: repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--line) 40px); }
.auth-card { box-shadow: 0 4px 18px #0f172b0b; border: 1px solid var(--line); border-radius: 8px; }
.student-auth-page .auth-layout { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 100vh; min-height: 100dvh; max-width: none; padding: 32px 18px; }
.student-auth-page .auth-card { margin: 0; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-primary); }
.auth-brand .brand-icon { width: 32px; height: 32px; font-size: 23px; }
.auth-back-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.auth-back-menu { color: var(--text-secondary); font-size: 13px; }
:root[data-theme="dark"] .help-card { background: var(--surface); }
:root[data-theme="dark"] .badge.New { background: #213755; color: #8CB8FF; }
:root[data-theme="dark"] .badge.Preparing { background: #443822; color: #E4C287; }
:root[data-theme="dark"] .badge.Ready, :root[data-theme="dark"] .badge.Completed, :root[data-theme="dark"] .badge.Paid { background: var(--positive-soft); color: var(--positive); }
:root[data-theme="dark"] .badge.Cancelled, :root[data-theme="dark"] .badge.Expired { background: var(--danger-bg); color: var(--danger-text); }
:root[data-theme="dark"] .stat:nth-child(n) .stat-icon { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .auth-intro .intro-features { color: var(--text-secondary); }
@media(max-width:680px) {
    .topbar { height: 64px; }
    .topbar-right { gap: 8px; }
    .topbar .avatar { display: none; }
    .topbar [data-theme-toggle] { width: 32px; height: 32px; padding: 6px; }
}
@media print {
    :root[data-theme] { --surface: #fff; --page-bg: #fff; --text-primary: #182238; --text-secondary: #596579; --line: #D9DFE7; --accent-soft: #E9F1FF; --accent: #0065FF; color-scheme: light; }
    [data-theme-toggle] { display: none !important; }
}

.cafeteria-language-float{position:fixed;z-index:80;right:16px;bottom:15px;background:var(--surface);border:1px solid var(--line);padding:8px 10px;box-shadow:0 3px 16px #0f172b1c;border-radius:9px;display:flex;align-items:center;gap:8px;font-size:12px}.cafeteria-language-float select{border:1px solid var(--line);border-radius:5px;color:var(--text-primary);background:var(--surface);padding:6px;max-width:125px}@media(max-width:600px){.cafeteria-language-float{right:8px;bottom:8px;padding:5px}.cafeteria-language-float label span{display:none}.cafeteria-language-float select{max-width:100px;font-size:11px}}

/* Consistent graphical brand mark. */
.sidebar .logo .ribbon-logo{display:block;max-width:165px;width:100%;height:72px;object-fit:contain;object-position:left center}.auth-brand .ribbon-logo{display:block;width:140px;height:65px;object-fit:contain;object-position:left center}.sidebar .logo{min-height:79px}.sidebar .logo img{flex-shrink:1}@media(max-width:760px){.sidebar .logo .ribbon-logo{max-width:115px;height:56px}.auth-brand .ribbon-logo{width:110px;height:52px}}