/* ============================================================================
   پورتال بازبینی پیشنهاد
   ========================================================================= */

@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Vazirmatn-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Vazirmatn-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Vazirmatn-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Vazirmatn-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Estedad'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Estedad-arabic.woff2') format('woff2-variations'), url('fonts/Estedad-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Estedad'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Estedad-latin.woff2') format('woff2-variations'), url('fonts/Estedad-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215;
}

/* ---------------------------------------------------------------- light palette */

:root {
  --bg:            #eff3f0;
  --bg-tint:       #e5ebe7;
  --surface:       #ffffff;
  --surface-2:     #f6f8fb;
  --surface-3:     #eceff4;
  --border:        #dde3ea;
  --border-strong: #c3ccd7;

  --text:      #101b26;
  --text-dim:  #4a5967;
  --text-mute: #7d8b99;

  --accent:        var(--primary-light, #0f7a4a);
  --accent-hi:     color-mix(in srgb, var(--accent) 78%, #000);
  --accent-soft:   color-mix(in srgb, var(--accent) 13%, #fff);
  --accent-border: color-mix(in srgb, var(--accent) 40%, #fff);
  --on-accent:     var(--on-primary-light, #ffffff);

  --cover-bg: linear-gradient(140deg,
               color-mix(in srgb, var(--accent) 16%, #04130b) 0%,
               color-mix(in srgb, var(--accent) 30%, #04130b) 52%,
               color-mix(in srgb, var(--accent) 44%, #04130b) 100%);
  --cover-ink: #effff5;

  --warm:        #d9701a;
  --warm-soft:   #fdeedd;

  --ok:        #0f6e52;
  --ok-soft:   #ddf3ec;
  --ok-border: #93d5be;

  --warn:        #96580a;
  --warn-soft:   #fdf0da;
  --warn-border: #eec894;

  --danger:        #a52633;
  --danger-soft:   #fce9eb;
  --danger-border: #efb3ba;

  --info:        #1c4f96;
  --info-soft:   #e4eefb;
  --info-border: #a9c6ec;

  --core:        #3346a8;
  --core-soft:   #e6e9fb;
  --core-border: #b3bced;

  --shadow-sm: 0 1px 2px rgba(16, 32, 44, .05), 0 1px 3px rgba(16, 32, 44, .04);
  --shadow-md: 0 4px 12px rgba(16, 32, 44, .08), 0 2px 5px rgba(16, 32, 44, .04);
  --shadow-lg: 0 20px 48px rgba(16, 32, 44, .18), 0 6px 16px rgba(16, 32, 44, .08);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --bw: 1px;
  --tr: .16s;
  --card-bg: var(--surface);
  --panel-bg: var(--surface-2);
  --accent-grad: var(--accent);
  --accent-grad-hover: var(--accent-hi);
  --glow: none;
  --glow-strong: none;
  --bar-blur: blur(14px) saturate(160%);

  --nav-w: 268px;
  --bar-h: 62px;

  --ease: cubic-bezier(.32, .72, .35, 1);
}

/* ---------------------------------------------------------------- dark palette */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:            #0a110d;
    --bg-tint:       #0e1712;
    --surface:       #131d18;
    --surface-2:     #19241e;
    --surface-3:     #202d26;
    --border:        #2b3a32;
    --border-strong: #42544a;

    --text:      #e9f0f5;
    --text-dim:  #a7b6c2;
    --text-mute: #74858f;

    --accent:        var(--primary-dark, #34c77b);
    --accent-hi:     color-mix(in srgb, var(--accent) 72%, #fff);
    --accent-soft:   color-mix(in srgb, var(--accent) 17%, #0b1116);
    --accent-border: color-mix(in srgb, var(--accent) 38%, #0b1116);
    --on-accent:     var(--on-primary-dark, #04160c);

    --cover-bg: linear-gradient(140deg,
                 color-mix(in srgb, var(--accent) 12%, #04130b) 0%,
                 color-mix(in srgb, var(--accent) 24%, #04130b) 52%,
                 color-mix(in srgb, var(--accent) 36%, #04130b) 100%);
    --cover-ink: #effff5;
    --warm:      #f5a25a;
    --warm-soft: #3a2511;

    --ok:        #4cd0a1;
    --ok-soft:   #0e3129;
    --ok-border: #1f5b4b;

    --warn:        #e8ad4d;
    --warn-soft:   #35270e;
    --warn-border: #63491a;

    --danger:        #f4838f;
    --danger-soft:   #3a171d;
    --danger-border: #6a2b33;

    --info:        #78ade8;
    --info-soft:   #132539;
    --info-border: #29496b;

    --core:        #9aa8f5;
    --core-soft:   #1a1f3d;
    --core-border: #36407a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, .68);
  }
}

:root[data-theme='dark'] {
  --bg: #0a110d; --bg-tint: #0e1712; --surface: #131d18; --surface-2: #19241e;
  --surface-3: #202d26; --border: #2b3a32; --border-strong: #42544a;
  --text: #e9f0f5; --text-dim: #a7b6c2; --text-mute: #74858f;
  --accent: var(--primary-dark, #34c77b);
  --accent-hi: color-mix(in srgb, var(--accent) 72%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 17%, #0b1116);
  --accent-border: color-mix(in srgb, var(--accent) 38%, #0b1116);
  --on-accent: var(--on-primary-dark, #04160c);
  --cover-bg: linear-gradient(140deg,
               color-mix(in srgb, var(--accent) 12%, #04130b) 0%,
               color-mix(in srgb, var(--accent) 24%, #04130b) 52%,
               color-mix(in srgb, var(--accent) 36%, #04130b) 100%);
  --cover-ink: #effff5;
  --warm: #f5a25a; --warm-soft: #3a2511;
  --ok: #4cd0a1; --ok-soft: #0e3129; --ok-border: #1f5b4b;
  --warn: #e8ad4d; --warn-soft: #35270e; --warn-border: #63491a;
  --danger: #f4838f; --danger-soft: #3a171d; --danger-border: #6a2b33;
  --info: #78ade8; --info-soft: #132539; --info-border: #29496b;
  --core: #9aa8f5; --core-soft: #1a1f3d; --core-border: #36407a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 6px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.68);
}

/* ---------------------------------------------------------------- tonal palette (derived from the seed colour) */

:root { --lime: #9ccc3a; }

@supports (color: oklch(from red l c h)) {
  :root {
    --bg:            oklch(from var(--accent) .968 .012 h);
    --bg-tint:       oklch(from var(--accent) .945 .018 h);
    --surface:       oklch(from var(--accent) .996 .003 h);
    --surface-2:     oklch(from var(--accent) .978 .008 h);
    --surface-3:     oklch(from var(--accent) .948 .014 h);
    --border:        oklch(from var(--accent) .905 .018 h);
    --border-strong: oklch(from var(--accent) .83 .026 h);
    --text:          oklch(from var(--accent) .23 .025 h);
    --text-dim:      oklch(from var(--accent) .43 .03 h);
    --text-mute:     oklch(from var(--accent) .58 .025 h);
    --warm:          oklch(from var(--accent) .66 .15 calc(h - 95));
    --warm-soft:     oklch(from var(--accent) .95 .035 calc(h - 95));
    --lime:          oklch(from var(--accent) .84 .15 calc(h - 38));
    --cover-bg: linear-gradient(140deg,
                 oklch(from var(--accent) .24 calc(c * .45) h) 0%,
                 oklch(from var(--accent) .33 calc(c * .7) h) 55%,
                 oklch(from var(--accent) .42 calc(c * .85) calc(h - 14)) 100%);
    --shadow-sm: 0 1px 2px oklch(from var(--accent) .3 .04 h / .06), 0 1px 3px oklch(from var(--accent) .3 .04 h / .05);
    --shadow-md: 0 4px 12px oklch(from var(--accent) .3 .04 h / .09), 0 2px 5px oklch(from var(--accent) .3 .04 h / .05);
    --shadow-lg: 0 20px 48px oklch(from var(--accent) .25 .05 h / .2), 0 6px 16px oklch(from var(--accent) .25 .05 h / .09);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --bg:            oklch(from var(--accent) .165 .016 h);
      --bg-tint:       oklch(from var(--accent) .19 .02 h);
      --surface:       oklch(from var(--accent) .205 .02 h);
      --surface-2:     oklch(from var(--accent) .23 .022 h);
      --surface-3:     oklch(from var(--accent) .265 .025 h);
      --border:        oklch(from var(--accent) .31 .026 h);
      --border-strong: oklch(from var(--accent) .41 .03 h);
      --text:          oklch(from var(--accent) .95 .01 h);
      --text-dim:      oklch(from var(--accent) .79 .02 h);
      --text-mute:     oklch(from var(--accent) .63 .02 h);
      --warm:          oklch(from var(--accent) .77 .13 calc(h - 95));
      --warm-soft:     oklch(from var(--accent) .28 .05 calc(h - 95));
      --lime:          oklch(from var(--accent) .8 .14 calc(h - 38));
      --cover-bg: linear-gradient(140deg,
                   oklch(from var(--accent) .2 calc(c * .35) h) 0%,
                   oklch(from var(--accent) .27 calc(c * .5) h) 55%,
                   oklch(from var(--accent) .35 calc(c * .6) calc(h - 14)) 100%);
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
      --shadow-md: 0 6px 16px rgba(0, 0, 0, .5);
      --shadow-lg: 0 24px 56px rgba(0, 0, 0, .68);
    }
  }

  :root[data-theme='dark'] {
    --bg:            oklch(from var(--accent) .165 .016 h);
    --bg-tint:       oklch(from var(--accent) .19 .02 h);
    --surface:       oklch(from var(--accent) .205 .02 h);
    --surface-2:     oklch(from var(--accent) .23 .022 h);
    --surface-3:     oklch(from var(--accent) .265 .025 h);
    --border:        oklch(from var(--accent) .31 .026 h);
    --border-strong: oklch(from var(--accent) .41 .03 h);
    --text:          oklch(from var(--accent) .95 .01 h);
    --text-dim:      oklch(from var(--accent) .79 .02 h);
    --text-mute:     oklch(from var(--accent) .63 .02 h);
    --warm:          oklch(from var(--accent) .77 .13 calc(h - 95));
    --warm-soft:     oklch(from var(--accent) .28 .05 calc(h - 95));
    --lime:          oklch(from var(--accent) .8 .14 calc(h - 38));
    --cover-bg: linear-gradient(140deg,
                 oklch(from var(--accent) .2 calc(c * .35) h) 0%,
                 oklch(from var(--accent) .27 calc(c * .5) h) 55%,
                 oklch(from var(--accent) .35 calc(c * .6) calc(h - 14)) 100%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, .68);
  }
}

/* ============================================================================
   VISUAL STYLE — data-style on <html> reshapes the whole portal.
   Only shape, depth and emphasis change; the colour system is untouched.
   ========================================================================= */

:root[data-style='flat'] {
  --r-sm: 0px;
  --r:    0px;
  --r-lg: 0px;
  --r-pill: 0px;
  --bw: 1px;
  --tr: 0s;
  --card-bg: var(--surface);
  --panel-bg: var(--surface-2);
  --accent-grad: var(--accent);
  --accent-grad-hover: var(--accent-hi);
  --glow: none;
  --glow-strong: none;
  --bar-blur: none;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 0 0 1px var(--border-strong);
}

:root[data-style='flat'] .plan:hover,
:root[data-style='flat'] .style-card:hover,
:root[data-style='flat'] .chip:hover { transform: none; }

:root[data-style='flat'] .bar { backdrop-filter: none; background: var(--surface); }
:root[data-style='flat'] .cover,
:root[data-style='flat'] .login-art {

  background: color-mix(in srgb, var(--accent) 34%, #0a0f0c);
}
:root[data-style='flat'] .cover::after { display: none; }
:root[data-style='flat'] .btn,
:root[data-style='flat'] .badge,
:root[data-style='flat'] .chip { box-shadow: none; }

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Vazirmatn', 'Vazir', 'IRANSansX', 'Segoe UI', Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.85;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.45; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: .97rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.35em; }
li { margin-bottom: .35em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .88em; direction: ltr; unicode-bidi: embed;
  background: var(--surface-3); padding: .1em .4em; border-radius: 5px;
}
hr { border: 0; border-top: 1px solid var(--border); margin: 2.2rem 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }

.shield {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95em; line-height: 1; transform: translateY(.5px);
}

/* ---------------------------------------------------------------- shell */

.shell { display: flex; min-height: 100vh; }

.nav {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: var(--nav-w); background: var(--surface);
  border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 40;
  overflow-y: auto; overscroll-behavior: contain;
}

.nav-brand {
  padding: 1.15rem 1.2rem 1rem; border-bottom: 1px solid var(--border);
  display: flex; gap: .7rem; align-items: flex-start;
}
.nav-brand .glyph {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  background: var(--accent-grad); color: var(--on-accent);
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.brand-mark { display: block; }
.art-mark { color: #eafcff; margin-bottom: .7rem; opacity: .95; }
.nav-brand .t { font-weight: 700; font-size: .93rem; line-height: 1.5; }
.nav-brand .s { font-size: .74rem; color: var(--text-mute); }

.nav-scroll { flex: 1; padding: .85rem .7rem; }
.nav-group { font-size: .68rem; font-weight: 600; color: var(--text-mute);
  padding: .9rem .6rem .35rem; letter-spacing: .04em; }

.nav-link {
  display: flex; align-items: center; gap: .55rem;
  padding: .48rem .62rem; border-radius: var(--r-sm); margin-bottom: 1px;
  color: var(--text-dim); font-size: .855rem; cursor: pointer;
  border: 1px solid transparent; transition: background .14s, color .14s;
}
.nav-link:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.nav-link.on { background: var(--accent-soft); color: var(--accent-hi);
  border-color: var(--accent-border); font-weight: 600; }
.nav-link .ico { width: 18px; text-align: center; flex: none; opacity: .85; font-size: .95em; }
.nav-link .badge { margin-inline-start: auto; }

.nav-foot { border-top: 1px solid var(--border); padding: .8rem; }

.main { flex: 1; margin-inline-start: var(--nav-w); min-width: 0; }
.content { max-width: 1180px; margin: 0 auto; padding: 1.6rem 2rem 6rem; }

/* ---------------------------------------------------------------- top bar */

.bar {
  position: sticky; top: 0; z-index: 30; min-height: var(--bar-h);
  display: flex; align-items: center; gap: .9rem; padding: .5rem 1.3rem;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: var(--bar-blur);
  border-bottom: var(--bw) solid var(--border);
}
.bar .spacer { flex: 1; }

.burger { display: none; }

.chips { display: flex; gap: .55rem; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .3rem .8rem .3rem .5rem; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .78rem; color: var(--text-dim); cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s var(--ease);
}
.chip:hover { border-color: var(--border-strong); transform: translateY(-1px); text-decoration: none; }
.chip .n { font-weight: 700; font-size: .93rem; color: var(--text); font-variant-numeric: tabular-nums; }
.chip.done { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.chip.done .n { color: var(--ok); }
.chip.hot { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.chip.hot .n { color: var(--danger); }

.chip .ask {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: 50%; line-height: 1;
  font-weight: 700; font-size: .78rem;
  background: var(--accent-soft); color: var(--accent-hi); border: 1px solid var(--accent-border);
}
button.chip { font: inherit; font-size: .78rem; }

.qcard .answer {
  margin-top: .7rem; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--ok-soft); border: 1px solid var(--ok-border); font-size: .865rem;
}
.qcard .answer .lbl { font-size: .74rem; font-weight: 700; color: var(--ok); margin-bottom: .3rem; }

.ring { width: 26px; height: 26px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; }
.ring .bg { stroke: var(--border); }
.ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease); }
.chip.done .ring .fg { stroke: var(--ok); }
.chip.hot .ring .fg { stroke: var(--danger); }

.theme-seg { display: inline-flex; background: var(--surface-3); border: var(--bw) solid var(--border);
  border-radius: var(--r-pill); padding: 2px; gap: 2px; }
.theme-seg button {
  border: 0; background: none; font: inherit; font-size: .82rem; line-height: 1;
  padding: .32rem .5rem; border-radius: var(--r-pill); cursor: pointer; color: var(--text-mute);
}
.theme-seg button:hover { color: var(--text); }
.theme-seg button.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .48rem .95rem; border-radius: var(--r-sm); font: inherit; font-size: .855rem;
  font-weight: 500; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); cursor: pointer; white-space: nowrap;
  transition: background var(--tr), border-color var(--tr), transform .1s var(--ease), box-shadow var(--tr);
}
.btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--text-mute); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.primary { background: var(--accent-grad); border-color: var(--accent); color: var(--on-accent);
  font-weight: 600; box-shadow: var(--glow); }
.btn.primary:hover:not(:disabled) { background: var(--accent-grad-hover); border-color: var(--accent-hi); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.btn.danger { color: var(--danger); border-color: var(--danger-border); background: var(--danger-soft); }
.btn.danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.ok { color: var(--ok); border-color: var(--ok-border); background: var(--ok-soft); }
.btn.ok:hover:not(:disabled) { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn.sm { padding: .28rem .6rem; font-size: .78rem; }
.btn.icon { padding: .4rem; width: 33px; height: 33px; }
.btn.block { width: 100%; }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  padding: 0 .5rem; min-height: 20px; border-radius: var(--r-pill);
  font-size: .71rem; font-weight: 600; line-height: 1;
  background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border);
  white-space: nowrap; vertical-align: middle;
}

.badge.only {
  width: 20px; min-width: 20px; padding: 0;
}
.badge.accent { background: var(--accent-soft); color: var(--accent-hi); border-color: var(--accent-border); }
.badge.ok     { background: var(--ok-soft);     color: var(--ok);       border-color: var(--ok-border); }
.badge.warn   { background: var(--warn-soft);   color: var(--warn);     border-color: var(--warn-border); }
.badge.danger { background: var(--danger-soft); color: var(--danger);   border-color: var(--danger-border); }
.badge.info   { background: var(--info-soft);   color: var(--info);     border-color: var(--info-border); }
.badge.core   { background: var(--core-soft);   color: var(--core);     border-color: var(--core-border); }

/* ---------------------------------------------------------------- cards & callouts */

.card {
  background: var(--card-bg); border: var(--bw) solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.card.pad { padding: 1.25rem 1.4rem; }

.note-box {
  border-inline-start: 3px solid var(--accent); background: var(--surface-2);
  padding: .9rem 1.1rem; border-radius: var(--r-sm); margin: 1.1rem 0;
  color: var(--text-dim); font-size: .9rem;
}
.note-box strong { color: var(--text); }
.note-box.warn   { border-inline-start-color: var(--warn);   background: var(--warn-soft); }
.note-box.danger { border-inline-start-color: var(--danger); background: var(--danger-soft); }
.note-box.ok     { border-inline-start-color: var(--ok);     background: var(--ok-soft); }
.note-box.core   { border-inline-start-color: var(--core);   background: var(--core-soft); }
.note-box.accent { border-inline-start-color: var(--accent); background: var(--accent-soft); }
.note-box > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- sections */

.sec { scroll-margin-top: calc(var(--bar-h) + 14px); margin-bottom: 3.2rem; }
.sec-head { margin-bottom: 1.2rem; padding-bottom: .7rem; border-bottom: 2px solid var(--border); }
.sec-head h2 { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sec-head .kicker {
  font-size: .7rem; font-weight: 600; color: var(--accent);
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: .2rem;
}
.sec-head p { color: var(--text-dim); margin: .55rem 0 0; font-size: .92rem; }

/* ---------------------------------------------------------------- tables */

.tw { overflow-x: auto; border: var(--bw) solid var(--border); border-radius: var(--r);
      background: var(--card-bg); box-shadow: var(--shadow-sm); }

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-3); color: var(--text-dim);
  font-weight: 600; font-size: .77rem; text-align: right;
  padding: .62rem .8rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: .6rem .8rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctr { text-align: center; }
table.plain { background: var(--surface); }
table.plain thead th { position: static; }

tr.launch-row { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }

/* ---------------------------------------------------------------- feature rows */

.frow { cursor: pointer; transition: background .12s; }
.frow:hover { background: var(--surface-2); }
.frow .ftitle { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-weight: 500; }
.frow .marks { display: inline-flex; gap: .3rem; align-items: center; line-height: 1; }

.frow.removed { opacity: .44; }
.frow.removed .ftitle > .name { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.frow.removed:hover { opacity: .68; background: var(--surface-2); }

.frow.edited { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
.frow.edited:hover { background: var(--warn-soft); }
.frow.edited td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

.frow.added { background: color-mix(in srgb, var(--ok-soft) 55%, transparent); }
.frow.added:hover { background: var(--ok-soft); }
.frow.added td:first-child { box-shadow: inset 3px 0 0 var(--ok); }

.frow .yes { color: var(--ok); font-weight: 700; }
.frow .no  { color: var(--text-mute); }

.dot-note {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; box-sizing: border-box;
  border-radius: 50%; font-size: .68rem; font-weight: 700; line-height: 1;
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border);
  vertical-align: middle;
}
.dot-note > span { display: block; line-height: 1; transform: translateY(.5px); }
.dot-note.answered { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-border); }

.group-head td {
  background: var(--surface-3); font-weight: 700; font-size: .85rem;
  padding: .55rem .8rem; color: var(--text);
}
.col-feature { min-width: 340px; }
.search { max-width: 280px; }

.group-head .sum { float: left; font-weight: 500; color: var(--text-mute); font-size: .78rem; }

/* ---------------------------------------------------------------- plans */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 1rem; }

.plan {
  background: var(--card-bg); border: var(--bw) solid var(--border);
  border-radius: var(--r-lg); padding: 1.3rem 1.2rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: transform .18s var(--ease), box-shadow .18s;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plan .pname { font-size: 1.15rem; font-weight: 700; margin-bottom: .1rem; }
.plan .ptag { font-size: .78rem; color: var(--text-mute); margin-bottom: .9rem; }
.plan .price { font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1.25;
               font-variant-numeric: tabular-nums; }
.plan .unit { font-size: .74rem; color: var(--text-mute); margin-bottom: .9rem; }
.plan .rows { display: flex; flex-direction: column; gap: .32rem; font-size: .82rem;
              padding-top: .9rem; border-top: 1px dashed var(--border); }
.plan .rows div { display: flex; justify-content: space-between; gap: .5rem; }
.plan .rows span:first-child { color: var(--text-mute); }
.plan .rows span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- style chooser */

.styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 1rem; }

.style-card {
  background: var(--card-bg); border: var(--bw) solid var(--border); border-radius: var(--r-lg);
  padding: 1.15rem 1.15rem 1.25rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .9rem;
  transition: transform .18s var(--ease), box-shadow .18s, border-color .18s;
}
.style-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.style-card.picked { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft), var(--shadow-md); }

.style-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.style-name { font-size: 1.1rem; font-weight: 700; }
.style-tag { font-size: .78rem; color: var(--text-mute); }

.style-points { margin: 0; padding-inline-start: 1.1rem; font-size: .82rem; color: var(--text-dim); }
.style-points li { margin-bottom: .3rem; }

.mock {
  --mk-bg: var(--surface-2);
  --mk-card: var(--surface);
  --mk-line: var(--border);
  --mk-ink: var(--text);
  --mk-dim: var(--text-mute);
  --mk-accent: var(--accent);

  background: var(--mk-bg); border: 1px solid var(--mk-line);
  padding: .8rem; display: flex; flex-direction: column; gap: .6rem;
  color: var(--mk-ink); font-size: .72rem; user-select: none;
}

.mk-bar { display: flex; align-items: center; gap: .45rem; }
.mk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mk-accent); flex: none; }
.mk-title { font-weight: 700; font-size: .76rem; }
.mk-pill {
  margin-inline-start: auto; font-size: .64rem; padding: .1rem .45rem;
  background: var(--mk-card); border: 1px solid var(--mk-line); color: var(--mk-dim);
}

.mk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mk-tile {
  background: var(--mk-card); border: 1px solid var(--mk-line);
  padding: .5rem .6rem; display: flex; flex-direction: column; gap: .1rem;
}
.mk-k { font-size: .62rem; color: var(--mk-dim); }
.mk-v { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-tile.alert .mk-v { color: var(--warn); }

.mk-chart {
  height: 46px; display: flex; align-items: flex-end; gap: .28rem;
  background: var(--mk-card); border: 1px solid var(--mk-line); padding: .4rem;
}
.mk-chart span { flex: 1; background: var(--mk-accent); opacity: .85; }

.mk-row { display: flex; align-items: center; gap: .35rem; }
.mk-chip {
  font-size: .62rem; padding: .12rem .45rem; color: var(--mk-dim);
  background: var(--mk-card); border: 1px solid var(--mk-line);
}
.mk-btn {
  margin-inline-start: auto; font-size: .66rem; font-weight: 600;
  padding: .22rem .7rem; background: var(--mk-accent); color: var(--on-accent);
}

.mock-flat { border-radius: 0; border-width: 1.5px; }
.mock-flat .mk-tile,
.mock-flat .mk-chart,
.mock-flat .mk-pill,
.mock-flat .mk-chip,
.mock-flat .mk-btn { border-radius: 0; box-shadow: none; }
.mock-flat .mk-chart span { border-radius: 0; opacity: 1; }
.mock-flat .mk-dot { border-radius: 0; }
.mock-flat .mk-btn { border: 1.5px solid var(--mk-accent); }

.mock-normal { border-radius: var(--r); box-shadow: 0 2px 8px rgba(10,22,32,.10); }
.mock-normal .mk-tile,
.mock-normal .mk-chart { border-radius: 9px; box-shadow: 0 1px 3px rgba(10,22,32,.09); }
.mock-normal .mk-pill,
.mock-normal .mk-chip { border-radius: 999px; }
.mock-normal .mk-btn { border-radius: 8px; box-shadow: 0 1px 3px rgba(10,22,32,.14); }
.mock-normal .mk-chart span { border-radius: 3px 3px 0 0; }

.mock-modern {
  border-radius: 24px;
  box-shadow: 0 20px 44px rgba(10,22,32,.24), inset 0 1px 0 rgba(255,255,255,.10);
  background:
    radial-gradient(130% 100% at 84% -16%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 64%),
    linear-gradient(152deg, color-mix(in srgb, var(--surface-3) 88%, transparent), var(--surface-2));
  backdrop-filter: blur(14px) saturate(170%);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  padding: 1.05rem;
}
.mock-modern .mk-tile,
.mock-modern .mk-chart {
  border-radius: 16px; backdrop-filter: blur(10px) saturate(160%);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border-color: color-mix(in srgb, #fff 12%, var(--border));
  box-shadow: 0 6px 16px rgba(10,22,32,.16), inset 0 1px 0 rgba(255,255,255,.09);
}
.mock-modern .mk-pill,
.mock-modern .mk-chip {
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  border-color: color-mix(in srgb, #fff 12%, var(--border));
  backdrop-filter: blur(8px);
}
.mock-modern .mk-chart span {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: none;
}
.mock-modern .mk-btn {
  border-radius: 999px; padding: .3rem .9rem;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 22%, transparent),
              inset 0 1px 0 rgba(255,255,255,.18);
}
.mock-modern .mk-dot { box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent); }

.style-spec { display: flex; flex-direction: column; gap: .3rem; font-size: .76rem;
              padding-top: .7rem; border-top: 1px dashed var(--border); }
.style-spec div { display: flex; justify-content: space-between; gap: .5rem; }
.style-spec span:first-child { color: var(--text-mute); }
.style-spec span:last-child { font-weight: 600; }

.style-card { cursor: pointer; }

/* ---------------------------------------------------------------- palette picker */

.palette { margin-bottom: 1rem; }
.pal-head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
            flex-wrap: wrap; margin-bottom: 1rem; }
.pal-head p { max-width: 62ch; }

.pal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           gap: 1rem; align-items: start; }

.pal-pick { display: flex; flex-direction: column; gap: .45rem; cursor: pointer; }
.pal-label { font-size: .78rem; font-weight: 600; color: var(--text-dim); }

.pal-input { display: flex; align-items: center; gap: .6rem; }
.pal-input input[type=color] {
  width: 56px; height: 40px; padding: 0; flex: none; cursor: pointer;
  background: none; border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm);
}
.pal-input input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; }
.pal-input input[type=color]::-webkit-color-swatch { border: 0; border-radius: calc(var(--r-sm) - 3px); }
.pal-hex { font-size: .8rem; text-transform: uppercase; }

.pal-presets { display: flex; flex-direction: column; gap: .45rem; }
.pal-swatches { display: flex; gap: .4rem; flex-wrap: wrap; }
.pal-sw {
  display: flex; width: 46px; height: 30px; padding: 0; overflow: hidden; cursor: pointer;
  border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm); background: none;
  transition: transform .14s var(--ease), border-color .14s, box-shadow .14s;
}
.pal-sw i { flex: 1; display: block; }
.pal-sw:hover { transform: translateY(-2px); border-color: var(--text-mute); }
.pal-sw.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ---------------------------------------------------------------- live gallery */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.gallery .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.gallery .stat { padding: .75rem .85rem; }
.gallery .stat .v { font-size: 1.32rem; }

.demo-chart { width: 100%; height: 110px; overflow: visible; }
.demo-chart .grid { stroke: var(--border); stroke-width: 1; }
.demo-chart .area { fill: url(#areaFill); }
.demo-chart .line { fill: none; stroke: var(--accent); stroke-width: 2.5;
                    stroke-linejoin: round; stroke-linecap: round; }
.demo-chart .pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }

.demo-axis { display: flex; justify-content: space-between; margin-top: .4rem;
             font-size: .66rem; color: var(--text-mute); }

.donut-row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: .8rem; }
.demo-donut { width: 118px; height: 118px; flex: none; }
.demo-donut circle { fill: none; stroke-width: 4.4; }
.demo-donut .ring-bg { stroke: var(--surface-3); }
.demo-donut .seg { transform: rotate(-90deg); transform-origin: 50% 50%; stroke-linecap: butt; }
.demo-donut .seg.ok { stroke: var(--ok); }
.demo-donut .seg.warn { stroke: var(--warn); }
.demo-donut .seg.danger { stroke: var(--danger); }
.demo-donut .mid { text-anchor: middle; font-size: 7px; font-weight: 700; fill: var(--text); }

.donut-legend { list-style: none; margin: 0; padding: 0; font-size: .82rem; flex: 1; min-width: 150px; }
.donut-legend li { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.donut-legend i { width: 10px; height: 10px; border-radius: var(--r-pill); flex: none; }
.donut-legend i.ok { background: var(--ok); }
.donut-legend i.warn { background: var(--warn); }
.donut-legend i.danger { background: var(--danger); }
.donut-legend b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

:root[data-style='modern'] .demo-chart .line {
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--accent) 55%, transparent));
}
:root[data-style='flat'] .demo-chart .line { stroke-width: 2; }
:root[data-style='flat'] .demo-chart .area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
:root[data-style='flat'] .demo-donut .seg { stroke-width: 6; }

/* ---------------------------------------------------------------- stat strip */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.stat { background: var(--card-bg); border: var(--bw) solid var(--border); border-radius: var(--r);
        padding: .9rem 1rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--tr); }
.stat .v { font-size: 1.5rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat .k { font-size: .76rem; color: var(--text-mute); }
.stat.accent .v { color: var(--accent); }
.stat.ok     .v { color: var(--ok); }
.stat.warn   .v { color: var(--warn); }
.stat.danger .v { color: var(--danger); }
.stat.core   .v { color: var(--core); }

/* ---------------------------------------------------------------- modal */

.ovl {
  position: fixed; inset: 0; z-index: 100; display: flex;

  align-items: flex-start; justify-content: center;
  padding: 2vh 2vw; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(8, 16, 22, .58); backdrop-filter: blur(5px);
  animation: fade .16s var(--ease);
}
@keyframes fade { from { opacity: 0 } }

.modal {
  width: min(1020px, 100%); max-height: 96vh; margin: auto;
  display: flex; flex-direction: column;
  background: var(--card-bg); border: var(--bw) solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: pop .2s var(--ease);
}
.modal.wide { width: min(1160px, 100%); }
.modal.narrow { width: min(560px, 100%); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.985) } }

.modal-head {
  flex: none; padding: 1.05rem 1.35rem; border-bottom: 1px solid var(--border);
  display: flex; gap: .9rem; align-items: flex-start; background: var(--surface-2);
}
.modal-head .h { flex: 1; min-width: 0; }
.modal-head h3 { margin: 0 0 .35rem; font-size: 1.08rem; }
.modal-head .meta { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

.modal-body {
  padding: 1.25rem 1.35rem; overflow-y: auto; overscroll-behavior: contain;
  flex: 1 1 auto; min-height: 0;
}
.modal-foot {
  flex: none; padding: .85rem 1.35rem; border-top: 1px solid var(--border); background: var(--surface-2);
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}
.modal-foot .spacer { flex: 1; }

.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--border);
        margin: -.3rem -.2rem 1.2rem; padding: 0 .2rem; overflow-x: auto; }
.tab {
  padding: .5rem .85rem; font-size: .85rem; font-weight: 500; color: var(--text-dim);
  border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent;
  white-space: nowrap; font-family: inherit; display: inline-flex; align-items: center; gap: .4rem;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.scope { list-style: none; padding: 0; margin: 0; }
.scope li {
  display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: .4rem;
  background: var(--surface-2); font-size: .885rem; transition: background .13s, opacity .13s;
}
.scope li .tick { flex: none; margin-top: .38em; }
.scope li .txt { flex: 1; min-width: 0; }
.scope li .act { flex: none; display: flex; gap: .2rem; opacity: 0; transition: opacity .13s; }
.scope li:hover .act { opacity: 1; }
.scope li.gone { opacity: .42; }
.scope li.gone .txt { text-decoration: line-through; }
.scope li.fresh { background: var(--ok-soft); border-color: var(--ok-border); }
.scope li.picked { background: var(--info-soft); border-color: var(--info-border); }

.scope-in  li .tick { color: var(--ok); }
.scope-out li .tick { color: var(--text-mute); }

/* ---------------------------------------------------------------- forms */

label.fld { display: block; margin-bottom: .9rem; }
label.fld > .lbl { display: block; font-size: .8rem; font-weight: 600; color: var(--text-dim); margin-bottom: .3rem; }
label.fld > .hint { font-size: .75rem; color: var(--text-mute); margin-top: .25rem; }

input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
textarea, select {
  width: 100%; padding: .55rem .75rem; font: inherit; font-size: .885rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color .14s, box-shadow .14s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 92px; line-height: 1.8; }
input::placeholder, textarea::placeholder { color: var(--text-mute); opacity: 1; }

.check {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: .855rem; transition: border-color .14s, background .14s;
}
.check:hover { border-color: var(--border-strong); }
.check input[type=checkbox] {
  width: 17px; height: 17px; flex: none; margin: .28em 0 0; accent-color: var(--warn); cursor: pointer;
}
.check:has(input:checked) { background: var(--warn-soft); border-color: var(--warn-border); }

.seg { display: inline-flex; background: var(--surface-3); border: 1px solid var(--border);
       border-radius: var(--r-sm); padding: 2px; gap: 2px; flex-wrap: wrap; }
.seg button {
  border: 0; background: none; font: inherit; font-size: .8rem; padding: .3rem .7rem;
  border-radius: 6px; cursor: pointer; color: var(--text-dim); white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.seg button.on.ok     { color: var(--ok); }
.seg button.on.warn   { color: var(--warn); }
.seg button.on.danger { color: var(--danger); }

.files { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.file {
  display: flex; align-items: center; gap: .5rem; padding: .38rem .6rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: .81rem;
}
.file .clip { flex: none; }
.file .nm {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  unicode-bidi: plaintext; text-align: start;
}
.file .sz { color: var(--text-mute); font-size: .75rem; white-space: nowrap; }

.drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-sm);
  padding: .8rem; text-align: center; color: var(--text-mute); font-size: .82rem;
  background: var(--surface-2); position: relative; transition: border-color .14s, background .14s;
}
.drop:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hi); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop:has(input:disabled) { opacity: .5; pointer-events: none; }

/* ---------------------------------------------------------------- upload overlay */

.upload-ovl {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 1.2rem; background: rgba(8, 16, 22, .68); backdrop-filter: blur(6px);
  animation: fade .16s var(--ease);
}

.upload-card {
  width: min(430px, 100%); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 1.4rem 1.4rem 1.1rem;
  animation: pop .2s var(--ease);
}

.up-head { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; }
.up-head h4 { margin: 0 0 .2rem; }

.up-spin {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 3px solid var(--accent-soft); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.up-file {
  font-size: .85rem; font-weight: 600; margin-bottom: .5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  unicode-bidi: plaintext; text-align: start;
}

.up-bar {
  height: 9px; border-radius: var(--r-pill); background: var(--surface-3);
  overflow: hidden; border: 1px solid var(--border);
}
.up-fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  transition: width .18s linear;
}

.up-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .45rem; font-size: .8rem; font-variant-numeric: tabular-nums;
}
.up-actions { margin-top: 1.1rem; display: flex; justify-content: center; }
.up-actions .btn { min-width: 9rem; }

/* ---------------------------------------------------------------- note / requirement cards */

.qcard {
  border: var(--bw) solid var(--border); border-radius: var(--r); background: var(--card-bg);
  padding: .95rem 1.1rem; margin-bottom: .7rem; box-shadow: var(--shadow-sm);
  border-inline-start: 3px solid var(--border-strong);
  transition: box-shadow .15s, border-color .15s;
}
.qcard.blocker   { border-inline-start-color: var(--danger); }
.qcard.important { border-inline-start-color: var(--warn); }
.qcard.deferred  { border-inline-start-color: var(--info); }
.qcard.settled   { border-inline-start-color: var(--ok); background: color-mix(in srgb, var(--ok-soft) 38%, var(--surface)); }
.qcard.flagged   { border-inline-start-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 38%, var(--surface)); }
.qcard.dim { opacity: .55; }

.qcard .top { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin-bottom: .35rem; }
.qcard .code { font-weight: 700; font-size: .82rem; color: var(--text-dim);
               font-family: ui-monospace, Consolas, monospace; direction: ltr; }
.qcard h4 { margin: 0; flex: 1; min-width: 0; font-size: .95rem; }
.qcard .body { font-size: .865rem; color: var(--text-dim); }

/* ---------------------------------------------------------------- login */

.login {
  min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr;
  background: var(--bg);
}

.login-art {
  position: relative; overflow: hidden; isolation: isolate; color: var(--cover-ink);
  background: var(--cover-bg);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem;
  padding: clamp(1.8rem, 3.2vw, 3rem);
}
.la-glow { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.la-glow.g1 {
  width: 560px; height: 560px; top: -200px; inset-inline-end: -160px; opacity: .5;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 75%, #fff), transparent 66%);
}
.la-glow.g2 {
  width: 520px; height: 520px; bottom: -240px; inset-inline-start: -140px; opacity: .32;
  background: radial-gradient(circle, var(--warm), transparent 64%);
}
.la-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 55% 45%, #000 15%, transparent 72%);
}

.la-top { display: flex; align-items: center; gap: .8rem; }
.la-brand {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #fff;
  backdrop-filter: blur(8px);
}
.la-name { font-weight: 800; font-size: 1.02rem; color: #fff; line-height: 1.5; }
.la-sub { font-size: .78rem; opacity: .75; }

.la-stage { position: relative; flex: 1; display: grid; place-items: center; min-height: 480px; }

.phone {
  width: 268px; border-radius: 36px; padding: 14px 12px 12px;
  background: var(--surface); color: var(--text);
  border: 7px solid oklch(.16 .01 160);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14);
  rotate: -4deg; animation: floaty 8s ease-in-out infinite;
  font-size: .7rem; line-height: 1.6; user-select: none;
}
.ph-status { display: flex; justify-content: space-between; align-items: center; font-size: .62rem; font-weight: 700; padding: 0 6px 6px; }
.ph-sig { display: inline-flex; gap: 3px; align-items: center; direction: ltr; }
.ph-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; }
.ph-hi { font-weight: 800; font-size: .8rem; }
.ph-addr { font-size: .6rem; color: var(--text-mute); display: flex; align-items: center; gap: 3px; }
.ph-bell { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-dim); }
.ph-search {
  display: flex; align-items: center; gap: 6px; background: var(--surface-3); border-radius: 12px;
  padding: 7px 10px; color: var(--text-mute); font-size: .62rem; margin-bottom: 8px;
}
.ph-cats { display: flex; gap: 5px; margin-bottom: 8px; }
.ph-cats span {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: .6rem; color: var(--text-dim);
}
.ph-cats span.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.ph-banner {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 14px; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--warm)));
  color: var(--on-accent);
}
.ph-b1 { font-weight: 800; font-size: .68rem; }
.ph-b2 { font-size: .58rem; opacity: .85; }
.ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ph-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 6px; }
.ph-img {
  height: 50px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 5px;
  background: #eef3ef; color: #3a5a48;
  background: oklch(.95 .045 var(--h)); color: oklch(.52 .14 var(--h));
}
.ph-pn { font-weight: 700; font-size: .62rem; }
.ph-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.ph-pr { font-size: .58rem; color: var(--text-dim); }
.ph-add { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.ph-cart {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px;
  background: var(--text); color: var(--surface); font-size: .64rem; font-weight: 700;
}
.ph-go { margin-inline-start: auto; background: var(--accent); color: var(--on-accent); padding: 2px 9px; border-radius: 999px; font-size: .6rem; }

.float {
  position: absolute; display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .85rem; min-width: 196px;
  border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #fff;
  backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .55);
  font-size: .74rem; line-height: 1.6; animation: floaty 7s ease-in-out infinite;
}
.float .fi { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.float .fi.ok { background: color-mix(in srgb, var(--ok) 60%, transparent); }
.float .ft { font-weight: 800; }
.float .fd { font-size: .66rem; opacity: .82; }
.fbar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .22); margin-top: 6px; overflow: hidden; }
.fbar i { display: block; height: 100%; width: 60%; background: #fff; border-radius: inherit; animation: progress 6s ease-in-out infinite alternate; }
.float.f1 { top: 9%; inset-inline-start: 3%; animation-delay: -1.5s; }
.float.f2 { bottom: 12%; inset-inline-start: 0; animation-delay: -4s; }
.float.f3 { top: 42%; inset-inline-end: 0; animation-delay: -2.5s; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes progress { from { width: 38%; } to { width: 84%; } }

.la-facts { display: flex; gap: .7rem; }
.la-facts div {
  flex: 1; padding: .7rem .9rem; border-radius: 16px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px);
}
.la-facts b { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.la-facts span { font-size: .72rem; opacity: .8; }

.login-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
@media (max-width: 1020px) { .login { grid-template-columns: 1fr; } .login-art { display: none; } }
.login-card { width: min(400px, 100%); animation: rise .5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) } }

.login-card .mark {
  width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center;
  background: var(--accent-grad); color: var(--on-accent);
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--accent) 75%, transparent);
  margin-bottom: 1.3rem;
}
.login-card h1 { font-size: 1.55rem; margin-bottom: .35rem; }
.login-card .sub { color: var(--text-mute); font-size: .87rem; margin-bottom: 1.9rem; line-height: 1.85; }

