:root{
    --blue:#1258c8; --blue-dark:#0d449c; --blue-soft:#eef3fd;
    --page:#e8edf4; --white:#fff;
    --txt:#1c2430; --dim:#5d6875; --line:#e3e9f1; --edge:#ccd7e6;
    --ok:#1a7f4b; --ok-bg:#e7f5ed;
    --bad:#c33b3b; --bad-bg:#fbeaea;
    --warn:#9a6100; --warn-bg:#fdf3e0;
    --shadow:0 1px 2px rgba(20,35,60,.06);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  body{margin:0;background:var(--page);color:var(--txt);
    font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:15px;line-height:1.55}

  .appbar{background:var(--blue);color:#fff;padding:14px 16px 0}
  .appbar .inner{max-width:820px;margin:0 auto}
  .appbar h1{font-size:18px;font-weight:700;margin:0}
  .bartop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .logout{width:auto;margin:0;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);
    color:#fff;font-size:13px;padding:5px 12px;font-weight:500}
  .logout:hover{background:rgba(255,255,255,.28)}
  .appbar .who{font-size:13px;color:#c8dcff;margin-bottom:10px}
  .tabs{display:flex;gap:2px;overflow-x:auto;max-width:820px;margin:0 auto}
  .tabs button{width:auto;margin:0;background:none;border:0;border-radius:0;cursor:pointer;
    padding:10px 14px;color:#c8dcff;font-family:inherit;font-size:14px;font-weight:500;
    white-space:nowrap;border-bottom:3px solid transparent}
  .tabs button:hover{background:rgba(255,255,255,.10)}
  .tabs button.on{color:#fff;border-bottom-color:#fff}

  main{padding:16px;max-width:820px;margin:0 auto}
  .card{background:var(--white);border:1px solid var(--edge);border-radius:6px;
    padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
  .card h2{font-size:15px;font-weight:600;margin:0 0 14px;
    padding-bottom:10px;border-bottom:2px solid var(--blue-soft)}
  .lbl{font-size:13px;color:var(--dim)}
  .big{font-size:30px;font-weight:700;color:var(--blue);margin:2px 0 4px}
  .row{display:flex;gap:14px;flex-wrap:wrap}
  .row>.card{flex:1;min-width:150px}
  .note{background:var(--blue-soft);color:var(--blue-dark);padding:10px 12px;
    border-left:3px solid var(--blue);border-radius:0 4px 4px 0;font-size:13px;margin-bottom:12px}
  .errbox{background:var(--bad-bg);border:1px solid #eec2c2;border-left:4px solid var(--bad);
    color:#7a2222;border-radius:4px;padding:14px;margin-bottom:14px;font-size:14px}

  label{display:block;font-size:13px;color:var(--dim);margin:12px 0 4px}
  input,select,textarea{width:100%;padding:9px 11px;border-radius:4px;border:1px solid #b9c6d6;
    background:#fff;color:var(--txt);font-family:inherit;font-size:15px}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:-1px}
  button{background:var(--blue);color:#fff;border:0;border-radius:4px;padding:10px 16px;
    font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;width:100%;margin-top:16px}
  button:hover{background:var(--blue-dark)}
  button:disabled{background:#a9b5c4;cursor:default}
  button.sm{width:auto;padding:5px 12px;font-size:13px;margin:0 6px 0 0;font-weight:500}
  button.plain{background:#fff;color:var(--txt);border:1px solid var(--edge)}
  button.plain:hover{background:#f0f4f9}
  button.green{background:var(--ok)}
  button.green:hover{background:#146639}
  button.red{background:var(--bad)}
  button.red:hover{background:#a52f2f}

  table{width:100%;border-collapse:collapse;font-size:14px}
  th{background:var(--blue-soft);color:var(--blue-dark);text-align:left;
    padding:9px 10px;font-weight:600;font-size:13px;border-bottom:1px solid var(--edge)}
  td{padding:9px 10px;border-bottom:1px solid var(--line)}
  tr:last-child td{border-bottom:0}

  .tag{display:inline-block;padding:2px 9px;border-radius:3px;font-size:12px;font-weight:600}
  .PENDING{background:var(--warn-bg);color:var(--warn)}
  .APPROVED{background:var(--ok-bg);color:var(--ok)}
  .REJECTED,.CANCELLED{background:var(--bad-bg);color:var(--bad)}

  .entry{padding:12px 0;border-bottom:1px solid var(--line)}
  .entry:last-child{border-bottom:0;padding-bottom:0}
  .entry .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .entry .amt{font-weight:700;font-size:16px}
  .entry .meta{font-size:13px;color:var(--dim);margin-top:2px}
  .entry .why{font-size:13px;color:var(--bad);margin-top:4px}
  .entry .fix{display:flex;gap:6px;align-items:center;margin-top:8px}
  .entry .fix input{width:120px;margin:0}

  .qrwrap{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
  .qrwrap #qrbox{background:#fff;padding:10px;border:1px solid var(--edge);border-radius:4px;
    min-width:180px;min-height:180px;display:flex;align-items:center;justify-content:center}
  .qrwrap #qrbox .lbl{text-align:center;padding:0 10px}
  .qrside{flex:1;min-width:180px}
  .qrside label{margin-top:0}

  .slipbtn{margin-top:8px}
  .slipimg{margin-top:10px;border:1px solid var(--edge);border-radius:4px;overflow:hidden;
    background:#f3f6fa;max-width:340px}
  .slipimg img{display:block;width:100%;cursor:zoom-in}
  .slipload{height:200px;display:flex;flex-direction:column;gap:10px;
    align-items:center;justify-content:center;text-align:center;padding:0 14px}
  .spin{width:26px;height:26px;border:3px solid var(--edge);border-top-color:var(--blue);
    border-radius:50%;animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s} }
  .lightbox{position:fixed;inset:0;background:rgba(12,20,32,.85);z-index:40;
    display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
  .lightbox img{max-width:100%;max-height:100%;border-radius:4px}
  .lightbox .slipload{color:#fff}
  .lightbox .spin{border-color:rgba(255,255,255,.3);border-top-color:#fff}

  body.working button{opacity:.55;pointer-events:none}
  .sliprow{display:flex;gap:8px;align-items:center;margin-top:8px}
  .linkbtn{display:inline-block;padding:5px 12px;border-radius:4px;border:1px solid var(--edge);
    background:#fff;color:var(--txt);font-size:13px;text-decoration:none}
  .linkbtn:hover{background:#f0f4f9}


  .logrow{display:flex;align-items:center;gap:12px;padding:11px 13px;margin-bottom:6px;
    border-radius:4px;background:#fafbfd;border-left:4px solid #98a2b0}
  .logmain{flex:1;min-width:0}
  .logtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .logact{font-weight:600;font-size:14px}
  .logdetail{font-size:13px;color:#414a57;margin-top:3px;word-break:break-word}
  .logby{font-size:12px;color:var(--dim);margin-top:3px}
  .logamt{font-size:22px;font-weight:700;white-space:nowrap;text-align:right;color:var(--dim)}
  .logamt .unit{font-size:12px;font-weight:500;margin-left:4px;opacity:.75}
  .logamt.kIN{color:var(--ok)}
  .logamt.kOUT{color:var(--bad)}
  .logamt.kWAIT{color:#a87f08}
  .logamt.kCONFIG{color:#b45309}
  .logamt.kVOID{color:#8b95a3;text-decoration:line-through;font-weight:600;font-size:18px}
  .tagk{padding:1px 8px;border-radius:3px;font-size:11px;font-weight:600;white-space:nowrap}

  .logrow.kIN{background:#f0faf4;border-left-color:var(--ok)}
  .logrow.kOUT{background:#fdf3f3;border-left-color:var(--bad)}
  .logrow.kWAIT{background:#fefbea;border-left-color:#eab308}
  .logrow.kVOID{background:#f7f8fa;border-left-color:#b6bec9}
  .logrow.kCONFIG{background:#fdf2e6;border-left-color:#b45309}
  .logrow.kMEMBER{background:#f2f6fe;border-left-color:var(--blue)}
  .logrow.kSYSTEM{background:#f6f7f9;border-left-color:#98a2b0}
  .tagk.kIN{background:var(--ok-bg);color:var(--ok)}
  .tagk.kOUT{background:var(--bad-bg);color:var(--bad)}
  .tagk.kWAIT{background:#fdf3cf;color:#8a6a05}
  .tagk.kVOID{background:#eceff3;color:#6b7482}
  .tagk.kCONFIG{background:#fbe7d2;color:#8f4109}
  .tagk.kMEMBER{background:var(--blue-soft);color:var(--blue-dark)}
  .tagk.kSYSTEM{background:#eceff3;color:#5d6875}

  .empty{color:var(--dim);font-size:14px}
  .hide{display:none !important}
  a{color:var(--blue)}
  #toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1c2430;
    color:#fff;padding:11px 18px;border-radius:4px;font-size:14px;max-width:90%;
    opacity:0;transition:.2s;pointer-events:none;z-index:30}
  #toast.show{opacity:1}
  #toast.err{background:var(--bad)}


/* ---------- หน้าล็อกอิน ---------- */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(160deg,#1258c8 0%,#0d449c 100%)}
.gatecard{background:#fff;border-radius:8px;padding:32px 26px;max-width:380px;width:100%;
  text-align:center;box-shadow:0 8px 30px rgba(10,30,70,.25)}
.gatecard h1{font-size:20px;margin:0 0 6px;color:var(--txt)}
.gatecard #gbtn{display:flex;justify-content:center;margin-top:22px;min-height:44px}

/* ---------- ปุ่มออกจากระบบ ---------- */
.bartop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.logout{width:auto;margin:0;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:13px;padding:5px 12px;font-weight:500}
.logout:hover{background:rgba(255,255,255,.28)}

/* ---------- แถบระหว่างรอ AI อ่านสลิป ---------- */
.reading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding:10px 12px;border-radius:4px;
  background:var(--blue-soft);border-left:3px solid var(--blue)}
.reading .spin{width:18px;height:18px;flex:none}
.reading .lbl{flex:1;min-width:140px}
.reading button{margin:0}

/* ---------- เครื่องมือโอนคืนผู้เบิก และ QR แบบเต็มจอ ---------- */
.paytools{margin-top:10px;padding:10px 12px;border-radius:4px;
  background:var(--blue-soft);border-left:3px solid var(--blue)}
.paytools button{margin:0}
.qrmodal{background:#fff;border-radius:8px;padding:22px;text-align:center;
  max-width:320px;cursor:auto}
.qrmodal h2{font-size:16px;margin:0 0 6px;border:0;padding:0}
.qrmodal #qrpop{display:flex;justify-content:center;margin:14px 0}