[hidden] { display: none !important; }
.tool-stage { border-block: 1px solid var(--line); background: #f6faf8; padding: 38px 0; }
.tool-panel { border: 1px solid #b8c9c4; border-radius: 8px; background: #fff; padding: 24px; box-shadow: var(--shadow); }
.tool-panel h2 { margin-bottom: 8px; }
.tool-panel .tool-intro { margin-top: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tool-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-field { display: grid; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 750; }
.tool-field input,
.tool-field select { width: 100%; min-height: 46px; border: 1px solid #9fb1b8; border-radius: 6px; background: #fff; color: var(--ink); padding: 10px 12px; font: inherit; }
.tool-field input:focus,
.tool-field select:focus { outline: 3px solid rgba(11, 105, 91, .18); border-color: var(--green); }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tool-button { min-height: 44px; border: 0; border-radius: 6px; background: var(--green); color: #fff; padding: 10px 16px; font: 800 14px "Work Sans", sans-serif; cursor: pointer; }
.tool-button.secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.tool-result { margin-top: 20px; border-left: 5px solid #f4c94a; background: #fff8dc; padding: 16px 18px; }
.tool-result strong { display: block; font-size: clamp(22px, 4vw, 34px); line-height: 1.15; }
.tool-result p { margin: 7px 0 0 !important; }
.live-clock { font-variant-numeric: tabular-nums; font-size: clamp(36px, 8vw, 64px) !important; }
.tool-note { color: var(--quiet) !important; font-size: 13px; }
.check-list { display: grid; gap: 10px; margin: 16px 0; }
.check-list label { display: flex; gap: 10px; align-items: flex-start; border-bottom: 1px solid #e5ecea; padding: 0 0 10px; color: #334155; font-weight: 650; }
.code-results { display: grid; gap: 8px; margin-top: 16px; }
.code-row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e5ecea; padding: 10px 0; }
.code-row strong { font-size: 18px; }
.comparison-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.comparison-table th,
.comparison-table td { border-bottom: 1px solid var(--line); padding: 11px 8px; text-align: left; vertical-align: top; }
.comparison-table th { color: var(--ink); font-size: 13px; }
.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 22px 0; }
.metric-strip div { background: #fff; padding: 16px; }
.metric-strip span { display: block; color: var(--quiet); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.metric-strip strong { display: block; margin-top: 4px; font-size: 20px; }
.article-shell .content-list li { margin: 9px 0; }
.source-note { font-size: 13px; color: var(--quiet) !important; }

@media (max-width: 700px) {
  .tool-grid,
  .tool-grid.three,
  .metric-strip { grid-template-columns: 1fr; }
  .tool-panel { padding: 18px; }
  .comparison-table { display: block; overflow-x: auto; }
  .code-row { align-items: flex-start; }
}