:root {
    --bg: #ffffff;
    --text: #000000;
    --grey-btn: #efefef;
    --border: #dbdbdb;
    --blue: #0095f6;
    --blue-glow: rgba(0, 149, 246, 0.5);
    --red: #ed4956;
}

* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    font-weight: 600; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}

body { background: var(--bg); color: var(--text); overflow: hidden; height: 100vh; width: 100vw; user-select: none; }

/* LAYOUT */
.scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.scroll-area::-webkit-scrollbar { display: none; }
.app-screen { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 60px); background: var(--bg); display: none; flex-direction: column; }
.active-screen { display: flex; z-index: 10; }
.sub-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); z-index: 200; transform: translateX(100%); transition: transform 0.3s; display: flex; flex-direction: column; }
.slide-right { transform: translateX(100%); display: flex; transition: transform 0.3s; z-index: 50; }
.slide-active { transform: translateX(0); }

/* AUTH */
.full-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:var(--bg); z-index:500; display:flex; justify-content:center; align-items:center; }
.auth-container { width: 350px; max-width: 90%; text-align: center; }
.insta-logo { font-family: cursive; font-size: 48px; margin-bottom: 40px; }
.auth-input { width: 100%; padding: 12px; background: #fafafa; border: 1px solid var(--border); border-radius: 5px; margin-bottom: 10px; font-size: 14px; outline: none; }
.btn-primary-auth { width: 100%; background: var(--blue); color: white; border: none; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 10px; }
.switch-text { font-size: 14px; margin-top: 20px; color: #737373; }
.switch-text span { color: var(--blue); cursor: pointer; }

/* HEADER */
.top-header { height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; background: var(--bg); border-bottom: 1px solid #efefef; flex-shrink: 0; }
.logo-text { font-family: cursive; font-size: 28px; }
.header-title { font-size: 18px; font-weight: 700; }

/* BOTTOM NAV */
.bottom-nav { 
    height: 60px; background: var(--bg); border-top: 1px solid #efefef; 
    display: flex; justify-content: space-around; align-items: center; 
    position: fixed; bottom: 0; width: 100%; z-index: 100;
}
.nav-icon { font-size: 28px; color: #000; cursor: pointer; opacity: 0.5; transition: 0.2s; }
.active-nav { opacity: 1; transform: scale(1.1); }
#nav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #dbdbdb; cursor: pointer; }

/* GLOWING CHAT BUTTON */
.glow-chat-btn {
    background: var(--blue); width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 15px var(--blue-glow); cursor: pointer;
    animation: pulse 2s infinite;
}
.glow-chat-btn i { color: white; font-size: 24px; }
@keyframes pulse { 0% { box-shadow: 0 0 10px var(--blue-glow); } 50% { box-shadow: 0 0 20px var(--blue-glow); } 100% { box-shadow: 0 0 10px var(--blue-glow); } }

/* POSTS */
.post { margin-bottom: 10px; }
.post-header { display: flex; align-items: center; padding: 10px; gap: 10px; }
.post-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; }
.post-username { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.post-media { width: 100%; background: #efefef; display: flex; align-items: center; justify-content: center; position: relative; }
.post-media img, .post-media video { width: 100%; display: block; object-fit: cover; max-height: 500px; }
.post-actions { padding: 10px; display: flex; gap: 16px; font-size: 26px; }
.post-likes { padding: 0 10px; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.post-caption { padding: 0 10px 10px; font-size: 14px; }
.post-caption b { font-weight: 700; margin-right: 5px; }
.heart-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); color: white; font-size: 90px; pointer-events: none; opacity: 0; transition: transform 0.2s, opacity 0.2s; text-shadow: 0 0 10px rgba(0,0,0,0.3); }
.heart-animate { animation: likeBounce 0.8s ease-in-out; }
@keyframes likeBounce { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); } }

/* PROFILE */
.profile-header { padding: 20px; }
.profile-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
#profile-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 1px solid #dbdbdb; }
.profile-stats { display: flex; gap: 20px; text-align: center; flex: 1; justify-content: space-around; }
.stat b { font-size: 18px; font-weight: 700; display: block; }
.stat span { font-size: 13px; color: #000; }
.profile-actions { display: flex; gap: 8px; margin-top: 15px; }
.profile-btn { flex: 1; background: var(--grey-btn); border-radius: 8px; padding: 8px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; color: black; }
.blue-btn { background: var(--blue); color: white; }
.red-text { color: var(--red); }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 15px; }
.grid-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

/* CHAT */
.search-bar { background: var(--grey-btn); border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; margin: 10px 15px; }
.search-bar input { border: none; background: transparent; outline: none; width: 100%; font-size: 16px; }
.user-row { display: flex; align-items: center; padding: 12px 15px; gap: 15px; }
.user-row img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.chat-user-header { display: flex; align-items: center; gap: 10px; }
.chat-user-header img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.chat-bg { background: white; padding: 15px; display: flex; flex-direction: column; gap: 5px; }
.msg-bubble { max-width: 70%; padding: 10px 14px; border-radius: 20px; font-size: 15px; line-height: 1.4; word-wrap: break-word; }
.msg-mine { align-self: flex-end; background: var(--blue); color: white; border-bottom-right-radius: 4px; }
.msg-theirs { align-self: flex-start; background: #efefef; color: black; border-bottom-left-radius: 4px; }
.chat-input-wrapper { padding: 10px 16px; display: flex; align-items: center; }
.chat-pill { flex: 1; background: #efefef; border-radius: 25px; padding: 10px 15px; display: flex; align-items: center; gap: 10px; }
.chat-pill input { flex: 1; background: transparent; border: none; outline: none; font-size: 15px; }

/* MODALS */
.modal-sheet { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 300; align-items: flex-end; }
.sheet-content { background: white; width: 100%; height: 70%; border-top-left-radius: 15px; border-top-right-radius: 15px; display: flex; flex-direction: column; }
.sheet-header { padding: 15px; text-align: center; font-weight: 700; border-bottom: 1px solid #efefef; position: relative; }
.sheet-header i { position: absolute; right: 15px; font-size: 24px; cursor: pointer; }
.comment-row { display: flex; gap: 12px; margin-bottom: 16px; font-size: 14px; padding: 0 15px; }
.comment-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.comment-input-area { padding: 12px 16px; border-top: 1px solid #efefef; display: flex; align-items: center; gap: 10px; }
.comment-input-area img { width: 32px; height: 32px; border-radius: 50%; }
.comment-input-area input { flex: 1; border: none; outline: none; font-size: 14px; }
.modern-input { width: 100%; border: none; border-bottom: 1px solid #dbdbdb; padding: 10px 0; font-size: 16px; margin-bottom: 15px; outline: none; }
.loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-weight: 600; }
.spinner { width: 30px; height: 30px; border: 3px solid #fff; border-top: 3px solid transparent; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }