/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEMS
   ═══════════════════════════════════════════════════════════════════════

   The app already themes itself through CSS custom properties, driven by
   two attributes on <html>:

     data-theme   dark | light
     data-accent  aurora | emerald | rose | amber | violet | custom

   This file adds a third axis:

     data-design  classic | precision | editorial | tactile

   "classic" is the original aurora/glass look and is the default — it needs
   no rules here, it simply gets whatever vaultx.css already defines, so the
   accent picker keeps working exactly as before.

   The other three are the replacement directions. Each one redefines the
   token palette for both themes and then switches off the effects that
   define the classic look: gradients, glassmorphism, neon glow. Because
   everything downstream reads the tokens, the whole UI follows without any
   per-component work.

   Accent colours are deliberately ignored by the three new designs — they
   are built around a single signal colour, and letting a user paint them
   violet would put us straight back where we started.
═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   SHARED: strip the classic-look effects from every new design
   ───────────────────────────────────────────────────────────────────── */
[data-design="precision"] .sidebar,
[data-design="precision"] .topbar,
[data-design="precision"] .auth-card,
[data-design="precision"] .auth-theme-toggle,
[data-design="precision"] .popup,
[data-design="precision"] .modal,
[data-design="precision"] .modal-overlay,
[data-design="precision"] .celeb-card,
[data-design="precision"] .celeb-overlay,
[data-design="editorial"] .sidebar,
[data-design="editorial"] .topbar,
[data-design="editorial"] .auth-card,
[data-design="editorial"] .auth-theme-toggle,
[data-design="editorial"] .popup,
[data-design="editorial"] .modal,
[data-design="editorial"] .modal-overlay,
[data-design="editorial"] .celeb-card,
[data-design="editorial"] .celeb-overlay,
[data-design="tactile"] .sidebar,
[data-design="tactile"] .topbar,
[data-design="tactile"] .auth-card,
[data-design="tactile"] .auth-theme-toggle,
[data-design="tactile"] .popup,
[data-design="tactile"] .modal,
[data-design="tactile"] .modal-overlay,
[data-design="tactile"] .celeb-card,
[data-design="tactile"] .celeb-overlay{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* The animated aurora wash and the gradient hairline above the sidebar. */
[data-design="precision"] body,
[data-design="editorial"] body,
[data-design="tactile"] body{background-image:none}
[data-design="precision"] .sidebar::before,
[data-design="editorial"] .sidebar::before,
[data-design="tactile"] .sidebar::before{background:var(--accent);opacity:1;height:2px}
[data-design="precision"] .auth-card::before,
[data-design="editorial"] .auth-card::before,
[data-design="tactile"] .auth-card::before{background:var(--accent);animation:none;height:3px}

/* The decorative canvas grid on login/register. */
[data-design="precision"] #gridCanvas,
[data-design="editorial"] #gridCanvas{display:none}

/* Neon glow on the logo and primary buttons. */
[data-design="precision"] .logo-icon,
[data-design="editorial"] .logo-icon,
[data-design="tactile"] .logo-icon,
[data-design="precision"] .auth-logo-badge,
[data-design="editorial"] .auth-logo-badge,
[data-design="tactile"] .auth-logo-badge{box-shadow:none}
[data-design="precision"] .btn-primary,
[data-design="editorial"] .btn-primary{box-shadow:none}
[data-design="precision"] .btn-primary:hover,
[data-design="editorial"] .btn-primary:hover{box-shadow:none;filter:brightness(1.1)}
[data-design="precision"] .user-avatar,
[data-design="editorial"] .user-avatar,
[data-design="tactile"] .user-avatar{box-shadow:none}

/* Passwords in a real mono face with aligned digits. */
[data-design="precision"] .pwd-masked,
[data-design="editorial"] .pwd-masked,
[data-design="tactile"] .pwd-masked{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:1.5px;
}


/* ═══════════════════════════════════════════════════════════════════════
   A · PRECISION INSTRUMENT — monochrome + one signal colour
   Rows on hairlines instead of cards. Tightest, most trustworthy.
═══════════════════════════════════════════════════════════════════════ */
[data-design="precision"]{
  --font-display:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --radius:8px;--radius-lg:10px;--radius-sm:6px;
}
[data-design="precision"][data-theme="light"]{
  --bg-base:#FBFAF8;--bg-deep:#F4F2EE;
  --bg-surface:#FFFFFF;--bg-card:#FFFFFF;--bg-solid:#FFFFFF;
  --bg-hover:rgba(20,22,26,.045);--bg-inset:#F4F2EE;
  --border:#E3E1DC;--border-bright:#CFCBC3;
  --text-primary:#14161A;--text-secondary:#4A4F57;--text-muted:#6B7078;
  --glass:#FFFFFF;--glass-border:#E3E1DC;
  --accent:#B4460E;--accent-2:#B4460E;--accent-3:#B4460E;
  --accent-dim:rgba(180,70,14,.09);--accent-glow:rgba(180,70,14,.20);
  --grad-accent:#B4460E;--grad-aurora:#B4460E;
  --aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;
  --shadow:0 1px 2px rgba(20,22,26,.07);--shadow-card:0 1px 3px rgba(20,22,26,.08);
  --glow-accent:none;
  --teal:#0F766E;--purple:#5B21B6;--rose:#B91C1C;--amber:#B45309;--green:#15803D;
}
[data-design="precision"][data-theme="dark"]{
  --bg-base:#14161A;--bg-deep:#0E1013;
  --bg-surface:#1C1F24;--bg-card:#1C1F24;--bg-solid:#1C1F24;
  --bg-hover:rgba(251,250,248,.055);--bg-inset:#0E1013;
  --border:#2A2E35;--border-bright:#3C424B;
  --text-primary:#FBFAF8;--text-secondary:#B7BDC4;--text-muted:#9AA0A6;
  --glass:#1C1F24;--glass-border:#2A2E35;
  --accent:#F0873F;--accent-2:#F0873F;--accent-3:#F0873F;
  --accent-dim:rgba(240,135,63,.13);--accent-glow:rgba(240,135,63,.26);
  --grad-accent:#F0873F;--grad-aurora:#F0873F;
  --aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;
  --shadow:0 1px 2px rgba(0,0,0,.5);--shadow-card:0 2px 6px rgba(0,0,0,.5);
  --glow-accent:none;
  --teal:#5EEAD4;--purple:#C4B5FD;--rose:#FCA5A5;--amber:#FCD34D;--green:#86EFAC;
}
/* Cards become full-bleed rows separated by hairlines. */
[data-design="precision"] .pwd-grid{grid-template-columns:1fr;gap:0}
[data-design="precision"] .pwd-card{border-radius:0;border-width:0 0 1px 0;background:transparent;padding:18px 4px}
[data-design="precision"] .pwd-card:hover{transform:none;box-shadow:none;background:var(--bg-hover);border-color:var(--border)}
[data-design="precision"] .pwd-card::before{display:none}
[data-design="precision"] .pwd-platform-icon{border-radius:6px}
[data-design="precision"] .stat-card{border-radius:var(--radius-lg)}
[data-design="precision"] .stat-card:hover{transform:none;box-shadow:var(--shadow-card)}
[data-design="precision"] .btn{border-radius:8px}
[data-design="precision"] .cat-chip{border-radius:7px}


/* ═══════════════════════════════════════════════════════════════════════
   B · EDITORIAL CALM — warm neutrals + a real serif
   Typography carries the hierarchy; almost no containers.
═══════════════════════════════════════════════════════════════════════ */
[data-design="editorial"]{
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Karla',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --radius:6px;--radius-lg:8px;--radius-sm:4px;
}
[data-design="editorial"][data-theme="light"]{
  --bg-base:#F4F1EA;--bg-deep:#EAE6DC;
  --bg-surface:#FBF9F4;--bg-card:#FBF9F4;--bg-solid:#FBF9F4;
  --bg-hover:rgba(28,27,25,.05);--bg-inset:#EAE6DC;
  --border:#DDD6C8;--border-bright:#C7BEAB;
  --text-primary:#1C1B19;--text-secondary:#5A5449;--text-muted:#7A7468;
  --glass:#FBF9F4;--glass-border:#DDD6C8;
  --accent:#9E4A33;--accent-2:#9E4A33;--accent-3:#9E4A33;
  --accent-dim:rgba(158,74,51,.09);--accent-glow:rgba(158,74,51,.20);
  --grad-accent:#9E4A33;--grad-aurora:#9E4A33;
  --aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;
  --shadow:0 1px 2px rgba(28,27,25,.07);--shadow-card:0 1px 3px rgba(28,27,25,.08);
  --glow-accent:none;
  --teal:#3F6F6B;--purple:#6B5B95;--rose:#A33A3A;--amber:#8A6A24;--green:#4F5C48;
}
[data-design="editorial"][data-theme="dark"]{
  --bg-base:#1C1B19;--bg-deep:#141311;
  --bg-surface:#26241F;--bg-card:#26241F;--bg-solid:#26241F;
  --bg-hover:rgba(244,241,234,.06);--bg-inset:#141311;
  --border:#38352E;--border-bright:#4C483F;
  --text-primary:#F4F1EA;--text-secondary:#C2BCAF;--text-muted:#9C968A;
  --glass:#26241F;--glass-border:#38352E;
  --accent:#D98368;--accent-2:#D98368;--accent-3:#D98368;
  --accent-dim:rgba(217,131,104,.13);--accent-glow:rgba(217,131,104,.26);
  --grad-accent:#D98368;--grad-aurora:#D98368;
  --aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;
  --shadow:0 1px 2px rgba(0,0,0,.5);--shadow-card:0 2px 6px rgba(0,0,0,.5);
  --glow-accent:none;
  --teal:#8FBDB8;--purple:#B9A9DA;--rose:#E28E8E;--amber:#D9AE5F;--green:#9DB093;
}
/* Serif headings at a size that lets the optical sizing show. */
[data-design="editorial"] .pwd-platform-name{font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:0}
[data-design="editorial"] .stat-value,
[data-design="editorial"] .topbar-title,
[data-design="editorial"] .auth-title,
[data-design="editorial"] .form-title,
[data-design="editorial"] .section-title{font-family:var(--font-display);font-weight:500}
[data-design="editorial"] .pwd-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px}
[data-design="editorial"] .pwd-card{border-radius:0;border-width:0 0 1px 0;background:transparent;padding:20px 4px}
[data-design="editorial"] .pwd-card:hover{transform:none;box-shadow:none;background:var(--bg-hover)}
[data-design="editorial"] .pwd-card::before{display:none}
[data-design="editorial"] .label,[data-design="editorial"] label{letter-spacing:.10em}


