/* ── 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:#818cf8; 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(129,140,248,.06) 0%, transparent 42%),
            radial-gradient(circle at 85% 75%, rgba(129,140,248,.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,#0a0718 0%,#060516 50%,#030214 100%); border:1px solid rgba(129,140,248,.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(129,140,248,.1); background:rgba(0,0,0,.18); }
    .tt-sep { width:1px; height:18px; background:rgba(129,140,248,.18); margin:0 4px; flex-shrink:0; }
    .tt-group { display:flex; align-items:center; gap:4px; }
    .diff-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; }
    .diff-btn:hover, .setting-btn:hover, .option-btn:hover { background:rgba(129,140,248,.1); color:rgba(255,255,255,.75); }
    .diff-btn.active, .setting-btn.active, .option-btn.active { background:rgba(129,140,248,.18); color:#818cf8; border-color:rgba(129,140,248,.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:#818cf8; font-family:'Poppins',sans-serif; }
    .tt-end-btn { background:transparent; border:1px solid rgba(129,140,248,.3); color:#818cf8; 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(129,140,248,.1); }
    .tt-restart-btn { background:rgba(129,140,248,.15); border:none; color:#818cf8; 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(129,140,248,.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:#818cf8; border-color:rgba(129,140,248,.3); background:rgba(129,140,248,.07); }
    .tt-para-picker { background:rgba(255,255,255,.03); border:1px solid rgba(129,140,248,.22); color:rgba(129,140,248,.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(129,140,248,.08); }
    .tt-para-picker option { background:#0a0718; color:#f1f5f9; }
    body.tt-light .tt-para-picker { background:rgba(255,255,255,.7); border-color:rgba(79,70,229,.25); color:#3730a3; }
    body.tt-light .tt-para-picker option { background:#fff; color:#1e1b3a; }
    .tt-chip-wpm  .tt-chip-val { color:#818cf8; }
    .tt-chip-time .tt-chip-val { color:#818cf8; }

    /* ── Typing body ──────────────────────────────── */
    .tt-body { padding:24px 28px 16px; cursor:text; min-height:180px; position:relative; }
    .tt-text-wrap { height:280px; overflow:hidden; position:relative; line-height:1.9; font-size:20px; user-select:none; -webkit-user-select:none; }
    .word { margin-right:10px; display:inline-block; }
    .char { color:rgba(255,255,255,.35); }
    .char.correct { color:rgba(255,255,255,.88); }
    .char.incorrect { color:#f87171; text-decoration:underline; text-underline-offset:3px; }
    @keyframes blink-caret { 0%,100%{border-bottom-color:#818cf8} 50%{border-bottom-color:transparent} }
    .char.current { color:#818cf8; border-bottom:2px solid #818cf8; animation:blink-caret 1s step-end infinite; }
    .start-hint { text-align:center; font-size:.78rem; color:rgba(129,140,248,.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(129,140,248,.14); border-color:rgba(129,140,248,.4); color:#818cf8; font-weight:800; }
    .tt-tut-highlight:hover { background:rgba(129,140,248,.22); border-color:rgba(129,140,248,.55); color:#a5b4fc; }
    body.tt-light .tt-tut-highlight { background:rgba(79,70,229,.1); border-color:rgba(79,70,229,.35); color:#4f46e5; }
    body.tt-light .tt-tut-highlight:hover { background:rgba(79,70,229,.18); border-color:rgba(79,70,229,.5); color:#3730a3; }
    .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,#818cf8,#6366f1); transition:width .3s; }

    /* ── Card wrapper + 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(129,140,248,.07) 0%,rgba(0,0,0,.3) 100%); border:1px solid rgba(129,140,248,.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:#818cf8; 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(129,140,248,.12); border-color:rgba(129,140,248,.3); color:#818cf8; }
    .rp-icon-btn.rp-primary { background:rgba(129,140,248,.15); border-color:rgba(129,140,248,.3); color:#818cf8; }
    .rp-icon-btn.rp-primary:hover { background:rgba(129,140,248,.25); }
    body.tt-light .result-panel { background:linear-gradient(135deg,#eef2ff 0%,#e0e7ff 100%); border-color:rgba(79,70,229,.2); }
    body.tt-light .rp-lbl { color:rgba(0,0,0,.5); }
    body.tt-light .rp-val { color:#4f46e5; }
    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(79,70,229,.1); border-color:rgba(79,70,229,.3); color:#3730a3; }
    body.tt-light .rp-icon-btn.rp-primary { background:rgba(79,70,229,.12); border-color:rgba(79,70,229,.3); color:#3730a3; }
    body.tt-light #graphCanvas { background:transparent; }
    .graph-section { margin:4px 0 28px; }

    /* ── Beginner banner ──────────────────────────── */
    .tt-beginner-banner { display:none; background:linear-gradient(135deg,rgba(129,140,248,.12) 0%,rgba(129,140,248,.05) 100%); border:1.5px solid rgba(129,140,248,.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(129,140,248,.15); border:1px solid rgba(129,140,248,.3); color:#818cf8; 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-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
    .tt-bb-primary { display:inline-flex; align-items:center; gap:7px; background:#818cf8; color:#0a0718; 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:#a5b4fc; 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(129,140,248,.06) 0%, transparent 42%), radial-gradient(circle at 85% 75%, rgba(129,140,248,.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,#eef2ff 0%,#e0e7ff 50%,#c7d2fe 100%); border-color:rgba(79,70,229,.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(79,70,229,.15); }
    body.tt-light .tt-sep { background:rgba(79,70,229,.2); }
    body.tt-light .diff-btn, body.tt-light .setting-btn, body.tt-light .option-btn { color:rgba(0,0,0,.35); }
    body.tt-light .diff-btn:hover, body.tt-light .setting-btn:hover, body.tt-light .option-btn:hover { background:rgba(79,70,229,.08); color:#3730a3; }
    body.tt-light .diff-btn.active, body.tt-light .setting-btn.active, body.tt-light .option-btn.active { background:rgba(79,70,229,.12); border-color:rgba(79,70,229,.35); color:#3730a3; }
    body.tt-light #testStatus { color:#4f46e5; }
    body.tt-light .tt-end-btn { color:#4f46e5; border-color:rgba(79,70,229,.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:#3730a3; border-color:rgba(79,70,229,.3); background:rgba(79,70,229,.07); }
    body.tt-light .tt-chip-wpm  .tt-chip-val { color:#4f46e5; }
    body.tt-light .tt-chip-time .tt-chip-val { color:#4f46e5; }
    body.tt-light .char { color:rgba(60,40,120,.45); }
    body.tt-light .char.correct { color:#2d1b6b; }
    body.tt-light .char.incorrect { color:#dc2626; }
    body.tt-light .char.current { color:#4f46e5; border-bottom-color:#4f46e5; }
    body.tt-light .start-hint { color:rgba(79,70,229,.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(129,140,248,.1),rgba(129,140,248,.04)); border-color:rgba(79,70,229,.35); }
    body.tt-light .tt-bb-score { background:rgba(79,70,229,.1); border-color:rgba(79,70,229,.3); color:#3730a3; }
    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(79,70,229,.08); color:#3730a3; border-color:rgba(79,70,229,.25); }
    body.tt-light .tt-bb-secondary:hover { background:rgba(79,70,229,.15); color:#3730a3; }
    .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; }
    .seo-intro { background:linear-gradient(135deg,rgba(129,140,248,.09) 0%,rgba(96,165,250,.05) 100%); border:1px solid rgba(129,140,248,.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-size:1.35rem; font-weight:700; color:#818cf8; display:block; margin-bottom:10px; line-height:1.5; font-style:italic; }
    .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(129,140,248,.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:#818cf8; 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 14px; display:flex; align-items:center; gap:8px; }
    .seo-icon { font-size:1rem; }
    .seo-p { font-size:.875rem; color:rgba(255,255,255,.5); line-height:1.75; margin:0 0 10px; }
    .seo-p:last-child { margin:0; }
    .seo-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    .seo-feat { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:14px 16px; }
    .seo-feat-ic { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:8px; }
    .ic-indigo { background:rgba(129,140,248,.15); }
    .ic-green  { background:rgba(74,222,128,.12); }
    .ic-blue   { background:rgba(96,165,250,.12); }
    .ic-purp   { background:rgba(167,139,250,.12); }
    .ic-teal   { background:rgba(45,212,191,.12); }
    .ic-red    { background:rgba(248,113,113,.1); }
    .seo-feat-t { font-size:.8rem; font-weight:700; color:rgba(255,255,255,.8); margin-bottom:4px; }
    .seo-feat-d { font-size:.75rem; color:rgba(255,255,255,.38); line-height:1.55; }
    .seo-exams { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .seo-exam { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:12px 14px; }
    .seo-exam-n { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.75); margin-bottom:6px; }
    .seo-tags { display:flex; flex-wrap:wrap; gap:5px; }
    .stag { font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:20px; letter-spacing:.05em; }
    .stag-d { background:rgba(129,140,248,.12); color:#818cf8; border:1px solid rgba(129,140,248,.2); }
    .stag-w { background:rgba(74,222,128,.1); color:#4ade80; border:1px solid rgba(74,222,128,.2); }
    .stag-t { background:rgba(96,165,250,.1); color:#93c5fd; border:1px solid rgba(96,165,250,.18); }
    .seo-tips { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .seo-tip { display:flex; align-items:flex-start; gap:12px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:9px; padding:12px 14px; }
    .seo-tip-n { width:24px; height:24px; border-radius:50%; background:rgba(129,140,248,.15); border:1px solid rgba(129,140,248,.25); color:#818cf8; font-size:.72rem; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .seo-tip-t { font-size:.8rem; font-weight:700; color:rgba(255,255,255,.8); margin-bottom:3px; }
    .seo-tip-d { font-size:.74rem; color:rgba(255,255,255,.38); line-height:1.55; }
    .seo-steps { display:flex; flex-direction:column; gap:10px; }
    .seo-step { display:flex; align-items:flex-start; gap:14px; }
    .seo-step-n { width:28px; height:28px; border-radius:50%; background:rgba(129,140,248,.15); border:1.5px solid rgba(129,140,248,.3); color:#818cf8; font-size:.8rem; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
    .seo-step-t { font-size:.85rem; font-weight:700; color:rgba(255,255,255,.8); margin-bottom:3px; }
    .seo-step-d { font-size:.8rem; color:rgba(255,255,255,.42); line-height:1.6; }
    .seo-mets { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .seo-met { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:14px 16px; }
    .seo-met-l { font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.28); margin-bottom:4px; }
    .seo-met-v { font-size:1.05rem; font-weight:900; margin-bottom:5px; }
    .seo-met-d { font-size:.72rem; color:rgba(255,255,255,.38); line-height:1.5; }
    .seo-faq { display:flex; flex-direction:column; gap:8px; }
    .seo-faq details { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:9px; }
    .seo-faq summary { padding:12px 16px; font-size:.85rem; font-weight:700; color:rgba(255,255,255,.75); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
    .seo-faq summary::-webkit-details-marker { display:none; }
    .seo-faq summary::after { content:'＋'; font-size:.8rem; color:rgba(255,255,255,.3); }
    .seo-faq details[open] summary::after { content:'－'; }
    .seo-faq-body { padding:0 16px 14px; font-size:.82rem; color:rgba(255,255,255,.45); line-height:1.7; }

    /* Light mode SEO */
    body.tt-light .seo-intro { background:linear-gradient(135deg,rgba(129,140,248,.1) 0%,rgba(96,165,250,.06) 100%); border-color:rgba(79,70,229,.2); }
    body.tt-light .seo-quote { color:#4f46e5; }
    body.tt-light .seo-intro-left h2 { color:rgba(0,0,0,.85); }
    body.tt-light .seo-intro-left p  { color:rgba(0,0,0,.5); }
    body.tt-light .seo-badge { background:rgba(255,255,255,.7); border-color:rgba(79,70,229,.2); }
    body.tt-light .seo-badge strong { color:#4f46e5; }
    body.tt-light .seo-badge span   { color:rgba(0,0,0,.3); }
    body.tt-light .seo-card { background:rgba(255,255,255,.7); border-color:rgba(0,0,0,.08); }
    body.tt-light .seo-h2   { color:rgba(0,0,0,.85); }
    body.tt-light .seo-p    { color:rgba(0,0,0,.55); }
    body.tt-light .seo-feat { background:rgba(255,255,255,.8); border-color:rgba(0,0,0,.06); }
    body.tt-light .seo-feat-t { color:rgba(0,0,0,.75); }
    body.tt-light .seo-feat-d { color:rgba(0,0,0,.4); }
    body.tt-light .seo-exam { background:rgba(255,255,255,.8); border-color:rgba(0,0,0,.06); }
    body.tt-light .seo-exam-n { color:rgba(0,0,0,.7); }
    body.tt-light .seo-tip { background:rgba(255,255,255,.7); border-color:rgba(0,0,0,.06); }
    body.tt-light .seo-tip-t { color:rgba(0,0,0,.75); }
    body.tt-light .seo-tip-d { color:rgba(0,0,0,.42); }
    body.tt-light .seo-step-t { color:rgba(0,0,0,.75); }
    body.tt-light .seo-step-d { color:rgba(0,0,0,.45); }
    body.tt-light .seo-met { background:rgba(255,255,255,.7); border-color:rgba(0,0,0,.06); }
    body.tt-light .seo-met-l { color:rgba(0,0,0,.3); }
    body.tt-light .seo-met-d { color:rgba(0,0,0,.42); }
    body.tt-light .seo-faq details { background:rgba(255,255,255,.7); border-color:rgba(0,0,0,.08); }
    body.tt-light .seo-faq summary { color:rgba(0,0,0,.7); }
    body.tt-light .seo-faq-body    { color:rgba(0,0,0,.5); }

    @media(max-width:640px) {
        .tt-settings { justify-content:flex-start; padding:10px 14px; gap:4px; }
        .tt-group { flex-wrap:wrap; justify-content:flex-start; }
        .diff-btn, .setting-btn, .option-btn { padding:4px 8px; font-size:.75rem; }
        .tt-body { padding:16px 16px 10px; }
        .seo-feats { grid-template-columns:1fr 1fr; }
        .seo-tips  { grid-template-columns:1fr; }
        .seo-mets  { grid-template-columns:1fr 1fr; }
        .seo-intro { flex-direction:column; }
        .seo-intro-right { flex-direction:column; width:100%; }
        .seo-badge { width:100%; }

        .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; }
    }