:root{
  --cream:#FFFDF3;
  --yellow:#FCE08A;
  --yellow-soft:#FFF6D8;
  --amber:#F3B24A;
  --amber-deep:#E08A2E;
  --ink:#4A3B22;
  --ink-soft:#7A6743;
  --panel:#F6C97B;
  --shadow:rgba(120,86,25,.18);
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#EDE7DC url("assets/background.png") center/cover fixed no-repeat;
  display:grid;place-items:center;
  height:100dvh;overflow:hidden;
  padding:0;
}
body::before{content:"";position:fixed;inset:0;background:rgba(255,253,243,.45);z-index:-1}

/* ---------- app shell ---------- */
.app{
  width:100%;height:100%;max-height:100%;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--cream);
}

/* ---------- page body ---------- */
.page{
  flex:1;min-height:0;                       /* สำคัญ: ให้ลูกย่อได้ ไม่ดันจอ */
  display:grid;grid-template-columns:1fr minmax(280px,31%);
  gap:0;background:var(--cream);
}

/* ---------- stage ---------- */
.stage{
  position:relative;overflow:hidden;min-height:0;
  background:url("assets/background.png") center/cover no-repeat;
  padding:30px;
}
.logo{position:absolute;top:clamp(14px,2.4vmin,26px);left:clamp(16px,2.6vmin,30px);text-align:center;z-index:3}
.logo-mark{
  width:clamp(62px,9vmin,104px);height:clamp(62px,9vmin,104px);border-radius:50%;background:#fff;
  display:grid;place-items:center;position:relative;
  font-family:"Bricolage Grotesque",serif;font-size:clamp(1.5rem,4vmin,2.6rem);font-weight:800;
  color:#171717;box-shadow:0 6px 18px rgba(150,110,40,.18);
}
.logo-mark span{margin-left:-.22em}
.logo-mark .spark{position:absolute;right:20px;top:26px;font-size:.9rem;font-style:normal}
.logo-name{
  margin-top:6px;font-family:"Bricolage Grotesque",serif;font-weight:800;
  letter-spacing:.16em;font-size:clamp(.65rem,1.4vmin,.95rem);color:#171717;
}

/* floating word cloud — ขนาดตัวอักษรมาจาก weight ที่เซิร์ฟเวอร์คำนวณ */
.cloud{position:absolute;inset:0;z-index:2}
.word{
  position:absolute;white-space:nowrap;color:var(--ink);
  opacity:0;transform:translate(-50%,-50%);line-height:1.25;
  animation:float 7s ease-in-out infinite,fadein .8s ease forwards;
  text-shadow:0 2px 10px rgba(255,255,255,.75);
  cursor:pointer;transition:color .2s,text-shadow .2s;
}
.word:hover{color:var(--amber-deep)}
.word.s-pos{color:#3F7A4B}
.word.s-neutral{color:var(--ink-soft)}
.word.active{color:#C0521F;text-shadow:0 0 0 #fff,0 2px 14px rgba(192,82,31,.35)}
.word::after{
  content:"×" attr(data-count);
  font-size:.5em;vertical-align:super;margin-left:.25em;opacity:.55;font-weight:600;
}
@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 12px))}}
@keyframes fadein{to{opacity:1}}

/* สรุปตัวเลข มุมขวาบนของเวที */
.stats{position:absolute;top:clamp(14px,2.4vmin,26px);right:clamp(14px,2.4vmin,26px);display:flex;gap:10px;z-index:3}
.stats{margin-right:46px}
.stat{
  background:rgba(255,255,255,.86);border-radius:14px;padding:8px 14px;text-align:center;
  box-shadow:0 4px 12px rgba(150,110,40,.16);min-width:76px;
}
.stat b{display:block;font-size:1.15rem;color:var(--amber-deep)}
.stat span{font-size:.7rem;color:var(--ink-soft)}

