/* ╔═══════════════════════════════════════════════════════════════════
   DONEZO · DZ-LP-02-Components.css
   © 2026 Sequence Theory · Amsterdam · donezo.space
   All rights reserved. Unauthorised redistribution is prohibited.

   INTELLECTUAL PROPERTY NOTICE
   · EU Directive 2009/24/EC Art. 4 — Reproduction prohibited
   · Dutch Auteurswet Art. 1, 10, 13 — Copyright protection
   · EU Directive 2004/48/EC Art. 13 — Damages include infringer profits
   Infringement: legal@donezo.space · Source: https://donezo.space

   DZ:FILE:START
   slug:   dz-lp-components
   id:     LP-CSS-002
   role:   Components: nav, suite, cards, chips, buttons
   canary: dz-c-lp-cmp-2026
   build:  lp-1.0.0+2026.04.30
   name:   DZ-LP-02-Components.css
╚═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── */

.dz-cmdWrap{position:relative;display:none}body.dz-member .dz-cmdWrap{display:block}
.dz-cmdBtn{height:36px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--fg);cursor:pointer;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px;transition:border-color .18s,transform .15s}
.dz-cmdBtn:hover{border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.dz-cmdPanel{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:color-mix(in oklab,var(--bg) 96%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 22px 64px rgba(0,0,0,.60);padding:6px;z-index:60;display:none;animation:cmdIn .18s ease both}
.dz-cmdPanel.open{display:block}
@keyframes cmdIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.dz-cmdItem{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:none;background:transparent;color:var(--fg);font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;transition:background .14s}
.dz-cmdItem:hover{background:rgba(255,255,255,.07)}
.dz-cmdIcon{font-size:15px;width:22px;text-align:center;flex-shrink:0}
.dz-cmdSep{height:1px;background:rgba(255,255,255,.07);margin:4px 6px}
.dz-pin{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.09);background:transparent;color:var(--muted);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s,color .15s,border-color .15s}
.dz-pin.on{opacity:1!important;color:var(--y);border-color:color-mix(in oklab, var(--fg) 22%, transparent);background:color-mix(in oklab, var(--fg) 8%, transparent)}
.dz-appBtn:hover .dz-pin,.dz-appBtn.active .dz-pin{opacity:1}
.dz-appBtn{position:relative!important;padding-right:36px!important}
.dz-pinDiv{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:8px 6px 4px;pointer-events:none;user-select:none}
.dz-tab[data-cat="__pins"]{color:color-mix(in oklab, var(--fg) 35%, transparent)}
.dz-tab[data-cat="__pins"].active{border-color:color-mix(in oklab, var(--fg) 22%, transparent)}
.dz-co-back{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:102000;display:none;overflow-y:auto}
.dz-co-back.show{display:block}
.dz-co-modal{width:min(900px,calc(100vw - 24px));margin:52px auto 80px;border-radius:22px;border:1px solid rgba(255,255,255,.11);background:var(--bg);box-shadow:0 48px 140px rgba(0,0,0,.78);overflow:hidden}
.dz-co-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.dz-co-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:980;letter-spacing:-.02em}
.dz-co-demo{font-size:10px;padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.09);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.dz-co-x{width:32px;height:32px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .14s,color .14s}
.dz-co-x:hover{background:rgba(255,255,255,.06);color:var(--fg)}
/* Context strip — shown when user has an active plan */
.dz-co-ctx{display:none;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.05);font-size:11px;background:rgba(255,255,255,.015)}
.dz-co-ctx.show{display:flex}
.dz-co-ctx-from{color:var(--muted)}
.dz-co-ctx-plan{font-weight:800;color:var(--fg)}
.dz-co-ctx-sep{color:rgba(255,255,255,.15);margin:0 4px}
.dz-co-ctx-to{font-weight:700;color:color-mix(in oklab, var(--fg) 35%, transparent)}
.dz-co-ctx-new{margin-left:auto;font-size:9.5px;padding:3px 10px;border-radius:999px;border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);color: var(--fg);white-space:nowrap}
.dz-co-body{display:grid;grid-template-columns:1fr 1fr}
.dz-co-left{padding:22px;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:12px}
.dz-co-right{padding:22px;display:flex;flex-direction:column;gap:14px}
.dz-co-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.7;margin-bottom:7px}
.dz-co-planOpts{display:flex;flex-direction:column;gap:7px}
.dz-co-opt{border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:border-color .16s,background .16s}
.dz-co-opt:hover{border-color:rgba(255,255,255,.14)}
.dz-co-opt.sel{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.dz-co-opt-name{font-weight:900;font-size:13.5px;letter-spacing:-.01em}
.dz-co-opt-note{font-size:11px;color:var(--muted);margin-top:2px}
.dz-co-opt-price{font-size:18px;font-weight:980;letter-spacing:-.03em;white-space:nowrap;text-align:right}
.dz-co-opt-full{font-size:10.5px;color:var(--muted);text-decoration:line-through;text-align:right}
/* Feature list — split into old+new zones */
.dz-co-feats{display:flex;flex-direction:column;gap:6px;flex:1}
.dz-co-feat{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.45}
.dz-co-feat.have{color:rgba(255,255,255,.35)}
.dz-co-feat.new{color:rgba(255,255,255,.85)}
.dz-co-feat-divider{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.5;padding:6px 0 2px;border-top:1px solid rgba(255,255,255,.05);margin-top:4px}
.dz-co-ck{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.dz-co-ck.have{border-color:rgba(255,255,255,.08);background:transparent;color:rgba(255,255,255,.2)}
.dz-co-ck.new{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:var(--fg)}
.dz-co-trust{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--muted);line-height:1.5;padding-top:10px;border-top:1px solid rgba(255,255,255,.05);margin-top:auto}
.dz-co-field{height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.03);color:var(--fg);padding:0 13px;font-size:13.5px;outline:none;transition:border-color .15s;width:100%;box-sizing:border-box}
.dz-co-field:focus{border-color:rgba(255,255,255,.28)}
.dz-co-card-row{display:grid;grid-template-columns:1fr 72px 56px;gap:7px;margin-top:7px}
.dz-co-methods{display:flex;gap:7px;flex-wrap:wrap}
.dz-co-meth{padding:7px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.09);background:transparent;color:rgba(255,255,255,.60);font-size:12px;cursor:pointer;transition:border-color .14s,background .14s,color .14s}
.dz-co-meth.on{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--fg)}
.dz-co-early{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 22px;
  background:linear-gradient(90deg,color-mix(in oklab, var(--fg) 8%, transparent),rgba(100,180,255,.05));
  border-bottom:1px solid color-mix(in oklab, var(--fg) 8%, transparent);
  flex-shrink:0;
}
.dz-co-early[hidden]{display:none}
.dz-co-early-left{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.dz-co-early-pill{
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in oklab, var(--fg) 35%, transparent);
  background:color-mix(in oklab, var(--fg) 8%, transparent);
  border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  padding:3px 8px;border-radius:999px;
  white-space:nowrap;flex-shrink:0;
}
.dz-co-early-copy{font-size:11.5px;color:var(--muted);line-height:1.4}
.dz-co-early-right{flex-shrink:0}
.dz-co-early-spots{
  font-size:11px;font-weight:700;
  color:color-mix(in oklab, var(--fg) 35%, transparent);
  white-space:nowrap;
}
/* Strike-through full price in plan options */
.dz-co-opt-price{display:flex;align-items:baseline;gap:6px}
.dz-co-early-price{font-size:18px;font-weight:900;color:var(--fg)}
.dz-co-full-price{font-size:13px;color:var(--muted);text-decoration:line-through;opacity:.6}

