:root {
  --bg: #f4f6fa;
  --card: #fff;
  --tx: #1e293b;
  --mu: #64748b;
  --bd: #e2e8f0;
  --pr: #2563eb;
  --prt: #fff;
  --sb: #0f172a;
  --ok: #15803d;
  --er: #dc2626;
  --hd: #f1f5f9;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0b1120;
    --card: #111a2e;
    --tx: #e2e8f0;
    --mu: #94a3b8;
    --bd: #24304a;
    --pr: #3b82f6;
    --sb: #060a14;
    --ok: #4ade80;
    --er: #f87171;
    --hd: #17223a;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0b1120;
  --card: #111a2e;
  --tx: #e2e8f0;
  --mu: #94a3b8;
  --bd: #24304a;
  --pr: #3b82f6;
  --sb: #060a14;
  --ok: #4ade80;
  --er: #f87171;
  --hd: #17223a;
  color-scheme: dark;
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font:
    14px/1.5 'Prompt',
    'Noto Sans Thai',
    system-ui,
    sans-serif;
}
.app {
  display: flex;
  min-height: 100vh;
}
nav {
  width: 200px;
  background: var(--sb);
  color: #e2e8f0;
  padding: 16px 10px;
  flex-shrink: 0;
}
nav h1 {
  font-size: 16px;
  margin: 0 6px 16px;
}
nav button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  margin-bottom: 2px;
}
nav button.on,
nav button:hover {
  background: var(--pr);
  color: #fff;
}
main {
  flex: 1;
  padding: 20px;
  min-width: 0;
}
.card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 {
  font-size: 15px;
  margin: 0 0 12px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px;
}
.kpi small {
  color: var(--mu);
}
.kpi b {
  display: block;
  font-size: 20px;
  margin-top: 2px;
}
input,
select,
button.b {
  font: inherit;
  color: var(--tx);
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 6px 9px;
}
button.b {
  cursor: pointer;
}
button.p {
  background: var(--pr);
  color: #fff;
  border-color: var(--pr);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.tw {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--bd);
  text-align: left;
  white-space: nowrap;
}
th {
  background: var(--hd);
  font-weight: 600;
}
.r {
  text-align: right;
}
.mu {
  color: var(--mu);
}
.ok {
  color: var(--ok);
}
.er {
  color: var(--er);
}
tfoot td {
  font-weight: 700;
}
.sec td {
  background: var(--hd);
  font-weight: 700;
}
td:has(> button.b) {
  position: sticky;
  right: 0;
  background: var(--card);
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 760px) {
  .app {
    flex-direction: column;
  }
  nav {
    width: 100%;
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding: 8px;
  }
  nav h1 {
    display: none;
  }
  nav button {
    width: auto;
    white-space: nowrap;
  }
}
#ov {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  overflow: auto;
  z-index: 50;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px
    calc(12px + env(safe-area-inset-bottom, 0px));
}
#ov .bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto 10px;
  max-width: 794px;
}
#paper {
  background: #fff;
  color: #111;
  width: 794px;
  margin: 0 auto;
  padding: 40px;
  font-size: 14px;
  line-height: 1.5;
}
#paper th,
#paper td {
  border-bottom: 1px solid #ddd;
  color: #111;
  white-space: normal;
  padding: 6px 8px;
  text-align: left;
}
#paper th {
  background: #f1f5f9;
}
#paper .r {
  text-align: right;
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }
  body {
    background: #fff !important;
    color: #111 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  nav,
  .no-print,
  button,
  .row:has(button),
  input[type='file'] {
    display: none !important;
  }
  body.printing-paper .app,
  body.printing-paper #ov .bar,
  body.printing-paper #sp {
    display: none !important;
  }
  body.printing-paper #ov {
    display: block !important;
  }
  body.printing-paper #paper {
    display: block !important;
  }
  body.printing-report #ov {
    display: none !important;
  }
  body.printing-report .app nav,
  body.printing-report .app header {
    display: none !important;
  }
  body.printing-report .app {
    display: block !important;
  }
  body.printing-report #main {
    display: block !important;
    padding: 0 !important;
  }
  body.printing-report #main .card {
    break-inside: avoid-page;
  }
  body.printing-report[data-print-tab='jrn'] #main > .card:first-of-type {
    display: none !important;
  }
  body.printing-report #main .print-toolbar {
    display: none !important;
  }
  .app {
    display: block;
    min-height: 0;
  }
  main {
    padding: 0 !important;
    width: 100% !important;
  }
  .card,
  .kpi {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #111 !important;
  }
  .tw {
    overflow: visible !important;
  }
  table {
    width: 100% !important;
    font-size: 10pt;
  }
  th,
  td {
    white-space: normal !important;
    color: #111 !important;
  }
  #ov {
    position: static !important;
    inset: auto !important;
    background: #fff !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #ov .bar,
  #sp {
    display: none !important;
  }
  #paper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11pt !important;
  }
  #paper table {
    font-size: 10pt;
  }
  #paper tr {
    break-inside: avoid;
  }
}
.sgl {
  display: flex;
  align-items: flex-end;
  gap: 2mm;
  white-space: nowrap;
  width: 100%;
}
.sgl i {
  flex: 1 1 auto;
  min-width: 8mm;
  border-bottom: 1px dotted #111;
  height: 1.1em;
}
.signs.stamp-next-to-sign {
  gap: 6mm !important;
  padding: 5mm 6mm !important;
}
.signs.stamp-next-to-sign .sign {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 62mm !important;
}

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 16px;
  color: #fff;
  background: linear-gradient(120deg, #0a2a6b, #1d5fd8 58%, #38a3f5);
}
.hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 94% -30%, rgba(255, 255, 255, 0.3) 0 24%, transparent 25%),
    radial-gradient(circle at 76% 140%, rgba(255, 255, 255, 0.18) 0 28%, transparent 29%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 16px);
}
.hero > * {
  position: relative;
}
.hero h2 {
  margin: 0;
  font-size: 20px;
  color: #fff;
}
.hero p {
  margin: 4px 0 0;
  opacity: 0.88;
}
.kr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}
.kt {
  background: var(--card);
  border: 1px solid var(--bd);
  border-left: 5px solid var(--k);
  border-radius: 12px;
  padding: 10px 14px;
}
.kt small {
  display: block;
  color: var(--mu);
}
.kt b {
  display: block;
  font-size: 19px;
  color: var(--k);
}
.kt span {
  color: var(--mu);
  font-size: 12px;
}
.stt thead th {
  background: linear-gradient(#1d4ed8, #1e3a8a);
  color: #fff;
  text-align: center;
  font-weight: 600;
  border-bottom: 0;
}
.stt thead th.g1,
.stt thead th.g2,
.stt thead th.g3 {
  background: linear-gradient(#1d4ed8, #1e3a8a);
}
.stt {
  border: 1px solid #bcd3ea;
  border-collapse: collapse;
}
.stt thead th {
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}
.stt thead th.g1,
.stt thead th.g2,
.stt thead th.g3 {
  border-left: 2px solid #fff !important;
  border-right: 2px solid #fff !important;
}
.stt td {
  border-right: 1px solid #dbe5f5 !important;
}
.stt td:last-child {
  border-right: 0 !important;
}
.stt tbody td,
.stt tfoot td {
  border-bottom: 1px solid #dbe5f5 !important;
}
@media print {
  .stt thead th {
    border: 1px solid #9bbbe8 !important;
  }
  .stt thead th.g1,
  .stt thead th.g2,
  .stt thead th.g3 {
    border-left: 2px solid #1e3a8a !important;
    border-right: 2px solid #1e3a8a !important;
  }
}
.stt tbody tr:nth-child(even) td {
  background: rgba(37, 99, 235, 0.05);
}
.stt tr.op td {
  background: rgba(37, 99, 235, 0.13);
  font-weight: 600;
}
.stt tr.vd td {
  text-decoration: line-through;
  opacity: 0.5;
}
.stt tfoot td {
  background: rgba(37, 99, 235, 0.13);
}
.sbar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 7px 12px;
  margin: 0 0 10px;
  background: rgba(37, 99, 235, 0.09);
  border-radius: 10px;
}
.sbar small {
  color: var(--mu);
}
@media print {
  .hero {
    background: #1e3a8a !important;
    color: #fff !important;
  }
  .hero * {
    color: #fff !important;
  }
  .kt {
    break-inside: avoid;
    background: #fff !important;
  }
  .stt thead th {
    background: #dbeafe !important;
    color: #0b2a6b !important;
  }
  .stt tr.op td,
  .stt tfoot td {
    background: #eaf2ff !important;
  }
}

:root {
  --pr: #1d4ed8;
  --hd: #e8f0fe;
  --bd: #d3e0f5;
  --bg: #eef3fb;
  --sb: #0b1f4d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --pr: #3b82f6;
    --hd: #16264a;
    --bd: #243a66;
    --bg: #0a1228;
    --sb: #050b1f;
  }
}
:root[data-theme='dark'] {
  --pr: #3b82f6;
  --hd: #16264a;
  --bd: #243a66;
  --bg: #0a1228;
  --sb: #050b1f;
}
body {
  background-image: radial-gradient(circle at 1px 1px, rgba(29, 78, 216, 0.08) 1px, transparent 0);
  background-size: 22px 22px;
}
nav {
  position: relative;
  overflow: hidden;
  background: linear-gradient(185deg, #0b1f4d 0%, #12358a 62%, #1d4ed8 125%);
}
nav:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 125% 6%, rgba(125, 211, 252, 0.24) 0 26%, transparent 27%),
    radial-gradient(circle at -20% 96%, rgba(255, 255, 255, 0.1) 0 30%, transparent 31%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 16px);
}
nav > * {
  position: relative;
}
nav button {
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}
nav button:hover {
  background: linear-gradient(135deg, #1a3a8f, #14306f);
  transform: translateX(3px);
}
nav button.on {
  background: linear-gradient(135deg, #2548b8 0%, #1e3a8a 55%, #172a6b 100%);
  box-shadow:
    inset 3px 0 0 #fff,
    0 4px 14px rgba(8, 20, 70, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  transform: none;
}
.card {
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(29, 78, 216, 0.07);
}
.card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--tx);
}
.card h2:before {
  content: '';
  width: 5px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(#38a3f5, #1d4ed8);
}
.kpi {
  border-left: 5px solid var(--pr);
  border-radius: 14px;
}
.kpi b {
  color: var(--pr);
}
.kpi b.ok {
  color: var(--ok);
}
.kpi b.er {
  color: var(--er);
}
th {
  background: linear-gradient(#1d4ed8, #1e3a8a);
  color: #fff;
  border-bottom: 0;
}
tbody tr:nth-child(even) td {
  background: rgba(37, 99, 235, 0.045);
}
tbody tr:nth-child(even) td:has(> button.b) {
  background: var(--card);
}
.sec td {
  background: var(--hd) !important;
  color: var(--pr);
}
tfoot td {
  background: var(--hd);
}
button.p {
  background: linear-gradient(#2563eb, #1d4ed8);
  border-color: #1d4ed8;
}
button.b:hover:not(:disabled) {
  border-color: var(--pr);
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  border-color: var(--pr);
}
#paper {
  border-top: 10px solid #1d4ed8;
  background-image:
    radial-gradient(circle at 100% 0, rgba(29, 78, 216, 0.08) 0 130px, transparent 131px),
    repeating-linear-gradient(135deg, rgba(29, 78, 216, 0.035) 0 1px, transparent 1px 14px);
}
#paper thead th {
  background: #1e3a8a;
  color: #fff;
}
#paper b {
  color: #12358a;
}
#ov .bar {
  max-width: 210mm;
}
#paper {
  box-sizing: border-box;
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  padding: 16mm 15mm;
  font-family: 'Prompt', 'Noto Sans Thai', Tahoma, sans-serif;
  page: paper;
}
@page paper {
  size: A4 portrait;
  margin: 0;
}
#paper {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
@media print {
  html,
  body {
    background: #fff !important;
  }
  body.printing-paper #paper {
    box-sizing: border-box !important;
    width: 210mm !important;
    max-width: none !important;
    min-height: 296mm !important;
    margin: 0 !important;
    padding: 16mm 15mm !important;
  }
}
@media print {
  th {
    background: #dbeafe !important;
    color: #0b2a6b !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  nav {
    display: none !important;
  }
  #paper thead th {
    background: #1e3a8a !important;
    color: #fff !important;
  }
}

