:root {
    --primary: #0088ff;
    --primary-dark: #4f46e5;
    --secondary: #8b5cf6;
    --accent: #06b6d4;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --dark-bg: #0a0a0a;
    --dark-surface: #111111;
    --dark-card: #1a1a1a;
    --dark-border: #2a2a2a;
    --dark-text: #ffffff;
    --dark-text-muted: #a1a1aa;
    --light-bg: #fafafa;
    --light-surface: #ffffff;
    --light-card: #ffffff;
    --light-border: #e5e7eb;
    --light-text: #111827;
    --light-text-muted: #6b7280;
}

* {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

body {
    background: var(--light-bg);
    color: var(--light-text);
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.dark-mode .navbar {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .card {
    background: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .form-control {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .form-control:focus {
    background: var(--dark-surface) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.dark-mode .btn-outline-secondary {
    color: var(--dark-text-muted) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .btn-outline-secondary:hover {
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

.dark-mode .text-muted {
    color: var(--dark-text-muted) !important;
}

.dark-mode .bg-light {
    background: var(--dark-surface) !important;
}

.dark-mode .border-bottom {
    border-color: var(--dark-border) !important;
}

.dark-mode .dropdown-menu {
    background: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .dropdown-item {
    color: var(--dark-text) !important;
}

.dark-mode .dropdown-item:hover {
    background: var(--dark-surface) !important;
}

.navbar {
    background: var(--light-surface) !important;
    border-bottom: 1px solid var(--light-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0.75rem 0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #0088ff, #b14cfb); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card {
    background: var(--light-card);
    border: 1px solid var(--light-border);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    border-radius: 10px;
    font-weight: 500;
    font-size: 13px;
    padding: 10px 20px;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.form-control {
    border-radius: 10px;
    border: 1px solid var(--light-border);
    font-size: 13px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.status-online { background: var(--success); }
.status-maintenance { background: var(--warning); }
.status-offline { background: var(--danger); }

.host-item {
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--light-surface);
    border: 1px solid var(--light-border);
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.host-item:hover {
    background: var(--light-bg);
    transform: translateX(4px);
}

.dark-mode .host-item {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}

.dark-mode .host-item:hover {
    background: var(--dark-card);
}

.premium-card {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    position: relative;
    overflow: hidden;
}

.premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(30px, -30px);
}

.update-item {
    padding: 16px;
    border-radius: 10px;
    background: var(--light-surface);
    border-left: 3px solid var(--primary);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.update-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.update-item.feature { border-left-color: var(--success); }
.update-item.fix { border-left-color: var(--warning); }
.update-item.security { border-left-color: var(--danger); }

.dark-mode .update-item {
    background: var(--dark-surface);
}

.icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 16px;
    margin-bottom: 16px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.stat-item {
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.stat-number {
    font-size: 18px;
    font-weight: 700;
    color: #fbbf24;
}

.stat-label {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 4px;
}
.hero-section {
  background: linear-gradient(135deg,#1e3a8a,#9333ea);
  position:relative; color:#fff; overflow:hidden;
}
.hero-section::before {
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(transparent 95%,rgba(255,255,255,.05) 95%),
                    linear-gradient(90deg,transparent 95%,rgba(255,255,255,.05) 95%);
  background-size: 40px 40px;
}



.hero-content {
    position: relative;
    z-index: 1;
}

.loading-spinner {
    display: none;
}

.loading .loading-spinner {
    display: inline-block;
}

.loading .btn-text {
    display: none;
}

.feature-badge {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.dark-mode .feature-badge {
    background: rgba(16, 185, 129, 0.2);
}

@media (max-width: 768px) {
    .hero-section {
        padding: 40px 0;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        margin-bottom: 20px;
    }
}

.btn-sm {
    font-size: 12px;
    padding: 6px 12px;
}

.badge {
    font-size: 10px;
    padding: 4px 8px;
}

.small {
    font-size: 12px;
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 500; }
h5 { font-size: 1rem; font-weight: 500; }
h6 { font-size: 0.9rem; font-weight: 500; }

.lead {
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.9;
}

/* Premium hero background + subtle design elements */
.hero--pro{
position:relative; overflow:hidden; color:#fff; padding:72px 0;
background:
radial-gradient(1200px 480px at 85% -10%, rgba(99,102,241,.35), transparent 60%),
radial-gradient(900px 360px at 10% 110%, rgba(20,184,166,.30), transparent 65%),
linear-gradient(135deg, #0f172a 0%, #111827 55%, #1f2937 100%);
}
.hero--pro::before{
content:""; position:absolute; inset:-20%;
background: conic-gradient(from 120deg at 40% 50%,
rgba(78,70,229,.18), rgba(6,182,212,.12), rgba(244,63,94,.10), rgba(78,70,229,.18));
filter: blur(90px); opacity:.55; pointer-events:none;
}
.hero--pro::after{
content:""; position:absolute; inset:0; pointer-events:none; opacity:.10;
background-image:
radial-gradient(#ffffff 1px, transparent 1px),
radial-gradient(#ffffff 1px, transparent 1px);
background-size: 26px 26px, 26px 26px;
background-position: 0 0, 13px 13px; /* subtle dotted lattice */
mix-blend-mode: screen;
}

/* Trust grid spacing on mobile */
.trust-grid .fas{opacity:.9}
@media (max-width: 768px){
.hero--pro{ padding:56px 0; }
}
/* HOW IT WORKS section */
.howit-section{
position: relative;
overflow: hidden;
background:
radial-gradient(800px 300px at 85% -10%, rgba(99,102,241,.18), transparent 60%),
radial-gradient(600px 240px at 10% 110%, rgba(6,182,212,.16), transparent 65%),
linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.dark-mode .howit-section{
background:
radial-gradient(800px 300px at 85% -10%, rgba(99,102,241,.22), transparent 60%),
radial-gradient(600px 240px at 10% 110%, rgba(6,182,212,.20), transparent 65%),
linear-gradient(180deg, #0a0a0a 0%, #111111 100%);
}

/* step cards */
.howit-card{
border: 1px solid var(--light-border);
border-radius: 16px;
background: var(--light-card);
padding: 22px 18px;
box-shadow: 0 4px 18px rgba(0,0,0,.05);
transition: transform .25s ease, box-shadow .25s ease;
}
.howit-card:hover{
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.dark-mode .howit-card{
background: var(--dark-card);
border-color: var(--dark-border);
}

/* step icons with number badge */
.howit-icon{
width: 64px; height: 64px; border-radius: 16px;
margin: 0 auto 10px; position: relative;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color:#fff; font-size: 22px;
}
.howit-icon > span{
position: absolute; top:-10px; right:-10px;
width: 26px; height: 26px; border-radius: 50%;
background:#fff; color:#111; display:grid; place-items:center;
font-weight: 700; font-size: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.dark-mode .howit-icon > span{ background:#1a1a1a; color:#fff; }

/* connectors between steps (desktop) */
.howit-steps{ padding-top: 8px; padding-bottom: 8px; }
.howit-connector{
position: absolute; top: 64px; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, rgba(99,102,241,.3), rgba(6,182,212,.3));
z-index: 0;
}
.howit-steps .col-md-4{ position: relative; z-index: 1; }

/* fancy list bullets */
.fancy-list .list-group-item{
background: transparent; border: 0; padding-left: 0; padding-right: 0; margin-bottom: 10px;
}
.fancy-list .bullet{
width: 36px; height: 36px; border-radius: 10px;
display: grid; place-items: center; margin-right: 12px;
background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff;
flex: 0 0 auto;
}

/* mock window */
.mock-wrap{ position: relative; }
.mock-window{
border-radius: 14px; border: 1px solid var(--light-border);
background: var(--light-card); overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.dark-mode .mock-window{ background: var(--dark-card); border-color: var(--dark-border); }
.mock-dots{ display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--light-border); }
.dark-mode .mock-dots{ border-color: var(--dark-border); }
.mock-dots span{ width: 8px; height: 8px; border-radius: 50%; background:#e5e7eb; }
.dark-mode .mock-dots span{ background:#2a2a2a; }
.mock-body{ padding: 14px; }
.mini-stats{ display:flex; gap:14px; font-size: 12px; color: var(--light-text-muted); }
.dark-mode .mini-stats{ color: var(--dark-text-muted); }

/* subtle glow under mock */
.mock-glow{
position: absolute; inset: auto 0 -30px 0; height: 60px; filter: blur(24px);
background: radial-gradient(200px 30px at 50% 50%, rgba(99,102,241,.35), transparent 70%),
      radial-gradient(200px 30px at 30% 50%, rgba(6,182,212,.30), transparent 70%);
opacity: .8; pointer-events: none;
}

/* accordion polish */
.accordion-button{ font-weight: 600; }
.accordion-button:focus{ box-shadow: none; }
/* HOSTS list */
.host-list{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
}
@media (max-width: 768px){
.host-list{ grid-template-columns: 1fr; }
}
.host-row{
display:flex; align-items:center; justify-content:space-between;
border:1px solid var(--light-border);
background: var(--light-surface);
border-radius:12px; padding:10px 12px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.host-row:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.06);
border-color: rgba(99,102,241,.35);
}
.dark-mode .host-row{
background: var(--dark-surface);
border-color: var(--dark-border);
}
.host-brand{
display:flex; align-items:center; gap:10px; min-width:0;
position: relative;
}
.host-logo{
width:28px; height:28px; border-radius:6px; object-fit:contain; display:block;
background:#fff;
}
.dark-mode .host-logo{ background:#111; }
.host-brand.no-logo .host-logo{ display:none; }
.host-monogram{
display:none;
width:28px; height:28px; border-radius:6px;
background:linear-gradient(135deg, var(--primary), var(--secondary));
color:#fff; font-weight:700; font-size:12px; display:grid; place-items:center;
}
.host-brand.no-logo .host-monogram{ display:grid; }
.host-text{ min-width:0; }
.host-name{
font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.host-sub{
font-size:11px; color: var(--light-text-muted);
}
.dark-mode .host-sub{ color: var(--dark-text-muted); }

/* status chip */
.status-chip{
font-size:11px; font-weight:600; padding:6px 10px; border-radius:999px;
display:inline-flex; align-items:center; white-space:nowrap;
border:1px solid transparent;
}
.status-chip--ok{
background: rgba(16,185,129,.12);
color: #059669;
border-color: rgba(16,185,129,.25);
}
.status-chip--maint{
background: rgba(245,158,11,.12);
color: #b45309;
border-color: rgba(245,158,11,.25);
}
.status-chip--down{
background: rgba(239,68,68,.12);
color: #b91c1c;
border-color: rgba(239,68,68,.25);
}
/* Modal polish */
.modal-content { border-radius: 16px; }
.dark-mode .modal-content { background: var(--dark-card); color: var(--dark-text); }
.dark-mode .modal-header, .dark-mode .modal-footer { border-color: var(--dark-border) !important; }

/* Controls */
.filter-btn.active { box-shadow: inset 0 0 0 1px currentColor; }

/* Hosts grid cards */
.hosts-grid{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap:14px;
}
@media (max-width: 1200px){ .hosts-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){ .hosts-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .hosts-grid{ grid-template-columns: 1fr; } }

.host-card{
border:1px solid var(--light-border);
background: var(--light-surface);
border-radius:14px; padding:12px;
display:flex; align-items:center; gap:10px;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.host-card:hover{
transform: translateY(-2px);
border-color: rgba(99,102,241,.35);
box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.dark-mode .host-card{ background: var(--dark-surface); border-color: var(--dark-border); }

.host-card .logo{
width:34px; height:34px; border-radius:8px; object-fit:contain; background:#fff; flex:0 0 auto;
}
.dark-mode .host-card .logo{ background:#111; }
.host-card .mono{
display:none; width:34px; height:34px; border-radius:8px;
background:linear-gradient(135deg, var(--primary), var(--secondary));
color:#fff; font-weight:700; font-size:12px; display:grid; place-items:center;
}
.host-card.no-logo .logo{ display:none; }
.host-card.no-logo .mono{ display:grid; }

.host-card .meta{ min-width:0; }
.host-card .name{ font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.host-card .sub{ font-size:11px; color: var(--light-text-muted); }
.dark-mode .host-card .sub{ color: var(--dark-text-muted); }

.host-card .chip{
margin-left:auto; font-size:11px; font-weight:600; padding:6px 10px; border-radius:999px;
border:1px solid transparent; white-space:nowrap; display:inline-flex; align-items:center;
}
.chip--ok{ background: rgba(16,185,129,.12); color: #059669; border-color: rgba(16,185,129,.25); }
.chip--maint{ background: rgba(245,158,11,.12); color:#b45309; border-color: rgba(245,158,11,.25); }
.chip--down{ background: rgba(239,68,68,.12); color:#b91c1c; border-color: rgba(239,68,68,.25); }
/* ===== Usage & Limits styles (scoped to #limits) ===== */
#limits .icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99,102,241,.12);
    color: #4f46e5;
}

.dark-mode #limits .icon-badge {
    background: rgba(99,102,241,.18);
    color: #818cf8;
}

#limits .limits-list {
    max-height: 520px;
    overflow: auto;
    padding-right: 4px;
}

@media (max-width: 991.98px) {
    #limits .limits-list {
        max-height: none;
    }
}

.limit-row {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background .15s, border-color .15s;
}

    .limit-row + .limit-row {
        margin-top: 8px;
    }

    .limit-row:hover {
        background: rgba(0,0,0,.02);
    }

.dark-mode .limit-row:hover {
    background: rgba(255,255,255,.04);
}

.limit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.limit-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.limit-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-light);
    color: #0f172a;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid var(--bs-border-color);
}

.dark-mode .limit-logo {
    background: rgba(255,255,255,.06);
    color: #fff;
    border-color: rgba(255,255,255,.12);
}

.limit-name {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.limit-meta {
    font-size: 11px;
    color: var(--bs-secondary-color);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

.status-ok {
    background: #10b981;
}

.status-near {
    background: #f59e0b;
}

.status-exceeded {
    background: #ef4444;
}

.limit-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
    overflow: hidden;
    position: relative;
}

.dark-mode .limit-bar {
    background: rgba(255,255,255,.10);
}

.limit-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width .35s ease;
}

.fill-ok {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.fill-near {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.fill-exceeded {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.limit-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.cap-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cap-chip {
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bs-body-bg);
}

.dark-mode .cap-chip {
    background: transparent;
    border-color: rgba(255,255,255,.12);
}

.chip-icon {
    opacity: .75;
}
/* ===== Generator UI polish ===== */
#generator .icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#eaf1ff,#f7faff);
    color: #2563eb;
    box-shadow: 0 2px 8px rgba(37,99,235,.12);
}

/* button loading state (uses your .loading-spinner span) */
#generateBtn .loading-spinner {
    display: none;
}

#generateBtn.loading .btn-text {
    display: none;
}

#generateBtn.loading .loading-spinner {
    display: inline-flex;
    align-items: center;
}

/* status pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8125rem;
    font-weight: 600;
    padding: .28rem .6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-pill--pending {
    color: #8a99ad;
    background: #f3f6fb;
    border-color: #e6edf5;
}

.status-pill--ok {
    color: #0b7a45;
    background: #e9fbf0;
    border-color: #c9f3db;
}

.status-pill--err {
    color: #9a1b1b;
    background: #fff1f1;
    border-color: #ffd3d3;
}

/* rows feedback */
#resultsTable tbody tr[data-status="ok"] {
    background: linear-gradient(0deg,rgba(233,251,240,.55),transparent 42%);
}

#resultsTable tbody tr[data-status="err"] {
    background: linear-gradient(0deg,rgba(255,240,240,.55),transparent 42%);
}

#resultsTable tbody tr[data-status="pending"] {
}

/* tighter table visuals */
#resultsTable td, #resultsTable th {
    vertical-align: middle;
}

#resultsTable .file-name {
    max-width: 520px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 992px) {
    #resultsTable .file-name {
        max-width: 260px;
    }
}

/* tiny buttons feel */
#resultsTable .btn.btn-sm {
    padding: .25rem .5rem;
}

/* “Details” button variant to stand out on errors */
.btn-outline-danger-subtle {
    --c: #dc3545;
    color: var(--c);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    background: color-mix(in srgb, var(--c) 8%, white);
}

    .btn-outline-danger-subtle:hover {
        background: color-mix(in srgb, var(--c) 14%, white);
        border-color: color-mix(in srgb, var(--c) 45%, transparent);
    }

/* badges at top */
#resultsWrap .badge {
    font-weight: 700;
}

#resultsTable .file-name {
    max-width: 520px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 992px) {
    #resultsTable .file-name {
        max-width: 260px;
    }
}
/* ================= Link Generator – Dark Mode ================= */
body.dark-mode #generator {
    --nd-surface: #0f172a; /* cards, table bg */
    --nd-soft: #0a1321; /* headers / soft stripes */
    --nd-border: #213049; /* borders */
    --nd-text: #e6eef6; /* primary text */
    --nd-muted: #9fb2c8; /* secondary text */
}

    /* Card + text */
    body.dark-mode #generator .card {
        background: var(--nd-surface);
        border-color: var(--nd-border);
        color: var(--nd-text);
    }

    body.dark-mode #generator .text-muted,
    body.dark-mode #generator .form-text,
    body.dark-mode #generator .small {
        color: var(--nd-muted) !important;
    }

    /* Icon badge */
    body.dark-mode #generator .icon-badge {
        background: linear-gradient(135deg,#0d1a2b,#10243f);
        color: #9ec5fe;
        box-shadow: 0 2px 10px rgba(0,0,0,.35);
    }

    /* Inputs */
    body.dark-mode #generator .form-control,
    body.dark-mode #generator textarea {
        background: #0b1220;
        color: var(--nd-text);
        border-color: var(--nd-border);
    }

        body.dark-mode #generator .form-control::placeholder {
            color: #7e93ac;
        }

    /* Generate button loading spinner inherits color; make sure it's visible */
    body.dark-mode #generator #generateBtn .spinner-border {
        border-color: currentColor;
        border-right-color: transparent;
    }

    /* Table base */
    body.dark-mode #generator .table {
        --bs-table-bg: var(--nd-surface);
        --bs-table-color: var(--nd-text);
        --bs-table-striped-bg: rgba(255,255,255,.03);
        --bs-table-striped-color: var(--nd-text);
        --bs-table-border-color: var(--nd-border);
    }

        body.dark-mode #generator .table thead.table-light {
            --bs-table-bg: var(--nd-soft);
            --bs-table-color: var(--nd-text);
            border-bottom: 1px solid var(--nd-border);
        }

        body.dark-mode #generator .table td,
        body.dark-mode #generator .table th {
            border-color: var(--nd-border);
        }

    /* Row tints for statuses */
    body.dark-mode #generator #resultsTable tbody tr[data-status="ok"] {
        background: linear-gradient(0deg, rgba(16,185,129,.10), transparent 42%);
    }

    body.dark-mode #generator #resultsTable tbody tr[data-status="err"] {
        background: linear-gradient(0deg, rgba(239,68,68,.10), transparent 42%);
    }

    /* Status pills */
    body.dark-mode #generator .status-pill--pending {
        color: #9fb2c8;
        background: #0d1a2b;
        border-color: var(--nd-border);
    }

    body.dark-mode #generator .status-pill--ok {
        color: #86efac;
        background: rgba(22,163,74,.16);
        border-color: #1f8f4d;
    }

    body.dark-mode #generator .status-pill--err {
        color: #fca5a5;
        background: rgba(239,68,68,.16);
        border-color: #7f1d1d;
    }

    /* Badges in summary header */
    body.dark-mode #generator #resultsWrap .bg-success-subtle {
        background: rgba(34,197,94,.16) !important;
        color: #86efac !important;
        border: 1px solid #1f8f4d;
    }

    body.dark-mode #generator #resultsWrap .bg-warning-subtle {
        background: rgba(245,158,11,.14) !important;
        color: #facc15 !important;
        border: 1px solid #8a6d1a;
    }

    body.dark-mode #generator #resultsWrap .bg-danger-subtle {
        background: rgba(239,68,68,.16) !important;
        color: #fca5a5 !important;
        border: 1px solid #7f1d1d;
    }

    /* Action buttons */
    body.dark-mode #generator .btn-outline-secondary {
        color: #cdd6e0;
        border-color: #2b3f63;
        background: transparent;
    }

        body.dark-mode #generator .btn-outline-secondary:hover {
            background: #0d1a2b;
            border-color: #3d5a86;
            color: #fff;
        }

    body.dark-mode #generator .btn-outline-danger-subtle {
        color: #ffb4b4;
        border-color: #5a1b1b;
        background: #301417;
    }

        body.dark-mode #generator .btn-outline-danger-subtle:hover {
            background: #3a161a;
            border-color: #7f1d1d;
            color: #fff;
        }

    /* “All done” alert */
    body.dark-mode #generator .alert-info {
        background: #0d2238;
        border-color: #214c7c;
        color: #b8d4f8;
    }

    /* Keep long filenames/messages from glowing too bright */
    body.dark-mode #generator .file-name {
        color: #dbe6f3;
    }

    body.dark-mode #generator tr[data-status="err"] .file-name {
        color: #ffb4b4;
    }
