*{box-sizing:border-box}
body{margin:0;background:#fafafa;color:#262626;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:#0095f6;text-decoration:none}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid #dbdbdb;padding:24px 18px}
.logo{margin-bottom:18px}.logo-full{max-width:185px}.logo-icon{display:none;width:42px}
.nav a{display:block;color:#262626;padding:13px;border-radius:12px;font-size:17px;margin:4px 0;font-weight:600}
.nav a:hover{background:#f2f2f2}
.main{max-width:980px;width:100%;margin:0 auto;padding:24px}
.card{background:#fff;border:1px solid #dbdbdb;border-radius:14px;margin-bottom:20px;overflow:hidden}
.card-pad{padding:18px}
.feed{max-width:620px;margin:auto}
.post-head{display:flex;align-items:center;gap:10px;padding:12px}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#ddd}
.avatar.big{width:120px;height:120px}
.post-media{width:100%;max-height:720px;object-fit:cover;background:#000;display:block}
.actions{padding:12px;display:flex;gap:18px;font-weight:700}
.caption{padding:0 12px 12px}.muted{color:#737373}
.input,textarea,select{width:100%;border:1px solid #dbdbdb;background:#fafafa;border-radius:8px;padding:12px;margin:7px 0;font:inherit}
.btn{border:0;background:#0095f6;color:#fff;border-radius:9px;padding:10px 15px;font-weight:700;cursor:pointer;display:inline-block}
.btn.red{background:#ef4444}.btn.gray{background:#e5e7eb;color:#111}.btn.green{background:#16a34a}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px}.grid img,.grid video{width:100%;height:260px;object-fit:cover;background:#000}
.profile-head{display:flex;gap:35px;align-items:center;margin-bottom:30px}
.stats{display:flex;gap:20px}.story-row{display:flex;gap:12px;overflow:auto;padding:12px}.story-bubble{min-width:82px;text-align:center}.story-ring{width:66px;height:66px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);margin:auto}.story-ring img{width:100%;height:100%;border-radius:50%;border:3px solid white;object-fit:cover}
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}.story-card video{width:100%;height:440px;object-fit:cover;background:#000}
.login-page{min-height:calc(100vh - 90px);display:flex;align-items:center;justify-content:center;gap:36px;padding:34px 18px}
.phone-preview{display:flex}.phone{width:310px;height:610px;border:14px solid #111;border-radius:42px;background:#fff;box-shadow:0 18px 45px rgba(0,0,0,.20);overflow:hidden;position:relative}
.phone:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:92px;height:22px;background:#111;border-radius:0 0 18px 18px;z-index:2}.phone-top{height:54px;background:linear-gradient(135deg,#ff0069,#ff7a00,#7928ca)}
.mock-feed{padding:18px}.story-mock{display:flex;gap:10px;margin-bottom:18px}.story-mock span{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#ff0069,#ff7a00,#7928ca);display:block}.mock-post{height:270px;border-radius:16px;background:linear-gradient(135deg,#dbeafe,#fce7f3,#fed7aa);margin-bottom:14px}
.login-side{width:350px}.login-card,.signup-card{background:#fff;border:1px solid #dbdbdb;padding:28px 40px;text-align:center;margin-bottom:10px}
.brand-icon{width:58px;height:58px;margin:0 auto 8px;border-radius:18px;display:grid;place-items:center;color:#fff;font-size:36px;font-weight:900;background:radial-gradient(circle at 30% 110%,#ffdc80 0,#fcaf45 25%,#f77737 45%,#fd1d1d 60%,#c13584 75%,#833ab4 100%)}
.login-card h1{font-size:38px;font-family:Georgia,"Times New Roman",serif}.divider{display:flex;align-items:center;gap:16px;margin:20px 0;color:#737373;font-size:13px}.divider span{height:1px;background:#dbdbdb;flex:1}
.error{background:#fff1f2;border:1px solid #fecdd3;color:#be123c;padding:10px;border-radius:8px;font-size:13px;margin-bottom:12px}
.message{padding:10px 14px;border-radius:18px;margin:8px 0;max-width:75%}.mine{background:#0095f6;color:white;margin-left:auto}.theirs{background:#efefef}
.admin-table{width:100%;border-collapse:collapse}.admin-table td,.admin-table th{border-bottom:1px solid #eee;padding:10px;text-align:left}

.stay-login{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-start;
    font-size:13px;
    color:#555;
    margin:8px 0 10px;
}

.stay-login input{
    width:auto;
    height:auto;
    margin:0;
}

.site-footer{
    margin-top:50px;
    padding:30px 20px;
    border-top:1px solid #dbdbdb;
    text-align:center;
    background:#fafafa;
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
    margin-bottom:15px;
}

.footer-links a{
    color:#737373;
    text-decoration:none;
    font-size:14px;
}

.footer-links a:hover{
    color:#0095f6;
}

.footer-company{
    font-size:14px;
    color:#555;
    margin-bottom:8px;
    font-weight:600;
}

.footer-copy{
    font-size:12px;
    color:#999;
}

.info-page{
    max-width:850px;
    margin:0 auto;
}

.info-page h1{
    margin-top:0;
}

.info-page h2{
    margin-top:26px;
}

.info-page ul{
    line-height:1.8;
}

/* FIXED DESKTOP + MOBILE LAYOUT */

html,
body{
    min-height:100%;
}

.app{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    min-height:100vh;
}

.sidebar{
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    background:#fff;
    border-right:1px solid #dbdbdb;
    padding:24px 18px;
}

.sidebar .nav a{
    padding:10px 13px;
    font-size:15px;
}

.splash-brand{
    margin-top:15px;
    padding-bottom:20px;
}

.main{
    width:100%;
    max-width:980px;
    margin:0 auto;
    padding:24px;
    min-height:100vh;
}

.site-footer{
    margin-left:250px;
    margin-top:0;
    padding:30px 20px;
    border-top:1px solid #dbdbdb;
    text-align:center;
    background:#fafafa;
    clear:both;
}

@media(max-width:800px){
    .app{
        display:block;
        min-height:100vh;
    }

    .sidebar{
        position:fixed;
        bottom:0;
        top:auto;
        left:0;
        right:0;
        width:100%;
        height:auto;
        max-height:none;
        overflow-x:auto;
        overflow-y:hidden;
        z-index:20;
        padding:6px;
        border-right:0;
        border-top:1px solid #dbdbdb;
    }

    .nav{
        display:flex;
        justify-content:space-around;
        gap:4px;
    }

    .nav a span,
    .logo,
    .splash-brand{
        display:none;
    }

    .main{
        max-width:100%;
        padding:16px;
        padding-bottom:100px;
        min-height:100vh;
    }

    .phone-preview{
        display:none;
    }

    .site-footer{
        margin-left:0;
        padding-bottom:100px;
    }
}
body{
    background:linear-gradient(to right, #fff 0, #fff 250px, #fafafa 250px, #fafafa 100%);
}

.sidebar{
    min-height:100vh;
    height:100vh;
}
/* Make sidebar background continue behind footer */
body.dark-mode{
    background:linear-gradient(
        to right,
        #111 0,
        #111 250px,
        #050505 250px,
        #050505 100%
    );
}

body.light-mode{
    background:linear-gradient(
        to right,
        #fff 0,
        #fff 250px,
        #fafafa 250px,
        #fafafa 100%
    );
}

.sidebar{
    background:transparent !important;
}

@media(max-width:800px){
    body.dark-mode,
    body.light-mode{
        background:#050505;
    }

    .sidebar{
        background:#111 !important;
    }
}
/* FINAL SIDEBAR FIX - no scroll menu */

.app{
    display:block !important;
    min-height:100vh;
}

.sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:250px !important;
    height:100vh !important;
    min-height:100vh !important;
    overflow:hidden !important;
    padding:14px 12px !important;
    background:#111 !important;
    border-right:1px solid #333 !important;
    z-index:100;
}

.main{
    margin-left:250px !important;
    max-width:none !important;
    width:auto !important;
    padding:24px !important;
    min-height:calc(100vh - 150px);
}

.site-footer{
    margin-left:250px !important;
}

.logo{
    margin-bottom:8px !important;
}

.logo-full{
    max-width:160px !important;
}

.nav a{
    padding:6px 10px !important;
    font-size:14px !important;
    margin:1px 0 !important;
    line-height:1.2 !important;
}

.splash-brand{
    font-size:11px !important;
    margin-top:8px !important;
    padding-bottom:0 !important;
}

@media(max-width:800px){
    .sidebar{
        position:fixed !important;
        top:auto !important;
        bottom:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        height:auto !important;
        min-height:auto !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding:6px !important;
    }

    .main{
        margin-left:0 !important;
        padding-bottom:100px !important;
    }

    .site-footer{
        margin-left:0 !important;
        padding-bottom:100px !important;
    }

    .nav{
        display:flex !important;
        gap:4px !important;
    }

    .nav a span,
    .logo,
    .splash-brand{
        display:none !important;
    }
}
/* TRUE FIX: fixed sidebar + content offset */

.app{
    display:block !important;
    min-height:100vh !important;
}

.sidebar{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:250px !important;
    height:100vh !important;
    overflow:visible !important;
    padding:8px 10px !important;
    background:#111 !important;
    border-right:1px solid #333 !important;
    z-index:9999 !important;
}

.main{
    margin-left:250px !important;
    max-width:none !important;
    width:auto !important;
    min-height:100vh !important;
    padding:24px !important;
}

.site-footer{
    margin-left:250px !important;
    width:auto !important;
}

.logo{
    margin-bottom:4px !important;
}

.logo-full{
    max-width:130px !important;
}

.nav a{
    padding:4px 8px !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.15 !important;
}

.splash-brand{
    display:none !important;
}
/* MOBILE FIX */

@media(max-width:800px){
    .app{
        display:block !important;
    }

    .sidebar{
        position:fixed !important;
        top:auto !important;
        bottom:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        height:64px !important;
        min-height:64px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding:6px !important;
        background:#111 !important;
        border-top:1px solid #333 !important;
        border-right:0 !important;
        z-index:9999 !important;
    }

    .nav{
        display:flex !important;
        gap:8px !important;
        align-items:center !important;
        justify-content:flex-start !important;
        white-space:nowrap !important;
    }

    .nav a{
        min-width:50px !important;
        padding:8px 10px !important;
        font-size:20px !important;
        margin:0 !important;
        text-align:center !important;
    }

    .nav a span,
    .logo,
    .splash-brand{
        display:none !important;
    }

    .main{
        margin-left:0 !important;
        max-width:100% !important;
        width:100% !important;
        padding:14px !important;
        padding-bottom:90px !important;
    }

    .site-footer{
        margin-left:0 !important;
        padding-bottom:90px !important;
    }

    .feed{
        max-width:100% !important;
    }

    .profile-head{
        display:block !important;
        text-align:center !important;
    }

    .stats{
        justify-content:center !important;
        flex-wrap:wrap !important;
    }

    .grid{
        grid-template-columns:repeat(3, 1fr) !important;
    }

    .grid img,
    .grid video{
        height:130px !important;
    }

    .phone-preview{
        display:none !important;
    }

    .login-side{
        width:100% !important;
    }

    .login-page{
        padding:20px 12px !important;
    }
}
/* ===== Instasplash 6.0 Instagram-inspired experience ===== */
:root{--ig-bg:#fff;--ig-text:#000;--ig-muted:#737373;--ig-line:#dbdbdb;--ig-hover:#f2f2f2;--ig-blue:#0095f6}
body.light-mode{background:#fff;color:var(--ig-text)}
body.dark-mode{--ig-bg:#000;--ig-text:#f5f5f5;--ig-muted:#a8a8a8;--ig-line:#262626;--ig-hover:#1a1a1a;background:#000;color:var(--ig-text)}
.sidebar{background:var(--ig-bg)!important;border-color:var(--ig-line)!important;width:244px!important;padding:28px 12px!important}
.main{margin-left:244px!important;background:var(--ig-bg);padding:0 24px!important}
.logo-full{max-width:145px!important;margin:5px 12px 26px}.nav a{color:var(--ig-text)!important;font-size:16px!important;font-weight:400!important;padding:12px!important;margin:2px 0!important;border-radius:8px!important}.nav a:hover{background:var(--ig-hover)!important}.nav a:first-child{font-weight:700!important}.site-footer{display:none}
.ig-home-layout{max-width:1010px;margin:0 auto;display:grid;grid-template-columns:minmax(0,630px) 320px;gap:64px;padding-top:24px}.ig-feed-column{min-width:0}.feed-tabs{height:48px;display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--ig-line);margin-bottom:16px}.feed-tabs a{height:48px;display:flex;align-items:center;color:var(--ig-muted);font-weight:600;font-size:15px;position:relative}.feed-tabs a.active{color:var(--ig-text)}.feed-tabs a.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ig-text)}
.story-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 22px;scrollbar-width:none}.story-strip::-webkit-scrollbar{display:none}.story-bubble{width:70px;min-width:70px;text-align:center;color:var(--ig-text)!important}.story-bubble small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;margin-top:5px}.story-ring{width:62px;height:62px;padding:2px}.story-ring img{border:2px solid var(--ig-bg)}.story-ring.own{background:var(--ig-line);position:relative}.story-ring.own b{position:absolute;right:-1px;bottom:-1px;background:var(--ig-blue);color:#fff;border:2px solid var(--ig-bg);border-radius:50%;width:20px;height:20px;line-height:15px;font-size:18px}
.ig-post{max-width:470px;margin:0 auto 20px;padding-bottom:16px;border-bottom:1px solid var(--ig-line)}.ig-post-head{height:56px;display:flex;align-items:center;justify-content:space-between}.post-user{display:flex;align-items:center;gap:10px;color:var(--ig-text)!important;font-size:14px}.post-user em{font-style:normal;color:var(--ig-muted);font-weight:400}.mini-ring{width:34px;height:34px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);display:block}.mini-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--ig-bg);display:block}.verified{color:#0095f6;font-style:normal;font-size:11px;margin-left:4px}.more-button{border:0;background:none;color:var(--ig-text);font-size:17px;letter-spacing:1px;cursor:pointer}.ig-media-wrap{display:block;border:1px solid var(--ig-line);border-radius:4px;overflow:hidden;background:#000}.post-media{width:100%;max-height:585px;object-fit:contain;display:block;background:#000}.ig-actions{height:46px;display:flex;justify-content:space-between;align-items:center}.ig-actions-left{display:flex;gap:16px}.icon-action{font-family:Arial,sans-serif;color:var(--ig-text)!important;font-size:29px;line-height:1;font-weight:400}.icon-action:hover{opacity:.55}.icon-action.liked{color:#ed4956!important}.share-icon{font-size:31px;transform:rotate(-20deg)}.save-icon{font-size:28px}.ig-post-body{font-size:14px;line-height:18px}.like-count{font-weight:600;margin-bottom:7px}.ig-post-body .caption{padding:0;margin:0 0 5px}.ig-post-body .caption a{color:var(--ig-text)}.view-comments,.add-comment{display:block;color:var(--ig-muted)!important;margin-top:6px}.empty-feed{text-align:center;padding:70px 20px;border-top:1px solid var(--ig-line)}
.ig-suggestions{padding-top:32px}.suggest-me,.suggest-user{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;margin-bottom:14px}.suggest-me img,.suggest-user img{width:44px;height:44px;border-radius:50%;object-fit:cover}.suggest-me div,.suggest-user div{display:flex;flex-direction:column;font-size:14px;min-width:0}.suggest-me span,.suggest-user span{color:var(--ig-muted);font-size:13px;margin-top:2px}.suggest-me>a,.suggest-user>a{font-size:12px;font-weight:700;color:var(--ig-blue)}.suggest-title{display:flex;justify-content:space-between;color:var(--ig-muted);font-size:14px;margin:22px 0 16px}.suggest-title a{color:var(--ig-text);font-size:12px}.ig-mini-footer{color:#c7c7c7;font-size:11px;line-height:16px;margin-top:35px}
@media(max-width:1100px){.ig-home-layout{grid-template-columns:minmax(0,630px);justify-content:center}.ig-suggestions{display:none}}
@media(max-width:800px){.sidebar{width:100%!important;height:52px!important;padding:2px 6px!important;background:var(--ig-bg)!important;border-color:var(--ig-line)!important}.main{margin-left:0!important;padding:0!important}.nav{width:100%;justify-content:space-around!important;gap:0!important}.nav a{min-width:auto!important;font-size:22px!important;padding:9px!important}.nav a:nth-child(3),.nav a:nth-child(5),.nav a:nth-child(9),.nav a:nth-child(10),.nav a:nth-child(11),.nav a:nth-child(12),.nav a:nth-child(14),.nav a:nth-child(15){display:none}.ig-home-layout{display:block;padding-top:0}.feed-tabs{padding:0 16px;margin-bottom:10px}.story-strip{padding-left:12px}.ig-post{max-width:none;margin-bottom:12px}.ig-post-head,.ig-post-body,.ig-actions{padding-left:12px;padding-right:12px}.ig-media-wrap{border-left:0;border-right:0;border-radius:0}.post-media{max-height:70vh}.story-strip{border-bottom:1px solid var(--ig-line)}}