:root{--navy:#1B2A4A;--navy-2:#243a63;--orange:#E0632E;--orange-soft:#fbeee6;
    --bg:#F4F5F7;--card:#fff;--line:#e6e8ee;--ink:#1e2432;--muted:#7a8194;
    --green:#1F9D57;--green-bg:#e7f6ed;--red:#D64545;--red-bg:#fbeaea;
    --amber:#C77A00;--amber-bg:#fdf3e2;--gray:#8b93a5;--gray-bg:#eef0f4;--r:12px;}
  *{box-sizing:border-box}
  body{margin:0;font-family:'Noto Sans Thai',sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
  .wrap{max-width:1120px;margin:0 auto;padding:0 16px 70px}
  header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
  .bar{max-width:1120px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
  .logo{width:34px;height:34px;border-radius:9px;background:var(--orange);display:grid;place-items:center;font-weight:700;font-size:17px;flex:none}
  .brand{font-weight:700;font-size:16px;line-height:1.15}.brand small{display:block;font-weight:400;font-size:11.5px;color:#a9b4cc}
  .user{margin-left:auto;text-align:right;font-size:12.5px;line-height:1.3}.user b{font-weight:600}.user small{color:#a9b4cc}
  .roles-outer{background:var(--navy-2)}
  .roletabs{max-width:1120px;margin:0 auto;display:flex;gap:6px;padding:8px 16px}
  .rt{flex:1;text-align:center;padding:9px;border-radius:9px;font-weight:600;font-size:14px;color:#b9c3da;cursor:pointer}
  .rt.active{background:#fff;color:var(--navy)}

  h1{font-size:20px;margin:22px 0 4px;font-weight:700}h2{font-size:16px;margin:22px 0 10px}
  .sub{color:var(--muted);font-size:13.5px;margin-bottom:16px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px}
  label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:500}
  input[type=text],input[type=number],input[type=time],input[type=password],textarea{width:100%;font-family:inherit;font-size:14.5px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--ink);background:#fff}
  textarea{resize:vertical;min-height:70px}
  input:focus,textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
  select{font-family:inherit;font-size:14.5px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#fff;color:var(--ink);width:100%}
  .meta{display:flex;gap:12px;flex-wrap:wrap}.field{flex:1;min-width:140px}

  .btn{font-family:inherit;font-size:14px;font-weight:600;border:none;border-radius:9px;padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s}
  .btn-primary{background:var(--orange);color:#fff}.btn-primary:hover{background:#c9541f}.btn-primary:disabled{background:#e7c3b2;cursor:not-allowed}
  .btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-2)}
  .btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{border-color:var(--muted)}
  .btn-sm{padding:6px 12px;font-size:13px}
  .btn-row{display:flex;gap:10px;flex-wrap:wrap}.btn.big{padding:13px 20px;font-size:15px;width:100%;justify-content:center}

  /* ===== PHONE FRAME (branch) ===== */
  .phone{max-width:412px;margin:20px auto;background:var(--bg);border-radius:30px;border:1px solid var(--line);box-shadow:0 16px 50px rgba(20,30,60,.16);overflow:hidden;display:flex;flex-direction:column;height:770px;position:relative}
  .app-header{background:var(--navy);color:#fff;padding:15px 16px 13px;flex:none}
  .app-title{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
  .app-title small{font-weight:400;color:#a9b4cc;font-size:12px}
  .app-ctrls{display:flex;gap:8px;margin-top:11px}
  .app-ctrls select,.app-ctrls input{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;padding:8px 9px;border-radius:9px;width:100%}
  .app-ctrls select option{color:#111}
  .app-ctrls .c-date{max-width:120px}
  .app-body{flex:1;overflow-y:auto;padding:14px;padding-bottom:82px}
  .app-nav{position:absolute;left:0;right:0;bottom:0;display:flex;background:#fff;border-top:1px solid var(--line);height:66px}
  .navitem{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--muted);cursor:pointer;position:relative}
  .navitem .ni{font-size:21px}.navitem.on{color:var(--orange)}
  .navitem .nb{position:absolute;top:9px;right:calc(50% - 24px);background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:0 5px;line-height:16px}
  @media(max-width:480px){.phone{max-width:none;margin:0;border-radius:0;border:none;box-shadow:none;height:auto;min-height:calc(100vh - 96px)}.wrap{padding:0}}

  .shiftcard .shifthead{font-weight:700;font-size:15px;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .shiftcard.dim{opacity:.7}
  .rrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
  .rrow.first{border-top:none}
  .rrow .ic{font-size:19px;flex:none}.rrow .rl{flex:1;font-weight:500;min-width:0;font-size:14px}
  .rrow.active-r{background:var(--orange-soft);margin:0 -18px;padding:11px 18px}

  .items{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
  .item{border:1px solid var(--line);border-radius:11px;padding:12px;background:#fcfcfd}
  .item.custom{border-color:#c9b7e6;background:#faf7ff}
  .item .top{display:flex;gap:8px;align-items:center}
  .item .idx{width:26px;height:26px;border-radius:7px;background:var(--gray-bg);color:var(--muted);display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
  .item .pn{font-weight:600;flex:1}
  .item .nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:0 4px}.rm:hover{color:var(--red)}
  .small{font-size:12px;color:var(--muted);margin-top:4px}
  .tag{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:10px;background:#efe6fb;color:#7a3fb0;margin-left:6px}

  .steps{display:flex;flex-direction:column;gap:10px;margin:10px 0 16px}
  .step-c{border:1.5px solid var(--line);border-radius:12px;padding:12px;background:#fff;display:flex;gap:11px;align-items:center}
  .step-c.done{border-color:var(--green);background:#fbfefc}
  .step-n{width:28px;height:28px;border-radius:8px;background:var(--gray-bg);color:var(--muted);display:grid;place-items:center;font-weight:700;flex:none}
  .step-c.done .step-n{background:var(--green);color:#fff}
  .step-body{flex:1;min-width:0}.step-label{font-weight:600;font-size:14px}.step-meta{font-size:11px;color:var(--muted);margin-top:2px}
  .thumb{width:52px;height:52px;border-radius:9px;object-fit:cover;border:1px solid var(--line);cursor:pointer;flex:none}
  .filebtn{position:relative;overflow:hidden}.filebtn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
  .retake{font-size:11px;color:var(--orange);cursor:pointer;position:relative;overflow:hidden;display:inline-block}
  .retake input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
  .deadline{display:flex;align-items:center;gap:8px;background:var(--amber-bg);color:#8a5a00;border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:500;margin-bottom:12px}
  .deadline.late{background:var(--red-bg);color:#9b2b2b}
  .prog{height:6px;background:var(--gray-bg);border-radius:6px;overflow:hidden;margin:4px 0 12px}.prog>i{display:block;height:100%;background:var(--orange);transition:.3s}

  .badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
  .b-ok,.b-checked,.b-pass{background:var(--green-bg);color:var(--green)}
  .b-short,.b-fail{background:var(--red-bg);color:var(--red)}
  .b-over{background:var(--amber-bg);color:var(--amber)}
  .b-wait,.b-none{background:var(--gray-bg);color:var(--gray)}
  .b-pend2,.b-pending{background:var(--amber-bg);color:var(--amber)}
  .b-late{color:var(--red);background:var(--red-bg)}
  .b-type-open{background:#f3ecfb;color:#7a3fb0}.b-type-stock{background:#eaf0fb;color:#2f5bb7}.b-type-close{background:#fbeef0;color:#b03f63}.b-type-clean{background:#e6f5ef;color:#1F9D57}.b-type-cash{background:#e4f4ee;color:#0f8a6a}
  .b-urgent{background:var(--red-bg);color:var(--red)}.b-normal{background:var(--gray-bg);color:var(--muted)}

  .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
  table{width:100%;border-collapse:collapse;min-width:640px}
  thead th{background:#fafbfc;text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
  th.num,td.num{text-align:right}th.mid,td.mid{text-align:center}
  tbody td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
  tbody tr:last-child td{border-bottom:none}
  .grouphead th{background:#f2f4f8;color:var(--navy);text-align:center;font-weight:700}
  tr.clickable{cursor:pointer}tr.clickable:hover{background:#fafbfd}
  .cellbtn{border:none;background:none;cursor:pointer;font:inherit;padding:2px}
  .n-cell{font-variant-numeric:tabular-nums}
  .erp-in{width:88px;text-align:right;font-variant-numeric:tabular-nums;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:14.5px}
  .erp-in:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
  .note-in{width:100%;min-width:110px;border:1px solid transparent;background:transparent;padding:5px 7px;border-radius:7px;font-family:inherit;font-size:13.5px;color:var(--ink)}
  .note-in:hover{border-color:var(--line)}.note-in:focus{outline:none;border-color:var(--orange);background:#fff}
  .chk{width:19px;height:19px;accent-color:var(--orange);cursor:pointer}
  .diff{font-variant-numeric:tabular-nums;font-weight:600}
  .flag{color:var(--amber);font-size:12px;margin-left:5px;cursor:help}
  .pf{display:inline-flex;gap:6px}
  .pf button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
  .pf button.pass.on{background:var(--green);border-color:var(--green);color:#fff}
  .pf button.fail.on{background:var(--red);border-color:var(--red);color:#fff}
  .seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
  .seg button{flex:1;border:none;background:#fff;padding:9px 12px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--muted);border-left:1px solid var(--line)}
  .seg button:first-child{border-left:none}
  .seg button.on{background:var(--orange);color:#fff}

  .summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
  .stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
  .stat .k{font-size:12px;color:var(--muted);font-weight:500}.stat .v{font-size:23px;font-weight:700;margin-top:2px}
  .stat.ok .v{color:var(--green)}.stat.bad .v{color:var(--red)}.stat.wait .v{color:var(--gray)}

  .empty{padding:34px 20px;text-align:center;color:var(--muted)}.empty b{color:var(--ink);display:block;margin-bottom:4px;font-weight:600}
  .backlink{background:none;border:none;color:var(--orange);cursor:pointer;font-size:14px;font-weight:600;padding:4px 0;margin-bottom:6px;display:inline-flex;gap:6px}
  .rev-step{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start}
  .rev-step img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:pointer;flex:none}
  .rev-body{flex:1;min-width:0}
  .timeline{margin:8px 0 2px;border-left:2px solid var(--line);padding-left:16px;display:flex;flex-direction:column;gap:15px}
  .tl-item{position:relative}
  .tl-item .tl-dot{position:absolute;left:-23px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--orange);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
  .tl-item.done .tl-dot{background:var(--green)}
  .tl-head{font-weight:600;font-size:14px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
  .tl-meta{font-size:11.5px;color:var(--muted);margin:2px 0 4px}
  .tl-note{font-size:13.5px;white-space:pre-wrap}

  .chips{display:flex;flex-direction:column;gap:8px;margin:8px 0}
  .chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:#fcfcfd}
  .chip .g{width:22px;height:22px;border-radius:6px;background:var(--gray-bg);color:var(--muted);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
  .chip span.t{flex:1;font-weight:500}
  .chip .x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:17px}.chip .x:hover{color:var(--red)}
  .addrow{display:flex;gap:8px;margin-top:6px}
  .subtabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .subtab{padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--muted)}
  .subtab.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  .cnt{display:inline-block;background:var(--orange);color:#fff;border-radius:10px;font-size:11px;padding:0 6px;margin-left:5px;font-weight:700}
  .subtab.on .cnt{background:#fff;color:var(--navy)}

  .toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:16px}
  .saved{font-size:12.5px;color:var(--muted)}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:11px 20px;border-radius:10px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:80}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .hide{display:none!important}
  .note-box{background:var(--orange-soft);border:1px solid #f0d3c2;border-radius:10px;padding:11px 13px;font-size:12.5px;color:#8a4321;margin:16px 0}
  .lb{position:fixed;inset:0;background:rgba(15,20,35,.85);display:none;place-items:center;z-index:90;padding:20px}.lb.show{display:grid}.lb img{max-width:100%;max-height:90vh;border-radius:12px}
  @media(max-width:600px){.summary{grid-template-columns:repeat(2,1fr)}.brand small{display:none}}