.dz-co-paybtn{width:100%;height:50px;border-radius:14px;border:none;background:var(--fg);color:var(--bg);font-size:15px;font-weight:980;letter-spacing:-.02em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity .16s,transform .15s;position:relative;overflow:hidden;margin-top:2px}
.dz-co-paybtn:hover{opacity:.91;transform:translateY(-1px)}
.dz-co-paybtn::after{content:"";position:absolute;inset:-50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.2),transparent 55%);opacity:0;transition:opacity .2s}
.dz-co-paybtn:hover::after{opacity:1}
.dz-co-paynote{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5}
.dz-co-success{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 28px;background:radial-gradient(60% 280px at 50% 0%,color-mix(in oklab, var(--fg) 8%, transparent),transparent 62%)}
.dz-co-success.show{display:flex}
.dz-succ-icon{width:58px;height:58px;border-radius:999px;border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);background:color-mix(in oklab, var(--fg) 8%, transparent);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px;box-shadow:0 0 0 12px color-mix(in oklab, var(--fg) 8%, transparent);animation:succPop .5s ease both}
@keyframes succPop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.dz-succ-icon--green{border-color:color-mix(in oklab, var(--fg) 22%, transparent);background:color-mix(in oklab, var(--fg) 8%, transparent);color:color-mix(in oklab, var(--fg) 35%, transparent);box-shadow:0 0 0 12px color-mix(in oklab, var(--fg) 8%, transparent);}
.dz-succ-kicker{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab, var(--fg) 35%, transparent);margin-bottom:8px}
.dz-succ-title{font-size:clamp(22px,3.5vw,36px);font-weight:980;letter-spacing:-.04em;line-height:1.08;margin:0 0 8px}
.dz-succ-sub{font-size:14px;color:var(--muted);max-width:380px;line-height:1.65;margin:0 0 18px}
.dz-succ-lic{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px;letter-spacing:.05em;padding:9px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.22);margin-bottom:20px;display:inline-block}
.dz-succ-btn{padding:13px 26px;border-radius:14px;border:none;background:var(--fg);color:var(--bg);font-size:14px;font-weight:980;letter-spacing:-.01em;cursor:pointer;transition:opacity .15s,transform .15s}
.dz-succ-btn:hover{opacity:.9;transform:translateY(-1px)}
/* ── Google auth step in checkout success ── */
.dz-succ-google-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:13px 20px;border-radius:13px;
  border:1.5px solid color-mix(in oklab,var(--fg) 14%,var(--border));
  background:color-mix(in oklab,var(--fg) 4%,transparent);
  color:var(--fg);font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:all .15s;margin-bottom:10px;
}
.dz-succ-google-btn:hover{
  border-color:color-mix(in oklab,var(--fg) 26%,var(--border));
  background:color-mix(in oklab,var(--fg) 8%,transparent);
  transform:translateY(-1px);
}
.dz-succ-google-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.dz-succ-google-note{font-size:11px;color:var(--muted);text-align:center;margin-bottom:8px;}
.dz-succ-google-status{
  min-height:22px;font-size:11.5px;font-weight:600;text-align:center;
  transition:all .2s;color: var(--fg);
}
.dz-succ-google-status.err{color:var(--r);}
.dz-succ-google-status.loading{color:var(--muted);}
/* ── Key reveal box in success ── */
.dz-succ-key-box{
  background:color-mix(in oklab, var(--fg) 4%, transparent);
  border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  border-radius:13px;padding:16px 18px;margin:4px 0 18px;
}
.dz-succ-key-label{
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in oklab, var(--fg) 22%, var(--muted));margin-bottom:8px;
}
.dz-succ-key-val{
  font-family:ui-monospace,monospace;font-size:16px;font-weight:800;
  letter-spacing:.12em;color:var(--fg);margin-bottom:10px;word-break:break-all;
}
.dz-succ-key-copy{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:8px;
  border:1px solid color-mix(in oklab,var(--fg) 12%,transparent);
  background:color-mix(in oklab,var(--fg) 6%,transparent);
  font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;
  color:var(--fg);transition:all .12s;
}
.dz-succ-key-copy:hover{background:color-mix(in oklab,var(--fg) 12%,transparent);}
@keyframes dzFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#dzCoSuccStep2{animation:dzFadeUp .35s cubic-bezier(.34,1.56,.64,1) both;}
@media(max-width:760px){.dz-co-body{grid-template-columns:1fr}.dz-co-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}.dz-co-modal{margin:12px auto 36px}}
.dz-hero-inner{transition:opacity .44s ease,transform .44s ease}
.dz-hero-inner.dz-fading{opacity:0;transform:translateY(7px) scale(.99)}
body.dz-member .dz-finalSection{display:none!important}
body.dz-member .dz-pricingSection{display:none!important}
.dz-plan-band{display:none;padding:0 0 40px}
body.dz-member .dz-plan-band{display:block}
.dz-pb-inner{border-radius:20px;border:1px solid color-mix(in oklab, var(--fg) 21%, transparent);background:radial-gradient(100% 200px at 50% 0%,color-mix(in oklab, var(--fg) 5%, transparent),transparent 70%);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;overflow:hidden}
.dz-pb-inner::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent 55%);pointer-events:none}
.dz-pb-left{display:flex;align-items:center;gap:12px}
.dz-pb-dot{width:9px;height:9px;border-radius:999px;background: color-mix(in oklab, var(--fg) 8%, transparent);box-shadow:0 0 0 5px color-mix(in oklab, var(--fg) 12%, transparent);animation:pbDot 2.2s ease-in-out infinite;flex-shrink:0;display:inline-block}
@keyframes pbDot{0%,100%{box-shadow:0 0 0 5px color-mix(in oklab, var(--fg) 14%, transparent)}50%{box-shadow:0 0 0 10px color-mix(in oklab, var(--fg) 8%, transparent)}}
.dz-pb-name{font-size:15px;font-weight:980;letter-spacing:-.02em}
.dz-pb-note{font-size:12px;color:var(--muted);margin-top:2px}
.dz-pb-lic{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;letter-spacing:.05em;padding:7px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.20);cursor:pointer;transition:background .14s;color:var(--fg)}
.dz-pb-lic:hover{background:rgba(0,0,0,.32)}
.dz-pb-upgrades{display:flex;gap:8px;flex-wrap:wrap}
.dz-upg{padding:8px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.09);background:transparent;color:var(--fg);font-size:12.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:border-color .15s,background .14s,transform .14s}
.dz-upg:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05);transform:translateY(-1px)}
.dz-upg-orig{font-size:11px;color:var(--muted);text-decoration:line-through}
.dz-intent-lbl{font-size:12px;color:var(--muted);text-align:center;margin-top:14px;opacity:0;animation:fadeUp 700ms ease .4s forwards}
.dz-intents{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:10px;opacity:0;animation:fadeUp 700ms ease .5s forwards}
.dz-intent{padding:9px 15px;border-radius:999px;border:1px solid color-mix(in oklab,var(--fg) 11%,transparent);background:color-mix(in oklab,var(--fg) 4%,transparent);color:var(--fg);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;transition:border-color .15s,background .15s,transform .14s;backdrop-filter:blur(6px)}
.dz-intent:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.08);transform:translateY(-1px)}
.dz-sess{display:none;align-items:center;gap:14px;padding:9px 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--fg) 6%,transparent);background:color-mix(in oklab,var(--fg) 355,.03);font-size:11.5px;color:var(--muted);flex-wrap:wrap;margin-top:14px}
.dz-sess.on{display:flex}
.dz-sess:not(.active){display:none!important}
.dz-sess-item{display:flex;align-items:center;gap:5px;white-space:nowrap}
.dz-sdot{width:5px;height:5px;border-radius:999px;background: color-mix(in oklab, var(--fg) 8%, transparent);flex-shrink:0;display:inline-block}
.dz-sv{color:var(--fg);font-weight:700}
#dzConfetti{position:fixed;inset:0;pointer-events:none;z-index:400;display:none}
body.dz-member .dz-heroCaption{display:none!important}
body.dz-member .dz-bridge{display:none!important}
.dz-priceCardAI .dz-badgeGlow{background:linear-gradient(90deg,color-mix(in oklab, var(--fg) 14%, transparent),rgba(100,180,255,.12))}

