/* ═══════════════════════ RESET + TOKENS ═══════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg0:#FFFDF9;--bg1:#FFF8F1;--bg2:#FFFEFA;
  --ink:#1A0F00;--ink2:#5A3F20;--ink3:#AA8060;--ink4:rgba(180,140,100,.5);
  --glass:rgba(255,255,255,.84);--glass2:rgba(255,255,255,.97);
  --border:rgba(255,255,255,.92);--border2:rgba(255,122,0,.14);
  --sf:#FF7A00;--sf2:#FF9A33;--sfg:rgba(255,122,0,.4);
  --sfbg:rgba(255,122,0,.07);--sfbg2:rgba(255,122,0,.13);
  --sh:0 24px 80px rgba(255,100,0,.12),0 8px 24px rgba(0,0,0,.06);
  --shsm:0 12px 40px rgba(255,100,0,.08),0 2px 8px rgba(0,0,0,.04);
  --sp:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.4,0,.2,1);
  --mp:20px;--mr:20px;--mh:52px;--mg:16px;
}
.dark{
  --bg0:#0F0A00;--bg1:#150D00;--bg2:#0A0800;
  --ink:#FFE8CC;--ink2:#CC9960;--ink3:#886644;--ink4:rgba(180,120,60,.4);
  --glass:rgba(20,12,0,.88);--glass2:rgba(18,11,0,.97);
  --border:rgba(60,35,0,.8);--border2:rgba(255,122,0,.2);
  --sfbg:rgba(255,122,0,.1);--sfbg2:rgba(255,122,0,.18);
  --sh:0 24px 80px rgba(255,80,0,.22),0 8px 24px rgba(0,0,0,.45);
  --shsm:0 12px 40px rgba(255,80,0,.13),0 2px 8px rgba(0,0,0,.35);
}

html,body{height:100%;overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',sans-serif;background:var(--bg0);color:var(--ink);transition:background .35s,color .35s;cursor:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:none}
*{cursor:none!important;-webkit-tap-highlight-color:rgba(255,122,0,.12)}
@media(pointer:coarse){body,*{cursor:auto!important}#cur{display:none!important}}

/* ═══════════════════════ ANIMATIONS ═══════════════════════ */
@keyframes orb{0%,100%{transform:translate(0,0)scale(1)}33%{transform:translate(3%,-2%)scale(1.05)}66%{transform:translate(-2%,2%)scale(.97)}}
@keyframes fy{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes rup{from{opacity:0;transform:translateY(28px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}
@keyframes rdn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes halo{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popin{0%{opacity:0;transform:scale(.8)translateY(18px)}65%{transform:scale(1.04)translateY(-2px);opacity:1}100%{transform:scale(1)translateY(0);opacity:1}}
@keyframes bpop{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes streak{from{transform:scaleX(0)translateX(-50%)}to{transform:scaleX(1)translateX(-50%)}}
@keyframes chin{from{opacity:0;transform:translateY(7px)scale(.88)}to{opacity:1;transform:translateY(0)scale(1)}}
@keyframes slin{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,60,60,.5)}50%{box-shadow:0 0 0 10px rgba(255,60,60,0)}}
@keyframes portal-scale{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes kpSlideIn{from{opacity:0;transform:translateY(24px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}
@keyframes kpSlideOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(16px)}}
@keyframes btn-pulse{0%{box-shadow:0 0 0 0 rgba(255,122,0,.7),0 14px 44px rgba(255,100,0,.4)}70%{box-shadow:0 0 0 18px rgba(255,122,0,0),0 14px 44px rgba(255,100,0,.2)}100%{box-shadow:0 0 0 0 rgba(255,122,0,0),0 14px 44px rgba(255,100,0,.4)}}
@keyframes btn-ripple{from{transform:scale(0);opacity:.6}to{transform:scale(3.5);opacity:0}}

/* ═══════════════════════ CURSOR ═══════════════════════ */
#cur{position:fixed;top:0;left:0;pointer-events:none;z-index:99999}
.cur-dot{width:8px;height:8px;border-radius:50%;background:var(--sf);position:absolute;transform:translate(-50%,-50%);transition:width .18s,height .18s;box-shadow:0 0 14px var(--sfg)}
.cur-ring{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,122,0,.45);position:absolute;transform:translate(-50%,-50%);transition:width .32s var(--sp),height .32s var(--sp)}
body.chov .cur-dot{width:14px;height:14px}
body.chov .cur-ring{width:52px;height:52px}
body.cclk .cur-dot{width:5px;height:5px}
body.cclk .cur-ring{width:20px;height:20px}

/* ═══════════════════════ PARTICLES ═══════════════════════ */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ═══════════════════════ PORTAL ═══════════════════════ */
#portal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(255,248,240,.96);backdrop-filter:blur(2px)}
#portal.active{display:flex;animation:fade-in .2s ease}
#portal canvas{position:absolute;inset:0;width:100%;height:100%}
#portal-text{position:relative;z-index:2;text-align:center}
#portal-text h2{font-family:'Syne',sans-serif;font-size:clamp(48px,10vw,88px);font-weight:800;letter-spacing:-.05em;background:linear-gradient(148deg,#FF5600,#FF8200 35%,#FFAC44 62%,#FF7000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 4px 32px rgba(255,100,0,.3))}
#portal-text p{margin-top:10px;font-size:13px;font-weight:300;color:rgba(255,100,0,.65);letter-spacing:.18em;text-transform:uppercase}

/* ═══════════════════════ LAYOUT ═══════════════════════ */
.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 22px 140px;position:relative}
.page.hidden{display:none}
.orb1,.orb2{position:fixed;border-radius:50%;pointer-events:none;z-index:0}
.orb1{top:-12%;right:-5vw;width:55vw;height:55vw;max-width:min(720px,75vw);background:radial-gradient(circle,rgba(255,122,0,.07),transparent 65%);animation:orb 11s ease-in-out infinite}
.orb2{bottom:-14%;left:-5vw;width:48vw;height:48vw;max-width:min(640px,70vw);background:radial-gradient(circle,rgba(255,150,50,.05),transparent 65%);animation:orb 14s ease-in-out infinite reverse}
.dot-grid{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,122,0,.22) 1px,transparent 1px);background-size:44px 44px;opacity:.18;transition:opacity .35s}
.dark .dot-grid{opacity:.28}

