/* PREMIUM_POLISH_V1: the body font stack already listed Inter first,
   but no @font-face ever loaded it - visitors were silently seeing
   their OS default font (Segoe UI / San Francisco / Roboto) instead of
   the typography the site was actually designed around. Self-hosted
   (not Google's CDN) so it works under the existing self-only CSP with
   no extra config, and to avoid a third-party request per pageview.
   One variable-font file per subset covers every weight (100-900) the
   site already uses, including the odd in-between values (650/750/850)
   that a handful of fixed static weights couldn't match exactly.
   latin-ext is required, not optional: ş/ğ/ı/İ live outside plain
   Latin-1 and fall inside that subset's unicode-range. */
@font-face{
    font-family:"Inter";
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url("/static/fonts/inter-var-latin-ext.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:"Inter";
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url("/static/fonts/inter-var-latin.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
    color-scheme:dark;

    --bg:#05030a;
    --bg2:#090510;
    --panel:#0d0815;
    --panel2:#130a20;

    --text:#f6f1fa;
    --silver:#d9d1df;
    --muted:#8e8497;

    --purple:#8d2cff;
    --purple2:#c14cff;
    --purple3:#6f1ee8;

    --line:rgba(193,76,255,.16);
    --line2:rgba(204,91,255,.34);

    --content:1180px;

    --shadow:
        0 24px 70px
        rgba(0,0,0,.45);

    /* PREMIUM_POLISH_V1: additive tokens, set to match the site's
       already-most-common values so adding them changes nothing by
       itself - they only take effect where a component is switched
       over to use them. */
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-pill:999px;

    --shadow-sm:0 16px 38px rgba(0,0,0,.24);
    --shadow-lg:var(--shadow);

    --transition-fast:.15s ease;
    --transition-base:.2s ease;

    --space-xs:4px;
    --space-sm:8px;
    --space-md:12px;
    --space-lg:16px;
    --space-xl:24px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;

    /* SITE_BG_ARTWORK_V1: a decorative anime-style artwork sits behind
       everything site-wide (below the existing purple wash and every
       panel/card, which all still paint their own opaque backgrounds
       on top - nothing about their content changed). Fixed attachment
       keeps it steady behind scrolling content on pages taller than
       the viewport; it is intentionally left out of .reader-page,
       whose own rule further down still forces a flat #000 so long
       vertical strips never fight the artwork for contrast.
       The wash gradient below used to be fully opaque for the first
       520px (#07040c/#040208 have no alpha) - that silently hid the
       artwork behind a solid black wall everywhere except a thin,
       barely-visible strip near the very bottom. Now translucent the
       whole way down so the artwork is actually visible through it,
       darkening further toward the bottom where scrolled-down content
       needs the most contrast. */
    background:
        radial-gradient(
            circle at 50% -160px,
            rgba(125,28,216,.20),
            transparent 430px
        ),
        linear-gradient(
            180deg,
            rgba(7,4,12,.32) 0,
            rgba(4,2,8,.6) 520px,
            rgba(3,2,6,.9) 100%
        ),
        url("/static/site-bg-anime-v1.webp") no-repeat center top / 100% auto fixed,
        #030206;

    color:var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body.reader-page{
    background:#000;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

img{
    max-width:100%;
}


/* HEADER */

.site-header{
    position:sticky;
    z-index:100;
    top:0;

    border-bottom:
        1px solid var(--line);

    background:
        rgba(4,2,8,.90);

    backdrop-filter:
        blur(24px)
        saturate(135%);
}

.header-inner{
    width:
        min(
            var(--content),
            calc(100% - 32px)
        );

    min-height:78px;

    margin:auto;

    display:flex;
    align-items:center;
    gap:32px;
}

.brand{
    margin-right:auto;

    display:flex;
    align-items:center;
    gap:13px;
}

.brand-symbol{
    width:48px;
    height:48px;

    position:relative;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(215,118,255,.40);

    border-radius:14px;

    background:
        radial-gradient(
            circle at 50% 35%,
            #35134f,
            #09050e 72%
        );

    font-family:
        Georgia,
        serif;

    font-size:29px;
    font-weight:700;

    color:#fff;

    text-shadow:
        0 0 14px
        rgba(211,77,255,.85);

    box-shadow:
        inset 0 0 22px
        rgba(187,56,255,.15),
        0 0 25px
        rgba(145,30,220,.17);
}

.brand-symbol::after{
    content:"";

    position:absolute;
    inset:-5px;

    border:
        1px solid
        rgba(155,45,220,.13);

    border-radius:18px;
}

.brand-text{
    display:grid;

    line-height:.9;
}

.brand-text strong{
    font-family:
        Georgia,
        serif;

    font-size:19px;

    letter-spacing:.17em;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #c9c1ce
        );

    -webkit-background-clip:text;
    color:transparent;
}

.brand-text small{
    margin-top:7px;

    color:#c34cff;

    font-size:9px;
    font-weight:900;

    letter-spacing:.43em;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:27px;

    color:#a89eae;

    font-size:13px;
    font-weight:600;
}

.main-nav a{
    position:relative;

    padding:29px 0;

    transition:
        color .18s ease;
}

.main-nav a:hover{
    color:#fff;
}

.main-nav a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:20px;

    width:0;
    height:1px;

    background:#cc51ff;

    box-shadow:
        0 0 10px
        rgba(199,68,255,.75);

    transform:
        translateX(-50%);

    transition:
        width .18s ease;
}

.main-nav a:hover::after{
    width:100%;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.icon-button,
.mobile-menu{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(197,78,255,.13);

    border-radius:10px;

    background:
        rgba(13,7,21,.78);

    color:#d0c6d6;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.icon-button:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(205,90,255,.34);

    background:#150a22;
}

.discord-button{
    color:#c45cff;
}

/* HEADER_NOTIFICATION_BELL_V1 */
.notification-bell{
    position:relative;
}
.notification-bell-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:linear-gradient(135deg,#ff5c8a,#c81f5a);
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:16px;
    text-align:center;
    box-shadow:0 0 0 2px #0d0715;
}
@media (prefers-reduced-motion:reduce){
    .notification-bell{ transition:none !important; }
}

/* NOTIFICATION_DROPDOWN_V1 */
.notification-bell-wrap{
    position:relative;
}
.notification-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    z-index:200;
    width:min(360px,calc(100vw - 24px));
    max-height:min(70vh,480px);
    overflow-y:auto;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel);
    box-shadow:var(--shadow);
}
.notification-dropdown[hidden]{
    display:none;
}
.notification-dropdown-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.notification-dropdown-head h3{
    margin:0;
    color:var(--text);
    font-size:14px;
}
.notification-dropdown-head button{
    min-height:30px;
    padding:5px 9px;
    border:1px solid #503560;
    border-radius:8px;
    background:#231530;
    color:var(--silver);
    font-size:11.5px;
    cursor:pointer;
}
.notification-dropdown-head button:hover{
    border-color:#80539a;
    background:#372247;
}
.notification-dropdown-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}
@media (max-width:480px){
    .notification-dropdown{
        position:fixed;
        top:64px;
        right:12px;
        left:12px;
        width:auto;
    }
}

.mobile-menu{
    display:none;
}


/* MAIN */

.site-main{
    width:
        min(
            var(--content),
            calc(100% - 32px)
        );

    margin:
        30px auto 70px;
}


/* HERO */

.hero-panel{
    min-height:280px;

    position:relative;

    overflow:hidden;

    padding:
        46px 52px;

    border:
        1px solid var(--line);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(127,28,202,.18),
            transparent 42%
        ),
        linear-gradient(
            120deg,
            rgba(19,8,32,.96),
            rgba(7,3,12,.97)
        );

    box-shadow:
        var(--shadow),
        inset 0 1px 0
        rgba(255,255,255,.025);
}

.hero-panel::after{
    content:"E";

    position:absolute;

    right:100px;
    top:-8px;

    font-family:
        Georgia,
        serif;

    font-size:250px;
    font-weight:700;

    color:
        rgba(171,66,255,.055);

    text-shadow:
        0 0 45px
        rgba(148,33,225,.10);

    pointer-events:none;
}

.hero-copy{
    max-width:660px;

    position:relative;
    z-index:2;
}

.eyebrow{
    margin:
        0 0 12px;

    color:#c149ff;

    font-size:10px;
    font-weight:900;

    letter-spacing:.28em;
}

.hero-panel h1{
    margin:0;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(38px,5vw,58px);

    letter-spacing:-.025em;

    line-height:1.02;

    background:
        linear-gradient(
            180deg,
            #fff,
            #ddd4e3 60%,
            #aaa0b1
        );

    -webkit-background-clip:text;
    color:transparent;
}

.hero-panel p{
    margin:
        17px 0 0;

    color:#aaa0b1;

    line-height:1.7;

    font-size:14px;
}

.hero-search{
    width:
        min(490px,100%);

    margin-top:28px;
}

.hero-search input{
    width:100%;
    height:48px;

    padding:
        0 16px;

    outline:none;

    border:
        1px solid
        rgba(194,75,255,.26);

    border-radius:10px;

    background:
        rgba(5,2,9,.73);

    color:#fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.hero-search input::placeholder{
    color:#766d7c;
}

.hero-search input:focus{
    border-color:
        rgba(211,91,255,.52);

    box-shadow:
        0 0 0 4px
        rgba(173,47,239,.07);
}


/* SECTION HEADS */

.section{
    margin-top:34px;
}

.section-head{
    margin-bottom:15px;

    display:flex;
    align-items:center;
    gap:12px;
}

.section-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(199,77,255,.18);

    border-radius:9px;

    background:
        linear-gradient(
            145deg,
            #361050,
            #110719
        );

    color:#d267ff;

    box-shadow:
        0 0 20px
        rgba(142,32,213,.10);
}

.section-head h2{
    margin:0;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(25px,3vw,35px);

    background:
        linear-gradient(
            180deg,
            #fff,
            #c8becd
        );

    -webkit-background-clip:text;
    color:transparent;
}

.section-head p{
    margin:
        4px 0 0;

    color:#817788;

    font-size:12px;
}


/* TWO COLUMN HOME */

.home-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        300px;

    gap:24px;

    align-items:start;
}

.home-main{
    min-width:0;
}

.home-sidebar{
    display:grid;
    gap:18px;

    position:sticky;
    top:98px;
}


/* UPDATE LIST */

.update-list{
    display:grid;
    gap:9px;
}

.update-card{
    min-height:92px;

    padding:10px 12px;

    display:grid;

    grid-template-columns:
        62px
        minmax(0,1fr)
        auto;

    align-items:center;
    gap:14px;

    border:
        1px solid
        rgba(194,75,255,.10);

    border-radius:12px;

    background:
        linear-gradient(
            110deg,
            rgba(13,7,21,.90),
            rgba(6,3,10,.75)
        );

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.update-card:hover{
    transform:
        translateX(4px);

    border-color:
        rgba(207,92,255,.28);

    background:#11071b;
}

.update-thumb{
    width:62px;
    height:72px;

    overflow:hidden;

    border-radius:8px;

    background:#14091f;
}

.update-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.update-info{
    min-width:0;
}

.update-info h3{
    margin:0;

    font-size:14px;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.update-info p{
    margin:
        6px 0 0;

    color:#786f80;

    font-size:11px;
}

.chapter-badge{
    padding:
        8px 11px;

    border:
        1px solid
        rgba(203,88,255,.19);

    border-radius:8px;

    color:#d9a9f2;

    background:
        rgba(127,35,184,.09);

    font-size:11px;
    font-weight:700;
}


/* SERIES ROW */

.series-list{
    display:grid;
    gap:9px;
}

.series-row{
    min-height:110px;

    padding:10px;

    display:grid;

    grid-template-columns:
        75px
        minmax(0,1fr)
        120px
        28px;

    align-items:center;
    gap:14px;

    border:
        1px solid
        rgba(194,75,255,.10);

    border-radius:12px;

    background:
        rgba(9,5,15,.72);

    transition:
        border-color .2s ease,
        background .2s ease;
}

.series-row:hover{
    border-color:
        rgba(207,91,255,.30);

    background:
        rgba(17,7,27,.88);
}

.series-row-cover{
    width:75px;
    height:90px;

    overflow:hidden;

    border-radius:8px;

    background:#150a20;
}

.series-row-cover img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.series-row h3{
    margin:0;

    font-size:14px;
}

.series-row-meta{
    margin-top:8px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    color:#7d7484;

    font-size:10px;
}

.status-pill{
    padding:
        4px 7px;

    border-radius:999px;

    background:
        rgba(135,45,199,.12);

    color:#d287f4;
}

.series-row-latest{
    color:#81788a;

    font-size:11px;
}

.series-arrow{
    color:#be4cff;

    font-size:18px;
}


/* SIDEBAR */

.sidebar-card{
    padding:18px;

    border:
        1px solid
        rgba(200,81,255,.16);

    border-radius:14px;

    background:
        radial-gradient(
            circle at 95% 0,
            rgba(133,31,203,.12),
            transparent 40%
        ),
        rgba(11,6,18,.84);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.25);
}

.sidebar-card .eyebrow{
    margin-bottom:8px;
}

.sidebar-card h3{
    margin:0;

    font-family:
        Georgia,
        serif;

    font-size:27px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #c5bbc9
        );

    -webkit-background-clip:text;
    color:transparent;
}

.sidebar-card p{
    color:#817788;

    font-size:12px;
}

.quick-series{
    display:grid;
    gap:7px;

    margin-top:12px;
}

.quick-series-item{
    min-height:58px;

    padding:7px;

    display:grid;

    grid-template-columns:
        20px
        42px
        minmax(0,1fr)
        auto;

    align-items:center;
    gap:9px;

    border:
        1px solid
        rgba(195,78,255,.10);

    border-radius:9px;

    background:
        rgba(4,2,8,.42);
}

/* HOME_POPULAR_SIDEBAR_RANK_V1 */
.quick-series-rank{
    width:20px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-align:center;
}

.quick-series-copy{
    min-width:0;
    display:grid;
    gap:2px;
}

.quick-series-meta{
    color:var(--muted) !important;
    font-size:10px;
}

.quick-series-cover{
    width:42px;
    height:48px;

    overflow:hidden;

    border-radius:6px;

    background:#13091c;
}

.quick-series-cover img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.quick-series-item strong{
    font-size:11px;
}

.quick-series-item span{
    color:#b94cff;
}

.announcement-empty{
    min-height:100px;

    display:grid;
    place-items:center;

    color:#776d7e;

    text-align:center;

    line-height:1.6;

    font-size:12px;
}


/* EMPTY */

.empty-state{
    min-height:130px;

    padding:24px;

    display:grid;
    place-items:center;

    border:
        1px dashed
        rgba(197,78,255,.20);

    border-radius:12px;

    background:
        rgba(7,3,11,.48);

    color:#7f7586;

    text-align:center;
}


/* SERIES DETAIL */

.series-hero{
    padding:28px;

    display:grid;

    grid-template-columns:
        minmax(210px,270px)
        minmax(0,1fr);

    gap:34px;

    border:
        1px solid var(--line);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 14% 0,
            rgba(128,29,200,.18),
            transparent 42%
        ),
        #09050f;

    box-shadow:var(--shadow);
}

.series-main-cover{
    width:100%;

    aspect-ratio:3/4;

    object-fit:cover;

    border-radius:12px;
}

.series-title{
    margin:0;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(36px,5vw,58px);

    background:
        linear-gradient(
            180deg,
            #fff,
            #c6bdca
        );

    -webkit-background-clip:text;
    color:transparent;
}

.series-original-title{
    color:#c34cff;
}

.series-description{
    color:#a49aa9;

    line-height:1.75;
}

.meta-grid{
    margin-top:20px;

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(120px,1fr)
        );

    gap:8px;
}

.meta-box{
    padding:11px;

    border:
        1px solid var(--line);

    border-radius:9px;

    background:
        rgba(255,255,255,.015);
}

.meta-box small{
    display:block;

    margin-bottom:5px;

    color:#756c7c;

    font-size:9px;
}

.meta-box strong{
    font-size:12px;
}

.genre-list{
    margin-top:16px;

    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.genre{
    padding:
        5px 9px;

    border:
        1px solid var(--line);

    border-radius:999px;

    color:#b8aebe;

    font-size:10px;
}


/* CHAPTERS */

.chapter-list{
    display:grid;
    gap:8px;
}

.chapter-row{
    min-height:60px;

    padding:
        11px 15px;

    display:flex;
    align-items:center;
    gap:12px;

    border:
        1px solid
        rgba(194,75,255,.10);

    border-radius:10px;

    background:
        rgba(9,5,15,.72);
}

.chapter-row:hover{
    border-color:
        rgba(207,91,255,.28);

    background:#11071b;
}

.chapter-number{
    min-width:90px;

    color:#d48af7;

    font-size:12px;
    font-weight:700;
}

.chapter-title{
    min-width:0;
    flex:1;

    color:#aaa0af;

    font-size:12px;
}

.chapter-read{
    color:#776e7f;

    font-size:11px;
}


/* READER */

.reader-shell{
    width:
        min(1050px,100%);

    margin:auto;
}

.reader-toolbar{
    position:sticky;
    z-index:20;
    top:88px;

    margin-bottom:8px;

    padding:
        8px 11px;

    display:grid;
    grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr);
    align-items:center;
    gap:8px;

    border:
        1px solid var(--line);

    border-radius:9px;

    background:
        rgba(2,1,3,.92);

    transform:translateY(0);
    opacity:1;
    transition:
        transform .22s cubic-bezier(.2,.72,.25,1),
        opacity .16s ease;
    will-change:transform;
}

/* READER_TOOLBAR_SMART_VISIBILITY_V1 */
.reader-toolbar.reader-toolbar-hidden{
    transform:translateY(calc(-100% - 12px));
    opacity:0;
    pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
    .reader-toolbar{transition:none}
}

.reader-toolbar a{
    color:#cf6cff;
}

.new-chapter-badge{display:inline-flex;align-items:center;width:max-content;padding:4px 7px;border:1px solid rgba(255,104,55,.38);border-radius:999px;background:rgba(127,30,14,.25);color:#ffad76;font-size:9px;font-weight:900;letter-spacing:.06em;white-space:nowrap}

.reader-series-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-navigation,.reader-tools,.reader-footer-nav{display:flex;align-items:center;justify-content:center;gap:8px}
.reader-tools{justify-content:flex-end;flex-wrap:wrap;font-size:10px;color:#8f8496}
.reader-tools label{display:flex;align-items:center;gap:5px}
.reader-toolbar select{max-width:190px;padding:5px 7px;border:1px solid var(--line);border-radius:7px;background:#0d0713;color:#ddd3e1}
.reader-control,.reader-report{padding:6px 9px;border:1px solid rgba(207,91,255,.25);border-radius:7px;background:rgba(116,31,164,.12);white-space:nowrap}
.reader-control.disabled{opacity:.35;pointer-events:none}
.reader-progress{position:sticky;z-index:21;top:88px;height:3px;background:#12091a}
.reader-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#8e28d3,#ed76ff);transition:width .1s linear}

/* READER_NAVIGATION_POLISH_V1 */
.reader-navigation {
    min-width: 0;
}

.reader-chapter-picker {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.reader-chapter-position {
    min-width: 32px;
    padding: 4px 6px;
    border: 1px solid rgba(178, 96, 214, .22);
    border-radius: 999px;
    background: rgba(104, 37, 135, .14);
    color: #ad97b7;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.reader-toolbar .reader-control,
.reader-footer-nav .reader-control {
    position: relative;
    transition:
        border-color .16s ease,
        background .16s ease,
        color .16s ease,
        opacity .16s ease;
}

.reader-toolbar .reader-control:not(.disabled):hover,
.reader-toolbar .reader-control:not(.disabled):focus-visible,
.reader-footer-nav .reader-control:not(.disabled):hover,
.reader-footer-nav .reader-control:not(.disabled):focus-visible {
    border-color: rgba(214, 121, 250, .55);
    background: rgba(126, 44, 162, .22);
    color: #f1dafa;
}

.reader-control.disabled {
    border-color: rgba(125, 82, 142, .13);
    background: rgba(255, 255, 255, .015);
    color: #6e6473;
    cursor: not-allowed;
    opacity: .62;
}

.reader-navigation-pending .reader-control,
.reader-navigation-pending .reader-chapter-picker {
    pointer-events: none;
}

.reader-control.is-loading {
    padding-right: 28px;
    border-color: rgba(211, 119, 248, .58);
    color: #ecd6f5;
    opacity: 1;
}

.reader-control.is-loading::after {
    content: "";
    position: absolute;
    right: 9px;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(230, 196, 243, .28);
    border-top-color: #e7bcf7;
    border-radius: 50%;
    animation: reader-navigation-spin .65s linear infinite;
}

.reader-navigation-pending select:disabled {
    opacity: .55;
    cursor: wait;
}

@keyframes reader-navigation-spin {
    to { transform: rotate(360deg); }
}

@media(prefers-reduced-motion:reduce) {
    .reader-control.is-loading::after {
        animation-duration: 1.4s;
    }
}

.reader-pages{
    width:
        min(var(--reader-width,920px),100%);

    margin:auto;

    display:grid;
    gap:var(--reader-gap,0);

    background:#000;
}

.reader-empty-inline {
    display: grid;
    gap: 8px;
    padding: 32px 20px;
    text-align: center;
    color: #d5c8df;
    background: #100b16;
    border: 1px solid rgba(178, 115, 219, .2);
    border-radius: 12px;
}
.reader-empty-inline strong { color: #f5eef9; }

.reader-page-image{
    width:100%;
    height:auto;

    display:block;
}

.reader-footer-nav{margin:18px auto 40px;flex-wrap:wrap}
.reader-comments{width:min(920px,calc(100% - 24px));margin:28px auto;padding:20px;border:1px solid var(--line);border-radius:12px;background:#09050f}.reader-comments form{display:grid;gap:8px}.reader-comments textarea{min-height:90px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#050208;color:#fff;resize:vertical}.reader-comments button{padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#1d0b29;color:#ddb5ef}.reader-comment{padding:13px 0;border-bottom:1px solid var(--line)}.reader-comment header{display:flex;justify-content:space-between;color:#9f8ca8}.reader-comment p{white-space:pre-wrap}.spoiler-comment{padding:10px;background:#211629;color:transparent;cursor:pointer}.spoiler-comment:hover{color:#ddd}
.reader-footer-control{min-width:150px;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:850px){
    .reader-toolbar{top:70px;grid-template-columns:1fr;justify-items:stretch}
    .reader-series-link{text-align:center}
    .reader-navigation,.reader-tools{justify-content:center}
    .reader-progress{top:70px}
}

@media(max-width:520px){
    .reader-shell{width:100%}
    .reader-toolbar{top:58px;margin-bottom:4px;padding:6px 8px;border-radius:0}
    .reader-navigation{display:grid;grid-template-columns:minmax(74px,auto) minmax(0,1fr) minmax(74px,auto)}
    .reader-chapter-picker{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px}
    .reader-chapter-picker select{width:100%;min-width:0;max-width:none}
    .reader-chapter-position{min-width:27px;padding:4px;font-size:8px}
    .reader-navigation .reader-control{min-width:0;padding:7px 5px;font-size:9px;text-align:center}
    .reader-tools label{display:none}
    .reader-control,.reader-report{padding:7px;font-size:10px}
    .reader-progress{top:58px}
}


/* LOADING */

.loading-screen{
    min-height:60vh;

    display:grid;
    place-items:center;
    align-content:center;
    gap:14px;

    color:#746a7b;
}

.loading-rune{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(203,87,255,.30);

    border-radius:12px;

    color:#cf5cff;

    font-family:
        Georgia,
        serif;

    box-shadow:
        0 0 25px
        rgba(155,37,230,.10);
}


/* FOOTER */

.site-footer{
    width:
        min(
            var(--content),
            calc(100% - 32px)
        );

    margin:
        0 auto 28px;

    padding-top:23px;

    display:flex;
    justify-content:center;
    gap:8px;

    border-top:
        1px solid var(--line);

    color:#69606f;

    font-size:11px;
}


/* RESPONSIVE */

@media(max-width:950px){
    .home-grid{
        grid-template-columns:1fr;
    }

    .home-sidebar{
        position:static;
    }
}

@media(max-width:800px){
    .main-nav{
        display:none;
    }

    .mobile-menu{
        display:grid;
    }

    .main-nav.open{
        position:absolute;

        top:78px;
        right:16px;

        padding:12px;

        display:grid;
        gap:0;

        border:
            1px solid var(--line);

        border-radius:10px;

        background:#0d0715;
    }

    .main-nav.open a{
        padding:10px 13px;
    }

    .main-nav.open a::after{
        display:none;
    }

    .hero-panel{
        padding:32px 25px;
    }

    .hero-panel::after{
        right:-15px;
    }

    .series-hero{
        grid-template-columns:1fr;
    }

    .series-main-cover{
        width:
            min(260px,100%);

        margin:auto;
    }
}

@media(max-width:570px){
    .site-main,
    .header-inner,
    .site-footer{
        width:
            calc(100% - 20px);
    }

    .hero-panel{
        min-height:auto;
        padding:26px 20px;
    }

    .hero-panel h1{
        font-size:40px;
    }

    .hero-panel::after{
        font-size:170px;
    }

    .series-row{
        grid-template-columns:
            62px
            minmax(0,1fr)
            22px;
    }

    .series-row-cover{
        width:62px;
        height:76px;
    }

    .series-row-latest{
        display:none;
    }

    .update-card{
        grid-template-columns:
            54px
            minmax(0,1fr);
    }

    .update-thumb{
        width:54px;
        height:64px;
    }

    .chapter-badge{
        grid-column:2;
        width:max-content;
    }
}


/* REAL_LOGO_BIND */

.brand-symbol{
    overflow:hidden;
    padding:0;
}

.brand-symbol img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.hero-panel::after{
    content:"";
    width:250px;
    height:250px;
    right:70px;
    top:12px;

    background:
        url("/static/etr-emblem.png")
        center / contain
        no-repeat;

    opacity:.09;
    filter:
        drop-shadow(
            0 0 30px
            rgba(180,55,255,.25)
        );
}



/* EMBLEM_FINAL_BIND */

.brand-symbol{
    width:54px;
    height:54px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
}

.brand-symbol::after{
    display:none;
}

.brand-symbol img{
    width:54px;
    height:54px;
    object-fit:contain;
    filter:
        drop-shadow(
            0 0 12px
            rgba(183,64,255,.32)
        );
}

.hero-panel::after{
    content:"";
    width:245px;
    height:245px;
    right:65px;
    top:15px;

    background:
        url("/static/etr-emblem.png")
        center / contain
        no-repeat;

    opacity:.075;

    filter:
        grayscale(.15)
        drop-shadow(
            0 0 26px
            rgba(173,47,255,.22)
        );
}



/* SERIES_DETAIL_PREMIUM_V2 */

.series-back{
    width:max-content;
    margin:4px 0 18px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#8f8497;
    font-size:12px;
    font-weight:700;
    transition:color .18s ease;
}

.series-back:hover{
    color:#d78bff;
}

.series-detail-hero{
    position:relative;
    overflow:hidden;
    min-height:500px;

    padding:42px;

    display:grid;
    grid-template-columns:290px minmax(0,1fr);
    gap:48px;
    align-items:center;

    border:1px solid rgba(199,78,255,.18);
    border-radius:22px;

    background:
        radial-gradient(
            circle at 14% 34%,
            rgba(125,31,194,.23),
            transparent 33%
        ),
        radial-gradient(
            circle at 95% 0,
            rgba(131,35,205,.13),
            transparent 38%
        ),
        linear-gradient(
            120deg,
            rgba(15,7,25,.98),
            rgba(5,3,9,.98)
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.42);
}

.series-detail-hero::after{
    content:"";

    position:absolute;
    right:-30px;
    bottom:-55px;

    width:330px;
    height:330px;

    background:
        url("/static/etr-emblem.png")
        center / contain
        no-repeat;

    opacity:.035;
    pointer-events:none;
}

.series-cover-stage{
    position:relative;
    z-index:2;
}

.series-cover-glow{
    position:absolute;
    inset:15% -8% -5%;

    background:
        radial-gradient(
            circle,
            rgba(164,48,245,.32),
            transparent 68%
        );

    filter:blur(35px);
}

.series-cover-frame{
    position:relative;
    z-index:2;

    overflow:hidden;

    aspect-ratio:3 / 4;

    border:
        1px solid
        rgba(218,111,255,.28);

    border-radius:17px;

    background:#0b0611;

    box-shadow:
        0 28px 65px rgba(0,0,0,.50),
        0 0 38px rgba(153,37,222,.13);
}

.series-detail-cover{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.series-detail-content{
    position:relative;
    z-index:2;
    min-width:0;
}

.series-detail-title{
    max-width:760px;
    margin:0;

    font-family:Georgia,serif;

    font-size:
        clamp(43px,5.2vw,68px);

    line-height:.98;
    letter-spacing:-.035em;

    background:
        linear-gradient(
            180deg,
            #fff,
            #ddd3e2 65%,
            #9f94a6
        );

    -webkit-background-clip:text;
    color:transparent;
}

.series-detail-original{
    margin:12px 0 0;
    color:#a658cc;
    font-size:13px;
}

.series-detail-badges{
    margin-top:18px;

    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.preview-pill{
    padding:4px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.045);
    color:#918798;
    font-size:10px;
}

.series-detail-description{
    max-width:760px;

    margin:23px 0 0;

    color:#aca1b0;

    font-size:13px;
    line-height:1.8;
}

.series-info-grid{
    max-width:760px;

    margin-top:25px;

    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:8px;
}

.series-info-box{
    min-height:72px;
    padding:12px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border:
        1px solid
        rgba(195,77,255,.12);

    border-radius:10px;

    background:
        rgba(255,255,255,.018);
}

.series-info-box span{
    margin-bottom:5px;

    color:#716878;

    font-size:9px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.08em;
}

.series-info-box strong{
    overflow:hidden;

    color:#ded6e2;

    font-size:11px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.series-actions{
    /* PREMIUM_POLISH_V1: margin-top/gap used to be set here too, but a
       later .series-actions rule (same specificity) always overrides
       them - removed instead of left as dead, misleading values. */
    display:flex;
    flex-wrap:wrap;
}

.primary-series-action,
.secondary-series-action{
    min-height:42px;
    padding:0 17px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:9px;

    font-size:11px;
    font-weight:800;
}

.primary-series-action{
    /* PREMIUM_POLISH_V1: border/background/box-shadow used to be set
       here too, but a second .primary-series-action rule further down
       the file (same specificity, later in source order) always wins
       for those three properties - they never actually rendered.
       Removed instead of left as confusing dead code; color:#fff is
       the one property from this rule that IS still live. */
    color:#fff;
}

.primary-series-action.disabled{
    cursor:default;
    opacity:.48;
}

/* SERIES_ACTIONS_ETERNAL_TOAST_V1 */
.secondary-series-action{
    border:
        1px solid
        rgba(199,91,255,.38);

    background:
        linear-gradient(
            145deg,
            rgba(38,15,51,.94),
            rgba(12,6,18,.96)
        );

    color:#eadcf0;
    font:inherit;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 7px 22px rgba(91,24,130,.12);
    transition:
        transform .16s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.secondary-series-action:hover,
.secondary-series-action:focus-visible{
    transform:translateY(-2px);
    border-color:rgba(220,129,255,.72);
    background:
        linear-gradient(
            145deg,
            rgba(62,22,82,.98),
            rgba(20,8,29,.98)
        );
    color:#fff;
    box-shadow:
        0 11px 30px rgba(118,34,164,.22),
        0 0 0 1px rgba(200,89,255,.08);
}

.secondary-series-action:focus-visible{
    outline:2px solid rgba(220,145,255,.78);
    outline-offset:3px;
}

.secondary-series-action:active{
    transform:translateY(0) scale(.98);
}

.series-action-library{
    border-color:rgba(212,102,255,.58);
    background:
        linear-gradient(
            135deg,
            rgba(104,31,145,.78),
            rgba(42,13,59,.94)
        );
    color:#fff;
}

.series-action-library.is-active{
    border-color:rgba(105,232,174,.52);
    background:rgba(24,80,60,.58);
    color:#caffdf;
}

.series-action-library:disabled{
    cursor:wait;
    opacity:.72;
    transform:none;
}

.series-action-discord{
    border-color:rgba(139,115,255,.46);
}

.series-action-suggest{
    border-color:rgba(231,103,255,.44);
}

.series-chapters-section{
    margin-top:38px;
}

.series-empty-chapters{
    min-height:145px;

    padding:28px;

    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;

    border:
        1px dashed
        rgba(198,78,255,.20);

    border-radius:13px;

    background:
        rgba(7,3,11,.44);

    text-align:center;
}

.series-empty-chapters strong{
    color:#bfb5c4;
    font-size:13px;
}

.series-empty-chapters span{
    color:#756c7b;
    font-size:11px;
}

@media(max-width:850px){
    .series-detail-hero{
        grid-template-columns:1fr;
        padding:28px;
    }

    .series-cover-stage{
        width:min(280px,100%);
        margin:auto;
    }

    .series-detail-content{
        text-align:center;
    }

    .series-detail-description{
        margin-left:auto;
        margin-right:auto;
    }

    .series-detail-badges,
    .series-actions{
        justify-content:center;
    }

    .series-info-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:520px){
    .series-detail-hero{
        padding:20px;
    }

    .series-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .primary-series-action,
    .secondary-series-action{
        width:100%;
    }

    .series-detail-title{
        font-size:38px;
    }

    .series-info-grid{
        grid-template-columns:1fr 1fr;
    }
}


/* SERIES_DETAIL_POLISH */

.primary-series-action.disabled{
    border-color:rgba(174,82,210,.12);
    background:rgba(92,37,116,.22);
    color:#8b7c91;
    box-shadow:none;
    opacity:1;
    cursor:not-allowed;
    pointer-events:none;
}

.series-info-box strong{
    color:#e2dae6;
}

.series-detail-description{
    max-width:800px;
}

/* SERIES_EMOJI_REACTIONS_V1 */
.series-reactions {
    margin-top: 22px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(173, 91, 210, .22);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(28, 12, 38, .78),
            rgba(9, 5, 13, .90)
        );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.series-reactions-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
    text-align: left;
}

.series-reactions-copy strong {
    color: #dfcce7;
    font-size: 11px;
    line-height: 1.35;
}

.series-reactions-copy span {
    color: #7f7186;
    font-size: 9px;
}

.series-reaction-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.series-reaction-options[aria-busy="true"] {
    opacity: .68;
}

.series-reactions .series-reaction {
    min-width: 47px;
    height: 34px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(146, 82, 176, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: #aa9aaf;
    cursor: pointer;
    transition:
        transform .15s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.series-reactions .series-reaction:hover,
.series-reactions .series-reaction:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(205, 118, 239, .54);
    background: rgba(119, 46, 151, .16);
}

.series-reactions .series-reaction:focus-visible {
    outline: 2px solid rgba(220, 145, 255, .68);
    outline-offset: 2px;
}

.series-reactions .series-reaction.is-active {
    border-color: rgba(222, 129, 255, .76);
    background:
        linear-gradient(
            135deg,
            rgba(110, 37, 148, .78),
            rgba(54, 18, 73, .88)
        );
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(208, 108, 250, .11),
        0 7px 18px rgba(92, 25, 127, .20);
}

.series-reaction-emoji {
    font-size: 15px;
    line-height: 1;
}

.series-reaction-count {
    min-width: 8px;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

@media(max-width:720px) {
    .series-reactions {
        align-items: stretch;
        flex-direction: column;
    }

    .series-reactions-copy {
        text-align: center;
    }

    .series-reaction-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
    }

    .series-reactions .series-reaction {
        width: 100%;
        min-width: 0;
    }
}


/* DETAILED_SERIES_REVIEWS_V1 */
.series-reviews {
    margin-top: 30px;
    padding: 24px;
    border: 1px solid rgba(151, 80, 184, .20);
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            rgba(14, 8, 19, .98),
            rgba(8, 4, 12, .98)
        );
}

.series-reviews-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.series-reviews-head h2 {
    margin: 2px 0 5px;
    color: #eee5f1;
    font-size: 22px;
}

.series-reviews-head > div > p:last-child {
    margin: 0;
    color: #887b8e;
    font-size: 11px;
}

.series-review-sort {
    display: grid;
    gap: 5px;
    color: #8e8095;
    font-size: 9px;
}

.series-reviews .series-review-sort select {
    min-width: 138px;
    padding: 8px 28px 8px 10px;
    border: 1px solid rgba(165, 89, 199, .28);
    border-radius: 9px;
    background-color: #09050d;
    color: #d9cade;
    font-size: 11px;
}

.series-review-compose {
    margin-bottom: 18px;
}

.series-review-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(168, 91, 204, .24);
    border-radius: 12px;
    background: rgba(29, 12, 38, .48);
}

.series-review-form[aria-busy="true"] {
    opacity: .72;
}

.series-review-form-head {
    display: grid;
    gap: 3px;
}

.series-review-form-head strong {
    color: #e4d5e9;
    font-size: 13px;
}

.series-review-form-head span,
.series-review-form label > span {
    color: #92849a;
    font-size: 10px;
}

.series-review-form > label {
    display: grid;
    gap: 6px;
}

.series-reviews .series-review-form input[type="text"],
.series-reviews .series-review-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid rgba(156, 82, 194, .25);
    border-radius: 9px;
    background: #07030a;
    color: #e8dfea;
    font: inherit;
    font-size: 12px;
}

.series-reviews .series-review-form textarea {
    min-height: 128px;
    line-height: 1.55;
    resize: vertical;
}

.series-review-form-footer,
.series-review-published,
.series-review-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.series-review-spoiler-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #a393aa;
    font-size: 10px;
}

.series-review-form-actions,
.series-review-owner-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.series-reviews button {
    font: inherit;
}

.series-review-submit,
.series-review-published button,
.series-review-login button {
    padding: 8px 13px;
    border: 1px solid rgba(194, 105, 232, .38);
    border-radius: 8px;
    background: rgba(105, 35, 139, .30);
    color: #ead8f0;
    font-size: 10px;
    font-weight: 800;
}

.series-review-cancel,
.series-review-owner-actions button {
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: #96879d;
    font-size: 9px;
}

.series-review-owner-actions [data-review-delete][data-confirming="true"] {
    color: #f1a0ad;
}

.series-review-published,
.series-review-login {
    padding: 12px 14px;
    border: 1px solid rgba(146, 78, 178, .18);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
    color: #a697ad;
    font-size: 10px;
}

.series-review-published > div {
    display: grid;
    gap: 2px;
}

.series-review-published strong {
    color: #d9c7df;
    font-size: 11px;
}

.series-review-list {
    display: grid;
    gap: 12px;
}

.series-review-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(139, 76, 167, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .018);
}

.series-review-card-head,
.series-review-author,
.series-review-name-line,
.series-review-footer {
    display: flex;
    align-items: center;
}

.series-review-card-head {
    justify-content: space-between;
    gap: 12px;
}

.series-review-author {
    min-width: 0;
    gap: 10px;
}

.series-review-avatar-shell,
.series-review-name {
    padding: 0;
    border: 0;
    background: transparent;
}

.series-review-avatar-shell {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.series-review-avatar {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.series-review-avatar-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #6e2792, #281032);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}

.series-review-author-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.series-review-name-line {
    min-width: 0;
    flex-wrap: wrap;
    gap: 7px;
}

.series-review-name strong {
    display: block;
    max-width: 220px;
    overflow: hidden;
    color: #e7dce9;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.series-review-author-copy > span {
    color: #796d80;
    font-size: 9px;
}

.series-review-badge {
    padding: 3px 7px;
    font-size: 8px;
}

.series-review-content {
    margin: 13px 0 0 48px;
}

.series-review-content h3 {
    margin: 0 0 8px;
    color: #eadfed;
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.series-review-content p {
    margin: 0;
    color: #cfc5d3;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.series-review-spoiler {
    padding: 11px 12px;
    border: 1px solid rgba(156, 91, 187, .20);
    border-radius: 9px;
    background: rgba(65, 44, 76, .22);
    cursor: pointer;
}

.series-review-spoiler-label {
    display: block;
    color: #ad99b6;
    font-size: 10px;
    font-weight: 800;
}

.series-review-spoiler p {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    filter: blur(7px);
    user-select: none;
    transition: opacity .15s ease, filter .15s ease, max-height .15s ease;
}

.series-review-spoiler.is-open .series-review-spoiler-label {
    display: none;
}

.series-review-spoiler.is-open p {
    max-height: 1200px;
    opacity: 1;
    filter: none;
    user-select: text;
}

.series-review-footer {
    justify-content: flex-end;
    margin: 12px 0 0 48px;
}

.series-reviews .series-review-like {
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(142, 82, 169, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .02);
    color: #96879d;
    font-size: 9px;
}

.series-reviews .series-review-like.is-active {
    border-color: rgba(206, 116, 241, .55);
    background: rgba(110, 40, 143, .25);
    color: #e4c9ed;
}

.series-review-like strong {
    font-variant-numeric: tabular-nums;
}

.series-review-empty {
    margin: 0;
    padding: 20px;
    border: 1px dashed rgba(145, 82, 174, .19);
    border-radius: 11px;
    color: #877a8d;
    font-size: 11px;
    text-align: center;
}

@media(max-width:620px) {
    .series-reviews {
        padding: 17px 14px;
    }

    .series-reviews-head,
    .series-review-form-footer,
    .series-review-published,
    .series-review-login {
        align-items: stretch;
        flex-direction: column;
    }

    .series-review-sort select,
    .series-review-submit,
    .series-review-published button,
    .series-review-login button {
        width: 100%;
    }

    .series-review-card {
        padding: 13px;
    }

    .series-review-card-head {
        align-items: flex-start;
    }

    .series-review-owner-actions {
        flex-direction: column;
        align-items: flex-end;
    }

    .series-review-content,
    .series-review-footer {
        margin-left: 0;
    }

    .series-review-name strong {
        max-width: 145px;
    }
}


/* HOME_PREMIUM_POLISH_V2 */

.hero-panel{
    min-height:292px;
    padding:48px 54px;
}

.hero-panel::after{
    opacity:.06;
}

.home-grid{
    gap:28px;
}

.home-main .section{
    margin-top:38px;
}

.updates-empty{
    min-height:128px;

    padding:24px 26px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;

    border:
        1px dashed
        rgba(197,78,255,.18);

    border-radius:13px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(137,34,203,.08),
            transparent 62%
        ),
        rgba(7,3,11,.46);
}

.updates-empty-icon{
    width:46px;
    height:46px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(201,83,255,.20);

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            rgba(67,17,94,.78),
            rgba(16,7,24,.82)
        );

    color:#c75dff;

    font-size:19px;

    box-shadow:
        0 0 24px
        rgba(146,34,219,.10);
}

.updates-empty strong{
    display:block;

    margin-bottom:5px;

    color:#c8bdcd;

    font-size:12px;
}

.updates-empty span{
    display:block;

    color:#756c7b;

    font-size:10px;
}

.sidebar-card{
    padding:20px;
}

.quick-series-item{
    min-height:64px;
}

.quick-series-cover{
    width:46px;
    height:52px;
}

.sidebar-all-series{
    min-height:38px;

    margin-top:13px;
    padding:0 3px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-top:
        1px solid
        rgba(195,78,255,.10);

    color:#9c90a3;

    font-size:10px;
    font-weight:700;

    transition:
        color .18s ease;
}

.sidebar-all-series:hover{
    color:#d66cff;
}

.sidebar-all-series span{
    color:#bc4cff;
    font-size:15px;
}

.series-row{
    min-height:118px;

    grid-template-columns:
        82px
        minmax(0,1fr)
        135px
        28px;

    padding:12px;

    background:
        radial-gradient(
            circle at 0 50%,
            rgba(117,30,177,.07),
            transparent 35%
        ),
        rgba(9,5,15,.76);
}

.series-row-cover{
    width:82px;
    height:96px;

    border:
        1px solid
        rgba(198,82,255,.12);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.28);
}

.series-row h3{
    font-size:15px;
}

.series-row-meta{
    margin-top:9px;
}

.series-row-genres{
    color:#756c7c;
    font-size:10px;
}

.series-row-latest{
    text-align:right;
}

.home-sidebar{
    gap:20px;
}

.announcement-empty{
    min-height:112px;
}

@media(max-width:570px){
    .hero-panel{
        padding:28px 21px;
    }

    .updates-empty{
        justify-content:flex-start;
    }

    .series-row{
        grid-template-columns:
            68px
            minmax(0,1fr)
            24px;
    }

    .series-row-cover{
        width:68px;
        height:82px;
    }
}



/* HEADER_BRAND_POLISH */

.header-inner{
    min-height:82px;
}

.brand{
    gap:15px;
}

.brand-symbol{
    width:62px;
    height:62px;
}

.brand-symbol img{
    width:62px;
    height:62px;

    filter:
        drop-shadow(
            0 0 15px
            rgba(184,66,255,.42)
        );
}

.brand-text strong{
    font-size:21px;
    letter-spacing:.19em;
}

.brand-text small{
    margin-top:8px;

    color:#cf5cff;

    font-size:9px;
    letter-spacing:.48em;

    text-shadow:
        0 0 10px
        rgba(191,70,255,.28);
}

.main-nav{
    gap:29px;
}

.icon-button{
    width:40px;
    height:40px;
}

.discord-button{
    border-color:
        rgba(190,77,255,.34);

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(135,43,194,.48),
            rgba(34,11,49,.88)
        );

    color:#d778ff;

    box-shadow:
        0 0 20px
        rgba(136,38,210,.12);
}

.discord-button:hover{
    border-color:
        rgba(211,97,255,.52);

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(164,50,232,.58),
            rgba(46,14,64,.94)
        );

    color:#fff;
}

.account-button{min-height:40px;padding:0 14px;border:1px solid rgba(190,77,255,.34);border-radius:9px;background:rgba(34,11,49,.88);color:#d778ff;cursor:pointer}
.account-dialog{width:min(520px,calc(100% - 24px));padding:0;border:1px solid rgba(202,83,255,.35);border-radius:var(--radius-lg);background:#09050f;color:#eee;box-shadow:0 25px 90px #000}
.account-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}
/* DIALOG_ENTRANCE_ANIMATION_V1: this dialog (login/register/reset
   panel, and the reused admin series-delete confirmation) used to pop
   open instantly with showModal() - every other dialog in the site
   (Quick Hub, public profile) already had an entrance animation,
   this one didn't. Same fade+settle treatment, same duration. */
.account-dialog[open]{animation:account-dialog-enter .18s ease-out}
@keyframes account-dialog-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion: reduce){.account-dialog[open]{animation:none}}
.account-panel{position:relative;padding:28px;display:grid;gap:14px}
.dialog-close{position:absolute;right:14px;top:12px;border:0;background:none;color:#aaa;font-size:25px;cursor:pointer}
.account-tabs{display:flex;gap:6px;margin-right:30px}
.account-tabs button{padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#100817;color:#918698;cursor:pointer}
.account-tabs button.active{border-color:#bd4cff;color:#efc9ff}
.auth-form{display:grid;gap:13px}.auth-form[hidden]{display:none}
.remember-me-option{
    display:flex!important;
    align-items:center;
    grid-template-columns:none!important;
    gap:8px!important;
    width:max-content;
    cursor:pointer;
    user-select:none;
}
.account-panel .remember-me-option input{
    width:auto;
    margin:0;
    padding:0;
    flex:0 0 auto;
    accent-color:#bd4cff;
}
.remember-me-option span{
    color:#b8acbd;
    font-size:12px;
}
.account-panel label{display:grid;gap:6px;color:#a69aaa;font-size:11px}
.account-panel input{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;background:#08040c;color:#fff}
.account-panel button:not(.dialog-close){padding:11px;border:1px solid rgba(190,77,255,.35);border-radius:8px;background:#351148;color:#f3d9ff;cursor:pointer}
.secondary-account-action{background:#151018!important}.danger-account-action{border-color:#8c304a!important;background:#35101c!important;color:#ffb4c6!important}
.form-message{min-height:20px;margin:0;color:#d486f5;font-size:12px}
.account-tabs[hidden],.account-ban-state[hidden]{display:none}
.account-ban-state{display:grid;gap:12px;padding:18px;border:1px solid rgba(224,104,143,.4);border-radius:12px;background:linear-gradient(145deg,rgba(88,25,54,.3),rgba(20,10,27,.92))}
.account-ban-state h3{margin:0;color:#ffe5ee;font-size:21px}
.account-ban-state>div{display:grid;gap:4px;min-width:0;color:#eee0e8;overflow-wrap:anywhere}
.account-ban-state>div strong{color:#f5a9c1;font-size:12px}
.account-ban-state>button{justify-self:start}
.account-library{display:grid;gap:8px;max-height:310px;overflow:auto;padding-top:6px;border-top:1px solid var(--line)}
.account-library h3{margin:8px 0 2px;font-size:13px}.account-library>div{display:grid;gap:5px;color:#827789;font-size:11px}
.account-library a{display:flex;justify-content:space-between;gap:10px;padding:9px;border:1px solid var(--line);border-radius:7px;background:#0d0713}.account-library a span{color:#9c70ae}

@media(max-width:570px){.account-button{padding:0 9px;font-size:10px}.account-panel{padding:22px 16px}.account-tabs{overflow:auto}}



/* BRAND_HEADER_V2 */

.brand{
    width:230px;
    height:66px;
    margin-right:auto;

    display:flex;
    align-items:center;

    overflow:hidden;
}

.brand-logo{
    width:230px;
    height:66px;

    display:block;

    object-fit:contain;
    object-position:left center;

    filter:
        drop-shadow(
            0 0 12px
            rgba(178,56,255,.18)
        );
}

@media(max-width:570px){
    .brand{
        width:175px;
        height:56px;
    }

    .brand-logo{
        width:175px;
        height:56px;
    }
}



/* BRAND_HEADER_V3 */

.brand{
    width:300px;
    height:74px;
    margin-right:auto;

    display:flex;
    align-items:center;
    overflow:visible;
}

.brand-logo{
    width:300px;
    height:74px;

    display:block;

    object-fit:contain;
    object-position:left center;

    transform:scale(1.08);
    transform-origin:left center;

    filter:
        drop-shadow(
            0 0 16px
            rgba(178,56,255,.24)
        );
}

.header-inner{
    min-height:86px;
}

.main-nav{
    margin-left:18px;
}

@media(max-width:900px){
    .brand{
        width:240px;
        height:66px;
    }

    .brand-logo{
        width:240px;
        height:66px;
        transform:scale(1.04);
    }
}

@media(max-width:570px){
    .brand{
        width:185px;
        height:58px;
    }

    .brand-logo{
        width:185px;
        height:58px;
        transform:none;
    }
}



/* HEADER_REFERENCE_FINAL */

.header-inner{
    min-height:84px;
}

.brand-reference{
    width:auto;
    height:auto;

    margin-right:auto;

    display:flex;
    align-items:center;
    gap:12px;

    overflow:visible;
}

.brand-emblem{
    width:64px;
    height:64px;

    flex:0 0 64px;

    display:block;
    object-fit:contain;

    filter:
        drop-shadow(
            0 0 14px
            rgba(184,64,255,.38)
        );
}

.brand-reference-text{
    display:flex;
    flex-direction:column;

    line-height:.88;
}

.brand-reference-text strong{
    font-family:Georgia,serif;

    font-size:22px;
    font-weight:700;

    letter-spacing:.16em;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #cac1ce
        );

    -webkit-background-clip:text;
    color:transparent;
}

.brand-reference-text small{
    margin-top:8px;

    color:#c954ff;

    font-size:9px;
    font-weight:900;

    letter-spacing:.48em;

    text-shadow:
        0 0 10px
        rgba(190,60,255,.28);
}

@media(max-width:570px){
    .brand-emblem{
        width:50px;
        height:50px;
        flex-basis:50px;
    }

    .brand-reference-text strong{
        font-size:17px;
    }

    .brand-reference-text small{
        font-size:7px;
    }
}



/* FINAL_BRAND_BIND */

.final-brand{
    width:300px;
    height:76px;

    margin-right:auto;

    display:flex;
    align-items:center;

    overflow:visible;
}

.final-brand-logo{
    width:300px;
    height:76px;

    display:block;

    object-fit:contain;
    object-position:left center;

    filter:
        drop-shadow(
            0 0 15px
            rgba(179,58,255,.28)
        );
}

.header-inner{
    min-height:88px;
}

@media(max-width:900px){
    .final-brand{
        width:240px;
        height:66px;
    }

    .final-brand-logo{
        width:240px;
        height:66px;
    }
}

@media(max-width:570px){
    .header-inner{gap:8px}
    .header-actions{gap:4px;flex-shrink:0}
    .header-actions .discord-button{display:none}
    .final-brand{
        width:min(185px,calc(100vw - 230px));
        height:56px;
    }

    .final-brand-logo{
        width:100%;
        height:56px;
    }
}


.locked-chapter-screen{min-height:65vh;display:grid;place-items:center;align-content:center;gap:12px;padding:32px;text-align:center}.locked-chapter-screen>span{font-size:48px}.locked-chapter-screen h1,.locked-chapter-screen p{margin:0}.locked-chapter-screen p{max-width:560px;color:#978b9d;line-height:1.7}.locked-chapter-screen a{margin-top:8px;padding:11px 16px;border:1px solid var(--line);border-radius:8px;color:#d86cff}

.site-footer>div{display:grid;gap:5px}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.site-footer a{color:#a98bb7}

.about-section{
    width:min(var(--content),calc(100% - 32px));
    margin:38px auto;
    padding:28px;
    border:1px solid var(--line);
    border-radius:16px;
    background:radial-gradient(circle at 10% 0,rgba(127,39,184,.14),transparent 42%),#09050f
}
.about-section h2{max-width:760px}
.about-section p{max-width:900px;color:#a69aaa;line-height:1.75}
.about-section a{color:#d16cff}
.about-section .about-icon-credit{font-size:12px;color:#786e82;margin-top:-6px}

.legal-page{min-height:55vh}
.legal-page form{max-width:720px;margin:22px 0}
.legal-page input,.legal-page textarea{
    width:100%;
    padding:11px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#08040c;
    color:#fff
}
.legal-page textarea{min-height:100px;resize:vertical}
.legal-page button{
    width:max-content;
    padding:11px 16px;
    border:1px solid rgba(190,77,255,.35);
    border-radius:8px;
    background:#351148;
    color:#f3d9ff
}

@media(max-width:570px){
    .site-footer nav{justify-content:flex-start}
    .about-section{padding:20px}
}


/* ===== Eternal Web Admin v1 ===== */

.admin-shell {
    width: min(1500px, calc(100% - 32px));
    margin: 28px auto 70px;
}

.admin-wrap {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 90px;
    min-height: calc(100vh - 130px);
    padding: 24px;
    border: 1px solid rgba(164, 97, 255, .18);
    border-radius: 24px;
    background:
        linear-gradient(
            180deg,
            rgba(29, 15, 47, .96),
            rgba(9, 5, 17, .96)
        );
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.admin-sidebar-head h1 {
    margin: 8px 0 6px;
    font-size: 28px;
}

.admin-sidebar-head p {
    margin: 0;
    opacity: .7;
}

.admin-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #b58cff;
}

.admin-nav {
    display: grid;
    gap: 8px;
    margin: 30px 0;
}

.admin-nav button {
    width: 100%;
    padding: 13px 14px;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.admin-nav button:hover,
.admin-nav button.active {
    border-color: rgba(180, 126, 255, .28);
    background: rgba(140, 72, 255, .12);
}

.admin-sidebar-foot {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.admin-sidebar-foot a,
.admin-sidebar-foot button,
.admin-account-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    color: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.admin-content {
    min-width: 0;
}

.admin-view {
    display: none;
}

.admin-view.active {
    display: block;
}

.admin-content > [data-admin-panel].active:not([hidden]) {
    animation: admin-view-enter .18s ease both;
}

/* ADMIN_DRAWER_VIEWPORT_ROOT_FIX_V1
 * Do not transform an ancestor of fixed admin drawers.
 * A transformed ancestor becomes the containing block for position: fixed,
 * which made drawers move with the document scroll position.
 */
@keyframes admin-view-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-nav button {
        transition: none;
    }

    .admin-content > [data-admin-panel].active:not([hidden]) {
        animation: none;
    }
}

.admin-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 20px;
}

.admin-heading h2 {
    margin: 6px 0 0;
    font-size: clamp(28px, 4vw, 42px);
}

.admin-card,
.admin-stat {
    border: 1px solid rgba(170, 111, 255, .16);
    background: rgba(12, 7, 21, .82);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.admin-card {
    padding: 22px;
    border-radius: 20px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.admin-stat-grid.compact {
    margin-top: 20px;
}

.admin-stat {
    padding: 18px;
    border-radius: 18px;
}

.admin-stat span {
    display: block;
    margin-bottom: 9px;
    font-size: 12px;
    opacity: .64;
}

.admin-stat strong {
    font-size: 19px;
}

.admin-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-left: 3px solid #9a5cff;
    background: rgba(154, 92, 255, .08);
}

.admin-status-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.admin-ok-text {
    color: #7ee2ad;
}

.admin-danger-text {
    color: #ff8c9c;
}

.admin-muted-text {
    color: var(--muted);
}

.admin-result {
    margin-top: 18px;
}

.admin-findings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.admin-findings div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
}

.admin-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.admin-search input {
    min-width: 0;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    padding: 13px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .58;
}

.admin-table td small {
    display: block;
    margin-top: 3px;
    opacity: .58;
}

.admin-table button,
.admin-card button,
.admin-heading button {
    padding: 10px 13px;
    border: 1px solid rgba(174, 111, 255, .28);
    border-radius: 10px;
    background: rgba(138, 69, 255, .13);
    color: inherit;
    cursor: pointer;
}

.admin-table button:hover,
.admin-card button:hover,
.admin-heading button:hover {
    background: rgba(138, 69, 255, .23);
}

.admin-table button:disabled,
.admin-card button:disabled {
    opacity: .5;
    cursor: wait;
}

@media (max-width: 980px) {
    .admin-wrap {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        min-height: auto;
    }

    .admin-nav {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }

    .admin-stat-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }
}

@media (max-width: 620px) {
    .admin-shell {
        width: min(
            100% - 18px,
            1500px
        );
        margin-top: 14px;
    }

    .admin-sidebar,
    .admin-card {
        border-radius: 16px;
    }

    .admin-stat-grid,
    .admin-findings,
    .admin-nav {
        grid-template-columns: 1fr;
    }

    .admin-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-search {
        grid-template-columns: 1fr;
    }
}


/* ENGAGEMENT_UI_V1 */

.profile-engagement{
    display:grid;
    gap:16px;
    padding:18px;
    border:1px solid rgba(192,77,255,.20);
    border-radius:14px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(161,54,225,.15),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(23,10,32,.96),
            rgba(10,5,15,.96)
        );
}

.engagement-heading,
.achievement-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.engagement-heading h3,
.achievement-heading h3{
    margin:2px 0 0;
    font-size:16px;
}

.engagement-kicker{
    color:#a864ca;
    font-size:9px;
    font-weight:900;
    letter-spacing:.16em;
}

.streak-flame{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(211,100,255,.27);
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(174,48,221,.25),
            rgba(73,19,100,.08)
        );
    font-size:21px;
    box-shadow:
        0 0 24px rgba(160,43,213,.18);
}

.streak-stats{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:8px;
}

.streak-stat{
    min-width:0;
    padding:12px 8px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
    background:rgba(255,255,255,.025);
    text-align:center;
}

.streak-stat strong{
    display:block;
    color:#efd7ff;
    font-size:20px;
    line-height:1;
}

.streak-stat span{
    display:block;
    margin-top:6px;
    color:#817388;
    font-size:9px;
}

.achievement-hint{
    max-width:170px;
    color:#736879;
    font-size:9px;
    text-align:right;
}

.achievement-grid{
    display:grid;
    grid-template-columns:
        repeat(5,minmax(0,1fr));
    gap:9px;
}

.achievement-badge{
    min-width:0;
    padding:10px 7px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:11px;
    background:rgba(255,255,255,.025);
    text-align:center;
    transition:
        transform .18s ease,
        border-color .18s ease,
        opacity .18s ease;
}

.achievement-badge.unlocked:hover{
    transform:translateY(-2px);
    border-color:rgba(206,88,255,.30);
}

.achievement-medallion{
    position:relative;
    width:52px;
    height:52px;
    margin:0 auto 8px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:2px solid rgba(211,126,255,.36);
    border-radius:50%;
    background:
        radial-gradient(
            circle at 34% 26%,
            rgba(255,255,255,.16),
            transparent 22%
        ),
        radial-gradient(
            circle,
            #46145c,
            #170820 70%
        );
    box-shadow:
        inset 0 0 16px rgba(213,84,255,.13),
        0 0 18px rgba(151,40,194,.12);
}

.achievement-icon{
    position:relative;
    z-index:2;
    color:#f0c6ff;
    font-size:23px;
    text-shadow:
        0 0 12px rgba(219,95,255,.55);
}

.achievement-shine{
    position:absolute;
    inset:-40%;
    transform:rotate(28deg);
    background:
        linear-gradient(
            90deg,
            transparent 35%,
            rgba(255,255,255,.12) 50%,
            transparent 65%
        );
}

.achievement-lock{
    position:absolute;
    right:-2px;
    bottom:-2px;
    z-index:3;
    width:21px;
    height:21px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    background:#110916;
    font-size:10px;
}

.achievement-badge strong{
    display:block;
    overflow:hidden;
    color:#cfc4d4;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.achievement-badge small{
    display:block;
    margin-top:4px;
    color:#716775;
    font-size:8px;
    line-height:1.35;
}

.achievement-badge.locked{
    opacity:.38;
    filter:grayscale(.85);
}

.achievement-badge.locked .achievement-medallion{
    box-shadow:none;
}

.achievement-marathon .achievement-medallion{
    border-style:double;
    border-width:3px;
}

.achievement-streak .achievement-medallion{
    box-shadow:
        inset 0 0 18px rgba(220,95,255,.16),
        0 0 22px rgba(194,51,243,.18);
}

.achievement-loyal .achievement-medallion{
    border-width:3px;
}


/* DAILY_PICK_V1 */

.daily-pick-section{
    margin-top:30px;
}

.daily-pick-card{
    min-height:152px;
    overflow:hidden;
    border:1px solid rgba(194,70,255,.20);
    border-radius:15px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(142,32,213,.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(25,10,36,.98),
            rgba(8,4,12,.98)
        );
}

.daily-pick-placeholder{
    min-height:152px;
    display:grid;
    place-items:center;
    color:#746a79;
    font-size:12px;
}

.daily-pick-link{
    position:relative;
    min-height:152px;
    padding:18px;
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:18px;
    align-items:center;
    overflow:hidden;
}

.daily-pick-cover{
    width:92px;
    height:116px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid rgba(215,103,255,.25);
    border-radius:10px;
    background:
        linear-gradient(
            145deg,
            #351246,
            #100716
        );
    color:#e6b9fa;
    font-family:Georgia,serif;
    font-size:36px;
    box-shadow:
        0 12px 30px rgba(0,0,0,.32);
}

.daily-pick-cover img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.daily-pick-copy{padding-left:14px;
    position:relative;
    z-index:2;
    min-width:0;
}

.daily-pick-label{
    color:#b76ad7;
    font-size:9px;
    font-weight:900;
    letter-spacing:.17em;
}

.daily-pick-copy h3{
    margin:5px 0 7px;
    overflow:hidden;
    color:#eee4f2;
    font-family:Georgia,serif;
    font-size:24px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.daily-pick-copy p{
    max-width:580px;
    margin:0;
    color:#887d8d;
    font-size:11px;
    line-height:1.55;
}

.daily-pick-action{
    display:inline-block;
    margin-top:13px;
    color:#d18cea;
    font-size:10px;
}

.daily-pick-orbit{
    position:absolute;
    right:24px;
    top:18px;
    color:rgba(207,101,255,.18);
    font-size:54px;
    transform:rotate(16deg);
}

.daily-pick-guest{
    min-height:152px;
    padding:24px;
    display:flex;
    align-items:center;
    gap:18px;
}

.daily-pick-symbol{
    flex:0 0 54px;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,80,255,.25);
    border-radius:50%;
    background:rgba(127,35,184,.09);
    color:#ce85e9;
    font-size:24px;
}

.daily-pick-guest strong{
    color:#d8cddd;
    font-size:13px;
}

.daily-pick-guest p{
    margin:5px 0 0;
    color:#776d7e;
    font-size:11px;
    line-height:1.55;
}

@media(max-width:570px){
    .streak-stats{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .achievement-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .achievement-hint{
        display:none;
    }

    .daily-pick-link{
        grid-template-columns:72px minmax(0,1fr);
        gap:13px;
        padding:14px;
    }

    .daily-pick-cover{
        width:72px;
        height:96px;
    }

    .daily-pick-copy h3{
        font-size:19px;
    }

    .daily-pick-orbit{
        display:none;
    }
}


/* MARKET_UI_V1 */
.market-page {
    display: grid;
    gap: 28px;
}

.market-hero {
    position: relative;
    overflow: hidden;
    padding: 42px;
    border: 1px solid rgba(151, 71, 255, .28);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(139, 65, 255, .22),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            rgba(24, 16, 37, .98),
            rgba(8, 8, 13, .98)
        );
}

.market-hero h1 {
    margin: 8px 0 12px;
    font-size: clamp(34px, 5vw, 64px);
}

.market-hero > p:not(.eyebrow) {
    max-width: 720px;
    color: var(--muted);
    line-height: 1.7;
}

.market-account-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.market-account-summary > div {
    min-width: 190px;
    padding: 16px 18px;
    border: 1px solid rgba(151, 71, 255, .24);
    border-radius: 18px;
    background: rgba(8, 8, 14, .58);
}

.market-account-summary span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 13px;
}

.market-account-summary strong {
    font-size: 22px;
}

.market-product-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.eternium-market-section .market-product-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.market-product-card {
    position: relative;
    min-height: 230px;
    padding: 24px;
    border: 1px solid rgba(151, 71, 255, .22);
    border-radius: 22px;
    background:
        linear-gradient(
            160deg,
            rgba(35, 22, 55, .92),
            rgba(12, 10, 18, .98)
        );
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .18);
}

.market-product-card h3 {
    margin: 28px 0 8px;
    font-size: 31px;
}

.market-product-card p {
    color: var(--muted);
}

.market-product-type {
    display: inline-flex;
    padding: 6px 10px;
    border: 1px solid rgba(177, 113, 255, .32);
    border-radius: 999px;
    color: #caa8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.market-eternium-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(167, 93, 255, .19),
            transparent 40%
        ),
        linear-gradient(
            160deg,
            rgba(41, 24, 63, .96),
            rgba(12, 10, 18, .98)
        );
}

.market-buy-button {
    width: 100%;
    margin-top: 24px;
    padding: 12px 14px;
    border: 1px solid rgba(157, 86, 255, .35);
    border-radius: 13px;
    background: rgba(122, 58, 209, .14);
    color: #bca6d9;
    font-weight: 800;
}

.market-buy-button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.market-info-strip {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.market-info-strip > div {
    padding: 20px;
    border: 1px solid rgba(151, 71, 255, .18);
    border-radius: 18px;
    background: rgba(16, 13, 23, .8);
}

.market-info-strip strong,
.market-info-strip span {
    display: block;
}

.market-info-strip span {
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .market-product-grid,
    .eternium-market-section .market-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .market-product-grid,
    .eternium-market-section .market-product-grid {
        grid-template-columns: 1fr;
    }

    .market-hero {
        padding: 28px 20px;
        border-radius: 22px;
    }

    .market-info-strip {
        grid-template-columns: 1fr;
    }
}


.market-login-button {
    appearance: none;
    border: 1px solid rgba(166, 100, 255, .5);
    border-radius: 11px;
    padding: 8px 14px;
    background:
        linear-gradient(
            135deg,
            rgba(136, 65, 230, .28),
            rgba(91, 42, 164, .16)
        );
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.market-login-button:hover {
    transform: translateY(-1px);
    border-color: rgba(190, 135, 255, .82);
    background:
        linear-gradient(
            135deg,
            rgba(151, 76, 245, .42),
            rgba(105, 49, 185, .24)
        );
}

.market-login-button:focus-visible {
    outline: 2px solid #b987ff;
    outline-offset: 3px;
}

/* Account wallet */
.account-wallet{padding:18px;border:1px solid rgba(190,77,255,.3);border-radius:12px;background:linear-gradient(135deg,rgba(106,40,150,.2),rgba(18,9,28,.8));min-width:0}
.account-wallet h3{margin:0 0 12px}
.wallet-balance-label{display:block;color:#bbaec5;font-size:12px}
#account-wallet-balance{display:block;margin:5px 0 18px;font-size:26px;color:#f3d9ff;overflow-wrap:anywhere}
.account-wallet h4{margin:0 0 10px;font-size:14px}
#account-wallet-history{font-size:13px;color:#c6bacd}
.wallet-transactions{list-style:none;margin:0;padding:0}
.wallet-transactions li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid rgba(190,77,255,.15)}
.wallet-transactions li>div{display:grid;gap:5px;min-width:0;overflow-wrap:anywhere}
.wallet-transactions small{color:#a99ab3;font-size:11px}
.wallet-amount{flex-shrink:0;font-size:13px}
.wallet-credit{color:#8ce5b0}.wallet-debit{color:#ffadb8}
#account-wallet-retry{margin-top:12px}
@media(max-width:420px){.wallet-transactions li{flex-direction:column;gap:7px}.account-wallet{padding:14px}}

.chapter-unlock-button{padding:14px 22px;border:1px solid #b879ee;border-radius:10px;background:#58257b;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.chapter-unlock-button:disabled{opacity:.6;cursor:wait}
.chapter-unlock-button:focus-visible{outline:2px solid #e2b6ff;outline-offset:4px}
.locked-chapter-screen a{display:block;margin-top:14px}
#chapter-unlock-message{max-width:520px;margin:16px auto;color:#e4c6f2}
.chapter-unlock-balance{margin:14px auto 16px;font-weight:700;color:#f3d9ff}


/* Signed-in account layout; authentication dialogs retain their existing layout. */
.account-dialog.account-dialog-signed-in {
    width:min(1160px,calc(100% - 32px));
    max-width:calc(100% - 32px);
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#693580 #09050f;
}
.account-panel-signed-in {
    grid-template-columns:minmax(320px,.75fr) minmax(0,1.25fr);
    gap:24px;
    align-items:start;
    overflow-wrap:normal;
}
.account-panel-signed-in .account-column {
    display:grid;
    gap:14px;
    min-width:0;
}
.account-panel-signed-in .account-progress-column { padding-top:0; }
.account-panel-signed-in .account-column > p,
.account-panel-signed-in .account-column > h2 { margin:0; }
.account-panel-signed-in .account-profile-column > h2 { padding-right:24px; }
.account-panel-signed-in .account-library { max-height:none; overflow:visible; }
.account-panel-signed-in .account-library a { flex-wrap:wrap; }
.account-panel-signed-in .account-library a > * { min-width:0; }
.account-panel-signed-in .notification-preferences { display:grid; gap:10px; }
.account-panel-signed-in .notification-preferences label {
    display:flex;
    align-items:center;
    gap:8px;
}
.account-panel-signed-in .notification-preferences input { width:auto; flex-shrink:0; }
.account-panel-signed-in .achievement-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.account-panel-signed-in .streak-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.account-panel-signed-in .account-actions {
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    border-top:1px solid var(--line);
    padding-top:16px;
}
.account-panel-signed-in .account-actions > button { flex:1 1 180px; }
.account-panel-signed-in > .form-message { grid-column:1 / -1; }
.account-panel-signed-in h2,
.account-panel-signed-in h3,
.account-panel-signed-in .achievement-badge strong,
.account-panel-signed-in .achievement-badge small,
.account-panel-signed-in .streak-stat span {
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
}
.account-dialog.account-dialog-signed-in::-webkit-scrollbar {
    width:7px;
}
.account-dialog.account-dialog-signed-in::-webkit-scrollbar-track {
    background:rgba(8,4,12,.7);
}
.account-dialog.account-dialog-signed-in::-webkit-scrollbar-thumb {
    border-radius:999px;
    background:rgba(174,72,218,.42);
}
@media (max-width:980px) {
    .account-panel-signed-in { grid-template-columns:minmax(0,1fr); gap:18px; }
    .account-panel-signed-in .account-progress-column { padding-top:0; }
}
@media (max-width:570px) {
    .account-dialog.account-dialog-signed-in {
        width:calc(100% - 12px);
        max-width:calc(100% - 12px);
        max-height:calc(100dvh - 12px);
    }
    .account-panel-signed-in {
        padding:22px 16px;
        gap:18px;
    }
    .account-panel-signed-in .achievement-heading {
        flex-wrap:wrap;
    }
    .account-panel-signed-in .achievement-hint {
        text-align:left;
    }
    .account-panel-signed-in .achievement-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .account-panel-signed-in .streak-stats {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* MARKET_PURCHASE_FEEDBACK_V1 */
[data-eternium-buy]{
    position:relative;
    transform:translateY(0) scale(1);
    transition:
        transform .14s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
    will-change:transform;
}
[data-eternium-buy]:not(:disabled):hover{
    transform:translateY(-2px);
    border-color:rgba(211,112,255,.72);
    background:rgba(72,25,99,.96);
    box-shadow:
        0 10px 28px rgba(139,47,188,.18),
        inset 0 0 18px rgba(194,80,255,.05);
    filter:brightness(1.06);
}
[data-eternium-buy]:not(:disabled):active{
    transform:translateY(1px) scale(.975);
    box-shadow:
        0 3px 10px rgba(139,47,188,.14),
        inset 0 2px 8px rgba(0,0,0,.28);
    transition-duration:.06s;
}
[data-eternium-buy]:disabled{
    cursor:not-allowed;
    transform:none;
}

.market-toast{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:9999;
    width:min(430px,calc(100vw - 32px));
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:13px;
    padding:16px;
    border:1px solid rgba(194,78,255,.48);
    border-radius:14px;
    background:
        linear-gradient(
            135deg,
            rgba(36,13,50,.98),
            rgba(12,6,18,.98)
        );
    color:#f7ecfb;
    box-shadow:
        0 22px 70px rgba(0,0,0,.55),
        0 0 28px rgba(161,54,225,.13);
    opacity:0;
    transform:translateY(18px) scale(.98);
    transition:
        opacity .2s ease,
        transform .2s ease;
}
.market-toast.show{
    opacity:1;
    transform:translateY(0) scale(1);
}
.market-toast-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(198,89,255,.45);
    border-radius:50%;
    background:rgba(138,44,185,.18);
    color:#e29cff;
    font-size:20px;
    font-weight:800;
}
.market-toast-copy{
    display:grid;
    gap:4px;
    min-width:0;
}
.market-toast-copy strong{
    color:#fff;
    font-size:14px;
}
.market-toast-copy span{
    color:#bbaec2;
    font-size:12px;
    line-height:1.45;
}
.market-toast-close{
    width:30px;
    height:30px;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#9e8ca6!important;
    font-size:21px;
    cursor:pointer;
}
.market-toast-close:hover{
    color:#fff!important;
}
@media(max-width:570px){
    .market-toast{
        right:12px;
        bottom:12px;
        width:calc(100vw - 24px);
    }
}


/* ACCOUNT_ETERNIUM_STATUS_V1 */
.account-eternium{
    display:grid;
    gap:16px;
    padding:18px;
    min-width:0;
    border:1px solid rgba(190,77,255,.25);
    border-radius:12px;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(173,64,225,.13),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            rgba(58,20,80,.24),
            rgba(18,9,28,.86)
        );
}
.account-eternium.active{
    border-color:rgba(202,83,255,.42);
    box-shadow:inset 0 0 28px rgba(156,47,205,.06);
}
.account-eternium-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.account-eternium-heading h3{
    margin:3px 0 0;
}
.account-eternium-crown{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border:1px solid rgba(190,77,255,.3);
    border-radius:50%;
    background:rgba(111,31,148,.18);
    color:#d681ff;
    font-size:20px;
}
.account-eternium.active .account-eternium-crown{
    color:#edb4ff;
    box-shadow:0 0 22px rgba(194,80,255,.13);
}
.account-eternium-grid{
    display:grid;
    grid-template-columns:
        minmax(0,.75fr)
        minmax(0,1fr)
        minmax(0,1.4fr);
    gap:10px;
}
.account-eternium-grid>div{
    display:grid;
    gap:6px;
    min-width:0;
    padding:12px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:10px;
    background:rgba(255,255,255,.022);
}
.account-eternium-grid span{
    color:#97899f;
    font-size:10px;
}
.account-eternium-grid strong{
    color:#eee5f2;
    font-size:13px;
    line-height:1.35;
    overflow-wrap:normal;
    word-break:normal;
}
.account-eternium.active
#account-eternium-state{
    color:#df9cff;
}
@media(max-width:570px){
    .account-eternium{
        padding:14px;
    }
    .account-eternium-grid{
        grid-template-columns:1fr;
    }
}


/* ANNOUNCEMENT_DETAIL_DESIGN_V1 */

.home-announcements {
    display:grid;
    gap:10px;
}

.home-announcement {
    min-width:0;
}

.home-announcement-link {
    display:block;
    padding:15px 16px;
    border:1px solid rgba(190,91,230,.20);
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            rgba(48,20,62,.88),
            rgba(20,11,27,.92)
        );
    text-decoration:none;
    transition:
        transform .16s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.home-announcement-link:hover {
    transform:translateY(-2px);
    border-color:rgba(211,110,255,.52);
    background:
        linear-gradient(
            145deg,
            rgba(65,25,84,.94),
            rgba(27,12,35,.96)
        );
    box-shadow:0 12px 28px rgba(0,0,0,.20);
}

.home-announcement-kicker {
    display:block;
    margin-bottom:6px;
    color:#b96bea;
    font-size:9px;
    font-weight:800;
    letter-spacing:.18em;
}

.home-announcement-title {
    display:block;
    color:#f6eaff;
    font-size:14px;
    line-height:1.35;
    font-weight:800;
}

.home-announcement-summary {
    margin:8px 0 0;
    color:#aa9eae;
    font-size:11px;
    line-height:1.55;
}

.home-announcement-meta {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-top:11px;
    padding-top:9px;
    border-top:1px solid rgba(255,255,255,.055);
    color:#817589;
    font-size:9px;
}

.home-announcement-meta > span:last-child {
    color:#c06bf0;
    font-weight:700;
}

.announcement-page {
    padding-top:48px;
    padding-bottom:80px;
}

.announcement-detail {
    width:min(820px, calc(100% - 32px));
    margin:0 auto;
    padding:38px 44px 44px;
    border:1px solid rgba(190,91,230,.20);
    border-radius:22px;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(149,52,192,.13),
            transparent 38%
        ),
        rgba(18,10,24,.94);
    box-shadow:0 26px 70px rgba(0,0,0,.28);
}

.announcement-back {
    display:inline-flex;
    margin-bottom:34px;
    color:#b76adb;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

.announcement-back:hover {
    color:#dd9cff;
}

.announcement-detail-header {
    padding-bottom:26px;
    border-bottom:1px solid rgba(255,255,255,.075);
}

.announcement-detail-header h1 {
    max-width:700px;
    margin:9px 0 14px;
    color:#fbf4ff;
    font-size:clamp(28px,4vw,46px);
    line-height:1.12;
    letter-spacing:-.03em;
}

.announcement-detail-header time {
    color:#8e8294;
    font-size:12px;
}

.announcement-detail-body {
    max-width:720px;
    padding-top:27px;
}

.announcement-detail-body p {
    margin:0 0 20px;
    color:#d7cedb;
    font-size:16px;
    line-height:1.9;
    letter-spacing:.005em;
}

.announcement-detail-body p:last-child {
    margin-bottom:0;
}

@media (max-width:570px) {
    .home-announcement-link {
        padding:14px;
    }

    .home-announcement-meta {
        align-items:flex-end;
    }

    .announcement-page {
        padding-top:18px;
        padding-bottom:36px;
    }

    .announcement-detail {
        width:calc(100% - 16px);
        padding:25px 20px 30px;
        border-radius:16px;
    }

    .announcement-back {
        margin-bottom:25px;
    }

    .announcement-detail-header h1 {
        font-size:30px;
    }

    .announcement-detail-body {
        padding-top:22px;
    }

    .announcement-detail-body p {
        font-size:15px;
        line-height:1.8;
    }
}


/* HEADER_ACCOUNT_AVATAR_V1 */

.account-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.account-button-avatar {
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:block;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(215,120,255,.55);
    background:#16091f;
}

.account-button-avatar-fallback {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#f2d9ff;
    font-size:11px;
    font-weight:800;
    line-height:1;
}

.account-button-name {
    display:block;
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media(max-width:570px) {
    .account-button {
        gap:6px;
    }

    .account-button-avatar {
        width:24px;
        height:24px;
        flex-basis:24px;
    }

    .account-button-name {
        max-width:72px;
    }
}


/* PROFILE_AVATAR_EDITOR_V1 */

.profile-avatar-editor {
    display:grid;
    gap:10px;
}

.profile-avatar-preview-shell {
    width:88px;
    height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid rgba(202,83,255,.34);
    border-radius:50%;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(164,50,232,.34),
            rgba(25,8,34,.96)
        );
    box-shadow:0 8px 24px rgba(0,0,0,.22);
}

.profile-avatar-preview {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
}

.profile-avatar-preview-fallback {
    display:flex;
    align-items:center;
    justify-content:center;
    color:#f3d9ff;
    font-size:30px;
    font-weight:800;
    line-height:1;
}

.profile-avatar-preview[hidden] {
    display:none;
}

.profile-avatar-help {
    color:#8f8296;
    font-size:10px;
    line-height:1.5;
}

@media(max-width:570px) {
    .profile-avatar-preview-shell {
        width:76px;
        height:76px;
    }

    .profile-avatar-preview-fallback {
        font-size:26px;
    }
}


/* READER_COMMENT_AVATAR_V1 */

.reader-comment-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.reader-comment-author {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.reader-comment-author strong {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.reader-comment-avatar {
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:block;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(207,96,255,.42);
    background:#16091f;
}

.reader-comment-avatar-fallback {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#f1d9ff;
    font-size:13px;
    font-weight:800;
    line-height:1;
}

.reader-comment-date {
    flex:0 0 auto;
    color:#807486;
    font-size:10px;
}

@media(max-width:570px) {
    .reader-comment-avatar {
        width:30px;
        height:30px;
        flex-basis:30px;
    }

    .reader-comment-header {
        gap:8px;
    }
}

/* Profile sections: retain existing field and card styles. */
.account-panel-signed-in { grid-template-columns:180px minmax(0,1fr); }
.account-section-tabs { display:flex; flex-direction:column; gap:8px; min-width:0; }
.account-panel-signed-in .account-section-tabs button { text-align:left; background:#151018; }
.account-panel-signed-in .account-section-tabs button[aria-selected="true"] { background:#351148; border-color:#bd4cff; color:#efc9ff; }
.account-section-tabs button:focus-visible, .account-section-pane:focus-visible { outline:2px solid #d778ff; outline-offset:3px; }
.account-section-content { min-width:0; padding-top:16px; }
.account-panel-signed-in .account-section-pane[hidden] { display:none; }
.account-section-pane > p, .account-section-pane > h2 { overflow-wrap:anywhere; }
.account-panel-signed-in > .form-message { grid-column:2; }
@media (max-width:700px) {
    .account-panel-signed-in { grid-template-columns:minmax(0,1fr); }
    .account-section-tabs { flex-direction:row; overflow-x:auto; padding:4px 2px 8px; margin-right:24px; }
    .account-section-tabs button { flex:0 0 auto; white-space:nowrap; }
    .account-section-content { padding-top:0; }
    .account-panel-signed-in > .form-message { grid-column:1; }
}


/* ADMIN_ANNOUNCEMENTS_SAFE_V1 */

.admin-view[data-admin-panel="announcements"] .admin-heading {
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.admin-view[data-admin-panel="announcements"] .admin-heading h2 {
    margin-top:5px;
    font-size:clamp(22px,3vw,30px);
    letter-spacing:-.025em;
}

.admin-view[data-admin-panel="announcements"] form {
    max-width:900px;
    padding:22px;
    margin-bottom:24px;
    border:1px solid rgba(188,86,255,.18);
    border-radius:18px;
    background:
        radial-gradient(
            circle at top right,
            rgba(164,62,230,.10),
            transparent 38%
        ),
        rgba(19,13,25,.72);
    box-shadow:0 18px 44px rgba(0,0,0,.16);
}

.admin-view[data-admin-panel="announcements"] form label {
    display:grid;
    gap:8px;
    margin-bottom:16px;
    color:#cfc3d5;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
}

.admin-view[data-admin-panel="announcements"] form input,
.admin-view[data-admin-panel="announcements"] form textarea {
    width:100%;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:rgba(9,7,13,.72);
    color:#f7effb;
    padding:12px 14px;
    font:inherit;
    outline:none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.admin-view[data-admin-panel="announcements"] form textarea {
    min-height:150px;
    resize:vertical;
    line-height:1.6;
}

.admin-view[data-admin-panel="announcements"] form input:focus,
.admin-view[data-admin-panel="announcements"] form textarea:focus {
    border-color:rgba(191,83,255,.62);
    background:rgba(16,10,22,.92);
    box-shadow:0 0 0 3px rgba(174,67,235,.10);
}

.admin-view[data-admin-panel="announcements"] form button[type="submit"] {
    min-height:42px;
    padding:0 18px;
    border:1px solid rgba(215,121,255,.38);
    border-radius:12px;
    background:
        linear-gradient(
            135deg,
            rgba(146,45,205,.96),
            rgba(91,31,139,.96)
        );
    color:#fff;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(101,30,144,.22);
    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

.admin-view[data-admin-panel="announcements"] form button[type="submit"]:hover {
    transform:translateY(-1px);
    filter:brightness(1.08);
    box-shadow:0 14px 30px rgba(101,30,144,.30);
}

#admin-announcement-message:not(:empty) {
    margin-top:14px;
    padding:10px 12px;
    border:1px solid rgba(183,102,224,.20);
    border-radius:10px;
    background:rgba(130,51,168,.08);
}

#admin-announcement-list {
    display:grid;
    gap:12px;
    max-width:900px;
}

#admin-announcement-list > * {
    border:1px solid rgba(255,255,255,.075);
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            rgba(31,20,39,.86),
            rgba(17,12,22,.90)
        );
    box-shadow:0 12px 28px rgba(0,0,0,.12);
}

#admin-announcement-list > div {
    padding:16px;
}

#admin-announcement-list strong {
    color:#f5e9fa;
}

#admin-announcement-list small {
    color:#8f8395;
}

#admin-announcement-list button[data-announcement-delete] {
    border:1px solid rgba(255,93,119,.26);
    border-radius:9px;
    background:rgba(150,39,60,.10);
    color:#ff9eae;
    padding:8px 12px;
    font-weight:700;
    cursor:pointer;
    transition:
        background .18s ease,
        border-color .18s ease;
}

#admin-announcement-list button[data-announcement-delete]:hover {
    background:rgba(181,45,70,.18);
    border-color:rgba(255,93,119,.45);
}

@media (max-width:700px) {
    .admin-view[data-admin-panel="announcements"] form {
        padding:16px;
        border-radius:14px;
    }
}


/* ETERNAL SALES CODE UI */
.sales-code-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(310px, 1fr));
    gap: 20px;
    margin-top: 22px;
}

.sales-code-card {
    padding: 24px;
    border: 1px solid rgba(150, 110, 255, .22);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at top right,
            rgba(125, 75, 255, .16),
            transparent 38%
        ),
        rgba(16, 13, 25, .78);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, .22);
}

.sales-code-card-head {
    margin-bottom: 20px;
}

.sales-code-card-head h3 {
    margin: 8px 0 6px;
    font-size: 1.25rem;
}

.sales-code-card-head p {
    margin: 0;
    opacity: .72;
    line-height: 1.55;
}

.sales-code-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
    background: rgba(132, 82, 255, .18);
    border:
        1px solid rgba(157, 118, 255, .32);
}

.sales-code-badge.gift {
    background: rgba(214, 169, 67, .12);
    border-color: rgba(214, 169, 67, .28);
}

.sales-code-form {
    display: grid;
    gap: 14px;
}

.sales-code-form label {
    display: grid;
    gap: 7px;
}

.sales-code-form label > span {
    font-size: .82rem;
    font-weight: 700;
    opacity: .8;
}

.sales-code-form select,
.sales-code-form input,
.sales-code-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border:
        1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    background: rgba(5, 4, 10, .72);
    color: inherit;
    outline: none;
}

.sales-code-form select:focus,
.sales-code-form input:focus,
.sales-code-form textarea:focus {
    border-color: rgba(150, 105, 255, .65);
    box-shadow:
        0 0 0 3px rgba(130, 80, 255, .10);
}

.sales-code-primary {
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #7548e8,
            #9d63ff
        );
}

.sales-code-primary:disabled {
    opacity: .6;
    cursor: wait;
}

.sales-code-output,
.gift-code-result {
    padding: 14px;
    border:
        1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(0, 0, 0, .22);
}

.sales-code-output-head,
.gift-code-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.gift-code-result > strong {
    display: block;
    margin: 10px 0 14px;
    font-family: monospace;
    font-size: 1.05rem;
    word-break: break-all;
}

.redeem-code-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.redeem-code-form small {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .redeem-code-form {
        grid-template-columns: 1fr;
    }

    .redeem-code-form small {
        grid-column: auto;
    }
}


/* COSMETICS_UI_V1 */

.profile-avatar-preview-shell.cosmetic-avatar_frame-eternal-violet,
.profile-avatar-preview-shell.cosmetic-avatar_frame-void-crown {
    overflow:visible;
}

.reader-comment-avatar-shell {
    position:relative;
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:50%;
}

.reader-comment-avatar-shell .reader-comment-avatar {
    flex:none;
}

.cosmetic-avatar_frame-eternal-violet,
.cosmetic-avatar_frame-void-crown {
    position:relative;
}

.cosmetic-avatar_frame-eternal-violet::before,
.cosmetic-avatar_frame-void-crown::before {
    content:"";
    position:absolute;
    pointer-events:none;
    z-index:3;
    border-radius:50%;
}

.cosmetic-avatar_frame-eternal-violet::before {
    inset:-5px;
    border:2px solid #cb5cff;
    box-shadow:
        0 0 8px rgba(207,87,255,.92),
        0 0 20px rgba(132,43,235,.62),
        inset 0 0 9px rgba(239,174,255,.28);
}

.cosmetic-avatar_frame-eternal-violet::after {
    content:"";
    position:absolute;
    z-index:4;
    top:-11px;
    right:-5px;
    color:#f5ceff;
    font-size:15px;
    line-height:1;
    text-shadow:
        0 0 7px #e18cff,
        0 0 14px #a72eff;
}

.cosmetic-avatar_frame-void-crown::before {
    inset:-6px;
    border:2px solid #8163ff;
    box-shadow:
        0 0 0 2px rgba(23,10,43,.95),
        0 0 17px rgba(102,65,255,.78),
        0 0 31px rgba(54,22,126,.58);
}

.cosmetic-avatar_frame-void-crown::after {
    content:"";
    position:absolute;
    z-index:4;
    top:-17px;
    left:50%;
    transform:translateX(-50%);
    color:#c7b4ff;
    font-size:18px;
    line-height:1;
    text-shadow:
        0 0 8px #8e70ff,
        0 0 15px #5e38db;
}

/* Name effects */

.cosmetic-name_effect-neon-violet {
    color:#f1c6ff !important;
    text-shadow:
        0 0 5px rgba(240,136,255,.95),
        0 0 11px rgba(190,66,255,.82),
        0 0 20px rgba(117,34,214,.52);
}

.cosmetic-name_effect-starlight {
    color:#fff0c9 !important;
    text-shadow:
        0 0 5px rgba(255,242,190,.94),
        0 0 12px rgba(213,177,255,.78),
        0 0 22px rgba(128,84,255,.55);
}

/* Badges */

.profile-cosmetic-badge,
.reader-comment-badge {
    display:inline-flex;
    align-items:center;
    width:max-content;
    border-radius:999px;
    font-weight:900;
    white-space:nowrap;
}

.profile-cosmetic-badge {
    margin-left:8px;
    padding:4px 8px;
    font-size:9px;
}

.reader-comment-badge {
    padding:3px 6px;
    font-size:7px;
}

.cosmetic-badge-eternal-star {
    border:1px solid rgba(226,145,255,.48);
    background:
        linear-gradient(
            135deg,
            rgba(114,36,151,.58),
            rgba(28,10,40,.94)
        );
    color:#f3ccff;
    box-shadow:
        0 0 12px rgba(185,68,235,.24);
}

.cosmetic-badge-eternal-star::before {
    content:"";
    margin-right:4px;
    color:#ebadff;
}

.cosmetic-badge-night-flame {
    border:1px solid rgba(142,112,255,.48);
    background:
        linear-gradient(
            135deg,
            rgba(46,27,111,.86),
            rgba(13,8,30,.96)
        );
    color:#d2c6ff;
    box-shadow:
        0 0 13px rgba(91,62,231,.3);
}

.cosmetic-badge-night-flame::before {
    content:"";
    margin-right:4px;
    color:#a98dff;
}

/* Profile decoration */

.profile-cosmetic-heading {
    position:relative;
    width:max-content;
    max-width:100%;
}

.profile-cosmetic-heading h2 {
    display:inline-block;
}

.cosmetic-profile_decoration-eternal-aura {
    padding:8px 13px;
    border:1px solid rgba(194,72,255,.12);
    border-radius:14px;
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(180,62,244,.19),
            transparent 58%
        );
    box-shadow:
        inset 0 0 25px rgba(184,64,242,.09),
        0 0 25px rgba(135,38,205,.10);
}

.cosmetic-profile_decoration-cosmic-dust {
    padding:8px 13px;
    border-radius:14px;
    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255,255,255,.46) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 76% 52%,
            rgba(195,151,255,.48) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 48% 82%,
            rgba(137,92,255,.46) 0 1px,
            transparent 2px
        );
    background-size:
        44px 34px,
        58px 48px,
        70px 54px;
    box-shadow:
        0 0 28px rgba(118,74,255,.13);
}

@media(max-width:570px) {
    .reader-comment-avatar-shell {
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .reader-comment-badge {
        display:none;
    }
}


/* COSMETICS_MARKET_UI_V1 */

.cosmetic-market-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.cosmetic-market-card {
    overflow:visible;
}

.cosmetic-market-loading,
.cosmetic-market-empty,
.cosmetic-market-error {
    grid-column:1 / -1;
    padding:28px;
    border:1px dashed rgba(190,93,255,.25);
    border-radius:18px;
    color:#928499;
    text-align:center;
}

.cosmetic-market-preview {
    position:relative;
    width:84px;
    height:84px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(118,65,143,.42),
            rgba(21,10,29,.96) 70%
        );
}

.cosmetic-market-preview-core {
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#160b1e;
    color:#f2d8ff;
    font-size:25px;
    font-weight:900;
}

.cosmetic-market-preview.cosmetic-profile_decoration-eternal-aura {
    border-radius:20px;
    box-shadow:
        inset 0 0 26px rgba(198,73,255,.28),
        0 0 24px rgba(155,51,224,.26);
}

.cosmetic-market-preview.cosmetic-profile_decoration-cosmic-dust {
    border-radius:20px;
}

@media(max-width:1100px) {
    .cosmetic-market-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:760px) {
    .cosmetic-market-grid {
        grid-template-columns:1fr;
    }
}


/* COSMETICS_60_V1 */

/* Shared avatar-frame engine */
.profile-avatar-preview-shell[class*="cosmetic-avatar_frame-"],
.reader-comment-avatar-shell[class*="cosmetic-avatar_frame-"],
.series-review-avatar-shell[class*="cosmetic-avatar_frame-"],
.cosmetic-market-preview[class*="cosmetic-avatar_frame-"] {
    overflow:visible;
    position:relative;
}

.profile-avatar-preview-shell[class*="cosmetic-avatar_frame-"]::before,
.reader-comment-avatar-shell[class*="cosmetic-avatar_frame-"]::before,
.series-review-avatar-shell[class*="cosmetic-avatar_frame-"]::before,
.cosmetic-market-preview[class*="cosmetic-avatar_frame-"]::before {
    content:"";
    position:absolute;
    inset:-6px;
    z-index:3;
    pointer-events:none;
    border-radius:50%;
    border:2px solid hsl(
        var(--cosmetic-h) 92% 69%
    );
    box-shadow:
        0 0 7px hsl(
            var(--cosmetic-h) 95% 64% / .85
        ),
        0 0 19px hsl(
            var(--cosmetic-h) 90% 48% / .5
        ),
        inset 0 0 9px hsl(
            var(--cosmetic-h) 100% 82% / .24
        );
}

.profile-avatar-preview-shell[class*="cosmetic-avatar_frame-"]::after,
.reader-comment-avatar-shell[class*="cosmetic-avatar_frame-"]::after,
.series-review-avatar-shell[class*="cosmetic-avatar_frame-"]::after,
.cosmetic-market-preview[class*="cosmetic-avatar_frame-"]::after {
    content:var(--cosmetic-symbol);
    position:absolute;
    z-index:4;
    top:-13px;
    right:-7px;
    color:hsl(
        var(--cosmetic-h) 100% 84%
    );
    font-size:15px;
    line-height:1;
    text-shadow:
        0 0 8px hsl(
            var(--cosmetic-h) 95% 62%
        ),
        0 0 17px hsl(
            var(--cosmetic-h) 90% 48%
        );
}

/* COSMETIC_INTENSITY_V1: a user-facing 3-level display preference
   (Profil & Ayarlar > Efekt Yoğunluğu) - "medium" matches the
   COSMETICS_LIVELY_V1 defaults exactly (nothing changes for users who
   never touch the setting), "subtle" dims/slows things down for users
   who find the defaults distracting, "vivid" pushes them further for
   users who want the Discord-Nitro-style drama turned up. */
:root {
    --cosmetic-fx-decoration-opacity: .5;
    --cosmetic-fx-motion-opacity: .32;
    --cosmetic-name-shimmer-time: 4.5s;
}
html[data-cosmetic-intensity="subtle"] {
    --cosmetic-fx-decoration-opacity: .3;
    --cosmetic-fx-motion-opacity: .18;
    --cosmetic-name-shimmer-time: 7s;
}
html[data-cosmetic-intensity="vivid"] {
    --cosmetic-fx-decoration-opacity: .72;
    --cosmetic-fx-motion-opacity: .5;
    --cosmetic-name-shimmer-time: 3s;
}

/* Shared name-effect engine */
/* COSMETICS_LIVELY_V1: the name itself was a flat, static color before -
   only its tiny trailing icon animated. A slow gradient sweep gives the
   text the same "alive" premium feel as the icon, while keeping full
   contrast (the sweep only shifts between two light shades of the same
   hue, never through anything darker or lower-contrast). */
@keyframes cosmetic-name-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
[class*="cosmetic-name_effect-"] {
    background-image:linear-gradient(
        100deg,
        hsl(var(--cosmetic-h) 92% 78%) 0%,
        hsl(var(--cosmetic-h) 100% 94%) 45%,
        hsl(var(--cosmetic-h) 92% 78%) 90%
    );
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
    -webkit-text-fill-color:transparent;
    letter-spacing:var(--cosmetic-spacing);
    transform:
        translateX(var(--cosmetic-shift));
    text-shadow:
        0 0 4px hsl(
            var(--cosmetic-h) 100% 78% / .9
        ),
        0 0 10px hsl(
            var(--cosmetic-h) 95% 60% / .72
        ),
        0 0 20px hsl(
            var(--cosmetic-h) 90% 44% / .46
        );
    animation:cosmetic-name-shimmer
        var(--cosmetic-name-shimmer-time,4.5s) ease-in-out infinite;
}

/* Shared badge engine */
[class*="cosmetic-badge-"] {
    border:
        1px solid
        hsl(
            var(--cosmetic-h) 82% 70% / .46
        );
    background:
        linear-gradient(
            var(--cosmetic-angle),
            hsl(
                var(--cosmetic-h) 66% 34% / .76
            ),
            hsl(
                var(--cosmetic-h) 52% 10% / .96
            )
        );
    color:
        hsl(
            var(--cosmetic-h) 90% 87%
        );
    box-shadow:
        0 0 13px
        hsl(
            var(--cosmetic-h) 82% 54% / .24
        );
}

[class*="cosmetic-badge-"]::before {
    content:var(--cosmetic-symbol);
    margin-right:4px;
    color:
        hsl(
            var(--cosmetic-h) 100% 78%
        );
}

/* Shared profile-decoration engine */
.profile-cosmetic-heading[class*="cosmetic-profile_decoration-"],
.cosmetic-market-preview[class*="cosmetic-profile_decoration-"] {
    position:relative;
    border-radius:15px;
    background:
        radial-gradient(
            circle at 18% 26%,
            hsl(
                var(--cosmetic-h) 100% 85% / .28
            ) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 73% 62%,
            hsl(
                calc(var(--cosmetic-h) + 28)
                92% 72% / .24
            ) 0 2px,
            transparent 3px
        ),
        linear-gradient(
            var(--cosmetic-angle),
            hsl(
                var(--cosmetic-h) 72% 34% / .14
            ),
            transparent 65%
        );
    background-size:
        var(--cosmetic-size)
        var(--cosmetic-size),
        calc(var(--cosmetic-size) + 18px)
        calc(var(--cosmetic-size) + 12px),
        auto;
    box-shadow:
        inset 0 0 25px
        hsl(
            var(--cosmetic-h) 90% 60% / .08
        ),
        0 0 26px
        hsl(
            var(--cosmetic-h) 82% 46% / .12
        );
}

.profile-cosmetic-heading[class*="cosmetic-profile_decoration-"] {
    padding:8px 13px;
}

.cosmetic-avatar_frame-eternal-violet {
    --cosmetic-h:282;
    --cosmetic-symbol:"";
    --cosmetic-spin:9s;
}
.cosmetic-avatar_frame-void-crown {
    --cosmetic-h:258;
    --cosmetic-symbol:"";
    --cosmetic-spin:10s;
}
.cosmetic-avatar_frame-crimson-orbit {
    --cosmetic-h:350;
    --cosmetic-symbol:"";
    --cosmetic-spin:11s;
}
.cosmetic-avatar_frame-lunar-halo {
    --cosmetic-h:220;
    --cosmetic-symbol:"";
    --cosmetic-spin:12s;
}
.cosmetic-avatar_frame-solar-flare {
    --cosmetic-h:42;
    --cosmetic-symbol:"";
    --cosmetic-spin:13s;
}
.cosmetic-avatar_frame-arcane-ring {
    --cosmetic-h:274;
    --cosmetic-symbol:"";
    --cosmetic-spin:14s;
}
.cosmetic-avatar_frame-frost-veil {
    --cosmetic-h:195;
    --cosmetic-symbol:"";
    --cosmetic-spin:8s;
}
.cosmetic-avatar_frame-emerald-sigil {
    --cosmetic-h:145;
    --cosmetic-symbol:"";
    --cosmetic-spin:9s;
}
.cosmetic-avatar_frame-blood-moon {
    --cosmetic-h:2;
    --cosmetic-symbol:"";
    --cosmetic-spin:10s;
}
.cosmetic-avatar_frame-royal-aegis {
    --cosmetic-h:48;
    --cosmetic-symbol:"";
    --cosmetic-spin:11s;
}
.cosmetic-avatar_frame-phantom-chain {
    --cosmetic-h:265;
    --cosmetic-symbol:"";
    --cosmetic-spin:12s;
}
.cosmetic-avatar_frame-celestial-wing {
    --cosmetic-h:205;
    --cosmetic-symbol:"";
    --cosmetic-spin:13s;
}
.cosmetic-avatar_frame-obsidian-thorn {
    --cosmetic-h:285;
    --cosmetic-symbol:"";
    --cosmetic-spin:14s;
}
.cosmetic-avatar_frame-cyber-pulse {
    --cosmetic-h:180;
    --cosmetic-symbol:"";
    --cosmetic-spin:8s;
}
.cosmetic-avatar_frame-aurora-gate {
    --cosmetic-h:315;
    --cosmetic-symbol:"";
    --cosmetic-spin:9s;
}
.cosmetic-name_effect-neon-violet {
    --cosmetic-h:286;
    --cosmetic-shift:-1px;
    --cosmetic-spacing:0.18px;
}
.cosmetic-name_effect-starlight {
    --cosmetic-h:47;
    --cosmetic-shift:0px;
    --cosmetic-spacing:0.26px;
}
.cosmetic-name_effect-crimson-glow {
    --cosmetic-h:350;
    --cosmetic-shift:1px;
    --cosmetic-spacing:0.33999999999999997px;
}
.cosmetic-name_effect-lunar-silver {
    --cosmetic-h:215;
    --cosmetic-shift:2px;
    --cosmetic-spacing:0.1px;
}
.cosmetic-name_effect-solar-gold {
    --cosmetic-h:43;
    --cosmetic-shift:-2px;
    --cosmetic-spacing:0.18px;
}
.cosmetic-name_effect-arcane-rune {
    --cosmetic-h:270;
    --cosmetic-shift:-1px;
    --cosmetic-spacing:0.26px;
}
.cosmetic-name_effect-frost-shimmer {
    --cosmetic-h:190;
    --cosmetic-shift:0px;
    --cosmetic-spacing:0.33999999999999997px;
}
.cosmetic-name_effect-emerald-spark {
    --cosmetic-h:145;
    --cosmetic-shift:1px;
    --cosmetic-spacing:0.1px;
}
.cosmetic-name_effect-blood-script {
    --cosmetic-h:2;
    --cosmetic-shift:2px;
    --cosmetic-spacing:0.18px;
}
.cosmetic-name_effect-royal-prism {
    --cosmetic-h:52;
    --cosmetic-shift:-2px;
    --cosmetic-spacing:0.26px;
}
.cosmetic-name_effect-phantom-fade {
    --cosmetic-h:260;
    --cosmetic-shift:-1px;
    --cosmetic-spacing:0.33999999999999997px;
}
.cosmetic-name_effect-celestial-rainbow {
    --cosmetic-h:200;
    --cosmetic-shift:0px;
    --cosmetic-spacing:0.1px;
}
.cosmetic-name_effect-obsidian-glint {
    --cosmetic-h:290;
    --cosmetic-shift:1px;
    --cosmetic-spacing:0.18px;
}
.cosmetic-name_effect-cyber-scan {
    --cosmetic-h:180;
    --cosmetic-shift:2px;
    --cosmetic-spacing:0.26px;
}
.cosmetic-name_effect-aurora-wave {
    --cosmetic-h:315;
    --cosmetic-shift:-2px;
    --cosmetic-spacing:0.33999999999999997px;
}
.cosmetic-badge-eternal-star {
    --cosmetic-h:285;
    --cosmetic-symbol:"";
    --cosmetic-angle:117deg;
}
.cosmetic-badge-night-flame {
    --cosmetic-h:255;
    --cosmetic-symbol:"";
    --cosmetic-angle:124deg;
}
.cosmetic-badge-crimson-eye {
    --cosmetic-h:350;
    --cosmetic-symbol:"";
    --cosmetic-angle:131deg;
}
.cosmetic-badge-moon-seal {
    --cosmetic-h:220;
    --cosmetic-symbol:"";
    --cosmetic-angle:138deg;
}
.cosmetic-badge-sun-core {
    --cosmetic-h:42;
    --cosmetic-symbol:"";
    --cosmetic-angle:145deg;
}
.cosmetic-badge-arcane-mark {
    --cosmetic-h:275;
    --cosmetic-symbol:"";
    --cosmetic-angle:152deg;
}
.cosmetic-badge-frost-crystal {
    --cosmetic-h:190;
    --cosmetic-symbol:"";
    --cosmetic-angle:159deg;
}
.cosmetic-badge-emerald-leaf {
    --cosmetic-h:145;
    --cosmetic-symbol:"";
    --cosmetic-angle:166deg;
}
.cosmetic-badge-blood-drop {
    --cosmetic-h:2;
    --cosmetic-symbol:"";
    --cosmetic-angle:173deg;
}
.cosmetic-badge-royal-crown {
    --cosmetic-h:48;
    --cosmetic-symbol:"";
    --cosmetic-angle:180deg;
}
.cosmetic-badge-phantom-skull {
    --cosmetic-h:260;
    --cosmetic-symbol:"";
    --cosmetic-angle:187deg;
}
.cosmetic-badge-celestial-orb {
    --cosmetic-h:205;
    --cosmetic-symbol:"";
    --cosmetic-angle:194deg;
}
.cosmetic-badge-obsidian-shard {
    --cosmetic-h:288;
    --cosmetic-symbol:"";
    --cosmetic-angle:201deg;
}
.cosmetic-badge-cyber-chip {
    --cosmetic-h:180;
    --cosmetic-symbol:"";
    --cosmetic-angle:208deg;
}
.cosmetic-badge-aurora-gem {
    --cosmetic-h:315;
    --cosmetic-symbol:"";
    --cosmetic-angle:215deg;
}
.cosmetic-profile_decoration-eternal-aura {
    --cosmetic-h:285;
    --cosmetic-size:37px;
    --cosmetic-angle:101deg;
}
.cosmetic-profile_decoration-cosmic-dust {
    --cosmetic-h:250;
    --cosmetic-size:40px;
    --cosmetic-angle:112deg;
}
.cosmetic-profile_decoration-crimson-mist {
    --cosmetic-h:350;
    --cosmetic-size:43px;
    --cosmetic-angle:123deg;
}
.cosmetic-profile_decoration-moonlight-field {
    --cosmetic-h:220;
    --cosmetic-size:46px;
    --cosmetic-angle:134deg;
}
.cosmetic-profile_decoration-solar-burst {
    --cosmetic-h:42;
    --cosmetic-size:49px;
    --cosmetic-angle:145deg;
}
.cosmetic-profile_decoration-arcane-circle {
    --cosmetic-h:275;
    --cosmetic-size:52px;
    --cosmetic-angle:156deg;
}
.cosmetic-profile_decoration-frost-field {
    --cosmetic-h:190;
    --cosmetic-size:55px;
    --cosmetic-angle:167deg;
}
.cosmetic-profile_decoration-emerald-vines {
    --cosmetic-h:145;
    --cosmetic-size:58px;
    --cosmetic-angle:178deg;
}
.cosmetic-profile_decoration-blood-moon-sky {
    --cosmetic-h:2;
    --cosmetic-size:61px;
    --cosmetic-angle:189deg;
}
.cosmetic-profile_decoration-royal-banner {
    --cosmetic-h:48;
    --cosmetic-size:64px;
    --cosmetic-angle:200deg;
}
.cosmetic-profile_decoration-phantom-fog {
    --cosmetic-h:260;
    --cosmetic-size:67px;
    --cosmetic-angle:211deg;
}
.cosmetic-profile_decoration-celestial-stars {
    --cosmetic-h:205;
    --cosmetic-size:70px;
    --cosmetic-angle:222deg;
}
.cosmetic-profile_decoration-obsidian-rift {
    --cosmetic-h:288;
    --cosmetic-size:73px;
    --cosmetic-angle:233deg;
}
.cosmetic-profile_decoration-cyber-grid {
    --cosmetic-h:180;
    --cosmetic-size:76px;
    --cosmetic-angle:244deg;
}
.cosmetic-profile_decoration-aurora-sky {
    --cosmetic-h:315;
    --cosmetic-size:79px;
    --cosmetic-angle:255deg;
}

/* END_COSMETICS_60_V1 */

/* COSMETIC_PROFILE_EFFECT_V1 */
.cosmetic-profile_decoration-ether-veil {
    --cosmetic-h:46;
    --cosmetic-size:84px;
    --cosmetic-angle:210deg;
}

/* QUICK_HUB_DROPDOWN_V1: was a full-height edge-attached drawer
   (position:fixed; inset:0 0 0 auto; height:100dvh) - now a compact
   floating panel anchored under the profile button by
   openQuickHub()'s inline top/right, same as the notification bell's
   dropdown. Content and all sub-views are untouched, only the
   container's position/size/shape changed. */
.quick-hub {
    box-sizing: border-box;
    position: fixed;
    /* QUICK_HUB_DROPDOWN_V1: shown non-modally now (dialog.show(), not
       showModal()) - no browser "top layer", so it needs a real
       z-index to sit above the sticky header (z-index:100). */
    z-index: 200;
    margin: 0;
    width: min(390px, 92vw);
    max-width: 92vw;
    height: auto;
    max-height: min(78vh, 720px);
    padding: 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    border: 1px solid #493061;
    border-radius: 18px;
    background: #100d18;
    color: #f3edf9;
    box-shadow: 0 25px 70px #000a;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.quick-hub[open] { animation: quick-hub-enter .16s ease-out; }
/* Non-modal dialogs never render ::backdrop - kept as a no-op rule so
   nothing needs the rule removed if a future modal use returns. */
.quick-hub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quick-hub-top h2 { margin: 0; font-size: 18px; }
.quick-hub button, .quick-hub a { color: inherit; font: inherit; }
.quick-hub-top button { width: 44px; height: 44px; background: transparent; border: 0; font-size: 28px; cursor: pointer; }
.quick-hub .quick-hub-identity { margin: 16px 0; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; }
.quick-hub .profile-avatar-preview-shell { width: 56px; height: 56px; }
.quick-hub .profile-avatar-preview { width: 100%; height: 100%; object-fit: cover; }
.quick-hub .quick-hub-identity h2 { font-size: 20px; margin: 6px 0 0; }
.quick-hub small, .quick-hub-summary { color: #bcb0ca; }
.quick-hub-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; border-block: 1px solid #33243f; }
.quick-hub-stats span { font-size: 12px; color: #bcb0ca; }
.quick-hub-stats strong { display: block; margin-top: 5px; font-size: 15px; color: #e3c8ff; }
.quick-hub-summary { font-size: 12px; overflow-wrap: anywhere; }
.quick-hub-actions { display: grid; gap: 3px; }
.quick-hub-actions > button, .quick-hub-actions > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; text-decoration: none; text-align: left; cursor: pointer; }
.quick-hub-actions > :hover { background: #281b38; }
.quick-hub :focus-visible { outline: 2px solid #bf8fff; outline-offset: 2px; }
.quick-hub-actions [data-hub-logout] { color: #e4a5bc; border-top: 1px solid #33243f; margin-top: 7px; }
.quick-hub-detail { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; margin-top: 12px; }
.quick-hub-detail:empty { display: none; }
.quick-hub-detail button { background: #281b38; border: 1px solid #69448b; border-radius: 8px; min-height: 44px; cursor: pointer; }
.quick-hub button:disabled { opacity: .55; cursor: wait; }
@keyframes quick-hub-enter { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .quick-hub[open] { animation: none; } }


/* QUICK_HUB_SUBVIEWS_V1 */

.quick-hub [hidden] {
    display: none !important;
}

.quick-hub-subview {
    min-width: 0;
    padding-top: 12px;
}

/* DIALOG_ENTRANCE_ANIMATION_V1: clicking a Quick Hub card (Kütüphane,
   Bildirimler, Görevler, ...) swapped straight to that subview via a
   plain hidden-attribute flip - no transition, "pat diye" per the
   user's own words. Same fade+settle treatment as every dialog now
   uses; :not([hidden]) fires it each time the attribute is removed,
   i.e. every card open (not just the dialog's own first open). */
.quick-hub-subview:not([hidden]) {
    animation: quick-hub-subview-enter .16s ease-out;
}
@keyframes quick-hub-subview-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .quick-hub-subview:not([hidden]) { animation: none; }
}

.quick-hub-back {
    width: auto !important;
    margin: 0 0 18px;
}

.quick-hub-subview form,
.quick-hub-subview label,
.quick-hub-list {
    display: grid;
    gap: 10px;
}

.quick-hub-subview form {
    gap: 16px;
}

.quick-hub-subview label {
    color: #d9cce7;
    font-size: 13px;
}

.quick-hub-subview input:not([type="checkbox"]) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #4a315f;
    border-radius: 10px;
    background: #181020;
    color: #f5eefb;
    font: inherit;
}

.quick-hub-subview input:focus {
    outline: 2px solid rgba(187, 131, 244, .38);
    outline-offset: 1px;
}

.quick-hub-subview button {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #593674;
    border-radius: 10px;
    background: #281b38;
    color: inherit;
    cursor: pointer;
}

.quick-hub-subview button:hover {
    background: #38234b;
}

.quick-hub-subview button:disabled {
    cursor: wait;
    opacity: .65;
}

.quick-hub-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}

.quick-hub-check input {
    accent-color: #bb83f4;
}

.quick-hub-list {
    gap: 0;
}

.quick-hub-list > a,
.quick-hub-list > article {
    display: grid;
    gap: 7px;
    padding: 12px 0;
    border-bottom: 1px solid #33243f;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.quick-hub-list > a:hover {
    color: #dab1ff;
}

.quick-hub-subview h3 {
    margin: 22px 0 8px;
    font-size: 15px;
}

.quick-hub-subview p {
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.quick-hub-muted {
    margin: 0;
    color: #a997ba;
    font-size: 13px;
}

.quick-hub-view-message {
    min-height: 20px;
    margin-top: 14px;
    color: #dab1ff;
    font-size: 13px;
}

.quick-hub-reward-summary {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid #3c2950;
    border-radius: 12px;
    background: rgba(38, 24, 51, .7);
}

.quick-hub-error {
    display: grid;
    gap: 10px;
}

@media (max-width: 640px) {
    .quick-hub-subview {
        padding-bottom: 18px;
    }

    .quick-hub-subview button {
        min-height: 46px;
    }
}


/* COSMETIC_ACTION_FEEL_V1 */

/* Market kozmetik aksiyon butonları */
[data-cosmetic-action] {
    position: relative;
    transform: translateY(0) scale(1);
    transition:
        transform .11s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background .16s ease,
        opacity .16s ease;
    box-shadow:
        0 5px 0 rgba(24, 10, 34, .92),
        0 9px 20px rgba(0, 0, 0, .22);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

[data-cosmetic-action]:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(205, 133, 255, .78);
    box-shadow:
        0 7px 0 rgba(24, 10, 34, .92),
        0 13px 28px rgba(0, 0, 0, .3),
        0 0 18px rgba(178, 83, 255, .16);
}

[data-cosmetic-action]:active:not(:disabled) {
    transform: translateY(4px) scale(.985);
    box-shadow:
        0 1px 0 rgba(24, 10, 34, .92),
        0 4px 9px rgba(0, 0, 0, .25);
    transition-duration: .05s;
}

[data-cosmetic-action]:focus-visible {
    outline: 2px solid rgba(215, 157, 255, .85);
    outline-offset: 3px;
}

[data-cosmetic-action]:disabled,
[data-cosmetic-action][data-pending="1"] {
    cursor: wait;
    opacity: .65;
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(24, 10, 34, .75),
        0 4px 10px rgba(0, 0, 0, .18);
}

/* Quick Hub kozmetik envanteri */
.quick-hub-cosmetic-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.quick-hub-cosmetic-heading h3 {
    margin: 0 0 5px;
}

.quick-hub-market-link {
    flex: 0 0 auto;
    padding: 9px 11px;
    border: 1px solid #583771;
    border-radius: 10px;
    background: rgba(43, 27, 59, .88);
    color: #ead7f8;
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
    transition:
        transform .12s ease,
        background .15s ease,
        border-color .15s ease;
}

.quick-hub-market-link:hover {
    background: #38234b;
    border-color: #8052a4;
    transform: translateY(-1px);
}

.quick-hub-market-link:active {
    transform: translateY(2px) scale(.985);
}

.quick-hub-cosmetic-inventory {
    display: grid;
    gap: 10px;
}

.quick-hub-cosmetic-item {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #352443;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(39, 24, 52, .9),
            rgba(20, 13, 27, .9)
        );
}

.quick-hub-cosmetic-item .cosmetic-market-preview {
    width: 58px;
    height: 58px;
    min-height: 58px;
    margin: 0;
    border-radius: 13px;
}

.quick-hub-cosmetic-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quick-hub-cosmetic-copy strong {
    overflow: hidden;
    color: #f4ebfa;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-hub-cosmetic-copy small {
    color: #a997b7;
}

.quick-hub-cosmetic-item > button {
    min-width: 74px;
    transform: translateY(0);
    transition:
        transform .1s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
    box-shadow: 0 4px 0 rgba(17, 8, 24, .9);
}

.quick-hub-cosmetic-item > button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: #8052a4;
    background: #39244b;
}

.quick-hub-cosmetic-item > button:active:not(:disabled) {
    transform: translateY(3px) scale(.98);
    box-shadow: 0 1px 0 rgba(17, 8, 24, .9);
}

.quick-hub-cosmetic-item > button:disabled {
    cursor: wait;
    opacity: .65;
}

.quick-hub-empty-state {
    display: grid;
    gap: 12px;
    padding: 20px;
    border: 1px dashed #4a315e;
    border-radius: 14px;
    text-align: center;
}

.quick-hub-empty-state a {
    color: #d9a9ff;
}

.quick-hub-notification-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.quick-hub-notification-tools h3 {
    margin: 0;
}

.quick-hub-notification-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.quick-hub-notification-actions small {
    margin-right: auto;
}

.quick-hub-danger {
    border-color: rgba(217, 84, 117, .45) !important;
    background: rgba(95, 27, 49, .36) !important;
}

.quick-hub-danger:hover:not(:disabled) {
    border-color: rgba(238, 105, 138, .75) !important;
    background: rgba(117, 33, 58, .5) !important;
}

@media (max-width: 640px) {
    .quick-hub-cosmetic-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .quick-hub-market-link {
        text-align: center;
    }

    .quick-hub-cosmetic-item {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .quick-hub-cosmetic-item .cosmetic-market-preview {
        width: 50px;
        height: 50px;
        min-height: 50px;
    }

    .quick-hub-cosmetic-item > button {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* QUICK_HUB_LAST_3_V1 */

.quick-hub-recent {
    margin: 12px 0 16px;
    padding: 13px;
    border: 1px solid #382649;
    border-radius: 13px;
    background: rgba(28, 18, 38, .78);
}

.quick-hub-recent-title {
    display: block;
    margin-bottom: 8px;
    color: #eadcf5;
    font-size: 13px;
}

.quick-hub-recent-transactions {
    display: grid;
    gap: 0;
}

.quick-hub-transaction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid rgba(88, 57, 111, .34);
}

.quick-hub-transaction:first-child {
    border-top: 0;
}

.quick-hub-transaction > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.quick-hub-transaction strong {
    color: #eee4f5;
    font-size: 12px;
}

.quick-hub-transaction small {
    overflow: hidden;
    max-width: 210px;
    color: #94849f;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-hub-transaction > span {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
}

.quick-hub-transaction > span.credit {
    color: #9de3ae;
}

.quick-hub-transaction > span.debit {
    color: #f0a0b3;
}

@media (max-width: 640px) {
    .quick-hub-transaction {
        align-items: flex-start;
    }

    .quick-hub-transaction small {
        max-width: 155px;
    }
}


/* PUBLIC_USER_PROFILE_V1 */

.public-user-profile {
    width: min(92vw, 390px);
    padding: 0;
    border: 1px solid #3c2850;
    border-radius: 18px;
    background: #17101e;
    color: #f3edf7;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}

.public-user-profile::backdrop {
    background: rgba(5, 3, 8, .72);
    backdrop-filter: blur(4px);
}

.public-user-profile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(116, 78, 143, .28);
}

.public-user-profile-top strong {
    font-size: 14px;
}

.public-user-profile-top button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: inherit;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.public-user-profile-body {
    padding: 18px;
}

.public-user-profile-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Manual profile cover photo - independent of cosmetic profile_decoration art.
   !important on position/inset: a later, more specific existing rule
   (":is(.profile-cosmetic-heading,.cosmetic-market-preview)[class*=
   'cosmetic-profile_decoration-'] > *") forces position:relative on
   every direct child of this card when a cosmetic is equipped, which
   collapsed this element to 0 height without it. */
.public-user-profile-cover {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.public-user-profile-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 10, 21, .35) 0%, rgba(13, 10, 21, .82) 78%, #0d0a15 100%);
}
.public-user-profile-card > *:not(.public-user-profile-cover) {
    position: relative;
    z-index: 1;
}

.public-user-profile-avatar-shell {
    width: 86px;
    height: 86px;
}

.public-user-profile-card h2 {
    margin: 6px 0 0;
    font-size: 21px;
}

.public-user-profile-card > small {
    color: #a99ab4;
}

.public-user-profile-joined {
    margin: 8px 0 0;
    color: #a99ab4;
    font-size: 12px;
}

.reader-comment-profile-trigger,
.reader-comment-name-trigger {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.reader-comment-profile-trigger {
    border-radius: 50%;
}

.reader-comment-name-trigger {
    border-radius: 6px;
}

.reader-comment-profile-trigger:hover,
.reader-comment-name-trigger:hover {
    opacity: .86;
}

.reader-comment-profile-trigger:focus-visible,
.reader-comment-name-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* PUBLIC_USER_PROFILE_POLISH_V2 */

.public-user-profile {
    width: min(520px, calc(100vw - 28px));
    max-width: 520px;
    padding: 0;
    border: 1px solid rgba(185, 124, 228, .28);
    border-radius: 22px;
    overflow: hidden;
    color: #f7f1fb;
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(135, 56, 190, .16),
            transparent 38%
        ),
        linear-gradient(
            160deg,
            #17101e 0%,
            #100b16 62%,
            #0d0912 100%
        );
    box-shadow:
        0 28px 80px rgba(0, 0, 0, .58),
        0 0 48px rgba(117, 42, 168, .10);
}

.public-user-profile::backdrop {
    background: rgba(6, 4, 9, .76);
    backdrop-filter: blur(8px);
}

.public-user-profile[open] {
    animation: public-user-profile-enter .18s ease-out;
}

.public-user-profile .public-user-profile-top {
    padding: 14px 16px 4px;
    border-bottom: 0;
    background: transparent;
}

.public-user-profile .public-user-profile-top strong {
    color: #a99bb4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.public-user-profile .public-user-profile-top button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(190, 140, 224, .12);
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
    color: #cdbfd6;
    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

.public-user-profile .public-user-profile-top button:hover {
    border-color: rgba(201, 148, 238, .27);
    background: rgba(154, 81, 204, .12);
    transform: scale(1.04);
}

.public-user-profile .public-user-profile-body {
    padding: 8px 16px 16px;
}

.public-user-profile .public-user-profile-card {
    position: relative;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    display: grid;
    justify-items: stretch;
    gap: 17px;
    padding: 22px;
    border: 1px solid rgba(179, 112, 222, .18);
    border-radius: 18px;
    text-align: left;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 18px 42px rgba(0, 0, 0, .20);
}

.public-user-profile
.public-user-profile-card:not(
    [class*="cosmetic-profile_decoration-"]
) {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(157, 74, 209, .13),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(35, 22, 45, .97),
            rgba(20, 14, 27, .98)
        );
}

.public-user-profile
.public-user-profile-card.profile-cosmetic-heading[
    class*="cosmetic-profile_decoration-"
] {
    width: 100%;
    max-width: none;
    padding: 22px;
}

.public-user-profile .public-user-profile-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #8e8199;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.public-user-profile .public-user-profile-brand strong {
    color: #d5b2ec;
    font-size: 9px;
    font-weight: 900;
}

.public-user-profile .public-user-profile-brand small {
    color: #817487;
    font-size: 9px;
    font-weight: 700;
}

.public-user-profile .public-user-profile-brand-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #b869e8;
    box-shadow:
        0 0 8px rgba(190, 96, 239, .78),
        0 0 18px rgba(150, 56, 208, .40);
}

.public-user-profile .public-user-profile-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.public-user-profile .public-user-profile-avatar-shell {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
}

.public-user-profile .public-user-profile-identity {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 6px;
}

.public-user-profile .public-user-profile-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.public-user-profile .public-user-profile-name-row h2 {
    min-width: 0;
    margin: 0;
    color: #f8f2fb;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.public-user-profile .profile-cosmetic-badge {
    margin-left: 0;
}

.public-user-profile .public-user-profile-handle {
    color: #aa9bb5;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .01em;
}

.public-user-profile .public-user-profile-cosmetics {
    display: grid;
    gap: 9px;
    padding-top: 15px;
    border-top: 1px solid rgba(175, 118, 211, .13);
}

.public-user-profile .public-user-profile-cosmetics-label {
    color: #8e8098;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.public-user-profile .public-user-profile-cosmetic-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.public-user-profile .public-user-profile-cosmetic-chip {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid rgba(177, 111, 219, .18);
    border-radius: 999px;
    background: rgba(129, 61, 172, .10);
    color: #cdbad8;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.public-user-profile .public-user-profile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(174, 112, 211, .11);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.public-user-profile .public-user-profile-meta span {
    color: #8f8298;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-user-profile .public-user-profile-meta strong {
    color: #d9c9e2;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.public-user-profile :focus-visible {
    outline: 2px solid #bd7ce8;
    outline-offset: 2px;
}

@keyframes public-user-profile-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

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

@media (max-width: 520px) {
    .public-user-profile {
        width: calc(100vw - 20px);
        border-radius: 18px;
    }

    .public-user-profile .public-user-profile-body {
        padding: 6px 10px 10px;
    }

    .public-user-profile .public-user-profile-card,
    .public-user-profile
    .public-user-profile-card.profile-cosmetic-heading[
        class*="cosmetic-profile_decoration-"
    ] {
        gap: 14px;
        padding: 18px;
        border-radius: 15px;
    }

    .public-user-profile .public-user-profile-main {
        gap: 14px;
    }

    .public-user-profile .public-user-profile-avatar-shell {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
    }

    .public-user-profile .public-user-profile-name-row h2 {
        font-size: 20px;
    }

    .public-user-profile .public-user-profile-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-user-profile[open] {
        animation: none;
    }

    .public-user-profile .public-user-profile-top button {
        transition: none;
    }
}

/* COMMENT_UX_POLISH_V1 */

.reader-comments {
    border-color: rgba(147, 82, 181, .22);
    background:
        linear-gradient(
            180deg,
            rgba(12, 7, 17, .98),
            rgba(8, 4, 12, .98)
        );
}

.reader-comment-form {
    gap: 10px !important;
    margin-bottom: 4px;
}

.reader-comments .reader-comment-form textarea {
    min-height: 72px;
    padding: 12px 13px;
    border-color: rgba(156, 82, 194, .25);
    border-radius: 10px;
    line-height: 1.5;
    background: #07030a;
}

.reader-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.reader-comment-spoiler-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #aaa0b0;
    font-size: 12px;
    cursor: pointer;
}

.reader-comment-spoiler-toggle input {
    margin: 0;
}

.reader-comment-likes {
    display: inline-flex;
    align-items: center;
}

.reader-comment-like {
    min-height: 30px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(166, 91, 199, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: #a996b1;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .10s ease,
        border-color .16s ease,
        background .16s ease,
        color .16s ease;
}

.reader-comment-like:hover:not(:disabled),
.reader-comment-like:focus-visible {
    border-color: rgba(211, 124, 244, .52);
    background: rgba(124, 45, 157, .17);
    color: #ead8f1;
}

.reader-comment-like:active:not(:disabled) {
    transform: translateY(1px) scale(.98);
}

.reader-comment-like:disabled {
    cursor: wait;
    opacity: .62;
}

.reader-comment-like strong {
    min-width: 10px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.reader-comments .reader-comment-submit {
    width: auto;
    min-width: 108px;
    padding: 8px 15px;
    border-color: rgba(181, 102, 221, .34);
    background: rgba(116, 42, 151, .20);
    color: #e1c4ef;
    font-weight: 750;
}

.reader-comment {
    padding: 17px 0;
    border-bottom-color: rgba(113, 71, 133, .22);
}

.reader-comment-header {
    justify-content: flex-start;
}

.reader-comment-author {
    width: 100%;
    align-items: center;
    gap: 11px;
}

.reader-comments .reader-comment-profile-trigger,
.reader-comments .reader-comment-name-trigger {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.reader-comments .reader-comment-profile-trigger:hover,
.reader-comments .reader-comment-name-trigger:hover {
    background: transparent;
    opacity: 1;
}

.reader-comment-author-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.reader-comment-name-line {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.reader-comments .reader-comment-name-trigger {
    min-width: 0;
    color: #eadfed;
    font-size: 14px;
    text-align: left;
}

.reader-comment-name-trigger strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-comments .reader-comment-badge {
    padding: 3px 7px;
    font-size: 8px;
}

.reader-comment-date {
    color: #776d7d;
    font-size: 9px;
}

.reader-comment-content {
    margin: 8px 0 0 51px;
}

.reader-comment-text {
    margin: 0;
    color: #e2dce5;
    font-size: 14px;
    line-height: 1.65;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.reader-comment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
}

.reader-comment-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.reader-comments .reader-comment-reaction {
    min-width: 40px;
    padding: 5px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(141, 88, 166, .20);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: #cfc3d4;
    font-size: 11px;
    line-height: 1;
}

.reader-comments .reader-comment-reaction:hover {
    border-color: rgba(193, 112, 229, .38);
    background: rgba(123, 49, 158, .13);
}

.reader-comment-reaction-count {
    color: #94889b;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.reader-comments .reader-comment-report {
    padding: 5px 7px;
    border: 0;
    background: transparent;
    color: #716878;
    font-size: 10px;
}

.reader-comments .reader-comment-report:hover {
    background: transparent;
    color: #b69eae;
}

.reader-comment .spoiler-comment {
    position: relative;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(145, 91, 171, .18);
    border-radius: 9px;
    background: rgba(69, 48, 80, .22);
    color: #c8bacd;
    cursor: pointer;
}

.reader-comment .spoiler-comment:hover {
    color: #c8bacd;
}

.spoiler-comment-label {
    display: block;
    color: #a996b2;
    font-size: 11px;
    font-weight: 750;
}

.spoiler-comment-body {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    filter: blur(7px);
    user-select: none;
    transition:
        opacity .15s ease,
        filter .15s ease,
        max-height .15s ease;
}

.spoiler-comment.is-open .spoiler-comment-label {
    display: none;
}

.spoiler-comment.is-open .spoiler-comment-body {
    max-height: 800px;
    opacity: 1;
    filter: none;
    user-select: text;
}


/* ADVANCED_COMMENT_SYSTEM_V1 */
.reader-comment-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.reader-comment-heading h2 {
    margin: 0;
}

.reader-comment-count {
    display: block;
    margin-top: 3px;
    color: #827689;
    font-size: 10px;
}

.reader-comment-sort {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #94879a;
    font-size: 10px;
}

.reader-comments .reader-comment-sort select {
    width: auto;
    min-width: 126px;
    padding: 7px 28px 7px 10px;
    border: 1px solid rgba(156, 82, 194, .27);
    border-radius: 9px;
    background-color: #09050d;
    color: #d8c9de;
    font-size: 11px;
}

.reader-comment-thread,
.reader-comment-replies,
.reader-comment.is-reply {
    min-width: 0;
}

.reader-comment-thread {
    border-bottom: 1px solid rgba(113, 71, 133, .22);
}

.reader-comment-thread > .reader-comment,
.reader-comment-replies .reader-comment:last-child {
    border-bottom: 0;
}

.reader-comment-replies {
    overflow: hidden;
}

.reader-comment-replies[hidden] {
    display: none;
}

.reader-comment.is-reply {
    margin-left: min(var(--comment-indent), 112px);
    padding: 13px 0 13px 12px;
    border-left: 1px solid rgba(169, 91, 205, .25);
}

.reader-comment.is-reply .reader-comment-avatar-shell {
    width: 34px;
    height: 34px;
}

.reader-comment.is-reply .reader-comment-content {
    margin-left: 45px;
}

.reader-comments .reader-comment-replies-toggle {
    margin: 0 0 12px 50px;
    padding: 5px 9px;
    border: 1px solid rgba(151, 82, 184, .18);
    border-radius: 999px;
    background: rgba(107, 43, 137, .09);
    color: #aa8db8;
    font-size: 10px;
}

.reader-comments .reader-comment-replies-toggle:hover {
    border-color: rgba(187, 106, 224, .34);
    background: rgba(125, 52, 158, .15);
    color: #d7b6e6;
}

.reader-comment-secondary-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.reader-comments .reader-comment-reply,
.reader-comments [data-reply-cancel] {
    padding: 5px 7px;
    border: 0;
    background: transparent;
    color: #9f83ad;
    font-size: 10px;
}

.reader-comments .reader-comment-reply:hover,
.reader-comments [data-reply-cancel]:hover {
    background: transparent;
    color: #d2addf;
}

.reader-comment-reply-form {
    display: grid;
    gap: 9px;
    margin-top: 12px;
    padding: 11px;
    border: 1px solid rgba(155, 83, 190, .22);
    border-radius: 10px;
    background: rgba(24, 11, 31, .55);
}

.reader-comment-reply-form label:first-child {
    display: grid;
    gap: 6px;
    color: #a995b1;
    font-size: 10px;
}

.reader-comments .reader-comment-reply-form textarea {
    width: 100%;
    min-height: 66px;
    box-sizing: border-box;
    padding: 10px 11px;
    border: 1px solid rgba(156, 82, 194, .25);
    border-radius: 9px;
    background: #07030a;
    color: #e6dce9;
    line-height: 1.5;
    resize: vertical;
}

.reader-comment-reply-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reader-comment-reply-controls {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.reader-comments .reader-comment-reply-submit {
    padding: 7px 12px;
    border-color: rgba(181, 102, 221, .34);
    background: rgba(116, 42, 151, .20);
    color: #e1c4ef;
    font-size: 11px;
    font-weight: 750;
}

.reader-comment-empty {
    margin: 18px 0 4px;
    color: #86798c;
    font-size: 12px;
}

.reader-comments .reader-comment-load-more {
    width: 100%;
    min-height: 42px;
    margin-top: 16px;
    border: 1px solid rgba(181, 102, 221, .30);
    border-radius: 10px;
    background: rgba(116, 42, 151, .14);
    color: #d9bce8;
    font-weight: 750;
}

.reader-comments .reader-comment-load-more:hover:not(:disabled) {
    border-color: rgba(210, 126, 247, .52);
    background: rgba(133, 50, 168, .22);
}

.reader-comments .reader-comment-load-more[hidden] {
    display: none;
}

@media (max-width: 620px) {
    .reader-comment-heading {
        align-items: flex-start;
    }

    .reader-comment-sort {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .reader-comments .reader-comment-sort select {
        min-width: 118px;
    }

    .reader-comment.is-reply {
        margin-left: min(var(--comment-indent-mobile), 56px);
        padding-left: 8px;
    }

    .reader-comment.is-reply .reader-comment-content {
        margin-left: 0;
    }

    .reader-comment-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .reader-comment-secondary-actions {
        align-self: flex-end;
    }

    .reader-comments .reader-comment-replies-toggle {
        margin-left: 0;
    }

    .reader-comment-reply-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .reader-comment-reply-controls {
        align-self: flex-end;
    }
}

@media(max-width:570px) {
    .reader-comment-content {
        margin-left: 47px;
    }

    .reader-comment-form-footer {
        align-items: stretch;
    }

    .reader-comments .reader-comment-submit {
        min-width: 96px;
    }

    .reader-comment-actions {
        align-items: flex-start;
    }
}

@media(prefers-reduced-motion:reduce) {
    .spoiler-comment-body {
        transition: none;
    }
}

/* XP_SOCIAL_PRESTIGE_V1 */
.prestige-progress {
    height: 7px;
    overflow: hidden;
    border: 1px solid rgba(191, 119, 237, .18);
    border-radius: 999px;
    background: rgba(7, 4, 11, .72);
}

.prestige-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7635ae, #d375ff);
    box-shadow: 0 0 14px rgba(195, 103, 247, .42);
    transition: width .28s ease;
}

.quick-hub-prestige {
    display: grid;
    gap: 9px;
    margin: 12px 0 4px;
    padding: 11px 12px;
    border: 1px solid rgba(179, 104, 226, .18);
    border-radius: 11px;
    background:
        radial-gradient(circle at 92% 0%, rgba(153, 66, 207, .16), transparent 45%),
        rgba(255, 255, 255, .025);
}

.quick-hub-prestige > div:first-child {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 3px 9px;
}

.quick-hub-prestige span[data-hub-level] {
    color: #d69bfa;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.quick-hub-prestige strong {
    justify-self: end;
    color: #f4e8fa;
    font-size: 12px;
}

.quick-hub-prestige small {
    grid-column: 1 / -1;
    color: #9f90aa;
    font-size: 10px;
}

.public-user-profile-prestige {
    display: grid;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid rgba(190, 117, 235, .17);
    border-radius: 13px;
    background:
        radial-gradient(circle at 90% 0%, rgba(158, 65, 216, .16), transparent 48%),
        rgba(255, 255, 255, .028);
}

.public-user-profile-prestige-copy {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.public-user-profile-prestige-copy span {
    color: #d49af7;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.public-user-profile-prestige-copy strong {
    color: #f3e7f9;
    font-size: 12px;
}

.public-user-profile-prestige-copy small {
    margin-left: auto;
    color: #9f90aa;
    font-size: 10px;
}

@media (max-width: 520px) {
    .public-user-profile-prestige-copy {
        flex-wrap: wrap;
    }

    .public-user-profile-prestige-copy small {
        width: 100%;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prestige-progress > span {
        transition: none;
    }
}



/* ADVANCED_SEARCH_DISCOVERY_V1 */
.discovery-controls {
    margin-bottom: 14px;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) minmax(130px, .8fr) minmax(150px, .9fr) auto;
    align-items: end;
    gap: 9px;
    border: 1px solid rgba(153, 78, 185, .18);
    border-radius: 12px;
    background: rgba(10, 5, 15, .72);
}

.discovery-filter {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: #897b90;
    font-size: 9px;
}

.discovery-controls select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 30px 0 10px;
    border: 1px solid rgba(163, 85, 198, .24);
    border-radius: 8px;
    background-color: #09050d;
    color: #d9cede;
    font: inherit;
    font-size: 10px;
}

.discovery-controls select:focus-visible,
.discovery-reset:focus-visible,
.discovery-pagination button:focus-visible,
.discovery-empty button:focus-visible {
    outline: 2px solid rgba(216, 126, 250, .68);
    outline-offset: 2px;
}

.discovery-reset,
.discovery-pagination button,
.discovery-empty button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(171, 91, 207, .25);
    border-radius: 8px;
    background: rgba(99, 34, 130, .18);
    color: #cdb8d5;
    font: inherit;
    font-size: 9px;
    font-weight: 750;
}

.discovery-reset:hover,
.discovery-pagination button:not(:disabled):hover,
.discovery-empty button:hover {
    border-color: rgba(209, 119, 246, .48);
    background: rgba(121, 43, 155, .25);
    color: #ecdaf3;
}

.discovery-loading,
.discovery-empty {
    min-height: 148px;
    padding: 22px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed rgba(151, 82, 180, .20);
    border-radius: 12px;
    background: rgba(255, 255, 255, .012);
    color: #8f8196;
    font-size: 11px;
    text-align: center;
}

.discovery-loading span {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(213, 163, 231, .18);
    border-top-color: #c567ec;
    border-radius: 50%;
    animation: discovery-spin .7s linear infinite;
}

.discovery-empty > span {
    color: #a84dd1;
    font-size: 25px;
}

.discovery-empty strong {
    color: #d8c9de;
    font-size: 13px;
}

.discovery-empty p {
    margin: 0;
    color: #817587;
    line-height: 1.5;
}

.discovery-pagination {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

.discovery-pagination span {
    min-width: 58px;
    color: #94859b;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.discovery-pagination button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

@keyframes discovery-spin {
    to { transform: rotate(360deg); }
}

@media(prefers-reduced-motion:reduce) {
    .discovery-loading span { animation-duration: 1.5s; }
}

@media(max-width:850px) {
    .discovery-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:570px) {
    .discovery-controls {
        padding: 10px;
        grid-template-columns: 1fr;
    }

    .discovery-reset,
    .discovery-controls select {
        width: 100%;
    }

    .discovery-pagination {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .discovery-pagination button {
        min-width: 0;
        padding: 0 8px;
    }
}

/* SERIES_DISCOVER_PAGE_V1 */
.discover-page-main {
    width: min(1180px, calc(100% - 28px));
}

.discover-page-hero {
    margin-bottom: 18px;
    padding: clamp(24px, 4vw, 46px);
    border: 1px solid rgba(163, 85, 198, .22);
    border-radius: 18px;
    background:
        radial-gradient(circle at 85% 15%, rgba(145, 68, 190, .18), transparent 34%),
        linear-gradient(145deg, rgba(20, 9, 29, .98), rgba(6, 3, 13, .98));
    overflow: hidden;
}

.discover-page-hero-copy {
    max-width: 720px;
}

.discover-page-hero h1 {
    margin: 6px 0 10px;
    font-size: clamp(30px, 5vw, 52px);
    line-height: 1;
}

.discover-page-hero-copy > p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.discover-page-search {
    display: block;
    margin-top: 22px;
}

.discover-page-search input {
    width: min(100%, 620px);
    height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(174, 91, 211, .32);
    border-radius: 12px;
    background: rgba(4, 2, 8, .82);
    color: var(--text);
    font: inherit;
}

.discover-page-search input:focus-visible {
    outline: 2px solid rgba(216, 126, 250, .68);
    outline-offset: 2px;
    border-color: rgba(216, 126, 250, .55);
}

.discover-page-catalog {
    min-width: 0;
}

.discover-page-head {
    margin-bottom: 14px;
}

.discover-series-list {
    min-width: 0;
}

.discover-page-pagination {
    margin-top: 18px;
}

@media(max-width:850px) {
    .discover-page-main {
        width: min(100%, calc(100% - 20px));
    }

    .discover-page-hero {
        padding: 26px 22px;
    }
}

@media(max-width:570px) {
    .discover-page-main {
        width: 100%;
    }

    .discover-page-hero {
        margin: 0 8px 12px;
        padding: 22px 16px;
        border-radius: 14px;
    }

    .discover-page-catalog {
        margin-left: 8px;
        margin-right: 8px;
    }

    .discover-page-search input {
        width: 100%;
    }
}

/* CHAPTER_LIKE_COMMENT_BUTTON_UX_V1 */
.reader-chapter-engagement {
    width: min(920px, calc(100% - 24px));
    margin: 26px auto 0;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(151, 78, 187, .22);
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            rgba(20, 8, 28, .96),
            rgba(8, 4, 12, .98)
        );
}

.reader-chapter-engagement-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.reader-chapter-engagement-copy .eyebrow {
    margin: 0;
    font-size: 8px;
}

.reader-chapter-engagement-copy strong {
    color: #eadcf0;
    font-size: 13px;
}

/* CHAPTER_EMOJI_REACTIONS_V1 */
.reader-chapter-reaction-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.reader-chapter-reaction-options[aria-busy="true"] {
    opacity: .68;
}

.reader-chapter-reaction {
    min-width: 52px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(197, 92, 235, .30);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: #d7c0df;
    cursor: pointer;
    transition:
        transform .12s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.reader-chapter-reaction:hover:not(:disabled),
.reader-chapter-reaction:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(222, 127, 255, .65);
    background: rgba(140, 48, 177, .20);
}

.reader-chapter-reaction.is-active {
    border-color: rgba(222, 129, 255, .78);
    background:
        linear-gradient(
            135deg,
            rgba(110, 37, 148, .78),
            rgba(54, 18, 73, .88)
        );
    color: #fff;
}

.reader-chapter-reaction:disabled {
    cursor: wait;
    opacity: .65;
}

.reader-chapter-reaction-emoji {
    font-size: 17px;
    line-height: 1;
}

.reader-chapter-reaction-count {
    min-width: 9px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

@media(max-width:570px) {
    .reader-chapter-reaction-options {
        width: 100%;
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .reader-chapter-reaction {
        width: 100%;
    }
}

.reader-chapter-like {
    min-width: 132px;
    padding: 9px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(197, 92, 235, .34);
    border-radius: 9px;
    background: rgba(111, 35, 143, .18);
    color: #e7caef;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        transform .10s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        color .16s ease;
}

.reader-chapter-like:hover {
    border-color: rgba(222, 127, 255, .68);
    background: rgba(140, 48, 177, .28);
    box-shadow:
        0 8px 22px rgba(91, 22, 122, .18);
    color: #faeaff;
}

.reader-chapter-like:focus-visible {
    outline: 2px solid rgba(225, 134, 255, .78);
    outline-offset: 2px;
}

.reader-chapter-like:active {
    transform:
        translateY(2px)
        scale(.975);
}

.reader-chapter-like.is-liked {
    border-color: rgba(235, 107, 198, .65);
    background:
        linear-gradient(
            135deg,
            rgba(151, 38, 119, .34),
            rgba(104, 31, 142, .30)
        );
    color: #ffd9f4;
    box-shadow:
        inset 0 0 0 1px rgba(255, 174, 224, .06),
        0 7px 22px rgba(124, 24, 101, .16);
}

.reader-chapter-like-icon {
    font-size: 15px;
    line-height: 1;
    transition: transform .16s ease;
}

.reader-chapter-like.is-liked
.reader-chapter-like-icon {
    transform: scale(1.12);
}

.reader-chapter-like-count {
    min-width: 20px;
    padding-left: 7px;
    border-left: 1px solid rgba(255, 255, 255, .10);
    font-variant-numeric: tabular-nums;
}

.reader-chapter-like:disabled {
    cursor: wait;
    opacity: .68;
}

.reader-chapter-like.is-loading {
    transform: none;
}

.reader-comments .reader-comment-submit {
    cursor: pointer;
    touch-action: manipulation;
    transition:
        transform .10s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        color .16s ease,
        opacity .16s ease;
}

.reader-comments .reader-comment-submit:hover:not(:disabled) {
    border-color: rgba(219, 126, 255, .65);
    background: rgba(145, 51, 181, .30);
    color: #f7e6ff;
    box-shadow:
        0 7px 20px rgba(91, 22, 122, .16);
}

.reader-comments .reader-comment-submit:focus-visible {
    outline: 2px solid rgba(225, 134, 255, .78);
    outline-offset: 2px;
}

.reader-comments .reader-comment-submit:active:not(:disabled) {
    transform:
        translateY(2px)
        scale(.97);
}

.reader-comments .reader-comment-submit:disabled {
    cursor: wait;
    opacity: .66;
}

.reader-comments .reader-comment-submit.is-loading {
    background: rgba(112, 46, 140, .18);
    color: #c9b1d3;
    transform: none;
}

@media(max-width:570px) {
    .reader-chapter-engagement {
        margin-top: 18px;
        padding: 12px;
        align-items: stretch;
        flex-direction: column;
    }

    .reader-chapter-like {
        width: 100%;
        min-height: 42px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .reader-chapter-like,
    .reader-chapter-like-icon,
    .reader-comments .reader-comment-submit {
        transition: none;
    }
}

/* NOTIFICATION_CENTER_UX_V1 */
.notification-center {
    display: grid;
    gap: 18px;
}

.notification-center-loading,
.notification-empty-state {
    display: grid;
    gap: 6px;
    padding: 24px 18px;
    border: 1px dashed #493358;
    border-radius: 14px;
    color: #aa9ab7;
    text-align: center;
}

.notification-center-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.notification-center-head h3 {
    margin: 4px 0 4px;
    font-size: 22px;
}

.notification-center-head p {
    margin: 0;
    color: #aa9ab7;
}

.notification-center-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.notification-filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 5px;
    scrollbar-width: thin;
}

.notification-filter-bar button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 999px;
}

.notification-filter-bar button.is-active {
    border-color: rgba(205, 150, 255, .78);
    background: rgba(147, 77, 207, .34);
    color: #f4ddff;
}

.notification-compact-list {
    display: grid;
    gap: 8px;
}

.notification-compact-item {
    position: relative;
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid #382943;
    border-radius: 13px;
    background: rgba(24, 16, 31, .72);
    transition:
        transform .11s ease,
        border-color .15s ease,
        background .15s ease;
}

.notification-compact-item:hover {
    transform: translateY(-1px);
    border-color: #5b3a70;
}

.notification-compact-item.is-unread {
    border-color: rgba(176, 101, 237, .52);
    background: rgba(61, 33, 80, .48);
}

.notification-compact-indicator {
    width: 6px;
    height: 100%;
    min-height: 42px;
    border-radius: 999px;
    background: transparent;
}

.notification-compact-item.is-unread
.notification-compact-indicator {
    background: #bb83f4;
    box-shadow:
        0 0 12px rgba(187, 131, 244, .38);
}

.notification-compact-copy {
    min-width: 0;
}

.notification-compact-copy > strong {
    display: block;
    margin: 2px 0 3px;
    color: #f5ecfb;
    font-size: 14px;
}

.notification-compact-copy > p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #b7a8c1;
    font-size: 13px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notification-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #907ca0;
    font-size: 11px;
}

.notification-compact-meta span {
    color: #d3a9f8;
    font-weight: 700;
}

.quick-hub-notification-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.quick-hub-notification-actions button,
.notification-open-link,
.notification-center-head-actions button,
.notification-pagination button {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #503560;
    border-radius: 9px;
    background: #25182f;
    color: #ede2f4;
    font: inherit;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .09s ease,
        background .12s ease,
        border-color .12s ease,
        opacity .12s ease;
}

.quick-hub-notification-actions button:hover:not(:disabled),
.notification-open-link:hover,
.notification-center-head-actions button:hover:not(:disabled),
.notification-pagination button:hover:not(:disabled) {
    border-color: #80539a;
    background: #372247;
}

.quick-hub-notification-actions button:active:not(:disabled),
.notification-open-link:active,
.notification-center-head-actions button:active:not(:disabled),
.notification-pagination button:active:not(:disabled) {
    transform: translateY(2px) scale(.975);
}

.quick-hub-notification-actions button:focus-visible,
.notification-open-link:focus-visible,
.notification-center-head-actions button:focus-visible,
.notification-pagination button:focus-visible,
.notification-filter-bar button:focus-visible {
    outline: 2px solid rgba(215, 157, 255, .86);
    outline-offset: 2px;
}

.quick-hub-notification-actions button:disabled,
.notification-center-head-actions button:disabled,
.notification-pagination button:disabled {
    cursor: wait;
    opacity: .52;
}

.notification-read-state {
    color: #8f8199;
    font-size: 12px;
}

.notification-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.notification-pagination span {
    color: #b9a6c6;
    font-size: 13px;
}

.notification-preferences {
    padding: 12px 14px;
    border: 1px solid #382943;
    border-radius: 13px;
    background: rgba(23, 15, 29, .55);
}

.notification-preferences summary {
    color: #ddc7ec;
    font-weight: 700;
    cursor: pointer;
}

.notification-preferences form {
    margin-top: 14px;
}

.quick-hub-danger.is-confirming {
    border-color: rgba(255, 104, 131, .7);
    background: rgba(136, 42, 62, .34);
}

@media (max-width: 720px) {
    .notification-center-head {
        display: grid;
    }

    .notification-center-head-actions {
        justify-content: stretch;
    }

    .notification-center-head-actions button {
        flex: 1 1 auto;
    }

    .notification-compact-item {
        grid-template-columns: 5px minmax(0, 1fr);
        align-items: start;
    }

    .quick-hub-notification-actions {
        grid-column: 2;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-compact-item,
    .quick-hub-notification-actions button,
    .notification-open-link,
    .notification-center-head-actions button,
    .notification-pagination button {
        transition: none;
    }
}

/* ADMIN_LIST_UX_CHAPTERS_V1 */
.admin-chapter-toolbar {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(180px, .45fr)
        auto
        auto;
    gap: 12px;
    align-items: end;
    margin: 16px 0 10px;
}

.admin-chapter-toolbar label {
    display: grid;
    gap: 6px;
}

.admin-chapter-toolbar label > span {
    color: #a995b6;
    font-size: 12px;
    font-weight: 700;
}

.admin-chapter-toolbar input,
.admin-chapter-toolbar select {
    width: 100%;
    box-sizing: border-box;
}

.admin-chapter-meta,
.admin-chapter-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-chapter-meta {
    justify-content: space-between;
    margin: 10px 0 9px;
    color: #a994b6;
    font-size: 12px;
}

.admin-chapter-table {
    min-width: 680px;
}

.admin-chapter-table td {
    padding-top: 9px;
    padding-bottom: 9px;
}

.admin-chapter-table td strong,
.admin-chapter-table td small {
    display: block;
}

.admin-chapter-table td small {
    margin-top: 2px;
    color: #9987a6;
}

.admin-chapter-publication,
.admin-chapter-lock {
    display: inline-flex;
    padding: 4px 8px;
    border: 1px solid #4a3655;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
}

.admin-chapter-publication[data-publication-state="published"],
.admin-chapter-lock[data-locked="false"] {
    border-color: rgba(98, 204, 151, .44);
}

.admin-chapter-lock[data-locked="true"] {
    border-color: rgba(238, 176, 80, .48);
}

.admin-chapter-pagination {
    justify-content: center;
    margin-top: 14px;
}

.admin-chapter-drawer-actions {
    display: grid;
    gap: 10px;
}

.admin-chapter-drawer-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    box-sizing: border-box;
}

.admin-chapter-table button,
.admin-chapter-pagination button,
.admin-chapter-drawer button,
.admin-chapter-drawer-actions a {
    transition:
        transform .09s ease,
        border-color .12s ease,
        background .12s ease,
        opacity .12s ease;
}

.admin-chapter-table button:hover:not(:disabled),
.admin-chapter-pagination button:hover:not(:disabled),
.admin-chapter-drawer button:hover:not(:disabled),
.admin-chapter-drawer-actions a:hover {
    border-color: #81539a;
}

.admin-chapter-table button:active:not(:disabled),
.admin-chapter-pagination button:active:not(:disabled),
.admin-chapter-drawer button:active:not(:disabled),
.admin-chapter-drawer-actions a:active {
    transform: translateY(2px) scale(.975);
}

.admin-chapter-toolbar input:focus-visible,
.admin-chapter-toolbar select:focus-visible,
.admin-chapter-toolbar button:focus-visible,
.admin-chapter-table button:focus-visible,
.admin-chapter-pagination button:focus-visible,
.admin-chapter-drawer button:focus-visible,
.admin-chapter-drawer-actions a:focus-visible {
    outline: 2px solid #c28af0;
    outline-offset: 2px;
}

.admin-chapter-table button:disabled,
.admin-chapter-pagination button:disabled,
.admin-chapter-drawer button:disabled {
    cursor: wait;
    opacity: .48;
}

@media (max-width: 700px) {
    .admin-chapter-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-chapter-toolbar button,
    .admin-chapter-drawer-actions button,
    .admin-chapter-drawer-actions a {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-chapter-table button,
    .admin-chapter-pagination button,
    .admin-chapter-drawer button,
    .admin-chapter-drawer-actions a {
        transition: none;
    }
}

/* ADMIN_LIST_UX_SERIES_V1 */
.admin-series-toolbar {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(170px, .42fr)
        auto
        auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}

.admin-series-toolbar label {
    display: grid;
    gap: 6px;
}

.admin-series-toolbar label > span {
    color: #a995b6;
    font-size: 12px;
    font-weight: 700;
}

.admin-series-toolbar input,
.admin-series-toolbar select {
    width: 100%;
    box-sizing: border-box;
}

.admin-series-meta,
.admin-series-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-series-meta {
    justify-content: space-between;
    margin: 10px 0 9px;
    color: #a994b6;
    font-size: 12px;
}

.admin-series-table td {
    padding-top: 9px;
    padding-bottom: 9px;
}

.admin-series-table td strong,
.admin-series-table td small {
    display: block;
}

.admin-series-table td small {
    margin-top: 2px;
    color: #9987a6;
}

.admin-series-status,
.admin-series-lock {
    display: inline-flex;
    padding: 4px 8px;
    border: 1px solid #4a3655;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
}

.admin-series-lock[data-locked="true"] {
    border-color: rgba(238, 176, 80, .48);
}

.admin-series-pagination {
    justify-content: center;
    margin-top: 14px;
}

.admin-series-drawer-actions {
    display: grid;
    gap: 10px;
}

.admin-series-table button,
.admin-series-pagination button,
.admin-series-drawer button {
    transition:
        transform .09s ease,
        border-color .12s ease,
        background .12s ease,
        opacity .12s ease;
}

.admin-series-table button:hover:not(:disabled),
.admin-series-pagination button:hover:not(:disabled),
.admin-series-drawer button:hover:not(:disabled) {
    border-color: #81539a;
}

.admin-series-table button:active:not(:disabled),
.admin-series-pagination button:active:not(:disabled),
.admin-series-drawer button:active:not(:disabled) {
    transform: translateY(2px) scale(.975);
}

.admin-series-toolbar input:focus-visible,
.admin-series-toolbar select:focus-visible,
.admin-series-toolbar button:focus-visible,
.admin-series-table button:focus-visible,
.admin-series-pagination button:focus-visible,
.admin-series-drawer button:focus-visible {
    outline: 2px solid #c28af0;
    outline-offset: 2px;
}

.admin-series-table button:disabled,
.admin-series-pagination button:disabled,
.admin-series-drawer button:disabled {
    cursor: wait;
    opacity: .48;
}

@media (max-width: 700px) {
    .admin-series-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-series-toolbar button,
    .admin-series-drawer-actions button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-series-table button,
    .admin-series-pagination button,
    .admin-series-drawer button {
        transition: none;
    }
}

/* ADMIN_LIST_UX_COSMETICS_V1 */
.cosmetic-admin-head-actions,
.cosmetic-admin-actions,
.cosmetic-admin-form-actions,
.cosmetic-admin-pagination,
.cosmetic-admin-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cosmetic-admin-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cosmetic-admin-toolbar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(170px, .45fr)
        minmax(150px, .35fr);
    gap: 12px;
    margin: 18px 0 10px;
}

.cosmetic-admin-toolbar label,
.cosmetic-admin-form label {
    display: grid;
    gap: 6px;
}

.cosmetic-admin-toolbar label > span {
    color: #a995b6;
    font-size: 12px;
    font-weight: 700;
}

.cosmetic-admin-toolbar input,
.cosmetic-admin-toolbar select,
.cosmetic-admin-form input,
.cosmetic-admin-form select {
    width: 100%;
    box-sizing: border-box;
}

.cosmetic-admin-meta {
    justify-content: space-between;
    margin: 12px 0 9px;
    color: #a994b6;
    font-size: 12px;
}

.cosmetic-admin-table td {
    padding-top: 9px;
    padding-bottom: 9px;
}

.cosmetic-admin-table td strong,
.cosmetic-admin-table td small {
    display: block;
}

.cosmetic-admin-table td small {
    margin-top: 2px;
    color: #9987a6;
}

.cosmetic-admin-actions {
    flex-wrap: wrap;
}

.cosmetic-admin-status {
    display: inline-flex;
    padding: 4px 8px;
    border: 1px solid rgba(237, 91, 117, .44);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
}

.cosmetic-admin-status[data-active="true"] {
    border-color: rgba(98, 204, 151, .44);
}

.cosmetic-admin-pagination {
    justify-content: center;
    margin-top: 14px;
}

.cosmetic-admin-pagination[hidden] {
    display: none;
}

.cosmetic-admin-form {
    gap: 14px;
}

.cosmetic-admin-form-actions {
    flex-wrap: wrap;
    margin-top: 6px;
}

.cosmetic-admin-toolbar input:focus-visible,
.cosmetic-admin-toolbar select:focus-visible,
.cosmetic-admin-form input:focus-visible,
.cosmetic-admin-form select:focus-visible {
    outline: 2px solid #c28af0;
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .cosmetic-admin-toolbar {
        grid-template-columns: 1fr;
    }

    .cosmetic-admin-head-actions,
    .cosmetic-admin-head-actions button,
    .cosmetic-admin-form-actions,
    .cosmetic-admin-form-actions button {
        width: 100%;
    }

    .cosmetic-admin-actions {
        min-width: 150px;
    }
}

/* ADMIN_USER_MODERATION_UI_V1 */
.admin-users-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 10px;
    color: #a994b6;
    font-size: 12px;
}

.admin-users-table td strong,
.admin-users-table td small {
    display: block;
}

.admin-users-table td small {
    margin-top: 3px;
    color: #9987a6;
}

.admin-user-status {
    display: inline-flex;
    padding: 5px 8px;
    border: 1px solid #4a3655;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
}

.admin-user-status[data-user-status="aktif"] {
    border-color:
        rgba(98, 204, 151, .42);
}

.admin-user-status[data-user-status="banlı"],
.admin-user-status[data-user-status="pasif"] {
    border-color:
        rgba(237, 91, 117, .46);
}

.admin-user-status[data-user-status="susturulmuş"] {
    border-color:
        rgba(238, 176, 80, .48);
}

.admin-users-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.admin-user-drawer[hidden] {
    display: none;
}

.admin-user-drawer {
    position: fixed;
    inset: 0;
    z-index: 180;
}

.admin-user-drawer-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background:
        rgba(0, 0, 0, .58);
    cursor: default;
}

.admin-user-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(520px, 92vw);
    height: 100%;
    overflow-y: auto;
    padding: 24px;
    border-left:
        1px solid #493555;
    background: #130e18;
    box-shadow:
        -24px 0 70px
        rgba(0, 0, 0, .42);
}

.admin-user-drawer-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.admin-user-drawer-head h3 {
    margin: 5px 0 4px;
    font-size: 25px;
}

.admin-user-drawer-head p {
    margin: 0;
    color: #a18ead;
}

.admin-user-drawer-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 22px;
}

.admin-user-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.admin-user-summary-grid > div {
    display: grid;
    gap: 5px;
    padding: 12px;
    border:
        1px solid #382942;
    border-radius: 12px;
    background: #1a121f;
}

.admin-user-summary-grid span {
    color: #9f8bab;
    font-size: 11px;
}

.admin-protected-user-note {
    margin-top: 14px;
    padding: 12px;
    border:
        1px solid
        rgba(196, 142, 255, .35);
    border-radius: 12px;
    background:
        rgba(104, 61, 134, .17);
    color: #ddc9ea;
    line-height: 1.5;
}

.admin-user-drawer-section {
    margin-top: 20px;
    padding-top: 18px;
    border-top:
        1px solid #31253a;
}

.admin-user-drawer-section h4 {
    margin: 0 0 12px;
}

.admin-user-moderation-form,
.admin-user-action-form {
    display: grid;
    gap: 10px;
}

.admin-user-moderation-form label {
    display: grid;
    gap: 6px;
}

.admin-user-moderation-form label > span {
    color: #a995b6;
    font-size: 12px;
}

.admin-user-moderation-form select,
.admin-user-moderation-form textarea,
.admin-user-action-form select,
.admin-user-action-form input {
    width: 100%;
}

.admin-user-history {
    display: grid;
    gap: 8px;
}

/* ADMIN_LIST_UX_MODERATION_HISTORY_V1 */
.admin-user-history-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-user-history-toolbar input,
.admin-user-history-toolbar select {
    width: 100%;
    min-width: 0;
}

.admin-user-history-toolbar button {
    min-width: 0;
}

.admin-user-history-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.admin-user-history-pagination strong {
    color: #bca8c8;
    font-size: 12px;
    text-align: center;
}

.admin-user-history article {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border:
        1px solid #37283f;
    border-radius: 10px;
    background: #19111e;
}

.admin-user-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-user-history-head strong {
    display: inline-flex;
    padding: 3px 8px;
    border: 1px solid #5a4167;
    border-radius: 999px;
    color: #ead8f2;
    font-size: 11px;
}

.admin-user-history-head time {
    color: #8f7d9b;
    font-size: 11px;
    white-space: nowrap;
}

.admin-user-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: #a894b4;
    font-size: 11px;
}

.admin-user-history details {
    border-top: 1px solid #2f2336;
    padding-top: 7px;
}

.admin-user-history summary {
    color: #c8b1d4;
    cursor: pointer;
    font-size: 12px;
}

.admin-user-history details p {
    margin: 7px 0 0;
    color: #b9a7c3;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-user-history article span {
    color: #b4a2bf;
    line-height: 1.4;
}

.admin-user-history article small {
    color: #887695;
}

.admin-users-table button,
.admin-users-pagination button,
.admin-user-drawer button {
    transition:
        transform .09s ease,
        border-color .12s ease,
        background .12s ease,
        opacity .12s ease;
}

.admin-users-table button:hover:not(:disabled),
.admin-users-pagination button:hover:not(:disabled),
.admin-user-drawer button:hover:not(:disabled) {
    border-color: #81539a;
}

.admin-users-table button:active:not(:disabled),
.admin-users-pagination button:active:not(:disabled),
.admin-user-drawer button:active:not(:disabled) {
    transform:
        translateY(2px)
        scale(.975);
}

.admin-users-table button:focus-visible,
.admin-users-pagination button:focus-visible,
.admin-user-drawer button:focus-visible,
.admin-user-drawer input:focus-visible,
.admin-user-drawer select:focus-visible,
.admin-user-drawer textarea:focus-visible {
    outline:
        2px solid #c28af0;
    outline-offset: 2px;
}

.admin-user-drawer button:disabled {
    cursor: wait;
    opacity: .48;
}

body.admin-drawer-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .admin-user-drawer-panel {
        width: 100%;
        padding: 18px;
        border-left: 0;
    }

    .admin-user-summary-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-history-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-user-history-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-user-history-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .admin-user-history-pagination strong {
        order: -1;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-users-table button,
    .admin-users-pagination button,
    .admin-user-drawer button {
        transition: none;
    }
}

/* SALES_CODE_COPY_UX_V1 */
[data-copy-sales-codes],
[data-copy-gift-code],
[data-copy-history-code] {
    position: relative;
    transition:
        transform .09s ease,
        border-color .12s ease,
        background .12s ease,
        opacity .12s ease;
}

[data-copy-sales-codes]:hover:not(:disabled),
[data-copy-gift-code]:hover:not(:disabled),
[data-copy-history-code]:hover:not(:disabled) {
    border-color: #8d5ead;
}

[data-copy-sales-codes]:active:not(:disabled),
[data-copy-gift-code]:active:not(:disabled),
[data-copy-history-code]:active:not(:disabled) {
    transform:
        translateY(2px)
        scale(.97);
}

[data-copy-sales-codes]:focus-visible,
[data-copy-gift-code]:focus-visible,
[data-copy-history-code]:focus-visible {
    outline:
        2px solid #c995f1;
    outline-offset: 2px;
}

[data-copy-sales-codes]:disabled,
[data-copy-gift-code]:disabled,
[data-copy-history-code]:disabled {
    cursor: wait;
    opacity: .66;
}

[data-copy-sales-codes].is-copy-success,
[data-copy-gift-code].is-copy-success,
[data-copy-history-code].is-copy-success {
    border-color:
        rgba(93, 213, 150, .68);
    background:
        rgba(48, 119, 82, .24);
}

[data-copy-sales-codes].is-copy-error,
[data-copy-gift-code].is-copy-error,
[data-copy-history-code].is-copy-error {
    border-color:
        rgba(239, 93, 122, .7);
    background:
        rgba(131, 37, 57, .25);
}

@media (prefers-reduced-motion: reduce) {
    [data-copy-sales-codes],
    [data-copy-gift-code],
    [data-copy-history-code] {
        transition: none;
    }
}

/* ADMIN_LIST_UX_ANALYTICS_V1 */
.admin-analytics-toolbar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(150px, .45fr)
        auto auto;
    gap: 9px;
    margin: 16px 0 14px;
}

.admin-analytics-toolbar input,
.admin-analytics-toolbar select {
    width: 100%;
    min-width: 0;
}

.admin-analytics-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.admin-analytics-table td {
    padding-top: 9px;
    padding-bottom: 9px;
    vertical-align: middle;
}

.admin-analytics-series-link {
    display: inline-flex;
    margin-top: 18px;
    padding: 10px 14px;
    border: 1px solid #533d60;
    border-radius: 10px;
    color: #e3c9f1;
    text-decoration: none;
}

.admin-analytics-toolbar button,
.admin-analytics-pagination button,
.admin-analytics-table button,
.admin-analytics-series-link {
    transition:
        transform .09s ease,
        border-color .12s ease,
        background .12s ease,
        opacity .12s ease;
}

.admin-analytics-toolbar button:hover:not(:disabled),
.admin-analytics-pagination button:hover:not(:disabled),
.admin-analytics-table button:hover:not(:disabled),
.admin-analytics-series-link:hover {
    border-color: #8d5ead;
}

.admin-analytics-toolbar button:active:not(:disabled),
.admin-analytics-pagination button:active:not(:disabled),
.admin-analytics-table button:active:not(:disabled),
.admin-analytics-series-link:active {
    transform: translateY(2px) scale(.97);
}

.admin-analytics-toolbar :focus-visible,
.admin-analytics-pagination button:focus-visible,
.admin-analytics-table button:focus-visible,
.admin-analytics-series-link:focus-visible {
    outline: 2px solid #c995f1;
    outline-offset: 2px;
}

.admin-analytics-toolbar button:disabled,
.admin-analytics-pagination button:disabled,
.admin-analytics-table button:disabled {
    cursor: wait;
    opacity: .52;
}

@media (max-width: 700px) {
    .admin-analytics-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .admin-analytics-toolbar input,
    .admin-analytics-toolbar select {
        grid-column: 1 / -1;
    }

    .admin-analytics-table th:nth-child(3),
    .admin-analytics-table td:nth-child(3) {
        display: none;
    }

    .admin-analytics-pagination {
        flex-wrap: wrap;
    }

    .admin-analytics-pagination strong {
        order: -1;
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-analytics-toolbar button,
    .admin-analytics-pagination button,
    .admin-analytics-table button,
    .admin-analytics-series-link {
        transition: none;
    }
}

/* ADMIN_LIST_UX_CODE_HISTORY_V1 */
.code-history-toolbar {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.5fr)
        repeat(3, minmax(125px, .8fr))
        auto auto;
    gap: 9px;
    margin: 18px 0 14px;
}

.code-history-toolbar input,
.code-history-toolbar select {
    width: 100%;
    min-width: 0;
}

.code-history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.code-history-table td {
    padding-top: 9px;
    padding-bottom: 9px;
    vertical-align: middle;
}

.code-history-table td:nth-child(2) {
    display: grid;
    gap: 3px;
}

.code-history-table td:nth-child(2) small {
    color: #a894b4;
}

.code-history-code {
    display: block;
    max-width: 260px;
    overflow: hidden;
    color: #eadcf2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-history-status {
    display: inline-flex;
    padding: 4px 8px;
    border: 1px solid #4a3855;
    border-radius: 999px;
    color: #cfbed8;
    font-size: 12px;
    white-space: nowrap;
}

.code-history-status[data-status="active"],
.code-history-status[data-status="unused"] {
    border-color: rgba(86, 202, 139, .42);
    color: #aee9c9;
}

.code-history-status[data-status="disabled"],
.code-history-status[data-status="used"] {
    border-color: rgba(199, 125, 150, .42);
}

.code-history-drawer-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    padding: 13px;
    border: 1px solid #402f4a;
    border-radius: 12px;
    background: #1a121f;
}

.code-history-drawer-code code {
    overflow-wrap: anywhere;
    color: #f0dff8;
}

.code-history-toolbar button,
.code-history-pagination button,
.code-history-table button,
.code-history-drawer button {
    transition:
        transform .09s ease,
        border-color .12s ease,
        background .12s ease,
        opacity .12s ease;
}

.code-history-toolbar button:hover:not(:disabled),
.code-history-pagination button:hover:not(:disabled),
.code-history-table button:hover:not(:disabled),
.code-history-drawer button:hover:not(:disabled) {
    border-color: #8d5ead;
}

.code-history-toolbar button:active:not(:disabled),
.code-history-pagination button:active:not(:disabled),
.code-history-table button:active:not(:disabled),
.code-history-drawer button:active:not(:disabled) {
    transform: translateY(2px) scale(.97);
}

.code-history-toolbar :focus-visible,
.code-history-pagination button:focus-visible,
.code-history-table button:focus-visible,
.code-history-drawer button:focus-visible {
    outline: 2px solid #c995f1;
    outline-offset: 2px;
}

.code-history-toolbar button:disabled,
.code-history-pagination button:disabled,
.code-history-table button:disabled,
.code-history-drawer button:disabled {
    cursor: wait;
    opacity: .52;
}

@media (max-width: 920px) {
    .code-history-toolbar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .code-history-toolbar input {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .code-history-toolbar {
        grid-template-columns: 1fr;
    }

    .code-history-toolbar input {
        grid-column: auto;
    }

    .code-history-table th:nth-child(4),
    .code-history-table td:nth-child(4) {
        display: none;
    }

    .code-history-code {
        max-width: 42vw;
    }

    .code-history-pagination {
        flex-wrap: wrap;
    }

    .code-history-pagination strong {
        order: -1;
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .code-history-toolbar button,
    .code-history-pagination button,
    .code-history-table button,
    .code-history-drawer button {
        transition: none;
    }
}

/* GLOBAL_INTERACTION_FEEDBACK_POLISH_V1 */

/*
 * Eternal ortak etkileşim katmanı.
 * Özel component stilleri bunun üstünde kendi renklerini korur.
 */
button,
[role="button"],
a.primary-series-action,
a.secondary-series-action,
a.notification-open-link,
a.daily-pick-link {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
a.primary-series-action,
a.secondary-series-action,
a.notification-open-link {
    cursor: pointer;
}

button {
    transition:
        transform 90ms ease,
        filter 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease,
        opacity 120ms ease,
        box-shadow 120ms ease;
}

button:hover:not(:disabled):not([aria-busy="true"]) {
    filter: brightness(1.07);
}

button:active:not(:disabled):not([aria-busy="true"]) {
    transform:
        translateY(2px)
        scale(.975);
}

button:focus-visible,
[role="button"]:focus-visible,
a.primary-series-action:focus-visible,
a.secondary-series-action:focus-visible,
a.notification-open-link:focus-visible,
a.daily-pick-link:focus-visible,
a.chapter-row:focus-visible,
a.series-row:focus-visible,
a.update-card:focus-visible {
    outline:
        2px solid rgba(204, 143, 255, .92);
    outline-offset: 3px;
}

button:disabled,
button[aria-busy="true"] {
    cursor: not-allowed;
    opacity: .58;
}

button[aria-busy="true"] {
    pointer-events: none;
}

button[aria-busy="true"],
button.is-eternal-busy {
    position: relative;
}

button[aria-busy="true"]::after,
button.is-eternal-busy::after {
    content: "";
    display: inline-block;
    width: .82em;
    height: .82em;
    margin-left: .55em;
    border:
        2px solid currentColor;
    border-right-color:
        transparent;
    border-radius: 50%;
    vertical-align: -.08em;
    animation:
        eternal-action-spin
        .68s linear infinite;
}

a.primary-series-action,
a.secondary-series-action,
a.notification-open-link {
    transition:
        transform 90ms ease,
        filter 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease;
}

a.primary-series-action:hover,
a.secondary-series-action:hover,
a.notification-open-link:hover {
    filter: brightness(1.07);
}

a.primary-series-action:active,
a.secondary-series-action:active,
a.notification-open-link:active {
    transform:
        translateY(2px)
        scale(.975);
}

@keyframes eternal-action-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (hover: none) {
    button:hover:not(:disabled),
    a.primary-series-action:hover,
    a.secondary-series-action:hover,
    a.notification-open-link:hover {
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    button,
    a.primary-series-action,
    a.secondary-series-action,
    a.notification-open-link {
        transition: none;
    }

    button[aria-busy="true"]::after,
    button.is-eternal-busy::after {
        animation-duration: 1.4s;
    }
}

/* ETERNAL_DECISION_UI_V1 */
.eternal-decision-root {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.eternal-decision-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: rgba(4, 2, 8, .78);
    backdrop-filter: blur(8px);
}

.eternal-decision-card {
    position: relative;
    z-index: 1;
    width: min(470px, 100%);
    padding: 26px;
    border: 1px solid rgba(176, 108, 226, .32);
    border-radius: 22px;
    background: linear-gradient(160deg, #1d1325, #110c16);
    box-shadow: 0 30px 100px rgba(0, 0, 0, .58);
}

.eternal-decision-card.is-danger {
    border-color: rgba(235, 88, 116, .38);
}

.eternal-decision-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border: 1px solid rgba(190, 128, 237, .32);
    border-radius: 14px;
    background: rgba(130, 68, 174, .16);
    font-weight: 900;
}

.eternal-decision-card h2 {
    margin: 0 0 9px;
    color: #f5ebfb;
}

.eternal-decision-card p {
    margin: 0;
    color: #b7a5c2;
    line-height: 1.6;
}

.eternal-decision-input {
    width: 100%;
    margin-top: 18px;
    padding: 12px 13px;
    resize: vertical;
    border: 1px solid #4b3657;
    border-radius: 12px;
    background: #100b14;
    color: #f4ebf8;
    font: inherit;
}

.eternal-decision-input.is-invalid {
    border-color: rgba(241, 87, 116, .9);
}

.eternal-decision-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
}

.eternal-decision-actions button {
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 11px;
}

.eternal-decision-confirm.is-danger {
    border-color: rgba(244, 101, 127, .58);
    background: #8b2d44;
}

.eternal-decision-actions button:active:not(:disabled) {
    transform: translateY(2px) scale(.975);
}

.eternal-decision-actions button:focus-visible,
.eternal-decision-input:focus-visible {
    outline: 2px solid #ca91f1;
    outline-offset: 3px;
}

@media (max-width: 540px) {
    .eternal-decision-root {
        align-items: end;
        padding: 10px;
    }

    .eternal-decision-card {
        width: 100%;
        padding: 22px 18px;
    }

    .eternal-decision-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}



/* ADMIN_LIST_UX_ANNOUNCEMENTS_V1 */
.admin-announcement-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-announcement-primary {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(215, 121, 255, .42);
    border-radius: 12px;
    background: linear-gradient(135deg, #8f35c2, #542079);
    color: #fff;
    font-weight: 800;
}

.admin-announcement-list-card {
    max-width: 980px;
}

.admin-view[data-admin-panel="announcements"] .admin-announcement-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
    gap: 12px;
    max-width: none;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.admin-announcement-toolbar label {
    margin: 0 !important;
}

.admin-announcement-toolbar input,
.admin-announcement-toolbar select {
    width: 100%;
    min-width: 0;
}

#admin-announcement-list {
    display: grid;
    gap: 8px;
    max-width: none;
}

#admin-announcement-list > .admin-announcement-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #382841;
    border-radius: 12px;
    background: #19111e;
    color: inherit;
    text-align: left;
    box-shadow: none;
    transition: transform .09s ease, border-color .14s ease, background .14s ease;
}

.admin-announcement-row:hover:not(:disabled) {
    border-color: #76508b !important;
    background: #211629 !important;
}

.admin-announcement-row:active:not(:disabled) {
    transform: translateY(2px) scale(.99);
}

.admin-announcement-row:focus-visible,
.admin-announcement-pagination button:focus-visible,
.admin-announcement-primary:focus-visible,
.admin-announcement-toolbar input:focus-visible,
.admin-announcement-toolbar select:focus-visible {
    outline: 2px solid #c28af0;
    outline-offset: 2px;
}

.admin-announcement-row-main,
.admin-announcement-row-meta {
    min-width: 0;
}

.admin-announcement-row-main {
    display: grid;
    gap: 5px;
}

.admin-announcement-row-title {
    color: #f3e7f8;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.admin-announcement-row-preview {
    display: -webkit-box;
    overflow: hidden;
    color: #ad9bb7;
    font-size: 13px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.admin-announcement-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8f7d9a;
    font-size: 12px;
    white-space: nowrap;
}

.admin-announcement-status {
    padding: 4px 8px;
    border: 1px solid rgba(104, 219, 155, .35);
    border-radius: 999px;
    background: rgba(45, 143, 89, .12);
    color: #92e9b5;
    font-weight: 800;
}

.admin-announcement-status[data-active="false"] {
    border-color: rgba(173, 151, 185, .28);
    background: rgba(102, 84, 111, .13);
    color: #b5a5bd;
}

.admin-announcement-manage {
    color: #cf9bf0;
    font-weight: 800;
}

.admin-announcement-loading,
.admin-announcement-empty,
.admin-announcement-error {
    padding: 24px !important;
    border: 1px dashed #493653 !important;
    border-radius: 12px !important;
    background: #17101c !important;
    color: #a996b4;
    text-align: center;
    box-shadow: none !important;
}

.admin-announcement-error {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.admin-announcement-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.admin-announcement-pagination strong {
    min-width: 120px;
    color: #bba8c5;
    font-size: 12px;
    text-align: center;
}

.admin-announcement-pagination button:disabled,
.admin-announcement-toolbar :disabled {
    cursor: wait;
    opacity: .48;
}

.admin-view[data-admin-panel="announcements"] .admin-announcement-drawer form {
    display: grid;
    gap: 16px;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.admin-view[data-admin-panel="announcements"] .admin-announcement-drawer form label {
    margin: 0;
}

.admin-announcement-active-field {
    display: flex !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px !important;
    padding: 12px;
    border: 1px solid #3b2b44;
    border-radius: 12px;
    background: #19111e;
}

.admin-announcement-active-field[hidden] {
    display: none !important;
}

.admin-announcement-active-field input {
    width: 18px !important;
    height: 18px;
    margin: 0;
}

.admin-announcement-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 4px;
}

.admin-announcement-form-actions .admin-announcement-delete {
    margin-right: auto;
    border-color: rgba(255, 93, 119, .34);
    background: rgba(150, 39, 60, .12);
    color: #ff9eae;
}

.admin-announcement-drawer-panel,
.admin-announcement-drawer p,
.admin-announcement-drawer label {
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .admin-announcement-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-announcement-primary {
        width: 100%;
    }

    .admin-view[data-admin-panel="announcements"] .admin-announcement-toolbar {
        grid-template-columns: 1fr;
    }

    #admin-announcement-list > .admin-announcement-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .admin-announcement-row-meta {
        flex-wrap: wrap;
        white-space: normal;
    }

    .admin-announcement-manage {
        margin-left: auto;
    }

    .admin-announcement-pagination {
        flex-wrap: wrap;
    }

    .admin-announcement-pagination strong {
        order: -1;
        width: 100%;
    }

    .admin-announcement-drawer .admin-user-drawer-panel {
        width: 100%;
        max-width: none;
        overflow-x: hidden;
    }

    .admin-announcement-form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-announcement-form-actions .admin-announcement-delete {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-announcement-row {
        transition: none !important;
    }
}


/* ADMIN_LIST_UX_EMAIL_DELIVERIES_V1 */
.admin-email-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-email-list-card {
    max-width: 1040px;
}

.admin-email-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 230px);
    gap: 12px;
    margin-bottom: 14px;
}

.admin-email-toolbar label {
    display: grid;
    gap: 7px;
    color: #b9a8c2;
    font-size: 12px;
    font-weight: 700;
}

.admin-email-toolbar input,
.admin-email-toolbar select {
    width: 100%;
    min-width: 0;
}

#admin-email-result {
    display: grid;
    gap: 8px;
}

.admin-email-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #382841;
    border-radius: 12px;
    background: #19111e;
    color: inherit;
    text-align: left;
    transition: transform .09s ease, border-color .14s ease, background .14s ease;
}

.admin-email-row:hover:not(:disabled) {
    border-color: #76508b;
    background: #211629;
}

.admin-email-row:active:not(:disabled) {
    transform: translateY(2px) scale(.99);
}

.admin-email-row:focus-visible,
.admin-email-pagination button:focus-visible,
.admin-email-heading button:focus-visible,
.admin-email-toolbar input:focus-visible,
.admin-email-toolbar select:focus-visible {
    outline: 2px solid #c28af0;
    outline-offset: 2px;
}

.admin-email-row-main,
.admin-email-row-meta {
    min-width: 0;
}

.admin-email-row-main {
    display: grid;
    gap: 4px;
}

.admin-email-recipient {
    color: #f2e7f7;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.admin-email-subject {
    color: #b8a5c2;
    font-size: 13px;
}

.admin-email-error-preview {
    overflow: hidden;
    color: #e9a7b3;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-email-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8f7d9a;
    font-size: 12px;
    white-space: nowrap;
}

.admin-email-state {
    padding: 4px 8px;
    border: 1px solid #5a4267;
    border-radius: 999px;
    color: #d9c5e4;
    font-size: 11px;
    font-weight: 800;
}

.admin-email-state[data-state="delivered"] {
    border-color: rgba(104, 219, 155, .35);
    background: rgba(45, 143, 89, .12);
    color: #92e9b5;
}

.admin-email-state[data-state="failed"],
.admin-email-state[data-state="blocked"] {
    border-color: rgba(255, 93, 119, .35);
    background: rgba(150, 39, 60, .12);
    color: #ff9eae;
}

.admin-email-state[data-state="retry"] {
    border-color: rgba(238, 176, 80, .38);
    background: rgba(158, 103, 27, .12);
    color: #f0c578;
}

/* ADMIN_SYSTEM_STATUS_V1 */
.admin-system-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-email-manage {
    color: #cf9bf0;
    font-weight: 800;
}

.admin-email-loading,
.admin-email-empty,
.admin-email-load-error {
    padding: 24px;
    border: 1px dashed #493653;
    border-radius: 12px;
    background: #17101c;
    color: #a996b4;
    text-align: center;
}

.admin-email-load-error {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.admin-email-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.admin-email-pagination strong {
    min-width: 120px;
    color: #bba8c5;
    font-size: 12px;
    text-align: center;
}

.admin-email-pagination button:disabled,
.admin-email-toolbar :disabled,
.admin-email-heading button:disabled {
    cursor: wait;
    opacity: .48;
}

.admin-email-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.admin-email-detail-grid > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid #382942;
    border-radius: 12px;
    background: #1a121f;
}

.admin-email-detail-grid dt {
    margin-bottom: 6px;
    color: #9f8bab;
    font-size: 11px;
}

.admin-email-detail-grid dd {
    margin: 0;
    color: #eadff0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-email-detail-error {
    grid-column: 1 / -1;
}

.admin-email-detail-error dd {
    color: #e9a7b3;
}

.admin-email-drawer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #31253a;
}

.admin-email-drawer-actions button {
    min-height: 42px;
}

@media (max-width: 700px) {
    .admin-email-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-email-heading button {
        width: 100%;
    }

    .admin-email-toolbar,
    .admin-email-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-email-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .admin-email-row-meta {
        flex-wrap: wrap;
        white-space: normal;
    }

    .admin-email-manage {
        margin-left: auto;
    }

    .admin-email-error-preview {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .admin-email-pagination {
        flex-wrap: wrap;
    }

    .admin-email-pagination strong {
        order: -1;
        width: 100%;
    }

    .admin-email-drawer .admin-user-drawer-panel {
        width: 100%;
        max-width: none;
        overflow-x: hidden;
    }

    .admin-email-detail-error {
        grid-column: auto;
    }

    .admin-email-drawer-actions button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-email-row {
        transition: none;
    }
}


/* QUICK_HUB_REGRESSION_V1 */
.notification-filter-bar button {
    white-space: nowrap;
    transition:
        transform .09s ease,
        background .12s ease,
        border-color .12s ease;
}

.notification-filter-bar button:hover:not(:disabled) {
    border-color: #80539a;
    background: #372247;
}

.notification-filter-bar button:active:not(:disabled) {
    transform: translateY(2px) scale(.975);
}

@media (max-width: 720px) {
    .notification-filter-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        overflow-x: visible;
        width: 100%;
        padding: 2px 0 6px;
    }

    .notification-filter-bar button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 9px 10px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .quick-hub,
    .quick-hub-subview,
    .notification-center {
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media (max-width: 420px) {
    .notification-filter-bar {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-filter-bar button {
        transition: none;
    }
}

/* ADMIN_USER_DRAWER_POLISH_V1 */
#admin-user-drawer .admin-user-drawer-panel {
    width: min(620px, 94vw);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 100% 0, rgba(127, 66, 163, .14), transparent 34%),
        #120d17;
}

#admin-user-drawer .admin-user-drawer-head {
    align-items: flex-start;
    margin-bottom: 14px;
}

#admin-user-drawer .admin-user-identity {
    min-width: 0;
}

#admin-user-drawer .admin-user-identity h3,
#admin-user-drawer .admin-user-identity p span {
    overflow-wrap: anywhere;
}

#admin-user-drawer .admin-user-identity p {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 7px;
}

#admin-user-drawer .admin-user-status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

#admin-user-drawer .admin-user-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid #4b3856;
    border-radius: 999px;
    background: rgba(43, 30, 51, .86);
    color: #d8c6e2;
    font-size: 11px;
    font-weight: 700;
}

#admin-user-drawer .admin-user-status-badge[data-tone="success"] {
    border-color: rgba(84, 196, 139, .42);
    color: #9ce4bd;
}

#admin-user-drawer .admin-user-status-badge[data-tone="warning"] {
    border-color: rgba(238, 176, 80, .46);
    color: #f4cb83;
}

#admin-user-drawer .admin-user-status-badge[data-tone="danger"] {
    border-color: rgba(234, 91, 113, .46);
    color: #ffabb9;
}

#admin-user-drawer .admin-user-status-badge[data-tone="muted"] {
    color: #a996b4;
}

#admin-user-drawer .admin-user-status-badge[data-tone="protected"] {
    border-color: rgba(190, 123, 236, .48);
    color: #dfb8f7;
}

#admin-user-drawer .admin-user-compact-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #392842;
    border-radius: 14px;
    background: #392842;
}

#admin-user-drawer .admin-user-compact-summary > div {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 70px;
    padding: 12px 14px;
    background: rgba(27, 18, 33, .96);
}

#admin-user-drawer .admin-user-compact-summary span {
    color: #9785a2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#admin-user-drawer .admin-user-compact-summary strong {
    overflow-wrap: anywhere;
    color: #f1e7f5;
    font-size: 13px;
}

#admin-user-drawer .admin-protected-user-note {
    display: grid;
    gap: 3px;
}

#admin-user-drawer .admin-protected-user-note span {
    color: #bba8c6;
    font-size: 12px;
}

#admin-user-drawer .admin-user-section-card {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #36263f;
    border-radius: 16px;
    background: rgba(25, 17, 30, .82);
}

#admin-user-drawer .admin-user-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

#admin-user-drawer .admin-user-section-heading span {
    color: #a675c2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

#admin-user-drawer .admin-user-section-heading h4 {
    margin: 3px 0 0;
    color: #f1e7f5;
    font-size: 16px;
}

#admin-user-drawer .admin-user-section-heading p {
    margin: 5px 0 0;
    color: #9987a4;
    font-size: 12px;
    line-height: 1.45;
}

#admin-user-drawer .admin-user-moderation-form label,
#admin-user-drawer .admin-user-action-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

#admin-user-drawer .admin-user-moderation-form label > span,
#admin-user-drawer .admin-user-action-form label > span {
    color: #af9abb;
    font-size: 11px;
    font-weight: 700;
}

#admin-user-drawer .admin-user-action-context {
    padding: 9px 10px;
    border-left: 3px solid #7d4b98;
    border-radius: 0 9px 9px 0;
    background: rgba(101, 57, 126, .12);
    color: #bca8c7;
    font-size: 12px;
    line-height: 1.45;
}

#admin-user-drawer .admin-user-moderation-form[data-action-tone="danger"] {
    padding: 12px;
    border: 1px solid rgba(222, 75, 98, .35);
    border-radius: 13px;
    background: rgba(99, 31, 43, .1);
}

#admin-user-drawer .admin-user-moderation-form[data-action-tone="danger"]
    .admin-user-action-context {
    border-left-color: #d65168;
    background: rgba(170, 48, 68, .12);
    color: #e5b4bd;
}

#admin-user-drawer .admin-user-economy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#admin-user-drawer .admin-user-economy-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid #3b2b45;
    border-radius: 13px;
    background: #17101c;
}

#admin-user-drawer .admin-user-economy-card > div {
    display: grid;
    gap: 2px;
    margin-bottom: 11px;
}

#admin-user-drawer .admin-user-economy-card > div span {
    color: #a675c2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

#admin-user-drawer .admin-user-economy-card > div strong {
    color: #e9dcec;
    font-size: 13px;
}

#admin-user-drawer .admin-user-form-feedback {
    min-height: 17px;
    color: #a996b4;
    font-size: 11px;
    line-height: 1.45;
}

#admin-user-drawer .admin-user-form-feedback[data-tone="error"] {
    color: #ff9daf;
}

#admin-user-drawer .admin-user-form-feedback[data-tone="loading"] {
    color: #d6b2eb;
}

#admin-user-drawer input,
#admin-user-drawer select,
#admin-user-drawer textarea,
#admin-user-drawer button {
    min-width: 0;
}

#admin-user-drawer input:disabled,
#admin-user-drawer select:disabled,
#admin-user-drawer textarea:disabled {
    cursor: wait;
    opacity: .58;
}

#admin-user-drawer .admin-user-history article {
    background: rgba(20, 14, 25, .82);
}

@media (max-width: 700px) {
    #admin-user-drawer .admin-user-drawer-panel {
        width: 100%;
        max-width: none;
        padding: 16px 14px max(24px, env(safe-area-inset-bottom));
        overflow-x: hidden;
    }

    #admin-user-drawer .admin-user-compact-summary,
    #admin-user-drawer .admin-user-economy-grid {
        grid-template-columns: 1fr;
    }

    #admin-user-drawer .admin-user-compact-summary > div {
        min-height: 58px;
    }

    #admin-user-drawer .admin-user-section-card {
        padding: 14px;
    }

    #admin-user-drawer .admin-user-moderation-form button[type="submit"],
    #admin-user-drawer .admin-user-action-form button[type="submit"] {
        width: 100%;
        min-height: 44px;
    }

    #admin-user-drawer .admin-user-history-head time {
        white-space: normal;
    }
}

/* ADMIN_CODES_TABS_V1 */
.sales-codes-panel .admin-code-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 18px 0;
    padding: 5px;
    border: 1px solid #3b2b45;
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgba(91, 52, 111, .15), transparent 58%),
        #17101c;
}

.sales-codes-panel .admin-code-tabs button {
    min-width: 0;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: #a996b4;
    font-weight: 750;
    line-height: 1.25;
    transition:
        transform .09s ease,
        border-color .14s ease,
        background .14s ease,
        color .14s ease,
        box-shadow .14s ease;
}

.sales-codes-panel .admin-code-tabs button:hover:not(:disabled) {
    border-color: rgba(149, 92, 183, .42);
    background: rgba(102, 57, 128, .16);
    color: #e2d2ea;
}

.sales-codes-panel .admin-code-tabs button.active {
    border-color: rgba(184, 116, 226, .62);
    background:
        linear-gradient(135deg, rgba(136, 73, 170, .38), rgba(75, 41, 93, .26));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 8px 24px rgba(45, 20, 59, .24);
    color: #f4e9fa;
}

.sales-codes-panel .admin-code-tabs button:active:not(:disabled) {
    transform: translateY(1px) scale(.985);
}

.sales-codes-panel .admin-code-tabs button:focus-visible {
    outline: 2px solid #c28af0;
    outline-offset: 2px;
}

.sales-codes-panel .admin-code-tab-panel[hidden] {
    display: none;
}

.sales-codes-panel .admin-code-tab-panel {
    min-width: 0;
}

.sales-codes-panel .admin-code-tab-panel > .admin-card:first-child {
    margin-top: 0;
}

@media (max-width: 620px) {
    .sales-codes-panel .admin-code-tabs {
        grid-template-columns: 1fr;
    }

    .sales-codes-panel .admin-code-tabs button {
        width: 100%;
        min-height: 46px;
        white-space: normal;
    }

    .sales-codes-panel .admin-code-tab-panel,
    .sales-codes-panel .admin-code-tab-panel .admin-card,
    .sales-codes-panel .admin-code-tab-panel form {
        min-width: 0;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sales-codes-panel .admin-code-tabs button {
        transition: none;
    }
}

/* GLOBAL_VISUAL_QUALITY_V1 */
:root {
    --eternal-control-height: 42px;
    --eternal-control-radius: 11px;
    --eternal-control-border: rgba(181, 116, 215, .30);
    --eternal-control-border-hover: rgba(199, 139, 235, .52);
    --eternal-control-bg: rgba(15, 9, 20, .94);
    --eternal-control-bg-hover: rgba(24, 14, 31, .98);
    --eternal-focus: #c98cf1;
    --eternal-success: #92e9b5;
    --eternal-warning: #f0c578;
    --eternal-danger: #ff9eae;
    --eternal-surface-border: rgba(179, 113, 213, .22);
    --eternal-surface-shadow: 0 18px 55px rgba(0, 0, 0, .24);
}

/* Class-specific controls keep their own colors; this catches raw browser UI. */
:where(button, input, textarea, select) {
    font: inherit;
}

:where(button) {
    min-height: 40px;
    border: 1px solid rgba(174, 111, 255, .28);
    border-radius: 10px;
    background-color: rgba(78, 39, 96, .24);
    color: inherit;
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    textarea,
    select
) {
    min-width: 0;
    min-height: var(--eternal-control-height);
    padding: 10px 12px;
    border: 1px solid var(--eternal-control-border);
    border-radius: var(--eternal-control-radius);
    background-color: var(--eternal-control-bg);
    color: #f3eaf7;
    caret-color: #d99cff;
    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease,
        opacity 120ms ease;
}

:where(textarea) {
    line-height: 1.5;
    resize: vertical;
}

:where(select:not([multiple])) {
    appearance: none;
    padding-right: 38px;
    background-image:
        linear-gradient(45deg, transparent 50%, #b98bd2 50%),
        linear-gradient(135deg, #b98bd2 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 50%,
        calc(100% - 12px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea
)::placeholder {
    color: #75677e;
    opacity: 1;
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    textarea,
    select
):hover:not(:disabled) {
    border-color: var(--eternal-control-border-hover);
    background-color: var(--eternal-control-bg-hover);
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    textarea,
    select
):focus-visible {
    outline: 2px solid var(--eternal-focus);
    outline-offset: 2px;
    border-color: rgba(210, 151, 246, .72);
    box-shadow: 0 0 0 4px rgba(153, 78, 194, .13);
}

:where(input, textarea, select)[aria-invalid="true"],
:where(input, textarea, select).is-invalid {
    border-color: rgba(255, 104, 132, .86);
    box-shadow: 0 0 0 3px rgba(174, 43, 68, .14);
}

:where(input, textarea, select):disabled {
    cursor: not-allowed;
    opacity: .52;
    filter: saturate(.65);
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    display: inline-grid;
    flex: 0 0 auto;
    place-content: center;
    width: 19px;
    height: 19px;
    margin: 0 7px 0 0;
    border: 1px solid rgba(190, 126, 225, .52);
    background: #100a15;
    vertical-align: -.22em;
    transition:
        transform 90ms ease,
        border-color 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease;
}

input[type="checkbox"] {
    border-radius: 6px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]::before,
input[type="radio"]::before {
    content: "";
    transform: scale(0);
    transition: transform 90ms ease;
}

input[type="checkbox"]::before {
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg) scale(0);
}

input[type="radio"]::before {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    border-color: #bd75e8;
    background: linear-gradient(145deg, #9748c1, #632b83);
    box-shadow: 0 0 0 3px rgba(169, 83, 213, .13);
}

input[type="checkbox"]:checked::before {
    transform: rotate(-45deg) scale(1);
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--eternal-focus);
    outline-offset: 3px;
}

input[type="checkbox"]:active:not(:disabled),
input[type="radio"]:active:not(:disabled) {
    transform: scale(.9);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    cursor: not-allowed;
    opacity: .48;
}

/* Shared action tones without replacing component-level layouts. */
.sales-code-primary,
.admin-announcement-primary,
.reader-comment-submit,
.series-action-library,
.market-buy-button {
    border-color: rgba(196, 116, 239, .56);
    background:
        linear-gradient(135deg, rgba(139, 65, 177, .90), rgba(91, 38, 122, .94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 9px 24px rgba(61, 23, 82, .22);
    color: #fff;
    font-weight: 800;
}

button.danger,
button[data-cosmetic-delete],
button[data-admin-series-delete],
.eternal-decision-confirm.is-danger {
    border-color: rgba(244, 101, 127, .55);
    background-color: rgba(133, 39, 58, .78);
    color: #ffe7ec;
}

button.danger:hover:not(:disabled),
button[data-cosmetic-delete]:hover:not(:disabled),
button[data-admin-series-delete]:hover:not(:disabled) {
    border-color: rgba(255, 128, 151, .78);
    background-color: rgba(157, 46, 68, .88);
}

/* Surfaces share depth and border language while retaining their layouts. */
.admin-card,
.admin-stat,
.sidebar-card,
.reader-comments,
.series-reviews,
.account-dialog,
.admin-user-drawer-panel,
.eternal-decision-card {
    border-color: var(--eternal-surface-border);
    box-shadow: var(--eternal-surface-shadow);
}

.admin-card,
.admin-user-drawer-panel,
.eternal-decision-card {
    background-image:
        linear-gradient(145deg, rgba(91, 49, 111, .07), transparent 42%);
}

.admin-card > :first-child,
.admin-user-drawer-section > :first-child {
    margin-top: 0;
}

.admin-card > :last-child,
.admin-user-drawer-section > :last-child {
    margin-bottom: 0;
}

/* Dense admin lists remain compact but gain a readable interaction state. */
.admin-table tbody tr,
.admin-chapter-table tbody tr,
.admin-series-table tbody tr,
.cosmetic-admin-table tbody tr,
.code-history-table tbody tr {
    transition:
        background-color 120ms ease,
        box-shadow 120ms ease;
}

.admin-table tbody tr:hover,
.admin-chapter-table tbody tr:hover,
.admin-series-table tbody tr:hover,
.cosmetic-admin-table tbody tr:hover,
.code-history-table tbody tr:hover {
    background: rgba(128, 67, 153, .075);
}

.admin-table tbody tr:focus-within,
.admin-chapter-table tbody tr:focus-within,
.admin-series-table tbody tr:focus-within,
.cosmetic-admin-table tbody tr:focus-within,
.code-history-table tbody tr:focus-within {
    background: rgba(144, 76, 174, .10);
    box-shadow: inset 3px 0 0 rgba(192, 123, 230, .52);
}

.admin-table th,
.admin-chapter-table th,
.admin-series-table th,
.cosmetic-admin-table th,
.code-history-table th {
    color: #b5a3bf;
    font-weight: 800;
}

.admin-table td,
.admin-chapter-table td,
.admin-series-table td,
.cosmetic-admin-table td,
.code-history-table td {
    line-height: 1.4;
}

/* Search and filter bars read as one coherent control group. */
.admin-series-toolbar,
.admin-chapter-toolbar,
.cosmetic-admin-toolbar,
.admin-analytics-toolbar,
.admin-announcement-toolbar,
.admin-email-toolbar,
.code-history-toolbar,
.admin-user-history-toolbar,
.discovery-controls {
    padding: 12px;
    border: 1px solid rgba(173, 108, 207, .18);
    border-radius: 14px;
    background: rgba(17, 10, 22, .62);
}

.admin-series-pagination,
.admin-chapter-pagination,
.admin-users-pagination,
.admin-user-history-pagination,
.cosmetic-admin-pagination,
.cosmetic-market-pagination,
.admin-analytics-pagination,
.admin-announcement-pagination,
.admin-email-pagination,
.code-history-pagination,
.discovery-pagination,
.notification-pagination {
    min-width: 0;
}

.admin-series-pagination button,
.admin-chapter-pagination button,
.admin-users-pagination button,
.admin-user-history-pagination button,
.cosmetic-admin-pagination button,
.cosmetic-market-pagination button,
.admin-analytics-pagination button,
.admin-announcement-pagination button,
.admin-email-pagination button,
.code-history-pagination button,
.discovery-pagination button,
.notification-pagination button {
    min-width: 42px;
    min-height: 40px;
}

/* One structural badge language; semantic colors remain data-driven. */
.status-pill,
.admin-series-status,
.admin-series-lock,
.cosmetic-admin-status,
.admin-user-status,
.admin-announcement-status,
.admin-email-state,
.code-history-status,
.admin-user-status-badge,
.sales-code-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.admin-user-status[data-user-status="aktif"],
.cosmetic-admin-status[data-active="true"],
.admin-announcement-status:not([data-active="false"]),
.code-history-status[data-status="active"],
.code-history-status[data-status="unused"],
.admin-email-state[data-state="delivered"] {
    border-color: rgba(104, 219, 155, .38);
    background: rgba(45, 143, 89, .12);
    color: var(--eternal-success);
}

.admin-user-status[data-user-status="susturulmuş"],
.admin-series-lock[data-locked="true"],
.admin-email-state[data-state="retry"] {
    border-color: rgba(238, 176, 80, .42);
    background: rgba(158, 103, 27, .12);
    color: var(--eternal-warning);
}

.admin-user-status[data-user-status="banlı"],
.admin-email-state[data-state="failed"],
.admin-email-state[data-state="blocked"] {
    border-color: rgba(255, 93, 119, .40);
    background: rgba(150, 39, 60, .12);
    color: var(--eternal-danger);
}

.admin-user-status[data-user-status="pasif"],
.cosmetic-admin-status[data-active="false"],
.admin-announcement-status[data-active="false"],
.code-history-status[data-status="disabled"],
.code-history-status[data-status="used"] {
    border-color: rgba(173, 151, 185, .28);
    background: rgba(102, 84, 111, .13);
    color: #b5a5bd;
}

/* Loading, empty and error messages use the same quiet surface language. */
:is(
    .empty-state,
    .announcement-empty,
    .discovery-empty,
    .series-empty-chapters,
    .series-review-empty,
    .reader-comment-empty,
    .admin-empty-state,
    .admin-announcement-empty,
    .admin-email-empty,
    .quick-hub-empty-state,
    .notification-empty-state,
    .cosmetic-market-empty
) {
    min-height: 92px;
    padding: 20px;
    border: 1px dashed rgba(175, 111, 208, .30);
    border-radius: 13px;
    background: rgba(18, 11, 23, .68);
    color: #9d8ca7;
    line-height: 1.55;
    text-align: center;
}

:is(
    .discovery-loading,
    .cosmetic-market-loading,
    .notification-center-loading,
    .admin-announcement-loading,
    .admin-email-loading,
    .admin-cosmetic-loading
) {
    min-height: 72px;
    padding: 18px;
    border: 1px solid rgba(171, 107, 205, .20);
    border-radius: 13px;
    background: rgba(18, 11, 23, .70);
    color: #b7a4c1;
    text-align: center;
}

:is(
    .admin-announcement-error,
    .admin-email-load-error,
    .admin-email-detail-error,
    .quick-hub-error,
    .cosmetic-market-error,
    .admin-cosmetic-error
) {
    padding: 18px;
    border: 1px solid rgba(238, 83, 111, .34);
    border-radius: 13px;
    background: rgba(93, 25, 39, .13);
    color: #e8a5b1;
    line-height: 1.5;
    text-align: center;
}

@media (pointer: coarse) {
    :where(button, [role="button"]),
    .admin-sidebar-foot a,
    a.primary-series-action,
    a.secondary-series-action,
    a.notification-open-link {
        min-height: 44px;
    }
}

@media (max-width: 620px) {
    .admin-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-heading > button,
    .admin-heading > div:last-child button,
    .admin-card form > button,
    .admin-user-drawer-section form > button {
        min-height: 44px;
    }

    .admin-series-toolbar,
    .admin-chapter-toolbar,
    .cosmetic-admin-toolbar,
    .admin-analytics-toolbar,
    .admin-announcement-toolbar,
    .admin-email-toolbar,
    .code-history-toolbar,
    .admin-user-history-toolbar,
    .discovery-controls {
        min-width: 0;
        max-width: 100%;
        padding: 10px;
    }

    .admin-user-drawer-panel,
    .eternal-decision-card,
    .account-dialog {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(
        input:not([type="checkbox"]):not([type="radio"]),
        textarea,
        select,
        input[type="checkbox"],
        input[type="radio"]
    ),
    .admin-table tbody tr {
        transition: none;
    }
}



/* COSMETIC_MARKET_PAGINATION_V1 */

.cosmetic-market-toolbar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(180px, 240px)
        auto;
    gap: 12px;
    align-items: center;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(171, 107, 205, .18);
    border-radius: 16px;
    background: rgba(17, 10, 23, .78);
}

.cosmetic-market-search input,
.cosmetic-market-filter select {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(178, 111, 214, .24);
    border-radius: 12px;
    outline: none;
    background: rgba(8, 5, 12, .72);
    color: #f3eafa;
    font: inherit;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.cosmetic-market-search input:focus,
.cosmetic-market-filter select:focus {
    border-color: rgba(187, 110, 255, .72);
    box-shadow: 0 0 0 3px rgba(147, 73, 206, .15);
    background: rgba(16, 9, 22, .92);
}

.cosmetic-market-search input::placeholder {
    color: #8e7f98;
}

.cosmetic-market-result-count {
    justify-self: end;
    color: #bca8c8;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.cosmetic-market-card {
    min-height: 0;
    padding: 16px;
    border-radius: 17px;
}

.cosmetic-market-card h3 {
    margin: 14px 0 6px;
    font-size: 18px;
    line-height: 1.25;
}

.cosmetic-market-card p {
    margin: 0 0 14px;
    font-size: 14px;
}

.cosmetic-market-card .cosmetic-market-preview {
    width: 68px;
    height: 68px;
    margin-bottom: 14px;
}

.cosmetic-market-card .cosmetic-market-preview-core {
    width: 46px;
    height: 46px;
    font-size: 20px;
}

.cosmetic-market-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.cosmetic-market-pagination[hidden] {
    display: none;
}

.cosmetic-market-pagination button {
    min-width: 96px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(177, 103, 222, .3);
    border-radius: 11px;
    background: rgba(25, 14, 33, .88);
    color: #eadcf2;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease;
}

.cosmetic-market-pagination button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(190, 113, 255, .58);
    background: rgba(42, 22, 56, .96);
}

.cosmetic-market-pagination button:active:not(:disabled) {
    transform: translateY(0) scale(.98);
}

.cosmetic-market-pagination button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.cosmetic-market-pagination span {
    min-width: 72px;
    color: #bca8c8;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 760px) {
    .cosmetic-market-toolbar {
        grid-template-columns: 1fr;
    }

    .cosmetic-market-result-count {
        justify-self: start;
    }

    .cosmetic-market-pagination {
        justify-content: space-between;
    }

    .cosmetic-market-pagination button {
        min-width: 0;
        flex: 1;
    }
}

/* NOTIFICATION_FILTER_VERTICAL_V1 */
.notification-filter-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    width: 100%;
    overflow-x: visible;
    padding: 2px 0 6px;
}

.notification-filter-bar button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .notification-filter-bar {
        grid-template-columns: 1fr;
    }
}

/* QUICK_HUB_VISUAL_POLISH_V2 (QUICK_HUB_DROPDOWN_V1: directional
   edge-shadow/border replaced with an all-around dropdown shadow) */
.quick-hub {
    width: min(410px, 92vw);
    max-width: 92vw;
    padding: 22px;
    border: 1px solid rgba(196, 124, 255, .18);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(143, 72, 204, .18),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(15, 9, 23, .99),
            rgba(8, 5, 13, .995)
        );
    box-shadow:
        0 25px 70px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

/* QUICK_HUB_DROPDOWN_V1: no ::backdrop anymore - non-modal, doesn't
   dim or block the rest of the site behind it. */

.quick-hub-top {
    min-height: 48px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(191, 125, 236, .12);
}

.quick-hub-top h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.quick-hub-top button {
    border: 1px solid rgba(183, 117, 230, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    color: #cdbed7;
    transition:
        background .14s ease,
        border-color .14s ease,
        transform .12s ease;
}

.quick-hub-top button:hover {
    background: rgba(133, 71, 176, .18);
    border-color: rgba(193, 126, 239, .3);
}

.quick-hub .quick-hub-identity {
    position: relative;
    margin: 18px 0 14px;
    padding: 16px;
    border: 1px solid rgba(192, 117, 239, .15);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(92, 47, 125, .16),
            rgba(255, 255, 255, .018)
        );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.quick-hub .profile-avatar-preview-shell {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

.quick-hub .quick-hub-identity h2 {
    margin: 7px 0 0;
    font-size: 21px;
    line-height: 1.15;
}

.quick-hub-stats {
    gap: 10px;
    padding: 0;
    border: 0;
}

.quick-hub-stats > span {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(182, 112, 225, .13);
    border-radius: 13px;
    background: rgba(255, 255, 255, .022);
}

.quick-hub-stats strong {
    margin-top: 6px;
    font-size: 16px;
    color: #efd8ff;
}

.quick-hub-summary {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 2px solid rgba(187, 119, 234, .45);
    border-radius: 0 10px 10px 0;
    background: rgba(93, 49, 121, .09);
    line-height: 1.45;
}

.quick-hub-actions {
    gap: 7px;
    margin-top: 4px;
}

.quick-hub-actions > button,
.quick-hub-actions > a {
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid rgba(174, 107, 218, .09);
    border-radius: 12px;
    background: rgba(255, 255, 255, .014);
    transition:
        background .13s ease,
        border-color .13s ease,
        transform .1s ease;
}

.quick-hub-actions > button:hover,
.quick-hub-actions > a:hover {
    background: rgba(91, 49, 120, .2);
    border-color: rgba(185, 119, 229, .2);
}

.quick-hub-actions > button:active,
.quick-hub-actions > a:active {
    transform: translateY(1px);
}

.quick-hub-actions > button span,
.quick-hub-actions > a span {
    color: #a987bd;
    font-size: 18px;
}

.quick-hub-actions [data-hub-logout] {
    margin-top: 9px;
    border-top: 1px solid rgba(230, 121, 153, .12);
    color: #e7a8bd;
}

.quick-hub-recent,
.quick-hub-prestige {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .02),
        0 8px 24px rgba(0, 0, 0, .08);
}

.quick-hub-subview {
    padding-top: 14px;
}

.quick-hub-back {
    border-radius: 11px;
}

.quick-hub-subview input:not([type="checkbox"]) {
    min-height: 44px;
    border-color: rgba(168, 103, 209, .3);
    background: rgba(20, 12, 28, .92);
}

.quick-hub-subview button {
    border-color: rgba(164, 96, 208, .3);
    background: rgba(72, 38, 96, .42);
}

.quick-hub-subview button:hover:not(:disabled) {
    background: rgba(94, 48, 126, .56);
}

@media (max-width: 640px) {
    .quick-hub {
        width: min(100%, 420px);
        max-width: 100%;
        padding: 18px;
    }

    .quick-hub .quick-hub-identity {
        padding: 14px;
    }

    .quick-hub-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* QUICK_HUB_READING_REWARD_POLISH_V1 */
.quick-hub-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 10px;
}

.quick-hub-section-heading h3 {
    margin: 0;
}

.quick-hub-section-heading small {
    color: #8f7d9d;
    font-size: 11px;
    text-align: right;
}

.quick-hub-reading-list,
.quick-hub-library-list,
.quick-hub-reward-list {
    gap: 8px;
}

.quick-hub-reading-list > a,
.quick-hub-library-list > a,
.quick-hub-reward-list > article {
    padding: 13px 14px;
    border: 1px solid rgba(178, 108, 221, .12);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(43, 25, 57, .42),
            rgba(18, 11, 24, .52)
        );
    transition:
        border-color .14s ease,
        background .14s ease,
        transform .1s ease;
}

.quick-hub-reading-list > a:hover,
.quick-hub-library-list > a:hover {
    border-color: rgba(190, 121, 234, .28);
    background:
        linear-gradient(
            145deg,
            rgba(58, 32, 76, .55),
            rgba(22, 13, 29, .62)
        );
    transform: translateY(-1px);
}

.quick-hub-reading-list strong,
.quick-hub-library-list strong,
.quick-hub-reward-list strong {
    color: #f3e9f8;
    font-size: 13px;
}

.quick-hub-reading-list small,
.quick-hub-library-list small {
    color: #a894b7;
    font-size: 11px;
}

.quick-hub-reward-summary {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(187, 116, 229, .18);
    border-radius: 15px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(156, 73, 204, .14),
            transparent 42%
        ),
        rgba(37, 22, 49, .72);
}

.quick-hub-reward-main {
    display: grid;
    gap: 5px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(184, 116, 225, .12);
}

.quick-hub-reward-main small,
.quick-hub-reward-stats small {
    color: #9b89a8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.quick-hub-reward-main strong {
    color: #f1d8ff;
    font-size: 22px;
    line-height: 1;
}

.quick-hub-reward-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.quick-hub-reward-stats > div {
    display: grid;
    gap: 4px;
    padding: 10px 11px;
    border: 1px solid rgba(172, 106, 214, .11);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
}

.quick-hub-reward-stats strong {
    color: #eadbf3;
    font-size: 13px;
}

.quick-hub-reward-list > article {
    position: relative;
    padding-right: 88px;
}

.quick-hub-reward-list > article span {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #dca7ff;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 520px) {
    .quick-hub-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .quick-hub-section-heading small {
        text-align: left;
    }

    .quick-hub-reward-stats {
        grid-template-columns: 1fr;
    }

    .quick-hub-reward-list > article {
        padding-right: 14px;
    }

    .quick-hub-reward-list > article span {
        position: static;
        transform: none;
    }
}

/* QUICK_HUB_LIBRARY_REMOVE_V1 */
.quick-hub-library-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid rgba(178, 108, 221, .12);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(43, 25, 57, .42),
            rgba(18, 11, 24, .52)
        );
}

.quick-hub-library-item > a {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.quick-hub-library-item > a:hover strong {
    color: #dcaeff;
}

.quick-hub-library-remove {
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-color: rgba(225, 102, 139, .24) !important;
    background: rgba(112, 39, 64, .18) !important;
    color: #e9afc1 !important;
    font-size: 11px !important;
}

.quick-hub-library-remove:hover:not(:disabled) {
    background: rgba(137, 45, 75, .28) !important;
    border-color: rgba(236, 118, 153, .4) !important;
}

@media (max-width: 520px) {
    .quick-hub-library-item {
        grid-template-columns: 1fr;
    }

    .quick-hub-library-remove {
        width: 100%;
    }
}

/* SERIES_DETAIL_VISUAL_POLISH_V2 */
.series-detail-hero {
    align-items: start;
    gap: 42px;
    padding: 38px;
    border-color: rgba(199, 78, 255, .22);
    box-shadow:
        0 32px 82px rgba(0, 0, 0, .46),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.series-cover-stage {
    align-self: start;
}

.series-cover-frame {
    border-radius: 19px;
    border-color: rgba(218, 111, 255, .34);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .54),
        0 0 42px rgba(153, 37, 222, .16),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.series-detail-content {
    padding-top: 5px;
}

.series-detail-title {
    max-width: 820px;
    font-size: clamp(40px, 4.7vw, 62px);
    line-height: 1.02;
    letter-spacing: -.03em;
    text-shadow: 0 8px 30px rgba(0, 0, 0, .32);
}

.series-detail-original {
    margin-top: 10px;
    color: #bd6fe2;
    font-size: 12px;
    letter-spacing: .02em;
}

.series-detail-badges {
    margin-top: 16px;
    gap: 7px;
}

.preview-pill {
    padding: 5px 9px;
    border: 1px solid rgba(189, 105, 229, .14);
    background: rgba(255, 255, 255, .035);
    color: #a99eaf;
    font-size: 10px;
}

.series-detail-description {
    max-width: 820px;
    margin-top: 20px;
    color: #bdb2c1;
    font-size: 14px;
    line-height: 1.75;
}

.series-info-grid {
    max-width: 820px;
    margin-top: 22px;
    gap: 9px;
}

.series-info-box {
    min-height: 78px;
    padding: 14px;
    border-color: rgba(195, 77, 255, .17);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .028),
            rgba(123, 46, 158, .025)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .018);
}

.series-info-box span {
    margin-bottom: 7px;
    color: #817487;
    font-size: 9px;
}

.series-info-box strong {
    color: #eee6f1;
    font-size: 12px;
}

.series-reactions {
    max-width: 820px;
    margin-top: 19px;
    padding: 14px 15px;
    border-color: rgba(190, 93, 229, .25);
    border-radius: 13px;
}

.series-actions {
    max-width: 820px;
    margin-top: 20px;
    gap: 9px;
    padding-top: 17px;
    border-top: 1px solid rgba(191, 99, 229, .10);
}

.primary-series-action,
.secondary-series-action {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
}

.primary-series-action {
    background:
        linear-gradient(
            135deg,
            #7b2eb2,
            #491565
        );
    border-color: rgba(218, 117, 255, .42);
    box-shadow:
        0 12px 30px rgba(115, 31, 161, .22),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.series-action-library {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 8px 22px rgba(84, 24, 115, .14);
}

.series-action-library.is-active {
    border-color: rgba(105, 232, 174, .58);
    background:
        linear-gradient(
            135deg,
            rgba(29, 96, 72, .72),
            rgba(16, 55, 43, .84)
        );
    color: #d4ffe7;
}

@media (max-width: 900px) {
    .series-detail-hero {
        gap: 30px;
        padding: 30px;
    }

    .series-detail-title {
        font-size: clamp(38px, 6vw, 54px);
    }
}

@media (max-width: 720px) {
    .series-detail-content {
        padding-top: 0;
    }

    .series-detail-description,
    .series-info-grid,
    .series-reactions,
    .series-actions {
        max-width: none;
    }
}

@media (max-width: 520px) {
    .series-detail-hero {
        padding: 18px;
        border-radius: 18px;
    }

    .series-detail-title {
        font-size: 35px;
    }

    .series-info-box {
        min-height: 70px;
        padding: 12px;
    }

    .series-actions {
        padding-top: 15px;
    }
}

/* HOME_VISUAL_POLISH_V3 */
.hero-panel {
    min-height: 270px;
    padding: 42px 50px;
}

.home-grid {
    gap: 22px;
}

.home-main .section {
    margin-top: 30px;
}

.daily-pick-section {
    margin-top: 30px;
}

.daily-pick-card {
    min-height: 126px;
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 14px 34px rgba(0, 0, 0, .16);
}

.daily-pick-guest {
    min-height: 126px;
    padding: 19px 22px;
    gap: 15px;
}

.daily-pick-symbol {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
}

.home-main .empty-state {
    min-height: 86px;
    padding: 17px 20px;
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            rgba(20, 12, 26, .72),
            rgba(10, 6, 14, .78)
        );
}

.home-sidebar {
    gap: 14px;
}

.home-sidebar .sidebar-card {
    padding: 16px;
    border-radius: 13px;
    background:
        radial-gradient(
            circle at 95% 0,
            rgba(133, 31, 203, .10),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(20, 10, 27, .96),
            rgba(10, 6, 14, .98)
        );
}

.home-sidebar .sidebar-card h3 {
    font-size: 25px;
}

.home-sidebar .quick-series {
    margin-top: 10px;
    gap: 6px;
}

.home-sidebar .quick-series-item {
    min-height: 58px;
    padding: 6px;
    border-radius: 9px;
    transition:
        transform .12s ease,
        border-color .14s ease,
        background .14s ease;
}

.home-sidebar .quick-series-item:hover {
    transform: translateY(-1px);
}

.home-sidebar .quick-series-cover {
    width: 42px;
    height: 48px;
}

.home-sidebar .announcement-empty {
    min-height: 78px;
    padding: 14px;
}

#series .discovery-controls {
    margin-bottom: 12px;
    padding: 10px;
    gap: 8px;
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            rgba(20, 12, 26, .76),
            rgba(10, 6, 14, .78)
        );
}

#series .discovery-controls select,
#series .discovery-reset {
    min-height: 40px;
    height: 40px;
    border-radius: 9px;
}

#series .series-list {
    gap: 8px;
}

#series .series-row {
    min-height: 98px;
    padding: 9px 11px;
    border-radius: 11px;
    transition:
        transform .12s ease,
        border-color .14s ease,
        background .14s ease;
}

#series .series-row:hover {
    transform: translateY(-1px);
}

#series .discovery-pagination {
    margin-top: 14px;
}

.about-section {
    margin-top: 30px;
    margin-bottom: 34px;
    padding: 25px 27px;
}

@media (max-width: 950px) {
    .home-sidebar {
        gap: 12px;
    }
}

@media (max-width: 570px) {
    .hero-panel {
        min-height: auto;
        padding: 25px 19px;
    }

    .home-main .section,
    .daily-pick-section {
        margin-top: 25px;
    }

    .daily-pick-card,
    .daily-pick-guest {
        min-height: 112px;
    }

    .daily-pick-guest {
        padding: 17px;
    }

    .home-main .empty-state {
        min-height: 74px;
        padding: 15px;
    }

    .home-sidebar .sidebar-card {
        padding: 15px;
    }
}

/* RAW_BROWSER_CONTROLS_POLISH_V1 */
input[type="file"] {
    width: 100%;
    min-width: 0;
    min-height: var(--eternal-control-height);
    padding: 6px;
    border: 1px solid var(--eternal-control-border);
    border-radius: var(--eternal-control-radius);
    background-color: var(--eternal-control-bg);
    color: #cdbfd5;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    min-height: 34px;
    margin-right: 10px;
    padding: 0 13px;
    border: 1px solid rgba(190, 118, 230, .34);
    border-radius: 8px;
    background:
        linear-gradient(
            145deg,
            rgba(111, 48, 144, .72),
            rgba(61, 27, 79, .82)
        );
    color: #f3e8f8;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color .14s ease,
        background .14s ease,
        transform .09s ease;
}

input[type="file"]::file-selector-button:hover {
    border-color: rgba(216, 139, 249, .58);
    background:
        linear-gradient(
            145deg,
            rgba(132, 57, 170, .82),
            rgba(75, 32, 96, .90)
        );
}

input[type="file"]::file-selector-button:active {
    transform: translateY(1px) scale(.985);
}

input[type="number"] {
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

input[type="file"]:focus-visible {
    outline: 2px solid var(--eternal-focus);
    outline-offset: 2px;
    border-color: rgba(210, 151, 246, .72);
    box-shadow: 0 0 0 4px rgba(153, 78, 194, .13);
}

input[type="file"]:disabled::file-selector-button {
    cursor: not-allowed;
    opacity: .56;
}

/* PUBLIC_404_UI_V1 */
.not-found-screen {
    width: min(760px, calc(100% - 32px));
    margin: 72px auto;
    padding: 64px 36px;
    text-align: center;
    border: 1px solid rgba(168, 85, 247, 0.32);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(126, 34, 206, 0.20),
            transparent 55%
        ),
        rgba(17, 10, 27, 0.92);
}

.not-found-code {
    margin: 8px 0 4px;
    font-size: clamp(72px, 14vw, 150px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.06em;
    opacity: 0.16;
}

.not-found-screen h1 {
    margin: 0 0 14px;
}

.not-found-screen > p:not(.eyebrow) {
    max-width: 520px;
    margin: 0 auto;
    opacity: 0.72;
    line-height: 1.7;
}

.not-found-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.not-found-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 12px;
    text-decoration: none;
}

/* ADMIN_DRAWER_SCROLL_FIX_V1 */
.admin-user-drawer-panel {
    box-sizing: border-box;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
}

/* ADMIN_DRAWER_GLOBAL_UX_V2 */

/*
 * All admin drawers occupy the full viewport height.
 * The panel itself owns vertical scrolling.
 */
.admin-user-drawer {
    position: fixed;
    inset: 0;
}

.admin-user-drawer .admin-user-drawer-panel {
    top: 0;
    right: 0;
    bottom: 0;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scroll-padding-top: 88px;
    touch-action: pan-y;
}

/*
 * Keep drawer title + close button visible while the content scrolls.
 */
.admin-user-drawer .admin-user-drawer-head {
    position: sticky;
    top: 0;
    z-index: 20;
    background: inherit;
    padding-top: 2px;
    padding-bottom: 14px;
}

.admin-user-drawer .admin-user-drawer-close {
    position: relative;
    z-index: 21;
}

/*
 * Series management contains considerably more controls than compact
 * analytics/user drawers, so it gets a wider workspace without becoming
 * fullscreen.
 */
.admin-series-drawer .admin-user-drawer-panel {
    width: min(920px, calc(100vw - 24px));
    max-width: none;
}

@media (max-width: 760px) {
    .admin-series-drawer .admin-user-drawer-panel {
        width: 100vw;
    }
}

/* HEADER_ETR_LOGO_V1 */
.final-brand {
    width: 310px;
    height: 76px;
    flex: 0 0 auto;
}

.final-brand-logo {
    width: 310px;
    height: 76px;
    display: block;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 900px) {
    .final-brand,
    .final-brand-logo {
        width: 225px;
        height: 62px;
    }
}

@media (max-width: 570px) {
    .final-brand,
    .final-brand-logo {
        width: 170px;
        height: 50px;
    }
}

/* HERO_ETR_EMBLEM_FINAL_V2 */
.hero-panel::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    background:
        url("/static/etr-emblem.png")
        center / contain
        no-repeat;
    opacity: .14;
    filter:
        drop-shadow(
            0 0 34px
            rgba(183, 64, 255, .30)
        );
    pointer-events: none;
    z-index: 0;
}

.hero-panel > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .hero-panel::after {
        width: 230px;
        height: 230px;
        right: 8px;
        opacity: .10;
    }
}

@media (max-width: 570px) {
    .hero-panel::after {
        width: 170px;
        height: 170px;
        right: -35px;
        opacity: .07;
    }
}

/* HERO_ETR_FULL_BRAND_V3 */
.hero-panel::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 170px;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background:
        url("/static/etr.png?v=20260919-3")
        center / contain
        no-repeat;
    opacity: .16;
    filter:
        drop-shadow(
            0 0 30px
            rgba(176, 52, 255, .24)
        );
    pointer-events: none;
    z-index: 0;
}

.hero-panel > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .hero-panel::after {
        width: 320px;
        height: 135px;
        right: -15px;
        opacity: .11;
    }
}

@media (max-width: 570px) {
    .hero-panel::after {
        width: 220px;
        height: 100px;
        right: -55px;
        opacity: .065;
    }
}

/* HOME_CATALOG_PREMIUM_V4 */

/* Main content rhythm */
.home-main .section {
    position: relative;
}

/* Updates + catalog rows: quieter premium surfaces */
.update-card,
.series-row {
    border: 1px solid rgba(183, 83, 225, .18);
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 0 0,
            rgba(144, 45, 205, .075),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(14, 8, 20, .96),
            rgba(7, 5, 11, .98)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .022),
        0 14px 36px rgba(0, 0, 0, .18);
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.update-card:hover,
.series-row:hover {
    border-color: rgba(205, 100, 255, .34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 18px 44px rgba(0, 0, 0, .24),
        0 0 24px rgba(139, 38, 199, .055);
    transform: translateY(-2px);
}

/* Series filters: less admin-form, more catalog toolbar */
.home-main form:has(select) {
    padding: 14px;
    border: 1px solid rgba(174, 83, 215, .16);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(20, 11, 28, .76),
            rgba(9, 6, 14, .82)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .018);
}

.home-main form:has(select) label {
    color: #94869d;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .025em;
}

.home-main form:has(select) select,
.home-main form:has(select) button {
    min-height: 42px;
    border-radius: 12px;
}

.home-main form:has(select) select {
    border-color: rgba(175, 90, 218, .23);
    background-color: rgba(12, 7, 17, .88);
}

.home-main form:has(select) select:hover,
.home-main form:has(select) select:focus {
    border-color: rgba(205, 103, 255, .42);
}

.home-main form:has(select) button {
    border-color: rgba(190, 91, 235, .24);
    background:
        linear-gradient(
            180deg,
            rgba(51, 25, 69, .92),
            rgba(29, 14, 40, .96)
        );
    font-weight: 750;
}

.home-main form:has(select) button:hover {
    border-color: rgba(211, 112, 255, .48);
    background:
        linear-gradient(
            180deg,
            rgba(67, 31, 91, .96),
            rgba(37, 17, 51, .98)
        );
}

/* Home pagination */
.home-main [class*="pagination"] {
    margin-top: 16px;
    gap: 10px;
}

.home-main [class*="pagination"] button {
    min-width: 68px;
    min-height: 39px;
    padding: 8px 13px;
    border: 1px solid rgba(174, 80, 216, .20);
    border-radius: 12px;
    background: rgba(21, 11, 29, .84);
    transition:
        border-color .15s ease,
        background .15s ease,
        transform .12s ease;
}

.home-main [class*="pagination"] button:hover:not(:disabled) {
    border-color: rgba(210, 102, 255, .42);
    background: rgba(43, 20, 58, .92);
    transform: translateY(-1px);
}

.home-main [class*="pagination"] button:disabled {
    opacity: .34;
}

/* Sidebar: one coherent premium language */
.home-sidebar {
    gap: 14px;
}

.home-sidebar .sidebar-card {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 20px;
    border: 1px solid rgba(180, 83, 220, .20);
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(144, 45, 205, .13),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(21, 11, 29, .97),
            rgba(10, 6, 15, .99)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 16px 38px rgba(0, 0, 0, .20);
}

.home-sidebar .sidebar-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(202, 102, 255, .42),
            transparent
        );
    pointer-events: none;
}

.home-sidebar .sidebar-card h3 {
    margin-top: 5px;
    font-size: 26px;
    line-height: 1.05;
}

.home-sidebar .sidebar-card .eyebrow {
    color: #9f8aaa;
}

.home-sidebar .announcement-empty {
    min-height: 86px;
    padding: 17px;
    border: 1px solid rgba(174, 92, 211, .16);
    border-radius: 12px;
    background: rgba(12, 7, 17, .56);
    color: #93849b;
}

.home-sidebar .sidebar-card a {
    transition:
        border-color .14s ease,
        background .14s ease,
        transform .14s ease;
}

.home-sidebar .sidebar-card a:hover {
    transform: translateX(2px);
}

@media (max-width: 900px) {
    .home-main form:has(select) {
        padding: 12px;
    }

    .home-sidebar {
        gap: 12px;
    }
}

@media (max-width: 570px) {
    .update-card,
    .series-row {
        border-radius: 14px;
    }

    .home-main form:has(select) {
        border-radius: 14px;
    }

    .home-sidebar .sidebar-card {
        padding: 16px;
        border-radius: 14px;
    }
}

/* HOME_SERIES_REDESIGN_V1 */

/* Home updates: 6 columns, up to 30 items in the first batch. */
.home-updates-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.home-updates-heading h2 {
    margin: 5px 0 0;
}

.home-update-series-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 18px 15px;
}

.home-update-series-card {
    min-width: 0;
}

.home-update-series-cover-link {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid
        rgba(183, 83, 225, .20);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(29, 14, 40, .96),
            rgba(9, 6, 14, .99)
        );
    box-shadow:
        0 15px 34px
        rgba(0, 0, 0, .26);
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.home-update-series-cover-link:hover {
    transform: translateY(-3px);
    border-color:
        rgba(211, 104, 255, .46);
    box-shadow:
        0 20px 42px
        rgba(0, 0, 0, .34),
        0 0 24px
        rgba(153, 43, 216, .07);
}

.home-update-series-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    font-size: 64px;
}

.home-update-series-info {
    padding: 12px 2px 0;
}

.home-update-series-title {
    display: block;
    overflow: hidden;
    margin-bottom: 9px;
    color: #f2ebf6;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-update-series-title:hover {
    color: #dca1ff;
}

.home-update-chapter-list {
    display: grid;
    gap: 5px;
}

.home-update-chapter-link {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid
        rgba(172, 79, 211, .15);
    border-radius: 9px;
    background:
        rgba(19, 10, 26, .76);
    color: #b9abbf;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background .14s ease,
        border-color .14s ease,
        color .14s ease;
}

.home-update-chapter-link:hover {
    border-color:
        rgba(206, 103, 250, .34);
    background:
        rgba(37, 17, 49, .90);
    color: #efe4f5;
}

.home-update-fire {
    flex: 0 0 auto;
    font-size: 13px;
}

.home-update-no-chapter {
    color: #827488;
    font-size: 11px;
}

.home-update-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.home-update-load-more {
    min-width: 210px;
    min-height: 46px;
    padding: 10px 22px;
    border: 1px solid
        rgba(199, 91, 242, .30);
    border-radius: 13px;
    background:
        linear-gradient(
            180deg,
            rgba(55, 25, 74, .94),
            rgba(30, 14, 42, .97)
        );
    color: #e6cff2;
    font-weight: 800;
    cursor: pointer;
}

.home-update-load-more:hover:not(:disabled) {
    border-color:
        rgba(218, 115, 255, .54);
    background:
        linear-gradient(
            180deg,
            rgba(72, 32, 97, .98),
            rgba(39, 17, 54, .99)
        );
}

.home-updates-loading,
.home-updates-empty {
    grid-column: 1 / -1;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed
        rgba(177, 91, 211, .23);
    border-radius: 14px;
    color: #92849a;
}

/* Compact the earlier homepage elements. */
.daily-pick-card,
.daily-pick-guest {
    min-height: 108px;
}

.home-sidebar {
    align-self: start;
}

/* Separate full catalogue. */
.series-catalog-main {
    width:
        min(
            1380px,
            calc(100% - 32px)
        );
}

.series-catalog-hero {
    margin-bottom: 28px;
    padding: 38px 42px;
    border: 1px solid
        rgba(183, 83, 225, .20);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(146, 47, 205, .22),
            transparent 42%
        ),
        radial-gradient(
            circle at 6% 90%,
            rgba(120, 40, 190, .12),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            rgba(21, 10, 29, .96),
            rgba(9, 5, 14, .99)
        );
}

.series-catalog-hero h1 {
    margin: 5px 0 10px;
    font-size:
        clamp(38px, 5vw, 58px);
}

.series-catalog-hero > p:not(.eyebrow) {
    max-width: 650px;
    color: #a396aa;
    line-height: 1.65;
}

.series-catalog-search {
    max-width: 760px;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;
    gap: 10px;
    margin-top: 24px;
}

.series-catalog-search input {
    min-height: 46px;
    padding: 0 15px;
    border: 1px solid
        rgba(183, 83, 225, .24);
    border-radius: 12px;
    background:
        rgba(9, 5, 13, .82);
    color: #eee6f2;
}

.series-catalog-search button,
.series-catalog-clear {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid
        rgba(192, 88, 235, .27);
    border-radius: 12px;
    background:
        rgba(48, 22, 65, .90);
    color: #e3caef;
    font-weight: 800;
    text-decoration: none;
}

/* PREMIUM_POLISH_V1: the catalog grid sat on flat black behind its cards -
   the same soft glow + emblem watermark language used on the hero panels
   now carries through here so the page doesn't go dead flat below the
   search box. Purely decorative, isolated behind the content. */
.series-catalog-section {
    position: relative;
    margin-bottom: 50px;
    padding: 18px clamp(10px, 2vw, 28px) 28px;
    border-radius: 22px;
    overflow: hidden;
}
.series-catalog-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 8%, rgba(146, 47, 205, .09), transparent 38%),
        radial-gradient(circle at 88% 82%, rgba(120, 40, 190, .07), transparent 42%);
    pointer-events: none;
}
.series-catalog-section::after {
    content: "";
    position: absolute;
    top: 6%;
    right: -4%;
    z-index: -1;
    width: min(26%, 260px);
    aspect-ratio: 1;
    background: url("/static/etr-favicon.png") center / contain no-repeat;
    opacity: .05;
    pointer-events: none;
}
@media (max-width: 768px) {
    .series-catalog-section::after { opacity: .035; width: 34%; }
}

.series-catalog-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.series-catalog-heading h2 {
    margin: 4px 0 0;
}

.series-catalog-heading > strong {
    color: #9d8ba6;
    font-size: 12px;
}

.series-catalog-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 22px 18px;
}

.series-catalog-card {
    min-width: 0;
}

.series-catalog-cover-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid
        rgba(181, 80, 219, .19);
    border-radius: var(--radius-lg);
    background:
        rgba(17, 9, 23, .95);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
/* PREMIUM_POLISH_V1: catalog cards had no hover feedback at all. */
.series-catalog-cover-link:hover {
    transform: translateY(-3px);
    border-color: rgba(213, 122, 255, .42);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .32), 0 0 0 1px rgba(213, 122, 255, .12);
}
@media (prefers-reduced-motion: reduce) {
    .series-catalog-cover-link { transition: none !important; }
    .series-catalog-cover-link:hover { transform: none; }
}

.series-catalog-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    font-size: 72px;
}

.series-catalog-card-body {
    display: grid;
    gap: 7px;
    padding: 11px 2px 0;
}

.series-catalog-title {
    overflow: hidden;
    color: #efe8f3;
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.series-catalog-status {
    color: #97889e;
    font-size: 11px;
}

.series-catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

.series-catalog-pagination a,
.series-catalog-pagination span {
    min-width: 110px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid
        rgba(181, 82, 222, .22);
    border-radius: 12px;
    background:
        rgba(25, 12, 34, .88);
    color: #d9c4e3;
    text-decoration: none;
}

.series-catalog-pagination .is-disabled {
    opacity: .32;
}

.series-catalog-pagination strong {
    min-width: 42px;
    text-align: center;
    color: #dca2fa;
}

.series-catalog-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed
        rgba(175, 87, 209, .24);
    border-radius: 15px;
    color: #918398;
}

@media (max-width: 1180px) {
    .home-update-series-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .series-catalog-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .home-update-series-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .series-catalog-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 570px) {
    .home-update-series-grid,
    .series-catalog-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 16px 10px;
    }

    .home-update-series-title {
        font-size: 13px;
    }

    .series-catalog-hero {
        padding: 25px 19px;
        border-radius: 16px;
    }

    .series-catalog-search {
        grid-template-columns: 1fr 1fr;
    }

    .series-catalog-search input {
        grid-column: 1 / -1;
    }

    .series-catalog-pagination a,
    .series-catalog-pagination span {
        min-width: 88px;
    }
}

/* HOME_SERIES_RUNTIME_FIX_V2 */
.home-update-series-cover.is-image,
.series-catalog-cover.is-image {
    display: block;
}

.series-cover-placeholder {
    user-select: none;
    color: #eee4f4;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(128, 45, 171, .18),
            transparent 55%
        ),
        rgba(20, 10, 27, .96);
}

/* SERIES_FILTERED_CARD_CATALOG_V3 */
.discover-page-catalog .discover-card-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 26px 18px;
    align-items: start;
}

.discover-series-card {
    min-width: 0;
}

.discover-series-cover-link {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid rgba(184, 82, 224, .22);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(30, 14, 40, .98),
            rgba(12, 7, 17, .99)
        );
    box-shadow:
        0 16px 38px rgba(0, 0, 0, .28);
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.discover-series-cover-link:hover {
    transform: translateY(-4px);
    border-color:
        rgba(214, 105, 255, .48);
    box-shadow:
        0 22px 46px rgba(0, 0, 0, .36),
        0 0 28px rgba(153, 43, 216, .08);
}

.discover-series-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    font-size: 72px;
}

.discover-series-cover.is-image {
    display: block;
}

.discover-series-new {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 94, 41, .48);
    border-radius: 999px;
    background: rgba(70, 19, 9, .92);
    color: #ffb080;
    font-size: 9px;
    font-weight: 900;
}

.discover-series-card-body {
    display: grid;
    gap: 8px;
    padding: 12px 2px 0;
}

.discover-series-title {
    overflow: hidden;
    color: #f0e8f4;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discover-series-title:hover {
    color: #dfa4ff;
}

.discover-series-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #95879c;
    font-size: 10px;
}

.discover-series-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discover-series-latest {
    flex: 0 0 auto;
    color: #b9a7c2;
}

.discover-series-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.discover-series-genres span {
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(69, 28, 87, .50);
    color: #bfa3cd;
    font-size: 9px;
}

.discover-page-controls {
    margin-bottom: 24px;
}

.discover-page-catalog .discovery-loading,
.discover-page-catalog .discovery-empty {
    grid-column: 1 / -1;
}

@media (max-width: 1180px) {
    .discover-page-catalog .discover-card-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .discover-page-catalog .discover-card-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 570px) {
    .discover-page-catalog .discover-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 18px 11px;
    }
}

/* HOME_NEW_BADGE_SYNC_V3 */
.home-update-fire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid rgba(255, 95, 38, .45);
    border-radius: 999px;
    background: rgba(68, 19, 9, .82);
    color: #ffad78;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* SERIES_CARD_READABILITY_V6 */

/* Homepage: full series name, no ellipsis. */
.home-update-series-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    min-height: 0;
    line-height: 1.38;
}

/* Catalogue: full title too. */
.discover-series-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.38;
}

/* Keep cards visually aligned while long names are allowed to grow. */
.discover-series-card-body {
    align-content: start;
}

/* Status + latest chapter remain readable even with long titles. */
.discover-series-meta {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 8px;
}

.discover-series-latest-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 31px;
    padding: 6px 9px;
    border: 1px solid rgba(190, 87, 232, .27);
    border-radius: 9px;
    background:
        linear-gradient(
            180deg,
            rgba(48, 21, 64, .88),
            rgba(29, 13, 39, .92)
        );
    color: #d8bfE5;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.discover-series-latest-button strong {
    color: #f0d6ff;
    font-weight: 900;
}

.discover-series-latest-button:hover {
    transform: translateY(-1px);
    border-color: rgba(216, 109, 255, .50);
    background:
        linear-gradient(
            180deg,
            rgba(65, 28, 86, .96),
            rgba(38, 16, 51, .98)
        );
    color: #f2e3fa;
}

/* Five-six genre series should wrap cleanly instead of being cut. */
.discover-series-genres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.discover-series-genres span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.discover-series-genre-more {
    border: 1px solid rgba(179, 81, 219, .22);
    background: rgba(34, 16, 46, .72) !important;
    color: #d1b6dd !important;
    font-weight: 800;
}

@media (max-width: 570px) {
    .home-update-series-title,
    .discover-series-title {
        overflow-wrap: break-word;
    }

    .discover-series-latest-button {
        width: 100%;
    }
}

/* SERIES_CARD_ALIGNMENT_V7 */

/*
 * HOME
 * Cover stays fixed.
 * Info area stretches to the row height.
 * Full title may wrap, chapter list stays anchored
 * to the bottom of the card body.
 */
.home-update-series-grid {
    align-items: stretch;
}

.home-update-series-card {
    display: grid;
    grid-template-rows:
        auto
        minmax(0, 1fr);
    height: 100%;
    min-width: 0;
}

.home-update-series-info {
    display: grid;
    grid-template-rows:
        auto
        minmax(0, 1fr);
    height: 100%;
    min-width: 0;
    align-content: stretch;
}

.home-update-series-title {
    min-height: calc(1.38em * 2);
    margin-bottom: 9px;
}

.home-update-chapter-list {
    align-self: end;
    width: 100%;
}

/*
 * CATALOGUE
 * Status and latest chapter are deliberately vertical:
 *
 * Title
 * Devam Ediyor
 * Son b?l?m: XX ->
 * genres...
 */
.discover-card-grid {
    align-items: stretch;
}

.discover-series-card {
    display: grid;
    grid-template-rows:
        auto
        minmax(0, 1fr);
    height: 100%;
    min-width: 0;
}

.discover-series-card-body {
    display: grid;
    grid-template-rows:
        auto
        auto
        minmax(0, 1fr);
    height: 100%;
    min-width: 0;
    gap: 8px;
    align-content: stretch;
}

.discover-series-title {
    min-height: calc(1.38em * 2);
}

/* No more status/button fighting on the same row. */
.discover-series-meta {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    align-content: start;
    gap: 7px;
    width: 100%;
}

.discover-series-status {
    justify-self: start;
}

.discover-series-latest-button {
    width: auto;
    min-width: 118px;
    max-width: 100%;
    justify-self: start;
}

/* Genre chips live at the bottom of each catalogue card. */
.discover-series-genres {
    align-self: end;
    width: 100%;
    margin-top: 5px;
}

/*
 * Long categories are allowed to wrap inside the chip
 * instead of overflowing the card.
 */
.discover-series-genres span {
    min-width: 0;
    max-width: 100%;
}

/*
 * Small screens: CTA uses the available width.
 */
@media (max-width: 570px) {
    .discover-series-latest-button {
        width: 100%;
        min-width: 0;
    }

    .home-update-series-title,
    .discover-series-title {
        min-height: 0;
    }
}

/* GENRE_CLICK_NAVIGATION_V1 */

/*
 * Catalogue genre chips are real navigation controls.
 * Clicking one opens /series with that genre selected.
 */
.discover-series-genres .discover-series-genre-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 4px 7px;
    border: 1px solid rgba(187, 83, 226, .12);
    border-radius: 999px;
    background: rgba(69, 28, 87, .50);
    color: #bfa3cd;
    font-size: 9px;
    line-height: 1.2;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition:
        color .14s ease,
        background .14s ease,
        border-color .14s ease,
        transform .14s ease;
}

.discover-series-genres .discover-series-genre-link:hover {
    transform: translateY(-1px);
    border-color: rgba(211, 99, 255, .38);
    background: rgba(91, 36, 116, .72);
    color: #f0d7ff;
}

/*
 * Series detail genres use the existing Eternal genre
 * appearance but behave as filter links.
 */
.genre-list .genre-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        color .14s ease,
        background .14s ease,
        border-color .14s ease,
        transform .14s ease;
}

.genre-list .genre-link:hover {
    transform: translateY(-1px);
    color: #f1d9ff;
}

/* HOME_CHAPTER_LOCK_BADGE_V1 */
.home-update-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #c9b6d4;
    opacity: .82;
    white-space: nowrap;
}

/* HOME_CHAPTER_LOCK_COMPACT_V2 */
.home-update-lock {
    width: 14px;
    justify-content: center;
    gap: 0;
    font-size: 11px;
}

/* SERIES_READER_UX_BLOCK_V3 */

/* Compact chapter list */
.series-chapters-section {
    padding: 15px !important;
}

.series-chapters-section .chapter-list {
    gap: 6px !important;
}

.series-chapters-section .chapter-row {
    min-height: 0 !important;
    padding: 8px 11px !important;
    border-radius: 11px !important;
}

.series-chapters-section .chapter-row[hidden] {
    display: none !important;
}

/* 20 chapter pagination */
.series-chapter-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 13px;
    padding-top: 12px;
    border-top:
        1px solid
        rgba(168, 85, 247, 0.16);
}

.series-chapter-pagination button {
    min-height: 34px;
    padding: 7px 13px;
    border:
        1px solid
        rgba(168, 85, 247, 0.28);
    border-radius: 10px;
    background:
        rgba(17, 12, 27, 0.94);
    color: inherit;
    cursor: pointer;
}

.series-chapter-pagination button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color:
        rgba(192, 132, 252, 0.58);
    background:
        rgba(29, 18, 46, 0.96);
}

.series-chapter-pagination button:disabled {
    opacity: 0.35;
    cursor: default;
}

.series-chapter-pagination-status {
    min-width: 170px;
    text-align: center;
    font-size: 0.79rem;
    font-weight: 700;
    opacity: 0.72;
}

/* Unique registered readers */
.chapter-reader-count {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.68;
    white-space: nowrap;
    vertical-align: middle;
}

.reader-count-standalone {
    display: flex;
    justify-content: flex-end;
    margin:
        0 auto
        10px;
    width: min(
        100%,
        980px
    );
}

/* Series reviews */
.series-reviews {
    padding: 17px !important;
    border:
        1px solid
        rgba(168, 85, 247, 0.17)
        !important;
    border-radius: 16px !important;
    background:
        linear-gradient(
            180deg,
            rgba(20, 14, 31, 0.78),
            rgba(9, 7, 15, 0.88)
        ) !important;
}

.series-reviews-head {
    margin-bottom: 13px !important;
}

.series-review-compose {
    margin-bottom: 12px !important;
    padding: 12px !important;
    border:
        1px solid
        rgba(168, 85, 247, 0.16)
        !important;
    border-radius: 13px !important;
    background:
        rgba(10, 8, 17, 0.78)
        !important;
}

.series-review-list {
    display: grid;
    gap: 9px !important;
}

.series-review-list > * {
    padding: 12px !important;
    border:
        1px solid
        rgba(168, 85, 247, 0.15)
        !important;
    border-radius: 13px !important;
    background:
        rgba(13, 10, 21, 0.86)
        !important;
    box-shadow: none !important;
}

.series-reviews select,
.series-reviews input,
.series-reviews textarea {
    border-color:
        rgba(168, 85, 247, 0.22)
        !important;
    background:
        rgba(7, 6, 12, 0.92)
        !important;
}

.series-reviews button {
    border-radius: 10px !important;
}

/* Reader comments */
.reader-comments {
    padding: 17px !important;
    border:
        1px solid
        rgba(168, 85, 247, 0.17)
        !important;
    border-radius: 16px !important;
    background:
        linear-gradient(
            180deg,
            rgba(20, 14, 31, 0.78),
            rgba(9, 7, 15, 0.88)
        ) !important;
}

.reader-comment-heading {
    margin-bottom: 13px !important;
}

.reader-comment-form {
    margin-bottom: 13px !important;
    padding: 12px !important;
    border:
        1px solid
        rgba(168, 85, 247, 0.16)
        !important;
    border-radius: 13px !important;
    background:
        rgba(10, 8, 17, 0.80)
        !important;
}

.reader-comments article,
.reader-comments li {
    border-color:
        rgba(168, 85, 247, 0.15)
        !important;
    border-radius: 13px !important;
    background:
        rgba(13, 10, 21, 0.86)
        !important;
    box-shadow: none !important;
}

.reader-comments select,
.reader-comments input,
.reader-comments textarea {
    border-color:
        rgba(168, 85, 247, 0.22)
        !important;
    background:
        rgba(7, 6, 12, 0.92)
        !important;
}

.reader-comments button {
    border-radius: 10px !important;
}

.reader-page .chapter-reader-count {
    margin-left: 9px;
    font-size: 0.78rem;
}

@media (max-width: 720px) {
    .series-chapter-pagination {
        gap: 7px;
    }

    .series-chapter-pagination-status {
        min-width: 118px;
        font-size: 0.72rem;
    }

    .series-chapter-pagination button {
        padding: 7px 9px;
    }
}

/* SERIES_READER_UX_FINISH_V1 */

/* Slightly larger / clearer unique reader count */
.chapter-reader-count {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    opacity: 0.84 !important;
}

.reader-page .chapter-reader-count {
    font-size: 0.92rem !important;
}

/* Reader series navigation now lives under reactions */
.reader-series-nav-under-reactions {
    width: min(100%, 920px);
    margin:
        12px auto
        18px !important;
}

@media (max-width: 720px) {
    .chapter-reader-count {
        font-size: 0.79rem !important;
    }

    .reader-page .chapter-reader-count {
        font-size: 0.86rem !important;
    }

    .reader-series-nav-under-reactions {
        margin-top: 10px !important;
    }
}

/* SERIES_HOME_READER_COUNT_POLISH_V1 */

/* Reader count: clearer but still compact */
.chapter-reader-count {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    opacity: 0.90 !important;
    margin-left: 8px !important;
}

/* Home chapter rows: stop NEW / lock / eye from crushing together */
.home-update-chapter-list a[href*="/reader/"] {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0;
}

.home-update-chapter-list a[href*="/reader/"] .chapter-reader-count {
    margin-left: auto !important;
    flex: 0 0 auto;
    font-size: 0.80rem !important;
}

.home-update-chapter-list a[href*="/reader/"] > * {
    flex-shrink: 0;
}

.home-update-chapter-list a[href*="/reader/"] .chapter-number {
    min-width: 0;
}

/* Series chapter count can be a little stronger */
.series-chapters-section .chapter-reader-count {
    font-size: 0.88rem !important;
}

.reader-page .chapter-reader-count,
.reader-count-standalone .chapter-reader-count {
    font-size: 0.96rem !important;
}

@media (max-width: 720px) {
    .chapter-reader-count {
        font-size: 0.82rem !important;
    }

    .home-update-chapter-list a[href*="/reader/"] {
        gap: 5px !important;
    }

    .home-update-chapter-list a[href*="/reader/"] .chapter-reader-count {
        font-size: 0.76rem !important;
    }
}

/* HOME_READER_COUNT_LAYOUT_FIX_V1 */

/*
 * Home cards are narrow.
 * Keep chapter number on row one and badges/count on row two.
 */
.home-update-chapter-list a[href*="/reader/"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important;
    gap: 5px 6px !important;
    min-width: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.home-update-chapter-list a[href*="/reader/"] .chapter-number {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Eye/count now lives directly in the home chapter link. */
.home-update-chapter-list a[href*="/reader/"] > .chapter-reader-count {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
    opacity: 0.82 !important;
}

/* Undo the earlier rule that tried to size every direct child rigidly. */
.home-update-chapter-list a[href*="/reader/"] > * {
    flex-shrink: 1;
}

@media (max-width: 720px) {
    .home-update-chapter-list a[href*="/reader/"] {
        gap: 4px 5px !important;
    }

    .home-update-chapter-list a[href*="/reader/"] > .chapter-reader-count {
        font-size: 0.72rem !important;
    }
}

/* READER_COUNT_REACTION_PLACEMENT_V1 */

.reader-count-reaction-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom:
        1px solid
        rgba(168, 85, 247, 0.13);
}

.reader-count-reaction-meta .chapter-reader-count {
    margin: 0 !important;
    padding: 5px 9px;
    border:
        1px solid
        rgba(168, 85, 247, 0.18);
    border-radius: 999px;
    background:
        rgba(14, 10, 23, 0.72);
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    opacity: 0.92 !important;
}

/* Old fallback remains only for unusual reader layouts. */
.reader-count-standalone {
    margin-bottom: 10px;
}

@media (max-width: 720px) {
    .reader-count-reaction-meta {
        margin-bottom: 7px;
        padding-bottom: 7px;
    }

    .reader-count-reaction-meta .chapter-reader-count {
        font-size: 0.82rem !important;
    }
}

/* HOME_UPDATE_CARD_ALIGNMENT_V1 */

/*
 * Son Guncellemeler:
 * every card reserves exactly three compact chapter slots.
 * One-chapter cards leave empty space below instead of
 * pushing their only row downward.
 */
.home-update-chapter-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    gap: 6px !important;
    min-height: 138px !important;
    margin-top: 12px !important;
}

/* Undo the old two-line eye-count layout. */
.home-update-chapter-list a[href*="/reader/"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 7px 10px !important;
}

.home-update-chapter-list a[href*="/reader/"] .chapter-number {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Home eye counts are intentionally disabled now.
 * Defensive hide prevents stale DOM/cache from affecting layout.
 */
.home-update-chapter-list .chapter-reader-count {
    display: none !important;
}

.home-update-chapter-list a[href*="/reader/"] > * {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .home-update-chapter-list {
        grid-auto-rows: 40px !important;
        min-height: 132px !important;
        gap: 6px !important;
    }

    .home-update-chapter-list a[href*="/reader/"] {
        min-height: 40px !important;
        height: 40px !important;
        padding: 6px 9px !important;
        gap: 5px !important;
    }
}

/* DAILY_PICK_SLIDER_V1 */

.daily-pick-slider {
    width: 100%;
}

.daily-pick-slider-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.daily-pick-slider-head > div {
    display: grid;
    gap: 3px;
}

.daily-pick-slider-head strong {
    color: #f4ecfa;
    font-size: 1.02rem;
}

.daily-pick-slider-kicker {
    color: #b75cff;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.daily-pick-page-label {
    color: #9d8ba9;
    font-size: 0.75rem;
    font-weight: 800;
}

.daily-pick-slider-body {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
}

.daily-pick-series-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.daily-pick-series-card {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border:
        1px solid
        rgba(168, 85, 247, 0.15);
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            rgba(25, 15, 34, 0.96),
            rgba(13, 8, 19, 0.96)
        );
    text-decoration: none;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease;
}

.daily-pick-series-card:hover {
    transform: translateY(-2px);
    border-color:
        rgba(192, 92, 255, 0.42);
}

.daily-pick-series-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(158, 61, 217, 0.28),
            rgba(10, 6, 15, 0.94)
        );
}

.daily-pick-series-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.daily-pick-series-cover > span:not(
    .daily-pick-reason
) {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #c879ff;
    font-size: 2rem;
    font-weight: 900;
}

.daily-pick-reason {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 7px;
    overflow: hidden;
    border:
        1px solid
        rgba(215, 148, 255, 0.24);
    border-radius: 999px;
    background:
        rgba(10, 6, 15, 0.86);
    color: #dbc6e8;
    font-size: 0.62rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-pick-series-copy {
    display: grid;
    gap: 6px;
    padding: 10px;
}

.daily-pick-series-copy strong {
    min-width: 0;
    overflow: hidden;
    color: #eee4f4;
    font-size: 0.83rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-pick-series-copy span {
    color: #a98bb8;
    font-size: 0.67rem;
    font-weight: 800;
}

.daily-pick-arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 52px;
    padding: 0;
    border:
        1px solid
        rgba(168, 85, 247, 0.24);
    border-radius: 12px;
    background:
        rgba(20, 12, 28, 0.92);
    color: #d588ff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.daily-pick-arrow:hover:not(:disabled) {
    border-color:
        rgba(196, 105, 255, 0.55);
    background:
        rgba(55, 22, 75, 0.72);
}

.daily-pick-arrow:disabled {
    opacity: 0.22;
    cursor: default;
}

.daily-pick-loading {
    min-height: 190px;
    display: grid;
    place-items: center;
    color: #9887a3;
    font-size: 0.82rem;
}

@media (max-width: 1050px) {
    .daily-pick-series-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .daily-pick-slider-body {
        grid-template-columns:
            30px minmax(0, 1fr) 30px;
        gap: 6px;
    }

    .daily-pick-series-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .daily-pick-arrow {
        width: 30px;
        height: 46px;
    }
}

/* DAILY_PICK_ENCODING_POLISH_V1 */
.daily-pick-slider {
    box-sizing: border-box;
    padding-top: 12px;
    padding-bottom: 4px;
}

.daily-pick-slider-head {
    padding-left: 2px;
    padding-right: 2px;
}

/* ETERNAL_MICRO_ANIMATIONS_V1 */

/* ---------------------------------------------------------
   Bugun Ne Okusam
   --------------------------------------------------------- */

@keyframes eternal-card-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
        filter: blur(2px);
    }

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

@keyframes eternal-soft-glow {
    0%,
    100% {
        text-shadow:
            0 0 0 rgba(187, 92, 255, 0);
    }

    50% {
        text-shadow:
            0 0 12px rgba(187, 92, 255, 0.48);
    }
}

.daily-pick-series-card {
    position: relative;
    animation:
        eternal-card-enter
        0.42s
        cubic-bezier(.2,.8,.2,1)
        both;
    will-change: transform;
}

.daily-pick-series-card:nth-child(1) {
    animation-delay: 0.02s;
}

.daily-pick-series-card:nth-child(2) {
    animation-delay: 0.07s;
}

.daily-pick-series-card:nth-child(3) {
    animation-delay: 0.12s;
}

.daily-pick-series-card:nth-child(4) {
    animation-delay: 0.17s;
}

.daily-pick-series-card:nth-child(5) {
    animation-delay: 0.22s;
}

.daily-pick-series-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(202, 101, 255, 0.13),
            transparent 58%
        );
    transition:
        opacity 0.22s ease;
}

.daily-pick-series-card:hover {
    transform:
        translateY(-5px)
        scale(1.012);
    border-color:
        rgba(202, 105, 255, 0.52);
    box-shadow:
        0 12px 32px
        rgba(91, 28, 130, 0.18);
}

.daily-pick-series-card:hover::after {
    opacity: 1;
}

.daily-pick-series-cover img {
    transition:
        transform 0.35s
        cubic-bezier(.2,.8,.2,1),
        filter 0.35s ease;
}

.daily-pick-series-card:hover
.daily-pick-series-cover img {
    transform: scale(1.035);
    filter: brightness(1.05);
}

.daily-pick-series-copy span {
    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.daily-pick-series-card:hover
.daily-pick-series-copy span {
    color: #d692ff;
    transform: translateX(2px);
}

.daily-pick-slider-kicker {
    animation:
        eternal-soft-glow
        3.2s
        ease-in-out
        infinite;
}

.daily-pick-arrow {
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.daily-pick-arrow:hover:not(:disabled) {
    transform: scale(1.08);
    box-shadow:
        0 0 18px
        rgba(184, 74, 255, 0.16);
}

.daily-pick-arrow:active:not(:disabled) {
    transform: scale(0.93);
}


/* ---------------------------------------------------------
   Reader reaction panel
   --------------------------------------------------------- */

@keyframes eternal-reaction-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes eternal-eye-breathe {
    0%,
    100% {
        box-shadow:
            0 0 0
            rgba(168, 85, 247, 0);
    }

    50% {
        box-shadow:
            0 0 12px
            rgba(168, 85, 247, 0.15);
    }
}

.reader-reaction-panel-balanced {
    animation:
        eternal-reaction-enter
        0.36s
        ease-out
        both;
}

.reader-reaction-panel-balanced
.reader-count-reaction-meta
.chapter-reader-count {
    animation:
        eternal-eye-breathe
        3.5s
        ease-in-out
        infinite;
}

.reader-reaction-panel-balanced
.reader-chapter-reaction-emoji {
    transition:
        transform 0.14s
        cubic-bezier(.2,.9,.25,1.3),
        border-color 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease;
    transform-origin: center;
}

.reader-reaction-panel-balanced
.reader-chapter-reaction-emoji:hover {
    transform:
        translateY(-3px)
        scale(1.07);
    border-color:
        rgba(208, 121, 255, 0.48);
    background:
        rgba(67, 27, 88, 0.38);
    box-shadow:
        0 7px 16px
        rgba(82, 27, 110, 0.18);
}

.reader-reaction-panel-balanced
.reader-chapter-reaction-emoji:active {
    transform:
        translateY(0)
        scale(0.92);
}


/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .daily-pick-series-card,
    .daily-pick-slider-kicker,
    .reader-reaction-panel-balanced,
    .reader-reaction-panel-balanced
    .reader-count-reaction-meta
    .chapter-reader-count {
        animation: none !important;
    }

    .daily-pick-series-card,
    .daily-pick-series-cover img,
    .daily-pick-arrow,
    .reader-reaction-panel-balanced
    .reader-chapter-reaction-emoji {
        transition: none !important;
    }

    .daily-pick-series-card:hover,
    .daily-pick-arrow:hover:not(:disabled),
    .reader-reaction-panel-balanced
    .reader-chapter-reaction-emoji:hover {
        transform: none !important;
    }
}

/* DAILY_PICK_HEADER_OFFSET_V1 */
.daily-pick-slider-head > div {
    padding-left: 18px !important;
}


/* READER_LAYOUT_REFERENCE_V3 */
.reader-navigation-state[hidden] {
    display: none !important;
}

.reader-chapter-engagement {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 155px 210px minmax(0, 1fr);
    grid-template-areas: "copy reactions navigation";
    align-items: center;
    gap: 20px;
    min-height: 118px;
    padding: 14px 16px;
    margin-bottom: 44px;
}

.reader-chapter-engagement > .reader-chapter-engagement-copy {
    grid-area: copy;
    text-align: left;
}

.reader-chapter-engagement > .reader-chapter-reaction-options {
    grid-area: reactions;
    display: grid;
    grid-template-columns: repeat(3, 62px);
    grid-auto-rows: 38px;
    justify-content: start;
    gap: 8px 6px;
    width: max-content;
    min-width: 0;
    padding: 0;
    overflow: visible;
}

.reader-chapter-engagement .reader-chapter-reaction {
    box-sizing: border-box;
    width: 62px;
    min-width: 0;
    height: 38px;
    padding: 0 7px;
    gap: 5px;
}

.reader-chapter-engagement .reader-chapter-reaction-emoji {
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.reader-chapter-engagement .reader-chapter-reaction-count {
    min-width: 0;
    max-width: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reader-engagement-navigation {
    grid-area: navigation;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.reader-engagement-navigation .reader-control {
    box-sizing: border-box;
    min-width: 0;
    padding: 8px 7px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

.reader-engagement-navigation .reader-series-control {
    border-color: rgba(207, 91, 255, .42);
    color: #f2e7f7;
    font-weight: 800;
}

.reader-chapter-engagement > .reader-count-reaction-meta {
    position: absolute;
    right: 0;
    bottom: -23px;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

.reader-chapter-engagement > .reader-count-reaction-meta .chapter-reader-count {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    color: #cfc6d4;
    font-size: 13px !important;
    line-height: 1;
    box-shadow: none;
}

.reader-chapter-engagement + .reader-comments {
    margin-top: 0;
}

@media (max-width: 850px) {
    .reader-chapter-engagement {
        grid-template-columns: minmax(135px, .75fr) minmax(198px, 1fr);
        grid-template-areas:
            "copy reactions"
            "navigation navigation";
        row-gap: 14px;
    }
}

@media (max-width: 570px) {
    .reader-chapter-engagement {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "reactions"
            "navigation";
        gap: 12px;
        padding: 13px 10px;
    }

    .reader-chapter-engagement > .reader-chapter-reaction-options {
        justify-self: start;
    }

    .reader-engagement-navigation {
        gap: 5px;
    }

    .reader-engagement-navigation .reader-control {
        padding: 8px 4px;
        font-size: 9px;
    }

    .reader-chapter-engagement > .reader-count-reaction-meta {
        right: 4px;
    }
}


/* BLOCK_E_SOCIAL_UI_V1 */
.block-e-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 28px auto;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(31, 18, 52, .92),
            rgba(12, 10, 20, .96)
        );
    box-shadow: 0 22px 70px rgba(0,0,0,.28);
}

.block-e-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.block-e-section-head h2,
.block-e-section-head h3,
.block-e-panel h3,
.block-e-panel h4,
.block-e-collection-card h3 {
    margin: 0;
}

.block-e-section-head p,
.block-e-muted {
    margin: 6px 0 0;
    opacity: .72;
}

.block-e-kicker {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    opacity: .62;
}

.block-e-create-collection {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.block-e-create-collection input,
.block-e-field select,
.block-e-field textarea {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: rgba(8,8,14,.72);
    color: inherit;
    padding: 11px 13px;
}

.block-e-create-collection button,
.block-e-save-row button,
.block-e-modal-actions button,
.block-e-footer-support {
    border: 0;
    border-radius: 12px;
    padding: 10px 15px;
    font-weight: 750;
    cursor: pointer;
}

.block-e-shelf-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.block-e-shelf-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
}

.block-e-collection-grid,
.block-e-showcase-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
}

.block-e-collection-card,
.block-e-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.block-e-collection-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.block-e-collection-head span {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    opacity: .65;
}

.block-e-danger-link {
    border: 0;
    background: transparent;
    color: #ff9ba9;
    cursor: pointer;
}

.block-e-series-checklist,
.block-e-privacy-list {
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow: auto;
}

.block-e-series-checklist label,
.block-e-privacy-list label {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
}

.block-e-save-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.block-e-status {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
}

.block-e-status-success {
    background: rgba(82, 190, 128, .14);
}

.block-e-status-error {
    background: rgba(230, 80, 100, .14);
}

.block-e-status-info {
    background: rgba(130, 105, 220, .14);
}

.block-e-empty {
    padding: 15px;
    border: 1px dashed rgba(255,255,255,.09);
    border-radius: 12px;
    opacity: .68;
}

.block-e-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.block-e-chip {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(140,100,220,.13);
    border: 1px solid rgba(180,140,255,.12);
}

.block-e-activity-summary {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 12px;
}

.block-e-activity-summary strong {
    font-size: 30px;
}

.block-e-activity-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.block-e-activity-days > span {
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    font-size: 12px;
}

.block-e-favorite-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
}

.block-e-favorite-card {
    display: grid;
    gap: 7px;
    color: inherit;
    text-decoration: none;
}

.block-e-favorite-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 10px;
}

.block-e-public-showcase {
    margin-top: 18px;
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.block-e-modal[hidden] {
    display: none !important;
}

.block-e-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 20px;
}

.block-e-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(7px);
}

.block-e-modal-card {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    padding: 22px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    background: #121019;
    box-shadow: 0 28px 90px rgba(0,0,0,.45);
}

.block-e-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.block-e-modal-head h2 {
    margin: 0;
}

.block-e-modal-close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 27px;
    cursor: pointer;
}

.block-e-field {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.block-e-field textarea {
    resize: vertical;
}

.block-e-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 16px;
}

.block-e-footer-support {
    margin: 10px;
}

.reader-report {
    cursor: pointer;
}

@media (max-width: 720px) {
    .block-e-shell {
        width: min(100% - 18px, 1180px);
        margin: 18px auto;
        padding: 16px;
        border-radius: 16px;
    }

    .block-e-section-head {
        flex-direction: column;
    }

    .block-e-create-collection {
        width: 100%;
    }

    .block-e-create-collection input {
        flex: 1 1 180px;
    }

    .block-e-showcase-grid,
    .block-e-collection-grid {
        grid-template-columns: 1fr;
    }

    .block-e-modal {
        padding: 10px;
        align-items: end;
    }

    .block-e-modal-card {
        border-radius: 18px 18px 8px 8px;
        max-height: 90vh;
        overflow: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .block-e-shell,
    .block-e-modal-card {
        scroll-behavior: auto;
    }
}

/* BLOCK_E_QUICK_HUB_LIBRARY_V2 */
.quick-hub-reading-v2 {
    display: grid;
    gap: 18px;
}

.quick-hub-reading-tabs {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 4px 0 10px;
    background: inherit;
}

.quick-hub-reading-tabs button {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 10px 8px;
    background: rgba(255,255,255,.025);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.quick-hub-reading-tabs button.is-active {
    border-color: rgba(188,105,255,.45);
    background: rgba(154,73,218,.18);
}

.quick-hub-reading-more {
    width: 100%;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 11px;
    background: rgba(255,255,255,.035);
    color: inherit;
    cursor: pointer;
}

.quick-hub-reading-pager {
    display: grid;
    grid-template-columns:
        minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.quick-hub-reading-pager button {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    padding: 9px 10px;
    background: rgba(255,255,255,.035);
    color: inherit;
    cursor: pointer;
}

.quick-hub-reading-pager button:last-child {
    justify-self: end;
}

.quick-hub-reading-pager button:disabled {
    opacity: .35;
    cursor: default;
}

.quick-hub-reading-pager span {
    opacity: .7;
    font-size: 12px;
}

.quick-hub-reading-empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 12px;
    opacity: .68;
}

.quick-hub-shelf-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.quick-hub-shelf-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
}

.quick-hub-collection-create,
.quick-hub-collection-add {
    display: flex;
    gap: 8px;
}

.quick-hub-collection-create {
    margin-bottom: 14px;
}

.quick-hub-collection-create input,
.quick-hub-collection-add select {
    min-width: 0;
    flex: 1;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    padding: 10px;
    background: rgba(8,6,13,.7);
    color: inherit;
}

.quick-hub-collection-create button,
.quick-hub-collection-add button {
    border: 0;
    border-radius: 11px;
    padding: 9px 12px;
    cursor: pointer;
}

.quick-hub-collections {
    display: grid;
    gap: 12px;
}

.quick-hub-collection-card {
    padding: 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.quick-hub-collection-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.quick-hub-collection-head > div {
    display: grid;
    gap: 3px;
}

.quick-hub-collection-head small {
    opacity: .62;
}

.quick-hub-collection-head > button {
    border: 0;
    background: transparent;
    color: #ef9bad;
    cursor: pointer;
}

.quick-hub-collection-items {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.quick-hub-collection-items > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 9px;
    background: rgba(255,255,255,.025);
}

.quick-hub-collection-items a {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.quick-hub-collection-items button {
    border: 0;
    background: transparent;
    color: #ef9bad;
    cursor: pointer;
}

@media (max-width: 560px) {
    .quick-hub-reading-tabs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .quick-hub-collection-create,
    .quick-hub-collection-add {
        flex-direction: column;
    }
}

/* BLOCK_E_QUICK_HUB_PROFILE_V2 */
.quick-hub-reading-tabs button {
    white-space: normal;
    line-height: 1.2;
}

.quick-hub-profile-social {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.quick-hub-profile-tabs {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.quick-hub-profile-tabs button {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    padding: 10px 6px;
    background: rgba(255,255,255,.025);
    color: inherit;
    cursor: pointer;
}

.quick-hub-profile-tabs button.is-active {
    border-color: rgba(188,105,255,.45);
    background: rgba(154,73,218,.18);
}

.quick-hub-profile-showcase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.quick-hub-profile-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.quick-hub-profile-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.quick-hub-profile-card-head > div {
    display: grid;
    gap: 3px;
}

.quick-hub-profile-card-head small,
.quick-hub-profile-card-head > span {
    opacity: .62;
    font-size: 12px;
}

.quick-hub-profile-choice-list {
    display: grid;
    gap: 6px;
    max-height: 210px;
    overflow: auto;
}

.quick-hub-profile-choice-list label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
}

.quick-hub-profile-choice-list p {
    margin: 0;
    opacity: .65;
}

.quick-hub-profile-save {
    width: 100%;
    margin-top: 11px;
    border: 0;
    border-radius: 11px;
    padding: 10px 12px;
    font-weight: 750;
    cursor: pointer;
}

.quick-hub-profile-activity-number {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 12px;
}

.quick-hub-profile-activity-number strong {
    font-size: 30px;
}

.quick-hub-profile-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick-hub-profile-days span {
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    font-size: 12px;
}

.quick-hub-profile-privacy-list {
    display: grid;
    gap: 8px;
}

.quick-hub-profile-privacy-list label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.quick-hub-profile-status {
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 13px;
}

.quick-hub-profile-status.is-success {
    background: rgba(80,190,125,.14);
}

.quick-hub-profile-status.is-error {
    background: rgba(230,80,100,.14);
}

.quick-hub-profile-status.is-info {
    background: rgba(140,100,220,.14);
}

.quick-hub-profile-empty {
    padding: 14px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 11px;
    opacity: .68;
}


/* BLOCK_E_IDENTITY_SHOWCASE_V1 */
.quick-hub-identity-v2 {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(185, 104, 255, .18);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(164, 69, 255, .16),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(28, 14, 43, .96),
            rgba(10, 7, 17, .98)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 18px 55px rgba(0,0,0,.22);
}

.quick-hub-identity-v2
.quick-hub-identity-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    left: -70px;
    top: -100px;
    border-radius: 50%;
    background:
        rgba(191, 69, 255, .13);
    filter: blur(38px);
    pointer-events: none;
}

.quick-hub-identity-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    align-items: center;
    gap: 15px;
}

.quick-hub-identity-avatar {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
}

.quick-hub-identity-avatar
.profile-avatar-preview,
.quick-hub-identity-avatar
.profile-avatar-preview-fallback {
    width: 100%;
    height: 100%;
}

.quick-hub-identity-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.quick-hub-identity-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-hub-identity-name-row h2 {
    min-width: 0;
    margin: 0;
    font-size: 23px;
    line-height: 1.08;
}

.quick-hub-identity-username {
    opacity: .66;
    font-size: 13px;
}

.quick-hub-identity-cosmetics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.quick-hub-identity-cosmetics > span {
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-hub-identity-cosmetics
> span.is-muted {
    opacity: .55;
}

.quick-hub-identity-showcase {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 13px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.065);
}

.quick-hub-identity-showcase-empty {
    display: grid;
    gap: 3px;
    padding: 9px 11px;
    border-radius: 11px;
    background: rgba(255,255,255,.025);
}

.quick-hub-identity-showcase-empty span {
    font-weight: 750;
    font-size: 12px;
}

.quick-hub-identity-showcase-empty small {
    opacity: .58;
    line-height: 1.4;
}

.quick-hub-identity-showcase-group {
    display: grid;
    gap: 8px;
}

.quick-hub-identity-showcase-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quick-hub-identity-showcase-title strong {
    font-size: 12px;
}

.quick-hub-identity-showcase-title span {
    font-size: 10px;
    opacity: .5;
}

.quick-hub-identity-favorites {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.quick-hub-identity-favorites a {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.quick-hub-identity-favorites img,
.quick-hub-identity-cover-fallback {
    width: 100%;
    aspect-ratio: 3 / 4;
    display: grid;
    place-items: center;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.065);
    background:
        linear-gradient(
            145deg,
            rgba(132,65,188,.18),
            rgba(255,255,255,.025)
        );
}

.quick-hub-identity-cover-fallback {
    font-size: 20px;
    font-weight: 800;
}

.quick-hub-identity-favorites small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    opacity: .72;
}

.quick-hub-identity-achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick-hub-identity-achievements > span {
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(184,105,255,.14);
    background: rgba(145,70,206,.095);
    font-size: 10px;
}

@media (max-width: 430px) {
    .quick-hub-identity-v2 {
        padding: 14px;
    }

    .quick-hub-identity-avatar {
        width: 68px;
        height: 68px;
    }

    .quick-hub-identity-name-row h2 {
        font-size: 20px;
    }

    .quick-hub-identity-favorites {
        gap: 5px;
    }

    .quick-hub-identity-favorites small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-hub-identity-v2
    .quick-hub-identity-glow {
        filter: none;
    }
}


/* BLOCK_E_PUBLIC_PROFILE_POLISH_V1 */
.public-user-profile {
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow: hidden;
}

.public-user-profile-body {
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-bottom: 22px;
}

.block-e-public-showcase {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding: 18px 16px 4px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.block-e-public-showcase .block-e-section-head {
    margin-bottom: 2px;
}

.block-e-public-showcase .block-e-section-head h3 {
    margin: 0;
}

.block-e-public-showcase .block-e-showcase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.block-e-public-showcase .block-e-panel {
    min-width: 0;
    padding: 15px;
    border-radius: 15px;
}

.block-e-public-showcase .block-e-panel h4 {
    margin: 0 0 10px;
}

.block-e-public-showcase .block-e-activity-summary {
    margin-bottom: 10px;
}

.block-e-public-showcase .block-e-activity-summary strong {
    font-size: 28px;
    line-height: 1;
}

.block-e-public-showcase .block-e-activity-summary span {
    line-height: 1.35;
}

.block-e-public-showcase .block-e-activity-days {
    padding-bottom: 4px;
}

@media (max-width: 620px) {
    .public-user-profile {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
    }

    .public-user-profile-body {
        max-height: calc(100dvh - 80px);
        padding-bottom: 28px;
    }

    .block-e-public-showcase {
        padding-inline: 12px;
    }
}


/* READER_TOP_CHAPTER_NAV_V2 */
.reader-toolbar-chapter-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-left: auto;
}

.reader-toolbar-chapter-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid rgba(188, 105, 255, .28);
    border-radius: 9px;
    background: rgba(148, 72, 199, .07);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
}

.reader-toolbar-chapter-control:hover {
    border-color: rgba(205, 133, 255, .55);
    background: rgba(155, 76, 210, .15);
}

.reader-toolbar-chapter-control[disabled],
.reader-toolbar-chapter-control.is-disabled,
.reader-toolbar-chapter-nav span.reader-toolbar-chapter-control {
    opacity: .38;
    cursor: default;
    pointer-events: none;
}

.reader-toolbar-series-control {
    border-color: rgba(208, 120, 255, .4);
}

@media (max-width: 1100px) {
    .reader-toolbar-chapter-nav {
        width: 100%;
        order: 20;
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        margin-left: 0;
        margin-top: 7px;
    }

    .reader-toolbar-chapter-control {
        min-width: 0;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .reader-toolbar-chapter-control {
        padding: 8px 5px;
        font-size: 11px;
    }
}


/* BLOCK_F_FRONTEND_V3 */

.block-f-kicker {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    opacity: .56;
}

.block-f-mini-reader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 12px;
    padding: 13px 14px;
    border: 1px solid rgba(190, 107, 255, .25);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(117, 42, 163, .14),
            rgba(17, 13, 22, .9)
        );
}

.block-f-mini-reader-copy {
    min-width: 0;
}

.block-f-mini-reader strong,
.block-f-mini-reader small {
    display: block;
}

.block-f-mini-reader strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.block-f-mini-reader small {
    margin-top: 3px;
    opacity: .62;
}

.block-f-mini-reader-action {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(204, 125, 255, .35);
    border-radius: 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.block-f-user-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    padding: 10px 12px;
    border: 1px solid rgba(190, 107, 255, .2);
    border-radius: 12px;
    background: rgba(91, 38, 124, .08);
}

.block-f-user-social > div {
    min-width: 58px;
}

.block-f-user-social strong,
.block-f-user-social span {
    display: block;
}

.block-f-user-social strong {
    font-size: 14px;
}

.block-f-user-social span {
    font-size: 10px;
    opacity: .56;
}

.block-f-follow-button {
    margin-left: auto;
    padding: 7px 11px;
    border: 1px solid rgba(204, 125, 255, .4);
    border-radius: 9px;
    background: rgba(137, 62, 188, .14);
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.block-f-follow-button.is-following {
    background: rgba(255, 255, 255, .04);
    opacity: .75;
}

.block-f-series-social {
    margin: 20px 0;
    padding: 18px;
    border: 1px solid rgba(190, 107, 255, .22);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(73, 29, 99, .15),
            rgba(12, 10, 16, .9)
        );
}

.block-f-series-social-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.block-f-series-social-head h3 {
    margin: 0;
}

.block-f-rating-summary {
    padding: 7px 10px;
    border: 1px solid rgba(208, 127, 255, .3);
    border-radius: 10px;
    font-size: 13px;
}

.block-f-community-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.block-f-community-grid > div {
    padding: 11px 8px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
    text-align: center;
}

.block-f-community-grid strong,
.block-f-community-grid span {
    display: block;
}

.block-f-community-grid strong {
    font-size: 18px;
}

.block-f-community-grid span {
    margin-top: 2px;
    font-size: 10px;
    opacity: .56;
}

.block-f-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .065);
}

.block-f-rating-row > span {
    font-size: 12px;
    font-weight: 700;
    opacity: .68;
}

.block-f-stars {
    display: flex;
    gap: 2px;
}

.block-f-stars button {
    appearance: none;
    padding: 2px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .22);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.block-f-stars button:hover,
.block-f-stars button.is-active {
    color: #d5a1ff;
}

.block-f-stars button:disabled {
    cursor: default;
}

@media (max-width: 620px) {
    .block-f-community-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .block-f-series-social-head,
    .block-f-rating-row,
    .block-f-mini-reader {
        align-items: stretch;
        flex-direction: column;
    }

    .block-f-mini-reader-action {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .block-f-stars button,
    .block-f-follow-button,
    .block-f-mini-reader-action {
        transition: none !important;
    }
}

/* BLOCK_G_ADMIN_SERIES_UI_V1 */
.admin-series-drawer-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.admin-series-drawer-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    opacity: 0.68;
    transition:
        opacity 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.admin-series-drawer-tab:hover {
    opacity: 1;
}

.admin-series-drawer-tab.is-active {
    opacity: 1;
    background: rgba(151, 71, 255, 0.16);
}

.admin-series-editor-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.admin-series-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.admin-series-field > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

.admin-series-field small {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.55;
}

.admin-series-field input,
.admin-series-field select,
.admin-series-field textarea {
    width: 100%;
    box-sizing: border-box;
}

.admin-series-field textarea {
    resize: vertical;
    min-height: 86px;
}

.admin-series-field--wide {
    grid-column: 1 / -1;
}

.admin-series-editor-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.admin-series-editor-state {
    margin-right: auto;
    font-size: 12px;
    opacity: 0.78;
}

.admin-series-editor-state.is-success {
    opacity: 1;
}

.admin-series-editor-state.is-error {
    opacity: 1;
}

.admin-series-qa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-series-qa-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.admin-series-qa-summary > div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.admin-series-qa-summary strong {
    font-size: 20px;
}

.admin-series-qa-summary span {
    font-size: 11px;
    opacity: 0.6;
}

.admin-series-qa-checks {
    display: grid;
    gap: 8px;
}

.admin-series-qa-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}

.admin-series-qa-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-weight: 800;
}

.admin-series-qa-check.is-ok {
    opacity: 0.82;
}

.admin-series-qa-check.is-warning {
    border-color: rgba(255, 184, 77, 0.28);
}

.admin-series-qa-warnings,
.admin-series-qa-clean,
.admin-series-editor-error,
.block-g-series-loading {
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.admin-series-qa-warnings ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.admin-series-editor-error {
    display: grid;
    gap: 4px;
}

@media (max-width: 760px) {
    .admin-series-editor-grid {
        grid-template-columns: 1fr;
    }

    .admin-series-field--wide {
        grid-column: auto;
    }

    .admin-series-drawer-tabs {
        flex-direction: column;
    }

    .admin-series-qa-summary {
        grid-template-columns: 1fr;
    }

    .admin-series-editor-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-series-editor-state {
        margin-right: 0;
    }
}


/* XP_MISSIONS_V2 */
.quick-hub-mission-section { margin-top:24px; }
.quick-hub-mission-list { display:grid; gap:10px; margin-top:12px; }
.quick-hub-mission-card {
    display:flex; justify-content:space-between; gap:16px; align-items:center;
    padding:16px; border:1px solid rgba(179,91,225,.25); border-radius:13px;
    background:linear-gradient(135deg,#1b1025,#100b18);
}
.quick-hub-mission-copy { display:grid; gap:5px; min-width:0; }
.quick-hub-mission-copy strong { color:#f6e8ff; font-size:14px; }
.quick-hub-mission-copy small { color:#b9a9c2; }
.quick-hub-mission-copy span { color:#d19def; font-size:12px; }
.quick-hub-mission-state { display:grid; gap:7px; min-width:115px; text-align:right; }
.quick-hub-mission-state b { color:#f5d9ff; font-variant-numeric:tabular-nums; }
.quick-hub-mission-state span { color:#a99ab2; font-size:12px; }
.quick-hub-mission-state button { padding:8px 12px; }
.quick-hub-mission-track { height:6px; overflow:hidden; border-radius:99px; background:#382842; }
.quick-hub-mission-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9b40d6,#dd86ff); }
@media(max-width:570px) { .quick-hub-mission-card { align-items:stretch; flex-direction:column; } .quick-hub-mission-state { text-align:left; } }

/* COSMETICS_PREMIUM_V2 */
/* One compact preview system; category samples use the same equipped classes. */
.cosmetic-market-card .cosmetic-market-preview {
    width:100%; min-height:112px; height:112px; margin:0 0 17px;
    overflow:visible; border:1px solid rgba(193,137,226,.20);
    border-radius:15px; background-color:#170e20;
}
.cosmetic-market-card .cosmetic-preview-avatar_frame {
    width:84px; height:84px; min-height:84px; margin:12px auto 33px;
    border-radius:50%;
}
.cosmetic-preview-name {
    display:inline-block; max-width:95%; padding:4px 8px;
    color:#f4e6ff; font-size:clamp(13px,1.5vw,18px); font-weight:800;
    text-align:center; white-space:normal; overflow-wrap:anywhere;
}
.cosmetic-preview-badge {
    display:inline-flex; align-items:center; justify-content:center;
    max-width:92%; padding:7px 10px; border-radius:999px;
    font-size:11px; font-weight:800; text-align:center;
    overflow-wrap:anywhere;
}
.cosmetic-preview-scene {
    display:flex; align-items:center; gap:9px; max-width:92%;
    padding:11px 13px; border:1px solid rgba(211,169,235,.17);
    border-radius:12px; background:rgba(12,8,19,.78);
    color:#f5e9fb; font-size:12px; font-weight:800;
}
.cosmetic-preview-scene b {
    display:grid; place-items:center; width:27px; height:27px;
    flex:0 0 27px; border-radius:50%; background:#3b1d50;
    color:#f0d3ff;
}
.cosmetic-preview-scene small { display:block; color:#b2a0bd; font-size:9px; font-weight:600; }
.quick-hub-cosmetic-item .cosmetic-market-preview { width:58px; height:58px; min-height:58px; margin:0; }
.quick-hub-cosmetic-item .cosmetic-preview-name { font-size:9px; line-height:1.15; padding:2px; }
.quick-hub-cosmetic-item .cosmetic-preview-badge { padding:4px; font-size:7px; line-height:1.1; }
.quick-hub-cosmetic-item .cosmetic-preview-scene { padding:4px; gap:3px; font-size:7px; }
.quick-hub-cosmetic-item .cosmetic-preview-scene b { width:17px; height:17px; flex-basis:17px; }
.quick-hub-cosmetic-item .cosmetic-preview-scene small { font-size:6px; }
.quick-hub-cosmetic-item .cosmetic-market-preview-core { width:42px; height:42px; }

/* Frames have distinct construction, not only distinct hue. */
:is(.cosmetic-avatar_frame-void-crown,.cosmetic-avatar_frame-royal-aegis)::before {
    border:4px double hsl(var(--cosmetic-h) 82% 75%);
    box-shadow:0 0 0 3px hsl(var(--cosmetic-h) 70% 48% / .16),
               inset 0 0 0 2px hsl(var(--cosmetic-h) 80% 76% / .24);
}
:is(.cosmetic-avatar_frame-crimson-orbit,.cosmetic-avatar_frame-solar-flare)::before {
    border:3px dashed hsl(var(--cosmetic-h) 95% 72%);
    box-shadow:0 0 12px hsl(var(--cosmetic-h) 90% 58% / .38);
}
:is(.cosmetic-avatar_frame-lunar-halo,.cosmetic-avatar_frame-frost-veil)::before {
    border:5px solid hsl(var(--cosmetic-h) 76% 82% / .68);
    box-shadow:0 0 0 5px hsl(var(--cosmetic-h) 90% 73% / .10);
}
:is(.cosmetic-avatar_frame-cyber-pulse,.cosmetic-avatar_frame-obsidian-thorn)::before {
    border:3px solid hsl(var(--cosmetic-h) 72% 76%);
    border-radius:24%;
    box-shadow:inset 0 0 0 3px hsl(var(--cosmetic-h) 80% 64% / .18);
}
:is(.cosmetic-avatar_frame-emerald-sigil,.cosmetic-avatar_frame-arcane-ring)::before {
    border:2px solid hsl(var(--cosmetic-h) 90% 72%);
    outline:1px solid hsl(var(--cosmetic-h) 88% 78% / .40);
    outline-offset:3px;
}
@keyframes cosmetic-frame-arrive {
    0% { opacity:.45; transform:scale(.92) rotate(-9deg); }
    100% { opacity:1; transform:scale(1) rotate(0); }
}
.cosmetic-market-card:hover .cosmetic-preview-avatar_frame::before,
.quick-hub-identity:hover [class*="cosmetic-avatar_frame-"]::before,
.public-user-profile-card:hover [class*="cosmetic-avatar_frame-"]::before {
    animation:cosmetic-frame-arrive .72s ease-out 1;
}

/* Name treatments keep solid letter fill and restrained shadows. */
[class*="cosmetic-name_effect-"] {
    transform:none; letter-spacing:normal; text-shadow:0 0 8px hsl(var(--cosmetic-h) 85% 62% / .35);
}
:is(.cosmetic-name_effect-cyber-scan,.cosmetic-name_effect-obsidian-glint) {
    text-decoration:underline; text-decoration-color:hsl(var(--cosmetic-h) 75% 64% / .55);
    text-underline-offset:.2em;
}
:is(.cosmetic-name_effect-starlight,.cosmetic-name_effect-celestial-rainbow) {
    border-bottom:1px solid hsl(var(--cosmetic-h) 90% 78% / .45);
}
:is(.cosmetic-name_effect-royal-prism,.cosmetic-name_effect-blood-script) {
    font-style:italic; letter-spacing:.015em;
}
@keyframes cosmetic-name-arrive {
    from { opacity:.62; text-shadow:none; }
    to { opacity:1; text-shadow:0 0 8px hsl(var(--cosmetic-h) 85% 62% / .35); }
}
.cosmetic-market-card:hover .cosmetic-preview-name,
.quick-hub-identity:hover [class*="cosmetic-name_effect-"] {
    animation:cosmetic-name-arrive .55s ease-out 1;
}

/* Badges remain legible and avoid broad light blooms. */
[class*="cosmetic-badge-"] { box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
:is(.cosmetic-badge-royal-crown,.cosmetic-badge-eternal-star) { border-style:double; border-width:3px; }
:is(.cosmetic-badge-frost-crystal,.cosmetic-badge-moon-seal) { border-style:dotted; border-width:2px; }
:is(.cosmetic-badge-cyber-chip,.cosmetic-badge-obsidian-shard) { border-radius:5px; letter-spacing:.025em; }
:is(.cosmetic-badge-night-flame,.cosmetic-badge-crimson-eye) {
    background:linear-gradient(115deg,hsl(var(--cosmetic-h) 67% 28% / .9),#180d22 70%);
}
@keyframes cosmetic-badge-arrive {
    from { opacity:.6; transform:translateY(3px); }
    to { opacity:1; transform:translateY(0); }
}
.cosmetic-market-card:hover .cosmetic-preview-badge,
.series-review-card:hover .series-review-badge,
.reader-comment:hover .reader-comment-badge {
    animation:cosmetic-badge-arrive .45s ease-out 1;
}

/* Background patterns remain behind an opaque identity sample. */
:is(.cosmetic-profile_decoration-cyber-grid,.cosmetic-profile_decoration-obsidian-rift) {
    background:repeating-linear-gradient(90deg,transparent 0 20px,
        hsl(var(--cosmetic-h) 90% 65% / .09) 21px 22px),
        linear-gradient(135deg,#26142f,#120d1b);
}
:is(.cosmetic-profile_decoration-celestial-stars,.cosmetic-profile_decoration-cosmic-dust) {
    background:radial-gradient(circle at 20% 35%,rgba(255,255,255,.46) 0 1px,transparent 2px),
        radial-gradient(circle at 72% 65%,rgba(219,189,255,.32) 0 1px,transparent 2px),
        linear-gradient(140deg,#231733,#120c1c);
    background-size:44px 44px,61px 61px,auto;
}
:is(.cosmetic-profile_decoration-royal-banner,.cosmetic-profile_decoration-solar-burst) {
    background:linear-gradient(105deg,hsl(var(--cosmetic-h) 70% 48% / .15),transparent 42%),
        linear-gradient(145deg,#241629,#120c1a);
}
:is(.cosmetic-profile_decoration-phantom-fog,.cosmetic-profile_decoration-crimson-mist) {
    background:radial-gradient(ellipse at 78% 18%,hsl(var(--cosmetic-h) 65% 54% / .16),transparent 50%),
        linear-gradient(145deg,#211526,#110c19);
}
.profile-cosmetic-heading[class*="cosmetic-profile_decoration-"] { color:#f6eafa; }

/* A single purchase response unlocks one card; idempotent replays stay static. */
.cosmetic-market-card { position:relative; }
.cosmetic-unlock-flash {
    position:absolute; inset:10px; z-index:5; display:grid; place-items:center;
    border:1px solid rgba(236,192,255,.52); border-radius:14px;
    background:rgba(27,13,38,.93); color:#f9e8ff;
    font-size:16px; font-weight:900; letter-spacing:.1em;
    pointer-events:none;
}
@keyframes cosmetic-unlock-arrive {
    from { opacity:0; transform:scale(.9); }
    55% { opacity:1; transform:scale(1.02); }
    to { opacity:1; transform:scale(1); }
}
.cosmetic-is-unlocking .cosmetic-unlock-flash { animation:cosmetic-unlock-arrive .6s ease-out 1; }

@media (prefers-reduced-motion:reduce) {
    [class*="cosmetic-"]::before,
    .cosmetic-market-card:hover .cosmetic-preview-name,
    .cosmetic-market-card:hover .cosmetic-preview-badge,
    .cosmetic-market-card:hover .cosmetic-preview-avatar_frame::before,
    .cosmetic-is-unlocking .cosmetic-unlock-flash,
    .quick-hub-identity:hover [class*="cosmetic-"]::before,
    .reader-comment:hover .reader-comment-badge,
    .series-review-card:hover .series-review-badge {
        animation:none !important; transition:none !important; transform:none !important;
    }
}
html[data-cosmetic-performance="low"] [class*="cosmetic-"]::before,
html[data-cosmetic-performance="low"] .cosmetic-is-unlocking .cosmetic-unlock-flash {
    animation:none !important; filter:none !important;
}
html[data-cosmetic-performance="low"] [class*="cosmetic-avatar_frame-"]::before {
    box-shadow:none;
}
@media(max-width:600px) {
    .cosmetic-market-card .cosmetic-market-preview { max-width:100%; }
    .cosmetic-preview-name { font-size:15px; }
    .cosmetic-preview-scene { max-width:94%; min-width:0; }
    .cosmetic-preview-scene span { min-width:0; overflow-wrap:anywhere; }
    .reader-comment-badge,.series-review-badge,.profile-cosmetic-badge {
        max-width:100%; white-space:normal; overflow-wrap:anywhere;
    }
}

/* COSMETICS_PREMIUM_SYMBOLS_V2 */
.cosmetic-avatar_frame-eternal-violet { --cosmetic-symbol:"✦"; }
.cosmetic-avatar_frame-void-crown { --cosmetic-symbol:"♛"; }
.cosmetic-avatar_frame-crimson-orbit { --cosmetic-symbol:"◎"; }
.cosmetic-avatar_frame-lunar-halo { --cosmetic-symbol:"☾"; }
.cosmetic-avatar_frame-solar-flare { --cosmetic-symbol:"☀"; }
.cosmetic-avatar_frame-arcane-ring { --cosmetic-symbol:"◇"; }
.cosmetic-avatar_frame-frost-veil { --cosmetic-symbol:"❄"; }
.cosmetic-avatar_frame-emerald-sigil { --cosmetic-symbol:"◆"; }
.cosmetic-avatar_frame-blood-moon { --cosmetic-symbol:"◕"; }
.cosmetic-avatar_frame-royal-aegis { --cosmetic-symbol:"⚜"; }
.cosmetic-avatar_frame-phantom-chain { --cosmetic-symbol:"⌁"; }
.cosmetic-avatar_frame-celestial-wing { --cosmetic-symbol:"✧"; }
.cosmetic-avatar_frame-obsidian-thorn { --cosmetic-symbol:"⬡"; }
.cosmetic-avatar_frame-cyber-pulse { --cosmetic-symbol:"▣"; }
.cosmetic-avatar_frame-aurora-gate { --cosmetic-symbol:"✺"; }
.cosmetic-badge-eternal-star { --cosmetic-symbol:"✦"; }
.cosmetic-badge-night-flame { --cosmetic-symbol:"♨"; }
.cosmetic-badge-crimson-eye { --cosmetic-symbol:"◉"; }
.cosmetic-badge-moon-seal { --cosmetic-symbol:"☾"; }
.cosmetic-badge-sun-core { --cosmetic-symbol:"☀"; }
.cosmetic-badge-arcane-mark { --cosmetic-symbol:"◇"; }
.cosmetic-badge-frost-crystal { --cosmetic-symbol:"❄"; }
.cosmetic-badge-emerald-leaf { --cosmetic-symbol:"✿"; }
.cosmetic-badge-blood-drop { --cosmetic-symbol:"♦"; }
.cosmetic-badge-royal-crown { --cosmetic-symbol:"♛"; }
.cosmetic-badge-phantom-skull { --cosmetic-symbol:"◈"; }
.cosmetic-badge-celestial-orb { --cosmetic-symbol:"✧"; }
.cosmetic-badge-obsidian-shard { --cosmetic-symbol:"⬡"; }
.cosmetic-badge-cyber-chip { --cosmetic-symbol:"▣"; }
.cosmetic-badge-aurora-gem { --cosmetic-symbol:"✺"; }

/* COSMETICS_SIGNATURE_V3: original illustrated identities, visible beyond the shop. */
/* COSMETIC_ANIMATION_AMPLIFY_V1: every one of these read as "barely
   moving" at real avatar/frame size (a 2-7% scale wobble or a 2px
   drift is invisible in normal use) - user's own words: "animasyon
   yok, göze çarpan... ufak şeyler". Same keyframe names (every
   per-item rule below still points at these), much larger swings so
   the motion actually reads at a glance instead of needing to stare. */
@keyframes cosmetic-art-orbit { to { transform:rotate(360deg); } }
@keyframes cosmetic-art-reverse { to { transform:rotate(-360deg); } }
@keyframes cosmetic-art-breathe {
    0%,100% { transform:scale(.97); opacity:.8; filter:drop-shadow(0 0 2px currentColor); }
    50% { transform:scale(1.08); opacity:1; filter:drop-shadow(0 0 8px currentColor); }
}
@keyframes cosmetic-art-surge {
    0%,100% { opacity:.82; transform:scale(.97); filter:brightness(1); }
    35% { opacity:1; transform:scale(1.1); filter:brightness(1.3); }
    70% { opacity:.9; transform:scale(1.02); }
}
@keyframes cosmetic-art-drift {
    0%,100% { transform:translateY(3px) scale(.98); opacity:.8; }
    50% { transform:translateY(-3px) scale(1.06); opacity:1; }
}
@keyframes cosmetic-art-spark {
    0%,100% { opacity:.72; transform:scale(.96); }
    50% { opacity:1; transform:scale(1.1); }
}

/* COSMETIC_FRAME_REAL_ICON_V1: the old hand-authored frame-ring SVG set
   and the AI-illustrated webp override that used to win the cascade
   over them are both deleted from disk - every frame now masks a real
   game-icons.net (CC BY 3.0, Lorc/Delapouite/Skoll/Sbed) icon and
   tints it with the item's own --cosmetic-h hue instead of
   drawing/generating artwork. */
:is(.profile-avatar-preview-shell,.reader-comment-avatar-shell,
    .series-review-avatar-shell,.cosmetic-market-preview)[class*="cosmetic-avatar_frame-"]::before {
    inset:-10px;
    border:0;
    border-radius:0;
    outline:0;
    box-shadow:none;
    background-color:hsl(var(--cosmetic-h) 88% 68%);
    -webkit-mask:var(--cosmetic-frame-art) center / contain no-repeat;
    mask:var(--cosmetic-frame-art) center / contain no-repeat;
    filter:drop-shadow(0 0 6px hsl(var(--cosmetic-h) 90% 55% / .8));
    opacity:.98;
    animation:var(--cosmetic-frame-motion,cosmetic-art-breathe)
        var(--cosmetic-frame-time,7s) var(--cosmetic-frame-ease,ease-in-out) infinite;
}
:is(.profile-avatar-preview-shell,.reader-comment-avatar-shell,
    .series-review-avatar-shell,.cosmetic-market-preview)[class*="cosmetic-avatar_frame-"]::after {
    content:none;
}
.cosmetic-avatar_frame-eternal-violet { --cosmetic-frame-art:url("cosmetics/frame-rings/eternal-violet.svg"); --cosmetic-frame-motion:cosmetic-art-spark; --cosmetic-frame-time:5.8s; }
.cosmetic-avatar_frame-void-crown { --cosmetic-frame-art:url("cosmetics/frame-rings/void-crown.svg"); --cosmetic-frame-motion:cosmetic-art-breathe; --cosmetic-frame-time:7.4s; }
.cosmetic-avatar_frame-crimson-orbit { --cosmetic-frame-art:url("cosmetics/frame-rings/crimson-orbit.svg"); --cosmetic-frame-motion:cosmetic-art-orbit; --cosmetic-frame-time:19s; --cosmetic-frame-ease:linear; }
.cosmetic-avatar_frame-lunar-halo { --cosmetic-frame-art:url("cosmetics/frame-rings/lunar-halo.svg"); --cosmetic-frame-motion:cosmetic-art-drift; --cosmetic-frame-time:8s; }
.cosmetic-avatar_frame-solar-flare { --cosmetic-frame-art:url("cosmetics/frame-rings/solar-flare.svg"); --cosmetic-frame-motion:cosmetic-art-breathe; --cosmetic-frame-time:3.5s; }
.cosmetic-avatar_frame-arcane-ring { --cosmetic-frame-art:url("cosmetics/frame-rings/arcane-ring.svg"); --cosmetic-frame-motion:cosmetic-art-reverse; --cosmetic-frame-time:26s; --cosmetic-frame-ease:linear; }
.cosmetic-avatar_frame-frost-veil { --cosmetic-frame-art:url("cosmetics/frame-rings/frost-veil.svg"); --cosmetic-frame-motion:cosmetic-art-spark; --cosmetic-frame-time:7s; }
.cosmetic-avatar_frame-emerald-sigil { --cosmetic-frame-art:url("cosmetics/frame-rings/emerald-sigil.svg"); --cosmetic-frame-motion:cosmetic-art-drift; --cosmetic-frame-time:9s; }
.cosmetic-avatar_frame-blood-moon { --cosmetic-frame-art:url("cosmetics/frame-rings/blood-moon.svg"); --cosmetic-frame-motion:cosmetic-art-breathe; --cosmetic-frame-time:6.2s; }
.cosmetic-avatar_frame-royal-aegis { --cosmetic-frame-art:url("cosmetics/frame-rings/royal-aegis.svg"); --cosmetic-frame-motion:cosmetic-art-spark; --cosmetic-frame-time:8s; }
.cosmetic-avatar_frame-phantom-chain { --cosmetic-frame-art:url("cosmetics/frame-rings/phantom-chain.svg"); --cosmetic-frame-motion:cosmetic-art-reverse; --cosmetic-frame-time:34s; --cosmetic-frame-ease:linear; }
.cosmetic-avatar_frame-celestial-wing { --cosmetic-frame-art:url("cosmetics/frame-rings/celestial-wing.svg"); --cosmetic-frame-motion:cosmetic-art-drift; --cosmetic-frame-time:5.6s; }
.cosmetic-avatar_frame-obsidian-thorn { --cosmetic-frame-art:url("cosmetics/frame-rings/obsidian-thorn.svg"); --cosmetic-frame-motion:cosmetic-art-surge; --cosmetic-frame-time:8s; }
.cosmetic-avatar_frame-cyber-pulse { --cosmetic-frame-art:url("cosmetics/frame-rings/cyber-pulse.svg"); --cosmetic-frame-motion:cosmetic-art-surge; --cosmetic-frame-time:4.7s; }
.cosmetic-avatar_frame-aurora-gate { --cosmetic-frame-art:url("cosmetics/frame-rings/aurora-gate.svg"); --cosmetic-frame-motion:cosmetic-art-breathe; --cosmetic-frame-time:10s; }

/* The letters stay solid; a small signature moves next to the name. */
@keyframes cosmetic-name-signal {
    0%,100% { opacity:.6; transform:translateY(1px) scale(.9); }
    50% { opacity:1; transform:translateY(-2px) scale(1.2); }
}
@keyframes cosmetic-name-bolt {
    0%,43%,50%,100% { opacity:.9; transform:translateY(0) scale(1); }
    45%,47% { opacity:.35; transform:translateY(-2px) scale(1.2); }
}
/* COSMETIC_NAME_ICON_REAL_V1: this rule's content:var(--cosmetic-name-mark)
   was silently dead - a LATER ::before/::after pair further down (the
   "plate"/"trace" rules) redeclares background and content on the
   exact same selectors, and being later with equal specificity always
   won the cascade. Every name effect showed no mark at all, same bug
   class as the badges. The real fix (icon layered into the winning
   ::before's background, padding widened) lives at that later rule
   now; only the per-item --cosmetic-name-icon/--cosmetic-name-motion/
   --cosmetic-name-time variables and this animation declaration
   (which the later rule never touches) still belong here. */
[class*="cosmetic-name_effect-"]::before {
    animation:var(--cosmetic-name-motion,cosmetic-name-signal)
        var(--cosmetic-name-time,4.6s) ease-in-out infinite;
}
.cosmetic-name_effect-neon-violet { --cosmetic-name-icon:url("cosmetics/name-effects/neon-violet.svg"); --cosmetic-name-motion:cosmetic-name-bolt; --cosmetic-name-time:5.2s; }
.cosmetic-name_effect-starlight { --cosmetic-name-icon:url("cosmetics/name-effects/starlight.svg"); --cosmetic-name-time:4s; }
.cosmetic-name_effect-crimson-glow { --cosmetic-name-icon:url("cosmetics/name-effects/crimson-glow.svg"); --cosmetic-name-time:3.1s; }
.cosmetic-name_effect-lunar-silver { --cosmetic-name-icon:url("cosmetics/name-effects/lunar-silver.svg"); --cosmetic-name-time:7s; }
.cosmetic-name_effect-solar-gold { --cosmetic-name-icon:url("cosmetics/name-effects/solar-gold.svg"); --cosmetic-name-time:3.6s; }
.cosmetic-name_effect-arcane-rune { --cosmetic-name-icon:url("cosmetics/name-effects/arcane-rune.svg"); --cosmetic-name-time:5.4s; }
.cosmetic-name_effect-frost-shimmer { --cosmetic-name-icon:url("cosmetics/name-effects/frost-shimmer.svg"); --cosmetic-name-time:6s; }
.cosmetic-name_effect-emerald-spark { --cosmetic-name-icon:url("cosmetics/name-effects/emerald-spark.svg"); --cosmetic-name-time:4.3s; }
.cosmetic-name_effect-blood-script { --cosmetic-name-icon:url("cosmetics/name-effects/blood-script.svg"); --cosmetic-name-time:6.1s; }
.cosmetic-name_effect-royal-prism { --cosmetic-name-icon:url("cosmetics/name-effects/royal-prism.svg"); --cosmetic-name-time:8s; }
.cosmetic-name_effect-phantom-fade { --cosmetic-name-icon:url("cosmetics/name-effects/phantom-fade.svg"); --cosmetic-name-time:7.2s; }
.cosmetic-name_effect-celestial-rainbow { --cosmetic-name-icon:url("cosmetics/name-effects/celestial-rainbow.svg"); --cosmetic-name-time:5.2s; }
.cosmetic-name_effect-obsidian-glint { --cosmetic-name-icon:url("cosmetics/name-effects/obsidian-glint.svg"); --cosmetic-name-time:5.7s; }
.cosmetic-name_effect-cyber-scan { --cosmetic-name-icon:url("cosmetics/name-effects/cyber-scan.svg"); --cosmetic-name-motion:cosmetic-name-bolt; --cosmetic-name-time:4.4s; }
.cosmetic-name_effect-aurora-wave { --cosmetic-name-icon:url("cosmetics/name-effects/aurora-wave.svg"); --cosmetic-name-time:6.8s; }
:is(.cosmetic-name_effect-crimson-glow,.cosmetic-name_effect-solar-gold,.cosmetic-name_effect-blood-script) {
    text-shadow:0 1px 0 #5b1d17,0 0 9px hsl(var(--cosmetic-h) 94% 61% / .52);
}
:is(.cosmetic-name_effect-frost-shimmer,.cosmetic-name_effect-lunar-silver,.cosmetic-name_effect-celestial-rainbow) {
    text-shadow:0 1px 0 #334756,0 0 10px hsl(var(--cosmetic-h) 95% 75% / .55);
}
:is(.cosmetic-name_effect-cyber-scan,.cosmetic-name_effect-neon-violet) {
    text-decoration:underline;
    text-decoration-style:dotted;
    text-decoration-color:hsl(var(--cosmetic-h) 92% 72% / .68);
    text-underline-offset:.22em;
}

/* Badges use different silhouettes; only the small emblem animates. */
@keyframes cosmetic-badge-ember {
    0%,100% { opacity:.68; transform:translateY(1px) scale(.9); }
    50% { opacity:1; transform:translateY(-2px) scale(1.13); }
}
@keyframes cosmetic-badge-twinkle {
    0%,100% { opacity:.78; transform:scale(.92); }
    44% { opacity:1; transform:scale(1.16) rotate(12deg); }
}
[class*="cosmetic-badge-"]::before {
    display:inline-block;
    min-width:1em;
    text-align:center;
    animation:var(--cosmetic-badge-motion,cosmetic-badge-twinkle)
        var(--cosmetic-badge-time,5s) ease-in-out infinite;
}
:is(.cosmetic-badge-night-flame,.cosmetic-badge-crimson-eye,.cosmetic-badge-sun-core,.cosmetic-badge-blood-drop) {
    --cosmetic-badge-motion:cosmetic-badge-ember;
    --cosmetic-badge-time:3.4s;
    border-radius:5px 12px 5px 12px;
    border-color:hsl(var(--cosmetic-h) 95% 71% / .7);
}
:is(.cosmetic-badge-frost-crystal,.cosmetic-badge-moon-seal,.cosmetic-badge-celestial-orb) {
    border-radius:4px 15px 4px 15px;
    background:linear-gradient(125deg,hsl(var(--cosmetic-h) 72% 34% / .77),#101829);
}
:is(.cosmetic-badge-royal-crown,.cosmetic-badge-arcane-mark,.cosmetic-badge-eternal-star) {
    border-radius:8px 8px 3px 3px;
    border-bottom-width:3px;
    letter-spacing:.035em;
}
:is(.cosmetic-badge-phantom-skull,.cosmetic-badge-obsidian-shard,.cosmetic-badge-cyber-chip) {
    border-radius:3px;
    border-style:dashed;
    background:linear-gradient(90deg,#15101c,hsl(var(--cosmetic-h) 64% 27% / .76));
}
:is(.cosmetic-badge-emerald-leaf,.cosmetic-badge-aurora-gem) {
    border-radius:15px 4px 15px 4px;
}

/* A profile effect reveals once on opening; the content stays on an opaque layer. */
@keyframes cosmetic-profile-reveal {
    from { opacity:0; transform:translateY(-7px) scale(1.03); }
    to { opacity:.72; transform:translateY(0) scale(1); }
}
@keyframes cosmetic-profile-mark {
    0%,100% { opacity:.17; transform:scale(.95) rotate(-4deg); }
    50% { opacity:.27; transform:scale(1.04) rotate(4deg); }
}
:is(.profile-cosmetic-heading,.cosmetic-market-preview)[class*="cosmetic-profile_decoration-"] {
    position:relative;
    isolation:isolate;
    overflow:hidden;
}
:is(.profile-cosmetic-heading,.cosmetic-market-preview)[class*="cosmetic-profile_decoration-"]::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:var(--cosmetic-profile-pattern);
    opacity:.72;
    animation:cosmetic-profile-reveal 1.1s ease-out 1;
}
/* COSMETIC_PROFILE_ICON_REAL_V1: was a unicode glyph (content:var(--cosmetic-profile-mark)) -
   now a real, CC BY 3.0 game-icons.net icon masked and tinted with the item's hue. */
:is(.profile-cosmetic-heading,.cosmetic-market-preview)[class*="cosmetic-profile_decoration-"]::after {
    content:"";
    position:absolute;
    top:-6%;
    right:-2%;
    z-index:0;
    pointer-events:none;
    width:clamp(90px,22vw,190px);
    height:clamp(90px,22vw,190px);
    background-color:hsl(var(--cosmetic-h) 92% 79%);
    -webkit-mask:var(--cosmetic-profile-icon) center / contain no-repeat;
    mask:var(--cosmetic-profile-icon) center / contain no-repeat;
    opacity:.2;
    animation:cosmetic-profile-mark 8s ease-in-out infinite;
}
:is(.profile-cosmetic-heading,.cosmetic-market-preview)[class*="cosmetic-profile_decoration-"] > * {
    position:relative;
    z-index:1;
}
:is(.cosmetic-profile_decoration-eternal-aura,.cosmetic-profile_decoration-arcane-circle,.cosmetic-profile_decoration-royal-banner) {
    --cosmetic-profile-pattern:repeating-radial-gradient(circle at 83% 14%,transparent 0 16px,hsl(var(--cosmetic-h) 90% 69% / .12) 17px 18px,transparent 19px 36px);
}
:is(.cosmetic-profile_decoration-cosmic-dust,.cosmetic-profile_decoration-celestial-stars,.cosmetic-profile_decoration-aurora-sky) {
    --cosmetic-profile-pattern:radial-gradient(circle at 12% 20%,#ffffff90 0 1px,transparent 2px),radial-gradient(circle at 72% 58%,#d8c3ff90 0 1px,transparent 2px);
}
:is(.cosmetic-profile_decoration-crimson-mist,.cosmetic-profile_decoration-blood-moon-sky,.cosmetic-profile_decoration-solar-burst) {
    --cosmetic-profile-pattern:radial-gradient(ellipse at 93% 12%,hsl(var(--cosmetic-h) 93% 66% / .30),transparent 52%),linear-gradient(145deg,transparent 34%,hsl(var(--cosmetic-h) 90% 58% / .09) 48%,transparent 64%);
}
:is(.cosmetic-profile_decoration-moonlight-field,.cosmetic-profile_decoration-frost-field,.cosmetic-profile_decoration-phantom-fog) {
    --cosmetic-profile-pattern:repeating-linear-gradient(112deg,transparent 0 18px,hsl(var(--cosmetic-h) 94% 78% / .11) 19px 20px,transparent 21px 42px);
}
:is(.cosmetic-profile_decoration-emerald-vines,.cosmetic-profile_decoration-obsidian-rift,.cosmetic-profile_decoration-cyber-grid) {
    --cosmetic-profile-pattern:linear-gradient(45deg,transparent 47%,hsl(var(--cosmetic-h) 88% 63% / .13) 49%,transparent 51%),linear-gradient(-45deg,transparent 47%,hsl(var(--cosmetic-h) 88% 63% / .09) 49%,transparent 51%);
    background-size:42px 42px,42px 42px;
}
.cosmetic-profile_decoration-eternal-aura { --cosmetic-profile-icon:url("cosmetics/profile-icons/eternal-aura.svg"); }
.cosmetic-profile_decoration-cosmic-dust { --cosmetic-profile-icon:url("cosmetics/profile-icons/cosmic-dust.svg"); }
.cosmetic-profile_decoration-crimson-mist { --cosmetic-profile-icon:url("cosmetics/profile-icons/crimson-mist.svg"); }
.cosmetic-profile_decoration-moonlight-field { --cosmetic-profile-icon:url("cosmetics/profile-icons/moonlight-field.svg"); }
.cosmetic-profile_decoration-solar-burst { --cosmetic-profile-icon:url("cosmetics/profile-icons/solar-burst.svg"); }
.cosmetic-profile_decoration-arcane-circle { --cosmetic-profile-icon:url("cosmetics/profile-icons/arcane-circle.svg"); }
.cosmetic-profile_decoration-frost-field { --cosmetic-profile-icon:url("cosmetics/profile-icons/frost-field.svg"); }
.cosmetic-profile_decoration-emerald-vines { --cosmetic-profile-icon:url("cosmetics/profile-icons/emerald-vines.svg"); }
.cosmetic-profile_decoration-blood-moon-sky { --cosmetic-profile-icon:url("cosmetics/profile-icons/blood-moon-sky.svg"); }
.cosmetic-profile_decoration-royal-banner { --cosmetic-profile-icon:url("cosmetics/profile-icons/royal-banner.svg"); }
.cosmetic-profile_decoration-phantom-fog { --cosmetic-profile-icon:url("cosmetics/profile-icons/phantom-fog.svg"); }
.cosmetic-profile_decoration-celestial-stars { --cosmetic-profile-icon:url("cosmetics/profile-icons/celestial-stars.svg"); }
.cosmetic-profile_decoration-obsidian-rift { --cosmetic-profile-icon:url("cosmetics/profile-icons/obsidian-rift.svg"); }
.cosmetic-profile_decoration-cyber-grid { --cosmetic-profile-icon:url("cosmetics/profile-icons/cyber-grid.svg"); }
.cosmetic-profile_decoration-aurora-sky { --cosmetic-profile-icon:url("cosmetics/profile-icons/aurora-sky.svg"); }
/* COSMETIC_PROFILE_EFFECT_V1: drifting-motes pattern, fully original. */
.cosmetic-profile_decoration-ether-veil {
    --cosmetic-profile-pattern:
        radial-gradient(circle at 18% 24%,#ffe9b390 0 1.5px,transparent 2.5px),
        radial-gradient(circle at 46% 66%,#fff6df80 0 1px,transparent 2px),
        radial-gradient(circle at 74% 20%,#ffd98a90 0 2px,transparent 3px),
        radial-gradient(circle at 88% 54%,#fff2c680 0 1px,transparent 2px),
        radial-gradient(circle at 32% 84%,#ffe9b380 0 1.5px,transparent 2.5px);
    --cosmetic-profile-art:
        radial-gradient(ellipse at 85% 18%,hsl(46 95% 72% / .34),transparent 55%),
        radial-gradient(ellipse at 20% 78%,hsl(46 90% 64% / .22),transparent 60%);
}
@keyframes cosmetic-ether-veil-drift {
    0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    50% { background-position: 6px -10px, -8px 6px, 4px 8px, -6px -6px, 8px 4px; }
}
:is(.profile-cosmetic-heading,.cosmetic-market-preview).cosmetic-profile_decoration-ether-veil::before {
    animation:
        cosmetic-profile-reveal 1.1s ease-out 1,
        cosmetic-ether-veil-drift
            calc(var(--cosmetic-name-shimmer-time, 4.5s) * 4)
            ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    :is(.profile-cosmetic-heading,.cosmetic-market-preview).cosmetic-profile_decoration-ether-veil::before {
        animation: none !important;
    }
}
html[data-cosmetic-performance="low"] .cosmetic-profile_decoration-ether-veil::before {
    animation: none !important;
}

/* Motion only runs while a comment or review is in view. */
:is(.reader-comment,.series-review-card):not([data-cosmetic-on-screen="1"]) [class*="cosmetic-"]::before,
:is(.reader-comment,.series-review-card):not([data-cosmetic-on-screen="1"]) [class*="cosmetic-"]::after {
    animation-play-state:paused;
}
.reader-comments .reader-comment-badge { font-size:10px; padding:4px 8px; }
.reader-comment-name-trigger strong[class*="cosmetic-name_effect-"] { max-width:28ch; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
@media (prefers-reduced-motion:reduce) {
    [class*="cosmetic-avatar_frame-"]::before,
    [class*="cosmetic-name_effect-"],
    [class*="cosmetic-name_effect-"]::after,
    [class*="cosmetic-badge-"]::before,
    [class*="cosmetic-profile_decoration-"]::before,
    [class*="cosmetic-profile_decoration-"]::after {
        animation:none !important;
        transform:none !important;
    }
}
html[data-cosmetic-performance="low"] [class*="cosmetic-avatar_frame-"]::before,
html[data-cosmetic-performance="low"] [class*="cosmetic-name_effect-"],
html[data-cosmetic-performance="low"] [class*="cosmetic-name_effect-"]::after,
html[data-cosmetic-performance="low"] [class*="cosmetic-badge-"]::before,
html[data-cosmetic-performance="low"] [class*="cosmetic-profile_decoration-"]::before,
html[data-cosmetic-performance="low"] [class*="cosmetic-profile_decoration-"]::after {
    animation:none !important;
    transform:none !important;
}
@media (max-width:600px) {
    .reader-comments .reader-comment-badge { max-width:min(100%,180px); }
    :is(.reader-comment-avatar-shell,.series-review-avatar-shell)[class*="cosmetic-avatar_frame-"]::before { inset:-8px; }
    [class*="cosmetic-profile_decoration-"]::after { font-size:68px; }
}

/* COSMETIC_MOTION_V4: transparent SVG scenes sit over the illustrated
   art (site.js's cosmeticMotionMarkup layers a small animated SVG on
   top, same asset set as tests/test_cosmetics_motion_v4.py).
   COSMETIC_ANIMATION_AMPLIFY_V1: this block used to also force the
   illustrated frame art completely still (animation:none !important)
   so only that tiny SVG overlay moved - exactly the "no animation,
   tiny things" the user called out live. The frame/profile art itself
   now keeps the (amplified) breathing/pulsing/glow animation wired up
   earlier in the cascade instead of being frozen; the SVG overlay
   above still layers extra motion on top of that. */
.cosmetic-motion-layer {
    display:block;
    position:absolute;
    pointer-events:none;
    user-select:none;
    max-width:none;
}
.cosmetic-motion-frame {
    inset:-14px;
    width:calc(100% + 28px);
    height:calc(100% + 28px);
    object-fit:contain;
    z-index:5;
    overflow:visible;
}
.reader-comment-avatar-shell .cosmetic-motion-frame,
.series-review-avatar-shell .cosmetic-motion-frame {
    inset:-10px;
    width:calc(100% + 20px);
    height:calc(100% + 20px);
}
.cosmetic-market-preview .cosmetic-motion-frame {
    inset:-15px;
    width:calc(100% + 30px);
    height:calc(100% + 30px);
}
.profile-cosmetic-heading > .cosmetic-motion-profile,
.cosmetic-market-preview > .cosmetic-motion-profile {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    opacity:.88;
}
.public-user-profile-card > .cosmetic-motion-profile,
.quick-hub-identity > .cosmetic-motion-profile {
    object-fit:fill;
}
.cosmetic-market-preview > .cosmetic-motion-profile { opacity:.9; }
@keyframes cosmetic-scene-entrance {
    from { opacity:0; transform:translateY(-12px) scale(1.04); }
    to { opacity:1; transform:translateY(0) scale(1); }
}
.profile-cosmetic-heading > .cosmetic-motion-profile {
    opacity:1;
    animation:cosmetic-scene-entrance .9s ease-out 1;
}
.profile-cosmetic-heading[class*="cosmetic-profile_decoration-"]::after,
.cosmetic-market-preview[class*="cosmetic-profile_decoration-"]::after {
    content:none;
    display:none;
}

/* Nameplates are material treatments. They leave the letters opaque and clear. */
@keyframes cosmetic-name-trace {
    0%,100% { opacity:.42; transform:scaleX(.55); }
    50% { opacity:.88; transform:scaleX(1); }
}
[class*="cosmetic-name_effect-"] {
    position:relative;
    isolation:isolate;
    padding:.05em 1em .11em .18em;
    text-decoration:none;
    white-space:normal;
}
/* COSMETIC_NAME_ICON_REAL_V1: this is the rule that actually wins the
   cascade (later, equal specificity beats the earlier ::before two
   blocks up) - the icon layer has to live here, not there, or it's
   silently discarded exactly like the old text-glyph mark was. */
[class*="cosmetic-name_effect-"]::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:3px;
    background:
        var(--cosmetic-name-icon) no-repeat right .12em center / .8em .8em,
        var(--cosmetic-name-plate,
            linear-gradient(90deg,hsl(var(--cosmetic-h) 82% 44% / .17),transparent));
    pointer-events:none;
}
[class*="cosmetic-name_effect-"]::after {
    content:"";
    display:block;
    position:absolute;
    left:2px;
    right:2px;
    bottom:0;
    width:auto;
    height:1px;
    margin:0;
    border:0;
    background:linear-gradient(90deg,transparent,
        hsl(var(--cosmetic-h) 92% 76% / .85),transparent);
    transform-origin:center;
    animation:cosmetic-name-trace var(--cosmetic-name-time,5s) ease-in-out infinite;
}
:is(.cosmetic-name_effect-crimson-glow,.cosmetic-name_effect-solar-gold,
    .cosmetic-name_effect-blood-script) {
    --cosmetic-name-plate:linear-gradient(105deg,hsl(var(--cosmetic-h) 85% 52% / .25),
        hsl(var(--cosmetic-h) 70% 32% / .05) 65%,transparent);
}
:is(.cosmetic-name_effect-cyber-scan,.cosmetic-name_effect-neon-violet,
    .cosmetic-name_effect-obsidian-glint) {
    --cosmetic-name-plate:repeating-linear-gradient(90deg,
        hsl(var(--cosmetic-h) 80% 57% / .13) 0 1px,transparent 1px 7px),
        linear-gradient(90deg,hsl(var(--cosmetic-h) 90% 48% / .13),transparent);
}
:is(.cosmetic-name_effect-starlight,.cosmetic-name_effect-celestial-rainbow,
    .cosmetic-name_effect-aurora-wave) {
    --cosmetic-name-plate:linear-gradient(110deg,
        hsl(var(--cosmetic-h) 94% 82% / .17),transparent 55%,
        hsl(calc(var(--cosmetic-h) + 50) 90% 70% / .12));
}
:is(.cosmetic-name_effect-lunar-silver,.cosmetic-name_effect-frost-shimmer,
    .cosmetic-name_effect-phantom-fade) {
    --cosmetic-name-plate:linear-gradient(180deg,
        hsl(var(--cosmetic-h) 69% 83% / .13),transparent 72%);
}
:is(.cosmetic-name_effect-arcane-rune,.cosmetic-name_effect-emerald-spark,
    .cosmetic-name_effect-royal-prism) {
    --cosmetic-name-plate:linear-gradient(90deg,
        transparent 0 4%,hsl(var(--cosmetic-h) 82% 63% / .16) 5% 95%,transparent 96%);
}

/* Engraved badges replace small Unicode pictograms. */
@keyframes cosmetic-badge-glint {
    0%,75%,100% { opacity:0; transform:translateX(-100%); }
    84% { opacity:.36; }
    94% { opacity:0; transform:translateX(185%); }
}
[class*="cosmetic-badge-"] {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    font-weight:800;
    text-transform:none;
}
/* COSMETIC_BADGE_REAL_ICONS_V1: this rule used to kill the earlier
   per-badge text glyph (content:"" beat COSMETICS_PREMIUM_SYMBOLS_V2's
   content:var(--cosmetic-symbol) later in the cascade) and replace it
   with a generic 5px dot - every badge in the market looked identical
   at a glance. Real per-badge SVG icon, sized up, with an obvious
   pulse so it actually reads as "animated" instead of a barely-there
   twinkle. */
[class*="cosmetic-badge-"]::before {
    content:"";
    display:inline-block;
    width:15px;
    min-width:15px;
    height:15px;
    margin-right:6px;
    vertical-align:-3px;
    background-color:currentColor;
    -webkit-mask:var(--cosmetic-badge-icon) center / contain no-repeat;
    mask:var(--cosmetic-badge-icon) center / contain no-repeat;
    animation:cosmetic-badge-pulse-v1 1.8s ease-in-out infinite;
}
@keyframes cosmetic-badge-pulse-v1 {
    0%,100% { transform:scale(1); filter:drop-shadow(0 0 2px currentColor); }
    50% { transform:scale(1.15); filter:drop-shadow(0 0 6px currentColor); }
}
.cosmetic-badge-eternal-star { --cosmetic-badge-icon:url("cosmetics/badges/eternal-star.svg"); }
.cosmetic-badge-night-flame { --cosmetic-badge-icon:url("cosmetics/badges/night-flame.svg"); }
.cosmetic-badge-crimson-eye { --cosmetic-badge-icon:url("cosmetics/badges/crimson-eye.svg"); }
.cosmetic-badge-moon-seal { --cosmetic-badge-icon:url("cosmetics/badges/moon-seal.svg"); }
.cosmetic-badge-sun-core { --cosmetic-badge-icon:url("cosmetics/badges/sun-core.svg"); }
.cosmetic-badge-arcane-mark { --cosmetic-badge-icon:url("cosmetics/badges/arcane-mark.svg"); }
.cosmetic-badge-frost-crystal { --cosmetic-badge-icon:url("cosmetics/badges/frost-crystal.svg"); }
.cosmetic-badge-emerald-leaf { --cosmetic-badge-icon:url("cosmetics/badges/emerald-leaf.svg"); }
.cosmetic-badge-blood-drop { --cosmetic-badge-icon:url("cosmetics/badges/blood-drop.svg"); }
.cosmetic-badge-royal-crown { --cosmetic-badge-icon:url("cosmetics/badges/royal-crown.svg"); }
.cosmetic-badge-phantom-skull { --cosmetic-badge-icon:url("cosmetics/badges/phantom-skull.svg"); }
.cosmetic-badge-celestial-orb { --cosmetic-badge-icon:url("cosmetics/badges/celestial-orb.svg"); }
.cosmetic-badge-obsidian-shard { --cosmetic-badge-icon:url("cosmetics/badges/obsidian-shard.svg"); }
.cosmetic-badge-cyber-chip { --cosmetic-badge-icon:url("cosmetics/badges/cyber-chip.svg"); }
.cosmetic-badge-aurora-gem { --cosmetic-badge-icon:url("cosmetics/badges/aurora-gem.svg"); }
@media (prefers-reduced-motion: reduce) {
    [class*="cosmetic-badge-"]::before { animation:none; }
}
[class*="cosmetic-badge-"]::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    width:40%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
    transform:translateX(-100%);
    animation:cosmetic-badge-glint 6.5s ease-in-out infinite;
    pointer-events:none;
}
:is(.cosmetic-badge-night-flame,.cosmetic-badge-crimson-eye,
    .cosmetic-badge-sun-core,.cosmetic-badge-blood-drop)::before {
    transform:rotate(45deg);
    border-radius:0;
}
:is(.cosmetic-badge-frost-crystal,.cosmetic-badge-moon-seal,
    .cosmetic-badge-celestial-orb)::before {
    border-radius:50%;
    background:transparent;
}
:is(.cosmetic-badge-cyber-chip,.cosmetic-badge-obsidian-shard,
    .cosmetic-badge-phantom-skull)::before {
    border-radius:0;
    box-shadow:2px -2px 0 hsl(var(--cosmetic-h) 90% 75% / .38);
}

@media (prefers-reduced-motion:reduce) {
    .cosmetic-motion-layer { display:none !important; }
    [class*="cosmetic-name_effect-"]::after,
    [class*="cosmetic-badge-"]::after { animation:none !important; transform:none !important; }
}
html[data-cosmetic-performance="low"] .cosmetic-motion-layer { display:none !important; }
html[data-cosmetic-performance="low"] [class*="cosmetic-name_effect-"]::after,
html[data-cosmetic-performance="low"] [class*="cosmetic-badge-"]::after {
    animation:none !important;
    transform:none !important;
}
@media (max-width:600px) {
    .reader-comment-avatar-shell .cosmetic-motion-frame,
    .series-review-avatar-shell .cosmetic-motion-frame {
        inset:-8px;
        width:calc(100% + 16px);
        height:calc(100% + 16px);
    }
    .reader-comments .reader-comment-badge,
    .series-review-badge { max-width:100%; overflow-wrap:anywhere; }
}

/* COSMETIC_ART_V5 */
/* Real icon stays visible (mask, not a raster background) when animation is reduced. */
:is(.profile-avatar-preview-shell,.reader-comment-avatar-shell,
    .series-review-avatar-shell,.cosmetic-market-preview)[class*="cosmetic-avatar_frame-"]::before {
    inset:-15px;
    animation:cosmetic-illustrated-idle 7s ease-in-out infinite;
}
@keyframes cosmetic-illustrated-idle {
    0%,100% { opacity:.96; transform:translateY(0) scale(1); }
    50% { opacity:1; transform:translateY(-1px) scale(1.012); }
}
:is(.reader-comment-avatar-shell,.series-review-avatar-shell)[class*="cosmetic-avatar_frame-"]::before { inset:-10px; }
@media (prefers-reduced-motion:reduce) {
    :is(.profile-avatar-preview-shell,.reader-comment-avatar-shell,
        .series-review-avatar-shell,.cosmetic-market-preview)[class*="cosmetic-avatar_frame-"]::before {
        animation:none !important; transform:none !important;
    }
}
html[data-cosmetic-performance="low"] :is(.profile-avatar-preview-shell,.reader-comment-avatar-shell,
    .series-review-avatar-shell,.cosmetic-market-preview)[class*="cosmetic-avatar_frame-"]::before {
    animation:none !important; transform:none !important;
}

/* COSMETIC_SCENES_V5 / COSMETIC_PROFILE_REAL_ICON_V1: the old AI-illustrated
   webp scenes and the ::before override that stretched them 100%x100% over
   the whole heading are both gone. profile-cosmetic-heading/market-preview
   now just keep the CSS --cosmetic-profile-pattern (defined further up) as
   their ::before background, and --cosmetic-profile-art below is a real
   game-icons.net icon used as a large soft watermark by the reader-comment
   / series-review card layer (background:...cover, further down). */
.cosmetic-profile_decoration-solar-burst { --cosmetic-profile-art:url("cosmetics/profile-icons/solar-burst.svg"); }
.cosmetic-profile_decoration-eternal-aura { --cosmetic-profile-art:url("cosmetics/profile-icons/eternal-aura.svg"); }
.cosmetic-profile_decoration-cosmic-dust { --cosmetic-profile-art:url("cosmetics/profile-icons/cosmic-dust.svg"); }
.cosmetic-profile_decoration-crimson-mist { --cosmetic-profile-art:url("cosmetics/profile-icons/crimson-mist.svg"); }
.cosmetic-profile_decoration-moonlight-field { --cosmetic-profile-art:url("cosmetics/profile-icons/moonlight-field.svg"); }
.cosmetic-profile_decoration-arcane-circle { --cosmetic-profile-art:url("cosmetics/profile-icons/arcane-circle.svg"); }
.cosmetic-profile_decoration-frost-field { --cosmetic-profile-art:url("cosmetics/profile-icons/frost-field.svg"); }
.cosmetic-profile_decoration-emerald-vines { --cosmetic-profile-art:url("cosmetics/profile-icons/emerald-vines.svg"); }
.cosmetic-profile_decoration-blood-moon-sky { --cosmetic-profile-art:url("cosmetics/profile-icons/blood-moon-sky.svg"); }
.cosmetic-profile_decoration-royal-banner { --cosmetic-profile-art:url("cosmetics/profile-icons/royal-banner.svg"); }
.cosmetic-profile_decoration-phantom-fog { --cosmetic-profile-art:url("cosmetics/profile-icons/phantom-fog.svg"); }
.cosmetic-profile_decoration-celestial-stars { --cosmetic-profile-art:url("cosmetics/profile-icons/celestial-stars.svg"); }
.cosmetic-profile_decoration-obsidian-rift { --cosmetic-profile-art:url("cosmetics/profile-icons/obsidian-rift.svg"); }
.cosmetic-profile_decoration-cyber-grid { --cosmetic-profile-art:url("cosmetics/profile-icons/cyber-grid.svg"); }
.cosmetic-profile_decoration-aurora-sky { --cosmetic-profile-art:url("cosmetics/profile-icons/aurora-sky.svg"); }

/* COSMETIC_MOTION_PERSONALITY_V5 */
/* The illustration moves by theme; SVG motes supply the detail. Transforms stay light. */
/* COSMETIC_ANIMATION_AMPLIFY_V1: these are the ones that actually play
   on equipped frames/profile art in practice (the later, more specific
   rule wins the cascade) - a 1-3.5% scale change is invisible on a
   real avatar. Same names, same custom-property wiring, much bigger
   swings. */
@keyframes cosmetic-art-heat {
    0%,100% { transform:translateY(1px) scale(.98); opacity:.82; filter:brightness(1); }
    50% { transform:translateY(-2px) scale(1.1); opacity:1; filter:brightness(1.25); }
}
@keyframes cosmetic-art-voltage {
    0%,100% { transform:scale(.98); opacity:.85; filter:brightness(1); }
    50% { transform:scale(1.12); opacity:1; filter:brightness(1.35); }
}
@keyframes cosmetic-art-billow {
    0%,100% { transform:translate(-2px,2px) scale(.98); opacity:.82; }
    50% { transform:translate(2px,-2px) scale(1.1); opacity:1; }
}
@keyframes cosmetic-art-astral {
    0%,100% { transform:rotate(-2deg) scale(.98); opacity:.82; }
    50% { transform:rotate(2deg) scale(1.1); opacity:1; }
}
:is(.cosmetic-avatar_frame-solar-flare,.cosmetic-avatar_frame-blood-moon,
    .cosmetic-avatar_frame-crimson-orbit) { --cosmetic-art-motion:cosmetic-art-heat; --cosmetic-art-duration:4.2s; }
:is(.cosmetic-avatar_frame-cyber-pulse,.cosmetic-avatar_frame-obsidian-thorn,
    .cosmetic-avatar_frame-void-crown) { --cosmetic-art-motion:cosmetic-art-voltage; --cosmetic-art-duration:5.3s; }
:is(.cosmetic-avatar_frame-frost-veil,.cosmetic-avatar_frame-lunar-halo,
    .cosmetic-avatar_frame-celestial-wing,.cosmetic-avatar_frame-royal-aegis) {
    --cosmetic-art-motion:cosmetic-art-astral; --cosmetic-art-duration:9s;
}
:is(.cosmetic-avatar_frame-aurora-gate,.cosmetic-avatar_frame-emerald-sigil,
    .cosmetic-avatar_frame-phantom-chain,.cosmetic-avatar_frame-arcane-ring,
    .cosmetic-avatar_frame-eternal-violet) { --cosmetic-art-motion:cosmetic-art-billow; --cosmetic-art-duration:8s; }
:is(.profile-avatar-preview-shell,.reader-comment-avatar-shell,
    .series-review-avatar-shell,.cosmetic-market-preview)[class*="cosmetic-avatar_frame-"]::before {
    animation:var(--cosmetic-art-motion,cosmetic-illustrated-idle)
        var(--cosmetic-art-duration,7s) ease-in-out infinite;
}
:is(.cosmetic-profile_decoration-solar-burst,.cosmetic-profile_decoration-blood-moon-sky,
    .cosmetic-profile_decoration-crimson-mist) { --cosmetic-scene-motion:cosmetic-art-heat; --cosmetic-scene-duration:5.5s; }
:is(.cosmetic-profile_decoration-cyber-grid,.cosmetic-profile_decoration-obsidian-rift) {
    --cosmetic-scene-motion:cosmetic-art-voltage; --cosmetic-scene-duration:6s;
}
:is(.cosmetic-profile_decoration-aurora-sky,.cosmetic-profile_decoration-emerald-vines,
    .cosmetic-profile_decoration-phantom-fog,.cosmetic-profile_decoration-cosmic-dust) {
    --cosmetic-scene-motion:cosmetic-art-billow; --cosmetic-scene-duration:11s;
}
:is(.cosmetic-profile_decoration-eternal-aura,.cosmetic-profile_decoration-moonlight-field,
    .cosmetic-profile_decoration-arcane-circle,.cosmetic-profile_decoration-frost-field,
    .cosmetic-profile_decoration-royal-banner,.cosmetic-profile_decoration-celestial-stars) {
    --cosmetic-scene-motion:cosmetic-art-astral; --cosmetic-scene-duration:12s;
}
:is(.profile-cosmetic-heading,.cosmetic-market-preview)[class*="cosmetic-profile_decoration-"]::before {
    animation:var(--cosmetic-scene-motion,cosmetic-art-billow)
        var(--cosmetic-scene-duration,9s) ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce) {
    :is(.profile-avatar-preview-shell,.reader-comment-avatar-shell,.series-review-avatar-shell,
        .cosmetic-market-preview)[class*="cosmetic-avatar_frame-"]::before,
    :is(.profile-cosmetic-heading,.cosmetic-market-preview)[class*="cosmetic-profile_decoration-"]::before {
        animation:none !important; transform:none !important;
    }
}
html[data-cosmetic-performance="low"] :is(.profile-avatar-preview-shell,.reader-comment-avatar-shell,
    .series-review-avatar-shell,.cosmetic-market-preview)[class*="cosmetic-avatar_frame-"]::before,
html[data-cosmetic-performance="low"] :is(.profile-cosmetic-heading,.cosmetic-market-preview)[class*="cosmetic-profile_decoration-"]::before {
    animation:none !important; transform:none !important;
}


/* PUBLIC_UI_64A: readable chapter metadata and restrained shared surfaces. */
.chapter-publication-date {
    color: #b8a9c3;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.home-update-chapter-link {
    background: transparent;
    border-color: transparent;
    border-bottom-color: rgba(184, 133, 208, .14);
    border-radius: 3px;
    font-size: 12px;
}
.home-update-chapter-link .chapter-publication-date {
    margin-left: auto;
    font-size: 11px;
}
.series-chapters-section .chapter-row {
    gap: 10px;
    border-color: rgba(188, 128, 216, .14);
    background: rgba(19, 12, 29, .55);
}
.series-chapters-section .chapter-row .chapter-publication-date {
    margin-left: auto;
}
.reader-empty-state {
    width: min(580px, calc(100% - 32px));
    margin: min(14vh, 110px) auto;
    padding: clamp(24px, 5vw, 44px);
    border: 1px solid rgba(178, 115, 219, .24);
    border-radius: 18px;
    background: #110b1a;
    text-align: center;
}
.reader-empty-state h1 { margin: 8px 0 12px; font-size: clamp(22px, 4vw, 32px); }
.reader-empty-state p { color: #bcb0c6; line-height: 1.6; }
.reader-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.reader-empty-actions > * , .reader-image-error button {
    min-height: 42px; padding: 10px 15px;
    border: 1px solid rgba(199, 137, 236, .45);
    border-radius: 9px; background: #2b173c; color: #f8f0ff;
    cursor: pointer;
}
.reader-image-error {
    width: min(var(--reader-width, 920px), 100%);
    margin: 12px auto;
    padding: 22px;
    display: grid;
    justify-items: center;
    gap: 8px;
    border: 1px solid rgba(211, 130, 147, .36);
    border-radius: 10px;
    background: #160c14;
    color: #f4dce5;
    text-align: center;
}
.reader-image-error[hidden], .reader-page-image[hidden] { display: none !important; }
.reader-image-error span { color: #c5acb8; font-size: 13px; }
.site-main :where(a, input, select, textarea):focus-visible {
    outline: 2px solid #d6a5ff;
    outline-offset: 3px;
}
@media (max-width: 600px) {
    .home-update-chapter-link { flex-wrap: wrap; gap: 5px 9px; min-height: 42px; }
    .home-update-chapter-link .chapter-publication-date { margin-left: 0; }
    .series-chapters-section .chapter-row { flex-wrap: wrap; }
    .series-chapters-section .chapter-row .chapter-publication-date { margin-left: 0; }
}
@media (max-width: 360px) {
    .header-inner { width: calc(100% - 20px); gap: 4px; }
    .final-brand { width: min(140px, calc(100vw - 180px)); min-width: 0; flex: 1 1 auto; }
    .header-actions { gap: 3px; }
    .account-button { padding-inline: 6px; font-size: 9px; }
    .icon-button, .mobile-menu { width: 34px; height: 34px; flex: 0 0 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-update-chapter-link, .series-chapters-section .chapter-row,
    .reader-empty-actions > *, .reader-image-error button { transition: none !important; }
}


/* PUBLIC_UI_64A_MOBILE_REFINEMENT */
@media (max-width: 570px) {
    .home-update-series-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }
    .home-update-series-card {
        grid-template-columns: 78px minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 12px;
        padding: 10px;
        border: 1px solid rgba(188, 128, 216, .18);
        border-radius: 14px;
        background: rgba(18, 11, 27, .72);
    }
    .home-update-series-cover-link { width: 78px; }
    .home-update-series-info { padding: 0; display: block; }
    .home-update-series-title { min-height: 0; margin-bottom: 4px; font-size: 14px; white-space: normal; }
    .home-update-chapter-list {
        min-height: 0 !important;
        margin-top: 5px !important;
        grid-auto-rows: auto !important;
        gap: 2px !important;
    }
    .home-update-chapter-list a[href*="/reader/"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-auto-rows: auto;
        height: auto !important;
        min-height: 37px !important;
        gap: 2px 6px !important;
        padding: 5px 2px !important;
        border-bottom-color: rgba(184, 133, 208, .14);
    }
    .home-update-chapter-list a[href*="/reader/"] > span:first-child {
        grid-column: 1;
        min-width: 0;
    }
    .home-update-chapter-list .chapter-publication-date {
        grid-column: 2;
        margin-left: 0;
    }
    .home-update-chapter-list .home-update-fire,
    .home-update-chapter-list .home-update-lock {
        grid-column: 1 / -1;
        justify-self: start;
        font-size: 10px;
    }
    .series-chapters-section .chapter-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 5px 8px;
    }
    .series-chapters-section .chapter-number { grid-column: 1; grid-row: 1; min-width: 0; }
    .series-chapters-section .chapter-title { grid-column: 1; grid-row: 2; overflow-wrap: anywhere; }
    .series-chapters-section .chapter-publication-date { grid-column: 2; grid-row: 1; margin: 0; }
    .series-chapters-section .new-chapter-badge { grid-column: 1; grid-row: 3; }
    .series-chapters-section .chapter-read { grid-column: 2; grid-row: 2; justify-self: end; white-space: nowrap; }
    .site-footer { display: grid; justify-content: stretch; gap: 12px; font-size: 12px; }
    .site-footer nav { justify-content: flex-start; }
}


/* PUBLIC_UI_64A_IDENTITY_FIT */
@media (max-width: 570px) {
    .account-button-name { max-width: 60px; }
    .header-inner { gap: 6px; }
}


/* PUBLIC_UI_64A_LOADING_AND_LAYOUT */
@media (min-width: 571px) {
    .home-update-series-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
    }
    .home-update-chapter-list {
        grid-auto-rows: minmax(48px, auto) !important;
        min-height: 156px !important;
        gap: 4px !important;
    }
    .home-update-chapter-list a[href*="/reader/"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-content: center !important;
        gap: 2px 6px !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 5px 2px !important;
    }
    .home-update-chapter-list a[href*="/reader/"] > span:first-child {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .home-update-chapter-list .chapter-publication-date {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
    }
    .home-update-chapter-list .home-update-fire {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        font-size: 10px;
    }
    .home-update-chapter-list .home-update-lock {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}
.home-updates-empty .home-update-load-more { margin-top: 10px; }

/* Profile art stays atmospheric in compact identity panels. */
.quick-hub-identity-v2.profile-cosmetic-heading[class*="cosmetic-profile_decoration-"]::before {
    /* COSMETICS_LIVELY_V1: was opacity .16 - the equipped art was nearly
       invisible in the panel a user opens most often. Motion stays off
       here (animation:none is intentional, see comment below); opacity
       alone already reads as far less "empty". */
    animation: none !important;
    opacity: var(--cosmetic-fx-decoration-opacity, .5) !important;
    background-size: auto 100%;
    background-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
.quick-hub-identity-v2 > .cosmetic-motion-profile {
    width: min(56%, 220px);
    height: 48%;
    inset: 0 0 auto auto;
    object-fit: cover;
    opacity: var(--cosmetic-fx-motion-opacity, .32);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 100%);
    mask-image: linear-gradient(90deg, transparent, #000 100%);
}
.quick-hub-identity-v2 > :is(.quick-hub-identity-hero, .quick-hub-identity-showcase) {
    position: relative;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .quick-hub-identity-v2 > .cosmetic-motion-profile { display: none; }
}
@media (max-width: 420px) {
    .header-inner .final-brand { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Compact identity scenes: artwork frames the account content without stretching. */
.quick-hub-identity-v2 > .quick-hub-identity-glow {
    position: absolute;
}
.quick-hub-identity-v2 > .cosmetic-motion-profile {
    animation: none !important;
    object-fit: cover;
    object-position: right center;
}
.public-user-profile-card.profile-cosmetic-heading[class*="cosmetic-profile_decoration-"]::before {
    /* COSMETICS_LIVELY_V1: was opacity .16/.14 - other users' public
       profile cards barely showed their equipped decoration at all. */
    inset: 0 0 0 auto;
    width: min(42%, 190px);
    background-size: auto 100%;
    background-position: right center;
    opacity: var(--cosmetic-fx-decoration-opacity, .5) !important;
    animation: none !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 90%);
    mask-image: linear-gradient(90deg, transparent, #000 90%);
}
.public-user-profile-card > .cosmetic-motion-profile {
    inset: 0 0 0 auto;
    width: min(42%, 190px);
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: var(--cosmetic-fx-motion-opacity, .32) !important;
    animation: none !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 90%);
    mask-image: linear-gradient(90deg, transparent, #000 90%);
}

.reader-chapter-menu { position: relative; min-width: 0; }
.reader-chapter-menu > summary { display: flex; gap: 7px; cursor: pointer; list-style: none; }
.reader-chapter-menu > summary::-webkit-details-marker { display: none; }
.reader-chapter-menu > summary::after { content: "⌄"; }
.reader-chapter-menu[open] > summary { border-color: rgba(205, 133, 255, .7); }
.reader-chapter-menu-count { color: #dca8ff; font-variant-numeric: tabular-nums; }
.reader-chapter-menu-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 50%;
    width: min(360px, calc(100vw - 32px));
    max-height: min(52vh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-50%);
    padding: 8px;
    border: 1px solid rgba(188, 105, 255, .32);
    border-radius: 12px;
    background: #180f22;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .52);
}
.reader-chapter-menu-list a {
    display: block;
    padding: 9px 10px;
    border-radius: 7px;
    color: #eee2f5;
    font-size: 12px;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.reader-chapter-menu-list a:hover,
.reader-chapter-menu-list a:focus-visible,
.reader-chapter-menu-list a[aria-current="page"] {
    background: rgba(177, 94, 221, .17);
}
.reader-toolbar.reader-toolbar-hidden:has(.reader-chapter-menu[open]) {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 560px) {
    .reader-chapter-menu-list { left: 50%; transform: translateX(-50%); }
    .reader-chapter-menu > summary { justify-content: center; }
}

/* PUBLIC_UI_64A_FINAL_VISUAL_PASS */
/* Existing content, richer composition. No invented cover artwork. */
.hero-panel {
    min-height: 224px;
    padding: clamp(26px, 3vw, 42px);
    border-color: rgba(187, 99, 232, .28);
    background:
        linear-gradient(115deg, rgba(10, 6, 17, .12) 0 43%, rgba(86, 26, 119, .16) 70%, transparent 100%),
        repeating-linear-gradient(145deg, transparent 0 31px, rgba(188, 110, 249, .025) 32px 33px),
        radial-gradient(ellipse at 78% 58%, rgba(146, 36, 205, .24), transparent 49%),
        linear-gradient(135deg, #1d0e2c, #090611 72%);
    box-shadow: inset 0 1px 0 rgba(240, 199, 255, .09), 0 22px 55px rgba(0, 0, 0, .28);
}
.hero-panel::after { opacity: .21; }
.hero-panel h1 { max-width: 23ch; line-height: 1.03; }
.hero-search input { background: rgba(8, 5, 14, .88); }

.daily-pick-section, .home-main .section { margin-top: 21px; }
.daily-pick-card { border-color: rgba(185, 92, 221, .26); }
.daily-pick-series-cover { border-radius: 11px; }
.daily-pick-series-card { border-radius: 12px; }
.home-update-series-grid { gap: 18px 14px; align-items: start; }
.home-update-series-card { position: relative; height: auto; grid-template-rows: auto auto; }
.home-update-series-info { height: auto; grid-template-rows: auto auto; }
.home-update-chapter-list { align-self: start; min-height: 0 !important; grid-auto-rows: auto !important; }
.home-update-series-cover-link, .discover-series-cover-link {
    border-radius: 12px;
    border-color: rgba(194, 112, 239, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 26px rgba(0, 0, 0, .34);
}
.home-update-series-cover-link::after, .discover-series-cover-link::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 28%;
    background: linear-gradient(transparent, rgba(5, 3, 10, .42));
    pointer-events: none;
}
.series-cover-placeholder, .daily-pick-series-cover > .daily-pick-fallback {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #f8eaff;
    font-family: Georgia, serif;
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 700;
    text-shadow: 0 2px 14px rgba(49, 6, 74, .8);
    background:
        radial-gradient(circle at 67% 22%, hsl(var(--cover-hue, 281) 91% 61% / .39), transparent 43%),
        linear-gradient(142deg, hsl(var(--cover-hue, 281) 42% 23%), #120a1d 55%, #08060e);
}
.series-cover-placeholder::before, .daily-pick-series-cover > .daily-pick-fallback::before {
    content: "";
    position: absolute;
    inset: 12% 5%;
    z-index: 0;
    background: url("/static/etr-favicon.png") center / contain no-repeat;
    opacity: .23;
    filter: saturate(.8);
}
.series-cover-placeholder::after, .daily-pick-series-cover > .daily-pick-fallback::after {
    content: "ETERNAL SCANS";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    color: #e7c6f4;
    font: 700 9px/1.2 system-ui, sans-serif;
    letter-spacing: .23em;
    text-align: center;
    text-shadow: 0 1px 6px #08040d;
}
.home-update-series-title, .discover-series-title { line-height: 1.3; }
.home-update-chapter-list { gap: 2px; }
.home-update-chapter-link {
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
}
.home-update-chapter-link:hover, .home-update-chapter-link:focus-visible {
    background: rgba(121, 45, 156, .13);
}
.home-update-load-more-wrap { margin-top: 16px; }
.home-sidebar .quick-series-item {
    min-height: 61px;
    background: linear-gradient(90deg, rgba(47, 22, 63, .45), rgba(14, 8, 22, .45));
}
.home-sidebar .quick-series-cover {
    border: 1px solid rgba(194, 113, 236, .22);
    background: radial-gradient(circle at 66% 20%, #663589, #160d20 72%);
}
.home-sidebar .quick-series-cover:not(:has(img)) {
    background: url("/static/etr-favicon.png") center / 95% no-repeat, linear-gradient(145deg, #2e1640, #0c0812);
}
.home-sidebar .announcement-empty { min-height: 62px; }

.discover-page-hero {
    position: relative;
    min-height: 0;
    padding: clamp(22px, 3vw, 32px);
    background: radial-gradient(circle at 84% 42%, rgba(132, 48, 184, .2), transparent 39%), linear-gradient(140deg, #1b0f29, #090611 78%);
}
.discover-page-hero::after, .market-hero::after {
    content: "";
    position: absolute;
    inset: 7% 3% 7% auto;
    width: min(30%, 280px);
    background: url("/static/etr-favicon.png") center / contain no-repeat;
    opacity: .15;
    pointer-events: none;
}
.discover-page-hero > *, .market-hero > * { position: relative; z-index: 1; }
.discover-page-controls, .cosmetic-market-toolbar {
    border-color: rgba(183, 106, 226, .24);
    background: linear-gradient(135deg, rgba(27, 14, 38, .92), rgba(13, 8, 21, .94));
}
.discover-page-controls select, .cosmetic-market-toolbar select {
    color: #f2e7f8;
    background-color: #170d22;
    border-color: rgba(196, 126, 231, .36);
    cursor: pointer;
}
.discover-page-controls select option, .cosmetic-market-toolbar select option {
    color: #f2e7f8;
    background: #170d22;
}
.discover-series-card-body { gap: 6px; }
.discover-series-latest-button { border-color: rgba(191, 101, 233, .33); }

.reader-toolbar {
    border-color: rgba(181, 110, 224, .24);
    background: linear-gradient(120deg, rgba(22, 13, 31, .96), rgba(10, 7, 16, .98));
}
.reader-toolbar-chapter-control { background: rgba(142, 66, 191, .09); }
.reader-empty-inline {
    margin: 28px auto 8px;
    padding: 26px 18px;
    border-color: rgba(171, 106, 208, .27);
    border-radius: 11px;
    background: radial-gradient(circle at 50% 0, rgba(114, 51, 151, .13), transparent 60%), #0c0911;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.reader-empty-inline strong { font-size: clamp(16px, 2vw, 20px); }

.market-hero {
    padding: clamp(24px, 3vw, 34px);
    border-radius: 20px;
    background: radial-gradient(circle at 90% 20%, rgba(149, 63, 220, .23), transparent 35%), linear-gradient(135deg, #211330, #090810 70%);
}
.market-hero h1 { font-size: clamp(32px, 4vw, 52px); }
.market-account-summary { margin-top: 20px; }
.market-account-summary > div { border-radius: 12px; }
.market-product-card {
    min-height: 206px;
    padding: 20px;
    border-color: rgba(174, 103, 220, .3);
    border-radius: 16px;
    background: radial-gradient(circle at 88% 12%, rgba(148, 61, 205, .17), transparent 43%), linear-gradient(150deg, #251631, #0c0912);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 35px rgba(0, 0, 0, .24);
}
.market-product-card h3 { margin-top: 23px; }
.market-product-card:focus-within { border-color: rgba(223, 158, 255, .63); }
.cosmetic-market-card { background: linear-gradient(165deg, #20142c, #0e0a14 72%); }
.reader-comments .reader-comment, .series-review-list > .series-review-card {
    background: linear-gradient(135deg, rgba(31, 20, 44, .9), rgba(13, 10, 21, .94)) !important;
    border-color: rgba(181, 113, 219, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* The author's equipped profile decoration stays inside comment and review cards. */
:is(.reader-comment, .series-review-card)[class*="cosmetic-profile_decoration-"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Manual profile cover photo shown behind comment/review cards. */
.reader-comment,
.series-review-card {
    position: relative;
    overflow: hidden;
}
.reader-comment-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.reader-comment-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 10, 21, .9) 0%, rgba(13, 10, 21, .74) 48%, rgba(13, 10, 21, .58) 100%);
}
.reader-comment > *:not(.reader-comment-cover),
.series-review-card > *:not(.reader-comment-cover) {
    position: relative;
    z-index: 1;
}
:is(.reader-comment, .series-review-card)[class*="cosmetic-profile_decoration-"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Readability overlay, theme pattern, then the illustrated art filling the whole card. */
    background:
        linear-gradient(90deg, rgba(13, 10, 21, .9) 0%, rgba(13, 10, 21, .74) 48%, rgba(13, 10, 21, .58) 100%),
        var(--cosmetic-profile-pattern, linear-gradient(transparent, transparent)),
        var(--cosmetic-profile-art, linear-gradient(transparent, transparent)) right center / cover no-repeat;
    opacity: 1;
}
:is(.reader-comment, .series-review-card) > .cosmetic-motion-profile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    object-position: right center;
    opacity: .16;
    pointer-events: none;
}
:is(.reader-comment, .series-review-card) > :not(.cosmetic-motion-profile) { position: relative; z-index: 1; }
.reader-comment.is-reply { border-left-color: rgba(182, 95, 222, .4); }
.reader-comment-footer, .series-review-footer { gap: 8px; }

:is(.hero-panel, .discover-page-hero, .market-hero, .home-update-series-cover-link,
    .discover-series-cover-link, .reader-comment, .series-review-card, .market-product-card):focus-within {
    outline-color: rgba(226, 172, 255, .8);
}
@media (max-width: 768px) {
    .hero-panel::after { opacity: .1; }
    .market-product-grid, .eternium-market-section .market-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-update-series-grid { gap: 14px 10px; }
}
@media (max-width: 570px) {
    .hero-panel { min-height: 0; padding: 25px 19px; }
    .hero-panel h1 { font-size: clamp(30px, 10vw, 45px); }
    .hero-panel::after { opacity: .065; }
    .discover-page-hero::after, .market-hero::after { opacity: .07; width: 38%; }
    .daily-pick-section, .home-main .section { margin-top: 17px; }
    .home-update-series-card { padding: 10px; }
    .market-product-grid, .eternium-market-section .market-product-grid { grid-template-columns: minmax(0, 1fr); }
    .market-product-card { min-height: 174px; }
    :is(.reader-comment, .series-review-card) > .cosmetic-motion-profile { opacity: .1; }
}
@media (prefers-reduced-motion: reduce) {
    .home-update-series-cover-link, .discover-series-cover-link,
    .daily-pick-series-card, .market-product-card { transition: none !important; }
    :is(.reader-comment, .series-review-card) > .cosmetic-motion-profile { display: none; }
}
html[data-cosmetic-performance="low"] :is(.reader-comment, .series-review-card) > .cosmetic-motion-profile { display: none; }

/* AD_MONETIZATION_V1 */
/* Reserved, CLS-safe placeholder. No third-party ad script is loaded until
   a real provider is chosen and separately approved to load its own markup
   inside this container. */
.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    margin: 18px auto;
    max-width: var(--content);
    border-radius: 14px;
    border: 1px dashed var(--line2);
    background: rgba(19, 10, 32, .55);
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .04em;
}
.ad-slot[hidden] { display: none; }
.ad-slot::before {
    content: "Reklam Alanı";
    opacity: .55;
}
@media (max-width: 570px) {
    .ad-slot { min-height: 72px; margin: 14px auto; }
}

/* COSMETICS_HIDDEN_EVERYWHERE_V2: user's explicit, repeated request -
   nothing cosmetic-related should be visible anywhere on the site
   (market, admin, Quick Hub, public profile, comments/reviews,
   avatars, names, badges). Underlying code/data is left intact
   (nothing deleted) so this is fully reversible. */
.cosmetic-market-section,
#admin-code-tab-cosmetics,
#admin-code-panel-cosmetics,
[data-hub-account="cosmetics"],
.quick-hub-cosmetic-heading,
.quick-hub-cosmetic-inventory,
.quick-hub-cosmetic-intensity,
.public-user-profile-cosmetics,
.reader-comment-badge,
.series-review-badge,
[class*="cosmetic-badge-"],
[class*="cosmetic-avatar_frame-"]::before,
[class*="cosmetic-avatar_frame-"]::after,
[class*="cosmetic-name_effect-"]::before,
[class*="cosmetic-name_effect-"]::after,
[class*="cosmetic-profile_decoration-"]::before,
[class*="cosmetic-profile_decoration-"]::after,
.cosmetic-motion-layer {
    display: none !important;
}
/* The name-effect gradient text-fill can't be display:none (it IS the
   username text) - reset it back to plain, uncolored text instead. */
[class*="cosmetic-name_effect-"] {
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    letter-spacing: normal !important;
    transform: none !important;
    animation: none !important;
    text-shadow: none !important;
    font-style: normal !important;
}