/* AdRefresh app shell v28 — app.css
   One design system, two themes: <html data-theme="dark"> (public: auth, marketing) uses the landing's tokens
   exactly; <html data-theme="light"> (the app behind login) is the light product theme of the same system.
   Loaded by templates/base.html AFTER Bootstrap 4.6 + css/main.css and BEFORE {% block extra_css %}, so:
     - it beats Bootstrap at equal specificity (same selectors, later in the cascade);
     - page CSS (extra_css / inline <style>) beats it at equal specificity.
   Class prefix: v-  (the v28 system). Never style bare Bootstrap names as new components (.row, .card, .btn …).
   Contract for page agents: <scratch>/APP_SHELL.md. */

/* ───────────────────────── 1. tokens ───────────────────────── */
:root{
  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px; --r-field:14px;
  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:120px;
  --gutter:16px;              /* 24 ≥600 · 40 ≥900 · 72 ≥1280 (same as the landing) */
  --maxw:1296px;
  --section-y:clamp(72px, 9vw, 120px);
  --page-y:clamp(32px, 4vw, 56px);
  --nav-h:56px;               /* 64 ≥900 */
  /* type */
  --font-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display:clamp(40px, calc(4.6vw + 6px), 80px);  /* landing hero */
  --fs-h2:clamp(30px, calc(3vw + 8px), 52px);         /* landing section title (marketing pages) */
  --fs-title:clamp(28px, calc(1.1vw + 20px), 38px);   /* app page title (h1) */
  --fs-section:clamp(20px, calc(.6vw + 16px), 26px);  /* app section heading (h2) */
  --fs-h3:clamp(19px, calc(.6vw + 14px), 24px);
  --fs-h4:17px;
  --fs-lede:clamp(16px, calc(.3vw + 14px), 18px);
  --fs-body:16px;
  --fs-small:14px;
  --fs-label:11.5px;
  --fs-data:12.5px;
  --fs-price:clamp(44px, 4vw, 64px);
  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-split:cubic-bezier(.7,0,.2,1);
  --dur-1:160ms; --dur-2:320ms; --dur-3:640ms; --dur-4:1100ms;
  /* layers */
  --z-nav:1000; --z-flash:990; --z-thumb:900; --z-menu:1100;
  /* glyphs for CSS masks (alpha only, so one value serves both themes): background:currentColor + mask:var(--v-check-mask) */
  --v-check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
}
@media (max-width:599px){ :root{ --fs-body:15px; --fs-label:10.5px; } }
@media (min-width:600px){ :root{ --gutter:24px; } }
@media (min-width:900px){ :root{ --gutter:40px; --nav-h:64px; } }
@media (min-width:1280px){ :root{ --gutter:72px; } }

