* { box-sizing: border-box;
}
html, body, #app { height: 100%; margin: 0;
}
body { background: #0e0e12; color: #e6e6ea; font: 14px/1.4 system-ui, sans-serif;
}
.player { position: relative; height: 100%;
}
.scene { display: block; width: 100%; height: 100%;
}
.loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.l-title { font-weight: 700; letter-spacing: 1px;
}
.l-bar { width: 240px; height: 4px; background: #26262e; border-radius: 2px; overflow: hidden;
}
.l-fill { height: 100%; background: #4b7bec; transition: width 0.2s;
}
.l-pct { color: #8a8a96; font-size: 12px;
}
.l-access { max-width: 420px; text-align: center; display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
}
.la-txt { color: #b6b6c0; font-size: 12px; line-height: 1.5;
}
.la-url { display: block; color: #8a8a96; font-size: 11px; word-break: break-all;
}
.la-btns { display: flex; gap: 8px; justify-content: center;
}
.la-b { background: #24242c; border: 1px solid #33333d; color: #d6d6de; cursor: pointer; padding: 5px 12px; border-radius: 5px; font-size: 12px;
}
.la-b.main { background: #2b3550; border-color: #3a4a6b; color: #cfe0ff;
}
.la-b:hover { background: #2f2f39;
}
.empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8a8a96;
}
.nav {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: rgba(30, 30, 38, 0.85); border: 1px solid #33333d; border-radius: 30px; padding: 8px 18px;
}
.n-btn { background: none; border: none; color: #e6e6ea; font-size: 22px; cursor: pointer; line-height: 1;
}
.n-btn:hover { color: #6da8ff;
}
.n-cur { color: #b6b6c0; font-size: 13px; font-variant-numeric: tabular-nums;
}
.edit-link { position: absolute; top: 14px; right: 16px; color: #6f6f7a; font-size: 12px; text-decoration: none;
}
.edit-link:hover { color: #cfcfd8;
}