*{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;
    }
}