/* ─── TOKENS ─── */
:root{
  --gold:#c9a84c; --gold-bright:#f0d080; --gold-dim:rgba(201,168,76,0.15);
  --gold-glow:rgba(201,168,76,0.35);
  --ink:#04030a; --ink2:#0a0818;
  --surface:rgba(255,255,255,0.028);
  --border:rgba(201,168,76,0.18);
  --border-dim:rgba(255,255,255,0.06);
  --text:#e8e0d0; --text-dim:#8a7f6e; --text-gold:#c9a84c;
  --c1:#7c3aed; --c2:#06b6d4;
  --font-display:'Playfair Display',Georgia,serif;
  --font-ui:'Outfit',sans-serif;
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  background:var(--ink);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;

}



/* ─── GRAIN ─── */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.022;animation:grain .6s steps(1) infinite;
}
@keyframes grain{0%{background-position:0 0}25%{background-position:-5% -8%}50%{background-position:8% 4%}75%{background-position:-7% 9%}100%{background-position:4% -5%}}

/* ─── THREE.JS CANVAS ─── */
#bg-3d{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ─── LAYOUT ─── */
.main-wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:2rem 1.5rem 4rem;}

/* ─── HERO ─── */
#hero{
  position:relative;width:100%;height:auto;min-height:260px;
  border-radius:2.5rem;overflow:hidden;
  margin-bottom:2rem;
  border:1px solid var(--border);
  box-shadow:0 0 120px rgba(201,168,76,0.1), 0 40px 80px rgba(0,0,0,0.7);
}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;}
#hero-content{
  position:relative;z-index:10;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:1.75rem 1.5rem 1.5rem;
  gap:.6rem;
}
#hero-eyebrow{
  font-family:var(--font-ui);font-size:.72rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);opacity:.8;
}
#hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:900;
  color:#fff;
  text-align:center;
  line-height:1.05;
  letter-spacing:-.02em;
  text-shadow:0 0 60px rgba(201,168,76,0.4), 0 2px 4px rgba(0,0,0,0.8);
}
#hero-title span{
  background:linear-gradient(120deg,var(--gold-bright) 0%,var(--gold) 50%,#e8c87a 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
#hero-sub{
  font-family:var(--font-ui);font-size:.9rem;font-weight:300;
  color:rgba(232,224,208,.55);letter-spacing:.06em;
}
/* gold rule under hero */
#hero-rule{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin-top:.1rem;margin-bottom:.35rem;}
/* edge vignette */
#hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(4,3,10,.85) 100%);pointer-events:none;z-index:5;}