/* LIGHT (default for base.html pages; the app behind login) */
:root, [data-theme="light"], .v-theme-light{
  color-scheme:light;
  --ink-0:#F5F7FB;            /* page */
  --ink-1:#EDF1F7;            /* alt bands, footer */
  --ink-2:#FFFFFF;            /* raised cards */
  --ink-3:#F1F4F9;            /* wells, hover fills */
  --line:rgba(10,30,70,.10);
  --line-2:rgba(10,30,70,.18);
  --text-1:#0A1222;           /* 17:1 on ink-0 */
  --text-2:#3B475C;           /* 8.7:1 */
  --text-3:#5D6A80;           /* 5.1:1 on ink-0, 4.8:1 on ink-1 */
  --blue:#2E84ED;
  --blue-hi:#1A64D2;          /* brand text/links on light: 5.2:1 */
  --blue-deep:#1552B0;
  --action:#2373E2;           /* white label 4.54:1 */
  --action-grad:linear-gradient(180deg,#2E7EEA 0%,#2373E2 30%,#1A64D2 100%);
  --cyan:#0A7FA6;             /* live / accent lines (decorative) */
  --cyan-text:#08708F;        /* cyan as text: 5.3:1 */
  --ember:#C2410C;
  --u-red:#E0434A; --u-amber:#B07400; --u-green:#12996A;
  --danger:#C92F37; --success:#0E7C52; --warning:#9A5B00; --focus:#2373E2;
  --glass-bg:rgba(255,255,255,.78);
  --glass-strong:rgba(255,255,255,.94);
  --glass-filter:blur(16px) saturate(160%);
  --edge:inset 0 0 0 1px var(--line);
  --edge-2:inset 0 0 0 1px var(--line-2);
  --shadow-1:0 1px 2px rgba(15,30,60,.05), 0 2px 8px -2px rgba(15,30,60,.06);
  --shadow-2:0 2px 4px rgba(15,30,60,.05), 0 14px 32px -12px rgba(15,30,60,.20);
  --shadow-pop:0 18px 50px -12px rgba(15,30,60,.28), 0 2px 6px rgba(15,30,60,.06);
  --lift:0 24px 60px -28px rgba(15,30,60,.30);
  --glow-action:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px -6px rgba(35,115,226,.55);
  --glow-action-hover:inset 0 1px 0 rgba(255,255,255,.26), 0 10px 22px -8px rgba(35,115,226,.62), 0 0 0 4px rgba(46,132,237,.10);
  --glow-eyebrow:0 0 #0000;
  /* semantic aliases (prefer these in page CSS) */
  --bg:var(--ink-0); --bg-alt:var(--ink-1); --surface:var(--ink-2); --surface-2:var(--ink-3);
  --link:var(--blue-hi); --link-hover:var(--blue-deep);
  --field-bg:#FFFFFF; --field-bg-hover:#FFFFFF;
  --field-line:#8993A6;       /* 3.1:1 on white (WCAG 1.4.11) */
  --field-line-hover:#5D6A80;
  /* field focus = the 1px border turning --blue-hi + this 1px ring outside it (a 2px edge, like the 2px outline on
     buttons/links) + a soft halo */
  --ring:0 0 0 1px var(--blue-hi), 0 0 0 4px rgba(35,115,226,.22);
  --ring-danger:0 0 0 1px var(--danger), 0 0 0 4px rgba(201,47,55,.16);
  --row-stripe:rgba(10,30,70,.025);
  --row-hover:rgba(35,115,226,.05);
  --overlay:rgba(10,18,34,.46);
  --tone-info-bg:#EAF2FE;    --tone-info-line:rgba(35,115,226,.30);   --tone-info-text:#1552B0;
  --tone-success-bg:#E7F6EF; --tone-success-line:rgba(14,124,82,.28); --tone-success-text:#0B6544;
  --tone-warning-bg:#FFF4DE; --tone-warning-line:rgba(154,91,0,.30);  --tone-warning-text:#7A4800;
  --tone-danger-bg:#FDECEC;  --tone-danger-line:rgba(201,47,55,.30);  --tone-danger-text:#A8222A;
  --tone-accent-bg:#E3F6FB;  --tone-accent-line:rgba(10,127,166,.32); --tone-accent-text:#08708F;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%233B475C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --brackets-c:rgba(20,60,140,.28);
  --nav-bg:rgba(245,247,251,.80);
  /* theme-specific component fills: components read these, so ONE selector works on a page and inside a
     .v-theme-dark / .v-theme-light island (never key a component on [data-theme] alone) */
  --ghost-bg:color-mix(in srgb, var(--ink-2) 55%, transparent);
  --ghost-bg-hover:var(--ink-3);
  --ghost-line-hover:color-mix(in srgb, var(--cyan) 50%, transparent);
  --glass-panel:var(--ink-2);
  --card-hover-edge:inset 0 0 0 1px var(--line-2);
  --seg-on-bg:var(--ink-2);
  --modal-bg:var(--ink-2);
  --glow-success:0 0 #0000; --glow-accent:0 0 #0000; --glow-u-red:0 0 #0000; --glow-u-amber:0 0 #0000; --glow-u-green:0 0 #0000;
}

/* DARK (= the landing's tokens, unchanged; public pages: auth, marketing, legal) */
[data-theme="dark"], .v-theme-dark{
  color-scheme:dark;
  --ink-0:#03050A;
  --ink-1:#070B14;
  --ink-2:#0C1322;
  --ink-3:#131C2F;
  --line:rgba(150,180,255,.12);
  --line-2:rgba(150,180,255,.24);
  --text-1:#EEF3FF;
  --text-2:#A9B6CE;
  --text-3:#7C8BA8;
  --blue:#2E84ED;
  --blue-hi:#5AA2FF;
  --blue-deep:#1A64D2;
  --action:#2373E2;
  --action-grad:linear-gradient(180deg,#2E7EEA 0%,#2373E2 30%,#1A64D2 100%);
  --cyan:#7CE7FF;
  --cyan-text:#7CE7FF;
  --ember:#FF7A45;
  --u-red:#FF5D5D; --u-amber:#FFC247; --u-green:#3DDC97;
  --danger:#FF6B6B; --success:#3DDC97; --warning:#FFC247; --focus:#7CE7FF;
  --glass-bg:rgba(8,13,24,.62);
  --glass-strong:rgba(8,13,24,.86);
  --glass-filter:blur(16px) saturate(140%);
  --edge:inset 0 0 0 1px var(--line);
  --edge-2:inset 0 0 0 1px var(--line-2);
  --shadow-1:0 0 #0000;       /* "no shadow" that stays valid inside a list: var(--edge), var(--shadow-1) (a bare none would void the edge too) */
  --shadow-2:0 24px 60px -28px rgba(0,0,0,.7);
  --shadow-pop:0 30px 80px -24px rgba(0,0,0,.8);
  --lift:0 24px 60px -28px rgba(0,0,0,.7);
  --membrane:0 0 0 1px rgba(200,225,255,.55),0 0 34px rgba(46,132,237,.45),inset 0 0 18px rgba(120,190,255,.40);
  --glow-action:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px -10px rgba(46,132,237,.65),0 0 0 6px rgba(46,132,237,.12);
  --glow-action-hover:inset 0 1px 0 rgba(255,255,255,.26),0 14px 36px -10px rgba(46,132,237,.75),0 0 0 8px rgba(46,132,237,.14);
  --glow-eyebrow:0 0 8px rgba(124,231,255,.7);
  --bg:var(--ink-0); --bg-alt:var(--ink-1); --surface:var(--ink-2); --surface-2:var(--ink-3);
  --link:var(--blue-hi); --link-hover:var(--text-1);
  --field-bg:var(--ink-3); --field-bg-hover:#162036;
  --field-line:rgba(150,180,255,.52);   /* 3.2:1 on ink-3 (the landing's contact form) */
  --field-line-hover:rgba(150,180,255,.70);
  --ring:0 0 0 1px var(--blue-hi), 0 0 0 4px rgba(46,132,237,.28);
  --ring-danger:0 0 0 1px var(--danger), 0 0 0 4px rgba(255,107,107,.18);
  --row-stripe:rgba(150,180,255,.025);
  --row-hover:rgba(150,180,255,.05);
  --overlay:rgba(3,5,10,.78);
  --tone-info-bg:rgba(46,132,237,.10);   --tone-info-line:rgba(90,162,255,.40);   --tone-info-text:#A8CBFF;
  --tone-success-bg:rgba(61,220,151,.08);--tone-success-line:rgba(61,220,151,.38);--tone-success-text:#7EE8BA;
  --tone-warning-bg:rgba(255,194,71,.08);--tone-warning-line:rgba(255,194,71,.38);--tone-warning-text:#FFD27A;
  --tone-danger-bg:rgba(255,107,107,.08);--tone-danger-line:rgba(255,107,107,.42);--tone-danger-text:#FFA3A3;
  --tone-accent-bg:rgba(124,231,255,.07);--tone-accent-line:rgba(124,231,255,.32);--tone-accent-text:#7CE7FF;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A9B6CE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --brackets-c:rgba(160,195,255,.36);
  --nav-bg:rgba(3,5,10,.70);
  --ghost-bg:rgba(255,255,255,.04);
  --ghost-bg-hover:rgba(255,255,255,.06);
  --ghost-line-hover:rgba(124,231,255,.45);
  --glass-panel:linear-gradient(180deg, rgba(19,28,47,.78), rgba(12,19,34,.78));
  --card-hover-edge:inset 0 0 0 1px rgba(124,231,255,.30);
  --seg-on-bg:rgba(255,255,255,.08);
  --modal-bg:linear-gradient(180deg, #111a2c, var(--ink-2));
  --glow-success:0 0 8px rgba(61,220,151,.55); --glow-accent:0 0 8px rgba(124,231,255,.6);
  --glow-u-red:0 0 8px rgba(255,93,93,.55); --glow-u-amber:0 0 8px rgba(255,194,71,.5); --glow-u-green:0 0 8px rgba(61,220,151,.5);
}
/* a scoped island keeps its own text colour too */
.v-theme-dark, .v-theme-light{ color:var(--text-2); }

/* ───────────────────────── 2. base ───────────────────────── */
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  scroll-padding-bottom:92px;            /* keeps focused controls clear of the fixed "Ask AI" launcher */
  background:var(--bg);
}
body{
  display:flex; flex-direction:column; min-height:100vh;
  margin:0; background:var(--bg); background-image:none;
  color:var(--text-2);
  font:400 var(--fs-body)/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.menu-open{ overflow:hidden; }
/* the 2019 style.css drew decorative PNGs on body::before/::after; the shell no longer loads it */
body::before, body::after{ content:none; }
main.v-main{ flex:1 0 auto; display:block; min-width:0; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-sans); font-weight:600; color:var(--text-1); text-wrap:balance; }
h1{ font-size:var(--fs-title); line-height:1.08; letter-spacing:-.035em; }
h2{ font-size:var(--fs-section); line-height:1.2; letter-spacing:-.025em; }
h3{ font-size:clamp(17px, calc(.3vw + 15.5px), 19px); line-height:1.3; letter-spacing:-.015em; }
h4{ font-size:16px; line-height:1.35; letter-spacing:-.01em; }
h5{ font-size:15px; line-height:1.4; }
h6{ font:500 var(--fs-label)/1.3 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
strong,b{ font-weight:600; }
a{ color:var(--link); text-decoration:none; transition:color var(--dur-1); }
a:hover{ color:var(--link-hover); text-decoration:none; }
a:not([href]):not([class]), a:not([href]):not([class]):hover{ color:inherit; }
small, .small{ font-size:13px; }
code, kbd, pre, samp{ font-family:var(--font-mono); }
code{ font-size:.9em; color:var(--text-1); background:var(--surface-2); padding:1px 6px; border-radius:6px; box-shadow:var(--edge); word-break:break-word; }
pre{ color:var(--text-1); background:var(--surface-2); padding:14px 16px; border-radius:var(--r-sm); box-shadow:var(--edge); }
pre code{ background:none; box-shadow:none; padding:0; }
kbd{ font-size:12px; color:var(--text-1); background:var(--surface); padding:2px 6px; border-radius:6px; box-shadow:var(--edge-2), 0 1px 0 var(--line-2); }
hr{ border:0; border-top:1px solid var(--line); margin:var(--s-5) 0; }
::selection{ background:rgba(46,132,237,.32); color:inherit; }
[data-theme="dark"] ::selection, .v-theme-dark ::selection{ background:rgba(46,132,237,.38); color:#fff; }
[data-theme] .v-theme-light ::selection{ background:rgba(46,132,237,.32); color:inherit; }
[data-theme] .v-theme-light .v-theme-dark ::selection{ background:rgba(46,132,237,.38); color:#fff; }
::placeholder{ color:var(--text-3); opacity:1; }
.text-muted{ color:var(--text-3)!important; }   /* Bootstrap uses !important here too; same weight, later wins */

/* focus: one ring everywhere (keyboard only; the outline follows each element's own radius) */
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.v-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.v-skip{
  position:fixed; left:16px; top:-80px; z-index:1200;
  padding:12px 18px; border-radius:12px; background:var(--action); color:#fff; font-weight:600;
  transition:top var(--dur-1) var(--ease-out);
}
.v-skip:hover{ color:#fff; }
.v-skip:focus{ top:12px; }

/* ───────────────────────── 3. layout ───────────────────────── */
.v-wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.v-wrap--text{ max-width:calc(760px + 2 * var(--gutter)); }
.v-wrap--narrow{ max-width:calc(480px + 2 * var(--gutter)); }
.v-wrap--wide{ max-width:1440px; }
.v-page{ padding-block:var(--page-y) clamp(64px, 7vw, 104px); }
.v-section{ padding-block:var(--section-y); }
.v-section--alt{ background:var(--bg-alt); border-block:1px solid var(--line); }
.v-stack{ display:flex; flex-direction:column; gap:var(--s-4); }
.v-stack--xs{ gap:var(--s-2); } .v-stack--sm{ gap:var(--s-3); } .v-stack--lg{ gap:var(--s-5); } .v-stack--xl{ gap:var(--s-7); }
.v-cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); }
.v-cluster--end{ justify-content:flex-end; } .v-cluster--between{ justify-content:space-between; }
.v-grid{ display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--v-grid-min, 280px)), 1fr)); }
.v-grid--fit{ grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--v-grid-min, 280px)), 1fr)); }
.v-grid--2{ --v-grid-min:340px; } .v-grid--3{ --v-grid-min:260px; } .v-grid--4{ --v-grid-min:200px; }
.v-split{ display:grid; gap:var(--s-6); grid-template-columns:minmax(0, 1fr); }
/* grid/flex children may hold wide content (tables, code, long names): let them shrink, never widen the page */
.v-stack > *, .v-grid > *, .v-split > *, .v-cluster > *{ min-width:0; }
@media (min-width:900px){ .v-split{ grid-template-columns:minmax(0, 1fr) minmax(0, var(--v-split-side, 360px)); align-items:start; } }
.v-divider{ height:1px; border:0; margin:var(--s-5) 0; background:var(--line); }
.v-center{ display:grid; place-items:center; }

/* ───────────────────────── 4. type utilities ───────────────────────── */
.v-label, .v-eyebrow{
  font-family:var(--font-mono); font-weight:500; font-size:var(--fs-label); line-height:1.2;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);
}
.v-eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.v-eyebrow::before{ content:""; flex:none; width:24px; height:1px; background:var(--cyan); box-shadow:var(--glow-eyebrow); }
.v-mono{ font-family:var(--font-mono); font-size:var(--fs-data); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:0; }
.v-num{ font-variant-numeric:tabular-nums; }
.v-display{ font:600 var(--fs-display)/.96 var(--font-sans); letter-spacing:-.045em; color:var(--text-1); }
.v-h1{ font:600 var(--fs-title)/1.08 var(--font-sans); letter-spacing:-.035em; color:var(--text-1); }
.v-h2{ font:600 var(--fs-h2)/1.02 var(--font-sans); letter-spacing:-.035em; color:var(--text-1); text-wrap:balance; }
.v-h3{ font:600 var(--fs-h3)/1.2 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); }
.v-h4{ font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:-.01em; color:var(--text-1); }
.v-lede{ max-width:60ch; font-size:var(--fs-lede); line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.v-text-1{ color:var(--text-1); } .v-text-2{ color:var(--text-2); } .v-text-3, .v-muted{ color:var(--text-3); }
.v-accent{ color:var(--blue-hi); }
.v-gradient-text{ background:linear-gradient(92deg, var(--blue-hi), var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v-link{
  color:var(--link); font-weight:500;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:color var(--dur-1), text-decoration-color var(--dur-1);
}
.v-link:hover{ color:var(--link-hover); text-decoration:underline; text-decoration-color:var(--line-2); }
.v-link .v-arr{ display:inline-block; margin-left:4px; transition:transform var(--dur-2) var(--ease-out); }
.v-link:hover .v-arr{ transform:translateX(3px); }
.v-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.v-break{ overflow-wrap:anywhere; }

/* page header: eyebrow + title + sub (+ actions) */
.v-page-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 32px; margin-bottom:clamp(24px, 3vw, 40px); }
.v-page-head__text{ min-width:0; flex:1 1 420px; }
.v-page-head__title{ margin:0; font:600 var(--fs-title)/1.08 var(--font-sans); letter-spacing:-.035em; color:var(--text-1); text-wrap:balance; }
.v-page-head__sub{ max-width:62ch; margin:12px 0 0; font-size:var(--fs-lede); line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.v-page-head__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.v-page-head--center{ flex-direction:column; align-items:center; text-align:center; }
.v-page-head--center .v-page-head__text{ flex:none; display:flex; flex-direction:column; align-items:center; }
.v-page-head--center .v-page-head__sub{ margin-inline:auto; }
.v-page-head--hero .v-page-head__title{ font-size:var(--fs-h2); line-height:1.02; max-width:18ch; }

/* prose: news article bodies, legal text, long help text */
.v-prose{ color:var(--text-2); font-size:17px; line-height:1.7; overflow-wrap:break-word; }
.v-prose > * + *{ margin-top:1.05em; }
.v-prose > :first-child{ margin-top:0; }
.v-prose p, .v-prose ul, .v-prose ol, .v-prose blockquote, .v-prose figure, .v-prose pre, .v-prose table{ margin-bottom:0; }
.v-prose h2{ margin:2em 0 0; font-size:clamp(22px, calc(.8vw + 16px), 28px); line-height:1.2; }
.v-prose h3{ margin:1.7em 0 0; font-size:clamp(18px, calc(.4vw + 15px), 21px); }
.v-prose h4{ margin:1.5em 0 0; }
.v-prose h2 + *, .v-prose h3 + *, .v-prose h4 + *{ margin-top:.6em; }
.v-prose a{ color:var(--link); text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px; }
.v-prose a:hover{ color:var(--link-hover); text-decoration-color:currentColor; }
.v-prose strong{ color:var(--text-1); }
.v-prose ul, .v-prose ol{ padding-left:1.3em; }
.v-prose ul{ list-style:disc; } .v-prose ol{ list-style:decimal; }
.v-prose li + li{ margin-top:.4em; }
.v-prose li::marker{ color:var(--text-3); }
.v-prose blockquote{ padding:4px 0 4px 20px; border-left:2px solid var(--cyan); color:var(--text-1); font-size:1.05em; }
.v-prose img, .v-prose video{ max-width:100%; height:auto; border-radius:var(--r-md); }
.v-prose figcaption{ margin-top:8px; font-size:13px; color:var(--text-3); }
.v-prose hr{ margin:2em 0; }
.v-prose table{ width:100%; border-collapse:collapse; font-size:15px; }
.v-prose th, .v-prose td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.v-prose th{ color:var(--text-1); font-weight:600; }

/* ───────────────────────── 5. buttons ───────────────────────── */
/* v28 buttons (use these in new markup) */
.v-btn{
  --h:44px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--h); padding:0 20px; margin:0; border:0; border-radius:var(--r-pill);
  font:600 15px/1.15 var(--font-sans); letter-spacing:-.01em; text-align:center; white-space:nowrap;
  cursor:pointer; text-decoration:none; user-select:none; -webkit-tap-highlight-color:transparent;
  color:var(--text-1); background:transparent;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1), color var(--dur-1);
}
.v-btn:hover{ text-decoration:none; }
.v-btn svg{ flex:none; width:16px; height:16px; }
.v-btn--primary{ color:#fff; background:var(--action-grad); box-shadow:var(--glow-action); }
.v-btn--primary:hover{ color:#fff; transform:translateY(-1px); box-shadow:var(--glow-action-hover); }
.v-btn--primary:active{ transform:none; background:var(--blue-deep); }
.v-btn--ghost{ color:var(--text-1); background:var(--ghost-bg); box-shadow:var(--edge-2); }
.v-btn--ghost:hover{ color:var(--text-1); background:var(--ghost-bg-hover); box-shadow:inset 0 0 0 1px var(--ghost-line-hover); }
.v-btn--quiet{ color:var(--text-2); background:transparent; }
.v-btn--quiet:hover{ color:var(--text-1); background:var(--surface-2); }
.v-btn--danger{ color:#fff; background:linear-gradient(180deg,#D9434A,#C22F37); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px -10px rgba(201,47,55,.6); }
.v-btn--danger:hover{ color:#fff; transform:translateY(-1px); }
.v-btn--danger-ghost{ color:var(--danger); background:transparent; box-shadow:inset 0 0 0 1px var(--tone-danger-line); }
.v-btn--danger-ghost:hover{ color:var(--danger); background:var(--tone-danger-bg); }
.v-btn--sm{ --h:36px; padding:0 14px; font-size:14px; gap:6px; }
.v-btn--lg{ --h:52px; padding:0 26px; font-size:15.5px; }
@media (max-width:599px){ .v-btn--lg{ --h:48px; } }
.v-btn--block{ display:flex; width:100%; }
.v-btn--icon{ width:var(--h); padding:0; }
.v-btn[disabled], .v-btn:disabled, .v-btn[aria-disabled="true"], .v-btn.is-disabled,
.v-btn:disabled:hover, .v-btn[aria-disabled="true"]:hover, .v-btn.is-disabled:hover{
  cursor:not-allowed; opacity:.48; transform:none; box-shadow:none; filter:saturate(.6);
}
.v-btn.is-busy{ cursor:progress; opacity:.75; }
.v-btn__arrow{ display:inline-block; transition:transform var(--dur-2) var(--ease-out); }
.v-btn:hover .v-btn__arrow{ transform:translateX(3px); }
.v-btn__meta{ font:500 12.5px/1 var(--font-mono); color:var(--text-3); letter-spacing:0; }
.v-btn--primary .v-btn__meta{ color:rgba(255,255,255,.78); }

/* Bootstrap .btn reskin (keeps every existing .btn-* page working, in the v28 look) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:9px 18px; border:1px solid transparent; border-radius:var(--r-pill);
  font-family:var(--font-sans); font-weight:600; font-size:14.5px; line-height:1.2; letter-spacing:-.01em;
  color:var(--text-1);
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.btn:hover{ color:var(--text-1); }
.btn.focus, .btn:focus{ box-shadow:none; }
.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.btn-sm, .btn-group-sm > .btn{ min-height:34px; padding:6px 13px; font-size:13.5px; border-radius:var(--r-pill); }
.btn-lg, .btn-group-lg > .btn{ min-height:52px; padding:12px 26px; font-size:16px; border-radius:var(--r-pill); }
.btn-block{ display:flex; width:100%; }
.btn-primary, .btn-info, .btn-dark{ color:#fff; background:var(--action-grad); border-color:transparent; box-shadow:var(--glow-action); }
.btn-primary:hover, .btn-info:hover, .btn-dark:hover{ color:#fff; background:var(--action-grad); border-color:transparent; box-shadow:var(--glow-action-hover); transform:translateY(-1px); }
.btn-primary.focus, .btn-primary:focus, .btn-info.focus, .btn-info:focus, .btn-dark.focus, .btn-dark:focus{ color:#fff; background:var(--action-grad); border-color:transparent; box-shadow:var(--glow-action); }
.btn-primary.disabled, .btn-primary:disabled, .btn-info.disabled, .btn-info:disabled, .btn-dark.disabled, .btn-dark:disabled{ color:#fff; background:var(--action); border-color:transparent; }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle,
.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active{ color:#fff; background:var(--blue-deep); border-color:transparent; transform:none; }
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus,
.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus{ box-shadow:var(--glow-action); }
.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-dark, .btn-outline-light{
  color:var(--text-1); background:color-mix(in srgb, var(--surface) 55%, transparent); border-color:var(--line-2); box-shadow:none;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline-dark:hover, .btn-outline-light:hover{
  color:var(--text-1); background:var(--surface-2); border-color:color-mix(in srgb, var(--cyan) 55%, transparent);
}
.btn-secondary.focus, .btn-secondary:focus, .btn-light.focus, .btn-light:focus, .btn-outline-primary.focus, .btn-outline-primary:focus,
.btn-outline-secondary.focus, .btn-outline-secondary:focus, .btn-outline-info.focus, .btn-outline-info:focus{ box-shadow:none; }
.btn-secondary.disabled, .btn-secondary:disabled, .btn-light.disabled, .btn-light:disabled, .btn-outline-primary.disabled, .btn-outline-primary:disabled,
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled, .btn-outline-info.disabled, .btn-outline-info:disabled{ color:var(--text-3); background:transparent; border-color:var(--line); }
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active{
  color:var(--text-1); background:var(--tone-info-bg); border-color:var(--tone-info-line); box-shadow:none;
}
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus{ box-shadow:none; }
.btn-danger{ color:#fff; background:linear-gradient(180deg,#D9434A,#C22F37); border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus{ color:#fff; background:linear-gradient(180deg,#D9434A,#C22F37); border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px -10px rgba(201,47,55,.6); }
.btn-outline-danger{ color:var(--danger); border-color:var(--tone-danger-line); background:transparent; }
.btn-outline-danger:hover{ color:var(--danger); background:var(--tone-danger-bg); border-color:var(--danger); }
.btn-outline-danger:focus, .btn-outline-danger.focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus{ box-shadow:none; }
.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active{ color:#fff; background:var(--danger); border-color:var(--danger); }
.btn-success{ color:#fff; background:#0E7C52; border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
.btn-success:hover, .btn-success:focus, .btn-success.focus{ color:#fff; background:#0B6B47; border-color:transparent; box-shadow:none; }
.btn-outline-success{ color:var(--success); border-color:var(--tone-success-line); }
.btn-outline-success:hover{ color:#fff; background:#0E7C52; border-color:#0E7C52; }
.btn-warning{ color:#1A1300; background:#FFC247; border-color:transparent; }
.btn-warning:hover{ color:#1A1300; background:#F5B52E; border-color:transparent; }
.btn-link{ color:var(--link); font-weight:500; background:none; border-color:transparent; box-shadow:none; padding-inline:4px; text-decoration:none; }
.btn-link:hover, .btn-link:focus, .btn-link.focus{ color:var(--link-hover); text-decoration:underline; text-underline-offset:4px; box-shadow:none; }
.btn-link.disabled, .btn-link:disabled{ color:var(--text-3); }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-prepend > .btn{ border-top-right-radius:0; border-bottom-right-radius:0; }
.btn-group > .btn:not(:first-child), .input-group > .input-group-append > .btn{ border-top-left-radius:0; border-bottom-left-radius:0; }
.btn-group > .btn:hover, .input-group .btn:hover{ transform:none; }
/* disabled last, so no variant's :hover lift or glow wins over it */
.btn.disabled, .btn:disabled, .btn.disabled:hover, .btn:disabled:hover, .btn.disabled:focus, .btn:disabled:focus{ opacity:.48; cursor:not-allowed; transform:none; box-shadow:none; }

/* ───────────────────────── 6. forms ───────────────────────── */
fieldset{ min-width:0; }
legend{ font:600 16px/1.3 var(--font-sans); color:var(--text-1); }
.form-group{ margin-bottom:20px; }
.form-group > label, .col-form-label, .v-field__label{
  display:block; margin:0 0 8px;
  font:500 var(--fs-label)/1.3 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-2);
}
.col-form-label{ padding-top:calc(13px); }
.asteriskField{ margin-left:2px; color:var(--blue-hi); }
.v-field{ display:flex; flex-direction:column; gap:8px; min-width:0; margin-bottom:20px; }
.v-field .v-field__label{ margin:0; }
.v-field__hint{ font-size:13px; line-height:1.45; color:var(--text-3); }
.v-field__error{ font-size:13px; line-height:1.4; color:var(--danger); }
/* invalid state for a wrapper around a RAW widget ({{ form.field }} with no classes, or .v-input): add .v-field--invalid
   to the wrapper (crispy fields already get .is-invalid on the input itself) */
.v-field--invalid :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea),
.v-field--invalid :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):hover{ border-color:var(--danger); }
.v-field--invalid :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):focus{ border-color:var(--danger); box-shadow:var(--ring-danger); }
.v-field--invalid :is(input[type="checkbox"], input[type="radio"]){ accent-color:var(--danger); outline:1px solid var(--danger); outline-offset:1px; }

.form-control, .custom-select, .v-input, .v-select, .v-textarea{
  display:block; width:100%; height:48px; padding:0 14px; margin:0;
  font:400 16px/1.4 var(--font-sans); color:var(--text-1);
  background-color:var(--field-bg); background-clip:padding-box;
  border:1px solid var(--field-line); border-radius:var(--r-field); box-shadow:none;
  transition:border-color var(--dur-1), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1);
  -webkit-appearance:none; appearance:none;
}
.form-control:hover, .custom-select:hover, .v-input:hover, .v-select:hover, .v-textarea:hover{ border-color:var(--field-line-hover); background-color:var(--field-bg-hover); }
.form-control:focus, .custom-select:focus, .v-input:focus, .v-select:focus, .v-textarea:focus{
  color:var(--text-1); background-color:var(--field-bg-hover); border-color:var(--blue-hi);
  outline:2px solid transparent; outline-offset:2px; box-shadow:var(--ring);
}
.form-control::placeholder, .v-input::placeholder, .v-textarea::placeholder{ color:var(--text-3); opacity:1; }
.form-control:disabled, .form-control[readonly], .v-input:disabled, .v-input[readonly], .custom-select:disabled, .v-select:disabled, .v-textarea:disabled{
  color:var(--text-2); background-color:var(--surface-2); border-color:var(--line-2); opacity:1; cursor:not-allowed;
}
.form-control[readonly], .v-input[readonly]{ cursor:default; }
textarea.form-control, .v-textarea{ height:auto; min-height:120px; padding:12px 14px; line-height:1.5; resize:vertical; }
select.form-control, .custom-select, .v-select{
  padding-right:40px; cursor:pointer;
  background-image:var(--chevron); background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px;
}
select.form-control[multiple], select.form-control[size]:not([size="1"]), .custom-select[multiple], .custom-select[size]:not([size="1"]){
  height:auto; padding:8px; background-image:none;
}
select.form-control option, .custom-select option, .v-select option{ color:var(--text-1); background-color:var(--surface); }
.form-control-sm, .custom-select-sm{ height:38px; padding:0 12px; font-size:14px; border-radius:var(--r-sm); }
select.form-control-sm, .custom-select-sm{ padding-right:34px; background-position:right 10px center; }
.form-control-lg, .custom-select-lg{ height:54px; font-size:17px; }
.form-control-file{ font-size:14px; color:var(--text-2); }
.form-control-plaintext{ color:var(--text-1); }
input[type="number"].form-control{ font-variant-numeric:tabular-nums; }
/* validation (crispy: <input class="… is-invalid"> + sibling .invalid-feedback — never wrap the input) */
.form-control.is-invalid, .was-validated .form-control:invalid, .custom-select.is-invalid, .v-input.is-invalid, .v-input[aria-invalid="true"]{
  border-color:var(--danger); background-image:none; padding-right:14px!important;
}
select.form-control.is-invalid, .custom-select.is-invalid{ background-image:var(--chevron); padding-right:40px!important; }
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus, .custom-select.is-invalid:focus, .v-input.is-invalid:focus{ border-color:var(--danger); box-shadow:var(--ring-danger); }
.form-control.is-valid, .was-validated .form-control:valid{ border-color:var(--field-line); background-image:none; padding-right:14px!important; }
.form-control.is-valid:focus, .was-validated .form-control:valid:focus{ border-color:var(--blue-hi); box-shadow:var(--ring); }
.invalid-feedback{ margin-top:7px; font-size:13px; line-height:1.4; color:var(--danger); }
.invalid-feedback strong{ font-weight:500; }
.valid-feedback{ margin-top:7px; font-size:13px; color:var(--success); }
.form-text, small.form-text{ margin-top:7px; font-size:13px; line-height:1.45; color:var(--text-3); }
.form-text ul, .help-block ul{ margin:6px 0 0; padding-left:18px; list-style:disc; }
.form-text li + li{ margin-top:3px; }
/* native checkboxes/radios (crispy .form-check, bare inputs) */
input[type="checkbox"], input[type="radio"]{ accent-color:var(--action); }
.form-check{ padding-left:1.75rem; }
.form-check-input{ width:17px; height:17px; margin-top:.22rem; margin-left:-1.75rem; }
.form-check-inline{ padding-left:0; }
.form-check-inline .form-check-input{ margin-left:0; margin-right:.5rem; }
.form-check-label{ color:var(--text-2); }
.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label{ color:var(--danger); }
/* Bootstrap custom controls (crispy CheckboxSelectMultiple → .custom-control.custom-checkbox) */
.custom-control-label{ color:var(--text-2); cursor:pointer; }
.custom-control-label::before{ background-color:var(--field-bg); border:1px solid var(--field-line); box-shadow:none; }
.custom-checkbox .custom-control-label::before{ border-radius:5px; }
.custom-control-input:checked ~ .custom-control-label::before{ color:#fff; border-color:var(--action); background-color:var(--action); }
.custom-control-input:focus ~ .custom-control-label::before{ box-shadow:none; }
.custom-control-input:focus-visible ~ .custom-control-label::before{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before{ border-color:var(--field-line-hover); }
.custom-control-input:not(:disabled):active ~ .custom-control-label::before{ color:#fff; background-color:color-mix(in srgb, var(--action) 35%, var(--field-bg)); border-color:var(--action); }
.custom-control-input:disabled ~ .custom-control-label, .custom-control-input[disabled] ~ .custom-control-label{ color:var(--text-3); cursor:not-allowed; }
.custom-control-input:disabled ~ .custom-control-label::before, .custom-control-input[disabled] ~ .custom-control-label::before{ background-color:var(--surface-2); border-color:var(--line-2); }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before{ border-color:var(--action); background-color:var(--action); }
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before{ background-color:color-mix(in srgb, var(--action) 50%, transparent); }
.custom-switch .custom-control-label::after{ background-color:var(--text-3); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after{ background-color:#fff; }
.custom-control-input.is-invalid ~ .custom-control-label, .was-validated .custom-control-input:invalid ~ .custom-control-label{ color:var(--danger); }
.custom-control-input.is-invalid ~ .custom-control-label::before{ border-color:var(--danger); }
.custom-file-label{ height:48px; padding:12px 14px; color:var(--text-2); background:var(--field-bg); border:1px solid var(--field-line); border-radius:var(--r-field); }
.custom-file-label::after{ height:46px; padding:12px 16px; color:var(--text-1); background:var(--surface-2); border-left:1px solid var(--line-2); border-radius:0 var(--r-field) var(--r-field) 0; }
.custom-file-input:focus ~ .custom-file-label{ border-color:var(--blue-hi); box-shadow:var(--ring); }
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child){ border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group-text{ min-height:48px; padding:0 14px; font-size:14px; color:var(--text-2); background:var(--surface-2); border:1px solid var(--field-line); border-radius:var(--r-field); }
.form-control-range{ accent-color:var(--action); }
input[type="range"]{ accent-color:var(--action); }

/* opt-in wrapper for Django's plain {{ form.as_p }} / as_table output (no classes on the widgets) */
.v-form p{ margin:0 0 18px; }
.v-form label{ display:block; margin:0 0 8px; font:500 var(--fs-label)/1.3 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-2); }
.v-form :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"]), select, textarea){
  display:block; width:100%; max-width:560px; height:48px; padding:0 14px; margin:0;
  font:400 16px/1.4 var(--font-sans); color:var(--text-1);
  background-color:var(--field-bg); border:1px solid var(--field-line); border-radius:var(--r-field); box-shadow:none;
  transition:border-color var(--dur-1), box-shadow var(--dur-1) var(--ease-out);
}
.v-form :where(select){ padding-right:40px; -webkit-appearance:none; appearance:none; background-image:var(--chevron); background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px; }
.v-form :where(textarea){ height:auto; min-height:120px; padding:12px 14px; }
.v-form :where(input, select, textarea):hover{ border-color:var(--field-line-hover); }
.v-form :where(input, select, textarea):focus{ border-color:var(--blue-hi); outline:2px solid transparent; outline-offset:2px; box-shadow:var(--ring); }
.v-form :where(input[type="checkbox"], input[type="radio"]){ width:17px; height:17px; margin:0 8px 0 0; vertical-align:-3px; accent-color:var(--action); }
.v-form :where(p:has(> input[type="checkbox"]), p:has(> input[type="radio"])) > label{ display:inline; margin-right:10px; }
.v-form .helptext{ display:block; margin-top:7px; font-size:13px; line-height:1.45; color:var(--text-3); }
.v-form .errorlist{ margin:0 0 8px; padding:0; list-style:none; font-size:13px; color:var(--danger); }

/* ───────────────────────── 7. alerts + flash messages ───────────────────────── */
.alert{
  position:relative; margin-bottom:16px; padding:12px 16px; border:1px solid var(--tone-info-line); border-radius:var(--r-field);
  font-size:14.5px; line-height:1.5; color:var(--tone-info-text); background:var(--tone-info-bg);
}
.alert ul, .alert ol{ margin:0; padding-left:18px; }
.alert-block ul.m-0{ padding-left:0; list-style:none; }
.alert-heading{ color:inherit; }
.alert-link{ font-weight:600; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.alert-primary, .alert-info{ color:var(--tone-info-text); background:var(--tone-info-bg); border-color:var(--tone-info-line); }
.alert-success{ color:var(--tone-success-text); background:var(--tone-success-bg); border-color:var(--tone-success-line); }
.alert-warning{ color:var(--tone-warning-text); background:var(--tone-warning-bg); border-color:var(--tone-warning-line); }
.alert-danger{ color:var(--tone-danger-text); background:var(--tone-danger-bg); border-color:var(--tone-danger-line); }
.alert-secondary, .alert-light, .alert-dark{ color:var(--text-2); background:var(--surface-2); border-color:var(--line-2); }
.alert-dismissible{ padding-right:48px; }
.alert-dismissible .close{ padding:10px 14px; }
.close{ color:currentColor; text-shadow:none; opacity:.7; font-weight:400; }
.close:hover{ color:currentColor; }
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover{ opacity:1; }
/* v28 inline notice (in-page, not a toast) */
.v-alert{
  display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border-radius:var(--r-field);
  font-size:14.5px; line-height:1.5; color:var(--tone-info-text); background:var(--tone-info-bg); box-shadow:inset 0 0 0 1px var(--tone-info-line);
}
.v-alert > svg{ flex:none; width:18px; height:18px; margin-top:2px; }
.v-alert--success{ color:var(--tone-success-text); background:var(--tone-success-bg); box-shadow:inset 0 0 0 1px var(--tone-success-line); }
.v-alert--warning{ color:var(--tone-warning-text); background:var(--tone-warning-bg); box-shadow:inset 0 0 0 1px var(--tone-warning-line); }
.v-alert--danger{ color:var(--tone-danger-text); background:var(--tone-danger-bg); box-shadow:inset 0 0 0 1px var(--tone-danger-line); }
.v-alert a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* Django messages (partials/messages.html): a toast stack under the nav. Markup hooks are kept for the page JS
   that already binds them (.custom-message__close is a direct child; .closing = leaving).
   base.html renders them into #v-flash-src; app.js moves them into the (empty at load) live region #v-flash ~150 ms
   later so screen readers announce them. With JS the source stack stays hidden; if app.js never runs, a 1.5 s
   failsafe reveals it in place (and without JS at all it simply shows).
   At every width the stack sits IN FLOW at the top of <main> and is sticky under the nav: it pushes the page down
   instead of covering the eyebrow, h1 or a settings sub-nav (a fixed stack did, from 600 px up, and errors/warnings
   never auto-hide). A dismissed toast collapses its own space (app.js animates the height when the stack is not
   position:fixed). Centred, 560 max, inside the gutter. The stack sticks flush to the nav (top = --nav-h, so it
   never drifts out of its own slot at rest); each toast's 12 px top margin is the gap under the nav. */
.v-flash{
  position:sticky; top:var(--nav-h); z-index:var(--z-flash);
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  width:min(560px, calc(100% - 2 * var(--gutter))); margin:0 auto; pointer-events:none;
}
.v-flash:empty, .v-flash:not(:has(.custom-message)){ display:none; }
html.js .v-flash--src{ visibility:hidden; animation:v-flash-failsafe 0s 1.5s forwards; }
@keyframes v-flash-failsafe{ to{ visibility:visible; } }
.v-flash .custom-message{
  position:relative; inset:auto; left:auto; top:auto; right:auto; bottom:auto; transform:none;
  display:flex; align-items:flex-start; gap:12px; width:auto; max-width:none; margin:12px 0 0;
  padding:12px 8px 12px 14px; border:0; border-radius:var(--r-md);
  font:400 14.5px/1.45 var(--font-sans); color:var(--text-1); text-align:left;
  background:var(--glass-strong); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter);
  box-shadow:inset 0 0 0 1px var(--tone-success-line), var(--shadow-pop);
  pointer-events:auto;
  animation:v-toast-in var(--dur-2) var(--ease-out) both;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.v-flash .custom-message.closing{
  opacity:0; transform:translateY(-6px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), padding .3s var(--ease-out);
}
@keyframes v-toast-in{ from{ opacity:0; transform:translateY(-8px); } }
.v-flash .custom-message__icon{ display:grid; place-items:center; flex:none; width:26px; height:26px; margin-top:-2px; border-radius:50%; color:var(--success); background:var(--tone-success-bg); }
.v-flash .custom-message__icon svg{ width:15px; height:15px; }
.v-flash .custom-message__content{ flex:1; min-width:0; padding-top:1px; }
.v-flash .custom-message__text{ overflow-wrap:anywhere; margin:0; color:var(--text-1); font-size:14.5px; }
.v-flash .custom-message__close{
  display:grid; place-items:center; flex:none; width:30px; height:30px; margin:-4px 0 -4px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--text-2); cursor:pointer; position:static;
}
.v-flash .custom-message__close:hover{ color:var(--text-1); background:var(--surface-2); }
.v-flash .custom-message__close svg{ width:14px; height:14px; }
.v-flash .custom-message--error{ box-shadow:inset 0 0 0 1px var(--tone-danger-line), var(--shadow-pop); }
.v-flash .custom-message--error .custom-message__icon{ color:var(--danger); background:var(--tone-danger-bg); }
.v-flash .custom-message--warning{ box-shadow:inset 0 0 0 1px var(--tone-warning-line), var(--shadow-pop); }
.v-flash .custom-message--warning .custom-message__icon{ color:var(--warning); background:var(--tone-warning-bg); }
.v-flash .custom-message--info{ box-shadow:inset 0 0 0 1px var(--tone-info-line), var(--shadow-pop); }
.v-flash .custom-message--info .custom-message__icon{ color:var(--blue-hi); background:var(--tone-info-bg); }

/* ───────────────────────── 8. panels, cards, lists ───────────────────────── */
.v-panel{
  position:relative; min-width:0; padding:24px; border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--edge), var(--shadow-1); color:var(--text-2);
}
@media (min-width:900px){ .v-panel{ padding:28px; } .v-panel--lg{ padding:36px; } }
.v-panel--sm{ padding:16px 18px; border-radius:var(--r-md); }
.v-panel--flush{ padding:0; overflow:hidden; }
.v-panel--sunk{ background:var(--surface-2); box-shadow:var(--edge); }
/* the landing's contact panel: glass gradient + a cyan hairline on the top edge */
.v-panel--glass{ background:var(--glass-panel); box-shadow:var(--edge-2), var(--lift); }
.v-panel--glass::before{
  content:""; position:absolute; left:24px; right:24px; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 60%, transparent), transparent);
}
/* safe-zone corner brackets (the hero frame motif) on ANY element: drawn on ::after, so they compose with the host's own
   background. Tune with --v-brackets-inset (10px; negative = outside the box) and --v-brackets-len (14px). The host gets
   position:relative at zero specificity (a page's own position wins); do not use it on an element whose ::after is taken. */
