/* reset.css */
/* reset */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* tokens.css */
/* ตัวแปรกลาง — ห้ามใส่ค่าสี/ระยะดิบที่อื่น (CLAUDE.md ข้อ 5)
   ธีม: retro cartoon / neo-brutalist — เส้นขอบดำหนา สีแบนจัด เงาแข็งไม่ฟุ้ง */

:root {
  color-scheme: light;

  /* ---- หมึกดำ: ใช้กับขอบทุกเส้นและเงาทุกอัน ---- */
  --c-ink: #16130f;
  --c-ink-2: #3d3833;

  /* ---- พื้น ---- */
  --c-paper: #fffdf5;
  --c-surface: #ffffff;
  --c-surface-2: #fdf6e6;

  /* ---- ตัวอักษร ---- */
  --c-text: #2b2723;
  --c-muted: #6f675e;
  --c-dim: #9b9288;

  /* ---- สีแบนหลัก ---- */
  --c-blue: #3b82c4;
  --c-blue-deep: #2c6398;
  --c-blue-soft: #cfe3f5;

  --c-red: #f2555a;
  --c-red-soft: #ffd9da;

  --c-yellow: #ffd93d;
  --c-yellow-soft: #fff2bd;

  --c-mint: #62c79b;
  --c-mint-soft: #d4f0e3;

  --c-lilac: #a78bda;
  --c-lilac-soft: #e6dcf7;

  /* ---- บทบาท ---- */
  --c-primary: var(--c-blue);
  --c-ok: var(--c-mint);
  --c-warn: var(--c-yellow);
  --c-danger: var(--c-red);

  /* ---- เส้นขอบ + เงาแข็ง ---- */
  --bw: 3px;
  --bw-thin: 2px;
  --shadow-hard: 5px 5px 0 var(--c-ink);
  --shadow-hard-sm: 3px 3px 0 var(--c-ink);
  --shadow-hard-lg: 8px 8px 0 var(--c-ink);

  /* ---- ระยะ ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* ---- มุมโค้ง ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  /* ---- ตัวอักษร: ใหญ่ หนา แน่น ---- */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-lg: 22px;
  --fs-xl: 38px;
  --fs-2xl: 68px;

  --font: 'Mitr', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* ---- อื่นๆ ---- */
  --sidebar-w: 246px;
  --ease: cubic-bezier(.3, .8, .4, 1);
}

/* effects.css */
/* องค์ประกอบแนว retro cartoon
   หลักคิด: ทุกอย่างมีขอบดำหนา + เงาแข็งไม่ฟุ้ง + สีแบนไม่มีไล่เฉด */

/* ===========================================================================
   พื้นหลัง
   =========================================================================== */
.fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--c-paper);
}

/* ตารางจุดแบบสมุดวาดเขียน */
.fx__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--c-ink) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  opacity: .07;
}

/* เมฆลอย */
.fx__cloud {
  position: absolute;
  background: var(--c-surface);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-full);
  opacity: .9;
}
.fx__cloud::before,
.fx__cloud::after {
  content: '';
  position: absolute;
  background: var(--c-surface);
  border: var(--bw) solid var(--c-ink);
  border-radius: 50%;
}
.fx__cloud--a {
  width: 190px; height: 54px; top: 14%; left: -40px;
  animation: float-x 26s ease-in-out infinite alternate;
}
.fx__cloud--a::before { width: 74px; height: 74px; top: -40px; left: 28px; border-bottom: 0; }
.fx__cloud--a::after  { width: 54px; height: 54px; top: -30px; left: 96px; border-bottom: 0; }

.fx__cloud--b {
  width: 140px; height: 42px; bottom: 16%; right: -30px;
  animation: float-x 34s ease-in-out infinite alternate-reverse;
}
.fx__cloud--b::before { width: 58px; height: 58px; top: -32px; left: 22px; border-bottom: 0; }
.fx__cloud--b::after  { width: 42px; height: 42px; top: -24px; left: 74px; border-bottom: 0; }

@keyframes float-x { to { transform: translateX(46px); } }

/* ===========================================================================
   การ์ด
   =========================================================================== */
.card {
  position: relative;
  background: var(--c-surface);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-hard);
}

.card--quiet { box-shadow: none; border-width: var(--bw-thin); }
.card--flat  { box-shadow: none; }

.card--hover { transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.card--hover:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-hard-lg);
}
.card--hover:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-hard-sm);
}

/* สีพื้นการ์ด */
.card--blue   { background: var(--c-blue-soft); }
.card--red    { background: var(--c-red-soft); }
.card--yellow { background: var(--c-yellow-soft); }
.card--mint   { background: var(--c-mint-soft); }
.card--lilac  { background: var(--c-lilac-soft); }

/* ===========================================================================
   กำแพงอิฐ — แถบคาดแบบในภาพอ้างอิง
   =========================================================================== */
