:root {
  --bg: #150C16;
  --bg-soft: #1F1420;
  --panel: #241826;
  --border: #3A2A3D;
  --gold: #E3A73C;
  --gold-soft: #B5822E;
  --maroon: #6E1E2B;
  --vermillion: #C24B5B;
  --sage: #7FA487;
  --text: #F6EEE2;
  --text-muted: #C3AFC0;
  --text-faint: #8B7A89;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --hero-glow-1: rgba(227,167,60,0.14);
  --hero-glow-2: rgba(110,30,43,0.35);
  --cta-gradient-end: #3A1420;
  --btn-gold-text: #241708;
  --card-shadow: rgba(0,0,0,0.35);
  --header-bg: rgba(21,12,22,0.92);
}
:root[data-theme="light"] {
  --bg: #FBF5EC;
  --bg-soft: #F3E9D8;
  --panel: #FFFFFF;
  --border: #E5D6BC;
  --gold: #C6862A;
  --gold-soft: #A66E1F;
  --maroon: #8A2A3A;
  --vermillion: #C24B5B;
  --sage: #4C7A57;
  --text: #2B1D14;
  --text-muted: #5C4A3C;
  --text-faint: #8A7460;
  --hero-glow-1: rgba(198,134,42,0.10);
  --hero-glow-2: rgba(138,42,58,0.08);
  --cta-gradient-end: #6E1E2B;
  --btn-gold-text: #2B1708;
  --card-shadow: rgba(120,90,50,0.18);
  --header-bg: rgba(251,245,236,0.92);
}
:root[data-theme="light"] .fab-chat,
:root[data-theme="light"] .astro-avatar,
:root[data-theme="light"] .logo .mark { color: #fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body);
  line-height: 1.55; overflow-x: hidden; width: 100%;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 10px; color: var(--text); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-head .eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; font-size: 12.5px; font-weight: 700; }
