/* Just Numbers Online – Premium Dark UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  --bg: #070b14; --bg-elevated: #0d1220; --bg-card: #121826; --bg-card-hover: #1a2234;
  --bg-input: #0c1220; --border: #1c2438; --border-light: #2a3548; --text: #f1f5f9;
  --text-secondary: #94a3b8; --text-muted: #64748b; --primary: #6366f1; --primary-hover: #818cf8;
  --primary-glow: rgba(99,102,241,.35); --purple: #8b5cf6; --success: #10b981; --warning: #f59e0b;
  --danger: #ef4444; --info: #3b82f6;
  --gradient: linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a78bfa 100%);
  --gradient-soft: linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1));
  --radius: 16px; --radius-sm: 10px; --shadow: 0 8px 32px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.5); --transition: all .2s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh;margin:0;line-height:1.6;-webkit-font-smoothing:antialiased;
background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(99,102,241,.12),transparent),radial-gradient(ellipse 60% 40% at 100% 0%,rgba(139,92,246,.08),transparent)}
a{color:var(--primary-hover);text-decoration:none;transition:var(--transition)} a:hover{color:#c4b5fd}
.navbar-jn{background:rgba(7,11,20,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:.7rem 0;position:sticky;top:0;z-index:1000}
.navbar-jn .nav-link{color:var(--text-secondary)!important;font-weight:500;font-size:.9rem;padding:.4rem .9rem!important;border-radius:8px;transition:var(--transition)}
.navbar-jn .nav-link:hover,.navbar-jn .nav-link.active{color:#fff!important;background:rgba(255,255,255,.05)}
.brand{font-weight:800;font-size:1.1rem;color:#fff!important;letter-spacing:-.03em;display:flex;align-items:center;gap:.5rem}
.brand span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.brand-icon{width:32px;height:32px;background:var(--gradient);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff}
.btn-primary-jn{background:var(--gradient);border:none;color:#fff!important;font-weight:600;font-size:.9rem;padding:.65rem 1.5rem;border-radius:999px;transition:var(--transition);box-shadow:0 4px 20px var(--primary-glow)}
.btn-primary-jn:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--primary-glow);filter:brightness(1.08);color:#fff!important}
.btn-primary-jn:disabled{opacity:.6;transform:none;cursor:not-allowed}
.btn-outline-jn{border:1px solid var(--border-light);color:var(--text)!important;border-radius:999px;padding:.55rem 1.25rem;background:transparent;font-weight:500;font-size:.875rem;transition:var(--transition)}
.btn-outline-jn:hover{background:rgba(255,255,255,.06);border-color:var(--primary);color:#fff!important}
.card-jn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}
.card-jn:hover{border-color:var(--border-light);box-shadow:var(--shadow)}
.card-service{position:relative;overflow:hidden;height:100%;display:flex;flex-direction:column}
.card-service:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.4);box-shadow:0 12px 40px rgba(99,102,241,.15)}
.badge-tag{position:absolute;top:14px;right:14px;font-size:.68rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;letter-spacing:.02em;text-transform:uppercase;z-index:2}
.badge-popular{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff}
.badge-bestseller{background:linear-gradient(135deg,#dc2626,#f87171);color:#fff}
.badge-fast{background:linear-gradient(135deg,#059669,#34d399);color:#fff}
.badge-bestvalue{background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff}
.platform-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:1rem;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.platform-icon.instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.platform-icon.tiktok{background:#010101;color:#fff;border:1px solid #333}
.platform-icon.youtube{background:#ff0000;color:#fff}
.platform-icon.facebook{background:#1877f2;color:#fff}
.platform-icon.spotify{background:#1db954;color:#fff}
.platform-icon.telegram{background:#0088cc;color:#fff}
.price{font-size:1.75rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.price small{font-size:.85rem;color:var(--text-muted);font-weight:500}
.hero{padding:5rem 0 4rem;position:relative;overflow:hidden}
.hero h1{font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:800;line-height:1.1;letter-spacing:-.04em}
.hero h1 .grad{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .lead{font-size:1.1rem;color:var(--text-secondary);max-width:480px}
.hero-visual{position:relative;height:420px;display:flex;justify-content:center;align-items:center}
.hero-phone{width:240px;height:420px;background:linear-gradient(160deg,#1a2236,#0d1220);border-radius:36px;border:3px solid #2a3548;box-shadow:0 30px 60px -15px rgba(0,0,0,.7);position:relative;z-index:2}
.floating-icon{position:absolute;width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.filter-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.filter-pills .btn{border-radius:999px;padding:.45rem 1.1rem;font-size:.85rem;font-weight:500;border:1px solid var(--border);background:transparent;color:var(--text-secondary);transition:var(--transition)}
.filter-pills .btn.active,.filter-pills .btn:hover{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 15px var(--primary-glow)}
.features-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;padding:2.5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:3rem 0}
.feature-item{text-align:center;padding:1rem}
.feature-item .icon-wrap{width:52px;height:52px;margin:0 auto .75rem;border-radius:14px;background:var(--gradient-soft);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--primary-hover)}
.form-control-jn,.form-select-jn{background:var(--bg-input)!important;border:1px solid var(--border-light)!important;color:var(--text)!important;border-radius:var(--radius-sm);padding:.7rem 1rem;font-size:.925rem;transition:var(--transition)}
.form-control-jn:focus,.form-select-jn:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-glow)!important;outline:none}
.form-control-jn::placeholder{color:var(--text-muted)}
.form-label{color:var(--text-secondary);font-size:.825rem;font-weight:600;margin-bottom:.4rem}
.badge{font-weight:600;padding:.35em .7em;border-radius:6px;font-size:.75rem}
.badge-success{background:rgba(16,185,129,.15);color:#34d399}
.badge-warning{background:rgba(245,158,11,.15);color:#fbbf24}
.badge-danger{background:rgba(239,68,68,.15);color:#f87171}
.badge-info{background:rgba(59,130,246,.15);color:#60a5fa}
.badge-primary{background:rgba(99,102,241,.15);color:#a5b4fc}
.badge-secondary{background:rgba(100,116,139,.15);color:#94a3b8}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem;transition:var(--transition);position:relative;overflow:hidden}
.stat-card:hover{border-color:var(--border-light);transform:translateY(-2px)}
.stat-card .value{font-size:1.75rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.stat-card .label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:.35rem}
.stat-card .change{font-size:.8rem;font-weight:500}
.stat-card .change.up{color:var(--success)}
.stat-card .change.down{color:var(--danger)}
.sidebar-jn{background:var(--bg-elevated);border-right:1px solid var(--border);min-height:100vh;width:250px;position:fixed;left:0;top:0;padding:1.25rem 0;z-index:100;overflow-y:auto}
.sidebar-jn .nav-link{color:var(--text-secondary);padding:.65rem 1.25rem;border-radius:10px;margin:2px 12px;display:flex;align-items:center;gap:.75rem;font-size:.875rem;font-weight:500;transition:var(--transition)}
.sidebar-jn .nav-link:hover{background:rgba(255,255,255,.04);color:#fff}
.sidebar-jn .nav-link.active{background:var(--gradient-soft);color:#fff;box-shadow:inset 3px 0 0 var(--primary)}
.sidebar-jn .nav-link i{width:20px;text-align:center;font-size:.95rem;opacity:.85}
.main-content{margin-left:250px;padding:1.75rem;min-height:100vh}
.table-jn{width:100%;color:var(--text);border-collapse:collapse}
.table-jn th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:700;border-bottom:1px solid var(--border);padding:.85rem 1rem;text-align:left}
.table-jn td{padding:.9rem 1rem;border-bottom:1px solid var(--border);vertical-align:middle;font-size:.9rem}
.table-jn tbody tr:hover td{background:rgba(255,255,255,.025)}
.checkout-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}
.success-icon{width:88px;height:88px;border-radius:50%;background:rgba(16,185,129,.12);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--success);margin:0 auto 1.5rem;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes scaleIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.toast-container-jn{position:fixed;top:80px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:.75rem}
.toast-jn{background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;padding:1rem 1.25rem;min-width:300px;box-shadow:var(--shadow-lg);display:flex;align-items:flex-start;gap:.75rem;animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast-jn.success{border-left:3px solid var(--success)}
.toast-jn.error{border-left:3px solid var(--danger)}
.toast-jn.info{border-left:3px solid var(--info)}
.spinner-jn{width:20px;height:20px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.page-enter{animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.modal-content{background:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;color:var(--text)}
.modal-header,.modal-footer{border-color:var(--border)!important}
.btn-close-white{filter:invert(1)}
.chart-container{position:relative;height:260px;width:100%}
.text-muted{color:var(--text-muted)!important}
.text-secondary{color:var(--text-secondary)!important}
.bg-card{background:var(--bg-card)!important}
.border-jn{border-color:var(--border)!important}
.rounded-jn{border-radius:var(--radius)!important}
@media (max-width:991px){.sidebar-jn{transform:translateX(-100%);transition:transform .3s ease}.sidebar-jn.show{transform:translateX(0)}.main-content{margin-left:0}.hero-phone{display:none}.hero{padding:3rem 0 2rem}}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}
.form-check-input{background-color:var(--bg-input);border-color:var(--border-light)}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-check-label{color:var(--text-secondary);font-size:.9rem}
.accordion-button{background:transparent!important;color:var(--text)!important;box-shadow:none!important;font-weight:600}
.accordion-button::after{filter:invert(1)}
.accordion-body{color:var(--text-secondary)}


/* Light theme */
html[data-theme="light"] body,
html[data-theme="light"] {
  --bg:#f8fafc; --card:#ffffff; --text:#0f172a; --muted:#64748b; --border:#e2e8f0;
}
html[data-theme="light"] body { background:#f1f5f9 !important; color:#0f172a !important; }
html[data-theme="light"] .checkout-box,
html[data-theme="light"] .card-jn { background:#fff !important; border-color:#e2e8f0 !important; color:#0f172a !important; }
html[data-theme="light"] .form-control-jn, html[data-theme="light"] .form-select-jn {
  background:#fff !important; color:#0f172a !important; border-color:#cbd5e1 !important;
}
html[data-theme="light"] .table-dark { --bs-table-bg:#fff; --bs-table-color:#0f172a; color:#0f172a; }