/* ═══════════════════════════════════════════════════
   THEME TOKENS — AURORA GLASS
═══════════════════════════════════════════════════ */
:root{
  --accent:#7C9CFF;--accent-2:#22D3EE;--accent-3:#A78BFA;
  --accent-dim:rgba(124,156,255,.16);--accent-glow:rgba(124,156,255,.22);
  --grad-aurora:linear-gradient(120deg,#6366F1 0%,#8B5CF6 38%,#22D3EE 100%);
  --grad-accent:linear-gradient(135deg,#6E8BFF,#9B7BFF);
  --teal:#22D3EE;--purple:#A78BFA;--rose:#FB5773;--amber:#FBBF24;--green:#34D399;
  --radius:14px;--radius-lg:20px;--radius-sm:10px;
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --theme-transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}

/* DARK (default) */
[data-theme="dark"]{
  --bg-base:#070A14;--bg-deep:#04060D;
  --bg-surface:rgba(17,23,40,.86);--bg-card:rgba(20,27,46,.80);--bg-solid:#0E1424;
  --bg-hover:rgba(124,156,255,.10);--bg-inset:rgba(7,10,20,.6);
  --border:rgba(255,255,255,.08);--border-bright:rgba(255,255,255,.16);
  --text-primary:#EEF2FF;--text-secondary:#9DA9C9;--text-muted:#5E6B8A;
  --glass:rgba(13,18,34,.72);--glass-border:rgba(255,255,255,.10);
  --shadow-card:0 18px 50px -22px rgba(0,0,0,.85),0 2px 8px rgba(0,0,0,.3);
  --glow-accent:0 0 50px -12px rgba(124,156,255,.45);
  --aurora-1:rgba(99,102,241,.30);--aurora-2:rgba(34,211,238,.20);--aurora-3:rgba(167,139,250,.22);
  --shadow:0 14px 40px -16px rgba(0,0,0,.8);
}
/* LIGHT */
[data-theme="light"]{
  --bg-base:#EEF2FE;--bg-deep:#E3EAFB;
  --bg-surface:rgba(255,255,255,.92);--bg-card:rgba(255,255,255,.88);--bg-solid:#FFFFFF;
  --bg-hover:rgba(79,107,255,.08);--bg-inset:rgba(238,242,254,.8);
  --border:rgba(24,38,84,.10);--border-bright:rgba(24,38,84,.20);
  --text-primary:#101a3a;--text-secondary:#4a5781;--text-muted:#8893b3;
  --glass:rgba(255,255,255,.78);--glass-border:rgba(255,255,255,.7);
  --shadow-card:0 18px 44px -22px rgba(40,60,120,.4),0 2px 6px rgba(40,60,120,.06);
  --glow-accent:0 0 44px -14px rgba(99,118,255,.4);
  --aurora-1:rgba(99,102,241,.18);--aurora-2:rgba(34,211,238,.16);--aurora-3:rgba(167,139,250,.18);
  --accent:#4F6BFF;--accent-glow:rgba(79,107,255,.18);--accent-dim:rgba(79,107,255,.12);
  --shadow:0 14px 38px -18px rgba(40,60,120,.35);
}

/* ═══════════════════════════════════════════════════
   ACCENT PALETTES (5) — chosen in Settings, persisted
   These override only the accent vars, after theme blocks.
═══════════════════════════════════════════════════ */
[data-accent="aurora"]{
  --accent:#7C9CFF;--accent-2:#22D3EE;--accent-3:#A78BFA;
  --accent-dim:rgba(124,156,255,.16);--accent-glow:rgba(124,156,255,.42);
  --grad-accent:linear-gradient(135deg,#6E8BFF,#9B7BFF);
  --grad-aurora:linear-gradient(120deg,#6366F1 0%,#8B5CF6 38%,#22D3EE 100%);
}
[data-theme="light"][data-accent="aurora"]{--accent:#4F6BFF;--accent-dim:rgba(79,107,255,.12);--accent-glow:rgba(79,107,255,.34)}
[data-accent="emerald"]{
  --accent:#34D399;--accent-2:#22D3EE;--accent-3:#2DD4BF;
  --accent-dim:rgba(52,211,153,.16);--accent-glow:rgba(52,211,153,.42);
  --grad-accent:linear-gradient(135deg,#10B981,#22D3EE);
  --grad-aurora:linear-gradient(120deg,#10B981 0%,#2DD4BF 42%,#22D3EE 100%);
}
[data-theme="light"][data-accent="emerald"]{--accent:#059669;--accent-dim:rgba(5,150,105,.12);--accent-glow:rgba(5,150,105,.32)}
[data-accent="rose"]{
  --accent:#FB5773;--accent-2:#FB923C;--accent-3:#F472B6;
  --accent-dim:rgba(251,87,115,.16);--accent-glow:rgba(251,87,115,.42);
  --grad-accent:linear-gradient(135deg,#FB5773,#F472B6);
  --grad-aurora:linear-gradient(120deg,#FB5773 0%,#F472B6 45%,#FB923C 100%);
}
[data-theme="light"][data-accent="rose"]{--accent:#E11D63;--accent-dim:rgba(225,29,99,.12);--accent-glow:rgba(225,29,99,.30)}
[data-accent="amber"]{
  --accent:#FBBF24;--accent-2:#F472B6;--accent-3:#FB923C;
  --accent-dim:rgba(251,191,36,.18);--accent-glow:rgba(251,191,36,.42);
  --grad-accent:linear-gradient(135deg,#F59E0B,#FB923C);
  --grad-aurora:linear-gradient(120deg,#F59E0B 0%,#FB923C 45%,#F472B6 100%);
}
[data-theme="light"][data-accent="amber"]{--accent:#D97706;--accent-dim:rgba(217,119,6,.13);--accent-glow:rgba(217,119,6,.30)}
[data-accent="violet"]{
  --accent:#A78BFA;--accent-2:#6366F1;--accent-3:#8B5CF6;
  --accent-dim:rgba(167,139,250,.18);--accent-glow:rgba(167,139,250,.42);
  --grad-accent:linear-gradient(135deg,#8B5CF6,#6366F1);
  --grad-aurora:linear-gradient(120deg,#A78BFA 0%,#8B5CF6 45%,#6366F1 100%);
}
[data-theme="light"][data-accent="violet"]{--accent:#7C3AED;--accent-dim:rgba(124,58,237,.12);--accent-glow:rgba(124,58,237,.30)}

/* ═══════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOutRight{from{opacity:1;transform:translateX(0);max-height:200px}to{opacity:0;transform:translateX(110%);max-height:0;padding:0;margin-bottom:0}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.8) translateY(16px)}60%{opacity:1;transform:scale(1.03) translateY(-4px)}100%{transform:scale(1) translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes logoPulse{0%,100%{box-shadow:0 6px 22px -6px rgba(124,156,255,.6)}50%{box-shadow:0 8px 34px -4px rgba(124,156,255,.85),0 0 30px -6px rgba(34,211,238,.5)}}
@keyframes navStagger{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes progressShrink{from{width:100%}to{width:0%}}
@keyframes cardPop{0%{opacity:0;transform:translateY(16px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes topbarSlide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes dotBlink{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rippleOut{0%{transform:scale(0);opacity:.5}100%{transform:scale(3);opacity:0}}
@keyframes statCount{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes auroraDrift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,-4%) scale(1.08)}66%{transform:translate(-4%,5%) scale(.96)}100%{transform:translate(0,0) scale(1)}}
@keyframes themeSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.25)}100%{transform:rotate(360deg) scale(1)}}
@keyframes celebOverlay{from{opacity:0}to{opacity:1}}
@keyframes celebCard{0%{opacity:0;transform:translateY(50px) scale(.86)}60%{opacity:1;transform:translateY(-8px) scale(1.02)}100%{transform:translateY(0) scale(1)}}
@keyframes lockPop{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.22) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes checkDraw{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}
@keyframes ringPulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ═══════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);color:var(--text-primary);
  min-height:100vh;line-height:1.6;
  position:relative;overflow-x:hidden;
}
/* PERF: the aurora glow used to be two 60vw circles with filter:blur(90px) on a
   24s infinite animation. That forced the compositor to re-rasterise a
   full-viewport blurred layer every frame, forever — the single largest source
   of scroll and interaction jank. A radial-gradient is already soft, so it
   needs no blur filter and no animation: same look, zero per-frame cost.
   fixed attachment keeps it parked while the page scrolls. */
body{
  background-color:var(--bg-base);
  background-image:
    radial-gradient(60vw 60vw at 12% 0%,var(--aurora-1),transparent 62%),
    radial-gradient(55vw 55vw at 92% 100%,var(--aurora-3),transparent 62%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* Theme swap animates only when the user actually toggles it, not on load. */
html.vx-theming,html.vx-theming *{transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)!important}
.app-layout{display:flex;min-height:100vh}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box}

/* Icon defaults. Icons are served from an inlined SVG sprite (see _icons.html)
   rather than the unpkg lucide bundle, so there is no blocking network request
   and no runtime icon generation. Sizes are declared up front so nothing
   reflows when the sprite references resolve. */
[data-lucide],svg.lucide,svg.ic{width:18px;height:18px;flex-shrink:0;vertical-align:middle;display:inline-block}
svg.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:15px;height:15px}.ic-lg{width:22px;height:22px}.ic-xl{width:30px;height:30px}

/* ═══════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════ */
.sidebar{
  width:272px;min-width:272px;background:var(--glass);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:100;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:var(--theme-transition);
}
.sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-aurora);opacity:.9}
.sidebar-logo{padding:26px 22px 18px;border-bottom:1px solid var(--border)}
.logo-mark{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-primary);text-decoration:none}
.logo-icon{
  width:42px;height:42px;border-radius:13px;overflow:hidden;
  transition:transform .25s var(--spring),box-shadow .25s var(--ease);
}
.logo-icon .vx-logo-svg,.logo-icon .vx-logo-img,.logo-icon svg{width:100%;height:100%;display:block;object-fit:contain}
.logo-icon:hover{transform:rotate(-8deg) scale(1.1)}
.logo-sub{font-size:11px;font-weight:400;color:var(--text-muted);letter-spacing:.06em;display:block;line-height:1;margin-top:3px}

.sidebar-user{padding:16px 18px;border-bottom:1px solid var(--border)}
.user-pill{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.user-pill:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.user-avatar{width:36px;height:36px;background:var(--grad-aurora);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 4px 14px -4px rgba(124,156,255,.6);overflow:hidden}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-info{flex:1;min-width:0}
.user-name{font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:4px}
.user-role [data-lucide],.user-role svg{width:11px;height:11px}

.sidebar-nav{flex:1;padding:16px 14px;overflow-y:auto}
.nav-section-label{font-size:10px;font-weight:700;color:var(--text-muted);letter-spacing:.14em;text-transform:uppercase;padding:0 10px;margin-bottom:6px;margin-top:18px}
.nav-section-label:first-child{margin-top:0}
.nav-link{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  color:var(--text-secondary);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
  margin-bottom:3px;cursor:pointer;border:none;background:none;width:100%;text-align:left;
  position:relative;
}

.nav-link:hover{background:var(--bg-hover);color:var(--text-primary);transform:translateX(3px)}
.nav-link.active{background:var(--accent-dim);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-glow)}
.nav-link.active::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--grad-aurora)}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;flex-shrink:0;transition:transform .2s var(--spring)}
.nav-icon [data-lucide],.nav-icon svg{width:18px;height:18px}
.nav-link:hover .nav-icon{transform:scale(1.16)}
.nav-badge{margin-left:auto;background:var(--accent-dim);color:var(--accent);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;min-width:22px;text-align:center;border:1px solid var(--accent-glow)}
.sidebar-footer{padding:14px 14px;border-top:1px solid var(--border)}

/* Theme toggle */
.theme-toggle{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;background:var(--bg-card);border:1px solid var(--border);cursor:pointer;transition:all .25s var(--ease);margin-bottom:8px;width:100%}
.theme-toggle:hover{border-color:var(--accent);background:var(--bg-hover)}
.theme-toggle-track{width:38px;height:21px;border-radius:20px;background:var(--bg-inset);border:1px solid var(--border);position:relative;transition:all .35s var(--ease);flex-shrink:0}
[data-theme="dark"] .theme-toggle-track{background:var(--accent-dim);border-color:var(--accent-glow)}
[data-theme="light"] .theme-toggle-track{background:var(--amber);border-color:#D97706}
.theme-toggle-thumb{width:15px;height:15px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform .35s var(--spring);box-shadow:0 1px 4px rgba(0,0,0,.3)}
[data-theme="light"] .theme-toggle-thumb{transform:translateX(17px)}
.theme-toggle-label{font-size:13px;font-weight:500;color:var(--text-secondary);flex:1}
.theme-toggle-icon{display:inline-flex;color:var(--text-secondary)}

/* ═══════════════════════════════════════════════════
   MAIN + TOPBAR
═══════════════════════════════════════════════════ */
.main-content{margin-left:272px;flex:1;min-height:100vh;display:flex;flex-direction:column}
.topbar{
  background:var(--glass);border-bottom:1px solid var(--border);
  padding:14px 30px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:var(--theme-transition);
}
.topbar-title{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-primary);flex:1;display:flex;align-items:center;gap:10px}
.page-body{padding:30px;flex:1;max-width:1320px;width:100%}

.search-wrap{position:relative;flex:1;max-width:400px}
.search-wrap input{width:100%;background:var(--bg-inset);border:1px solid var(--border);border-radius:12px;padding:10px 14px 10px 40px;color:var(--text-primary);font-size:13.5px;font-family:var(--font-body);transition:all .25s var(--ease);outline:none}
.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--bg-hover)}
.search-wrap input::placeholder{color:var(--text-muted)}
.search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;transition:color .2s;display:inline-flex}
.search-wrap:focus-within .search-icon{color:var(--accent)}

/* ═══════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all .2s var(--ease);text-decoration:none;border:none;outline:none;position:relative;overflow:hidden;white-space:nowrap}
.btn [data-lucide],.btn svg{width:16px;height:16px}
.btn-primary{background:var(--grad-accent);color:#fff;box-shadow:0 8px 22px -8px rgba(124,156,255,.7)}
.btn-primary:hover{box-shadow:0 12px 30px -8px rgba(124,156,255,.85);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-secondary{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-bright);transform:translateY(-1px)}
.btn-danger{background:transparent;color:var(--rose);border:1px solid rgba(251,87,115,.35)}
.btn-danger:hover{background:rgba(251,87,115,.12);border-color:var(--rose)}
.btn-ghost{background:transparent;color:var(--text-secondary);padding:8px 11px}
.btn-ghost:hover{color:var(--text-primary);background:var(--bg-hover)}
.btn-sm{padding:7px 14px;font-size:12.5px}
.btn-icon{padding:9px;border-radius:10px}
.btn-loading{pointer-events:none}
.btn-loading .btn-text{opacity:0}
.btn-spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);gap:4px;align-items:center}
.btn-loading .btn-spinner{display:flex}
.btn-spinner span{width:5px;height:5px;background:#fff;border-radius:50%;animation:dotBlink 1.2s infinite ease-in-out both}
.btn-spinner span:nth-child(1){animation-delay:0s}.btn-spinner span:nth-child(2){animation-delay:.2s}.btn-spinner span:nth-child(3){animation-delay:.4s}

/* Google button */
.btn-google{background:var(--bg-solid);color:var(--text-primary);border:1px solid var(--border-bright);width:100%;justify-content:center;padding:12px;font-size:14px;gap:10px;transition:all .2s var(--ease)}
.btn-google:hover{background:var(--bg-hover);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(124,156,255,.5)}
.btn-google svg{width:18px;height:18px}
.auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--text-muted);font-size:12px;font-weight:500}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ═══════════════════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════════════════ */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;position:relative;overflow:hidden;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card),var(--glow-accent);border-color:var(--border-bright)}
.stat-card::after{content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;border-radius:50%;opacity:.12;transition:all .35s var(--ease)}
.stat-card:hover::after{opacity:.22;transform:scale(1.2)}
.stat-card.blue::after{background:radial-gradient(circle,var(--accent),transparent)}
.stat-card.teal::after{background:radial-gradient(circle,var(--teal),transparent)}
.stat-card.purple::after{background:radial-gradient(circle,var(--purple),transparent)}
.stat-card.blue{border-top:2px solid var(--accent)}
.stat-card.teal{border-top:2px solid var(--teal)}
.stat-card.purple{border-top:2px solid var(--purple)}
.stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:12px}
.stat-value{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--text-primary);line-height:1}
.stat-icon{position:absolute;top:22px;right:22px;opacity:.45;transition:all .35s var(--spring);color:var(--text-secondary)}
.stat-icon [data-lucide],.stat-icon svg{width:26px;height:26px}
.stat-card.blue .stat-icon{color:var(--accent)}.stat-card.teal .stat-icon{color:var(--teal)}.stat-card.purple .stat-icon{color:var(--purple)}
.stat-card:hover .stat-icon{transform:scale(1.2) rotate(-6deg);opacity:.85}

/* ═══════════════════════════════════════════════════
   CATEGORY CHIPS
═══════════════════════════════════════════════════ */
.category-filter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.cat-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:20px;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .22s var(--spring);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary)}
.cat-chip [data-lucide],.cat-chip svg{width:14px;height:14px}
.cat-chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px -6px rgba(124,156,255,.4)}
.cat-chip.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
.quick-platform-logo{width:18px;height:18px;object-fit:contain;border-radius:5px;vertical-align:middle;background:#fff}

/* ═══════════════════════════════════════════════════
   PASSWORD CARDS
═══════════════════════════════════════════════════ */
.pwd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.pwd-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
  }
