:root {
  --page: #e7ebf3;
  --surface: #e7ebf3;
  --text: #263248;
  --text-dark: #1e293b;
  --muted: #748097;
  --primary: #536dfe;
  --primary-dark: #3e55d8;
  --teal: #159f9a;
  --amber: #c98a22;
  --shadow-out: 8px 8px 18px rgba(163, 174, 195, .38), -8px -8px 18px rgba(255, 255, 255, .72);
  --shadow-soft: 4px 4px 10px rgba(163, 174, 195, .32), -4px -4px 10px rgba(255, 255, 255, .64);
  --shadow-in: inset 4px 4px 9px rgba(163, 174, 195, .28), inset -4px -4px 9px rgba(255, 255, 255, .68);
  --font: "Manrope", system-ui, sans-serif;
}

:root[data-theme="dark"] {
  --page: #202633;
  --surface: #202633;
  --text: #e7ebf5;
  --text-dark: #e7ebf5;
  --muted: #9aa7bd;
  --primary: #91a3ff;
  --primary-dark: #b5c0ff;
  --teal: #66d4cb;
  --amber: #f0bd68;
  --shadow-out: 8px 8px 16px rgba(11, 15, 25, .5), -8px -8px 16px rgba(190, 205, 235, .12);
  --shadow-soft: 4px 4px 8px rgba(11, 15, 25, .42), -4px -4px 8px rgba(190, 205, 235, .1);
  --shadow-in: inset 4px 4px 8px rgba(11, 15, 25, .38), inset -4px -4px 8px rgba(190, 205, 235, .09);
}

:root[data-theme="dark"] .feature-card:hover {
  box-shadow: 5px 5px 10px rgba(11, 15, 25, .44), -5px -5px 10px rgba(190, 205, 235, .1);
  transform: translateY(-1px);
}

:root[data-theme="dark"] .button-primary {
  box-shadow: 3px 3px 6px rgba(11, 15, 25, .46), -3px -3px 6px rgba(190, 205, 235, .1);
}

