/* استایل‌های مشترک: رنگ‌ها، دکمه‌ها، نمایش مدارک، ذره‌بین و پنجره‌ی تأیید */
:root{
  --desk:#c9cfc2; --desk-2:#b9c0b1; --ui-ink:#1f2b27; --ui-muted:#56625c;
  --panel:#dfe3d8; --panel-line:rgba(31,43,39,.18);
  --kraft:#c29a5b; --kraft-dark:#9c7640; --kraft-ink:#2a1e0e;
  --paper:#f2e8d2; --paper-2:#e9dcc0; --paper-ink:#26211a; --paper-muted:#6d6353; --paper-line:rgba(38,33,26,.16);
  --pen:#1d3767; --stamp:#9b2c2c; --pin:#b8452f; --ok:#2f6b4f; --warn:#a0701c;
  --shadow:0 1px 0 rgba(0,0,0,.06), 0 8px 22px -10px rgba(20,25,20,.45);
  --font:"Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --hand:"Aref Ruqaa", "Vazirmatn", serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --desk:#15201d; --desk-2:#1b2824; --ui-ink:#e3e7de; --ui-muted:#98a49d;
    --panel:#1f2d29; --panel-line:rgba(227,231,222,.14);
    --kraft:#b38a4c; --kraft-dark:#8a6634; --kraft-ink:#1d1409;
    --paper:#e6dbc2; --paper-2:#d9cbad;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --desk:#15201d; --desk-2:#1b2824; --ui-ink:#e3e7de; --ui-muted:#98a49d;
  --panel:#1f2d29; --panel-line:rgba(227,231,222,.14);
  --kraft:#b38a4c; --kraft-dark:#8a6634; --kraft-ink:#1d1409;
  --paper:#e6dbc2; --paper-2:#d9cbad;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.8);
}
.stamp{
  display:inline-block; border:3px solid var(--stamp); color:var(--stamp); font-weight:900;
  padding:2px 14px; border-radius:4px; transform:rotate(-8deg); opacity:.85; font-size:1.05rem;
}
.btn{
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; border-radius:6px;
  padding:11px 20px; font-weight:700; background:var(--ui-ink); color:var(--desk);
}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent; color:inherit; border:1.5px solid currentColor}
.btn.red{background:var(--stamp); color:#fff}
.small{font-size:.85rem; color:var(--paper-muted)}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opts label{cursor:pointer}
.opts input{position:absolute; opacity:0; pointer-events:none}
.opts span{display:inline-block; border:1.5px solid var(--paper-line); border-radius:4px; padding:5px 14px; background:#fbf7ec}
.opts input:checked + span{background:var(--pen); color:#fff; border-color:var(--pen)}
.opts input:focus-visible + span{outline:3px solid var(--pen); outline-offset:2px}
.accuse-foot{margin-top:26px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.err{color:var(--stamp); font-weight:700; font-size:.92rem}
/* ---------- Modal / documents ---------- */
.overlay{position:fixed; inset:0; background:rgba(10,14,12,.9); display:none; z-index:50; padding:18px; overflow-y:auto}
.overlay.on{display:block}
.modal{max-width:760px; margin:10px auto 40px; position:relative}
.modal-bar{display:flex; justify-content:space-between; align-items:center; gap:8px; color:#f2efe6; margin-bottom:10px}
.modal-bar .btn{background:rgba(255,255,255,.12); color:#fff; padding:7px 14px}
.modal-bar .navs{display:flex; gap:6px}
.doc{background:var(--paper); color:var(--paper-ink); padding:32px 34px; box-shadow:0 20px 50px -20px #000; border-radius:2px; position:relative}
@media (max-width:560px){.doc{padding:22px 18px}}
.doc h2{margin:0; font-size:1.3rem; font-weight:900}
.letterhead{display:flex; justify-content:space-between; gap:10px; border-bottom:2px solid var(--paper-ink); padding-bottom:10px; margin-bottom:16px; flex-wrap:wrap}
.letterhead .org{font-weight:700}
.letterhead .meta{font-size:.85rem; color:var(--paper-muted); text-align:left}
.doc p{margin:.55em 0; max-width:70ch}
.doc ul{padding-right:1.2em; margin:.4em 0}
.doc li{margin:.25em 0}
.doc .fields{display:grid; grid-template-columns:auto 1fr; gap:2px 14px; font-size:.95rem; margin-bottom:12px}
.doc .fields dt{color:var(--paper-muted)}
.doc .fields dd{margin:0; font-weight:500}
.doc .stamp{position:absolute; left:28px; top:24px}
.qa p{margin:.35em 0}
.qa .qq{font-weight:700}
.qa .qq::before{content:"س: "; color:var(--paper-muted)}
.qa .aa::before{content:"ج: "; color:var(--paper-muted)}
.sign{margin-top:18px; font-family:var(--hand); font-size:1.4rem; color:var(--pen); text-align:left}
.tbl-wrap{overflow-x:auto; margin:10px 0}
table.log{border-collapse:collapse; width:100%; font-size:.93rem; min-width:440px}
table.log th,table.log td{border-bottom:1px solid var(--paper-line); padding:6px 8px; text-align:right; vertical-align:top}
table.log th{font-weight:700; background:var(--paper-2)}
table.log td.n{white-space:nowrap; font-variant-numeric:tabular-nums}
.handnote{font-family:var(--hand); color:var(--pen); font-size:1.25rem; line-height:1.6}
.doc.note{background:#f3e6a6; background-image:repeating-linear-gradient(transparent 0 38px, rgba(40,60,120,.2) 38px 39px); padding-top:44px}
.doc.note .line{font-family:var(--hand); font-size:1.5rem; line-height:39px; color:var(--pen); margin:0}
.doc.note .strike{text-decoration:line-through}
.doc.receipt{background:#f8f7f2; font-size:.93rem; max-width:360px; margin:0 auto 18px}
.receipt .c{text-align:center}
.receipt hr{border:0; border-top:1px dashed #999; margin:10px 0}
.receipt .row{display:flex; justify-content:space-between; gap:10px}
.doc.email .mailhead{font-size:.92rem; border-bottom:1px solid var(--paper-line); padding-bottom:10px; margin-bottom:12px}
.doc.sms{background:#e9e6de}
.bubble{max-width:78%; padding:8px 12px; border-radius:14px; margin:6px 0; font-size:.95rem; line-height:1.6}
.bubble.me{background:#cfe3d5; margin-left:auto; border-bottom-right-radius:3px}
.bubble.them{background:#fff; margin-right:auto; border-bottom-left-radius:3px}
.bubble time{display:block; font-size:.72rem; color:#777}
.from-label{text-align:center; font-size:.8rem; color:var(--paper-muted)}
.hl-pen{font-family:var(--hand); color:var(--pen); font-size:1.15rem}
.fig{background:#fbf8ef; border:1px solid var(--paper-line); padding:10px; overflow-x:auto}
.fig svg{display:block; min-width:520px; width:100%; height:auto}
.legend{font-size:.9rem; margin-top:8px}
.legend span{display:inline-block; margin-inline-end:14px}
.tip{font-size:.85rem; color:var(--paper-muted); margin-top:14px; border-top:1px dashed var(--paper-line); padding-top:8px}

.print{background:#fff; padding:10px 10px 36px; box-shadow:0 2px 10px rgba(0,0,0,.25); position:relative; margin:6px 0 4px}
.print svg, .print img{display:block; width:100%; height:auto}
.print .ph-no{position:absolute; bottom:8px; right:14px; font-family:var(--hand); color:var(--pen); font-size:1.15rem}
.lens-tip{font-size:.82rem; color:var(--paper-muted); margin:.2em 0 .6em}
body.lens-on .print, body.lens-on .fig{cursor:zoom-in; touch-action:none}
.lens{position:absolute; display:none; width:190px; height:190px; border-radius:50%; overflow:hidden; border:4px solid #1b1b1b; box-shadow:0 0 0 2px #d8c28a, 0 12px 30px rgba(0,0,0,.55); pointer-events:none; background:#000; z-index:3; direction:ltr}
.lens svg, .lens img{position:absolute; left:0; top:0; max-width:none !important; min-width:0 !important; transform-origin:0 0}
@media (max-width:600px){ .lens{width:140px; height:140px} }
.ask-overlay{position:fixed; inset:0; background:rgba(10,14,12,.8); display:none; place-items:center; z-index:80; padding:18px}
.ask-overlay.on{display:grid}
.ask-box{background:var(--paper); color:var(--paper-ink); max-width:420px; width:100%; padding:24px; border-radius:4px; box-shadow:0 20px 50px -20px #000}
.ask-box p{margin:0 0 18px; line-height:1.9}
.ask-actions{display:flex; gap:10px; flex-wrap:wrap}
.ask-box .btn.ghost{color:var(--paper-ink)}
/* ---------- بزرگ‌نمایی تمام‌صفحه (js/zoom.js) ---------- */
.zm-btn{position:absolute; left:12px; bottom:5px; z-index:4; display:inline-flex; align-items:center; gap:5px; border:0; border-radius:16px; padding:4px 11px 4px 9px; background:rgba(20,22,21,.72); color:#fff; font:inherit; font-size:.78rem; cursor:pointer}
.zm-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.zm-btn:focus-visible{outline:3px solid #9cb8ff; outline-offset:2px}
.zm-btn.zm-after{position:static; margin:6px 0 0; background:var(--paper-ink); color:var(--paper)}
.zm-ov{position:fixed; inset:0; z-index:150; background:#0b0d0c; display:none; touch-action:none; direction:ltr}
.zm-ov.on{display:block}
.zm-stage{position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab}
.zm-stage:active{cursor:grabbing}
.zm-holder{position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform}
.zm-holder > *{display:block; max-width:none !important; min-width:0 !important; background:#fbf8ef}
.zm-close{position:absolute; top:max(10px, env(safe-area-inset-top)); right:10px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.2rem; cursor:pointer; z-index:2}
.zm-hint{position:absolute; left:50%; bottom:max(70px, calc(env(safe-area-inset-bottom) + 60px)); translate:-50% 0; margin:0; padding:5px 14px; border-radius:16px; background:rgba(0,0,0,.6); color:#eee; font-size:.82rem; white-space:nowrap; pointer-events:none; transition:opacity .4s; direction:rtl}
.zm-hint.gone{opacity:0}
.zm-tools{position:absolute; left:50%; bottom:max(14px, env(safe-area-inset-bottom)); translate:-50% 0; display:flex; gap:8px; z-index:2}
.zm-tools button{width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.25rem; cursor:pointer}
.zm-close:focus-visible, .zm-tools button:focus-visible{outline:3px solid #9cb8ff}
@media (pointer: coarse){ .lens-tip{display:none} .print, .fig{cursor:zoom-in} }
/* ---------- دفترچه‌ی همیشه دم دست (js/notepad.js) ---------- */
.np-fab{position:fixed; left:16px; bottom:16px; z-index:170; display:inline-flex; align-items:center; gap:7px; border:0; border-radius:24px; padding:10px 16px 10px 18px;
  background:#7a3b2a; color:#f7e9d4; font:inherit; font-weight:700; font-size:.92rem; cursor:pointer; box-shadow:0 8px 22px -6px rgba(0,0,0,.6); transition:left .28s cubic-bezier(.3,.8,.3,1)}
.np-fab svg, .np-head svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.np-fab:hover{filter:brightness(1.12)}
.np-fab:focus-visible, .np-panel button:focus-visible{outline:3px solid #9cb8ff; outline-offset:2px}
.np-fab.np-hide{display:none}
.np-panel{position:fixed; top:0; bottom:0; left:0; width:380px; z-index:165; display:flex; flex-direction:column; background:#fbf8ef; color:var(--paper-ink);
  box-shadow:20px 0 50px -20px rgba(0,0,0,.85); transform:translateX(-105%); transition:transform .28s cubic-bezier(.3,.8,.3,1)}
body.np-open .np-panel{transform:none}
.np-head{display:flex; align-items:center; gap:8px; padding:10px 12px 10px 10px; background:#7a3b2a; color:#f7e9d4}
.np-head b{flex:1; white-space:nowrap}
.np-ref{display:inline-flex; align-items:center; gap:4px; max-width:210px; border:0; border-radius:14px; padding:4px 10px 4px 8px; background:rgba(255,255,255,.16); color:inherit; font:inherit; font-size:.8rem; cursor:pointer}
.np-ref span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.np-ref svg{width:16px; height:16px; flex:none}
.np-close{border:0; background:none; color:inherit; font-size:1.15rem; width:36px; height:36px; border-radius:50%; cursor:pointer}
.np-close:hover{background:rgba(255,255,255,.12)}
.np-text{flex:1; min-height:0; width:100%; border:0; resize:none; background:transparent; color:var(--pen); font-family:var(--font); font-size:1rem; line-height:30px;
  padding:14px 48px 14px 14px; background-image:linear-gradient(90deg, transparent calc(100% - 36px), rgba(170,40,40,.35) calc(100% - 36px), rgba(170,40,40,.35) calc(100% - 34px), transparent calc(100% - 34px)),
  repeating-linear-gradient(transparent 0 29px, rgba(40,70,140,.16) 29px 30px); background-attachment:local; background-position:0 14px}
.np-text:focus{outline:none}
.np-saved{font-size:.78rem; color:var(--paper-muted); padding:2px 14px 8px; min-height:1.6em}
@media (min-width:701px){
  body.np-open .np-fab{left:396px}
  body.np-open .overlay{padding-left:398px}
  body.np-open .zm-stage{left:380px}
}
@media (max-width:700px){
  .np-panel{top:auto; right:0; width:auto; height:46vh; height:46dvh; border-radius:14px 14px 0 0; transform:translateY(105%); box-shadow:0 -14px 40px -10px rgba(0,0,0,.8)}
  .np-head{border-radius:14px 14px 0 0}
  .np-text{font-size:16px}
  body.np-open .np-fab{display:none}
  body.np-open .overlay{padding-bottom:46vh; padding-bottom:46dvh}
  body.np-open .zm-stage{bottom:46vh; bottom:46dvh}
  body.np-open .zm-tools, body.np-open .zm-hint{display:none}
  .np-fab{padding:10px 14px}
}
@media (prefers-reduced-motion: reduce){ .np-panel, .np-fab{transition:none} }

/* ---------- پنجره‌ی مدرک روی گوشی (مشترک نسخه‌ی کلاسیک و میز کارآگاه) ---------- */
.m-title{flex:1; min-width:0; font-weight:700}
.m-title small{display:none}
.modal-bar .m-back, .m-foot{display:none}
@keyframes m-in-next{from{transform:translateX(-36px); opacity:.2}}
@keyframes m-in-prev{from{transform:translateX(36px); opacity:.2}}
#modalBody.m-in-next{animation:m-in-next .22s ease-out}
#modalBody.m-in-prev{animation:m-in-prev .22s ease-out}
@media (max-width:760px){
  .overlay{padding:0; background:#15171a}
  .modal{margin:0; max-width:none; min-height:100%; padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .modal-bar{position:sticky; top:0; z-index:5; margin:0; padding:6px 6px 6px 12px; background:#15171a; border-bottom:1px solid rgba(255,255,255,.08); min-height:52px}
  .modal-bar .navs{display:none}
  .modal-bar .m-back{display:inline-flex; flex:none; padding:0; width:40px; height:40px; justify-content:center; background:transparent}
  .modal-bar svg, .m-foot svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  .m-title{display:flex; flex-direction:column; line-height:1.35}
  #modalTitle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.95rem}
  .m-title small{display:block; font-weight:400; font-size:.74rem; color:#a8a295}
  .doc{padding:20px 16px 26px; border-radius:0; box-shadow:none}
  .doc .stamp{left:12px; top:12px; font-size:.85rem}
  .m-foot{display:flex; gap:6px; position:fixed; left:0; right:0; bottom:0; z-index:6; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:#15171a; border-top:1px solid rgba(255,255,255,.08)}
  .m-foot .btn{flex:1; justify-content:center; gap:4px; padding:10px 6px; background:rgba(255,255,255,.1); color:#fff; font-size:.92rem}
  .m-foot #noteBtn{background:var(--kraft); color:var(--kraft-ink)}
  .print{margin:6px -6px 4px}
  .zm-btn{padding:6px 12px 6px 10px; font-size:.82rem}
}