@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --primary:#1e5fb3; --primary-dark:#17498c;
  --ink:#1a2233; --ink-soft:#6b7688; --ink-faint:#8a93a3;
  --bg:#e9edf3; --surface:#ffffff; --surface-2:#f5f8fc;
  --border:#e2e7ef; --border-2:#e6eaf1; --border-3:#eef1f6;
  --success:#2f9e6f; --success-bg:#e7f5ee; --success-border:#c7e7d5;
  --warning:#d98a2b; --warning-bg:#fbf1e2; --warning-border:#f0d9b5;
  --danger:#c0492f; --danger-bg:#fbece9; --danger-border:#f0cfc7;
  --info-bg:#eef4fc; --info-border:#d3e2f6;
  --frame-dark:#0f1420;
  --font: 'IBM Plex Sans Thai','IBM Plex Sans',system-ui,sans-serif;
  --mono: 'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;}
.ic svg{width:100%;height:100%;display:block;}

/* ---------------- shell ---------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 24px; background:var(--surface);
  border-bottom:1px solid var(--border-2);
}
.topbar-left{display:flex; align-items:center; gap:12px;}
.topbar-logo{
  width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--primary),var(--primary-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;
}
.topbar-titles .eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary); font-weight:600;
}
.topbar-titles .title{font-weight:700; font-size:15px; line-height:1.3;}
.topbar-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:8px;}
.role-badge{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; white-space:nowrap; flex-shrink:0;
  padding:6px 12px; border-radius:999px; background:var(--info-bg); border:1px solid var(--info-border); color:var(--primary-dark);
}
.btn-ghost-sm{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:6px 11px;
}
.btn-ghost-sm:hover{color:var(--ink);}
.lang-toggle{
  display:flex; flex-shrink:0; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px; gap:2px;
}
.lang-toggle button{
  border:none; background:transparent; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;
  color:var(--ink-faint); font-family:var(--mono);
}
.lang-toggle button.active{background:var(--primary); color:#fff;}

.notice-strip{
  background:var(--warning-bg); border-bottom:1px solid var(--warning-border); color:#7a5417;
  font-size:12.5px; padding:7px 24px; text-align:center;
}

.stage{
  min-height:calc(100vh - 90px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:36px 20px 80px;
}

/* ---------------- phone device frame ---------------- */
.device{
  width:390px; height:844px; background:var(--frame-dark); border-radius:46px; padding:12px;
  box-shadow:0 24px 64px -12px rgba(15,20,32,.35); flex-shrink:0;
}
.screen{
  width:100%; height:100%; background:var(--bg); border-radius:34px; overflow:hidden; position:relative;
  display:flex; flex-direction:column;
}
.statusbar{
  display:flex; justify-content:space-between; align-items:center; padding:16px 26px 6px;
  font-family:var(--mono); font-size:14px; font-weight:600; flex-shrink:0;
}
.screen-scroll{flex:1; overflow-y:auto;}
.screen-scroll::-webkit-scrollbar{width:0;}

/* screen header (back + title) */
.scr-header{
  display:flex; align-items:center; gap:10px; padding:12px 18px 6px; flex-shrink:0;
}
.icon-btn{
  width:38px;height:38px;border-radius:11px;background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;
}
.icon-btn.plain{background:transparent;border:none;}
.scr-header .scr-title{font-weight:700; font-size:16.5px; flex:1;}

/* generic bits */
.tag-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;}
.card{background:var(--surface);border:1px solid var(--border-2);border-radius:14px;}
.section-title{font-size:13px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.02em;margin:0 0 8px;}
.hairline{height:1px;background:var(--border-2);border:none;margin:10px 0;}