/* ═══════════════════════════════════════════════════════════════════════
   C · TACTILE ORGANIC — soft depth and curved forms
   Real drop shadows, never blur. Friendlier, more consumer.
═══════════════════════════════════════════════════════════════════════ */
[data-design="tactile"]{
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Public Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --radius:18px;--radius-lg:24px;--radius-sm:12px;
}
[data-design="tactile"][data-theme="light"]{
  --bg-base:#FAF7F2;--bg-deep:#F0EBE1;
  --bg-surface:#FFFFFF;--bg-card:#FFFFFF;--bg-solid:#FFFFFF;
  --bg-hover:rgba(42,39,36,.05);--bg-inset:#F4EFE6;
  --border:#EAE0D2;--border-bright:#D8CAB6;
  --text-primary:#2A2724;--text-secondary:#5F574E;--text-muted:#8A7F72;
  --glass:#FFFFFF;--glass-border:#EAE0D2;
  --accent:#A6522F;--accent-2:#14494A;--accent-3:#C97B4E;
  --accent-dim:rgba(166,82,47,.10);--accent-glow:rgba(166,82,47,.22);
  --grad-accent:linear-gradient(135deg,#A6522F,#C97B4E);
  --grad-aurora:linear-gradient(120deg,#A6522F,#C97B4E,#14494A);
  --aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;
  --shadow:0 6px 18px -12px rgba(42,39,36,.34);
  --shadow-card:0 10px 28px -16px rgba(42,39,36,.36);
  --glow-accent:none;
  --teal:#14494A;--purple:#6B5B95;--rose:#B3452F;--amber:#B07A20;--green:#3F7A49;
}
[data-design="tactile"][data-theme="dark"]{
  --bg-base:#221F1C;--bg-deep:#1A1815;
  --bg-surface:#2C2823;--bg-card:#2C2823;--bg-solid:#2C2823;
  --bg-hover:rgba(250,247,242,.06);--bg-inset:#1A1815;
  --border:#3A342C;--border-bright:#4E4639;
  --text-primary:#FAF7F2;--text-secondary:#C8BEB0;--text-muted:#9E9184;
  --glass:#2C2823;--glass-border:#3A342C;
  --accent:#E08A5F;--accent-2:#7FB3B0;--accent-3:#E8A882;
  --accent-dim:rgba(224,138,95,.14);--accent-glow:rgba(224,138,95,.26);
  --grad-accent:linear-gradient(135deg,#E08A5F,#E8A882);
  --grad-aurora:linear-gradient(120deg,#E08A5F,#E8A882,#7FB3B0);
  --aurora-1:transparent;--aurora-2:transparent;--aurora-3:transparent;
  --shadow:0 6px 18px -12px rgba(0,0,0,.6);
  --shadow-card:0 10px 28px -16px rgba(0,0,0,.65);
  --glow-accent:none;
  --teal:#7FB3B0;--purple:#B9A9DA;--rose:#E8917A;--amber:#E0B36A;--green:#8FBF8F;
}
[data-design="tactile"] .pwd-platform-icon{border-radius:15px}
[data-design="tactile"] .btn{border-radius:14px}
[data-design="tactile"] .cat-chip{border-radius:20px}
[data-design="tactile"] .pwd-card:hover{transform:translateY(-4px)}


/* ═══════════════════════════════════════════════════════════════════════
   CARD TREATMENT — the remaining "AI dashboard" tells
   The stat cards still carried the giveaways: a big blurred colour orb
   bleeding out of the corner, and a different accent stripe per card. Both
   are removed for the new designs so the numbers carry the emphasis.
═══════════════════════════════════════════════════════════════════════ */
[data-design="precision"] .stat-card::after,
[data-design="editorial"] .stat-card::after{display:none}

[data-design="precision"] .stat-card,
[data-design="editorial"] .stat-card{
  border-top-width:1px;border-color:var(--border);background:transparent;
}
[data-design="precision"] .stat-card.blue,
[data-design="precision"] .stat-card.teal,
[data-design="precision"] .stat-card.purple,
[data-design="editorial"] .stat-card.blue,
[data-design="editorial"] .stat-card.teal,
[data-design="editorial"] .stat-card.purple{border-top:1px solid var(--border)}

/* One ink colour for every stat icon, at low emphasis. */
[data-design="precision"] .stat-card .stat-icon,
[data-design="editorial"] .stat-card .stat-icon{color:var(--text-muted);opacity:.5}
[data-design="precision"] .stat-card:hover .stat-icon,
[data-design="editorial"] .stat-card:hover .stat-icon{transform:none;opacity:.75}

/* Tactile keeps colour but loses the blurred bleed in favour of a solid
   rounded chip, which is the point of the direction. */
[data-design="tactile"] .stat-card::after{filter:none;opacity:.14;border-radius:22px;top:-18px;right:-18px;width:96px;height:96px}

/* Empty state: the floating icon loop is decorative motion with no meaning. */
[data-design="precision"] .empty-icon,
[data-design="editorial"] .empty-icon{animation:none}


/* ═══════════════════════════════════════════════════════════════════════
   MOTION — spring feel without a JS animation library
   These are the curves Framer Motion's defaults approximate. Applied to
   every design, including Classic.
═══════════════════════════════════════════════════════════════════════ */
:root{
  --spring-soft:cubic-bezier(.34,1.26,.64,1);
  --spring-firm:cubic-bezier(.22,1,.36,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
}

/* Reveal on scroll, staggered — replaces the old blanket entrance animation
   that ran on every card whether or not it was visible. Elements start
   hidden only when JS is present, so no-JS users still see content. */
.js-reveal .vx-reveal{opacity:0;transform:translateY(14px)}
.js-reveal .vx-reveal.vx-in{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease-out-quint),transform .5s var(--ease-out-quint);
}

/* Press feedback: a real, immediate physical response to touch. */
.pwd-card:active,.space-card:active{transform:scale(.988);transition-duration:.08s}
.btn:active{transform:scale(.97);transition-duration:.08s}
.action-btn:active,.copy-btn:active{transform:scale(.88);transition-duration:.06s}

/* Copy confirmation: a short, meaningful pop rather than a colour flash. */
@keyframes vxPop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.copy-btn.copied{animation:vxPop .34s var(--spring-soft)}

@media(prefers-reduced-motion:reduce){
  .js-reveal .vx-reveal{opacity:1;transform:none;transition:none}
  .copy-btn.copied{animation:none}
}


/* ─────────────────────────────────────────────────────────────────────
   Settings: the design picker itself
   ───────────────────────────────────────────────────────────────────── */
.design-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.design-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--bg-inset);cursor:pointer;text-align:left;font-family:var(--font-body);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.design-card:hover{border-color:var(--border-bright);transform:translateY(-2px)}
.design-card.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.design-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.design-card strong{font-size:14px;color:var(--text-primary);font-weight:600;display:block}
.design-card small{font-size:12px;color:var(--text-muted);line-height:1.45}
.design-card .design-check{color:var(--accent);opacity:0;flex-shrink:0;transition:opacity .2s}
.design-card.active .design-check{opacity:1}
/* A miniature of the design: its own surface, text and accent. */
.design-swatch{display:flex;height:38px;border-radius:9px;overflow:hidden;border:1px solid var(--border)}
.design-swatch span{flex:1}
.design-swatch span:last-child{flex:0 0 26%}
.design-badge{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:20px;background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-glow)}