/* ═══════════════════════════════════════════════════════════════
   BLACK THEME + MOTION   (loaded after style.css and each page's own <style>)
═══════════════════════════════════════════════════════════════ */
:root {
    --bg-base:#000; --bg-raised:#050507; --bg-overlay:#0a0a0d; --bg-surface:#0b0b0e; --bg-muted:#141418;
    --input-bg:#060608;
    --accent:#6366f1; --accent-mid:#7c7ff7; --accent-light:#a5a8ff;
    --accent-2:#a855f7;
    --accent-glow:rgba(124,127,247,.35); --accent-tint:rgba(99,102,241,.08);
    --text-bright:#fff; --text-main:#c9ccd6; --text-muted:#6c7080; --text-faint:#3a3d48;
    --border:rgba(255,255,255,.075); --border-soft:rgba(255,255,255,.04);
    --ease:cubic-bezier(.16,1,.3,1);
    --transition:.2s var(--ease);
    --shadow-soft:0 10px 30px rgba(0,0,0,.6);
    --shadow-lift:0 24px 60px rgba(0,0,0,.75);
}
html { background:#000; scroll-behavior:smooth; }
body { background:#000 !important; color:var(--text-main); }
::selection { background:rgba(124,127,247,.4); color:#fff; }

/* aurora + dot grid background */
body::before {
    background:
        radial-gradient(650px circle at 12% 15%, rgba(99,102,241,.13), transparent 60%),
        radial-gradient(550px circle at 88% 80%, rgba(168,85,247,.10), transparent 60%),
        radial-gradient(400px circle at 60% 35%, rgba(56,189,248,.045), transparent 60%) !important;
    animation:aurora 24s ease-in-out infinite alternate !important;
}
body::after {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
    background-size:28px 28px;
    -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
            mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
@keyframes aurora { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-2%,3%) scale(1.08)} 100%{transform:translate(3%,-3%) scale(1.04)} }
.admin-wrap, .sidebar, .content, .t-content, .admin-box, .login-box { position:relative; z-index:1; }

/* scrollbars */
* { scrollbar-width:thin; scrollbar-color:#2a2a33 transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#23232b; border-radius:10px; border:2px solid #000; }
::-webkit-scrollbar-thumb:hover { background:#34343f; }

/* ── headings ── */
.admin-top h1, h1 { background:linear-gradient(90deg,#fff 30%,#a5a8ff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.02em; }

/* ── nav pills ── */
.admin-nav a, .tabs a, .pills a {
    background:rgba(255,255,255,.025) !important; border:1px solid var(--border) !important; border-radius:999px !important;
    color:var(--text-main) !important; backdrop-filter:blur(8px);
    transition:transform .25s var(--ease), border-color .25s, background .25s, color .25s, box-shadow .25s !important;
}
.admin-nav a:hover, .tabs a:hover, .pills a:hover { transform:translateY(-2px); border-color:rgba(124,127,247,.5) !important; color:#fff !important; box-shadow:0 8px 22px -8px var(--accent-glow); }
.admin-nav a.active, .tabs a.active, .pills a.on {
    background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(168,85,247,.2)) !important; border-color:rgba(124,127,247,.55) !important; color:#fff !important;
    box-shadow:0 0 0 1px rgba(124,127,247,.2) inset, 0 8px 26px -10px var(--accent-glow);
}

/* ── cards (spotlight follows the cursor, set by theme.js) ── */
.sc-card, .server-row, .stat-card, .stat, .plan-card, .bcard, .mbox, .session-card, .profile-card, .toggle-card, .auto-panel,
.console-panel, .login-box, .admin-box, .pstat, .build, .row.card {
    background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012)) , #070709 !important;
    border:1px solid var(--border) !important; border-radius:16px !important;
    position:relative; overflow:hidden;
    transition:transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease) !important;
}
.sc-card::before, .server-row::before, .stat-card::before, .plan-card::before, .bcard::before, .mbox::before,
.session-card::before, .profile-card::before, .toggle-card::before, .admin-box::before, .login-box::before {
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(124,127,247,.13), transparent 55%);
}
.sc-card:hover::before, .server-row:hover::before, .stat-card:hover::before, .plan-card:hover::before, .bcard:hover::before,
.mbox:hover::before, .session-card:hover::before, .profile-card:hover::before, .toggle-card:hover::before, .admin-box:hover::before, .login-box:hover::before { opacity:1; }
.server-row:hover, .stat-card:hover, .plan-card:hover, .bcard:hover, .session-card:hover { transform:translateY(-3px); border-color:rgba(124,127,247,.35) !important; box-shadow:0 18px 40px -18px rgba(0,0,0,.9), 0 0 40px -20px var(--accent-glow); }
.sc-card:hover, .mbox:hover { border-color:rgba(255,255,255,.12) !important; }

/* ── buttons ── */
button, .btn, .sc-btn, .save-btn, .admin-submit, .btn-new, .btn-manage, .btn-leave, .btn-del, .btn-xs, .btn-ghost, .del-btn, a.manage-link {
    font-family:inherit; cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
    background:rgba(255,255,255,.04) !important; color:var(--text-bright) !important;
    border:1px solid rgba(255,255,255,.1) !important; border-radius:11px !important;
    transition:transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s, background .25s, filter .25s !important;
}
button::after, .btn::after, .sc-btn::after, .save-btn::after, .admin-submit::after {      /* shine sweep */
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; z-index:-1; pointer-events:none;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent); transform:skewX(-20deg);
    transition:left .6s var(--ease);
}
button:hover::after, .btn:hover::after, .sc-btn:hover::after, .save-btn:hover::after, .admin-submit:hover::after { left:140%; }
button:hover, .btn:hover, .sc-btn:hover, .save-btn:hover, .admin-submit:hover, .btn-new:hover, .btn-manage:hover {
    transform:translateY(-2px); border-color:rgba(165,168,255,.55) !important; box-shadow:0 10px 26px -10px var(--accent-glow);
}
button:active, .btn:active, .sc-btn:active, .save-btn:active, .admin-submit:active { transform:translateY(0) scale(.96); transition-duration:.08s !important; }
button:disabled, .btn:disabled { opacity:.45; transform:none !important; box-shadow:none !important; cursor:not-allowed; }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid rgba(165,168,255,.7); outline-offset:2px; }