/* content-visibility:auto was removed here. It skips rendering off-screen
   cards, which combined with loading="lazy" logos meant images could stay
   unloaded, and the estimated card height made the scrollbar jump. It only
   pays off with hundreds of cards; below that it costs more than it saves. */

.pwd-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-accent,var(--accent));opacity:0;transition:opacity .25s}
.pwd-card:hover{border-color:var(--border-bright);transform:translateY(-5px);box-shadow:var(--shadow-card)}
.pwd-card:hover::before{opacity:1}
.pwd-card-header{display:flex;align-items:flex-start;gap:13px;margin-bottom:15px}
.pwd-platform-icon{position:relative;width:46px;height:46px;background:var(--card-accent,var(--accent));border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border);transition:transform .2s var(--spring);overflow:hidden;color:#fff}
/* Always-present fallback: the platform's first letter on its category colour.
   The tile is therefore never empty, whatever the icon services return. */
.pwd-platform-initial{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1;color:#fff;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.25);user-select:none}
.pwd-card:hover .pwd-platform-icon{transform:scale(1.07);box-shadow:0 6px 18px -6px rgba(0,0,0,.5)}
/* The logo sits on top of the initial and is revealed only once JS has
   confirmed it loaded at a usable size, so a broken or degenerate icon never
   leaves a blank or sliver-filled tile. object-fit:contain (not cover) keeps
   non-square marks whole; the white pad keeps dark logos legible on the
   coloured tile. */
.pwd-platform-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;background:#fff;border-radius:12px;opacity:0;transition:opacity .18s var(--ease)}
.pwd-platform-logo.is-loaded{opacity:1}
.pwd-platform-info{flex:1;min-width:0}
.pwd-platform-name{font-size:15.5px;font-weight:600;color:var(--text-primary);font-family:var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwd-category-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.pwd-actions{display:flex;gap:4px;margin-left:auto}
.action-btn{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;border:none;color:var(--text-muted);transition:background-color .15s var(--ease),color .15s var(--ease),transform .15s var(--spring);text-decoration:none}
.action-btn [data-lucide],.action-btn svg{width:16px;height:16px}
.action-btn:hover{background:var(--bg-hover);color:var(--text-secondary);transform:scale(1.12)}
.action-btn.fav-active{color:var(--amber)}
.action-btn.fav-active svg{fill:var(--amber)}
.action-btn.fav-active:hover{transform:scale(1.18) rotate(-6deg)}
.pwd-field{background:var(--bg-inset);border:1px solid var(--border);border-radius:11px;padding:10px 13px;margin-bottom:9px;display:flex;align-items:center;gap:8px;transition:border-color .15s var(--ease)}
.pwd-field:hover{border-color:var(--border-bright)}
.pwd-field-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:2px}
.pwd-field-value{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.pwd-masked{font-family:monospace;letter-spacing:3px;color:var(--text-muted)}
.copy-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:5px;border-radius:7px;transition:background-color .15s var(--ease),color .15s var(--ease),transform .15s var(--spring);flex-shrink:0;display:inline-flex}
.copy-btn [data-lucide],.copy-btn svg{width:15px;height:15px}
.copy-btn:hover{color:var(--accent);background:var(--accent-dim);transform:scale(1.15)}
.copy-btn.copied{color:var(--green);background:rgba(52,211,153,.15)}
.pwd-url{font-size:12px;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:5px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;transition:color .15s}
.pwd-url [data-lucide],.pwd-url svg{width:13px;height:13px}
.pwd-url:hover{text-decoration:underline;filter:brightness(1.15)}
.pwd-note{margin-top:10px;font-size:12px;color:var(--text-muted);padding:9px 11px;background:var(--bg-inset);border-radius:9px;border:1px solid var(--border);line-height:1.5;display:flex;gap:7px}
.pwd-note [data-lucide],.pwd-note svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}

