/* =========================================================
   CLASTIE V36 — ISOLATED STORY VIEWER
   No old cl14/cl28 geometry selectors are used.
   ========================================================= */

#cl14-story-viewer.cl36-viewer{
    position:fixed;
    inset:0;
    z-index:2147483647;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
}
#cl14-story-viewer.cl36-viewer.is-open{display:flex}

.cl36-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.91);
    backdrop-filter:blur(9px);
}

.cl36-stage{
    position:relative;
    z-index:2;
    width:520px;
    height:min(820px,92vh);
    max-width:94vw;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    background:#101010;
    box-shadow:0 32px 110px rgba(0,0,0,.74);
}

/* progress */
.cl36-progress{
    position:absolute;
    top:14px;
    left:14px;
    right:14px;
    z-index:30;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    gap:5px;
    height:4px;
}
.cl36-progress-segment{
    display:block;
    height:4px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.28);
}
.cl36-progress-segment i{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:#fff;
}

/* top user bar — exactly visible */
.cl36-header{
    position:absolute;
    top:30px;
    left:18px;
    right:16px;
    z-index:25;
    display:flex;
    align-items:center;
    gap:10px;
    height:46px;
}
.cl36-avatar{
    width:43px;
    height:43px;
    flex:0 0 43px;
    border-radius:9px;
    object-fit:cover;
}
.cl36-userinfo{
    display:flex;
    min-width:0;
    flex-direction:column;
    justify-content:center;
}
.cl36-userinfo b{
    overflow:hidden;
    color:#fff;
    font:800 16px/18px Inter,Arial,sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.cl36-userinfo small{
    margin-top:3px;
    color:#aaa;
    font:500 12px/15px Inter,Arial,sans-serif;
}
.cl36-views{
    display:flex;
    min-width:58px;
    height:36px;
    margin-left:auto;
    padding:0 11px;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:999px;
    background:#070707;
    color:#fff;
    font:700 13px/1 Inter,Arial,sans-serif;
}
.cl36-close{
    display:grid;
    width:39px;
    height:39px;
    padding:0;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#080808;
    color:#fff;
    cursor:pointer;
    font-size:29px;
    line-height:1;
}

/* Reference-like vertical layout */
.cl36-body{
    position:absolute;
    inset:0;
}
.cl36-media{
    position:absolute;
    top:215px;
    left:10px;
    right:10px;
    height:415px;
    overflow:hidden;
    border-radius:11px;
    background:#050505;
}
#cl14-story-media{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    background:#050505;
}
#cl14-story-media img,
#cl14-story-media video{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:#050505;
}
#cl14-story-media audio{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}

.cl36-nav{
    position:absolute;
    top:50%;
    z-index:4;
    display:grid;
    width:46px;
    height:56px;
    padding:0;
    place-items:center;
    transform:translateY(-50%);
    border:0;
    border-radius:50%;
    background:rgba(130,130,130,.62);
    color:#fff;
    cursor:pointer;
    font-size:34px;
    line-height:1;
}
.cl36-prev{left:2px}
.cl36-next{right:2px}

.cl36-caption{
    position:absolute;
    left:18px;
    right:18px;
    bottom:16px;
    min-height:86px;
    max-height:128px;
    overflow-y:auto;
    background:#101010;
}
#cl14-story-text{
    color:#fff;
    font:700 16px/1.42 Inter,Arial,sans-serif;
    text-align:left;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
#cl25-story-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}
#cl25-story-tags:empty{display:none}
#cl25-story-tags span{
    color:#ff9a48;
    font-size:12px;
    font-weight:800;
}
#cl25-story-music{
    width:max-content;
    margin-top:8px;
    padding:6px 9px;
    border-radius:999px;
    background:#1b1b1d;
    color:#ccc;
    font-size:10px;
}
#cl25-story-music[hidden]{display:none}

@media(max-width:620px){
    #cl14-story-viewer.cl36-viewer{padding:0}
    .cl36-stage{
        width:100vw;
        max-width:none;
        height:100dvh;
        border:0;
        border-radius:0;
    }
    .cl36-media{
        top:22%;
        left:0;
        right:0;
        height:56%;
        border-radius:0;
    }
    .cl36-caption{
        left:14px;
        right:14px;
        bottom:18px;
        max-height:17%;
    }
    .cl36-nav{display:none}
}