@import 'tailwindcss';
@import '../js/plugins/GlassToastra/style.css';

@import "../fonts/BaiJamjuree/font.css";
@import "../fonts/Space/font.css";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/wire-elements/modal/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';

    --font-bai: 'Bai Jamjuree';
    --font-space: 'Space Age';

    --color-glass-bg: rgba(17, 24, 39, 0.55);
    --color-glass-border: rgba(255, 255, 255, 0.08);
    --color-glass-light: rgba(31, 41, 55, 0.4);

    --color-accent: #06b6d4;      /* cyan-500 */
    --color-accent-600: #0891b2;  /* cyan-600 */
    --color-accent-700: #0e7490;  /* cyan-700 */
    --color-ring: rgba(124, 58, 237, .22);
    --sidebar-collapsed: 5.2rem;   /* ~83px */
    --sidebar-expanded: 16rem;     /* 256px */
    /* Optional: max-width Tokens */
    --max-w-sb-col: 5.2rem;
    --max-w-sb-exp: 16rem;

}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

.safe-pads {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
/* Falls nötig: dvh-Fallback */
@supports (height: 100dvh) {
    .min-h-dvh { min-height: 100dvh; }
    .h-dvh     { height: 100dvh; }
}

@utility w-sb-col {
    width: var(--sidebar-collapsed);
}
@utility w-sb-exp {
    width: var(--sidebar-expanded);
}

/* Max-width utilities, if du sie brauchst */
@utility max-w-sb-col {
    max-width: var(--max-w-sb-col);
}
@utility max-w-sb-exp {
    max-width: var(--max-w-sb-exp);
}


@layer components {
    /* Hauptkarte – entspricht dem helleren Glasslook deiner Server-Box */
    .mw-card {
        @apply rounded-2xl p-5 md:p-6
        border border-white/10
        bg-white/5 backdrop-blur-xl
        shadow-[0_20px_60px_-20px_rgba(0,0,0,.6),inset_0_1px_0_rgba(255,255,255,.06)];
        /* feiner Verlauf wie oben */
        background-image: radial-gradient(120% 120% at 100% 0%, rgba(56, 189, 248, .08) 0%, transparent 60%),
        radial-gradient(140% 140% at 0% 120%, rgba(16, 185, 129, .06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
    }

    /* Subkarte (kleinere Panels in einer Karte) */
    .mw-subcard {
        @apply rounded-xl p-4
        border border-white/10
        bg-white/5 backdrop-blur-xl;
    }

    .mw-title {
        @apply text-white/90 font-semibold tracking-wide;
    }

    .mw-subtle {
        @apply text-white/60 text-sm;
    }

    .mw-divider {
        @apply border-t border-white/10 my-4;
    }

    /* ── Header utility classes ── */
    .btn-ghost {
        @apply inline-flex items-center justify-center rounded-lg
               text-white/60 hover:text-white hover:bg-white/5
               transition-colors duration-150 cursor-pointer;
        padding: 0.4rem;
    }

    .popup {
        @apply rounded-xl border border-white/10 shadow-xl z-50
               bg-[#0f172a]/95 backdrop-blur-xl text-white/80;
    }
}

/* ============ BOOT-STATE: keine Sprünge ============ */

/* Während booting KEINE Transitionen */
html[data-ui="booting"] * {
    transition: none !important;
}

/* Labels, Carets, Submenüs in der Sidebar während booting NICHT zeigen */
html[data-ui="booting"] #main,
html[data-ui="booting"] #sidebar .sidebar-label,
html[data-ui="booting"] #sidebar .sidebar-caret,
html[data-ui="booting"] #sidebar [data-submenu] {
    display: none !important;
}

/* Mobil: Sidebar standardmäßig offcanvas (wegschieben) */
@media (max-width: 639.98px) {
    #sidebar {
        transform: translateX(-100%);
    }
}

/* Tablet: Sidebar standardmäßig RAIL (schmal) */
@media (min-width: 640px) and (max-width: 1023.98px) {
    #sidebar {
        --sbw: 5.2rem;
        width: var(--sbw);
        max-width: var(--sbw);
    }

    /* Nur im RAIL-Zustand ausblenden – falls du per JS .u-collapsed setzt */
    #sidebar.u-collapsed .sidebar-label,
    #sidebar.u-collapsed .sidebar-caret,
    #sidebar.u-collapsed [data-submenu] {
        display: none !important;
    }
}

/* Desktop: Sidebar standardmäßig EXPANDED (breit) */
@media (min-width: 1024px) {
    #sidebar {
        --sb-w: 16rem;
        width: var(--sb-w);
        max-width: var(--sb-w);
    }
}

/* ======== READY-STATE: Transitionen wieder an ========= */

/* Wenn JS fertig ist -> sanfte Transitions zulassen (ab jetzt darf’s animieren) */
html[data-ui="ready"] #sidebar {
    transition: width .2s ease, max-width .2s ease, transform .2s ease;
}

/* Rail-Zustand per Klasse (dein JS schaltet diese Klassen weiter) */
#sidebar.u-collapsed {
    --sb-w: 5.2rem;
    width: var(--sb-w);
    max-width: var(--sb-w);
}

#sidebar.ut-expanded {
    --sb-w: 16rem;
    width: var(--sb-w);
    max-width: var(--sb-w);
}

/* Rail: Labels/Carets/Submenüs IMMER ausblenden */
#sidebar.u-collapsed .sidebar-label,
#sidebar.u-collapsed .sidebar-caret,
#sidebar.u-collapsed [data-submenu] {
    display: none !important;
}

/* Mobile Offcanvas: Klassen aus deinem JS */
#sidebar.translate-x-0 {
    transform: translateX(0);
}

/* Sicherheitsnetz: [x-cloak] bleibt unsichtbar bis Alpine lädt */
[x-cloak] {
    display: none !important;
}

/*html { background-color: #132835; }*/
html { background-color: #0a0f18; }
body { background: transparent; }

/* EIN Hintergrund für alles – fix hinter dem Inhalt */
.app-backdrop:before{
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;                 /* unter dem Inhalt, aber über html */
    pointer-events: none;

    /* iOS stabil: deckt große/kleine Viewports ab */
    height: 100lvh;          /* large viewport height */
    min-height: 100svh;      /* safe viewport height Fallback */

    /* Dein gesamter Verlauf hier – durchgehend! */
    background-image:
        radial-gradient(120vmax 70vmax at 80% 40%, rgba(34,211,238,.28), transparent 45%),
        radial-gradient(110vmax 70vmax at 20% 60%, rgba(34,211,238,.28), transparent 45%),
        /*radial-gradient(110vmax 80vmax at 20% 62%, rgba(16,185,129,.18), transparent 45%),*/
        /*linear-gradient(180deg, rgba(8,47,73,.18), rgba(2,6,23,.28)), !* Farbbelag *!*/
        linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);

    /*radial-gradient(120vmax 70vmax at 80% -10%, rgba(34,211,238,.28), transparent 62%),*/
        /*radial-gradient(110vmax 80vmax at 10% 112%, rgba(16,185,129,.18), transparent 70%),*/
        /*linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);*/
/*radial-gradient(1600px 900px at 85% -15%, rgba(34,211,238,.28), transparent 62%),*/
/*        radial-gradient(1200px 800px at 10% 112%, rgba(16,185,129,.18), transparent 70%),*/
/*        linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);*/
}

/* Inhalt bewusst über die Backdrop heben */
#main{ position: relative; z-index: 1; }

/* (Optional) Safe-Area-Padding für iPhone-Notch */
.safe-pads{
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* === App Backdrop (türkis/glass) === */
/*.app-backdrop {*/
/*    position: fixed;*/
/*    inset: 0;*/
/*    z-index: -10;*/
/*    pointer-events: none;*/
/*    height: 100vh;*/
/*    background: radial-gradient(1600px 900px at 85% -15%, rgba(34, 211, 238, .28), transparent 62%),*/
/*    radial-gradient(1200px 800px at 10% 112%, rgba(16, 185, 129, .18), transparent 70%),*/
/*    linear-gradient(180deg, #0a0f16, #0f172a 52%, #0b1220 78%, #0a0f18);*/
/*}*/

.primary-btn {
    @apply relative inline-flex items-center justify-center rounded-xl
    px-6 py-2.5 text-sm font-medium text-white transition-all
    bg-gradient-to-r from-[rgba(34,211,238,0.35)] to-[rgba(16,185,129,0.35)]
    border border-white/10 shadow-[0_0_25px_rgba(16,185,129,0.08)]
    hover:from-[rgba(34,211,238,0.55)] hover:to-[rgba(16,185,129,0.55)]
    hover:shadow-[0_0_20px_rgba(34,211,238,0.25)]
    focus:outline-none focus:ring-2 focus:ring-[rgba(124,58,237,0.22)]
    focus:ring-offset-0;
}

/* === Layout Breite der Sidebar per Variable steuern === */
:root {
    --sb-w: 16rem;
}

/* Basiswert (expanded) */

/* Header + Main bekommen die gleiche linke Einrückung */
.header-shell,
.main-shell {
    padding-left: var(--sb-w);
    transition: padding-left .2s ease;
}

/* ---------- Desktop (>=1024) ---------- */
@media (min-width: 1024px) {
    /* default expanded */
    .main-shell {
        --sb-w: 16rem;
    }

    .main-shell.rail {
        --sb-w: 5.2rem;
    }

    /* wenn per JS .rail gesetzt wird */
    /* Sidebar-Breite koppeln */
    #sidebar {
        --sbw: 16rem;
    }

    #sidebar.u-collapsed {
        --sbw: 5.2rem;
    }
}

/* ---------- Tablet (640–1023) ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .main-shell {
        --sb-w: 5.2rem;
    }

    /* standard rail */
    .main-shell.ut-expanded {
        --sb-w: 16rem;
    }

    /* bei expand */
    #sidebar {
        --sbw: 5.2rem;
    }

    #sidebar.ut-expanded {
        --sbw: 16rem;
    }
}

/* ---------- Mobile (<640) ---------- */
@media (max-width: 639.98px) {
    .main-shell {
        --sb-w: 0;
    }

    #sidebar {
        transition: width .2s ease, max-width .2s ease, transform .2s ease;
    }

    /* off-canvas → kein Padding */
}

/*#sidebar {*/
/*    width: var(--sbw, 16rem);*/
/*    max-width: var(--sbw, 16rem);*/
/*    transition: width .2s ease, max-width .2s ease, transform .2s ease;*/
/*}*/

/* Sidebar selbst nimmt die variable Breite */
/*#sidebar {*/
/*    width: var(--sbw, 16rem);*/
/*    max-width: var(--sbw, 16rem);*/
/*    transition: width .2s ease, max-width .2s ease, transform .2s ease;*/
/*}*/

/* Rail: Label, Carets, Submenüs ausblenden (kein Springen) */
#sidebar.u-collapsed .sidebar-label {
    display: none !important;
}

#sidebar.u-collapsed .sidebar-caret {
    display: none !important;
}

#sidebar.u-collapsed [data-submenu] {
    display: none !important;
}

/* Anti-FOUC für Alpine */
[x-cloak] {
    display: none !important;
}

/* Optional: beim First Paint Animationen unterdrücken (falls du body.no-animate setzt) */
.no-animate * {
    transition: none !important;
}

/* Reusable utilities */
.glass-card {
    @apply bg-glass-bg/70 backdrop-blur-md border border-glass-border rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,.25)];
}

.glass-input {
    @apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100 placeholder-gray-400
    focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] focus:border-[rgba(124,58,237,0.45)]
    transition-colors;
}

.btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white font-medium
    bg-gradient-to-b from-cyan-500 to-cyan-600 hover:from-cyan-400 hover:to-cyan-600
    focus:outline-none focus:ring-0 focus:ring-[var(--color-ring)]
    shadow-[inset_0_1px_0_rgba(255,255,255,.08),0_8px_20px_rgba(0,0,0,.25)];
}