.in-wrap { position: relative; display: block; }
.in-wrap .in-ico {
  position: absolute; inset-inline-start: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--text-mute); display: grid; pointer-events: none;
}
:root .login .in-wrap input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]) {
  padding-inline-start: 2.65rem; height: 3.05rem; border-radius: var(--r);
}
:root .login .pw-wrap input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]) { padding-inline-end: 2.9rem; }
.pw-eye {
  position: absolute; inset-inline-end: .45rem; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; color: var(--text-mute); padding: .4rem; border-radius: 9px; display: grid;
}
.pw-eye:hover { color: var(--accent); background: var(--surface-3); }
.pw-eye .eye-off { display: none; }
.pw-eye.shown .eye-on { display: none; }
.pw-eye.shown .eye-off { display: grid; }

.login-go { height: 3.05rem; margin-top: .7rem; font-size: .95rem; gap: .55rem; }
.login-note { margin-top: 1.7rem; text-align: center; line-height: 2; }

.login-err {
  display: flex; gap: .5rem; align-items: center;
  background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger);
  padding: .65rem .85rem; border-radius: var(--r-sm); font-size: .85rem; margin-bottom: 1.1rem;
  animation: shake .35s;
}
@keyframes shake { 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }

/* ---------------------------------------------------------------- misc */

