/* ==========================================================================
   我的原神 · Sunny 主题配套样式
   设计：玻璃拟态 + 元素色驱动 + 大数字信息层级
   所有变量带默认值，未定义主题变量时也能独立工作
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
/* 抽屉渲染在 .gs 容器之外，因此变量同时挂载到 .gs-drawer */
.gs, .gs-drawer {
    --gs-bg:        var(--background, #ffffff);
    --gs-bg-soft:   var(--under-background, #f6f7fb);
    --gs-card:      var(--background, #ffffff);
    --gs-text:      var(--main, #2b3445);
    --gs-text-2:    var(--C, rgba(43, 52, 69, .68));
    --gs-text-3:    var(--B, rgba(43, 52, 69, .42));
    --gs-line:      var(--A, rgba(43, 52, 69, .12));
    --gs-line-soft: var(--O, rgba(43, 52, 69, .06));
    --gs-theme:     var(--theme, #607ab3);
    --gs-theme-soft:var(--theme-10, rgba(96, 122, 179, .1));
    --gs-fill:      var(--P, rgba(43, 52, 69, .05));
    --gs-radius:    var(--radius, 16px);
    --gs-radius-sm: calc(var(--gs-radius) * .55);
    --gs-radius-lg: calc(var(--gs-radius) * 1.4);
    --gs-shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -8px rgba(16, 24, 40, .10);
    --gs-shadow-lg: 0 2px 4px rgba(16, 24, 40, .05), 0 24px 48px -16px rgba(16, 24, 40, .18);

    --el: #8a94a6;
    --el-soft: #eef0f4;
    --el-deep: #5c6675;

    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: var(--gs-text);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
}

.gs *, .gs *::before, .gs *::after { box-sizing: border-box; }

.gs i, .gs em { font-style: normal; }
.gs b, .gs strong { font-weight: 700; }

/* 数字统一等宽，避免跳动 */
.gs .gs-num,
.gs .gs-metric-val,
.gs .gs-stat-v {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- 通用小部件 ---------- */
.gs-sec {
    margin: 2.2rem 0 .9rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.gs-sec-bar {
    width: 4px;
    height: 1.05em;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--gs-theme), color-mix(in srgb, var(--gs-theme) 40%, transparent));
}
.gs-sec-t {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.gs-sec-d {
    font-size: .74rem;
    color: var(--gs-text-3);
    letter-spacing: .04em;
    padding-top: .15em;
}
.gs-sec-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--gs-line), transparent);
}

/* 星级配色 */
.gs .s5 { --star: #d9a441; }
.gs .s4 { --star: #9b7fd4; }
.gs .s3 { --star: #6ba3c9; }
.gs .s1, .gs .s2 { --star: #8b93a1; }

/* ==========================================================================
   1. 玩家名片 Hero
   ========================================================================== */
.gs-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--gs-radius-lg);
    background: var(--gs-card);
    border: 1px solid var(--gs-line);
    box-shadow: var(--gs-shadow);
    isolation: isolate;
    margin-bottom: 1rem;
}
/* 名片底图 */
.gs-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center 32%;
    transform: scale(1.04);
    filter: saturate(1.05);
}
.gs-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, var(--gs-card) 6%, color-mix(in srgb, var(--gs-card) 88%, transparent) 38%, color-mix(in srgb, var(--gs-card) 42%, transparent) 72%, transparent 100%),
        linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--gs-card) 92%, transparent) 100%);
}
.gs-hero-deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58rem 22rem at 88% -18%, color-mix(in srgb, var(--gs-theme) 26%, transparent), transparent 70%),
        radial-gradient(30rem 16rem at 4% 108%, color-mix(in srgb, var(--gs-theme) 16%, transparent), transparent 70%);
}

.gs-hero-in {
    position: relative;
    padding: 1.6rem 1.7rem;
    display: flex;
    align-items: center;
    gap: 1.35rem;
    flex-wrap: wrap;
}

/* 头像 */
.gs-pfp {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
}
.gs-pfp-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(from 140deg, var(--el), var(--el-soft), var(--el), var(--el-soft), var(--el));
    animation: gsSpin 14s linear infinite;
    opacity: .9;
}
@keyframes gsSpin { to { transform: rotate(360deg); } }
.gs-pfp-in {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gs-card);
    border: 3px solid var(--gs-card);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .16);
}
.gs-pfp-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-pfp-txt {
    font-size: 2rem;
    font-weight: 800;
    color: var(--el-deep);
    background: linear-gradient(135deg, var(--el-soft), var(--gs-card));
    width: 100%; height: 100%;
    display: grid; place-items: center;
}
.gs-pfp-lv {
    position: absolute;
    left: 50%; bottom: -9px;
    transform: translateX(-50%);
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: var(--el-deep);
    border: 2px solid var(--gs-card);
    white-space: nowrap;
    letter-spacing: .02em;
}