/* primary */
.btn:not(.ghost):not(.danger), .sc-btn.primary, .save-btn, .admin-submit, .btn-new, .btn-manage, button[type=submit]:not(.danger):not(.btn-leave):not(.btn-del):not(.ghost) {
    background:linear-gradient(135deg,#6366f1,#a855f7) !important; border-color:rgba(255,255,255,.18) !important; color:#fff !important;
    box-shadow:0 8px 24px -10px rgba(124,127,247,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn:not(.ghost):not(.danger):hover, .sc-btn.primary:hover, .save-btn:hover, .admin-submit:hover, .btn-new:hover, .btn-manage:hover, button[type=submit]:not(.danger):not(.btn-leave):not(.btn-del):not(.ghost):hover {
    filter:brightness(1.12); box-shadow:0 14px 34px -10px rgba(168,85,247,.75), inset 0 1px 0 rgba(255,255,255,.3);
}
/* danger */
.btn.danger, .btn-leave, .btn-del, .del-btn, button.danger {
    background:rgba(239,68,68,.08) !important; border-color:rgba(239,68,68,.35) !important; color:#ff7b7b !important;
}
.btn.danger:hover, .btn-leave:hover, .btn-del:hover, .del-btn:hover, button.danger:hover {
    background:rgba(239,68,68,.2) !important; border-color:rgba(239,68,68,.7) !important; box-shadow:0 10px 26px -10px rgba(239,68,68,.6);
}
/* ripple (theme.js) */
.ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); animation:ripple .65s ease-out forwards; pointer-events:none; z-index:-1; }
@keyframes ripple { to { transform:scale(4); opacity:0; } }

/* ── inputs ── */
input[type=text], input[type=password], input[type=number], input[type=search], input:not([type]), select, textarea, .search input, .field input, .admin-field input {
    background:#060608 !important; border:1px solid rgba(255,255,255,.09) !important; border-radius:11px !important; color:#fff;
    transition:border-color .25s, box-shadow .3s var(--ease), background .25s !important;
}
input:hover, select:hover, textarea:hover { border-color:rgba(255,255,255,.18) !important; }
input:focus, select:focus, textarea:focus { border-color:rgba(124,127,247,.8) !important; box-shadow:0 0 0 4px rgba(99,102,241,.16), 0 0 30px -8px var(--accent-glow); outline:none; }
input[type=checkbox], input[type=radio] { accent-color:#7c7ff7; }
select { color-scheme:dark; }

/* ── banners ── */
.saved-banner, .error-banner, .banner, .toggle-msg {
    border-radius:12px !important; backdrop-filter:blur(6px); animation:slideIn .5s var(--ease) both;
}
.saved-banner, .banner.ok { background:rgba(34,197,94,.08) !important; border-color:rgba(34,197,94,.35) !important; }
.error-banner, .banner.err { background:rgba(239,68,68,.08) !important; border-color:rgba(239,68,68,.35) !important; }
@keyframes slideIn { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }

/* ── badges / pills ── */
.badge, .chip, .plan-pill, .pill { border-radius:999px !important; backdrop-filter:blur(6px); }
.badge.online .dot, .badge.linked .dot { animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)} 70%{box-shadow:0 0 0 7px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }

/* ── tables ── */
table { border-collapse:separate; border-spacing:0; }
th { color:var(--text-muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:11.5px; }
tbody tr { transition:background .2s; }
tbody tr:hover { background:rgba(124,127,247,.06); }
td, th { border-color:rgba(255,255,255,.06) !important; }

/* ── lists / rows ── */
.chan-row, .auto-list-item, .tick-row { transition:background .2s, transform .25s var(--ease), border-color .2s; border-radius:10px; }
.chan-row:hover, .auto-list-item:hover { background:rgba(255,255,255,.03); transform:translateX(3px); }
.tick-list { background:#050507; border-color:rgba(255,255,255,.08) !important; border-radius:12px !important; }
.tick-row:hover { background:rgba(124,127,247,.08) !important; }

/* links */
a { transition:color .2s; }
a:hover { color:#fff; }
.server-row img.icon, .profile-card img { transition:transform .4s var(--ease), box-shadow .4s; }
.server-row:hover img.icon { transform:scale(1.08) rotate(-3deg); box-shadow:0 0 24px -4px var(--accent-glow); }

/* usage bars */
.usage-bar { background:linear-gradient(90deg,#6366f1,#a855f7,#6366f1) !important; background-size:200% 100%; animation:flow 3s linear infinite; border-radius:99px; }
@keyframes flow { to { background-position:-200% 0; } }

/* ── entrance animation (theme.js sets --i per element) ── */
.reveal { opacity:0; transform:translateY(14px) scale(.985); animation:reveal .65s var(--ease) forwards; animation-delay:calc(var(--i,0) * 55ms); }
@keyframes reveal { to { opacity:1; transform:none; } }

/* login box glow */
.admin-box, .login-box { box-shadow:0 30px 80px -20px rgba(0,0,0,.9), 0 0 80px -30px var(--accent-glow) !important; }
.admin-box .brand-dot { animation:pulseDot 2.4s ease-in-out infinite; background:linear-gradient(135deg,#6366f1,#a855f7) !important; }
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 3px rgba(99,102,241,.2)} 50%{box-shadow:0 0 0 8px rgba(99,102,241,0)} }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .reveal { opacity:1; transform:none; }
}