/* ================================================================
   ASAKA 1-SON TEXNIKUM — MATERIAL DESIGN 3
   Seed color #1F4E9C, tertiary = brand gold
================================================================ */

:root {
  --md-sys-color-primary: #315cab;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d8e2ff;
  --md-sys-color-on-primary-container: #001a43;
  --md-sys-color-secondary: #575e71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dbe2f9;
  --md-sys-color-on-secondary-container: #141b2c;
  --md-sys-color-tertiary: #725c1a;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffe090;
  --md-sys-color-on-tertiary-container: #241a00;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-background: #faf8fd;
  --md-sys-color-on-background: #1b1b1f;
  --md-sys-color-surface: #faf8fd;
  --md-sys-color-on-surface: #1b1b1f;
  --md-sys-color-surface-variant: #e1e2ec;
  --md-sys-color-on-surface-variant: #44474f;
  --md-sys-color-outline: #757780;
  --md-sys-color-outline-variant: #c5c6d0;
  --md-sys-color-inverse-surface: #303034;
  --md-sys-color-inverse-on-surface: #f2f0f4;
  --md-sys-color-inverse-primary: #aec6ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f3f7;
  --md-sys-color-surface-container: #efedf1;
  --md-sys-color-surface-container-high: #e9e7ec;
  --md-sys-color-surface-container-highest: #e3e2e6;
  --md-sys-color-surface-dim: #dbd9dd;
  --md-sys-color-surface-bright: #faf8fd;
  --md-sys-color-primary-fixed: #d8e2ff;
  --md-sys-color-on-primary-fixed: #001a43;

  /* extended (success) */
  --md-ext-success: #1b6c2e;
  --md-ext-on-success: #ffffff;
  --md-ext-success-container: #a5f5a6;
  --md-ext-on-success-container: #002107;

  --md-ext-green-container: #acf4a2;
  --md-ext-on-green-container: #002203;
  --md-ext-violet-container: #e9ddff;
  --md-ext-on-violet-container: #23005c;
  --md-ext-teal-container: #71f7ec;
  --md-ext-on-teal-container: #00201e;
  --md-ext-orange-container: #ffdbc8;
  --md-ext-on-orange-container: #321300;
  --md-ext-rose-container: #ffd9dd;
  --md-ext-on-rose-container: #400012;

  /* shape */
  --md-sys-shape-xs: 4px;
  --md-sys-shape-sm: 8px;
  --md-sys-shape-md: 12px;
  --md-sys-shape-lg: 16px;
  --md-sys-shape-xl: 28px;
  --md-sys-shape-full: 999px;

  /* elevation */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
  --md-elev-4: 0 2px 3px rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);

  /* motion */
  --md-ease: cubic-bezier(0.2, 0, 0, 1);
  --md-dur: 250ms;

  /* legacy aliases used by page-level styles */
  --navy:        var(--md-sys-color-primary);
  --navy-mid:    var(--md-sys-color-primary);
  --navy-light:  var(--md-sys-color-primary);
  --gold:        var(--md-sys-color-tertiary);
  --gold-light:  var(--md-sys-color-tertiary-container);
  --sky:         var(--md-sys-color-primary);
  --sky-light:   var(--md-sys-color-primary-container);
  --white:       var(--md-sys-color-surface-container-lowest);
  --bg:          var(--md-sys-color-surface);
  --bg-card:     var(--md-sys-color-surface-container-lowest);
  --text-main:   var(--md-sys-color-on-surface);
  --text-muted:  var(--md-sys-color-on-surface-variant);
  --border:      var(--md-sys-color-outline-variant);
  --radius-sm:   var(--md-sys-shape-sm);
  --radius-md:   var(--md-sys-shape-md);
  --radius-lg:   var(--md-sys-shape-lg);
  --shadow-sm:   var(--md-elev-1);
  --shadow-md:   var(--md-elev-2);
  --shadow-lg:   var(--md-elev-3);
  --transition:  all var(--md-dur) var(--md-ease);
  --font-display: 'Roboto Flex', 'Roboto', system-ui, sans-serif;
  --font-body:    'Roboto Flex', 'Roboto', system-ui, sans-serif;
}

