/* ══════════════════════════════════════════════════════════
   VIReels CSS — Premium Dark UI · Mobile-First
   ══════════════════════════════════════════════════════════ */

:root {
  --bg:          #080810;
  --bg2:         #0f0f1a;
  --bg3:         #161624;
  --surface:     #1c1c2e;
  --surface2:    #232338;
  --surface3:    #2a2a44;
  --border:      rgba(255,255,255,.06);
  --border2:     rgba(255,255,255,.12);
  --text:        #eeeef8;
  --text2:       #8888aa;
  --text3:       #4a4a6a;
  --accent:      #ff2d55;
  --accent2:     #6c4fff;
  --accent3:     #00d4ff;
  --green:       #00e676;
  --gold:        #ffb700;
  --radius:      18px;
  --radius-sm:   10px;
  --nav-h:       64px;
  --top-h:       56px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bot:    env(safe-area-inset-bottom, 0px);
  --font:        'DM Sans', sans-serif;
  --font-display:'Syne', sans-serif;
  --glow-a:      0 0 20px rgba(255,45,85,.35);
  --glow-a2:     0 0 20px rgba(108,79,255,.35);
  --glow-gold:   0 0 16px rgba(255,183,0,.35);
  --t:           .18s cubic-bezier(.4,0,.2,1);
}

.light {
  --bg: #f0f0f8; --bg2: #fff; --bg3: #e8e8f4;
  --surface: #fff; --surface2: #ebebf8; --surface3: #e0e0f0;
  --border: rgba(0,0,0,.07); --border2: rgba(0,0,0,.14);
  --text: #0a0a18; --text2: #5a5a78; --text3: #9090b0;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;overflow:hidden;
  font-family:var(--font);background:var(--bg);color:var(--text);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
}
button{border:none;background:none;cursor:pointer;color:inherit;font-family:inherit;}
input,textarea{font-family:inherit;color:var(--text);background:transparent;border:none;outline:none;}
a{color:var(--accent);cursor:pointer;text-decoration:none;}
img{display:block;max-width:100%;}

::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px;}

.spinner{
  width:22px;height:22px;
  border:2.5px solid rgba(255,255,255,.15);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══ App Shell ═══════════════════════════════════════════ */
#app{position:fixed;inset:0;overflow:hidden;}
.screen,.overlay-screen{position:absolute;inset:0;background:var(--bg);overflow-y:auto;z-index:10;}
.hidden{display:none!important;}

/* ══ Splash ══════════════════════════════════════════════ */
#splash{
  position:absolute;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  animation:splashOut .4s ease 1.8s forwards;
}
.splash-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 25%,rgba(108,79,255,.2) 0%,transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 85%,rgba(255,45,85,.13) 0%,transparent 60%);
}
.splash-logo{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  animation:splashIn .6s cubic-bezier(.175,.885,.32,1.275) both;
}
.splash-icon{
  width:80px;height:80px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  border-radius:24px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--glow-a2);position:relative;overflow:hidden;
}
.splash-icon::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,transparent 55%);
}
.splash-icon i{font-size:36px;color:#fff;}
.splash-wordmark{
  font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-1px;
}
.splash-wordmark em{
  font-style:normal;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.splash-tagline{font-size:12px;color:var(--text3);letter-spacing:.8px;text-transform:uppercase;}
@keyframes splashIn{from{opacity:0;transform:scale(.72) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes splashOut{to{opacity:0;pointer-events:none}}

/* ══ Auth ════════════════════════════════════════════════ */
#auth-screen{
  display:flex;align-items:flex-end;justify-content:center;
  min-height:100%;overflow-y:auto;
  padding:calc(var(--safe-top) + 20px) 0 calc(var(--safe-bot) + 24px);
}
.auth-bg{
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 80% 55% at 30% 10%,rgba(108,79,255,.17) 0%,transparent 65%),
    radial-gradient(ellipse 60% 45% at 80% 90%,rgba(255,45,85,.11) 0%,transparent 55%),
    var(--bg);
}
.auth-bg::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:28px 28px;
}
.auth-container{position:relative;z-index:2;width:100%;max-width:420px;padding:0 20px;}
.auth-logo{text-align:center;margin-bottom:36px;}
.auth-logo-icon{
  width:64px;height:64px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  border-radius:20px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;box-shadow:var(--glow-a2);
}
.auth-logo-icon i{font-size:28px;color:#fff;}
.auth-logo h1{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.5px;}
.auth-logo h1 em{
  font-style:normal;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.auth-logo p{color:var(--text2);margin-top:6px;font-size:14px;}

.auth-card{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);padding:28px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.06) inset;
}
.auth-card h2{font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:22px;}

.form-group{
  position:relative;margin-bottom:12px;
  background:var(--bg3);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);display:flex;align-items:center;
  padding:0 14px;gap:10px;
  transition:border-color var(--t),box-shadow var(--t);
}
.form-group:focus-within{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(108,79,255,.12);}
.form-group>i{color:var(--text3);font-size:15px;flex-shrink:0;}
.form-group input,.form-group textarea{flex:1;padding:14px 0;font-size:15px;}
.form-group input::placeholder{color:var(--text3);}
.pw-toggle{color:var(--text3);padding:8px 0 8px 8px;}

