@font-face{font-family:"Vazirmatn";src:url("Vazirmatn.woff2") format("woff2");font-display:swap}
:root{
  --ink:#14313a; --ink2:#44606a; --paper:#f6f7f4; --card:#ffffff; --rule:#d8ddd6;
  --accent:#0e6e63; --accent-d:#0a544b; --stamp:#b3362b; --note:#8a6a12; --note-bg:#fbf4dc; --err-bg:#fbe9e6;
  --ok-bg:#e1f1ec;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;line-height:1.8}
a{color:var(--accent)}
h1{font-size:1.6rem;margin:.2em 0 .5em;line-height:1.4}
h2{font-size:1.25rem}
h3{margin:.2em 0}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.2rem;background:var(--ink);color:#fff}
.top a{color:#fff;text-decoration:none}
.brand{font-weight:700;font-size:1.15rem}
.top nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
main{max-width:1100px;margin:1.2rem auto;padding:0 1rem}
footer{text-align:center;padding:2rem 1rem;font-size:.85rem}
footer a{color:var(--ink2)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:.55rem 1.1rem;font:inherit;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent-d)}
.btn.small{padding:.25rem .8rem;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.btn.danger{background:transparent;color:var(--stamp);box-shadow:inset 0 0 0 1px var(--stamp)}
.top .btn{background:#fff;color:var(--ink)}
.link{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.top .link{color:#fff}
form.inline{display:inline-flex;gap:.5rem;align-items:center;margin:0}
input,select{font:inherit;color:inherit;padding:.4rem .6rem;border:1px solid var(--rule);border-radius:5px;background:#fff;max-width:100%}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label{display:block;font-size:.9rem;color:var(--ink2)}
label input,label select{display:block;width:100%;margin-top:.2rem;color:var(--ink)}
label.check{display:flex;gap:.5rem;align-items:center}
label.check input{width:auto;margin:0}
.card{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:1.2rem;margin:1rem 0}
.card.narrow{max-width:420px;margin:2rem auto}
.card.narrow form{display:grid;gap:.8rem}
.prose{max-width:760px;margin-inline:auto}
.muted{color:var(--ink2);font-size:.9rem}
.flash{padding:.6rem .9rem;border-radius:6px;margin:.8rem 0;background:var(--ok-bg)}
.flash.err{background:var(--err-bg);color:#7a1f16}
.flash.note{background:var(--note-bg);color:var(--note)}

/* landing */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;padding:2rem 0}
.hero p{max-width:34em}
.hero-demo{display:flex;align-items:center;gap:.8rem}
.paper{background:#fff;border:1px solid var(--rule);padding:.8rem;width:11rem;font-size:.75rem;display:grid;gap:.15rem;transform:rotate(-2deg);box-shadow:0 1px 0 var(--rule)}
.paper hr{width:100%;border:0;border-top:1px dashed var(--rule)}
.arrow{font-size:1.6rem;color:var(--accent)}
.mini{border-collapse:collapse;font-size:.75rem;background:#fff}
.mini th,.mini td{border:1px solid var(--rule);padding:.25rem .5rem}
.mini th{background:var(--ink);color:#fff;font-weight:500}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;border-top:1px solid var(--rule);padding:1.5rem 0}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0}
.plan{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:1rem}
.plan.current{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.price{font-weight:700;font-size:1.1rem;color:var(--accent)}

/* dashboard */
.usage{display:grid;gap:.4rem;margin-bottom:1rem}
.bar{height:6px;background:var(--rule);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.up-row{display:grid;grid-template-columns:14rem 1fr;gap:1rem;align-items:end}
.drop{position:relative;border:2px dashed var(--rule);border-radius:8px;padding:1.4rem 1rem;text-align:center;cursor:pointer;color:var(--ink2)}
.drop.over,.drop:hover{border-color:var(--accent);background:var(--ok-bg)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}
#queue{list-style:none;padding:0;margin:.8rem 0 0;font-size:.9rem}
#queue li{padding:.2rem 0}
#queue li.busy{color:var(--note)} #queue li.done{color:var(--accent-d)} #queue li.fail{color:var(--stamp)}
.clients{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0}
.chip{display:inline-flex;gap:.4rem;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:999px;padding:.1rem .8rem;font-size:.9rem;margin:0}
.filters,.exportbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.6rem 0}
.exportbar{justify-content:flex-start}
.tablewrap{overflow-x:auto}
table.list,#items{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--rule)}
table.list th,table.list td,#items th,#items td{padding:.45rem .6rem;border-bottom:1px solid var(--rule);text-align:right;vertical-align:middle}
table.list th,#items th{background:#eef1ec;font-weight:600;font-size:.88rem;white-space:nowrap}
table.list tbody tr:nth-child(even){background:#fafbf9}
td.num{font-variant-numeric:tabular-nums;text-align:left}
td.empty{text-align:center;color:var(--ink2);padding:2rem}
.badge{display:inline-block;font-size:.78rem;padding:0 .55rem;border-radius:999px;background:var(--note-bg);color:var(--note)}
.badge.ok{background:var(--ok-bg);color:var(--accent-d)}
.badge.err{background:var(--err-bg);color:var(--stamp)}

/* review */
.review{display:grid;grid-template-columns:1fr 1.25fr;gap:1.2rem;align-items:start}
.preview{position:sticky;top:.8rem;background:#fff;border:1px solid var(--rule);border-radius:8px;padding:.5rem;max-height:calc(100vh - 2rem);overflow:auto}
.preview img{width:100%;display:block}
.preview iframe{width:100%;height:80vh;border:0}
.editor{display:grid;gap:.8rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
#items input{border-color:transparent;padding:.25rem .4rem}
#items input:focus{border-color:var(--accent)}
#items .num{width:6.5rem;text-align:left;font-variant-numeric:tabular-nums}
#items .unit{width:4.5rem}
.actions{display:flex;gap:.6rem;flex-wrap:wrap}

@media (max-width:820px){
  .hero,.cols,.review,.up-row{grid-template-columns:1fr}
  .preview{position:static;max-height:none}
  .hero-demo{flex-wrap:wrap}
  .grid2,.grid3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}