@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@300;400;500&display=swap');

:root{
  --black:#080808;--black2:#101010;--black3:#181818;--black4:#222222;
  --white:#f2f0ec;--white2:#d8d4cc;--white3:#a09890;--white4:#605850;
  --accent:#9b59f5;--accent2:#b48af8;
  --green:#9b59f5;--red:#c06060;--yellow:#b89850;--blue:#6888b8;
  --r:6px;--sidebar:224px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}

body{background:var(--black);color:var(--white);font-family:'Instrument Sans',sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-0.01em}
body::before{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}

/* ── LOGO SVG ── */
.logo-svg{display:block;width:100%;height:100%}
.vali-logo{display:block;width:100%;height:100%}

/* ── VIEWS ── */
#landing-view,#auth-view{overflow-y:auto;height:100vh}
#app-view{height:100vh}

/* ════════════════════════════════════════
   LANDING
════════════════════════════════════════ */
.lp-body{background:var(--black);color:var(--white);font-family:'Instrument Sans',sans-serif;min-height:100vh}

/* NAV */
.lp-nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:60px;
  background:rgba(8,8,8,0.88);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.lp-logo{display:flex;align-items:center;gap:9px;cursor:pointer}
.lp-logo-icon{width:26px;height:26px;flex-shrink:0}
.lp-logo-name{font-family:'Instrument Serif',serif;font-size:17px;letter-spacing:-0.02em;color:var(--white)}
.lp-nav-links{display:flex;align-items:center;gap:30px}
.lp-nav-links a{font-size:13.5px;color:var(--white3);transition:color .15s}
.lp-nav-links a:hover{color:var(--white)}
.lp-nav-cta{display:flex;gap:10px;align-items:center}

/* BTN */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--r);font-size:13px;font-weight:500;border:1px solid transparent;transition:all .15s;letter-spacing:-0.01em;white-space:nowrap}
.btn-white{background:var(--white);color:var(--black);border-color:var(--white)}
.btn-white:hover{background:var(--white2)}
.btn-ghost{background:transparent;color:var(--white2);border-color:rgba(255,255,255,0.1)}
.btn-ghost:hover{border-color:rgba(255,255,255,0.22);color:var(--white)}
.btn-accent{background:rgba(155,89,245,0.10);color:var(--accent2);border-color:rgba(155,89,245,0.20)}
.btn-accent:hover{background:rgba(155,89,245,0.18)}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:5px}
.btn-xs{padding:3px 9px;font-size:11px;border-radius:4px}
.btn-lg{padding:11px 26px;font-size:14px;border-radius:7px}
.btn-red{background:rgba(192,96,96,0.08);color:var(--red);border-color:rgba(192,96,96,0.18)}
.btn-red:hover{background:rgba(192,96,96,0.15)}

/* HERO */
.lp-hero{
  min-height:calc(100vh - 60px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:80px 24px 60px;position:relative;overflow:hidden;
}
.lp-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse at 50% 0%,rgba(155,89,245,0.08) 0%,transparent 70%);pointer-events:none}
.lp-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(155,89,245,0.08);border:1px solid rgba(155,89,245,0.18);
  border-radius:100px;padding:5px 14px;margin-bottom:28px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  font-weight:500;font-family:'DM Mono',monospace;
  animation:lp-up .7s ease both;
}
.lp-badge-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:lp-pulse 2s ease infinite}
@keyframes lp-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.lp-h1{
  font-family:'Instrument Serif',serif;font-size:clamp(42px,8vw,84px);
  letter-spacing:-0.04em;line-height:.96;color:var(--white);
  margin-bottom:22px;max-width:860px;
  animation:lp-up .7s ease .1s both;
}
.lp-h1 em{font-style:italic;color:var(--accent2)}
.lp-sub{font-size:15.5px;color:var(--white3);max-width:460px;line-height:1.65;margin-bottom:38px;animation:lp-up .7s ease .2s both}
.lp-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:lp-up .7s ease .3s both}
.lp-stats{display:flex;gap:36px;align-items:center;margin-top:60px;animation:lp-up .7s ease .45s both}
.lp-stat-div{width:1px;height:34px;background:rgba(255,255,255,0.08)}
.lp-stat-val{font-family:'Instrument Serif',serif;font-size:26px;letter-spacing:-0.04em;color:var(--white);margin-bottom:2px}
.lp-stat-lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--white4);font-weight:500}
@keyframes lp-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* MARQUEE */
.lp-marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.05);padding:12px 0;background:var(--black2)}
.lp-marquee-track{display:flex;gap:48px;animation:lp-scroll 24s linear infinite;width:max-content}
.lp-marquee-track:hover{animation-play-state:paused}
.lp-marquee-item{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--white4);white-space:nowrap;font-weight:500}
.lp-marquee-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;flex-shrink:0}
@keyframes lp-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
.lp-section{padding:100px 48px;max-width:1100px;margin:0 auto}
.lp-eyebrow{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:500;font-family:'DM Mono',monospace;margin-bottom:14px}
.lp-sh{font-family:'Instrument Serif',serif;font-size:clamp(30px,4vw,50px);letter-spacing:-0.03em;line-height:1.05;color:var(--white);margin-bottom:14px}
.lp-sh em{font-style:italic;color:var(--accent2)}
.lp-ssub{font-size:14.5px;color:var(--white3);max-width:420px;line-height:1.65}