.btn-primary{
  width:100%;padding:15px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--accent2) 0%,var(--accent) 100%);
  color:#fff;font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:opacity var(--t),transform var(--t);
  margin-top:8px;box-shadow:0 8px 24px rgba(108,79,255,.28);letter-spacing:.2px;
}
.btn-primary:active{opacity:.88;transform:scale(.98);}
.btn-primary:disabled{opacity:.45;pointer-events:none;}

.auth-switch{text-align:center;margin-top:18px;color:var(--text2);font-size:14px;}
.auth-switch a{color:var(--accent2);font-weight:600;}

/* ══ Main App ════════════════════════════════════════════ */
#main-app{position:absolute;inset:0;}

/* Top Nav */
#top-nav{
  position:absolute;top:0;left:0;right:0;
  height:calc(var(--top-h) + var(--safe-top));padding-top:var(--safe-top);
  display:flex;align-items:center;justify-content:space-between;
  padding-left:12px;padding-right:12px;
  z-index:20;
  background:linear-gradient(to bottom,rgba(0,0,0,.78) 0%,transparent 100%);
}
.nav-tabs{display:flex;gap:2px;}
.nav-tab{
  padding:7px 14px;border-radius:99px;font-size:14px;font-weight:500;
  color:rgba(255,255,255,.5);transition:all var(--t);letter-spacing:.2px;
}
.nav-tab.active{color:#fff;background:rgba(255,255,255,.14);font-weight:700;}
.nav-actions{display:flex;gap:6px;}
.nav-actions button{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
}
.notif-btn{position:relative;}
.badge{
  position:absolute;top:0;right:0;
  min-width:16px;height:16px;border-radius:99px;
  background:var(--accent);color:#fff;font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;border:2px solid var(--bg);
}

/* ══ Video Feed ══════════════════════════════════════════ */
#feed-container{
  position:absolute;inset:0;
  overflow-y:scroll;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;
}
#feed-container::-webkit-scrollbar{display:none;}
#video-feed{will-change:transform;}

.video-item{
  position:relative;height:100dvh;width:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#000;
}
.video-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.video-item .video-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s;}

/* Video progress bar */
.video-progress{
  position:absolute;bottom:0;left:0;right:0;z-index:6;
  height:2px;background:rgba(255,255,255,.12);
}
.video-progress-fill{
  height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));
  width:0%;transition:width .25s linear;
}