/* ═══════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════ */
.form-page{max-width:600px;margin:0 auto}
.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px}
.form-title{font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:26px;color:var(--text-primary);display:flex;align-items:center;gap:11px}
.form-title [data-lucide],.form-title svg{width:24px;height:24px;color:var(--accent)}
.form-row{margin-bottom:19px}

.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:7px;text-transform:uppercase;letter-spacing:.07em;transition:color .2s}
.form-row:focus-within > label{color:var(--accent)}
input[type="text"],input[type="password"],input[type="email"],input[type="url"],select,textarea{width:100%;background:var(--bg-inset);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text-primary);font-size:14px;font-family:var(--font-body);transition:all .25s var(--ease);outline:none;appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--bg-hover)}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--border-bright)}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
input[type="file"]{padding:9px 12px;font-size:13px;color:var(--text-secondary)}
input[type="file"]::file-selector-button{background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;padding:6px 12px;margin-right:12px;cursor:pointer;font-family:var(--font-body);font-weight:600;transition:all .2s}
input[type="file"]::file-selector-button:hover{background:var(--bg-hover);border-color:var(--accent);color:var(--accent)}
select option{background:var(--bg-solid);color:var(--text-primary)}
textarea{resize:vertical;min-height:96px}
.input-with-btn{position:relative}
.input-with-btn input{padding-right:46px}
.input-inner-btn{position:absolute;right:9px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);padding:5px 6px;border-radius:7px;transition:background-color .15s var(--ease),color .15s var(--ease),transform .15s var(--spring);display:inline-flex;z-index:2}
.input-inner-btn [data-lucide],.input-inner-btn svg{width:17px;height:17px}
.input-inner-btn:hover{color:var(--accent);transform:translateY(-50%) scale(1.12)}
.input-icon-left{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);transition:color .2s;display:inline-flex;z-index:2}
.input-icon-left [data-lucide],.input-icon-left svg{width:17px;height:17px}
.form-row:focus-within .input-icon-left{color:var(--accent)}
.form-actions{display:flex;gap:12px;padding-top:8px}
.checkbox-row{display:flex;align-items:center;gap:10px;cursor:pointer}
.checkbox-row input[type="checkbox"]{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;transition:transform .2s}
.checkbox-row:hover input[type="checkbox"]{transform:scale(1.1)}
.checkbox-row span{font-size:13.5px;color:var(--text-secondary);font-weight:500;user-select:none;display:inline-flex;align-items:center;gap:7px}
.checkbox-row span [data-lucide],.checkbox-row span svg{width:16px;height:16px;color:var(--amber)}
/* Sign-in method chooser on the add/edit form. */
.auth-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.auth-choice{grid-template-columns:1fr}}
.auth-option{display:block;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-weight:400}
.auth-option input{position:absolute;opacity:0;width:0;height:0}
.auth-option-body{display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--bg-inset);transition:border-color .18s var(--ease),background-color .18s var(--ease)}
.auth-option-body [data-lucide],.auth-option-body svg.ic{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--text-secondary)}
.auth-option-body strong{display:block;font-size:13.5px;font-weight:600;color:var(--text-primary)}
.auth-option-body small{display:block;font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.4}
.auth-option:hover .auth-option-body{border-color:var(--border-bright)}
.auth-option.selected .auth-option-body{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-glow)}
.auth-option input:focus-visible + .auth-option-body{outline:2px solid var(--accent);outline-offset:2px}
/* Provider row on a card — no value to copy, so no copy control. */
.pwd-provider{align-items:center;gap:9px}

