* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--sh-bg); color: var(--sh-text); font-family: var(--sh-font); -webkit-text-size-adjust: 100%; }
body { overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ---------- door ---------- */
.door {
  position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; padding: 24px;
  background: radial-gradient(38% 46% at 28% 52%, rgba(139, 123, 255, .2), transparent 70%), radial-gradient(30% 40% at 80% 20%, rgba(255, 107, 139, .07), transparent 70%), var(--sh-bg);
}
.door-card {
  width: min(432px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 40px;
  border-radius: 28px; background: rgba(20, 20, 28, .55); border: 1px solid var(--sh-line);
  -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.door-lock { width: 56px; height: 56px; align-self: center; margin-bottom: 10px; color: #fff; }
.door-in { height: 64px; padding: 0 20px; border-radius: 16px; border: 1px solid var(--sh-line2); background: rgba(0, 0, 0, .4); font-size: 18px; outline: none; letter-spacing: .5px; }
.door-in:focus { border-color: rgba(160, 146, 255, .8); box-shadow: 0 0 0 4px rgba(139, 123, 255, .16); }
.door-btn { height: 64px; border-radius: 16px; background: var(--sh-grad); color: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 14px 36px -12px rgba(176, 108, 240, .7); }
.door-btn:disabled { opacity: .6; }
.door-err { min-height: 20px; margin: 0; text-align: center; color: #ff8a9e; font-size: 14px; }
.door-back { color: var(--sh-faint); font-size: 13px; }
.door-back:hover { color: var(--sh-dim); }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- app ---------- */
.vapp { position: fixed; inset: 0; display: flex; flex-direction: column; }
.vbar {
  position: absolute; z-index: 20; top: 10px; left: 12px; right: 12px; height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 8px;
  border-radius: 20px; background: rgba(14, 14, 20, .5); border: 1px solid var(--sh-line); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
}
.vbrand { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 8px; border-radius: 12px; font-weight: 800; font-size: 19px; letter-spacing: -.4px; justify-self: start; }
.vbrand:hover { background: rgba(255, 255, 255, .06); }
.vtabs { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--sh-line); }
.vtab { height: 40px; padding: 0 18px; border-radius: 999px; color: var(--sh-dim); font-size: 15px; font-weight: 600; white-space: nowrap; }
.vtab:hover { color: #fff; }
.vtab.on { color: #fff; background: linear-gradient(rgba(139, 123, 255, .26), rgba(139, 123, 255, .12)); box-shadow: inset 0 0 0 1px rgba(160, 146, 255, .6); }
.vlock { justify-self: end; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sh-line); font-size: 14px; font-weight: 600; }
.vlock:hover { background: rgba(255, 255, 255, .08); }
.vbody { flex: 1; min-height: 0; position: relative; }
.vstatus { padding: 60px 24px; text-align: center; color: var(--sh-dim); }
.vspin, .pv-spin { width: 44px; height: 44px; margin: 60px auto; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .14); border-top-color: #b4a8ff; animation: vspin .8s linear infinite; }
@keyframes vspin { to { transform: rotate(360deg); } }
.vtoast { position: fixed; z-index: 100; left: 50%; bottom: 32px; transform: translate(-50%, 20px); padding: 12px 20px; border-radius: 14px; background: rgba(245, 243, 239, .95); color: #0b0b10; font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.vtoast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- feed player ---------- */
.pv { position: absolute; inset: 0; overflow: hidden; background: #000; outline: none; }
.pv-stage { position: absolute; inset: 0; }
.pv-backdrop { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(40px) saturate(1.4) brightness(.45); transform: scale(1.1); }
.pv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pv-status { position: absolute; left: 0; right: 0; top: calc(50% + 40px); margin: 0; padding: 0 24px; text-align: center; color: rgba(255, 255, 255, .85); font-size: 15px; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); pointer-events: none; }
.pv-status:empty { display: none; }
.pv-spin { position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; pointer-events: none; }
.pv.sw-up .pv-canvas { animation: swUp .32s cubic-bezier(.2, .8, .2, 1); }
.pv.sw-down .pv-canvas { animation: swDown .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes swUp { from { transform: translateY(14%); opacity: .2; } }
@keyframes swDown { from { transform: translateY(-14%); opacity: .2; } }
.pv.paused .pv-stage::after { content: ''; position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: rgba(0, 0, 0, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 46px no-repeat; pointer-events: none; }
.pv-rail { position: absolute; z-index: 5; right: 18px; bottom: 150px; display: flex; flex-direction: column; gap: 14px; }
.pv-act { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(10, 10, 14, .42); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .12s, background .15s; }
.pv-act:hover { background: rgba(255, 255, 255, .16); }
.pv-act:active { transform: scale(.9); }
.pv-act.fav.on { color: var(--sh-rose); background: rgba(255, 107, 139, .18); border-color: rgba(255, 107, 139, .5); }
.pv-nav { position: absolute; z-index: 5; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.pv-info { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 120px 96px 22px 28px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); pointer-events: none; }
.pv-info > * { pointer-events: auto; }
.pv-pos { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.pv-title { margin: 0 0 4px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.5px; line-height: 1.15; max-width: 900px; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.pv-sub { margin: 0 0 14px; color: var(--sh-dim); font-size: 14px; }
.pv-prog { display: flex; align-items: center; gap: 14px; }
.pv-bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); cursor: pointer; overflow: hidden; }
.pv-bar b { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .25); }
.pv-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sh-grad); }
.pv-time { font-size: 13px; color: var(--sh-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.burst { position: absolute; z-index: 6; left: 50%; top: 50%; color: var(--sh-rose); transform: translate(-50%, -50%); animation: burst .8s ease-out forwards; pointer-events: none; filter: drop-shadow(0 8px 30px rgba(255, 107, 139, .6)); }
@keyframes burst { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
.vapp[data-view="feed"] .vbar { background: rgba(14, 14, 20, .35); }

/* ---------- library & discover ---------- */
.vpage { position: absolute; inset: 0; overflow-y: auto; padding: 96px clamp(16px, 3vw, 44px) 48px; }
.vhead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.vhead h1 { margin: 0; font-size: 34px; font-weight: 850; letter-spacing: -1px; }
.vcount { color: var(--sh-faint); font-size: 14px; font-weight: 600; }
.vplay { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 14px; background: var(--sh-grad); color: #fff; font-weight: 700; }
.vtools { display: flex; gap: 10px; margin-bottom: 14px; }
.vsearchwrap { flex: 0 1 460px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--sh-line); color: var(--sh-dim); }
.vsearchwrap:focus-within { border-color: rgba(160, 146, 255, .7); }
.vsearch { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--sh-text); font-size: 15px; }
.vsel { height: 46px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--sh-line); font-weight: 600; }
.vsel option { background: #111118; }
.vchips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: none; }
.vchip { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sh-line); background: rgba(255, 255, 255, .05); color: var(--sh-dim); font-size: 14px; font-weight: 600; white-space: nowrap; }
.vchip.on { color: #08080b; background: #fff; border-color: #fff; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 16px; }
.vcard { display: flex; flex-direction: column; gap: 10px; text-align: left; min-width: 0; }
.vthumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #12121a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .2s, box-shadow .2s; }
.vcard:hover .vthumb { transform: translateY(-4px); box-shadow: 0 0 0 2px rgba(160, 146, 255, .8), 0 18px 34px -16px rgba(0, 0, 0, .9); }
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vthumb img.gone { visibility: hidden; }
.vdur, .vq, .vrate, .vnew { position: absolute; padding: 3px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, .72); }
.vdur { right: 8px; bottom: 8px; font-variant-numeric: tabular-nums; }
.vq { left: 8px; bottom: 8px; }
.vrate { left: 8px; top: 8px; }
.vrate.hot { background: rgba(255, 107, 139, .9); }
.vnew { left: 8px; top: 8px; background: rgba(139, 123, 255, .9); }
.vfav { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .6); color: var(--sh-rose); }
.vcap { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.vcap.row { flex-direction: row; align-items: flex-start; gap: 8px; }
.vcap.row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vcap b { font-size: 14px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcap span { font-size: 12px; color: var(--sh-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsave { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--sh-line); color: var(--sh-dim); }
.vsave:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- pull ---------- */
.vbadge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--sh-rose); color: #fff; font-size: 12px; font-weight: 800; vertical-align: 1px; }
.vsub { margin: 28px 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.vpullform { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.vpullform .vsearchwrap { flex: 1 1 420px; max-width: 760px; }
.vpullform .vplay { margin-left: 0; }
.vplay:disabled { opacity: .6; }
.vstatus.small { max-width: 680px; padding: 14px 2px; text-align: left; font-size: 14px; line-height: 1.5; }
.vgrid > .vstatus, .vgrid > .vspin { grid-column: 1 / -1; }
.vjobs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 900px; }
.vjob { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--sh-line); }
.vjob-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vjob-main b { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vjob-main span { font-size: 12px; color: var(--sh-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vjob-main .vjob-err { color: #ff8a9e; white-space: normal; }
.vjob-bar { height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.vjob-bar i { display: block; height: 100%; background: var(--sh-grad); transition: width .4s; }
.vjob-state { flex: none; color: var(--sh-dim); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vjob.done .vjob-state { color: #7ee2a8; }
.vjob.failed .vjob-state { color: #ff8a9e; }
.vjob-btn { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--sh-line); color: var(--sh-dim); }
.vjob-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.vpick { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .75); color: transparent; }
.vcard.picked .vthumb { box-shadow: 0 0 0 3px #b4a8ff; }
.vcard.picked .vpick { background: #8b7bff; border-color: #8b7bff; color: #fff; }
.vpickbar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; width: fit-content; margin: 18px auto 0; padding: 10px 10px 10px 20px; border-radius: 999px; background: rgba(20, 20, 28, .94); border: 1px solid var(--sh-line); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8); font-weight: 700; }
.vpickbar .vplay { margin-left: 0; }

@media (max-width: 760px) {
  .vbar { top: 8px; left: 8px; right: 8px; height: 56px; grid-template-columns: auto 1fr auto; padding: 0 6px; }
  .vbrand span, .vlock span { display: none; }
  .vlock { padding: 0 12px; }
  .vtabs { justify-self: center; }
  .vtab { height: 38px; padding: 0 12px; font-size: 14px; }
  .pv-info { padding: 100px 84px calc(18px + env(safe-area-inset-bottom)) 16px; }
  .pv-rail { right: 12px; bottom: calc(120px + env(safe-area-inset-bottom)); gap: 12px; }
  .pv-act { width: 52px; height: 52px; }
  .pv-nav { display: none; }
  .vpage { padding-top: 80px; }
  .vgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 12px; }
  .vhead h1 { font-size: 28px; }
  .vtools { flex-wrap: wrap; }
  .vsearchwrap { flex: 1 1 100%; }
  .vpullform .vsearchwrap { flex-basis: 100%; }
}

@media (max-width: 460px) {
  .vbrand { display: none; }
  .vbar { grid-template-columns: 1fr auto; }
  .vtab { padding: 0 9px; font-size: 13px; }
}