/* ============================================================
   IMMERSIVE SKIN — Tags Page
   Warm editorial overrides for the modern tags layout
   ============================================================ */

/* Hero — keep the dark dramatic look, just use skin fonts */
body[data-skin="immersive"] .th {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3b3d 100%);
}
body[data-skin="immersive"] .th h1 {
    color: #ffffff;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
}
body[data-skin="immersive"] .th p {
    color: rgba(255,255,255,0.65);
    font-family: var(--font-main);
}
body[data-skin="immersive"] .th::after {
    background: var(--c-bg);
}

/* Stats — glass on dark hero */
body[data-skin="immersive"] .th-nums {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
}
body[data-skin="immersive"] .th-n strong {
    color: #ffffff;
    font-family: var(--font-display);
}
body[data-skin="immersive"] .th-n small {
    color: rgba(255,255,255,0.5);
    font-family: var(--font-main);
}

/* Search bar — glass on dark hero */
body[data-skin="immersive"] .ts {
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.2);
}
body[data-skin="immersive"] .ts input {
    color: #ffffff;
    font-family: var(--font-main);
}
body[data-skin="immersive"] .ts input::placeholder {
    color: rgba(255,255,255,0.4);
}
body[data-skin="immersive"] .ts:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px rgba(194,112,62,0.15);
}
body[data-skin="immersive"] .ts-i { color: rgba(255,255,255,0.5); }
body[data-skin="immersive"] .ts:focus-within .ts-i { color: var(--c-accent); }

/* Alphabet index */
body[data-skin="immersive"] .ix {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}
body[data-skin="immersive"] .ix a {
    color: var(--c-text-muted);
    font-family: var(--font-main);
}
body[data-skin="immersive"] .ix a:hover {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
}

/* Tag groups */
body[data-skin="immersive"] .tg-sec {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    border-inline-start: 4px solid transparent;
}
body[data-skin="immersive"] .tg-sec:hover {
    border-inline-start-color: var(--c-accent-soft);
}
body[data-skin="immersive"] .tg-sec.is-open {
    border-inline-start-color: var(--c-accent);
}

/* Letter circle */
body[data-skin="immersive"] .tg-letter {
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-primary) 100%);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
}

/* Tag pills — consistent system */
body[data-skin="immersive"] .tp {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-family: var(--font-main);
    transition: all var(--duration-fast) ease;
}
body[data-skin="immersive"] .tp:hover {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    transform: translateY(-1px) scale(1.03);
}
body[data-skin="immersive"] .tp[data-weight="5"] {
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-primary) 100%);
    color: #fff;
    border-color: transparent;
}
body[data-skin="immersive"] .tp-c {
    color: var(--c-text-dim);
}
body[data-skin="immersive"] .tp:hover .tp-c {
    color: rgba(255,255,255,0.7);
}
body[data-skin="immersive"] .tp[data-weight="5"] .tp-c {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.15);
}

/* Body background */
body[data-skin="immersive"] { background: var(--c-bg); }