/* ===================================================================
   JLPT GREETING BANNER STYLES — Extracted from jlpt-site-fixed-v2
   Includes: greeting card, avatar (kanji 3D), sun orb, waveform,
   time-based themes (asa/hiru/yu/yoru), live badge, particles
   =================================================================== */

#ai-greeting-banner{background:linear-gradient(135deg,rgba(192,132,252,0.08) 0%,rgba(129,140,248,0.06) 50%,rgba(52,211,153,0.04) 100%);border:1px solid rgba(192,132,252,0.18);border-radius:14px;padding:10px 14px;margin-bottom:4px;position:relative;overflow:hidden}
#ai-greeting-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(192,132,252,0.5),rgba(129,140,248,0.5),transparent)}
.greeting-inner{display:flex;align-items:center;gap:10px}
.greeting-avatar{width:34px;height:34px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,rgba(192,132,252,0.25),rgba(129,140,248,0.2));border:1px solid rgba(192,132,252,0.3);display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 0 14px rgba(192,132,252,0.2)}
.greeting-text{flex:1}
.greeting-hello{font-family:serif;font-size:14px;background:linear-gradient(135deg,#e8e6f0,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:2px}
.greeting-sub{font-size:10px;color:rgba(232,230,240,0.55);font-family:'DM Mono',monospace}
.greeting-insight{font-size:11px;color:rgba(232,230,240,0.75);margin-top:4px;line-height:1.4;padding-top:4px;border-top:1px solid rgba(255,255,255,0.06)}
.greeting-dot{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px rgba(52,211,153,0.6);flex-shrink:0}
.mh-waveform{position:absolute;bottom:0;left:0;right:0;height:40px;overflow:hidden;pointer-events:none}
#ai-greeting-banner{width:100%;position:relative;margin-bottom:4px;animation:cardEntrance 0.6s cubic-bezier(0.22,1,0.36,1) both}
#ai-greeting-banner::before{content:'';position:absolute;inset:-1px;border-radius:20px;background:linear-gradient(135deg,rgba(192,132,252,0.25),rgba(129,140,248,0.12),rgba(52,211,153,0.12),rgba(249,168,212,0.10));z-index:-1;opacity:0.5;filter: none;animation:outerHalo 6s ease-in-out infinite}
.greeting-card{position:relative;border-radius:18px;overflow:hidden;isolation:isolate;background:rgba(9,7,18,0.92);border:1px solid rgba(255,255,255,0.07);box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,0 8px 32px rgba(0,0,0,0.55);animation:borderBreath 5s ease-in-out infinite}
.greeting-card::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 70% 55% at 10% 50%,rgba(192,132,252,0.07) 0%,transparent 65%),radial-gradient(ellipse 45% 70% at 90% 15%,rgba(52,211,153,0.04) 0%,transparent 60%),radial-gradient(ellipse 55% 45% at 55% 100%,rgba(129,140,248,0.05) 0%,transparent 55%);animation:auroraShift 10s ease-in-out infinite alternate}
.greeting-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(192,132,252,0.0) 15%,rgba(192,132,252,0.55) 38%,rgba(255,255,255,0.65) 50%,rgba(129,140,248,0.55) 62%,rgba(52,211,153,0.25) 82%,transparent 100%);animation:topShimmer 5s ease-in-out infinite;z-index:2}
.greeting-scan{display:none}
.greeting-live-badge{position:absolute;top:12px;right:38px;display:flex;align-items:center;gap:4px;font-family:'DM Mono',monospace;font-size:7px;letter-spacing:0.18em;color:rgba(52,211,153,0.50);text-transform:uppercase;z-index:3;animation:liveAppear 0.4s ease 0.8s both}
.glive-dot{width:4px;height:4px;border-radius:50%;background:#34d399;animation:livePing 2s ease-in-out infinite}
.greeting-inner{display:flex;align-items:center;gap:10px;padding:10px 14px 18px 12px;position:relative;z-index:2}
.greeting-avatar{width:36px !important;height:36px !important;border-radius:10px !important;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:3;background:linear-gradient(145deg,rgba(192,132,252,0.18),rgba(129,140,248,0.12),rgba(52,211,153,0.08)) !important;border:1px solid rgba(192,132,252,0.25) !important;box-shadow:0 0 0 2px rgba(192,132,252,0.05),0 0 14px rgba(192,132,252,0.18),inset 0 1px 0 rgba(255,255,255,0.10) !important;animation:avatarHolo 6s ease-in-out infinite !important}
.greeting-avatar::before{content:'';position:absolute;inset:-5px;border-radius:18px;border:1px solid rgba(192,132,252,0.18);animation:avatarRing 3.5s ease-in-out infinite;pointer-events:none}
.greeting-avatar::after{content:'';position:absolute;inset:-10px;border-radius:22px;border:1px solid rgba(129,140,248,0.08);animation:avatarRing 3.5s ease-in-out infinite 0.6s;pointer-events:none}
.avatar-asa{background:linear-gradient(145deg,rgba(255,180,200,0.20),rgba(249,168,212,0.14),rgba(192,132,252,0.10)) !important;border-color:rgba(249,168,212,0.30) !important}
.avatar-hiru{background:linear-gradient(145deg,rgba(251,191,36,0.18),rgba(250,210,100,0.12),rgba(52,211,153,0.10)) !important;border-color:rgba(251,191,36,0.28) !important}
.avatar-yu{background:linear-gradient(145deg,rgba(251,146,60,0.18),rgba(249,115,22,0.12),rgba(192,132,252,0.10)) !important;border-color:rgba(251,146,60,0.28) !important}
.ksak-bg{position:absolute;inset:0;width:100% !important;height:100% !important;border-radius:inherit;z-index:0;pointer-events:none}
.kanji-3d{font-family:'Noto Serif JP','Yu Mincho',serif;font-size:16px;font-weight:900;position:relative;z-index:2;color:#fff;text-shadow:0 0 6px rgba(255,192,220,0.7),0 0 14px rgba(192,132,252,0.55),0 0 1px rgba(255,255,255,0.9);animation:kanjiFloat 5s ease-in-out infinite}
.kanji-asa{text-shadow:0 0 6px rgba(255,192,210,0.8),0 0 16px rgba(249,168,212,0.60),0 0 1px rgba(255,255,255,0.9) !important}
.kanji-hiru{text-shadow:0 0 6px rgba(255,235,150,0.8),0 0 16px rgba(251,191,36,0.60),0 0 1px rgba(255,255,255,0.9) !important}
.kanji-yu{text-shadow:0 0 6px rgba(255,200,150,0.8),0 0 16px rgba(251,146,60,0.60),0 0 1px rgba(255,255,255,0.9) !important}
.greeting-text{flex:1;min-width:0;position:relative;z-index:3}
.greeting-hello{font-family:'Instrument Serif',Georgia,serif !important;font-size:14px !important;font-weight:400 !important;font-style:italic;background:linear-gradient(120deg,#f4f0ff 0%,#ddd6fe 25%,#c084fc 50%,#a78bfa 72%,#93c5fd 90%) !important;background-size:220% 100% !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;animation:holoText 7s ease-in-out infinite !important;margin-bottom:3px !important;letter-spacing:0.1px;line-height:1.3}
.greeting-sub{font-family:'DM Mono','Courier New',monospace !important;font-size:9.5px !important;background:linear-gradient(90deg,rgba(192,132,252,0.60),rgba(129,140,248,0.50),rgba(52,211,153,0.55)) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;letter-spacing:0.5px !important;text-transform:uppercase !important;margin-bottom:8px !important;display:flex !important;align-items:center !important;animation:none !important}
#greeting-time{background:inherit !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important}
.greeting-insight{display:inline-block !important;font-size:10.5px !important;font-weight:400 !important;color:rgba(220,215,240,0.75) !important;background:rgba(192,132,252,0.07) !important;border:1px solid rgba(192,132,252,0.16) !important;border-radius:8px !important;padding:4px 10px !important;line-height:1.5;position:relative;overflow:hidden;width:fit-content;max-width:100%;box-shadow:0 0 8px rgba(192,132,252,0.06),inset 0 1px 0 rgba(255,255,255,0.05) !important;animation:insightGlow 5s ease-in-out infinite,insightSlideIn 0.5s ease 0.3s both !important}
.greeting-insight::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);animation:insightSweep 6s ease-in-out infinite;pointer-events:none}
.greeting-dot{width:7px !important;height:7px !important;border-radius:50% !important;background:#34d399 !important;flex-shrink:0;position:relative;z-index:3;align-self:flex-start;margin-top:4px;box-shadow:0 0 4px rgba(52,211,153,0.7),0 0 8px rgba(52,211,153,0.3) !important;animation:dotCore 2.8s ease-in-out infinite !important}
.greeting-dot::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(52,211,153,0.35);animation:dotRingG 2.8s ease-in-out infinite}
.greeting-dot::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(52,211,153,0.15);animation:dotRingG 2.8s ease-in-out infinite 0.4s}
.sun-orb{width:72px !important;height:72px !important;border-radius:50% !important;background:none !important;box-shadow:none !important;position:relative;flex-shrink:0;align-self:center !important;display:flex !important;align-items:center;justify-content:center}
.sun-glow-ring{position:absolute;border-radius:50%;border-style:solid;pointer-events:none;z-index:2}
.sun-ring-1{width:58px;height:58px;border-width:2px;border-color:rgba(255,215,0,0.55);box-shadow:0 0 10px rgba(255,215,0,0.3),inset 0 0 8px rgba(255,200,0,0.1);animation:sunRing 3s ease-in-out infinite}
.sun-ring-2{width:70px;height:70px;border-width:1px;border-color:rgba(255,165,0,0.25);animation:sunRing 3s ease-in-out infinite 0.5s}
.sun-video-circle{position:absolute;width:48px;height:48px;border-radius:50%;overflow:hidden;z-index:3;box-shadow:0 0 10px 3px rgba(255,215,0,0.8),0 0 22px 8px rgba(255,160,0,0.5),0 0 36px 14px rgba(255,100,0,0.25);border:2px solid rgba(255,220,80,0.85);animation:sunPulse 3s ease-in-out infinite}
.sun-video{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mh-waveform{position:absolute;bottom:0;left:0;right:0;height:28px;pointer-events:none;z-index:2;overflow:hidden}
.mh-wave-1{position:absolute;bottom:-1px;left:0;width:200%;height:28px;animation:waveScroll1 8s linear infinite}
.mh-wave-1::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44'%3E%3Cpath d='M0 22 Q50 5 100 22 Q150 39 200 22 Q250 5 300 22 Q350 39 400 22 L400 44 L0 44 Z' fill='rgba(192%2C132%2C252%2C0.07)'/%3E%3C/svg%3E") repeat-x bottom;background-size:50% 28px}
.mh-wave-2{position:absolute;bottom:-1px;left:0;width:200%;height:20px;animation:waveScroll2 6s linear infinite}
.mh-wave-2::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 32'%3E%3Cpath d='M0 16 Q40 4 80 16 Q120 28 160 16 Q200 4 240 16 Q280 28 320 16 Q360 4 400 16 L400 32 L0 32 Z' fill='rgba(129%2C140%2C248%2C0.06)'/%3E%3C/svg%3E") repeat-x bottom;background-size:50% 20px}
.mh-wave-3{position:absolute;bottom:-1px;left:0;width:200%;height:14px;animation:waveScroll3 4s linear infinite}
.mh-wave-3::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22'%3E%3Cpath d='M0 11 Q33 3 66 11 Q99 19 132 11 Q165 3 198 11 Q231 19 264 11 Q297 3 330 11 Q363 19 400 11 L400 22 L0 22 Z' fill='rgba(52%2C211%2C153%2C0.055)'/%3E%3C/svg%3E") repeat-x bottom;background-size:50% 14px}

/* --- Keyframe animations used by the greeting banner --- */
@keyframes auroraShift{0%{opacity:0.6;transform:scale(1) translate(0,0)}50%{opacity:1;transform:scale(1.02) translate(1.5%,0.5%)}100%{opacity:0.7;transform:scale(1.01) translate(-0.5%,-0.3%)}}
@keyframes avatarHolo{0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 0 2px rgba(192,132,252,0.05),0 0 14px rgba(192,132,252,0.18),inset 0 1px 0 rgba(255,255,255,0.10)}33%{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 3px rgba(192,132,252,0.09),0 0 22px rgba(192,132,252,0.32),inset 0 1px 0 rgba(255,255,255,0.14)}66%{transform:translateY(-1px) scale(1.01);box-shadow:0 0 0 2px rgba(129,140,248,0.07),0 0 16px rgba(129,140,248,0.25),inset 0 1px 0 rgba(255,255,255,0.12)}}
@keyframes avatarRing{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.08;transform:scale(1.1)}}
@keyframes borderBreath{0%,100%{border-color:rgba(255,255,255,0.07)}50%{border-color:rgba(192,132,252,0.18)}}
@keyframes cardEntrance{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes dotCore{0%,100%{transform:scale(1);box-shadow:0 0 4px rgba(52,211,153,0.7),0 0 8px rgba(52,211,153,0.3)}50%{transform:scale(1.2);box-shadow:0 0 7px rgba(52,211,153,0.9),0 0 14px rgba(52,211,153,0.5)}}
@keyframes dotRingG{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.08;transform:scale(1.4)}}
@keyframes holoText{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes insightGlow{0%,100%{border-color:rgba(192,132,252,0.14);box-shadow:0 0 6px rgba(192,132,252,0.05),inset 0 1px 0 rgba(255,255,255,0.04)}50%{border-color:rgba(192,132,252,0.28);box-shadow:0 0 12px rgba(192,132,252,0.10),inset 0 1px 0 rgba(255,255,255,0.07)}}
@keyframes insightSlideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes insightSweep{0%{left:-100%;opacity:0}30%{opacity:1}70%{opacity:1}100%{left:100%;opacity:0}}
@keyframes kanjiFloat{0%,100%{transform:translateY(0) scale(1);filter:brightness(1)}40%{transform:translateY(-2px) scale(1.04);filter:brightness(1.1)}70%{transform:translateY(-1px) scale(1.02);filter:brightness(1.06)}}
@keyframes liveAppear{from{opacity:0}to{opacity:1}}
@keyframes livePing{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,0.5);transform:scale(1)}50%{box-shadow:0 0 0 3px rgba(52,211,153,0);transform:scale(1.1)}}
@keyframes outerHalo{0%,100%{opacity:0.3}50%{opacity:0.55}}
@keyframes sunPulse{0%,100%{box-shadow:0 0 10px 3px rgba(255,215,0,0.8),0 0 22px 8px rgba(255,160,0,0.5),0 0 36px 14px rgba(255,100,0,0.25)}50%{box-shadow:0 0 16px 5px rgba(255,230,0,1),0 0 30px 12px rgba(255,165,0,0.7),0 0 50px 20px rgba(255,100,0,0.4)}}
@keyframes sunRing{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:.12;transform:scale(1.2)}}
@keyframes topShimmer{0%{opacity:0.2;transform:scaleX(0.4) translateX(-40%)}50%{opacity:0.8;transform:scaleX(1) translateX(0)}100%{opacity:0.2;transform:scaleX(0.4) translateX(40%)}}
@keyframes waveScroll1{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes waveScroll2{from{transform:translateX(-8%)}to{transform:translateX(-58%)}}
@keyframes waveScroll3{from{transform:translateX(-4%)}to{transform:translateX(-54%)}}

/* ====================================================================
   N2 BUNPO INTEGRATION — Layout glue for the host page
   ==================================================================== */
#ai-greeting-banner{
  max-width: 720px;
  margin: 16px auto 8px;
  padding: 0 12px;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
  /* Smooth transition saat tema berubah */
  transition: none;
}
#ai-greeting-banner::before{ display:none !important; }
#ai-greeting-banner > .greeting-card{ margin: 0; }
#ai-greeting-banner .gc{ display:none; }

