:root {
  --bg:#f3f5f7; --surface:#fff; --surface-2:#f6f8fa; --text:#19232f; --muted:#626e7d;
  --accent:#137547; --accent-soft:#eaf6ee; --accent-text:#fff; --border:#dde3e9;
  --ok:#137547; --warn:#946008; --danger:#be3243; --danger-soft:#fff0f1; --warn-soft:#fff6df;
  --sidebar:#111e24; --sidebar-text:#b7c5cd; --shadow:0 2px 8px #16232d04; --ring:#168354;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size:14px; color-scheme:light;
}
:root[data-theme="dark"] { --bg:#10171e; --surface:#18222b; --surface-2:#1e2a34; --text:#edf3f7; --muted:#a2b2c0; --accent:#6bdb9e; --accent-soft:#1f3c31; --accent-text:#10251a; --border:#344450; --ok:#7bdfa7; --warn:#f3c675; --danger:#ff9cab; --danger-soft:#402731; --warn-soft:#3e3526; --sidebar:#0c141a; --ring:#6bdb9e; --shadow:none; color-scheme:dark; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-padding-top:90px; }
body { margin:0; background:var(--bg); color:var(--text); line-height:1.5; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; touch-action:manipulation; transition:background .15s,border-color .15s,color .15s,box-shadow .15s; }
button:disabled { cursor:not-allowed; opacity:.5; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid var(--ring); outline-offset:3px; }
button:not(:disabled):active { filter:brightness(.94); }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { margin:0 0 6px; font-size:30px; line-height:1.2; letter-spacing:-.035em; font-weight:700; }
h2 { font-size:17px; line-height:1.35; margin-bottom:0; font-weight:650; letter-spacing:-.02em; }
h3 { font-size:15px; margin-bottom:0; }
h4 { font-size:14px; margin:0; }
a { color:var(--accent); }
.skip-link { position:fixed; top:-80px; left:16px; z-index:60; padding:12px; background:var(--surface); }
.skip-link:focus { top:12px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:236px; display:flex; flex-direction:column; padding:32px 18px 20px; background:var(--sidebar); color:#fff; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; padding:0 10px; margin-bottom:42px; }
.brand-mark { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#85e3a7; color:#10251a; font-size:26px; font-weight:800; }
.brand strong { display:block; font-size:21px; letter-spacing:.01em; line-height:1.1; }
.brand-dot { color:#85e3a7; }
.brand div>span { display:block; font-size:9px; letter-spacing:.2em; color:var(--sidebar-text); margin-top:5px; }
.nav-label { margin:0 12px 14px; font-size:9px; letter-spacing:.14em; color:var(--sidebar-text); font-weight:600; }
.desktop-nav { display:grid; gap:6px; }
.nav-item { display:flex; align-items:center; gap:12px; min-height:46px; border:0; padding:10px 14px; border-radius:8px; background:transparent; color:var(--sidebar-text); text-align:left; font-weight:550; }
.desktop-nav .nav-item:hover { background:#ffffff09; color:#fff; }
.desktop-nav .nav-item.active { background:#254336; color:#a0edbd; }
.nav-count { margin-left:auto; padding:1px 7px; background:#ffffff13; border-radius:5px; font-size:11px; }
.sidebar-note { border:1px solid #ffffff16; background:#ffffff03; border-radius:12px; padding:18px 15px; margin:48px 8px 24px; }
.sidebar-note .eyebrow { color:#a0edbd; font-size:9px; }
.sidebar-note p { font-size:15px; margin:10px 0 20px; color:#e1e9ed; }
.sidebar-shortcut { display:flex; align-items:center; justify-content:space-between; width:100%; font-size:11px; padding:0; border:0; background:transparent; color:var(--sidebar-text); }
.sidebar-shortcut svg { width:16px; }
.sidebar-user { display:flex; gap:10px; align-items:center; border-top:1px solid #ffffff13; margin-top:auto; padding:20px 10px 0; }
.avatar { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; background:#2f414a; color:#e0edef; border-radius:50%; font-weight:700; }
.sidebar-user strong { display:block; font-size:12px; overflow-wrap:anywhere; }
.sidebar-user small { display:block; color:var(--sidebar-text); font-size:10px; margin-top:3px; }
.workspace { margin-left:236px; }
.topbar { position:sticky; top:0; z-index:10; min-height:76px; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--border); background:var(--surface); }
.breadcrumb { color:var(--muted); font-size:12px; }
.breadcrumb span { margin:0 14px; color:var(--muted); }
.breadcrumb strong { color:var(--text); font-weight:500; }
.header-actions,.button-group,.page-actions { display:flex; gap:12px; align-items:center; }
.global-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.global-search svg { width:16px; color:var(--muted); }
.global-search input { min-height:36px; width:190px; padding:0; border:0; background:transparent; font-size:12px; }
kbd { color:var(--muted); font:9px inherit; white-space:nowrap; border:1px solid var(--border); border-radius:4px; padding:1px 4px; }
.icon-button { width:36px; height:36px; display:inline-grid; place-items:center; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--muted); padding:0; }
.icon-button:hover { background:var(--surface-2); color:var(--text); }
.status-pill { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; color:var(--muted); font-size:11px; }
.status-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--muted); }
.status-pill.online { color:var(--ok); }
.status-pill.online::before { background:var(--ok); }
main { max-width:1600px; margin:auto; padding:32px; min-width:0; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:28px; }
.eyebrow { color:var(--muted); font-size:10px; font-weight:650; letter-spacing:.12em; margin-bottom:10px; }
.section-copy { color:var(--muted); font-size:13px; line-height:1.6; margin-bottom:0; }
.updated-at { color:var(--muted); font-size:11px; white-space:nowrap; }
.primary-button,.secondary-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:38px; border-radius:8px; padding:8px 14px; font-size:12px; font-weight:600; white-space:nowrap; }
.primary-button { border:1px solid var(--accent); background:var(--accent); color:var(--accent-text); }
.primary-button:hover { box-shadow:0 3px 10px #13754725; }
.secondary-button { border:1px solid var(--border); background:var(--surface); color:var(--text); }
.secondary-button:hover { background:var(--surface-2); border-color:var(--muted); }
.primary-button svg,.secondary-button svg,.text-button svg { width:16px; height:16px; }
.text-button { display:inline-flex; align-items:center; gap:8px; padding:6px 4px; min-height:34px; border:0; background:transparent; color:var(--accent); font-weight:550; font-size:12px; }
.text-button:hover { text-decoration:underline; }
.welcome-line { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.welcome-line h2 { font-size:14px; color:var(--muted); font-weight:450; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.metric { border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:20px; min-width:0; box-shadow:var(--shadow); }
.metric-label { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; gap:8px; }
.metric-label svg { width:17px; color:var(--accent); }
.metric strong { display:block; margin-top:12px; font-size:27px; letter-spacing:-.04em; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metric small { display:block; margin-top:10px; color:var(--muted); font-size:11px; }
.metric.highlight { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.metric.highlight .metric-label,.metric.highlight small,.metric.highlight svg { color:var(--accent-text); opacity:.9; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:20px; }
.lower-grid { grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); }
.panel { border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:22px; margin-bottom:20px; min-width:0; box-shadow:var(--shadow); }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.panel-heading p { color:var(--muted); font-size:11px; margin:5px 0 0; }
.panel-heading .eyebrow { margin-bottom:8px; }
.sales-chart { min-height:184px; display:flex; align-items:stretch; gap:5px; padding-top:16px; border-bottom:1px solid var(--border); }
.chart-column { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; background:transparent; color:var(--muted); border:0; padding:0 2px 10px; font-size:9px; }
.chart-column:focus-visible,.chart-column:hover { background:var(--accent-soft); border-radius:4px; }
.chart-bar { display:block; width:min(100%,28px); min-height:2px; height:var(--bar-height); background:var(--accent); border-radius:4px 4px 0 0; opacity:.8; }
.chart-column:nth-last-child(-n+3) .chart-bar { opacity:1; }
.chart-summary { display:flex; gap:28px; padding-top:18px; font-size:12px; color:var(--muted); }
.chart-summary strong { display:block; color:var(--text); font-size:19px; font-variant-numeric:tabular-nums; }
.chart-details { margin-top:12px; font-size:11px; color:var(--muted); }
.chart-details summary { cursor:pointer; width:fit-content; }
.chart-details .table-scroll { max-height:200px; overflow:auto; margin-top:8px; }
.attention-number { display:block; font-size:46px; line-height:1.1; letter-spacing:-.06em; margin-bottom:10px; font-variant-numeric:tabular-nums; }
.status-indicator { width:8px; height:8px; border-radius:50%; background:var(--warn); }
.attention-breakdown { display:grid; gap:10px; margin:18px 0; font-size:12px; }
.attention-breakdown div { display:flex; justify-content:space-between; gap:8px; color:var(--muted); }
.attention-breakdown strong { color:var(--text); }
.full-width { width:100%; }
.list { display:grid; gap:8px; }
.list-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding:14px; border:1px solid var(--border); border-radius:8px; }
.list-item h4 { overflow-wrap:anywhere; }
.list-item p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.list-item .badge { display:inline-flex; margin-bottom:6px; }
.price { font-variant-numeric:tabular-nums; font-weight:600; font-size:13px; white-space:nowrap; }
.item-actions { display:flex; flex-wrap:wrap; gap:8px; grid-column:1/-1; }
.item-actions button { min-height:34px; font-size:11px; padding:6px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.action-card { display:grid; grid-template-columns:26px 1fr; gap:4px 8px; text-align:left; min-height:80px; border:1px solid var(--border); border-radius:8px; padding:14px; background:var(--surface); color:var(--text); }
.action-card:hover { border-color:var(--accent); background:var(--accent-soft); }
.action-card svg { grid-row:span 2; color:var(--accent); }
.action-card strong { font-size:12px; font-weight:550; }
.action-card span { font-size:11px; color:var(--muted); }
.toggle-list { display:grid; gap:0; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); text-align:left; width:100%; padding:12px 0; }
.toggle-row:last-child { border-bottom:0; }
.toggle-row>span:first-child { font-size:12px; font-weight:500; }
.toggle { font-size:10px; color:var(--muted); white-space:nowrap; padding:4px 9px; background:var(--surface-2); border-radius:5px; }
.toggle.on { color:var(--ok); background:var(--accent-soft); }
.toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
label { display:grid; gap:6px; color:var(--muted); font-size:11px; }
.toolbar label { flex:1; min-width:120px; }
.toolbar .search-field { flex:2; min-width:190px; }
input,select,textarea { width:100%; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); padding:9px 11px; min-height:38px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.85; }
textarea { resize:vertical; line-height:1.6; min-height:160px; }
select { width:auto; max-width:100%; }
label select { width:100%; }
.search-field { margin:0; }
.list-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:20px 0 14px; }
.list-tools>div { display:flex; align-items:center; gap:12px; }
.result-count,.list-tools>span { color:var(--muted); font-size:11px; }
.table-scroll { width:100%; overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:12px; text-align:left; }
.data-table th { padding:11px 12px; color:var(--muted); font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:.04em; border-block:1px solid var(--border); background:var(--surface-2); white-space:nowrap; }
.data-table td { padding:15px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tbody tr:hover { background:var(--surface-2); }
.data-table th:first-child,.data-table td:first-child { padding-left:8px; }
.data-table .number { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.data-table .product-cell { min-width:160px; max-width:320px; overflow-wrap:anywhere; }
.data-table strong { font-weight:550; }
.data-table small { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.table-link { display:inline-block; color:var(--accent); border:0; background:transparent; font-size:12px; font-weight:600; padding:5px 0; }
.table-link:hover { text-decoration:underline; }
.table-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; min-width:125px; }
.table-actions button { font-size:10px; min-height:30px; padding:5px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); white-space:nowrap; }
.table-actions button:hover { border-color:var(--accent); color:var(--accent); }
.table-actions .danger { color:var(--danger); }
input[type="checkbox"] { width:16px; height:16px; min-height:16px; accent-color:var(--accent); cursor:pointer; }
.badge { display:inline-flex; align-items:center; width:fit-content; max-width:100%; font-size:10px; font-weight:550; padding:4px 8px; border-radius:5px; line-height:1.4; }
.badge.success,.dot.online { color:var(--ok); background:var(--accent-soft); }
.badge.pending { color:var(--warn); background:var(--warn-soft); }
.badge.failed,.dot.stopped { color:var(--danger); background:var(--danger-soft); }
.badge.neutral,.dot.off { color:var(--muted); background:var(--surface-2); }
.pagination { display:flex; justify-content:center; align-items:center; gap:20px; margin-top:20px; color:var(--muted); font-size:11px; }
.filter-row { display:flex; gap:6px; flex-wrap:wrap; }
.filter { min-height:32px; border:1px solid var(--border); background:var(--surface); color:var(--muted); padding:5px 12px; border-radius:7px; font-size:11px; white-space:nowrap; }
.filter.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.tabs { display:flex; gap:24px; margin-bottom:20px; border-bottom:1px solid var(--border); }
.tab { padding:10px 0 12px; min-height:42px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:13px; font-weight:550; }
.tab.active { border-bottom-color:var(--accent); color:var(--accent); }
.selection-bar { display:flex; align-items:center; gap:16px; padding:12px; margin-bottom:12px; background:var(--accent-soft); border-radius:8px; font-size:12px; }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.service-card { padding:18px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.service-card strong { display:block; margin-bottom:10px; font-size:13px; overflow-wrap:anywhere; }
.dot { display:inline-flex; padding:3px 7px; border-radius:5px; font-size:10px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#finance-summary { display:block; }
.detail-grid { margin:0; }
.detail-grid div { padding:12px; border-radius:8px; background:var(--surface-2); overflow-wrap:anywhere; }
.detail-grid dt { color:var(--muted); font-size:11px; margin-bottom:6px; }
.detail-grid dd { margin:0; font-size:14px; font-variant-numeric:tabular-nums; }
.finance-form { display:grid; gap:14px; align-content:start; }
#view-system .panel>label { margin-bottom:14px; }
.field-hint { font-size:11px; color:var(--muted); line-height:1.6; margin:12px 0 18px; }
code { font-size:.95em; padding:1px 3px; background:var(--surface-2); border-radius:3px; overflow-wrap:anywhere; }
.progress-track { height:8px; background:var(--surface-2); border-radius:5px; overflow:hidden; margin:14px 0; }
.progress-track span { display:block; height:100%; width:var(--progress); background:var(--accent); }
.progress-info { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted); }
.workspace-footer { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:10px; padding:10px 0; margin-top:16px; }
.dialog { width:min(92vw,680px); max-height:88vh; border:1px solid var(--border); border-radius:14px; padding:0; background:var(--surface); color:var(--text); overflow:auto; box-shadow:0 20px 80px #0004; }
.dialog::backdrop { background:#09121ba8; backdrop-filter:blur(3px); }
.dialog form { padding:28px; }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:14px; }
.dialog-heading h2 { font-size:22px; }
.dialog p { color:var(--muted); font-size:13px; line-height:1.6; }
.dialog label { margin-bottom:14px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.dialog-actions .primary-button,.dialog-actions .secondary-button { min-width:120px; }
.digest-preview { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); font:12px/1.7 ui-monospace,monospace; }
.toast { position:fixed; z-index:50; right:28px; bottom:28px; max-width:min(90vw,460px); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:10px; padding:16px 20px; background:var(--surface); color:var(--text); box-shadow:0 8px 30px #0002; font-size:13px; }
.inline-error { padding:14px; border:1px solid var(--danger); border-radius:8px; color:var(--danger); background:var(--danger-soft); margin-bottom:20px; }
.feedback-success { color:var(--ok); font-size:12px; margin-top:10px; }
.feedback-error { color:var(--danger); font-size:12px; margin-top:10px; }
.empty { padding:36px 16px; text-align:center; color:var(--muted); font-size:13px; border:1px dashed var(--border); border-radius:8px; }
.skeleton { min-height:60px; border-radius:10px; background:linear-gradient(90deg,var(--surface-2) 20%,var(--border) 45%,var(--surface-2) 70%); background-size:220% 100%; animation:shimmer 1.5s linear infinite; }
.skeleton.tall { min-height:136px; }
.view { display:none; }
.view.active { display:block; animation:reveal .18s ease-out; }
.bottom-nav { display:none; }
.error-screen { max-width:600px; margin:10vh auto; padding:32px; }
.error-screen .brand-mark { margin-bottom:24px; }
.error-screen p { color:var(--muted); line-height:1.7; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@keyframes shimmer { to { background-position:-220% 0; } }
@keyframes reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1700px) { main { padding:40px 48px; } }
@media(max-width:1250px) { .sidebar { width:210px; } .workspace { margin-left:210px; } main { padding:24px; } .topbar { padding:18px 24px; } .updated-at { display:none; } .page-heading { align-items:flex-start; } .page-actions { flex-wrap:wrap; justify-content:flex-end; } .global-search input { width:150px; } .metric { padding:16px; } .metric strong { font-size:23px; } .dashboard-grid { grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr); } }
@media(max-width:1023px) { .sidebar { display:none; } .workspace { margin-left:0; } main { padding:24px 20px calc(90px + env(safe-area-inset-bottom)); } .topbar { padding:16px 20px; } .bottom-nav { position:fixed; z-index:30; inset:auto 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--border); } .bottom-nav .nav-item { display:grid; justify-items:center; gap:4px; padding:4px; text-align:center; color:var(--muted); font-size:10px; min-height:48px; } .bottom-nav .nav-item.active { color:var(--accent); background:var(--accent-soft); } .toast { bottom:calc(90px + env(safe-area-inset-bottom)); } .global-search input { width:180px; } }
@media(max-width:767px) { h1 { font-size:26px; } .topbar .breadcrumb,.global-search kbd { display:none; } .header-actions { width:100%; } .global-search { flex:1; min-width:0; } .global-search input { width:100%; min-width:0; } .page-heading { display:block; } .page-actions { margin-top:16px; justify-content:flex-start; gap:8px; } .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .dashboard-grid,.lower-grid { grid-template-columns:minmax(0,1fr); gap:0; } .welcome-line { align-items:flex-start; flex-direction:column; gap:8px; } .panel { padding:16px; } .data-table { min-width:630px; } .chart-details .data-table { min-width:0; } .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .toolbar label { min-width:130px; } .toolbar .search-field { flex-basis:100%; } input,select,textarea { font-size:16px; } .global-search input { font-size:14px; } .selection-bar { flex-wrap:wrap; gap:8px; } .workspace-footer { display:block; } .workspace-footer span { display:block; } .dialog form { padding:20px; } .dialog-actions { flex-wrap:wrap; } .chart-column { font-size:8px; padding-inline:0; } .chart-summary { gap:18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }