/* ─── Droopy Admin Panel ─────────────────────────────────────────────────── */

/* Access gate */
.gate {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.gate-box {
    text-align: center; background: #0f0f12; border: 1px solid #18181b;
    border-radius: 14px; padding: 48px 40px; max-width: 360px; width: 100%;
}
.gate-logo, .admin-brand { font-size: 1.4rem; font-weight: 700; color: #dc2626; letter-spacing: -0.5px; }
.gate-logo span, .admin-brand span { color: #52525b; font-weight: 500; }
.gate-box p { color: #71717a; font-size: 0.9rem; margin: 16px 0; }
#gate-actions { margin-top: 20px; }

/* Nav */
.admin-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 28px; background: rgba(9,9,11,0.9);
    backdrop-filter: blur(10px); border-bottom: 1px solid #18181b;
    flex-wrap: wrap;
}
.admin-brand { cursor: pointer; }
.admin-tabs { display: flex; gap: 4px; }
.tab {
    background: none; border: none; color: #71717a; cursor: pointer;
    font-size: 0.85rem; font-weight: 500; padding: 8px 14px; border-radius: 6px;
    font-family: inherit; transition: all 0.15s;
}
.tab:hover { color: #e4e4e7; background: #18181b; }
.tab.active { color: #fff; background: #dc2626; }
.admin-right { display: flex; align-items: center; gap: 12px; }
.admin-email { font-size: 0.8rem; color: #52525b; font-family: 'JetBrains Mono', monospace; }

/* Main */
.admin-main { max-width: 1100px; margin: 0 auto; padding: 36px 28px 80px; }
.tab-panel { display: none; animation: fade 0.2s ease; }
.tab-panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.admin-main h1 { font-size: 1.7rem; font-weight: 700; margin-bottom: 24px; letter-spacing: -0.5px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section-head h1 { margin-bottom: 0; }
.head-actions { display: flex; gap: 8px; align-items: center; }
.muted { color: #52525b; font-size: 0.85rem; margin-bottom: 16px; }
.muted code { background: #18181b; padding: 2px 8px; border-radius: 4px; color: #dc2626; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card {
    background: #0f0f12; border: 1px solid #18181b; border-radius: 12px; padding: 24px;
}
.stat-card .v { font-size: 2.2rem; font-weight: 700; color: #fff; letter-spacing: -1px; }
.stat-card .k { font-size: 0.75rem; color: #52525b; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.stat-card.accent .v { color: #dc2626; }

/* Panels */
.panel { background: #0f0f12; border: 1px solid #18181b; border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }
.panel-head h3 { font-size: 1rem; font-weight: 600; }
.control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

/* Chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: #18181b; border: 1px solid #27272a; border-radius: 20px;
    padding: 6px 12px; font-size: 0.8rem; color: #d4d4d8;
    font-family: 'JetBrains Mono', monospace;
}
.chip.online { border-color: rgba(34,197,94,0.3); }
.chip.online::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.chip .x { cursor: pointer; color: #71717a; font-weight: 700; }
.chip .x:hover { color: #fca5a5; }
.chip.empty { color: #3f3f46; font-family: 'Inter', sans-serif; border-style: dashed; }

/* Tables */
.table-wrap { background: #0f0f12; border: 1px solid #18181b; border-radius: 12px; overflow: hidden; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.8px;
    color: #52525b; font-weight: 600; padding: 14px 18px; border-bottom: 1px solid #18181b;
    white-space: nowrap;
}
.data-table td { padding: 14px 18px; font-size: 0.85rem; border-bottom: 1px solid #141417; color: #d4d4d8; white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.12s; cursor: pointer; }
.data-table tbody tr:hover { background: #141417; }
.data-table .email-cell { font-family: 'JetBrains Mono', monospace; color: #fff; }

/* Plan pills */
.pill { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 10px; }
.pill.lifetime { background: rgba(220,38,38,0.15); color: #f87171; }
.pill.monthly { background: rgba(59,130,246,0.15); color: #60a5fa; }
.pill.none { background: rgba(113,113,122,0.15); color: #a1a1aa; }
.pill.expired { background: rgba(120,53,15,0.25); color: #fbbf24; }

.row-btn { background: #18181b; border: 1px solid #27272a; color: #a1a1aa; border-radius: 6px; padding: 5px 10px; font-size: 0.75rem; cursor: pointer; }
.row-btn:hover { color: #fff; border-color: #3f3f46; }

/* Inputs */
.inp, .ta {
    width: 100%; padding: 10px 14px; background: #18181b; border: 1px solid #27272a;
    border-radius: 6px; color: #e4e4e7; font-size: 0.88rem; outline: none;
    font-family: inherit; transition: border-color 0.15s;
}
.inp:focus, .ta:focus { border-color: #dc2626; }
.ta { resize: vertical; }
select.inp { cursor: pointer; }
#user-search, #wl-search { width: 220px; padding: 8px 12px; background: #18181b; border: 1px solid #27272a; border-radius: 6px; color: #e4e4e7; font-size: 0.85rem; outline: none; }
#user-search:focus, #wl-search:focus { border-color: #dc2626; }
.ban-add { display: flex; gap: 8px; margin-bottom: 12px; }

/* Toggle switch */
.switch-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch-toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #27272a; border-radius: 24px; transition: 0.2s; cursor: pointer; }
.slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #71717a; border-radius: 50%; transition: 0.2s; }
.switch-toggle input:checked + .slider { background: rgba(220,38,38,0.4); }
.switch-toggle input:checked + .slider::before { transform: translateX(20px); background: #dc2626; }

/* Save bar */
.save-bar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 24px; }

/* User modal */
.admin-modal { max-width: 540px; }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #18181b; gap: 12px; }
.detail-row:last-of-type { border-bottom: none; }
.detail-row .label { font-size: 0.8rem; color: #71717a; }
.detail-row .val { font-size: 0.85rem; color: #e4e4e7; font-family: 'JetBrains Mono', monospace; }
.modal-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.8px; color: #52525b; margin: 22px 0 10px; font-weight: 600; }
.inline-form { display: flex; gap: 8px; margin-bottom: 10px; }
.inline-form select, .inline-form input { flex: 1; }
.alt-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.danger-zone { margin-top: 24px; padding-top: 18px; border-top: 1px solid #2a1414; }

/* Toast */
.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: #18181b; border: 1px solid #27272a; color: #e4e4e7;
    padding: 12px 22px; border-radius: 8px; font-size: 0.85rem; z-index: 2000;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.toast.ok { border-color: rgba(34,197,94,0.4); }
.toast.err { border-color: rgba(220,38,38,0.5); color: #fca5a5; }

@media (max-width: 640px) {
    .admin-nav { padding: 12px 16px; }
    .admin-tabs { order: 3; width: 100%; overflow-x: auto; }
    .admin-main { padding: 24px 16px 80px; }
    #user-search, #wl-search { width: 140px; }
}