@import url('https://fonts.googleapis.com/css2?family=Pyidaungsu:wght@400;700&display=swap');

:root{
  --bg-deep:#050308;
  --bg-navy:#0a0b1f;
  --purple-deep:#180f30;
  --purple-mid:#2c1a52;
  --purple-glow:#6a3fc9;
  --gold:#d4af37;
  --gold-bright:#ffe28a;
  --gold-dim:#8a6f2a;
  --text:#f2eeff;
  --text-dim:#b3a8d1;
  --danger:#ff5b7a;
  --glass:rgba(18,14,36,0.88);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Pyidaungsu','Padauk',sans-serif;
  margin:0; padding:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(106,63,201,0.25), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(212,175,55,0.12), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(44,26,82,0.55), transparent 55%),
    linear-gradient(180deg, var(--bg-navy) 0%, var(--purple-deep) 45%, var(--bg-deep) 100%);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,.85) 50%, transparent),
    radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.6) 50%, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.5) 50%, transparent),
    radial-gradient(1px 1px at 88% 55%, rgba(255,229,138,.6) 50%, transparent),
    radial-gradient(1.5px 1.5px at 25% 90%, rgba(255,255,255,.4) 50%, transparent),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,.5) 50%, transparent);
  background-repeat:repeat;
  background-size:340px 340px;
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.25;}to{opacity:.85;}}
main, header, footer{position:relative; z-index:1;}

