:root{
  --primary: oklch(0.50 0.135 300);
  --primary-hover: oklch(0.43 0.14 300);
  --primary-soft: oklch(0.95 0.035 300);
  --primary-softer: oklch(0.975 0.02 300);
  --bg: oklch(0.985 0.006 300);
  --surface: oklch(0.998 0.003 300);
  --surface-2: oklch(0.972 0.01 300);
  --border: oklch(0.9 0.02 300);
  --border-strong: oklch(0.83 0.03 300);
  --text: oklch(0.26 0.03 300);
  --text-muted: oklch(0.52 0.025 300);
  --text-faint: oklch(0.66 0.02 300);
  --success: oklch(0.58 0.13 155);
  --success-soft: oklch(0.95 0.04 155);
  --warning: oklch(0.72 0.14 75);
  --warning-soft: oklch(0.96 0.05 80);
  --danger: oklch(0.57 0.19 25);
  --danger-soft: oklch(0.95 0.04 25);
  --info: oklch(0.6 0.11 270);
  --info-soft: oklch(0.95 0.035 270);
  --shadow-sm: 0 1px 2px oklch(0.4 0.05 300 / 0.07), 0 1px 3px oklch(0.4 0.05 300 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.4 0.06 300 / 0.1), 0 2px 4px oklch(0.4 0.05 300 / 0.06);
  --shadow-lg: 0 12px 32px oklch(0.4 0.07 300 / 0.15), 0 4px 8px oklch(0.4 0.05 300 / 0.07);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:"IBM Plex Sans Thai", system-ui, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; font-optical-sizing:auto;}
h1,h2,h3,h4{text-wrap:balance; line-height:1.25; font-weight:600}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit}
.tnum{font-variant-numeric:tabular-nums}
.hidden{display:none !important}
.logo-img{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.spin{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .6s linear infinite;display:inline-block;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}

.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:var(--space-lg);
  background:radial-gradient(1200px 600px at 80% -10%, var(--primary-soft), transparent 60%),radial-gradient(900px 500px at -10% 110%, oklch(0.94 0.04 320), transparent 55%),var(--bg);}
.auth-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-xl) var(--space-lg); animation:rise .55s var(--ease);}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.auth-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:var(--space-lg)}
.auth-logo{width:64px; height:64px; border-radius:50%; background:var(--surface); display:grid; place-items:center; overflow:hidden; box-shadow:var(--shadow-md); border:3px solid var(--primary);}
.auth-logo i{width:30px; height:30px; color:var(--primary)}
.auth-brand h1{font-size:1.35rem; letter-spacing:-0.01em}
.auth-brand p{color:var(--text-muted); font-size:0.9rem}
.auth-tab{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:var(--radius-sm); margin-bottom:var(--space-lg)}
.auth-tab button{flex:1; border:none; background:transparent; padding:9px; border-radius:6px; font-size:0.92rem; font-weight:500; color:var(--text-muted); transition:all .2s var(--ease);}
.auth-tab button.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm)}
.field{margin-bottom:var(--space-md)}
.field label{display:block; font-size:0.85rem; font-weight:500; margin-bottom:6px; color:var(--text)}
.field label .req{color:var(--danger)}
.field .hint{font-size:0.76rem; color:var(--text-faint); margin-top:5px; display:flex; justify-content:space-between}
.input{width:100%; padding:11px 13px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-size:0.95rem; background:var(--surface); color:var(--text); transition:border-color .15s, box-shadow .15s;}
.input:focus-visible{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
textarea.input{resize:vertical; min-height:84px}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md)}
.checkbox{display:flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--text-muted); margin-bottom:var(--space-md)}
.checkbox input{width:16px; height:16px; accent-color:var(--primary)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:var(--radius-sm); border:1px solid transparent; font-size:0.95rem; font-weight:600; transition:all .18s var(--ease);}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn i{width:18px; height:18px}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-block{width:100%}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:7px 12px; font-size:0.85rem}
.alert-msg{font-size:0.85rem; padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:var(--space-md);}
.alert-err{background:var(--danger-soft); color:var(--danger)}
.alert-ok{background:var(--success-soft); color:var(--success)}
.test-accts{margin-top:var(--space-lg); padding-top:var(--space-md); border-top:1px solid var(--border); font-size:0.78rem; color:var(--text-faint);}
.test-accts strong{color:var(--text-muted); display:block; margin-bottom:6px}
.test-accts code{font-family:ui-monospace,monospace; color:var(--primary); font-size:0.76rem}
.auth-foot{text-align:center; margin-top:var(--space-md); font-size:0.78rem; color:var(--text-faint)}

