/* ═══ MetaDNS Web App — Main Styles ═══ */

:root {
    --bg-deep: #0a0e1a;
    --bg-surface: rgba(255,255,255,0.04);
    --accent: #00e87b;
    --accent-dim: rgba(0,232,123,0.15);
    --accent-glow: rgba(0,232,123,0.25);
    --danger: #f43f5e;
    --danger-dim: rgba(244,63,94,0.15);
    --warning: #f59e0b;
    --info: #38bdf8;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #475569;
    --border: rgba(255,255,255,0.08);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    --font-main: 'Vazirmatn', system-ui, sans-serif;
    --font-mono: 'Courier New', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: var(--font-main);
    background: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100dvh;
    overflow-x: hidden;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ── Background ── */
.bg-mesh {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(0,232,123,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 80% 80%, rgba(56,189,248,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(139,92,246,0.03) 0%, transparent 70%),
        linear-gradient(180deg, #0a0e1a 0%, #111827 50%, #0f172a 100%);
}

.bg-noise {
    position:fixed; inset:0; z-index:0; opacity:0.015; pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px;
}

/* ── Container ── */
.container {
    position:relative; z-index:1; max-width:480px; margin:0 auto; padding:0 20px;
}
@media (min-width:768px) { .container { max-width:440px; padding:0 32px; } }

/* ── Glass ── */
.glass { background:var(--bg-surface); backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:var(--radius-lg); }
.glass-sm { background:var(--bg-surface); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--radius-md); transition:all 0.2s; }
.glass-sm:hover { background:rgba(255,255,255,0.06); }

/* ── Animations ── */
.fade-in { animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes spin { to{transform:rotate(360deg)} }
::selection { background:var(--accent-dim); color:var(--accent); }

/* ── Step Navigation ── */
.step-nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(10,14,26,0.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.step-nav-inner { max-width:600px; margin:0 auto; padding:16px 24px 14px; }
.steps { display:flex; align-items:center; justify-content:center; direction:ltr; }
.step { display:flex; align-items:center; gap:8px; }
.step-dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; flex-shrink:0; transition:all 0.35s; }
.step.upcoming .step-dot { background:rgba(255,255,255,0.06); color:var(--text-muted); border:1.5px solid rgba(255,255,255,0.1); }
.step.active .step-dot { background:var(--accent); color:#0a0e1a; border:2px solid var(--accent); box-shadow:0 0 20px var(--accent-glow); transform:scale(1.1); }
.step.completed .step-dot { background:rgba(0,232,123,0.15); color:var(--accent); border:1.5px solid rgba(0,232,123,0.3); }
.step-label { font-size:0.72rem; font-weight:500; white-space:nowrap; }
.step.upcoming .step-label { color:var(--text-muted); }
.step.active .step-label { color:var(--text-primary); font-weight:600; }
.step.completed .step-label { color:var(--accent); }
.step-line { width:32px; height:2px; margin:0 4px; border-radius:2px; flex-shrink:0; }
.step-line.done { background:linear-gradient(90deg,var(--accent),rgba(0,232,123,0.3)); }
.step-line.pending { background:rgba(255,255,255,0.08); }
@media (max-width:420px) { .step-label{display:none} .step-line{width:24px} }

/* ── Auth Pages ── */
.auth-page { display:flex; flex-direction:column; justify-content:center; min-height:100dvh; padding:90px 0 40px; }
.brand { text-align:center; margin-bottom:36px; }
.brand-logo { width:320px; max-width:85%; height:auto; margin:0 auto 8px; display:block; filter:drop-shadow(0 4px 24px rgba(0,232,123,0.2)) drop-shadow(0 0 60px rgba(56,189,248,0.1)); animation:float 6s ease-in-out infinite; }
.brand p { color:var(--text-secondary); font-size:0.88rem; margin-top:14px; }
.auth-card { padding:32px 24px; box-shadow:0 16px 64px rgba(0,0,0,0.5); }
.auth-card h2 { font-size:1.2rem; font-weight:700; margin-bottom:8px; }
.auth-card .subtitle { color:var(--text-secondary); font-size:0.85rem; margin-bottom:28px; }
.auth-footer { text-align:center; margin-top:24px; font-size:0.82rem; color:var(--text-muted); }
.auth-footer a { color:var(--accent); text-decoration:none; }

/* ── Forms ── */
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:0.82rem; font-weight:500; color:var(--text-secondary); margin-bottom:8px; }
.form-input { width:100%; padding:14px 16px; background:rgba(255,255,255,0.05); border:1.5px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-main); font-size:1rem; outline:none; transition:all 0.25s; direction:ltr; text-align:right; }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); background:rgba(255,255,255,0.07); }
.form-input::placeholder { color:var(--text-muted); }
.form-input.ltr { text-align:left; direction:ltr; }
.form-input.phone-input { text-align:left; direction:ltr; font-size:1.1rem; font-weight:500; }
.form-input.center { text-align:center; font-size:1.5rem; font-weight:600; letter-spacing:0.5em; padding-left:0.5em; }
.input-with-toggle { position:relative; }
.input-with-toggle .toggle-pw { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; font-size:1.1rem; }
.checkbox-group { display:flex; align-items:flex-start; gap:10px; margin:20px 0; }
.checkbox-group input[type="checkbox"] { appearance:none; width:20px; height:20px; border:1.5px solid var(--border); border-radius:5px; background:rgba(255,255,255,0.05); cursor:pointer; flex-shrink:0; margin-top:2px; transition:all 0.2s; position:relative; }
.checkbox-group input[type="checkbox"]:checked { background:var(--accent); border-color:var(--accent); }
.checkbox-group input[type="checkbox"]:checked::after { content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#0a0e1a; font-size:13px; font-weight:700; }
.checkbox-group label { font-size:0.82rem; color:var(--text-secondary); cursor:pointer; line-height:1.6; }
.checkbox-group label a { color:var(--accent); text-decoration:none; }

/* ── Buttons ── */
.btn { display:block; width:100%; padding:14px 24px; border:none; border-radius:var(--radius-sm); font-family:var(--font-main); font-size:1rem; font-weight:600; cursor:pointer; transition:all 0.25s; text-align:center; text-decoration:none; }
.btn-primary { background:linear-gradient(135deg,var(--accent),#00b864); color:#0a0e1a; box-shadow:0 4px 20px var(--accent-glow); }
.btn-primary:hover { box-shadow:0 6px 30px var(--accent-glow); transform:translateY(-1px); }
.btn-google { background:rgba(255,255,255,0.06); color:var(--text-primary); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-google:hover { background:rgba(255,255,255,0.1); }
.divider { display:flex; align-items:center; gap:16px; margin:24px 0; color:var(--text-muted); font-size:0.8rem; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Alerts ── */
.alert { padding:12px 16px; border-radius:var(--radius-sm); font-size:0.85rem; margin-bottom:12px; }
.alert-success { background:var(--accent-dim); color:var(--accent); border:1px solid rgba(0,232,123,0.2); }
.alert-error { background:var(--danger-dim); color:var(--danger); border:1px solid rgba(244,63,94,0.2); }
.alert-warning { background:rgba(245,158,11,0.1); color:var(--warning); border:1px solid rgba(245,158,11,0.2); }
.alert-info { background:rgba(56,189,248,0.1); color:var(--info); border:1px solid rgba(56,189,248,0.2); }

/* ── OTP ── */
.phone-display { direction:ltr; text-align:center; font-size:1.1rem; font-weight:600; margin-bottom:4px; }
.change-phone { color:var(--text-muted); font-size:0.8rem; text-decoration:none; cursor:pointer; display:block; text-align:center; }
.change-phone:hover { color:var(--accent); }
.otp-timer { text-align:center; color:var(--text-secondary); font-size:0.85rem; margin-top:16px; }
.otp-timer .time { color:var(--accent); font-weight:600; }
.resend-btn { background:none; border:none; color:var(--accent); font-family:var(--font-main); font-size:0.88rem; font-weight:600; cursor:pointer; padding:8px 16px; }

/* ── Dashboard Header ── */
.dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.dash-header-right { display:flex; align-items:center; gap:12px; }
.header-logo { width:40px; height:40px; border-radius:10px; filter:drop-shadow(0 0 12px rgba(0,232,123,0.25)); }
.dash-greeting { font-size:1.3rem; font-weight:700; }
.dash-subtitle { color:var(--text-secondary); font-size:0.82rem; margin-top:2px; }
.logout-btn { color:var(--text-muted); font-size:0.8rem; text-decoration:none; padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); }

/* ── Status ── */
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:var(--radius-full); font-size:0.72rem; font-weight:600; }
.status-badge.active { background:var(--accent-dim); color:var(--accent); }
.status-badge.inactive { background:var(--danger-dim); color:var(--danger); }
.status-dot { width:6px; height:6px; border-radius:50%; }
.status-dot.green { background:var(--accent); box-shadow:0 0 8px var(--accent-glow); animation:pulse 2s infinite; }
.status-dot.red { background:var(--danger); }
.status-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.status-icon.active { background:var(--accent-dim); }
.status-icon.inactive { background:var(--danger-dim); }

.info-row { background:rgba(255,255,255,0.03); padding:12px 16px; border-radius:var(--radius-sm); display:flex; justify-content:space-between; align-items:center; }
.stat-row { display:flex; gap:8px; margin-top:12px; }
.stat-box { flex:1; background:rgba(255,255,255,0.03); padding:10px; border-radius:8px; text-align:center; }
.stat-label { font-size:0.7rem; color:var(--text-muted); margin-bottom:4px; }
.stat-value { font-size:1.1rem; font-weight:700; }
.stat-value.accent { color:var(--accent); }
.stat-value.info { color:var(--info); }

/* ── Trial ── */
.trial-banner { padding:20px; margin-bottom:20px; position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(56,189,248,0.08),rgba(139,92,246,0.06)); border:1px solid rgba(56,189,248,0.15); }
.trial-banner::before { content:''; position:absolute; top:-50%; right:-30%; width:200px; height:200px; background:radial-gradient(circle,rgba(56,189,248,0.1) 0%,transparent 70%); pointer-events:none; }
.trial-banner h3 { font-size:1rem; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.trial-banner p { font-size:0.82rem; color:var(--text-secondary); margin-bottom:14px; line-height:1.6; }
.trial-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; background:rgba(56,189,248,0.15); border:1px solid rgba(56,189,248,0.3); border-radius:var(--radius-sm); color:var(--info); font-family:var(--font-main); font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.25s; }
.trial-btn:hover { background:rgba(56,189,248,0.25); box-shadow:0 0 20px rgba(56,189,248,0.15); }
.trial-active-badge { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--accent-dim); border-radius:var(--radius-sm); color:var(--accent); font-size:0.85rem; font-weight:600; }
.trial-exhausted { color:var(--text-muted); font-size:0.82rem; }

/* ── Buy CTA ── */
.buy-cta { padding:24px; margin-bottom:20px; background:linear-gradient(135deg,rgba(0,232,123,0.06),rgba(0,232,123,0.02)); border:1px solid rgba(0,232,123,0.15); text-align:center; }
.buy-cta h3 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.buy-cta p { font-size:0.82rem; color:var(--text-secondary); margin-bottom:16px; }
.buy-cta-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; background:linear-gradient(135deg,var(--accent),#00b864); color:#0a0e1a; border:none; border-radius:var(--radius-sm); font-family:var(--font-main); font-size:0.95rem; font-weight:700; cursor:pointer; box-shadow:0 4px 20px var(--accent-glow); transition:all 0.25s; text-decoration:none; }
.buy-cta-btn:hover { box-shadow:0 6px 30px var(--accent-glow); transform:translateY(-1px); }

/* ── Quick Actions Grid ── */
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.quick-item { padding:20px 16px; text-align:center; text-decoration:none; color:var(--text-primary); display:block; }
.quick-item.disabled { opacity:0.35; pointer-events:none; }
.quick-icon { font-size:24px; margin-bottom:8px; }
.quick-label { font-size:0.85rem; font-weight:500; }
.quick-sub { font-size:0.68rem; color:var(--text-muted); margin-top:4px; }

/* ── DNS Grid ── */
.dns-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dns-item { background:rgba(255,255,255,0.03); padding:10px; border-radius:8px; text-align:center; cursor:pointer; font-family:var(--font-mono); font-size:0.82rem; direction:ltr; color:var(--accent); font-weight:700; border:1px solid transparent; transition:all 0.2s; }
.dns-item:hover { border-color:var(--border); }

/* ── Telegram Link ── */
.telegram-link-card { padding:16px 20px; margin-bottom:20px; border-color:rgba(245,158,11,0.2); background:rgba(245,158,11,0.05); }
.telegram-link-btn { display:inline-block; margin-top:8px; color:#f59e0b; font-size:0.82rem; font-weight:500; text-decoration:none; background:none; border:none; cursor:pointer; font-family:var(--font-main); }

/* ── Connection Test ── */
.test-card { padding:24px; margin-bottom:20px; }
.last-test-time { font-size:0.7rem; color:var(--text-muted); }
.test-btn { width:100%; padding:16px; border:2px dashed rgba(0,232,123,0.25); border-radius:var(--radius-md); background:rgba(0,232,123,0.04); color:var(--accent); font-family:var(--font-main); font-size:0.95rem; font-weight:600; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; justify-content:center; gap:10px; }
.test-btn:hover { border-color:var(--accent); background:rgba(0,232,123,0.08); box-shadow:0 0 30px rgba(0,232,123,0.1); }
.test-btn-locked { width:100%; padding:16px; border:2px dashed rgba(255,255,255,0.08); border-radius:var(--radius-md); background:transparent; color:var(--text-muted); font-family:var(--font-main); font-size:0.95rem; font-weight:600; cursor:not-allowed; display:flex; align-items:center; justify-content:center; gap:10px; opacity:0.35; }
.test-locked { text-align:center; padding:20px; margin-top:16px; border:1.5px dashed rgba(255,255,255,0.08); border-radius:var(--radius-md); color:var(--text-muted); font-size:0.82rem; }
.test-locked span { font-size:28px; display:block; margin-bottom:8px; }

.test-results { margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.test-row { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:rgba(255,255,255,0.02); border-radius:var(--radius-sm); border:1px solid var(--border); }
.test-row-label { display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-secondary); }
.test-row-value { font-size:0.88rem; font-weight:600; }
.test-row-value.good { color:var(--accent); }

.quality-bar-wrapper { margin-top:16px; padding:16px; background:rgba(255,255,255,0.02); border-radius:var(--radius-sm); border:1px solid var(--border); }
.quality-label { display:flex; justify-content:space-between; margin-bottom:10px; font-size:0.82rem; }
.quality-bar { height:8px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden; }
.quality-fill { height:100%; border-radius:4px; transition:width 1s ease-out; background:linear-gradient(90deg,var(--accent),#00b864); }

.test-history { margin-top:16px; }
.test-history h4 { font-size:0.78rem; color:var(--text-muted); margin-bottom:10px; font-weight:500; }
.history-chart { display:flex; align-items:flex-end; gap:3px; height:48px; }
.history-bar { flex:1; border-radius:2px 2px 0 0; min-height:4px; }
.history-bar.good { background:var(--accent); opacity:0.7; }
.history-bar.ok { background:var(--warning); opacity:0.7; }
.history-bar.bad { background:var(--danger); opacity:0.7; }
.history-labels { display:flex; justify-content:space-between; margin-top:6px; font-size:0.65rem; color:var(--text-muted); direction:ltr; }

.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(0,232,123,0.3); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; }

/* ── Bottom Navigation ── */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:100; background:rgba(13,17,30,0.95); backdrop-filter:blur(30px); border-top:1px solid rgba(255,255,255,0.06); padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); }
.bottom-nav-items { display:flex; justify-content:space-around; align-items:center; max-width:500px; margin:0 auto; }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 10px 6px; border-radius:14px; cursor:pointer; position:relative; min-width:56px; transition:all 0.3s; }
.nav-item:hover:not(.disabled) { background:rgba(255,255,255,0.04); }
.nav-item .nav-icon-wrap { width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; transition:all 0.3s; }
.nav-item .nav-icon-wrap svg { width:20px; height:20px; stroke:#475569; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:all 0.3s; }
.nav-item .nav-label { font-size:0.62rem; font-weight:500; color:var(--text-muted); transition:all 0.3s; }
.nav-item.disabled { opacity:0.2; pointer-events:none; }
.nav-item.active .nav-label { font-weight:600; }
.nav-item.active::after { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:24px; height:3px; border-radius:0 0 4px 4px; }

/* Nav tab colors */
.nav-item.active.tab-home .nav-icon-wrap { background:linear-gradient(135deg,rgba(0,232,123,0.2),rgba(0,232,123,0.06)); box-shadow:0 0 16px rgba(0,232,123,0.12); }
.nav-item.active.tab-home .nav-icon-wrap svg { stroke:#00e87b; filter:drop-shadow(0 0 6px rgba(0,232,123,0.4)); }
.nav-item.active.tab-home .nav-label { color:#00e87b; }
.nav-item.active.tab-home::after { background:#00e87b; box-shadow:0 2px 8px rgba(0,232,123,0.4); }

.nav-item.active.tab-shop .nav-icon-wrap,
.nav-item.active.tab-renew .nav-icon-wrap { background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(245,158,11,0.06)); box-shadow:0 0 16px rgba(245,158,11,0.12); }
.nav-item.active.tab-shop .nav-icon-wrap svg,
.nav-item.active.tab-renew .nav-icon-wrap svg { stroke:#f59e0b; filter:drop-shadow(0 0 6px rgba(245,158,11,0.4)); }
.nav-item.active.tab-shop .nav-label,
.nav-item.active.tab-renew .nav-label { color:#f59e0b; }
.nav-item.active.tab-shop::after,
.nav-item.active.tab-renew::after { background:#f59e0b; box-shadow:0 2px 8px rgba(245,158,11,0.4); }

.nav-item.active.tab-ip .nav-icon-wrap { background:linear-gradient(135deg,rgba(56,189,248,0.2),rgba(56,189,248,0.06)); box-shadow:0 0 16px rgba(56,189,248,0.12); }
.nav-item.active.tab-ip .nav-icon-wrap svg { stroke:#38bdf8; filter:drop-shadow(0 0 6px rgba(56,189,248,0.4)); }
.nav-item.active.tab-ip .nav-label { color:#38bdf8; }
.nav-item.active.tab-ip::after { background:#38bdf8; box-shadow:0 2px 8px rgba(56,189,248,0.4); }

.nav-item.active.tab-test .nav-icon-wrap { background:linear-gradient(135deg,rgba(167,139,250,0.2),rgba(167,139,250,0.06)); box-shadow:0 0 16px rgba(167,139,250,0.12); }
.nav-item.active.tab-test .nav-icon-wrap svg { stroke:#a78bfa; filter:drop-shadow(0 0 6px rgba(167,139,250,0.4)); }
.nav-item.active.tab-test .nav-label { color:#a78bfa; }
.nav-item.active.tab-test::after { background:#a78bfa; box-shadow:0 2px 8px rgba(167,139,250,0.4); }

.nav-item.active.tab-profile .nav-icon-wrap { background:linear-gradient(135deg,rgba(244,114,182,0.2),rgba(244,114,182,0.06)); box-shadow:0 0 16px rgba(244,114,182,0.12); }
.nav-item.active.tab-profile .nav-icon-wrap svg { stroke:#f472b6; filter:drop-shadow(0 0 6px rgba(244,114,182,0.4)); }
.nav-item.active.tab-profile .nav-label { color:#f472b6; }
.nav-item.active.tab-profile::after { background:#f472b6; box-shadow:0 2px 8px rgba(244,114,182,0.4); }

/* ═══ SPA Tab System ═══ */
.tab-content { display:none; }
.tab-content.active { display:block; }
@keyframes tabFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.tab-page-header { margin-bottom:24px; }
.tab-page-header h2 { font-size:1.15rem; font-weight:700; margin-bottom:4px; }
.tab-page-header p { color:var(--text-secondary); font-size:0.82rem; }

/* ── Profile ── */
.profile-avatar {
    width:56px; height:56px; border-radius:16px;
    background:linear-gradient(135deg, var(--accent), #38bdf8);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; font-weight:800; color:#0a0e1a; flex-shrink:0;
}
.profile-info-list { display:flex; flex-direction:column; gap:0; }
.profile-info-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 0; border-bottom:1px solid var(--border);
}
.profile-info-row:last-child { border-bottom:none; }
.profile-info-label { color:var(--text-secondary); font-size:0.82rem; }
.profile-info-value { font-size:0.88rem; font-weight:500; }
.referral-code { cursor:pointer; color:var(--accent); font-family:var(--font-mono); }
.referral-code:hover { opacity:0.8; }

.profile-action-row {
    display:flex; align-items:center; gap:12px; padding:16px;
    color:var(--text-primary); text-decoration:none;
    border-radius:var(--radius-md); transition:background 0.2s; cursor:pointer;
}
.profile-action-row:hover { background:rgba(255,255,255,0.04); }
.profile-action-row span:first-child { font-size:1.1rem; }
.profile-action-row span:nth-child(2) { flex:1; font-size:0.9rem; }
.profile-arrow { color:var(--text-muted); font-size:0.9rem; }
.profile-action-row.danger { color:var(--danger); }
.profile-action-row.danger:hover { background:var(--danger-dim); }

/* ── Coming Soon ── */
.coming-soon-card { padding:40px 24px; text-align:center; }
.coming-soon-icon { font-size:3rem; margin-bottom:16px; }
.coming-soon-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.coming-soon-card p { color:var(--text-secondary); font-size:0.85rem; line-height:1.7; margin-bottom:24px; }

/* ── Buttons ── */
.btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; border-radius:var(--radius-md); font-family:var(--font-main); font-size:0.92rem; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; }
.btn-primary { background:var(--accent); color:#0a0e1a; }
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-outline {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; border-radius:var(--radius-md);
    background:transparent; color:var(--accent);
    border:1.5px solid rgba(0,232,123,0.3);
    font-family:var(--font-main); font-size:0.88rem; font-weight:600;
    text-decoration:none; cursor:pointer; transition:all 0.2s;
}
.btn-outline:hover { background:var(--accent-dim); border-color:var(--accent); }

/* ═══ Plans ═══ */
.plans-container { display:flex; flex-direction:column; gap:12px; }
.plan-card { padding:20px; cursor:pointer; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); position:relative; }
.plan-card.selected { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.15); transform:scale(1.02); box-shadow:0 8px 32px rgba(0,0,0,0.2); }
.plan-card:hover { background:rgba(255,255,255,0.06); }
.plan-badge { position:absolute; top:-1px; left:20px; color:#0a0e1a; font-size:0.7rem; font-weight:700; padding:4px 12px; border-radius:0 0 10px 10px; }
.plan-radio { width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; transition:all 0.3s; flex-shrink:0; }
.plan-radio.active { border-color:var(--accent); }
.plan-radio-dot { width:12px; height:12px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform 0.3s; }
.plan-radio.active .plan-radio-dot { transform:scale(1); }
.plan-price { font-weight:800; font-size:1.1rem; }
.plan-discount { font-size:0.7rem; font-weight:600; padding:2px 8px; border-radius:8px; }
.plan-cta { margin-bottom:12px; box-shadow:0 8px 24px rgba(0,232,123,0.2); }
.features-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.feature-item { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:#cbd5e1; }
.feature-item span { font-size:0.9rem; }

/* ═══ Support ═══ */
.support-telegram-card { display:block; padding:20px; text-decoration:none; color:var(--text-primary); transition:all 0.2s; }
.support-telegram-card:hover { background:rgba(255,255,255,0.06); }
.support-icon-wrap { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.support-icon-wrap.telegram { background:linear-gradient(135deg, rgba(56,189,248,0.2), rgba(56,189,248,0.05)); }

/* ═══ Forms ═══ */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:0.82rem; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.form-input { width:100%; padding:12px 16px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-family:var(--font-main); font-size:0.88rem; outline:none; transition:border-color 0.2s; }
.form-input:focus { border-color:var(--accent); }
.form-textarea { resize:vertical; min-height:100px; line-height:1.7; }
select.form-input { appearance:none; cursor:pointer; }

select.form-input option { background:#0a0e1a; color:#f1f5f9; }

/* ═══ Test Results ═══ */
.test-result-card { background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:16px; padding:16px 20px; margin-bottom:12px; }
.test-result-header { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--text-secondary); margin-bottom:10px; }
.test-result-value { font-size:1.5rem; font-weight:800; color:var(--text-primary); font-family:var(--font-mono); }
.test-result-status { margin-top:6px; font-size:0.82rem; }

/* ═══ Gauge ═══ */
.gauge-wrap { display:flex; flex-direction:column; align-items:center; margin:8px 0; }
.gauge-svg { width:200px; height:120px; }
.gauge-bg { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:14; stroke-linecap:round; }
.gauge-fill { fill:none; stroke-width:14; stroke-linecap:round; transition:stroke-dashoffset 1s ease, stroke 0.5s ease; }
.gauge-needle { transform-origin:100px 100px; transition:transform 1s ease; }
.gauge-needle line { stroke:#fff; stroke-width:2.5; stroke-linecap:round; }
.gauge-center { fill:#1a1f36; stroke:rgba(255,255,255,0.1); stroke-width:2; }
.gauge-value { font-size:1.8rem; font-weight:800; margin-top:-10px; }
.gauge-label { font-size:0.78rem; color:var(--text-secondary); margin-top:2px; }

/* ═══ Icon Circles (matching bottom nav quality) ═══ */
.icon-circle {
    width:42px; height:42px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all 0.3s;
}
.icon-circle svg { width:22px; height:22px; }
.icon-circle--green {
    background:linear-gradient(135deg, rgba(0,232,123,0.2), rgba(0,232,123,0.06));
    box-shadow:0 0 20px rgba(0,232,123,0.1);
    color:#00e87b;
}
.icon-circle--blue {
    background:linear-gradient(135deg, rgba(56,189,248,0.2), rgba(56,189,248,0.06));
    box-shadow:0 0 20px rgba(56,189,248,0.1);
    color:#38bdf8;
}
.icon-circle--purple {
    background:linear-gradient(135deg, rgba(167,139,250,0.2), rgba(167,139,250,0.06));
    box-shadow:0 0 20px rgba(167,139,250,0.1);
    color:#a78bfa;
}
.icon-circle--amber {
    background:linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.06));
    box-shadow:0 0 20px rgba(245,158,11,0.1);
    color:#f59e0b;
}
.icon-circle--rose {
    background:linear-gradient(135deg, rgba(244,114,182,0.2), rgba(244,114,182,0.06));
    box-shadow:0 0 20px rgba(244,114,182,0.1);
    color:#f472b6;
}
.icon-circle--cyan {
    background:linear-gradient(135deg, rgba(34,211,238,0.2), rgba(34,211,238,0.06));
    box-shadow:0 0 20px rgba(34,211,238,0.1);
    color:#22d3ee;
}
.icon-circle--red {
    background:linear-gradient(135deg, rgba(244,63,94,0.2), rgba(244,63,94,0.06));
    box-shadow:0 0 20px rgba(244,63,94,0.1);
    color:#f43f5e;
}
.icon-circle--muted {
    background:rgba(255,255,255,0.06);
    color:var(--text-muted);
}
.sub-card {
    position:relative; overflow:hidden;
    padding:24px; margin-bottom:20px;
    border-radius:var(--radius-lg);
    backdrop-filter:blur(20px);
}
.sub-card--active {
    background:linear-gradient(135deg, rgba(0,232,123,0.06), rgba(56,189,248,0.03));
    border:1px solid rgba(0,232,123,0.15);
}
.sub-card--inactive {
    background:var(--bg-surface);
    border:1px solid rgba(244,63,94,0.15);
}
.sub-card-glow {
    position:absolute; top:-40%; right:-20%; width:200px; height:200px;
    background:radial-gradient(circle, rgba(0,232,123,0.08) 0%, transparent 70%);
    pointer-events:none;
}
.stat-box--green { border:1px solid rgba(0,232,123,0.1); }
.stat-box--blue { border:1px solid rgba(56,189,248,0.1); }
.stat-box--purple { border:1px solid rgba(167,139,250,0.1); }
.stat-icon-mini {
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 6px;
}
.stat-icon-mini svg { width:16px; height:16px; opacity:0.5; }
.stat-box--green .stat-icon-mini svg { stroke:#00e87b; }
.stat-box--blue .stat-icon-mini svg { stroke:#38bdf8; }
.stat-box--purple .stat-icon-mini svg { stroke:#a78bfa; }
.quick-card {
    display:flex; flex-direction:column; align-items:center;
    padding:22px 16px; text-align:center; text-decoration:none;
    color:var(--text-primary);
    background:var(--bg-surface); backdrop-filter:blur(12px);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    transition:all 0.3s;
}
.quick-card:hover { background:rgba(255,255,255,0.06); transform:translateY(-2px); }
.quick-card--disabled { opacity:0.3; pointer-events:none; }
.quick-card-icon { margin-bottom:10px; }
.quick-card-label { font-size:0.85rem; font-weight:600; }
.quick-card-sub { font-size:0.68rem; color:var(--text-muted); margin-top:4px; }
.dns-card {
    background:var(--bg-surface); backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:20px; margin-bottom:20px;
}
.dns-card-header {
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.tab-header-icon { margin-bottom:14px; }
.tg-link-card {
    padding:18px 20px; margin-bottom:20px;
    border-radius:var(--radius-lg);
    border:1px solid rgba(245,158,11,0.2);
    background:rgba(245,158,11,0.04);
    backdrop-filter:blur(20px);
}
.ip-display-card { padding:24px; text-align:center; }
.ip-display-label {
    display:flex; align-items:center; justify-content:center; gap:8px;
    color:var(--text-secondary); font-size:0.82rem; margin-bottom:14px;
}
.ip-warning-box {
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:rgba(245,158,11,0.05); border:1.5px solid rgba(245,158,11,0.12);
    border-radius:var(--radius-md); padding:14px 18px; margin-bottom:20px;
    font-size:0.82rem; color:#f59e0b; line-height:1.8;
}
.locked-card { padding:40px 24px; text-align:center; }
.dns-copy-card { padding:16px 12px; text-align:center; cursor:pointer; transition:all 0.2s; }
.dns-copy-card:hover { background:rgba(255,255,255,0.06); }
.features-card { padding:20px; margin-top:20px; margin-bottom:24px; }
.features-card-header {
    display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.feature-svg { width:18px; height:18px; flex-shrink:0; }
.profile-info-label {
    display:flex; align-items:center; gap:8px;
    color:var(--text-secondary); font-size:0.82rem;
}
.nav-item.active.tab-support .nav-icon-wrap {
    background:linear-gradient(135deg,rgba(34,211,238,0.2),rgba(34,211,238,0.06));
    box-shadow:0 0 16px rgba(34,211,238,0.12);
}
.nav-item.active.tab-support .nav-icon-wrap svg { stroke:#22d3ee; filter:drop-shadow(0 0 6px rgba(34,211,238,0.4)); }
.nav-item.active.tab-support .nav-label { color:#22d3ee; }
.nav-item.active.tab-support::after { background:#22d3ee; box-shadow:0 2px 8px rgba(34,211,238,0.4); }

/* Fix oversized icons */
.quick-card .icon-circle { width:48px; height:48px; }
.quick-card .icon-circle svg { width:24px; height:24px; }
.stat-box .stat-icon-mini svg { width:16px; height:16px; }
.sub-card .icon-circle { width:42px; height:42px; }
.sub-card .icon-circle svg { width:22px; height:22px; }
.dns-card .icon-circle svg { width:16px; height:16px; }
.tg-link-card .icon-circle svg { width:20px; height:20px; }

/* ═══ Install Banner ═══ */
.install-banner {
    display:none; position:fixed; bottom:80px; left:16px; right:16px; z-index:200;
    background:linear-gradient(135deg, rgba(0,232,123,0.12), rgba(56,189,248,0.08));
    border:1px solid rgba(0,232,123,0.25); border-radius:var(--radius-lg);
    padding:16px 20px; backdrop-filter:blur(20px);
    animation:slideUp 0.4s ease-out; max-width:460px; margin:0 auto;
}
.install-banner.show { display:block; }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.install-banner-content { display:flex; align-items:center; gap:14px; }
.install-banner-text { flex:1; }
.install-banner-text h4 { font-size:0.88rem; font-weight:700; margin-bottom:2px; }
.install-banner-text p { font-size:0.75rem; color:var(--text-secondary); }
.install-banner-btn { padding:8px 18px; background:var(--accent); color:#0a0e1a; border:none; border-radius:8px; font-family:var(--font-main); font-size:0.82rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.install-banner-close { position:absolute; top:8px; left:8px; background:none; border:none; color:var(--text-muted); font-size:1.2rem; cursor:pointer; padding:4px; }

/* ═══ Onboarding Bubbles ═══ */
.onboard-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:300; display:none; }
.onboard-overlay.show { display:block; }
.onboard-bubble {
    position:fixed; z-index:301; background:linear-gradient(135deg,#1e293b,#0f172a);
    border:1px solid rgba(0,232,123,0.3); border-radius:16px; padding:18px 20px; max-width:280px;
    box-shadow:0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(0,232,123,0.08);
    animation:bubblePop 0.35s cubic-bezier(0.34,1.56,0.64,1);
    display:none;
}
.onboard-bubble.show { display:block; }
@keyframes bubblePop { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
.onboard-bubble::after {
    content:''; position:absolute; width:14px; height:14px;
    background:#1e293b; border-right:1px solid rgba(0,232,123,0.3);
    border-bottom:1px solid rgba(0,232,123,0.3);
}
.onboard-bubble.arrow-bottom::after { bottom:-8px; right:40px; transform:rotate(45deg); }
.onboard-bubble.arrow-top::after { top:-8px; right:40px; transform:rotate(-135deg); }
.onboard-bubble.arrow-left::after { left:-8px; top:20px; transform:rotate(135deg); }
.onboard-bubble h4 { font-size:0.9rem; font-weight:700; color:var(--accent); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.onboard-bubble p { font-size:0.8rem; color:var(--text-secondary); line-height:1.7; }
.onboard-actions { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.onboard-dots { display:flex; gap:6px; }
.onboard-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.15); transition:all 0.3s; }
.onboard-dot.active { background:var(--accent); width:18px; border-radius:3px; }
.onboard-next { padding:7px 18px; background:var(--accent); color:#0a0e1a; border:none; border-radius:8px; font-family:var(--font-main); font-size:0.8rem; font-weight:700; cursor:pointer; }
.onboard-skip { background:none; border:none; color:var(--text-muted); font-family:var(--font-main); font-size:0.78rem; cursor:pointer; padding:4px 8px; }

/* ── Help Modal ── */
.help-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;}
.help-modal-overlay.active{display:flex;}
.help-modal-content{width:100%;max-width:480px;max-height:85vh;overflow-y:auto;padding:24px;border-radius:20px;animation:modalSlideUp 0.3s ease;}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.help-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.help-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.help-card{padding:20px 16px;text-align:center;border-radius:16px;cursor:pointer;transition:all 0.25s;}
.help-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2);}
.help-card:active{transform:scale(0.97);}
.help-section{margin-top:16px;}
.help-back-btn{background:none;border:1px solid var(--border);color:var(--text-secondary);padding:8px 16px;border-radius:10px;cursor:pointer;font-family:var(--font-main);font-size:0.82rem;margin-bottom:16px;transition:all 0.2s;}
.help-back-btn:hover{background:rgba(255,255,255,0.05);color:var(--text-primary);}
.help-platform-block{margin-bottom:16px;padding:14px;background:rgba(255,255,255,0.03);border-radius:12px;border:1px solid var(--border);}
.help-step-block{margin-bottom:14px;padding:12px 14px;background:rgba(255,255,255,0.03);border-radius:10px;border-right:3px solid var(--accent);}
.faq-list{display:flex;flex-direction:column;gap:8px;}
.faq-item{border-radius:12px;overflow:hidden;}
.faq-q{padding:14px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:0.85rem;font-weight:600;color:var(--text-primary);transition:background 0.2s;}
.faq-q:hover{background:rgba(255,255,255,0.05);}
.faq-arrow{transition:transform 0.3s;font-size:1.2rem;color:var(--text-muted);}
.faq-item.open .faq-arrow{transform:rotate(90deg);}
.faq-a{max-height:0;overflow:hidden;padding:0 16px;font-size:0.8rem;color:var(--text-secondary);line-height:1.8;transition:all 0.3s ease;}
.faq-item.open .faq-a{max-height:200px;padding:0 16px 14px;}

/* ── Admin Panel ── */
.admin-wrap{padding:20px 16px 100px;max-width:600px;margin:0 auto;}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.admin-back-btn{font-size:0.8rem;color:var(--accent);text-decoration:none;padding:6px 14px;border:1px solid var(--border);border-radius:10px;transition:all 0.2s;}
.admin-back-btn:hover{background:rgba(56,189,248,0.1);}
.admin-stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;}
.admin-stat{padding:16px;text-align:center;border-radius:14px;}
.admin-stat-icon{width:36px;height:36px;margin:0 auto 8px;}
.admin-stat-value{font-size:1.3rem;font-weight:800;color:var(--text-primary);}
.admin-stat-label{font-size:0.72rem;color:var(--text-secondary);margin-top:2px;}
.admin-alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.admin-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid;font-size:0.82rem;color:var(--text-primary);text-decoration:none;transition:all 0.2s;}
.admin-alert:hover{transform:translateX(-2px);}
.admin-alert-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:8px;font-size:0.75rem;font-weight:700;color:#fff;padding:0 6px;}
.admin-section-title{font-size:0.85rem;font-weight:700;color:var(--text-secondary);margin:20px 0 10px;padding-right:4px;}
.admin-quick-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;}
.admin-quick{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px;border-radius:14px;text-decoration:none;color:var(--text-primary);font-size:0.82rem;font-weight:600;transition:all 0.25s;}
.admin-quick:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2);}
.admin-table-wrap{border-radius:14px;overflow:hidden;margin-bottom:16px;}
.admin-table{width:100%;border-collapse:collapse;font-size:0.82rem;}
.admin-table thead{background:rgba(255,255,255,0.03);}
.admin-table th{padding:10px 12px;text-align:right;font-weight:600;color:var(--text-secondary);font-size:0.75rem;border-bottom:1px solid var(--border);}
.admin-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.03);}
.admin-table tr:hover{background:rgba(255,255,255,0.02);}
.admin-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:0.72rem;font-weight:600;}
.admin-badge--green{background:rgba(52,211,153,0.15);color:#34d399;}
.admin-badge--red{background:rgba(248,113,113,0.15);color:#f87171;}
.admin-badge--amber{background:rgba(251,191,36,0.15);color:#fbbf24;}
.admin-badge--purple{background:rgba(168,85,247,0.15);color:#a855f7;}
.admin-badge--blue{background:rgba(56,189,248,0.15);color:#38bdf8;}
.admin-search{display:flex;gap:8px;margin-bottom:14px;padding:10px;border-radius:12px;}
.admin-search-input{flex:1;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:8px;padding:8px 14px;color:var(--text-primary);font-family:var(--font-main);font-size:0.82rem;outline:none;}
.admin-search-input:focus{border-color:var(--accent);}
.admin-search-btn{background:var(--accent);color:#fff;border:none;padding:8px 18px;border-radius:8px;font-family:var(--font-main);font-size:0.82rem;cursor:pointer;}
.admin-filters{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.admin-filter-btn{padding:6px 14px;border-radius:8px;font-size:0.78rem;color:var(--text-secondary);text-decoration:none;border:1px solid var(--border);transition:all 0.2s;}
.admin-filter-btn.active,.admin-filter-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.admin-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;}
.admin-page-btn{padding:6px 14px;border:1px solid var(--border);border-radius:8px;color:var(--text-primary);text-decoration:none;font-size:0.82rem;transition:all 0.2s;}
.admin-page-btn:hover{background:var(--accent);color:#fff;}
.admin-user-card{padding:20px;border-radius:14px;margin-bottom:16px;}
.admin-actions{margin-bottom:16px;}
.admin-select{background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text-primary);font-family:var(--font-main);font-size:0.8rem;outline:none;}
.admin-action-btn{border:none;padding:8px 16px;border-radius:8px;font-family:var(--font-main);font-size:0.78rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.admin-action-btn--green{background:rgba(52,211,153,0.15);color:#34d399;}.admin-action-btn--green:hover{background:rgba(52,211,153,0.3);}
.admin-action-btn--red{background:rgba(248,113,113,0.15);color:#f87171;}.admin-action-btn--red:hover{background:rgba(248,113,113,0.3);}
.admin-action-btn--amber{background:rgba(251,191,36,0.15);color:#fbbf24;}.admin-action-btn--amber:hover{background:rgba(251,191,36,0.3);}
.admin-action-btn--purple{background:rgba(168,85,247,0.15);color:#a855f7;}.admin-action-btn--purple:hover{background:rgba(168,85,247,0.3);}
textarea.admin-search-input{min-height:60px;resize:vertical;line-height:1.6;}

/* ── Announcements ── */
.announcement-card{padding:14px 16px;border-radius:12px;}
.announcement-card .icon-circle--blue{background:rgba(56,189,248,0.15);}
.announcement-card .icon-circle--green{background:rgba(52,211,153,0.15);}
.announcement-card .icon-circle--amber{background:rgba(251,191,36,0.15);}
.announcement-card .icon-circle--red{background:rgba(248,113,113,0.15);}
.announcement-card .icon-circle--purple{background:rgba(168,85,247,0.15);}