/* ============================================================
   KFOO AI — Design System (app build)
   Ported from KFOO Brand Design System v0.1
   Source authority: KFOO_Brand_Guidelines.pdf (v1.0, 2026)
   Tone: Editorial trust. Navy ink on beige canvas. Sage as rare
   punctuation. Almarai Arabic. Everything rounded. RTL-first.

   This file = brand tokens + brand components (verbatim from source)
   + app-surface extensions (shell, tables, fields, stat-tiles,
   كَفَاء-card) authored in the same language. The 10 principles hold.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

/* ---------- 1. TOKENS (brand-locked) ---------- */
:root {
  --c-navy:           #0F1F3D;
  --c-navy-light:     #1A3260;
  --c-navy-deep:      #0A1428;
  --c-beige:          #E3D9C6;
  --c-beige-light:    #F0EAE0;
  --c-beige-soft:     #F7F3EC;
  --c-white:          #FFFFFF;
  --c-sage:           #8AA15C;
  --c-sage-faint:     rgba(138,161,92,0.12);

  --c-ink:            #0F1F3D;
  --c-ink-soft:       rgba(15,31,61,0.72);
  --c-ink-mute:       rgba(15,31,61,0.55);
  --c-ink-faint:      rgba(15,31,61,0.30);
  --c-ink-hair:       rgba(15,31,61,0.12);
  --c-on-navy:        #F0EAE0;
  --c-on-navy-soft:   rgba(240,234,224,0.72);
  --c-on-navy-mute:   rgba(240,234,224,0.45);

  /* status — sage-leaning success, restrained warning/danger */
  --c-success:        #5C8A3A;
  --c-success-bg:     rgba(138,161,92,0.16);
  --c-warning:        #B5852A;
  --c-warning-bg:     rgba(181,133,42,0.12);
  --c-danger:         #B23A3A;
  --c-danger-bg:      rgba(178,58,58,0.10);
  --c-info:           #2E5A8A;
  --c-info-bg:        rgba(46,90,138,0.10);

  --font-ar: "Almarai", "Tajawal", "Segoe UI Arabic", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Söhne", "Neue Haas Grotesk", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-display-xl: clamp(3rem, 8.5vw, 6.5rem);
  --t-display:    clamp(2.25rem, 5.5vw, 4.5rem);
  --t-h1:         clamp(1.75rem, 3.5vw, 2.75rem);
  --t-h2:         clamp(1.375rem, 2.5vw, 1.875rem);
  --t-h3:         1.25rem;
  --t-lead:       1.1875rem;
  --t-body:       1.0625rem;
  --t-small:      0.9375rem;
  --t-micro:      0.8125rem;
  --t-tag:        0.75rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-base:   1.75;
  --lh-loose:  1.9;

  --tr-tight:  -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.08em;
  --tr-extra:  0.18em;

  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4:  1rem;
  --s-5:  1.5rem;   --s-6:  2rem;     --s-7:  3rem;     --s-8:  4rem;
  --s-9:  6rem;     --s-10: 8rem;     --s-11: 12rem;

  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  --e-1: 0 1px 2px rgba(15,31,61,0.04), 0 1px 1px rgba(15,31,61,0.02);
  --e-2: 0 4px 14px rgba(15,31,61,0.06);
  --e-3: 0 14px 36px rgba(15,31,61,0.10);
  --e-4: 0 28px 72px rgba(15,31,61,0.14);

  --d-fast: 150ms; --d-base: 250ms; --d-slow: 450ms; --d-deliberate: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* app layout */
  --sidebar-w: 264px;
  --topbar-h: 60px;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-ar);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-beige-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "calt", "liga";
}
h1,h2,h3,h4 { letter-spacing: var(--tr-tight); line-height: var(--lh-snug); margin: 0; }
a { color: var(--c-navy); }
:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 3px; border-radius: var(--r-xs); }
::selection { background: var(--c-sage-faint); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: plaintext; }
.en   { font-family: var(--font-en); }

/* ---------- 3. EYEBROW · PULL · TAG (verbatim) ---------- */
.eyebrow {
  font-family: var(--font-en); font-size: var(--t-micro);
  letter-spacing: var(--tr-extra); text-transform: uppercase; font-weight: 700;
  color: var(--c-ink-soft); display: inline-flex; align-items: center; gap: var(--s-3); margin: 0;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--c-navy); }
.eyebrow--sage::before { background: var(--c-sage); height: 2px; }

.pull {
  border-inline-start: 3px solid var(--c-sage); padding-inline-start: var(--s-5);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: var(--lh-snug);
  font-weight: 700; color: var(--c-navy); margin: var(--s-6) 0; max-width: 56ch;
}

.tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-ar); font-size: var(--t-tag); font-weight: 700;
  padding: 0.375rem 0.75rem; border-radius: var(--r-pill);
  background: var(--c-beige); color: var(--c-navy); letter-spacing: var(--tr-normal);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-navy); }
.tag--serious { background: rgba(138,161,92,0.18); color: #4a5e2f; }
.tag--serious .dot { background: var(--c-sage); }
.tag--casual  { background: rgba(15,31,61,0.06); color: var(--c-ink-mute); }
.tag--casual  .dot { background: var(--c-ink-mute); }
/* status variants (app) */
.tag--success { background: var(--c-success-bg); color: var(--c-success); }
.tag--success .dot { background: var(--c-success); }
.tag--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.tag--warning .dot { background: var(--c-warning); }
.tag--danger  { background: var(--c-danger-bg); color: var(--c-danger); }
.tag--danger  .dot { background: var(--c-danger); }
.tag--info    { background: var(--c-info-bg); color: var(--c-info); }
.tag--info    .dot { background: var(--c-info); }

/* ---------- 4. BUTTON (verbatim) ---------- */
.btn {
  --btn-bg: var(--c-navy); --btn-fg: var(--c-beige-light); --btn-border: var(--c-navy);
  font-family: var(--font-ar); font-size: var(--t-body); font-weight: 700;
  padding: 0.875rem 1.75rem; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-border);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  transition: transform var(--d-base) var(--ease-soft), background var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
  line-height: 1; text-decoration: none; letter-spacing: var(--tr-normal);
}
.btn:hover { background: var(--c-navy-light); transform: translateY(-1px); box-shadow: var(--e-2); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--c-navy); --btn-border: var(--c-navy); }
.btn--secondary:hover { background: var(--c-navy); color: var(--c-beige-light); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-navy); --btn-border: transparent; padding-inline: var(--s-3); }
.btn--ghost:hover { background: var(--c-ink-hair); box-shadow: none; transform: none; }
.btn--on-dark { --btn-bg: var(--c-beige); --btn-fg: var(--c-navy); --btn-border: var(--c-beige); }
.btn--on-dark:hover { background: var(--c-white); color: var(--c-navy); }
.btn--danger { --btn-bg: var(--c-danger); --btn-fg: #fff; --btn-border: var(--c-danger); }
.btn--danger:hover { background: #8f2e2e; color: #fff; }
.btn--lg { font-size: var(--t-lead); padding: 1.125rem 2.25rem; }
.btn--block { width: 100%; }
.btn .arrow { transition: transform var(--d-base) var(--ease-out); display: inline-block; }
.btn:hover .arrow { transform: translateX(-4px); }

/* ---------- 5. ROLE CARD (verbatim) ---------- */
.role-card {
  background: var(--c-beige-soft); border-radius: var(--r-lg); padding: var(--s-6);
  max-width: 340px; border: 1px solid transparent;
  transition: transform var(--d-base) var(--ease-soft), box-shadow var(--d-base) var(--ease-out);
}
.role-card:hover { transform: translateY(-4px); box-shadow: var(--e-3); border-color: var(--c-ink-hair); }
.role-card .icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--c-navy); color: var(--c-beige);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-5);
}
.role-card .icon svg { width: 24px; height: 24px; }
.role-card h4 { font-size: var(--t-h2); margin: 0 0 var(--s-3); font-weight: 800; }
.role-card p { font-size: var(--t-body); color: var(--c-ink-soft); margin: 0; }

/* ---------- 6. PRICING CARD (verbatim) ---------- */
.pricing-card {
  background: var(--c-white); border: 1px solid var(--c-ink-hair); border-radius: var(--r-lg);
  padding: var(--s-6); width: 320px; display: flex; flex-direction: column; gap: var(--s-4);
}
.pricing-card h4 { font-size: var(--t-h2); margin: 0; font-weight: 800; }
.pricing-card .price-row { display: flex; align-items: baseline; gap: var(--s-3); }
.pricing-card .price { font-family: var(--font-en); font-size: 2.5rem; font-weight: 800; line-height: 1; }
.pricing-card .price-old { font-family: var(--font-en); font-size: var(--t-body); color: var(--c-ink-faint); text-decoration: line-through; }
.pricing-card .price-unit { font-size: var(--t-small); color: var(--c-ink-mute); }
.pricing-card p.desc { color: var(--c-ink-soft); margin: 0; font-size: var(--t-small); }
.pricing-card ul { list-style: none; padding: 0; margin: var(--s-3) 0; display: grid; gap: var(--s-3); }
.pricing-card ul li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-small); }
.pricing-card ul li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-sage-faint); margin-top: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%238AA15C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: center;
}
.pricing-card--featured { background: var(--c-navy); color: var(--c-on-navy); border-color: var(--c-navy); position: relative; }
.pricing-card--featured h4, .pricing-card--featured .price, .pricing-card--featured .price-unit { color: var(--c-beige); }
.pricing-card--featured .price-old { color: var(--c-on-navy-mute); }
.pricing-card--featured p.desc, .pricing-card--featured ul li { color: var(--c-on-navy-soft); }
.pricing-card--featured ul li::before { background-color: rgba(138,161,92,0.20); }
.pricing-card--featured .ribbon {
  position: absolute; top: -12px; inset-inline-start: var(--s-5);
  background: var(--c-sage); color: var(--c-navy); padding: 0.25rem 0.75rem; border-radius: var(--r-pill);
  font-family: var(--font-en); font-size: var(--t-tag); font-weight: 700; letter-spacing: var(--tr-wide); text-transform: uppercase;
}