.error-msg,.errorlist li{color:var(--rose);font-size:12px;margin-top:5px;animation:fadeInUp .3s ease}
.errorlist{list-style:none;margin:0;padding:0}

/* ═══════════════════════════════════════════════════
   AUTH
═══════════════════════════════════════════════════ */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}
.auth-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:26px;padding:42px;width:100%;max-width:450px;position:relative;box-shadow:0 30px 90px -30px rgba(0,0,0,.7),var(--glow-accent);animation:bounceIn .6s var(--spring) both;backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
.auth-logo{text-align:center;margin-bottom:26px}
.auth-logo .logo-mark{justify-content:center;font-size:23px;margin-bottom:6px}
.auth-title{font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:7px;color:var(--text-primary);animation:fadeInUp .45s .2s ease both;text-align:center}
.auth-subtitle{font-size:13.5px;color:var(--text-secondary);margin-bottom:28px;animation:fadeInUp .45s .25s ease both;text-align:center}
.auth-footer-link{text-align:center;margin-top:24px;font-size:13px;color:var(--text-muted);animation:fadeInUp .45s .5s ease both}
.auth-footer-link a{color:var(--accent);text-decoration:none;font-weight:600;transition:filter .2s}
.auth-footer-link a:hover{text-decoration:underline;filter:brightness(1.15)}
.auth-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:7px;animation:fadeInUp .45s .55s ease both}
.auth-note [data-lucide],.auth-note svg{width:14px;height:14px;color:var(--green)}