header{
  position:sticky; top:0; z-index:100;
  margin-top:8px;
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  padding:10px 14px;
  background:rgba(6,4,14,0.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,0.3);
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
}
/* Header Marquee — ညာဘက်က ချက်ချင်းစတင်ပြီး ဖြေးဖြေးချင်း ပြေးနေသော ရွှေဝါရောင် Glowing Text */
.header-marquee-wrap{
  flex:1 1 0; min-width:0; overflow:hidden; position:relative;
  height:20px;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.header-marquee-text{
  position:absolute; top:50%; left:100%;
  white-space:nowrap; will-change:transform;
  font-size:11px; font-weight:700; letter-spacing:0.3px;
  color:#ffd700;
  animation:
    mmc-marquee-scroll 35s linear infinite,
    mmc-marquee-glow 2.4s ease-in-out infinite;
}
@keyframes mmc-marquee-scroll{
  0%{ transform:translate(0%, -50%); }
  /* -140% (100% ထက်ပိုသော Buffer) — Text က ဘယ်ဘက် Logo အောက်ကို
     လုံးဝ ဝင်ကွယ်သွားပြီးမှ ညာဘက်ကနေ ပြန်ပေါ်လာစေရန် အာမခံချက် */
  100%{ transform:translate(-140%, -50%); }
}
@keyframes mmc-marquee-glow{
  0%, 100%{ text-shadow:0 0 4px rgba(255,215,0,0.5), 0 0 8px rgba(255,215,0,0.3); }
  50%{ text-shadow:0 0 10px rgba(255,215,0,1), 0 0 20px rgba(255,215,0,0.8), 0 0 28px rgba(255,215,0,0.4); }
}
.brand{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.brand img{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--gold); box-shadow:0 0 10px rgba(212,175,55,0.5); }
.brand span{
  font-weight:700; font-size:11px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright),var(--gold-dim));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 4s linear infinite;
}
@keyframes shimmer{to{background-position:200% center;}}
nav{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
nav::-webkit-scrollbar{display:none;}
nav button{
  font-family:inherit; background:rgba(255,255,255,0.03);
  border:1px solid rgba(212,175,55,0.3); color:var(--text-dim);
  padding:8px 12px; border-radius:20px; font-size:12px; white-space:nowrap; cursor:pointer;
  transition:all .25s ease;
}
nav button.active{ background:linear-gradient(135deg,#8a6f2a,#d4af37); color:#1a1204; font-weight:700; border-color:transparent; box-shadow:0 2px 10px rgba(212,175,55,0.4); }

main{ max-width:520px; margin:0 auto; padding:8px 14px 90px; }
.view{display:none; animation:fadeIn .45s ease;}
.view.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.panel{
  background:linear-gradient(160deg, rgba(44,26,82,0.55), rgba(9,7,18,0.85));
  border:1px solid rgba(212,175,55,0.22);
  border-radius:18px; padding:18px; margin-top:14px;
  box-shadow:0 10px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter:blur(6px);
}
.panel h2{
  color:var(--gold-bright); font-size:16px;
  border-bottom:1px solid rgba(212,175,55,0.25); padding-bottom:10px; margin-top:0;
  letter-spacing:.3px;
}
label{ display:block; font-size:13px; color:var(--text-dim); margin:14px 0 6px; }
input, select, textarea{
  width:100%; font-family:inherit; padding:12px 13px; border-radius:12px;
  border:1.5px solid rgba(212,175,55,0.35); background:rgba(9,7,18,0.85);
  color:var(--gold-bright); outline:none; transition:border-color .2s ease;
}
textarea{ resize:vertical; min-height:90px; line-height:1.6; }
input:focus, select:focus, textarea:focus{ border-color:var(--gold-bright); box-shadow:0 0 0 3px rgba(212,175,55,0.15); }
.pill-group{display:flex;gap:8px;flex-wrap:wrap;}
.pill-option{
  flex:1; min-width:100px; text-align:center; padding:11px 8px; border-radius:12px;
  border:1.5px solid rgba(212,175,55,0.3); background:rgba(9,7,18,0.7); color:var(--text-dim);
  font-size:13.5px; cursor:pointer; transition:all .2s ease;
}
.pill-option.selected{
  background:linear-gradient(135deg,#8a6f2a,#d4af37); color:#1a1204; font-weight:700;
  border-color:transparent; box-shadow:0 4px 14px rgba(212,175,55,0.35);
  transform:translateY(-1px);
}
/* 💕 Love Remedy — Responsive Dual-Column Layout (Desktop: side-by-side,
   Mobile: stacks vertically, Compact Padding) */
.loveremedy-columns{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0;
}
@media (max-width: 560px){
  .loveremedy-columns{ grid-template-columns:1fr; gap:10px; }
}
.loveremedy-card{
  text-align:left; border-radius:14px; padding:12px;
  border:1.5px solid rgba(212,175,55,0.4);
  background:linear-gradient(160deg, rgba(212,175,55,0.06), rgba(9,7,18,0.85));
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
/* Result Container — Long-form Content ကို Scroll လုပ်နိုင်၊ Mobile-friendly */
.loveremedy-result-scroll{
  max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.loveremedy-result-scroll::-webkit-scrollbar{ width:5px; }
.loveremedy-result-scroll::-webkit-scrollbar-thumb{ background:rgba(212,175,55,0.4); border-radius:10px; }
.loveremedy-card label{ margin-top:8px; }
.loveremedy-card input{ padding:9px 10px; }
/* Compact Select Dropdowns (Weekday, Sub-category, DOB) — Consistent App Theme */
.loveremedy-select{
  width:100%; padding:9px 10px; font-size:12.5px;
  border-radius:10px; border:1.5px solid rgba(212,175,55,0.35);
  background:rgba(9,7,18,0.85); color:var(--gold-bright);
  cursor:pointer;
}
.loveremedy-dob-row{ display:flex; gap:6px; }
.loveremedy-dob-row .loveremedy-select{ flex:1; min-width:0; padding:9px 4px; text-align:center; }
.btn-main{
  width:100%; margin-top:20px; padding:16px; font-size:16px; font-weight:700;
  border:none; border-radius:40px; cursor:pointer;
  background:linear-gradient(135deg,#8a6f2a,#ffd76a,#d4af37);
  color:#1a1204; box-shadow:0 8px 24px rgba(212,175,55,0.35);
  transition:transform .15s ease;
}
.btn-main:active{ transform:scale(0.98); }
.btn-main:disabled{ opacity:0.55; cursor:not-allowed; }
/* Privacy Policy Checkbox — feature ထပ်ဖြည့်ခြင်း */
.privacy-check-row{ display:flex; align-items:flex-start; gap:10px; margin-top:18px; }
.privacy-check-row input[type="checkbox"]{
  width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color:var(--gold);
  cursor:pointer;
}
.privacy-check-label{ font-size:13px; color:var(--text-dim); line-height:1.5; cursor:pointer; }
.btn-secondary{
  width:100%; margin-top:10px; padding:13px; font-size:14px;
  border:1.5px solid var(--gold); border-radius:40px; background:transparent;
  color:var(--gold-bright); cursor:pointer;
}
.btn-exit{
  width:fit-content; margin:20px auto; padding:10px 25px; border:1px solid var(--danger);
  border-radius:30px; background:rgba(255,91,122,0.06); color:var(--danger);
  font-size:13px; cursor:pointer; display:block;
}
.result-master-title{
  text-align:center; font-size:11px; letter-spacing:0.5px;
  color:var(--text-dim); text-transform:uppercase;
  margin-bottom:6px; opacity:0.85;
}
.result-title{ color:var(--gold-bright); text-align:center; margin-bottom:4px; }
.nimait-name{
  color:var(--danger); font-size:21px; font-weight:700; text-align:center; display:block; margin:12px 0;
  text-shadow:0 0 18px rgba(255,91,122,0.35);
}
.sub-title{ color:#9fd8ff; font-size:15px; font-weight:700; margin:18px 0 6px; display:block; }
.content-text{ line-height:1.85; font-size:15px; color:#e6e1f5; text-align:justify; margin:0; }
.highlight-box{ background:rgba(212,175,55,0.08); border:1px solid var(--gold); padding:14px; border-radius:12px; margin:14px 0; }
.yatyar-box{ border:1px solid var(--danger); background:rgba(255,91,122,0.07); padding:14px; border-radius:12px; margin-top:14px; }

.flip-row{ display:flex; gap:10px; justify-content:center; margin:18px 0 10px; flex-wrap:wrap; }
.flip-card{ width:170px; height:270px; margin:10px auto 6px; perspective:1200px; }
.flip-card.small{ width:30%; min-width:90px; height:150px; margin:0; }
.flip-inner{
  position:relative; width:100%; height:100%;
  transition:transform 1s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.flip-inner.flipped{ transform:rotateY(180deg); }
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:12px; overflow:hidden; border:3px solid var(--gold);
  box-shadow:0 10px 32px rgba(0,0,0,0.6);
}
.flip-back{
  background:
    radial-gradient(circle at 50% 40%, rgba(212,175,55,0.25), transparent 60%),
    linear-gradient(145deg,#2c1a52,#0a0b1f);
  display:flex; align-items:center; justify-content:center; font-size:44px;
}
.flip-back .glyph{ animation:pulseGlyph 2s ease-in-out infinite; }
@keyframes pulseGlyph{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.1);}}
.flip-front{ transform:rotateY(180deg); }
.flip-front img{ width:100%; height:100%; object-fit:cover; display:block; }

.loading-overlay{
  position:fixed; inset:0; z-index:999; background:rgba(4,3,9,0.97);
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  backdrop-filter:blur(4px);
}
.loading-overlay.active{ display:flex; }
.crystal-scene{ position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center; }
.mandala-ring{ position:absolute; border-radius:50%; }
.ring1{ width:150px; height:150px; border:1.5px dashed rgba(212,175,55,0.5); animation:spinCW 9s linear infinite; }
.ring2{ width:120px; height:120px; border:1.5px solid rgba(140,100,255,0.4); animation:spinCCW 6s linear infinite; }
.ring3{ width:96px; height:96px; border:1px dotted rgba(255,255,255,0.25); animation:spinCW 4s linear infinite; }
@keyframes spinCW{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes spinCCW{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}
.crystal-ball{
  width:78px; height:78px; border-radius:50%;
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,0.95), rgba(170,140,255,0.55) 35%, rgba(70,35,140,0.9) 68%, rgba(8,4,20,0.98) 100%);
  box-shadow:0 0 30px rgba(180,140,255,0.55), 0 0 60px rgba(212,175,55,0.25), inset 0 0 24px rgba(255,255,255,0.25);
  position:relative; animation:ballFloat 3.2s ease-in-out infinite;
}
@keyframes ballFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.ball-shine{ position:absolute; top:14%; left:22%; width:22%; height:16%; background:rgba(255,255,255,0.85); border-radius:50%; filter:blur(2.5px); }
.floating-text{
  margin-top:18px; color:var(--gold-bright); font-weight:700; text-align:center;
  padding:0 30px; min-height:22px; animation:floatText 2.2s ease-in-out infinite;
}
@keyframes floatText{0%,100%{opacity:.5; transform:translateY(2px);}50%{opacity:1; transform:translateY(-3px);}}
.loading-bar-track{ width:70%; max-width:280px; height:5px; background:rgba(212,175,55,0.12); border-radius:4px; overflow:hidden; margin-top:14px; }
.loading-bar-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright)); transition:width 0.1s linear; }

.lesson-item{
  display:flex; align-items:center; gap:12px; padding:13px 12px;
  border:1px solid rgba(212,175,55,0.2); border-radius:12px; background:rgba(255,255,255,0.02);
  margin-bottom:8px; cursor:pointer; transition:background .2s ease;
}
.lesson-item:active{ background:rgba(212,175,55,0.08); }
.lesson-num{
  width:34px; height:34px; background:linear-gradient(135deg,#8a6f2a,#d4af37); color:#1a1204;
  display:flex; align-items:center; justify-content:center; border-radius:50%; font-weight:700; font-size:13px;
}
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.grid-card{ border:2px solid rgba(212,175,55,0.3); border-radius:10px; overflow:hidden; cursor:pointer; background:rgba(9,7,18,0.85); transition:transform .2s ease; }
.grid-card:active{ transform:scale(0.96); }
.grid-card.picked{ border-color:var(--danger); box-shadow:0 0 0 2px rgba(255,91,122,0.4); }
.grid-card img{ width:100%; display:block; aspect-ratio:2/3.4; object-fit:cover; }
.modal-backdrop{ position:fixed; inset:0; z-index:500; background:rgba(0,0,0,0.85); display:none; align-items:flex-end; justify-content:center; }
.modal-backdrop.active{ display:flex; }
.modal-sheet{
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:linear-gradient(160deg, rgba(44,26,82,0.5), #0e0b1c);
  border-top:2px solid var(--gold); border-radius:22px 22px 0 0; padding:20px 18px 40px;
}
.modal-close-bar{ display:block; margin:0 auto 15px; width:40px; height:4px; background:var(--gold-dim); border-radius:4px; border:none; }
footer{ text-align:center; padding:24px 16px 40px; color:#4a4560; font-size:11.5px; }

.music-toggle{
  position:fixed; right:16px; bottom:16px; z-index:200;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(160deg, rgba(44,26,82,0.85), rgba(9,7,18,0.95));
  border:1.5px solid var(--gold); color:var(--gold-bright); font-size:20px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  transition:box-shadow .3s ease;
}
.music-toggle.playing{ box-shadow:0 0 0 4px rgba(212,175,55,0.15), 0 0 22px rgba(212,175,55,0.5); animation:musicPulse 2.4s ease-in-out infinite; }
@keyframes musicPulse{0%,100%{box-shadow:0 0 0 4px rgba(212,175,55,0.1), 0 0 16px rgba(212,175,55,0.35);}50%{box-shadow:0 0 0 8px rgba(212,175,55,0.05), 0 0 26px rgba(212,175,55,0.55);}}

/* ===== NEW: Daily / Weekly / Monthly / Ask AI styles ===== */
.day-badge{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px; border-radius:14px; margin-bottom:10px;
  background:linear-gradient(135deg, rgba(212,175,55,0.15), rgba(106,63,201,0.15));
  border:1px solid var(--gold);
}
.day-badge .dayname{ font-size:18px; font-weight:700; color:var(--gold-bright); }
.luck-meter{ display:flex; gap:4px; margin:10px 0; }
.luck-dot{ flex:1; height:8px; border-radius:4px; background:rgba(255,255,255,0.08); }
.luck-dot.on{ background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright)); }
.category-chip{
  display:inline-block; padding:8px 14px; margin:4px; border-radius:20px;
  border:1.5px solid rgba(212,175,55,0.3); background:rgba(9,7,18,0.7);
  color:var(--text-dim); font-size:13px; cursor:pointer; transition:all .2s ease;
}
.category-chip.selected{
  background:linear-gradient(135deg,#8a6f2a,#d4af37); color:#1a1204; font-weight:700; border-color:transparent;
}
.ai-response{ white-space:pre-wrap; }
.ai-thinking{ display:flex; align-items:center; gap:8px; color:var(--gold-bright); font-size:13px; padding:10px 0; }
.ai-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-bright); animation:aiPulse 1s ease-in-out infinite; }
.ai-dot:nth-child(2){ animation-delay:.15s; }
.ai-dot:nth-child(3){ animation-delay:.3s; }
@keyframes aiPulse{0%,100%{opacity:.25; transform:scale(.8);}50%{opacity:1; transform:scale(1.1);}}
.chat-bubble{ padding:12px 14px; border-radius:14px; margin-bottom:10px; }
.chat-bubble.user{ background:rgba(212,175,55,0.12); border:1px solid rgba(212,175,55,0.3); }
.chat-bubble.ai{ background:rgba(106,63,201,0.15); border:1px solid rgba(140,100,255,0.3); }
.api-key-note{ font-size:11.5px; color:var(--text-dim); text-align:center; margin-top:8px; }
/* AI Disclaimer — feature ထပ်ဖြည့်ခြင်း */
.mini-card-thumb{ width:56px; border-radius:8px; border:2px solid var(--gold); flex-shrink:0; }
/* Requirement 3: face-down flip cards for the encyclopedia grid */
.grid-card.mini-flip{ overflow:visible; background:none; border:none; perspective:800px; }
.mini-flip-inner{ position:relative; width:100%; aspect-ratio:2/3.4; transition:transform .5s ease; transform-style:preserve-3d; }
.mini-flip-inner.flipped{ transform:rotateY(180deg); }
.mini-flip-back, .mini-flip-front{ position:absolute; inset:0; backface-visibility:hidden; border-radius:10px; border:2px solid rgba(212,175,55,0.3); overflow:hidden; }
.mini-flip-back{ background:radial-gradient(circle at 50% 40%, rgba(212,175,55,0.25), transparent 60%), linear-gradient(145deg,#2c1a52,#0a0b1f); display:flex; align-items:center; justify-content:center; font-size:26px; }
.mini-flip-front{ transform:rotateY(180deg); background:rgba(9,7,18,0.9); }
.mini-flip-front img{ width:100%; display:block; aspect-ratio:2/3.4; object-fit:cover; }

/* ===== Requirement 2: extra mystical glow effects on card reveal ===== */
@keyframes cardAura{
  0%,100%{ box-shadow:0 10px 32px rgba(0,0,0,0.6), 0 0 18px rgba(212,175,55,0.35), 0 0 0 rgba(140,100,255,0); }
  50%{ box-shadow:0 10px 36px rgba(0,0,0,0.6), 0 0 32px rgba(212,175,55,0.6), 0 0 20px rgba(140,100,255,0.35); }
}
.flip-inner.flipped .flip-front{ animation:cardAura 2.6s ease-in-out infinite; }
.mini-flip-inner.flipped .mini-flip-front{ animation:cardAura 2.6s ease-in-out infinite; border-color:var(--gold-bright); }
.nimait-name{ animation:nameGlow 2.4s ease-in-out infinite; }
@keyframes nameGlow{
  0%,100%{ text-shadow:0 0 12px rgba(255,91,122,0.35); }
  50%{ text-shadow:0 0 22px rgba(255,91,122,0.65), 0 0 10px rgba(212,175,55,0.4); }
}
.modal-sheet img{ box-shadow:0 0 24px rgba(212,175,55,0.45); }
/* Myanmar Calendar — feature ထပ်ဖြည့်ခြင်း */

/* Requirement 5: Mystical Background Image (ပြက္ခဒိန် Panel အောက်ခံ) */
#view-calendar .panel{
  position:relative; overflow:hidden;
  margin-top:8px;
  background-image:
    linear-gradient(rgba(9,7,18,0.88), rgba(9,7,18,0.88)),
    url('https://i.postimg.cc/1tH1nyTS/download.png');
  background-size:cover;
  background-position:center;
  background-blend-mode:normal;
}

/* Requirement 1: Compact Dashboard (Shwe Yat Swe Style) */
.cal-compact-dash{ padding:2px 2px 10px; }
.cal-compact-eng-date{ text-align:center; font-size:11px; color:var(--text-dim); margin-bottom:6px; letter-spacing:0.5px; }
.cal-compact-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.cal-compact-main{ font-size:13px; color:#fff; }
.cal-compact-icon{ font-size:16px; flex-shrink:0; }
.cal-compact-text{ line-height:1.4; }
.cal-compact-item{
  background:rgba(212,175,55,0.12); border:1px solid rgba(212,175,55,0.3);
  border-radius:8px; padding:3px 9px; color:var(--gold-bright); font-size:11px; white-space:nowrap;
}

/* Requirement 2: Enlarged Calendar Grid */
.cal-grid-wrap{ margin-top:6px; }
.cal-grid-header{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:12px; color:var(--gold); margin-bottom:8px; font-weight:700; }
.cal-grid-body{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-cell{ aspect-ratio:0.82; border:1px solid rgba(212,175,55,0.2); border-radius:10px; background:rgba(9,7,18,0.5); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:transform .15s ease; }
.cal-cell:active{ transform:scale(0.93); }
.cal-cell.empty{ border:none; background:none; cursor:default; }
.cal-cell.today{ border-color:var(--gold-bright); box-shadow:0 0 10px rgba(212,175,55,0.6); }
.cal-day-num{ font-size:17px; color:#fff; font-weight:700; }
.cal-day-dots{ display:flex; gap:3px; margin-top:3px; height:7px; }
.cal-dot{ width:7px; height:7px; border-radius:50%; }
.cal-dot-yatyaza{ background:#ffd700; box-shadow:0 0 4px #ffd700; }
.cal-dot-pyathada{ background:var(--danger); box-shadow:0 0 4px var(--danger); }
/* ASO/SEO — App H1 (Visually Hidden — SEO ကို ဆက်ထားပြီး UI ထဲ လုံးဝ မမြင်ရအောင်) */
.app-seo-h1-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.cal-nav-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:14px 0 10px; }
.cal-nav-arrow{ width:38px; height:38px; flex-shrink:0; border-radius:10px; border:1.5px solid var(--gold); background:rgba(212,175,55,0.1); color:var(--gold-bright); font-size:20px; cursor:pointer; }
.cal-nav-selects{ display:flex; gap:6px; flex:1; }
.cal-nav-selects select{ flex:1; margin:0; padding:8px 6px; font-size:13px; text-align:center; }
.cal-weekend{ color:var(--danger) !important; }
.cal-moon-icon{ font-size:10px; line-height:1; margin-top:1px; }
.cal-mm-day{ font-size:10.5px; color:var(--text-dim); line-height:1; display:flex; align-items:center; justify-content:center; gap:2px; margin-top:2px; }
.cal-moon-indicator{ width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.cal-moon-full{ background:#ffffff; box-shadow:0 0 5px rgba(255,255,255,0.9); border:1px solid rgba(255,255,255,0.5); }
.cal-moon-new{ background:#0a0a0a; border:1px solid rgba(255,255,255,0.35); }
.cal-cell.cal-adjacent{ opacity:0.32; }
/* Sidebar Menu — feature ထပ်ဖြည့်ခြင်း */
.sidebar-overlay{
  position:fixed; inset:0; z-index:600; background:rgba(0,0,0,0.6);
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.sidebar-overlay.active{ opacity:1; visibility:visible; }
.sidebar-menu{
  position:fixed; top:0; left:0; bottom:0; z-index:601; width:78%; max-width:300px;
  background:linear-gradient(160deg,#180f30,#0a0b1f 70%);
  border-right:1px solid rgba(212,175,55,0.3);
  transform:translateX(-100%); transition:transform .28s ease;
  overflow-y:auto; padding-bottom:20px;
}
.sidebar-menu.active{ transform:translateX(0); }
.sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 16px; border-bottom:1px solid rgba(212,175,55,0.25);
}
.sidebar-item{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  font-size:14px; color:#e6e1f5; cursor:pointer;
  border-bottom:1px solid rgba(212,175,55,0.1);
  transition:background .15s ease;
}
.sidebar-item:active, .sidebar-item:hover{ background:rgba(212,175,55,0.1); }
.sidebar-item span{ flex:1; }
.sidebar-item.nav-btn.active{
  background:linear-gradient(135deg,#8a6f2a,#d4af37);
  color:#1a1204; font-weight:700;
}
.sidebar-item.nav-btn.active span{ color:#1a1204; }
/* Currency Exchange Table — feature ထပ်ဖြည့်ခြင်း */
.currency-table-wrap{
  margin-top:12px; border:1px solid rgba(212,175,55,0.3); border-radius:12px;
  overflow:hidden; background:rgba(9,7,18,0.5);
}
.currency-table-header{
  display:grid; grid-template-columns:1.3fr 1fr 1fr;
  background:linear-gradient(135deg,#8a6f2a,#d4af37);
  color:#1a1204; font-weight:700; font-size:13px; text-align:center;
  padding:10px 6px;
}
.currency-row{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; align-items:center;
  padding:12px 6px; border-top:1px solid rgba(212,175,55,0.15); font-size:13px;
}
.currency-row .cur-name{ display:flex; align-items:center; gap:8px; text-align:left; padding-left:8px; color:#fff; font-weight:600; }
.currency-row .cur-buy, .currency-row .cur-sell{ text-align:center; color:var(--gold-bright); font-weight:700; }
.cur-unit{ display:block; font-size:10px; color:var(--text-dim); font-weight:400; }
.cur-status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-left:4px; background:#666; cursor:default; }
/* Amulet Card — feature ထပ်ဖြည့်ခြင်း (Screenshot/Print friendly) */
.amulet-card{
  margin-top:18px; padding:22px 18px; border-radius:16px;
  background:radial-gradient(circle at 50% 0%, rgba(106,63,201,0.35), transparent 60%),
             linear-gradient(160deg,#180f30,#050308 80%);
  border:3px double var(--gold);
  box-shadow:0 0 30px rgba(212,175,55,0.35), inset 0 0 20px rgba(212,175,55,0.1);
  text-align:center; position:relative;
}
.amulet-card::before{ content:'✦'; position:absolute; top:8px; left:12px; color:var(--gold); font-size:14px; }
.amulet-card::after{ content:'✦'; position:absolute; top:8px; right:12px; color:var(--gold); font-size:14px; }
.amulet-title{ font-size:13px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin-bottom:10px; }
.amulet-img{ width:130px; border-radius:10px; border:2px solid var(--gold-bright); box-shadow:0 0 22px rgba(212,175,55,0.6); margin:6px 0 14px; }
.amulet-card-name{ font-size:20px; font-weight:800; color:var(--gold-bright); text-shadow:0 0 14px rgba(212,175,55,0.6); margin-bottom:6px; }
.amulet-concern{ font-size:12px; color:var(--text-dim); font-style:italic; margin-bottom:10px; }
.amulet-issued{ font-size:11px; color:var(--text-dim); margin-top:10px; border-top:1px dashed rgba(212,175,55,0.3); padding-top:8px; }
/* ============ Onboarding Walkthrough (NEW — Additive Only) ============ */
.onboarding-overlay{
  position:fixed; inset:0; z-index:900;
  background:rgba(5,3,8,0.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease;
  padding:20px;
}
.onboarding-overlay.active{ opacity:1; visibility:visible; }
.onboarding-card{
  width:100%; max-width:340px;
  background:linear-gradient(160deg,#180f30,#0a0b1f 80%);
  border:1.5px solid var(--gold);
  border-radius:18px;
  padding:30px 24px 24px;
  text-align:center;
  box-shadow:0 0 40px rgba(212,175,55,0.3);
}
.onboarding-step{ display:none; }
.onboarding-step.active{ display:block; animation:onboardFade .35s ease; }
@keyframes onboardFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.onboarding-icon{ font-size:46px; margin-bottom:14px; }
.onboarding-card h3{ color:var(--gold-bright); font-size:18px; margin:0 0 10px; }
.onboarding-card p{ color:#e6e1f5; font-size:14px; line-height:1.6; margin:0; }
.onboarding-dots{ display:flex; justify-content:center; gap:6px; margin:22px 0 18px; }
.onboarding-dot{ width:7px; height:7px; border-radius:50%; background:rgba(212,175,55,0.3); transition:background .2s ease; }
.onboarding-dot.active{ background:var(--gold-bright); }
.onboarding-buttons{ display:flex; gap:10px; }
.onboarding-skip{
  flex:1; padding:11px; border-radius:10px; border:1px solid rgba(212,175,55,0.35);
  background:transparent; color:var(--text-dim); font-size:13px; cursor:pointer;
}
.onboarding-next{
  flex:1; padding:11px; border-radius:10px; border:none;
  background:linear-gradient(135deg,#8a6f2a,#d4af37); color:#1a1204;
  font-weight:700; font-size:13px; cursor:pointer;
}