.badge {
    @apply text-xs px-2 py-0.5 rounded-md border border-glass-border text-gray-300/80 bg-glass-light/40;
}

.card-title {
    @apply text-gray-100/95 font-semibold tracking-wide;
}

.card-subtle {
    @apply text-gray-300/70 text-sm leading-relaxed;
}

/* Zustände für Inputs */
.input-error {
    @apply border-red-400/50 focus:border-red-400/70 focus:ring-red-400/30;
}

.input-success {
    @apply border-emerald-400/50 focus:border-emerald-400/70 focus:ring-emerald-400/30;
}

.input-disabled {
    @apply opacity-60 cursor-not-allowed;
}

/* Label & Fehlermeldung */
.field-label {
    @apply block text-sm text-gray-300 mb-1;
}

.field-error {
    @apply mt-1 text-xs text-red-300;
}

.field-help {
    @apply mt-1 text-xs text-gray-400;
}

/* Select im gleichen Look wie .glass-input */
.glass-select {
    @apply bg-glass-light/50 border border-glass-border rounded-lg text-gray-100
    focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] focus:border-[rgba(124,58,237,0.45)]
    transition-colors;
}

/* Input mit Icon links (Wrapper) */
.input-with-icon {
    @apply relative;
}

.input-with-icon > .icon-left {
    @apply absolute inset-y-0 left-3 flex items-center text-gray-400;
}

.input-with-icon > input {
    @apply pl-10;
    /* Platz für Icon */
}

/* Karten-Interaktion (leichtes Hover-Lift) */
.glass-card:hover {
    @apply shadow-[0_12px_38px_rgba(0,0,0,.3)];
}

/* Buttons – zusätzliche Varianten */
.ghost-btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-gray-200
    bg-white/5 border border-white/10 hover:bg-white/10
    focus:outline-none focus:ring-0 focus:ring-[var(--color-ring)];
}

.danger-btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-white
    bg-gradient-to-b from-rose-500 to-rose-600 hover:from-rose-400 hover:to-rose-600
    focus:outline-none focus:ring-0 focus:ring-rose-400/40;
}

/* Checkbox/Switch im Glas-Look */
.glass-checkbox {
    @apply h-4 w-4 rounded border border-glass-border bg-white/10
    checked:bg-cyan-500 checked:border-cyan-500
    focus:ring-2 focus:ring-[var(--color-ring)];
}

/* Trennlinie in Karten */
.divider {
    @apply border-t border-glass-border/80 my-6;
}


button {
    cursor: pointer;
}

/* ============================================================
   MAILWOLT DASHBOARD REDESIGN – alle mw-* Klassen
   ============================================================ */
:root {
    --mw-bg:        #0d0f14;
    --mw-surface:   #111318;
    --mw-inner:     #0d0f14;
    --mw-border:    #1e2230;
    --mw-border-hi: #2d3158;
    --mw-hover:     #1a1e2a;
    --mw-active:    #1e2240;
    --mw-accent:    #6366f1;
    --mw-accent-lt: #818cf8;
    --mw-green:     #4ade80;
    --mw-green-bg:  #0f2a1a;
    --mw-green-bd:  #166534;
    --mw-amber:     #f59e0b;
    --mw-amber-bg:  #2a1a0a;
    --mw-amber-bd:  #92400e;
    --mw-red:       #f87171;
    --mw-red-bg:    #1a0d0d;
    --mw-red-bd:    #4a1515;
    --mw-sky:       #38bdf8;
    --mw-t1:        #f1f5f9;
    --mw-t2:        #e2e8f0;
    --mw-t3:        #94a3b8;
    --mw-t4:        #64748b;
    --mw-t5:        #475569;
}

/* Shell */
.mw-shell {
    display: flex; height: 100vh; overflow: hidden;
    background: var(--mw-bg); color: var(--mw-t2);
    font-family: 'Bai Jamjuree', ui-sans-serif, system-ui, sans-serif;
}

/* Scrollbar */
.mw-scroll::-webkit-scrollbar { width: 4px; }
.mw-scroll::-webkit-scrollbar-track { background: transparent; }
.mw-scroll::-webkit-scrollbar-thumb { background: var(--mw-border); border-radius: 4px; }
.mw-scroll { scrollbar-width: thin; scrollbar-color: var(--mw-border) transparent; }

/* Live-Pulse */
@keyframes mw-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.mw-pulse { animation: mw-pulse 2s infinite; }

/* ── Sidebar ── */
.mw-sidebar {
    width: 220px; min-width: 220px; background: var(--mw-surface);
    border-right: 1px solid var(--mw-border);
    display: flex; flex-direction: column; flex-shrink: 0;
    height: 100vh; overflow: hidden;
    transition: transform .25s ease;
}
.mw-sidebar-logo {
    padding: 20px 16px 16px; border-bottom: 1px solid var(--mw-border);
    display: flex; align-items: center; gap: 11px;
}
.mw-sidebar-logo-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    display: flex; align-items: center; justify-content: center;
}
.mw-sidebar-logo-title { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: var(--mw-t1); }
.mw-sidebar-logo-sub   { font-size: 10px; color: var(--mw-t4); letter-spacing: 1px; text-transform: uppercase; margin-top: 1px; }

/* Nav */
.mw-nav { flex: 1; padding: 14px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.mw-nav-group-label { font-size: 10px; color: var(--mw-t5); text-transform: uppercase; letter-spacing: 1.2px; padding: 0 10px 6px; margin: 0; font-weight: 600; }
.mw-nav-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 7px; font-size: 13px; color: var(--mw-t3);
    text-decoration: none; transition: background .12s, color .12s;
}
.mw-nav-item:hover { background: var(--mw-hover); color: var(--mw-t2); }
.mw-nav-item.active { background: var(--mw-active); color: var(--mw-accent-lt); font-weight: 500; }

/* Sidebar Footer */
.mw-sidebar-footer { padding: 14px 12px; border-top: 1px solid var(--mw-border); flex-shrink: 0; }
.mw-user-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: #fff;
}
.mw-logout { background: none; border: none; cursor: pointer; color: var(--mw-t5); padding: 4px; transition: color .12s; }
.mw-logout:hover { color: var(--mw-t3); }

/* Sidebar Overlay (Mobile) */
.mw-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 40;
}
.mw-overlay.open { display: block; }
.mw-hamburger { display: none; background: none; border: none; color: var(--mw-t3); cursor: pointer; padding: 4px; }