/* FEATURES */
.lp-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.lp-feat{background:var(--black2);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:26px;transition:border-color .2s,transform .2s}
.lp-feat:hover{border-color:rgba(155,89,245,0.20);transform:translateY(-2px)}
.lp-feat-icon{width:34px;height:34px;border-radius:7px;background:rgba(155,89,245,0.08);border:1px solid rgba(155,89,245,0.14);display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:16px}
.lp-feat-title{font-family:'Instrument Serif',serif;font-size:19px;letter-spacing:-0.02em;color:var(--white);margin-bottom:7px}
.lp-feat-desc{font-size:13px;color:var(--white3);line-height:1.6}

/* PLATFORMS */
.lp-plat-wrap{padding:80px 48px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.lp-plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lp-plat{background:var(--black2);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:16px;text-align:center;transition:border-color .15s}
.lp-plat:hover{border-color:rgba(155,89,245,0.18)}
.lp-plat-em{font-size:22px;margin-bottom:5px}
.lp-plat-name{font-size:12px;font-weight:500;color:var(--white2)}
.lp-plat-rate{font-size:10px;color:var(--green);font-family:'DM Mono',monospace;margin-top:3px}

/* HOW IT WORKS */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.lp-step{background:var(--black2);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:28px;position:relative}
.lp-step-num{font-family:'Instrument Serif',serif;font-size:52px;letter-spacing:-0.05em;color:rgba(155,89,245,0.15);line-height:1;margin-bottom:12px}
.lp-step-title{font-family:'Instrument Serif',serif;font-size:20px;letter-spacing:-0.02em;color:var(--white);margin-bottom:8px}
.lp-step-desc{font-size:13px;color:var(--white3);line-height:1.6}

/* TESTIMONIALS */
.lp-test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.lp-test{background:var(--black2);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:22px}
.lp-test-stars{color:var(--accent);font-size:12px;letter-spacing:2px;margin-bottom:12px}
.lp-test-text{font-size:13px;color:var(--white2);line-height:1.7;margin-bottom:16px;font-style:italic}
.lp-test-author{display:flex;align-items:center;gap:9px}
.lp-test-av{width:28px;height:28px;border-radius:50%;background:var(--black4);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--accent);font-family:'DM Mono',monospace;flex-shrink:0}
.lp-test-name{font-size:12px;font-weight:500;color:var(--white)}
.lp-test-handle{font-size:10.5px;color:var(--white4);font-family:'DM Mono',monospace}

/* CTA BAND */
.lp-cta{text-align:center;padding:80px 24px 100px;max-width:660px;margin:0 auto}
.lp-cta .lp-sh{font-size:clamp(34px,5vw,58px)}

/* FOOTER */
.lp-footer{border-top:1px solid rgba(255,255,255,0.06);padding:32px 48px;display:flex;align-items:center;justify-content:space-between;background:var(--black)}
.lp-footer-logo{display:flex;align-items:center;gap:8px}
.lp-footer-logo-icon{width:20px;height:20px}
.lp-footer-logo-name{font-family:'Instrument Serif',serif;font-size:14px;letter-spacing:-0.02em;color:var(--white3)}
.lp-footer-links{display:flex;gap:22px}
.lp-footer-links a{font-size:12px;color:var(--white4);transition:color .15s}
.lp-footer-links a:hover{color:var(--white2)}
.lp-footer-copy{font-size:11.5px;color:var(--white4);font-family:'DM Mono',monospace}

