/* ===== TOOLS STYLES ===== */

.tools-hero { background: var(--primary); padding: 80px 0 60px; text-align: center; color: #fff; }
.tools-hero h1 { color: #fff; margin-bottom: 16px; }
.tools-hero p { color: rgba(255,255,255,0.75); max-width: 600px; margin: 0 auto; }

.tools-main { padding: 80px 0; background: var(--bg); }
.tools-grid-lg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.tool-card-lg { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; transition: all 0.25s; color: var(--text); }
.tool-card-lg:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--accent); }
.tool-icon-lg { font-size: 2.5rem; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: rgba(27,120,226,0.08); border-radius: var(--radius-lg); flex-shrink: 0; }
.tool-card-body h2 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text); }
.tool-card-body p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 16px; }
.tool-features { list-style: none; margin-bottom: 20px; }
.tool-features li { font-size: 0.85rem; color: var(--text-light); padding: 4px 0; }

/* TOOL PAGE COMMON */
.tool-hero { background: var(--primary); padding: 80px 0 60px; text-align: center; color: #fff; }
.tool-hero h1 { color: #fff; margin-bottom: 14px; }
.tool-hero p { color: rgba(255,255,255,0.75); max-width: 580px; margin: 0 auto; }
.tool-icon-hero { font-size: 3.5rem; display: block; margin-bottom: 16px; }
.tool-main { padding: 60px 0 80px; }
.tool-form-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; margin-bottom: 40px; }
.tool-form-wrap h2 { margin-bottom: 24px; }
.tool-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* RESULTS */
.tool-results { margin-bottom: 48px; }
.results-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 2px solid var(--border); }
.results-header h2 { margin: 0; flex: 1; }
.results-url { color: var(--text-muted); font-size: 0.85rem; font-family: monospace; word-break: break-all; }
.status-badge { padding: 4px 12px; border-radius: 100px; font-size: 0.75rem; font-weight: 700; }
.status-pass { background: #dcfce7; color: #15803d; }
.status-warning { background: #fef3c7; color: #92400e; }
.status-fail { background: #fee2e2; color: #b91c1c; }

/* META ANALYZER RESULTS */
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.result-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.result-pass { border-left: 4px solid var(--success); }
.result-warning { border-left: 4px solid var(--warning); }
.result-fail { border-left: 4px solid var(--danger); }
.result-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.result-card-header h3 { font-size: 0.9rem; margin: 0; }
.result-value { font-size: 0.875rem; color: var(--text); margin-bottom: 8px; font-style: italic; line-height: 1.4; }
.result-url { font-family: monospace; font-size: 0.75rem; word-break: break-all; font-style: normal; }
.result-msg { font-size: 0.82rem; color: var(--text-light); margin-bottom: 8px; }
.result-detail { font-size: 0.8rem; color: var(--text-muted); }
.char-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.char-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.char-fill[data-status="pass"] { background: var(--success); }
.char-fill[data-status="warning"] { background: var(--warning); }
.char-fill[data-status="fail"] { background: var(--danger); }
.char-count { font-size: 0.78rem; color: var(--text-muted); }
.results-summary { display: flex; gap: 16px; flex-wrap: wrap; padding: 16px 20px; background: var(--bg-section); border-radius: var(--radius); }
.summary-pass { color: var(--success); font-weight: 700; font-size: 0.9rem; }
.summary-warn { color: var(--warning); font-weight: 700; font-size: 0.9rem; }
.summary-fail { color: var(--danger); font-weight: 700; font-size: 0.9rem; }

/* KEYWORD DENSITY */
.results-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-pill { background: var(--bg-section); padding: 6px 14px; border-radius: 100px; font-size: 0.85rem; color: var(--text-light); }
.stat-pill strong { color: var(--text); }
.density-tables { display: flex; flex-direction: column; gap: 28px; }
.density-tables-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.density-table-wrap h3 { font-size: 1rem; margin-bottom: 12px; }
.density-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.density-table th { background: var(--bg-section); padding: 10px 12px; text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); border-bottom: 2px solid var(--border); }
.density-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.row-danger td { background: #fff5f5; }
.row-warning td { background: #fffbf0; }
.density-bar-wrap { display: flex; align-items: center; gap: 10px; }
.density-bar { height: 8px; border-radius: 4px; min-width: 2px; flex-shrink: 0; }
.density-bar[data-status="danger"] { background: var(--danger); }
.density-bar[data-status="warning"] { background: var(--warning); }
.density-bar[data-status="normal"] { background: var(--accent); }
.badge { padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 700; }
.badge-danger { background: #fee2e2; color: var(--danger); }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-ok { background: #dcfce7; color: #15803d; }
.density-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; background: var(--bg-section); border-radius: var(--radius); margin-top: 20px; font-size: 0.85rem; }
.legend-item { display: flex; align-items: center; gap: 8px; color: var(--text-light); }

/* SERP PREVIEW */
.serp-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.serp-inputs h2, .serp-preview-wrap h2 { margin-bottom: 24px; }
.char-counter-wrap { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.char-status { font-weight: 700; }
.view-toggle { display: flex; gap: 8px; margin-top: 20px; }
.view-btn { padding: 8px 20px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg-card); font-family: var(--font); font-size: 0.875rem; color: var(--text-light); cursor: pointer; transition: all 0.2s; }
.view-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(27,120,226,0.05); }
.serp-preview { background: #fff; border: 1px solid #dfe1e5; border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 20px; }
.mobile-frame { max-width: 380px; }
.hidden { display: none; }
.serp-result { padding: 12px 0; max-width: 600px; }
.serp-url-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.serp-favicon { font-size: 1rem; }
.serp-site-name { font-size: 0.875rem; color: #202124; font-weight: 500; line-height: 1.3; }
.serp-url { font-size: 0.78rem; color: #4d5156; line-height: 1.4; word-break: break-all; }
.serp-url-sm { font-size: 0.72rem; }
.serp-title { color: #1a0dab; font-size: 1.15rem; line-height: 1.4; margin: 6px 0 4px; font-weight: 400; cursor: pointer; }
.serp-title:hover { text-decoration: underline; }
.serp-title-sm { font-size: 1rem; }
.serp-desc { color: #4d5156; font-size: 0.875rem; line-height: 1.55; }
.serp-desc-sm { font-size: 0.82rem; }
.serp-tips { background: var(--bg-section); border-radius: var(--radius); padding: 20px; }
.serp-tips h3 { font-size: 0.95rem; margin-bottom: 12px; }
.serp-tips ul { list-style: none; }
.serp-tips li { font-size: 0.85rem; color: var(--text-light); padding: 5px 0; border-bottom: 1px solid var(--border); }
.serp-tips li::before { content: '• '; color: var(--accent); }

/* ROBOTS TESTER */
.path-test-result { display: flex; gap: 20px; align-items: center; background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 28px; border: 2px solid; }
.path-test-result.result-pass { border-color: var(--success); }
.path-test-result.result-fail { border-color: var(--danger); }
.path-test-icon { font-size: 2.5rem; flex-shrink: 0; }
.path-test-info h3 { font-size: 1rem; margin-bottom: 6px; }
.text-success { color: var(--success); font-weight: 700; font-size: 1.05rem; }
.text-danger { color: var(--danger); font-weight: 700; font-size: 1.05rem; }
.robots-section { background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.robots-section h3 { margin-bottom: 12px; font-size: 0.95rem; }
.sitemaps-list { list-style: none; }
.sitemaps-list a { color: var(--accent); font-size: 0.875rem; word-break: break-all; }
.robots-group { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
.robots-group-header { background: var(--bg-section); padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.robots-group-header h3 { font-size: 0.9rem; margin: 0; }
.crawl-delay { font-size: 0.8rem; color: var(--text-muted); }
.robots-rules { list-style: none; padding: 12px 20px; }
.robots-rules li { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.rule-type { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.rule-type-allow { background: #dcfce7; color: #15803d; }
.rule-type-disallow { background: #fee2e2; color: #b91c1c; }
.robots-rules code { font-family: monospace; color: var(--text); }
.no-rules { padding: 12px 20px; color: var(--text-muted); font-size: 0.875rem; }
.robots-raw { background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px; margin-top: 16px; }
.robots-raw h3 { margin-bottom: 12px; font-size: 0.95rem; }
.code-block { background: #1e1e2e; color: #cdd6f4; padding: 20px; border-radius: var(--radius); overflow-x: auto; font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }

/* TOOL INFO */
.tool-info { background: var(--bg-section); border-radius: var(--radius-lg); padding: 36px; }
.tool-info h2 { margin-bottom: 16px; }
.tool-info p { color: var(--text-light); margin-bottom: 12px; }
.tool-info ul, .tool-info h3 { margin-bottom: 12px; }
.tool-info ul { padding-left: 20px; }
.tool-info li { color: var(--text-light); margin-bottom: 8px; font-size: 0.9rem; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .tools-grid-lg { grid-template-columns: 1fr; }
  .tool-card-lg { grid-template-columns: 1fr; }
  .tool-icon-lg { width: 56px; height: 56px; font-size: 2rem; }
  .serp-layout { grid-template-columns: 1fr; }
  .density-tables-row { grid-template-columns: 1fr; }
  .tool-form .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .results-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   TOOL PAGES v2 — DARK HERO + PROFESSIONAL 2-COLUMN LAYOUT
   (tp-* prefix keeps these isolated from legacy tool styles)
═══════════════════════════════════════════════════════════════ */

/* Hero */
.tp-hero{position:relative;background:var(--grad-dark);padding:calc(var(--nav-h) + 60px) 0 56px;overflow:hidden}
.tp-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(27,120,226,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(27,120,226,.06) 1px,transparent 1px);background-size:60px 60px;animation:tpGridDrift 20s linear infinite;pointer-events:none}
@keyframes tpGridDrift{0%{transform:translateY(0)}100%{transform:translateY(60px)}}
.tp-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.tp-orb-1{width:480px;height:480px;background:rgba(27,120,226,.18);top:-120px;right:-80px}
.tp-orb-2{width:340px;height:340px;background:rgba(13,61,122,.22);bottom:-60px;left:-80px}
.tp-hero-inner{position:relative;z-index:2;max-width:1340px;margin:0 auto;padding:0 2rem;text-align:center}
.tp-breadcrumb{display:flex;align-items:center;gap:6px;justify-content:center;font-size:.78rem;color:rgba(255,255,255,.38);margin-bottom:20px;flex-wrap:wrap}
.tp-breadcrumb a{color:rgba(255,255,255,.45);text-decoration:none;transition:var(--t)}
.tp-breadcrumb a:hover{color:rgba(255,255,255,.8)}
.tp-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(27,120,226,.15);border:1px solid rgba(27,120,226,.35);color:rgba(255,255,255,.8);border-radius:var(--r-full);padding:6px 16px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px}
.tp-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:tpBlink 2s ease-in-out infinite;flex-shrink:0}
@keyframes tpBlink{0%,100%{opacity:1}50%{opacity:.3}}
.tp-h1{font-family:var(--font-d);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.1;margin-bottom:16px}
.tp-h1 span{background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tp-sub{font-size:1.05rem;color:rgba(255,255,255,.65);max-width:620px;margin:0 auto 28px;line-height:1.7}
.tp-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tp-badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);border-radius:var(--r-full);padding:6px 16px;font-size:.78rem;font-weight:600}

/* Main layout */
.tp-main{background:#f4f6f9;padding:48px 0 72px}
.tp-wrap{max-width:1340px;margin:0 auto;padding:0 2rem}
.tp-layout{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:start}
.tp-content{display:flex;flex-direction:column;gap:24px}

/* Tool form card */
.tp-card{background:#fff;border-radius:24px;box-shadow:var(--sh-lg);padding:40px}
.tp-card-title{font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.tp-label{display:block;font-weight:600;font-size:.83rem;color:var(--ink);margin-bottom:8px;letter-spacing:.01em}
.tp-input,.tp-textarea{width:100%;padding:14px 18px;border:1px solid var(--border);border-radius:var(--r);font-size:1rem;font-family:var(--font-b);color:var(--ink);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.tp-input:focus,.tp-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,120,226,.12)}
.tp-textarea{resize:vertical;min-height:200px;line-height:1.6}
.tp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tp-form-group{margin-bottom:16px}
.tp-form-group:last-of-type{margin-bottom:0}
.tp-hint{font-size:.78rem;color:var(--smoke);margin-top:6px;display:block}
.tp-submit{width:100%;margin-top:20px;background:var(--grad-blue);color:#fff;font-weight:700;font-size:1rem;padding:15px;border:none;border-radius:var(--r-lg);cursor:pointer;box-shadow:var(--sh-blue);transition:all .22s;font-family:var(--font-b);letter-spacing:.01em}
.tp-submit:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(27,120,226,.42)}

/* Results card wrapper */
.tp-results-card{background:#fff;border-radius:24px;box-shadow:var(--sh-lg);padding:32px}

/* Info card */
.tp-info-card{background:#fff;border-radius:24px;box-shadow:var(--sh-lg);padding:32px}
.tp-info-card h2{font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:14px}
.tp-info-card p{font-size:.875rem;color:var(--smoke);line-height:1.75;margin-bottom:10px}
.tp-info-card h3{font-size:.95rem;font-weight:700;color:var(--ink);margin:16px 0 8px}
.tp-info-card ul{padding-left:20px}
.tp-info-card li{font-size:.875rem;color:var(--smoke);margin-bottom:7px;line-height:1.6}
.tp-info-card code{background:var(--cloud);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:.85em}

/* Sidebar */
.tp-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--nav-h) + 20px)}
.tp-other-card{background:#fff;border-radius:20px;box-shadow:var(--sh-lg);padding:24px}
.tp-other-card h3{font-family:var(--font-d);font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.05em}
.tp-tool-link{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:var(--r);text-decoration:none;transition:var(--t);border:1px solid transparent}
.tp-tool-link:hover{background:var(--cloud);border-color:var(--border)}
.tp-tool-link-ico{font-size:1.25rem;flex-shrink:0}
.tp-tool-link-name{font-size:.85rem;font-weight:600;color:var(--ink);display:block;line-height:1.3}
.tp-tool-link-desc{font-size:.73rem;color:var(--smoke)}
.tp-cta-card{background:var(--grad-dark);border-radius:20px;padding:28px;text-align:center;position:relative;overflow:hidden}
.tp-cta-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(27,120,226,.22) 0%,transparent 65%)}
.tp-cta-card>*{position:relative;z-index:1}
.tp-cta-card h3{font-family:var(--font-d);font-size:1rem;font-weight:700;color:#fff;margin-bottom:8px}
.tp-cta-card p{font-size:.82rem;color:rgba(255,255,255,.58);margin-bottom:18px;line-height:1.6}

/* Flash messages */
.tp-flash{padding:12px 18px;border-radius:var(--r);margin-bottom:20px;font-size:.875rem;font-weight:600}
.tp-flash-error{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}

/* Responsive */
@media(max-width:1024px){.tp-layout{grid-template-columns:1fr}.tp-sidebar{position:static}}
@media(max-width:640px){.tp-card{padding:24px}.tp-form-row{grid-template-columns:1fr}.tp-h1{font-size:1.8rem}}

/* ── Trusted Tools strip (bottom of tp-hero) ── */
.tp-strip{
  background:rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.12);
  padding:20px 0;
  margin-top:28px;
}
.tp-strip-inner{
  max-width:1340px;margin:0 auto;padding:0 2rem;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;
}
.tp-strip-label{
  font-size:.72rem;color:rgba(255,255,255,.6);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;flex-shrink:0;
}
.tp-strip-items{display:flex;align-items:center;flex-wrap:wrap}
.tp-strip-item{
  font-size:.875rem;font-weight:600;color:rgba(255,255,255,.75);
  padding:3px 14px;border-right:1px solid rgba(255,255,255,.2);
  transition:color .2s;
}
.tp-strip-item:last-child{border-right:none}
.tp-strip-item:hover{color:#fff}