/* Star Rail: viewer surfaces and author surfaces have separate, explicit scopes. */
body.xy-space-site.xy-space-starrail,
[data-space-selected="starrail"],
.xy-space-comment.xy-space-starrail,
.xy-space-card.xy-space-starrail {
    --sr-ink: #26384e;
    --sr-muted: #60718a;
    --sr-paper: #f8fafd;
    --sr-soft: #eaf0f8;
    --sr-line: #cbd5e3;
    --sr-accent: #345c89;
    --sr-gold: #d8bd83;
    --sr-profile: url('../img/space-themes/starrail/head_myself_squared_bg.jpg?v=1');
    --sr-head: url('../img/space-themes/starrail/head_bg.jpg?v=1');
    --sr-tail: url('../img/space-themes/starrail/tail_bg.png?v=1');
    --xs-accent: var(--sr-accent);
    --xs-ink: var(--sr-ink);
    --xs-muted: var(--sr-muted);
    --xs-line: var(--sr-line);
    --xs-paper: var(--sr-paper);
    --xs-soft: var(--sr-soft);
}
body.xy-space-site.xy-space-starrail {
    background-color: #eaf0f7;
    /* Character-free sky: keep the tail artwork's shaped upper edge above the viewport. */
    background-image: linear-gradient(90deg, #eaf0f7c2, #eaf0f7f2 25%, #eaf0f7f2 75%, #eaf0f7c2), var(--sr-tail);
    background-size: cover, max(100vw, 700vh) auto;
    background-position: center, center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--sr-ink);
}
body.xy-space-site.xy-space-starrail .site-header {
    background: linear-gradient(90deg, rgba(8,24,50,.76), rgba(8,24,50,.15) 65%, rgba(8,24,50,.6)), var(--sr-head) center 46% / cover;
    border-bottom: 0;
    box-shadow: 0 4px 18px #07162c24;
}
body.xy-space-site.xy-space-starrail .navbar .nav-list > .menu-item > a,
body.xy-space-site.xy-space-starrail .navbar .actions .mx-display-name,
body.xy-space-site.xy-space-starrail .navbar .navbar-button { color: #f0f5ff; }
body.xy-space-site.xy-space-starrail .navbar .navbar-button:not(.aff-bell) { background-color: #213e62; }
body.xy-space-site.xy-space-starrail .navbar .navbar-button:not(.aff-bell):hover { background-color: #345c89; }
body.xy-space-site.xy-space-starrail .navbar .nav-list > .menu-item:is(.current-menu-item,.current-menu-ancestor,.current-menu-parent,.current_page_item,.current_page_parent) > a,
body.xy-space-site.xy-space-starrail .navbar .nav-list > .menu-item > a:hover {
    color: #f5dfaf; background: #ffffff16; box-shadow: none; border-radius: 7px;
}
body.xy-space-site.xy-space-starrail .burger::before,
body.xy-space-site.xy-space-starrail .burger::after { background: #f0f5ff; }
/* 顶栏搜索：半透明玻璃，透出页头星空（用户要求）。页头在亮/暗两种模式下都是深色星空图，
   所以玻璃与浅色字两种模式共用，暗色段不再单独覆盖输入框/筛选的字色。
   尺寸与对齐沿用 xy-brand.css 通用规则；展开的原生下拉列表无法透明，给实底深蓝。 */
body.xy-space-site.xy-space-starrail .xy-navsearch-box {
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 16px rgba(4,14,30,.18);
    -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
}
body.xy-space-site.xy-space-starrail .xy-navsearch-box:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
body.xy-space-site.xy-space-starrail .xy-navsearch.is-open .xy-navsearch-box {
    background: rgba(255,255,255,.18); border-color: rgba(245,223,175,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 3px rgba(245,223,175,.16);
}
body.xy-space-site.xy-space-starrail .xy-navsearch-input { color: #f0f5ff; }
body.xy-space-site.xy-space-starrail .xy-navsearch-input::-webkit-input-placeholder { color: rgba(240,245,255,.6); }
body.xy-space-site.xy-space-starrail .xy-navsearch-input::placeholder { color: rgba(240,245,255,.6); }
body.xy-space-site.xy-space-starrail .xy-navsearch-ico { color: rgba(240,245,255,.7); }
body.xy-space-site.xy-space-starrail .xy-navsearch.is-open .xy-navsearch-ico { color: #f5dfaf; }
body.xy-space-site.xy-space-starrail .xy-navsearch-cat {
    color: rgba(240,245,255,.72); border-right-color: rgba(255,255,255,.22);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0l3.5 4 3.5-4z' fill='%23c9d6e8'/%3E%3C/svg%3E");
}
body.xy-space-site.xy-space-starrail .xy-navsearch-cat:hover,
body.xy-space-site.xy-space-starrail .xy-navsearch-cat:focus { color: #f0f5ff; }
body.xy-space-site.xy-space-starrail .xy-navsearch-cat option { background-color: #10243f; color: #f0f5ff; }
body.xy-space-site.xy-space-starrail .xy-navcat-menu {
    /* 菜单在已有 backdrop-filter 的搜索框里面，自己的模糊只能看到框内，伸出框外的部分透不出页面，
       所以底色要够实，落在页面浅色内容上也读得清 */
    border-color: rgba(255,255,255,.18); background: rgba(12,30,56,.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 30px rgba(4,14,30,.35);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
body.xy-space-site.xy-space-starrail .xy-navcat-menu li { color: rgba(240,245,255,.82); }
body.xy-space-site.xy-space-starrail .xy-navcat-menu li.is-active { background: rgba(255,255,255,.12); color: #fff; }
body.xy-space-site.xy-space-starrail .xy-navcat-menu li[aria-selected="true"] { color: #f5dfaf; }
body.xy-space-site.xy-space-starrail .xy-navsearch-kbd { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); color: rgba(240,245,255,.75); }
body.xy-space-site.xy-space-starrail .xy-navsearch-go,
body.xy-space-site.xy-space-starrail .xy-ptabs-tab.active,
body.xy-space-site.xy-space-starrail .nav-pills .nav-link.active,
body.xy-space-site.xy-space-starrail .pagination .current { background: var(--sr-accent); color: #fff; border-color: var(--sr-accent); }
body.xy-space-site.xy-space-starrail .btn-primary { background: var(--sr-accent); border-color: var(--sr-accent); color: #fff; }
body.xy-space-site.xy-space-starrail .posts-wrapper .post-grid,
body.xy-space-site.xy-space-starrail .widget-area .widget {
    background-color: var(--sr-paper); border: 1px solid var(--sr-line); box-shadow: 0 6px 24px #102c5010;
}
body.xy-space-site.xy-space-starrail .posts-wrapper .post-grid:hover { border-color: #a18b61; box-shadow: 0 8px 28px #102c5020; }
body.xy-space-site.xy-space-starrail .posts-wrapper .post-grid:hover .entry-title a,
body.xy-space-site.xy-space-starrail .xy-ptabs-title { color: var(--sr-accent); }

/* Let carousel previews fade into the actual artwork, rather than a solid white mask. */
body.xy-space-site.xy-space-starrail .xy-featured-peek::after { background: none; }
body.xy-space-site.xy-space-starrail .xy-featured-peek img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 72%);
    mask-image: linear-gradient(to right, transparent, #000 72%);
}
body.xy-space-site.xy-space-starrail .xy-featured-peek-next img {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 72%);
    mask-image: linear-gradient(to left, transparent, #000 72%);
}
body.xy-space-site.xy-space-starrail .xy-featured-dots button { background: #879bb3; }
body.xy-space-site.xy-space-starrail .xy-featured-dots button.is-active { background: #345c89; }
body.xy-space-site.xy-space-starrail .xy-featured-search { background: #102746cc; border-color: #b3c7e178; }
body.xy-space-site.xy-space-starrail .xy-featured-search button { background: #dfc898; color: #243550; }
body.xy-space-site.xy-space-starrail .xy-featured-search button:hover { background: #f0dfbc; }
body.xy-space-site.xy-space-starrail .xy-ptabs-tab { color: var(--sr-ink); background: var(--sr-soft); }
body.xy-space-site.xy-space-starrail .xy-ptabs-tab.active { color: #fff; background: #345c89; box-shadow: 0 3px 10px #10274620; }
body.xy-space-site.xy-space-starrail .xy-ptabs-tab:not(.active):hover { background: var(--sr-line); }
body.xy-space-site.xy-space-starrail :is(.xy-ptabs-more,.xy-ptabs-tags,.xy-ptabs-notice) { color: var(--sr-muted); }
body.xy-space-site.xy-space-starrail .xy-ptabs-all { background: var(--sr-paper); color: var(--sr-ink); border: 1px solid var(--sr-line); }
body.xy-space-site.xy-space-starrail .xy-ptabs-all:hover { background: var(--sr-soft); color: var(--sr-accent); }
body.xy-space-site.xy-space-starrail .site-footer {
    background: linear-gradient(90deg, #102746f2, #102746c9, #102746f2), var(--sr-head) center / cover;
    border: 0; color: #d4e0f1;
}
body.xy-space-site.xy-space-starrail .site-footer .footer-copyright { background: transparent; border: 0; padding-top: 38px; padding-bottom: 38px; }
body.xy-space-site.xy-space-starrail .site-footer :is(a,p,h3,h4,.text-muted) { color: #d4e0f1 !important; }
body.xy-space-site.xy-space-starrail .site-footer a:hover { color: #f5dfaf !important; }
body.xy-space-site.xy-space-starrail .rollbar { background: transparent; box-shadow: none; }
body.xy-space-site.xy-space-starrail .rollbar :is(.rollbar-item,.actions a) { background: var(--sr-paper); color: var(--sr-accent); border: 1px solid var(--sr-line); border-radius: 10px; }
body.xy-space-site.xy-space-starrail .rollbar .back-to-top::before { display: none; }

/* Profile: a large character cover and a readable lower information strip. */
body.xy-space-site.xy-space-starrail .xy-utop { padding-top: 30px; }
body.xy-space-site.xy-space-starrail .xy-utop-card {
    position: relative; isolation: isolate; display: grid;
    grid-template-columns: minmax(200px,.9fr) minmax(0,1.45fr);
    gap: 26px 24px; padding: 120px 30px 26px; min-height: 340px;
    background-color: #102541;
    background-image: linear-gradient(90deg, #0c1e37 20%, rgba(12,30,55,.98) 30%, rgba(12,30,55,.70) 46%, rgba(12,30,55,.10) 76%), var(--sr-profile);
    background-size: auto, max(760px, 78%) auto; background-position: center, right 27%; background-repeat: no-repeat;
    border: 1px solid #b4a078; border-radius: 16px; box-shadow: 0 14px 36px #0c203b24;
}
body.xy-space-site.xy-space-starrail .xy-utop-card::before {
    content: none;
}
/* Decoration stays in the cover's open sky; its own clip never cuts avatar frames. */
.xy-utop-meteors { display: none; }
:is(body.xy-space-site.xy-space-starrail, [data-space-selected="starrail"]) .xy-utop-meteors {
    display: block; position: absolute; left: max(26%, 330px); right: 43%; top: 7%; height: 43%;
    overflow: hidden; pointer-events: none; z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent);
    --sr-flight-x: -280px; --sr-flight-y: 149px;
}
:is(body.xy-space-site.xy-space-starrail, [data-space-selected="starrail"]) .xy-utop-meteors > i {
    position: absolute; left: 85%; top: 8%; width: 165px; height: 3px; opacity: 0;
    background: linear-gradient(90deg, #fff4d8, #bce5ff 14%, #72bbf76b 48%, transparent);
    border-radius: 50%; transform: rotate(-28deg); transform-origin: left center;
    animation: xy-sr-meteor 6.8s linear infinite; animation-delay: -.6s;
    filter: drop-shadow(0 0 4px #8ecbffbf);
}
:is(body.xy-space-site.xy-space-starrail, [data-space-selected="starrail"]) .xy-utop-meteors > i::after {
    content: ''; position: absolute; left: -3px; top: -3px; width: 9px; height: 9px;
    background: #fff4d8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
:is(body.xy-space-site.xy-space-starrail, [data-space-selected="starrail"]) .xy-utop-meteors > i:nth-child(2) {
    left: 95%; top: 24%; width: 125px; height: 2px;
    animation-duration: 8.4s; animation-delay: -3.2s;
}
:is(body.xy-space-site.xy-space-starrail, [data-space-selected="starrail"]) .xy-utop-meteors > i:nth-child(3) {
    left: 70%; top: 3%; width: 105px; height: 2px;
    animation-duration: 9.6s; animation-delay: -5.3s;
}
:is(body.xy-space-site.xy-space-starrail, [data-space-selected="starrail"]) .xy-utop-meteors > i:nth-child(4) {
    left: 98%; top: 38%; width: 145px; height: 2px;
    animation-duration: 7.6s; animation-delay: -1.6s;
}
@keyframes xy-sr-meteor {
    0% { opacity: 0; transform: translate(0,0) rotate(-28deg); }
    4% { opacity: 1; }
    20% { opacity: .8; }
    30%, 100% { opacity: 0; transform: translate(var(--sr-flight-x),var(--sr-flight-y)) rotate(-28deg); }
}
body.xy-space-site.xy-space-starrail .xy-utop-id { grid-column: 1; align-self: end; min-height: 100px; }
body.xy-space-site.xy-space-starrail .xy-utop-name { color: #fff; font-size: 24px; line-height: 1.5; overflow-wrap: anywhere; }
body.xy-space-site.xy-space-starrail .xy-utop-mail { color: #c7d5e9; }
body.xy-space-site.xy-space-starrail .xy-utop-avatar { margin-right: 22px; }
body.xy-space-site.xy-space-starrail .xy-utop-medal {
    grid-column: 1; grid-row: 2; min-width: 0; margin: 0;
    background: #0b1b32e8; border: 1px solid #69809c; border-radius: 10px; padding: 17px;
}
body.xy-space-site.xy-space-starrail .xy-utop-medal-txt b { color: #e6d3ad; }
body.xy-space-site.xy-space-starrail .xy-utop-medal-txt em { color: #bacbe0; }
body.xy-space-site.xy-space-starrail .xy-utop-medal-face { background: transparent; padding: 0; gap: 6px; }
body.xy-space-site.xy-space-starrail .xy-utop-medal-face.is-empty { color: #e6d3ad; background: #284364; }
body.xy-space-site.xy-space-starrail .xy-utop-side { grid-column: 2; grid-row: 2; gap: 12px; }
body.xy-space-site.xy-space-starrail .xy-utop-stat {
    background: #0b1b32e8; border: 1px solid #69809c; padding: 14px 18px; color: #fff !important;
    border-radius: 10px; backdrop-filter: blur(10px);
}
body.xy-space-site.xy-space-starrail .xy-utop-stat:hover { background: #193554f5; border-color: #d8bd83; }
body.xy-space-site.xy-space-starrail .xy-utop-stat-label,
body.xy-space-site.xy-space-starrail .xy-utop-stat-lv > em,
body.xy-space-site.xy-space-starrail .xy-utop-stat-sub { color: #c6d5e8; }
body.xy-space-site.xy-space-starrail .xy-utop-stat-num { color: #f5dfaf; font-size: 29px; }
body.xy-space-site.xy-space-starrail .xy-utop-bar { background: #ffffff25; }
body.xy-space-site.xy-space-starrail .xy-utop-act { position: absolute; right: 20px; top: 20px; }
body.xy-space-site.xy-space-starrail .xy-utop-logout { background: #112440e8; color: #ecdfc3 !important; border-color: #8590a0; }
body.xy-space-site.xy-space-starrail .xy-utop-act .navbar-toggler { color: #f5dfaf; background: #112440; border: 1px solid #8590a0; }

/* Personal center panels and functional icons; original links and events are retained. */
body.xy-space-site.xy-space-starrail .user-top-container .card {
    background-color: var(--sr-paper); border: 1px solid var(--sr-line); border-radius: 12px; color: var(--sr-ink);
}
body.xy-space-site.xy-space-starrail .user-top-container .card-header {
    background: linear-gradient(90deg, #ffffffed, #ffffffed), url('../img/space-themes/starrail/head_tab_bg.jpg?v=1') center / cover;
    border-bottom: 1px solid var(--sr-line); color: var(--sr-ink);
}
body.xy-space-site.xy-space-starrail .user-top-container .card-title,
body.xy-space-site.xy-space-starrail .user-top-container .card-body > h5 { color: var(--sr-ink); }
/* The sticky sidebar inserts a wrapper; never depend on a direct-child card. */
body.xy-space-site.xy-space-starrail .menu-column .xy-space-wallet-panel {
    background: linear-gradient(110deg, #102746ed, #102746b8), var(--sr-head) center / cover, #102746;
    color: #eaf2ff; border-color: #8794a6;
}
body.xy-space-site.xy-space-starrail .menu-column .xy-space-wallet-panel .card-body { padding: 22px 20px; }
body.xy-space-site.xy-space-starrail .menu-column .xy-space-wallet-panel .text-muted { color: #d4e0f1 !important; }
body.xy-space-site.xy-space-starrail .menu-column .author-fields { color: #dbe7f6; }
body.xy-space-site.xy-space-starrail .menu-column .author-fields .badge { background: #213e62; color: #f7dfac; padding: 8px; font-size: 14px; }
body.xy-space-site.xy-space-starrail .menu-column .author-fields .d-block { color: #dbe7f6; font-size: 12px; margin-top: 9px; }
body.xy-space-site.xy-space-starrail .go-user-qiandao {
    border: 1px solid #e3cca2; background: #dfc898; color: #243550; min-height: 42px;
    box-shadow: 0 4px 16px #0002; border-radius: 7px;
}
body.xy-space-site.xy-space-starrail .go-user-qiandao:disabled { opacity: .7; }
body.xy-space-site.xy-space-starrail #sidebarNav .card { background-image: var(--sr-tail); background-size: 100% auto; background-position: bottom; background-repeat: no-repeat; }
body.xy-space-site.xy-space-starrail #sidebarNav .card-body { padding: 24px 16px 68px; }
body.xy-space-site.xy-space-starrail #sidebarNav .nav-link:not(.nav-aff-glow) { color: var(--sr-ink); border-radius: 7px; border: 1px solid transparent; min-height: 45px; margin-bottom: 4px; }
body.xy-space-site.xy-space-starrail #sidebarNav .nav-link:not(.nav-aff-glow).active,
body.xy-space-site.xy-space-starrail #sidebarNav .nav-link:not(.nav-aff-glow):hover { color: var(--sr-accent); background: var(--sr-soft); border-color: var(--sr-line); box-shadow: none; }
/* Use each entry's existing functional glyph, including entries without themed artwork. */
body.xy-space-site.xy-space-starrail #sidebarNav .nav-link:not(.nav-aff-glow) > i {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px;
    width: 24px; height: 24px; margin-right: 10px; vertical-align: middle;
    font-size: 17px; color: inherit;
}
body.xy-space-site.xy-space-starrail .user-coin-card .card {
    background: linear-gradient(90deg, #102746f5 18%, #102746b3 80%), var(--sr-head) right center / cover !important; border: 1px solid #a89a7e; color: #eff4ff;
}
body.xy-space-site.xy-space-starrail .user-coin-card h3 { color: #f5dfaf; font-size: 21px; overflow-wrap: anywhere; }
body.xy-space-site.xy-space-starrail .user-coin-card .media { position: relative; padding-bottom: 14px; }
body.xy-space-site.xy-space-starrail .user-coin-card .media > .d-inline-block { position: absolute; right: 0; bottom: -12px; opacity: .6; }
body.xy-space-site.xy-space-starrail .user-coin-card p { color: #d9e5f5; }
body.xy-space-site.xy-space-starrail .user-coin-card .stat { color: #f5dfaf; background: #102746d9; }
body.xy-space-site.xy-space-starrail .xy-level-hero { padding: 25px; border-radius: 10px; background: linear-gradient(90deg, #102746ed, #102746aa), var(--sr-head) right center / cover; color: #fff; }
body.xy-space-site.xy-space-starrail .xy-level-exp,
body.xy-space-site.xy-space-starrail .xy-level-exp b { color: #f4e1b7; }
body.xy-space-site.xy-space-starrail .xy-level-hero .text-muted { color: #c6d5e8 !important; }
body.xy-space-site.xy-space-starrail .xy-level-progress { height: 9px; background: var(--sr-line); border-radius: 20px; }
body.xy-space-site.xy-space-starrail .xy-level-task { border-color: var(--sr-line); background-color: var(--sr-soft); }
body.xy-space-site.xy-space-starrail .pay_coin_box:hover { border-color: #a79162; }
body.xy-space-site.xy-space-starrail .pay_coin_box .text-warning { color: #806026 !important; }
body.xy-space-site.xy-space-starrail .navbar .dropdown-menu[aria-labelledby="dropdownUserProfile"] {
    background: linear-gradient(180deg, #ffffff00, var(--sr-paper) 100px), var(--sr-head) center top / auto 120px no-repeat, var(--sr-paper);
    border: 1px solid var(--sr-line); padding-top: 70px; border-radius: 12px; box-shadow: 0 16px 40px #071c3b30;
}
body.xy-space-site.xy-space-starrail .navbar .xy-udrop-tile { background: var(--sr-soft); border-color: var(--sr-line); }
body.xy-space-site.xy-space-starrail .xy-space-entry { color: var(--sr-accent); background: var(--sr-soft); }
body.xy-space-site.xy-space-starrail #respond .comment-form-comment { padding: 14px; border: 1px solid var(--sr-line); border-radius: 10px; background: var(--sr-paper); }
body.xy-space-site.xy-space-starrail #respond textarea { color: var(--sr-ink); background: var(--sr-paper); border-color: var(--sr-line); }
body.xy-space-site.xy-space-starrail #respond #submit { background: var(--sr-accent); color: #fff; }

/* Author comment skin: it works for guests and alongside other authors' skins. */
.comments-list .comment-inner.xy-space-comment.xy-space-starrail,
.xy-space-comment-demo.xy-space-starrail {
    position: relative; display: flow-root; box-sizing: border-box; min-height: 145px;
    margin: 8px 0 16px; padding: 26px 126px 23px 22px; border: 1px solid #b9c7d9;
    border-radius: 10px;
    background-color: #f6f9fd;
    background-image: url('../img/space-themes/starrail/comment.png?v=1'), linear-gradient(120deg, #f9fbff, #eaf1fa);
    background-size: 820px auto, auto; background-position: right -106px bottom, center; background-repeat: no-repeat;
    box-shadow: 0 4px 15px #173a6610;
}
.comments-list .xy-space-comment.xy-space-starrail > .comment-body { margin-left: 60px; }
.comments-list .xy-space-comment.xy-space-starrail .nickname { color: #3d5372; line-height: 1.65; }
.comments-list .xy-space-comment.xy-space-starrail .comment-time { color: #61748d; }
.comments-list .xy-space-comment.xy-space-starrail .comment-text { overflow-wrap: anywhere; }
.comments-list .xy-space-comment.xy-space-starrail .comment-text p { color: #2e4057; }
.comments-list .xy-space-comment.xy-space-starrail > .reply { top: 8px; right: 12px; }
.comments-list .xy-space-comment.xy-space-starrail .comment-awaiting-moderation { position: static; }
.simple-ulike-user-card.xy-space-card.xy-space-starrail {
    box-sizing: border-box; position: relative; min-width: 280px; max-width: min(350px, calc(100vw - 24px));
    padding: 85px 20px 20px; border: 1px solid #9b8b68; border-radius: 13px;
    background-color: var(--sr-paper); color: var(--sr-ink);
    background-image: linear-gradient(180deg, transparent 38px, var(--sr-paper) 100px), var(--sr-head);
    background-size: auto, auto 105px; background-position: center top; background-repeat: no-repeat;
    box-shadow: 0 14px 38px #081d3b38;
}
.xy-space-card.xy-space-starrail .simple-ulike-card-header { margin-bottom: 20px; }
.xy-space-card.xy-space-starrail .simple-ulike-card-name { color: var(--sr-ink); }
.xy-space-card.xy-space-starrail .simple-ulike-card-stats { border-top: 1px solid var(--sr-line); padding-top: 14px; }
.xy-space-card.xy-space-starrail::after {
    content: ''; position: absolute; pointer-events: none; right: 6px; top: 6px; width: 82px; height: 62px;
    background: url('../img/space-themes/starrail/sticker.png?v=1') center / contain no-repeat;
}

/* Wardrobe details retain their selected theme even before the viewer tries it on. */
[data-space-selected="starrail"] .xy-space-product { border-color: #aebbd0; border-radius: 14px; }
[data-space-selected="starrail"] .xy-space-cover { min-height: 335px; background: #0b203b; }
[data-space-selected="starrail"] .xy-space-cover > img { width: 82%; object-position: center 25%; }
[data-space-selected="starrail"] .xy-space-cover::before { background: linear-gradient(90deg, #0b203b 4%, #0b203bf0 29%, #0b203b45 65%, transparent); }
[data-space-selected="starrail"] .xy-space-cover-copy { position: relative; z-index: 1; padding: 58px 35px; max-width: 62%; }
body .xy-space-shop[data-space-selected="starrail"] .xy-space-cover > .xy-utop-meteors { left: 21%; right: 53%; top: 12%; height: 70%; --sr-flight-x: -180px; --sr-flight-y: 96px; }
[data-space-selected="starrail"] .xy-space-edition { color: #e4c793; letter-spacing: .15em; }
[data-space-selected="starrail"] .xy-space-cover-copy h3 { color: #fff; letter-spacing: .06em; }
[data-space-selected="starrail"] .xy-space-cover-copy p { color: #d1e0f3; }
[data-space-selected="starrail"] .xy-space-cover-tag { background: #071a3299; color: #ead7b1; border-color: #c7ac7c88; }
[data-space-selected="starrail"] .xy-space-btn:hover { background: #25476e; box-shadow: 0 5px 14px #102e5426; }
[data-space-selected="starrail"] .xy-space-btn.is-secondary:hover { background: var(--sr-soft); }
[data-space-selected="starrail"] .xy-space-profile-demo {
    position: relative; isolation: isolate;
    min-height: 210px; border-color: #72869f; padding: 38px 44px; color: #fff;
    overflow: hidden;
    background: radial-gradient(ellipse at 22% 55%, #193a58, transparent 65%), #0b203b;
}
[data-space-selected="starrail"] .xy-space-profile-demo::before { content: ''; position: absolute; inset: 0 0 0 auto; width: 75%; max-width: 800px; background: var(--sr-profile) center 22% / cover no-repeat; opacity: .86; -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%); mask-image: linear-gradient(90deg, transparent, #000 42%); pointer-events: none; z-index: -1; }
body .xy-space-shop[data-space-selected="starrail"] .xy-space-profile-demo > .xy-utop-meteors { left: 9%; right: 56%; top: 4%; height: 80%; --sr-flight-x: -160px; --sr-flight-y: 85px; }
[data-space-selected="starrail"] .xy-space-profile-demo > :not(.xy-utop-meteors) { position: relative; z-index: 1; }
[data-space-selected="starrail"] .xy-space-demo-identity { display: flex; align-items: center; gap: 34px; min-width: 0; max-width: 65%; }
[data-space-selected="starrail"] .xy-space-demo-framed-avatar { flex: 0 0 72px; width: 72px; height: 72px; margin: 0 8px; }
[data-space-selected="starrail"] .xy-space-demo-framed-avatar .xy-af { width: 72px; height: 72px; }
[data-space-selected="starrail"] .xy-space-demo-framed-avatar img { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
[data-space-selected="starrail"] .xy-space-demo-profile-copy { min-width: 0; text-shadow: 0 2px 10px #06132788; }
[data-space-selected="starrail"] .xy-space-demo-profile-copy b { font-size: 21px; line-height: 1.4; }
[data-space-selected="starrail"] .xy-space-demo-profile-copy small { margin-top: 8px; font-size: 12px; }
[data-space-selected="starrail"] .xy-space-demo-frame-caption { display: block; margin-top: 16px; font-size: 11px; color: #e1cda6; line-height: 1.6; }
[data-space-selected="starrail"] .xy-space-profile-demo small { color: #cbdaec; }
[data-space-selected="starrail"] .xy-space-demo-avatar { color: #d9c399; background: #122e51; border-color: #c9b184; }
[data-space-selected="starrail"] .xy-space-demo-avatar > i { font-size: 22px; }
[data-space-selected="starrail"] .xy-space-demo-pill { background: #132b49dd; border-color: #ac9770; color: #f5dfaf; }
.xy-space-feature-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.xy-space-feature-grid > div { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; gap: 6px; background: var(--sr-soft); border: 1px solid var(--sr-line); border-radius: 8px; font-size: 11px; color: var(--sr-ink); }
.xy-space-feature-grid > div > i { display: flex; align-items: center; justify-content: center; width: 48px; height: 40px; font-size: 23px; color: var(--sr-accent); }
.xy-space-comment-demo.xy-space-starrail { margin: 0; padding: 24px 84px 22px 18px; min-height: 210px; background-size: 680px auto, auto; background-position: right -95px bottom, center; }
.xy-space-comment-demo.xy-space-starrail b,
.xy-space-comment-demo.xy-space-starrail p { color: var(--sr-ink); }
.xy-space-comment-demo.xy-space-starrail small { color: var(--sr-muted); }
.simple-ulike-user-card.xy-space-card-demo.xy-space-starrail { width: 100%; min-width: 0; max-width: none; padding: 78px 18px 20px; min-height: 210px; box-shadow: none; }
.xy-space-card-demo.xy-space-starrail b { color: var(--sr-ink); }
.xy-space-card-demo.xy-space-starrail small,
.xy-space-card-demo.xy-space-starrail .xy-space-demo-stats { color: var(--sr-muted); }
.xy-space-card-demo.xy-space-starrail .xy-space-demo-stats { border-color: var(--sr-line); }

/* Dark mode preserves semantic LV/medal/like colors; only content surfaces change. */
body.dark-open.xy-space-site.xy-space-starrail,
.dark-open [data-space-selected="starrail"],
.dark-open .xy-space-comment.xy-space-starrail,
.dark-open .xy-space-card.xy-space-starrail {
    --sr-paper: #14243b; --sr-soft: #1e3552; --sr-line: #405574;
    --sr-ink: #e7effb; --sr-muted: #b0c1d8; --sr-accent: #a5c8f5;
}
body.dark-open.xy-space-site.xy-space-starrail { background-color: #091526; background-image: linear-gradient(90deg, #09152655, #091526e6 25%, #091526e6 75%, #09152655), var(--sr-tail); }
.dark-open [data-space-selected="starrail"] .xy-space-btn:not(.is-secondary),
body.dark-open.xy-space-site.xy-space-starrail .btn-primary,
body.dark-open.xy-space-site.xy-space-starrail #respond #submit,
body.dark-open.xy-space-site.xy-space-starrail .xy-ptabs-tab.active,
body.dark-open.xy-space-site.xy-space-starrail .nav-pills .nav-link.active,
body.dark-open.xy-space-site.xy-space-starrail .pagination .current { background: #345c89; color: #fff; border-color: #7895bb; }
body.dark-open.xy-space-site.xy-space-starrail .user-top-container .text-muted { color: var(--sr-muted) !important; }
body.dark-open.xy-space-site.xy-space-starrail .pay_coin_box .text-warning { color: #e8cd9f !important; }
body.dark-open.xy-space-site.xy-space-starrail .user-top-container .card-header { background: url('../img/space-themes/starrail/head_tab_bg.jpg?v=1') center / cover; }
body.dark-open.xy-space-site.xy-space-starrail .xy-featured-dots button.is-active { background: #e0c796; }
body.dark-open.xy-space-site.xy-space-starrail .user-top-container :is(.text-body,.text-dark) { color: var(--sr-ink) !important; }
body.dark-open.xy-space-site.xy-space-starrail .user-top-container :is(.form-control,.form-control:focus) {
    background: #0c1c30; color: #e7effb; border-color: #617a9b;
}
body.dark-open.xy-space-site.xy-space-starrail .user-top-container .form-control::placeholder { color: #b0c1d8; opacity: 1; }
body.dark-open.xy-space-site.xy-space-starrail .user-top-container :is(.table,.card-body > p,.card-body > label) { color: var(--sr-ink); }
body.dark-open.xy-space-site.xy-space-starrail .user-top-container .btn-outline-primary { color: #c9ddfa; border-color: #7895bb; }
body.dark-open.xy-space-site.xy-space-starrail .user-top-container .btn-outline-danger { color: #ffb3b3; border-color: #d78085; }
body.dark-open.xy-space-site.xy-space-starrail .user-top-container .btn-outline-danger:hover { color: #fff; background: #8e3543; }
body.dark-open.xy-space-site.xy-space-starrail .navbar .xy-navsearch-go { background: #345c89; color: #fff; }
body.dark-open.xy-space-site.xy-space-starrail .navbar .dropdown-menu[aria-labelledby="dropdownUserProfile"] :is(.xy-udrop-tile,.dropdown-item) { color: var(--sr-ink); }
.dark-open .xy-space-card.xy-space-starrail .simple-ulike-card-loading { color: var(--sr-muted); }
.dark-open .xy-space-card.xy-space-starrail .simple-ulike-stat-item:hover { background: var(--sr-soft); }
.dark-open .comments-list .xy-space-comment.xy-space-starrail :is(.reply a,.xy-cdel) { color: #c9ddfa; }
.dark-open .comments-list .comment-inner.xy-space-comment.xy-space-starrail,
.dark-open .xy-space-comment-demo.xy-space-starrail {
    border-color: #526681; background-color: #14243b;
    background-image: url('../img/space-themes/starrail/sticker.png?v=1'), linear-gradient(120deg, #14243b, #1b304c);
    background-size: 140px auto, auto; background-position: right 4px bottom 6px, center;
}
.dark-open .comments-list .xy-space-comment.xy-space-starrail .nickname,
.dark-open .comments-list .xy-space-comment.xy-space-starrail .comment-text p { color: #e7effb; }
.dark-open .comments-list .xy-space-comment.xy-space-starrail .comment-time { color: #b0c1d8; }
.dark-open [data-space-selected="starrail"] .xy-space-status.is-error { color: #ffb3b3; }

[data-space-selected="starrail"] .xy-space-frame-gift { display: flex; align-items: center; gap: 26px; margin: 0 28px 22px; padding: 20px 24px; border: 1px solid var(--sr-line); border-radius: 12px; background: var(--sr-soft); color: var(--sr-ink); }
[data-space-selected="starrail"] .xy-space-frame-gift > img { flex: 0 0 112px; width: 112px; height: 112px; object-fit: contain; }
[data-space-selected="starrail"] .xy-space-frame-gift h4 { margin: 8px 0; font-size: 19px; color: var(--sr-ink); }
[data-space-selected="starrail"] .xy-space-frame-gift .xy-space-edition { color: var(--sr-accent); letter-spacing: .06em; }
[data-space-selected="starrail"] .xy-space-frame-gift p { margin: 0 0 8px; font-size: 14px; line-height: 1.8; color: var(--sr-muted); }
[data-space-selected="starrail"] .xy-space-frame-gift a { font-size: 14px; color: var(--sr-accent); }
@media (max-width: 991px) {
    body.xy-space-site.xy-space-starrail .xy-utop-meteors { left: 30%; right: 30%; top: 16px; height: 88px; --sr-flight-x: -170px; --sr-flight-y: 90px; }
    body.xy-space-site.xy-space-starrail .xy-utop-card { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); padding: 105px 24px 22px; gap: 18px; }
    body.xy-space-site.xy-space-starrail .xy-utop-id { grid-column: 1 / -1; max-width: 55%; }
    body.xy-space-site.xy-space-starrail .xy-utop-stat { padding: 12px; }
    body.xy-space-site.xy-space-starrail .xy-utop-side { flex-wrap: nowrap; }
    body.xy-space-site.xy-space-starrail .xy-utop-stat { flex: 1 1 0; }
}
@media (max-width: 767px) {
    [data-space-selected="starrail"] .xy-space-frame-gift { flex-direction: column; align-items: flex-start; gap: 12px; margin: 0 18px 18px; padding: 18px; }
    body.xy-space-site.xy-space-starrail .xy-utop-meteors { left: 5%; right: 32%; top: 18px; height: 155px; --sr-flight-x: -190px; --sr-flight-y: 101px; }
    :is(body.xy-space-site.xy-space-starrail, [data-space-selected="starrail"]) .xy-utop-meteors > i { width: 110px; }
    body.xy-space-site.xy-space-starrail .xy-utop { padding-top: 16px; }
    body.xy-space-site.xy-space-starrail .xy-utop-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 210px 18px 18px; background-image: linear-gradient(180deg, #0c1e3710 100px, #0c1e37 295px), var(--sr-profile); background-size: auto, 100% auto; background-position: center, right top; border-radius: 12px; }
    body.xy-space-site.xy-space-starrail .xy-utop-id { max-width: none; width: 100%; align-self: auto; min-height: 80px; }
    body.xy-space-site.xy-space-starrail .xy-utop-name { font-size: 21px; }
    body.xy-space-site.xy-space-starrail .xy-utop-medal { flex: 0 0 auto; padding: 12px 14px; }
    body.xy-space-site.xy-space-starrail .xy-utop-side { flex: 0 0 auto; flex-wrap: wrap; }
    body.xy-space-site.xy-space-starrail .xy-utop-stat { flex: 1 1 120px; }
    body.xy-space-site.xy-space-starrail .xy-utop-stat-sub { white-space: normal; line-height: 1.6; }
    body.xy-space-site.xy-space-starrail .xy-utop-act { top: 16px; right: 14px; }
    body.xy-space-site.xy-space-starrail .xy-utop-logout { display: none; }
    body.xy-space-site.xy-space-starrail #sidebarNav .card-body { padding-bottom: 70px; }
    [data-space-selected="starrail"] .xy-space-cover { min-height: 350px; }
    [data-space-selected="starrail"] .xy-space-cover > img { width: 100%; object-position: center top; }
    [data-space-selected="starrail"] .xy-space-cover::before { background: linear-gradient(180deg, #0b203b05 10%, #0b203b66 48%, #0b203b 90%); }
    [data-space-selected="starrail"] .xy-space-cover-copy { max-width: 100%; padding: 205px 22px 26px; }
    [data-space-selected="starrail"] .xy-space-cover-copy h3 { margin: 10px 0; font-size: 32px; }
    [data-space-selected="starrail"] .xy-space-cover-copy p { max-width: none; margin-bottom: 18px; }
    [data-space-selected="starrail"] .xy-space-profile-demo { padding: 54px 24px 30px; min-height: 210px; }
    [data-space-selected="starrail"] .xy-space-profile-demo::before { width: 100%; max-width: none; background-position: 65% 20%; opacity: .48; }
    [data-space-selected="starrail"] .xy-space-demo-identity { max-width: 100%; gap: 24px; }
    [data-space-selected="starrail"] .xy-space-demo-framed-avatar { flex-basis: 56px; width: 56px; height: 56px; margin: 0 2px; }
    [data-space-selected="starrail"] .xy-space-demo-framed-avatar .xy-af,
    [data-space-selected="starrail"] .xy-space-demo-framed-avatar img { width: 56px; height: 56px; }
    [data-space-selected="starrail"] .xy-space-demo-profile-copy b { font-size: 18px; }
    [data-space-selected="starrail"] .xy-space-demo-frame-caption { margin-top: 10px; }
    body .xy-space-shop[data-space-selected="starrail"] .xy-space-cover > .xy-utop-meteors { left: 2%; right: 42%; top: 15px; height: 170px; --sr-flight-x: -125px; --sr-flight-y: 66px; }
    body .xy-space-shop[data-space-selected="starrail"] .xy-space-profile-demo > .xy-utop-meteors { left: 2%; right: 27%; top: 8px; height: 100px; --sr-flight-x: -110px; --sr-flight-y: 58px; }
    .xy-space-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .comments-list .comment-inner.xy-space-comment.xy-space-starrail { padding: 36px 16px 80px; background-size: 650px auto, auto; background-position: right -90px bottom, center; }
    .comments-list .xy-space-comment.xy-space-starrail > .comment-body { margin-left: 0; }
    .comments-list .xy-space-comment.xy-space-starrail .nickname { padding-left: 56px; min-height: 48px; }
    .comments-list .xy-space-comment.xy-space-starrail .comment-text { clear: both; margin-top: 12px; }
    .dark-open .comments-list .comment-inner.xy-space-comment.xy-space-starrail { background-size: 120px auto, auto; background-position: right 2px bottom, center; }
    .simple-ulike-user-card.xy-space-card.xy-space-starrail { min-width: min(280px, calc(100vw - 24px)); }
    .simple-ulike-user-card.xy-space-card-demo.xy-space-starrail { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    /* The requested meteor effect remains active; other decorative transitions stay reduced. */
    body.xy-space-site.xy-space-starrail .xy-utop-stat { transition: none; }
}