/* ==========================================================================
   AnimeSaturn — Community area (board, post, create/edit, Super X, My Zone,
   Mana Shop, Live Chat). Loaded AFTER the legacy community.min.css /
   mana-shop.css / live-chat.css and re-skins them with the --as-* tokens.
   Overrides of legacy-classed elements are prefixed with #main-wrapper so they
   beat the old ".layout-award …" chains without !important.
   ========================================================================== */

.as-cm {
    --as-cm-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -8px rgba(134, 61, 186, .12);
    --as-cm-up: var(--as-brand);
    --as-cm-down: var(--as-danger, #e5484d);
    --as-cm-save: var(--as-star, #f59e0b);
}
.layout-page.layout-award.as-cm { min-height: 60vh; overflow-x: clip; display: block; width: 100%; }

/* ---------- breadcrumb + page head (reference "News" section head) ---------- */
.as-cm .as-crumbs { margin: 0 0 14px; font-size: .8125rem; color: var(--as-ink-dim); }
.as-cm .as-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.as-cm .as-crumbs li { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; }
.as-cm .as-crumbs li + li::before { content: "\203A"; color: var(--as-ink-dim); font-size: 1rem; line-height: 1; }
.as-cm .as-crumbs a { color: var(--as-ink-mute); }
.as-cm .as-crumbs a:hover { color: var(--as-brand); }
.as-cm .as-crumbs [aria-current] { color: var(--as-ink); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.as-cm-head { margin-bottom: 1.25rem; }
.as-cm-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.as-cm-head__text { min-width: 0; max-width: 820px; }
.as-cm-h1 {
    margin: 0;
    font-family: var(--as-font-display);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--as-ink);
    overflow-wrap: anywhere;
}
@media (min-width: 768px) { .as-cm-h1 { font-size: 1.75rem; } }
.as-cm-sub { margin: .375rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--as-ink-mute); }
.as-cm-count { margin: 0; font-size: .875rem; color: var(--as-ink-mute); white-space: nowrap; }
.as-cm-count b { color: var(--as-brand); font-weight: 700; }
html.dark .as-cm-count b { color: color-mix(in srgb, var(--as-brand) 70%, #fff); }

/* ---------- section pill tabs ---------- */
.as-cm-tabs {
    display: flex;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: 2px 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.as-cm-tabs::-webkit-scrollbar { display: none; }
.as-cm-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.375rem;
    padding: 0 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--as-ink-mute);
    white-space: nowrap;
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: 999px;
    transition: color .15s, background-color .15s, border-color .15s, transform .15s;
}
.as-cm-tab i { font-size: .8125rem; opacity: .85; }
.as-cm-tab:hover { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border-strong); }
.as-cm-tab.is-active,
.as-cm-tab.is-active:hover { color: #fff; background: var(--as-brand); border-color: var(--as-brand); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--as-brand) 70%, transparent); }

/* ---------- shared small pieces ---------- */
.as-cm-dot {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--as-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 18%, transparent);
}
.as-side-card {
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    box-shadow: var(--as-cm-shadow);
    overflow: hidden;
}
.as-side-card + .as-side-card { margin-top: 1rem; }
.as-side-card__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1rem;
    background: var(--as-soft);
    border-bottom: 1px solid var(--as-border);
}
.as-side-card__title { margin: 0; font-family: var(--as-font-display); font-size: .875rem; font-weight: 700; color: var(--as-ink); letter-spacing: -.005em; }
.as-side-card__text { margin: 0; padding: .875rem 1rem 0; font-size: .8125rem; line-height: 1.55; color: var(--as-ink-mute); }
.as-side-card__text:last-child { padding-bottom: 1rem; }
.as-side-card__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .75rem 1rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--as-brand);
    background: var(--as-soft);
    border-top: 1px solid var(--as-border);
    transition: background-color .15s, gap .2s;
}
html.dark .as-side-card__more { color: color-mix(in srgb, var(--as-brand) 70%, #fff); }
.as-side-card__more:hover { gap: .625rem; background: var(--as-hover); }

.as-back-cta {
    display: inline-flex;
    align-items: center;
    gap: .875rem;
    margin-top: 1rem;
    padding: .875rem 1.125rem .875rem .875rem;
    color: var(--as-ink);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    box-shadow: var(--as-cm-shadow);
    transition: transform .2s var(--as-ease), border-color .2s, box-shadow .26s;
}
.as-back-cta:hover { color: var(--as-ink); border-color: var(--as-brand); transform: translateY(-2px); box-shadow: 0 14px 36px -16px color-mix(in srgb, var(--as-brand) 60%, transparent); }
.as-back-cta__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--as-r-md); color: var(--as-brand); background: color-mix(in srgb, var(--as-brand) 14%, transparent); transition: background-color .18s, color .18s; }
.as-back-cta:hover .as-back-cta__icon { color: #fff; background: var(--as-brand); }
.as-back-cta__body { display: flex; flex-direction: column; line-height: 1.2; }
.as-back-cta__kicker { font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--as-ink-dim); }
.as-back-cta__title { font-family: var(--as-font-display); font-size: .9375rem; font-weight: 700; }

.as-cm-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    font-size: .8125rem;
    color: var(--as-ink);
    background: var(--as-brand-soft);
    border: 1px solid color-mix(in srgb, var(--as-brand) 35%, transparent);
    border-radius: var(--as-r-lg);
}
.as-cm-notice a { font-weight: 700; color: var(--as-brand); }
html.dark .as-cm-notice a { color: color-mix(in srgb, var(--as-brand) 65%, #fff); }

/* Mana coin */
#main-wrapper .mana-icon,
.shop-confirm .mana-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: .25rem;
    line-height: 16px;
    font-size: 9px;
    font-weight: 800;
    font-style: normal;
    text-align: center;
    vertical-align: -2px;
    color: #fff;
    background: var(--as-grad);
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--as-brand) 22%, transparent);
}
#main-wrapper .mana-icon::before,
.shop-confirm .mana-icon::before { content: "M"; }

/* Tag colours: legacy pastel values read well on dark; darker set for light mode. */
#main-wrapper .ztag span { font-weight: 600; }
html:not(.dark) #main-wrapper .ztag .zt-green { color: #15803d; }
html:not(.dark) #main-wrapper .ztag .zt-yellow { color: #a16207; }
html:not(.dark) #main-wrapper .ztag .zt-orange { color: #c2410c; }
html:not(.dark) #main-wrapper .ztag .zt-red { color: #be123c; }
html:not(.dark) #main-wrapper .ztag .zt-blue { color: #1d4ed8; }
html:not(.dark) #main-wrapper .ztag .zt-purple { color: #7e22ce; }
html:not(.dark) #main-wrapper .ztag .zt-white { color: #52525b; }
html:not(.dark) #main-wrapper .ztag .zt-pink { color: #be185d; }
html:not(.dark) #main-wrapper .ztag .zt-cyan { color: #0e7490; }
html:not(.dark) #main-wrapper .ztag .zt-lime { color: #4d7c0f; }
html:not(.dark) #main-wrapper .ztag .zt-sky { color: #0369a1; }
html:not(.dark) #main-wrapper .ztag .zt-coral { color: #e11d48; }

/* Author line (avatar + name + badge + title chip) */
.as-cm .as-owner { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.as-cm .as-owner .profile-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--as-hover);
}
.as-cm .as-owner .profile-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-cm .as-owner .user-name {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--as-ink) !important;
    white-space: nowrap;
}
.as-cm .as-owner .user-name:hover .as-owner__name { color: var(--as-brand); }
.as-cm .as-owner__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.as-cm .as-owner__rank {
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
    border: 1px solid var(--as-border-strong);
    border-radius: 999px;
}
.as-cm .badg-level { margin-right: 0; }

