/* ลงทุน 360 — design tokens (from the 360 design system) + base styles */
:root {
  /* Brand green */
  --color-green-50:#E6F9F1; --color-green-100:#B3EDCE; --color-green-200:#80E1AC;
  --color-green-300:#4DD489; --color-green-400:#1DD87A; --color-green-500:#00BA77;
  --color-green-600:#009660; --color-green-700:#00724A; --color-green-800:#004E33; --color-green-900:#002A1C;
  /* Brand yellow */
  --color-yellow-50:#FFFCE6; --color-yellow-100:#FFF5B3; --color-yellow-200:#FFEC80;
  --color-yellow-300:#FAE040; --color-yellow-400:#F8D80F; --color-yellow-500:#D4B800; --color-yellow-600:#A89200;
  /* Neutrals */
  --color-neutral-900:#25252B; --color-neutral-800:#35353D; --color-neutral-700:#4A4A54;
  --color-neutral-600:#65656F; --color-neutral-500:#86868F; --color-neutral-400:#A5A5AD;
  --color-neutral-300:#C4C4CC; --color-neutral-200:#DCDCE4; --color-neutral-100:#EFEFF4; --color-neutral-50:#F7F7F7;
  --color-white:#FFFFFF;
  /* Semantic */
  --color-brand:var(--color-green-500); --color-brand-dark:var(--color-green-700); --color-accent:var(--color-yellow-400);
  --color-bg:var(--color-neutral-50); --color-white:#FFFFFF;
  --color-text-primary:var(--color-neutral-900); --color-text-secondary:var(--color-neutral-600); --color-text-tertiary:var(--color-neutral-400);
  --color-border:var(--color-neutral-200); --color-border-strong:var(--color-neutral-300);
  --color-error:#E53535; --color-error-bg:#FFF0F0; --color-info:#2B8EE8; --color-info-bg:#EBF4FE;
  /* Shadows */
  --shadow-md:0 4px 16px 0 rgba(37,37,43,0.10); --shadow-lg:0 8px 28px 0 rgba(37,37,43,0.12); --shadow-xl:0 16px 48px 0 rgba(37,37,43,0.14);
  --shadow-card:var(--shadow-md); --shadow-brand-sm:0 4px 14px 0 rgba(0,186,119,0.25);
  /* Fonts */
  --font-display:'DM Sans','Noto Sans Thai',sans-serif;
  --font-body:'DM Sans','Noto Sans Thai',sans-serif;
  --font-thai:'Noto Sans Thai',sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-body);}
a{color:var(--color-brand);text-decoration:none;}
a:hover{color:var(--color-green-700);}
button{font-family:var(--font-body);}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marqueeL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:9999px}
.fade{animation:fadeUp 260ms ease-out;}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.5);border-top-color:#fff;border-radius:50%;animation:spin 700ms linear infinite;display:inline-block;}
input:focus,textarea:focus{border-color:var(--color-brand)!important;box-shadow:0 0 0 3px rgba(0,186,119,0.15);}