:root{--bg:#0b0f17;--p:#121826;--p2:#182033;--line:#243049;--tx:#e6ebf5;--mu:#93a0b8;--ac:#5b8cff;--api:#34d399;--csv:#fbbf24;--none:#f87171;--unk:#7c879c;--r:12px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif}
a{color:#9db8ff}a:hover{color:#c7d6ff}
.wrap{max-width:980px;margin:0 auto;padding:16px}
.top{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;background:rgba(11,15,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--tx);text-decoration:none;letter-spacing:.2px}
.logo{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--ac);color:#fff;font-size:15px}
.top nav{display:flex;gap:14px;overflow-x:auto}.top nav a{color:var(--mu);text-decoration:none;font-size:14px;white-space:nowrap}.top nav a:hover{color:var(--tx)}
h1{font-size:26px;line-height:1.2;margin:18px 0 8px;letter-spacing:-.3px}h2{font-size:19px;margin:0 0 10px}h3{font-size:16px;margin:14px 0 6px}
.lead{color:var(--mu);margin:0 0 16px;font-size:16px}
.panel{background:var(--p);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:14px 0}
label{display:block;font-size:13px;color:var(--mu);margin:0 0 6px;font-weight:600}
input,select,button{font:inherit;color:var(--tx);background:var(--p2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px}
input,select{width:100%}input:focus,select:focus{outline:2px solid var(--ac);outline-offset:1px}
button,.btn{cursor:pointer;background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:9px 14px;min-height:40px}
.btn.ghost,button.ghost{background:transparent;color:var(--tx);border:1px solid var(--line)}
.grid2{display:grid;gap:12px}.row{display:flex;gap:8px}.row input{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--p2);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:13px;color:var(--tx);min-height:32px;font-weight:500}
.chip.sel{background:rgba(91,140,255,.16);border-color:var(--ac)}.chip .x{color:var(--mu);font-size:16px;line-height:1}
.chip small{color:var(--mu)}
.sug{list-style:none;margin:6px 0 0;padding:0;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--p2)}
.sug:empty{display:none}.sug li button{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--tx);font-weight:500;display:flex;justify-content:space-between}
.sug li button:hover,.sug li button:focus{background:rgba(91,140,255,.12)}.sug small{color:var(--mu)}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:10px 0 0;padding-bottom:2px}.tabs button{background:transparent;color:var(--mu);border:1px solid var(--line);min-height:34px;padding:5px 12px;font-size:13px;white-space:nowrap}.tabs button.on{color:var(--tx);border-color:var(--ac);background:rgba(91,140,255,.12)}
.summary{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin:18px 0 6px}#count{font-weight:700;font-size:17px}
.card{background:var(--p);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:10px 0}
.card.full{border-color:rgba(52,211,153,.55)}
.ch{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.ch h3{margin:0;font-size:17px}.rank{color:var(--mu);font-weight:600;margin-right:6px}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--mu);font-size:13px;margin:8px 0}
.bar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--p2);margin:8px 0 4px}.bar i{display:block}
.i-api{background:var(--api)}.i-csv{background:var(--csv)}.i-none{background:var(--none)}.i-unknown{background:var(--unk)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mu)}.legend span:before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--c)}
.b{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid}
.b-api{color:var(--api);border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.08)}.b-csv{color:var(--csv);border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.08)}
.b-none{color:var(--none);border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.08)}.b-unknown{color:#aab4c6;border-color:#3a4660;background:rgba(124,135,156,.08)}
.b-native{color:var(--api);border-color:rgba(52,211,153,.45)}.b-supported{color:#9db8ff;border-color:rgba(91,140,255,.5)}.b-generic{color:var(--csv);border-color:rgba(251,191,36,.45)}
details{margin-top:8px}summary{cursor:pointer;color:#9db8ff;font-size:14px;font-weight:600;min-height:32px;display:flex;align-items:center}
.gaps{list-style:none;padding:0;margin:6px 0 0}.gaps li{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:center}
.gaps li small{color:var(--mu);display:block}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--mu);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.note{color:var(--mu);font-size:13px;border-left:3px solid var(--line);padding:4px 0 4px 10px;margin:14px 0}.small{font-size:12px;color:var(--mu)}
.empty{color:var(--mu);text-align:center;padding:26px 10px;border:1px dashed var(--line);border-radius:var(--r)}
.cols{columns:2;column-gap:20px}.cols a{display:block;padding:3px 0;break-inside:avoid}
.nl .row{flex-wrap:wrap}.nl input{max-width:320px}
.foot{border-top:1px solid var(--line);margin-top:30px;padding:18px 16px 30px;text-align:center;color:var(--mu);font-size:13px}.foot a{color:var(--mu)}
.crumbs{font-size:13px;color:var(--mu);margin-top:8px}.crumbs a{color:var(--mu)}
@media(min-width:720px){h1{font-size:34px}.grid2{grid-template-columns:2fr 1fr}.cols{columns:3}.wrap{padding:20px 24px}}
.grid2>div{min-width:0}.tabs{max-width:100%}body{overflow-x:hidden}
