/* Layout: navy rail (desktop) / bottom tab bar (phone) + working canvas of dense lists, boards and sheets */
:root{
  --bg:#eef2f7; --surface:#ffffff; --surface-2:#f6f8fb; --line:#dbe2ec; --line-2:#c7d1de;
  --fg:#13213a; --muted:#5a6880; --faint:#8a96aa;
  --brand:#1d5bd0; --brand-ink:#ffffff; --brand-soft:#e3ecfd; --brand-deep:#123f9a; --accent:#f7891e; --accent-soft:#fdeedd; --sky:#4fb3ff;
  --nav:#071743; --nav-2:#0f2a6b; --nav-fg:#b9c9ec; --nav-hi:#ffffff;
  --ok:#17804f; --ok-soft:#e1f3ea; --warn:#a96400; --warn-soft:#fcf0d9; --bad:#c0362e; --bad-soft:#fbe6e4;
  --c-won:#17804f; --c-commit:#1d5bd0; --c-best:#4fb3ff; --c-pipe:#bcc7d6;
  --shadow:0 1px 2px rgba(15,35,64,.06),0 6px 24px rgba(15,35,64,.08);
  --f-ui:"Inter","Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#06112b; --surface:#0d1b3d; --surface-2:#122348; --line:#1d3160; --line-2:#284077;
  --fg:#e3eaf4; --muted:#95a3b8; --faint:#6d7c93;
  --brand:#4fa8ff; --brand-ink:#04112e; --brand-soft:#132d5c; --brand-deep:#8cc8ff; --accent:#ff9a3c; --accent-soft:#3a2510; --sky:#4fb3ff;
  --nav:#030b26; --nav-2:#0b1f52; --nav-fg:#a3b6dc; --nav-hi:#ffffff;
  --ok:#45c08a; --ok-soft:#14322a; --warn:#e5a33d; --warn-soft:#3a2b12; --bad:#ef6a60; --bad-soft:#3d1b19;
  --c-won:#45c08a; --c-commit:#4fa8ff; --c-best:#2a6fc4; --c-pipe:#3b4f74;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#06112b; --surface:#0d1b3d; --surface-2:#122348; --line:#1d3160; --line-2:#284077;
  --fg:#e3eaf4; --muted:#95a3b8; --faint:#6d7c93;
  --brand:#4fa8ff; --brand-ink:#04112e; --brand-soft:#132d5c; --brand-deep:#8cc8ff; --accent:#ff9a3c; --accent-soft:#3a2510; --sky:#4fb3ff;
  --nav:#030b26; --nav-2:#0b1f52; --nav-fg:#a3b6dc; --nav-hi:#ffffff;
  --ok:#45c08a; --ok-soft:#14322a; --warn:#e5a33d; --warn-soft:#3a2b12; --bad:#ef6a60; --bad-soft:#3d1b19;
  --c-won:#45c08a; --c-commit:#4fa8ff; --c-best:#2a6fc4; --c-pipe:#3b4f74;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
  color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
*{box-sizing:border-box}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mono{font-family:var(--f-mono);font-size:.92em;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .faint{color:var(--faint)}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.3}

/* shell */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100%}
.side{background:var(--nav);color:var(--nav-fg);position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:18px 12px;padding-left:max(12px,env(safe-area-inset-left,0px));overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}

.brand b{color:var(--nav-hi);font-size:14px;display:block;line-height:1.2}
.brand small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--nav-fg)}
.nav-grp{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6f86a6;padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--nav-fg);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--nav-2);color:var(--nav-hi)}
.nav a.on{background:var(--nav-2);color:var(--nav-hi);box-shadow:inset 3px 0 0 #4b9bf5}
.nav a .cnt{margin-left:auto;font-size:10.5px;background:#c0362e;color:#fff;border-radius:99px;padding:0 7px;line-height:18px}
.side-foot{margin-top:auto;padding:12px 10px 0;font-size:11px;border-top:1px solid var(--nav-2)}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding-block:10px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.top h1{font-size:16.5px;font-weight:500}
.top .sp{flex:1}
.conn{font-size:11px;display:inline-flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}
.conn i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.conn.live i{background:var(--ok)} .conn.local i{background:var(--warn)}
.me-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:3px 10px 3px 4px;background:var(--surface-2);cursor:pointer;font-size:12px;white-space:nowrap;max-width:200px}
.me-chip span{overflow:hidden;text-overflow:ellipsis}
.av{width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;font-size:10.5px;font-weight:600;flex:none}
#view{padding-block:20px 40px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px;min-width:0}
.bnav{display:none}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);border-radius:8px;padding:7px 12px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;min-height:36px}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.pri:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--brand-ink)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}
.btn.danger[data-armed]{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.sm{padding:4px 9px;min-height:30px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.icon-btn{border:0;background:transparent;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.icon-btn:hover{background:var(--surface-2);color:var(--fg)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar .grow{flex:1 1 220px;min-width:0}
.search{position:relative;display:flex;align-items:center}
.search .ico{position:absolute;left:10px;color:var(--faint)}
.search input{width:100%;padding:8px 10px 8px 34px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);min-height:36px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:5px 11px;border-radius:7px;cursor:pointer;color:var(--muted);font-weight:500;font-size:12px}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
select.f,.toolbar select{border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:7px 10px;min-height:36px;max-width:100%}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:13px;font-weight:500}
.card-h .sp{flex:1}
.card-b{padding:14px 16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.eyebrow{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.page-h{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.page-h .sp{flex:1}
.page-h p{margin:2px 0 0;color:var(--muted)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile .k{font-size:11px;color:var(--muted);font-weight:500}
.tile .v{font-size:22.5px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.3}
.tile .s{font-size:11px;color:var(--muted)}
.tile.alert{border-color:var(--bad);background:var(--bad-soft)}
.meter{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:6px;border:1px solid var(--line)}
.meter i{display:block;height:100%;background:var(--brand)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:1px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);white-space:nowrap;line-height:18px}
.pill.blue{background:var(--brand-soft);color:var(--brand-deep);border-color:transparent}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.pill.solid{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.grade{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:11px;font-weight:600;background:var(--surface-2);border:1px solid var(--line-2)}
.grade.A{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.grade.B{background:var(--brand-soft);color:var(--brand-deep);border-color:transparent}

/* rows */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;padding:11px 16px;border-top:1px solid var(--line);cursor:pointer;min-width:0}
.row:first-child{border-top:0}
.row:hover{background:var(--surface-2)}
.row.head{cursor:default;background:var(--surface-2);font-size:11px;color:var(--muted);font-weight:500;padding-block:8px}
.row > *{min-width:0}
.row .t{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.row .sub{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .r{text-align:right}
.empty{padding:28px 16px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--fg);font-size:14px;margin-bottom:4px}
.empty .toolbar{justify-content:center;margin-top:12px}
.datehead{padding:8px 16px;font-size:11px;font-weight:500;color:var(--muted);background:var(--surface-2);border-top:1px solid var(--line);letter-spacing:.02em}

/* plans */
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.day{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 6px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:center}
.day small{font-size:10.5px;color:var(--muted)}
.day b{font-size:16px;font-variant-numeric:tabular-nums}
.day .dots{display:flex;gap:3px;min-height:6px}
.day .dots i{width:6px;height:6px;border-radius:50%;background:var(--brand)}
.day .dots i.done{background:var(--ok)}
.day.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-soft)}
.day.today small{color:var(--brand);font-weight:500}
.plan{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:12px 16px;border-top:1px solid var(--line);align-items:start}
.plan:first-child{border-top:0}
.plan .tm{font-family:var(--f-mono);font-weight:500;font-size:12px;padding-top:1px}
.plan .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.board{display:grid;grid-auto-flow:column;grid-auto-columns:250px;gap:10px;align-items:start}
.col{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:160px}
.col.over{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}

.ocard{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 10px;cursor:grab;display:flex;flex-direction:column;gap:3px;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.ocard:hover{border-color:var(--brand)}
.ocard.dragging{opacity:.4}
.ocard .n{font-weight:500;font-size:12px;line-height:1.35}
.ocard .c{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocard .f{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:3px}

/* chart */
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:10.5px;font-family:var(--f-ui)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.tablewrap{overflow-x:auto}
table.t{border-collapse:collapse;width:100%;font-size:12px;min-width:560px}
table.t th{text-align:left;font-size:11px;color:var(--muted);font-weight:500;background:var(--surface-2);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.t td.r,table.t th.r{text-align:right;font-variant-numeric:tabular-nums}
table.t tr:last-child td{border-bottom:0}
table.t tfoot td{font-weight:500;background:var(--surface-2)}

/* status chips */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:4px 11px;font-size:12px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-weight:500}
.chip b{font-size:10.5px;background:var(--surface-2);border-radius:99px;padding:0 6px;font-variant-numeric:tabular-nums}
.chip.on{background:var(--fg);color:var(--surface);border-color:var(--fg)}
.chip.on b{background:rgba(127,127,127,.3)}
.sla{font-size:11px;font-weight:500;white-space:nowrap}
.sla.bad{color:var(--bad)} .sla.warn{color:var(--warn)} .sla.ok{color:var(--ok)}

/* modal sheet */
#modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px}
#modal .scrim{position:absolute;inset:0;background:rgba(8,18,32,.5)}
.sheet{position:relative;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);width:min(720px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden}
.sheet.wide{width:min(980px,100%)}
.sheet-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.sheet-h h2{font-size:15px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-b{overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:16px;-webkit-overflow-scrolling:touch}
.sheet-f{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface-2)}
.sheet-f .sp{flex:1}
#mf{display:flex;flex-direction:column;gap:22px}
fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
fieldset legend{grid-column:1/-1;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--brand-deep);padding:0;margin-bottom:2px;float:left;width:100%}
fieldset legend + *{clear:both}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld > span{font-size:11.5px;color:var(--muted);font-weight:500}
.fld > span em{color:var(--bad);font-style:normal}
.fld.full{grid-column:1/-1}
.fld input,.fld select,.fld textarea,.picker input,.picker select{border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:8px 10px;min-height:38px;width:100%;min-width:0}
.fld textarea{min-height:76px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.fld .hint{font-size:11px;color:var(--faint)}
.picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:6px}
.quick{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding:12px;border:1px dashed var(--brand);border-radius:10px;background:var(--brand-soft)}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{cursor:pointer}
.checks input{position:absolute;opacity:0;pointer-events:none}
.checks span{display:inline-block;border:1px solid var(--line-2);border-radius:99px;padding:5px 11px;font-size:12px;background:var(--surface)}
.checks input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.checks input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.stepper label,.checks label{cursor:pointer;position:relative}
.stepper input{position:absolute;opacity:0;pointer-events:none}
.stepper span{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:8px;padding:6px 8px;background:var(--surface);height:100%}
.stepper b{font-family:var(--f-mono);font-size:11px}
.stepper small{font-size:10.5px;color:var(--muted);line-height:1.3}
.stepper input:checked + span{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.stepper .won input:checked + span{border-color:var(--ok);background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)}
.stepper .lost input:checked + span{border-color:var(--bad);background:var(--bad-soft);box-shadow:inset 0 0 0 1px var(--bad)}
.lines{display:flex;flex-direction:column;gap:6px}
.line{display:grid;grid-template-columns:var(--lc,2fr 1fr 1fr 1fr auto);gap:6px}
.line input,.line select{border:1px solid var(--line-2);border-radius:7px;padding:6px 8px;min-height:34px;background:var(--surface);min-width:0;width:100%}
.photos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.photos img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.photos input[type=file]{display:none}
.kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:6px 12px;font-size:12.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.dhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dhead h3{font-size:18.5px;font-weight:500}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:transparent;padding:8px 12px;cursor:pointer;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding-bottom:12px;position:relative}
.timeline li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand);margin-top:6px;box-shadow:0 0 0 3px var(--brand-soft)}
.timeline li::after{content:"";position:absolute;left:4px;top:18px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::after{display:none}
.note{padding:10px 12px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);font-size:12px}
.note.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--surface);padding:9px 16px;border-radius:9px;font-size:12.5px;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100% - 32px)}
#toast.show{opacity:1}
.welcome{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:center;padding:22px;background:linear-gradient(120deg,var(--brand-soft),var(--surface) 70%)}
.welcome h2{font-size:20.5px;font-weight:500;margin-bottom:6px}
.welcome ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}