/* ═══════════════════════ TOP BAR ═══════════════════════ */
.topbar{width:100%;max-width:960px;display:flex;justify-content:space-between;align-items:center;padding:20px 0;position:relative;z-index:10;animation:rdn .7s ease}
.topbar-brand{display:flex;align-items:center;gap:8px}
.brand-dot{width:6px;height:6px;border-radius:50%;background:var(--sf);box-shadow:0 0 8px var(--sfg);animation:halo 2.5s ease-in-out infinite}
.brand-label{font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--ink3);text-transform:uppercase}
.topbar-right{display:flex;align-items:center;gap:8px}

/* ═══════════════════════ COUNTER ═══════════════════════ */
.counter{display:flex;align-items:center;gap:8px;background:var(--sfbg);border:1px solid rgba(255,122,0,.2);border-radius:50px;padding:6px 13px;transition:animation .4s}
.counter.anim{animation:bpop .4s ease}
.counter.empty{background:rgba(200,40,0,.07);border-color:rgba(200,40,0,.22)}
.counter-dots{display:flex;gap:3px}
.cdot{width:6px;height:6px;border-radius:50%;background:rgba(180,140,80,.22);transition:background .4s,box-shadow .4s}
.cdot.on{background:var(--sf);box-shadow:0 0 6px var(--sfg)}
.cdot.low{background:#FF4400;box-shadow:0 0 6px rgba(255,60,0,.5)}
.counter-label{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink3);white-space:nowrap}
.counter.empty .counter-label{color:#CC3000}
.mbadge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:linear-gradient(135deg,rgba(255,170,0,.15),rgba(255,100,0,.08));border:1px solid rgba(255,150,0,.25);border-radius:50px;font-size:9.5px;font-weight:700;color:#CC6600;letter-spacing:.06em}

/* ═══════════════════════ ICON BUTTONS ═══════════════════════ */
.bico{width:33px;height:33px;border-radius:50%;border:1.5px solid var(--border2);background:var(--sfbg);display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .2s,transform .2s;flex-shrink:0}
.bico:hover{background:var(--sfbg2);transform:scale(1.09)}
.bico.mic-on{animation:mic-pulse 1s ease-in-out infinite;background:rgba(255,60,60,.1)!important;border-color:rgba(255,60,60,.4)!important}

/* ═══════════════════════ AVATAR ═══════════════════════ */
.avatar-wrap{position:relative}
.avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,122,0,.3);background:#FF9A33;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--glass2);border:1.5px solid var(--border2);border-radius:18px;padding:16px;min-width:min(220px,80vw);max-width:calc(100vw - 32px);box-shadow:var(--sh);z-index:500;display:none;animation:popin .22s var(--sp)}
.avatar-menu.open{display:block}
.avatar-email{font-size:11px;color:var(--ink3);margin-bottom:4px}
.avatar-name{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:14px;word-break:break-all}

