/* suaydi — เว็บเวอร์ชัน / web version
 *
 * สไตล์: coquette / y2k pastel — พื้นหลังลายก้นหอยชมพู เนื้อหาอยู่ใน "หน้าต่าง" สีขาว
 * Style: coquette y2k pastel — a pink pinwheel ground with the content in a white "window".
 *
 * ⚠️ เส้นแบ่งที่ตั้งใจไว้: ความน่ารักอยู่ที่ "กรอบ" ส่วน "เนื้อหา" ต้องอ่านง่ายเสมอ
 *    พื้นหลังลายก้นหอย หัวใจลอย และฟอนต์ลายมือ อยู่ได้เฉพาะรอบนอกกับหัวข้อสั้นๆ
 *    ส่วนรายชื่อสินค้า ขั้นตอนแต่งหน้า และบทความ ใช้ฟอนต์อ่านง่ายบนพื้นขาวเสมอ
 *    เพราะคนเปิดเว็บนี้มาเพื่อ "หาเฉดรองพื้นให้ถูก" ไม่ใช่มาดูลาย
 *
 *    The cuteness lives in the frame; the content stays readable. Swirls, floating
 *    hearts and the handwriting face belong to the edges and short headings only.
 *    Product lists, steps and articles keep a plain face on white, because people
 *    come here to get a foundation shade right, not to admire the wallpaper.
 *
 * ⚠️ โหมดสว่างอย่างเดียว (`color-scheme: light`) — ลุคนี้อยู่ได้ด้วยพื้นอ่อนกับกระดาษขาว
 *    Light-only: the look rests on a pale ground behind white paper.
 */

:root {
  color-scheme: light;

  --rose: #d4708c;
  --rose-ink: #b4536f;
  --rose-soft: #fdeef3;
  --rose-line: #f5d9e4;
  --blue-soft: #eef4fc;

  --ink: #3a3340;
  --muted: #7d7486;
  --paper: #ffffff;
  --field: #f1eef2;

  --green: #3f9c68;
  --amber: #c5872f;
  --red: #c4635e;

  --shadow-sm: 0 2px 8px rgb(170 130 150 / .10);
  --shadow: 0 8px 26px rgb(170 130 150 / .16);
  --shadow-lg: 0 16px 44px rgb(160 120 150 / .22);

  --radius: 20px;
  --radius-sm: 14px;
  --wrap: 54rem;

  --font-cute: "Mali", "Quicksand", "IBM Plex Sans Thai", sans-serif;
  --font-read: "Quicksand", "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Noto Sans Thai", sans-serif;
}

* { box-sizing: border-box; }

/* แถบบนกับแท็บลอยติดขอบจอ เวลาเลื่อนไปยังหัวข้อจึงต้องเผื่อที่ให้มัน
   Sticky bars need room when scrolling to a heading, or they cover the first line. */
html { scroll-padding-top: 9rem; }

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.75 var(--font-read);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: 1rem .75rem 0;

  /* ลายก้นหอยชมพู–ขาว ตรึงกับหน้าจอ ไม่เลื่อนตามเนื้อหา
     ใช้ conic-gradient ซ้ำ 20 ช่อง แล้วบิดด้วย ::before อีกชั้นให้ดูเป็นเกลียว
     A fixed pink pinwheel: a repeating conic gradient, softened by a second layer. */
  background:
    radial-gradient(circle at 50% 42%, rgb(255 255 255 / .55) 0%, transparent 62%),
    repeating-conic-gradient(from 0deg at 50% 42%,
      #fbe4ed 0deg 9deg, #fdf6f9 9deg 18deg);
  background-attachment: fixed;
}

/* ── หัวใจลอยรอบขอบ / floating hearts ── */

