:root{
  --red:#C0392B;--red2:#E74C3C;--red-bg:#fdf2f1;--red-bd:#f5c6c2;
  --bg:#F4F5F7;--white:#fff;--sf2:#ECEEF2;
  --bd:#E0E3EA;--bd2:#C5C9D4;
  --tx:#1A1D23;--tx2:#4A4D57;--tx3:#8A8D9A;
  --green:#16A34A;--green-bg:#F0FDF4;--green-bd:#BBF7D0;
  --amber:#D97706;--amber-bg:#FFFBEB;--amber-bd:#FDE68A;
  --indigo:#4F46E5;--indigo-bg:#EEF2FF;--indigo-bd:#C7D2FE;
  --sh:0 1px 3px rgba(0,0,0,.07);--sh2:0 4px 14px rgba(0,0,0,.09);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Barlow',sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;font-size:14px;}
.hdr{background:var(--white);border-bottom:3px solid var(--red);height:58px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--sh);}
.hdr-l{display:flex;align-items:center;gap:12px;}
.logo-img{height:50px;width:auto;cursor:pointer;}
.hdr-c{position:absolute;left:50%;transform:translateX(-50%);}
.hdr-sys{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;color:var(--tx2);white-space:nowrap;}
.hdr-ot{font-weight:800;color:var(--red);margin-left:1px;}
.hdr-r{display:flex;gap:8px;align-items:center;}
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border-radius:6px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .13s;line-height:1;}
.bp{background:var(--red);color:#fff;}.bp:hover{background:var(--red2);transform:translateY(-1px);box-shadow:0 3px 8px rgba(192,57,43,.25);}
.bg{background:transparent;color:var(--tx2);border:1px solid var(--bd);}.bg:hover{background:var(--sf2);color:var(--tx);}
.bb{background:#1D4ED8;color:#fff;}.bb:hover{background:#1E40AF;}
.be{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-bd);padding:4px 9px;font-size:12px;}.be:hover{background:#FEF3C7;}
.bd_{background:#FEF2F2;color:var(--red);border:1px solid var(--red-bd);padding:4px 9px;font-size:12px;}.bd_:hover{background:var(--red-bg);}
.bsm{padding:6px 12px;font-size:12px;}
.brow{display:flex;gap:4px;}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:20px;}
.sc{background:var(--white);border:1px solid var(--bd);border-radius:8px;padding:13px 15px;box-shadow:var(--sh);position:relative;overflow:hidden;}
.sc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;}
.sc.a::after{background:var(--red);}.sc.b::after{background:var(--green);}.sc.c::after{background:var(--indigo);}.sc.d::after{background:var(--amber);}
.sl{font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-bottom:5px;}
.sv{font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:800;line-height:1;}
.sc.a .sv{color:var(--red);}.sc.b .sv{color:var(--green);}.sc.c .sv{color:var(--indigo);}.sc.d .sv{color:var(--amber);}
.ss{font-size:11px;color:var(--tx3);margin-top:4px;}
.tw{background:var(--white);border:1px solid var(--bd);border-radius:8px;overflow:hidden;margin-bottom:18px;box-shadow:var(--sh);}
table{width:100%;border-collapse:collapse;}
thead th{background:var(--sf2);padding:9px 13px;text-align:left;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.8px;color:var(--tx3);text-transform:uppercase;border-bottom:1px solid var(--bd);font-weight:500;}
tbody td{padding:10px 13px;border-bottom:1px solid var(--bd);font-size:13.5px;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--bg);}
.tmn{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--tx3);}
.tam{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;}
.emp td{text-align:center;color:var(--tx3);padding:34px;font-size:13px;}
.tr_{text-align:right;}
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:4px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.bef{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd);}
.btc{background:var(--indigo-bg);color:var(--indigo);border:1px solid var(--indigo-bd);}
.btr{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-bd);}
.bys{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd);}
.bno{background:var(--indigo-bg);color:var(--indigo);border:1px solid var(--indigo-bd);}
.bct{background:var(--sf2);color:var(--tx2);border:1px solid var(--bd);font-size:11px;}
.ov{position:fixed;inset:0;background:rgba(26,29,35,.42);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .17s;backdrop-filter:blur(3px);}
.ov.on{opacity:1;pointer-events:all;}
.mod{background:var(--white);border:1px solid var(--bd);border-radius:12px;width:640px;max-width:96vw;max-height:90vh;overflow-y:auto;box-shadow:var(--sh2);transform:translateY(14px) scale(.99);transition:transform .17s;}
.ov.on .mod{transform:translateY(0) scale(1);}
.mh{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--bd);background:var(--sf2);border-radius:12px 12px 0 0;}
.mh h2{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;}
.mb{padding:20px;display:flex;flex-direction:column;gap:13px;}
.mf{padding:13px 20px;border-top:1px solid var(--bd);display:flex;gap:8px;justify-content:flex-end;background:var(--sf2);border-radius:0 0 12px 12px;}
.xb{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:20px;padding:2px 6px;border-radius:4px;}.xb:hover{background:var(--bd);color:var(--tx);}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.gg{display:flex;flex-direction:column;gap:5px;}
.gg.full{grid-column:1/-1;}
label{font-size:12px;color:var(--tx2);font-weight:600;}
input,select,textarea{background:var(--white);border:1.5px solid var(--bd);border-radius:6px;color:var(--tx);padding:8px 11px;font-family:'Barlow',sans-serif;font-size:14px;transition:border-color .12s;width:100%;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.07);}
input[readonly]{background:var(--sf2);color:var(--red);font-weight:700;}
textarea{resize:vertical;min-height:60px;}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.st{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;display:flex;align-items:center;gap:8px;}
.stag{font-family:'JetBrains Mono',monospace;font-size:9px;background:var(--sf2);border:1px solid var(--bd);padding:2px 7px;border-radius:3px;color:var(--tx3);letter-spacing:1px;}
.cc{background:var(--white);border:1px solid var(--bd);border-radius:8px;padding:20px;margin-bottom:14px;box-shadow:var(--sh);}
.cc h3{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;margin-bottom:14px;}
.tst{position:fixed;bottom:22px;right:22px;background:var(--tx);color:#fff;border-radius:8px;padding:10px 17px;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;transform:translateY(60px);opacity:0;transition:all .22s;z-index:9999;box-shadow:var(--sh2);}
.tst.on{transform:translateY(0);opacity:1;}
.tst.ok::before{content:'✓';color:#4ADE80;}
.tst.er::before{content:'✗';color:#F87171;}
.user-chip{font-size:12px;color:var(--tx3);display:flex;align-items:center;gap:6px;}
.user-chip b{color:var(--tx);}
.logout-btn{background:none;border:1px solid var(--bd);padding:4px 10px;border-radius:5px;font-size:12px;cursor:pointer;color:var(--tx3);font-family:'Barlow',sans-serif;}
.logout-btn:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-bd);}
.back-btn{background:none;border:none;cursor:pointer;font-size:18px;margin-right:8px;color:var(--tx3);padding:4px;}
.back-btn:hover{color:var(--red);}
.load-ov{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s;}
.load-ov.done{opacity:0;pointer-events:none;}
.load-sp{width:36px;height:36px;border:3px solid var(--bd);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:14px;}
.load-tx{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--tx2);}
@keyframes spin{to{transform:rotate(360deg);}}
.hidden{display:none!important;}
@media(max-width:768px){
  .sgrid{grid-template-columns:repeat(2,1fr);}
  .hdr{padding:0 12px;gap:8px;}
  .hdr-c{position:static;transform:none;}.hdr-sys{font-size:13px;}
  .fg{grid-template-columns:1fr;}
  .mod{width:98vw;max-height:95vh;}
}
@media print{.hdr,.btn,.brow{display:none!important;}body{padding:0;}}