/* ═══════════════════════ BUTTONS ═══════════════════════ */
.bsf{background:linear-gradient(135deg,#FF6800,#FF8C00 55%,#FFAA33);border:none;font-family:'DM Sans',sans-serif;font-weight:700;color:#fff;letter-spacing:.025em;position:relative;overflow:hidden;transition:transform .28s var(--sp),box-shadow .28s}
.bsf.firing{animation:btn-pulse .6s ease-out}
.btn-ripple{position:absolute;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.35);pointer-events:none;transform:scale(0);animation:btn-ripple .55s ease-out forwards}
.bsf::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.bsf:hover:not(:disabled){transform:translateY(-2px)scale(1.02);box-shadow:0 14px 44px rgba(255,100,0,.4)}
.bsf:active:not(:disabled){transform:scale(.97)}
.bsf:disabled{opacity:.55}
.bout{background:var(--sfbg);border:1.5px solid rgba(255,122,0,.22);color:var(--sf);font-family:'DM Sans',sans-serif;font-weight:600;transition:background .2s,border-color .2s}
.bout:hover{background:var(--sfbg2);border-color:rgba(255,122,0,.42)}
.bg{background:var(--glass2);border:1.5px solid var(--border2);color:var(--ink);font-family:'DM Sans',sans-serif;font-weight:600;display:flex;align-items:center;justify-content:center;gap:9px;transition:box-shadow .2s,transform .18s}
.bg:hover{box-shadow:0 2px 18px rgba(0,0,0,.12);transform:translateY(-1px)}

/* ═══════════════════════ HERO ═══════════════════════ */
.hero{position:relative;z-index:10;margin-top:26px;margin-bottom:42px;text-align:center;padding:0 8px;width:100%}
.hero-halo1,.hero-halo2{position:absolute;top:50%;left:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-54%)}
.hero-halo1{width:240px;height:240px;background:radial-gradient(circle,rgba(255,122,0,.11),transparent 68%);animation:halo 3.5s ease-in-out infinite}
.hero-halo2{width:340px;height:340px;border:1px solid rgba(255,122,0,.07);animation:halo 4.5s ease-in-out infinite .6s}
.hero-title{font-family:'Syne',sans-serif;font-size:clamp(52px,10vw,108px);font-weight:800;letter-spacing:-.04em;line-height:1.05;background:linear-gradient(148deg,#FF5600,#FF8200 35%,#FFAC44 62%,#FF7000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 6px 44px rgba(255,100,0,.18));position:relative;z-index:1;animation:rup .9s var(--sp) both;display:block;width:100%;text-align:center}
.hero-sub{margin-top:12px;font-size:clamp(10px,1.6vw,13px);font-weight:300;color:var(--ink3);letter-spacing:.22em;text-transform:uppercase;animation:rup .9s ease .14s both}
.hero-welcome{margin-top:8px;font-size:12px;color:rgba(180,120,60,.7);animation:rup .5s ease .3s both}
.hero-welcome strong{color:var(--sf)}
.hero-line{height:1px;width:148px;margin:13px auto 0;background:linear-gradient(90deg,transparent,rgba(255,122,0,.28),transparent);animation:rup .9s ease .24s both}

/* ═══════════════════════ SEARCH BAR ═══════════════════════ */
.sb-outer{width:100%;max-width:700px;position:relative;z-index:10;animation:rup .8s ease .2s both}
.sb-wrap{background:var(--glass);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:2px solid var(--border);border-radius:100px;padding:9px 9px 9px 22px;display:flex;align-items:center;gap:9px;transition:border-color .3s,box-shadow .4s;box-shadow:var(--sh)}
.sb-wrap.focused{border-color:rgba(255,122,0,.55);box-shadow:0 0 0 5px rgba(255,122,0,.08),var(--sh)}
.sb-prefix{display:none;align-items:center;gap:4px;padding-right:9px;border-right:1.5px solid transparent;margin-right:3px;flex-shrink:0}
.sb-prefix.visible{display:flex;animation:chin .18s ease}
.sb-prefix-name{font-size:11px;font-weight:700;letter-spacing:.03em}
.sb-input{border:none;background:transparent;outline:none;flex:1;font-family:'DM Sans',sans-serif;font-size:clamp(14px,2vw,17px);font-weight:400;color:var(--ink);min-width:0}
.sb-input::placeholder{color:var(--ink4);font-weight:300;transition:opacity .3s}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-ms-clear{display:none;-webkit-appearance:none;appearance:none}
.sb-input:disabled{opacity:.45}
.sb-clear{background:none;border:none;color:var(--ink3);font-size:19px;line-height:1;padding:0 2px;flex-shrink:0;display:none}
.sb-clear.visible{display:block}
.sb-btn{border-radius:50px;padding:11px 20px;font-size:13.5px;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:7px}
.mic-err{margin-top:8px;padding:9px 14px;background:rgba(200,40,0,.08);border:1.5px solid rgba(200,40,0,.2);border-radius:12px;font-size:12px;color:#CC3300;display:none;align-items:center;gap:8px;animation:chin .2s ease}
.mic-err.visible{display:flex}

/* ═══════════════════════ DROPDOWN ═══════════════════════ */
.drop{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--glass2);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1.5px solid var(--border2);border-radius:22px;box-shadow:0 24px 70px rgba(255,100,0,.12),0 4px 20px rgba(0,0,0,.1);overflow:hidden;z-index:300;display:none}
.drop.open{display:block;animation:rup .18s ease}
.drop-sec{padding:9px 16px 5px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.drop-divider{height:1px;background:var(--border2);margin:4px 0}
.drop-row{display:flex;align-items:center;gap:11px;padding:10px 16px;transition:background .12s;cursor:pointer}
.drop-row:hover{background:var(--sfbg)}
.drop-row-label{flex:1;font-size:13.5px;color:var(--ink)}
.drop-row-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.drop-chips{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px 14px}
.drop-compare{margin:0 16px 12px;display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(90deg,rgba(255,152,0,.1),rgba(41,182,246,.1));border:1.5px solid rgba(255,152,0,.22);border-radius:12px;font-size:12px;font-weight:700;color:#886600;width:calc(100% - 32px);font-family:'DM Sans',sans-serif}
.drop-trending{padding:0 16px 14px;display:flex;flex-wrap:wrap;gap:7px}
.trend-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;background:rgba(255,60,60,.08);border:1px solid rgba(255,60,60,.2);border-radius:50px;font-size:9px;font-weight:700;color:#CC3300}

/* ═══════════════════════ CHIPS ═══════════════════════ */
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:50px;border:1.5px solid;font-size:11.5px;font-weight:600;background:none;transition:transform .2s var(--sp);animation:chin .22s ease both;white-space:nowrap;font-family:'DM Sans',sans-serif;cursor:pointer}
.chip:hover{transform:translateY(-2px)scale(1.05)}
.chip.exact{box-shadow:0 4px 16px var(--sfg)}
.chip.low{opacity:.7}
.chip.medium{opacity:.85}

/* ═══════════════════════ HINT ROW ═══════════════════════ */
.hint-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding-left:4px}
.hint-text{font-size:11px;color:var(--ink4);letter-spacing:.04em}
.hint-kbd{font-size:10px;background:var(--sfbg);padding:1px 5px;border-radius:5px;color:var(--ink3);border:1px solid var(--border2)}
.shorthand-wrap{position:relative;display:inline-block}
.shorthand-trigger{font-size:11px;color:var(--ink4);border-bottom:1px dashed rgba(255,122,0,.3);padding-bottom:1px}
.shorthand-tooltip{position:absolute;bottom:calc(100% + 8px);right:0;background:rgba(20,10,0,.94);backdrop-filter:blur(16px);border-radius:16px;padding:14px 18px;min-width:min(200px,80vw);box-shadow:0 12px 40px rgba(0,0,0,.3);z-index:400;display:none;animation:popin .2s var(--sp)}
.shorthand-wrap:hover .shorthand-tooltip{display:block}
.sh-item{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.sh-item:last-child{margin-bottom:0}
.sh-code{font-size:11.5px;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:7px;font-weight:700;font-family:monospace}
.sh-label{font-size:12.5px;color:rgba(255,240,220,.75)}
.sh-tip{margin-top:10px;padding:8px 10px;background:rgba(255,122,0,.1);border-radius:10px;font-size:11px;color:rgba(255,200,100,.7);line-height:1.55}
.cmp-bar{display:none}

/* ═══════════════════════ PLATFORM CARDS ═══════════════════════ */
.platforms-section{margin-top:36px;position:relative;z-index:10;text-align:center;width:100%;max-width:760px;transition:opacity .22s ease,transform .22s ease,max-height .3s ease;max-height:400px;opacity:1}
.platforms-section.typing{opacity:0;transform:translateY(-8px);max-height:0;overflow:hidden;pointer-events:none;margin-top:0}
.platforms-label{font-size:9.5px;font-weight:700;letter-spacing:.18em;color:var(--ink4);text-transform:uppercase;margin-bottom:18px;animation:rup .8s ease .42s both}
.pcarousel-outer{position:relative;width:100%;overflow:hidden}
/* Fade masks — left and right edges blend cards in/out */
.pcarousel-outer::before,
.pcarousel-outer::after{content:"";position:absolute;top:0;bottom:0;width:96px;z-index:2;pointer-events:none}
.pcarousel-outer::before{left:0;background:linear-gradient(to right,var(--bg0) 0%,transparent 100%)}
.pcarousel-outer::after{right:0;background:linear-gradient(to left,var(--bg0) 0%,transparent 100%)}
/* The scrolling track — two sets side-by-side, translated by JS */
.pcarousel-track{display:flex;gap:0;will-change:transform;width:max-content}
.pcarousel-set{display:flex;gap:12px;padding:4px 6px 10px}
.pcard{display:flex;flex-direction:column;align-items:center;gap:10px;border-radius:22px;padding:20px 16px 16px;background:var(--glass);backdrop-filter:blur(20px);border:1.5px solid var(--border);box-shadow:var(--shsm);transition:transform .4s var(--sp),box-shadow .4s,border-color .3s;min-width:84px;flex-shrink:0;position:relative;cursor:pointer}
.pcard:hover{transform:translateY(-6px)}
.picon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .35s var(--sp),background .3s}
.pcard:hover .picon{transform:scale(1.18) rotate(-6deg)}
.pname{font-size:11.5px;font-weight:600;color:var(--ink2);letter-spacing:.02em}
.pstreak{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:36%;height:2px;border-radius:2px;display:none;animation:streak .28s ease}
.pcard:hover .pstreak{display:block}

/* ═══════════════════════ SAVED PILLS ═══════════════════════ */
.saved-section{margin-top:40px;width:100%;max-width:700px;position:relative;z-index:10;animation:rup .8s ease .6s both;transition:opacity .22s ease,transform .22s ease,max-height .3s ease;max-height:200px}
.saved-section.typing{opacity:0;transform:translateY(-8px);max-height:0;overflow:hidden;pointer-events:none;margin-top:0}
.saved-label{font-size:9.5px;font-weight:700;letter-spacing:.18em;color:var(--ink4);text-transform:uppercase;margin-bottom:12px}
.saved-pills{display:flex;gap:8px;flex-wrap:wrap}
.svpill{display:flex;align-items:center;gap:7px;padding:7px 12px;background:var(--sfbg);border:1.5px solid var(--border2);border-radius:14px;transition:background .2s,border-color .2s;font-family:'DM Sans',sans-serif;cursor:pointer}
.svpill:hover{background:var(--sfbg2);border-color:rgba(255,122,0,.32)}
.svpill-name{font-size:12.5px;font-weight:600;color:var(--ink)}
.svpill-plat{font-size:10px}
.sv-manage{background:none;border:1.5px dashed var(--border2);border-radius:14px;padding:7px 12px;font-size:12px;color:var(--ink3);font-family:'DM Sans',sans-serif;cursor:pointer}

/* ═══════════════════════ SIGN-IN CTA ═══════════════════════ */
.signin-cta{margin-top:40px;background:var(--glass);backdrop-filter:blur(20px);border:1.5px solid var(--border2);border-radius:20px;padding:18px 24px;max-width:360px;text-align:center;position:relative;z-index:10;animation:rup .8s ease .7s both}
.signin-cta p{font-size:13px;color:var(--ink3);margin-bottom:12px;line-height:1.6}
.signin-btn{width:100%;padding:12px 0;border-radius:12px;font-size:13px}

/* ═══════════════════════ FOOTER ═══════════════════════ */
footer{margin-top:auto;padding-top:80px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:10;position:relative}
.footer-line{height:1px;width:120px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.18),transparent)}
footer p{font-size:10px;color:var(--ink4);letter-spacing:.08em}