/* ─── HERO WIDGETS BAR ─── */
#hero-widgets{
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
  width:100%;margin-top:.3rem;pointer-events:all;position:relative;z-index:20;
}
.hw{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem 1.1rem;border-radius:1rem;
  background:rgba(4,3,10,.6);
  border:1px solid rgba(201,168,76,.18);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  font-family:var(--font-ui);color:#fff;
  transition:border-color .25s,box-shadow .25s,transform .2s;
  animation:hwSlideIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
.hw:nth-child(1){animation-delay:.05s;}
.hw:nth-child(2){animation-delay:.15s;}
.hw:nth-child(3){animation-delay:.25s;}
@keyframes hwSlideIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.hw:hover{border-color:rgba(201,168,76,.4);box-shadow:0 0 18px rgba(201,168,76,.13);transform:translateY(-2px);}
.hw-icon{font-size:1.1rem;line-height:1;flex-shrink:0;}
.hw-body{display:flex;flex-direction:column;line-height:1.25;}
.hw-val{font-size:.95rem;font-weight:700;color:var(--gold);}
.hw-val.mono{font-family:'Courier New',monospace;letter-spacing:.04em;}
.hw-lbl{font-size:.6rem;color:rgba(255,255,255,.38);letter-spacing:.09em;text-transform:uppercase;margin-top:.05rem;}
/* Stopwatch buttons */
.hw-sw{gap:.55rem;}
.sw-btns{display:flex;gap:.35rem;align-items:center;margin-left:.15rem;}
.sw-action{
  cursor:pointer;
  border:1px solid rgba(201,168,76,.38);
  background:rgba(201,168,76,.12);
  padding:.3rem .7rem;border-radius:.6rem;
  font-family:var(--font-ui);font-size:.73rem;font-weight:600;
  color:var(--gold);letter-spacing:.03em;white-space:nowrap;
  transition:background .18s,box-shadow .18s,border-color .18s;
  -webkit-tap-highlight-color:transparent;
}
.sw-action.running{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.45);color:#fca5a5;}
.sw-action:hover{box-shadow:0 0 10px rgba(201,168,76,.22);}
.sw-reset{
  cursor:pointer;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:.5rem;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.38);
  font-size:.85rem;transition:all .18s;-webkit-tap-highlight-color:transparent;
}
.sw-reset:hover{background:rgba(239,68,68,.18);color:#fca5a5;border-color:rgba(239,68,68,.35);}
/* Stopwatch pulse when running */
#hw-stopwatch.active .hw-val{
  animation:swPulse 1s ease-in-out infinite;
}
@keyframes swPulse{0%,100%{color:var(--gold);}50%{color:var(--gold-bright);text-shadow:0 0 8px rgba(201,168,76,.6);}}
/* Quote ticker */
#hero-quote{
  font-family:var(--font-ui);font-size:.76rem;
  color:rgba(232,224,208,.4);letter-spacing:.04em;
  font-style:italic;text-align:center;max-width:500px;
  min-height:1.1em;padding:0 1rem;
  transition:opacity .4s,transform .4s;
}
#hero-quote.fade-out{opacity:0;transform:translateY(-5px);}
#hero-quote.fade-in{opacity:1;transform:none;}
@media(max-width:640px){
  #hero{min-height:auto;border-radius:1.5rem;}
  #hero-content{padding:1.25rem .9rem 1.1rem;}
  #hero-widgets{gap:.45rem;}
  .hw{padding:.45rem .75rem;border-radius:.75rem;}
  .hw-val{font-size:.82rem;}
  .hw-icon{font-size:.95rem;}
  #hero-quote{font-size:.68rem;}
  .sw-action{font-size:.66rem;padding:.26rem .55rem;}
}

/* ─── NAV TABS ─── */
.tabs-wrap{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  margin-bottom:1.75rem;
  padding:1rem 1.25rem;
  background:var(--surface);
  border:1px solid var(--border-dim);
  border-radius:1.5rem;
  backdrop-filter:blur(20px);
}
.tab-button{
  font-family:var(--font-ui);font-weight:500;font-size:.85rem;
  padding:.5rem 1.3rem;border-radius:.75rem;
  border:1px solid var(--border-dim);
  background:transparent;color:var(--text-dim);
transition:all .25s ease;
  position:relative;overflow:hidden;
  letter-spacing:.03em;
}
.tab-button::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(201,168,76,.12),transparent);
  opacity:0;transition:opacity .25s;
}
.tab-button:hover{
  color:#fff;border-color:var(--border);
  box-shadow:0 0 20px var(--gold-dim);
}
.tab-button:hover::before{opacity:1;}

/* ─── CARDS ─── */
.subject-card,.skill-card{
  background:var(--surface);
  border:1px solid var(--border-dim);
  border-radius:1.75rem;
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);

  position:relative;overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  transition:box-shadow .35s ease, border-color .35s ease;
  box-shadow:0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
/* gold shimmer top line */
.subject-card::before,.skill-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;transition:opacity .4s ease;
}
.subject-card:hover::before,.skill-card:hover::before{opacity:1;}

/* inner sweep */
.subject-card::after,.skill-card::after{
  content:'';position:absolute;
  top:-60%;left:-70%;width:40%;height:220%;
  background:linear-gradient(105deg,transparent,rgba(201,168,76,.06),transparent);
  transform:skewX(-18deg);
  transition:left .7s cubic-bezier(.25,.46,.45,.94);pointer-events:none;z-index:1;
}
.subject-card:hover::after,.skill-card:hover::after{left:160%;}

.subject-card:hover,.skill-card:hover{
  border-color:var(--border);
  box-shadow:0 0 0 1px var(--gold-dim), 0 20px 60px rgba(201,168,76,.12), 0 8px 24px rgba(0,0,0,.6);
}