.audit-actions {
  border: 1px solid #b9cff7;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.6), rgba(255, 255, 255, 0.98));
}
.audit-actions > p:first-of-type {
  max-width: 1000px;
  color: var(--mu);
}
.audit-actions .row {
  gap: 10px;
  margin-top: 12px;
}
.audit-actions button {
  min-height: 40px;
  padding: 9px 14px;
}
.audit-actions button.p {
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
}
.audit-actions .mu {
  font-size: 12px;
}
.audit-actions button:hover {
  transform: translateY(-1px);
}
@media print {
  .audit-actions {
    display: none !important;
  }
}

@media print {
  body.printing-paper #paper:has(.asset-tags) {
    border: 0 !important;
    min-height: 0 !important;
  }
  #paper .asset-tag {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* Print signature and company stamp as two separate, balanced blocks with clear whitespace. */
.signs.stamp-next-to-sign {
  display: grid !important;
  grid-template-columns: minmax(58mm, 1fr) 32mm !important;
  column-gap: 24mm !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: 160mm !important;
  margin: 16mm auto 0 !important;
  padding: 4mm 8mm !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.signs.stamp-next-to-sign > .sign {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 3mm !important;
  text-align: center !important;
}
.signs.stamp-next-to-sign > .stslot {
  position: relative !important;
  inset: auto !important;
  justify-self: center !important;
  align-self: center !important;
  flex: none !important;
  width: 30mm !important;
  height: 30mm !important;
  margin: 0 !important;
}
.signs.stamp-next-to-sign > .stslot img {
  max-width: 26mm !important;
  max-height: 26mm !important;
}
@media screen and (max-width: 600px) {
  .signs.stamp-next-to-sign {
    column-gap: 12mm !important;
    grid-template-columns: minmax(0, 1fr) 30mm !important;
  }
}
@media print {
  .signs.stamp-next-to-sign {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .signs.stamp-next-to-sign > .sign {
    break-inside: avoid !important;
  }
}

/* ===== ธีมใหม่: Modern · ขาว-ดำ · น้ำเงินแบรนด์ · Liquid Glass (แก้เฉพาะการแสดงผล) ===== */
.ic-ck{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012.5l4.5%204.5L19%207.5%27/%3E%3C/svg%3E")}
.ic-x{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206L6%2018%27/%3E%3C/svg%3E")}
.ic-warn{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204l9%2016H3L12%204zM12%2010v4M12%2017.5v.01%27/%3E%3C/svg%3E")}
.ic-dot{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2012m-4%200a4%204%200%20108%200a4%204%200%2010-8%200%27/%3E%3C/svg%3E")}
.ic-clip{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2011.5l-8%208a5%205%200%2001-7-7l8.5-8.5a3.5%203.5%200%20015%205L10%2017.5a2%202%200%2001-3-3l7.5-7.5%27/%3E%3C/svg%3E")}
.ic-file{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203h7l5%205v13H7zM14%203v5h5%27/%3E%3C/svg%3E")}
.ic-dl{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204v11M7%2011l5%205%205-5M5%2020h14%27/%3E%3C/svg%3E")}
.ic-rf{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2011a8%208%200%2000-14-4L4%209M4%204v5h5M4%2013a8%208%200%200014%204l2-2M20%2020v-5h-5%27/%3E%3C/svg%3E")}
.ic-plus{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27/%3E%3C/svg%3E")}
.ic-ar{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14M13%206l6%206-6%206%27/%3E%3C/svg%3E")}
.ic-sw{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%208h14M14%204l4%204-4%204M20%2016H6M10%2012l-4%204%204%204%27/%3E%3C/svg%3E")}
.ic-dn{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209l6%206%206-6%27/%3E%3C/svg%3E")}
.ic{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
:root{--bg:#f5f5f7;--card:rgba(255,255,255,.72);--tx:#0a0a0b;--mu:#6e6e73;--bd:rgba(0,0,0,.08);--pr:#0b4fe0;--sb:rgba(255,255,255,.62);--hd:rgba(0,0,0,.035);--glass:blur(22px) saturate(180%);--sh:0 8px 30px rgba(0,0,0,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#000;--card:rgba(28,28,30,.62);--tx:#f5f5f7;--mu:#98989d;--bd:rgba(255,255,255,.1);--pr:#3d7bff;--sb:rgba(20,20,22,.6);--hd:rgba(255,255,255,.05);--sh:0 8px 30px rgba(0,0,0,.5)}}
:root[data-theme="dark"]{--bg:#000;--card:rgba(28,28,30,.62);--tx:#f5f5f7;--mu:#98989d;--bd:rgba(255,255,255,.1);--pr:#3d7bff;--sb:rgba(20,20,22,.6);--hd:rgba(255,255,255,.05)}
body{background:radial-gradient(900px 500px at 85% -10%,rgba(11,79,224,.14),transparent 60%),radial-gradient(700px 500px at -5% 105%,rgba(11,79,224,.09),transparent 60%),var(--bg);background-attachment:fixed;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
.app{gap:16px;padding:16px}
nav{position:sticky;top:16px;align-self:flex-start;height:calc(100vh - 32px);overflow:auto;width:220px;background:var(--sb);color:var(--tx);border:1px solid var(--bd);border-radius:24px;-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.5);padding:18px 12px}
nav h1{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:4px 8px 18px}
nav button{color:var(--mu);border-radius:12px;padding:9px 12px;font-weight:500;transition:all .2s ease}
nav button:hover{background:var(--hd);color:var(--tx)}
nav button.on{background:var(--pr);color:#fff;box-shadow:0 6px 18px rgba(11,79,224,.35)}
main{padding:8px 4px}
.card,.kpi{background:var(--card);border:1px solid var(--bd);border-radius:22px;-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.45)}
.card{padding:20px}.card h2{font-size:17px;font-weight:600;letter-spacing:-.01em}
.kpi b{font-size:26px;font-weight:600;letter-spacing:-.02em}.kpi small{text-transform:none;letter-spacing:.02em}
input,select,textarea,button.b{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:8px 12px;transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--pr);box-shadow:0 0 0 4px rgba(11,79,224,.16)}
button.b:hover{background:var(--hd)}
button.p,button.b.p{background:var(--pr);border-color:var(--pr);color:#fff;border-radius:999px;padding:8px 18px;font-weight:500;box-shadow:0 6px 18px rgba(11,79,224,.3)}
button.p:hover{filter:brightness(1.08)}
table{border-collapse:separate;border-spacing:0}
th{background:var(--hd);font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--mu);border-bottom:1px solid var(--bd)}
th:first-child{border-top-left-radius:12px}th:last-child{border-top-right-radius:12px}
td{border-bottom:1px solid var(--bd)}tbody tr{transition:background .15s}tbody tr:hover td{background:var(--hd)}
.sec td{background:var(--hd)}
.hero{background:linear-gradient(135deg,#000 0%,#0a1a4d 55%,#0b4fe0 130%)!important;color:#fff!important;border-radius:26px!important;box-shadow:var(--sh)!important;border:0!important}
.hero *{color:inherit}
#tt{border-radius:999px!important;-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);background:rgba(10,10,11,.82)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 12px 40px rgba(0,0,0,.3)!important}
.nbm{border-radius:26px!important;background:var(--card)!important;-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--bd)}
#ov,#nbov,#nbov.on{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.syncbtn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--bd);background:var(--card);color:var(--tx);font:500 13px/1 inherit;font-family:inherit;cursor:pointer;-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s}
.syncbtn:hover{transform:translateY(-2px)}.syncbtn small{color:var(--mu);font-size:11px}
.syncbtn:active .ic{animation:spin .7s linear}@keyframes spin{to{transform:rotate(360deg)}}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:10px;border:3px solid transparent;background-clip:content-box}
@media(max-width:760px){.app{padding:8px}nav{position:static;width:100%;height:auto;border-radius:18px;display:flex}.syncbtn span{display:none}}

/* ===== หน้าล็อกอิน ===== */
.ic-mail{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18v12H3zM3%207l9%207%209-7%27/%3E%3C/svg%3E")}
.ic-lock{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2011h12v9H6zM8%2011V8a4%204%200%20018%200v3%27/%3E%3C/svg%3E")}
.ic-out{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%204H5v16h5M15%208l4%204-4%204M19%2012H9%27/%3E%3C/svg%3E")}
[hidden]{display:none!important}
.dock{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;gap:8px}
.dock .syncbtn{position:static}
.login{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:radial-gradient(800px 500px at 80% -10%,rgba(11,79,224,.28),transparent 60%),radial-gradient(700px 500px at 0% 110%,rgba(11,79,224,.18),transparent 60%),var(--bg);overflow:auto}
.login-card{width:min(400px,100%);padding:32px 28px;border-radius:28px;background:var(--card);border:1px solid var(--bd);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);box-shadow:0 30px 80px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.5)}
.login-logo{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--pr);color:#fff;font-size:24px;margin:0 auto 16px;box-shadow:0 10px 26px rgba(11,79,224,.4)}
.login h1{text-align:center;font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0}
.login p{text-align:center;margin:4px 0 22px}
.login label{display:block;margin-bottom:14px}.login label>span{display:block;font-size:12px;color:var(--mu);margin:0 0 6px 4px;font-weight:500}
.fld{position:relative}.fld .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mu)}
.fld input{width:100%;padding:12px 14px 12px 40px;border-radius:14px}
.cap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cap-img{flex:1 1 140px;height:48px;border-radius:12px;border:1px solid var(--bd);background:var(--hd);color:var(--tx);overflow:hidden;user-select:none}
.cap-img svg{width:100%;height:100%;display:block}
.cap-r{width:40px;height:40px;border-radius:12px;border:1px solid var(--bd);background:var(--card);color:var(--tx);cursor:pointer}
.cap input{flex:1 1 100%;padding:12px 14px;border-radius:14px;letter-spacing:.3em;text-transform:uppercase;text-align:center;font-weight:600}
.login-err{min-height:20px;color:var(--er);font-size:13px;text-align:center;margin-bottom:6px}
.login-btn{width:100%;padding:13px;border:0;border-radius:999px;background:var(--pr);color:#fff;font:600 15px inherit;font-family:inherit;cursor:pointer;box-shadow:0 10px 26px rgba(11,79,224,.35);transition:filter .2s,transform .2s}
.login-btn:hover{filter:brightness(1.08)}.login-btn:active{transform:scale(.985)}.login-btn:disabled{opacity:.6;cursor:wait}