:where(.v-brackets, .v-panel--brackets){ position:relative; }
.v-brackets::after, .v-panel--brackets::after{
  content:""; position:absolute; inset:var(--v-brackets-inset, 10px); pointer-events:none; border-radius:0;
  --l:var(--v-brackets-len, 14px);
  background:
    linear-gradient(var(--brackets-c),var(--brackets-c)) left top/var(--l) 1px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) right top/var(--l) 1px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) left bottom/var(--l) 1px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) right bottom/var(--l) 1px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) right bottom/1px var(--l) no-repeat;
}
.v-panel__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:20px; }
.v-panel__title{ margin:0; font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:-.01em; color:var(--text-1); }
.v-panel__sub{ margin:4px 0 0; font-size:14px; color:var(--text-3); }
.v-panel__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
/* interactive card (whole card is a link/button) */
.v-card{
  position:relative; display:flex; flex-direction:column; min-width:0; padding:22px; border-radius:var(--r-lg);
  color:var(--text-2); background:var(--surface); box-shadow:var(--edge), var(--shadow-1); text-decoration:none;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1);
}
a.v-card:hover, button.v-card:hover, .v-card--hover:hover{ color:var(--text-2); transform:translateY(-2px); box-shadow:var(--card-hover-edge), var(--shadow-2); }
.v-card__title{ margin:0; font:600 var(--fs-h4)/1.3 var(--font-sans); color:var(--text-1); }
.v-card__text{ margin:6px 0 0; font-size:14.5px; color:var(--text-2); }
.v-card__icon{ display:grid; place-items:center; width:42px; height:42px; margin-bottom:16px; border-radius:13px; color:var(--blue-hi); background:var(--surface-2); box-shadow:var(--edge); }
.v-card__icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* status / feature icon tile: one recipe for "Password set", "Payment successful", empty states …
   sizes: --sm 40 · default 52 · --lg 64 (radius scales); tones: --success --warning --danger --info --accent */
