:root{--bg:#eef0ea;--card:#fff;--text:#16211b;--muted:#64705f;--line:#dcdfd3;--soft:#f6f7f2;--brand:#1f3a2e;--brand-d:#162b22;--gold:#b8933a;--red:#c62828;--hl:#eef4e6;--onbrand:#fff;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1511;--card:#17211b;--text:#e8ece4;--muted:#9aa793;--line:#2a372e;--soft:#121b16;--brand:#2f6b4f;--brand-d:#25573f;--gold:#d9b45a;--red:#ff8a80;--hl:#1b2a21}}
:root[data-theme="dark"]{--bg:#0e1511;--card:#17211b;--text:#e8ece4;--muted:#9aa793;--line:#2a372e;--soft:#121b16;--brand:#2f6b4f;--brand-d:#25573f;--gold:#d9b45a;--red:#ff8a80;--hl:#1b2a21}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{font-family:'Cairo',Tahoma,sans-serif;background:var(--bg);color:var(--text);margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.muted{color:var(--muted)} .brand{color:var(--brand)} .gold{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand{color:#8fd1ae}}
.inp{width:100%;margin-top:4px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text);font:inherit}
.inp:focus-visible,.btn:focus-visible,.tab:focus-visible,.item:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn{background:var(--brand);color:var(--onbrand);border:0;border-radius:10px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;width:100%}
.btn:hover{background:var(--brand-d)}
.btn-o{background:transparent;color:var(--brand);border:1px solid var(--brand);width:auto}
.btn-o:hover{background:var(--hl)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-o{color:#8fd1ae;border-color:#8fd1ae}}
.btn-r{background:#8e2323}.btn-r:hover{background:#6f1b1b}
.btn-g{background:var(--gold);color:#1a1405}.btn-g:hover{filter:brightness(.95);background:var(--gold)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.b{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.amber{--c:#d97706}.sky{--c:#0284c7}.violet{--c:#7c3aed}.green{--c:#059669}.rose{--c:#be123c}.gray{--c:#64748b}
.tab{flex:0 0 auto;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
.dot{display:inline-block;min-width:18px;padding:0 5px;margin-inline-start:6px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;line-height:18px;text-align:center}
.item{width:100%;text-align:right;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--soft);color:var(--text);font:inherit;cursor:pointer}
.item[aria-current="true"]{outline:2px solid var(--gold);background:var(--hl)}
.vc{border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:10px}
.vc.bad{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
table{width:100%;font-size:14px;border-collapse:collapse} th{color:var(--muted);text-align:right;font-weight:600;padding:6px 4px;white-space:nowrap} td{padding:8px 4px;border-top:1px solid var(--line)}
.tbl{overflow-x:auto}
.demo{background:repeating-linear-gradient(135deg,var(--soft),var(--soft) 10px,var(--bg) 10px,var(--bg) 20px);border-bottom:1px dashed var(--gold)}
.appbar{background:linear-gradient(180deg,#15281f,#0f1b15);color:#fff;border-bottom:2px solid rgba(217,180,90,.45)}
#toast{position:fixed;inset-inline:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:70;display:none}
#toast>div{max-width:540px;margin:auto;background:var(--brand-d);color:#fff;border:1px solid var(--gold);border-radius:12px;padding:10px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 6px 24px rgba(0,0,0,.35)}
#toast button{background:var(--gold);color:#1a1405;border:0;border-radius:8px;padding:4px 10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
#modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:none;overflow-y:auto;padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))}
#modal .sheet{max-width:880px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.paper-wrap{overflow:auto;background:#cfd3c8;border-radius:10px;padding:8px}
.sig{width:100%;height:150px;background:#fff;border:1px dashed #888;border-radius:10px;display:block}
#print-root{display:none}
@media print{
  body>*:not(#print-root){display:none!important}
  #print-root{display:block!important}
  body{background:#fff}
  @page{size:A4;margin:10mm}
}

.logo-badge{background:#fff;border-radius:12px;padding:4px 6px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}

.viewbanner{background:#7a5c10;color:#fff;text-align:center;font-size:13px;padding:6px 10px}