:root{--bg:#000;--card:rgba(255,255,255,.06);--text:#e8eaed;--muted:#9aa0a6;--brand:#e9e3dc}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{text-decoration:none;color:inherit}
.container{width:min(1100px,100% - 32px);margin-inline:auto}
.row{display:flex;align-items:center;gap:12px}

/* Верхняя панель */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:linear-gradient(180deg,rgba(0,0,0,.65),transparent);padding:10px 0}
.brand-polina{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:30px;color:var(--brand)}
.crumbs{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted)}
.sep{opacity:.5}.current{color:var(--text)}

/* Сетка */
.section-title{margin:18px 4px 10px;font-size:18px;opacity:.9}
.grid{display:grid;gap:12px}
.folders{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.photos{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.card{padding:14px;border-radius:16px;background:var(--card);border:1px solid rgba(255,255,255,.08)}
.folder{display:flex;gap:10px;align-items:center}
.folder-icon{font-size:22px}
.folder-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Превью */
.photo{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#111}
.photo img,.photo .thumbvid{width:100%;height:160px;object-fit:cover;display:block;opacity:0;transition:opacity .2s ease}
.photo .skeleton{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#111,#222,#111);background-size:200% 100%;animation:sh 1.2s linear infinite}
@keyframes sh{0%{background-position:0 0}100%{background-position:200% 0}}
.photo .spinner{position:absolute;inset:0;display:grid;place-items:center}
.photo .spinner:after{content:"";width:22px;height:22px;border-radius:50%;border:2px solid #777;border-top-color:#fff;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.photo .error{position:absolute;inset:auto 8px 8px 8px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:8px 10px;border-radius:10px}
.photo.is-video .videobadge{position:absolute;left:10px;top:10px;z-index:2;font-size:12px;padding:6px 8px;border-radius:10px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);color:#fff}

/* Футер */
.corner-footer{position:fixed;right:12px;bottom:12px;color:var(--muted);font-size:13px;z-index:5;pointer-events:none}

/* Вьюер */
.viewer{position:fixed;inset:0;z-index:9999;display:none;background:#000;overscroll-behavior:none}
.viewer.open{display:block}
.viewer.fadeEnter{opacity:0}
.viewer.fadeEnterActive{opacity:1;transition:opacity .18s ease}
.viewer.fadeLeave{opacity:1}
.viewer.fadeLeaveActive{opacity:0;transition:opacity .18s ease}

/* Назад */
.vback{position:fixed;top:10px;left:8px;z-index:10000;background:none;border:none;color:#fff;padding:8px;opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease}
.viewer.open .vback{opacity:1;transform:translateY(0)}
.vback::after{content:"";position:absolute;inset:-12px}
.vback svg{width:28px;height:28px;display:block}

/* Слайды */
.vtrack{position:absolute;inset:0;overflow:hidden;background:#000}
.vtrack-inner{width:100%;height:100%;display:flex;align-items:center;touch-action:none;will-change:transform;transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.vslide{min-width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.vslide img,.vslide video{max-width:100svw;max-height:100svh;width:auto;height:auto;object-fit:contain;display:block;background:#111}

/* Панель Play/Pause + таймер (кликается только иконка) */
.vctrl{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:10px 18px;box-shadow:0 8px 28px rgba(0,0,0,.45);z-index:6;user-select:none}
.vctrl .ppbtn{appearance:none;-webkit-appearance:none;border:0;background:none;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;padding:0;margin:0;cursor:pointer}
.vctrl .ppbtn:active{transform:scale(.96)}
.vctrl .ppbtn svg{width:22px;height:22px;display:block}
.vctrl .time{font-weight:700;letter-spacing:.3px;font-size:16px}
.vctrl .time .slash{opacity:.7;margin:0 10px}
.vctrl .time .dur{opacity:.6}

/* Кнопка звука — 42x42 и чуть выше панели */
.vmute{position:absolute;right:24px;bottom:46px;z-index:6;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.45);user-select:none;cursor:pointer}
.vmute:active{transform:scale(.96)}
.vmute svg{width:22px;height:22px;display:block}

/* Прячем нативные контролы видео */
video::-webkit-media-controls{display:none!important}
video::-webkit-media-controls-enclosure{display:none!important}
video::-internal-media-controls-download-button{display:none!important}
video::-webkit-media-controls-play-button{display:none!important}
video::-webkit-media-controls-start-playback-button{display:none!important}
video{controls:none!important}

/* tap highlight */
*{-webkit-tap-highlight-color:rgba(255,255,255,.12)}