/* ===== Five Elements Design System ===== */
/* 木(Wood) 青 #21B6A8 | 火(Fire) 赤 #E85D5D | 土(Earth) 黄 #F0A830 */
/* 金(Metal) 银 #9CA3AF | 水(Water) 墨 #1a1a1a */

:root {
  /* Background */
  --bg: #FAF8F3;
  --bg-card: #FFFFFF;
  --bg-tint: #F5F2EB;

  /* Text */
  --text: #1a1a1a;
  --t2: #6B7280;
  --t3: #9CA3AF;

  /* Five Elements */
  --wood: #21B6A8;
  --wood-l: #5CE0D6;
  --wood-bg: rgba(33,182,168,0.06);
  --fire: #E85D5D;
  --fire-l: #F08080;
  --fire-bg: rgba(232,93,93,0.06);
  --earth: #F0A830;
  --earth-l: #F5C060;
  --earth-bg: rgba(240,168,48,0.08);
  --metal: #9CA3AF;
  --metal-l: #C0C7CF;
  --water: #1a1a1a;

  /* Backward compat aliases (for jf_engine.js inline styles) */
  --gold: var(--earth);
  --gold-l: var(--earth-l);
  --gold-d: #B45309;
  --gold-glow: rgba(240,168,48,0.08);
  --mv: var(--fire);
  --bg3: var(--bg-tint);
  --bg4: #EDE8DD;
  --yang: var(--wood);
  --yin: var(--metal);
  --serif: var(--font);

  /* Borders & Shadows */
  --bd: rgba(0,0,0,0.08);
  --bd-accent: rgba(33,182,168,0.15);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.06);
  --sh: 0 2px 8px rgba(0,0,0,0.06);
  --sh-lg: 0 8px 32px rgba(0,0,0,0.08);

  /* Radius & Spacing */
  --r: 10px;
  --r-sm: 6px;
  --r-lg: 16px;

  /* Typography */
  --font: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --h1: 2.5rem;
  --h2: 1.5rem;
  --h3: 1.25rem;
  --body: 1rem;
  --sm: 0.875rem;
  --xs: 0.75rem;
  --lh: 1.75;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:var(--lh);
  overflow-x:hidden;
}

/* Rice paper texture */
body::before{
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-conic-gradient(rgba(200,180,140,0.015) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px,
    radial-gradient(ellipse 40% 30% at 20% 10%, rgba(33,182,168,0.04), transparent),
    radial-gradient(ellipse 35% 40% at 75% 70%, rgba(240,168,48,0.04), transparent),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(232,93,93,0.02), transparent),
    var(--bg);
}

/* Floating ink/gold particles canvas */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6}

/* ===== Layout ===== */
.page{max-width:1100px;margin:0 auto;padding:0 20px 32px;display:flex;flex-direction:column;gap:20px;min-height:100vh;position:relative;z-index:1}

/* ===== Top Bar (floating, transparent) ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;font-size:var(--sm);
  background:transparent;
  border:none;
  border-radius:0;
  min-height:48px;
}
.topbar-left{
  display:flex;align-items:center;gap:6px;
  color:var(--t3);font-size:var(--xs);
  white-space:nowrap;
}
.topbar-right{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}

/* Top bar buttons */
.tb{
  padding:6px 12px;border:1px solid var(--bd);border-radius:20px;
  background:var(--bg-card);cursor:pointer;font-size:var(--xs);
  color:var(--t2);transition:all .2s;font-family:var(--font);
}
.tb:hover{color:var(--text);border-color:var(--wood);box-shadow:var(--sh-sm)}

/* User trigger */
#ubTrigger{
  cursor:pointer;display:flex;align-items:center;gap:4px;
  padding:4px 12px;border-radius:20px;transition:all .2s;
  border:1px solid var(--bd);background:var(--bg-card);
}
#ubTrigger:hover{background:var(--wood-bg);border-color:var(--wood)}