/* ════════════════════════════════════════
   AUTH
════════════════════════════════════════ */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--black);position:relative;overflow:hidden}
.auth-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(155,89,245,0.07) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.auth-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-box{position:relative;z-index:2;width:100%;max-width:400px;padding:40px;background:var(--black2);border:1px solid rgba(255,255,255,0.08);border-radius:14px;margin:20px}
.auth-mark{display:flex;align-items:center;gap:8px;margin-bottom:30px;cursor:pointer}
.auth-mark-icon{width:24px;height:24px;flex-shrink:0}
.auth-mark-name{font-family:'Instrument Serif',serif;font-size:16px;letter-spacing:-0.02em}
.auth-title{font-family:'Instrument Serif',serif;font-size:26px;letter-spacing:-0.04em;margin-bottom:5px}
.auth-title em{font-style:italic;color:var(--accent)}
.auth-sub{font-size:13px;color:var(--white3);margin-bottom:28px;font-weight:300}
.auth-foot{font-size:12.5px;color:var(--white4);text-align:center;margin-top:18px}
.auth-foot a{color:var(--accent);cursor:pointer}
.field{margin-bottom:15px}
.field label{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--white4);font-weight:500;margin-bottom:6px}
.inp{width:100%;background:var(--black3)!important;border:1px solid rgba(255,255,255,0.09)!important;border-radius:var(--r);padding:9px 12px;font-size:13.5px;color:var(--white)!important;font-family:'Instrument Sans',sans-serif;letter-spacing:-0.01em;outline:none;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:rgba(155,89,245,0.35)!important;box-shadow:0 0 0 3px rgba(155,89,245,0.07)!important}
.inp::placeholder{color:var(--white4)!important}
select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23605850' d='M6 8L1 3h10z'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;padding-right:32px!important}
select.inp option{background:#181818;color:#d8d4cc}
textarea.inp{resize:vertical;min-height:90px;line-height:1.6}
input.form-control,select.form-control,textarea.form-control{background:var(--black3)!important;border:1px solid rgba(255,255,255,0.09)!important;color:var(--white)!important;border-radius:var(--r)!important;box-shadow:none!important}
input.form-control:focus,select.form-control:focus,textarea.form-control:focus{border-color:rgba(155,89,245,0.35)!important;box-shadow:0 0 0 3px rgba(155,89,245,0.07)!important;background:var(--black3)!important}
input.form-control::placeholder,textarea.form-control::placeholder{color:var(--white4)!important}

/* ════════════════════════════════════════
   PANEL APP
════════════════════════════════════════ */
.shell{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar{width:var(--sidebar);flex-shrink:0;background:var(--black);border-right:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;height:100vh;position:relative;z-index:10;overflow-y:auto;overflow-x:hidden}
.sidebar-top{padding:18px 14px 16px;border-bottom:1px solid rgba(255,255,255,0.05)}
.wordmark{display:flex;align-items:center;gap:9px;cursor:pointer}
.wordmark-icon{width:24px;height:24px;flex-shrink:0}
.wordmark-name{font-family:'Instrument Serif',serif;font-size:17px;color:var(--white);letter-spacing:-0.02em}
.nav-section{padding:6px 8px 0}
.nav-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--white4);padding:0 8px;margin:12px 0 3px;font-weight:500}
.nav-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r);font-size:13px;color:var(--white3);transition:background .12s,color .12s;cursor:pointer;border:none;background:none;width:100%;text-align:left;letter-spacing:-0.01em}
.nav-item:hover{background:rgba(255,255,255,0.05);color:var(--white)}
.nav-item.active{background:rgba(255,255,255,0.07);color:var(--white)}
.ni{width:15px;height:15px;opacity:.55;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nav-item.active .ni,.nav-item:hover .ni{opacity:1}
.nbadge{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sidebar-footer{margin-top:auto;padding:10px 8px;border-top:1px solid rgba(255,255,255,0.05)}
.user-card{display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--r);cursor:pointer;transition:background .12s}
.user-card:hover{background:rgba(255,255,255,0.05)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--black4);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--accent);flex-shrink:0;font-family:'DM Mono',monospace}
.user-info{flex:1;min-width:0}
.user-name{font-size:12.5px;font-weight:500;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-bal{font-size:11px;color:var(--green);font-family:'DM Mono',monospace;letter-spacing:0}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:50px;border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0}
.topbar-title{font-family:'Instrument Serif',serif;font-size:15px;color:var(--white);letter-spacing:-0.02em}
.topbar-right{display:flex;align-items:center;gap:8px}
.icon-btn{width:30px;height:30px;border-radius:var(--r);background:transparent;border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:var(--white3);transition:border-color .15s,color .15s}
.icon-btn:hover{border-color:rgba(255,255,255,0.18);color:var(--white)}
.page-body{flex:1;overflow-y:auto;padding:24px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent}
.page-body::-webkit-scrollbar{width:4px}
.page-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:4px}
.page{display:none}
.page.active{display:block}

