/* ═══════════════════════════════════════════════════════════
   HindiTyping.online — v7.0 — Modern Professional Theme
   Balanced dark: not pitch-black, warm contrast, clean
   ═══════════════════════════════════════════════════════════ */

:root {
    --bg-void: #232528;
    --bg-primary: #232528;
    --bg-secondary: #2c2e31;
    --bg-card: #2c2e31;
    --bg-card-hover: #353739;
    --bg-glass: rgba(255,255,255,0.05);
    --bg-hover: rgba(255,255,255,0.08);
    --border-glass: rgba(255,255,255,0.06);
    --text-primary: #e8e6e3;
    --text-secondary: #9e9e9e;
    --text-muted: #5a5a5a;
    --text-dim: #b0b3b8;
    --accent: #e2b714;
    --accent-hover: #c9a012;
    --accent-rgb: 226,183,20;
    --accent-glow: rgba(226,183,20,0.12);
    --neon-purple: #c084fc;
    --neon-blue: #60a5fa;
    --neon-cyan: #22d3ee;
    --neon-pink: #f472b6;
    --neon-green: #4ade80;
    --neon-orange: #fb923c;
    --correct: #4ade80;
    --wrong: #f87171;
    --extra: #fb923c;
    --missed: #6b7280;
    --caret: #e2b714;
    --font-display: 'Syne', 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --font-hindi: 'Noto Sans Devanagari', 'Mangal', sans-serif;
    --font-krutidev: 'Kruti Dev 010', 'Kruti Dev', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-ui: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow: 0 2px 8px rgba(0,0,0,0.2);
    --gradient-hero: linear-gradient(135deg, #e2b714 0%, #22d3ee 50%, #c084fc 100%);
}

/* ── Themes ── */
[data-theme="purple"] {
    --accent: #8b5cf6; --accent-hover: #7c3aed; --accent-rgb: 139,92,246; --caret: #8b5cf6;
    --gradient-hero: linear-gradient(135deg, #8b5cf6, #06b6d4, #ec4899);
}
[data-theme="ocean"] {
    --bg-void: #1a2332; --bg-primary: #1a2332; --bg-secondary: #222e3d; --bg-card: #222e3d;
    --accent: #38bdf8; --accent-hover: #0ea5e9; --accent-rgb: 56,189,248; --caret: #38bdf8;
    --correct: #4ade80; --wrong: #fb7185;
    --gradient-hero: linear-gradient(135deg, #38bdf8, #818cf8, #4ade80);
}
[data-theme="forest"] {
    --bg-void: #1a2520; --bg-primary: #1a2520; --bg-secondary: #243028; --bg-card: #243028;
    --accent: #4ade80; --accent-hover: #22c55e; --accent-rgb: 74,222,128; --caret: #4ade80;
    --correct: #86efac; --wrong: #fca5a5;
    --gradient-hero: linear-gradient(135deg, #4ade80, #34d399, #fbbf24);
}
[data-theme="sunset"] {
    --bg-void: #261e1a; --bg-primary: #261e1a; --bg-secondary: #332824; --bg-card: #332824;
    --accent: #f97316; --accent-hover: #ea580c; --accent-rgb: 249,115,22; --caret: #f97316;
    --correct: #a3e635; --wrong: #fca5a5;
    --gradient-hero: linear-gradient(135deg, #f97316, #ef4444, #eab308);
}
[data-theme="serika"] {
    --bg-void: #323437; --bg-primary: #323437; --bg-secondary: #3c3f42; --bg-card: #3c3f42;
    --text-primary: #d1d0c5; --text-secondary: #7e8082; --text-muted: #565759;
    --accent: #e2b714; --accent-rgb: 226,183,20; --caret: #e2b714;
    --correct: #7ec850; --wrong: #ca4754;
    --gradient-hero: linear-gradient(135deg, #e2b714, #d4a014, #b88e0c);
}
[data-theme="light"] {
    --bg-void: #f5f5f5; --bg-primary: #f5f5f5; --bg-secondary: #e8e8e8; --bg-card: #ffffff;
    --bg-card-hover: #f0f0f0; --border-glass: rgba(0,0,0,0.08);
    --text-primary: #1a1a1a; --text-secondary: #666666; --text-muted: #b0b0b0; --text-dim: #cccccc;
    --accent: #c9a012; --accent-hover: #b08e0f; --accent-rgb: 201,160,18; --caret: #c9a012;
    --correct: #059669; --wrong: #dc2626;
    --gradient-hero: linear-gradient(135deg, #c9a012, #3b82f6, #06b6d4);
    --shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-void); color: var(--text-primary); font-family: var(--font-ui); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { background: var(--bg-void); min-height: 100vh; overflow-x: hidden; line-height: 1.6; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
::selection { background: rgba(var(--accent-rgb), 0.25); color: var(--text-primary); }
.ht-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ═══ CONFIG BAR ═══ */
.ht-config {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px; padding: 12px 20px; margin: 0 auto 20px; max-width: 1000px;
    background: var(--bg-secondary); border-radius: var(--radius); transition: opacity 0.3s;
}
.ht-config-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ht-config-divider { width: 1px; height: 22px; background: var(--border-glass); margin: 0 8px; }
.ht-pill-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-right: 4px; user-select: none; }
.ht-pill {
    padding: 5px 14px; border: none; border-radius: var(--radius-xs); background: transparent;
    color: var(--text-muted); font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all var(--transition); user-select: none;
}
.ht-pill:hover { background: var(--bg-hover); color: var(--text-secondary); }
.ht-pill.active { background: var(--bg-card-hover); color: var(--accent); }
.ht-select {
    padding: 5px 10px; border: 1px solid var(--border-glass); border-radius: var(--radius-xs);
    background: var(--bg-primary); color: var(--text-secondary);
    font-family: var(--font-ui); font-size: 11px; font-weight: 600;
    cursor: pointer; outline: none; transition: all var(--transition);
}
.ht-select:focus { border-color: rgba(var(--accent-rgb), 0.4); }
.ht-select option { background: var(--bg-secondary); color: var(--text-primary); }

/* ═══ TYPING AREA ═══ */
.ht-typing-area {
    position: relative; max-width: 1000px; margin: 0 auto; padding: 28px 32px 20px;
    cursor: text; min-height: 200px; outline: none;
}
.ht-live-stats { display: flex; gap: 28px; justify-content: center; margin-bottom: 16px; opacity: 0; transition: opacity 0.4s; }
.ht-live-stats.visible { opacity: 1; }
.ht-live-stat { text-align: center; }
.ht-live-stat span { display: block; font-family: var(--font-mono); font-size: 28px; font-weight: 800; color: var(--accent); }
.ht-live-stat small { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; }

.ht-timer-bar { height: 3px; border-radius: 3px; background: var(--bg-glass); margin-bottom: 16px; overflow: hidden; }
.ht-timer-bar-fill { height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width 0.15s linear; }

.ht-text-display {
    font-family: var(--font-mono); font-size: 1.45rem; line-height: 2.2;
    color: var(--text-dim); position: relative; max-height: 200px;
    overflow: hidden; scroll-behavior: smooth; user-select: none;
    word-break: break-word; letter-spacing: 0.02em;
}
.ht-text-display.hindi-text { font-family: var(--font-hindi); letter-spacing: 0.01em; font-size: 1.5rem; }
.ht-text-display.krutidev-text { font-family: var(--font-krutidev); font-size: 1.5rem; }
.char { transition: color 0.06s ease; position: relative; }
.char.correct { color: var(--text-primary); }
.char.wrong { color: var(--wrong); text-decoration: underline; text-decoration-color: rgba(248,113,113,0.4); text-underline-offset: 4px; }
.char.wrong-space { background: rgba(248,113,113,0.18); border-radius: 2px; }
.char.current { color: var(--text-primary); }
.char.upcoming { color: var(--text-dim); }

.ht-caret {
    position: absolute; width: 2.5px; border-radius: 2px; background: var(--caret);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
    animation: caretBlink 1s ease-in-out infinite;
    transition: left 0.08s ease, top 0.08s ease; z-index: 10; pointer-events: none;
}
.ht-caret.typing { animation: none; opacity: 1; }
@keyframes caretBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }

.ht-hidden-input { position:absolute; left:-9999px; top:0; width:1px; height:1px; opacity:0; pointer-events:none; z-index:-1; }

.ht-start-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 6px; background: transparent;
    border-radius: var(--radius); z-index: 15;
    cursor: text; transition: opacity 0.3s; pointer-events: none;
}
.ht-start-overlay.gone { opacity: 0; pointer-events: none; }

.ht-countdown {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(35,37,40,0.92); backdrop-filter: blur(6px); border-radius: var(--radius);
    z-index: 20; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.ht-countdown.visible { opacity: 1; pointer-events: auto; }
.ht-countdown span { font-family: var(--font-mono); font-size: 72px; font-weight: 900; color: var(--accent); }

.ht-restart-hint { text-align: center; margin-top: 16px; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ht-restart-hint kbd {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    background: var(--bg-secondary); border: 1px solid var(--border-glass);
    font-family: var(--font-mono); font-size: 10px;
}

/* ═══ RESULT ═══ */
.ht-result { max-width: 800px; margin: 0 auto; padding: 20px; animation: fadeIn 0.4s ease; }
.ht-result-hero { text-align: center; margin-bottom: 24px; padding: 28px 0; }
.ht-result-main-stat .value { font-family: var(--font-mono); font-size: 80px; font-weight: 900; color: var(--accent); line-height: 1; }
.ht-result-main-stat .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--text-muted); margin-top: 8px; }
.ht-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 24px; }
.ht-result-stat { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 16px; text-align: center; }
.ht-result-stat .val { font-family: var(--font-mono); font-size: 22px; font-weight: 800; color: var(--text-primary); }
.ht-result-stat .lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-top: 4px; }
.ht-chart-container { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 24px; }
.ht-chart-container canvas { width: 100% !important; height: 180px !important; }
.ht-result-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ═══ BUTTONS ═══ */
.ht-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border: none;
    border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all var(--transition); text-decoration: none; user-select: none;
}
.ht-btn-primary { background: var(--accent); color: #1a1a1a; }
.ht-btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3); }
.ht-btn-secondary { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.ht-btn-secondary:hover { background: rgba(var(--accent-rgb), 0.2); }
.ht-btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-glass); }
.ht-btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ═══ DASHBOARD ═══ */
.ht-dashboard { max-width: 1000px; margin: 0 auto; padding: 24px; }
.ht-dashboard h1 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
.ht-dash-subtitle { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; }
.ht-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 24px; }
.ht-dash-card { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 18px 16px; text-align: center; transition: all var(--transition); }
.ht-dash-card:hover { background: var(--bg-card-hover); transform: translateY(-2px); }
.ht-dash-card .icon { font-size: 20px; margin-bottom: 6px; }
.ht-dash-card .value { font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.ht-dash-card .label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-top: 4px; }
.ht-dash-section { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 20px; margin-bottom: 16px; }
.ht-dash-section-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 14px; }
.ht-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ht-history-table th { text-align: left; padding: 8px 12px; font-weight: 700; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid var(--border-glass); }
.ht-history-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-secondary); }
.ht-history-table tr:hover td { background: var(--bg-hover); }