/* ── RESET / BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.5; letter-spacing: .03125em;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent); outline-offset: 2px; }

/* ── ICONS (Material Symbols) ─────────────────────────────── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: 400; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none; flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
@keyframes md-spin { to { transform: rotate(360deg); } }
.md-spin { animation: md-spin 1s linear infinite; }

/* ── TYPE SCALE ───────────────────────────────────────────── */
.md-display-lg  { font-size: 3.5625rem; line-height: 1.12; letter-spacing: -.0044em; font-weight: 400; }
.md-display-md  { font-size: 2.8125rem; line-height: 1.16; font-weight: 400; }
.md-display-sm  { font-size: 2.25rem;   line-height: 1.22; font-weight: 400; }
.md-headline-lg { font-size: 2rem;      line-height: 1.25; font-weight: 400; }
.md-headline-md { font-size: 1.75rem;   line-height: 1.29; font-weight: 400; }
.md-headline-sm { font-size: 1.5rem;    line-height: 1.33; font-weight: 400; }
.md-title-lg    { font-size: 1.375rem;  line-height: 1.27; font-weight: 400; }
.md-title-md    { font-size: 1rem;      line-height: 1.5;  font-weight: 500; letter-spacing: .009em; }
.md-title-sm    { font-size: .875rem;   line-height: 1.43; font-weight: 500; letter-spacing: .007em; }
.md-label-lg    { font-size: .875rem;   line-height: 1.43; font-weight: 500; letter-spacing: .007em; }
.md-label-md    { font-size: .75rem;    line-height: 1.33; font-weight: 500; letter-spacing: .042em; }
.md-body-lg     { font-size: 1rem;      line-height: 1.5; }
.md-body-md     { font-size: .875rem;   line-height: 1.43; }
.md-body-sm     { font-size: .75rem;    line-height: 1.33; }

/* ── STATE LAYER (hover / focus / press) ───────────────────── */
.btn, .md-state, .main-nav > a, .main-nav .dd-trigger, .dd-menu a, .mobile-nav a,
.icon-btn, .pagination a, .lang-switcher a { position: relative; overflow: hidden; }
.btn::after, .md-state::after, .main-nav > a::after, .main-nav .dd-trigger::after,
.dd-menu a::after, .mobile-nav a::after, .icon-btn::after, .pagination a::after, .lang-switcher a::after {
  content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity 150ms linear; pointer-events: none; border-radius: inherit;
}
.btn:hover::after, .md-state:hover::after, .main-nav > a:hover::after, .main-nav .dd-trigger:hover::after,
.dd-menu a:hover::after, .mobile-nav a:hover::after, .icon-btn:hover::after,
.pagination a:hover::after, .lang-switcher a:hover::after { opacity: .08; }
.btn:focus-visible::after, .md-state:focus-visible::after, .icon-btn:focus-visible::after,
.main-nav > a:focus-visible::after, .dd-menu a:focus-visible::after { opacity: .10; }
.btn:active::after, .md-state:active::after, .icon-btn:active::after,
.main-nav > a:active::after, .dd-menu a:active::after { opacity: .10; }

