:root {
  color-scheme: light;
  --paper: #fff; --page: #f7f8f1; --pine: #143d30; --ink: #1c2c24;
  --muted: #53675a; --line: #dfe6da; --lime: #def38d;
  font: 15px/1.5 "DM Sans", "Segoe UI", sans-serif;
  background: var(--page); color: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body, h1, h2, p { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a { color: var(--pine); }
:focus-visible { outline: 2px solid #5a8753; outline-offset: 3px; }
.topbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 14px max(18px, calc((100vw - 1220px) / 2)); min-height: 69px; }
.brand { display: flex; gap: 9px; align-items: center; color: var(--pine); font-weight: 750; font-size: 24px; letter-spacing: -.9px; }
.mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: var(--pine); font-size: 23px; flex: none; }
.top-actions { display: flex; gap: 13px; align-items: center; }
.badge { color: #456245; background: #e9eedf; border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
main { width: min(1220px, 100% - 36px); margin: 26px auto 42px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 24px; }
.dashboard, .chat-column { min-width: 0; }
.hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 17px; padding: 25px 26px 28px; min-height: 225px; color: #fafbef; background: var(--pine); }
.hero h1 { font: 400 clamp(38px, 5vw, 58px)/1.05 Georgia, serif; letter-spacing: -.065em; margin: 12px 0; }
.hero p { color: #ecf2e4; max-width: 450px; }
.eyebrow { font-size: 12px; color: #e3efdb; font-weight: 700; }
.orbit { position: absolute; z-index: -1; width: 310px; height: 310px; border-radius: 50%; right: -20px; top: -33px; opacity: .72; background: radial-gradient(circle at center, #e9f8b0 0%, #b7d46b 10%, #5d884f 19%, transparent 20% 29%, #97bc7a6b 29.4% 29.7%, transparent 30% 43%, #97bc7a6b 43.3% 43.7%, transparent 44% 55%, #97bc7a6b 55.4% 55.7%, transparent 56% 66%, #97bc7a6b 66.5% 66.8%, transparent 67%); }
.primary, .lime, .subtle, .suggestions button, .quiet { border: 0; border-radius: 8px; padding: 8px 11px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.primary { background: var(--pine); color: #fff; }
.primary:hover { background: #2d5c48; }
.lime { background: var(--lime); color: var(--pine); margin-top: 17px; }
.lime:hover { background: #edfbb4; }
.subtle, .suggestions button { background: #edf2e9; color: var(--pine); padding: 7px 9px; border: 1px solid #dce7d8; }
.subtle:hover, .suggestions button:hover { background: #e2eddc; }
.quiet { padding: 4px 2px; background: transparent; color: var(--muted); }
.quiet:hover { color: var(--pine); text-decoration: underline; }
.section { margin-top: 23px; }
.section-heading { display: flex; gap: 9px; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.section-heading h2 { font-size: 16px; letter-spacing: -.25px; }
.section-heading > span, .note { color: var(--muted); font-size: 12px; }
.panel { border-radius: 12px; border: 1px solid var(--line); background: var(--paper); min-width: 0; }
.row { padding: 11px 14px; display: flex; align-items: center; gap: 11px; justify-content: space-between; }
.row + .row { border-top: 1px solid #ecf0e8; }
.row > div { min-width: 0; overflow-wrap: anywhere; }
.row strong, .row small { display: block; }
.row strong { font-size: 14px; }
.row small { color: var(--muted); font-size: 12px; }
.row a, .pair a { font-weight: 670; font-size: 12px; white-space: nowrap; }
.empty { padding: 14px; color: var(--muted); }
.notice { border-radius: 9px; padding: 9px 13px; background: #eaf1e4; color: #345342; margin-bottom: 14px; }
.notice.error { background: #fff0e5; color: #694221; }
.assistant { padding: 14px; background: #fff; }
.assistant-heading { display: flex; align-items: center; gap: 9px; }
.assistant-heading p { color: var(--muted); font-size: 12px; }
.assistant-body { background: #f3f6ef; border-radius: 9px; padding: 12px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.input-row { display: flex; gap: 6px; }
input { min-width: 0; flex: 1; border: 1px solid #d8e4d6; border-radius: 8px; background: #fff; color: var(--ink); padding: 8px 9px; }
.pair { margin-top: 9px; padding: 12px; }
.pair p + p { margin-top: 7px; }
.pair code { overflow-wrap: anywhere; background: #eef2e9; padding: 3px 5px; border-radius: 4px; }
.note { margin-top: 10px; }
.login { width: min(560px, 100%); margin: 55px auto 22px; }
.login form { margin-top: 17px; padding: 17px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.login label { display: block; font-weight: 670; margin-bottom: 5px; }
.login + .notice { width: min(560px, 100%); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 820px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 300px; gap: 15px; }
  .hero { padding-inline: 18px; }
  .orbit { right: -110px; opacity: .48; }
}
@media (max-width: 690px) {
  .workspace { grid-template-columns: 1fr; }
  main { margin-top: 15px; }
  .login { margin-top: 32px; }
  .hero { min-height: 195px; }
}