:root {
    --app-bg: #080b12;
    --app-panel: #0e131d;
    --app-panel-2: #121925;
    --app-border: rgba(148, 163, 184, .13);
    --app-muted: #8491a5;
    --app-text: #f4f7fb;
    --app-accent: #7467f0;
    --app-accent-2: #52d3ff;
    --app-success: #36d399;
    --app-danger: #fb7185;
    --app-warning: #fbbf24;
}

* { scrollbar-width: thin; scrollbar-color: #293244 transparent; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--app-text);
    background:
        radial-gradient(circle at 78% -10%, rgba(82, 211, 255, .08), transparent 26rem),
        radial-gradient(circle at 35% 0%, rgba(116, 103, 240, .11), transparent 30rem),
        var(--app-bg);
    font-family: "DM Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6, .brand { font-family: "Space Grotesk", sans-serif; letter-spacing: -.025em; }
a { color: #9ba8ff; text-decoration: none; }
a:hover { color: #c0c7ff; }
.app-shell { min-height: 100vh; }
.app-sidebar {
    --bs-offcanvas-width: 272px;
    position: fixed;
    inset: 0 auto 0 0;
    width: 272px;
    border-right: 1px solid var(--app-border);
    background: rgba(8, 11, 18, .9);
    backdrop-filter: blur(22px);
    z-index: 1040;
}
.sidebar-inner { display: flex; flex-direction: column; height: 100%; padding: 1.35rem 1rem; }
.brand { display: flex; align-items: center; gap: .8rem; color: #fff; padding: .35rem .55rem 1.8rem; }
.brand:hover { color: #fff; }
.brand-mark {
    position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
    background: linear-gradient(145deg, var(--app-accent), #4d9fff); box-shadow: 0 10px 30px rgba(116, 103, 240, .28);
}
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ""; position: absolute; border: 2px solid #fff; border-radius: 4px; }
.brand-mark::before { width: 17px; height: 13px; }
.brand-mark::after { width: 7px; height: 7px; background: #fff; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1rem; }
.brand small { color: var(--app-muted); font: 500 .67rem "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .13em; }
.sidebar-label { padding: 0 .75rem .55rem; color: #526075; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.sidebar-nav { display: grid; gap: .3rem; }
.sidebar-link { display: flex; align-items: center; gap: .8rem; padding: .72rem .8rem; border: 1px solid transparent; border-radius: 11px; color: #8e9bad; font-size: .9rem; font-weight: 600; transition: .2s ease; }
.sidebar-link svg, .icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-link:hover { color: #e8ecf3; background: rgba(255, 255, 255, .035); }
.sidebar-link.active { color: #fff; border-color: rgba(116, 103, 240, .18); background: linear-gradient(90deg, rgba(116, 103, 240, .17), rgba(116, 103, 240, .05)); box-shadow: inset 3px 0 var(--app-accent); }
.sidebar-link.active svg { color: #9f95ff; }
.sidebar-security { display: flex; align-items: center; gap: .7rem; margin: auto .35rem 1rem; padding: .8rem; border: 1px solid rgba(54, 211, 153, .14); border-radius: 12px; background: rgba(54, 211, 153, .045); }
.sidebar-security strong, .sidebar-security small { display: block; }
.sidebar-security strong { font-size: .72rem; }
.sidebar-security small { color: var(--app-muted); font-size: .67rem; }
.security-pulse, .topbar-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--app-success); box-shadow: 0 0 0 5px rgba(54, 211, 153, .09), 0 0 16px rgba(54, 211, 153, .55); }
.sidebar-user { display: flex; align-items: center; gap: .7rem; padding: .85rem .45rem .1rem; border-top: 1px solid var(--app-border); }
.user-avatar { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; color: #d8d5ff; background: #25233f; font-weight: 700; }
.user-copy { min-width: 0; flex: 1; }
.user-copy strong, .user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { font-size: .8rem; }
.user-copy small { color: var(--app-muted); font-size: .68rem; text-transform: capitalize; }
.icon-button { display: grid; place-items: center; padding: .45rem; color: var(--app-muted); border: 0; border-radius: 9px; background: transparent; }
.icon-button:hover { color: #fff; background: rgba(255,255,255,.06); }
.app-main { min-height: 100vh; margin-left: 272px; }
.app-topbar { height: 66px; display: flex; align-items: center; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid var(--app-border); background: rgba(8, 11, 18, .54); backdrop-filter: blur(18px); }
.topbar-status { display: flex; align-items: center; gap: .65rem; color: #9aa6b8; font-size: .77rem; }
.topbar-status span { width: 6px; height: 6px; box-shadow: 0 0 12px rgba(54,211,153,.7); }
.topbar-date { margin-left: auto; color: #526075; font-size: .72rem; letter-spacing: .08em; }
.app-content { width: min(1540px, 100%); margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.8rem); }
.page-heading { margin-bottom: 1.8rem; }
.page-heading h1, h1.h3 { margin-bottom: .35rem; font-size: clamp(1.65rem, 3vw, 2.15rem); font-weight: 650; }
.page-heading p, .text-secondary { color: var(--app-muted) !important; }
.card {
    --bs-card-bg: linear-gradient(145deg, rgba(18, 25, 37, .94), rgba(13, 18, 28, .94));
    border: 1px solid var(--app-border) !important;
    border-radius: 16px;
    background: var(--bs-card-bg);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .16) !important;
}
.card-header, .card-footer { border-color: var(--app-border); background: rgba(255,255,255,.015) !important; }
.card-header { padding: 1rem 1.25rem; }
.card-footer { padding: .85rem 1.25rem; }
.metric-card { position: relative; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; width: 105px; height: 105px; right: -35px; top: -40px; border-radius: 50%; background: var(--metric-color, var(--app-accent)); opacity: .08; filter: blur(2px); }
.metric-label { color: var(--app-muted); font-size: .76rem; font-weight: 600; }
.metric-value { margin-top: .5rem; font: 600 2.25rem "Space Grotesk", sans-serif; }
.metric-line { width: 28px; height: 3px; margin-top: .8rem; border-radius: 3px; background: var(--metric-color, var(--app-accent)); }
.btn { border-radius: 10px; font-weight: 650; font-size: .86rem; }
.btn-primary { --bs-btn-bg: #6e61e9; --bs-btn-border-color: #6e61e9; --bs-btn-hover-bg: #8074f5; --bs-btn-hover-border-color: #8074f5; box-shadow: 0 9px 24px rgba(110, 97, 233, .22); }
.btn-warning { --bs-btn-bg: #d99b16; --bs-btn-border-color: #d99b16; --bs-btn-hover-bg: #ecad25; --bs-btn-hover-border-color: #ecad25; --bs-btn-color: #100d06; }
.btn-outline-danger { --bs-btn-color: #ff8da0; --bs-btn-border-color: rgba(251,113,133,.35); }
.btn-link { color: var(--app-muted); }
.form-label { color: #acb7c7; font-size: .76rem; font-weight: 650; }
.form-control, .form-select {
    min-height: 43px; color: #edf1f7; border-color: rgba(148,163,184,.16); border-radius: 10px;
    background-color: rgba(6, 9, 15, .62);
}
.form-control:focus, .form-select:focus { color: #fff; border-color: rgba(116,103,240,.75); background-color: #0a0e16; box-shadow: 0 0 0 .2rem rgba(116,103,240,.12); }
.form-control::placeholder { color: #4d596b; }
.form-text { color: #657287; }
.form-check-input { border-color: #435067; background-color: #111722; }
.form-check-input:checked { border-color: var(--app-accent); background-color: var(--app-accent); }
.table { --bs-table-bg: transparent; --bs-table-color: #cbd3df; --bs-table-hover-bg: rgba(116,103,240,.045); --bs-table-hover-color: #fff; }
.table > :not(caption) > * > * { padding: .95rem 1.15rem; border-bottom-color: var(--app-border); }
.table th { color: #657287; font-size: .67rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.table tbody tr:last-child td { border-bottom: 0; }
.badge { padding: .45em .68em; border-radius: 7px; font-weight: 650; letter-spacing: .02em; }
.text-bg-success { color: #76e7bc !important; background: rgba(54,211,153,.12) !important; }
.text-bg-danger { color: #ff93a5 !important; background: rgba(251,113,133,.12) !important; }
.text-bg-warning { color: #ffd36a !important; background: rgba(251,191,36,.12) !important; }
.text-bg-secondary, .text-bg-dark { color: #aab5c5 !important; background: rgba(148,163,184,.1) !important; }
code { padding: .18rem .38rem; border-radius: 5px; color: #a9ccff; background: rgba(82, 211, 255, .07); }
.app-alert { border-radius: 12px; border-width: 1px; }
.alert-success { color: #89eac5; border-color: rgba(54,211,153,.22); background: rgba(54,211,153,.09); }
.alert-danger { color: #ff9bab; border-color: rgba(251,113,133,.22); background: rgba(251,113,133,.09); }
.site-card { transition: transform .2s ease, border-color .2s ease; }
.site-card:hover { transform: translateY(-2px); border-color: rgba(116,103,240,.28) !important; }
.site-domain { font-size: .82rem; }
.site-title-link { color: var(--app-text); }
.site-title-link:hover { color: #b7b0ff; }
.site-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; align-content: flex-start; align-self: flex-start; gap: .35rem; }
.site-meta { margin: 1.25rem 0; padding: 1rem; border: 1px solid rgba(148,163,184,.08); border-radius: 11px; background: rgba(4,7,12,.28); }
.site-meta dt { color: #657287; font-weight: 600; }
.site-meta dd { color: #c8d0dc; }
.btn-outline-info { --bs-btn-color: #71dbff; --bs-btn-border-color: rgba(82,211,255,.3); --bs-btn-hover-color: #071016; --bs-btn-hover-bg: #52d3ff; --bs-btn-hover-border-color: #52d3ff; }
.deployment-options { padding: 1rem; border: 1px solid rgba(116,103,240,.18); border-radius: 12px; background: rgba(116,103,240,.045); }
.deployment-help { color: var(--app-muted); font-size: .73rem; line-height: 1.55; }
.deployment-help strong { color: #b9c2d0; }
.action-description { min-height: 1.2rem; color: var(--app-muted); font-size: .73rem; line-height: 1.45; }
.back-link, .inventory-sync { color: var(--app-muted); font-size: .78rem; }
.empty-state { border-style: dashed !important; }
.component-slug { margin-top: .2rem; color: var(--app-muted); font-size: .72rem; }
.update-version { color: #ffd36a; font-size: .78rem; font-weight: 700; }
.component-actions { display: flex; justify-content: flex-end; gap: .45rem; }
.core-audit-card { border-color: rgba(82,211,255,.16) !important; }
.empty-audit, .audit-warning, .audit-disclaimer { color: var(--app-muted); font-size: .82rem; }
.audit-clean { color: #7be4ba; font-weight: 650; }
.audit-clean small { display: block; margin-top: .35rem; color: var(--app-muted); font-weight: 400; }
.audit-warning { padding: .9rem; border: 1px solid rgba(251,191,36,.2); border-radius: 10px; color: #ffd36a; background: rgba(251,191,36,.06); }
.audit-count { display: flex; align-items: baseline; gap: .65rem; padding: .8rem; border: 1px solid var(--app-border); border-radius: 10px; color: var(--app-muted); font-size: .75rem; background: rgba(4,7,12,.25); }
.audit-count span { font: 650 1.5rem "Space Grotesk", sans-serif; }
.audit-disclaimer { padding: .85rem 1rem; border-left: 3px solid var(--app-warning); background: rgba(251,191,36,.045); }
.audit-table { max-height: 32rem; border: 1px solid var(--app-border); border-radius: 10px; }
.agent-version-warning { color: #ff93a5; font-size: .72rem; }
.agent-version-panel { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; border: 1px solid var(--app-border); border-radius: 12px; background: rgba(4,7,12,.25); }
.agent-version-panel strong, .agent-version-panel span { display: block; }
.agent-version-panel strong { font-size: .8rem; }
.agent-version-panel span { margin-top: .2rem; color: var(--app-muted); font-size: .73rem; }
.agent-version-panel.is-current { border-color: rgba(54,211,153,.2); }
.agent-version-panel.is-outdated { border-color: rgba(251,113,133,.28); background: rgba(251,113,133,.045); }
.webhook-card { position: relative; overflow: hidden; }
.webhook-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--webhook-color); }
.webhook-provider { color: var(--webhook-color); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.webhook-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--app-border); }
.webhook-events { padding: 1rem; border: 1px solid var(--app-border); border-radius: 12px; background: rgba(4,7,12,.24); }
.webhook-events legend { float: none; width: auto; margin: 0 0 .75rem; color: #acb7c7; font-size: .76rem; font-weight: 700; }
.webhook-events .form-check-label { color: #aeb8c7; font-size: .78rem; }
.log-output { min-height: 18rem; max-height: 38rem; overflow: auto; color: #c7d3df; background: #070a0f; white-space: pre-wrap; word-break: break-word; }
.log-error { color: #ff9aaa; }
.log-label { color: var(--app-muted); font: 600 .65rem "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.job-error-preview { display: block; max-width: 32rem; margin-top: .4rem; color: #ff9aaa; font-size: .73rem; line-height: 1.35; }
.job-error-preview:hover { color: #ffc0ca; }
.job-diagnostic { padding: 1rem 1.15rem; border: 1px solid rgba(251,113,133,.25); border-radius: 12px; color: #ffc0ca; background: rgba(251,113,133,.08); }
.job-diagnostic strong { display: block; margin-bottom: .3rem; color: #ff8397; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.exit-code-help { color: var(--app-muted); font-size: .75rem; }
.live-jobs-indicator { display: flex; align-items: center; gap: .6rem; color: #8fa0b5; font-size: .76rem; }
.live-jobs-indicator span { width: 7px; height: 7px; border-radius: 50%; background: var(--app-accent-2); box-shadow: 0 0 0 5px rgba(82,211,255,.08), 0 0 15px rgba(82,211,255,.5); animation: live-pulse 1.5s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; transform: scale(.8); } }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; overflow: hidden; }
.auth-shell::before { content: ""; position: fixed; width: 520px; height: 520px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(116,103,240,.1); filter: blur(100px); pointer-events: none; }
.auth-card { width: min(440px, 100%); position: relative; padding: .3rem; }
.auth-brand { justify-content: center; padding-bottom: 1.6rem; }
.auth-card .card-body { padding: 2rem; }
.auth-kicker { color: #7f8ca0; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; }
.auth-title { margin: .5rem 0 .35rem; font-size: 1.55rem; }
.auth-subtitle { margin-bottom: 1.7rem; color: var(--app-muted); font-size: .86rem; }
.pagination { --bs-pagination-bg: transparent; --bs-pagination-border-color: var(--app-border); --bs-pagination-color: #9ba8ff; --bs-pagination-hover-bg: rgba(116,103,240,.12); --bs-pagination-active-bg: var(--app-accent); }

@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; }
    .app-main { margin-left: 0; }
    .app-topbar { position: sticky; top: 0; z-index: 1020; }
    .offcanvas-header { border-bottom: 1px solid var(--app-border); }
}
@media (max-width: 575.98px) {
    .app-content { padding: 1.15rem; }
    .card-body { padding: 1rem; }
    .table > :not(caption) > * > * { padding: .8rem; }
    .topbar-status { font-size: .7rem; }
    .topbar-date { display: none; }
}