/* ============================================================
   commeIQ · ชั้นสีสันหน้าแอป (SO-184 · 11 ต.ค. 2569)
   ใช้คู่กับ tokens.css + styles.css — โหลดเฉพาะหน้าที่ปรับหน้าตาแล้ว
   ม่วงหลัก + ไล่ม่วง→ชมพู · ทองใช้กับเรื่องเงิน/เครดิตเท่านั้น
   สีประจำหมวด: เขียว ส้ม ฟ้า ชมพู (ใช้พอดี ๆ)
   ไอคอนใช้ภาพสามมิติจาก /app/assets/icons3d/ เท่านั้น
   ============================================================ */
:root{
  --pop-violet:#5B3FC4;
  --pop-grad:linear-gradient(118deg,#4A2FB0 0%,#6A3FD1 38%,#9B4FD8 72%,#E0609A 112%);
  --pop-grad-soft:linear-gradient(135deg,#F1ECFC 0%,#FBEAF3 100%);
  --c-violet:#6A3FD1; --c-violet-soft:#EFE9FD;
  --c-green:#16A06A;  --c-green-soft:#E2F6EC;
  --c-orange:#EE7A22; --c-orange-soft:#FFEEDD;
  --c-sky:#1F8FD6;    --c-sky-soft:#E1F1FC;
  --c-pink:#DE4A85;   --c-pink-soft:#FCE6EF;
  --c-gold:#F2B705;   --c-gold-soft:#FFF5D1; --c-gold-ink:#7A5800;
}

/* พื้นหน้า: ม่วงอ่อนไล่ลงขาว ไม่จืด */
body.pop{background:
  radial-gradient(900px 320px at 100% 0,rgba(224,96,154,.10),transparent 70%),
  radial-gradient(700px 300px at 0 0,rgba(106,63,209,.12),transparent 70%),
  var(--bg)}

/* ---------- แถบหัวหน้า (hero band) ---------- */
.pop-hero,.pop .pop-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);
  background:var(--pop-grad);color:#fff;padding:20px 124px 20px 20px;margin:14px 0 6px;min-height:128px;
  box-shadow:0 14px 34px rgba(74,47,176,.30)}
.pop-hero::before,.pop-hero::after{content:"";position:absolute;border-radius:50%;z-index:-1;pointer-events:none}
.pop-hero::before{width:220px;height:220px;right:-60px;top:-90px;background:rgba(255,255,255,.13)}
.pop-hero::after{width:140px;height:140px;right:70px;bottom:-80px;background:rgba(255,255,255,.09)}
.pop-hero .ph-kick{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-weight:500;font-size:12px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);padding:3px 10px;border-radius:var(--r-pill);margin-bottom:8px}
.pop-hero h1,.pop-hero h2,.pop .pop-hero h1,.pop .pop-hero h2{color:#fff;font-size:clamp(22px,3.2vw,32px);line-height:1.2;text-shadow:0 2px 12px rgba(30,15,80,.25)}
.pop-hero p,.pop .pop-hero p{margin:6px 0 0;color:rgba(255,255,255,.92);font-size:14px;line-height:1.5;max-width:52ch}
.pop-hero .ph-ic{position:absolute;right:14px;top:50%;transform:translateY(-50%) rotate(-6deg);width:100px;height:100px;object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(30,15,80,.35));animation:popFloat 4s ease-in-out infinite}
.pop-hero .ph-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pop-hero .ph-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--brand-d);font-family:var(--font-d);
  font-weight:600;font-size:13px;padding:7px 13px;border-radius:var(--r-pill);box-shadow:0 4px 12px rgba(30,15,80,.18)}
