:root {
  --canvas: #f6f7f4;
  --surface: #ffffff;
  --surface-soft: #f0f3ef;
  --surface-warm: #fbfaf5;
  --ink: #18201d;
  --ink-soft: #4b5751;
  --muted: #87918b;
  --line: rgba(28, 45, 37, 0.11);
  --line-soft: rgba(28, 45, 37, 0.07);
  --mint: #2b9e76;
  --mint-dark: #167254;
  --mint-soft: #dff4e9;
  --blue: #4d73b7;
  --blue-soft: #e5edf9;
  --amber: #b67a27;
  --amber-soft: #fbedd1;
  --red: #bc5750;
  --shadow: 0 16px 44px rgba(42, 58, 49, 0.07), 0 2px 7px rgba(42, 58, 49, 0.04);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 248px; flex: 0 0 248px; min-height: 100vh; padding: 29px 16px 20px; display: flex; flex-direction: column; background: #eef2ed; border-right: 1px solid var(--line-soft); }
.brand-block { display: flex; align-items: center; gap: 11px; padding: 0 12px 33px; }
.brand-mark { width: 29px; height: 29px; display: flex; gap: 3px; align-items: end; padding: 5px 4px; background: var(--ink); border-radius: 9px; box-shadow: 0 5px 13px rgba(24, 32, 29, .16); }
.brand-mark span { display: block; width: 5px; border-radius: 3px; background: #bfead3; }
.brand-mark span:nth-child(1) { height: 8px; opacity: .8; }.brand-mark span:nth-child(2) { height: 14px; }.brand-mark span:nth-child(3) { height: 19px; opacity: .92; }
.brand-name { font-size: 16px; letter-spacing: -.04em; font-weight: 800; }.brand-subtitle { margin-top: 1px; color: var(--muted); font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.store-switcher { display: flex; align-items: center; gap: 10px; padding: 11px 10px; margin-bottom: 28px; border: 1px solid rgba(28,45,37,.1); border-radius: var(--radius-md); background: rgba(255,255,255,.5); }
.store-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #d7e6d9; color: #2b6148; font-size: 10px; font-weight: 800; }.store-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.store-copy strong { font-size: 11px; letter-spacing: -.02em; white-space: nowrap; }.chevron { margin-left: auto; color: var(--muted); font-size: 16px; }
.eyebrow { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; font-weight: 500; }.main-nav { display: grid; gap: 4px; }.nav-item { display: flex; align-items: center; gap: 11px; min-height: 39px; padding: 0 12px; color: var(--ink-soft); border-radius: 9px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .18s ease, color .18s ease; }.nav-item:hover { background: rgba(255,255,255,.62); color: var(--ink); }.nav-item.active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 7px rgba(42,58,49,.04); }.nav-icon { width: 18px; color: #6e7e75; text-align: center; font-size: 15px; }.nav-item.active .nav-icon { color: var(--mint); }.nav-count { margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: 20px; background: var(--mint-soft); color: var(--mint-dark); font-family: var(--mono); font-size: 9px; text-align: center; }
.sidebar-spacer { flex: 1; }.agent-status { display: flex; align-items: center; gap: 9px; padding: 12px 10px; margin: 12px 0 19px; border: 1px solid rgba(43, 158, 118, .16); border-radius: var(--radius-md); background: rgba(223,244,233,.5); }.status-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(43,158,118,.12); }.agent-status div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }.agent-status strong { font-size: 10px; }.agent-status span { color: var(--muted); font-size: 9px; }.icon-button { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 14px; }.sidebar-footer { display: flex; justify-content: space-between; padding: 0 11px; color: #9ba69f; font-size: 9px; }.help-link { padding: 0; border: 0; background: none; color: var(--ink-soft); font-size: 9px; }
.main-content { min-width: 0; flex: 1; }.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 44px; border-bottom: 1px solid var(--line-soft); background: rgba(246,247,244,.88); }.breadcrumb { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }.breadcrumb b { color: #c5ccc7; font-weight: 400; }.breadcrumb strong { color: var(--ink); font-weight: 700; }.topbar-actions { display: flex; align-items: center; gap: 14px; }.top-action { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-soft); font-size: 11px; font-weight: 700; }.scan-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }.avatar-button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #2a4b3e; color: #e2f2e8; font-size: 9px; font-weight: 800; }
.page-wrap { max-width: 1370px; margin: 0 auto; padding: 42px 44px 28px; }.hero-row { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 33px; }.accent-eyebrow { color: var(--mint-dark); }.hero-row h1 { margin: 11px 0 8px; color: var(--ink); font-size: clamp(29px, 3vw, 40px); letter-spacing: -.065em; line-height: 1.05; font-weight: 800; text-wrap: balance; }.hero-copy { margin: 0; color: var(--ink-soft); font-size: 13px; }.hero-copy strong { color: var(--ink); }.hero-note { width: 332px; padding: 17px 18px 15px; border-left: 2px solid #b9dfc9; background: rgba(223,244,233,.38); }.note-kicker { color: var(--mint-dark); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; }.hero-note p { margin: 8px 0 10px; color: #315244; font-size: 12px; line-height: 1.52; }.hero-note span { color: #769183; font-family: var(--mono); font-size: 9px; }
.metric-strip { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 11px; margin-bottom: 34px; }.metric-card { position: relative; min-height: 148px; padding: 19px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 3px 10px rgba(42,58,49,.025); overflow: hidden; }.primary-metric { background: #f0f7f1; border-color: #dcecdf; }.metric-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }.period { color: #a1aba5; font-size: 8px; letter-spacing: .04em; }.metric-value { margin-top: 12px; font-size: 29px; letter-spacing: -.07em; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }.small-value { font-size: 26px; }.metric-delta { margin-top: 11px; font-family: var(--mono); font-size: 10px; font-weight: 500; }.metric-delta span { color: var(--muted); font-family: var(--sans); font-size: 9px; font-weight: 400; }.positive { color: var(--mint-dark); }.negative { color: var(--red); }.metric-foot { position: absolute; bottom: 17px; left: 20px; right: 20px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }.metric-foot strong { color: var(--ink-soft); font-family: var(--mono); font-weight: 500; }.mini-bars { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: end; gap: 4px; height: 41px; opacity: .75; }.mini-bars i { display: block; width: 5px; border-radius: 3px 3px 1px 1px; background: #8ac9a7; }
.workbench-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 25px; align-items: start; }.opportunity-panel { min-width: 0; }.section-header { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 15px; }.section-header h2 { margin: 7px 0 0; font-size: 18px; letter-spacing: -.045em; }.filter-row { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line-soft); border-radius: 9px; background: #edf0ed; }.filter-button { padding: 6px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; }.filter-button span { margin-left: 3px; color: #a9b2ac; font-family: var(--mono); font-size: 9px; }.filter-button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(42,58,49,.07); }.filter-button.active span { color: var(--mint-dark); }
.opportunity-list { display: grid; gap: 9px; }.opportunity-card { display: grid; grid-template-columns: 38px minmax(0,1fr) 148px; gap: 3px; padding: 19px 18px 18px 15px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }.opportunity-card:hover { border-color: rgba(43,158,118,.28); box-shadow: var(--shadow); transform: translateY(-1px); }.opportunity-card.featured { padding-top: 21px; padding-bottom: 20px; border-color: #c9e8d6; background: linear-gradient(90deg, #fbfefb 0%, #f7fcf8 100%); }.opportunity-index { padding-top: 2px; color: #a4b0a8; font-family: var(--mono); font-size: 10px; }.opportunity-main { min-width: 0; }.opportunity-topline { display: flex; align-items: center; gap: 9px; }.status-pill { padding: 4px 7px 3px; border-radius: 5px; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; font-weight: 500; }.status-pill.ready { background: var(--mint-soft); color: var(--mint-dark); }.status-pill.watching { background: var(--amber-soft); color: #93631d; }.confidence { color: var(--muted); font-family: var(--mono); font-size: 9px; }.opportunity-card h3 { margin: 9px 0 6px; font-size: 14px; letter-spacing: -.035em; }.opportunity-summary { max-width: 650px; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.48; }.evidence-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; color: var(--muted); font-size: 9px; }.evidence-label { color: var(--mint-dark); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }.evidence-separator { color: #c2cbc4; }.opportunity-action { display: flex; gap: 7px; align-items: baseline; margin-top: 14px; padding: 9px 10px; border-radius: 7px; background: #eef7f0; color: #496e5a; font-size: 10px; line-height: 1.35; }.opportunity-action strong { color: var(--mint-dark); font-size: 9px; }.action-icon { color: var(--mint); }.opportunity-side { display: flex; align-items: flex-end; flex-direction: column; padding-top: 9px; }.impact-label { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }.impact-value { margin-top: 6px; color: var(--mint-dark); font-size: 20px; letter-spacing: -.06em; font-weight: 800; }.impact-value span { margin-left: 3px; color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: 0; }.impact-note { margin-top: 3px; color: var(--muted); font-size: 9px; }.approve-button, .text-button { margin-top: auto; padding: 8px 10px; border-radius: 7px; font-size: 10px; font-weight: 700; }.approve-button { border: 1px solid #b9dfc9; background: #e5f7eb; color: var(--mint-dark); }.approve-button:hover { background: #d6f1df; }.text-button { border: 0; background: transparent; color: var(--mint-dark); }.text-button:hover { background: #eef7f0; }.approve-button span, .text-button span, .secondary-button span, .primary-button span { margin-left: 5px; font-size: 13px; }
.right-rail { display: grid; gap: 12px; }.agent-card, .experiment-card, .log-card { padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); }.agent-card { background: #17352a; border-color: #17352a; color: white; }.agent-card-header { display: flex; align-items: center; gap: 10px; }.agent-card .eyebrow { color: #8cae9c; }.agent-card h3 { margin: 4px 0 0; font-size: 16px; letter-spacing: -.04em; }.agent-orb { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #234d3b; }.agent-orb::before, .agent-orb::after, .agent-orb span { content: ""; position: absolute; border: 1px solid #94d5af; border-radius: 50%; }.agent-orb::before { width: 19px; height: 19px; opacity: .7; }.agent-orb::after { width: 10px; height: 10px; opacity: .9; }.agent-orb span { width: 4px; height: 4px; background: #b8f0ca; border: 0; }.live-badge { margin-left: auto; padding: 4px 6px; border-radius: 4px; background: rgba(189,240,207,.15); color: #a9e4bd; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }.agent-card > p { margin: 17px 0 18px; color: #c5dbcd; font-size: 11px; line-height: 1.55; }.agent-stat { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(191,232,207,.12); color: #a9c4b4; font-size: 10px; }.agent-stat strong { color: #eefaf1; font-family: var(--mono); font-size: 10px; font-weight: 500; }.mint-text { color: #a7e6bb !important; }.full-width { width: 100%; margin-top: 12px; }.secondary-button, .primary-button { min-height: 34px; padding: 0 12px; border-radius: 7px; font-size: 10px; font-weight: 700; }.secondary-button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); }.agent-card .secondary-button { border-color: rgba(191,232,207,.2); background: rgba(255,255,255,.06); color: #d7eee0; }.secondary-button:hover { background: #f4f7f3; }.agent-card .secondary-button:hover { background: rgba(255,255,255,.13); }.primary-button { border: 1px solid var(--mint); background: var(--mint); color: white; }.primary-button:hover { background: var(--mint-dark); }.section-mini-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }.small-link { padding: 0; border: 0; background: none; color: var(--mint-dark); font-size: 9px; font-weight: 700; }.experiment-item, .log-item { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--line-soft); }.experiment-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; font-size: 12px; }.experiment-icon.green { background: var(--mint-soft); color: var(--mint-dark); }.experiment-icon.blue { background: var(--blue-soft); color: var(--blue); }.experiment-icon.amber { background: var(--amber-soft); color: var(--amber); }.experiment-item > div:nth-child(2), .log-item > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.experiment-item strong, .log-item strong { font-size: 10px; }.experiment-item span, .log-item span { color: var(--muted); font-size: 9px; }.experiment-result { margin-left: auto; color: var(--mint-dark); font-family: var(--mono); font-size: 9px; }.experiment-result.muted { color: var(--muted); }.log-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; }.log-dot.mint { background: var(--mint); }.log-dot.blue { background: var(--blue); }.log-dot.gray { background: #aab4ae; }.log-item time { margin-left: auto; color: #aab4ae; font-family: var(--mono); font-size: 8px; }.page-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 33px; padding-top: 17px; border-top: 1px solid var(--line-soft); color: #a1aba5; font-size: 9px; }.footer-links { display: flex; gap: 14px; }.footer-links a { color: var(--ink-soft); text-decoration: none; }.tiny-status { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--mint); }
.review-dialog { width: min(680px, calc(100vw - 30px)); padding: 0; border: 0; border-radius: 17px; background: var(--surface-warm); color: var(--ink); box-shadow: 0 28px 90px rgba(21,45,35,.23); }.review-dialog::backdrop { background: rgba(13,30,23,.38); backdrop-filter: blur(3px); }.dialog-top { display: flex; justify-content: space-between; gap: 20px; padding: 27px 30px 20px; border-bottom: 1px solid var(--line-soft); }.dialog-top h2 { max-width: 500px; margin: 9px 0 0; font-size: 22px; letter-spacing: -.06em; line-height: 1.12; }.close-button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #eff1ed; color: var(--ink-soft); font-size: 20px; line-height: 1; }.dialog-body { padding: 22px 30px 25px; }.decision-banner { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid #c6e6d1; border-radius: 9px; background: #edf8f0; }.decision-icon { color: var(--mint); font-size: 18px; }.decision-banner div { display: flex; flex-direction: column; gap: 3px; }.decision-banner strong { color: var(--mint-dark); font-size: 11px; }.decision-banner span { color: #709080; font-size: 9px; }.comparison { display: grid; grid-template-columns: 1fr 23px 1fr; gap: 13px; align-items: center; margin: 22px 0; }.comparison-panel { min-width: 0; }.comparison-arrow { color: var(--mint); font-size: 19px; text-align: center; }.collection-preview { height: 127px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: white; }.preview-head { display: flex; justify-content: space-between; color: var(--ink); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }.preview-head span { color: var(--muted); font-size: 8px; letter-spacing: 0; }.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 13px; }.preview-grid i { display: block; height: 62px; border-radius: 4px; background: #d6ddd7; }.preview-grid i:nth-child(2) { background: #c6d2c9; }.preview-grid i:nth-child(3) { background: #e3d9cf; }.preview-grid i:nth-child(4) { background: #dad0c7; }.preview-grid i:nth-child(5) { background: #cad5cf; }.preview-grid i:nth-child(6) { background: #e0e4de; }.proposed-preview { background: #f1f8f2; border-color: #c9e8d6; }.preview-groups { display: grid; gap: 7px; margin-top: 13px; }.preview-groups b { display: flex; justify-content: space-between; padding: 6px 7px; border-radius: 4px; background: white; color: #49745b; font-size: 9px; }.preview-groups small { color: #8ba797; font-family: var(--mono); font-size: 8px; font-weight: 400; }.reasoning { padding: 13px 14px; border-radius: 9px; background: #f0f3ef; }.reasoning-title { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }.confidence-high { color: var(--mint-dark); }.reasoning p { margin: 9px 0 10px; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }.reasoning-data { display: flex; gap: 12px; color: #87968c; font-family: var(--mono); font-size: 8px; }.dialog-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 30px 22px; border-top: 1px solid var(--line-soft); }.toast { position: fixed; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid #bde1ca; border-radius: 9px; background: #f0fbf3; box-shadow: var(--shadow); color: var(--mint-dark); font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); color: white; font-size: 10px; }
@media (max-width: 1120px) { .sidebar { width: 214px; flex-basis: 214px; }.topbar { padding: 0 28px; }.page-wrap { padding-left: 28px; padding-right: 28px; }.workbench-grid { grid-template-columns: minmax(0, 1fr) 260px; }.opportunity-card { grid-template-columns: 28px minmax(0,1fr) 125px; }.impact-value { font-size: 17px; } }
@media (max-width: 900px) { .sidebar { width: 68px; flex-basis: 68px; padding-left: 10px; padding-right: 10px; }.brand-block { justify-content: center; padding: 0 0 28px; }.brand-block > div:last-child, .store-copy, .chevron, .nav-item:not(.active)::after, .nav-item { font-size: 0; }.store-switcher { justify-content: center; padding: 8px; }.main-nav { justify-items: center; }.nav-item { width: 42px; justify-content: center; padding: 0; }.nav-icon { font-size: 16px; }.nav-count, .agent-status > div:nth-child(2), .agent-status .icon-button, .sidebar-footer { display: none; }.agent-status { justify-content: center; padding: 13px 0; }.workbench-grid { grid-template-columns: 1fr; }.right-rail { grid-template-columns: repeat(3, 1fr); }.agent-card { grid-column: 1 / -1; }.hero-note { width: 290px; } }
@media (max-width: 680px) { .topbar { height: 60px; padding: 0 17px; }.breadcrumb span, .breadcrumb b { display: none; }.page-wrap { padding: 30px 17px 20px; }.hero-row { display: block; }.hero-note { width: auto; margin-top: 23px; }.metric-strip { grid-template-columns: 1fr 1fr; }.primary-metric { grid-column: 1 / -1; }.workbench-grid { gap: 17px; }.section-header { display: block; }.filter-row { width: fit-content; margin-top: 14px; }.opportunity-card { grid-template-columns: 25px minmax(0,1fr); }.opportunity-side { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 11px; padding-top: 13px; }.impact-note { margin-top: 9px; }.approve-button, .text-button { margin-top: 2px; margin-left: auto; }.right-rail { grid-template-columns: 1fr; }.page-footer { display: block; }.footer-links { margin-top: 11px; }.comparison { gap: 5px; }.dialog-top, .dialog-body, .dialog-footer { padding-left: 20px; padding-right: 20px; } }