/* ─── GLASS ─── */
.glass,.glass-strong{
  background:var(--surface);
  border:1px solid var(--border-dim);
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  box-shadow:0 4px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ─── TYPOGRAPHY ─── */
h1,h2,h3{font-family:var(--font-display);}
h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;letter-spacing:-.02em;color:#fff;}
h3{font-size:1.15rem;font-weight:700;color:#fff;letter-spacing:-.01em;}

/* card title gold on hover */
.subject-card:hover h3,.skill-card:hover h3{color:var(--gold);}

/* ─── PAGE SYSTEM ─── */
.page{display:none;}
.page.active{display:block;animation:pgIn .45s cubic-bezier(.25,.46,.45,.94) both;}
@keyframes pgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ─── BACK / RESET BUTTONS ─── */
.back-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1.3rem;border-radius:.8rem;
  border:1px solid var(--border-dim);background:var(--surface);
  color:var(--text-dim);font-family:var(--font-ui);font-size:.85rem;font-weight:500;
transition:all .25s ease;backdrop-filter:blur(12px);
}
.back-btn:hover{border-color:var(--border);color:var(--gold);box-shadow:0 0 18px var(--gold-dim);}

.reset-btn{
  padding:.55rem 1.4rem;border-radius:.8rem;
  border:1px solid rgba(239,68,68,.2);background:rgba(239,68,68,.04);
  color:#f87171;font-family:var(--font-ui);font-size:.85rem;font-weight:500;
transition:all .25s ease;backdrop-filter:blur(12px);
}
.reset-btn:hover{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12);color:#fff;}

/* ─── TABLE ─── */
table{width:100%;color:var(--text);}
thead th{
  font-family:var(--font-ui);font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
}
tbody tr{border-bottom:1px solid rgba(255,255,255,.035);transition:background .15s;}
tbody tr:hover{background:rgba(201,168,76,.04);}
tbody td{padding:.65rem 1rem;font-size:.9rem;}
tr,td,th,tbody,thead{background:transparent!important;}

/* ─── PROGRESS ─── */
.progress-container{background:rgba(201,168,76,.08);border-radius:9999px;}
.progress-bar{
  border-radius:9999px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 8px var(--gold-glow);
}

/* ─── CHECKBOX ─── */
input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--gold);}

/* ─── SELECT / INPUT ─── */
select,input[type=text],input[type=password],textarea{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-dim);
  color:var(--text);border-radius:.6rem;
  padding:.5rem .75rem;font-family:var(--font-ui);
}
select:focus,input:focus,textarea:focus{
  outline:none;border-color:var(--border);
  box-shadow:0 0 0 3px var(--gold-dim);
}

/* ─── STAGGER CARDS ─── */
.subject-card:nth-child(1){animation-delay:.05s}
.subject-card:nth-child(2){animation-delay:.10s}
.subject-card:nth-child(3){animation-delay:.15s}
.subject-card:nth-child(4){animation-delay:.20s}
.subject-card:nth-child(5){animation-delay:.25s}
.subject-card:nth-child(6){animation-delay:.30s}
.subject-card,.skill-card{animation:cardIn .55s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}

/* ─── FOOTER ─── */
.footer{
  background:transparent;
  border-top:1px solid var(--border-dim);
  color:var(--text-dim);padding:1.25rem;
  text-align:center;font-size:.78rem;margin-top:2.5rem;
  letter-spacing:.04em;
}