/* Dropdowns */
.langOpt{
  padding:8px 16px;font-size:var(--sm);cursor:pointer;
  color:var(--text);transition:all .15s;border-radius:6px;margin:2px 4px;
}
.langOpt:hover{background:var(--wood-bg);color:var(--wood)}

/* ===== Hero ===== */
.hero-wrap{
  display:flex;align-items:center;justify-content:center;
  min-height:45vh;padding:30px 0;
}
.hero{width:100%;max-width:640px;text-align:center}
.hero .logo{
  font-size:var(--h1);font-weight:800;color:var(--text);
  letter-spacing:2px;margin-bottom:12px;line-height:1.2;
}
.hero .logo em{font-style:normal;color:var(--wood)}
.hero h2{
  font-size:var(--h3);color:var(--t2);margin-bottom:28px;
  font-weight:400;line-height:1.6;letter-spacing:.5px;
  position:relative;padding-bottom:20px;
}
.hero h2::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:40px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--wood),var(--earth),var(--fire));
}
.hero .qa{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}

/* Question inputs */
.qi{
  flex:1;min-width:160px;max-width:100%;padding:14px 18px;
  border:2px solid var(--bd);border-radius:var(--r);
  font-size:var(--body);background:var(--bg-card);color:var(--text);
  font-family:var(--font);transition:all .25s;outline:none;
}
.qi:focus{border-color:var(--wood);box-shadow:0 0 0 3px rgba(33,182,168,0.08)}
.qi::placeholder{color:var(--t3)}
select.qi{
  color:var(--earth);font-weight:600;letter-spacing:.5px;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%239CA3AF" d="M6 8L1 3h10z"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:32px;
}
select.qi option{color:var(--text);background:var(--bg-card);font-weight:400}

/* ===== Buttons (Five Elements Semantic) ===== */
.btn{
  padding:10px 20px;border:none;border-radius:var(--r-sm);
  cursor:pointer;font-size:var(--sm);font-weight:600;
  font-family:var(--font);display:inline-flex;align-items:center;gap:6px;
  transition:all .2s;letter-spacing:.3px;
}
.btn:active{transform:scale(.97)}

