:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-muted: #f1f5f9;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --success: #15803d;
  --success-bg: #f0fdf4;
  --success-line: #bbf7d0;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --radius: 20px;
  --radius-small: 14px;
  --shadow: 0 18px 55px rgba(15, 23, 42, 0.08);
  --content-width: 1120px;
  --narrow-width: 900px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  color: #ffffff;
  background: var(--ink);
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(var(--content-width), calc(100% - 40px));
  margin-inline: auto;
}

.container.narrow,
.narrow {
  width: min(var(--narrow-width), calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.header-inner,
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 70px;
}

.brand {
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--accent);
}

.header-inner nav,
.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.header-inner nav a {
  color: #475569;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.header-inner nav a:hover {
  color: var(--accent);
}

.hero {
  padding: 78px 0 56px;
  background:
    radial-gradient(circle at 80% 15%, #dbeafe 0, transparent 26%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.hero h1,
.error-page h1 {
  margin: 0.2em 0;
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.055em;
}

.hero p {
  max-width: 760px;
  color: #475569;
  font-size: 1.08rem;
}

.hero-badge {
  display: grid;
  width: 170px;
  height: 170px;
  place-items: center;
  border-radius: 44px;
  color: #ffffff;
  background: var(--ink);
  box-shadow: var(--shadow);
  font-size: 2.4rem;
  font-weight: 900;
  transform: rotate(4deg);
}

.section {
  padding: 70px 0;
}

.section.alt {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.section h2 {
  margin: 0.1em 0 0.7em;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: -0.035em;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tool-card {
  display: block;
  padding: 28px;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.tool-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.11);
  transform: translateY(-3px);
}

.tool-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 16px;
  color: var(--accent);
  background: #eff6ff;
  font-size: 1.05rem;
  font-weight: 900;
}

.tool-card h3 {
  margin: 0.2em 0 0.45em;
}

.tool-card p {
  margin: 0;
  color: var(--muted);
}

.tool-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--accent);
  font-weight: 800;
}

.category-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #1e40af;
  background: #eff6ff;
  font-size: 0.78rem;
  font-weight: 800;
}