/* ═══ LEADERBOARD ═══ */
.ht-leaderboard { max-width: 800px; margin: 0 auto; padding: 24px; }
.ht-leaderboard h1 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin-bottom: 16px; text-align: center; }
.ht-lb-filters { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.ht-lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ht-lb-table th { text-align: left; padding: 10px 14px; font-weight: 700; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid var(--border-glass); }
.ht-lb-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.ht-lb-table tr:hover td { background: var(--bg-hover); }
.ht-lb-rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: 12px; background: var(--bg-glass); color: var(--text-secondary); }
.ht-lb-rank.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a1a; }
.ht-lb-rank.silver { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: #1a1a1a; }
.ht-lb-rank.bronze { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
.ht-lb-username { font-weight: 700; color: var(--text-primary); }
.ht-lb-wpm { font-family: var(--font-mono); font-weight: 800; color: var(--accent); }
.ht-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.ht-pagination button { width: 32px; height: 32px; border: 1px solid var(--border-glass); border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); font-weight: 700; cursor: pointer; transition: all var(--transition); }
.ht-pagination button.active, .ht-pagination button:hover { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }

/* ═══ AUTH ═══ */
.ht-auth-container { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 24px; }
.ht-auth-card { background: var(--bg-secondary); border-radius: var(--radius); padding: 36px; width: 100%; max-width: 420px; }
.ht-auth-card h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.ht-auth-card .subtitle { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; }
.ht-form-group { margin-bottom: 14px; }
.ht-form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.ht-input {
    width: 100%; padding: 10px 14px; border: 1px solid var(--border-glass); border-radius: var(--radius-xs);
    background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-ui); font-size: 14px;
    transition: all var(--transition); outline: none;
}
.ht-input:focus { border-color: rgba(var(--accent-rgb), 0.4); }
.ht-input::placeholder { color: var(--text-muted); }
.ht-input-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.ht-input-hint.success { color: var(--correct); }
.ht-input-hint.error { color: var(--wrong); }
.ht-error-msg { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.2); border-radius: var(--radius-xs); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #fca5a5; display: none; }
.ht-error-msg.visible { display: block; }
.ht-auth-footer { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-secondary); }