/* Toast fallback used by community.min.js when showToast() is missing */
.ak-toast {
    font: 600 .875rem/1.4 var(--as-font) !important;
    color: var(--as-ink) !important;
    background: var(--as-elev) !important;
    border: 1px solid var(--as-border) !important;
    border-radius: var(--as-r-lg) !important;
    box-shadow: var(--as-shadow-pop) !important;
}
.ak-toast-success { border-color: color-mix(in srgb, var(--as-success, #16a34a) 50%, transparent) !important; }
.ak-toast-error { border-color: color-mix(in srgb, var(--as-danger, #e5484d) 55%, transparent) !important; }

/* Report modal */
.as-cm-modal label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; color: var(--as-ink); }
.as-cm-counter { margin-top: .375rem; font-size: .75rem; color: var(--as-ink-dim); text-align: right; }

/* ==========================================================================
   Board
   ========================================================================== */
.as-cm-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 861px) {
    .as-cm-board { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (min-width: 1200px) {
    .as-cm-board { grid-template-columns: 290px minmax(0, 1fr); gap: 2rem; }
}
.as-cm-side { position: sticky; top: calc(var(--as-header-h, 4rem) + 1rem); display: none; }
@media (min-width: 861px) { .as-cm-side { display: block; } }
.as-cm-sidebox { padding: 0; overflow: hidden; }
.as-cm-sidebox + .as-cm-sidebox { margin-top: 1rem; }
.as-cm-sidebox__head { display: flex; align-items: center; gap: .5rem; padding: .875rem 1rem; border-bottom: 1px solid var(--as-border); }
.as-cm-sidebox__title { margin: 0; font-family: var(--as-font-display); font-size: .875rem; font-weight: 700; }
.as-cm-sidecta { padding: 1rem; }
.as-cm-sidecta__text { margin: 0 0 .75rem; font-size: .8125rem; line-height: 1.5; color: var(--as-ink-mute); }

.as-cm-topics { list-style: none; margin: 0; padding: .375rem; max-height: calc(100vh - 16rem); overflow-y: auto; scrollbar-width: thin; }
.as-cm-topic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .75rem;
    font-size: .8125rem;
    border-radius: var(--as-r-md);
    transition: background-color .15s;
}
.as-cm-topic:hover { background: var(--as-hover); }
.as-cm-topic.is-active { background: var(--as-brand-soft); box-shadow: inset 3px 0 0 var(--as-brand); }
.as-cm-topic .ztag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-cm-topic .number {
    flex-shrink: 0;
    padding: .125rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--as-ink-mute);
    background: var(--as-bg);
    border: 1px solid var(--as-border);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* toolbar */
.as-cm-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.as-cm-toolbar__left { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1 1 320px; min-width: 0; }
.as-cm-toolbar__right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.as-cm-toolbar .as-btn i { font-size: .75rem; }
.as-cm-drop { position: relative; }
.as-cm-drop--tags { display: block; }
@media (min-width: 861px) { .as-cm-drop--tags { display: none; } }
.as-cm-drop .dropdown-menu { max-height: 60vh; overflow-y: auto; }
#main-wrapper #post-sort .dropdown-item { justify-content: space-between; }
.as-cm-search { position: relative; flex: 1 1 200px; min-width: 0; max-width: 340px; }
.as-cm-search .fa-search { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--as-ink-dim); pointer-events: none; }
#main-wrapper .as-cm-search input {
    width: 100%;
    max-width: none;
    height: 2.125rem;
    min-height: 0;
    padding: 0 .75rem 0 2rem;
    font-size: .8125rem;
    color: var(--as-ink);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: 999px;
}
#main-wrapper .as-cm-search input:focus { border-color: var(--as-brand); box-shadow: 0 0 0 3px var(--as-brand-ring); max-width: none; }
@media (max-width: 575.98px) {
    .as-cm-search { flex-basis: 100%; max-width: none; order: 3; }
    .as-cm-toolbar__right { width: 100%; }
    .as-cm-toolbar__right .as-btn { flex: 1 1 0; }
}

/* list */
.post-list { display: flex; flex-direction: column; gap: .75rem; }
.as-cm-pins { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 1300px) { .as-cm-pins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.as-cm-empty { padding: 3rem 1.5rem; }
.as-cm-empty p { margin: 0; }
.as-cm-loading { padding: 1rem 0; }

#main-wrapper .as-cm-more.btn {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: .25rem 0 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
#main-wrapper .btn-showmore {
    width: auto;
    min-width: 200px;
    height: 2.5rem;
    padding: 0 1.5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--as-ink) !important;
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: 999px;
}
#main-wrapper .btn-showmore::before { content: none; }
#main-wrapper .btn-showmore:hover { background: var(--as-hover); border-color: var(--as-brand); }

/* ---------- post card (reference news card language, as a row) ---------- */
.as-post {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
    transition: border-color .2s, box-shadow .26s, transform .2s var(--as-ease);
}
.as-post:hover { border-color: var(--as-border-strong); box-shadow: 0 14px 36px -20px color-mix(in srgb, var(--as-brand) 55%, transparent); }
.as-post.is-pinned { border-color: color-mix(in srgb, var(--as-brand) 45%, var(--as-border)); background: linear-gradient(180deg, color-mix(in srgb, var(--as-brand) 7%, var(--as-soft)), var(--as-soft)); }

.as-post__media { min-width: 0; }
.as-post__media > a {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    color: inherit;
    border-radius: var(--as-r-lg);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
}
#main-wrapper .as-post .tl-preview { display: block; margin: 0; padding: 0; max-width: none; text-decoration: none; }
#main-wrapper .as-post .tl-preview:hover { background: var(--as-elev); }
#main-wrapper .as-post .tl-preview-posters {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 2px;
}
#main-wrapper .as-post .tl-preview-posters img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform .5s var(--as-ease);
}
#main-wrapper .as-post .tl-preview-posters img:only-child,
#main-wrapper .as-post .tl-preview-posters img:nth-child(3):last-child { grid-column: span 2; }
.as-post:hover .tl-preview-posters img { transform: scale(1.05); }
#main-wrapper .as-post .tl-preview-meta {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .25rem .375rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(10, 8, 18, .72);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#main-wrapper .as-post .tl-preview-meta .mr-1 { margin-right: 0 !important; }
.as-post__ph-icon,
.as-post__media > .as-post__ph { display: grid; place-items: center; }
.as-post__ph-icon { position: absolute; inset: 0 0 1.75rem; font-size: 1.75rem; color: var(--as-brand); }

