:root{--ink:#0b1f1e;--paper:#f4efe4;--teal:#0f3d3a;--em:#1f8a70;--amb:#f2a541;--card:#fffaf0;--mut:#6b7570;--line:#e3dccb}
.dark{--ink:#eef3ef;--paper:#0b1424;--card:#13203a;--mut:#8b9bb0;--line:#22324f}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',sans-serif;
 background-image:radial-gradient(circle at 10% 0%,rgba(31,138,112,.15),transparent 40%),radial-gradient(circle at 90% 100%,rgba(242,165,65,.15),transparent 40%);min-height:100vh}
.disp{font-family:'Fraunces',serif}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.card{background:var(--card);border:1px solid var(--line);border-radius:1.25rem}
.mut{color:var(--mut)}
.hero{background:linear-gradient(135deg,#0f3d3a,#1f8a70);color:#f4efe4;border-radius:1.5rem;position:relative;overflow:hidden}
.hero:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 12px)}
.inp{background:transparent;border:1px solid var(--line);border-radius:.8rem;padding:.6rem .8rem;width:100%;color:var(--ink);min-height:44px}
.btn{min-height:44px;border-radius:.9rem;padding:.5rem 1rem;font-weight:600}
.pri{background:var(--amb);color:#1a1205}
.chip{border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.8rem;white-space:nowrap}
.chip.on{background:var(--teal);color:#f4efe4;border-color:var(--teal)}
.sheet{animation:up .28s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.fade{animation:fd .4s both}
@keyframes fd{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bounce:active{transform:scale(.94)}
.noscroll::-webkit-scrollbar{display:none}
.ibtn{min-width:36px;min-height:36px;padding:.3rem .5rem;display:inline-flex;align-items:center;justify-content:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{min-height:38px;padding:.3rem .75rem;border-radius:999px;font-size:.8rem;white-space:nowrap}
.seg button.on{background:var(--teal);color:#f4efe4}
.dark .chip.on,.dark .seg button.on{background:var(--em);border-color:var(--em)}
.dark .hero{background:linear-gradient(135deg,#0d2e3a,#16705c)}
html,body{transition:background-color .3s,color .3s}
[dir=rtl] body{font-family:'Vazirmatn','IBM Plex Sans',sans-serif}
[dir=rtl] input,[dir=rtl] button,[dir=rtl] select{font-family:inherit}
[dir=rtl]{text-align:right}
[dir=ltr]{text-align:left}
[dir=rtl] .disp{font-family:'Vazirmatn',serif;font-style:normal}
[dir=rtl] .mono{font-family:'IBM Plex Mono','Vazirmatn',monospace}
[dir=rtl] .tracking-widest{letter-spacing:0}