/* Ad card */
.video-item.ad-card{background:var(--bg2);flex-direction:column;gap:16px;}
.ad-label{
  position:absolute;top:calc(var(--safe-top) + var(--top-h) + 10px);left:14px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  color:var(--text3);font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:99px;border:1px solid var(--border2);
  letter-spacing:.5px;text-transform:uppercase;
}

/* Video overlay */
.video-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.22) 30%,transparent 52%,transparent 72%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

/* Video progress tap area */
.video-item video{cursor:pointer;}

/* Pause indicator */
.pause-indicator{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:8;pointer-events:none;
}
.pause-indicator i{
  font-size:60px;color:rgba(255,255,255,.8);
  opacity:0;transition:opacity .15s;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.video-item.paused .pause-indicator i{opacity:1;}

/* Like animation */
#like-anim{
  position:absolute;top:50%;left:50%;z-index:10;
  transform:translate(-50%,-50%);pointer-events:none;
}
#like-anim i{
  font-size:80px;color:var(--accent);
  filter:drop-shadow(var(--glow-a));
  animation:likeHeart .6s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes likeHeart{
  0%{opacity:0;transform:scale(0) rotate(-10deg)}
  50%{opacity:1;transform:scale(1.25) rotate(5deg)}
  100%{opacity:0;transform:scale(1) rotate(0)}
}

