/*
 * Discovery UI · v2.19
 * Intentionally unlayered: these design-system rules take precedence over the
 * specialist layouts in styles.css without a growing specificity contest.
 * No external fonts, trackers, or assets are required.
 */
:root, html[data-theme="day"] {
  color-scheme: light;
  --bg: #f8faf9;
  --bg-2: #f0f5f3;
  --panel: #fff;
  --panel-solid: #fff;
  --panel-2: #f4f7f6;
  --text: #182b29;
  --text-strong: #122522;
  --text-soft: #50645f;
  --muted: #65756d;
  --line: #e3eae7;
  --line-strong: #bccfc7;
  --primary: #087d6f;
  --primary-dark: #087264;
  --cyan: #0d8d7e;
  --cyan-text: #087b6d;
  --openai: #0b896e;
  --platform-openai: #047857;
  --platform-openai-fill: #d1fae5;
  --anthropic: #c2410c;
  --anthropic-fill: #ffedd5;
  --danger: #c64743;
  --warning: #ad721a;
  --violet: #7063ab;
  --success-text: #08765e;
  --warning-text: #976112;
  --danger-text: #b63a38;
  --input-solid: #fff;
  --window-bg: #fff;
  --window-title: #fff;
  --window-chrome: #f6f8f7;
  --shadow: 0 24px 80px rgba(18, 44, 36, .14);
  --shadow-soft: 0 4px 20px rgba(18, 44, 36, .035);
  --glow-cyan: none;
  --glow-green: none;
  --body-rgb: 248, 250, 249;
  --surface-deep-rgb: 241, 246, 243;
  --surface-control-rgb: 250, 252, 251;
  --surface-panel-rgb: 255, 255, 255;
  --surface-raised-rgb: 238, 244, 241;
  --surface-modal-rgb: 17, 35, 30;
  --line-rgb: 113, 143, 130;
  --cyan-rgb: 13, 141, 126;
  --primary-rgb: 13, 141, 126;
  --success-rgb: 11, 137, 110;
  --warning-rgb: 173, 114, 26;
  --danger-rgb: 198, 71, 67;
  --contrast-rgb: 24, 43, 41;
  --shadow-rgb: 18, 44, 36;
  --accent-soft: #eaf6f1;
  --gold-soft: #faf5e8;
  --radius: 18px;
  --page-width: 1320px;
}
html[data-theme="soft"] {
  color-scheme: light;
  --bg: #f2eee7;
  --bg-2: #ece6dc;
  --panel: #fcf9f3;
  --panel-solid: #fcf9f3;
  --panel-2: #f3ede3;
  --text: #33423b;
  --text-strong: #27372f;
  --text-soft: #4b6056;
  --muted: #5d6d62;
  --line: #ded6c9;
  --line-strong: #bdb6a7;
  --primary: #40796a;
  --primary-dark: #326957;
  --cyan: #40796a;
  --cyan-text: #326c5e;
  --openai: #42785d;
  --platform-openai: #326d50;
  --platform-openai-fill: #dceade;
  --anthropic: #92522f;
  --anthropic-fill: #f3e5d2;
  --danger: #aa4d40;
  --warning: #886319;
  --violet: #6a5e89;
  --success-text: #32674b;
  --warning-text: #775413;
  --danger-text: #9b4035;
  --input-solid: #f6f1e8;
  --window-bg: #fcf9f3;
  --window-title: #fcf9f3;
  --window-chrome: #f3ede3;
  --shadow: 0 24px 80px rgba(51, 55, 46, .1);
  --shadow-soft: 0 4px 20px rgba(51, 55, 46, .035);
  --glow-cyan: none;
  --glow-green: none;
  --body-rgb: 242, 238, 231;
  --surface-deep-rgb: 236, 230, 220;
  --surface-control-rgb: 246, 241, 232;
  --surface-panel-rgb: 252, 249, 243;
  --surface-raised-rgb: 243, 237, 227;
  --surface-modal-rgb: 39, 55, 47;
  --line-rgb: 159, 148, 131;
  --cyan-rgb: 64, 121, 106;
  --primary-rgb: 64, 121, 106;
  --success-rgb: 50, 103, 75;
  --warning-rgb: 136, 99, 25;
  --danger-rgb: 170, 77, 64;
  --contrast-rgb: 51, 66, 59;
  --shadow-rgb: 51, 55, 46;
  --accent-soft: #e3eee5;
  --gold-soft: #f3e9d0;
  --sub2api-online-dot: #42794f;
  --sub2api-offline-dot: #aa4d40;
}
html[data-theme="soft"] :is(.ai-chat-launcher, .ai-chat-avatar) {
  color: #285744;
  background: linear-gradient(145deg, #deeee1, #c8e0d1);
}
html[data-theme="soft"] .ai-chat-launcher {
  border-color: #a2bca9;
  box-shadow: 0 4px 12px rgba(51, 55, 46, .12);
}
html[data-theme="soft"] .ai-chat-launcher::before { display: none; }
html[data-theme="soft"] .ai-chat-spark { color: #40796a; animation: none; }
html[data-theme="night"] {
  color-scheme: dark;
  --bg: #101b19;
  --bg-2: #152420;
  --panel: #192824;
  --panel-solid: #192824;
  --panel-2: #20332d;
  --text: #e2eee8;
  --text-strong: #f1f7f4;
  --text-soft: #b7cbc1;
  --muted: #9bb3a7;
  --line: #2c4138;
  --line-strong: #4c695b;
  --primary: #5fd0b3;
  --primary-dark: #37b392;
  --cyan: #5fd0b3;
  --cyan-text: #85d9c2;
  --openai: #5ac9a6;
  --platform-openai: #6ee7b7;
  --platform-openai-fill: #153e32;
  --anthropic: #fdba74;
  --anthropic-fill: #472b19;
  --danger: #ed8580;
  --warning: #e9c177;
  --success-text: #83dcb8;
  --warning-text: #e9c177;
  --danger-text: #f59b91;
  --input-solid: #14231e;
  --window-bg: #192824;
  --window-title: #192824;
  --window-chrome: #20332d;
  --shadow: 0 24px 80px rgba(0, 0, 0, .3);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, .1);
  --body-rgb: 16, 27, 25;
  --surface-deep-rgb: 17, 31, 25;
  --surface-control-rgb: 20, 35, 30;
  --surface-panel-rgb: 25, 40, 36;
  --surface-raised-rgb: 32, 51, 45;
  --surface-modal-rgb: 4, 12, 9;
  --line-rgb: 118, 158, 137;
  --cyan-rgb: 95, 208, 179;
  --primary-rgb: 95, 208, 179;
  --success-rgb: 90, 201, 166;
  --warning-rgb: 233, 193, 119;
  --danger-rgb: 237, 133, 128;
  --contrast-rgb: 226, 238, 232;
  --shadow-rgb: 0, 0, 0;
  --accent-soft: #203c30;
  --gold-soft: #373322;
}
html { scroll-behavior: smooth; scroll-padding-top: 110px; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px; line-height: 1.6; letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after, .card-beam, .cockpit-card::before,
.cockpit-card::after, .table-panel::after, .modal-panel::after { display: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
button, a { transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
input, select, textarea {
  border: 1px solid var(--line); border-radius: 10px; background: var(--input-solid);
  color: var(--text); padding: 10px 12px; box-shadow: none; min-height: 42px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
#routeUsageModelPicker input { padding-right: 38px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--primary); }
::selection { background: rgba(var(--primary-rgb), .2); }
.primary, .secondary, .icon-button, .compact-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; line-height: 1.25;
  min-height: 38px; border-radius: 9px; font-weight: 550; text-shadow: none;
  box-shadow: none; transform: none; letter-spacing: 0;
}
.primary, .secondary, .compact-button { height: auto; }
.button-icon { display: block; flex: 0 0 auto; width: 16px; height: 16px; }
.icon-button > svg, .top-action-icon { display: block; flex: 0 0 auto; }
.primary { background: #087d6f; border: 1px solid #087d6f; color: #fff; padding: 9px 17px; }
.primary:hover:not(:disabled) { background: #087664; border-color: #087664; box-shadow: 0 3px 10px rgba(13, 141, 126, .14); transform: none; }
html[data-theme="soft"] .primary { background: var(--primary); border-color: var(--primary); color: #f2f4ef; }
html[data-theme="soft"] .primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 3px 10px rgba(var(--primary-rgb), .14); }
.secondary { background: var(--panel); border: 1px solid var(--line); color: var(--text-soft); padding: 8px 13px; }
.secondary:hover:not(:disabled), .icon-button:hover:not(:disabled) { background: var(--accent-soft); color: var(--primary); border-color: var(--line-strong); transform: none; }
.text-button { color: var(--primary); text-decoration: none; }
.compact-button { padding: 5px 10px; min-height: 30px; font-size: 12px; }
.icon-button { background: var(--panel-2); border: 1px solid var(--line); }
/* Keep icon refresh controls square outside the components layer: the shared
 * button minimum height and grid stretching must not make them taller. */
:is(#refreshAiRecommendationBtn, #refreshSub2apiBoardBtn, #refreshPoolBoardBtn,
    #refreshSiteRecommendationsBtn, #fetchAiRecommendationModelsBtn,
    #refreshMemberCaptchaBtn, #routeUsageHistoryRefreshBtn,
    #modelMarketplace .veridrop-score-action:has(> svg.refresh-icon)) {
  width: var(--refresh-button-size, 26px);
  min-width: var(--refresh-button-size, 26px);
  height: var(--refresh-button-size, 26px);
  min-height: var(--refresh-button-size, 26px);
  padding: 0;
  flex-shrink: 0;
  align-self: center;
}
#refreshSiteRecommendationsBtn { --refresh-button-size: 28px; }
#fetchAiRecommendationModelsBtn { --refresh-button-size: 36px; }
#refreshMemberCaptchaBtn { --refresh-button-size: 38px; }
#routeUsageHistoryRefreshBtn { --refresh-button-size: 38px; }
.veridrop-score-action:has(> svg.refresh-icon) { --refresh-button-size: 34px; }
@media (max-width: 640px) {
  .veridrop-score-action:has(> svg.refresh-icon) { --refresh-button-size: 32px; }
}
.skip-link { position: fixed; z-index: 10000; left: 20px; top: -80px; background: var(--panel); padding: 12px 20px; border-radius: 10px; box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
.app-shell { display: block; width: 100%; max-width: none; padding: 0; margin: 0; gap: 0; }
.app-shell > :is(.provider-strip, .page-section-heading, .status-deck, .route-panel, .summary-grid, .workspace, .pool-board, .guide-panel, .site-footer, .sub2api-home-board) { width: min(var(--page-width), calc(100% - 80px)); margin-inline: auto; }
/* Navigation */
.topbar.command-bar {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center;
  flex-wrap: wrap; gap: 18px; width: 100%; min-height: 80px; padding: 15px 40px;
  margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--panel); box-shadow: none; backdrop-filter: none;
}
.brand-cluster { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; }
.brand-symbol {
  /* Six folded faces share one prism silhouette; the existing provider masks
   * become its inlaid details. Inline vector art adds no image request. */
  --brand-prism: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20160%22%20fill%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22p0%22%20x1%3D%2280%22%20y1%3D%227%22%20x2%3D%22118%22%20y2%3D%2280%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2339ad83%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23047857%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22p1%22%20x1%3D%2280%22%20y1%3D%227%22%20x2%3D%22118%22%20y2%3D%2280%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ed9a73%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c2410c%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22p2%22%20x1%3D%2280%22%20y1%3D%227%22%20x2%3D%22118%22%20y2%3D%2280%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2354b8c6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23087e8b%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22p3%22%20x1%3D%2280%22%20y1%3D%227%22%20x2%3D%22118%22%20y2%3D%2280%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%238797aa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23536175%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22p4%22%20x1%3D%2280%22%20y1%3D%227%22%20x2%3D%22118%22%20y2%3D%2280%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%239a80d3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237850c9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22p5%22%20x1%3D%2280%22%20y1%3D%227%22%20x2%3D%22118%22%20y2%3D%2280%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23dc78a1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ba397d%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22rotate(0%2080%2080)%22%3E%3Cpath%20d%3D%22M80%207Q83%207%2086%209L139%2039Q144%2042%20144%2048L101%2079L91%2060Z%22%20fill%3D%22url(%23p0)%22%2F%3E%3Cpath%20d%3D%22M80%207L91%2060L87%2010Z%22%20fill%3D%22%23fff%22%20opacity%3D%22.18%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(60%2080%2080)%22%3E%3Cpath%20d%3D%22M80%207Q83%207%2086%209L139%2039Q144%2042%20144%2048L101%2079L91%2060Z%22%20fill%3D%22url(%23p1)%22%2F%3E%3Cpath%20d%3D%22M80%207L91%2060L87%2010Z%22%20fill%3D%22%23fff%22%20opacity%3D%22.18%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(120%2080%2080)%22%3E%3Cpath%20d%3D%22M80%207Q83%207%2086%209L139%2039Q144%2042%20144%2048L101%2079L91%2060Z%22%20fill%3D%22url(%23p2)%22%2F%3E%3Cpath%20d%3D%22M80%207L91%2060L87%2010Z%22%20fill%3D%22%23fff%22%20opacity%3D%22.18%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(180%2080%2080)%22%3E%3Cpath%20d%3D%22M80%207Q83%207%2086%209L139%2039Q144%2042%20144%2048L101%2079L91%2060Z%22%20fill%3D%22url(%23p3)%22%2F%3E%3Cpath%20d%3D%22M80%207L91%2060L87%2010Z%22%20fill%3D%22%23fff%22%20opacity%3D%22.18%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(240%2080%2080)%22%3E%3Cpath%20d%3D%22M80%207Q83%207%2086%209L139%2039Q144%2042%20144%2048L101%2079L91%2060Z%22%20fill%3D%22url(%23p4)%22%2F%3E%3Cpath%20d%3D%22M80%207L91%2060L87%2010Z%22%20fill%3D%22%23fff%22%20opacity%3D%22.18%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(300%2080%2080)%22%3E%3Cpath%20d%3D%22M80%207Q83%207%2086%209L139%2039Q144%2042%20144%2048L101%2079L91%2060Z%22%20fill%3D%22url(%23p5)%22%2F%3E%3Cpath%20d%3D%22M80%207L91%2060L87%2010Z%22%20fill%3D%22%23fff%22%20opacity%3D%22.18%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  position: relative; display: block; flex: 0 0 auto;
  width: 54px; height: 54px; padding: 0; border: 0; border-radius: 9px;
  overflow: hidden; isolation: isolate; line-height: 1; text-shadow: none; box-shadow: none;
  background: var(--brand-prism) center / contain no-repeat;
}
.brand-symbol::after, .brand-symbol::before { display: none; }
.brand-symbol .brand-provider-icon {
  position: absolute; display: block; left: var(--brand-x); top: var(--brand-y);
  width: 16.25%; height: 16.25%; min-width: 0; transform: translate(-50%, -50%);
  background: transparent; color: #fff;
}
.brand-provider-icon::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--platform-icon) center / contain no-repeat; mask: var(--platform-icon) center / contain no-repeat; }
.brand-orb {
  position: absolute; z-index: 3; left: 50%; top: 50%; display: block;
  width: 5.75%; aspect-ratio: 1; border: .5px solid rgba(255, 255, 255, .76); border-radius: 50%;
  color: var(--brand-orb-color, #047857); background: currentColor; box-shadow: 0 0 3px currentColor;
  pointer-events: none; transform: translate(-50%, -50%);
}
.brand-orb.is-bouncing { will-change: transform; }
.brand-orb::after { content: ""; position: absolute; width: 24%; height: 24%; left: 22%; top: 18%; border-radius: 50%; background: rgba(255, 255, 255, .82); }
/* Align each provider with its own folded face, not the outer hexagon. */
.brand-symbol .platform-openai { --brand-x: 67.505%; --brand-y: 27.14%; }
.brand-symbol .platform-anthropic { --brand-x: 78.55%; --brand-y: 53.73%; }
.brand-symbol .platform-deepseek { --brand-x: 61.045%; --brand-y: 76.59%; }
.brand-symbol .platform-grok { --brand-x: 32.495%; --brand-y: 72.86%; }
.brand-symbol .platform-zhipu { --brand-x: 21.45%; --brand-y: 46.27%; }
.brand-symbol .platform-kimi { --brand-x: 38.955%; --brand-y: 23.41%; }
a.brand-symbol:hover { filter: brightness(1.08); }
a.brand-symbol:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.brand-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 0; }
.brand-title-row h1 { margin: 0; font-size: 19px; letter-spacing: -.7px; line-height: 1.3; color: var(--text-strong); text-shadow: none; font-weight: 750; }
.app-version { display: none; }
/* Align the two icon buttons, not the full theme control including its caption. */
.header-utility-stack { position: static; display: flex; flex-direction: row; align-items: flex-start; gap: 3px; margin: 0 0 0 6px; width: auto; height: auto; }
.theme-control { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; align-self: flex-start; }
.theme-control-label { display: block; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1; text-align: center; }
.theme-toggle, .announcement-shortcut {
  width: 30px; min-width: 0; flex: 0 0 auto; height: 30px; min-height: 30px; border: 0; border-radius: 8px;
  color: var(--muted); background: transparent; box-shadow: none; transform: none;
}
.theme-toggle:hover, .announcement-shortcut:hover { background: var(--panel-2); color: var(--primary); transform: none; }
.theme-toggle svg, .announcement-shortcut svg { width: 17px; height: 17px; }
.site-nav { display: flex; align-items: center; gap: 3px; padding: 5px; margin-inline: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 30px; }
.site-nav a, .site-nav button { padding: 7px 16px; white-space: nowrap; color: var(--muted); background: transparent; border: 0; border-radius: 24px; font-size: 13px; }
.site-nav a:hover, .site-nav button:hover { background: var(--panel); color: var(--primary); }
.site-nav a.is-active { color: var(--primary); background: var(--accent-soft); }
.navigation-menu-button { display: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.navigation-menu-button svg { width: 21px; height: 21px; }
.guest-access-bar { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; flex: 0 0 auto; width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.guest-access-tip { display: none; }
.guest-feedback-button { background: transparent; border-color: var(--line); color: var(--primary); font-size: 12px; }
.guest-login { border-radius: 10px; font-size: 13px; color: #06291f; font-weight: 650; background: linear-gradient(115deg, #28b297, #aec581); }
.guest-login:hover:not(:disabled) { color: #fff; }
.top-actions.command-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0; flex: 1 1 auto; }
.top-action-icon { width: 16px; height: 16px; }
.topbar .top-action-button { font-size: 12px; }
.app-shell:not(.is-public-view) .topbar { position: relative; }
.app-shell:not(.is-public-view) .site-nav { margin-left: auto; margin-right: 0; }
.app-shell:not(.is-public-view) .top-actions { flex-basis: 100%; justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--line); }
.app-shell:not(.is-public-view) .app-version { display: inline-flex; font-size: 10px; background: var(--bg-2); color: var(--muted); border: 0; }
.app-shell:not(.is-public-view) :is(.discovery-hero, .provider-strip, .recommendation-section-heading, .guide-panel) { display: none; }
.app-shell:not(.is-public-view) .guide-panel.is-revealed { display: block; }
.app-shell:not(.is-public-view) :is(.status-deck, .route-panel, .summary-grid, .sub2api-home-board) { margin-top: 20px; }
/* Hero: dark canvas, mint-to-gold accent, data rather than invented claims. */
.discovery-hero { position: relative; overflow: hidden; color: #eef7f2; background: #071412; isolation: isolate; }
.discovery-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 85% 18%, rgba(205, 177, 65, .12), transparent 48%), radial-gradient(ellipse at 40% 85%, rgba(12, 154, 125, .14), transparent 58%), linear-gradient(110deg, #081614, #091310 60%, #171b12); }
.discovery-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .11; background-image: linear-gradient(#7fa99a 1px, transparent 1px), linear-gradient(90deg, #7fa99a 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg, transparent 30%, black); pointer-events: none; }
.hero-inner { max-width: 1240px; margin: auto; padding: 76px 40px 60px; display: grid; grid-template-columns: 1.04fr 1fr; gap: 68px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #ffffff20; border-radius: 25px; padding: 6px 13px; background: #ffffff06; color: #bbcec5; font-size: 12px; letter-spacing: 1px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #63d3aa; flex: 0 0 auto; box-shadow: 0 0 8px #63d3aa45; }
.hero-copy h2 { margin: 23px 0 22px; font-size: clamp(46px, 4.4vw, 66px); font-weight: 760; line-height: 1.19; letter-spacing: -3px; }
.hero-copy h2 span { background: linear-gradient(105deg, #a3e5cf 2%, #e7e6aa 64%, #f2d47b); background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy > p { font-size: 15px; line-height: 1.95; color: #9eb8ad; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 30px; }
.hero-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 12px 22px; min-height: 48px; border-radius: 9px; font-size: 14px; font-weight: 650; }
.hero-primary { background: linear-gradient(108deg, #1eb99c, #98cb89 72%, #d7cc71); color: #092d24; box-shadow: 0 4px 30px #25b89112; }
.hero-primary:hover { color: #092d24; box-shadow: 0 4px 30px #25b89140; }
.hero-secondary { background: #ffffff05; color: #d2e5dc; border: 1px solid #ffffff22; }
.hero-secondary:hover { background: #ffffff0c; color: #fff; border-color: #ffffff44; }
.hero-assurance { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 23px; color: #91ac9f; font-size: 11px; }
.hero-preview { background: #0a1815e8; border: 1px solid #acc0a52e; border-radius: 16px; box-shadow: 0 24px 60px #0003; overflow: hidden; transform: rotate(-1deg); }
.hero-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 22px; border-bottom: 1px solid #ffffff0d; }
.hero-preview-head > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 650; letter-spacing: 1.3px; color: #b7d2c3; }
.hero-preview-badge { font-size: 10px; padding: 2px 8px; border-radius: 5px; border: 1px solid #ffffff15; color: #8ca698; }
.hero-preview-title { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px 18px; }
.hero-preview-title > span { font-size: 19px; letter-spacing: -.5px; font-weight: 600; color: #e7efe9; }
.hero-preview-title small { color: #839e91; font-size: 11px; }
.hero-channel-list { display: grid; gap: 9px; padding: 0 20px; }
.hero-channel { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; background: #ffffff04; border: 1px solid #ffffff0e; border-radius: 9px; padding: 13px 12px; color: #e2eee6; text-align: left; }
.hero-channel:hover { background: #ffffff09; border-color: #77ccb83b; color: #fff; }
.hero-channel-symbol { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; font-size: 17px; color: #95d9be; background: #65be9c14; }
.hero-channel-symbol.is-anthropic { color: var(--anthropic); background: var(--anthropic-fill); }
.hero-channel-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.hero-channel-copy strong { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-channel-copy small { color: #809c8d; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-channel-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hero-channel-price strong { font-size: 16px; color: #b0e4c8; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-channel-price small { color: #809c8d; font-size: 10px; }
.hero-preview-foot { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; color: #789489; font-size: 10px; }
.hero-preview-foot a { color: #9bcdb4; }
.hero-preview-empty { color: #9bb7a7; padding: 30px 10px; text-align: center; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1160px; padding: 23px 0 27px; margin: 0 auto; border-top: 1px solid #ffffff14; }
.hero-stats { display: flex; gap: 48px; }
.hero-stats > div { display: flex; align-items: baseline; gap: 10px; }
.hero-stats strong { font-size: 25px; font-weight: 600; color: #e8efe8; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.hero-stats span { color: #8ea89a; font-size: 11px; }
.hero-data-note { display: grid; grid-template-columns: 6px auto; gap: 3px 8px; align-items: center; color: #acbcaf; font-size: 11px; }
.hero-data-note small { grid-column: 2; color: #81998b; font-size: 10px; }
.provider-strip { display: flex; align-items: center; justify-content: center; gap: 35px; min-height: 85px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.provider-strip > span:first-child, .provider-strip-end { font-size: 11px; }
.provider-strip strong { font-size: 19px; font-weight: 600; letter-spacing: -.6px; color: var(--text-soft); }
.provider-glyph { margin-right: 5px; font-size: 25px; vertical-align: -2px; }
.provider-strip .provider-anthropic { font-family: Georgia, serif; }
.provider-strip-divider { height: 22px; width: 1px; background: var(--line); }
/* Section rhythm and AI picks */
.page-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.recommendation-section-heading { padding-top: 52px; }
.section-kicker { font-size: 10px; font-weight: 650; letter-spacing: 1.8px; color: var(--primary); }
.page-section-heading h2 { margin: 8px 0; font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1.35; }
.page-section-heading p { margin: 0; font-size: 13px; color: var(--muted); }
.section-text-link { flex: 0 0 auto; font-size: 12px; color: var(--primary); padding-bottom: 4px; }
.section-text-link span { margin-left: 12px; }
.section-caption { color: var(--muted); font-size: 12px; }
.summary-grid, .summary-grid.is-public { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px; }
.summary-grid.is-public { grid-template-columns: minmax(0, 1fr); }
.summary-grid.is-public #siteSummaryCard { display: none; }
.summary-card, .cockpit-card, .pool-board, .table-panel, .sub2api-home-board {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-soft); color: var(--text);
}
.summary-grid > .ai-recommendation-card { grid-column: 1 / -1; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ai-recommendation-head { padding: 0 0 17px; flex-wrap: wrap; align-items: center; gap: 12px; }
.ai-recommendation-primary-controls { gap: 16px; }
.ai-recommendation-title { padding: 0; color: var(--primary); font-size: 13px; gap: 7px; }
.ai-recommendation-title-icon { background: none; border: 0; box-shadow: none; width: 19px; height: 22px; }
.ai-recommendation-title-icon::before { content: "✧"; position: static; display: block; font-size: 25px; line-height: 22px; background: none; box-shadow: none; transform: none; width: auto; height: auto; border: 0; color: var(--primary); }
.ai-recommendation-title-icon::after, .ai-recommendation-title-icon i, .ai-recommendation-title-signal { display: none; }
.ai-recommendation-title-copy { text-shadow: none; letter-spacing: 0; }
.ai-recommendation-tabs { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; padding: 4px; border: 1px solid var(--line); background: var(--panel); border-radius: 24px; gap: 2px; }
:is(.ai-recommendation-tab, .platform-filter-button)[data-platform] { --tab-color: rgb(var(--platform-rgb)); display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; padding: 5px 12px; min-height: 30px; color: var(--tab-color); border: 0; background: transparent; border-radius: 20px; font-size: 12px; box-shadow: none; transition: background-color .15s ease, box-shadow .15s ease; }
:is(.ai-recommendation-tab, .platform-filter-button)[data-platform="openai"] { --tab-color: var(--platform-openai); }
:is(.ai-recommendation-tab, .platform-filter-button)[data-platform="anthropic"] { --tab-color: var(--anthropic); }
:is(.ai-recommendation-tab, .platform-filter-button)[data-platform="deepseek"] { --tab-color: #3f5cce; }
html[data-theme="night"] :is(.ai-recommendation-tab, .platform-filter-button)[data-platform="deepseek"] { --tab-color: #a0b4ff; }
:is(.ai-recommendation-tab, .platform-filter-button)[data-platform]::before { content: ""; display: block; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor; -webkit-mask: var(--platform-icon) center / contain no-repeat; mask: var(--platform-icon) center / contain no-repeat; }
:is(.ai-recommendation-tab, .platform-filter-button)[data-platform]:hover { color: var(--tab-color); background: color-mix(in srgb, var(--tab-color) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab-color) 20%, transparent); }
:is(.ai-recommendation-tab, .platform-filter-button)[data-platform].is-active { color: var(--tab-color); background: color-mix(in srgb, var(--tab-color) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab-color) 36%, transparent); }
:is(.ai-recommendation-tab, .platform-filter-button)[data-platform]:focus-visible { outline: 2px solid var(--tab-color); outline-offset: 2px; }
.platform-filter-button[data-platform]:not(.is-active):hover { background: transparent; box-shadow: none; }
.site-veridrop-settings { min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.site-veridrop-settings legend { padding: 0 5px; font-size: 13px; font-weight: 600; }
.site-veridrop-settings .check-row { margin: 0; }
.site-veridrop-settings .muted { margin: 8px 0 0; font-size: 12px; }
.ai-recommendation-head-status { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.ai-recommendation-meta { font-size: 10px; font-weight: 400; color: var(--muted); text-shadow: none; }
.ai-recommendation-refresh-age { font-size: 10px; color: var(--muted); }
.ai-recommendation-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.ai-recommendation-category { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-soft); }
.ai-recommendation-category + .ai-recommendation-category { border-left: 1px solid var(--line); }
.ai-recommendation-category-value { background: linear-gradient(160deg, var(--accent-soft), var(--panel) 65%); border-color: rgba(var(--primary-rgb), .2); }
.ai-recommendation-category-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 14px; }
.ai-recommendation-category .ai-recommendation-category-head strong { font-size: 13px; font-weight: 650; color: var(--text-strong); letter-spacing: 0; text-shadow: none; border: 0; background: none; padding: 0; line-height: 1.5; }
.recommendation-category-label { display: flex; flex-direction: column; gap: 10px; }
.recommendation-category-icon { display: grid; place-items: center; width: 31px; height: 31px; color: var(--primary); background: var(--accent-soft); border-radius: 9px; }
.recommendation-category-icon svg { width: 17px; height: 17px; }
.ai-recommendation-category-price .recommendation-category-icon { background: var(--gold-soft); color: var(--warning-text); }
.ai-recommendation-detail-actions { gap: 4px; align-self: flex-end; }
.ai-recommendation-detail-trigger { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 5px; padding: 2px 5px; font-size: 10px; min-height: 24px; }
.ai-recommendation-detail-trigger:hover { color: var(--primary); border-color: var(--primary); background: var(--accent-soft); }
.ai-recommendation-category-choices { gap: 0; }
.ai-recommendation-choice, .ai-recommendation-category .ai-recommendation-choice { padding: 0; background: transparent; border: 0; border-radius: 0; }
.ai-recommendation-category .ai-recommendation-choice + .ai-recommendation-choice { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.ai-recommendation-choice-head { display: flex; align-items: flex-start; flex-direction: column; gap: 4px; }
.ai-recommendation-site { max-width: 100%; padding: 0; border: 0; color: var(--text-strong); font-size: 13px; font-weight: 650; background: none; text-align: left; }
.ai-recommendation-site:hover { color: var(--primary); text-decoration: underline; }
.ai-recommendation-choice-metrics { color: var(--primary); font-size: 11px; }
.ai-recommendation-group { display: block; max-width: 100%; margin-top: 5px; color: var(--text-soft); border: 0; background: var(--bg-2); border-radius: 4px; padding: 2px 5px; font-size: 11px; }
.ai-recommendation-reason { display: -webkit-box; min-height: 3.5em; max-height: none; font-size: 11px; color: var(--muted); line-height: 1.75; margin: 8px 0 0; -webkit-line-clamp: 2; }
.ai-recommendation-risk { color: var(--warning-text); }
.ai-recommendation-alternative-meta { font-size: 10px; color: var(--muted); margin-top: 7px; }
.ai-recommendation-empty { padding: 30px; background: var(--panel); border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); }
.compact-summary { padding: 20px; }
.site-summary-metrics strong, .usage-summary-card > strong { color: var(--text-strong); text-shadow: none; }
/* Marketplace */
.workspace { display: block; margin-top: 0; margin-bottom: 34px; }
.section-count { white-space: nowrap; font-size: 11px; color: var(--primary); padding: 5px 11px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.table-panel.data-console { padding: 0; overflow: visible; }
.table-head { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 16px; padding: 21px 23px 17px; border-bottom: 1px solid var(--line); background: transparent; border-radius: var(--radius) var(--radius) 0 0; }
.primary-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; margin: 0; }
.market-search-field { display: flex; align-items: center; flex: 1 1 250px; gap: 9px; min-width: 180px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); height: 42px; }
.market-search-field { position: relative; }
.market-search-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1); }
.market-search-field > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }
.market-search-field:has(#groupSearch) > svg { color: var(--primary); }
.market-search-field #groupSearch { border: 0; background: transparent; box-shadow: none; min-width: 0; width: 100%; padding: 9px 0; min-height: 38px; font-size: 12px; }
.market-search-field kbd { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 4px; padding: 0 6px; font-size: 11px; }
.primary-filters .model-filter-control { flex: 0 1 175px; min-width: 140px; width: auto; }
/* A brief, subtle theme-colored hint; native placeholder text stays still. */
.primary-filters :is(.market-search-field, .model-filter-control) {
  position: relative;
  --search-frame-rgb: var(--primary-rgb);
}
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .primary-filters :is(.market-search-field, .model-filter-control):not(:focus-within):has(> :is(#groupSearch, #modelFilter):placeholder-shown)::before,
  .primary-filters :is(.market-search-field, .model-filter-control):not(:focus-within):has(> :is(#groupSearch, #modelFilter):placeholder-shown)::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
  }
  .primary-filters :is(.market-search-field, .model-filter-control):not(:focus-within):has(> :is(#groupSearch, #modelFilter):placeholder-shown)::before {
    inset: 0;
    border: 1px solid rgb(var(--search-frame-rgb));
    border-radius: 9px;
    box-shadow: 0 0 0 3px rgba(var(--search-frame-rgb), .09);
    animation: search-frame-pulse 5.8s ease-in-out infinite;
  }
  .primary-filters :is(.market-search-field, .model-filter-control):not(:focus-within):has(> :is(#groupSearch, #modelFilter):placeholder-shown)::after {
    left: 12px;
    bottom: 0;
    width: calc((100% - 24px) / 3);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgb(var(--search-frame-rgb)), transparent);
    animation: search-frame-sweep 5.8s ease-in-out infinite;
  }
}
@keyframes search-frame-pulse {
  0%, 38%, 100% { opacity: .12; }
  18% { opacity: .7; }
}
@keyframes search-frame-sweep {
  0%, 6% { opacity: 0; transform: translateX(0); }
  16% { opacity: .85; }
  34%, 100% { opacity: 0; transform: translateX(200%); }
}
.primary-filters input, .primary-filters select { font-size: 12px; }
.primary-filters select { flex: 0 0 auto; width: auto; min-width: 125px; }
.primary-filter-actions { display: flex; gap: 7px; margin-left: auto; }
.primary-filter-actions .secondary { font-size: 11px; min-height: 40px; padding: 8px 11px; }
.quick-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 28px; }
.filter-chip, .stable-filter-tip { min-height: 28px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; background: var(--panel); color: var(--muted); box-shadow: none; font-size: 11px; }
.filter-chip.is-active, .stable-filter-tip.is-active { background: var(--accent-soft); color: var(--primary); border-color: rgba(var(--primary-rgb), .35); box-shadow: none; }
.filter-chip:hover, .stable-filter-tip:hover { color: var(--primary); background: var(--accent-soft); }
.leaderboard-refresh-age { margin-left: auto; font-size: 10px; color: var(--muted); }
.quick-filter-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; flex: 1 1 0; width: auto; gap: 0 10px; min-width: 260px; margin-left: auto; }
.quick-filter-meta .leaderboard-refresh-age { margin-left: 0; }
.quick-filter-meta .rank-metric-guide { display: contents; }
.table-wrap { max-height: 760px; overflow: auto; border-radius: 0; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.table-wrap table { width: 100%; min-width: 1260px; border-collapse: separate; border-spacing: 0; table-layout: auto; }
th { height: 49px; padding: 12px; background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 16px 12px; font-size: 12px; border-bottom: 1px solid var(--line); color: var(--text-soft); background: transparent; }
.table-wrap thead th { top: 0; background: var(--panel-2); box-shadow: none; }
tbody tr:nth-child(even), tbody tr:nth-child(odd) { background: transparent; }
tbody tr:hover { background: rgba(var(--primary-rgb), .035); }
tbody tr:last-child td { border-bottom: 0; }
.site-name-cell, .site-name-column { min-width: 130px; max-width: 170px; }
.group-name-cell, .group-name-column { min-width: 130px; max-width: 170px; }
.site-link, .group-link { font-weight: 550; text-shadow: none; }
.site-link { color: var(--text-strong); }
.site-link:hover, .group-link:hover { color: var(--primary); }
.rate-strong { color: var(--primary); font-size: 16px; font-weight: 700; letter-spacing: -.4px; text-shadow: none; }
.status-pill, .platform-badge { border-radius: 5px; box-shadow: none; text-shadow: none; font-weight: 500; }
.platform-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; line-height: 18px; height: auto; min-height: 24px; white-space: nowrap; }
/* Inline brand marks from @lobehub/icons; see THIRD_PARTY_NOTICES.md. */
.platform-pill:is(.platform-openai, .platform-anthropic)::before { content: ""; display: block; flex: 0 0 14px; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--platform-icon) center / contain no-repeat; mask: var(--platform-icon) center / contain no-repeat; }
.platform-openai { background: var(--platform-openai-fill); color: var(--platform-openai); --platform-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M9.205%208.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357%201.356-.523%202.117-.523%202.854%200%204.662%202.212%204.662%204.566%200%20.167%200%20.357-.024.547l-4.71-2.759a.797.797%200%2000-.856%200l-5.97%203.473zm10.609%208.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473%201.95-1.118a.433.433%200%2001.476%200l4.543%202.617c1.309.76%202.189%202.378%202.189%203.948%200%201.808-1.07%203.473-2.76%204.163zM7.802%2012.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545%201.95-4.472%204.591-4.472%201%200%201.927.333%202.712.928L8.23%205.067c-.285.166-.428.404-.428.737v6.898zM12%2015.128l-2.795-1.57v-3.33L12%208.658l2.795%201.57v3.33L12%2015.128zm1.796%207.23c-1%200-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974%201.142c.167.095.238.238.238.428v5.233c0%202.545-1.974%204.472-4.614%204.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482%204.482%200%20014.21%206.327v5.423c0%20.333.143.571.428.738l5.947%203.449-1.95%201.118a.432.432%200%2001-.476%200zm-.262%203.9c-2.688%200-4.662-2.021-4.662-4.519%200-.19.024-.38.047-.57l4.686%202.71c.286.167.571.167.856%200l5.97-3.448v2.26c0%20.19-.07.333-.237.428l-4.543%202.616c-.619.357-1.356.523-2.117.523zm5.899%202.83a5.947%205.947%200%20005.827-4.756C22.287%2018.339%2024%2015.84%2024%2013.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498%200-3.401-2.759-5.947-5.946-5.947-.642%200-1.26.095-1.88.31A5.962%205.962%200%200010.205%200a5.947%205.947%200%2000-5.827%204.757C1.713%205.447%200%207.945%200%2010.49c0%201.666.713%203.283%201.998%204.448-.119.5-.19%201-.19%201.499%200%203.401%202.759%205.946%205.946%205.946.642%200%201.26-.095%201.88-.309a5.96%205.96%200%20004.162%201.713z%22%2F%3E%3C%2Fsvg%3E"); }
.platform-anthropic { background: var(--anthropic-fill); color: var(--anthropic); --platform-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4.709%2015.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0%2011.784l.055-.352.48-.321.686.06%201.52.103%202.278.158%201.652.097%202.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686%201.908%201.476%202.491%201.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97%202.97%200%2001-.104-.729L6.283.134%206.696%200l.996.134.42.364.62%201.414%201.002%202.229%201.555%203.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286%201.851-.559%202.903-.364%201.942h.212l.243-.242.985-1.306%201.652-2.064.73-.82.85-.904.547-.431h1.033l.76%201.129-.34%201.166-1.064%201.347-.881%201.142-1.264%201.7-.79%201.36.073.11.188-.02%202.856-.606%201.543-.28%201.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061%201.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093%201.068%202.006%201.81%202.509%202.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649%202.345%203.521.122%201.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674%207.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434%201.967-2.18%202.945-1.726%201.845-.414.164-.717-.37.067-.662.401-.589%202.388-3.036%201.44-1.882.93-1.086-.006-.158h-.055L4.132%2018.56l-1.13.146-.487-.456.061-.746.231-.243%201.908-1.312-.006.006z%22%2F%3E%3C%2Fsvg%3E"); }
.platform-deepseek { --platform-rgb: 8, 126, 139; }
.platform-gemini { --platform-image: url("/assets/gemini-color-05a4e89d3458.png"); --platform-rgb: 66, 133, 244; --platform-gradient: linear-gradient(45deg, #4285f4 20%, #9b72cb 80%); --platform-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.616%2010.835a14.147%2014.147%200%2001-4.45-3.001%2014.111%2014.111%200%2001-3.678-6.452.503.503%200%2000-.975%200%2014.134%2014.134%200%2001-3.679%206.452%2014.155%2014.155%200%2001-4.45%203.001c-.65.28-1.318.505-2.002.678a.502.502%200%20000%20.975c.684.172%201.35.397%202.002.677a14.147%2014.147%200%20014.45%203.001%2014.112%2014.112%200%20013.679%206.453.502.502%200%2000.975%200c.172-.685.397-1.351.677-2.003a14.145%2014.145%200%20013.001-4.45%2014.113%2014.113%200%20016.453-3.678.503.503%200%20000-.975%2013.245%2013.245%200%2001-2.003-.678z%22%2F%3E%3C%2Fsvg%3E"); }
.platform-grok { --platform-rgb: 83, 97, 117; }
.platform-zhipu { --platform-rgb: 120, 80, 201; }
.platform-kimi { --platform-rgb: 186, 57, 125; }
.platform-minimax { --platform-rgb: 159, 18, 57; --platform-fill: #ffe4e9; }
html[data-theme="soft"] .platform-minimax { --platform-rgb: 173, 49, 85; --platform-fill: rgba(173, 49, 85, .10); }
html[data-theme="night"] .platform-minimax { --platform-rgb: 245, 162, 188; --platform-fill: rgba(245, 162, 188, .12); }
.platform-pill:is(.platform-gemini, .platform-deepseek, .platform-grok, .platform-zhipu, .platform-kimi, .platform-minimax), .hero-channel-symbol:is(.platform-gemini, .platform-deepseek, .platform-grok, .platform-zhipu, .platform-kimi, .platform-minimax) { color: rgb(var(--platform-rgb)); background: rgba(var(--platform-rgb), .12); }
.platform-pill.platform-minimax, .hero-channel-symbol.platform-minimax { background: var(--platform-fill); }
html[data-theme="night"] .platform-gemini { --platform-rgb: 153, 185, 255; }
html[data-theme="night"] .platform-deepseek { --platform-rgb: 97, 206, 217; }
html[data-theme="night"] .platform-grok { --platform-rgb: 203, 213, 225; }
html[data-theme="night"] .platform-zhipu { --platform-rgb: 198, 165, 255; }
html[data-theme="night"] .platform-kimi { --platform-rgb: 246, 164, 208; }
.platform-pill:is(.platform-gemini, .platform-deepseek, .platform-grok, .platform-zhipu, .platform-kimi, .platform-minimax)::before, .hero-channel-symbol:is(.platform-gemini, .platform-deepseek, .platform-grok, .platform-zhipu, .platform-kimi, .platform-minimax)::before { content: ""; display: block; flex: 0 0 14px; width: 14px; height: 14px; background: var(--platform-gradient, currentColor); -webkit-mask: var(--platform-icon) center / contain no-repeat; mask: var(--platform-icon) center / contain no-repeat; }
.platform-pill.platform-gemini::before,
.hero-channel-symbol.platform-gemini::before,
.ai-recommendation-tab.platform-gemini::before,
.brand-provider-icon.platform-gemini::before {
  background: var(--platform-image) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}
.platform-deepseek { --platform-icon: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20height%3D%221em%22%20style%3D%22flex%3Anone%3Bline-height%3A1%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M23.748%204.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434%201.202-.422%201.84.027%201.436.633%202.58%201.838%203.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526%205.526%200%2001-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365%2011.365%200%2000-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055%203.055%200%2001-.465.137%209.597%209.597%200%2000-2.883-.102c-1.885.21-3.39%201.102-4.497%202.623C.082%208.606-.231%2010.684.152%2012.85c.403%202.284%201.569%204.175%203.36%205.653%201.858%201.533%203.997%202.284%206.438%202.14%201.482-.085%203.133-.284%204.994-1.86.47.234.962.327%201.78.397.63.059%201.236-.03%201.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926%201.096-1.296%202.746-2.642%203.392-7.003.05-.347.007-.565%200-.845-.004-.17.035-.237.23-.256a4.173%204.173%200%20001.545-.475c1.396-.763%201.96-2.015%202.093-3.517.02-.23-.004-.467-.247-.588zM11.581%2018c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696%204.696%200%20011.529-.039c2.132.312%203.946%201.265%205.468%202.774.868.86%201.525%201.887%202.202%202.891.72%201.066%201.494%202.082%202.48%202.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306%200%2001.415-.287.302.302%200%2001.2.288.306.306%200%2001-.31.307.303.303%200%2001-.304-.308zm3.11%201.596c-.2.081-.399.151-.59.16a1.245%201.245%200%2001-.798-.254c-.274-.23-.47-.358-.552-.758a1.73%201.73%200%2001.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559%200%2001-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136%201.146.016.352.144.618.408%201.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.platform-grok { --platform-icon: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20height%3D%221em%22%20style%3D%22flex%3Anone%3Bline-height%3A1%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.27%2015.29l7.978-5.897c.391-.29.95-.177%201.137.272.98%202.369.542%205.215-1.41%207.169-1.951%201.954-4.667%202.382-7.149%201.406l-2.711%201.257c3.889%202.661%208.611%202.003%2011.562-.953%202.341-2.344%203.066-5.539%202.388-8.42l.006.007c-.983-4.232.242-5.924%202.75-9.383.06-.082.12-.164.179-.248l-3.301%203.305v-.01L9.267%2015.292M7.623%2016.723c-2.792-2.67-2.31-6.801.071-9.184%201.761-1.763%204.647-2.483%207.166-1.425l2.705-1.25a7.808%207.808%200%2000-1.829-1A8.975%208.975%200%20005.984%205.83c-2.533%202.536-3.33%206.436-1.962%209.764%201.022%202.487-.653%204.246-2.34%206.022-.599.63-1.199%201.259-1.682%201.925l7.62-6.815%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.platform-zhipu { --platform-icon: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20height%3D%221em%22%20style%3D%22flex%3Anone%3Bline-height%3A1%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.991%2023.503a.24.24%200%2000-.244.248.24.24%200%2000.244.249.24.24%200%2000.245-.249.24.24%200%2000-.22-.247l-.025-.001zM9.671%205.365a1.697%201.697%200%20011.099%202.132l-.071.172-.016.04-.018.054c-.07.16-.104.32-.104.498-.035.71.47%201.279%201.186%201.314h.366c1.309.053%202.338%201.173%202.286%202.523-.052%201.332-1.152%202.38-2.478%202.327h-.174c-.715.018-1.274.64-1.239%201.368%200%20.124.018.23.053.337.209.373.54.658.96.8.75.23%201.517-.125%201.9-.782l.018-.035c.402-.64%201.17-.96%201.92-.711.854.284%201.378%201.226%201.099%202.167a1.661%201.661%200%2001-2.077%201.102%201.711%201.711%200%2001-.907-.711l-.017-.035c-.2-.323-.463-.58-.851-.711l-.056-.018a1.646%201.646%200%2000-1.954.746%201.66%201.66%200%2001-1.065.764%201.677%201.677%200%2001-1.989-1.279c-.209-.906.332-1.83%201.257-2.043a1.51%201.51%200%2001.296-.035h.018c.68-.071%201.151-.622%201.116-1.333a1.307%201.307%200%2000-.227-.693%202.515%202.515%200%2001-.366-1.403%202.39%202.39%200%2001.366-1.208c.14-.195.21-.444.227-.693.018-.71-.506-1.261-1.186-1.332l-.07-.018a1.43%201.43%200%2001-.299-.07l-.05-.019a1.7%201.7%200%2001-1.047-2.114%201.68%201.68%200%20012.094-1.101zm-5.575%2010.11c.26-.264.639-.367.994-.27.355.096.633.379.728.74.095.362-.007.748-.267%201.013-.402.41-1.053.41-1.455%200a1.062%201.062%200%20010-1.482zm14.845-.294c.359-.09.738.024.992.297.254.274.344.665.237%201.025-.107.36-.396.634-.756.718-.551.128-1.1-.22-1.23-.781a1.05%201.05%200%2001.757-1.26zm-.064-4.39c.314.32.49.753.49%201.206%200%20.452-.176.886-.49%201.206-.315.32-.74.5-1.185.5-.444%200-.87-.18-1.184-.5a1.727%201.727%200%20010-2.412%201.654%201.654%200%20012.369%200zm-11.243.163c.364.484.447%201.128.218%201.691a1.665%201.665%200%2001-2.188.923c-.855-.36-1.26-1.358-.907-2.228a1.68%201.68%200%20011.33-1.038c.593-.08%201.183.169%201.547.652zm11.545-4.221c.368%200%20.708.2.892.524.184.324.184.724%200%201.048a1.026%201.026%200%2001-.892.524c-.568%200-1.03-.47-1.03-1.048%200-.579.462-1.048%201.03-1.048zm-14.358%200c.368%200%20.707.2.891.524.184.324.184.724%200%201.048a1.026%201.026%200%2001-.891.524c-.569%200-1.03-.47-1.03-1.048%200-.579.461-1.048%201.03-1.048zm10.031-1.475c.925%200%201.675.764%201.675%201.706s-.75%201.705-1.675%201.705-1.674-.763-1.674-1.705c0-.942.75-1.706%201.674-1.706zm-2.626-.684c.362-.082.653-.356.761-.718a1.062%201.062%200%2000-.238-1.028%201.017%201.017%200%2000-.996-.294c-.547.14-.881.7-.752%201.257.13.558.675.907%201.225.783zm0%2016.876c.359-.087.644-.36.75-.72a1.062%201.062%200%2000-.237-1.019%201.018%201.018%200%2000-.985-.301%201.037%201.037%200%2000-.762.717c-.108.361-.017.754.239%201.028.245.263.606.377.953.305l.043-.01zM17.19%203.5a.631.631%200%2000.628-.64c0-.355-.279-.64-.628-.64a.631.631%200%2000-.628.64c0%20.355.28.64.628.64zm-10.38%200a.631.631%200%2000.628-.64c0-.355-.28-.64-.628-.64a.631.631%200%2000-.628.64c0%20.355.279.64.628.64zm-5.182%207.852a.631.631%200%2000-.628.64c0%20.354.28.639.628.639a.63.63%200%2000.627-.606l.001-.034a.62.62%200%2000-.628-.64zm5.182%209.13a.631.631%200%2000-.628.64c0%20.355.279.64.628.64a.631.631%200%2000.628-.64c0-.355-.28-.64-.628-.64zm10.38.018a.631.631%200%2000-.628.64c0%20.355.28.64.628.64a.631.631%200%2000.628-.64c0-.355-.279-.64-.628-.64zm5.182-9.148a.631.631%200%2000-.628.64c0%20.354.279.639.628.639a.631.631%200%2000.628-.64c0-.355-.28-.64-.628-.64zm-.384-4.992a.24.24%200%2000.244-.249.24.24%200%2000-.244-.249.24.24%200%2000-.244.249c0%20.142.122.249.244.249zM11.991.497a.24.24%200%2000.245-.248A.24.24%200%200011.99%200a.24.24%200%2000-.244.249c0%20.133.108.236.223.247l.021.001zM2.011%206.36a.24.24%200%2000.245-.249.24.24%200%2000-.244-.249.24.24%200%2000-.244.249.24.24%200%2000.244.249zm0%2011.263a.24.24%200%2000-.243.248.24.24%200%2000.244.249.24.24%200%2000.244-.249.252.252%200%2000-.244-.248zm19.995-.018a.24.24%200%2000-.245.248.24.24%200%2000.245.25.24.24%200%2000.244-.25.252.252%200%2000-.244-.248z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.platform-kimi { --platform-icon: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20height%3D%221em%22%20style%3D%22flex%3Anone%3Bline-height%3A1%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21.846%200a1.923%201.923%200%20110%203.846H20.15a.226.226%200%2001-.227-.226V1.923C19.923.861%2020.784%200%2021.846%200z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M11.065%2011.199l7.257-7.2c.137-.136.06-.41-.116-.41H14.3a.164.164%200%2000-.117.051l-7.82%207.756c-.122.12-.302.013-.302-.179V3.82c0-.127-.083-.23-.185-.23H3.186c-.103%200-.186.103-.186.23V19.77c0%20.128.083.23.186.23h2.69c.103%200%20.186-.102.186-.23v-3.25c0-.069.025-.135.069-.178l2.424-2.406a.158.158%200%2001.205-.023l6.484%204.772a7.677%207.677%200%20003.453%201.283c.108.012.2-.095.2-.23v-3.06c0-.117-.07-.212-.164-.227a5.028%205.028%200%2001-2.027-.807l-5.613-4.064c-.117-.078-.132-.279-.028-.381z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.platform-minimax { --platform-icon: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20height%3D%221em%22%20style%3D%22flex%3Anone%3Bline-height%3A1%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.278%202c1.156%200%202.093.927%202.093%202.07v12.501a.74.74%200%2000.744.709.74.74%200%2000.743-.709V9.099a2.06%202.06%200%20012.071-2.049A2.06%202.06%200%200124%209.1v6.561a.649.649%200%2001-.652.645.649.649%200%2001-.653-.645V9.1a.762.762%200%2000-.766-.758.762.762%200%2000-.766.758v7.472a2.037%202.037%200%2001-2.048%202.026%202.037%202.037%200%2001-2.048-2.026v-12.5a.785.785%200%2000-.788-.753.785.785%200%2000-.789.752l-.001%2015.904A2.037%202.037%200%200113.441%2022a2.037%202.037%200%2001-2.048-2.026V18.04c0-.356.292-.645.652-.645.36%200%20.652.289.652.645v1.934c0%20.263.142.506.372.638.23.131.514.131.744%200a.734.734%200%2000.372-.638V4.07c0-1.143.937-2.07%202.093-2.07zm-5.674%200c1.156%200%202.093.927%202.093%202.07v11.523a.648.648%200%2001-.652.645.648.648%200%2001-.652-.645V4.07a.785.785%200%2000-.789-.78.785.785%200%2000-.789.78v14.013a2.06%202.06%200%2001-2.07%202.048%202.06%202.06%200%2001-2.071-2.048V9.1a.762.762%200%2000-.766-.758.762.762%200%2000-.766.758v3.8a2.06%202.06%200%2001-2.071%202.049A2.06%202.06%200%20010%2012.9v-1.378c0-.357.292-.646.652-.646.36%200%20.653.29.653.646V12.9c0%20.418.343.757.766.757s.766-.339.766-.757V9.099a2.06%202.06%200%20012.07-2.048%202.06%202.06%200%20012.071%202.048v8.984c0%20.419.343.758.767.758.423%200%20.766-.339.766-.758V4.07c0-1.143.937-2.07%202.093-2.07z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.site-dot { box-shadow: none; }
.test-button { border: 1px solid var(--line); background: var(--accent-soft); color: var(--primary); border-radius: 6px; min-height: 32px; font-size: 11px; font-weight: 550; }
.status-pill { padding: 3px 7px; font-size: 10px; }
#managerSiteList .site-card-statuses .status-pill { padding-inline: 5px; }
@container manager-site-card (max-width: 280px) {
  #managerSiteList .site-card-statuses .status-pill { padding-inline: 3px; }
  #managerSiteList .site-card-statuses .site-card-private-status {
    width: 16px;
    padding: 0;
    border: 0;
    background: transparent;
  }
}
.group-model-summary { padding: 0; }
.group-model-item { font-size: 10px; }
.group-model-count { background: var(--bg-2); color: var(--text-soft); border-color: var(--line); }
.group-vote-button { border-color: var(--line); background: var(--panel); border-radius: 5px; color: var(--muted); }
.group-vote-button.is-up:is(.is-majority, :hover:not(:disabled)) { border-color: rgba(var(--success-rgb), .65); background: rgba(var(--success-rgb), .18); color: var(--success-text); }
.group-vote-button.is-down:is(.is-majority, :hover:not(:disabled)) { border-color: rgba(var(--danger-rgb), .65); background: rgba(var(--danger-rgb), .18); color: var(--danger-text); }
.group-vote-button.is-selected { box-shadow: inset 0 0 0 1px currentColor; }
.group-render-progress { border-top: 1px solid var(--line); color: var(--muted); background: var(--panel); padding: 14px 22px; font-size: 11px; }
.marketplace-disclosure { margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.9; color: var(--muted); background: var(--panel-2); border-radius: 0 0 var(--radius) var(--radius); }
.empty-cell { padding: 70px 20px; text-align: center; color: var(--muted); }
/* Pool and supporting sections */
.pool-board { margin-top: 34px; margin-bottom: 40px; padding: 23px; }
.pool-board-head { display: flex; align-items: center; gap: 20px; }
.pool-board-title strong { font-size: 19px; font-weight: 650; color: var(--text-strong); }
.pool-board-label-row .metric-label { color: var(--primary); font-size: 10px; }
.pool-board-compact-summary { margin-left: auto; }
.pool-board-meta { font-size: 10px; color: var(--muted); }
.pool-board-cards { gap: 13px; padding-top: 20px; }
.pool-plan-card { border-radius: 12px; border-color: var(--line); background: var(--bg); box-shadow: none; }
.guide-panel { padding: 35px 0 44px; margin-top: 0; }
.guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 29px; }
.guide-steps article { border-top: 1px solid var(--line); padding-top: 22px; position: relative; }
.guide-steps article > span { font-size: 30px; font-weight: 400; color: var(--line-strong); letter-spacing: -1px; }
.guide-steps h3 { margin: 13px 0 8px; font-size: 16px; color: var(--text-strong); font-weight: 600; }
.guide-steps p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.9; max-width: 330px; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; border-top: 1px solid var(--line); padding: 32px 0 25px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .brand-symbol { width: 48px; height: 48px; }
.footer-brand strong { color: var(--text); font-size: 14px; }
.footer-brand p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.footer-links { display: flex; gap: 22px; align-items: center; }
.footer-links a, .footer-links button { color: var(--muted); font-size: 11px; background: transparent; border: 0; padding: 0; }
.footer-links a:hover, .footer-links button:hover { color: var(--primary); }
.footer-note { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.site-footer .header-metrics { margin: 0; padding: 0; }
.public-visit-header { min-height: auto; padding: 0; border: 0; box-shadow: none; background: transparent; color: var(--muted); gap: 3px; }
.public-visit-message { font-size: 11px; }
.public-visit-message strong { color: var(--primary); font-size: 13px; text-shadow: none; }
.public-visit-header small { font-size: 10px; color: var(--muted); }
/* Authentication */
.login-shell { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: none; min-height: 100svh; padding: 0; margin: 0; align-items: stretch; justify-items: stretch; gap: 0; }
.auth-story { display: flex; flex-direction: column; justify-content: space-between; padding: 42px 60px 35px; background: radial-gradient(ellipse at 95% 80%, #92803d2e, transparent 65%), radial-gradient(ellipse at 10% 0, #0c604a66, transparent 70%), #0a1b15; color: #edf5ef; }
.auth-home { display: inline-flex; width: fit-content; gap: 12px; align-items: center; padding: 0; border: 0; background: transparent; color: #e0eee5; font-weight: 650; font-size: 16px; }
.auth-story-copy { padding: 70px 0; max-width: 470px; }
.auth-story-copy .section-kicker { color: #89baa4; font-size: 9px; }
.auth-story h2 { font-size: clamp(34px, 3.5vw, 54px); font-weight: 650; letter-spacing: -2px; line-height: 1.4; margin: 23px 0; background: linear-gradient(110deg, #aae9d1, #f1dfa0); background-clip: text; -webkit-text-fill-color: transparent; }
.auth-story-copy p { color: #99b8a7; font-size: 14px; line-height: 1.9; }
.auth-benefits { display: grid; gap: 22px; margin-top: 50px; }
.auth-benefits > span { display: grid; grid-template-columns: 26px 1fr; gap: 3px 13px; color: #80b59e; font-size: 12px; }
.auth-benefits strong { color: #d8eade; font-weight: 500; font-size: 13px; }
.auth-benefits small { grid-column: 2; color: #83a391; font-size: 11px; }
.auth-story-foot { font-size: 11px; color: #7e9d8c; }
.login-panel { display: flex; flex-direction: column; align-self: center; justify-self: center; position: relative; width: min(440px, calc(100% - 64px)); min-width: 0; padding: 28px; margin: 32px 0; gap: 20px; overflow: visible; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); background: var(--panel); }
.login-panel::before, .login-panel::after { display: none; }
.auth-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.auth-toolbar-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.auth-back { position: static; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 0; border: 0; background: none; color: var(--text-soft); font-size: 12px; }
.auth-back:hover { color: var(--primary); }
.login-panel .login-theme-toggle { position: static; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; margin-left: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.login-theme-toggle svg { width: 18px; height: 18px; }
.login-panel .eyebrow { color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .06em; margin: 0 0 8px; }
.login-panel h1 { font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: -.5px; color: var(--text-strong); margin: 0; overflow-wrap: anywhere; }
.auth-intro { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 8px 0 0; }
.login-panel > label { display: grid; min-width: 0; gap: 7px; color: var(--text-soft); font-size: 13px; }
.login-panel input { min-width: 0; width: 100%; min-height: 46px; height: auto; padding: 11px 12px; border-color: var(--line-strong); background: var(--input-solid); font-size: 15px; line-height: 1.4; }
.login-panel input:focus { border-color: var(--primary); outline: 3px solid rgba(var(--primary-rgb), .12); outline-offset: 0; box-shadow: none; }
.login-panel input:is(:autofill, :-webkit-autofill) { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 1000px var(--input-solid) inset; }
.login-panel > .primary { min-height: 46px; border-radius: 10px; margin: 0; font-size: 15px; }
.login-panel .auth-links { justify-content: space-between; gap: 8px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.login-panel .auth-links button { min-height: 36px; margin: 0; padding: 6px 0; font-size: 13px; }
.auth-registration-report-button {
  width: auto;
  max-width: min(220px, 100%);
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(var(--warning-rgb), .62);
  border-radius: 8px;
  background: rgba(var(--warning-rgb), .1);
  color: var(--warning-text);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}
.auth-registration-report-button > span:first-child {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}
.auth-registration-report-button:hover,
.auth-registration-report-button:focus-visible {
  border-color: var(--warning-text);
  background: rgba(var(--warning-rgb), .18);
  color: var(--text-strong);
}
.login-panel .auth-captcha-field { grid-template-columns: minmax(0, 1fr) 38px; gap: 8px; }
.login-panel .auth-captcha-field img { width: min(202px, 100%); max-width: 100%; object-fit: contain; }
.login-panel .auth-captcha-field input { grid-column: 1 / -1; }
.login-panel .auth-code-field { grid-template-columns: minmax(0, 1fr) 108px; gap: 8px; }
.login-panel #loginError { margin: 0; padding: 10px 12px; border: 1px solid rgba(var(--danger-rgb), .2); border-radius: 9px; background: rgba(var(--danger-rgb), .06); overflow-wrap: anywhere; }
.login-panel.is-code-mode #loginError, .registration-report-panel #registrationReportMessage { color: var(--danger); font-size: 16px; font-weight: 600; line-height: 1.65; overflow-wrap: anywhere; }
.login-panel #loginError:empty, .login-panel .auth-links:not(:has(button:not(.hidden))) { display: none; }
.error-text { font-size: 12px; color: var(--danger-text); }
/* Common modal chrome and specialist controls share the same palette. */
.modal { background: rgba(9, 27, 21, .42); backdrop-filter: blur(5px); padding: 28px; }
#themeSelectionModal { background: rgba(var(--surface-modal-rgb), .18); backdrop-filter: none; }
.modal-panel { max-height: calc(100dvh - 56px); border: 1px solid var(--line); border-radius: 17px; background: var(--panel); box-shadow: var(--shadow); color: var(--text); }
.modal-head { padding: 18px 23px; min-height: 68px; background: var(--panel); border-bottom: 1px solid var(--line); }
.modal-head h2, .modal-head h3 { font-size: 17px; font-weight: 650; color: var(--text-strong); letter-spacing: -.3px; text-shadow: none; }
.modal-head h2::before, .modal-head h3::before { display: none; }
.window-controls { gap: 5px; padding: 0; }
.window-control { border: 0; border-radius: 7px; color: var(--muted); background: var(--bg-2); box-shadow: none; width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
span.window-control { display: none; }
.window-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; line-height: 1; text-align: center; color: var(--muted); font-size: 22px; background: var(--panel-2); }
.window-close:hover { background: rgba(var(--danger-rgb), .1); color: var(--danger); }
#siteForm .site-mode-button {
  --mode-button-bg: #166fa7;
  color: #fff;
  background: var(--mode-button-bg);
  border-color: var(--mode-button-bg);
  font-weight: 650;
  white-space: nowrap;
}
html[data-theme="soft"] #siteForm .site-mode-button { --mode-button-bg: #416e91; }
html[data-theme="night"] #siteForm .site-mode-button { --mode-button-bg: #64b5ed; color: #102d40; }
#siteForm .site-mode-button:hover:not(:disabled) { background: color-mix(in srgb, var(--mode-button-bg) 92%, #000); }
#siteForm .site-mode-button:focus-visible { outline: 2px solid var(--mode-button-bg); outline-offset: 3px; }
@media (max-width: 360px) {
  #siteForm .modal-head { padding-inline: 12px; }
  #siteForm .site-mode-button { padding-inline: 7px; }
}
.modal-body { padding: 23px; background: var(--panel); }
.modal-sticky-zone { background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: none; }
.manager-toolbar, .admin-management-toolbar, .modal-actions { background: var(--panel-2); border-color: var(--line); padding: 16px 23px; }
.modal-actions { border-radius: 0 0 17px 17px; }
.modal-body :is(.settings-card, .admin-management-card, .refresh-settings-panel, .veridrop-settings-bar, .ai-recommendation-settings, .site-brand-settings, .group-model-dialog-item, .ai-recommendation-detail-metrics > div, .ai-recommendation-detail-data-grid > div) { border-color: var(--line); border-radius: 11px; box-shadow: none; background: var(--panel-2); }
.refresh-settings-toggle strong, .veridrop-settings-toggle strong { color: var(--text-strong); }
.refresh-settings-toggle > svg, .veridrop-settings-toggle > svg { color: var(--primary); }
.ai-recommendation-detail-copy.is-risk { background: rgba(var(--danger-rgb), .055); border-color: rgba(var(--danger-rgb), .18); border-radius: 10px; }
.ai-recommendation-detail-copy.is-risk :is(h3, p) { color: var(--danger-text); }
.history-card, .score-column-help-popover, .model-filter-menu, .availability-range-panel { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.history-card strong, .history-card-head strong { text-shadow: none; }
.toast { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.veridrop-batch-progress { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text-soft); padding: 16px; }
.veridrop-batch-progress-head strong { color: var(--text-strong); }
.veridrop-batch-progress-head :is(span, .veridrop-batch-progress-summary, .veridrop-batch-progress-timing) { color: var(--muted); font-weight: 400; }
.veridrop-batch-progress-track { background: var(--bg-2); }
.site-summary-metrics { display: flex; align-items: center; gap: 35px; }
.site-summary-metrics .summary-stat-block { border: 0; padding: 0; gap: 5px; }
.site-summary-metrics strong { font-size: 23px; }
.usage-period-switch button { color: var(--muted); background: var(--panel); border-color: var(--line); font-size: 11px; }
.usage-period-switch button.is-active { background: var(--accent-soft); color: var(--primary); border-color: var(--line); }
/* Responsive: keep every operation available, with a dedicated mobile menu. */
@media (min-width: 641px) { .mobile-group-cards, .mobile-availability-range-head { display: none; } }
@media (max-width: 1240px) {
  .topbar.command-bar { padding-inline: 26px; gap: 13px; }
  .brand-title-row h1 { font-size: 17px; }
  .site-nav a, .site-nav button { padding-inline: 11px; font-size: 12px; }
  .guest-feedback-button { display: none; }
  .hero-inner { gap: 40px; padding: 60px 48px 48px; }
  .hero-bottom { margin-inline: 48px; }
  .hero-stats { gap: 28px; }
  .hero-stats > div { flex-direction: column; gap: 0; }
  .provider-strip { gap: 24px; }
  .provider-strip-end { display: none; }
  .ai-recommendation-category { padding: 13px; }
  .ai-recommendation-category-head { flex-wrap: wrap; }
  .ai-recommendation-detail-actions { margin-top: 3px; }
  .primary-filters .market-search-field { flex-basis: 280px; }
  .primary-filters .model-filter-control { flex: 1 1 160px; }
}
@media (max-width: 960px) {
  .app-shell > :is(.provider-strip, .page-section-heading, .status-deck, .route-panel, .summary-grid, .workspace, .pool-board, .guide-panel, .site-footer, .sub2api-home-board) { width: calc(100% - 48px); }
  .topbar.command-bar { min-height: 72px; padding: 14px 24px; }
  .header-utility-stack { margin-left: 2px; }
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; position: absolute; top: 100%; left: 24px; right: 24px; padding: 12px; flex-wrap: wrap; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
  .site-nav a, .site-nav button { flex: 1 0 40%; padding: 12px; text-align: center; }
  .navigation-menu-button { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; order: 4; }
  .guest-access-bar { margin-left: auto; }
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 24px; padding: 48px 30px 40px; }
  .hero-copy h2 { font-size: 47px; letter-spacing: -2px; }
  .hero-copy > p { font-size: 12px; }
  .hero-actions { gap: 9px; }
  .hero-actions a { padding: 10px 14px; font-size: 12px; gap: 10px; }
  .hero-assurance { font-size: 10px; gap: 10px; }
  .hero-preview { transform: none; }
  .hero-preview-title { padding: 18px 16px 14px; }
  .hero-preview-title > span { font-size: 16px; }
  .hero-preview-head { padding: 12px 16px; }
  .hero-preview-head > span:first-child { font-size: 8px; }
  .hero-channel-list { padding-inline: 12px; }
  .hero-channel { padding: 11px 9px; gap: 8px; grid-template-columns: 29px minmax(0, 1fr) auto; }
  .hero-channel-symbol { width: 29px; height: 29px; }
  .hero-preview-foot { padding: 16px; font-size: 9px; }
  .hero-bottom { margin-inline: 30px; }
  .hero-data-note { font-size: 10px; }
  .hero-data-note small { font-size: 9px; }
  .provider-strip { gap: 20px; }
  .provider-strip > span:first-child { display: none; }
  .ai-recommendation-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ai-recommendation-category { padding: 17px; }
  .ai-recommendation-category-head { flex-wrap: nowrap; }
  .recommendation-section-heading { padding-top: 35px; }
  .page-section-heading h2 { font-size: 25px; }
  .pool-board-head { flex-wrap: wrap; gap: 12px; }
  .pool-board-meta { margin-left: auto; }
  .login-shell { grid-template-columns: minmax(0, 1fr); background: var(--bg); }
  .auth-story { display: none; }
  .login-panel { width: min(440px, calc(100% - 40px)); margin: 32px auto; }
  .top-actions.command-actions { flex-basis: 100%; justify-content: flex-start; order: 5; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 88px; }
  .app-shell > :is(.provider-strip, .page-section-heading, .status-deck, .route-panel, .summary-grid, .workspace, .pool-board, .guide-panel, .site-footer, .sub2api-home-board) { width: calc(100% - 36px); }
  .topbar.command-bar { gap: 8px; min-height: 67px; padding: 12px 18px; }
  .brand-cluster { gap: 7px; }
  .brand-symbol { width: 44px; height: 44px; }
  .brand-title-row { gap: 2px; }
  .brand-title-row h1 { font-size: 15px; letter-spacing: -.6px; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .is-public-view .brand-title-row h1 { max-width: clamp(90px, calc(100vw - 265px), 140px); }
  .header-utility-stack { gap: 0; margin-left: 3px; }
  .theme-toggle, .announcement-shortcut { width: 27px; height: 28px; min-height: 28px; }
  .theme-toggle svg, .announcement-shortcut svg { width: 15px; height: 15px; }
  .guest-access-bar { gap: 0; flex: 0 0 auto; }
  .guest-login { min-height: 34px; padding: 6px 10px; font-size: 11px; border-radius: 7px; }
  .guest-login-icon { display: none; }
  .guest-account-actions { display: flex; gap: 0; }
  .navigation-menu-button { margin-left: auto; width: 32px; height: 34px; min-height: 34px; border-radius: 7px; }
  .navigation-menu-button svg { width: 18px; height: 18px; }
  .site-nav.is-open { left: 18px; right: 18px; }
  .app-shell:not(.is-public-view) .navigation-menu-button { order: 2; margin-left: auto; }
  #adminHeaderMetrics { order: 3; display: flex; gap: 10px; flex-basis: 100%; margin: 2px 0 0; }
  #adminHeaderMetrics > button { flex: 1; min-width: 0; width: auto; margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  #adminHeaderMetrics > button > span { font-size: 9px; }
  .hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 34px; padding: 38px 24px 30px; }
  .hero-eyebrow { font-size: 10px; padding: 5px 10px; letter-spacing: .6px; }
  .hero-copy h2 { font-size: 46px; margin: 21px 0 18px; line-height: 1.2; letter-spacing: -2px; }
  .hero-copy > p { font-size: 12px; line-height: 1.95; }
  .hero-actions { margin-top: 24px; gap: 10px; }
  .hero-actions a { min-height: 44px; padding: 10px 16px; font-size: 12px; gap: 13px; }
  .hero-assurance { margin-top: 19px; gap: 16px; font-size: 9px; }
  .hero-preview-title { padding: 16px 17px 12px; }
  .hero-preview-title > span { font-size: 17px; }
  .hero-preview-title small { font-size: 10px; }
  .hero-channel-list { gap: 7px; padding-inline: 12px; }
  .hero-channel { grid-template-columns: 29px minmax(0, 1fr) auto; padding: 10px; }
  .hero-channel-copy strong { font-size: 12px; }
  .hero-channel-price strong { font-size: 14px; }
  .hero-preview-foot { padding: 14px 16px; }
  .hero-bottom { margin-inline: 24px; padding: 22px 0; flex-direction: column; align-items: stretch; gap: 20px; }
  .hero-stats { justify-content: space-between; gap: 12px; }
  .hero-stats strong { font-size: 24px; }
  .hero-stats span { font-size: 10px; }
  .hero-data-note { padding-top: 15px; border-top: 1px solid #ffffff10; }
  .provider-strip { min-height: 76px; gap: 15px; flex-wrap: wrap; padding: 18px 0; font-size: 10px; }
  .provider-strip strong { font-size: 15px; }
  .provider-glyph { font-size: 21px; }
  .provider-strip-divider { display: none; }
  .page-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 19px; }
  .page-section-heading h2 { font-size: 24px; margin: 7px 0; }
  .page-section-heading p { font-size: 11px; line-height: 1.8; }
  .section-kicker { font-size: 9px; letter-spacing: 1.5px; }
  .section-text-link { font-size: 11px; }
  .recommendation-section-heading { padding-top: 30px; }
  .summary-grid, .summary-grid.is-public { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 32px; }
  .ai-recommendation-head { gap: 10px; padding-bottom: 14px; }
  .ai-recommendation-primary-controls { width: 100%; justify-content: space-between; gap: 10px; }
  .ai-recommendation-title { font-size: 12px; }
  .ai-recommendation-head-status { width: 100%; justify-content: flex-start; gap: 8px; }
  .ai-recommendation-category-grid { grid-template-columns: 1fr; gap: 12px; }
  .ai-recommendation-category { padding: 17px; }
  .ai-recommendation-category-head { margin-bottom: 15px; flex-wrap: nowrap; }
  .recommendation-category-label { flex-direction: row; align-items: center; gap: 10px; }
  .recommendation-category-icon { width: 29px; height: 29px; }
  .ai-recommendation-detail-actions { align-self: center; margin: 0; }
  .ai-recommendation-detail-trigger { padding: 3px 7px; }
  .ai-recommendation-category-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ai-recommendation-category .ai-recommendation-choice + .ai-recommendation-choice { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 16px; margin: 0; }
  .ai-recommendation-site { font-size: 12px; }
  .ai-recommendation-reason { font-size: 10px; }
  .marketplace-heading { flex-direction: row; align-items: flex-start; gap: 8px; }
  .marketplace-heading p { max-width: 260px; }
  .marketplace-heading .section-count { font-size: 9px; padding: 4px 7px; margin-top: 27px; }
  .table-panel.data-console { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .table-head { gap: 12px; padding: 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
  .primary-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .primary-filters .market-search-field { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .primary-filters .model-filter-control { grid-column: 1 / -1; min-width: 0; width: 100%; }
  .primary-filters select { width: 100%; min-width: 0; font-size: 11px; }
  .primary-filter-actions { grid-column: 1 / -1; width: 100%; margin: 0; }
  .primary-filter-actions .secondary { min-height: 34px; flex: 1; }
  .quick-filter-bar { gap: 6px; }
  .filter-chip, .stable-filter-tip { font-size: 10px; padding: 4px 8px; }
  .quick-filter-meta { flex: 0 0 100%; width: 100%; gap: 0 8px; margin: 4px 0 0; }
  .quick-filter-meta .leaderboard-refresh-age { flex-basis: auto; margin: 0; font-size: 10px; }
  .table-wrap { display: none; }
  .mobile-availability-range-head { display: flex; justify-content: space-between; margin: 16px 0 10px; padding-inline: 3px; color: var(--muted); }
  .mobile-group-cards { display: grid; gap: 12px; padding: 0; }
  .mobile-group-card { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); box-shadow: var(--shadow-soft); }
  .mobile-group-card::before { display: none; }
  .mobile-group-card-head { border: 0; padding: 0; }
  .mobile-group-card .site-link { color: var(--text-strong); font-size: 13px; }
  .mobile-group-card .group-link { color: var(--text-soft); font-size: 12px; }
  .mobile-group-card .rate-strong { font-size: 23px; color: var(--primary); }
  .mobile-group-metrics, .mobile-group-card-metrics { background: var(--panel-2); border-radius: 9px; border-color: var(--line); }
  .mobile-group-card :is(.mobile-group-health, .mobile-group-card-health, .mobile-group-actions, .mobile-group-card-actions) { border-color: var(--line); }
  .mobile-group-details summary { font-size: 11px; color: var(--muted); }
  .group-render-progress { padding: 14px 8px; border: 0; background: transparent; }
  .marketplace-disclosure { padding: 14px 12px; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 10px; background: var(--panel-2); }
  .pool-board { padding: 17px; margin-top: 25px; margin-bottom: 25px; border-radius: 13px; }
  .pool-board-head { gap: 10px; }
  .pool-board-title { flex: 1; }
  .pool-board-title strong { font-size: 17px; }
  .pool-board-compact-summary { flex-basis: auto; margin: 0; }
  .pool-board-meta { order: 3; flex: 1 0 100%; margin: 0; justify-content: flex-start; gap: 8px; }
  .pool-board-cards { grid-template-columns: 1fr; gap: 10px; padding-top: 15px; }
  .guide-panel { padding: 20px 0 32px; }
  .guide-steps { grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
  .guide-steps article { display: grid; grid-template-columns: 40px 1fr; gap: 7px 15px; padding-top: 20px; }
  .guide-steps article > span { grid-row: span 2; font-size: 26px; }
  .guide-steps h3 { margin: 0; font-size: 14px; }
  .guide-steps p { grid-column: 2; font-size: 11px; }
  .site-footer { gap: 24px; padding: 25px 0; }
  .footer-brand { flex-basis: 100%; }
  .site-footer .header-metrics { flex-basis: 100%; }
  .footer-note { line-height: 1.8; margin: 0; }
  .login-shell { align-items: start; }
  .login-panel { width: min(440px, calc(100% - 32px)); margin: 24px auto; padding: 22px; gap: 18px; border-radius: 16px; }
  .login-panel h1 { font-size: 24px; }
  .login-panel input { font-size: 16px; }
  .modal { padding: 10px; }
  .modal-panel { max-height: calc(100dvh - 20px); border-radius: 13px; }
  /* One vertical viewport on phones: title, filters, content and actions travel
     together instead of squeezing the results into a small inner scroller. */
  .modal > .modal-panel {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .modal > .modal-panel > * { flex-shrink: 0; }
  .modal > .modal-panel .modal-body {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
  .modal-head { min-height: 58px; padding: 15px 17px; }
  .modal-head h2, .modal-head h3 { font-size: 15px; }
  .modal-body { padding: 17px; }
  .manager-toolbar, .admin-management-toolbar, .modal-actions { padding: 13px 17px; }
}
@media (max-width: 374px) {
  .topbar.command-bar { padding-inline: 12px; gap: 6px; }
  .brand-title-row h1 { max-width: 110px; font-size: 14px; }
  .header-utility-stack { margin-left: 0; }
  .hero-copy h2 { font-size: 42px; }
  .hero-inner { padding-inline: 20px; }
  .hero-actions a { padding-inline: 12px; gap: 8px; }
  .hero-assurance { gap: 9px; }
  .marketplace-heading { flex-direction: column; }
  .marketplace-heading .section-count { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .brand-orb { transform: translate(-50%, -50%) !important; will-change: auto; }
}

/* Admin access settings: long addresses remain readable on narrow screens. */
.modal-panel.access-control-panel { width: min(600px, 100%); }

/* Animate the theme surfaces, not thousands of chart points, SVG paths and
   offscreen row descendants. Text inherits its surface's interpolated color.
   Avoid per-frame shadow/filter work; rapid choices still retarget smoothly. */
@media (prefers-reduced-motion: no-preference) {
  /* Normal hover transitions would otherwise animate every ranking action
     when theme variables change. The surface rules below opt controls in. */
  html.ui-theme-transitioning :is(button, a, input, select, textarea) {
    transition: none !important;
  }
  html.ui-theme-transitioning,
  html.ui-theme-transitioning :is(body, .topbar, .site-nav, .discovery-hero,
    .cockpit-card, .table-panel, .table-head, .pool-board, .route-panel, .guide-panel,
    .sub2api-home-board, .mobile-group-card, .mobile-group-card-metrics,
    .login-panel, .modal, .modal-panel, .modal-head, .modal-body, .modal-actions,
    .theme-option, .theme-option-copy, .ai-recommendation-category),
  html.ui-theme-transitioning #themeSelectionModal :is(button, p, h2, strong, small, .section-kicker),
  html.ui-theme-transitioning #siteNavigation :is(button, a, h1, .theme-control-label),
  html.ui-theme-transitioning #loginView :is(input, button, h2, p, label) {
    transition: background-color 480ms linear, color 480ms linear,
      border-color 480ms linear !important;
  }
}
.access-control-body { display: grid; gap: 12px; min-width: 0; }
.access-control-toggle { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.access-control-toggle input { flex: 0 0 auto; }
.access-control-body > p, .access-control-add-actions p { margin: 0; }
.access-control-add-label { display: grid; gap: 7px; min-width: 0; }
.access-control-add-label textarea { width: 100%; min-width: 0; resize: vertical; }
.access-control-add-actions, .access-control-list-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.access-control-add-actions .form-hint { flex: 1; min-width: 0; }
.access-control-list-head { flex-wrap: wrap; }
.access-control-email-list { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; min-width: 0; }
.access-control-email-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); min-width: 0; }
.access-control-email-list li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.access-control-delete { flex: 0 0 auto; }
.access-control-empty { color: var(--muted); font-size: 12px; }
.access-control-body .error-text:empty { display: none; }

/* Compact checkbox aligned with the existing advanced filter controls. */
.iq-filter-control { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--text-soft); font-size: 13px; cursor: pointer; }
.iq-filter-control input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--primary); }

/* Acceptance stays reachable even when the announcement fills a phone screen. */
.modal > .announcement-public-panel { min-height: 0; overflow: hidden; }
.modal > .announcement-public-panel .announcement-public-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.announcement-public-actions button { min-height: 44px; }