:root {
  --bg: #f6fbfb;
  --ink: #0b1720;
  --muted: #5b6773;
  --line: #d9e7e7;
  --panel: #ffffff;
  --panel-2: #e7f7f4;
  --brand: #0f766e;
  --brand-2: #2563eb;
  --brand-3: #84cc16;
  --warn: #d97706;
  --danger: #dc2626;
  --shadow: 0 20px 54px rgba(11, 23, 32, .10);
  --radius: 8px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { touch-action: manipulation; }
:focus-visible { outline: 3px solid rgba(15,118,110,.28); outline-offset: 2px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 0 max(20px, calc((100vw - var(--max)) / 2));
  background: rgba(246, 251, 251, .94);
  border-bottom: 1px solid rgba(217, 231, 231, .9);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 900; font-size: 21px; }
.brand img { width: 36px; height: 36px; }
.main-nav { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 14px; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.main-nav a:hover { color: var(--ink); }
.nav-cta { color: white !important; background: var(--ink); padding: 0 15px; border-radius: var(--radius); }
.menu-button { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: white; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-button span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 999px; }

.section, .hero { padding: 88px max(20px, calc((100vw - var(--max)) / 2)); }
.hero.tool-first {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  min-height: calc(100vh - 72px);
  background:
    radial-gradient(circle at 74% 18%, rgba(15,118,110,.15), transparent 34%),
    linear-gradient(140deg, #f6fbfb 0%, #eaf7ff 54%, #ecfdf5 100%);
}
.hero-copy h1 { margin: 0 0 18px; max-width: 620px; font-size: 58px; line-height: 1.04; letter-spacing: 0; }
.hero-copy p { margin: 0; max-width: 600px; color: var(--muted); font-size: 19px; line-height: 1.75; }
.hero-search { display: grid; gap: 8px; margin-top: 28px; max-width: 520px; color: var(--ink); font-weight: 800; font-size: 14px; }
.search-box { width: min(420px, 100%); min-height: 48px; border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; background: white; color: var(--ink); }
.hero-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tool-card {
  position: relative;
  display: block;
  min-height: 218px;
  padding: 22px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(11, 23, 32, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool-card:hover { transform: translateY(-3px); border-color: rgba(15,118,110,.42); box-shadow: var(--shadow); }
.tool-card.featured { border-color: rgba(15,118,110,.48); background: linear-gradient(180deg, #ffffff 0%, #effdf8 100%); }
.tool-card h2, .tool-card h3 { margin: 18px 0 8px; font-size: 21px; line-height: 1.25; }
.tool-card p { margin: 0; color: var(--muted); font-size: 15px; }
.tool-emoji { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; background: var(--panel-2); color: var(--brand); font-size: 24px; font-weight: 900; }
.tag { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border-radius: 999px; background: var(--brand); color: white; font-size: 12px; font-weight: 800; }
.tag.soft { background: #edf7ff; color: var(--brand-2); border: 1px solid #cfe6ff; }
.icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; background: var(--panel-2); color: var(--brand); font-weight: 900; }
.icon::before { font-size: 22px; }
.text-icon::before { content: "📝"; }
.calc-icon::before { content: "📊"; }
.code-icon::before { content: "{}"; font-size: 18px; }
.timer-icon::before { content: "⏱"; }

.section-heading { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.section-heading.align-left { margin-left: 0; text-align: left; }
.section-heading.compact-heading { margin-bottom: 18px; }
.section-heading h2 { margin: 0 0 12px; font-size: 34px; line-height: 1.18; }
.section-heading p { margin: 0; color: var(--muted); font-size: 16px; }
.recent-section { padding-top: 46px; padding-bottom: 46px; background: white; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.recent-list { display: flex; flex-wrap: wrap; gap: 12px; }
.recent-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fcfc; color: var(--ink); font-weight: 800; }
.category-band { background: #ffffff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.category-layout { display: grid; grid-template-columns: 1fr 300px; gap: 34px; align-items: stretch; }
.category-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.category-list div, .trust-grid div { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #fbfefe; }
.category-list strong, .trust-grid strong { display: block; margin-bottom: 8px; font-size: 18px; }
.category-list span, .trust-grid span { color: var(--muted); font-size: 14px; }
.ad-preview { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 250px; border: 1px dashed #aac8c8; border-radius: 8px; color: var(--muted); background: repeating-linear-gradient(135deg, #f8fcfc, #f8fcfc 12px, #ecfdf5 12px, #ecfdf5 24px); text-align: center; padding: 20px; }
.ad-preview span { font-weight: 900; color: #87a6a6; font-size: 40px; line-height: 1; }
.ad-preview p { margin: 0; font-size: 14px; }
.trust-section { background: var(--bg); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 30px max(20px, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.site-footer span:first-child { color: var(--ink); font-weight: 900; }
.tool-card[hidden], [hidden] { display: none !important; }

.tools-page { min-height: calc(100vh - 72px); padding: 42px max(20px, calc((100vw - var(--max)) / 2)) 72px; }
.page-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-title h1 { margin: 0; font-size: 42px; line-height: 1.14; }
.page-title p { margin: 10px 0 0; color: var(--muted); max-width: 700px; }
.tool-shell { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.tool-panel, .side-panel, .copy-section, .faq-section { background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(11, 23, 32, .05); }
.tool-panel { padding: 22px; }
.side-panel { padding: 18px; }
.side-panel h2 { margin: 0 0 12px; font-size: 18px; }
.side-panel a { display: block; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.privacy-note { margin-top: 14px; color: var(--muted); font-size: 13px; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font-weight: 800; font-size: 14px; }
textarea, input, select { border: 1px solid var(--line); border-radius: 8px; background: #fbfefe; color: var(--ink); }
textarea { width: 100%; min-height: 280px; padding: 14px; resize: vertical; }
input, select { min-height: 44px; padding: 0 12px; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.result { position: relative; padding: 16px; background: #f8fcfc; border: 1px solid var(--line); border-radius: 8px; }
.result strong { display: block; font-size: 28px; line-height: 1; }
.result span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.result .copy-mini { position: absolute; top: 10px; right: 10px; }
.row-grid { display: grid; grid-template-columns: 1.4fr .65fr .9fr 44px; gap: 10px; margin-bottom: 10px; }
.icon-button, .copy-mini { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.copy-mini { min-width: 36px; min-height: 34px; color: var(--muted); }
.controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; font-weight: 800; cursor: pointer; }
.button.primary { color: white; background: var(--brand); border-color: var(--brand); box-shadow: 0 12px 26px rgba(15,118,110,.22); }
.button.secondary { background: white; color: var(--ink); }
.button.danger { color: var(--danger); background: #fff7f7; border-color: #fecaca; }
.output-box { min-height: 240px; white-space: pre-wrap; overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #0b1720; color: #dff8f2; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }
.message { min-height: 24px; margin-top: 10px; color: var(--muted); font-size: 14px; }
.message.error { color: var(--danger); }
.message.ok { color: var(--brand); }
.timer-display { font-size: 76px; line-height: 1; font-weight: 900; text-align: center; margin: 26px 0; font-variant-numeric: tabular-nums; }
.mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-tabs button[aria-pressed="true"] { background: var(--brand); color: white; border-color: var(--brand); }
.duration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.copy-section, .faq-section { max-width: 860px; margin-top: 26px; padding: 22px; }
.copy-section h2, .faq-section h2 { margin: 0 0 10px; font-size: 21px; }
.copy-section p, .faq-section p { margin: 0; color: var(--muted); }
.faq-section details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq-section details:first-of-type { border-top: 0; }
.faq-section summary { cursor: pointer; font-weight: 800; }
.faq-section p { margin-top: 8px; }
.validation-list { margin: 10px 0 0; color: var(--danger); font-size: 14px; }

@media (max-width: 920px) {
  .hero.tool-first, .category-layout, .tool-shell { grid-template-columns: 1fr; }
  .tool-grid, .category-list, .trust-grid, .result-grid { grid-template-columns: repeat(2, 1fr); }
  .page-title { display: block; }
  .search-box { margin-top: 8px; }
}
@media (max-width: 700px) {
  .site-header { min-height: 64px; padding: 10px 16px; align-items: center; }
  .menu-button { display: inline-flex; }
  .main-nav { position: absolute; left: 16px; right: 16px; top: 64px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
  .main-nav.is-open { display: flex; }
  .main-nav a { min-height: 46px; padding: 0 10px; }
  .nav-cta { justify-content: center; }
  .section, .hero, .tools-page { padding-left: 16px; padding-right: 16px; }
  .hero.tool-first { padding-top: 44px; padding-bottom: 52px; min-height: auto; }
  .hero-copy h1 { font-size: 38px; }
  .hero-copy p { font-size: 16px; }
  .hero-tools, .tool-grid, .category-list, .trust-grid, .result-grid, .duration-grid { grid-template-columns: 1fr; }
  .tool-card { min-height: 176px; padding: 20px; }
  .page-title h1 { font-size: 34px; }
  .row-grid { grid-template-columns: 1fr; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfefe; }
  .icon-button { width: 100%; }
  .timer-display { font-size: 54px; }
  .site-footer { display: block; }
  .site-footer span { display: block; margin-bottom: 8px; }
}