/* ═══════════════════════════════════════════════════════════════════
   УчОл — unified design system (token foundation)
   Theme: Apple-inspired neutral base · system blue #007AFF · graphite #1D1D1F
   Surfaces white, canvas #F5F5F7, borders #E5E5EA. Accent colours only for state.
   Single source of truth: docs/uchol_design_system.json
   Usage rules: docs/UCHOL_DESIGN_SYSTEM.md
   Legacy variable names (--ink, --muted, --brand, --paper …) stay as aliases
   so existing templates keep working without markup changes.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Brand palette — taken from the animated logo strokes */
  --color-brand: #0071E3;
  --color-brand-strong: #005BB5;
  --color-brand-soft: #E8F1FF;
  --color-brand-border: #B8D6FF;
  --color-brand-wash: #F5F9FF;
  --color-secondary: #5856D6;
  --color-secondary-strong: #3E3CB8;
  --color-secondary-soft: #EEECFF;
  --color-accent: #34C759;
  --color-accent-soft: #E9F9EE;
  --color-accent-sky: #5AC8FA;

  /* Surfaces */
  --color-canvas: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-muted: #F2F2F7;
  --color-surface-glass: rgba(255, 255, 255, .82);
  --color-overlay: rgba(0, 0, 0, .35);
  --blur-panel: 12px;

  /* Text */
  --color-text-primary: #1D1D1F;
  --color-text-strong: #1D1D1F;
  --color-text-secondary: #5F5F64;
  --color-text-tertiary: #6E6E73;
  --color-text-on-brand: #FFFFFF;

  /* Borders, focus, links */
  --color-border: #E5E5EA;
  --color-border-strong: #D1D1D6;
  --color-border-subtle: #F0F0F2;
  --color-focus: #007AFF;
  --color-focus-ring: rgba(0, 122, 255, .28);
  --color-link: #0071E3;
  --color-link-hover: #005BB5;

  /* Semantic status families (independent from track/category accents) */
  --color-success-text: #1E7B34;
  --color-success-strong: #248A3D;
  --color-success-bg: #E8F9ED;
  --color-success-border: #BFE8CB;
  --color-success-wash: #F3FCF6;
  --color-warning-text: #8A4B00;
  --color-warning-strong: #C77700;
  --color-warning-bg: #FFF3DB;
  --color-warning-border: #FFD9A0;
  --color-warning-wash: #FFFBF0;
  --color-danger-text: #A5000A;
  --color-danger-strong: #D70015;
  --color-danger-bg: #FDE8EA;
  --color-danger-border: #F6C4C9;
  --color-danger-wash: #FFF5F6;
  --color-info-text: #0055B3;
  --color-info-bg: #E6F0FF;
  --color-info-border: #B8D6FF;
  --color-info-wash: #F5F9FF;
  --color-neutral-text: #48484A;
  --color-neutral-bg: var(--color-surface-muted);
  --color-neutral-border: var(--line);

  /* Track/category accents — never status colours */
  --color-track-olympiad: #007AFF;
  --color-track-registration: #FF9F0A;
  --color-track-exam: #FF3B30;
  --color-track-gto: #34C759;
  --color-track-conference: #5856D6;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-display-size: 32px; --text-display-line: 40px; --text-display-weight: 800;
  --text-h1-size: 28px; --text-h1-line: 36px; --text-h1-weight: 800;
  --text-h2-size: 22px; --text-h2-line: 30px; --text-h2-weight: 700;
  --text-h3-size: 18px; --text-h3-line: 26px; --text-h3-weight: 700;
  --text-card-size: 16px; --text-card-line: 24px; --text-card-weight: 700;
  --text-body-size: 14px; --text-body-line: 22px;
  --text-compact-size: 13px; --text-compact-line: 20px;
  --text-label-size: 12px; --text-label-line: 18px; --text-label-weight: 700;
  --text-caption-size: 11px; --text-caption-line: 16px;
  --text-eyebrow-size: 10px; --text-eyebrow-line: 16px; --text-eyebrow-tracking: .08em;
  --font-weight-regular: 400; --font-weight-medium: 600; --font-weight-bold: 700; --font-weight-extra: 800;
  --font-feature-tabular: "tnum" 1, "lnum" 1;

  /* Spacing — 8 px scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --space-10: 64px; --space-12: 96px;

  /* Layout */
  --layout-sidebar: 264px;
  --layout-content-max: 1440px;
  --layout-shell-max: 1920px;
  --layout-topbar-height: 52px;
  --layout-gutter: clamp(18px, 4vw, 56px);
  --layout-grid-columns: 12;
  --layout-grid-gutter: 24px;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;
  --border-accent-width: 4px;

  /* Shadows (soft, functional — not decoration) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .08);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .10);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .18);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* Motion — calm, short, state-driven */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --motion-slower: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.175, .885, .32, 1.275);
  --motion-logo-line: 700ms;
  --motion-logo-line-short: 500ms;
  --motion-logo-dot: 400ms;
  --motion-logo-star: 600ms;
  --motion-logo-total: 2000ms;

  /* Stacking order */
  --z-base: 0;
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-dropdown: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-skip-link: 80;

  /* Legacy aliases — keep templates/CSS working, no values duplicated */
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --brand: var(--color-brand);
  --brand-dark: var(--color-brand-strong);
  --brand-soft: var(--color-brand-soft);
  --paper: var(--color-canvas);
  --panel: var(--color-surface);
  --focus-ring: var(--color-focus);
  --shadow-card: var(--shadow-sm);
  --shadow-elevated: var(--shadow-md);
}