/* ── ICON BUTTON ──────────────────────────────────────────── */
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  color: var(--md-sys-color-on-surface-variant); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── TOP INFO STRIP ───────────────────────────────────────── */
.topbar {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: .75rem; letter-spacing: .04em;
}
.topbar .inner {
  max-width: 1280px; margin: 0 auto; padding: 4px 24px; min-height: 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.topbar .tb-left  { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.topbar .tb-right { display: flex; gap: 14px; align-items: center; }
.topbar .tb-item  { display: inline-flex; align-items: center; gap: 6px; }
.topbar .tb-item .material-symbols-outlined { font-size: 16px; color: var(--md-sys-color-primary); }

/* segmented button (language) */
.lang-switcher { display: inline-flex; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-full); overflow: hidden; }
.lang-switcher a {
  height: 28px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 500; letter-spacing: .04em; color: var(--md-sys-color-on-surface);
}
.lang-switcher a + a { border-left: 1px solid var(--md-sys-color-outline); }
.lang-switcher a.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* ── TOP APP BAR ──────────────────────────────────────────── */
.header {
  background: var(--md-sys-color-surface);
  position: sticky; top: 0; z-index: 900;
  transition: background var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease);
}
.header.scrolled { background: var(--md-sys-color-surface-container); box-shadow: var(--md-elev-2); }
.header .inner {
  max-width: 1280px; margin: 0 auto; padding: 0 16px 0 24px;
  display: flex; align-items: center; gap: 16px; height: 72px;
}
.header-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-brand .logo-img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  background: var(--md-sys-color-surface-container-lowest); box-shadow: var(--md-elev-1);
}
.header-brand .brand-text .name { font-size: 1.125rem; font-weight: 500; line-height: 1.25; color: var(--md-sys-color-on-surface); }
.header-brand .brand-text .sub  { font-size: .75rem; color: var(--md-sys-color-on-surface-variant); letter-spacing: .04em; }

.main-nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.main-nav > a, .main-nav .dd-trigger {
  height: 40px; padding: 0 16px; border-radius: var(--md-sys-shape-full);
  font-size: .875rem; font-weight: 500; letter-spacing: .007em; color: var(--md-sys-color-on-surface-variant);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; background: none; border: none;
}
.main-nav > a .material-symbols-outlined, .main-nav .dd-trigger .material-symbols-outlined:first-child { font-size: 20px; }
.main-nav > a:hover, .main-nav .dd-trigger:hover, .dd-wrap:focus-within .dd-trigger { color: var(--md-sys-color-on-surface); }
.main-nav > a.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

.dd-wrap { position: relative; }
.dd-trigger .arrow { font-size: 18px !important; transition: transform var(--md-dur) var(--md-ease); margin-left: -2px; }
.dd-wrap:hover .dd-trigger .arrow, .dd-wrap:focus-within .dd-trigger .arrow { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px;
  background: var(--md-sys-color-surface-container); border-radius: var(--md-sys-shape-md);
  box-shadow: var(--md-elev-2); padding: 8px 0;
  opacity: 0; pointer-events: none; transform: translateY(-8px) scale(.98); transform-origin: top left;
  transition: opacity 150ms linear, transform var(--md-dur) var(--md-ease); z-index: 999;
}
.dd-wrap:hover .dd-menu, .dd-wrap:focus-within .dd-menu { opacity: 1; pointer-events: all; transform: none; }
.dd-menu a {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px;
  font-size: .875rem; font-weight: 500; letter-spacing: .007em; color: var(--md-sys-color-on-surface);
}
.dd-menu a .material-symbols-outlined { font-size: 22px; color: var(--md-sys-color-on-surface-variant); }

.hamburger { display: none; margin-left: auto; }

