/* extras: progress bar, tips, spotlight, view demo, what's new, code box, quick-jump */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad);z-index:80;pointer-events:none}
.tipbar{border-bottom:1px solid var(--line);background:#0a1022;font-size:.85rem}
.tipbar .wrap{display:flex;align-items:center;gap:12px;min-height:44px;padding-top:6px;padding-bottom:6px}
.tipbar b{flex:none;font-size:.68rem;letter-spacing:.16em;color:var(--cy);border:1px solid var(--cy);border-radius:20px;padding:2px 10px}
.tipbar p{color:var(--mut);transition:opacity .35s;flex:1}
.tipbar p.fade{opacity:0}
.tipbar button{flex:none;background:none;border:1px solid var(--line);color:var(--mut);border-radius:10px;padding:4px 10px;font:inherit;font-size:.78rem;cursor:pointer}
.tipbar button:hover{border-color:var(--cy);color:var(--tx)}
/* spotlight cards */
.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(72,205,222,.16),transparent 70%)}
.card:hover::after{opacity:1}
/* view demo */
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--bg2);margin:18px 0 8px}
.seg button{border:0;background:none;color:var(--mut);font:600 .9rem Sora,system-ui,sans-serif;padding:10px 18px;border-radius:10px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--btn);color:#050816}
.vdemo{display:grid;place-items:center;min-height:380px}
.vframe{position:relative;width:240px;height:380px;border:3px solid #26356a;border-radius:30px;background:#060a15;overflow:hidden;transition:width .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1),border-radius .55s;box-shadow:0 20px 60px rgba(72,205,222,.12)}
.vframe .side{display:none;position:absolute;left:0;top:0;bottom:0;width:26%;background:#0a1022;border-right:1px solid var(--line);padding:12px 8px}
.vframe .side i{display:block;height:8px;border-radius:4px;background:var(--line);margin:10px 0}
.vframe .side i:first-child{background:var(--grad)}
.vframe .main{position:absolute;inset:0 0 54px 0;padding:16px 14px;display:grid;grid-template-columns:1fr;gap:10px;align-content:start}
.vframe .main h4{font-size:1rem}
.vframe .tile{height:54px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#121c3b,#0e1630)}
.vframe .tile:nth-child(2){background:linear-gradient(135deg,#48cdde33,#7c53cb44)}
.vframe .tabs2{position:absolute;left:0;right:0;bottom:0;height:54px;display:flex;justify-content:space-around;align-items:center;border-top:1px solid var(--line);background:#0a1022}
.vframe .tabs2 i{width:22px;height:22px;border-radius:7px;background:var(--line)}
.vframe .tabs2 i:first-child{background:var(--cy)}
.vframe.desk{width:min(560px,92vw);height:340px;border-radius:14px}
.vframe.desk .side{display:block}
.vframe.desk .main{left:26%;inset:0 0 0 26%;grid-template-columns:repeat(3,1fr)}
.vframe.desk .main h4{grid-column:1/-1}
.vframe.desk .tile{height:80px}
.vframe.desk .tabs2{display:none}
.vnote{color:var(--mut);font-size:.85rem;margin-top:10px}
/* what's new */
.log{max-width:760px;margin:0 auto;position:relative;padding-left:26px}
.log::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--grad)}
.log .it{position:relative;padding:0 0 22px}
.log .it::before{content:"";position:absolute;left:-26px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--cy)}
.log .it em{font-style:normal;font-size:.68rem;letter-spacing:.14em;color:var(--cy);display:block;margin-bottom:4px}
.log .it b{display:block;margin-bottom:2px}
.log .it span{color:var(--mut);font-size:.9rem}
/* code box */
.codebox{margin:20px auto 6px;max-width:460px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.codebox input{flex:1 1 200px;background:#0a1228;border:1px solid var(--line);color:var(--tx);border-radius:12px;padding:12px 14px;font:600 1rem ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.codebox input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(72,205,222,.18)}
.codehint{color:var(--mut);font-size:.8rem;margin-bottom:10px}
/* quick jump */
.qj{position:fixed;inset:0;z-index:120;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:#02050bcc;backdrop-filter:blur(4px)}
.qj.open{display:flex}
.qj .box{width:min(520px,92vw);background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px #000a}
.qj input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--tx);padding:16px;font:1rem Sora,system-ui,sans-serif}
.qj input:focus{outline:none}
.qj ul{list-style:none;margin:0;padding:6px;max-height:320px;overflow:auto}
.qj li a{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;color:var(--tx)}
.qj li a small{color:var(--mut)}
.qj li.sel a,.qj li a:hover{background:#1e2a4d88}
.qjbtn{position:fixed;right:16px;bottom:16px;z-index:70;background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:12px;padding:8px 12px;font:600 .78rem Sora,system-ui,sans-serif;cursor:pointer}
.qjbtn:hover{border-color:var(--cy);color:var(--tx)}
@media (prefers-reduced-motion:reduce){.vframe,.tipbar p{transition:none}}
@media(max-width:600px){.qjbtn{display:none}}