/* Dark theme — opt-in via <html data-theme="dark">; system toggle is a later module */
[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #000000;
  --color-surface: #1C1C1E;
  --color-surface-raised: #2C2C2E;
  --color-surface-muted: #2C2C2E;
  --color-surface-glass: rgba(28, 28, 30, .86);
  --color-overlay: rgba(0, 0, 0, .55);
  --color-text-primary: #F5F5F7;
  --color-text-strong: #FFFFFF;
  --color-text-secondary: #AEAEB2;
  --color-text-tertiary: #8E8E93;
  --color-text-on-brand: #FFFFFF;
  --color-border: #38383A;
  --color-border-strong: #48484A;
  --color-border-subtle: #2C2C2E;
  --color-focus: #0A84FF;
  --color-focus-ring: rgba(10, 132, 255, .35);
  --color-link: #0A84FF;
  --color-link-hover: #409CFF;
  --color-brand: #0A84FF;
  --color-brand-strong: #409CFF;
  --color-brand-soft: #0B2A4A;
  --color-brand-border: #1B4B7A;
  --color-brand-wash: #0A1F33;
  --color-secondary: #7D7AFF;
  --color-secondary-strong: #A5A2FF;
  --color-secondary-soft: #26244A;
  --color-accent: #30D158;
  --color-accent-soft: #1A3A22;
  --color-accent-sky: #64D2FF;
  --color-success-text: #9BE3B4;
  --color-success-bg: #173D2A;
  --color-success-border: #245C3F;
  --color-success-wash: #12301F;
  --color-warning-text: #F5D08A;
  --color-warning-bg: #3D3115;
  --color-warning-border: #5C4A20;
  --color-warning-wash: #2E2712;
  --color-danger-text: #F3AFAF;
  --color-danger-bg: #3F1D1D;
  --color-danger-border: #5E2A2A;
  --color-danger-wash: #341818;
  --color-info-text: #A9C8F5;
  --color-info-bg: #1B2F4A;
  --color-info-border: #2B4A70;
  --color-info-wash: #16283D;
  --color-neutral-text: #C3D0D8;
  --color-neutral-bg: #22323D;
  --color-neutral-border: #354A58;
  --color-track-olympiad: #64B5FF;
  --color-track-registration: #FFB340;
  --color-track-exam: #FF6961;
  --color-track-gto: #30D158;
  --color-track-conference: #A5A2FF;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .32), 0 4px 14px rgba(0, 0, 0, .24);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .36), 0 12px 32px rgba(0, 0, 0, .28);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .42), 0 24px 56px rgba(0, 0, 0, .32);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .55);
}

/* ═══════════════ BASE ═══════════════ */
* { box-sizing: border-box; }
a { color: var(--color-link); text-underline-offset: 2px; }
a:hover { color: var(--color-link-hover); }
::selection { background: var(--color-brand-soft); color: var(--color-text-primary); }
html { background: var(--paper); scroll-behavior: smooth; min-height: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}

/* ═══════════════ SHELL ═══════════════ */
.app-shell {
  min-height: 100vh; display: grid;
  grid-template-columns: 264px minmax(0,1fr); max-width: 1920px; margin: 0 auto;
}
.sidebar {
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 25px 20px 19px; display: flex; flex-direction: column;
  min-height: 100vh; position: sticky; top: 0; align-self: start;
  box-shadow: 1px 0 0 var(--line);
}
.main-area { padding: 0 clamp(22px,4vw,56px) 28px; min-width: 0; width: 100%; }