/* ================= Error Details Modal — Dark Mode ================= */
body.dark-mode #errorDetailModal {
    --nd-surface: #0f172a; /* modal surface */
    --nd-soft: #0a1321; /* soft blocks */
    --nd-border: #213049; /* borders */
    --nd-text: #e6eef6; /* text */
    --nd-muted: #9fb2c8; /* secondary text */
    --nd-danger1: #4a1111; /* header gradient start (darkened) */
    --nd-danger2: #7a1e1e; /* header gradient end (darkened) */
}

    body.dark-mode #errorDetailModal .modal-content {
        background: var(--nd-surface);
        color: var(--nd-text);
        border: 1px solid var(--nd-border);
    }

    body.dark-mode #errorDetailModal .modal-header {
        /* override the inline light gradient */
        background: linear-gradient(120deg, var(--nd-danger1), var(--nd-danger2)) !important;
        border-bottom: 1px solid var(--nd-border);
    }

    body.dark-mode #errorDetailModal .modal-title {
        color: #ffe2e2;
    }

    body.dark-mode #errorDetailModal .btn-close {
        filter: invert(1) grayscale(1);
        opacity: .8;
    }

    /* Body text & labels */
    body.dark-mode #errorDetailModal .text-muted,
    body.dark-mode #errorDetailModal .small {
        color: var(--nd-muted) !important;
    }

    /* “Message” box (was bg-light-subtle) */
    body.dark-mode #errorDetailModal #errModalMessage {
        background: #0d1a2b !important;
        border: 1px solid var(--nd-border) !important;
        color: var(--nd-text);
    }

    /* “Details” pre block (was bg-body-tertiary) */
    body.dark-mode #errorDetailModal #errModalDetails {
        background: var(--nd-soft) !important;
        border: 1px solid var(--nd-border) !important;
        color: #dbe6f3;
    }

    /* Footer */
    body.dark-mode #errorDetailModal .modal-footer {
        background: var(--nd-soft);
        border-top: 1px solid var(--nd-border);
    }

    /* Buttons inside modal */
    body.dark-mode #errorDetailModal .btn-outline-secondary {
        color: #cdd6e0;
        border-color: #2b3f63;
        background: transparent;
    }

        body.dark-mode #errorDetailModal .btn-outline-secondary:hover {
            background: #0d1a2b;
            border-color: #3d5a86;
            color: #fff;
        }

    body.dark-mode #errorDetailModal .btn-primary {
        background: #1b2742;
        border-color: #3d5a86;
    }

        body.dark-mode #errorDetailModal .btn-primary:hover {
            background: #23335a;
            border-color: #4a6aa3;
        }