.v-icon-tile{
  --tile:52px;
  display:grid; place-items:center; flex:none; width:var(--tile); height:var(--tile); border-radius:calc(var(--tile) * .3);
  color:var(--blue-hi); background:var(--surface-2); box-shadow:var(--edge-2);
}
.v-icon-tile svg{ width:calc(var(--tile) * .46); height:calc(var(--tile) * .46); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.v-icon-tile--sm{ --tile:40px; } .v-icon-tile--lg{ --tile:64px; }
.v-icon-tile--success{ color:var(--tone-success-text); background:var(--tone-success-bg); box-shadow:inset 0 0 0 1px var(--tone-success-line); }
.v-icon-tile--warning{ color:var(--tone-warning-text); background:var(--tone-warning-bg); box-shadow:inset 0 0 0 1px var(--tone-warning-line); }
.v-icon-tile--danger{ color:var(--tone-danger-text); background:var(--tone-danger-bg); box-shadow:inset 0 0 0 1px var(--tone-danger-line); }
.v-icon-tile--info{ color:var(--tone-info-text); background:var(--tone-info-bg); box-shadow:inset 0 0 0 1px var(--tone-info-line); }
.v-icon-tile--accent{ color:var(--tone-accent-text); background:var(--tone-accent-bg); box-shadow:inset 0 0 0 1px var(--tone-accent-line); }
/* check list (plan features, "included" lists): ul.v-checklist > li; a single check glyph: <span class="v-check"></span> */
.v-checklist{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.v-checklist > li{ position:relative; padding-left:26px; color:var(--text-2); }
.v-checklist > li::before, .v-check{
  content:""; display:inline-block; flex:none; width:16px; height:16px; background:var(--v-check-color, var(--cyan));
  -webkit-mask:var(--v-check-mask) center/16px 16px no-repeat; mask:var(--v-check-mask) center/16px 16px no-repeat;
}
.v-checklist > li::before{ position:absolute; left:0; top:calc(.8em - 8px); }
.v-check{ vertical-align:-3px; }
/* key/value rows (plan, renew date, seats …) */
.v-kv{ display:grid; grid-template-columns:minmax(0, max-content) minmax(0, 1fr); gap:10px 24px; margin:0; }
.v-kv dt{ font:500 var(--fs-label)/1.6 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
.v-kv dd{ margin:0; color:var(--text-1); font-weight:500; min-width:0; overflow-wrap:anywhere; }
/* stat tile */
.v-stat{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.v-stat__value{ font:600 clamp(26px, calc(1vw + 18px), 34px)/1 var(--font-sans); letter-spacing:-.03em; color:var(--text-1); font-variant-numeric:tabular-nums; }
.v-stat__label{ font:500 var(--fs-label)/1.3 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
/* list rows */
.v-list{ margin:0; padding:0; list-style:none; }
.v-list > li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); min-width:0; }
.v-list > li:first-child{ border-top:0; }
.v-list--boxed{ border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--edge), var(--shadow-1); }
.v-list--boxed > li{ padding:14px 18px; }
/* meter (seats used, quota) */
.v-meter{ position:relative; height:8px; border-radius:var(--r-pill); background:var(--surface-2); box-shadow:var(--edge); overflow:hidden; }
.v-meter__bar{ display:block; height:100%; width:0; border-radius:inherit; background:var(--action-grad); }
.v-meter--warn .v-meter__bar{ background:var(--warning); }
.v-meter--full .v-meter__bar{ background:var(--danger); }

/* Bootstrap .card / .list-group reskin (search_and_edit_users etc.) */
.card{ background:var(--surface); border:0; border-radius:var(--r-lg); box-shadow:var(--edge), var(--shadow-1); color:var(--text-2); }
.card-header{ padding:16px 22px; background:transparent; border-bottom:1px solid var(--line); color:var(--text-1); font-weight:600; }
.card-header:first-child{ border-radius:var(--r-lg) var(--r-lg) 0 0; }
.card-body{ padding:22px; }
.card-footer{ padding:14px 22px; background:transparent; border-top:1px solid var(--line); }
.card-footer:last-child{ border-radius:0 0 var(--r-lg) var(--r-lg); }
.card-title{ color:var(--text-1); font-weight:600; }
.list-group-item{ color:var(--text-2); background:var(--surface); border-color:var(--line); padding:12px 18px; }
.list-group-item:first-child{ border-top-left-radius:var(--r-md); border-top-right-radius:var(--r-md); }
.list-group-item:last-child{ border-bottom-left-radius:var(--r-md); border-bottom-right-radius:var(--r-md); }
.list-group-item-action{ color:var(--text-2); }
.list-group-item-action:hover, .list-group-item-action:focus{ color:var(--text-1); background:var(--surface-2); }
.list-group-item.active{ color:#fff; background:var(--action); border-color:var(--action); }

/* ───────────────────────── 9. chips, badges, status ───────────────────────── */
.v-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:0; border-radius:var(--r-pill);
  font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  color:var(--text-2); background:transparent; box-shadow:var(--edge-2); text-decoration:none;
}
.v-chip svg{ width:12px; height:12px; }
a.v-chip, button.v-chip{ cursor:pointer; transition:color var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-1); }
a.v-chip:hover, button.v-chip:hover{ color:var(--text-1); background:var(--surface-2); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 50%, transparent); }
.v-chip.is-on, .v-chip[aria-current="page"], .v-chip[aria-current="true"], .v-chip[aria-pressed="true"]{ color:#fff; background:var(--action); box-shadow:none; }
.v-chip--sans{ font:500 13px/1.2 var(--font-sans); letter-spacing:0; text-transform:none; padding:7px 13px; }
.v-chip--accent, .v-chip--live{ color:var(--tone-accent-text); background:var(--tone-accent-bg); box-shadow:inset 0 0 0 1px var(--tone-accent-line); }
.v-chip--info{ color:var(--tone-info-text); background:var(--tone-info-bg); box-shadow:inset 0 0 0 1px var(--tone-info-line); }
.v-chip--success{ color:var(--tone-success-text); background:var(--tone-success-bg); box-shadow:inset 0 0 0 1px var(--tone-success-line); }
.v-chip--warning{ color:var(--tone-warning-text); background:var(--tone-warning-bg); box-shadow:inset 0 0 0 1px var(--tone-warning-line); }
.v-chip--danger{ color:var(--tone-danger-text); background:var(--tone-danger-bg); box-shadow:inset 0 0 0 1px var(--tone-danger-line); }
.v-chip--sm{ padding:4px 8px; font-size:10.5px; }
.v-dot{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--text-3); vertical-align:middle; }
.v-dot--info{ background:var(--blue); } .v-dot--success, .v-dot--live{ background:var(--success); } .v-dot--warning{ background:var(--warning); } .v-dot--danger{ background:var(--danger); }
.v-dot--accent{ background:var(--cyan); }
.v-dot--live, .v-dot--success{ box-shadow:var(--glow-success); }
.v-dot--accent{ box-shadow:var(--glow-accent); }
/* uniqueness score bands (scores ONLY) */
.v-band{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; vertical-align:middle; }
.v-band--r{ background:var(--u-red); } .v-band--a{ background:var(--u-amber); } .v-band--g{ background:var(--u-green); } .v-band--off{ background:var(--line-2); }
.v-band--r{ box-shadow:var(--glow-u-red); } .v-band--a{ box-shadow:var(--glow-u-amber); } .v-band--g{ box-shadow:var(--glow-u-green); }
/* Bootstrap .badge reskin */
.badge{ padding:4px 8px; border-radius:var(--r-pill); font:500 11.5px/1.2 var(--font-mono); letter-spacing:.02em; color:var(--text-2); background:var(--surface-2); box-shadow:var(--edge-2); }
.badge-primary, .badge-info{ color:var(--tone-info-text); background:var(--tone-info-bg); box-shadow:inset 0 0 0 1px var(--tone-info-line); }
.badge-success{ color:var(--tone-success-text); background:var(--tone-success-bg); box-shadow:inset 0 0 0 1px var(--tone-success-line); }
.badge-warning{ color:var(--tone-warning-text); background:var(--tone-warning-bg); box-shadow:inset 0 0 0 1px var(--tone-warning-line); }
.badge-danger{ color:var(--tone-danger-text); background:var(--tone-danger-bg); box-shadow:inset 0 0 0 1px var(--tone-danger-line); }
.badge-secondary, .badge-light, .badge-dark{ color:var(--text-2); background:var(--surface-2); box-shadow:var(--edge-2); }
a.badge:hover, a.badge:focus{ color:var(--text-1); }

