:root {
  --font-ui: "Manrope Variable", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 40px;
  --ink: #173740;
  --muted: #5d7177;
  --navy: #173f49;
  --navy-deep: #10343d;
  --mint: #16be8c;
  --mint-soft: #e1f8f0;
  --lavender: #0f9670;
  --lavender-soft: #dcf3e4;
  --rose-soft: #ffe7e0;
  --surface: #ffffff;
  --line: #e4edea;
  --background: #ffffff;
  --shadow: 0 24px 64px rgba(25, 60, 67, 0.1);
  --radius-xl: 32px;
  --radius-lg: 16px;
  --radius-md: 13px;
  --focus: #1ca7be;
  --field: #fbfdfd;
  --subtle: #f6f4f8;
  --primary: #1ca7be;
  --gold: #c9a34a;
  --gold-soft: #f7efda;
  --sidebar-surface: #14201f;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #d2dadb;
  --muted: #91a4a7;
  --navy: #0d2832;
  --navy-deep: #061218;
  --mint: #4fd0e8;
  --mint-soft: rgba(79, 208, 232, .18);
  --lavender: #23ae8e;
  --lavender-soft: rgba(35, 174, 142, .18);
  --rose-soft: #33231f;
  --surface: #1c2733;
  --line: #2a3944;
  --background: #141d26;
  --shadow: 0 30px 90px rgba(0, 5, 9, .42);
  --focus: #4fd0e8;
  --field: #182029;
  --subtle: #182029;
  --primary: #2f98ba;
  --page-glow-top: rgba(79, 208, 232, .4);
  --page-glow-side: rgba(35, 174, 142, .35);
  --page-glow-bottom: rgba(11, 16, 23, .72);
  --page-core: rgba(9, 9, 18, .66);
  --workspace-edge: rgba(79, 208, 232, .3);
  --glass-fill: rgba(3, 12, 20, .42);
  --glass-highlight: rgba(9, 29, 38, .48);
  --glass-border: rgba(172, 237, 229, .18);
  --glass-glow: rgba(79, 208, 232, .22);
  --hero-neon: #4fd0e8;
  --hero-neon-alt: #23ae8e;
  --gold: #e3c077;
  --gold-soft: #2e2820;
  --sidebar-surface: #0d1620;
  color-scheme: dark;
}

:root[data-theme="turquoise"] {
  --ink: #0d3a3c;
  --muted: #4c7b7c;
  --navy: #0d3a3c;
  --navy-deep: #0a2c2e;
  --mint: #1ec4b8;
  --mint-soft: rgba(30, 196, 184, .18);
  --lavender: #2c9760;
  --lavender-soft: rgba(44, 151, 96, .18);
  --surface: #eefbfa;
  --line: #cdeeeb;
  --background: #e1f7f6;
  --shadow: 0 12px 26px rgba(13, 58, 60, 0.06);
  --focus: #1ec4b8;
  --field: #eefbfa;
  --subtle: #bfdad8;
  --primary: #1ec4b8;
  --gold: #b08328;
  --gold-soft: #fbf0da;
  --page-glow-top: rgba(95, 224, 210, .5);
  --page-glow-side: rgba(30, 196, 184, .32);
  --page-glow-bottom: rgba(13, 58, 60, .14);
  --page-core: rgba(13, 58, 60, .06);
  --workspace-edge: rgba(30, 196, 184, .3);
  --glass-fill: rgba(238, 251, 250, .5);
  --glass-highlight: rgba(255, 255, 255, .6);
  --glass-border: rgba(30, 196, 184, .25);
  --glass-glow: rgba(95, 224, 210, .4);
  --hero-neon: #1ec4b8;
  --hero-neon-alt: #2c9760;
  --sidebar-surface: #0d3a3c;
  color-scheme: light;
}