/* Semua elemen banner ikut transisi tema */
#ai-greeting-banner .greeting-card,
#ai-greeting-banner .greeting-insight{
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* ====================================================================
   DARK MODE (default) — near-black card, neon-purple glow
   Base rules di atas sudah dark, ini menegaskan ulang agar
   tidak tertimpa saat switching tema.
   ==================================================================== */
:root:not([data-theme="light"]) body:not(.sepia-mode) #ai-greeting-banner .greeting-card,
[data-theme="dark"] #ai-greeting-banner .greeting-card{
  background: rgba(9,7,18,0.92) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 32px rgba(0,0,0,0.55) !important;
}
:root:not([data-theme="light"]) body:not(.sepia-mode) #ai-greeting-banner .greeting-insight,
[data-theme="dark"] #ai-greeting-banner .greeting-insight{
  color: rgba(220,215,240,0.75) !important;
  background: rgba(192,132,252,0.07) !important;
  border-color: rgba(192,132,252,0.16) !important;
}
:root:not([data-theme="light"]) body:not(.sepia-mode) #ai-greeting-banner .greeting-live-badge,
[data-theme="dark"] #ai-greeting-banner .greeting-live-badge{
  color: rgba(52,211,153,0.50);
}

/* ====================================================================
   LIGHT MODE — card mengikuti latar terang (putih/lavender pucat)
   supaya menyatu dengan body, bukan kotak gelap yang "ditempel".
   Teks & ikon disesuaikan agar tetap kontras di atas latar terang.
   ==================================================================== */
