:root {
  --tool-ink: #172033;
  --tool-muted: #64748b;
  --tool-line: #e2e8f0;
  --tool-soft: #f8fafc;
  --tool-accent: #2563eb;
  --tool-accent-soft: #eff6ff;
}

body.tool-page {
  margin: 0;
  color: var(--tool-ink);
  background: #f8fafc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tool-page-main { max-width: 1440px; margin: 0 auto; padding: 22px 28px 64px; }
.tool-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.tool-brand { color: var(--tool-ink); font-weight: 760; text-decoration: none; letter-spacing: -.02em; }
.tool-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-nav a { color: var(--tool-muted); padding: 8px 11px; border-radius: 9px; text-decoration: none; font-size: 14px; }
.tool-nav a:hover, .tool-nav a[aria-current="page"] { color: var(--tool-accent); background: var(--tool-accent-soft); }
.tool-breadcrumb { display: flex; gap: 9px; color: var(--tool-muted); font-size: 13px; margin: 4px 0 18px; }
.tool-breadcrumb a { color: inherit; }
.tool-hero { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.tool-hero h1 { margin: 4px 0 8px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.04em; }
.tool-hero p { max-width: 720px; margin: 0; color: var(--tool-muted); line-height: 1.7; }
.tool-eyebrow { margin: 0; color: var(--tool-accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tool-panel { background: #fff; border: 1px solid var(--tool-line); border-radius: 16px; box-shadow: 0 8px 32px rgba(15, 23, 42, .04); }
.tool-count { color: var(--tool-muted); font-size: 13px; }
.tool-table-wrap { overflow-x: auto; }
.tool-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.tool-table th, .tool-table td { padding: 12px 10px; border-bottom: 1px solid var(--tool-line); text-align: left; vertical-align: top; }
.tool-table th { color: var(--tool-muted); background: var(--tool-soft); font-weight: 700; white-space: nowrap; }
.tool-table tr:hover td { background: #fbfdff; }
.tool-table a { color: var(--tool-accent); }
.tool-tag { display: inline-block; margin: 0 4px 4px 0; padding: 3px 7px; border-radius: 999px; background: var(--tool-soft); color: var(--tool-muted); font-size: 11px; }
.tool-empty { padding: 52px 20px; text-align: center; color: var(--tool-muted); }
.tool-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--tool-line); color: var(--tool-muted); font-size: 13px; }
.tool-page .usage-explorer { margin-top: 0; }
.tool-page .platform-catalog { margin-top: 0; }
.tool-page .platform-card-grid { margin-top: 14px; }
.tool-page .monitor-toolbar { position: static; }
.platform-hub-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.platform-hub-tools input { flex: 1 1 260px; border: 1px solid var(--tool-line); border-radius: 10px; padding: 11px 12px; font: inherit; }
.platform-hub-tools select { border: 1px solid var(--tool-line); border-radius: 10px; padding: 11px 12px; background: #fff; }
.platform-hub-panel { padding: 14px; }
.hub-tag { border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #475569; padding: 6px 10px; cursor: pointer; margin: 0 5px 5px 0; }
.hub-tag.is-active { background: var(--tool-accent-soft); border-color: #93c5fd; color: #1d4ed8; }
.platform-guide-directory { padding: 18px; margin-top: 28px; }
.hub-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hub-guide-card { display: flex; flex-direction: column; gap: 7px; padding: 16px; background: #fff; border: 1px solid var(--tool-line); border-radius: 12px; color: var(--tool-ink); text-decoration: none; }
.hub-guide-card span { color: var(--tool-muted); font-size: 13px; line-height: 1.5; }
.hub-guide-card span:last-child { color: var(--tool-accent); }
.plan-filter-panel { padding: 14px; margin-bottom: 12px; }
.plan-filter-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plan-filter-columns details { border: 1px solid var(--tool-line); border-radius: 10px; padding: 9px; }
.plan-filter-columns summary { cursor: pointer; color: var(--tool-muted); font-size: 13px; font-weight: 700; }
.plan-checks { max-height: 190px; overflow: auto; margin-top: 7px; }
.plan-checks-tall { max-height: 240px; }
.plan-checks label { display: flex; gap: 7px; padding: 5px 2px; font-size: 12px; line-height: 1.35; }
.plan-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tool-line); font-size: 13px; }
.plan-filter-row label { display: inline-flex; align-items: center; gap: 5px; color: var(--tool-muted); }
.plan-filter-row select, .plan-filter-row input { max-width: 120px; border: 1px solid var(--tool-line); border-radius: 7px; padding: 7px; background: #fff; }
.plan-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tool-line); color: var(--tool-muted); font-size: 12px; }
.plan-range-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.plan-range-row input { width: 76px; border: 1px solid var(--tool-line); border-radius: 7px; padding: 6px; }
.plan-count { margin: 10px 0; }
.table-sort-button { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: inherit; min-height: 32px; padding: 0; }
.tool-muted { color: var(--tool-muted); font-size: 11px; }

@media (max-width: 800px) {
  .tool-page-main { padding: 16px 14px 44px; }
  .tool-topbar, .tool-hero { align-items: flex-start; flex-direction: column; gap: 12px; }
  .tool-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .tool-nav a { white-space: nowrap; }
  .tool-footer { flex-direction: column; }
  .plan-filter-columns, .plan-range-grid { grid-template-columns: 1fr; }
}



.plan-selection-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plan-selection-tools input { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px; }
.plan-checks label[hidden] { display: none; }

#plansPage .plan-note { min-width: 480px; white-space: pre-line; }

/* Complete tools share the site's compact navigation and working surface. */
body.tool-page { --tool-page-width: 1460px; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; line-height: 1.6; font-family: var(--font-ui); }
body.tool-page.ultra-wide { --tool-page-width: 1920px; }
.tool-page { --tool-accent: var(--accent-primary); --tool-ink: var(--text-primary); --tool-muted: var(--text-secondary); --tool-line: var(--border-color); }
.tool-page-main { max-width: var(--tool-page-width, 1460px); padding: 0 40px 48px; }
.tool-topbar { min-height: 76px; margin-bottom: 24px; justify-content: flex-start; gap: 44px; border-bottom: 1px solid var(--border-color); }
.tool-brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 11px; font-size: 19px; color: var(--text-primary); letter-spacing: -.03em; }
.tool-brand::before { content: ""; display: inline-block; vertical-align: middle; width: 35px; height: 35px; background: url("/assets/brand-mark.svg?v=260924a") center / contain no-repeat; margin-right: 0; flex-shrink: 0; }
.tool-nav a { font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 6px; }
.tool-breadcrumb { margin-bottom: 12px; font-size: 12px; }
.tool-page a { text-decoration: none; }
.tool-page a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tool-hero { margin: 26px 0 28px; align-items: center; }
.tool-hero h1 { font-size: clamp(24px, 3vw, 30px); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.tool-hero p { font-size: 14px; line-height: 1.65; }
.tool-panel { border-radius: 12px; box-shadow: var(--shadow-sm); }
.tool-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; font: inherit; font-size: 13px; white-space: nowrap; }
.tool-result-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0 12px; font-size: 13px; }
.tool-result-bar input[type="search"] { width: min(320px, 100%); padding: 8px 12px; border: 1px solid var(--border-color); background: white; border-radius: 8px; font: inherit; }
.tool-result-bar .tool-count { margin-right: auto; }
.tool-result-bar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tool-page input[type="checkbox"] { accent-color: var(--accent-primary); }
.tool-page .platform-card { border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.tool-page .platform-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.tool-page .platform-dimensions li { background: #f7f9fc; border-radius: 8px; }
.tool-page .platform-name-link { font-size: 16px; }
.tool-page .platform-rating { font-size: 12px; }
.tool-page .platform-summary { min-height: 40px; }
.platform-guide-directory h2 { font-size: 20px; margin-bottom: 14px; }
.tool-page .platform-detail-dialog { background: #fff; border-radius: 14px; }
.tool-page .tool-table { table-layout: fixed; font-size: 13px; }
#plansPage .tool-table { min-width: 1600px; }
#plansPage.show-all-columns .tool-table { min-width: 2460px; }
#plansPage .tool-table :is(th,td) { overflow-wrap: anywhere; padding: 8px 10px; }
#plansPage .tool-table [data-plan-col="identity"] { width: 260px; position: sticky; left: 0; z-index: 2; background: var(--plan-row-bg, #fff); border-right: 1px solid var(--border-light); }
#plansPage .tool-table [data-plan-col="models"] { width: 340px; }
#plansPage .tool-table [data-plan-col="monthlyToken"] { width: 170px; }
#plansPage .tool-table [data-plan-col="note"] { width: 640px; }
#plansPage .tool-table [data-plan-col="firstMonthPrice"] { width: 112px; }
#plansPage .tool-table :is([data-plan-col="monthlyPrice"], [data-plan-col="quarterlyPrice"], [data-plan-col="yearlyPrice"], [data-plan-col="requestQuota.fiveHours"], [data-plan-col="requestQuota.weekly"], [data-plan-col="requestQuota.monthly"]) { width: 104px; }
#plansPage .tool-table [data-plan-col="benefits"] { width: 220px; }
#plansPage .tool-table [data-plan-col="rating"] { width: 76px; }
#plansPage .plan-rating { display: inline-flex; white-space: nowrap; background: var(--bg-tertiary); padding: 4px 8px; border-radius: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
#plansPage .plan-rating[aria-label="待评定"] { font-weight: 400; }
#plansPage:not(.show-all-columns) [data-plan-extra] { display: none; }
#plansPage .tool-table th { font-size: 12px; color: var(--text-secondary); background: #f4f7fb; }
#plansPage .tool-table th[data-plan-col="identity"] { background: #f4f7fb; }
#plansPage .tool-table td[data-plan-col="firstMonthPrice"] { color: var(--accent-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
#plansPage .plan-identity { display: flex; align-items: flex-start; gap: 6px; }
#plansPage .plan-identity-copy { min-width: 0; }
#plansPage .plan-title { color: var(--text-primary); font-weight: 600; line-height: 1.5; }
#plansPage a.plan-title:hover { color: var(--accent-primary); }
#plansPage .plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
#plansPage .plan-meta:empty { display: none; }
#plansPage .plan-identity-heading { display: flex; align-items: center; gap: 4px; }
#plansPage .plan-identity-heading > span { color: var(--text-muted); }
#plansPage .table-sort-button.is-active-sort { color: var(--accent-primary); }
#plansPage tr.is-pinned { --plan-row-bg: #f0f5fc; }
#plansPage tr.is-pinned > td { background: var(--plan-row-bg); }
#plansPage tr.is-pinned > td:first-child { box-shadow: inset 3px 0 #a5b9d1; }
#plansPage .plan-status { display: inline-flex; }
#plansPage [data-plan-status="restricted"] { color: #926332; background: #fff7ed; border-color: #ead2ae; }
@media(max-width:800px) {
  #plansPage .tool-table [data-plan-col="identity"], #plansPage:not(.show-all-columns) .tool-table [data-plan-col="identity"] { width: 200px; }
  #plansPage .tool-table :is(th,td) { padding: 8px; }
  #plansPage a.plan-title { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
  #plansPage a.plan-title .link-icon { flex-shrink: 0; }
}
#plansPage .table-sort-button[aria-pressed="true"] { color: var(--accent-primary); }
.tool-page .tool-tag { border-radius: 5px; background: #edf2f8; color: var(--text-secondary); font-size: 12px; padding: 2px 5px; }
.tool-page .table-sort-button { text-align: left; }
.tool-page th[aria-sort="ascending"] button, .tool-page th[aria-sort="descending"] button { color: var(--accent-primary); }
.tool-page .is-full-tool .usage-heading, .tool-page .is-full-tool .usage-explorer-heading { display: none; }
.tool-page .usage-chart-card, .tool-page .usage-presets { border-radius: 12px; box-shadow: var(--shadow-sm); }
.tool-page .usage-chart-head h3 { font-size: 16px; }
.tool-page .usage-chart-head p { font-size: 12px; }
.tool-secondary { margin-top: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; }
.tool-secondary > summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.tool-secondary[open] > summary { margin-bottom: 14px; }
.tool-page .monitor-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; padding: 10px 14px; box-shadow: none; border-radius: 10px; }
.tool-page .monitor-toolbar .filter-trailing { margin-left: auto; }
.tool-unified-active .monitor-toolbar .monitor-control, .tool-unified-active #monitorClearFilters { display: none; }
.tool-page .monitor-toolbar .checkbox-label { display: inline-flex; align-items: center; gap: 7px; }
.tool-page .monitor-board-panel { border-radius: 12px; box-shadow: var(--shadow-sm); }
.monitor-retry { display: block; margin: 14px auto 0; }
.tool-page .tool-empty p { margin-bottom: 14px; }
.tool-page :is(button, a, input, select, summary):focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
@media (min-width: 1340px) { .platform-hub-page .platform-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .tool-page .platform-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .tool-page-main { padding: 0 14px 32px; }
  .tool-topbar { gap: 10px; padding: 16px 0 10px; margin-bottom: 14px; }
  .tool-nav { gap: 2px; }
  .tool-nav a { font-size: 13px; padding: 7px 9px; }
  .tool-hero { gap: 12px; margin-bottom: 16px; }
  .tool-hero h1 { font-size: 24px; }
  .tool-hero p { font-size: 13px; }
  .tool-page .platform-card-grid { grid-template-columns: 1fr; }
  .tool-page .platform-card { padding: 16px; }
  .tool-page .filter-state-grid { gap: 8px; }
  .tool-page .usage-chart-head { flex-wrap: wrap; }
  .tool-page .tool-footer { font-size: 12px; }
}

.tool-page .platform-models { display: flex; gap: 5px; flex-wrap: wrap; }
.tool-page .platform-card-links { margin-top: auto; }
.plan-cell-more > summary { font-size: 12px; color: var(--accent-primary); cursor: pointer; margin-top: 3px; }
.plan-cell-more[open] > summary { margin-bottom: 5px; }

body.tool-page { padding: 0; }
.tool-page .platform-detail-dim { background: #f4f7fb; border-color: var(--border-light); }
.tool-legend > summary { color: var(--text-secondary); font-size: 12px; cursor: pointer; margin: 8px 0; }
.tool-page .filter-picker > summary > span:first-child { white-space: nowrap; }
@media (max-width: 800px) { .tool-hero { align-items: flex-start; } }

/* 可比较的数据用等宽数字；导航、按钮保留一致的命中区。 */
.tool-page :is(th, td, .tool-count, .platform-rating) { font-variant-numeric: tabular-nums; }
.tool-page .tool-brand:hover, .tool-page .tool-nav a:hover, .tool-page .tool-button:hover { text-decoration: none; }
.tool-page .tool-nav a[aria-current="page"] { background: #e7effa; color: #075dbd; }
.tool-page .tool-table-wrap { border-radius: 10px; scrollbar-width: thin; }
.tool-page .tool-table th { font-weight: 600; }
.tool-page .tool-table tbody tr:last-child td { border-bottom: 0; }
.tool-page th .table-sort-button::after { content: " ↕"; opacity: .45; font-weight: 400; }
.tool-page th[aria-sort="ascending"] .table-sort-button::after { content: " ↑"; opacity: 1; }
.tool-page th[aria-sort="descending"] .table-sort-button::after { content: " ↓"; opacity: 1; }
.tool-result-bar input[type="search"] { min-height: 40px; }
.hub-guide-card { transition: border-color .15s; }
.hub-guide-card:hover { border-color: #a5b9d1; }
.tool-page .hub-guide-card:hover { text-decoration: none; }
@media (max-width: 800px) {
  .tool-page-main { padding: 0 18px 36px; }
  .tool-topbar { align-items: flex-start; gap: 10px; }
  .tool-brand { font-size: 17px; }
  .tool-brand::before { width: 30px; height: 30px; }
  .tool-hero { margin: 20px 0; }
  .tool-page .tool-nav a { min-height: 38px; }
}

#plansPage .tool-table :is(th,td)[data-plan-col]:not([data-plan-col="identity"]):not([data-plan-col="models"]):not([data-plan-col="benefits"]):not([data-plan-col="note"]):not([data-plan-col="action"]) { text-align: right; }
#plansPage .tool-table th[data-plan-col]:not([data-plan-col="identity"]):not([data-plan-col="models"]):not([data-plan-col="benefits"]):not([data-plan-col="note"]) .table-sort-button { text-align: right; }
#plansPage .tool-table td:first-child strong { font-weight: 600; }

.tool-loading { min-height: 280px; display: grid; place-items: center; color: var(--text-secondary); font-size: 13px; }
/* 平台中心：精选按钮、暂停筛选与统一卡片网格。 */
:is(.platform-hub-page, .plans-page) .platform-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:is(.platform-hub-page, .plans-page) .platform-filter-fields { flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 0; margin: 0; border: 0; }
.platform-filter-fields legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.platform-featured-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
:is(.platform-hub-page, .plans-page) .is-featured-mode .platform-filter-fields { opacity: .6; filter: grayscale(1); pointer-events: none; }
:is(.platform-hub-page, .plans-page) .is-search-paused input { opacity: .6; background: var(--bg-tertiary); cursor: not-allowed; }
.platform-hub-page .platform-count-main { white-space: nowrap; }
.platform-hub-page .platform-card > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.platform-hub-page .platform-card-heading { overflow-wrap: anywhere; }
.platform-hub-page { --platform-featured-color: #946c35; --platform-featured-border: #d3bd98; }
body.platform-hub-page .platform-card.is-featured:not(.is-pinned) { border-color: var(--platform-featured-border); }
body.platform-hub-page .platform-card.is-pinned { border-color: #a5b9d1; }
.platform-featured-badge { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid #e4d1b2; border-radius: 5px; background: #fff8ec; color: var(--platform-featured-color, #946c35); font-size: 12px; line-height: 1.5; white-space: nowrap; }

#plansPage th[aria-sort="ascending"] .table-sort-button:not(.is-active-sort)::after, #plansPage th[aria-sort="descending"] .table-sort-button:not(.is-active-sort)::after { content: " ↕"; opacity: .45; }

#plansPage .plan-identity-copy > .platform-featured-badge{margin-left:6px;vertical-align:middle}