/* ═══════════════ BRAND ═══════════════ */
.brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: var(--ink); margin: 0 0 39px 3px;
}
.brand-logo-svg { width: 43px; height: 43px; display: block; flex: none; overflow: visible; transition: transform .18s ease; }
/* Logo colours come from design tokens so light/dark themes stay consistent. */
.logo-path-a { stroke: var(--color-brand); }
.logo-path-b { stroke: var(--color-secondary); }
.logo-dot { fill: var(--color-canvas); stroke: var(--color-brand); }
.logo-dot-accent { stroke: var(--color-secondary); }
.logo-star { fill: var(--color-accent); }
.logo-star-core { fill: var(--color-canvas); }
.brand:hover .brand-logo-svg { transform: scale(1.05); }
.anim-path-1, .anim-path-2 { visibility: hidden; }
.anim-dot, .anim-star { opacity: 0; }
@keyframes uchol-draw-line {
  0% { stroke-dashoffset: var(--path-length); visibility: visible; }
  100% { stroke-dashoffset: 0; visibility: visible; }
}
@keyframes uchol-pop-in {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes uchol-star-burst {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.brand-logo-svg.play .anim-path-1 { --path-length: 180; stroke-dasharray: 180; stroke-dashoffset: 180; animation: uchol-draw-line .7s cubic-bezier(.4,0,.2,1) .2s forwards; }
.brand-logo-svg.play .anim-path-2 { --path-length: 130; stroke-dasharray: 130; stroke-dashoffset: 130; animation: uchol-draw-line .5s cubic-bezier(.4,0,.2,1) .9s forwards; }
.brand-logo-svg.play .anim-dot { transform-origin: center; transform-box: fill-box; animation: uchol-pop-in .4s cubic-bezier(.175,.885,.32,1.275) forwards; }
.brand-logo-svg.play .dot-1 { animation-delay: .2s; }
.brand-logo-svg.play .dot-2 { animation-delay: .55s; }
.brand-logo-svg.play .dot-3 { animation-delay: .8s; }
.brand-logo-svg.play .dot-4 { animation-delay: 1.1s; }
.brand-logo-svg.play .anim-star { transform-origin: center; transform-box: fill-box; animation: uchol-star-burst .6s cubic-bezier(.175,.885,.32,1.275) 1.4s forwards; }
@media (prefers-reduced-motion: reduce) {
  .brand-logo-svg.play .anim-path-1, .brand-logo-svg.play .anim-path-2,
  .brand-logo-svg.play .anim-dot, .brand-logo-svg.play .anim-star { animation: none; visibility: visible; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .brand:hover .brand-logo-svg { transform: none; }
}
.brand-text { font: 800 21px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.7px; }
.brand-text small {
  display: block; font: 500 9px Inter, system-ui, sans-serif;
  letter-spacing: .65px; color: var(--color-text-tertiary); margin-top: 4px;
}

/* ═══════════════ NAV ═══════════════ */
.nav-caption, .eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 1.15px; color: var(--color-text-tertiary);
}
.nav-caption { margin: 0 0 11px 9px; }
.side-nav { display: grid; gap: 4px; }
.nav-link {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  color: var(--muted); padding: 11px 13px; border-radius: 11px;
  font-weight: 600; font-size: 13px; transition: background .18s, color .18s;
  min-height: 46px;
}
.nav-link:hover { background: var(--brand-soft); color: var(--brand); }
.nav-link.active {
  background: var(--brand-soft); color: var(--brand);
  font-weight: 700; box-shadow: inset 3px 0 var(--brand);
}
.nav-icon { font-size: 18px; color: inherit; }

/* ═══════════════ SIDEBAR BOTTOM ═══════════════ */
.sidebar-bottom { margin-top: auto; }
.help-card {
  padding: 16px 14px 17px; background: var(--brand-soft);
  border: 1px solid var(--color-brand-border); border-radius: 15px; position: relative;
  overflow: hidden; margin-bottom: 17px;
}
.help-icon { width: 27px; height: 27px; border-radius: 8px; background: var(--color-brand-border); color: var(--brand); display: grid; place-items: center; margin-bottom: 12px; }
.help-card b { display: block; color: var(--color-secondary); font: 700 13px/1.5 Inter,system-ui,sans-serif; }
.help-card > span { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; }
.profile-mini {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.profile-info { min-width: 0; }
.profile-info b { display: block; color: var(--ink); max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-info span { color: var(--color-text-tertiary); font-size: 11px; }
.logout-button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--color-text-tertiary); cursor: pointer; font-size: 16px; }
.logout-button:hover { background: var(--color-danger-bg); color: var(--color-danger-strong); border-color: var(--color-danger-border); }

/* ═══════════════ TOPBAR ═══════════════ */
.topbar {
  height: 67px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); margin-bottom: 24px; gap: 12px;
}
.breadcrumb { color: var(--muted); display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.breadcrumb-brand { color: var(--brand); font-weight: 800; }
.breadcrumb span[aria-hidden] { color: var(--color-border-strong); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.today-label {
  display: inline-flex; align-items: center; min-height: 35px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 650;
}

/* ═══════════════ PAGE HEADING ═══════════════ */
.page-heading {
  display: flex; align-items: center; gap: 20px;
  padding: clamp(17px,2.8vw,30px); margin-bottom: 23px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-card);
}
.page-heading h1, .form-intro h1 {
  color: var(--ink); font-size: clamp(25px,2.4vw,34px);
  line-height: 1.18; letter-spacing: -1px; margin: 7px 0 8px;
}
.page-heading .muted, .muted { color: var(--muted); line-height: 1.6; max-width: 720px; margin: 0; }
.eyebrow { font-size: 10px; }
.heading-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* ═══════════════ BUTTONS ═══════════════ */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 16px; border: none;
  border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(.98); }
.button-dark, .button-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(0, 122, 255, .22); }
.button-dark:hover, .button-primary:hover { background: var(--brand-dark); }
.button-outline {
  background: var(--panel); color: var(--color-text-strong);
  border: 1px solid var(--color-border-strong); box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.button-outline:hover { border-color: var(--color-brand-border); background: var(--brand-soft); color: var(--brand); }
.button-sm { min-height: 36px; padding: 0 12px; font-size: 11px; border-radius: 8px; }
.button-wide { width: 100%; }
.icon-button {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: none; border-radius: 11px; background: var(--color-surface-muted); color: var(--muted);
  cursor: pointer; font-size: 20px; transition: background .16s, color .16s;
}
.icon-button:hover { background: var(--brand-soft); color: var(--brand); }
.text-link, .small-action {
  color: var(--brand); font-weight: 700; text-decoration: none; cursor: pointer;
  font-size: 12px; padding: 4px 0; border: none; background: none; font-family: inherit;
}
.text-link:hover, .small-action:hover { text-decoration: underline; }

/* ═══════════════ STAT CARDS ═══════════════ */
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; }
.stat-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 142px; padding: 17px 19px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--panel);
  box-shadow: var(--shadow-card); color: inherit; text-decoration: none;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.stat-card-link { display: block; }
.stat-card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); border-color: var(--color-brand-border); }
.stat-blue { border-left: 4px solid var(--color-brand); }
.stat-lilac { border-left: 4px solid var(--color-accent-sky); }
.stat-peach { border-left: 4px solid var(--color-track-registration); }
.stat-icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; background: var(--brand-soft); color: var(--brand);
  font-size: 18px; margin-bottom: 10px;
}
.stat-card > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.stat-card strong { color: var(--ink); font-size: 28px; font-weight: 800; margin: 4px 0 2px; }
.stat-card small { color: var(--color-text-tertiary); font-size: 10px; }

/* ═══════════════ PANELS ═══════════════ */
.panel, .catalog-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.panel { padding: 22px; margin-bottom: 18px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.panel-header h2, .progress-panel h2, .quick-panel h2 {
  color: var(--ink); margin: 4px 0 0; letter-spacing: -.45px; font-size: 18px;
}
.count-pill {
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: 999px; background: var(--color-warning-bg); color: var(--color-warning-text);
  font-size: 12px; font-weight: 700;
}
.content-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 17px; align-items: start; }
.moderator-grid { grid-template-columns: minmax(0,1fr) 320px; }