/* ───────────────────────── 10. tables ───────────────────────── */
.table, .v-table{ width:100%; margin-bottom:0; color:var(--text-2); font-size:14.5px; border-collapse:collapse; }
.table th, .table td, .v-table th, .v-table td{ padding:12px 16px; vertical-align:middle; border-top:1px solid var(--line); }
.table thead th, .v-table thead th{
  border-top:0; border-bottom:1px solid var(--line-2); white-space:nowrap; text-align:left;
  font:500 var(--fs-label)/1.3 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);
}
.table tbody + tbody{ border-top:1px solid var(--line-2); }
.table td strong, .v-table td strong{ color:var(--text-1); }
.table-sm th, .table-sm td{ padding:8px 12px; }
.table-bordered, .table-bordered th, .table-bordered td{ border:1px solid var(--line); }
.table-striped tbody tr:nth-of-type(odd), .v-table--striped tbody tr:nth-of-type(odd){ background-color:var(--row-stripe); }
.table-hover tbody tr:hover, .v-table--hover tbody tr:hover{ color:var(--text-1); background-color:var(--row-hover); }
.table .thead-light th, .table .thead-dark th{ color:var(--text-3); background:var(--surface-2); border-color:var(--line); }
.v-table-wrap{ overflow-x:auto; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--edge), var(--shadow-1); -webkit-overflow-scrolling:touch; }
.v-table-wrap .v-table tr:first-child td{ border-top:0; }
.v-table .v-num, .v-table td.v-num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ───────────────────────── 11. pagination, segmented control, tabs ───────────────────────── */
.pagination{ flex-wrap:wrap; gap:6px; margin:0; }
.pagination .page-item .page-link{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; margin:0;
  border:0; border-radius:var(--r-sm); font:500 13px/1 var(--font-mono); font-variant-numeric:tabular-nums;
  color:var(--text-2); background:var(--surface); box-shadow:var(--edge);
}
.pagination .page-item .page-link:hover{ z-index:auto; color:var(--text-1); background:var(--surface-2); box-shadow:var(--edge-2); }
.pagination .page-item .page-link:focus{ box-shadow:var(--edge-2); }
.pagination .page-item.active .page-link{ color:#fff; background:var(--action); box-shadow:none; }
.pagination .page-item.disabled .page-link{ color:var(--text-3); background:transparent; box-shadow:var(--edge); opacity:.6; }
.v-seg{ display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:var(--r-pill); background:var(--surface-2); box-shadow:var(--edge); }
.v-seg > a, .v-seg > button{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 13px; border:0; border-radius:var(--r-pill);
  font:500 13.5px/1 var(--font-sans); color:var(--text-2); background:transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1);
}
.v-seg > a:hover, .v-seg > button:hover{ color:var(--text-1); }
/* selected: a 1.5px action ring (>=3:1 against the track in both themes, WCAG 1.4.11) + brand text, like .lv-card.on */
.v-seg > .is-on, .v-seg > [aria-current="page"], .v-seg > [aria-current="true"], .v-seg > [aria-pressed="true"], .v-seg > [aria-selected="true"]{
  color:var(--blue-hi); background:var(--seg-on-bg); box-shadow:inset 0 0 0 1.5px var(--action), var(--shadow-1);
}
.nav-tabs{ border-bottom:1px solid var(--line); }
.nav-tabs .nav-link{ color:var(--text-2); border:0; border-bottom:2px solid transparent; border-radius:0; padding:10px 4px; margin-right:18px; font-weight:500; }
.nav-tabs .nav-link:hover{ color:var(--text-1); border-color:transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{ color:var(--text-1); background:transparent; border-bottom-color:var(--action); }

/* ───────────────────────── 12. overlays: modals, dropdowns, tooltips, progress ───────────────────────── */
.modal-content{ color:var(--text-2); background:var(--modal-bg); border:0; border-radius:var(--r-lg); box-shadow:var(--edge-2), var(--shadow-pop); }
.modal-header{ align-items:center; padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-header .close{ margin:-6px -8px -6px auto; padding:6px 10px; color:var(--text-2); }
.modal-title{ font:600 18px/1.3 var(--font-sans); letter-spacing:-.01em; color:var(--text-1); }
.modal-body{ padding:22px; }
.modal-footer{ padding:14px 22px; border-top:1px solid var(--line); gap:8px; }
.modal-footer > *{ margin:0; }
.modal-backdrop{ background-color:var(--overlay); }
.modal-backdrop.show{ opacity:1; }
/* native <dialog> recipe */
.v-dialog{
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; margin:auto; border:0;
  color:var(--text-2); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--edge-2), var(--shadow-pop); overflow:auto;
}
.v-dialog::backdrop{ background:var(--overlay); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.v-dialog[open]{ animation:v-pop-in var(--dur-2) var(--ease-out) both; }
@keyframes v-pop-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } }
.v-dialog__head{ display:flex; align-items:center; gap:12px; padding:18px 18px 18px 22px; border-bottom:1px solid var(--line); }
.v-dialog__title{ margin:0; flex:1; font:600 18px/1.3 var(--font-sans); color:var(--text-1); }
.v-dialog__body{ padding:22px; }
.v-dialog__foot{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:14px 22px; border-top:1px solid var(--line); }
.v-icon-btn{
  display:inline-grid; place-items:center; flex:none; width:38px; height:38px; padding:0; border:0; border-radius:50%;
  color:var(--text-1); background:color-mix(in srgb, var(--surface-2) 70%, transparent); box-shadow:var(--edge-2); cursor:pointer;
  transition:box-shadow var(--dur-1), background-color var(--dur-1), color var(--dur-1);
}
.v-icon-btn:hover{ color:var(--text-1); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 50%, transparent); }
.v-icon-btn svg{ width:18px; height:18px; }
.v-icon-btn--sm{ width:30px; height:30px; } .v-icon-btn--sm svg{ width:14px; height:14px; }
.dropdown-menu{ padding:6px; color:var(--text-2); background:var(--surface); border:0; border-radius:var(--r-md); box-shadow:var(--edge-2), var(--shadow-pop); font-size:14.5px; }
.dropdown-item{ padding:9px 12px; border-radius:var(--r-sm); color:var(--text-2); }
.dropdown-item:hover, .dropdown-item:focus{ color:var(--text-1); background:var(--surface-2); }
.dropdown-item.active, .dropdown-item:active{ color:#fff; background:var(--action); }
.dropdown-divider{ border-top-color:var(--line); }
.dropdown-header{ font:500 var(--fs-label)/1.3 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
.tooltip{ font-family:var(--font-sans); }
.tooltip-inner{ max-width:260px; padding:7px 10px; border-radius:8px; font-size:12.5px; line-height:1.4; text-align:left; color:#EEF3FF; background:#0B1220; box-shadow:0 0 0 1px rgba(150,180,255,.18), 0 10px 30px -10px rgba(0,0,0,.5); }
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before{ border-top-color:#0B1220; }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before{ border-bottom-color:#0B1220; }
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before{ border-left-color:#0B1220; }
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before{ border-right-color:#0B1220; }
.popover{ color:var(--text-2); background:var(--surface); border:0; border-radius:var(--r-md); box-shadow:var(--edge-2), var(--shadow-pop); font-family:var(--font-sans); }
.popover-header{ color:var(--text-1); background:transparent; border-bottom-color:var(--line); }
.popover-body{ color:var(--text-2); }
.progress{ height:8px; border-radius:var(--r-pill); background:var(--surface-2); box-shadow:var(--edge); }
.progress-bar{ background:var(--action-grad); }
.spinner-border, .spinner-grow{ color:var(--blue); }
.v-spinner{ display:inline-block; width:18px; height:18px; border-radius:50%; border:2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color:currentColor; animation:v-spin .8s linear infinite; vertical-align:-3px; }
@keyframes v-spin{ to{ transform:rotate(360deg); } }
.v-skeleton{ border-radius:var(--r-sm); background:linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 40%, var(--surface)), var(--surface-2)); background-size:200% 100%; animation:v-shimmer 1.4s linear infinite; }
@keyframes v-shimmer{ to{ background-position:-200% 0; } }

/* ───────────────────────── 13. empty state ───────────────────────── */
.v-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:clamp(40px, 6vw, 72px) 24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--edge);
}
.v-empty--bare{ background:none; box-shadow:none; }
.v-empty__icon{ display:grid; place-items:center; width:56px; height:56px; margin-bottom:6px; border-radius:18px; color:var(--blue-hi); background:var(--surface-2); box-shadow:var(--edge-2); }
.v-empty__icon svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.v-empty__title{ margin:0; font:600 var(--fs-h4)/1.3 var(--font-sans); color:var(--text-1); }
.v-empty__text{ max-width:44ch; margin:0; font-size:15px; color:var(--text-2); }
.v-empty__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:12px; }

/* ───────────────────────── 14. auth layout (login, signup, reset flow) ───────────────────────── */
.v-auth{ display:grid; place-items:center; min-height:calc(100vh - var(--nav-h) - 120px); padding:clamp(28px, 6vh, 72px) var(--gutter) clamp(56px, 8vh, 96px); }
.v-auth__card{ width:100%; max-width:460px; }
.v-auth__head{ margin-bottom:26px; }
.v-auth__title{ margin:0; font:600 clamp(28px, calc(1.2vw + 20px), 36px)/1.08 var(--font-sans); letter-spacing:-.035em; color:var(--text-1); }
.v-auth__sub{ margin:10px 0 0; color:var(--text-2); font-size:15.5px; }
.v-auth__foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px; margin-top:20px; font-size:14.5px; color:var(--text-3); }
.v-auth__foot a{ color:var(--link); font-weight:500; }
.v-auth__foot a:hover{ color:var(--link-hover); text-decoration:underline; text-underline-offset:4px; }