/* Video info */
.video-info{
  position:absolute;
  bottom:calc(var(--nav-h) + var(--safe-bot) + 20px);
  left:16px;right:82px;z-index:5;
}
.video-username{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.video-username .avatar{
  width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.35);box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.video-username .uname{font-size:15px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.verified-badge{color:var(--accent2);font-size:13px;}
.follow-btn-inline{
  margin-left:auto;padding:5px 14px;border-radius:99px;
  border:1.5px solid rgba(255,255,255,.7);color:#fff;font-size:12px;font-weight:700;
  background:transparent;transition:all var(--t);
}
.follow-btn-inline.following{background:rgba(255,255,255,.15);border-color:transparent;}
.video-caption{
  font-size:14px;color:rgba(255,255,255,.92);line-height:1.5;
  max-height:80px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.video-caption .hashtag{color:var(--accent3);font-weight:500;}
.video-sound{
  display:flex;align-items:center;gap:6px;margin-top:8px;
  font-size:12px;color:rgba(255,255,255,.65);
}

/* Video actions sidebar */
.video-actions{
  position:absolute;right:10px;
  bottom:calc(var(--nav-h) + var(--safe-bot) + 24px);
  display:flex;flex-direction:column;align-items:center;gap:22px;z-index:5;
}
.vaction{display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff;}
.vaction-btn{
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
  font-size:22px;color:#fff;
  transition:all var(--t);border:1px solid rgba(255,255,255,.08);
}
.vaction-btn:active{transform:scale(.86);}
.vaction-btn.liked{background:rgba(255,45,85,.25);color:var(--accent);border-color:rgba(255,45,85,.3);box-shadow:var(--glow-a);}
.vaction-btn.saved{color:var(--gold);background:rgba(255,183,0,.15);border-color:rgba(255,183,0,.2);}
.vaction-count{font-size:12px;font-weight:700;color:rgba(255,255,255,.95);text-shadow:0 1px 4px rgba(0,0,0,.6);}

.vaction-avatar-wrap{position:relative;margin-bottom:2px;}
.vaction-avatar{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2.5px solid #fff;box-shadow:0 2px 12px rgba(0,0,0,.4);cursor:pointer;
}
.vaction-follow-dot{
  position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;
  background:var(--accent);border:2px solid #000;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;
}
.vaction-follow-dot.following{background:var(--accent2);}

/* Feed loader */
.feed-loader{display:flex;align-items:center;justify-content:center;padding:32px;}

/* ── Bottom Nav ──────────────────────────────────────── */
#bottom-nav{
  position:absolute;bottom:0;left:0;right:0;
  height:calc(var(--nav-h) + var(--safe-bot));padding-bottom:var(--safe-bot);
  display:flex;align-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 80%,transparent 100%);
  backdrop-filter:blur(2px);z-index:20;
}
.bnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;
  color:rgba(255,255,255,.42);font-size:10px;font-weight:600;
  padding-top:6px;transition:color var(--t);letter-spacing:.4px;text-transform:uppercase;
}
.bnav-item i{font-size:22px;}
.bnav-item.active{color:#fff;}
.bnav-item.active i{filter:drop-shadow(0 0 5px rgba(255,255,255,.35));}
.upload-btn{flex:1;}
.upload-icon{
  width:48px;height:34px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--glow-a2);position:relative;overflow:hidden;
}
.upload-icon::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.25) 0%,transparent 50%);
}
.upload-icon i{font-size:20px;color:#fff;}

/* ══ Overlay Screens ═════════════════════════════════════ */
.overlay-screen{
  z-index:30;background:var(--bg);
  animation:slideInRight .22s cubic-bezier(.4,0,.2,1) both;
  padding-top:var(--safe-top);
}
@keyframes slideInRight{from{transform:translateX(32px);opacity:0}to{transform:translateX(0);opacity:1}}

.overlay-header,.profile-header,.discover-header{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;background:var(--bg);border-bottom:1px solid var(--border);
  font-size:17px;font-weight:700;font-family:var(--font-display);
  position:sticky;top:0;z-index:5;
}
.back-btn{color:var(--text);font-size:20px;padding:4px 8px 4px 0;}
.text-btn{margin-left:auto;color:var(--accent2);font-size:14px;font-weight:600;}

/* Profile */
.profile-header{padding-top:calc(var(--safe-top) + 14px);}
.profile-header .profile-actions-menu{margin-left:auto;font-size:20px;}
.profile-banner{
  height:130px;
  background:linear-gradient(135deg,var(--accent2) 0%,var(--accent) 100%);
  position:relative;overflow:hidden;
}
.profile-banner::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:20px 20px;
}
.profile-avatar-wrap{position:absolute;bottom:-32px;left:16px;}
.profile-avatar{
  width:84px;height:84px;border-radius:50%;object-fit:cover;
  border:3px solid var(--bg);background:var(--surface);box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.profile-info{padding:44px 16px 16px;}
.profile-name{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-size:22px;font-weight:800;
}
.profile-username{color:var(--text2);font-size:14px;margin:4px 0 10px;}
.profile-bio{font-size:14px;line-height:1.6;color:var(--text2);margin-bottom:16px;}
.profile-stats{display:flex;gap:28px;margin-bottom:18px;}
.pstat{display:flex;flex-direction:column;align-items:center;}
.pstat-num{font-size:20px;font-weight:800;font-family:var(--font-display);}
.pstat-label{font-size:11px;color:var(--text2);margin-top:3px;text-transform:uppercase;letter-spacing:.4px;}
.profile-btn-row{display:flex;gap:10px;}
.btn-outline{
  flex:1;padding:11px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border2);font-size:14px;font-weight:600;
  background:transparent;color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all var(--t);
}
.btn-outline:active{background:var(--surface2);}
.btn-outline.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(255,45,85,.3);}
.btn-outline.following{background:var(--surface2);border-color:transparent;}
.profile-tabs{display:flex;border-bottom:1px solid var(--border);margin-top:10px;}
.ptab{flex:1;padding:14px 0;font-size:20px;color:var(--text3);border-bottom:2px solid transparent;transition:all var(--t);}
.ptab.active{color:var(--text);border-color:var(--text);}
.videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.grid-thumb{aspect-ratio:9/16;position:relative;overflow:hidden;background:var(--surface);cursor:pointer;}
.grid-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;will-change:transform;}
.grid-thumb:active img{transform:scale(.95);}
.grid-thumb-play{
  position:absolute;bottom:6px;left:6px;
  display:flex;align-items:center;gap:4px;
  color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.9);
}

