/* LAS shared theme, verified against live index-CyLyswJz.css on 2026-09-28.
   Adapted for this standalone preview; no production stylesheet is modified. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --background: #f8f4ec;
  --foreground: #2c303a;
  --card: #fffdf8;
  --primary: #5c728a;
  --primary-foreground: #fffdf8;
  --secondary: #eee7dc;
  --muted-foreground: #68727f;
  --border: #ded4c4;
  --coral: #e46d58;
  --sage: #93aa9a;
  --font-sans: 'Noto Sans Thai', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-heading: 'IBM Plex Sans Thai', 'Prompt', 'Noto Sans Thai', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--foreground);
  font: 15px/1.7 var(--font-sans);
  background:
    radial-gradient(circle at 12% 8%, rgb(228 109 88 / .09), transparent 28rem),
    radial-gradient(circle at 88% 14%, rgb(92 114 138 / .12), transparent 30rem),
    radial-gradient(circle at 18% 90%, rgb(147 170 154 / .12), transparent 28rem),
    linear-gradient(180deg, #fffdf8, var(--background) 46%);
  min-height: 100vh;
}
header, main { max-width: 1400px; margin: auto; }
header { padding: 28px 24px 0; }
main { padding: 20px 24px 36px; }
.hero, .stat, .path, .card, .filters, .details, details {
  background:
    linear-gradient(145deg, rgb(255 253 248 / .94), rgb(245 240 230 / .76)),
    radial-gradient(circle at top right, rgb(228 109 88 / .08), transparent 16rem);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(222 212 196 / .88);
  border-radius: 1.15rem;
  box-shadow: 0 16px 40px rgb(44 48 58 / .08);
}
.hero { padding: 28px 30px; position: relative; }
.hero { padding: 0; overflow: hidden; }
.hero-art { display: block; width: 100%; height: auto; }
.hero-copy { padding: 24px 30px; }
.las-logo { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; object-fit: contain; background: white; padding: 7px; border: 1px solid var(--border); box-shadow: 0 4px 12px rgb(44 48 58 / .06); }
.hero-logo { width: 80px; height: 80px; }
.card-brand { display: flex; align-items: center; gap: 12px; }
.pagination { text-align: center; margin: 28px 0 12px; }
.page-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.page-controls button { border-radius: 50%; width: 44px; height: 44px; padding: 0; background: var(--card); color: var(--primary); border: 1px solid var(--border); }
.page-controls button[aria-current="page"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.page-controls button:disabled { opacity: .4; cursor: default; }
.page-controls button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.hero-heading { display: flex; gap: 14px; align-items: center; }
.hero small { color: var(--muted-foreground); font-size: 12px; }
h1,h2,h3,h4 { font-family: var(--font-heading); }
h1 { font-size: clamp(24px,3vw,32px); line-height: 1.35; margin: 4px 0; }
h2 { font-size: 22px; margin: 0 0 14px; }
h3 { line-height: 1.55; }
p { margin: 8px 0; }
.hero-subtitle, .stat strong {
  background: linear-gradient(135deg, #5c728a, #e46d58);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.cute-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 16px;
  color: white; position: relative; border: 1px solid rgb(255 255 255 / .4);
  background: rgb(91 143 217 / .70);
  box-shadow: 0 4px 12px rgb(91 143 217 / .32), inset 0 1px 0 rgb(255 255 255 / .4);
}
.cute-icon::after {
  content: ''; position: absolute; inset: .16rem; border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / .38), transparent 55%);
  pointer-events: none;
}
.cute-icon svg { width: 24px; height: 24px; }
.path:nth-child(2) .cute-icon { background: rgb(240 106 74 / .70); }
.path:nth-child(3) .cute-icon { background: rgb(52 184 148 / .70); }
.path:nth-child(4) .cute-icon { background: rgb(234 167 47 / .74); }
.path:nth-child(5) .cute-icon { background: rgb(183 111 179 / .70); }
button,input,select {
  font: inherit; color: var(--foreground); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 13px; background: rgb(255 253 248 / .8);
  min-height: 42px;
}
button { cursor: pointer; transition: background .16s, border-color .16s; }
button:hover { border-color: var(--primary); background: var(--secondary); }
button[aria-pressed=true], .path button {
  background: var(--primary); color: var(--primary-foreground); border-color: var(--primary);
}
.path button:hover { background: #40536a; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline: 3px solid var(--coral); outline-offset: 3px;
}
a { color: #40536a; text-underline-offset: 3px; }
a:hover { color: #a94735; }
section { margin-bottom: 32px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 22px 0 30px; }
.stat { text-align: center; padding: 18px 12px; }
.stat strong { display: block; font-size: 30px; line-height: 1.4; }
.stat span { font-size: 13px; color: var(--muted-foreground); }
.note { border: 1px solid var(--border); border-left: 4px solid var(--sage); padding: 12px 16px; border-radius: 12px; background: rgb(219 230 221 / .35); font-size: 14px; }
.muted { color: var(--muted-foreground); font-size: 13px; }
.paths,.grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.path,.card { padding: 22px; display: flex; flex-direction: column; }
.path h3,.card h3 { font-size: 18px; margin: 12px 0 8px; }
.path>small,.card>small { color: var(--muted-foreground); font-size: 12px; }
.path>.cute-icon { margin-bottom: 12px; }
.path p { flex: 1; font-size: 14px; }
.path button { margin-top: 18px; align-self: flex-start; }
.card .links { margin-top: auto; padding-top: 14px; font-size: 13px; }
.tag { display: inline-block; background: var(--secondary); border-radius: 999px; padding: 3px 9px; margin: 3px 4px 3px 0; font-size: 12px; }
.status { color: #765722; background: #f6ead2; align-self: flex-start; }
.filters { padding: 20px; margin-bottom: 18px; }
.filters input { flex: 1; min-width: 200px; background: rgb(248 244 236 / .7); }
#tags { gap: 8px; }
#tags button { border-radius: 999px; font-size: 13px; padding: 7px 12px; }
.details { padding: 24px; margin: 18px 0; }
[hidden] { display: none !important; }
ol li { padding: 5px 0; }
li { overflow-wrap: anywhere; }
.empty { padding: 30px; }
footer { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 16px; }
#count { font-weight: 600; }
details { padding: 16px 20px; }
summary { cursor: pointer; }
@media(max-width:900px) { .paths,.grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) {
  .paths,.grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  main { padding: 16px; } header { padding: 16px 16px 0; }
  .hero-copy { padding: 20px; } .hero-heading { align-items: flex-start; }
  .hero-logo { width: 60px; height: 60px; }
  .page-controls { gap: 4px; }
  .hero-heading .cute-icon { width: 38px; height: 38px; border-radius: 12px; }
  input,select { font-size: 16px; max-width: 100%; }
  .filters input { width: 100%; min-width: 0; flex-basis: 100%; }
}
@media(prefers-reduced-motion:reduce) { * { transition: none !important; } }

/* Owner, 2 ตุลาคม 2569: a green check in front of the title; green dated badge per reviewed language variant. */
.review-check { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; border-radius: 999px; background: #27AE60; color: #fff; font-size: .85em; font-weight: 700; line-height: 1; vertical-align: middle; white-space: nowrap; }
.status.reviewed { background: #e3f5e8; color: #1e7a43; border: 1px solid #27AE60; font-weight: 700; }
.status.checking { opacity: .75; }

.review-summary { display:block; width:100%; margin:1rem 0; padding:1rem; text-align:left; background:#e0ebe2; border:1px solid #8ba897; color:#245439; font-weight:700; }
.review-summary:disabled { opacity:1; color:#50615a; cursor:default; }