/* 文字信息 */
.gs-id { flex: 1 1 16rem; min-width: 0; }
.gs-id-name {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.25;
}
.gs-id-uid {
    font-size: .74rem;
    font-weight: 600;
    color: var(--gs-text-3);
    letter-spacing: .08em;
    padding: .12rem .5rem;
    border: 1px solid var(--gs-line);
    border-radius: 999px;
    background: var(--gs-fill);
}
.gs-id-sig {
    margin-top: .35rem;
    font-size: .84rem;
    color: var(--gs-text-2);
    max-width: 34rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.gs-id-chips {
    margin-top: .7rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.gs-chip {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    padding: .26rem .68rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--gs-text-2);
    background: var(--gs-fill);
    border: 1px solid var(--gs-line-soft);
    backdrop-filter: blur(8px);
}
.gs-chip b { color: var(--gs-text); font-size: .82rem; }
.gs-chip.is-theme {
    color: color-mix(in srgb, var(--gs-theme) 82%, var(--gs-text));
    background: var(--gs-theme-soft);
    border-color: color-mix(in srgb, var(--gs-theme) 22%, transparent);
}
.gs-chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--el-deep);
}

/* 数据格 */
.gs-metrics {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    border-top: 1px solid var(--gs-line-soft);
    background: color-mix(in srgb, var(--gs-card) 55%, transparent);
    backdrop-filter: blur(14px);
}
.gs-metric {
    padding: .95rem .5rem 1.05rem;
    text-align: center;
    border-right: 1px solid var(--gs-line-soft);
    transition: background .22s ease;
}
.gs-metric:last-child { border-right: 0; }
.gs-metric:hover { background: var(--gs-fill); }

/* ===== 米游社实时便签 ===== */
.gs-note {
    position: relative;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem 1.15rem;
    background: linear-gradient(140deg, var(--gs-card) 0%, color-mix(in srgb, var(--gs-card) 92%, var(--theme-10)) 100%);
    border: 1px solid var(--gs-line);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin-bottom: 1rem;
}
.gs-note::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--theme-10) 80%, transparent), transparent 70%);
    pointer-events: none;
}
.gs-note-h {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: .7rem; margin-bottom: .85rem;
    border-bottom: 1px dashed var(--gs-line-soft);
    font-size: .82rem;
}
.gs-note-h-l {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 700; color: var(--gs-title);
}
.gs-note-h-l em { font-size: .68rem; font-style: normal; color: var(--theme); opacity: .85; font-weight: 600; }
.gs-note-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--theme);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme) 20%, transparent);
    animation: gs-pulse 1.6s ease-in-out infinite;
}
@keyframes gs-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.86)} }
.gs-note-h-r { font-size: .7rem; color: var(--gs-sub); font-variant-numeric: tabular-nums; }
.gs-note-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
}
.gs-note-c {
    position: relative;
    padding: .85rem .85rem .9rem;
    background: var(--gs-fill);
    border: 1px solid var(--gs-line-soft);
    border-radius: calc(var(--radius) * .7);
    display: flex; flex-direction: column; gap: .25rem;
    transition: transform .25s ease, border-color .25s ease;
}
.gs-note-c:hover { transform: translateY(-2px); border-color: var(--theme-30); }
.gs-note-c-wide { grid-column: 1 / -1; }
.gs-note-c-ico {
    width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--theme-10); color: var(--theme);
    font-size: 1rem; font-weight: 800;
}
.gs-note-c-t { font-size: .78rem; color: var(--gs-sub); font-weight: 600; }
.gs-note-c-v {
    display: flex; align-items: baseline; gap: .3rem;
    font-variant-numeric: tabular-nums;
}
.gs-note-c-v b {
    font-size: 1.55rem; font-weight: 800; color: var(--gs-title); line-height: 1.1;
}
.gs-note-c-v em { font-style: normal; color: var(--gs-sub); font-size: .82rem; }
.gs-note-c-bar {
    height: 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--gs-fill) 50%, transparent);
    overflow: hidden;
}
.gs-note-c-bar i {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--theme-30), var(--theme));
    border-radius: 999px;
    transition: width .6s cubic-bezier(.2,.8,.25,1);
}
.gs-note-c-d { font-size: .72rem; color: var(--gs-sub); }
.gs-note-err {
    padding: .55rem .75rem; border-radius: 8px;
    background: color-mix(in srgb, var(--gs-fill) 80%, transparent);
    color: var(--gs-sub); font-size: .78rem;
}
.gs-note-err code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    background: color-mix(in srgb, var(--gs-fill) 70%, transparent);
    padding: .05rem .35rem; border-radius: 4px;
    color: var(--gs-title);
}
@media (max-width: 720px) { .gs-note-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .gs-note-grid { grid-template-columns: 1fr; } }
.gs-metric-val {
    display: block;
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--gs-text);
}
.gs-metric-val small {
    font-size: .78rem;
    font-weight: 700;
    color: var(--gs-text-3);
    margin-left: .1rem;
}
.gs-metric-key {
    display: block;
    margin-top: .15rem;
    font-size: .7rem;
    color: var(--gs-text-3);
    letter-spacing: .06em;
}

