:root {
    --text: var(--ink);
}
/* Auth page styling */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0f14
}

.auth-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 980px;
    width: 100%;
    background: #121821;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    overflow: hidden
}

.auth-left {
    padding: 48px;
    background: #0f141b;
    color: #e7ecf2
}

.auth-right {
    background: linear-gradient(135deg,#1b2330,#202b3a)
}

h1 {
    margin: 0 0 6px;
    font-size: 32px
}

.muted {
    color: #98a6b7
}

    .muted.small {
        font-size: 13px;
        margin-top: 16px
    }

.form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px
}

    .form label {
        font-size: 13px;
        color: #b8c4d4
    }

    .form input {
        background: #131a22;
        border: 1px solid #1f2a38;
        color: #e7ecf2;
        border-radius: 10px;
        padding: 10px 12px;
        outline: none
    }

.row {
    display: flex;
    gap: 12px;
    align-items: center
}

    .row.between {
        justify-content: space-between
    }

.primary {
    background: #3aa0ff;
    border: none;
    color: white;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer
}

    .primary[disabled] {
        opacity: .6;
        cursor: not-allowed
    }

.secondary {
    background: #1a2330;
    border: 1px solid #263346;
    color: #cfd7e3;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: not-allowed
}

.sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    color: #6e7b8c
}

    .sep::before, .sep::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #243246
    }

.error {
    margin-top: 12px;
    color: #ff6b6b;
    background: #2b1212;
    border: 1px solid #5a2323;
    padding: 8px 10px;
    border-radius: 8px
}

@media (max-width:900px) {
    .auth-card {
        grid-template-columns: 1fr
    }

    .auth-right {
        display: none
    }
}
.app-shell {
    min-height: 100vh;
    background: #0b0f14;
    color: #e7ecf2
}

header {
    background: #0e1420;
    border-bottom: 1px solid #1e2a3a
}

main {
    padding: 24px
}

a {
    color: #9ec5ff;
    text-decoration: none
}

    a:hover {
        text-decoration: underline
    }


:root{
  --bg: #0f172a;            /* slate-900 */
  --panel: #111827;         /* gray-900 */
  --ink: #e5e7eb;           /* gray-200 */
  --muted: #9ca3af;         /* gray-400 */
  --brand: #4f46e5;         /* indigo-600 */
  --brand-ghost: rgba(79,70,229,.15);
  --accent: #22d3ee;        /* cyan-400 */
  --border: #1f2937;        /* gray-800 */
  --ok: #10b981;            /* emerald-500 */
}

* { box-sizing: border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.app-shell { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
  width: 260px;
  background: linear-gradient(180deg, #0b1024 0%, #0f172a 60%);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px 18px 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.brand-logo {
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  background: var(--brand-ghost); color: var(--brand); font-weight:700;
}
.brand-name { font-weight:700; letter-spacing:.3px; }

/* Nav */
.nav { display:flex; flex-direction:column; gap:4px; margin-top: 8px; }
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
  position: relative;
}
.nav-link:hover {
  background: #0b122a;
  border-color: var(--border);
}
.nav-link.active {
  background: #0b122a;
  border-color: var(--brand-ghost);
  box-shadow: inset 2px 0 0 0 var(--brand);
}
.nav-link.active .icon { filter: saturate(140%); }
.icon { width: 20px; text-align:center; }

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

.topbar {
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(17,24,39,.5); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5;
}
.crumbs { font-weight: 600; }
.pill {
  border:1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; color: var(--muted);
}

.content { padding: 18px; }

/* Cards */
.grid {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.card {
  grid-column: span 3;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}
.card h4 { margin:0 0 8px 0; font-weight:600; color: var(--muted); font-size: 13px; }
.card .big { font-size: 28px; font-weight: 700; margin: 4px 0 0 0; }
.card .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.card.ok { box-shadow: inset 0 0 0 1px rgba(16,185,129,.15); }
.card.accent { box-shadow: inset 0 0 0 1px rgba(34,211,238,.15); }
/* --- Dashboard grid (table) --- */
.grid-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* toolbar */
.grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #0f172a;
    border-bottom: 1px solid var(--border);
}

    .grid-toolbar .btn-ghost {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--ink);
        padding: 6px 10px;
        border-radius: 8px;
        cursor: pointer;
        margin-right: 8px;
    }

        .grid-toolbar .btn-ghost:hover {
            background: #0b122a;
        }

    .grid-toolbar .left .btn-ghost .ico {
        margin-right: 6px;
        opacity: .8;
    }

/* group bar */
.groupbar {
    padding: 10px 12px;
    color: var(--muted);
    font-size: 13px;
    border-bottom: 1px dashed var(--border);
}

/* table */
.table-wrap {
    overflow: auto;
}