/* ═══ TEAMS CARD ═══ */
.dz-priceCardTeams{
  border-color:color-mix(in oklab, var(--fg) 14%, transparent);
  background:linear-gradient(180deg,color-mix(in oklab, var(--fg) 4%, transparent),color-mix(in oklab, var(--fg) 8%, transparent));
}
.dz-priceCardTeams::before{
  background:
    radial-gradient(400px 240px at 20% 30%,color-mix(in oklab, var(--fg) 8%, transparent),transparent 60%),
    radial-gradient(400px 240px at 75% 55%,rgba(255,160,50,.08),transparent 60%);
}
.dz-badgeAmber{
  border-color:color-mix(in oklab, var(--fg) 14%, transparent);
  background:radial-gradient(200px 60px at 30% 50%,color-mix(in oklab, var(--fg) 8%, transparent),transparent 65%),
             color-mix(in oklab, var(--fg) 8%, transparent);
  color:color-mix(in oklab, var(--fg) 65%, transparent);
}
.dz-buyTeams{
  background:var(--rainbow);
  color:#0a0a0e;
  border:none;
}
.dz-buyTeams:hover{opacity:.91}
.dz-early-lp-note{
  font-size:10.5px;font-weight:700;color:color-mix(in oklab, var(--fg) 35%, transparent);
  margin-top:6px;text-align:center;letter-spacing:.01em;
  min-height:14px;transition:opacity .2s;
}
.dz-early-lp-note:empty{display:none}
.dz-teams-req{
  margin-top:10px;
  padding:9px 12px;
  border-radius:9px;
  border:1px solid color-mix(in oklab, var(--fg) 8%, transparent);
  background:color-mix(in oklab, var(--fg) 4%, transparent);
  font-size:11px;
  color:color-mix(in oklab, var(--fg) 35%, transparent);
  line-height:1.55;
}
.dz-teams-req strong{color:color-mix(in oklab, var(--fg) 65%, transparent)}
.dz-teams-bundle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:9px 16px;
  border-radius:11px;
  border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  background:color-mix(in oklab, var(--fg) 8%, transparent);
  color:color-mix(in oklab, var(--fg) 65%, transparent);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:all .15s;
  width:100%;
  justify-content:center;
  font-family:inherit;
}
.dz-teams-bundle:hover{background:color-mix(in oklab, var(--fg) 8%, transparent);border-color:color-mix(in oklab, var(--fg) 22%, transparent)}

/* ═══ CHECKOUT: TEAMS FIELDS ═══ */
.dz-co-teams-fields{
  display:none;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:12px;
  border:1px solid color-mix(in oklab, var(--fg) 8%, transparent);
  background:color-mix(in oklab, var(--fg) 4%, transparent);
  margin-top:4px;
}
.dz-co-teams-fields.show{display:flex}
.dz-co-teams-lbl{
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:color-mix(in oklab, var(--fg) 35%, transparent);
  margin-bottom:2px;
}
.dz-co-biz-status{
  font-size:10px;
  margin-top:4px;
  min-height:16px;
  transition:color .15s;
}
.dz-co-biz-status.ok{color:var(--g)}
.dz-co-biz-status.err{color:rgba(255,100,100,.85)}

