/* =====================================================
   SEO Indexing Toolkit v1.0.5
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.sit-wrap {
    --c: #0ea5e9;
    --bg: #ffffff;
    --s1: #f8f9fa;
    --s2: #f1f3f5;
    --br: #dee2e6;
    --tx: #111827;
    --tm: #6c757d;
    --pass: #198754;
    --warn: #d97706;
    --fail: #dc2626;
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--br);
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    color: var(--tx);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 14px;
}
.sit-wrap * { box-sizing: border-box; }

/* ── Tabs ── */
.sit-tabs {
    display: flex;
    border-bottom: 2px solid var(--br);
    background: var(--s1);
    overflow: visible; /* no scrollbar */
    flex-wrap: wrap;   /* wrap on small screens instead of scrolling */
}
.sit-tab {
    flex: 1;
    min-width: 120px;
    padding: 14px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: #111827; /* black for visibility */
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: .01em;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
    text-align: center;
}
.sit-tab:hover { background: var(--s2); color: #000; }
.sit-tab.active { color: var(--c); border-bottom-color: var(--c); background: #fff; }

/* ── Panel body ── */
.sit-panel { display: none; padding: 26px 28px; }
.sit-panel.active { display: block; }

/* ── Info box ── */
.sit-info {
    background: #eff8ff;
    border-left: 3px solid var(--c);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    font-size: .78rem;
    color: #1a4f6e;
    margin-bottom: 22px;
    line-height: 1.6;
}

/* ── Field groups ── */
.sit-field { margin-bottom: 16px; }
.sit-field:last-of-type { margin-bottom: 0; }

.sit-lbl {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    color: var(--tm);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
    font-family: inherit;
}
.sit-req { color: var(--fail); }
.sit-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--s2);
    border: 1px solid var(--br);
    color: var(--tm);
    font-size: 9px;
    text-decoration: none;
    margin-left: 4px;
    vertical-align: middle;
    font-style: normal;
}

/* ── Inputs ── */
.sit-input,
.sit-textarea {
    width: 100%;
    background: var(--s1);
    border: 1px solid var(--br);
    border-radius: 6px;
    padding: 9px 13px;
    color: var(--tx);
    font-size: .84rem;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.sit-input:focus,
.sit-textarea:focus {
    border-color: var(--c);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}
.sit-textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
}
.sit-hint {
    display: block;
    font-size: .72rem;
    color: var(--tm);
    margin-top: 5px;
    line-height: 1.45;
}
.sit-hint a, .sit-hint code {
    color: var(--c);
    text-decoration: none;
}

/* ── Two-column grid ── */
.sit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 560px) { .sit-row { grid-template-columns: 1fr; } }

/* ── Divider ── */
.sit-div {
    border: none;
    border-top: 1px solid var(--br);
    margin: 20px 0;
}

/* ── Engine checkboxes ── */
.sit-engine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 6px;
}
.sit-ck {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    cursor: pointer;
    color: var(--tx);
    background: var(--s1);
    border: 1px solid var(--br);
    border-radius: 6px;
    padding: 7px 10px;
    font-family: inherit;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.sit-ck:hover { border-color: var(--c); background: #eff8ff; }
.sit-ck input { accent-color: var(--c); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }

/* ── Submit button ── */
.sit-btn {
    background: var(--c);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-size: .84rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter .15s, transform .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
}
.sit-btn:hover { filter: brightness(.88); transform: translateY(-1px); }
.sit-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.sit-btn-sm { flex-shrink: 0; margin-top: 0; padding: 9px 20px; }

.sit-irow { display: flex; gap: 8px; align-items: stretch; }
.sit-irow .sit-input { flex: 1; }

/* ── Badges ── */
.sit-badge {
    background: var(--s2);
    color: var(--tm);
    border: 1px solid var(--br);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .72rem;
    display: inline-block;
    margin-right: 4px;
    font-weight: 500;
}

/* ── Results container ── */
.sit-result { margin-top: 20px; }

.sit-alert {
    padding: 11px 14px;
    border-radius: 6px;
    font-size: .8rem;
    line-height: 1.55;
    margin-bottom: 10px;
}
.sit-alert-ok   { background: #dcfce7; border: 1px solid #86efac; color: #14532d; }
.sit-alert-err  { background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d; }
.sit-alert-warn { background: #fef9c3; border: 1px solid #fde047; color: #713f12; }

/* ── Engine result cards ── */
.sit-eng-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.sit-eng {
    background: var(--s1);
    border-radius: 8px;
    padding: 13px 14px;
    border: 1px solid var(--br);
    border-left: 3px solid var(--br);
}
.sit-eng.eng-ok   { border-left-color: var(--pass); }
.sit-eng.eng-warn { border-left-color: var(--warn); }
.sit-eng.eng-fail { border-left-color: var(--fail); }
.sit-eng-name {
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: 6px;
    color: var(--tx);
}
.sit-eng-st {
    font-size: .75rem;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.45;
    color: var(--tm);
}
.sit-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.sit-dot-ok   { background: var(--pass); }
.sit-dot-warn { background: var(--warn); }
.sit-dot-fail { background: var(--fail); }

/* ── Inspector score ── */
.sit-score-hdr {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--br);
}
.sit-score-ring {
    width: 66px; height: 66px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700;
    flex-shrink: 0; border: 3px solid;
}
.sit-sc-good { background: #dcfce7; color: #14532d; border-color: var(--pass); }
.sit-sc-ok   { background: #fef9c3; color: #713f12; border-color: var(--warn); }
.sit-sc-bad  { background: #fee2e2; color: #7f1d1d; border-color: var(--fail); }
.sit-score-title { font-size: .95rem; font-weight: 700; margin: 0 0 4px; }
.sit-score-meta  { font-size: .75rem; color: var(--tm); line-height: 1.5; }

/* ── Check items ── */
.sit-chk-list { display: flex; flex-direction: column; gap: 7px; }
.sit-chk {
    background: var(--s1);
    border-radius: 7px;
    padding: 11px 13px;
    border: 1px solid var(--br);
    border-left: 3px solid var(--br);
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 9px;
    align-items: start;
}
.sit-chk.pass { border-left-color: var(--pass); }
.sit-chk.warn { border-left-color: var(--warn); }
.sit-chk.fail { border-left-color: var(--fail); }
.sit-ck-icon  { font-size: .88rem; text-align: center; margin-top: 1px; }
.sit-ck-name  { font-weight: 600; font-size: .82rem; margin-bottom: 2px; }
.sit-ck-val   { font-size: .75rem; color: var(--tm); word-break: break-all; margin-bottom: 2px; }
.sit-ck-adv   { font-size: .72rem; color: var(--warn); }
.sit-chk.fail .sit-ck-adv { color: var(--fail); }