:root {
    --taste-ink: #102a2b;
    --taste-muted: #607475;
    --taste-line: #d9e2df;
    --taste-canvas: #f5f8f6;
    --taste-surface: #ffffff;
    --taste-soft: #e8f1ee;
    --taste-accent: #0f766e;
    --taste-accent-dark: #115e59;
    --taste-shadow: 0 12px 30px rgba(16, 42, 43, .08);
    --taste-shadow-sm: 0 4px 14px rgba(16, 42, 43, .06);
    --taste-shadow-lg: 0 22px 60px rgba(16, 42, 43, .14);
    --taste-ease: cubic-bezier(.2, .7, .2, 1);
}
@keyframes taste-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes taste-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 5px 12px rgba(15, 118, 110, .22); } 50% { transform: scale(1.04); box-shadow: 0 8px 20px rgba(15, 118, 110, .3); } }
@keyframes taste-sheen { 0% { transform: translateX(-140%) skewX(-16deg); } 100% { transform: translateX(320%) skewX(-16deg); } }
@keyframes taste-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.app-login *, .app-admin *, .app-student *, .app-dashboard * { -webkit-tap-highlight-color: transparent; }
.app-login button, .app-admin button, .app-student button, .app-dashboard button { transition: transform 160ms var(--taste-ease), box-shadow 180ms var(--taste-ease), background-color 180ms var(--taste-ease), border-color 180ms var(--taste-ease), color 180ms var(--taste-ease); }
.app-login button:active, .app-admin button:active, .app-student button:active, .app-dashboard button:active { transform: translateY(1px) scale(.985); }
.app-login :focus-visible, .app-admin :focus-visible, .app-student :focus-visible, .app-dashboard :focus-visible { outline: 3px solid rgba(15, 118, 110, .28); outline-offset: 3px; }
.brand-mark {
    display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--taste-accent); color: #fff; font-size: 14px;
    box-shadow: 0 5px 12px rgba(15, 118, 110, .22);
    animation: taste-breathe 5s ease-in-out infinite;
}

