/* ============================================================
   SEO Tools Pro v1.0 — Isolated styles
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap');

.stp-wrap, .stp-wrap * { box-sizing: border-box; }
.stp-wrap button { cursor: pointer; font-family: inherit; }
.stp-wrap h1,.stp-wrap h2,.stp-wrap h3,.stp-wrap h4,.stp-wrap p { margin: 0; }
.stp-wrap a { text-decoration: none; }

.stp-wrap {
    --navy:    #0f2340;
    --navy2:   #14305a;
    --navy3:   #1a3a6e;
    --green:   #5cb85c;
    --green2:  #3da83d;
    --green3:  #7ed17e;
    --text:    #E8F0F8;
    --muted:   #7a96b8;
    --muted2:  #a8c0d8;
    --border:  rgba(255,255,255,0.08);
    --border2: rgba(255,255,255,0.14);
    --red:     #EF4444;
    --yellow:  #F59E0B;
    --accent:  #4a9fd4;
    --r-sm:    6px;
    --r-md:    10px;
    --r-lg:    14px;
    --r-xl:    20px;

    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--navy);
    color: var(--text);
    max-width: 1100px;
    margin: 2rem auto;
    border-radius: var(--r-xl);
    overflow: hidden;
    position: relative;
}

/* ── HEADER ────────────────────────────────────── */
.stp-header {
    background: linear-gradient(135deg, #0a1c35 0%, #14305a 60%, #1a3a6e 100%);
    padding: 2.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}
.stp-header::before {
    content:'';
    position:absolute; top:-80px; right:-80px;
    width:300px; height:300px;
    background: radial-gradient(circle, rgba(92,184,92,0.12) 0%, transparent 65%);
    pointer-events:none;
}
.stp-header__left { display:flex; align-items:center; gap:1.25rem; }
.stp-header__icon {
    width:60px; height:60px; flex-shrink:0;
    background: linear-gradient(135deg, var(--green), var(--green2));
    border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; color:#fff;
    box-shadow: 0 6px 20px rgba(92,184,92,0.35);
}
.stp-header__badge {
    display:inline-flex; align-items:center; gap:6px;
    background: rgba(92,184,92,0.12); border:1px solid rgba(92,184,92,0.3);
    color: var(--green3); font-size:0.68rem; font-weight:700;
    letter-spacing:0.1em; padding:3px 10px; border-radius:100px;
    margin-bottom:.5rem;
}
.stp-dot { width:6px;height:6px;background:var(--green);border-radius:50%;animation:stpdot 2s ease-in-out infinite; }
@keyframes stpdot{0%,100%{opacity:1}50%{opacity:.3}}
.stp-header__title { font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;color:#fff;line-height:1.2;margin:.2rem 0 .4rem; }
.stp-green { color: var(--green); }
.stp-header__sub { font-size:.9rem;color:var(--muted2); }
.stp-header__stats {
    display:flex; gap:1.5rem; flex-shrink:0;
    background:rgba(0,0,0,0.2); border:1px solid var(--border);
    border-radius: var(--r-lg); padding:.9rem 1.5rem;
}
.stp-hstat { text-align:center; }
.stp-hstat__n { display:block;font-size:1.4rem;font-weight:800;color:var(--green);line-height:1; }
.stp-hstat__l { display:block;font-size:.68rem;color:var(--muted);margin-top:2px; }

/* ── TABS ─────────────────────────────────────── */
.stp-tabs {
    display:flex; flex-wrap:wrap; gap:.5rem;
    padding:1.25rem 1.5rem;
    background: rgba(0,0,0,0.15);
    border-bottom:1px solid var(--border);
}
.stp-tab {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.5rem 1rem;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    border-radius:100px; color:var(--muted2); font-size:.83rem; font-weight:600;
    transition:all .2s;
}
.stp-tab i { font-size:.8rem; }
.stp-tab:hover { border-color:var(--border2); color:#fff; background:rgba(255,255,255,0.08); }
.stp-tab.active { background:rgba(255,255,255,0.1); border-color:var(--border2); color:#fff; }
.stp-tab--accent.active { background:rgba(74,159,212,0.15); border-color:rgba(74,159,212,0.35); color:#7ec8e8; }
.stp-tab--green.active { background:rgba(92,184,92,0.15); border-color:rgba(92,184,92,0.35); color:var(--green3); }

/* ── PANELS ───────────────────────────────────── */
.stp-panels { padding:2rem; }
.stp-panel { display:none; }
.stp-panel.active { display:block; animation:stpfade .3s ease; }
@keyframes stpfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Tool header */
.stp-tool-header { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.75rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
.stp-tool-icon {
    width:50px; height:50px; flex-shrink:0;
    background: rgba(255,255,255,0.07); border:1px solid var(--border2);
    border-radius: var(--r-md); display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; color:var(--green);
}
.stp-tool-icon--accent { color:var(--accent); background:rgba(74,159,212,0.1); border-color:rgba(74,159,212,0.2); }
.stp-tool-icon--green { color:var(--green3); background:rgba(92,184,92,0.1); border-color:rgba(92,184,92,0.2); }
.stp-tool-header h2 { font-size:1.2rem; font-weight:800; color:#fff; margin-bottom:.35rem; }
.stp-tool-header p { font-size:.88rem; color:var(--muted2); line-height:1.5; }

/* ── FORM FIELDS ──────────────────────────────── */
.stp-field { display:flex; flex-direction:column; gap:.4rem; }
.stp-field label { font-size:.82rem; font-weight:700; color:var(--muted2); text-transform:uppercase; letter-spacing:.04em; }
.stp-field input, .stp-field textarea, .stp-field select {
    background:rgba(255,255,255,0.06); border:1px solid var(--border2);
    border-radius: var(--r-sm); color:#fff; font-size:.9rem;
    padding:.65rem .9rem; font-family:inherit; width:100%;
    transition:border-color .2s, background .2s;
}
.stp-field input:focus, .stp-field textarea:focus, .stp-field select:focus {
    outline:none; border-color:var(--green); background:rgba(255,255,255,0.09);
}
.stp-field input::placeholder, .stp-field textarea::placeholder { color:var(--muted); }
.stp-field select option { background: var(--navy2); color:#fff; }
.stp-field-hint { font-size:.75rem; color:var(--muted); }
.stp-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
.stp-field--full { grid-column:span 2; }
.stp-field--row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.stp-input-row { display:flex; gap:.75rem; }

/* ── BUTTONS ──────────────────────────────────── */
.stp-btn {
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.75rem 1.75rem;
    background:linear-gradient(135deg, var(--green), var(--green2));
    border:none; border-radius: var(--r-md);
    color:#fff; font-size:.9rem; font-weight:700;
    transition:transform .2s, box-shadow .2s;
    box-shadow:0 4px 16px rgba(92,184,92,0.35);
    margin-top:.75rem;
}
.stp-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(92,184,92,0.45); }
.stp-btn--accent { background:linear-gradient(135deg, #2980b9, #1a6a9a); box-shadow:0 4px 16px rgba(41,128,185,0.35); }
.stp-btn--accent:hover { box-shadow:0 8px 24px rgba(41,128,185,0.5); }
.stp-btn--green { background:linear-gradient(135deg, var(--green), var(--green2)); }

/* ── RESULTS OUTPUT ───────────────────────────── */
.stp-results {
    margin-top:1.25rem;
    background:rgba(0,0,0,0.2); border:1px solid var(--border);
    border-radius: var(--r-md); overflow:hidden;
}
.stp-results pre {
    padding:1.25rem; margin:0; overflow-x:auto;
    font-family:'JetBrains Mono', monospace; font-size:.8rem;
    color:#c8e6c9; line-height:1.7; white-space:pre-wrap;
}
.stp-results-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 1.25rem; background:rgba(0,0,0,0.3);
    border-bottom:1px solid var(--border);
    font-size:.8rem; color:var(--muted2);
}
.stp-copy-btn {
    background:rgba(255,255,255,0.08); border:1px solid var(--border);
    border-radius: var(--r-sm); color:var(--muted2); font-size:.75rem;
    padding:4px 10px; display:inline-flex; align-items:center; gap:5px;
    transition:all .2s;
}
.stp-copy-btn:hover { background:rgba(255,255,255,0.14); color:#fff; }

/* Keyword results */
.stp-kw-results { padding:1.25rem; }
.stp-kw-summary { display:flex; gap:1.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.stp-kw-sum-item { text-align:center; }
.stp-kw-sum-item strong { display:block; font-size:1.5rem; font-weight:800; color:var(--green); }
.stp-kw-sum-item span { font-size:.75rem; color:var(--muted); }
.stp-kw-target-result { background:rgba(92,184,92,0.1); border:1px solid rgba(92,184,92,0.25); border-radius: var(--r-sm); padding:.75rem 1rem; margin-bottom:1rem; font-size:.85rem; }
.stp-kw-target-result strong { color:var(--green); }
.stp-kw-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.stp-kw-table th { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.4rem 0; text-align:left; border-bottom:1px solid var(--border); }
.stp-kw-table td { padding:.35rem 0; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--text); }
.stp-kw-word { font-weight:600; color:#fff; font-family:'JetBrains Mono',monospace; }
.stp-kw-bar-wrap { width:80px; }
.stp-kw-bar { height:4px; background:rgba(255,255,255,0.07); border-radius:100px; overflow:hidden; }
.stp-kw-bar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--green3)); border-radius:100px; }

/* ── SERP PREVIEW ─────────────────────────────── */
.stp-counter { font-size:.75rem; font-weight:400; color:var(--muted); margin-left:.5rem; }
.stp-serp-preview {
    background:#fff; border-radius: var(--r-md); padding:1.25rem 1.5rem;
    margin:1.25rem 0; box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.stp-serp-domain { display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.stp-serp-favicon { width:24px;height:24px;background:#e8f0fe;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#4285f4;font-size:.7rem; }
.stp-serp-site { font-size:.85rem; color:#202124; font-weight:500; }
.stp-serp-url { font-size:.78rem; color:#4d5156; }
.stp-serp-title { font-size:1.15rem; color:#1a0dab; font-weight:400; margin-bottom:.3rem; line-height:1.35; cursor:pointer; }
.stp-serp-title:hover { text-decoration:underline; }
.stp-serp-desc { font-size:.85rem; color:#4d5156; line-height:1.5; }

.stp-serp-meters { display:flex; flex-direction:column; gap:.6rem; margin-top:.75rem; }
.stp-meter__label { font-size:.8rem; color:var(--muted2); margin-bottom:.3rem; }
.stp-meter__label strong { color:#fff; }
.stp-meter__bar { height:6px; background:rgba(255,255,255,0.07); border-radius:100px; overflow:hidden; }
.stp-meter__fill { height:100%; border-radius:100px; transition:width .4s ease, background .4s; }
.stp-meter__fill.ok { background:linear-gradient(90deg,var(--green),var(--green3)); }
.stp-meter__fill.warn { background:linear-gradient(90deg,#F59E0B,#FCD34D); }
.stp-meter__fill.bad { background:linear-gradient(90deg,#EF4444,#F87171); }

/* ── ROBOTS checkgrid ─────────────────────────── */
.stp-robots-bots { margin:1rem 0; }
.stp-robots-bots label { font-size:.82rem;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:.6rem; }
.stp-checkgrid { display:flex; flex-wrap:wrap; gap:.5rem; }
.stp-check { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; }
.stp-check input { display:none; }
.stp-check span {
    padding:4px 12px; border-radius:100px; font-size:.78rem; font-weight:600;
    border:1px solid var(--border2); color:var(--muted2); background:rgba(255,255,255,0.04);
    transition:all .2s;
}
.stp-check input:checked + span { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.3); color:#fca5a5; }

/* ── NOTICE ───────────────────────────────────── */
.stp-notice {
    background:rgba(74,159,212,0.1); border:1px solid rgba(74,159,212,0.2);
    border-radius: var(--r-sm); padding:.75rem 1rem; font-size:.82rem; color:var(--muted2);
    margin-bottom:.75rem; display:flex; align-items:flex-start; gap:.5rem;
}
.stp-notice i { color:var(--accent); flex-shrink:0; margin-top:2px; }

/* ── AUDIT FORM ───────────────────────────────── */
.stp-audit-features {
    display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-bottom:1.5rem;
}
.stp-af { display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--muted2); }
.stp-af i { color:var(--green); font-size:.85rem; flex-shrink:0; }
.req { color:var(--red); }
.stp-form-msg { margin-top:.75rem; padding:.75rem 1rem; border-radius: var(--r-sm); font-size:.85rem; font-weight:600; }
.stp-form-msg.ok { background:rgba(92,184,92,0.12); border:1px solid rgba(92,184,92,0.25); color:var(--green3); }
.stp-form-msg.err { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); color:#fca5a5; }

/* ── LINKBUILDING ─────────────────────────────── */
.stp-lb-offer {
    background:rgba(255,255,255,0.04); border:1px solid var(--border2);
    border-radius: var(--r-lg); padding:1.5rem; margin-bottom:1.25rem;
}
.stp-lb-offer--green { border-color:rgba(92,184,92,0.3); background:rgba(92,184,92,0.05); }
.stp-lb-offer__head { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.25rem; }
.stp-lb-offer__icon {
    width:46px; height:46px; flex-shrink:0;
    background:rgba(255,255,255,0.08); border:1px solid var(--border2);
    border-radius: var(--r-sm); display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color:var(--accent);
}
.stp-lb-offer__icon--green { color:var(--green3); background:rgba(92,184,92,0.1); border-color:rgba(92,184,92,0.25); }
.stp-lb-offer__head h3 { font-size:1rem; font-weight:700; color:#fff; margin-bottom:.35rem; }
.stp-lb-offer__head p { font-size:.85rem; color:var(--muted2); line-height:1.55; }
.stp-lb-features { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.stp-lb-feat { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted2); }
.stp-lb-feat i { color:var(--green); font-size:.78rem; flex-shrink:0; }
.stp-lb-stats { display:flex; gap:1.5rem; margin-bottom:1rem; }
.stp-lb-stat { text-align:center; }
.stp-lb-stat span { display:block; font-size:1.3rem; font-weight:800; color:var(--green); line-height:1; }
.stp-lb-stat small { font-size:.7rem; color:var(--muted); }
.stp-lb-form-wrap { background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius: var(--r-lg); padding:1.5rem; }
.stp-lb-form-wrap h3 { font-size:1rem; font-weight:700; color:#fff; margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; }
.stp-lb-form-wrap h3 i { color:var(--green); }

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width:760px) {
    .stp-header { padding:1.5rem; }
    .stp-header__stats { display:none; }
    .stp-field-grid { grid-template-columns:1fr; }
    .stp-field--full { grid-column:span 1; }
    .stp-field--row { grid-template-columns:1fr; }
    .stp-audit-features { grid-template-columns:1fr; }
    .stp-lb-features { grid-template-columns:1fr; }
    .stp-panels { padding:1.25rem; }
}
@media (max-width:560px) {
    .stp-tabs { gap:.35rem; padding:1rem; }
    .stp-tab { font-size:.75rem; padding:.4rem .75rem; }
    .stp-tab span { display:none; }
}