/* Search */
.discover-header{gap:10px;}
.search-bar{
  flex:1;background:var(--surface);border:1.5px solid var(--border);
  border-radius:99px;display:flex;align-items:center;padding:9px 14px;gap:8px;
  transition:border-color var(--t);
}
.search-bar:focus-within{border-color:var(--accent2);}
.search-bar i{color:var(--text3);}
.search-bar input{flex:1;font-size:15px;}
#search-clear{color:var(--text3);}
.search-results-section{padding:16px;}
.search-results-title{
  font-size:11px;font-weight:800;color:var(--text3);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;font-family:var(--font-display);
}
.user-result{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;
}
.user-result img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--surface);}
.user-result-info{flex:1;}
.user-result-name{font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px;}
.user-result-uname{color:var(--text2);font-size:13px;margin-top:2px;}
.trending-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:16px;}
.tag-chip{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;
  font-size:14px;cursor:pointer;transition:background var(--t);
}
.tag-chip:active{background:var(--surface2);}
.tag-chip i{color:var(--accent);}
.tag-chip-count{font-size:12px;color:var(--text3);margin-top:1px;}

/* Notifications */
.notif-list{overflow-y:auto;}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);}
.notif-item.unread{background:rgba(108,79,255,.05);}
.notif-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.notif-icon.like{background:rgba(255,45,85,.15);color:var(--accent);}
.notif-icon.comment{background:rgba(0,230,118,.1);color:var(--green);}
.notif-icon.follow{background:rgba(108,79,255,.15);color:var(--accent2);}
.notif-icon.reward{background:rgba(255,183,0,.12);color:var(--gold);}
.notif-icon.system{background:var(--surface2);color:var(--text2);}
.notif-text{flex:1;}
.notif-text strong{font-weight:700;}
.notif-text .notif-time{font-size:12px;color:var(--text3);margin-top:4px;}
.notif-thumb{width:50px;height:50px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;}

/* Upload */
.upload-container{padding:20px;}
.upload-drop-zone{
  border:2px dashed var(--border2);border-radius:var(--radius);
  padding:52px 24px;text-align:center;cursor:pointer;
  position:relative;background:var(--surface);
  transition:border-color .2s,background .2s;
}
.upload-drop-zone:hover{border-color:var(--accent2);background:rgba(108,79,255,.04);}
.upload-drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;}
.upload-drop-zone i{font-size:52px;color:var(--accent2);margin-bottom:16px;display:block;filter:drop-shadow(var(--glow-a2));}
.upload-drop-zone p{font-size:16px;font-weight:700;margin-bottom:6px;}
.upload-drop-zone span{font-size:13px;color:var(--text2);}
.upload-preview{width:100%;max-height:52vh;border-radius:var(--radius);background:#000;object-fit:contain;margin-bottom:16px;}
.upload-form textarea{
  width:100%;background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:14px;font-size:15px;
  resize:none;color:var(--text);min-height:90px;margin-bottom:6px;
  transition:border-color var(--t);
}
.upload-form textarea:focus{border-color:var(--accent2);}
.char-count{text-align:right;font-size:12px;color:var(--text3);margin-bottom:16px;}
.progress-bar{position:relative;height:6px;background:var(--surface);border-radius:99px;overflow:hidden;margin-bottom:20px;}
#progress-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:99px;transition:width .3s;}
#progress-text{position:absolute;top:-22px;right:0;font-size:12px;color:var(--text2);font-weight:600;}

/* Drawers */
.backdrop{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);}
.drawer{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:var(--surface);border-radius:22px 22px 0 0;
  padding-bottom:calc(var(--safe-bot) + 16px);
  animation:slideUp .22s cubic-bezier(.4,0,.2,1) both;
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
}
.drawer-handle{width:36px;height:4px;border-radius:99px;background:var(--surface3);margin:12px auto 0;}
.drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  font-size:16px;font-weight:700;font-family:var(--font-display);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