/* ── NAVIGATION DRAWER (mobile) ───────────────────────────── */
.md-scrim {
  position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.32);
  opacity: 0; pointer-events: none; transition: opacity var(--md-dur) var(--md-ease);
}
.md-scrim.open { opacity: 1; pointer-events: all; }
.mobile-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); z-index: 1300;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 0 var(--md-sys-shape-lg) var(--md-sys-shape-lg) 0;
  padding: 12px; overflow-y: auto; box-shadow: var(--md-elev-3);
  transform: translateX(-105%); transition: transform 300ms var(--md-ease); visibility: hidden;
}
.mobile-nav.open { transform: none; visibility: visible; }
.mobile-nav .drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
.mobile-nav .drawer-head img { width: 40px; height: 40px; border-radius: 50%; }
.mobile-nav .drawer-head span { font-size: 1rem; font-weight: 500; line-height: 1.25; }
.mobile-nav a {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
  border-radius: var(--md-sys-shape-full); font-size: .875rem; font-weight: 500; letter-spacing: .007em;
  color: var(--md-sys-color-on-surface-variant);
}
.mobile-nav a .material-symbols-outlined { font-size: 24px; }
.mobile-nav a.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.mobile-nav .m-section-title {
  padding: 18px 16px 8px; font-size: .875rem; font-weight: 500; letter-spacing: .007em;
  color: var(--md-sys-color-on-surface-variant);
  border-top: 1px solid var(--md-sys-color-outline-variant); margin-top: 8px;
}
.mobile-nav .drawer-lang { padding: 12px 16px 24px; }

/* ── PAGE WRAPPER ─────────────────────────────────────────── */
.page-wrapper { min-height: calc(100vh - 72px - 280px); }

/* ── SECTION TITLE ────────────────────────────────────────── */
.section-head { text-align: center; margin-bottom: 40px; }
.section-head .pre-label {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border-radius: var(--md-sys-shape-sm); background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px;
}
.section-head .pre-label::before, .section-head .pre-label::after { content: none; }
.section-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 400; line-height: 1.22;
  color: var(--md-sys-color-on-surface); letter-spacing: 0;
}
.section-head p { font-size: 1rem; color: var(--md-sys-color-on-surface-variant); margin-top: 12px; max-width: 640px; margin-inline: auto; }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-md);
  box-shadow: var(--md-elev-1); border: none; overflow: hidden;
  transition: box-shadow var(--md-dur) var(--md-ease);
}
.card:hover { box-shadow: var(--md-elev-2); }
.card.outlined { background: var(--md-sys-color-surface); box-shadow: none; border: 1px solid var(--md-sys-color-outline-variant); }
.card.filled { background: var(--md-sys-color-surface-container-highest); box-shadow: none; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px; border-radius: var(--md-sys-shape-full);
  font-size: .875rem; font-weight: 500; letter-spacing: .007em; cursor: pointer;
  transition: box-shadow var(--md-dur) var(--md-ease); border: none; white-space: nowrap;
}
.btn .material-symbols-outlined { font-size: 18px; margin-left: -8px; }
.btn .material-symbols-outlined:last-child:not(:first-child) { margin-left: 0; margin-right: -8px; }
.btn-primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn-primary:hover { box-shadow: var(--md-elev-1); }
.btn-gold { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.btn-gold:hover { box-shadow: var(--md-elev-1); }
.btn-outline { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.btn-ghost { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-ghost:hover { box-shadow: var(--md-elev-1); }
.btn-text { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }
.btn-sm { height: 32px; padding: 0 16px; font-size: .8125rem; }
.btn-lg { height: 56px; padding: 0 32px; font-size: 1rem; border-radius: var(--md-sys-shape-full); }

/* ── BADGES / CHIPS ───────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px;
  border-radius: var(--md-sys-shape-sm); font-size: .75rem; font-weight: 500; letter-spacing: .04em;
}
.badge-blue  { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.badge-gold  { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.badge-green { background: var(--md-ext-success-container); color: var(--md-ext-on-success-container); }
.badge-red   { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/* ── PAGE HERO ────────────────────────────────────────────── */
.page-hero {
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  padding: 56px 24px 64px; text-align: center; position: relative; overflow: hidden;
  border-radius: 0 0 var(--md-sys-shape-xl) var(--md-sys-shape-xl);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--md-sys-color-inverse-primary) 26%, transparent) 0, transparent 34%),
    radial-gradient(circle at 92% 90%, color-mix(in srgb, var(--md-sys-color-tertiary-container) 22%, transparent) 0, transparent 30%);
}
.page-hero .inner { position: relative; max-width: 800px; margin: 0 auto; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; line-height: 1.16; color: var(--md-sys-color-on-primary); }
.page-hero p { font-size: 1rem; color: color-mix(in srgb, var(--md-sys-color-on-primary) 82%, transparent); margin-top: 12px; }
.page-hero .breadcrumb {
  display: flex; justify-content: center; gap: 6px; align-items: center; margin-top: 20px;
  font-size: .875rem; color: color-mix(in srgb, var(--md-sys-color-on-primary) 75%, transparent);
}
.page-hero .breadcrumb a { color: var(--md-sys-color-tertiary-container); }
.page-hero .breadcrumb .material-symbols-outlined { font-size: 16px; }

