*{box-sizing:border-box;margin:0}
:root{--green:#16a36a;--amber:#d98a00;--red:#d6455d;--blue:#3b6fe0}
/* ===== Startup Moderna — 4 variações ===== */
body[data-theme^=startup]{--radius:18px;--pad:20px;--kpi-w:700;--kpi-size:28px;--font:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;--head:var(--font);--brand-ink:#fff;--side-strong:#fff}
/* A · Índigo Aurora */
body[data-theme=startup]{--bg:#f3f4fb;--surface:#fff;--surface2:#eef0fb;--border:#e3e6f5;--text:#14172b;--muted:#6b7090;--brand:#5b4df0;--accent:#5b4df0;--grad:linear-gradient(135deg,#5b4df0,#8a5cf6);--shadow:0 6px 24px -10px rgba(60,60,160,.25);--shadow-h:0 14px 30px -12px rgba(60,60,160,.35);--side-bg:#14172b;--side-text:#a5a9c9;--side-act-bg:var(--grad);--side-act:#fff;--c1:#5b4df0;--c2:#22c1a6;--c3:#ff8a5b;--c4:#f2b84b;--c5:#8a93c9;--hero:radial-gradient(900px 500px at 10% 0,#5b4df0 0,transparent 60%),radial-gradient(700px 400px at 100% 100%,#22c1a6 0,transparent 55%),#14172b}
/* B · Noturno Neon (dark) */
body[data-theme=startup-neon]{--bg:#090c16;--surface:#121726;--surface2:#1a2036;--border:#232b45;--text:#e8ecff;--muted:#8d96ba;--brand:#22b8e6;--accent:#22d3ee;--grad:linear-gradient(135deg,#0ea5e9,#7c3aed);--shadow:0 0 0 1px rgba(34,211,238,.04);--shadow-h:0 0 28px -6px rgba(34,211,238,.45);--side-bg:#060810;--side-text:#7f89b0;--side-act-bg:rgba(34,211,238,.12);--side-act:#67e8f9;--c1:#22d3ee;--c2:#a78bfa;--c3:#f472b6;--c4:#facc15;--c5:#64748b;--radius:16px;--green:#34d399;--amber:#fbbf24;--red:#fb7185;--blue:#60a5fa;--hero:radial-gradient(800px 500px at 0 0,rgba(124,58,237,.55) 0,transparent 60%),radial-gradient(700px 400px at 100% 100%,rgba(34,211,238,.4) 0,transparent 55%),#060810}
/* C · Fintech Menta (claro, suave) */
body[data-theme=startup-mint]{--bg:#f0f8f4;--surface:#fff;--surface2:#e8f4ee;--border:#d6eadf;--text:#0e2a21;--muted:#5d7d70;--brand:#0f9d6e;--accent:#0f9d6e;--grad:linear-gradient(135deg,#0f9d6e,#2cc8a0);--shadow:0 4px 18px -10px rgba(15,157,110,.3);--shadow-h:0 14px 28px -12px rgba(15,157,110,.4);--side-bg:#fff;--side-text:#5d7d70;--side-act-bg:#dff4ea;--side-act:#0a6a4a;--side-strong:#0e2a21;--c1:#0f9d6e;--c2:#3b82f6;--c3:#f59e0b;--c4:#8b5cf6;--c5:#9db3a9;--radius:24px;--hero:radial-gradient(800px 500px at 100% 0,#2cc8a0 0,transparent 60%),#0b6b4a}
/* D · Coral Quente (acolhedor) */
body[data-theme=startup-sunset]{--bg:#fff7f1;--surface:#fff;--surface2:#fdeee3;--border:#f3e0d3;--text:#2b1a13;--muted:#8c7062;--brand:#f0572d;--accent:#f0572d;--grad:linear-gradient(135deg,#f0572d,#ff9a3c);--shadow:0 6px 20px -12px rgba(240,87,45,.35);--shadow-h:0 14px 28px -12px rgba(240,87,45,.45);--side-bg:#2b1a13;--side-text:#cfb4a5;--side-act-bg:var(--grad);--side-act:#fff;--c1:#f0572d;--c2:#2f9e8f;--c3:#ffb02e;--c4:#7a5cff;--c5:#cbaa9a;--radius:20px;--head:'Avenir Next','Nunito','Trebuchet MS',var(--font);--hero:radial-gradient(800px 500px at 0 100%,#ff9a3c 0,transparent 60%),radial-gradient(600px 400px at 100% 0,#f0572d 0,transparent 55%),#2b1a13}

body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-.01em}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.themebar{position:sticky;top:0;z-index:50;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;padding:8px 12px;background:#0d0f1a;color:#cfd3ee;font-size:12px}
.themebar button{border:1px solid #2c3050;background:transparent;color:#cfd3ee;padding:5px 11px;border-radius:99px}
.themebar button.on{background:#fff;color:#0d0f1a;border-color:#fff;font-weight:600}
.themebar .rec{background:#5b4df0;border-color:#5b4df0;color:#fff}
.demo-note{background:color-mix(in srgb,var(--amber) 14%,var(--surface));border-bottom:1px solid color-mix(in srgb,var(--amber) 35%,var(--border));font-size:12px;padding:6px 14px;text-align:center;color:var(--text)}
.app{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 80px)}
.side{background:var(--side-bg);color:var(--side-text);padding:18px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:41px;height:calc(100vh - 41px);border-right:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;color:var(--side-strong);font-family:var(--head);font-weight:700;font-size:15px}
.logo{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;overflow:hidden;font-weight:800;font-size:13px}
.logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.nav-i{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:calc(var(--radius) - 4px);color:var(--side-text);background:none;border:0;text-align:left;width:100%;font-weight:500}
.nav-i:hover{color:var(--side-act)}
.nav-i.on{background:var(--side-act-bg);color:var(--side-act)}
.nav-i svg,.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side .sp{flex:1}
.who{padding:10px 12px;font-size:12px;color:var(--side-text);border-top:1px solid color-mix(in srgb,var(--side-text) 25%,transparent);margin-top:8px}
.who b{display:block;color:var(--side-strong);font-size:13px}
main{padding:24px clamp(14px,3vw,36px) 40px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.top h1{font-size:24px}
.top p{color:var(--muted);margin-top:2px}
.grid{display:grid;gap:14px}
.g-kpi{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g-2{grid-template-columns:1.4fr 1fr}.g-2e{grid-template-columns:1fr 1fr}.g-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--pad);box-shadow:var(--shadow);min-width:0}
body[data-theme^=startup] .card{transition:transform .18s,box-shadow .18s}
body[data-theme^=startup] .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-h)}
.card h3{font-size:14px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.lbl{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kpi .v{font-family:var(--head);font-size:var(--kpi-size);font-weight:var(--kpi-w);letter-spacing:-.02em;margin:6px 0 4px}
body[data-theme^=startup] .kpi .v{background:linear-gradient(90deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi.feat{background:var(--brand);color:var(--brand-ink)}
body[data-theme^=startup] .kpi.feat{background:var(--grad)}
.kpi.feat .lbl,.kpi.feat .delta{color:inherit;opacity:.85}
.kpi.feat .v{-webkit-text-fill-color:currentColor;background:none;color:inherit}
.delta{font-size:12px;font-weight:600}.delta.up{color:var(--green)}.delta.down{color:var(--red)}
.est{font-size:10px;text-transform:uppercase;letter-spacing:.06em;border:1px dashed currentColor;border-radius:99px;padding:1px 7px;color:var(--amber);font-weight:700;white-space:nowrap}
.kpi.feat .est{color:#fff}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;background:color-mix(in srgb,var(--pc) 14%,transparent);color:var(--pc)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc)}
.p-ok{--pc:var(--green)}.p-warn{--pc:var(--amber)}.p-neg{--pc:var(--red)}.p-info{--pc:var(--blue)}.p-mute{--pc:var(--muted)}
.btn{border:1px solid var(--border);background:var(--surface);padding:9px 14px;border-radius:calc(var(--radius) - 4px);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn.pri{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
body[data-theme^=startup] .btn.pri{background:var(--grad);border:0;box-shadow:0 6px 16px -6px var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:5px 10px;font-size:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--surface);padding:6px 12px;border-radius:99px;font-size:13px}
.chip.on{background:var(--text);color:var(--surface);border-color:var(--text)}
body[data-theme^=startup] .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
input,select{background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) - 5px);padding:10px 12px;width:100%;min-height:42px;outline:none}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
input:disabled,select:disabled{background:var(--surface2);color:var(--muted)}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.form{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}.form .full{grid-column:1/-1}
.sec{font-family:var(--head);font-weight:600;font-size:15px;margin:6px 0 2px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr{cursor:pointer}tbody tr:hover{background:var(--surface2)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tw{overflow-x:auto}
tfoot td{font-weight:700;border-bottom:0;background:var(--surface2)}
.muted{color:var(--muted)}.small{font-size:12px}
.hb{display:grid;gap:10px}
.hb .r{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:13px}
.hb .bar{height:9px;background:var(--surface2);border-radius:99px;overflow:hidden}.hb .bar i{display:block;height:100%;border-radius:99px;background:var(--c1)}
body[data-theme^=startup] .hb .bar i{background:linear-gradient(90deg,var(--c1),var(--c2))}
.rank{display:grid;gap:8px}.rank .r{display:flex;align-items:center;gap:10px}
.rank .n{width:24px;height:24px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-weight:700;font-size:12px}
.rank .r:first-child .n{background:var(--accent);color:#fff}
.rank .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
svg.ch{width:100%;height:auto;display:block;overflow:visible}
.ch text{fill:var(--muted);font-size:11px;font-family:var(--font)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.wf .row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--border)}
.wf .row.tot{border-bottom:0;border-top:2px solid var(--text);font-weight:700;font-size:16px;margin-top:4px;padding-top:12px}
.wf .neg{color:var(--red)}
.stack{display:flex;height:12px;border-radius:99px;overflow:hidden;margin:10px 0 4px;background:var(--surface2)}
.cards-m{display:none}
.scard{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:14px;display:grid;gap:8px;cursor:pointer}
.scard .l1{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.drawer-bg{position:fixed;inset:0;background:rgba(10,12,30,.45);z-index:80;display:flex;justify-content:flex-end}
.drawer{width:min(520px,100%);background:var(--bg);height:100%;overflow:auto;padding:22px;display:grid;gap:14px;align-content:start}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 10px;font-size:13px}.kv dt{color:var(--muted)}
code,.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--surface2);padding:1px 6px;border-radius:5px}
.calc{border:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.calc .big{font-family:var(--head);font-size:26px;font-weight:700}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
.tab{background:none;border:0;padding:10px 14px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.tab.on{color:var(--text);border-color:var(--accent)}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);padding:0}
.swatch.on{box-shadow:0 0 0 2px var(--text)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--text);color:var(--surface);padding:11px 18px;border-radius:99px;z-index:99;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.bnav{display:none}
.login{min-height:calc(100vh - 80px);display:grid;grid-template-columns:1.1fr 1fr}
.hero{background:var(--side-bg);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
body[data-theme^=startup] .hero{background:var(--hero);color:#fff}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.1;max-width:14ch}
.hero p{opacity:.8;max-width:42ch;margin-top:12px}
.hero .mini{display:flex;gap:10px;flex-wrap:wrap}.hero .mini span{border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:99px;padding:5px 12px;font-size:12px}
.lcard{display:grid;place-items:center;padding:32px 20px}
.lbox{width:min(400px,100%);display:grid;gap:14px}
.gbtn{display:flex;gap:10px;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);border-radius:calc(var(--radius) - 3px);padding:13px;font-weight:600;font-size:15px;box-shadow:var(--shadow);width:100%}
.gbtn b{font-size:18px;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rec-box{background:var(--surface);border-radius:var(--radius);padding:20px;max-width:720px;margin:20px auto;border:1px solid var(--border)}
.rec-box li{margin:6px 0 6px 18px}
@media(max-width:980px){.g-2,.g-2e,.g-3{grid-template-columns:1fr}.login{grid-template-columns:1fr}.hero{padding:28px;min-height:240px}}
@media(max-width:820px){
 .app{grid-template-columns:1fr}.side{display:none}
 .bnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--surface);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
 .bnav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--muted);padding:6px 8px;min-width:50px;font-weight:600}
 .bnav button.on{color:var(--accent)}
 .bnav .add{background:var(--accent);color:#fff;border-radius:50%;width:48px;height:48px;min-width:0;margin-top:-22px;justify-content:center;box-shadow:0 8px 18px -6px var(--accent)}
 .bnav .add svg{width:22px;height:22px}
 main{padding:16px 14px 100px}
 .form{grid-template-columns:1fr}
 .only-d{display:none}.cards-m{display:grid;gap:10px}
 .g-kpi{grid-template-columns:1fr 1fr}.kpi .v{font-size:calc(var(--kpi-size) - 6px)}
 .hb .r{grid-template-columns:90px 1fr auto}
 .kv{grid-template-columns:110px 1fr}.roles{grid-template-columns:1fr}
 .top h1{font-size:20px}
}
.kpi.feat .muted{color:inherit;opacity:.85}

body[data-theme=startup-neon] input,body[data-theme=startup-neon] select{color-scheme:dark}
body[data-theme=startup-neon] .kpi.feat{color:#fff}
.hero .brand{color:#fff}
body[data-theme^=startup] .kpi.feat .v{background:none;-webkit-text-fill-color:var(--feat-ink,#fff);color:var(--feat-ink,#fff)}
.kpi.feat{color:var(--feat-ink,#fff)}

em{font-style:normal}
/* ===== E · FF Private Banker — identidade da FF (preto + dourado + serifa) ===== */
body[data-theme=startup-ff]{--bg:#0a0a0a;--surface:#131313;--surface2:#1b1a17;--border:#2b2719;--text:#f3f0e7;--muted:#9b9688;--brand:#c4a95b;--accent:#c4a95b;--brand-ink:#0a0a0a;--feat-ink:#0a0a0a;--grad:linear-gradient(135deg,#dcc47f,#a88a3c);--shadow:0 0 0 1px rgba(196,169,91,.03);--shadow-h:0 18px 40px -18px rgba(196,169,91,.35);--side-bg:#070707;--side-text:#8f8a7c;--side-act-bg:rgba(196,169,91,.12);--side-act:#dcc47f;--side-strong:#f3f0e7;--c1:#c4a95b;--c2:#7d6d3f;--c3:#ecdfb5;--c4:#6f9580;--c5:#5b564a;--radius:16px;--green:#62c08f;--amber:#e3b34c;--red:#e26a73;--blue:#7ba3e6;--head:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;--hero:radial-gradient(700px 420px at 15% 0,rgba(196,169,91,.22) 0,transparent 60%),#050505}
body[data-theme=startup-ff] h1,body[data-theme=startup-ff] h2,body[data-theme=startup-ff] h3{font-weight:500;letter-spacing:0}
body[data-theme=startup-ff] .top h1{font-size:34px}
body[data-theme=startup-ff] .card h3{font-size:20px}
body[data-theme=startup-ff] .kpi .v{font-weight:500;font-size:36px;background:linear-gradient(90deg,#f3f0e7,#dcc47f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body[data-theme=startup-ff] .lbl,body[data-theme=startup-ff] th{text-transform:uppercase;letter-spacing:.14em;font-size:10.5px}
body[data-theme=startup-ff] .card{border-color:var(--border)}
body[data-theme=startup-ff] .card:hover{border-color:rgba(196,169,91,.45)}
body[data-theme=startup-ff] .btn{border-radius:2px;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:600}
body[data-theme=startup-ff] .btn.pri{box-shadow:none}
body[data-theme=startup-ff] .chip.on{color:#0a0a0a}
body[data-theme=startup-ff] .logo{background:var(--grad);color:#0a0a0a;border-radius:0;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);padding-bottom:6px;font-family:var(--head);font-size:15px}
body[data-theme=startup-ff] .logo img{background:transparent}
body[data-theme=startup-ff] .brand span{font-family:var(--head);text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:600;line-height:1.5}
body[data-theme=startup-ff] .nav-i{border-radius:2px;letter-spacing:.04em}
body[data-theme=startup-ff] .nav-i.on{box-shadow:inset 2px 0 0 var(--accent)}
body[data-theme=startup-ff] .side{border-right:1px solid #1d1a10}
body[data-theme=startup-ff] .hero h1{font-weight:500;font-size:clamp(34px,5vw,56px);line-height:1.05}
body[data-theme=startup-ff] .hero h1 em,body[data-theme=startup-ff] .top h1 em{font-style:italic;color:#c4a95b}
body[data-theme=startup-ff] .gbtn{border-radius:2px;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
body[data-theme=startup-ff] .stack i,body[data-theme=startup-ff] .hb .bar i{background:var(--grad)}
body[data-theme=startup-ff] .bnav .add{color:#0a0a0a}
body[data-theme=startup-ff] .est{color:#e3b34c}
body[data-theme=startup-ff] input,body[data-theme=startup-ff] select{color-scheme:dark;border-radius:6px}
body[data-theme=startup-ff] .toast{background:var(--accent);color:#0a0a0a}
body[data-theme=startup-ff] .themebar,body[data-theme=startup-ff] .demo-note{background:#000}
body[data-theme=startup-ff] .kpi .v,body[data-theme=startup-ff] .big{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum"}

/* ===== FF Pay — referência: app fintech (folha branca, pílulas, nav flutuante) ===== */
body[data-theme=pay]{--bg:#ececec;--surface:#fff;--surface2:#f5f5f5;--border:#e9e9e9;--text:#111;--muted:#777a80;--brand:#111;--brand-ink:#fff;--accent:#c4a95b;--accent-ink:#111;--grad:#111;--shadow:none;--shadow-h:none;--radius:24px;--pad:20px;--kpi-w:700;--kpi-size:30px;--font:'Outfit','Sofia Sans',system-ui,-apple-system,Segoe UI,sans-serif;--head:var(--font);--side-bg:#ececec;--side-strong:#111;--c1:#111;--c2:#c4a95b;--c3:#8b6cf0;--c4:#3fa86b;--c5:#c4c4c4;--green:#2e9b4f;--amber:#d58b00;--red:#d03b3b;--blue:#4b6fe0;--hero:radial-gradient(700px 420px at 20% 0,rgba(196,169,91,.28) 0,transparent 60%),#0b0b0b}
body[data-theme=pay][data-accent=lime]{--accent:#c9f23c;--c2:#9cc21a}
body[data-theme=pay] h1,body[data-theme=pay] h2,body[data-theme=pay] h3{font-weight:700;letter-spacing:-.01em}
body[data-theme=pay] .card{background:var(--surface2);border:0;box-shadow:none;transition:none}
body[data-theme=pay] .card:hover{transform:none;box-shadow:none}
body[data-theme=pay] .card h3{font-size:16px}
body[data-theme=pay] .kpi .v{color:var(--text)}
body[data-theme=pay] .kpi.feat{background:#111;color:#fff}
body[data-theme=pay] .btn{border-radius:99px;border:0;background:#ececec;font-weight:600}
body[data-theme=pay] .btn.pri{background:#111;color:#fff;box-shadow:none}
body[data-theme=pay] .chip{border:0;background:#f0f0f0;border-radius:99px}
body[data-theme=pay] .chip.on{background:#111;color:#fff}
body[data-theme=pay] input,body[data-theme=pay] select{background:#fff;border:1px solid #e3e3e3;border-radius:16px;min-height:46px}
body[data-theme=pay] .tabs{border:0;gap:8px;padding-bottom:4px}
body[data-theme=pay] .tab{border:0;border-radius:99px;padding:10px 18px;background:transparent;color:var(--muted)}
body[data-theme=pay] .tab.on{background:#111;color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
body[data-theme=pay] th{border:0;text-transform:none;letter-spacing:0;font-size:12px}
body[data-theme=pay] td{border-bottom:1px solid #ebebeb}
body[data-theme=pay] .hb .bar i,body[data-theme=pay] .stack i{background:#111}
body[data-theme=pay] .rank .r:first-child .n{background:#111}
body[data-theme=pay] .est{color:var(--amber);border-style:solid;border-width:1px}
body[data-theme=pay] .themebar select{color:#fff}
body[data-theme=pay] .hero{background:var(--hero);color:#fff}
body[data-theme=pay] .gbtn{border-radius:99px;border:0;background:#f1f1f1;box-shadow:none}
body[data-theme=pay] .drawer{background:#fff}
body[data-theme=pay] .calc{background:#fafafa;border:1.5px dashed #d7d7d7}
body[data-theme=pay] .toast{background:#111;color:#fff}
body[data-theme=pay] .logo{background:#111;color:var(--accent);border-radius:12px}
body.hide-values .amt,body.hide-values .kpi .v,body.hide-values .big,body.hide-values td.num,body.hide-values .hb b,body.hide-values .wf b{filter:blur(8px)}

.pay-rail,.pay-nav,.pay-head,.pay-sheet,.pay-main,.pay{font-family:var(--font)}
.pay{display:grid;grid-template-columns:230px minmax(0,1fr);gap:8px;max-width:1500px;margin:0 auto;padding:14px 18px 24px;min-height:calc(100vh - 80px)}
.pay-rail{position:sticky;top:60px;align-self:start;height:calc(100vh - 90px);display:flex;flex-direction:column;gap:6px;padding:6px 10px 6px 0}
.rail-brand{display:flex;align-items:center;gap:10px;font-weight:700;padding:4px 6px 16px;font-size:15px}
.rail-i{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:12px 16px;border-radius:99px;font-weight:600;color:#4b4e55;text-align:left}
.rail-i:hover{background:#e2e2e2}.rail-i.on{background:#111;color:#fff}
.pay-rail .sp{flex:1}
.pay-cta{border:0;background:#111;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:600;font-size:12px}
.rail-cta{flex-direction:row;gap:10px;border-radius:99px;padding:6px 18px 6px 12px;margin-top:10px;font-size:14px}
.rail-cta svg{width:26px;height:26px}
.pay-main{min-width:0}
.pay-head{display:flex;align-items:center;gap:10px;padding:2px 4px 16px}
.pay-av{width:46px;height:46px;border-radius:50%;background:#111;color:var(--accent);display:grid;place-items:center;font-weight:700;border:2px solid #fff;box-shadow:0 0 0 1px #ddd;flex:none}
.pay-hi{display:flex;flex-direction:column;line-height:1.2;min-width:0}.pay-hi small{color:var(--muted)}.pay-hi b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pay-head .sp{flex:1}
.pay-ib{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center}
.pay-ib:hover{background:#e0e0e0}.pay-ib .ico{width:22px;height:22px}
.pay-sheet{background:#fff;border-radius:34px;padding:28px;min-height:70vh}
.pay-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.pay-title{font-size:30px}
.pay-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:start}
.pay-col{display:grid;gap:14px;min-width:0}
.ptabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:18px;padding-bottom:2px}
.ptabs button{border:0;background:transparent;padding:11px 20px;border-radius:99px;font-weight:600;font-size:16px;color:var(--muted);white-space:nowrap}
.ptabs button.on{background:#111;color:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.pay-bal-wrap .lbl{font-size:14px}
.pay-bal{display:flex;align-items:center;gap:6px;border:0;background:none;padding:0;font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:4px 0}
.pay-bal .ico{width:26px;height:26px;margin-top:8px}
.pay-banner{display:flex;align-items:center;gap:14px;border:0;background:#f5f5f5;border-radius:24px;padding:16px 18px;text-align:left;width:100%}
.pay-banner>span:nth-child(2){flex:1;display:flex;flex-direction:column}.pay-banner small{color:var(--muted)}.pay-banner b{font-size:16px}
.pay-banner .bi{width:44px;height:44px;border-radius:14px;background:#111;color:var(--accent);display:grid;place-items:center;flex:none}
.qa-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 6px}
.qa{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:500;font-size:13px;min-width:74px}
.qa span{width:62px;height:62px;border-radius:50%;background:#f1f1f1;display:grid;place-items:center}.qa .ico{width:24px;height:24px}
.qa:hover span{background:#111;color:var(--accent)}
.promos{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.promo{flex:0 0 min(78%,300px);scroll-snap-align:start;border-radius:26px;padding:20px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden}
.promo small{opacity:.8;font-size:14px}.promo strong{font-size:26px;line-height:1.15;font-weight:700}
.promo button{align-self:flex-start;border:0;border-radius:99px;background:#fff;color:#111;padding:9px 18px;font-weight:700}
.promo.dark{background:linear-gradient(150deg,#1a1a1a,#000)}.promo.dark::after{content:"";position:absolute;right:-34px;bottom:-34px;width:112px;height:112px;border-radius:50%;border:22px solid var(--accent);opacity:.95}.promo>*{position:relative;z-index:1}
.promo.gold{background:linear-gradient(140deg,#d8c27c,#a98b3d);color:#111}body[data-accent=lime] .promo.gold{background:linear-gradient(140deg,#d9f66a,#9cc21a)}.promo.gold button{background:#111;color:#fff}
.promo.purple{background:linear-gradient(145deg,#6b4ee0,#2e1c86)}
.sec-t{font-size:20px;margin:6px 0 2px}.sec-h{display:flex;justify-content:space-between;align-items:center}
.acct{border:1px solid #e8e8e8;border-radius:26px;overflow:hidden}
.ac-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #eee}.ac-row:last-child{border:0}
.ac-row small{display:flex;gap:6px;align-items:center;color:#555;font-size:14px;flex-wrap:wrap}.ac-row b{display:block;font-size:24px;font-weight:700;margin-top:4px}
.pill-b{background:#efefef;padding:10px 18px}
.st-day{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;padding:6px 6px 0}
.st-card{background:#f5f5f5;border-radius:26px;padding:6px 8px;display:grid}
.st-row{display:flex;align-items:center;gap:12px;border:0;background:none;padding:12px 8px;text-align:left;width:100%;border-radius:20px}
.st-row+.st-row{border-top:1px solid #ebebeb;border-radius:0}.st-row:hover{background:#eee}
.st-ic{width:48px;height:48px;border-radius:50%;background:#d7f7d4;color:#2e9b4f;display:grid;place-items:center;flex:none}.st-ic.neg{background:#fbdada;color:#d03b3b}
.st-t{flex:1;min-width:0;display:flex;flex-direction:column}.st-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}.st-t small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-v{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.st-v b{color:#2e7d32;font-size:16px;white-space:nowrap}.st-v.neg b{color:#b33}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:min(560px,100%);max-height:94vh;overflow:auto;border-radius:32px 32px 0 0;padding:18px 20px 26px;font-family:var(--font)}
.sheet-top{display:flex;justify-content:space-between}
.acc-card{display:flex;align-items:center;gap:14px;background:#f3f3f3;border-radius:22px;padding:16px}.acc-card>span:nth-child(2){flex:1;display:flex;flex-direction:column}.acc-card small{color:var(--muted)}.acc-card .ok{color:#2e9b4f}
.acc-add{display:flex;align-items:center;gap:14px;width:100%;border:1px solid #e3e3e3;background:#fff;border-radius:22px;padding:18px;margin-top:12px;text-align:left}.acc-add b{flex:1}
.qm{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e8e8e8;border-radius:22px;padding:18px;margin:18px 0}.qm span{display:flex;flex-direction:column}.qm small{color:var(--muted)}
.tgl{width:54px;height:32px;border-radius:99px;border:0;background:#ddd;position:relative;flex:none}.tgl i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}.tgl.on{background:#111}.tgl.on i{left:25px}
.sh-row{display:flex;align-items:center;gap:14px;width:100%;border:0;border-bottom:1px solid #eee;background:none;padding:18px 4px;text-align:left}.sh-row b{flex:1;font-weight:600}
.sh-out{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;background:none;color:#c62828;font-weight:700;padding:22px 0 4px;font-size:16px}
.pay-nav{display:none}
@media(max-width:900px){
 .pay{grid-template-columns:1fr;padding:0;gap:0}.pay-rail{display:none}
 .pay-head{padding:14px 18px 10px}
 .pay-sheet{border-radius:32px 32px 0 0;padding:22px 18px 140px;min-height:78vh}
 .pay-grid{grid-template-columns:1fr}
 .pay-bal{font-size:40px}.pay-title{font-size:26px}
 .pay-nav{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;align-items:stretch}
 .pay-nav .pill{flex:1;background:#fff;border-radius:30px;box-shadow:0 10px 34px rgba(0,0,0,.18);display:flex;justify-content:space-around;padding:10px 4px}
 .pay-nav .pill button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:#9a9a9a;font-weight:600;font-size:11.5px;min-width:56px}
 .pay-nav .pill button.on{color:#111}
 .pay-nav .pay-cta{width:88px;border-radius:26px;box-shadow:0 10px 34px rgba(0,0,0,.28)}
 .sheet-bg{align-items:flex-end}
}
@media(min-width:901px){.sheet-bg{align-items:center}.sheet{border-radius:32px;max-height:88vh}}
.st-card{grid-template-columns:minmax(0,1fr)}.st-row{min-width:0}.st-day span:first-child{white-space:nowrap}

.ref-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border);flex-wrap:wrap}.ref-row:first-of-type{border-top:0}.ref-act{display:flex;gap:6px;flex-wrap:wrap}
body[data-theme=pay] .kpi.feat .v{color:#fff;-webkit-text-fill-color:#fff}body[data-theme=pay] .kpi.feat .lbl,body[data-theme=pay] .kpi.feat .muted{color:#ddd}

/* ===== Auditoria FF Pay: refinamentos (referência: app fintech) ===== */
/* barra de temas compacta (somente demonstração) */
@media(max-width:820px){.themebar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:8px 12px;scrollbar-width:none}.themebar::-webkit-scrollbar{display:none}.themebar>*{flex:none}.themebar select{max-width:190px}}
/* produção em nuvem: sem barra de demonstração */
body.cloud .pay{min-height:100vh;padding-top:14px}
body.cloud .pay-rail{top:14px;height:calc(100vh - 28px)}
body.cloud .login{min-height:100vh}
/* login */
body[data-theme=pay] .login{min-height:calc(100vh - 41px)}
body[data-theme=pay] .roles{grid-template-columns:1fr 1fr}
body[data-theme=pay] .roles .btn{width:100%;justify-content:center;padding:14px;background:#ececec}
body[data-theme=pay] .lbox h2{font-size:30px}
@media(max-width:980px){body[data-theme=pay] .login{min-height:0}.lcard{padding:28px 18px 40px}}
/* busca em pílula + filtros roláveis (como o extrato da referência) */
.searchbox{position:relative}.searchbox .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.searchbox input{padding-left:46px;border-radius:99px!important;background:#f3f3f3!important;border-color:transparent!important;min-height:50px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.chips.scroll::-webkit-scrollbar{display:none}.chips.scroll .chip{flex:none;padding:9px 16px}
.btn.more{display:flex;width:100%;justify-content:center;margin-top:14px;padding:14px;background:#f1f1f1}
/* barras mais finas e discretas */
body[data-theme=pay] .hb .bar{height:8px;background:#e9e9e9}
body[data-theme=pay] .hb .r{grid-template-columns:96px 1fr auto}
body[data-theme=pay] .rank .n{background:#ececec}
/* nova venda: resumo + salvar numa coluna */
.calc-col{align-self:start}
@media(min-width:901px){.calc-col{position:sticky;top:20px}body:not(.cloud) .calc-col{top:70px}}
/* impostos em cartões */
.txs{display:grid}
.tx{padding:16px 0;border-top:1px solid #e3e3e3}.tx:first-child{border-top:0}.tx>b{display:block;margin-bottom:10px;font-size:15px}
.tx-f{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.tx-on{align-items:center;gap:8px}.tx-on input{width:26px;min-height:26px;accent-color:#111}
/* parceiros no celular */
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.mini3 div{background:#fff;border-radius:16px;padding:10px 12px}.mini3 small{display:block;color:var(--muted);font-size:11px}.mini3 b{font-size:16px}
.cards-m .card+.card{margin-top:10px}
/* detalhe da venda: painel arredondado no desktop, bottom sheet no celular */
body[data-theme=pay] .drawer-bg{align-items:stretch}
body[data-theme=pay] .drawer{border-radius:32px 0 0 32px;padding:24px;box-shadow:-20px 0 60px rgba(0,0,0,.18)}
body[data-theme=pay] .drawer h2{font-size:24px}
@media(max-width:820px){
 body[data-theme=pay] .drawer-bg{align-items:flex-end}
 body[data-theme=pay] .drawer{width:100%;height:auto;max-height:92vh;border-radius:32px 32px 0 0;padding:18px 18px 28px}
 body[data-theme=pay] .drawer::before{content:"";display:block;width:44px;height:5px;border-radius:99px;background:#d6d6d6;margin:-4px auto 6px}
 .tx-f{grid-template-columns:1fr 1fr}.tx-on{grid-column:1/-1;flex-direction:row;justify-content:flex-start}
}
/* tabelas: sem quebra nas colunas numéricas, rolagem dentro do cartão */
body[data-theme=pay] .tw{overflow-x:auto}body[data-theme=pay] .tw table{min-width:760px}
body[data-theme=pay] td.num,body[data-theme=pay] th.num{white-space:nowrap}
/* rótulos de seção e estados vazios */
body[data-theme=pay] .sec-t{font-size:20px}
body[data-theme=pay] .muted{color:#7b7e84}
/* foco acessível em botões do FF Pay */
body[data-theme=pay] button:focus-visible,body[data-theme=pay] input:focus-visible,body[data-theme=pay] select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tx-on{flex-direction:row!important;justify-content:space-between;background:#fff;border:1px solid #e3e3e3;border-radius:16px;padding:10px 14px;min-height:46px}
@media(min-width:821px){.tx-on{padding:6px 14px}}
body[data-theme=pay] .roles .btn,body[data-theme=pay] .gbtn{background:#fff!important;box-shadow:0 1px 0 rgba(0,0,0,.04),0 0 0 1px #e1e1e1}