/* ShortVid — Design System & Global Styles */

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #111118;
    --bg-card: #1a1a2e;
    --bg-elevated: #222240;
    --bg-glass: rgba(18,18,28,0.88);
    --bg-glass-light: rgba(255,255,255,0.06);
    --accent-primary: #e94560;
    --accent-primary-light: #ff6b81;
    --accent-secondary: #4ecdc4;
    --accent-tertiary: #f7d794;
    --accent-gradient: linear-gradient(135deg,#e94560,#c23152);
    --text-primary: #f5f5f7;
    --text-secondary: #a0a0b8;
    --text-tertiary: #6a6a82;
    --border-subtle: rgba(255,255,255,0.06);
    --border-light: rgba(255,255,255,0.12);
    --overlay-dark: rgba(0,0,0,0.6);
    --font-family: 'Inter',-apple-system,system-ui,sans-serif;
    --font-xs: .68rem; --font-sm: .78rem; --font-base: .9rem;
    --font-md: 1.05rem; --font-lg: 1.25rem; --font-xl: 1.5rem;
    --font-2xl: 1.9rem; --font-3xl: 2.4rem;
    --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
    --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
    --radius-xl: 24px; --radius-full: 50%; --radius-pill: 100px;
    --shadow-md: 0 4px 20px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.45);
    --shadow-glow: 0 0 24px rgba(233,69,96,0.35);
    --ease-out: cubic-bezier(0.22,1,0.36,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
    --trans-fast: 150ms var(--ease-out);
    --trans-normal: 300ms var(--ease-out);
    --trans-slow: 500ms var(--ease-out);
    --trans-spring: 400ms var(--ease-spring);
    --header-h: 52px;
    --nav-h: 56px;
    --safe-bottom: env(safe-area-inset-bottom,0px);
    --safe-top: env(safe-area-inset-top,0px);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);line-height:1.55;overflow:hidden;height:100dvh;width:100vw;position:fixed;top:0;left:0;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;overscroll-behavior:none;text-rendering:optimizeLegibility}
a{color:var(--accent-secondary);text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
img,video{display:block;max-width:100%}
::-webkit-scrollbar{width:0;display:none}
*{scrollbar-width:none}

/* Splash */
#splash-screen{position:fixed;inset:0;z-index:9999;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);transition:opacity .6s,visibility .6s}
#splash-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo{font-size:var(--font-3xl);font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:pulse 1.5s ease infinite}
.splash-loader{width:36px;height:36px;border:3px solid var(--border-subtle);border-top-color:var(--accent-primary);border-radius:var(--radius-full);animation:spin .8s linear infinite}

/* App */
#app{height:100dvh;width:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}

/* Header */
#top-bar{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);padding-top:var(--safe-top);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(10,10,15,.9) 0%,rgba(10,10,15,.5) 60%,transparent 100%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
#top-bar>*{pointer-events:auto}
.header-content{width:100%;max-width:600px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-md)}
.logo{font-size:var(--font-lg);font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}
.feed-tabs{display:flex;gap:var(--space-lg)}
.feed-tab{font-size:var(--font-base);font-weight:500;color:var(--text-tertiary);padding:var(--space-sm) 0;position:relative;transition:color var(--trans-fast)}
.feed-tab.active{color:var(--text-primary);font-weight:700}
.feed-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--accent-gradient);border-radius:var(--radius-pill)}
.header-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);transition:background var(--trans-fast)}
.header-btn:active{background:var(--bg-glass-light)}
.header-btn svg{width:22px;height:22px}

/* Bottom Nav */
#bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;height:calc(var(--nav-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:linear-gradient(0deg,rgba(10,10,15,.98) 0%,rgba(10,10,15,.85) 70%,transparent 100%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-around;max-width:600px;margin:0 auto}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-xs) var(--space-md);color:var(--text-tertiary);transition:color var(--trans-fast)}
.nav-item svg{width:24px;height:24px;transition:transform var(--trans-spring)}
.nav-item span{font-size:var(--font-xs);font-weight:500}
.nav-item.active{color:var(--text-primary)}
.nav-item.active svg{transform:scale(1.1)}
.nav-item:active svg{transform:scale(.85)}
.create-btn-icon{width:40px;height:28px;border-radius:var(--radius-sm);background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow);position:relative;overflow:hidden}
.create-btn-icon::before{content:'';position:absolute;left:-2px;top:0;bottom:0;width:28px;background:var(--accent-secondary);border-radius:var(--radius-sm) 0 0 var(--radius-sm);z-index:0}
.create-btn-icon::after{content:'';position:absolute;right:-2px;top:0;bottom:0;width:28px;background:var(--accent-primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;z-index:0}
.create-btn-icon svg{width:20px;height:20px;color:#fff;position:relative;z-index:1}

/* Share Modal */
#share-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--trans-normal),visibility var(--trans-normal)}
#share-modal.active{opacity:1;visibility:visible}
.share-backdrop{position:absolute;inset:0;background:var(--overlay-dark)}
.share-sheet{position:relative;z-index:1;width:100%;max-width:500px;background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-lg);padding-bottom:calc(var(--space-lg) + var(--safe-bottom));transform:translateY(100%);transition:transform var(--trans-slow)}
#share-modal.active .share-sheet{transform:translateY(0)}
.share-handle{width:36px;height:4px;background:var(--border-light);border-radius:var(--radius-pill);margin:0 auto var(--space-lg)}
.share-title{font-size:var(--font-md);font-weight:700;text-align:center;margin-bottom:var(--space-lg)}
.share-options{display:flex;justify-content:space-around;gap:var(--space-md);margin-bottom:var(--space-lg)}
.share-option{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-sm)}
.share-option-icon{width:52px;height:52px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform var(--trans-spring)}
.share-option:active .share-option-icon{transform:scale(.9)}
.share-option-icon.whatsapp{background:#25D366}
.share-option-icon.twitter{background:#1DA1F2}
.share-option-icon.facebook{background:#1877F2}
.share-option-icon.copy{background:var(--bg-elevated);border:1px solid var(--border-light)}
.share-option span{font-size:var(--font-xs);color:var(--text-secondary)}
.share-link-box{display:flex;align-items:center;gap:var(--space-sm);background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);border:1px solid var(--border-subtle)}
.share-link-box input{flex:1;background:none;border:none;color:var(--text-secondary);font-size:var(--font-sm);font-family:inherit;outline:none}
.share-copy-btn{padding:var(--space-xs) var(--space-md);background:var(--accent-gradient);color:#fff;font-size:var(--font-sm);font-weight:600;border-radius:var(--radius-sm)}

/* Toast */
.toast{position:fixed;bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px);left:50%;transform:translateX(-50%) translateY(100px);background:var(--bg-elevated);color:var(--text-primary);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-pill);font-size:var(--font-sm);font-weight:500;box-shadow:var(--shadow-lg);border:1px solid var(--border-light);z-index:600;opacity:0;transition:transform var(--trans-spring),opacity var(--trans-normal);white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Desktop */
@media(min-width:768px){
    #bottom-nav{display:none}
    #top-bar{background:rgba(10,10,15,.95)}
}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes heartBurst{0%{transform:scale(0);opacity:1}50%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-80px) scale(1.5)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}