/* ITMedia Dark-Theme (Standarddesign): Navy-Hintergrund, Karten ("Boxen") mit weichem Verlauf, Akzent Blau/Violett.
   Quelle/Referenz: ns2-dns-ui/theme_ext.py. Farben stehen als Variablen in :root.
   Erwartete Klassen: .topbar (.tb-brand, .tb-user), .container, .header-container, .card, .btn-action, .dns-table, .badge, .modal(-content). */

:root { --bg:#0a0e14; --panel:#121823; --panel2:#0e131b; --line:#222b3a; --line2:#2d384b; --txt:#d5dbe6; --dim:#8a96a8;
        --acc:#4c8dff; --acc2:#8b5cf6; --ok:#34d399; --bad:#f87171; }
body { padding:0 !important; background:
        radial-gradient(1100px 520px at 85% -10%, rgba(139,92,246,.16), transparent 60%),
        radial-gradient(900px 480px at -10% 110%, rgba(76,141,255,.14), transparent 60%), var(--bg) !important;
       background-attachment:fixed !important; color:var(--txt);
       font-family:"Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
.container { max-width:1280px !important; padding:26px 32px 40px; }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#27324a; border-radius:8px; } ::-webkit-scrollbar-thumb:hover { background:#34425f; }

/* Top-Leiste mit Benutzer */
.topbar { position:sticky; top:0; z-index:900; display:flex; justify-content:space-between; align-items:center; padding:10px 32px;
          background:rgba(10,14,20,.78); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line); }
.tb-brand { display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:.2px; color:#f3f6fb; }
.tb-img { height:28px; width:auto; display:block; }
.tb-logo { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; font-size:13px; color:#fff;
           background:linear-gradient(135deg,var(--acc),var(--acc2)); box-shadow:0 0 18px rgba(76,141,255,.45); }
.tb-env { font-size:11px; font-weight:500; color:var(--dim); border:1px solid var(--line2); border-radius:999px; padding:2px 9px; }
.tb-user { display:flex; align-items:center; gap:11px; padding:5px 6px 5px 12px; background:var(--panel); border:1px solid var(--line); border-radius:999px; }
.tb-live { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow:0 0 0 0 rgba(52,211,153,0); } }
.tb-avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff;
             background:linear-gradient(135deg,var(--acc),var(--acc2)); }
