:root { color-scheme:dark; --bg:#080808; --panel:#111; --line:#282828; --muted:#888; --text:#f5f5f2; --accent:#d7ff3f; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { position:sticky; top:0; z-index:20; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:rgba(8,8,8,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:750; letter-spacing:-.02em; }
.brand-mark,.empty-icon { display:grid; place-items:center; width:28px; aspect-ratio:1; border-radius:50%; color:#080808; background:var(--accent); font:900 14px/1 Georgia,serif; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.search { width:min(34vw,320px); height:38px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid var(--line); border-radius:99px; background:#111; }
.search svg,.icon-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.search input { min-width:0; width:100%; border:0; outline:0; color:var(--text); background:transparent; font-size:13px; }
.search:focus-within { border-color:#555; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--text); background:#111; cursor:pointer; }
.icon-button:hover { background:#1b1b1b; }
.auth-button { position:relative; }
.auth-button svg { width:18px; height:18px; }
#authDot { position:absolute; right:1px; top:1px; width:8px; height:8px; border:2px solid #111; border-radius:50%; background:#555; }
#authDot.connected { background:var(--accent); }
.summary { height:132px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 24px 24px; }
.eyebrow { margin:0 0 7px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.16em; }
h1 { margin:0; font-size:clamp(25px,3vw,38px); line-height:1; letter-spacing:-.05em; }
.count { margin:0; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:var(--bg); }
.tile { position:relative; padding:0; aspect-ratio:1; overflow:hidden; border:0; background:#141414; cursor:zoom-in; }
.tile::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,#111 25%,#1b1b1b 45%,#111 65%); background-size:220% 100%; animation:shimmer 1.4s infinite linear; }
.tile.loaded::before,.tile.failed::before { display:none; }
.tile img { width:100%; height:100%; display:block; object-fit:cover; opacity:0; transition:opacity .28s,transform .35s; }
.tile.loaded img { opacity:1; }
.tile:hover img { transform:scale(1.035); }
.tile .badge { position:absolute; right:8px; top:8px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:white; background:rgba(0,0,0,.48); backdrop-filter:blur(6px); opacity:0; transform:translateY(-3px); transition:.2s; }
.tile.loaded .badge { opacity:1; transform:none; }
.badge svg { width:14px; height:14px; fill:white; stroke:white; }
.tile.failed { background:#121212; }
.tile.failed::after { content:"X"; position:absolute; inset:0; display:grid; place-items:center; color:#555; font-size:22px; }
.tile.auth-required::after { content:"LOGIN"; color:#d7cc85; font-size:10px; font-weight:900; letter-spacing:.08em; }
.tile.rate-limited::after { content:"429"; color:#ff9c8f; font-size:12px; font-weight:900; }
.sentinel { height:100px; display:grid; place-items:center; }
.sentinel span { width:20px; aspect-ratio:1; border:2px solid #333; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.empty { min-height:55vh; display:grid; place-content:center; justify-items:center; text-align:center; }
.empty-icon { width:52px; font-size:22px; }
.empty h2 { margin:18px 0 5px; font-size:20px; }
.empty p { margin:0; color:var(--muted); font-size:13px; }
.notice { margin:0 24px 20px; padding:12px 14px; border:1px solid #4b4520; border-radius:8px; background:#171608; color:#d7cc85; font-size:12px; }
.viewer { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:#080808; color:var(--text); grid-template-columns:minmax(0,1fr) 340px; }
.viewer[open] { display:grid; }
.viewer::backdrop { background:#080808; }
.stage { min-width:0; display:grid; place-items:center; overflow:hidden; background:#050505; }
.stage img,.stage video { max-width:100%; max-height:100dvh; object-fit:contain; }
.poster-only { position:relative; width:100%; height:100%; display:grid; place-items:center; }
.poster-only > img { width:100%; height:100%; object-fit:contain; opacity:.62; }
.poster-overlay { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; padding:24px; text-align:center; background:radial-gradient(circle,rgba(0,0,0,.15),rgba(0,0,0,.58)); }
.large-play { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; color:#111; background:var(--accent); }
.large-play svg { width:30px; height:30px; fill:currentColor; stroke:currentColor; }
.poster-overlay strong { font-size:14px; }
.stage-loading { width:28px; aspect-ratio:1; border:2px solid #333; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.details { position:relative; z-index:2; display:flex; flex-direction:column; min-height:0; padding:84px 26px 26px; border-left:1px solid var(--line); background:#0d0d0d; overflow:hidden; }
.details-scroll { min-height:0; overflow:auto; padding-bottom:18px; }
.details-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--line); }
.pill { padding:5px 8px; border-radius:99px; background:var(--accent); color:#111; font-size:9px; font-weight:900; letter-spacing:.08em; }
.details time { color:var(--muted); font-size:11px; }
.caption { margin:24px 0; color:#d2d2cf; font-size:13px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.quality-notice { margin:18px 0 -4px; padding:10px 12px; border:1px solid #4b4520; border-radius:7px; color:#d7cc85; background:#171608; font-size:11px; line-height:1.5; }
.details-actions { margin-top:auto; padding-top:18px; border-top:1px solid var(--line); background:#0d0d0d; }
.details-actions a { display:flex; justify-content:space-between; color:var(--text); font-size:12px; font-weight:700; text-decoration:none; }
.back-button { margin:0 0 10px; padding:0; border:0; color:#aaa; background:transparent; font-size:12px; font-weight:750; cursor:pointer; }
.back-button:hover { color:var(--accent); }
.owner-block { width:100%; display:grid; gap:5px; margin:18px 0 0; padding:13px; border:1px solid #2c2c2c; border-radius:10px; color:#eaeae7; background:#141414; text-align:left; cursor:pointer; }
.owner-block:hover { border-color:#555; background:#181818; }
.owner-block[hidden] { display:none; }
.owner-block strong { font-size:14px; line-height:1.35; }
.owner-block span { color:#aaa; font-size:11px; overflow-wrap:anywhere; }
.owner-block small { color:var(--accent); font-size:10px; font-weight:750; }
.owner-label { color:var(--accent) !important; font-size:10px !important; font-weight:850; letter-spacing:.12em; }
.viewer-close { position:fixed; z-index:5; right:20px; top:18px; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:#171717; color:white; font-size:24px; font-weight:200; line-height:1; cursor:pointer; }
.viewer-nav { position:fixed; z-index:4; top:50%; width:42px; height:42px; border:0; border-radius:50%; color:white; background:rgba(25,25,25,.75); font-size:30px; line-height:1; cursor:pointer; backdrop-filter:blur(7px); }
.viewer-nav.previous { left:18px; }
.viewer-nav.next { right:358px; }
.viewer-nav[hidden] { display:none; }
.toast { position:fixed; left:50%; bottom:24px; z-index:100; padding:11px 15px; border-radius:7px; background:#eee; color:#111; font-size:12px; font-weight:700; opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.auth-dialog { width:min(500px,calc(100vw - 28px)); padding:0; border:1px solid var(--line); border-radius:14px; color:var(--text); background:#111; }
.auth-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(7px); }
.auth-dialog form { position:relative; padding:30px; }
.auth-dialog h2 { margin:0 0 14px; font-size:25px; letter-spacing:-.04em; }
.dialog-close { position:absolute; right:16px; top:14px; width:34px; height:34px; border:0; border-radius:50%; color:white; background:#202020; font-size:22px; cursor:pointer; }
.auth-copy { margin:0 0 24px; color:#aaa; font-size:12px; line-height:1.7; }
.auth-copy code { color:#ddd; }
.auth-field { display:grid; gap:8px; color:#aaa; font-size:11px; }
.auth-field input { width:100%; height:44px; padding:0 12px; border:1px solid #333; border-radius:7px; outline:0; color:white; background:#090909; font-family:ui-monospace,Consolas,monospace; }
.auth-field input:focus { border-color:#666; }
.auth-status { min-height:18px; margin:10px 0; color:#aaa; font-size:11px; }
.auth-status.error { color:#ff9c8f; }
.auth-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.primary-button,.secondary-button { min-height:38px; padding:0 15px; border-radius:7px; font-size:12px; font-weight:750; cursor:pointer; }
.primary-button { border:0; color:#090909; background:var(--accent); }
.secondary-button { border:1px solid #333; color:#ddd; background:#171717; }
.primary-button:disabled { opacity:.55; cursor:wait; }
.media-error { min-height:auto; padding:30px; }
.media-error p { max-width:420px; margin-bottom:18px; line-height:1.65; }
@keyframes shimmer { to { background-position:-220% 0; } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:1100px) { .grid { grid-template-columns:repeat(5,1fr); } }
@media (max-width:760px) {
  .topbar { height:56px; padding:0 12px; }
  .brand span:last-child { display:none; }
  .search { width:48vw; height:36px; }
  .summary { height:104px; padding:0 14px 18px; }
  .grid { grid-template-columns:repeat(3,1fr); }
  .viewer[open] { grid-template-columns:1fr; grid-template-rows:minmax(0,68dvh) minmax(0,32dvh); overflow:auto; }
  .stage { min-height:62dvh; }
  .details { padding:20px 18px; border-left:0; border-top:1px solid var(--line); }
  .details-actions { margin-top:18px; }
  .viewer-nav.next { right:14px; }
  .viewer-nav.previous { left:14px; }
  .viewer-nav { top:34%; }
  .viewer-close { right:12px; top:10px; }
  .auth-dialog form { padding:25px 20px 20px; }
}