/* ═══ SPACE SETUP STEPS (dashboard) ═══ */
.dz-space-setup{
  padding:16px;
  border-radius:12px;
  border:1px dashed color-mix(in oklab, var(--fg) 14%, transparent);
  background:color-mix(in oklab, var(--fg) 4%, transparent);
  margin-bottom:12px;
}
.dz-space-setup-title{
  font-size:12px;font-weight:900;letter-spacing:-.02em;
  margin-bottom:4px;color:color-mix(in oklab, var(--fg) 65%, transparent);
  display:flex;align-items:center;gap:7px;
}
.dz-space-setup-sub{font-size:9.5px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.dz-space-steps{display:flex;flex-direction:column;gap:8px}
.dz-space-step{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:9px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.015);
}
.dz-space-step-num{
  width:20px;height:20px;border-radius:50%;
  background:color-mix(in oklab, var(--fg) 8%, transparent);border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  color:color-mix(in oklab, var(--fg) 65%, transparent);font-size:9px;font-weight:900;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.dz-space-step-body{flex:1}
.dz-space-step-title{font-size:10.5px;font-weight:800;margin-bottom:3px}
.dz-space-step-sub{font-size:9px;color:var(--muted);line-height:1.5}
.dz-space-step-input{
  margin-top:7px;width:100%;padding:6px 10px;
  border-radius:7px;border:1px solid var(--cardStroke);
  background:rgba(255,255,255,.03);color:var(--fg);
  font-size:10px;font-family:inherit;
}
.dz-space-step-input:focus{outline:none;border-color:color-mix(in oklab, var(--fg) 14%, transparent)}
.dz-space-biz-hint{font-size:9px;margin-top:4px;min-height:14px;transition:color .15s}
.dz-space-biz-hint.ok{color:rgba(90,255,170,.85)}
.dz-space-biz-hint.err{color:rgba(255,100,100,.8)}
.dz-space-cloud-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.dz-space-cloud-btn{
  padding:6px 12px;border-radius:7px;
  border:1px solid rgba(255,255,255,.08);
  background:transparent;color:var(--muted);
  font-size:9.5px;font-weight:700;cursor:pointer;
  transition:all .14s;font-family:inherit;
}
.dz-space-cloud-btn:hover{border-color:color-mix(in oklab, var(--fg) 14%, transparent);color:color-mix(in oklab, var(--fg) 65%, transparent);background:color-mix(in oklab, var(--fg) 4%, transparent)}
.dz-space-cloud-btn.sel{border-color:color-mix(in oklab, var(--fg) 22%, transparent);color:color-mix(in oklab, var(--fg) 65%, transparent);background:color-mix(in oklab, var(--fg) 8%, transparent)}
.dz-space-activate-btn{
  margin-top:10px;width:100%;padding:10px;
  border-radius:9px;border:none;
  background:var(--rainbow);
  color:#0a0a0e;font-size:11px;font-weight:900;
  cursor:pointer;transition:opacity .15s;font-family:inherit;
}
.dz-space-activate-btn:hover{opacity:.88}
.dz-space-activate-btn:disabled{opacity:.35;cursor:not-allowed}

/* ═══ BUY FOR TEAM ═══ */
.dz-buy-team-section{
  padding:14px 16px;border-radius:10px;
  border:1px solid rgba(100,180,255,.1);
  background:rgba(100,180,255,.015);
  margin-bottom:12px;
}
.dz-buy-team-title{font-size:10.5px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.dz-buy-team-sub{font-size:9px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.dz-buy-team-row{display:flex;gap:6px;align-items:center}
.dz-buy-team-input{
  flex:1;padding:7px 12px;border-radius:8px;
  border:1px solid var(--cardStroke);background:var(--card);
  color:var(--fg);font-size:10px;font-family:inherit;
}
.dz-buy-team-input:focus{outline:none;border-color:rgba(100,180,255,.2)}
.dz-buy-team-select{
  padding:7px 8px;border-radius:8px;
  border:1px solid var(--cardStroke);background:var(--card);
  color:var(--fg);font-size:10px;font-family:inherit;cursor:pointer;
}

/* ═══ DASHBOARD PANEL ═══ */
.dz-dashPane{position:absolute;inset:0;background:var(--bg);overflow:hidden;border-radius:var(--radius);z-index:5;display:flex;flex-direction:column;transition:border-radius .2s}
.dz-dash-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--cardStroke);flex-shrink:0}
.dz-dash-header-title{font-size:14px;font-weight:900;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.dz-dash-expand{height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--cardStroke);background:var(--card);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:600;font-family:inherit;transition:all .15s}
.dz-dash-expand:hover{border-color:rgba(100,180,255,.25);background:rgba(100,180,255,.06);color:rgba(100,180,255,.95)}
.dz-dashScroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.dz-dashScroll::-webkit-scrollbar{width:4px}
.dz-dashScroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* Trust banner — subtle top strip */
/* ─── SVG icon system ─────────────────────────────────────────── */
.dz-ico{width:18px;height:18px;display:inline-block;vertical-align:middle;flex-shrink:0}
.dz-ico-sm{width:15px;height:15px}
.dz-ico-lg{width:22px;height:22px}
/* ─── Trust banner ───────────────────────────────────────────── */
.dz-dash-trust{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.015);margin-bottom:20px}
.dz-dash-trust-icon{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted)}
.dz-dash-trust-title{font-size:11px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.dz-dash-trust-sub{font-size:9.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.dz-dash-trust-sub em{color:var(--fg);font-style:normal;font-weight:700}

/* Stats */
.dz-dash-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:20px}
@media(max-width:600px){.dz-dash-stats{grid-template-columns:repeat(3,1fr)}}
.dz-dash-stat{padding:14px;border-radius:10px;border:1px solid var(--cardStroke);background:var(--card);position:relative;overflow:hidden;text-align:center}
.dz-dash-stat-val{font-size:24px;font-weight:980;letter-spacing:-.04em;line-height:1}
.dz-dash-stat-lbl{font-size:8px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.dz-dash-stat-bar{position:absolute;bottom:0;left:0;right:0;height:1px;opacity:.6}

/* Grid */
.dz-dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
@media(max-width:700px){.dz-dash-grid{grid-template-columns:1fr}}

/* Cards */
.dz-dash-card{padding:20px 22px;border-radius:20px;border:1px solid color-mix(in oklab,var(--fg) 10%,var(--border));background:linear-gradient(180deg,color-mix(in oklab,var(--card) 94%,transparent),var(--card2));box-shadow:var(--shadow)}
.dz-dash-card-title{font-size:12px;font-weight:900;letter-spacing:-.01em;margin-bottom:16px;display:flex;align-items:center;gap:9px;color:var(--fg);opacity:.9}
.dz-dash-card-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
.dz-dash-card-row:last-child{border:none}
.dz-dash-card-k{color:var(--muted)}
.dz-dash-card-v{font-weight:700}
.dz-dash-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.06);margin-top:10px;overflow:hidden}
.dz-dash-bar-fill{height:100%;border-radius:2px;background:rgba(255,255,255,.45);transition:width .4s cubic-bezier(.22,1,.36,1)}
.dz-dash-btn{padding:7px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:var(--fg);font-size:11px;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s;font-family:inherit}
.dz-dash-btn:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.dz-dash-btn.primary{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.dz-dash-btn.primary:hover{background:rgba(255,255,255,.08)}

/* Plan */
.dz-dash-plan-active{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.dz-dash-plan-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);flex-shrink:0}
@keyframes dzDashPulse{0%,100%{opacity:1}50%{opacity:.4}}
.dz-dash-plan-name{font-size:18px;font-weight:980;letter-spacing:-.04em}
.dz-dash-plan-paid{font-size:10.5px;color:var(--muted);margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.dz-dash-plan-feats{list-style:none;margin:0}
.dz-dash-plan-feats li{font-size:10px;color:var(--muted);padding:4px 0;display:flex;align-items:flex-start;gap:7px;line-height:1.4;border-bottom:1px solid rgba(255,255,255,.03)}
.dz-dash-plan-feats li:last-child{border-bottom:none}
.dz-dash-plan-feats .ck{color:var(--fg);opacity:.5;flex-shrink:0;margin-top:1px}
.dz-dash-upg-row{display:flex;flex-direction:column;gap:4px}
/* Next step — quiet single line */
.dz-dash-next{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}
.dz-dash-next-lbl{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.5;margin-bottom:6px}

/* Section */
.dz-dash-section{margin-bottom:20px}
.dz-dash-section-title{font-size:13px;font-weight:900;letter-spacing:-.02em;margin-bottom:12px}

/* Filter bar */
.dz-dash-filter{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.dz-dash-ftab{padding:5px 12px;border-radius:7px;border:1px solid var(--cardStroke);background:transparent;color:var(--muted);font-size:10px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.dz-dash-ftab:hover{border-color:rgba(255,255,255,.12);color:var(--fg)}
.dz-dash-ftab.on{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--fg)}
.dz-dash-search{padding:6px 12px;border-radius:7px;border:1px solid var(--cardStroke);background:var(--card);color:var(--fg);font-size:10px;font-family:inherit;min-width:140px;transition:border-color .15s;margin-left:auto}
.dz-dash-search:focus{outline:none;border-color:rgba(100,180,255,.25)}
.dz-dash-search::placeholder{color:var(--muted)}

/* Category rows — collapsible */
.dz-dash-apps{border-radius:10px;border:1px solid var(--cardStroke);overflow:hidden}
.dz-dash-cat{border-bottom:1px solid var(--cardStroke)}
.dz-dash-cat:last-child{border-bottom:none}
.dz-dash-cat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .12s;user-select:none}
.dz-dash-cat-head:hover{background:rgba(255,255,255,.02)}
.dz-dash-cat-arrow{font-size:9px;color:var(--muted);transition:transform .2s;flex-shrink:0;width:14px;text-align:center}
.dz-dash-cat-arrow.open{transform:rotate(90deg)}
.dz-dash-cat-name{font-size:11px;font-weight:700;flex:1}
.dz-dash-cat-count{font-size:9px;color:var(--muted);font-weight:600;padding:1px 7px;border-radius:4px;background:rgba(255,255,255,.04);flex-shrink:0}
.dz-dash-cat-badges{display:flex;gap:4px;flex-shrink:0}
.dz-dash-cat-badge{font-size:7px;font-weight:800;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em}
.dz-dash-cat-badge.live{background:color-mix(in oklab, var(--fg) 8%, transparent);color: var(--fg)}
.dz-dash-cat-badge.beta{background:color-mix(in oklab, var(--fg) 8%, transparent);color:color-mix(in oklab, var(--fg) 35%, transparent)}
.dz-dash-cat-apps{display:none;padding:0 14px 8px;border-top:1px solid rgba(255,255,255,.03)}
.dz-dash-cat-apps.open{display:block}
.dz-dash-app{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;transition:background .1s}
.dz-dash-app:hover{background:rgba(255,255,255,.025)}
.dz-dash-app-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.dz-dash-app-dot.live{background:color-mix(in oklab, var(--fg) 35%, transparent)}
.dz-dash-app-dot.beta{background:color-mix(in oklab, var(--fg) 35%, transparent)}
.dz-dash-app-dot.soon{background:rgba(255,255,255,.12)}
.dz-dash-app-name{font-size:10.5px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-dash-app-name.soon{color:var(--muted);font-weight:500}
.dz-dash-app-badge{font-size:7px;font-weight:800;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.dz-dash-app-badge.live{background:color-mix(in oklab, var(--fg) 8%, transparent);color: var(--fg)}
.dz-dash-app-badge.beta{background:color-mix(in oklab, var(--fg) 8%, transparent);color:color-mix(in oklab, var(--fg) 35%, transparent)}
.dz-dash-app-badge.soon{color:var(--muted);font-weight:600}

/* Footer */
.dz-dash-footer{text-align:center;padding:20px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.01);position:relative;margin-top:8px}
.dz-dash-footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:40%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
.dz-dash-footer-icon{display:flex;align-items:center;justify-content:center;margin:0 auto 8px;color:var(--muted);width:22px;height:22px}
.dz-dash-footer-title{font-size:11px;font-weight:900;letter-spacing:-.01em;margin-bottom:3px}
.dz-dash-footer-sub{font-size:9px;color:var(--muted);line-height:1.6;max-width:340px;margin:0 auto}

/* Workspace management */
.dz-ws-header{padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.dz-ws-header-icon{width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fg)}
.dz-ws-header-name{font-size:15px;font-weight:900;letter-spacing:-.03em}
.dz-ws-header-id{font-size:8.5px;color:var(--muted);font-family:monospace;letter-spacing:.02em}
.dz-ws-header-actions{display:flex;gap:4px;margin-left:auto;flex-shrink:0}
.dz-ws-owner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.06);margin-bottom:12px}
.dz-ws-avatar{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0;color:var(--bg);letter-spacing:-.02em}
.dz-ws-owner-label{font-size:10.5px;font-weight:700}
.dz-ws-owner-sub{font-size:8.5px;color:var(--muted)}