.as-post__ph { --tagc: var(--as-brand); }
.as-post__media > .as-post__ph {
    font-size: 1.75rem;
    color: var(--tagc);
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tagc) 32%, transparent), transparent 70%),
        linear-gradient(160deg, var(--as-elev), var(--as-soft)) !important;
}
.as-post__ph i { transition: transform .3s var(--as-ease); }
.as-post:hover .as-post__ph i { transform: scale(1.12) rotate(-6deg); }
.as-post__ph--green { --tagc: #22c55e; }
.as-post__ph--yellow { --tagc: #eab308; }
.as-post__ph--orange { --tagc: #f97316; }
.as-post__ph--red { --tagc: #f43f5e; }
.as-post__ph--blue { --tagc: #3b82f6; }
.as-post__ph--purple { --tagc: #a855f7; }
.as-post__ph--pink { --tagc: #ec4899; }
.as-post__ph--cyan { --tagc: #06b6d4; }
.as-post__ph--lime { --tagc: #84cc16; }
.as-post__ph--sky { --tagc: #0ea5e9; }
.as-post__ph--coral { --tagc: #fb7185; }

.as-post__body { display: flex; flex-direction: column; min-width: 0; }
.as-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: 0 0 .375rem;
    padding-right: 2.5rem;
    font-size: .75rem;
    color: var(--as-ink-dim);
}
.as-post__meta .ztag { display: inline-flex; flex-wrap: wrap; gap: .375rem; }
.as-post__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.as-post__pin {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--as-brand);
    border-radius: 999px;
}
.as-post__pin i { transform: rotate(35deg); font-size: .5625rem; }
.as-post__title {
    margin: 0 0 .375rem;
    font-family: var(--as-font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.005em;
    overflow-wrap: anywhere;
}
@media (min-width: 768px) { .as-post__title { font-size: 1.0625rem; } }
.as-post__title a { color: var(--as-ink); }
.as-post__title a:hover { color: var(--as-brand); }
html.dark .as-post__title a:hover { color: color-mix(in srgb, var(--as-brand) 60%, #fff); }
.as-post__excerpt {
    display: -webkit-box;
    margin: 0 0 .75rem;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--as-ink-mute);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.as-post__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .625rem 1rem;
    margin-top: auto;
}
.as-post__foot .as-owner { flex: 1 1 auto; }
.as-post__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.as-vote {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--as-bg);
    border: 1px solid var(--as-border);
    border-radius: 999px;
}
.as-vote button,
.as-post__comments {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 1.75rem;
    padding: 0 .625rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--as-ink-mute);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    transition: color .15s, background-color .15s;
}
.as-vote button:hover { color: var(--as-ink); background: var(--as-hover); }
.as-vote .is-up.active { color: var(--as-cm-up); background: var(--as-brand-soft); }
html.dark .as-vote .is-up.active { color: color-mix(in srgb, var(--as-brand) 55%, #fff); }
.as-vote .is-down.active { color: var(--as-cm-down); background: color-mix(in srgb, var(--as-cm-down) 14%, transparent); }
.as-vote .active i::before { font-weight: 900; }
.as-post__comments { height: 2.125rem; padding: 0 .75rem; background: var(--as-bg); border: 1px solid var(--as-border); }
.as-post__comments:hover { color: var(--as-ink); border-color: var(--as-border-strong); }

.as-post__more { position: absolute; top: .75rem; right: .75rem; z-index: 3; }
#main-wrapper .as-post__more .is-more-btn { width: 2rem; height: 2rem; color: var(--as-ink-dim); background: transparent; border-color: transparent; }
#main-wrapper .as-post__more .is-more-btn:hover,
#main-wrapper .as-post__more.show .is-more-btn { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border); transform: none; }
.as-cm .dropdown-menu { min-width: 11rem; }
.as-cm button.dropdown-item { font: inherit; font-size: .875rem; }

@media (max-width: 575.98px) {
    .as-post { grid-template-columns: 76px minmax(0, 1fr); gap: .25rem .75rem; padding: .875rem; border-radius: var(--as-r-lg); }
    .as-post__media > a { border-radius: var(--as-r-md); }
    #main-wrapper .as-post .tl-preview-meta { left: 3px; right: 3px; bottom: 3px; padding: .1875rem .25rem; font-size: .5625rem; line-height: 1.2; text-align: center; white-space: normal; border-radius: var(--as-r-sm); }
    #main-wrapper .as-post .tl-preview-meta i { display: none; }
    .as-post__media > .as-post__ph, .as-post__ph-icon { font-size: 1.25rem; }
    .as-post__excerpt { -webkit-line-clamp: 3; }
    .as-post__body { display: contents; }
    .as-post__meta, .as-post__title, .as-post__excerpt { grid-column: 2; }
    .as-post__media { grid-row: 1 / span 3; }
    .as-post__foot { grid-column: 1 / -1; margin-top: .25rem; }
}
@media (max-width: 359.98px) {
    .as-post__actions { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   Post detail (reference news-item article layout)
   ========================================================================== */
.as-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) {
    .as-article { grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; }
    .as-article__aside { position: sticky; top: calc(var(--as-header-h, 4rem) + 1rem); }
}
.as-article__main { min-width: 0; }

#main-wrapper .cd-article.as-article__card {
    position: relative;
    margin: 0;
    padding: 1.5rem;
    line-height: 1.6;
    color: var(--as-ink);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
    box-shadow: var(--as-cm-shadow);
    word-break: normal;
    overflow-wrap: anywhere;
}
@media (min-width: 768px) { #main-wrapper .cd-article.as-article__card { padding: 2rem; } }

.as-article__by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0 0 1rem;
    font-size: .8125rem;
    color: var(--as-ink-dim);
    border-bottom: 1px solid var(--as-border);
}
.as-article__tags { display: inline-flex; flex-wrap: wrap; gap: .375rem; }
.as-article__tags a span {
    display: inline-flex;
    align-items: center;
    height: 1.625rem;
    padding: 0 .625rem;
    font-size: .75rem;
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: 999px;
    transition: border-color .15s;
}
.as-article__tags a:hover span { border-color: var(--as-border-strong); }
.as-article__time { display: inline-flex; align-items: center; gap: .375rem; }
#main-wrapper .cd-article .cd-more { position: static; margin-left: auto; }
#main-wrapper .cd-article .cd-more-btn { width: 2rem; height: 2rem; color: var(--as-ink-dim); background: transparent; border-color: transparent; }
#main-wrapper .cd-article .cd-more-btn:hover,
#main-wrapper .cd-article .cd-more.show .cd-more-btn { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border); transform: none; }

/* prose (reference .news-body) */
#main-wrapper .cd-article .cda-content.as-prose {
    margin: 0 0 1.5rem;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--as-ink);
}
@media (min-width: 768px) { #main-wrapper .cd-article .cda-content.as-prose { font-size: 1rem; } }
#main-wrapper .as-prose > * + * { margin-top: 1rem; }
#main-wrapper .as-prose p { margin: 0; }
#main-wrapper .as-prose img { max-width: 100%; height: auto; border-radius: var(--as-r-md); }
#main-wrapper .as-prose a { color: var(--as-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html.dark #main-wrapper .as-prose a { color: color-mix(in srgb, var(--as-brand) 60%, #fff); }
#main-wrapper .as-prose strong, #main-wrapper .as-prose b { color: var(--as-ink); font-weight: 700; }
#main-wrapper .cd-article .as-prose h1,
#main-wrapper .cd-article .as-prose h2,
#main-wrapper .cd-article .as-prose h3,
#main-wrapper .cd-article .as-prose .cm-md-h {
    margin: 1.75rem 0 .5rem;
    font-family: var(--as-font-display);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--as-ink);
}
#main-wrapper .cd-article .as-prose h1 { font-size: 1.375rem; }
#main-wrapper .cd-article .as-prose h2 { font-size: 1.25rem; }
#main-wrapper .cd-article .as-prose h3 { font-size: 1.0625rem; }
#main-wrapper .cd-article .as-prose ul,
#main-wrapper .cd-article .as-prose .cm-md-ul,
#main-wrapper .cd-article .as-prose ol { padding-left: 1.5rem; line-height: 1.65; }
#main-wrapper .cd-article .as-prose ul { list-style: disc; }
#main-wrapper .cd-article .as-prose ol { list-style: decimal; }
#main-wrapper .cd-article .as-prose blockquote {
    margin: 0;
    padding: .5rem 0 .5rem 1rem;
    font-style: italic;
    color: var(--as-ink-mute);
    background: var(--as-soft);
    border-left: 3px solid var(--as-brand);
    border-radius: 0 var(--as-r-md) var(--as-r-md) 0;
}
#main-wrapper .as-prose pre { padding: .75rem 1rem; overflow-x: auto; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: var(--as-r-md); }
#main-wrapper .as-prose :not(pre) > code { padding: .0625rem .375rem; background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-sm); }
#main-wrapper .as-prose .btn-spoil,
#main-wrapper .as-prose .spoiler { border-radius: var(--as-r-sm); }

.as-article__bar { padding-top: 1rem; border-top: 1px solid var(--as-border); }
.as-article__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.as-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.25rem;
    padding: 0 .875rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--as-ink-mute);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    transition: color .15s, background-color .15s, border-color .15s;
}
.as-pill:hover { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border-strong); }
#main-wrapper .as-pill .mr-2 { margin-right: 0 !important; }
#main-wrapper .as-pill.btn-upvote.active { color: var(--as-cm-up); background: var(--as-brand-soft); border-color: color-mix(in srgb, var(--as-brand) 45%, transparent); }
html.dark #main-wrapper .as-pill.btn-upvote.active { color: color-mix(in srgb, var(--as-brand) 55%, #fff); }
#main-wrapper .as-pill.btn-downvote.active { color: var(--as-cm-down); background: color-mix(in srgb, var(--as-cm-down) 12%, transparent); border-color: color-mix(in srgb, var(--as-cm-down) 40%, transparent); }
#main-wrapper .cd-article .is-vote .as-pill.cm-post-save.active { color: var(--as-cm-save); border-color: color-mix(in srgb, var(--as-cm-save) 45%, transparent); background: color-mix(in srgb, var(--as-cm-save) 12%, transparent); }
#main-wrapper .as-pill.active i::before { font-weight: 900; }
#main-wrapper .cd-article #cm-share-box { margin-top: .875rem; padding: .75rem .875rem; background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-lg); }

#main-wrapper #community-comments.as-article__comments { max-width: none; margin: 1.5rem 0 0; }

.as-statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 1rem; }
.as-stat { min-width: 0; padding: .625rem .75rem; background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-md); }
.as-stat dt { margin: 0 0 .25rem; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--as-ink-dim); }
.as-stat dd { margin: 0; font-size: .875rem; font-weight: 700; color: var(--as-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-stat dd i { font-size: .75rem; color: var(--as-brand); }

/* ---------- format blocks (poll / matchup / seasonal / recommend / tier list) ---------- */
#main-wrapper .cm-poll, #main-wrapper .cm-matchup, #main-wrapper .cm-seasonal, #main-wrapper .cm-rec {
    margin: 0 0 1.25rem;
    padding: 1rem;
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
}
#main-wrapper .cm-poll-head { margin-bottom: .75rem; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--as-brand); }
html.dark #main-wrapper .cm-poll-head { color: color-mix(in srgb, var(--as-brand) 60%, #fff); }
#main-wrapper .cm-poll-opt {
    gap: .75rem;
    padding: .5rem;
    color: var(--as-ink);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    transition: border-color .15s, background-color .15s;
}
#main-wrapper .cm-poll-opt:hover:not(:disabled) { border-color: var(--as-brand); background: var(--as-brand-soft); }
#main-wrapper .cm-poll-opt.is-mine { border-color: var(--as-brand); box-shadow: inset 0 0 0 1px var(--as-brand); }
#main-wrapper .cm-poll-poster img { border-radius: var(--as-r-sm); }
#main-wrapper .cm-poll-bar { background: var(--as-hover); }
#main-wrapper .cm-poll-bar > span { background: var(--as-grad); }
#main-wrapper .cm-poll-meta { color: var(--as-ink-dim); }
#main-wrapper .cm-matchup-card {
    color: var(--as-ink);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    transition: border-color .15s, background-color .15s;
}
#main-wrapper .cm-matchup-card:hover:not(:disabled) { border-color: var(--as-brand); background: var(--as-brand-soft); }
#main-wrapper .cm-matchup-card.is-mine { border-color: var(--as-brand); }
#main-wrapper .cm-matchup-card img { border-radius: var(--as-r-md); }
#main-wrapper .cm-matchup-pct { font-family: var(--as-font-display); color: var(--as-brand); }
html.dark #main-wrapper .cm-matchup-pct { color: color-mix(in srgb, var(--as-brand) 55%, #fff); }
#main-wrapper .cm-matchup-votes, #main-wrapper .cm-matchup-cta { color: var(--as-ink-dim); }
#main-wrapper .cm-matchup-vs {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--as-font-display);
    font-size: .75rem;
    color: #fff;
    background: var(--as-grad);
    border-radius: 50%;
}
#main-wrapper .cm-seasonal-rank { color: var(--as-brand); font-family: var(--as-font-display); }
#main-wrapper .cm-seasonal-list a, #main-wrapper .cm-rec-item { color: var(--as-ink); }
#main-wrapper .cm-seasonal-list a:hover, #main-wrapper .cm-rec-item:hover { color: var(--as-brand); }
#main-wrapper .cm-seasonal-list img, #main-wrapper .cm-rec-item img { border-radius: var(--as-r-sm); }
#main-wrapper .tl-view { border-radius: var(--as-r-lg); border: 1px solid var(--as-border); }
#main-wrapper .tl-view .tl-row { background: var(--as-soft); }
#main-wrapper .tl-view .tl-item { background: var(--as-hover); border-radius: var(--as-r-sm); }

