:root{--bg:#fff;--soft:#f4f5f8;--card:#fff;--ink:#0e1117;--mute:#5b6474;--line:#e3e6ee;--acc:#ff2d6f;--acc2:#5b3df5;--r:12px}
:root[data-theme=dark]{--soft:#171a26;--bg:#0a0c12;--card:#121520;--ink:#eef0f6;--mute:#98a2b5;--line:#232839}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--soft:#171a26;--bg:#0a0c12;--card:#121520;--ink:#eef0f6;--mute:#98a2b5;--line:#232839}}
*{box-sizing:border-box}body{margin:0;font-family:Vazirmatn,Tahoma,sans-serif;color:var(--ink);background:var(--bg);line-height:1.9}
a{color:inherit;text-decoration:none}.wrap{max-width:1200px;margin:auto;padding:0 18px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.strip{background:var(--ink);color:var(--bg);font-size:.8rem}.strip .wrap{padding-block:3px;opacity:.85}
.top{position:sticky;top:0;z-index:9;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.6rem;letter-spacing:-.5px}
.logo i{width:14px;height:14px;border-radius:5px;background:linear-gradient(135deg,var(--acc),var(--acc2));transform:rotate(45deg)}
nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
nav a{padding:5px 14px;border-radius:99px;white-space:nowrap;font-weight:500;color:var(--mute)}
nav a:hover{color:var(--ink)}nav a.on{background:var(--ink);color:var(--bg)}
.bar input{font:inherit;color:inherit;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:5px 16px;width:190px}
.mode{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;padding:0;position:relative}
.mode:before{content:"";position:absolute;inset:11px;border-radius:50%;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:2px solid var(--ink)}
.chip{display:inline-block;border-radius:99px;padding:0 12px;font-size:.78rem;font-weight:500;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc)}
.chip.glass{background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(8px)}
.cover,.hcover{position:relative;overflow:hidden}.hcover{position:absolute;inset:0}.cover{aspect-ratio:16/10}
.img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s}
a:hover>.cover .img,a:hover>.hcover .img{transform:scale(1.05)}
.art-bg{background:linear-gradient(135deg,hsl(var(--h) 75% 55%),hsl(calc(var(--h) + 70) 70% 26%))}
.art-bg svg{position:absolute;top:50%;left:50%;height:78%;transform:translate(-50%,-50%);color:rgba(255,255,255,.28)}
.hero{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:14px;margin:22px 0 8px;height:480px}
.hero>a{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate}.h1{grid-row:1/3}
.shade{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;padding:22px;color:#fff;background:linear-gradient(transparent 35%,rgba(5,6,12,.85))}
.shade h2{margin:0;font-size:1.05rem;line-height:1.7;font-weight:900}.h1 h2{font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.5;max-width:22ch}
.shade small{opacity:.8}
.cols{display:grid;grid-template-columns:1fr 310px;gap:30px;align-items:start}
.sec{font-size:1.15rem;font-weight:900;margin:28px 0 14px;display:flex;align-items:center;gap:10px}
.sec:before{content:"";width:6px;height:22px;border-radius:3px;background:linear-gradient(var(--acc),var(--acc2))}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-3px);border-color:var(--acc)}
.card-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.card h3{margin:0;font-size:1.02rem;line-height:1.7;font-weight:900}.card p{margin:0;color:var(--mute);font-size:.88rem;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card small{display:flex;gap:14px;color:var(--mute);font-size:.8rem}
.home .grid>.card:first-child{grid-column:1/-1;flex-direction:row}
.home .grid>.card:first-child .cover{flex:1.1;aspect-ratio:auto;min-height:230px}.home .grid>.card:first-child .card-b{flex:1;justify-content:center;padding:22px}
.home .grid>.card:first-child h3{font-size:1.4rem}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:4px 18px 14px;margin-bottom:16px}.panel .sec{margin-top:18px}
.top5{margin:0;padding:0;list-style:none;counter-reset:n}
.top5 li{counter-increment:n;display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}.top5 li:last-child{border:0}
.top5 li:before{content:counter(n,persian);font-weight:900;font-size:1.5rem;line-height:1.2;color:var(--acc)}
.top5 a{font-weight:500;font-size:.95rem;line-height:1.8}.top5 a:hover{color:var(--acc)}
.cats{display:flex;flex-wrap:wrap;gap:8px}.cats a{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:99px;padding:2px 14px;font-size:.9rem}
.cats a:hover{border-color:var(--acc);color:var(--acc)}.cats span{color:var(--mute);font-size:.8rem}
.pager{display:flex;gap:6px;justify-content:center;margin:30px 0}.pager a{min-width:40px;text-align:center;border:1px solid var(--line);background:var(--card);border-radius:12px}
.pager a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pt{margin:26px 0 0;font-weight:900}.empty{color:var(--mute);padding:30px 0}
.art{max-width:760px;margin:30px auto}.art h1{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.6;font-weight:900;margin:12px 0 4px}.meta{color:var(--mute);font-size:.9rem}
.acover{aspect-ratio:16/9;border-radius:var(--r);margin:18px 0;position:relative;overflow:hidden}
.art p{font-size:1.05rem;line-height:2.2}.lead{font-weight:500;color:var(--mute);font-size:1.15rem!important}
.box{max-width:420px;margin:40px auto;display:flex;flex-direction:column;gap:14px}.box.wide{max-width:760px;margin:10px auto}
.box label{display:flex;flex-direction:column;gap:4px;font-weight:500}
.box input,.box textarea,.box select{font:inherit;color:inherit;background:var(--card);padding:9px 14px;border:1px solid var(--line);border-radius:12px}
button,.btn{font:inherit;background:var(--ink);color:var(--bg);border:0;border-radius:99px;padding:8px 20px;cursor:pointer;display:inline-block}
.err{background:#fde8e8;color:#a31616;padding:8px 12px;border-radius:10px;margin:0}
.adm-h{display:flex;justify-content:space-between;align-items:center;margin-top:22px;flex-wrap:wrap;gap:8px}
.tbl{width:100%;border-collapse:collapse;margin:16px 0;background:var(--card);border-radius:var(--r)}.tbl th,.tbl td{text-align:right;padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl form{display:inline}.lnk{background:none;color:#e0364a;padding:0}
footer{margin-top:56px;padding:26px 0;border-top:1px solid var(--line);color:var(--mute)}footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}footer b{color:var(--ink)}
/* zoomit-style layout */
.top{background:var(--bg);backdrop-filter:none}.bar{height:62px}.strip{display:none}
nav a{border-radius:8px;font-weight:700}nav a.on{background:none;color:var(--acc);box-shadow:inset 0 -3px 0 var(--acc);border-radius:0}
.sub{display:flex;gap:18px;align-items:center;overflow-x:auto;padding-bottom:8px;font-size:.88rem;color:var(--mute);white-space:nowrap}
.sub a:hover,.sub a.on{color:var(--acc)}
.hero2{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:20px 0}
.big{position:relative;border-radius:var(--r);overflow:hidden;min-height:440px;isolation:isolate;display:block}
.big h2{margin:0;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.55;font-weight:900;max-width:24ch}.big p{margin:0;opacity:.85;max-width:56ch}
.shade{gap:10px}.shade small{opacity:.8}
.sidelist{background:var(--soft);border-radius:var(--r);padding:4px 16px}
.row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start}.row:last-child{border:0}
.thumb{position:relative;overflow:hidden;border-radius:10px;flex:none;width:104px;aspect-ratio:4/3}
.row h3{margin:3px 0;font-size:.97rem;line-height:1.75;font-weight:700}.row:hover h3{color:var(--acc)}
.row .m{display:flex;gap:14px;color:var(--mute);font-size:.8rem}.row p{margin:0 0 4px;color:var(--mute);font-size:.88rem}
.row.lg .thumb{width:210px}.row.lg h3{font-size:1.1rem}
.sech{display:flex;justify-content:space-between;align-items:center}.sech a{color:var(--acc);font-size:.88rem;font-weight:500}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{box-shadow:none;background:var(--bg)}.card:hover{transform:none}.card h3{font-size:.98rem;font-weight:700}
.tabs{display:flex;gap:8px;margin-bottom:6px;overflow-x:auto}.tabs a{border:1px solid var(--line);border-radius:99px;padding:1px 16px;font-size:.88rem;white-space:nowrap}
.tabs a.on{background:var(--acc);border-color:var(--acc);color:#fff}
.panel{background:var(--soft);border:0}.chk{flex-direction:row!important;align-items:center;gap:8px!important}
@media(max-width:900px){.hero2{grid-template-columns:1fr}.big{min-height:320px}.four,.three{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.four,.three{grid-template-columns:1fr}.row.lg .thumb{width:120px}.row.lg p{display:none}}
@counter-style persian{system:numeric;symbols:'۰' '۱' '۲' '۳' '۴' '۵' '۶' '۷' '۸' '۹'}
@media(max-width:860px){.cols{grid-template-columns:1fr}.hero{grid-template-columns:1fr;grid-template-rows:none;height:auto}.hero>a{height:240px}.h1{grid-row:auto;height:340px!important}.bar{flex-wrap:wrap;height:auto;padding:10px 18px}.bar input{width:100%}nav{order:3;width:100%;flex:none}.home .grid>.card:first-child{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}