/* ── Main ── */
.mw-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* Topbar */
.mw-topbar {
    padding: 10px 24px; border-bottom: 1px solid var(--mw-border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--mw-bg); flex-shrink: 0; gap: 10px;
}
.mw-breadcrumb { font-size: 13px; color: var(--mw-t4); display: flex; align-items: center; gap: 5px; }
.mw-breadcrumb-current { color: var(--mw-t2); font-weight: 500; }
.mw-topbar-right { display: flex; align-items: center; gap: 10px; }
.mw-live-badge {
    display: flex; align-items: center; gap: 5px;
    background: var(--mw-green-bg); border: 1px solid var(--mw-green-bd);
    border-radius: 20px; padding: 4px 10px; font-size: 11px; color: var(--mw-green); font-weight: 600;
}
.mw-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mw-green); }
.mw-search-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--mw-surface); border: 1px solid var(--mw-border);
    border-radius: 8px; padding: 6px 12px; font-size: 12px; color: var(--mw-t4); cursor: pointer;
    transition: border-color .12s;
}
.mw-search-btn:hover { border-color: var(--mw-border-hi); }
.mw-domain-btn {
    background: #3730a3; border: 1px solid #4338ca; border-radius: 7px;
    padding: 6px 14px; font-size: 12px; color: #e0e7ff; cursor: pointer;
    font-weight: 500; white-space: nowrap; transition: background .12s;
}
.mw-domain-btn:hover { background: #4338ca; }

/* Content scroll */
.mw-content { flex: 1; overflow-y: auto; padding: 24px; }

/* ── Hero ── */
.mw-hero {
    background: linear-gradient(135deg,#1a1e2e 0%,#16192a 60%,#1a1529 100%);
    border: 1px solid var(--mw-border-hi); border-radius: 12px;
    padding: 20px 24px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.mw-hero-icon {
    width: 44px; height: 44px; background: var(--mw-active);
    border: 1px solid #3730a3; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mw-hero-title { font-size: 18px; font-weight: 600; color: var(--mw-t1); margin: 0 0 7px; }
.mw-hero-tags  { display: flex; gap: 6px; flex-wrap: wrap; }
.mw-tag { background: var(--mw-active); color: var(--mw-accent-lt); font-size: 10px; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }

/* ── Card ── */
.mw-card { background: var(--mw-surface); border: 1px solid var(--mw-border); border-radius: 12px; padding: 18px; }
.mw-card-title { font-size: 11px; font-weight: 600; color: var(--mw-t5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }

/* ── Metric cards ── */
.mw-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin-bottom: 20px; }
.mw-metric-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mw-metric-label  { font-size: 11px; color: var(--mw-t4); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.mw-metric-icon   { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.mw-metric-value  { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 5px; }
.mw-metric-sub    { font-size: 11px; color: var(--mw-t5); margin-bottom: 10px; }
.mw-bar-track     { background: var(--mw-border); border-radius: 4px; height: 4px; }
.mw-bar-fill      { height: 4px; border-radius: 4px; width: 0%; transition: width .5s; }

/* ── Status cards ── */
.mw-status-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin-bottom: 20px; }
.mw-status-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.mw-status-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mw-status-title { font-size: 12px; font-weight: 600; color: var(--mw-t2); }
.mw-status-sub   { font-size: 10px; color: var(--mw-t4); margin-top: 2px; }
.mw-badge        { font-size: 10px; padding: 2px 9px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.mw-badge.ok     { background: var(--mw-green-bg); color: var(--mw-green); border: 1px solid var(--mw-green-bd); }
.mw-badge.info   { background: #1a1e3a; color: var(--mw-accent-lt); border: 1px solid #3730a3; }
.mw-badge.warn   { background: var(--mw-amber-bg); color: var(--mw-amber); border: 1px solid var(--mw-amber-bd); }
.mw-progress     { background: var(--mw-border); border-radius: 3px; height: 3px; margin-top: 12px; }
.mw-progress-fill{ height: 3px; border-radius: 3px; background: linear-gradient(90deg,#4338ca,#818cf8); width: 0%; transition: width .5s; }
.mw-card-btn     { margin-top: 12px; background: var(--mw-hover); border: 1px solid var(--mw-border-hi); border-radius: 7px; padding: 6px; text-align: center; font-size: 11px; color: var(--mw-accent-lt); cursor: pointer; transition: background .12s; }
.mw-card-btn:hover { background: var(--mw-active); }

/* ── Bottom grid ── */
.mw-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mw-right-col   { display: flex; flex-direction: column; gap: 14px; }

/* ── Services ── */
.mw-svc-row       { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #151820; }
.mw-svc-row:last-child { border-bottom: none; }
.mw-svc-dot       { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mw-svc-dot.ok    { background: var(--mw-green); box-shadow: 0 0 5px rgba(74,222,128,.35); }
.mw-svc-dot.warn  { background: var(--mw-amber); box-shadow: 0 0 5px rgba(245,158,11,.35); }
.mw-svc-dot.err   { background: var(--mw-red);   box-shadow: 0 0 5px rgba(248,113,113,.35); }
.mw-svc-name      { font-size: 13px; color: #cbd5e1; margin-left: 10px; flex: 1; }
.mw-svc-type      { font-size: 10px; color: var(--mw-t5); margin-left: 5px; }

/* ── Storage ── */
.mw-donut-wrap  { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.mw-legend-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.mw-legend-dot  { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.mw-legend-lbl  { color: var(--mw-t3); flex: 1; }
.mw-legend-val  { color: var(--mw-t2); font-weight: 500; }

/* ── Mini-stats ── */
.mw-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mw-mini-stat { background: var(--mw-inner); border: 1px solid var(--mw-border); border-radius: 8px; padding: 12px; }
.mw-mini-val  { font-size: 20px; font-weight: 700; }
.mw-mini-lbl  { font-size: 10px; color: var(--mw-t5); margin-top: 3px; }

/* ── Tables ── */
.mw-tables-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }

/* ── Livewire Dienste-Override ── */
.svc-live .glass-card { background: transparent!important; border: none!important; box-shadow: none!important; padding: 0!important; }
.svc-live .glass-card .inline-flex.rounded-full,
.svc-live .glass-card .inline-flex.rounded-full + span { display: none!important; }
.svc-live .flex.items-center.justify-between.mb-3 { display: none!important; }
.svc-live li { display: flex!important; align-items: center!important; padding: 8px 0!important; border-bottom: 1px solid #151820!important; }
.svc-live li:last-child { border-bottom: none!important; }
.svc-live .h-2.w-2.rounded-full { width: 7px!important; height: 7px!important; flex-shrink: 0!important; }
.svc-live .bg-emerald-400 { background: #4ade80!important; box-shadow: 0 0 6px rgba(74,222,128,.4)!important; }
.svc-live .bg-rose-400    { background: #f87171!important; box-shadow: 0 0 6px rgba(248,113,113,.4)!important; }
.svc-live .text-white\/90 { font-size: .8125rem!important; color: #cbd5e1!important; }
.svc-live .text-\[11px\].text-white\/45 { font-size: .625rem!important; color: #475569!important; }
.svc-live .rounded-full.text-xs.border  { font-size: .625rem!important; padding: 2px 8px!important; border-radius: 10px!important; }
.svc-live .text-emerald-300 { color: #4ade80!important; }
.svc-live .bg-emerald-500\/10 { background: #0f2a1a!important; }
.svc-live .border-emerald-400\/30 { border-color: rgba(74,222,128,.2)!important; }
.svc-live .text-rose-300 { color: #f87171!important; }
.svc-live .bg-rose-500\/10 { background: #1a0d0d!important; }
.svc-live .border-rose-400\/30 { border-color: rgba(248,113,113,.2)!important; }

/* ── Livewire Domains-Override ── */
.dom-live .glass-card { background: transparent!important; border: none!important; box-shadow: none!important; padding: 0!important; }
.dom-live li { padding: 6px 4px!important; }
.dom-live .truncate.text-white\/90 { font-size: .8125rem!important; color: #e2e8f0!important; }
.dom-live .size-8 { width: 1.75rem!important; height: 1.75rem!important; background: #1e2240!important; border-color: #2d3158!important; }

/* ── Livewire Logins-Override ── */
.log-live .glass-card { background: transparent!important; border: none!important; box-shadow: none!important; padding: 0!important; }
.log-live .flex.items-center.justify-between.mb-3 { display: none!important; }
.log-live table { font-size: .75rem!important; width: 100%!important; }
.log-live th { color: #64748b!important; font-size: .625rem!important; font-weight: 600!important; text-transform: uppercase!important; padding: 0 0 6px!important; }
.log-live td { padding: 5px 0!important; color: #94a3b8!important; }
.log-live .text-white\/90 { color: #e2e8f0!important; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .mw-content { padding: 18px; }
    .mw-topbar  { padding: 10px 18px; }
}
@media (max-width: 900px) {
    .mw-bottom-grid { grid-template-columns: 1fr; }
    .mw-tables-grid { grid-template-columns: 1fr; }
    .mw-right-col   { flex-direction: row; }
}
@media (max-width: 768px) {
    .mw-sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); }
    .mw-sidebar.open { transform: translateX(0); }
    .mw-hamburger { display: flex; }
    .mw-content { padding: 14px; }
    .mw-topbar  { padding: 9px 14px; }
    .mw-metrics-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .mw-status-grid  { grid-template-columns: repeat(2,1fr); gap: 10px; }
}
@media (max-width: 480px) {
    .mw-metrics-grid { grid-template-columns: 1fr; }
    .mw-status-grid  { grid-template-columns: 1fr; }
    .mw-right-col    { flex-direction: column; }
}

.chip {
    @apply flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur px-3 py-2 hover:bg-white/10 transition;
}

.badge {
    @apply ml-1 rounded-full px-2 py-0.5 text-xs font-medium border border-white/10;
}

@layer components {
    .section-title {
        @apply text-white/70 text-sm font-medium uppercase tracking-wide;
    }

    .btn-surface {
        @apply inline-flex items-center gap-2 rounded-lg border border-sky-400/20 bg-sky-600/20
        hover:bg-sky-600/30 text-sky-100 text-sm px-3 py-1.5 transition;
    }

    .input-surface {
        @apply bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-white/90 placeholder-white/30;
    }

    .checkbox-accent {
        @apply h-4 w-4 rounded border border-white/20 bg-white/5 text-sky-400 focus:ring-0;
    }

    .toggle-tile {
        @apply flex items-center gap-3 p-3 rounded-xl border border-white/10 bg-white/5;
    }

    .host-row {
        @apply flex items-stretch rounded-xl overflow-hidden border border-white/10 bg-white/5;
    }

    .host-prefix {
        @apply px-2.5 flex items-center text-white/40 text-xs border-r border-white/10;
    }

    .host-input {
        @apply flex-1 bg-transparent px-3 py-2 outline-none text-white/90;
    }

    .host-suffix {
        @apply px-2.5 flex items-center text-white/50 bg-white/5 border-l border-white/10;
    }

    .host-fqdn {
        @apply text-xs text-white/60 mt-1 font-mono tabular-nums;
    }

    .btn-primary {
        @apply inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.06] px-3 py-1.5 text-sm text-white/80 hover:bg-white/[0.12] hover:text-white;
    }

}

html, body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

::-webkit-scrollbar {
    display: none;
}



/* Pulse für "running" */
@keyframes tgPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0) }
    50%      { box-shadow: 0 0 40px rgba(34,211,238,.12) } /* cyan-400/12 */
}
.tg-pulse { animation: tgPulse 1.6s ease-in-out infinite; }

/* leichtes Shake für Fehler/forbidden */
@keyframes tgShake {
    0% { transform: translateX(0) }
    25% { transform: translateX(-2px) }
    50% { transform: translateX(2px) }
    75% { transform: translateX(-1px) }
    100% { transform: translateX(0) }
}
.tg-shake { animation: tgShake .35s ease-in-out 1; }

@layer base {
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
    @apply outline-none transition
    focus:border-[rgba(124,58,237,0.45)] focus:ring-1 focus:ring-[rgba(124,58,237,0.18)]
}

@layer components {
    .nx-card {
        @apply rounded-2xl p-6 md:p-7
        bg-white/5 backdrop-blur-xl
        border border-white/10
        shadow-[0_20px_60px_-20px_rgba(0,0,0,.6),inset_0_1px_0_rgba(255,255,255,.06)];
    }

    .nx-chip {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm
        bg-white/8 text-white/90 border border-white/10;
    }

    .nx-subtle {
        @apply text-white/80 leading-relaxed;
    }

    .nx-input {
        @apply w-full rounded-xl px-3.5 py-3 text-white/95
        bg-[rgba(12,18,28,.55)]
        border border-white/10
        shadow-[inset_0_1px_0_rgba(255,255,255,.06)]
        outline-none transition
        focus:border-[rgba(124,58,237,0.45)] focus:ring-1 focus:ring-[rgba(124,58,237,0.18)];
    }

    .nx-label {
        @apply block text-xs text-white/70 mb-1;
    }

    .nx-eye {
        @apply absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-lg
        hover:bg-white/5 focus:outline-none focus:ring-0 focus:ring-[rgba(124,58,237,0.18)];
    }

    .nx-check {
        @apply h-4 w-4 rounded border-white/20 bg-white/10
        focus:ring-2 focus:ring-[rgba(124,58,237,0.22)];
    }

    .nx-btn {
        @apply inline-flex items-center justify-center rounded-xl py-3 font-medium text-white
        bg-gradient-to-r from-[#6d7cff] via-[#5aa7ff] to-[#39d0ff]
        shadow-[inset_0_1px_0_rgba(255,255,255,.12),0_10px_30px_-8px_rgba(56,189,248,.45)]
        hover:from-[#7e89ff] hover:to-[#46d7ff]
        focus:outline-none focus:ring-0 focus:ring-[rgba(124,58,237,0.18)];
    }

    .nx-btn-ghost {
        @apply rounded-xl px-4 py-2.5 text-white/85 border border-white/10 bg-white/5
        hover:bg-white/10 focus:outline-none focus:ring-0 focus:ring-[rgba(124,58,237,0.18)];
    }

    .nx-link {
        @apply text-sky-300 hover:text-sky-200 transition;
    }

    .nx-divider {
        @apply relative text-center text-white/50 text-xs mt-7 mb-2;
    }

    .nx-divider::before, .nx-divider::after {
        content: "";
        @apply absolute top-1/2 w-[38%] h-px bg-white/10;
    }

    .nx-divider::before {
        left: 0;
    }

    .nx-divider::after {
        right: 0;
    }

    .nx-alert {
        @apply flex gap-3 items-start rounded-xl p-3.5
        border border-rose-400/25 bg-rose-400/10 text-rose-50;
    }


    hr, .hr {
        border-color: var(--color-slate-700);
    }

}


/* ── Redesign aliases & missing classes ── */
.mw-hidden { display: none !important; }
.mw-metric-val { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 5px; }
.mw-val-indigo { color: var(--mw-accent-lt); }
.mw-val-green  { color: var(--mw-green); }
.mw-val-amber  { color: var(--mw-amber); font-size: 22px; }
.mw-val-sky    { color: var(--mw-sky); font-size: 22px; }
.mw-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mw-card-label  { font-size: 11px; color: var(--mw-t4); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.mw-icon-indigo { background: #1a1e3a; }
.mw-icon-green  { background: #1a2a1a; }
.mw-icon-amber  { background: #2a1f1a; }
.mw-icon-sky    { background: #1a2030; }
.mw-bar-indigo { background: linear-gradient(90deg,#4338ca,#818cf8); }
.mw-bar-green  { background: linear-gradient(90deg,#166534,#4ade80); }
.mw-load-dots { display: flex; gap: 4px; margin-top: 10px; }
.mw-load-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--mw-border); }
.mw-uptime-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mw-chip-sky { background: #0c2a3a; color: var(--mw-sky); font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.mw-svc-info  { min-width: 0; flex: 1; margin-left: 10px; }
.mw-svc-title { font-size: 12px; font-weight: 600; color: var(--mw-t2); }
.mw-svc-sub   { font-size: 10px; color: var(--mw-t4); margin-top: 2px; }
.mw-si        { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mw-si-green  { background: var(--mw-green-bg); border: 1px solid var(--mw-green-bd); }
.mw-si-indigo { background: #1a1e3a; border: 1px solid #3730a3; }
.mw-si-sky    { background: #1a2030; border: 1px solid #1e4060; }
.mw-si-red    { background: var(--mw-red-bg); border: 1px solid var(--mw-red-bd); }
.mw-badge-green  { background: var(--mw-green-bg); color: var(--mw-green); border: 1px solid var(--mw-green-bd); }
.mw-badge-indigo { background: #1a1e3a; color: var(--mw-accent-lt); border: 1px solid #3730a3; }
.mw-badge-amber  { background: var(--mw-amber-bg); color: var(--mw-amber); border: 1px solid var(--mw-amber-bd); }
.mw-badge-red    { background: var(--mw-red-bg); color: var(--mw-red); border: 1px solid var(--mw-red-bd); }
.mw-count-val { color: var(--mw-t3); font-weight: 500; }
.mw-alerts-empty { font-style: italic; }
.mw-alert-item   { font-size: 11px; padding: 4px 8px; border-radius: 5px; margin-bottom: 4px; }
.mw-alert-error  { background: var(--mw-red-bg); color: #fca5a5; border: 1px solid rgba(248,113,113,.2); }
.mw-alert-warn   { background: var(--mw-amber-bg); color: #fcd34d; border: 1px solid rgba(252,211,77,.2); }
.mw-alert-info   { background: var(--mw-surface); color: var(--mw-t3); border: 1px solid var(--mw-border); }
.mw-donut-legend { flex: 1; }
.mw-donut-row    { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.mw-donut-dot    { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.mw-donut-label  { color: var(--mw-t3); flex: 1; }
.mw-donut-val    { color: var(--mw-t2); font-weight: 500; }
.mw-dot-accent   { background: var(--mw-accent); }
.mw-dot-border   { background: var(--mw-border); }
.mw-mini         { background: var(--mw-inner); border: 1px solid var(--mw-border); border-radius: 8px; padding: 12px; }
.mw-mini-label   { font-size: 10px; color: var(--mw-t5); margin-top: 3px; }
.mw-hero-inner   { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mw-hero-right   { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.mw-btn-backup   { width: 100%; background: var(--mw-hover); border: 1px solid var(--mw-border-hi); border-radius: 6px; padding: 5px; font-size: 11px; color: var(--mw-accent-lt); cursor: pointer; margin-top: 8px; transition: background .15s; text-align: center; }
.mw-btn-backup:hover { background: var(--mw-active); }

/* ═══════════════════════════════════════
   MailWolt Dashboard Design System v2
   Dark Mode Only — Violet als Akzentfarbe
═══════════════════════════════════════ */

:root {
  --mw-bg:   #08090f;
  --mw-bg2:  #0d0f19;
  --mw-bg3:  #111420;
  --mw-bg4:  #161a28;
  --mw-b1:   #1c2035;
  --mw-b2:   #242840;
  --mw-b3:   #2e3450;

  --mw-v:    #7c3aed;
  --mw-v2:   #9d6ef8;
  --mw-vbg:  #120e28;
  --mw-vbd:  #261850;

  --mw-gr:   #22c55e;  --mw-grbg: #051510;  --mw-grbd: #0d3520;
  --mw-am:   #f59e0b;  --mw-ambg: #160f00;  --mw-ambd: #2c1e00;
  --mw-rd:   #ef4444;  --mw-rdbg: #160505;  --mw-rdbd: #2e0e0e;

  --mw-t1: #edf0fc;
  --mw-t2: #9aa3be;
  --mw-t3: #737b96;
  --mw-t4: #4e576e;
  --mw-t5: #2d3448;
}

/* ── Shell ── */
.mw-shell { display: flex; height: 100vh; overflow: hidden; background: var(--mw-bg); }

/* ── Sidebar ── */
.mw-sidebar {
  width: 218px; min-width: 218px; background: var(--mw-bg2);
  border-right: 1px solid var(--mw-b1); display: flex;
  flex-direction: column; height: 100vh;
}
.mw-sb-head {
  padding: 20px 16px 16px; border-bottom: 1px solid var(--mw-b1);
  display: flex; align-items: center; gap: 10px;
}
.mw-sb-mark {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--mw-v); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(124,58,237,.3);
}
.mw-sb-name { font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--mw-t1); }
.mw-sb-sub  { font-size: 9.5px; color: var(--mw-t4); letter-spacing: .8px; text-transform: uppercase; margin-top: 1px; }

.mw-nav { flex: 1; padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.mw-nav::-webkit-scrollbar { display: none; }
.mw-nav-label {
  font-size: 9.5px; font-weight: 600; color: var(--mw-t5); text-transform: uppercase;
  letter-spacing: 1.3px; padding: 12px 10px 4px; margin: 0;
}
.mw-nav-label:first-child { padding-top: 4px; }
.mw-nav-item {
  display: flex; align-items: center; gap: 8px; padding: 7.5px 10px;
  border-radius: 6px; font-size: 13px; color: var(--mw-t3);
  text-decoration: none; transition: all .1s;
}
.mw-nav-item:hover { background: var(--mw-bg3); color: var(--mw-t2); }
.mw-nav-item.active { background: var(--mw-bg3); color: var(--mw-t1); font-weight: 500; }
.mw-nav-item svg { flex-shrink: 0; opacity: .5; }
.mw-nav-item:hover svg, .mw-nav-item.active svg { opacity: .8; }
.mw-nav-dot {
  display: none; margin-left: auto; width: 5px; height: 5px;
  border-radius: 50%; background: var(--mw-v);
  box-shadow: 0 0 6px rgba(124,58,237,.6);
  flex-shrink: 0;
}
.mw-nav-item.active .mw-nav-dot { display: block; }
.mw-nav-item.active:has(.mw-nav-badge) .mw-nav-dot { display: none; }
.mw-nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 600;
  background: var(--mw-bg4); color: var(--mw-t3); border: 1px solid var(--mw-b2);
  padding: 0 6px; border-radius: 5px; line-height: 18px; flex-shrink: 0;
  transition: all .15s;
}
.mw-nav-sub-item {
  display: flex; align-items: center; gap: 8px; padding: 5.5px 10px 5.5px 30px;
  border-radius: 6px; font-size: 12px; color: var(--mw-t4);
  text-decoration: none; transition: all .1s; position: relative;
}
.mw-nav-sub-item::before {
  content: ''; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--mw-b3);
}
.mw-nav-sub-item:hover { background: var(--mw-bg3); color: var(--mw-t2); }
.mw-nav-sub-item:hover::before { background: var(--mw-t3); }
.mw-nav-sub-item.active { background: var(--mw-bg3); color: var(--mw-t2); font-weight: 500; }
.mw-nav-sub-item.active::before { background: var(--mw-v); box-shadow: 0 0 5px rgba(124,58,237,.5); }

.mw-nav-item.active .mw-nav-badge {
  background: var(--mw-vbg); color: var(--mw-v2); border-color: var(--mw-vbd);
  box-shadow: 0 0 8px rgba(124,58,237,.35);
}

.mw-sb-foot {
  padding: 13px; border-top: 1px solid var(--mw-b1);
  display: flex; align-items: center; gap: 8px;
}
.mw-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--mw-t2);
}

/* ── Main ── */
.mw-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ════════════════════════════════════════
   Topbar — Redesign
════════════════════════════════════════ */
.mw-topbar {
  height: 54px;
  padding: 0 20px;
  border-bottom: 1px solid var(--mw-b1);
  background: var(--mw-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 8px;
}

/* ── Links ── */
.mw-tb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.mw-hamburger {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: none;
  border: none;
  color: var(--mw-t3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mw-hamburger:hover { background: var(--mw-bg3); color: var(--mw-t1); }

.mw-tb-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
}
.mw-tb-parent  { color: var(--mw-t4); white-space: nowrap; flex-shrink: 0; }
.mw-tb-sep     { color: var(--mw-b3); flex-shrink: 0; }
.mw-tb-current { color: var(--mw-t2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Rechts ── */
.mw-tb-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Live-Dot */
.mw-tb-live {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.18);
  font-size: 11px; font-weight: 500; color: #4ade80;
}
.mw-tb-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,.7);
  animation: mw-pulse 2s infinite;
}
@keyframes mw-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Suchbutton */
.mw-tb-search {
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  background: var(--mw-bg3);
  border: 1px solid var(--mw-b2);
  border-radius: 8px;
  font-size: 12px; color: var(--mw-t4);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.mw-tb-search:hover { border-color: var(--mw-b3); color: var(--mw-t2); }
.mw-tb-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 5px;
  background: var(--mw-b1); border: 1px solid var(--mw-b2);
  border-radius: 4px; font-size: 10px; color: var(--mw-t5);
  font-family: ui-monospace, monospace;
}

/* Hostname-Badge */
.mw-tb-host {
  display: flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 10px;
  background: var(--mw-bg3); border: 1px solid var(--mw-b2);
  border-radius: 8px;
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--mw-t4);
  white-space: nowrap;
}

/* + Domain Button */
.mw-tb-add {
  display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: var(--mw-v);
  border: none; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(124,58,237,.35);
  transition: background .15s, box-shadow .15s;
}
.mw-tb-add:hover { background: #6d28d9; box-shadow: 0 2px 16px rgba(124,58,237,.5); }

/* ── Content ── */
.mw-content { flex: 1; overflow-y: auto; padding: 20px 22px 30px; }
.mw-content::-webkit-scrollbar { width: 4px; }
.mw-content::-webkit-scrollbar-thumb { background: var(--mw-b2); border-radius: 2px; }

/* ── Hero Banner ── */
.mw-hero {
  background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 22px; display: flex; align-items: center;
  gap: 18px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.mw-hero::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, rgba(124,58,237,.8) 0%, rgba(124,58,237,.2) 60%, transparent 100%);
}
.mw-hero-icon {
  width: 38px; height: 38px; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mw-hero-title { font-size: 15px; font-weight: 600; color: var(--mw-t1); margin-bottom: 5px; }
.mw-hero-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mw-hero-tag {
  font-size: 9px; font-weight: 500; color: var(--mw-t4); background: var(--mw-bg4);
  border: 1px solid var(--mw-b2); padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .4px;
}
.mw-hero-divider { width: 1px; height: 38px; background: var(--mw-b1); flex-shrink: 0; }
.mw-hero-stats { display: flex; gap: 0; }
.mw-hstat { padding: 0 18px; text-align: center; border-right: 1px solid var(--mw-b1); }
.mw-hstat:last-child { border-right: none; }
.mw-hstat-n { font-size: 17px; font-weight: 700; color: var(--mw-t1); line-height: 1; }
.mw-hstat-n.ok { color: var(--mw-gr); }
.mw-hstat-l { font-size: 9px; color: var(--mw-t4); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.mw-hero-host {
  margin-left: auto; font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--mw-t4); background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  border-radius: 5px; padding: 5px 10px;
}

/* ── Section Label ── */
.mw-section { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mw-section-title {
  font-size: 9.5px; font-weight: 600; color: var(--mw-t4);
  text-transform: uppercase; letter-spacing: 1.3px; white-space: nowrap;
}
.mw-section-line { flex: 1; height: 1px; background: var(--mw-b1); }

/* ── Metric Grid ── */
.mw-metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 11px; margin-bottom: 22px;
}
.mw-metric-card {
  background: var(--mw-bg3); border: 1px solid var(--mw-b1);
  border-radius: 11px; padding: 17px 19px;
}
.mw-mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mw-mc-label { font-size: 10px; font-weight: 600; color: var(--mw-t3); text-transform: uppercase; letter-spacing: .8px; }
.mw-mc-icon {
  width: 26px; height: 26px; border-radius: 6px; background: var(--mw-bg4);
  display: flex; align-items: center; justify-content: center;
}
.mw-mc-value { font-size: 28px; font-weight: 700; color: var(--mw-t1); line-height: 1; letter-spacing: -1px; margin-bottom: 3px; }
.mw-mc-sub { font-size: 11px; color: var(--mw-t3); margin-bottom: 11px; }
.mw-bar { background: var(--mw-bg4); border-radius: 3px; height: 3px; }
.mw-bar-fill { height: 3px; border-radius: 3px; }

.mw-bar-low  .mw-bar-fill { background: linear-gradient(90deg, #14532d, #22c55e); }
.mw-bar-mid  .mw-bar-fill { background: linear-gradient(90deg, #78350f, #f59e0b); }
.mw-bar-high .mw-bar-fill { background: linear-gradient(90deg, #7f1d1d, #ef4444); }
.mw-bar-uptime .mw-bar-fill { background: linear-gradient(90deg, #14532d, #22c55e); opacity: .55; }

/* ── Status Cards ── */
.mw-status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 11px; margin-bottom: 22px;
}
.mw-status-card {
  background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 11px; padding: 16px;
}
.mw-sc-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.mw-sc-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mw-sc-title { font-size: 13px; font-weight: 600; color: var(--mw-t1); margin-bottom: 1px; }
.mw-sc-sub   { font-size: 10.5px; color: var(--mw-t3); }
.mw-sc-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; margin-left: auto; white-space: nowrap; margin-top: 1px; }
.mw-badge-ok   { background: var(--mw-grbg); color: var(--mw-gr);  border: 1px solid var(--mw-grbd); }
.mw-badge-warn { background: var(--mw-ambg); color: var(--mw-am);  border: 1px solid var(--mw-ambd); }
.mw-badge-fail { background: rgba(239,68,68,.1); color: #f87171;   border: 1px solid rgba(239,68,68,.25); }
.mw-badge-info { background: rgba(59,130,246,.1); color: #60a5fa;  border: 1px solid rgba(59,130,246,.25); }
.mw-badge-mute { background: var(--mw-bg4);  color: var(--mw-t3); border: 1px solid var(--mw-b2); }
.mw-sc-body { font-size: 11.5px; color: var(--mw-t3); line-height: 1.75; }
.mw-sc-body b, .mw-sc-body strong { color: var(--mw-t2); font-weight: 500; }
.mw-sc-progress { background: var(--mw-bg4); border-radius: 2px; height: 2px; margin-top: 9px; }
.mw-sc-progress-fill { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1c1435, var(--mw-v2)); }
.mw-sc-btn {
  margin-top: 10px; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  border-radius: 6px; padding: 6px; text-align: center; font-size: 11.5px;
  font-weight: 500; color: var(--mw-t3); cursor: pointer; width: 100%;
}
.mw-sc-btn:hover { border-color: var(--mw-b3); color: var(--mw-t2); }

/* ── Bottom Grid ── */
.mw-bottom-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 11px; }
.mw-card { background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 11px; padding: 17px 19px; }
.mw-card-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--mw-t4); margin-bottom: 13px; }

/* Services */
.mw-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.mw-svc-row { display: flex; align-items: center; padding: 6.5px 0; border-bottom: 1px solid var(--mw-b1); }
.mw-svc-row:last-child { border-bottom: none; }
.mw-svc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.mw-svc-dot.ok  { background: var(--mw-gr); box-shadow: 0 0 4px rgba(34,197,94,.4); }
.mw-svc-dot.off { background: var(--mw-rd); }
.mw-svc-dot.na  { background: var(--mw-b3); }
.mw-svc-name { font-size: 12.5px; font-weight: 500; color: var(--mw-t2); margin-left: 8px; flex: 1; }
.mw-svc-type { font-size: 10px; color: var(--mw-t4); margin-left: 3px; font-weight: 400; }
.mw-svc-status { font-size: 10px; color: var(--mw-gr); opacity: .75; font-weight: 500; }
.mw-svc-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 9px; border: 1px solid transparent; white-space: nowrap; }
.mw-svc-badge.online   { background: var(--mw-grbg); color: var(--mw-gr); border-color: var(--mw-grbd); }
.mw-svc-badge.offline  { background: var(--mw-rdbg); color: var(--mw-rd); border-color: var(--mw-rdbd); }
.mw-svc-badge.disabled { background: var(--mw-bg4);  color: var(--mw-t3); border-color: var(--mw-b2); }

.mw-ports { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--mw-b1); }
.mw-port {
  font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 600;
  background: var(--mw-bg4); color: var(--mw-t4); border: 1px solid var(--mw-b2);
  padding: 2px 8px; border-radius: 4px; cursor: default;
}
.mw-port.active   { background: var(--mw-grbg); color: var(--mw-gr); border-color: var(--mw-grbd); }
.mw-port.inactive { background: var(--mw-bg4);  color: var(--mw-t3); border-color: var(--mw-b2); opacity: .5; }

/* ── Domain Pages ─────────────────────────────────────────────────── */
.dom-system-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 4px; font-size: 13px;
}
.dom-system-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--mw-v2); background: var(--mw-vbg); border: 1px solid var(--mw-vbd);
  padding: 1px 7px; border-radius: 9px; flex-shrink: 0;
}
.dom-system-name { font-weight: 600; color: var(--mw-t1); font-size: 13px; }
.dom-icon {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  display: flex; align-items: center; justify-content: center; color: var(--mw-t3);
}
.dom-name { font-size: 13px; font-weight: 500; color: var(--mw-t1); }
.dom-desc { font-size: 11px; color: var(--mw-t4); margin-top: 1px; }
.dom-tag {
  font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 4px;
  border: 1px solid var(--mw-b2); background: var(--mw-bg4); color: var(--mw-t3);
}
.dom-btn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500;
  background: var(--mw-bg4); color: var(--mw-t2); border: 1px solid var(--mw-b2);
  padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all .12s; white-space: nowrap;
}
.dom-btn:hover { background: var(--mw-b1); color: var(--mw-t1); border-color: var(--mw-b3); }
.dom-code {
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--mw-v2);
  background: var(--mw-vbg); border: 1px solid var(--mw-vbd);
  padding: 1px 6px; border-radius: 4px;
}
.dom-txt-preview {
  font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--mw-t3);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px;
}

/* DNS/DKIM stacked layout */
.dkim-cols { display: flex; flex-direction: column; gap: 14px; }

.dkim-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--mw-b1);
}
.dkim-col-count {
  font-size: 11px; font-weight: 600; color: var(--mw-t4);
  background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  padding: 1px 7px; border-radius: 9px; margin-left: auto;
}
.dkim-card {
  padding: 11px 14px; border-bottom: 1px solid var(--mw-b1);
  display: flex; flex-direction: column; gap: 7px;
}
.dkim-card:last-child { border-bottom: none; }
.dkim-card-system { box-shadow: inset 3px 0 0 var(--mw-v); }
.dkim-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
}
.dkim-card-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.dkim-txt-row {
  overflow: hidden;
}
.dkim-txt-row .dom-txt-preview { max-width: 100%; }
.dkim-empty {
  padding: 24px 14px; font-size: 12px; color: var(--mw-t4); text-align: center;
}

/* Right Column */
.mw-right-col { display: flex; flex-direction: column; gap: 11px; }
.mw-donut-wrap { display: flex; align-items: center; gap: 16px; margin-top: 11px; }
.mw-legend-row { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; }
.mw-legend-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.mw-legend-label { color: var(--mw-t3); flex: 1; }
.mw-legend-val   { color: var(--mw-t2); font-weight: 500; }

.mw-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.mw-mini-card { background: var(--mw-bg4); border: 1px solid var(--mw-b2); border-radius: 8px; padding: 12px; }
.mw-mini-val   { font-size: 20px; font-weight: 700; line-height: 1; }
.mw-mini-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--mw-t4); margin-top: 4px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .mw-content { padding: 16px 18px 24px; }
  .mw-topbar  { padding: 0 16px; }
}
@media (max-width: 900px) {
  .mw-bottom-grid { grid-template-columns: 1fr; }
  .mw-right-col   { flex-direction: row; }
  /* Hostname auf Tablet kompakter */
  .mw-tb-host { font-size: 10.5px; padding: 0 8px; }
}
@media (max-width: 768px) {
  /* Sidebar off-canvas */
  .mw-sidebar {
    position: fixed; left: 0; top: 0; z-index: 50;
    transform: translateX(-100%); transition: transform .25s;
  }
  .mw-sidebar.open { transform: translateX(0); }
  .mw-sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 40;
  }
  .mw-sidebar-overlay.open { display: block; }
  /* Hamburger einblenden */
  .mw-hamburger { display: flex; }
  /* Parent bleibt sichtbar (3 Buchstaben) */
  /* Layout */
  .mw-metric-grid  { grid-template-columns: repeat(2, 1fr); }
  .mw-status-grid  { grid-template-columns: repeat(2, 1fr); }
  .mw-shell { display: block; height: 100vh; }
  .mw-main  { height: 100vh; }
  .mw-right-col { flex-direction: column; }
}
@media (max-width: 480px) {
  .mw-metric-grid { grid-template-columns: 1fr; }
  .mw-status-grid { grid-template-columns: 1fr; }
  .mw-topbar { padding: 0 12px; gap: 5px; }
  .mw-tb-parent { display: none; }
  .mw-tb-sep    { display: none; }
  .mw-tb-search-text { display: none; }
  .mw-tb-kbd         { display: none; }
  .mw-tb-search      { padding: 0 9px; }
  .mw-tb-add-text { display: none; }
  .mw-tb-add      { padding: 0 9px; }
}

/* ── API Key Layout ── */
.mw-apikey-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  align-items: start;
}
.mw-apikey-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .mw-apikey-layout { grid-template-columns: 1fr; }
}
/* ── Responsive list helpers ── */
@media (max-width: 640px) {
  .mw-col-hide-sm  { display: none !important; }
  .mw-only-desktop { display: none !important; }
}
@media (min-width: 641px) {
  .mw-only-mobile { display: none !important; }
}

/* ── API Key div-list ── */
.mw-kl-head,
.mw-kl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 80px 90px 40px;
  gap: 8px;
  padding: 8px 14px;
  align-items: center;
  min-width: 0;
}
.mw-kl-head {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--mw-t4);
  border-bottom: 1px solid var(--mw-b1);
}
.mw-kl-row {
  border-bottom: 1px solid var(--mw-b1);
  transition: background .1s;
}
.mw-kl-row:last-child { border-bottom: none; }
.mw-kl-row:hover      { background: rgba(255,255,255,.015); }
.mw-kl-row > *        { min-width: 0; overflow: hidden; }
.mw-kl-date-inline    { display: none; }
.mw-kl-head span      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) and (min-width: 641px) {
  .mw-kl-head,
  .mw-kl-row { grid-template-columns: minmax(0, 1fr) 120px 80px 40px; }
  .mw-kl-date { display: none; }
  .mw-kl-date-inline { display: inline; }
}

@media (max-width: 640px) {
  .mw-kl-head { display: none; }
  .mw-kl-row  {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 5px 8px;
    padding: 10px 12px;
  }
  .mw-kl-name        { grid-column: 1; grid-row: 1; }
  .mw-kl-scopes      { grid-column: 1; grid-row: 2; flex-wrap: wrap; overflow: visible; }
  .mw-kl-modus       { grid-column: 2; grid-row: 1; }
  .mw-kl-date        { display: none; }
  .mw-kl-date-inline { display: inline; }
  .mw-kl-actions     { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* ── Webhook div-list ── */
.mw-whl-head,
.mw-whl-row {
  display: grid;
  grid-template-columns: 1fr 124px 72px 54px 82px;
  gap: 8px;
  padding: 8px 14px;
  align-items: center;
  min-width: 0;
}
.mw-whl-head {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--mw-t4);
  border-bottom: 1px solid var(--mw-b1);
}
.mw-whl-row {
  border-bottom: 1px solid var(--mw-b1);
  transition: background .1s;
}
.mw-whl-row:last-child { border-bottom: none; }
.mw-whl-row:hover      { background: rgba(255,255,255,.015); }
.mw-whl-row > *        { min-width: 0; }
.mw-whl-status-sm, .mw-whl-http-sm { display: none; }

@media (max-width: 640px) {
  .mw-whl-head { display: none; }
  .mw-whl-row  {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 5px 8px;
    padding: 10px 12px;
  }
  .mw-whl-webhook { grid-column: 1; grid-row: 1; }
  .mw-whl-events  { grid-column: 1; grid-row: 2; }
  .mw-whl-status  { display: none; }
  .mw-whl-http    { display: none; }
  .mw-whl-date    { display: none; }
  .mw-whl-actions {
    grid-column: 2; grid-row: 1 / 3;
    display: flex; flex-direction: column; gap: 4px; align-self: start;
  }
  .mw-whl-status-sm, .mw-whl-http-sm { display: inline; }
}

/* ── Webhook-Tabelle Layout ── */
.mw-wh-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 14px;
  align-items: start;
}
.mw-wh-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .mw-wh-layout { grid-template-columns: 1fr; }
}

/* ── Sandbox Layout ── */
.mw-sandbox-client {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  border: 1px solid var(--mw-b1);
  border-radius: 10px;
  overflow: hidden;
  background: var(--mw-bg2);
  min-height: 520px;
}
.mw-sandbox-list {
  border-right: 1px solid var(--mw-b1);
  overflow-y: auto;
  max-height: 680px;
}
.mw-sandbox-detail {
  overflow-y: auto;
  max-height: 680px;
  min-height: 400px;
}
.mw-postfix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 16px 18px;
}
@media (max-width: 900px) {
  .mw-sandbox-client { grid-template-columns: 1fr; }
  .mw-sandbox-list   { border-right: none; border-bottom: 1px solid var(--mw-b1); max-height: 260px; }
  .mw-sandbox-detail { max-height: none; }
  .mw-postfix-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mw-sandbox-client { min-height: 0; }
  .mw-postfix-grid   { grid-template-columns: 1fr; }
}

.mw-svc-status-off { color: var(--mw-rd) !important; opacity: 1; }
.mw-svc-status-na  { color: var(--mw-t4) !important; opacity: 1; }

/* ═══════════════════════════════════════
   Mailbox Page — mbx-* classes
═══════════════════════════════════════ */

/* Page Header */
.mbx-page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.mbx-page-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 600; color: var(--mw-t1);
}
.mbx-total-badge {
  font-size: 11px; font-weight: 600; background: var(--mw-bg4);
  color: var(--mw-t3); border: 1px solid var(--mw-b2);
  padding: 1px 8px; border-radius: 10px;
}
.mbx-page-actions { display: flex; align-items: center; gap: 8px; }

/* Search */
.mbx-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--mw-bg3); border: 1px solid var(--mw-b1);
  border-radius: 7px; padding: 7px 11px;
}
.mbx-search-input {
  background: none; border: none; outline: none;
  font-size: 12.5px; color: var(--mw-t2); width: 220px;
}
.mbx-search-input::placeholder { color: var(--mw-t4); }

/* Buttons */
.mbx-btn-primary {
  display: flex; align-items: center; gap: 5px;
  background: var(--mw-v); border: none; border-radius: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  color: #fff; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 8px rgba(124,58,237,.3);
}
.mbx-btn-primary:hover { background: #6d28d9; }
.mbx-btn-mute {
  display: flex; align-items: center; gap: 6px;
  background: var(--mw-bg3); border: 1px solid var(--mw-b1);
  border-radius: 6px; padding: 6px 11px; font-size: 12px;
  color: var(--mw-t3); cursor: pointer; white-space: nowrap;
}
.mbx-btn-mute:hover { border-color: var(--mw-b2); color: var(--mw-t2); }

/* Domain sections */
.mbx-sections { display: flex; flex-direction: column; gap: 14px; }
.mbx-section {
  background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 11px; overflow: hidden;
}
.mbx-domain-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--mw-b1);
}
.mbx-domain-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mbx-domain-icon {
  width: 26px; height: 26px; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--mw-t3); flex-shrink: 0;
}
.mbx-domain-name { font-size: 13px; font-weight: 600; color: var(--mw-t1); }
.mbx-domain-count {
  font-size: 11px; color: var(--mw-t4); background: var(--mw-bg4);
  border: 1px solid var(--mw-b2); padding: 1px 7px; border-radius: 8px;
}

/* Badges */
.mbx-badge-ok   { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 9px; background: var(--mw-grbg); color: var(--mw-gr); border: 1px solid var(--mw-grbd); white-space: nowrap; }
.mbx-badge-warn { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 9px; background: var(--mw-ambg); color: var(--mw-am); border: 1px solid var(--mw-ambd); white-space: nowrap; }
.mbx-badge-mute { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 9px; background: var(--mw-bg4); color: var(--mw-t4); border: 1px solid var(--mw-b2); white-space: nowrap; }

/* Table */
.mbx-table-wrap { overflow-x: auto; }
.mbx-table { width: 100%; border-collapse: collapse; }
.mbx-th {
  padding: 9px 16px; font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .9px; color: var(--mw-t4); text-align: left;
  border-bottom: 1px solid var(--mw-b1); white-space: nowrap;
}
.mbx-th-right { text-align: right; }
.mbx-tr { border-bottom: 1px solid var(--mw-b1); transition: background .1s; }
.mbx-tr:last-child { border-bottom: none; }
.mbx-tr:hover { background: var(--mw-bg4); }
.mbx-tr-inactive { opacity: .6; }
.mbx-tr-system { box-shadow: inset 3px 0 0 var(--mw-v); }
.mbx-tr-selected { background: var(--mw-vbg) !important; box-shadow: inset 3px 0 0 var(--mw-v2); }
.mbx-td { padding: 11px 16px; vertical-align: middle; }

/* Custom checkbox */
.mbx-cbx {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex-shrink: 0;
  border: 1.5px solid var(--mw-b2); border-radius: 4px;
  background: var(--mw-bg3); cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative; display: inline-block; vertical-align: middle;
}
.mbx-cbx:hover { border-color: var(--mw-v2); }
.mbx-cbx:checked {
  background: var(--mw-v); border-color: var(--mw-v);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px 8px; background-repeat: no-repeat; background-position: center;
}
.mbx-cbx:indeterminate {
  background: var(--mw-vbg); border-color: var(--mw-v2);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1h8' stroke='%239d6ef8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 10px 2px; background-repeat: no-repeat; background-position: center;
}

/* Bulk action bar */
.mbx-bulk-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 14px; margin-bottom: 8px;
  background: var(--mw-bg2); border: 1px solid var(--mw-b1);
  border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.mbx-bulk-count {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--mw-v2);
  background: var(--mw-vbg); border: 1px solid var(--mw-vbd);
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.mbx-bulk-sep { width: 1px; height: 18px; background: var(--mw-b2); margin: 0 2px; flex-shrink: 0; }
.mbx-bulk-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 20px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--mw-b2); background: var(--mw-bg3); color: var(--mw-t2);
  transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
}
.mbx-bulk-btn:hover { border-color: var(--mw-b3); color: var(--mw-t1); background: var(--mw-bg4); }
.mbx-bulk-btn-danger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 20px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--mw-rdbd); background: var(--mw-rdbg); color: var(--mw-rd);
  transition: opacity .15s; white-space: nowrap;
}
.mbx-bulk-btn-danger:hover { opacity: .85; }
.mbx-bulk-clear {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--mw-t4); font-size: 18px; line-height: 1; padding: 2px 4px;
  transition: color .15s;
}
.mbx-bulk-clear:hover { color: var(--mw-t2); }
.mbx-td-muted { font-size: 12px; color: var(--mw-t3); }

/* Skeleton pulse */
@keyframes skel-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}


/* Tab buttons */
.mbx-tab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  cursor: pointer;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--mw-t4);
  transition: color .15s;
  outline: none;
}
.mbx-tab-btn:hover { color: var(--mw-t2); }
.mbx-tab-btn.is-active {
  color: var(--mw-v2);
  border-bottom-color: var(--mw-v2);
  font-weight: 600;
}
.mbx-tab-badge {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
  line-height: 1.6;
  background: var(--mw-bg3);
  color: var(--mw-t4);
  transition: background .15s, color .15s;
}
.mbx-tab-btn.is-active .mbx-tab-badge {
  background: var(--mw-vbg);
  color: var(--mw-v2);
}

/* Row actions (hover ··· button) */
.mbx-row-acts { opacity: 0; transition: opacity .12s; }
.mbx-tr:hover .mbx-row-acts { opacity: 1; }
.mbx-row-acts-open { opacity: 1 !important; }
.mbx-row-acts-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--mw-t3); transition: background .12s, border-color .12s, color .12s;
}
.mbx-row-acts-btn:hover { background: var(--mw-bg4); border-color: var(--mw-b2); color: var(--mw-t1); }

/* Email cell */
.mbx-email-cell { display: flex; align-items: center; gap: 9px; }
.mbx-email-avatar {
  width: 26px; height: 26px; border-radius: 6px; background: var(--mw-vbg);
  border: 1px solid var(--mw-vbd); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--mw-v2); flex-shrink: 0;
}
.mbx-email-text { font-size: 13px; font-weight: 500; color: var(--mw-t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Quota bar */
.mbx-quota-wrap { display: flex; align-items: center; gap: 8px; }
.mbx-quota-bar { flex: 1; height: 4px; background: var(--mw-bg4); border-radius: 3px; min-width: 80px; }
.mbx-quota-fill { height: 4px; border-radius: 3px; transition: width .3s; }
.mbx-quota-pct { font-size: 10.5px; color: var(--mw-t4); white-space: nowrap; width: 30px; text-align: right; }
.mbx-bar-low  .mbx-quota-fill { background: linear-gradient(90deg, #14532d, #22c55e); }
.mbx-bar-mid  .mbx-quota-fill { background: linear-gradient(90deg, #78350f, #f59e0b); }
.mbx-bar-high .mbx-quota-fill { background: linear-gradient(90deg, #7f1d1d, #ef4444); }
.mbx-bar-dim  { opacity: .4; }

/* Action buttons */
.mbx-actions { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.mbx-act-btn {
  width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: var(--mw-bg4); border: 1px solid var(--mw-b2); color: var(--mw-t3); cursor: pointer; transition: all .1s;
}
.mbx-act-btn:hover { border-color: var(--mw-b3); color: var(--mw-t2); }
.mbx-act-danger:hover { background: var(--mw-rdbg); border-color: var(--mw-rdbd); color: var(--mw-rd); }

/* Empty states */
.mbx-empty-domain {
  padding: 16px 18px; font-size: 12px; color: var(--mw-t4); font-style: italic;
}
.mbx-empty-link {
  background: none; border: none; cursor: pointer; color: var(--mw-v2); font-size: 12px; margin-left: 6px; text-decoration: underline;
}
.mbx-empty-state {
  background: var(--mw-bg3); border: 1px solid var(--mw-b1); border-radius: 11px;
  padding: 48px; text-align: center; font-size: 13px; color: var(--mw-t4);
  display: flex; flex-direction: column; align-items: center;
}

/* Alias group tag */
.als-group-tag {
  font-size: 11px; color: var(--mw-t3); background: var(--mw-bg4);
  border: 1px solid var(--mw-b2); border-radius: 4px; padding: 1px 6px;
}

/* ═══════════════════════════════════════════════════════
   MW Modal — design system matching mw-* dashboard style
═══════════════════════════════════════════════════════ */

/* Layout */
.mw-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--mw-b2);
  flex-shrink: 0;
}
.mw-modal-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.mw-modal-title { font-size: 14px; font-weight: 600; color: var(--mw-t1); margin: 0; }
.mw-modal-sub   { font-size: 12px; color: var(--mw-t3); }
.mw-modal-close {
  background: none; border: none; cursor: pointer; color: var(--mw-t4);
  padding: 3px; border-radius: 5px; line-height: 1; flex-shrink: 0;
}
.mw-modal-close:hover { color: var(--mw-t2); background: var(--mw-bg4); }
.mw-modal-close svg { display: block; }

.mw-modal-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
}
.mw-modal-foot {
  padding: 12px 20px; border-top: 1px solid var(--mw-b2);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}

/* Form elements */
.mw-modal-label { font-size: 11px; color: var(--mw-t3); display: block; margin-bottom: 5px; }
.mw-modal-input {
  width: 100%; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  border-radius: 7px; color: var(--mw-t1); font-size: 13px;
  padding: 0 10px; height: 33px; line-height: 33px;
  outline: none; box-sizing: border-box; appearance: none;
}
.mw-modal-input:focus  { border-color: rgba(124,58,237,.4); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.mw-modal-input::placeholder { color: var(--mw-t4); }
.mw-modal-input:disabled { opacity: .45; cursor: not-allowed; }
textarea.mw-modal-input { height: auto; line-height: 1.55; padding: 8px 10px; }
.mw-modal-hint  { font-size: 11px; color: var(--mw-t3); margin-top: 4px; }
.mw-modal-error { font-size: 11px; color: var(--mw-rd); margin-top: 4px; }
.mw-modal-sep   { border: none; border-top: 1px solid var(--mw-b2); margin: 0; }
.mw-modal-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mw-modal-row   { display: flex; flex-direction: column; }

/* Alerts */
.mw-modal-warn {
  background: var(--mw-ambg); border: 1px solid var(--mw-ambd);
  border-radius: 7px; padding: 10px 12px; font-size: 12px; color: var(--mw-am);
}
.mw-modal-danger {
  background: var(--mw-rdbg); border: 1px solid var(--mw-rdbd);
  border-radius: 7px; padding: 10px 12px; font-size: 12px; color: var(--mw-rd);
}
.mw-modal-info {
  background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  border-radius: 7px; padding: 10px 12px; font-size: 12px; color: var(--mw-t3);
}

/* Email preview */
.mw-modal-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  border-radius: 7px; font-size: 12px; color: var(--mw-t2);
}
.mw-modal-preview-label { color: var(--mw-t4); }

/* Split input (local @ domain) */
.mw-modal-split { display: flex; }
.mw-modal-split .mw-modal-input { border-radius: 7px 0 0 7px; }
.mw-modal-split-suffix {
  display: flex; align-items: center; padding: 0 10px;
  background: var(--mw-bg4); border: 1px solid var(--mw-b2); border-left: none;
  border-radius: 0 7px 7px 0; font-size: 13px; color: var(--mw-t4); white-space: nowrap;
}

/* Checkbox */
.mw-modal-check { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.mw-modal-check input[type="checkbox"] { accent-color: var(--mw-v); width: 15px; height: 15px; cursor: pointer; }
.mw-modal-check-label { font-size: 13px; color: var(--mw-t2); }

/* Recipient row (alias modal) */
.mw-modal-recip {
  background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  border-radius: 8px; padding: 12px;
}
.mw-modal-recip-grid { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; }
.mw-modal-recip-grid.single { grid-template-columns: 1fr auto 1fr; }
.mw-modal-recip-or { font-size: 11px; color: var(--mw-t4); text-align: center; }
.mw-modal-recip-labels { display: grid; gap: 8px; margin-bottom: 6px; }
.mw-modal-recip-del {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--mw-rdbg); border: 1px solid var(--mw-rdbd); color: var(--mw-rd); cursor: pointer;
}
.mw-modal-recip-del:hover { background: var(--mw-rd); color: #fff; }

/* Tag/badge */
.mw-modal-tag {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px;
  background: var(--mw-bg4); border: 1px solid var(--mw-b2); font-size: 11px; color: var(--mw-t3);
}

/* Buttons */
.mw-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer;
  background: var(--mw-v); border: 1px solid var(--mw-v); color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,.3);
}
.mw-btn-primary:hover { background: #6d28d9; border-color: #6d28d9; }
.mw-btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer;
  background: var(--mw-bg3); border: 1px solid var(--mw-b2); color: var(--mw-t2);
  transition: background .15s, border-color .15s;
}
.mw-btn-secondary:hover { background: var(--mw-bg4); border-color: var(--mw-b3); color: var(--mw-t1); }
.mw-btn-cancel {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 7px; font-size: 13px; cursor: pointer;
  background: none; border: 1px solid var(--mw-b2); color: var(--mw-t3);
}
.mw-btn-cancel:hover { border-color: var(--mw-b3); color: var(--mw-t2); }
.mw-btn-save {
  padding: 6px 16px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer;
  background: var(--mw-v); border: 1px solid var(--mw-v2); color: #fff;
}
.mw-btn-save:hover { opacity: .88; }
.mw-btn-save:disabled { opacity: .35; cursor: not-allowed; }
.mw-btn-del {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer;
  background: var(--mw-rdbg); border: 1px solid var(--mw-rdbd); color: var(--mw-rd);
}
.mw-btn-del:hover { background: var(--mw-rd); border-color: var(--mw-rd); color: #fff; }
.mw-btn-del:disabled { opacity: .35; cursor: not-allowed; }
.mw-btn-add-row {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
  background: var(--mw-bg4); border: 1px solid var(--mw-b2); color: var(--mw-t3);
}
.mw-btn-add-row:hover { color: var(--mw-t2); border-color: var(--mw-b3); }
.mw-btn-add-row:disabled { opacity: .35; cursor: not-allowed; }

/* Modal outer container */
.mw-modal-box {
  background: var(--mw-bg3);
  border: 1px solid var(--mw-b2);
  border-radius: 11px;
  box-shadow: 0 8px 40px rgba(0,0,0,.45);
}
.mw-modal-inner {
  display: flex; flex-direction: column; max-height: 90vh; overflow: hidden;
}
.mw-modal-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* ═══════════════════════════════════════════════════════
   DNS Modal
═══════════════════════════════════════════════════════ */

.dns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .dns-grid { grid-template-columns: 1fr; } }

.dns-section-head {
  display: flex; align-items: center; gap: 7px; font-size: 11px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.dns-step-badge {
  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 4px;
  background: var(--mw-vbg); color: var(--mw-v2); border: 1px solid var(--mw-vbd);
}
.dns-tag-badge {
  font-size: 10px; padding: 1px 7px; border-radius: 4px; margin-left: auto;
  background: var(--mw-bg4); color: var(--mw-t3); border: 1px solid var(--mw-b2);
}
.dns-records { display: flex; flex-direction: column; gap: 8px; }

.dns-rec {
  border-radius: 8px; border: 1px solid var(--mw-b2);
  background: var(--mw-bg4); overflow: hidden;
}
.dns-rec.ok      { border-color: rgba(34,197,94,.30);  background: rgba(34,197,94,.08); }
.dns-rec.missing { border-color: rgba(239,68,68,.32);  background: rgba(239,68,68,.09); }
.dns-rec.syntax  { border-color: rgba(245,158,11,.32); background: rgba(245,158,11,.08); }
.dns-rec.neutral { border-color: var(--mw-b2);         background: var(--mw-bg4); }

.dns-rec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; gap: 8px;
}
.dns-rec-name {
  font-size: 11.5px; color: var(--mw-t2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 860px) {
  .dns-rec-name { white-space: normal; word-break: break-all; }
  .mw-modal-body { padding: 12px 14px; }
}
.dns-rec-value {
  font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--mw-t3); margin: 0; padding: 6px 10px 8px;
  border-top: 1px solid var(--mw-b1);
  white-space: pre-wrap; word-break: break-all; line-height: 1.5;
}
.dns-rec-actual {
  font-family: ui-monospace, monospace; font-size: 10.5px;
  color: var(--mw-t4); padding: 4px 10px 6px;
}
.dns-copy-btn {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 5px;
  background: var(--mw-bg3); border: 1px solid var(--mw-b2);
  color: var(--mw-t4); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dns-copy-btn:hover { color: var(--mw-t2); border-color: var(--mw-b3); }

/* DNS record type badges */
.dns-type-badge {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
  background: var(--mw-bg3); color: var(--mw-t3); border: 1px solid var(--mw-b2);
}
.dns-type-badge.a     { background: rgba(6,182,212,.14);   color: #67e8f9; border-color: rgba(6,182,212,.28); }
.dns-type-badge.aaaa  { background: rgba(59,130,246,.14);  color: #93c5fd; border-color: rgba(59,130,246,.28); }
.dns-type-badge.mx    { background: rgba(34,197,94,.14);   color: #86efac; border-color: rgba(34,197,94,.28); }
.dns-type-badge.cname { background: rgba(167,139,250,.14); color: #c4b5fd; border-color: rgba(167,139,250,.28); }
.dns-type-badge.ptr   { background: rgba(245,158,11,.14);  color: #fcd34d; border-color: rgba(245,158,11,.28); }
.dns-type-badge.txt   { background: rgba(139,92,246,.14);  color: #c4b5fd; border-color: rgba(139,92,246,.28); }
.dns-type-badge.srv   { background: rgba(251,113,133,.14); color: #fda4af; border-color: rgba(251,113,133,.28); }
.dns-type-badge.tlsa  { background: rgba(239,68,68,.14);   color: #fca5a5; border-color: rgba(239,68,68,.28); }

/* ═══════════════════════════════════════════════════════
   MQ — Mail Queue & Quarantine
═══════════════════════════════════════════════════════ */

.mq-page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.mq-page-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--mw-t1);
}
.mq-page-sub { font-size: 11px; color: var(--mw-t4); font-weight: 400; }
.mq-total-badge {
  background: var(--mw-bg4); border: 1px solid var(--mw-b2);
  border-radius: 10px; padding: 1px 7px; font-size: 11px;
  font-weight: 500; color: var(--mw-t3);
}
.mq-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.mq-search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--mw-bg3); border: 1px solid var(--mw-b2); border-radius: 7px;
  padding: 0 10px; height: 30px; color: var(--mw-t4);
}
.mq-search-input {
  background: none; border: none; outline: none;
  color: var(--mw-t1); font-size: 12px; width: 180px;
}
.mq-search-input::placeholder { color: var(--mw-t4); }

.mq-select {
  background: var(--mw-bg3); border: 1px solid var(--mw-b2); border-radius: 7px;
  color: var(--mw-t2); font-size: 12px; padding: 0 8px; height: 30px; outline: none;
}

.mq-btn-mute {
  display: flex; align-items: center; gap: 5px;
  background: var(--mw-bg3); border: 1px solid var(--mw-b2); border-radius: 7px;
  color: var(--mw-t2); font-size: 12px; padding: 0 10px; height: 30px; cursor: pointer;
}
.mq-btn-mute:hover { background: var(--mw-bg4); }
.mq-btn-danger {
  display: flex; align-items: center; gap: 5px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25); border-radius: 7px;
  color: var(--mw-rd); font-size: 12px; padding: 0 10px; height: 30px; cursor: pointer;
}
.mq-btn-danger:hover { background: rgba(239,68,68,.2); }
.mq-btn-danger-outline {
  background: none; border: 1px solid var(--mw-b2); border-radius: 7px;
  color: var(--mw-t3); font-size: 12px; padding: 0 10px; height: 30px; cursor: pointer;
}
.mq-btn-danger-outline:hover { border-color: var(--mw-rd); color: var(--mw-rd); }
.mq-btn-icon {
  background: none; border: none; cursor: pointer; color: var(--mw-t4);
  padding: 4px; border-radius: 5px;
}
.mq-btn-icon:hover { background: var(--mw-bg4); color: var(--mw-t2); }

/* Tabs */
.mq-tabs {
  display: flex; gap: 2px; margin-bottom: 12px;
  background: var(--mw-bg3); border: 1px solid var(--mw-b2);
  border-radius: 8px; padding: 3px; width: fit-content;
}
.mq-tab {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; border-radius: 6px;
  color: var(--mw-t3); font-size: 12px; padding: 4px 10px; cursor: pointer;
  white-space: nowrap;
}
.mq-tab:hover { color: var(--mw-t2); }
.mq-tab.active { background: var(--mw-bg4); color: var(--mw-t1); font-weight: 500; }
.mq-tab-n {
  background: var(--mw-bg2); border-radius: 8px; padding: 0 5px;
  font-size: 10px; color: var(--mw-t4);
}
.mq-tab.active .mq-tab-n { color: var(--mw-t3); }

/* Status dots */
.mq-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  display: inline-block;
}
.mq-dot.ok   { background: var(--mw-gr); }
.mq-dot.warn { background: var(--mw-am); }
.mq-dot.na   { background: var(--mw-b3); }
.mq-dot.off  { background: var(--mw-rd); }

/* Badges */
.mq-badge {
  display: inline-flex; align-items: center;
  border-radius: 5px; padding: 2px 7px; font-size: 11px; font-weight: 500;
}
.mq-badge.ok   { background: rgba(34,197,94,.12);  color: var(--mw-gr); }
.mq-badge.warn { background: rgba(234,179,8,.12);  color: var(--mw-am); }
.mq-badge.na   { background: var(--mw-bg4); color: var(--mw-t3); }
.mq-badge.off  { background: rgba(239,68,68,.12); color: var(--mw-rd); }

/* Card / Table */
.mq-card {
  background: var(--mw-bg3); border: 1px solid var(--mw-b2); border-radius: 10px;
  overflow: hidden;
}
.mq-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mq-table th {
  padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 500;
  color: var(--mw-t4); border-bottom: 1px solid var(--mw-b2);
  background: var(--mw-bg4); white-space: nowrap;
}
.mq-table td { padding: 8px 12px; border-bottom: 1px solid var(--mw-b1); vertical-align: middle; }
.mq-row:last-child td { border-bottom: none; }
.mq-row:hover td { background: var(--mw-bg4); }
.mq-check { accent-color: var(--mw-v); cursor: pointer; }
.mq-id { font-family: monospace; font-size: 11px; color: var(--mw-t3); }
.mq-addr { color: var(--mw-t2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-subject { color: var(--mw-t1); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-num { color: var(--mw-t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-reason { color: var(--mw-t4); font-size: 11.5px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Empty state */
.mq-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 60px 20px; color: var(--mw-t4); text-align: center;
}
.mq-empty p { margin: 0; font-size: 13px; }
.mq-empty small { font-size: 11px; color: var(--mw-t4); }

/* Score */
.mq-score-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 80px; }
.mq-score { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mq-score.ok   { color: var(--mw-gr); }
.mq-score.warn { color: var(--mw-am); }
.mq-score.off  { color: var(--mw-rd); }
.mq-score.na   { color: var(--mw-t4); }
.mq-score-bar { height: 3px; background: var(--mw-bg4); border-radius: 2px; overflow: hidden; }
.mq-score-fill { height: 100%; border-radius: 2px; }
.mq-score-fill.ok   { background: var(--mw-gr); }
.mq-score-fill.warn { background: var(--mw-am); }
.mq-score-fill.off  { background: var(--mw-rd); }
.mq-score-fill.na   { background: var(--mw-b3); }

/* Modal detail rows */
.mq-detail-row { display: flex; flex-direction: column; gap: 3px; }
.mq-detail-label { font-size: 11px; color: var(--mw-t4); }
.mq-detail-val { color: var(--mw-t1); font-size: 13px; word-break: break-all; }
.mq-header-pre {
  background: var(--mw-bg2); border: 1px solid var(--mw-b1); border-radius: 6px;
  padding: 10px 12px; font-size: 11px; font-family: monospace; color: var(--mw-t3);
  overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto;
  margin-top: 6px;
}

/* Score block in modal */
.mq-score-block {
  background: var(--mw-bg4); border: 1px solid var(--mw-b2); border-radius: 8px;
  padding: 12px 14px;
}
.mq-score-big { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mq-score-big.ok   { color: var(--mw-gr); }
.mq-score-big.warn { color: var(--mw-am); }
.mq-score-big.off  { color: var(--mw-rd); }
.mq-score-big.na   { color: var(--mw-t4); }
.mq-score-track { height: 6px; background: var(--mw-bg2); border-radius: 4px; overflow: hidden; }

/* Symbols list */
.mq-symbols { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.mq-symbol {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 8px;
  background: var(--mw-bg4); border-radius: 5px;
  border-left: 2px solid var(--mw-b2);
}
.mq-symbol.pos { border-left-color: var(--mw-rd); }
.mq-symbol.neg { border-left-color: var(--mw-gr); }
.mq-sym-name { font-size: 11.5px; font-family: monospace; color: var(--mw-t2); flex-shrink: 0; }
.mq-sym-score { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 40px; }
.mq-symbol.pos .mq-sym-score { color: var(--mw-rd); }
.mq-symbol.neg .mq-sym-score { color: var(--mw-gr); }
.mq-sym-desc { font-size: 11px; color: var(--mw-t4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Role Badges ────────────────────────────────────────────── */
.role-badge-admin {
  display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600;
  background: var(--mw-vbg); border: 1px solid var(--mw-vbd); color: var(--mw-v2);
}
.role-badge-op {
  display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600;
  background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3); color: #93c5fd;
}

/* ─── Security Pages ─────────────────────────────────────────── */
.sec-layout { display: grid; grid-template-columns: 1fr 270px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .sec-layout { grid-template-columns: 1fr; } }

.sec-label { display: block; font-size: 11px; color: var(--mw-t3); margin-bottom: 6px; letter-spacing: .02em; }
.sec-input {
  display: block; width: 100%; height: 33px; border-radius: 7px;
  border: 1px solid var(--mw-b2); background: var(--mw-bg3);
  color: var(--mw-t1); font-size: 12.5px; padding: 0 10px;
  outline: none; box-sizing: border-box; transition: border-color .15s;
}
.sec-input:focus { border-color: var(--mw-b3); }
textarea.sec-input { height: auto; line-height: 1.55; padding: 8px 10px; resize: vertical; }
.sec-hint { font-size: 10.5px; color: var(--mw-t4); margin-top: 5px; line-height: 1.4; }
.sec-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sec-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.sec-group { padding: 14px 16px; }
.sec-divider { border: none; border-top: 1px solid var(--mw-b1); margin: 14px 0; }

/* Toggle switch */
.sec-check { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.sec-check input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 32px; height: 18px; border-radius: 9px; flex-shrink: 0; cursor: pointer;
    background-color: var(--mw-b3);
    background-image: radial-gradient(circle, rgba(255,255,255,.45) 4.5px, transparent 5px);
    background-repeat: no-repeat; background-position: 3px center; background-size: 12px 12px;
    border: 1px solid var(--mw-b3);
    transition: background-color .18s, border-color .18s, background-position .18s;
}
.sec-check input[type="checkbox"]:checked {
    background-color: var(--mw-v); border-color: var(--mw-v);
    background-image: radial-gradient(circle, #fff 4.5px, transparent 5px);
    background-position: calc(100% - 3px) center;
}
.sec-check-label { font-size: 12.5px; color: var(--mw-t2); }

/* Backup source selector cards */
.bk-src-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-src-card {
    display: flex; flex-direction: column; gap: 6px; position: relative;
    padding: 12px 13px; border-radius: 8px;
    background: var(--mw-bg4); border: 1px solid var(--mw-b2);
    cursor: pointer; user-select: none;
    transition: border-color .15s, background .15s;
}
.bk-src-card:has(input:checked) { background: var(--mw-vbg); border-color: var(--mw-vbd); }
.bk-src-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.bk-src-icon { color: var(--mw-t4); transition: color .15s; display: flex; }
.bk-src-card:has(input:checked) .bk-src-icon { color: var(--mw-v2); }
.bk-src-name { font-size: 12px; font-weight: 500; color: var(--mw-t3); transition: color .15s; }
.bk-src-card:has(input:checked) .bk-src-name { color: var(--mw-v2); }
.bk-src-hint { font-size: 10.5px; color: var(--mw-t4); line-height: 1.4; }

/* Blacklist badge + button */
.sec-bl-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  padding: 2px 7px; border-radius: 5px; border: 1px solid rgba(239,68,68,.3);
  background: rgba(239,68,68,.08); color: #fca5a5;
}
.sec-bl-btn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
  padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(239,68,68,.3);
  background: rgba(239,68,68,.08); color: #fca5a5; cursor: pointer;
  transition: border-color .15s;
}
.sec-bl-btn:hover { border-color: rgba(239,68,68,.5); }

/* Fail2Ban banlist rows */
.f2b-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--mw-b2); margin-bottom: 6px; font-size: 12.5px; }
.f2b-row:last-child { margin-bottom: 0; }
.f2b-row.temporary { border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.06); }
.f2b-row.permanent { border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.07); }
.f2b-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.f2b-dot.temporary { background: rgba(245,158,11,.9); }
.f2b-dot.permanent { background: rgba(239,68,68,.9); }
.f2b-jail-badge { font-size: 10px; color: var(--mw-t4); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--mw-b1); background: var(--mw-bg3); }

/* IP sidebar items */
.f2b-ip-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--mw-b2); background: var(--mw-bg3); margin-bottom: 5px; font-size: 12px; }
.f2b-ip-item:last-child { margin-bottom: 0; }

/* SSL cert rows */
.ssl-cert { padding: 12px 16px; border-bottom: 1px solid var(--mw-b1); }
.ssl-cert:last-child { border-bottom: none; }
.ssl-domains { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ssl-domain-pill { font-size: 10.5px; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--mw-b2); background: var(--mw-bg3); color: var(--mw-t3); font-family: monospace; }

/* TLS preset buttons */
.tls-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tls-preset-btn { padding: 5px 13px; border-radius: 7px; border: 1px solid var(--mw-b2); background: var(--mw-bg3); color: var(--mw-t2); font-size: 12px; cursor: pointer; transition: all .15s; }
.tls-preset-btn.active { border-color: var(--mw-vbd); background: var(--mw-vbg); color: var(--mw-v2); }
.tls-preset-btn:hover:not(.active) { border-color: var(--mw-b3); color: var(--mw-t1); }

/* Rspamd threshold slider row */
.rspamd-thres { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.rspamd-thres-label { font-size: 11.5px; color: var(--mw-t3); min-width: 100px; }

/* Audit log rows */
.audit-row {
  padding: 8px 16px 8px 12px; border-bottom: 1px solid var(--mw-b1);
  display: grid; grid-template-columns: 148px 72px 1fr; align-items: baseline; gap: 8px;
  border-left: 3px solid transparent; transition: background .1s;
}
.audit-row:last-child { border-bottom: none; }
.audit-row:hover { background: var(--mw-bg4); }
.audit-row.info     { border-left-color: rgba(59,130,246,.4); }
.audit-row.debug    { border-left-color: rgba(148,163,184,.25); }
.audit-row.warning  { border-left-color: rgba(245,158,11,.55); background: rgba(245,158,11,.02); }
.audit-row.error    { border-left-color: rgba(239,68,68,.5); background: rgba(239,68,68,.025); }
.audit-row.critical { border-left-color: #ef4444; background: rgba(239,68,68,.055); }
.audit-row.warning:hover  { background: rgba(245,158,11,.045); }
.audit-row.error:hover    { background: rgba(239,68,68,.05); }
.audit-row.critical:hover { background: rgba(239,68,68,.09); }
.audit-time { font-size: 10.5px; color: var(--mw-t4); white-space: nowrap; font-family: ui-monospace,monospace; letter-spacing: -.01em; }
.audit-level { display: inline-block; font-size: 9.5px; padding: 2px 6px; border-radius: 4px; border: 1px solid; font-weight: 600; letter-spacing: .04em; text-align: center; }
.audit-level.info    { border-color: rgba(59,130,246,.3);  background: rgba(59,130,246,.08);  color: #93c5fd; }
.audit-level.debug   { border-color: rgba(148,163,184,.2); background: rgba(148,163,184,.06); color: #94a3b8; }
.audit-level.warning { border-color: rgba(245,158,11,.3);  background: rgba(245,158,11,.08);  color: #fcd34d; }
.audit-level.error   { border-color: rgba(239,68,68,.3);   background: rgba(239,68,68,.08);   color: #fca5a5; }
.audit-level.critical { border-color: rgba(239,68,68,.5);  background: rgba(239,68,68,.15);   color: #f87171; font-weight: 700; }
.audit-msg { color: var(--mw-t2); min-width: 0; word-break: break-word; line-height: 1.55; font-family: ui-monospace,monospace; font-size: 11.5px; }

/* ── Pagination (Queue / Quarantine) ────────────────────────────── */
.mq-pagination { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--mw-b2); }
.mq-pag-info { font-size: 11.5px; color: var(--mw-t4); }
.mq-pag-btns { display: flex; align-items: center; gap: 4px; }
.mq-pag-btn { display: flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--mw-b2); background: transparent; color: var(--mw-t3); font-size: 12px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.mq-pag-btn:hover:not(:disabled) { background: var(--mw-bg3); color: var(--mw-t1); }
.mq-pag-btn.active { background: rgba(124,58,237,.2); border-color: rgba(124,58,237,.5); color: #c4b5fd; }
.mq-pag-btn:disabled { opacity: .35; cursor: default; }