.app{display:none; min-height:100vh; grid-template-columns:248px 1fr}
.app.show{display:grid}
.sidebar{background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:var(--space-md); position:sticky; top:0; height:100vh;}
.side-brand{display:flex; align-items:center; gap:11px; padding:8px 6px 16px; border-bottom:1px solid var(--border); margin-bottom:var(--space-md)}
.side-brand .logo{width:42px; height:42px; border-radius:50%; background:var(--surface); display:grid; place-items:center; flex:none; overflow:hidden; border:2px solid var(--primary)}
.side-brand .logo i{width:22px;height:22px;color:var(--primary)}
.side-brand .txt h2{font-size:0.95rem; line-height:1.2}
.side-brand .txt span{font-size:0.74rem; color:var(--text-muted)}
.nav{display:flex; flex-direction:column; gap:2px; flex:1}
.nav button{display:flex; align-items:center; gap:11px; padding:10px 12px; border:none; background:transparent; border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.9rem; font-weight:500; text-align:left; transition:all .15s var(--ease); width:100%;}
.nav button i{width:19px; height:19px; flex:none}
.nav button:hover{background:var(--surface-2); color:var(--text)}
.nav button.active{background:var(--primary-soft); color:var(--primary-hover); font-weight:600}
.nav .badge{margin-left:auto; background:var(--danger); color:#fff; font-size:0.7rem; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 5px; font-weight:600}
.side-user{border-top:1px solid var(--border); padding-top:var(--space-md); display:flex; align-items:center; gap:10px}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--primary-soft); color:var(--primary-hover); display:grid; place-items:center; font-weight:600; flex:none; font-size:0.9rem}
.side-user .info{flex:1; min-width:0}
.side-user .info b{font-size:0.85rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-user .info span{font-size:0.74rem; color:var(--text-muted)}
.side-user .logout{border:none; background:transparent; color:var(--text-faint); padding:6px; border-radius:6px}
.side-user .logout:hover{background:var(--danger-soft); color:var(--danger)}
.side-user .logout i{width:18px; height:18px}

.main{padding:var(--space-xl); overflow-x:hidden}
.page-head{margin-bottom:var(--space-lg)}
.page-head h1{font-size:1.6rem; letter-spacing:-0.015em}
.page-head p{color:var(--text-muted); margin-top:4px; max-width:70ch}
.mobile-top{display:none}

.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-lg); box-shadow:var(--shadow-sm)}
.panel + .panel{margin-top:var(--space-lg)}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-md); gap:var(--space-md)}
.panel-head h3{font-size:1.05rem}
.panel-head .sub{font-size:0.8rem; color:var(--text-muted)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md)}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex; gap:10px; margin-top:var(--space-md)}

.uploader{border:2px dashed var(--border-strong); border-radius:var(--radius); padding:18px; text-align:center; cursor:pointer; transition:all .15s; background:var(--surface-2)}
.uploader:hover{border-color:var(--primary); background:var(--primary-softer)}
.uploader i{width:28px; height:28px; color:var(--text-faint); margin-bottom:6px}
.uploader p{font-size:0.85rem; color:var(--text-muted)}
.uploader small{font-size:0.74rem; color:var(--text-faint)}
.img-preview{position:relative; margin-top:12px; display:inline-block}
.img-preview img{max-width:220px; max-height:180px; border-radius:var(--radius-sm); border:1px solid var(--border); display:block}
.img-preview .rm{position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%; background:var(--danger); color:#fff; border:2px solid var(--surface); display:grid; place-items:center}
.img-preview .rm i{width:14px; height:14px}

.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-md); margin-bottom:var(--space-lg)}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-md) var(--space-lg); display:flex; align-items:center; gap:14px}
.stat .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none}
.stat .ic i{width:22px; height:22px}
.stat .n{font-size:1.7rem; font-weight:700; line-height:1; letter-spacing:-0.02em}
.stat .l{font-size:0.82rem; color:var(--text-muted); margin-top:3px}
.ic-warn{background:var(--warning-soft); color:oklch(0.5 0.13 70)}
.ic-ok{background:var(--success-soft); color:var(--success)}
.ic-err{background:var(--danger-soft); color:var(--danger)}
.ic-info{background:var(--info-soft); color:var(--info)}
.ic-pri{background:var(--primary-soft); color:var(--primary-hover)}
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg)}
.chart-box{position:relative; height:280px}