#blazor-error-ui {
  display: none; position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 300;
  max-width: 460px; margin-inline: auto; padding: .75rem 1rem;
  border-radius: var(--r); background: var(--danger-soft); color: var(--danger);
  border: 1px solid var(--danger-border); box-shadow: var(--shadow-lg); font-size: .88rem;
}
#blazor-error-ui .reload { font-weight: 700; margin-inline-start: .4rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: left; opacity: .7; }

.empty { text-align: center; padding: 2.6rem 1rem; color: var(--text-mute); }
.empty .big { font-size: 2.2rem; margin-bottom: .5rem; opacity: .55; }

.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .spacer { flex: 1; }

.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-dim);
           align-items: center; }
.legend > span { display: inline-flex; align-items: center; gap: .4rem; line-height: 1; }

.cover {
  border-radius: var(--r-lg); padding: 2.2rem 2.3rem; margin-bottom: 2.2rem; color: var(--cover-ink);
  background: var(--cover-bg);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.cover::after {
  content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  top: -150px; inset-inline-end: -110px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.16), transparent 63%);
}
.cover > * { position: relative; z-index: 1; }
.cover h1 { color: #fff; font-size: 1.9rem; margin-bottom: .3rem; }
.cover .sub { opacity: .88; font-size: 1rem; margin-bottom: 1.5rem; }
.cover .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; }
.cover .fact { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
               border-radius: var(--r); padding: .7rem .9rem; backdrop-filter: blur(4px); }