/* ==========================================================================
   2. 元素图鉴
   ========================================================================== */
.gs-elem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}
.gs-el {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem .9rem;
    border-radius: var(--gs-radius);
    background: var(--gs-card);
    border: 1px solid var(--gs-line-soft);
    box-shadow: var(--gs-shadow);
    cursor: default;
    transition: transform .26s cubic-bezier(.2,.8,.25,1), box-shadow .26s ease, border-color .26s ease;
}
.gs-el::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(12rem 6rem at 12% 50%, color-mix(in srgb, var(--el) 14%, transparent), transparent 72%);
    opacity: 0;
    transition: opacity .3s ease;
}
.gs-el:hover { transform: translateY(-3px); box-shadow: var(--gs-shadow-lg); border-color: color-mix(in srgb, var(--el) 32%, transparent); }
.gs-el:hover::before { opacity: 1; }
.gs-el.is-empty { opacity: .48; }
.gs-el.is-empty .gs-el-ico { filter: grayscale(1); }

.gs-el-ico {
    position: relative;
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(150deg, var(--el-soft), color-mix(in srgb, var(--el) 12%, transparent));
}
.gs-el-ico svg, .gs-el-ico img { width: 22px; height: 22px; display: block; }
.gs-el-main { position: relative; min-width: 0; flex: 1; }
.gs-el-name {
    display: flex; align-items: baseline; gap: .3rem;
    font-size: .82rem; font-weight: 700;
    color: var(--gs-text);
}
.gs-el-name em {
    font-size: .66rem; font-weight: 600;
    color: var(--gs-text-3); letter-spacing: .06em;
}
.gs-el-track {
    margin-top: .34rem;
    height: 5px;
    border-radius: 999px;
    background: var(--gs-fill);
    overflow: hidden;
}
.gs-el-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--el) 55%, transparent), var(--el));
    transition: width .9s cubic-bezier(.2,.8,.25,1);
}
.gs-el-num {
    position: relative;
    font-size: 1.24rem;
    font-weight: 800;
    color: var(--el-deep);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. 数据纵览（星级 / 命座 / 好感）
   ========================================================================== */
.gs-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}
.gs-panel {
    padding: 1rem 1.1rem 1.1rem;
    border-radius: var(--gs-radius);
    background: var(--gs-card);
    border: 1px solid var(--gs-line-soft);
    box-shadow: var(--gs-shadow);
}
.gs-panel-h {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .78rem; font-weight: 700; letter-spacing: .05em;
    color: var(--gs-text-2);
    margin-bottom: .8rem;
}
.gs-panel-h em { font-size: .7rem; color: var(--gs-text-3); font-weight: 600; }

.gs-bars { display: grid; gap: .5rem; }
.gs-bar { display: grid; grid-template-columns: 3.1rem 1fr 2.4rem; align-items: center; gap: .55rem; }
.gs-bar-k { font-size: .74rem; color: var(--gs-text-2); font-weight: 600; white-space: nowrap; }
.gs-bar-t { height: 8px; border-radius: 999px; background: var(--gs-fill); overflow: hidden; }
.gs-bar-f {
    display: block; height: 100%; width: 0;
    border-radius: 999px;
    transition: width .9s cubic-bezier(.2,.8,.25,1);
    background: var(--bar, var(--gs-theme));
}
.gs-bar-v { font-size: .74rem; font-weight: 700; color: var(--gs-text-3); text-align: right; font-variant-numeric: tabular-nums; }