/* Lock table width and let columns wrap */
#resultsTable {
    table-layout: fixed; /* distribute width; prevents growth */
    width: 100%;
}

    /* Let all cells break long tokens if needed */
    #resultsTable th,
    #resultsTable td {
        word-break: break-word; /* fallback */
        overflow-wrap: anywhere; /* modern, breaks long URLs */
    }

        /* Specifically: make the File column wrap (3rd column) */
        #resultsTable th:nth-child(3),
        #resultsTable td:nth-child(3) {
            white-space: normal; /* allow wrapping */
        }

            /* Override any prior single-line/ellipsis rules on .file-name */
            #resultsTable td:nth-child(3) .file-name {
                max-width: none;
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
                /* Optional: cap to 3 lines with graceful clipping */
                display: -webkit-box;
                -webkit-line-clamp: 3; /* change to 2/4/etc. or remove to allow unlimited */
                -webkit-box-orient: vertical;
            }

        /* Keep other columns narrow & stable (matches your inline widths) */
        #resultsTable th:nth-child(1), #resultsTable td:nth-child(1) {
            width: 36px;
        }

        #resultsTable th:nth-child(4), #resultsTable td:nth-child(4) {
            width: 110px;
        }

        #resultsTable th:nth-child(5), #resultsTable td:nth-child(5) {
            width: 120px;
        }

        #resultsTable th:nth-child(6), #resultsTable td:nth-child(6) {
            width: 170px;
        }