.tbl-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:0.86rem}
thead th{background:var(--surface-2); text-align:left; padding:11px 14px; font-weight:600; color:var(--text-muted); font-size:0.78rem; white-space:nowrap; border-bottom:1px solid var(--border)}
tbody td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid var(--border);cursor:pointer;display:block}
.badge-status{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:0.75rem; font-weight:600; white-space:nowrap}
.st-pending{background:var(--warning-soft); color:oklch(0.5 0.13 70)}
.st-assigned{background:var(--info-soft); color:var(--info)}
.st-progress{background:var(--primary-soft); color:var(--primary-hover)}
.st-done{background:var(--success-soft); color:var(--success)}
.st-reject{background:var(--danger-soft); color:var(--danger)}
.urg-low{color:var(--text-muted)}
.urg-mid{color:oklch(0.5 0.13 70); font-weight:500}
.urg-high{color:var(--danger); font-weight:600}
.icon-btn{border:1px solid var(--border-strong); background:var(--surface); border-radius:7px; padding:5px 7px; color:var(--text-muted); transition:all .15s}
.icon-btn:hover{background:var(--surface-2); color:var(--text)}
.icon-btn i{width:15px; height:15px; display:block}

.workflow{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:var(--space-lg)}
.wf-step{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; position:relative}
.wf-step .num{width:28px; height:28px; border-radius:50%; background:var(--surface-2); color:var(--text-muted); display:grid; place-items:center; font-weight:700; font-size:0.85rem; margin-bottom:8px}
.wf-step.on .num{background:var(--primary); color:#fff}
.wf-step h4{font-size:0.82rem; margin-bottom:3px}
.wf-step p{font-size:0.74rem; color:var(--text-muted); line-height:1.4}

.track-item{border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-md); margin-bottom:var(--space-md)}
.track-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px}
.track-top h4{font-size:0.95rem}
.track-meta{font-size:0.78rem; color:var(--text-muted); margin-top:2px}
.track-bar{display:flex; gap:4px; margin-top:12px}
.track-bar .seg{flex:1; height:6px; border-radius:99px; background:var(--surface-2)}
.track-bar .seg.fill{background:var(--primary)}
.track-bar .seg.done-fill{background:var(--success)}
.track-bar .seg.rej{background:var(--danger)}
.track-steps{display:flex; justify-content:space-between; margin-top:6px; font-size:0.68rem; color:var(--text-faint)}

.chat-layout{display:grid; grid-template-columns:280px 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; height:560px}
.chat-list{border-right:1px solid var(--border); overflow-y:auto; background:var(--surface)}
.chat-list .ci{padding:13px 15px; border-bottom:1px solid var(--border); cursor:pointer; display:flex; gap:11px; align-items:center; transition:background .15s}
.chat-list .ci:hover{background:var(--surface-2)}
.chat-list .ci.active{background:var(--primary-soft)}
.chat-list .ci .info{flex:1; min-width:0}
.chat-list .ci b{font-size:0.86rem; display:block}
.chat-list .ci span{font-size:0.76rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.chat-main{display:flex; flex-direction:column; background:var(--bg)}
.chat-head{padding:13px 18px; border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; gap:10px}
.chat-head b{font-size:0.92rem}
.chat-head span{font-size:0.76rem; color:var(--text-muted)}
.chat-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px}
.bubble{max-width:72%; padding:9px 13px; border-radius:14px; font-size:0.88rem; line-height:1.45; word-break:break-word}
.bubble .t{font-size:0.68rem; opacity:.6; margin-top:3px; display:block}
.bubble.them{align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:4px}
.bubble.me{align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:4px}
.chat-input{padding:13px; border-top:1px solid var(--border); background:var(--surface); display:flex; gap:9px}
.chat-input input{flex:1}
.chat-empty{flex:1; display:grid; place-items:center; color:var(--text-faint); text-align:center; padding:var(--space-lg)}
.chat-empty i{width:40px; height:40px; margin-bottom:10px; opacity:.4}

