.tools-page { --tool-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.tools-page main { font-family: var(--tool-font); padding-top: 2rem; }
.tools-page .page-header { padding-bottom: 1.2rem; margin-bottom: 1.5rem; }
.tools-page .page-header h1 { font-family: var(--tool-font); font-weight: 700; letter-spacing: 0.01em; }
.tools-page .page-header p { font-family: var(--tool-font); font-weight: 600; letter-spacing: 0.14em; color: var(--ink-light); }

.tools-page .link-item { padding: 1.3rem 0; }
.tools-page .link-item-name { font-family: var(--tool-font); font-size: 1.7rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.tools-page .link-item-desc { font-family: var(--tool-font); font-size: 1rem; font-weight: 500; font-style: normal; margin-top: 0.3rem; color: var(--ink-light); }
.tools-page .link-item-arrow { font-size: 1.5rem; font-weight: 700; }

.tool-btn {
  font-family: var(--tool-font); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; border: 2px solid var(--gold); color: var(--gold);
  padding: 0.65rem 1.4rem; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.tool-btn:hover { background: var(--gold); color: var(--cream); }
.tool-btn.secondary { border-color: var(--gold-border); color: var(--ink-light); }
.tool-btn.secondary:hover { background: var(--gold-pale); color: var(--ink); }
.tool-input {
  font-family: var(--tool-font); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  background: transparent; border: 2px solid var(--gold-border); padding: 0.6rem 0.8rem; width: 100%;
}
.tool-input:focus { outline: none; border-color: var(--gold); }
.tool-back { display: inline-block; margin-top: 2rem; font-family: var(--tool-font); font-weight: 600; font-size: 0.9rem; color: var(--ink-faint); text-decoration: none; }
.tool-back:hover { color: var(--gold); }

.tools-page .pomo-mode, .tools-page .pomo-btn, .tools-page .pomo-count, .tools-page .pomo-label, .tools-page .pomo-back,
.tools-page .pomo-time { font-family: var(--tool-font); font-weight: 700; }
.tools-page .pomo-mode, .tools-page .pomo-btn { border-width: 2px; }
.tools-page .pomo-ring circle { stroke-width: 6; }