/* ==========================================================================
   Create / edit
   ========================================================================== */
.as-cm-compose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) {
    .as-cm-compose { grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; }
    .as-cm-compose__aside { position: sticky; top: calc(var(--as-header-h, 4rem) + 1rem); }
}
.as-cm-compose__main { min-width: 0; }
.as-cm-form { padding: 1.5rem; }
@media (min-width: 768px) { .as-cm-form { padding: 1.75rem 2rem; } }
#main-wrapper .as-cm-form .form-group { margin-bottom: 1.375rem; }
#main-wrapper .as-cm-form label,
#main-wrapper .as-cm-form .as-label {
    display: block;
    margin: 0 0 .5rem;
    font-family: var(--as-font-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--as-ink);
}
#main-wrapper .as-cm-form label.d-flex { display: flex; gap: .5rem; }
#main-wrapper .as-cm-form .text-muted { color: var(--as-ink-dim) !important; font-family: var(--as-font); font-weight: 500; }
#main-wrapper .as-cm-form .form-control { background: var(--as-bg); }
#main-wrapper .as-cm-form .form-control:focus { border-color: var(--as-brand); box-shadow: 0 0 0 3px var(--as-brand-ring); }

#main-wrapper .cp-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
#main-wrapper .as-cm-form .cp-tag { display: inline-block; margin: 0; font-family: var(--as-font); font-weight: 600; }
#main-wrapper .cp-tag input { position: absolute; opacity: 0; pointer-events: none; }
#main-wrapper .cp-tag .ztag {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .875rem;
    font-size: .8125rem;
    background: var(--as-bg);
    border: 1px solid var(--as-border);
    border-radius: 999px;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
#main-wrapper .cp-tag:hover .ztag { border-color: var(--as-border-strong); background: var(--as-hover); }
#main-wrapper .cp-tag.is-on .ztag { background: var(--as-brand-soft); border-color: var(--as-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 15%, transparent); }
#main-wrapper .cp-tag input:focus-visible + .ztag { box-shadow: 0 0 0 3px var(--as-brand-ring); }

#main-wrapper .cp-editor { overflow: hidden; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: var(--as-r-md); }
#main-wrapper .cp-editor:focus-within { border-color: var(--as-brand); box-shadow: 0 0 0 3px var(--as-brand-ring); }
#main-wrapper .cp-fmt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: .375rem .5rem; background: var(--as-soft); border-bottom: 1px solid var(--as-border); }
#main-wrapper .cp-fmt-btn { width: 2rem; height: 2rem; color: var(--as-ink-mute); background: transparent; border: 0; border-radius: var(--as-r-sm); }
#main-wrapper .cp-fmt-btn:hover, #main-wrapper .cp-fmt-btn:focus-visible { color: var(--as-ink); background: var(--as-hover); }
#main-wrapper .cp-fmt-btn:active { color: #fff; background: var(--as-brand); }
#main-wrapper .cp-hint { margin-left: auto; font-size: .6875rem; color: var(--as-ink-dim); }
@media (max-width: 767.98px) { #main-wrapper .cp-hint { display: none !important; } }
#main-wrapper .cp-editor .cp-textarea.form-control {
    min-height: 240px;
    padding: .875rem 1rem;
    font-size: .9375rem;
    line-height: 1.6;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    resize: vertical;
}

