/* =============================================
   ALIXPLOSE — Ultra Premium Instagram Clone
   ============================================= */

:root {
    --bg: #000;
    --bg2: #0a0a0a;
    --surface: #121212;
    --card: #1c1c1e;
    --border: #2c2c2e;
    --sep: #38383a;
    --t1: #F5F5F5;
    --t2: #8E8E93;
    --t3: #636366;
    --blue: #0095F6;
    --blue2: #1877F2;
    --red: #ED4956;
    --green: #58C322;
    --story-grad: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
    --ig-grad: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius: 4px;
}

/* Reset + App behavior */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; overscroll-behavior:none; height:100%; }
body {
    font-family:var(--font); background:var(--bg); color:var(--t1);
    font-size:14px; line-height:18px; -webkit-font-smoothing:antialiased;
    overflow-x:hidden; -webkit-user-select:none; user-select:none;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
}
input, textarea, select { -webkit-user-select:text; user-select:text; font-family:var(--font); }
a { text-decoration:none; color:inherit; }
button { font-family:var(--font); cursor:pointer; background:none; border:none; color:inherit; -webkit-user-select:none; }

/* ── Shell ──────────────────────────────── */
.shell { max-width:470px; margin:0 auto; min-height:100vh; padding-top:54px; padding-bottom:50px; position:relative; }

