/* ============================================================ NOVA — modern SaaS design system for the SMM panel Mobile-first. Light + dark via .nv-dark on . ============================================================ */ :root{ --nv-accent:#C7521F; --nv-accent-2:#D9A521; --nv-accent-press:#A8431F; --nv-accent-soft:rgba(199,82,31,.12); --nv-accent-ring:rgba(199,82,31,.28); --nv-bg:#f6f7f9; --nv-surface:#ffffff; --nv-surface-2:#f1f3f7; --nv-text:#0f172a; --nv-text-soft:#475569; --nv-muted:#7c869a; --nv-border:#e7e9ef; --nv-border-2:#dfe2ea; --nv-ok:#10b981; --nv-okbg:rgba(16,185,129,.12); --nv-warn:#f59e0b; --nv-warnbg:rgba(245,158,11,.14); --nv-bad:#ef4444; --nv-badbg:rgba(239,68,68,.12); --nv-info:#3b82f6; --nv-infobg:rgba(59,130,246,.12); --nv-r:14px; --nv-r-sm:10px; --nv-r-lg:20px; --nv-sh:0 1px 2px rgba(16,24,40,.04),0 8px 24px -16px rgba(16,24,40,.18); --nv-sh-lg:0 24px 60px -24px rgba(16,24,40,.30); --nv-sb:264px; --nv-tb:64px; --nv-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } html.nv-dark{ --nv-bg:#0a0c11; --nv-surface:#13161d; --nv-surface-2:#1a1e27; --nv-text:#eef1f6; --nv-text-soft:#aeb6c6; --nv-muted:#7f8aa0; --nv-border:#232834; --nv-border-2:#2c323f; --nv-accent-soft:rgba(199,82,31,.20); --nv-sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px -18px rgba(0,0,0,.6); --nv-sh-lg:0 30px 70px -28px rgba(0,0,0,.75); } *{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%} body.nv{background:var(--nv-bg);color:var(--nv-text);font-family:var(--nv-font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%} /* prevent any media / injected content from forcing horizontal scroll */ .nv img,.nv video,.nv iframe,.nv table,.nv canvas{max-width:100%} .nv pre{white-space:pre-wrap;overflow-wrap:anywhere} .nv a{color:var(--nv-accent);text-decoration:none} .nv h1,.nv h2,.nv h3,.nv h4{margin:0;color:var(--nv-text);font-weight:700;letter-spacing:-.01em} .nv ::-webkit-scrollbar{width:10px;height:10px} .nv ::-webkit-scrollbar-thumb{background:var(--nv-border-2);border-radius:99px} .nv-hide{display:none!important} /* ---------- App shell ---------- */ .nv-app{min-height:100vh;display:flex} .nv-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--nv-sb);background:var(--nv-surface);border-right:1px solid var(--nv-border);display:flex;flex-direction:column;z-index:60;transition:transform .25s ease} .nv-brand{display:flex;align-items:center;gap:10px;padding:18px 20px;font-weight:800;font-size:18px;color:var(--nv-text)} .nv-brand img{max-height:30px;max-width:150px} .nv-nav{flex:1;overflow-y:auto;padding:8px 12px 16px} .nv-nav-group{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nv-muted);padding:14px 12px 6px} .nv-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--nv-r-sm);color:var(--nv-text-soft);font-weight:600;font-size:14.5px;margin-bottom:2px;transition:background .12s,color .12s} .nv-nav a i{width:20px;text-align:center;font-size:16px;opacity:.9} .nv-nav a:hover{background:var(--nv-surface-2);color:var(--nv-text)} .nv-nav a.active{background:var(--nv-accent-soft);color:var(--nv-accent)} .nv-nav a.active i{color:var(--nv-accent)} .nv-side-foot{padding:14px 16px;border-top:1px solid var(--nv-border);font-size:12px;color:var(--nv-muted)} .nv-shell{flex:1;min-width:0;margin-left:var(--nv-sb);display:flex;flex-direction:column} .nv-topbar{position:sticky;top:0;z-index:50;height:var(--nv-tb);display:flex;align-items:center;gap:12px;padding:0 22px;background:color-mix(in srgb,var(--nv-surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--nv-border)} .nv-burger{display:none;background:none;border:0;color:var(--nv-text);font-size:20px;cursor:pointer;padding:6px;flex:none} .nv-page-title{font-weight:700;font-size:17px;min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nv-top-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none;min-width:0} .nv-content{padding:22px;max-width:1280px;width:100%;margin:0 auto} /* pill (balance / currency / account) */ .nv-pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:99px;background:var(--nv-surface-2);border:1px solid var(--nv-border);color:var(--nv-text);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap} .nv-pill.accent{background:var(--nv-accent);border-color:transparent;color:#fff} .nv-pill i{font-size:13px;opacity:.8} .nv-icon-btn{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;background:var(--nv-surface-2);border:1px solid var(--nv-border);color:var(--nv-text);cursor:pointer} /* dropdown */ .nv-dd{position:relative} .nv-dd-menu{position:absolute;right:0;top:46px;min-width:200px;background:var(--nv-surface);border:1px solid var(--nv-border);border-radius:var(--nv-r);box-shadow:var(--nv-sh-lg);padding:6px;display:none;z-index:80} .nv-dd.open .nv-dd-menu{display:block} .nv-dd-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--nv-r-sm);color:var(--nv-text-soft);font-weight:600;font-size:14px} .nv-dd-menu a:hover{background:var(--nv-surface-2);color:var(--nv-text)} /* ---------- Cards ---------- */ .nv-card{background:var(--nv-surface);border:1px solid var(--nv-border);border-radius:var(--nv-r);padding:20px;box-shadow:var(--nv-sh)} .nv-card.flush{padding:0;overflow:hidden} .nv-card-h{display:flex;align-items:center;gap:10px;margin-bottom:16px} .nv-card-h h3{font-size:16px} .nv-card-h .sub{color:var(--nv-muted);font-size:13px;font-weight:500} /* stat cards */ .nv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .nv-stat{background:var(--nv-surface);border:1px solid var(--nv-border);border-radius:var(--nv-r);padding:18px;box-shadow:var(--nv-sh);position:relative} .nv-stat .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--nv-accent-soft);color:var(--nv-accent);margin-bottom:14px} .nv-stat .lbl{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--nv-muted)} .nv-stat .val{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:4px} .nv-stat.s-green .ic{background:var(--nv-okbg);color:var(--nv-ok)} .nv-stat.s-amber .ic{background:var(--nv-warnbg);color:var(--nv-warn)} .nv-stat.s-blue .ic{background:var(--nv-infobg);color:var(--nv-info)} /* ---------- Buttons ---------- */ .nv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--nv-r-sm);border:1px solid transparent;background:var(--nv-accent);color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;transition:filter .12s,transform .05s;text-decoration:none;font-family:inherit} .nv-btn:hover{filter:brightness(1.06)} .nv-btn:active{transform:translateY(1px)} .nv-btn.block{width:100%} .nv-btn.ghost{background:var(--nv-surface);border-color:var(--nv-border);color:var(--nv-text)} .nv-btn.ghost:hover{background:var(--nv-surface-2)} .nv-btn.soft{background:var(--nv-accent-soft);color:var(--nv-accent)} .nv-btn.danger{background:var(--nv-bad)} .nv-btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:9px} .nv-btn[disabled]{opacity:.55;cursor:not-allowed} /* ---------- Forms ---------- */ .nv-field{margin-bottom:16px} .nv-label{display:block;font-weight:700;font-size:13.5px;color:var(--nv-text-soft);margin-bottom:7px} .nv-input,.nv-select,.nv-textarea{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--nv-border-2);border-radius:var(--nv-r-sm);background:var(--nv-surface);color:var(--nv-text);font-size:15px;font-family:inherit;outline:none;transition:border-color .12s,box-shadow .12s} .nv-textarea{height:auto;padding:12px 14px;resize:vertical;min-height:110px} .nv-input:focus,.nv-select:focus,.nv-textarea:focus{border-color:var(--nv-accent);box-shadow:0 0 0 4px var(--nv-accent-ring)} .nv-input::placeholder,.nv-textarea::placeholder{color:var(--nv-muted)} .nv-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%237c869a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px} .nv-select option,.nv-select optgroup{background:var(--nv-surface);color:var(--nv-text)} .nv-hint{font-size:12.5px;color:var(--nv-muted);margin-top:7px} /* chips (network / quick filters) */ .nv-chips{display:flex;flex-wrap:wrap;gap:8px} .nv-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1.5px solid var(--nv-border-2);border-radius:99px;background:var(--nv-surface);color:var(--nv-text);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:all .12s} .nv-chip:hover{border-color:var(--nv-accent)} .nv-chip.active{background:var(--nv-accent);border-color:transparent;color:#fff} .nv-chip.active i{color:#fff!important} /* ---------- Tabs ---------- */ .nv-tabs{display:inline-flex;gap:4px;background:var(--nv-surface-2);border:1px solid var(--nv-border);border-radius:12px;padding:4px} .nv-tab{flex:1;text-align:center;padding:9px 16px;border-radius:9px;font-weight:700;font-size:14px;color:var(--nv-text-soft);cursor:pointer;border:0;background:none;white-space:nowrap} .nv-tab.active{background:var(--nv-surface);color:var(--nv-text);box-shadow:var(--nv-sh)} /* ---------- Badges ---------- */ .nv-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap} .nv-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .b-ok{background:var(--nv-okbg);color:var(--nv-ok)} .b-warn{background:var(--nv-warnbg);color:var(--nv-warn)} .b-info{background:var(--nv-infobg);color:var(--nv-info)} .b-bad{background:var(--nv-badbg);color:var(--nv-bad)} .b-mut{background:var(--nv-surface-2);color:var(--nv-muted)} /* ---------- Tables ---------- */ .nv-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--nv-border);border-radius:var(--nv-r);background:var(--nv-surface)} .nv-table{width:100%;border-collapse:collapse;font-size:14px} .nv-table th{text-align:left;padding:13px 16px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--nv-muted);border-bottom:1px solid var(--nv-border);white-space:nowrap} .nv-table td{padding:14px 16px;border-bottom:1px solid var(--nv-border);color:var(--nv-text-soft);vertical-align:middle;overflow-wrap:anywhere;word-break:break-word} .nv-table tr:last-child td{border-bottom:0} .nv-table tbody tr:hover td{background:var(--nv-surface-2)} /* grid utils */ .nv-row{display:grid;gap:20px} .nv-row.c2{grid-template-columns:1.6fr 1fr} /* grid/flex children default to min-width:auto and won't shrink below their content — a long unbreakable string then blows out the track and scrolls the page. Force shrink. */ .nv-row>*,.nv-content>*{min-width:0} .nv-mt{margin-top:20px}.nv-mb{margin-bottom:20px} /* alerts */ .nv-alert{display:flex;gap:10px;padding:13px 16px;border-radius:var(--nv-r-sm);font-weight:600;font-size:14px;margin-bottom:16px} .nv-alert.ok{background:var(--nv-okbg);color:var(--nv-ok)} .nv-alert.err{background:var(--nv-badbg);color:var(--nv-bad)} /* order summary */ .nv-os .row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:14px;color:var(--nv-text-soft)} .nv-os .row+.row{border-top:1px solid var(--nv-border)} .nv-os .row b{color:var(--nv-text);font-weight:700;text-align:right} .nv-os .total{padding-top:12px;margin-top:4px;border-top:2px solid var(--nv-border)} .nv-os .total b{font-size:22px;color:var(--nv-accent)} /* mobile bottom nav */ .nv-bottomnav{display:none} .nv-scrim{display:none;position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:55} /* ---------- Normalize server-injected (AJAX) fields to Nova look ---------- */ .nv .form-group{margin-bottom:16px} .nv .control-label,.nv label.control-label,.nv #neworder_fields label,.nv #addfunds_fields label{display:block;font-weight:700;font-size:13.5px;color:var(--nv-text-soft);margin-bottom:7px} .nv #neworder_fields input,.nv #neworder_fields select,.nv #neworder_fields textarea, .nv #addfunds_fields input,.nv #addfunds_fields select,.nv #addfunds_fields textarea,.nv .form-control{ display:block;width:100%;min-height:46px;padding:0 14px;border:1.5px solid var(--nv-border-2);border-radius:var(--nv-r-sm); background:var(--nv-surface);color:var(--nv-text);font-size:15px;font-family:inherit;outline:none;transition:border-color .12s,box-shadow .12s;margin-bottom:14px} .nv #neworder_fields textarea,.nv #addfunds_fields textarea,.nv textarea.form-control{padding:12px 14px;min-height:104px;height:auto} .nv #neworder_fields input:focus,.nv #neworder_fields select:focus,.nv #addfunds_fields input:focus,.nv #addfunds_fields select:focus,.nv .form-control:focus{border-color:var(--nv-accent);box-shadow:0 0 0 4px var(--nv-accent-ring)} /* injected buttons -> Nova button */ .nv #addfunds_fields button,.nv #addfunds_fields input[type=submit],.nv #addfunds_fields .btn,.nv #neworder_fields button:not(.nv-tab){ display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-height:44px;padding:0 18px;border-radius:var(--nv-r-sm); border:0;background:var(--nv-accent);color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;margin-bottom:4px} .nv #addfunds_fields button:hover,.nv #addfunds_fields .btn:hover{filter:brightness(1.06)} .nv .panel-body.border-solid,.nv #service_description{background:var(--nv-surface-2);border:1px solid var(--nv-border);border-radius:var(--nv-r-sm);padding:12px 14px;color:var(--nv-text-soft);font-size:14px;line-height:1.6;margin-top:2px} .nv #neworder_fields .fields,.nv #neworder_fields > div,.nv #addfunds_fields .form-group{margin-bottom:14px} .nv #neworder_fields,.nv #addfunds_fields{color:var(--nv-text-soft);font-size:14px} /* server-injected HTML can carry long unbreakable strings / wide tables — contain them */ .nv #neworder_fields,.nv #addfunds_fields,.nv #service_description,.nv .panel-body.border-solid{max-width:100%;overflow-wrap:anywhere;word-break:break-word} .nv #neworder_fields *,.nv #addfunds_fields *{max-width:100%} .nv #neworder_fields table,.nv #addfunds_fields table{display:block;overflow-x:auto} /* charge box is redundant (order summary shows the total) — script.js force-shows it */ .nv #charge_div{display:none !important} /* ---------- Auth (login/signup/reset) standalone layout ---------- */ .nv-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(900px 500px at 50% -10%,var(--nv-accent-soft),transparent 60%),var(--nv-bg)} .nv-auth-card{width:100%;max-width:430px;background:var(--nv-surface);border:1px solid var(--nv-border);border-radius:var(--nv-r-lg);box-shadow:var(--nv-sh-lg);padding:34px 30px} .nv-auth-brand{text-align:center;margin-bottom:20px;font-weight:800;font-size:22px;color:var(--nv-text)} .nv-auth-brand img{max-height:42px;max-width:180px} .nv-auth-card h1{font-size:22px;text-align:center;margin-bottom:6px} .nv-auth-card .sub{text-align:center;color:var(--nv-muted);font-size:14px;margin-bottom:22px} .nv-auth-foot{text-align:center;margin-top:18px;font-size:14px;color:var(--nv-text-soft)} .nv-auth .g-recaptcha{display:flex;justify-content:center;margin:6px 0 4px} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ .nv-stats{grid-template-columns:repeat(2,1fr)} .nv-row.c2{grid-template-columns:1fr} } @media(max-width:860px){ .nv-sidebar{transform:translateX(-100%)} body.nv-drawer .nv-sidebar{transform:translateX(0);box-shadow:var(--nv-sh-lg)} body.nv-drawer .nv-scrim{display:block} .nv-shell{margin-left:0} .nv-burger{display:inline-block} .nv-content{padding:16px;padding-bottom:84px} /* mobile bottom nav */ .nv-bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:58;background:var(--nv-surface);border-top:1px solid var(--nv-border);padding:6px 6px calc(6px + env(safe-area-inset-bottom))} .nv-bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--nv-muted);font-size:10.5px;font-weight:700} .nv-bottomnav a i{font-size:18px} .nv-bottomnav a.active{color:var(--nv-accent)} /* tables become stacked cards */ .nv-table-wrap{border:0;background:none;overflow:visible} .nv-table thead{display:none} .nv-table,.nv-table tbody,.nv-table tr,.nv-table td{display:block;width:100%} .nv-table tr{background:var(--nv-surface);border:1px solid var(--nv-border);border-radius:var(--nv-r);margin-bottom:12px;padding:6px 14px;box-shadow:var(--nv-sh)} .nv-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;text-align:right;border-bottom:1px solid var(--nv-border);padding:11px 0;min-width:0;overflow-wrap:anywhere;word-break:break-word} .nv-table tr td:last-child{border-bottom:0} .nv-table td::before{content:attr(data-label);font-weight:700;color:var(--nv-text-soft);text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;flex:none;max-width:45%} .nv-table td[data-label=""]{justify-content:flex-end} .nv-table td[data-label=""]::before{content:"";display:none} /* let long links/service names inside cells wrap instead of pushing width */ .nv-table td a{overflow-wrap:anywhere;word-break:break-word;min-width:0} } @media(max-width:560px){ .nv-stats{grid-template-columns:1fr 1fr;gap:12px} .nv-stat{padding:14px}.nv-stat .val{font-size:21px} .nv-content{padding:12px;padding-bottom:84px} .nv-card{padding:16px} .nv-page-title{font-size:15px} .nv-topbar{padding:0 12px;gap:8px} .nv-top-right{gap:6px} } @media(max-width:380px){ .nv-stats{grid-template-columns:1fr} .nv-top-right .nv-hide-xs{display:none} }