/* Shared web controls and rhythm. Component layouts remain in their own files. */
:root {
  --ui-accent: #1c704e;
  --ui-accent-hover: #155b3e;
  --ui-ink: #233b33;
  --ui-muted: #64746d;
  --ui-canvas: #f4f7f5;
  --ui-panel: #fff;
  --ui-line: #dce5df;
  --ui-input: #fff;
  --ui-soft: #edf5ef;
  --ui-radius: 12px;
  --ui-control-radius: 8px;
  --ui-control-height: 44px;
}
body[data-ui] {
  --green: var(--ui-accent);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --pale: var(--ui-soft);
  color: var(--ui-ink);
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
}
body[data-ui] *, body[data-ui] *::before, body[data-ui] *::after { box-sizing: border-box; }
body[data-ui] :is(input, select, textarea, button) { font: inherit; }
body[data-ui] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  max-width: 100%;
  min-width: 0;
  min-height: var(--ui-control-height);
  padding: 10px 12px;
  border: 1px solid #cbd8d0;
  border-radius: var(--ui-control-radius);
  background: var(--ui-input);
  color: var(--ui-ink);
  line-height: 22px;
  box-shadow: none;
}
body[data-ui] textarea { display: block; width: 100%; min-height: 112px; resize: vertical; }
body[data-ui] input[readonly] { background: var(--ui-soft); }
body[data-ui] :is(input, select, textarea)::placeholder { color: #7a8982; opacity: 1; }
body[data-ui] :is(input, select, textarea):focus-visible {
  outline: 3px solid #1c704e24;
  outline-offset: 1px;
  border-color: var(--ui-accent);
}
/* Checkboxes must never inherit full-width text-field sizing. */
body[data-ui] input:is([type=checkbox], [type=radio]) {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex: 0 0 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--ui-accent);
  align-self: flex-start;
}
body[data-ui] label:has(>input:is([type=checkbox], [type=radio])) {
  min-width: 0;
  align-items: flex-start;
  text-align: left;
}
body[data-ui] :is(button, a.button) {
  min-height: 42px;
  border-radius: var(--ui-control-radius);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}