/* ── Auth redesign ── */
.auth-card{overflow:hidden}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad-aurora);background-size:200% 100%;animation:gradShift 6s ease infinite}
.auth-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:24px}
.auth-logo-badge{width:74px;height:74px;border-radius:22px;position:relative;margin-bottom:16px;box-shadow:0 8px 30px -6px rgba(124,156,255,.7)}
.auth-logo-badge .vx-logo-svg,.auth-logo-badge .vx-logo-img,.auth-logo-badge svg{width:100%;height:100%;display:block;border-radius:22px;object-fit:contain}
.auth-logo-badge::after{content:'';position:absolute;inset:-10px;border-radius:30px;border:1px solid var(--accent-glow);opacity:.6;animation:pulse 4s ease-in-out infinite;pointer-events:none}
.auth-brand{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.auth-brand span{color:var(--accent)}
.auth-theme-toggle{position:fixed;top:20px;right:20px;z-index:20;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--glass-border);color:var(--text-secondary);cursor:pointer;backdrop-filter:blur(18px);transition:all .25s var(--ease)}
.auth-theme-toggle:hover{color:var(--accent);border-color:var(--accent);transform:rotate(-12deg) scale(1.08)}
.auth-theme-toggle [data-lucide],.auth-theme-toggle svg{width:19px;height:19px}
.auth-credit{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);text-align:center;font-size:12.5px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:7px}
.auth-credit [data-lucide],.auth-credit svg{width:14px;height:14px;color:var(--accent)}
.auth-credit b{color:var(--text-secondary);font-weight:600}

