:root {
    --green-950: #052e1b;
    --green-900: #0a3d25;
    --green-800: #0d5630;
    --green-700: #14743f;
    --green-600: #1b8f4b;
    --green-100: #dff5e7;
    --green-50: #f1fbf5;
    --border: #d7e2da;
    --text: #18231d;
    --muted: #637169;
    --surface: #ffffff;
    --background: #f4f7f5;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
    color: var(--text);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { background: var(--background); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.density-comfortable { font-size: 14px; }
.density-comfortable th, .density-comfortable td { height: 39px; }
.density-comfortable .nav-item { min-height: 37px; }

.app-shell { display: grid; grid-template-columns: 218px minmax(0, 1fr); width: 100vw; height: 100vh; overflow: hidden; }
.sidebar { display: flex; flex-direction: column; min-height: 0; padding: 10px 8px; color: #edf8f1; background: linear-gradient(180deg, var(--green-950), var(--green-900)); }
.brand, .login-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.brand { height: 42px; padding: 0 8px 9px; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.brand-mark { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #062f1c; background: #63dc8e; font-size: 15px; font-weight: 800; }
nav { min-height: 0; overflow-y: auto; padding-top: 8px; }
.nav-item { display: flex; align-items: center; min-height: 32px; padding: 0 9px; margin: 1px 0; border-radius: 5px; color: #d8ece0; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgb(109 231 149 / 14%); }
.nav-item.disabled { opacity: .58; cursor: default; }
.nav-section { display: block; padding: 13px 9px 4px; color: #8fb49d; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.sidebar-bottom { margin-top: auto; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / 12%); }
.main-area { min-width: 0; min-height: 0; display: grid; grid-template-rows: 44px minmax(0, 1fr); }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.content { min-width: 0; overflow: auto; padding: 12px; }
.compact-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.metric { display: flex; justify-content: space-between; align-items: center; min-height: 50px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
.metric span { color: var(--muted); }
.metric strong { color: var(--green-700); font-size: 18px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.panel.narrow { max-width: 600px; padding: 15px; }
.panel-spaced { margin-top: 10px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; min-height: 39px; padding: 0 11px; border-bottom: 1px solid var(--border); }
h1 { margin: 0; font-size: 14px; }
.panel-heading span, .muted { color: var(--muted); }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { height: 33px; padding: 0 10px; text-align: left; border-bottom: 1px solid #e8eee9; }
th { color: #526158; background: #f8faf8; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
form p { margin: 10px 0; }
label { display: block; margin: 9px 0 4px; color: #334139; font-weight: 600; }
input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #bdcbc1; border-radius: 5px; background: #fff; }
textarea { width: 100%; min-height: 66px; padding: 7px 9px; resize: vertical; border: 1px solid #bdcbc1; border-radius: 5px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #8bdba7; border-color: var(--green-600); }
button { width: 100%; height: 35px; margin-top: 12px; border: 0; border-radius: 5px; color: #fff; background: var(--green-700); font-weight: 700; cursor: pointer; }
button:hover { background: var(--green-800); }
.inline-form { margin: 0; }
.small-button { width: auto; height: 27px; margin: 0; padding: 0 9px; font-size: 12px; }
.status-strip { display: flex; align-items: center; gap: 10px; min-height: 38px; margin-bottom: 9px; padding: 0 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--green-50); }
.status-strip span { color: var(--muted); }
code { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.state { display: inline-block; padding: 2px 6px; border-radius: 9px; background: #e7ece9; font-size: 11px; }
.state-success { color: #07592d; background: #dff5e7; }
.state-failed { color: #8b2020; background: #fee4e4; }
.state-current, .state-released { color: #07592d; background: #dff5e7; }
.state-stale, .state-release_pending { color: #73510a; background: #fff1c7; }
.state-missing, .state-quarantined { color: #8b2020; background: #fee4e4; }
.state-deleted, .state-expired { color: #4f5b54; background: #e7ece9; }
.state-pending { color: #73510a; background: #fff1c7; }
.state-actioned { color: #07592d; background: #dff5e7; }
.state-dismissed { color: #4f5b54; background: #e7ece9; }
.deploy-form { margin: 0 0 10px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.deploy-form label { margin-top: 0; }
.deploy-controls { display: grid; grid-template-columns: minmax(240px, 1fr) 110px; gap: 7px; }
.deploy-button { margin: 0; height: 34px; }
.branch-row { cursor: pointer; }
.branch-row:hover, .branch-row.selected { background: var(--green-50); }
.branch-row:focus { outline: 2px solid #8bdba7; outline-offset: -2px; }
.deploy-dialog { width: min(620px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 24px 80px rgb(5 46 27 / 24%); }
.deploy-dialog::backdrop { background: rgb(3 24 14 / 48%); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--green-50); }
.dialog-close { width: 28px; height: 28px; margin: 0; padding: 0; color: var(--green-900); background: transparent; font-size: 20px; }
.dialog-close:hover { background: var(--green-100); }
.deploy-details { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 7px 10px; margin: 0; padding: 13px; }
.deploy-details dt { color: var(--muted); }
.deploy-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.deploy-error { margin: 0 13px 10px; padding: 9px; color: #7c1d1d; background: #fee7e7; border-radius: 5px; }
.deploy-error pre { margin: 5px 0 0; white-space: pre-wrap; font: 12px/1.4 "Cascadia Mono", Consolas, monospace; }
#deploy-wait { margin: 0; padding: 0 13px 13px; }
.split-view { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); gap: 10px; align-items: start; }
.split-view.wide-form { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.form-panel { padding: 12px; overflow: visible; }
.form-panel h1 { padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.client-split { display: grid; grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); gap: 10px; align-items: start; }
.section-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.section-title h1 { padding: 0; border: 0; }
.text-link, .small-link { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }
.small-link { font-size: 12px; font-weight: 700; }
.danger-zone { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0d4d4; }
.danger-button { margin: 0; color: #8b2020; background: #fee4e4; }
.danger-button:hover { background: #f9cccc; }
.agenda-column { min-width: 0; }
.event-list { display: grid; }
.event-row { display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 54px; padding: 6px 11px; border-bottom: 1px solid #e8eee9; }
.event-row:last-child { border-bottom: 0; }
.event-date { display: grid; justify-items: center; color: var(--green-800); line-height: 1; }
.event-date strong { font-size: 18px; }
.event-date span { margin-top: 3px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.event-body { display: grid; gap: 3px; min-width: 0; }
.event-body strong, .event-body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-body span { color: var(--muted); font-size: 12px; }
.event-list.subdued { opacity: .72; }
.empty-inline { margin: 0; padding: 18px 11px; color: var(--muted); }
.preferences-grid { display: grid; grid-template-columns: minmax(320px, 520px) minmax(240px, 360px); gap: 10px; align-items: start; }
.preference-card { padding: 12px; }
.preference-card p { margin: 8px 0 14px; }
.primary-link { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 5px; color: #fff; background: var(--green-700); font-weight: 700; }
.empty-state { display: grid; justify-items: center; align-content: center; min-height: calc(100vh - 70px); color: var(--muted); text-align: center; }
.empty-state h1 { margin: 10px 0 3px; color: var(--text); }
.empty-state p { margin: 0; }
.helptext { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
select { width: 100%; height: 34px; padding: 0 7px; border: 1px solid #bdcbc1; border-radius: 5px; background: #fff; }
input[type="checkbox"] { width: 15px; height: 15px; vertical-align: middle; }
input[type="radio"] { width: 15px; height: 15px; vertical-align: middle; }
.message, .notice { padding: 8px 10px; margin: 0 0 9px; border-radius: 5px; background: var(--green-100); }
.message.error { color: #7c1d1d; background: #fee7e7; }
.notice.warning { color: #6d4b06; background: #fff1c7; }
.antivirus-state { justify-content: flex-start; }
.filter-bar { display: grid; grid-template-columns: minmax(260px, 1fr) 190px 90px; gap: 7px; margin-bottom: 10px; }
.filter-bar button { height: 34px; margin: 0; }
.security-notice { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 8px; padding: 9px 11px; border: 1px solid #f0caca; border-left: 4px solid #b52b2b; border-radius: 6px; background: #fff7f7; }
.security-notice p { margin: 3px 0; }
.security-notice span { color: var(--muted); font-size: 11px; }
.security-notice form { flex: 0 0 auto; }
.detail-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 35px; margin-bottom: 8px; }
.quarantine-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); gap: 10px; align-items: start; }
.evidence-grid { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 7px 10px; margin: 0; padding: 12px; }
.evidence-grid dt { color: var(--muted); }
.evidence-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.safe-preview { margin: 0 12px 12px; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.safe-preview > strong { display: block; padding: 7px 9px; background: #f6f8f6; border-bottom: 1px solid var(--border); }
.safe-preview pre { max-height: 320px; margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 12px/1.45 "Cascadia Mono", Consolas, monospace; }
.decision-panel { padding: 12px; }
.decision-panel > h1 { margin-bottom: 9px; }
.event-history { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.event-history h1 { margin-bottom: 6px; }
.event-history div { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px solid #e8eee9; }
.event-history span { color: var(--muted); font-size: 11px; }
.mail-layout { display: grid; grid-template-columns: 170px minmax(360px, .9fr) minmax(320px, 1.1fr); gap: 8px; height: calc(100vh - 69px); min-height: 360px; }
.mail-folders { padding: 8px; }
.mail-folders > strong { display: block; padding: 11px 7px 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.compose-button { margin: 0 0 5px; }
.compose-button:disabled { opacity: .55; cursor: not-allowed; }
.folder { display: flex; align-items: center; min-height: 30px; padding: 0 8px; border-radius: 4px; color: #405047; }
.folder.active { color: var(--green-900); background: var(--green-100); font-weight: 700; }
.message-list-panel, .mail-preview { min-height: 0; }
.mail-list { height: calc(100% - 40px); overflow: auto; }
.mail-row { display: grid; grid-template-columns: minmax(105px, .7fr) minmax(150px, 1.5fr) 62px 24px; gap: 8px; align-items: center; min-height: 48px; padding: 5px 7px 5px 10px; border-bottom: 1px solid #e8eee9; cursor: default; }
.mail-row:hover, .mail-row.selected { background: var(--green-50); }
.mail-sender, .mail-summary strong, .mail-summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-summary { display: grid; gap: 2px; min-width: 0; }
.mail-summary span, .mail-row time { color: var(--muted); font-size: 11px; }
.mail-more { width: 24px; height: 26px; margin: 0; padding: 0; color: var(--green-900); background: transparent; font-size: 18px; }
.mail-more:hover { background: var(--green-100); }
.mail-empty { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 160px; padding: 20px; color: var(--muted); text-align: center; }
.mail-preview .mail-empty { height: 100%; }
.mail-context-menu { position: fixed; z-index: 20; width: 175px; padding: 4px; border: 1px solid var(--border); border-radius: 6px; background: #fff; box-shadow: 0 12px 35px rgb(5 46 27 / 20%); }
.mail-context-menu button { height: 31px; margin: 0; padding: 0 9px; color: #8b2020; background: transparent; text-align: left; }
.mail-context-menu button:hover { background: #fee4e4; }
.spam-review-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .75fr); gap: 10px; align-items: start; }
.secondary-button { color: var(--green-900); background: var(--green-100); }
.secondary-button:hover { background: #ccebd7; }
.relative-time { margin-left: 3px; color: var(--green-700); font-size: 11px; white-space: nowrap; }
.monitor-stale { color: #7c1d1d; background: #fee7e7; border-color: #f0caca; }
.monitor-metrics { margin-bottom: 10px; }
.monitor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.monitor-wide { grid-column: 1 / -1; }
.chart-panel canvas { display: block; width: 100%; height: 150px; padding: 4px 10px 10px; }
.chart-legend { display: flex; gap: 14px; padding: 8px 11px 0; font-size: 11px; }
.chart-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.chart-legend .cpu::before { background: #14743f; }
.chart-legend .memory::before { background: #3a78b8; }
.chart-legend .disk::before { background: #b87916; }
.monitor-alerts { max-height: 215px; overflow: auto; }
.monitor-alert { display: grid; gap: 2px; min-height: 43px; padding: 7px 10px; border-bottom: 1px solid #e8eee9; border-left: 3px solid #d29b31; }
.monitor-alert span { color: var(--muted); font-size: 11px; }
.monitor-alert.severity-critical, .monitor-alert.severity-error { border-left-color: #bd3131; background: #fff8f8; }
.bar-list { display: grid; gap: 9px; padding: 10px 11px; }
.bar-row > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.bar-row span { color: var(--muted); font-size: 11px; }
.bar-track { height: 6px; overflow: hidden; border-radius: 4px; background: #e4ebe6; }
.bar-track > span { display: block; height: 100%; border-radius: inherit; background: var(--green-600); }
.bar-track > span.warning { background: #d59425; }
.bar-track > span.critical { background: #bf3535; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.service-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 38px; padding: 0 10px; border-right: 1px solid #e8eee9; border-bottom: 1px solid #e8eee9; }
.service-item > span { width: 8px; height: 8px; border-radius: 50%; }
.service-item small { color: var(--muted); }
.service-ok { background: #22a456; box-shadow: 0 0 0 3px #dff5e7; }
.service-down { background: #c43636; box-shadow: 0 0 0 3px #fee4e4; }
.service-missing { background: #9aa49e; box-shadow: 0 0 0 3px #e7ece9; }
.login-page { display: grid; place-items: center; width: 100vw; height: 100vh; padding: 16px; background: radial-gradient(circle at top, #e3f5e9, #f4f7f5 55%); }
.login-card { width: min(350px, 100%); padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 18px 55px rgb(6 47 28 / 10%); }
.login-brand { font-size: 15px; }
.login-card .muted { margin: 7px 0 14px 36px; }
.errorlist { margin: 4px 0; padding-left: 18px; color: #9a2828; }

@media (max-width: 900px) {
    .compact-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .mail-layout { grid-template-columns: 145px minmax(0, 1fr); }
    .mail-preview { display: none; }
    .service-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 680px) {
    .app-shell { grid-template-columns: 64px minmax(0, 1fr); }
    .brand span:last-child, .nav-section, .sidebar-bottom .nav-item, .nav-item { font-size: 0; }
    .brand { justify-content: center; padding-inline: 0; }
    .nav-item { justify-content: center; padding: 0; }
    .nav-item::before { content: "•"; font-size: 18px; }
    .compact-grid { grid-template-columns: 1fr; }
    .deploy-controls { grid-template-columns: 1fr; }
    .filter-bar, .split-view, .split-view.wide-form, .client-split, .preferences-grid, .quarantine-layout, .spam-review-layout { grid-template-columns: 1fr; }
    .security-notice { align-items: flex-start; }
    .mail-layout { grid-template-columns: 1fr; height: auto; }
    .mail-folders { display: none; }
    .mail-list { max-height: calc(100vh - 130px); }
    .mail-row { grid-template-columns: minmax(85px, .7fr) minmax(120px, 1.5fr) 24px; }
    .mail-row time { display: none; }
    .monitor-grid { grid-template-columns: 1fr; }
    .monitor-wide { grid-column: auto; }
    .service-grid { grid-template-columns: 1fr; }
}