#main-wrapper .tl-builder,
#main-wrapper .poll-builder { padding: .625rem; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: var(--as-r-lg); }
#main-wrapper .tl-brow { background: var(--as-soft); border-radius: var(--as-r-md); }
#main-wrapper .tl-rowtools { background: var(--as-hover); }
#main-wrapper .tl-tool { color: var(--as-ink-dim) !important; }
#main-wrapper .tl-tool:hover { color: var(--as-ink) !important; background: var(--as-border); }
#main-wrapper .tl-add-item { color: var(--as-ink-dim); border-color: var(--as-border-strong); border-radius: var(--as-r-sm); }
#main-wrapper .tl-add-item:hover { color: var(--as-brand); border-color: var(--as-brand); }
#main-wrapper .tl-bitem { background: var(--as-hover); }
#main-wrapper .poll-opt { background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-md); }
#main-wrapper .poll-opt-tools a { color: var(--as-ink-dim); }
#main-wrapper .poll-opt-tools a:hover { color: var(--as-ink); }
#main-wrapper .poll-rank { color: var(--as-brand); }
#main-wrapper .poll-season-bar .form-control { max-width: 150px; min-height: 2.125rem; color: var(--as-ink); background: var(--as-soft); border-color: var(--as-border); }
#main-wrapper .tl-toolbar,
#main-wrapper .poll-toolbar { flex-wrap: wrap; gap: .5rem; }
#main-wrapper .tl-toolbar .ml-2, #main-wrapper .poll-toolbar .ml-2 { margin-left: 0 !important; }
#main-wrapper .invalid-feedback { margin-top: .375rem; font-size: .8125rem; color: var(--as-danger, #e5484d); }

#tl-search-modal .modal-content { color: var(--as-ink); background: var(--as-elev); border: 1px solid var(--as-border); }
#tl-search-modal .modal-header { border-bottom-color: var(--as-border); }
#tl-search-modal .close { color: var(--as-ink-dim); }
#tl-search-modal #tl-search-input { color: var(--as-ink); background: var(--as-soft); border: 1px solid var(--as-border); }
#tl-search-modal #tl-search-input:focus { border-color: var(--as-brand); box-shadow: 0 0 0 3px var(--as-brand-ring); }
.tl-search-item { color: var(--as-ink) !important; border-radius: var(--as-r-md); }
.tl-search-item:hover { background: var(--as-hover); }
.tl-search-name em { color: var(--as-ink-dim); }
.tl-search-state { color: var(--as-brand); }

.as-cm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--as-border); }
.as-cm-actions__hint { display: inline-flex; align-items: center; font-size: .8125rem; color: var(--as-ink-mute); }
.as-cm-actions__btns { display: flex; gap: .5rem; margin-left: auto; }
@media (max-width: 479.98px) { .as-cm-actions__btns { width: 100%; } .as-cm-actions__btns .as-btn { flex: 1 1 0; } }

.as-tips { list-style: none; margin: 0; padding: .5rem 0; }
.as-tips li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4375rem 1rem; font-size: .8125rem; color: var(--as-ink-mute); }
.as-tips li + li { border-top: 1px solid var(--as-border); }
.as-tips code { padding: .125rem .375rem; font-size: .75rem; color: var(--as-ink); background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-sm); white-space: nowrap; }

/* ==========================================================================
   Super X leaderboards
   ========================================================================== */
