:root {
    --bg-base:    #0d1117;
    --bg-card:    #161b22;
    --bg-header:  #1c2128;
    --border:     #30363d;
    --text-main:  #c9d1d9;
    --text-muted: #8b949e;
    --green:      #3fb950;
    --blue:       #58a6ff;
    --red:        #f85149;
    --amber:      #d29922;
    --purple:     #bc8cff;
    --navbar-h:   56px;
}

/* ── Base ─────────────────────────────────────────── */
body {
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.9375rem;
}

.main-content { min-height: calc(100vh - var(--navbar-h)); padding: 1.5rem 0; }

/* ── Navbar ──────────────────────────────────────── */
.navbar.bg-dark { background-color: #0d1117 !important; border-bottom: 1px solid var(--border) !important; }
.navbar-brand   { font-size: 1.05rem; letter-spacing: -.02em; }

/* ── Cards ───────────────────────────────────────── */
.card         { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.card-header  { background: var(--bg-header); border-bottom: 1px solid var(--border); }
.card-footer  { background: var(--bg-header); border-top: 1px solid var(--border); }

/* ── Tables ──────────────────────────────────────── */
.table {
    color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(255,255,255,.03);
    --bs-table-border-color: var(--border);
}
.table thead th {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
    padding: .65rem 1rem;
}
.table td { padding: .8rem 1rem; vertical-align: middle; border-bottom: 1px solid rgba(48,54,61,.5); }
.table tr:last-child td { border-bottom: none; }

/* ── Buttons ─────────────────────────────────────── */
.btn-primary   { background: #238636; border-color: #238636; }
.btn-primary:hover { background: #2ea043; border-color: #2ea043; }
.btn-info      { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.btn-info:hover { background: #388bfd; border-color: #388bfd; color: #fff; }

/* ── Forms ───────────────────────────────────────── */
.form-control, .form-select {
    background: var(--bg-base);
    border-color: var(--border);
    color: var(--text-main);
}
.form-control:focus, .form-select:focus {
    background: var(--bg-base);
    border-color: #388bfd;
    color: var(--text-main);
    box-shadow: 0 0 0 3px rgba(56,139,253,.15);
}
.form-control::placeholder { color: #484f58; }
.form-label   { color: var(--text-muted); font-size: .82rem; font-weight: 500; margin-bottom: .3rem; }
.input-group-text { background: #21262d; border-color: var(--border); color: var(--text-muted); }
.form-check-input { background-color: #21262d; border-color: var(--border); }
.form-check-input:checked { background-color: #238636; border-color: #238636; }

/* ── Alerts ──────────────────────────────────────── */
.alert-success { background: rgba(46,160,67,.12); border-color: rgba(46,160,67,.3);  color: var(--green); }
.alert-danger  { background: rgba(248,81,73,.12); border-color: rgba(248,81,73,.3);  color: var(--red);   }
.alert-warning { background: rgba(210,153,34,.12); border-color: rgba(210,153,34,.3); color: var(--amber); }

/* ── Breadcrumb ──────────────────────────────────── */
.breadcrumb { font-size: .82rem; }
.breadcrumb-item a { color: var(--blue); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: #484f58; }

/* ── Page header ─────────────────────────────────── */
.page-header { padding: 1.25rem 0 1rem; border-bottom: 1px solid #21262d; margin-bottom: 1.5rem; }

/* ── Status dots ─────────────────────────────────── */
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.status-dot.online   { background: var(--green);  box-shadow: 0 0 5px var(--green); }
.status-dot.offline  { background: var(--red);    }
.status-dot.suspended { background: var(--amber); }

/* ── Server cards ────────────────────────────────── */
.server-card {
    transition: transform .15s, box-shadow .15s, border-color .15s;
    color: inherit;
    text-decoration: none;
    display: block;
}
.server-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    border-color: #388bfd !important;
    color: inherit;
    text-decoration: none;
}
.stat-num   { font-size: 1.5rem; font-weight: 700; color: var(--blue); line-height: 1; }
.stat-label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── DNS type badges ─────────────────────────────── */
.dns-type { font-family: 'Courier New', monospace; font-size: .72rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.dns-A     { background: rgba(31,111,235,.2);  color: var(--blue);   }
.dns-AAAA  { background: rgba(31,111,235,.2);  color: #79c0ff;       }
.dns-CNAME { background: rgba(46,160,67,.2);   color: var(--green);  }
.dns-MX    { background: rgba(210,153,34,.2);  color: var(--amber);  }
.dns-TXT   { background: rgba(139,94,184,.2);  color: var(--purple); }
.dns-NS    { background: rgba(31,111,235,.15); color: #79c0ff;       }

/* ── Empty state ─────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 2rem; color: #484f58; }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .75rem; }

/* ── Pagination ──────────────────────────────────── */
.page-link  { background: var(--bg-card); border-color: var(--border); color: var(--blue); }
.page-link:hover { background: #21262d; color: var(--blue); }

/* ── Scrollable table ────────────────────────────── */
.table-responsive { border-radius: 8px; }