*{margin:0;padding:0}:root{--bg:#0f1720;--panel: rgba(255,255,255,.03);--muted:#9aa4b2;--accent:#06b6d4;--danger:#ff6b6b;--glass: rgba(255,255,255,.04);--white:#fff;--radius:10px}.viewer-root{width:100%;height:100vh;background:linear-gradient(180deg,#07101a,#0f1720);color:var(--white);position:relative;overflow:hidden;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.viewer-topbar{position:absolute;left:12px;top:12px;z-index:1200;display:flex;align-items:center;gap:10px;pointer-events:auto}.viewer-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border:1px solid rgba(255,255,255,.05);color:var(--white);border-radius:8px;text-decoration:none;font-size:13px;transition:transform .14s ease,box-shadow .14s ease,background .14s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.viewer-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px #02061799;background:#ffffff0d}.viewer-btn .icon{opacity:.95}.viewer-url{max-width:720px;color:var(--muted);background:#00000047;padding:8px 12px;border-radius:8px;font-size:12px;border:1px solid rgba(255,255,255,.02);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewer-hint{color:var(--muted);background:#00000047;padding:8px 12px;border-radius:8px;font-size:13px}.viewer-preloader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:linear-gradient(180deg,#020617a6,#0206178c);z-index:1100;transition:opacity .28s ease,transform .28s ease;opacity:0;pointer-events:none}.viewer-preloader.visible{opacity:1;pointer-events:auto}.viewer-preloader.hidden{opacity:0;pointer-events:none}.spinner{width:64px;height:64px;display:flex;align-items:center;justify-content:center}.spinner-svg{width:64px;height:64px}.spinner-svg circle{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:94;stroke-dashoffset:70;transform-origin:50% 50%;animation:spin 1s linear infinite,dash 1.5s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dashoffset:94}50%{stroke-dashoffset:31;transform:rotate(45deg)}to{stroke-dashoffset:94;transform:rotate(360deg)}}.preloader-text{color:var(--white);font-size:15px;font-weight:600}.preloader-error{color:var(--danger);font-size:13px;margin-top:4px}.viewer-container{width:100%;height:100%;display:block;position:absolute;left:0;top:0;overflow:auto;-webkit-overflow-scrolling:touch}.viewer-footer{position:absolute;right:12px;bottom:12px;color:var(--muted);z-index:1200;font-size:12px;background:#0000002e;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.02)}@media(max-width:720px){.viewer-topbar{left:8px;top:8px;gap:8px}.viewer-url{display:none}.viewer-btn{padding:7px 9px;font-size:12px}.viewer-footer{right:8px;bottom:8px;font-size:11px}}