/* ═══════════════════════ MOBILE SEARCH BAR ═══════════════════════ */
.mobi-bar{position:fixed;bottom:0;left:0;right:0;background:var(--glass2);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-top:1px solid var(--border2);z-index:100;display:none}

/* ═══════════════════════ OVERLAYS ═══════════════════════ */
.overlay{position:fixed;inset:0;z-index:4000;background:rgba(10,5,0,.5);backdrop-filter:blur(16px);display:none;align-items:flex-start;justify-content:center;padding-top:60px;animation:rdn .2s ease}
.overlay.open{display:flex}
.panel-box{background:var(--glass2);border:1.5px solid var(--border2);border-radius:24px;width:90%;max-width:580px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 32px 100px rgba(0,0,0,.22);animation:popin .3s var(--sp)}
.panel-head{padding:18px 20px 14px;border-bottom:1px solid var(--border2);flex-shrink:0}
.panel-head h3{font-size:17px;font-weight:700;color:var(--ink);font-family:'Syne',sans-serif;margin-bottom:4px}
.panel-head p{font-size:11px;color:var(--ink3)}
.panel-close{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border2);background:var(--sfbg);display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:14px;flex-shrink:0;cursor:pointer}
.panel-body{overflow-y:auto;flex:1}
.panel-body::-webkit-scrollbar{width:5px}
.panel-body::-webkit-scrollbar-thumb{background:rgba(255,122,0,.2);border-radius:10px}

/* ═══════════════════════ TABS ═══════════════════════ */
.tabs{display:flex;background:var(--sfbg);border-radius:10px;padding:3px;gap:3px}
.tab-btn{flex:1;padding:7px 0;border-radius:8px;background:transparent;border:none;font-size:12px;font-weight:500;color:var(--ink3);font-family:'DM Sans',sans-serif;transition:all .2s;cursor:pointer}
.tab-btn.active{background:var(--glass2);font-weight:700;color:var(--sf);box-shadow:var(--shsm)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ═══════════════════════ PALETTE ═══════════════════════ */
.palette-input-row{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border2)}
.palette-input{flex:1;border:none;background:transparent;outline:none;font-size:15px;color:var(--ink);font-family:'DM Sans',sans-serif}
.palette-action{display:flex;align-items:center;gap:12px;padding:10px 16px;transition:background .12s;animation:slin .14s ease both;cursor:pointer}
.palette-action:hover{background:var(--sfbg)}
.palette-icon{font-size:18px;width:28px;text-align:center}
.palette-action-label{flex:1;font-size:14px;color:var(--ink)}
.palette-enter{font-size:11px;color:var(--ink3);background:var(--sfbg);padding:2px 8px;border-radius:8px}