.grid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .grid-table thead th {
        text-align: left;
        font-weight: 600;
        font-size: 13px;
        color: #bfc6d4;
        background: #0f172a;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
    }

    .grid-table tbody td {
        padding: 10px 12px;
        border-bottom: 1px solid #1b2330;
        font-size: 14px;
    }

    .grid-table tbody tr:hover {
        background: #0b122a;
    }

.link {
    color: #9ec5ff;
    text-decoration: none;
}

    .link:hover {
        text-decoration: underline;
    }

/* status */
.status {
    font-weight: 600;
}

.status--stopped {
    color: #ef4444;
}
/* red-500 */
.status--running {
    color: #10b981;
}
/* emerald-500 */

/* actions */
.actions {
    text-align: right;
    white-space: nowrap;
}

.action-link {
    background: transparent;
    border: none;
    color: #cfd7e3;
    cursor: pointer;
    margin-left: 8px;
    padding: 0;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .action-link:hover {
        text-decoration: underline;
    }

    .action-link .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #6e7b8c;
    }

    .action-link.ok .dot {
        background: #10b981;
    }
    /* Start */
    .action-link.warn .dot {
        background: #f59e0b;
    }
    /* Restart */
    .action-link.danger .dot {
        background: #ef4444;
    }
    /* Stop */
    .action-link .dot.neutral {
        background: #6e7b8c;
    }
/* Manage */

/* footer */
.grid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: #0f172a;
}

    .grid-footer .page-size {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #cfd7e3;
    }

    .grid-footer select {
        background: #131a22;
        color: #e7ecf2;
        border: 1px solid #1f2a38;
        border-radius: 8px;
        padding: 4px 8px;
    }

    .grid-footer .totals {
        color: #9ca3af;
        font-size: 13px;
    }
/* --- Slate Grey theme overrides (append at end of app.css) --- */
:root {
    /* Lighter, slate-y dark */
    --bg: #1f2937; /* slate-800 */
    --panel: #334155; /* slate-700 */
    --border: #475569; /* slate-600 */
    --ink: #e2e8f0; /* slate-200 */
    --muted: #94a3b8; /* slate-400 */
    --brand: #6366f1; /* indigo-500 */
    --brand-ghost: rgba(99,102,241,.18);
    --accent: #06b6d4; /* cyan-500 */
    --ok: #10b981; /* emerald-500 */
}

/* Auth */
.auth-wrap {
    background: var(--bg);
}

.auth-card {
    background: var(--panel);
}

.auth-left {
    background: #2a3446;
    color: var(--ink);
}