/* ── Topbar ─────────────────────────────── */
.topbar {
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:470px; height:54px;
    background:rgba(0,0,0,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; z-index:500;
}
.topbar-logo { display:flex; align-items:center; gap:8px; }
.topbar-logo-text { font-family:'Grand Hotel',cursive; font-size:26px; color:#fff; line-height:1; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-right svg { cursor:pointer; transition:opacity .15s; }
.topbar-right svg:active { opacity:.5; }

/* ── Stories ─────────────────────────────── */
.stories {
    display:flex; gap:14px; padding:14px 16px; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.stories::-webkit-scrollbar { display:none; }
.story-item { flex-shrink:0; width:64px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
.story-item:active { transform:scale(.95); }
.story-ring {
    width:60px; height:60px; border-radius:50%;
    background:var(--story-grad); display:flex; align-items:center; justify-content:center;
    padding:2.5px; transition:transform .15s;
}
.story-ring-inner {
    width:100%; height:100%; border-radius:50%; background:var(--bg);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.story-ring-inner span { font-size:24px; line-height:1; }
.story-name { font-size:11px; color:var(--t2); max-width:64px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Post ────────────────────────────────── */
.post { margin-bottom:16px; }

.post-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; }
.post-head-left { display:flex; align-items:center; gap:10px; }
.avatar-ring { width:32px; height:32px; border-radius:50%; padding:1.5px; background:var(--story-grad); flex-shrink:0; }
.avatar-ring img { width:100%; height:100%; border-radius:50%; border:2px solid var(--bg); object-fit:cover; display:block; }
.avatar-ring-plain { background:var(--sep); }
.post-meta { display:flex; flex-direction:column; }
.post-meta .username { font-weight:600; font-size:13px; display:flex; align-items:center; gap:4px; letter-spacing:-.01em; }
.post-meta .location { font-size:11px; color:var(--t2); font-weight:400; margin-top:1px; }
.verified svg { width:12px; height:12px; fill:var(--blue); vertical-align:middle; }
.post-more { padding:8px; }

/* Media / Carousel */
.post-media-wrap { position:relative; width:100%; background:var(--bg2); overflow:hidden; border-radius:var(--radius); }
.carousel-track { display:flex; transition:transform .35s cubic-bezier(.25,.46,.45,.94); will-change:transform; }
.carousel-slide { min-width:100%; position:relative; }
.carousel-slide img, .carousel-slide video { width:100%; display:block; max-height:580px; object-fit:cover; }

/* Lazy load */
.carousel-slide img { background:var(--surface); }
.carousel-slide img.loading { opacity:0; transition:opacity .4s ease; }
.carousel-slide img.loaded { opacity:1; }

.carousel-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:50%;
    background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer; z-index:10;
    transition:background .15s, opacity .15s; opacity:.7;
}
.carousel-arrow:hover { opacity:1; background:rgba(0,0,0,.85); }
.carousel-arrow.left { left:8px; }
.carousel-arrow.right { right:8px; }
.carousel-dots { display:flex; gap:4px; }
.carousel-dot { width:6px; height:6px; border-radius:50%; background:var(--sep); transition:all .25s; }
.carousel-dot.active { background:var(--blue); transform:scale(1.3); }

/* Double-tap heart */
.dbl-heart { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); font-size:80px; pointer-events:none; z-index:20; animation:dblH .8s ease forwards; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
@keyframes dblH { 0%{transform:translate(-50%,-50%) scale(0);opacity:1} 15%{transform:translate(-50%,-50%) scale(1.2);opacity:1} 30%{transform:translate(-50%,-50%) scale(1);opacity:1} 75%{opacity:1} 100%{transform:translate(-50%,-50%) scale(0);opacity:0} }

/* Actions */
.post-actions { display:flex; justify-content:space-between; align-items:center; padding:8px 14px 0; }
.post-actions-left { display:flex; gap:16px; }
.act-btn { padding:6px 0; display:flex; align-items:center; transition:transform .1s; }
.act-btn:active { transform:scale(.85); }
.act-btn svg { width:24px; height:24px; }
.act-btn.liked svg { color:var(--red); fill:var(--red); animation:likeS .4s cubic-bezier(.17,.67,.83,.67); }
@keyframes likeS { 0%{transform:scale(1)} 25%{transform:scale(1.3)} 50%{transform:scale(.9)} 100%{transform:scale(1)} }

/* Post Info */
.post-info { padding:2px 14px 8px; }
.post-likes { font-weight:600; font-size:14px; margin-bottom:4px; }
.post-caption { margin-bottom:4px; line-height:20px; font-size:14px; }
.post-caption b { font-weight:600; margin-right:4px; }
.post-view-comments { color:var(--t2); margin-bottom:4px; cursor:pointer; font-size:14px; }
.comment-row { display:flex; gap:4px; margin-bottom:3px; line-height:18px; font-size:13px; align-items:baseline; }
.comment-row b { font-weight:600; flex-shrink:0; font-size:13px; }
.post-time { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-top:6px; }

/* Comment bar */
.comment-bar { display:flex; align-items:center; padding:10px 14px; gap:10px; }
.comment-bar .smiley { flex-shrink:0; color:var(--t2); }
.comment-bar .smiley svg { width:22px; height:22px; }
.comment-bar input { flex:1; background:transparent; border:none; color:var(--t1); font-size:13px; outline:none; min-width:0; }
.comment-bar input::placeholder { color:var(--t3); }
.comment-bar .send-btn { color:var(--blue); font-weight:600; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s; white-space:nowrap; }
.comment-bar .send-btn.vis { opacity:1; pointer-events:auto; }

/* Admin moderation */
.del-btn { color:var(--t3); font-size:11px; cursor:pointer; margin-left:auto; padding:2px 6px; border-radius:4px; transition:all .15s; }
.del-btn:hover { color:var(--red); background:rgba(237,73,86,.1); }
.del-post-btn { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.6); color:#fff; border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; z-index:5; backdrop-filter:blur(6px); transition:background .15s; }
.del-post-btn:hover { background:var(--red); }

/* ── Bottom Nav ──────────────────────────── */
.bottomnav {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:470px; height:50px;
    background:rgba(0,0,0,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    display:flex; justify-content:space-around; align-items:center; z-index:500;
}
.bottomnav button { display:flex; align-items:center; justify-content:center; padding:10px; transition:transform .1s; }
.bottomnav button:active { transform:scale(.85); }
.bottomnav svg { width:24px; height:24px; }

/* ── Story Viewer ────────────────────────── */
.story-viewer { position:fixed; inset:0; background:#000; z-index:9000; display:none; flex-direction:column; }
.story-viewer.open { display:flex; }
.sv-top { position:absolute; top:0; left:0; width:100%; padding:10px 16px 24px; z-index:9001; background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,transparent 100%); }
.sv-progress { display:flex; gap:3px; margin-bottom:12px; }
.sv-bar { flex:1; height:2px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden; }
.sv-bar-fill { height:100%; background:#fff; width:0%; transition:width 50ms linear; }
.sv-user { display:flex; align-items:center; gap:8px; }
.sv-user .name { font-weight:600; font-size:13px; }
.sv-user .ago { color:rgba(255,255,255,.55); font-size:13px; }
.sv-close { position:absolute; top:14px; right:16px; color:#fff; font-size:26px; cursor:pointer; z-index:9002; line-height:1; }
.sv-body { flex:1; display:flex; align-items:center; justify-content:center; }
.sv-body img, .sv-body video { width:100%; height:100vh; object-fit:cover; }
.sv-del { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); background:rgba(237,73,86,.85); color:#fff; border:none; padding:10px 24px; border-radius:20px; font-size:13px; font-weight:600; z-index:9002; cursor:pointer; backdrop-filter:blur(4px); }

/* ── DM / Livre d'or ─────────────────────── */
.tab-dm { display:none; }
.dm-inbox-header { padding:16px; font-weight:700; font-size:18px; }
.dm-thread-list { }
.dm-thread-row { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; transition:background .12s; }
.dm-thread-row:active { background:var(--card); }
.dm-thread-avatar { width:50px; height:50px; border-radius:50%; background:var(--sep); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:600; flex-shrink:0; color:#fff; }
.dm-thread-info { flex:1; min-width:0; }
.dm-thread-info .name { font-weight:600; font-size:14px; margin-bottom:2px; }
.dm-thread-info .preview { color:var(--t2); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-thread-row.blurred .dm-thread-info .preview { filter:blur(5px); }
.dm-convo .msg-bubble.blurred { filter:blur(6px); pointer-events:none; }

.dm-convo { display:none; flex-direction:column; height:calc(100vh - 104px); }
.dm-convo-header { display:flex; align-items:center; gap:14px; padding:12px 16px; }
.dm-convo-header .back-btn { font-size:22px; cursor:pointer; padding:4px; }
.dm-convo-header .convo-name { font-weight:700; font-size:16px; }
.dm-convo-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:6px; }
.msg-bubble { max-width:72%; padding:10px 14px; border-radius:18px; font-size:14px; line-height:20px; word-wrap:break-word; }
.msg-in { background:var(--card); align-self:flex-start; border-bottom-left-radius:4px; }
.msg-out { background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg-time { font-size:10px; color:var(--t3); margin-top:1px; }
.msg-time-out { text-align:right; }
.dm-convo-input { display:flex; align-items:center; gap:10px; padding:10px 16px; }
.dm-convo-input input { flex:1; background:var(--card); border:1px solid var(--sep); color:var(--t1); padding:10px 16px; border-radius:22px; font-size:14px; outline:none; transition:border-color .2s; }
.dm-convo-input input:focus { border-color:var(--t2); }
.dm-convo-input input::placeholder { color:var(--t3); }
.dm-convo-input button { color:var(--blue); font-weight:600; font-size:14px; }

/* ── Modals (shared) ─────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:8000; display:none; align-items:flex-end; justify-content:center; backdrop-filter:blur(6px); }
.modal-overlay.open { display:flex; }
.modal-sheet {
    background:var(--surface); border-radius:16px 16px 0 0;
    width:100%; max-width:470px; max-height:85vh; overflow-y:auto;
    padding:20px 20px 32px; animation:sheetUp .3s cubic-bezier(.32,.72,.24,1);
}
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-sheet h3 { font-size:16px; font-weight:700; text-align:center; margin-bottom:20px; }
.modal-sheet .field { margin-bottom:16px; }
.modal-sheet .field label { display:block; font-size:12px; font-weight:600; margin-bottom:6px; color:var(--t2); text-transform:uppercase; letter-spacing:.5px; }
.modal-sheet .field input, .modal-sheet .field select, .modal-sheet .field textarea {
    width:100%; background:var(--card); border:1px solid var(--sep); border-radius:10px;
    padding:12px 14px; color:var(--t1); font-size:14px; outline:none; transition:border-color .2s;
}
.modal-sheet .field input:focus, .modal-sheet .field select:focus, .modal-sheet .field textarea:focus { border-color:var(--blue); }
.modal-sheet .field textarea { resize:vertical; min-height:60px; }
.modal-sheet .preview-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.modal-sheet .preview-thumb { width:64px; height:64px; border-radius:10px; object-fit:cover; border:1px solid var(--sep); }
.btn-primary { width:100%; background:var(--blue); color:#fff; border:none; border-radius:10px; padding:14px; font-weight:600; font-size:15px; cursor:pointer; transition:all .15s; }
.btn-primary:hover { background:var(--blue2); }
.btn-primary:disabled { opacity:.5; }
.btn-ghost { width:100%; background:transparent; color:var(--t2); border:none; padding:12px; font-size:14px; cursor:pointer; }
.btn-danger { background:var(--red); }

/* Admin login (discreet) */
.admin-link { color:var(--t3); font-size:11px; cursor:pointer; opacity:.4; transition:opacity .2s; padding:4px; }
.admin-link:hover { opacity:1; }
.login-modal .modal-sheet { max-width:360px; border-radius:16px; margin:auto; }

/* ── Entry Modal ─────────────────────────── */
.entry-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.95);
    display:flex; justify-content:center; align-items:center; z-index:10000;
    backdrop-filter:blur(12px);
}
.entry-box {
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:36px 28px; text-align:center; width:90%; max-width:340px;
    animation:fadeIn .4s ease;
}
@keyframes fadeIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.entry-box h2 { font-family:'Grand Hotel',cursive; font-size:36px; margin-bottom:6px; }
.entry-box p { color:var(--t2); margin-bottom:24px; font-size:14px; line-height:20px; }
.entry-box input { width:100%; background:var(--card); border:1px solid var(--sep); border-radius:8px; padding:12px 14px; margin-bottom:14px; font-size:14px; color:var(--t1); outline:none; }
.entry-box input:focus { border-color:var(--blue); }
.entry-box button { width:100%; background:var(--blue); color:#fff; border-radius:10px; padding:12px; font-weight:600; font-size:15px; }

/* ── Admin Panel ─────────────────────────── */
.admin-page { min-height:100vh; background:var(--bg); }
.admin-shell { max-width:470px; margin:0 auto; padding:20px 16px; }
.admin-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; margin-bottom:16px; }
.admin-card h2 { font-family:'Grand Hotel',cursive; font-size:32px; text-align:center; margin-bottom:20px; }
.admin-card h3 { font-size:16px; margin-bottom:16px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; color:var(--t1); }
.field input, .field select, .field textarea { width:100%; background:var(--surface); border:1px solid var(--sep); border-radius:8px; padding:10px 12px; color:var(--t1); font-size:14px; outline:none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--blue); }
.field textarea { resize:vertical; min-height:80px; }
.error-msg { color:var(--red); font-size:13px; text-align:center; margin-bottom:12px; }
.link-secondary { display:block; text-align:center; color:var(--blue); font-weight:600; font-size:14px; margin-top:16px; }
.upload-loader { display:none; text-align:center; padding:20px 0; }
.upload-loader svg { animation:qSpin 1.5s cubic-bezier(.68,-.55,.265,1.55) infinite; }
@keyframes qSpin { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.15)} 100%{transform:rotate(360deg) scale(1)} }
.upload-loader p { color:var(--t2); font-size:14px; margin-top:12px; }

/* Empty state */
.empty-state { text-align:center; padding:80px 20px; color:var(--t3); }
.empty-state .icon { font-size:56px; margin-bottom:16px; }
.empty-state p { font-size:14px; line-height:22px; }