.hearts { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.hearts span {
  position: absolute; color: #f0bcd0; font-size: 1.1rem;
  text-shadow: 0 1px 3px rgb(255 255 255 / .8);
}
.hearts span:nth-child(1) { top: 8%;  left: 5%; }
.hearts span:nth-child(2) { top: 22%; right: 6%; font-size: 1.5rem; }
.hearts span:nth-child(3) { top: 46%; left: 3%;  font-size: .85rem; }
.hearts span:nth-child(4) { top: 62%; right: 4%; }
.hearts span:nth-child(5) { top: 78%; left: 7%;  font-size: 1.4rem; }
.hearts span:nth-child(6) { top: 34%; left: 8%;  font-size: .8rem; }
.hearts span:nth-child(7) { top: 88%; right: 8%; font-size: 1.1rem; }
.hearts span:nth-child(8) { top: 14%; right: 14%; font-size: .8rem; }
@media (max-width: 40rem) {
  .hearts span:nth-child(n + 5) { display: none; }
}

/* ── กรอบหน้าต่าง / the window frame ── */

.window {
  position: relative; z-index: 1;
  max-width: 60rem; margin: 0 auto;
  background: var(--paper);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

/* ── แถบชื่อหน้าต่าง / title bar ── */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  padding-top: .85rem;
}
.topbar-inner {
  display: flex; align-items: center; gap: .7rem;
  height: 3.6rem;
}

.window-x {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 12px;
  background: var(--field); color: #5d5566;
  font-size: 1rem; font-weight: 700;
}

.brand {
  flex: 1; display: flex; align-items: center; gap: .5rem;
  height: 2.5rem; padding: 0 1rem; border-radius: 12px;
  background: var(--field); color: var(--ink); text-decoration: none;
  font-family: var(--font-cute); font-size: 1.1rem; font-weight: 700;
  letter-spacing: .01em; overflow: hidden; white-space: nowrap;
}
.kaomoji { margin-left: auto; color: #6b6273; font-size: .82rem; letter-spacing: .04em; }
@media (max-width: 30rem) { .kaomoji { display: none; } }

.lang {
  flex: none; border: 1.5px solid var(--rose-line);
  background: var(--rose-soft); color: var(--rose-ink);
  border-radius: 999px; padding: .45rem .9rem;
  font: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.lang:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.lang:active { transform: translateY(0); }

/* ── แท็บ / tabs ── */

.tabs {
  position: sticky; top: 4.45rem; z-index: 15;
  background: var(--paper);
  border-bottom: 1.5px solid var(--rose-line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs-inner { display: flex; gap: .3rem; }
.tab {
  border: 0; background: none; color: var(--muted);
  font-family: var(--font-cute); font-size: .95rem; font-weight: 600;
  padding: .75rem .95rem; margin: .5rem 0; border-radius: 999px;
  white-space: nowrap; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.tab:hover { color: var(--rose-ink); background: var(--rose-soft); }
.tab.is-active { color: var(--rose-ink); background: var(--rose-soft); box-shadow: var(--shadow-sm); }

/* ── เนื้อหา / content ── */

.panel { padding: 2rem 0 3.5rem; }

h1 {
  font-family: var(--font-cute);
  font-size: 1.7rem; line-height: 1.45; margin: 0 0 .6rem; font-weight: 700;
}
/* หัวใจต่อท้ายหัวข้อ เหมือนในภาพต้นแบบ / a heart after the heading, as in the reference */
h1::after { content: " ♡"; color: var(--rose); font-size: .85em; }

.lede { color: var(--muted); margin: 0 0 1.75rem; max-width: 40rem; }
.field-label {
  font-family: var(--font-cute);
  font-size: .95rem; font-weight: 700; color: var(--rose-ink);
  margin: 1.9rem 0 .7rem; letter-spacing: .01em;
}
.field-label::after { content: " ♡"; font-size: .85em; opacity: .75; }
.hint { font-size: .86rem; color: var(--muted); margin: .9rem 0 0; }
.note { margin-top: 2rem; font-size: .82rem; color: var(--muted); line-height: 1.7; }
.muted { color: var(--muted); }

/* ── ชิปเลือก / choice chips ── */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips.scroll {
  flex-wrap: nowrap; overflow-x: auto;
  padding: .2rem .2rem .6rem; margin: -.2rem -.2rem 0; scrollbar-width: none;
}
.chips.scroll::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  border: 1.5px solid var(--rose-line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: .55rem 1rem;
  font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); background: var(--rose-soft); }
.chip:active { transform: translateY(0); }
.chip[aria-pressed="true"] {
  background: var(--rose); border-color: var(--rose); color: #fff;
  box-shadow: 0 6px 16px rgb(212 112 140 / .32);
}
.chip[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px rgb(255 255 255 / .65); }

.dot {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 1px solid rgb(0 0 0 / .08);
}

/* ── ช่องค้นหา / search ── */

.search {
  width: 100%; margin: 0 0 1rem; padding: .85rem 1.15rem;
  font: inherit; background: var(--field); color: var(--ink);
  border: 1.5px solid transparent; border-radius: 999px;
  transition: border-color .18s ease, background .18s ease;
}
.search::placeholder { color: var(--muted); }
.search:focus { outline: none; background: #fff; border-color: var(--rose-line); }

.switch { display: inline-flex; align-items: center; gap: .55rem; margin: .9rem 0 0; font-size: .9rem; cursor: pointer; }
.switch input { accent-color: var(--rose); width: 1.05rem; height: 1.05rem; }
.count { color: var(--muted); font-size: .88rem; margin: 1.4rem 0 .6rem; }

/* ── การ์ด / cards ──
   พื้นขาวเสมอ เพราะรายชื่อสินค้าและขั้นตอนต้องอ่านเร็ว
   Always white: product lists and steps have to be read quickly. */

.results { display: grid; gap: .85rem; margin-top: 1rem; }

.card {
  width: 100%; text-align: left; font: inherit;
  background: #fff; border: 1.5px solid var(--rose-line);
  border-radius: var(--radius); padding: 1.25rem 1.4rem;
  display: grid; gap: .35rem; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
button.card, .card[data-id] { cursor: pointer; }
button.card:hover, .card[data-id]:hover {
  transform: translateY(-3px); border-color: var(--rose); box-shadow: var(--shadow);
}
.card.compact { padding: .95rem 1.2rem; }

.card-brand { font-size: .82rem; color: var(--muted); font-weight: 600; }
.card-name { font-weight: 700; font-size: 1.02rem; }
.card-meta { font-size: .86rem; color: var(--muted); }
.shade-line { color: var(--rose-ink); font-size: .95rem; font-weight: 700; }

.quality { font-size: .82rem; font-weight: 700; }
.quality.exact { color: var(--green); }
.quality.close { color: var(--amber); }
.quality.risky { color: var(--red); }

.pill {
  display: inline-block; font-size: .76rem; font-weight: 700;
  padding: .2rem .65rem; border-radius: 999px;
  background: var(--rose-soft); color: var(--rose-ink);
}
.pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }

.warn {
  display: flex; gap: .5rem; font-size: .85rem; color: #9a6420;
  background: #fff5e4; border: 1.5px solid #f6e2c2;
  border-radius: var(--radius-sm); padding: .75rem 1rem; margin: .85rem 0 0;
}
.tip {
  margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-sm);
  background: var(--blue-soft); font-size: .88rem;
}
.empty { color: var(--muted); text-align: center; padding: 3rem 1rem; }

/* ── กล่องรายละเอียด / detail dialog ── */

.detail {
  border: 1.5px solid var(--rose-line); border-radius: 24px;
  background: #fff; color: var(--ink);
  padding: 1.75rem; max-width: 34rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-lg);
}
.detail::backdrop { background: rgb(120 80 105 / .28); }
.detail h2 { font-family: var(--font-cute); margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 700; }
.detail h3 {
  font-family: var(--font-cute); font-size: .95rem; font-weight: 700;
  color: var(--rose-ink); margin: 1.5rem 0 .5rem;
}
.detail ul { margin: 0; padding-left: 1.15rem; }
.detail li { margin-bottom: .35rem; }

.close, .back-button {
  font: inherit; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.close {
  margin-top: 1.75rem; width: 100%; padding: .8rem;
  background: var(--rose); color: #fff; box-shadow: 0 6px 18px rgb(212 112 140 / .3);
}
.close:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(212 112 140 / .38); }

.back-button {
  margin-bottom: 1rem; padding: .55rem 1.1rem;
  background: var(--rose-soft); color: var(--rose-ink);
  border: 1.5px solid var(--rose-line);
}
.back-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ── ท้ายหน้า / footer ── */

.foot {
  position: relative; z-index: 1;
  padding: 2rem 1.5rem 3rem; font-size: .85rem; color: var(--muted);
  text-align: center;
}
.foot p { margin: 0 0 .6rem; }
.foot a { color: var(--rose-ink); text-decoration: none; font-weight: 700; }
.foot a:hover { text-decoration: underline; }

/* ── ลุคแต่งหน้า / makeup looks ── */

.look-card { padding: 0; }
.look-card details { padding: 1.2rem 1.4rem; }
.look-card summary { display: flex; gap: .85rem; align-items: flex-start; cursor: pointer; list-style: none; }
.look-card summary::-webkit-details-marker { display: none; }
.look-emoji { font-size: 1.9rem; line-height: 1.2; }
.look-head { display: flex; flex-direction: column; gap: .25rem; }
.look-head strong { font-family: var(--font-cute); font-size: 1.05rem; }

.steps { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .9rem; }
.steps li { display: flex; gap: .7rem; align-items: flex-start; }
.step-number {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: var(--rose); color: #fff; font-size: .76rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ── ราศี / star signs ── */

.zodiac-grid {
  display: grid; gap: .7rem; margin-bottom: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr));
}
.zodiac-cell {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 1rem .6rem; border: 1.5px solid var(--rose-line); border-radius: var(--radius-sm);
  background: #fff; color: inherit; font: inherit; font-size: .8rem; text-align: center;
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.zodiac-cell:hover { transform: translateY(-3px); background: var(--rose-soft); box-shadow: var(--shadow-sm); }
.zodiac-cell.is-active { background: var(--rose-soft); border-color: var(--rose); box-shadow: var(--shadow-sm); }
.zodiac-cell strong { font-family: var(--font-cute); }
.zodiac-symbol { font-size: 1.5rem; }
.zodiac-symbol.big { font-size: 2.6rem; }

.sign-head { display: flex; gap: .85rem; align-items: center; margin-bottom: .75rem; }
.sign-head h2 { font-family: var(--font-cute); margin: 0; font-size: 1.25rem; font-weight: 700; }

.palette { display: flex; gap: .75rem; justify-content: space-between; }
.palette.wrap { flex-wrap: wrap; justify-content: flex-start; gap: 1rem; max-width: none; padding: 0; }
.palette.wrap .swatch { flex: 0 0 3.8rem; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: .45rem; flex: 1; }
.swatch .dot { width: 2.6rem; height: 2.6rem; box-shadow: 0 3px 9px rgb(160 120 150 / .2); }
.swatch .muted { font-size: .74rem; text-align: center; line-height: 1.5; }

/* ── ความรู้ / learn ── */

.prose { margin-top: 1rem; }
.prose h3 { font-family: var(--font-cute); margin: 1.4rem 0 .45rem; font-size: 1rem; font-weight: 700; }
.prose p { margin: 0 0 .8rem; }
.prose ul { margin: 0 0 .8rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; }

/* ── สีเสื้อผ้า / outfit colour ── */

.trend-head { display: flex; gap: .85rem; align-items: center; margin-bottom: .55rem; }
.trend-head strong { font-family: var(--font-cute); }
.trend-chip {
  width: 3rem; height: 3rem; border-radius: var(--radius-sm); flex: none;
  border: 1.5px solid var(--rose-line); box-shadow: 0 3px 10px rgb(160 120 150 / .16);
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; }
.small-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.dot.small { width: 1.1rem; height: 1.1rem; display: inline-block; }

.outfit-grid {
  display: grid; gap: .7rem; margin-bottom: 1.3rem;
  grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
}
.outfit-cell {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .9rem .5rem; border: 1.5px solid var(--rose-line); border-radius: var(--radius-sm);
  background: #fff; color: inherit; font: inherit; font-size: .76rem; text-align: center;
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.outfit-cell:hover { transform: translateY(-3px); background: var(--rose-soft); box-shadow: var(--shadow-sm); }
.outfit-cell.is-active { background: var(--rose-soft); border-color: var(--rose); }
.outfit-cell .dot { width: 2rem; height: 2rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.colour-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: 999px;
  background: var(--rose-soft); border: 1.5px solid var(--rose-line); font-size: .82rem;
}

/* ── จอกว้าง / wider screens ── */

@media (min-width: 48rem) {
  body { padding: 2rem 1.5rem 0; }
  h1 { font-size: 2rem; }
  .panel { padding: 2.75rem 0 4.5rem; }
  .results { grid-template-columns: repeat(2, 1fr); gap: .95rem; }
  .results .look-card, .results > .card:only-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .chip:hover, .card:hover, .zodiac-cell:hover, .outfit-cell:hover,
  .lang:hover, .close:hover, .back-button:hover { transform: none; }
}

/* [hidden] ต้องชนะ display ของ grid/flex ที่ตั้งไว้ในคลาส
   [hidden] must beat the display set by grid/flex classes. */
[hidden] { display: none !important; }

/* ── สแกนสีผิว / skin-tone scan ─────────────────────────────────── */

.scan-check { margin: .6rem 0 0; padding-left: 1.2rem; }
.scan-check li { margin-bottom: .45rem; font-size: .9rem; }

.scan-actions {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  margin-top: 1.2rem;
}
.scan-actions .close { width: auto; margin-top: 0; padding: .8rem 1.6rem; }
.scan-actions .back-button { margin-bottom: 0; }

.scan-stage { margin-top: 1.2rem; }
.scan-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1.5px solid var(--rose-line);
  background: #000; box-shadow: var(--shadow);
}
.scan-frame video {
  display: block; width: 100%; max-height: 70vh; object-fit: cover;
  /* กล้องหน้าแสดงภาพกลับด้านเหมือนกระจก คนจึงจัดหน้าตามได้ง่ายกว่า
     ค่าสีที่วัดใช้ภาพต้นฉบับ การกลับด้านตรงนี้จึงไม่กระทบผลลัพธ์
     Mirrored like a mirror so lining up feels natural; sampling reads the
     original frame, so this flip cannot affect the measurement. */
  transform: scaleX(-1);
}
.scan-oval {
  position: absolute; inset: 0; margin: auto;
  width: 62%; aspect-ratio: 1 / 1.35;
  border: 2px dashed rgb(255 255 255 / .85);
  border-radius: 50%;
  box-shadow: 0 0 0 100vmax rgb(40 25 40 / .35);
  pointer-events: none;
}
.scan-stage .close { margin-top: 1rem; }

/* ── แบบทดสอบ / quiz ─────────────────────────────────────────────── */

.quiz-options { display: grid; gap: .6rem; margin-top: .8rem; }
@media (min-width: 32rem) { .quiz-options { grid-template-columns: 1fr 1fr; } }

.quiz-option {
  padding: .85rem 1rem; border: 1.5px solid var(--rose-line); border-radius: 14px;
  background: var(--paper); color: inherit; font: inherit; font-size: .92rem;
  text-align: left; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.quiz-option:hover { border-color: var(--rose); background: var(--rose-soft); transform: translateY(-1px); }
.quiz-option.is-active {
  border-color: var(--rose); background: var(--rose-soft);
  color: var(--rose-ink); font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* ตัวเลือกอันเดอร์โทนมี 4 ข้อและข้อความยาว เรียงเดียวอ่านง่ายกว่าสองคอลัมน์
   Four long options read better in one column than two. */
.quiz-options.one-column { grid-template-columns: 1fr; }
.quiz-option .dot.small { margin-right: .5rem; vertical-align: -.2rem; }