/* ── FORM ELEMENTS (outlined text field) ──────────────────── */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: .75rem; font-weight: 500; letter-spacing: .04em; color: var(--md-sys-color-on-surface-variant); margin-bottom: 6px; }
.form-control {
  width: 100%; min-height: 56px; padding: 14px 16px;
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-xs);
  font-family: var(--font-body); font-size: 1rem; color: var(--md-sys-color-on-surface);
  background: transparent; transition: border-color 150ms linear, box-shadow 150ms linear; outline: none;
}
.form-control:hover { border-color: var(--md-sys-color-on-surface); }
.form-control:focus { border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }
textarea.form-control { min-height: 120px; resize: vertical; }

/* floating-label field */
.md-field { position: relative; margin-bottom: 20px; }
.md-field input, .md-field textarea, .md-field select {
  width: 100%; min-height: 56px; padding: 22px 16px 8px; font: inherit; font-size: 1rem;
  color: var(--md-sys-color-on-surface); background: transparent; outline: none;
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-xs);
  transition: border-color 150ms linear, box-shadow 150ms linear;
}
.md-field textarea { min-height: 140px; resize: vertical; padding-top: 26px; }
.md-field label {
  position: absolute; left: 16px; top: 16px; padding: 0 4px; margin-left: -4px;
  font-size: 1rem; color: var(--md-sys-color-on-surface-variant); pointer-events: none;
  transform-origin: left top; transition: transform 150ms var(--md-ease), color 150ms linear, top 150ms var(--md-ease);
}
.md-field input:focus + label, .md-field textarea:focus + label, .md-field select:focus + label,
.md-field input:not(:placeholder-shown) + label, .md-field textarea:not(:placeholder-shown) + label,
.md-field select + label {
  top: 6px; transform: scale(.75);
}
.md-field input:hover, .md-field textarea:hover, .md-field select:hover { border-color: var(--md-sys-color-on-surface); }
.md-field input:focus, .md-field textarea:focus, .md-field select:focus { border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }
.md-field input:focus + label, .md-field textarea:focus + label, .md-field select:focus + label { color: var(--md-sys-color-primary); }
.md-field .supporting { font-size: .75rem; color: var(--md-sys-color-on-surface-variant); padding: 4px 16px 0; }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer {
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  padding: 56px 0 0; margin-top: 80px; border-radius: var(--md-sys-shape-xl) var(--md-sys-shape-xl) 0 0;
}
.footer .inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; }
.footer-brand .f-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .f-logo img { width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.footer-brand .f-logo span { font-size: 1.125rem; font-weight: 500; }
.footer-brand p { font-size: .875rem; line-height: 1.6; max-width: 300px; color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 78%, transparent); }
.footer-brand .socials { display: flex; gap: 8px; margin-top: 20px; }
.footer-brand .socials a {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
  color: var(--md-sys-color-inverse-on-surface); font-size: 1rem; transition: background var(--md-dur) var(--md-ease), color var(--md-dur) var(--md-ease);
}
.footer-brand .socials a:hover { background: var(--md-sys-color-inverse-primary); color: var(--md-sys-color-on-primary-container); }
.footer-col h4 { font-size: .875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--md-sys-color-inverse-primary); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.footer-col ul a { display: inline-block; padding: 6px 0; font-size: .875rem; color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 82%, transparent); transition: color 150ms linear; }
.footer-col ul a:hover { color: var(--md-sys-color-inverse-on-surface); text-decoration: underline; text-underline-offset: 4px; }
.footer-col .contact-item { display: flex; gap: 12px; font-size: .875rem; align-items: flex-start; margin-bottom: 12px; color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 82%, transparent); }
.footer-col .contact-item .material-symbols-outlined { color: var(--md-sys-color-inverse-primary); font-size: 20px; }
.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 16%, transparent);
  padding: 18px 0; display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; gap: 12px; flex-wrap: wrap; color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 70%, transparent);
}