/* ═══════════════ ACTIVITY ROWS ═══════════════ */
.activity-list { display: grid; gap: 2px; }
.activity-row, .review-row {
  display: flex; align-items: center; gap: 13px; padding: 14px 0;
  border-bottom: 1px solid var(--color-surface-muted);
}
.activity-row:last-child { border-bottom: none; }
.activity-date {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-size: 16px;
}
.activity-details, .review-info { min-width: 0; }
.activity-details b, .review-info b, .deadline-info b { color: var(--color-text-strong); font-size: 13px; overflow-wrap: anywhere; }
.activity-details span, .review-info span, .review-info small { color: var(--muted); line-height: 1.45; }
.row-right { display: flex; align-items: center; gap: 8px; min-width: max-content; }

/* ═══════════════ STATUS BADGES ═══════════════ */
.status {
  display: inline-flex; align-items: center; padding: 5px 10px;
  border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap;
}
.status-in_progress { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-assigned { background: var(--brand-soft); color: var(--color-brand-strong); }
.status-approved, .status-stage_completed, .status-prize_winner, .status-winner { background: var(--color-success-bg); color: var(--color-success-text); }
.status-rejected { background: var(--color-danger-bg); color: var(--color-danger-text); }
.status-pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-cancelled { background: var(--color-surface-muted); color: var(--muted); }

/* ═══════════════ DEADLINE CARDS ═══════════════ */
.deadline-panel { background: var(--color-warning-wash); border-color: var(--color-warning-border); }
.deadline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; }
.deadline-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid var(--color-warning-border); border-radius: 14px;
  background: #fff; transition: box-shadow .15s;
}
.deadline-card:hover { box-shadow: var(--shadow-elevated); }
.deadline-card.urgent { border-color: var(--color-danger-border); background: var(--color-danger-wash); }
.deadline-date {
  flex: none; width: 44px; display: grid; place-items: center;
  border-radius: 13px; background: var(--color-warning-bg); padding: 6px;
}
.deadline-card.urgent .deadline-date { background: var(--color-danger-bg); }
.deadline-date b { font-size: 20px; color: var(--color-warning-text); }
.deadline-date span { font-size: 10px; color: var(--color-warning-strong); text-transform: lowercase; }
.deadline-card.urgent .deadline-date b { color: var(--color-danger-text); }
.deadline-card.urgent .deadline-date span { color: var(--color-danger-strong); }
.deadline-info { min-width: 0; }
.deadline-info b { display: block; font-size: 13px; }
.deadline-info span { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }
.deadline-open { margin-left: auto; color: var(--brand); font-size: 18px; font-weight: 700; text-decoration: none; flex: none; }
.attention-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; margin-bottom: 18px; border-radius: var(--radius-md);
  background: var(--color-danger-wash); border: 1px solid var(--color-danger-border); box-shadow: var(--shadow-card);
}
.attention-symbol {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-danger-bg); color: var(--color-danger-strong); font-weight: 800; font-size: 20px;
}
.attention-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.attention-items span { padding: 3px 8px; border-radius: 6px; background: var(--color-danger-bg); color: var(--color-danger-text); font-size: 11px; }

/* ═══════════════ NEXT ACTION ═══════════════ */
.next-action-panel {
  display: flex; align-items: center; gap: 20px;
  padding: 20px; margin-bottom: 18px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-soft), var(--color-brand-wash));
  border: 1px solid var(--color-brand-border);
}
.next-action-calm { background: var(--color-surface-muted); border-color: var(--line); }
.next-action-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 4px 0; }
.next-action-button { flex: none; }

/* ═══════════════ PORTFOLIO ═══════════════ */
.portfolio-panel { border-color: var(--color-success-bg); background: var(--color-success-wash); }
.verified-list { display: grid; gap: 8px; margin: 14px 0; }
.verified-item { display: flex; align-items: center; gap: 10px; padding: 8px; }
.verified-mark {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-success-bg); color: var(--color-success-text); font-weight: 800; font-size: 14px;
}
.verified-item b { font-size: 13px; color: var(--ink); }
.verified-item span { display: block; font-size: 10px; color: var(--muted); }

/* ═══════════════ FILTERS ═══════════════ */
.calendar-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  margin: 16px 0 22px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.calendar-filters label { display: grid; gap: 6px; color: var(--color-neutral-text); font-size: 13px; font-weight: 650; }
.calendar-filters input, .calendar-filters select {
  min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--color-border-strong); border-radius: 9px;
  background: var(--panel); color: var(--ink); font: inherit;
}
.calendar-filters input:focus, .calendar-filters select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* ═══════════════ CATEGORY TABS ═══════════════ */
.category-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 16px; padding: 3px 2px 10px; overflow: auto;
}
.category-tab, .child-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 37px; padding: 7px 14px;
  border: 1px solid var(--color-border-strong); border-radius: 999px;
  background: var(--panel); color: var(--color-neutral-text);
  font: 600 12px Inter, system-ui, sans-serif;
  cursor: pointer; text-decoration: none;
  transition: background .16s, border-color .16s, color .16s;
}
.category-tab:hover, .child-chip:hover { border-color: var(--color-brand-border); color: var(--brand); background: var(--brand-soft); }
.category-tab[aria-pressed="true"], .child-chip.active {
  border-color: var(--color-brand-border); background: var(--brand-soft); color: var(--color-brand-strong);
}

