:root {
    --ui-bg: #F6F8FC;
    --ui-surface: #FFFFFF;
    --ui-sidebar: #0B1930;
    --ui-sidebar-end: #102442;
    --ui-primary: #2563EB;
    --ui-primary-strong: #1463F3;
    --ui-primary-soft: #EAF2FF;
    --ui-text: #172033;
    --ui-muted: #64748B;
    --ui-border: #E2E8F0;
    --ui-success: #22C55E;
    --ui-success-soft: #DCFCE7;
    --ui-danger: #EF4444;
    --ui-warning: #F59E0B;
    --ui-radius: 12px;
    --ui-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 6px 20px rgba(15, 23, 42, .035);
}

html { overflow-y:scroll; background:var(--ui-bg); scrollbar-gutter:stable; }
body, button, input, select, textarea { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; }
body { color: var(--ui-text); background: var(--ui-bg); font-size: 14px; line-height: 1.5; }
* { scrollbar-color:#94A3B8 #E7ECF3; scrollbar-width:auto; }
*::-webkit-scrollbar { width:12px; height:12px; }
*::-webkit-scrollbar-track { background:#E7ECF3; border-radius:999px; }
*::-webkit-scrollbar-thumb { min-height:44px; background:#94A3B8; border:3px solid #E7ECF3; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover { background:#64748B; }
*::-webkit-scrollbar-corner { background:#E7ECF3; }
*:focus-visible { outline: 3px solid rgba(37, 99, 235, .18) !important; outline-offset: 2px; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ui-page-out .12s ease both; }
::view-transition-new(root) { animation: ui-page-in .18s ease both; }
@keyframes ui-page-out { to { opacity: .72; } }
@keyframes ui-page-in { from { opacity: .72; transform: translateY(3px); } }

/* Application shell */
.app-frame { min-height: 100vh; background: var(--ui-bg); }
#menu-card { width: 240px; flex: 0 0 240px; }
#menu-card > div { position: sticky; top: 0; background: linear-gradient(180deg, var(--ui-sidebar), var(--ui-sidebar-end)); color: #fff; overflow: hidden; }
.sidebar-header { min-height: 82px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: none; }
.sidebar-header > .flex-1 { padding: 18px 16px !important; display: flex; align-items: center; }
.default-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.default-brand-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--ui-primary-strong); box-shadow: 0 7px 18px rgba(20,99,243,.28); }
.default-brand b { display: block; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.default-brand small { display: block; margin-top: 2px; color: #AFC0D8; font-size: 11px; }
.sidebar-content { min-height: 0; display: flex; flex: 1; flex-direction: column; border: 0 !important; overflow-y: auto; }
.sidebar-nav { display: block !important; flex: 0 0 auto !important; padding: 12px 10px; }
.sidebar-nav > a { width: 100%; height: auto !important; min-height: 43px !important; max-height: 48px !important; flex: 0 0 auto !important; align-self: auto !important; display: flex; align-items: center; margin: 2px 0; padding: 10px 12px !important; color: #CBD5E1 !important; border: 1px solid transparent !important; border-radius: 9px; font-size: 13px; font-weight: 500; line-height: 20px !important; text-decoration: none !important; transition: background .16s ease, color .16s ease, transform .16s ease; }
.sidebar-nav > a > div { width: 8px !important; flex: 0 0 8px !important; overflow: hidden; }
.sidebar-nav > a:hover { color: #fff !important; background: rgba(59,130,246,.16) !important; transform: translateX(1px); }
.sidebar-nav > a.is-active { color: #fff !important; background: rgba(37,99,235,.30) !important; border-color: rgba(96,165,250,.18) !important; }
.sidebar-nav > a.is-active .menu-icon { color: #fff; }
.sidebar-nav .menu-icon { color: #AFC0D8; }
.sidebar-footer { display:block!important; width:100%; height:auto!important; min-height:0!important; max-height:none!important; flex:0 0 auto!important; margin-top:auto; border-top:1px solid rgba(255,255,255,.08); padding:8px 10px 10px; }
.sidebar-footer > div { width:100%; height:auto!important; min-height:0!important; max-height:58px!important; flex:0 0 auto!important; border:0!important; border-radius:9px; color:#D7E2F1!important; padding:9px 10px!important; }
.sidebar-user-row { display:flex!important; align-items:center; gap:9px; }
.sidebar-user-avatar { width:32px; height:32px; flex:0 0 32px; display:flex; align-items:center; justify-content:center; color:#fff; background:#254B80; border-radius:50%; font-size:10px; font-weight:800; }
.sidebar-user-copy { min-width:0; flex:1; }
.sidebar-user-copy b { display:block; overflow:hidden; color:#F8FAFC!important; font-size:11px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user-copy small { display:block; margin-top:2px; color:#9FB0C8; font-size:9px; }
.sidebar-footer form { flex:0 0 auto; }
.sidebar-footer button.sidebar-logout { width:30px; min-width:30px; height:30px!important; min-height:30px!important; display:flex; align-items:center; justify-content:center; padding:0!important; color:#FDA4AF!important; border:0!important; background:transparent!important; box-shadow:none!important; }
.sidebar-footer button.sidebar-logout:hover { color:#FECACA!important; background:rgba(239,68,68,.12)!important; }
.sidebar-footer > .sidebar-language-switch { max-height:none!important; min-height:38px!important; display:flex!important; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px!important; margin-bottom:4px; background:rgba(255,255,255,.035); }
.sidebar-language-label { color:#8EA4C4; font-size:9px; font-weight:700; line-height:1.15; letter-spacing:.04em; text-transform:uppercase; }
.sidebar-language-segment { display:flex; flex:0 0 auto; gap:2px; padding:2px; border:1px solid rgba(148,163,184,.2); border-radius:8px; background:rgba(4,15,31,.32); }
.sidebar-language-segment a { min-width:36px; padding:4px 7px; border-radius:6px; color:#B8C8DD; font-size:10px; font-weight:800; text-align:center; text-decoration:none; line-height:1.1; }
.sidebar-language-segment a:hover { color:#fff; background:rgba(37,99,235,.2); }
.sidebar-language-segment a.is-active { color:#fff; background:#2563EB; box-shadow:0 2px 7px rgba(37,99,235,.25); }
.mobile-appbar { height: 58px; align-items: center; background: var(--ui-sidebar); color: #fff; }
.app-main { min-width: 0; min-height: 100vh; background: var(--ui-bg) !important; }
.app-content { max-width: 1680px; margin: 0 auto; padding: 28px 30px !important; }

/* Typography and links */
.title, .app-content > div:first-child .text-xl.font-bold { color: var(--ui-text); font-size: 24px !important; line-height: 1.25; font-weight: 750 !important; letter-spacing: -.025em; }
.app-content h1, .app-content h2, .app-content h3 { color: var(--ui-text); letter-spacing: -.015em; }
.app-content .text-gray-600, .app-content .text-gray-500, .app-content .text-gray-400 { color: var(--ui-muted) !important; }
.app-content a:not(.btn):not(.month-day):not(.booking-row) { color: var(--ui-primary); text-decoration: none; }
.app-content a:not(.btn):hover { color: #1D4ED8; }
.breadcrumbs { margin: 0 0 18px !important; color: var(--ui-muted); font-size: 13px; }
.breadcrumbs-item { color: var(--ui-primary) !important; text-decoration: none !important; }

/* Cards and sections */
.card { padding: 20px !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-border); border-radius: var(--ui-radius) !important; box-shadow: var(--ui-shadow) !important; }
.app-content > .overflow-auto, .app-content > .shadow-md, .app-content > div > .overflow-auto { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow) !important; }
.app-content hr { border-color: var(--ui-border); }

/* Buttons */
.btn, .app-content button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border: 1px solid var(--ui-border); border-radius: 9px !important; background: #fff; color: #334155; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; font-size: 13px; font-weight: 650; line-height: 1.25; text-decoration: none !important; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .08s ease; }
.btn:hover, .app-content button:hover { border-color: #CBD5E1; background: #F8FAFC; }
.btn:active, .app-content button:active { transform: translateY(1px); }
.btn-sm, .btn-small { min-height: 32px !important; padding: 6px 10px !important; border-radius: 7px !important; font-size: 12px !important; }
.btn-primary { color: #fff !important; background: var(--ui-primary-strong) !important; border-color: var(--ui-primary-strong) !important; box-shadow: 0 4px 11px rgba(20,99,243,.18) !important; }
.btn-primary:hover { background: #0E55D8 !important; border-color: #0E55D8 !important; }
.btn-success { color: #fff !important; background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }
.btn-success:hover { background: #1D4ED8 !important; border-color: #1D4ED8 !important; }
.btn-danger { color: var(--ui-danger) !important; background: #fff !important; border-color: #FECACA !important; box-shadow: none !important; }
.btn-danger:hover { background: #FEF2F2 !important; border-color: #FCA5A5 !important; }
button[disabled], .btn[disabled] { color: #94A3B8 !important; background: #F1F5F9 !important; border-color: var(--ui-border) !important; cursor: not-allowed; box-shadow: none !important; }

/* Forms */
label, .label { display: inline-block; margin-bottom: 6px; color: #475569 !important; font-size: 12px !important; font-weight: 650 !important; }
input, select, textarea, .input { min-height: 44px; padding: 9px 12px !important; color: var(--ui-text); background: #fff !important; border: 1px solid #CBD5E1 !important; border-radius: 9px !important; box-shadow: 0 1px 2px rgba(15,23,42,.025); outline: none !important; transition: border-color .15s ease, box-shadow .15s ease; }
textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #94A3B8; }
input:hover, select:hover, textarea:hover { border-color: #94A3B8 !important; }
input:focus, select:focus, textarea:focus, .input:focus { border-color: var(--ui-primary) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important; }
input[readonly], input[disabled], select[disabled], textarea[readonly] { color: #64748B !important; background: #F1F5F9 !important; border-color: var(--ui-border) !important; }
input[type="checkbox"], input[type="radio"] { min-height: 18px; width: 18px; padding: 0 !important; accent-color: var(--ui-primary); }
.text-red-500, .text-red-600 { color: var(--ui-danger) !important; }

/* Tables */
table { width: 100%; background: #fff !important; border: 0 !important; border-collapse: separate; border-spacing: 0; box-shadow: none !important; }
table thead { background: #F8FAFC; }
table th { height: 46px; padding: 10px 13px !important; color: #526176; border-width: 0 0 1px !important; border-color: var(--ui-border) !important; font-size: 11px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; white-space: nowrap; }
table td { min-height: 48px; padding: 11px 13px !important; color: #334155; border-width: 0 0 1px !important; border-color: #EDF1F6 !important; font-size: 13px !important; vertical-align: middle; }
table tbody tr { transition: background .13s ease; }
table tbody tr:hover { background: #F8FBFF !important; }
table tbody tr:last-child td { border-bottom: 0 !important; }
table td.text-gray-300 { color: #94A3B8 !important; }
.table-sm td, .table-sm th, .table-2sm td, .table-2sm th { padding-left: 12px !important; padding-right: 12px !important; }

/* Alerts, badges and pagination */
.alert { padding: 12px 16px !important; border: 1px solid; border-radius: 10px; box-shadow: none; font-size: 13px; }
.alert-success { color: #166534; background: var(--ui-success-soft); border-color: #BBF7D0; }
.alert-danger { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; }
nav[role="navigation"] a, nav[role="navigation"] span { text-decoration: none !important; }
nav[role="navigation"] span[aria-current="page"] span { color: #fff !important; background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }

/* Dashboard welcome */
.app-content > .w-full.mt-40 { max-width: 760px; margin: 160px auto 0 !important; padding: 48px; background: #fff; border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow); font-size: 26px !important; }

/* Authentication */
.auth-shell { min-height: 100vh; background: var(--ui-bg); }
.auth-main { overflow: hidden; background: radial-gradient(circle at 80% 20%, rgba(37,99,235,.08), transparent 28%), var(--ui-bg) !important; }
.auth-backdrop { height: 310px; background: linear-gradient(135deg, var(--ui-sidebar), #12366B); }
.auth-backdrop::after { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 42px 42px; }
.auth-wrap { top: 74px !important; }
.auth-card { max-width: 510px; margin-left: auto !important; margin-right: auto !important; padding: 36px 40px !important; border: 1px solid var(--ui-border) !important; border-radius: 14px !important; box-shadow: 0 20px 55px rgba(6,20,43,.16) !important; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.auth-brand-mark { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--ui-primary-strong); border-radius: 11px; }
.auth-brand-mark svg { width: 23px; height: 23px; }
.auth-brand-name { color: var(--ui-text); font-size: 18px; font-weight: 800; }
.auth-brand-subtitle { color: var(--ui-muted); font-size: 11px; }
.auth-heading { margin-bottom: 5px; color: var(--ui-text); font-size: 23px; font-weight: 750; letter-spacing: -.025em; }
.auth-description { margin-bottom: 24px; color: var(--ui-muted); font-size: 13px; }
.auth-card .btn-primary { height: 44px; margin-top: 3px; }

/* Exam workspace keeps its focused layout while sharing the same palette. */
.test-shell > .md\:flex > main { background: var(--ui-bg) !important; }
.test-shell #menu-card > div { background: linear-gradient(180deg, var(--ui-sidebar), var(--ui-sidebar-end)) !important; border-color: rgba(255,255,255,.08) !important; }

/* Student launch cards */
.student-page-heading { display:flex; align-items:flex-start; justify-content:space-between; margin:0 0 22px; }
.student-page-heading h1 { margin:0; color:var(--ui-text); font-size:24px; line-height:1.25; font-weight:780; letter-spacing:-.025em; }
.student-page-heading p { margin:6px 0 0; color:var(--ui-muted); font-size:13px; }
.student-test-grid { max-width:1180px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.student-test-card { min-width:0; overflow:hidden; background:#fff; border:1px solid var(--ui-border); border-radius:14px; box-shadow:0 8px 25px rgba(15,23,42,.055); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.student-test-card:hover { transform:translateY(-2px); border-color:#C7D7F5; box-shadow:0 14px 34px rgba(15,23,42,.08); }
.student-test-card.is-available { border-color:#BFDBFE; }
.student-test-form { height:100%; display:flex; flex-direction:column; padding:24px; }
.student-test-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.student-test-card-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--ui-primary); background:var(--ui-primary-soft); border-radius:12px; }
.student-test-card-icon svg { width:23px; height:23px; }
.student-access-badge { display:inline-flex; align-items:center; min-height:28px; padding:5px 10px; color:#92400E; background:#FFF7E6; border:1px solid #FDE3A7; border-radius:999px; font-size:11px; font-weight:700; }
.student-access-badge.is-active { color:#15803D; background:var(--ui-success-soft); border-color:#BBF7D0; }
.student-test-card h2 { margin:0; color:var(--ui-text); font-size:20px; line-height:1.3; font-weight:760; }
.student-test-description { min-height:42px; margin:8px 0 20px; color:var(--ui-muted); font-size:13px; line-height:1.6; }
.student-test-card .text-green-700 { color:#334155 !important; }
.student-test-card .text-green-700 > ul { margin-top:7px; color:var(--ui-text); font-weight:600; line-height:1.75; }
.student-test-card select { width:100%; }
.student-test-card-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding-top:20px; border-top:1px solid var(--ui-border); }
.student-access-copy { max-width:260px; color:var(--ui-muted); font-size:12px; line-height:1.45; }
.student-access-copy b { color:var(--ui-text); }
.student-test-start { min-width:150px; min-height:42px !important; }

/* Student profile */
.student-profile-page { max-width:960px; }
.student-profile-card { overflow:hidden; background:#fff; border:1px solid var(--ui-border); border-radius:14px; box-shadow:var(--ui-shadow); }
.student-profile-intro { display:flex; align-items:center; gap:14px; padding:22px 24px; background:linear-gradient(180deg,#F8FBFF,#fff); border-bottom:1px solid var(--ui-border); }
.student-profile-mark { width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; color:var(--ui-primary); background:var(--ui-primary-soft); border-radius:12px; }
.student-profile-mark svg { width:22px; height:22px; }
.student-profile-intro h2 { margin:0; font-size:16px; font-weight:750; }
.student-profile-intro p { margin:4px 0 0; color:var(--ui-muted); font-size:12px; }
.student-profile-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:24px; }
.student-profile-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px; background:#F8FAFC; border-top:1px solid var(--ui-border); }
.student-profile-actions p { margin:0; color:var(--ui-muted); font-size:12px; line-height:1.45; }
.student-profile-actions .btn { min-width:190px; }

@media (max-width: 1024px) {
    .app-content { padding: 22px !important; }
    .app-content > div.flex.justify-between, .app-content > div.flex.flex-wrap { align-items: flex-start; }
    .student-test-grid { grid-template-columns:1fr; max-width:720px; }
    .student-profile-fields { grid-template-columns:1fr 1fr; }
}
@media (max-width: 767px) {
    #menu-card { width: min(86vw, 290px) !important; }
    .app-frame { display: block; }
    .app-content { padding: 16px !important; }
    .title, .app-content > div:first-child .text-xl.font-bold { font-size: 20px !important; }
    .app-content > div.flex.justify-between, .app-content > div.flex.flex-wrap { flex-direction: column; }
    .app-content form.card.flex { flex-direction: column; }
    .app-content form.card.flex .btn { width: 100%; }
    .auth-wrap { top: 30px !important; padding: 16px !important; }
    .auth-card { padding: 28px 22px !important; }
    .student-test-form { padding:20px; }
    .student-test-card-footer, .student-profile-actions { align-items:stretch; flex-direction:column; }
    .student-test-start, .student-profile-actions .btn { width:100%; }
    .student-profile-fields { grid-template-columns:1fr; padding:20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}