/* ── LAYOUT HELPERS ───────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 24px; }
.text-center { text-align: center; }
.text-muted { color: var(--md-sys-color-on-surface-variant); }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.flex { display: flex; } .flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; }
.divider { height: 1px; background: var(--md-sys-color-outline-variant); margin: 40px 0; }
.divider-gold { height: 4px; background: var(--md-sys-color-tertiary-container); margin: 40px auto; max-width: 96px; border-radius: 2px; }

/* ── STAT BOX ─────────────────────────────────────────────── */
.stat-box {
  background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-md);
  padding: 24px 20px; text-align: center; box-shadow: var(--md-elev-1);
  transition: box-shadow var(--md-dur) var(--md-ease);
}
.stat-box:hover { box-shadow: var(--md-elev-2); }
.stat-box .stat-icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; font-size: 24px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
}
.stat-box .stat-num { font-size: 2.5rem; font-weight: 400; color: var(--md-sys-color-primary); line-height: 1.1; }
.stat-box .stat-label { font-size: .875rem; color: var(--md-sys-color-on-surface-variant); margin-top: 6px; font-weight: 500; }

/* ── TABLE ────────────────────────────────────────────────── */
.t-wrap { overflow-x: auto; border-radius: var(--md-sys-shape-md); border: 1px solid var(--md-sys-color-outline-variant); }
table { width: 100%; border-collapse: collapse; background: var(--md-sys-color-surface); }
thead th {
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  padding: 14px 16px; font-size: .875rem; font-weight: 500; text-align: left; white-space: nowrap;
}
tbody td { padding: 12px 16px; border-top: 1px solid var(--md-sys-color-outline-variant); font-size: .875rem; }
tbody tr:hover td { background: color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent); }