/* ─── MISC CLASSES used by app JS ─── */
.btn-label{
  display:inline-flex;align-items:center;gap:6px;
  position:relative;z-index:2;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s;
}
.btn-hover-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;
  z-index:3;opacity:0;pointer-events:none;font-weight:600;white-space:nowrap;
  color:#04030a;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s;
}
.tab-button .btn-hover-label{transform:translateY(110%);}
.back-btn  .btn-hover-label{transform:translateX(-110%);color:#04030a;}
.reset-btn .btn-hover-label{transform:translateY(110%);color:#fff;}
.btn-fill{
  position:absolute;width:10px;height:10px;border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  transition:transform .5s cubic-bezier(.4,0,.2,1);z-index:1;pointer-events:none;
}
.tab-button{position:relative;overflow:hidden;border:1px solid var(--border-dim);color:var(--text-dim);transition:border-color .25s,box-shadow .25s;}
.tab-button .btn-fill{background:var(--gold);}
.tab-button:hover{border-color:var(--border);box-shadow:0 0 22px var(--gold-dim);}
.tab-button:hover .btn-label{transform:translateY(-110%);opacity:0;}
.tab-button:hover .btn-hover-label{transform:translateY(0);opacity:1;}
.tab-button:hover .btn-fill{transform:translate(-50%,-50%) scale(60);}
.tab-button.active{background:var(--gold-dim);border-color:var(--border);color:var(--text);box-shadow:0 0 22px var(--gold-dim);}
.back-btn{position:relative;overflow:hidden;}
.back-btn .btn-fill{background:var(--gold);}
.back-btn:hover .btn-label{transform:translateX(110%);opacity:0;}
.back-btn:hover .btn-hover-label{transform:translateX(0);opacity:1;}
.back-btn:hover .btn-fill{transform:translate(-50%,-50%) scale(60);}
.reset-btn{position:relative;overflow:hidden;}
.reset-btn .btn-fill{background:#ef4444;}
.reset-btn:hover .btn-label{transform:translateY(-110%);opacity:0;}
.reset-btn:hover .btn-hover-label{transform:translateY(0);opacity:1;}
.reset-btn:hover .btn-fill{transform:translate(-50%,-50%) scale(60);}
.btn-arrow{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.select-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem 1.1rem;border-radius:.6rem;
  border:1px solid var(--border);color:var(--gold);
  font-family:var(--font-ui);font-weight:500;font-size:.82rem;
  background:var(--gold-dim);transition:all .2s;
}
.select-btn:hover{background:rgba(201,168,76,.25);box-shadow:0 0 16px var(--gold-dim);}
.adv-pyq-section{border-top:1px solid rgba(201,168,76,.15);margin-top:1.5rem;padding-top:1.5rem;}
.key-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem;}
.chips-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem;}
.qchip{padding:.28rem .65rem;border-radius:9999px;font-size:.73rem;
  background:var(--gold-dim);border:1px solid var(--border);color:var(--text-gold);transition:all .2s;}
.qchip:hover{background:rgba(201,168,76,.28);color:#fff;}
.provider-card{border:1px solid var(--border-dim);border-radius:10px;padding:10px;transition:all .2s;background:var(--surface);}
.provider-card:hover{border-color:var(--border);background:var(--gold-dim);transform:translateY(-2px);}
.provider-card.active{border-color:var(--gold);background:rgba(201,168,76,.15);}
.badge-free{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.25);padding:1px 7px;border-radius:9999px;font-size:10px;font-weight:700;}
.badge-paid{background:rgba(201,168,76,.15);color:var(--gold);border:1px solid var(--border);padding:1px 7px;border-radius:9999px;font-size:10px;font-weight:700;}
.orb-node{z-index:20;} .orb-node-inner{transition:all .3s;}
.orb-node-inner:hover{transform:scale(1.3)!important;filter:brightness(1.5)!important;}
.ripple{position:fixed;width:50px;height:50px;border-radius:50%;pointer-events:none;z-index:9999;border:2px solid var(--gold);animation:rippleOut .8s ease-out forwards;}
@keyframes rippleOut{0%{transform:translate(-50%,-50%) scale(0);opacity:.7}100%{transform:translate(-50%,-50%) scale(6);opacity:0}}
.animate-fadeIn{animation:pgIn .5s ease both;}

/* ─── AMOUNT BUTTONS (Support page) ─── */
.amount-btn{
  padding:.45rem 1.1rem;border-radius:.75rem;
  border:1px solid var(--border);color:var(--text-gold);
  font-family:var(--font-ui);font-size:.85rem;font-weight:600;
  background:var(--gold-dim);cursor:pointer;
  transition:all .25s ease;
}
.amount-btn:hover{background:rgba(201,168,76,.28);color:#fff;box-shadow:0 0 16px var(--gold-glow);}
.amount-btn.active{background:linear-gradient(135deg,var(--gold),var(--gold-bright));color:#04030a;box-shadow:0 0 18px var(--gold-glow);}

/* ─── THEME TOAST / DOTS ─── */
#theme-toast{position:fixed;top:20px;right:20px;z-index:9999;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;backdrop-filter:blur(12px);border:1px solid var(--border);color:var(--gold);pointer-events:none;opacity:0;transition:opacity .3s;font-family:var(--font-ui);}
@keyframes themeLabel{0%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}
#theme-toast.show{animation:themeLabel 2.5s ease forwards;}
#file-input-hidden{display:none;}

/* ─── AI FAB ─── */
#ai-fab-wrap{position:fixed;bottom:24px;left:24px;z-index:9999;user-select:none;}
#ai-fab-wrap.offscreen{opacity:0;pointer-events:none;}
#ai-fab-wrap.snap-anim{transition:left .38s cubic-bezier(.34,1.56,.64,1),top .38s cubic-bezier(.34,1.56,.64,1);}
#ai-fab-label{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:11px;font-weight:600;font-family:var(--font-ui);
  color:var(--gold);background:rgba(10,8,24,.92);padding:4px 10px;border-radius:20px;
  border:1px solid var(--border);letter-spacing:.04em;pointer-events:none;
  animation:labelBob 3s ease-in-out infinite;
}
@keyframes labelBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
#ai-btn-ring-wrap{position:relative;width:56px;height:56px;cursor:pointer;}
#ai-btn-ring-wrap.dragging{cursor:grabbing;}
.pulse-ring,.pulse-ring2,.pulse-ring3{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--gold);
  animation:pRing 2.4s ease-out infinite;pointer-events:none;
}
.pulse-ring2{animation-delay:.8s;}
.pulse-ring3{animation-delay:1.6s;}
@keyframes pRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.2);opacity:0}}
/* ── THE FIX: HTML uses #ai-chat-btn not #ai-btn-inner ── */
#ai-chat-btn{
  width:56px;height:56px;border-radius:50%;overflow:hidden;
  border:2px solid var(--border);
  box-shadow:0 0 28px var(--gold-glow),0 4px 16px rgba(0,0,0,.7);
  background:rgba(10,8,24,.9);padding:0;cursor:pointer;
  display:block;position:relative;
  transition:box-shadow .3s,transform .25s;
}
#ai-chat-btn:hover{box-shadow:0 0 44px var(--gold-glow),0 6px 22px rgba(0,0,0,.8);transform:scale(1.08);}
.notif{
  position:absolute;top:-3px;right:-3px;
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);font-family:var(--font-ui);
  animation:notifPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes notifPop{from{transform:scale(0)}to{transform:scale(1)}}

