/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0b0b0d;color:#fff;overscroll-behavior-y:none}

/* Topbar */
.topbar{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,0));z-index:40}
.topbar .brand{font-weight:800;letter-spacing:.4px}
.topbar .tabs{display:flex;gap:8px}
.topbar .tab{background:transparent;border:0;color:#ddd;padding:8px 12px;border-radius:999px;font-weight:600}
.topbar .tab.active{color:#000;background:#fff}

/* Viewport & feed (centered reel like TikTok) */
.viewport{height:100vh;display:grid;place-items:center;padding:56px 0 86px}
.feed{height:100%;width:100%;display:grid;place-items:center;overflow:hidden}
.card{position:relative;width:min(480px,92vw);height:86vh;max-height:860px;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.card video{width:100%;height:100%;object-fit:cover}

/* Right action rail */
.actions{position:absolute;right:10px;bottom:110px;display:flex;flex-direction:column;gap:18px;align-items:center;z-index:5}
.action{display:flex;flex-direction:column;align-items:center;color:#fff;gap:6px}
.action button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);cursor:pointer}
.action .ico{width:22px;height:22px;fill:#fff;opacity:.95}
.action .count{font-size:12px;color:#ddd}

/* Caption overlay (bottom-left) */
.meta{position:absolute;left:14px;bottom:70px;right:86px;z-index:5;display:flex;flex-direction:column;gap:8px}
.user{display:flex;align-items:center;gap:8px}
.user .avatar{width:36px;height:36px;border-radius:50%;background:#222;display:inline-block}
.user .name{font-weight:700}
.caption{font-size:14px;opacity:.95}
.music{display:flex;align-items:center;gap:8px;opacity:.9}
.music .disc{width:18px;height:18px;border-radius:50%;background:conic-gradient(#fff,#bbb,#fff)}
.ticker{white-space:nowrap;overflow:hidden}
.ticker span{display:inline-block;padding-left:100%;animation:ticker 9s linear infinite}
@keyframes ticker{to{transform:translateX(-100%)}}

/* Progress bar */
.progress{position:absolute;left:0;right:0;bottom:64px;height:3px;background:rgba(255,255,255,.15)}
.progress .bar{height:100%;width:0;background:#fff;transition:width .1s linear}

/* iOS-style bottom tab bar */
:root{
  --bar-bg:rgba(18,18,20,.72);--bar-border:rgba(255,255,255,.08);
  --label:rgba(255,255,255,.7);--label-active:#fff;--icon:rgba(255,255,255,.9);
  --pill:rgba(255,255,255,.95);--upload-glow:rgba(255,255,255,.35)
}
@media (prefers-color-scheme:light){
  :root{--bar-bg:rgba(255,255,255,.82);--bar-border:rgba(0,0,0,.08);--label:rgba(0,0,0,.55);--label-active:#000;--icon:rgba(0,0,0,.85);--pill:rgba(0,0,0,.85);--upload-glow:rgba(0,0,0,.25)}
}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:calc(60px + env(safe-area-inset-bottom));padding:8px 14px calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 72px 1fr 1fr;align-items:end;justify-items:center;gap:4px;background:var(--bar-bg);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--bar-border);z-index:100}
.bottom-nav .nav-item{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:0;cursor:pointer;color:var(--label);font-size:11px;line-height:1;padding:4px 8px 10px;-webkit-tap-highlight-color:transparent}
.bottom-nav .nav-item .ico{width:22px;height:22px;fill:var(--icon)}
.bottom-nav .nav-item[aria-current="page"]{color:var(--label-active)}
.bottom-nav .nav-item .pill{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:18px;height:3px;border-radius:999px;background:var(--pill);opacity:0;transition:opacity .18s ease}
.bottom-nav .nav-item[aria-current="page"] .pill{opacity:.95}
.nav-upload{position:relative;bottom:6px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;background:radial-gradient(120% 120% at 30% 25%,rgba(255,255,255,.9),rgba(255,255,255,.55));box-shadow:0 8px 24px var(--upload-glow),0 0 0 1px var(--bar-border) inset}
.nav-upload .ico{width:26px;height:26px;fill:#000}

@media (min-width:1024px){
  .viewport{padding-bottom:90px}
  .bottom-nav{width:480px;margin:0 auto;border-radius:18px 18px 0 0}
}
body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}

/* Smooth transition between videos (TikTok swipe) */
.card {
  transition: transform 0.35s ease-out;
  will-change: transform;
}