/* Optional: if the wrapper still shows a horizontal scrollbar, hide it */
#resultsWrap .table-responsive {
    overflow-x: hidden;
}
/* Make result area scroll vertically (no horizontal scroll), keep header visible */
.results-scroll {
    max-height: 460px; /* tweak height you like */
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: .5rem;
}

/* Sticky table header inside the scroll area */
.results-table thead.sticky-head th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--tbl-head-bg, #f8f9fa);
}

/* Compact table + better readability */
.results-table {
    table-layout: fixed; /* keeps layout stable */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    /* File cell wraps neatly (shows 2 lines max by default) */
    .results-table td:nth-child(2) .file-name {
        margin: 0;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* show up to 2 lines */
        -webkit-box-orient: vertical;
        word-break: break-word;
    }

/* Status “pills” — refine look */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1;
    white-space: nowrap;
}

.status-pill--pending {
    background: rgba(13,110,253,.08);
    color: #0d6efd;
}

.status-pill--ok {
    background: rgba(25,135,84,.12);
    color: #198754;
    font-weight: 600;
}

.status-pill--err {
    background: rgba(220,53,69,.12);
    color: #dc3545;
    font-weight: 600;
}

/* Row accents by status (uses your data-status attribute; no JS changes) */
.results-table tbody tr[data-status="pending"] {
    border-left: 3px solid rgba(13,110,253,.35);
}

