/* ============================================================
   YOUR SPONSO — DASHBOARD 3.0
   Warm · Editorial · Professional — aligned with brand palette
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f2efe9; --surface:#ffffff; --surface-2:#f9f7f3; --surface-3:#f2efe9;
  --ink:#0b0b0b; --ink-2:#1a1a1a; --mute:#6d665e; --line:#d7d1c4; --line-2:#c4bdb4;
  --dark:#0b0b0b; --dark-soft:#1a1a1a; --cream:#f2efe9; --white:#ffffff;
  --soft:#e5e1d8;
  --acc:#ff4d1f; --acc-l:#ff6b3f; --acc-2:#1b4a3a; --acc-2l:#256b52;
  --ok:#1b7a4a; --warn:#a16207; --err:#b91c1c; --info:#1d4ed8;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1); --eo:cubic-bezier(.16,1,.3,1);
  --rad:12px; --rad-sm:8px; --rad-lg:16px; --rad-xl:20px;
  --shadow-xs:0 1px 2px rgba(11,11,11,.04);
  --shadow-sm:0 2px 8px rgba(11,11,11,.06),0 1px 2px rgba(11,11,11,.04);
  --shadow-md:0 6px 20px rgba(11,11,11,.08),0 2px 6px rgba(11,11,11,.04);
  --shadow-lg:0 16px 48px rgba(11,11,11,.12),0 4px 12px rgba(11,11,11,.06);
  --side-w:252px;
}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100%}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
em,.serif{font-family:var(--serif);font-style:italic}
svg{display:block}
::selection{background:var(--ink);color:var(--cream)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--mute)}

/* ══ LAYOUT ══ */
.layout{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
@media(max-width:960px){.layout{grid-template-columns:1fr}}

/* ══ SIDEBAR ══ */
.sidebar{position:sticky;top:0;height:100vh;background:var(--dark);color:rgba(242,239,233,.45);padding:0;display:flex;flex-direction:column;border-right:1px solid rgba(242,239,233,.05);z-index:40;overflow-y:auto}
@media(max-width:960px){.sidebar{position:fixed;left:-100%;width:var(--side-w);transition:left .3s var(--ease)}.sidebar.on{left:0}}
.side-brand{display:flex;flex-direction:column;align-items:flex-start;padding:22px 18px 16px;border-bottom:1px solid rgba(242,239,233,.06);margin-bottom:6px}
.sb-your{font-family:Inter,system-ui,sans-serif;font-size:.55rem;font-weight:500;letter-spacing:.12em;color:rgba(242,239,233,.35);text-transform:lowercase;margin-bottom:.2rem;margin-left:.1rem}.sb-sponso{font-family:var(--serif);font-style:italic;font-size:1.2rem;letter-spacing:-.04em;line-height:.92;color:#fff;display:flex;align-items:flex-end;gap:.1em}.sb-dot{width:.18em;height:.18em;background:var(--acc);border-radius:50%;margin-bottom:.1em;flex-shrink:0}
@keyframes sbpulse{0%,100%{box-shadow:0 0 0 3px rgba(255,77,31,.2)}50%{box-shadow:0 0 0 7px rgba(255,77,31,0)}}
.side-sec{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(242,239,233,.2);padding:16px 18px 4px}
.side-nav{display:flex;flex-direction:column;gap:1px;padding:0 8px}
.side-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;color:rgba(242,239,233,.45);cursor:pointer;transition:all .14s;font-weight:500;position:relative}
.side-link:hover{background:rgba(242,239,233,.07);color:rgba(242,239,233,.9)}
.side-link.on{background:rgba(255,77,31,.13);color:#fff}
.side-link.on .ic{color:var(--acc)}
.side-link .ic{width:18px;height:18px;flex-shrink:0;color:rgba(242,239,233,.28);transition:color .14s;display:flex;align-items:center;justify-content:center}
.side-link .ic svg{width:100%;height:100%}
.side-link:hover .ic{color:rgba(242,239,233,.7)}
.side-link .bd{margin-left:auto;background:var(--acc);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:100px;min-width:17px;text-align:center;line-height:1.6}
.side-link.on .bd{background:rgba(255,77,31,.25);color:var(--acc)}
.side-foot{margin-top:auto;padding:10px 8px;border-top:1px solid rgba(242,239,233,.06)}
.side-me{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .14s}
.side-me:hover{background:rgba(242,239,233,.07)}
.side-me .av{width:32px;height:32px;border-radius:8px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}
.side-me .mi{flex:1;min-width:0}
.side-me .mi b{display:block;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.side-me .mi span{font-size:11px;color:rgba(242,239,233,.3)}

/* ══ TOPBAR ══ */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.topbar.scr{box-shadow:0 1px 8px rgba(11,11,11,.05)}
.topbar-in{padding:0 28px;height:56px;display:flex;align-items:center;gap:10px}
@media(max-width:640px){.topbar-in{padding:0 14px}}
.tb-burger{display:none;width:34px;height:34px;border-radius:8px;background:var(--surface-2);align-items:center;justify-content:center;border:1px solid var(--line)}
.tb-burger svg{width:18px;height:18px;color:var(--ink)}
@media(max-width:960px){.tb-burger{display:flex}}
.tb-title{font-size:13.5px;font-weight:500;color:var(--mute)}
.tb-title b{color:var(--ink);font-weight:700}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:5px}
.icon-btn{width:34px;height:34px;border-radius:8px;background:transparent;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .14s;color:var(--mute);position:relative}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.icon-btn .dot{position:absolute;top:4px;right:4px;width:7px;height:7px;background:var(--acc);border-radius:50%;border:1.5px solid var(--surface)}
.content{padding:28px 32px 80px;flex:1}
@media(max-width:640px){.content{padding:18px 16px 100px}}

/* ══ BOTTOM NAV ══ */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:960px){.bottom-nav{display:flex}}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 4px 6px;color:var(--mute);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:color .15s;position:relative;background:none;border:none}
.bn-item.on{color:var(--ink)}
.bn-item.on::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:2px;background:var(--acc);border-radius:0 0 2px 2px}
.bn-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.bn-icon svg{width:20px;height:20px}
.bn-badge{position:absolute;top:5px;right:calc(50% - 15px);background:var(--acc);color:#fff;font-size:9px;font-weight:700;padding:1px 4px;border-radius:100px;min-width:15px;text-align:center;display:none}
.bn-badge.show{display:block}

/* ══ VIEWS ══ */
.view{display:none;animation:fadeUp .3s var(--eo) both}
.view.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vhead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.vhead h1{font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.vhead h1 em{color:var(--acc);font-family:var(--serif);font-style:italic}
.vhead p{color:var(--mute);margin-top:5px;font-size:13px;max-width:520px;line-height:1.55}
.pills{display:flex;gap:4px;flex-wrap:wrap}
.pill{padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;color:var(--mute);background:transparent;transition:all .14s;cursor:pointer;border:1px solid transparent;font-family:inherit}
.pill:hover{color:var(--ink);background:var(--surface-3);border-color:var(--line)}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ══ CARDS / BUTTONS ══ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:20px;transition:border-color .14s,box-shadow .14s;position:relative}
.card:hover{border-color:var(--line-2)}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-2)}