:root[data-theme="light"] body:not(.sepia-mode) #ai-greeting-banner .greeting-card{
  background: linear-gradient(145deg, #ffffff 0%, #faf8ff 55%, #f5f1ff 100%) !important;
  border: 1px solid rgba(192,132,252,0.30) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.80) inset,
    0 8px 28px rgba(124,58,237,0.10),
    0 2px 8px rgba(17,12,34,0.06) !important;
}
:root[data-theme="light"] body:not(.sepia-mode) #ai-greeting-banner .greeting-card::before{
  background:
    radial-gradient(ellipse 70% 55% at 10% 50%, rgba(192,132,252,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 70% at 90% 15%, rgba(52,211,153,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 55% 100%, rgba(129,140,248,0.07) 0%, transparent 55%) !important;
}
:root[data-theme="light"] body:not(.sepia-mode) #ai-greeting-banner .greeting-avatar{
  background: linear-gradient(145deg, rgba(192,132,252,0.22), rgba(129,140,248,0.16), rgba(52,211,153,0.10)) !important;
  border-color: rgba(192,132,252,0.40) !important;
  box-shadow: 0 0 0 2px rgba(192,132,252,0.08), 0 0 14px rgba(192,132,252,0.18), inset 0 1px 0 rgba(255,255,255,0.50) !important;
}
:root[data-theme="light"] body:not(.sepia-mode) #ai-greeting-banner .kanji-3d{
  color: #6d28d9 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 0 10px rgba(192,132,252,0.35), 0 0 1px rgba(109,40,217,0.4) !important;
  -webkit-text-fill-color: #6d28d9 !important;
}
:root[data-theme="light"] body:not(.sepia-mode) #ai-greeting-banner .greeting-hello{
  background: linear-gradient(120deg, #5b21b6 0%, #7c3aed 35%, #9333ea 65%, #4f46e5 100%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: none !important;
}
:root[data-theme="light"] body:not(.sepia-mode) #ai-greeting-banner .greeting-sub{
  background: linear-gradient(90deg, rgba(124,58,237,0.95), rgba(79,70,229,0.90), rgba(13,148,136,0.90)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
:root[data-theme="light"] body:not(.sepia-mode) #ai-greeting-banner .greeting-insight{
  color: #4b3a6b !important;
  background: rgba(192,132,252,0.08) !important;
  border-color: rgba(192,132,252,0.22) !important;
  box-shadow: 0 0 8px rgba(192,132,252,0.06), inset 0 1px 0 rgba(255,255,255,0.50) !important;
}
:root[data-theme="light"] body:not(.sepia-mode) #ai-greeting-banner .greeting-live-badge{
  color: rgba(13,148,136,0.85) !important;
}
:root[data-theme="light"] body:not(.sepia-mode) #ai-greeting-banner .greeting-card::after{
  background: linear-gradient(90deg,transparent 0%,rgba(192,132,252,0.0) 15%,rgba(192,132,252,0.45) 38%,rgba(124,58,237,0.55) 50%,rgba(129,140,248,0.45) 62%,rgba(52,211,153,0.25) 82%,transparent 100%) !important;
}