/* ─── EDGE PEEK TAB ─── */
#ai-show-tab{
  position:fixed;z-index:9998;width:14px;height:52px;
  border-radius:0 9px 9px 0;cursor:pointer;display:none;
  background:linear-gradient(180deg,var(--gold),rgba(201,168,76,.5));
  box-shadow:3px 0 14px var(--gold-glow);transition:width .2s;
}
#ai-show-tab:hover{width:22px;}
#ai-show-tab.r{border-radius:9px 0 0 9px;right:0;left:auto!important;}

/* ─── AI CHAT PANEL ─── */
#ai-panel{
  position:fixed;bottom:90px;left:22px;z-index:9997;
  width:370px;max-width:calc(100vw - 44px);border-radius:22px;
  overflow:hidden;background:rgba(6,4,18,.97);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid var(--border);
  box-shadow:0 24px 80px rgba(0,0,0,.9),0 0 60px var(--gold-dim);
  display:none;flex-direction:column;max-height:600px;
}
#ai-panel.open{display:flex;animation:panelIn .38s cubic-bezier(.34,1.56,.64,1);}
@keyframes panelIn{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}
#ai-panel.expanded{
  width:min(780px,calc(100vw - 32px));max-height:calc(100vh - 80px);
  bottom:16px;left:50%;transform:translateX(-50%);border-radius:24px;
}
#ai-header{
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border-dim);
  background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.03));
  flex-shrink:0;
}
#ai-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:120px;}
#ai-footer{padding:10px 14px;border-top:1px solid var(--border-dim);background:rgba(0,0,0,.25);flex-shrink:0;}
#ai-body::-webkit-scrollbar{width:3px;}
#ai-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
/* Chat message rows */
.cm{display:flex;gap:8px;animation:msgPop .22s ease;}
.cm.user{flex-direction:row-reverse;}
.cm.bot{}
@keyframes msgPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bot-av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0;align-self:flex-end;border:1px solid var(--border-dim);}
.bot-av img{width:100%;height:100%;object-fit:cover;}
.cm-bub{
  padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.6;
  max-width:82%;word-break:break-word;font-family:var(--font-ui);
}
.cm.bot .cm-bub{
  background:rgba(255,255,255,.055);border:1px solid var(--border-dim);
  color:var(--text);border-bottom-left-radius:4px;
}
.cm.user .cm-bub{
  background:rgba(201,168,76,.18);border:1px solid var(--border);
  color:var(--text);border-bottom-right-radius:4px;
}
.cm.bot .cm-bub b,.cm.bot .cm-bub strong{color:var(--gold);}
.cm.bot .cm-bub code{background:rgba(201,168,76,.12);padding:1px 5px;border-radius:4px;font-size:12px;}
.cm.bot .cm-bub pre{background:rgba(0,0,0,.35);padding:10px;border-radius:8px;overflow-x:auto;font-size:12px;margin:6px 0;border:1px solid var(--border-dim);}
.cm-time{font-size:.62rem;color:var(--text-dim);margin-top:3px;text-align:right;font-family:var(--font-ui);}
.cm-img{max-width:160px;border-radius:8px;margin-bottom:4px;display:block;}
/* Typing dots */
.typing-bub{display:flex;gap:5px;align-items:center;padding:12px 16px!important;}
.typing-bub span{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block;animation:typingDot 1.4s ease-in-out infinite;}
.typing-bub span:nth-child(2){animation-delay:.22s;}
.typing-bub span:nth-child(3){animation-delay:.44s;}
@keyframes typingDot{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1);opacity:1}}
/* Input */
#chat-input-txt{
  background:rgba(255,255,255,.045);color:var(--text);
  border:1px solid var(--border-dim);border-radius:12px;
  padding:9px 12px;font-size:13px;resize:none;width:100%;
  outline:none;font-family:var(--font-ui);transition:border-color .2s,box-shadow .2s;
  max-height:120px;overflow-y:auto;
}
#chat-input-txt:focus{border-color:var(--border);box-shadow:0 0 0 3px var(--gold-dim);}
#chat-send-btn{
  width:38px;height:38px;border-radius:10px;border:none;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
  color:#000;display:flex;align-items:center;justify-content:center;
  transition:all .2s;cursor:pointer;
}
#chat-send-btn:hover{transform:scale(1.12);box-shadow:0 4px 20px var(--gold-glow);}
#chat-send-btn:disabled{opacity:.35;transform:none;cursor:not-allowed;}
#img-upload-btn{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  border:1px solid var(--border-dim);background:var(--gold-dim);
  color:var(--gold);display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:all .2s;cursor:pointer;
}
#img-upload-btn:hover{background:rgba(201,168,76,.25);border-color:var(--border);}
#img-preview-wrap{display:none;}
#img-preview-wrap.show{display:block;}
.aip-close{
  background:rgba(255,255,255,.07);border:none;color:var(--text-dim);
  border-radius:8px;padding:4px 9px;transition:all .2s;font-size:13px;cursor:pointer;
}
.aip-close:hover{background:rgba(239,68,68,.18);color:#fca5a5;}
/* Provider panel toggle */
#ai-provider-panel.show{display:block!important;}
/* Sparkle keyframe (was missing) */
@keyframes sparkleFloat{
  0%  {opacity:1;transform:translate(0,0) scale(1);}
  100%{opacity:0;transform:translate(var(--sx,0px),var(--sy,-50px)) scale(0);}
}

/* ─── 6 THEMES ─── */
body[data-theme="gold"]   {--gold:#c9a84c;--gold-bright:#f0d080;--gold-dim:rgba(201,168,76,.15);--gold-glow:rgba(201,168,76,.35);--border:rgba(201,168,76,.2);}
body[data-theme="silver"] {--gold:#a8b8cc;--gold-bright:#d8e8f8;--gold-dim:rgba(168,184,204,.15);--gold-glow:rgba(168,184,204,.35);--border:rgba(168,184,204,.22);}
body[data-theme="rose"]   {--gold:#e879a0;--gold-bright:#f9b8cf;--gold-dim:rgba(232,121,160,.15);--gold-glow:rgba(232,121,160,.35);--border:rgba(232,121,160,.22);}
body[data-theme="cyan"]   {--gold:#06b6d4;--gold-bright:#67e8f9;--gold-dim:rgba(6,182,212,.15);--gold-glow:rgba(6,182,212,.35);--border:rgba(6,182,212,.22);}
body[data-theme="violet"] {--gold:#8b5cf6;--gold-bright:#c4b5fd;--gold-dim:rgba(139,92,246,.15);--gold-glow:rgba(139,92,246,.35);--border:rgba(139,92,246,.22);}
body[data-theme="emerald"]{--gold:#10b981;--gold-bright:#6ee7b7;--gold-dim:rgba(16,185,129,.15);--gold-glow:rgba(16,185,129,.35);--border:rgba(16,185,129,.22);}

/* ─── NOTICE BANNER ─── */
#notice-banner{
  display:flex;align-items:center;gap:.85rem;
  padding:.85rem 1.1rem;margin-bottom:1.5rem;
  border-radius:1.1rem;
  background:linear-gradient(120deg,rgba(201,168,76,.10) 0%,rgba(99,102,241,.08) 100%);
  border:1px solid rgba(201,168,76,.28);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  animation:noticeFadeIn .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes noticeFadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
#notice-banner.notice-hidden{
  animation:noticeSlideOut .35s ease forwards;
  pointer-events:none;
}
@keyframes noticeSlideOut{to{opacity:0;max-height:0;padding:0;margin:0;border-width:0;overflow:hidden;}}
.notice-icon{font-size:1.35rem;flex-shrink:0;line-height:1;}
.notice-text{flex:1;font-size:.82rem;line-height:1.55;color:var(--text);}
.notice-text strong{color:var(--gold);font-weight:700;}
.notice-close{
  flex-shrink:0;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:.5rem;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);
  font-size:.85rem;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
  -webkit-tap-highlight-color:transparent;
}
.notice-close:hover,.notice-close:focus{
  background:rgba(239,68,68,.18);color:#fca5a5;
  border-color:rgba(239,68,68,.4);outline:none;
}

/* ─── MOBILE PERFORMANCE FIXES ─── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:hidden;-webkit-overflow-scrolling:touch;}
/* Smoother tap on all interactive elements */
button,.subject-card,.skill-card,.tab-button,.back-btn,.reset-btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* Reduce 3D canvas load on small screens */
@media(max-width:640px){
  #bg-3d{opacity:.45 !important;}
  .main-wrap{padding:1rem .75rem 3rem;}
  #hero{min-height:150px;border-radius:1.5rem;}
  #hero-title{font-size:clamp(1.5rem,7vw,2.4rem)!important;}
  #hero-sub{font-size:.76rem;}
  .glass,.glass-strong{border-radius:1.1rem;}
  .tab-button{font-size:.76rem;padding:.45rem .85rem;border-radius:.7rem;}
  table{font-size:.78rem;}
  thead th{padding:.5rem .55rem;font-size:.65rem;}
  tbody td{padding:.4rem .55rem;}
  .subject-card,.skill-card{padding:1.1rem!important;border-radius:1.2rem!important;}
  .subject-card .text-5xl{font-size:2rem!important;margin-bottom:.5rem!important;}
  .back-btn,.reset-btn{font-size:.76rem;padding:.42rem .85rem;}
  .grid{gap:.7rem!important;}
  .notice-text{font-size:.76rem;}
}
@media(max-width:380px){
  #hero-title{font-size:1.4rem!important;}
  .tab-button{font-size:.68rem;padding:.38rem .7rem;}
}
/* Respect user's reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  #bg-3d{display:none;}
}



    /* ── Social Cards ── */
    .scard-shine{
      position:absolute;inset:0;
      background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.06) 50%,transparent 80%);
      transform:translateX(-100%);
      transition:transform .55s ease;
      pointer-events:none;
      border-radius:1.4rem;
    }
    .scard:hover .scard-shine{ transform:translateX(100%); }
    .scard:hover{
      transform:perspective(800px) rotateX(-4deg) translateY(-6px) scale(1.03) !important;
    }
    .scard:hover > div:first-of-type{
      box-shadow:0 0 36px rgba(var(--sc),0.65) !important;
    }
    @media(max-width:640px){
      #social-cards{ grid-template-columns:repeat(2,1fr); gap:.85rem; }
      .scard{ padding:1.25rem .85rem 1.1rem; }
    }
    


/* Countdown done flash animation */
@keyframes cdDone{from{transform:scale(1);opacity:1;}to{transform:scale(1.1);opacity:.7;}}
/* Countdown widget nth-child fix */
#hw-countdown.hw:nth-child(4){animation-delay:.32s;}
/* Input number arrows hide */
#cd-min::-webkit-inner-spin-button,#cd-min::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#cd-min{-moz-appearance:textfield;}
/* SEO footer hidden */
#seo-footer{display:none;}