/* ═══════════════ STUDENT CHIPS ═══════════════ */
.child-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* ═══════════════ EMPTY STATE ═══════════════ */
.empty-state {
  display: grid; place-items: center; gap: 8px;
  padding: 30px 20px; text-align: center; color: var(--muted);
}
.empty-state > div:first-child { font-size: 36px; }
.empty-state h3 { color: var(--color-text-strong); margin: 4px 0; font-size: 16px; }
.empty-state p { font-size: 13px; max-width: 380px; }
.compact-empty { padding: 20px 14px; }

/* ═══════════════ FORMS ═══════════════ */
.form-page { max-width: 790px; margin: 0 auto; width: 100%; }
.form-intro { margin: 0 0 19px; padding: 6px 2px 0; }
.form-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(18px,3vw,30px);
  box-shadow: var(--shadow-card);
}
.form-stack { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { color: var(--color-text-strong); font-size: 12px; font-weight: 700; }
.field input, .field textarea, .field select {
  min-height: 43px; padding: 10px 12px;
  border: 1px solid var(--color-border-strong); border-radius: 10px;
  background: var(--panel); color: var(--color-text-strong);
  font: 14px Inter, system-ui, sans-serif;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.form-actions {
  display: flex; gap: 10px; padding-top: 4px;
  position: sticky; bottom: 12px; z-index: 2;
  padding: 12px; margin: 4px -12px -12px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
}
.help-text { color: var(--muted); font-size: 11px; line-height: 1.5; }
.error, .form-errors { color: var(--color-danger-strong); }
.form-errors {
  padding: 11px 13px; border: 1px solid var(--color-danger-border);
  background: var(--color-danger-wash); border-radius: 10px;
}

/* ═══════════════ PROGRESS ═══════════════ */
.progress-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 12px 0; }
.progress-summary article { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.progress-summary strong { display: block; color: var(--ink); font-size: 20px; }
.progress-summary small { color: var(--muted); }
.progress-track {
  height: 9px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 6px;
}
.progress-track > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--color-brand), var(--color-accent-sky));
}

/* ═══════════════ MESSAGES ═══════════════ */
.messages { display: grid; gap: 8px; margin: 0 0 16px; position: relative; z-index: 1; }
.message {
  border-radius: 13px; padding: 12px 15px; font-size: 13px;
  border: 1px solid var(--color-success-bg); box-shadow: 0 2px 8px rgba(15,23,42,.03);
}
.message-error { background: var(--color-danger-wash); border-color: var(--color-danger-border); color: var(--color-danger-text); }
.message-warning { background: var(--color-warning-wash); border-color: var(--color-warning-border); color: var(--color-warning-text); }

/* ═══════════════ RELIABILITY CHIPS ═══════════════ */
.reliability-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600;
}
.reliability-confirmed { background: var(--color-success-bg); color: var(--color-success-text); }
.reliability-preliminary { background: var(--color-warning-bg); color: var(--color-warning-text); }
.reliability-needs_check { background: var(--color-surface-muted); color: var(--muted); }

/* ═══════════════ CATALOG ═══════════════ */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; align-items: stretch; }
.catalog-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 250px; padding: 20px;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.catalog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); border-color: var(--color-brand-border); }
.catalog-card h2 { color: var(--color-text-strong); line-height: 1.35; overflow-wrap: anywhere; font-size: 20px; letter-spacing: -.45px; margin: 15px 0 8px; }
.catalog-card p { color: var(--muted); line-height: 1.65; flex: 1; }
.catalog-card-top { display: flex; gap: 7px; }
.category-tag {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 999px; background: var(--brand-soft); color: var(--color-brand-strong);
  font-size: 11px; font-weight: 600;
}
.reliability {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 999px; background: var(--color-surface-muted); color: var(--color-neutral-text);
  font-size: 11px; font-weight: 600;
}