.auth-right {
    background: linear-gradient(135deg,#2a3446,#3b4758);
}

.form input {
    background: #2b3544;
    border: 1px solid var(--border);
    color: var(--ink);
}

.secondary {
    background: #2b3544;
    border: 1px solid #4b5563;
    color: var(--ink);
}

.sep {
    color: #7b8aa0;
}

    .sep::before, .sep::after {
        background: #4b5563;
    }

/* App shell + header */
.app-shell {
    background: var(--bg);
    color: var(--ink);
}

header {
    background: #253140;
    border-bottom: 1px solid #3b4758;
}

/* Links */
a, .link {
    color: #60a5fa;
}

/* Sidebar */
.sidebar {
    background: linear-gradient(180deg, #1f2937 0%, #334155 60%);
    border-right: 1px solid var(--border);
}

.nav-link:hover {
    background: #273244;
    border-color: var(--border);
}

.nav-link.active {
    background: #273244;
    border-color: var(--brand-ghost);
    box-shadow: inset 2px 0 0 0 var(--brand);
}

/* Cards / grids */
.grid-card {
    background: var(--panel);
    border: 1px solid var(--border);
}

.grid-toolbar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.grid-table thead th {
    background: var(--bg);
}

.grid-table tbody td {
    border-bottom: 1px solid #3b4758;
}

.grid-table tbody tr:hover {
    background: #273244;
}

.grid-footer {
    background: var(--bg);
}

/* Buttons */
.primary {
    background: var(--brand);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink);
}

    .btn-ghost:hover {
        background: #273244;
    }

/* Right panel art */
.auth-right {
    background: radial-gradient(1200px 600px at 80% 50%, rgba(34,211,238,0.08), transparent 60%), url('/img/heartbeatlogo.svg') center right / contain no-repeat, linear-gradient(135deg, #0f172a, #111827);
}
/* Social icon row */
.social-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #263346;
    background: #1a2330;
    cursor: pointer;
    transition: transform .06s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    .icon-btn:hover {
        background: #0b122a;
        border-color: var(--border);
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
    }

    .icon-btn svg {
        width: 22px;
        height: 22px;
        pointer-events: none;
    }

    /* Brand tints (keep subtle; icons use currentColor unless specified) */
    .icon-btn.apple {
        color: #e5e7eb;
    }
    /* near-white */
    .icon-btn.google {
        color: #8ab4ff;
    }
    /* soft Google blue tint */
    .icon-btn.facebook {
        color: #1877F2;
    }
    /* Facebook blue */
    .icon-btn.microsoft {
        background: #101826;
    }
        /* lets the four squares pop */
        .icon-btn.microsoft:hover {
            background: #0e1521;
        }
/* Brand area */
/* Brand area */
.brand {
    display: flex;
    align-items: center;
    padding: 12px 12px 14px 12px;
    border-bottom: 1px solid var(--border);
}

/* Let the logo breathe and avoid clipping when bigger */
.brand-logo-wrap {
    display: flex;
    align-items: center;
    overflow: visible; /* so the glow/edges never get cut */
    padding-right: 6px; /* room for the cyan tail */
}

/* Scale by height; keep aspect ratio; allow full width if needed */
.brand-logo-img {
    height: 80px; /* <- make it bigger here (try 44–48px) */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 0 4px rgba(34,211,238,.15)); /* subtle glow, optional */
}

/* If the first nav item feels too close to the logo */
.brand + .nav {
    margin-top: 6px;
}

/* Servers table: action cell layout */
.cell-actions{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;
  flex-wrap:wrap;       /* prevents overflow */
  text-align:left;      /* overrides any right-align legacy */
  white-space:normal;   /* allows wrapping */
}

/* Small button style (lightweight) */
.btn-small{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-small:hover{ background:#0b122a; }
/* Servers table: action cell layout */

/* Base small button — apply to both buttons and anchors */
button.btn-small,
a.btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    height: 28px; /* match your existing size */
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel); /* or your existing bg */
    color: var(--text);
    font: inherit;
    text-decoration: none; /* remove underline on <a> */
    cursor: pointer;
    white-space: nowrap;
}

    /* Hover/active/focus to match your theme */
    button.btn-small:hover,
    a.btn-small:hover {
        background: #141c24;
        border-color: #2a3a4a;
    }

    button.btn-small:active,
    a.btn-small:active {
        transform: translateY(1px);
    }

    button.btn-small:focus,
    a.btn-small:focus {
        outline: 2px solid rgba(34,211,238,.3);
        outline-offset: 2px;
    }

    /* Disabled look (works for <a> if you add aria-disabled="true") */
    button.btn-small:disabled,
    a.btn-small[aria-disabled="true"] {
        opacity: .55;
        pointer-events: none;
    }

    /* Variants */
    button.btn-small.danger,
    a.btn-small.danger {
        border-color: #7a1f24;
        color: #ffb4b4;
    }

        button.btn-small.danger:hover, 
        a.btn-small.danger:hover {
            background: #1a0f12;
            border-color: #a02a31;
        }

.form select, .form .input-select {
    display: block;
    width: 100%;
    min-height: 36px;
    background: #131a22;
    border: 1px solid #1f2a38;
    color: #e7ecf2;
    border-radius: 8px;
    padding: 6px 10px;
    appearance: auto; /* undo any global reset */
    opacity: 1 !important; /* defend against opacity reset */
}
/* --- Sidebar alignment overrides (match old Blazor) --- */
.sidebar {
    width: 260px;
    padding: 14px 10px;
}

.brand {
    padding: 10px 12px 12px 12px;
    margin-bottom: 6px;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px; /* slightly tighter */
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}

    .nav-link .icon {
        width: 20px;
        text-align: center;
    }

    .nav-link:hover {
        background: #0b122a;
        border-color: var(--border);
    }

    .nav-link.active {
        background: #0b122a;
        border-color: var(--brand-ghost);
        box-shadow: inset 2px 0 0 0 var(--brand); /* left color bar, like before */
    }

    /* Make the POST logout form look like a link row */
    .nav-link.as-button {
        padding: 0;
        border: 1px solid transparent;
    }

        .nav-link.as-button .unstyled {
            all: unset;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 10px;
            cursor: pointer;
            width: 100%;
        }

            .nav-link.as-button .unstyled:hover {
                background: #0b122a;
                border-color: var(--border);
            }

/* Optional: ensure the active state also applies to /Servers child routes */
body[data-path^="/servers/"] .nav a[href="/servers"] {
    background: #0b122a;
    border-color: var(--brand-ghost);
    box-shadow: inset 2px 0 0 0 var(--brand);
}
/* ---- Login page pixel-match tweaks ---- */
.auth-left h1 {
    margin: 0 0 8px 0;
    font-size: 32px; /* match original title size */
    font-weight: 700;
}

.auth-left .muted.small {
    margin: 0 0 18px 0; /* tighter under title */
    font-size: 14px;
}

/* Inputs: slightly lighter fill, soft borders like the original */
.auth-left .form input {
    background: rgba(219, 234, 254, 0.12); /* indigo-100 at ~12% for that frosted look */
    border: 1px solid #3b4758;
    color: var(--ink);
    border-radius: 10px;
    padding: 10px 12px;
}

/* Primary button sizing and rounded look */
.primary {
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
}

/* Inline link on the right of the button row */
.link-inline {
    color: #9ec5ff;
    text-decoration: none;
    padding: 6px 0;
}

    .link-inline:hover {
        text-decoration: underline;
    }

/* Separator to match the thin lines + label */
.sep {
    gap: 12px;
    color: #94a3b8;
    font-size: 13px;
}

    .sep::before, .sep::after {
        background: #3b4758; /* thinner, slatey line */
    }

/* Social row spacing (already styled, just ensure spacing matches) */
.social-row {
    gap: 12px;
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

/* Right panel visual */
.auth-right {
    background: radial-gradient(1200px 600px at 80% 50%, rgba(34,211,238,0.08), transparent 60%), linear-gradient(135deg, #0f172a, #111827);
}


/* ---- Heartbeat / EKG visual ---- */
.auth-right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(1200px 600px at 80% 50%, rgba(34,211,238,0.08), transparent 60%), linear-gradient(135deg, #0f172a, #111827);
}

.ekg-wrap {
    width: 78%;
    max-width: 720px;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.ekg {
    width: 100%;
    height: auto;
    display: block;
}

.ekg-panel {
    fill: rgba(15,23,42,.45); /* translucent slate */
    stroke: rgba(34,211,238,.18); /* cyan tint border */
    stroke-width: 2;
}

.ekg-grid {
    stroke: rgba(148,163,184,.08); /* very faint grid */
    stroke-width: 1;
}

.ekg-line {
    fill: none;
    stroke: #22d3ee; /* cyan */
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    /* draw-on animation */
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: ekg-draw 2.8s ease-in-out forwards, ekg-glow 2.8s ease-in-out infinite alternate;
}

.ekg-dot {
    fill: #22d3ee;
    animation: ekg-dot 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(34,211,238,.6));
}

@keyframes ekg-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes ekg-dot {
    0% {
        r: 3;
        opacity: .7;
    }

    50% {
        r: 5;
        opacity: 1;
    }

    100% {
        r: 3;
        opacity: .7;
    }
}

@keyframes ekg-glow {
    0% {
        filter: drop-shadow(0 0 0 rgba(34,211,238,.0));
    }

    100% {
        filter: drop-shadow(0 0 10px rgba(34,211,238,.55));
    }
}
/* --- Fancy toasts (Top-Center Style) -------------------------------------------------- */
#toast-container {
    position: fixed;
    top: -100px; /* hidden off-screen initially */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: top .38s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none; /* clicks pass through background */
}

    #toast-container.show {
        top: 20px; /* slides down when shown */
    }

.toast {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 420px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(17, 24, 39, 0.78); /* glassy dark */
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    transform: translateY(-20px);
    opacity: 0;
    animation: toast-in .35s ease forwards, toast-out .35s ease forwards 4.8s;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
}

    .toast + .toast {
        margin-top: 2px;
    }

    .toast.hide {
        animation: toast-out .3s ease forwards;
    }

.toast-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    color: var(--ink);
}

    .toast-icon svg {
        width: 16px;
        height: 16px;
    }