* { box-sizing: border-box; }
@property --hero-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html { background: var(--background); }
body { margin: 0; color: var(--ink); background: var(--background); font-family: var(--font-ui); font-size: 16px; font-weight: 500; font-optical-sizing: auto; font-synthesis: style; letter-spacing: -.012em; text-rendering: optimizeLegibility; transition: color .22s ease, background .3s ease; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .46s; animation-timing-function: cubic-bezier(.22,.72,.24,1); mix-blend-mode: normal; }
::view-transition-old(root) { animation-name: theme-fade-out; }
::view-transition-new(root) { animation-name: theme-fade-in; }
@keyframes theme-fade-out { to { opacity: 0; filter: saturate(.88) blur(2px); } }
@keyframes theme-fade-in { from { opacity: 0; filter: saturate(.84) blur(3px); } }
:root[data-theme="dark"] body,
:root[data-theme="turquoise"] body { position: relative; isolation: isolate; background-attachment: fixed; }
:root[data-theme="dark"] body {
  background: var(--background);
}
:root[data-theme="turquoise"] body {
  background:
    radial-gradient(1300px 720px at 12% -12%, color-mix(in srgb, var(--mint) 22%, transparent), transparent 62%),
    radial-gradient(1000px 780px at 108% 12%, color-mix(in srgb, var(--mint) 13%, transparent), transparent 58%),
    var(--background);
}
:root[data-theme="dark"] body::before,
:root[data-theme="turquoise"] body::before {
  content: none;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select { outline-color: var(--focus); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(34px, 4vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -0.055em; }
h2 { font-weight: 800; line-height: 1.08; letter-spacing: -0.04em; }
h3 { font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
button, input, select, textarea { font-family: inherit; }
p, li, td, label { line-height: 1.5; }

.app-frame { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: 26px 20px 22px; color: white; background: var(--sidebar-surface); }
.sidebar::after { content: ""; position: absolute; width: 210px; height: 210px; right: -135px; bottom: 90px; border: 1px solid rgba(118,227,214,.14); border-radius: 50%; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.brand-mark { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 16px; background: linear-gradient(145deg, #7ce1d2 0%, #659fcf 45%, #7a6fe9 100%); box-shadow: 0 10px 30px rgba(108, 211, 199, .28); font-size: 13px; letter-spacing: .04em; }
.brand-mark-icon { width: 27px; height: 26px; color: white; }
.brand-copy, .brand-copy span, .brand-copy small { display: block; }
.brand-name { font-size: 15px; letter-spacing: .03em; }
.brand-copy small { margin-top: 3px; color: #91b9bd; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-context { display: flex; align-items: center; gap: 8px; margin: 43px 10px 13px; color: #88adb1; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.context-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #62d1c4; box-shadow: 0 0 0 4px rgba(98,209,196,.12); }
.sidebar-nav { display: grid; gap: 8px; min-height: 0; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: rgba(112,211,199,.32) transparent; }
.nav-loading { min-height: 108px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 11px; border: 1px solid transparent; border-radius: 16px; color: #c8dcde; font-size: 13px; font-weight: 750; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-link:hover, .nav-link:focus-visible { color: white; background: rgba(255,255,255,.08); transform: translateX(2px); }
.nav-link.active { color: white; border-color: rgba(122,224,211,.16); background: linear-gradient(100deg, rgba(87,199,189,.23), rgba(255,255,255,.07)); box-shadow: inset 3px 0 #62d1c4; }
.nav-marker { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; color: #9fc5c8; font-size: 14px; }
.nav-icon { width: 19px; height: 19px; }
.nav-link.active .nav-marker { color: white; border-color: rgba(122,224,211,.3); background: rgba(91,205,192,.14); }
.nav-arrow { margin-left: auto; color: #73d5ca; opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.nav-link.active .nav-arrow, .nav-link:hover .nav-arrow { opacity: 1; transform: translateX(0); }
.sidebar-note { position: relative; z-index: 1; display: grid; gap: 5px; margin-top: auto; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.055); }
.sidebar-note span { color: #bcece6; font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-note small { color: #8eafb3; font-size: 14px; line-height: 1.45; }
.sidebar-profile { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.12); }
.profile-avatar { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--navy); background: white; font-size: 14px; font-weight: 900; }
.profile-menu-root { position: relative; flex: 0 0 auto; }
.profile-avatar-button { width: 42px; padding: 0; border: 0; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.profile-avatar-button:hover, .profile-avatar-button:focus-visible, .profile-avatar-button[aria-expanded="true"] { outline: none; transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(79,208,232,.2), 0 10px 28px rgba(0,15,20,.22); }
.profile-popover { position: absolute; z-index: 80; left: calc(100% + 16px); bottom: 0; display: grid; width: 220px; overflow: hidden; padding: 8px; border: 1px solid rgba(79,208,232,.24); border-radius: 16px; color: #dcebea; background: var(--sidebar-surface); box-shadow: 0 24px 64px rgba(0,10,16,.5); }
.profile-popover header { display: grid; gap: 3px; padding: 10px 11px 12px; border-bottom: 1px solid rgba(79,208,232,.14); }
.profile-popover header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.profile-popover header small { color: #8eafb3; font-size: 14px; }
.profile-popover :is(a, button) { display: flex; min-height: 40px; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-radius: 9px; color: #dcebea; background: transparent; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.profile-popover :is(a, button):hover, .profile-popover :is(a, button):focus-visible { outline: none; color: white; background: rgba(79,208,232,.15); }
.profile-popover :is(a, button) span { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid rgba(79,208,232,.2); border-radius: 9px; color: #5ec5ea; }
.profile-copy { min-width: 0; }
.sidebar-profile strong, .sidebar-profile small { display: block; }
.sidebar-profile strong { max-width: 108px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile small { margin-top: 3px; color: #a9c4c8; font-size: 14px; }
.profile-exit { display: grid; width: 32px; height: 32px; margin-left: auto; place-items: center; border: 0; border-radius: 13px; color: #9bbcc0; background: rgba(255,255,255,.06); cursor: pointer; }
.sidebar-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; }
.theme-switcher-root { position: relative; flex: 0 0 auto; }
.theme-switcher-trigger { border: 0; background: none; cursor: pointer; }
.theme-switcher-trigger:hover, .theme-switcher-trigger:focus-visible, .theme-switcher-trigger.active { outline: none; color: white; }
.theme-switcher-popover { position: absolute; z-index: 80; left: calc(100% + 16px); bottom: 0; display: grid; gap: 2px; width: 180px; overflow: hidden; padding: 8px; border: 1px solid rgba(79,208,232,.24); border-radius: 16px; color: #dcebea; background: var(--sidebar-surface); box-shadow: 0 24px 64px rgba(0,10,16,.5); }
.theme-switcher-option { display: flex; min-height: 40px; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-radius: 9px; color: #dcebea; background: transparent; font: inherit; font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; }
.theme-switcher-option:hover, .theme-switcher-option:focus-visible { outline: none; color: white; background: rgba(79,208,232,.15); }
.theme-switcher-option.active { color: white; }
.theme-switcher-option svg { margin-left: auto; color: #5ec5ea; flex-shrink: 0; }
.theme-switcher-swatch { display: block; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); }
.profile-exit:hover, .profile-exit:focus-visible { color: white; background: rgba(255,255,255,.12); }

@media (min-width: 901px) {
  .app-frame.admin-app-frame, .app-frame.learner-app-frame { grid-template-columns: 84px minmax(0, 1fr); }
  .admin-app-frame .workspace, .learner-app-frame .workspace { padding: 48px clamp(44px, 4.4vw, 80px) 72px; }
  .admin-app-frame .workspace-topbar, .learner-app-frame .workspace-topbar { display: none; }
  .admin-app-frame .workspace-topbar, .learner-app-frame .workspace-topbar,
  .admin-app-frame .page-stack, .learner-app-frame .page-stack,
  .admin-app-frame .global-function-search, .learner-app-frame .global-function-search,
  .admin-app-frame .admin-workspace-layout { width: 100%; max-width: none; }
  .admin-app-frame .sidebar, .learner-app-frame .sidebar { z-index: 100; overflow: visible; align-items: center; padding: 22px 8px 18px; }
  .admin-app-frame .sidebar::after, .learner-app-frame .sidebar::after,
  .admin-app-frame .brand-copy, .learner-app-frame .brand-copy,
  .admin-app-frame .sidebar-note, .learner-app-frame .sidebar-note,
  .admin-app-frame .profile-copy, .learner-app-frame .profile-copy { display: none; }
  .admin-app-frame .brand-mark, .learner-app-frame .brand-mark { width: 44px; height: 44px; border-radius: 13px; background: none; box-shadow: none; }
  .admin-app-frame .brand-mark-icon, .learner-app-frame .brand-mark-icon { width: 34px; height: 33px; color: var(--focus); }
  .admin-app-frame .sidebar-context, .learner-app-frame .sidebar-context { display: none; }
  .admin-app-frame .sidebar-nav, .learner-app-frame .sidebar-nav { margin-top: 38px; }
  .admin-app-frame .sidebar-nav, .learner-app-frame .sidebar-nav { width: 100%; overflow: visible; padding: 0; }
  .admin-app-frame .nav-link, .learner-app-frame .nav-link { justify-content: center; min-height: 50px; padding: 5px; border: 0; border-radius: 16px; background: none; box-shadow: none; }
  .admin-app-frame .nav-link:hover, .learner-app-frame .nav-link:hover,
  .admin-app-frame .nav-link:focus-visible, .learner-app-frame .nav-link:focus-visible { transform: none; background: none; }
  .admin-app-frame .nav-link.active, .learner-app-frame .nav-link.active { border: 0; background: none; box-shadow: none; }
  .admin-app-frame .nav-marker, .learner-app-frame .nav-marker { width: 38px; height: 38px; border: 0; border-radius: 13px; background: none; color: #5c7376; }
  .admin-app-frame .nav-link.active .nav-marker, .learner-app-frame .nav-link.active .nav-marker { color: var(--focus); border: 0; background: none; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--focus) 45%, transparent)); }
  .admin-app-frame .nav-link:hover .nav-marker, .admin-app-frame .nav-link:focus-visible .nav-marker,
  .learner-app-frame .nav-link:hover .nav-marker, .learner-app-frame .nav-link:focus-visible .nav-marker { color: white; }
  .admin-app-frame .nav-icon, .learner-app-frame .nav-icon { width: 24px; height: 24px; }
  .admin-app-frame .nav-label, .learner-app-frame .nav-label,
  .admin-app-frame .nav-arrow, .learner-app-frame .nav-arrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .admin-app-frame .nav-link::after, .learner-app-frame .nav-link::after { content: attr(data-label); position: absolute; z-index: 110; left: calc(100% + 14px); top: 50%; min-width: max-content; padding: 10px 13px; border: 1px solid rgba(126,225,214,.22); border-radius: 13px; color: #e4f2f1; background: rgba(5,27,35,.97); box-shadow: 0 12px 34px rgba(0,10,16,.4); backdrop-filter: blur(16px); font-size: 14px; font-weight: 650; letter-spacing: .01em; opacity: 0; pointer-events: none; transform: translate(6px,-50%); transition: opacity .16s ease, transform .16s ease; }
  .admin-app-frame .nav-link:hover::after, .learner-app-frame .nav-link:hover::after,
  .admin-app-frame .nav-link:focus-visible::after, .learner-app-frame .nav-link:focus-visible::after { opacity: 1; transform: translate(0,-50%); }
  .admin-app-frame .sidebar-profile, .learner-app-frame .sidebar-profile { justify-content: center; width: 100%; margin-top: 0; padding-top: 14px; }
  .admin-app-frame .sidebar-bottom, .learner-app-frame .sidebar-bottom { width: 100%; }
  .admin-app-frame .profile-avatar, .learner-app-frame .profile-avatar { flex-basis: 36px; width: 36px; height: 36px; border-radius: 50%; color: var(--focus); background: color-mix(in srgb, var(--focus) 16%, white); }
  .admin-app-frame .profile-exit, .learner-app-frame .profile-exit { position: absolute; left: calc(100% + 14px); width: 34px; margin: 0; }
}
:root[data-theme="dark"] .admin-app-frame .workspace, :root[data-theme="dark"] .learner-app-frame .workspace { background: var(--background); }
:root[data-theme="dark"] .admin-app-frame .workspace:has(.admin-dashboard-page) {
  position: relative;
  isolation: isolate;
  background: var(--background);
}
:root[data-theme="dark"] .admin-app-frame .workspace:has(.admin-dashboard-page)::before { content: none; }
:root[data-theme="dark"] .admin-app-frame .workspace:has(.admin-dashboard-page) > * {
  position: relative;
  z-index: 1;
}
.workspace { min-width: 0; padding: 0 5vw 72px; }
.workspace-topbar { width: min(1180px, 100%); min-height: 58px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto 29px; border-bottom: 1px solid rgba(205,219,220,.75); }
.workspace-topbar > div { display: flex; gap: 8px; }
.topbar-status { display: inline-flex; align-items: center; gap: 9px; color: #668087; font-size: 14px; font-weight: 800; letter-spacing: .03em; }
.topbar-status > span { width: 7px; height: 7px; border-radius: 50%; background: #4fc1a2; box-shadow: 0 0 0 4px rgba(79,193,162,.12); }
.topbar-chip { display: inline-flex; min-height: 28px; align-items: center; padding: 0 11px; border: 1px solid #e0e9e9; border-radius: 999px; color: #71858a; background: rgba(255,255,255,.65); font-size: 14px; font-weight: 800; }
.topbar-chip.accent { color: #5d51c6; border-color: #e1ddfb; background: #efedfd; }
.page-stack { width: min(1180px, 100%); margin: 0 auto; }
.page-stack.editor-page { width: min(1520px, 100%); }
.page-stack.learner-home { display: flex; flex-direction: column; gap: 28px; }
.page-stack.learner-home > * { margin-top: 0; }
.page-stack.learner-home > .button.primary { align-self: flex-start; width: fit-content; }
.page-stack.learner-home > .learner-journey { margin-bottom: 16px; }
.page-stack > * + * { margin-top: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.global-function-search, .section-function-guide { width: min(1180px,100%); margin: 0 auto 22px; }
.global-function-search { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(330px,1.25fr); gap: 17px 24px; padding: 22px; background: radial-gradient(circle at 95% 0%, var(--lavender-soft), transparent 44%), linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--mint-soft) 48%, var(--surface))); }
.function-search-copy { display: flex; align-items: center; gap: 14px; }.function-search-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--lavender)); font-size: 24px; }.function-search-copy h2 { margin: 3px 0 4px; font-size: 20px; }.function-search-copy p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.function-search-field { position: relative; align-self: center; margin: 0; }.function-search-field input { width: 100%; min-height: 50px; padding: 0 50px 0 16px; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line)); border-radius: 16px; color: var(--ink); background: var(--field); box-shadow: 0 11px 28px color-mix(in srgb, var(--primary) 9%, transparent); font-size: 15px; outline: none; }.function-search-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent), 0 11px 28px color-mix(in srgb, var(--primary) 9%, transparent); }.function-search-field kbd { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--subtle); font: inherit; font-size: 14px; }
.function-search-results { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }.function-search-results > a { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: color-mix(in srgb, var(--field) 88%, transparent); transition: transform .16s ease, border-color .16s ease; }.function-search-results > a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 32%, var(--line)); }.function-search-results > a > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; color: var(--primary); background: var(--mint-soft); font-size: 13px; font-weight: 900; }.function-search-results strong, .function-search-results small { display: block; }.function-search-results strong { font-size: 13px; }.function-search-results small { margin-top: 3px; color: var(--muted); font-size: 13px; }.function-search-results i { color: var(--primary); font-size: 14px; font-style: normal; }.function-search-empty { grid-column: 1 / -1; padding: 16px; border-radius: 13px; background: var(--subtle); }.function-search-empty strong, .function-search-empty small { display: block; }.function-search-empty strong { font-size: 14px; }.function-search-empty small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.section-function-guide { overflow: hidden; padding: 0; }.section-function-guide > button { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; color: var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--mint-soft) 58%, var(--surface)), var(--surface)); text-align: left; cursor: pointer; }.section-guide-marker { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--lavender)); font-size: 13px; font-weight: 900; }.section-function-guide > button strong, .section-function-guide > button small { display: block; }.section-function-guide > button strong { margin-top: 2px; font-size: 14px; }.section-function-guide > button small { margin-top: 3px; color: var(--muted); font-size: 13px; }.section-function-guide > button > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--primary); background: var(--field); font-size: 15px; font-style: normal; }.section-function-guide > nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 7px; padding: 0 15px 15px; border-top: 1px solid var(--line); }.section-function-guide > nav a { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; margin-top: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--field); }.section-function-guide > nav a[aria-current="page"] { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); background: var(--mint-soft); }.section-function-guide nav span { font-size: 13px; font-weight: 900; }.section-function-guide nav small { color: var(--muted); font-size: 13px; }.section-function-guide nav i { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--primary); font-size: 14px; font-style: normal; }
.global-function-search { position: relative; display: block; width: 100%; margin: 0; padding: 0; background: transparent; }
.global-function-search .function-search-field { display: block; width: 100%; }
.global-function-search .function-search-field input { min-height: 56px; padding-left: 50px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); box-shadow: none; font-weight: 450; }
.global-function-search .function-search-field input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.global-function-search .function-search-field input::placeholder { color: var(--muted); font-weight: 450; opacity: 1; }
.global-function-search .function-search-icon { position: absolute; z-index: 2; left: 20px; top: 50%; transform: translateY(-50%); display: block; width: 18px; height: 18px; border-radius: 0; background: none; color: var(--muted); }
.global-function-search .function-search-icon svg { display: block; width: 100%; height: 100%; }
.global-function-search .function-search-field kbd { right: 16px; width: auto; height: auto; padding: 6px 9px; border-radius: 7px; font-size: 10.5px; font-weight: 700; }
.global-function-search .function-search-results { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 10px; box-shadow: 0 22px 55px rgba(13,49,58,.18); }
.workspace:has(.admin-workspace-layout) { padding-inline: 5vw; }
.workspace:has(.admin-workspace-layout) .workspace-topbar { width: min(1420px,100%); }
.admin-workspace-page { width: min(1420px,100%); margin: 0 auto; }
.admin-workspace-page > .page-header { margin-bottom: 24px; }
.admin-workspace-layout { display: grid; width: 100%; grid-template-columns: 275px minmax(0,1fr); gap: 24px; align-items: stretch; }
.admin-workspace-layout > * { min-height: calc(100dvh - 220px); }
.admin-section-content { min-width: 0; }.admin-section-content > .page-stack { width: 100%; }
.section-function-sidebar { overflow: hidden; padding: 22px; border-radius: 32px; }
.section-function-sidebar nav { display: grid; gap: 10px; }.section-function-sidebar nav a { display: grid; min-height: 72px; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: color-mix(in srgb, var(--field) 92%, transparent); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }.section-function-sidebar nav a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 25%, var(--line)); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 8%, transparent); }.section-function-sidebar nav a[aria-current="page"] { border-color: transparent; background: var(--mint-soft); }.section-function-sidebar .function-card-index { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 13px; color: var(--primary); background: var(--mint-soft); font-size: 13px; font-weight: 900; }.section-function-sidebar nav strong, .section-function-sidebar nav small { display: block; }.section-function-sidebar nav strong { font-size: 14px; line-height: 1.3; }.section-function-sidebar nav small { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; }.section-function-sidebar nav i { color: var(--primary); font-size: 13px; font-style: normal; }
.admin-section-content .audit-list > button { grid-template-columns: 8px 80px minmax(115px,.85fr) minmax(110px,1.15fr) auto; }
.admin-section-content .audit-list p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-section-content .certificate-layout { grid-template-columns: 1fr; }
.admin-section-content .certificate-rules { position: static; }
.page-header.split { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.page-header.editor-top-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-header.editor-top-row .library-search-field { flex: 0 1 320px; margin: 0; }
.page-header-back { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; cursor: pointer; transition: color .16s ease; }
.page-header-back svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--muted); transition: transform .16s ease; }
.page-header-back:hover { color: var(--primary); }
.page-header-back:hover svg { color: var(--primary); transform: translateX(-2px); }
.page-header.split h1, .page-header.greet-header h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.page-header.greet-header .greeting-name { color: #146d80; }
:root[data-theme="dark"] .page-header.greet-header .greeting-name { color: var(--primary); }
:root[data-theme="turquoise"] .page-header.greet-header .greeting-name { color: #159b92; }
.page-header .muted { max-width: 700px; }
.page-header.greet-header { position: relative; padding-right: 200px; }
.course-switch-trigger { position: absolute; top: 4px; right: 0; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--primary); background: var(--mint-soft); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: opacity .16s ease; }
.course-switch-trigger:disabled { color: var(--muted); background: var(--field); cursor: not-allowed; opacity: .7; }
.course-switch-select-wrap { position: absolute; top: 4px; right: 0; max-width: 240px; }
.course-switch-select-wrap .ui-select-trigger { min-height: 40px; padding: 0 14px; font-size: 13px; font-weight: 700; }
@media (max-width: 900px) {
  .page-header.greet-header { padding-right: 0; }
  .course-switch-trigger { position: static; margin-top: 12px; }
  .course-switch-select-wrap { position: static; margin-top: 12px; max-width: none; }
}
.page-header.greet-header .eyebrow { margin-bottom: 8px; font-size: 15px; color: var(--muted); }
.page-header.greet-header h1 { margin-bottom: 0; color: #191b1f; }
:root[data-theme="dark"] .page-header.greet-header h1 { color: #eaf0f4; }
:root[data-theme="turquoise"] .page-header.greet-header h1 { color: #0d3a3c; }
.streak-row { display: flex; align-items: center; gap: 20px; }
.streak-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; color: #b3462f; background: var(--rose-soft); font-size: 15px; font-weight: 700; }
.streak-pill svg { width: 16px; height: 16px; }
.streak-days { display: flex; gap: 7px; }
.streak-days span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 700; }
.streak-days span.on { border-color: #ff5a3c; background: #ff5a3c; color: #fff; }
.messages-intro { display: flex; flex-direction: column; gap: 18px; padding: 22px; }
.messages-intro ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.messages-intro li { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius-lg); background: var(--subtle); }
.messages-intro li strong { font-size: 14px; }
.messages-intro li span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.messages-intro > .button { align-self: flex-start; }
.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.side-grid .side-card { display: block; padding: 22px; border-radius: var(--radius-lg); border: 0; background: var(--subtle); color: inherit; text-decoration: none; transition: transform .16s ease, background-color .16s ease; }
.side-grid .side-card:hover, .side-grid .side-card:focus-visible { transform: translateY(-2px); background: color-mix(in srgb, var(--primary) 6%, var(--subtle)); outline: none; }
.side-grid .icon-wrap { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; background: var(--mint-soft); color: var(--primary); }
.side-grid .icon-wrap svg { width: 17px; height: 17px; }
.side-grid h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }
.side-grid p { margin: 0; color: var(--muted); font-size: 12.5px; }
@media (max-width: 640px) { .side-grid { grid-template-columns: 1fr; } .streak-row { flex-wrap: wrap; } }
.eyebrow { margin-bottom: 10px; color: #299b91; font-size: 13px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.light { color: rgba(255,255,255,.92); }
.muted { color: var(--muted); font-weight: 550; line-height: 1.65; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; border: 0; border-radius: 13px; cursor: pointer; font-weight: 800; }
.button.primary { color: white; background: var(--primary); box-shadow: 0 12px 26px rgba(28, 167, 190, .2); }
.button.secondary { color: var(--ink); background: white; border: 1px solid var(--line); box-shadow: none; }
.button.gold { color: #3a2e10; background: var(--gold); }
.button.full { width: 100%; }
.button:disabled { cursor: not-allowed; filter: grayscale(.4); opacity: .55; }
.surface, .metric-card { padding: 28px; border: 1px solid rgba(222,233,233,.9); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.hero-card { position: relative; min-height: 255px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 38px; border-radius: var(--radius-xl); color: white; background: linear-gradient(125deg, #17444d 0%, #245b61 56%, #3aa79b 100%); box-shadow: var(--shadow); }
.hero-card::after { content: ""; position: absolute; width: 380px; height: 380px; right: -80px; top: -190px; border-radius: 50%; background: radial-gradient(circle at 35% 60%, rgba(180,178,255,.9), rgba(99,217,203,.1) 62%, transparent 63%); }
.hero-card > * { position: relative; z-index: 1; }
.hero-card h2 { margin-bottom: 14px; font-size: 40px; line-height: 1.1; }
.hero-card p { max-width: 650px; color: #d7e8e9; line-height: 1.6; }
.hero-badge { display: flex; min-width: 190px; align-items: center; gap: 14px; padding: 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; background: rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.hero-badge strong { font-size: 40px; }
.hero-badge span { color: #d9eeee; font-size: 14px; line-height: 1.35; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.metric-card { position: relative; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; width: 105px; height: 105px; right: -48px; bottom: -55px; border-radius: 50%; background: rgba(87,199,189,.08); }
.metric-card span, .metric-card small { display: block; color: var(--muted); font-weight: 600; }
.metric-card strong { display: block; margin: 12px 0 8px; font-size: 40px; letter-spacing: -.04em; }
.metric-card small { font-size: 13px; }
.metric-icon { display: grid; width: 38px; height: 38px; margin-bottom: 20px; place-items: center; border-radius: 13px; font-size: 14px; font-weight: 900; }
.metric-icon.mint { color: #248e85; background: var(--mint-soft); }
.metric-icon.violet { color: #6758d4; background: var(--lavender-soft); }
.metric-icon.rose { color: #aa6078; background: var(--rose-soft); }
.admin-next-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 24px 27px; border: 1px solid rgba(216,229,229,.9); border-radius: var(--radius-lg); background: linear-gradient(110deg, rgba(255,255,255,.93), rgba(232,247,244,.8)); box-shadow: var(--shadow); }
.next-step-index { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, #45b9af, #776be4); font-size: 13px; font-weight: 900; }
.admin-next-step .eyebrow { margin-bottom: 4px; }
.admin-next-step h3, .admin-next-step p { margin-bottom: 0; }
.admin-next-step h3 { font-size: 20px; }
.admin-next-step p:not(.eyebrow) { margin-top: 5px; color: var(--muted); font-size: 15px; font-weight: 550; }
.text-action { color: #278f86; font-size: 14px; font-weight: 900; }
.soft-pill, .status { display: inline-flex; width: fit-content; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.soft-pill { color: #248f86; background: var(--mint-soft); }
.table-surface { padding: 0; overflow: hidden; box-shadow: none; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.table-toolbar > div:first-child strong, .table-toolbar > div:first-child small { display: block; }
.table-toolbar > div:first-child small { margin-top: 4px; color: var(--muted); font-size: 14px; }
.table-tools { display: flex; align-items: center; gap: 10px; }
.reset-filter { min-height: 38px; padding: 0 12px; border: 1px solid #dbe6e7; border-radius: 13px; background: white; color: #287f79; font-size: 14px; font-weight: 850; cursor: pointer; }
.reset-filter:disabled { color: #aebabc; background: #f6f8f8; cursor: default; }
.empty-state { display: grid; min-height: 300px; place-items: center; align-content: center; padding: 40px; text-align: center; }
.empty-state > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; background: var(--lavender-soft); color: var(--lavender); font-size: 24px; }
.empty-state h3 { margin: 16px 0 5px; }
.empty-state p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 920px; }
.table-wrap table tbody tr { transition: background .14s ease; }
.table-wrap table tbody tr:hover { background: var(--subtle); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 18px 26px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th.actions-column, td.actions-column { width: 60px; padding: 18px 10px; text-align: center; }
.table-wrap table { table-layout: fixed; }
.table-wrap th, .table-wrap td { overflow: hidden; text-overflow: ellipsis; }
.table-wrap table th:nth-child(1), .table-wrap table td:nth-child(1) { width: 17%; }
.table-wrap table th:nth-child(2), .table-wrap table td:nth-child(2) { width: 12%; }
.table-wrap table th:nth-child(3), .table-wrap table td:nth-child(3) { width: 230px; padding-left: 14px; padding-right: 14px; }
.table-wrap table th:nth-child(4), .table-wrap table td:nth-child(4) { width: 13%; }
.table-wrap table th:nth-child(5), .table-wrap table td:nth-child(5) { width: 13%; }
.table-wrap table th:nth-child(6), .table-wrap table td:nth-child(6) { width: 13%; }
.table-wrap table th:nth-child(7), .table-wrap table td:nth-child(7) { width: 14%; }
.table-wrap table th:nth-child(n+2):nth-child(-n+7), .table-wrap table td:nth-child(n+2):nth-child(-n+7) { text-align: center; }
.table-wrap table td:nth-child(n+2):nth-child(-n+7) .ui-select-root { margin: 0 auto; }
.table-wrap table td .inline-course-cell { justify-content: center; }
.table-wrap table td:nth-child(2) .company-name-cell { justify-content: center; }
th { color: var(--muted); background: #fbfcfc; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
td { font-size: 13px; }
td strong, td small { display: block; }
td small { margin-top: 5px; color: var(--muted); font-size: 13px; }
.user-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-cell > span:last-child { min-width: 0; overflow: hidden; }
.user-cell strong, .user-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.user-cell { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 9px; }
button.user-cell:hover strong { color: var(--primary); }
button.user-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.table-avatar { display: grid; width: 38px; height: 38px; flex-shrink: 0; place-items: center; border-radius: 13px; color: #267f79; background: linear-gradient(145deg, #dbf5f0, #eeebfd); font-size: 14px; font-weight: 900; }
.status.active { color: #258773; background: #e0f6ed; }
.status.inactive { color: #9c6777; background: var(--rose-soft); }
.narrow-page { max-width: 1100px; }
.back-link { display: inline-block; margin-bottom: 24px; color: var(--primary); font-weight: 800; }
.content-detail { display: flex; flex-direction: column; }
.content-detail > .empty-state { flex: 1; }
.user-create-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.create-guide { position: relative; overflow: hidden; padding: 30px 26px; border-radius: var(--radius-lg); color: white; background: radial-gradient(circle at 100% 0%, rgba(22,190,140,.4), transparent 34%), linear-gradient(145deg, #17454e, #23646a); box-shadow: var(--shadow); }
.create-guide::after { content: ""; position: absolute; width: 170px; height: 170px; right: -105px; bottom: -90px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.025); }
.create-guide h2 { font-size: 24px; line-height: 1.15; }
.create-guide ol { display: grid; gap: 8px; margin: 30px 0; padding: 0; list-style: none; }
.create-guide li { display: flex; gap: 11px; padding: 12px; border-radius: 13px; color: #c2d9db; }
.create-guide li.current { color: white; background: rgba(255,255,255,.1); }
.create-guide li > span { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 9px; color: #a8e4dd; background: rgba(89,205,191,.14); font-size: 14px; font-weight: 900; }
.create-guide li strong, .create-guide li small { display: block; }
.create-guide li strong { font-size: 13px; }
.create-guide li small { margin-top: 4px; color: #92b4b7; font-size: 14px; line-height: 1.35; }
.guide-note { position: relative; z-index: 1; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: #a8c6c9; font-size: 14px; line-height: 1.5; }
.form-card { padding: 32px; }
.create-user-dialog { position: relative; width: min(920px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 32px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); text-align: left; animation: confirm-dialog-in .18s ease; }
.create-user-dialog h2 { margin: 4px 34px 16px 0; font-size: 20px; }
.create-user-dialog .form-grid { grid-template-columns: repeat(3, 1fr); align-content: start; min-height: 190px; }
.create-user-dialog .form-section-heading, .create-user-dialog .form-section-divider { margin-bottom: 4px; }
.steps-mini { display: flex; gap: 8px; margin-bottom: 24px; }
.steps-mini span, .steps-mini button { padding: 7px 13px; border: 0; border-radius: 999px; background: var(--subtle); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.steps-mini span.on, .steps-mini button.on { background: var(--mint-soft); color: var(--primary); }
.steps-mini button:hover:not(.on) { color: var(--ink); }
.form-section-heading { display: flex; gap: 13px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.form-section-heading > span { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 13px; color: #2a9087; background: var(--mint-soft); font-size: 14px; font-weight: 900; }
.form-section-heading h3, .form-section-heading p { margin-bottom: 0; }
.form-section-heading h3 { font-size: 16px; }
.form-section-heading p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 22px; }
.wide-field { grid-column: 1 / -1; }
.form-section-divider { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 18px 0 4px; border-top: 1px solid var(--line); }
.form-section-divider > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 13px; color: var(--primary); background: var(--mint-soft); font-size: 14px; font-weight: 900; }
.form-section-divider h3, .form-section-divider p { margin: 0; }.form-section-divider h3 { font-size: 15px; }.form-section-divider p { margin-top: 3px; color: var(--muted); font-size: 14px; }
.password-create-field { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.password-create-field button { padding: 0 14px; color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: 13px; background: var(--mint-soft); font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; }
.password-visibility-field { position: relative; }
.password-visibility-field input { width: 100%; padding-right: 42px; }
.password-visibility-toggle { position: absolute; right: 4px; top: 50%; display: grid; width: 32px; height: 32px; transform: translateY(-50%); place-items: center; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; transition: color .16s ease, background-color .16s ease; }
.password-visibility-toggle:hover { color: var(--primary); background: var(--mint-soft); }
.password-visibility-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.invitation-option { grid-template-columns: 22px 1fr; align-items: start; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--subtle); cursor: pointer; }
.invitation-option input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); }.invitation-option > span { display: grid; gap: 3px; }.invitation-option small { color: var(--muted); }
label > small { color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.4; }
label { display: grid; gap: 9px; color: #385158; font-size: 14px; font-weight: 800; }
input:not([type="checkbox"]), select { width: 100%; min-height: 50px; padding: 0 15px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: var(--field); }
input:focus, select:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(87,199,189,.13); }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%23798589' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; cursor: pointer; }

.ui-select-root { position: relative; display: inline-flex; max-width: 100%; }
.ui-select-trigger { display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 15px; border: 1px solid var(--line); border-radius: 9px; background-color: var(--field); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ui-select-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-label { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; }
.ui-select-option-icon { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.ui-select-option-icon svg { display: block; width: 13px; height: 13px; }
.ui-select-trigger .ui-select-chevron { flex: 0 0 auto; width: 11px; height: 11px; color: var(--muted); transition: transform .15s ease; }
.ui-select-trigger[aria-expanded="true"] .ui-select-chevron { transform: rotate(180deg); }
.ui-select-trigger:disabled { cursor: default; opacity: .6; }
.ui-select-trigger:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.ui-select-menu { z-index: 300; width: max-content; max-width: 260px; max-height: 264px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); animation: confirm-dialog-in .14s ease; }
.ui-select-menu li { margin: 0; }
.ui-select-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; font: inherit; font-size: 11.5px; font-weight: 600; text-align: left; cursor: pointer; }
.ui-select-option:hover, .ui-select-option:focus-visible { outline: none; background: var(--mint-soft); }
.ui-select-option[aria-selected="true"] { color: var(--primary); background: var(--mint-soft); font-weight: 800; }
.ui-select-option:disabled { cursor: not-allowed; opacity: .5; }
.ui-select-option:disabled:hover { background: transparent; }
.ui-select-option svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--primary); }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.course-card { position: relative; min-height: 335px; overflow: hidden; display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; padding: 38px; border: 1px solid white; border-radius: var(--radius-xl); background: linear-gradient(125deg, rgba(255,255,255,.96), rgba(228,246,245,.9) 58%, rgba(229,225,251,.9)); box-shadow: var(--shadow); }
.learner-process-nav { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: stretch; gap: 12px; margin-bottom: 24px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 10px 30px rgba(21,55,63,.06); }
.learner-process-home { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-right: 1px solid var(--line); color: var(--ink); }
.learner-process-home > span { color: var(--primary); font-weight: 900; }.learner-process-home div { display: grid; gap: 3px; }.learner-process-home strong { font-size: 14px; }.learner-process-home small { color: var(--muted); font-size: 13px; }
.learner-process-nav ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.learner-process-nav li { position: relative; min-width: 0; }.learner-process-nav li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 50%; right: -5px; width: 10px; height: 1px; background: var(--line); }
.learner-process-nav li .process-step { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border-radius: 13px; color: var(--muted); }
.learner-process-nav li .process-step > span { display: grid; flex: 0 0 24px; height: 24px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 13px; font-weight: 900; }.learner-process-nav li .process-step div { display: grid; min-width: 0; gap: 3px; }.learner-process-nav li strong { color: var(--ink); font-size: 14px; }.learner-process-nav li small { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.learner-process-nav li.active .process-step { background: var(--mint-soft); }.learner-process-nav li.active .process-step > span { border-color: var(--primary); color: white; background: var(--primary); }.learner-process-nav li.done .process-step > span { border-color: #77c8b4; color: #177564; background: #e4f8f1; }.learner-process-nav li.locked .process-step { cursor: not-allowed; opacity: .48; }.learner-process-nav li.locked strong { color: var(--muted); }
.course-copy { position: relative; z-index: 1; }
.course-kicker { display: flex; align-items: center; gap: 12px; }
.course-format { color: #73888d; font-size: 14px; font-weight: 750; }
.course-copy h2 { margin: 25px 0 12px; font-size: 40px; }
.course-copy p { max-width: 630px; color: var(--muted); line-height: 1.6; }
.course-progress-line { width: min(520px, 100%); height: 7px; overflow: hidden; margin-top: 25px; border-radius: 999px; background: rgba(120,145,149,.16); }
.course-progress-line > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4cbeb3, #7bd8cc); }
.course-meta { display: flex; width: min(520px, 100%); justify-content: space-between; margin: 9px 0 22px; color: #547077; font-size: 13px; font-weight: 700; }
.course-meta strong { color: #248f86; }
.course-visual { position: relative; display: grid; place-items: center; }
.progress-orb { display: grid; width: 220px; height: 220px; place-self: center; place-items: center; border-radius: 50%; background: conic-gradient(var(--lavender) var(--progress), #dbe9e8 0); }
.progress-orb::after { content: ""; position: absolute; width: 156px; height: 156px; border-radius: 50%; background: white; }
.progress-orb span { position: relative; z-index: 1; font-size: 40px; font-weight: 900; }
.visual-caption { margin-top: 14px; color: #70858a; font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.info-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.info-grid h3 { font-size: 24px; }
.next-lesson-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 17px; }
.lesson-number { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: #268e85; background: linear-gradient(145deg, var(--mint-soft), #e9e7fb); font-size: 14px; font-weight: 900; }
.next-lesson-card .eyebrow { margin-bottom: 4px; }
.next-lesson-card h3, .next-lesson-card p { margin-bottom: 0; }
.round-action { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: white; background: #2c9b92; font-weight: 900; }
.accent-surface { position: relative; overflow: hidden; background: linear-gradient(145deg, #fff, var(--lavender-soft)); }
.accent-surface::after { content: ""; position: absolute; width: 130px; height: 130px; right: -65px; bottom: -65px; border-radius: 50%; background: rgba(125,109,229,.08); }
.quote-mark { position: absolute; right: 25px; top: 11px; color: rgba(118,103,221,.13); font-family: Georgia, serif; font-size: 80px; line-height: 1; }
.learner-tip { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid #dbe9e8; border-radius: 16px; background: rgba(255,255,255,.68); }
.tip-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; color: #5f55c7; background: var(--lavender-soft); }
.learner-tip strong, .learner-tip p { display: block; margin: 0; }
.learner-tip strong { font-size: 13px; }
.learner-tip p { margin-top: 3px; color: var(--muted); font-size: 15px; }
.course-experience { display: block; width: 100%; }
.course-experience-back { margin-bottom: 18px; color: var(--ink); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.learning-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; align-items: stretch; width: 100%; }
.lesson-sidebar { display: flex; flex-direction: column; padding: 26px; border-radius: var(--radius-lg); background: var(--subtle); color: var(--ink); }
.lesson-sidebar h2 { font-size: 20px; line-height: 1.25; color: var(--ink); }
.lesson-sidebar > small { display: block; margin-top: 9px; color: var(--muted); }
.mini-progress { height: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.mini-progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.sidebar-groups { display: grid; gap: 18px; margin-top: 26px; }
.sidebar-group summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary::before { content: "▸"; flex: 0 0 auto; margin-right: 2px; font-size: 14px; transition: transform .15s ease; }
.sidebar-group[open] > summary::before { transform: rotate(90deg); }
.sidebar-group summary > span:first-child { flex: 1; }
.lesson-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.lesson-list li { border-radius: 13px; color: var(--muted); }
.lesson-list li.current { color: var(--ink); background: var(--surface); }
.lesson-list li.locked { color: color-mix(in srgb, var(--muted) 60%, var(--background)); cursor: not-allowed; }
.lesson-list button, .lesson-list a, .lesson-list > li > span { display: flex; width: 100%; gap: 11px; padding: 13px; border: 0; border-radius: inherit; color: inherit; background: transparent; text-align: left; cursor: pointer; text-decoration: none; }
.lesson-list li.locked > span { cursor: not-allowed; }
.lesson-list button:hover, .lesson-list a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lesson-list button > span, .lesson-list a > span, .lesson-list li.locked > span > span { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--surface); font-size: 13px; }
.lesson-list strong, .lesson-list small { display: block; font-size: 13px; line-height: 1.35; }
.lesson-list small { margin-top: 4px; color: var(--muted); }
.longread { display: flex; flex-direction: column; min-height: 760px; padding: 26px 60px 50px; border: 1px solid white; border-radius: var(--radius-xl); background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.longread header { padding-bottom: 28px; }
.longread h1 { font-size: 40px; }
.longread-lead { max-width: 650px; margin-bottom: 0; color: #6e8388; font-size: 16px; line-height: 1.65; }
.longread-body { padding: 30px 0; color: #36545a; font-family: var(--font-ui); font-size: 20px; font-weight: 400; line-height: 1.75; letter-spacing: -.012em; }
.longread-body p { white-space: pre-line; }
.longread-body h2 { margin-top: 34px; color: var(--ink); font-family: var(--font-ui); }
.longread-body blockquote { margin: 28px 0; padding: 22px 24px; border-left: 4px solid var(--mint); border-radius: 0 15px 15px 0; background: var(--mint-soft); }
.longread-html img { display: block; height: auto; max-width: 100%; border-radius: 13px; }
.longread-html .editor-image-frame { display: block; box-sizing: border-box; max-width: 100%; margin: 16px 0; border-radius: 13px; overflow: hidden; }
.longread-html .editor-image-frame img.editor-image { display: block; width: 100%; height: 100%; }
.longread-html :is(table) { width: 100%; border-collapse: collapse; table-layout: fixed; }
.longread-html :is(td, th) { overflow-wrap: break-word; word-break: break-word; white-space: normal; }
.longread-html :is(td, th) { padding: 8px; border: 1px solid var(--line); }
.longread-html ul, .longread-html ol { padding-left: 22px; margin: 16px 0; }
.longread-html li { margin: 6px 0; }
.longread-html ul { list-style-type: disc; }
.longread-html ul ul { list-style-type: circle; }
.longread-html ul ul ul { list-style-type: square; }
.longread-html ol { list-style-type: decimal; }
.longread-html ol ol { list-style-type: lower-alpha; }
.longread-html ol ol ol { list-style-type: lower-roman; }
.longread-html :is(ul, ol) :is(ul, ol) { margin: 2px 0; }
.document-page a, .longread-html a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.longread-section { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; margin: 32px 0; padding: 27px; border-radius: 16px; background: linear-gradient(145deg, #f1faf8, #f5f3fd); }
.longread-section h2 { margin: 0 0 10px; font-size: 20px; }
.longread-section p { margin: 0; }
.section-index { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: #248f86; background: white; font-family: var(--font-ui); font-size: 14px; font-weight: 900; box-shadow: 0 8px 20px rgba(25,60,67,.08); }
.safe-note { display: flex; gap: 13px; margin-top: 30px; padding: 18px; border: 1px solid #dce9e8; border-radius: 16px; background: var(--field); font-family: var(--font-ui); }
.safe-note > span { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 13px; color: #268e85; background: var(--mint-soft); font-weight: 900; }
.safe-note strong { font-size: 13px; }
.safe-note p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.lesson-success { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px 18px; border: 1px solid rgba(34,155,137,.24); border-radius: 16px; background: #eaf9f5; }
.lesson-success > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 13px; background: var(--primary); color: white; font-weight: 900; }
.lesson-success p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.reading-gate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.reading-gate > div { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 13px; background: var(--surface); }
.reading-gate > div > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--surface-strong); color: var(--muted); font-weight: 900; }
.reading-gate p { display: grid; gap: 2px; margin: 0; }
.reading-gate strong { font-size: 14px; }
.reading-gate small { color: var(--muted); font-size: 14px; }
.reading-gate.ready { border-color: rgba(34,155,137,.35); background: rgba(34,155,137,.08); }
.reading-gate.ready > div > span { background: var(--primary); color: white; }
.lesson-hero { display: flex; align-items: flex-start; gap: 40px; }
.lesson-hero-text { flex: 1; min-width: 0; }
.lesson-progress-ring { flex: 0 0 220px; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 4px; padding: 30px 24px; border-radius: var(--radius-lg); background: var(--subtle); text-align: center; }
.lesson-progress-ring svg { width: 96px; height: 96px; }
.lesson-progress-ring circle { fill: none; stroke-width: 8; }
.lesson-progress-ring circle.bg { stroke: var(--line); }
.lesson-progress-ring circle.fg { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
.lesson-progress-ring text { font-family: var(--font-ui); font-size: 16px; font-weight: 800; fill: var(--ink); }
.lesson-progress-ring p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) { .lesson-hero { flex-direction: column; } .lesson-progress-ring { flex: 1 1 auto; width: 100%; } }
.lesson-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 26px; }
.lesson-actions > div { display: flex; align-items: center; gap: 12px; }
.lesson-actions small { color: var(--muted); font-size: 14px; }
.login-page { --login-outer-gap: max(45px, calc(22vw - 230px)); --login-terminal-chrome: #14212c; --ink: #edf7f7; --muted: #b5c7ca; --field: #14212c; --line: rgba(177,222,226,.22); --primary: #4fc8df; --mint-soft: rgba(79,200,223,.16); --lavender-soft: rgba(38,184,145,.15); position: relative; isolation: isolate; display: grid; width: 100vw; height: 100dvh; overflow: hidden; grid-template-columns: 1.12fr .88fr; color: var(--ink); background: radial-gradient(circle at 18% 24%, rgba(44,169,169,.22), transparent 34%), linear-gradient(118deg, #176f73 0%, #12666c 43%, #0c3843 68%, #091d29 100%); font-family: var(--font-ui); }
.login-page, .login-page button, .login-page input, .login-page label { font-family: var(--font-ui); }
.login-color-bends { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; transition: background-color .35s ease; }
.login-color-bends-canvas { position: absolute; inset: 0; }
.login-color-bends-static { width: 100%; height: 100%; background: linear-gradient(128deg, #8ce9dd 0%, #3fc9c4 32%, #1ca7be 58%, #16be8c 100%); }
.login-story { position: relative; z-index: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 46px var(--login-outer-gap) 42px; color: white; background: transparent; text-shadow: 0 2px 24px rgba(1,18,24,.38); }
.login-story > * { position: relative; z-index: 1; }
.login-story .eyebrow.light { color: #ffffff; text-shadow: 0 1px 16px rgba(0,16,23,.54); }
.login-card-frame { position: relative; width: min(460px, 100%); }
.login-story h1 { color: #ffffff; font-size: clamp(44px, 5.4vw, 78px); font-weight: 700; }
.login-story h1 > span { color: #ffffff; }
.login-story p:not(.eyebrow) { margin-top: 22px; max-width: 680px; color: rgba(255,255,255,.88); font-size: 18px; font-weight: 300; line-height: 1.65; }
.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-weight: 800; }
.login-brand span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; background: linear-gradient(135deg, #70ded0, #7b70ec); font-size: 13px; }
.login-brand div { font-size: 15px; }
.login-brand small { display: block; margin-top: 3px; color: #a8cccf; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.login-brand-spacer { display: none; }
.login-testimonials { position: relative; z-index: 2; overflow: hidden; width: 100%; margin-top: 34px; padding-block: 14px; mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%); }
.login-testimonials-track { display: flex; width: max-content; gap: 14px; animation: login-testimonials-run 40s linear infinite; will-change: transform; }
.login-testimonials:has(.login-testimonial:is(:hover, :focus-visible)) .login-testimonials-track { animation-play-state: paused; }
.login-testimonials-group { display: flex; gap: 14px; }
.login-testimonial { display: flex; width: 380px; flex-direction: column; padding: 20px 22px; border: 1px solid rgba(255,255,255,.3); border-radius: 16px; outline: none; color: #ffffff; background: rgba(255,255,255,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: opacity .32s ease, filter .32s ease, transform .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, box-shadow .32s ease; }
.login-testimonial::before { display: none; content: none; }
.login-testimonials:has(.login-testimonial:is(:hover, :focus-visible)) .login-testimonial { opacity: .34; filter: saturate(.55) brightness(.72); transform: scale(.985); }
.login-testimonials:has(.login-testimonial:is(:hover, :focus-visible)) .login-testimonial:is(:hover, :focus-visible) { position: relative; z-index: 2; opacity: 1; filter: none; transform: translateY(-3px) scale(1.018); border-color: rgba(205,255,249,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 42px rgba(5,38,46,.2), 0 0 26px rgba(94,224,208,.16); }
.login-testimonial blockquote { margin: 0; color: #ffffff; font-size: 16px; font-weight: 500; font-style: normal; line-height: 1.5; }
.login-testimonial footer { display: flex; align-items: center; gap: 9px; }
.login-testimonial footer small { display: block; margin-top: 10px; color: rgba(255,255,255,.75); font-size: 11.5px; font-style: italic; font-weight: 450; line-height: 1.35; font-synthesis: style; }
.login-orb { display: none; }
.login-panel { position: relative; z-index: 1; overflow: visible; display: grid; place-items: center; padding: clamp(22px, 4vw, 45px); background: transparent; border-left: 0; }
.login-panel::before { content: ""; position: absolute; z-index: 0; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--mint-soft) 0%, transparent 70%); top: -80px; right: -80px; opacity: .9; pointer-events: none; }
.login-panel::after { content: ""; position: absolute; z-index: 0; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--lavender-soft) 0%, transparent 70%); bottom: -70px; left: -70px; pointer-events: none; }
.login-card-frame { position: relative; z-index: 1; }
.login-form-wrap { width: 100%; max-height: calc(100dvh - 64px); overflow: hidden auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); background: rgba(9,24,34,.72); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 30px 70px -24px rgba(0,8,14,.52); scrollbar-width: thin; }
.login-form-wrap input:not([type="checkbox"]) { background: transparent; }
.login-terminal-content { padding: 26px clamp(28px, 4vw, 42px) 38px; }
.login-terminal-content .login-form { margin-top: 22px; }
.login-terminal-content label { display: block; color: #d8e7e8; font-size: 14px; font-weight: 450; text-transform: none; letter-spacing: 0; margin-bottom: 7px; }
.login-terminal-content input,
.login-terminal-content .button.secondary { border-color: var(--line); color: var(--ink); background: var(--field); }
.login-terminal-content input { font-weight: 450; }
.login-terminal-content .button { font-family: var(--font-ui); font-weight: 280; letter-spacing: -.012em; }
.login-terminal-content .button.primary { color: #071219; background: #4fc8df; box-shadow: 0 7px 16px rgba(2,25,34,.2); }
.login-theme-control { position: fixed; z-index: 90; top: 22px; right: 24px; }
.login-theme-control .theme-switcher-trigger { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(177,222,226,.24); border-radius: 13px; color: #d8e7e8; background: rgba(9,24,34,.72); box-shadow: 0 12px 30px rgba(0,8,14,.24); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.login-theme-control .theme-switcher-popover { top: calc(100% + 10px); right: 0; bottom: auto; left: auto; }
.login-terminal-content .admin-specular-button { width: 100%; min-height: 48px; padding: 0 22px; border: 1px solid var(--line); color: var(--ink); background: var(--field); font-family: var(--font-ui); font-size: 16px; font-weight: 280; letter-spacing: -.012em; box-shadow: none; }
.login-terminal-content input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent); }
.login-form-wrap h2 { margin-bottom: 10px; font-size: 24px; font-weight: 600; text-align: center; }
.demo-notice { display: flex; gap: 12px; margin-top: 22px; padding: 14px 15px; border: 1px solid #dce9e8; border-radius: 16px; background: rgba(255,255,255,.72); }
.demo-notice > span { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 13px; color: #4caa9f; background: var(--mint-soft); }
.demo-notice p { margin: 0; }
.demo-notice strong, .demo-notice small { display: block; }
.demo-notice strong { font-size: 13px; }
.demo-notice small { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.login-form { display: grid; gap: 18px; margin-top: 28px; }
.form-note { margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.form-error { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid #f2c8c8; border-radius: 13px; background: #fff4f4; color: #a64141; font-size: 13px; font-weight: 700; }
.form-error span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #e96464; color: white; }
.session-notice { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 13px 14px; border: 1px solid #f0d7a6; border-radius: 13px; background: #fff8e9; color: #745521; }
.session-notice > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #f5dfae; font-weight: 900; }
.session-notice strong, .session-notice small { display: block; }
.session-notice small { margin-top: 3px; color: #957848; font-size: 14px; }
.field-error { color: #b44747 !important; }
input[aria-invalid="true"] { border-color: #dc7777; box-shadow: 0 0 0 3px rgba(220,119,119,.1); }
.success-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid rgba(34,155,137,.25); border-radius: 16px; background: #eaf9f5; color: #18423f; box-shadow: var(--shadow-soft); }
.success-banner > span { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--primary); color: white; font-weight: 900; }
.success-banner p { margin: 4px 0 0; color: #577471; font-size: 13px; }
.success-banner button { margin-left: auto; border: 0; background: transparent; color: #597572; font-size: 24px; cursor: pointer; }
.success-banner-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.success-banner .success-banner-actions button { margin: 0; padding: 0; color: var(--primary-strong); font: inherit; font-size: 13px; font-weight: 800; }
.status-page { display: grid; min-height: 100vh; place-content: center; justify-items: start; padding: 7vw; background: radial-gradient(circle at 70% 30%, var(--lavender-soft), transparent 30%); }
.status-page h1 { max-width: 720px; }
.status-page .muted { max-width: 600px; }
.status-code { color: var(--mint); font-size: 90px; font-weight: 900; line-height: 1; }
.module-capabilities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.module-capabilities article { display: grid; gap: 8px; padding: 21px; }
.module-capabilities article > span { color: #2a9990; font-size: 14px; font-weight: 900; }
.module-capabilities article strong { font-size: 15px; }
.module-capabilities article small { color: var(--muted); font-size: 14px; }
.module-list { padding: 0; overflow: hidden; }
.module-list-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.module-list-head .eyebrow { margin-bottom: 4px; }
.module-list-head h2 { margin-bottom: 0; }
.module-list-head .library-search-field { flex: 0 1 280px; margin: 0; }
.module-row { display: flex; align-items: center; gap: 14px; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.module-row:last-child { border-bottom: 0; }
.module-row-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; color: #2c8e86; background: var(--mint-soft); font-weight: 900; }
.module-row div { min-width: 0; flex: 1; }
.module-row strong, .module-row small { display: block; }
.module-row small { margin-top: 4px; color: var(--muted); font-size: 14px; }
.dashboard-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dashboard-links > a { display: flex; align-items: center; gap: 13px; padding: 19px; color: #278f86; }
.dashboard-links > a > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 13px; color: #6658cf; background: var(--lavender-soft); font-weight: 900; }
.dashboard-links > a > div { min-width: 0; flex: 1; color: var(--ink); }
.dashboard-links strong, .dashboard-links small { display: block; }
.dashboard-links small { margin-top: 4px; color: var(--muted); font-size: 14px; }
.learner-hub { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 16px; }
.learner-hub > a { display: block; padding: 22px; }
.learner-hub h3 { margin-bottom: 12px; font-size: 16px; }
.learner-hub > a > small { display: block; margin-top: 14px; color: #299b91; font-size: 14px; font-weight: 800; }
.learner-journey { display: flex; flex-direction: column; gap: 20px; }
.journey { display: flex; align-items: center; gap: 0; margin: 14px 0 22px; position: relative; }
.journey svg { position: absolute; top: 17px; left: 24px; right: 24px; height: 8px; width: calc(100% - 48px); z-index: 0; }
.journey path { stroke: var(--line); stroke-width: 2.5; fill: none; }
.journey path.fill { stroke: var(--primary); }
.stage-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; color: inherit; text-decoration: none; cursor: pointer; }
.stage-step.locked { cursor: not-allowed; }
.stage-step.locked .stage-dot { color: color-mix(in srgb, var(--muted) 60%, var(--background)); border-color: color-mix(in srgb, var(--line) 70%, var(--background)); }
.stage-step.locked small { color: color-mix(in srgb, var(--muted) 60%, var(--background)); }
.stage-step:not(.locked):hover .stage-dot, .stage-step:not(.locked):focus-visible .stage-dot { border-color: var(--primary); }
.stage-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 7px; }
.stage-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--background); border: 2.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--muted); transition: border-color .16s ease; }
.stage-dot.on { border-color: var(--primary); color: var(--primary); background: var(--background); }
.stage-step small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.course-hero { background: linear-gradient(135deg, #146d80, var(--primary) 55%, #16be8c); border-radius: var(--radius-xl); padding: 48px; min-height: 200px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 30px; position: relative; overflow: hidden; }
.course-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(220px 220px at 90% 0%, rgba(255,255,255,.25), transparent 60%); }
.course-hero .txt { position: relative; min-width: 0; }
.course-hero .txt .eyebrow { display: block; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; font-weight: 700; color: #fff; }
.course-hero h3 { font-size: 24px; margin-top: 10px; color: inherit; }
.course-hero p { margin-top: 8px; font-size: 13px; opacity: .92; max-width: 360px; }
.ring { width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; position: relative; }
.ring circle { fill: none; stroke-width: 8; }
.ring .bg { stroke: rgba(255,255,255,.28); }
.ring .fg { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.ring-num { font-family: var(--font-ui); font-size: 16px; font-weight: 800; }
@media (max-width: 640px) { .course-hero { flex-direction: column; align-items: flex-start; } }
.term-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.term-grid > span { padding: 13px; border-radius: 13px; background: #f6f4fb; }
.term-grid strong, .term-grid small { display: block; }
.term-grid strong { color: #299b91; font-size: 14px; }
.term-grid small { margin-top: 5px; color: var(--muted); font-size: 13px; }
.review-layout { display: grid; grid-template-columns: minmax(320px, 26%) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.review-empty { min-height: calc(100dvh - 220px); }
.review-layout > * { min-height: calc(100dvh - 220px); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.panel-heading .eyebrow { margin-bottom: 3px; white-space: nowrap; }
.panel-heading h2 { margin-bottom: 0; }
.review-person { display: flex; width: 100%; align-items: center; gap: 11px; padding: 12px; border: 0; border-radius: 13px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.review-person.active { background: var(--mint-soft); }
.review-person > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--primary); background: var(--mint-soft); font-size: 14px; font-weight: 800; }
.review-person strong, .review-person small { display: block; }
.review-person small { margin-top: 3px; color: var(--muted); font-size: 13px; }
.review-answer > section { margin: 24px 0; padding: 22px; border-radius: 13px; background: var(--subtle); }
.review-answer-question { color: var(--ink); font-weight: 700; }
.review-answer ol { margin-bottom: 0; padding-left: 20px; color: var(--muted); line-height: 1.75; }
.attachment-pill { display: inline-flex; padding: 10px 13px; border-radius: 13px; color: color-mix(in srgb, var(--primary) 70%, black); background: var(--mint-soft); font-size: 14px; font-weight: 800; }
.review-history { display: grid; gap: 7px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.review-response { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.review-response textarea { width: 100%; min-height: 92px; margin: 0 0 14px; padding: 13px; resize: vertical; color: var(--ink); border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.review-attachments { display: grid; gap: 9px; margin: -7px 0 14px; }
.review-attachment-button { display: grid; gap: 3px; padding: 12px 13px; color: var(--primary); border: 1px dashed color-mix(in srgb, var(--primary) 58%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--mint-soft) 70%, transparent); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.review-attachment-button:hover { border-color: var(--primary); background: var(--mint-soft); transform: translateY(-1px); }
.review-attachment-button small { color: var(--muted); font-size: 13px; }
.review-attachment-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.review-attachments ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.review-attachments li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.review-attachments li > span { display: grid; min-width: 0; gap: 2px; }
.review-attachments li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.review-attachments li small { color: var(--muted); font-size: 13px; }
.review-attachments li button { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 9px; background: transparent; cursor: pointer; }
.review-decision-row { display: flex; align-items: center; gap: 10px; }
.review-score { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--field) 82%, transparent); }
.review-score > span:first-child { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.review-score small { color: var(--muted); font-size: 12px; }
.review-score-field { display: flex; align-items: center; gap: 4px; color: var(--primary); }
.review-score-field input { width: 52px; padding: 6px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--field); text-align: center; font: inherit; font-size: 13px; font-weight: 800; }
.review-decision-row .button { padding: 10px 20px; }
.review-result { padding: 11px; border-radius: 13px; margin-bottom: 12px; color: color-mix(in srgb, var(--primary) 75%, black); background: var(--mint-soft); font-size: 14px; }
.editor-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr) 230px; gap: 16px; align-items: stretch; }
.editor-layout > * { min-height: 590px; }
.editor-structure ol { display: grid; gap: 8px; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.editor-structure li { padding: 12px; border-radius: 13px; }
.editor-structure li.active { color: #554ab6; background: var(--lavender-soft); font-weight: 800; }
.editor-structure button { border: 0; color: #278f86; background: transparent; font-size: 14px; font-weight: 800; cursor: pointer; }
.editor-toolbar { display: flex; gap: 7px; margin-bottom: 20px; }
.editor-toolbar button { width: 31px; height: 31px; border: 0; border-radius: 9px; color: #5c527b; background: #f0edf8; cursor: pointer; }
.editor-canvas h2 { margin: 18px 0; font-size: 28px; }
.editor-canvas textarea { width: 100%; min-height: 130px; border: 0; resize: vertical; color: #5e7277; background: transparent; line-height: 1.7; }
.editor-example { margin: 20px 0; padding: 18px; border-radius: 16px; background: var(--lavender-soft); }
.editor-example p { margin: 7px 0 0; color: #62647a; font-size: 14px; line-height: 1.6; }
.ai-panel > article, .ai-panel > button { display: block; width: 100%; margin-top: 13px; padding: 15px; border: 0; border-radius: 16px; color: var(--ink); background: var(--lavender-soft); text-align: left; }
.ai-panel > button { cursor: pointer; }
.ai-panel strong, .ai-panel small { display: block; }
.ai-panel p, .ai-panel small { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ai-panel article .button { margin-top: 13px; text-align: center; }
.editor-status { grid-column: 2 / 4; display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: auto; color: var(--muted); font-size: 14px; }
.ai-dialog-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(5,27,34,.58); backdrop-filter: blur(10px); }
.ai-dialog { width: min(880px, calc(100vw - 56px)); max-height: calc(100vh - 56px); overflow: auto; padding: 25px; box-shadow: 0 35px 90px rgba(5,28,36,.32); }
.ai-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.ai-dialog > header h2 { margin: 3px 0 5px; font-size: 28px; }.ai-dialog > header p { margin: 0; color: var(--muted); font-size: 13px; }.ai-dialog > header > button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--field); font-size: 16px; cursor: pointer; }
.ai-dialog-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(220px,.5fr); gap: 14px; margin-top: 18px; }.ai-source, .ai-settings { padding: 16px; border-radius: 16px; background: var(--subtle); }.ai-source > label, .ai-settings > span { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 900; }.ai-source textarea { width: 100%; min-height: 190px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--field); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }.ai-source > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; }.ai-source > div span, .ai-source > p { color: var(--muted); font-size: 13px; }.ai-source > div button { border: 0; color: var(--primary); background: transparent; font-size: 13px; font-weight: 900; cursor: pointer; }.ai-source > p { margin: 12px 0 0; padding: 9px; border-radius: 9px; background: color-mix(in srgb, var(--mint-soft) 72%, var(--field)); line-height: 1.5; }
.ai-settings [role="radiogroup"] { display: grid; gap: 7px; }.ai-settings [role="radio"] { padding: 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--field); text-align: left; cursor: pointer; }.ai-settings [role="radio"][aria-checked="true"] { border-color: color-mix(in srgb, var(--primary) 36%, var(--line)); background: var(--mint-soft); }.ai-settings strong, .ai-settings small { display: block; }.ai-settings strong { font-size: 13px; }.ai-settings small { margin-top: 3px; color: var(--muted); font-size: 13px; }.ai-settings > .button { width: 100%; margin-top: 12px; font-size: 13px; }
.ai-result { margin-top: 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--mint-soft) 52%, var(--field)); }.ai-result > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.ai-result header > div { display: flex; align-items: center; gap: 10px; }.ai-result header strong { font-size: 14px; }.ai-result .button { min-height: 34px; font-size: 13px; }.ai-result textarea { width: 100%; min-height: 125px; margin-top: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--field); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }

.content-studio { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.content-studio > .surface { min-height: 680px; padding: 20px; box-shadow: none; }
.content-library { position: static; display: flex; flex-direction: column; }
.content-library > header, .document-header, .test-builder > header, .studio-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.content-library > header { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.content-library h2 { margin: 3px 0 0; font-size: 16px; }
.content-library > header > button, .studio-dialog > header > button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--field); font-size: 20px; cursor: pointer; }
.content-library > header > button.header-add-icon { width: 30px; height: 30px; border: 0; border-radius: 9px; color: var(--primary); background: transparent; font-size: 20px; font-weight: 700; transition: background .16s ease, transform .16s ease; }
.content-library > header > button.header-add-icon:hover { background: var(--mint-soft); }
.content-library > header > button.header-add-icon:active { transform: translateY(1px); }
.content-library > header > button.bulk-delete-trigger { display: grid; width: 26px; height: 26px; border: 0; border-radius: 7px; color: #a85f73; background: var(--rose-soft); font-size: inherit; }
.content-library > header > button.bulk-delete-trigger:hover { filter: brightness(.96); }
.library-search-field { position: relative; display: block; margin: 0 0 14px; }
.library-search-field .function-search-icon { position: absolute; z-index: 1; left: 14px; top: 50%; display: block; width: 16px; height: 16px; border-radius: 0; color: var(--muted); background: none; font-size: 0; transform: translateY(-50%); }
.library-search-field .function-search-icon svg { display: block; width: 100%; height: 100%; }
.library-search-field input { width: 100%; min-height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background-color: var(--field); font: inherit; font-size: 14px; }
.library-search-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.library-search-field input::placeholder { color: var(--muted); font-weight: 450; }
.course-meta-card { display: flex; gap: 12px; margin: 14px 0 4px; }
.course-meta-card:has(img) { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.course-meta-card img { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; }
.course-meta-card p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.5; }
.course-meta-deadline { display: inline-block; margin-top: 6px; padding: 4px 9px; border-radius: 999px; color: var(--primary); background: var(--mint-soft); font-size: 13px; font-weight: 800; }
.course-deadline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.course-deadline-row > span { flex: 0 0 auto; color: var(--ink); font-size: 13px; font-weight: 850; }
.studio-dialog .course-deadline-row input { width: 64px; flex: 0 0 auto; padding: 10px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background-color: var(--field); font: inherit; font-size: 14px; text-align: center; }
.course-deadline-row input:focus { outline: none; border-color: var(--primary); }
.course-deadline-row .ui-select-trigger { width: auto; min-height: 40px; flex: 0 0 auto; justify-content: space-between; }
.course-deadline-row .course-deadline-mode.ui-select-trigger { flex: 1 1 160px; min-width: 130px; }
.course-deadline-row .ui-select-trigger:not(.course-deadline-mode) { min-width: 100px; }
.course-settings-cover-preview { width: 100%; max-height: 140px; margin-top: -6px; border-radius: 13px; object-fit: cover; }
.content-library nav { display: grid; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.folder-row { display: flex; align-items: center; gap: 2px; border-radius: 13px; transition: background .14s ease; }
.folder-row.active { background: var(--mint-soft); }
.folder-row:not(.active):hover { background: var(--subtle); }
.folder-row > .folder-row-main { display: grid; grid-template-columns: 25px 1fr auto; flex: 1; min-width: 0; align-items: center; gap: 8px; padding: 11px; border: 0; border-radius: 13px; color: var(--muted); background: transparent; text-align: left; cursor: pointer; }
.folder-row.active > .folder-row-main { color: var(--ink); }
.folder-row > .folder-row-main span { color: var(--primary); }
.folder-row > .folder-row-main strong { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.25; white-space: normal; word-break: break-word; }
.folder-row > .folder-row-main small { display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 9px; background: var(--field); font-size: 13px; }
.folder-row .row-select-checkbox { flex: 0 0 auto; margin: 0 2px 0 6px; }
.course-content-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.course-content-header h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 850; line-height: 1.2; }
.course-content-header button { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--primary); background: var(--field); font-size: 20px; font-weight: 700; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.course-content-header button:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); background: var(--mint-soft); }
.course-content-header button:active { transform: translateY(1px); }
.course-content-header-actions { display: flex; align-items: center; gap: 8px; }
.course-content-header-actions .course-content-add-topic { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 32px; padding: 0 13px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); color: var(--ink); font-size: 13px; font-weight: 750; white-space: nowrap; }
.course-content-header-actions .course-content-add-topic span { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; border-radius: 50%; background: var(--mint-soft); color: var(--primary); font-size: 13px; font-weight: 800; line-height: 1; }
.course-content-header-actions .course-content-add-topic:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); background: var(--mint-soft); }
.course-topic-group { margin-top: 14px; }
.course-topic-heading { display: flex; align-items: center; gap: 8px; padding: 8px 2px 6px; }
.course-topic-heading h4 { flex: 1; min-width: 0; margin: 0; color: var(--ink); font-size: 15px; font-weight: 850; }
.course-topic-heading.renaming { padding: 4px 2px; }
.course-topic-heading .folder-rename-input { flex: 1; padding: 7px 10px; border: 1px solid var(--primary); border-radius: 9px; color: var(--ink); background-color: var(--field); font: inherit; font-size: 15px; font-weight: 850; }
.material-topic-select.ui-select-trigger { flex: 0 0 auto; width: auto; min-height: 34px; min-width: 128px; padding: 0 10px; font-size: 13px; }
.topic-add-materials { flex: 0 0 auto; width: auto; height: auto; padding: 0; border: 0; color: var(--primary); background: none; font-size: 13px; font-weight: 700; cursor: pointer; }
.topic-add-materials:hover { text-decoration: underline; }
.topic-material-picker { margin: 6px 2px 10px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--subtle); }
.topic-material-picker > p { margin: 0 0 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.topic-material-picker ul { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 0; list-style: none; max-height: 260px; overflow-y: auto; }
.topic-material-picker label { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 9px; cursor: pointer; }
.topic-material-picker label:hover { background: var(--field); }
.topic-material-picker input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--primary); cursor: pointer; }
.topic-material-picker label > span:first-of-type { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: var(--primary); background: var(--mint-soft); font-size: 12px; font-weight: 900; }
.topic-material-picker strong { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.topic-material-picker small { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.material-list { display: grid; gap: 7px; margin-top: 14px; }
.material-row { display: flex; align-items: center; gap: 2px; }
.material-row .row-select-checkbox { flex: 0 0 auto; margin: 0 2px 0 6px; }
.material-row > .material-row-main { display: flex; flex: 1; min-width: 0; align-items: center; gap: 9px; padding: 11px; overflow: hidden; border: 1px solid transparent; border-radius: 13px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; transition: background .14s ease; }
.material-row.active > .material-row-main { border-color: transparent; background: var(--mint-soft); box-shadow: none; }
.material-row:not(.active):hover > .material-row-main { background: var(--subtle); }
.material-row > .material-row-main > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 9px; color: var(--primary); background: var(--mint-soft); font-size: 13px; font-weight: 900; }
.material-row > .material-row-main > div { min-width: 0; }
.material-row > .material-row-main > strong { flex: 1; min-width: 0; }
.material-row strong, .material-row small { display: block; overflow: hidden; text-overflow: ellipsis; }
.material-row strong { font-size: 14px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.material-row small { display: -webkit-box; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.empty-library { padding: 20px 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tree-delete-icon, .tree-edit-icon { display: grid; flex: 0 0 auto; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 7px; color: var(--muted); background: transparent; opacity: 0; cursor: pointer; transition: opacity .14s ease, color .14s ease, background-color .14s ease; }
.folder-row:hover .tree-delete-icon, .folder-row:hover .tree-edit-icon, .material-row:hover .tree-delete-icon, .course-topic-heading:hover .tree-delete-icon, .course-topic-heading:hover .tree-edit-icon, .certificate-catalog-list li:hover .tree-delete-icon, .registry-table article:hover .tree-delete-icon, .tree-delete-icon:focus-visible, .tree-edit-icon:focus-visible { opacity: 1; }
.tree-delete-icon:hover { color: #a85f73; background: color-mix(in srgb, #a85f73 12%, transparent); }
.tree-edit-icon:hover { color: var(--primary); background: var(--mint-soft); }
.folder-row.renaming { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.folder-row.renaming .folder-row-mark { flex: 0 0 auto; color: var(--primary); }
.folder-rename-input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--primary); border-radius: 9px; color: var(--ink); background: var(--field); font: inherit; font-size: 14px; }
.material-row[draggable="true"] { cursor: grab; }
.material-row[draggable="true"]:active { cursor: grabbing; }
.material-row.dragging { opacity: .45; }
.material-row.drag-over { box-shadow: inset 0 2px var(--primary); }
.folder-row.dragging { opacity: .45; }
.folder-row.drag-over { box-shadow: inset 0 2px var(--primary); }
.course-content-header button:disabled { cursor: not-allowed; opacity: .45; }
.word-editor { padding: 0 !important; }
.word-editor > :first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.word-editor > :last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.document-header { align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.document-header > div { display: flex; align-items: center; gap: 9px; }
.document-header > div:first-child { min-width: 0; flex: 1; }.document-header > div:last-child { flex: 0 0 auto; }
.document-header input { width: 100%; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--field); font: inherit; font-size: 16px; font-weight: 850; }
.document-header input:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.document-header input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.document-header .ai-editor-button { gap: 7px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); color: var(--primary); background: color-mix(in srgb, var(--mint-soft) 68%, var(--field)); }
.document-header .ai-editor-button:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); background: var(--mint-soft); }
.document-header .ai-editor-button span { font-size: 14px; line-height: 1; }
.document-save-status { color: var(--muted); font-size: 13px; font-weight: 700; }
.document-save-status.error { color: #a85f73; }
.assignment-editor-note { display: flex; align-items: center; gap: 11px; padding: 12px 20px; color: var(--ink); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--lavender-soft) 58%, var(--field)); }
.assignment-editor-note > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 9px; color: white; background: linear-gradient(145deg, var(--primary), var(--lavender)); }
.assignment-editor-note > div { display: grid; gap: 2px; }
.assignment-editor-note small { color: var(--muted); font-size: 13px; }
.word-ribbon { position: sticky; z-index: 5; top: 0; display: block; padding: 0; border-bottom: 1px solid var(--line); background: var(--subtle); }
.word-ribbon > nav { display: flex; align-items: center; gap: 4px; min-height: 39px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--field); }
.word-ribbon > nav button { width: auto; height: 38px; padding: 0 12px; border-radius: 0; color: var(--muted); font-size: 14px; font-weight: 750; }
.word-ribbon > nav button[aria-selected="true"] { color: var(--primary); box-shadow: inset 0 -2px var(--primary); }
.ribbon-command-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 2px; min-height: 42px; padding: 6px 16px; overflow-x: auto; background: var(--field); }
.docs-sep { width: 1px; align-self: stretch; margin: 3px 6px; background: var(--line); flex: 0 0 auto; }
/* .word-ribbon button { display: grid; place-items: center; } (below) is a plain element+class
   selector that also matches every UiSelect trigger nested in the ribbon (it's a <button> too) —
   its specificity beat .ui-select-trigger's own "display: flex", so the label and chevron were
   being laid out as two stacked grid rows instead of one row. Redeclaring display here (two
   classes outranks .word-ribbon button's one class + one element) fixes that for good. */
.ribbon-select.ui-select-trigger { display: flex; justify-content: center; min-height: 27px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background-color: var(--subtle); font-size: 14px; font-weight: 600; }
.ribbon-select.ui-select-trigger .ui-select-chevron { display: none; }
.ribbon-select-fontsize.ui-select-trigger { width: 52px; min-width: 52px; }
.ribbon-select-style.ui-select-trigger { width: 104px; }
.word-ribbon button { display: grid; min-width: 27px; height: 27px; padding: 0 4px; place-items: center; border: 1px solid transparent; border-radius: 7px; color: var(--ink); background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease; }
.word-ribbon button:hover { border-color: color-mix(in srgb, var(--primary) 22%, var(--line)); background: color-mix(in srgb, var(--primary) 9%, var(--field)); }
.word-ribbon button:active { transform: translateY(1px); }
.word-ribbon button:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 48%, transparent); outline-offset: 1px; }
.word-ribbon button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); color: var(--primary); background: var(--mint-soft); }
.word-ribbon button strong,
.word-ribbon button em,
.word-ribbon button u,
.word-ribbon button s { font-size: 13px; font-weight: 550; font-style: normal; }
.word-ribbon button strong { font-weight: 700; }
.word-ribbon button em { font-style: italic; }
.docs-label-btn { width: auto; min-width: auto; padding: 0 10px; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.docs-label-btn .ribbon-icon { width: 15px; height: 15px; }
.line-height-control { display: flex; align-items: center; gap: 3px; height: 27px; padding: 0 5px 0 6px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.line-height-control:hover { border-color: color-mix(in srgb, var(--primary) 22%, var(--line)); background: color-mix(in srgb, var(--primary) 9%, var(--field)); }
.line-height-control .ribbon-icon { width: 16px; height: 16px; color: var(--ink); }
.ribbon-select-lineheight.ui-select-trigger { min-height: auto; width: auto; min-width: 40px; padding: 0 4px; border: 0; color: var(--ink); background-color: transparent; font-size: 14px; font-weight: 600; }
.word-color-tool { position: relative; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid transparent; border-radius: 7px; color: var(--ink); background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; overflow: hidden; }
.word-color-tool:hover { background: var(--subtle); }
.word-color-tool[aria-expanded="true"] { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: var(--mint-soft); }
.word-color-tool .color-swatch-bar { position: absolute; right: 6px; bottom: 5px; left: 6px; height: 3px; border-radius: 4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); pointer-events: none; }
.word-color-tool.marker span { color: var(--primary); }
.color-picker-tool { display: contents; }
.color-picker-panel { z-index: 320; display: grid; gap: 10px; width: 244px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); animation: confirm-dialog-in .14s ease; }
.color-picker-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.color-picker-swatch { width: 18px; height: 18px; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.color-picker-swatch:hover { transform: scale(1.18); }
.color-picker-swatch.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--primary); }
.color-picker-reset { display: flex; align-items: center; gap: 8px; padding: 6px 4px 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 2px; color: var(--ink); background: transparent; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: color .14s ease; }
.color-picker-reset:hover { color: var(--primary); }
.color-picker-reset-icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; border: 1.5px solid var(--muted); border-radius: 50%; }
.color-picker-reset-icon::after { content: ""; position: absolute; top: 50%; left: -1px; right: -1px; height: 1.5px; background: var(--muted); transform: rotate(-45deg); }
.color-picker-custom-row { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.color-picker-custom { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; overflow: hidden; cursor: pointer; }
.color-picker-custom input { width: 100%; height: 100%; padding: 0; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.color-picker-custom input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-picker-custom input::-webkit-color-swatch { border: 0; border-radius: 4px; }
.color-picker-custom input::-moz-color-swatch { border: 0; border-radius: 4px; }
.color-picker-eyedropper { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--field); cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.color-picker-eyedropper:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); background: var(--subtle); }
.find-bar { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.find-bar .ribbon-icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
.find-bar input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background-color: var(--field); font: inherit; font-size: 14px; }
.find-bar input:focus { outline: none; border-color: var(--primary); }
.find-bar span { flex: 0 0 auto; min-width: 62px; color: var(--muted); font-size: 13px; font-weight: 700; text-align: right; }
.find-bar button { display: grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--field); cursor: pointer; }
.find-bar button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.find-bar button:disabled { opacity: .4; cursor: not-allowed; }
.find-bar button:last-child { color: var(--muted); font-size: 15px; }
.ribbon-icon { width: 17px; height: 17px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ribbon-icon text { fill: currentColor; stroke: none; font: 700 6px Manrope, sans-serif; }
.ribbon-symbol { font-family: Georgia, serif; font-size: 20px; line-height: 1; }
.document-page :is(table) { width: 100%; border-collapse: collapse; table-layout: fixed; }.document-page :is(td, th) { padding: 8px; border: 1px solid var(--line); overflow-wrap: break-word; word-break: break-word; white-space: normal; }.document-page blockquote { margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--primary); color: var(--muted); background: var(--subtle); }
.document-page .editor-image-frame { display: inline-block; box-sizing: border-box; min-width: 60px; min-height: 40px; overflow: hidden; resize: both; vertical-align: top; border-radius: 13px; -webkit-user-drag: none; user-select: none; cursor: default; }
.document-page .editor-image-frame:hover, .document-page .editor-image-frame:focus { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.document-page .editor-image-frame img.editor-image { display: block; width: 100%; height: 100%; -webkit-user-drag: none; pointer-events: none; }
.document-page .editor-video-frame { display: block; box-sizing: border-box; min-width: 240px; min-height: 135px; margin: 12px 0; overflow: hidden; resize: both; border-radius: 13px; }
.document-page .editor-video-frame:hover, .document-page .editor-video-frame:focus-within { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.document-page .editor-video-frame iframe, .document-page .editor-video-frame video { display: block; width: 100%; height: 100%; border: 0; }
.longread-html .editor-video-frame { display: block; box-sizing: border-box; max-width: 100%; margin: 16px 0; border-radius: 13px; overflow: hidden; }
.longread-html .editor-video-frame iframe, .longread-html .editor-video-frame video { display: block; width: 100%; height: 100%; border: 0; }
.document-page .editor-callout, .longread-html .editor-callout { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; border-radius: 13px; }
.document-page .editor-callout-text, .longread-html .editor-callout-text { flex: 1; min-width: 0; }
.document-page .editor-callout-badge, .longread-html .editor-callout-badge { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; }
.document-page .editor-callout-badge::before, .longread-html .editor-callout-badge::before { content: ""; display: block; width: 24px; height: 24px; background-color: #fff; -webkit-mask-size: 13px; mask-size: 13px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.editor-callout-info { background: #eaf1ff; } .editor-callout-info .editor-callout-badge { background: #2f6fed; } .editor-callout-info .editor-callout-badge::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M10 9v4.2' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.6' r='1' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M10 9v4.2' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.6' r='1' fill='%23000'/%3E%3C/svg%3E"); }
.editor-callout-warning { background: #fff4e2; } .editor-callout-warning .editor-callout-badge { background: #e0890c; } .editor-callout-warning .editor-callout-badge::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3 17.5 16h-15z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 8.3v3.4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3 17.5 16h-15z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 8.3v3.4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1' fill='%23000'/%3E%3C/svg%3E"); }
.editor-callout-question { background: #f2ecff; } .editor-callout-question .editor-callout-badge { background: #7c4fe0; } .editor-callout-question .editor-callout-badge::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7.8 8a2.2 2.2 0 1 1 3.4 1.8c-.7.5-1.2.9-1.2 1.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7.8 8a2.2 2.2 0 1 1 3.4 1.8c-.7.5-1.2.9-1.2 1.9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1' fill='%23000'/%3E%3C/svg%3E"); }
.editor-callout-success { background: var(--mint-soft); } .editor-callout-success .editor-callout-badge { background: #1f9d55; } .editor-callout-success .editor-callout-badge::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M6.8 10.2 9 12.4l4.2-4.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M6.8 10.2 9 12.4l4.2-4.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.editor-callout-error { background: var(--rose-soft); } .editor-callout-error .editor-callout-badge { background: #dc3545; } .editor-callout-error .editor-callout-badge::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7.3 7.3 12.7 12.7M12.7 7.3 7.3 12.7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7.3 7.3 12.7 12.7M12.7 7.3 7.3 12.7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.editor-callout-idea { background: #fdf6da; } .editor-callout-idea .editor-callout-badge { background: #d4a017; } .editor-callout-idea .editor-callout-badge::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.2c-2.6 0-4.6 2-4.6 4.5 0 1.7.8 2.8 1.7 3.7.6.6.9 1.1.9 1.8h4c0-.7.3-1.2.9-1.8.9-.9 1.7-2 1.7-3.7 0-2.5-2-4.5-4.6-4.5Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 15.2h4M8.6 17h2.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.2c-2.6 0-4.6 2-4.6 4.5 0 1.7.8 2.8 1.7 3.7.6.6.9 1.1.9 1.8h4c0-.7.3-1.2.9-1.8.9-.9 1.7-2 1.7-3.7 0-2.5-2-4.5-4.6-4.5Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 15.2h4M8.6 17h2.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.callout-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.callout-type-option { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--field); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; transition: border-color .16s ease, transform .16s ease; }
.callout-type-option:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); transform: translateY(-1px); }
.callout-type-option:active { transform: translateY(0); }
.callout-type-option-icon { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; }
.callout-type-info .callout-type-option-icon { background: #2f6fed; }
.callout-type-warning .callout-type-option-icon { background: #e0890c; }
.callout-type-question .callout-type-option-icon { background: #7c4fe0; }
.callout-type-success .callout-type-option-icon { background: #1f9d55; }
.callout-type-error .callout-type-option-icon { background: #dc3545; }
.callout-type-idea .callout-type-option-icon { background: #d4a017; }
.document-page .editor-file-card, .longread-html .editor-file-card { display: flex; align-items: center; gap: 14px; margin: 16px 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.document-page .editor-file-icon, .longread-html .editor-file-icon { display: grid; flex: 0 0 44px; width: 44px; height: 52px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: #c0392b; font-size: 11px; font-weight: 900; letter-spacing: .02em; }
.editor-file-icon-docx, .editor-file-icon-doc { color: #2f6fed; }
.editor-file-icon-xlsx, .editor-file-icon-xls, .editor-file-icon-csv { color: #1f9d55; }
.editor-file-icon-pptx, .editor-file-icon-ppt { color: #e0890c; }
.editor-file-icon-txt { color: var(--muted); }
.document-page .editor-file-info, .longread-html .editor-file-info { flex: 1; min-width: 0; }
.document-page .editor-file-info strong, .longread-html .editor-file-info strong { display: block; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; }
.document-page .editor-file-info small, .longread-html .editor-file-info small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.document-page .editor-file-download, .longread-html .editor-file-download { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--muted); text-decoration: none; transition: background .16s ease, color .16s ease; }
.document-page .editor-file-download:hover, .longread-html .editor-file-download:hover { background: var(--mint-soft); color: var(--primary); }
.document-page .editor-file-download::before, .longread-html .editor-file-download::before { content: ""; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3v9' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M6.2 8.8 10 12.6l3.8-3.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 15.5v1a1.3 1.3 0 0 0 1.3 1.3h9.4A1.3 1.3 0 0 0 16 16.5v-1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3v9' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M6.2 8.8 10 12.6l3.8-3.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 15.5v1a1.3 1.3 0 0 0 1.3 1.3h9.4A1.3 1.3 0 0 0 16 16.5v-1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.document-workspace { position: relative; min-height: 550px; padding: 28px; overflow: auto; background: color-mix(in srgb, var(--subtle) 75%, var(--background)); }
.document-page :is(td, th) { position: relative; }
.floating-block-toolbar { position: absolute; z-index: 20; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); box-shadow: 0 10px 24px color-mix(in srgb, var(--deep) 16%, transparent); }
.floating-block-toolbar button { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: none; border-radius: 6px; background: transparent; color: var(--ink); font-size: 11px; white-space: nowrap; cursor: pointer; }
.floating-block-toolbar button:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.floating-block-toolbar button svg { width: 14px; height: 14px; }
.floating-block-toolbar-sep { width: 1px; align-self: stretch; margin: 3px 2px; background: var(--line); }
.floating-block-toolbar .code-lang-select.ui-select-trigger { min-height: 26px; padding: 0 8px; border: 0; font-size: 11px; font-weight: 700; }
.selection-toolbar { transform: translateX(-50%); flex-wrap: nowrap; }
.selection-toolbar .ribbon-select-fontsize.ui-select-trigger { width: 44px; min-width: 44px; }
.selection-toolbar .ribbon-select-style.ui-select-trigger { width: 96px; }
.document-page .editor-code-block, .longread-html .editor-code-block { position: relative; margin: 16px 0; padding: 16px 18px; border-radius: 12px; background: var(--subtle); color: var(--ink); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.document-page .editor-code-block::before, .longread-html .editor-code-block::before { content: attr(data-lang); position: absolute; top: 10px; right: 14px; color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 600; }
.document-page .editor-code-block .tok-keyword, .longread-html .editor-code-block .tok-keyword { color: #b5399b; font-weight: 600; }
.document-page .editor-code-block .tok-string, .longread-html .editor-code-block .tok-string { color: #1f9d55; }
.document-page .editor-code-block .tok-number, .longread-html .editor-code-block .tok-number { color: #e0890c; }
.document-page .editor-code-block .tok-comment, .longread-html .editor-code-block .tok-comment { color: var(--muted); font-style: italic; }
.document-page { width: min(100%, 1000px); min-height: 490px; margin: 0 auto; padding: 54px 62px; border: 1px solid var(--line); border-radius: 9px; outline: none; color: var(--ink); background: var(--field); box-shadow: 0 18px 45px color-mix(in srgb, var(--deep) 10%, transparent); font-size: 14px; line-height: 1.75; white-space: pre-wrap; }
.glossary-plain-textarea { display: block; width: min(100%, 720px); min-height: 490px; margin: 0 auto; padding: 54px 62px; border: 1px solid var(--line); border-radius: 9px; outline: none; resize: vertical; color: var(--ink); background: var(--field); box-shadow: 0 18px 45px color-mix(in srgb, var(--deep) 10%, transparent); font: inherit; font-size: 14px; line-height: 1.75; }
.glossary-plain-textarea:focus { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.glossary-error-banner { margin: 14px 20px 0; padding: 10px 14px; border-radius: 9px; color: #a85f73; background: var(--rose-soft); font-size: 14px; font-weight: 700; }
.trajectory-workspace { display: grid; gap: 16px; width: min(100%, 620px); margin: 0 auto; }
.trajectory-hint { margin: 0; padding: 12px 16px; border-radius: 9px; color: var(--muted); background: var(--subtle); font-size: 13px; line-height: 1.6; }
.trajectory-course-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trajectory-course-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); cursor: grab; }
.trajectory-course-row.dragging { opacity: .5; }
.trajectory-course-row strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.trajectory-course-index { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; background: var(--primary); font-size: 14px; font-weight: 800; }
.document-page:focus { border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); box-shadow: 0 18px 45px color-mix(in srgb, var(--deep) 10%, transparent), 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.document-page:empty::before { content: "Начните писать материал здесь…"; color: var(--muted); pointer-events: none; }
.document-page ul { list-style-type: disc; }
.document-page ul ul { list-style-type: circle; }
.document-page ul ul ul { list-style-type: square; }
.document-page ol { list-style-type: decimal; }
.document-page ol ol { list-style-type: lower-alpha; }
.document-page ol ol ol { list-style-type: lower-roman; }
.document-page :is(ul, ol) :is(ul, ol) { margin: 2px 0; }
.document-page li { margin: 6px 0; }
.document-page.show-marks :is(p, li, h1, h2, h3, blockquote, div):not(.page-break-marker)::after { content: "¶"; margin-left: 4px; color: var(--primary); opacity: .45; font-weight: 400; user-select: none; }
.page-break-marker { margin: 22px 0; padding: 5px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-align: center; text-transform: uppercase; user-select: none; }
@media print { .page-break-marker { height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; color: transparent; break-after: page; } }
.comment-anchor { border-bottom: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); border-radius: 4px; }
.comments-panel { display: grid; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.comments-panel h4 { margin: 0 0 2px; color: var(--muted); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.comments-panel article { padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.comments-panel blockquote { margin: 0 0 5px; padding: 0 0 0 8px; border-left: 2px solid var(--gold); color: var(--muted); font-size: 13px; font-style: italic; }
.comments-panel p { margin: 0; color: var(--ink); font-size: 14px; }
.comments-panel footer { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.comments-panel time { color: var(--muted); font-size: 13px; }
.comments-panel footer button { display: grid; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; }
.comments-panel footer button:hover { color: #a85f73; background: color-mix(in srgb, #a85f73 12%, transparent); }
.studio-status { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line); color: var(--muted); background: var(--subtle); font-size: 13px; }
.test-builder { min-height: 595px; padding: 22px; background: var(--subtle); }
.test-builder > header { flex-wrap: wrap; align-items: center; margin-bottom: 16px; }.test-builder h2 { margin: 4px 0 0; font-size: 24px; }
.passing-score-field { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--surface); font-size: 13px; font-weight: 800; white-space: nowrap; }
.passing-score-field input { width: 44px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background-color: var(--field); font: inherit; font-size: 13px; text-align: center; }
.passing-score-field input:focus { outline: none; border-color: var(--primary); }
.question-builder-list { display: grid; gap: 16px; }
.question-card { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.question-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.question-card-eyebrow { color: var(--ink); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.question-kind-select.ui-select-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-color: transparent; background: transparent; font-size: 14px; font-weight: 700; }
.question-kind-select.ui-select-trigger:hover { background: var(--subtle); }
.question-kind-select.ui-select-trigger::before { content: ""; width: 13px; height: 13px; flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 50%; background: radial-gradient(circle, var(--ink) 0 4px, transparent 4px); }
.option-delete-icon { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; opacity: 0; transition: color .16s ease, background .16s ease, opacity .12s ease; }
.question-option-row:hover .option-delete-icon, .question-option-row:focus-within .option-delete-icon, .option-delete-icon:focus-visible { opacity: 1; }
.option-delete-icon:hover:not(:disabled) { color: #a85f73; background: color-mix(in srgb, #a85f73 12%, transparent); }
.option-delete-icon:disabled { cursor: not-allowed; }
.question-option-row:hover .option-delete-icon:disabled, .question-option-row:focus-within .option-delete-icon:disabled { opacity: .35; }
.question-card-text { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; color: var(--ink); background-color: var(--surface); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; resize: vertical; }
.question-card-text:focus { outline: none; border-color: var(--primary); }
.question-card-text::placeholder { color: var(--muted); font-weight: 400; }
.question-media-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 10px; border: 0; color: var(--muted); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.question-media-trigger:hover { color: var(--primary); }
.question-media-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.question-media-input input[type="text"], .question-media-input input:not([type]) { flex: 1; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background-color: var(--surface); font: inherit; font-size: 14px; }
.question-media-input button { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--surface); font-size: 14px; font-weight: 700; cursor: pointer; }
.question-media-input > p.muted { flex: 0 0 100%; margin: 2px 0 0; font-size: 13px; }
.question-media-file-picker { position: relative; display: inline-flex; flex: 0 0 100%; align-items: center; justify-content: center; padding: 9px 14px; border: 1px dashed var(--line); border-radius: 9px; color: var(--primary); background: var(--mint-soft); font-size: 14px; font-weight: 700; cursor: pointer; }
.question-media-file-picker input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.question-media-preview { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.question-media-preview img, .question-media-preview video { max-width: 140px; max-height: 80px; border: 1px solid var(--line); border-radius: 7px; }
.question-media-preview button { flex: 0 0 auto; border: 0; color: var(--muted); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.question-card-section { margin-top: 20px; }
.question-card-section h4 { margin: 0 0 10px; color: var(--ink); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.question-text-answer { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background-color: var(--surface); font: inherit; font-size: 13px; font-weight: 500; }
.question-text-answer::placeholder { color: var(--muted); font-weight: 400; }
.question-options-list { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.question-option-row { display: grid; grid-template-columns: 16px 16px 1fr 22px; align-items: center; gap: 12px; padding: 4px 2px; }
.question-option-row.dragging { opacity: .4; }
.question-option-row.drag-over { background: var(--mint-soft); border-radius: 7px; }
.option-drag-handle { display: grid; place-items: center; color: var(--muted); cursor: grab; }
.option-drag-handle svg { width: 13px; height: 13px; }
.option-drag-handle-spacer { width: 16px; }
.option-radio { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.option-text-input { width: 100%; padding: 4px; border: 0; color: var(--ink); background: transparent; font: inherit; font-size: 13px; font-weight: 500; }
.option-text-input:focus { outline: none; }
.option-text-input::placeholder { color: var(--muted); font-weight: 400; }
.option-add-row { border-bottom: none; }
.option-add-icon { display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.option-add-row input { width: 100%; padding: 4px; border: 0; color: var(--ink); background: transparent; font: inherit; font-size: 13px; font-weight: 400; }
.option-add-row input::placeholder { color: var(--muted); font-weight: 400; }
.pair-table { display: flex; flex-direction: column; gap: 6px; }
.pair-table-head { display: grid; grid-template-columns: 16px 1fr 1fr 22px; gap: 12px; padding: 0 2px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pair-table-list { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pair-row { display: grid; grid-template-columns: 16px 1fr 1fr 22px; align-items: start; gap: 12px; padding: 4px 2px; }
.pair-row:hover .option-delete-icon, .pair-row:focus-within .option-delete-icon, .pair-row .option-delete-icon:focus-visible { opacity: 1; }
.pair-row:hover .option-delete-icon:disabled, .pair-row:focus-within .option-delete-icon:disabled { opacity: .35; }
.pair-row .option-drag-handle, .pair-row .option-drag-handle-spacer, .pair-row .option-delete-icon { margin-top: 6px; }
.pair-row.dragging { opacity: .4; }
.pair-row.drag-over { background: var(--mint-soft); border-radius: 7px; }
.pair-text-input { display: block; width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background-color: var(--field); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: normal; overflow: hidden; overflow-wrap: break-word; resize: none; }
.pair-text-input::placeholder { color: var(--muted); font-weight: 400; }
.pair-text-input:focus { outline: none; border-color: var(--primary); }
.pair-add-row { border-bottom: none; }
.test-matching-board { display: grid; grid-template-columns: 1fr 28px 1fr; row-gap: 14px; column-gap: 0; align-items: stretch; }
.test-matching-card { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); font-size: 14px; font-weight: 600; }
.test-matching-card-left { font-weight: 700; }
.test-matching-card-right { cursor: grab; font-weight: 500; transition: border-color .14s ease, background-color .14s ease; }
.test-matching-card-text { flex: 1 1 auto; }
.test-matching-index { flex: 0 0 auto; color: var(--muted); font-weight: 700; }
.test-matching-card-right.dragging { opacity: .4; }
.test-matching-card-right.drag-over { border-color: var(--primary); background: var(--mint-soft); }
.test-matching-card-right.revealed { cursor: default; }
.test-matching-card-right.revealed svg { flex: 0 0 auto; margin-left: auto; width: 22px; height: 22px; }
.test-matching-drag-handle { display: grid; flex: 0 0 auto; margin-left: auto; place-items: center; color: var(--muted); }
.test-matching-drag-handle svg { width: 14px; height: 14px; }
.test-matching-connector { position: relative; display: flex; align-items: center; justify-content: center; }
.test-matching-connector::before { content: ""; width: 10px; height: 10px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface); }
@media (max-width: 640px) { .test-matching-board { grid-template-columns: 1fr; } .test-matching-connector { display: none; } }
.question-feedback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.question-feedback-field { display: flex; flex-direction: column; gap: 8px; }
.question-feedback-field span { color: var(--ink); font-size: 14px; font-weight: 800; }
.question-feedback-field input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background-color: var(--surface); font: inherit; font-size: 14px; font-weight: 500; }
.question-feedback-field input::placeholder { color: var(--muted); font-weight: 400; }
.add-question-card { width: 100%; padding: 18px; border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--line)); border-radius: 16px; color: var(--primary); background: transparent; font-size: 15px; font-weight: 800; cursor: pointer; }
.quiz-slide-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.quiz-slide-nav { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.quiz-slide-nav .add-question-card { padding: 10px; border-radius: 13px; font-size: 13px; }
.quiz-slide-nav-label { margin: 4px 2px 0; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.quiz-slide-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; max-height: 480px; overflow-y: auto; }
.quiz-slide-item-row { position: relative; display: flex; align-items: center; }
.quiz-slide-item-row .quiz-slide-item { flex: 1 1 auto; min-width: 0; }
.quiz-slide-item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 13px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.quiz-slide-item:hover { background: var(--field); }
.quiz-slide-item.active { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); background: var(--mint-soft); }
.quiz-slide-item > div { min-width: 0; }
.quiz-slide-item strong { display: block; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.quiz-slide-item small { color: var(--muted); font-size: 12px; }
.quiz-slide-icon, .quiz-slide-index { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; border-radius: 999px; color: var(--muted); background: var(--subtle); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.quiz-slide-item.active .quiz-slide-icon, .quiz-slide-item.active .quiz-slide-index { color: var(--primary); background: var(--surface); }
.quiz-slide-delete { position: absolute; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 7px; color: var(--muted); background: var(--field); cursor: pointer; opacity: 0; transition: color .16s ease, background .16s ease, opacity .12s ease; }
.quiz-slide-item-row:hover .quiz-slide-delete, .quiz-slide-delete:focus-visible { opacity: 1; }
.quiz-slide-delete:hover { color: #a85f73; background: color-mix(in srgb, #a85f73 12%, transparent); }
.quiz-slide-item-row:hover .quiz-slide-item { padding-right: 34px; }
.quiz-slide-canvas { min-height: 480px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.quiz-screen-editor { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.quiz-screen-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quiz-screen-editor h3 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 800; }
.quiz-screen-field { display: flex; flex-direction: column; gap: 8px; }
.quiz-screen-field > span:first-child { color: var(--ink); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.quiz-screen-field input, .quiz-screen-field textarea { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background-color: var(--field); font: inherit; font-size: 14px; font-weight: 500; }
.quiz-screen-field input::placeholder, .quiz-screen-field textarea::placeholder { color: var(--muted); font-weight: 400; }
.quiz-screen-field textarea { min-height: 96px; resize: vertical; }
.quiz-screen-field input:focus, .quiz-screen-field textarea:focus { outline: none; border-color: var(--primary); }
.quiz-field-counter { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.document-title-field { position: relative; }
.assignment-builder { display: flex; justify-content: center; min-height: 595px; padding: 22px; background: var(--subtle); }
.assignment-builder-canvas { width: 100%; max-width: 640px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.assignment-instruction-field { min-height: 420px; line-height: 1.6; }
.assignment-instruction-counter { align-self: flex-end; margin-top: -4px; }
.assignment-task-field { min-height: 96px; overflow: hidden; resize: none; line-height: 1.6; }
.assignment-task-media { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.assignment-task-media img { max-width: 100%; max-height: 220px; border: 1px solid var(--line); border-radius: 12px; object-fit: contain; }
.assignment-task-media-add { display: inline-flex; align-items: center; width: fit-content; padding: 9px 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); background: var(--field); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, color .16s ease; }
.assignment-task-media-add:hover { border-color: var(--primary); color: var(--primary); }
.assignment-task-media-add input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.attachment-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.attachment-item { position: relative; }
.attachment-thumb { display: block; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: zoom-in; background: none; }
.attachment-thumb img { display: block; width: 96px; height: 96px; object-fit: cover; }
.attachment-file-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .16s ease, color .16s ease; }
.attachment-file-link:hover { border-color: var(--primary); color: var(--primary); }
.attachment-remove { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease; }
.attachment-item:hover .attachment-remove, .attachment-remove:focus-visible { opacity: 1; }
.attachment-remove:hover { color: #d64545; border-color: #d64545; }
.attachment-lightbox-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(11, 22, 33, .82); padding: 40px; }
.attachment-lightbox-image { max-width: min(92vw, 1100px); max-height: 88vh; border-radius: 14px; object-fit: contain; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.attachment-lightbox-close { position: fixed; top: 20px; right: 24px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.attachment-lightbox-close:hover { background: rgba(255, 255, 255, .24); }
.assignment-task-settings { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.task-switcher-nav { display: flex; justify-content: space-between; gap: 12px; }
.task-switcher-nav-right { display: flex; gap: 10px; }
.progress-course-section { display: flex; flex-direction: column; gap: 16px; }
.progress-course-section + .progress-course-section { margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--line); }
.progress-course-header { display: flex; align-items: center; gap: 12px; }
.progress-course-header h2 { font-size: 20px; }
.progress-override-summary { display: flex; gap: 32px; padding: 20px 24px; }
.progress-override-summary > div { display: flex; flex-direction: column; gap: 4px; }
.progress-override-summary strong { font-size: 20px; }
.progress-override-table { padding: 8px 0; overflow-x: auto; }
.progress-override-table table { min-width: 720px; }
.progress-override-table tr.done td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.progress-override-table td:last-child { text-align: right; white-space: nowrap; }
.progress-row-actions { display: flex; justify-content: flex-end; gap: 8px; }
.quiz-score-row { display: flex; flex-wrap: wrap; gap: 16px; }
.quiz-score-field { flex: 0 0 auto; width: 160px; }
.quiz-number-input { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background-color: var(--field); transition: border-color .16s ease; }
.quiz-number-input:focus-within { border-color: var(--primary); }
.quiz-number-input input { flex: 1; min-width: 0; padding: 0; border: 0; color: var(--ink); background: transparent; font: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.quiz-number-input input:focus { outline: none; }
.quiz-number-input input::-webkit-outer-spin-button, .quiz-number-input input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.quiz-number-input input::placeholder { color: var(--muted); font-weight: 400; }
.quiz-number-input b { flex: 0 0 auto; color: var(--muted); font-size: 13px; font-weight: 700; }
.quiz-visibility-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.quiz-visibility-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.quiz-visibility-track { position: relative; flex: 0 0 auto; width: 30px; height: 18px; border-radius: 999px; background: var(--line); transition: background .16s ease; }
.quiz-visibility-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .16s ease; }
.quiz-visibility-toggle input:checked + .quiz-visibility-track { background: var(--primary); }
.quiz-visibility-toggle input:checked + .quiz-visibility-track .quiz-visibility-thumb { transform: translateX(12px); }
.quiz-visibility-toggle input:focus-visible + .quiz-visibility-track { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
@media (max-width: 900px) { .quiz-slide-layout { grid-template-columns: 1fr; } .quiz-slide-list { max-height: 240px; } }
.test-timer { display: grid; flex: 0 0 auto; place-items: center; min-width: 54px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--primary); background: var(--mint-soft); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 900; }
.test-timer.urgent { color: #e2431f; background: var(--rose-soft); }
.test-timeout-notice { margin: 0 0 12px; padding: 10px 12px; border-radius: 13px; color: #e2431f; background: var(--rose-soft); font-size: 13px; font-weight: 700; }
.test-player { width: min(680px, 100%); margin: 0 auto; padding: 24px; border-radius: 16px; background: var(--field); }.test-player > p { color: var(--muted); font-size: 14px; }
.test-intro { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 24px; text-align: center; }
.test-intro-mark { width: 56px; height: 3px; border-radius: 999px; background: var(--primary); }
.test-intro h2 { margin: 0; color: var(--ink); font-size: 26px; font-weight: 850; }
.test-intro p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 15px; line-height: 1.5; }
.test-intro .button { margin-top: 8px; padding: 12px 28px; }
.test-question-screen { display: flex; flex-direction: column; gap: 20px; padding: 12px 4px; }
.test-question-progress { margin: 0; color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.test-question-text { margin: 0; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.4; white-space: pre-wrap; }
.test-question-media { margin-top: 14px; }
.test-question-media img, .test-question-media video { max-width: 100%; max-height: 360px; border: 1px solid var(--line); border-radius: 13px; }
.test-answer-options { display: flex; flex-direction: column; gap: 4px; }
.test-answer-option { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 13px; cursor: pointer; transition: background .14s ease; }
.test-answer-option:hover { background: var(--subtle); }
.test-answer-option input { width: 21px; height: 21px; flex: 0 0 auto; accent-color: var(--primary); cursor: pointer; }
.test-answer-option span { flex: 1; min-width: 0; color: var(--ink); font-size: 15px; }
.test-answer-option svg { flex: 0 0 auto; }
.test-answer-option.revealed { background: var(--subtle); }
.test-answer-text-input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background-color: var(--surface); font: inherit; font-size: 15px; }
.test-answer-submit { align-self: flex-end; padding: 12px 30px; }
.test-feedback-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.test-feedback-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 999px; font-size: 22px; font-weight: 900; }
.test-feedback-icon.correct { color: var(--primary); border: 2px solid var(--primary); }
.test-feedback-icon.incorrect { color: var(--muted); border: 2px solid var(--muted); }
.test-feedback-panel strong { color: var(--ink); font-size: 18px; font-weight: 800; }
.test-feedback-panel p { margin: 0; color: var(--muted); font-size: 14px; }
.test-feedback-panel .button { margin-top: 10px; padding: 12px 30px; }
.test-result-screen { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px 8px; text-align: center; }
.test-result-ring-wrap { display: flex; align-items: center; gap: 22px; margin-bottom: 10px; }
.test-result-ring-shell { position: relative; width: 140px; height: 140px; flex: 0 0 auto; }
.test-result-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.test-result-ring .track { fill: none; stroke: var(--line); stroke-width: 9; }
.test-result-ring .progress { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.test-result-ring .progress.passed { stroke: var(--primary); }
.test-result-ring .progress.failed { stroke: var(--muted); }
.test-result-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.test-result-icon { font-size: 26px; font-weight: 900; line-height: 1; }
.test-result-icon.correct { color: var(--primary); }
.test-result-icon.incorrect { color: var(--muted); }
.test-result-ring-center strong { color: var(--ink); font-size: 26px; font-weight: 900; }
.test-result-threshold { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 14px; text-align: left; }
.test-result-threshold strong { color: var(--ink); font-size: 19px; font-weight: 900; }
.test-result-screen h3 { margin: 0; color: var(--ink); font-size: 24px; font-weight: 850; }
.test-result-screen > p { margin: 0; color: var(--muted); font-size: 15px; }
.test-result-actions { display: flex; gap: 12px; margin-top: 18px; }
.test-result-actions .button { padding: 12px 26px; }
.test-player fieldset { display: grid; gap: 9px; margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; }.test-player legend { padding: 0 7px; font-size: 13px; font-weight: 850; }.test-player fieldset label { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 9px; background: var(--subtle); font-size: 14px; cursor: pointer; }
.test-player fieldset.question-revealed { opacity: 1; }
.test-player fieldset.question-revealed.correct { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.test-player fieldset.question-revealed.incorrect { border-color: color-mix(in srgb, #a75d70 45%, var(--line)); }
.question-feedback { padding: 9px 11px; border-radius: 9px; font-size: 13px; }
.question-revealed.correct .question-feedback { color: var(--primary); background: var(--mint-soft); }
.question-revealed.incorrect .question-feedback { color: #a75d70; background: var(--rose-soft); }
.question-feedback span { display: block; font-weight: 900; }
.question-feedback p { margin: 4px 0 0; font-weight: 500; opacity: .9; }
.test-result { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px; border-radius: 13px; color: var(--ink); background: var(--mint-soft); }.test-result > strong { color: var(--primary); font-size: 28px; }.test-result h3, .test-result p { margin: 0; }.test-result h3 { font-size: 13px; }.test-result p { margin-top: 3px; color: var(--muted); font-size: 13px; }
/* 210, not just above .confirm-overlay's 200 — this dialog can itself be opened from INSIDE a
   .confirm-overlay (e.g. "Назначить несколько курсов" from the create-user wizard), and needs to
   stack above whatever opened it rather than being buried behind it. */
.studio-dialog-backdrop { position: fixed; z-index: 210; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(5,27,34,.58); backdrop-filter: blur(10px); }
.studio-dialog { display: grid; gap: 16px; width: min(460px, calc(100vw - 48px)); min-height: 0 !important; padding: 24px !important; box-shadow: 0 35px 90px rgba(5,28,36,.32); }.studio-dialog h2 { margin: 4px 0 0; font-size: 24px; }.studio-dialog > label { display: grid; gap: 7px; font-size: 13px; font-weight: 850; }.studio-dialog :is(input, select, textarea) { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background-color: var(--field); font: inherit; font-size: 14px; }.studio-dialog select { padding-right: 30px; }.studio-dialog textarea { min-height: 190px; resize: vertical; }.studio-dialog > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.symbol-dialog .symbol-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.symbol-dialog .symbol-grid button { display: grid; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--field); font-size: 15px; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.symbol-dialog .symbol-grid button:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); background: var(--mint-soft); }
.symbol-dialog .symbol-grid button:active { transform: translateY(1px); }

@media (min-width: 1800px) { .content-studio { grid-template-columns: 325px minmax(560px, 1fr); } }

.people-workspace { display: grid; gap: 18px; }
.people-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; box-shadow: none; }
.people-tabs { display: flex; gap: 4px; }
.people-tabs button { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 13px; color: var(--muted); background: transparent; font-size: 14px; font-weight: 800; cursor: pointer; }
.people-tabs button span { display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 9px; background: var(--subtle); font-size: 14px; }
.people-tabs button[aria-selected="true"] { color: var(--primary); background: var(--mint-soft); }
.people-actions { display: flex; align-items: center; gap: 9px; }
.people-actions .button { min-height: 44px; padding-inline: 18px; font-size: 14px; }
.people-search-field { position: relative; flex: 1 1 auto; min-width: 200px; }
.people-search-field .function-search-icon { position: absolute; z-index: 1; left: 20px; top: 50%; display: block; width: 18px; height: 18px; border-radius: 0; color: var(--muted); background: none; font-size: 0; transform: translateY(-50%); }
.people-search-field .function-search-icon svg { display: block; width: 100%; height: 100%; }
.people-search-field input { width: 100%; min-height: 44px; padding: 0 18px 0 44px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background-color: var(--surface); font: inherit; font-size: 14px; }
.people-search-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.people-search-field input::placeholder { color: var(--muted); font-weight: 450; }
.people-search-field kbd { position: absolute; z-index: 1; right: 16px; top: 50%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--subtle); transform: translateY(-50%); font: inherit; font-size: 10.5px; font-weight: 700; pointer-events: none; }
.people-status-filter { flex: 0 0 auto; width: auto; min-width: 168px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background-color: var(--surface); font: inherit; font-size: 14px; font-weight: 700; }
.inline-course-select { min-width: 0; width: 150px; min-height: 38px; padding: 8px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background-color: var(--field); font: inherit; font-size: 13px; font-weight: 600; }
.inline-course-cell { display: flex; align-items: center; gap: 6px; }
.inline-course-cell .ui-select-root { flex: 0 0 auto; }
.inline-date-input, .inline-date-trigger { width: 130px; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background-color: var(--field); font: inherit; font-size: 13px; font-weight: 600; }
.inline-date-input:focus-visible, .inline-date-trigger:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.inline-date-trigger { text-align: left; cursor: pointer; transition: border-color .16s ease; }
.inline-date-trigger:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.queue-course-options { display: grid; gap: 8px; margin: 14px 0; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.queue-course-options label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); font-size: 14px; cursor: pointer; transition: border-color .16s ease; }
.queue-course-options label:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); background: var(--mint-soft); }
.queue-course-options input[type="checkbox"] { appearance: none; display: grid; width: 19px; height: 19px; flex: 0 0 auto; margin: 0; place-items: center; border: 1.5px solid #9fb4b7; border-radius: 7px; background: var(--field); cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.queue-course-options input[type="checkbox"]::after { content: "✓"; color: white; font-size: 14px; font-weight: 900; line-height: 1; opacity: 0; transform: scale(.55); transition: opacity .16s ease, transform .16s ease; }
.queue-course-options input[type="checkbox"]:checked { border-color: transparent; background: linear-gradient(145deg, var(--primary), var(--mint)); }
.queue-course-options input[type="checkbox"]:checked::after { opacity: 1; transform: scale(1); }
.queue-course-order { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.queue-course-order li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); }
.queue-course-order strong { flex: 1; font-size: 14px; }
.queue-course-order li > div { display: flex; gap: 4px; }
.queue-course-order button { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface); cursor: pointer; }
.queue-course-order button:disabled { opacity: .4; cursor: default; }
.learning-stage { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-size: 13px; font-weight: 800; white-space: nowrap; }.learning-stage.done { color: #177564; background: #e4f8f1; }
.learning-stage-link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); }.learning-stage-link:hover .learning-stage { box-shadow: 0 0 0 1px var(--primary); }
.inline-access-select { min-width: 108px; min-height: 38px; padding: 8px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background-color: var(--field); font: inherit; font-size: 13px; font-weight: 600; }
.status-select.active, .status-select.inactive, .status-select.frozen, .status-select.renewal, .status-select.completed { min-width: 96px; border-radius: 999px; text-align: center; }
.status-select.active { color: var(--lavender); background-color: var(--mint-soft); border-color: transparent; font-weight: 800; }
.status-select.inactive { color: #a85f73; background-color: var(--rose-soft); border-color: transparent; font-weight: 800; }
.status-select.frozen { color: #1e6fa8; background-color: #e3f1fb; border-color: transparent; font-weight: 800; }
.status-select.renewal { color: #5c6266; background-color: #eef0f1; border-color: transparent; font-weight: 800; }
.status-select.completed { color: #8a5a1e; background-color: #fdecd2; border-color: transparent; font-weight: 800; }
.table-access-notice { margin: 0; padding: 10px 16px; color: var(--primary-strong); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--primary) 7%, transparent); font-size: 13px; }
.row-delete-icon { display: grid; width: 30px; height: 30px; margin: 0 auto; place-items: center; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; opacity: 0; transition: color .16s ease, background-color .16s ease, opacity .16s ease; }
.row-delete-icon:hover { color: #a85f73; background: color-mix(in srgb, #a85f73 12%, transparent); }
.row-delete-icon:focus-visible { outline: 2px solid color-mix(in srgb, #a85f73 45%, transparent); outline-offset: 2px; }
tbody tr:hover .row-delete-icon, .row-delete-icon:focus-visible { opacity: 1; }

.th-with-select { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; }
th .th-with-select { text-transform: inherit; letter-spacing: inherit; font-size: inherit; }
.select-mode-toggle, .course-content-header button.select-mode-toggle { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 15px; cursor: pointer; transition: color .16s ease, background-color .16s ease; }
.select-mode-toggle:hover, .course-content-header button.select-mode-toggle:hover { color: var(--ink); background: var(--subtle); }
.select-mode-toggle.on, .course-content-header button.select-mode-toggle.on { color: var(--primary); background: var(--mint-soft); }
.bulk-delete-trigger, .course-content-header button.bulk-delete-trigger { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 0; border-radius: 7px; color: #a85f73; background: var(--rose-soft); cursor: pointer; }
.bulk-delete-trigger:hover, .course-content-header button.bulk-delete-trigger:hover { filter: brightness(.96); }
.bulk-delete-trigger svg { flex: 0 0 auto; width: 13px; height: 13px; }
.bulk-actions-group { display: inline-flex; align-items: center; gap: 6px; }
.bulk-publish-trigger, .course-content-header button.bulk-publish-trigger { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 0; border-radius: 7px; color: var(--primary); background: var(--mint-soft); cursor: pointer; }
.bulk-publish-trigger:hover, .course-content-header button.bulk-publish-trigger:hover { filter: brightness(.96); }
.bulk-publish-trigger svg { flex: 0 0 auto; width: 13px; height: 13px; }
.user-cell-row { display: flex; align-items: center; gap: 10px; }
.row-select-checkbox { appearance: none; display: grid; width: 19px; height: 19px; flex: 0 0 auto; margin: 0; place-items: center; border: 1.5px solid #9fb4b7; border-radius: 7px; background: var(--field); cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.row-select-checkbox::after { content: "✓"; color: white; font-size: 14px; font-weight: 900; line-height: 1; opacity: 0; transform: scale(.55); transition: opacity .16s ease, transform .16s ease; }
.row-select-checkbox:checked { border-color: transparent; background: linear-gradient(145deg, var(--primary), var(--mint)); }
.row-select-checkbox:checked::after { opacity: 1; transform: scale(1); }

@keyframes confirm-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.confirm-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 29, .5); backdrop-filter: blur(3px); animation: confirm-overlay-in .16s ease; }
.confirm-dialog { display: grid; justify-items: center; gap: 14px; width: min(380px, 100%); padding: 32px 30px 28px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); text-align: center; animation: confirm-dialog-in .18s ease; }
.confirm-dialog-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; color: #a85f73; background: var(--rose-soft); }
.confirm-dialog h2 { margin: 0; font-size: 20px; }
.confirm-dialog p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.confirm-dialog-actions { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.confirm-dialog-actions .button { flex: 1; justify-content: center; }
.course-info-dialog { justify-items: stretch; width: min(480px, 100%); max-height: min(560px, 80vh); text-align: left; }
.course-info-dialog h2 { text-align: left; }
.course-info-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; overflow-y: auto; list-style: none; max-height: 360px; }
.course-info-list li { padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.5; }
.course-info-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.course-info-list strong { color: var(--ink); }
.course-info-trigger { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.course-info-trigger:hover { text-decoration: underline; }
.status-dialog { justify-items: stretch; text-align: left; }
.status-dialog h2, .status-dialog > p { text-align: center; }
.status-dialog label { gap: 6px; font-size: 13px; }
.status-until { display: block; overflow: hidden; max-width: 100%; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.button.danger { color: white; background: #a85f73; box-shadow: 0 12px 26px rgba(168, 95, 115, .26); }

.user-card-dialog { position: relative; display: block; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 32px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); text-align: left; animation: confirm-dialog-in .18s ease; }
.user-card-close { position: absolute; top: 18px; right: 18px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .16s ease; }
.user-card-close:hover { background: var(--subtle); }
.user-card-header { display: flex; align-items: center; gap: 16px; padding-right: 34px; }
.user-card-header .table-avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 15px; }
.user-card-header h2 { margin: 0; font-size: 20px; }
.user-card-header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.user-card-pills { display: flex; gap: 8px; margin-top: 22px; }
.user-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.user-card-field { display: grid; gap: 4px; min-width: 0; }
.user-card-field.wide { grid-column: 1 / -1; }
.user-card-field span { color: var(--muted); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.user-card-field strong { font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.user-card-field strong.muted-value { color: var(--muted); font-weight: 600; }
.user-card-grid.editing { align-items: start; }
.user-card-grid.editing label { gap: 7px; font-size: 14px; }
.user-card-grid.editing label.span-2 { grid-column: 1 / -1; }
.user-card-grid.editing input:not([type="checkbox"]), .user-card-grid.editing select, .user-card-grid.editing .ui-select-trigger { min-height: 42px; font-size: 14px; }
.user-card-grid.editing .invitation-option { padding: 12px; }
.user-card-edit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.user-card-edit-actions .button { flex: 0 1 auto; white-space: nowrap; }
/* Карточка пользователя лежит на .confirm-overlay (z-index 200), поэтому диалог смены
   пароля должен подниматься выше неё, иначе открывается под карточкой. */
.password-dialog-backdrop { z-index: 400; }
/* «Забыли пароль?» под формой входа: скромная ссылка, а не третья крупная кнопка подряд. */
.login-link-button { display: inline-flex; align-items: center; justify-content: center; align-self: center; min-height: 44px; margin-top: -4px; padding: 4px 6px; border: 0; border-radius: 7px; color: var(--muted); background: none; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .16s ease; }
.login-link-button:hover:not(:disabled) { color: var(--ink); }
.login-link-button:disabled { opacity: .55; cursor: default; }
.password-dialog-field { display: flex; align-items: flex-end; gap: 10px; }
.password-dialog-field label { flex: 1 1 auto; min-width: 0; }
.user-card-edit-trigger { width: 100%; justify-content: center; margin-top: 18px; }
.groups-board { padding: 0; overflow: hidden; box-shadow: none; }
.groups-board-columns { display: grid; grid-template-columns: 44px minmax(0, 1fr) 220px auto; align-items: center; gap: 17px; padding: 18px 26px; border-bottom: 1px solid var(--line); background: #fbfcfc; }
.groups-board-columns span { color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.groups-board-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.groups-board-head h2, .groups-board-head .eyebrow { margin-bottom: 0; }
.group-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 220px auto; align-items: center; gap: 17px; padding: 18px 26px; border-bottom: 1px solid var(--line); color: inherit; font-size: 13px; text-decoration: none; transition: background-color .16s ease, padding-left .16s ease; }
.group-row.selecting { padding-left: 54px; cursor: pointer; }
.group-row .row-select-checkbox { position: absolute; left: 26px; top: 37px; z-index: 1; transform: translateY(-50%); }
.group-row.with-progress, .groups-board-columns.with-progress { grid-template-columns: 44px minmax(0, 1fr) 200px 220px; }
.company-progress { display: grid; gap: 8px; max-width: 200px; }
.company-progress .progress-track { height: 8px; border-radius: 999px; background: var(--subtle); overflow: hidden; }
.company-progress .progress-fill { height: 100%; border-radius: 999px; background: var(--primary); }
.company-progress small { color: var(--muted); font-size: 14px; font-weight: 600; }
.group-row:last-child { border-bottom: 0; }
a.group-row:hover, a.group-row:focus-visible { background: var(--subtle); outline: none; }
.company-row-stats { display: grid; gap: 5px; justify-items: start; }
.soft-pill.attention { color: #a85f73; background: var(--rose-soft); }
.group-date { display: grid; width: 38px; height: 38px; place-items: center; align-content: center; border-radius: 13px; color: var(--primary); background: var(--mint-soft); font-size: 14px; font-weight: 900; line-height: 1; }
.group-date small { margin-top: 3px; font-size: 13px; text-transform: uppercase; }
.group-row-main { display: grid; gap: 5px; }
.group-row-delete { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
a.group-row:hover .group-row-delete, .group-row-delete:focus-visible { opacity: 1; }
.group-row strong { font-size: 13px; font-weight: 700; }
.group-row small { color: var(--muted); font-size: 13px; }

.task-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; align-items: stretch; width: 100%; }
.task-prerequisite { display: grid; grid-template-columns: auto minmax(0, 620px); justify-content: center; align-items: start; gap: 24px; padding: 46px; }
.task-prerequisite-step { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; color: var(--primary); background: var(--mint-soft); font-size: 14px; font-weight: 900; }.task-prerequisite h2 { margin: 6px 0 10px; font-size: 28px; }.task-prerequisite p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.6; }.task-prerequisite-progress { height: 7px; overflow: hidden; margin: 20px 0; border-radius: 999px; background: var(--subtle); }.task-prerequisite-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--mint)); }
.task-completed { display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.task-completed > strong { color: var(--muted); font-size: 13px; text-transform: uppercase; }
.task-completed > span { font-size: 14px; line-height: 1.4; }
.task-completed small { display: block; margin-top: 4px; color: var(--primary); }
.task-editor { display: flex; flex-direction: column; min-height: 760px; padding: 26px 60px 50px; border: 1px solid white; border-radius: var(--radius-xl); background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.task-hero { display: flex; align-items: flex-start; gap: 40px; }
.task-hero > header { flex: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.task-editor h1 { font-size: 40px; }
.task-helper-inline { flex: 0 0 240px; padding: 24px; border-radius: var(--radius-lg); background: var(--subtle); }
.task-helper-inline h2 { font-size: 15px; margin-bottom: 2px; }
.task-helper-inline > label { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.task-helper-inline .helper-note { margin-top: 14px; }
.task-helper-inline .helper-note strong { font-size: 14px; }
.task-helper-inline .helper-note p { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.curator-feedback { display: flex; gap: 13px; margin-bottom: 22px; padding: 18px; border: 1px solid color-mix(in srgb, var(--lavender) 22%, var(--line)); border-radius: 16px; background: linear-gradient(135deg, var(--lavender-soft), var(--mint-soft)); }
.curator-feedback > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, var(--lavender), var(--primary)); font-size: 14px; font-weight: 900; }
.curator-feedback .eyebrow { margin-bottom: 3px; }
.curator-feedback strong { font-size: 13px; }
.curator-feedback p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.task-answer { color: var(--ink); }
.task-answer textarea { width: 100%; min-height: 150px; padding: 16px; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; background: var(--field); resize: vertical; line-height: 1.55; }
.task-answer > small { text-align: right; }
.task-attachment { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; padding: 15px; border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--mint-soft) 48%, transparent); }
.task-attachment > div { display: flex; align-items: center; gap: 11px; }
.task-attachment > div > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 13px; color: var(--primary); background: var(--field); font-weight: 900; }
.task-attachment strong, .task-attachment small { display: block; }
.task-attachment strong { font-size: 14px; }
.task-attachment small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.task-attachment button { border: 0; color: var(--primary); background: transparent; font-size: 14px; font-weight: 900; cursor: pointer; }
.task-notice { margin: 14px 0 0; padding: 11px 13px; border-radius: 13px; color: var(--primary); background: var(--mint-soft); font-size: 14px; font-weight: 800; }
.task-next-step { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius: 13px; background: var(--subtle); }
.task-next-step p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.task-next-step .button { flex: 0 0 auto; }
.task-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 20px; }
.task-helper-inline input[type="checkbox"] { appearance: none; display: grid; width: 19px; height: 19px; flex: 0 0 auto; margin: 0; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--field); }
.task-helper-inline input[type="checkbox"]::after { content: "✓"; color: white; font-size: 14px; font-weight: 900; opacity: 0; }
.task-helper-inline input[type="checkbox"]:checked { border-color: transparent; background: var(--primary); }
.task-helper-inline input[type="checkbox"]:checked::after { opacity: 1; }
.helper-note { margin-top: 20px; padding: 15px; border-radius: 13px; background: var(--subtle); }
.helper-note strong { font-size: 14px; }
.helper-note p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.operations-workspace { display: grid; gap: 16px; }
.operations-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; }
.operations-filters { display: flex; gap: 4px; }
.operations-filters button { display: inline-flex; min-height: 39px; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 13px; color: var(--muted); background: transparent; font-size: 14px; font-weight: 800; cursor: pointer; }
.operations-filters button span { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 9px; background: var(--subtle); font-size: 13px; }
.operations-filters button[aria-selected="true"] { color: var(--ink); background: var(--mint-soft); }
.notification-controls { display: flex; align-items: center; gap: 8px; }
.notification-controls .button { min-height: 39px; padding-inline: 14px; font-size: 14px; }
.read-all-button { min-height: 39px; padding: 0 8px; border: 0; color: var(--primary); background: transparent; font-size: 14px; font-weight: 800; cursor: pointer; }
.read-all-button:disabled { color: var(--muted); cursor: default; opacity: .55; }
.sound-toggle { display: inline-flex; min-height: 39px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--field); font-size: 14px; font-weight: 800; cursor: pointer; }
.sound-toggle > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 9px; color: var(--primary); background: var(--mint-soft); }
.operations-layout { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(440px, 1.35fr); gap: 16px; align-items: stretch; }
.operations-layout > .surface { min-height: 540px; }
.operations-queue { padding: 22px; }
.operation-row { position: relative; display: grid; width: 100%; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 7px; padding: 13px; border: 1px solid transparent; border-radius: 16px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.operation-row:hover { background: var(--subtle); }
.operation-row.active { border-color: color-mix(in srgb, var(--primary) 24%, var(--line)); background: linear-gradient(135deg, var(--mint-soft), var(--lavender-soft)); }
.operation-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: white; font-size: 14px; font-style: normal; font-weight: 900; }
.operation-mark.review { background: linear-gradient(145deg, #3bb6ab, #63d3c5); }
.operation-mark.risk { background: linear-gradient(145deg, #d77d91, #efadba); }
.operation-mark.call { background: linear-gradient(145deg, #7061d7, #9b8be8); }
.operation-mark.certificate { background: linear-gradient(145deg, #d9a24a, #efc774); }
.operation-row strong, .operation-row div > span, .operation-row small { display: block; }
.operation-row strong { font-size: 13px; }
.operation-row div > span { margin-top: 3px; font-size: 14px; }
.operation-row small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.operation-row > i { align-self: start; padding: 6px 8px; border-radius: 999px; color: #a45e73; background: var(--rose-soft); font-size: 13px; font-style: normal; font-weight: 900; }
.operation-row.read { opacity: .72; }
.operation-row.read.active, .operation-row.read:hover { opacity: 1; }
.unread-dot { position: absolute; top: 50%; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); transform: translateY(-50%); }
.operation-row:has(> i) .unread-dot { top: auto; right: 13px; bottom: 11px; transform: none; }
.operations-empty { display: grid; min-height: 300px; place-items: center; align-content: center; gap: 8px; text-align: center; }
.operations-empty > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 16px; color: var(--primary); background: var(--mint-soft); font-weight: 900; }
.operations-empty small { color: var(--muted); font-size: 14px; }
.operation-detail { display: flex; flex-direction: column; padding: 30px; }
.operation-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.operation-detail h2 { margin-bottom: 8px; font-size: 28px; }
.operation-state { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 900; }
.operation-state.open { color: #257d75; background: var(--mint-soft); }
.operation-state.snoozed { color: #806337; background: #fff1ce; }
.operation-state.done { color: #5850b6; background: var(--lavender-soft); }
.operation-description { margin: 24px 0; padding: 20px; border-radius: 16px; background: var(--subtle); }
.operation-description h3 { margin-bottom: 8px; font-size: 15px; }
.operation-description p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.operation-context { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.operation-context > div { display: grid; gap: 6px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.operation-context span { color: var(--muted); font-size: 13px; }
.operation-context strong { font-size: 14px; line-height: 1.4; }
.operation-detail > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: auto; padding-top: 26px; }
.operation-detail > footer .button { min-height: 43px; padding-inline: 15px; font-size: 14px; }
.notification-toast { position: fixed; z-index: 100; right: 24px; top: 76px; display: grid; width: min(390px, calc(100vw - 48px)); grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); border-radius: 16px; color: var(--ink); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 24px 70px rgba(13, 52, 61, .24); backdrop-filter: blur(20px); animation: toast-in .24s ease-out; }
.notification-toast > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, var(--primary), var(--lavender)); font-size: 14px; font-weight: 900; }
.notification-toast strong, .notification-toast small { display: block; }
.notification-toast strong { font-size: 13px; }
.notification-toast small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.notification-toast button { width: 28px; height: 28px; border: 0; border-radius: 9px; color: var(--muted); background: var(--subtle); cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.report-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 15px; align-items: stretch; }
.report-layout > .surface { padding: 22px; }
.report-settings { position: sticky; top: 24px; }
.report-fields { display: grid; gap: 7px; }
.report-fields label { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--field); cursor: pointer; font-size: 14px; }
.report-fields input[type="checkbox"] { appearance: none; display: grid; width: 19px; height: 19px; flex: 0 0 auto; margin: 0; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.report-fields input[type="checkbox"]::after { content: "✓"; color: white; font-size: 14px; font-weight: 900; opacity: 0; }
.report-fields input[type="checkbox"]:checked { border-color: transparent; background: var(--primary); }
.report-fields input[type="checkbox"]:checked::after { opacity: 1; }
.report-filters { display: grid; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.report-filters h3 { margin-bottom: 0; font-size: 13px; }
.report-filters label { gap: 6px; font-size: 14px; }
.report-filters select { min-height: 39px; padding-inline: 10px; border-radius: 13px; font-size: 14px; }
.report-filters .reset-filter { width: 100%; }
.report-preview { min-height: 590px; padding: 0 !important; overflow: hidden; }
.report-preview > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.report-preview > header h2 { margin-bottom: 6px; font-size: 24px; }
.report-preview > header .button { min-height: 41px; padding-inline: 15px; font-size: 14px; }
.report-header-actions { display: flex; align-items: center; gap: 10px; }
.report-templates-popover { z-index: 300; width: min(320px, 90vw); max-height: 70vh; overflow-y: auto; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); animation: confirm-dialog-in .14s ease; }
.report-templates-popover h2 { font-size: 18px; }
.report-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 13px 26px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.report-active-filters span { padding: 7px 9px; border-radius: 9px; color: var(--muted); background: var(--field); font-size: 13px; }
.report-active-filters strong { margin-left: auto; color: var(--primary); font-size: 13px; }
.report-table-wrap { overflow-x: auto; }
.report-table th, .report-table td { padding: 15px 16px; }
.report-table th { font-size: 13px; }
.report-table td { font-size: 14px; }
.report-total { display: flex; flex-wrap: wrap; gap: 18px; padding: 17px 26px; border-top: 1px solid var(--line); color: var(--muted); background: var(--subtle); font-size: 14px; }
.report-total strong { color: var(--ink); }
.template-list { display: grid; gap: 7px; }
.template-list > button { display: grid; width: 100%; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 0; border-radius: 13px; color: var(--ink); background: var(--subtle); text-align: left; cursor: pointer; }
.template-list > button > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 13px; color: var(--primary); background: var(--field); font-size: 14px; font-weight: 900; }
.template-list strong, .template-list small { display: block; }
.template-list strong { font-size: 14px; line-height: 1.35; }
.template-list small { margin-top: 3px; color: var(--muted); font-size: 13px; }
.template-list i { color: var(--primary); font-style: normal; }
.save-template { display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.save-template label { gap: 6px; color: var(--ink); font-size: 14px; }
.save-template input { min-height: 41px; padding-inline: 11px; font-size: 14px; }
.save-template .button { min-height: 41px; font-size: 14px; }
.report-notice { margin: 12px 0 0; padding: 10px; border-radius: 13px; color: var(--primary); background: var(--mint-soft); font-size: 13px; line-height: 1.45; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .button { min-height: 38px; padding-inline: 13px; font-size: 14px; }

.import-workspace { display: grid; grid-template-columns: .8fr 1.2fr; gap: 15px; }
.import-workspace > .surface { padding: 23px; }
.import-source h2, .import-mapping h2, .import-review h2 { margin-bottom: 6px; font-size: 20px; }
.import-source .muted, .import-review .muted { font-size: 14px; line-height: 1.55; }
.import-dropzone { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 13px; margin-top: 18px; padding: 18px; border: 1px dashed color-mix(in srgb, var(--primary) 42%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--mint-soft) 38%, transparent); }
.import-dropzone > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; color: var(--primary); background: var(--field); font-size: 16px; font-weight: 900; }
.import-dropzone strong, .import-dropzone small { display: block; }.import-dropzone strong { font-size: 14px; }.import-dropzone small { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.import-dropzone .button { min-height: 39px; padding-inline: 12px; font-size: 13px; }
.import-dropzone.loaded { border-style: solid; background: linear-gradient(135deg, var(--mint-soft), var(--lavender-soft)); }
.import-privacy { margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.import-mapping > header, .import-review > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.mapping-grid { display: grid; gap: 7px; margin-top: 17px; }
.mapping-grid label { display: grid; grid-template-columns: 82px minmax(0,1fr) 24px 86px; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); color: var(--ink); font-size: 13px; }
.mapping-grid label > span { color: var(--muted); }.mapping-grid label > i { color: var(--primary); font-style: normal; text-align: center; }.mapping-grid label > strong { font-size: 13px; }
.mapping-grid select { min-height: 34px; padding-inline: 9px; border-radius: 9px; font-size: 13px; }
.import-review { grid-column: 1 / -1; padding: 0 !important; overflow: hidden; }
.import-review > header { padding: 23px 25px; border-bottom: 1px solid var(--line); }
.import-counters { display: flex; gap: 7px; }.import-counters > span { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 0 10px; border-radius: 9px; color: var(--muted); background: var(--subtle); font-size: 13px; }.import-counters .ok { color: var(--primary); background: var(--mint-soft); }.import-counters .warn { color: #a56b3c; background: #fff0d3; }
.import-empty { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 8px; text-align: center; }.import-empty > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: var(--primary); background: var(--mint-soft); font-size: 20px; }.import-empty small { color: var(--muted); font-size: 13px; }
.import-table-wrap { overflow-x: auto; }.import-table th, .import-table td { padding: 14px 17px; }.import-table th { font-size: 13px; }.import-table td { font-size: 14px; }.import-table td strong, .import-table td small { display: block; }.import-table td small { margin-top: 3px; color: var(--muted); font-size: 13px; }.import-table tr.excluded { opacity: .45; }
.import-status { display: inline-flex; min-height: 25px; align-items: center; padding: 0 8px; border-radius: 9px; white-space: nowrap; font-size: 13px; font-weight: 900; }.import-status.ready { color: var(--primary); background: var(--mint-soft); }.import-status.warning { color: #986230; background: #fff0d3; }.import-status.error { color: #a75d70; background: var(--rose-soft); }.import-status.excluded { color: var(--muted); background: var(--subtle); }
.import-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--subtle); }.import-actions p { margin: 0 auto 0 0; color: var(--muted); font-size: 13px; }.import-actions .button { min-height: 40px; padding-inline: 13px; font-size: 13px; }

.activity-chart { position: relative; padding: 27px 29px 19px; overflow: hidden; }
.activity-chart::before { content: ""; position: absolute; width: 280px; height: 180px; right: -80px; top: -100px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mint) 18%, transparent), transparent 68%); pointer-events: none; }
.activity-chart > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.activity-chart h2 { margin-bottom: 6px; font-size: 24px; }
.chart-selectors { position: relative; z-index: 1; display: flex; gap: 8px; }
.activity-chart header label { display: grid; min-width: 125px; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 800; }
.activity-chart header label:first-child { min-width: 155px; }
.activity-chart select { min-height: 38px; padding: 0 26px 0 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background-color: var(--field); font-size: 14px; }
.chart-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin: 20px 0 12px; }
.chart-stat-row button { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 3px 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: color-mix(in srgb, var(--field) 86%, transparent); text-align: left; cursor: pointer; transition: transform .18s ease, opacity .18s ease, border-color .18s ease; }
.chart-stat-row button:hover { transform: translateY(-2px); }
.chart-stat-row button:not([aria-pressed="true"]) { opacity: .48; }
.chart-stat-row button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--primary) 26%, var(--line)); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 8%, transparent); }
.chart-stat-row span { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.chart-stat-row strong { grid-row: 1 / 3; grid-column: 2; font-size: 24px; line-height: 1; }
.chart-stat-row small { color: var(--muted); font-size: 13px; }
.chart-stat-row small.up { color: var(--primary); }.chart-stat-row small.down { color: #bd6a7e; }
.chart-canvas { position: relative; margin-left: 26px; padding: 8px 4px 0; }
.chart-canvas svg { width: 100%; height: 230px; overflow: visible; }
.chart-series { filter: drop-shadow(0 7px 7px color-mix(in srgb, var(--primary) 10%, transparent)); animation: chart-line-in .72s cubic-bezier(.22,1,.36,1) both, chart-line-glow 4.2s ease-in-out 1s infinite; transform-box: fill-box; transform-origin: center; }
.chart-series.dashed { stroke-dasharray: 8 8; filter: none; animation-delay: .12s; }
.chart-area { animation: chart-area-in .85s cubic-bezier(.22,1,.36,1) both; transform-box: fill-box; transform-origin: bottom; }
.chart-point { opacity: 0; animation: chart-point-in .38s cubic-bezier(.34,1.56,.64,1) forwards; transform-box: fill-box; transform-origin: center; transition: r .16s ease, filter .16s ease; }
.chart-point:hover { filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--primary) 24%, transparent)); }
.chart-grid line { stroke: color-mix(in srgb, var(--line) 72%, transparent); stroke-width: 1; stroke-dasharray: 3 9; }
.chart-y-axis { position: absolute; left: -27px; top: 15px; bottom: 30px; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: 13px; }
.chart-days { display: flex; justify-content: space-between; padding-top: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.chart-tooltip { position: absolute; z-index: 4; right: 14px; top: 18px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 14px; min-width: 175px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius: 13px; color: var(--ink); background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(16px); pointer-events: none; }
.chart-tooltip span { grid-column: 1 / -1; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.chart-tooltip strong { font-size: 14px; }.chart-tooltip b { color: var(--primary); font-size: 20px; }
.chart-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 13px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.chart-footer span { display: inline-flex; align-items: center; gap: 7px; }.chart-footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.chart-footer a { color: var(--primary); font-weight: 900; }
@keyframes chart-line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chart-line-glow {
  0%, 100% { filter: drop-shadow(0 5px 5px color-mix(in srgb, var(--primary) 10%, transparent)); }
  50% { filter: drop-shadow(0 5px 9px color-mix(in srgb, var(--primary) 48%, transparent)) drop-shadow(0 0 15px color-mix(in srgb, var(--mint) 28%, transparent)); }
}
@keyframes chart-area-in { from { opacity: 0; transform: scaleY(.82); } to { opacity: 1; transform: scaleY(1); } }
@keyframes chart-point-in { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .chart-series, .chart-area, .chart-point { animation: none; opacity: 1; transform: none; }
  .chart-point { transition: none; }
}

.settings-builder { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 15px; align-items: stretch; }
.settings-builder > * { min-height: calc(100dvh - 220px); }
.settings-builder > .surface { padding: 21px; }
.settings-catalog h2 { font-size: 20px; }
.settings-group-list { display: grid; gap: 6px; }
.settings-group-list > button { display: grid; width: 100%; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 10px; border: 1px solid transparent; border-radius: 13px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.settings-group-list > button:hover { background: var(--subtle); }
.settings-group-list > button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); background: var(--mint-soft); }
.settings-group-list strong, .settings-group-list small { display: block; }
.settings-group-list strong { font-size: 14px; line-height: 1.35; }
.settings-group-list small { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.settings-group-list i { color: var(--primary); font-size: 14px; font-style: normal; }
.config-dot { width: 8px; height: 8px; border-radius: 50%; }
.config-dot.on { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.config-dot.off { background: #c5ced0; }
.settings-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.settings-editor h2 { margin-bottom: 7px; font-size: 28px; }
.settings-editor header p { max-width: 480px; font-size: 14px; line-height: 1.55; }
.master-switch { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--field); font-size: 13px; font-weight: 900; cursor: pointer; }
.master-switch > span { position: relative; width: 28px; height: 16px; border-radius: 999px; background: #cbd5d6; }
.master-switch > span::after { content: ""; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px; border-radius: 50%; background: white; transition: transform .2s ease; }
.master-switch.on { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, var(--line)); background: var(--mint-soft); }
.master-switch.on > span { background: var(--primary); }
.master-switch.on > span::after { transform: translateX(12px); }
.config-block-list { display: grid; gap: 9px; margin-top: 20px; }
.config-block-list article { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--field); transition: opacity .2s ease, background .2s ease; }
.config-block-list article.disabled { opacity: .6; background: var(--subtle); }
.config-grip { color: var(--muted); font-size: 14px; line-height: .65; letter-spacing: 2px; }
.config-block-list strong, .config-block-list small { display: block; }
.config-block-list strong { font-size: 14px; }
.config-block-list small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.config-block-list article > button { position: relative; width: 38px; height: 22px; border: 0; border-radius: 999px; background: #cbd5d6; cursor: pointer; }
.config-block-list article > button > span { position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(20,50,58,.2); transition: transform .2s ease; }
.config-block-list article > button[aria-pressed="true"] { background: var(--primary); }
.config-block-list article > button[aria-pressed="true"] > span { transform: translateX(16px); }
.config-block-list article > button:disabled { cursor: not-allowed; opacity: .45; }
.settings-hint { display: flex; gap: 11px; margin-top: 20px; padding: 15px; border-radius: 13px; background: var(--subtle); }
.settings-hint > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--primary); background: var(--mint-soft); font-size: 14px; font-weight: 900; }
.settings-hint p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.settings-hint strong { color: var(--ink); }
.config-score { display: flex; align-items: flex-end; gap: 9px; margin: 10px 0; }
.config-score strong { font-size: 40px; line-height: 1; }
.config-score span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.config-progress { height: 7px; overflow: hidden; border-radius: 999px; background: var(--subtle); }
.config-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--lavender)); }
.summary-list { display: grid; gap: 10px; margin: 22px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.summary-list > span { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.summary-list i { width: 7px; height: 7px; border-radius: 50%; }
.summary-list i.mint { background: var(--primary); }.summary-list i.violet { background: var(--lavender); }.summary-list i.rose { background: #db8398; }
.summary-list strong { color: var(--ink); font-size: 13px; }
.settings-notice { min-height: 46px; margin: 0 0 12px; padding: 10px; border-radius: 13px; color: var(--primary); background: var(--mint-soft); font-size: 13px; line-height: 1.45; }
.settings-summary .button { width: 100%; min-height: 40px; padding-inline: 8px; font-size: 13px; }
.demo-reset-zone { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.demo-reset-zone > strong { font-size: 14px; }
.demo-reset-zone > small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.demo-reset-confirm { display: grid; gap: 7px; padding: 10px; border: 1px solid color-mix(in srgb, #db8398 48%, var(--border)); border-radius: 13px; background: color-mix(in srgb, #db8398 10%, var(--surface)); }
.demo-reset-confirm p { margin: 0; color: var(--text); font-size: 13px; font-weight: 750; line-height: 1.4; }
.settings-summary .demo-reset-danger { color: #fff; border-color: transparent; background: #a84661; }
.settings-summary .demo-reset-danger:hover { background: #92364f; }

.certificate-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.certificate-catalog { padding: 22px; }
.certificate-catalog-add { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.certificate-catalog-add input[type="text"], .certificate-catalog-add input:not([type]) { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background-color: var(--field); font: inherit; font-size: 14px; }
.certificate-background-picker { position: relative; display: grid; flex: 0 0 auto; width: 96px; height: 40px; place-items: center; overflow: hidden; border: 1px dashed var(--line); border-radius: 9px; background: var(--subtle); color: var(--muted); font-size: 12px; cursor: pointer; }
.certificate-background-picker img { width: 100%; height: 100%; object-fit: cover; }
.certificate-background-picker input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.certificate-thumb { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; }
.certificate-catalog-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.certificate-catalog-list li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.certificate-catalog-list strong { flex: 1; font-size: 14px; }
.certificate-summary article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; padding: 18px 20px; }
.certificate-summary span { color: var(--muted); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.certificate-summary strong { grid-row: 1 / 3; grid-column: 2; color: var(--primary); font-size: 28px; line-height: 1; }
.certificate-summary small { color: var(--muted); font-size: 13px; }
.certificate-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 15px; align-items: start; }
.certificate-candidates, .certificate-rules, .certificate-registry { padding: 22px; }
.certificate-list { display: grid; gap: 10px; }
.certificate-list > article { display: grid; grid-template-columns: minmax(190px,1.35fr) minmax(240px,1.4fr) auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--field); }
.certificate-list > article.eligible { border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--mint-soft) 64%, var(--field)), var(--field)); }
.certificate-person { display: flex; align-items: center; gap: 10px; }
.certificate-list article.focused { outline: 2px solid var(--primary); outline-offset: 3px; }
.certificate-person > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--lavender)); font-size: 13px; font-weight: 900; }
.certificate-person strong, .certificate-person small { display: block; }
.certificate-person strong { font-size: 14px; }.certificate-person small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.certificate-conditions { display: flex; flex-wrap: wrap; gap: 7px; }
.certificate-conditions span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; color: var(--muted); background: var(--subtle); font-size: 13px; font-weight: 800; }
.certificate-conditions i { width: 6px; height: 6px; border-radius: 50%; background: #d392a2; }
.certificate-conditions span.done { color: var(--primary); background: var(--mint-soft); }.certificate-conditions span.done i { background: var(--primary); }
.certificate-action { display: grid; justify-items: end; gap: 8px; }
.certificate-action .button { min-height: 34px; padding-inline: 12px; font-size: 13px; }
.certificate-reason { grid-column: 1 / -1; margin: -4px 0 0 44px; padding-top: 10px; border-top: 1px solid var(--line); color: #a4586a; font-size: 13px; }
.certificate-rules { position: sticky; top: 22px; }
.certificate-rules h2 { margin: 5px 0 17px; font-size: 20px; }
.certificate-rules ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.certificate-rules li { display: flex; gap: 10px; align-items: center; padding: 11px; border-radius: 13px; background: var(--subtle); }
.certificate-rules li > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 9px; color: var(--primary); background: var(--mint-soft); font-size: 13px; font-weight: 900; }
.certificate-rules li strong, .certificate-rules li small { display: block; }.certificate-rules li strong { font-size: 13px; }.certificate-rules li small { margin-top: 3px; color: var(--muted); font-size: 13px; }
.certificate-registry > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.certificate-registry h2 { font-size: 20px; }.certificate-registry .settings-notice { width: min(330px,45%); min-height: auto; margin: 0; }
.registry-table { display: grid; gap: 8px; }
.registry-table article { display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.certificate-seal { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--primary), var(--lavender)); font-size: 13px; font-weight: 900; }
.registry-table strong, .registry-table small { display: block; }.registry-table strong { font-size: 14px; }.registry-table small, .registry-table time { margin-top: 3px; color: var(--muted); font-size: 13px; }.registry-table button { min-height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--subtle); font-size: 13px; }
.certificate-empty { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px dashed var(--line); border-radius: 13px; background: var(--subtle); }.certificate-empty > span { color: var(--primary); font-size: 28px; }.certificate-empty strong { font-size: 14px; }.certificate-empty p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.certificate-verify { display: grid; grid-template-columns: auto minmax(170px,280px) auto minmax(0,1fr); align-items: center; gap: 9px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }.certificate-verify label { font-size: 13px; font-weight: 900; }.certificate-verify input { min-height: 37px; padding: 0 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--field); font-size: 14px; text-transform: uppercase; }.certificate-verify .button { min-height: 37px; font-size: 13px; }.certificate-verify p { margin: 0; color: var(--primary); font-size: 13px; font-weight: 800; }
.earned-certificates { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.earned-certificate-card { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--subtle); }
.earned-certificate-card > button { margin-left: auto; flex: 0 0 auto; }
.earned-certificate-badge { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--gold); font-weight: 900; }
.earned-certificate-card strong { display: block; font-size: 13px; }
.earned-certificate-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; }
.learner-certificate-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 16px; align-items: stretch; }
.learner-certificate-courses { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cert-doc { position: relative; display: grid; min-height: 320px; align-content: center; justify-items: center; overflow: hidden; padding: 48px; text-align: center; border: 1px dashed var(--gold); border-radius: var(--radius-xl); background: var(--gold-soft); }
.cert-doc-watermark { position: absolute; bottom: 14px; right: 18px; width: 64px; height: 64px; color: var(--gold); opacity: .35; }
.cert-doc-seal { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; color: white; background: var(--gold); font-size: 15px; font-weight: 800; }
.cert-doc h2 { max-width: 480px; margin: 16px 0 0; font-size: 28px; }
.cert-doc p { max-width: 340px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.learner-eligibility { padding: 25px; }.learner-eligibility h2 { margin: 6px 0 20px; font-size: 24px; }.learner-eligibility ul { display: grid; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }.learner-eligibility li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 13px; background: var(--subtle); }.learner-eligibility li > span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface); font-size: 13px; }.learner-eligibility li.active > span { border-color: var(--gold); color: var(--gold); }.learner-eligibility li.done > span { border-color: var(--gold); color: white; background: var(--gold); }.learner-eligibility strong, .learner-eligibility small { display: block; }.learner-eligibility strong { font-size: 14px; }.learner-eligibility small { margin-top: 3px; color: var(--muted); font-size: 13px; }.learner-eligibility .button { width: 100%; }.learner-eligibility > p:last-child { font-size: 13px; line-height: 1.5; text-align: center; }

.integration-hero { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 18px; padding: 22px; background: linear-gradient(125deg, var(--surface), color-mix(in srgb, var(--mint-soft) 70%, var(--surface))); }
.integration-logo { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 16px; color: white; background: linear-gradient(135deg, var(--primary), var(--lavender)); font-size: 14px; font-weight: 950; box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 20%, transparent); }.integration-logo span { font-size: 13px; opacity: .8; }
.integration-hero h2 { margin: 2px 0 5px; font-size: 24px; }.integration-hero p { margin: 0; color: var(--muted); font-size: 13px; }.integration-health { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }.integration-health > span { width: 9px; height: 9px; border-radius: 50%; }.integration-health > span.waiting { background: #dda256; box-shadow: 0 0 0 5px rgba(221,162,86,.13); }.integration-health > span.ready { background: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 13%, transparent); }.integration-health strong, .integration-health small { display: block; }.integration-health strong { font-size: 13px; }.integration-health small { margin-top: 3px; color: var(--muted); font-size: 13px; }
.integration-settings, .sync-journal { padding: 22px; }
.integration-mapping { display: grid; gap: 7px; }.integration-mapping article { display: grid; grid-template-columns: minmax(150px,1fr) 28px minmax(180px,1fr); align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }.integration-mapping article > div span, .integration-mapping label span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 13px; }.integration-mapping code { color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 900; }.integration-mapping i { color: var(--primary); font-style: normal; text-align: center; }.integration-mapping label { margin: 0; }.integration-mapping select { width: 100%; min-height: 32px; padding: 0 24px 0 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background-color: var(--subtle); font-size: 13px; }
.integration-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }.integration-options label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px; border-radius: 13px; background: var(--subtle); }.integration-options strong, .integration-options small { display: block; }.integration-options strong { font-size: 13px; }.integration-options small { margin-top: 3px; color: var(--muted); font-size: 13px; }.integration-options input { width: 18px; height: 18px; accent-color: var(--primary); }
.sync-journal > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }.sync-actions { display: flex; align-items: center; gap: 10px; }.sync-actions [role="tablist"] { display: flex; padding: 4px; border-radius: 13px; background: var(--subtle); }.sync-actions [role="tab"] { min-height: 30px; padding: 0 9px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 900; cursor: pointer; }.sync-actions [role="tab"][aria-selected="true"] { color: var(--primary); background: var(--surface); box-shadow: 0 4px 12px rgba(23,61,68,.08); }.sync-actions .button { min-height: 38px; font-size: 13px; }
.integration-notice { margin: 14px 0 10px; padding: 10px 12px; border-radius: 13px; color: var(--primary); background: var(--mint-soft); font-size: 13px; }.sync-list { display: grid; gap: 6px; }.sync-list article { display: grid; grid-template-columns: 8px 40px minmax(150px,.7fr) minmax(200px,1.3fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); }.sync-state { width: 7px; height: 7px; border-radius: 50%; }.sync-state.success { background: var(--primary); }.sync-state.warning { background: #dda256; }.sync-state.error { background: #cf6e82; }.sync-list time, .sync-list small { color: var(--muted); font-size: 13px; }.sync-list strong, .sync-list small { display: block; }.sync-list strong { font-size: 13px; }.sync-list p { margin: 0; color: var(--muted); font-size: 13px; }
.settings-audit-link { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: center; margin-bottom: 8px; padding-inline: 8px; font-size: 13px; }
.audit-toolbar { display: grid; grid-template-columns: minmax(220px,1.5fr) minmax(145px,.65fr) minmax(145px,.65fr) auto auto; align-items: end; gap: 10px; padding: 16px; }.audit-toolbar label { margin: 0; }.audit-toolbar label > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 13px; font-weight: 900; }.audit-toolbar input, .audit-toolbar select { width: 100%; min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background-color: var(--field); font-size: 13px; }
.audit-toolbar select { padding-right: 28px; }.audit-toolbar button { min-height: 38px; font-size: 13px; }
.audit-log { padding: 22px; }.audit-list { display: grid; gap: 6px; }.audit-list > button { display: grid; grid-template-columns: 8px 80px minmax(150px,.85fr) minmax(180px,1.15fr) auto; align-items: center; gap: 11px; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 13px; color: var(--ink); background: var(--field); text-align: left; cursor: pointer; }.audit-list > button:hover { background: var(--subtle); }.audit-list > button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--primary) 27%, var(--line)); background: var(--mint-soft); }.audit-result { width: 8px; height: 8px; border-radius: 50%; }.audit-result.success { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }.audit-result.warning { background: #dda256; box-shadow: 0 0 0 4px rgba(221,162,86,.12); }.audit-result.denied { background: #cf6e82; box-shadow: 0 0 0 4px rgba(207,110,130,.12); }.audit-list time { color: var(--ink); font-size: 13px; font-weight: 900; }.audit-list time small, .audit-list strong, .audit-list div small { display: block; }.audit-list time small, .audit-list div small { margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 500; }.audit-list strong { font-size: 13px; }.audit-list p { margin: 0; color: var(--muted); font-size: 13px; }
.studio-dialog.audit-detail { width: min(520px, calc(100vw - 48px)); }.audit-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }.audit-detail h2 { margin-top: 4px; font-size: 20px; }.audit-detail dl { display: grid; gap: 0; margin: 12px 0; }.audit-detail dl > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }.audit-detail dt { color: var(--muted); font-size: 13px; }.audit-detail dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }.audit-detail dd small { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; }.audit-detail code { color: var(--primary); font-family: inherit; }.audit-detail > section { padding: 13px; border-radius: 13px; background: var(--subtle); }.audit-detail > section strong { font-size: 13px; }.audit-detail > section p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }.audit-notice { margin: 0; color: var(--muted); font-size: 13px; }

.theme-switcher { position: fixed; z-index: 90; top: 20px; right: 24px; display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 10px 28px rgba(20,32,31,.1); }
.theme-option { min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-family: var(--font-ui); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .16s ease, color .16s ease; }
.theme-option:hover { color: var(--ink); }
.theme-option:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-option.active { color: #fff; background: var(--primary); }
.chat-widget-launcher { position: fixed; z-index: 50; right: 22px; bottom: 22px; display: inline-flex; min-height: 44px; align-items: center; gap: 9px; padding: 6px 14px 6px 7px; border: 1px solid rgba(205,235,239,.22); border-radius: 13px; color: #edf9f8; background: linear-gradient(145deg, rgba(18,29,40,.56), rgba(5,16,25,.42)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(153,222,224,.05), 0 34px 90px rgba(0,6,12,.34); font-family: var(--font-ui); cursor: pointer; backdrop-filter: blur(32px) saturate(1.16); -webkit-backdrop-filter: blur(32px) saturate(1.16); transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.chat-widget-launcher:hover { border-color: rgba(172,237,229,.4); background: linear-gradient(145deg, rgba(22,38,49,.62), rgba(7,21,30,.48)); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 24px 60px rgba(0,6,12,.36), 0 0 24px rgba(83,214,201,.1); transform: translateY(-2px); }
.chat-widget-launcher:focus-visible { outline: 2px solid rgba(112,222,208,.72); outline-offset: 3px; }
.chat-widget-launcher > span { display: grid; min-width: 31px; height: 31px; place-items: center; border: 1px solid rgba(119,211,207,.18); border-radius: 9px; color: #66d5c8; background: rgba(73,199,187,.09); font-size: 14px; font-weight: 500; }
.chat-widget-launcher > span svg { width: 22px; height: 22px; }
.chat-widget-launcher strong { font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.chat-widget-launcher-docked { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.messages-chat-card { padding: 0; overflow: hidden; }
#learner-messages-chat-dock { display: flex; min-height: 620px; }
#learner-messages-chat-dock:empty::before { content: "Открываем чат…"; display: flex; align-items: center; justify-content: center; width: 100%; color: var(--muted); font-size: 14px; }
.hde-container-docked { position: static !important; inset: auto !important; width: 100% !important; height: 620px !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.hde-container-docked iframe { display: block; width: 100% !important; height: 100% !important; border: 0 !important; }
.hde-learning-chat, :root[data-hde-chat="visible"] #hde-chat-container { border-radius: 24px !important; }
:root[data-hde-chat="visible"] #hde-container { right: 14px !important; bottom: 14px !important; pointer-events: none; }
:root[data-hde-chat="visible"] #hde-chat-button { display: none !important; }
:root[data-hde-chat="visible"] #hde-chat-container { pointer-events: auto; }
.hde-learning-chat { --hde-learning-accent: var(--primary); --hde-learning-surface: color-mix(in srgb, var(--surface) 94%, transparent); --hde-learning-text: var(--ink); color: var(--hde-learning-text) !important; border-color: color-mix(in srgb, var(--primary) 30%, var(--line)) !important; background: var(--hde-learning-surface) !important; box-shadow: 0 22px 60px color-mix(in srgb, var(--deep) 24%, transparent) !important; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.hde-learning-chat, .hde-learning-chat * { font-family: "Manrope Variable", sans-serif !important; }
.hde-learning-chat :is(button, [role="button"], input[type="submit"]) { border-color: color-mix(in srgb, var(--primary) 34%, transparent) !important; background: linear-gradient(135deg, var(--primary), var(--mint)) !important; color: white !important; }
.hde-learning-chat :is(input, textarea) { border-color: var(--line) !important; color: var(--ink) !important; background: var(--field) !important; }
:root[data-theme="dark"] .hde-learning-chat { --hde-learning-surface: rgba(8, 34, 43, .94); }
:root[data-theme="turquoise"] .hde-learning-chat { --hde-learning-surface: rgba(224, 250, 247, .88); }

/* В аккаунтах переключатель темы находится в боковой панели. */
.admin-app-frame .sidebar-profile { margin-top: auto; }

:root[data-theme="dark"] .surface,
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .admin-next-step,
:root[data-theme="dark"] .course-card,
:root[data-theme="dark"] .longread,
:root[data-theme="dark"] .task-editor,
:root[data-theme="dark"] .learner-tip,
:root[data-theme="dark"] .demo-notice { border-color: var(--line); background: var(--surface); }
:root[data-theme="dark"] .task-helper-inline { background: var(--field); }
:root[data-theme="dark"] .sidebar { background: #0d1620; }
:root[data-theme="dark"] .brand-mark { background: linear-gradient(145deg, #25859a 0%, #0d5967 58%, #061218 100%); box-shadow: 0 10px 30px rgba(37,133,154,.24); }
:root[data-theme="dark"] .nav-link.active { border-color: rgba(37,133,154,.42); background: rgba(37,133,154,.16); box-shadow: inset 4px 0 #25859a; }
:root[data-theme="dark"] .nav-link.active .nav-marker { border-color: rgba(37,133,154,.46); background: rgba(37,133,154,.18); }
:root[data-theme="dark"] .admin-app-frame .brand-mark, :root[data-theme="dark"] .learner-app-frame .brand-mark { background: none; box-shadow: none; }
:root[data-theme="dark"] .admin-app-frame .nav-link.active, :root[data-theme="dark"] .learner-app-frame .nav-link.active { border-color: transparent; background: none; box-shadow: none; }
:root[data-theme="dark"] .admin-app-frame .nav-link.active .nav-marker, :root[data-theme="dark"] .learner-app-frame .nav-link.active .nav-marker { border-color: transparent; background: none; }
:root[data-theme="dark"] .button.primary { color: #062326; background: var(--mint); box-shadow: 0 12px 26px rgba(37,133,154,.22); }
:root[data-theme="dark"] :is(.eyebrow, .learner-hub > a > small, .term-grid strong) { color: #25859a; }
:root[data-theme="dark"] .course-hero .txt .eyebrow { color: #fff; }
:root[data-theme="dark"] .hero-card::after { background: radial-gradient(circle at 35% 60%, rgba(37,133,154,.76), rgba(13,89,103,.12) 62%, transparent 63%); }
:root[data-theme="dark"] .profile-avatar { color: #061218; background: #d2dadb; }
:root[data-theme="dark"] .operation-row.active { background: linear-gradient(135deg, rgba(18,62,63,.95), rgba(41,39,75,.9)); }
:root[data-theme="dark"] th,
:root[data-theme="dark"] .groups-board-columns,
:root[data-theme="dark"] .review-answer > section,
:root[data-theme="dark"] .term-grid > span { background: var(--subtle); }
:root[data-theme="dark"] .button.secondary,
:root[data-theme="dark"] .reset-filter { color: var(--ink); border-color: var(--line); background: var(--field); }
:root[data-theme="dark"] .topbar-chip { color: var(--muted); border-color: var(--line); background: var(--surface); }
:root[data-theme="dark"] .topbar-chip.accent { color: #9fc5c8; border-color: rgba(37,133,154,.32); background: rgba(13,89,103,.18); }
:root[data-theme="dark"] .progress-orb::after,
:root[data-theme="dark"] .section-index { background: var(--field); }
:root[data-theme="dark"] .longread-body,
:root[data-theme="dark"] .review-answer ol,
:root[data-theme="dark"] .editor-canvas textarea { color: #c4d7d9; }
:root[data-theme="dark"] .editor-toolbar button,
:root[data-theme="dark"] .editor-example,
:root[data-theme="dark"] .ai-panel > article,
:root[data-theme="dark"] .ai-panel > button { color: var(--ink); background: var(--lavender-soft); }
:root[data-theme="dark"] label { color: var(--ink); }
:root[data-theme="dark"] .login-page,
:root[data-theme="turquoise"] .login-page { color: #edf7f7; background: radial-gradient(circle at 18% 24%, rgba(44,169,169,.22), transparent 34%), linear-gradient(118deg, #176f73 0%, #12666c 43%, #0c3843 68%, #091d29 100%); }
:root[data-theme="dark"] .login-story,
:root[data-theme="turquoise"] .login-story { background: transparent; }
:root[data-theme="dark"] .login-panel,
:root[data-theme="turquoise"] .login-panel { background: transparent; border-left: 0; }
:root[data-theme="dark"] .login-color-bends-static { background: linear-gradient(128deg, #1b5f63 0%, #167e88 32%, #0f5c6e 58%, #0e7a5c 100%); }
:root[data-theme="dark"] :is(.login-form-wrap, .login-testimonial) { border-color: rgba(172,237,229,.2); background: linear-gradient(145deg, rgba(9,29,38,.54), rgba(3,12,20,.4)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(211,255,249,.12), inset 0 -1px 0 rgba(78,185,181,.05), 0 30px 90px rgba(0,5,9,.42); }
:root[data-theme="dark"] .chat-widget-launcher { border-color: rgba(172,237,229,.2); background: linear-gradient(145deg, rgba(9,29,38,.54), rgba(3,12,20,.4)); box-shadow: inset 0 1px 0 rgba(211,255,249,.12), inset 0 -1px 0 rgba(78,185,181,.05), 0 30px 90px rgba(0,5,9,.42); }
:root[data-theme="dark"] .login-terminal-content .button.secondary { background: var(--login-terminal-chrome); }
:root[data-theme="dark"] .demo-notice { color: var(--ink); background: var(--surface); }
:root[data-theme="dark"] .login-form-wrap h2 { color: var(--ink); }

/* Terminal surface применяется только к главному дашборду администратора. */
.admin-dashboard-page {
  --admin-terminal-border: color-mix(in srgb, var(--primary) 24%, var(--line));
  --admin-terminal-chrome: color-mix(in srgb, var(--deep) 8%, var(--surface));
  --admin-terminal-fill: color-mix(in srgb, var(--surface) 88%, transparent);
  --admin-terminal-shadow: 0 24px 64px color-mix(in srgb, var(--deep) 14%, transparent);
}
.admin-dashboard-page > * + * { margin-top: 30px; }
.admin-dashboard-page .metric-grid { gap: 26px; }
.admin-dashboard-page :is(
  .surface,
  .metric-card,
  .admin-next-step,
  .hero-card,
  .section-function-sidebar,
  .document-page,
  .test-builder,
  .assignment-builder,
  .test-player,
  .test-result,
  .question-card,
  .create-guide
) {
  border: 1px solid var(--admin-terminal-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--admin-terminal-fill) 96%, transparent);
  box-shadow: var(--admin-terminal-shadow);
}
.admin-dashboard-page .admin-hero::after { display: none; }
.admin-dashboard-page .admin-hero {
  display: block;
  padding: 58px 38px 0;
}
.admin-dashboard-page :is(.hero-card, .metric-card, .activity-chart, .admin-next-step) {
  font-weight: 450;
  letter-spacing: .01em;
}
.admin-dashboard-page :is(.hero-card, .metric-card, .activity-chart, .admin-next-step) :is(h2, h3, strong, span, small, p, a, button, label, select) {
  font-family: inherit;
}
.dash-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.dash-bento > .course-hero { grid-column: 1 / -1; }
@media (max-width: 1100px) { .dash-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dash-bento { grid-template-columns: 1fr; } }
.dash-bento .panel { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; position: relative; }
.dash-bento .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dash-bento .panel-head h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.dash-bento .mk { display: block; width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; }
.dash-bento .mk-teal { background: var(--primary); }
.dash-bento .mk-coral { background: #ff5a3c; }
.dash-bento .mk-gold { background: var(--gold); }
.dash-bento .stack-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dash-bento .dot-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.dash-bento .dot-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.dash-bento .flow-bar { display: flex; height: 42px; border-radius: 13px; overflow: hidden; gap: 2px; }
.dash-bento .flow-bar .seg { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.dash-bento .seg-teal-deep { background: #146d80; }
.dash-bento .seg-teal { background: var(--primary); }
.dash-bento .seg-green { background: var(--mint); }
.dash-bento .seg-gold { background: var(--gold); }
.dash-bento .flow-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; }
.dash-bento .fl-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.dash-bento .fl-item i { display: block; width: 9px; height: 9px; border-radius: 4px; flex-shrink: 0; }
.dash-bento .fl-teal-deep { background: #146d80; }
.dash-bento .fl-teal { background: var(--primary); }
.dash-bento .fl-green { background: var(--mint); }
.dash-bento .fl-gold { background: var(--gold); }
.dash-bento .attn-list { display: flex; flex-direction: column; margin-top: 12px; }
.dash-bento .attn-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: inherit; font-size: 12.5px; transition: color .16s ease; }
.dash-bento .attn-row:first-of-type { border-top: 0; padding-top: 0; }
.dash-bento .attn-row:hover, .dash-bento .attn-row:focus-visible { color: var(--primary); outline: none; }
.dash-bento .avatar { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; background: var(--mint-soft); color: var(--primary); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.dash-bento .attn-row .tag { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.dash-bento .attn-row .tag.coral { background: var(--rose-soft); color: #e2431f; }
.dash-bento .attn-row .tag.gold { background: #f7efda; color: #a67f2e; }
.dash-bento .stat-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); color: inherit; transition: color .16s ease; }
.dash-bento .stat-row:first-of-type { border-top: 0; padding-top: 2px; }
.dash-bento .stat-row:hover, .dash-bento .stat-row:focus-visible { color: var(--primary); outline: none; }
.dash-bento .stat-row .num { width: 40px; flex-shrink: 0; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.dash-bento .stat-row .table-avatar { flex-shrink: 0; }
.dash-bento .stat-row .txt { display: flex; flex-direction: column; gap: 2px; }
.dash-bento .stat-row .txt b { font-size: 13px; font-weight: 650; color: var(--ink); }
.dash-bento .stat-row .txt small { font-size: 13px; color: var(--muted); }
.dash-bento .mt-row { display: flex; align-items: baseline; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.dash-bento .mt-row:first-of-type { border-top: 0; padding-top: 4px; }
.dash-bento .mt-row:last-of-type { padding-bottom: 4px; }
.dash-bento .mt-row time { flex-shrink: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .dash-bento .mk-coral, :root[data-theme="dark"] .dash-bento .attn-row .tag.coral { background: #33231f; }
:root[data-theme="dark"] .dash-bento .attn-row .tag.coral { color: #ff8266; }
:root[data-theme="dark"] .dash-bento .mk-gold { background: #e3c077; }
:root[data-theme="dark"] .dash-bento .attn-row .tag.gold { background: #2e2820; color: #e3c077; }
:root[data-theme="turquoise"] .dash-bento .attn-row .tag.coral { background: #fde6e0; color: #c13b1e; }
:root[data-theme="turquoise"] .dash-bento .attn-row .tag.gold { background: #fbf0da; color: #b08328; }
.admin-dashboard-page .hero-overview-columns {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
.admin-dashboard-page .hero-overview-window:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.admin-dashboard-page .hero-overview-window:nth-child(2) { grid-column: 2; grid-row: 1; }
.admin-dashboard-page .hero-overview-window:nth-child(3) { grid-column: 3; grid-row: 1; }
.admin-dashboard-page .hero-overview-window-actions { grid-column: 2 / 4; grid-row: 2; }
@media (max-width: 1100px) {
  .admin-dashboard-page .hero-overview-columns { grid-template-columns: 1fr 1fr; }
  .admin-dashboard-page .hero-overview-window:nth-child(1) { grid-column: 1 / 3; grid-row: auto; }
  .admin-dashboard-page .hero-overview-window:nth-child(2) { grid-column: 1; grid-row: auto; }
  .admin-dashboard-page .hero-overview-window:nth-child(3) { grid-column: 2; grid-row: auto; }
  .admin-dashboard-page .hero-overview-window-actions { grid-column: 1 / 3; grid-row: auto; }
}
.admin-dashboard-page .hero-overview-window {
  position: relative;
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--admin-auth-window-border);
  border-radius: 16px;
  background: var(--admin-auth-window-fill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--admin-auth-window-shadow);
  font-weight: 300;
  letter-spacing: -.012em;
}
.admin-dashboard-page .overview-action-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
.admin-dashboard-page .overview-action-list > a {
  display: grid;
  min-height: 112px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--admin-auth-window-border);
  border-radius: 13px;
  color: inherit;
  background: color-mix(in srgb, var(--admin-auth-window-chrome-start) 74%, transparent);
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.admin-dashboard-page .overview-action-list > a:hover,
.admin-dashboard-page .overview-action-list > a:focus-visible { border-color: color-mix(in srgb, var(--primary) 58%, transparent); color: inherit; outline: none; background: color-mix(in srgb, var(--primary) 9%, var(--admin-auth-window-chrome-start)); transform: translateY(-2px); }
.admin-dashboard-page .overview-action-list > a > i { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, #25859a 74%, white); border-radius: 9px; color: #eef9fb; background: #25859a; font-family: var(--font-ui); font-size: 15px; font-style: normal; font-weight: 700; }
.admin-dashboard-page .overview-action-list > a > span { display: grid; gap: 5px; min-width: 0; }
.admin-dashboard-page .overview-action-list > a strong { white-space: normal; }
.admin-dashboard-page .overview-action-list > a > b { min-width: 0; height: auto; border: 0; color: var(--primary); background: none; font-size: 16px; }
.admin-dashboard-page .hero-overview-columns header { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--admin-terminal-border); }
.admin-dashboard-page .hero-overview-columns header span { font-size: 13px; font-weight: 750; }
.admin-dashboard-page .hero-overview-columns header b { display: grid; min-width: 30px; height: 30px; place-items: center; border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--ink) 82%, transparent); background: color-mix(in srgb, var(--primary) 9%, transparent); font-size: 14px; font-weight: 650; }
.admin-dashboard-page .hero-overview-columns section > a { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 64px; color: inherit; transition: color .16s ease, transform .16s ease; }
.admin-dashboard-page .hero-overview-columns section > a + a { border-top: 1px solid color-mix(in srgb, var(--admin-terminal-border) 70%, transparent); }
.admin-dashboard-page .hero-overview-columns section > a:hover, .admin-dashboard-page .hero-overview-columns section > a:focus-visible { color: var(--primary); outline: none; transform: translateX(2px); }
.admin-dashboard-page .hero-overview-columns section > a span { display: grid; gap: 3px; min-width: 0; }
.admin-dashboard-page .hero-overview-columns strong { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.admin-dashboard-page .hero-overview-columns small { color: var(--muted); font-size: 9.5px; }
.admin-dashboard-page .event-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent); }
.admin-dashboard-page .event-dot.review { color: #69d6f2; background: currentColor; }
.admin-dashboard-page .event-dot.progress { color: #63d3b6; background: currentColor; }
.admin-dashboard-page .event-dot.certificate { color: var(--gold, #b08328); background: currentColor; }
.admin-dashboard-page .event-dot.risk { color: #e29183; background: currentColor; }
.admin-dashboard-page .metric-card {
  background: var(--admin-terminal-fill);
}
.admin-dashboard-page .metric-card::after { display: none; }
.admin-dashboard-page :is(.table-surface, .word-editor, .studio-dialog) {
  overflow: hidden;
}
.admin-dashboard-page :is(
  .table-toolbar,
  .document-header,
  .course-content-header,
  .panel-heading,
  .word-ribbon
) {
  border-bottom-color: var(--admin-terminal-border);
  background: color-mix(in srgb, var(--admin-terminal-chrome) 88%, transparent);
}
.admin-dashboard-page .studio-dialog {
  border-color: var(--admin-terminal-border);
  background: linear-gradient(145deg, var(--admin-terminal-fill), color-mix(in srgb, var(--deep) 8%, var(--admin-terminal-fill)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), var(--admin-terminal-shadow);
  backdrop-filter: blur(30px) saturate(1.14);
  -webkit-backdrop-filter: blur(30px) saturate(1.14);
}

/* Результаты поиска — простая непрозрачная панель без оформления терминала. */
.admin-dashboard-page .global-function-search .function-search-results {
  z-index: 80;
  border: 1px solid #d7dde5;
  border-radius: 13px;
  background: #f6f8fb;
  background-image: none;
  box-shadow: 0 18px 42px rgba(15,23,42,.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.admin-dashboard-page .global-function-search .function-search-results::before,
.admin-dashboard-page .global-function-search .function-search-results::after {
  display: none;
  content: none;
}
.admin-dashboard-page .global-function-search .function-search-results > a {
  border-color: #d7dde5;
  background: #fff;
  background-image: none;
  box-shadow: none;
}
.admin-dashboard-page .global-function-search .function-search-results > a:hover {
  border-color: #aeb8c5;
  background: #edf1f6;
}
:root[data-theme="dark"] .admin-dashboard-page .global-function-search .function-search-results {
  border-color: #343b47;
  background: #10131a;
  box-shadow: 0 20px 48px rgba(0,0,0,.46);
}
:root[data-theme="dark"] .admin-dashboard-page .global-function-search .function-search-results > a {
  border-color: #303744;
  background: #191d26;
}
:root[data-theme="dark"] .admin-dashboard-page .global-function-search .function-search-results > a:hover {
  border-color: #4b5565;
  background: #222833;
}
:root[data-theme="turquoise"] .admin-dashboard-page .global-function-search .function-search-results {
  border-color: #cbd4dd;
  background: #f2f5f7;
  box-shadow: 0 18px 42px rgba(23,35,49,.2);
}
:root[data-theme="turquoise"] .admin-dashboard-page .global-function-search .function-search-results > a {
  border-color: #d2d9e1;
  background: #fff;
}
:root[data-theme="turquoise"] .admin-dashboard-page .global-function-search .function-search-results > a:hover {
  border-color: #aeb8c5;
  background: #e9eef3;
}

:root[data-theme="dark"] .admin-dashboard-page {
  --admin-terminal-border: rgba(198,205,214,.18);
  --admin-terminal-chrome: rgba(29,33,42,.66);
  --admin-terminal-fill: rgba(15,19,26,.62);
  --admin-terminal-shadow: 0 30px 90px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .admin-dashboard-page :is(
  .surface,
  .metric-card,
  .admin-next-step,
  .hero-card,
  .section-function-sidebar,
  .document-page,
  .test-builder,
  .assignment-builder,
  .test-player,
  .test-result,
  .question-card,
  .create-guide
) {
  background: var(--admin-terminal-fill);
  box-shadow: inset 0 1px 0 rgba(235,239,244,.1), inset 0 -1px 0 rgba(170,178,188,.04), var(--admin-terminal-shadow);
}
:root[data-theme="dark"] .admin-dashboard-page .admin-hero {
  color: #d2dadb;
  background: radial-gradient(ellipse 34% 96% at 98% 10%, rgba(139,150,166,.1), transparent 74%), var(--admin-terminal-fill);
  background-clip: padding-box;
  animation: hero-panel-enter .78s cubic-bezier(.2,.78,.24,1) both;
}
:root[data-theme="dark"] .admin-dashboard-page .admin-hero p { color: #aebfc1; }
:root[data-theme="dark"] .admin-dashboard-page .metric-card {
  background: linear-gradient(145deg, rgba(15,19,26,.62), rgba(7,10,15,.48));
}
:root[data-theme="dark"] .admin-dashboard-page .metric-card::before {
  color: rgba(202,208,216,.46);
  background: linear-gradient(180deg, rgba(39,43,53,.5), rgba(21,24,31,.38));
}
:root[data-theme="dark"] .admin-dashboard-page :is(.hero-card, .metric-card, .activity-chart, .admin-next-step) {
  border-color: rgba(198,205,214,.18);
  color: #d2dadb;
  background: var(--admin-terminal-fill);
  box-shadow: inset 0 1px 0 rgba(235,239,244,.1), inset 0 -1px 0 rgba(170,178,188,.04), 0 30px 90px rgba(0,0,0,.4);
  backdrop-filter: blur(32px) saturate(1.16);
  -webkit-backdrop-filter: blur(32px) saturate(1.16);
}
:root[data-theme="dark"] .admin-dashboard-page .admin-hero {
  background: var(--admin-terminal-fill);
}
:root[data-theme="dark"] .admin-dashboard-page :is(.table-toolbar, .document-header, .course-content-header, .panel-heading, .word-ribbon) {
  background: rgba(29,33,42,.58);
}

:root[data-theme="turquoise"] .admin-dashboard-page {
  --admin-terminal-border: rgba(205,255,249,.28);
  --admin-terminal-chrome: rgba(10,56,65,.44);
  --admin-terminal-fill: rgba(232,250,248,.66);
  --admin-terminal-shadow: 0 28px 76px rgba(3,35,44,.24);
}
:root[data-theme="turquoise"] .admin-dashboard-page :is(
  .surface,
  .metric-card,
  .admin-next-step,
  .hero-card,
  .section-function-sidebar,
  .document-page,
  .test-builder,
  .assignment-builder,
  .test-player,
  .test-result,
  .question-card,
  .create-guide
) {
  border-color: var(--admin-terminal-border);
  background: var(--admin-terminal-fill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(116,231,220,.08), var(--admin-terminal-shadow);
  backdrop-filter: blur(28px) saturate(1.12);
  -webkit-backdrop-filter: blur(28px) saturate(1.12);
}
:root[data-theme="turquoise"] .admin-dashboard-page .metric-card {
  background: linear-gradient(145deg, rgba(224,248,246,.7), rgba(197,235,233,.52));
}
:root[data-theme="turquoise"] .admin-dashboard-page .metric-card::before {
  color: rgba(32,86,92,.56);
  background: linear-gradient(180deg, rgba(10,56,65,.24), rgba(7,38,47,.14));
}
:root[data-theme="turquoise"] .admin-dashboard-page .admin-hero {
  color: #f2fffd;
  background: radial-gradient(ellipse 34% 96% at 98% 10%, rgba(116,101,203,.22), transparent 74%), var(--admin-terminal-fill);
  background-clip: padding-box;
  animation: hero-panel-enter .78s cubic-bezier(.2,.78,.24,1) both;
}

:root[data-theme="turquoise"] .workspace-topbar { border-color: rgba(13, 73, 83, .18); }
:root[data-theme="turquoise"] .surface,
:root[data-theme="turquoise"] .metric-card,
:root[data-theme="turquoise"] .admin-next-step,
:root[data-theme="turquoise"] .course-card,
:root[data-theme="turquoise"] .longread,
:root[data-theme="turquoise"] .task-editor,
:root[data-theme="turquoise"] .learner-tip,
:root[data-theme="turquoise"] .demo-notice { border-color: rgba(255,255,255,.48); backdrop-filter: blur(18px); }
:root[data-theme="turquoise"] .activity-chart,
:root[data-theme="turquoise"] .settings-builder > .surface,
:root[data-theme="turquoise"] .import-workspace > .surface,
:root[data-theme="turquoise"] .certificate-workspace .surface,
:root[data-theme="turquoise"] .integration-workspace .surface,
:root[data-theme="turquoise"] .audit-workspace .surface { background: rgba(241,252,251,.86); box-shadow: 0 24px 64px rgba(15,75,82,.16); backdrop-filter: blur(20px); }
:root[data-theme="turquoise"] .sidebar { background: #0d3a3c; }
:root[data-theme="turquoise"] .hero-card { background: linear-gradient(125deg, #16454f 0%, #246c73 56%, #45b8ad 100%); }
:root[data-theme="turquoise"] th,
:root[data-theme="turquoise"] .groups-board-columns,
:root[data-theme="turquoise"] .review-answer > section,
:root[data-theme="turquoise"] .term-grid > span { background: rgba(238, 252, 251, .72); }
:root[data-theme="turquoise"] .button.primary { color: #062f2c; background: var(--mint); box-shadow: 0 12px 26px rgba(30,196,184,.28); }
:root[data-theme="turquoise"] .login-color-bends-static { background: linear-gradient(128deg, #a9f0e8 0%, #5fe0d2 34%, #1ec4b8 66%, #159b92 100%); }
:root[data-theme="turquoise"] .chat-widget-launcher { border-color: rgba(30,196,184,.25); background: rgba(238,251,250,.7); }
:root[data-theme="turquoise"] .demo-notice { background: rgba(255,255,255,.62); }
:root[data-theme] .login-form-wrap { border-color: rgba(177,222,226,.22); background: rgba(9,24,34,.72); box-shadow: 0 30px 70px -24px rgba(0,8,14,.52); }
:root[data-theme] .login-terminal-content input,
:root[data-theme] .login-terminal-content .button.secondary,
:root[data-theme] .login-terminal-content .admin-specular-button { border-color: rgba(177,222,226,.22); color: #edf7f7; background: #14212c; }
:root[data-theme] .login-terminal-content .button.primary { color: #071219; background: #4fc8df; box-shadow: 0 7px 16px rgba(2,25,34,.2); }
:root[data-theme="dark"] .login-terminal-content input,
:root[data-theme="dark"] .login-terminal-content .button.secondary,
:root[data-theme="dark"] .login-terminal-content .admin-specular-button { background: rgba(20,33,44,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
:root[data-theme="light"] .login-form-wrap,
:root[data-theme="turquoise"] .login-form-wrap { border-color: rgba(12,42,46,.1); background: radial-gradient(130% 130% at 50% 15%, rgba(255,255,255,.9) 55%, rgba(240,247,246,.88) 100%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: inset 0 0 70px rgba(8,36,41,.1), 0 30px 70px -24px rgba(6,30,34,.24); }
:root[data-theme="light"] .login-form-wrap h2,
:root[data-theme="turquoise"] .login-form-wrap h2 { color: #0f2a2e; }
/* Базовый .login-link-button рассчитан на тёмную карточку входа: на светлой/turquoise-карточке
   тот же приглушённый цвет проваливается в контраст (~1.7:1 вместо нужных 4.5:1 по WCAG AA). */
:root[data-theme="light"] .login-link-button,
:root[data-theme="turquoise"] .login-link-button { color: #3c5e63; }
:root[data-theme="light"] .login-link-button:hover:not(:disabled),
:root[data-theme="turquoise"] .login-link-button:hover:not(:disabled) { color: #0f2a2e; }
:root[data-theme="light"] .login-terminal-content label,
:root[data-theme="turquoise"] .login-terminal-content label { color: #46666a; }
:root[data-theme="light"] .login-terminal-content input,
:root[data-theme="turquoise"] .login-terminal-content input,
:root[data-theme="light"] .login-terminal-content .button.secondary,
:root[data-theme="turquoise"] .login-terminal-content .button.secondary,
:root[data-theme="light"] .login-terminal-content .admin-specular-button,
:root[data-theme="turquoise"] .login-terminal-content .admin-specular-button { border-color: rgba(12,42,46,.16); color: #0f2a2e; background: rgba(255,255,255,.9); }

:root[data-theme="dark"] :is(.metric-card, .admin-next-step, .dashboard-links > .surface, .activity-chart),
:root[data-theme="turquoise"] :is(.metric-card, .admin-next-step, .dashboard-links > .surface, .activity-chart) {
  border-color: var(--glass-border);
  background: linear-gradient(145deg, var(--glass-highlight), var(--glass-fill));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 45%, transparent), 0 24px 64px rgba(4, 35, 43, .15);
  backdrop-filter: blur(26px) saturate(1.15);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
}
:root[data-theme="dark"] .activity-chart,
:root[data-theme="turquoise"] .activity-chart { animation: chart-panel-glow 5.4s ease-in-out infinite; }

/* Панели главной администратора: чистый светлый стиль, без стеклянной сатиновой имитации окна. */
.admin-dashboard-page {
  --admin-auth-window-border: var(--line);
  --admin-auth-window-chrome-start: var(--surface-sunken, var(--subtle));
  --admin-auth-window-chrome-end: var(--subtle);
  --admin-auth-window-fill: color-mix(in srgb, var(--surface) 92%, transparent);
  --admin-auth-window-shadow: 0 20px 44px -26px rgba(20,32,31,.16), 0 2px 8px -2px rgba(20,32,31,.06);
}
:root[data-theme="dark"] .admin-dashboard-page {
  --admin-auth-window-border: var(--line);
  --admin-auth-window-chrome-start: var(--subtle);
  --admin-auth-window-chrome-end: var(--subtle);
  --admin-auth-window-fill: color-mix(in srgb, var(--surface) 90%, transparent);
  --admin-auth-window-shadow: 0 26px 54px -26px rgba(0,0,0,.6), 0 2px 12px -2px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .admin-dashboard-page .global-function-search .function-search-field input {
  border-color: rgba(205,210,220,.2);
  background: linear-gradient(145deg, rgba(24,26,33,.64), rgba(10,12,17,.52));
  box-shadow: inset 0 1px 0 rgba(242,244,248,.1), 0 18px 42px rgba(0,0,0,.34);
  backdrop-filter: blur(24px) saturate(.35);
  -webkit-backdrop-filter: blur(24px) saturate(.35);
}
:root[data-theme="dark"] .admin-dashboard-page .global-function-search .function-search-field input:focus {
  border-color: rgba(37,133,154,.58);
  box-shadow: 0 0 0 3px rgba(37,133,154,.12);
}
:root[data-theme="dark"] .admin-dashboard-page .global-function-search .function-search-field kbd {
  border-color: rgba(205,210,220,.2);
  background: linear-gradient(145deg, rgba(38,40,49,.74), rgba(20,22,29,.66));
}

:root[data-theme="dark"] .admin-dashboard-page :is(.metric-card, .admin-next-step) {
  box-shadow: inset 0 1px 0 rgba(242,244,248,.1), 0 22px 58px rgba(0,0,0,.42);
  backdrop-filter: blur(24px) saturate(.35);
  -webkit-backdrop-filter: blur(24px) saturate(.35);
}
:root[data-theme="turquoise"] .admin-dashboard-page {
  --admin-auth-window-border: var(--line);
  --admin-auth-window-chrome-start: var(--subtle);
  --admin-auth-window-chrome-end: var(--subtle);
  --admin-auth-window-fill: color-mix(in srgb, var(--surface) 90%, transparent);
  --admin-auth-window-shadow: 0 22px 46px -26px rgba(13,58,60,.22), 0 2px 10px -2px rgba(13,58,60,.1);
}
.admin-dashboard-page :is(.hero-card, .metric-card, .activity-chart, .admin-next-step) {
  border-color: var(--admin-auth-window-border);
  background: var(--admin-auth-window-fill);
  box-shadow: var(--admin-auth-window-shadow);
  backdrop-filter: blur(32px) saturate(1.16);
  -webkit-backdrop-filter: blur(32px) saturate(1.16);
  font-family: var(--font-ui);
  font-weight: 300;
  letter-spacing: -.012em;
}
.admin-dashboard-page :is(.hero-card, .metric-card, .activity-chart, .admin-next-step) :is(h2, h3, strong, span, small, p, a, button, label, select) {
  font-family: inherit;
}
.admin-dashboard-page .hero-overview-columns > section { padding: 64px 26px 20px; }
.admin-dashboard-page .hero-overview-columns header { min-height: 46px; }
.admin-dashboard-page .hero-overview-columns header span { font-size: 15px; font-weight: 520; }
.admin-dashboard-page .hero-overview-columns header b { min-width: 32px; height: 32px; font-size: 13px; font-weight: 500; }
.admin-dashboard-page .hero-overview-columns section > a { min-height: 70px; }
.admin-dashboard-page .hero-overview-columns strong { font-size: 15px; font-weight: 500; }
.admin-dashboard-page .hero-overview-columns small { font-size: 13px; font-weight: 320; line-height: 1.4; }
.admin-dashboard-page .metric-card > span { font-size: 16px; font-weight: 420; }
.admin-dashboard-page .metric-card > strong { font-size: 40px; font-weight: 420; }
.admin-dashboard-page .metric-card > small { font-size: 14px; font-weight: 320; line-height: 1.45; }
.admin-dashboard-page .metric-card .metric-icon { display: none; }
.admin-dashboard-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}
.admin-dashboard-topbar > .page-header { margin: 0; }
.admin-dashboard-topbar > .global-function-search { max-width: 560px; }
.admin-dashboard-topbar .global-function-search .function-search-field input { min-height: 56px; }
.admin-dashboard-topbar + .hero-overview-columns {
  margin-top: clamp(40px, 3vw, 48px);
}
.admin-dashboard-topbar > .page-header h1 {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.admin-dashboard-topbar .greeting-eyebrow { margin: 0 0 6px; font-family: var(--font-ui); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.admin-dashboard-topbar .greeting-accent { color: var(--ink); }
.admin-dashboard-topbar .greeting-name { color: var(--primary); }
.admin-dashboard-page .admin-next-step h3 { font-size: 20px; font-weight: 460; }
.admin-dashboard-page .admin-next-step p:not(.eyebrow) { font-size: 15px; font-weight: 320; }
.admin-dashboard-page .metric-card::before {
  border-bottom-color: var(--admin-auth-window-border);
  background: linear-gradient(180deg, var(--admin-auth-window-chrome-start), var(--admin-auth-window-chrome-end));
}

/* Спокойный графитовый фон главной: холодные блики видны только через сатиновое стекло. */
:root[data-theme="dark"] .admin-dashboard-page :is(.hero-card, .metric-card, .activity-chart, .admin-next-step) {
  border-color: rgba(198, 198, 204, .22);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: inset 0 1px 0 rgba(242, 244, 248, .1), inset 0 -1px 0 rgba(148, 163, 184, .04), 0 28px 76px rgba(0, 0, 0, .36);
  backdrop-filter: blur(32px) saturate(.72);
  -webkit-backdrop-filter: blur(32px) saturate(.72);
}
:root[data-theme="dark"] .admin-dashboard-page .metric-card::before {
  border-bottom-color: rgba(198, 198, 204, .18);
  background: linear-gradient(180deg, rgba(35, 37, 45, .82), rgba(22, 24, 31, .76));
}
:root[data-theme="dark"] .admin-dashboard-page .global-function-search .function-search-field input {
  border-color: rgba(198, 198, 204, .22);
  background: linear-gradient(145deg, rgba(26, 28, 35, .72), rgba(9, 11, 16, .62));
  box-shadow: inset 0 1px 0 rgba(242, 244, 248, .08), 0 18px 42px rgba(0, 0, 0, .34);
  backdrop-filter: blur(22px) saturate(.46);
  -webkit-backdrop-filter: blur(22px) saturate(.46);
}
:root[data-theme="dark"] .admin-app-frame .workspace:has(.admin-dashboard-page) {
  background: var(--background);
}

/* У метрик остаётся терминальная строка и разделитель, но без второй рамки с macOS-кружками. */
:root[data-theme="dark"] .admin-dashboard-page .metric-card {
  background:
    linear-gradient(to bottom, transparent 33px, rgba(198, 198, 204, .18) 33px 34px, transparent 34px),
    linear-gradient(to bottom, rgba(35, 37, 45, .54) 0, rgba(22, 24, 31, .44) 34px, transparent 34px),
    linear-gradient(145deg, rgba(24, 27, 35, .46), rgba(7, 10, 16, .32));
}
:root[data-theme="turquoise"] .admin-dashboard-page .metric-card {
  background:
    linear-gradient(to bottom, transparent 33px, var(--admin-auth-window-border) 33px 34px, transparent 34px),
    linear-gradient(to bottom, var(--admin-auth-window-chrome-start) 0, var(--admin-auth-window-chrome-end) 34px, transparent 34px),
    var(--admin-auth-window-fill);
}
:root[data-theme="dark"] .admin-hero,
:root[data-theme="turquoise"] .admin-hero {
  --hero-angle: 0deg;
  border: 2px solid transparent;
  background:
    radial-gradient(ellipse 38% 100% at 4% 100%, color-mix(in srgb, var(--hero-neon-alt) 22%, transparent), transparent 72%),
    radial-gradient(ellipse 32% 88% at 98% 15%, color-mix(in srgb, var(--hero-neon) 34%, transparent), transparent 76%),
    linear-gradient(125deg, #143d47 0%, #225b62 56%, #3caea3 100%) padding-box,
    conic-gradient(from var(--hero-angle), transparent 0deg 320deg, color-mix(in srgb, var(--hero-neon) 12%, transparent) 328deg, var(--hero-neon) 340deg, rgba(255,255,255,.98) 348deg, var(--hero-neon-alt) 354deg, transparent 360deg) border-box,
    linear-gradient(90deg, color-mix(in srgb, var(--hero-neon-alt) 42%, transparent), color-mix(in srgb, var(--hero-neon) 34%, transparent)) border-box;
  background-clip: padding-box, padding-box, padding-box, border-box, border-box;
  background-origin: border-box;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hero-neon) 22%, transparent),
    0 0 12px color-mix(in srgb, var(--hero-neon) 34%, transparent),
    0 0 34px color-mix(in srgb, var(--hero-neon-alt) 22%, transparent),
    0 24px 64px rgba(4,35,43,.22);
  animation: hero-panel-enter .78s cubic-bezier(.2,.78,.24,1) both, hero-border-run 4.8s linear .78s infinite;
}
:root[data-theme="dark"] .chart-canvas,
:root[data-theme="turquoise"] .chart-canvas {
  border: 1px solid color-mix(in srgb, var(--glass-border) 76%, transparent);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--glass-highlight) 48%, transparent), color-mix(in srgb, var(--glass-fill) 56%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 30%, transparent);
}
:root[data-theme="dark"] .admin-hero {
  background:
    radial-gradient(ellipse 38% 100% at 4% 100%, rgba(13,89,103,.28), transparent 72%),
    radial-gradient(ellipse 32% 88% at 98% 15%, rgba(37,133,154,.34), transparent 76%),
    linear-gradient(125deg, #061218 0%, #0d5967 58%, #25859a 100%) padding-box,
    conic-gradient(from var(--hero-angle), transparent 0deg 320deg, rgba(37,133,154,.16) 328deg, #25859a 340deg, rgba(210,218,219,.9) 348deg, #0d5967 354deg, transparent 360deg) border-box,
    linear-gradient(90deg, rgba(13,89,103,.42), rgba(37,133,154,.34)) border-box;
  background-clip: padding-box, padding-box, padding-box, border-box, border-box;
  background-origin: border-box;
}
@keyframes chart-panel-glow {
  0%, 100% { box-shadow: inset 0 1px 0 color-mix(in srgb, white 45%, transparent), 0 24px 64px rgba(4, 35, 43, .15), 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: inset 0 1px 0 color-mix(in srgb, white 55%, transparent), 0 28px 70px rgba(4, 35, 43, .2), 0 0 34px var(--glass-glow); }
}
@keyframes hero-panel-enter {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-border-run { to { --hero-angle: 360deg; } }
@keyframes login-testimonials-run { to { transform: translateX(calc(-50% - 7px)); } }

@media (max-height: 820px) and (min-width: 901px) {
  .login-testimonials { bottom: 70px; }
  .login-testimonials-track, .login-testimonials-group { gap: 12px; }
  .login-testimonial { width: 286px; min-height: 126px; padding: 14px; border-radius: 16px; }
  .login-testimonial blockquote { margin-block: 8px 10px; }
  .login-testimonial footer small { font-size: 13px; }
  .login-form-wrap { padding: 24px 30px; }
  .login-form { gap: 13px; margin-top: 20px; }
  .demo-notice { margin-top: 16px; }
  .form-note { margin-top: 14px; }
}

@media (max-width: 720px) {
  .theme-switcher { top: 12px; right: 12px; }
  .theme-option { padding: 0 12px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  :root[data-theme="dark"] .activity-chart,
  :root[data-theme="turquoise"] .activity-chart,
  :root[data-theme="dark"] .admin-hero,
  :root[data-theme="turquoise"] .admin-hero,
  .chart-series { animation: none; }
  .login-testimonials-track { animation: none; }
}

@media (max-width: 1050px) {
  .app-frame { grid-template-columns: 180px minmax(0, 1fr); }
  .workspace { padding-inline: 32px; }
  .brand-copy { display: none; }
  .sidebar-context { margin-inline: 4px; }
  .nav-link { padding-inline: 8px; }
  .nav-link > span:nth-child(2), .nav-arrow { display: none; }
  .sidebar-note { display: none; }
  .learning-layout, .task-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .longread, .task-editor { padding: 42px; }
  .operations-layout { grid-template-columns: 1fr; }
  .operations-layout > .surface { min-height: auto; }
  .report-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .settings-builder { grid-template-columns: 210px minmax(0,1fr); }
  .import-workspace { grid-template-columns: 1fr; }.import-review { grid-column: auto; }
  .certificate-layout, .learner-certificate-layout { grid-template-columns: 1fr; }
  .certificate-summary { grid-template-columns: 1fr; }
  .certificate-rules { position: static; }
  .certificate-list > article { grid-template-columns: 1fr; }
  .certificate-action { justify-items: start; }
  .certificate-reason { grid-column: auto; margin-left: 0; }
  .certificate-verify { grid-template-columns: 1fr 1fr; }
  .integration-hero { grid-template-columns: auto minmax(0,1fr); }
  .integration-health, .integration-hero > .button { grid-column: 2; }
  .sync-journal > header, .sync-actions { align-items: stretch; flex-direction: column; }
  .audit-toolbar { grid-template-columns: 1fr 1fr; }.audit-toolbar label:first-child { grid-column: 1 / -1; }
  .function-search-results { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-workspace-layout { grid-template-columns: 235px minmax(0,1fr); gap: 16px; }.section-function-sidebar { padding: 17px; }
}

@media (max-width: 900px) {
  .admin-dashboard-topbar { grid-template-columns: 1fr; gap: 20px; }
  .admin-dashboard-page .admin-hero { padding-inline: 24px; }
  .admin-dashboard-page .hero-overview-columns { grid-template-columns: 1fr; }
  .login-page { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .login-panel { min-width: 0; padding: 18px; }
  .login-form-wrap { width: min(460px, 100%); max-height: calc(100dvh - 36px); border-radius: 13px; }
  .login-terminal-content { padding: 22px 22px 30px; }
  .login-form-wrap h2 { font-size: 22px; }
  .login-form { gap: 14px; margin-top: 20px; }
  .people-controls { align-items: stretch; flex-direction: column; }
  .people-actions { justify-content: space-between; }
  .group-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .company-row-stats { grid-column: 2 / 3; }
  .group-row.with-progress { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .company-progress { grid-column: 2 / 3; max-width: none; }
  .groups-board-columns.with-progress { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .groups-board-columns.with-progress span:nth-child(3) { display: none; }
  .operations-toolbar { align-items: stretch; flex-direction: column; }
  .settings-builder { grid-template-columns: 1fr; }
  .ai-dialog-grid { grid-template-columns: 1fr; }
  .global-function-search { grid-template-columns: 1fr; }.function-search-results { grid-column: auto; grid-template-columns: 1fr; }.function-search-field { grid-row: 2; }
  .admin-workspace-layout { grid-template-columns: 1fr; }.section-function-sidebar nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.route-state {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  background: var(--background);
  color: var(--foreground);
}

.route-inline-loading,
.route-inline-error {
  padding: 28px;
}

.route-inline-error p {
  margin: 8px 0 18px;
  color: var(--muted);
}

.company-candidates { margin-bottom: 24px; }
.company-candidates h2 { font-size: 16px; }
.company-candidates > .muted { margin: 4px 0 16px; }
.company-candidate-add, .company-match-add { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 9px; color: var(--primary); background: var(--mint-soft); font-size: 15px; font-weight: 800; cursor: pointer; transition: background-color .16s ease, transform .16s ease; }
.company-candidate-add:hover, .company-match-add:hover { background: color-mix(in srgb, var(--primary) 20%, var(--mint-soft)); }
.company-candidate-add:active, .company-match-add:active { transform: translateY(1px); }
.company-add-user { margin-bottom: 24px; }
.company-add-user-row { display: flex; gap: 10px; margin-top: 8px; }
.company-add-user-row .ui-select-root { flex: 1; }
.company-match-add { flex: 0 0 auto; }
.company-name-cell { display: inline-flex; align-items: center; gap: 6px; }
.company-name-cell .company-match-add { width: 18px; height: 18px; padding: 0; border-radius: 4px; font-size: 14px; line-height: 1; text-align: center; }