.bricks {
  height: 26px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-sm);
  background-color: var(--c-red);
  background-image:
    linear-gradient(var(--c-ink) 2px, transparent 2px),
    linear-gradient(90deg, var(--c-ink) 2px, transparent 2px);
  background-size: 100% 13px, 44px 13px;
  background-position: 0 0, 0 0;
}

/* ===========================================================================
   ป้าย
   =========================================================================== */
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-3);
  border: var(--bw-thin) solid var(--c-ink);
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  box-shadow: 2px 2px 0 var(--c-ink);
}

.pill--ok     { background: var(--c-mint); }
.pill--warn   { background: var(--c-yellow); }
.pill--danger { background: var(--c-red); color: #fff; }
.pill--buyer  { background: var(--c-mint); }
.pill--seller { background: var(--c-red); color: #fff; }

/* สติกเกอร์เอียงติดมุม */
.sticker {
  position: absolute;
  top: -14px;
  right: var(--s-4);
  transform: rotate(-4deg);
  padding: 2px var(--s-3);
  border: var(--bw-thin) solid var(--c-ink);
  border-radius: var(--r-full);
  background: var(--c-yellow);
  box-shadow: 2px 2px 0 var(--c-ink);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-ink);
}

/* ===========================================================================
   ดาวประกาย 4 แฉก
   =========================================================================== */
.spark {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--c-yellow);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: twinkle 2.4s ease-in-out infinite;
}
.spark--sm { width: 10px; height: 10px; animation-delay: .5s; }
.spark--blue { background: var(--c-blue); }
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(.65) rotate(20deg); opacity: .6; }
}

/* ===========================================================================
   เส้นคั่น
   =========================================================================== */
.rule-soft {
  height: 0;
  border: 0;
  border-top: var(--bw-thin) dashed var(--c-ink);
  opacity: .25;
}

.readout { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   จอเล็ก / ลดการเคลื่อนไหว
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fx__cloud, .spark { animation: none; }
}

@media (max-width: 720px) {
  :root { --bw: 2.5px; --shadow-hard: 4px 4px 0 var(--c-ink); }
  .fx__cloud { display: none; }
}

/* base.css */
/* พื้นฐานของทั้งเว็บ — retro cartoon */
body {
  background: var(--c-paper);
  color: var(--c-text);
  font: 300 var(--fs-md)/1.6 var(--font);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.shell { position: relative; z-index: 1; }

h1, h2, h3 { color: var(--c-ink); line-height: 1.12; }
h1 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.01em; }
h3 { font-size: var(--fs-md); font-weight: 500; }

strong, b { font-weight: 500; color: var(--c-ink); }

a { transition: color .15s var(--ease); }
a:hover { color: var(--c-blue-deep); }

code, pre { font-family: var(--font-mono); font-size: var(--fs-xs); }
code {
  background: var(--c-yellow-soft);
  border: var(--bw-thin) solid var(--c-ink);
  border-radius: var(--r-sm);
  padding: 0 6px;
  color: var(--c-ink);
}

::selection { background: var(--c-yellow); color: var(--c-ink); }

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--c-surface-2); }
::-webkit-scrollbar-thumb {
  background: var(--c-ink);
  border-radius: var(--r-full);
  border: 4px solid var(--c-surface-2);
  background-clip: padding-box;
}

/* ---- form ---- */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="time"], input[type="search"],
textarea, select {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-weight: 300;
  transition: box-shadow .12s var(--ease), transform .12s var(--ease);
}

input::placeholder, textarea::placeholder { color: var(--c-dim); }

input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: var(--shadow-hard-sm);
  transform: translate(-1px, -1px);
}

label { color: var(--c-muted); font-size: var(--fs-sm); font-weight: 400; }

/* ---- ปุ่ม ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-5);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: var(--shadow-hard-sm);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.btn:hover  { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard); }
.btn:active { transform: translate(2px, 2px);  box-shadow: 1px 1px 0 var(--c-ink); }

.btn--primary { background: var(--c-blue); color: #fff; }
.btn--yellow  { background: var(--c-yellow); }
.btn--red     { background: var(--c-red); color: #fff; }
.btn--ghost   { box-shadow: none; }

/* utilities.css */
/* utility เท่าที่จำเป็นจริงๆ */
.u-row     { display: flex; align-items: center; gap: var(--s-2); }
.u-row--sb { justify-content: space-between; }
.u-col     { display: flex; flex-direction: column; gap: var(--s-2); }
.u-wrap    { flex-wrap: wrap; }
.u-grow    { flex: 1 1 auto; min-width: 0; }
.u-muted   { color: var(--c-muted); }
.u-dim     { color: var(--c-dim); }
.u-xs      { font-size: var(--fs-xs); }
.u-sm      { font-size: var(--fs-sm); }
.u-mono    { font-family: var(--font-mono); }
.u-center  { text-align: center; }
.u-right   { text-align: right; }
.u-truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-hide    { display: none !important; }