*{margin:0;padding:0;box-sizing:border-box}
:root{--p:#7c3aed;--p2:#6d28d9;--bg:#09090b;--card:#18181b;--card2:#1e1e24;--text:#fafafa;--muted:#71717a;--ok:#22c55e;--err:#ef4444;--warn:#eab308;--b:#27272a}
body{font-family:-apple-system,'SF Pro','Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.screen{display:none}.screen.active{display:block}

/* Landing */
.landing{max-width:500px;margin:0 auto;padding:60px 20px;text-align:center;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.landing-logo{font-size:72px;margin-bottom:12px;filter:drop-shadow(0 0 30px rgba(124,58,237,.4))}
.landing h1{font-size:36px;background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.landing-sub{color:var(--muted);font-size:16px;margin-bottom:32px}
.landing-hint{color:var(--muted);font-size:13px;margin-top:12px}

.btn-big{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;border:none;padding:16px 40px;border-radius:14px;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s;width:100%;max-width:400px}
.btn-big:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.5)}
.btn-big:disabled{opacity:.5;cursor:wait}

.servers-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:400px;margin-bottom:24px}
.sp-item{background:var(--card);border:1px solid var(--b);border-radius:10px;padding:8px 4px;text-align:center;font-size:12px}
.sp-flag{font-size:20px;display:block;margin-bottom:2px}
.sp-flag-img{width:28px;height:20px;object-fit:cover;border-radius:4px;display:block;margin:0 auto 2px}
.sp-ping{color:var(--muted);font-size:10px}
.loading-small{grid-column:1/-1;color:var(--muted);padding:20px}

.claim-result{margin-top:32px;width:100%;max-width:500px;background:var(--card);border:1px solid var(--b);border-radius:16px;padding:24px}
.claim-result h2{margin-bottom:12px;font-size:20px}
.claim-result p{color:var(--muted);margin-bottom:10px;font-size:14px}
.sub-link-box{display:flex;gap:8px;margin-bottom:16px}
.sub-link-box input{flex:1;padding:12px;background:var(--bg);border:1px solid var(--b);border-radius:10px;color:var(--text);font-size:13px;font-family:monospace}
.sub-link-box input:focus{outline:none;border-color:var(--p)}
.claim-actions{display:flex;gap:8px}
.claim-actions .btn{flex:1;text-align:center;text-decoration:none;padding:12px;border-radius:10px;font-weight:600;font-size:14px}

/* Buttons */
.btn{padding:10px 18px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:inline-block}
.btn-primary{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(124,58,237,.4)}
.btn-secondary{background:var(--card2);color:var(--text);border:1px solid var(--b)}
.btn-small{padding:6px 12px;font-size:12px}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--b)}

/* Header */
.main-header{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:var(--card);border-bottom:1px solid var(--b)}
.logo-text{font-size:18px;font-weight:700;background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Admin Panel */
.panel-body{max-width:900px;margin:0 auto;padding:24px}
.status-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.s-card{background:var(--card);border:1px solid var(--b);border-radius:14px;padding:16px;text-align:center}
.s-icon{font-size:24px;margin-bottom:8px}
.s-val{font-size:28px;font-weight:700;color:#a78bfa}
.s-lbl{font-size:12px;color:var(--muted);margin-top:4px}
.panel-section{background:var(--card);border:1px solid var(--b);border-radius:14px;padding:20px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.section-head h2{font-size:16px}

/* Auth */
.auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:99;display:none;align-items:center;justify-content:center}
.auth-overlay.active{display:flex}
.auth-box{background:var(--card);border:1px solid var(--b);border-radius:16px;padding:24px;width:90%;max-width:360px}
.auth-box h2{margin-bottom:16px;font-size:18px}
.auth-box .form-group{margin-bottom:12px}
.auth-box input{width:100%;padding:12px;background:var(--bg);border:1px solid var(--b);border-radius:10px;color:var(--text);font-size:14px}
.auth-box input:focus{outline:none;border-color:var(--p)}
.auth-error{color:var(--err);font-size:13px;text-align:center;min-height:18px;margin-top:8px}

/* Admin Users */
.au-card{background:var(--bg);border:1px solid var(--b);border-radius:10px;padding:12px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.au-info{flex:1}
.au-name{font-weight:600;font-size:14px}
.au-meta{font-size:12px;color:var(--muted);margin-top:2px}
.au-actions{display:flex;gap:6px}
.au-actions .btn{padding:5px 10px;font-size:11px}

/* Sub Page */
.sub-page{max-width:520px;margin:0 auto;padding:24px 16px;min-height:100vh}
.sub-header{text-align:center;padding:30px 0 20px}
.sub-logo{font-size:56px;margin-bottom:8px}
.sub-header h1{font-size:28px;background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sub-desc{color:var(--muted);font-size:14px;margin-top:4px}
.loading-block{text-align:center;color:var(--muted);padding:60px 0}
.expired-block{text-align:center;padding:60px 0}
.expired-block h2{margin-bottom:8px}
.expired-block p{color:var(--muted);margin-bottom:20px}

.sub-info-card{background:var(--card);border:1px solid var(--b);border-radius:14px;padding:20px;margin-bottom:20px}
.sub-user{font-size:18px;font-weight:700;margin-bottom:4px}
.sub-expiry{font-size:13px;color:var(--muted);margin-bottom:14px}
.sub-traffic-bar{height:8px;background:var(--b);border-radius:4px;overflow:hidden;margin-bottom:8px}
.traffic-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:4px;transition:width .5s}
.sub-traffic-text{font-size:13px;color:var(--muted);text-align:center}

.sub-section{margin-bottom:20px}
.sub-section h2{font-size:16px;margin-bottom:8px}
.sub-section .hint{font-size:12px;color:var(--muted);margin-bottom:10px}
.copy-box{display:flex;gap:8px}
.copy-box input{flex:1;padding:12px;background:var(--card);border:1px solid var(--b);border-radius:10px;color:var(--text);font-size:12px;font-family:monospace}
.copy-box input:focus{outline:none;border-color:var(--p)}
.copy-box .btn{white-space:nowrap}

.apps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.app-card{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:16px;text-align:center;text-decoration:none;color:var(--text);transition:all .2s}
.app-card:hover{border-color:var(--p);transform:translateY(-2px)}
.app-icon{font-size:28px;margin-bottom:6px}
.app-name{font-size:14px;font-weight:600}
.app-platform{font-size:11px;color:var(--muted);margin-top:2px}

.instruction-block{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:16px;margin-bottom:12px}
.instruction-block h3{font-size:14px;margin-bottom:8px;color:#a78bfa}
.instruction-block ol{padding-left:18px;font-size:13px;line-height:1.8;color:var(--muted)}
.instruction-block ol li{margin-bottom:2px}
.instruction-block ol li strong{color:var(--text)}

.sub-footer{text-align:center;padding:30px 0;color:var(--muted);font-size:13px}
.sub-footer p{margin-bottom:4px}

@media(max-width:480px){
    .servers-preview{grid-template-columns:repeat(3,1fr)}
    .status-cards{grid-template-columns:1fr}
    .apps-grid{grid-template-columns:1fr}
}