/* ============================================
   화면 테마 — 다크(기본) / 라이트 / 기기 설정 따르기  (설정 화면 /settings, web.py theme_attrs)
   <html data-theme="light"> 일 때만 아래 덮어쓰기가 적용된다. 다크 모드는 예전 화면 그대로 (이 파일은 다크 값을 바꾸지 않음).

   규칙
   - 덮어쓰기 선택자는 원래 선택자 앞에 :where([data-theme="light"]) 만 붙인다 → 우선순위(특이도)가 원래 규칙과 같고,
     이 파일이 모든 CSS·<style> 뒤(</head> 바로 앞, _theme_head.html)에 걸리므로 같은 규칙만 이기고
     더 구체적인 규칙(사진 위 글자 등)은 원래대로 남는다.
   - 사진·어두운 그라데이션 위 글자(메인 ORIGINAL 카드, 사진 보기 창, 19 뱃지 등)는 그대로 흰색.
   - 강조색 #FFA178 은 버튼·배경(채우기)에는 그대로, 밝은 바탕 위 '글자'에는 --accent-text(#a84a22, 대비 4.5:1 이상).
   - 모서리·애니메이션은 건드리지 않는다.
   ============================================ */

/* 강조색 글자 (다크: 예전 강조색 그대로 / 라이트: 진한 코랄) — 템플릿 인라인 style 에서도 var(--accent-text) 로 씀 */
:root { --accent-text: #FFA178; }

:root[data-theme="light"] {
  --bg: #faf8f6;
  --surface: #ffffff;
  --surface-2: #f3efec;
  --surface-3: #ebe5e1;
  --border: #e4ddd8;
  --border-strong: #d3cac4;

  --text: #1f1d1c;
  --text-dim: #5d5753;
  --text-faint: #736c67;

  --accent: #FFA178;
  --accent-strong: #e8906a;
  --on-accent: #1a1a1a;
  --accent-text: #a84a22;

  --danger: #c62f35;
  --success: #2f7d3d;

  /* 캐릭터 프로필(character_profile.css) 전용 변수 */
  --cp-bg: #faf8f6;
  --cp-surface: #ffffff;
  --cp-surface-2: #f3efec;
  --cp-line: #e4ddd8;
  --cp-line-strong: #d3cac4;
  --cp-text: #1f1d1c;
  --cp-sub: #5d5753;
  --cp-faint: #736c67;
  --cp-danger: #c62f35;

  /* 라이트 배너(히어로·프로필·랭킹·카테고리): 메인 배너 그라데이션을 옅게 */
  --banner-grad: linear-gradient(90deg, rgba(178, 74, 71, 0.22) 0%, rgba(255, 161, 120, 0.30) 45%, rgba(153, 97, 72, 0.06) 100%);

  color-scheme: light;
}

/* ─────────── 공통 (base.css · layout.css · components.css · overlays.css) ─────────── */
html:where([data-theme="light"]),
:where([data-theme="light"]) body { background: var(--bg); }

/* base.css 는 h1~p·링크를 흰색으로 둠 → 라이트에서는 본문 글자색 (사진 위 영역은 제외) */
:where([data-theme="light"]) :is(h1, h2, h3, h4, h5, h6, p, a):not(:where(.original-section *, .ori-character-card *, .cp-viewer *, .photo-viewer *)) { color: var(--text); }
:where([data-theme="light"]) a:visited:not(:where(.original-section *, .ori-character-card *, .cp-viewer *, .photo-viewer *)) { color: var(--text); }
:where([data-theme="light"]) a:active { color: var(--accent-text); }

:where([data-theme="light"]) .top-nav { background: var(--bg); }
:where([data-theme="light"]) .top-nav .logo { color: var(--accent-text); }
:where([data-theme="light"]) .top-nav .nav-buttons a { color: var(--text); }
:where([data-theme="light"]) .nav-tab { background-color: var(--bg); }
:where([data-theme="light"]) .tab-btn { color: var(--text); }
:where([data-theme="light"]) .tab-btn:hover { color: var(--accent-text); }
:where([data-theme="light"]) .nav-tab .tab-btn.active { color: var(--accent-text); }
:where([data-theme="light"]) .nav-tab .tab-btn.active::before { background-color: var(--accent-text); }

/* 하단 내비: 흰 바탕 + 회색 아이콘, 현재 화면은 진한 코랄 아이콘 */
:where([data-theme="light"]) .bottom-nav { background: var(--surface); border-top-color: var(--border); }
:where([data-theme="light"]) .bottom-nav a { color: rgba(31, 29, 28, 0.6); }
:where([data-theme="light"]) .bottom-nav a::before { filter: brightness(0); opacity: 0.55; }
:where([data-theme="light"]) .bottom-nav a.bold::before,
:where([data-theme="light"]) .bottom-nav a[style*="color: #ffffff"]::before {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(2195%) hue-rotate(335deg) brightness(67%) contrast(105%);
}

/* 흰 선 아이콘(검색·메뉴): 흰색 → 검정, 강조 주황 → 진한 코랄 */
:where([data-theme="light"]) img[src*="icon_search.svg"],
:where([data-theme="light"]) img[src*="icon_hamberger.svg"] { filter: invert(1) hue-rotate(180deg); }

:where([data-theme="light"]) .main-content h3 { color: var(--text); }
:where([data-theme="light"]) .main-content h4 { color: var(--text-dim); }
:where([data-theme="light"]) .tag { color: var(--text-dim); }
:where([data-theme="light"]) .bgrid-tab-btn { color: var(--text-dim); }

/* 메인 배너 (랭킹·카테고리) — 옅은 그라데이션 + 진한 글자 */
:where([data-theme="light"]) .ranking-banner,
:where([data-theme="light"]) .category-banner { color: var(--text); }
:where([data-theme="light"]) .ranking-banner-rect,
:where([data-theme="light"]) .category-banner-rect { background: var(--banner-grad); }
:where([data-theme="light"]) .best-keyword-banner .rect,
:where([data-theme="light"]) .ranking-banner .rect,
:where([data-theme="light"]) .category-banner .rect { background: var(--text); }
:where([data-theme="light"]) .category-chip { background: rgba(255, 255, 255, 0.6); border-color: rgba(31, 29, 28, 0.22); color: var(--text); }
:where([data-theme="light"]) .category-chip:hover { border-color: rgba(31, 29, 28, 0.5); }
:where([data-theme="light"]) .category-chip.is-active { background: var(--text); border-color: var(--text); color: #ffffff; }

/* 알럿·컨펌 (overlays.css) */
:where([data-theme="light"]) .alert-box,
:where([data-theme="light"]) .confirm-box { background: var(--surface); border-color: var(--border); }
:where([data-theme="light"]) .alert-box p,
:where([data-theme="light"]) .confirm-box p { color: var(--text); }
:where([data-theme="light"]) .auto-alert { background: var(--surface); color: var(--text); border-color: var(--accent); }
:where([data-theme="light"]) .confirm-box #confirm-no { background: var(--surface-2); color: var(--text-dim); border-color: var(--border-strong); }
:where([data-theme="light"]) .confirm-box #confirm-no:hover { background: var(--surface-3); color: var(--text); }

/* ─────────── 메인 (main.css · ch_grid.css) ─────────── */
/* ORIGINAL STORY 영역은 사진 + 어두운 그라데이션 위 → 글자 흰색 그대로 */
:where([data-theme="light"]) .main-content .original-section h2,
:where([data-theme="light"]) .main-content .original-section h3 { color: #ffffff; }
:where([data-theme="light"]) .main-content .ori-character-card h4 { color: #cfcfcf; }

:where([data-theme="light"]) .best-character-card h4,
:where([data-theme="light"]) .new-character-card h4,
:where([data-theme="light"]) .ranking-card h4 { color: var(--text-dim); }
:where([data-theme="light"]) .ranking-empty { color: var(--text-faint); }

:where([data-theme="light"]) .pwa-install-btn { border-color: var(--border-strong); color: var(--text-dim); }
:where([data-theme="light"]) .pwa-install-btn.pwa-ready { border-color: var(--accent-text); color: var(--accent-text); }
:where([data-theme="light"]) .pwa-guide { background: var(--surface); border-color: var(--border); }
:where([data-theme="light"]) .pwa-guide-handle { background: var(--border-strong); }
:where([data-theme="light"]) .pwa-guide-title { color: var(--text); }
:where([data-theme="light"]) .pwa-guide-body { color: var(--text-dim); }

/* 햄버거 메뉴 드로어 */
:where([data-theme="light"]) .menu-drawer { background: var(--surface); border-left-color: var(--border); }
:where([data-theme="light"]) .menu-drawer-title { color: var(--text); }
:where([data-theme="light"]) .menu-close-btn { color: var(--text-dim); }
:where([data-theme="light"]) .menu-close-btn:hover { background: var(--surface-2); color: var(--text); }
:where([data-theme="light"]) .menu-user { background: var(--surface-2); border-color: var(--border); }
:where([data-theme="light"]) .menu-user-avatar { background: var(--surface-3); }
:where([data-theme="light"]) .menu-user-name { color: var(--text); }
:where([data-theme="light"]) .menu-user-sub { color: var(--text-dim); }
:where([data-theme="light"]) .menu-user-coin { color: var(--accent-text); }
:where([data-theme="light"]) .menu-links { border-top-color: var(--border); }
:where([data-theme="light"]) .menu-item { color: var(--text); border-bottom-color: var(--border); }
:where([data-theme="light"]) .menu-item:hover { color: var(--accent-text); }
:where([data-theme="light"]) .menu-logout { border-top-color: var(--border); color: var(--danger); }
:where([data-theme="light"]) .menu-adult-chip { background: var(--surface-3); color: var(--text-dim); }

/* 카테고리 탭 */
:where([data-theme="light"]) .category-count { color: var(--text-dim); }
:where([data-theme="light"]) .category-select { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); }
:where([data-theme="light"]) #category-grid .ranking-card h3 { color: var(--text); }
:where([data-theme="light"]) .category-card { background: var(--surface); border-color: var(--border); }
:where([data-theme="light"]) .category-card:hover { border-color: var(--border-strong); }
:where([data-theme="light"]) .category-card-thumb img:first-child { background: var(--surface-2); }
:where([data-theme="light"]) .category-card-name { color: var(--text); }
:where([data-theme="light"]) .category-card-info { color: var(--text-dim); }
:where([data-theme="light"]) .category-card-tag,
:where([data-theme="light"]) .category-empty { color: var(--text-faint); }
:where([data-theme="light"]) .card-stats { color: var(--text-faint); }
:where([data-theme="light"]) .card-stats span + span::before { color: var(--border-strong); }
:where([data-theme="light"]) .category-skeleton .cs-thumb,
:where([data-theme="light"]) .category-skeleton .cs-line,
:where([data-theme="light"]) .ranking-skeleton { background: var(--surface-3); }
:where([data-theme="light"]) .tab-retry-btn { border-color: var(--border-strong); color: var(--text); }
:where([data-theme="light"]) .tab-retry-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* ─────────── 하위 화면 공통 (ds.css) ─────────── */
:where([data-theme="light"]) .ds-label .req,
:where([data-theme="light"]) .ds-section-title .accent,
:where([data-theme="light"]) .ds-tabbar button.active,
:where([data-theme="light"]) .ds-tabbar a.active { color: var(--accent-text); }
:where([data-theme="light"]) .ds-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d5753' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* 히어로 배너 — 옅은 그라데이션 + 진한 글자 */
:where([data-theme="light"]) .ds-hero { color: var(--text); }
:where([data-theme="light"]) .ds-hero::before { background: var(--banner-grad); }
:where([data-theme="light"]) .ds-hero-title { color: var(--text); }
:where([data-theme="light"]) .ds-hero-title .rect { background: var(--text); }
:where([data-theme="light"]) .ds-hero-sub { color: var(--text-dim); }
:where([data-theme="light"]) .ds-hero .ds-chip { background: rgba(255, 255, 255, 0.6); border-color: rgba(31, 29, 28, 0.22); color: var(--text); }
:where([data-theme="light"]) .ds-hero .ds-chip:hover { border-color: rgba(31, 29, 28, 0.5); color: var(--text); }
:where([data-theme="light"]) .ds-hero .ds-chip.is-active { background: var(--text); border-color: var(--text); color: #ffffff; }
:where([data-theme="light"]) .ds-hero-stat .label { color: var(--text-dim); }
:where([data-theme="light"]) .ds-hero-stat .value { color: var(--text); }

/* ─────────── 마이페이지·유저 프로필 (profile.css) ─────────── */
:where([data-theme="light"]) .profile-banner::before { background: var(--banner-grad); }
:where([data-theme="light"]) .profile-banner .profile-intro { color: var(--text-dim); }
:where([data-theme="light"]) .profile-banner .fallow-info button { color: var(--text-dim); }
:where([data-theme="light"]) .profile-banner .fallow-info button .cnt { color: var(--text); }
:where([data-theme="light"]) .profile-banner .profile-tabs { border-bottom-color: rgba(31, 29, 28, 0.15); }
:where([data-theme="light"]) .profile-tabs .tab-btn { color: var(--text-dim); }
:where([data-theme="light"]) .profile-tabs .tab-btn.active { color: var(--text); }
:where([data-theme="light"]) .profile-tabs .tab-btn.active::after { background: var(--text); }
:where([data-theme="light"]) .profile-edit-btn img { filter: none; }
:where([data-theme="light"]) .char-item .edit img { filter: none; }
:where([data-theme="light"]) .account-row .v.accent,
:where([data-theme="light"]) .persona-manage[open] summary,
:where([data-theme="light"]) .account-row .verify-link { color: var(--accent-text); }
:where([data-theme="light"]) .account-row .slider { background: var(--border-strong); }
:where([data-theme="light"]) .account-row .slider:before { background: #ffffff; }

/* ─────────── 대화 (chat.css) ─────────── */
:where([data-theme="light"]) .chat-header-emotion { color: var(--accent-text); }
:where([data-theme="light"]) .chat-header-emotion.emotion-flash { animation-name: emotion-flash-light; }
@keyframes emotion-flash-light {
  0% { background: var(--accent); color: #1a1a1a; transform: scale(1.15); }
  100% { background: rgba(255, 161, 120, 0.12); color: var(--accent-text); transform: scale(1); }
}
:where([data-theme="light"]) .chat-hide-btn img { filter: brightness(0); }
:where([data-theme="light"]) .ai-notice { background: rgba(255, 255, 255, 0.88); color: var(--text-dim); }
:where([data-theme="light"]) .assistant .bubble.default { background: rgba(255, 255, 255, 0.95); }
:where([data-theme="light"]) .bubble.situation,
:where([data-theme="light"]) .user .bubble.situation { background: rgba(243, 239, 236, 0.95); color: var(--text-dim); }
:where([data-theme="light"]) .delete-btn,
:where([data-theme="light"]) .retry-btn { background: rgba(255, 255, 255, 0.95); }
:where([data-theme="light"]) .new-msg-badge { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
:where([data-theme="light"]) .chat-footer .star-btn:hover,
:where([data-theme="light"]) #bottom-panel-btn:hover,
:where([data-theme="light"]) .coin-chip { color: var(--accent-text); }

/* ─────────── 캐릭터 프로필 (character_profile.css — 색은 위 --cp-* 변수) ─────────── */
:where([data-theme="light"]) .cp-tab.is-active,
:where([data-theme="light"]) .cp-creator-link,
:where([data-theme="light"]) .cp-comment-like.is-liked,
:where([data-theme="light"]) .cp-replies-toggle,
:where([data-theme="light"]) .cp-replies-more,
:where([data-theme="light"]) .profile-like-btn.liked { color: var(--accent-text); }
:where([data-theme="light"]) .profile-like-btn.liked svg { fill: var(--accent-text); }

/* ─────────── 캐릭터 제작 (character_create.css · image_tools.css) ─────────── */
:where([data-theme="light"]) body.create-page {
  --cc-bg: var(--bg);
  --cc-card: var(--surface);
  --cc-line: var(--border);
  --cc-veil: rgba(250, 248, 246, 0.92);  /* 위쪽 그림을 덮는 밝은 막 (대비 4.5:1 이상) */
}
:where([data-theme="light"]) .step-tab { color: var(--text-dim); }
:where([data-theme="light"]) .step-tab.active,
:where([data-theme="light"]) .step-tab.active:hover,
:where([data-theme="light"]) .step-count,
:where([data-theme="light"]) body.create-page .mini-add,
:where([data-theme="light"]) .create-info-icon,
:where([data-theme="light"]) .create-info em,
:where([data-theme="light"]) .photo-privacy-fixed,
:where([data-theme="light"]) .photo-add { color: var(--accent-text); }
:where([data-theme="light"]) body.create-page .ds-label,
:where([data-theme="light"]) .list-header,
:where([data-theme="light"]) body.create-page .ai-sheet .ds-label { color: var(--text); }
:where([data-theme="light"]) body.create-page .ds-hint,
:where([data-theme="light"]) body.create-page .ai-note { color: var(--text-faint); }
:where([data-theme="light"]) .create-info { color: var(--text-dim); }
:where([data-theme="light"]) .create-info strong { color: var(--text); }
:where([data-theme="light"]) .photo-privacy.is-private { border-color: var(--accent-text); color: var(--accent-text); }
:where([data-theme="light"]) body.create-page .ai-sheet .ds-chip.is-active,
:where([data-theme="light"]) body.create-page .te-panel .ds-chip.is-active { border-color: var(--accent-text); color: var(--accent-text); }
:where([data-theme="light"]) .photo-ai-btn,
:where([data-theme="light"]) body.create-page .photo-ai-btn { border-color: var(--accent-text); color: var(--accent-text); }
:where([data-theme="light"]) .photo-ai-btn:disabled,
:where([data-theme="light"]) body.create-page .photo-ai-btn:disabled { border-color: var(--border-strong); color: var(--text-faint); }
:where([data-theme="light"]) .photo-ai-btn:active,
:where([data-theme="light"]) body.create-page .photo-ai-btn:active { color: #1a1a1a; }
:where([data-theme="light"]) .ai-balance strong,
:where([data-theme="light"]) .ai-shop-link,
:where([data-theme="light"]) .te-msg { color: var(--accent-text); }
:where([data-theme="light"]) .te-screen { background: var(--bg); }

/* ─────────── 19 등급 (adult.css) ─────────── */
:where([data-theme="light"]) .adult-locked-thumb { background: var(--surface-2); }

/* ─────────── 로그인 팝업 (auth-modal.css — 색은 --am-* 변수) ─────────── */
:where([data-theme="light"]) .auth-modal {
  --am-bg: #ffffff;
  --am-surface: #faf8f6;
  --am-surface-2: #f3efec;
  --am-border: #e4ddd8;
  --am-text: #1f1d1c;
  --am-text-dim: #5d5753;
  --am-text-faint: #736c67;
  --am-danger: #c62f35;
  --am-muted: #736c67;
}
:where([data-theme="light"]) .auth-modal__message { color: var(--am-danger); }
:where([data-theme="light"]) .auth-modal__switch a { color: var(--accent-text); }
:where([data-theme="light"]) .auth-modal__panel { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); }

/* ─────────── 로그인·가입 (auth.css · sign.css) ─────────── */
:where([data-theme="light"]) .auth-title .accent,
:where([data-theme="light"]) .auth-switch a,
:where([data-theme="light"]) .auth-switch a:visited,
:where([data-theme="light"]) .signup-cta a,
:where([data-theme="light"]) .signup-cta a:visited { color: var(--accent-text); }
:where([data-theme="light"]) .remember-check .remember-hint { color: var(--text-faint); }
:where([data-theme="light"]) .social-buttons a { box-shadow: inset 0 0 0 1px var(--border); }

/* ─────────── 공지 (notice.css) ─────────── */
:where([data-theme="light"]) .notice-wrap { color: var(--text); }
:where([data-theme="light"]) .notice-list { border-top-color: var(--border); }
:where([data-theme="light"]) .notice-row { border-bottom-color: var(--border); }
:where([data-theme="light"]) .notice-row:active { background: var(--surface-2); }
:where([data-theme="light"]) .notice-row-thumb { background: var(--surface-2); }
:where([data-theme="light"]) .notice-row-summary,
:where([data-theme="light"]) .notice-empty,
:where([data-theme="light"]) .notice-back { color: var(--text-dim); }
:where([data-theme="light"]) .notice-row-date,
:where([data-theme="light"]) .notice-pin,
:where([data-theme="light"]) .notice-meta { color: var(--text-faint); }
:where([data-theme="light"]) .notice-tag { border-color: var(--border-strong); color: var(--text-dim); }
:where([data-theme="light"]) .notice-tag.is-event { border-color: var(--accent-text); color: var(--accent-text); }
:where([data-theme="light"]) .notice-body { color: var(--text); }

/* ─────────── 약관·개인정보처리방침 (terms.html · privacy.html 의 <style>) ─────────── */
:where([data-theme="light"]) .terms,
:where([data-theme="light"]) .terms p,
:where([data-theme="light"]) .terms li,
:where([data-theme="light"]) .terms td { color: var(--text); }
:where([data-theme="light"]) .terms .meta { color: var(--text-dim); }
:where([data-theme="light"]) .terms .notice { background: var(--surface-2); border-color: var(--border); color: var(--text); }
:where([data-theme="light"]) .terms a { color: var(--accent-text); }
:where([data-theme="light"]) .terms th,
:where([data-theme="light"]) .terms td { border-color: var(--border); }
:where([data-theme="light"]) .terms th { background: var(--surface-2); color: var(--text); }

/* ─────────── 회원 탈퇴·비밀번호 변경 (account_manage.html 의 <style>) ─────────── */
:where([data-theme="light"]) .acct-list { background: var(--surface); border-color: var(--border); }
:where([data-theme="light"]) .acct-item { border-top-color: var(--border); }
:where([data-theme="light"]) .acct-item .t em,
:where([data-theme="light"]) .acct-note a,
:where([data-theme="light"]) .acct .ds-hint a { color: var(--accent-text); }
:where([data-theme="light"]) .acct-note { background: var(--surface-2); border-color: var(--border); }

/* ─────────── 검색 (search.html 의 <style>) ─────────── */
:where([data-theme="light"]) .suggest-dropdown { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
:where([data-theme="light"]) .suggest-item .s-text mark { color: var(--accent-text); }
:where([data-theme="light"]) .sort-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d5753' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ─────────── 가입 환영 (welcome.html 의 <style>) ─────────── */
:where([data-theme="light"]) .welcome-box h3 .accent { color: var(--accent-text); }

/* ─────────── 코인 샵 (shop.html 의 <style>) ─────────── */
:where([data-theme="light"]) .coin-balance-card {
  /* 강조색 그라데이션 + 밝은 막(88%) 뒤에 은은한 그림 — 다크와 같은 그림, 글자 대비 4.5:1 이상 */
  background:
    linear-gradient(135deg, rgba(255, 161, 120, 0.22) 0%, rgba(255, 161, 120, 0.07) 55%, rgba(255, 161, 120, 0) 100%),
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    url("/static/images/ui/bg-secret-garden.jpg") center 30% / cover no-repeat,
    var(--surface);
  border-color: rgba(255, 161, 120, 0.45);
}
:where([data-theme="light"]) .coin-balance-hint { color: var(--text-dim); }
:where([data-theme="light"]) .coin-balance-label,
:where([data-theme="light"]) .coin-balance-amount .unit { color: var(--text-dim); }
:where([data-theme="light"]) .coin-balance-amount,
:where([data-theme="light"]) .pkg-coins { color: var(--text); }
:where([data-theme="light"]) .coin-glyph,
:where([data-theme="light"]) .daily-card-icon,
:where([data-theme="light"]) .first-bonus-banner strong,
:where([data-theme="light"]) .pkg-bonus,
:where([data-theme="light"]) .pkg-first-bonus,
:where([data-theme="light"]) .history-coins { color: var(--accent-text); }
:where([data-theme="light"]) .daily-card,
:where([data-theme="light"]) .pkg-card,
:where([data-theme="light"]) .price-card,
:where([data-theme="light"]) .history-item { background: var(--surface); border-color: var(--border); }
:where([data-theme="light"]) .pkg-card.popular {
  border-color: rgba(255, 161, 120, 0.7);
  background: linear-gradient(120deg, rgba(255, 161, 120, 0.16) 0%, rgba(255, 161, 120, 0.04) 60%), var(--surface);
}
:where([data-theme="light"]) .daily-free-btn:not(:disabled) { color: var(--accent-text); border-color: rgba(168, 74, 34, 0.4); }
:where([data-theme="light"]) .daily-free-btn:disabled { background: var(--surface-2); border-color: var(--surface-2); }
:where([data-theme="light"]) .pkg-card:not(.popular) .pkg-price-btn { color: var(--accent-text); border-color: rgba(168, 74, 34, 0.45); }
:where([data-theme="light"]) .price-table th,
:where([data-theme="light"]) .price-table td { border-bottom-color: var(--border); }
:where([data-theme="light"]) .refund-note { border-color: var(--border); }