body[data-ui] :is(button, a.button):focus-visible,
body[data-ui] a:focus-visible { outline: 3px solid #1c704e55; outline-offset: 3px; }
body[data-ui] :is(.panel, .card) { border-radius: var(--ui-radius); }
body[data-ui] :is(.grid, .research-grid, .wb-edit-grid)>* { min-width: 0; }
body[data-ui] :is(.table-wrap, .scroll) { max-width: 100%; }
body[data-ui] .muted { color: var(--ui-muted); }
body[data-ui] [hidden] { display: none !important; }
/* One customer/API navigation baseline, independent of account artwork. */
body[data-ui] > header:not(.login-header):not(.trial-public-header) {
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-line);
}
body[data-ui] .header-inner {
  width: min(1280px, calc(100% - 64px));
  max-width: 1280px;
  min-height: 76px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 28px;
}
body[data-ui] .brand, body[data-ui] .research-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ui-accent);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
body[data-ui] :is(.brand, .research-brand) img { width: 28px; height: 28px; object-fit: contain; }
body[data-ui] :is(.brand, .research-brand) strong { font-size: 26px; letter-spacing: -.7px; }
body[data-ui] :is(.brand, .research-brand) span {
  margin: 0 0 0 4px;
  padding-left: 14px;
  border-left: 1px solid var(--ui-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-muted);
  letter-spacing: 0;
}
body[data-ui] .header-inner nav, body[data-ui] .research-header nav {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  min-height: 76px;
}
body[data-ui] :is(.header-inner nav, .research-header nav)>a {
  display: inline-flex;
  align-items: center;
  min-height: 76px;
  margin: 0;
  padding: 0;
  color: var(--ui-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
body[data-ui] :is(.header-inner nav, .research-header nav)>a[aria-current=page] {
  color: var(--ui-accent);
  border-bottom-color: var(--ui-accent);
  font-weight: 650;
}
body[data-ui] :is(.header-inner nav, .research-header nav)>a:hover { color: var(--ui-accent); }
body[data-ui] .account { margin-left: auto; flex-shrink: 0; }
/* Role artwork keeps its identity; navigation and controls use the shared brand. */
body[data-ui].customer-portal {
  --portal-accent: var(--ui-accent);
  --portal-soft: var(--ui-soft);
  --portal-ink: var(--ui-ink);
  --portal-muted: var(--ui-muted);
  --portal-canvas: var(--ui-canvas);
}
body[data-ui].customer-portal main { max-width: 1280px; margin-inline: auto; }
body[data-ui].customer-portal .heading h1 { font-size: 30px; line-height: 1.35; }
body[data-ui].customer-portal .heading { margin: 28px 0 20px; }
body[data-ui].customer-portal .panel { border-color: var(--ui-line); box-shadow: none; }
body[data-ui].customer-portal a:not(.button):not(.brand) { color: var(--ui-accent); }
body[data-ui].customer-portal .button:not(.secondary) { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
body[data-ui].customer-portal .tag { color: var(--ui-accent); background: var(--ui-soft); }
body[data-ui] .wb-section, body[data-ui] .admin-console .panel { border-color: var(--ui-line); }
.ui-entry-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.ui-entry-links>a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: 10px; text-decoration: none; color: var(--ui-ink); background: var(--ui-panel); }
.ui-entry-links>a:hover { border-color: var(--ui-accent); background: var(--ui-soft); }
.ui-entry-links strong { font-size: 14px; color: var(--ui-accent); }
.ui-entry-links span { font-size: 12px; color: var(--ui-muted); line-height: 1.6; }
@media (max-width: 1100px) {
  body[data-ui] .header-inner { gap: 20px; width: calc(100% - 40px); flex-wrap: wrap; }
  body[data-ui] .header-inner nav { gap: 20px; }
  body[data-ui] .brand span { display: none; }
}
@media (max-width: 760px) {
  body[data-ui] .header-inner { gap: 0 18px; width: calc(100% - 32px); padding-top: 16px; }
  body[data-ui] .header-inner nav { order: 3; width: 100%; min-height: 52px; gap: 20px; overflow-x: auto; flex-wrap: nowrap; }
  body[data-ui] .header-inner nav>a { min-height: 52px; }
  body[data-ui] .brand, body[data-ui] .research-brand { min-height: 32px; font-size: 24px; }
  body[data-ui] .account { margin-left: auto; }
  body[data-ui].customer-portal main { padding-inline: 16px; }
  .ui-entry-links { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) and (forced-colors: none) {
  :root { --ui-accent: #8addad; --ui-accent-hover: #a0ebbc; --ui-ink: #e7eee9; --ui-muted: #b4c2b9; --ui-canvas: #181d1a; --ui-panel: #222925; --ui-line: #414e45; --ui-input: #1a211d; --ui-soft: #2c3931; }
  body[data-ui] :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]) { border-color: #56665a; }
  body[data-ui].customer-portal .button:not(.secondary) { color: #fff; background: #227848; border-color: #489a67; }
}

/* Group review shares the selected customer's authorization panel. */
body[data-ui] .wb-main-form[data-wb-mode="lab"] .wb-authorization { grid-column: 2 / -1; }
body[data-ui] .wb-research-review { border-top: 1px solid var(--ui-line); padding-top: 22px; margin-top: 22px; }
body[data-ui] .wb-research-review h3 { margin: 0; font-size: 17px; line-height: 1.5; }
body[data-ui] .wb-research-review .wb-section-heading { flex-wrap: wrap; gap: 8px; }
body[data-ui] .wb-research-models { margin: 0 0 18px; padding: 16px; border: 1px solid var(--ui-line); border-radius: 10px; }
body[data-ui] .wb-research-models > div { display: flex; flex-wrap: wrap; gap: 12px 24px; }
body[data-ui] .wb-research-models label { display: flex; align-items: start; gap: 10px; margin: 0; overflow-wrap: anywhere; }
body[data-ui] .wb-research-models small { display: block; color: var(--ui-muted); }
@media (max-width: 1100px) { body[data-ui] .wb-main-form[data-wb-mode="lab"] .wb-authorization { grid-column: 1 / -1; } }

/* Legacy header links must not inherit the brand's large type size. */
body[data-ui] .console-topbar nav > a { font-size: 13px; font-weight: 500; line-height: 22px; text-decoration: none; }
body[data-ui] .console-topbar nav { display: flex; align-items: center; gap: 20px; }
body[data-ui].customer-workbench .wb-queue-search .wb-search-label input[type=search] { padding-left: 34px; }
body[data-ui] .wb-queue-badges > small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body[data-ui] .wb-main-form[data-wb-mode="lab"] .wb-module-picker { margin-top: 20px; }
@media (max-width: 620px) { body[data-ui] .console-topbar nav { gap: 12px; } body[data-ui] .console-topbar nav > a { font-size: 12px; } }
@media (prefers-color-scheme: dark) and (forced-colors: none) {
  body[data-ui] button:not(.secondary):not(.wb-text-button):not(.wb-logout):not(.console-logout):not(.login-password-toggle):not(.danger) { background: #227848; border-color: #489a67; color: #fff; }
}

/* Model API is one selectable module; its funded usage settings stay adjacent. */
body[data-ui] .wb-module-picker label[data-api-module] { grid-column: 1 / -1; }
body[data-ui] .wb-module-picker label[data-api-module] small { display: block; color: var(--ui-muted); font-weight: 400; }
body[data-ui] .wb-api-settings { margin: 20px 0; padding: 18px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-soft); }
body[data-ui] .wb-api-settings h3 { margin: 0; font-size: 17px; }
body[data-ui] .wb-api-settings > p { margin-bottom: 16px; }
body[data-ui] .wb-api-settings .wb-section-heading { flex-wrap: wrap; gap: 8px; }
body[data-ui] .wb-main-form[data-wb-mode="api"] .wb-authorization { grid-column: 2 / -1; }
@media (max-width: 1100px) { body[data-ui] .wb-main-form[data-wb-mode="api"] .wb-authorization { grid-column: 1 / -1; } }