/* YSG ระบบยอดขาย — ชุดสีและชิ้นส่วนร่วม */
:root{
  --ground:#F4F2EF; --surface:#FFFFFF; --subtle:#FBF9F7; --line:#EFEBE6; --line-2:#E1DCD6;
  --ink:#1C1A19; --ink-2:#5E5A57; --ink-3:#8C8783;
  --red:#B3121C; --red-deep:#6E0F14; --red-soft:#FBEDEE; --red-text:#8E0F18;
  --gold-bg:#F6EEDD; --gold-text:#7A5612; --gold-on-dark:#F1D9A6;
  --ok:#1B7A36; --ok-bg:#E8F4EB; --warn-bg:#FFF4DB; --warn-text:#5C3F00; --warn-line:#D08A00; --info-bg:#EAF1FD; --info-text:#173E86;
  --c-gold:#C98A12; --c-pawn:#2F6FE4; --c-goods:#0F8F7E; --c-other:#7A5C50;
  --f-ui:'Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-head:'IBM Plex Sans Thai','Noto Sans Thai',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-ui);-webkit-text-size-adjust:100%}
a{color:var(--red)} a:hover{color:var(--red-deep)}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
.num{font-variant-numeric:tabular-nums}
.h1{margin:0;font-family:var(--f-head);font-weight:600;font-size:30px;line-height:40px}
.muted{color:var(--ink-2)}
.card{background:var(--surface);border-radius:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:16px;border:1.5px solid var(--line-2);background:var(--surface);font-weight:500;font-size:16px;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.btn-primary:hover{background:#9C0F18;color:#fff}
.btn-quiet{background:var(--ground);border-color:transparent}
.btn-lg{min-height:60px;border-radius:20px;font-size:18px;width:100%}
.btn-sm{min-height:36px;padding:0 12px;border-radius:10px;font-size:13px}
.input,.select,.textarea{width:100%;border:1.5px solid var(--line-2);background:var(--surface);border-radius:14px;font:500 16px var(--f-ui);color:var(--ink)}
.input,.select{height:48px;padding:0 14px}
.textarea{padding:10px 12px;font-weight:400;resize:vertical}
.input::placeholder,.textarea::placeholder{color:#A39D97}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(179,18,28,.14)}
button:focus-visible,a:focus-visible{outline:3px solid rgba(179,18,28,.35);outline-offset:2px}
.label{font-size:13px;font-weight:500;color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:500}
.pill-ok{background:var(--ok-bg);color:#1B5E2E}
.pill-warn{background:var(--warn-bg);color:var(--warn-text)}
.pill-off{background:#EFEDEA;color:var(--ink-2)}
.pill-red{background:var(--red-soft);color:var(--red-text)}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;font-size:14px;line-height:22px}
.note svg{flex-shrink:0;margin-top:2px}
.note-warn{background:var(--warn-bg);color:var(--warn-text)}
.note-info{background:var(--info-bg);color:var(--info-text)}
.note-ok{background:var(--ok-bg);color:#1B5E2E}
.note-err{background:#FDEDEC;color:#8E0F18}
.dot{width:10px;height:10px;border-radius:5px;flex-shrink:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1C1A19;color:#fff;padding:12px 18px;border-radius:14px;font-size:15px;z-index:99;max-width:calc(100% - 32px);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.toast.err{background:#8E0F18}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(0,0,0,.12);border-top-color:var(--red);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}