/* ══ ฉากพื้นหลังทะเลทราย / ท้องฟ้ากลางคืน + ปรับพื้นผิวให้อ่านชัดบนฉาก ══ */
#bgScene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
#bgScene > *{position:absolute;inset:0}
#bgScene canvas{width:100%;height:100%}

/* ── โหมดสว่าง: ท้องฟ้าบ่ายอุ่น + ดวงอาทิตย์ในหมอกฝุ่น ── */
#bgScene .bg-sky{background:
  linear-gradient(180deg,#cfe0ea 0%,#ead9c2 34%,#f2c99a 58%,#eeb27a 74%,#e3a06a 100%)}
#bgScene .bg-sun{inset:auto;left:68%;top:46%;width:46vmin;height:46vmin;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,250,235,.95) 0 9%,rgba(255,236,200,.55) 16%,rgba(255,214,160,.22) 34%,rgba(255,200,140,0) 62%);
  animation:bgSunDrift 40s ease-in-out infinite alternate}
@keyframes bgSunDrift{to{transform:translate(-50%,-52%) scale(1.04)}}
#bgScene .bg-dunes{inset:auto 0 0 0;width:100%;height:52vh;min-height:300px}
#bgScene .d1{fill:#e2b689;opacity:.85}
#bgScene .d2{fill:#d79e6a}
#bgScene .d3{fill:#c7864f}
#bgScene .d4{fill:#b06f3c}
#bgScene .ridge{fill:none;stroke:rgba(255,236,205,.55);stroke-width:1.4}
/* ฟิล์มบาง ๆ ทับฉาก ให้ตัวอักษรที่วางบนพื้นตรง ๆ ยังอ่านออก */
#bgScene .bg-scrim{background:linear-gradient(180deg,rgba(255,250,242,.22),rgba(255,248,238,.04) 40%,rgba(255,246,234,.10))}

/* ── โหมดมืด: ท้องฟ้ากลางคืน ── */
html[data-theme="dark"] #bgScene .bg-sky{background:
  radial-gradient(120% 70% at 70% 100%,#1b2142 0%,rgba(27,33,66,0) 60%),
  linear-gradient(180deg,#03050c 0%,#060a1a 38%,#0c1330 72%,#141a38 100%)}
html[data-theme="dark"] #bgScene .bg-sun{left:78%;top:18%;width:16vmin;height:16vmin;
  background:radial-gradient(circle,rgba(235,240,255,.9) 0 18%,rgba(200,215,255,.18) 30%,rgba(160,180,255,0) 62%)}
html[data-theme="dark"] #bgScene .d1{fill:#141a33;opacity:1}
html[data-theme="dark"] #bgScene .d2{fill:#0f1428}
html[data-theme="dark"] #bgScene .d3{fill:#0b0f1f}
html[data-theme="dark"] #bgScene .d4{fill:#070a15}
html[data-theme="dark"] #bgScene .ridge{stroke:rgba(150,170,230,.22)}
html[data-theme="dark"] #bgScene .bg-scrim{background:linear-gradient(180deg,rgba(3,5,12,0),rgba(3,5,12,.18))}

@media (prefers-reduced-motion:reduce){ #bgScene .bg-sun{animation:none} }

/* ── พื้นผิวของเว็บบนฉาก: การ์ดเป็นกระจกฝ้า "ทึบพอ" (88–92%) เพื่อคง contrast ≥ 4.5:1 ── */
html.has-scene{
  --bg:transparent;
  --paper:rgba(255,252,247,.93); --sunken:rgba(251,244,234,.94); --hover:rgba(247,236,220,.95);
  --line:rgba(120,84,48,.22); --ink-3:#5b6470;
}
html.has-scene[data-theme="dark"]{
  --paper:rgba(13,17,32,.80); --sunken:rgba(20,25,44,.86); --hover:rgba(30,36,62,.92);
  --line:rgba(170,185,230,.16); --ink-3:#97a6b6;
}
html.has-scene body{background:transparent}
html.has-scene .card,html.has-scene .file-card,html.has-scene .trend-card,html.has-scene .monitor,
html.has-scene .note-card,html.has-scene .qcard,html.has-scene .fc-card{
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 6px 24px rgba(80,50,20,.10)}
html.has-scene[data-theme="dark"] .card,html.has-scene[data-theme="dark"] .file-card,
html.has-scene[data-theme="dark"] .trend-card,html.has-scene[data-theme="dark"] .note-card,
html.has-scene[data-theme="dark"] .qcard,html.has-scene[data-theme="dark"] .fc-card{box-shadow:0 8px 28px rgba(0,0,0,.35)}
html.has-scene header{background:rgba(255,250,242,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html.has-scene[data-theme="dark"] header{background:rgba(6,9,20,.72)}
html.has-scene #tabbar{background:rgba(255,250,242,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html.has-scene[data-theme="dark"] #tabbar{background:rgba(6,9,20,.82)}
/* hero และหัวข้อที่วางบนพื้นตรง ๆ → แผ่นกระจกรองด้านหลัง */
html.has-scene .hero h1,html.has-scene .hero .greet{text-shadow:0 1px 12px rgba(255,248,236,.9)}
html.has-scene[data-theme="dark"] .hero h1,html.has-scene[data-theme="dark"] .hero .greet{text-shadow:0 1px 14px rgba(3,5,12,.9)}
html.has-scene .hero .metrics{background:var(--paper);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.has-scene .hero{background:transparent!important}
html.has-scene .sechead,html.has-scene .notes-head,html.has-scene .notes-tools,html.has-scene .plan-wrap > .muted,
html.has-scene .note-hero{background:var(--paper);border-radius:12px;padding:10px 14px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* กล่องตัวเลขในการ์ด "ความคืบหน้าของคุณ" ไม่ต้องมีพื้น/เบลอของตัวเอง (เดิมดูเป็นกล่องขาวลอย) */
html.has-scene .monitor .stat{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* อ่านสรุป: เนื้อหาบรรยายยาว ๆ วางบนพื้นสีเดียวทึบ ไม่เห็นฉากด้านหลัง อ่านสบายตา */
html.has-scene .note-body{background:#fffaf3;border:1px solid rgba(120,84,48,.18);border-radius:14px;
  padding:8px 28px 24px;box-shadow:0 6px 24px rgba(80,50,20,.08)}
html.has-scene[data-theme="dark"] .note-body{background:#0d1120;border-color:rgba(170,185,230,.14);box-shadow:0 8px 28px rgba(0,0,0,.4)}
html.has-scene .note-toc ol,html.has-scene .note-toc-btn{background:#fffaf3;border-radius:12px}
html.has-scene[data-theme="dark"] .note-toc ol,html.has-scene[data-theme="dark"] .note-toc-btn{background:#0d1120}
html.has-scene .note-toc ol{padding:12px 12px 12px 30px}
@media (max-width:600px){ html.has-scene .note-body{padding:4px 16px 18px;border-radius:12px} }