/* ==========================================================================
   ตรีจักร 191 — ชั้นหน้าตา "Sunny" (ยกจากดีไซน์ demometa ของ Muse AI)
   โหลดต่อจาก app.css · แก้เฉพาะหน้าตา ไม่แตะ logic — ลบ <link> ไฟล์นี้ใน index.html = กลับเป็นแบบเดิม
   สีที่มีความหมาย (แถบสถานะแดง/เหลือง/เขียว, ป้ายซ้อม) คงเดิม
   ========================================================================== */
:root {
  --navy: #05080f;
  --navy-2: #0b1120;
  --navy-3: #121b30;
  --card: #0e1527;
  --line: rgba(148, 163, 196, .14);
  --line-soft: rgba(148, 163, 196, .08);
  --ink: #f3f6fc;
  --muted: #8d99b5;
  --red: #ff4545;
  --red-deep: #e02626;
  --red-glow: rgba(255, 69, 69, .45);
  --green: #3ddc97;
  --ok: #3ddc97;
  --amber: #ffc24b;
  --warn: #ffc24b;
  --sky: #5ea9ff;
  --sky-2: #2f7de1;
  --grad-red: linear-gradient(135deg, #ff5a5a, #e02626 60%, #a31212);
  --grad-card: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0));
  --shadow: 0 8px 28px rgba(0, 0, 0, .45);
  --spring: cubic-bezier(.32, .72, .28, 1);
  --font: "IBM Plex Sans Thai", "Sarabun", "Sukhumvit Set", "Thonburi", system-ui, sans-serif;
}

html, body { background: var(--navy); }
body {
  background:
    radial-gradient(700px 360px at 50% -120px, rgba(255, 69, 69, .13), transparent 70%),
    var(--navy);
  -webkit-font-smoothing: antialiased;
}
.app { background: transparent; box-shadow: none; }

/* แถบสถานะเหตุ: ใช้แดงเข้ม ให้ตัวขาวอ่านชัด (contrast ≥ 4.5:1) */
.sb.red { background: var(--red-deep); }

/* ---------- แถบบน ---------- */
.topbar {
  background: rgba(5, 8, 15, .78);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.brand img, .logo { border-radius: 12px; box-shadow: 0 6px 18px rgba(255, 69, 69, .28); }

/* ---------- การ์ด ---------- */
.card, .gcard, .steps, .modecard, .stat, .kpis span, .rolebtn, .role {
  background: var(--grad-card), var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.card, .gcard { border-radius: 22px; }
.steps, .modecard, .stat, .kpis span { border-radius: 16px; }
.steps li { background: var(--navy-3); border-color: var(--line-soft); border-radius: 14px; }
.card h3 { color: var(--muted); letter-spacing: .1em; }
.gcard.gold { background: var(--grad-card), #1d1709; border-color: rgba(255, 194, 75, .35); }
.gcard.red { background: var(--grad-card), #221016; border-color: rgba(255, 69, 69, .4); }
.gcard.blue { background: var(--grad-card), #0c1a30; border-color: rgba(94, 169, 255, .35); }
.incline { background: rgba(255, 69, 69, .1); border-color: rgba(255, 69, 69, .35); border-radius: 16px; }

/* ---------- หน้าเลือกบทบาท ---------- */
.rolebtn { border-radius: 22px; transition: transform .2s var(--spring), border-color .2s; }
.rolebtn:active { transform: scale(.98); }
.rolebtn.student { background: var(--grad-card), var(--card); border-color: rgba(61, 220, 151, .35); }
.rolebtn.cmd { border-color: rgba(255, 69, 69, .35); }
.hero img { border-radius: 26px; box-shadow: 0 14px 44px rgba(255, 69, 69, .35); }
.kicker { color: var(--muted); letter-spacing: .22em; }

/* ---------- ปุ่ม ---------- */
.btn { border-radius: 16px; transition: transform .15s var(--spring), filter .15s; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--grad-card), var(--card); border: 1px solid var(--line); }
.btn.red, .btn.plan { background: var(--grad-red); box-shadow: 0 10px 28px rgba(224, 38, 38, .35); }
.btn.sky { background: var(--sky-2); }
.btn.help { background: var(--grad-card), var(--card); border: 1.5px solid rgba(255, 194, 75, .7); color: var(--amber); }

/* ปุ่มแดงใหญ่ (กดค้าง) — วงแหวนเรืองแสงแบบ demometa */
.hold {
  background: var(--grad-red);
  box-shadow:
    0 0 0 10px rgba(255, 69, 69, .1),
    0 0 0 11px rgba(255, 69, 69, .35),
    0 18px 60px var(--red-glow);
}
.hold.mid { box-shadow: 0 0 0 8px rgba(255, 69, 69, .1), 0 0 0 9px rgba(255, 69, 69, .3), 0 14px 44px var(--red-glow); }

/* ---------- ตัวเลือกแบบแบ่งช่อง ---------- */
.seg { background: var(--navy-2); border: 1px solid var(--line-soft); }
.seg button { border-radius: 12px; transition: background .2s; }

/* ---------- คิว ผบ. ---------- */
.q { border-radius: 16px; }
.q.me { box-shadow: 0 0 0 2px rgba(255, 69, 69, .5); }

/* ---------- การ์ดแจ้งเตือน push ---------- */
.pushpub { background: var(--grad-card), #0c1a30; border: 1px solid rgba(94, 169, 255, .4); border-radius: 22px; }
.pushpub.on { background: var(--grad-card), #0c2219; border-color: rgba(61, 220, 151, .4); }

/* ---------- แถบแท็บล่าง ---------- */
.ctabs {
  background: rgba(8, 12, 22, .86);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-top: 1px solid var(--line-soft);
}
.ctabs button { transition: color .2s; gap: 3px; padding-top: 10px; }
.ctabs button i { display: block; height: 24px; transition: transform .2s var(--spring); }
.ctabs button i svg { width: 24px; height: 24px; display: block; }
.ctabs button.on { color: var(--red); box-shadow: none; }
.ctabs button.on i { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 8px var(--red-glow)); }
.ctabs em { background: #2a3550; top: 4px; right: auto; left: calc(50% + 6px); font-size: 12px; line-height: 18px; padding: 0 6px; }
.ctabs em.hot { background: var(--red); box-shadow: 0 0 0 2px rgba(8, 12, 22, .9); }

/* ---------- หน้าต่างลอย / toast ---------- */
.modal > * { border-radius: 22px; }
.toast { border-radius: 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .rolebtn, .ctabs button, .ctabs button i { transition: none; }
}