.tb-meta { display:flex; flex-direction:column; line-height:1.15; font-size:13px; color:#f3f6fb; }
.role { font-size:10px; text-transform:uppercase; letter-spacing:.8px; font-weight:700; }
.role-superadmin { color:#fbbf24; } .role-admin { color:var(--acc); }
.tb-out { font-size:12px; color:var(--bad) !important; text-decoration:none; padding:6px 12px; border-radius:999px; border:1px solid rgba(248,113,113,.35); }
.tb-out:hover { background:rgba(248,113,113,.14); }

/* Kopf, Karten */
.header-container { border-bottom:1px solid var(--line) !important; padding-bottom:18px !important; align-items:flex-start !important; }
.header-container h1 { font-size:26px !important; font-weight:700 !important; letter-spacing:-.3px;
        background:linear-gradient(90deg,#fff,#a9b8d4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.card { background:linear-gradient(180deg,var(--panel),var(--panel2)) !important; border:1px solid var(--line) !important; border-radius:14px !important;
        box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03) !important; }
.card h2 { letter-spacing:-.2px; }
.stats-row { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:7px 14px; color:var(--dim) !important; }
.stats-row span span, .stats-row strong { font-weight:600; }

/* Buttons */
button { background:linear-gradient(135deg,var(--acc),#3b6fe0); border:1px solid rgba(255,255,255,.12); border-radius:9px; padding:9px 18px; font-weight:600;
         box-shadow:0 4px 14px rgba(76,141,255,.28); transition:transform .12s, box-shadow .15s, filter .15s; }
button:hover { background:linear-gradient(135deg,#6aa1ff,var(--acc)); transform:translateY(-1px); box-shadow:0 6px 20px rgba(76,141,255,.4); }
.btn-action { background:#141b27 !important; border:1px solid var(--line2) !important; border-radius:9px !important; color:var(--txt) !important; box-shadow:none !important; padding:7px 14px !important; }
.btn-action:hover { border-color:var(--acc) !important; color:#fff !important; box-shadow:0 0 0 3px rgba(76,141,255,.14) !important; transform:translateY(-1px); }
.btn-danger-core { background:rgba(248,113,113,.10) !important; color:var(--bad) !important; border-color:rgba(248,113,113,.38) !important; }
.btn-danger-core:hover { background:#ef4444 !important; color:#fff !important; border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.2) !important; }
.btn-nast-success { background:rgba(52,211,153,.14) !important; color:var(--ok) !important; border-color:rgba(52,211,153,.4) !important; }
.btn-nast-error { background:rgba(248,113,113,.16) !important; color:var(--bad) !important; border-color:rgba(248,113,113,.45) !important; }
.btn-back { border-radius:9px; background:#141b27; border-color:var(--line2); }

/* Listen, Tabellen */
.zone-item { border-radius:10px; border-bottom:1px solid var(--line) !important; transition:background .15s; }
.zone-item:hover { background:rgba(76,141,255,.07); }
.zone-item .badge { display:none !important; }
.zone-link { color:#8fb6ff !important; }
.badge { background:rgba(76,141,255,.10) !important; color:#9db9ee !important; border:1px solid rgba(76,141,255,.28) !important; }
.dns-table { border-collapse:separate !important; border-spacing:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.dns-table th { background:#151c29 !important; color:var(--dim) !important; text-transform:uppercase; font-size:11px; letter-spacing:.9px; border:none !important; border-bottom:1px solid var(--line) !important; }
.dns-table td { border-bottom:1px solid var(--line) !important; }
.dns-table tbody tr:nth-child(even) { background:rgba(255,255,255,.015); }
.dns-table tr:hover { background:rgba(76,141,255,.07) !important; }
.queue-global-footer { background:var(--panel2); border-color:var(--line); border-radius:10px; }

/* Eingaben, Modal, Ausgabe */
input[type="text"], input[type="password"], select { background:#0b1018 !important; border:1px solid var(--line2) !important; border-radius:9px !important; color:#f3f6fb; }
input:focus, select:focus { border-color:var(--acc) !important; box-shadow:0 0 0 3px rgba(76,141,255,.2); outline:none; }
.modal { background:rgba(4,7,12,.72) !important; backdrop-filter:blur(6px) saturate(120%) !important; }
.modal-content { background:linear-gradient(180deg,#131a26,#0e131b) !important; border:1px solid var(--line2) !important; border-radius:16px !important;
                 box-shadow:0 30px 80px rgba(0,0,0,.65) !important; }
.output-pre { background:#080c12 !important; border:1px solid var(--line) !important; border-left:3px solid var(--acc) !important; border-radius:10px !important; }
.tab-btn { border-radius:8px !important; } .tab-btn.active { background:linear-gradient(135deg,var(--acc),var(--acc2)) !important; border-color:transparent !important; }
.blacklist-textarea, .ip-box-container { border-radius:10px !important; background:#0b1018 !important; border-color:var(--line2) !important; }
.app-footer { border-top:1px solid var(--line) !important; color:#5b667a !important; }

/* Dashboard: Zonen links, Mail-Queue rechts */
.container:has(#queueTableBody) { max-width:1700px !important; display:grid; grid-template-columns:minmax(360px,1fr) minmax(0,2fr); gap:0 24px; align-items:start; }
.container:has(#queueTableBody) > .header-container, .container:has(#queueTableBody) > .app-footer { grid-column:1 / -1; }
@media (max-width:1100px) { .container:has(#queueTableBody) { display:block; } }

/* Login */
.container.login-wrapper { max-width:380px !important; margin:90px auto !important; padding:0 16px; }
.login-wrapper .card { border-top:2px solid var(--acc) !important; padding:30px !important; box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 60px rgba(76,141,255,.08) !important; }