/* SetBio editor */
body.ed{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.ed .orb{opacity:.5}
.tab svg,.pvbar svg,.empty svg,.mini svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* splash */
#splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:#000;transition:opacity .6s ease,visibility .6s}
body:not(.loading) #splash{opacity:0;visibility:hidden}
.sp-in{text-align:center}
.sp-mk{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;position:relative;display:grid;place-items:center;font-size:38px;font-weight:900}
.sp-mk::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(#fff,#222 25%,#fff 50%,#222 75%,#fff);animation:spin 1.2s linear infinite;filter:drop-shadow(0 0 16px rgba(255,255,255,.6))}
.sp-mk::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000}
.sp-mk b{position:relative;z-index:1;text-shadow:0 0 16px #fff}
.sp-name{font-size:20px;font-weight:800;letter-spacing:.4em;text-indent:.4em;text-shadow:0 0 18px rgba(255,255,255,.6)}
.sp-bar{width:160px;height:2px;margin:18px auto 0;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
.sp-bar i{display:block;height:100%;width:40%;background:#fff;box-shadow:0 0 10px #fff;animation:spb 1s ease-in-out infinite}
@keyframes spb{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* top bar */
.ebar{position:relative;z-index:10;display:flex;align-items:center;gap:16px;padding:12px 18px;flex:none}
.urlchip{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:14px;margin:0 auto;min-width:0;max-width:520px}
.urlchip a{font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.urlchip a:hover{text-shadow:0 0 12px rgba(255,255,255,.6)}
.live{flex:none;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:live 2s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.ebar-r{display:flex;align-items:center;gap:10px}
.save{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);white-space:nowrap;min-width:110px;justify-content:flex-end}
.save i{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.5;transition:all .3s}
.save.edit i{opacity:1;background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.save.saving i{opacity:1;animation:blinkS .6s infinite alternate}
.save.ok i{opacity:1;box-shadow:0 0 10px #fff}
.save.err{color:#fff}
.save.err i{border-radius:2px;transform:rotate(45deg)}
@keyframes blinkS{to{opacity:.2}}

/* plan chip + Pro locks */
.planchip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:12.5px;font-weight:800;letter-spacing:.06em;padding:8px 12px;border-radius:12px;
  border:1px solid var(--line2);white-space:nowrap;transition:all .25s}
.planchip:hover{background:#fff;color:#000;box-shadow:0 0 24px rgba(255,255,255,.45)}
.planchip.pro{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.35)}
.planchip.pro:hover{box-shadow:0 0 30px rgba(255,255,255,.6)}
.planchip i{font-style:normal;font-weight:600;opacity:.7;letter-spacing:0}
.free [data-pro]{position:relative;cursor:pointer}
.free [data-pro]>*:not(.avbusy){opacity:.42}
.free [data-pro]::after{content:"PRO";position:absolute;top:6px;right:6px;z-index:3;font-size:9px;font-weight:900;letter-spacing:.12em;padding:3px 6px;border-radius:99px;
  background:#fff;color:#000;box-shadow:0 0 10px rgba(255,255,255,.5);pointer-events:none}
.free .tog[data-pro]::after{top:50%;transform:translateY(-50%);right:12px}
.free .pick[data-pro]::after{top:-7px;right:-4px}
.lk.over-limit{opacity:.45}
.lk .hid{grid-column:3/5;font-size:12px;color:#bbb}
.lk .hid::before{content:"◌ "}
.statlock{position:relative}
.statlock.locked .chart,.statlock.locked .lstats{filter:blur(5px);opacity:.5;pointer-events:none;user-select:none}
.lockcta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 24px;border-radius:20px;text-align:center;width:min(300px,90%);background:rgba(10,10,10,.85)}
.lockcta[hidden]{display:none}
.lockcta b{font-size:14.5px}
.subbox{border-color:rgba(255,255,255,.35)}
.subrow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.subrow b{font-size:24px;font-weight:900}
.subbox.pro{background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.03))}

/* layout */
.ewrap{position:relative;z-index:5;flex:1;min-height:0;display:grid;grid-template-columns:440px minmax(0,1fr);gap:16px;padding:0 16px 16px}
.panel{border-radius:24px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tabs{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:8px;border-bottom:1px solid var(--line);flex:none}
.tab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 8px;border:0;background:none;border-radius:12px;cursor:pointer;color:var(--mut);font-size:11px;font-weight:600;transition:color .25s,background .25s;position:relative;z-index:1}
.tab svg{width:19px;height:19px}
.tab:hover{color:#fff;background:rgba(255,255,255,.05)}
.tab.on{color:#000}
.tab-ink{position:absolute;z-index:0;top:8px;height:calc(100% - 16px);border-radius:12px;background:#fff;box-shadow:0 0 20px rgba(255,255,255,.45);transition:left .45s var(--ease),width .45s var(--ease)}
.panes{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.pane{display:none;padding:22px 22px 40px;flex-direction:column;gap:18px}
.pane.on{display:flex;animation:pin .45s var(--ease)}
@keyframes pin{from{opacity:0;transform:translateY(10px)}}
.pane h2{font-size:22px;font-weight:800}
.pane>h2+.desc{margin-top:-14px}
.desc{color:var(--mut2);font-size:13.5px;line-height:1.6}
.lbl{margin-top:6px}
.lbl+.seg,.lbl+.picks,.lbl+.upcard,.lbl+.chart,.lbl+.lstats{margin-top:-8px}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.phead .desc{margin-top:4px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stack{display:flex;flex-direction:column;gap:10px}
.tip{font-size:12.5px;color:var(--mut2);line-height:1.6}
.tip b{color:#ccc}

/* avatar */
.avrow{display:flex;gap:18px;align-items:center}
.avprev{position:relative;flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:40px;font-weight:900}
.avprev::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(#fff,#222 25%,#fff 50%,#222 75%,#fff);animation:spin 6s linear infinite;filter:drop-shadow(0 0 12px rgba(255,255,255,.4))}
.avprev::after{content:"";position:absolute;inset:0;border-radius:50%;background:#000}
.avprev img,.avprev b{position:relative;z-index:1}
.avprev img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.avprev b{text-shadow:0 0 16px #fff}
.avact{display:flex;flex-direction:column;gap:8px;min-width:0}
.drop.over{outline:2px dashed #fff;outline-offset:6px}
.avbusy{display:none}
.busy .avbusy{display:grid;place-items:center;position:absolute;inset:0;z-index:5;border-radius:inherit;background:rgba(0,0,0,.7)}
.busy .avbusy::after{content:"";width:26px;height:26px;border-radius:50%;border:2px solid #fff;border-right-color:transparent;animation:spin .7s linear infinite}

/* word chips */
.chips-in{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.45);transition:border-color .2s,box-shadow .2s}
.chips-in:focus-within{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.chips-in input{flex:1;min-width:130px;background:none;border:0;outline:none;padding:6px;font-size:14.5px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:99px;background:#fff;color:#000;font-size:13px;font-weight:600;animation:chipIn .3s var(--ease)}
.chip button{width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.1);color:#000;cursor:pointer;font-size:12px;line-height:1;display:grid;place-items:center}
.chip button:hover{background:#000;color:#fff}
@keyframes chipIn{from{transform:scale(.6);opacity:0}}

/* links */
.links{display:flex;flex-direction:column;gap:10px}
.lk{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 12px 12px 8px;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);transition:border-color .2s,background .2s,transform .25s var(--ease),opacity .2s;animation:pin .35s var(--ease)}
.lk:hover{border-color:var(--line2);background:rgba(255,255,255,.055)}
.lk.dragging{opacity:.35;transform:scale(.98)}
.lk.removing{animation:lkOut .3s ease forwards}
@keyframes lkOut{to{opacity:0;transform:translateX(-30px)}}
.handle{cursor:grab;color:#666;padding:6px 2px;font-size:16px;letter-spacing:-3px;user-select:none;touch-action:none;background:none;border:0}
.handle:hover{color:#fff}
.ibtn{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(0,0,0,.5);cursor:pointer;color:#fff;transition:all .2s}
.ibtn:hover{background:#fff;color:#000;box-shadow:0 0 18px rgba(255,255,255,.4)}
.ibtn svg{width:22px;height:22px}
.ibtn svg:not(.stroke){fill:currentColor;stroke:none}
.lkf{display:flex;flex-direction:column;gap:6px;min-width:0}
.lkf .inp{padding:8px 11px;font-size:14px;border-radius:10px}
.lkf .inp.u{font-size:13px;color:#ccc}
.lka{display:flex;flex-direction:column;gap:4px}
.mini{width:30px;height:30px;border-radius:9px;border:1px solid transparent;background:none;color:#777;cursor:pointer;display:grid;place-items:center;transition:all .2s;font-size:14px}
.mini svg{width:16px;height:16px}
.mini:hover{color:#fff;border-color:var(--line2);background:rgba(255,255,255,.06)}
.mini.on{color:#000;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.5)}
.lk .cnt{position:absolute;right:12px;top:-9px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:#000;border:1px solid var(--line2);color:#bbb}
.lk .warn{grid-column:3/5;font-size:12px;color:#bbb;margin-top:-2px}
.lk .warn::before{content:"⚠ "}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;border:1px dashed var(--line2);border-radius:18px;color:var(--mut)}
.empty svg{width:34px;height:34px}
.empty[hidden]{display:none}

/* icon popover */
.ipop{position:fixed;z-index:120;width:300px;padding:10px;border-radius:18px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;background:rgba(12,12,12,.96);animation:popIn .25s var(--ease)}
.ipop[hidden]{display:none}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.ichoice{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px 7px;border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;color:#ccc;font-size:10px}
.ichoice svg{width:22px;height:22px}
.ichoice svg:not(.stroke){fill:currentColor;stroke:none}
.ichoice:hover{background:rgba(255,255,255,.08);color:#fff}
.ichoice.on{background:#fff;color:#000}

/* picks */
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.btnpicks{grid-template-columns:repeat(3,1fr)}
.fontpicks{grid-template-columns:repeat(5,1fr)}
.pick{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 6px 10px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.4);cursor:pointer;color:var(--mut);transition:all .25s var(--ease)}
.pick b{font-size:12px;font-weight:600}
.pick:hover{border-color:var(--line2);color:#fff;transform:translateY(-2px)}
.pick.on{border-color:#fff;color:#fff;box-shadow:0 0 0 1px #fff,0 0 22px rgba(255,255,255,.3)}
.pv{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:10px;background:#000;overflow:hidden}
.pv-hole i{position:absolute;left:50%;top:50%;width:46%;height:18%;margin:-9% 0 0 -23%;border-radius:50%;border:2px solid #fff;box-shadow:0 0 12px #fff;animation:spin 4s linear infinite}
.pv-hole::after{content:"";position:absolute;left:50%;top:50%;width:16%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#000;box-shadow:0 0 0 2px #fff,0 0 14px #fff}
.pv-neb i{position:absolute;width:70%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 65%);filter:blur(6px);animation:neb 6s ease-in-out infinite}
.pv-neb i:nth-child(1){left:-10%;top:0}
.pv-neb i:nth-child(2){right:-15%;bottom:-15%;animation-delay:-3s}
@keyframes neb{50%{transform:translate(12%,8%) scale(1.15)}}
.pv-warp i{position:absolute;left:50%;top:50%;width:2px;height:30%;background:linear-gradient(transparent,#fff);transform-origin:50% 0;animation:warp 1.2s linear infinite}
.pv-warp i:nth-child(1){transform:rotate(30deg)}.pv-warp i:nth-child(2){transform:rotate(130deg);animation-delay:-.3s}
.pv-warp i:nth-child(3){transform:rotate(220deg);animation-delay:-.6s}.pv-warp i:nth-child(4){transform:rotate(300deg);animation-delay:-.9s}
@keyframes warp{from{opacity:0;height:0}50%{opacity:1}to{opacity:0;height:60%}}
.pv-min i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:blink 2s ease-in-out infinite}
.pv-min i:nth-child(1){left:25%;top:30%}.pv-min i:nth-child(2){left:65%;top:55%;animation-delay:-.7s}.pv-min i:nth-child(3){left:40%;top:75%;animation-delay:-1.3s}
@keyframes blink{50%{opacity:.2}}
.pv-gal i{position:absolute;left:50%;top:50%;width:84%;height:50%;margin:-25% 0 0 -42%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.8) 8%,transparent 22%,transparent 50%,rgba(255,255,255,.8) 58%,transparent 72%);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%);animation:spin 8s linear infinite}
.pv-gal::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px #fff}
.pv-worm i{position:absolute;left:50%;top:50%;width:10%;aspect-ratio:1;border-radius:50%;border:1.5px solid #fff;transform:translate(-50%,-50%);animation:worm 1.8s linear infinite;opacity:0}
.pv-worm i:nth-child(2){animation-delay:-.6s}.pv-worm i:nth-child(3){animation-delay:-1.2s}
.pv-worm::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px #fff}
@keyframes worm{0%{width:6%;opacity:0}30%{opacity:1}100%{width:150%;opacity:0}}
.pv-aur i{position:absolute;left:-20%;width:140%;height:40%;border-radius:50%;filter:blur(5px);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:aur 4s ease-in-out infinite}
.pv-aur i:nth-child(1){top:20%;transform:rotate(-8deg)}.pv-aur i:nth-child(2){top:45%;opacity:.6;animation-delay:-2s;transform:rotate(6deg)}
@keyframes aur{50%{translate:12% 6%;opacity:.4}}
.pv-pla i{position:absolute;left:30%;top:26%;width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#555 55%,#111 75%)}
.pv-pla::after{content:"";position:absolute;left:14%;top:46%;width:76%;height:16%;border-radius:50%;border:2px solid rgba(255,255,255,.85);transform:rotate(-16deg);box-shadow:0 0 8px rgba(255,255,255,.5)}
.pv-grid i{position:absolute;left:-30%;right:-30%;bottom:-10%;height:60%;transform:perspective(60px) rotateX(55deg);transform-origin:bottom;
  background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);background-size:12px 12px;animation:gridm 1s linear infinite}
.pv-grid::before{content:"";position:absolute;left:50%;top:16%;width:30%;aspect-ratio:1;margin-left:-15%;border-radius:50%;
  background:repeating-linear-gradient(#fff 0 3px,transparent 3px 5px);box-shadow:0 0 14px rgba(255,255,255,.5)}
@keyframes gridm{to{background-position:0 12px}}
.anipicks{grid-template-columns:repeat(4,1fr)}
.anipicks .pick{padding:8px 4px 9px}
.ad{position:relative;display:grid;place-items:center;width:100%;height:38px;border-radius:9px;background:#000;overflow:hidden}
.ad i{display:block;width:16px;height:16px;border-radius:5px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6)}
.ad i.bar{width:70%;height:11px;border-radius:5px;background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.6);box-shadow:none;position:relative;overflow:hidden}
.ad i.dot{width:20px;height:20px;border-radius:50%}
.a-rise{animation:dRise 1.8s ease-out infinite}.a-fade{animation:dFade 1.8s ease-out infinite}
.a-zoom{animation:dZoom 1.8s ease-out infinite}.a-flip{animation:dFlip 1.8s ease-out infinite}
.a-slide{animation:dSlide 1.8s ease-out infinite}.a-blur{animation:dBlur 1.8s ease-out infinite}
.a-float{animation:bFloat 2s ease-in-out infinite}.a-wave{animation:dWave 1.6s ease-in-out infinite}
.a-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#fff 50%,transparent 70%);animation:dShine 2s ease-in-out infinite}
.a-breathe{animation:dBreathe 2s ease-in-out infinite}
.a-avfloat{animation:bFloat 2.4s ease-in-out infinite}.a-spin{animation:dSpin 2.4s linear infinite}
.a-bounce{animation:dBounce 1.2s cubic-bezier(.3,0,.4,1) infinite}.a-pulse{animation:dPulse 1.4s ease-in-out infinite}
@keyframes dRise{0%{opacity:0;transform:translateY(12px)}50%,100%{opacity:1;transform:none}}
@keyframes dFade{0%{opacity:0}50%,100%{opacity:1}}
@keyframes dZoom{0%{opacity:0;transform:scale(.4)}50%,100%{opacity:1;transform:none}}
@keyframes dFlip{0%{opacity:0;transform:perspective(60px) rotateX(80deg)}50%,100%{opacity:1;transform:none}}
@keyframes dSlide{0%{opacity:0;transform:translateX(-24px)}50%,100%{opacity:1;transform:none}}
@keyframes dBlur{0%{opacity:0;filter:blur(6px);transform:scale(1.4)}50%,100%{opacity:1;filter:none;transform:none}}
@keyframes bFloat{50%{translate:0 -6px}}
@keyframes dWave{25%{translate:0 -4px;rotate:-4deg}75%{translate:0 2px;rotate:3deg}}
@keyframes dShine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
@keyframes dBreathe{50%{box-shadow:0 0 14px rgba(255,255,255,.9);background:rgba(255,255,255,.55)}}
@keyframes dSpin{to{transform:rotateY(360deg)}}
@keyframes dBounce{0%,100%{transform:translateY(5px) scale(1.1,.9)}45%{transform:translateY(-9px) scale(.95,1.05)}}
@keyframes dPulse{50%{transform:scale(1.25)}}
.placebox{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;border:1px solid var(--line);background:rgba(0,0,0,.35)}
.placebox .desc b{color:#ddd}
#moveBtn.on{background:#fff;color:#000;box-shadow:0 0 0 1px #fff,0 0 30px rgba(255,255,255,.6);animation:moveGlow 1.6s ease-in-out infinite}
@keyframes moveGlow{50%{box-shadow:0 0 0 1px #fff,0 0 12px rgba(255,255,255,.3)}}
.free [data-pro] *{pointer-events:none}
.free [data-pro] [data-remove]{pointer-events:auto}
.free [data-pro] [data-remove]:not([hidden]){opacity:1}
.picks.bgpicks{grid-template-columns:repeat(3,1fr)}
.picks.fontpicks{grid-template-columns:repeat(4,1fr)}
.bp{display:block;width:100%;padding:9px 4px;border-radius:9px;font-size:12px;font-weight:700;color:#fff}
.bp-glass{background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.25)}
.bp-solid{background:#fff;color:#000;box-shadow:0 0 12px rgba(255,255,255,.4)}
.bp-outline{border:1.5px solid #fff;box-shadow:inset 0 0 8px rgba(255,255,255,.2)}
.fa{font-size:20px;font-weight:700;color:#fff;padding:6px 0 0;white-space:nowrap}

/* upload card */
.upcard{position:relative;display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;border:1px dashed var(--line2);background:rgba(0,0,0,.35)}
.upthumb{flex:none;width:92px;aspect-ratio:16/10;border-radius:10px;background:#111 center/cover;border:1px solid var(--line);overflow:hidden}
.upthumb video{width:100%;height:100%;object-fit:cover}
.upinfo{display:flex;flex-direction:column;gap:6px;min-width:0}
.upinfo b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upinfo small{font-size:12px;color:var(--mut2)}
.disc{flex:none;width:70px;height:70px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 2px,#1c1c1c 2px 4px);border:1px solid var(--line2);display:grid;place-items:center;box-shadow:0 0 20px rgba(255,255,255,.1)}
.disc i{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff}
.disc.spin{animation:spin 3s linear infinite}

/* stats */
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:16px 14px;border-radius:16px}
.stat small{display:block;font-size:12px;color:var(--mut);margin-bottom:6px}
.stat b{font-size:26px;font-weight:800;text-shadow:0 0 18px rgba(255,255,255,.35);font-variant-numeric:tabular-nums}
.chart{display:flex;align-items:flex-end;gap:5px;height:150px;padding:16px 14px 30px;border-radius:16px}
.bar{position:relative;flex:1;height:100%;display:flex;align-items:flex-end}
.bar i{display:block;width:100%;min-height:2px;border-radius:5px 5px 2px 2px;background:linear-gradient(#fff,rgba(255,255,255,.35));box-shadow:0 0 12px rgba(255,255,255,.35);transform-origin:bottom;animation:grow .8s var(--ease) both}
.bar span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:9.5px;color:#666;white-space:nowrap}
.bar:not(:nth-child(odd)) span{display:none}
.bar em{position:absolute;bottom:calc(var(--h) + 6px);left:50%;transform:translateX(-50%);font-size:10px;font-style:normal;color:#fff;opacity:0;transition:opacity .2s}
.bar:hover em{opacity:1}
@keyframes grow{from{transform:scaleY(0)}}
.lstats{display:flex;flex-direction:column;gap:10px}
.ls{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px}
.ls svg{width:20px;height:20px}
.ls svg:not(.stroke){fill:currentColor;stroke:none}
.ls .t{min-width:0}
.ls .t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.ls .t i{display:block;height:4px;border-radius:4px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.5);transform-origin:left;animation:growx .8s var(--ease) both}
@keyframes growx{from{transform:scaleX(0)}}
.ls b{font-variant-numeric:tabular-nums}

/* account */
.box{padding:16px;border-radius:16px;display:flex;flex-direction:column;gap:12px}
.box .lbl{margin:0}
.box .kbtn{align-self:flex-start}
.danger-box{border-style:dashed}

/* preview */
.pvwrap{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.pvbar{display:flex;align-items:center;gap:10px;padding:10px 12px;flex:none}
.pvbar .seg{width:auto}
.pvbar .seg button{display:flex;align-items:center;gap:6px;padding:8px 14px;white-space:nowrap}
.pvbar .seg svg{width:16px;height:16px}
.pv-close{display:none;margin-left:auto}
#reload{margin-left:auto}
.pvstage{flex:1;min-height:0;display:grid;place-items:center;padding:6px 16px 18px;overflow:hidden}
.device{position:relative;overflow:hidden;background:#000;transition:width .5s var(--ease),height .5s var(--ease),border-radius .5s}
.device.phone{border-radius:40px;box-shadow:0 0 0 10px #151515,0 0 0 11px rgba(255,255,255,.22),0 30px 90px rgba(0,0,0,.8),0 0 80px rgba(255,255,255,.1)}
.device.desk{border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 30px 90px rgba(0,0,0,.8),0 0 80px rgba(255,255,255,.08)}
.device iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#000}
.pv-fab{display:none}

@media (max-width:1100px){ .ewrap{grid-template-columns:400px minmax(0,1fr)} .save span{display:none} .save{min-width:0} }
@media (max-width:900px){
  .ewrap{grid-template-columns:1fr;padding:0 10px 10px}
  .pvwrap{position:fixed;inset:0;z-index:150;border-radius:0;background:#000;transform:translateY(100%);transition:transform .5s var(--ease);visibility:hidden}
  body.show-pv .pvwrap{transform:none;visibility:visible}
  .pv-close{display:inline-flex}
  #reload{margin-left:0}
  .pvbar{justify-content:space-between;padding-top:max(10px,env(safe-area-inset-top))}
  .pv-fab{display:inline-flex;position:fixed;z-index:140;right:16px;bottom:max(16px,env(safe-area-inset-bottom));box-shadow:0 0 0 1px #fff,0 10px 40px rgba(0,0,0,.6),0 0 30px rgba(255,255,255,.4)}
  .ebar{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .urlchip{order:3;width:100%;max-width:none;margin:0}
  .urlchip a{flex:1}
  .ebar-r{margin-left:auto}
  #openUrl{display:none}
  #adminLink{display:none}
  .planchip i{display:none}
  .panes{padding-bottom:70px}
}
@media (max-width:480px){
  .tab span{font-size:9.5px}
  .tabs{padding:6px}
  .pane{padding:18px 14px 80px}
  .picks{grid-template-columns:repeat(2,1fr)}
  .fontpicks{grid-template-columns:repeat(3,1fr)}
  .stats3{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .stat b{font-size:20px}
  .lk{grid-template-columns:auto minmax(0,1fr) auto;padding-left:10px}
  .lk .handle{display:none}
  .lk .warn{grid-column:2/4}
}

/* account: keys */
.inp.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.keylist{display:flex;flex-direction:column;gap:8px}
.keylist .keyrow{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.keylist code{font:600 12.5px ui-monospace,Consolas,monospace;letter-spacing:.06em;color:#fff}
.keylist .kp{font-size:13px;font-weight:700;text-align:right}
.keylist small{grid-column:1/-1;color:var(--mut);font-size:11.5px}
.keylist .kp{white-space:nowrap}
@media (max-width:520px){.keylist code{font-size:11px;letter-spacing:.02em}}