/* ═══════════════════════════════════════════════════
   POPUP NOTIFICATIONS
═══════════════════════════════════════════════════ */
.popup-container{position:fixed;top:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:11px;max-width:380px;width:100%;pointer-events:none}
.popup{background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 16px 50px -16px rgba(0,0,0,.6);overflow:hidden;pointer-events:all;animation:slideInRight .45s var(--spring) both;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.popup.removing{animation:slideOutRight .35s ease forwards}
.popup-inner{display:flex;align-items:flex-start;gap:12px;padding:15px 16px}
.popup-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.popup-icon [data-lucide],.popup-icon svg{width:20px;height:20px}
.popup-content{flex:1;min-width:0}
.popup-title{font-size:13px;font-weight:700;margin-bottom:2px}
.popup-msg{font-size:12.5px;color:var(--text-secondary);line-height:1.45}
.popup-close{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:0;flex-shrink:0;transition:all .2s;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:7px}
.popup-close [data-lucide],.popup-close svg{width:16px;height:16px}
.popup-close:hover{color:var(--text-primary);background:var(--bg-hover)}
.popup-progress{height:3px;width:100%;background:rgba(255,255,255,.06)}
.popup-bar{height:100%;animation:progressShrink 4.5s linear forwards}
.popup.success{border-color:rgba(52,211,153,.4)}.popup.success .popup-icon{background:rgba(52,211,153,.15);color:var(--green)}.popup.success .popup-title{color:var(--green)}.popup.success .popup-bar{background:linear-gradient(90deg,#34D399,#10B981)}
.popup.error{border-color:rgba(251,87,115,.4)}.popup.error .popup-icon{background:rgba(251,87,115,.15);color:var(--rose)}.popup.error .popup-title{color:var(--rose)}.popup.error .popup-bar{background:linear-gradient(90deg,#FB7185,#F43F5E)}
.popup.info{border-color:rgba(124,156,255,.4)}.popup.info .popup-icon{background:var(--accent-dim);color:var(--accent)}.popup.info .popup-title{color:var(--accent)}.popup.info .popup-bar{background:var(--grad-accent)}
.popup.warning{border-color:rgba(251,191,36,.4)}.popup.warning .popup-icon{background:rgba(251,191,36,.15);color:var(--amber)}.popup.warning .popup-title{color:var(--amber)}.popup.warning .popup-bar{background:linear-gradient(90deg,#FBBF24,#F59E0B)}

/* ═══════════════════════════════════════════════════
   CELEBRATION
═══════════════════════════════════════════════════ */
.celeb-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);animation:celebOverlay .3s ease}
.celeb-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:28px;padding:46px 40px 36px;max-width:430px;width:100%;position:relative;overflow:hidden;box-shadow:0 36px 90px -30px rgba(0,0,0,.7);animation:celebCard .7s var(--spring) both;text-align:center;backdrop-filter:blur(26px)}
.celeb-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366F1,#8B5CF6,#22D3EE,#34D399,#6366F1);background-size:300% 100%;animation:gradShift 3s ease infinite}
.celeb-canvas{position:absolute;inset:0;pointer-events:none;z-index:0}
.celeb-icon-wrap{width:92px;height:92px;margin:0 auto 22px;position:relative;z-index:1}
.celeb-ring{position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--accent-glow);animation:ringPulse 1.2s ease-out .3s both}
.celeb-ring-2{position:absolute;inset:-18px;border-radius:50%;border:2px solid rgba(34,211,238,.25);animation:ringPulse 1.2s ease-out .5s both}
.celeb-icon-bg{width:92px;height:92px;border-radius:50%;background:var(--accent-dim);border:2px solid var(--accent-glow);display:flex;align-items:center;justify-content:center;color:var(--accent);animation:lockPop .6s var(--spring) .1s both;position:relative}
.celeb-icon-bg [data-lucide],.celeb-icon-bg svg{width:40px;height:40px}
.celeb-check{position:absolute;bottom:-4px;right:-4px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--green),#10B981);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px -2px rgba(52,211,153,.7);animation:lockPop .5s var(--spring) .4s both}
.celeb-check svg{width:15px;height:15px}
.celeb-check svg polyline{stroke-dasharray:60;animation:checkDraw .4s ease .55s both}
.celeb-title{font-family:var(--font-display);font-size:25px;font-weight:700;color:var(--text-primary);margin-bottom:6px;position:relative;z-index:1;animation:fadeInUp .45s .5s ease both;display:flex;align-items:center;justify-content:center;gap:9px}
.celeb-title [data-lucide],.celeb-title svg{width:24px;height:24px;color:var(--amber)}
.celeb-platform{display:inline-block;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);padding:4px 16px;border-radius:20px;margin-bottom:8px;position:relative;z-index:1;animation:fadeInUp .45s .55s ease both}
.celeb-sub{font-size:14px;color:var(--text-secondary);margin-bottom:28px;line-height:1.55;position:relative;z-index:1;animation:fadeInUp .45s .6s ease both}
.celeb-actions{display:flex;gap:12px;justify-content:center;position:relative;z-index:1;animation:fadeInUp .45s .65s ease both}
.celeb-progress{height:3px;margin-top:28px;border-radius:2px;background:var(--border);overflow:hidden;position:relative;z-index:1}
.celeb-progress-bar{height:100%;background:var(--grad-accent);animation:progressShrink 6s linear forwards}
.celeb-dismiss{position:absolute;top:18px;right:18px;z-index:2;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-hover);border:none;cursor:pointer;color:var(--text-muted);transition:all .25s}
.celeb-dismiss [data-lucide],.celeb-dismiss svg{width:16px;height:16px}
.celeb-dismiss:hover{color:var(--text-primary);transform:rotate(90deg)}

/* ═══════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s ease}
.modal{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:30px;max-width:450px;width:100%;box-shadow:0 30px 70px -25px rgba(0,0,0,.7);animation:scaleIn .3s var(--spring) both;backdrop-filter:blur(26px)}
.modal-title{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:9px;color:var(--text-primary);display:flex;align-items:center;gap:9px}
.modal-title [data-lucide],.modal-title svg{width:20px;height:20px;color:var(--rose)}
.modal-body{color:var(--text-secondary);font-size:14px;margin-bottom:24px;line-height:1.55}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* password strength */
.pwd-strength{margin-top:9px}
.pwd-strength-bar{display:flex;gap:4px;height:5px;border-radius:3px;overflow:hidden}
.pwd-strength-seg{flex:1;background:var(--border);border-radius:3px;transition:background .35s ease}
.pwd-strength-label{font-size:11px;color:var(--text-muted);margin-top:5px}

/* ═══════════════════════════════════════════════════
   DATA SPACES
═══════════════════════════════════════════════════ */
.space-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.space-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;color:var(--text-primary);text-decoration:none;transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}