.ai-panel{background:linear-gradient(135deg, var(--primary-softer), var(--surface)); border:1px solid var(--border)}
.ai-insight{display:flex; gap:13px; padding:14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); margin-bottom:12px}
.ai-insight .ic{width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center}
.ai-insight h4{font-size:0.92rem; margin-bottom:3px}
.ai-insight p{font-size:0.84rem; color:var(--text-muted); line-height:1.5}
.ai-insight .tag{display:inline-block; font-size:0.72rem; font-weight:600; padding:2px 8px; border-radius:99px; margin-top:6px}
.tag-high{background:var(--danger-soft); color:var(--danger)}
.tag-mid{background:var(--warning-soft); color:oklch(0.5 0.13 70)}
.tag-low{background:var(--info-soft); color:var(--info)}

.qr-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); align-items:start}
.qr-box{text-align:center; padding:var(--space-lg)}
.qr-frame{width:220px; height:220px; margin:0 auto var(--space-md); border:2px dashed var(--border-strong); border-radius:var(--radius); display:grid; place-items:center; background:var(--surface-2); position:relative; overflow:hidden}
.qr-frame canvas{border-radius:6px}
.token-pill{font-family:ui-monospace,monospace; background:var(--primary-soft); color:var(--primary-hover); padding:8px 14px; border-radius:99px; font-weight:600; font-size:0.95rem; display:inline-block; letter-spacing:0.05em}

.empty{text-align:center; padding:var(--space-xl) var(--space-lg); color:var(--text-faint)}
.empty i{width:44px; height:44px; opacity:.4; margin-bottom:12px}
.empty p{font-size:0.9rem}

.toast-wrap{position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:10px; z-index:9999}
.toast{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:13px 16px; display:flex; align-items:center; gap:11px; font-size:0.88rem; min-width:260px; animation:toastIn .4s var(--ease)}
.toast i{width:20px; height:20px; flex:none}
.toast.ok i{color:var(--success)}
.toast.err i{color:var(--danger)}
.toast.info i{color:var(--info)}
@keyframes toastIn{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}}

dialog{border:none; border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow-lg); max-width:460px; width:92%; background:var(--surface); color:var(--text)}
dialog::backdrop{background:oklch(0.3 0.05 300 / 0.4); backdrop-filter:blur(2px)}
.modal-in{padding:var(--space-lg)}
.modal-in h3{font-size:1.15rem; margin-bottom:6px}
.modal-in > p{color:var(--text-muted); font-size:0.88rem; margin-bottom:var(--space-md)}
.modal-img{width:100%; max-height:200px; object-fit:contain; border-radius:var(--radius-sm); border:1px solid var(--border); margin-bottom:14px; background:var(--surface-2)}
#imgViewer{max-width:90vw; width:auto}
#imgViewer img{display:block; max-width:100%; max-height:80vh; border-radius:var(--radius-sm)}

@media (max-width:900px){
  .app.show{grid-template-columns:1fr}
  .sidebar{position:fixed; left:0; top:0; z-index:50; transform:translateX(-100%); transition:transform .3s var(--ease); width:248px; box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .mobile-top{display:flex; align-items:center; gap:12px; padding:14px var(--space-md); background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40}
  .mobile-top .logo{width:36px;height:36px;border-radius:50%;background:var(--surface);display:grid;place-items:center;overflow:hidden;border:2px solid var(--primary)}
  .mobile-top .logo i{width:18px;height:18px;color:var(--primary)}
  .mobile-top h2{font-size:0.95rem; flex:1}
  .burger{border:1px solid var(--border-strong); background:var(--surface); border-radius:8px; padding:7px; color:var(--text)}
  .burger i{width:20px;height:20px;display:block}
  .main{padding:var(--space-md)}
  .form-grid,.chart-grid,.qr-grid,.row-2{grid-template-columns:1fr}
  .workflow{grid-template-columns:1fr 1fr}
  .chat-layout{grid-template-columns:1fr; height:auto}
  .chat-list{max-height:200px}
  .chat-body{min-height:320px}
  .scrim{position:fixed; inset:0; background:oklch(0.3 0.05 300 / 0.4); z-index:45; display:none}
  .scrim.show{display:block}
}
@media(min-width:901px){.scrim{display:none}}