/* ---------- 7. FAQ (verbatim core) ---------- */
.faq-list { display: grid; gap: var(--s-3); }
.faq { background: var(--c-white); border: 1px solid var(--c-ink-hair); border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.faq[open] { border-color: var(--c-navy); box-shadow: var(--e-1); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-4) var(--s-5);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  font-weight: 700; font-size: var(--t-body); color: var(--c-navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq .answer { padding: 0 var(--s-5) var(--s-5); color: var(--c-ink-soft); font-size: var(--t-small); }

/* ============================================================
   APP-SURFACE EXTENSIONS (same language, not in brand source)
   ============================================================ */

/* ---------- 8. SURFACE / CARD ---------- */
.surface { background: var(--c-white); border: 1px solid var(--c-ink-hair); border-radius: var(--r-lg); box-shadow: var(--e-1); }
.card { background: var(--c-white); border: 1px solid var(--c-ink-hair); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--e-1); }
.card--beige { background: var(--c-beige-soft); border-color: transparent; box-shadow: none; }
.card--navy  { background: var(--c-navy); color: var(--c-on-navy); border-color: var(--c-navy); }
.hairline { height: 1px; background: var(--c-ink-hair); border: 0; margin: var(--s-5) 0; }

/* ---------- 9. FORM FIELD ---------- */
.field { margin-bottom: var(--s-4); }
.field > label { display: block; font-size: var(--t-small); font-weight: 700; color: var(--c-ink-soft); margin-bottom: var(--s-2); }
.field .hint { font-size: var(--t-micro); color: var(--c-ink-mute); margin-top: var(--s-2); line-height: var(--lh-snug); }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-ar); font-size: var(--t-body); color: var(--c-ink);
  background: var(--c-beige-soft); border: 1.5px solid var(--c-ink-hair); border-radius: var(--r-md);
  padding: 0.8125rem 1rem; transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-navy); background: var(--c-white); box-shadow: 0 0 0 4px var(--c-sage-faint); }
.input.ltr { direction: ltr; text-align: start; font-family: var(--font-mono); }
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-base); }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 7.5l5 5 5-5' fill='none' stroke='%230F1F3D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: left 1rem center; background-size: 18px; padding-inline-start: 2.5rem; }

/* ---------- 10. AUTH / CENTERED CARD ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-5); }
.auth-card { width: 100%; max-width: 460px; background: var(--c-white); border: 1px solid var(--c-ink-hair); border-radius: var(--r-xl); padding: var(--s-7); box-shadow: var(--e-3); }
.auth-brand { text-align: center; margin-bottom: var(--s-6); }
.auth-brand img { height: 40px; }
.auth-brand .sub { color: var(--c-ink-mute); font-size: var(--t-small); margin-top: var(--s-3); }

/* ---------- 11. TABS (pill segmented) ---------- */
.tabs { display: flex; gap: var(--s-1); background: var(--c-beige-soft); padding: var(--s-1); border-radius: var(--r-pill); }
.tabs .tab { flex: 1; border: 0; background: transparent; cursor: pointer; font-family: var(--font-ar);
  font-size: var(--t-small); font-weight: 700; color: var(--c-ink-mute); padding: 0.625rem 0.75rem; border-radius: var(--r-pill);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.tabs .tab.active { background: var(--c-white); color: var(--c-navy); box-shadow: var(--e-1); }

/* ---------- 12. ALERTS ---------- */
.alert { border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--t-small); margin-bottom: var(--s-4); border: 1px solid transparent; }
.alert--error { background: var(--c-danger-bg); border-color: rgba(178,58,58,0.25); color: var(--c-danger); }
.alert--ok    { background: var(--c-success-bg); border-color: rgba(138,161,92,0.30); color: var(--c-success); }
.alert--info  { background: var(--c-info-bg); border-color: rgba(46,90,138,0.22); color: var(--c-info); }