/* Member cards */
.dz-ws-members{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.dz-ws-member{border-radius:16px;border:1px solid color-mix(in oklab,var(--fg) 8%,var(--border));background:linear-gradient(180deg,color-mix(in oklab,var(--card) 90%,transparent),var(--card2));overflow:hidden;transition:border-color .2s,box-shadow .2s}
.dz-ws-member:hover{border-color:rgba(255,255,255,.12);box-shadow:0 4px 20px rgba(0,0,0,.2)}
.dz-ws-member.paused{opacity:.55}
.dz-ws-member.revoked{opacity:.35;pointer-events:none}
.dz-ws-member-row{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:background .15s}
.dz-ws-member-row:hover{background:rgba(255,255,255,.015)}
.dz-ws-member-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dz-ws-member-dot.invited{background:color-mix(in oklab, var(--fg) 35%, transparent);box-shadow:0 0 0 2px color-mix(in oklab, var(--fg) 8%, transparent)}
.dz-ws-member-dot.active{background:color-mix(in oklab, var(--fg) 35%, transparent);box-shadow:0 0 0 2px color-mix(in oklab, var(--fg) 8%, transparent)}
.dz-ws-member-dot.paused{background:rgba(200,200,220,.4)}
.dz-ws-member-dot.revoked{background:rgba(255,100,100,.5)}
.dz-ws-member-info{flex:1;min-width:0}
.dz-ws-member-name{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.dz-ws-member-email{font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-ws-badge{font-size:7.5px;font-weight:800;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.dz-ws-badge.invited{background:rgba(255,255,255,.04);color:rgba(255,255,255,.5)}
.dz-ws-badge.active{background:rgba(255,255,255,.04);color:var(--fg)}
.dz-ws-badge.paused{background:rgba(200,200,220,.06);color:rgba(200,200,220,.7)}
.dz-ws-badge.revoked{background:rgba(255,100,100,.06);color:rgba(255,100,100,.7)}
.dz-ws-role-badge{font-size:7.5px;font-weight:700;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.04);color:var(--muted);flex-shrink:0}
.dz-ws-arrow{font-size:8px;color:var(--muted);transition:transform .2s;flex-shrink:0}
.dz-ws-arrow.open{transform:rotate(90deg)}

/* Member expanded detail */
.dz-ws-member-detail{display:none;padding:0 16px 16px;border-top:1px solid rgba(255,255,255,.05)}
.dz-ws-member-detail.open{display:block}
.dz-ws-detail-section{margin-top:10px}
.dz-ws-detail-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.dz-ws-detail-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.dz-ws-detail-btn{padding:5px 10px;border-radius:6px;border:1px solid var(--cardStroke);background:transparent;color:var(--fg);font-size:9px;font-weight:700;cursor:pointer;transition:all .12s;font-family:inherit}
.dz-ws-detail-btn:hover{background:rgba(255,255,255,.03)}
.dz-ws-detail-btn.warn{border-color:rgba(255,100,100,.12);color:rgba(255,100,100,.7)}
.dz-ws-detail-btn.warn:hover{background:rgba(255,100,100,.04)}
.dz-ws-detail-btn.ok{border-color:rgba(90,255,170,.12);color:rgba(90,255,170,.85)}
.dz-ws-detail-btn.ok:hover{background:color-mix(in oklab, var(--fg) 4%, transparent)}

/* App permission toggles */
.dz-ws-app-perms{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
@media(max-width:500px){.dz-ws-app-perms{grid-template-columns:1fr}}
.dz-ws-app-perm{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;cursor:pointer;transition:all .15s;user-select:none;border:1px solid transparent}
.dz-ws-app-perm:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}
.dz-ws-app-toggle{width:24px;height:13px;border-radius:7px;position:relative;transition:background .15s;flex-shrink:0;cursor:pointer}
.dz-ws-app-toggle.off{background:rgba(255,255,255,.08)}
.dz-ws-app-toggle.on{background:color-mix(in oklab, var(--fg) 22%, transparent)}
.dz-ws-app-toggle::after{content:"";position:absolute;top:2px;width:9px;height:9px;border-radius:50%;transition:left .15s,background .15s}
.dz-ws-app-toggle.off::after{left:2px;background:rgba(255,255,255,.3)}
.dz-ws-app-toggle.on::after{left:13px;background:color-mix(in oklab, var(--fg) 35%, transparent)}

/* ═══ APP SPACE CONFIRM STATE ═══ */
.dz-app-confirm{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;right:0;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  background:color-mix(in oklab,var(--card) 95%,transparent);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  z-index:20;
  font-size:9.5px;
  line-height:1.5;
  color:var(--fg);
}
.dz-app-confirm.show{display:block}
.dz-app-confirm-msg{margin-bottom:7px;color:var(--muted)}
.dz-app-confirm-msg strong{color:var(--fg)}
.dz-app-confirm-btns{display:flex;gap:5px}
.dz-app-confirm-yes{padding:4px 10px;border-radius:6px;border:none;background:color-mix(in oklab, var(--fg) 14%, transparent);color:color-mix(in oklab, var(--fg) 35%, transparent);font-size:9px;font-weight:800;cursor:pointer;font-family:inherit}
.dz-app-confirm-no{padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--muted);font-size:9px;font-weight:700;cursor:pointer;font-family:inherit}
.dz-ws-app-perm{position:relative}
.dz-ws-app-perm-name{font-size:9.5px;font-weight:600;color:var(--muted)}
.dz-ws-app-perm.granted{background:color-mix(in oklab, var(--fg) 4%, transparent);border-color:color-mix(in oklab, var(--fg) 8%, transparent)}.dz-ws-app-perm.granted .dz-ws-app-perm-name{color:var(--fg);font-weight:700}

/* Invite form */
.dz-ws-invite{padding:14px 16px;border-radius:10px;border:1px dashed rgba(255,255,255,.08);background:rgba(255,255,255,.01);margin-bottom:12px}
.dz-ws-invite-title{font-size:10px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.dz-ws-invite-row{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.dz-ws-invite-input{flex:1;padding:7px 12px;border-radius:8px;border:1px solid var(--cardStroke);background:var(--card);color:var(--fg);font-size:10px;font-family:inherit}
.dz-ws-invite-input:focus{outline:none;border-color:rgba(100,180,255,.2)}
.dz-ws-invite-input::placeholder{color:var(--muted)}
.dz-ws-invite-select{padding:7px 8px;border-radius:8px;border:1px solid var(--cardStroke);background:var(--card);color:var(--fg);font-size:10px;font-family:inherit;cursor:pointer}
.dz-ws-invite-apps{margin-top:6px}
.dz-ws-invite-apps-label{font-size:8px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}

/* Seats bar */
.dz-ws-seats{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:9.5px}
.dz-ws-seats-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.dz-ws-seats-fill{height:100%;border-radius:2px;transition:width .3s;background:rgba(255,255,255,.3)}

/* Joined spaces */
.dz-ws-joined{margin-top:16px;padding-top:12px;border-top:1px solid var(--cardStroke)}
.dz-ws-joined-title{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.dz-ws-joined-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:1px solid var(--cardStroke);margin-bottom:5px;transition:background .1s}
.dz-ws-joined-item:hover{background:rgba(255,255,255,.015)}

/* Tab style */

/* Expanded — true full screen, full width */
.dz-dashPane.expanded{position:fixed;inset:0;z-index:200;border-radius:0;background:var(--bg)}
.dz-dashPane.expanded .dz-dash-header{padding:16px 40px;border-bottom:1px solid var(--cardStroke)}
.dz-dashPane.expanded .dz-dashScroll{padding:28px 40px 60px}
.dz-dashPane.expanded .dz-dash-stats{grid-template-columns:repeat(5,1fr);gap:12px}
.dz-dashPane.expanded .dz-dash-grid{grid-template-columns:1fr 1fr 1fr;gap:16px}
.dz-dashPane.expanded .dz-dash-card{padding:24px 26px}
.dz-dashPane.expanded .dz-dash-trust{padding:18px 22px}
.dz-dashPane.expanded .dz-dash-section{margin-bottom:24px}
@media(max-width:1100px){.dz-dashPane.expanded .dz-dash-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dz-dashPane.expanded .dz-dashScroll{padding:16px 16px 40px}.dz-dashPane.expanded .dz-dash-header{padding:14px 16px}.dz-dashPane.expanded .dz-dash-stats{grid-template-columns:repeat(3,1fr)}.dz-dashPane.expanded .dz-dash-grid{grid-template-columns:1fr}}


/* ─────────────────────────────────────────────────────────── */


/* Login btn + Explore CTA: hidden when logged in */
body.dz-member .dz-loginBtn,
body.dz-member #dzLoginBtn { display: none !important; }
body.dz-member .dz-navCta { display: none !important; }

/* ═══════════════════════════════════════════════════
   DZ:FIX — CSS recovered from post-split blocks
   Trust icons, connectivity grid, pigeon, vault diagram,
   settings panel tabs, auth modal, sync section
═══════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   DZ:V52 ICON + TRUST CARD CSS
════════════════════════════════════════════════════════════════ */

/* ── Trust icon containers ── */
.dz-trustIconWrap {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  position: relative;
}
.dz-trustIconWrap svg { position: relative; z-index: 1; }
/* Brand standard: privacy card icons are neutral at rest.
   The rainbow appears only on hover of the parent .dz-trustCard.
   Replaces the previous --green / --blue / --purple / --amber
   variants which violated the single-rainbow rule. */
.dz-trustIconWrap--green,
.dz-trustIconWrap--blue,
.dz-trustIconWrap--purple,
.dz-trustIconWrap--amber {
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--fg) 9%, transparent);
  color: var(--fg);
  box-shadow: none;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.dz-trustCard:hover .dz-trustIconWrap--green,
.dz-trustCard:hover .dz-trustIconWrap--blue,
.dz-trustCard:hover .dz-trustIconWrap--purple,
.dz-trustCard:hover .dz-trustIconWrap--amber {
  background: var(--rainbow);
  border-color: transparent;
  color: #0a0a0f;
  transform: translateY(-1px);
}
/* ── Trust card note ── */
.dz-trustCardNote {
  font-size: 11px; color: var(--muted);
  margin-top: 10px; line-height: 1.65;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--fg) 5%, transparent);
}
/* ── Connectivity grid ── */
.dz-connectivity-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.dz-conn-card {
  padding: 16px 18px;
  border-radius: 14px;
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
  background: color-mix(in oklab, var(--fg) 2%, transparent);
  transition: border-color .15s;
}
.dz-conn-card:hover { border-color: color-mix(in oklab, var(--fg) 12%, transparent); }
.dz-conn-offline { border-color: color-mix(in oklab,var(--fg) 7%,transparent); }
.dz-conn-relay { border-color: color-mix(in oklab,var(--fg) 7%,transparent); background: transparent; transition: border-color .22s ease, transform .22s ease; }
.dz-conn-ai { border-color: color-mix(in oklab,var(--fg) 7%,transparent); background: transparent; transition: border-color .22s ease, transform .22s ease; }
.dz-conn-icon {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.dz-conn-offline .dz-conn-icon { background: color-mix(in oklab,var(--fg) 7%,transparent); color: var(--muted); transition: background .22s ease, color .22s ease; }
.dz-conn-relay .dz-conn-icon { background: color-mix(in oklab,var(--fg) 7%,transparent); color: var(--muted); transition: background .22s ease, color .22s ease; }
.dz-conn-ai .dz-conn-icon { background: color-mix(in oklab,var(--fg) 7%,transparent); color: var(--muted); transition: background .22s ease, color .22s ease; }

/* Brand standard: connectivity cards adopt the prismatic rainbow only
   on hover — at rest they stay neutral so no card claims attention. */
.dz-conn-card { transition: border-color .22s ease, transform .22s ease; }
.dz-conn-card:hover {
  border-color: transparent;
  background-image: var(--rainbow);
  background-origin: border-box;
  background-clip: border-box;
  transform: translateY(-1px);
}
.dz-conn-card:hover .dz-conn-icon {
  background: var(--rainbow);
  color: #0a0a0f;
}
.dz-conn-title { font-size: 12px; font-weight: 800; color: var(--fg); margin-bottom: 4px; }
.dz-conn-sub   { font-size: 11px; color: var(--muted); line-height: 1.55; }
.dz-conn-footnote {
  text-align: center; margin-top: 10px;
  font-size: 11px; color: var(--muted); line-height: 1.6;
}
/* ── Pigeon icon containers ── */
.dz-pigeon-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dz-pigeon-icon--green {
  background: color-mix(in oklab, var(--fg) 8%, transparent); color: color-mix(in oklab, var(--fg) 35%, transparent);
  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 8%, transparent);
}
.dz-pigeon-icon--amber {
  background: color-mix(in oklab, var(--fg) 8%, transparent); color: color-mix(in oklab, var(--fg) 35%, transparent);
  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 8%, transparent);
}
.dz-pigeon-icon--teal {
  background: color-mix(in oklab, var(--fg) 14%, transparent); color: color-mix(in oklab, var(--fg) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  box-shadow: 0 2px 12px color-mix(in oklab, var(--fg) 14%, transparent);
}
/* Light mode pigeon icons */
body.light .dz-pigeon-icon--green { background: color-mix(in oklab, var(--fg) 14%, transparent); color: color-mix(in oklab, var(--fg) 14%, transparent); border-color: color-mix(in oklab, var(--fg) 14%, transparent); box-shadow: none; }
body.light .dz-pigeon-icon--amber { background: color-mix(in oklab, var(--fg) 14%, transparent); color: color-mix(in oklab, var(--fg) 14%, transparent); border-color: color-mix(in oklab, var(--fg) 14%, transparent); box-shadow: none; }
body.light .dz-pigeon-icon--teal  { background: rgba(0,160,140,.1); color: rgba(0,140,120,1); border-color: rgba(0,160,140,.2); box-shadow: none; }
/* ════════════════════════════════════════════════════════════════
   DZ:V53 CSS
════════════════════════════════════════════════════════════════ */


/* ── INTENT CHIP ICON ── */
.dz-intent-ico{
  width:22px;height:22px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.dz-sp-close{
  width:30px;height:30px;border-radius:9px;
  background:color-mix(in oklab,var(--fg) 5%,transparent);
  border:1px solid color-mix(in oklab,var(--fg) 8%,transparent);
  color:var(--muted);font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .13s;
}
.dz-sp-close:hover{background:color-mix(in oklab,var(--fg) 10%,transparent);color:var(--fg)}
/* Tabs */
.dz-sp-tabs{
  display:flex;gap:2px;padding:8px 10px;
  border-bottom:1px solid color-mix(in oklab,var(--fg) 6%,transparent);
  position:sticky;top:69px;background:var(--bg);z-index:1;
}
.dz-sp-tab{
  flex:1;padding:7px 4px;border-radius:9px;
  background:none;border:none;cursor:pointer;
  font-size:12px;font-weight:600;font-family:inherit;
  color:var(--muted);transition:all .13s;
}
.dz-sp-tab:hover{color:var(--fg);background:color-mix(in oklab,var(--fg) 5%,transparent);}
.dz-sp-tab.active{
  background:color-mix(in oklab,var(--fg) 8%,transparent);
  color:var(--fg);font-weight:800;
}
/* Body */
.dz-sp-body{padding:16px 20px 24px;}
/* ── 5 tabs (wider panel for AI) ── */
.dz-sp-tabs { gap: 1px; padding: 6px 8px; }
.dz-sp-tab { font-size: 11px; padding: 7px 3px; }
/* ── Parallel attribution CSS ── */
.dz-parallel-attr {
  padding: 0; margin-top: 0;
}
.dz-pa-inner {
  display: flex; align-items: center; gap: 28px;
  padding: 24px 28px;
  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  border-radius: 18px;
  background: radial-gradient(300px 200px at 15% 50%, color-mix(in oklab, var(--fg) 14%, transparent), transparent 70%);
  overflow: hidden;
}
.dz-pa-logo {
  flex-shrink: 0; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dz-pa-bird {
  width: 80px !important; height: 80px !important;
  max-width: 80px !important; max-height: 80px !important;
  display: block;
  color: color-mix(in oklab, var(--fg) 14%, transparent);
  filter: drop-shadow(0 0 12px color-mix(in oklab, var(--fg) 14%, transparent));
  transition: filter .3s, color .3s;
}
.dz-pa-inner:hover .dz-pa-bird {
  filter: drop-shadow(0 0 20px color-mix(in oklab, var(--fg) 14%, transparent));
  color: color-mix(in oklab, var(--fg) 14%, transparent);
}
.dz-pa-text { flex: 1; min-width: 0; }
.dz-pa-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: color-mix(in oklab, var(--fg) 14%, transparent);
  margin-bottom: 6px;
}
.dz-pa-wordmark {
  font-size: 22px; font-weight: 900; letter-spacing: -.025em;
  color: color-mix(in oklab, var(--fg) 14%, transparent); line-height: 1; margin-bottom: 8px;
}
.dz-pa-dot { color: color-mix(in oklab, var(--fg) 14%, transparent); }
.dz-pa-desc {
  font-size: 12px; color: var(--muted); line-height: 1.7; max-width: 480px;
  margin: 0 0 10px;
}
.dz-pa-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  color: color-mix(in oklab, var(--fg) 14%, transparent); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  padding-bottom: 1px; transition: color .13s, border-color .13s;
}
.dz-pa-link:hover { color: color-mix(in oklab, var(--fg) 14%, transparent); border-color: color-mix(in oklab, var(--fg) 14%, transparent); }
.dz-sp-close {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all .13s;
}
.dz-sp-close:hover { background: color-mix(in oklab,var(--fg) 6%,transparent); color: var(--fg); }
/* Tabs */
.dz-sp-tabs {
  display: flex; gap: 2px; padding: 12px 24px 0;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  overflow-x: auto; scrollbar-width: none;
}
.dz-sp-tabs::-webkit-scrollbar { display: none; }
.dz-sp-tab {
  padding: 8px 16px; border-radius: 8px 8px 0 0;
  border: 1px solid transparent; border-bottom: none;
  background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all .13s; white-space: nowrap;
  position: relative; bottom: -1px;
}
.dz-sp-tab:hover { color: var(--fg); background: color-mix(in oklab,var(--fg) 4%,transparent); }
.dz-sp-tab.active {
  color: var(--fg);
  border-color: var(--border);
  background: var(--bg);
}
/* Body */
.dz-sp-body {
  flex: 1; overflow-y: auto;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,.2) transparent;
}
.dz-sp-body::-webkit-scrollbar { width: 4px; }
.dz-sp-body::-webkit-scrollbar-thumb { background: rgba(128,128,128,.2); border-radius: 2px; }
/* ── Plan pill in nav (v5.5) ── */
.dz-nav-plan-pill {
  display: none; align-items: center; gap: 6px;
  padding: 5px 10px 5px 7px; border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--fg) 9%, transparent);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  font-size: 11px; font-weight: 700; color: var(--fg);
  text-decoration: none;
  cursor: default;
}
.dz-nav-plan-pill .dz-npill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in oklab, var(--fg) 8%, transparent); flex-shrink: 0;
  box-shadow: 0 0 5px color-mix(in oklab, var(--fg) 14%, transparent);
}
body.dz-member .dz-nav-plan-pill { display: inline-flex; }
/* ── Settings: 6th Space tab (conditional) ── */
.dz-sp-tab[data-tabv2="space"] { display: none; }
body.dz-member.dz-plan-ai .dz-sp-tab[data-tabv2="space"],
body.dz-member.dz-plan-teams .dz-sp-tab[data-tabv2="space"] { display: inline-flex; }
/* Demo mode callout */
.dz-demo-notice {
  font-size: 10px; color: color-mix(in oklab, var(--fg) 35%, transparent);
  text-align: center; padding: 6px 0 2px; letter-spacing: .03em;
}
body.light .dz-sp-tab.active { background: #ffffff; }
body.light .dz-sp-body { background: #ffffff; }


/* ─────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   DZ:V515 — Three-mode auth modal: Google · Magic Link · Key
════════════════════════════════════════════════════════════════ */

/* ── Google button ── */
.dz-auth-google {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px;
  background: var(--card);
  border: 1.5px solid var(--cs2);
  border-radius: 13px;
  color: var(--fg);
  font-size: 14px; font-weight: 800; font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.dz-auth-google:hover {
  background: var(--card2);
  border-color: color-mix(in oklab, var(--fg) 20%, transparent);
  transform: translateY(-1px);
}
.dz-auth-google:active { transform: translateY(0); }
.dz-auth-google-ico { width: 18px; height: 18px; flex-shrink: 0; }
.dz-auth-google-note {
  font-size: 10.5px; color: var(--muted);
  text-align: center; margin: -6px 0 0; line-height: 1.5;
}
body.light .dz-auth-google { background: rgba(0,0,0,.03); }
body.light .dz-auth-google:hover { background: rgba(0,0,0,.06); }
/* ── Dividers ── */
.dz-auth-or {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.dz-auth-or::before, .dz-auth-or::after {
  content: ''; flex: 1;
  height: 1px; background: var(--border);
}
.dz-auth-or--sm { font-size: 9.5px; opacity: .65; }
/* ── Magic link row ── */
.dz-auth-magic-row {
  display: flex; gap: 8px; margin-top: 8px;
}
.dz-auth-magic-row .dz-auth-field { flex: 1; }
.dz-auth-magic-send {
  flex-shrink: 0;
  padding: 11px 16px;
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  border: 1.5px solid var(--cs2);
  border-radius: 11px;
  color: var(--fg);
  font-size: 12px; font-weight: 800; font-family: inherit;
  cursor: pointer;
  transition: background .14s, transform .14s;
  white-space: nowrap;
}
.dz-auth-magic-send:hover {
  background: color-mix(in oklab, var(--fg) 12%, transparent);
  transform: translateY(-1px);
}
.dz-auth-magic-send:disabled {
  opacity: .45; cursor: not-allowed; transform: none;
}
body.light .dz-auth-magic-send { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); }
/* ── Sent confirmation state ── */
.dz-auth-sent {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 13px;
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--fg) 14%, transparent);
  color: var(--fg);
  animation: dzFadeIn 220ms var(--ease) both;
}
body.light .dz-auth-sent {
  background: rgba(0,148,76,.06);
  border-color: rgba(0,148,76,.18);
  color: rgba(0,148,76,1);
}
.dz-auth-sent svg { flex-shrink: 0; margin-top: 2px; }
.dz-auth-sent-title {
  font-size: 13px; font-weight: 900; color: var(--fg);
  letter-spacing: -.01em; margin-bottom: 3px;
}
.dz-auth-sent-sub {
  font-size: 12px; color: var(--fg); font-weight: 700;
  margin-bottom: 4px;
}
body.light .dz-auth-sent-sub { color: rgba(0,148,76,1); }
.dz-auth-sent-note { font-size: 11px; color: var(--muted); line-height: 1.5; }
/* ── Key section ── */
.dz-auth-key-wrap {
  display: flex; flex-direction: column; gap: 8px;
}
.dz-auth-field--mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace;
  letter-spacing: .05em;
}
/* ── Mobile ── */
@media (max-width: 480px) {
  .dz-auth-magic-row { flex-direction: column; }
  .dz-auth-magic-send { width: 100%; }
}
/* ════════════════════════════════════════════════════════════════
   DZ:V514 — Vault sync diagram + enhanced workflow layout
════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.dz-syncSection { overflow: hidden; }
.dz-sync-eyebrow {
  display: inline-block; padding: 5px 14px; border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--fg) 8%, transparent), rgba(100,180,255,.08));
  border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg); margin-bottom: 12px;
}
body.light .dz-sync-eyebrow { color: rgba(0,148,76,1); border-color: rgba(0,148,76,.2); background: rgba(0,148,76,.05); }
/* ── Vault diagram ── */
.dz-vault-diagram {
  position: relative;
  width: 500px; height: 500px;
  max-width: min(500px, 90vw);
  margin: 48px auto 0;
}
/* SVG line layer */
.dz-vd-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.dz-vdl {
  stroke: color-mix(in oklab, var(--fg) 8%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  transition: stroke .3s, stroke-width .3s;
}
.dz-vdl.active {
  stroke: var(--fg);
  stroke-width: 2;
  stroke-dasharray: none;
}
body.light .dz-vdl { stroke: rgba(0,0,0,.1); }
body.light .dz-vdl.active { stroke: rgba(0,148,76,.7); }
/* Animated data packets */
.dz-vd-packet {
  fill: var(--fg); opacity: 0;
  transition: opacity .3s;
}
.dz-vd-packet.active { opacity: 1; }
body.light .dz-vd-packet { fill: rgba(0,148,76,1); }
/* ── Center vault node ── */
.dz-vd-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90px; height: 90px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  z-index: 2;
}
.dz-vd-center-ring {
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--fg) 17%, transparent);
  animation: dzVaultPulse 3s ease-in-out infinite;
}
.dz-vd-center-icon {
  width: 56px; height: 56px; border-radius: 18px;
  background: color-mix(in oklab, var(--fg) 7%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--fg) 21%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg);
  box-shadow: 0 0 32px color-mix(in oklab, var(--fg) 10%, transparent);
}
body.light .dz-vd-center-icon { background: rgba(0,148,76,.08); border-color: rgba(0,148,76,.2); color: rgba(0,148,76,1); }
.dz-vd-center-label {
  font-size: 10px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg);
}
body.light .dz-vd-center-label { color: rgba(0,148,76,1); }
/* ── Spoke nodes ── */
.dz-vd-node {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; z-index: 2;
  transform: translate(-50%, -50%);
  transition: transform .2s var(--ease);
}
.dz-vd-node:hover { transform: translate(-50%, -50%) scale(1.06); }
.dz-vd-node.active .dz-vd-node-icon {
  border-color: var(--fg);
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  color: var(--fg);
  box-shadow: 0 0 20px color-mix(in oklab, var(--fg) 14%, transparent);
}
body.light .dz-vd-node.active .dz-vd-node-icon { border-color: rgba(0,148,76,1); background: rgba(0,148,76,.08); color: rgba(0,148,76,1); }
/* Node positions — pentagon layout */
.dz-vd-node--top        { top: 14%;  left: 50%; }
.dz-vd-node--top-right  { top: 34%;  left: 86%; }
.dz-vd-node--bot-right  { top: 78%;  left: 78%; }
.dz-vd-node--bot-left   { top: 78%;  left: 22%; }
.dz-vd-node--top-left   { top: 34%;  left: 14%; }
.dz-vd-node-icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--fg) 10%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all .2s;
}
.dz-vd-node-name {
  font-size: 10px; font-weight: 800; color: var(--muted);
  text-align: center; max-width: 80px; line-height: 1.3;
  white-space: nowrap;
}
.dz-vd-node.active .dz-vd-node-name { color: var(--fg); }
body.light .dz-vd-node-icon { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
body.light .dz-vd-node-name { color: rgba(0,0,0,.5); }
/* ── Flow cards ── */
.dz-sync-flows {
  max-width: 680px; margin: 0 auto;
  padding: 0 0 8px;
}
.dz-sf-default {
  display: flex; flex-direction: column; gap: 8px;
}
.dz-sf-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 2%, transparent);
  cursor: pointer; transition: all .15s;
}
.dz-sf-row:hover, .dz-sf-row.active {
  border-color: color-mix(in oklab, var(--fg) 17%, transparent);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
}
body.light .dz-sf-row { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
body.light .dz-sf-row:hover, body.light .dz-sf-row.active { border-color: rgba(0,148,76,.25); background: rgba(0,148,76,.04); }
.dz-sf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dz-sf-content { flex: 1; }
.dz-sf-title { font-size: 12.5px; font-weight: 700; color: var(--fg); line-height: 1.45; }
.dz-sf-apps {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; flex-wrap: wrap;
}
.dz-sf-apps span { font-size: 10.5px; color: var(--muted); }
.dz-sf-arrow { color: var(--fg); font-size: 10px; }
body.light .dz-sf-arrow { color: rgba(0,148,76,1); }
.dz-sf-apps > span:not(.dz-sf-arrow) {
  padding: 2px 7px; border-radius: 5px;
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  font-weight: 700;
}
body.light .dz-sf-apps > span:not(.dz-sf-arrow) { background: rgba(0,0,0,.06); }
.dz-sf-badge {
  font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; flex-shrink: 0;
  color: var(--fg);
  background: color-mix(in oklab, var(--fg) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
}
body.light .dz-sf-badge { color: rgba(0,148,76,1); background: rgba(0,148,76,.08); border-color: rgba(0,148,76,.15); }
/* Focus card */
.dz-sf-focus { animation: dzFadeIn 200ms var(--ease) both; }
.dz-sf-focus-inner {
  padding: 22px 24px; border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--fg) 17%, transparent);
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  margin-bottom: 12px;
}
body.light .dz-sf-focus-inner { border-color: rgba(0,148,76,.2); background: rgba(0,148,76,.04); }
.dz-sf-focus-title { font-size: 16px; font-weight: 900; color: var(--fg); letter-spacing: -.02em; margin-bottom: 8px; }
.dz-sf-focus-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.dz-sf-focus-apps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dz-sf-focus-app {
  padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 800;
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  color: var(--fg);
}
body.light .dz-sf-focus-app { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
.dz-sf-focus-arrow { color: var(--fg); font-size: 13px; font-weight: 900; }
body.light .dz-sf-focus-arrow { color: rgba(0,148,76,1); }
.dz-sf-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; padding: 0; transition: color .13s;
}
.dz-sf-back:hover { color: var(--fg); }
/* ── CTA row ── */
.dz-sync-cta { text-align: center; padding-top: 48px; }
.dz-sync-cta-copy {
  font-size: 14px; color: var(--muted); line-height: 1.75;
  margin: 0 0 20px; max-width: 440px; margin-left: auto; margin-right: auto;
}
.dz-sync-cta-copy strong { color: var(--fg); }
/* ── Mobile ── */
@media (max-width: 600px) {
  .dz-vault-diagram { width: 320px; height: 320px; }
  .dz-vd-center { width: 60px; height: 60px; }
  .dz-vd-center-icon { width: 44px; height: 44px; border-radius: 13px; }
  .dz-vd-center-ring { inset: -6px; }
  .dz-vd-node-icon { width: 40px; height: 40px; border-radius: 12px; }
  .dz-vd-node-name { font-size: 9px; max-width: 64px; }
  .dz-sf-row { padding: 11px 14px; }
  .dz-sf-title { font-size: 11.5px; }
}




/* Flow dots adopt the prismatic rainbow only on row hover.
   At rest they are neutral and identical across all five rows. */
.dz-sf-dot {
  transition: background .22s ease, transform .22s ease;
}
.dz-sf-row:hover .dz-sf-dot {
  background: var(--rainbow) !important;
  transform: scale(1.15);
}