.cover .fact .k { font-size: .73rem; opacity: .75; }
.cover .fact .v { font-weight: 700; font-size: .95rem; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

:is(.two, .gallery, .plans, .styles, .evidence, .ai-hero, .journey, .stats) > * { min-width: 0; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } }

.mb0 { margin-bottom: 0; }
.mt0 { margin-top: 0; }
.dim { color: var(--text-mute); }
.small { font-size: .82rem; }

/* ---------------------------------------------------------------- cover art */

.cover { isolation: isolate; }
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; pointer-events: none; }
.cover-kicker {
  display: inline-block; font-size: .74rem; padding: .2rem .7rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); margin-bottom: .8rem;
}
.cv-route { animation: dash 22s linear infinite; }
.cv-pulse { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dash { to { stroke-dashoffset: -220; } }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .45; } }

.lg-route { animation: dash 26s linear infinite; }
.lg-route.r2 { animation-duration: 32s; }
.lg-route.r3 { animation-duration: 38s; animation-direction: reverse; }

.backdrop { display: none; }

/* ---------------------------------------------------------------- order journey */

.journey {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem;
  margin: 1.4rem 0 .4rem; counter-reset: j;
}
.jstep {
  position: relative; background: var(--card-bg); border: var(--bw) solid var(--border);
  border-radius: var(--r); padding: .8rem .7rem .75rem; box-shadow: var(--shadow-sm);
  text-align: center;
}
.jstep:not(:last-child)::after {
  content: '‹'; position: absolute; inset-inline-end: -.52rem; top: 50%; transform: translateY(-50%);
  color: var(--text-mute); font-weight: 700; z-index: 1;
}
.jico { font-size: 1.4rem; line-height: 1.2; margin-bottom: .25rem; }
.jt { font-weight: 700; font-size: .86rem; }
.jd { font-size: .72rem; color: var(--text-mute); line-height: 1.6; }