.as-lb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 768px) and (max-width: 1199.98px) { .as-lb-grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .as-lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.as-lb { padding: 0; overflow: hidden; }
.as-lb__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem .75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--as-border);
}
.as-lb__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; font-size: .9375rem; color: #fff; background: var(--as-grad); border-radius: var(--as-r-md); box-shadow: 0 8px 20px -10px var(--as-brand); }
.as-lb__icon--comments { background: linear-gradient(135deg, #f97316, #e11d48); box-shadow: 0 8px 20px -10px #e11d48; }
.as-lb__icon--anime { background: linear-gradient(135deg, #06b6d4, #6366f1); box-shadow: 0 8px 20px -10px #6366f1; }
.as-lb__title { flex: 1 1 auto; margin: 0; font-family: var(--as-font-display); font-size: 1.0625rem; font-weight: 800; }
.as-lb__tabs { display: inline-flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 3px; list-style: none; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: 999px; }
#main-wrapper .as-lb__tab {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 .75rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--as-ink-mute);
    background: transparent;
    border: 0;
    border-radius: 999px;
}
#main-wrapper .as-lb__tab:hover { color: var(--as-ink); background: var(--as-hover); }
#main-wrapper .as-lb__tab.active { color: #fff; background: var(--as-brand); }

.as-lb__list { margin: 0; padding: .5rem; list-style: none; }
.as-lb__row {
    display: grid;
    grid-template-columns: 2rem 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .625rem .5rem;
    border-radius: var(--as-r-md);
    transition: background-color .15s;
}
.as-lb__row + .as-lb__row { border-top: 1px solid var(--as-border); }
.as-lb__row:hover { background: var(--as-hover); }
.as-lb__row--comment { grid-template-columns: 2rem 44px minmax(0, 1fr); align-items: start; }
.as-lb__row--anime { grid-template-columns: 2rem 52px minmax(0, 1fr); }
.as-lb__rank { font-family: var(--as-font-display); font-size: 1.125rem; font-weight: 800; color: var(--as-ink-dim); text-align: center; font-variant-numeric: tabular-nums; }
.as-lb__rank.is-top { background: var(--as-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-lb__row--comment .as-lb__rank { padding-top: .625rem; }
#main-wrapper .as-lb__avatar { position: relative; width: 44px; height: 44px; margin: 0; border-radius: 50%; background: var(--as-hover); }
#main-wrapper .as-lb__avatar:not(.has-cosmetics) { overflow: hidden; }
#main-wrapper .as-lb__avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.as-lb__inner { min-width: 0; }
#main-wrapper .as-lb__name {
    display: flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    margin: 0 0 .25rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--as-ink);
    overflow: hidden;
    white-space: nowrap;
}
#main-wrapper .as-lb__name:hover .as-lb__text { color: var(--as-brand); }
.as-lb__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.as-lb__rankname { flex-shrink: 0; font-size: .6875rem; font-weight: 500; color: var(--as-ink-dim); }
.as-lb__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; font-size: .75rem; color: var(--as-ink-dim); }
.as-lb__mana { display: inline-flex; align-items: center; font-weight: 700; color: var(--as-ink); }
.as-lb__go { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; font-size: .6875rem; color: var(--as-ink-dim); border-radius: 50%; }
.as-lb__go:hover { color: #fff; background: var(--as-brand); }
.as-lb__quote {
    display: -webkit-box;
    margin: 0 0 .375rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--as-ink-mute);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.as-lb__ctx { min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--as-brand); }
html.dark .as-lb__ctx { color: color-mix(in srgb, var(--as-brand) 60%, #fff); }
.as-lb__stats { display: inline-flex; gap: .625rem; white-space: nowrap; }
.as-lb__stats i { margin-right: .25rem; font-size: .6875rem; }
.as-lb__star i { color: var(--as-star, #f59e0b); }
.as-lb__poster { display: block; width: 52px; height: 74px; overflow: hidden; border-radius: var(--as-r-sm); background: var(--as-hover); }
.as-lb__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--as-ease); }
.as-lb__row:hover .as-lb__poster img { transform: scale(1.06); }
.as-lb__anime { margin: 0 0 .375rem; font-size: .875rem; font-weight: 700; line-height: 1.3; }
.as-lb__anime a { display: -webkit-box; color: var(--as-ink); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as-lb__anime a:hover { color: var(--as-brand); }
.as-lb__empty { padding: 2rem 1rem; font-size: .8125rem; text-align: center; color: var(--as-ink-dim); }
.as-lb__more { display: none; padding: 0 .75rem .75rem; }
#main-wrapper .as-lb__more .btn { height: 2.25rem; font-size: .8125rem; color: var(--as-ink); background: transparent; border: 1px solid var(--as-border); border-radius: 999px; }
#main-wrapper .as-lb__more .btn:hover { color: var(--as-brand); border-color: var(--as-brand); }
@media (max-width: 1199.98px) {
    .as-lb__list .as-lb__row:nth-child(n+5) { display: none; }
    .as-lb__list.expand .as-lb__row:nth-child(n+5) { display: grid; }
    .as-lb__more { display: block; }
    .as-lb__list.expand ~ .as-lb__more { display: none; }
}
@media (max-width: 400px) {
    .as-lb__row { grid-template-columns: 1.5rem 38px minmax(0, 1fr) auto; gap: .5rem; }
    .as-lb__row--comment { grid-template-columns: 1.5rem 38px minmax(0, 1fr); }
    .as-lb__row--anime { grid-template-columns: 1.5rem 44px minmax(0, 1fr); }
    #main-wrapper .as-lb__avatar { width: 38px; height: 38px; }
    .as-lb__poster { width: 44px; height: 62px; }
    .as-lb__rank { font-size: .9375rem; }
}

/* ==========================================================================
   My Zone + wallet cards (legacy .user-mana-card / .power-head re-skinned)
   ========================================================================== */
#main-wrapper .as-mz-card.mz-mana-card,
#main-wrapper .as-shop-wallet.mz-mana-card {
    margin: 0 0 1.5rem;
    padding: 1.25rem;
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
    overflow: visible;
}
@media (min-width: 768px) { #main-wrapper .as-mz-card.mz-mana-card { padding: 1.5rem; } }
#main-wrapper .mz-mana-card .power-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
#main-wrapper .as-mz-card .power-head { margin-bottom: 1.25rem; }
#main-wrapper .power-head .ph-avatar {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin: 0;
    border-radius: 50%;
    background: var(--as-hover);
    box-shadow: 0 0 0 3px var(--as-bg), 0 0 0 5px color-mix(in srgb, var(--as-brand) 55%, transparent);
}
#main-wrapper .power-head .ph-avatar:not(.has-cosmetics) { overflow: hidden; }
#main-wrapper .power-head .ph-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.as-mz-hero__info, .as-shop-wallet__info { flex: 1 1 220px; min-width: 0; }
#main-wrapper .power-head .ph-mana { display: flex; align-items: center; gap: .125rem; font-family: var(--as-font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--as-ink); }
#main-wrapper .power-head .ph-mana span { color: var(--as-brand); }
html.dark #main-wrapper .power-head .ph-mana span { color: color-mix(in srgb, var(--as-brand) 55%, #fff); }
#main-wrapper .power-head .ph-rank { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .25rem; font-size: .8125rem; font-weight: 600; color: var(--as-ink-mute); }
.as-mz-hero__user, .as-shop-wallet__user { margin-top: .25rem; font-size: .8125rem; color: var(--as-ink-mute); }
.as-shop-wallet__user a { font-weight: 700; color: var(--as-brand); }
#main-wrapper .mz-mana-card .umc-next,
#main-wrapper .mz-mana-card .umc-next.text-muted { margin-top: .25rem; font-size: .75rem; color: var(--as-ink-dim) !important; }
#main-wrapper .mz-profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
.as-mz-hero__cta { margin-left: auto; align-self: flex-start; }
@media (max-width: 575.98px) {
    .as-mz-hero__cta { width: 100%; margin-left: 0; }
    .as-mz-hero__cta .as-btn { width: 100%; }
    #main-wrapper .mz-profile-actions .as-btn { flex: 1 1 auto; }
}

#main-wrapper .mz-watch-strip { margin: 0 0 1rem; padding: .875rem 1rem; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: var(--as-r-lg); }
#main-wrapper .mz-watch-label { font-size: .8125rem; font-weight: 700; color: var(--as-ink); }
#main-wrapper .mz-watch-nums { color: var(--as-ink); }
#main-wrapper .mz-watch-nums span { color: var(--as-ink-dim) !important; }
#main-wrapper .mz-watch-bar { height: 6px; background: var(--as-hover); }
#main-wrapper .mz-watch-bar > span { background: var(--as-grad); }
#main-wrapper .mz-watch-meta { color: var(--as-ink-dim) !important; }

#main-wrapper .user-mana-card .umc-path { padding: 1.25rem 1rem 1.75rem; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: var(--as-r-lg); }
#main-wrapper .user-mana-card .umc-node { color: var(--as-ink-dim); }
#main-wrapper .user-mana-card .umc-node.is-reached { color: var(--as-ink); }
#main-wrapper .user-mana-card .umc-node::before { border-left-color: var(--as-border-strong); }
#main-wrapper .user-mana-card .umc-node-desc { color: var(--as-ink-dim); }
#main-wrapper .user-mana-card .umc-node.is-reached .umc-node-desc { color: var(--as-brand); }
html.dark #main-wrapper .user-mana-card .umc-node.is-reached .umc-node-desc { color: color-mix(in srgb, var(--as-brand) 55%, #fff); }
#main-wrapper .user-mana-card .umc-path-track { background: var(--as-hover); }
#main-wrapper .user-mana-card .umc-path-fill { background: var(--as-grad); }
#main-wrapper .user-mana-card .umc-path-marker.profile-avatar { border: 2px solid var(--as-brand); box-shadow: 0 0 0 2px var(--as-bg); }
#main-wrapper .user-mana-card .umc-path-marker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 575.98px) {
    #main-wrapper .user-mana-card .umc-path { padding: 1rem .5rem 1.5rem; }
}

.as-mz-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) { .as-mz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .as-mz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.as-mz-grid .as-side-card + .as-side-card { margin-top: 0; }
.as-mz-list { display: flex; flex-direction: column; }
.as-mz-list__body { flex: 1 1 auto; padding: .25rem 0; }
.as-mz-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; }
.as-mz-row + .as-mz-row { border-top: 1px solid var(--as-border); }
.as-mz-row__link { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1 1 auto; color: var(--as-ink); }
.as-mz-row__link strong { font-size: .8125rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; transition: color .15s; }
a.as-mz-row__link:hover strong { color: var(--as-brand); }
.as-mz-row__meta { font-size: .6875rem; color: var(--as-ink-dim); }
.as-mz-row__actions { display: flex; gap: .375rem; flex-shrink: 0; }
.as-mz-row__actions .as-btn { height: 1.875rem; padding-inline: .625rem; font-size: .75rem; }
.as-mz-empty { margin: 0; padding: 1.5rem 1rem; font-size: .8125rem; color: var(--as-ink-dim); text-align: center; }
#main-wrapper .as-mz-amt { flex-shrink: 0; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--as-success, #16a34a); }
#main-wrapper .as-mz-amt.neg { color: var(--as-danger, #e5484d); }

/* ==========================================================================
   Mana Shop (mana-shop.css re-skinned)
   ========================================================================== */
#main-wrapper .shop-page-wrap { position: relative; }
.as-shop-wallet__row { align-items: center; }
.as-seg { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; background: var(--as-bg); border: 1px solid var(--as-border); border-radius: 999px; }
.as-seg__item { display: inline-flex; align-items: center; gap: .375rem; height: 2rem; padding: 0 1rem; font-size: .8125rem; font-weight: 600; color: var(--as-ink-mute); border-radius: 999px; transition: color .15s, background-color .15s; }
.as-seg__item:hover { color: var(--as-ink); background: var(--as-hover); }
.as-seg__item.is-active, .as-seg__item.is-active:hover { color: #fff; background: var(--as-brand); }
@media (max-width: 575.98px) { .as-seg { width: 100%; margin-left: 0; } .as-seg__item { flex: 1 1 0; justify-content: center; } }

#main-wrapper .shop-kind-tabs { gap: .5rem; margin: 0 0 .875rem; }
#main-wrapper .shop-kind-tab { height: 2.25rem; padding: 0 1rem; font-size: .8125rem; color: var(--as-ink-mute); background: var(--as-soft); border: 1px solid var(--as-border); border-radius: 999px; }
#main-wrapper .shop-kind-tab:hover { color: var(--as-ink); border-color: var(--as-border-strong); }
#main-wrapper .shop-kind-tab.is-on { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
#main-wrapper .shop-cat-chip { height: 1.875rem; padding: 0 .75rem; color: var(--as-ink-mute); background: var(--as-soft); border: 1px solid var(--as-border); border-radius: 999px; }
#main-wrapper .shop-cat-chip:hover { color: var(--as-ink); }
#main-wrapper .shop-cat-chip.is-on { color: var(--as-ink); background: var(--as-brand-soft); border-color: var(--as-brand); }

#main-wrapper .shop-toolbar.shop-filters { padding: .875rem 1rem; background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-xl); }
#main-wrapper .shop-field { min-width: 150px; }
#main-wrapper .shop-field-label { font-size: .625rem; font-weight: 700; letter-spacing: .08em; color: var(--as-ink-dim); }
#main-wrapper .shop-select {
    min-height: 2.375rem;
    color: var(--as-ink);
    background-color: var(--as-bg);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
}
#main-wrapper .shop-select option { color: var(--as-ink); background: var(--as-elev); }
#main-wrapper .shop-search input { min-height: 2.375rem; color: var(--as-ink); background: var(--as-bg); border: 1px solid var(--as-border); border-radius: var(--as-r-md); }
#main-wrapper .shop-select:focus, #main-wrapper .shop-search input:focus { border-color: var(--as-brand); box-shadow: 0 0 0 3px var(--as-brand-ring); }
#main-wrapper .shop-search i { color: var(--as-ink-dim); }
#main-wrapper .shop-filter-go { height: 2.375rem; padding: 0 1.25rem; color: #fff; background: var(--as-brand); border-radius: var(--as-r-md); }
#main-wrapper .shop-filter-go:hover { background: var(--as-brand-hover); filter: none; }
@media (max-width: 575.98px) {
    #main-wrapper .shop-field, #main-wrapper .shop-field-search { flex: 1 1 100%; min-width: 0; }
    #main-wrapper .shop-select { max-width: none; }
    #main-wrapper .shop-filter-go { width: 100%; }
}

#main-wrapper .my-zone-card.as-shop-box { padding: 1.25rem; background: var(--as-soft); border: 1px solid var(--as-border); border-radius: var(--as-r-xl); }
#main-wrapper .as-shop-box__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0 0 1rem; font-family: var(--as-font-display); font-size: 1.0625rem; font-weight: 800; color: var(--as-ink); }
#main-wrapper .as-shop-box__title .sub { font-family: var(--as-font); font-size: .75rem; font-weight: 500; color: var(--as-ink-dim); }
#main-wrapper .shop-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
@media (max-width: 400px) { #main-wrapper .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#main-wrapper .shop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .875rem .75rem .75rem;
    color: var(--as-ink);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    transition: border-color .15s, background-color .15s, transform .2s var(--as-ease);
}
#main-wrapper .shop-card:hover { border-color: var(--as-border-strong); background: var(--as-hover); transform: translateY(-2px); }
#main-wrapper .shop-card.is-on { background: var(--as-brand-soft); border-color: var(--as-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 18%, transparent); }
#main-wrapper .shop-card.is-owned:not(.is-on) { border-color: color-mix(in srgb, var(--as-success, #16a34a) 40%, var(--as-border)); }
#main-wrapper .shop-card .sc-preview { display: flex; width: 100%; }
#main-wrapper .shop-card .shop-av { display: block; }
#main-wrapper .shop-card .sc-name { display: block; width: 100%; font-size: .8125rem; font-weight: 700; color: var(--as-ink); }
#main-wrapper .shop-card .sc-cat { display: flex; width: 100%; color: var(--as-ink-dim); }
#main-wrapper .shop-card .sc-price { color: var(--as-brand); }
html.dark #main-wrapper .shop-card .sc-price { color: color-mix(in srgb, var(--as-brand) 55%, #fff); }
#main-wrapper .shop-card .sc-price[hidden] { display: none; }
#main-wrapper #pv-history.shop-owned-chip { color: var(--as-ink-mute); background: color-mix(in srgb, var(--as-success, #16a34a) 10%, transparent); border-color: color-mix(in srgb, var(--as-success, #16a34a) 40%, var(--as-border)); }
#main-wrapper #pv-history.shop-owned-chip .pv-owned-badge { color: var(--as-success, #16a34a); background: color-mix(in srgb, var(--as-success, #16a34a) 16%, transparent); border-color: color-mix(in srgb, var(--as-success, #16a34a) 45%, transparent); }
html.dark #main-wrapper #pv-history.shop-owned-chip .pv-owned-badge { color: #86efac; }
#main-wrapper #pv-history.shop-owned-chip .pv-owned-paid { color: var(--as-brand); }
#main-wrapper .shop-card .sc-owned-badge { color: #fff; background: var(--as-success, #16a34a); border-color: transparent; }
html.dark #main-wrapper #pv-history.shop-owned-chip .pv-owned-paid { color: color-mix(in srgb, var(--as-brand) 55%, #fff); }
#main-wrapper .shop-card .sc-owned-paid { color: var(--as-brand); }
#main-wrapper .shop-av img.pfp { background: var(--as-hover); }
#main-wrapper .shop-title-preview {
    display: flex;
    color: var(--as-ink);
    background: linear-gradient(160deg, var(--as-brand-soft), color-mix(in srgb, #5d79ee 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--as-brand) 35%, transparent);
    border-radius: var(--as-r-md);
}
#main-wrapper .shop-preview { top: calc(var(--as-header-h, 4rem) + 1rem); }
#main-wrapper .shop-cm { border-color: var(--as-border); }
#main-wrapper .shop-cm .time { color: var(--as-ink-dim); }
#main-wrapper .shop-cm .body { color: var(--as-ink); }
#main-wrapper .shop-cm .acts { color: var(--as-ink-mute); }
#main-wrapper .shop-detail-name { font-family: var(--as-font-display); font-weight: 800; color: var(--as-ink); }
#main-wrapper .shop-detail-cat { color: var(--as-ink-dim); }
#main-wrapper .shop-detail-desc { color: var(--as-ink-mute); }
#main-wrapper .shop-color-label { color: var(--as-ink); }
#main-wrapper .shop-color-swatch.is-on { border-color: var(--as-ink); box-shadow: 0 0 0 2px var(--as-brand-ring); }
#main-wrapper .shop-detail-price { background: var(--as-bg); border: 1px solid var(--as-border); border-radius: var(--as-r-md); }
#main-wrapper .shop-detail-price .big { font-family: var(--as-font-display); color: var(--as-ink); }
.as-shop-bal { font-size: .75rem; color: var(--as-ink-dim); }
#main-wrapper .shop-actions .mz-btn,
#main-wrapper .shop-disabled-card .mz-btn,
#main-wrapper .mz-btn {
    height: 2.375rem;
    font-size: .8125rem;
    font-weight: 600;
    border-radius: var(--as-r-md);
    box-shadow: none;
}
#main-wrapper .mz-btn-primary { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
#main-wrapper .mz-btn-primary:hover { color: #fff; background: var(--as-brand-hover); border-color: var(--as-brand-hover); }
#main-wrapper .mz-btn-copy { color: var(--as-ink); background: transparent; border-color: var(--as-border); }
#main-wrapper .mz-btn-copy:hover { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border-strong); }
#main-wrapper .shop-refund-btn { color: var(--as-danger, #e5484d); background: color-mix(in srgb, var(--as-danger, #e5484d) 10%, transparent); border: 1px solid color-mix(in srgb, var(--as-danger, #e5484d) 40%, transparent); }
#main-wrapper #shop-msg, #main-wrapper .shop-refund-hint { color: var(--as-ink-dim) !important; }
#main-wrapper .shop-pager { border-top-color: var(--as-border); }
#main-wrapper .shop-page-btn { color: var(--as-ink-mute); background: var(--as-elev); border: 1px solid var(--as-border); border-radius: var(--as-r-md); }
#main-wrapper a.shop-page-btn:hover { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border-strong); }
#main-wrapper .shop-page-btn.is-on { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
#main-wrapper .shop-page-gap { color: var(--as-ink-dim); }
#main-wrapper .shop-disabled-overlay { background: color-mix(in srgb, var(--as-bg) 72%, transparent); border-radius: var(--as-r-xl); }
#main-wrapper .shop-disabled-card { background: var(--as-elev); border: 1px solid var(--as-border); border-radius: var(--as-r-xl); box-shadow: var(--as-shadow-pop); }
#main-wrapper .shop-disabled-title { font-family: var(--as-font-display); color: var(--as-ink); }
#main-wrapper .shop-disabled-desc { color: var(--as-ink-mute); }
.shop-confirm-card { color: var(--as-ink); background: var(--as-elev); border: 1px solid var(--as-border); border-radius: var(--as-r-xl); box-shadow: var(--as-shadow-pop); }
.shop-confirm-card h4 { font-family: var(--as-font-display); color: var(--as-ink); }
.shop-confirm-text { color: var(--as-ink-mute); }
.shop-confirm-text strong { color: var(--as-ink); }
.shop-confirm-text .muted { color: var(--as-ink-dim); }
.shop-confirm-btn { border-radius: var(--as-r-md); }
.shop-confirm-cancel { color: var(--as-ink); background: var(--as-soft); border: 1px solid var(--as-border); }
.shop-confirm-cancel:hover { color: var(--as-ink); background: var(--as-hover); }
.shop-confirm-ok { color: #fff; background: var(--as-brand); }
.shop-confirm-ok:hover { background: var(--as-brand-hover); filter: none; }

/* ==========================================================================
   Live chat (live-chat.css runs on --lv-* vars; remap them to --as-*).
   "html" prefix so it still applies once the lounge moves into #lv-fs-layer.
   ========================================================================== */
html .lv-lounge, html .lv-scrim, html .lv-toast, html .lv-ucard {
    --lv-bg: var(--as-soft);
    --lv-bg2: var(--as-elev);
    --lv-line: var(--as-border);
    --lv-line2: var(--as-border-strong);
    --lv-txt: var(--as-ink);
    --lv-muted: var(--as-ink-mute);
    --lv-dim: var(--as-ink-dim);
    --lv-pri: var(--as-brand);
    --lv-acc: color-mix(in srgb, var(--as-brand) 55%, #fff);
}
html:not(.dark) .lv-lounge, html:not(.dark) .lv-ucard { --lv-acc: var(--as-brand); }
html .lv-lounge, html .lv-toast, html .lv-ucard { font-family: var(--as-font); }
html .lv-lounge { margin: 0 0 1rem; height: min(76vh, 760px); }
html .lv-chat { border-radius: var(--as-r-xl); }
html .lv-head { padding: .75rem 1rem; }
html .lv-ttl { font-family: var(--as-font-display); letter-spacing: .04em; }
html .lv-rail .lv-card { border-radius: var(--as-r-xl); }
html .lv-row { border-radius: var(--as-r-lg); }
html .lv-row:focus-within { box-shadow: 0 0 0 3px var(--as-brand-ring); }
html .lv-send, html .lv-newpill, html .lv-ucard-bt .is-pri { color: #fff !important; }
html .lv-send { border-radius: var(--as-r-md); }
html .lv-send:hover { background: var(--as-brand-hover); }
html .lv-ucard-bt .is-pri:hover { background: var(--as-brand-hover); }
html .lv-ic.is-on { color: var(--lv-acc); background: var(--as-brand-soft); border-color: color-mix(in srgb, var(--as-brand) 40%, transparent); }
html .lv-ic[data-lvtip]:hover::after,
html .lv-friend:hover::after { color: var(--as-ink); background: var(--as-elev); }
html .lv-pin { color: var(--as-ink); background: var(--as-brand-soft); border-bottom-color: color-mix(in srgb, var(--as-brand) 30%, transparent); }
html .lv-msg:hover, html .lv-p:hover, html .lv-pop-it:hover, html .lv-pop-it.is-sel { background: var(--as-hover); }
html .lv-msg.is-editing, html .lv-msg.is-eph { background: var(--as-brand-soft); }
html .lv-av, html .lv-stack img { background: var(--as-hover); }
html .lv-body a, html .lv-body .lv-men, html .lv-msg.is-bot .lv-name,
html .lv-tab i, html .lv-card-head i, html .lv-sec i, html .lv-sys.is-automod i,
html .lv-card-horn .lv-card-h i, html .lv-card-info .lv-card-h i, html .lv-card-log .lv-card-h i,
html .lv-card-rules .lv-card-h i, html .lv-card-term .lv-card-h i,
html .lv-cmd code, html .lv-bot-tag, html .lv-rx button.is-me, html .lv-report-go,
html .lv-notice button, html .lv-editbar, html .lv-input.is-cmd, html .lv-pop-hd span.is-on,
html .lv-pop-cmd .lv-pop-it code, html .lv-kv b.is-auto { color: var(--lv-acc) !important; }
html .lv-body .lv-men, html .lv-cmd code, html .lv-bot-tag, html .lv-pop-hd span.is-on, html .lv-rx button.is-me { background: var(--as-brand-soft); }
html .lv-card-horn { background: var(--as-brand-soft); border-color: color-mix(in srgb, var(--as-brand) 40%, transparent); }
html .lv-lounge code, html .lv-ucard code, html .lv-card code, html .lv-room-hint code { color: var(--as-ink); }
html .lv-quote b, html .lv-replybar b { color: var(--as-ink); }
html .lv-name { color: var(--as-ink); }
html .lv-body { color: var(--as-ink); }
html:not(.dark) .lv-body .lv-men.is-me { color: #92400e; background: rgba(245, 158, 11, .18); }
html:not(.dark) .lv-mod { color: #6d28d9; }
html .lv-rxpick, html .lv-pop, html .lv-ucard, html .lv-toast { background: var(--as-elev); }
html .lv-toast { color: var(--as-ink); border-radius: var(--as-r-md); }
html .lv-ucard { border-radius: var(--as-r-lg); }
html .lv-ucard .lv-av { border-color: var(--as-elev); }
html .lv-ucard-bn { background: var(--as-grad); }
html .lv-pop-emo emoji-picker {
    --background: var(--as-elev);
    --button-hover-background: var(--as-brand-soft);
    --button-active-background: var(--as-brand-soft);
    --indicator-color: var(--as-brand);
    --input-border-color: var(--as-border);
    --input-font-color: var(--as-ink);
    --outline-color: var(--as-brand);
}
html .lv-gif-t { background: var(--as-hover); }
html .lv-kv { border-bottom-color: var(--as-border); }
#lv-fs-layer { background: var(--as-bg); }
@media (max-width: 575.98px) {
    html .lv-lounge { margin: 0; }
}

/* Avatar cosmetics (.avatar-clip / .has-cosmetics) and .ak-title-eq chips come from components.css. */