.calculator-card,
.editor-card {
  padding: 30px;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.card-header h2 {
  margin: 0;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.actions-center {
  justify-content: center;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}

.input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-small);
  padding: 15px 16px;
  color: var(--ink);
  background: #ffffff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

textarea {
  min-height: 360px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.55;
  tab-size: 2;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  outline: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  padding: 13px 18px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.button.primary {
  color: #ffffff;
  background: var(--accent);
}

.button.primary:hover {
  background: var(--accent-hover);
}

.button.secondary {
  color: #ffffff;
  background: var(--ink);
}

.button.ghost {
  color: var(--accent);
  background: #eff6ff;
}

.button.danger-ghost {
  color: var(--danger);
  background: var(--danger-bg);
}

.help {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.status {
  min-height: 1.5em;
  margin: 8px 0 0;
  font-weight: 800;
}

.status.ok {
  color: var(--success);
}

.status.error {
  color: var(--danger);
}

.results {
  margin-top: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.hidden {
  display: none !important;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.result-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fbfdff;
}

.result-item span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.result-item strong {
  display: block;
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

.result-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.copy-status {
  color: var(--success);
  font-size: 0.9rem;
  font-weight: 700;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.inline-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.inline-field select {
  width: auto;
  min-width: 74px;
  padding: 9px 12px;
}

.editor-meta {
  display: flex;
  gap: 14px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  flex-wrap: wrap;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.8fr);
  gap: 44px;
  align-items: start;
}

.content-grid p {
  color: #475569;
}

.mini-card {
  padding: 22px;
  border-radius: 18px;
  color: #ffffff;
  background: var(--ink);
}

.mini-card h3 {
  margin-top: 0;
}

.mini-card p,
.mini-card dd {
  color: #cbd5e1;
}

.cidr-table {
  margin: 0;
}

.cidr-table div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cidr-table div:last-child {
  border-bottom: 0;
}

.cidr-table dt {
  font-weight: 900;
}

.cidr-table dd {
  margin: 0;
}

details {
  margin: 10px 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: #ffffff;
}

summary {
  cursor: pointer;
  font-weight: 800;
}

details p {
  margin-bottom: 4px;
  color: #475569;
}

code {
  padding: 0.12em 0.35em;
  border-radius: 6px;
  background: #eef2ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.breadcrumb {
  padding-top: 24px;
  color: var(--muted);
  font-size: 0.9rem;
}

.breadcrumb ol {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.breadcrumb li:not(:last-child)::after {
  margin-left: 8px;
  color: #94a3b8;
  content: "/";
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--success-line);
  border-radius: var(--radius-small);
  color: #166534;
  background: var(--success-bg);
  font-size: 0.9rem;
}

.error-page {
  display: grid;
  min-height: 70vh;
  place-items: center;
  padding: 64px 0;
}

.error-card {
  padding: 40px;
  text-align: center;
}

.error-card p {
  color: var(--muted);
}

footer {
  padding: 28px 0;
  color: #cbd5e1;
  background: var(--ink);
}

.footer-inner strong {
  color: #ffffff;
}

.footer-inner p {
  margin: 0;
  font-size: 0.9rem;
}

.footer-links a {
  color: #cbd5e1;
  text-decoration: none;
}

.footer-links a:hover {
  color: #ffffff;
}

@media (max-width: 760px) {
  .header-inner {
    min-height: auto;
    padding: 14px 0;
  }

  .header-inner nav {
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .header-inner nav::-webkit-scrollbar {
    display: none;
  }

  .header-inner nav a {
    font-size: 0.84rem;
  }

  .hero {
    padding-top: 48px;
  }

  .hero-inner,
  .tool-grid,
  .content-grid,
  .result-grid {
    grid-template-columns: 1fr;
  }

  .hero-badge {
    display: none;
  }

  .calculator-card,
  .editor-card,
  .error-card {
    padding: 20px;
  }

  .card-header {
    align-items: center;
  }

  .input-row {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 52px 0;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* Complete edition additions */
.tool-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.category-section + .category-section { margin-top: 54px; }
.category-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.category-heading h2 { margin:0; }
.category-heading p { margin:0; color:var(--muted); }
.tool-panel { padding: 28px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.field label, .field > span { display:block; margin-bottom:7px; font-weight:800; }
.field.full { grid-column:1/-1; }
.field-note { margin:7px 0 0; color:var(--muted); font-size:.86rem; }
.output-box { margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-small); background:#fbfdff; }
.output-box pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.output-box textarea { min-height:220px; }
.two-pane { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pane textarea { min-height:320px; }
.tab-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tab-button { border:1px solid var(--line); border-radius:999px; padding:8px 13px; color:#334155; background:#fff; cursor:pointer; font-weight:800; }
.tab-button.active { color:#fff; border-color:var(--accent); background:var(--accent); }
.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.stat { padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.stat span { display:block; color:var(--muted); font-size:.8rem; font-weight:800; }
.stat strong { display:block; margin-top:4px; overflow-wrap:anywhere; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.result-table { width:100%; border-collapse:collapse; margin-top:16px; }
.result-table th,.result-table td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.result-table th { color:#475569; font-size:.85rem; }
.result-table td:last-child,.result-table th:last-child { text-align:right; }
.notice { margin:16px 0; padding:14px 16px; border:1px solid #fde68a; border-radius:14px; color:#854d0e; background:#fffbeb; }
.info-note { margin:16px 0; padding:14px 16px; border:1px solid #bfdbfe; border-radius:14px; color:#1e3a8a; background:#eff6ff; }
.related-links { display:flex; gap:10px; flex-wrap:wrap; }
.copy-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.checkbox-row { display:flex; gap:18px; flex-wrap:wrap; margin:10px 0; }
.checkbox-row label { display:inline-flex; align-items:center; gap:8px; margin:0; }
.checkbox-row input { width:auto; }
.code-output { min-height:120px; }
.large-output { font-size:1.4rem; font-weight:900; letter-spacing:-.02em; }
.legal h2 { margin-top:2em; font-size:1.35rem; }
.legal h3 { margin-top:1.5em; }
.legal ul { padding-left:1.4em; }
.contact-card { padding:30px; }
.contact-address { display:inline-block; padding:12px 15px; border-radius:12px; background:#eef2ff; font-weight:900; }
.cost-total { padding:22px; border-radius:18px; color:#fff; background:var(--ink); }
.cost-total span { display:block; color:#cbd5e1; font-size:.9rem; }
.cost-total strong { display:block; font-size:2rem; }
.preset-grid { display:flex; gap:8px; flex-wrap:wrap; }
.small { font-size:.86rem; color:var(--muted); }
@media (max-width:900px){ .tool-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));} .form-grid.three{grid-template-columns:1fr 1fr;} }
@media (max-width:760px){ .tool-grid.compact,.form-grid,.form-grid.three,.two-pane,.stat-grid{grid-template-columns:1fr;} .field.full{grid-column:auto;} .category-heading{align-items:flex-start;flex-direction:column;} }

/* 30 tools edition */
.tool-search{margin-bottom:42px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.tool-search input{margin-top:6px}.http-list,.match-list{margin-top:18px}.match-list{display:grid;gap:10px}.match-list small{display:block;margin-top:6px;color:var(--muted)}.category-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.category-stat{text-decoration:none;color:inherit;transition:transform .18s ease,border-color .18s ease}.category-stat:hover{transform:translateY(-2px);border-color:#bfdbfe}.more-tools{margin-top:30px}.case-actions{margin:14px 0}.case-actions .button{border:1px solid #bfdbfe}.result-table td:nth-child(1){white-space:nowrap}.hero-badge{overflow:hidden;text-align:center}.tool-icon{overflow:hidden}.tool-card .tool-icon{font-size:.94rem}.tool-card[data-search*="Security"] .category-label{color:#991b1b;background:#fef2f2}.tool-card[data-search*="Cloud"] .category-label{color:#7c2d12;background:#fff7ed}@media(max-width:900px){.category-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.category-stats{grid-template-columns:1fr}.result-table{display:block;overflow-x:auto;white-space:nowrap}}


/* Phase 4-6: quality, SEO content and internal-link UI */
.lead-copy { color:#475569; font-size:1.04rem; margin-bottom:24px; }
.howto-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.howto-card { position:relative; padding:24px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.howto-card h3 { margin:10px 0 8px; }
.howto-card p { margin:0; color:var(--muted); }
.step-number { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:var(--accent); font-weight:900; }
.example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.example-card { padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden; }
.example-card h3 { margin-top:0; }
.example-card pre { margin:0; padding:16px; border-radius:12px; overflow:auto; background:#0f172a; color:#e2e8f0; }
.example-card pre code { padding:0; background:transparent; color:inherit; white-space:pre-wrap; word-break:break-word; }
.notice-card { padding:20px 22px; border:1px solid #fde68a; border-radius:16px; background:#fffbeb; }
.notice-card strong { color:#92400e; }
.notice-card p { margin:.45rem 0 0; color:#78350f; }
.related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.related-card { display:flex; min-height:150px; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:#fff; text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.related-card:hover { transform:translateY(-3px); border-color:#bfdbfe; box-shadow:var(--shadow); }
.related-card strong { font-size:1.02rem; }
.related-card > span:last-child { margin-top:auto; color:var(--accent); font-size:.88rem; font-weight:800; }
.related-more { margin-top:20px; text-align:right; }
.related-more a { color:var(--accent); font-weight:800; text-decoration:none; }
@media (max-width: 920px) { .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .howto-grid { grid-template-columns:1fr; } }
@media (max-width: 620px) { .example-grid,.related-grid { grid-template-columns:1fr; } }