/* ═══════════════════════ MEMBERSHIP POPUP ═══════════════════════ */
#mem-popup{position:fixed;inset:0;z-index:5000;background:rgba(10,5,0,.55);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center}
#mem-popup.open{display:flex}
.mem-box{background:var(--glass2);border-radius:28px;padding:48px 36px 40px;max-width:440px;width:90%;box-shadow:var(--sh);animation:popin .42s var(--sp);text-align:center;position:relative;border:1.5px solid var(--border2);max-height:92vh;overflow-y:auto}
.mem-gem{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#FF6800,#FF9A33);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 48px rgba(255,100,0,.4);font-size:24px;animation:halo 2.5s ease-in-out infinite}
.mem-tag{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--sf);margin-bottom:10px;text-transform:uppercase}
.mem-title{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:10px;font-family:'Syne',sans-serif}
.mem-sub{font-size:13.5px;color:var(--ink3);line-height:1.65;margin-bottom:18px}
.mem-features{background:var(--sfbg);border-radius:16px;padding:14px 18px;margin-bottom:18px;text-align:left}
.mem-feat{display:flex;align-items:flex-start;gap:9px;margin-bottom:9px;font-size:13px;color:var(--ink2);line-height:1.5}
.mem-feat:last-child{margin-bottom:0}
.mem-check{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--sf),var(--sf2));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;color:#fff;font-weight:800;margin-top:1px}
/* Back button inside popup */
.mem-back-btn{background:none;border:none;color:var(--ink3);font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:5px;font-family:'DM Sans',sans-serif;padding:0;cursor:pointer}
.mem-back-btn:hover{color:var(--sf)}
.mem-close-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--sfbg);border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink3);cursor:pointer;font-family:'DM Sans',sans-serif;line-height:1;transition:background .2s,color .2s}
.mem-close-x:hover{background:var(--sfbg2);color:var(--sf)}
/* Screenshot drop zone */
#ss-drop-zone{border:2px dashed rgba(255,122,0,.35);border-radius:16px;padding:28px 16px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:14px;background:var(--sfbg)}
#ss-drop-zone:hover{border-color:rgba(255,122,0,.6);background:var(--sfbg2)}
/* Upload message */
#upload-msg{display:none;margin-bottom:12px;font-size:12px;padding:9px 14px;border-radius:10px;line-height:1.5}

/* ═══════════════════════ AUTH PAGE ═══════════════════════ */
#auth-page{min-height:100vh;background:linear-gradient(165deg,var(--bg0),var(--bg1),var(--bg2));display:none;align-items:center;justify-content:center;padding:20px;position:fixed;inset:0;z-index:3000}
#auth-page.open{display:flex}
.auth-box{position:relative;z-index:10;width:100%;max-width:400px;background:var(--glass);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1.5px solid var(--border);border-radius:28px;padding:44px 36px;box-shadow:var(--sh);animation:popin .5s var(--sp)}
.auth-back{position:absolute;top:18px;left:18px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border2);background:var(--sfbg);display:flex;align-items:center;justify-content:center;color:var(--sf);font-size:14px;cursor:pointer}
.auth-logo{font-size:36px;font-weight:800;font-family:'Syne',sans-serif;letter-spacing:-.04em;background:linear-gradient(135deg,#FF6500,#FF9A33);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}
.auth-sub-logo{font-size:10px;letter-spacing:.15em;color:var(--ink3);margin-top:3px;text-align:center;margin-bottom:32px}
.auth-err{font-size:12px;color:#CC3300;text-align:center;margin-bottom:12px;line-height:1.5;padding:8px 12px;background:rgba(200,40,0,.06);border-radius:10px;display:none}
.auth-err.visible{display:block}
.auth-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);margin:4px 0 14px}
.auth-info{background:var(--sfbg);border-radius:12px;padding:12px 14px;font-size:12px;color:var(--ink2);line-height:1.6}
.auth-footer{text-align:center;font-size:10.5px;color:var(--ink3);margin-top:16px}

/* ═══════════════════════ TOUR ═══════════════════════ */
#tour{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:6000;max-width:340px;width:90%;background:rgba(20,10,0,.95);backdrop-filter:blur(20px);border-radius:18px;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.35);border:1.5px solid rgba(255,122,0,.25);display:none;animation:popin .3s var(--sp)}
#tour.show{display:block}
.tour-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.tour-title{font-size:15px;font-weight:700;color:#FFE8CC;font-family:'Syne',sans-serif}
.tour-step-label{font-size:11px;color:rgba(255,180,80,.5);margin-left:10px;flex-shrink:0}
.tour-body{font-size:13px;color:rgba(255,220,170,.7);line-height:1.6;margin-bottom:14px}
.tour-actions{display:flex;gap:8px}
.tour-next{flex:1;padding:9px 0;border-radius:12px;font-size:13px}
.tour-skip{padding:9px 14px;border-radius:12px;border:1.5px solid rgba(255,122,0,.25);background:none;color:rgba(255,180,80,.5);font-size:12px;font-family:'DM Sans',sans-serif;cursor:pointer}
.tour-dots{display:flex;gap:5px;justify-content:center;margin-top:10px}
.tdot{height:6px;border-radius:10px;background:rgba(255,122,0,.25);transition:width .3s var(--sp),background .3s}
.tdot.active{background:var(--sf);width:18px}
.tdot:not(.active){width:6px}

/* ═══════════════════════ KNOWLEDGE PAGE ═══════════════════════ */
.kp-card{background:var(--glass);backdrop-filter:blur(20px);border:1.5px solid var(--border);border-radius:20px;padding:20px 22px;cursor:pointer;transition:transform .3s var(--sp),box-shadow .3s,border-color .25s;position:relative;overflow:hidden;animation:rup .4s var(--sp) both}
.kp-card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.kp-card-icon{font-size:28px;margin-bottom:10px}
.kp-card-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px;font-family:'Syne',sans-serif}
.kp-card-desc{font-size:12px;color:var(--ink3);line-height:1.5;margin-bottom:14px}
.kp-card-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;border:none;color:#fff;font-family:'DM Sans',sans-serif;transition:transform .2s var(--sp),box-shadow .2s;cursor:pointer}
.kp-card-btn:hover{transform:scale(1.06);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.kp-glow{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;opacity:.06;pointer-events:none}

/* ═══════════════════════ CMD HINTS ═══════════════════════ */
.cmd-hints{position:absolute;top:calc(100% + 12px);left:0;right:0;background:var(--glass2);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1.5px solid rgba(255,122,0,.22);border-radius:20px;padding:8px;z-index:301;display:none;box-shadow:0 20px 60px rgba(255,100,0,.12)}
.cmd-hints.open{display:block;animation:rup .2s ease}
.cmd-hint-item{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:12px;cursor:pointer;transition:background .12s}
.cmd-hint-item:hover{background:var(--sfbg)}

/* ═══════════════════════ SEARCH INSIGHT ═══════════════════════ */
#search-insight{display:none;margin-top:10px;padding:8px 16px;background:linear-gradient(90deg,rgba(255,122,0,.06),rgba(255,150,50,.04));border:1px solid rgba(255,122,0,.14);border-radius:12px;font-size:12px;color:var(--ink2);align-items:center;gap:8px;animation:chin .2s ease}

/* ═══════════════════════ SCROLL INDICATORS ═══════════════════════ */
.scroll-indicator{position:fixed;left:50%;transform:translateX(-50%);z-index:200;display:none}
.scroll-indicator button{background:var(--glass2);border:1.5px solid var(--border2);border-radius:50px;padding:7px 18px;font-size:12px;font-weight:600;color:var(--ink2);box-shadow:var(--shsm);font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:6px;transition:transform .2s;cursor:pointer}
.scroll-indicator button:hover{transform:scale(1.05)}

/* ═══════════════════════ MISC INPUT ═══════════════════════ */
.ainput{width:100%;padding:13px 17px;background:var(--sfbg);border:1.5px solid var(--border2);border-radius:14px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s}
.ainput:focus{border-color:rgba(255,122,0,.6);box-shadow:0 0 0 4px rgba(255,122,0,.08)}
.ainput::placeholder{color:var(--ink4)}
.sep{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent)}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — 768 → 320
═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .page{padding:0 20px 140px}
  .topbar{max-width:100%;padding:14px 0}
  .hero{margin-top:20px;margin-bottom:32px}
  .platforms-section{margin-top:36px}
  .saved-section{margin-top:28px}
  .signin-cta{max-width:100%}
  .panel-box,.mem-box,.auth-box{max-width:calc(100vw - 32px);overflow-x:hidden}
  .avatar-menu{min-width:min(220px,80vw);max-width:calc(100vw - 32px)}
}