/* ───────────────────────── 15. nav (partials/header.html) ───────────────────────── */
.v-brand{ display:inline-flex; align-items:center; gap:10px; flex:none; color:var(--text-1); font:600 18px/1 var(--font-sans); letter-spacing:-.025em; border-radius:8px; text-decoration:none; }
.v-brand:hover{ color:var(--text-1); }
.v-brand__mark{ display:block; height:26px; width:auto; flex:none; fill:var(--blue); }
.v-nav{
  position:sticky; top:0; z-index:var(--z-nav); flex:none; height:var(--nav-h);
  background:var(--nav-bg); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter);
  box-shadow:inset 0 -1px 0 var(--line);
}
.v-nav__inner{ display:flex; align-items:center; gap:24px; height:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.v-nav__links{ display:none; }
.v-nav__actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.v-nav__wide{ display:none; }
.v-nav__toggle{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 11px; margin:0;
  border:0; border-radius:var(--r-pill); background:var(--ghost-bg); box-shadow:var(--edge-2);
  color:var(--text-1); font:500 14px/1 var(--font-sans); cursor:pointer;
}
.v-nav__toggle:hover{ box-shadow:inset 0 0 0 1px var(--ghost-line-hover); }
.v-nav__toggle svg{ width:18px; height:18px; }
html.no-js .v-nav__toggle{ display:none; }
/* compact bar on small phones. The logged-in bar (brand + "New task" + "Menu" + 2 gutters) needs ~381 px at full size,
   ~369 px with the tighter gap and ~321 px with an icon-only toggle, so its "Menu" label goes below 380 (360/375 phones);
   the logged-out bar (Sign up is narrower) keeps the label down to 360, like the landing. */
@media (max-width:389px){ .v-nav__inner{ gap:12px; } }
@media (max-width:379px){
  .v-nav__actions--app .v-nav__toggle{ padding:0 11px; }
  .v-nav__actions--app .v-nav__toggle-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
@media (max-width:359px){
  .v-nav__toggle{ padding:0 11px; }
  .v-nav__toggle-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
@media (min-width:1080px){
  .v-nav__links{ display:flex; align-items:center; gap:clamp(16px, 1.8vw, 28px); margin-inline:auto; }
  .v-nav__links a{ position:relative; padding:8px 0; font:500 14.5px/1 var(--font-sans); color:var(--text-2); white-space:nowrap; border-radius:4px; transition:color var(--dur-1); }
  .v-nav__links a:hover{ color:var(--text-1); }
  .v-nav__links a[aria-current="page"]{ color:var(--text-1); }
  .v-nav__links a[aria-current="page"]::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
    background:linear-gradient(90deg, var(--blue), var(--cyan));
  }
  .v-nav__actions{ margin-left:0; }
  .v-nav__wide{ display:inline-flex; }
  .v-nav__toggle{ display:none; }
}
/* no-js fallback below 1080: the links become a scrollable row under the bar */
@media (max-width:1079px){
  html.no-js .v-nav{ height:auto; }
  html.no-js .v-nav__inner{ flex-wrap:wrap; padding-block:10px; }
  html.no-js .v-nav__links{ display:flex; gap:18px; order:3; width:100%; overflow-x:auto; padding-bottom:4px; }
  html.no-js .v-nav__links a{ color:var(--text-2); white-space:nowrap; font-size:14px; }
}
/* "New task" disclosure */
.v-pop{ position:relative; }
.v-pop__toggle svg{ width:14px; height:14px; transition:transform var(--dur-2) var(--ease-out); }
.v-pop.is-open .v-pop__toggle svg{ transform:rotate(180deg); }
.v-pop__panel{
  position:absolute; right:0; top:calc(100% + 10px); z-index:2; display:none;
  width:min(300px, calc(100vw - 24px)); padding:6px; border-radius:var(--r-md);
  background:var(--surface); box-shadow:var(--edge-2), var(--shadow-pop);
}
.v-pop.is-open .v-pop__panel{ display:block; animation:v-pop-in var(--dur-2) var(--ease-out) both; }
html.no-js .v-pop:focus-within .v-pop__panel{ display:block; }
/* phones: the panel spans the bar (its containing block becomes the sticky .v-nav) */
@media (max-width:599px){
  .v-pop{ position:static; }
  .v-pop__panel{ left:12px; right:12px; top:calc(100% + 6px); width:auto; }
}
.v-pop__item{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:var(--r-sm); color:var(--text-2); text-decoration:none; }
.v-pop__item:hover, .v-pop__item:focus-visible{ color:var(--text-2); background:var(--surface-2); }
.v-pop__item strong{ display:block; color:var(--text-1); font-weight:600; font-size:14.5px; line-height:1.3; }
.v-pop__item span span{ display:block; margin-top:2px; font-size:13px; line-height:1.4; color:var(--text-3); }
.v-pop__ico{ display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px; color:var(--blue-hi); background:var(--surface-2); box-shadow:var(--edge); }
.v-pop__item:hover .v-pop__ico{ background:var(--surface); }
.v-pop__ico svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* mobile menu sheet */
.v-menu-scrim{
  position:fixed; inset:0; z-index:calc(var(--z-menu) - 1); background:var(--overlay);
  opacity:0; visibility:hidden; transition:opacity var(--dur-2), visibility 0s var(--dur-2);
}
.v-menu-scrim.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur-2); }
.v-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:var(--z-menu);
  width:min(380px, 88vw); display:flex; flex-direction:column;
  padding:0 20px calc(24px + env(safe-area-inset-bottom));
  background:var(--glass-strong); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter);
  box-shadow:inset 1px 0 0 var(--line), -40px 0 80px -24px rgba(0,0,0,.45);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(102%); visibility:hidden;
  transition:transform var(--dur-3) var(--ease-out), visibility 0s var(--dur-3);
}
.v-menu.is-open{ transform:none; visibility:visible; transition:transform var(--dur-3) var(--ease-out); }
.v-menu__head{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); flex:none; }
.v-menu__list{ margin:12px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); counter-reset:v-mm -1; }
.v-menu__list li{ border-bottom:1px solid var(--line); }
.v-menu__list a{
  display:flex; align-items:center; gap:16px; min-height:52px; padding:4px;
  font:500 19px/1.2 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); text-decoration:none;
}
.v-menu__list a::before{
  counter-increment:v-mm; content:counter(v-mm, decimal-leading-zero);
  width:22px; flex:none; font:500 11px/1 var(--font-mono); letter-spacing:.06em; color:var(--text-3);
}
.v-menu__list a:hover{ color:var(--blue-hi); }
.v-menu__list a[aria-current="page"]{ color:var(--blue-hi); }
.v-menu__list a[aria-current="page"]::before{ color:var(--cyan); }
.v-menu__auth{ display:grid; gap:10px; margin-top:24px; }
.v-menu__foot{ margin-top:auto; padding-top:28px; font:500 11px/1.5 var(--font-mono); letter-spacing:.06em; color:var(--text-3); overflow-wrap:anywhere; }
.v-menu__foot b{ display:block; font-weight:500; text-transform:uppercase; }
@media (min-width:1080px){ .v-menu, .v-menu-scrim{ display:none; } }

