/* =========================================================
   Vault product demo — authentic app theme (cream + brass)
   Loaded only on the Services page.
   ========================================================= */
.vault-demo { --vc-bg:var(--bg-2); --vc-card:var(--surface); --vc-gold:var(--vb-blue); --vc-gold-2:var(--vb-cyan); --vc-ink:var(--text); --vc-soft:var(--text-soft); --vc-line:var(--border); --vc-serif:'Playfair Display', serif; }
.vd-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:22px; }
.vd-tab { font-family:var(--font-head); font-size:.86rem; font-weight:500; padding:10px 18px; border-radius:100px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-soft); cursor:pointer; transition:.3s var(--ease); }
.vd-tab:hover { color:var(--text); border-color:var(--vb-blue); }
.vd-tab.active { color:#2A2208; background:var(--vb-grad); border-color:transparent; font-weight:600; }

.vapp { max-width:1000px; margin:0 auto; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-strong); box-shadow:var(--shadow); background:var(--vc-bg); color:var(--vc-ink); }
.vapp-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:#EFEBE0; border-bottom:1px solid var(--vc-line); }
.vapp-logo { font-family:var(--vc-serif); font-style:italic; font-weight:600; font-size:1.05rem; color:var(--vc-ink); display:flex; align-items:center; gap:9px; }
.vapp-win i { display:inline-block; width:11px; height:11px; border-radius:50%; margin-left:6px; background:#CFC9BB; }
.vseal, .v-seal-sm { width:22px; height:22px; border-radius:50%; flex:none; background:radial-gradient(circle at 35% 30%, #E3C57E, #B5893B 70%); box-shadow:inset 0 0 0 2px #9C7430, 0 1px 2px rgba(0,0,0,.2); position:relative; }
.vseal::after, .v-seal-lg::after, .v-seal-sm::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:5px; height:5px; border-radius:50%; background:#5C431A; box-shadow:0 4px 0 -1px #5C431A; }

.vscreen { display:none; min-height:430px; }
.vscreen.active { display:block; animation:vfade .4s var(--ease); }
@keyframes vfade { from { opacity:0; transform:translateY(8px); } }

/* Unlock screen */
.v-unlock { max-width:380px; margin:0 auto; padding:40px 24px 48px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.v-seal-lg { width:74px; height:74px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #E8CD86, #B0853A 72%); box-shadow:inset 0 0 0 5px #9C7430, 0 6px 16px rgba(120,90,30,.35); position:relative; margin-bottom:22px; }
.v-serif { font-family:var(--vc-serif); font-weight:600; letter-spacing:.04em; color:var(--vc-ink); }
.v-unlock h2 { font-size:1.9rem; margin-bottom:6px; }
.v-sub { color:var(--vc-soft); font-size:.9rem; margin-bottom:26px; }
.v-lbl { align-self:flex-start; font-family:var(--font-head); font-size:.68rem; letter-spacing:.16em; color:var(--vc-soft); margin-bottom:7px; }
.v-input { width:100%; display:flex; align-items:center; justify-content:space-between; padding:13px 15px; background:var(--vc-card); border:1px solid var(--vc-line); border-radius:10px; color:var(--vc-ink); font-size:1.1rem; letter-spacing:2px; margin-bottom:16px; }
.v-input svg { width:18px; height:18px; color:var(--vc-soft); }
.v-btn { width:100%; padding:13px; border-radius:10px; font-family:var(--font-head); font-weight:600; font-size:.92rem; cursor:pointer; margin-bottom:11px; display:flex; align-items:center; justify-content:center; gap:9px; transition:.25s var(--ease); }
.v-btn svg { width:18px; height:18px; }
.v-btn-gold { background:var(--vc-gold-2); color:#3A2C0C; border:1px solid var(--vc-gold); }
.v-btn-gold:hover { background:var(--vc-gold); }
.v-btn-print { background:var(--vc-card); color:var(--vc-gold); border:1px solid var(--vc-gold); }
.v-btn-print:hover { background:#FBF5E8; }
.v-btn-line { background:var(--vc-card); color:var(--vc-ink); border:1px solid var(--vc-line); }
.v-btn-line:hover { border-color:var(--vc-gold); }
.v-divider { width:100%; height:1px; background:var(--vc-line); margin:18px 0 14px; }
.v-fine { font-size:.76rem; color:var(--vc-soft); line-height:1.6; }
.v-fine a { color:#B23B3B; text-decoration:underline; }

/* Items / detail */
.v-body { display:grid; grid-template-columns:190px 1fr 1.05fr; min-height:430px; }
.v-side { background:#EFEBE0; border-right:1px solid var(--vc-line); padding:18px 12px; }
.v-cap { font-family:var(--font-head); font-size:.62rem; letter-spacing:.16em; color:var(--vc-soft); margin:14px 6px 8px; }
.v-cap:first-child { margin-top:0; }
.v-nav { display:flex; align-items:center; justify-content:space-between; padding:9px 11px; border-radius:8px; font-size:.84rem; color:#4A453B; margin-bottom:2px; }
.v-nav b { font-weight:500; color:var(--vc-soft); font-size:.78rem; }
.v-nav.v-on { background:var(--vc-card); color:var(--vc-ink); box-shadow:inset 3px 0 0 var(--vc-gold); }
.v-list { border-right:1px solid var(--vc-line); padding:16px 12px; }
.v-search { padding:10px 13px; border:1px solid var(--vc-line); border-radius:9px; background:var(--vc-card); color:var(--vc-soft); font-size:.82rem; margin-bottom:14px; }
.v-row { display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:9px; cursor:default; }
.v-row small { color:var(--vc-soft); font-size:.74rem; }
.v-row b { font-size:.86rem; font-weight:600; }
.v-row.v-sel { background:#FBF5E8; box-shadow:inset 0 0 0 1px var(--vc-line); }
.v-ic { width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--vc-serif); font-style:italic; font-weight:600; color:var(--vc-gold); border:1px solid var(--vc-gold); background:var(--vc-card); }
.v-ic.big { width:46px; height:46px; font-size:1.2rem; }
.v-detail { padding:22px 22px; }
.v-dhead { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.v-dhead h3 { font-size:1.25rem; }
.v-dhead small { color:var(--vc-soft); font-size:.76rem; }
.v-field { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--vc-card); border:1px solid var(--vc-line); border-radius:9px; font-size:.88rem; margin-bottom:14px; }
.v-copy { margin-left:auto; font-family:var(--font-head); font-size:.72rem; color:var(--vc-gold); border:1px solid var(--vc-gold); padding:3px 9px; border-radius:6px; }
.v-field .v-copy + .v-copy { margin-left:6px; }
.v-strength { display:flex; align-items:center; gap:10px; margin-top:6px; }
.v-strength span { height:6px; width:40%; border-radius:3px; background:linear-gradient(90deg,#9BBF6A,#6FA03C); }
.v-strength span.full { width:100%; }
.v-strength i { font-style:normal; font-size:.76rem; color:#6FA03C; }

/* Notes */
.v-note { padding:26px 28px; }
.v-note h3 { font-size:1.4rem; }
.v-note-meta { color:var(--vc-soft); font-size:.76rem; }
.v-note-body { margin-top:18px; font-size:.9rem; color:#3A352C; line-height:1.85; }
.v-note-body hr { border:none; border-top:1px solid var(--vc-line); margin:14px 0; }
.v-note-tools { display:flex; gap:8px; margin-top:22px; }
.v-note-tools span { width:34px; height:30px; display:grid; place-items:center; border:1px solid var(--vc-line); border-radius:7px; background:var(--vc-card); font-size:.82rem; color:var(--vc-soft); }
.v-note-tools span:last-child { width:auto; padding:0 12px; margin-left:auto; color:var(--vc-gold); }
.v-tasklet { margin-top:20px; border-top:1px solid var(--vc-line); padding-top:16px; }
.v-tl-head { font-family:var(--font-head); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vc-soft); margin-bottom:10px; }
.v-tl { display:flex; align-items:center; gap:10px; font-size:.86rem; color:#3A352C; padding:7px 0; }
.v-tl i { margin-left:auto; font-style:normal; font-size:.74rem; color:var(--vc-soft); }
.v-tl.hot i { color:#B8862F; }
.v-tl-box { width:18px; height:18px; border-radius:5px; border:2px solid var(--vc-soft); flex:none; display:grid; place-items:center; font-size:.62rem; color:#fff; }
.v-tl-box.on { background:#6FA03C; border-color:#6FA03C; }
.v-tl.done { color:var(--vc-soft); text-decoration:line-through; }

/* Generator + Themes */
.v-gen, .v-themes { max-width:520px; margin:0 auto; padding:40px 28px; }
.v-gen h3, .v-themes h3 { font-size:1.5rem; margin-bottom:20px; }
.v-gen-out { display:flex; align-items:center; gap:10px; padding:16px 18px; background:var(--vc-card); border:1px dashed var(--vc-gold); border-radius:10px; font-family:'Space Grotesk',monospace; font-size:1.05rem; letter-spacing:1px; margin-bottom:14px; word-break:break-all; }
.v-gen-row { display:flex; align-items:center; gap:14px; padding:12px 2px; font-size:.9rem; border-bottom:1px solid var(--vc-line); }
.v-gen-row span:first-child { flex:1; }
.v-gen-row b { font-family:var(--font-head); }
.v-range { width:120px; height:6px; border-radius:3px; background:var(--vc-line); position:relative; }
.v-range span { position:absolute; left:0; top:0; height:100%; border-radius:3px; background:var(--vc-gold); }
.v-range::after { content:""; position:absolute; top:50%; transform:translate(-50%,-50%); left:72%; width:14px; height:14px; border-radius:50%; background:var(--vc-gold-2); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.v-switch { width:38px; height:22px; border-radius:100px; background:var(--vc-line); position:relative; flex:none; }
.v-switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:.25s; }
.v-switch.on { background:var(--vc-gold); }
.v-switch.on::after { left:18px; }
.v-theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.v-swatch { border:1px solid var(--vc-line); border-radius:11px; padding:12px; background:var(--vc-card); font-size:.78rem; color:var(--vc-ink); display:flex; flex-direction:column; gap:9px; cursor:default; }
.v-swatch i { height:42px; border-radius:7px; background:var(--bg); box-shadow:inset 0 0 0 3px var(--a); display:block; }
.v-swatch.v-on { box-shadow:0 0 0 2px var(--vc-gold); border-color:transparent; }
.v-color-bar { height:14px; border-radius:7px; background:linear-gradient(90deg,#C2974A,#3A6EA5,#1F9E78,#9B5DE5,#E07A5F); position:relative; margin-top:7px; }
.v-color-bar span { position:absolute; top:50%; left:8%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4); border:2px solid var(--vc-gold); }
.vd-hint { display:block; text-align:center; color:var(--text-dim); font-size:.82rem; margin-top:18px; }

/* Vault phone mockup */
.v-phone-wrap { display:flex; justify-content:center; }
.v-phone { width:280px; border-radius:38px; padding:12px; background:#1A1813; box-shadow:var(--shadow); position:relative; }
.v-phone-notch { position:absolute; top:18px; left:50%; transform:translateX(-50%); width:90px; height:22px; background:#1A1813; border-radius:0 0 14px 14px; z-index:3; }
.v-phone-screen { background:var(--bg-2); border-radius:28px; padding:26px 16px 18px; color:var(--text); min-height:520px; }
.v-pm-top { display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.v-pm-top b { font-family:'Playfair Display',serif; font-style:italic; font-size:1.05rem; }
.v-pm-lock { margin-left:auto; font-size:.85rem; opacity:.7; }
.v-pm-title { font-family:'Playfair Display',serif; font-weight:600; letter-spacing:.05em; font-size:1.2rem; margin-bottom:12px; }
.v-pm-search { padding:9px 12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface); color:var(--text-dim); font-size:.8rem; margin-bottom:12px; }
.v-pm-row { display:flex; align-items:center; gap:11px; padding:9px 6px; border-bottom:1px solid var(--border); }
.v-pm-row b { font-size:.82rem; }
.v-pm-row small { color:var(--text-dim); font-size:.7rem; }
.v-pm-row .v-fav { margin-left:auto; color:var(--vb-cyan); font-style:normal; font-size:.8rem; }
.v-pm-tabbar { display:flex; justify-content:space-around; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.v-pm-tabbar span { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:1rem; color:var(--text-dim); }
.v-pm-tabbar span i { font-style:normal; font-size:.6rem; letter-spacing:.04em; }
.v-pm-tabbar span.on { color:var(--vb-cyan); }

/* Pricing */
.bill-toggle { display:inline-flex; gap:4px; padding:4px; border-radius:100px; border:1px solid var(--border-strong); background:var(--surface); margin-top:6px; }
.bill-opt { font-family:var(--font-head); font-size:.88rem; font-weight:500; padding:9px 20px; border-radius:100px; border:none; background:none; color:var(--text-soft); cursor:pointer; transition:.25s var(--ease); display:flex; align-items:center; gap:8px; }
.bill-opt.active { background:var(--vb-grad); color:#05070C; font-weight:600; }
.bill-opt .save { font-size:.66rem; padding:2px 7px; border-radius:100px; background:rgba(0,0,0,.18); }
.price-card { position:relative; padding:34px 30px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); backdrop-filter:blur(10px); display:flex; flex-direction:column; transition:.4s var(--ease); }
.price-card:hover { transform:translateY(-6px); border-color:var(--border-strong); }
.price-card.featured { border-color:transparent; background:var(--surface-2); }
.price-card.featured::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--vb-grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.price-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-family:var(--font-head); font-size:.72rem; font-weight:600; letter-spacing:.05em; padding:5px 16px; border-radius:100px; background:var(--vb-grad); color:#05070C; }
.price-card h3 { font-size:1.4rem; margin-bottom:4px; }
.price-sub { color:var(--text-soft); font-size:.9rem; margin-bottom:20px; }
.price { display:flex; align-items:flex-end; gap:3px; margin-bottom:4px; }
.price .cur { font-family:var(--font-head); font-size:1.2rem; color:var(--text-soft); margin-bottom:7px; }
.price .amt { font-family:var(--font-head); font-size:3.1rem; font-weight:700; line-height:1; letter-spacing:-.02em; }
.price .per { color:var(--text-soft); font-size:1rem; margin-bottom:7px; }
.price-note { font-size:.82rem; color:var(--text-dim); margin-bottom:22px; }
.price-list { display:flex; flex-direction:column; gap:11px; margin-bottom:26px; }
.price-list li { font-size:.92rem; color:var(--text-soft); }
.price-list li.muted { color:var(--text-dim); opacity:.6; }
.price-card .btn { margin-top:auto; }

@media (max-width:980px){ .v-body { grid-template-columns:1fr; } .v-side, .v-list { display:none; } .v-detail { padding:30px 26px; } }

/* =========================================================
   Accurate Vault brass keyhole seal (reusable inline SVG)
   ========================================================= */
.seal { display:inline-block; flex:none; line-height:0; filter:drop-shadow(0 1px 1.5px rgba(70,45,10,.3)); }
.seal svg { width:100%; height:100%; display:block; }

/* Light "All Items" hero window (matches the real app) */
.hero-frame.bare { background:transparent !important; border:none !important; box-shadow:none !important; overflow:visible; }
.hero-frame.bare::before { display:none !important; }
.v-lock { font-family:var(--vc-serif); font-style:italic; font-size:.8rem; color:#7C5520; border:1px solid #D8C9A6; background:#FBF6EA; padding:4px 13px; border-radius:7px; display:inline-flex; align-items:center; gap:6px; }
.v-list-title { font-family:var(--vc-serif); font-weight:700; letter-spacing:.06em; font-size:1.25rem; color:var(--vc-ink); margin-bottom:13px; }
.v-actions { display:flex; gap:9px; margin-bottom:14px; }
.v-newbtn { flex:1; text-align:center; padding:11px; border-radius:9px; background:var(--vc-gold-2); color:#3A2C0C; font-family:var(--font-head); font-weight:600; font-size:.84rem; border:1px solid var(--vc-gold); }
.v-importbtn { padding:11px 14px; border-radius:9px; background:var(--vc-card); color:#5A5247; font-family:var(--font-head); font-weight:500; font-size:.82rem; border:1px solid var(--vc-line); display:flex; align-items:center; gap:7px; }
.v-side-spacer { height:14px; }
.v-side-bottom { margin-top:14px; border-top:1px solid var(--vc-line); padding-top:10px; }
.v-empty { display:flex; align-items:center; justify-content:center; height:100%; min-height:330px; padding:30px; text-align:center; }
.v-empty span { font-family:var(--vc-serif); font-style:italic; font-size:1.2rem; color:#A89E8C; }
.v-cat-add { float:right; color:var(--vc-gold); font-weight:700; }

/* Cream reminder toast for the hero */
.vh-toast.cream { background:rgba(255,253,247,.94); border:1px solid #E2D3AE; box-shadow:0 18px 50px -14px rgba(90,65,20,.4); }
.vh-toast.cream b { color:#2A2208; font-family:var(--vc-serif); font-weight:700; }
.vh-toast.cream p { color:#7A715F; }

/* =========================================================
   Notes & Tasks screens — match real app screenshots
   ========================================================= */
.v-side-logo { display:flex; align-items:center; gap:10px; font-family:var(--vc-serif); font-weight:700; letter-spacing:.06em; font-size:1.2rem; color:var(--vc-ink); padding:2px 8px 16px; }
.v-side .v-newbtn, .v-side .v-importbtn { display:none; }
.v-list-head { padding:0 2px; }
.v-newbtn.wide { display:block; width:100%; margin-bottom:14px; }

/* detail header w/ pin & delete */
.v-dh { display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; }
.v-dh .v-ic { background:var(--vc-card); }
.v-dh h3 { font-size:1.5rem; }
.v-dh-actions { margin-left:auto; display:flex; gap:8px; }
.v-pin, .v-del { font-family:var(--font-head); font-size:.78rem; padding:7px 13px; border-radius:8px; background:var(--vc-card); border:1px solid var(--vc-line); color:var(--vc-ink); }
.v-del { color:#C0392B; border-color:#E3B5AE; }
.v-updated { font-family:var(--font-head); font-size:.74rem; letter-spacing:.08em; color:var(--vc-soft); margin:2px 0 0 60px; }
.v-rule { height:2px; background:linear-gradient(90deg, var(--vc-gold), transparent); margin:16px 0; border-radius:2px; }
.v-sec { font-family:var(--font-head); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vc-soft); margin:18px 0 9px; }
.v-sec:first-child { margin-top:0; }

/* note rich toolbar */
.v-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; border:1px solid var(--vc-line); border-radius:9px; padding:9px 10px; background:var(--vc-card); }
.v-tb { min-width:26px; height:28px; padding:0 7px; display:grid; place-items:center; border-radius:6px; font-size:.82rem; color:#4A453B; border:1px solid transparent; }
.v-tb.u { text-decoration:underline; } .v-tb.s { text-decoration:line-through; } .v-tb.i { font-style:italic; } .v-tb.b { font-weight:700; }
.v-tb-dd { height:30px; padding:0 12px; display:flex; align-items:center; gap:18px; border:1px solid var(--vc-line); border-radius:7px; font-size:.8rem; color:var(--vc-soft); }
.v-tb-sep { width:1px; height:20px; background:var(--vc-line); margin:0 3px; }
.v-note-content { margin-top:14px; padding:14px 2px; font-size:.95rem; color:#2E2A22; min-height:90px; }

/* tasks list */
.v-quickadd { display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--vc-line); border-radius:10px; background:var(--vc-card); color:var(--vc-soft); font-size:.84rem; margin-bottom:12px; }
.v-overdue { display:flex; align-items:center; gap:10px; background:#FBE7E2; border:1px solid #F0CcC4; border-radius:10px; padding:9px 11px; margin-bottom:16px; font-size:.84rem; color:#9A4032; }
.v-overdue .om { margin-left:auto; display:flex; gap:7px; }
.v-om-move { background:var(--vc-gold-2); color:#3A2C0C; border:1px solid var(--vc-gold); padding:5px 11px; border-radius:7px; font-family:var(--font-head); font-size:.76rem; font-weight:600; }
.v-om-dismiss { background:var(--vc-card); color:#5A5247; border:1px solid var(--vc-line); padding:5px 11px; border-radius:7px; font-family:var(--font-head); font-size:.76rem; }
.v-month { font-family:var(--vc-serif); font-style:italic; font-size:1.05rem; color:var(--vc-ink); margin-bottom:10px; }
.v-week { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; border:1px solid var(--vc-line); border-radius:9px; font-family:var(--font-head); font-size:.84rem; color:var(--vc-ink); margin-bottom:8px; background:var(--vc-card); }
.v-week b { color:var(--vc-soft); font-weight:500; }
.v-task2 { display:flex; align-items:flex-start; gap:13px; padding:11px 8px; }
.v-task2 .box { width:22px; height:22px; border-radius:6px; border:2px solid #C9C2B4; flex:none; margin-top:1px; }
.v-task2 b { font-family:var(--font-head); font-weight:500; font-size:.9rem; color:var(--vc-ink); display:block; }
.v-task2 .sub { font-size:.76rem; color:var(--vc-soft); display:flex; align-items:center; gap:6px; margin-top:2px; }
.v-task2.hot .sub { color:#C0392B; }

/* tasks detail */
.v-chips { display:flex; flex-wrap:wrap; gap:9px; }
.v-chip { display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:8px; border:1px solid var(--vc-line); background:var(--vc-card); font-family:var(--font-head); font-size:.82rem; color:var(--vc-ink); }
.v-chip.clear { color:#C0392B; border-color:#E3B5AE; }
.v-togglerow { display:flex; align-items:center; gap:12px; }
.v-togglerow span { font-size:.9rem; color:var(--vc-ink); }
.v-dd { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border:1px solid var(--vc-line); border-radius:9px; background:var(--vc-card); font-size:.88rem; color:var(--vc-ink); }
.v-dd::after { content:"▾"; color:var(--vc-soft); }
.v-help { font-size:.8rem; color:var(--vc-soft); margin-top:10px; line-height:1.5; }

/* =========================================================
   Adaptive overrides — Services demo follows site dark/light
   ========================================================= */
.vault-demo .vapp-bar { background:var(--surface); }
.vault-demo .vapp-win i { background:var(--border-strong); }
.vault-demo .v-side { background:var(--surface); }
.vault-demo .v-nav { color:var(--text-soft); }
.vault-demo .v-nav.v-on { background:var(--surface-2); box-shadow:inset 3px 0 0 var(--vb-blue); }
.vault-demo .v-row.v-sel { background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.vault-demo .v-ic { color:var(--vb-cyan); border-color:var(--border-strong); background:var(--surface); }
.vault-demo .v-btn-gold,
.vault-demo .v-newbtn,
.vault-demo .v-om-move { background:var(--vb-grad); color:#05070C; border:none; }
.vault-demo .v-btn-print { background:var(--surface); color:var(--vb-cyan); border:1px solid var(--vb-blue); }
.vault-demo .v-btn-line,
.vault-demo .v-importbtn,
.vault-demo .v-om-dismiss,
.vault-demo .v-pin,
.vault-demo .v-chip,
.vault-demo .v-week,
.vault-demo .v-quickadd,
.vault-demo .v-dd,
.vault-demo .v-toolbar { background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.vault-demo .v-importbtn { color:var(--text-soft); }
.vault-demo .v-note-body, .vault-demo .v-note-content { color:var(--text-soft); }
.vault-demo .v-tb { color:var(--text-soft); }
.vault-demo .v-copy { color:var(--vb-cyan); border-color:var(--vb-blue); }
.vault-demo .v-rule { background:linear-gradient(90deg, var(--vb-blue), transparent); }
.vault-demo .v-task2 .box, .vault-demo .v-tl-box { border-color:var(--border-strong); }
.vault-demo .v-del { color:#FF6B6B; border-color:rgba(255,107,107,.45); }
.vault-demo .v-chip.clear { color:#FF6B6B; border-color:rgba(255,107,107,.45); }
.vault-demo .v-overdue { background:rgba(255,107,107,.12); border-color:rgba(255,107,107,.4); color:#FF9B8E; }
.vault-demo .v-updated, .vault-demo .v-sec { color:var(--text-dim); }
.vault-demo .v-search, .vault-demo .v-input, .vault-demo .v-field, .vault-demo .v-gen-out { background:var(--surface); }

/* =========================================================
   Generator & Themes — modal screens (adaptive, uniform)
   ========================================================= */
.v-modalstage { position:relative; min-height:470px; display:grid; place-items:center; padding:34px; overflow:hidden; }
.v-modalstage::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:46px 46px; opacity:.35; }
.v-modalstage::after { content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 50%, transparent); }
.v-modal { position:relative; z-index:3; width:min(560px,94%); border-radius:16px; border:1px solid var(--border-strong); background:var(--bg-2); box-shadow:var(--shadow); overflow:hidden; }
.v-modal-head { display:flex; align-items:center; justify-content:space-between; padding:19px 24px; border-bottom:1px solid var(--border); }
.v-modal-head h3 { font-family:var(--vc-serif); font-weight:700; letter-spacing:.09em; font-size:1.2rem; color:var(--text); }
.v-modal-x { color:var(--text-dim); font-size:1.2rem; line-height:1; }
.v-modal-body { padding:22px 24px; }
.v-modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:15px 24px; border-top:1px solid var(--border); }
.v-modal-foot .v-btn { width:auto; margin:0; padding:11px 20px; }
.v-gen-out.center { justify-content:center; color:var(--vb-cyan); font-size:1.1rem; }
.v-numbox { min-width:54px; text-align:center; padding:7px 0; border:1px solid var(--border-strong); border-radius:8px; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--text); }
.v-genrow2 { display:flex; align-items:center; gap:16px; padding:13px 2px; font-size:.92rem; color:var(--text); border-bottom:1px solid var(--border); }
.v-genrow2:last-child { border-bottom:none; }
.v-genrow2 span:first-child { flex:1; }
.v-genrow2 .v-range { flex:none; }

/* themes grid */
.v-theme-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-height:330px; overflow-y:auto; padding-right:4px; }
.v-theme2 { border:1px solid var(--border-strong); border-radius:12px; padding:16px; background:var(--surface); transition:.3s var(--ease); }
.v-theme2:hover { border-color:var(--vb-blue); }
.v-theme2.sel { box-shadow:0 0 0 1.5px var(--vb-blue); border-color:transparent; }
.v-theme2 h4 { font-family:var(--vc-serif); font-weight:600; letter-spacing:.05em; font-size:.98rem; margin-bottom:11px; color:var(--text); }
.v-tdots { display:flex; gap:8px; margin-bottom:12px; }
.v-tdots i { width:21px; height:21px; border-radius:50%; display:block; border:1px solid rgba(255,255,255,.14); }
.v-theme2 .meta { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-head); font-size:.76rem; color:var(--text-dim); }
.v-theme2 .meta a { color:var(--vb-cyan); }

/* nav icon alignment (SVG icons in demo sidebars) */
.v-nav span:first-child { display:inline-flex; align-items:center; gap:8px; }
.v-nav span:first-child svg { width:14px; height:14px; flex:none; opacity:.85; }

/* =========================================================
   AnyDesk-style promo panel (replaces phone mockup)
   ========================================================= */
.vd-promo { position:relative; border-radius:var(--radius-lg); border:1px solid var(--border-strong); background:var(--bg-2); box-shadow:var(--shadow); overflow:hidden; min-height:420px; display:grid; place-items:center; }
.vd-promo-inner { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:20px; padding:40px 30px; width:100%; }
.win-badge { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:600; font-size:.88rem; color:var(--text); padding:9px 18px; border-radius:100px; border:1px solid var(--border-strong); background:var(--surface); backdrop-filter:blur(8px); }
.win-badge svg { color:var(--vb-blue); }
.vd-mini { width:min(320px,92%); border-radius:14px; border:1px solid var(--border-strong); background:var(--bg); overflow:hidden; box-shadow:var(--shadow); transform:rotate(-2deg); transition:transform .4s var(--ease); }
.vd-promo:hover .vd-mini { transform:rotate(0deg) scale(1.02); }
.vd-mini-bar { display:flex; align-items:center; gap:8px; padding:9px 13px; border-bottom:1px solid var(--border); background:var(--surface); font-family:'Playfair Display',serif; font-style:italic; font-weight:600; font-size:.85rem; color:var(--text); }
.vd-mini-dots { margin-left:auto; display:flex; gap:5px; }
.vd-mini-dots i { width:8px; height:8px; border-radius:50%; background:var(--border-strong); }
.vd-mini-row { display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid var(--border); }
.vd-mini-row:last-child { border-bottom:none; }
.vd-mini-row b { font-family:var(--font-head); font-weight:500; font-size:.78rem; color:var(--text); display:block; }
.vd-mini-row small { color:var(--text-dim); font-size:.66rem; }
.vd-mini-row em { margin-left:auto; font-style:normal; color:var(--text-dim); letter-spacing:2px; font-size:.72rem; }
.vd-promo-note { font-size:.84rem; color:var(--text-soft); text-align:center; max-width:34ch; }