/* ═══════════════ DASHBOARD CALENDAR ═══════════════ */
.dashboard-calendar { margin-top: 22px; }
.dashboard-calendar-list {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px;
}
.dashboard-calendar-item {
  display: grid; gap: 7px; padding: 13px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--color-surface-muted);
}
.dashboard-calendar-item > span:last-child { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* ═══════════════ QUICK PANEL / SHORTCUTS ═══════════════ */
.quick-panel { align-self: start; }
.dashboard-shortcuts {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;
  margin: 0 0 22px;
}
.dashboard-shortcut {
  min-width: 0; min-height: 83px; display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; text-decoration: none; color: var(--color-text-strong);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.dashboard-shortcut:hover { transform: translateY(-2px); border-color: var(--color-brand-border); box-shadow: var(--shadow-elevated); }
.shortcut-icon {
  width: 39px; height: 39px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--brand-soft); color: var(--brand);
  font-size: 20px; font-weight: 700;
}
.dashboard-shortcut > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.dashboard-shortcut b { font-size: 12px; line-height: 1.35; }
.dashboard-shortcut small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.shortcut-arrow { margin-left: auto; color: var(--brand); font-size: 19px; font-weight: 700; }

/* ═══════════════ GOOGLE-STYLE MONTH CALENDAR ═══════════════ */
.month-calendar {
  margin-bottom: 20px; overflow: hidden; padding: clamp(18px,3vw,30px);
  border-radius: 22px; background: linear-gradient(145deg, #fff 0%, var(--color-surface-muted) 100%);
  box-shadow: 0 14px 44px rgba(15,23,42,.06);
}
.month-calendar-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; margin-bottom: 24px;
}
.month-calendar-header h2 {
  margin: 4px 0; color: var(--ink);
  font-size: clamp(20px,2vw,26px); letter-spacing: -.55px;
}
.month-calendar-nav {
  display: flex; align-items: center; gap: 14px; padding: 6px;
  border: 1px solid var(--line); border-radius: 15px; background: var(--color-surface-muted);
}
.month-calendar-nav strong {
  min-width: 135px; text-align: center; text-transform: capitalize;
  color: var(--color-text-strong); font-size: 14px;
}
.month-calendar-nav .icon-button { width: 36px; height: 36px; border-radius: 11px; text-decoration: none; display: grid; place-items: center; font-size: 22px; }
.month-calendar-grid {
  display: grid; grid-template-columns: repeat(7,minmax(0,1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: 13px; overflow: hidden;
}
.month-calendar-weekday {
  padding: 11px 8px; background: var(--color-surface-muted); color: var(--muted);
  font-size: 10px; font-weight: 750; letter-spacing: .65px; text-align: center;
  text-transform: uppercase; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.month-calendar-cell {
  position: relative; min-width: 0; min-height: clamp(83px,10vw,125px);
  padding: 8px 7px; background: var(--panel);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: inherit;
  transition: background .15s, box-shadow .15s;
}
.month-calendar-cell:hover { background: var(--color-surface-muted); }
.month-calendar-cell:focus-visible { z-index:1; outline:3px solid var(--brand); outline-offset:-3px; }
.month-calendar-cell:nth-child(7n) { border-right: 0; }
.month-calendar-cell.is-outside { background: var(--color-surface-muted); }
.month-calendar-cell.is-today { background: linear-gradient(145deg,var(--brand-soft),#fff); }
.month-calendar-cell.is-selected { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.month-calendar-cell.is-selected .month-calendar-date { background: var(--brand); color: #fff; }
.month-calendar-date {
  display: grid; place-items: center; width: 27px; height: 27px;
  margin-bottom: 6px; border-radius: 50%; color: var(--color-neutral-text);
  font-size: 12px; font-weight: 650;
}
.month-calendar-cell.is-today .month-calendar-date {
  background: var(--brand); color: #fff; box-shadow: 0 3px 8px rgba(0, 122, 255, .28);
}
.month-calendar-events { display: grid; gap: 4px; }
.month-event-chip {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  padding: 4px 6px; border-radius: 5px; font-size: 10px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.month-event-chip i { width: 6px; height: 6px; flex: none; border-radius: 50%; }
.month-calendar-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: -7px 0 14px; color: var(--muted); font-size: 11px;
}
.month-calendar-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot {
  width: 7px; height: 7px; display: inline-block; border-radius: 50%;
}
.legend-dot.registration { background: var(--color-track-registration); }
.legend-dot.olympiad { background: var(--color-brand); }
.legend-dot.exam { background: var(--color-track-exam); }
.legend-dot.gto { background: var(--color-track-gto); }
.legend-dot.conference { background: var(--color-track-conference); }
.calendar-day-dots { display: flex; gap: 4px; margin-top: auto; padding-top: 5px; }
.calendar-day-dots i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--brand); }
.calendar-day-dots .category-EXAM { background: var(--color-track-exam); }
.calendar-day-dots .category-GTO { background: var(--color-track-gto); }
.calendar-day-dots .category-CONFERENCE { background: var(--color-track-conference); }
.calendar-day-count { color: var(--color-neutral-text); font-size: 10px; line-height: 1.3; font-weight: 700; }

/* ═══════════════ MONTH AGENDA ═══════════════ */
.month-agenda { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line); }
.month-agenda-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.month-agenda-header h3 { color: var(--color-text-strong); font-size: 18px; text-transform: capitalize; margin: 3px 0 0; }
.month-agenda-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 10px; }
.month-agenda-item {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0;
  padding: 13px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel);
}

/* ═══════════════ NOTIFICATIONS ═══════════════ */
.notification-list { margin: 0 0 18px; }
.notification {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px 0; border-top: 1px solid var(--color-surface-muted);
}
.notification:first-child { border-top: none; }
.notification form { margin-left: auto; }

/* ═══════════════ REVIEW QUEUE ═══════════════ */
.review-tools { display: grid; grid-template-columns: minmax(0,1fr); gap: 5px; margin: 15px 0 12px; }
.review-tools label { color: var(--color-neutral-text); font-size: 11px; font-weight: 700; }
.review-tools input {
  width: 100%; min-height: 41px; padding: 9px 12px;
  border: 1px solid var(--color-border-strong); border-radius: 10px;
  background: var(--panel); color: var(--color-text-strong); font: inherit;
}
.review-tools input:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-color: var(--brand); }
.review-tools small { color: var(--muted); font-size: 11px; }

/* ═══════════════ TOAST ═══════════════ */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 380px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(15,23,42,.12);
  font-size: 13px; font-weight: 600; color: var(--ink);
  pointer-events: auto;
  animation: toast-in .3s ease;
}
.toast-success { border-color: var(--color-success-border); background: var(--color-success-wash); color: var(--color-success-text); }
.toast-error { border-color: var(--color-danger-border); background: var(--color-danger-wash); color: var(--color-danger-text); }
.toast-info { border-color: var(--color-brand-border); background: var(--brand-soft); color: var(--color-brand-strong); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════ CLASS OVERVIEW ═══════════════ */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.class-card {
  padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel);
}
.class-card b { display: block; color: var(--ink); font-size: 14px; }
.class-card strong { display: block; color: var(--brand); font-size: 18px; }
.class-card strong small { font-size: 11px; color: var(--muted); font-weight: 400; }

/* ═══════════════ DASHBOARD STUDENT 2-COL ═══════════════ */
.student-dash-grid {
  display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  gap: 20px; align-items: start;
}
.student-dash-main { min-width: 0; }
.student-dash-side { min-width: 0; }
.burning-tasks { display: grid; gap: 10px; }
.burning-task-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--panel); cursor: pointer;
  transition: box-shadow .15s, border-color .15s, background .15s;
  text-decoration: none; color: inherit;
}
.burning-task-card:hover { box-shadow: var(--shadow-elevated); border-color: var(--color-brand-border); }
.burning-task-card.urgent { border-color: var(--color-danger-border); background: var(--color-danger-wash); }
.burning-task-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.burning-task-title { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.burning-task-meta { font-size: 11px; color: var(--muted); }
.burning-task-days {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--color-warning-bg); color: var(--color-warning-text); font-size: 16px; font-weight: 800;
}
.burning-task-card.urgent .burning-task-days { background: var(--color-danger-bg); color: var(--color-danger-text); }
.clipboard-zone {
  display: grid; place-items: center; gap: 6px;
  padding: 18px 16px; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface-muted); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-top: 10px;
}
.clipboard-zone:hover, .clipboard-zone.is-dragging { border-color: var(--brand); background: var(--brand-soft); }
.clipboard-zone strong { font-size: 13px; color: var(--ink); }
.clipboard-zone small { font-size: 11px; color: var(--muted); }
.clipboard-icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  font-size: 18px;
}

