/* ================= Praevideo Partner Portal ================= */
:root{
  --bg:#070918; --bg2:#0b0e24; --panel:rgba(20,24,56,.72); --panel2:rgba(28,33,74,.6);
  --line:rgba(126,134,255,.16); --line2:rgba(126,134,255,.28);
  --text:#eef0ff; --dim:#a3abd6; --mute:#6b7299;
  --mint:#2be4ac; --cyan:#19c9e8; --violet:#8b7bff; --amber:#f5c26b; --red:#ff6b81; --green:#33e0a1;
  --grad:linear-gradient(100deg,#2be4ac,#19c9e8);
  --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.45);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}

/* backdrop */
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(126,134,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(126,134,255,.05) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)}
.bg-glow{position:fixed;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0;opacity:.5}
.bg-glow.g1{width:560px;height:560px;background:#13c9a0;top:-260px;left:-160px;opacity:.22}
.bg-glow.g2{width:620px;height:620px;background:#4b4bff;top:-200px;right:-220px;opacity:.2}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 32px;background:rgba(7,9,24,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none!important}
.brand-logo{height:30px;width:auto;display:block}
.brand-tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);
  padding:5px 10px;border:1px solid rgba(43,228,172,.35);border-radius:999px;background:rgba(43,228,172,.07)}
.topnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.navlink{color:var(--dim);font-weight:600;font-size:14px;padding:9px 14px;border-radius:999px;transition:.15s}
.navlink:hover{color:var(--text);background:rgba(126,134,255,.1);text-decoration:none}
.navlink.on{color:#07101f;background:var(--grad)}
.who{display:flex;align-items:center;gap:8px;margin-left:8px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--dim)}
.who-av{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#07101f;font-weight:800;display:grid;place-items:center;font-size:12px}

/* layout */
.view{position:relative;z-index:1;flex:1;width:100%;max-width:1180px;margin:0 auto;padding:40px 28px 70px}
.foot{position:relative;z-index:1;text-align:center;color:var(--mute);font-size:12px;padding:22px 16px 30px;border-top:1px solid var(--line)}
.foot a{color:var(--dim)} .foot-sep{margin:0 8px;opacity:.5}

/* type */
h1,h2,h3{margin:0;letter-spacing:-.02em}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.muted{color:var(--dim)} .mute{color:var(--mute)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{appearance:none;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:inherit;font-weight:700;font-size:14px;
  padding:12px 22px;border-radius:999px;cursor:pointer;transition:transform .12s,box-shadow .2s,opacity .2s;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none!important}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--grad);color:#06111e;border:none;box-shadow:0 10px 30px rgba(25,201,232,.25)}
.btn-primary:hover{box-shadow:0 14px 38px rgba(25,201,232,.38)}
.btn-ghost{background:transparent}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-danger{border-color:rgba(255,107,129,.45);color:var(--red);background:rgba(255,107,129,.06)}
.btn-block{width:100%}

/* cards / forms */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.card + .card{margin-top:20px}
.card-title{font-size:18px;font-weight:800;margin-bottom:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:13px;font-weight:700;color:var(--dim)}
.field label .req{color:var(--cyan);margin-left:2px}
.input,select.input,textarea.input{width:100%;font:inherit;font-size:15px;color:var(--text);background:rgba(8,10,28,.7);border:1px solid var(--line2);
  border-radius:12px;padding:13px 15px;outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(25,201,232,.14)}
textarea.input{min-height:110px;resize:vertical}
.input::placeholder{color:#555c85}
.hint{font-size:12px;color:var(--mute)}
.err{color:var(--red);font-size:13px;min-height:18px;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* auth */
.auth-wrap{display:grid;place-items:center;min-height:62vh}
.auth-card{width:100%;max-width:440px}
.auth-card h1{font-size:26px;margin:10px 0 8px}
.otp{letter-spacing:.5em;text-align:center;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.qr{display:grid;place-items:center;background:#fff;border-radius:14px;padding:14px;width:200px;height:200px;margin:14px auto}
.qr img{width:172px;height:172px}
.secret{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--dim);word-break:break-all;text-align:center;
  background:rgba(8,10,28,.6);border:1px dashed var(--line2);border-radius:10px;padding:8px 10px}
.steps{display:flex;gap:8px;margin:4px 0 18px}
.steps i{flex:1;height:4px;border-radius:2px;background:rgba(126,134,255,.18)}
.steps i.on{background:var(--grad)}

/* landing */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;padding:30px 0 50px}
.hero.hero-solo{grid-template-columns:1fr;max-width:820px;margin:0 auto;text-align:center;padding:70px 0 90px}
.hero.hero-solo .lead{margin:0 auto}.hero.hero-solo .hero-cta{justify-content:center}
.hero h1{font-size:54px;line-height:1.04;margin:14px 0 18px}
.hero p.lead{font-size:18px;line-height:1.65;color:var(--dim);max-width:560px}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-visual{position:relative;border-radius:24px;padding:26px;background:linear-gradient(160deg,rgba(28,33,74,.85),rgba(14,17,42,.85));border:1px solid var(--line2);box-shadow:var(--shadow)}
.hv-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;background:rgba(8,10,28,.55);border:1px solid var(--line);margin-bottom:10px}
.hv-row b{font-size:14px} .hv-row span{font-size:12px;color:var(--dim)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:10px 0 40px}
.feature{padding:22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.feature .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(43,228,172,.1);border:1px solid rgba(43,228,172,.3);font-size:20px;margin-bottom:14px}
.feature h3{font-size:16px;margin-bottom:6px} .feature p{font-size:14px;line-height:1.6;color:var(--dim);margin:0}
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.how div{position:relative;padding:20px 20px 20px 62px;border-radius:16px;background:rgba(8,10,28,.45);border:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--dim)}
.how div b{display:block;color:var(--text);margin-bottom:4px}
.how div::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#06111e;font-weight:900;display:grid;place-items:center}

/* app */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-head h1{font-size:32px;margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.stat{padding:20px 22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.stat .l{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.stat .v{font-size:28px;font-weight:800;margin-top:8px;font-variant-numeric:tabular-nums}
.stat .s{font-size:12px;color:var(--dim);margin-top:4px}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(43,228,172,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(43,228,172,.55)}70%{box-shadow:0 0 0 10px rgba(43,228,172,0)}100%{box-shadow:0 0 0 0 rgba(43,228,172,0)}}

.deal{padding:22px 24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);margin-bottom:14px;transition:border-color .2s}
.deal:hover{border-color:var(--line2)}
.deal-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.deal h3{font-size:18px} .deal .sub{font-size:13px;color:var(--dim);margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);white-space:nowrap}
.pill.submitted{color:var(--violet);border-color:rgba(139,123,255,.45);background:rgba(139,123,255,.08)}
.pill.pipeline,.pill.approved{color:var(--cyan);border-color:rgba(25,201,232,.45);background:rgba(25,201,232,.08)}
.pill.ordered{color:var(--amber);border-color:rgba(245,194,107,.45);background:rgba(245,194,107,.08)}
.pill.ready,.pill.payout_requested{color:var(--mint);border-color:rgba(43,228,172,.5);background:rgba(43,228,172,.09)}
.pill.paid{color:#06111e;background:var(--grad);border:none}
.pill.declined,.pill.lost{color:var(--red);border-color:rgba(255,107,129,.45);background:rgba(255,107,129,.06)}
.track{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:18px 0 8px}
.track div{font-size:11px;font-weight:700;color:var(--mute);padding-top:10px;border-top:3px solid rgba(126,134,255,.18);letter-spacing:.02em}
.track div.on{color:var(--text);border-top-color:var(--mint)}
.track div.cur{color:var(--mint)}
.deal-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.earn{font-size:13px;color:var(--dim)} .earn b{font-size:20px;color:var(--text);margin-left:6px}
.earn.locked b{font-size:13px;color:var(--mute);font-weight:600}
.empty{text-align:center;padding:56px 20px;color:var(--dim)}
.empty .big{font-size:42px;margin-bottom:10px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(30px);opacity:0;pointer-events:none;z-index:50;
  background:#11163a;border:1px solid var(--line2);color:var(--text);padding:13px 20px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:var(--shadow);transition:.25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{border-color:rgba(255,107,129,.6)}

.row-list{display:flex;flex-direction:column;gap:10px}
.row-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(8,10,28,.5);border:1px solid var(--line)}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:rgba(8,10,28,.6);border:1px solid var(--line2)}
.seg button{appearance:none;border:none;background:transparent;color:var(--dim);font:inherit;font-weight:700;font-size:14px;padding:9px 20px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--grad);color:#06111e}
.check-ok{color:var(--mint);font-weight:700}

@media (max-width:980px){
  .hero{grid-template-columns:1fr}.hero h1{font-size:40px}
  .feature-grid,.how,.stats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .topbar{padding:12px 16px}.brand-tag{display:none}
  .grid2,.grid3,.feature-grid,.how,.stats{grid-template-columns:1fr}
  .track{grid-template-columns:repeat(3,1fr)}
  .view{padding:26px 16px 50px}
}