.results-table tbody tr[data-status="ok"] {
    border-left: 3px solid rgba(25,135,84,.6);
    background-image: linear-gradient(to right, rgba(25,135,84,.05), transparent);
}

.results-table tbody tr[data-status="err"] {
    border-left: 3px solid rgba(220,53,69,.6);
    background-image: linear-gradient(to right, rgba(220,53,69,.05), transparent);
}

/* Make action buttons align right consistently */
.results-table td:last-child {
    text-align: right;
}

/* Hover state subtlety */
.results-table tbody tr:hover {
    filter: brightness(0.995);
}

/* Light/Dark theme adjustments */
body.dark-mode .results-table thead.sticky-head th {
    --tbl-head-bg: #1f2430;
    color: rgba(255,255,255,.75);
    border-bottom-color: rgba(255,255,255,.1);
}

body.dark-mode .results-table {
    color: #e6e6e6;
}

    body.dark-mode .results-table tbody tr {
        background-color: #151a22;
    }

        body.dark-mode .results-table tbody tr:nth-child(odd) {
            background-color: #161c25; /* striped feel */
        }

    body.dark-mode .results-table .status-pill--pending {
        background: rgba(13,110,253,.18);
        color: #72a7ff;
    }

    body.dark-mode .results-table .status-pill--ok {
        background: rgba(25,135,84,.22);
        color: #86e1ad;
    }

    body.dark-mode .results-table .status-pill--err {
        background: rgba(220,53,69,.22);
        color: #ff9aa6;
    }

body.dark-mode .results-scroll {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .5rem;
}

/* Keep the “All requests finished” hint neat */
#hintAllDone {
    border-left: 3px solid #0d6efd;
}

body.dark-mode #hintAllDone {
    background-color: rgba(13,110,253,.12);
    color: #bcd4ff;
    border-color: #72a7ff;
}
/* Keep compact vertical rhythm */
#resultsTable.table {
    table-layout: fixed;
    width: 100%;
}

#resultsTable td {
    vertical-align: middle;
}

    /* File cell: clamp even in error */
    #resultsTable td:nth-child(2) .file-name {
        margin: 0;
        line-height: 1.25;
        font-size:12px;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* keep at most 2 lines */
        -webkit-box-orient: vertical;
    }

/* Paint the actual cells, not just the row (Bootstrap stripes paint td) */
#resultsTable tbody tr[data-status="pending"] > td {
    background-color: rgba(13,110,253,.04) !important;
}

#resultsTable tbody tr[data-status="ok"] > td {
    background-color: rgba(25,135,84,.04) !important;
}

#resultsTable tbody tr[data-status="err"] > td {
    background-color: rgba(220,53,69,.06) !important; /* the red tint you wanted */
}

/* Keep the color on hover too */
#resultsTable.table-hover tbody tr[data-status="pending"]:hover > td {
    background-color: rgba(13,110,253,.08) !important;
}

#resultsTable.table-hover tbody tr[data-status="ok"]:hover > td {
    background-color: rgba(25,135,84,.10) !important;
}

#resultsTable.table-hover tbody tr[data-status="err"]:hover > td {
    background-color: rgba(220,53,69,.12) !important;
}

/* Left accent bar still looks great */
#resultsTable tbody tr[data-status="pending"] {
    border-left: 3px solid rgba(13,110,253,.35);
}

#resultsTable tbody tr[data-status="ok"] {
    border-left: 3px solid rgba(25,135,84,.60);
}

#resultsTable tbody tr[data-status="err"] {
    border-left: 3px solid rgba(220,53,69,.60);
}

/* Prevent actions from wrapping to a second row */
#resultsTable td:last-child .d-flex {
    flex-wrap: nowrap;
    gap: .4rem;
}

/* Dark mode tweaks (if you use body.dark-mode) */
body.dark-mode #resultsTable tbody tr[data-status="pending"] > td {
    background-color: rgba(13,110,253,.12) !important;
}

body.dark-mode #resultsTable tbody tr[data-status="ok"] > td {
    background-color: rgba(25,135,84,.14) !important;
}

body.dark-mode #resultsTable tbody tr[data-status="err"] > td {
    background-color: rgba(220,53,69,.16) !important;
}

body.dark-mode #resultsTable.table-hover tbody tr[data-status="pending"]:hover > td {
    background-color: rgba(13,110,253,.20) !important;
}

body.dark-mode #resultsTable.table-hover tbody tr[data-status="ok"]:hover > td {
    background-color: rgba(25,135,84,.22) !important;
}

body.dark-mode #resultsTable.table-hover tbody tr[data-status="err"]:hover > td {
    background-color: rgba(220,53,69,.24) !important;
}
/* Tighter actions cell so three buttons fit */
#resultsTable td:last-child .d-flex {
    gap: .35rem;
}

#resultsTable td:last-child .btn-sm {
    padding: .25rem .45rem;
}

/* On medium/smaller screens, show icon-only to prevent overflow */
@media (max-width: 1200px) {
    #resultsTable td:last-child .btn-label {
        display: none;
    }
}

/* (Optional) keep error tint visible even with striped/hover tables */
#resultsTable tbody tr[data-status="err"] > td {
    background-color: rgba(220,53,69,.06) !important;
}

#resultsTable.table-hover tbody tr[data-status="err"]:hover > td {
    background-color: rgba(220,53,69,.12) !important;
}
/* ===== Compact, readable hosts panel ===== */
.host-list--compact {
    --row-h: 44px; /* row height */
    --pad-x: 10px;
    --name-size: 13px; /* host name size */
    --mono-size: 22px; /* monogram circle */
    --logo-size: 18px; /* logo size */
    --chip-h: 22px; /* status chip height */
    --chip-px: 7px;
    --sep: rgba(0,0,0,.06);
}