/* ---------- 13. APP SHELL (sidebar + topbar) ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { background: var(--c-navy); color: var(--c-on-navy); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; padding: var(--s-5) var(--s-4); }
.sidebar__brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-6); }
.sidebar__brand img { height: 28px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: var(--s-3); padding: 0.75rem 0.875rem; border-radius: var(--r-md);
  color: var(--c-on-navy-soft); font-size: var(--t-small); font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.nav-item:hover { background: rgba(240,234,224,0.06); color: var(--c-on-navy); }
.nav-item.active { background: rgba(138,161,92,0.16); color: var(--c-beige); }
.nav-item .ico { width: 20px; height: 20px; flex: none; }
.sidebar__foot { padding-top: var(--s-5); border-top: 1px solid rgba(240,234,224,0.10); margin-top: var(--s-4); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s-6); background: var(--c-beige-light); border-bottom: 1px solid var(--c-ink-hair); position: sticky; top: 0; z-index: 10; }
.topbar__title { font-size: var(--t-h3); font-weight: 800; }
.content { padding: var(--s-6); }

/* page header inside content */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.page-head h1 { font-size: var(--t-h1); font-weight: 800; }
.page-head .sub { color: var(--c-ink-mute); font-size: var(--t-small); margin-top: var(--s-1); }

/* ---------- 14. STAT TILE ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-4); }
.stat-tile { background: var(--c-white); border: 1px solid var(--c-ink-hair); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--e-1); }
.stat-tile .v { font-family: var(--font-en); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--c-navy); }
.stat-tile .l { font-size: var(--t-small); color: var(--c-ink-mute); margin-top: var(--s-2); }
.stat-tile .l::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--c-sage); margin-inline-end: var(--s-2); vertical-align: middle; }

/* ---------- 15. TABLE ---------- */
.table-wrap { background: var(--c-white); border: 1px solid var(--c-ink-hair); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-1); }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { text-align: start; padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--c-ink-hair); font-size: var(--t-small); }
table.tbl thead th { background: var(--c-beige-soft); color: var(--c-ink-mute); font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-wide); }
table.tbl tbody tr { transition: background var(--d-fast) var(--ease-out); }
table.tbl tbody tr:hover { background: var(--c-beige-soft); cursor: pointer; }
table.tbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- 16. كَفَاء CARD (market match) ---------- */
.kafaa-card { background: var(--c-white); border: 1px solid var(--c-ink-hair); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--e-1);
  display: flex; flex-direction: column; gap: var(--s-3); transition: box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out); }
.kafaa-card:hover { box-shadow: var(--e-2); border-color: var(--c-ink-hair); }
.kafaa-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.kafaa-score { font-family: var(--font-en); font-weight: 800; font-size: 1.5rem; color: var(--c-navy); line-height: 1; }
.kafaa-score small { font-size: var(--t-micro); color: var(--c-ink-faint); font-weight: 400; }
.kafaa-score::after { content: ""; display: block; width: 32px; height: 2px; background: var(--c-sage); margin-top: var(--s-2); }
.kafaa-card__brief { font-size: var(--t-body); color: var(--c-ink-soft); }
.kafaa-card__actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }

/* ---------- 17. EMPTY / LOADING ---------- */
.empty { text-align: center; padding: var(--s-8) var(--s-5); color: var(--c-ink-mute); }
.empty .ico { font-size: 2rem; opacity: 0.5; }
.empty .msg { margin-top: var(--s-3); font-size: var(--t-small); }
.loading { text-align: center; padding: var(--s-7); color: var(--c-ink-mute); font-size: var(--t-small); }

/* ---------- 18. UTILITIES ---------- */
.row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.grow { flex: 1; }
.muted { color: var(--c-ink-mute); }
.center { text-align: center; }
.kv { background: var(--c-beige-soft); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.kv .k { font-size: var(--t-micro); color: var(--c-ink-mute); text-transform: uppercase; letter-spacing: var(--tr-wide); }
.kv .v { font-size: var(--t-body); color: var(--c-ink); margin-top: 2px; }

/* ---------- 19b. MODAL ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,31,61,0.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: var(--s-4); }
.modal-card { background: var(--c-white); border-radius: var(--r-xl); padding: var(--s-7); width: 100%; max-width: 520px; box-shadow: var(--e-4); max-height: 90vh; overflow-y: auto; }
.modal-card h2 { font-size: var(--t-h2); font-weight: 800; margin-bottom: var(--s-2); }
.modal-card .modal-sub { color: var(--c-ink-mute); font-size: var(--t-small); margin-bottom: var(--s-5); }
.modal-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 480px) { .modal-grid2 { grid-template-columns: 1fr; } }

/* ---------- 19. RESPONSIVE SHELL ---------- */
@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset-inline-start: 0; top: 0; z-index: 40; width: var(--sidebar-w);
    transform: translateX(100%); transition: transform var(--d-base) var(--ease-soft); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--e-4); }
  .content { padding: var(--s-4); }
}