/* Landing and authentication */
.app-login { min-height: 100dvh; padding: 24px; background: #e6efec !important; color: var(--taste-ink) !important; }
.app-login .auth-shell {
    position: relative; isolation: isolate;
    width: min(1120px, calc(100vw - 32px)); border: 1px solid rgba(16, 42, 43, .12);
    border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(16, 42, 43, .16); backdrop-filter: none;
}
.app-login .auth-shell::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.app-login .auth-brand {
    position: relative; overflow: hidden; padding: 48px; background: var(--taste-ink); color: #f7fbfa;
}
.app-login .auth-brand::before {
    content: ""; position: absolute; width: 440px; height: 440px; right: -180px; top: -190px; border-radius: 50%;
    border: 1px solid rgba(153, 246, 228, .16); box-shadow: 0 0 0 55px rgba(153, 246, 228, .035), 0 0 0 110px rgba(153, 246, 228, .025);
}
.app-login .auth-brand > * { position: relative; z-index: 1; }
.app-login .brand-title { max-width: 17ch; color: #fff; font-size: clamp(2.1rem, 4vw, 3.2rem); letter-spacing: -.07em; line-height: .98; }
.app-login .brand-subtitle { color: #c7d7d5; line-height: 1.7; }
.app-login .brand-kicker { margin-bottom: 24px; border: 1px solid rgba(153, 246, 228, .24); background: rgba(204, 251, 241, .08); color: #99f6e4; }
.app-login .brand-metric, .app-login .brand-list li {
    border: 1px solid rgba(204, 251, 241, .12); border-radius: 12px; background: rgba(204, 251, 241, .06);
    transition: transform 180ms var(--taste-ease), background 180ms var(--taste-ease), border-color 180ms var(--taste-ease);
}
.app-login .brand-metric:hover, .app-login .brand-list li:hover { transform: translateX(4px); border-color: rgba(153, 246, 228, .3); background: rgba(204, 251, 241, .1); }
.app-login .auth-card { padding: 48px 40px; background: #fff; }
.app-login .auth-switch { background: var(--taste-soft); }
.app-login .auth-switch button { color: #597071; }
.app-login .auth-switch button.active { background: var(--taste-ink); color: #fff; box-shadow: var(--taste-shadow-sm); }
.app-login .auth-note { color: var(--taste-muted); }
.app-login .form-control { min-height: 52px; border: 1px solid var(--taste-line); border-radius: 10px; background: #fbfdfc; color: var(--taste-ink); }
.app-login .form-control::placeholder { color: #78908f; }
.app-login .form-control:focus { border-color: var(--taste-accent); background: #fff; color: var(--taste-ink); box-shadow: 0 0 0 4px rgba(15, 118, 110, .12); }
.app-login .btn-auth { position: relative; overflow: hidden; border-radius: 10px; background: var(--taste-accent); color: #fff; transition: transform 160ms ease, background 160ms ease; }
.app-login .btn-auth::after {
    content: ""; position: absolute; inset: 0 auto 0 -25%; width: 28%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transform: translateX(-140%) skewX(-16deg);
}
.app-login .btn-auth:hover::after { animation: taste-sheen 760ms var(--taste-ease); }
.app-login .btn-auth:hover { background: var(--taste-accent-dark); }
.app-login .btn-auth:active { transform: translateY(1px); }

/* Main teacher console */
.app-admin {
    --accent-1: var(--taste-accent); --accent-2: var(--taste-accent-dark); --bg-light: var(--taste-canvas);
    --border-color: var(--taste-line); --text-primary: var(--taste-ink); --text-secondary: var(--taste-muted);
    background: var(--taste-canvas); color: var(--taste-ink);
}
.app-admin .sidebar {
    width: 268px; border-right: 1px solid #cfdbd7;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%); box-shadow: 10px 0 35px rgba(16, 42, 43, .045);
}
.app-admin .main-content {
    position: relative; margin-left: 268px; padding: 34px;
    background: radial-gradient(circle at 100% 0, rgba(15, 118, 110, .075), transparent 26rem), var(--taste-canvas);
}
.app-admin .sidebar-header h3, .app-admin .mobile-header h3 { display: flex; align-items: center; gap: 10px; color: var(--taste-ink); font-family: inherit; font-weight: 800; letter-spacing: -.045em; }
.app-admin .sidebar-header .rounded-4 { border-color: var(--taste-line) !important; border-radius: 14px !important; box-shadow: none !important; }
.app-admin .sidebar .nav-link {
    position: relative; margin: 1px 10px; width: calc(100% - 20px); padding: 10px 12px; border-left: 0; border-radius: 9px; color: #5b7070;
    transition: transform 180ms var(--taste-ease), background 180ms var(--taste-ease), color 180ms var(--taste-ease), box-shadow 180ms var(--taste-ease);
}
.app-admin .sidebar .nav-link::after {
    content: ""; position: absolute; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: #99f6e4; opacity: 0; transform: scale(0);
    transition: opacity 180ms ease, transform 180ms var(--taste-ease);
}
.app-admin .sidebar .nav-link:hover { transform: translateX(3px); background: #edf5f2; color: var(--taste-accent-dark); }
.app-admin .sidebar .nav-link.active { border-left: 0; background: var(--taste-accent); color: #fff; box-shadow: 0 7px 16px rgba(15, 118, 110, .2); }
.app-admin .sidebar .nav-link.active::after { opacity: 1; transform: scale(1); }
.app-admin .font-orbitron { font-family: inherit; letter-spacing: -.035em; }
.app-admin h2 { color: var(--taste-ink); font-weight: 800; letter-spacing: -.045em; }
.app-admin .tab-content.active { animation: taste-rise 340ms var(--taste-ease); }
.app-admin .card, .app-admin .ai-card, .app-admin .stat-card, .app-admin .management-card {
    border: 1px solid var(--taste-line); border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: var(--taste-shadow-sm);
}
.app-admin .stat-card { position: relative; isolation: isolate; overflow: hidden; padding: 20px; }
.app-admin .stat-card::after {
    content: ""; position: absolute; width: 88px; height: 88px; right: -30px; top: -32px; z-index: -1;
    border-radius: 50%; background: rgba(15, 118, 110, .075); transition: transform 240ms var(--taste-ease);
}
.app-admin .stat-card:hover::after { transform: scale(1.65); }
.app-admin .stat-card:hover, .app-admin .hvr-float:hover { transform: translateY(-4px); border-color: #a5c6c2; box-shadow: var(--taste-shadow); }
.app-admin .stat-icon { transition: transform 220ms var(--taste-ease); }
.app-admin .stat-card:hover .stat-icon { transform: rotate(-6deg) scale(1.08); }
.app-admin .btn-primary, .app-admin .bg-primary { border-color: var(--taste-accent) !important; background-color: var(--taste-accent) !important; }
.app-admin .text-primary { color: var(--taste-accent) !important; }
.app-admin .btn-outline-primary { border-color: #73a9a4; color: var(--taste-accent-dark); }
.app-admin .btn-outline-primary:hover { border-color: var(--taste-accent); background: var(--taste-accent); color: #fff; }
.app-admin .form-control, .app-admin .form-select { border-color: var(--taste-line); border-radius: 9px; background-color: #fff; }
.app-admin .form-control:focus, .app-admin .form-select:focus { border-color: var(--taste-accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.app-admin .modal.show .modal-dialog { animation: taste-pop 220ms var(--taste-ease); }
.app-admin .modal-content { overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 22px 70px rgba(16, 42, 43, .2); }
.app-admin .modal-header { background: linear-gradient(180deg, #fff, #f7fbf9); }
.app-admin .table { --bs-table-striped-bg: #f7faf9; --bs-table-hover-bg: #edf5f2; vertical-align: middle; }
.app-admin .table tbody tr { transition: transform 140ms var(--taste-ease), box-shadow 140ms var(--taste-ease); }
.app-admin .table tbody tr:hover { transform: translateX(3px); }
.app-admin .table thead th { color: #456263; font-size: .73rem; letter-spacing: .06em; text-transform: uppercase; }

/* Mode-aware overview dashboard */
.app-admin #tab-dashboard > .dashboard-modern ~ * { display: none !important; }
.dashboard-modern { --dashboard-panel: rgba(255, 255, 255, .94); }
.dashboard-hero {
    position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px;
    min-height: 270px; padding: 30px; border: 1px solid rgba(153, 246, 228, .16); border-radius: 20px;
    background: linear-gradient(125deg, #102a2b 0%, #164e4b 64%, #0f766e 100%); color: #ecfdf5;
    box-shadow: 0 22px 45px rgba(16, 42, 43, .18); animation: taste-rise 360ms var(--taste-ease);
}
.dashboard-hero::before, .dashboard-hero::after {
    content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(153, 246, 228, .16);
}
.dashboard-hero::before { width: 420px; height: 420px; right: -110px; top: -190px; box-shadow: 0 0 0 52px rgba(153, 246, 228, .035), 0 0 0 104px rgba(153, 246, 228, .025); }
.dashboard-hero::after { width: 160px; height: 160px; left: 45%; bottom: -110px; }
.dashboard-kicker, .dashboard-live, .dashboard-chip {
    display: inline-flex; align-items: center; gap: 7px; width: fit-content; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .05em;
}
.dashboard-kicker { padding: 7px 10px; border: 1px solid rgba(153, 246, 228, .18); background: rgba(153, 246, 228, .09); color: #99f6e4; text-transform: uppercase; }
.dashboard-hero h2 { max-width: 15ch; margin: 18px 0 10px; color: #fff; font-size: clamp(2.35rem, 5vw, 4rem); line-height: .96; letter-spacing: -.075em; }
.dashboard-hero p { max-width: 64ch; margin: 0; color: #c8e3df; line-height: 1.65; }
.dashboard-mode-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.dashboard-mode-switch button {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid rgba(153, 246, 228, .18); border-radius: 9px;
    background: rgba(255, 255, 255, .055); color: #c8e3df; font-size: .84rem; font-weight: 750;
}
.dashboard-mode-switch button:hover { transform: translateY(-2px); border-color: rgba(153, 246, 228, .5); background: rgba(255, 255, 255, .1); color: #fff; }
.dashboard-mode-switch button.active { border-color: #99f6e4; background: #ccfbf1; color: #115e59; box-shadow: 0 8px 18px rgba(4, 47, 46, .2); }
.dashboard-hero__aside { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dashboard-live { padding: 7px 10px; background: rgba(255,255,255,.08); color: #d5eeeb; }
.dashboard-live span { width: 8px; height: 8px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 0 0 rgba(94, 234, 212, .6); animation: dashboard-live 1.8s ease-out infinite; }
@keyframes dashboard-live { 70%, 100% { box-shadow: 0 0 0 8px rgba(94, 234, 212, 0); } }
.dashboard-hero__icon { display: grid; width: 92px; height: 92px; place-items: center; border: 1px solid rgba(153, 246, 228, .22); border-radius: 26px; background: rgba(255, 255, 255, .08); color: #99f6e4; font-size: 2.35rem; backdrop-filter: blur(12px); transition: transform 240ms var(--taste-ease); }
.dashboard-hero:hover .dashboard-hero__icon { transform: rotate(-6deg) scale(1.05); }
.dashboard-refresh { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgba(153, 246, 228, .2); border-radius: 9px; background: rgba(255, 255, 255, .06); color: #d5eeeb; font-weight: 750; font-size: .8rem; }
.dashboard-refresh:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.dashboard-refresh:hover i { transform: rotate(180deg); }
.dashboard-refresh i { transition: transform 360ms var(--taste-ease); }

.dashboard-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dashboard-metric {
    position: relative; isolation: isolate; overflow: hidden; min-height: 155px; padding: 17px; border: 1px solid var(--taste-line); border-radius: 15px;
    background: var(--dashboard-panel); box-shadow: var(--taste-shadow-sm);
    transition: transform 190ms var(--taste-ease), border-color 190ms ease, box-shadow 190ms ease;
}
.dashboard-metric::after { content: ""; position: absolute; z-index: -1; width: 100px; height: 100px; right: -35px; bottom: -45px; border-radius: 50%; background: var(--metric-soft); transition: transform 220ms var(--taste-ease); }
.dashboard-metric:hover { transform: translateY(-5px); border-color: #aecbc7; box-shadow: var(--taste-shadow); }
.dashboard-metric:hover::after { transform: scale(1.6); }
.dashboard-metric__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--metric-color); font-size: .73rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-metric__top i { font-size: 1.05rem; }
.dashboard-metric strong { display: block; margin: 16px 0 4px; color: var(--taste-ink); font-size: 2.15rem; line-height: 1; letter-spacing: -.07em; }
.dashboard-metric small { color: var(--taste-muted); font-size: .76rem; line-height: 1.35; }
.dashboard-metric--teal { --metric-color: #0f766e; --metric-soft: rgba(15, 118, 110, .11); }
.dashboard-metric--blue { --metric-color: #0e7490; --metric-soft: rgba(14, 116, 144, .11); }
.dashboard-metric--amber { --metric-color: #b45309; --metric-soft: rgba(180, 83, 9, .1); }
.dashboard-metric--rose { --metric-color: #be123c; --metric-soft: rgba(190, 18, 60, .09); }
.dashboard-metric--ink { --metric-color: #102a2b; --metric-soft: rgba(16, 42, 43, .1); }

.dashboard-workbench, .dashboard-panel {
    border: 1px solid var(--taste-line); border-radius: 16px; background: var(--dashboard-panel); box-shadow: var(--taste-shadow-sm);
}
.dashboard-workbench { padding: 20px; }
.dashboard-section-heading h3, .dashboard-panel h3 { margin: 0; color: var(--taste-ink); font-size: 1.02rem; font-weight: 850; letter-spacing: -.025em; }
.dashboard-section-heading p, .dashboard-panel p { margin: 4px 0 0; color: var(--taste-muted); font-size: .82rem; line-height: 1.55; }
.dashboard-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.dashboard-action {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 86px; padding: 12px;
    border: 1px solid var(--taste-line); border-radius: 12px; background: #fbfdfc; color: var(--taste-ink); text-align: left;
}
.dashboard-action > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #e8f5f2; color: var(--taste-accent); }
.dashboard-action strong, .dashboard-action small { display: block; }
.dashboard-action strong { font-size: .85rem; }
.dashboard-action small { margin-top: 3px; color: var(--taste-muted); font-size: .72rem; line-height: 1.35; }
.dashboard-action b { color: var(--taste-accent); font-size: 1.15rem; transition: transform 170ms var(--taste-ease); }
.dashboard-action:hover { transform: translateY(-3px); border-color: #a5c6c2; background: #f5fbf9; box-shadow: var(--taste-shadow-sm); }
.dashboard-action:hover b { transform: translateX(3px); }
.dashboard-panel { padding: 20px; }
.dashboard-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dashboard-panel h3 i { margin-right: 7px; color: var(--taste-accent); }
.dashboard-chip { flex: 0 0 auto; padding: 6px 8px; background: #e8f5f2; color: var(--taste-accent-dark); }
.dashboard-chart { height: 330px; margin-top: 18px; }
.dashboard-insight { background: linear-gradient(160deg, #fff, #f5faf8); }
.dashboard-insight__steps { display: grid; gap: 8px; margin-top: 18px; }
.dashboard-insight__steps button { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 11px; border: 1px solid var(--taste-line); border-radius: 10px; background: #fff; color: var(--taste-ink); text-align: left; }
.dashboard-insight__steps span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #e8f5f2; color: var(--taste-accent); font-size: .7rem; font-weight: 900; }
.dashboard-insight__steps b { font-size: .82rem; }
.dashboard-insight__steps i { color: #8ba5a3; font-size: .7rem; transition: transform 160ms var(--taste-ease); }
.dashboard-insight__steps button:hover { transform: translateX(4px); border-color: #a5c6c2; }
.dashboard-insight__steps button:hover i { transform: translateX(3px); color: var(--taste-accent); }
.dashboard-modern .management-card { transition: transform 180ms var(--taste-ease), box-shadow 180ms ease, border-color 180ms ease; }
.dashboard-modern .management-card:hover { transform: translateY(-4px); border-color: #a5c6c2; box-shadow: var(--taste-shadow); }

/* Admin-only platform control center */
.admin-platform-overview { transition: opacity 180ms ease; }
.admin-platform-overview.is-loading { opacity: .62; }
.platform-hero {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    min-height: 214px; padding: 30px; border: 1px solid rgba(153, 246, 228, .16); border-radius: 20px;
    background: linear-gradient(125deg, #102a2b 0%, #164e4b 58%, #0f766e 100%); color: #ecfdf5;
    box-shadow: 0 22px 45px rgba(16, 42, 43, .18);
}
.platform-hero::before, .platform-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(153, 246, 228, .16); }
.platform-hero::before { width: 390px; height: 390px; right: -100px; top: -195px; box-shadow: 0 0 0 48px rgba(153, 246, 228, .035), 0 0 0 96px rgba(153, 246, 228, .025); }
.platform-hero::after { width: 138px; height: 138px; left: 52%; bottom: -94px; }
.platform-hero h2 { margin: 20px 0 8px; color: #fff; font-size: clamp(2.25rem, 4vw, 3.85rem); line-height: .96; letter-spacing: -.075em; }
.platform-hero p { max-width: 720px; margin: 0; color: #c8e3df; line-height: 1.65; }
.platform-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
.platform-kpi-grid article {
    position: relative; overflow: hidden; min-height: 142px; padding: 17px; border: 1px solid var(--taste-line); border-radius: 15px;
    background: rgba(255, 255, 255, .95); box-shadow: var(--taste-shadow-sm);
    transition: transform 190ms var(--taste-ease), box-shadow 190ms ease, border-color 190ms ease;
}
.platform-kpi-grid article::after { content: ""; position: absolute; width: 74px; height: 74px; right: -26px; bottom: -32px; border-radius: 50%; background: rgba(15, 118, 110, .09); transition: transform 220ms var(--taste-ease); }
.platform-kpi-grid article:nth-child(3n + 2)::after { background: rgba(14, 116, 144, .1); }
.platform-kpi-grid article:nth-child(3n)::after { background: rgba(180, 83, 9, .1); }
.platform-kpi-grid article:hover { transform: translateY(-5px); border-color: #a5c6c2; box-shadow: var(--taste-shadow); }
.platform-kpi-grid article:hover::after { transform: scale(1.7); }
.platform-kpi-grid span, .platform-kpi-grid small { display: block; }
.platform-kpi-grid span { color: #527071; font-size: .7rem; font-weight: 850; letter-spacing: .065em; text-transform: uppercase; }
.platform-kpi-grid strong { display: block; margin: 16px 0 5px; color: var(--taste-ink); font-size: 2rem; line-height: 1; letter-spacing: -.07em; }
.platform-kpi-grid small { color: var(--taste-muted); font-size: .72rem; line-height: 1.35; }
.platform-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.platform-health-card, .platform-activity-card, .platform-data-card {
    padding: 19px; border: 1px solid var(--taste-line); border-radius: 15px; background: rgba(255, 255, 255, .95); box-shadow: var(--taste-shadow-sm);
}
.platform-health-card { transition: transform 180ms var(--taste-ease), border-color 180ms ease, box-shadow 180ms ease; }
.platform-health-card:hover { transform: translateY(-3px); border-color: #a5c6c2; box-shadow: var(--taste-shadow); }
.platform-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.platform-card-head h3 { margin: 0; color: var(--taste-ink); font-size: .98rem; font-weight: 850; letter-spacing: -.025em; }
.platform-card-head h3 i { margin-right: 7px; color: var(--taste-accent); }
.platform-card-head p { margin: 5px 0 0; color: var(--taste-muted); font-size: .78rem; }
.platform-card-head button {
    padding: 5px 8px; border: 1px solid #c7ddda; border-radius: 7px; background: #f8fcfb; color: var(--taste-accent-dark);
    font-size: .71rem; font-weight: 800; transition: transform 150ms var(--taste-ease), background 150ms ease;
}
.platform-card-head button:hover { transform: translateX(2px); background: #e8f5f2; }
.platform-stat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.platform-stat-list div { padding: 11px 10px; border: 1px solid #e1ecea; border-radius: 10px; background: #fbfdfc; }
.platform-stat-list span, .platform-stat-list b { display: block; }
.platform-stat-list span { color: var(--taste-muted); font-size: .68rem; }
.platform-stat-list b { margin-top: 5px; color: var(--taste-ink); font-size: 1.17rem; letter-spacing: -.04em; }
.platform-warning-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.platform-warning-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px; border-radius: 10px; background: #f8fbfa; color: #567273; font-size: .72rem; }
.platform-warning-row b { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 50%; font-size: .72rem; }
.platform-warning-row--danger b { background: #fee2e2; color: #b91c1c; }
.platform-warning-row--warning b { background: #fef3c7; color: #a16207; }
.platform-live { display: inline-flex; align-items: center; gap: 7px; color: var(--taste-accent-dark); font-size: .7rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.platform-live i { width: 8px; height: 8px; border-radius: 50%; background: #14b8a6; box-shadow: 0 0 0 0 rgba(20, 184, 166, .55); animation: dashboard-live 1.8s ease-out infinite; }
.platform-activity-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 9px; height: 190px; margin-top: 20px; }
.platform-activity-column { display: grid; grid-template-rows: 20px minmax(0, 1fr) 19px; gap: 6px; align-items: end; justify-items: center; }
.platform-activity-column b, .platform-activity-column span { color: var(--taste-muted); font-size: .63rem; }
.platform-activity-column i { width: min(100%, 27px); min-height: 4px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #14b8a6, #0f766e); transition: height 360ms var(--taste-ease), transform 160ms var(--taste-ease); }
.platform-activity-column:hover i { transform: scaleX(1.16); background: linear-gradient(180deg, #2dd4bf, #115e59); }
.platform-table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.platform-list { display: grid; gap: 4px; margin-top: 14px; }
.platform-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; transition: transform 150ms var(--taste-ease), background 150ms ease; }
.platform-list-item:hover { transform: translateX(3px); background: #f3f9f7; }
.platform-list-avatar { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #e8f5f2; color: var(--taste-accent-dark); font-size: .7rem; font-weight: 900; }
.platform-list-avatar--score { background: #e0f2fe; color: #0369a1; }
.platform-list-main { min-width: 0; flex: 1; }
.platform-list-main strong, .platform-list-main small, .platform-list-item time { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-list-main strong { color: var(--taste-ink); font-size: .79rem; }
.platform-list-main small, .platform-list-item time { color: var(--taste-muted); font-size: .66rem; }
.platform-list-trailing { max-width: 130px; text-align: right; }
.platform-list-trailing span { display: inline-block; margin-bottom: 3px; padding: 3px 5px; border-radius: 999px; background: #fef3c7; color: #a16207; font-size: .61rem; font-weight: 800; }
.platform-empty { padding: 18px 10px; color: var(--taste-muted); font-size: .78rem; text-align: center; }
.platform-empty--danger { color: #b91c1c; }

/* AI Factory is part of the same console. */
.app-admin #ai-factory-container {
    --accent: var(--taste-accent); --accent-grad: linear-gradient(135deg, var(--taste-accent), var(--taste-accent-dark));
    --border: var(--taste-line); --text-primary: var(--taste-ink); --text-secondary: #385253; --text-dim: var(--taste-muted); padding: 0;
}
.app-admin #ai-factory-container .card { border-radius: 14px; box-shadow: var(--taste-shadow-sm); }
.app-admin #ai-factory-container .form-label { color: var(--taste-accent-dark) !important; }
.app-admin #ai-factory-container .subject-card.selected,
.app-admin #ai-factory-container .exam-type-card.selected,
.app-admin #ai-factory-container .duration-card.selected,
.app-admin #ai-factory-container .grade-btn.selected,
.app-admin #ai-factory-container .difficulty-chip.selected { border-color: var(--taste-accent); background: #e8f5f2; box-shadow: none; }
.app-admin #ai-factory-container .subject-card,
.app-admin #ai-factory-container .exam-type-card,
.app-admin #ai-factory-container .duration-card,
.app-admin #ai-factory-container .grade-btn,
.app-admin #ai-factory-container .difficulty-chip {
    position: relative; overflow: hidden;
    transition: transform 180ms var(--taste-ease), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.app-admin #ai-factory-container .subject-card:hover,
.app-admin #ai-factory-container .exam-type-card:hover,
.app-admin #ai-factory-container .duration-card:hover,
.app-admin #ai-factory-container .grade-btn:hover,
.app-admin #ai-factory-container .difficulty-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(16, 42, 43, .09); }
.app-admin #ai-factory-container .selected::after {
    content: "\2713"; position: absolute; top: 7px; right: 8px; display: grid; width: 20px; height: 20px; place-items: center;
    border-radius: 50%; background: var(--taste-accent); color: #fff; font-size: 11px; font-weight: 900; animation: taste-pop 180ms var(--taste-ease);
}
.app-admin #ai-factory-container .lesson-item { transition: transform 160ms var(--taste-ease), border-color 160ms ease, background 160ms ease; }
.app-admin #ai-factory-container .lesson-item:hover { transform: translateX(3px); background: #eef8f5; border-color: #a5c6c2; }

/* Student exam experience */
.app-student {
    --primary-color: var(--taste-accent); --secondary-color: var(--taste-muted); --light-bg: var(--taste-canvas);
    --radius: 14px; --shadow: var(--taste-shadow-sm); background: var(--taste-canvas); color: var(--taste-ink);
}
.app-student .login-container { min-height: 100dvh; background: radial-gradient(circle at 85% 18%, rgba(15, 118, 110, .12), transparent 24rem), radial-gradient(circle at 8% 88%, rgba(16, 42, 43, .07), transparent 20rem), var(--taste-canvas); }
.app-student .login-box, .app-student .question-block, .app-student .result-box, .app-student .nav-panel { border: 1px solid var(--taste-line); border-radius: 14px; box-shadow: var(--taste-shadow); }
.app-student .login-box { animation: taste-rise 420ms var(--taste-ease); }
.app-student .exam-icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 20px; background: var(--taste-soft); color: var(--taste-accent); font-size: 26px; }
.app-student .btn-start { border-radius: 10px; background: var(--taste-accent); }
.app-student .btn-start:hover { background: var(--taste-accent-dark); box-shadow: 0 8px 18px rgba(15, 118, 110, .2); }
.app-student .exam-header { border-bottom: 1px solid var(--taste-line); background: rgba(255, 255, 255, .9); box-shadow: 0 4px 16px rgba(16, 42, 43, .05); backdrop-filter: blur(14px); }
.app-student .timer { border-radius: 9px; background: var(--taste-ink); }
.app-student .question-block { border-left: 3px solid transparent; transition: transform 180ms var(--taste-ease), border-color 180ms ease, box-shadow 180ms ease; }
.app-student .question-block:hover { transform: translateY(-2px); border-left-color: var(--taste-accent); box-shadow: var(--taste-shadow-lg); }
.app-student .passage-block { background: var(--taste-ink); color: #fff; }
.app-student .question-group-wrapper { border-color: #c8dcd8; background: #eef6f4; box-shadow: none; }
.app-student .group-questions-container .question-block { border-left-color: var(--taste-accent); }
.app-student .progress-bar.bg-success { background-color: var(--taste-accent) !important; }
.app-student .form-control:focus { border-color: var(--taste-accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.app-student .mcq-option { border-width: 1px; border-color: var(--taste-line); background: #fff; transition: transform 160ms var(--taste-ease), border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.app-student .mcq-option:hover { transform: translateX(4px); border-color: #8fb8b4; background: #f6fbf9; box-shadow: 0 5px 12px rgba(16, 42, 43, .06); }
.app-student .mcq-option.selected { border-color: var(--taste-accent); background: #e8f5f2; box-shadow: inset 3px 0 0 var(--taste-accent); }
.app-student .nav-panel { animation: taste-rise 280ms var(--taste-ease); }
.app-student .nav-btn { transition: transform 140ms var(--taste-ease), background 140ms ease, border-color 140ms ease, color 140ms ease; }
.app-student .nav-btn:hover { transform: translateY(-2px); border-color: #8fb8b4; background: #f1f8f6; }
.app-student .nav-btn.answered { border-color: var(--taste-accent); background: var(--taste-accent); }
.app-student .nav-btn.current { border-color: var(--taste-ink); color: var(--taste-ink); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.app-student .student-floating-tools .student-floating-btn { border: 1px solid rgba(255, 255, 255, .26); box-shadow: 0 12px 24px rgba(16, 42, 43, .16); }
.app-student .student-floating-btn:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 18px 34px rgba(16, 42, 43, .22); }
.app-student .result-box { animation: taste-rise 420ms var(--taste-ease); }
.app-student .result-score-circle { position: relative; border-color: var(--taste-accent); box-shadow: 0 0 0 10px rgba(15, 118, 110, .08); animation: taste-pop 420ms var(--taste-ease); }
.app-student .result-detail-card { border: 1px solid var(--taste-line); background: #f8fbfa; transition: transform 160ms var(--taste-ease), box-shadow 160ms ease; }
.app-student .result-detail-card:hover { transform: translateY(-3px); box-shadow: var(--taste-shadow-sm); }
.app-student .ai-eval { border-left-color: var(--taste-accent); background: #eaf6f3; }

/* Legacy analytics page */
.app-dashboard {
    --bg-dark: #102a2b; --card-bg: rgba(255, 255, 255, .07); --primary: #5eead4;
    --primary-glow: rgba(94, 234, 212, .18); --secondary: #99f6e4; --text-primary: #f0fdfa; --text-muted: #a7c7c4;
    background: #102a2b !important;
}
.app-dashboard .sidebar {
    width: 248px; height: 100dvh; padding: 24px 14px; border-radius: 0;
    border: 0; border-right: 1px solid rgba(153, 246, 228, .16); background: rgba(6, 49, 49, .64);
}
.app-dashboard .main-content { max-width: 1600px; margin-left: 248px; padding: 32px; }
.app-dashboard .sidebar h1 { color: #f0fdfa; letter-spacing: -.055em; }
.app-dashboard .sidebar nav a { border-radius: 9px; }
.app-dashboard .sidebar nav a:hover { background: rgba(153, 246, 228, .1); }
.app-dashboard .stats-grid { gap: 14px; }
.app-dashboard .stat-card { padding: 20px; }
.app-dashboard .glass { border-radius: 14px; box-shadow: none; }
.app-dashboard .glass-hover:hover { border-color: #5eead4; box-shadow: 0 8px 22px rgba(4, 47, 46, .22); transform: translateY(-2px); }
.app-dashboard .stat-label { color: #a7c7c4; }
.app-dashboard .main-content > * { animation: taste-rise 360ms var(--taste-ease); }
.app-dashboard .custom-table tbody tr { transition: transform 160ms var(--taste-ease); }
.app-dashboard .custom-table tbody tr:hover { transform: translateX(3px); }

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

@media (max-width: 900px) {
    .app-login { padding: 12px; }
    .app-login .auth-shell { width: min(100%, 680px); }
    .app-login .auth-brand, .app-login .auth-card { padding: 28px 24px; }
    .app-login .brand-list { display: none; }
    .dashboard-hero { grid-template-columns: 1fr; min-height: auto; padding: 24px; }
    .dashboard-hero__aside { display: none; }
    .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-metric:last-child { grid-column: span 2; }
    .dashboard-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .platform-table-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .app-admin .main-content { margin-left: 0; padding: 82px 16px 22px; }
    .app-admin .mobile-header { border-bottom: 1px solid var(--taste-line); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); }
    .app-student .exam-header { padding: 12px; }
    .app-student .exam-body { padding: 12px; }
    .app-student .question-block { padding: 18px; }
    .app-dashboard .sidebar {
        position: static; width: auto; height: auto; padding: 18px 14px; border-right: 0; border-bottom: 1px solid rgba(153, 246, 228, .16);
    }
    .app-dashboard .sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .app-dashboard .sidebar .absolute { display: none; }
    .app-dashboard .main-content { margin-left: 0; padding: 20px 14px; }
    .app-dashboard header { align-items: flex-start; gap: 14px; }
    .app-dashboard .custom-table { min-width: 680px; }
    .app-dashboard .glass:has(.custom-table) { overflow-x: auto; }
    .dashboard-hero { padding: 20px; border-radius: 16px; }
    .dashboard-hero h2 { font-size: 2.5rem; }
    .dashboard-mode-switch { display: grid; grid-template-columns: 1fr; }
    .dashboard-mode-switch button { justify-content: flex-start; }
    .dashboard-metrics { gap: 9px; }
    .dashboard-metric { min-height: 132px; padding: 14px; }
    .dashboard-metric strong { font-size: 1.8rem; }
    .dashboard-action-grid { grid-template-columns: 1fr; }
    .dashboard-panel { padding: 16px; }
    .dashboard-panel__head { display: block; }
    .dashboard-chip { margin-top: 10px; }
    .dashboard-chart { height: 270px; }
    .platform-hero { display: block; min-height: auto; padding: 22px; border-radius: 16px; }
    .platform-hero .dashboard-refresh { margin-top: 18px; }
    .platform-kpi-grid, .platform-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .platform-kpi-grid article { min-height: 124px; padding: 14px; }
    .platform-kpi-grid strong { font-size: 1.72rem; }
    .platform-health-card, .platform-activity-card, .platform-data-card { padding: 15px; }
    .platform-health-card { grid-column: span 2; }
    .platform-activity-bars { gap: 4px; height: 150px; overflow-x: auto; }
    .platform-activity-column { min-width: 26px; }
    .platform-list-item time { display: none; }
}