/* 甜甜圈 */
.gs-donut { display: flex; align-items: center; gap: 1rem; }
.gs-donut svg { width: 84px; height: 84px; flex: 0 0 auto; transform: rotate(-90deg); }
.gs-donut circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.gs-donut .gs-donut-bg { stroke: var(--gs-fill); }
.gs-donut .gs-donut-fg {
    stroke: var(--gs-theme);
    transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.25,1);
}
.gs-donut-c { position: absolute; }
.gs-donut-wrap { position: relative; flex: 0 0 auto; }
.gs-donut-txt {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 1.05rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.gs-legend { display: grid; gap: .34rem; }
.gs-legend-i { display: flex; align-items: center; gap: .42rem; font-size: .74rem; color: var(--gs-text-2); }
.gs-legend-d { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; }
.gs-legend-i b { margin-left: auto; color: var(--gs-text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. 工具栏
   ========================================================================== */
.gs-bar-tools {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .55rem;
    border-radius: 999px;
    background: var(--gs-card);
    border: 1px solid var(--gs-line-soft);
    box-shadow: var(--gs-shadow);
}
.gs-scroll-x {
    flex: 1;
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 .2rem;
}
.gs-scroll-x::-webkit-scrollbar { display: none; }
.gs-fbtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    padding: .38rem .78rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--gs-text-2);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.gs-fbtn:hover { background: var(--gs-fill); transform: translateY(-1px); }
.gs-fbtn i {
    font-size: .68rem;
    padding: .02rem .34rem;
    border-radius: 999px;
    background: var(--gs-fill);
    color: var(--gs-text-3);
}
.gs-fbtn.is-on { color: #fff; background: var(--gs-theme); }
.gs-fbtn.is-on i { background: rgba(255,255,255,.24); color: #fff; }
.gs-fbtn.is-on[data-filter="pyro"]  { background: #e8503a; }
.gs-fbtn.is-on[data-filter="hydro"] { background: #1e88e5; }
.gs-fbtn.is-on[data-filter="anemo"] { background: #1fb99a; }
.gs-fbtn.is-on[data-filter="electro"]{ background: #8b5cf6; }
.gs-fbtn.is-on[data-filter="dendro"] { background: #6da82b; }
.gs-fbtn.is-on[data-filter="cryo"]   { background: #26a8cc; }
.gs-fbtn.is-on[data-filter="geo"]    { background: #db9410; }
.gs-fbtn.is-on[data-filter="multi"]  { background: #a9803f; }

.gs-sorts { display: flex; gap: .2rem; padding-right: .2rem; flex: 0 0 auto; }
.gs-sbtn {
    padding: .38rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--gs-text-3);
    cursor: pointer;
    user-select: none;
    transition: color .2s ease, background .2s ease;
}
.gs-sbtn:hover { color: var(--gs-text); background: var(--gs-fill); }
.gs-sbtn.is-on { color: var(--gs-theme); background: var(--gs-theme-soft); }

/* ==========================================================================
   5. 角色墙
   ========================================================================== */
.gs-roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}
.gs-pc {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-radius: var(--gs-radius-lg);
    background: var(--gs-card);
    border: 1px solid var(--gs-line-soft);
    box-shadow: var(--gs-shadow);
    cursor: pointer;
    transition: transform .32s cubic-bezier(.2,.8,.25,1), box-shadow .32s ease, opacity .3s ease;
    /* animation: gsIn .5s cubic-bezier(.2,.8,.25,1) both; */
}
@keyframes gsIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.gs-pc:hover { transform: translateY(-6px); box-shadow: var(--gs-shadow-lg); }
.gs-pc.is-hide { display: none; }

/* 立绘区 */
.gs-pc-art {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: linear-gradient(165deg, var(--el-soft), color-mix(in srgb, var(--el) 22%, var(--gs-card)));
}
.gs-pc-art::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--gs-card) 96%, transparent) 100%);
}
.gs-pc-art img {
    position: absolute;
	inset: 0;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 8%;
    display: block;
    transform: scale(1.02);
    transition: transform .55s cubic-bezier(.2,.8,.25,1), filter .4s ease;
}
.gs-pc-art img.gs-elico {
    position: relative;
}
.gs-pc:hover .gs-pc-art img { transform: scale(1.09) translateY(-2%); }
/* 立绘缺失/加载失败时的兜底：层级低于图片，图片隐藏后自然露出 */
.gs-pc-fallback {
    position: absolute; inset: 0;
    z-index: 0;
    display: grid; place-items: center;
    font-size: 3.2rem; font-weight: 800;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--el-deep) 34%, transparent);
}
/* 顶部徽标 */
.gs-pc-top {
    position: absolute; top: 0; left: 0; right: 0;
    z-index: 3;
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: .6rem .65rem;
}
.gs-pc-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.gs-badge {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .16rem .48rem;
    border-radius: 999px;
    font-size: .68rem; font-weight: 800;
    color: #fff;
    background: var(--el-deep);
    box-shadow: 0 2px 8px rgba(16,24,40,.22);
    backdrop-filter: blur(6px);
}
.gs-badge svg, .gs-badge img { width: 14px; height: 14px; }
.gs-badge.is-cons { background: rgba(24,28,40,.78); }
.gs-badge.is-cons b { color: #ffcf6b; }

/* 星级 */
.gs-pc-star {
    position: absolute; z-index: 3;
    left: .65rem; bottom: .5rem;
    display: flex; gap: .1rem;
    font-size: .72rem;
    color: #ffc04d;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
    letter-spacing: -.02em;
}
/* 悬浮提示 */
.gs-pc-cta {
    position: absolute; z-index: 4;
    right: .55rem; bottom: .5rem;
    display: inline-flex; align-items: center; gap: .22rem;
    padding: .22rem .58rem;
    border-radius: 999px;
    font-size: .68rem; font-weight: 700;
    color: #fff;
    background: color-mix(in srgb, var(--el-deep) 88%, transparent);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s ease, transform .28s ease;
}
.gs-pc:hover .gs-pc-cta { opacity: 1; transform: translateY(0); }

/* 信息区 */
.gs-pc-body { position: relative; padding: .62rem .8rem .85rem; }
.gs-pc-name {
    display: flex; align-items: baseline; gap: .35rem;
    font-size: .96rem; font-weight: 800; letter-spacing: .01em;
}
.gs-pc-name em {
    font-size: .68rem; font-weight: 600; color: var(--gs-text-3);
}
.gs-pc-meta {
    margin-top: .18rem;
    display: flex; gap: .45rem; flex-wrap: wrap;
    font-size: .7rem; color: var(--gs-text-3);
}
.gs-pc-meta span { display: inline-flex; align-items: center; gap: .18rem; }
.gs-pc-meta span + span::before {
    content: ""; width: 1px; height: .72em;
    background: var(--gs-line); margin-right: .45rem;
}
/* 练度条 */
.gs-pc-score {
    margin-top: .55rem;
    display: flex; align-items: center; gap: .45rem;
}
.gs-pc-score-t {
    height: 4px; flex: 1;
    border-radius: 999px; background: var(--gs-fill); overflow: hidden;
}
.gs-pc-score-f {
    display: block; height: 100%; width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--el) 50%, transparent), var(--el));
    transition: width .8s cubic-bezier(.2,.8,.25,1);
}
.gs-pc-score b {
    font-size: .78rem; font-weight: 800; color: var(--el-deep);
    font-variant-numeric: tabular-nums;
}
/* 天赋 */
.gs-pc-tal {
    margin-top: .5rem;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .28rem;
}
.gs-tal {
    text-align: center;
    padding: .26rem .1rem;
    border-radius: 8px;
    background: var(--gs-fill);
    font-size: .64rem; color: var(--gs-text-3);
    line-height: 1.3;
}
.gs-tal b { display: block; font-size: .84rem; font-weight: 800; color: var(--gs-text); font-variant-numeric: tabular-nums; }
.gs-tal i { color: #e0a34a; font-size: .62rem; font-weight: 800; margin-left: .05rem; }
/* 武器小行 */
.gs-pc-wp {
    margin-top: .5rem;
    display: flex; align-items: center; gap: .42rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--gs-line);
}
.gs-pc-wp img {
    width: 30px; height: 30px;
    object-fit: contain;
    border-radius: 7px;
    background: linear-gradient(150deg, var(--gs-fill), transparent);
    flex: 0 0 auto;
}
.gs-pc-wp-t { min-width: 0; flex: 1; }
.gs-pc-wp-n {
    font-size: .76rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-pc-wp-s { font-size: .66rem; color: var(--gs-text-3); }
.gs-pc-wp-r {
    flex: 0 0 auto;
    font-size: .66rem; font-weight: 800;
    color: #e0a34a;
    padding: .05rem .34rem;
    border-radius: 999px;
    background: color-mix(in srgb, #e0a34a 14%, transparent);
}

/* ==========================================================================
   6. 详情抽屉
   ========================================================================== */
.gs-mask {
    position: fixed; inset: 0;
    z-index: 9000;
    background: rgba(14, 18, 30, .5);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s ease, visibility .32s;
}
.gs-mask.is-open { opacity: 1; visibility: visible; }

.gs-drawer {
    position: fixed;
    z-index: 9001;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--gs-card);
    box-shadow: -30px 0 70px -20px rgba(16, 24, 40, .3);
    transform: translateX(102%);
    transition: transform .42s cubic-bezier(.2,.85,.25,1);
    will-change: transform;
}
.gs-drawer.is-open { transform: translateX(0); }

/* 抽屉头：角色大图 */
.gs-dw-head {
    position: relative;
    flex: 0 0 auto;
    height: 210px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--el-soft), color-mix(in srgb, var(--el) 26%, var(--gs-card)));
}
.gs-dw-head img {
    position: absolute; inset: 0;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 6%;
}
.gs-dw-head .gs-pc-fallback { z-index: 0; font-size: 3rem; }
.gs-dw-head::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gs-card) 30%, transparent) 0%, transparent 34%, color-mix(in srgb, var(--gs-card) 94%, transparent) 88%, var(--gs-card) 100%);
}
.gs-dw-close {
    position: absolute; z-index: 4;
    top: .8rem; right: .8rem;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--gs-text-2);
    background: color-mix(in srgb, var(--gs-card) 72%, transparent);
    backdrop-filter: blur(8px);
    font-size: 1.05rem; line-height: 1;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.gs-dw-close:hover { background: var(--gs-card); color: var(--gs-text); transform: rotate(90deg); }
