@font-face {
    font-family: 'Kruti Dev 010';
    src: url('../hindi/fonts/Kruti_Dev_010.ttf') format('truetype'), local('Kruti Dev 010');
    font-weight: normal; font-style: normal;
    font-display: swap;
}
/* Noto Sans Devanagari now loaded via <link> in include/meta-tags.php (preconnect + earlier discovery) */

/* ── Custom per-page intro (heading + short description above the test) ── */
.tt-page-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fb923c; margin:0 0 6px; }
.tt-page-h1 { font-size:clamp(1.4rem,4vw,2rem); font-weight:800; margin:0 0 8px; color:var(--theme-text,#f1f5f9); line-height:1.25; }
.tt-page-sub { font-size:.92rem; color:rgba(255,255,255,.55); margin:0 0 22px; line-height:1.6; max-width:680px; }
body.tt-light .tt-page-sub { color:rgba(0,0,0,.55); }

/* ── Page wrapper ─────────────────────────────── */
.tt-page {
    position: relative;
    max-width: 1080px; margin: 0 auto; padding: 0 0 48px;
}
.tt-page::before {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(251,146,60,.06) 0%, transparent 42%),
        radial-gradient(circle at 85% 75%, rgba(251,146,60,.04) 0%, transparent 42%),
        radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px;
}
.tt-page > * { position:relative; z-index:1; }

/* ── Test card ────────────────────────────────── */
.tt-hero {
    background: linear-gradient(160deg,#1a0800 0%,#130600 50%,#0d0200 100%);
    border: 1px solid rgba(251,146,60,.18);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(0,0,0,.55);
    margin-bottom: 0;
}
.input-field { opacity:0; z-index:-999; position:absolute; }

/* ── Settings row ─────────────────────────────── */
.tt-settings {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(251,146,60,.1);
    background: rgba(0,0,0,.18);
}
.tt-sep { width:1px; height:18px; background:rgba(251,146,60,.18); margin:0 4px; flex-shrink:0; }
.tt-group { display:flex; align-items:center; gap:4px; }
.font-btn, .setting-btn, .option-btn {
    background:transparent; border:1px solid transparent;
    padding:5px 12px; border-radius:7px;
    color:rgba(255,255,255,.38); font-size:.8rem; font-weight:600;
    cursor:pointer; transition:background .18s, color .18s;
    white-space:nowrap; font-family:'Poppins',sans-serif; letter-spacing:.02em;
}
.font-btn:hover, .setting-btn:hover, .option-btn:hover { background:rgba(251,146,60,.1); color:rgba(255,255,255,.75); }
.font-btn.active, .setting-btn.active, .option-btn.active {
    background:rgba(251,146,60,.18); color:#fb923c; border-color:rgba(251,146,60,.35);
}
.tt-live-wrap { margin-left:auto; margin-right:8px; display:flex; align-items:center; gap:14px; }
#testStatus { display:none; font-size:1rem; font-weight:700; color:#fb923c; font-family:'Poppins',sans-serif; }
.tt-end-btn {
    background:transparent; border:1px solid rgba(251,146,60,.3); color:#fb923c;
    padding:4px 12px; border-radius:7px; font-size:.78rem; font-weight:600;
    cursor:pointer; font-family:'Poppins',sans-serif; transition:background .18s;
}
.tt-end-btn:hover { background:rgba(251,146,60,.1); }
.tt-restart-btn {
    background:rgba(251,146,60,.15); border:none; color:#fb923c;
    padding:4px 12px; border-radius:7px; font-size:.78rem; font-weight:700;
    cursor:pointer; font-family:'Poppins',sans-serif; transition:background .18s;
}
.tt-restart-btn:hover { background:rgba(251,146,60,.25); }
.tt-tut-link {
    display:flex; align-items:center; gap:5px;
    font-size:.75rem; font-weight:700; letter-spacing:.04em;
    color:rgba(255,255,255,.32); text-decoration:none;
    padding:5px 10px; border-radius:7px; border:1px solid rgba(255,255,255,.08);
    transition:all .18s; white-space:nowrap; font-family:'Poppins',sans-serif;
}
.tt-tut-link:hover { color:#fb923c; border-color:rgba(251,146,60,.3); background:rgba(251,146,60,.07); }
.tt-para-picker { background:rgba(255,255,255,.03); border:1px solid rgba(96,165,250,.22); color:rgba(96,165,250,.75); padding:5px 8px; border-radius:7px; font-size:.75rem; font-weight:600; cursor:pointer; font-family:'Poppins',sans-serif; max-width:130px; }
.tt-para-picker:hover { background:rgba(96,165,250,.08); }
.tt-para-picker option { background:#1a0800; color:#f1f5f9; }
body.tt-light .tt-para-picker { background:rgba(255,255,255,.7); border-color:rgba(37,99,235,.25); color:#1d4ed8; }
body.tt-light .tt-para-picker option { background:#fff; color:#1e1b3a; }
.tt-chip-wpm  .tt-chip-val { color:#fb923c; }
.tt-chip-time .tt-chip-val { color:#fb923c; }

/* ── Typing body ──────────────────────────────── */
.tt-body {
    padding: 24px 28px 16px;
    cursor: text;
    min-height: 180px;
    position: relative;
}
.tt-text-wrap { height:280px; overflow:hidden; position:relative; }
#typingText span           { color:rgba(255,255,255,.38); }
#typingText span.correct   { color:rgba(255,255,255,.88); }
#typingText span.incorrect { color:#f87171; text-decoration:underline; text-underline-offset:3px; }
@keyframes blink-caret {
    0%,100% { border-bottom-color:#fb923c; }
    50%      { border-bottom-color:transparent; }
}
#typingText span.active {
    color:#fb923c; border-bottom:2px solid #fb923c;
    animation:blink-caret 1s step-end infinite;
}
.loading-text { color:rgba(255,255,255,.3); font-style:italic; }
.start-hint {
    text-align:center; font-size:.78rem; color:rgba(251,146,60,.45);
    pointer-events:none; margin:12px 0 0; letter-spacing:.4px;
    transition:opacity .4s;
}
.start-hint.hidden { opacity:0; }

/* ── Footer stats bar ─────────────────────────── */
.tt-body-footer {
    display:flex; align-items:center;
    margin-top:0; padding:10px 0 2px;
    border-top:1px solid rgba(255,255,255,.06);
}
.tt-stat-row { display:flex; align-items:center; flex:1; gap:0; }
.tt-chip { display:flex; align-items:center; gap:7px; padding:0 16px; height:38px; border-right:1px solid rgba(255,255,255,.07); }
.tt-chip:first-child { padding-left:2px; }
.tt-chip-icon { font-size:.85rem; line-height:1; color:rgba(255,255,255,.25); }
.tt-chip-body { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.tt-chip-val { font-size:.95rem; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.55); font-family:'Poppins',sans-serif; }
.tt-chip-lbl { font-size:.52rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.22); font-family:'Poppins',sans-serif; }
.tt-chip-ok  .tt-chip-val { color:#4ade80; }
.tt-chip-err .tt-chip-val { color:#f87171; }
.tt-chip-acc .tt-chip-val { color:#60a5fa; }
.tt-footer-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.tt-tut-highlight { background:rgba(251,146,60,.14); border-color:rgba(251,146,60,.4); color:#fb923c; font-weight:800; }
.tt-tut-highlight:hover { background:rgba(251,146,60,.22); border-color:rgba(251,146,60,.55); color:#fdba74; }
body.tt-light .tt-tut-highlight { background:rgba(234,88,12,.1); border-color:rgba(234,88,12,.35); color:#ea580c; }
body.tt-light .tt-tut-highlight:hover { background:rgba(234,88,12,.18); border-color:rgba(234,88,12,.5); color:#9a3412; }
.tt-pgraph-btn {
    display:flex; align-items:center; gap:6px;
    background:rgba(96,165,250,.07); border:1px solid rgba(96,165,250,.18);
    color:rgba(96,165,250,.65); padding:7px 16px; border-radius:9px;
    font-size:.75rem; font-weight:700; cursor:pointer;
    font-family:'Poppins',sans-serif; letter-spacing:.04em;
    transition:all .18s; white-space:nowrap;
}
.tt-pgraph-btn:hover { background:rgba(96,165,250,.14); border-color:rgba(96,165,250,.35); color:#93c5fd; }

/* ── Progress bar ─────────────────────────────── */
.tt-progress-bar { height:3px; background:rgba(255,255,255,.06); }
.tt-progress-fill { height:100%; width:0; background:linear-gradient(90deg,#fb923c,#f97316); transition:width .3s; }

/* ── Card wrapper + exam badge ────────────────── */
.tt-card-wrap { position:relative; margin-bottom:28px; padding-top:18px; }
.tt-exam-badge {
    position:absolute; top:0; right:20px; z-index:4;
    background:rgba(10,26,12,.96); border:1.5px solid rgba(34,197,94,.45);
    color:#4ade80; padding:5px 16px; border-radius:20px;
    font-size:.72rem; font-weight:700; letter-spacing:.07em; white-space:nowrap;
    box-shadow:0 4px 18px rgba(0,0,0,.35);
}

/* ── Ad slot ──────────────────────────────────── */
.ads-slot { width:100%; margin:8px 0 20px; overflow:hidden; }

/* ── Result panel (MonkeyType-style) ─────────── */
.result-panel { background:linear-gradient(135deg,rgba(251,146,60,.07) 0%,rgba(0,0,0,.3) 100%); border:1px solid rgba(251,146,60,.18); border-radius:20px; padding:28px; margin-bottom:20px; }
.rp-layout { display:flex; gap:24px; align-items:stretch; margin-bottom:20px; }
.rp-left { display:flex; flex-direction:column; gap:2px; min-width:130px; flex-shrink:0; }
.rp-big-stat { display:flex; flex-direction:column; }
.rp-lbl { font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.28); }
.rp-val { font-size:4rem; font-weight:900; line-height:1; color:#fb923c; font-variant-numeric:tabular-nums; }
.rp-acc { font-size:2.6rem; }
.rp-type { font-size:.72rem; color:rgba(255,255,255,.3); line-height:1.5; margin-top:10px; }
.rp-graph-area { flex:1; min-height:180px; position:relative; }
#graphCanvas { width:100%; height:100%; min-height:180px; display:block; background:transparent; }
.rp-stats-row { display:flex; gap:24px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.07); padding-top:16px; margin-bottom:18px; }
.rp-stat { display:flex; flex-direction:column; min-width:65px; }
.rp-st-lbl { font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:2px; }
.rp-st-val { font-size:1.2rem; font-weight:800; color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums; }
.rp-btns { display:flex; gap:8px; flex-wrap:wrap; }
.rp-icon-btn { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.45); width:42px; height:42px; border-radius:10px; font-size:1.05rem; cursor:pointer; transition:all .18s; display:inline-flex; align-items:center; justify-content:center; }
.rp-icon-btn:hover { background:rgba(251,146,60,.12); border-color:rgba(251,146,60,.3); color:#fb923c; }
.rp-icon-btn.rp-primary { background:rgba(251,146,60,.15); border-color:rgba(251,146,60,.3); color:#fb923c; }
.rp-icon-btn.rp-primary:hover { background:rgba(251,146,60,.25); }
body.tt-light .result-panel { background:linear-gradient(135deg,#fff7ed 0%,#fef3c7 100%); border-color:rgba(234,88,12,.2); }
body.tt-light .rp-lbl { color:rgba(0,0,0,.5); }
body.tt-light .rp-val { color:#ea580c; }
body.tt-light .rp-type { color:rgba(0,0,0,.55); }
body.tt-light .rp-stats-row { border-top-color:rgba(0,0,0,.1); }
body.tt-light .rp-st-lbl { color:rgba(0,0,0,.5); }
body.tt-light .rp-st-val { color:rgba(0,0,0,.82); }
body.tt-light .rp-icon-btn { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); color:rgba(0,0,0,.4); }
body.tt-light .rp-icon-btn:hover { background:rgba(234,88,12,.1); border-color:rgba(234,88,12,.3); color:#9a3412; }
body.tt-light .rp-icon-btn.rp-primary { background:rgba(234,88,12,.12); border-color:rgba(234,88,12,.3); color:#9a3412; }
body.tt-light #graphCanvas { background:transparent; }
.graph-section { margin:4px 0 28px; }

/* ── Beginner banner ──────────────────────────── */
.tt-beginner-banner {
    display:none;
    background:linear-gradient(135deg,rgba(251,146,60,.12) 0%,rgba(251,146,60,.05) 100%);
    border:1.5px solid rgba(251,146,60,.35); border-radius:18px; padding:28px 32px;
    text-align:center; position:relative; margin-bottom:4px;
}
.tt-bb-dismiss { position:absolute; top:12px; right:16px; background:none; border:none; color:rgba(255,255,255,.25); font-size:1.1rem; cursor:pointer; padding:4px 6px; border-radius:5px; transition:color .15s; }
.tt-bb-dismiss:hover { color:rgba(255,255,255,.6); }
.tt-bb-icon { font-size:2.4rem; margin-bottom:10px; display:block; }
.tt-bb-score { display:inline-block; background:rgba(251,146,60,.15); border:1px solid rgba(251,146,60,.3); color:#fb923c; font-size:.8rem; font-weight:800; padding:3px 12px; border-radius:20px; letter-spacing:.06em; margin-bottom:14px; }
.tt-bb-title { font-size:1.25rem; font-weight:900; color:rgba(255,255,255,.92); margin-bottom:8px; line-height:1.3; }
.tt-bb-sub { font-size:.88rem; color:rgba(255,255,255,.5); line-height:1.65; max-width:520px; margin:0 auto 20px; }
.tt-bb-sub .dev { font-family:'Mangal','Noto Sans Devanagari',sans-serif; color:#fb923c; }
.tt-bb-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tt-bb-primary { display:inline-flex; align-items:center; gap:7px; background:#fb923c; color:#1a0800; font-size:.88rem; font-weight:800; padding:11px 24px; border-radius:11px; text-decoration:none; transition:background .18s,transform .15s; border:none; cursor:pointer; font-family:'Poppins',sans-serif; }
.tt-bb-primary:hover { background:#fdba74; transform:translateY(-1px); }
.tt-bb-secondary { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.5); font-size:.82rem; font-weight:600; padding:11px 20px; border-radius:11px; border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:all .18s; font-family:'Poppins',sans-serif; }
.tt-bb-secondary:hover { background:rgba(255,255,255,.1); color:rgba(255,255,255,.75); }

/* ── Light mode ───────────────────────────────── */
body.tt-light .tt-page::before {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(251,146,60,.06) 0%, transparent 42%),
        radial-gradient(circle at 85% 75%, rgba(251,146,60,.05) 0%, transparent 42%),
        radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px;
}
body.tt-light .tt-hero { background:linear-gradient(160deg,#fff7ed 0%,#fff4e6 50%,#fef3c7 100%); border-color:rgba(234,88,12,.2); box-shadow:0 4px 40px rgba(0,0,0,.08),inset 0 1px 0 #fff; }
body.tt-light .tt-settings { background:rgba(0,0,0,.03); border-bottom-color:rgba(234,88,12,.15); }
body.tt-light .tt-sep { background:rgba(234,88,12,.2); }
body.tt-light .font-btn, body.tt-light .setting-btn, body.tt-light .option-btn { color:rgba(0,0,0,.35); }
body.tt-light .font-btn:hover, body.tt-light .setting-btn:hover, body.tt-light .option-btn:hover { background:rgba(234,88,12,.08); color:#9a3412; }
body.tt-light .font-btn.active, body.tt-light .setting-btn.active, body.tt-light .option-btn.active { background:rgba(234,88,12,.12); border-color:rgba(234,88,12,.35); color:#9a3412; }
body.tt-light #testStatus { color:#ea580c; }
body.tt-light .tt-end-btn { color:#ea580c; border-color:rgba(234,88,12,.3); }
body.tt-light .tt-tut-link { color:rgba(0,0,0,.3); border-color:rgba(0,0,0,.1); }
body.tt-light .tt-tut-link:hover { color:#9a3412; border-color:rgba(234,88,12,.3); background:rgba(234,88,12,.07); }
#changeParagraphBtn:hover { background:rgba(96,165,250,.12); border-color:rgba(96,165,250,.4); color:#93c5fd; }
body.tt-light #changeParagraphBtn { color:rgba(37,99,235,.6); border-color:rgba(37,99,235,.25); }
body.tt-light #changeParagraphBtn:hover { background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.35); color:#1d4ed8; }
body.tt-light .tt-chip-wpm  .tt-chip-val { color:#ea580c; }
body.tt-light .tt-chip-time .tt-chip-val { color:#ea580c; }
body.tt-light #typingText span           { color:rgba(100,40,0,.45); }
body.tt-light #typingText span.correct   { color:#6b3800; }
body.tt-light #typingText span.incorrect { color:#dc2626; }
body.tt-light #typingText span.active    { color:#ea580c; border-bottom-color:#ea580c; }
body.tt-light .start-hint { color:rgba(234,88,12,.45); }
body.tt-light .tt-progress-bar { background:rgba(0,0,0,.06); }
body.tt-light .tt-body-footer { border-top-color:rgba(0,0,0,.08); }
body.tt-light .tt-chip { border-right-color:rgba(0,0,0,.08); }
body.tt-light .tt-chip-icon { color:rgba(0,0,0,.2); }
body.tt-light .tt-chip-lbl { color:rgba(0,0,0,.25); }
body.tt-light .tt-chip-ok  .tt-chip-val { color:#16a34a; }
body.tt-light .tt-chip-err .tt-chip-val { color:#dc2626; }
body.tt-light .tt-chip-acc .tt-chip-val { color:#2563eb; }
body.tt-light .graph-section { border-color:rgba(0,0,0,.08); }
body.tt-light .tt-exam-badge { background:rgba(240,255,242,.97); border-color:rgba(22,163,74,.4); color:#16a34a; }
body.tt-light .tt-beginner-banner { background:linear-gradient(135deg,rgba(251,146,60,.1),rgba(251,146,60,.04)); border-color:rgba(234,88,12,.35); }
body.tt-light .tt-bb-score { background:rgba(234,88,12,.1); border-color:rgba(234,88,12,.3); color:#9a3412; }
body.tt-light .tt-bb-title { color:rgba(0,0,0,.85); }
body.tt-light .tt-bb-sub        { color:rgba(0,0,0,.5); }
body.tt-light .tt-bb-secondary  { background:rgba(234,88,12,.08); color:#9a3412; border-color:rgba(234,88,12,.25); }
body.tt-light .tt-bb-secondary:hover { background:rgba(234,88,12,.15); color:#9a3412; }
.tt-h1-sub { font-size:.55em; font-weight:600; color:rgba(255,255,255,.35); letter-spacing:.08em; vertical-align:middle; margin-left:8px; }
body.tt-light .tt-h1-sub { color:rgba(0,0,0,.3); }

/* ══ SEO Content Section ══════════════════════ */
.seo-wrap { display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.dev    { font-family:'Mangal','Noto Sans Devanagari',sans-serif; }
.dev-hi { font-family:'Mangal','Noto Sans Devanagari',sans-serif; color:#fb923c; font-weight:700; }

.seo-intro { background:linear-gradient(135deg,rgba(251,146,60,.09) 0%,rgba(96,165,250,.05) 100%); border:1px solid rgba(251,146,60,.2); border-radius:16px; padding:26px 30px; display:flex; align-items:center; gap:24px; }
.seo-intro-left { flex:1; min-width:0; }
.seo-quote { font-family:'Mangal','Noto Sans Devanagari',sans-serif; font-size:1.35rem; font-weight:700; color:#fb923c; display:block; margin-bottom:10px; line-height:1.5; }
.seo-intro-left h2 { font-size:1.15rem; font-weight:800; color:rgba(255,255,255,.9); margin:0 0 8px; }
.seo-intro-left p  { font-size:.87rem; color:rgba(255,255,255,.5); margin:0; line-height:1.65; }
.seo-intro-right { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.seo-badge { background:rgba(0,0,0,.25); border:1px solid rgba(251,146,60,.18); border-radius:10px; padding:9px 18px; text-align:center; min-width:90px; }
.seo-badge strong { display:block; font-size:1.1rem; font-weight:900; color:#fb923c; line-height:1.1; }
.seo-badge span   { font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.32); }

.seo-card { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:22px 26px; }
.seo-h2 { font-size:1.05rem; font-weight:800; color:rgba(255,255,255,.88); margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:9px; }
.seo-icon { width:30px; height:30px; border-radius:8px; flex-shrink:0; background:rgba(251,146,60,.13); display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.seo-p { font-size:.87rem; color:rgba(255,255,255,.48); line-height:1.72; margin:0 0 10px; }
.seo-p:last-child { margin-bottom:0; }

.seo-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.seo-feat { background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; transition:border-color .18s,background .18s; }
.seo-feat:hover { border-color:rgba(251,146,60,.22); background:rgba(251,146,60,.04); }
.seo-feat-ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.seo-feat-t { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.8); }
.seo-feat-d { font-size:.77rem; color:rgba(255,255,255,.4); line-height:1.55; }
.ic-amber { background:rgba(251,146,60,.14); }
.ic-green { background:rgba(74,222,128,.1); }
.ic-blue  { background:rgba(96,165,250,.1); }
.ic-purp  { background:rgba(167,139,250,.1); }
.ic-red   { background:rgba(248,113,113,.1); }
.ic-teal  { background:rgba(45,212,191,.1); }

.seo-exams { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:10px; }
.seo-exam { background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.06); border-left:3px solid rgba(251,146,60,.45); border-radius:12px; padding:14px 15px; }
.seo-exam-n { font-size:.8rem; font-weight:700; color:rgba(255,255,255,.75); margin-bottom:8px; }
.seo-tags { display:flex; gap:5px; flex-wrap:wrap; }
.stag { font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:5px; letter-spacing:.03em; }
.stag-f { background:rgba(251,146,60,.13); color:#fb923c; }
.stag-w { background:rgba(74,222,128,.1); color:#4ade80; }
.stag-t { background:rgba(96,165,250,.1); color:#60a5fa; }

.seo-tips { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.seo-tip { display:flex; gap:12px; background:rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:15px; }
.seo-tip-n { font-size:2rem; font-weight:900; color:rgba(251,146,60,.16); line-height:1; flex-shrink:0; min-width:26px; font-family:'Poppins',sans-serif; }
.seo-tip-t { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.75); margin-bottom:5px; }
.seo-tip-d { font-size:.77rem; color:rgba(255,255,255,.4); line-height:1.55; }

.seo-steps { display:flex; flex-direction:column; gap:12px; }
.seo-step  { display:flex; gap:14px; align-items:flex-start; }
.seo-step-n { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:rgba(251,146,60,.12); border:1px solid rgba(251,146,60,.28); color:#fb923c; font-size:.8rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.seo-step-t { font-size:.85rem; font-weight:700; color:rgba(255,255,255,.75); margin-bottom:4px; }
.seo-step-d { font-size:.8rem; color:rgba(255,255,255,.42); line-height:1.6; }

.seo-mets { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:10px; }
.seo-met { background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:13px 15px; }
.seo-met-l { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.28); margin-bottom:5px; }
.seo-met-v { font-size:1.1rem; font-weight:900; margin-bottom:4px; font-variant-numeric:tabular-nums; }
.seo-met-d { font-size:.75rem; color:rgba(255,255,255,.38); line-height:1.5; }

.seo-faq { display:flex; flex-direction:column; gap:7px; }
.seo-faq details { background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.07); border-radius:12px; overflow:hidden; }
.seo-faq details[open] { border-color:rgba(251,146,60,.2); }
.seo-faq summary { padding:14px 18px; font-size:.85rem; font-weight:700; color:rgba(255,255,255,.72); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; user-select:none; }
.seo-faq summary::-webkit-details-marker { display:none; }
.seo-faq summary::after { content:'+'; color:rgba(251,146,60,.6); font-size:1.1rem; flex-shrink:0; }
.seo-faq details[open] summary::after { content:'−'; }
.seo-faq-body { padding:12px 18px 14px; font-size:.82rem; color:rgba(255,255,255,.45); line-height:1.68; border-top:1px solid rgba(255,255,255,.05); }

/* Light mode — SEO section */
body.tt-light .seo-intro { background:linear-gradient(135deg,rgba(251,146,60,.07),rgba(96,165,250,.04)); border-color:rgba(234,88,12,.22); }
body.tt-light .seo-quote { color:#ea580c; }
body.tt-light .dev-hi { color:#ea580c; }
body.tt-light .seo-intro-left h2 { color:rgba(0,0,0,.8); }
body.tt-light .seo-intro-left p  { color:rgba(0,0,0,.5); }
body.tt-light .seo-badge { background:rgba(0,0,0,.04); border-color:rgba(234,88,12,.2); }
body.tt-light .seo-badge strong { color:#ea580c; }
body.tt-light .seo-badge span   { color:rgba(0,0,0,.35); }
body.tt-light .seo-card { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.08); }
body.tt-light .seo-h2 { color:rgba(0,0,0,.78); border-bottom-color:rgba(0,0,0,.07); }
body.tt-light .seo-icon { background:rgba(234,88,12,.1); }
body.tt-light .seo-p { color:rgba(0,0,0,.5); }
body.tt-light .seo-feat { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.08); }
body.tt-light .seo-feat:hover { border-color:rgba(234,88,12,.2); }
body.tt-light .seo-feat-t { color:rgba(0,0,0,.7); }
body.tt-light .seo-feat-d { color:rgba(0,0,0,.45); }
body.tt-light .seo-exam { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.07); border-left-color:rgba(234,88,12,.4); }
body.tt-light .seo-exam-n { color:rgba(0,0,0,.7); }
body.tt-light .stag-f { background:rgba(234,88,12,.1); color:#9a3412; }
body.tt-light .stag-w { background:rgba(22,163,74,.08); color:#15803d; }
body.tt-light .stag-t { background:rgba(37,99,235,.08); color:#1d4ed8; }
body.tt-light .seo-tip { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.07); }
body.tt-light .seo-tip-n { color:rgba(234,88,12,.18); }
body.tt-light .seo-tip-t { color:rgba(0,0,0,.7); }
body.tt-light .seo-tip-d { color:rgba(0,0,0,.45); }
body.tt-light .seo-step-n { background:rgba(234,88,12,.1); border-color:rgba(234,88,12,.25); color:#9a3412; }
body.tt-light .seo-step-t { color:rgba(0,0,0,.72); }
body.tt-light .seo-step-d { color:rgba(0,0,0,.45); }
body.tt-light .seo-met { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.07); }
body.tt-light .seo-met-l { color:rgba(0,0,0,.28); }
body.tt-light .seo-met-d { color:rgba(0,0,0,.42); }
body.tt-light .seo-faq details { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.08); }
body.tt-light .seo-faq details[open] { border-color:rgba(234,88,12,.25); }
body.tt-light .seo-faq summary { color:rgba(0,0,0,.68); }
body.tt-light .seo-faq summary::after { color:rgba(234,88,12,.6); }
body.tt-light .seo-faq-body { color:rgba(0,0,0,.48); border-top-color:rgba(0,0,0,.06); }

@media (max-width:640px) {
    .tt-settings { justify-content:flex-start; padding:10px 14px; gap:4px; }
    .tt-group { flex-wrap:wrap; justify-content:flex-start; }
    .font-btn, .setting-btn, .option-btn { padding:4px 8px; font-size:.75rem; }
    .tt-body { padding:20px 16px 18px; }
    #typingText { font-size:18px !important; }
    .result-grid .value { font-size:1.7rem; }
    .seo-intro { flex-direction:column; }
    .seo-intro-right { flex-direction:row; flex-wrap:wrap; justify-content:center; }
    .seo-feats { grid-template-columns:1fr 1fr; }
    .seo-tips  { grid-template-columns:1fr; }
    .seo-mets  { grid-template-columns:1fr 1fr; }

    .tt-body-footer { flex-wrap:wrap; row-gap:10px; }
    .tt-stat-row { flex:1 1 100%; flex-wrap:wrap; justify-content:center; row-gap:8px; }
    .tt-chip { padding:0 10px; border-right:none; }
    .tt-footer-actions { margin-left:0; width:100%; justify-content:center; }
}