/* Yala777 light theme override — 覆盖框架与 RSC 水合注入的深色 */
/* 强制盖过 :root 变量（无视源码顺序） */
:root {
    --bg: #ffffff !important;
    --bg-soft: #f4f6fb !important;
    --header-bg: rgba(255,255,255,.92) !important;
    --surface: #ffffff !important;
    --surface-2: #f6f8fc !important;
    --border: #e6eaf2 !important;
    --border-strong: #d4dbe8 !important;
    --text: #0f1b2d !important;
    --dim: #56627a !important;
    --faint: #8b97a6 !important;
    --primary: #2c63e9 !important;
    --accent: #ff9f1c !important;
    --accent-ink: #ff9f1c !important;
    --on-cta: #ffffff !important;
    --grad: linear-gradient(135deg,#4f8ff7 0%,#2c63e9 100%) !important;
    --grad-deep: linear-gradient(135deg,#2c63e9 0%,#15347e 100%) !important;
    --glow: rgba(44,99,233,.28) !important;
    --glow-soft: rgba(44,99,233,.10) !important;
    --shadow: 0 10px 30px rgba(15,27,45,.10) !important;
    --footer-bg: #0c1320 !important;
    --footer-line: #1c2738 !important;
    color-scheme: light !important;
}

/* 覆盖框架 CSS 写死的深色顶栏/hero/按钮 */
[data-brand="yala777"] .site-header:before {
    background: linear-gradient(180deg,#fffffffa,#ffffffdb), var(--grad-deep) !important;
    box-shadow: 0 6px 18px rgba(15,27,45,.08) !important;
}
[data-brand="yala777"] .site-header .lang-trigger,
[data-brand="yala777"] .site-header .nav-ctas .btn-ghost {
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 2px 10px rgba(15,27,45,.08) !important;
}
[data-brand="yala777"] .site-header .nav-ctas .btn-ghost:hover {
    background: #eef3ff !important;
}
[data-brand="yala777"] .hero-media:after {
    background: linear-gradient(90deg,var(--bg) 3%,#ffffffcc 30%,transparent 67%) !important;
}
[data-brand="yala777"] .hero-ctas .btn-ghost {
    background: #eef3ff !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 8px 22px rgba(15,27,45,.08) !important;
}

/* ===== Category page banner (self-healing, injected by page_banner.js) ===== */
.page-banner { padding: 8px 0 12px; }
.page-banner img { width: 100%; height: auto; display: block; border-radius: 20px;
  box-shadow: 0 18px 44px rgba(15,18,23,.14); }
@media (max-width: 680px) { .page-banner img { border-radius: 14px; } }