/* ═══════════════ STUDENT DASH CALENDAR EMBED ═══════════════ */
.student-calendar-embed {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--panel);
}
.student-calendar-embed .fc {
  --fc-border-color: var(--line);
  --fc-button-bg-color: #fff;
  --fc-button-border-color: var(--color-border-strong);
  --fc-button-text-color: var(--color-text-strong);
  --fc-button-hover-bg-color: var(--brand-soft);
  --fc-button-hover-border-color: var(--color-brand-border);
  --fc-button-active-bg-color: var(--brand-soft);
  --fc-button-active-border-color: var(--color-brand-border);
  --fc-button-active-text-color: var(--brand);
  --fc-today-bg-color: rgba(0, 122, 255, .06);
  --fc-event-bg-color: var(--brand);
  --fc-event-border-color: var(--brand);
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}
.student-calendar-embed .fc .fc-toolbar.fc-header-toolbar {
  padding: 10px 14px; margin-bottom: 0 !important;
  border-bottom: 1px solid var(--line);
}
.student-calendar-embed .fc .fc-toolbar-title { font-size: 18px; font-weight: 500; color: var(--ink); }
.student-calendar-embed .fc .fc-button {
  height: 34px; padding: 0 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500; text-transform: none;
  box-shadow: none;
}
.student-calendar-embed .fc .fc-col-header-cell {
  padding: 6px 0; border: none !important; background: #fff;
}
.student-calendar-embed .fc .fc-col-header-cell-cushion {
  font-size: 11px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
}
.student-calendar-embed .fc .fc-daygrid-day-number { font-size: 11px; padding: 4px 6px 0 0; }
.student-calendar-embed .fc .fc-day-today .fc-daygrid-day-number {
  background: var(--brand); color: #fff;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; padding: 0; margin: 3px 3px 0 0;
}
.student-calendar-embed .fc .fc-daygrid-day-frame { min-height: 70px; }
.student-calendar-embed .fc .fc-daygrid-event {
  border-radius: 4px; font-size: 11px; padding: 1px 5px; margin: 1px 3px;
  border: none; cursor: pointer;
}
.student-calendar-embed .fc .fc-timegrid-now-indicator-line { border-color: var(--color-danger-strong); }

/* ═══════════════ UPLOAD DROPZONE ═══════════════ */
.upload-dropzone {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 5px;
  min-width: 0; max-width: 100%; padding: 22px 16px; border: 2px dashed var(--color-border-strong);
  border-radius: 14px; background: var(--color-surface-muted);
  text-align: center; cursor: pointer;
}
.upload-dropzone input[type="file"] { max-width: 100%; min-width: 0; }
.upload-dropzone strong, .upload-dropzone small { overflow-wrap: anywhere; max-width: 100%; }
.upload-dropzone:hover, .upload-dropzone.is-dragging {
  background: var(--brand-soft); border-color: var(--brand);
}
.upload-dropzone:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* ═══════════════ DETAIL NOTE ═══════════════ */
.detail-note { color: var(--muted); font-size: 11px; }

/* ═══════════════ FOOTER ═══════════════ */
.site-footer {
  display: flex; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: 10px;
  padding-top: 28px; border-top: 1px solid var(--line);
  margin-top: 30px; padding-bottom: 8px;
}
.site-footer b { color: var(--brand); }