:root[data-theme="dark"] .field.is-invalid { color: #f2a7b0; background: #332932; box-shadow: inset 3px 3px 7px rgba(11, 15, 25, .46), inset -3px -3px 7px rgba(235, 164, 177, .08), 0 0 0 1px rgba(235, 141, 157, .16); }
:root[data-theme="dark"] .sidebar-link-icon { box-shadow: 3px 3px 6px rgba(11, 15, 25, .46), -3px -3px 6px rgba(190, 205, 235, .1); }
:root[data-theme="dark"] .sidebar { box-shadow: 8px 8px 16px rgba(11, 15, 25, .5), -8px -8px 16px rgba(190, 205, 235, .12); }
:root[data-theme="dark"] .sidebar-link.active { background: rgba(14, 19, 31, .18); box-shadow: inset 3px 3px 6px rgba(11, 15, 25, .46), inset -3px -3px 6px rgba(190, 205, 235, .1); }
:root[data-theme="dark"] .sidebar-link.active .sidebar-link-icon { background: transparent; box-shadow: none; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--text); font-family: var(--font); line-height: 1.6; background: var(--page); overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
.ambient-orb { display: none; }
.glass-card { border: 0; background: var(--surface); box-shadow: var(--shadow-out); }
.auth-page { display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(100%, 820px); padding: 0; overflow: hidden; border-radius: 32px; }
.auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; overflow: hidden; }
.auth-promo, .auth-form-panel { grid-row: 1; width: 100%; padding: clamp(32px, 5vw, 54px); transition: transform .62s cubic-bezier(.22, 1, .36, 1); }
.auth-promo { grid-column: 1; display: flex; align-items: center; color: #fff; background: linear-gradient(145deg, #2e3c68, #172039); }
.auth-promo .brand-mark { color: #e8c77b; background: rgba(16, 24, 47, .62); box-shadow: 3px 3px 6px rgba(8, 13, 29, .42), -3px -3px 6px rgba(94, 112, 157, .14); }
.auth-promo .brand-mark { width: auto; min-width: 64px; padding-inline: 12px; font-size: .9rem; letter-spacing: .05em; }
.auth-promo .eyebrow { color: #e8c77b; }
.auth-promo h1 { max-width: 300px; font-size: clamp(1.8rem, 4vw, 2.65rem); }
.auth-promo p:not(.eyebrow) { max-width: 320px; color: rgba(235, 241, 255, .72); }
.promo-content { width: 100%; }
.auth-promo .promo-switch { width: auto; min-width: 190px; margin-top: 18px; color: #f0d58f; background: rgba(17, 26, 51, .52); box-shadow: 2px 2px 4px rgba(8, 13, 29, .4), -2px -2px 4px rgba(94, 112, 157, .13); }
.auth-promo .promo-switch:hover { color: #f0d58f; background: rgba(17, 26, 51, .52); box-shadow: inset 2px 2px 4px rgba(8, 13, 29, .4), inset -2px -2px 4px rgba(94, 112, 157, .13); transform: none; }
.auth-promo .promo-switch:active { color: #e8c77b; transform: translateY(1px); box-shadow: inset 3px 3px 6px rgba(8, 13, 29, .48), inset -2px -2px 4px rgba(94, 112, 157, .11); }
.auth-form-panel { grid-column: 2; display: flex; align-items: center; background: var(--surface); }
.auth-card.is-register .auth-promo { transform: translateX(100%); }
.auth-card.is-register .auth-form-panel { transform: translateX(-100%); }
.auth-views { position: relative; width: 100%; min-height: 390px; }
.auth-view { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-block: 18px; opacity: 0; transform: translateX(24px) scale(.985); pointer-events: none; transition: opacity .24s ease, transform .32s cubic-bezier(.22, 1, .36, 1); }
.auth-view.is-active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.auth-view h2 { margin-bottom: 16px; color: var(--primary); }
.auth-card.is-switching .auth-view.is-active { opacity: 0; transform: translateX(-24px) scale(.985); }
.brand-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 21px; color: var(--primary); background: var(--surface); box-shadow: var(--shadow-soft); font-weight: 800; font-size: 1.2rem; }
.brand-mark-small { width: 42px; height: 42px; margin: 0; border-radius: 14px; font-size: .88rem; }
.brand-logo-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.eyebrow { margin: 0 0 8px; color: var(--primary); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -.04em; }
h2 { margin-bottom: 8px; font-size: 1.1rem; }
.lead { color: var(--muted); }
.auth-card .lead { margin-bottom: 28px; }
.field-label { display: block; margin: 18px 0 7px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.field { width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 18px; outline: 0; color: var(--text); background: var(--surface); box-shadow: var(--shadow-in); font-family: var(--font); font-size: .9rem; font-weight: 500; line-height: 1.5; letter-spacing: normal; transition: box-shadow .2s ease, color .2s ease; }
.field:-webkit-autofill, .field:-webkit-autofill:hover, .field:-webkit-autofill:focus { font-family: var(--font) !important; font-size: .9rem !important; font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: normal !important; -webkit-text-fill-color: var(--text); -webkit-box-shadow: var(--shadow-in), 0 0 0 1000px var(--surface) inset; transition: background-color 9999s ease-out 0s; }
.field + .field { margin-top: 12px; }
.field:focus { color: var(--primary-dark); box-shadow: var(--shadow-in), 0 0 0 3px rgba(83, 109, 254, .15); }
.field.is-invalid { color: #a24d58; background: #f4e7ea; box-shadow: inset 3px 3px 7px rgba(184, 119, 129, .22), inset -3px -3px 7px rgba(255, 248, 249, .82), 0 0 0 1px rgba(190, 92, 106, .16); }
.field.is-invalid:focus { box-shadow: inset 3px 3px 7px rgba(184, 119, 129, .22), inset -3px -3px 7px rgba(255, 248, 249, .82), 0 0 0 3px rgba(190, 92, 106, .14); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px; border: 0; border-radius: 16px; font-weight: 800; transition: box-shadow .2s ease, color .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible { outline: 3px solid rgba(83, 109, 254, .45); outline-offset: 3px; }
.button-primary { width: 100%; margin-top: 24px; color: var(--primary-dark); background: var(--surface); box-shadow: 3px 3px 6px rgba(163, 174, 195, .42), -3px -3px 6px rgba(255, 255, 255, .7); }
.button-primary:hover { color: var(--primary-dark); background: var(--surface); box-shadow: var(--shadow-in); transform: none; }
.button-primary:active { transform: translateY(1px); box-shadow: var(--shadow-in); }
.button-ghost { color: var(--primary-dark); background: var(--surface); box-shadow: var(--shadow-soft); }
.button-ghost:hover { color: var(--primary-dark); box-shadow: var(--shadow-in); transform: none; }
.button-ghost:active { transform: translateY(1px); box-shadow: var(--shadow-in); }
.button:disabled { cursor: wait; opacity: .65; transform: none; }
.alert { margin: 18px 0 14px; padding: 12px 15px; border-radius: 16px; font-size: .82rem; line-height: 1.45; text-align: center; box-shadow: var(--shadow-in); }
.alert-error { color: #a24d58; background: #f4e7ea; }
.alert-success { color: #047857; background: #e1f3ed; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; background: rgba(25, 34, 51, .34); backdrop-filter: blur(8px); }
.modal-backdrop.open { display: grid !important; }
.modal-backdrop[hidden] { display: none !important; }
.confirm-modal { width: min(100%, 360px); padding: 26px; border-radius: 28px; text-align: center; }
.modal-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 15px; color: var(--primary); background: var(--surface); box-shadow: var(--shadow-in); font-size: 1.5rem; line-height: 1; }
.confirm-modal .eyebrow { margin-bottom: 8px; }
.confirm-modal h2 { margin: 0; color: var(--text); }
.modal-text { margin: 0 auto; max-width: 290px; color: var(--muted); font-size: .84rem; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.unsaved-confirm-modal { width: min(100%, 430px); }
.modal-actions-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal-actions-3 .button { min-width: 0; min-height: 40px; padding: 8px 10px; border-radius: 14px; font-size: .84rem; white-space: normal; }
.modal-actions .button { width: 100%; margin: 0; }
.modal-actions .button { box-shadow: 3px 3px 6px rgba(163, 174, 195, .42), -3px -3px 6px rgba(255, 255, 255, .7); }
.modal-actions .button:hover, .modal-actions .button:active { box-shadow: var(--shadow-in); }
:root[data-theme="dark"] .modal-actions .button { box-shadow: 3px 3px 6px rgba(11, 15, 25, .46), -3px -3px 6px rgba(190, 205, 235, .1); }
.form-note { margin: 18px 0 0; color: var(--muted); font-size: .76rem; text-align: center; }
.auth-switch { margin: 20px 0 0; color: var(--muted); font-size: .84rem; text-align: center; }
.auth-switch a { color: var(--primary); font-weight: 800; }
.app-shell { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 30px; width: min(1380px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 24px 0; }
.app-shell.is-sidebar-expanded { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 24px; z-index: 20; display: flex; flex-direction: column; width: 76px; height: calc(100vh - 48px); min-height: 560px; padding: 22px 14px; overflow: hidden; border-radius: 20px; box-shadow: 8px 8px 16px rgba(163, 174, 195, .48), -8px -8px 16px rgba(255, 255, 255, .78); transition: box-shadow .24s ease; }
.app-shell.is-sidebar-expanded .sidebar { width: 248px; }
.sidebar .brand { width: 48px; min-width: 48px; justify-content: flex-start; padding: 0 3px 24px; border-bottom: 1px solid rgba(163, 174, 195, .25); }
.sidebar .brand > span:last-child { display: none; opacity: 0; transform: translateX(-8px); transition: opacity .24s ease, transform .36s ease; }
.app-shell.is-sidebar-expanded .sidebar .brand { width: 216px; min-width: 216px; }
.app-shell.is-sidebar-expanded .sidebar .brand > span:last-child { display: block; opacity: 1; transform: translateX(0); transition-delay: .12s; }
.sidebar-nav { display: grid; width: 48px; min-width: 48px; gap: 8px; padding-top: 24px; }
.app-shell.is-sidebar-expanded .sidebar .sidebar-nav { width: 216px; min-width: 216px; }
.sidebar-link { position: relative; display: flex; align-items: center; gap: 12px; width: 48px; min-height: 48px; padding: 8px; border: 0; border-radius: 16px; color: var(--muted); font-size: .82rem; font-weight: 800; text-decoration: none; background: transparent; transition: box-shadow .2s ease, color .2s ease; }
.app-shell.is-sidebar-expanded .sidebar .sidebar-link { width: 216px; padding-inline: 8px; }
.sidebar-link:hover { color: var(--primary-dark); box-shadow: none; }
.sidebar-link.active { color: var(--primary-dark); box-shadow: var(--shadow-in); }
.sidebar-link-icon { display: inline-grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 11px; color: var(--muted); background: var(--surface); box-shadow: var(--shadow-soft); }
.sidebar-link.active .sidebar-link-icon { background: transparent; box-shadow: none; }
.sidebar-link.active .sidebar-link-icon, .sidebar-link:hover .sidebar-link-icon { color: var(--primary); }
.sidebar-link-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sidebar-label { display: inline-block; overflow: hidden; opacity: 0; transform: translateX(-8px); white-space: nowrap; transition: opacity .24s ease, transform .36s ease; }
.app-shell.is-sidebar-expanded .sidebar .sidebar-label { opacity: 1; transform: translateX(0); transition-delay: .12s; }
.sidebar-footer { display: grid; width: 48px; gap: 12px; margin-top: auto; padding: 16px 0 4px; border-top: 1px solid rgba(163, 174, 195, .25); }
.app-shell.is-sidebar-expanded .sidebar .sidebar-footer { width: 216px; }
.sidebar-footer > .button { align-self: center; margin-inline: 0; }
.theme-toggle { justify-content: flex-start; width: 48px; min-height: 44px; gap: 12px; padding: 8px; border-radius: 16px; transition: box-shadow .2s ease, color .2s ease, transform .2s ease; }
button.theme-toggle:hover { color: var(--primary-dark); box-shadow: var(--shadow-in); }
.app-shell.is-sidebar-expanded .sidebar .theme-toggle { width: 216px; padding-inline: 8px; }
.theme-icon { display: inline-grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; color: var(--primary-dark); font-size: 1.2rem; line-height: 1; }
.logout-button { justify-content: flex-start; width: 48px; min-height: 44px; gap: 12px; padding: 8px; border-radius: 16px; transition: box-shadow .2s ease, color .2s ease, transform .2s ease; }
.app-shell.is-sidebar-expanded .sidebar .logout-button { width: 216px; padding-inline: 8px; }
.app-shell.is-sidebar-expanded .sidebar .sidebar-footer > .button { align-self: stretch; }
.logout-icon { position: relative; display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; color: var(--primary-dark); }
.logout-icon::before, .logout-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; }
.logout-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.logout-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.workspace { min-width: 0; padding: 18px 0 42px; }
.workspace-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px 4px 24px; }
.workspace-header h1 { margin-bottom: 0; }
.workspace-role { padding: 9px 13px; border-radius: 14px; color: var(--primary-dark); background: var(--surface); box-shadow: var(--shadow-in); font-size: .76rem; font-weight: 800; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; outline: 0; -webkit-tap-highlight-color: transparent; }
.brand:focus, .brand:focus-visible { outline: 0; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .9rem; letter-spacing: .04em; }
.brand small { color: var(--muted); font-size: .72rem; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 18px; min-width: 0; }
.card-grid > *, .site-summary, .summary-details > * { min-width: 0; }
.site-summary { margin-top: 18px; padding: 26px; border-radius: 26px; box-shadow: var(--shadow-soft); }
.site-summary .panel-heading { margin-bottom: 22px; }
.summary-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.summary-stat { min-width: 0; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); }
.summary-stat-value { display: block; overflow: hidden; color: var(--primary-dark); font-size: 1.35rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.summary-stat-label { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.summary-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.summary-details h3 { margin: 0 0 12px; font-size: .9rem; }
.summary-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.summary-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 14px; color: var(--muted); background: var(--surface); box-shadow: var(--shadow-in); font-size: .78rem; }
.summary-list li strong { color: var(--text); white-space: nowrap; }
.summary-note { min-height: 2.7em; margin: 0 0 10px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.traffic-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.traffic-toolbar h3 { margin-bottom: 4px; }
.traffic-switcher { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 4px; border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-in); transform: translateY(-4px); }
.traffic-mode { padding: 7px 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 800; }
.traffic-mode:disabled { cursor: not-allowed; opacity: .55; }
.traffic-mode.is-active { color: var(--primary-dark); background: var(--page); box-shadow: var(--shadow-soft); }
.traffic-chart { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; height: 214px; margin: 4px 0 16px; padding: 16px 12px 0 0; border-radius: 20px; background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(83, 109, 254, .06)); box-shadow: var(--shadow-in); }
.traffic-chart-y { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding-bottom: 29px; color: var(--muted); font-size: .58rem; line-height: 1; }
.traffic-chart-main { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 29px; min-width: 0; }
.traffic-chart-grid { position: absolute; inset: 0 0 29px; border-bottom: 1px solid rgba(116, 128, 151, .22); background: repeating-linear-gradient(to bottom, rgba(116, 128, 151, .14) 0 1px, transparent 1px 33.333%); }
.traffic-chart-bars, .traffic-chart-labels { position: relative; z-index: 1; display: flex; gap: clamp(4px, 1vw, 12px); min-width: 0; padding-inline: 4px; }
.traffic-chart-bars { align-items: flex-end; height: 100%; }
.traffic-bar-slot { display: flex; align-items: flex-end; justify-content: center; flex: 1 1 0; min-width: 0; height: 100%; }
.traffic-bar { display: flex; align-items: center; justify-content: center; width: min(34px, 78%); min-height: 4px; border-radius: 9px 9px 3px 3px; color: #fff; font-size: .62rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .28); background: linear-gradient(180deg, var(--primary), var(--teal)); box-shadow: 3px 3px 7px rgba(83, 109, 254, .22), -2px -2px 6px rgba(255, 255, 255, .48); transition: height .35s ease, filter .2s ease, transform .2s ease; }
.traffic-bar:hover { filter: saturate(1.25) brightness(1.06); transform: translateY(-3px); }
.traffic-chart-labels { align-items: flex-start; padding-top: 7px; }
.traffic-chart-label { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--muted); font-size: .58rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.traffic-empty { margin: 12px 0 16px; padding: 22px 12px; border-radius: 18px; color: var(--muted); background: var(--surface); box-shadow: var(--shadow-in); font-size: .78rem; text-align: center; }
.feature-card { min-height: 230px; padding: 26px; border-radius: 26px; box-shadow: var(--shadow-soft); transition: box-shadow .2s ease, transform .2s ease; }
.feature-card:hover { box-shadow: 8px 8px 18px rgba(163, 174, 195, .55), -8px -8px 18px rgba(255, 255, 255, .88); }
.feature-card p { min-height: 52px; color: var(--muted); font-size: .9rem; }
.lesson-catalog-card { grid-column: 1 / -1; min-width: 0; padding: 22px; border-radius: 24px; box-shadow: var(--shadow-soft); }
.lesson-catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.lesson-catalog-heading > div { display: flex; align-items: center; gap: 12px; }
.lesson-catalog-heading h2 { margin: 0; font-size: 1.05rem; }
.feature-icon-compact { width: 36px; height: 36px; margin: 0; }
.feature-icon.feature-icon-pill { display: inline-flex; align-items: center; width: auto; height: 38px; margin: 0; padding: 0 16px; border-radius: 12px; font-size: .95rem; font-weight: 800; white-space: nowrap; }
.lesson-catalog-status { color: var(--muted); font-size: .76rem; font-weight: 700; text-align: right; }
.lesson-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.lesson-class-card { min-width: 0; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-in); height: fit-content; align-self: start; transition: order .2s ease; }
.lesson-catalog-grid.is-single-open .lesson-class-card[open] { grid-column: 1 / -1; }
.lesson-class-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.lesson-class-card > summary::-webkit-details-marker { display: none; }
.lesson-class-card > summary::after { content: "+"; color: var(--primary-dark); font-size: 1.05rem; font-weight: 800; }
.lesson-class-card[open] > summary::after { content: "−"; }
.lesson-class-card > summary strong { min-width: 0; font-size: .88rem; }
.lesson-class-count { flex: 0 0 auto; color: var(--muted); font-size: .7rem; }
.lesson-topic-group { margin-top: 12px; }
.lesson-topic-group h3 { margin: 0 0 7px; color: var(--muted); font-size: .68rem; font-weight: 800; }
.lesson-topic-list { display: grid; gap: 6px; }
.lesson-topic-row { display: flex; align-items: stretch; gap: 7px; min-width: 0; }
.lesson-topic-link { display: flex; flex: 1 1 auto; align-items: flex-start; gap: 7px; width: auto; min-width: 0; padding: 6px 9px; border-radius: 10px; color: var(--text); background: var(--page); box-shadow: var(--shadow-soft); font-size: .7rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.lesson-topic-number { flex: 0 0 auto; color: var(--primary-dark); font-weight: 800; }
.lesson-topic-link:hover, .lesson-topic-link:focus-visible { color: var(--primary-dark); outline: 2px solid var(--primary); outline-offset: 1px; }
.lesson-ksp-button { flex: 0 0 58px; min-height: 0; padding: 6px 10px; border-radius: 10px; font-size: .68rem; }
.lesson-ksp-button:disabled { cursor: not-allowed; opacity: .58; }
.lesson-catalog-retry { margin-top: 12px; }
.lesson-catalog-grid:empty { display: none; }
.test-generator-card { grid-column: 1 / -1; min-width: 0; padding: 18px; border-radius: 24px; box-shadow: var(--shadow-soft); }
.test-generator-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.test-generator-heading > div { display: flex; align-items: center; gap: 12px; }
.test-generator-heading h2 { margin: 0; color: var(--text); font-size: 1.05rem; }
.test-generator-card iframe { display: block; width: 100%; min-height: min(78vh, 1000px); border: 0; border-radius: 18px; background: var(--page); }
.profile-editor { grid-column: 1 / -1; min-height: 0; }
.feature-icon { display: inline-grid; place-items: center; width: 43px; height: 43px; margin-bottom: 32px; border-radius: 14px; color: var(--primary); background: var(--surface); box-shadow: var(--shadow-in); font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.feature-teal .feature-icon { color: var(--teal); }
.feature-amber .feature-icon { color: var(--amber); }
.feature-state { color: var(--muted); font-size: .76rem; font-weight: 700; }
.profile-form { margin-top: 0; padding-top: 0; max-width: 860px; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.profile-field { display: flex; flex-direction: column; color: var(--muted); font-size: .82rem; font-weight: 700; }
.profile-field > span { margin-bottom: 7px; }
.profile-field .field { width: 100%; min-height: 52px; border-radius: 18px; margin-top: 0; }
.profile-class-group { display: flex; gap: 14px; width: 100%; }
.profile-class-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profile-class-col > span { margin-bottom: 7px; color: var(--muted); font-size: .82rem; font-weight: 700; }
select.profile-select {
  height: 52px;
  min-height: 52px;
  border-radius: 18px;
  padding: 12px 16px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
:root[data-theme="dark"] select.profile-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.profile-form-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.profile-form-actions .button { width: auto; margin: 0; }
.profile-form-actions .panel-message { display: flex; flex: 1; align-self: center; align-items: center; min-height: 46px; margin: 0; }
.admin-panel { margin-top: 22px; padding: 26px; border-radius: 26px; box-shadow: var(--shadow-soft); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading h2 { margin-bottom: 0; }
.users-table-wrap { overflow: visible !important; max-height: none !important; height: auto !important; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-in); padding: 4px; }
.users-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.users-table th, .users-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(163, 174, 195, .18); }
.users-table tr:last-child td { border-bottom: 0; }
.users-table th { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.users-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-soft); }
#users-reset-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 12px;
  flex-shrink: 0;
}
#users-reset-filters svg {
  display: block;
}

.filter-search { flex: 1 1 200px; }
.neu-input-sm { width: 100%; padding: 7px 12px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-in); color: var(--text); font-family: var(--font); font-size: .82rem; outline: none; }
.neu-input-sm:focus { box-shadow: var(--shadow-in), 0 0 0 2px var(--primary-light); }
.sortable-th { cursor: pointer; user-select: none; transition: color .2s ease; }
.sortable-th:hover { color: var(--primary); }
.sortable-th .sort-icon { display: inline-block; margin-left: 4px; font-size: .72rem; opacity: .5; }
.sortable-th.is-active .sort-icon { opacity: 1; color: var(--primary); font-weight: 800; }
.class-input { width: 110px; padding: 6px 10px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-in); color: var(--text-dark); font-family: var(--font); font-size: .82rem; font-weight: 700; outline: none; transition: box-shadow .2s ease; }
.class-input:focus { box-shadow: var(--shadow-in), 0 0 0 2px var(--primary-light); }
.class-input.is-saved { box-shadow: var(--shadow-in), 0 0 0 2px var(--teal); }
.role-select { min-width: 140px; padding: 7px 28px 7px 12px; border: 0; border-radius: 12px; color: var(--text-dark); background: var(--surface); box-shadow: var(--shadow-in); font-family: var(--font); font-size: .82rem; font-weight: 700; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23536dfe' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.role-select:focus { box-shadow: var(--shadow-in), 0 0 0 2px var(--primary-light); }
.role-select option { background: var(--surface); color: var(--text-dark); }
/* Custom Neumorphic Dropdown for Roles */
.neu-dropdown-container { position: relative; display: inline-block; min-width: 142px; }
.neu-dropdown-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-in); color: var(--text-dark); font-family: var(--font); font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.neu-dropdown-trigger:hover, .neu-dropdown-trigger.is-open { box-shadow: var(--shadow-in), 0 0 0 2px var(--primary-light); color: var(--primary); }
.neu-dropdown-trigger .neu-dropdown-chevron { transition: transform .2s ease; stroke: var(--primary); }
.neu-dropdown-trigger.is-open .neu-dropdown-chevron { transform: rotate(180deg); }
.neu-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 154px; z-index: 1000; display: none; flex-direction: column; gap: 4px; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: 6px 6px 18px rgba(163, 174, 195, 0.42), -6px -6px 18px rgba(255, 255, 255, 0.85); border: 0; }
.neu-dropdown-menu.is-open { display: flex; animation: neuDropdownFadeIn .18s ease-out; }
@keyframes neuDropdownFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.neu-dropdown-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-dark); font-family: var(--font); font-size: .8rem; font-weight: 700; text-align: left; cursor: pointer; transition: all .15s ease; }
.neu-dropdown-item:hover { background: var(--primary-light); color: var(--primary); }
.neu-dropdown-item.is-selected { background: var(--surface); box-shadow: var(--shadow-in); color: var(--primary); font-weight: 800; }

/* Table Action Buttons */
.table-actions-cell { display: flex; align-items: center; gap: 8px; }
.table-action-pass { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; font-size: .74rem; font-weight: 700; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-soft); border: 0; color: var(--primary); }
.table-action-pass:hover { box-shadow: var(--shadow-soft-hover); transform: translateY(-1px); }
.table-action-pass:active { box-shadow: var(--shadow-in); transform: translateY(0); }
.table-action-icon-btn { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 0; background: var(--surface); box-shadow: var(--shadow-soft); color: var(--primary); cursor: pointer; transition: all .2s ease; }
.table-action-icon-btn:hover { box-shadow: var(--shadow-soft-hover); transform: translateY(-1px); }
.table-action-icon-btn:active { box-shadow: var(--shadow-in); transform: translateY(0); }
.table-action-icon-btn.table-action-danger { color: var(--rose) !important; }
.table-action-icon-btn.table-action-danger:hover { background: rgba(239, 68, 68, .08) !important; color: #dc2626 !important; }
.users-count-badge { font-size: .76rem; font-weight: 700; color: var(--muted); background: var(--surface); padding: 4px 10px; border-radius: 10px; box-shadow: var(--shadow-in); }
.user-name-cell { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-dark); }
.table-empty { color: var(--muted); text-align: center !important; }
.panel-note { margin: 14px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.modal-field { margin-top: 12px; }
.panel-message { min-height: 1.4em; margin: 12px 0 0; color: var(--teal); font-size: .8rem; font-weight: 700; }
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .feature-card { padding: 22px; } }
@media (max-width: 1100px) { .profile-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .app-shell, .app-shell.is-sidebar-expanded { grid-template-columns: 76px minmax(0, 1fr); width: min(100% - 32px, 760px); gap: 20px; } .app-shell.is-sidebar-expanded { grid-template-columns: 214px minmax(0, 1fr); } .sidebar { width: 76px; } .app-shell.is-sidebar-expanded .sidebar { width: 214px; } .sidebar .brand { min-width: 182px; } .sidebar-nav, .sidebar-footer { min-width: 48px; } .app-shell.is-sidebar-expanded .sidebar .sidebar-nav, .app-shell.is-sidebar-expanded .sidebar .sidebar-footer { min-width: 182px; width: 182px; } .sidebar-link { font-size: .76rem; } }
@media (max-width: 700px) { .app-shell, .app-shell.is-sidebar-expanded { display: block; width: calc(100% - 20px); padding-top: 10px; } .sidebar { position: static; width: 100%; height: auto; min-height: 0; margin-bottom: 14px; padding: 12px; } .app-shell.is-sidebar-expanded .sidebar { width: 100%; } .sidebar .brand { min-width: 0; padding-bottom: 12px; } .sidebar .brand > span:last-child, .sidebar-label { opacity: 1; transform: none; transition: none; } .sidebar-nav, .app-shell.is-sidebar-expanded .sidebar .sidebar-nav { display: flex; width: auto; min-width: 0; overflow-x: auto; padding-top: 12px; } .sidebar-link, .app-shell.is-sidebar-expanded .sidebar .sidebar-link { flex: 0 0 auto; width: auto; min-width: auto; padding-inline: 13px; } .sidebar-footer, .app-shell.is-sidebar-expanded .sidebar .sidebar-footer { display: flex; width: auto; min-width: 0; align-items: center; justify-content: space-between; padding-top: 12px; } .theme-toggle, .app-shell.is-sidebar-expanded .sidebar .theme-toggle, .logout-button, .app-shell.is-sidebar-expanded .sidebar .logout-button { width: auto; } .workspace { padding-top: 0; } .workspace-header { align-items: flex-start; flex-direction: column; padding-top: 10px; } .card-grid { grid-template-columns: 1fr; } .feature-card { min-height: auto; } .feature-card p { min-height: 0; } .site-summary { padding: 20px; } .summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .summary-details { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .sidebar { position: sticky; top: 10px; z-index: 50; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px; } .sidebar .brand, .app-shell.is-sidebar-expanded .sidebar .brand { flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; padding: 0; border-bottom: 0; } .sidebar-nav, .app-shell.is-sidebar-expanded .sidebar .sidebar-nav { flex: 1 1 auto; gap: 5px; width: auto; min-width: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .sidebar-link, .app-shell.is-sidebar-expanded .sidebar .sidebar-link { justify-content: center; flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 5px; } .sidebar-label, .sidebar .brand > span:last-child { display: none !important; } .sidebar-footer, .app-shell.is-sidebar-expanded .sidebar .sidebar-footer { flex: 0 0 auto; display: flex; gap: 5px; width: auto; min-width: 0; margin: 0; padding: 0; border-top: 0; } .theme-toggle, .app-shell.is-sidebar-expanded .sidebar .theme-toggle, .logout-button, .app-shell.is-sidebar-expanded .sidebar .logout-button { justify-content: center; flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 5px; } .sidebar-footer > .button { align-self: center; margin: 0; } }
@media (max-width: 700px) { .sidebar { border-radius: 18px; box-shadow: 5px 5px 10px rgba(163, 174, 195, .42), -5px -5px 10px rgba(255, 255, 255, .72); } }
@media (max-width: 700px) { :root[data-theme="dark"] .sidebar { box-shadow: 5px 5px 10px rgba(11, 15, 25, .44), -5px -5px 10px rgba(190, 205, 235, .1); } }
@media (max-width: 700px) { .traffic-toolbar { flex-direction: column; } .traffic-switcher { align-self: stretch; } .traffic-mode { flex: 1; } .traffic-chart { height: 200px; } }
@media (max-width: 700px) { .lesson-catalog-card { padding: 16px; } .lesson-catalog-grid { grid-template-columns: 1fr; } .lesson-catalog-heading { align-items: flex-start; flex-direction: column; gap: 8px; } .lesson-catalog-status { text-align: left; } }
@media (max-width: 700px) { .test-generator-card { padding: 12px; } .test-generator-card iframe { min-height: 82vh; } .test-generator-heading { align-items: flex-start; flex-direction: column; gap: 8px; } }
@media (max-width: 700px) { .profile-form-grid { grid-template-columns: 1fr; } .profile-form-actions { align-items: stretch; flex-direction: column; } .profile-form-actions .button { width: 100%; } .profile-form-actions .panel-message { justify-content: center; min-height: 1.4em; text-align: center; } }
@media (max-width: 500px) { .modal-actions-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .auth-card { width: min(100%, 460px); } .auth-shell { display: flex; flex-direction: column; min-height: 0; } .auth-promo, .auth-form-panel { transform: none !important; } .auth-promo { order: 2; min-height: 300px; } .auth-form-panel { order: 1; } .auth-card.is-register .auth-promo { order: 1; } .auth-card.is-register .auth-form-panel { order: 2; } }
@media (max-width: 420px) { .auth-page { padding: 14px; } .auth-card { border-radius: 24px; } .auth-promo, .auth-form-panel { padding: 28px; } .auth-views { min-height: 430px; } .workspace-role { align-self: stretch; text-align: center; } }
.lesson-topic-group h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.quarter-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.quarter-toggle-label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--muted);
  user-select: none;
}
/* Always show all topics in teacher dashboard, even when quarter is hidden from students */
.lesson-topic-group.is-quarter-hidden .lesson-topic-list {
  display: grid !important;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}
.lesson-topic-group.is-quarter-hidden .lesson-topic-list:hover {
  opacity: 1;
}
.neu-switch,
.lesson-visibility-toggle {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  border: 0 !important;
  outline: none !important;
  cursor: pointer;
  background: var(--surface) !important;
  box-shadow: inset 3px 3px 6px rgba(163, 174, 195, 0.55), inset -3px -3px 6px rgba(255, 255, 255, 0.85) !important;
  transition: box-shadow 0.25s ease, background-color 0.25s ease !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
  user-select: none;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
}

:root[data-theme="dark"] .neu-switch,
:root[data-theme="dark"] .lesson-visibility-toggle {
  background: var(--surface) !important;
  box-shadow: inset 3px 3px 6px rgba(11, 15, 25, 0.65), inset -3px -3px 6px rgba(190, 205, 235, 0.1) !important;
}

.neu-switch[aria-pressed="true"],
.lesson-visibility-toggle[aria-pressed="true"] {
  background: rgba(83, 109, 254, 0.1) !important;
  box-shadow: inset 3px 3px 6px rgba(83, 109, 254, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.9) !important;
}

:root[data-theme="dark"] .neu-switch[aria-pressed="true"],
:root[data-theme="dark"] .lesson-visibility-toggle[aria-pressed="true"] {
  background: rgba(83, 109, 254, 0.18) !important;
  box-shadow: inset 3px 3px 6px rgba(83, 109, 254, 0.55), inset -3px -3px 6px rgba(190, 205, 235, 0.12) !important;
}

.neu-switch::after,
.lesson-visibility-toggle::after {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  border-radius: 50% !important;
  background: var(--surface) !important;
  box-shadow: 2px 2px 5px rgba(163, 174, 195, 0.65), -2px -2px 5px rgba(255, 255, 255, 0.95) !important;
  transform: translateX(0) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

:root[data-theme="dark"] .neu-switch::after,
:root[data-theme="dark"] .lesson-visibility-toggle::after {
  background: var(--surface) !important;
  box-shadow: 2px 2px 5px rgba(11, 15, 25, 0.7), -2px -2px 5px rgba(190, 205, 235, 0.12) !important;
}

.neu-switch[aria-pressed="true"]::after,
.lesson-visibility-toggle[aria-pressed="true"]::after {
  transform: translateX(18px) !important;
  box-shadow: 2px 2px 6px rgba(83, 109, 254, 0.45), -2px -2px 6px rgba(255, 255, 255, 0.95) !important;
}

:root[data-theme="dark"] .neu-switch[aria-pressed="true"]::after,
:root[data-theme="dark"] .lesson-visibility-toggle[aria-pressed="true"]::after {
  box-shadow: 2px 2px 6px rgba(83, 109, 254, 0.55), -2px -2px 6px rgba(190, 205, 235, 0.15) !important;
}

.neu-switch-thumb {
  display: none !important;
}

:root[data-theme="dark"] .neu-switch[aria-pressed="true"] .neu-switch-thumb {
  box-shadow: 2px 2px 6px rgba(83, 109, 254, 0.55), -2px -2px 6px rgba(190, 205, 235, 0.15);
}
.lesson-visibility-toggle-lesson {
  flex: 0 0 38px;
  margin: 0 2px;
}
.lesson-topic-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  transition: opacity 0.2s ease;
}
.lesson-topic-row.is-lesson-hidden {
  opacity: 0.52;
}
.lesson-topic-row.is-lesson-hidden .lesson-topic-link {
  text-decoration: line-through;
  opacity: 0.75;
}
@media (max-width: 640px) {
  .lesson-topic-row {
    align-items: center;
  }
}


/* ==========================================================================
   СТИЛИ ДЛЯ СБРОСА ПАРОЛЯ И ВВОДА 4-ЗНАЧНОГО КОДА
   ========================================================================== */
.auth-forgot-row {
  margin-top: 14px;
  text-align: center;
}
.auth-link-forgot {
  display: inline-block;
  background: none;
  border: none;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.88;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.auth-link-forgot:hover {
  opacity: 1;
  color: var(--primary-dark);
}
.auth-link-forgot:active {
  transform: translateY(1px);
}
.reset-desc {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 16px;
  text-align: left;
}
.code-inputs-group {
  margin-bottom: 14px;
  text-align: center;
}
.code-boxes {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.code-box {
  width: 54px;
  height: 58px;
  border: 0;
  border-radius: 16px;
  outline: 0;
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-in);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.code-box:focus {
  color: var(--primary-dark);
  box-shadow: var(--shadow-in), 0 0 0 3px rgba(83, 109, 254, 0.25);
}
.code-box.is-invalid {
  color: #a24d58;
  background: #f4e7ea;
  box-shadow: inset 3px 3px 7px rgba(184, 119, 129, 0.22), inset -3px -3px 7px rgba(255, 248, 249, 0.82), 0 0 0 1px rgba(190, 92, 106, 0.16);
}
.reset-resend-row {
  margin-top: 14px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
}
.reset-timer b {
  color: var(--primary);
  font-weight: 700;
}


.promo-action-group {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.promo-action-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(235, 241, 255, 0.76);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.auth-promo .promo-action-group .promo-switch {
  margin-top: 0;
}