:root {
  color-scheme: light;
  --bg:#eef3f0;
  --panel:#ffffff;
  --panel2:#f6f9f7;
  --line:#d9e2dd;
  --line2:#bdcbc3;
  --text:#17231f;
  --muted:#61716a;
  --faint:#89958f;
  --green:#176047;
  --green2:#23795b;
  --cyan:#167b80;
  --amber:#c76535;
  --red:#bb4f58;
  --blue:#426d9d;
  --shadow:0 26px 70px rgba(32,57,47,.13);
}

html { color-scheme: light; }
body {
  background:
    radial-gradient(circle at 9% 0%,rgba(23,96,71,.09),transparent 30%),
    radial-gradient(circle at 92% 4%,rgba(199,101,53,.08),transparent 26%),
    linear-gradient(rgba(23,96,71,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,96,71,.035) 1px,transparent 1px),
    var(--bg);
  background-size:auto,auto,44px 44px,44px 44px,auto;
}

.topbar {
  height:72px;
  padding:0 30px;
  border-color:rgba(189,203,195,.78);
  background:rgba(247,250,248,.88);
  box-shadow:0 8px 30px rgba(32,57,47,.055);
}
.brand-mark {
  border:0;
  border-radius:13px 4px 13px 4px;
  background:var(--green);
  color:#fff;
  box-shadow:inset 0 -10px 22px rgba(0,0,0,.12);
}
.health-dot { box-shadow:0 0 0 5px rgba(23,96,71,.10); }
.app-shell { grid-template-columns:224px minmax(0,1fr); min-height:calc(100vh - 72px); }
.sidebar {
  top:72px;
  height:calc(100vh - 72px);
  padding:22px 14px;
  border-color:var(--line);
  background:rgba(247,250,248,.78);
}
.nav-item { border-radius:12px 4px 12px 4px; }
.nav-item:hover { background:#fff; }
.nav-item.active {
  border-color:rgba(23,96,71,.20);
  background:#e8f2ed;
  color:var(--green);
  box-shadow:inset 3px 0 var(--green);
}
.content { padding-top:34px; }
.page-head { padding:4px 2px; margin-bottom:24px; }
.page-head h1 { color:#19352b; font-size:34px; letter-spacing:-.035em; }
.eyebrow { color:var(--green); letter-spacing:.11em; }
.btn {
  min-height:38px;
  border-color:var(--line2);
  border-radius:10px 3px 10px 3px;
  background:#fff;
  color:var(--text);
  box-shadow:0 4px 12px rgba(32,57,47,.035);
}
.btn:hover:not(:disabled) { border-color:var(--green); background:#f3f8f5; }
.btn.primary { border-color:var(--green); background:var(--green); color:#fff; }
.btn.primary:hover:not(:disabled) { background:#124e3a; }
.btn.ghost { background:transparent; color:var(--muted); }
.btn.danger { border-color:rgba(187,79,88,.34); background:#fff7f7; color:var(--red); }
.stats-grid { gap:14px; }
.stat {
  min-height:118px;
  padding:18px;
  border-color:var(--line);
  border-radius:16px 4px 16px 4px;
  background:linear-gradient(145deg,rgba(23,96,71,.075),transparent 54%),#fff;
  box-shadow:0 10px 28px rgba(32,57,47,.055);
}
.stat:nth-child(2){background:linear-gradient(145deg,rgba(22,123,128,.075),transparent 54%),#fff}
.stat:nth-child(3){background:linear-gradient(145deg,rgba(66,109,157,.08),transparent 54%),#fff}
.stat:nth-child(4){background:linear-gradient(145deg,rgba(199,101,53,.08),transparent 54%),#fff}
.stat strong { color:var(--text); }
.panel {
  border-color:var(--line);
  border-radius:17px 5px 17px 5px;
  background:rgba(255,255,255,.94);
  box-shadow:0 12px 34px rgba(32,57,47,.06);
}
input,select {
  border-color:var(--line);
  border-radius:10px;
  background:#fbfdfc;
  color:var(--text);
}
input:focus,select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,96,71,.10); }
.bulkbar { border-color:var(--line); background:#f8faf9; }
th { border-color:var(--line); background:#f1f5f3; color:var(--faint); }
td { border-color:#e6ece8; }
tbody tr:hover { background:#f7faf8; }
.topic { border-color:rgba(22,123,128,.22); background:#eef7f7; }
.status-pill { border-color:var(--line); background:#f8faf9; }
.status-pill.succeeded { color:var(--green); }
.status-pill.running,.status-pill.queued,.status-pill.blocked,.status-pill.retry_wait,.status-pill.paused { color:#a14f28; }
.status-pill.failed { color:var(--red); }
.progress { background:#e7ede9; }
.notice { background:#fff5ed; color:#845238; }
.code-card pre,
.share-content pre,
.raw-details pre { border-color:var(--line); background:#f2f6f3; color:#3d5148; }
.workflow-contract { border-color:var(--line); background:#f5f8f6; }
.setting-status span { background:#f7faf8; }
.kv div { border-color:var(--line); }
.drawer {
  border-color:var(--line2);
  background:#f7faf8;
  box-shadow:var(--shadow);
}
.drawer::backdrop { background:rgba(32,48,41,.42); }
.drawer-head { border-color:var(--line); background:rgba(255,255,255,.94); }
.detail-section { border-color:var(--line); border-radius:14px 4px 14px 4px; background:#fff; }
.long-text { color:#33463d; }
.segment,.comment { border-color:var(--line); }
.reply { border-color:var(--line2); background:#f4f7f5; }
.payload-grid>div,.attempt-row { border-color:var(--line); background:#f5f8f6; }
.toast { background:#173128; color:#fff; border-color:#2f5a49; }
.login-body { background-color:var(--bg); }
.login-card {
  padding:38px;
  border-color:var(--line2);
  border-radius:22px 6px 22px 6px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow);
}
.login-card:before { content:"SECURE DATA CONSOLE"; display:block; margin-bottom:20px; color:var(--faint); font:700 10px ui-monospace,monospace; letter-spacing:.14em; }
.login-card h1 { color:var(--text); letter-spacing:-.03em; }
.form-error { color:var(--red); }

@media(max-width:820px){
  .topbar{height:66px;padding:0 14px}.app-shell{min-height:calc(100vh - 66px)}
  .sidebar{background:rgba(249,251,250,.96);box-shadow:0 -8px 24px rgba(32,57,47,.08)}
  .content{padding-top:24px}.page-head h1{font-size:28px}
}
@media(max-width:480px){
  .login-card{padding:26px 22px}.stats-grid{gap:9px}.stat{min-height:96px;padding:13px}
}