:root{--sidebar:272px;--ink:#172033;--muted:#68758a;--line:#e8edf4;--surface:#fff;--canvas:#f5f7fb;--navy:#0f172a;--navy-2:#16213b;--primary:#3563e9;--primary-soft:#edf2ff;--success:#13a768;--warning:#f59e0b;--danger:#e5484d;--radius:18px;--shadow:0 12px 35px rgba(25,42,70,.07)}
*{box-sizing:border-box}html,body{min-height:100%;background:var(--canvas)}body{min-height:100vh;margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}.min-w-0{min-width:0}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:1040;display:flex;flex-direction:column;padding:24px 18px 20px;overflow-y:auto;color:#fff;background:radial-gradient(circle at 10% -10%,#294279 0,transparent 34%),linear-gradient(165deg,var(--navy-2),var(--navy) 55%)}
.brand{display:flex;align-items:center;gap:12px;padding:4px 10px 24px;color:#fff;text-decoration:none}.brand-mark{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:14px;color:#fff;background:linear-gradient(145deg,#5d83f5,#3159d6);box-shadow:0 8px 24px rgba(53,99,233,.38);font-size:1.25rem}.brand b,.brand small{display:block;line-height:1.1}.brand b{font-size:1.02rem}.brand small{margin-top:4px;color:#8da7e8;font-size:.65rem;font-weight:800;letter-spacing:.18em}
.app-nav{display:flex;flex-direction:column;gap:5px}.nav-section-label{padding:7px 14px;color:#687b9e;font-size:.65rem;font-weight:800;letter-spacing:.15em}.app-nav-link{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 13px;border-radius:12px;color:#aebbd0;text-decoration:none;font-size:.875rem;font-weight:620;transition:.18s}.app-nav-link i{width:21px;text-align:center}.app-nav-link:hover{color:#fff;background:rgba(255,255,255,.06);transform:translateX(2px)}.app-nav-link.active{color:#fff;background:linear-gradient(100deg,rgba(76,117,239,.95),rgba(65,96,205,.8));box-shadow:0 8px 24px rgba(20,41,104,.3)}.app-nav-link.active::after{content:"";position:absolute;right:9px;width:4px;height:4px;border-radius:50%;background:#fff}
.sidebar-foot{margin-top:auto;padding-top:22px}.user-chip{display:flex;align-items:center;gap:10px;padding:12px 9px;margin-bottom:8px;border-top:1px solid rgba(255,255,255,.08);color:inherit;text-decoration:none}.user-avatar,.top-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#f4c35c,#e99924);color:#422d05;font-weight:800}.user-avatar{width:38px;height:38px;flex:0 0 38px}.user-chip b{color:#fff;font-size:.83rem}.user-chip small{color:#8291aa;font-size:.72rem}.btn-logout{color:#98a8bf;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);font-size:.82rem}
.app-shell{min-height:100vh;margin-left:var(--sidebar)}.topbar{position:sticky;top:0;z-index:1020;height:76px;display:flex;align-items:center;gap:16px;padding:0 clamp(20px,3vw,42px);border-bottom:1px solid rgba(226,232,240,.9);background:rgba(255,255,255,.89);backdrop-filter:blur(16px)}.topbar-copy{display:flex;flex-direction:column}.topbar-copy b{font-size:.98rem}.eyebrow{font-size:.64rem;font-weight:800;letter-spacing:.14em;color:#8995a8}.topbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.status-pill{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 12px;border:1px solid #e6ebf2;border-radius:999px;background:#fff;color:#536176;font-size:.75rem;font-weight:650;text-decoration:none}.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(19,167,104,.12)}.pulse-dot.offline{background:var(--danger);box-shadow:0 0 0 5px rgba(229,72,77,.12)}.top-avatar{width:38px;height:38px;text-decoration:none}.content-wrap{width:100%;max-width:1680px;margin:0 auto;padding:34px clamp(20px,3vw,42px) 24px}.mobile-menu-btn{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);background:#fff;font-size:1.5rem}.mobile-drawer{width:min(88vw,320px);color:#fff;background:linear-gradient(165deg,var(--navy-2),var(--navy))}.mobile-drawer .offcanvas-header{padding:20px 18px 4px}.mobile-drawer .brand{padding-bottom:12px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.page-heading h1{margin:5px 0 4px;font-size:clamp(1.55rem,2vw,2rem);font-weight:780;letter-spacing:-.035em}.page-heading p{margin:0;color:var(--muted);font-size:.91rem}.btn{border-radius:11px;font-weight:650}.btn-primary{border-color:var(--primary);background:var(--primary);box-shadow:0 7px 18px rgba(53,99,233,.18)}.btn-action{min-height:44px;padding-inline:18px}
.panel,.metric,.login-card,.setup-card,.search-card,.status-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.panel{padding:22px}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;margin-bottom:22px}.metric{position:relative;min-height:108px;padding:20px;overflow:hidden}.metric strong{display:block;font-size:1.65rem;letter-spacing:-.04em}.metric span{display:block;margin-top:6px;color:var(--muted);font-size:.76rem}.metric::after{content:"";position:absolute;width:70px;height:70px;right:-28px;top:-28px;border-radius:50%;background:var(--primary-soft)}
.table{font-size:.82rem}.table thead th{padding:12px 13px;border-bottom-color:var(--line);color:#8a95a8;font-size:.65rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.table tbody td{padding:13px;border-bottom-color:#eff2f6;vertical-align:middle}.badge-soft,.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.68rem;font-weight:750}.badge-soft,.status-badge.active{color:#087a47;background:#e8f9f1}.status-badge.paused{color:#9b5c06;background:#fff4db}.status-badge i{font-size:.42rem}
.form-control,.form-select{min-height:44px;border-color:#dfe5ed;border-radius:11px;color:var(--ink);font-size:.88rem}.form-control:focus,.form-select:focus{border-color:#91a9f3;box-shadow:0 0 0 .22rem rgba(53,99,233,.12)}.form-label{color:#4d596c;font-size:.76rem;font-weight:700}.input-icon{position:relative}.input-icon>i{position:absolute;z-index:2;left:14px;top:50%;transform:translateY(-50%);color:#8b98ac}.input-icon .form-control{padding-left:42px}
.filter-picker{height:100%;padding:15px;border:1px solid #e2e8f1;border-radius:15px;background:#fbfcfe}.picker>b{display:block;margin-bottom:10px}.chips{display:flex;flex-wrap:wrap;gap:7px;max-height:245px;overflow:auto}.chips input{position:absolute;opacity:0}.chips span,.tag-values button{display:block;padding:7px 10px;border:1px solid #dce4ef;border-radius:999px;background:#fff;color:#586579;font-size:12px;cursor:pointer}.chips input:checked+span{border-color:#89a4f2;background:#eaf0ff;color:#2e54c8}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tag-box{display:flex;gap:8px}.tag-values{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.tag-values button{color:#087a47;background:#eaf9f2}
.admin-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.admin-actions form{display:flex;gap:5px}.admin-actions .form-select{width:135px}.admin-actions .form-control{width:76px}.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.plan-card{padding:21px}.plan-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.plan-card-head i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:var(--primary);background:var(--primary-soft)}
.listing-link{display:flex;align-items:center;gap:11px;min-width:240px;color:var(--ink);text-decoration:none}.listing-link img,.listing-placeholder{width:52px;height:42px;flex:0 0 52px;border-radius:10px;object-fit:cover}.listing-placeholder{display:grid;place-items:center;background:#edf1f6}.mobile-listings{display:grid;gap:10px}.mobile-listing-card{display:block;padding:14px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:#fff;text-decoration:none}.mobile-listing-top{display:flex;align-items:center;gap:10px}.mobile-listing-bottom{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid #edf1f5}.mobile-listing-bottom strong{color:var(--primary)}
.login-bg{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at 10% 10%,#294a89,transparent 35%),linear-gradient(145deg,#17284c,#0e1629 70%)}.login-card,.setup-card{width:min(92vw,450px);padding:38px;border-radius:24px}.login-card h1,.setup-card h1{font-size:1.7rem;font-weight:780}.app-alert{display:flex;align-items:center;gap:11px;border:0;border-radius:13px;box-shadow:var(--shadow)}.app-footer{display:flex;justify-content:space-between;margin-top:32px;padding:18px 2px 0;border-top:1px solid var(--line);color:#98a2b1;font-size:.72rem}.app-footer a{color:#6f7d91;text-decoration:none}.expired,.bad{color:var(--danger)}.ok{color:var(--success)}
@media(max-width:1199.98px){.metrics{grid-template-columns:repeat(3,1fr)}.plan-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:991.98px){.app-shell{margin-left:0}.topbar{height:68px;padding-inline:18px}.content-wrap{padding-top:25px}}
@media(max-width:767.98px){.content-wrap{padding:20px 14px 18px}.page-heading{align-items:stretch;flex-direction:column;margin-bottom:20px}.metrics{grid-template-columns:repeat(2,1fr);gap:10px}.metric{min-height:96px;padding:14px}.panel{padding:16px;border-radius:16px}.filter-grid,.plan-grid{grid-template-columns:1fr}.table-responsive{margin-inline:-16px}.admin-actions,.admin-actions form{align-items:stretch;flex-direction:column}.admin-actions .form-select,.admin-actions .form-control,.admin-actions button{width:100%}.login-card{padding:27px 22px}.status-pill{padding-inline:10px}}