/* ====================================================================
   SEPIA / MODE BACA ("Kertas Hangat") — latar krem hangat.
   Card beralih ke tampilan "kertas kuno" dengan tinta cokelat dan
   aksen hangat, menggantikan glow neon agar mata tidak lelah.
   ==================================================================== */
body.sepia-mode #ai-greeting-banner .greeting-card{
  background: linear-gradient(145deg, #fdf6e3 0%, #f5e6c8 100%) !important;
  border: 1px solid rgba(181,101,29,0.28) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.70) inset,
    0 6px 24px rgba(74,56,38,0.14),
    0 2px 6px rgba(74,56,38,0.08) !important;
  animation: none !important;  /* matikan borderBreath — tidak cocok untuk sepia */
}
body.sepia-mode #ai-greeting-banner .greeting-card::before{
  background:
    radial-gradient(ellipse 70% 55% at 10% 50%, rgba(181,101,29,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 45% 70% at 90% 15%, rgba(124,154,58,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 55% 100%, rgba(61,114,164,0.06) 0%, transparent 55%) !important;
}
body.sepia-mode #ai-greeting-banner .greeting-card::after{
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 15%,
    rgba(181,101,29,0.30) 38%,
    rgba(138,79,160,0.22) 50%,
    rgba(61,114,164,0.28) 62%,
    rgba(124,154,58,0.18) 82%,
    transparent 100%) !important;
  opacity: 0.7 !important;
}
body.sepia-mode #ai-greeting-banner .greeting-avatar{
  background: linear-gradient(145deg, rgba(181,101,29,0.18), rgba(138,79,160,0.12), rgba(61,114,164,0.10)) !important;
  border-color: rgba(181,101,29,0.38) !important;
  box-shadow:
    0 0 0 2px rgba(181,101,29,0.08),
    0 0 10px rgba(181,101,29,0.14),
    inset 0 1px 0 rgba(255,255,255,0.60) !important;
  animation: none !important;
}
body.sepia-mode #ai-greeting-banner .kanji-3d{
  color: #6d3a00 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5) !important;
  -webkit-text-fill-color: #6d3a00 !important;
}
body.sepia-mode #ai-greeting-banner .greeting-hello{
  background: linear-gradient(120deg, #8a3500 0%, #8a4fa0 50%, #3d72a4 100%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: none !important; /* matikan holoText — gradient bergeser membuat teks sempat pucat di atas kertas krem */
}
body.sepia-mode #ai-greeting-banner .greeting-sub{
  background: linear-gradient(90deg, rgba(138,79,160,0.85), rgba(61,114,164,0.80), rgba(124,154,58,0.85)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body.sepia-mode #ai-greeting-banner .greeting-insight{
  color: #4a3826 !important;
  background: rgba(181,101,29,0.08) !important;
  border-color: rgba(181,101,29,0.22) !important;
  box-shadow: none !important;
}
body.sepia-mode #ai-greeting-banner .greeting-dot{
  background: #7c9a3a !important;
  box-shadow: 0 0 4px rgba(124,154,58,0.5), 0 0 8px rgba(124,154,58,0.25) !important;
}
body.sepia-mode #ai-greeting-banner .greeting-dot::before{
  border-color: rgba(124,154,58,0.35) !important;
}
body.sepia-mode #ai-greeting-banner .greeting-dot::after{
  border-color: rgba(124,154,58,0.15) !important;
}
body.sepia-mode #ai-greeting-banner .glive-dot{
  background: #7c9a3a !important;
  animation: livePing-sepia 2s ease-in-out infinite !important;
}
body.sepia-mode #ai-greeting-banner .greeting-live-badge{
  color: rgba(124,154,58,0.90) !important;
}
/* Wave warna sepia */
body.sepia-mode #ai-greeting-banner .mh-wave-1::before{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44'%3E%3Cpath d='M0 22 Q50 5 100 22 Q150 39 200 22 Q250 5 300 22 Q350 39 400 22 L400 44 L0 44 Z' fill='rgba(181%2C101%2C29%2C0.10)'/%3E%3C/svg%3E") repeat-x bottom !important;
  background-size: 50% 28px !important;
}
body.sepia-mode #ai-greeting-banner .mh-wave-2::before{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 32'%3E%3Cpath d='M0 16 Q40 4 80 16 Q120 28 160 16 Q200 4 240 16 Q280 28 320 16 Q360 4 400 16 L400 32 L0 32 Z' fill='rgba(138%2C79%2C160%2C0.08)'/%3E%3C/svg%3E") repeat-x bottom !important;
  background-size: 50% 20px !important;
}
body.sepia-mode #ai-greeting-banner .mh-wave-3::before{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22'%3E%3Cpath d='M0 11 Q33 3 66 11 Q99 19 132 11 Q165 3 198 11 Q231 19 264 11 Q297 3 330 11 Q363 19 400 11 L400 22 L0 22 Z' fill='rgba(124%2C154%2C58%2C0.07)'/%3E%3C/svg%3E") repeat-x bottom !important;
  background-size: 50% 14px !important;
}
@keyframes livePing-sepia{
  0%,100%{ box-shadow: 0 0 0 0 rgba(124,154,58,0.5); transform: scale(1); }
  50%{     box-shadow: 0 0 0 3px rgba(124,154,58,0);  transform: scale(1.1); }
}