:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #12141c; color: #f4f1e8; }
* { box-sizing: border-box; }
body { margin: 0; padding: 32px 16px; }
.shell { max-width: 680px; margin: auto; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.4rem); }
header > p:last-child, .help { color: #b9b7b0; line-height: 1.5; }
.eyebrow { color: #f2c35b; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
form { margin-top: 28px; padding: 24px; border: 1px solid #383d4c; border-radius: 14px; background: #202637; }
label { display: grid; gap: 7px; margin-bottom: 18px; font-weight: 700; }
input, select, textarea { width: 100%; padding: 11px; border: 1px solid #555d71; border-radius: 7px; background: #121722; color: inherit; font: inherit; }
textarea { resize: vertical; }
button { padding: 12px 18px; border: 0; border-radius: 7px; background: #f2c35b; color: #1b1b1b; font: inherit; font-weight: 800; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
#message { margin: 16px 0 0; font-weight: 700; }.success { color: #9ddd9a; }.error { color: #ffaaa5; }
h2, h3 { margin: 0; } h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); } h3 { font-size: 1.05rem; }
.tabs { display: flex; gap: 8px; margin-top: 24px; border-bottom: 1px solid #383d4c; }.tab { display: inline-block; border-radius: 7px 7px 0 0; background: transparent; color: #b9b7b0; padding: 10px 13px; text-decoration: none; }.tab.is-active { background: #202637; color: #f2c35b; }.dashboard-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 28px 0 18px; }.dashboard-heading > div > p:last-child, .panel-help { color: #b9b7b0; line-height: 1.45; }.secondary { background: #30394f; color: #f4f1e8; white-space: nowrap; }.filters { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid #383d4c; border-radius: 12px; background: #202637; }.filters label { margin: 0; font-size: .86rem; }.filters button { height: 43px; }.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }.stat-card, .panel { border: 1px solid #383d4c; border-radius: 12px; background: #202637; }.stat-card { padding: 17px; }.stat-card strong { display: block; color: #f2c35b; font-size: 1.7rem; }.stat-card span, small { color: #b9b7b0; }.chart-grid { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 16px; margin-bottom: 16px; }.bar-chart { display: grid; gap: 10px; }.chart-bar { display: grid; grid-template-columns: minmax(54px, .8fr) minmax(80px, 1.8fr) auto; align-items: center; gap: 8px; font-size: .82rem; }.chart-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.chart-track { height: 10px; overflow: hidden; border-radius: 999px; background: #121722; }.chart-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f2c35b, #e58f58); }.chart-bar strong { color: #f2c35b; font-size: .82rem; }.ending-chart { display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 16px; }.ending-chart h3, .ending-chart .panel-help { grid-column: 1 / -1; }.donut { --vowel: 50%; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(#f2c35b 0 var(--vowel), #7d8de2 var(--vowel) 100%); position: relative; }.donut::after { content: ""; position: absolute; inset: 21px; border-radius: 50%; background: #202637; }.chart-legend { display: grid; gap: 12px; align-content: center; font-size: .8rem; }.chart-legend div { display: grid; grid-template-columns: 10px 1fr; gap: 7px; align-items: center; }.chart-legend i { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: #f2c35b; }.chart-legend i.consonant { background: #7d8de2; }.chart-legend strong { grid-column: 2; color: #f4f1e8; }.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.panel { padding: 18px; }.panel-help { margin: 7px 0 15px; font-size: .88rem; }.ranked-list { display: grid; gap: 7px; }.ranked-row { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #383d4c; }.ranked-row:first-child { border-top: 0; }.rank { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #30394f; color: #f2c35b; font-weight: 800; font-size: .78rem; }.ranked-row strong, .ranked-row small { display: block; overflow-wrap: anywhere; }.family-panel { margin-top: 16px; }.family-tabs { display: flex; gap: 8px; margin: 15px 0; }.family-tab { background: #30394f; color: #b9b7b0; padding: 8px 11px; font-size: .85rem; }.family-tab.is-active { background: #f2c35b; color: #1b1b1b; }.family-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }.family { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px; border: 1px solid #383d4c; border-radius: 9px; background: #161b29; }.family code { align-self: start; padding: 5px 7px; border-radius: 5px; background: #30394f; color: #f2c35b; font-weight: 800; }.family strong, .family small { display: block; overflow-wrap: anywhere; }.family small { margin-top: 4px; font-size: .78rem; line-height: 1.4; } #dashboard-message { margin: 14px 0; font-weight: 700; }
@media (max-width: 760px) { .dashboard-heading { align-items: start; flex-direction: column; }.filters { grid-template-columns: 1fr 1fr; }.filters label:first-child { grid-column: 1 / -1; }.chart-grid, .dashboard-grid { grid-template-columns: 1fr; }.stat-cards { grid-template-columns: 1fr 1fr; } }