.comments-list{max-height:55vh;overflow-y:auto;padding:0 16px;}
.comment-item{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid var(--border);}
.comment-item img{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.comment-body{flex:1;}
.comment-username{font-weight:700;font-size:14px;display:flex;align-items:center;gap:5px;}
.comment-text{font-size:14px;line-height:1.5;color:var(--text2);margin-top:3px;}
.comment-time{font-size:11px;color:var(--text3);margin-top:5px;}
.comment-input-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-top:1px solid var(--border);background:var(--surface);
}
.comment-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;}
.comment-input-bar input{
  flex:1;background:var(--bg3);border:1.5px solid var(--border);
  border-radius:99px;padding:10px 16px;font-size:14px;color:var(--text);
  transition:border-color var(--t);
}
.comment-input-bar input:focus{border-color:var(--accent2);}
#comment-send{color:var(--accent);font-size:18px;padding:8px;}

.share-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:16px;}
.share-options button{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 8px;border-radius:var(--radius);
  background:var(--bg3);font-size:12px;color:var(--text2);font-weight:500;
  transition:background var(--t);
}
.share-options button i{font-size:26px;color:var(--text);}
.share-options button:active{background:var(--surface2);}
.share-options button.wa i{color:#25d366;}
.share-options button.tg i{color:#2aabee;}

/* Modals */
.modal{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
}
.modal-card{
  width:100%;max-width:500px;background:var(--surface);
  border-radius:22px 22px 0 0;overflow:hidden;
  max-height:85vh;overflow-y:auto;
  animation:slideUp .22s cubic-bezier(.4,0,.2,1) both;
  padding-bottom:calc(var(--safe-bot) + 16px);
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
  font-size:16px;font-weight:800;font-family:var(--font-display);
  position:sticky;top:0;background:var(--surface);z-index:2;
}
.modal-header i{color:var(--accent2);margin-right:8px;}
.modal-header button{color:var(--text);font-size:18px;}
.modal-body{padding:20px;}
.modal-hint{color:var(--text2);font-size:14px;line-height:1.6;margin-bottom:18px;}

/* Rewards */
.rewards-balance{
  text-align:center;padding:28px 20px 18px;
  position:relative;overflow:hidden;
}
.rewards-balance::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,183,0,.07) 0%,transparent 70%);
}
.rewards-balance .coins-icon{font-size:44px;color:var(--gold);margin-bottom:10px;display:block;filter:drop-shadow(var(--glow-gold));}
.rewards-balance .coins-num{
  font-size:52px;font-weight:800;font-family:var(--font-display);
  background:linear-gradient(135deg,var(--gold),#ff9800);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;
}
.rewards-balance .coins-label{color:var(--text2);font-size:14px;margin-top:6px;letter-spacing:.5px;text-transform:uppercase;}
.daily-card{
  margin:0 16px 16px;
  background:linear-gradient(135deg,rgba(255,183,0,.07),rgba(255,152,0,.04));
  border:1px solid rgba(255,183,0,.18);border-radius:var(--radius);
  padding:18px;display:flex;align-items:center;gap:14px;
}
.daily-card i{font-size:30px;color:var(--gold);filter:drop-shadow(var(--glow-gold));}
.daily-card-info{flex:1;}
.daily-card-info strong{display:block;font-size:16px;font-weight:700;}
.daily-card-info span{font-size:13px;color:var(--text2);}
.claim-btn{
  padding:11px 20px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--gold),#ff9800);
  color:#000;font-weight:800;font-size:14px;
  box-shadow:0 4px 14px rgba(255,183,0,.35);
  transition:opacity var(--t),transform var(--t);
}
.claim-btn:active{opacity:.85;transform:scale(.96);}
.claim-btn:disabled{opacity:.4;box-shadow:none;}

