:root {
  color-scheme: light;
  --bg: #f3f6f3;
  --surface: #ffffff;
  --surface-soft: #f7f9f7;
  --ink: #172a24;
  --muted: #66776f;
  --line: #dce5df;
  --green: #14634c;
  --green-dark: #0e4c3a;
  --green-soft: #e7f0ea;
  --amber: #8a5a14;
  --amber-soft: #fbf1dd;
  --red: #9a3f39;
  --red-soft: #fbeceb;
  --shadow: 0 16px 40px rgba(27, 57, 45, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55; }
button, textarea, select, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid rgba(20, 99, 76, .24); outline-offset: 2px; }
[hidden] { display: none !important; }
.account-actions { max-width: 1240px; margin: -12px auto 16px; display: flex; justify-content: flex-end; gap: 8px; }
.account-actions .button { min-height: 44px; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 20px; background: #fcfdfc; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; padding: 0 8px 28px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--ink); color: white; font-size: 18px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; }
.brand small { margin-top: 2px; color: var(--muted); font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.nav-list { display: grid; gap: 5px; }
.nav-list a { min-height: 46px; padding: 0 13px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 7px; border-radius: 10px; color: #53645d; text-decoration: none; font-size: 14px; }
.nav-list a:hover { background: var(--surface-soft); color: var(--ink); }
.nav-list a.active { background: var(--green-soft); color: var(--green-dark); font-weight: 700; }
.nav-list a > span:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.nav-count { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: var(--green); color: white; font-size: 10px; }
.scope-note { margin-top: auto; display: flex; align-items: flex-start; gap: 10px; padding: 15px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.scope-note strong, .scope-note small { display: block; }
.scope-note strong { font-size: 12px; }
.scope-note small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.status-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #8c9992; box-shadow: 0 0 0 4px rgba(140,153,146,.12); flex: 0 0 auto; }
.status-dot.ready, .connection-pill.ready .status-dot { background: #2b8b65; box-shadow: 0 0 0 4px rgba(43,139,101,.12); }
.status-dot.warning, .connection-pill.warning .status-dot { background: #b57719; box-shadow: 0 0 0 4px rgba(181,119,25,.12); }
.status-dot.error, .connection-pill.error .status-dot { background: #af4f48; box-shadow: 0 0 0 4px rgba(175,79,72,.12); }

.main { min-width: 0; padding: 28px 38px 90px; }
.topbar { max-width: 1240px; margin: 0 auto 28px; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar h1 { margin: 1px 0 0; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }
.eyebrow { margin: 0; color: #819087; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.connection-pill { min-height: 36px; padding: 8px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.72); color: var(--muted); font-size: 12px; }
.connection-pill .status-dot { margin: 0; }
.page { max-width: 1240px; margin: 0 auto; }
.hero { min-height: 200px; padding: 34px 36px; border-radius: 20px; color: #f4faf6; background: linear-gradient(122deg, #163e31, #235b47 64%, #39735c); box-shadow: var(--shadow); display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; overflow: hidden; position: relative; }
.hero::after { content: "⌁"; position: absolute; right: 10%; top: -56px; font: 240px/1 serif; color: rgba(255,255,255,.045); transform: rotate(-13deg); }
.hero > * { position: relative; z-index: 1; }
.hero h2 { max-width: 620px; margin: 14px 0 8px; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; letter-spacing: -.055em; }
.hero p { max-width: 630px; margin: 0; color: #c8d9d0; font-size: 13px; }
.hero .button-secondary { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: white; backdrop-filter: blur(10px); white-space: nowrap; }
.refresh-controls { min-width: 190px; display: grid; justify-items: stretch; gap: 6px; }
.refresh-controls .button { width: 100%; }
.refresh-controls span { color: #bed0c6; text-align: center; font-size: 9px; }
.refresh-controls span.error { color: #ffd6d2; }
.button-quiet { min-height: 44px; padding: 7px 12px; border-color: rgba(255,255,255,.2); background: transparent; color: #d9e6df; }
.tag { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.tag-green { background: var(--green-soft); color: var(--green-dark); }
.hero .tag-green { background: rgba(232,245,236,.14); color: #d6eadf; }
.tag-amber { background: var(--amber-soft); color: var(--amber); }
.tag-red { background: var(--red-soft); color: var(--red); }
.tag-gray { background: #edf1ee; color: #627169; }

.metric-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card, .card, .task-item, .machine-card { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 7px 24px rgba(27, 57, 45, .03); }
.metric-card { min-height: 170px; padding: 20px; display: flex; flex-direction: column; }
.metric-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.metric-head > span:first-child { color: var(--muted); font-size: 12px; }
.metric-value { margin: 18px 0 2px; font-size: 30px; font-weight: 720; line-height: 1.15; letter-spacing: -.04em; }
.metric-sub { color: var(--muted); font-size: 11px; }
.metric-foot { margin-top: auto; padding-top: 13px; border-top: 1px solid #edf1ee; color: var(--muted); font-size: 10px; }
.progress { height: 6px; margin: 13px 0 8px; overflow: hidden; border-radius: 6px; background: #edf1ee; }
.progress > i { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--green); }
.section-heading { margin: 34px 2px 14px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-heading.compact { margin-top: 0; }
.section-heading h2 { margin: 3px 0 0; font-size: 18px; letter-spacing: -.025em; }
.section-heading > a { color: var(--green); font-size: 12px; text-decoration: none; }
.card-list, .task-list { display: grid; gap: 10px; }
.task-row { min-height: 72px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.task-row .task-main { min-width: 0; flex: 1; }
.task-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.task-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.task-status-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); font: 14px ui-monospace, monospace; }
.machine-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.machine-card { min-height: 125px; padding: 17px; }
.machine-card .metric-head strong { font-size: 13px; }
.machine-card p { min-height: 34px; margin: 14px 0 0; color: var(--muted); font-size: 11px; }
.machine-tools { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.tool-chip { padding: 3px 7px; border-radius: 5px; background: #f0f3f1; color: #596a61; font-size: 9px; }

.button { min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-weight: 650; font-size: 12px; }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button-primary { background: var(--green); color: white; }
.button-primary:hover:not(:disabled) { background: var(--green-dark); }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.button-danger { background: var(--surface); color: var(--red); border-color: #e5c8c6; }

.split-layout { min-height: 580px; display: grid; grid-template-columns: minmax(260px, .8fr) minmax(380px, 1.6fr); gap: 16px; }
.task-column, .detail-column { min-width: 0; }
.task-item { width: 100%; padding: 15px; display: block; text-align: left; color: var(--ink); cursor: pointer; }
.task-item:hover, .task-item.active { border-color: #8db2a1; }
.task-item.active { box-shadow: 0 0 0 2px rgba(20,99,76,.08); }
.task-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.task-item strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; }
.task-item small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.detail-card { height: 100%; min-height: 480px; padding: 20px; display: flex; flex-direction: column; }
.detail-card header { padding-bottom: 15px; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.detail-card header h2 { margin: 3px 0 4px; font-size: 18px; }
.detail-card header p { margin: 0; color: var(--muted); font-size: 10px; }
.messages { padding: 18px 2px; display: grid; align-content: start; gap: 11px; flex: 1; }
.message { max-width: min(82%, 680px); padding: 11px 13px; border-radius: 12px; background: var(--surface-soft); }
.message.user { justify-self: end; background: var(--green); color: white; }
.message.system, .message.tool { border: 1px dashed #cbd6cf; background: transparent; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.message-role { display: block; margin-bottom: 4px; opacity: .68; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-actions { display: flex; justify-content: flex-end; gap: 8px; }
.composer-panel { margin-top: 16px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.composer label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 650; }
.composer-row { display: flex; align-items: stretch; gap: 9px; }
.composer textarea { min-height: 48px; width: 100%; padding: 12px 14px; resize: vertical; border: 1px solid #ccd8d0; border-radius: 10px; background: white; color: var(--ink); line-height: 1.45; }
.composer p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }

.terminal-shell { overflow: hidden; border: 1px solid #213c31; border-radius: 17px; background: #17251f; color: #dce9e0; box-shadow: 0 22px 50px rgba(20,43,34,.13); }
.terminal-toolbar { min-height: 58px; padding: 10px 18px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid #31473e; background: #1c2c25; }
.terminal-toolbar > div { display: flex; align-items: center; gap: 13px; }
.terminal-toolbar strong { font-size: 12px; }
.terminal-toolbar label { display: flex; align-items: center; gap: 8px; color: #9db0a5; font-size: 10px; }
.terminal-toolbar select { max-width: 270px; min-height: 44px; padding: 6px 30px 6px 10px; border: 1px solid #455b51; border-radius: 8px; background: #24362e; color: #e0ebe4; font-size: 11px; }
.terminal-lights { display: flex; gap: 6px; }
.terminal-lights i { width: 8px; height: 8px; border-radius: 50%; background: #496057; }
.terminal-lights i:first-child { background: #b46d58; }.terminal-lights i:nth-child(2) { background: #b79550; }.terminal-lights i:last-child { background: #4c8d6c; }
.context-strip { padding: 12px 18px; display: grid; grid-template-columns: .7fr .7fr 1.6fr 1.4fr; gap: 12px; border-bottom: 1px solid #31473e; background: #1a2923; }
.context-strip span, .context-strip strong { display: block; }
.context-strip > div { min-width: 0; }
.context-strip span { color: #83998d; font-size: 9px; }
.context-strip strong { margin-top: 2px; overflow: hidden; color: #d2dfd7; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.conversation { min-height: 420px; max-height: 58vh; padding: 22px; overflow-y: auto; display: grid; align-content: start; gap: 13px; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.conversation .message { background: #203128; }
.conversation .message.user { background: #295844; }
.conversation .message.system, .conversation .message.tool { border-color: #43584e; color: #a7b8af; background: transparent; }
.terminal-composer { padding: 14px; display: flex; align-items: stretch; gap: 9px; border-top: 1px solid #31473e; background: #1b2a24; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.terminal-composer textarea { resize: none; border-color: #40564c; background: #22332b; color: #e7efe9; }
.terminal-composer textarea::placeholder { color: #7f9589; }
.terminal-composer .button { min-width: 76px; }
.scope-banner { margin-top: 15px; padding: 14px 16px; display: flex; gap: 12px; align-items: baseline; border: 1px solid #e7d9bd; border-radius: 12px; background: #fbf5e9; color: #745724; font-size: 11px; }
.scope-banner strong { white-space: nowrap; }

.approval-stack { display: grid; gap: 9px; padding: 0 20px 14px; }
.approval-card { padding: 14px; border: 1px solid #c8a969; border-radius: 11px; background: #332e23; color: #f0e4c9; }
.detail-card .approval-card { background: var(--amber-soft); color: #684817; }
.approval-card h3 { margin: 0; font-size: 12px; }
.approval-card p { margin: 5px 0 0; color: inherit; opacity: .78; font-size: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.approval-actions { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
.approval-card .button { min-height: 44px; }
.question-block { margin-top: 12px; }
.question-block > label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 650; }
.question-options { display: grid; gap: 5px; }
.question-option { min-height: 44px; padding: 7px 9px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid rgba(139,98,28,.22); border-radius: 8px; cursor: pointer; }
.question-option input { margin-top: 3px; accent-color: var(--green); }
.question-option small { display: block; opacity: .68; font-size: 9px; }
.question-text { min-height: 44px; width: 100%; padding: 9px; border: 1px solid #c7b58f; border-radius: 8px; background: white; color: var(--ink); }

.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.resource-grid > div > .card-list + .card-list { margin-top: 10px; }
.card { padding: 18px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.card-head h3 { margin: 0; font-size: 14px; }
.card-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.data-row { min-height: 48px; padding: 10px 0; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid #edf1ee; }
.data-row:last-child { border-bottom: 0; }
.data-row span { color: var(--muted); font-size: 11px; }
.data-row strong { text-align: right; font-size: 12px; }
.official-link { min-height: 44px; margin-top: 10px; display: inline-flex; align-items: center; color: var(--green); font-size: 11px; font-weight: 700; }

.alert { max-width: 1240px; margin: 0 auto 15px; padding: 12px 14px; border-radius: 10px; font-size: 11px; }
.alert-error { border: 1px solid #e5c8c6; background: var(--red-soft); color: var(--red); }
.empty-state { padding: 32px 20px; border: 1px dashed #cfd9d2; border-radius: 14px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font-size: 13px; }
.empty-state p { margin: 5px auto 0; max-width: 440px; font-size: 10px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 360px; padding: 12px 15px; border-radius: 10px; background: #172a24; color: white; box-shadow: var(--shadow); font-size: 11px; }
.toast.error { background: #873e38; }
.bottom-nav { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1000px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .machine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-layout { grid-template-columns: minmax(240px, .7fr) minmax(340px, 1.3fr); }
  .context-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar { display: none; }
  .main { padding: 20px 16px calc(92px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 20px; }
  .topbar h1 { font-size: 22px; }
  .connection-pill { max-width: 54%; padding: 7px 10px; }
  .connection-pill span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero { min-height: 220px; padding: 26px 23px; display: block; }
  .hero h2 { font-size: 30px; }
  .hero .button { width: 100%; margin-top: 22px; }
  .refresh-controls { margin-top: 22px; }
  .refresh-controls .button { margin-top: 0; }
  .metric-grid, .machine-grid, .resource-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 150px; }
  .split-layout { min-height: 0; display: block; }
  .task-list { grid-template-columns: 1fr; }
  .detail-column { margin-top: 12px; }
  .detail-card { min-height: 440px; }
  .message { max-width: 92%; }
  .composer-row { display: block; }
  .composer-row .button { width: 100%; margin-top: 8px; }
  .terminal-shell { margin: 0 -6px; border-radius: 14px; }
  .terminal-toolbar { align-items: flex-start; }
  .terminal-toolbar label { display: grid; }
  .terminal-toolbar select { max-width: 160px; }
  .context-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .context-strip div:nth-child(3), .context-strip div:nth-child(4) { grid-column: 1 / -1; }
  .context-strip strong { white-space: normal; overflow-wrap: anywhere; }
  .conversation { min-height: 390px; max-height: 52vh; padding: 16px; }
  .terminal-composer { position: sticky; bottom: 0; }
  .shell:has(textarea:focus) + .bottom-nav { display: none; }
  .terminal-composer .button { min-width: 68px; padding: 8px 11px; }
  .scope-banner { align-items: flex-start; }
  .data-row { align-items: flex-start; flex-direction: column; gap: 3px; }
  .data-row strong { text-align: left; overflow-wrap: anywhere; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 15; min-height: 68px; padding: 7px 8px max(8px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; border-top: 1px solid var(--line); background: rgba(252,253,252,.95); backdrop-filter: blur(14px); }
  .bottom-nav a { min-height: 48px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 9px; color: #67786f; text-decoration: none; font-size: 10px; }
  .bottom-nav a span:first-child { font: 13px ui-monospace, monospace; }
  .bottom-nav a.active { color: var(--green); background: var(--green-soft); font-weight: 700; }
  .toast { left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: none; }
}

@media (max-width: 410px) {
  .metric-grid { grid-template-columns: 1fr; }
  .hero h2 { font-size: 27px; }
  .connection-pill { font-size: 10px; }
}

/* Monitoring views retain the existing green cards and mobile navigation. */
.account-actions .button-quiet { color: var(--green-dark); border-color: var(--line); text-decoration: none; display: inline-flex; align-items: center; }
.billing-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 18px; }
.monitor-detail { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
#traffic-cards .card, #resource-subscriptions .card { min-width: 0; }
.metric-sub { overflow-wrap: anywhere; }
@media (max-width: 760px) { .billing-metrics { grid-template-columns: 1fr; } }