.dark-mode .host-list--compact {
    --sep: rgba(255,255,255,.08);
}

/* rows */
.host-list--compact .host-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--row-h);
    padding: 6px var(--pad-x);
    border-bottom: 1px solid var(--sep);
}

    .host-list--compact .host-row:last-child {
        border-bottom: 0;
    }

/* brand cluster (logo/mono + name) */
.host-list--compact .host-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.host-list--compact .host-logo {
    width: var(--logo-size);
    height: var(--logo-size);
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.host-list--compact .no-logo .host-logo {
    display: none;
}

.host-list--compact .host-monogram {
    width: var(--mono-size);
    height: var(--mono-size);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .3px;
    background: rgba(0,0,0,.06);
    color: #0f172a;
}

.dark-mode .host-list--compact .host-monogram {
    background: rgba(255,255,255,.08);
    color: #e5e7eb;
}

/* name */
.host-list--compact .host-text {
    min-width: 0;
}

.host-list--compact .host-name {
    font-size: var(--name-size);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

@media (max-width: 1400px) {
    .host-list--compact .host-name {
        max-width: 150px;
    }
}

@media (max-width: 1200px) {
    .host-list--compact .host-name {
        max-width: 130px;
    }
}

@media (max-width: 992px) {
    .host-list--compact .host-name {
        max-width: 220px;
    }
}

/* status chip (icon-only pill) */
.host-list--compact .status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--chip-h);
    min-width: var(--chip-h);
    padding: 0 var(--chip-px);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    user-select: none;
}

    .host-list--compact .status-chip i {
        font-size: 12px;
    }

/* states */
.host-list--compact .status-chip--ok {
    background: rgba(16,185,129,.14);
    border-color: rgba(16,185,129,.35);
    color: #065f46;
}

.host-list--compact .status-chip--maint {
    background: rgba(245,158,11,.16);
    border-color: rgba(245,158,11,.35);
    color: #7c2d12;
}

.host-list--compact .status-chip--down {
    background: rgba(239,68,68,.16);
    border-color: rgba(239,68,68,.35);
    color: #7f1d1d;
}

/* keep it inside the card */
#hosts .card-body {
    padding: 1rem;
}

#hosts .host-list {
    max-height: 420px;
    overflow: hidden;
}

    #hosts .host-list:hover {
        overflow-y: auto;
    }

/* subtle hover for rows */
.host-list--compact .host-row:hover {
    background: rgba(0,0,0,.03);
}

.dark-mode .host-list--compact .host-row:hover {
    background: rgba(255,255,255,.04);
}
#captchaWrapper.border-danger {
    border: 1px solid #dc3545 !important;
    border-radius: .375rem;
}
<style >
/* Account banner (replaces hero). Clean, readable, premium */
.account-banner {
    position: relative;
    padding: clamp(18px, 3vw, 28px) 0;
    color: #fff;
    background: radial-gradient(900px 280px at 85% -10%, rgba(99,102,241,.25), transparent 60%), radial-gradient(800px 300px at 10% 120%, rgba(6,182,212,.20), transparent 65%), linear-gradient(135deg, #0f172a 0%, #111827 55%, #1f2937 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.dark-mode .account-banner {
    background: radial-gradient(900px 280px at 85% -10%, rgba(99,102,241,.25), transparent 60%), radial-gradient(800px 300px at 10% 120%, rgba(6,182,212,.20), transparent 65%), linear-gradient(135deg, #0b0f1a 0%, #0c111b 55%, #111827 100%);
}

.account-banner__edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 24px;
    background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 70%);
}

.dark-mode .account-banner__edge {
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 70%);
}

/* Titles */
.acc-title {
    font-size: clamp(18px, 2.6vw, 22px);
    font-weight: 800;
    letter-spacing: -.01em;
}

.acc-sub {
    opacity: .85;
    font-size: clamp(13px, 2vw, 14px);
}

/* KPI grid */
.acc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

@media (max-width: 576px) {
    .acc-grid {
        grid-template-columns: 1fr;
    }
}

.acc-kpi {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dark-mode .acc-kpi {
    background: rgba(0,0,0,.25);
    border-color: rgba(255,255,255,.12);
}

.kpi-label {
    font-size: 11px;
    opacity: .85;
}

.kpi-value {
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.text-dim {
    opacity: .7;
}

/* Status styles */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(255,255,255,.08) inset;
}

    .status-dot.ok {
        background: #10b981;
    }

    .status-dot.free {
        background: #6b7280;
    }

.status-text {
    font-weight: 700;
    font-size: 13px;
}

/* Days left chip */
.days-chip {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(16,185,129,.14);
    color: #a7f3d0;
    border-color: rgba(16,185,129,.35);
}

.days-chip--warn {
    background: rgba(245,158,11,.16);
    color: #fde68a;
    border-color: rgba(245,158,11,.35);
}

.days-chip--urgent {
    background: rgba(239,68,68,.16);
    color: #fecaca;
    border-color: rgba(239,68,68,.35);
}

.days-chip--expired {
    background: rgba(239,68,68,.22);
    color: #fecaca;
    border-color: rgba(239,68,68,.45);
}

/* Buttons on dark bg */
.account-banner .btn-outline-light {
    border-color: rgba(255,255,255,.35);
    color: #fff;
}

    .account-banner .btn-outline-light:hover {
        background: rgba(255,255,255,.1);
    }

/* Spacing between navbar and cards feels airy */
.account-banner + .container {
    margin-top: 10px;
}

@media (min-width: 992px) {
    .account-banner {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}
/* Compact account rail */
.account-rail {
    position: relative;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(17,17,17,.16), rgba(17,17,17,.10)), linear-gradient(135deg, #0f172a 0%, #111827 55%, #1f2937 100%);
    backdrop-filter: blur(6px);
    padding: 10px 0; /* Slim height */
}

.dark-mode .account-rail {
    background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18)), linear-gradient(135deg, #0b0f1a 0%, #0c111b 55%, #111827 100%);
    border-color: rgba(255,255,255,.06);
}

.rail-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rail-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.rail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Labels & values */
.rail-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
}

.dark-mode .rail-brand {
    background: rgba(0,0,0,.25);
    border-color: rgba(255,255,255,.10);
}

.rail-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.rail-label {
    font-size: 11px;
    opacity: .85;
}

.rail-value {
    font-size: 13px;
    font-weight: 700;
    min-width: 0;
}

.text-dim {
    opacity: .7;
}

.rail-sep {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,.16);
}

.dark-mode .rail-sep {
    background: rgba(255,255,255,.12);
}

