:root{--cream:#f6ecd9;--paper:#fffaf0;--brown:#4a2c17;--brown2:#6b4226;--orange:#d9772b;--orange2:#f0a050;--line:#e3d2b4;--mut:#8a6f55}
*{box-sizing:border-box}
body{margin:0;font-family:Vazirmatn,Tahoma,sans-serif;background:var(--cream);color:var(--brown);line-height:1.7}
header{background:var(--paper);border-bottom:4px solid var(--orange);padding:16px}
.hd{max-width:1100px;margin:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hd img{height:64px;max-width:40vw;object-fit:contain;mix-blend-mode:multiply}
.hd h1{margin:0;font-size:1.55rem;font-weight:800;flex:1;min-width:200px}
.hd h1 small{display:block;font-size:.85rem;font-weight:400;color:var(--mut)}
button,.btn{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:8px 18px;background:var(--brown);color:var(--cream);text-decoration:none;display:inline-block;text-align:center}
button:hover,.btn:hover{background:var(--brown2)}
.or{background:var(--orange);color:#fff}.or:hover{background:#bf6520}
.gh{background:transparent;color:var(--brown);border:1.5px solid var(--line)}.gh:hover{background:var(--line)}
main{max-width:1100px;margin:auto;padding:20px 14px 50px}
.box{background:var(--paper);border:2px dashed var(--orange2);border-radius:16px;padding:16px;margin-bottom:18px}
.box h3{margin:0 0 10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=text],input[type=url],input[type=password],input[type=search],input[type=file]{font:inherit;padding:9px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--brown);min-width:0;flex:1 1 200px;max-width:100%}
input:focus{outline:2px solid var(--orange2)}
.prog{height:10px;background:var(--line);border-radius:6px;overflow:hidden;margin-top:12px;display:none}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange2));transition:width .2s}
.note{margin-top:8px;font-size:.9rem;color:var(--mut)}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--paper);color:var(--brown);border:1.5px solid var(--line);padding:4px 14px;border-radius:99px}
.chip:hover{background:var(--line)}
.chip.on{background:var(--orange);border-color:var(--orange);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--orange);transition:.15s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(74,44,23,.14)}
.card h4{margin:0;font-size:1.02rem;word-break:break-word}
.tag{align-self:flex-start;font-size:.75rem;background:var(--cream);color:var(--brown2);border-radius:6px;padding:0 10px;border:1px solid var(--line)}
.meta{font-size:.8rem;color:var(--mut);word-break:break-all}
.acts{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap;padding-top:6px}
.acts button,.acts a{padding:5px 14px;font-size:.88rem}
.empty{text-align:center;color:var(--mut);padding:60px 0;grid-column:1/-1}
.list .card{flex-direction:row;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);border-right:4px solid var(--orange)}
.list .card h4{flex:1 1 200px}
.list{display:flex;flex-direction:column;gap:10px}
dialog{border:0;border-radius:18px;padding:0;width:min(960px,96vw);background:var(--paper);color:var(--brown);overflow:hidden}
dialog::backdrop{background:rgba(40,22,10,.75)}
.vh{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--brown);color:var(--cream)}
.vh b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh .btn,.vh button{padding:4px 14px;font-size:.85rem}
.vh .gh{color:var(--cream);border-color:#8a6f55}
.vb{background:#1d1108;display:flex;justify-content:center;align-items:center;min-height:200px}
.vb iframe{width:100%;height:78vh;border:0;background:#fff}
.vb video{width:100%;max-height:78vh;background:#000}
.vb img{max-width:100%;max-height:78vh}
.vb audio{width:90%;margin:50px 0}
.vb .na{color:var(--cream);padding:50px 20px;text-align:center}
footer{text-align:center;color:var(--mut);font-size:.8rem;padding:20px}
@media (max-width:600px){
  .hd{flex-direction:column;text-align:center}
  .hd img{height:54px}
  .hd h1{font-size:1.25rem;min-width:0}
  .grid{grid-template-columns:1fr}
  .row>button,.row>.btn{flex:1 1 100%}
  .chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px}
  .chip{white-space:nowrap}
  dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;display:none;flex-direction:column}
  dialog[open]{display:flex}
  .vb{flex:1}
  .vb iframe{height:100%}
  .vb video{max-height:100%}
}