.gs-dw-title {
    position: absolute; z-index: 3;
    left: 1.15rem; right: 1.15rem; bottom: .85rem;
}
.gs-dw-name {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    font-size: 1.42rem; font-weight: 800; letter-spacing: .01em;
}
.gs-dw-name em { font-size: .74rem; font-weight: 600; color: var(--gs-text-3); letter-spacing: .06em; }
.gs-dw-sub {
    margin-top: .22rem;
    display: flex; gap: .5rem; flex-wrap: wrap;
    font-size: .76rem; color: var(--gs-text-2);
}
.gs-dw-sub span { display: inline-flex; align-items: center; gap: .24rem; }
.gs-dw-sub svg, .gs-dw-sub img { width: 13px; height: 13px; }

/* 抽屉体 */
.gs-dw-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.1rem 1.15rem 2rem;
    -webkit-overflow-scrolling: touch;
}
.gs-dw-body::-webkit-scrollbar { width: 6px; }
.gs-dw-body::-webkit-scrollbar-thumb { background: var(--gs-line); border-radius: 99px; }

.gs-blk { margin-bottom: 1.35rem; }
.gs-blk:last-child { margin-bottom: 0; }
.gs-blk-h {
    display: flex; align-items: center; gap: .45rem;
    margin-bottom: .6rem;
    font-size: .74rem; font-weight: 800; letter-spacing: .1em;
    color: var(--gs-text-3);
    text-transform: uppercase;
}
.gs-blk-h::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--gs-line), transparent);
}
.gs-blk-h em {
    font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    color: var(--el-deep);
    text-transform: none;
    padding: .06rem .42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--el) 12%, transparent);
}

