:root{--bg:#fff;--fg:#1f2328;--muted:#5f6670;--line:#e3e6ea;--card:#f6f7f9;--accent:#2563eb;--link:#1a4fc4;--mark:#fff3b0;--warn:#b42318;
font-family:Vazirmatn,"Segoe UI",Tahoma,system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#111316;--fg:#e8eaed;--muted:#9aa0a6;--line:#2c3036;--card:#1b1e22;--accent:#7aa2ff;--link:#8ab4f8;--mark:#5a4a00;--warn:#ff8a80}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);line-height:1.7}
a{color:var(--link)}
.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:8px;top:8px;background:var(--bg);padding:6px;z-index:9}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.logo{font-size:1.5rem;font-weight:800;text-decoration:none;color:var(--accent)}
.searchbox{position:relative;flex:1;max-width:680px;display:flex;align-items:center;border:1px solid var(--line);border-radius:24px;padding:2px 14px;background:var(--bg)}
.searchbox:focus-within{box-shadow:0 1px 8px rgba(0,0,0,.15)}
.searchbox input{flex:1;border:0;background:transparent;color:var(--fg);font:inherit;font-size:1.05rem;padding:10px 4px;outline:0;min-width:0}
.icon-btn{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:50%;display:grid;place-items:center}
.icon-btn:hover{color:var(--accent)}
.sugg{position:absolute;top:100%;inset-inline:0;margin:4px 0 0;padding:6px 0;list-style:none;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.15);z-index:6}
.sugg li{padding:7px 18px;cursor:pointer}.sugg li[aria-selected=true],.sugg li:hover{background:var(--card)}
.tabs{flex-basis:100%;display:flex;gap:6px;align-items:center;padding-inline-start:4px}
.tab{background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);font:inherit;padding:4px 10px;cursor:pointer}
.tab.on{color:var(--accent);border-color:var(--accent)}
.tabs select{margin-inline-start:auto;font:inherit;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:2px 6px}
body.home .top{flex-direction:column;justify-content:center;min-height:62vh;border:0;position:static}
body.home .logo{font-size:3.4rem}
body.home .searchbox{width:100%}
main{max-width:1200px;padding:8px 16px 40px;margin:0 auto 0 0}
body.web main{max-width:760px;margin-inline-start:clamp(0px,8vw,150px)}
.meta{color:var(--muted);font-size:.85rem;margin:6px 0 14px}
.dym{margin:0 0 16px}.dym a{font-weight:700;cursor:pointer}
.res{margin:0 0 26px}
.res .site{font-size:.83rem;color:var(--muted);direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res h3{margin:2px 0 4px;font-size:1.2rem;font-weight:500}.res h3 a{text-decoration:none}.res h3 a:hover{text-decoration:underline}
.res p{margin:0;color:var(--fg);font-size:.95rem;overflow-wrap:anywhere}
mark{background:var(--mark);color:inherit;font-weight:700;border-radius:2px}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0}
.pager a{padding:6px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;cursor:pointer}.pager a.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.grid{display:flex;flex-wrap:wrap;gap:10px}
.grid figure{margin:0;flex-grow:1;height:190px;cursor:pointer;position:relative;background:var(--card);border-radius:10px;overflow:hidden}
.grid img{height:100%;width:100%;object-fit:cover;display:block;min-width:120px}
.grid figcaption{position:absolute;inset-inline:0;bottom:0;padding:16px 8px 4px;font-size:.75rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qimg{display:flex;align-items:center;gap:12px;margin-bottom:14px}.qimg img{height:70px;border-radius:8px}
.panel{position:fixed;top:0;inset-inline-end:0;width:min(420px,100%);height:100%;background:var(--bg);border-inline-start:1px solid var(--line);padding:50px 20px 20px;overflow:auto;z-index:8;box-shadow:0 0 30px rgba(0,0,0,.2)}
.panel img{width:100%;border-radius:10px;background:var(--card)}
.panel h2{font-size:1.05rem;margin:12px 0 4px}.close{position:absolute;top:10px;inset-inline-start:10px}
.muted{color:var(--muted);font-size:.85rem}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:20px;padding:6px 16px;font:inherit;text-decoration:none;cursor:pointer}
.btn.ghost{background:none;color:var(--accent)}
.lens{border:0;border-radius:16px;padding:20px;width:min(520px,94vw);background:var(--bg);color:var(--fg)}
.lens::backdrop{background:rgba(0,0,0,.45)}
.lens-head{display:flex;justify-content:space-between;align-items:center}.lens-head h2{margin:0;font-size:1.1rem}
.drop{display:grid;place-items:center;height:170px;border:2px dashed var(--line);border-radius:14px;margin:14px 0;cursor:pointer;color:var(--muted);text-align:center;padding:10px}
.drop.over{border-color:var(--accent);color:var(--accent)}
.urlform{display:flex;gap:8px}.urlform input{flex:1;font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--fg)}
.err{color:var(--warn);min-height:1.2em}
.loading{color:var(--muted);padding:20px 0}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:20px}
body:not(.home) .foot{display:none}
@media (max-width:600px){.grid figure{height:130px}body.home .logo{font-size:2.6rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.center{text-align:center;margin:20px}
.res .when{color:var(--muted)}