:root {
    --td-l1: #16a34a; --td-l2: #65a30d; --td-l3: #ca8a04; --td-l4: #ea580c;
    --td-l5: #dc2626; --td-l6: #be185d; --td-l7: #6d28d9;
    --td-track: #e5e7eb; --td-ink: #1f2937; --td-muted: #64748b; --td-card: #fff;
}
[data-bs-theme="dark"] {
    --td-track: #374151; --td-ink: #e5e7eb; --td-muted: #9ca3af; --td-card: #24282e;
}

.td-hero { background: linear-gradient(120deg, #4c1d95, #be185d 60%, #ea580c); }
.td-input { font-size: 1.15rem; line-height: 1.7; }
.td-samples { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* Gauge */
.td-gauge { width: 100%; max-width: 260px; overflow: visible; }
.td-arc { fill: none; stroke-width: 16; opacity: .35; transition: opacity .4s; }
.td-arc.is-band { opacity: 1; stroke-width: 20; }
.td-l1 { --td-c: var(--td-l1); } .td-l2 { --td-c: var(--td-l2); } .td-l3 { --td-c: var(--td-l3); }
.td-l4 { --td-c: var(--td-l4); } .td-l5 { --td-c: var(--td-l5); } .td-l6 { --td-c: var(--td-l6); }
.td-l7 { --td-c: var(--td-l7); }
.td-arc { stroke: var(--td-c); }
.td-needle { transform-origin: 100px 105px; transform: rotate(var(--td-angle)); }
.td-needle line { stroke: var(--td-ink); stroke-width: 4; stroke-linecap: round; }
.td-needle circle { fill: var(--td-ink); }
.td-gauge-end { font-size: 10px; fill: var(--td-muted); }
.td-animate .td-needle { animation: td-sweep 1.4s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes td-sweep { from { transform: rotate(-90deg); } to { transform: rotate(var(--td-angle)); } }

.td-band { font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 800; }
.td-band-name { display: block; font-size: 1rem; font-weight: 600; color: var(--td-muted); }

.td-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.td-stat { background: rgba(109, 40, 217, .06); border-radius: .7rem; padding: .7rem; text-align: center; }
.td-num { display: block; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.td-lbl { display: block; font-size: .8rem; color: var(--td-muted); }
@media (max-width: 575px) { .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Level ladder */
.td-rung { display: grid; grid-template-columns: 4.2rem 1fr 5.5rem; grid-template-areas: "lvl bar new" ". verdict verdict";
           align-items: center; column-gap: .6rem; padding: .45rem .5rem; border-radius: .6rem; }
.td-rung.is-band { background: rgba(109, 40, 217, .08); outline: 2px solid rgba(109, 40, 217, .35); }
.td-rung-level { grid-area: lvl; font-weight: 700; text-decoration: none; }
.td-bar { grid-area: bar; height: .8rem; background: var(--td-track); border-radius: 1rem; overflow: hidden; }
.td-fill { display: block; height: 100%; width: var(--td-w); border-radius: 1rem; background: var(--td-l3); }
.td-animate .td-fill { animation: td-grow 1s ease-out both; }
.td-animate .td-rung:nth-child(2) .td-fill { animation-delay: .08s; }
.td-animate .td-rung:nth-child(3) .td-fill { animation-delay: .16s; }
.td-animate .td-rung:nth-child(4) .td-fill { animation-delay: .24s; }
.td-animate .td-rung:nth-child(5) .td-fill { animation-delay: .32s; }
.td-animate .td-rung:nth-child(6) .td-fill { animation-delay: .4s; }
@keyframes td-grow { from { width: 0; } to { width: var(--td-w); } }
.td-rung-new { grid-area: new; text-align: right; font-variant-numeric: tabular-nums; font-size: .9rem; }
.td-rung-verdict { grid-area: verdict; font-size: .78rem; font-weight: 600; }
.td-fill.td-v-comfortable { background: var(--td-l1); } .td-rung-verdict.td-v-comfortable { color: var(--td-l1); }
.td-fill.td-v-assisted { background: var(--td-l2); } .td-rung-verdict.td-v-assisted { color: var(--td-l2); }
.td-fill.td-v-study-first { background: var(--td-l3); } .td-rung-verdict.td-v-study-first { color: var(--td-l3); }
.td-fill.td-v-stretch { background: var(--td-l4); } .td-rung-verdict.td-v-stretch { color: var(--td-l4); }
.td-fill.td-v-above { background: var(--td-l5); } .td-rung-verdict.td-v-above { color: var(--td-l5); }

/* Reading time */
.td-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.td-time { border: 1px solid var(--td-track); border-radius: .7rem; padding: .8rem; }
.td-time-val { display: block; font-size: 1.35rem; font-weight: 800; }
#tdOwnTime { display: inline; }
.td-pace-badge { background: #6d28d9; vertical-align: middle; }

/* Hardest words */
.td-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }
.td-word { border-left: 4px solid var(--td-c); border-radius: .5rem; background: rgba(100, 116, 139, .07); padding: .55rem .7rem; }
.td-animate .td-word { animation: td-pop .45s ease-out both; }
@keyframes td-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.td-word-hz { display: block; font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.td-word-py { display: block; font-size: .85rem; color: var(--td-muted); }
.td-word-en { display: block; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-word-tag { display: block; font-size: .72rem; font-weight: 700; color: var(--td-c); }

@media (prefers-reduced-motion: reduce) {
    .td-animate .td-needle, .td-animate .td-fill, .td-animate .td-word { animation: none; }
}