*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}html[data-theme="light"]{color-scheme:light}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--page-art);color:var(--text);min-height:100vh;transition:background .25s,color .25s}button,input,select{font:inherit}button,a,select{transition:.18s ease}a{color:inherit;text-decoration:none}.app-shell{display:grid;grid-template-columns:240px minmax(0,760px) 300px;grid-template-rows:68px 1fr;gap:0 18px;max-width:1380px;margin:0 auto;min-height:100vh;padding:0 18px}.topbar{grid-column:1/-1;display:grid;grid-template-columns:240px minmax(280px,620px) 1fr;align-items:center;gap:18px;position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{font-size:34px;line-height:1;font-weight:950;font-style:italic;background:linear-gradient(135deg,var(--accent-2),var(--accent));-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 38%,transparent))}.brand strong{font-size:21px}.brand small{display:block;font-size:7px;letter-spacing:.34em;color:var(--muted)}.search{height:42px;border:1px solid var(--border);background:var(--surface-2);border-radius:999px;display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--muted)}.search input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}.icon-button{position:relative;width:38px;height:38px;border:0;border-radius:12px;background:transparent;color:var(--text);cursor:pointer}.icon-button:hover{background:var(--accent-soft);color:var(--accent)}.badge{position:absolute;right:1px;top:0;background:#ff395e;color:#fff;border-radius:99px;font-size:10px;padding:2px 5px}.sidebar{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;padding-bottom:24px}.left-sidebar{grid-column:1}.right-sidebar{grid-column:3}.feed-column{grid-column:2;padding:16px 0 50px;min-width:0}.mini-profile{display:flex;align-items:center;gap:10px;padding:16px 6px}.mini-profile span,.post-head span,.friend-row span,.trend span,.profile-card>span{display:block;font-size:12px;color:var(--muted)}.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;border:2px solid color-mix(in srgb,var(--accent) 35%,transparent)}.avatar-sm{width:36px;height:36px;font-size:12px}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:2px 0;border-radius:12px;color:var(--muted);font-size:14px}.nav-item:hover,.nav-item.active{background:var(--accent-soft);color:var(--text)}.nav-item.active{box-shadow:inset 3px 0 0 var(--accent)}.nav-item.pro{color:var(--accent-2)}.nav-icon{width:24px;text-align:center;font-size:18px}.nav-separator{height:1px;background:var(--border);margin:12px}.promo-card,.card{background:var(--surface-glass);border:1px solid var(--border);box-shadow:var(--shadow),var(--glow);backdrop-filter:blur(16px);border-radius:var(--radius)}.promo-card{padding:18px;text-align:center;margin-top:18px}.promo-card p{font-size:13px;color:var(--muted);line-height:1.5}.promo-crown{display:block;font-size:28px;color:var(--accent)}.primary-button,.secondary-button,.mini-primary{border:0;cursor:pointer;border-radius:11px;font-weight:750}.primary-button,.mini-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white}.primary-button{width:100%;padding:11px}.secondary-button{width:100%;padding:10px;background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.stories{display:flex;gap:10px;padding:10px;overflow:auto}.story{position:relative;min-width:104px;height:150px;border:0;border-radius:15px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;color:#fff;cursor:pointer;overflow:hidden}.story::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.68));z-index:0}.story>*{z-index:1}.story-violet{background:radial-gradient(circle at 70% 20%,#c084fc,#43105c 72%)}.story-sunset{background:linear-gradient(160deg,#ffb36b,#b03b7c 55%,#3d155f)}.story-ocean{background:linear-gradient(160deg,#57d1ff,#0e7298 56%,#07314a)}.story-rose{background:linear-gradient(160deg,#ff7fa2,#8d2853 58%,#3f1731)}.story-night{background:linear-gradient(160deg,#5660c9,#1c244f 56%,#090d18)}.story-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#222;font-weight:900;border:2px solid var(--accent)}.story strong{font-size:12px}.composer{margin-top:14px;padding:14px}.composer-row{display:flex;align-items:center;gap:10px}.composer-input{flex:1;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);height:46px;border-radius:999px;text-align:left;padding:0 16px;cursor:pointer}.composer-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:12px;border-top:1px solid var(--border);padding-top:10px}.composer-actions button,.post-actions button{border:0;background:transparent;color:var(--muted);padding:9px;border-radius:10px;cursor:pointer}.composer-actions button:hover,.post-actions button:hover,.post-actions button.selected{background:var(--accent-soft);color:var(--accent)}.post{margin-top:14px;overflow:hidden}.post-head{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:14px 14px 0}.more{border:0;background:transparent;color:var(--muted);cursor:pointer}.post-text{padding:0 14px;line-height:1.5;font-size:14px}.post-text span{color:var(--accent)}.post-art{height:360px;margin:10px 14px 0;border-radius:14px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:22px;color:#fff}.post-art-sunset{background:radial-gradient(circle at 78% 32%,#ffd399 0 5%,transparent 6%),linear-gradient(180deg,#ff9b6a 0 26%,#7d4c71 44%,#352b4e 45% 66%,#141a27 67%)}.post-art-sunset::before{content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:42%;background:linear-gradient(165deg,transparent 0 14%,#111723 15% 34%,transparent 35%),linear-gradient(194deg,transparent 0 19%,#202636 20% 42%,transparent 43%)}.post-art-concert{background:radial-gradient(circle at 50% 0,#fc4acc 0 5%,transparent 26%),radial-gradient(circle at 25% 26%,#8c2fff,transparent 32%),linear-gradient(180deg,#32134a,#0f0d1c)}.post-art-concert::after{content:"";position:absolute;left:0;right:0;bottom:0;height:47%;background:radial-gradient(circle at 10% 100%,#07060c 0 8%,transparent 9%),radial-gradient(circle at 25% 100%,#07060c 0 10%,transparent 11%),radial-gradient(circle at 45% 100%,#07060c 0 9%,transparent 10%),radial-gradient(circle at 65% 100%,#07060c 0 10%,transparent 11%),radial-gradient(circle at 84% 100%,#07060c 0 12%,transparent 13%)}.art-copy{position:relative;z-index:2}.post-art-concert b{font-size:42px;line-height:.86;font-style:italic}.post-stats{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border)}.post-actions{display:grid;grid-template-columns:repeat(3,1fr);padding:5px 10px}.profile-card{margin-top:16px;text-align:center;padding:0 12px 14px;overflow:hidden}.cover-art{height:100px;margin:0 -12px;background:linear-gradient(135deg,var(--accent-soft),var(--accent)),radial-gradient(circle at 70% 20%,var(--accent-2),transparent 34%)}.profile-avatar{margin:-24px auto 6px;border:4px solid var(--surface)}.profile-card h3{margin:4px 0}.verified{color:var(--accent)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:15px 0}.metrics>div{border-right:1px solid var(--border)}.metrics>div:last-child{border:0}.metrics b,.metrics small{display:block}.metrics small{color:var(--muted);font-size:11px}.widget{margin-top:14px;padding:14px}.widget-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.widget-title h3{margin:0;font-size:15px}.widget-title a{font-size:11px;color:var(--accent)}.friend-row{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:8px;margin-top:12px}.friend-row b{font-size:12px}.friend-row span{font-size:9px}.mini-primary{font-size:10px;padding:7px}.trend{margin-top:12px;padding-left:16px;position:relative}.trend::before{content:'#';position:absolute;left:0;color:var(--accent);font-weight:900}.trend b{font-size:12px}.theme-card{margin-top:14px;padding:14px}.theme-card h3{margin:0}.theme-card p{margin:4px 0 12px;color:var(--muted);font-size:12px}.theme-card select{width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:10px;border-radius:10px}.placeholder-page{max-width:900px;margin:0 auto;padding:28px}.placeholder-card{margin-top:80px;padding:48px}.placeholder-card h1{font-size:52px;margin:8px 0}.placeholder-card p{color:var(--muted);max-width:600px}.eyebrow{font-size:11px;letter-spacing:.26em;color:var(--accent)}.inline-button{display:inline-block;width:auto;margin-top:16px;padding:11px 18px}
@media (max-width:1120px){.app-shell{grid-template-columns:210px minmax(0,1fr);}.right-sidebar{display:none}.topbar{grid-template-columns:210px minmax(240px,1fr) auto}.feed-column{grid-column:2}.left-sidebar{grid-column:1}}
@media (max-width:760px){.app-shell{display:block;padding:0 10px}.topbar{display:flex;padding:0 4px;justify-content:space-between}.topbar .search{flex:1;max-width:330px}.left-sidebar{display:none}.feed-column{padding-top:10px}.top-actions .icon-button:nth-child(-n+3){display:none}.composer-actions span{display:none}.post-art{height:280px}.stories{border-radius:14px}.post-stats{font-size:10px}.brand small{display:none}}
@media (max-width:480px){.search{display:none}.topbar{height:60px}.app-shell{padding:0 7px}.post-art{height:225px;margin-left:8px;margin-right:8px}.post-art-concert b{font-size:31px}.story{min-width:88px;height:132px}.composer,.post{border-radius:15px}.placeholder-card{padding:28px}.placeholder-card h1{font-size:36px}}

/* VIBEZ_ACCOUNT_SESSION_UI */
.top-link {
    display: grid;
    place-items: center;
}

.logout-form {
    margin: 0;
}

.nav-button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.button-link {
    display: block;
    text-align: center;
}

.empty-widget {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.theme-status {
    display: block;
    min-height: 16px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 10px;
}


/* ==========================================================
   VIBEZ REAL POST COMPOSER + REALTIME FEED
   ========================================================== */

.composer-main {
    align-items: flex-start;
}

.composer-textarea {
    flex: 1;
    display: block;
    min-height: 48px;
    max-height: 190px;
    resize: none;
    overflow-y: auto;
    border: 1px solid var(--border);
    outline: 0;
    background: var(--surface-2);
    color: var(--text);
    border-radius: 18px;
    padding: 13px 15px;
    line-height: 1.45;
    font: inherit;
}

.composer-textarea::placeholder {
    color: var(--muted);
}

.composer-textarea:focus {
    border-color: var(--accent);
    box-shadow:
        0 0 0 3px
        var(--accent-soft);
}

.composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.composer-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.composer-tools button {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 8px 9px;
    border-radius: 10px;
}

.composer-tools button:disabled {
    opacity: .48;
    cursor: default;
}

.composer-publish {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.composer-publish select {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    padding: 9px 10px;
    border-radius: 10px;
    outline: 0;
}

.composer-submit {
    width: auto;
    min-width: 94px;
    padding: 10px 17px;
}

.composer-submit:disabled {
    opacity: .55;
    cursor: wait;
}

.post-counter {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.composer-feedback {
    min-height: 18px;
    margin: 7px 0 0 54px;
    color: var(--muted);
    font-size: 12px;
}

.feed-list {
    display: block;
}

.real-post-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.post-actions button:disabled {
    opacity: .72;
    cursor: default;
}

.feed-empty {
    margin-top: 14px;
    padding: 38px 24px;
    text-align: center;
}

.feed-empty-icon {
    font-size: 34px;
    color: var(--accent);
}

.feed-empty h3 {
    margin: 9px 0 5px;
}

.feed-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.feed-loading {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.feed-sentinel {
    height: 2px;
}

.post-arrived {
    animation:
        vibezPostArrive
        .42s
        ease both;
}

@keyframes vibezPostArrive {
    from {
        opacity: 0;
        transform:
            translateY(-14px)
            scale(.99);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


@media (max-width: 760px) {
    .composer-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .composer-tools {
        justify-content: space-between;
    }

    .composer-publish {
        width: 100%;
    }

    .composer-publish select {
        flex: 1;
    }

    .composer-submit {
        min-width: 90px;
    }

    .post-counter {
        display: none;
    }
}


@media (prefers-reduced-motion: reduce) {
    .post-arrived {
        animation: none;
    }
}