/* Collapse details */
.rail-more {
    padding-top: 8px;
}

.rail-more-grid {
    display: grid;
    gap: 8px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 576px) {
    .rail-more-grid {
        grid-template-columns: 1fr;
    }
}

.rail-more-label {
    font-size: 11px;
    opacity: .85;
}

.rail-more-value {
    font-size: 13px;
    font-weight: 700;
}

/* Reuse your existing chips & dots; add tiny spacing tweak */
.kpi-value, .rail-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.days-chip {
    padding: 3px 8px;
    font-weight: 600;
}

/* Status dot (reuse colors) */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(255,255,255,.08) inset;
}

    .status-dot.ok {
        background: #10b981;
    }

    .status-dot.free {
        background: #6b7280;
    }

/* Buttons on dark bg */
.account-rail .btn-outline-light {
    border-color: rgba(255,255,255,.35);
    color: #fff;
}

    .account-rail .btn-outline-light:hover {
        background: rgba(255,255,255,.1);
    }

/* =========================
     LIGHT MODE OVERRIDES
     (when body is NOT .dark-mode)
     ========================= */
body:not(.dark-mode) .account-rail {
    color: var(--light-text);
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.92)), linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--light-border);
    backdrop-filter: none; /* crisper on light */
}

body:not(.dark-mode) .rail-brand {
    background: rgba(0,0,0,.04);
    border: 1px solid var(--light-border);
    color: var(--light-text);
}

body:not(.dark-mode) .rail-item .rail-label {
    color: var(--light-text-muted);
    opacity: 1;
}

body:not(.dark-mode) .rail-item .rail-value {
    color: var(--light-text);
}

body:not(.dark-mode) .rail-sep {
    background: var(--light-border);
}

body:not(.dark-mode) .status-dot {
    box-shadow: 0 0 0 3px rgba(0,0,0,.05) inset;
}

/* Chips already read well on light, but we can make them a touch subtler */
body:not(.dark-mode) .days-chip {
    filter: saturate(.95) brightness(.98);
}

/* Buttons: make outline "light" look like a dark outline in light mode */
body:not(.dark-mode) .account-rail .btn-outline-light {
    border-color: var(--light-border);
    color: var(--light-text);
    background: transparent;
}

    body:not(.dark-mode) .account-rail .btn-outline-light:hover {
        background: rgba(0,0,0,.04);
    }

/* Optional: slightly reduce overall height in light mode */
body:not(.dark-mode) .account-rail {
    padding: 8px 0;
}
/* Default banner styling */
.account-banner {
    padding: 1.5rem 0;
    position: relative;
}

/* Light mode: soft gradient panel */
body:not(.dark-mode) .account-banner {
    background: linear-gradient(135deg, #f9fafc 0%, #eef2f7 100%);
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
}

/* Dark mode keeps your dark bg */
body.dark-mode .account-banner {
    background: linear-gradient(135deg, #141720 0%, #1a1e29 100%);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
/* =========================
     PREMIUM MESH RAIL BACKGROUND
     ========================= */

/* Base rail reset to avoid white overrides */
.account-rail.rail--mesh {
    position: relative;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/* LIGHT MODE — elegant Aurora mesh + soft grain */
body:not(.dark-mode) .account-rail.rail--mesh {
    /* mesh gradient stack (locked with !important to beat bg-white) */
    background: radial-gradient(1000px 380px at 85% -10%, rgba(99,102,241,.30), transparent 60%), radial-gradient(900px 340px at 10% 120%, rgba(6,182,212,.25), transparent 65%), radial-gradient(800px 360px at 50% -30%, rgba(236,72,153,.18), transparent 65%), linear-gradient(135deg, #f3f6ff 0%, #eef7ff 45%, #eaf4ff 100%) !important;
    color: #0f172a;
    padding: 12px 0;
    border-bottom-color: rgba(15,23,42,.08);
}

    /* Soft grain overlay */
    body:not(.dark-mode) .account-rail.rail--mesh::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(#000 1px, transparent 1px), radial-gradient(#000 1px, transparent 1px);
        background-size: 26px 26px, 26px 26px;
        background-position: 0 0, 13px 13px;
        opacity: .03; /* very subtle */
        pointer-events: none;
        mix-blend-mode: multiply;
        z-index: 0;
    }

/* DARK MODE — keep your dark glassy look */
body.dark-mode .account-rail.rail--mesh {
    background: radial-gradient(1000px 380px at 85% -10%, rgba(99,102,241,.28), transparent 60%), radial-gradient(900px 340px at 10% 120%, rgba(6,182,212,.22), transparent 65%), linear-gradient(135deg, #0b1020 0%, #0d1424 55%, #111827 100%) !important;
    color: #fff;
    padding: 12px 0;
    border-bottom-color: rgba(255,255,255,.08);
}

    body.dark-mode .account-rail.rail--mesh::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(#fff 1px, transparent 1px), radial-gradient(#fff 1px, transparent 1px);
        background-size: 26px 26px, 26px 26px;
        background-position: 0 0, 13px 13px;
        opacity: .04;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 0;
    }

/* CONTENT ALWAYS ABOVE BACKGROUND LAYERS */
.account-rail.rail--mesh .container,
.account-rail.rail--mesh .rail-inner,
.account-rail.rail--mesh .rail-more {
    position: relative;
    z-index: 1;
}

/* STATUS ACCENT BAR (left ribbon) */
.account-rail.rail--mesh::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16,185,129,.9), rgba(16,185,129,.6));
    box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
}

.account-rail.rail--mesh[data-status="warn"]::after {
    background: linear-gradient(180deg, rgba(245,158,11,.9), rgba(245,158,11,.6));
}

.account-rail.rail--mesh[data-status="expired"]::after,
.account-rail.rail--mesh[data-status="free"]::after {
    background: linear-gradient(180deg, rgba(239,68,68,.9), rgba(239,68,68,.6));
}

/* TEXT TONES FOR LIGHT MODE ON MESH */
body:not(.dark-mode) .rail-label {
    color: #475569;
    opacity: 1;
}

body:not(.dark-mode) .rail-value {
    color: #0f172a;
}

body:not(.dark-mode) .rail-sep {
    background: rgba(15,23,42,.10);
}

/* Outline-light buttons must look proper on light mesh */
body:not(.dark-mode) .account-rail.rail--mesh .btn-outline-light {
    border-color: rgba(15,23,42,.18);
    color: #0f172a;
    background: rgba(255,255,255,.35);
}

    body:not(.dark-mode) .account-rail.rail--mesh .btn-outline-light:hover {
        background: rgba(255,255,255,.55);
    }

/* Keep your chip sizes tidy */
.days-chip {
    padding: 3px 8px;
    font-weight: 600;
}
/* Strong, readable chips on LIGHT MODE mesh rail */
body:not(.dark-mode) .account-rail.rail--mesh .days-chip {
    background: #eaf0ff; /* cool subtle bg */
    color: #0f172a; /* dark text */
    border: 1px solid rgba(15,23,42,.18); /* clear edge */
    box-shadow: 0 1px 0 rgba(15,23,42,.05);
    font-weight: 700;
}

/* <=10 days (amber) */
body:not(.dark-mode) .account-rail.rail--mesh .days-chip--warn {
    background: #fff7ed; /* orange-50 */
    color: #9a3412; /* orange-800 */
    border-color: #fdba74; /* orange-300 */
}

/* urgent/today (red) */
body:not(.dark-mode) .account-rail.rail--mesh .days-chip--urgent {
    background: #fee2e2; /* red-200 */
    color: #7f1d1d; /* red-900 */
    border-color: #fca5a5; /* red-300 */
}

/* expired (strong red) */
body:not(.dark-mode) .account-rail.rail--mesh .days-chip--expired {
    background: #fee2e2; /* red-200 */
    color: #7f1d1d; /* red-900 */
    border-color: #ef4444; /* red-500 */
    box-shadow: 0 1px 0 rgba(127,29,29,.08);
}

/* Results table chips */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.status-pill--pending {
    background: rgba(59,130,246,.12);
    color: #1e40af;
    border-color: rgba(59,130,246,.28);
}

.status-pill--ok {
    background: rgba(16,185,129,.14);
    color: #065f46;
    border-color: rgba(16,185,129,.35);
}

.status-pill--err {
    background: rgba(239,68,68,.16);
    color: #7f1d1d;
    border-color: rgba(239,68,68,.35);
}

.table td .file-name {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .table td .file-name {
        max-width: 160px;
    }
}

/* Keep the host section contained inside the right column */
#hosts .card-body {
    overflow: hidden;
}

/* Host list bounds */
.host-list {
    width: 100%;
}

/* Each row fills the card width and can shrink */
.host-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0; /* allow shrinking */
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.dark-mode .host-row {
    border-bottom-color: rgba(255,255,255,.08);
}

.host-row:last-child {
    border-bottom: none;
}

/* Left block can shrink */
.host-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* ← important */
}

/* Logo never overflows */
.host-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* If logo fails, show monogram, still fixed size */
.host-monogram {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    background: rgba(0,0,0,.06);
    color: #0f172a;
    flex: 0 0 auto;
}

.dark-mode .host-monogram {
    background: rgba(255,255,255,.1);
    color: #fff;
}

/* Text can ellipsize instead of pushing out */
.host-text {
    min-width: 0; /* ← important */
}

.host-name,
.host-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Status chip stays on one line but wraps if needed on tiny screens */
.status-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Optional: if the list is tall, keep the card tidy with an inner scroll */
@media (min-width: 992px) { /* only on desktop col-lg-4 layout */
    #hosts .host-list {
        max-height: 520px; /* adjust to taste */
        overflow: auto;
    }
}