/* Settings */
.settings-list{padding:12px 0;}
.settings-section{margin-bottom:10px;}
.settings-section>label{
  font-size:11px;font-weight:800;color:var(--text3);
  text-transform:uppercase;letter-spacing:1px;
  padding:12px 16px 6px;display:block;font-family:var(--font-display);
}
.settings-row,.toggle-row{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:16px 16px;background:var(--surface);
  border-bottom:1px solid var(--border);
  font-size:15px;text-align:left;color:var(--text);
  transition:background var(--t);
}
.settings-row:active,.toggle-row:active{background:var(--surface2);}
.settings-row i:first-child{color:var(--accent2);font-size:18px;width:22px;text-align:center;}
.settings-row i:last-child{margin-left:auto;color:var(--text3);font-size:14px;}
.settings-row.danger{color:var(--accent);}
.settings-row.danger i:first-child{color:var(--accent);}
.toggle-row .toggle-switch{
  margin-left:auto;width:50px;height:28px;border-radius:99px;
  background:var(--surface3);position:relative;transition:background .2s;flex-shrink:0;
}
.toggle-row .toggle-switch::after{
  content:'';position:absolute;top:3px;left:3px;
  width:22px;height:22px;border-radius:50%;
  background:var(--text3);transition:all .2s;
}
.toggle-row .toggle-switch.active{background:var(--accent2);box-shadow:var(--glow-a2);}
.toggle-row .toggle-switch.active::after{left:calc(100% - 25px);background:#fff;}

/* Toast */
.toast{
  position:fixed;
  bottom:calc(var(--nav-h) + var(--safe-bot) + 16px);
  left:50%;transform:translateX(-50%) translateY(16px);
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text);font-size:14px;font-weight:600;
  padding:12px 22px;border-radius:99px;
  z-index:200;white-space:nowrap;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  opacity:0;transition:opacity var(--t),transform var(--t);pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Skeleton */
.skeleton{
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm);
}
@keyframes shimmer{to{background-position:-200% 0}}

/* Referral */
.referral-card{padding:20px;}
.ref-code-box{
  background:linear-gradient(135deg,rgba(108,79,255,.07),rgba(255,45,85,.04));
  border:1px solid rgba(108,79,255,.18);border-radius:var(--radius);
  padding:22px;text-align:center;margin-bottom:18px;
}
.ref-code{
  font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:6px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.ref-url{font-size:13px;color:var(--text2);margin-top:8px;word-break:break-all;}
.ref-stats{display:flex;gap:12px;margin-bottom:20px;}
.ref-stat{
  flex:1;background:var(--bg3);border-radius:var(--radius);
  padding:16px;text-align:center;border:1px solid var(--border);
}
.ref-stat-num{font-size:28px;font-weight:800;color:var(--gold);font-family:var(--font-display);}
.ref-stat-label{font-size:12px;color:var(--text2);margin-top:4px;text-transform:uppercase;letter-spacing:.5px;}

/* Empty state */
.empty-state{
  padding:64px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.empty-state i{font-size:52px;color:var(--text3);}
.empty-state h3{font-size:20px;font-weight:800;font-family:var(--font-display);}
.empty-state p{font-size:14px;color:var(--text2);line-height:1.6;max-width:260px;}

/* Verified badge */
.verified-badge{display:inline-flex;}
.verified-badge.gold{color:var(--gold)!important;}

/* Responsive */
@media(min-width:600px){
  #feed-container{max-width:390px;margin:0 auto;}
  .video-item{max-width:390px;}
  #bottom-nav{max-width:390px;left:50%;transform:translateX(-50%);}
  #top-nav{max-width:390px;left:50%;transform:translateX(-50%);}
}

/* Animations */
@keyframes coinPop{
  0%{transform:scale(0) rotate(-20deg);opacity:0}
  60%{transform:scale(1.3) rotate(5deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.coin-earned{animation:coinPop .45s cubic-bezier(.175,.885,.32,1.275) both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .3s ease both;}