/* ═══ TOAST ═══ */
.ht-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
    padding: 12px 24px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
    font-family: var(--font-ui); z-index: 9999; background: var(--bg-card-hover);
    color: var(--text-primary); box-shadow: var(--shadow);
    opacity: 0; transition: all 0.4s var(--ease); pointer-events: none;
}
.ht-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.ht-toast.success { background: rgba(74,222,128,0.15); color: #6ee7b7; }
.ht-toast.error { background: rgba(248,113,113,0.15); color: #fca5a5; }

/* ═══ LOADING ═══ */
.ht-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text-muted); font-size: 13px; }
.ht-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border-glass); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ht-empty { text-align: center; padding: 32px 20px; color: var(--text-muted); font-size: 14px; }

/* ═══ HOME ═══ */
.ht-hero { text-align: center; padding: 60px 24px 40px; }
.ht-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1.1; margin-bottom: 16px; }
.ht-hero h1 span { background: var(--gradient-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ht-hero p { color: var(--text-secondary); font-size: 16px; max-width: 600px; margin: 0 auto 28px; line-height: 1.7; }
.ht-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ht-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 0 24px 40px; max-width: 1000px; margin: 0 auto; }
.ht-feature-card {
    background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 24px;
    transition: all var(--transition); opacity: 0; transform: translateY(16px);
}
.ht-feature-card.ht-visible { opacity: 1; transform: translateY(0); }
.ht-feature-card:hover { background: var(--bg-card-hover); transform: translateY(-2px); }
.ht-feature-card .icon { font-size: 28px; margin-bottom: 10px; }
.ht-feature-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.ht-feature-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.ht-stats-counter { display: flex; justify-content: center; gap: 40px; padding: 32px 24px; flex-wrap: wrap; }
.ht-counter-item { text-align: center; opacity: 0; transform: translateY(12px); transition: all 0.6s var(--ease); }
.ht-counter-item.ht-visible { opacity: 1; transform: translateY(0); }
.ht-counter-item .num { font-family: var(--font-mono); font-size: 32px; font-weight: 900; color: var(--accent); }
.ht-counter-item .lbl { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* ═══ PROFILE ═══ */
.ht-profile { max-width: 700px; margin: 0 auto; padding: 24px; }
.ht-profile h1 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin-bottom: 20px; }

/* ═══ HEADER & FOOTER ═══ */
.ht-header {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 24px;
    border-bottom: 1px solid var(--border-glass); background: var(--bg-secondary);
    position: sticky; top: 0; z-index: 50;
}
.ht-logo { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--text-primary); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.ht-logo span { color: var(--accent); }
.ht-nav { display: flex; align-items: center; gap: 4px; }
.ht-nav a { padding: 6px 14px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600; color: var(--text-muted); transition: all var(--transition); }
.ht-nav a:hover, .ht-nav a.active { background: var(--bg-hover); color: var(--text-primary); }
.ht-footer { text-align: center; padding: 24px; margin-top: 40px; border-top: 1px solid var(--border-glass); color: var(--text-muted); font-size: 12px; }

/* ═══ HOME LB ═══ */
.ht-home-lb { max-width: 600px; margin: 0 auto 40px; padding: 0 24px; }
.ht-home-lb h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 16px; }