/* ── ALERT / BANNER ───────────────────────────────────────── */
.alert { padding: 14px 16px; border-radius: var(--md-sys-shape-md); font-size: .875rem; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.alert .material-symbols-outlined { font-size: 20px; margin-top: 1px; }
.alert-info    { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.alert-success { background: var(--md-ext-success-container); color: var(--md-ext-on-success-container); }
.alert-danger  { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.alert-warning { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }

/* ── PAGINATION ───────────────────────────────────────────── */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 500;
}
.pagination a { color: var(--md-sys-color-on-surface); }
.pagination span { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

/* ── DIALOG ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.32);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 250ms var(--md-ease);
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--md-sys-color-surface-container-high); border-radius: var(--md-sys-shape-xl);
  max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--md-elev-3);
  transform: translateY(16px) scale(.98); transition: transform 300ms var(--md-ease);
}
.modal-overlay.active .modal-box { transform: none; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0; }
.modal-header h3 { font-size: 1.5rem; font-weight: 400; line-height: 1.33; color: var(--md-sys-color-on-surface); }
.modal-close {
  width: 40px; height: 40px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; color: var(--md-sys-color-on-surface-variant); transition: background 150ms linear;
}
.modal-close:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.modal-body { padding: 16px 24px 24px; color: var(--md-sys-color-on-surface-variant); }
.modal-footer { padding: 0 24px 24px; display: flex; gap: 8px; justify-content: flex-end; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 1000px) {
  .main-nav { display: none; }
  .hamburger { display: inline-flex; }
  .header .inner { padding: 0 8px 0 16px; height: 64px; }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
  .page-hero { padding: 40px 20px 48px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .topbar .tb-left { display: none; }
  .topbar .inner { justify-content: flex-end; }
  .header-brand .brand-text .sub { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* ── KAFEDRA PAGES ────────────────────────────────────────── */
.kaf-section { max-width: 1200px; margin: 0 auto; padding: 40px 24px 8px; }
.kaf-section h2 {
  font-size: 1.75rem; font-weight: 400; line-height: 1.29; margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px; color: var(--md-sys-color-on-surface);
}
.kaf-section h2::before { content: ''; width: 6px; height: 28px; border-radius: 3px; background: var(--md-sys-color-tertiary-container); }
.kaf-section .about {
  background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-lg);
  padding: 24px 28px; line-height: 1.7; color: var(--md-sys-color-on-surface-variant);
}
.achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.achievement { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-md); padding: 20px; box-shadow: var(--md-elev-1); }
.achievement h4 { font-size: 1rem; font-weight: 500; margin-bottom: 8px; color: var(--md-sys-color-on-surface); }
.achievement p { font-size: .875rem; color: var(--md-sys-color-on-surface-variant); margin-bottom: 4px; }
.achievement a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px; margin-top: 10px; border-radius: 999px;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: .8125rem; font-weight: 500;
}
.teachers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.teacher-card {
  background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-lg); overflow: hidden;
  text-align: center; box-shadow: var(--md-elev-1); transition: box-shadow var(--md-dur) var(--md-ease);
}
.teacher-card:hover { box-shadow: var(--md-elev-2); }
.teacher-card img { width: 100%; height: 240px; object-fit: cover; object-position: top; background: var(--md-sys-color-surface-container-high); }
.teacher-card h3 { font-size: 1rem; font-weight: 500; padding: 14px 14px 2px; color: var(--md-sys-color-on-surface); }
.teacher-card p { font-size: .875rem; color: var(--md-sys-color-on-surface-variant); padding: 0 14px 16px; }
.subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.subject {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 16px; border-radius: var(--md-sys-shape-sm);
  border: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); font-size: .875rem; font-weight: 500;
}
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--md-sys-shape-md); }

/* ── FILE CARDS (documents) ───────────────────────────────── */
.file-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.file-box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-lg);
  padding: 16px 16px 16px 20px; box-shadow: var(--md-elev-1); transition: box-shadow var(--md-dur) var(--md-ease);
}
.file-box:hover { box-shadow: var(--md-elev-2); }
.file-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.file-icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
}
.file-name { font-size: 1.0625rem; font-weight: 400; color: var(--md-sys-color-on-surface); overflow-wrap: anywhere; }
.view-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 999px; flex-shrink: 0;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  font-size: .875rem; font-weight: 500; position: relative; overflow: hidden;
}
.view-btn:hover { box-shadow: var(--md-elev-1); }
.view-btn .material-symbols-outlined { font-size: 18px; }
@media (max-width: 520px) { .file-box { flex-wrap: wrap; } .view-btn { width: 100%; justify-content: center; } }

.teachers:not(:has(.teacher-card))::before,
.achievements:not(:has(.achievement))::before {
  content: "Ma'lumot hozircha kiritilmagan"; grid-column: 1 / -1;
  padding: 20px 24px; border-radius: var(--md-sys-shape-md);
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface-variant); font-size: .875rem;
}

.main-nav .dd-trigger.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-danger { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.btn-danger:hover { box-shadow: var(--md-elev-1); }
.btn-tonal-danger { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

.md-field select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960' fill='%2344474f'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") no-repeat right 12px center; }