/* Toast container never overflows */
.toast-container {
    max-width: min(92vw, 380px);
    right: 0 !important;
}

/* Fancy toast */
.toast {
    --t-radius: 14px;
    border-radius: var(--t-radius);
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
    overflow: hidden;
    backdrop-filter: blur(8px);
    transform: translateY(-6px);
    animation: toast-in .28s ease both;
}

    /* Light/dark friendly backgrounds */
    .toast.text-bg-success {
        background: linear-gradient(180deg, rgba(16,185,129,.12), rgba(16,185,129,.10));
        color: #065f46;
        border: 1px solid rgba(16,185,129,.35);
    }

    .toast.text-bg-danger {
        background: linear-gradient(180deg, rgba(239,68,68,.12), rgba(239,68,68,.10));
        color: #7f1d1d;
        border: 1px solid rgba(239,68,68,.35);
    }

    .toast.text-bg-warning {
        background: linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.10));
        color: #7c2d12;
        border: 1px solid rgba(245,158,11,.35);
    }

    .toast.text-bg-info {
        background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.10));
        color: #1e3a8a;
        border: 1px solid rgba(59,130,246,.30);
    }

    .toast.text-bg-secondary {
        background: linear-gradient(180deg, rgba(148,163,184,.16), rgba(148,163,184,.10));
        color: #0f172a;
        border: 1px solid rgba(148,163,184,.35);
    }

@media (prefers-color-scheme: dark) {
    .toast.text-bg-success {
        color: #d1fae5;
    }

    .toast.text-bg-danger {
        color: #fee2e2;
    }

    .toast.text-bg-warning {
        color: #ffedd5;
    }

    .toast.text-bg-info {
        color: #dbeafe;
    }

    .toast.text-bg-secondary {
        color: #e5e7eb;
    }
}

/* Left accent bar per type */
.toast .accent {
    width: 4px;
    align-self: stretch;
    flex: 0 0 4px;
    border-right: 1px solid rgba(0,0,0,.06);
}

.text-bg-success .accent {
    background: linear-gradient(#10b981,#34d399);
}

.text-bg-danger .accent {
    background: linear-gradient(#ef4444,#f87171);
}

.text-bg-warning .accent {
    background: linear-gradient(#f59e0b,#fbbf24);
}

.text-bg-info .accent {
    background: linear-gradient(#3b82f6,#60a5fa);
}

.text-bg-secondary .accent {
    background: linear-gradient(#94a3b8,#cbd5e1);
}

/* Body layout with icon bubble */
.toast .inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 12px 12px 10px;
}

.toast .ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.55);
    color: inherit;
}

@media (prefers-color-scheme: dark) {
    .toast .ico {
        background: rgba(255,255,255,.12);
    }
}

.toast .title {
    font-weight: 800;
    letter-spacing: -.01em;
}

.toast .msg {
    font-size: .925rem;
    opacity: .95;
}

.toast .btn-close {
    filter: invert(0);
}

@media (prefers-color-scheme: dark) {
    .toast .btn-close {
        filter: invert(1);
    }
}

/* Progress bar at bottom */
.toast .progress {
    height: 3px;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    margin-top: 6px;
}

    .toast .progress .bar {
        height: 100%;
        width: 0%;
        background: currentColor;
        opacity: .35;
        transition: width linear;
        border-radius: 0 2px 2px 0;
    }

/* Slide-in */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

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



</style >