/* Onboarding steps */
.ob-step{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:72px}
.ob-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--mute);transition:all .25s}
.ob-step.on .ob-dot{background:var(--ink);border-color:var(--ink);color:#fff}
.ob-step.done .ob-dot{background:var(--acc);border-color:var(--acc);color:#fff}
.ob-step span{font-size:10.5px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.07em}
.ob-step.on span,.ob-step.done span{color:var(--ink)}
.ob-line{flex:1;height:2px;background:var(--line);min-width:36px;margin-top:-12px}
@media(max-width:560px){#onboardSelectMode{grid-template-columns:1fr !important}}

/* Email banner */
.verify-banner{display:none;background:#FFFBEB;border:1px solid #FDE68A;border-radius:var(--rad);padding:12px 16px;margin-bottom:18px;align-items:center;gap:12px;flex-wrap:wrap}
.verify-banner.show{display:flex}
.vb-icon{font-size:18px;flex-shrink:0}
.vb-text{flex:1;min-width:200px}
.vb-text b{font-size:12.5px;font-weight:600;color:#92400E;display:block;margin-bottom:1px}
.vb-text span{font-size:12px;color:#B45309}
.vb-btn{padding:5px 13px;background:#92400E;color:#fff;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;border:none;transition:background .14s}
.vb-btn:hover{background:#78350F}
.vb-dismiss{font-size:16px;color:#B45309;cursor:pointer;background:none;border:none;line-height:1}

.c-row{display:flex;align-items:center;gap:12px}
.c-av{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--dark),var(--dark-soft));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.c-av.a{background:linear-gradient(135deg,var(--acc),var(--acc-l))}
.c-av.g{background:linear-gradient(135deg,var(--acc-2),var(--acc-2l))}
.c-title{font-weight:600;font-size:14px;letter-spacing:-.01em}
.c-sub{color:var(--mute);font-size:12.5px;margin-top:2px}
.c-meta{display:flex;gap:12px;margin-top:10px;font-size:12px;color:var(--mute);flex-wrap:wrap}
.c-meta span{display:inline-flex;align-items:center;gap:4px}
.c-actions{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}

.btn{padding:7px 14px;border-radius:7px;font-weight:500;font-size:13px;transition:all .14s;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap;font-family:inherit;cursor:pointer}
.btn-p{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-p:hover{background:var(--acc);border-color:var(--acc)}
.btn-s{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-s:hover{border-color:var(--ink);background:var(--surface-3)}
.btn-g{background:var(--ok);color:#fff}
.btn-g:hover{filter:brightness(.9)}
.btn-d{background:transparent;color:var(--err);border-color:transparent}
.btn-d:hover{background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.2)}
.btn-o{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn-o:hover{filter:brightness(.92)}
.btn-l{padding:10px 20px;font-size:14px}
.btn:disabled{opacity:.38;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}

/* Status badges */
.status{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:.01em}
.st-pending{background:#FFF7ED;color:#C2410C}
.st-accepted{background:#ECFDF5;color:#047857}
.st-rejected{background:#FEF2F2;color:#B91C1C}
.st-signed{background:#EFF6FF;color:#1D4ED8}
.st-draft{background:var(--surface-3);color:var(--mute)}
.st-pay-awaiting{background:#FEFCE8;color:#854D0E;border:1px solid #FEF08A}
.st-pay-pending{background:#EFF6FF;color:#1E40AF}
.st-pay-proof{background:#FFF7ED;color:#C2410C}
.st-pay-done{background:#ECFDF5;color:#047857}

/* Payment banners */
.pay-banner{background:#FFFBEB;border:1px solid #FDE68A;border-radius:var(--rad);padding:14px 18px;margin-bottom:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pay-banner.done{background:#ECFDF5;border-color:#A7F3D0}
.pb-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(133,77,14,.1)}
.pb-text{flex:1;min-width:180px}
.pb-text b{display:block;font-size:13px;font-weight:600;color:#854D0E;margin-bottom:2px}
.pay-banner.done .pb-text b{color:#047857}
.pb-text span{font-size:12px;color:#A16207}
.pay-banner.done .pb-text span{color:#065F46}

/* ══════════ HOME / OVERVIEW ══════════ */
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
@media (max-width:1100px){.hero-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.hero-grid{grid-template-columns:1fr}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:20px;position:relative;overflow:hidden;transition:all .3s var(--ease)}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--ink)}
.kpi::after{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle,var(--acc) 0%,transparent 70%);opacity:.06;transform:translate(30%,-30%)}
.kpi.acc::after{background:radial-gradient(circle,var(--acc) 0%,transparent 70%);opacity:.08}
.kpi.g::after{background:radial-gradient(circle,var(--acc-2) 0%,transparent 70%);opacity:.08}
.kpi .kic{width:40px;height:40px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--mute)}
.kpi .kic svg{width:20px;height:20px}
.kpi.acc .kic{background:rgba(255,77,31,.12);color:var(--acc)}
.kpi.g .kic{background:rgba(27,74,58,.12);color:var(--acc-2)}
.kpi .klbl{font-size:12px;color:var(--mute);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.kpi .kval{font-family:var(--serif);font-style:italic;font-size:40px;line-height:1;font-weight:400;letter-spacing:-.02em}
.kpi .ktrend{font-size:11px;color:var(--ok);margin-top:6px;font-weight:600;display:flex;align-items:center;gap:4px}
.kpi .ktrend.d{color:var(--err)}

.home-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
@media (max-width:1000px){.home-grid{grid-template-columns:1fr}}

.qactions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
@media (max-width:640px){.qactions{grid-template-columns:repeat(2,1fr)}}
.qa{padding:18px;border:1px solid var(--line);border-radius:var(--rad);background:#fff;text-align:left;transition:all .22s var(--ease);cursor:pointer;display:flex;flex-direction:column;gap:6px}
.qa:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.qa .qa-ic{width:34px;height:34px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;margin-bottom:4px;color:var(--ink);flex-shrink:0}
.qa:hover .qa-ic{background:var(--ink);color:#fff}
.qa b{font-size:13.5px;font-weight:600}
.qa span{font-size:11.5px;color:var(--mute)}

.chart-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:22px}
.chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.chart-head h3{font-size:14px;font-weight:600;letter-spacing:-.01em}
.chart-head .ss{display:flex;gap:4px;background:var(--soft);padding:3px;border-radius:100px;font-size:11px}
.chart-head .ss button{padding:5px 12px;border-radius:100px;color:var(--mute);font-weight:500}
.chart-head .ss button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-xs)}
.spark-wrap{position:relative;height:200px}
.spark-wrap svg{width:100%;height:100%;overflow:visible}

.activity-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:0;overflow:hidden;display:flex;flex-direction:column}
.activity-card .ah{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.activity-card .ah h3{font-size:14px;font-weight:600;letter-spacing:-.01em}
.activity-list{flex:1;overflow-y:auto;max-height:480px}
.act-it{display:flex;gap:12px;padding:14px 22px;border-bottom:1px solid var(--line);transition:background .15s;cursor:pointer;align-items:flex-start}
.act-it:hover{background:var(--bg)}
.act-it:last-child{border-bottom:none}
.act-ic{width:34px;height:34px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink)}
.act-ic svg{width:16px;height:16px}
.act-ic.o{background:rgba(255,77,31,.12);color:var(--acc)}
.act-ic.g{background:rgba(27,74,58,.12);color:var(--acc-2)}
.act-ic.gy{background:var(--soft);color:var(--mute)}
.act-it .at{flex:1;min-width:0}
.act-it .att{font-size:13px;line-height:1.45}
.act-it .att b{font-weight:600}
.act-it .atm{font-size:11px;color:var(--mute);margin-top:3px}

.home-side{display:flex;flex-direction:column;gap:20px}

/* ══════════ SPONSORING ══════════ */
.spon-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:860px){.spon-grid{grid-template-columns:1fr}}
.spon-col h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.spon-col h2 .cnt{background:var(--ink);color:#fff;padding:2px 9px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:0}
.spon-list{display:flex;flex-direction:column;gap:12px}
.empty{text-align:center;padding:54px 24px;color:var(--mute);background:#fff;border:1px dashed var(--line);border-radius:var(--rad)}
.empty .big{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--ink);line-height:1.1;margin-bottom:10px}
.empty p{font-size:13.5px;max-width:360px;margin:0 auto}

/* ══════════ CHAT ══════════ */
.chat-wrap{display:grid;grid-template-columns:320px 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;height:calc(100vh - 260px);min-height:520px}
@media (max-width:860px){.chat-wrap{grid-template-columns:1fr;height:calc(100vh - 180px)}}
.conv-panel{border-right:1px solid var(--line);display:flex;flex-direction:column;background:#fdfcfa}
.conv-search{padding:13px;border-bottom:1px solid var(--line)}
.conv-search input{width:100%;padding:9px 14px;border:1px solid var(--line);border-radius:100px;background:#fff;font-size:13px;transition:border-color .18s;font-family:inherit}
.conv-search input:focus{outline:none;border-color:var(--ink)}
.conv-list{flex:1;overflow-y:auto}
.conv-item{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;position:relative}
.conv-item:hover{background:var(--soft)}
.conv-item.on{background:var(--soft);border-left-color:var(--acc)}
.conv-item .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--ink),var(--dark-soft));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex-shrink:0}
.conv-item .meta{flex:1;min-width:0}
.conv-item .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.conv-item .name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-item .tm{font-size:11px;color:var(--mute);flex-shrink:0}
.conv-item .last{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.conv-item.unread .last{color:var(--ink);font-weight:500}
.conv-item .bd{position:absolute;right:16px;bottom:14px;background:var(--acc);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:100px;min-width:18px;text-align:center}
.chat-panel{display:flex;flex-direction:column;min-width:0;height:100%;min-height:0;overflow:hidden;flex:1}
#chatContent{display:flex;flex-direction:column;height:100%}
.chat-head{padding:14px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;background:#fff}
.chat-head .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--acc-2),var(--acc-2l));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px}
.chat-head .info{flex:1;min-width:0}
.chat-head .info b{display:block;font-size:14px;letter-spacing:-.01em}
.chat-head .info span{font-size:12px;color:var(--mute)}
.chat-head .back{display:none;width:36px;height:36px;border-radius:50%;background:var(--soft);align-items:center;justify-content:center}
@media (max-width:860px){.chat-head .back{display:flex}}
.chat-body{flex:1;overflow-y:auto;min-height:0;padding:22px;background:var(--bg);scroll-behavior:smooth}
.chat-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;color:var(--mute)}
.chat-empty .big{font-family:var(--serif);font-style:italic;font-size:38px;color:var(--ink);line-height:1;margin-bottom:14px;max-width:420px}
.msg{max-width:72%;margin-bottom:10px;display:flex;flex-direction:column;gap:3px;animation:msgIn .3s var(--eo) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.me{align-self:flex-end;margin-left:auto}
.msg.them{align-self:flex-start}
.msg .bubble{padding:10px 15px;border-radius:18px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.msg.me .bubble{background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.msg.them .bubble{background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg .tm{font-size:10px;color:var(--mute);padding:0 6px}
.msg.me .tm{text-align:right}
.msg-system-wrap{display:flex;justify-content:center;margin:14px 0}
.msg-system{text-align:center;font-size:12px;color:var(--mute);padding:6px 14px;background:rgba(0,0,0,.04);border-radius:100px;max-width:480px}
.msg-contract{max-width:340px;margin-bottom:16px;animation:msgIn .3s var(--eo) both}
.msg-contract.me{margin-left:auto}
.mc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-xs);transition:all .2s var(--ease)}
.mc-card:hover{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.mc-card.signed{background:linear-gradient(135deg,#e7f5ec,#fff);border-color:var(--ok)}
.mc-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mc-icon{width:36px;height:36px;border-radius:10px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mc-icon svg{width:16px;height:16px}
.mc-card.signed .mc-icon{background:var(--ok)}
.mc-top b{display:block;font-size:13.5px;letter-spacing:-.01em}
.mc-top span{font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.mc-msg{font-size:12.5px;color:var(--mute);line-height:1.5;margin-bottom:12px}
.mc-actions{display:flex;gap:6px;flex-wrap:wrap}
.mc-actions .btn{padding:7px 12px;font-size:11.5px}
.chat-foot{padding:14px 18px;border-top:1px solid var(--line);background:#fff;display:flex;gap:10px;align-items:flex-end}
.chat-foot textarea{flex:1;resize:none;min-height:42px;max-height:140px;padding:10px 14px;border:1px solid var(--line);border-radius:22px;background:var(--bg);font-size:13.5px;line-height:1.4;transition:border-color .18s;font-family:inherit}
.chat-foot textarea:focus{outline:none;border-color:var(--ink)}
.chat-foot .ic-btn{width:42px;height:42px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0;font-size:16px}
.chat-foot .ic-btn:hover{background:var(--ink);color:#fff}
.chat-foot .ic-btn.send{background:var(--ink);color:#fff}
.chat-foot .ic-btn.send:hover{background:var(--acc)}

/* ══════════ CONTRATS ══════════ */
.ctr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.ctr-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:22px;cursor:pointer;transition:all .24s var(--ease);position:relative;overflow:hidden}
.ctr-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--acc),var(--acc-2));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.ctr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--ink)}
.ctr-card:hover::before{transform:scaleX(1)}
.ctr-card.signed::before{transform:scaleX(1);background:var(--ok)}
.ctr-title{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.ctr-sub{font-size:12.5px;color:var(--mute);margin-bottom:14px}
.ctr-amt{font-family:var(--serif);font-style:italic;font-size:34px;line-height:1;margin-bottom:14px;color:var(--ink)}
.ctr-amt small{font-size:13px;font-family:var(--sans);font-style:normal;color:var(--mute);font-weight:500}
.ctr-sigs{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sig-chip{font-size:10.5px;padding:4px 10px;border-radius:100px;display:inline-flex;align-items:center;gap:5px;font-weight:600}
.sig-chip.ok{background:#e7f5ec;color:var(--ok)}
.sig-chip.wait{background:var(--soft);color:var(--mute)}

/* ══════════ NOTIFS ══════════ */
.notif-list{display:flex;flex-direction:column;gap:8px}
.notif-it{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:16px 20px;display:flex;gap:14px;align-items:flex-start;transition:all .18s var(--ease);cursor:pointer;position:relative}
.notif-it:hover{border-color:var(--ink);transform:translateX(2px)}
.notif-it.unread{border-left:3px solid var(--acc);background:#fffaf5}
.notif-it.unread::after{content:'';position:absolute;top:16px;right:16px;width:8px;height:8px;background:var(--acc);border-radius:50%}
.notif-it .nic{width:40px;height:40px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mute)}
.notif-it .nic svg{width:18px;height:18px}
.notif-it .nt{flex:1;min-width:0}
.notif-it .nt p{font-size:13.5px;line-height:1.5}
.notif-it .nt .nm{font-size:11px;color:var(--mute);margin-top:4px}

/* ══════════ PROFIL ══════════ */
.prof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:860px){.prof-grid{grid-template-columns:1fr}}
.prof-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:24px}
.prof-card h3{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.prof-card .psub{font-size:12.5px;color:var(--mute);margin-bottom:18px}
.prof-card.danger{border-color:#f3b8b0;background:#fef6f5}
.prof-card.danger h3{color:var(--err)}

/* ══════════ MODALS ══════════ */
.modal{position:fixed;inset:0;background:rgba(11,11,11,.55);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;animation:modalIn .25s var(--eo)}
.modal.on{display:flex}
#signMo,#payMo{z-index:110}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal-box{background:#fff;border-radius:var(--rad-lg);width:100%;max-width:880px;max-height:94vh;overflow:hidden;display:flex;flex-direction:column;animation:boxIn .3s var(--eo) both;box-shadow:var(--shadow-lg)}
@keyframes boxIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
.mb-head{padding:20px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;z-index:2;flex-shrink:0}
.mb-head h2{font-size:20px;font-weight:700;letter-spacing:-.02em}
.mb-head em{color:var(--acc);font-family:var(--serif);font-weight:400}
.mb-head .close{width:34px;height:34px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:20px}
.mb-head .close:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.mb-body{padding:26px 28px;overflow-y:auto;flex:1}
.mb-foot{padding:14px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;background:#fdfcfa;flex-shrink:0}
.mb-foot .sig-status{margin-right:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ══════════ WIZARD ══════════ */
.wiz-progress{display:flex;gap:4px;padding:16px 28px 0;flex-shrink:0;background:#fff;position:relative}
.wiz-step{flex:1;display:flex;flex-direction:column;gap:6px;cursor:pointer;padding-bottom:14px;position:relative;transition:opacity .2s}
.wiz-step .wn{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.wiz-step .wn .wi{width:18px;height:18px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--mute);transition:all .2s}
.wiz-step .wbar{height:3px;background:var(--soft);border-radius:4px;overflow:hidden;transition:all .3s var(--ease)}
.wiz-step .wbar::after{content:'';display:block;height:100%;width:0;background:var(--acc);transition:width .4s var(--eo)}
.wiz-step.on .wbar::after{width:100%}
.wiz-step.on .wn{color:var(--ink)}
.wiz-step.on .wn .wi{background:var(--acc);color:#fff;transform:scale(1.1)}
.wiz-step.done .wbar{background:var(--ok)}
.wiz-step.done .wn .wi{background:var(--ok);color:#fff}
.wiz-step.done .wn{color:var(--ok)}
.wiz-step:not(.on):not(.done):hover{opacity:.7}

.wiz-panel{display:none;animation:wizIn .3s var(--eo) both}
.wiz-panel.on{display:block}
@keyframes wizIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wiz-intro{margin-bottom:20px;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.wiz-intro h3{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.1;letter-spacing:-.02em;margin-bottom:8px;font-weight:400}
.wiz-intro p{font-size:13px;color:var(--mute);max-width:560px;line-height:1.6}

/* Form fields */
.fm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.fm-grid{grid-template-columns:1fr}}
.fm-f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fm-f.full{grid-column:1/-1}
.fm-f label{font-size:12px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.fm-f input,.fm-f select,.fm-f textarea{padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13.5px;transition:all .18s;font-family:inherit;color:var(--ink)}
.fm-f input:focus,.fm-f select:focus,.fm-f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,11,11,.06)}
.fm-f textarea{resize:vertical;min-height:80px;line-height:1.5}
.fm-f .hint{font-size:11.5px;color:var(--mute);font-style:italic;line-height:1.4}
.fm-parties{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.fm-parties{grid-template-columns:1fr}}
.fm-party{background:var(--bg);padding:18px;border-radius:12px;border:1px solid var(--line)}
.fm-party h4{font-size:12.5px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.04em}
.fm-party h4::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--acc)}
.fm-party.right h4::before{background:var(--acc-2)}
.fm-warn{background:#fff5ea;border:1px solid #f4c188;color:#8f4508;padding:12px 16px;border-radius:10px;font-size:13px;display:flex;gap:10px;align-items:flex-start;margin-bottom:20px;line-height:1.5}
.fm-warn .ic{font-size:17px;flex-shrink:0;line-height:1}

/* Visual pickers */
.tmpl-row{display:flex;gap:8px;margin-bottom:22px;padding:14px 16px;background:linear-gradient(135deg,#fff5ea,#fff);border:1px dashed #f4c188;border-radius:14px;align-items:center;flex-wrap:wrap}
.tmpl-row b{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--warn);margin-right:4px}
.tmpl{padding:7px 14px;background:#fff;border:1.5px solid var(--line);border-radius:100px;font-size:12px;cursor:pointer;font-weight:600;transition:all .18s var(--ease);color:var(--ink);font-family:inherit}
.tmpl:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.tmpl.blank{background:transparent;border-style:dashed;color:var(--mute)}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
@media (max-width:640px){.choice-grid{grid-template-columns:1fr}}
.choice{padding:14px 12px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:all .2s var(--ease);text-align:center;background:#fff;user-select:none;font-family:inherit}
.choice:hover{border-color:var(--mute);transform:translateY(-1px)}
.choice.on{border-color:var(--ink);background:var(--ink);color:#fff;box-shadow:var(--shadow-xs)}
.choice .ic{font-size:22px;display:block;margin-bottom:4px;line-height:1}
.choice b{display:block;font-size:13px;font-weight:600}
.choice span{display:block;font-size:11px;color:var(--mute);margin-top:2px}
.choice.on span{color:rgba(255,255,255,.65)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip-pk{padding:7px 12px;border:1px solid var(--line);border-radius:100px;font-size:12px;cursor:pointer;background:#fff;transition:all .15s var(--ease);display:inline-flex;align-items:center;gap:5px;font-weight:500;color:var(--ink);font-family:inherit}
.chip-pk:hover{border-color:var(--ink);background:var(--soft);transform:translateY(-1px)}
.chip-pk.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip-pk.flash{background:var(--ok);color:#fff;border-color:var(--ok);transform:scale(.96)}
.amt-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.amt-pk{padding:8px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;background:#fff;transition:all .15s var(--ease);font-family:inherit;color:var(--ink)}
.amt-pk:hover{border-color:var(--ink);transform:translateY(-1px)}
.amt-pk.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.amt-row .amt-inp{width:130px;padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;font-weight:600;background:var(--bg)}
.amt-row .amt-inp:focus{outline:none;border-color:var(--ink);background:#fff}
.bank-title{font-size:11px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin:4px 0 6px}
.sub-label{font-size:12px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;margin-top:14px;margin-bottom:6px;display:block}
details.coll{margin-top:14px;border:1px dashed var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
details.coll>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);padding:12px 16px;list-style:none;display:flex;align-items:center;gap:8px}
details.coll>summary::-webkit-details-marker{display:none}
details.coll>summary::before{content:'▸';color:var(--mute);transition:transform .2s var(--ease)}
details.coll[open]>summary::before{transform:rotate(90deg)}
details.coll>div{padding:4px 16px 16px}

/* ── Enriched form wizard ── */
.step-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.step-icon{width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.step-kicker{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin-bottom:3px}
.step-title{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.1;letter-spacing:-.02em;margin-bottom:5px}
.step-sub{font-size:12.5px;color:var(--mute);line-height:1.55;max-width:480px}
.step-why{background:linear-gradient(135deg,#fffbf2,#fff9ed);border:1px solid rgba(245,158,11,.25);border-radius:12px;padding:11px 15px;margin-bottom:22px;font-size:12.5px;color:#7a5719;line-height:1.5;display:flex;gap:10px;align-items:flex-start}
.step-why .sy-ic{font-size:16px;flex-shrink:0;line-height:1.2}
.step-why b{display:block;font-weight:700;margin-bottom:2px}
.pwiz-step,.swiz-step{animation:stepIn .28s var(--eo) both}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.proj-preview-card{background:linear-gradient(135deg,var(--ink) 0%,#1a1a2e 100%);color:#fff;border-radius:16px;padding:20px 22px;margin-top:16px;margin-bottom:4px;transition:all .3s}
.proj-preview-card .pp-cat{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);margin-bottom:6px;font-weight:700}
.proj-preview-card .pp-name{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.1;margin-bottom:6px}
.proj-preview-card .pp-tag{font-size:12px;color:rgba(255,255,255,.65);line-height:1.4}
.strength-bar{margin-top:14px;background:rgba(255,255,255,.12);border-radius:100px;height:4px;overflow:hidden}
.strength-bar-fill{height:100%;background:linear-gradient(90deg,#ff6b3d,#4ade80);transition:width .5s var(--eo)}
.section-divider{display:flex;align-items:center;gap:12px;margin:22px 0 18px;color:var(--mute)}
.section-divider span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.choice.ic-choice{padding:16px 10px}
.choice.ic-choice .eic{font-size:24px;display:block;margin-bottom:4px;line-height:1}
.step-strength{display:flex;justify-content:flex-end;margin-bottom:20px}
.step-strength span{font-size:11.5px;color:var(--mute);font-weight:600;padding:4px 10px;background:var(--soft);border-radius:100px}
.budget-slider-wrap{display:flex;flex-direction:column;gap:8px}
.budget-slider-wrap input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;background:var(--line);outline:none;cursor:pointer}
.budget-slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.budget-display{text-align:center;font-size:28px;font-weight:800;letter-spacing:-.02em;padding:14px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.budget-presets{display:flex;gap:6px;flex-wrap:wrap}
.budget-preset{padding:6px 12px;border:1px solid var(--line);border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;background:#fff;font-family:inherit}
.budget-preset:hover{border-color:var(--ink)}
.budget-preset.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.interest-chip{padding:8px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:13px;cursor:pointer;background:#fff;transition:all .18s;display:inline-flex;align-items:center;gap:8px;font-weight:500;font-family:inherit}
.interest-chip:hover{border-color:var(--mute);transform:translateY(-1px)}
.interest-chip.on{background:linear-gradient(135deg,var(--ink),#1a2a3a);color:#fff;border-color:transparent;box-shadow:var(--shadow-xs)}
.interest-chip .ic{font-size:18px}

/* Review step */
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media (max-width:640px){.rev-grid{grid-template-columns:1fr}}
.rev-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px;position:relative}
.rev-card.full{grid-column:1/-1}
.rev-card h4{font-size:11px;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.rev-card h4 .edit-btn{font-size:10.5px;color:var(--mute);cursor:pointer;letter-spacing:0;font-weight:500;text-transform:none;padding:3px 8px;border-radius:6px;background:#fff;border:1px solid var(--line);transition:all .15s}
.rev-card h4 .edit-btn:hover{border-color:var(--ink);color:var(--ink)}
.rev-card p{font-size:13px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.rev-card dt{color:var(--mute);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:8px}
.rev-card dd{font-size:13px;font-weight:500}
.rev-card dt:first-child{margin-top:0}

/* Signature canvas */
.sig-box{background:var(--bg);border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center}
.sig-canv-wrap{position:relative;background:#fff;border-radius:8px;display:inline-block;box-shadow:var(--shadow-xs)}
.sig-canv{display:block;cursor:crosshair;touch-action:none;border-radius:8px}
.sig-line{position:absolute;bottom:28px;left:20px;right:20px;border-bottom:1px dashed var(--line);pointer-events:none}
.sig-lbl{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.15em;pointer-events:none}

/* Viewer */
.doc{background:#fff;padding:40px 44px;border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.7}
@media (max-width:640px){.doc{padding:24px 20px}}
.doc-head{text-align:center;padding-bottom:20px;border-bottom:2px solid var(--ink);margin-bottom:24px}
.doc-head .logo{font-weight:800;font-size:14px;letter-spacing:.08em;color:var(--acc);margin-bottom:8px}
.doc-head h1{font-family:var(--serif);font-style:italic;font-size:34px;font-weight:400;letter-spacing:-.02em;line-height:1}
.doc-head .num{font-size:12px;color:var(--mute);margin-top:6px;text-transform:uppercase;letter-spacing:.1em}
.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:28px}
@media (max-width:640px){.doc-parties{grid-template-columns:1fr}}
.doc-party h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);margin-bottom:8px;font-weight:700}
.doc-party b{display:block;font-size:15px;margin-bottom:4px}
.doc-section{margin-bottom:24px}
.doc-section h3{font-family:var(--serif);font-style:italic;font-size:22px;margin-bottom:10px;font-weight:400}
.doc-section h3::before{content:'§ '}
.doc-section p{margin-bottom:8px}
.doc-kv{display:grid;grid-template-columns:160px 1fr;gap:6px 12px;margin-top:10px}
.doc-kv dt{color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.doc-kv dd{font-size:13px}
.doc-sigs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:640px){.doc-sigs{grid-template-columns:1fr}}
.doc-sig{text-align:center;padding:16px}
.doc-sig-img{max-width:220px;max-height:90px;margin:0 auto;display:block}
.doc-sig b{display:block;margin-top:8px;font-size:13px}
.doc-sig span{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.doc-sig-empty{width:220px;height:90px;border:1px dashed var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:11px;margin:0 auto}
.doc-foot{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}

/* Toasts */
.toasts{position:fixed;top:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:200;pointer-events:none}
.toast{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ink);padding:12px 18px;border-radius:10px;box-shadow:var(--shadow-md);font-size:13px;max-width:340px;animation:toastIn .4s var(--eo) both;pointer-events:auto;display:flex;gap:10px;align-items:center}
.toast.s{border-left-color:var(--ok)}
.toast.e{border-left-color:var(--err)}
.toast.w{border-left-color:var(--acc)}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .3s var(--eo) forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* Skeleton */
.skel{background:linear-gradient(90deg,var(--soft) 0%,#eee 50%,var(--soft) 100%);background-size:200% 100%;animation:shim 1.4s linear infinite;border-radius:8px}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-card{height:110px;margin-bottom:12px}

/* Confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.conf-p{position:absolute;width:10px;height:10px;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* Reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s var(--eo),transform .55s var(--eo)}
.rv.on{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .mb-body{padding:20px}
  .mb-head{padding:16px 20px}
  .mb-foot{padding:12px 20px}
  .wiz-progress{padding:12px 16px 0}
}

/* ══════════ DARK MODE ══════════ */
[data-theme="dark"]{
  --bg:#141210;--ink:#f0ece5;--mute:#9a9188;--soft:#1f1c18;--line:#2e2a24;
  --dark:#f0ece5;--dark-soft:#d4cfc8;--cream:#141210;--white:#1f1c18;
}
[data-theme="dark"] .sidebar{background:#0d0b09;border-right-color:rgba(255,255,255,.04)}
[data-theme="dark"] .topbar{background:rgba(20,18,16,.85)}
[data-theme="dark"] .card,[data-theme="dark"] .kpi,[data-theme="dark"] .chart-card,[data-theme="dark"] .activity-card,[data-theme="dark"] .ctr-card,[data-theme="dark"] .prof-card,[data-theme="dark"] .mc-card{background:#1a1815;border-color:var(--line)}
[data-theme="dark"] .chat-wrap,[data-theme="dark"] .conv-panel,[data-theme="dark"] .chat-head,[data-theme="dark"] .chat-foot,[data-theme="dark"] #chatBody{background:#1a1815}
[data-theme="dark"] .msg.me .bubble{background:#333}
[data-theme="dark"] .msg.them .bubble{background:#242018;border-color:var(--line)}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:#1a1815;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .icon-btn{background:var(--soft);border-color:var(--line)}
[data-theme="dark"] .bottom-nav{background:#141210;border-top-color:var(--line)}
[data-theme="dark"] table thead tr{background:#1a1815}
[data-theme="dark"] .modal-body,.mb-head,[data-theme="dark"] .mb-body,[data-theme="dark"] .mb-foot{background:#1a1815;color:var(--ink)}
.dm-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:all .18s var(--ease);background:transparent}
.dm-toggle:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ══════════ SEARCH MODAL ══════════ */
#searchMo{position:fixed;inset:0;z-index:500;display:none;align-items:flex-start;justify-content:center;padding-top:10vh}
#searchMo.on{display:flex}
#searchMo .sm-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px)}
.sm-box{position:relative;width:min(620px,92vw);background:#fff;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.22);overflow:hidden;z-index:1;animation:smIn .25s var(--eo)}
[data-theme="dark"] .sm-box{background:#1a1815}
@keyframes smIn{from{opacity:0;transform:translateY(-20px) scale(.97)}to{opacity:1;transform:none}}
.sm-inp-wrap{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.sm-inp-wrap .ico{font-size:18px;color:var(--mute);flex-shrink:0}
#searchInput{flex:1;border:none;background:transparent;font-size:16px;font-family:inherit;color:var(--ink);outline:none}
.sm-hint{font-size:11px;color:var(--mute);white-space:nowrap;flex-shrink:0;padding:4px 8px;border:1px solid var(--line);border-radius:6px}
.sm-res{max-height:400px;overflow-y:auto;padding:10px 0}
.sm-sec{padding:6px 22px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.sm-it{display:flex;align-items:center;gap:12px;padding:11px 22px;cursor:pointer;transition:background .15s}
.sm-it:hover,.sm-it.sel{background:var(--soft)}
.sm-it .sic{width:34px;height:34px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mute)}
.sm-it .sic svg{width:16px;height:16px}
.sm-it .sd{flex:1;min-width:0}
.sm-it .st{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-it .ss{font-size:12px;color:var(--mute)}
.sm-empty{text-align:center;padding:40px 20px;color:var(--mute);font-size:13.5px}

/* ══════════ ANALYTICS ══════════ */
.an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
@media (max-width:1000px){.an-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.an-grid{grid-template-columns:1fr}}
.funnel-wrap{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.funnel-step{display:flex;align-items:center;gap:12px}
.funnel-bar-outer{flex:1;height:36px;background:var(--soft);border-radius:8px;overflow:hidden;position:relative}
.funnel-bar-inner{height:100%;border-radius:8px;transition:width .9s var(--eo);display:flex;align-items:center;padding-left:12px;font-size:12px;font-weight:700;color:#fff;min-width:28px}
.funnel-label{width:140px;font-size:12.5px;font-weight:600;text-align:right;flex-shrink:0}
.funnel-cnt{width:44px;font-size:13px;font-weight:800;text-align:right;flex-shrink:0}
.donut-wrap{position:relative;width:180px;height:180px;margin:0 auto}
.donut-wrap svg{width:100%;height:100%}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center b{font-family:var(--serif);font-style:italic;font-size:36px;line-height:1}
.donut-center span{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.legend-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 0}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ══════════ FAVORITES ══════════ */
.fav-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;transition:all .18s var(--ease);flex-shrink:0}
.fav-btn:hover{border-color:var(--acc);background:rgba(255,77,31,.08)}
.fav-btn.on{border-color:var(--acc);background:rgba(255,77,31,.1);color:var(--acc)}

/* ══════════ CHECKLIST ══════════ */
.checklist-card{background:linear-gradient(135deg,#fff 0%,#fffcf9 100%);border:1px solid var(--line);border-radius:var(--rad);padding:22px;margin-bottom:24px}
[data-theme="dark"] .checklist-card{background:linear-gradient(135deg,#1a1815,#1e1b14)}
.check-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.check-item:last-child{border-bottom:none;padding-bottom:0}
.check-ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;font-weight:700}
.check-ic.done{background:rgba(27,127,79,.15);color:var(--ok)}
.check-ic.todo{background:var(--soft);color:var(--mute);border:2px dashed var(--line)}
.check-txt{flex:1;min-width:0}
.check-txt b{font-size:13px;font-weight:600;display:block}
.check-txt span{font-size:12px;color:var(--mute)}

/* ══ PAYMENT METHOD BUTTONS ══ */
.pay-method-btn{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;transition:all .15s var(--ease);text-align:left;font-family:inherit}
.pay-method-btn:hover{border-color:var(--ink);background:var(--surface-2);transform:translateX(2px)}
.pay-method-btn.loading{opacity:.6;cursor:not-allowed;transform:none}

/* ══════════ KANBAN VIEW ══════════ */
.view-toggle{display:flex;gap:2px;background:var(--surface-3);padding:3px;border-radius:8px;border:1px solid var(--line)}
.vt-btn{padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;color:var(--mute);transition:all .14s;border:none;background:none;cursor:pointer;font-family:inherit}
.vt-btn.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs)}
/* Discovery card compare checkbox */
.cmp-check{position:absolute;top:10px;left:10px;width:20px;height:20px;border-radius:6px;border:2px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:2}
.cmp-check.on{border-color:var(--acc);background:var(--acc)}
.cmp-check.on::after{content:'';display:block;width:6px;height:10px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translate(-1px,-1px)}
.disc-card{position:relative}
/* Comparator modal grid */
.cmp-grid{display:grid;gap:16px}
.cmp-col{background:var(--bg);border-radius:12px;padding:18px;border:1px solid var(--line)}
.cmp-col h4{font-size:13px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cmp-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px;gap:8px}
.cmp-row:last-child{border:none}
.cmp-row dt{color:var(--mute);font-size:11.5px}
.cmp-row dd{font-weight:600;text-align:right}
.cmp-winner{color:var(--ok)!important}
/* Milestone list */
.ms-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ms-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg);border-radius:10px;border:1px solid var(--line)}
.ms-item.done{opacity:.65}
.ms-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ms-dot.pending{background:var(--warn)}
.ms-dot.completed{background:var(--ok)}
.ms-dot.verified{background:var(--acc-2)}
.ms-dot.cancelled{background:var(--mute)}
.ms-body{flex:1;min-width:0}
.ms-title{font-size:13px;font-weight:600}
.ms-date{font-size:11px;color:var(--mute)}
/* Funding progress */
.fund-bar-wrap{margin-top:10px}
.fund-bar-track{height:5px;background:var(--soft);border-radius:100px;overflow:hidden}
.fund-bar-fill{height:100%;background:linear-gradient(90deg,var(--ok),#22d3a0);border-radius:100px;transition:width .6s var(--eo)}
.fund-pct{font-size:11px;color:var(--mute);margin-top:4px}
.kanban-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;padding-bottom:40px}
@media(max-width:1100px){.kanban-board{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kanban-board{grid-template-columns:1fr}}
.kan-col{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kan-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.kan-head .kan-cnt{background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:1px 8px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:0}
.kan-cards{display:flex;flex-direction:column;gap:8px;padding:10px}
.kan-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px;cursor:pointer;transition:all .18s var(--ease)}
.kan-card:hover{border-color:var(--ink);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.kan-card .kc-title{font-size:13px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px;line-height:1.3}
.kan-card .kc-sub{font-size:11.5px;color:var(--mute);margin-bottom:8px}
.kan-card .kc-amt{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink)}
.kan-card .kc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--mute)}
.kan-col-pending .kan-head{border-top:3px solid #F59E0B}
.kan-col-accepted .kan-head{border-top:3px solid #3B82F6}
.kan-col-signed .kan-head{border-top:3px solid var(--ok)}
.kan-col-rejected .kan-head{border-top:3px solid var(--err)}
.kan-empty{text-align:center;padding:24px 12px;color:var(--mute);font-size:12px;font-style:italic}

/* ══════════ AGENDA / CALENDAR ══════════ */
.agenda-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media(max-width:1000px){.agenda-grid{grid-template-columns:1fr}}
.cal-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:22px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-nav h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.cal-nav-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:all .14s;background:transparent;color:var(--ink)}
.cal-nav-btn:hover{background:var(--surface-3);border-color:var(--line-2)}
.cal-days-head{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:6px}
.cal-days-head span{font-size:11px;font-weight:600;color:var(--mute);text-transform:uppercase;padding:4px 0}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:5px 3px;border-radius:8px;cursor:pointer;transition:background .14s;font-size:13px;font-weight:500;position:relative}
.cal-day:hover{background:var(--surface-2)}
.cal-day.today{background:var(--ink);color:#fff;font-weight:700}
.cal-day.today:hover{background:var(--acc)}
.cal-day.other-month{color:var(--mute);opacity:.45}
.cal-day.has-event::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--acc)}
.cal-day.today.has-event::after{background:#fff}
.cal-day.selected{background:rgba(240,78,35,.12);color:var(--acc)}
.cal-day.today.selected{background:var(--acc);color:#fff}
.agenda-events{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:20px}
.agenda-events h4{font-size:13.5px;font-weight:700;margin-bottom:14px;letter-spacing:-.01em}
.ag-ev{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:background .13s}
.ag-ev:last-child{border-bottom:none;padding-bottom:0}
.ag-ev:hover{opacity:.8}
.ag-ev .ae-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.ag-ev .ae-info b{display:block;font-size:13px;font-weight:600}
.ag-ev .ae-info span{font-size:11.5px;color:var(--mute)}
.ag-empty{font-size:13px;color:var(--mute);text-align:center;padding:30px 0;font-style:italic}

/* ══════════ QUICK NOTEPAD ══════════ */
.notepad-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:18px;display:flex;flex-direction:column;gap:10px}
.notepad-card h3{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.notepad-card textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;line-height:1.55;resize:vertical;min-height:100px;transition:border-color .14s;background:var(--bg);color:var(--ink)}
.notepad-card textarea:focus{outline:none;border-color:var(--ink)}
.notepad-saved{font-size:11px;color:var(--ok);text-align:right;min-height:16px;transition:opacity .3s}

/* ══════════ FINANCE CHART ══════════ */
.fin-chart-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:22px;margin-bottom:20px}
.fin-chart-wrap h3{font-size:14px;font-weight:700;margin-bottom:16px;letter-spacing:-.01em}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:130px;padding-bottom:24px;position:relative;border-bottom:1px solid var(--line)}
.bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.bar{width:100%;border-radius:4px 4px 0 0;transition:height .6s var(--eo),opacity .2s;position:relative;cursor:pointer;min-height:2px}
.bar:hover{opacity:.8}
.bar-lbl{font-size:10px;color:var(--mute);text-align:center;white-space:nowrap;position:absolute;bottom:-20px;left:50%;transform:translateX(-50%)}
.fin-legend{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.fin-leg-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute)}
.fin-leg-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
[data-theme="dark"] .notepad-card textarea{background:var(--soft)}


/* ══════════ WIZARD PREMIUM REDESIGN ══════════ */

/* ─── Outer wrappers ─── */
.pwiz-outer,.swiz-outer{position:relative;padding:2rem 0 5rem;overflow:hidden}
.pwiz-outer::before{content:'';position:absolute;top:-80px;right:-120px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,77,31,.07) 0%,transparent 65%);pointer-events:none}
.swiz-outer::before{content:'';position:absolute;top:-80px;left:-120px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(27,74,58,.07) 0%,transparent 65%);pointer-events:none}
.pwiz-outer::after,.swiz-outer::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(11,11,11,.05) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}

/* ─── Page header ─── */
.pwiz-hd,.swiz-hd{text-align:center;margin-bottom:2.5rem;position:relative;z-index:1}
.pwiz-kicker,.swiz-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);padding:5px 16px;background:rgba(255,77,31,.08);border:1px solid rgba(255,77,31,.18);border-radius:999px;margin-bottom:1rem}
.swiz-kicker{color:var(--acc-2,#1b4a3a);background:rgba(27,74,58,.08);border-color:rgba(27,74,58,.2)}
.pwiz-kicker i,.swiz-kicker i{width:5px;height:5px;background:currentColor;border-radius:50%;animation:pwDot 1.8s ease-in-out infinite;display:inline-block}
@keyframes pwDot{0%,100%{transform:scale(1)}50%{transform:scale(1.7);opacity:.5}}
.pwiz-hd h1,.swiz-hd h1{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:400;letter-spacing:-.025em;line-height:1.1;margin-bottom:.75rem;color:var(--ink)}
.pwiz-hd h1 em,.swiz-hd h1 em{color:var(--acc)}
.pwiz-hd p,.swiz-hd p{color:var(--mute);font-size:1rem;max-width:460px;margin:0 auto;line-height:1.6}

/* ─── Two-column layout ─── */
.pwiz-body,.swiz-body{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start;position:relative;z-index:1}
@media(max-width:980px){.pwiz-body,.swiz-body{grid-template-columns:1fr}}

/* ─── Sticky sidebar ─── */
.pwiz-sidebar,.swiz-sidebar{position:sticky;top:80px;display:flex;flex-direction:column;gap:1rem}
@media(max-width:980px){.pwiz-sidebar,.swiz-sidebar{display:none}}

/* ─── Project preview card ─── */
.pwiz-preview-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.75rem;box-shadow:0 20px 60px -20px rgba(0,0,0,.1);transition:box-shadow .3s}
.pwiz-preview-card:hover{box-shadow:0 28px 72px -20px rgba(0,0,0,.14)}
.pwiz-preview-hd{display:flex;align-items:center;gap:14px;margin-bottom:1rem}
.pwiz-preview-emoji{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--acc),#ff8a50);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;transition:all .35s var(--eo)}
.pwiz-preview-name{font-weight:700;font-size:1rem;color:var(--ink);line-height:1.25;transition:all .2s}
.pwiz-preview-cat{font-size:.7rem;color:var(--mute);margin-top:3px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.pwiz-preview-divider{height:1px;background:var(--line);margin:1rem 0}
.pwiz-preview-tagline{font-size:.875rem;color:var(--mute);line-height:1.6;margin-bottom:1.2rem;font-style:italic;min-height:2.8rem}
.pwiz-str-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.pwiz-str-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mute)}
.pwiz-str-pct{font-size:.72rem;font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}
.pwiz-str-track{height:5px;background:var(--line);border-radius:999px;overflow:hidden}
.pwiz-str-fill{height:100%;background:linear-gradient(90deg,var(--acc),#ff8a50);border-radius:999px;transition:width .6s var(--eo)}
.pwiz-preview-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:1rem}
.pwiz-preview-badge{padding:3px 10px;background:var(--bg);border:1px solid var(--line);border-radius:999px;font-size:.68rem;font-weight:600;color:var(--mute)}

/* ─── Sponsor preview card ─── */
.swiz-preview-card{background:var(--dark);border-radius:24px;padding:1.75rem;box-shadow:0 20px 60px -20px rgba(0,0,0,.3);position:relative;overflow:hidden}
.swiz-preview-card::before{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,77,31,.18),transparent 70%)}
.swiz-preview-card::after{content:'';position:absolute;bottom:-40px;left:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(27,74,58,.25),transparent 70%)}
.swiz-preview-logo{width:58px;height:58px;border-radius:18px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;color:#fff;margin-bottom:1.2rem;letter-spacing:-.04em;position:relative;z-index:1;transition:all .3s var(--eo)}
.swiz-preview-name{font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:4px;position:relative;z-index:1;transition:all .2s}
.swiz-preview-sector{font-size:.72rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.09em;margin-bottom:1.4rem;position:relative;z-index:1}
.swiz-preview-tags{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.swiz-preview-tag{padding:4px 12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:999px;font-size:.7rem;font-weight:600;color:rgba(255,255,255,.5);transition:all .2s}

/* ─── Tips panel ─── */
.pwiz-tip,.swiz-tip{border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.4rem;background:var(--surface)}
.pwiz-tip-lbl,.swiz-tip-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);margin-bottom:7px}
.pwiz-tip p,.swiz-tip p{font-size:.82rem;color:var(--mute);line-height:1.6}

/* ─── Form card ─── */
.idx-wizard-wrap{max-width:100%;margin:0;padding:0}
.idx-wizard-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:2.5rem 2.75rem;box-shadow:0 24px 64px -24px rgba(0,0,0,.09);position:relative;overflow:hidden}
@media(max-width:720px){.idx-wizard-card{padding:1.5rem 1.25rem;border-radius:20px}}
.idx-wizard-head{display:none}

/* ─── Progress bar ─── */
.idx-progress-wrap{margin-bottom:2.2rem}
.idx-progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.idx-progress-label{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.idx-progress-pct{font-size:.8rem;font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}
.idx-progress-track{height:5px;background:var(--line);border-radius:999px;overflow:hidden}
.idx-progress-fill{height:100%;background:linear-gradient(90deg,var(--acc),#ff8a50);border-radius:999px;transition:width .6s var(--eo);min-width:3px}

/* ─── Step indicators ─── */
.idx-steps{display:flex;align-items:flex-start;justify-content:center;margin-bottom:2.5rem;position:relative}
.idx-steps::before{content:'';position:absolute;top:20px;left:24px;right:24px;height:2px;background:var(--line);z-index:0}
.idx-step-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1}
.idx-step-item:not(:last-child)::after{display:none}
.idx-step-num{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--mute);transition:all .4s var(--eo)}
.idx-step-item.on .idx-step-num{background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.1);box-shadow:0 8px 24px -8px rgba(0,0,0,.28)}
.idx-step-item.done .idx-step-num{background:var(--acc);border-color:var(--acc);color:#fff}
.idx-step-label{font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);text-align:center;transition:color .3s;line-height:1.3}
.idx-step-item.on .idx-step-label{color:var(--ink)}
.idx-step-item.done .idx-step-label{color:var(--acc)}
@media(max-width:500px){.idx-step-label{display:none}.idx-step-num{width:32px;height:32px;font-size:.75rem}.idx-steps::before{top:16px}}

/* ─── Panels ─── */
.idx-panel{display:none}
.idx-panel.on{display:block;animation:idxPanelIn .45s var(--eo) both}
@keyframes idxPanelIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.idx-panel.on>*{animation:idxChildUp .5s var(--eo) both}
.idx-panel.on>*:nth-child(1){animation-delay:.05s}
.idx-panel.on>*:nth-child(2){animation-delay:.09s}
.idx-panel.on>*:nth-child(3){animation-delay:.13s}
.idx-panel.on>*:nth-child(4){animation-delay:.17s}
.idx-panel.on>*:nth-child(5){animation-delay:.21s}
.idx-panel.on>*:nth-child(6){animation-delay:.25s}
.idx-panel.on>*:nth-child(7){animation-delay:.29s}
.idx-panel.on>*:nth-child(8){animation-delay:.33s}
@keyframes idxChildUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.idx-panel.on,.idx-panel.on>*{animation:none!important}.idx-step-num,.idx-progress-fill{transition:none!important}}

/* ─── Panel header ─── */
.idx-title{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:.5rem;display:flex;align-items:center;gap:12px;line-height:1.2}
.idx-title .step-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,rgba(255,77,31,.1),rgba(255,138,80,.06));border:1px solid rgba(255,77,31,.15);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.idx-subtitle{font-size:.875rem;color:var(--mute);margin-bottom:2rem;padding-left:54px;line-height:1.6}

/* ─── Form groups ─── */
.idx-fg{margin-bottom:1.5rem;position:relative}
.idx-fg label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:.6rem;transition:color .2s}
.idx-fg:focus-within>label{color:var(--ink)}
.idx-fg .idx-opt{font-weight:400;text-transform:none;letter-spacing:0;font-size:.7rem;opacity:.7}
.idx-fg input,.idx-fg select,.idx-fg textarea{width:100%;padding:.95rem 1.15rem;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);font-size:.95rem;color:var(--ink);font-family:inherit;transition:border-color .22s,box-shadow .22s,background .2s;resize:vertical}
.idx-fg input::placeholder,.idx-fg textarea::placeholder{color:var(--line-2,#c4bdb4)}
.idx-fg input:focus,.idx-fg select:focus,.idx-fg textarea:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(11,11,11,.05)}
.idx-fg input.is-valid{border-color:var(--ok)}
.idx-fg input.is-invalid,.idx-fg textarea.is-invalid{border-color:var(--err);box-shadow:0 0 0 4px rgba(185,28,28,.05)}
.idx-fg .idx-hint{font-size:.73rem;color:var(--mute);margin-top:6px}
.idx-fg .idx-char-count{font-size:.7rem;color:var(--mute);text-align:right;margin-top:4px;font-variant-numeric:tabular-nums}
.idx-fg .idx-char-count.warn{color:var(--warn)}
.idx-fg .idx-char-count.err{color:var(--err)}
.idx-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:600px){.idx-grid{grid-template-columns:1fr}}

/* ─── Choice tiles ─── */
.idx-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.idx-choice{padding:1.1rem .8rem;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;text-align:center;background:var(--bg);transition:all .28s var(--eo);display:flex;flex-direction:column;align-items:center;gap:7px;user-select:none;position:relative;overflow:hidden}
.idx-choice::after{content:'';position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .28s;pointer-events:none}
.idx-choice:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 10px 28px -8px rgba(0,0,0,.12)}
.idx-choice.on{border-color:transparent;transform:translateY(-3px);box-shadow:0 12px 32px -8px rgba(0,0,0,.22)}
.idx-choice.on::after{opacity:1}
.idx-choice svg{width:24px;height:24px;stroke:var(--mute);fill:none;stroke-width:1.5;transition:stroke .28s;position:relative;z-index:1}
.idx-choice.on svg{stroke:#fff}
.idx-choice b{font-size:.8rem;font-weight:700;color:var(--ink);transition:color .28s;position:relative;z-index:1}
.idx-choice.on b{color:#fff}
.idx-choice span{font-size:.68rem;color:var(--mute);transition:color .28s;position:relative;z-index:1}
.idx-choice.on span{color:rgba(255,255,255,.6)}

/* ─── City suggestions ─── */
.idx-suggestions-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:14px;z-index:200;max-height:200px;overflow-y:auto;box-shadow:0 14px 36px rgba(0,0,0,.1);margin-top:4px}
.idx-suggestion-item{padding:11px 16px;font-size:.88rem;cursor:pointer;border-bottom:1px solid var(--soft);transition:background .15s}
.idx-suggestion-item:last-child{border-bottom:none}
.idx-suggestion-item:hover{background:var(--bg)}

/* ─── Chips ─── */
.idx-chips{display:flex;flex-wrap:wrap;gap:8px}
.idx-chip{padding:.58rem 1.2rem;border:1.5px solid var(--line);border-radius:999px;font-size:.83rem;font-weight:500;cursor:pointer;background:var(--bg);color:var(--ink);transition:all .22s var(--eo);user-select:none}
.idx-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.idx-chip.on{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px);box-shadow:0 5px 14px -4px rgba(0,0,0,.2)}

/* ─── Budget ─── */
.idx-budget-display{text-align:center;font-size:clamp(2.8rem,7vw,4.5rem);font-weight:800;color:var(--ink);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-bottom:.3rem;line-height:1}
.idx-budget-slider{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:999px;outline:none;cursor:pointer;margin:1.2rem 0;background:var(--line)}
.idx-budget-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--ink);border:4px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:grab;transition:transform .2s}
.idx-budget-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.2)}
.idx-budget-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:4px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:grab}
.idx-budget-presets{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.idx-budget-preset{padding:.44rem 1.1rem;border-radius:999px;font-size:.78rem;font-weight:600;border:1.5px solid var(--line);background:transparent;color:var(--mute);cursor:pointer;transition:all .2s;font-family:inherit}
.idx-budget-preset:hover{border-color:var(--ink);color:var(--ink)}
.idx-budget-preset.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ─── Section box ─── */
.idx-section-box{padding:1.4rem;background:var(--bg);border:1px solid var(--line);border-radius:18px;margin-top:1.5rem}
.idx-section-box h4{font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.idx-section-box h4 svg{width:16px;height:16px;stroke:var(--acc);fill:none;stroke-width:2}

/* ─── Package builder ─── */
.idx-pkg-list{display:grid;gap:12px;margin-bottom:12px}
.idx-pkg-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:1.25rem;position:relative;transition:box-shadow .2s,border-color .2s}
.idx-pkg-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.06);border-color:var(--line-2)}
.idx-pkg-remove{position:absolute;right:10px;top:10px;background:none;border:none;cursor:pointer;font-size:18px;color:var(--mute);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}
.idx-pkg-remove:hover{background:var(--err);color:#fff}
.idx-pkg-empty{padding:2rem;text-align:center;border:1.5px dashed var(--line);border-radius:16px;color:var(--mute);font-size:.85rem}
.idx-pkg-add{display:flex;align-items:center;justify-content:center;gap:8px;padding:.9rem;border:1.5px dashed var(--line);border-radius:16px;background:transparent;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--mute);width:100%;transition:all .22s;font-family:inherit}
.idx-pkg-add:hover{border-color:var(--acc);color:var(--acc);background:rgba(255,77,31,.02)}

/* ─── Old inline preview → moved to sidebar ─── */
.idx-preview{display:none!important}

/* ─── Footer navigation ─── */
.idx-foot{display:flex;justify-content:space-between;align-items:center;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);gap:12px}
.idx-btn-p{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:999px;padding:.9rem 2.2rem;font-weight:600;font-size:.92rem;transition:all .3s var(--eo);cursor:pointer;border:none;position:relative;overflow:hidden;font-family:inherit}
.idx-btn-p:hover{background:var(--acc);transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(255,77,31,.45)}
.idx-btn-p:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.idx-btn-p::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:translateX(-100%)}
.idx-btn-p:hover::after{animation:idxShimmer .7s var(--eo) forwards}
@keyframes idxShimmer{to{transform:translateX(100%)}}
.idx-btn-d{color:var(--mute);font-size:.88rem;font-weight:500;cursor:pointer;background:transparent;border:none;transition:color .2s;font-family:inherit}
.idx-btn-d:hover{color:var(--ink)}

/* ─── Success animation ─── */
.idx-success{text-align:center;padding:2.5rem 1rem}
.idx-success-ic{width:80px;height:80px;background:linear-gradient(135deg,var(--acc),#ff8a50);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;animation:idxSuccPop .5s var(--eo) both}
.idx-success-ic svg{width:36px;height:36px;stroke:currentColor;stroke-width:2.5;fill:none}
@keyframes idxSuccPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.idx-success b{font-size:1.15rem;font-weight:700;display:block;margin-bottom:6px}
.idx-success p{color:var(--mute);font-size:.9rem}

/* ─── Auto-save status ─── */
.idx-save-status{display:none;align-items:center;gap:6px;font-size:.72rem;color:var(--ok,#1b7f4f);position:absolute;top:1.25rem;right:1.75rem}
.idx-save-status.on{display:flex;animation:idxChildUp .3s ease both}
.idx-save-dot{width:6px;height:6px;border-radius:50%;background:var(--ok,#1b7f4f);animation:idxDotPulse 1.2s infinite}
@keyframes idxDotPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}


/* ══════ WIZARD ENHANCEMENTS v3 ══════ */

/* ── Animations supplémentaires ── */
@keyframes shake{0%,100%{transform:translateX(0)}15%,45%,75%{transform:translateX(-6px)}30%,60%{transform:translateX(6px)}}
.shake{animation:shake .4s var(--eo) both!important}
@keyframes rippleOut{to{transform:scale(5);opacity:0}}
.idx-choice-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);pointer-events:none;transform:scale(0);animation:rippleOut .55s ease forwards}
@keyframes chipPop{0%{transform:scale(.8) translateY(0)}55%{transform:scale(1.1) translateY(-3px)}100%{transform:scale(1) translateY(-2px)}}
@keyframes budgetPop{0%{transform:scale(.95);opacity:.5}100%{transform:scale(1);opacity:1}}
.idx-budget-display.bump{animation:budgetPop .28s var(--eo) both}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes fieldOkIn{from{opacity:0;transform:scaleX(0);transform-origin:left}to{opacity:1;transform:scaleX(1)}}
@keyframes tagIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ── Draft banner ── */
.idx-draft-banner{display:none;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(255,77,31,.07),rgba(255,138,80,.04));border:1px solid rgba(255,77,31,.18);border-radius:14px;padding:.85rem 1.2rem;margin-bottom:1.5rem}
.idx-draft-banner.on{display:flex;animation:slideDown .35s var(--eo) both}
.idx-draft-banner>span{flex:1;font-size:.82rem;color:var(--ink);line-height:1.4}
.idx-draft-banner strong{color:var(--acc)}
.idx-draft-restore{padding:.38rem 1rem;background:var(--acc);color:#fff;border:none;border-radius:999px;font-size:.75rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap}
.idx-draft-restore:hover{background:#e63d0e}
.idx-draft-clear{background:none;border:none;color:var(--mute);font-size:.75rem;cursor:pointer;font-family:inherit;text-decoration:underline;white-space:nowrap;transition:color .2s}
.idx-draft-clear:hover{color:var(--ink)}

/* ── Inline validation messages ── */
.idx-field-err{font-size:.72rem;color:var(--err,#b91c1c);margin-top:5px;display:none;animation:slideDown .22s var(--eo) both}
.idx-field-err.on{display:block}
.idx-field-ok-msg{font-size:.72rem;color:var(--ok,#1b7f4f);margin-top:5px;display:none}
.idx-field-ok-msg.on{display:block}

/* ── Tag / Keyword input ── */
.idx-tags-wrap{min-height:52px;padding:.45rem .6rem;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);display:flex;flex-wrap:wrap;gap:5px;align-items:center;cursor:text;transition:border-color .22s,box-shadow .22s}
.idx-tags-wrap:focus-within{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(11,11,11,.05)}
.idx-tag-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 5px 3px 11px;background:var(--ink);color:#fff;border-radius:999px;font-size:.75rem;font-weight:600;animation:tagIn .25s var(--eo) both}
.idx-tag-pill button{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;padding:0 2px;line-height:1;font-size:15px;transition:color .15s;display:flex;align-items:center}
.idx-tag-pill button:hover{color:#fff}
.idx-tags-text{border:none;outline:none;background:transparent;font-family:inherit;font-size:.88rem;color:var(--ink);flex:1;min-width:80px;padding:.3rem .3rem;line-height:1.4}

/* ── Réseaux sociaux platform row ── */
.idx-platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:580px){.idx-platform-grid{grid-template-columns:1fr}}
.idx-platform-field{position:relative}
.idx-platform-field .pf-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:15px;line-height:1;pointer-events:none}
.idx-platform-field input{padding-left:40px!important}

/* ── Stat boxes (reach / audience) ── */
.idx-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media(max-width:500px){.idx-stat-grid{grid-template-columns:1fr 1fr}}
.idx-stat-box{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:.9rem .5rem;text-align:center}
.idx-stat-box input{border:none;outline:none;background:transparent;font-size:1.3rem;font-weight:800;color:var(--ink);text-align:center;width:100%;font-family:inherit;padding:0}
.idx-stat-box input::placeholder{font-weight:400;font-size:.9rem;color:var(--line)}
.idx-stat-box .stat-lbl{display:block;font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin-top:3px}

/* ── Image / logo URL preview ── */
.idx-url-preview{width:100%;height:100px;border-radius:12px;background:var(--bg);border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .3s;margin-top:8px}
.idx-url-preview.has-img{border-style:solid;border-color:var(--line)}
.idx-url-preview img{width:100%;height:100%;object-fit:cover}
.idx-url-preview .up-ph{font-size:.78rem;color:var(--mute);text-align:center;padding:1rem}

/* ── Logo abbr live preview ── */
.idx-logo-preview-strip{display:flex;align-items:center;gap:12px;padding:.85rem 1.1rem;background:var(--bg);border:1px solid var(--line);border-radius:14px;margin-top:8px}
.idx-logo-abbr-box{width:44px;height:44px;border-radius:13px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;color:#fff;transition:all .35s var(--eo);flex-shrink:0}
.idx-logo-meta{flex:1}
.idx-logo-meta strong{display:block;font-size:.9rem;font-weight:700;color:var(--ink);transition:all .2s}
.idx-logo-meta span{font-size:.72rem;color:var(--mute)}

/* ── Fancy toggle ── */
.idx-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:.9rem 1.1rem;background:var(--bg);border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .2s}
.idx-toggle-row:hover{border-color:var(--line-2,#b4aca4)}
.idx-toggle-row.active{border-color:var(--acc);background:rgba(255,77,31,.03)}
.idx-toggle-info{flex:1}
.idx-toggle-info strong{display:block;font-size:.88rem;font-weight:700;color:var(--ink)}
.idx-toggle-info span{font-size:.75rem;color:var(--mute)}
.idx-sw{position:relative;width:42px;height:23px;flex-shrink:0}
.idx-sw input{opacity:0;width:0;height:0;position:absolute}
.idx-sw-track{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:background .25s;cursor:pointer}
.idx-sw-track::before{content:'';position:absolute;width:17px;height:17px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .25s var(--eo)}
.idx-sw input:checked~.idx-sw-track{background:var(--acc)}
.idx-sw input:checked~.idx-sw-track::before{transform:translateX(19px)}

/* ── CGU / acceptance ── */
.idx-accept{display:flex;align-items:flex-start;gap:12px;padding:1rem 1.2rem;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;transition:border-color .2s,background .2s}
.idx-accept.checked{border-color:var(--ok,#1b7f4f);background:rgba(27,127,79,.03)}
.idx-accept input[type=checkbox]{width:19px;height:19px;flex-shrink:0;margin-top:2px;cursor:pointer;accent-color:var(--ok,#1b7f4f);border-radius:5px}
.idx-accept-txt{font-size:.82rem;color:var(--mute);line-height:1.55}
.idx-accept-txt a{color:var(--acc);font-weight:600;text-decoration:none}
.idx-accept-txt a:hover{text-decoration:underline}

/* ── Confetti canvas ── */
#wizConfetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9990}

/* ── Preview enhancements ── */
.pwiz-preview-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1rem}
.pwiz-preview-meta-item{padding:.55rem .8rem;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.pwiz-preview-meta-item .pm-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);margin-bottom:2px}
.pwiz-preview-meta-item .pm-val{font-size:.8rem;font-weight:700;color:var(--ink)}
.swiz-preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:1.2rem;position:relative;z-index:1}
.swiz-preview-stat{padding:.6rem .7rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:10px}
.swiz-preview-stat .ss-lbl{font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:2px}
.swiz-preview-stat .ss-val{font-size:.9rem;font-weight:800;color:#fff}

/* ── Swiz preview budget ── */
.swiz-preview-budget{margin-top:1.2rem;padding:.8rem 1rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;position:relative;z-index:1}
.swiz-preview-budget .sb-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.3);margin-bottom:3px}
.swiz-preview-budget .sb-val{font-size:1.6rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}

/* ── Format hint ── */
.idx-hint{font-size:.72rem;color:var(--mute);margin-top:5px;line-height:1.4}
.idx-hint strong{color:var(--ink)}

/* ── Slider custom fill ── */
.idx-slider-wrap{position:relative;margin:1rem 0 .5rem}
.idx-slider-track{height:7px;border-radius:999px;background:var(--line);position:relative;overflow:visible;cursor:pointer}
.idx-slider-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--acc),#ff8a50);border-radius:999px;pointer-events:none;transition:width .1s}

/* ── Frequency chips mini ── */
.idx-freq-chips{display:flex;gap:7px;flex-wrap:wrap}
.idx-freq-chip{padding:.42rem 1rem;border:1.5px solid var(--line);border-radius:999px;font-size:.78rem;font-weight:500;cursor:pointer;background:var(--bg);color:var(--ink);transition:all .2s var(--eo);user-select:none}
.idx-freq-chip:hover{border-color:var(--ink)}
.idx-freq-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── Conditional panel ── */
.idx-conditional{overflow:hidden;max-height:0;transition:max-height .4s var(--eo),opacity .3s;opacity:0}
.idx-conditional.open{max-height:600px;opacity:1}

/* ── Divider ── */
.idx-divider{height:1px;background:var(--line);margin:1.5rem 0;border:none}

/* ── Contact strip (step 5 project) ── */
.idx-contact-strip{display:flex;align-items:center;gap:12px;padding:1rem 1.2rem;background:var(--bg);border:1px solid var(--line);border-radius:14px}
.idx-contact-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#ff8a50);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:#fff;flex-shrink:0;transition:all .3s}

/* ═══════════════════════════════════════════
   PROFILE — REDESIGN COMPLET
   ═══════════════════════════════════════════ */
.prf-hero{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:22px 24px;margin-bottom:14px;gap:14px}
.prf-hero-main{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.prf-avatar-wrap{position:relative;flex-shrink:0}
.prf-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;font-size:25px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;letter-spacing:-.02em;cursor:pointer;transition:opacity .2s,transform .2s var(--eo);user-select:none}
.prf-avatar:hover{opacity:.85;transform:scale(1.04)}
.prf-avatar-edit{position:absolute;bottom:-2px;right:-2px;width:22px;height:22px;background:var(--ink);color:#fff;border:none;border-radius:50%;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--eo);padding:0}
.prf-avatar-edit:hover{transform:scale(1.2)}
.prf-hero-info{flex:1;min-width:0}
.prf-hero-name{font-family:'Instrument Serif',serif;font-size:21px;font-weight:400;letter-spacing:-.02em;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prf-hero-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.prf-role-pill{font-size:11px;font-weight:700;padding:3px 10px;background:var(--ink);color:#fff;border-radius:100px;letter-spacing:.01em}
.prf-verified-pill{font-size:11px;font-weight:700;padding:3px 10px;background:#e8f5e9;color:#2e7d32;border-radius:100px}
.prf-unverified-pill{font-size:11px;font-weight:700;padding:3px 10px;background:#fff3e0;color:#e65100;border-radius:100px}
.prf-stats-row{display:flex;gap:20px}
.prf-stat{display:flex;flex-direction:column}
.prf-stat span{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.prf-stat small{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
/* Completion ring */
.prf-ring-wrap{position:relative;width:76px;height:76px;flex-shrink:0}
.prf-ring-svg{width:76px;height:76px}
.prf-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;letter-spacing:-.02em;color:var(--acc)}
#prfRingCircle{transition:stroke-dashoffset .9s var(--eo)}
/* Missing bar */
.prf-missing-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff8f2;border:1px solid #ffe0cc;border-radius:var(--rad);padding:11px 16px;margin-bottom:14px;font-size:13px}
.prf-missing-bar.hidden{display:none}
.prf-missing-label{font-weight:700;color:var(--acc);white-space:nowrap;font-size:12px}
#prfMissingChips{display:flex;flex-wrap:wrap;gap:6px}
.prf-missing-chip{font-size:11.5px;padding:3px 10px;background:var(--soft);border-radius:100px;color:var(--mute);cursor:pointer;border:1px dashed var(--line);transition:all .15s}
.prf-missing-chip:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
/* Tabs */
.prf-tabs{display:flex;gap:2px;background:var(--soft);border-radius:calc(var(--rad) + 2px);padding:4px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.prf-tabs::-webkit-scrollbar{display:none}
.prf-tab{flex:none;font-size:12.5px;font-weight:600;padding:8px 14px;border:none;border-radius:var(--rad);background:transparent;color:var(--mute);cursor:pointer;white-space:nowrap;transition:all .2s var(--eo)}
.prf-tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.09)}
.prf-tab:hover:not(.on){color:var(--ink);background:rgba(255,255,255,.5)}
/* Panels */
.prf-panel{display:none}
.prf-panel.on{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:24px;animation:panelIn .22s var(--eo)}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Form layout */
.prf-section-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.prf-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
@media(max-width:600px){.prf-field-grid{grid-template-columns:1fr}}
.prf-fg{display:flex;flex-direction:column;gap:5px}
.prf-fg label{font-size:12px;font-weight:600;color:var(--ink)}
.prf-fg input,.prf-fg select,.prf-fg textarea{padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;background:var(--bg);color:var(--ink);font-family:inherit;transition:border-color .2s,background .2s;outline:none;resize:vertical;width:100%;box-sizing:border-box}
.prf-fg input:focus,.prf-fg select:focus,.prf-fg textarea:focus{border-color:var(--acc);background:#fff}
.prf-fg input:disabled{opacity:.45;cursor:not-allowed;background:var(--soft)}
.prf-hint{font-size:11px;color:var(--mute);line-height:1.4}
.prf-req{color:var(--err)}
.prf-char-count{font-size:11px;color:var(--mute);text-align:right;margin-top:2px}
/* Icon prefix inputs */
.prf-input-icon{position:relative}
.prf-input-icon-pfx{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:var(--mute);pointer-events:none;z-index:1}
.prf-input-icon input{padding-left:32px}
/* Form footer */
.prf-form-footer{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.prf-save-status{font-size:12px;font-weight:600;transition:opacity .3s}
.prf-save-status.ok{color:var(--ok)}
.prf-save-status.err{color:var(--err)}
/* Bank card */
.prf-bank-card{position:relative;background:linear-gradient(135deg,#0b0b0b 0%,var(--acc-2) 100%);border-radius:16px;padding:22px 20px 18px;color:#fff;overflow:hidden;margin-bottom:4px;min-height:140px}
.prf-bank-card-shine{position:absolute;top:-50px;right:-50px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05)}
.prf-bank-card-shine2{position:absolute;bottom:-30px;left:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.04)}
.prf-bank-card-logo{font-family:'Instrument Serif',serif;font-size:17px;font-weight:400;opacity:.55;margin-bottom:22px;letter-spacing:.05em}
.prf-bank-iban-display{font-size:15px;font-weight:700;letter-spacing:.18em;margin-bottom:22px;font-family:monospace;opacity:.95}
.prf-bank-card-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.prf-bank-card-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:3px}
.prf-bank-card-val{font-size:12px;font-weight:700;letter-spacing:.02em}
.prf-bank-notice{background:var(--soft);border-radius:10px;padding:11px 14px;font-size:12px;color:var(--mute);margin-top:14px;line-height:1.55}
/* Preferences toggles */
.prf-toggle-list{display:flex;flex-direction:column;gap:6px}
.prf-toggle-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;background:var(--bg);border:1px solid var(--line);border-radius:10px;transition:background .15s}
.prf-toggle-item:hover{background:#fff}
.prf-toggle-title{font-size:13px;font-weight:600;margin-bottom:2px}
.prf-toggle-sub{font-size:11.5px;color:var(--mute);line-height:1.35}
.prf-sw{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.prf-sw input{opacity:0;width:0;height:0}
.prf-sw span{position:absolute;inset:0;background:#d4d4d4;border-radius:100px;cursor:pointer;transition:background .2s}
.prf-sw span::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s var(--eo);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.prf-sw input:checked+span{background:var(--acc-2)}
.prf-sw input:checked+span::after{transform:translateX(18px)}
/* Password */
.prf-pwd-wrap{position:relative}
.prf-pwd-wrap input{padding-right:44px}
.prf-pwd-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:14px;padding:2px;opacity:.45;transition:opacity .15s;line-height:1}
.prf-pwd-eye:hover{opacity:1}
.prf-pwd-strength{display:flex;gap:3px;margin-top:5px}
.prf-pwd-bar{height:3px;flex:1;border-radius:100px;background:var(--line);transition:background .3s}
/* Sessions */
.prf-sessions{display:flex;flex-direction:column;gap:6px}
.prf-session-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.prf-session-icon{font-size:20px;flex-shrink:0}
.prf-session-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;margin-bottom:2px}
.prf-session-current{font-size:10px;background:#e8f5e9;color:#2e7d32;padding:2px 8px;border-radius:100px;font-weight:700}
.prf-session-meta{font-size:11.5px;color:var(--mute)}
.prf-session-revoke{margin-left:auto;font-size:11px;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer;color:var(--mute);flex-shrink:0;white-space:nowrap;transition:all .15s}
.prf-session-revoke:not(:disabled):hover{border-color:var(--err);color:var(--err)}
/* Danger zone */
.prf-danger-box{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;background:#fef6f5;border:1px solid #f3b8b0;border-radius:12px}
.prf-danger-title{font-size:13px;font-weight:700;color:var(--err);margin-bottom:3px}
.prf-danger-sub{font-size:12px;color:var(--mute);line-height:1.45;max-width:340px}
.prf-danger-btn{flex-shrink:0;color:var(--err)!important;border:1.5px solid var(--err)!important;font-weight:700}
.prf-danger-btn:hover{background:var(--err)!important;color:#fff!important}
/* Role note */
.prf-role-note{font-size:12.5px;color:var(--mute);background:var(--soft);padding:10px 14px;border-radius:10px;margin-bottom:16px;line-height:1.5}
/* Dark mode overrides */
[data-theme="dark"] .prf-hero,[data-theme="dark"] .prf-panel.on{background:#1a1a1a;border-color:#333}
[data-theme="dark"] .prf-toggle-item{background:#111;border-color:#333}
[data-theme="dark"] .prf-toggle-item:hover{background:#1a1a1a}
[data-theme="dark"] .prf-session-item{background:#111;border-color:#333}
[data-theme="dark"] .prf-fg input,[data-theme="dark"] .prf-fg select,[data-theme="dark"] .prf-fg textarea{background:#111;border-color:#333;color:#f0f0f0}
[data-theme="dark"] .prf-fg input:focus,[data-theme="dark"] .prf-fg select:focus,[data-theme="dark"] .prf-fg textarea:focus{background:#1a1a1a}
[data-theme="dark"] .prf-bank-notice{background:#222;color:#aaa}
[data-theme="dark"] .prf-tabs{background:#111}
[data-theme="dark"] .prf-tab.on{background:#1a1a1a;color:#f0f0f0}
[data-theme="dark"] .prf-missing-bar{background:#2a1800;border-color:#7c3800}

/* ═════════════════════════════════════════════
   EXPLORER PREMIUM CARDS
   ═════════════════════════════════════════════ */
.disc-card { transition: all 0.4s var(--eo); background: #fff; border: 1px solid var(--line); }
.disc-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -15px rgba(0,0,0,0.12); border-color: var(--acc); }
.disc-card:hover .cmp-check { opacity: 1; }

.fund-bar-track { height: 6px; background: var(--soft); border-radius: 10px; overflow: hidden; }
.fund-bar-fill { height: 100%; background: linear-gradient(90deg, var(--acc), #ff8c42); border-radius: 10px; transition: width 1s var(--eo); }

/* Dark mode overrides for cards */
[data-theme="dark"] .disc-card { background: #1a1a1a; border-color: #333; }
[data-theme="dark"] .disc-card:hover { border-color: var(--acc); box-shadow: 0 30px 60px -15px rgba(0,0,0,0.4); }
[data-theme="dark"] [style*="background:var(--surface-2)"] { background: #111 !important; border-color: #333 !important; }
[data-theme="dark"] .fund-bar-track { background: #333; }

/* ═════════════════════════════════════════════
   DUAL-MODE SELECTOR & VISUAL EDITING
   ═════════════════════════════════════════════ */
.mode-toggle-wrap { display: flex; justify-content: center; margin-bottom: 2rem; position: relative; z-index: 5; }
.mode-toggle { display: flex; background: var(--soft); padding: 4px; border-radius: 999px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.mode-btn { padding: 8px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mute); transition: all 0.3s var(--eo); }
.mode-btn.on { background: var(--ink); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.mode-btn:not(.on):hover { color: var(--ink); background: rgba(255,255,255,0.5); }

/* Editable fields in Visual Mode */
.visual-editor { padding: 0 !important; background: var(--bg) !important; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); }
.ve-hero { background: var(--dark); color: #fff; padding: 60px 40px; position: relative; overflow: hidden; }
.ve-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%); }
.ve-hero__content { position: relative; z-index: 2; }
.ve-badge { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); margin-bottom: 12px; }

.ve-progress-wrap { padding: 30px 40px; background: #fff; border-bottom: 1px solid var(--line); }
.ve-progress-bar { height: 8px; background: var(--soft); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.ve-progress-fill { height: 100%; background: var(--acc); border-radius: 99px; width: 0; transition: width 1s var(--eo); }

.ve-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.ve-stat { background: #fff; padding: 24px; text-align: center; }
.ve-stat__val { font-family: var(--serif); font-size: 24px; color: var(--ink); display: block; margin-bottom: 4px; }
.ve-stat__lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute); }

.ve-body { padding: 40px; background: #fff; }
.ve-section { margin-bottom: 32px; }
.ve-section__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mute); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.ve-section__title::after { content: ''; height: 1px; flex: 1; background: var(--line); }

.editable { position: relative; transition: all 0.2s; cursor: pointer; border: 1px solid transparent; border-radius: 6px; }
.editable:hover { background: rgba(255,77,31,0.03); border-color: rgba(255,77,31,0.2); }
.editable::after { content: '✎'; position: absolute; top: -10px; right: -10px; background: var(--acc); color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: all 0.2s; z-index: 10; }
.editable:hover::after { opacity: 1; transform: scale(1); }

.editing { background: #fff !important; border-color: var(--acc) !important; box-shadow: 0 0 0 4px rgba(255,77,31,0.1) !important; outline: none; cursor: text; }

/* Auto-save indicator */
.save-indicator { position: fixed; bottom: 30px; right: 30px; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; transform: translateY(100px); opacity: 0; transition: all 0.4s var(--eo); z-index: 1000; box-shadow: var(--shadow-lg); }
.save-indicator.on { transform: translateY(0); opacity: 1; }
.save-indicator .spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ═══════════════════════════════════════════
   VISUAL EDITOR PREMIUM STYLES
   ═══════════════════════════════════════════ */
.visual-editor {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  line-height: 1.6 !important;
}

.visual-editor .wrap {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.visual-editor .hero {
  padding: 60px 0 40px;
  position: relative;
}
.visual-editor .hero-tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--acc);
  margin-bottom: 24px;
  display: block;
}
.visual-editor .hero-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  font-weight: 400;
}
.visual-editor .hero-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.visual-editor .hero-summary {
  font-size: 1.2rem;
  color: var(--mute);
  max-width: 45ch;
  line-height: 1.4;
}

.visual-editor .bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

.visual-editor .card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--eo);
}
.visual-editor .card:hover {
  border-color: var(--acc);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08);
}

.visual-editor .card-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mute);
  margin-bottom: 20px;
  display: block;
}

.visual-editor .cell-vision { grid-column: span 8; grid-row: span 3; }
.visual-editor .cell-stats { grid-column: span 4; grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; background: transparent; border: none; }
.visual-editor .cell-stats:hover { transform: none; box-shadow: none; }

.visual-editor .stat-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all 0.3s var(--ease);
}
.visual-editor .stat-box:hover { border-color: var(--ink); transform: translateY(-3px); }
.visual-editor .stat-val { font-family: var(--serif); font-size: 2.2rem; line-height: 1; margin-bottom: 6px; font-weight: 400; }
.visual-editor .stat-lbl { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; color: var(--mute); letter-spacing: 0.08em; }

.visual-editor .cell-funding { grid-column: span 4; grid-row: span 1; background: var(--ink); color: #fff; border: none; }
.visual-editor .cell-funding .card-label { color: rgba(255,255,255,0.5); }
.visual-editor .cell-funding .fund-val { font-family: var(--serif); font-size: 2.8rem; line-height: 1; margin-bottom: 8px; color: #fff; font-weight: 400; }

.visual-editor .cell-needs { grid-column: span 5; grid-row: span 2; }
.visual-editor .cell-media { grid-column: span 7; grid-row: span 2; padding: 0; min-height: 200px; }
.visual-editor .cell-media img { width: 100%; height: 100%; object-fit: cover; }

.visual-editor .cell-fiscal { grid-column: span 4; display: flex; align-items: center; gap: 16px; }
.visual-editor .cell-social { grid-column: span 8; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 16px; }

.visual-editor .vision-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink);
}
.visual-editor .vision-text p { margin-bottom: 1.2rem; }

.visual-editor .need-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.visual-editor .need-icon {
  width: 36px;
  height: 36px;
  background: var(--soft);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.visual-editor .need-content h4 { font-family: var(--sans); font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }
.visual-editor .need-content p { font-size: 0.85rem; color: var(--mute); }

.visual-editor .social-pill {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s var(--ease);
}
.visual-editor .social-pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }

/* Placeholder for empty fields */
.visual-editor .placeholder {
  color: var(--acc);
  opacity: 0.6;
  font-style: italic;
  font-family: var(--sans);
  font-size: 0.85rem;
  border: 1px dashed var(--acc);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

@media (max-width: 900px) {
  .visual-editor .bento { grid-template-columns: 1fr; }
  .visual-editor .cell-vision, .visual-editor .cell-needs, .visual-editor .cell-media, .visual-editor .cell-stats, .visual-editor .cell-fiscal, .visual-editor .cell-social, .visual-editor .cell-funding {
    grid-column: span 12;
    grid-row: auto;
  }
}