.socials{position:absolute;left:clamp(16px,2.6vmin,30px);bottom:clamp(14px,2.4vmin,26px);display:flex;gap:clamp(8px,1.4vmin,14px);z-index:3}
.soc{
  width:clamp(32px,4.4vmin,48px);height:clamp(32px,4.4vmin,48px);border-radius:50%;display:block;
  box-shadow:0 5px 14px rgba(120,86,25,.25);transition:transform .18s;
  background-size:cover;
}
.soc:hover{transform:translateY(-4px) scale(1.06)}
.soc.ig{background:radial-gradient(circle at 30% 107%,#fdf497,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.soc.fb{background:#1877F2}
.soc.tt{background:#111}
.soc.xx{background:#000}
.soc::after{
  content:"";display:block;height:100%;background:center/52% no-repeat;
}
.soc.ig::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='white' stroke='none'/%3E%3C/svg%3E")}
.soc.fb::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3h-3.1V8.1c0-.9.3-1.5 1.5-1.5H16.7V4a20 20 0 0 0-2.4-.1c-2.4 0-4 1.5-4 4.2V10H7.5v3h2.8v8z'/%3E%3C/svg%3E")}
.soc.tt::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.3 3h-2.6v11.4a2.3 2.3 0 1 1-2.3-2.3c.2 0 .4 0 .6.1V9.5a5 5 0 1 0 4.3 5V8.9a5.7 5.7 0 0 0 3.4 1.1V7.4a3.4 3.4 0 0 1-3.4-3.4z'/%3E%3C/svg%3E")}
.soc.xx::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.5 3h3.2l-7 8 8.2 10h-6.4l-5-6.1L4.7 21H1.5l7.5-8.6L1.2 3h6.6l4.5 5.6zm-1.1 16h1.8L7.7 4.8H5.8z'/%3E%3C/svg%3E")}

/* ---------- panel ---------- */
.panel{
  background:var(--panel);min-height:0;
  margin:clamp(10px,1.6vmin,18px);border-radius:26px;
  padding:clamp(12px,1.8vmin,22px) 16px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 10px 26px rgba(160,115,35,.22);
}
.panel-title{
  text-align:center;text-transform:uppercase;letter-spacing:.14em;
  font-family:"Bricolage Grotesque",serif;font-size:clamp(1rem,2.2vmin,1.45rem);color:#fff;
  text-shadow:0 2px 6px rgba(150,105,25,.35);
}
.feed{
  display:flex;flex-direction:column;gap:10px;
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scroll-behavior:smooth;
  /* ดึงกล่องออกไปกินระยะขอบของพาเนล แล้วดันเนื้อหากลับเข้ามา
     เพื่อให้การ์ดกว้างเท่าฟอร์มด้านล่างพอดี ส่วนแถบเลื่อนไปอยู่ในระยะขอบแทน */
  margin:0 -7px;padding:0 1px 0 7px;   /* ขวาเผื่อไว้ 1px เพราะแถบเลื่อนกินไป 6px */
}
.feed::-webkit-scrollbar{width:6px}
.feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.6);border-radius:99px}
.card{
  background:#fff;border-radius:16px;padding:clamp(9px,1.3vmin,13px) 14px;
  box-shadow:0 3px 10px rgba(150,110,40,.12);
  animation:pop .35s ease both;
}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card .who{font-weight:700;font-size:clamp(.8rem,1.35vmin,.95rem);margin-bottom:2px}
.card .msg{font-size:clamp(.78rem,1.3vmin,.92rem);line-height:1.4;color:var(--ink)}
.card .msg b{font-weight:700}
.card.admin{background:var(--amber);color:#fff}
.card.admin .msg,.card.admin .who{color:#fff}
.card.mine{background:var(--yellow-soft)}
.notice{
  text-align:center;color:#C0521F;font-weight:600;font-size:clamp(.72rem,1.25vmin,.88rem);line-height:1.35;
}
.notice.warn{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.composer{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:8px 10px 8px 16px}
.composer input{border:0;outline:0;flex:1;font:inherit;font-size:.95rem;color:var(--ink);background:none}
.composer input::placeholder{color:#B9A98A}
#send{
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:#F6A8C0;color:#fff;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;transition:transform .15s,background .2s;
}
#send:hover{transform:scale(1.08);background:#F08BAB}

/* ---------- responsive ---------- */
/* ---------- แท็บเล็ตแนวนอน / จอแคบ ---------- */
@media (max-width:1180px){
  .page{grid-template-columns:1fr minmax(260px,36%)}
  .stats{gap:6px}
  .stat{min-width:62px;padding:6px 10px}
  .stat b{font-size:1rem}
}

/* ---------- แท็บเล็ตแนวตั้ง: พาเนลลงมาอยู่ล่าง ---------- */
@media (max-width:1024px){
  body{height:auto;min-height:100dvh;overflow:auto}
  .app{height:auto;max-height:none}
  .page{grid-template-columns:1fr;grid-template-rows:auto auto}
  .stage{min-height:56vh;padding:20px}
  .panel{margin:0 16px 16px;max-height:none}
  .feed{max-height:44vh}
  .ai-btn{position:absolute;right:20px;bottom:20px}
  .ai-panel{position:fixed;inset:16px}
}

/* ---------- มือถือ ---------- */
@media (max-width:760px){
  .stage{min-height:64vh;padding:16px}
  .logo-mark{width:56px;height:56px;font-size:1.35rem}
  .logo-mark .spark{right:11px;top:14px;font-size:.6rem}
  .logo-name{font-size:.6rem;letter-spacing:.12em}
  .stats{position:absolute;top:14px;right:14px;flex-direction:column;gap:5px}
  .stat{min-width:0;padding:5px 9px;display:flex;align-items:baseline;gap:6px}
  .stat b{font-size:.9rem}
  .stat span{font-size:.6rem}
  .soc{width:34px;height:34px}
  .word{max-width:44vw;white-space:normal;text-align:center;line-height:1.2}
  .ai-btn{right:14px;bottom:14px;padding:9px 16px}
  .panel{margin:0 10px 10px;border-radius:20px}
  /* จอเล็กไม่มีแถบเลื่อนในฟีด จึงไม่ต้องเผื่อระยะให้มัน */
  .feed{max-height:none;overflow:visible;margin:0;padding:0}
  .composer .row.send-row{flex-wrap:nowrap}
  #author{min-width:0}
  .composer input{font-size:16px}   /* กัน iOS ซูมอัตโนมัติตอนโฟกัส */
  .panel-title{font-size:1.05rem}
}

/* ---------- มือถือแนวนอน (จอเตี้ยมาก) ---------- */
@media (max-height:520px) and (orientation:landscape){
  .stage{min-height:100dvh}
  .stats{flex-direction:row}
  .word{font-size:inherit}
}

/* ---------- อุปกรณ์สัมผัส: ตัด hover ที่ค้าง ---------- */
@media (hover:none){
  .word:hover,.tag:hover,.soc:hover,.ai-btn:hover,.star:hover{transform:none}
  .word,.tag{-webkit-tap-highlight-color:transparent}
}

/* ---------- ผู้ใช้ที่ปิดแอนิเมชัน ---------- */
@media (prefers-reduced-motion:reduce){
  .word{animation:fadein .3s ease forwards}
  *{transition-duration:.01ms !important}
}

/* ---------- แท็กประเด็นในการ์ดคอมเมนต์ ---------- */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tags:empty{display:none}
.tag{
  font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;cursor:pointer;
  background:#FDE7C4;color:#9A5A16;transition:transform .15s;
}
.tag:hover{transform:translateY(-1px)}
.tag.s-pos{background:#DFF1E1;color:#2F6B3C}
.tag.s-neutral{background:#E6E3DA;color:#6B6250}
.card.admin .tag{background:rgba(255,255,255,.85)}
.empty{text-align:center;color:#fff;opacity:.85;padding:20px 0;font-size:.9rem}

/* ---------- ฟอร์ม ---------- */
.composer{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px}
.composer .row{display:flex;align-items:center;gap:8px}
.composer .row.send-row{border-top:1px solid #F1E7D3;padding-top:8px}
#author{flex:1;font-size:.85rem}
.stars{display:flex;gap:2px}
.star{
  border:0;background:none;cursor:pointer;font-size:1.05rem;color:#E3D8C2;
  padding:0 1px;line-height:1;transition:transform .12s,color .15s;
}
.star:hover{transform:scale(1.2)}
.star.on{color:var(--amber)}
#send:disabled{opacity:.5;cursor:progress}


/* ---------- ปุ่มและแผงสรุปด้วย AI ---------- */
.ai-btn{
  position:absolute;right:clamp(14px,2.4vmin,26px);bottom:clamp(14px,2.4vmin,26px);z-index:4;
  border:0;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;
  font-size:clamp(.75rem,1.4vmin,.92rem);padding:10px 20px;color:#fff;
  background:linear-gradient(135deg,var(--amber),#E8749B);
  box-shadow:0 6px 18px rgba(190,120,60,.32);
  transition:transform .16s,box-shadow .16s;
}
.ai-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(190,120,60,.4)}
.ai-btn:disabled{opacity:.65;cursor:progress}

.ai-panel{
  position:absolute;inset:clamp(10px,2vmin,24px);z-index:6;
  background:rgba(255,253,243,.97);backdrop-filter:blur(6px);
  border-radius:22px;padding:clamp(14px,2.2vmin,24px);
  box-shadow:0 18px 50px rgba(120,86,25,.28);
  display:flex;flex-direction:column;gap:12px;
  animation:pop .25s ease both;
}
.ai-panel[hidden]{display:none}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ai-head h2{font-size:clamp(.95rem,2vmin,1.25rem);color:var(--amber-deep);letter-spacing:.02em}
.ai-actions button{
  border:0;background:#F6E4C4;color:var(--ink);cursor:pointer;
  width:30px;height:30px;border-radius:50%;font-size:.95rem;margin-left:6px;
  transition:background .18s,transform .15s;
}
.ai-actions button:hover{background:var(--amber);color:#fff;transform:scale(1.08)}
.ai-body{overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding-right:4px}
.ai-body h3{
  font-size:clamp(.78rem,1.4vmin,.92rem);color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;
}
.ai-body p,.ai-body li{font-size:clamp(.78rem,1.4vmin,.95rem);line-height:1.55}
.ai-overview{background:#FFF3D6;border-radius:14px;padding:12px 14px}
.ai-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.ai-item{background:#fff;border-radius:12px;padding:10px 13px;box-shadow:0 2px 8px rgba(150,110,40,.1)}
.ai-item .top{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:3px}
.sev{font-size:.68rem;padding:2px 9px;border-radius:999px;font-weight:700;flex:0 0 auto;
     background:#FDE7C4;color:#9A5A16}
.sev.high{background:#FBD9D2;color:#B33A22}
.sev.low{background:#E4EFE2;color:#3F7A4B}
.ai-item .why{color:var(--ink-soft)}
.ai-body .bullet{display:flex;gap:8px}
.ai-body .bullet::before{content:"92";color:var(--amber-deep);font-weight:700}
.ai-new{display:flex;flex-wrap:wrap;gap:8px}
.ai-new .chip{background:#EDE6F5;color:#5A4A78;border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:600}
.ai-note{font-size:.72rem;color:var(--ink-soft);text-align:right}
.ai-error{background:#FBD9D2;color:#B33A22;border-radius:12px;padding:12px 14px;font-size:.85rem;line-height:1.5}
.ai-loading{display:grid;place-items:center;flex:1;color:var(--ink-soft);font-size:.9rem}

/* ---------- แถบแสดงตัวกรองที่กำลังใช้อยู่ ---------- */
.filter-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#fff;border-radius:14px;padding:8px 8px 8px 14px;
  box-shadow:0 3px 10px rgba(150,110,40,.14);
  animation:pop .22s ease both;
}
.filter-bar[hidden]{display:none}
.filter-label{font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.filter-term{
  font-weight:700;font-size:clamp(.8rem,1.4vmin,.95rem);color:var(--amber-deep);
  max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.filter-count{font-size:.75rem;color:var(--ink-soft);margin-right:auto}
#filterClear{
  border:0;cursor:pointer;flex:0 0 auto;
  width:28px;height:28px;border-radius:50%;
  background:#F6E4C4;color:var(--ink);font-size:.85rem;line-height:1;
  transition:background .18s,transform .15s,color .18s;
}
#filterClear:hover{background:#E05A2B;color:#fff;transform:scale(1.1)}
#filterClear:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}

/* คำที่กำลังถูกกรองบนพื้นหลัง ให้เห็นชัดว่าเลือกอยู่ */
.word.active{
  color:#fff !important;
  background:var(--amber-deep);
  padding:2px 12px;border-radius:999px;
  box-shadow:0 6px 16px rgba(190,120,60,.38);
  text-shadow:none;
}
.word.dimmed{opacity:.38}

/* คำใบ้ว่าคลิกคำได้ */
.cloud-hint{
  position:absolute;left:50%;bottom:clamp(12px,2.2vmin,22px);transform:translateX(-50%);
  z-index:3;font-size:clamp(.66rem,1.15vmin,.78rem);color:var(--ink-soft);
  background:rgba(255,255,255,.72);border-radius:999px;padding:5px 14px;
  pointer-events:none;transition:opacity .3s;
}
@media (max-width:760px){
  .cloud-hint{display:none}
  .filter-term{max-width:100%}
}

/* ---------- กล่องยืนยันว่าไม่ใช่บอท ----------
   โหมด interaction-only: กล่องจะสูงเป็น 0 จนกว่าระบบจะขอให้ผู้ใช้ยืนยัน
   จึงไม่กินที่ในฟอร์มตอนใช้งานปกติ */
.turnstile-row{display:flex;justify-content:center;width:100%}
.turnstile-row:empty{display:none}
.turnstile-row > *:not(:empty){margin-top:8px}
.turnstile-row iframe{max-width:100%}

/* ---------- ข้อความบอกว่ามีระบบกันสแปม ---------- */
.spam-note{
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:clamp(.7rem,1.2vmin,.8rem);color:var(--ink-soft);
  opacity:.8;margin-top:2px;
}
.spam-note svg{width:12px;height:12px;fill:var(--amber);flex:0 0 auto}

/* =========================================================
   โหมดมืด
   - ตามค่าระบบเป็นค่าเริ่มต้น (prefers-color-scheme)
   - ผู้ใช้กดสลับเองได้ เก็บค่าไว้ที่ data-theme บน <html>
   ========================================================= */

/* วางไว้แถวเดียวกับกล่องสถิติมุมขวาบน ให้ดูเป็นชุดเดียวกัน */
.theme-btn{
  position:absolute;z-index:5;border:0;cursor:pointer;
  /* +19px เพื่อให้อยู่กึ่งกลางแนวตั้งเทียบกับกล่องสถิติ (สูงราว 74px) */
  top:calc(clamp(14px,2.4vmin,26px) + 19px);
  right:clamp(14px,2.4vmin,26px);
  width:36px;height:36px;border-radius:14px;
  background:rgba(255,255,255,.86);font-size:.92rem;line-height:1;
  box-shadow:0 4px 12px rgba(150,110,40,.16);
  transition:transform .18s,background .2s;
}
.theme-btn:hover{transform:translateY(-2px) scale(1.06)}
.theme-btn:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px}

/* ---------- ชุดสีโหมดมืด ---------- */
:root[data-theme="dark"]{
  --cream:#18130D;
  --surface:#241C13;
  --surface-2:#2E2418;
  --panel:#5A3F1B;
  --yellow-soft:#3A2C18;
  --amber:#E9A63F;
  --amber-deep:#FFC46B;
  --ink:#F2E7D5;
  --ink-soft:#B8A88C;
  --shadow:rgba(0,0,0,.55);
}

:root[data-theme="dark"] body{background-color:#0F0C08}
:root[data-theme="dark"] body::before{background:rgba(15,12,8,.72)}
:root[data-theme="dark"] .app,
:root[data-theme="dark"] .page{background:var(--cream)}

/* พื้นหลังลายทางสว่างเกินไปในโหมดมืด จึงคลุมด้วยชั้นทึบ */
:root[data-theme="dark"] .stage::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(14,11,7,.74);pointer-events:none;
}

:root[data-theme="dark"] .word{text-shadow:0 2px 12px rgba(0,0,0,.8)}
:root[data-theme="dark"] .word.s-pos{color:#8FD3A0}
:root[data-theme="dark"] .word.active{color:#231A0E !important;background:var(--amber-deep)}

:root[data-theme="dark"] .stat{background:rgba(46,36,24,.9)}
:root[data-theme="dark"] .theme-btn,
:root[data-theme="dark"] .cloud-hint{background:rgba(46,36,24,.9);color:var(--ink-soft)}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .filter-bar,
:root[data-theme="dark"] .composer,
:root[data-theme="dark"] .ai-item{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .card .msg,
:root[data-theme="dark"] .card .who{color:var(--ink)}
:root[data-theme="dark"] .card.admin{background:#8A5A1E}
:root[data-theme="dark"] .card.mine{background:var(--surface-2)}
:root[data-theme="dark"] .composer input{color:var(--ink)}
:root[data-theme="dark"] .composer input::placeholder{color:#8C7C63}
:root[data-theme="dark"] .composer .row.send-row{border-top-color:#3A2E1E}
:root[data-theme="dark"] .star{color:#5A4A33}
:root[data-theme="dark"] .star.on{color:var(--amber-deep)}

:root[data-theme="dark"] .tag{background:#4A3417;color:#F3C783}
:root[data-theme="dark"] .tag.s-pos{background:#28402C;color:#9BD5AA}
:root[data-theme="dark"] .tag.s-neutral{background:#38332A;color:#C0B6A2}
:root[data-theme="dark"] .card.admin .tag{background:rgba(0,0,0,.28);color:#FFE6BE}

:root[data-theme="dark"] #filterClear,
:root[data-theme="dark"] .ai-actions button{background:#43331E;color:var(--ink)}
:root[data-theme="dark"] .notice{color:#F0A07C}
:root[data-theme="dark"] .panel-title{color:#FFF0D6;text-shadow:0 2px 6px rgba(0,0,0,.4)}

:root[data-theme="dark"] .ai-panel{background:rgba(24,19,13,.97)}
:root[data-theme="dark"] .ai-overview{background:var(--surface-2)}
:root[data-theme="dark"] .ai-new .chip{background:#382E4A;color:#CDBEEA}
:root[data-theme="dark"] .sev{background:#4A3417;color:#F3C783}
:root[data-theme="dark"] .sev.high{background:#5A2A1E;color:#FFB3A0}
:root[data-theme="dark"] .sev.low{background:#28402C;color:#9BD5AA}
:root[data-theme="dark"] .ai-error{background:#4A2119;color:#FFB3A0}
:root[data-theme="dark"] .feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}

/* โลโก้: วงกลมขาวจ้าเกินไป ปรับเป็นครีมหม่น */
:root[data-theme="dark"] .logo-mark{background:#EFE3CE;color:#1A1409}
:root[data-theme="dark"] .logo-name{color:#EFE3CE}

/* ---------- ตามค่าระบบ เมื่อผู้ใช้ยังไม่ได้เลือกเอง ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cream:#18130D; --surface:#241C13; --surface-2:#2E2418;
    --panel:#5A3F1B; --yellow-soft:#3A2C18;
    --amber:#E9A63F; --amber-deep:#FFC46B;
    --ink:#F2E7D5; --ink-soft:#B8A88C; --shadow:rgba(0,0,0,.55);
  }
  :root:not([data-theme="light"]) body{background-color:#0F0C08}
  :root:not([data-theme="light"]) body::before{background:rgba(15,12,8,.72)}
  :root:not([data-theme="light"]) .app,
  :root:not([data-theme="light"]) .page{background:var(--cream)}
  :root:not([data-theme="light"]) .stage::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:rgba(14,11,7,.74);pointer-events:none;
  }
  :root:not([data-theme="light"]) .word{text-shadow:0 2px 12px rgba(0,0,0,.8)}
  :root:not([data-theme="light"]) .word.s-pos{color:#8FD3A0}
  :root:not([data-theme="light"]) .word.active{color:#231A0E !important;background:var(--amber-deep)}
  :root:not([data-theme="light"]) .stat,
  :root:not([data-theme="light"]) .theme-btn,
  :root:not([data-theme="light"]) .cloud-hint{background:rgba(46,36,24,.9)}
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .filter-bar,
  :root:not([data-theme="light"]) .composer,
  :root:not([data-theme="light"]) .ai-item{background:var(--surface);color:var(--ink)}
  :root:not([data-theme="light"]) .card.admin{background:#8A5A1E}
  :root:not([data-theme="light"]) .card.mine{background:var(--surface-2)}
  :root:not([data-theme="light"]) .composer input{color:var(--ink)}
  :root:not([data-theme="light"]) .composer input::placeholder{color:#8C7C63}
  :root:not([data-theme="light"]) .tag{background:#4A3417;color:#F3C783}
  :root:not([data-theme="light"]) .tag.s-pos{background:#28402C;color:#9BD5AA}
  :root:not([data-theme="light"]) #filterClear,
  :root:not([data-theme="light"]) .ai-actions button{background:#43331E;color:var(--ink)}
  :root:not([data-theme="light"]) .notice{color:#F0A07C}
  :root:not([data-theme="light"]) .ai-panel{background:rgba(24,19,13,.97)}
  :root:not([data-theme="light"]) .ai-overview{background:var(--surface-2)}
  :root:not([data-theme="light"]) .logo-mark{background:#EFE3CE;color:#1A1409}
  :root:not([data-theme="light"]) .logo-name{color:#EFE3CE}
}

/* ปุ่มสลับธีมบนจอเล็ก ย้ายไปมุมซ้ายบนของสถิติ */
@media (max-width:760px){
  /* จอแคบ: ปุ่มอยู่มุมขวาบน แล้วดันกล่องสถิติลงมาอยู่ใต้ปุ่ม
     (มุมขวาล่างเป็นที่ของปุ่มสรุป AI แล้ว) */
  .stats{margin-right:0;top:56px}
  .theme-btn{top:14px;right:14px;width:34px;height:34px;border-radius:12px}
  .theme-btn{top:14px}
  .theme-btn:hover{transform:none}
}