.pop-hero .ph-chip img{width:20px;height:20px}
.pop-hero .ph-chip.ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:none}
.pop-hero.g-green{background:linear-gradient(118deg,#0E7F57 0%,#16A06A 45%,#3CC48A 100%);box-shadow:0 14px 34px rgba(14,127,87,.28)}
.pop-hero.g-orange{background:linear-gradient(118deg,#D9531E 0%,#EE7A22 50%,#F5A142 100%);box-shadow:0 14px 34px rgba(217,83,30,.28)}
.pop-hero.g-sky{background:linear-gradient(118deg,#1E5FC4 0%,#1F8FD6 55%,#3FB8E6 100%);box-shadow:0 14px 34px rgba(30,95,196,.28)}
.pop-hero.g-pink{background:linear-gradient(118deg,#8A3FD1 0%,#C24FB8 50%,#EE6A92 100%);box-shadow:0 14px 34px rgba(194,79,184,.28)}
@media(min-width:900px){
  .pop-hero,.pop .pop-hero{padding:30px 220px 30px 34px;min-height:170px}
  .pop-hero .ph-ic{width:150px;height:150px;right:40px}
  .pop-hero p,.pop .pop-hero p{font-size:15px}
}
@keyframes popFloat{0%,100%{transform:translateY(-50%) rotate(-6deg)}50%{transform:translateY(calc(-50% - 6px)) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.pop-hero .ph-ic{animation:none}}

/* ---------- หัวข้อหมวดพร้อมไอคอนสามมิติ ---------- */
.pop-h{display:flex;align-items:center;gap:10px;font-size:18px;margin:22px 0 12px}
.pop-h img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(42,30,99,.18))}
.pop-h small{margin-left:auto;font-family:var(--font-b);font-weight:500;font-size:13px;color:var(--t3)}

/* ---------- สีประจำหมวด (ใช้กับ tile/panel/stat) ---------- */
.c-violet{--acc:var(--c-violet);--soft:var(--c-violet-soft)}
.c-green{--acc:var(--c-green);--soft:var(--c-green-soft)}
.c-orange{--acc:var(--c-orange);--soft:var(--c-orange-soft)}
.c-sky{--acc:var(--c-sky);--soft:var(--c-sky-soft)}
.c-pink{--acc:var(--c-pink);--soft:var(--c-pink-soft)}
.c-gold{--acc:var(--c-gold-ink);--soft:var(--c-gold-soft)}

/* ---------- กล่องเมนูสีสันพร้อมไอคอนสามมิติ ---------- */
.ptile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:linear-gradient(160deg,var(--soft,#F1ECFC) 0%,#fff 62%);border:1px solid rgba(42,30,99,.06);
  border-radius:20px;padding:14px 14px 15px;box-shadow:0 4px 14px rgba(42,30,99,.07);transition:transform .16s,box-shadow .2s}
.ptile::after{content:"";position:absolute;right:-26px;top:-26px;width:86px;height:86px;border-radius:50%;background:var(--soft,#F1ECFC);opacity:.85;z-index:0}
.ptile > *{position:relative;z-index:1}
.ptile .pi{width:56px;height:56px;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 14px rgba(42,30,99,.10)}
.ptile .pi img{width:42px;height:42px;object-fit:contain}
.ptile b{display:block;font-family:var(--font-d);font-weight:600;font-size:15px;color:var(--ink);line-height:1.25}
.ptile span.ps{display:block;font-size:12.5px;color:var(--t2);line-height:1.35;margin-top:2px}
.ptile .ptag{position:absolute;top:12px;right:12px;z-index:2;background:var(--acc,var(--brand));color:#fff;font-family:var(--font-d);font-weight:600;
  font-size:11px;padding:3px 9px;border-radius:var(--r-pill);box-shadow:0 3px 8px rgba(0,0,0,.12)}
@media (hover:hover){.ptile:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(42,30,99,.14)}}
.ptile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.ptile-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.ptile-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1400px){.ptile-grid{grid-template-columns:repeat(5,1fr)}}

/* ---------- แผงเนื้อหามีแถบสี ---------- */
.pop-panel{position:relative;background:#fff;border:1px solid rgba(42,30,99,.07);border-radius:var(--r);
  box-shadow:0 4px 16px rgba(42,30,99,.07);overflow:hidden}
.pop-panel::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--acc,var(--brand))}
.pop-panel.soft{background:linear-gradient(170deg,var(--soft,#F1ECFC) 0%,#fff 55%)}
.pop-panel h2,.pop-panel h3{display:flex;align-items:center;gap:9px}
.pop-panel h2 img,.pop-panel h3 img{width:28px;height:28px;object-fit:contain;flex:none}

/* ---------- ช่องสถิติ ---------- */
.pop-stat{background:linear-gradient(160deg,var(--soft,#F1ECFC),#fff 70%);border:1px solid rgba(42,30,99,.06);border-radius:18px;
  padding:14px;box-shadow:0 4px 12px rgba(42,30,99,.06);display:flex;flex-direction:column;gap:4px}
.pop-stat .v{font-family:var(--font-num);font-weight:600;font-size:26px;color:var(--acc,var(--brand-d));line-height:1.1}
.pop-stat .l{font-size:12.5px;color:var(--t2)}

/* ---------- หน้าว่าง (ยังไม่มีของ) ให้มีชีวิต ---------- */
.pop-state{position:relative;text-align:center;padding:30px 20px 26px;margin:16px 0;border-radius:var(--r-lg);
  background:var(--pop-grad-soft);border:1px solid rgba(106,63,209,.10);display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden}
.pop-state::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;top:-150px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
.pop-state > *{position:relative}
.pop-state .ps-ic{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(74,47,176,.25));animation:popBob 3.6s ease-in-out infinite}
.pop-state h1,.pop-state h3{font-size:21px;color:var(--ink)}
.pop-state p{color:var(--t2);font-size:14px;max-width:40ch;margin:0}
.pop-state .ps-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.pop-state .ps-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:520px;margin-top:10px}
.pop-state .ps-links a{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border-radius:16px;padding:12px 6px;
  font-family:var(--font-d);font-weight:500;font-size:12.5px;color:var(--ink);box-shadow:0 4px 12px rgba(42,30,99,.08)}
.pop-state .ps-links a img{width:38px;height:38px;object-fit:contain}
@keyframes popBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.pop-state .ps-ic{animation:none}}

/* ---------- ปุ่มใหญ่ชัด ---------- */
.pop .btn-primary{background:linear-gradient(118deg,#5B3FC4,#7B4FE0 60%,#A452D6);box-shadow:0 8px 20px rgba(91,63,196,.32)}
.btn-pop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r-pill);
  font-family:var(--font-d);font-weight:600;font-size:16px;padding:14px 24px;color:#fff;background:var(--pop-grad);
  box-shadow:0 10px 24px rgba(91,63,196,.32);text-decoration:none}
.btn-pop img{width:22px;height:22px}

/* ---------- ป้ายเล็ก ---------- */
.pop-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-d);font-weight:600;font-size:11.5px;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--soft,#EFE9FD);color:var(--acc,var(--brand-d))}

/* ---------- เครดิต/เงิน = ทอง ---------- */
.pop-money{background:linear-gradient(125deg,#FFD94A 0%,#F2B705 55%,#D99A00 100%);color:#3A2A00}

/* ---------- ชิ้นส่วนกลางเมื่อหน้าใส่ class="pop" ที่ body ---------- */
.pop .panel{border-radius:18px;border-color:rgba(42,30,99,.07);box-shadow:0 4px 16px rgba(42,30,99,.07)}
.pop .sec-hd h2 .bar{background:linear-gradient(180deg,#6A3FD1,#E0609A);width:6px;height:24px}
.pop .steps .st.on .n{background:linear-gradient(118deg,#5B3FC4,#C452B8);box-shadow:0 4px 10px rgba(91,63,196,.3)}
.pop .pay-opt{border-radius:16px;background:#fff}
.pop .pay-opt.on{background:linear-gradient(160deg,#EFE9FD,#fff);box-shadow:0 6px 16px rgba(91,63,196,.12)}
.pop .summary-line.total .num{color:var(--c-pink)}
.pop .state{position:relative;overflow:hidden;margin:16px 0;border-radius:var(--r-lg);
  background:linear-gradient(160deg,#EFE9FD 0%,#FBEAF3 55%,#fff 100%);border:1px solid rgba(106,63,209,.12);box-shadow:0 14px 34px rgba(91,63,196,.12)}
.pop .state .em img{width:116px;height:116px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(74,47,176,.25));animation:popBob 3.6s ease-in-out infinite}
.pop .crumb{padding:12px 0 4px}
.pop-qk{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;background:#fff;border-radius:16px;
  font-family:var(--font-d);font-weight:500;font-size:12.5px;color:var(--ink);box-shadow:0 4px 12px rgba(42,30,99,.08);text-align:center}
.pop-qk img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}

/* ============================================================
   SO-186 (11 ต.ค. 2569) · ขยายให้ทุกหน้าที่ยังจืด
   ใช้ร่วมกับ class เดิมของแต่ละหน้า (หัวหน้า/การ์ดเดิมใส่ pop-hero / pop-panel เพิ่ม)
   ============================================================ */
.pop .pop-hero{border:none;outline:none}
.pop .pop-hero h1 small,.pop .pop-hero .sub,.pop .pop-hero .lead,.pop .pop-hero .muted,.pop .pop-hero li{color:rgba(255,255,255,.92)}
.pop .pop-hero a:not([class]){color:#fff;text-decoration:underline;text-underline-offset:3px}
.pop .pop-hero .ph-ic{z-index:0}
/* ไอคอนสามมิติหน้าหัวข้อ */
.pop-hic{display:inline-block;width:28px;height:28px;object-fit:contain;vertical-align:-6px;margin-right:8px;
  filter:drop-shadow(0 3px 5px rgba(42,30,99,.18))}
/* การ์ดเดิมที่ใส่ pop-panel: เงานุ่ม มุมมน แถบสีบนตามหมวด */
.pop .pop-panel{border-radius:18px;border-color:rgba(42,30,99,.07);box-shadow:0 4px 16px rgba(42,30,99,.07)}
.pop .pop-panel.soft{background:linear-gradient(170deg,var(--soft,#F1ECFC) 0%,#fff 46%)}
/* ตัวเลือกที่เลือกอยู่ (radio/checkbox ในกล่อง) ให้เป็นม่วง ไม่ใช่ทอง */
.pop .pop-panel label:has(input:checked){border-color:var(--pop-violet);background:linear-gradient(160deg,#EFE9FD,#fff);box-shadow:0 6px 16px rgba(91,63,196,.12)}
/* ช่องกรอกในหน้า pop โฟกัสเป็นม่วง */
.pop input:focus,.pop select:focus,.pop textarea:focus{outline:none;border-color:var(--pop-violet);box-shadow:0 0 0 3px rgba(106,63,209,.15)}
/* หัวข้อกลุ่มแบบมีแถบไล่สี */
.pop-sec-t{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600}
@media(min-width:900px){.pop .pop-hero .ph-ic{right:44px}}