/* 属性网格 */
.gs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: .45rem;
}
.gs-stat {
    padding: .58rem .68rem;
    border-radius: var(--gs-radius-sm);
    background: var(--gs-bg-soft);
    border: 1px solid var(--gs-line-soft);
    transition: transform .2s ease, border-color .2s ease;
}
.gs-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--el) 30%, transparent); }
.gs-stat-k { display: block; font-size: .68rem; color: var(--gs-text-3); }
.gs-stat-v {
    display: block; margin-top: .1rem;
    font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em;
}
.gs-stat.is-hl { background: color-mix(in srgb, var(--el) 8%, var(--gs-bg-soft)); }
.gs-stat.is-hl .gs-stat-v { color: var(--el-deep); }

/* 武器卡 */
.gs-wp {
    display: flex; gap: .85rem;
    padding: .85rem;
    border-radius: var(--gs-radius);
    background: linear-gradient(135deg, color-mix(in srgb, var(--star, #d9a441) 9%, var(--gs-bg-soft)), var(--gs-bg-soft));
    border: 1px solid color-mix(in srgb, var(--star, #d9a441) 22%, transparent);
}
.gs-wp-ico {
    flex: 0 0 auto;
    width: 68px; height: 68px;
    border-radius: 12px;
    padding: 4px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--star, #d9a441) 26%, transparent), transparent);
    display: grid; place-items: center;
}
.gs-wp-ico img { width: 100%; height: 100%; object-fit: contain; }
.gs-wp-main { min-width: 0; flex: 1; }
.gs-wp-n {
    display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
    font-size: .98rem; font-weight: 800;
}
.gs-wp-n i { font-size: .72rem; color: var(--star, #d9a441); letter-spacing: -.04em; }
.gs-wp-tags {
    margin-top: .22rem;
    display: flex; gap: .35rem; flex-wrap: wrap;
    font-size: .7rem; color: var(--gs-text-2);
}
.gs-wp-tags span {
    padding: .08rem .42rem; border-radius: 999px;
    background: color-mix(in srgb, var(--gs-text) 6%, transparent);
}
.gs-wp-rows { margin-top: .45rem; display: grid; gap: .18rem; }
.gs-wp-row {
    display: flex; align-items: baseline; gap: .4rem;
    font-size: .78rem; color: var(--gs-text-3);
}
.gs-wp-row b { color: var(--gs-text); font-size: .88rem; font-variant-numeric: tabular-nums; }
.gs-wp-row i {
    margin-left: auto;
    font-size: .68rem; font-weight: 700;
    color: var(--el-deep);
    padding: .02rem .36rem; border-radius: 999px;
    background: color-mix(in srgb, var(--el) 12%, transparent);
}

/* 圣遗物 */
.gs-arti { display: grid; gap: .5rem; }
.gs-arti-i {
    display: flex; gap: .7rem;
    padding: .6rem .7rem;
    border-radius: var(--gs-radius-sm);
    background: var(--gs-bg-soft);
    border: 1px solid var(--gs-line-soft);
    transition: transform .2s ease, border-color .2s ease;
}
.gs-arti-i:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--el) 26%, transparent); }
.gs-arti-ico {
    position: relative;
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 11px;
    padding: 3px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--star, #d9a441) 30%, transparent), transparent);
    display: grid; place-items: center;
}
.gs-arti-ico img { width: 100%; height: 100%; object-fit: contain; }
.gs-arti-lv {
    position: absolute; right: -3px; bottom: -3px;
    padding: 0 .3rem;
    border-radius: 999px;
    font-size: .6rem; font-weight: 800;
    color: #fff; background: var(--el-deep);
    box-shadow: 0 1px 4px rgba(16,24,40,.25);
}
.gs-arti-main { min-width: 0; flex: 1; }
.gs-arti-t { display: flex; align-items: baseline; gap: .38rem; flex-wrap: wrap; }
.gs-arti-t b { font-size: .86rem; font-weight: 700; }
.gs-arti-t em { font-size: .7rem; color: var(--gs-text-3); }
.gs-arti-m {
    margin-top: .18rem;
    display: flex; align-items: baseline; gap: .3rem;
    font-size: .82rem; color: var(--gs-text-2);
}
.gs-arti-m b { font-size: 1rem; font-weight: 800; color: var(--el-deep); font-variant-numeric: tabular-nums; }
.gs-arti-s {
    margin-top: .26rem;
    display: flex; gap: .3rem; flex-wrap: wrap;
}
.gs-arti-s span {
    font-size: .68rem; color: var(--gs-text-3);
    padding: .06rem .38rem;
    border-radius: 5px;
    background: color-mix(in srgb, var(--gs-text) 5%, transparent);
}
.gs-arti-s span b { color: var(--gs-text-2); font-weight: 700; }

/* 天赋 */
.gs-tals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.gs-tal-c {
    text-align: center;
    padding: .6rem .3rem;
    border-radius: var(--gs-radius-sm);
    background: var(--gs-bg-soft);
    border: 1px solid var(--gs-line-soft);
}
.gs-tal-c em { display: block; font-size: .68rem; color: var(--gs-text-3); }
.gs-tal-c b { display: block; margin-top: .12rem; font-size: 1.28rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gs-tal-c i { font-size: .68rem; font-weight: 800; color: #e0a34a; }

/* 套装提示 */
.gs-sets { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .55rem; }
.gs-set-chip {
    font-size: .7rem; font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 999px;
    color: var(--el-deep);
    background: color-mix(in srgb, var(--el) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--el) 22%, transparent);
}

/* ==========================================================================
   7. 底部武器陈列
   ========================================================================== */
.gs-arsenal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .7rem;
}
.gs-wpc {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .8rem;
    border-radius: var(--gs-radius);
    background: var(--gs-card);
    border: 1px solid var(--gs-line-soft);
    box-shadow: var(--gs-shadow);
    cursor: pointer;
    transition: transform .26s cubic-bezier(.2,.8,.25,1), box-shadow .26s ease;
}
.gs-wpc:hover { transform: translateY(-3px); box-shadow: var(--gs-shadow-lg); }
.gs-wpc-ico {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 10px;
    padding: 3px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--star, #d9a441) 26%, transparent), transparent);
}
.gs-wpc-ico img { width: 100%; height: 100%; object-fit: contain; }
.gs-wpc-t { min-width: 0; flex: 1; }
.gs-wpc-n {
    font-size: .82rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-wpc-s { font-size: .68rem; color: var(--gs-text-3); margin-top: .1rem; }
.gs-wpc-s b { color: var(--el-deep); }

/* ==========================================================================
   8. 页脚 / 错误 / 空态
   ========================================================================== */
.gs-foot {
    margin: 1.8rem 0;
    padding-top: .9rem;
    border-top: 1px dashed var(--gs-line);
    display: none; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
    font-size: .7rem; color: var(--gs-text-3);
}
.gs-foot a { color: var(--gs-text-3); text-decoration: none; border-bottom: 1px dotted var(--gs-line); }
.gs-foot a:hover { color: var(--gs-theme); }

.gs-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    border-radius: var(--gs-radius-lg);
    background: var(--gs-card);
    border: 1px dashed var(--gs-line);
    color: var(--gs-text-3);
}
.gs-empty-ico { font-size: 2.2rem; margin-bottom: .5rem; opacity: .5; }
.gs-empty-t { font-size: .95rem; font-weight: 700; color: var(--gs-text-2); }
.gs-empty-d { margin-top: .35rem; font-size: .8rem; }

/* ==========================================================================
   9. 响应式
   ========================================================================== */
@media (max-width: 860px) {
    .gs-hero-in { padding: 1.25rem 1.15rem; gap: 1rem; }
    .gs-pfp { width: 76px; height: 76px; }
    .gs-id-name { font-size: 1.28rem; }
    .gs-metric { padding: .75rem .35rem .85rem; }
    .gs-metric-val { font-size: 1.2rem; }
}
@media (max-width: 620px) {
    .gs { font-size: 14px; }
    .gs-roster { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: .8rem; }
    .gs-elem { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .55rem; }
    .gs-bar-tools { border-radius: var(--gs-radius); flex-wrap: wrap; padding: .5rem; }
    .gs-sorts { padding: 0; }
    .gs-drawer { width: 100vw; }
    .gs-dw-head { height: 178px; }
    .gs-stats { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}
@media (max-width: 420px) {
    .gs-roster { grid-template-columns: repeat(2, 1fr); }
    .gs-arsenal { grid-template-columns: 1fr 1fr; }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
    .gs * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 深色模式（跟随系统，主题若自带则自动继承变量） ---------- */
@media (prefers-color-scheme: dark) {
    .gs {
        --gs-text-2: var(--C, rgba(226, 232, 240, .7));
        --gs-text-3: var(--B, rgba(226, 232, 240, .45));
        --gs-line:   var(--A, rgba(226, 232, 240, .14));
        --gs-line-soft: var(--O, rgba(226, 232, 240, .07));
        --gs-fill:   var(--P, rgba(226, 232, 240, .07));
        --gs-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .5);
        --gs-shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 48px -16px rgba(0, 0, 0, .6);
    }
    .gs-hero-bg::after {
        background:
            linear-gradient(105deg, var(--gs-card) 6%, color-mix(in srgb, var(--gs-card) 90%, transparent) 40%, color-mix(in srgb, var(--gs-card) 55%, transparent) 76%, color-mix(in srgb, var(--gs-card) 35%, transparent) 100%),
            linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--gs-card) 94%, transparent) 100%);
    }
    .gs-mask { background: rgba(0, 0, 0, .62); }
}