@media(max-width:640px){
  .mobi-bar{display:none!important}
  .sb-outer{display:block!important}
  .hint-row{display:none}
  #scroll-up-btn,#scroll-dn-btn{display:none!important}
  .page{padding:0 16px 96px;overflow-x:hidden;align-items:center}
  .topbar{padding:12px 0;width:100%}
  .topbar-right{gap:4px}
  .bico{width:38px;height:38px;border-radius:11px;font-size:13px}
  #expiry-label{display:none!important}
  .brand-label{display:none}
  .hero{margin-top:14px;margin-bottom:22px;width:100%;text-align:center;padding:0}
  .hero-title{font-size:clamp(44px,13vw,72px);letter-spacing:-.04em;display:block;width:100%}
  .hero-sub{font-size:10px;letter-spacing:.15em;margin-top:6px}
  .hero-halo1{width:160px;height:160px}
  .hero-halo2{width:240px;height:240px}
  .sb-outer{width:100%;max-width:100%;margin:0;padding:0;animation:none}
  .sb-wrap{height:52px;border-radius:16px;padding:0 10px 0 16px;gap:8px;border-width:1.5px}
  .sb-input{font-size:16px}
  .sb-btn{height:38px;padding:0 16px;font-size:13px;border-radius:12px;flex-shrink:0}
  #search-insight{margin-top:8px;padding:9px 14px;font-size:12px;border-radius:13px}
  .drop{border-radius:18px;max-height:55vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .drop-row{padding:12px 16px;min-height:48px}
  .drop-row-label{font-size:14px}
  .chip{padding:8px 14px;font-size:12px;min-height:38px;border-radius:12px;max-width:calc(50vw - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmd-hints{border-radius:18px;max-height:55vh;overflow-y:auto}
  .cmd-hint-item{padding:12px 16px;min-height:50px}
  .platforms-section{margin-top:28px;width:100%;text-align:left}
  .platforms-label{padding-left:2px;margin-bottom:12px}
  .pcarousel-outer::before,.pcarousel-outer::after{width:56px}
  .pcarousel-set{gap:10px;padding:4px 2px 12px}
  .pcard{min-width:88px;padding:16px 11px 13px;border-radius:18px;flex-shrink:0}
  .picon{width:42px;height:42px;font-size:20px}
  .pname{font-size:11px}
  .saved-section{margin-top:24px;width:100%}
  .saved-pills{gap:8px}
  .svpill{padding:10px 13px;min-height:44px;border-radius:15px}
  .svpill-name{font-size:13px}
  .sv-manage{min-height:44px;padding:10px 13px}
  /* MOBILE OVERLAP FIX: previous searches never collide with cards */
  .platforms-section.typing{display:none!important;margin:0!important}
  .saved-section.typing{display:none!important;margin:0!important}
  .signin-cta{margin-top:22px;max-width:100%;width:100%;padding:20px 18px;border-radius:22px}
  .signin-cta p{font-size:13.5px;line-height:1.65;margin-bottom:13px}
  .signin-btn{width:100%;padding:13px 0;font-size:14px;border-radius:15px;min-height:50px}
  footer{padding-top:40px}
  footer p{font-size:10.5px}
  .overlay{padding-top:0;align-items:flex-end;justify-content:stretch}
  .panel-box{width:100%;max-width:100%;border-radius:26px 26px 0 0;max-height:90vh;margin:0;overflow-x:hidden}
  .panel-head{padding:18px 18px 14px}
  #tour{bottom:20px;left:16px;right:16px;width:auto;max-width:none;transform:none;border-radius:22px;padding:18px}
  #mem-popup{align-items:flex-end}
  .mem-box{border-radius:28px 28px 0 0;max-width:100%;width:100%;padding:44px 20px 36px}
  #auth-page{padding:16px;align-items:flex-end}
  .auth-box{width:100%;margin-bottom:0;border-radius:26px 26px 0 0;padding:34px 20px 42px;overflow-x:hidden}
  #knowledge-page>div{padding:18px 16px 120px}
  #kp-back{width:44px;height:44px;font-size:18px}
  #kp-query-title{font-size:20px}
  #kp-cards{grid-template-columns:1fr 1fr!important;gap:10px}
  .kp-card{padding:15px 13px;border-radius:17px}
  .kp-card-btn{width:100%;justify-content:center;padding:10px 8px;font-size:12px;border-radius:13px;min-height:42px}
}

@media(max-width:414px){
  .page{padding:0 14px 80px}
  .hero-title{font-size:clamp(40px,12vw,60px)}
  .pcard{min-width:82px;padding:15px 10px 12px}
  .picon{width:38px;height:38px;font-size:19px}
  .signin-cta{padding:18px 15px}
  #kp-cards{grid-template-columns:1fr 1fr!important}
}

@media(max-width:375px){
  .page{padding:0 13px 80px}
  .hero-title{font-size:clamp(38px,11.5vw,56px)}
  .bico{width:35px;height:35px}
  .topbar-right{gap:3px}
  .counter{padding:5px 9px}
  #kp-cards{grid-template-columns:1fr!important}
}

@media(max-width:320px){
  .page{padding:0 12px 60px}
  .hero-title{font-size:36px;letter-spacing:-.03em}
  .hero-sub,.hero-line{display:none}
  .bico{width:32px;height:32px}
  .pcard{min-width:74px}
}

@media(pointer:coarse){
  .pcard:hover,.kp-card:hover,.bsf:hover,.kp-card-btn:hover{transform:none!important;box-shadow:inherit!important}
  .pcard:active{transform:scale(.96)!important;transition:transform .1s}
  .kp-card:active{transform:scale(.97)!important;transition:transform .1s}
  .bsf:active{transform:scale(.95)!important;opacity:.9}
  .bout:active{background:var(--sfbg2)}
  .svpill:active{background:var(--sfbg2)}
  .chip:active{transform:scale(.95)}
  .bg:active{transform:scale(.97)}
  .drop-row:active{background:var(--sfbg)}
  .cmd-hint-item:active{background:var(--sfbg)}
  .bico{min-width:38px;min-height:38px}
  .bout,.sv-manage{min-height:44px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ═══════════════════════ SUPER SEARCH ADDITIONS ═══════════════════════ */

/* Panel entrance animation */
@keyframes kpPanelIn{from{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}

/* Wikidata fact chips */
.kp-fact-chip{background:var(--sfbg);border:1.5px solid var(--border2);border-radius:13px;padding:10px 13px;transition:border-color .2s,transform .18s}
.kp-fact-chip:hover{border-color:rgba(255,122,0,.35);transform:translateY(-2px)}
.kp-fact-label{font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase;margin-bottom:4px}
.kp-fact-value{font-size:13px;font-weight:600;color:var(--ink);word-break:break-word}

/* Open Library book cards */
.kp-book-card{flex-shrink:0;width:100px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:transform .2s}
.kp-book-card:hover{transform:translateY(-4px)}
.kp-book-cover{width:100px;height:140px;object-fit:cover;border-radius:10px;border:1.5px solid var(--border2)}
.kp-book-cover-fallback{display:flex!important;align-items:center;justify-content:center;font-size:28px;background:var(--sfbg)}
.kp-book-title{font-size:11px;font-weight:700;color:var(--ink);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kp-book-author{font-size:10px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kp-books-grid::-webkit-scrollbar{display:none}

/* Wikimedia Commons image grid */
.kp-commons-img{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;border:1.5px solid var(--border2);transition:transform .2s,box-shadow .2s}
.kp-commons-img:hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.kp-commons-img img{width:100%;height:100%;object-fit:cover}
.kp-commons-cap{position:absolute;bottom:0;left:0;right:0;padding:5px 7px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:9px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}

/* Drop wiki preview row */
.drop-wiki-row{display:flex;align-items:flex-start;gap:9px;padding:9px 15px 11px;animation:chin .2s var(--sp)}
.drop-wiki-row:hover{background:var(--sfbg)}

/* OVERLAP FIX: hide platform cards whenever search bar has focus or has text
   Applied at all screen widths (previously only mobile) */
.platforms-section.typing{
  opacity:0;
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  margin-top:0!important;
  transition:opacity .18s,max-height .22s;
}
.saved-section.typing{
  opacity:0;
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  margin-top:0!important;
  transition:opacity .18s,max-height .22s;
}
/* Keep them visible on desktop when not active */
.platforms-section{transition:opacity .22s,max-height .25s,margin .22s;max-height:600px}
.saved-section{transition:opacity .22s,max-height .25s,margin .22s;max-height:400px}

/* ═══════════════════════ SKELETON SHIMMER ═══════════════════════ */
@keyframes shimmer {
  0%   { background-position: -600px 0 }
  100% { background-position: 600px 0 }
}
.skel {
  background: linear-gradient(90deg, var(--sfbg) 25%, var(--sfbg2) 50%, var(--sfbg) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
  display: block;
}
.dark .skel {
  background: linear-gradient(90deg, rgba(255,122,0,.06) 25%, rgba(255,122,0,.14) 50%, rgba(255,122,0,.06) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* ═══════════════════════ SMART ANSWER PANEL ═══════════════════════ */
.sa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.sa-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--border2);
  background: var(--sfbg);
  transition: border-color .2s, background .2s, transform .2s;
  cursor: default;
}
.sa-item:hover {
  border-color: rgba(255,122,0,.32);
  background: var(--sfbg2);
  transform: translateX(3px);
}
.sa-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  flex-shrink: 0;
  background: var(--sfbg2);
  color: var(--ink3);
  border: 1.5px solid var(--border2);
}
.sa-item-body {
  flex: 1;
  min-width: 0;
}
.sa-item-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  font-family: 'DM Sans', sans-serif;
}
.sa-item-note {
  font-size: 11.5px;
  color: var(--ink3);
  line-height: 1.4;
}
.sa-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.sa-item-price {
  font-size: 11px;
  font-weight: 700;
  color: var(--sf);
  font-family: 'Syne', sans-serif;
}
.sa-item-links {
  display: flex;
  gap: 6px;
}
.sa-link {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 10px;
  text-decoration: none;
  border: 1.5px solid var(--border2);
  background: var(--sfbg);
  color: var(--ink2);
  transition: background .18s, border-color .18s, transform .15s;
  white-space: nowrap;
}
.sa-link:hover {
  background: var(--sfbg2);
  border-color: rgba(255,122,0,.35);
  transform: translateY(-1px);
}
.sa-link-az { border-color: rgba(255,153,0,.3); color: #FF9900; background: rgba(255,153,0,.07); }
.sa-link-fk { border-color: rgba(40,116,240,.28); color: #2874F0; background: rgba(40,116,240,.07); }
.sa-link-az:hover { background: rgba(255,153,0,.14); border-color: #FF9900; }
.sa-link-fk:hover { background: rgba(40,116,240,.14); border-color: #2874F0; }
.sa-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sf);
  text-decoration: none;
  padding: 8px 16px;
  border: 1.5px solid rgba(255,122,0,.25);
  border-radius: 20px;
  background: rgba(255,122,0,.06);
  transition: background .2s, transform .2s;
  cursor: pointer;
}
.sa-more-btn:hover { background: rgba(255,122,0,.13); transform: translateY(-2px); }

/* VS comparison card */
.sa-vs {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--border2);
}
.sa-vs-side {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--sfbg);
}
.sa-vs-center {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--ink3);
  background: var(--sfbg2);
  border-left: 1.5px solid var(--border2);
  border-right: 1.5px solid var(--border2);
  flex-shrink: 0;
}
.sa-vs-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  font-family: 'Syne', sans-serif;
}

/* ═══════════════════════ DIVYAM MICRO-ANIMATIONS ═══════════════════════ */

/* Search button — ink-burst effect on fire */
@keyframes inkBurst {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,0,.6), 0 14px 44px rgba(255,100,0,.4) }
  40%  { box-shadow: 0 0 0 14px rgba(255,122,0,.0), 0 14px 44px rgba(255,100,0,.25) }
  100% { box-shadow: 0 0 0 0 rgba(255,122,0,.0), 0 14px 44px rgba(255,100,0,.4) }
}
.bsf.firing { animation: inkBurst .55s ease-out; }

/* Knowledge page — panels slide in like paper unfolding */
@keyframes kpPanelIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Knowledge page back button hover pulse */
#kp-back:hover { background: var(--sfbg2) !important; transform: scale(1.08); }
#kp-back { transition: background .2s, transform .2s; }

/* Platform cards — glow trail on hover */
.kp-card { transition: border-color .22s, box-shadow .22s, transform .22s; }
.kp-card:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 12px 40px rgba(255,100,0,.18); }

/* Fact chips — stagger pop-in */
@keyframes factPop {
  from { opacity: 0; transform: scale(.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.kp-fact-chip { animation: factPop .28s var(--sp) both; }

/* Drop rows — slide in from left */
.drop-row { animation: slin .18s ease both; }

/* Platform cards on main page — float effect */
@keyframes cardFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* Individual pcard stagger already handled by animationDelay */

/* Search bar wrap — focused glow ring */
.sb-wrap.focused {
  box-shadow: 0 0 0 3px rgba(255,122,0,.15), var(--sh) !important;
}

/* Drop open — smoother entrance */
.drop.open { animation: rdn .18s ease; }

/* Chip hover */
.chip { transition: transform .15s ease, box-shadow .15s ease, background .15s; }
.chip:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 18px rgba(0,0,0,.1); }

/* kp-fact-chip hover already in previous CSS — ensure consistent */
.kp-fact-chip:hover { border-color: rgba(255,122,0,.35); transform: translateY(-2px); }

/* Commons image hover */
.kp-commons-img { transition: transform .22s ease, box-shadow .22s ease; }
.kp-commons-img:hover { transform: scale(1.04); box-shadow: 0 8px 24px rgba(0,0,0,.22); }

/* Book card hover */
.kp-book-card { transition: transform .2s ease; }
.kp-book-card:hover { transform: translateY(-5px); }

/* Smart answer item rank badge for #1 */
.sa-item:first-child .sa-rank {
  background: linear-gradient(135deg,#FF7A00,#FFAA33);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255,122,0,.4);
}

/* Mobile responsive for sa-item */
@media(max-width:580px) {
  .sa-item { flex-wrap: wrap; gap: 9px; }
  .sa-item-right { width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; }
  .sa-item-price { margin-right: auto; }
}

/* ═══════════════════════ CAROUSEL OVERRIDES ═══════════════════════ */
/* The platforms-section max-width must not clip the overflow — the
   outer carousel handles its own overflow:hidden */
.platforms-section { max-width: 100%; overflow: visible; }
/* On narrow viewports, shrink fade masks */
@media(max-width:480px){
  .pcarousel-outer::before,.pcarousel-outer::after{ width:40px; }
}
/* pcard hover — slightly lifted; no float animation, JS drives motion */
.pcard:hover { transform: translateY(-6px) scale(1.03); }