/* ---------------------------------------------------------------- plans */

.plan.picked { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft), var(--shadow-md); }
.plan .phi { list-style: none; padding: 0; margin: 0 0 .9rem; font-size: .8rem; color: var(--text-dim); }
.plan .phi li { display: flex; gap: .4rem; margin-bottom: .25rem; }
.plan .phi li::before { content: '✓'; color: var(--ok); font-weight: 700; }
.plan .plan-pick { margin-top: 1rem; }
.plan .rows { flex: 1; }

/* ---------------------------------------------------------------- architecture diagram */

.arch-card { overflow-x: auto; }
.arch { width: 100%; min-width: 760px; height: auto; display: block; font-family: inherit; }
.ar-cap { text-anchor: middle; font-size: 13px; font-weight: 600; fill: var(--text-mute); }
.ar-cap.strong { fill: var(--accent-hi); font-weight: 700; }
.ar-t { text-anchor: middle; font-size: 12.5px; font-weight: 600; fill: var(--text); }
.ar-t.sm { font-size: 11.5px; }
.ar-s { text-anchor: middle; font-size: 10px; fill: var(--text-mute); }
.ar-client { fill: var(--surface-2); stroke: var(--border-strong); }
.ar-app { fill: color-mix(in srgb, var(--accent-soft) 60%, transparent); stroke: var(--accent-border); stroke-width: 1.5; }
.ar-mod { fill: var(--surface); stroke: var(--accent-border); }
.ar-mod.ai { fill: var(--core-soft); stroke: var(--core-border); }
.ar-db { fill: var(--warm-soft); stroke: color-mix(in srgb, var(--warm) 45%, transparent); }
.ar-ext { fill: var(--surface-2); stroke: var(--border); stroke-dasharray: 5 5; }
.ar-extitem { fill: var(--surface); stroke: var(--border); }
.ar-line { stroke: var(--text-mute); stroke-width: 1.5; fill: none; }
.ar-head { fill: var(--text-mute); }
.arch-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .6rem; }
.arch-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.ar-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid; }
.ar-dot.mod { background: var(--surface); border-color: var(--accent-border); }
.ar-dot.ai  { background: var(--core-soft); border-color: var(--core-border); }
.ar-dot.db  { background: var(--warm-soft); border-color: var(--warm); }

tr.hl td { background: var(--accent-soft); }

/* ---------------------------------------------------------------- FAQ */

.faq { display: flex; flex-direction: column; gap: .5rem; }
.faq details { padding: 0; }
.faq summary {
  padding: .75rem 1rem; cursor: pointer; font-weight: 600; font-size: .9rem; list-style: none;
  display: flex; gap: .6rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '؟'; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-hi); font-size: .8rem;
}
.faq details[open] summary { color: var(--accent-hi); }
.faq details > div { padding: 0 1rem 1rem 1rem; padding-inline-start: 2.9rem; color: var(--text-dim); line-height: 2; }

/* ---------------------------------------------------------------- AI section */

.ai-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .8rem; }
.ai-moment {
  display: flex; gap: .8rem; align-items: flex-start; background: var(--card-bg);
  border: var(--bw) solid var(--border); border-radius: var(--r); padding: .9rem 1rem; box-shadow: var(--shadow-sm);
}
.ai-ico {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 1.25rem; background: var(--core-soft); border: 1px solid var(--core-border);
}
.ai-t { font-weight: 700; font-size: .9rem; margin-bottom: .15rem; }
.ai-b { font-size: .82rem; color: var(--text-dim); line-height: 1.85; }

.evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.ev {
  background: var(--card-bg); border: var(--bw) solid var(--border); border-radius: var(--r);
  padding: 1rem 1.05rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .3rem;
}
.ev-n { font-size: 1.7rem; font-weight: 800; color: var(--accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
.ev-w { font-size: .83rem; color: var(--text); line-height: 1.8; flex: 1; }
.ev-s { font-size: .7rem; color: var(--text-mute); border-top: 1px dashed var(--border); padding-top: .4rem; }

/* ---------------------------------------------------------------- scope guard */

.guard-ovl { z-index: 160; }
.guard { width: min(560px, 100%); }
.guard-art {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--surface-2);
  border-bottom: 1px solid var(--border); display: grid; place-items: center; padding: 1rem 1rem .4rem;
}
.guard-svg { width: 220px; height: 120px; }
.g-stack { animation: wobble 3.2s var(--ease) infinite; transform-origin: 110px 72px; }
.g-line { animation: dash 12s linear infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(0) } 30% { transform: rotate(-2.2deg) } 60% { transform: rotate(1.4deg) } }
.guard-body .kicker {
  font-size: .72rem; font-weight: 700; color: var(--accent); letter-spacing: .06em; margin-bottom: .2rem;
}
.guard-body h3 { margin-bottom: .6rem; }
.guard-body p { font-size: .9rem; color: var(--text-dim); }
.guard-tips { margin-bottom: 0; color: var(--text-dim); }

.guard-meter { margin-top: .4rem; }
.gm-head { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .82rem; margin-bottom: .45rem; }
.gm-count { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.gm-track {
  position: relative; height: 14px; border-radius: var(--r-pill); background: var(--surface-3);
  border: 1px solid var(--border); overflow: visible;
}
.gm-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width .5s var(--ease);
}
.gm-min {
  position: absolute; top: -5px; bottom: -5px; width: 3px; margin-inline-start: -1.5px;
  background: var(--warn); border-radius: 2px; box-shadow: 0 0 0 2px var(--surface);
}
.gm-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: var(--text-mute); margin-top: .5rem; }
.gm-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.gm-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.gm-dot.fill { background: var(--accent); }
.gm-dot.min { background: var(--warn); border-radius: 2px; width: 4px; height: 12px; }

.scope-card { margin-bottom: 1.4rem; }

@media (max-width: 900px) {
  .journey { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jstep:nth-child(4)::after { display: none; }
}
@media (max-width: 560px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jstep::after { display: none; }
}

/* ---------------------------------------------------------------- icons */

.ic { display: inline-block; vertical-align: -.2em; flex: none; }
.nav-link .ico { display: grid; place-items: center; width: 20px; opacity: .9; }
.nav-link .ico .ic, .btn .ic, .badge .ic, .tab .ic, .chip .ic { vertical-align: 0; }
.badge .ic { margin-inline-end: 1px; }
.glyph, .login-card .mark, .la-brand { --glyph-cut: color-mix(in srgb, var(--accent) 62%, #000); }
.frow .yes, .yes { color: var(--ok); display: inline-grid; }
.hic { display: flex; align-items: center; gap: .45rem; }
.hic.ok { color: var(--ok); }
.hic.warn { color: var(--warn); }
.scope li .tick { display: grid; }
.empty .big { display: grid; place-items: center; }

.theme-seg button { display: inline-flex; align-items: center; gap: .3rem; }
@media (max-width: 680px) { .theme-seg button span { display: none; } }

.who { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-hi);
}
.who-t { flex: 1; min-width: 0; line-height: 1.4; }
.who-n { font-size: .82rem; font-weight: 600; }
.who-r { font-size: .71rem; color: var(--text-mute); }

/* ---------------------------------------------------------------- cover art */

.cover-art .cv-route {
  fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2.5;
  stroke-dasharray: 2 9; stroke-linecap: round; animation: dash 22s linear infinite;
}
.cover-art .cv-stop { fill: rgba(255, 255, 255, .85); }
.cover-art .cv-basket { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.cover-art .cv-basket .thin { stroke-opacity: .55; }

/* ---------------------------------------------------------------- journey icons */

.jico {
  width: 42px; height: 42px; margin: 0 auto .4rem; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 1rem;
  background: var(--accent-soft); color: var(--accent-hi);
}
.ai-ico { color: var(--core); }

/* ---------------------------------------------------------------- grocery section */

.gro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: .8rem; }
.gro {
  background: var(--card-bg); border: var(--bw) solid var(--border); border-radius: var(--r);
  padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .35rem;
}
.gro-ico {
  width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: .2rem;
  background: var(--accent-soft); color: var(--accent-hi);
}
.gro-q { font-weight: 700; font-size: .92rem; }
.gro-a { font-size: .82rem; color: var(--text-dim); line-height: 1.9; flex: 1; }

.promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .7rem; }
.pr {
  display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--r);
  border: var(--bw) dashed var(--accent-border);
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}
.pr-ico {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
}
.pr-t { font-weight: 700; font-size: .88rem; }
.pr-d { font-size: .8rem; color: var(--text-dim); line-height: 1.85; }

/* ---------------------------------------------------------------- principle cards */

.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.pcard h4 { margin: .55rem 0 .35rem; }
.pc-ico {
  width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--core-soft); color: var(--core);
}

