/* ═══════════════════════════════════
   BaZi Harian — styles.css
   Light theme (default) + Dark theme, desktop/mobile
   ═══════════════════════════════════ */

:root {
  /* Light (default) — clean, professional, warm-neutral */
  --bg:    #F7F5F0;
  --bg2:   #FFFFFF;
  --bg3:   #FFFFFF;
  --bg4:   #F0EAD9;
  --gold:  #B8860B;
  --gold2: #9C6F0A;
  --gold3: #7A5608;
  --gold4: #D4A017;
  --text:  #2A2318;
  --text2: #6B5D45;
  --text3: #93866B;
  --text4: #C4B8A0;
  --border: rgba(120,90,20,0.16);
  --shadow: rgba(40,30,10,0.08);
  --r: 10px;

  /* Rating colors — dark, readable text on light backgrounds */
  --exc-c: #1a4d0a;  --exc-bg: rgba(58,138,16,0.10);  --exc-bd: #4C8A24; --exc-dark: #1a4d0a;
  --top-c: #1a3d0a;  --top-bg: rgba(40,110,10,0.08);  --top-bd: #468014; --top-dark: #1a3d0a;
  --good-c:#0A3060;  --good-bg:rgba(10,88,136,0.08);  --good-bd: #3573BA; --good-dark:#0A3060;
  --mid-c: #4A4438;  --mid-bg: rgba(74,68,56,0.08);   --mid-bd: #7C7362; --mid-dark: #4A4438;
  --warn-c:#6e3800;  --warn-bg:rgba(138,74,0,0.09);   --warn-bd: #BE7A09; --warn-dark:#6e3800;
  --bad-c: #7a0f0f;  --bad-bg: rgba(138,24,8,0.09);   --bad-bd: #BC391C; --bad-dark: #7a0f0f;
}