/* Primary CTA — Earth (黄) */
.bp{
  background:var(--earth);color:#fff;
  box-shadow:0 2px 8px rgba(240,168,48,0.25);
}
.bp:hover{background:#E09A20;box-shadow:0 4px 16px rgba(240,168,48,0.35);transform:translateY(-1px)}
.bp:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* Secondary — neutral */
.bs{background:var(--bg-tint);color:var(--text);border:1px solid var(--bd)}
.bs:hover{border-color:var(--wood);background:var(--wood-bg)}

/* Outline accent */
.bo{background:transparent;color:var(--wood);border:1px solid var(--wood)}
.bo:hover{background:var(--wood-bg)}

/* Danger — Fire (赤) */
.bd-btn{background:var(--fire);color:#fff}
.bd-btn:hover{background:#D94A4A}

/* Confirm — Wood (青) */
.bw-btn{background:var(--wood);color:#fff}
.bw-btn:hover{background:#1A9E92}

/* Sizes */
.bsm{padding:6px 14px;font-size:var(--xs);border-radius:20px}
.blg{padding:16px 32px;font-size:1.1rem;border-radius:var(--r);letter-spacing:1px}

/* ===== Card ===== */
.card{
  background:var(--bg-card);border-radius:var(--r-lg);
  padding:24px 28px;box-shadow:var(--sh);
  border:1px solid var(--bd);transition:all .3s;position:relative;
}
.card:hover{box-shadow:var(--sh-lg)}

/* ===== Steps ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.step{
  text-align:center;padding:28px 16px;border-radius:var(--r-lg);
  background:var(--bg-card);border:1px solid var(--bd);
  transition:all .3s;position:relative;overflow:hidden;
}
.step::after{
  content:'';position:absolute;bottom:0;left:20%;right:20%;height:3px;
  border-radius:2px;
  background:var(--wood);opacity:0;transition:all .3s;
}
.step:nth-child(2)::after{background:var(--earth)}
.step:nth-child(3)::after{background:var(--fire)}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.step:hover::after{left:10%;right:10%;opacity:1}
.step .si{font-size:2.4rem;margin-bottom:10px;transition:transform .3s}
.step:hover .si{transform:scale(1.1)}
.step h4{font-size:var(--body);color:var(--text);margin-bottom:6px;font-weight:700;letter-spacing:.5px}
.step p{font-size:var(--sm);color:var(--t2);line-height:1.6}

/* Step coin */
@keyframes scFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#stepCoin{display:block;width:56px;height:56px;position:relative;border-radius:50%}
#scYang,#scYin{
  position:absolute;top:0;left:0;width:56px;height:56px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-family:var(--font);font-size:20px;line-height:1;
  transition:opacity .3s,transform .35s;
}
#scYang{
  background:linear-gradient(135deg,#FDE68A,#F0A830 50%,#B45309 90%);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.15),0 3px 10px rgba(0,0,0,.1);
  color:#7C2D12;opacity:1;transform:scale(1);
}
#scYin{
  background:linear-gradient(135deg,#E5E7EB,#9CA3AF 50%,#6B7280 90%);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.1);color:#F9FAFB;
  opacity:0;transform:scale(.8);
}

/* ===== Warning Card ===== */
.warn-card{
  text-align:center;padding:14px 20px;margin-bottom:8px;border-radius:var(--r);
  background:var(--fire-bg);border-left:3px solid var(--fire);
  font-size:var(--sm);color:#C53030;line-height:1.6;
}
.warn-card strong{color:var(--fire)}

/* Pricing grid (used in modal) */
.pricing-grid{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:stretch}
.pricing-tier{
  flex:1;min-width:180px;max-width:300px;
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--bd);background:var(--bg-card);
}
.pricing-tier.pt-highlight{
  border-color:var(--earth);border-width:2px;
}
.pt-head{
  padding:7px 14px;font-size:.72rem;font-weight:700;
  background:var(--bg-tint);border-bottom:1px solid var(--bd);
  text-align:center;color:var(--t2);
}
.pt-highlight .pt-head{background:var(--earth-bg);color:var(--earth)}
.pt-body{padding:10px 14px 12px;font-size:.7rem;color:var(--t2);line-height:1.6;flex:1}
.pt-price{font-size:.78rem;font-weight:700;color:var(--earth);margin-bottom:8px;text-align:center}
.pt-body ul{list-style:none;padding:0;margin:0 0 8px;text-align:left}
.pt-body li{padding:2px 0;font-size:.7rem}
.pt-body li::before{content:'• ';color:var(--wood);font-weight:700}
.pt-body li.pt-locked{color:var(--t3)}
.pt-body li.pt-locked::before{content:'— ';color:var(--t3)}
.pt-body li.pt-check::before{content:'✓ ';color:var(--wood);font-weight:700}
.pt-note{font-size:.65rem;color:var(--t3);text-align:center;margin-top:6px;line-height:1.4}
.pt-divider{height:1px;background:var(--bd);margin:10px 0}
.pt-price-sm{font-size:.72rem;color:var(--t2);text-align:center;margin-bottom:4px}
.pt-price-sm strong{color:var(--earth)}

/* ===== Coin Toss Area ===== */
.coins-layout{display:flex;gap:20px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.coins-center{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:280px}
.coins-side{flex:0 0 auto;width:150px;min-width:130px;display:flex;flex-direction:column;align-items:center;padding-top:28px}
.coins-side .ylist{width:100%}

.turtle-shell{display:flex;justify-content:center;padding:0 0 8px;opacity:.85;transition:opacity .3s}
.turtle-shell img{display:block;max-width:100%;height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}
.turtle-shell:hover{opacity:1}
.coins-area{display:flex;justify-content:center;gap:20px;padding:10px 0;flex-wrap:wrap}
.coin{
  width:80px;height:80px;border-radius:50%;perspective:600px;
  cursor:pointer;transition:transform .15s;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.12));
}
.coin:hover{transform:scale(1.06)}
.coin-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d}
.coin.yang .coin-inner{transform:rotateY(0deg)}
.coin.yin .coin-inner{transform:rotateY(180deg)}
.cface{
  position:absolute;width:100%;height:100%;border-radius:50%;
  backface-visibility:hidden;display:flex;align-items:center;
  justify-content:center;overflow:hidden;
}
.cface img{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block;
}
.ch{
  /* yang coin face — image via img tag */
}
.ct{
  transform:rotateY(180deg);
}

/* ===== Turtle Shell Stage ===== */
.shell-stage{
  position:relative;display:flex;
  flex-direction:column;align-items:center;gap:8px;
}
.shell-stage .turtle-shell{
  position:relative;z-index:1;transition:transform .3s,opacity .3s;
}
.shell-stage .coins-area{
  position:relative;z-index:2;
}

/* Shell shake — composite Z-rotate + Y oscillate */
.shell-stage.shaking .turtle-shell{
  animation:shellShake .55s cubic-bezier(.36,.07,.19,.97);
}
@keyframes shellShake{
  0%   {transform:rotate(0deg) translateY(0);}
  10%  {transform:rotate(-5deg) translateY(-3px);}
  20%  {transform:rotate(6deg) translateY(-6px);}
  30%  {transform:rotate(-8deg) translateY(-4px);}
  40%  {transform:rotate(8deg) translateY(-6px);}
  50%  {transform:rotate(-5deg) translateY(-3px);}
  60%  {transform:rotate(4deg) translateY(-1px);}
  70%  {transform:rotate(-3deg) translateY(0);}
  80%  {transform:rotate(2deg) translateY(0);}
  90%  {transform:rotate(-1deg) translateY(0);}
  100% {transform:rotate(0deg) translateY(0);}
}

/* Coin drop — gravity free-fall from shell */
.coin.dropping{
  animation:coinDrop .55s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes coinDrop{
  0%   {transform:translateY(var(--drop-start, -80px)); opacity:0;}
  12%  {opacity:1;}
  50%  {transform:translateY(10px);}
  70%  {transform:translateY(-4px);}
  88%  {transform:translateY(2px);}
  100% {transform:translateY(0); opacity:1;}
}
/* Coins hidden in shell mode until animated */
.shell-mode .coin{opacity:0}
.shell-mode .coin.dropping,
.shell-mode .coin.spinning,
.shell-mode .coin.yang,
.shell-mode .coin.yin{opacity:1}

/* Coin spin — fast then gradually decelerate to final face */
.coin.spinning.yang .coin-inner{
  animation:coinSpinYang 2.2s linear forwards;
}
.coin.spinning.yin .coin-inner{
  animation:coinSpinYin 2.2s linear forwards;
}
@keyframes coinSpinYang{
  0%   {transform:rotateY(0deg);}
  5%   {transform:rotateY(360deg);}
  10%  {transform:rotateY(720deg);}
  16%  {transform:rotateY(1080deg);}
  23%  {transform:rotateY(1440deg);}
  32%  {transform:rotateY(1800deg);}
  43%  {transform:rotateY(2160deg);}
  57%  {transform:rotateY(2340deg);}
  74%  {transform:rotateY(2480deg);}
  90%  {transform:rotateY(2520deg);}
  100% {transform:rotateY(2520deg);}
}
@keyframes coinSpinYin{
  0%   {transform:rotateY(0deg);}
  5%   {transform:rotateY(360deg);}
  10%  {transform:rotateY(720deg);}
  16%  {transform:rotateY(1080deg);}
  23%  {transform:rotateY(1440deg);}
  32%  {transform:rotateY(1800deg);}
  43%  {transform:rotateY(2160deg);}
  57%  {transform:rotateY(2340deg);}
  74%  {transform:rotateY(2520deg);}
  90%  {transform:rotateY(2700deg);}
  100% {transform:rotateY(2700deg);}
}

/* Mobile: dim shell, disable interaction */
@media(max-width:640px){
  .shell-stage .turtle-shell{opacity:.35;pointer-events:none}
  .pricing-grid{flex-direction:column;align-items:stretch}
  .pricing-tier{max-width:100%}
}

/* ===== Progress Bar ===== */
.progress-wrap{display:flex;justify-content:center;padding:8px 0}
.progress-line{display:flex;align-items:center;gap:0}
.pd{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:var(--xs);font-weight:700;
  background:var(--bg-tint);color:var(--t3);transition:all .3s;position:relative;z-index:1;
}
.pd.done{background:var(--wood);color:#fff}
.pd.cur{border:2px solid var(--earth);color:var(--earth);animation:pdPulse 2s infinite}
.pd.mv::after{content:'•';position:absolute;top:-4px;right:-3px;font-size:10px;color:var(--fire)}
.pd-connector{width:16px;height:2px;background:var(--bd);transition:all .3s}
.pd-connector.done{background:var(--wood)}
@keyframes pdPulse{0%,100%{box-shadow:0 0 0 rgba(240,168,48,.3)}50%{box-shadow:0 0 0 8px rgba(240,168,48,0)}}

/* ===== Yao Lines ===== */
.ylist{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px}
.yrow{
  display:flex;align-items:center;gap:12px;padding:6px 16px;
  border-radius:var(--r-sm);width:100%;max-width:360px;
  transition:background .2s;
}
.yrow:hover{background:var(--wood-bg)}
.yrow-new{animation:yaoIn .4s ease-out}
@keyframes yaoIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes yaoInR{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.yrow-new-r{animation:yaoInR .4s ease-out}
.ylbl{font-size:var(--xs);color:var(--t3);min-width:50px}
.yline{flex:1;text-align:center;font-size:1.3rem;font-weight:700;letter-spacing:3px}
.yline.yang{color:var(--wood)}
.yline.yin{color:var(--metal)}
.ymv{font-size:var(--sm);color:var(--fire);font-weight:700;min-width:20px;text-align:center}

/* ===== Hexagram Cards ===== */
.hxs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hcard{
  text-align:center;padding:22px 16px;border-radius:var(--r-lg);
  background:var(--bg-card);border:1px solid var(--bd);transition:all .3s;
}
.hcard:hover{box-shadow:var(--sh-lg);border-color:var(--wood)}
.hcard h3{font-size:var(--sm);color:var(--wood);margin-bottom:6px;font-weight:700;letter-spacing:1px}
.hcard .hxv{font-size:2.2rem;margin:8px 0;line-height:1.3;letter-spacing:2px}
.hcard .hxe{font-size:var(--xs);color:var(--t2)}
.hcard .subtitle{font-size:var(--xs);color:var(--t3)}

/* ===== Na Jia Yao Cards (replaces table) ===== */
.yao-cards{display:flex;flex-direction:column;gap:6px}
.yao-card{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-radius:var(--r);background:var(--bg-card);
  border:1px solid var(--bd);border-left:4px solid var(--bd);
  transition:all .2s;font-size:var(--sm);
}
.yao-card:hover{box-shadow:var(--sh);border-left-color:var(--wood)}
.yao-card.dong{border-left-color:var(--fire);background:var(--fire-bg)}
.yao-card .yc-pos{font-size:var(--xs);color:var(--t3);min-width:48px;font-weight:600}
.yao-card .yc-glyph{font-size:1.5rem;font-weight:700;min-width:40px;text-align:center}
.yao-card .yc-glyph.yang{color:var(--wood)}
.yao-card .yc-glyph.yin{color:var(--metal)}
.yao-card .yc-info{flex:1;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.yao-card .yc-info span{font-size:var(--xs);color:var(--t2)}
.yao-card .yc-info .yc-lq{font-weight:700;color:var(--text);font-size:var(--sm)}
.yao-card .yc-badge{
  font-size:.65rem;padding:3px 10px;border-radius:12px;font-weight:700;
  letter-spacing:.5px;
}
.yc-badge.shi{background:var(--earth);color:#fff}
.yc-badge.ying{background:var(--metal);color:#fff}
.yc-badge.dong-badge{background:var(--fire);color:#fff}

/* ===== Interpretation Cards ===== */
.interp-cards{display:flex;flex-direction:column;gap:10px}
.interp-card{
  padding:20px 24px;border-radius:var(--r);
  background:var(--bg-card);border:1px solid var(--bd);
  border-left-width:3px;border-left-style:solid;transition:all .2s;
}
.interp-card.core{border-left-width:4px}
.interp-card h4{
  font-size:var(--body);color:var(--text);margin-bottom:10px;
  font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:8px;
}
.interp-card h4::after{content:'';flex:1;height:1px;background:var(--bd)}
.interp-card.core h4{color:var(--wood)}
.interp-card p,.interp-card li{font-size:var(--sm);line-height:1.8;margin-bottom:4px}
.interp-card .meta-text{font-size:var(--xs);color:var(--t2);line-height:1.6}

/* Aux collapsible */
.jf-aux .jf-body{display:none}
.jf-aux.jf-open .jf-body{display:block!important}
.jf-aux h4{cursor:pointer;user-select:none;color:var(--t2)!important}
.jf-aux h4:hover{color:var(--wood)!important}

/* ===== Paywall ===== */
.pw{
  border-radius:var(--r);padding:20px;text-align:center;
  background:var(--bg-card);border:2px solid var(--earth);
  margin-bottom:16px;
}
.pw-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.pw-inner h3{font-size:var(--h3);color:var(--earth);font-weight:700}
.pw-inner p{color:var(--t2);max-width:320px;line-height:1.6;font-size:var(--sm)}

/* ===== Sidebar (results page) ===== */
.sidebar{
  position:fixed;left:max(calc((100vw - 1100px) / 2 - 80px), 8px);top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px;border-radius:var(--r-lg);
  background:var(--bg-card);border:1px solid var(--bd);
  box-shadow:var(--sh);z-index:40;
}
.s-btn{
  display:block;width:100%;padding:8px 10px;border:none;border-radius:var(--r-sm);
  background:transparent;color:var(--t2);font-size:.7rem;cursor:pointer;
  text-align:center;font-family:inherit;transition:all .2s;
  white-space:nowrap;letter-spacing:.5px;
}
.s-btn:hover{background:var(--wood-bg);color:var(--wood)}
.s-btn.active{background:var(--wood);color:#fff}

/* Side info panel (results page) */
.side-info{
  width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;
  position:sticky;top:80px;align-self:flex-start;
}
.side-info .mini-card{
  padding:16px;border-radius:var(--r);background:var(--bg-card);
  border:1px solid var(--bd);text-align:center;font-size:var(--xs);
}
.side-info .mini-card h4{font-size:var(--xs);color:var(--wood);margin-bottom:6px;font-weight:700}
.side-info .mini-card .hex-text{font-size:1.1rem;letter-spacing:2px;margin:4px 0;line-height:1.4}
.side-info .mini-card .label{color:var(--t3);font-size:.7rem}

/* Results layout */
.results-layout{display:flex;gap:20px;align-items:flex-start}
.results-main{flex:1;min-width:0}

/* ===== Drawers & Modals ===== */
.drawer-wrap{position:fixed;inset:0;z-index:100}
.drawer-wrap .modal-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.35);
  animation:fadeIn .2s;
}
.drawer-wrap .drawer{
  position:absolute;top:0;right:0;bottom:0;width:420px;max-width:92vw;
  background:var(--bg-card);z-index:1;
  box-shadow:-4px 0 32px rgba(0,0,0,.1);
  animation:drawerIn .3s cubic-bezier(.2,0,.2,1);
  padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;
}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.drawer h2{font-size:var(--h2);font-weight:700;margin-bottom:4px}
.drawer .mclose{
  position:absolute;top:16px;right:16px;background:none;border:none;
  font-size:1.3rem;cursor:pointer;color:var(--t2);
}
.drawer .mclose:hover{color:var(--text)}

/* Legacy modal (kept for forgot-pw / change-pw) */
.mback{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s}
.modal{
  position:relative;
  background:var(--bg-card);border-radius:var(--r-lg);padding:24px;
  max-width:420px;width:94%;box-shadow:var(--sh-lg);
  animation:modalIn .3s cubic-bezier(.2,0,.2,1);
  max-height:90vh;overflow-y:auto;border:1px solid var(--bd);
}
.modal h2{font-size:var(--h2);font-weight:700;margin-bottom:12px}
.modal h3{font-size:var(--h3);margin-bottom:8px}
.mclose{position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--t2)}
.mclose:hover{color:var(--text)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Form groups */
.fg{margin-bottom:12px}
.fg label{display:block;font-size:var(--sm);color:var(--t2);margin-bottom:4px}
.fg input{
  width:100%;padding:12px 16px;border:2px solid var(--bd);border-radius:var(--r);
  font-size:var(--body);background:var(--bg-tint);color:var(--text);
  font-family:var(--font);transition:all .2s;
}
.fg input:focus{outline:none;border-color:var(--wood);background:var(--bg-card)}

.btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}

/* Plan options */
.plan-opt{
  flex:1;min-width:100px;padding:14px 10px;border:2px solid var(--bd);
  border-radius:var(--r);text-align:center;cursor:pointer;transition:all .2s;
  background:var(--bg-card);
}
.plan-opt:hover{border-color:var(--wood)}
.plan-opt.sel{border-color:var(--earth);background:var(--earth-bg)}
.plan-opt strong{font-size:1.1rem;color:var(--earth)}
.plan-opt small{color:var(--t2);font-size:var(--xs)}

/* ===== Footer ===== */
.ft{margin-top:auto;padding:20px 0;display:flex;flex-direction:column;gap:12px}
.sb{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sbtn{
  padding:8px 16px;border-radius:20px;border:none;cursor:pointer;
  font-size:var(--xs);color:#fff;font-weight:600;transition:all .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.sbtn:hover{transform:translateY(-1px)}
.stwit{background:#1DA1F2}.sfb{background:#1877F2}.sline{background:#06C755}
.scopy{background:var(--wood)}

.adbox{
  background:var(--bg-tint);border:1px dashed var(--bd);border-radius:var(--r);
  padding:16px;text-align:center;color:var(--t3);font-size:var(--xs);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
}

.invbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;padding:4px}
.invlink{
  flex:1;min-width:160px;padding:8px 12px;border:1px solid var(--bd);
  border-radius:20px;background:var(--bg-tint);font-size:var(--xs);
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ===== Toast ===== */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--text);color:#fff;padding:10px 20px;
  border-radius:20px;font-size:var(--sm);z-index:200;
  animation:toastIn .3s;box-shadow:var(--sh-lg);max-width:90vw;text-align:center;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ===== Accessibility ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.term-tip{border-bottom:1px dashed var(--earth);cursor:help;position:relative;color:var(--earth)}
.term-tip:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--bg-card);color:var(--text);border:1px solid var(--earth);border-radius:8px;padding:6px 10px;font-size:.72rem;line-height:1.5;white-space:normal;max-width:260px;width:max-content;z-index:999;box-shadow:var(--sh);pointer-events:none}

/* ===== Utility ===== */
.hid{display:none!important}
.tc{text-align:center}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.mt16{margin-top:16px}
.fw{display:flex;flex-wrap:wrap}
.g8{gap:8px}

/* ===== Transitions ===== */
.rcard-in{animation:rcardIn .5s ease-out}
@keyframes rcardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hex-glow{animation:hexFlash .6s ease-in-out}
@keyframes hexFlash{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

/* ===== Topbar visibility states ===== */
.topbar.toss-active{opacity:0;pointer-events:none;transition:opacity .4s}
.topbar.result-active{background:var(--bg-card);border-bottom:1px solid var(--bd);box-shadow:var(--sh-sm)}

/* ===== Mobile Bottom Bar ===== */
.mob-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-around;align-items:center;
  padding:8px 16px 12px;
  background:var(--bg-card);border-top:1px solid var(--bd);
  box-shadow:0 -2px 12px rgba(0,0,0,0.04);
}
.mb-icon{
  background:none;border:none;font-size:1.4rem;padding:6px 16px;
  cursor:pointer;color:var(--t3);transition:all .2s;border-radius:8px;
}
.mb-icon.active{color:var(--wood)}
.mb-icon:hover{color:var(--wood);background:var(--wood-bg)}

/* ===== Responsive ===== */
/* Mobile (≤640px) */
@media(max-width:640px){
  :root{--h1:1.8rem;--h2:1.3rem;--h3:1.1rem;--body:0.95rem}
  .page{padding:0 12px 20px;gap:14px}
  .topbar{padding:8px 0;min-height:40px;font-size:var(--xs)}
  .hero-wrap{min-height:35vh;padding:20px 0}
  .hero .qa{flex-direction:column}
  .qi{min-width:100%}
  .steps{grid-template-columns:1fr;gap:10px}
  .step{padding:20px 14px}
  .card{padding:16px 14px}
  .coins-layout{flex-direction:column;gap:20px}
  .coins-center{min-width:100%}.coins-side{flex-direction:row;width:100%;min-width:100%;padding-top:0;gap:8px;justify-content:center}.coins-side .ylist{flex-direction:row}
  .coins-area{gap:12px}
  .coin{width:60px;height:60px}
  .hxs{grid-template-columns:1fr}
  .hxv{font-size:1.5rem}
  .yline{font-size:1.1rem}
  .ylbl{font-size:.65rem;min-width:40px}
  .results-layout{flex-direction:column}
  .side-info{width:100%;flex-direction:row;flex-wrap:wrap;position:static}
  .side-info .mini-card{flex:1;min-width:120px}
  .yao-card{padding:10px 12px;gap:8px;font-size:var(--xs)}
  .yao-card .yc-info{gap:8px}
  .interp-card{padding:14px 16px}
  .drawer-wrap .drawer{width:100%;max-width:100%}
  .btn{font-size:var(--xs);padding:8px 16px}
  .blg{padding:12px 24px;font-size:var(--body)}
  .sidebar{display:none}
  .mob-bar{display:flex}
}

/* Tablet (641px-1024px) */
@media(min-width:641px) and (max-width:1024px){
  :root{--h1:2.2rem}
  .page{max-width:94vw;padding:0 20px 24px}
  .coins-layout{flex-direction:column;align-items:center}
  .coins-center{min-width:100%;max-width:560px}.coins-side{flex-direction:row;width:100%;min-width:100%;padding-top:0;gap:10px;justify-content:center}.coins-side .ylist{flex-direction:row}
  .hxs{gap:12px}
  .hxv{font-size:1.8rem}
  .results-layout{flex-direction:column}
  .side-info{width:100%;flex-direction:row;position:static}
  .side-info .mini-card{flex:1}
  .sidebar{display:none}
  .drawer-wrap .drawer{width:380px}
}

/* Desktop (1025px+) */
@media(min-width:1025px){
  .page{max-width:1100px}
  .card{padding:24px 32px}
  .hxs{gap:16px}
  .drawer{width:420px}
}

/* Wide (1400px+) */
@media(min-width:1400px){
  .page{max-width:1200px}
}

/* Locked cards — always hide content */
.card-locked .jf-body{display:none!important}
.card-locked.jf-open .jf-body{display:none!important}