:root[data-style='modern'] :is(.gro, .pcard) { position: relative; background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(var(--glass-blur)) saturate(150%); }
:root[data-style='modern'] .gro:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
:root[data-style='modern'] .gro { transition: transform .45s var(--ease-spring), box-shadow .3s var(--ease-soft); }
:root[data-style='modern'] .pr-ico, :root[data-style='modern'] .ph-add { background: var(--grad-brand); }
:root[data-style='modern'] .nav-brand .glyph { --glyph-cut: color-mix(in srgb, var(--accent) 60%, #000); }
:root[data-style='flat'] .pr { border-style: solid; }
:root[data-style='flat'] .phone, :root[data-style='flat'] .float { animation: none; }

/* ============================================================================
   RESPONSIVE — kept last on purpose: these rules override base declarations
   that appear earlier in the file, and equal-specificity ties go to the later one.
   ========================================================================= */

/* ---------------------------------------------------------------- tablet & below */

@media (max-width: 1080px) {
  :root { --nav-w: 0px; }

  body { overflow-x: hidden; }

  .nav {
    width: min(300px, 86vw); box-shadow: var(--shadow-lg);
    transform: translateX(100%); visibility: hidden;
    transition: transform .25s var(--ease), visibility .25s;
  }
  .nav.open { transform: none; visibility: visible; }

  .nav-backdrop {
    position: fixed; inset: 0; z-index: 39;
    background: rgba(8, 16, 22, .5); backdrop-filter: blur(2px);
    animation: fade .18s var(--ease); border: 0; padding: 0;
  }
  .nav-close { display: inline-flex !important; }

  .main { margin-inline-start: 0; }
  .content { padding: 1.1rem 1rem 5rem; }
}

.nav-close { display: none; }

/* ---------------------------------------------------------------- phone */

@media (max-width: 680px) {
  body { font-size: 14.5px; line-height: 1.8; }

  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.18rem; }
  h3 { font-size: 1.02rem; }

  .content { padding: .9rem .7rem 4rem; }
  .sec { margin-bottom: 2.3rem; }

  .bar { min-height: auto; padding: .5rem .7rem; gap: .5rem; flex-wrap: wrap; }
  .chips { order: 3; width: 100%; gap: .4rem; }
  .chip { flex: 1 1 45%; justify-content: flex-start; font-size: .74rem; padding: .3rem .55rem; }
  .chip .badge { display: none; }
  .chip .n { font-size: .88rem; }
  .theme-seg button { padding: .3rem .5rem; font-size: .74rem; }
  .bar .btn.sm { font-size: .74rem; padding: .28rem .5rem; }

  .cover { padding: 1.4rem 1.1rem; border-radius: var(--r); }
  .cover h1 { font-size: 1.35rem; }
  .cover .sub { font-size: .9rem; }
  .cover .facts { grid-template-columns: 1fr; gap: .55rem; }

  .stats { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .stat { padding: .7rem .8rem; }
  .stat .v { font-size: 1.25rem; }

  .plans { grid-template-columns: 1fr; }
  .plan { padding: 1.1rem 1rem; }

  .two { grid-template-columns: 1fr; }
  .card.pad { padding: 1rem 1.05rem; }

  table { font-size: .8rem; }
  thead th, tbody td { padding: .5rem .55rem; }
  .col-feature { min-width: 210px; }
  .tw { -webkit-overflow-scrolling: touch; }

  .toolbar { gap: .5rem; }
  .toolbar > * { flex: 1 1 100%; }
  .search { max-width: none; }
  .seg { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .seg button { flex: 0 0 auto; }
  .legend { font-size: .74rem; gap: .7rem; }

  .ovl { padding: 0; }
  .modal, .modal.wide, .modal.narrow {
    width: 100%; max-width: 100%; border-radius: 0; border: 0; margin: 0;

    max-height: 100vh; min-height: 100vh;
    max-height: 100dvh; min-height: 100dvh;
  }
  .modal-head { padding: .85rem .9rem; }
  .modal-body { padding: 1rem .9rem; }
  .modal-foot { padding: .75rem .9rem; }
  .modal-head h3 { font-size: 1rem; }
  .modal-foot .btn { flex: 1 1 auto; }
  .tabs { margin: -.3rem -.9rem 1rem; padding: 0 .9rem; }

  .qcard { padding: .8rem .85rem; }
  .qcard h4 { font-size: .9rem; }
  .scope li { padding: .45rem .55rem; font-size: .84rem; }
  .scope li .act { opacity: 1; }

  .frow .ftitle { font-size: .84rem; }
  .login-card { width: 100%; }
  .login-form { padding: 2rem 1.1rem; }
}

@media (max-width: 1080px) { .burger { display: inline-flex; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .nav, .bar, .toolbar, .btn { display: none !important; }
  .main { margin: 0; }
  .card, .tw { box-shadow: none; }
}

/* ============================================================================
   MODERN — "fresh glass"
   Not a re-tint of the standard look but a different product feel: a living backdrop of
   blurred ribbons in the brand's produce colours, every surface frosted and tinted, a
   floating icon rail instead of a sidebar, a floating top bar, a different typeface,
   brand-gradient active states and springy motion. Kept last so it wins every tie.
   ========================================================================= */

:root[data-style='modern'] {
  --r-sm: 14px;
  --r:    22px;
  --r-lg: 30px;
  --r-pill: 999px;
  --tr: .3s;
  --ease-soft: cubic-bezier(.22, .9, .28, 1);
  --ease-spring: linear(0, .4 12%, .86 24%, 1.03 36%, 1.01 52%, 1);

  --sky-1: #edf8f0;
  --sky-2: #fff3e3;
  --wave-1: #bdebcf;
  --wave-2: #dcf3b4;
  --wave-3: #b3e3dc;
  --wave-4: #ffdcb4;
  --wave-glow: color-mix(in srgb, var(--accent) 34%, transparent);
  --wave-edge: rgba(255, 255, 255, .7);

  --glass:        rgba(255, 255, 255, .56);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-edge:   rgba(255, 255, 255, .85);
  --glass-shine:  rgba(255, 255, 255, .95);
  --glass-blur:   22px;
  --field:        rgba(255, 255, 255, .62);

  --dock:       color-mix(in srgb, var(--accent) 22%, rgba(6, 26, 16, .86));
  --dock-edge:  rgba(255, 255, 255, .12);
  --dock-text:  #effff5;
  --dock-muted: #a9d6bb;

  --grad-brand: linear-gradient(135deg,
                 color-mix(in oklab, var(--accent) 78%, var(--lime)),
                 color-mix(in oklab, var(--accent) 86%, #0b3d57));
  --shadow-brand: 0 16px 36px -16px color-mix(in srgb, var(--accent) 75%, transparent);

  --shadow-sm: 0 18px 44px -30px rgba(14, 60, 36, .45);
  --shadow-md: 0 26px 56px -30px rgba(14, 60, 36, .5);
  --shadow-lg: 0 34px 80px -28px rgba(14, 50, 30, .5);

  --bg:        #edf6f0;
  --surface-2: rgba(255, 255, 255, .5);
  --surface-3: rgba(20, 70, 44, .06);
  --border:    rgba(20, 70, 44, .12);
  --border-strong: rgba(20, 70, 44, .24);
  --card-bg:   var(--glass);
  --panel-bg:  rgba(255, 255, 255, .42);
  --accent-grad: var(--grad-brand);
  --accent-grad-hover: var(--grad-brand);
  --glow: var(--shadow-brand);
  --glow-strong: var(--shadow-brand);
  --bar-blur: blur(26px) saturate(170%);
}

@media (prefers-color-scheme: dark) {
  :root[data-style='modern']:not([data-theme='light']) {
    --sky-1: #06110b;
    --sky-2: #0c1d14;
    --wave-1: #0e3b25;
    --wave-2: #23461a;
    --wave-3: #0a3434;
    --wave-4: #3b2811;
    --wave-glow: color-mix(in srgb, var(--accent) 30%, transparent);
    --wave-edge: rgba(255, 255, 255, .07);
    --glass:        rgba(14, 32, 23, .58);
    --glass-strong: rgba(16, 36, 26, .88);
    --glass-edge:   rgba(255, 255, 255, .1);
    --glass-shine:  rgba(255, 255, 255, .18);
    --field:        rgba(255, 255, 255, .06);
    --dock: color-mix(in srgb, var(--accent) 12%, rgba(5, 18, 11, .8));
    --shadow-sm: 0 24px 60px -34px rgba(0, 0, 0, .95);
    --shadow-md: 0 30px 70px -32px rgba(0, 0, 0, .95);
    --shadow-lg: 0 34px 80px -30px rgba(0, 0, 0, .9);
    --bg: #07120c;
    --surface-2: rgba(255, 255, 255, .04);
    --surface-3: rgba(255, 255, 255, .07);
    --border: rgba(255, 255, 255, .1);
    --border-strong: rgba(255, 255, 255, .2);
    --panel-bg: rgba(255, 255, 255, .04);
    --grad-brand: linear-gradient(135deg,
                   color-mix(in oklab, var(--accent) 58%, #1d5a12),
                   color-mix(in oklab, var(--accent) 50%, #04363c));
    --shadow-brand: 0 16px 36px -18px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}
:root[data-style='modern'][data-theme='dark'] {
  --sky-1: #06110b; --sky-2: #0c1d14;
  --wave-1: #0e3b25; --wave-2: #23461a; --wave-3: #0a3434; --wave-4: #3b2811;
  --wave-glow: color-mix(in srgb, var(--accent) 30%, transparent);
  --wave-edge: rgba(255, 255, 255, .07);
  --glass: rgba(14, 32, 23, .58); --glass-strong: rgba(16, 36, 26, .88);
  --glass-edge: rgba(255, 255, 255, .1); --glass-shine: rgba(255, 255, 255, .18);
  --field: rgba(255, 255, 255, .06);
  --dock: color-mix(in srgb, var(--accent) 12%, rgba(5, 18, 11, .8));
  --shadow-sm: 0 24px 60px -34px rgba(0, 0, 0, .95);
  --shadow-md: 0 30px 70px -32px rgba(0, 0, 0, .95);
  --shadow-lg: 0 34px 80px -30px rgba(0, 0, 0, .9);
  --bg: #07120c;
  --surface-2: rgba(255, 255, 255, .04); --surface-3: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .1); --border-strong: rgba(255, 255, 255, .2);
  --panel-bg: rgba(255, 255, 255, .04);
  --grad-brand: linear-gradient(135deg,
           color-mix(in oklab, var(--accent) 58%, #1d5a12),
           color-mix(in oklab, var(--accent) 50%, #04363c));
  --shadow-brand: 0 16px 36px -18px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---------------------------------------------------------------- canvas */

:root[data-style='modern'] body {
  font-family: 'Estedad', 'Vazirmatn', system-ui, sans-serif;
  font-size: 15px; line-height: 1.8;

  background: linear-gradient(160deg, var(--sky-1), var(--sky-2));
  background-attachment: fixed;
}

:root[data-style='modern'] .backdrop {
  display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  transform: translateZ(0); will-change: transform;
}
:root[data-style='modern'] .backdrop svg { width: 100%; height: 100%; display: block; }
.bd-sky-1 { stop-color: var(--sky-1); }
.bd-sky-2 { stop-color: var(--sky-2); }
.bd-glow  { stop-color: var(--wave-glow); }
.bd-w1 { stop-color: var(--wave-1); }
.bd-w2 { stop-color: var(--wave-2); }
.bd-w3 { stop-color: var(--wave-3); }
.bd-w4 { stop-color: var(--wave-4); }
.bd-edge { stroke: var(--wave-edge); fill: none; }
.bd-drift { animation: drift 60s ease-in-out infinite alternate; transform-origin: center; }
@keyframes drift { to { transform: translate3d(-40px, 18px, 0) scale(1.03); } }

:root[data-style='modern'] h1,
:root[data-style='modern'] h2,
:root[data-style='modern'] h3 { letter-spacing: -.018em; }
:root[data-style='modern'] h2 { font-size: 1.55rem; font-weight: 800; }
:root[data-style='modern'] h3 { font-size: 1.15rem; font-weight: 700; }

/* ---------------------------------------------------------------- glass surfaces */

:root[data-style='modern'] :is(.card, .plan, .stat, .qcard, .tw, .style-card, .jstep, .ai-moment, .ev, .upload-card) {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}

:root[data-style='modern'] :is(.card, .plan, .stat, .style-card, .jstep, .ai-moment, .ev, .tw, .modal)::before {
  content: ''; position: absolute; inset-inline: 1.5rem; top: -1px; height: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--glass-shine), transparent);
}

:root[data-style='modern'] :is(.plan, .style-card, .card, .jstep, .ev):hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
:root[data-style='modern'] :is(.plan, .style-card, .card, .jstep, .ev, .stat) {
  transition: transform .45s var(--ease-spring), box-shadow .3s var(--ease-soft);
}
:root[data-style='modern'] details.card:hover { transform: none; }

:root[data-style='modern'] :is(.note-box, .drop, .check, .file, .scope li) {
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  border-radius: var(--r-sm);
}
:root[data-style='modern'] .note-box {
  border: 1px solid var(--glass-edge);
  border-inline-start: 4px solid var(--accent);
  padding: 1rem 1.2rem;
}
:root[data-style='modern'] .note-box.warn   { background: color-mix(in srgb, var(--warn) 11%, transparent);   border-inline-start-color: var(--warn); }
:root[data-style='modern'] .note-box.danger { background: color-mix(in srgb, var(--danger) 11%, transparent); border-inline-start-color: var(--danger); }
:root[data-style='modern'] .note-box.ok     { background: color-mix(in srgb, var(--ok) 11%, transparent);     border-inline-start-color: var(--ok); }
:root[data-style='modern'] .note-box.core   { background: color-mix(in srgb, var(--core) 11%, transparent);   border-inline-start-color: var(--core); }
:root[data-style='modern'] .note-box.accent { background: color-mix(in srgb, var(--accent) 12%, transparent); }

:root[data-style='modern'] .stat { overflow: hidden; isolation: isolate; padding: 1.1rem 1.2rem; }
:root[data-style='modern'] .stat::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(18rem 11rem at 8% -30%, color-mix(in oklab, var(--tone, var(--accent)) 26%, transparent), transparent 64%);
}
:root[data-style='modern'] .stat .v { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
:root[data-style='modern'] .stat.ok     { --tone: var(--ok); }
:root[data-style='modern'] .stat.warn   { --tone: var(--warn); }
:root[data-style='modern'] .stat.danger { --tone: var(--danger); }
:root[data-style='modern'] .stat.core   { --tone: var(--core); }
:root[data-style='modern'] .stat:not(.ok):not(.warn):not(.danger):not(.core):not(.accent) { --tone: var(--warm); }

/* ---------------------------------------------------------------- the floating rail */

@media (min-width: 1081px) {
  :root[data-style='modern'] { --nav-w: 104px; }

  :root[data-style='modern'] .nav {
    inset-block: 14px; inset-inline-start: 14px; width: 78px;
    border-radius: 28px; border: 1px solid var(--dock-edge);
    background: var(--dock); color: var(--dock-text);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(26px) saturate(160%);
    overflow: hidden;
    transition: width .38s var(--ease-soft), box-shadow .3s;
  }
  :root[data-style='modern'] .nav:hover,
  :root[data-style='modern'] .nav:focus-within { width: 284px; }

  :root[data-style='modern'] .nav-brand { border-bottom-color: var(--dock-edge); padding: 16px 16px 14px; min-width: 284px; }
  :root[data-style='modern'] .nav-brand .glyph { width: 44px; height: 44px; border-radius: 15px; flex: none; }
  :root[data-style='modern'] .nav-brand .t { color: var(--dock-text); white-space: nowrap; }
  :root[data-style='modern'] .nav-brand .s { color: var(--dock-muted); white-space: nowrap; }

  :root[data-style='modern'] .nav-scroll {
    padding: 10px 12px; min-width: 284px;
    scrollbar-width: none; overflow-y: auto;
    mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  :root[data-style='modern'] .nav-scroll::-webkit-scrollbar { display: none; }

  :root[data-style='modern'] .nav-group {
    color: var(--dock-muted); white-space: nowrap;
    border-top: 1px solid var(--dock-edge); margin: 8px 10px 0; padding: 8px 4px 4px;
  }
  :root[data-style='modern'] .nav-scroll > .nav-group:first-child { border-top: 0; margin-top: 0; }

  :root[data-style='modern'] .nav-link {
    height: 44px; padding-inline: 14px; gap: 16px; border-radius: 15px; border: 0;
    color: var(--dock-muted); white-space: nowrap; font-size: .88rem;
    transition: background .2s, color .2s;
  }
  :root[data-style='modern'] .nav-link .ico { width: 22px; font-size: 1.05rem; opacity: 1; }
  :root[data-style='modern'] .nav-link:hover { background: rgba(255, 255, 255, .09); color: var(--dock-text); }
  :root[data-style='modern'] .nav-link.on {
    background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); font-weight: 600;
  }

  :root[data-style='modern'] .nav-foot { border-top-color: var(--dock-edge); min-width: 284px; padding: 12px 14px; }
  :root[data-style='modern'] .who-n { color: var(--dock-text); }
  :root[data-style='modern'] .who-r { color: var(--dock-muted); }
  :root[data-style='modern'] .nav-foot .btn { background: rgba(255, 255, 255, .08); border-color: var(--dock-edge); color: var(--dock-text); }

  :root[data-style='modern'] .nav :is(.nav-brand > div:not(.glyph), .nav-group, .nav-link > span:not(.ico), .who-t, .who-out) {
    opacity: 0; transition: opacity .18s;
  }
  :root[data-style='modern'] .nav:is(:hover, :focus-within) :is(.nav-brand > div:not(.glyph), .nav-group, .nav-link > span:not(.ico), .who-t, .who-out) {
    opacity: 1; transition-delay: .1s;
  }
  :root[data-style='modern'] .nav:not(:hover):not(:focus-within) .nav-link .badge { opacity: 0; }

  :root[data-style='modern'] .bar {
    top: 14px; margin: 14px 24px 0 24px;
    border-radius: 22px; border: 1px solid var(--glass-edge);
    background: var(--glass-strong); box-shadow: var(--shadow-sm);
  }
  :root[data-style='modern'] .content { max-width: 1240px; padding-top: 2rem; }
}

@media (max-width: 1080px) {
  :root[data-style='modern'] .nav {
    inset-block: 10px; inset-inline-start: 10px; border-radius: 26px;
    background: var(--dock); color: var(--dock-text); border: 1px solid var(--dock-edge);
    backdrop-filter: blur(26px) saturate(160%);
    transform: translateX(calc(100% + 24px));
  }
  :root[data-style='modern'] .nav.open { transform: none; }
  :root[data-style='modern'] .nav-brand, :root[data-style='modern'] .nav-foot { border-color: var(--dock-edge); }
  :root[data-style='modern'] .nav-brand .t, :root[data-style='modern'] .who-n { color: var(--dock-text); }
  :root[data-style='modern'] .nav-brand .s, :root[data-style='modern'] .nav-group { color: var(--dock-muted); }
  :root[data-style='modern'] .nav-link { color: var(--dock-muted); border: 0; border-radius: 14px; }
  :root[data-style='modern'] .nav-link.on { background: var(--grad-brand); color: #fff; }
  :root[data-style='modern'] .nav-foot .btn { background: rgba(255, 255, 255, .08); border-color: var(--dock-edge); color: var(--dock-text); }
  :root[data-style='modern'] .nav-close { color: var(--dock-text); }
  :root[data-style='modern'] .bar {
    margin: 8px 8px 0; top: 8px; border-radius: 20px; border: 1px solid var(--glass-edge);
    background: var(--glass-strong);
  }
}

/* ---------------------------------------------------------------- controls */

:root[data-style='modern'] .btn {
  border-radius: 13px; border-color: var(--glass-edge); background: var(--field);
  backdrop-filter: blur(10px);
  transition: background .2s var(--ease-soft), transform .35s var(--ease-spring), filter .2s, box-shadow .2s;
}
:root[data-style='modern'] .btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
:root[data-style='modern'] .btn.primary {
  background: var(--grad-brand); color: #fff; border-color: rgba(255, 255, 255, .2);
  box-shadow: var(--shadow-brand);
}
:root[data-style='modern'] .btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--grad-brand); }
:root[data-style='modern'] .btn.ghost { background: transparent; border-color: transparent; }
:root[data-style='modern'] .btn.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 36%, transparent); }
:root[data-style='modern'] .btn.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 36%, transparent); }
:root[data-style='modern'] .btn.icon { border-radius: 50%; }

:root[data-style='modern'] :is(.seg, .theme-seg) {
  border-radius: 999px; padding: 3px; background: var(--field); border: 1px solid var(--glass-edge);
}
:root[data-style='modern'] :is(.seg, .theme-seg) button { border-radius: 999px; padding: .3rem .85rem; transition: color .2s, background .25s; }
:root[data-style='modern'] :is(.seg, .theme-seg) button.on {
  background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand);
}

:root[data-style='modern'] .badge {
  border-radius: 999px; min-height: 22px; padding: 0 .6rem; font-weight: 600;
  background: color-mix(in srgb, var(--text-mute) 12%, transparent); border-color: color-mix(in srgb, var(--text-mute) 24%, transparent);
}
:root[data-style='modern'] .badge.accent { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
:root[data-style='modern'] .badge.ok     { background: color-mix(in srgb, var(--ok) 14%, transparent);     border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
:root[data-style='modern'] .badge.warn   { background: color-mix(in srgb, var(--warn) 14%, transparent);   border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
:root[data-style='modern'] .badge.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 34%, transparent); }
:root[data-style='modern'] .badge.info   { background: color-mix(in srgb, var(--info) 14%, transparent);   border-color: color-mix(in srgb, var(--info) 34%, transparent); }
:root[data-style='modern'] .badge.core   { background: color-mix(in srgb, var(--core) 14%, transparent);   border-color: color-mix(in srgb, var(--core) 34%, transparent); }
:root[data-style='modern'] .badge.only { min-width: 22px; width: 22px; }

:root[data-style='modern'] :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), textarea, select) {
  background: var(--field); border: 1px solid var(--glass-edge); border-radius: 13px;
  backdrop-filter: blur(8px); padding: .65rem .9rem;
}
:root[data-style='modern'] :is(input, textarea, select):focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

:root[data-style='modern'] .chip {
  background: var(--field); border-color: var(--glass-edge); border-radius: 999px; backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------- tables */

:root[data-style='modern'] .tw { border-radius: 22px; }
:root[data-style='modern'] table { border-collapse: separate; border-spacing: 0; }
:root[data-style='modern'] thead th {
  background: color-mix(in srgb, var(--glass-strong) 80%, transparent);
  backdrop-filter: blur(12px); color: var(--text-mute); font-weight: 600;
  border-bottom: 1px solid var(--border); padding: .7rem 1rem;
}
:root[data-style='modern'] tbody td { padding: .7rem 1rem; border-bottom-color: var(--border); }
:root[data-style='modern'] tbody tr { transition: background .2s; }
:root[data-style='modern'] tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
:root[data-style='modern'] .group-head td {
  background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-hi); font-weight: 800;
}
:root[data-style='modern'] table.plain { background: transparent; }
:root[data-style='modern'] tr.hl td { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------------------------------------------------------------- sections & hero */

:root[data-style='modern'] .sec { margin-bottom: 4rem; }

:root[data-style='modern'] .content { animation: fadein .6s var(--ease-soft); }
@keyframes fadein { from { opacity: 0; } }
:root[data-style='modern'] .sec-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.4rem; }
:root[data-style='modern'] .sec-head .kicker {
  display: inline-block; padding: .18rem .75rem; border-radius: 999px; margin-bottom: .55rem;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-hi);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); letter-spacing: .02em;
}
:root[data-style='modern'] .sec-head p { max-width: 78ch; }

:root[data-style='modern'] .cover {
  border-radius: 36px; padding: 2.8rem 2.8rem 2.4rem;
  background:
    radial-gradient(60% 90% at 88% 10%, color-mix(in srgb, var(--warm) 38%, transparent), transparent 60%),
    radial-gradient(70% 120% at 0% 100%, color-mix(in srgb, var(--lime) 30%, transparent), transparent 62%),
    var(--grad-brand);
  box-shadow: var(--shadow-brand), var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, .22);
}
:root[data-style='modern'] .cover h1 { font-size: 2.35rem; font-weight: 800; letter-spacing: -.03em; }
:root[data-style='modern'] .cover::after { display: none; }
:root[data-style='modern'] .cover .fact {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .26); border-radius: 18px;
  backdrop-filter: blur(10px);
}