/* ═══ ANALYSIS ═══ */
.ht-analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.ht-analysis-card { padding: 16px; background: var(--bg-primary); border-radius: var(--radius-xs); }
.ht-analysis-card .a-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.ht-analysis-card .a-value { font-size: 24px; font-weight: 900; }
.ht-analysis-card .a-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* ═══ RESPONSIVE ═══ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .ht-config { padding: 10px 12px; gap: 4px; }
    .ht-config-divider { display: none; }
    .ht-pill { padding: 4px 10px; font-size: 11px; }
    .ht-typing-area { padding: 20px 16px 16px; margin: 0 8px; }
    .ht-text-display { font-size: 1.15rem !important; line-height: 2; }
    .ht-result-main-stat .value { font-size: 56px; }
    .ht-result-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ht-dashboard-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ht-hero h1 { font-size: 1.8rem; }
    .ht-stats-counter { gap: 20px; }
    .ht-features { grid-template-columns: 1fr; padding: 0 16px 40px; }
    .ht-header { padding: 10px 16px; }
    .ht-nav a { padding: 4px 10px; font-size: 12px; }
}
@media (max-width: 480px) {
    .ht-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    .ht-result-grid { grid-template-columns: repeat(2, 1fr); }
    .ht-result-actions { flex-direction: column; align-items: center; }
    .ht-auth-card { padding: 24px 20px; }
    .ht-analysis-grid { grid-template-columns: 1fr 1fr; }
}
.ht-logout-btn { cursor: pointer; }