:root[data-theme="dark"] {
  --bg:    #080604;
  --bg2:   #110D08;
  --bg3:   #1A1408;
  --bg4:   #221A0C;
  --gold:  #C8A020;
  --gold2: #D4B030;
  --gold3: #F0D060;
  --gold4: #A07810;
  --text:  #E0D0A0;
  --text2: #A89060;
  --text3: #706048;
  --text4: #403820;
  --border: rgba(200,160,32,0.15);
  --shadow: rgba(0,0,0,0.35);

  --exc-c: #E8F5D4; --exc-bg: rgba(58,138,16,0.15);  --exc-bd: #5A9E2A; --exc-dark: #1a4d0a;
  --top-c: #C8E8A0; --top-bg: rgba(40,110,10,0.12);  --top-bd: #4A8E1A; --top-dark: #1a3d0a;
  --good-c:#D4EEFF; --good-bg:rgba(10,88,136,0.12);  --good-bd: #3A80D0; --good-dark:#0A3060;
  --mid-c: #E8E0D0; --mid-bg: rgba(74,68,56,0.15);   --mid-bd: #8A8070; --mid-dark: #4A4438;
  --warn-c:#FFE8B0; --warn-bg:rgba(138,74,0,0.15);   --warn-bd: #D4880A; --warn-dark:#6e3800;
  --bad-c: #FFD8D0; --bad-bg: rgba(138,24,8,0.18);   --bad-bd: #D04020; --bad-dark: #7a0f0f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: var(--bg); color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; }
body { overflow-x: hidden; }

/* ── HEADER ── */
.hdr { background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 12px 20px; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: 8px; }
.hdr-left { display: flex; align-items: center; gap: 10px; }
.logo { font-size: 24px; color: var(--gold); }
.hdr h1 { font-size: 15px; font-weight: 500; }
.hdr p { font-size: 11px; color: var(--text2); }
.clock { font-size: 22px; font-weight: 300; color: var(--gold3);
  letter-spacing: .05em; font-variant-numeric: tabular-nums; text-align: right; }
.dstr { font-size: 11px; color: var(--text2); text-align: right; }

/* ── NOVICE/EXPERT MODE TOGGLE ── */
.mode-toggle { display: inline-flex; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px; margin-bottom: 6px; }
.mode-btn { border: none; background: none; color: var(--text3); font-size: 10px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: .15s; white-space: nowrap; }
.mode-btn:hover { color: var(--text2); }
.mode-btn.on { background: var(--gold); color: #000; }
/* Technical/numeric detail hidden in Novice mode; shown by default (Expert) */
body.novice-mode .expert-only { display: none !important; }

/* ── Expert-detail accordion (day modal) ── */
details.msec summary { list-style: none; }
details.msec summary::-webkit-details-marker { display: none; }
details.msec summary::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform .15s; color: var(--gold2); }
details.msec[open] summary::before { transform: rotate(90deg); }

/* ── ALERT BANNER ── */
.banner { background: var(--warn-bg); border-bottom: 1px solid var(--warn-bd);
  padding: 8px 20px; font-size: 11px; color: var(--warn-c); line-height: 1.6; }
.banner strong { color: var(--gold3); }

/* ── THEME TOGGLE ── */
.theme-toggle { display: inline-flex; align-items: center; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px; margin-bottom: 6px; margin-right: 6px; }
.theme-btn { border: none; background: none; color: var(--text3); padding: 5px 8px; border-radius: 999px;
  cursor: pointer; display: flex; align-items: center; transition: .15s; }
.theme-btn:hover { color: var(--text2); }
.theme-btn.on { background: var(--gold); color: #fff; }
.theme-btn svg { display: block; }

/* ── TABS ── */
.tnav { background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 0 20px; display: flex; gap: 0; overflow-x: auto; }
.tb { padding: 11px 16px; font-size: 12px; font-weight: 500;
  color: var(--text3); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  white-space: nowrap; transition: .15s; }
.tb:hover { color: var(--text2); }
.tb.on { color: var(--gold2); border-bottom-color: var(--gold); }
.tb svg { vertical-align: -3px; margin-right: 5px; }
.tpanel { display: none; }
.tpanel.on { display: block; animation: tabIn .28s ease both; }
main { padding: 16px; max-width: 1200px; margin: 0 auto; }

/* ── BOTTOM NAV (mobile) ── */
.bnav { display: none; }

@media (max-width: 767px) {
  .tnav { display: none; }
  .bnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--bg2); border-top: 1px solid var(--border);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px var(--shadow);
  }
  .bb {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; color: var(--text3); cursor: pointer;
    padding: 6px 2px; border-radius: 10px; transition: .15s;
  }
  .bb span { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bb.on { color: var(--gold2); }
  .bb.on svg { transform: translateY(-1px); }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes tabIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── HAN CHARACTER TYPOGRAPHY ── */
.zh, .hcard .zh, .lpc-zh, .yc-zh, .nc-zh, .wz, .mc-z, .hcz, .logo {
  font-family: 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;
}

/* ── SECTION TITLE ── */
.stitle { font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }

/* ── RATING THEMES ── */
.r-exc  { background: var(--exc-bg)!important;  border-color: var(--exc-bd)!important;  }
.r-top  { background: var(--top-bg)!important;  border-color: var(--top-bd)!important;  }
.r-good { background: var(--good-bg)!important; border-color: var(--good-bd)!important; }
.r-mid  { background: var(--mid-bg)!important;  border-color: var(--mid-bd)!important;  }
.r-warn { background: var(--warn-bg)!important; border-color: var(--warn-bd)!important; }
.r-bad  { background: var(--bad-bg)!important;  border-color: var(--bad-bd)!important;  }

.r-exc  .rc { color: var(--exc-c)!important;  }
.r-top  .rc { color: var(--top-c)!important;  }
.r-good .rc { color: var(--good-c)!important; }
.r-mid  .rc { color: var(--mid-c)!important;  }
.r-warn .rc { color: var(--warn-c)!important; }
.r-bad  .rc { color: var(--bad-c)!important;  }

/* ── TODAY HERO CARDS ── */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media(max-width:600px) { .hero { grid-template-columns: 1fr; } }
.hcard { border-radius: var(--r); padding: 20px; border: 1.5px solid;
  cursor: pointer; position: relative; overflow: hidden; transition: .12s; }
.hcard:hover { transform: translateY(-2px); }
.hcard .lbl  { font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.hcard .zh   { font-size: 36px; letter-spacing: .05em; margin: 4px 0; }
.hcard .ttl  { font-size: 22px; font-weight: 300; line-height: 1.1; }
.hcard .desc { font-size: 12px; opacity: .8; line-height: 1.6; margin-top: 8px; }
.hcard .rtg  { position: absolute; top: 16px; right: 16px; font-size: 18px; font-weight: 700; }
.hcard .score-badge {
  position: absolute; bottom: 12px; right: 14px;
  font-size: 10px; opacity: .6; font-variant-numeric: tabular-nums; }

/* ── TIMER BAR ── */
.tbar { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 16px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ti { text-align: center; }
.ti-l { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }
.ti-v { font-size: 15px; font-weight: 500; color: var(--gold2); font-variant-numeric: tabular-nums; }

/* ── HOUR GRID ── */
.hgrid { display: grid; grid-template-columns: repeat(12,1fr); gap: 4px; margin-bottom: 16px; }
@media(max-width:700px) { .hgrid { grid-template-columns: repeat(6,1fr); } }
.hcell { border-radius: 6px; padding: 6px 2px; text-align: center;
  border: 1px solid var(--border); background: var(--bg2); position: relative; }
.hcell.cur { border-width: 2px; }
.hcn { font-size: 9px; opacity: .5; margin-bottom: 1px; }
.hcz { font-size: 12px; font-weight: 500; }
.hct { font-size: 8px; opacity: .4; margin-top: 1px; }
.hci { font-size: 9px; margin-top: 2px; }
.now-b { position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #000; font-size: 6px; font-weight: 700;
  padding: 1px 4px; border-radius: 3px; white-space: nowrap; }

/* ── WEEK STRIP ── */
.wstrip { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 16px; }
@media(max-width:560px) { .wstrip { grid-template-columns: repeat(4,1fr); } }
.wcell { border-radius: 8px; padding: 10px 5px; text-align: center;
  border: 1.5px solid var(--border); background: var(--bg2);
  cursor: pointer; transition: .15s; }
.wcell:hover { transform: translateY(-2px); }
.wcell.today { border-width: 2.5px; border-color: var(--gold)!important; }
.wd { font-size: 9px; opacity: .5; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.wn { font-size: 16px; font-weight: 500; margin-bottom: 1px; }
.wz { font-size: 11px; opacity: .8; }
.wi { font-size: 11px; margin-top: 4px; }

/* ── MONTHLY GRID ── */
.mgrid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 16px; }
@media(max-width:560px) { .mgrid { grid-template-columns: repeat(5,1fr); } }
.mcell { border-radius: 6px; padding: 7px 3px; text-align: center;
  border: 1px solid var(--border); background: var(--bg2);
  cursor: pointer; transition: .12s; }
.mcell:hover { transform: scale(1.04); z-index: 2; position: relative; }
.mcell.today { border: 2px solid var(--gold)!important; }
.mc-n { font-size: 13px; font-weight: 500; }
.mc-z { font-size: 10px; opacity: .7; }
.mc-i { font-size: 9px; margin-top: 2px; }

/* ── NEXT ALERTS ── */
.alerts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.alcard { border-radius: 8px; padding: 12px 14px; border: 1px solid; cursor: pointer; }
.al-lbl { font-size: 9px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 4px; }
.al-day { font-size: 18px; font-weight: 500; margin-bottom: 2px; }
.al-desc { font-size: 11px; opacity: .8; }
.al-next-top { background: var(--top-bg); border-color: var(--top-bd); }
.al-next-top .al-lbl, .al-next-top .al-day { color: var(--top-c); }
.al-next-bad { background: var(--bad-bg); border-color: var(--bad-bd); }
.al-next-bad .al-lbl, .al-next-bad .al-day { color: var(--bad-c); }

/* ── INFO ROW ── */
.irow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
@media(max-width:500px) { .irow { grid-template-columns: 1fr 1fr; } }
.icard { background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; text-align: center; }
.ic-l { font-size: 9px; color: var(--text3); letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 4px; }
.ic-v { font-size: 14px; font-weight: 500; color: var(--gold2); }
.ic-s { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ── MODAL ── */
.ov { position: fixed; inset: 0; background: rgba(0,0,0,0.78);
  z-index: 200; display: none; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; transition: opacity .18s ease; }
.ov.show { display: flex; opacity: 1; }
.mdl { background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px; max-width: 560px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  transform: scale(.96) translateY(8px); transition: transform .18s ease; }
.ov.show .mdl { transform: scale(1) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .tpanel.on { animation: none; }
  .ov, .mdl { transition: none; }
}
.mhdr { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.mttl { font-size: 15px; font-weight: 600; color: var(--gold2); }
.mclose { background: none; border: none; color: var(--text2); font-size: 20px; cursor: pointer; padding: 2px; }
.mclose:hover { color: var(--text); }
.mbody { font-size: 13px; line-height: 1.7; color: var(--text2); }
.mbody p { margin-bottom: 8px; }
.divider { border-top: 1px solid var(--border); margin: 10px 0; padding-top: 10px; }

/* Modal sections */
.msec { margin-bottom: 14px; }
.msec-title { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
.factor-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.factor-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0; border: 1px solid; }
.fb-pos  { background: rgba(58,138,16,0.15);  color: var(--top-c);  border-color: var(--top-bd);  }
.fb-neg  { background: rgba(138,24,8,0.15);   color: var(--bad-c);  border-color: var(--bad-bd);  }
.fb-neu  { background: rgba(74,68,56,0.15);   color: var(--mid-c);  border-color: var(--mid-bd);  }
.fb-shen { background: rgba(10,88,136,0.15);  color: var(--good-c); border-color: var(--good-bd); }
.fb-elem { background: var(--bg4); color: var(--gold2);  border-color: var(--gold4);   }
.score-total { font-size: 18px; font-weight: 700; text-align: center;
  padding: 8px; border-radius: 8px; margin-bottom: 10px; border: 1px solid; }
.advice-item { font-size: 12px; line-height: 1.6; margin-bottom: 4px; }

/* ── YEAR TAB ── */
.lp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; }
@media(max-width:600px) { .lp-grid { grid-template-columns: 1fr 1fr; } }
.lpc { border-radius: 8px; padding: 14px; border: 1.5px solid; cursor: pointer; transition: .12s; }
.lpc:hover { transform: translateY(-1px); }
.lpc-age { font-size: 10px; opacity: .6; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.lpc-zh  { font-size: 24px; letter-spacing: .05em; margin-bottom: 3px; }
.lpc-nm  { font-size: 11px; opacity: .8; margin-bottom: 3px; }
.lpc-pr  { font-size: 10px; opacity: .6; }
.lpc-tag { display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; margin-top: 5px; }
.lpc-active { border: 2px solid var(--gold)!important; }

.ysm { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
@media(max-width:500px) { .ysm { grid-template-columns: 1fr 1fr; } }
.ysc { border-radius: 8px; padding: 10px; text-align: center; border: 1px solid; }
.ysc-l { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.ysc-v { font-size: 12px; font-weight: 600; line-height: 1.7; }

.dec { margin-bottom: 20px; }
.dec-ttl { font-size: 11px; font-weight: 600; color: var(--gold4);
  border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 8px; }
.ygrid { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }
@media(max-width:560px) { .ygrid { grid-template-columns: repeat(4,1fr); } }
.ycell { border-radius: 6px; padding: 8px 4px; text-align: center;
  border: 1px solid var(--border); background: var(--bg2); cursor: pointer; transition: .12s; }
.ycell:hover { transform: scale(1.04); z-index: 2; position: relative; }
.ycell.yr-now { border: 2px solid var(--gold)!important; }
.yc-yr { font-size: 12px; font-weight: 600; }
.yc-zh { font-size: 11px; opacity: .7; margin-top: 1px; }
.yc-ic { font-size: 10px; margin-top: 3px; }
.yc-ag { font-size: 9px; opacity: .4; margin-top: 1px; }

/* ── NATAL CHART TAB ── */
.nc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 16px; }
@media(max-width:500px) { .nc-grid { grid-template-columns: 1fr 1fr; } }
.nc-card { border-radius: 8px; padding: 14px 10px; text-align: center;
  border: 1px solid var(--border); background: var(--bg2); }
.nc-card.hour-new { border-color: var(--top-bd)!important; background: rgba(58,138,16,0.10)!important; }
.nc-l  { font-size: 9px; opacity: .5; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.nc-zh { font-size: 26px; letter-spacing: .04em; color: var(--gold2); }
.nc-card.hour-new .nc-zh { color: var(--top-c); }
.nc-sub { font-size: 11px; color: var(--text3); margin-top: 4px; line-height: 1.5; }
.nc-new { font-size: 9px; font-weight: 700; color: var(--top-c);
  background: rgba(58,138,16,0.15); padding: 2px 6px; border-radius: 4px; margin-top: 5px; display: inline-block; }

.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
@media(max-width:560px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { border-radius: 8px; padding: 12px 14px; border: 1px solid var(--border); background: var(--bg2); }
.feat-t { font-size: 11px; font-weight: 600; margin-bottom: 6px; }
.feat-b { font-size: 12px; color: var(--text2); line-height: 1.6; }
.feat.ft-pos { border-color: var(--top-bd); }.feat.ft-pos .feat-t { color: var(--top-c); }
.feat.ft-warn{ border-color: var(--warn-bd);}.feat.ft-warn .feat-t { color: var(--warn-c); }
.feat.ft-neu { border-color: var(--mid-bd); }.feat.ft-neu .feat-t  { color: var(--gold2); }

.elem-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-bottom: 16px; }
.ec { border-radius: 8px; padding: 10px; text-align: center; background: var(--bg2);
  border: 1px solid var(--border); }
.ec-l { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.ec-pct { font-size: 18px; font-weight: 700; color: var(--gold2); }
.ec-sub { font-size: 10px; color: var(--text3); margin-top: 3px; line-height: 1.4; }

/* ── SHEN SHA LEGEND ── */
.ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.ss-row { border-radius: 6px; padding: 10px 12px; background: var(--bg2);
  border: 1px solid var(--border); font-size: 12px; }
.ss-row .ss-name { font-weight: 600; color: var(--gold2); margin-bottom: 2px; }
.ss-row .ss-when { font-size: 11px; color: var(--text2); }
.ss-row .ss-note { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ── FOOTER ── */
footer { background: var(--bg2); border-top: 1px solid var(--border);
  padding: 10px 20px; font-size: 10px; color: var(--text3); text-align: center; line-height: 1.6; }

/* ── PARAM AUDIT ── */
.param-audit { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.badge-valid { background: rgba(58,138,16,.15); color: var(--top-c); border: 1px solid var(--top-bd);
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.badge-added { background: rgba(10,88,136,.15); color: var(--good-c); border: 1px solid var(--good-bd);
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.badge-fixed { background: rgba(200,120,0,.15); color: var(--warn-c); border: 1px solid var(--warn-bd);
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }

/* ── UTILITY ── */
.rc { /* rating-colored class, applied programmatically */ }

/* ── PAYWALL LOCK (blur + upgrade overlay for premium sections) ── */
.pw-lock { position: relative; border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.pw-lock-content { filter: blur(6px); pointer-events: none; user-select: none; }
.pw-lock-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, var(--bg) 55%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 22px 16px; text-align: center; }
.pw-lock-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--gold4);
  display: flex; align-items: center; justify-content: center; color: var(--gold2); margin-bottom: 10px; }
.pw-lock-overlay h3 { font-size: 14px; margin-bottom: 4px; }
.pw-lock-overlay p { font-size: 12px; color: var(--text2); max-width: 320px; margin-bottom: 12px; }
.pw-lock-cta { background: var(--gold); color: #fff; padding: 9px 18px; border-radius: 8px; font-weight: 700; font-size: 12.5px; }

/* ── ONBOARDING TOUR ── */
.tour-backdrop { position: fixed; inset: 0; background: rgba(20,16,8,0.55); z-index: 300; animation: tour-fade-in .25s ease; }
:root[data-theme="dark"] .tour-backdrop { background: rgba(0,0,0,0.7); }
@keyframes tour-fade-in { from { opacity: 0; } to { opacity: 1; } }
.tour-spotlight { position: relative; z-index: 301; border-radius: 12px; box-shadow: 0 0 0 4px var(--gold4), 0 0 0 9999px rgba(20,16,8,0.55); }
:root[data-theme="dark"] .tour-spotlight { box-shadow: 0 0 0 4px var(--gold4), 0 0 0 9999px rgba(0,0,0,0.7); }
.tour-card { position: fixed; z-index: 302; width: 300px; max-width: calc(100vw - 40px); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: 0 20px 50px -14px rgba(0,0,0,0.35); animation: tour-fade-in .3s ease; }
.tour-dots { display: flex; gap: 5px; margin-bottom: 10px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.tour-dot.on { background: var(--gold); width: 16px; border-radius: 3px; transition: width .2s ease; }
.tour-title { font-size: 14.5px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.tour-body { font-size: 12.5px; line-height: 1.6; color: var(--text2); margin-bottom: 14px; }
.tour-body b { color: var(--gold2); }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-skip { background: none; border: none; color: var(--text3); font-size: 12px; cursor: pointer; padding: 6px 4px; }
.tour-skip:hover { color: var(--text2); }
.tour-back { background: var(--bg); border: 1px solid var(--border); color: var(--text2); font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.tour-next { background: var(--gold); border: none; color: #fff; font-size: 12px; font-weight: 700; padding: 7px 16px; border-radius: 8px; cursor: pointer; }