:root[data-style='modern'] .plan { border-radius: 30px; padding: 1.6rem 1.45rem; }
:root[data-style='modern'] .plan .price {
  font-size: 2rem; font-weight: 800; letter-spacing: -.03em;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-style='modern'] .plan.picked { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 26%, transparent), var(--shadow-md); }

:root[data-style='modern'] .ev-n {
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-style='modern'] .ai-ico { border-radius: 14px; background: color-mix(in srgb, var(--core) 14%, transparent); }

/* ---------------------------------------------------------------- dialogs */

:root[data-style='modern'] .ovl { background: rgba(4, 20, 12, .42); backdrop-filter: blur(10px) saturate(120%); }
:root[data-style='modern'] .modal {
  position: relative; border-radius: 30px; border: 1px solid var(--glass-edge);
  background: var(--glass-strong); backdrop-filter: blur(30px) saturate(160%);
  box-shadow: var(--shadow-lg);
}
:root[data-style='modern'] :is(.modal-head, .modal-foot) { background: transparent; border-color: var(--border); }
:root[data-style='modern'] .tab.on { color: var(--accent-hi); border-bottom-width: 3px; }
:root[data-style='modern'] .guard-art { background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); }

/* ---------------------------------------------------------------- login */

:root[data-style='modern'] .login { background: transparent; padding: 18px; gap: 18px; }
:root[data-style='modern'] .login-art {
  border-radius: 34px; border: 1px solid rgba(255, 255, 255, .18);
  background:
    radial-gradient(60% 50% at 85% 10%, color-mix(in srgb, var(--warm) 32%, transparent), transparent 62%),
    var(--grad-brand);
  box-shadow: var(--shadow-brand), var(--shadow-lg);
}
:root[data-style='modern'] .login-form { padding: 1.5rem; }
:root[data-style='modern'] .login-card {
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 30px;
  padding: 2rem 1.8rem; backdrop-filter: blur(var(--glass-blur)) saturate(150%); box-shadow: var(--shadow-md);
}
:root[data-style='modern'] .login-card .mark,
:root[data-style='modern'] .nav-brand .glyph { background: var(--grad-brand); box-shadow: var(--shadow-brand); color: #fff; }

/* ---------------------------------------------------------------- the style preview card */

.mock-modern {
  border-radius: 24px;
  box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
  background:
    radial-gradient(90% 80% at 90% -10%, color-mix(in srgb, var(--warm) 45%, transparent), transparent 62%),
    radial-gradient(90% 90% at 0% 110%, color-mix(in srgb, var(--lime) 40%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 30%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface)));
  border-color: rgba(255, 255, 255, .5);
  padding: 1.05rem;
}
.mock-modern .mk-tile,
.mock-modern .mk-chart {
  border-radius: 16px; backdrop-filter: blur(10px) saturate(160%);
  background: color-mix(in srgb, #fff 45%, transparent);
  border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 8px 18px -12px rgba(10, 40, 24, .4);
}
.mock-modern .mk-pill,
.mock-modern .mk-chip { border-radius: 999px; background: rgba(255, 255, 255, .45); border-color: rgba(255, 255, 255, .6); }
.mock-modern .mk-chart span { border-radius: 999px; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 70%, var(--lime)), var(--accent)); }
.mock-modern .mk-btn {
  border-radius: 999px; padding: .3rem .9rem; color: #fff;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 78%, var(--lime)), var(--accent));
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.mock-modern .mk-dot { background: var(--warm); box-shadow: 0 0 8px var(--warm); }

@media (max-width: 680px) {
  :root[data-style='modern'] .cover { padding: 1.6rem 1.2rem; border-radius: 26px; }
  :root[data-style='modern'] .cover h1 { font-size: 1.6rem; }
  :root[data-style='modern'] h2 { font-size: 1.3rem; }
  :root[data-style='modern'] .plan .price { font-size: 1.6rem; }
  :root[data-style='modern'] .login { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-drift, .cv-route, .lg-route, .g-stack, .g-line { animation: none !important; }
}

/* ---------------------------------------------------------------- modern: tones derived from the seed colour */

@supports (color: oklch(from red l c h)) {
  :root[data-style='modern'] {
    --sky-1:  oklch(from var(--accent) .965 .025 h);
    --sky-2:  oklch(from var(--accent) .965 .035 calc(h - 95));
    --wave-1: oklch(from var(--accent) .885 .075 h);
    --wave-2: oklch(from var(--accent) .915 .085 calc(h - 40));
    --wave-3: oklch(from var(--accent) .885 .06 calc(h + 35));
    --wave-4: oklch(from var(--accent) .91 .075 calc(h - 95));
    --bg:     oklch(from var(--accent) .955 .02 h);
    --surface-3:     oklch(from var(--accent) .4 .06 h / .07);
    --border:        oklch(from var(--accent) .35 .06 h / .13);
    --border-strong: oklch(from var(--accent) .35 .06 h / .26);
    --dock:       oklch(from var(--accent) .25 calc(c * .45) h / .9);
    --dock-muted: oklch(from var(--accent) .82 .05 h);
    --grad-brand: linear-gradient(135deg,
                   oklch(from var(--accent) .62 c calc(h - 28)),
                   oklch(from var(--accent) .47 c calc(h + 22)));
    --shadow-brand: 0 16px 36px -16px oklch(from var(--accent) .5 c h / .7);
    --shadow-sm: 0 18px 44px -30px oklch(from var(--accent) .3 .08 h / .5);
    --shadow-md: 0 26px 56px -30px oklch(from var(--accent) .3 .08 h / .55);
    --shadow-lg: 0 34px 80px -28px oklch(from var(--accent) .25 .07 h / .55);
  }

  @media (prefers-color-scheme: dark) {
    :root[data-style='modern']:not([data-theme='light']) {
      --sky-1:  oklch(from var(--accent) .13 .02 h);
      --sky-2:  oklch(from var(--accent) .17 .03 calc(h - 20));
      --wave-1: oklch(from var(--accent) .3 .07 h);
      --wave-2: oklch(from var(--accent) .32 .07 calc(h - 40));
      --wave-3: oklch(from var(--accent) .27 .06 calc(h + 35));
      --wave-4: oklch(from var(--accent) .3 .06 calc(h - 95));
      --bg:     oklch(from var(--accent) .14 .02 h);
      --glass:        oklch(from var(--accent) .21 .025 h / .58);
      --glass-strong: oklch(from var(--accent) .23 .025 h / .88);
      --surface-3:     oklch(1 0 0 / .07);
      --border:        oklch(1 0 0 / .1);
      --border-strong: oklch(1 0 0 / .2);
      --dock: oklch(from var(--accent) .17 calc(c * .3) h / .82);
      --grad-brand: linear-gradient(135deg,
                     oklch(from var(--accent) .56 c calc(h - 28)),
                     oklch(from var(--accent) .43 c calc(h + 22)));
      --shadow-brand: 0 16px 36px -18px oklch(from var(--accent) .5 c h / .55);
      --shadow-sm: 0 24px 60px -34px rgba(0, 0, 0, .95);
      --shadow-md: 0 30px 70px -32px rgba(0, 0, 0, .95);
      --shadow-lg: 0 34px 80px -30px rgba(0, 0, 0, .9);
    }
  }

  :root[data-style='modern'][data-theme='dark'] {
    --sky-1:  oklch(from var(--accent) .13 .02 h);
    --sky-2:  oklch(from var(--accent) .17 .03 calc(h - 20));
    --wave-1: oklch(from var(--accent) .3 .07 h);
    --wave-2: oklch(from var(--accent) .32 .07 calc(h - 40));
    --wave-3: oklch(from var(--accent) .27 .06 calc(h + 35));
    --wave-4: oklch(from var(--accent) .3 .06 calc(h - 95));
    --bg:     oklch(from var(--accent) .14 .02 h);
    --glass:        oklch(from var(--accent) .21 .025 h / .58);
    --glass-strong: oklch(from var(--accent) .23 .025 h / .88);
    --surface-3:     oklch(1 0 0 / .07);
    --border:        oklch(1 0 0 / .1);
    --border-strong: oklch(1 0 0 / .2);
    --dock: oklch(from var(--accent) .17 calc(c * .3) h / .82);
    --grad-brand: linear-gradient(135deg,
                   oklch(from var(--accent) .56 c calc(h - 28)),
                   oklch(from var(--accent) .43 c calc(h + 22)));
    --shadow-brand: 0 16px 36px -18px oklch(from var(--accent) .5 c h / .55);
    --shadow-sm: 0 24px 60px -34px rgba(0, 0, 0, .95);
    --shadow-md: 0 30px 70px -32px rgba(0, 0, 0, .95);
    --shadow-lg: 0 34px 80px -30px rgba(0, 0, 0, .9);
  }
}

:root[data-style='modern'] { --grad-hero: var(--grad-brand); }
:root[data-style='modern'] .cover { background:
    radial-gradient(60% 90% at 88% 10%, color-mix(in srgb, var(--warm) 38%, transparent), transparent 60%),
    radial-gradient(70% 120% at 0% 100%, color-mix(in srgb, var(--lime) 30%, transparent), transparent 62%),
    var(--grad-hero); }
:root[data-style='modern'] .login-art { background:
    radial-gradient(60% 50% at 85% 10%, color-mix(in srgb, var(--warm) 32%, transparent), transparent 62%),
    var(--grad-hero); }

@supports (color: oklch(from red l c h)) {
  @media (prefers-color-scheme: dark) {
    :root[data-style='modern']:not([data-theme='light']) {
      --grad-hero: linear-gradient(135deg, oklch(from var(--accent) .4 calc(c * .8) calc(h - 28)), oklch(from var(--accent) .28 calc(c * .7) calc(h + 22)));
    }
  }
  :root[data-style='modern'][data-theme='dark'] {
    --grad-hero: linear-gradient(135deg, oklch(from var(--accent) .4 calc(c * .8) calc(h - 28)), oklch(from var(--accent) .28 calc(c * .7) calc(h + 22)));
  }
}