/* buttons */
.btn{
  border-radius:12px; border:none; font-weight:700; font-size:14.5px; padding:13px 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:disabled{background:#a9bfdc; cursor:not-allowed;}
.btn-outline{background:var(--surface); color:var(--ink); border:1px solid var(--border);}
.btn-danger-outline{background:var(--surface); color:var(--danger); border:1px solid var(--danger-border);}
.btn-block{width:100%;}
.sticky-footer{
  flex-shrink:0; padding:12px 18px 18px; background:var(--surface); border-top:1px solid var(--border-2);
}

/* forms */
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.field input, .field textarea{
  width:100%; padding:11px 13px; border-radius:11px; border:1px solid var(--border); background:var(--surface);
  font-size:14px; color:var(--ink);
}
.field input:focus, .field textarea:focus{outline:2px solid var(--primary); outline-offset:1px;}
.field.err input{border-color:var(--danger);}
.field-err-msg{color:var(--danger); font-size:11.5px; margin-top:4px;}

/* tabs bottom bar */
.tabbar{
  display:flex; flex-shrink:0; background:var(--surface); border-top:1px solid var(--border-2); padding:8px 6px 12px;
}
.tabbar .tab-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
  color:var(--ink-faint); font-size:10.5px; font-weight:600; background:transparent; border:none; padding:4px;
}
.tabbar .tab-item.active{color:var(--primary); font-weight:700;}
.tabbar .tab-item .badge-dot{
  position:absolute; top:-2px; right:22%; width:15px; height:15px; border-radius:999px; background:var(--warning);
  color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; font-family:var(--mono);
}

/* grid tiles (products) */
.p-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:11px;}
.p-tile{aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center; padding:6px; position:relative;}
.p-tile-badge{position:absolute; top:7px; left:7px; font-size:9.5px; font-weight:700; padding:3px 7px; border-radius:999px; background:var(--warning); color:#fff;}
.p-tile-badge.premium{background:var(--primary-dark);}
.p-card{cursor:pointer;}
.p-card:hover{border-color:var(--primary);}

/* uom cards */
.uom-card{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:12px;
  border:2px solid var(--border); background:var(--surface); margin-bottom:9px; cursor:pointer;
}
.uom-card.selected{border-color:var(--primary); background:var(--info-bg);}
.uom-radio{width:20px;height:20px;border-radius:999px;border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.uom-card.selected .uom-radio{border-color:var(--primary); background:var(--primary); color:#fff;}

/* stepper */
.stepper{display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:11px; overflow:hidden;}
.stepper button{width:38px; height:38px; background:var(--surface-2); border:none; display:flex; align-items:center; justify-content:center; color:var(--ink);}
.stepper button.filled{background:var(--primary); color:#fff;}
.stepper .val{width:38px; text-align:center; font-weight:700; font-size:14px; font-family:var(--mono);}
.stepper.compact button{width:28px;height:28px;}
.stepper.compact .val{width:28px;font-size:12.5px;}
.stepper.amber button{background:var(--warning-bg); color:var(--warning);}
.stepper.amber button.filled{background:var(--warning); color:#fff;}

/* status chips */
.status-chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;}
.status-chip.grey{background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border);}
.status-chip.green{background:var(--success-bg); color:var(--success); border:1px solid var(--success-border);}
.status-chip.amber{background:var(--warning-bg); color:var(--warning); border:1px solid var(--warning-border);}
.status-chip.red{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-border);}
.status-chip.blue{background:var(--info-bg); color:var(--primary-dark); border:1px solid var(--info-border);}
.status-dot{width:8px;height:8px;border-radius:999px; flex-shrink:0;}

/* callouts */
.callout{border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.55; display:flex; gap:10px;}
.callout .ic{flex-shrink:0; margin-top:1px;}
.callout.info{background:var(--info-bg); border:1px solid var(--info-border); color:var(--primary-dark);}
.callout.warning{background:var(--warning-bg); border:1px solid var(--warning-border); color:#7a5417;}
.callout.danger{background:var(--danger-bg); border:1px solid var(--danger-border); color:#7a2c17;}
.callout.success{background:var(--success-bg); border:1px solid var(--success-border); color:#1f6b4c;}

/* chips row (categories/filters) */
.chip-row{display:flex; gap:7px; overflow-x:auto; padding-bottom:2px;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0; padding:7px 13px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--surface); border:1px solid var(--border); color:#4a5468;}
.chip.active{background:var(--primary); color:#fff; border-color:var(--primary);}

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:flex; align-items:center; gap:8px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}

/* ---------------- tablet / desktop-ish wholesaler panel ---------------- */
.panel{
  width:100%; max-width:1180px; height:760px; background:var(--surface); border-radius:20px; overflow:hidden;
  box-shadow:0 24px 64px -16px rgba(15,20,32,.22); border:1px solid var(--border-2);
  display:flex; flex-shrink:0;
}
.rail{
  width:88px; background:#f5f8fc; border-right:1px solid var(--border-2); flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:6px;
}
.rail-item{
  width:60px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px; border-radius:12px;
  color:var(--ink-faint); font-size:10px; font-weight:600; background:transparent; border:none;
}
.rail-item.active{background:#eaf1fb; color:var(--primary);}
.panel-body{flex:1; display:flex; min-width:0;}
.panel-col{border-right:1px solid var(--border-2); overflow-y:auto; flex-shrink:0;}
.panel-col:last-child{border-right:none;}
.panel-main{flex:1; overflow-y:auto; min-width:0;}
.panel-header{
  padding:16px 22px; border-bottom:1px solid var(--border-2); display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.panel-header .title{font-weight:700; font-size:17px;}
.list-row{
  padding:13px 16px; border-bottom:1px solid var(--border-3); cursor:pointer; display:flex; flex-direction:column; gap:4px;
}
.list-row:hover{background:var(--surface-2);}
.list-row.selected{background:var(--info-bg); border-left:3px solid var(--primary); padding-left:13px;}
.list-row .row-title{font-weight:700; font-size:13.5px;}
.list-row .row-sub{font-size:11.5px; color:var(--ink-soft);}

table.data-table{width:100%; border-collapse:collapse; font-size:13px;}
table.data-table th{
  text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--surface-2); padding:10px 14px; border-bottom:1px solid var(--border);
}
table.data-table td{padding:11px 14px; border-bottom:1px solid var(--border-3); vertical-align:middle;}

.kpi-tile{background:var(--surface-2); border:1px solid var(--border-2); border-radius:12px; padding:14px 16px;}
.kpi-tile .kpi-label{font-size:11px; color:var(--ink-soft); font-weight:600; margin-bottom:4px;}
.kpi-tile .kpi-value{font-size:20px; font-weight:700; font-family:var(--mono);}

/* ---------------- role select ---------------- */
.role-stage{width:100%; max-width:920px; padding:8px;}
.role-hero{text-align:center; margin-bottom:30px;}
.role-hero h1{font-size:30px; margin:8px 0 6px;}
.role-hero p{color:var(--ink-soft); font-size:15px;}
.role-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.role-card{
  background:var(--surface); border:1px solid var(--border-2); border-radius:18px; padding:22px 18px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 6px 20px -10px rgba(15,20,32,.12);
}
.role-card .role-icon{
  width:48px;height:48px;border-radius:13px; background:var(--info-bg); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.role-card h3{margin:0; font-size:18px;}
.role-card p{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.55; flex:1;}

/* ---------------- map ---------------- */
.map-canvas{
  position:relative; margin:0 18px; border-radius:16px; overflow:hidden; height:280px; flex-shrink:0;
  background:
    linear-gradient(#dbe4ee 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, #dbe4ee 1px, transparent 1px) 0 0/28px 28px,
    #eef2f7;
  border:1px solid var(--border);
}
.map-pin{
  position:absolute; width:26px; height:26px; border-radius:999px 999px 0 999px; transform:translate(-50%,-100%) rotate(45deg);
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,.25); border:2px solid #fff;
}
.map-pin .ic{transform:rotate(-45deg); color:#fff; width:12px; height:12px;}
.map-pin.served{background:var(--primary);}
.map-pin.available{background:var(--ink-faint);}
.map-pin.visited{background:var(--success);}
.map-popup{
  margin:10px 18px 0; background:var(--surface); border:1px solid var(--border-2); border-radius:12px; padding:12px 14px;
}

/* orders timeline (state machine) */
.order-progress{display:flex; align-items:center; gap:4px; margin:10px 0 4px;}
.order-progress .seg{flex:1; height:5px; border-radius:999px; background:var(--border-2);}
.order-progress .seg.done{background:var(--success);}
.order-progress .seg.current{background:var(--primary);}

@keyframes spin{to{transform:rotate(360deg);}}
.spin{animation:spin 1s linear infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.pulse{animation:pulse 2s ease-in-out infinite;}

@media (max-width:1240px){
  .panel{max-width:96vw;}
}
@media (max-width:760px){
  .role-grid{grid-template-columns:1fr;}
  .stage{padding:16px 0 0;}
}

/* ---------------- real mobile viewports: drop the fake-phone chrome,
   go edge-to-edge, let the page itself scroll, pin CTAs to the viewport ---------------- */
@media (max-width:600px){
  .topbar{
    flex-wrap:wrap; row-gap:8px; padding:10px 14px;
  }
  .topbar-left{min-width:0;}
  .topbar-titles .title{font-size:14px;}
  .topbar-titles .eyebrow{font-size:9.5px; white-space:nowrap;}
  .topbar-right{width:100%; justify-content:space-between;}
  .notice-strip{padding:6px 14px; font-size:11px; line-height:1.5;}

  .stage{padding:0;}
  .role-stage{padding:18px 16px;}
  .role-hero h1{font-size:23px;}

  .device{
    width:100%; max-width:100%; height:auto; min-height:calc(100vh - 130px);
    background:transparent; padding:0; border-radius:0; box-shadow:none;
  }
  .screen{
    border-radius:0; height:auto; min-height:calc(100vh - 130px);
  }
  .screen-scroll{overflow-y:visible; padding-bottom:4px;}
  .tabbar, .sticky-footer{
    position:sticky; bottom:0; z-index:20;
    box-shadow:0 -6px 16px -8px rgba(15,20,32,.18);
  }
  /* reserve space for the home-indicator / gesture bar on notched phones so the
     nav bar's icons/labels don't sit flush against (or under) it */
  .tabbar{padding-bottom:max(12px, env(safe-area-inset-bottom));}
  .sticky-footer{padding-bottom:max(18px, env(safe-area-inset-bottom));}
  .bottom-stack{position:sticky; bottom:0; z-index:20; box-shadow:0 -6px 16px -8px rgba(15,20,32,.18);}
  .bottom-stack > .sticky-footer, .bottom-stack > .tabbar{position:static; box-shadow:none;}
  .bottom-stack > .tabbar:last-child{padding-bottom:max(12px, env(safe-area-inset-bottom));}
  .statusbar{display:none;}

  .panel{
    flex-direction:column; width:100%; max-width:100%; height:auto; min-height:0;
    border-radius:0; box-shadow:none; border:none;
  }
  .rail{
    width:100%; flex-direction:row; overflow-x:auto; padding:8px 10px; gap:4px;
    border-right:none; border-bottom:1px solid var(--border-2);
  }
  .rail-item{flex-direction:row; flex-shrink:0; width:auto; padding:8px 12px;}
  .panel-body{flex-direction:column;}
  .panel-col{width:100% !important; max-height:280px; border-right:none; border-bottom:1px solid var(--border-2);}
  .kpi-tile{padding:11px 12px;}
}
@media (max-width:420px){
  .role-hero h1{font-size:21px;}
  .p-grid{gap:8px;}
}