.fab{display:none}

@media (max-width:1100px){.grid3{grid-template-columns:1fr}}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .top{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .top h1{font-size:16px}
  .conn b{display:none}
  #view{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .bnav{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .bnav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 6px;font-size:10.5px;color:var(--muted);text-decoration:none;font-weight:500;position:relative}
  .bnav a.on{color:var(--brand)}
  .bnav a .cnt{position:absolute;top:3px;left:calc(50% + 6px);font-size:10px;background:var(--bad);color:#fff;border-radius:99px;padding:0 5px;line-height:15px}
  .bnav .ico{width:22px;height:22px}
  .fab{display:grid;place-items:center;position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(72px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:16px;background:var(--brand);color:var(--brand-ink);border:0;box-shadow:var(--shadow);z-index:21;cursor:pointer}
  .fab .ico{width:24px;height:24px;stroke-width:2.2}
  .grid2{grid-template-columns:1fr}
  .row{grid-template-columns:minmax(0,1fr) auto;padding:11px 14px}
  .row .hm{display:none}
  .row.head{display:none}
  #modal{padding:0;place-items:end stretch}
  .sheet,.sheet.wide{width:100%;max-height:100%;height:100%;border-radius:0}
  .sheet-h{padding-top:max(10px,env(safe-area-inset-top,0px))}
  .sheet-f{padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  .sheet-b{padding:14px 16px}
  .welcome{grid-template-columns:1fr}
  .stepper{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv{grid-template-columns:110px minmax(0,1fr)}
}
@media (max-width:560px){
  fieldset,.quick,.more-b{grid-template-columns:minmax(0,1fr)}
  .picker{grid-template-columns:minmax(0,1fr)}
  .plan{grid-template-columns:52px minmax(0,1fr)}
  .plan .acts{grid-column:2;justify-content:flex-start}
  .day{padding:6px 2px} .day b{font-size:14px}
  .line{--lc:1fr 1fr!important}
  .conn{display:none}
  .me-chip span:not(.av){display:none}
  .me-chip{padding:3px}
  .tile .v{font-size:18.5px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ux: ข้อมูลเพิ่มเติม (พับเก็บ) + ป้ายตัวเลือก */
.more-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
details.more{grid-column:1/-1;border-top:1px dashed var(--line-2);padding-top:4px}
details.more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--brand);padding:6px 0;user-select:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:'+';display:inline-grid;place-items:center;width:18px;height:18px;border-radius:99px;background:var(--brand-soft);font-weight:600}
details.more[open]>summary::before{content:'−'}
details.more>.more-b{margin-top:8px}
.opt{display:grid;grid-template-columns:250px minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:440px}
.opt-nav{border-right:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;padding:6px;gap:1px}
.opt-nav button{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;background:transparent;text-align:left;padding:8px 12px;border-radius:7px;font-size:13px;color:var(--fg);cursor:pointer}
.opt-nav button:hover{background:var(--line)}
.opt-nav button.on{background:var(--surface);box-shadow:inset 3px 0 0 var(--brand);font-weight:500}
.opt-nav .n{font-size:11px;color:var(--muted);font-weight:400}
.opt-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.opt-h b{font-size:15px}
.opt-h span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.opt-rows{border:1px solid var(--line);border-radius:8px}
.opt-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:7px 12px;border-top:1px solid var(--line);font-size:13px;min-height:42px}
.opt-row:first-child{border-top:0}
.opt-row:hover{background:var(--surface-2)}
.opt-row .i{color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.opt-row select{border:1px solid var(--line-2);border-radius:7px;background:var(--surface);padding:3px 6px;font-size:12px}
.opt-row .del{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px}
.opt-row .del:hover{color:var(--bad);background:var(--line)}
.opt-empty{padding:16px;color:var(--muted);font-size:12px}
.opt-sel{display:none;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:8px 10px;min-height:40px;font-size:13px}
.addrow{display:flex;gap:6px}
.addrow input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:6px 10px;min-height:36px}
@media (max-width:900px){.opt{grid-template-columns:minmax(0,1fr)}.opt-nav{display:none}.opt-sel{display:block;width:100%}}
.stepper b{font-family:inherit;font-size:12px}
/* หน้าจ่ายงาน */
.dispatch{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:14px;align-items:start}

[data-techcol].over{outline:2px dashed var(--brand);outline-offset:2px}
@media (max-width:900px){.dispatch{grid-template-columns:minmax(0,1fr)}}
/* เซลล์เห็นเฉพาะงานขายของตัวเอง → ไม่ต้องมีตัวเลือกพนักงานขาย */
body[data-role=sales] #f-pirep,body[data-role=sales] #f-prep,body[data-role=sales] #f-vrep,body[data-role=sales] #f-fcrep{display:none}
/* รูปแบบธุรกิจ */
body.no-meters .m-meter,body.no-meth .m-meth,body.no-service [data-mod=service],body.no-sales [data-mod=sales],body.no-machines [data-mod=machines]{display:none!important}

.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.mod{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.mod input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--brand)}
.mod b{display:block;font-size:12.5px}.mod small{display:block;color:var(--muted);font-size:11px;margin-top:2px}

.addrow select{border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:4px 6px;min-height:34px}
/* ทะเบียนเครื่อง: บริษัท → เครื่อง */
.reg{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);min-height:460px}
.reg-nav{border-right:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;min-width:0}
.reg-nav-h{padding:10px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.reg-nav-h input{border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:7px 10px;min-height:36px;width:100%}
.reg-list{overflow:auto;max-height:620px;padding:6px;display:flex;flex-direction:column;gap:1px}
.reg-list button{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;background:transparent;text-align:left;padding:8px 12px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--fg)}
.reg-list button small{display:block;font-size:11px;color:var(--muted)}
.reg-list button .c{font-size:11px;color:var(--muted);flex:none}
.reg-list button:hover{background:var(--line)}
.reg-list button.on{background:var(--surface);box-shadow:inset 3px 0 0 var(--brand);font-weight:500}
.reg-body{padding:16px 20px;min-width:0;display:flex;flex-direction:column;gap:14px}
.reg-head{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.reg-pick{display:flex;flex-direction:column;gap:1px;max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px}
.reg-pick button{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--fg)}
.reg-pick button small{display:block;font-size:11px;color:var(--muted)}
.reg-pick button:hover{background:var(--surface-2)}
@media (max-width:900px){.reg{grid-template-columns:minmax(0,1fr)}.reg-nav{border-right:0;border-bottom:1px solid var(--line)}.reg-list{max-height:240px}.reg-body{padding:14px}}
/* หน้าตั้งค่า */
.set{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
.set-nav{position:sticky;top:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 0 12px;display:flex;flex-direction:column}
.set-nav-h{font-size:20.5px;font-weight:500;color:var(--muted);padding:8px 18px 14px}
.set-g{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:10px 18px;font-size:13px;color:var(--fg);cursor:pointer}
.set-g .ico{width:17px;height:17px;color:var(--muted);flex:none}
.set-g span{flex:1}
.set-g:hover{background:var(--surface-2)}
.set-g.on,.set-g.cur{font-weight:500}.set-g.on .ico,.set-g.cur .ico{color:var(--brand)}
.set-g.on{background:var(--surface-2)}
.set-g .chev{width:15px;height:15px;transition:transform .15s;fill:none;stroke:currentColor;stroke-width:2}
.set-grp.open .chev{transform:rotate(90deg)}
.set-items{display:none;flex-direction:column;padding:2px 0 6px}
.set-grp.open .set-items{display:flex}
.set-items button{border:0;background:transparent;text-align:left;padding:7px 18px 7px 45px;font-size:12.5px;color:var(--muted);cursor:pointer}
.set-items button:hover{color:var(--fg);background:var(--surface-2)}
.set-items button.on{color:var(--fg);font-weight:500;background:var(--surface-2);box-shadow:inset 3px 0 0 var(--brand)}
.set-main{min-width:0;max-width:880px;display:flex;flex-direction:column;gap:14px}
.set-head{display:flex;align-items:center;gap:12px;min-height:44px;margin-bottom:2px}
.set-head h2{font-size:22.5px;font-weight:500;color:var(--brand)}
.set-head .sp{flex:1}
.set-sel{display:none;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:8px 10px;min-height:42px;font-size:13px}
.set-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 18px}
.set-row{display:flex;align-items:flex-start;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.set-card > .set-row:first-child{border-top:0}
.set-txt{flex:1;min-width:0}
.set-txt > b{display:block;font-size:13.5px;font-weight:500}
.set-txt p{margin:3px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6;max-width:600px}
.set-ctl{flex:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.set-ctl select,.set-line input:not([type=checkbox]){border:1px solid var(--line-2);border-radius:7px;background:var(--surface);padding:6px 10px;min-height:36px;font-size:13px;min-width:0}
.set-ctl select{min-width:200px;max-width:320px}
.set-val{font-size:13px;color:var(--muted)}
.set-sub{background:var(--surface-2);border-radius:8px;padding:8px 16px;margin:0 0 14px;display:flex;flex-direction:column}
.set-line{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:13px}
.set-line > span:first-child{flex:1;min-width:0}
.set-line > input{width:240px}
.set-line.stg > .pill{flex:none;width:58px;justify-content:center}
.set-line.stg > input{flex:1;width:auto}
.set-line .pct{display:flex;align-items:center;gap:6px;color:var(--muted);flex:none}
.set-line .pct input{width:76px}
.set-cap{font-size:12px;font-weight:500;color:var(--muted);margin:8px 2px -4px}
.sw{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:99px;background:var(--line-2);transition:background .15s}
.sw span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw input:checked + span{background:var(--brand)}
.sw input:checked + span::after{transform:translateX(18px)}
.sw input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.set-opt{padding:0 0 14px}
.set-opt .opt{display:block;border:0;min-height:0}
.set-opt .opt-nav,.set-opt .opt-sel,.set-opt .opt-h{display:none!important}
.set-opt .opt-body{padding:0}
.set-card .rows{margin:0 -18px}
@media (max-width:900px){.set{grid-template-columns:minmax(0,1fr);gap:12px}.set-nav{display:none}.set-sel{display:block}
 .set-head h2{font-size:18.5px}.set-row{flex-wrap:wrap}.set-ctl{width:100%;justify-content:flex-start}.set-ctl select{flex:1}
 .set-line{flex-wrap:wrap}.set-line > input{width:100%}.set-line.stg{flex-wrap:nowrap}.set-card{padding:4px 14px}.set-card .rows{margin:0 -14px}}
/* ลางาน */
.rows.lv .row{--cols:minmax(0,1fr) auto auto;cursor:default}
.lv-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lv-part{display:inline-flex}
.lv-part label{display:flex;align-items:center;cursor:pointer}
.lv-part input{position:absolute;opacity:0;pointer-events:none}
.lv-part span{padding:6px 14px;border-radius:7px;font-size:13px;color:var(--muted)}
.lv-part input:checked + span{background:var(--surface);color:var(--fg);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.lv-part input:disabled + span{opacity:.4;cursor:not-allowed}
.lv-part input:focus-visible + span{outline:2px solid var(--brand)}
.lvcal{padding:0 12px 12px}
.lvcal-h,.lvcal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.lvcal-h div{font-size:11px;color:var(--muted);text-align:center;padding:6px 0}
.lvd{min-height:84px;border:1px solid var(--line);border-radius:8px;padding:5px;display:flex;flex-direction:column;gap:3px;min-width:0;background:var(--surface)}
.lvd .n{font-size:11px;color:var(--muted)}
.lvd.off{background:var(--surface-2)}
.lvd.out{opacity:.45}
.lvd.today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.lvchip{font-size:10.5px;line-height:1.3;padding:2px 6px;border-radius:5px;background:var(--accent-soft);color:#8a4b0c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvchip.pending{background:transparent;border:1px dashed var(--accent);color:var(--muted)}

.fl-track{position:relative;cursor:copy;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:calc(100% / 13) 100%}
.fl-track:hover{background-color:var(--surface-2)}

/* แพ็คเกจ */
.pkg{padding:16px 18px}
.pkg-h{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.pkg-h b{display:block;font-size:20.5px;font-weight:500;margin-top:2px}
.pkg-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.pkg-g > div{background:var(--surface-2);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.pkg-g .k{font-size:11.5px;color:var(--muted)}.pkg-g .v{font-size:18.5px;font-weight:500}.pkg-g .s{font-size:11.5px;color:var(--muted)}
.bar{height:6px;border-radius:9px;background:var(--line);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:9px}.bar i.full{background:var(--bad)}
.set-card .row.on{background:var(--brand-soft)}
.set-card.flush{padding:0;overflow:hidden}.set-card.flush .rows{margin:0}
.set-ctl input{border:1px solid var(--line-2);border-radius:7px;background:var(--surface);padding:6px 10px;min-height:36px;font-size:13px;min-width:0}
.plan-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:#8a4b0c;font-size:13px}
.plan-banner.bad{background:#fde8e8;color:#9b1c1c}
.plan-banner .ico{flex:none}.plan-banner span{flex:1}
.signup-cta{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:12px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
#signupf{display:flex;flex-direction:column;gap:12px;width:min(420px,100%)}
.login{overflow-y:auto}.login .fld select{width:100%}
@media (max-width:900px){.set-ctl input{flex:1}.lvd{min-height:58px;padding:3px}.lvchip{font-size:10px;padding:1px 4px}.rows.lv .row{grid-template-columns:minmax(0,1fr) auto}.lv-act{grid-column:1/-1;justify-content:flex-start}}
/* หน้างานบริการรวม */
img.av{object-fit:cover;background:var(--line);padding:0}
.av.lg{width:34px;height:34px;font-size:12px}.av.xl{width:64px;height:64px;font-size:18.5px}
.av-edit{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@keyframes urgblink{0%,49%{opacity:1}50%,100%{opacity:.25}}
.urgent-tag{display:inline-block;background:var(--bad);color:#fff;font-weight:600;font-size:10.5px;letter-spacing:.04em;padding:2px 8px;border-radius:999px;animation:urgblink 1s linear infinite;white-space:nowrap}

@media (prefers-reduced-motion:reduce){.urgent-tag{animation:none}}
.cgrade{display:inline-block;white-space:nowrap;font-size:10.5px;font-weight:600;padding:0 6px;border-radius:6px;background:var(--brand-soft);color:var(--brand-deep)}
.cgrade.gA{background:var(--bad-soft);color:var(--bad)}.cgrade.gB{background:var(--warn-soft);color:var(--warn)}.cgrade.gC{background:var(--brand-soft);color:var(--brand-deep)}.cgrade.gD{background:var(--line);color:var(--muted)}

.svc{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.svc-main{display:flex;flex-direction:column;gap:14px;min-width:0}.svc-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.kpis2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi2{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.kpi2 .ki{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}.kpi2 .ki .ico{width:22px;height:22px}
.k-all .ki{background:var(--brand)}.k-prog .ki{background:var(--ok)}.k-wait .ki{background:var(--warn)}.k-done .ki{background:var(--ok)}
.kpi2 .kt{display:block;font-size:12px;color:var(--muted)}.kpi2 b{display:block;font-size:24px;line-height:1.2}
.kpi2 .d{display:block;font-size:11px;color:var(--muted)}.kpi2 .d.up{color:var(--ok)}.kpi2 .d.down{color:var(--bad)}.kpi2 .kc{display:block;font-size:10.5px;color:var(--faint,var(--muted))}
.svc-list{padding:0;overflow:hidden}
.svc-tb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 14px 6px}.svc-tb h3{font-size:15px;margin:0 6px 0 0}
.svc-tb .search{min-width:200px}.svc-tb .dr{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:var(--surface)}
.svc-tb .dr input{border:0;background:transparent;padding:6px 0;min-width:0}.svc-note{font-size:11px;padding:0 14px 8px}
.svc-t{overflow-x:auto}
.svc-t .tr{display:grid;grid-template-columns:100px 82px minmax(130px,1.3fr) minmax(120px,1fr) minmax(140px,1.1fr) 122px 132px;gap:10px;align-items:center;padding:11px 14px;border-top:1px solid var(--line);cursor:pointer;min-width:900px}
.svc-t .tr.th{cursor:default;background:var(--bg);font-size:11.5px;font-weight:500;color:var(--muted)}
.svc-t .tr:not(.th):hover{background:var(--brand-soft)}.svc-t .tr.on{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.svc-t .tr.urg{box-shadow:inset 3px 0 0 var(--bad)}
.svc-t small{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-t .no{font-size:11.5px}.svc-t .dt{font-size:11.5px}.svc-t .cu b,.svc-t .te b{font-weight:500;font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-t .de{font-size:12px;min-width:0}.svc-t .cu,.svc-t .te span{min-width:0}
.svc-t .te{display:flex;gap:8px;align-items:center;min-width:0}.svc-t .te .av{width:32px;height:32px;font-size:11px}
.svc-t .te small.rj{color:var(--bad);white-space:normal}
.svc-t .st{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.svc-t .ac{display:flex;gap:4px;align-items:center}
.sbox{padding:14px}.sbox h3{font-size:14px;margin:0 0 10px}
.sum{display:flex;gap:14px;align-items:center}.donut{width:120px;height:120px;flex:none}
.donut .n{font-size:20.5px;font-weight:600;fill:var(--fg)}.donut .l{font-size:10px;fill:var(--muted)}
.sum ul{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:7px;font-size:12px}
.sum li{display:flex;align-items:center;gap:8px}.sum li b{margin-left:auto}.sum i,.svc-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.svc-map{height:240px;border-radius:10px;overflow:hidden;background:var(--bg);position:relative;z-index:0}
.map-off,.map-hint{position:absolute;inset:auto 8px 8px 8px;z-index:500;background:var(--surface);border-radius:8px;padding:6px 10px;font-size:11px;color:var(--muted)}
.map-off{inset:0;display:grid;place-items:center}
.svc-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11px;color:var(--muted)}.svc-legend span{display:flex;align-items:center;gap:5px}
.sd-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;font-size:12px}.sd-h .sp{flex:1}
.sd-kv{display:grid;grid-template-columns:18px 108px minmax(0,1fr);gap:6px;padding:6px 0;font-size:12px;align-items:start;border-top:1px solid var(--line)}
.sd-kv .ico{width:16px;height:16px;color:var(--muted);margin-top:2px}.sd-kv .k{color:var(--muted)}.sd-kv .v{min-width:0;overflow-wrap:anywhere}
.sd-kv .who{display:flex;gap:6px;align-items:center}
.sd-f{display:flex;flex-direction:column;gap:8px;margin-top:10px}.sd-f .btn{justify-content:center}
@media (max-width:1600px){.svc{grid-template-columns:minmax(0,1fr) 290px}.sd-kv{grid-template-columns:18px 92px minmax(0,1fr)}}
@media (max-width:1100px){.svc{grid-template-columns:minmax(0,1fr)}.svc-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
@media (max-width:700px){.svc-t .tr.th{display:none}.svc-t .tr{display:flex;flex-wrap:wrap;gap:6px 10px;min-width:0;padding:12px 14px}
.svc-t .no{order:1}.svc-t .dt{order:2;margin-left:auto;text-align:right;color:var(--muted)}.svc-t .dt small{display:inline;margin-left:4px}
.svc-t .cu{order:3;flex-basis:100%}.svc-t .de{order:4;flex-basis:100%}.svc-t .te{order:5;flex:1}.svc-t .st{order:6;align-items:flex-end}
.svc-t .ac{order:7;flex-basis:100%}.svc-t .ac .btn{flex:1;justify-content:center}}
@media (max-width:700px){.kpis2{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi2 b{font-size:20.5px}.kpi2 .kc{display:none}.svc-tb .search{flex-basis:100%}}
/* ข้อมูลพนักงาน · สิทธิ์วันลารายคน · No. เครื่อง · อาการ */
.emp-rows{--cols:minmax(0,2fr) minmax(0,1.3fr) 118px 112px 104px 58px}
.emp-tb{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 10px}
.emp-tb select,.svc-tb select{border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:7px 10px;min-height:36px;max-width:100%}.emp-tb .search{min-width:220px}
@media (max-width:900px){.emp-rows{--cols:minmax(0,1fr) 96px}.emp-rows .hm{display:none}}
.emp-who{display:flex;gap:10px;align-items:center;min-width:0}
.emp-quota{display:flex;flex-direction:column;gap:6px}
.eq-row{display:grid;grid-template-columns:minmax(90px,140px) 170px 92px minmax(0,1fr);gap:8px;align-items:center;font-size:12px}
.eq-row .pct input{width:108px}.eq-u{display:flex;gap:5px;align-items:center;white-space:nowrap}.eq-used{font-size:11px}
.eq-f{margin-top:2px}
.sym-picked{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.sym-picked:empty{display:none}
.sym-chip{display:inline-flex;align-items:center;gap:4px;background:var(--brand-soft);color:var(--brand-deep);border-radius:999px;padding:3px 4px 3px 10px;font-size:12px}
.sym-chip button{border:0;background:transparent;color:inherit;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0}
.sym-chip button:hover{background:var(--surface)}.sym-chip .ico{width:13px;height:13px}
.mno{white-space:nowrap}   /* No. เครื่อง: ตัวหนังสือธรรมดา (ไม่ใส่สี/ไม่เน้น) */
@media (max-width:700px){.eq-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}.eq-used{grid-column:1/-1}}
/* ปฏิทินรายเดือน · โอกาสขายแบบรายการ · จองรถ */
.mwrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
.mwrap.stack{grid-template-columns:minmax(0,1fr)}
.mcard{padding-bottom:10px}
.mcal{padding:0 12px}.mcal-h,.mcal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.mcal-h span{font-size:11px;color:var(--muted);text-align:center;padding:6px 0}
.mcal-g{gap:4px}
.mc{min-height:92px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.mc.out{opacity:.45}.mc.today{border-color:var(--brand)}.mc.on{box-shadow:0 0 0 2px var(--brand) inset;background:var(--brand-soft)}
.mc-b{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;width:100%;height:100%;min-height:92px;padding:5px 6px;cursor:pointer;position:relative}
.mc-b:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.mc-d{font-size:11.5px;font-weight:500}.mc.today .mc-d{color:var(--brand)}
.mc-e{display:block;font-size:10.5px;line-height:1.35;padding:1px 5px;border-radius:4px;background:var(--brand-soft);color:var(--brand-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-e.ok{background:var(--ok-soft);color:var(--ok)}.mc-e.warn{background:var(--warn-soft);color:var(--warn)}.mc-e.bad{background:var(--bad-soft);color:var(--bad)}
.mc-e.pend{outline:1px dashed var(--warn);outline-offset:-1px}
.mc-more{font-size:10.5px;color:var(--muted)}.mc-n{position:absolute;top:5px;right:6px;font-size:10.5px;color:var(--muted)}
.bk-leg{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted)}.bk-leg i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-left:6px}
.bk-leg i.ok{background:var(--ok-soft);border:1px solid var(--ok)}.bk-leg i.warn{background:var(--warn-soft);border:1px dashed var(--warn)}.bk-leg i.bad{background:var(--bad-soft);border:1px solid var(--bad)}
.bk7{--cols:minmax(0,1fr) auto}.bk-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bk-ban{display:flex;gap:10px;align-items:center}.bk-ban>div{flex:1}.bk-ban .ico{width:22px;height:22px;flex:none}
.pstages{display:flex;flex-wrap:wrap;gap:6px}
.pst{all:unset;box-sizing:border-box;cursor:pointer;flex:1 1 118px;min-width:108px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);display:flex;flex-direction:column;gap:1px}
.pst:hover{border-color:var(--brand)}.pst.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand) inset}
.pst-k{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pst-k b{color:var(--fg)}
.pst>b{font-size:18.5px;line-height:1.2}.pst small{font-size:11px;color:var(--muted)}
.pst.won.on{border-color:var(--ok);background:var(--ok-soft);box-shadow:0 0 0 1px var(--ok) inset}.pst.lost.on{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 0 0 1px var(--bad) inset}
.popp{--cols:minmax(0,2fr) 210px 64px 110px 120px 118px}
.pst-sel{width:100%;font-size:12px;padding:5px 6px}
.popp .late{color:var(--bad)}.popp .late small{display:block;font-size:10.5px}
@media (max-width:1100px){.mwrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.bk-leg{display:none}.mc,.mc-b{min-height:54px}.mc-e,.mc-more{display:none}.mc-b .mc-n{position:static;font-size:10.5px;color:var(--brand);font-weight:600}
 .mc-b:has(.mc-e)::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);margin-top:2px}
 .mcal{padding:0 6px}.mcal-g{gap:2px}.pstages{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.pst{flex:0 0 118px}.popp{--cols:minmax(0,1fr) auto}.popp .row .r:last-child{grid-column:1/-1}}
/* มือถือแนว Corporate */
:root{--navy:#13294b;--navy-2:#1d3a68;--m-page:#eef2f7;--m-shadow:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.06)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--navy:#0d1d37;--navy-2:#163058;--m-page:var(--bg);--m-shadow:0 1px 2px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--navy:#0d1d37;--navy-2:#163058;--m-page:var(--bg);--m-shadow:0 1px 2px rgba(0,0,0,.4)}
.m-acts,.bnav-gap{display:none}
@media (max-width:900px){
 body,.main{background:var(--m-page)}
 /* แถบหัว */
 .top{background:var(--navy);color:#fff;border-bottom:0;min-height:56px;box-shadow:0 2px 10px rgba(10,20,40,.18)}
 .top h1{color:#fff;font-size:16px;font-weight:500;letter-spacing:.01em}
 .top .me-chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
 .top .conn{color:rgba(255,255,255,.8)}
 /* หน้าหลัก: แถบต้อนรับสีกรมท่าต่อจากแถบหัว */
 body[data-route=home] #view>.page-h:first-child{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;margin:-20px -16px 0;padding:18px 16px 46px;border-radius:0 0 22px 22px}
 body[data-route=home] #view>.page-h:first-child h2{color:#fff}
 body[data-route=home] #view>.page-h:first-child .eyebrow,body[data-route=home] #view>.page-h:first-child p{color:rgba(255,255,255,.75)}
 body[data-route=home] #view>.page-h:first-child .btn:not(.pri){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
 body[data-route=home] #view>.page-h:first-child+*{margin-top:-46px;position:relative}
 /* การ์ด */
 .card,.kpi2,.set-card,.tile{border:0;border-radius:14px;box-shadow:var(--m-shadow)}
 .kpi2 .ki{border-radius:12px}
 .page-h h2{font-size:17.5px!important}
 /* ปุ่ม / ช่องกรอก */
 .btn{border-radius:10px;min-height:40px}.btn.sm{min-height:32px;border-radius:8px}
 .btn.pri{box-shadow:0 2px 6px rgba(29,91,208,.25)}
 .search,.toolbar select,.svc-tb select,.emp-tb select,input[type=search]{border-radius:10px}
 /* แท็บ / ตัวกรอง เป็นปุ่มแคปซูล */
 .seg{background:transparent;border:0;padding:0;gap:6px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
 .seg::-webkit-scrollbar{display:none}
 .seg button{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 14px;white-space:nowrap;color:var(--muted)}
 .seg button.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
 .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
 /* รายการงานบริการ: การ์ดแยกทีละงาน */
 .svc-list{background:transparent;box-shadow:none;overflow:visible}
 .svc-tb{background:var(--surface);border-radius:14px;box-shadow:var(--m-shadow);padding:12px;margin-bottom:4px}
 .svc-note{padding:6px 2px}
 .svc-t{overflow:visible}
 .svc-t .tr:not(.th){background:var(--surface);border:0;border-radius:14px;box-shadow:var(--m-shadow);margin-bottom:10px;border-left:4px solid var(--brand)}
 .svc-t .tr.urg{border-left-color:var(--bad);box-shadow:var(--m-shadow)}
 .svc-t .no{font-weight:600;color:var(--fg)}
 /* หน้าต่างรายละเอียด: หัวสีกรมท่าเหมือนหน้าแอป */
 .sheet-h{background:var(--navy);color:#fff;border-bottom:0;min-height:56px}
 .sheet-h h2{color:#fff;text-align:center;padding-right:36px}
 .sheet-h .icon-btn{color:#fff;background:transparent;border-color:transparent}
 .sheet-b{background:var(--m-page)}
 .sheet-b .card{background:var(--surface)}
 .sheet-f{box-shadow:0 -4px 14px rgba(16,24,40,.06);border-top:0}
 .sheet-f .btn.pri{flex:1;justify-content:center}
 /* ใบงาน: ปุ่มนำทาง / โทรหาลูกค้า */
 .m-acts{display:flex;flex-direction:column;gap:8px}
 .m-acts .btn{justify-content:center;min-height:46px;font-weight:500}
 .m-acts .btn.line{background:var(--surface);border:1.5px solid var(--brand);color:var(--brand)}
 /* เมนูล่าง + ปุ่ม + วงกลมตรงกลาง */
 .bnav{grid-template-columns:repeat(var(--n,6),minmax(0,1fr));border-top:0;box-shadow:0 -4px 18px rgba(16,24,40,.08);padding-top:2px}
 .bnav a{font-size:10px}.bnav a.on{color:var(--brand);font-weight:500}
 .bnav-gap{display:block}
 #fab.fab{left:50%;right:auto;transform:translateX(-50%);bottom:calc(26px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:var(--brand);color:#fff;border:4px solid var(--surface);box-shadow:0 6px 18px rgba(29,91,208,.38);z-index:21}
 #fab.fab .ico{width:26px;height:26px}
 /* เมนูเพิ่มเติม = หน้าโปรไฟล์ */
 body[data-route=more] #view{gap:12px}
 .m-prof{display:flex;gap:14px;align-items:center;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;margin:-20px -16px 0;padding:22px 18px 26px;border-radius:0 0 22px 22px}
 .m-prof .av.xl{width:68px;height:68px;font-size:20.5px;border:3px solid rgba(255,255,255,.85)}
 .m-prof span.av{background:#fff;color:var(--navy);display:grid;font-weight:600}
 .m-prof b{display:block;font-size:16.5px}.m-prof span{display:block;font-size:12px;color:rgba(255,255,255,.75)}
 .m-prof small{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:rgba(255,255,255,.85)}
 .m-prof small i{width:8px;height:8px;border-radius:50%;background:#9aa4b2}.m-prof small.on i{background:#34d399}
 .m-menu{padding:4px 0}
 .m-menu a{display:flex;align-items:center;gap:14px;padding:14px 16px;color:var(--fg);text-decoration:none;font-size:13.5px;border-bottom:1px solid var(--line)}
 .m-menu a:last-child{border-bottom:0}.m-menu a>span{flex:1}.m-menu a .ico{width:20px;height:20px;color:var(--navy-2)}
 .m-menu a .chev{width:16px;height:16px;color:var(--faint,var(--muted))}
 .m-menu a.out,.m-menu a.out .ico{color:var(--bad)}
 .m-ver{text-align:center;font-size:11px;color:var(--muted);margin:4px 0 0}
}
/* ฟอนต์ใหม่ */
b,strong,th,dt{font-weight:500}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.005em}
body{font-feature-settings:'cv11','ss01';-moz-osx-font-smoothing:grayscale}
.mono,code,kbd{font-family:var(--f-mono)}
/* หน้าโหลดบนมือถือ */
#splash{display:none}
@media (max-width:900px){
 #splash{display:flex;position:fixed;inset:0;z-index:1000;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(120% 80% at 50% 35%,#16306a 0%,#0b1f52 45%,#071743 100%);color:#fff;transition:opacity .45s ease,visibility .45s;padding-bottom:env(safe-area-inset-bottom,0px)}
 #splash.out{opacity:0;visibility:hidden}
 #splash.out .sp-logo{transform:scale(1.06)}
 .sp-mark{position:relative;width:112px;height:112px;display:grid;place-items:center}
 .sp-mark::before,.sp-mark::after{content:'';position:absolute;inset:-14px;border-radius:32px;border:1.5px solid rgba(120,170,255,.35);animation:spRing 2.2s ease-out infinite}
 .sp-mark::after{animation-delay:1.1s}
 .sp-logo{width:112px;height:112px;border-radius:26px;box-shadow:0 12px 34px rgba(0,0,0,.35);animation:spIn .7s cubic-bezier(.2,.8,.2,1) both;transition:transform .45s ease}
 .sp-name{text-align:center;animation:spUp .7s .15s cubic-bezier(.2,.8,.2,1) both}
 .sp-name b{display:block;font-size:19px;font-weight:500;letter-spacing:.02em}
 .sp-name span{display:block;font-size:12px;color:rgba(255,255,255,.65);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
 .sp-bar{width:132px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;animation:spUp .7s .3s both}
 .sp-bar i{display:block;width:40%;height:100%;border-radius:3px;background:linear-gradient(90deg,#4fa8ff,#9cc9ff);animation:spBar 1.2s ease-in-out infinite}
 .sp-msg{font-size:12px;color:rgba(255,255,255,.6);animation:spUp .7s .4s both}
 .sp-foot{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom,0px));font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.06em}
 @keyframes spIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
 @keyframes spUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
 @keyframes spRing{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
 @keyframes spBar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
 @media (prefers-reduced-motion:reduce){#splash *,#splash *::before,#splash *::after{animation:none!important}}
}
/* เตือน No. เครื่องซ้ำ */
.mno-warn{grid-column:1/-1;padding:10px 12px;border-radius:9px;background:#fff7e6;border:1px solid #f5c26b;color:#7a4b00;font-size:12.5px;line-height:1.5}
.mno-warn b{font-weight:600}
.mno-warn.err{background:#fdecec;border-color:#f1a7a7;color:#8a1c1c}
/* มือถือตามภาพตัวอย่าง */
.m-only{display:none}
@media (max-width:900px){
 :root{--m-nv1:#0f2656;--m-nv2:#0a1c44;--m-bg:#f3f5f9;--m-line:#e8ecf3;--m-t2:#5b6b85;
  --m-blue:#2563eb;--m-blue-s:#e8f0ff;--m-green:#16a34a;--m-green-s:#e6f6ec;--m-amber:#f59e0b;--m-amber-s:#fff4df;--m-red:#ef4444;--m-red-s:#fdecec}
 body,.main,.sheet-b{background:var(--m-bg)}
 .m-only{display:inline-flex}
 /* แถบหัว: เมนู · หัวข้อ/บรรทัดรอง · กระดิ่ง */
 .top{background:linear-gradient(180deg,var(--m-nv1),var(--m-nv2));gap:6px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px));min-height:58px;box-shadow:none}
 .top .conn,.top .me-chip{display:none}
 .top .icon-btn{background:transparent;border:0;color:#fff;width:40px;height:40px;position:relative}
 .top .icon-btn .ico{width:22px;height:22px}
 .m-ttl{display:flex;flex-direction:column;min-width:0;line-height:1.2}
 .m-ttl h1{font-size:17px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .m-sub{font-size:11.5px;color:rgba(255,255,255,.72)}.m-sub:empty{display:none}
 .m-bell .cnt{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--m-red);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;border:2px solid var(--m-nv1)}
 .m-bell .cnt[hidden]{display:none}
 body[data-route=more] .top{display:none}
 /* เมนูด้านข้าง (กดปุ่ม ☰) */
 .side{display:flex!important;position:fixed;left:0;top:0;bottom:0;width:min(300px,84vw);height:100%;z-index:45;transform:translateX(-105%);transition:transform .25s ease;box-shadow:8px 0 30px rgba(0,0,0,.25)}
 body.m-drawer .side{transform:none}
 .m-scrim{position:fixed;inset:0;z-index:44;background:rgba(6,14,34,.45)}
 .m-scrim[hidden]{display:none}
 #view{padding-top:14px}
 /* การ์ดต้อนรับ */
 .mhello{display:flex;gap:14px;align-items:center;background:var(--surface);border-radius:14px;padding:14px 16px;box-shadow:var(--m-shadow)}
 .mhello .av.lg{width:52px;height:52px;font-size:17px}
 .mhello>div b{display:block;font-size:16.5px;font-weight:600;color:var(--fg)}
 .mhello>div span{display:block;font-size:12.5px;color:var(--m-t2)}
 .mhello>div small{display:block;font-size:12px;color:var(--m-t2);margin-top:5px}
 /* สถิติ 2×2 */
 .mstats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .mstat{all:unset;box-sizing:border-box;cursor:pointer;background:var(--surface);border-radius:14px;padding:12px 14px 12px;box-shadow:var(--m-shadow);display:flex;flex-direction:column;gap:2px;min-height:104px}
 .mstat .ms-h{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--fg);font-weight:500}
 .ms-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
 .ms-ic .ico{width:19px;height:19px;stroke-width:2.2}
 .ms-ic.blue{background:var(--m-blue)}.ms-ic.green{background:var(--m-green)}.ms-ic.amber{background:var(--m-amber)}.ms-ic.red{background:var(--m-red)}
 .mstat b{font-size:25px;font-weight:600;line-height:1.1;margin:6px 0 0 43px;color:var(--fg)}
 .mstat small{font-size:11.5px;color:var(--m-t2);margin-left:43px}
 /* หัวข้อส่วน + รายการงาน */
 .msec{display:flex;flex-direction:column;gap:8px}
 .msec-h{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 0}
 .msec-h h3{font-size:15px;font-weight:600;margin:0;display:flex;gap:6px;align-items:center}
 .msec-h a{font-size:12.5px;color:var(--m-t2);text-decoration:none;display:inline-flex;align-items:center}
 .msec-h a .ico{width:14px;height:14px}
 .mcount{font-size:11px;background:var(--m-amber-s);color:#b45309;border-radius:9px;padding:1px 7px;font-weight:600}
 .mlist{background:var(--surface);border-radius:14px;box-shadow:var(--m-shadow);overflow:hidden}
 .mjob{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:11px;align-items:flex-start;width:100%;padding:13px 12px 13px 14px;border-bottom:1px solid var(--m-line)}
 .mjob:last-child{border-bottom:0}
 .mjob:active{background:var(--surface-2)}
 .mj-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;margin-top:1px}
 .mj-ic .ico{width:14px;height:14px;stroke-width:2.3}
 .mj-ic.blue{background:var(--m-blue)}.mj-ic.ok{background:var(--m-green)}.mj-ic.warn{background:var(--m-amber)}.mj-ic.bad{background:var(--m-red)}
 .mj-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
 .mj-h{display:flex;align-items:center;gap:8px;justify-content:space-between}
 .mj-h b{font-size:13.5px;font-weight:600;color:var(--fg);letter-spacing:.01em}
 .mj-t{font-size:14px;color:var(--fg);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mj-m{font-size:12px;color:var(--m-t2);display:flex;gap:5px;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mj-m .ico{width:13px;height:13px;flex:none}
 .mjob>.chev{width:16px;height:16px;color:#9aa6ba;align-self:center;flex:none}
 .mjob .urgent-tag{align-self:flex-start;font-size:10px}
 .mpill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:500;white-space:nowrap;flex:none}
 .mpill .ico{width:11px;height:11px;stroke-width:2.6}
 .mpill.blue{background:var(--m-blue-s);color:#1d4ed8}.mpill.warn{background:var(--m-amber-s);color:#b45309}
 .mpill.ok{background:var(--m-green-s);color:#15803d}.mpill.bad{background:var(--m-red-s);color:#c62828}
 .m-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 16px;color:var(--m-t2);text-align:center}
 .m-empty .ico{width:30px;height:30px;color:#b8c2d3}.m-empty b{font-size:14px;font-weight:500;color:var(--fg)}.m-empty span{font-size:12px}
 /* งานของฉัน */
 .mtabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px}
 .mtabs::-webkit-scrollbar{display:none}
 .mtabs button{all:unset;box-sizing:border-box;cursor:pointer;flex:none;padding:8px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--m-line);font-size:13px;color:var(--m-t2);white-space:nowrap}
 .mtabs button.on{background:var(--m-blue);border-color:var(--m-blue);color:#fff;font-weight:500}
 .msearch{display:flex;gap:8px;align-items:center}
 .msearch .search{flex:1;min-width:0;background:var(--surface);border:1px solid var(--m-line);border-radius:12px;min-height:44px}
 .msearch .icon-btn{width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--m-line);color:var(--m-t2);flex:none}
 .msearch .icon-btn.on{color:var(--m-blue);border-color:var(--m-blue);background:var(--m-blue-s)}
 .mfilt{background:var(--surface);border-radius:12px;padding:10px 12px;box-shadow:var(--m-shadow)}
 .mcalw{padding:10px}.mcal-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}.mcal-top b{font-size:14px;font-weight:600}
 .mcalw .mc{min-height:44px;cursor:pointer}.mcalw .mc-d{font-size:12px}
 .mcalw .mcj-n{display:block;margin:2px auto 0;width:18px;height:18px;border-radius:50%;background:var(--m-blue);color:#fff;font-size:10.5px;font-style:normal;display:grid;place-items:center}
 /* หน้าต่าง (sheet): ย้อนกลับ · หัวข้อชิดซ้าย · ปุ่มขวา */
 .sheet-h{background:linear-gradient(180deg,var(--m-nv1),var(--m-nv2));gap:4px;padding-left:6px;padding-right:6px}
 .sheet-h h2{text-align:left;padding-right:0;font-size:17px;font-weight:600;flex:1}
 .sheet-h .icon-btn .ico{width:22px;height:22px}
 .sheet-h .m-hmenu{position:relative}
 .m-pop{position:absolute;right:4px;top:44px;min-width:210px;background:var(--surface);border-radius:12px;box-shadow:0 12px 34px rgba(10,20,45,.22);padding:6px;z-index:5;display:flex;flex-direction:column}
 .m-pop[hidden]{display:none}
 .m-pop button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;font-size:14px;color:var(--fg)}
 .m-pop button .ico{width:18px;height:18px;color:var(--m-t2)}.m-pop button.bad,.m-pop button.bad .ico{color:var(--bad)}
 .sheet-f{background:var(--surface);gap:10px}
 .sheet-f .btn{min-height:48px;border-radius:12px;font-size:15px;font-weight:500;justify-content:center}
 .sheet-f .btn.pri,.sheet-f .btn.mout{flex:1}
 .sheet-f .btn.mout{background:var(--surface);border:1.5px solid var(--m-blue);color:var(--m-blue)}
 .sheet-f .btn.mfull{flex:1;width:100%}
 .m-td .sheet-b,.m-tu .sheet-b,.m-tf .sheet-b,.m-bellw .sheet-b{gap:12px}
 .m-td .sheet-b>*,.m-tu .sheet-b>*,.m-bellw .sheet-b>*,[data-pane]>*,#mf>*{flex-shrink:0}
 [data-pane]{display:flex;flex-direction:column;gap:12px}[data-pane][hidden]{display:none}
 .btn.pri{background:var(--m-blue);border-color:var(--m-blue)}
 .sheet-f .btn{justify-content:center!important}
 /* การ์ดในหน้ารายละเอียด */
 .mcd{background:var(--surface);border-radius:14px;box-shadow:var(--m-shadow);padding:14px 16px;display:flex;flex-direction:column;gap:7px}
 .mcd h4{margin:0 0 2px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
 .mcd h4 .ico{width:16px;height:16px;color:var(--navy-2)}
 .mt-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
 .mt-no{font-size:16.5px;font-weight:600;color:var(--fg)}
 .mt-head .mpill{font-size:12px;padding:3px 11px}
 .mt-title{margin:0;font-size:15.5px;font-weight:500;color:var(--fg)}
 .mt-li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--m-t2)}
 .mt-li .ico{width:16px;height:16px;flex:none;margin-top:1px;color:#55657f}
 .mt-li b{color:var(--fg);font-weight:500}.mt-li a{color:var(--m-blue)}
 .mt-li .sla{display:inline;margin-left:4px}
 .mstep{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
 .mstep li{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;color:var(--m-t2);position:relative}
 .mstep li::before{content:'';position:absolute;top:10px;right:50%;width:100%;height:3px;background:#dbe3ef;z-index:0}
 .mstep li:first-child::before{display:none}
 .mstep li.on::before{background:var(--m-blue)}
 .mstep i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e3e9f2;color:#9aa6ba;z-index:1;font-style:normal}
 .mstep i .ico{width:12px;height:12px;stroke-width:3}
 .mstep li.on i{background:var(--m-blue);color:#fff}.mstep li.on{color:var(--fg)}
 .mt-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
 .mt-tiles>*{all:unset;box-sizing:border-box;cursor:pointer;background:var(--surface);border-radius:12px;box-shadow:var(--m-shadow);display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 6px;font-size:12px;color:var(--fg);text-align:center}
 .mt-tiles .ico{width:20px;height:20px;color:var(--navy-2)}
 .mt-tiles [aria-disabled=true]{opacity:.45;pointer-events:none}
 .mt-mapw{padding:0;overflow:hidden}
 .mt-map{height:210px;background:#e7ecf3;position:relative}
 .mt-map .map-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--m-t2);font-size:12.5px;text-align:center;padding:16px}
 .mt-map .map-off .ico{width:26px;height:26px;color:#e5484d}
 .mt-pin svg{width:30px;height:40px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}.mt-pin path{fill:#e5484d}.mt-pin circle{fill:#fff}
 .mt-tip{background:#0f2656;color:#fff;border:0;border-radius:8px;padding:6px 10px;font-size:12px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
 .mt-tip::before{border-left-color:#0f2656!important}
 .mt-go{min-height:50px;border-radius:12px;justify-content:center;font-size:15.5px;font-weight:500}
 .mt-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .mt-tabs button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:10px;border-radius:10px;background:#e9eef6;color:var(--m-t2);font-size:13.5px}
 .mt-tabs button.on{background:var(--m-blue);color:#fff;font-weight:500}
 .mkv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 10px;margin:0;font-size:13px}
 .mkv dt{color:var(--m-t2)}.mkv dd{margin:0;color:var(--fg);overflow-wrap:anywhere}
 .mt-txt{margin:2px 0 0;font-size:13px;line-height:1.6;color:var(--fg);white-space:pre-wrap}
 .mt-items>div{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:6px 0;border-top:1px solid var(--m-line)}
 .mt-tech{display:flex;gap:10px;align-items:center}.mt-tech .av{width:36px;height:36px;font-size:12px}
 .mt-tech b{display:block;font-size:13.5px;font-weight:500}.mt-tech small{font-size:12px;color:var(--m-t2)}
 .mtl{list-style:none;margin:0;padding:0}
 .mtl li{display:flex;gap:12px;padding:0 0 14px;position:relative}
 .mtl li::before{content:'';position:absolute;left:5px;top:14px;bottom:0;width:2px;background:var(--m-line)}
 .mtl li:last-child::before{display:none}
 .mtl li>i{width:12px;height:12px;border-radius:50%;background:#b8c2d3;flex:none;margin-top:4px;z-index:1}
 .mtl li>i.blue{background:var(--m-blue)}.mtl li>i.ok{background:var(--m-green)}.mtl li>i.warn{background:var(--m-amber)}.mtl li>i.bad{background:var(--m-red)}
 .mtl b{display:block;font-size:13.5px;font-weight:500}.mtl small{font-size:11.5px;color:var(--m-t2)}.mtl p{margin:3px 0 0;font-size:12.5px;color:var(--fg)}
 /* อัปเดตสถานะงาน */
 .m-tu #mf,.m-tf #mf{gap:14px}
 .mfld{display:flex;flex-direction:column;gap:7px;position:relative}
 .mlab{font-size:13.5px;font-weight:500;color:var(--fg)}
 .mst-list{display:flex;flex-direction:column;gap:8px}
 .mst{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--m-line);border-radius:12px;padding:11px 14px;cursor:pointer}
 .mst input{position:absolute;opacity:0;pointer-events:none}
 .mst-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;background:#94a3b8}
 .mst-ic .ico{width:13px;height:13px;stroke-width:2.4}
 .mst-ic.blue{background:var(--m-blue)}.mst-ic.ok{background:var(--m-green)}.mst-ic.warn{background:var(--m-amber)}.mst-ic.bad{background:var(--m-red)}
 .mst-t{flex:1;font-size:14px;color:var(--fg)}
 .mst .rd{width:20px;height:20px;border-radius:50%;border:2px solid #c3ccda;flex:none;box-sizing:border-box}
 .mst:has(input:checked){border-color:var(--m-blue);background:var(--m-blue-s)}
 .mst:has(input:checked) .rd{border:6px solid var(--m-blue)}
 .mst:has(input:focus-visible){outline:2px solid var(--m-blue);outline-offset:2px}
 .mfld textarea{width:100%;border-radius:12px;padding:12px;min-height:96px;background:var(--surface)}
 .mcnt{position:absolute;right:12px;bottom:9px;font-size:11px;color:var(--m-t2)}
 .mres{background:var(--surface);border-radius:14px;padding:12px 14px!important;box-shadow:var(--m-shadow)}
 .mres[hidden]{display:none}
 .mphoto .fld>span{display:none}.mphoto .fld>span.mlab{display:block;margin-bottom:7px}
 .mphoto .photos,.m-tf .photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
 .mphoto .photos img,.m-tf .photos img{width:100%;aspect-ratio:1;height:auto;object-fit:cover;border-radius:12px}
 .mphoto .photos label.btn,.m-tf .photos label.btn{aspect-ratio:1;height:auto;min-height:0;flex-direction:column;gap:4px;border:1.5px dashed #c3ccda;border-radius:12px;background:var(--surface);color:var(--m-t2);font-size:12px;justify-content:center}
 .mphoto .photos label.btn .ico,.m-tf .photos label.btn .ico{width:24px;height:24px}
 .mmore{background:var(--surface);border-radius:12px;padding:10px 14px}.mmore summary{font-size:13.5px;cursor:pointer;color:var(--m-t2)}.mmore[hidden]{display:none}
 /* แจ้งงานใหม่ */
 .m-tf fieldset{background:var(--surface);border-radius:14px;box-shadow:var(--m-shadow);padding:14px!important}
 .m-tf fieldset>legend{font-size:14px;font-weight:600;color:var(--fg);float:left;width:100%;margin-bottom:10px;padding:0}
 .m-tf .fld>span{font-size:13.5px;font-weight:500;color:var(--fg)}
 .m-tf .fld input,.m-tf .fld select,.m-tf .fld textarea,.m-tu .fld input,.m-tu .fld select,.m-tu .fld textarea{border-radius:12px;min-height:46px}
 .m-tf fieldset:first-of-type>legend{order:-3} .m-tf label.fld:has(#f-jobType){order:-2}.m-tf label.fld:has(#f-priority){order:-1}
 /* เพิ่มเติม = โปรไฟล์ */
 body[data-route=more] #view{padding-top:0}
 .m-prof{position:relative;margin:0 -16px 4px;padding:calc(26px + env(safe-area-inset-top,0px)) 18px 26px;border-radius:0 0 22px 22px;background:linear-gradient(160deg,var(--m-nv1) 0%,#16367a 100%)}
 .m-prof .av.xl{width:78px;height:78px;font-size:24px}
 .m-gear{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top,0px));color:#fff;width:40px;height:40px;display:grid;place-items:center}
 .m-gear .ico{width:22px;height:22px}
 .m-grp{font-size:12px;color:var(--m-t2);margin:4px 4px -4px}
 .m-menu a .ico{color:var(--fg)}
 /* เมนูล่าง */
 .bnav a .ico{width:22px;height:22px}
 .bnav a.on{color:var(--m-blue)}
 #fab.fab{background:var(--m-blue);width:56px;height:56px}
 /* หน้าเข้าสู่ระบบ */
 .login.m-login{display:block;padding:0;background:var(--m-nv2);overflow:hidden}
 .m-hero{position:absolute;inset:0;display:flex;flex-direction:column;color:#fff;padding:calc(34px + env(safe-area-inset-top,0px)) 26px calc(28px + env(safe-area-inset-bottom,0px))}
 .m-hero-bg{position:absolute;inset:0;z-index:0}
 .m-hero-bg svg{width:100%;height:100%;display:block}
 .m-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,22,58,.92) 0%,rgba(8,22,58,.55) 30%,rgba(8,22,58,.15) 55%,rgba(6,16,42,.85) 82%,rgba(6,16,42,.96) 100%)}
 .m-hero>*:not(.m-hero-bg){position:relative;z-index:1}
 .m-hero-brand{display:flex;gap:12px;align-items:center}
 .m-hero-brand img{width:56px;height:56px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
 .m-hero-brand b{display:block;font-size:22px;font-weight:600;letter-spacing:.01em}
 .m-hero-brand small{display:block;font-size:12px;color:rgba(255,255,255,.75)}
 .m-hero-txt{margin-top:58px}
 .m-hero-txt h1{font-size:25px;line-height:1.4;font-weight:600;margin:0}
 .m-hero-txt p{margin:12px 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82)}
 .m-hero-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:16px}
 .m-hero-foot .btn{width:100%;min-height:52px;border-radius:12px;font-size:16px;font-weight:500;justify-content:center;background:var(--m-blue);box-shadow:0 8px 22px rgba(37,99,235,.45)}
 .m-hero-foot small{font-size:12px;color:rgba(255,255,255,.6)}
 .m-login #loginf{position:absolute;left:0;right:0;bottom:0;z-index:2;width:auto;border-radius:22px 22px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom,0px));max-height:92%;overflow-y:auto;box-shadow:0 -10px 40px rgba(0,0,0,.35);animation:mSheet .28s cubic-bezier(.2,.8,.2,1)}
 .m-login:not(.m-intro) .m-hero-foot{visibility:hidden}
 .m-login.m-intro #loginf{display:none}
 .m-login #loginf .brand{display:none}
 .m-login #loginf h2{font-size:19px;font-weight:600}
 .m-login #loginf .fld input{min-height:48px;border-radius:12px}
 .m-login #loginf button[type=submit]{min-height:50px;border-radius:12px;font-size:15.5px;justify-content:center}
 .m-fclose{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--surface-2);color:var(--m-t2);display:grid;place-items:center;cursor:pointer}
 .m-fclose .ico{width:18px;height:18px}
 @keyframes mSheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
@media (max-width:900px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]){--m-bg:var(--bg);--m-line:var(--line);--m-t2:var(--muted);--m-blue-s:rgba(37,99,235,.18);--m-green-s:rgba(22,163,74,.18);--m-amber-s:rgba(245,158,11,.18);--m-red-s:rgba(239,68,68,.18)}}
@media (max-width:900px){:root[data-theme="dark"]{--m-bg:var(--bg);--m-line:var(--line);--m-t2:var(--muted);--m-blue-s:rgba(37,99,235,.18);--m-green-s:rgba(22,163,74,.18);--m-amber-s:rgba(245,158,11,.18);--m-red-s:rgba(239,68,68,.18)}}
/* ช่างบริการไม่เห็นงานขาย */
body.hide-sales [data-sales],body.hide-sales [data-mod=sales]{display:none!important}
/* คลังข้อมูล */
.arch-seg{margin:2px 0 10px}.arch-rows .row{cursor:default}
/* No. เครื่อง + ตำแหน่ง / อาคาร / ชั้น */
.reg-mrows .mno-c{font-weight:500;font-variant-numeric:tabular-nums;color:var(--fg)}
.reg-mrows .loc3 .sub{font-size:11.5px;color:var(--faint,var(--muted));margin-top:1px}
@media (max-width:900px){.reg-mrows .row{grid-template-columns:44px minmax(0,1fr) auto}}
/* แบ่งหน้าทะเบียนเครื่อง */
.reg-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.reg-pager .sp{flex:1}
.reg-pager .btn{min-width:36px;justify-content:center}
.reg-pager .btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.reg-pager .gap{padding:0 2px;color:var(--muted)}
@media (max-width:900px){.reg-pager .muted{width:100%;text-align:center}.reg-pager .sp{display:none}.reg-pager{justify-content:center}}
/* ส่งออกทะเบียนเครื่อง */
.exp-sec{display:flex;flex-direction:column;gap:8px;padding:4px 0 12px;border-bottom:1px solid var(--line);margin-bottom:12px}.exp-sec:last-child{border-bottom:0;margin-bottom:0}.exp-sec>b{font-size:13.5px;font-weight:500}.exp-sec .seg{align-self:flex-start}.exp-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.exp-tools .search{flex:1;min-width:180px}.exp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}.exp-cu{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));max-height:260px;overflow:auto}.exp-ck{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:7px 10px;cursor:pointer;font-size:13px;min-width:0}.exp-ck[hidden]{display:none}.exp-ck>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.exp-ck input{width:17px;height:17px;flex:none;accent-color:var(--brand);margin:0}
/* ถังขยะ */
.trash-soon{color:var(--danger,#c62828)!important;font-weight:500}

/* หน้าเข้าสู่ระบบ (คอมพิวเตอร์) */
.login.d-login{display:grid;grid-template-columns:minmax(0,55.5fr) minmax(0,44.5fr);place-items:stretch;padding:0;background:#f3f7fd;overflow:hidden}
.dl-hero{position:relative;overflow:hidden;background:#0a2a66;color:#fff;display:flex;min-height:100vh}
.dl-photo{position:absolute;top:0;right:0;bottom:0;width:64%;background:url(../login-hero.jpg) center 30%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.dl-shade{position:absolute;inset:0;background:linear-gradient(90deg,#082560 0%,#0a2c6e 36%,rgba(11,48,118,.82) 50%,rgba(14,62,150,.25) 72%,rgba(14,62,150,.05) 100%)}
.dl-deco{position:absolute;pointer-events:none}
.dl-deco.a{left:0;top:0;width:150px;height:150px;background:linear-gradient(135deg,rgba(255,255,255,.18) 0 50%,transparent 50%)}
.dl-deco.b{right:-6%;bottom:-8%;width:58%;height:34%;background:linear-gradient(150deg,transparent 0 46%,rgba(41,121,255,.55) 46% 64%,transparent 64%)}
.dl-deco.c{right:-6%;bottom:-8%;width:58%;height:34%;background:linear-gradient(150deg,transparent 0 66%,rgba(120,180,255,.35) 66% 78%,transparent 78%)}
.dl-hero-in{position:relative;z-index:1;display:flex;flex-direction:column;padding:clamp(40px,7vh,84px) clamp(40px,5.6vw,96px);max-width:620px;gap:0}
.dl-brand{display:flex;align-items:center;gap:16px}.dl-brand img{width:64px;height:64px;border-radius:14px;background:#fff;padding:4px}
.dl-brand b{display:block;font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1.15}.dl-brand small{display:block;font-size:14.5px;color:#cfe0ff}
.dl-hero h1{margin:clamp(36px,6vh,64px) 0 0;font-size:clamp(28px,2.4vw,38px);font-weight:600;line-height:1.35}
.dl-lead{margin:18px 0 0;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:#e3ecff}
.dl-feat{list-style:none;margin:clamp(30px,5vh,48px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(16px,2.6vh,26px)}
.dl-feat li{display:flex;align-items:center;gap:16px}.dl-feat b{display:block;font-size:15.5px;font-weight:500}.dl-feat small{display:block;font-size:13px;color:#cfdcf5}
.dl-fi{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center}
.dl-fi svg{width:26px;height:26px;stroke:#fff;stroke-width:1.7}
.dl-tag{margin-top:auto;padding-top:40px;font-family:"Segoe Script","Brush Script MT","Comic Sans MS",cursive;font-style:italic;font-size:19px;line-height:1.45;color:#a9cbff;transform:rotate(-6deg);transform-origin:left bottom;width:max-content}
.dl-tag i{display:block;width:40px;height:3px;border-radius:2px;background:#4d8dff;margin-top:8px}
.dl-side{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;min-height:100vh;overflow-y:auto;
 background:linear-gradient(150deg,transparent 0 62%,rgba(29,91,208,.05) 62% 80%,transparent 80%),linear-gradient(210deg,transparent 0 30%,rgba(29,91,208,.04) 30% 44%,transparent 44%),#f3f7fd}
.login.d-login form.dl-card{width:min(536px,100%);padding:44px 48px 38px;border-radius:14px;gap:18px;box-shadow:0 10px 40px rgba(16,42,94,.10),0 1px 3px rgba(16,42,94,.06);background:#fff;color:#14213d}
.dl-card>.brand,.dl-card>h2,.dl-card>p.faint{display:none!important}
.dl-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:6px}
.dl-logo{display:flex;align-items:center;gap:14px;text-align:left}.dl-logo img{width:62px;height:62px;border-radius:14px}
.dl-logo b{display:block;font-size:30px;font-weight:600;color:#14213d;letter-spacing:-.01em;line-height:1.15}.dl-logo b span{color:#1d6ae5}
.dl-logo small{display:block;font-size:13px;color:#5b6b85}
.login .dl-head h2{margin:30px 0 0;font-size:25px;font-weight:600;color:#14213d}.login .dl-head p{margin:6px 0 0;font-size:15px;color:#5b6b85}
.dl-fld{position:relative}.dl-fld>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.login .dl-fld input{min-height:52px;border-radius:9px;padding-left:50px;font-size:15px;border:1px solid #d6deea;background:#fff;color:#14213d}
.login .dl-fld input:focus{border-color:#1d6ae5;box-shadow:0 0 0 3px rgba(29,106,229,.15)}
.dl-fld input[name=password]{padding-right:50px}
.dl-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:grid;pointer-events:none}.dl-ic svg{width:21px;height:21px;stroke:#4a5873}
.dl-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;width:38px;height:38px;border-radius:8px;display:grid;place-items:center;cursor:pointer}
.dl-eye svg{width:20px;height:20px;stroke:#6b7a93}.dl-eye:hover{background:#eef3fb}
.dl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-2px}
.dl-rem{display:flex;align-items:center;gap:10px;font-size:14px;color:#2b3a55;cursor:pointer}
.dl-rem input{width:20px;height:20px;margin:0;accent-color:#1d6ae5}
.dl-forgot{border:0;background:none;color:#1d6ae5;font-size:14px;cursor:pointer;padding:4px 0}.dl-forgot:hover{text-decoration:underline}
.dl-hint{margin:-8px 0 0;font-size:12.5px;color:#5b6b85;background:#f1f6fe;border-radius:8px;padding:8px 12px}
.login.d-login .dl-card button[type=submit]{min-height:52px;border-radius:9px;font-size:16px;justify-content:center;gap:10px;background:#1d6ae5;border-color:#1d6ae5}
.login.d-login .dl-card button[type=submit]:hover{background:#1559c9}
.dl-card button[type=submit] svg{width:19px;height:19px}
.dl-card .err:empty{min-height:0;margin:-9px 0}
.dl-card .signup-cta{margin-top:2px}
.dl-copy{margin:44px 0 0;font-size:12.5px;color:#7b88a0}
@media (max-width:1180px){.login.d-login{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dl-photo{width:76%}.login.d-login form.dl-card{padding:36px 32px 30px}}
@media (max-height:760px){.dl-feat{gap:12px}.dl-hero h1{margin-top:28px}.dl-feat{margin-top:24px}.dl-tag{padding-top:24px}}
/* สิทธิ์รายคน */
.pm-fs .pm-box{grid-column:1/-1;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pm-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.pm-top .pill{margin-left:auto}.pm-c{background:#fff4e0!important;color:#8a5300!important}
.pm-list{display:flex;flex-direction:column}
.pm-g{font-size:11.5px;color:var(--muted);padding:10px 14px 4px;font-weight:500}
.pm-row{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:9px 14px;border-top:1px solid var(--line)}
.pm-g+.pm-row{border-top:0}
.pm-ck{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;flex:1 1 220px;min-width:0}
.pm-ck input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--brand)}
.pm-ck-s{justify-content:space-between;flex-wrap:wrap}.pm-ck-s select{width:170px;min-height:32px;font-size:12.5px}
.pm-opts{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;margin-left:28px}
.pm-o{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.pm-o select{min-height:30px;font-size:12.5px;width:auto}
.pm-cb input{width:16px;height:16px;margin:0;accent-color:var(--brand)}.pm-cb span{color:var(--fg)}
.pm-ics{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:3px}.pm-ics svg{width:15px;height:15px;stroke:var(--brand)}
.pm-ics .pill{font-size:10px;padding:1px 6px}
@media (max-width:899px){.pm-opts{margin-left:28px;width:100%}}
/* brand: KP Inspire for DCRM */
.side{background:linear-gradient(180deg,#0a235e 0%,var(--nav) 45%)}
.brand-logo{width:44px;height:44px;border-radius:11px;flex:none;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.brand b{font-size:16.5px;letter-spacing:-.01em}
.brand small{color:var(--sky);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:12px}
.nav a.on{box-shadow:inset 3px 0 0 var(--accent)}
.fab{background:var(--accent);color:#fff}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* login */
.login{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:radial-gradient(1100px 560px at 15% 0%,#123a8c 0%,transparent 60%),linear-gradient(160deg,#0a235e 0%,#041034 72%)}
.login form{width:min(380px,100%);background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.login .brand{padding:0 0 4px;color:var(--fg)}
.login .brand b{color:var(--fg)}
.login .brand small{color:var(--brand)}
.login .brand-logo{width:60px;height:60px;border-radius:14px}
.login h2{font-size:16.5px;font-weight:500}
.login .fld input{width:100%}
.login .err{color:var(--bad);font-size:12px;min-height:1.2em}