.space-card:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:var(--shadow-card),var(--glow-accent)}
.space-card-head{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.space-card-image{width:54px;height:54px;object-fit:cover;border-radius:14px;border:1px solid var(--border);background:var(--bg-inset);transition:transform .25s var(--spring)}
.space-card:hover .space-card-image{transform:scale(1.06)}
.space-card-placeholder{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .25s var(--spring)}
.space-card-placeholder [data-lucide],.space-card-placeholder svg{width:26px;height:26px}
.space-card-placeholder.note{background:linear-gradient(135deg,#6366F1,#8B5CF6)}
.space-card-placeholder.sheet{background:linear-gradient(135deg,#10B981,#22D3EE)}
.space-card:hover .space-card-placeholder{transform:rotate(-5deg) scale(1.06)}
.space-name{font-family:var(--font-display);font-size:16px;font-weight:600}
.space-meta{color:var(--text-muted);font-size:12px;display:flex;align-items:center;gap:5px}
.space-meta [data-lucide],.space-meta svg{width:13px;height:13px}
.space-card-actions{display:flex;gap:8px;border-top:1px solid var(--border);padding-top:13px}

/* ═══════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════════ */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{border-color:var(--border-bright)}
.empty-state{text-align:center;padding:70px 20px;color:var(--text-muted);animation:fadeInUp .5s ease}
.empty-icon{display:inline-flex;margin-bottom:18px;opacity:.45;animation:float 4s ease-in-out infinite;color:var(--accent)}
.empty-icon [data-lucide],.empty-icon svg{width:56px;height:56px;stroke-width:1.5}
.empty-title{font-size:19px;font-weight:600;color:var(--text-secondary);margin-bottom:9px;font-family:var(--font-display)}
.empty-desc{font-size:14px;margin-bottom:24px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;animation:fadeInUp .4s ease;gap:14px}
.section-title{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:9px}
.section-title [data-lucide],.section-title svg{width:18px;height:18px;color:var(--accent)}
.section-count{font-size:12px;font-weight:600;color:var(--text-muted);background:var(--bg-inset);padding:2px 9px;border-radius:20px}
.divider{border:none;border-top:1px solid var(--border);margin:26px 0}

/* ── Settings ── */
.settings-wrap{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.settings-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.settings-head{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.settings-head [data-lucide],.settings-head svg{width:20px;height:20px;color:var(--accent)}
.settings-head h2{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--text-primary)}
.settings-desc{font-size:13px;color:var(--text-muted);margin-bottom:20px}
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mode-card{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid var(--border);border-radius:14px;cursor:pointer;background:var(--bg-inset);transition:all .2s var(--ease)}
.mode-card:hover{border-color:var(--border-bright);transform:translateY(-2px)}
.mode-card.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.mode-card .mode-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.mode-card .mode-ic [data-lucide],.mode-card .mode-ic svg{width:22px;height:22px}
.mode-card.dark .mode-ic{background:linear-gradient(135deg,#1E293B,#0F172A)}
.mode-card.light .mode-ic{background:linear-gradient(135deg,#FBBF24,#FB923C)}
.mode-card strong{font-size:14px;color:var(--text-primary);font-weight:600;display:block}
.mode-card small{font-size:12px;color:var(--text-muted)}
.mode-card .mode-check{margin-left:auto;color:var(--accent);opacity:0;transition:opacity .2s}
.mode-card.active .mode-check{opacity:1}
.accent-swatches{display:flex;gap:16px;flex-wrap:wrap}
.accent-pick{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;background:none;border:none;font-family:var(--font-body)}
.accent-swatch{width:54px;height:54px;border-radius:16px;border:2px solid transparent;position:relative;transition:all .22s var(--spring);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.accent-pick:hover .accent-swatch{transform:translateY(-3px) scale(1.05)}
.accent-swatch.active{border-color:var(--text-primary)}
.accent-swatch .sw-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .2s}
.accent-swatch.active .sw-check{opacity:1}
.accent-swatch .sw-check [data-lucide],.accent-swatch .sw-check svg{width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.accent-label{font-size:12px;font-weight:600;color:var(--text-secondary)}
.accent-swatch.custom-swatch{display:flex;align-items:center;justify-content:center}
.accent-swatch.custom-swatch .cs-plus{position:absolute;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.accent-swatch.custom-swatch.active .cs-plus{opacity:0}
/* custom color picker */
.custom-color{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.cc-field{display:flex;flex-direction:column;gap:8px;transition:opacity .2s}
.cc-field > span{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}
.cc-input{display:flex;align-items:center;gap:9px}
.cc-input input[type=color]{width:48px;height:48px;padding:0;border:1px solid var(--border);border-radius:13px;background:var(--bg-inset);cursor:pointer}
.cc-input input[type=color]::-webkit-color-swatch{border:none;border-radius:10px}
.cc-input input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.cc-input input[type=color]::-moz-color-swatch{border:none;border-radius:10px}
.cc-input input[type=text]{width:100px;font-family:monospace;text-transform:uppercase;font-size:13px}
.cc-field.disabled{opacity:.4;pointer-events:none}
.cc-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--text-secondary);font-weight:500;margin-top:26px}
.cc-toggle input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.cc-preview{margin-top:18px;height:52px;border-radius:13px;border:1px solid var(--border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.account-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--border)}
.account-row:last-child{border-bottom:none}
.account-row [data-lucide],.account-row svg{width:18px;height:18px;color:var(--text-muted)}
.account-row .a-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;min-width:90px}
.account-row .a-val{font-size:14px;color:var(--text-primary);font-weight:500}
.dev-credit{text-align:center;font-size:13px;color:var(--text-muted);padding:8px;display:flex;align-items:center;justify-content:center;gap:7px}
.dev-credit [data-lucide],.dev-credit svg{width:15px;height:15px;color:var(--accent)}
.dev-credit b{color:var(--text-secondary);font-weight:600}
/* Developer credit links out to niranjand.in. Underlined on hover only, so
   it stays a quiet footer rather than competing with the page. */
.dev-link,.auth-credit .dev-link{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s var(--ease)}
.dev-link:hover{border-bottom-color:var(--accent)}
.dev-link b{color:inherit;font-weight:600}
.dev-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:920px){.sidebar{width:230px;min-width:230px}.main-content{margin-left:230px}.stats-grid{grid-template-columns:1fr 1fr}.form-row-2{grid-template-columns:1fr}}
@media(max-width:660px){.main-content{margin-left:0}.stats-grid{grid-template-columns:1fr}.pwd-grid{grid-template-columns:1fr}.page-body{padding:18px}.topbar{padding:12px 16px}.popup-container{right:12px;top:12px;max-width:calc(100vw - 24px)}}

/* ── Mobile navigation ──────────────────────────────────────────────
   The sidebar used to be `display:none` below 660px with nothing in its
   place, so on a phone there was no way to reach Dashboard, Data Spaces,
   Settings or Log out at all. It now slides in as a drawer behind a
   hamburger button (injected by vaultx.js, so no page template changes).
*/
/* ── Inline rename (Data Spaces) ────────────────────────────────────
   A contenteditable that stays invisible until hovered or focused, so the
   title reads as a title rather than a form field. */
.space-rename{outline:none;border-radius:8px;padding:2px 7px;margin-left:-7px;border:1px solid transparent;cursor:text;transition:background-color .15s var(--ease),border-color .15s var(--ease);min-width:1ch;display:inline-block}
.space-rename:hover{background:var(--bg-hover);border-color:var(--border)}
.space-rename:focus{background:var(--bg-inset);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.space-rename:empty::before{content:'Untitled';color:var(--text-muted)}

.vx-nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;margin-right:2px;border:1px solid var(--border);border-radius:11px;background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease)}
.vx-nav-toggle:hover{background:var(--bg-hover);color:var(--text-primary)}
.vx-nav-toggle svg{width:20px;height:20px}
.vx-nav-backdrop{position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}

@media(max-width:660px){
  /* Override the display:none above; the drawer is moved off-screen with a
     transform instead, which animates on the compositor. */
  .sidebar{display:flex;width:min(86vw,300px);min-width:0;transform:translateX(-100%);transition:transform .26s var(--ease);box-shadow:0 0 60px -10px rgba(0,0,0,.6)}
  body.vx-nav-open .sidebar{transform:translateX(0)}
  body.vx-nav-open .vx-nav-backdrop{opacity:1;pointer-events:auto}
  body.vx-nav-open{overflow:hidden}
  .vx-nav-toggle{display:inline-flex}
  /* Give tap targets a comfortable size on touch screens. */
  .action-btn{width:38px;height:38px}
  .copy-btn{padding:8px}
  .cat-chip{padding:9px 16px}
  .topbar-title{font-size:16px}
  .search-wrap{max-width:none}
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%}
  .space-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .page-body{padding:14px}
  .pwd-card,.stat-card{padding:16px}
  .stat-value{font-size:30px}
}

/* ═══════════════════════════════════════════════════
   ACCESSIBILITY — reduced motion
═══════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}