/* TYPE */
.serif{font-family:'Instrument Serif',serif;letter-spacing:-0.02em}
.mono{font-family:'DM Mono',monospace;letter-spacing:0}
.section-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--white4);font-weight:500;margin-bottom:5px}
.page-h{font-family:'Instrument Serif',serif;font-size:21px;color:var(--white);letter-spacing:-0.03em;margin-bottom:4px}
.page-sub{font-size:13px;color:var(--white3);margin-bottom:22px}

/* CARDS */
.card{background:var(--black2);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:18px;transition:border-color .2s}
.card:hover{border-color:rgba(255,255,255,0.11)}
.card-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--white4);margin-bottom:9px;font-weight:500}

/* METRICS */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.metric-val{font-family:'Instrument Serif',serif;font-size:32px;letter-spacing:-0.04em;line-height:1;margin-bottom:3px}
.metric-val.green{color:var(--green)}
.metric-val.gold{color:var(--accent)}
.metric-val.blue{color:var(--blue)}
.metric-change{font-size:11px;color:var(--white4);margin-top:2px}
.metric-change.up{color:var(--green)}

/* TABLES */
.tbl-wrap{background:var(--black2);border:1px solid rgba(255,255,255,0.07);border-radius:10px;overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{padding:9px 14px;text-align:left;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--white4);font-weight:500;border-bottom:1px solid rgba(255,255,255,0.06);background:var(--black2);white-space:nowrap}
.tbl tbody tr{border-bottom:1px solid rgba(255,255,255,0.04);transition:background .1s}
.tbl tbody tr:last-child{border-bottom:none}
.tbl tbody tr:hover{background:rgba(255,255,255,0.025)}
.tbl tbody td{padding:11px 14px;vertical-align:middle;color:var(--white2)}
.tbl .dim{color:var(--white4)}
.tbl .link-cell{color:var(--white4);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl .mc{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:0}

/* BADGES */
.badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:500;letter-spacing:.02em;padding:2px 8px;border-radius:100px;font-family:'DM Mono',monospace}
.b-green{background:rgba(155,89,245,0.12);color:var(--green)}
.b-red{background:rgba(192,96,96,0.12);color:var(--red)}
.b-yellow{background:rgba(184,152,80,0.12);color:var(--yellow)}
.b-blue{background:rgba(104,136,184,0.12);color:var(--blue)}
.b-dim{background:rgba(255,255,255,0.05);color:var(--white4)}
.b-gold{background:rgba(155,89,245,0.12);color:var(--accent)}
.b-purple{background:rgba(150,120,200,0.12);color:#b08ce0}

/* UTILS */
.divider{height:1px;background:rgba(255,255,255,0.06);margin:18px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.flex{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.dot-green{background:var(--green)}.dot-yellow{background:var(--yellow)}.dot-blue{background:var(--blue)}

/* ALERTS */
.alert{padding:10px 13px;border-radius:var(--r);font-size:13px;margin-top:12px;display:flex;align-items:center;gap:10px}
.alert-red{background:rgba(192,96,96,0.08);border:1px solid rgba(192,96,96,0.18);color:#d88888}
.alert-green{background:rgba(155,89,245,0.08);border:1px solid rgba(155,89,245,0.18);color:#b48af8}
.alert-gold{background:rgba(155,89,245,0.08);border:1px solid rgba(155,89,245,0.18);color:var(--accent2)}

/* ORDER LAYOUT */
.order-grid{display:grid;grid-template-columns:minmax(0,600px) 560px;gap:24px;align-items:start;max-width:1200px;width:100%}
#order-main{min-width:0}

/* CUSTOM SELECT DARK OVERRIDE - force dark on platform widget */
[class*="select-wrap"],[class*="select-dropdown"],[class*="select-option"],[class*="select-drop"],[class*="select-item"]{background:#181818!important;background-color:#181818!important;color:#d8d4cc!important;border-color:rgba(255,255,255,0.09)!important}
[class*="select-drop"] li,[class*="select-drop"] div{background:#181818!important;color:#d8d4cc!important}
[class*="select-drop"] li:hover,[class*="select-item"]:hover{background:#222!important}
.order-summary{background:var(--black2);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:18px;position:sticky;top:0}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-size:13px}
.sum-row:last-child{border-bottom:none}
.sum-key{color:var(--white4)}
.sum-val{font-family:'DM Mono',monospace;font-size:12px}
.sum-big{font-family:'Instrument Serif',serif;font-size:22px;letter-spacing:-0.02em;color:var(--green)}

/* SPARKLINE */
.spark-wrap{height:44px;display:flex;align-items:flex-end;gap:3px;margin-top:8px}
.spark-bar{flex:1;border-radius:2px 2px 0 0;background:rgba(155,89,245,0.25);min-height:4px}
.spark-bar:hover{background:rgba(155,89,245,0.55)}

/* TABS */
.tab-row{display:flex;gap:2px;background:var(--black3);border:1px solid rgba(255,255,255,0.07);border-radius:7px;padding:3px;margin-bottom:16px;width:fit-content}
.tab-btn{padding:5px 13px;border-radius:5px;font-size:12.5px;color:var(--white3);background:none;border:none;transition:all .12s;letter-spacing:-0.01em}
.tab-btn:hover{color:var(--white)}
.tab-btn.active{background:var(--black2);color:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* TICKET */
.ticket-msg{background:var(--black3);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:13px;margin-bottom:9px}
.ticket-msg.support{background:rgba(155,89,245,0.04);border-color:rgba(155,89,245,0.12)}
.ticket-meta{font-size:11px;color:var(--white4);margin-bottom:6px;display:flex;gap:10px}
.ticket-meta .author{color:var(--accent)}

/* API */
.api-key-box{background:var(--black3);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.api-key-val{font-family:'DM Mono',monospace;font-size:12.5px;color:var(--accent);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-block{background:var(--black3);border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:14px;font-family:'DM Mono',monospace;font-size:12px;color:var(--white2);line-height:1.75;overflow-x:auto;margin-bottom:14px;white-space:pre}
.kw{color:var(--accent)}.str{color:var(--green)}.cm{color:var(--white4)}

/* PAYMENT */
.pay-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.pay-opt{border:1px solid rgba(255,255,255,0.09);border-radius:8px;padding:11px 8px;text-align:center;cursor:pointer;font-size:12.5px;color:var(--white3);transition:all .15s;background:var(--black3)}
.pay-opt:hover{border-color:rgba(255,255,255,0.18);color:var(--white)}
.pay-opt.sel{border-color:var(--accent);color:var(--accent);background:rgba(155,89,245,0.06)}
.pay-opt-icon{font-size:18px;margin-bottom:4px}

/* MODAL */
.modal-bg{position:fixed;inset:0;z-index:1000;background:rgba(8,8,8,0.82);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:var(--black2);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:26px;width:100%;max-width:440px;margin:20px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-title{font-family:'Instrument Serif',serif;font-size:18px;letter-spacing:-0.02em}
.modal-close{background:none;border:none;color:var(--white4);font-size:17px;padding:4px;transition:color .12s}
.modal-close:hover{color:var(--white)}

/* SVC SEARCH */
.svc-search{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}

/* AFFILIATE */
.aff-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.aff-link-box{background:var(--black3);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.aff-link-val{font-family:'DM Mono',monospace;font-size:12.5px;color:var(--accent2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* CHILD PANEL */
.child-card{background:var(--black2);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:20px;margin-bottom:14px}

/* MASS ORDER */
.mass-drop-zone{border:2px dashed rgba(255,255,255,0.1);border-radius:10px;padding:36px;text-align:center;margin-bottom:18px;transition:border-color .2s;cursor:pointer}
.mass-drop-zone:hover{border-color:rgba(155,89,245,0.30)}

/* UPDATES */
.update-item{background:var(--black2);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:18px;margin-bottom:12px}
.update-tag{display:inline-flex;align-items:center;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:100px;font-weight:600;margin-bottom:10px;font-family:'DM Mono',monospace}
.update-date{font-size:11px;color:var(--white4);font-family:'DM Mono',monospace;margin-bottom:8px}
.update-title{font-family:'Instrument Serif',serif;font-size:17px;letter-spacing:-0.02em;color:var(--white);margin-bottom:6px}
.update-body{font-size:13px;color:var(--white3);line-height:1.6}

/* ════════════════════════════════════════
   MASS DROP ZONE
════════════════════════════════════════ */
.mass-drop-zone{border:1.5px dashed rgba(255,255,255,0.12);border-radius:10px;padding:40px 24px;text-align:center;cursor:pointer;transition:border-color .15s;background:var(--black3)}
.mass-drop-zone:hover{border-color:rgba(155,89,245,0.30)}

/* UPDATES */
.update-item{border-bottom:1px solid rgba(255,255,255,0.05);padding:20px 0}
.update-item:last-child{border-bottom:none}
.update-tag{display:inline-block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;padding:2px 8px;border-radius:4px;margin-bottom:7px;font-family:'DM Mono',monospace}
.update-date{font-size:11px;color:var(--white4);margin-bottom:5px;font-family:'DM Mono',monospace}
.update-title{font-size:14.5px;font-weight:500;color:var(--white);margin-bottom:6px}
.update-body{font-size:13px;color:var(--white3);line-height:1.65}

/* NOTIF */
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.notif-item:last-child{border-bottom:none}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:4px}
.notif-dot.read{background:rgba(255,255,255,0.1)}
.notif-body{flex:1}
.notif-msg{font-size:13px;color:var(--white2);margin-bottom:3px}
.notif-time{font-size:11px;color:var(--white4);font-family:'DM Mono',monospace}

/* DRIP FEED */
.drip-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-family:'DM Mono',monospace;padding:2px 8px;border-radius:100px}

/* SUBSCRIPTIONS */
.sub-status-active{background:rgba(155,89,245,0.12);color:var(--green)}
.sub-status-stopped{background:rgba(192,96,96,0.12);color:var(--red)}
.sub-status-paused{background:rgba(184,152,80,0.12);color:var(--yellow)}

/* REFUNDS */
.refund-partial{color:var(--yellow)}
.refund-cancel{color:var(--red)}

/* PROGRESS BAR */
.progress-wrap{width:100%;height:3px;background:rgba(255,255,255,0.06);border-radius:2px;margin-top:4px}
.progress-bar{height:100%;border-radius:2px;background:var(--green);transition:width .3s}

/* MOBILE TOPBAR HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:4px;width:30px;height:30px;justify-content:center;align-items:center;background:none;border:1px solid rgba(255,255,255,0.08);border-radius:var(--r);cursor:pointer;flex-shrink:0}
.hamburger span{width:14px;height:1.5px;background:var(--white3);border-radius:1px;display:block;transition:all .2s}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9;backdrop-filter:blur(4px)}

/* ════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
════════════════════════════════════════ */
@media(max-width:768px){
  /* Landing */
  .lp-nav{padding:0 20px}
  .lp-nav-links{display:none}
  .lp-section{padding:60px 20px}
  .lp-plat-wrap{grid-template-columns:1fr;gap:40px;padding:60px 20px}
  .lp-feat-grid{grid-template-columns:1fr}
  .lp-steps{grid-template-columns:1fr}
  .lp-test-grid{grid-template-columns:1fr}
  .lp-stats{gap:18px;flex-wrap:wrap;justify-content:center}
  .lp-footer{flex-direction:column;gap:14px;padding:24px 20px;text-align:center}
  .lp-footer-links{flex-wrap:wrap;justify-content:center}

  /* App shell */
  .shell{position:relative}
  .sidebar{position:fixed;left:0;top:0;height:100%;z-index:10;transform:translateX(-100%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.5)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block}
  .hamburger{display:flex}
  .topbar{padding:0 14px}

  /* Pages */
  .metrics{grid-template-columns:1fr 1fr}
  .order-grid{grid-template-columns:1fr}
  .order-summary{position:static}
  .aff-stat-grid{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .page-body{padding:16px}

  /* New order: prevent horizontal overflow from PP selects */
  #order-main{overflow:hidden;min-width:0}
  .select-selected{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  #fields{overflow:hidden;min-width:0}
  #fields input,#fields select,#fields textarea{max-width:100%!important;width:100%!important}
  .smm-main{overflow-x:hidden!important}

  /* Tables: hide non-essential columns on mobile */
  .tbl .hide-mob{display:none}
  .tbl thead th.hide-mob{display:none}

  /* Services search */
  .svc-search{flex-direction:column;align-items:stretch}
  .svc-search .inp{max-width:100% !important}

  /* Auth */
  .auth-box{padding:28px 20px;margin:16px}
}

@media(max-width:480px){
  .metrics{grid-template-columns:1fr}
  .aff-stat-grid{grid-template-columns:1fr}
  .lp-h1{font-size:clamp(36px,10vw,60px)}
  .pay-options{grid-template-columns:1fr 1fr 1fr}
  .tab-row{width:100%}
  .tab-btn{flex:1;text-align:center}
}
/* ── Social buttons ─────────────────────────────── */
.social-btns{display:flex;align-items:center;gap:8px}
.social-btn,.social-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;text-decoration:none;transition:all .18s;border:1px solid transparent;white-space:nowrap;letter-spacing:-0.01em}
.social-btn svg,.social-pill svg{flex-shrink:0}
.social-btn-tw,.social-pill-tw{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.09);color:var(--white3)}
.social-btn-tw:hover,.social-pill-tw:hover{background:rgba(255,255,255,0.11);border-color:rgba(255,255,255,0.18);color:var(--white)}
.social-btn-tg,.social-pill-tg{background:rgba(36,161,222,0.1);border-color:rgba(36,161,222,0.2);color:#60bce8}
.social-btn-tg:hover,.social-pill-tg:hover{background:rgba(36,161,222,0.18);border-color:rgba(36,161,222,0.35);color:#90d4f8}
.social-btn-dc,.social-pill-dc{background:rgba(88,101,242,0.1);border-color:rgba(88,101,242,0.2);color:#9aa3f5}
.social-btn-dc:hover,.social-pill-dc:hover{background:rgba(88,101,242,0.18);border-color:rgba(88,101,242,0.38);color:#b8bef8}


/* ── Bootstrap Navbar Override ── */
.navbar-default {
  background: var(--black2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-top: none !important;
  min-height: 52px !important;
}
.navbar-default .navbar-brand {
  color: var(--white) !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  padding: 14px 20px !important;
}
.navbar-default .navbar-brand img {
  max-height: 28px !important;
}
.navbar-default .navbar-nav > li > a {
  color: var(--white3) !important;
  font-size: 13px !important;
  padding: 16px 14px !important;
  transition: color .15s !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--white) !important;
  background: transparent !important;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover {
  color: var(--accent) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--accent) !important;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover {
  background: var(--black3) !important;
  color: var(--white) !important;
}
.navbar-default .navbar-toggle {
  border-color: rgba(255,255,255,0.15) !important;
}
.navbar-default .navbar-toggle .icon-bar {
  background: var(--white3) !important;
}
.navbar-default .navbar-collapse {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.dropdown-menu {
  background: var(--black2) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.dropdown-menu > li > a {
  color: var(--white3) !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}
.dropdown-menu > li > a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--white) !important;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: rgba(155,89,245,0.15) !important;
  color: var(--accent) !important;
}
.navbar-default .badge {
  background: rgba(155,89,245,0.15) !important;
  color: var(--accent) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
}
/* Balance badge in navbar */
.dropdown-currencies .badge {
  background: rgba(155,89,245,0.12) !important;
  color: var(--accent) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-family: 'DM Mono', monospace !important;
}
/* Page body padding */
body > .container-fluid {
  padding: 28px 32px !important;
  max-width: 1400px !important;
}
@media(max-width:768px) {
  body > .container-fluid { padding: 16px !important; }
}

/* ── Bootstrap overrides for dark theme ── */
.well {
  background: var(--black2) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--white2) !important;
}
.panel, .panel-body, .panel-default {
  background: var(--black2) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--white2) !important;
}
.panel-heading {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--white) !important;
}
.border-solid { border: 1px solid rgba(255,255,255,0.08) !important; }
.border-rounded { border-radius: 10px !important; }
/* PP search dropdown */
.search-dropdown .input-wrapper input,
#template-input {
  background: var(--black3) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--white) !important;
  border-radius: 8px !important;
  padding: 9px 12px 9px 34px !important;
}
/* PP custom select dropdowns */
.select-dropdown, .select-items {
  background: var(--black2) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: var(--white2) !important;
}
.select-selected, .select-items div {
  background: transparent !important;
  color: var(--white2) !important;
}
.select-items div:hover, .same-as-selected {
  background: rgba(155,89,245,0.1) !important;
  color: var(--accent) !important;
}
/* PP order form fields injected into #fields */
#fields .form-group label { color: var(--white3) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
#fields .form-control,
#fields input,
#fields textarea,
#fields select { background: var(--black3) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: var(--white) !important; border-radius: 8px !important; padding: 9px 12px !important; width: 100% !important; font-size: 13px !important; }
/* Charge field */
#charge { background: var(--black3) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: var(--accent) !important; border-radius: 8px !important; padding: 9px 12px !important; width: 100% !important; font-family: 'DM Mono', monospace !important; }
/* addfunds instruction well */
#addfunds-instruction, .addfunds-text {
  background: rgba(155,89,245,0.06) !important;
  border: 1px solid rgba(155,89,245,0.2) !important;
  border-radius: 10px !important;
  color: var(--white3) !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
}

/* ── Balance — bigger & more appealing ── */
.smm-topbar .smm-bal {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(155,89,245,0.1);
  border: 1px solid rgba(155,89,245,0.2);
  border-radius: 8px;
  padding: 6px 14px;
  letter-spacing: -0.01em;
}

/* ── PP custom select widget — force dark ── */
.select-selected,
div.select-selected,
.custom-select .select-selected {
  background: var(--black3) !important;
  background-color: var(--black3) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--white2) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
}
.select-selected:after {
  border-color: var(--white4) transparent transparent transparent !important;
}
.select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--white4) transparent !important;
}
.select-items,
div.select-items {
  background: var(--black2) !important;
  background-color: var(--black2) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  z-index: 999 !important;
  overflow: hidden !important;
}
.select-items div {
  background: transparent !important;
  color: var(--white3) !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  border: none !important;
}
.select-items div:hover, .select-items .same-as-selected {
  background: rgba(155,89,245,0.12) !important;
  color: var(--accent) !important;
}
/* PP search-dropdown input */
.search-dropdown input[type="text"],
#template-input {
  background: var(--black3) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--white) !important;
  border-radius: 8px !important;
}
/* Bootstrap table inside .well / api */
.table { color: var(--white2) !important; }
.table > thead > tr > th {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--white4) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 500 !important;
}
.table > tbody > tr > td {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  color: var(--white2) !important;
}
.table-bordered { border: 1px solid rgba(255,255,255,0.07) !important; }
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
  border: 1px solid rgba(255,255,255,0.07) !important;
}
pre {
  background: var(--black3) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--white3) !important;
  border-radius: 8px !important;
}

/* ── Beat PP inline styles on select widgets using [style] attribute selectors ── */
.select-selected[style],
div.select-selected[style] {
  background-color: #181818 !important;
  color: #d8d4cc !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.select-items[style],
div.select-items[style] {
  background-color: #101010 !important;
}
/* Also target any custom-select wrapper PP might use */
.custom-select-container .select-selected {
  background-color: #181818 !important;
  color: #d8d4cc !important;
}

/* ════════════════════════════════════════
   MOBILE RESPONSIVE — PANEL PAGES
════════════════════════════════════════ */
@media(max-width:900px){
  /* neworder grid */
  .order-grid{grid-template-columns:1fr!important;gap:16px!important}
  /* tables */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
  .tbl th,.tbl td{padding:9px 10px!important;font-size:12.5px!important}
  /* metrics */
  .metrics-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  /* addfunds payment options */
  #pay-opts{grid-template-columns:1fr 1fr!important}
  /* services search bar */
  .svc-search{flex-direction:column!important;gap:8px!important}
  .svc-search .inp{max-width:100%!important;width:100%}
  /* cards */
  .card{border-radius:10px!important}
  /* page headings */
  .page-h{font-size:20px!important}
  /* tabs */
  .tabs{flex-wrap:wrap;gap:4px}
  /* affiliates */
  .aff-stats{grid-template-columns:1fr 1fr!important;gap:12px!important}
}
@media(max-width:480px){
  .metrics-grid{grid-template-columns:1fr!important}
  #pay-opts{grid-template-columns:1fr!important}
  .tbl th,.tbl td{padding:8px 8px!important;font-size:12px!important}
  .page-h{font-size:18px!important}
  .btn{font-size:12px!important;padding:7px 12px!important}
  .btn-lg{font-size:13px!important;padding:10px 18px!important}
}

/* ── Nuclear override: force dark on ALL select widget elements ── */
.select-selected,
.select-selected *,
div[class*="select-selected"],
.custom-select > div:first-child {
  background: #181818 !important;
  background-color: #181818 !important;
  color: #d8d4cc !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.select-items,
.select-items *,
div[class*="select-items"] {
  background: #101010 !important;
  background-color: #101010 !important;
  color: #a09890 !important;
}
.select-items div:hover,
.select-items .same-as-selected {
  background: rgba(155,89,245,0.12) !important;
  color: #9b59f5 !important;
}
/* Force dark on any injected inline-style select containers */
*[style*="background: white"] { background: #181818 !important; }
*[style*="background: rgb(255, 255, 255)"] { background: #181818 !important; }
*[style*="background-color: white"] { background-color: #181818 !important; }
*[style*="background-color: rgb(255, 255, 255)"] { background-color: #181818 !important; }