:root { --bg:#0b0f0d; --panel:#121714; --panel2:#171d19; --line:#28302b; --text:#f2f1ea; --muted:#8f9a93; --green:#baf55a; --mint:#61d5a1; --orange:#ff8a55; --red:#ed665f; --blue:#75a7ff; }
* { box-sizing:border-box; }
html { background:var(--bg); color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"DM Sans","Noto Sans Ethiopic",sans-serif; }
button,input,select { font:inherit; }
button { color:inherit; }
.app-header { height:68px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; background:rgba(11,15,13,.92); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:10px; }.brand-mark { width:36px;height:36px;border-radius:9px;background:var(--green);color:#0d1811;display:grid;place-items:center;font:700 19px "Noto Sans Ethiopic"; }.brand div { display:flex; flex-direction:column; }.brand strong { font-size:12px;letter-spacing:.18em; }.brand small { color:var(--muted);font:500 8px "DM Mono";letter-spacing:.12em;margin-top:3px; }
.header-meta { color:var(--muted);font:400 10px "DM Mono";display:flex;align-items:center;gap:8px; }.header-meta b { color:var(--text); }.header-meta i { height:13px;width:1px;background:var(--line); }.live-dot { width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(97,213,161,.1); }
main { width:min(1500px,calc(100% - 48px)); margin:auto; padding-bottom:100px; }
.intro { padding:54px 0 36px; display:grid; grid-template-columns:1fr 520px; gap:80px; align-items:end; }.kicker,.label { color:var(--mint);font:500 9px "DM Mono";letter-spacing:.15em; }.intro h1 { font-size:clamp(48px,6vw,83px);line-height:.92;letter-spacing:-.055em;margin:15px 0 0; }.intro-note { border-left:2px solid var(--green);padding:5px 0 5px 21px; }.intro-note b { font-size:13px; }.intro-note p { color:var(--muted);font-size:12px;line-height:1.65;margin:7px 0 0; }.intro-note strong { color:var(--text); }
.summary-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px; }.summary-card { min-height:150px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;position:relative; }.summary-card .label { display:block;margin-bottom:23px; }.summary-card strong { display:block;font-size:20px;line-height:1.1;max-width:220px; }.summary-card p { color:var(--muted);font:400 10px "DM Mono";margin:9px 0 0; }.summary-card .summary-value { position:absolute;right:17px;top:17px;color:var(--green);font:500 24px "DM Mono"; }
.test-card { display:flex;justify-content:space-between;align-items:center;gap:25px;background:#101b15;border:1px solid #254632;border-radius:12px;padding:18px 20px;margin-bottom:28px; }.test-card div { display:flex;align-items:center;gap:25px; }.test-card p { margin:0;color:#b6c3bb;font-size:11px;line-height:1.55;max-width:850px; }.test-card button,.results-head button { border:1px solid var(--line);background:transparent;border-radius:7px;padding:9px 13px;font-size:10px;white-space:nowrap;cursor:pointer; }
.workspace { display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;align-items:start; }.filters { position:sticky;top:90px; }.filter-block { border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:18px; }.filter-block label { display:flex;justify-content:space-between;color:var(--muted);font:500 9px "DM Mono";letter-spacing:.11em;margin-bottom:10px; }.filter-block input[type="search"],.filter-block select { width:100%;height:38px;border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:0 10px;font-size:11px;outline:none; }.filter-block input:focus,.filter-block select:focus { border-color:var(--mint); }.provider-filters { display:flex;flex-wrap:wrap;gap:6px; }.provider-filters button { background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:9px;cursor:pointer; }.provider-filters button.active { color:#10150f;background:var(--green);border-color:var(--green); }.filter-block input[type="range"] { width:100%;accent-color:var(--green); }.queue-button { width:100%;height:40px;border:0;border-radius:7px;background:var(--green);color:#10150f;font-size:11px;font-weight:700;cursor:pointer; }.queue-button.playing { background:var(--orange); }.filter-note { margin-top:14px;padding:13px;border:1px dashed var(--line);border-radius:8px; }.filter-note b { font:500 11px "DM Mono";color:var(--green); }.filter-note p { color:var(--muted);font-size:10px;line-height:1.5;margin:6px 0 0; }
.results { min-width:0; }.results-head { height:43px;display:flex;align-items:flex-start;justify-content:space-between; }.results-head b { display:block;font-size:13px;margin-top:4px; }.legend { display:flex;gap:14px;color:var(--muted);font:400 9px "DM Mono"; }.legend i { width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:5px; }.score-high { background:var(--green); }.score-mid { background:var(--orange); }.score-low { background:var(--red); }
.table-wrap { border:1px solid var(--line);border-radius:10px;overflow:auto;background:var(--panel); }.table-wrap table { width:100%;border-collapse:collapse;min-width:980px; }.table-wrap th { position:sticky;top:0;background:#0f1411;color:var(--muted);text-align:left;font:500 8px "DM Mono";letter-spacing:.1em;padding:11px 10px;border-bottom:1px solid var(--line); }.table-wrap td { padding:12px 10px;border-bottom:1px solid var(--line);font-size:11px;vertical-align:middle; }.table-wrap tr:last-child td { border-bottom:0; }.table-wrap tbody tr { cursor:pointer;transition:.15s; }.table-wrap tbody tr:hover { background:#19211c; }.rank { color:var(--muted);font:400 10px "DM Mono"; }.model-cell { min-width:210px; }.model-cell b { display:block;font-size:12px; }.model-cell span { color:var(--muted);font:400 8px "DM Mono";display:block;margin-top:4px;max-width:240px;overflow:hidden;text-overflow:ellipsis; }.provider-tag { display:inline-flex!important;width:auto!important;padding:3px 5px;background:#222a25;border-radius:4px;color:#b9c2bc!important;margin-bottom:5px; }.score { width:42px;height:32px;border-radius:6px;display:grid;place-items:center;font:500 13px "DM Mono"; }.score.high { background:rgba(186,245,90,.12);color:var(--green); }.score.mid { background:rgba(255,138,85,.12);color:var(--orange); }.score.fail { background:rgba(237,102,95,.12);color:var(--red); }.breakdown { display:flex;gap:3px;width:130px; }.breakdown i { height:6px;border-radius:2px;background:var(--mint); }.breakdown i:nth-child(2){background:var(--blue)}.breakdown i:nth-child(3){background:var(--orange)}.breakdown i:nth-child(4){background:#b790ed}.breakdown i:nth-child(5){background:#e5ce5d}.mono { font:400 9px "DM Mono";color:#c1c9c4; }.price { white-space:nowrap; }.play-button { width:34px;height:34px;border-radius:50%;border:1px solid #425047;background:transparent;display:grid;place-items:center;cursor:pointer;font-size:10px; }.play-button:hover,.play-button.playing { background:var(--green);border-color:var(--green);color:#10150f; }.compare-check { width:16px;height:16px;accent-color:var(--green);cursor:pointer; }
.failed-runs { margin-top:10px;padding:13px 15px;border:1px solid #4b302d;background:#1a1211;border-radius:8px;color:#d89a94;font-size:10px;line-height:1.5; }.failed-runs b { color:var(--red); }
.voice-warning { margin-top:28px;padding:28px;border:1px solid #563c31;background:#19130f;border-radius:12px;display:grid;grid-template-columns:54px 1fr;gap:22px; }.warning-icon { width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#21120b;font:700 22px "DM Mono"; }.voice-warning .label { color:var(--orange); }.voice-warning h2 { margin:7px 0 5px;font-size:25px; }.voice-warning p { color:#b8a9a0;line-height:1.65;font-size:11px;max-width:970px;margin:0; }
.compare-tray { position:fixed;z-index:30;bottom:18px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 28px));padding:13px 15px;background:#202720;border:1px solid #526052;border-radius:11px;box-shadow:0 18px 60px rgba(0,0,0,.5);display:flex;align-items:center;gap:12px; }.compare-tray[hidden] { display:none; }.compare-tray > div { margin-right:auto; }.compare-tray b { display:block;font-size:11px;margin-top:3px; }.compare-tray button { border:1px solid var(--line);background:transparent;border-radius:7px;padding:9px 13px;font-size:10px;cursor:pointer; }.compare-tray button.primary { background:var(--green);border-color:var(--green);color:#10150f;font-weight:700; }.compare-tray button:disabled { opacity:.4;cursor:not-allowed; }
.dialog { width:min(820px,calc(100% - 28px));max-height:88vh;overflow:auto;border:1px solid #445048;border-radius:13px;background:#111713;color:var(--text);padding:30px;box-shadow:0 30px 100px rgba(0,0,0,.7); }.dialog::backdrop { background:rgba(0,0,0,.72);backdrop-filter:blur(5px); }.dialog .close { position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--muted);font-size:25px;cursor:pointer; }.detail-head { padding-bottom:20px;border-bottom:1px solid var(--line); }.detail-head h2 { margin:7px 0;font-size:29px; }.detail-stats { display:flex;gap:8px;flex-wrap:wrap;margin-top:15px; }.detail-stats span { padding:7px 9px;border:1px solid var(--line);border-radius:6px;font:400 9px "DM Mono"; }.output-block { padding:19px 0;border-bottom:1px solid var(--line); }.output-block:last-child { border:0; }.output-block h3 { color:var(--muted);font:500 9px "DM Mono";letter-spacing:.12em;margin:0 0 9px; }.output-block p { font-size:14px;line-height:1.7;margin:0;white-space:pre-wrap; }.output-block.amharic p { font:500 20px/1.75 "Noto Sans Ethiopic"; }.detail-play { margin-top:16px;border:0;border-radius:7px;padding:10px 14px;background:var(--green);color:#10150f;font-weight:700;cursor:pointer; }.compare-columns { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px; }.compare-column { border:1px solid var(--line);border-radius:9px;padding:17px; }.compare-column h2 { font-size:18px;margin:6px 0 15px; }.compare-column .output-block.amharic p { font-size:16px; }.prompt-dialog pre { white-space:pre-wrap;font:400 11px/1.7 "DM Mono";color:#c9d0cb;margin-top:18px; }
@media(max-width:1000px){.intro{grid-template-columns:1fr;gap:30px}.summary-grid{grid-template-columns:repeat(2,1fr)}.workspace{grid-template-columns:1fr}.filters{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.filter-block{margin:0}.queue-button{align-self:end}.filter-note{margin:0}.intro h1{font-size:58px}}
@media(max-width:650px){.app-header{padding:0 14px}.header-meta{font-size:8px}.header-meta i,.header-meta i~*{display:none}main{width:calc(100% - 24px)}.intro{padding-top:38px}.intro h1{font-size:43px}.summary-grid{grid-template-columns:1fr}.test-card{align-items:flex-start;flex-direction:column}.test-card div{align-items:flex-start;flex-direction:column;gap:8px}.filters{grid-template-columns:1fr}.voice-warning{grid-template-columns:1fr}.compare-columns{grid-template-columns:1fr}.dialog{padding:23px 17px}.compare-tray{align-items:flex-start;flex-wrap:wrap}.compare-tray>div{width:100%}}

.mode-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:25px}.mode-tabs button{min-width:260px;padding:15px 18px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);text-align:left;cursor:pointer;font-size:12px}.mode-tabs button span{color:#68736c;font:500 9px "DM Mono";margin-right:11px}.mode-tabs button b{display:block;font:400 8px "DM Mono";margin:5px 0 0 29px;color:#68736c}.mode-tabs button.active{color:var(--text);border-bottom-color:var(--green)}.mode-tabs button.active span,.mode-tabs button.active b{color:var(--green)}
.native-voice-view[hidden]{display:none}.voice-mode-head{display:grid;grid-template-columns:1fr 520px;gap:60px;align-items:end;padding:25px 0 35px}.voice-mode-head h2{font-size:45px;letter-spacing:-.04em;margin:10px 0 0}.voice-mode-head>p{color:var(--muted);font-size:12px;line-height:1.7;margin:0}.voice-mode-head strong{color:var(--text)}.voice-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}.voice-summary article{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}.voice-summary b{display:block;color:var(--green);font:500 27px "DM Mono";margin:17px 0 5px}.voice-summary p{color:var(--muted);font-size:10px;margin:0}.native-voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.native-card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:20px;display:flex;flex-direction:column;min-height:390px}.native-card.native{border-color:#3d654f;background:#111b16}.native-card.failed{border-color:#54362e;background:#181310}.native-card-top{display:flex;align-items:center;justify-content:space-between}.type-pill{padding:5px 7px;border-radius:999px;background:#233229;color:var(--mint);font:500 7px "DM Mono";letter-spacing:.08em}.native-card.failed .type-pill{color:var(--orange);background:#36231d}.native-card h3{font-size:21px;margin:25px 0 5px}.native-card .sub{color:var(--muted);font:400 9px "DM Mono"}.native-transcript{font:500 15px/1.75 "Noto Sans Ethiopic";min-height:95px;margin:22px 0;color:#e6e9e6}.native-card.failed .native-transcript{color:#b7a29a}.voice-actions{display:flex;gap:8px;margin-top:auto}.native-play{flex:1;height:39px;border:0;border-radius:7px;background:var(--green);color:#10150f;font-weight:700;cursor:pointer}.native-play.playing{background:var(--orange)}.native-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font:400 8px "DM Mono";margin-top:9px}.rating-box{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.rating-box>span{color:var(--muted);font:500 8px "DM Mono";letter-spacing:.1em}.rating-row{display:grid;grid-template-columns:82px 1fr 15px;gap:8px;align-items:center;margin-top:9px;font-size:9px}.rating-row input{width:100%;accent-color:var(--green)}.rating-value{color:var(--green);font:500 10px "DM Mono"}.rating-note{color:#68736c;font-size:8px;margin-top:9px}.capability-note{margin-top:20px;padding:28px;border:1px solid #563c31;background:#19130f;border-radius:12px;display:grid;grid-template-columns:54px 1fr;gap:22px}.warning-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#21120b;font:700 22px "DM Mono"}.capability-note .label{color:var(--orange)}.capability-note h2{margin:7px 0 5px;font-size:25px}.capability-note p{color:#b8a9a0;line-height:1.65;font-size:11px;max-width:1050px;margin:0}
@media(max-width:1000px){.voice-mode-head{grid-template-columns:1fr;gap:30px}.native-voice-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.mode-tabs button{min-width:0;flex:1;padding-inline:8px}.voice-summary,.native-voice-grid{grid-template-columns:1fr}.capability-note{grid-template-columns:1fr}}