.interval-page { max-width: 1040px; margin: 0 auto; padding: 2rem 0; min-width: 0; overflow-wrap: anywhere; }
.tool-kicker { color: var(--color-primary); font-weight: 600; margin-bottom: .75rem; }
.tool-intro { max-width: 760px; color: var(--color-text-secondary); margin: 1rem 0 2rem; }
.tool-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; margin: 1rem 0; }
.tool-panel-heading, .tool-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.tool-actions { justify-content: flex-start; margin-top: 1rem; }
.interval-page h2 { margin: 0 0 1rem; }
.interval-page h3 { margin: 1.5rem 0 .75rem; }
#interval-tool label { display: block; font-weight: 600; margin: 1rem 0 .4rem; }
#interval-tool input, #interval-tool select, #interval-tool textarea { width: 100%; min-width: 0; border: 1px solid var(--color-border); border-radius: 6px; padding: .7rem; background: var(--color-bg); color: var(--color-text); font: inherit; }
#interval-tool textarea { font-family: var(--font-family-mono); resize: vertical; }
#interval-tool button { cursor: pointer; border: 1px solid var(--color-border); border-radius: 6px; padding: .65rem 1rem; background: var(--color-bg-secondary); color: var(--color-text); font: inherit; }
#interval-tool button.tool-primary { background: var(--color-primary-dark); color: #fff; }
#interval-tool button:disabled { opacity: .5; cursor: default; }
#interval-tool :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.tool-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tool-note, #input-help, #result-settings { color: var(--color-text-secondary); font-size: .95rem; margin: .75rem 0; }
.tool-warning:not(:empty), #tool-status:not(:empty) { padding: 1rem; border-left: 3px solid var(--color-primary); background: var(--color-bg-secondary); margin: 1rem 0; }
.tool-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.tool-stats div { padding: 1rem; border: 1px solid var(--color-border); border-radius: 8px; }
.tool-stats dt { color: var(--color-text-secondary); font-size: .85rem; }
.tool-stats dd { margin: .4rem 0 0; font-weight: 600; font-size: 1.15rem; }
.tool-table-wrap { overflow-x: auto; }
.tool-table-wrap table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tool-table-wrap th, .tool-table-wrap td { text-align: left; padding: .6rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.tool-hist-row { display: grid; grid-template-columns: minmax(155px, 1fr) 2fr 45px; align-items: center; gap: .6rem; font-size: .85rem; margin: .35rem 0; font-variant-numeric: tabular-nums; }
.tool-hist-track { background: var(--color-bg-tertiary); height: 14px; border-radius: 3px; overflow: hidden; }
.tool-hist-bar { background: var(--color-primary); height: 100%; }
.tool-guide { margin-top: 3rem; border-top: 1px solid var(--color-border); padding-top: 2rem; }
@media (max-width: 640px) {
  .tool-panel { padding: 1rem; }
  .tool-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tool-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-hist-row { grid-template-columns: minmax(115px, 1.2fr) 1fr 35px; font-size: .75rem; }
}