:root {
    color-scheme: dark;
    --bg: #0d1117;
    --sidebar: #0a0e13;
    --panel: #141a22;
    --panel-2: #19212b;
    --border: #263241;
    --text: #eef4fb;
    --muted: #8fa0b5;
    --accent: #5b8cff;
    --accent-2: #7aa2ff;
    --green: #32c98d;
    --yellow: #f3b947;
    --red: #f06a6a;
    --purple: #aa84ff;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
}

a { color: #9db9ff; text-decoration: none; }
a:hover { color: #c0d0ff; }

button, input, select, textarea { font: inherit; }

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px 1fr;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 22px;
}
.logo strong { display: block; font-size: 17px; }
.logo span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #597df8, #855ef5);
    color: white;
    font-weight: 800;
}
.logo-mark.big { width: 58px; height: 58px; border-radius: 16px; font-size: 24px; margin: auto; }

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.side-nav a {
    padding: 11px 12px;
    border-radius: 8px;
    color: #c2ccda;
}
.side-nav a:hover {
    background: #151d27;
    color: white;
}

.sidebar-user {
    margin-top: auto;
    padding: 14px 8px 3px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.sidebar-user strong { display: block; }
.sidebar-user span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.sidebar-user button {
    border: 0;
    background: transparent;
    color: #9db9ff;
    cursor: pointer;
}

.main-area { min-width: 0; }

.topbar {
    height: 64px;
    border-bottom: 1px solid var(--border);
    background: rgba(13, 17, 23, .88);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.env-badge {
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    letter-spacing: .08em;
}

.content {
    padding: 28px;
    width: min(1600px, 100%);
    margin: 0 auto;
}

.hero-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}
.hero-row h1 { margin: 0 0 5px; font-size: 25px; }
.muted { color: var(--muted); margin: 0; }
.actions { display: flex; gap: 9px; }

.btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
}
.btn:hover { background: #202b38; color: white; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn.primary:hover { background: var(--accent-2); }
.btn.full { width: 100%; }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.panel h2 { font-size: 15px; margin: 0 0 17px; }

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.panel-head h2 { margin: 0; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 17px;
}
.stat-card span { color: var(--muted); font-size: 12px; display: block; }
.stat-card strong { display: block; margin-top: 8px; font-size: 27px; }
.stat-card.good strong { color: var(--green); }
.stat-card.warn strong { color: var(--yellow); }
.stat-card.bad strong { color: var(--red); }

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.list { display: flex; flex-direction: column; }
.list-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.list-row:last-child { border-bottom: 0; }
.list-row strong { display: block; margin-bottom: 3px; }
.list-row span { color: var(--muted); font-size: 12px; }
.list-row .right { text-align: right; }
.list-row small { display: block; color: var(--muted); margin-top: 5px; }

.filter-bar {
    display: grid;
    grid-template-columns: minmax(320px,1fr) 240px auto;
    gap: 10px;
    margin-bottom: 15px;
}
.filter-bar.single { grid-template-columns: minmax(320px,1fr) auto; }

input, select, textarea {
    width: 100%;
    min-height: 40px;
    background: #10161e;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 9px 11px;
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: #587eea;
    box-shadow: 0 0 0 3px rgba(91,140,255,.12);
}
textarea { resize: vertical; }

.table-wrap { padding: 0; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left;
    padding: 13px 15px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
th {
    background: #111820;
    color: #9cabbc;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .06em;
}
tbody tr:hover { background: rgba(255,255,255,.015); }
tbody tr:last-child td { border-bottom: 0; }

.strong-link { color: var(--text); font-weight: 600; }
.mono { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
.break { word-break: break-all; }

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    border: 1px solid transparent;
}
.badge.active {
    color: #65dfad;
    background: rgba(50,201,141,.10);
    border-color: rgba(50,201,141,.22);
}
.badge.expiring {
    color: #ffd06e;
    background: rgba(243,185,71,.10);
    border-color: rgba(243,185,71,.22);
}
.badge.expired, .badge.revoked, .badge.lost {
    color: #ff8d8d;
    background: rgba(240,106,106,.10);
    border-color: rgba(240,106,106,.22);
}
.badge.blocked, .badge.reissue {
    color: #c2a6ff;
    background: rgba(170,132,255,.10);
    border-color: rgba(170,132,255,.22);
}
.badge.archived, .badge.neutral {
    color: #aeb9c8;
    background: rgba(160,175,195,.08);
    border-color: rgba(160,175,195,.18);
}

.person-head {
    display: flex;
    align-items: center;
    gap: 15px;
}
.avatar {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2c4268, #493b70);
    font-weight: 700;
    font-size: 18px;
}
.inline-badges { display: flex; gap: 7px; margin-top: 10px; }

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
}
dl {
    display: grid;
    grid-template-columns: 185px 1fr;
    gap: 10px 15px;
    margin: 0;
}
dt { color: var(--muted); }
dd { margin: 0; }

.mt { margin-top: 16px; }

.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}
.cert-card {
    display: block;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #10161e;
    color: var(--text);
}
.cert-card:hover { border-color: #3b4f69; }
.cert-top, .cert-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.cert-card > span { display: block; color: var(--muted); margin: 11px 0 16px; }
.cert-bottom small { color: var(--muted); }

.form-panel { max-width: 1200px; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 15px 18px;
}
.field.wide { grid-column: 1/-1; }
.field label { display: block; color: #c5d0dd; margin-bottom: 6px; font-size: 12px; }
.form-actions { display: flex; gap: 9px; margin-top: 22px; }
.field-error { color: #ff8e8e; margin-top: 5px; font-size: 12px; }
.error-box {
    background: rgba(240,106,106,.08);
    border: 1px solid rgba(240,106,106,.25);
    color: #ff9a9a;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 15px;
}
.security-note {
    border: 1px solid rgba(243,185,71,.25);
    background: rgba(243,185,71,.06);
    color: #dbc58f;
    border-radius: 8px;
    padding: 13px;
    line-height: 1.5;
}
.empty-state { padding: 24px; text-align: center; color: var(--muted); }

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 30px;
    background:
      radial-gradient(circle at 25% 20%, rgba(91,140,255,.12), transparent 30%),
      radial-gradient(circle at 75% 80%, rgba(170,132,255,.10), transparent 30%),
      var(--bg);
}
.login-wrap { width: min(420px,100%); }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand h1 { margin: 13px 0 5px; }
.login-brand p { color: var(--muted); margin: 0; }
.login-card {
    background: rgba(20,26,34,.94);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.login-card h2 { margin: 0 0 20px; }
.login-card label { display: block; margin: 13px 0 6px; color: #c5d0dd; font-size: 12px; }
.login-card .btn { margin-top: 18px; }

@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .cert-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 850px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; }
    .side-nav { flex-direction: row; flex-wrap: wrap; }
    .sidebar-user { margin-top: 18px; }
    .two-col, .details-grid, .form-grid { grid-template-columns: 1fr; }
    .field.wide { grid-column: auto; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .filter-bar, .filter-bar.single { grid-template-columns: 1fr; }
    .cert-grid { grid-template-columns: 1fr; }
    .hero-row { align-items: flex-start; flex-direction: column; }
    dl { grid-template-columns: 1fr; }
}

.field-help { color: var(--muted); font-size: 11px; margin-top: 6px; line-height: 1.4; }