.toast-body {
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .2px;
    text-align: left;
}

.toast-close {
    background: transparent;
    border: none;
    color: #aab4c3;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .toast-close:hover {
        background: rgba(255,255,255,.06);
    }

    .toast-close svg {
        width: 16px;
        height: 16px;
    }

/* Progress bar */
.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: .35;
}

/* Kind accents (use your existing theme vars) */
.toast-success {
    border-color: rgba(16,185,129,.25);
    box-shadow: 0 6px 22px rgba(16,185,129,.16);
    color: var(--ok);
}

.toast-error {
    border-color: rgba(239,68,68,.35);
    box-shadow: 0 6px 22px rgba(239,68,68,.18);
    color: #ef4444;
}

.toast-warn {
    border-color: rgba(245,158,11,.35);
    box-shadow: 0 6px 22px rgba(245,158,11,.18);
    color: #f59e0b;
}

.toast-info {
    border-color: rgba(99,102,241,.30);
    box-shadow: 0 6px 22px rgba(99,102,241,.18);
    color: var(--brand);
}

/* Animations */
@keyframes toast-in {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toast-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/* Reduced motion: disable slide/animations for accessibility */
@media (prefers-reduced-motion: reduce) {
    #toast-container {
        transition: none !important;
        top: 20px;
    }

    .toast {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


.status-dot {
    color: #6e7b8c;
    transition: color .15s ease;
}

    .status-dot.online {
        color: #10b981;
    }
    /* emerald-500 */
    .status-dot.offline {
        color: #ef4444;
    }
/* red-500 */