:root{
  --bg:#f6f3f0; --card:#fff; --ink:#2b211d; --muted:#7c6f69; --line:#e8e1dc;
  --side:#2f1f1a; --side-ink:#e9dcd4; --side-mute:#a8968c;
  --pri:#b4532a; --pri-d:#8f3f1e; --pri-l:#fbeee6;
  --green:#2e7d4f; --red:#b3261e; --amber:#b7791f; --blue:#2c5d9e; --teal:#1f7a7a; --gray:#6b6b6b;
  --r:10px; --sh:0 1px 2px rgba(40,20,10,.06),0 2px 10px rgba(40,20,10,.04);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Cairo,Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 10px;font-weight:700}
h2{font-size:18px} h3{font-size:15px}
.muted{color:var(--muted)}
small{font-size:12px}

/* layout */
.side{position:fixed;top:0;inset-inline-start:0;bottom:0;width:272px;background:var(--side);color:var(--side-ink);overflow-y:auto;z-index:30;transition:transform .2s}
.brand{display:flex;gap:10px;align-items:center;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand img{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#fff}
.brand strong{display:block;font-size:17px;color:#fff}
.brand small{color:var(--side-mute)}
.side nav{padding:10px 10px 40px}
.side .ic{width:22px;height:22px;flex:0 0 22px;opacity:.85}
.side nav a,.grp-h{display:flex;align-items:center;gap:12px;width:100%;color:var(--side-ink);border-radius:10px;text-decoration:none}
.side nav a .t,.grp-h .t{flex:1;text-align:start}
.side nav a:hover,.grp-h:hover{background:rgba(255,255,255,.07);text-decoration:none}
.side nav a.top-link,.grp-h{padding:12px 14px;font-size:16.5px;font-weight:600;margin-bottom:4px}
.grp-h{background:none;border:0;font-family:inherit;cursor:pointer}
.grp.cur>.grp-h,.side nav a.top-link.on{background:rgba(255,255,255,.10);color:#fff}
.grp-h .arr{width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-4px;transition:transform .2s;opacity:.7}
.grp.open>.grp-h .arr{transform:rotate(-135deg);margin-top:4px}
.grp-b{display:none;padding:2px 0 8px;margin-inline-start:24px;border-inline-start:2px solid rgba(255,255,255,.10)}
.grp.open>.grp-b{display:block}
.grp-b a{padding:9px 14px;font-size:15.5px;margin:2px 0;margin-inline-start:8px;width:auto}
.grp-b a.on{background:#b4532a;color:#fff;font-weight:600}
.grp-b a.on:hover{background:#c25d32}
.cnt{background:#e05a3a;color:#fff;border-radius:10px;font-size:12px;padding:0 8px;line-height:20px;font-weight:700}
.cnt:empty{display:none}
.wrap{margin-inline-start:272px;min-height:100vh}
.top{display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--line);padding:10px 22px;position:sticky;top:0;z-index:20}
.top h1{font-size:17px;margin:0;flex:1}
.top-user{display:flex;gap:10px;align-items:center}
.burger{display:none;background:none;border:0;cursor:pointer;padding:4px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}
.main{padding:20px 22px 40px}
.side-shade{display:none}
@media (max-width:900px){
  .side{transform:translateX(100%)}
  .side-open .side{transform:none}
  .side-open .side-shade{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25}
  .wrap{margin-inline-start:0}
  [dir=ltr] .side{transform:translateX(-100%)}
  [dir=ltr].side-open .side,[dir=ltr] .side-open .side{transform:none}
  .burger{display:block}
  .top-user .muted{display:none}
  .main{padding:14px 12px 30px}
}

/* components */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;margin-bottom:16px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.card-h h2,.card-h h3{margin:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.stat .l{color:var(--muted);font-size:12.5px}
.stat .v{font-size:22px;font-weight:700;margin-top:2px}
.stat .s{font-size:12px;color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:6px;background:var(--pri);color:#fff;border:1px solid var(--pri);border-radius:8px;padding:7px 14px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--pri-d);text-decoration:none}
.btn.light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.light:hover{background:#f4efeb}
.btn.green{background:var(--green);border-color:var(--green)}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.blue{background:var(--blue);border-color:var(--blue)}
.btn.amber{background:var(--amber);border-color:var(--amber)}
.btn.sm{padding:4px 10px;font-size:13px}
.btn.lg{padding:11px 20px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.inline{display:inline}

label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #d9cfc8;border-radius:8px;padding:7px 10px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-l)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--pri)}
textarea{min-height:80px;resize:vertical}
.f{margin-bottom:12px}
.chk{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;cursor:pointer}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filters .f{margin:0;min-width:140px}
.req{color:var(--red)}

.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.tbl th{background:#faf7f5;font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.tbl tbody tr:hover{background:#fdfaf8}
.tbl tfoot td{font-weight:700;background:#faf7f5}
.tbl td.num,.tbl th.num{text-align:end;direction:ltr;unicode-bidi:plaintext;white-space:nowrap}
.tbl .empty{text-align:center;color:var(--muted);padding:24px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl-wrap .tbl th:first-child,.tbl-wrap .tbl td:first-child{padding-inline-start:14px}
.tbl.lines input,.tbl.lines select{padding:5px 8px}
.tbl.lines .rm{background:none;border:0;color:var(--red);font-size:20px;cursor:pointer;line-height:1}
.lines-tools{display:flex;gap:8px;margin-bottom:8px}
.lines-tools .quick-code{max-width:280px}
.lines-wrap{overflow-x:auto}
.totals{max-width:360px;margin-inline-start:auto}
.totals .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0}
.totals .row input{width:140px}
.totals .grand{font-size:18px;font-weight:700;border-top:2px solid var(--line);padding-top:8px}

.badge{display:inline-block;padding:1px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.b-green{background:#e3f3e9;color:var(--green)} .b-red{background:#fbe6e4;color:var(--red)}
.b-amber{background:#fdf1dc;color:var(--amber)} .b-blue{background:#e4ecf8;color:var(--blue)}
.b-teal{background:#dff1f1;color:var(--teal)} .b-gray{background:#eeeeee;color:var(--gray)}

.alert{padding:10px 14px;border-radius:8px;margin-bottom:14px;border:1px solid}
.alert.ok{background:#e9f6ee;border-color:#bfe3cc;color:#1d5c38}
.alert.err{background:#fcebea;border-color:#f2c3bf;color:#8a1f19}
.alert.info{background:#eaf1fb;border-color:#c5d6f0;color:#1f4373}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs a{padding:8px 16px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--pri);border-bottom-color:var(--pri);font-weight:600}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.pager{display:flex;gap:4px;align-items:center;margin-top:12px;flex-wrap:wrap}
.pager a{padding:3px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
.pager a.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}
.steps{display:flex;gap:0;flex-wrap:wrap;counter-reset:s}
.step{flex:1;min-width:130px;padding:10px 12px;border:1px solid var(--line);background:#fff;position:relative}
.step:first-child{border-start-start-radius:8px;border-end-start-radius:8px} .step:last-child{border-start-end-radius:8px;border-end-end-radius:8px}
.step.done{background:#e9f6ee;border-color:#bfe3cc}
.step.cur{background:#fdf1dc;border-color:#f0d5a3}
.step b{display:block}
.progress{height:8px;background:#eee;border-radius:6px;overflow:hidden}
.progress span{display:block;height:100%;background:var(--green)}

/* auth */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#2f1f1a,#5a3326)}
.auth-box{background:#fff;border-radius:14px;padding:30px 28px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.3);margin:20px}
.auth-box h2{font-size:20px;margin-bottom:4px}
.auth-box .btn{width:100%;justify-content:center;padding:10px}
.lang-sw{position:fixed;top:14px;inset-inline-end:16px;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:3px 12px}
.auth-alert{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:5;min-width:280px}

/* POS */
body.pos .main{padding:12px}
body.pos .side,body.pos .top,body.pos .side-shade{display:none!important}
body.pos .wrap{margin:0}
body.pos .pos-grid{height:calc(100vh - 24px)}
.pos-user{align-self:center;white-space:nowrap}
.pos-chat{position:relative}
.pos-chat .cnt:empty{display:none}
.pos-chat.alert-on{background:#e05a3a;border-color:#e05a3a;color:#fff;animation:chatPulse 1.2s ease-in-out infinite}
.pos-chat.alert-on .cnt{background:#fff;color:#e05a3a}
@keyframes chatPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,90,58,.6)}50%{box-shadow:0 0 0 8px rgba(224,90,58,0)}}
body.popup .side,body.popup .top,body.popup .side-shade{display:none!important}
body.popup .wrap{margin:0}
body.popup .main{padding:8px}
body.popup .chat{height:calc(100vh - 16px)}
.pos-grid{display:grid;grid-template-columns:1fr 400px;gap:12px;height:calc(100vh - 82px)}
.pos-left{display:flex;flex-direction:column;min-height:0}
.pos-bar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.pos-bar input{flex:1;min-width:200px}
.pos-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pos-cats button{border:1px solid var(--line);background:#fff;border-radius:20px;padding:4px 14px;cursor:pointer;font:inherit}
.pos-cats button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.pos-items{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;align-content:start}
.pos-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;text-align:center;user-select:none}
.pos-item:hover{border-color:var(--pri);box-shadow:var(--sh)}
.pos-item img,.pos-item .ph{width:100%;height:70px;object-fit:cover;border-radius:6px;background:#f3ebe5;display:flex;align-items:center;justify-content:center;color:#b9a69a;font-weight:700;font-size:20px}
.pos-item .n{font-weight:600;font-size:13px;margin-top:4px;line-height:1.3}
.pos-item .pr{color:var(--pri);font-weight:700}
.pos-item .st{font-size:11px;color:var(--muted)}
.pos-item.out{opacity:.5}
.pos-cart{background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;min-height:0}
.pos-cart .lines{flex:1;overflow-y:auto}
.cart-line{display:grid;grid-template-columns:1fr 92px 76px 24px;gap:6px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.cart-line .n{font-weight:600;font-size:13px}
.cart-line .p{font-size:12px;color:var(--muted)}
.cart-line .qbox{display:flex;align-items:center}
.cart-line .qbox button{width:26px;height:28px;border:1px solid var(--line);background:#faf7f5;cursor:pointer;font-size:16px}
.cart-line .qbox input{width:40px;text-align:center;padding:3px;border-radius:0}
.cart-line .t{text-align:end;font-weight:700}
.cart-line .x{background:none;border:0;color:var(--red);cursor:pointer;font-size:18px}
.pos-sum{padding:10px 12px;border-top:1px solid var(--line);background:#faf7f5;border-radius:0 0 10px 10px}
.pos-sum .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.pos-sum .row input,.pos-sum .row select{width:150px;padding:4px 8px}
.pos-sum .grand{font-size:22px;font-weight:700;color:var(--pri)}
.paym{display:flex;gap:6px}
.paym label{flex:1;margin:0;text-align:center;border:1px solid var(--line);border-radius:8px;padding:6px;cursor:pointer;color:var(--ink);background:#fff}
.paym input{display:none}
.paym input:checked+span{font-weight:700;color:var(--pri)}
.paym label:has(input:checked){border-color:var(--pri);background:var(--pri-l)}
@media (max-width:900px){.pos-grid,body.pos .pos-grid{grid-template-columns:1fr;height:auto}.pos-items{max-height:50vh}.pos-cart .lines{max-height:40vh}}

/* mail */
.mail-grid{display:grid;grid-template-columns:200px 1fr;gap:16px}
.mail-folders a{display:flex;justify-content:space-between;padding:8px 12px;border-radius:8px;color:var(--ink)}
.mail-folders a.on{background:var(--pri-l);color:var(--pri);font-weight:600}
.mail-list .unread td{font-weight:700}
.mail-body{white-space:pre-wrap;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.att{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:3px 10px;margin:4px 0;margin-inline-end:6px;background:#faf7f5}
@media (max-width:800px){.mail-grid{grid-template-columns:1fr}}

/* chat */
.chat{display:grid;grid-template-columns:280px 1fr;height:calc(100vh - 110px);background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chat-rooms{border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.chat-rooms .hd{padding:10px;border-bottom:1px solid var(--line);display:flex;gap:6px}
.chat-rooms .list{overflow-y:auto;flex:1}
.room{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #f2ece8;cursor:pointer;color:var(--ink)}
.room:hover{background:#fdfaf8;text-decoration:none}
.room.on{background:var(--pri-l)}
.room .nm{font-weight:600}
.room .lm{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ccc;margin-inline-end:6px}
.dot.on{background:#2fb36b}
.chat-main{display:flex;flex-direction:column;min-height:0}
.chat-head{padding:10px 14px;border-bottom:1px solid var(--line);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.msgs{flex:1;overflow-y:auto;padding:14px;background:#faf7f5;display:flex;flex-direction:column;gap:6px}
.msg{max-width:70%;padding:7px 11px;border-radius:12px;background:#fff;border:1px solid var(--line);align-self:flex-start;word-wrap:break-word;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:#fbe3d6;border-color:#f3cdb9}
.msg .who{font-size:11.5px;font-weight:700;color:var(--pri)}
.msg .tm{font-size:10.5px;color:var(--muted);text-align:end;margin-top:2px}
.chat-send{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:flex-end}
.chat-send textarea{min-height:42px;height:42px}
.chat-empty{margin:auto;color:var(--muted)}
@media (max-width:800px){.chat{grid-template-columns:1fr;height:auto}.chat-rooms .list{max-height:220px}.msgs{height:55vh}}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.open{display:flex}
.modal .box{background:#fff;border-radius:12px;padding:20px;width:100%;max-width:520px;max-height:90vh;overflow:auto}

/* print */
.print-only{display:none}
@media print{
  .side,.top,.no-print,.pager,.filters,.alert{display:none!important}
  .wrap{margin:0}.main{padding:0}
  .card{box-shadow:none;border:0;padding:0}
  .print-only{display:block}
  body{background:#fff}
}
.receipt{width:76mm;margin:0 auto;font-size:12px;color:#000;font-family:Tahoma,Arial,sans-serif}
.receipt h3{text-align:center;margin:4px 0}
.receipt table{width:100%;border-collapse:collapse}
.receipt td,.receipt th{padding:2px 0;border-bottom:1px dashed #999;font-size:12px}
.receipt .c{text-align:center}
.receipt .tot td{border:0;font-weight:700}
.doc-print{max-width:800px;margin:0 auto}
.doc-print .hd{display:flex;justify-content:space-between;border-bottom:2px solid #333;padding-bottom:8px;margin-bottom:12px}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.pos-sum .row input[type=checkbox]{width:auto}
.pos-bar{flex-wrap:nowrap}.pos-bar input{min-width:140px}.pos-bar .btn{flex:0 0 auto}.pos-bar select{flex:0 1 240px;min-width:150px}@media (max-width:900px){.pos-bar{flex-wrap:wrap}}
.brn{display:inline-block;font-size:11px;font-weight:600;color:#8f3f1e;background:#fbeee6;border-radius:10px;padding:0 7px;margin-inline-start:4px;vertical-align:middle;line-height:17px}
.msg.me .brn{background:#fff}
.msg-img{display:block;max-width:260px;max-height:260px;border-radius:8px;margin-top:4px;cursor:zoom-in;background:#eee}
.chat-prev{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);background:#fff}
.chat-prev[hidden]{display:none}
.chat-prev img{height:56px;max-width:90px;object-fit:cover;border-radius:6px}
.chat-prev span{flex:1;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-prev button{background:none;border:0;color:var(--red);font-size:22px;cursor:pointer}
.mail-imgs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mail-imgs img{width:180px;height:140px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:zoom-in}
.mail-prev{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.mail-prev img{height:70px;border-radius:6px;border:1px solid var(--line)}
.room.general{background:#fff7f1;border-bottom:2px solid #f0d9c9}
.room.general .nm{color:var(--pri)}
.gen-ic{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border-radius:6px;background:var(--pri);color:#fff;font-size:13px;margin-inline-end:6px}

/* branch monitor */
.mon-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.stat.st-green .v{color:var(--green)} .stat.st-red .v{color:var(--red)}
.mon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.mon-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.mon-h{display:flex;justify-content:space-between;align-items:center}
.mon-h h3{margin:0;font-size:19px}
.mon-cashier{display:flex;justify-content:space-between;align-items:center;background:var(--pri-l);border-radius:10px;padding:10px 12px;font-size:16px}
.mon-cashier b{font-size:17px}
.mon-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mon-nums div{background:#faf7f5;border-radius:10px;padding:8px 12px}
.mon-nums span{display:block;font-size:12.5px;color:var(--muted)}
.mon-nums b{font-size:21px}
.mon-nums .g b{color:var(--green)} .mon-nums .r b{color:var(--red)}
.mon-pay{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}
.mon-pay b{color:var(--ink)} .mon-pay .r b{color:var(--red)}
.mon-row{display:flex;justify-content:space-between;gap:8px;border-top:1px dashed var(--line);padding-top:6px}
.mon-row.sm{font-size:13px;border:0;padding-top:0}
.mon-sub{font-weight:700;font-size:13px;color:var(--muted);margin-top:4px}
.mon-links{display:flex;gap:14px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
/* centered table headers and numbers */
.tbl th,.tbl th.num{text-align:center}
.tbl td.num{text-align:center;direction:ltr;unicode-bidi:plaintext}
.tbl tfoot td.num{text-align:center}
.receipt th{text-align:center!important}
.tbl td{text-align:center}
.tbl td.actions{justify-content:center}
.tbl .empty{text-align:center}
.grp-cnt:empty{display:none}
.tbl tr.row-exp td{background:#fdecea}
.tbl tr.row-soon td{background:#fff6e5}
.exp-alert{font-size:16px;animation:chatPulse 1.6s ease-in-out infinite}
#cnt-expired{background:#b3261e}
.tbl.dlines input,.tbl.dlines select{padding:5px 8px}.tbl.dlines .rm{background:none;border:0;color:var(--red);font-size:20px;cursor:pointer}
.ready-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ready-card{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fffaf6;cursor:pointer}
.ready-card:hover{border-color:var(--pri);box-shadow:var(--sh)}
.ready-card .rq{font-size:22px;font-weight:700;color:var(--green)}
.ready-card .btn{margin-top:4px}
.perm-box{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.perm-grp{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fcfaf8}
.perm-h{display:flex;align-items:center;gap:8px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line);color:var(--pri)}
.perm-h .ic{width:18px;height:18px}
.perm-h b{flex:1}
.perm-all{background:none;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:12px;padding:1px 8px;cursor:pointer;color:var(--muted)}
.perm-i{align-items:flex-start;padding:4px 0}
.perm-i span{display:flex;flex-direction:column}
.perm-i small{font-size:11.5px}

/* ---------- HR ---------- */
.tbl tr.row-off td{background:#f6f6f6;color:var(--muted)}
.emp-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.emp-ph{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.emp-ph0{display:inline-flex;align-items:center;justify-content:center;background:var(--pri);color:#fff;font-weight:700;font-size:26px}
.emp-th{width:34px;height:34px;border-radius:50%;object-fit:cover;display:inline-flex;font-size:15px;vertical-align:middle}
.docrow hr{border:0;border-top:1px dashed var(--line);margin:4px 0 10px}
.dev{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;background:#fcfcfc}
.dev.on{border-color:#bfe3c9;background:#f4fbf6}
.dev.off{border-color:#f3c9c4;background:#fff7f6}
.dev-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dot.g,.dot.r{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.dot.g{background:#22a55a;box-shadow:0 0 0 3px #22a55a33}
.dot.r{background:#d9534f;box-shadow:0 0 0 3px #d9534f33}
.howto{padding-inline-start:20px;line-height:2}
.howto code,code{background:#f1f1f1;padding:2px 8px;border-radius:6px;font-family:monospace}
.pay-tbl input.pin{width:84px;text-align:center;padding:6px}
.pay-tbl td,.pay-tbl th{white-space:nowrap}
.slip{max-width:860px;margin:0 auto 16px;page-break-after:always}
.slip-h{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:12px}
.slip-f{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:10px;padding-top:10px;flex-wrap:wrap;gap:8px}
.slip-sign{display:flex;justify-content:space-between;margin-top:30px;color:var(--muted)}
@media print{.slip{border:1px solid #ccc!important;padding:16px!important}}

/* ---------- month summary ---------- */
.fin-card{color:inherit;text-decoration:none!important;transition:box-shadow .15s}
.fin-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.08)}
.fin-tbl td,.fin-tbl th{white-space:nowrap}
.fin-tbl tr.fin-h td{background:#f7f3ef;font-weight:700;color:var(--pri);text-align:start}
.fin-tbl tr.fin-b td{font-weight:700}
.fin-tbl tr.fin-net td{font-weight:700;font-size:16px;background:#fbf8f5;border-top:2px solid var(--line)}
.fin-tbl tr.fin-sub td{font-size:12.5px;color:var(--muted);padding-top:4px;padding-bottom:4px}
.fin-tbl td.pos{color:var(--green)} .fin-tbl td.neg{color:var(--red)}
.fin-tbl .tot{background:#faf7f4}
small.up{color:var(--green);font-weight:600} small.down{color:var(--red);font-weight:600}
.bar-row{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;margin:8px 0;font-size:14px}
.bar{background:#f1ece7;border-radius:6px;height:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--pri);border-radius:6px}
.day-bars{display:flex;align-items:flex-end;gap:2px;height:130px;margin:10px 0}
.day-bars .db{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.day-bars .db i{display:block;width:100%;background:var(--pri);border-radius:3px 3px 0 0;opacity:.85}
.day-bars .db span{font-size:9px;color:var(--muted);margin-top:2px}
.auth-logo{display:block;width:84px;height:84px;margin:0 auto 10px;border-radius:20px;object-fit:contain}

/* ---------- plans ---------- */
.plans-head{text-align:center;margin:8px 0 14px}.plans-head h2{margin:0 0 4px}
.plan-switch{display:flex;justify-content:center;gap:0;margin:0 auto 18px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;width:max-content}
.plan-switch button{border:0;background:none;padding:8px 22px;border-radius:999px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.plan-switch button.on{background:var(--pri);color:#fff}.plan-switch small{font-weight:400;opacity:.85}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;align-items:stretch;margin-bottom:18px}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px 22px;display:flex;flex-direction:column;box-shadow:var(--sh)}
.plan.featured{border:2px solid var(--pri);box-shadow:0 10px 30px rgba(180,83,42,.15);transform:translateY(-4px)}
.plan.current{border-color:var(--green)}
.plan h3{margin:0 0 4px;font-size:21px}.plan-desc{margin:0 0 10px;font-size:13.5px}
.plan-badge{position:absolute;top:-12px;inset-inline-start:20px;background:var(--pri);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.plan-badge.cur{background:var(--green)}
.plan-price{margin:6px 0 14px}.plan-price b{font-size:34px;line-height:1}.plan-price span{color:var(--muted);font-size:14px}
.plan-price em{display:inline-block;font-style:normal;background:#e8f6ee;color:var(--green);font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;margin-inline-start:6px}
.plan ul{list-style:none;padding:0;margin:0}
.plan-lim{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px!important}
.plan-lim li{background:var(--pri-l);color:var(--pri-d);font-weight:600;font-size:13px;padding:4px 10px;border-radius:8px}
.plan-feat{flex:1;margin-bottom:18px!important}
.plan-feat li{position:relative;padding-inline-start:26px;margin:9px 0;font-size:14px;line-height:1.5}
.plan-feat li::before{content:'';position:absolute;inset-inline-start:0;top:2px;width:18px;height:18px;border-radius:50%;background:#e8f6ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a55a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.plan-btn{width:100%;justify-content:center}
.pay-info .pay-text{background:#faf7f4;border-radius:10px;padding:12px 14px;margin-bottom:12px;line-height:1.9}
.sub-alert a{font-weight:700}
.expired-page{width:100%;max-width:1040px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px;padding:40px 16px;box-sizing:border-box}
.expired-plans{width:100%}
.expired-plans .plans-note{color:#fff}
.rcpt-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--line);border-radius:12px;padding:16px;cursor:pointer;color:var(--muted);text-align:center;background:#fcfaf8}
.rcpt-drop:hover{border-color:var(--pri);color:var(--pri)}
.rcpt-drop input{position:absolute;opacity:0;width:1px;height:1px}
.rcpt-drop img{max-height:160px;max-width:100%;border-radius:8px}
.rcpt-th img{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}

/* ---------- split login (form 25% / promo 75%) ---------- */
body.auth-split{margin:0;min-height:100vh;display:grid;grid-template-columns:minmax(360px,25%) 1fr;background:#fff}
.as-form{display:flex;flex-direction:column;min-height:100vh;padding:26px 34px;box-sizing:border-box;background:#fff;box-shadow:0 0 40px rgba(0,0,0,.12);position:relative;z-index:2}
.as-top{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-top:18px}
.as-logo{width:120px;height:120px;border-radius:26px;object-fit:contain}
.as-top b{font-size:20px}
.as-lang{position:absolute;top:22px;inset-inline-end:24px;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:3px 12px;color:var(--ink);background:#fff}
.as-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:22px 0}
.as-title{font-size:24px;margin:0 0 4px}
.as-sub{margin:0 0 20px}
.as-btn{width:100%;justify-content:center;padding:11px;font-size:15px}
.as-link{font-size:12.5px;font-weight:600}
.as-alt{text-align:center;margin-top:18px;font-size:14px}
.as-done{text-align:center;margin-bottom:18px}
.as-done .as-ic{width:64px;height:64px;border-radius:50%;background:var(--pri-l);color:var(--pri);font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.as-foot{display:flex;flex-direction:column;gap:12px;align-items:center}
.as-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;background:#25d366;color:#fff!important;border-radius:12px;padding:11px 14px;font-weight:700;text-decoration:none!important;box-shadow:0 6px 16px rgba(37,211,102,.3)}
.as-wa:hover{background:#1fb857}
.as-promo{position:relative;background:linear-gradient(135deg,#2f1f1a 0%,#5a3326 55%,#b4532a 130%);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff}
.as-promo:not(.has-img)::before,.as-promo:not(.has-img)::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.06)}
.as-promo:not(.has-img)::before{width:520px;height:520px;top:-140px;inset-inline-end:-120px}
.as-promo:not(.has-img)::after{width:360px;height:360px;bottom:-120px;inset-inline-start:-80px}
.as-promo-in{position:relative;max-width:560px;padding:40px}
.as-promo-logo{width:110px;height:110px;border-radius:26px;box-shadow:0 12px 30px rgba(0,0,0,.3);background:#fff}
.as-promo h1{font-size:40px;margin:22px 0 8px}
.as-tag{font-size:19px;opacity:.9;margin:0 0 26px}
.as-promo ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.as-promo li{display:flex;align-items:center;gap:12px;font-size:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:11px 14px}
.as-promo li::before{content:'✓';width:24px;height:24px;flex:none;border-radius:50%;background:#fff;color:var(--pri);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px}
@media (max-width:860px){
  body.auth-split{grid-template-columns:1fr}
  .as-promo{display:none}
  .as-form{padding:20px 18px;box-shadow:none}
}

/* show / hide password */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-inline-end:42px!important;box-sizing:border-box}
.pw-eye{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);border:0;background:none;padding:6px;cursor:pointer;color:var(--muted);display:flex;align-items:center;border-radius:6px}
.pw-eye:hover{color:var(--pri);background:var(--pri-l)}
.mail-diag{margin-top:14px;background:#faf7f4;border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:6px;font-size:13.5px}
.mail-diag pre{white-space:pre-wrap;word-break:break-all;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;margin:4px 0 0;font-size:12px;max-height:260px;overflow:auto;text-align:left}
.mail-err{color:var(--red)}