.section-head h2 { font-size: 30px; margin-top: 8px; }
.section-head p { color: var(--text-muted); font-size: 15px; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; border: none; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: var(--btn-gold-text); }
.btn-outline { background: transparent; border: 1.5px solid var(--gold); color: var(--gold); }
.btn-ghost { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { padding: 7px 16px; font-size: 12.5px; }
.btn-whatsapp { background: #25D366; color: #06280F; }

/* ---- Modal (used for the chat transcript viewer on profile.php) ---- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 400; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px; width: 100%; max-width: 440px; box-shadow: 0 20px 60px var(--card-shadow); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-close { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 13px; }
.modal-close:hover { border-color: var(--gold); color: var(--gold); }

/* ---- Top bar ---- */
.topbar { background: var(--bg-soft); border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding: 7px 20px; flex-wrap: wrap; gap: 6px; }
.topbar a { text-decoration: none; color: var(--text-muted); }
.topbar a:hover { color: var(--gold); }

/* ---- Header / Nav ---- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .mark { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--maroon)); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; }
.logo .name { font-family: var(--font-display); font-size: 17px; color: var(--text); }
.logo .name small { display: block; font-family: var(--font-body); font-size: 10.5px; color: var(--text-faint); letter-spacing: .5px; }
.main-nav { display: flex; gap: 26px; align-items: center; }
.main-nav a { text-decoration: none; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.main-nav a:hover { color: var(--gold); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.mobile-nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; }

/* ---- Hero ---- */
.hero { position: relative; padding: 80px 0 70px; overflow: hidden; background: radial-gradient(ellipse at top right, var(--hero-glow-1), transparent 55%), radial-gradient(ellipse at bottom left, var(--hero-glow-2), transparent 55%); }
.hero .container { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
.hero .eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; font-size: 12.5px; font-weight: 700; }
.hero h1 { font-size: 42px; line-height: 1.18; margin: 12px 0 16px; }
.hero p.lead { color: var(--text-muted); font-size: 16px; margin-bottom: 26px; max-width: 480px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.hero-stats div strong { display: block; font-size: 22px; color: var(--gold); font-family: var(--font-display); }
.hero-stats div span { font-size: 12px; color: var(--text-faint); }
.hero-art { position: relative; }
.hero-card { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 26px; box-shadow: 0 20px 60px var(--card-shadow); }
.hero-card .zodiac-ring { font-size: 46px; text-align: center; margin-bottom: 10px; }
.hero-card h3 { text-align: center; font-size: 17px; }
.hero-card p { text-align: center; color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
.hero-topics { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hero-topics span { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.hero-topics span:hover { border-color: var(--gold); color: var(--gold); }

/* ---- Trust strip ---- */
.trust-strip { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; }
.trust-strip .container { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px; text-align: center; }
.trust-strip .item { font-size: 13px; color: var(--text-muted); }
.trust-strip .item strong { color: var(--gold); display: block; font-size: 19px; font-family: var(--font-display); }

/* ---- Services ---- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.service-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 26px 22px; transition: transform .15s ease, border-color .15s ease; }
.service-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.service-card .icon { font-size: 30px; margin-bottom: 12px; }
.service-card h3 { font-size: 17px; }
.service-card p { color: var(--text-muted); font-size: 13.5px; margin: 8px 0 14px; }
.service-card .price { color: var(--gold); font-weight: 700; font-size: 13.5px; }

/* ---- Astrologers ---- */
.astro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.astro-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 24px; text-align: center; position: relative; }
.astro-avatar { width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 14px; background: linear-gradient(135deg, var(--maroon), var(--gold-soft)); display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; }
.astro-status { position: absolute; top: 20px; right: 20px; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(127,164,135,0.15); color: var(--sage); border: 1px solid rgba(127,164,135,0.35); }
.astro-status.off { background: rgba(139,122,137,0.15); color: var(--text-faint); border-color: var(--border); }
.astro-card h3 { font-size: 16.5px; margin-bottom: 2px; }
.astro-card .spec { color: var(--gold); font-size: 12.5px; margin-bottom: 8px; }
.astro-card .meta { color: var(--text-faint); font-size: 12px; margin-bottom: 10px; }
.astro-card p.bio { color: var(--text-muted); font-size: 12.5px; min-height: 36px; margin-bottom: 14px; }

/* ---- Testimonials ---- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.testi-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.testi-card .stars { color: var(--gold); font-size: 13px; margin-bottom: 10px; }
.testi-card p { color: var(--text-muted); font-size: 13.5px; font-style: italic; margin-bottom: 14px; }
.testi-card .who { font-size: 13px; font-weight: 600; }
.testi-card .who span { color: var(--text-faint); font-weight: 400; font-size: 12px; }

/* ---- CTA band ---- */
.cta-band { background: linear-gradient(135deg, var(--maroon), var(--cta-gradient-end)); border-radius: 22px; padding: 46px 40px; text-align: center; margin: 0 20px; }
.cta-band h2, .cta-band p { color: #fff; }
.cta-band h2 { font-size: 26px; }
.cta-band p { color: rgba(246,238,226,0.8); margin-bottom: 22px; }

/* ---- Footer ---- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding: 50px 0 22px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; }
.footer-grid h4 { color: var(--gold); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.footer-grid p, .footer-grid a { color: var(--text-muted); font-size: 13.5px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--gold); }
.footer-bottom { text-align: center; color: var(--text-faint); font-size: 12px; margin-top: 36px; border-top: 1px solid var(--border); padding-top: 18px; }

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--header-bg); backdrop-filter: blur(8px); flex-direction: column; padding: 10px 20px; border-bottom: 1px solid var(--border); gap: 4px; }
  .main-nav.mobile-open { display: flex; }
  .main-nav a { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .main-nav a:last-child { border-bottom: none; }
  .mobile-nav-toggle { display: block; }
  .site-header .container { padding: 10px 14px; gap: 6px; }
  .logo .mark { width: 32px; height: 32px; font-size: 15px; }
  .logo .name { font-size: 14px; }
  .logo .name small { display: none; }
  .nav-cta { gap: 6px; }
  .util-toggle { gap: 5px; }
  .toggle-btn, .lang-btn { width: 32px; height: 32px; font-size: 12px; padding: 0; }
  .nav-cta .btn-outline span { display: none; }
  .nav-cta .btn-outline .nav-account-name { display: inline-block; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  .nav-cta .btn { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 30px; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { margin: 0 12px; padding: 34px 22px; }
}

/* =========================================================
   Live Chat widget (floating launcher + popup window)
   ========================================================= */
.floating-actions { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.fab { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; border: none; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.fab-whatsapp { background: #25D366; color: #06280F; }
.fab-chat { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: var(--btn-gold-text); position: relative; }
.fab-chat .ping { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--vermillion); border: 2px solid var(--bg); }

.chat-widget { position: fixed; right: 20px; bottom: 92px; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 130px); background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 20px 60px var(--card-shadow); z-index: 210; display: none; flex-direction: column; overflow: hidden; transition: width .18s ease, height .18s ease, right .18s ease, left .18s ease, top .18s ease, bottom .18s ease, border-radius .18s ease; }
.chat-widget.open { display: flex; }
.chat-widget.maximized { right: 16px; left: 16px; bottom: 16px; top: 16px; width: auto; height: auto; max-width: none; max-height: none; border-radius: 16px; }
.chat-widget.minimized { height: auto; }
.chat-widget.minimized .cw-timer-bar, .chat-widget.minimized .cw-warning-banner, .chat-widget.minimized .chat-widget-body,
.chat-widget.minimized .cw-panel, .chat-widget.minimized .cw-quick-actions, .chat-widget.minimized .chat-widget-footer { display: none !important; }
.chat-widget-header { background: linear-gradient(135deg, var(--maroon), var(--gold-soft)); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; flex-shrink: 0; }
.chat-widget-header .title { font-family: var(--font-display); font-size: 15.5px; color: #fff; }
.chat-widget-header .sub { font-size: 11px; color: rgba(255,255,255,0.8); }
.chat-widget-header .cw-header-btns { display: flex; gap: 6px; align-items: center; }
.chat-widget-header button { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.chat-widget-header button:hover { background: rgba(255,255,255,0.3); }
.chat-widget-body { flex: 1; overflow-y: auto; padding: 16px; min-height: 0; }
.chat-widget-body label { display: block; font-size: 12px; color: var(--text-muted); margin: 12px 0 6px; }
.chat-widget-body input, .chat-widget-body textarea, .chat-widget-body select {
  width: 100%; background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; font-family: inherit;
}
.chat-widget-body .cw-msg { max-width: 78%; padding: 8px 12px; border-radius: 13px; font-size: 13px; margin-bottom: 8px; line-height: 1.4; }
.chat-widget-body .cw-msg.visitor { margin-left: auto; background: var(--gold); color: var(--btn-gold-text); border-bottom-right-radius: 3px; }
.chat-widget-body .cw-msg.astrologer { background: var(--bg-soft); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.chat-widget-body .cw-msg.system { text-align: center; margin: 8px auto; color: var(--text-faint); font-size: 11px; font-style: italic; max-width: 100%; }
.chat-widget-footer { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; gap: 8px; flex-shrink: 0; }
.chat-widget-footer textarea { flex: 1; resize: none; }
.cw-new-chat-btn { display:block; width:100%; margin-top:14px; }
@media (max-width: 640px) {
  .chat-widget.open { right: 0; left: 0; bottom: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
  .chat-widget.open.minimized { top: auto; height: auto; border-radius: 16px 16px 0 0; }
  .floating-actions { bottom: 16px; right: 16px; }
}
.cw-error { color: var(--vermillion); font-size: 12px; margin-top: 8px; }
.cw-status-pill { display: inline-block; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: rgba(127,164,135,0.18); color: var(--sage); margin-left: 6px; }
.cw-card { max-width: 85% !important; }
.cw-card-note { font-size: 11px; color: var(--text-faint); margin: 4px 0; }

/* ---- Discount counter-offer celebration card ---- */
@keyframes cwDiscountPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227,167,60,0.5); }
  50% { box-shadow: 0 0 0 10px rgba(227,167,60,0); }
}
.cw-discount-card { position: relative; overflow: visible; text-align: center; background: linear-gradient(160deg, rgba(227,167,60,0.22), rgba(194,75,91,0.12)); border: 1.5px solid var(--gold); animation: cwDiscountPulse 2s infinite; }
.cw-discount-badge { display: inline-block; background: var(--vermillion); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; }
.cw-discount-title { font-size: 13px; font-weight: 700; color: var(--text); }
.cw-discount-prices { margin: 6px 0 2px; }
.cw-discount-old { text-decoration: line-through; color: var(--text-faint); font-size: 13px; margin-right: 8px; }
.cw-discount-new { color: var(--gold); font-size: 20px; font-weight: 800; font-family: var(--font-display); }
.cw-discount-pct { font-size: 11px; color: var(--vermillion); font-weight: 700; margin-bottom: 4px; }
.cw-discount-btn { background: linear-gradient(135deg, var(--vermillion), var(--gold)); color: #fff; }
.cw-confetti-bit { position: absolute; top: 0; width: 6px; height: 10px; border-radius: 2px; opacity: 0.9; animation: cwConfettiFall 1.1s ease-out forwards; pointer-events: none; }
@keyframes cwConfettiFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), 90px) rotate(320deg); opacity: 0; }
}
.cw-card-btn { display:block; margin-top:8px; background: var(--gold); color: var(--btn-gold-text); border:none; border-radius:8px; padding:7px; font-size:12px; font-weight:700; cursor:pointer; width:100%; }
.cw-qr-download { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--gold); text-decoration: none; border: 1px solid var(--gold); border-radius: 999px; padding: 4px 12px; }
.cw-qr-download:hover { background: var(--gold); color: var(--btn-gold-text); }

/* ---- Shared: status pills, history rows, link-style buttons (used on profile.php and the widget's account home screen) ---- */
.pill { font-size:10.5px; padding:2px 8px; border-radius:999px; }
.pill.pending { background: rgba(227,167,60,0.15); color: var(--gold); }
.pill.approved, .pill.completed { background: rgba(127,164,135,0.15); color: var(--sage); }
.pill.rejected { background: rgba(194,75,91,0.15); color: var(--vermillion); }
.pill.waiting { background: rgba(227,167,60,0.15); color: var(--gold); }
.pill.active { background: rgba(127,164,135,0.15); color: var(--sage); }
.pill.closed { background: var(--bg-soft); color: var(--text-faint); }
.chat-hist-row { padding:12px 0; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.chat-hist-row .q { font-size:13px; color:var(--text-muted); }
.link-btn { background:none; border:none; color:var(--gold); font-size:12.5px; cursor:pointer; text-decoration:underline; padding:0; }
.empty-state { text-align:center; color: var(--text-faint); font-size: 13px; padding: 20px 10px; }

/* ---- Add to Home Screen popup ---- */
.install-popup { display:none; position: fixed; left: 20px; right: 20px; bottom: 20px; max-width: 420px; margin: 0 auto; background: var(--panel); border: 1px solid var(--gold); border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px var(--card-shadow); z-index: 300; align-items: center; gap: 12px; }
.install-popup.show { display: flex; flex-wrap: wrap; }
.install-popup-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-faint); font-size: 14px; cursor: pointer; }
.install-popup-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; }
.install-popup-text { flex: 1; min-width: 160px; }
.install-popup-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.install-popup-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.install-popup-btn { width: 100%; margin-top: 4px; }
@media (max-width: 480px) {
  .install-popup { left: 12px; right: 12px; bottom: 12px; padding: 14px; }
}

/* ---- Theme + Language toggle buttons ---- */
.util-toggle { display: flex; align-items: center; gap: 8px; }
.toggle-btn { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease; }
.toggle-btn:hover { border-color: var(--gold); color: var(--gold); }
.lang-btn { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); padding: 0 12px; height: 38px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 700; letter-spacing: .5px; }
.lang-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ---- Chat widget: timer, warnings, quick actions, gifts, recharge ---- */
.cw-timer-bar { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; background:var(--bg-soft); border-bottom:1px solid var(--border); font-size:11.5px; color:var(--text-muted); flex-shrink:0; }
.cw-timer-bar .cw-timer-clock { font-weight:700; color:var(--gold); font-variant-numeric: tabular-nums; }
.cw-warning-banner { display:none; padding:9px 14px; font-size:12px; text-align:center; font-weight:600; flex-shrink:0; }
.cw-warning-banner.show { display:block; }
.cw-warning-banner.free_ending { background: rgba(227,167,60,0.18); color: var(--gold); }
.cw-warning-banner.low { background: rgba(194,75,91,0.15); color: var(--vermillion); }
.cw-warning-banner.critical { background: var(--vermillion); color: #fff; }
.cw-warning-banner button { margin-left:8px; background:rgba(255,255,255,0.25); border:none; color:inherit; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; cursor:pointer; }
.cw-quick-actions { display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--border); overflow-x:auto; flex-shrink:0; }
.cw-qa-btn { flex-shrink:0; background:var(--bg-soft); border:1px solid var(--border); color:var(--text-muted); padding:6px 11px; border-radius:999px; font-size:11.5px; cursor:pointer; white-space:nowrap; }
.cw-qa-btn:hover { border-color:var(--gold); color:var(--gold); }
.cw-panel { display:none; padding:14px; border-top:1px solid var(--border); background:var(--bg-soft); max-height: 260px; overflow-y:auto; flex-shrink:0; }
.cw-panel.open { display:block; }
.cw-panel label { display:block; font-size:11.5px; color:var(--text-muted); margin:10px 0 5px; }
.cw-panel input, .cw-panel select, .cw-panel textarea {
  width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 13px; font-family: inherit;
}
.cw-gift-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.cw-gift-item { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 6px; text-align:center; cursor:pointer; font-size:11.5px; }
.cw-gift-item:hover { border-color:var(--gold); }
.cw-gift-item .g-icon { font-size:20px; display:block; margin-bottom:4px; }
.cw-gift-item .g-price { color:var(--gold); font-weight:700; display:block; margin-top:2px; }
.cw-msg.gift { background: linear-gradient(135deg, rgba(227,167,60,0.25), rgba(227,167,60,0.1)); border:1px solid var(--gold); text-align:center; margin: 4px auto; }
.cw-msg.image img { max-width:100%; border-radius:8px; display:block; }
.cw-panel-close { float:right; background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:13px; }