/* ───────────────────────── 16. footer (partials/footer.html) ───────────────────────── */
.v-foot{ position:relative; flex:none; overflow:clip; margin-top:auto; padding-top:56px; background:var(--bg-alt); border-top:1px solid var(--line); color:var(--text-2); }
.v-foot__cols{ display:grid; gap:32px 24px; grid-template-columns:1fr 1fr; }
.v-foot__brand{ grid-column:1 / -1; }
.v-foot__brand p{ max-width:30ch; margin:16px 0 0; color:var(--text-2); text-wrap:balance; }
.v-foot__label{ margin:0 0 16px; font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
.v-foot ul{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.v-foot ul a{ color:var(--text-2); border-radius:4px; text-decoration:none; transition:color var(--dur-1); }
.v-foot ul a:hover{ color:var(--text-1); }
.v-foot__copy{ margin:48px 0 0; padding:22px 0 calc(92px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); font:500 12px/1.4 var(--font-mono); color:var(--text-3); }
.v-foot__wordmark{
  position:relative; display:none; justify-items:center; margin-top:18px; padding-bottom:calc(16px + env(safe-area-inset-bottom));
  font:600 clamp(64px, 16vw, 240px)/.86 var(--font-sans); letter-spacing:-.05em;
  user-select:none; pointer-events:none; white-space:nowrap;
}
.v-foot__wordmark > span{ grid-area:1 / 1; color:var(--ink-1); -webkit-text-fill-color:var(--ink-1); paint-order:stroke fill; }
.v-foot__wordmark > .v-foot__wordmark-main{ -webkit-text-stroke:2px rgba(150,180,255,.34); color:#0A101D; -webkit-text-fill-color:#0A101D; }
.v-foot__wordmark-echo{ -webkit-text-stroke:2px rgba(124,231,255,.16); }
.v-foot__wordmark-echo--a{ transform:translateY(-.06em); }
.v-foot__wordmark-echo--b{ transform:translateY(.06em); }
[data-theme="dark"] .v-foot__wordmark{ display:grid; }
[data-theme="dark"] .v-foot__copy{ padding-bottom:22px; }
@media (min-width:900px){
  .v-foot{ padding-top:72px; }
  .v-foot__cols{ grid-template-columns:1.5fr 1fr 1fr; }
  .v-foot__brand{ grid-column:auto; }
}
/* light (app): the same component, compact */
[data-theme="light"] .v-foot{ padding-top:40px; }
[data-theme="light"] .v-foot__brand p{ margin-top:12px; font-size:14.5px; }
[data-theme="light"] .v-foot ul{ gap:8px; font-size:14.5px; }
[data-theme="light"] .v-foot__copy{ margin-top:32px; }
@media (min-width:900px){ [data-theme="light"] .v-foot{ padding-top:48px; } [data-theme="light"] .v-foot__copy{ padding-bottom:28px; } }

/* ───────────────────────── 17. forced colors ───────────────────────── */
@media (forced-colors:active){
  .v-btn, .btn, .v-nav__toggle, .v-icon-btn, .v-chip, .badge, .v-seg, .pagination .page-link, .v-flash .custom-message__close{ border:1px solid ButtonText; }
  .v-panel, .v-card, .card, .v-empty, .v-flash .custom-message, .modal-content, .v-dialog, .v-pop__panel, .v-menu, .v-table-wrap, .v-alert{ border:1px solid CanvasText; }
  .v-btn[disabled], .v-btn:disabled, .btn:disabled, .btn.disabled{ color:GrayText; border-color:GrayText; opacity:1; }
  .v-chip.is-on, .v-chip[aria-current="page"], .v-seg > .is-on, .v-seg > [aria-current="page"], .pagination .page-item.active .page-link{ forced-color-adjust:none; background:Highlight; color:HighlightText; }
  .v-nav__links a[aria-current="page"]::after{ background:CanvasText; }
  .form-control:focus, .custom-select:focus, .v-input:focus{ outline:2px solid Highlight; outline-offset:2px; }
  .v-band, .v-dot{ forced-color-adjust:none; }
  .v-checklist > li::before, .v-check{ forced-color-adjust:none; background:CanvasText; }
  .v-icon-tile{ border:1px solid CanvasText; }
}

/* ───────────────────────── 18. reduced motion ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ scroll-behavior:auto!important; }
  .v-btn, .btn, .v-card, .v-btn__arrow, .v-link .v-arr, .v-menu, .v-menu-scrim, .v-pop__toggle svg, .v-flash .custom-message{ transition-property:opacity, visibility, color, background-color, box-shadow, border-color; transition-duration:200ms; }
  .v-btn:hover, .v-btn--primary:hover, .btn:hover, .btn-primary:hover, a.v-card:hover, .v-card--hover:hover,
  .v-btn:hover .v-btn__arrow, .v-link:hover .v-arr{ transform:none; }
  .v-menu{ transform:none; opacity:0; transition:opacity 200ms, visibility 0s 200ms; }
  .v-menu.is-open{ opacity:1; transition:opacity 200ms; }
  .v-flash .custom-message, .v-flash .custom-message.closing, .v-pop.is-open .v-pop__panel, .v-dialog[open]{ animation:none; transform:none; }
  .v-spinner{ animation-duration:2.4s; }
  .v-skeleton{ animation:none; }
}