/* ============================================================
   PAGE PULSE — shared styles for the free SEO tool pages
   Built on styles.css tokens. Each tool adds its own specifics.
   ============================================================ */
.tool-hero { position: relative; overflow: hidden; padding: 30px 0 22px; }
.tool-hero__bg { position: absolute; inset: -20% -10% auto -10%; height: 420px; z-index: 0; pointer-events: none; }
.tool-hero__inner { position: relative; z-index: 2; max-width: 760px; }
.tool-hero h1 { margin-top: 14px; font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -0.035em; }
.tool-hero .lead { margin-top: 16px; max-width: 620px; }
.tool-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--v-600); background:var(--v-50); border:1px solid var(--v-100); padding:6px 12px; border-radius:var(--r-pill); }
.tool-tag svg { width:13px; height:13px; }

.tool-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; align-items: start; }
.tool-panel { padding: 26px; }
.tool-panel h2 { font-size: 17px; letter-spacing:-0.01em; }

.field { margin-top: 18px; }
.field:first-of-type { margin-top: 8px; }
.field__top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
.field__top label { font-weight:700; font-size:13.5px; color:var(--ink); }
.field__counts { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:600; }
.field__counts .seg { color:var(--muted); }
.field__hint { margin-top:7px; font-size:12px; color:var(--muted); }
.pill { padding:2px 8px; border-radius:var(--r-pill); font-size:10px; letter-spacing:.02em; font-family:var(--mono); font-weight:600; }
.pill.ok { color:var(--up); background:var(--up-bg); }
.pill.warn { color:#B5790F; background:#FBF2DE; }
.pill.over { color:var(--down); background:var(--down-bg); }

.input, .textarea { width:100%; font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; transition:border-color .15s, box-shadow .15s; resize:vertical; }
.input:focus, .textarea:focus { outline:none; border-color:var(--v-300); box-shadow:0 0 0 4px var(--v-50); }
.textarea { min-height:96px; line-height:1.55; }
.textarea--tall { min-height:280px; font-family:var(--mono); font-size:13px; }

.meter { margin-top:9px; height:6px; border-radius:4px; background:var(--bg-2); overflow:hidden; }
.meter i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#34C98A,#1FA971); transition:width .2s ease, background .2s ease; }
.meter i.warn { background:linear-gradient(90deg,#F9AB00,#F2851E); }
.meter i.over { background:linear-gradient(90deg,#F0716F,#E5484D); }

.tool-actions { margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
.tool-btn { font-family:inherit; font-weight:700; font-size:13.5px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:10px 16px; cursor:pointer; transition:border-color .15s,color .15s; display:inline-flex; align-items:center; gap:7px; }
.tool-btn:hover { border-color:var(--v-200); color:var(--ink); }
.tool-btn--primary { color:#fff; background:linear-gradient(180deg,var(--v-500),var(--v-600)); border-color:transparent; box-shadow:var(--sh-sm); }
.tool-btn--primary:hover { color:#fff; transform:translateY(-1px); }
.tool-btn svg { width:14px; height:14px; }

/* big stat cards */
.tool-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.tool-stat { border:1px solid var(--line); border-radius:13px; padding:14px 16px; background:#fff; }
.tool-stat .k { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.tool-stat .v { font-size:24px; font-weight:800; letter-spacing:-0.02em; margin-top:5px; display:flex; align-items:baseline; gap:6px; line-height:1; }
.tool-stat .v small { font-size:12px; font-weight:600; color:var(--muted); }
.tool-stat .s { margin-top:9px; display:inline-block; }

/* preset rows (title/desc presets) */
.preset { display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); }
.preset:first-of-type { border-top:none; }
.preset__ic { width:34px; height:34px; border-radius:10px; background:var(--v-50); display:grid; place-items:center; flex:none; }
.preset__ic svg { width:17px; height:17px; color:var(--v-600); }
.preset__main { flex:1; min-width:0; }
.preset__name { font-weight:700; font-size:13.5px; }
.preset__sub { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px; }
.preset__bar { width:88px; height:6px; border-radius:4px; background:var(--bg-2); overflow:hidden; margin-top:6px; }
.preset__bar i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#34C98A,#1FA971); }
.preset__bar i.warn { background:linear-gradient(90deg,#F9AB00,#F2851E); }
.preset__bar i.over { background:linear-gradient(90deg,#F0716F,#E5484D); }

.tool-note { margin-top:22px; display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:14px; background:var(--bg-2); border:1px dashed var(--line-2); font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.tool-note svg { width:18px; height:18px; color:var(--v-500); flex:none; margin-top:1px; }

.tool-empty { color:var(--faint); font-size:14px; padding:30px 0; text-align:center; }

@media (max-width: 880px) { .tool-wrap { grid-template-columns:1fr; } }