:root {
  --ink: #17201a;
  --muted: #68746b;
  --faint: #939b94;
  --paper: #f5f6f2;
  --surface: #ffffff;
  --surface-2: #f0f2ed;
  --line: #e1e5de;
  --line-dark: #cbd1c9;
  --pine: #163d2b;
  --pine-2: #245a41;
  --lime: #b9ef5b;
  --lime-soft: #e9f8cb;
  --amber: #e7a93d;
  --rose: #d96d72;
  --blue: #5678c6;
  --shadow: 0 12px 36px rgba(19, 34, 24, .08);
  --radius: 16px;
  --font: Inter, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.mobile-only { display: none !important; }

.app-view { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 242px; display: flex; flex-direction: column; padding: 22px 16px 16px; color: #edf4ef; background: #101914; border-right: 1px solid rgba(255,255,255,.07); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 25px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #142017; background: var(--lime); border-radius: 11px 5px 11px 5px; font: 800 19px/1 serif; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.brand b { display: block; font-size: 17px; letter-spacing: .12em; }
.brand small { display: block; margin-top: -2px; color: #89978e; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.primary-nav { display: grid; gap: 4px; }
.nav-section-label { margin: 20px 12px 7px; color: #68776e; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; color: #9fac9f; border-radius: 10px; font-weight: 600; transition: .18s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: #eff8ed; background: rgba(185,239,91,.12); box-shadow: inset 2px 0 var(--lime); }
.nav-icon { width: 21px; text-align: center; color: #7f9185; font-size: 17px; }
.nav-item.active .nav-icon { color: var(--lime); }
.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; color: #243519; background: var(--lime); border-radius: 20px; font-size: 10px; text-align: center; }
.sidebar-foot { margin-top: auto; display: grid; gap: 10px; }
.trust-card { display: flex; align-items: center; gap: 9px; padding: 11px; color: #bfc9c1; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
.trust-card b, .trust-card small { display: block; }
.trust-card b { font-size: 11px; }
.trust-card small { color: #748379; font-size: 9px; }
.status-dot { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 4px rgba(185,239,91,.1); }
.user-card { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px; color: #dce6de; background: transparent; border: 0; border-radius: 11px; cursor: pointer; text-align: left; }
.user-card:hover { background: rgba(255,255,255,.05); }
.avatar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: #19321f; background: linear-gradient(135deg, #dff6b1, var(--lime)); border-radius: 50%; font-size: 12px; font-weight: 800; }
.user-meta { min-width: 0; flex: 1; }
.user-meta b, .user-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta b { font-size: 12px; }
.user-meta small { color: #75847a; font-size: 9px; }

.shell { min-height: 100vh; margin-left: 242px; }
.topbar { position: sticky; top: 0; z-index: 20; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: rgba(245,246,242,.9); border-bottom: 1px solid rgba(210,215,208,.8); backdrop-filter: blur(18px); }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.breadcrumb b { color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.top-search { width: 236px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--faint); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; text-align: left; }
.top-search span:nth-child(2) { flex: 1; }
kbd { padding: 1px 5px; color: #8b948c; background: #f1f2ef; border: 1px solid #dfe2dd; border-radius: 4px; font: 9px/1.5 var(--font); }
.icon-button { position: relative; width: 36px; height: 36px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; cursor: pointer; }
.notify-dot { position: absolute; right: 8px; top: 7px; width: 5px; height: 5px; background: var(--rose); border-radius: 50%; }
.primary, .secondary, .ghost, .danger { min-height: 40px; padding: 0 17px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; cursor: pointer; transition: .18s ease; }
.primary { color: white; background: var(--pine); box-shadow: 0 5px 14px rgba(22,61,43,.16); }
.primary:hover { background: var(--pine-2); transform: translateY(-1px); }
.primary.lime { color: #17351f; background: var(--lime); box-shadow: none; }
.primary.small, .secondary.small, .ghost.small { min-height: 34px; padding: 0 13px; font-size: 12px; }
.secondary { color: var(--pine); background: white; border-color: var(--line-dark); }
.secondary:hover { background: var(--surface-2); }
.ghost { color: var(--muted); background: transparent; }
.ghost:hover { color: var(--ink); background: var(--surface-2); }
.danger { color: #a23e43; background: #fff2f2; border-color: #efd1d3; }
.full { width: 100%; }

#main { min-height: calc(100vh - 68px); outline: none; }
.page { max-width: 1440px; margin: 0 auto; padding: 28px 30px 52px; animation: enter .25s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-head h1 { margin: 0; font: 700 clamp(24px,2.5vw,34px)/1.15 var(--font); letter-spacing: -.045em; }
.page-head p { max-width: 660px; margin: 7px 0 0; color: var(--muted); }
.eyebrow { display: block; margin-bottom: 7px; color: var(--pine-2); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

.hero { position: relative; overflow: hidden; min-height: 310px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 28px; align-items: center; padding: 44px 48px; color: white; background: #13251b; border-radius: 22px; box-shadow: var(--shadow); }
.hero:after { content: ""; position: absolute; right: -130px; top: -190px; width: 490px; height: 490px; border: 1px solid rgba(185,239,91,.17); border-radius: 50%; box-shadow: 0 0 0 55px rgba(185,239,91,.035), 0 0 0 115px rgba(185,239,91,.018); }
.hero-copy { position: relative; z-index: 2; }
.hero-kicker { display: inline-flex; gap: 7px; align-items: center; padding: 5px 9px; color: #d9f4a8; background: rgba(185,239,91,.09); border: 1px solid rgba(185,239,91,.18); border-radius: 20px; font-size: 10px; letter-spacing: .06em; }
.hero h1 { max-width: 720px; margin: 18px 0 13px; font: 650 clamp(34px,4vw,56px)/1.08 var(--font); letter-spacing: -.055em; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero p { max-width: 630px; margin: 0; color: #aab9ae; font-size: 15px; }
.hero-search { max-width: 650px; display: flex; gap: 10px; margin-top: 26px; padding: 7px; background: white; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.hero-search input { flex: 1; min-width: 0; padding: 0 10px; color: var(--ink); border: 0; outline: 0; }
.hero-signal { position: relative; z-index: 2; display: grid; gap: 10px; }
.signal-card { padding: 16px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; backdrop-filter: blur(12px); }
.signal-card small { display: block; color: #8da096; font-size: 10px; }
.signal-card b { display: block; margin-top: 5px; color: #eff6f0; font-size: 18px; }
.signal-card .micro { margin-top: 9px; height: 4px; background: rgba(255,255,255,.09); border-radius: 4px; overflow: hidden; }
.signal-card .micro span { display: block; height: 100%; background: var(--lime); border-radius: 4px; }

.section-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 30px 0 14px; }
.section-row h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.section-row p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.filters { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { min-height: 32px; padding: 0 12px; color: var(--muted); background: white; border: 1px solid var(--line); border-radius: 18px; font-size: 11px; font-weight: 650; cursor: pointer; }
.chip.active { color: white; background: var(--pine); border-color: var(--pine); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.product-card { position: relative; overflow: hidden; min-height: 250px; display: flex; flex-direction: column; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: .22s ease; }
.product-card:hover { transform: translateY(-4px); border-color: #c5cec6; box-shadow: var(--shadow); }
.product-card:before { content: ""; position: absolute; right: -28px; top: -28px; width: 92px; height: 92px; background: var(--card-accent, #e7f1ec); border-radius: 50%; opacity: .7; }
.card-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.tool-glyph { width: 40px; height: 40px; display: grid; place-items: center; color: var(--pine); background: var(--card-soft,#edf4ef); border-radius: 12px; font-weight: 900; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: #397052; font-size: 10px; font-weight: 700; }
.product-card h3 { margin: 18px 0 7px; font-size: 16px; letter-spacing: -.02em; }
.product-card .summary { display: -webkit-box; min-height: 43px; margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tag-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 13px; }
.tag { padding: 3px 7px; color: #657067; background: #f1f3ef; border-radius: 5px; font-size: 9px; }
.card-foot { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; }
.author-line { color: var(--faint); font-size: 9px; }
.author-line b { display: block; color: var(--muted); font-size: 10px; }
.price { color: var(--ink); font-size: 17px; font-weight: 800; }
.price small { color: var(--faint); font-size: 9px; font-weight: 500; }
.rating { color: #8a671e; font-size: 10px; }
.rating b { color: var(--ink); }

.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 22px; }
.stat-card { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.stat-card small { color: var(--muted); }
.stat-card b { display: block; margin-top: 6px; font-size: 25px; letter-spacing: -.04em; }
.stat-card .trend { margin-left: 6px; color: #3a7753; font-size: 10px; font-weight: 700; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 14px rgba(20,35,25,.025); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 14px; }
.panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.panel-body { padding: 18px; }
.two-col { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 18px; }
.three-col { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.tabs { display: flex; gap: 3px; padding: 4px; background: #ecefe9; border-radius: 10px; }
.tab { min-height: 32px; padding: 0 12px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; }
.tab.active { color: var(--ink); background: white; box-shadow: 0 2px 8px rgba(20,30,22,.08); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 12px; color: var(--faint); border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
td { padding: 13px 12px; border-bottom: 1px solid #edf0eb; font-size: 11px; }
tr:last-child td { border-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 12px; font-size: 9px; font-weight: 700; }
.status:before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.status.success, .status.published, .status.completed, .status.approved, .status.paid { color: #34704c; background: #e9f5ed; }
.status.pending, .status.review, .status.waiting_human, .status.refund_pending { color: #8b641e; background: #fff4d9; }
.status.draft, .status.paused { color: #66706a; background: #eff1ee; }
.status.failed, .status.rejected { color: #9e4247; background: #fdebec; }

.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; }
.detail-main { display: grid; gap: 16px; }
.detail-hero { padding: 28px; background: linear-gradient(140deg,#fff 45%,var(--detail-soft,#eff5f0)); border: 1px solid var(--line); border-radius: 18px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 23px; color: var(--muted); font-size: 11px; cursor: pointer; }
.detail-type { display: inline-flex; padding: 4px 8px; color: var(--pine-2); background: var(--lime-soft); border-radius: 5px; font-size: 9px; font-weight: 800; }
.detail-hero h1 { max-width: 800px; margin: 15px 0 9px; font-size: clamp(28px,4vw,43px); line-height: 1.1; letter-spacing: -.05em; }
.detail-hero p { max-width: 760px; color: var(--muted); font-size: 14px; }
.detail-meta { display: flex; gap: 18px; margin-top: 22px; color: var(--muted); font-size: 10px; }
.detail-tabs { display: flex; gap: 24px; padding: 0 20px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.detail-tabs button { height: 48px; padding: 0 2px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.detail-tabs button.active { color: var(--ink); border-color: var(--pine); }
.detail-content { padding: 25px; background: white; border: 1px solid var(--line); border-radius: 15px; }
.detail-content h2 { margin: 0 0 11px; font-size: 17px; }
.detail-content p { color: var(--muted); }
.io-flow { display: grid; grid-template-columns: 1fr 36px 1fr 36px 1fr; align-items: stretch; margin-top: 18px; }
.io-box { padding: 15px; background: #f6f8f4; border: 1px solid var(--line); border-radius: 11px; }
.io-box b { display: block; margin-bottom: 8px; font-size: 11px; }
.io-box span { display: block; margin: 3px 0; color: var(--muted); font-size: 10px; }
.io-arrow { display: grid; place-items: center; color: #adb5ad; }
.purchase-card { position: sticky; top: 88px; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.purchase-card .price { font-size: 30px; }
.purchase-card .price small { font-size: 11px; }
.purchase-card hr { margin: 17px 0; border: 0; border-top: 1px solid var(--line); }
.permission-list { display: grid; gap: 10px; margin: 14px 0; }
.permission { display: flex; gap: 9px; align-items: start; color: var(--muted); font-size: 10px; }
.permission i { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: #3b7553; background: #e8f5ed; border-radius: 50%; font-size: 9px; font-style: normal; }
.security-score { display: flex; align-items: center; gap: 10px; padding: 11px; color: #315e43; background: #eff8f1; border-radius: 10px; }
.security-score strong { font-size: 19px; }
.security-score small { display: block; color: #66806f; font-size: 9px; }

.workbench-page { height: calc(100vh - 68px); padding: 14px; overflow: hidden; }
.workbench { height: 100%; display: grid; grid-template-columns: minmax(340px,.82fr) minmax(480px,1.18fr); overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; }
.chat-pane, .output-pane { min-width: 0; display: flex; flex-direction: column; }
.chat-pane { border-right: 1px solid var(--line); }
.workbench-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 17px; border-bottom: 1px solid var(--line); }
.workbench-head h2 { margin: 0; font-size: 13px; }
.workbench-head p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.chat-stream { flex: 1; overflow: auto; padding: 22px; background: #fafbf9; }
.message { max-width: 88%; display: flex; gap: 9px; margin-bottom: 20px; }
.message.user { margin-left: auto; flex-direction: row-reverse; }
.message-avatar { width: 26px; height: 26px; flex: none; display: grid; place-items: center; background: #e6ebe5; border-radius: 50%; font-size: 9px; font-weight: 800; }
.message.agent .message-avatar { color: #17311f; background: var(--lime); }
.bubble { padding: 11px 13px; color: #49534c; background: white; border: 1px solid var(--line); border-radius: 4px 13px 13px 13px; font-size: 11px; }
.message.user .bubble { color: white; background: var(--pine); border-color: var(--pine); border-radius: 13px 4px 13px 13px; }
.run-trace { display: grid; gap: 8px; margin: 10px 0 20px 35px; padding: 12px; background: white; border: 1px solid var(--line); border-radius: 11px; }
.trace-step { display: grid; grid-template-columns: 12px 1fr auto; gap: 7px; align-items: center; color: var(--muted); font-size: 9px; }
.trace-step i { width: 7px; height: 7px; background: #4a8c62; border-radius: 50%; }
.chat-compose { padding: 12px; background: white; border-top: 1px solid var(--line); }
.compose-box { border: 1px solid var(--line-dark); border-radius: 12px; transition: .18s; }
.compose-box:focus-within { border-color: #799d88; box-shadow: 0 0 0 3px rgba(70,125,88,.09); }
.compose-box textarea { width: 100%; min-height: 66px; padding: 12px; resize: none; border: 0; outline: 0; background: transparent; font-size: 11px; }
.compose-actions { display: flex; align-items: center; justify-content: space-between; padding: 7px; }
.output-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.output-content { flex: 1; overflow: auto; padding: 18px; background: #f7f8f5; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.metric { padding: 14px; background: white; border: 1px solid var(--line); border-radius: 11px; }
.metric small { color: var(--muted); font-size: 9px; }
.metric b { display: block; margin-top: 4px; font-size: 19px; }
.metric .up { color: #34704c; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 11px; margin-top: 11px; }
.dashboard-card { min-height: 190px; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.dashboard-card.wide { grid-column: span 2; }
.dashboard-card h3 { margin: 0 0 13px; font-size: 11px; }
.line-chart { height: 110px; display: flex; align-items: end; gap: 9px; padding: 8px 5px 20px; border-bottom: 1px solid var(--line); }
.bar-col { flex: 1; position: relative; min-height: 8px; background: linear-gradient(180deg,var(--lime),#83bd55); border-radius: 4px 4px 1px 1px; }
.bar-col span { position: absolute; bottom: -19px; left: 50%; color: var(--faint); font-size: 8px; transform: translateX(-50%); }
.risk-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.risk-list li { display: flex; gap: 8px; color: var(--muted); font-size: 10px; }
.risk-list li:before { content: "!"; width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: #87591c; background: #fff0d5; border-radius: 50%; font-size: 8px; font-weight: 800; }
.artifact-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.artifact { display: flex; align-items: center; gap: 10px; padding: 12px; background: white; border: 1px solid var(--line); border-radius: 10px; }
.artifact-icon { width: 34px; height: 38px; display: grid; place-items: center; color: #426452; background: #edf4ef; border-radius: 7px; font-size: 9px; font-weight: 800; }
.artifact div:nth-child(2) { min-width: 0; flex: 1; }
.artifact b, .artifact small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact b { font-size: 10px; }
.artifact small { color: var(--faint); font-size: 8px; }

.project-list { display: grid; gap: 8px; }
.project-item { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.project-item:hover { background: #f8f9f6; }
.project-glyph { width: 38px; height: 38px; display: grid; place-items: center; color: #315c43; background: #eaf3ed; border-radius: 10px; font-weight: 900; }
.project-item .grow { min-width: 0; flex: 1; }
.project-item b, .project-item small { display: block; }
.project-item small { color: var(--muted); font-size: 9px; }

.upload-flow { display: grid; grid-template-columns: 190px 1fr; gap: 18px; }
.stepper { display: grid; align-content: start; gap: 6px; }
.step { display: flex; gap: 10px; align-items: center; padding: 10px; color: var(--muted); border-radius: 10px; font-size: 10px; }
.step-num { width: 25px; height: 25px; display: grid; place-items: center; background: #e8ebe6; border-radius: 50%; font-size: 9px; font-weight: 800; }
.step.active { color: var(--pine); background: #ecf3ed; font-weight: 700; }
.step.active .step-num { color: #18351f; background: var(--lime); }
.drop-zone { min-height: 230px; display: grid; place-items: center; padding: 30px; text-align: center; background: #fafbf9; border: 1px dashed #bbc6bc; border-radius: 14px; transition: .2s; }
.drop-zone:hover, .drop-zone.drag { background: #f2f7ef; border-color: #6e9a7b; }
.drop-zone input { display: none; }
.drop-icon { width: 55px; height: 55px; display: grid; place-items: center; margin: 0 auto 12px; color: var(--pine); background: var(--lime-soft); border-radius: 16px; font-size: 22px; }
.drop-zone h3 { margin: 0; }
.drop-zone p { color: var(--muted); font-size: 10px; }
.validation-score { display: flex; align-items: center; gap: 17px; padding: 16px; color: #254d36; background: #edf7ef; border-radius: 12px; }
.score-ring { width: 62px; height: 62px; display: grid; place-items: center; background: conic-gradient(var(--pine-2) calc(var(--score)*1%), #d5e3d8 0); border-radius: 50%; }
.score-ring:after { content: attr(data-score); width: 48px; height: 48px; display: grid; place-items: center; background: #edf7ef; border-radius: 50%; font-size: 16px; font-weight: 800; }
.file-tree { max-height: 220px; overflow: auto; padding: 10px; background: #131a15; border-radius: 10px; color: #bdc9bf; font: 10px/1.8 ui-monospace,Consolas,monospace; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
.field { display: grid; gap: 6px; }
.field.full-span { grid-column: 1 / -1; }
.field label { color: #59645c; font-size: 10px; font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; min-height: 40px; padding: 9px 11px; color: var(--ink); background: white; border: 1px solid var(--line-dark); border-radius: 9px; outline: 0; }
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #6e9a7b; box-shadow: 0 0 0 3px rgba(70,125,88,.08); }
.checkbox-row { display: flex; gap: 8px; align-items: center; min-height: 35px; color: var(--muted); font-size: 10px; }

.workflow-shell { height: calc(100vh - 68px); display: grid; grid-template-rows: 58px 1fr 220px; overflow: hidden; }
.workflow-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; background: white; border-bottom: 1px solid var(--line); }
.workflow-toolbar h1 { margin: 0; font-size: 14px; }
.workflow-toolbar small { color: var(--muted); }
.workflow-main { min-height: 0; display: grid; grid-template-columns: 210px 1fr 255px; }
.node-library, .node-config { overflow: auto; padding: 13px; background: white; }
.node-library { border-right: 1px solid var(--line); }
.node-config { border-left: 1px solid var(--line); }
.node-library h3, .node-config h3 { margin: 0 0 10px; font-size: 11px; }
.node-group-title { margin: 16px 0 6px; color: var(--faint); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.node-type { width: 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 5px; padding: 8px; background: white; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; text-align: left; font-size: 9px; }
.node-type:hover { border-color: #799885; background: #f5f9f5; }
.node-dot { width: 22px; height: 22px; display: grid; place-items: center; color: white; background: var(--node,#647a6b); border-radius: 6px; font-size: 8px; font-weight: 800; }
.workflow-canvas { position: relative; overflow: auto; background-color: #f3f5f1; background-image: radial-gradient(#c9d0c8 1px, transparent 1px); background-size: 18px 18px; }
.canvas-inner { position: relative; width: 1400px; height: 650px; }
.wf-node { position: absolute; z-index: 2; width: 145px; min-height: 58px; padding: 9px; background: white; border: 1px solid #cdd5cd; border-radius: 9px; box-shadow: 0 4px 12px rgba(20,35,24,.08); cursor: grab; user-select: none; }
.wf-node:hover, .wf-node.selected { border-color: #5d8b6d; box-shadow: 0 0 0 3px rgba(63,126,84,.1), 0 5px 14px rgba(20,35,24,.1); }
.wf-node-head { display: flex; align-items: center; gap: 7px; }
.wf-node b { font-size: 9px; }
.wf-node small { display: block; margin: 6px 0 0 29px; color: var(--faint); font-size: 7px; }
.port { position: absolute; top: 50%; width: 8px; height: 8px; background: white; border: 2px solid #779483; border-radius: 50%; transform: translateY(-50%); }
.port.in { left: -5px; } .port.out { right: -5px; }
.edge { position: absolute; z-index: 1; height: 2px; background: #8ea294; transform-origin: left center; pointer-events: none; }
.edge:after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 2px solid #8ea294; border-right: 2px solid #8ea294; transform: rotate(45deg); }
.debug-panel { display: grid; grid-template-columns: 1fr 320px; min-height: 0; background: #121814; color: #c5d0c7; border-top: 1px solid #0a0e0b; }
.debug-log { overflow: auto; padding: 12px 16px; font: 9px/1.8 ui-monospace,Consolas,monospace; }
.debug-summary { padding: 13px; background: #18201a; border-left: 1px solid #28312a; }
.log-line { display: grid; grid-template-columns: 55px 100px 1fr 45px; gap: 8px; }
.log-ok { color: #a7db6e; } .log-wait { color: #e4bd6d; }

.dashboard-editor { display: grid; grid-template-columns: 230px 180px 1fr; gap: 0; min-height: calc(100vh - 126px); overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 15px; }
.editor-col { padding: 15px; border-right: 1px solid var(--line); overflow: auto; }
.editor-col h3 { margin: 0 0 12px; font-size: 11px; }
.field-token, .component-token { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 6px; padding: 9px; background: #f5f7f3; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; cursor: pointer; }
.field-token code { color: #3c6550; font-size: 8px; }
.preview-surface { overflow: auto; padding: 22px; background: #eff1ed; }
.preview-frame { min-height: 580px; padding: 18px; background: #f8f9f6; border: 1px solid #d7dcd5; border-radius: 12px; box-shadow: 0 10px 28px rgba(20,30,22,.08); }
.mapping-card { position: relative; }
.remove-component { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }

.login-view { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; background: #101914; }
.login-story { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px,6vw,78px); color: white; }
.login-story:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 30%,rgba(185,239,91,.12),transparent 34%), linear-gradient(150deg,transparent 55%,rgba(185,239,91,.04)); }
.login-brand { position: relative; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; letter-spacing: .12em; }
.login-copy { position: relative; max-width: 710px; }
.login-copy h1 { margin: 0 0 17px; font-size: clamp(40px,5.7vw,76px); line-height: 1.03; letter-spacing: -.065em; }
.login-copy h1 span { color: var(--lime); }
.login-copy p { max-width: 590px; color: #91a298; font-size: 15px; }
.login-proof { position: relative; display: flex; gap: 24px; color: #7e8e84; font-size: 10px; }
.login-proof b { display: block; margin-bottom: 3px; color: #d9e4dc; font-size: 18px; }
.login-panel-wrap { display: grid; place-items: center; padding: 30px; background: #f3f5f1; border-radius: 26px 0 0 26px; }
.login-panel { width: min(430px,100%); }
.login-panel h2 { margin: 0; font-size: 29px; letter-spacing: -.04em; }
.login-panel > p { margin: 7px 0 24px; color: var(--muted); }
.demo-roles { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 22px; }
.demo-role { padding: 12px 7px; background: white; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; text-align: center; }
.demo-role:hover { border-color: #6f977c; transform: translateY(-1px); }
.demo-role b, .demo-role small { display: block; }
.demo-role b { margin-top: 6px; font-size: 10px; }
.demo-role small { color: var(--faint); font-size: 8px; }
.role-glyph { width: 34px; height: 34px; display: grid; place-items: center; margin: 0 auto; color: #244d34; background: var(--lime-soft); border-radius: 9px; font-weight: 900; }
.login-form { display: grid; gap: 13px; }
.login-form .primary { margin-top: 4px; min-height: 46px; }
.form-note { color: var(--faint); font-size: 9px; text-align: center; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(11,17,13,.55); backdrop-filter: blur(7px); animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(560px,100%); max-height: 90vh; overflow: auto; background: white; border-radius: 17px; box-shadow: 0 30px 80px rgba(0,0,0,.27); }
.modal-head { display: flex; justify-content: space-between; align-items: start; padding: 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.modal-close { width: 30px; height: 30px; background: #f2f4f0; border: 0; border-radius: 8px; cursor: pointer; }
.modal-body { padding: 20px; }
.modal-foot { display: flex; justify-content: end; gap: 8px; padding: 14px 20px; background: #fafbf9; border-top: 1px solid var(--line); border-radius: 0 0 17px 17px; }
.toast-root { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: 8px; }
.toast { min-width: 280px; max-width: 390px; display: flex; gap: 10px; align-items: center; padding: 13px 15px; color: white; background: #17231b; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; box-shadow: 0 18px 40px rgba(0,0,0,.24); animation: toastIn .25s ease; font-size: 10px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.toast:before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; color: #213618; background: var(--lime); border-radius: 50%; font-weight: 900; }
.empty { padding: 50px 20px; color: var(--muted); text-align: center; }
.empty-glyph { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 12px; background: var(--surface-2); border-radius: 15px; font-size: 20px; }

.default-model-banner { display: flex; align-items: center; gap: 15px; padding: 22px; color: white; background: linear-gradient(125deg,#17251c,#284832); border: 1px solid #31523b; border-radius: 16px; box-shadow: 0 14px 34px rgba(20,40,27,.12); }
.default-model-banner.empty-state { color: var(--text); background: linear-gradient(125deg,#fff8e8,#f6ecd1); border-color: #e5d39d; }
.default-model-banner h2 { margin: 2px 0 1px; font-size: 24px; letter-spacing: -.03em; }
.default-model-banner p { margin: 0; color: #a7b9ac; font-size: 10px; }
.default-model-banner.empty-state p { color: var(--muted); }
.provider-logo { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; color: #203326; background: var(--lime); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; font-size: 10px; font-weight: 900; letter-spacing: -.03em; }
.credential-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.credential-card { position: relative; display: flex; flex-direction: column; min-height: 214px; padding: 17px; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 22px rgba(25,40,29,.04); }
.credential-card.is-default { border-color: #71957d; box-shadow: inset 0 3px 0 #8eba6f,0 10px 26px rgba(25,55,34,.07); }
.credential-head { display: flex; align-items: center; gap: 10px; }
.credential-head h3 { margin: 0; font-size: 12px; }
.credential-head p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.default-pill { padding: 4px 7px; color: #31583c; background: #e8f4e7; border-radius: 99px; font-size: 8px; font-weight: 800; }
.model-line { display: grid; gap: 4px; margin-top: 18px; }
.model-line small { color: var(--faint); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.model-line b { font-size: 13px; overflow-wrap: anywhere; }
.base-url { margin-top: 9px; padding: 7px; overflow: hidden; color: #627067; background: #f4f6f3; border-radius: 6px; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.credential-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 14px; }
.danger-text { color: #9d4b50 !important; }
.credential-empty { grid-column: 1/-1; background: white; border: 1px dashed #bcc8bd; border-radius: 14px; }
.provider-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.provider-card { display: flex; align-items: center; gap: 10px; padding: 13px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.provider-card b,.provider-card small { display: block; }
.provider-card b { font-size: 9px; }
.provider-card small { margin-top: 3px; color: var(--faint); font-size: 7px; }
.logic-strip { margin-top: 22px; padding: 18px; background: #eef3ec; border: 1px solid #d7e0d5; border-radius: 14px; }
.logic-strip > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.logic-strip span { padding: 7px 9px; background: white; border: 1px solid var(--line); border-radius: 7px; font-size: 9px; }
.logic-strip i { color: #79907e; font-style: normal; }
.logic-strip p { margin: 10px 0 0; color: var(--muted); font-size: 9px; }
.credential-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.secret-note { margin-top: 16px; padding: 11px 13px; color: #476253; background: #eef6ed; border: 1px solid #d2e3d0; border-radius: 9px; font-size: 9px; line-height: 1.6; }
.runtime-model { display: flex; align-items: center; gap: 9px; margin: 12px 0; padding: 10px; border-radius: 9px; }
.runtime-model.ready { background: #eef6ed; border: 1px solid #d1e3cf; }
.runtime-model.missing { background: #fff6df; border: 1px solid #ead8a6; }
.runtime-model > span { width: 25px; height: 25px; display: grid; place-items: center; color: white; background: #477157; border-radius: 7px; font-weight: 900; }
.runtime-model.missing > span { background: #b88631; }
.runtime-model div { flex: 1; min-width: 0; }
.runtime-model b,.runtime-model small { display: block; }
.runtime-model b { font-size: 9px; overflow-wrap: anywhere; }
.runtime-model small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.runtime-model a { color: #315d40; font-size: 8px; font-weight: 800; }
.model-gate { display: flex; align-items: center; gap: 13px; padding: 14px; background: #f3f7f1; border: 1px solid var(--line); border-radius: 11px; }
.model-gate b { font-size: 11px; }
.model-gate p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.node-model-box { margin-top: 12px; padding: 10px; background: #f1f6ef; border: 1px solid #d7e3d5; border-radius: 9px; }
.node-model-box .field { margin-top: 8px; }
.node-model-box p { margin: 8px 0 0; color: var(--muted); font-size: 8px; }

/* 工作流编辑器 v2 */
.workflow-home { max-width: 1420px; margin: 0 auto; }
.wf-home-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 28px; padding: 28px; color: white; background: radial-gradient(circle at 85% 20%,rgba(188,235,105,.2),transparent 30%),linear-gradient(125deg,#17251c,#2d5038); border-radius: 18px; }
.wf-home-hero h2 { margin: 4px 0 8px; font-size: 25px; }
.wf-home-hero p { margin: 0; color: #a9baae; line-height: 1.7; }
.wf-home-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.wf-home-flow span { padding: 9px 11px; color: #dce7de; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; font-size: 9px; }
.wf-home-flow i { color: var(--lime); font-style: normal; }
.wf-template-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.wf-template-card { display: flex; flex-direction: column; min-height: 258px; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 10px 28px rgba(24,40,28,.05); }
.wf-template-card h3 { margin: 13px 0 6px; font-size: 15px; }
.wf-template-card p { flex: 1; margin: 0 0 14px; color: var(--muted); line-height: 1.65; }
.wf-template-card .tag-row { margin-bottom: 16px; }
.wf-template-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #234330; background: var(--lime-soft); border-radius: 12px; font-weight: 900; }

.workflow-studio { height: calc(100vh - 68px); grid-template-rows: 58px minmax(300px,1fr) 264px; background: #edf0eb; }
.workflow-studio .workflow-toolbar { min-width: 0; }
.wf-title,.wf-toolbar-actions { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wf-title input { width: min(290px,25vw); padding: 7px 9px; background: transparent; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 800; }
.wf-title input:hover,.wf-title input:focus { background: #f6f8f4; border-color: var(--line-dark); outline: 0; }
.wf-title small { color: var(--faint); white-space: nowrap; }
.workflow-studio .workflow-main { grid-template-columns: 230px minmax(420px,1fr) 300px; }
.workflow-studio .node-library,.workflow-studio .node-config { padding: 12px; }
.wf-panel-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 10px; padding: 3px; background: #eff2ed; border-radius: 8px; }
.wf-panel-tabs button { padding: 7px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 9px; font-weight: 700; cursor: pointer; }
.wf-panel-tabs button.active { color: var(--pine); background: white; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.library-search { display: flex; align-items: center; gap: 6px; padding: 0 8px; background: #f6f8f5; border: 1px solid var(--line); border-radius: 8px; }
.library-search input { min-width: 0; width: 100%; padding: 8px 0; background: transparent; border: 0; outline: 0; font-size: 9px; }
.panel-help { margin: 7px 0 10px; color: var(--faint); font-size: 8px; line-height: 1.55; }
.workflow-studio .node-type { align-items: center; min-height: 43px; padding: 7px; }
.workflow-studio .node-type > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.workflow-studio .node-type b { font-size: 9px; }
.workflow-studio .node-type small { color: var(--faint); font-size: 7px; font-family: ui-monospace,Consolas,monospace; }
.workflow-studio .node-type i { margin-left: auto; color: var(--faint); font-style: normal; }
.wf-mini-template { width: 100%; display: flex; align-items: center; gap: 9px; margin-bottom: 7px; padding: 9px; background: white; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; text-align: left; }
.wf-mini-template > span { width: 29px; height: 29px; display: grid; place-items: center; color: #294a35; background: var(--lime-soft); border-radius: 7px; font-weight: 900; }
.wf-mini-template b,.wf-mini-template small { display: block; }
.wf-mini-template b { font-size: 9px; }.wf-mini-template small { margin-top: 2px; color: var(--faint); font-size: 7px; }

.workflow-studio .workflow-canvas { isolation: isolate; }
.workflow-studio .canvas-inner { width: 1750px; height: 820px; transition: transform .15s ease; }
.canvas-tools { position: sticky; z-index: 8; top: 10px; left: 10px; width: max-content; display: flex; align-items: center; gap: 4px; padding: 4px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 5px 16px rgba(20,32,23,.08); backdrop-filter: blur(8px); }
.canvas-tools span { min-width: 36px; color: var(--muted); font-size: 8px; text-align: center; }
.connect-guide { position: sticky; z-index: 8; top: 10px; left: 50%; width: max-content; max-width: 320px; margin: -35px auto 0; padding: 7px 10px; color: var(--faint); background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 99px; font-size: 8px; pointer-events: none; }
.connect-guide.active { color: #315a3c; background: #e9f5e6; border-color: #a7c89f; }
.workflow-studio .wf-node { width: 184px; min-height: 96px; padding: 11px; border-radius: 11px; }
.workflow-studio .wf-node.selected { border-color: #4d8560; box-shadow: 0 0 0 3px rgba(77,133,96,.12),0 8px 20px rgba(20,35,24,.1); }
.workflow-studio .wf-node.completed { box-shadow: inset 0 3px 0 #83b667,0 5px 14px rgba(20,35,24,.1); }
.workflow-studio .wf-node.waiting_human { box-shadow: inset 0 3px 0 #d7a64c,0 5px 14px rgba(20,35,24,.1); }
.workflow-studio .wf-node-head { align-items: flex-start; }
.workflow-studio .wf-node-head > div { flex: 1; min-width: 0; }
.workflow-studio .wf-node-head b,.workflow-studio .wf-node-head small { display: block; margin: 0; }
.workflow-studio .wf-node-head b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-studio .wf-node-head small { margin-top: 3px; color: var(--faint); font-size: 7px; line-height: 1.35; }
.wf-node-meta { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-top: 10px; padding-top: 7px; border-top: 1px solid #edf0ec; }
.wf-node-meta code,.wf-node-meta span { color: var(--faint); font-size: 6.5px; }
.node-warning { width: 16px; height: 16px; display: grid; place-items: center; color: #8c651c; background: #fff0c9; border-radius: 50%; font-size: 8px; font-weight: 900; }
.workflow-studio .port { width: 12px; height: 12px; padding: 0; border-width: 2px; cursor: crosshair; transition: .15s; }
.workflow-studio .port:hover,.workflow-studio .port.active { width: 16px; height: 16px; background: var(--lime); border-color: #466d53; }
.workflow-studio .port.in { left: -7px; }.workflow-studio .port.out { right: -7px; }
.workflow-studio .edge { height: 2px; background: #83998a; }
.wf-minimap { position: fixed; z-index: 7; right: 312px; bottom: 278px; width: 118px; height: 72px; overflow: hidden; background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 5px 14px rgba(0,0,0,.06); pointer-events: none; }
.wf-minimap i { position: absolute; width: 8px; height: 5px; border-radius: 2px; }

.node-config-head { display: flex; justify-content: space-between; align-items: flex-start; }
.node-config-head h3 { margin: 2px 0 12px; }
.workflow-studio .node-config .field { margin-bottom: 9px; }
.workflow-studio .node-config .field input,.workflow-studio .node-config .field textarea,.workflow-studio .node-config .field select { min-height: 34px; padding: 7px 8px; font-size: 8px; }
.workflow-studio .node-config .field textarea { min-height: 56px; }
.workflow-studio .node-config .prompt-editor { min-height: 115px; font-family: ui-monospace,Consolas,monospace; line-height: 1.6; }
.two-mini-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.variable-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 10px; }
.variable-chips button { padding: 4px 6px; color: #42634d; background: #eef5ec; border: 1px solid #d5e2d2; border-radius: 5px; font: 7px ui-monospace,Consolas,monospace; cursor: pointer; }
.wf-port-contract { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 10px 0; padding: 8px; color: var(--muted); background: #f5f7f4; border: 1px solid var(--line); border-radius: 8px; font-size: 8px; }
.wf-port-contract i { color: #79907e; font-style: normal; }
.wf-contract { display: grid; gap: 7px; margin-top: 12px; padding: 11px; background: #f6f8f5; border: 1px solid var(--line); border-radius: 9px; }
.wf-contract span { color: var(--muted); font-size: 8px; line-height: 1.45; }.wf-contract span.ok { color: #3f704e; }.wf-contract span.bad { color: #9b5356; }

.playground { min-height: 0; overflow: hidden; display: grid; grid-template-rows: 39px 1fr; color: #c7d1c9; background: #121814; border-top: 1px solid #0b0f0c; }
.playground > header { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; background: #18201a; border-bottom: 1px solid #2a332c; }
.playground > header > div { display: flex; align-items: center; gap: 7px; }
.play-tabs { height: 100%; display: flex; }
.play-tabs button { position: relative; padding: 0 12px; color: #7e8c82; background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 8px; cursor: pointer; }
.play-tabs button.active { color: #dce6de; border-bottom-color: var(--lime); }.play-tabs button i { padding: 1px 4px; color: #1a251d; background: #e3b04d; border-radius: 99px; font-style: normal; }
.run-state { padding: 4px 7px; color: #8d9c91; background: #222b24; border-radius: 5px; font-size: 7px; }.run-state.completed { color: #bde19a; }.run-state.waiting_human { color: #e9c171; }
.play-body { min-height: 0; overflow: auto; padding: 11px 15px; font-size: 8px; }
.play-empty { display: grid; min-height: 110px; place-items: center; color: #627067; }
.play-input { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 10px; }
.play-input .field input { min-height: 33px; color: #dce7df; background: #202923; border-color: #344038; }.play-input .field label,.play-input .field small { color: #7d8c81; font-size: 7px; }
.trace-span { display: grid; grid-template-columns: 25px 8px minmax(170px,.8fr) minmax(180px,1.5fr) 55px; align-items: center; gap: 8px; min-height: 31px; border-bottom: 1px solid #242d27; }
.trace-span > span { color: #69776e; }.trace-span i { width: 7px; height: 7px; background: #6c7b70; border-radius: 50%; }.trace-span i.completed { background: #9fcf70; }.trace-span i.waiting_human { background: #deb256; }
.trace-span b,.trace-span small { display: block; }.trace-span small { margin-top: 2px; color: #69776e; }.trace-span code { overflow: hidden; color: #91a096; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.trace-span strong { color: #b1beb4; font-size: 7px; text-align: right; }
.play-body pre { max-height: 130px; overflow: auto; padding: 10px; color: #9fb1a3; background: #0e130f; border-radius: 7px; font: 8px/1.5 ui-monospace,Consolas,monospace; }
.play-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 9px; }.play-cards > div { padding: 10px; background: #1b241e; border: 1px solid #29342c; border-radius: 8px; }.play-cards small,.play-cards b { display: block; }.play-cards small { color: #718078; }.play-cards b { margin-top: 3px; color: #d6e0d8; font-size: 12px; }
.play-table { display: grid; gap: 1px; }.play-table > div { display: grid; grid-template-columns: 1.2fr .7fr 1.4fr; gap: 8px; align-items: center; min-height: 28px; padding: 0 8px; background: #19211b; }.play-table > div:first-child { color: #718078; background: #222c25; }.play-table input,.play-table select { min-width: 0; padding: 5px; color: inherit; background: rgba(255,255,255,.06); border: 1px solid #3b473f; border-radius: 4px; }
.evidence-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }.evidence-list > div { display: flex; align-items: center; gap: 8px; padding: 9px; background: #1b241e; border: 1px solid #29342c; border-radius: 7px; }.evidence-list > div > span { width: 24px; height: 24px; display: grid; place-items: center; color: #263521; background: var(--lime); border-radius: 6px; font-weight: 900; }.evidence-list b,.evidence-list small { display: block; }.evidence-list small { margin-top: 3px; color: #718078; }
.cost-row { display: grid; grid-template-columns: 1fr 1fr 100px 60px; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #242d27; }.cost-row b { text-align: right; }
.play-error,.play-ok { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; padding: 8px; border-radius: 6px; }.play-error { color: #efc3c4; background: #332124; }.play-error b { width: 18px; height: 18px; display: grid; place-items: center; background: #9c4b53; border-radius: 50%; }.play-ok { color: #afd48e; background: #1c2c20; }

.review-cta { padding: 9px 12px; color: #594714; background: linear-gradient(135deg,#fff6d6,#f6e6a7); border: 1px solid #dfc879; border-radius: 8px; font-weight: 800; cursor: pointer; }
.purchase-card .review-cta { margin-top: 8px; }
.owned-tool { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 14px; }
.owned-tool .product-card { height: calc(100% - 54px); border: 0; border-radius: 0; box-shadow: none; }
.owned-actions { display: flex; gap: 7px; padding: 10px 13px; border-top: 1px solid var(--line); }.owned-actions button { flex: 1; }
.auto-endpoint { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 9px 11px; background: #f4f6f3; border: 1px solid var(--line); border-radius: 9px; }.auto-endpoint code { overflow-wrap: anywhere; color: #40594a; font-size: 9px; }.auto-endpoint span { flex: 0 0 auto; color: #66816d; font-size: 8px; }
.provider-preview { display: flex; align-items: center; gap: 11px; padding: 11px; background: #f7f9f6; border: 1px solid var(--line); border-radius: 10px; }.provider-preview b,.provider-preview small { display: block; }.provider-preview small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.connection-check { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 9px; border-radius: 8px; }.connection-check.ok { color: #355f42; background: #edf7ec; }.connection-check.bad { color: #8a5154; background: #fbeced; }.connection-check i { width: 21px; height: 21px; display: grid; place-items: center; color: white; background: currentColor; border-radius: 50%; font-style: normal; }.connection-check b,.connection-check small { display: block; }.connection-check b { font-size: 8px; }.connection-check small { margin-top: 2px; color: var(--muted); font-size: 7px; line-height: 1.4; }

@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .hero { grid-template-columns: 1fr; }
  .hero-signal { display: none; }
  .workflow-main { grid-template-columns: 185px 1fr 220px; }
  .credential-grid { grid-template-columns: repeat(2,1fr); }
  .provider-grid { grid-template-columns: repeat(3,1fr); }
  .workflow-studio .workflow-main { grid-template-columns: 195px minmax(380px,1fr) 260px; }
  .wf-toolbar-actions .ghost:nth-of-type(3),.wf-toolbar-actions .ghost:nth-of-type(4),.wf-toolbar-actions .ghost:nth-of-type(5),.wf-toolbar-actions .ghost:nth-of-type(6) { display: none; }
}
@media (max-width: 900px) {
  .mobile-only { display: inline-grid !important; place-items: center; }
  .sidebar { transform: translateX(-100%); transition: .2s; }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: 15px 0 50px rgba(0,0,0,.25); }
  .shell { margin-left: 0; }
  .topbar { padding: 0 16px; }
  .top-search { display: none; }
  .page { padding: 20px 16px 40px; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .detail-layout { grid-template-columns: 1fr; }
  .purchase-card { position: static; }
  .workbench-page { height: auto; overflow: visible; }
  .workbench { min-height: calc(100vh - 100px); grid-template-columns: 1fr; overflow: visible; }
  .chat-pane { min-height: 600px; border-right: 0; border-bottom: 1px solid var(--line); }
  .output-pane { min-height: 700px; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .two-col { grid-template-columns: 1fr; }
  .login-view { grid-template-columns: 1fr; }
  .login-story { min-height: 42vh; }
  .login-proof { display: none; }
  .login-panel-wrap { border-radius: 26px 26px 0 0; }
  .workflow-main { grid-template-columns: 160px 1fr; }
  .node-config { display: none; }
  .wf-template-grid { grid-template-columns: 1fr; }
  .wf-home-hero { grid-template-columns: 1fr; }
  .workflow-studio .workflow-main { grid-template-columns: 170px 1fr; }
  .workflow-studio .node-config { display: none; }
  .wf-minimap { right: 10px; }
  .dashboard-editor { grid-template-columns: 190px 1fr; }
  .dashboard-editor .editor-col:nth-child(2) { display: none; }
}
@media (max-width: 620px) {
  .topbar .primary { display: none; }
  .hero { min-height: 430px; padding: 32px 22px; }
  .hero h1 { font-size: 38px; }
  .hero-search { display: grid; }
  .hero-search button { min-height: 42px; }
  .product-grid, .three-col, .form-grid, .metric-grid, .dashboard-grid, .artifact-list { grid-template-columns: 1fr; }
  .dashboard-card.wide, .field.full-span { grid-column: auto; }
  .page-head { align-items: start; flex-direction: column; }
  .section-row { align-items: start; flex-direction: column; }
  .detail-meta { flex-wrap: wrap; }
  .io-flow { grid-template-columns: 1fr; gap: 7px; }
  .io-arrow { transform: rotate(90deg); }
  .upload-flow { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: repeat(4,1fr); }
  .step { padding: 5px; justify-content: center; }
  .step span:last-child { display: none; }
  .login-story { padding: 34px 24px; }
  .login-copy h1 { font-size: 42px; }
  .login-panel-wrap { padding: 28px 20px 42px; }
  .workflow-main { grid-template-columns: 1fr; }
  .node-library { display: none; }
  .debug-panel { grid-template-columns: 1fr; }
  .debug-summary { display: none; }
  .dashboard-editor { grid-template-columns: 1fr; }
  .dashboard-editor .editor-col { display: none; }
  .credential-grid,.provider-grid,.credential-form { grid-template-columns: 1fr; }
  .workflow-studio .workflow-main { grid-template-columns: 1fr; }
  .workflow-studio .node-library { display: none; }
  .wf-title .status,.wf-title small { display: none; }
  .play-input { grid-template-columns: 1fr; }
}