/* ═══════════════ VISUALLY HIDDEN ═══════════════ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 232px minmax(0,1fr); }
  .main-area { padding-inline: 24px; }
  .content-grid, .moderator-grid, .student-dash-grid { grid-template-columns: 1fr; }
  .dashboard-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat-grid { gap: 10px; }
  .catalog-card { min-height: 225px; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar {
    min-height: auto; height: auto; padding: 10px 16px 8px;
    position: sticky; top: 0; z-index: 10;
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "brand profile" "nav nav";
    align-items: center; gap: 8px 12px;
  }
  .brand { grid-area: brand; margin: 0; }
  .brand-logo-svg { width: 41px; height: 41px; }
  .brand-text { font-size: 19px; }
  .sidebar .nav-caption { display: none; }
  .sidebar .side-nav {
    grid-area: nav; display: flex; gap: 4px;
    overflow-x: auto; overscroll-behavior-inline: contain;
    padding: 0 0 2px; scrollbar-width: none;
  }
  .sidebar .side-nav::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; min-height: 38px; padding: 8px 11px; font-size: 12px; }
  .sidebar-bottom { grid-area: profile; margin: 0; }
  .help-card { display: none; }
  .profile-mini { border: 0; padding: 0; }
  .profile-info { display: none; }
  .profile-mini form { display: block; }
  .main-area { padding: 0 15px 22px; }
  .topbar { height: auto; min-height: 53px; margin-bottom: 22px; padding: 11px 0; }
  .breadcrumb { font-size: 11px; }
  .topbar-right { margin-left: auto; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 13px; padding: 18px; border-radius: 19px; margin-bottom: 19px; }
  .page-heading h1 { font-size: 25px; }
  .heading-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .heading-actions .button { flex: 1 1 170px; }
  .stat-grid { gap: 9px; grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 14px; min-height: 127px; }
  .stat-card strong { font-size: 22px; }
  .stat-card > span { font-size: 10px; }
  .stat-card small { font-size: 9px; }
  .panel { padding: 17px; }
  .activity-row { align-items: flex-start; flex-wrap: wrap; gap: 9px; }
  .activity-details { flex: 1 1 calc(100% - 54px); }
  .row-right { width: 100%; min-width: 0; padding-left: 46px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .row-right .status-update-form { max-width: 100%; flex-wrap: wrap; }
  .row-right .status-update-form select { max-width: 100%; }
  .row-right .status { font-size: 9px; padding: 5px 8px; }
  .small-action { font-size: 10px; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-card { min-height: 0; }
  .month-calendar { padding: 14px 12px; border-radius: 12px; }
  .month-calendar-header { align-items: flex-start; flex-direction: column; gap: 11px; margin-bottom: 12px; }
  .month-calendar-nav { align-self: stretch; justify-content: space-between; }
  .month-calendar-grid { border-radius: 10px; }
  .month-calendar-weekday { padding: 8px 2px; font-size: 8px; }
  .month-calendar-cell { min-height: 88px; padding: 5px 3px; }
  .month-calendar-date { width: 24px; height: 24px; margin-bottom: 4px; font-size: 10px; }
  .month-calendar-events { gap: 3px; }
  .month-event-chip { padding: 4px 3px; font-size: 8px; }
  .month-event-chip i { width: 5px; height: 5px; }
  .month-agenda-list { grid-template-columns: 1fr; }
  .month-calendar-legend { gap: 10px; font-size: 10px; }
  .dashboard-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-footer { font-size: 10px; }
  .empty-state { padding: 20px 14px; }
  .student-calendar-embed .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: 4px; }
  .student-calendar-embed .fc .fc-toolbar-title { font-size: 16px; }
}

@media (max-width: 420px) {
  .main-area { padding-inline: 11px; }
  .page-heading { padding: 15px; }
  .page-heading h1 { font-size: 22px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card:last-child:nth-child(3) { grid-column: 1/-1; }
  .progress-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-summary article { min-width: 0; overflow-wrap: anywhere; }
  .progress-summary article:last-child:nth-child(3) { grid-column: 1/-1; }
  .stat-card { min-height: 118px; }
  .panel-header { align-items: flex-start; flex-wrap: wrap; }
  .panel-header h2 { font-size: 16px; }
  .catalog-card { padding: 17px; }
  .catalog-card h2 { font-size: 18px; }
  .month-calendar { padding: 11px; }
  .month-calendar-cell { min-height: 71px; padding: 3px 2px; }
  .month-calendar-date { width: 21px; height: 21px; margin-bottom: 3px; font-size: 9px; }
  .month-event-chip { padding: 3px 2px; font-size: 7px; }
  .month-event-chip i { display: none; }
  .next-action-panel { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .next-action-panel > :not(.next-action-button) { min-width: 0; }
  .next-action-button { width: 100%; white-space: normal; text-align: center; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
  .catalog-card-top { flex-wrap: wrap; }
  .reliability { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .form-actions, .today-label { backdrop-filter: none; background: var(--panel); }
}

/* ═══════════════ ICON SYSTEM (Module 10) ═══════════════ */
.ui-icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ui-icon) center / contain no-repeat;
  mask: var(--ui-icon) center / contain no-repeat;
  vertical-align: -.16em;
}
.ui-icon--16 { width: 16px; height: 16px; }
.ui-icon--24 { width: 24px; height: 24px; }
.ui-icon--home { --ui-icon: url("../images/icons/home.svg"); }
.ui-icon--grid { --ui-icon: url("../images/icons/grid.svg"); }
.ui-icon--calendar { --ui-icon: url("../images/icons/calendar.svg"); }
.ui-icon--upload { --ui-icon: url("../images/icons/upload.svg"); }
.ui-icon--check { --ui-icon: url("../images/icons/check.svg"); }
.ui-icon--star { --ui-icon: url("../images/icons/star.svg"); }
.ui-icon--chart { --ui-icon: url("../images/icons/chart.svg"); }
.ui-icon--settings { --ui-icon: url("../images/icons/settings.svg"); }
.ui-icon--menu { --ui-icon: url("../images/icons/menu.svg"); }
.ui-icon--x { --ui-icon: url("../images/icons/x.svg"); }
.ui-icon--clipboard { --ui-icon: url("../images/icons/clipboard.svg"); }
.ui-icon--clock { --ui-icon: url("../images/icons/clock.svg"); }
.ui-icon--target { --ui-icon: url("../images/icons/target.svg"); }
.ui-icon--users { --ui-icon: url("../images/icons/users.svg"); }
.ui-icon--external { --ui-icon: url("../images/icons/external.svg"); }
.ui-icon--plus { --ui-icon: url("../images/icons/plus.svg"); }
.ui-icon--chevron-left { --ui-icon: url("../images/icons/chevron-left.svg"); }
.ui-icon--chevron-right { --ui-icon: url("../images/icons/chevron-right.svg"); }

/* Module 6.3 — notification action links (shared components). */
.notification-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.notification-actions form { margin: 0; }