:root{--bg:#070a13;--p:#0f172a;--p2:#141f36;--ln:#1f2c48;--tx:#e2e8f0;--mu:#8493ad;--ac:#38bdf8;--ok:#34d399;--bad:#f87171;--r:14px;--g:linear-gradient(135deg,#0284c7,#4f46e5);--mono:ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:env(safe-area-inset-top) 0 calc(84px + env(safe-area-inset-bottom))}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.top{position:sticky;top:0;z-index:20;display:flex;gap:8px;align-items:center;padding:10px 14px;background:rgba(13,20,36,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
.brand{display:flex;gap:10px;align-items:center;flex:1;min-width:0}
.brand b{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--g);color:#fff;font-weight:800}
h1{font-size:15px;line-height:1.1}small{color:var(--mu);font-family:var(--mono);font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36vw}
.btn{border:0;border-radius:10px;padding:9px 14px;background:var(--g);color:#fff;font-weight:700;display:inline-flex;gap:6px;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s}
.btn:active{transform:scale(.96)}.btn.ghost{background:var(--p2);color:var(--tx);border:1px solid var(--ln);font-weight:500}.btn.sm{padding:5px 9px;font-size:12px;margin-left:6px}
.search{display:flex;gap:8px;padding:12px 14px;max-width:760px;margin:auto;flex-wrap:wrap}
.search input,.search select,.field{background:var(--p);border:1px solid var(--ln);border-radius:10px;padding:10px 12px;outline:0}
.search input{flex:1;min-width:150px;font-family:var(--mono)}.search input:focus,.field:focus{border-color:var(--ac)}
.field{width:100%;margin-bottom:10px}
main{max-width:760px;margin:auto;padding:0 14px}
.panel{display:none}.panel.on{display:block;animation:in .2s}
@keyframes in{from{opacity:.4}to{opacity:1}}
.card{background:var(--p);border:1px solid var(--ln);border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
.card h3{font-size:13px;margin-bottom:8px;color:var(--ac)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:10px}
.stat{background:var(--p);border:1px solid var(--ln);border-radius:var(--r);padding:10px 12px}.stat span{color:var(--mu);font-size:11px;display:block}.stat b{font:700 17px var(--mono)}
.row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--ln);align-items:center}.row:first-of-type{border-top:0}
.row>div{min-width:0}.row a,.row .p{font-family:var(--mono);font-size:12px;word-break:break-all;color:var(--tx);text-decoration:none}
.mu{color:var(--mu);font-size:12px}.ok{color:var(--ok)}.bad{color:var(--bad)}
.tag{font:600 11px var(--mono);padding:2px 7px;border-radius:6px;background:var(--p2);border:1px solid var(--ln);white-space:nowrap}
.tag.html{color:#f09a6a}.tag.css{color:#6ab7f0}.tag.js{color:var(--ac)}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--ln);background:var(--p);border-radius:8px;padding:6px 10px;font:12px var(--mono);white-space:nowrap;cursor:pointer}.chip.on{border-color:var(--ac);color:var(--ac)}
.bar{display:flex;justify-content:space-between;align-items:center;background:var(--p);border:1px solid var(--ln);border-radius:var(--r) var(--r) 0 0;padding:8px 12px}
.bar b{font:12px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fname{white-space:normal;word-break:break-all;line-height:1.4;padding-right:8px}#fname i{font-style:normal;color:var(--mu);font-weight:400}
.bar.live{gap:8px;flex-wrap:wrap}.bar.live select{margin:0;flex:1;min-width:120px;padding:6px 8px}.bar.live span{display:flex;gap:6px}.bar.live .btn.sm{margin:0}
.edit{display:block;width:100%;height:56vh;background:#05070c;color:var(--tx);border:1px solid var(--ln);border-top:0;border-radius:0 0 var(--r) var(--r);padding:12px;font:11.5px/1.55 var(--mono);tab-size:2;resize:vertical;outline:0;white-space:pre;overflow:auto}.edit:focus{border-color:var(--ac)}.chip.ed{border-style:dashed}
pre{position:relative;background:#05070c;border:1px solid var(--ln);border-top:0;border-radius:0 0 var(--r) var(--r);padding:12px;max-height:56vh;overflow:auto;font:11.5px/1.55 var(--mono);tab-size:2}
pre.wrap{white-space:pre-wrap;word-break:break-all}
.k{color:#6ab7f0}.s{color:#9bd88a}.c{color:#6b7684}
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.m{background:var(--p);border:1px solid var(--ln);border-radius:var(--r);padding:8px;text-align:center;font-size:11px}
.m img{width:100%;height:80px;object-fit:contain;background:#0a0d11;border-radius:8px;margin-bottom:6px}.m .ph{height:80px;display:grid;place-items:center;color:var(--mu);background:#0a0d11;border-radius:8px;margin-bottom:6px}
.m a{color:var(--ac);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meter{height:8px;border-radius:8px;background:var(--p2);overflow:hidden;margin:8px 0}.meter i{display:block;height:100%;background:var(--ok)}
iframe{width:100%;height:68vh;border:1px solid var(--ln);border-radius:var(--r);background:#fff}
.empty{color:var(--mu);text-align:center;padding:48px 10px}
#loader{text-align:center;padding:36px;color:var(--mu)}#loader i{display:block;width:30px;height:30px;margin:0 auto 10px;border:3px solid var(--ln);border-top-color:var(--ac);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.dock{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;display:flex;gap:2px;max-width:calc(100vw - 16px);overflow-x:auto;background:rgba(13,20,36,.94);backdrop-filter:blur(12px);border:1px solid var(--ln);border-radius:16px;padding:5px;scrollbar-width:none}
.dock button{border:0;background:0;color:var(--mu);padding:9px 13px;border-radius:11px;font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer}.dock button.on{background:var(--g);color:#fff;box-shadow:0 4px 14px -2px rgba(99,102,241,.5)}
#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--p2);border:1px solid var(--ln);padding:9px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:50}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.i{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.dock button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;padding:7px 11px}
.site{overflow:hidden;padding:0}.site .ban{height:120px;background:var(--p2) center/cover}.site .in{padding:12px 14px;display:flex;gap:12px;align-items:center}
.site img.fv{width:44px;height:44px;border-radius:11px;background:var(--p2);object-fit:contain;padding:5px;border:1px solid var(--ln)}
.site h2{font-size:16px;line-height:1.2}.big{width:100%;padding:13px;font-size:15px;margin-bottom:10px}
details{margin-left:10px;border-left:1px solid var(--ln);padding-left:8px}summary{cursor:pointer;padding:6px 0;font:600 13px var(--mono);color:var(--ac);list-style:none}summary::before{content:"▸ "}details[open]>summary::before{content:"▾ "}
.fl{display:flex;align-items:center;gap:8px;width:100%;background:0;border:0;text-align:left;padding:6px 4px;border-radius:8px;font:12px var(--mono);cursor:pointer;color:var(--tx)}.fl:hover,.fl:active{background:var(--p2)}.fl span.mu{margin-left:auto;white-space:nowrap}
.tag.json,.tag.txt,.tag.xml{color:var(--ok)}.tag.image,.tag.icon,.tag.video,.tag.audio,.tag.font{color:#c084fc}

/* Kuchliroq ko'k uslub */
body{background:radial-gradient(900px 420px at 50% -120px,rgba(56,189,248,.16),transparent 70%),var(--bg)}
.top{border-bottom-color:rgba(56,189,248,.25)}
.btn{box-shadow:0 6px 18px -6px rgba(79,70,229,.7)}.btn.ghost{box-shadow:none}
.card,.stat{border-color:#22335a;background:linear-gradient(180deg,#111c36,#0f172a)}
.card h3{color:#7dd3fc}.search input:focus,.field:focus{box-shadow:0 0 0 3px rgba(56,189,248,.2)}
.i{width:18px;height:18px;max-width:22px;max-height:22px}
svg.i{display:inline-block}

body{min-height:100vh}.dock{transform:none}

/* Telefon: ko'k belgi/tarjima paneli o'rniga o'zimizning bosish effekti */
html{-webkit-tap-highlight-color:transparent}
button,.chip,.fl,.dock,.top,.brand,summary{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
pre,.p,.row a{user-select:text;-webkit-user-select:text}
.btn,.dock button,.chip,.fl{transition:transform .12s ease,background .15s ease,box-shadow .15s ease}
.dock button:active{transform:scale(.92);background:rgba(56,189,248,.14)}.dock button.on:active{background:var(--g)}
.chip:active,.fl:active{transform:scale(.97);background:var(--p2)}
.btn:focus-visible,.dock button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.row{transition:background .15s}.card{box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.dock{box-shadow:0 14px 40px -10px rgba(0,0,0,.9),0 0 0 1px rgba(56,189,248,.12)}

/* v9: logo + intro */
.brand .lg{width:34px;height:34px;border-radius:9px;flex:none}
#intro{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 40%,#10203d,#070a13 70%);transition:opacity .5s,visibility .5s}
#intro.out{opacity:0;visibility:hidden}
#intro img{border-radius:24px;box-shadow:0 10px 40px rgba(56,189,248,.35);animation:pop .8s cubic-bezier(.2,1.4,.4,1) both}
#intro h2{font-size:26px;letter-spacing:.5px;animation:rise .7s .25s both}#intro h2 span{color:var(--ac)}
#intro p{color:var(--mu);animation:rise .7s .4s both}
#intro .ld{width:120px;height:3px;border-radius:3px;background:var(--ln);position:relative;overflow:hidden;margin-top:14px}
#intro .ld::after{content:"";position:absolute;inset:0;width:40%;background:var(--g);animation:slide 1s infinite ease-in-out}
@keyframes pop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){#intro *{animation:none!important}}

/* v11: o'lcham, qidiruv, joyni topish */
.sizes{display:flex;gap:8px;align-items:center;margin:8px 0}.sizes select{margin:0;width:auto;padding:6px 8px}.sizes input[type=range]{flex:1;min-width:60px;accent-color:#38bdf8}.sizes .btn.sm{margin:0;white-space:nowrap}.sizes .btn.on{background:var(--g);color:#fff;border-color:transparent}
.vwrap{overflow:hidden;border:1px solid var(--ln);border-radius:var(--r);background:#fff;transition:height .15s}.vwrap iframe{display:block;border:0;border-radius:0}
.hit{display:block;width:100%;text-align:left;background:var(--p2);border:1px solid var(--ln);border-radius:10px;padding:8px 10px;margin-bottom:6px;cursor:pointer;color:var(--tx)}.hit b{font:12px var(--mono);color:var(--ac);word-break:break-all}.hit code{display:block;font:11px/1.45 var(--mono);white-space:pre-wrap;word-break:break-all;margin-top:4px;color:var(--mu)}.hit mark{background:#facc15;color:#000;border-radius:3px;padding:0 1px}
.hlline{position:absolute;left:0;background:rgba(250,204,21,.16);border-left:3px solid #facc15;pointer-events:none}
.sheet{position:fixed;left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:25;max-height:44vh;overflow:auto;background:var(--p);border:1px solid var(--ac);border-radius:var(--r);padding:12px 14px;box-shadow:0 -8px 30px rgba(0,0,0,.5);max-width:740px;margin:0 auto}.sheet h3{font-size:13px;color:var(--ac);margin-bottom:6px;word-break:break-all;padding-right:28px}.sheet .x{position:absolute;top:6px;right:8px;width:30px;height:30px;border:0;border-radius:8px;background:var(--p2);color:var(--tx);font-size:16px}.sheet[hidden]{display:none}