/* ==== style.css ==== */
/* ============================================================
 * 红豆商城 · 入口导航页 —— 与商城同一套设计令牌
 * 「樱雪琉璃 · Glass Sakura」 v35
 *
 * 背景为纯 CSS 三层柔光（樱粉 / 雾紫 / 冰青），不依赖任何图片，
 * 零加载成本且不会因拉伸失真。品牌区为吉祥物 + 标题 + 保障标签，
 * 入口为两列毛玻璃卡片网格。
 * ============================================================ */
:root {
    --paper:      #FBF9FE;
    --surface:    rgba(255, 255, 255, .72);
    --surface-2:  rgba(255, 255, 255, .55);
    --ink:        #2B2438;
    --ink-2:      #5B5170;
    --ink-3:      #8B82A3;
    --line:       rgba(255, 255, 255, .85);
    --line-2:     rgba(167, 139, 250, .18);
    --accent:     #FF6FA5;
    --accent-2:   #A78BFA;
    --accent-3:   #67E8F9;
    --accent-ink: #E0407F;
    --accent-soft:rgba(255, 111, 165, .12);
    --grad-cta:   linear-gradient(100deg, #FF6FA5 0%, #A78BFA 100%);
    --halo-pink:  rgba(255, 143, 178, .28);
    --halo-violet:rgba(167, 139, 250, .28);
    --halo-cyan:  rgba(103, 232, 249, .22);
    --glass-bg:   rgba(255, 255, 255, .68);
    --glass-filter: saturate(140%) blur(20px);
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 26px;
    --sh-1: 0 1px 2px rgba(120, 100, 170, .06), 0 2px 6px rgba(120, 100, 170, .05);
    --sh-2: 0 6px 22px rgba(120, 100, 170, .10), 0 1px 3px rgba(120, 100, 170, .06);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .18s;
    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
                 "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 15px; line-height: 1.55;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 18% -6%,  var(--halo-pink)   0, transparent 55%),
        radial-gradient(circle at 88% 6%,   var(--halo-violet) 0, transparent 55%),
        radial-gradient(circle at 50% 104%, var(--halo-cyan)   0, transparent 60%),
        radial-gradient(rgba(120, 100, 170, .045) 1px, transparent 1px);
    background-size: auto, auto, auto, 22px 22px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-position: center, center, center, center;
    background-attachment: fixed, fixed, fixed, scroll;
    overflow-x: hidden;
}

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

.container {
    position: relative; z-index: 1;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(28px, 5vh, 48px) 20px 28px;
    display: flex; flex-direction: column; align-items: center;
}

/* ===== 品牌区 ===== */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; }

.hero-mascot {
    position: relative;
    width: 116px; height: 116px;
    margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
    /* 身后的朱砂色圆盘，让吉祥物从纸面里"跳"出来 */
}
.hero-mascot::before {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%,
        var(--accent-soft) 0%, #F6E3DF 58%, rgba(246, 227, 223, 0) 74%);
}
.hero-mascot::after {
    content: "";
    position: absolute; left: 50%; bottom: 2px;
    width: 86px; height: 12px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(22, 24, 29, .07);
    filter: blur(2px);
}
.avatar {
    position: relative; z-index: 1;
    width: 102px; height: 102px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(168, 42, 34, .16));
    animation: floaty 3.6s ease-in-out infinite;
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.site-title {
    font-size: 25px; font-weight: 700; letter-spacing: -.015em; color: var(--ink);
}
.site-subtitle {
    margin-top: 5px; font-size: 13.5px; color: var(--ink-3);
}

/* ===== 保障标签 ===== */
.trust-row {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin-top: 12px; margin-bottom: 20px;
}
.trust-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    font-size: 12.5px; font-weight: 500; color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--sh-1);
}
.trust-chip svg { width: 13px; height: 13px; color: var(--accent); }

/* ===== 活动横幅 ===== */
.promo-banner {
    --promo-color: #D98A0B;
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--promo-color) 9%, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--promo-color) 30%, #E6E2DC);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.promo-banner:hover {
    border-color: var(--promo-color);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
}
.promo-banner .link-icon {
    box-shadow: 0 7px 16px color-mix(in srgb, var(--promo-color) 26%, transparent);
}
.promo-title {
    font-size: 15.5px; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.promo-banner .link-arrow {
    position: static; flex-shrink: 0; margin-left: auto;
    width: 17px; height: 17px;
    color: color-mix(in srgb, var(--promo-color) 70%, #858B95);
}

/* ===== 入口卡片网格（v48：琉璃导航卡 · 重设计） =====
 * 用 flex-wrap 而不是固定列数：5 张卡在任意宽度都不会出现
 * 「最后一行落单 + 右侧空洞」—— 每行末尾的卡自动平分整行宽度。 */
.links-grid {
    width: 100%;
    display: flex; flex-wrap: wrap; gap: 14px;
}
.link-card {
    --card-color: var(--accent);
    flex: 1 1 calc(20% - 12px);          /* ≥1061px：正好 5 张一行 */
    position: relative;
    min-width: 0;
    display: flex; flex-direction: column; gap: 11px;
    padding: 16px 16px 15px;
    /* 顶部一层卡片主题色的柔光（替代旧版的「色带 + 角标光斑」） */
    background:
        linear-gradient(158deg, color-mix(in srgb, var(--card-color) 11%, transparent) 0%, transparent 58%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-1, 0 3px 14px rgba(68, 47, 116, .08)), inset 0 1px 0 rgba(255, 255, 255, .5);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
    opacity: 0; animation: cardIn .45s var(--ease) forwards;
}
/* v46：入场动画改用独立 translate 属性（不是 transform），
 * 否则 animation forwards 会锁死 transform，按压反馈 scale 失效 */
@keyframes cardIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

.link-card:hover {
    border-color: color-mix(in srgb, var(--card-color) 46%, transparent);
    box-shadow: var(--sh-2, 0 12px 34px rgba(68, 47, 116, .13)),
                0 12px 26px color-mix(in srgb, var(--card-color) 16%, transparent);
    transform: translateY(-2px);
}

/* 头部一行：图标在左、箭头在右 —— 与下方文案形成清晰的两段式层级 */
.link-head {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* 图标本体就是「渐变方块 + 白色图形」的 48px 应用图标；
 * 这层只负责尺寸 + 主题色投影（旧版外面还套一层浅色方框，像双下巴） */
.link-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--card-color) 30%, transparent);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.link-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-card:hover .link-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--card-color) 38%, transparent);
}
.link-arrow {
    width: 16px; height: 16px; flex-shrink: 0;
    color: color-mix(in srgb, var(--card-color) 42%, var(--ink-3));
    transition: transform .2s var(--ease), color .2s var(--ease);
}
.link-card:hover .link-arrow { transform: translateX(3px); color: var(--card-color); }

.link-info { flex: 1; min-width: 0; width: 100%; }
.link-title {
    font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-desc {
    margin-top: 3px;
    font-size: 12px; color: var(--ink-3); line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 中屏：3 张一行（5 张 = 3 + 2，末行两张平分，不留洞） */
@media (max-width: 1060px) {
    .link-card { flex-basis: calc(33.3% - 10px); }
}
/* 窄屏：2 张一行（5 张 = 2 + 2 + 1，最后一张自动铺满整行） */
@media (max-width: 900px) {
    .link-card { flex-basis: calc(50% - 7px); }
    /* 落单的「最后一张」横过来排：整行宽卡不显得空 */
    .link-card:last-child {
        flex-direction: row; align-items: center; gap: 12px;
        padding: 12px 14px;
    }
    .link-card:last-child .link-head { display: contents; }
    .link-card:last-child .link-icon { order: 1; }
    .link-card:last-child .link-info { order: 2; flex: 1; min-width: 0; width: auto; }
    .link-card:last-child .link-arrow { order: 3; margin-left: auto; }
}

/* ===== 页脚 ===== */
.footer {
    margin-top: 20px; font-size: 12px; color: var(--ink-3); text-align: center;
    line-height: 1.8;
}

/* ===== 手机端：整体压缩到一屏显示，不滚动 ===== */
@media (max-width: 480px) {
    .container { padding: 16px 14px 12px; }

    /* 品牌区压缩 */
    .hero-mascot { width: 82px; height: 82px; margin-bottom: 10px; }
    .hero-mascot::before { inset: -4px; }
    .avatar { width: 72px; height: 72px; animation: none; }
    .site-title { font-size: 21px; }
    .site-subtitle { margin-top: 4px; font-size: 12.5px; }
    .trust-row { gap: 6px; margin-top: 10px; margin-bottom: 16px; }
    .trust-chip { padding: 4px 9px; font-size: 11.5px; }
    .trust-chip svg { width: 11px; height: 11px; }

    /* 入口卡片：紧凑 */
    .links-grid { gap: 9px; }
    .link-card { gap: 9px; padding: 12px 12px 11px; border-radius: var(--r-lg); }
    .link-icon { width: 42px; height: 42px; border-radius: 12px; }
    .link-title { font-size: 14px; }
    .link-desc { font-size: 11px; margin-top: 2px; }
    .link-card:last-child { padding: 11px 13px; }

    .footer { margin-top: 14px; font-size: 11px; line-height: 1.6; }
}

/* 兼容不支持 color-mix 的旧浏览器：卡片/横幅退化为纯色底 */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .link-card { background: var(--surface); }
    .promo-banner { background: var(--surface); border-color: var(--line); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .link-card { opacity: 1; }
    .avatar { animation: none; }
}

/* ==== theme-tokens.css ==== */
/* ============================================================
 * 红豆商城 · 共享设计令牌（theme-tokens）
 * ------------------------------------------------------------
 * 入口页 / 与商城 /shop/ 共用同一份令牌，避免两处各存一套而走样。
 * 内容：① 基础层（字体/圆角/动效/语义色，与皮肤无关）
 *       ② 皮肤层 glass / sakura / neon（:root[data-skin]）
 *       ③ 通用暗色层 + 三套皮肤的暗色微调
 * 另外 4 套新皮肤（isekai / aurora / manga / prism）在 isekai.css
 * 与 themes-v39.css 中定义，加载顺序放在本文件之后即可。
 *
 * 注意：基础层的 :root 不带颜色令牌——颜色一律由 [data-skin] 提供，
 * 因此新增皮肤必须完整定义全部颜色变量，否则会回退到初始值。
 * ============================================================ */

/* ==================== 1. 设计令牌 ==================== */
/* 基础层：只放「与皮肤无关」的东西——字体、圆角、动效、布局尺寸、语义色。
 * 颜色一律走下面的 [data-skin] 覆盖层，切换皮肤时零 JS 参与。 */
:root {
    /* 字体 */
    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
                 "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
                 "Liberation Mono", "Courier New", monospace;
    /* 宋体族：只用于商品标题与价格等大字号，小字仍走黑体保证可读性 */
    --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
                  "SimSun", "Noto Serif", Georgia, serif;

    /* 圆角：整体放大，配合毛玻璃 */
    --r-xs: 10px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-pill: 999px;

    /* 动效 */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .18s;

    /* 布局 */
    --wrap: 1180px;
    --nav-h: 60px;

    /* 语义色（亮暗态各有一份，走 [data-theme] 覆盖） */
    --ok:           #12A67A;
    --ok-soft:      #E4F7F0;
    --warn:         #B7791F;
    --warn-soft:    #FDF3E2;
    --danger:       #D6456B;
    --danger-soft:  #FDECF1;
    --info:         #4F6BEF;
    --info-soft:    #EBEFFE;
}


/* ---------- 皮肤 3：霓虹赛博 ----------
 * 深蓝紫底 + 紫青双色辉光 + 网格线；玻璃更暗、发光更明显。 */
:root[data-skin="neon"] {
    --paper:        #0B0F1A;
    --surface:      rgba(24, 29, 46, .62);
    --surface-2:    rgba(30, 36, 56, .52);
    --surface-3:    rgba(36, 43, 66, .82);
    --glass-bg:     rgba(20, 25, 40, .58);
    --glass-bg-2:   rgba(26, 32, 50, .48);
    --glass-filter: saturate(150%) blur(22px);
    --glass-filter-strong: saturate(170%) blur(30px);

    --ink:          #E8ECF8;
    --ink-2:        #A9B4D0;
    --ink-3:        #7A86A8;
    --ink-4:        #5A6484;

    --line:         rgba(140, 160, 255, .16);
    --line-2:       rgba(140, 160, 255, .22);

    --accent:       #7C5CFF;
    --accent-2:     #22D3EE;
    --accent-3:     #F472B6;
    --accent-ink:   #A78BFA;
    --accent-soft:  rgba(124, 92, 255, .16);
    --accent-ring:  rgba(124, 92, 255, .30);

    --halo-pink:    rgba(244, 114, 182, .22);
    --halo-violet:  rgba(124, 92, 255, .28);
    --halo-cyan:    rgba(34, 211, 238, .22);
    --grad-cta:     linear-gradient(100deg, #7C5CFF 0%, #22D3EE 100%);
    --grad-halo:    radial-gradient(circle at 14% -6%, rgba(124,92,255,.34) 0, transparent 55%),
                    radial-gradient(circle at 88% 8%,  rgba(34,211,238,.26) 0, transparent 55%),
                    radial-gradient(circle at 50% 106%, rgba(244,114,182,.20) 0, transparent 60%);

    --sh-1: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .24);
    --sh-2: 0 6px 24px rgba(0, 0, 0, .38), 0 0 0 1px rgba(124, 92, 255, .10);
    --sh-3: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(124, 92, 255, .14);

    --ok:           #34D399;
    --ok-soft:      rgba(52, 211, 153, .14);
    --warn:         #FBBF24;
    --warn-soft:    rgba(251, 191, 36, .14);
    --danger:       #FB7185;
    --danger-soft:  rgba(251, 113, 133, .14);
    --info:         #60A5FA;
    --info-soft:    rgba(96, 165, 250, .14);
}

/* ---------- 暗色态：所有皮肤共用一套「深底 + 亮字」基底 ---------- */
:root[data-theme="dark"] {
    --surface:      rgba(30, 35, 48, .58);
    --surface-2:    rgba(38, 44, 60, .48);
    --surface-3:    rgba(46, 53, 72, .82);
    --glass-bg:     rgba(26, 31, 43, .58);
    --glass-bg-2:   rgba(34, 40, 55, .48);
    --glass-filter: saturate(140%) blur(22px);
    --glass-filter-strong: saturate(150%) blur(30px);

    --ink:          #E8EAF0;
    --ink-2:        #A6ADBD;
    --ink-3:        #7C8496;
    --ink-4:        #5C6478;

    --line:         rgba(255, 255, 255, .10);
    --line-2:       rgba(255, 255, 255, .14);

    --accent-ink:   #93B4F5;
    --accent-soft:  rgba(147, 180, 245, .14);
    --accent-ring:  rgba(147, 180, 245, .24);

    --ok:           #34D399;
    --ok-soft:      rgba(52, 211, 153, .14);
    --warn:         #FBBF24;
    --warn-soft:    rgba(251, 191, 36, .14);
    --danger:       #FB7185;
    --danger-soft:  rgba(251, 113, 133, .14);
    --info:         #60A5FA;
    --info-soft:    rgba(96, 165, 250, .14);
}
/* 暗色下纸底统一压深；其余皮肤各自的辉光/主色保留，品牌辨识不丢 */
:root[data-theme="dark"][data-skin="neon"] { --paper: #070A12; --accent: #9B7BFF; }

/* ==== isekai.css ==== */
/* v38 · 入口页的异次元琉璃布局；旧入口由 style.css 继续负责。 */
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) {
    --paper: #F6F3FF;
    --surface: rgba(255,255,255,.80);
    --surface-2: rgba(255,255,255,.64);
    --ink: #27263C;
    --ink-2: #625E79;
    --ink-3: #85819E;
    --line: rgba(255,255,255,.88);
    --line-2: rgba(112,92,174,.18);
    --accent: #D95798;
    --accent-2: #7C6BDB;
    --accent-3: #73D0E7;
    --accent-ink: #B73577;
    --accent-soft: rgba(217,87,152,.14);
    --grad-cta: linear-gradient(110deg,#D95798,#806FDE);
    --sh-1: 0 3px 14px rgba(68,47,116,.08);
    --sh-2: 0 12px 34px rgba(68,47,116,.13);
}
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"])[data-theme="dark"] {
    --paper: #111222;
    --surface: rgba(31,32,56,.86);
    --surface-2: rgba(40,41,69,.70);
    --ink: #F5F0FF;
    --ink-2: #C6BFDD;
    --ink-3: #A29BBE;
    --line: rgba(201,190,255,.16);
    --line-2: rgba(201,190,255,.23);
    --accent-ink: #FF9AC9;
}
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) body {
    background-color: var(--paper);
    background-image: radial-gradient(circle at 6% 4%,rgba(255,193,225,.36),transparent 46%),
                      radial-gradient(circle at 96% 15%,rgba(148,131,240,.28),transparent 50%),
                      radial-gradient(circle at 52% 100%,rgba(115,208,231,.22),transparent 60%);
}
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"])[data-theme="dark"] body {
    background-image: radial-gradient(circle at 8% 5%,rgba(126,61,128,.32),transparent 48%),
                      radial-gradient(circle at 95% 14%,rgba(85,72,159,.30),transparent 52%);
}
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .container { max-width: 1180px; align-items: stretch; padding: 30px 20px 36px; }
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero {
    position: relative; isolation: isolate; overflow: hidden;
    align-items: flex-start; justify-content: center; text-align: left;
    width: 100%; min-height: 350px; padding: 45px 45% 45px 6%;
    border: 1px solid var(--line); border-radius: 30px;
    background: linear-gradient(115deg,rgba(255,247,253,.97),rgba(239,232,255,.87) 60%,rgba(207,224,255,.77));
    box-shadow: var(--sh-2),inset 0 1px 0 rgba(255,255,255,.85);
}
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"])[data-theme="dark"] .hero {
    background: linear-gradient(115deg,#292039,#2C2A50 60%,#273C62);
}
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero::after {
    content: ""; position: absolute; z-index: -1;
    right: 4%; bottom: -24px; width: 42%; height: 390px;
    background: url('/shop/assets/uploads/isekai-guide-v1-lossless-v147.webp?v=160') center bottom / contain no-repeat;
    filter: drop-shadow(0 16px 25px rgba(72,33,95,.18));
    pointer-events: none;
}
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero-mascot { display: none; }
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .site-title {
    font-size: clamp(36px,4vw,54px); letter-spacing: -.04em;
    background: var(--grad-cta); background-clip: text; -webkit-background-clip: text;
    color: transparent;
}
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .site-subtitle { max-width: 26em; margin-top: 13px; font-size: 16px; color: var(--ink-2); }
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .trust-row { justify-content: flex-start; margin: 20px 0 0; }
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .trust-chip { border-color: var(--line-2); }
:is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .promo-banner { margin-top: 16px; padding: 14px 18px; border-color: var(--line-2); }
/* v48：入口卡片的列数/尺寸统一由 style.css 的 flex 方案负责（5 张卡不落单），此处不再覆盖 */

@media (max-width: 900px) {
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero { padding-right: 38%; }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero::after { right: 0; width: 46%; }
}
@media (max-width: 620px) {
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .container { padding: 16px 14px 24px; }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero { min-height: 210px; padding: 25px 20px; border-radius: 22px; }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero::after { right: -24px; bottom: -8px; width: 48%; height: 235px; opacity: .62; }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .site-title { font-size: clamp(27px,7vw,34px); }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .site-subtitle { max-width: 70%; font-size: 12px; line-height: 1.5; }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .trust-row { max-width: 100%; justify-content: flex-start; margin-top: 14px; margin-bottom: 0; }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .trust-chip { font-size: 10px; padding: 4px 7px; }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .promo-banner { margin-top: 12px; }
}
@media (max-width: 359px) {
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero::after { opacity: .36; }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .site-subtitle { max-width: 82%; }
    :is(html[data-skin="isekai"],html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"],html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .trust-chip { font-size: 9.5px; padding: 3px 6px; }
}


/* ==== themes-v39.css ==== */
/* Landing page counterparts for the two v39 storefront skins. */
html[data-skin="aurora"] { --paper:#071629; --surface:#142b41; --ink:#f3f9fc; --ink-2:#bdd3df; --line:rgba(102,224,227,.26); --accent:#70e7e1; --accent-ink:#8ff0e8; --grad-cta:linear-gradient(105deg,#1988a1,#526ee0); }
html[data-skin="aurora"][data-theme="light"] { --paper:#14324f; --surface:#1d3d5c; --ink:#fbfeff; --ink-2:#d6e8ef; --line:rgba(145,239,237,.32); --accent:#89f2e6; --accent-ink:#a2f8ec; }
html[data-skin="manga"] { --paper:#fff8e8; --surface:#fffdf7; --ink:#29243d; --ink-2:#625a70; --line:#443754; --accent:#e94e7b; --accent-ink:#be315f; --grad-cta:linear-gradient(105deg,#ec537a,#b65ad6); }
html[data-skin="manga"][data-theme="dark"] { --paper:#1b1a2a; --surface:#29283e; --ink:#fff7ed; --ink-2:#ddd1df; --line:#b2a0c3; --accent:#ff88ab; --accent-ink:#ffacc2; }
:is(html[data-skin="aurora"],html[data-skin="manga"]) body { background:var(--paper); color:var(--ink); }
html[data-skin="aurora"] body { background-image:radial-gradient(circle at 90% 8%,rgba(57,203,218,.19),transparent 42%),linear-gradient(rgba(102,224,227,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(102,224,227,.055) 1px,transparent 1px); background-size:auto,30px 30px,30px 30px; }
html[data-skin="manga"] body { background-image:radial-gradient(circle at 90% 8%,rgba(255,155,133,.22),transparent 42%),radial-gradient(rgba(60,46,82,.09) 1px,transparent 1px); background-size:auto,20px 20px; }
:is(html[data-skin="aurora"],html[data-skin="manga"]) .container { max-width:1180px; align-items:stretch; padding:30px 20px 36px; }
:is(html[data-skin="aurora"],html[data-skin="manga"]) .hero { position:relative; align-items:flex-start; text-align:left; min-height:270px; padding:45px 42px; border:1px solid var(--line); border-radius:27px; overflow:hidden; background:var(--surface); }
html[data-skin="aurora"] .hero { background:radial-gradient(circle at 85% 15%,#285d79,#122c49 50%,#0a2038); }
html[data-skin="aurora"][data-theme="light"] .hero { background:radial-gradient(circle at 85% 15%,#397e93,#245273 50%,#153a5a); }
html[data-skin="manga"] .hero { border:2px solid var(--line); background:linear-gradient(115deg,#fff2c9,#ffd8d7 62%,#ddd7ff); box-shadow:5px 5px 0 var(--line); }
html[data-skin="manga"][data-theme="dark"] .hero { background:linear-gradient(115deg,#493244,#3e3151,#303c63); }
:is(html[data-skin="aurora"],html[data-skin="manga"]) .hero-mascot { display:none; }
:is(html[data-skin="aurora"],html[data-skin="manga"]) .hero::after { content:""; position:absolute; right:4%; bottom:0; width:32%; height:105%; background:url('/shop/assets/uploads/isekai-guide-v1-lossless-v147.webp?v=160') center bottom/contain no-repeat; pointer-events:none; }
:is(html[data-skin="aurora"],html[data-skin="manga"]) .site-title { color:var(--ink); font-size:clamp(30px,4vw,48px); }
:is(html[data-skin="aurora"],html[data-skin="manga"]) .site-subtitle { max-width:28em; margin-top:13px; color:var(--ink-2); }
:is(html[data-skin="aurora"],html[data-skin="manga"]) .trust-row { justify-content:flex-start; margin:18px 0 0; }
:is(html[data-skin="aurora"],html[data-skin="manga"]) .promo-banner { margin-top:18px; }
/* v48：入口卡片布局统一走 style.css 的 flex 方案；漫画皮保留「厚边 + 硬投影」签名 */
html[data-skin="manga"] .link-card { border-width:2px; box-shadow:3px 3px 0 var(--line); }

/* v141: additional identity skins reuse the existing isekai layout geometry. */
html[data-skin="hanami"] { --paper:#fff4f0; --surface:rgba(255,250,247,.94); --surface-2:#fff0eb; --surface-3:#fffaf7; --ink:#3a1d2b; --ink-2:#785260; --line:#e7b5aa; --line-2:rgba(141,38,64,.18); --accent:#c8284b; --accent-ink:#a22140; --accent-soft:rgba(200,40,75,.12); --accent-ring:rgba(200,40,75,.25); --grad-cta:linear-gradient(110deg,#bd2446,#e77477 58%,#c79b4b); }
html[data-skin="hanami"][data-theme="dark"] { --paper:#201822; --surface:#30232e; --surface-2:#392832; --surface-3:#382a36; --ink:#fff1ea; --ink-2:#e4c4ca; --line:#654153; --line-2:rgba(255,209,206,.2); --accent:#ff7893; --accent-ink:#ffb2bc; --accent-soft:rgba(255,120,147,.15); --accent-ring:rgba(255,120,147,.25); --grad-cta:linear-gradient(110deg,#ad3452,#d3697c 60%,#b58950); }
html[data-skin="pixel-arcade"] { --paper:#f6f0dc; --surface:#fffdf3; --surface-2:#fff5d6; --surface-3:#fffbeb; --ink:#182236; --ink-2:#4c5260; --line:#252b35; --line-2:rgba(37,43,53,.22); --accent:#e72c24; --accent-ink:#b51c19; --accent-soft:rgba(231,44,36,.12); --accent-ring:rgba(231,44,36,.25); --grad-cta:linear-gradient(100deg,#e72c24 0 48%,#215fc6 48% 100%); }
html[data-skin="pixel-arcade"][data-theme="dark"] { --paper:#171b28; --surface:#252b3b; --surface-2:#303448; --surface-3:#292f40; --ink:#fff4d5; --ink-2:#c9c6bd; --line:#e1d8bd; --line-2:rgba(255,244,213,.2); --accent:#ff5145; --accent-ink:#ff9185; --accent-soft:rgba(255,81,69,.14); --accent-ring:rgba(255,81,69,.26); --grad-cta:linear-gradient(100deg,#ee3c32 0 48%,#286ed8 48% 100%); }
html[data-skin="deep-radio"] { --paper:#09272a; --surface:rgba(16,49,50,.94); --surface-2:#153b3b; --surface-3:#103538; --ink:#e9f8e8; --ink-2:#a9d1c6; --line:#28605d; --line-2:rgba(94,221,205,.22); --accent:#4ce0d0; --accent-ink:#8cf0df; --accent-soft:rgba(76,224,208,.13); --accent-ring:rgba(76,224,208,.26); --grad-cta:linear-gradient(105deg,#087d7c,#21b9aa 58%,#d29142); }
html[data-skin="deep-radio"][data-theme="light"] { --paper:#d7e9de; --surface:rgba(244,250,238,.96); --surface-2:#e7f3e7; --surface-3:#f1f7ed; --ink:#103a3a; --ink-2:#416b65; --line:#83aaa0; --line-2:rgba(20,78,73,.2); --accent:#087f79; --accent-ink:#08625e; --accent-soft:rgba(8,127,121,.12); --accent-ring:rgba(8,127,121,.22); --grad-cta:linear-gradient(105deg,#087f79,#21a997 58%,#bd7734); }
html[data-skin="sunset-mart"] { --paper:#f7ecd1; --surface:#fff9e9; --surface-2:#f8efda; --surface-3:#fffaec; --ink:#273b36; --ink-2:#5f7165; --line:#c79d6d; --line-2:rgba(63,88,72,.2); --accent:#d95e38; --accent-ink:#a8462d; --accent-soft:rgba(217,94,56,.12); --accent-ring:rgba(217,94,56,.23); --grad-cta:linear-gradient(105deg,#d95e38,#e58e42 55%,#347f78); }
html[data-skin="sunset-mart"][data-theme="dark"] { --paper:#1e2927; --surface:#2c3833; --surface-2:#36433b; --surface-3:#303d37; --ink:#fff2d8; --ink-2:#d1c3a3; --line:#7d6650; --line-2:rgba(255,232,192,.18); --accent:#ff9568; --accent-ink:#ffc49b; --accent-soft:rgba(255,149,104,.14); --accent-ring:rgba(255,149,104,.23); --grad-cta:linear-gradient(105deg,#c85236,#df8150 55%,#4d9c8e); }

:is(html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"]) body { background-color:var(--paper); color:var(--ink); }
html[data-skin="hanami"] body { background-image:radial-gradient(circle at 90% 4%,rgba(235,145,153,.24),transparent 34%),radial-gradient(circle at 8% 18%,rgba(214,173,96,.16),transparent 32%),radial-gradient(rgba(164,62,83,.07) 1px,transparent 1px); background-size:auto,auto,18px 18px; }
html[data-skin="pixel-arcade"] body { background-image:linear-gradient(90deg,rgba(32,44,66,.045) 1px,transparent 1px),linear-gradient(rgba(32,44,66,.045) 1px,transparent 1px); background-size:16px 16px; }
html[data-skin="deep-radio"] body { background-image:radial-gradient(circle at 90% 5%,rgba(63,216,203,.2),transparent 34%),radial-gradient(circle at 8% 45%,rgba(242,179,85,.1),transparent 40%),repeating-radial-gradient(circle at 88% 14%,transparent 0 32px,rgba(75,205,190,.055) 33px 34px,transparent 35px 65px); background-attachment:fixed; }
html[data-skin="deep-radio"][data-theme="light"] body { background-image:radial-gradient(circle at 90% 5%,rgba(91,191,171,.2),transparent 34%),radial-gradient(circle at 8% 45%,rgba(227,161,75,.12),transparent 40%),repeating-radial-gradient(circle at 88% 14%,transparent 0 32px,rgba(42,125,114,.075) 33px 34px,transparent 35px 65px); }
html[data-skin="sunset-mart"] body { background-image:radial-gradient(circle at 4% 2%,rgba(241,172,83,.24),transparent 36%),linear-gradient(180deg,rgba(82,117,92,.065) 0 8px,transparent 8px 16px); background-size:auto,100% 16px; }
html[data-skin="sunset-mart"][data-theme="dark"] body { background-image:radial-gradient(circle at 4% 2%,rgba(199,103,60,.18),transparent 36%),linear-gradient(180deg,rgba(234,174,102,.035) 0 8px,transparent 8px 16px); }

:is(html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"]) .hero { background:var(--surface); border-color:var(--line); box-shadow:var(--sh-2); }
:is(html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"]) .hero-mascot { display:none; }
:is(html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"]) .hero::after { background-position:center bottom; background-size:contain; }
html[data-skin="hanami"] .hero { background:linear-gradient(110deg,#fff5ef,#f8dfe0 68%,#e9c8b8); border-color:#c77d70; }
html[data-skin="hanami"][data-theme="dark"] .hero { background:linear-gradient(110deg,#35222e,#4a2938 68%,#61443b); }
html[data-skin="hanami"] .hero::after { background-image:url('/shop/assets/uploads/theme-v141/hanami.webp?v=160'); }
html[data-skin="pixel-arcade"] .hero { border:3px solid var(--line); border-radius:8px; box-shadow:5px 5px 0 #252b35; background:linear-gradient(120deg,#fff6d4,#f4df9e); }
html[data-skin="pixel-arcade"][data-theme="dark"] .hero { box-shadow:5px 5px 0 #e1d8bd; background:linear-gradient(120deg,#252b3b,#3b3441); }
html[data-skin="pixel-arcade"] .hero::after { background-image:url('/shop/assets/uploads/theme-v144/pixel-arcade.webp?v=160'); image-rendering:pixelated; }
html[data-skin="deep-radio"] .hero { background:linear-gradient(112deg,#10363a,#0a4a4b 62%,#183b39); border-color:#3b8580; }
html[data-skin="deep-radio"][data-theme="light"] .hero { background:linear-gradient(112deg,#e8f2df,#c9e0d2 62%,#b9d8ce); }
html[data-skin="deep-radio"] .hero::after { background-image:url('/shop/assets/uploads/theme-v141/deep-radio.webp?v=160'); }
html[data-skin="sunset-mart"] .hero { background:linear-gradient(112deg,#fff3d0,#f5d39d 60%,#b9d1bd); border-color:#98734c; }
html[data-skin="sunset-mart"][data-theme="dark"] .hero { background:linear-gradient(112deg,#293937,#4a4032 60%,#66513b); }
html[data-skin="sunset-mart"] .hero::after { background-image:url('/shop/assets/uploads/theme-v141/sunset-mart.webp?v=160'); }
:is(html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"]) .site-title { color:var(--accent); background:none; -webkit-text-fill-color:currentColor; }
:is(html[data-skin="hanami"],html[data-skin="pixel-arcade"],html[data-skin="deep-radio"],html[data-skin="sunset-mart"]) .link-card { border-color:var(--line); }
html[data-skin="hanami"] .link-card { box-shadow:0 4px 14px rgba(117,46,58,.1),inset 0 1px 0 rgba(255,255,255,.7); }
html[data-skin="pixel-arcade"] .link-card { border-radius:6px; box-shadow:4px 4px 0 #252b35; }
html[data-skin="deep-radio"] .link-card { box-shadow:0 8px 25px rgba(0,0,0,.2),inset 0 0 0 1px rgba(76,224,208,.08); }
html[data-skin="sunset-mart"] .link-card { box-shadow:0 5px 0 rgba(88,103,79,.2),0 10px 24px rgba(78,69,48,.08); }
@media (max-width:619px) {
    :is(html[data-skin="aurora"],html[data-skin="manga"]) .container { padding:16px 14px 24px; }
    :is(html[data-skin="aurora"],html[data-skin="manga"]) .hero { min-height:205px; padding:23px 18px; }
    :is(html[data-skin="aurora"],html[data-skin="manga"]) .hero::after { right:-10px; width:42%; opacity:.66; }
    :is(html[data-skin="aurora"],html[data-skin="manga"]) .site-title { font-size:clamp(25px,7vw,34px); }
    :is(html[data-skin="aurora"],html[data-skin="manga"]) .site-subtitle { max-width:69%; font-size:12px; }
    :is(html[data-skin="aurora"],html[data-skin="manga"]) .trust-row { max-width:100%; margin-top:13px; }
}

/* v144: three new identity systems for the entry page. */
html[data-skin="cyber-blackbox"] { --paper:#0b1015; --surface:#151d24; --surface-2:#1d2930; --surface-3:#19232a; --ink:#e9ffd6; --ink-2:#a8c5b0; --line:#52694c; --line-2:rgba(184,255,67,.25); --accent:#b8ff43; --accent-ink:#47620b; --accent-soft:rgba(184,255,67,.13); }
html[data-skin="cyber-blackbox"][data-theme="light"] { --paper:#e6eee5; --surface:#f7fff1; --surface-2:#e2eedf; --surface-3:#f0f8eb; --ink:#15251c; --ink-2:#4e6954; --line:#91a98d; --line-2:rgba(53,95,49,.22); --accent:#587f18; --accent-ink:#34550b; --accent-soft:rgba(88,127,24,.12); }
html[data-skin="y2k-bubblehouse"] { --paper:#f5f1ff; --surface:rgba(255,255,255,.9); --surface-2:#f3ebff; --surface-3:#fbf7ff; --ink:#302448; --ink-2:#776589; --line:#c9b8e4; --line-2:rgba(124,82,184,.2); --accent:#8554d7; --accent-ink:#673cae; --accent-soft:rgba(133,84,215,.12); }
html[data-skin="y2k-bubblehouse"][data-theme="dark"] { --paper:#171426; --surface:#252039; --surface-2:#302842; --surface-3:#28233b; --ink:#f8f0ff; --ink-2:#d1bddf; --line:#63527f; --line-2:rgba(221,183,255,.2); --accent:#e2a8ff; --accent-ink:#f0caff; --accent-soft:rgba(226,168,255,.14); }
html[data-skin="shanhai-bestiary"] { --paper:#f1e8d2; --surface:#fbf6e8; --surface-2:#eee4ca; --surface-3:#f7f0dd; --ink:#233d38; --ink-2:#65766a; --line:#b6a174; --line-2:rgba(59,91,75,.22); --accent:#a84332; --accent-ink:#81392e; --accent-soft:rgba(168,67,50,.12); }
html[data-skin="shanhai-bestiary"][data-theme="dark"] { --paper:#172723; --surface:#233832; --surface-2:#2d443c; --surface-3:#273c35; --ink:#f3edda; --ink-2:#c6c1a9; --line:#718d78; --line-2:rgba(223,195,125,.2); --accent:#e2bd73; --accent-ink:#f0d79c; --accent-soft:rgba(226,189,115,.14); }
:is(html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) body { background-color:var(--paper); color:var(--ink); }
html[data-skin="cyber-blackbox"] body { background-image:radial-gradient(circle at 90% 4%,rgba(160,255,73,.15),transparent 35%),linear-gradient(rgba(108,190,159,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(108,190,159,.05) 1px,transparent 1px); background-size:auto,24px 24px,24px 24px; }
html[data-skin="y2k-bubblehouse"] body { background-image:radial-gradient(circle at 7% 4%,rgba(137,192,255,.23),transparent 36%),radial-gradient(circle at 95% 14%,rgba(235,156,230,.22),transparent 40%); }
html[data-skin="shanhai-bestiary"] body { background-image:radial-gradient(circle at 96% 5%,rgba(176,129,62,.17),transparent 38%),radial-gradient(rgba(72,111,93,.06) 1px,transparent 1px); background-size:auto,18px 18px; }
:is(html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero { border:1px solid var(--line); background:var(--surface); box-shadow:0 12px 32px rgba(20,30,28,.12); }
html[data-skin="cyber-blackbox"] .hero { border-radius:14px; background:linear-gradient(135deg,#121b20,#192c2b 64%,#26351e); }
html[data-skin="cyber-blackbox"][data-theme="light"] .hero { background:linear-gradient(135deg,#eff7e7,#d5e5d2 64%,#c6d9b8); }
html[data-skin="y2k-bubblehouse"] .hero { border-radius:30px; background:linear-gradient(135deg,#f9f8ff,#e6e2ff 55%,#fce7f5); box-shadow:inset 0 1px 0 #fff,0 18px 36px rgba(133,84,215,.17); }
html[data-skin="y2k-bubblehouse"][data-theme="dark"] .hero { background:linear-gradient(135deg,#25213b,#343052 55%,#402a47); }
html[data-skin="shanhai-bestiary"] .hero { border:3px double #ae9561; border-radius:12px; background:linear-gradient(135deg,#faf4df,#e7dfc4 62%,#d5e0ce); }
html[data-skin="shanhai-bestiary"][data-theme="dark"] .hero { background:linear-gradient(135deg,#20352d,#263f37 62%,#3b3b2b); }
html[data-skin="cyber-blackbox"] .hero::after { background-image:url('/shop/assets/uploads/theme-v144/cyber-blackbox.webp?v=160'); }
html[data-skin="y2k-bubblehouse"] .hero::after { background-image:url('/shop/assets/uploads/theme-v144/y2k-bubblehouse.webp?v=160'); }
html[data-skin="shanhai-bestiary"] .hero::after { background-image:url('/shop/assets/uploads/theme-v144/shanhai-bestiary.webp?v=160'); }
:is(html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .site-title { color:var(--accent); background:none; -webkit-text-fill-color:currentColor; }
:is(html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .link-card { color:var(--ink); border-color:var(--line); background:var(--surface); }
html[data-skin="cyber-blackbox"] .link-card { border-radius:12px; box-shadow:0 0 0 1px rgba(184,255,67,.08),0 10px 28px rgba(0,0,0,.17); }
html[data-skin="y2k-bubblehouse"] .link-card { border-radius:24px; box-shadow:inset 0 1px 0 #fff,0 12px 28px rgba(133,84,215,.13); }
html[data-skin="shanhai-bestiary"] .link-card { border-radius:10px; box-shadow:0 4px 0 rgba(116,91,51,.17); }
@media (max-width:619px) {
    :is(html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero { min-height:205px; padding:23px 18px; }
    :is(html[data-skin="cyber-blackbox"],html[data-skin="y2k-bubblehouse"],html[data-skin="shanhai-bestiary"]) .hero::after { right:-10px; width:42%; opacity:.72; }
}

/* v146: entry copy and artwork participate in separate grid columns. */
html[data-skin][data-theme] .hero {
 display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
 column-gap:20px; row-gap:12px; align-items:center;
 padding:28px; min-height:320px; text-align:left;
}
html[data-skin][data-theme] .hero > :not(.hero-mascot) { grid-column:1; min-width:0; max-width:100%; margin:0; }
html[data-skin][data-theme] .hero .site-title { grid-row:1; align-self:end; overflow-wrap:anywhere; }
html[data-skin][data-theme] .hero .site-subtitle { grid-row:2; }
html[data-skin][data-theme] .hero .trust-row { grid-row:3; align-self:start; justify-content:flex-start; flex-wrap:wrap; }
html[data-skin][data-theme] .hero::after {
 position:relative; grid-column:2; grid-row:1 / 4; align-self:stretch;
 inset:auto; width:100%; height:100%; min-height:250px; z-index:0;
 background-size:contain; background-position:center; opacity:1;
}
html[data-skin] .hd-skin-fab { position:fixed; top:50%; right:16px; bottom:auto; left:auto; transform:translateY(-50%); margin:0; }
@media(max-width:620px) {
 html[data-skin][data-theme] .hero { padding:12px 14px; column-gap:12px; row-gap:10px; min-height:225px; }
 html[data-skin][data-theme] .hero::after { min-height:190px; }
 html[data-skin][data-theme] .hero .site-title { font-size:clamp(23px,6vw,32px); }
 html[data-skin][data-theme] .hero .site-subtitle { font-size:12px; line-height:1.6; }
 html[data-skin][data-theme] .hero .trust-chip { font-size:11px; padding:5px 8px; }
}

/* v147: give entry copy more space while keeping an inset art column. */
@media(max-width:620px) {
 html[data-skin][data-theme] .hero { grid-template-columns:minmax(0,2.15fr) minmax(0,1fr); column-gap:8px; }
 html[data-skin][data-theme] .hero .site-subtitle { font-size:clamp(10px,2.9vw,12px); text-wrap:pretty; }
 html[data-skin][data-theme] .hero .trust-row { gap:4px; }
 html[data-skin][data-theme] .hero .trust-chip { gap:3px; padding:5px clamp(3px,1vw,6px); font-size:clamp(9px,2.55vw,11px); white-space:nowrap; flex-shrink:0; }
 html[data-skin][data-theme] .hero .trust-chip svg { width:1em; height:1em; flex-shrink:0; }
}

/* ==== ui.css ==== */
/* ============================================================
 * 红豆商城 · 全局交互反馈层（v46）
 * 入口页 + 商城的每一页都加载，且放在全部样式表最后。
 *
 * 1. 关掉移动端浏览器「点哪儿哪儿亮一块」的蓝色/灰色高亮（tap-highlight）
 *    —— 入口页 / 商城 / 后台统一，不再出现难看的蓝块
 * 2. 键盘可达性保留：只有鼠标/触摸点出来的焦点才不画外框（:focus-visible）
 * 3. Material 风格点击波纹 .hd-ripple（由 shop/assets/js/ui.js 生成元素）
 * 4. 全部可点元素统一的按压反馈：缩放 + 底色/亮度变化，一眼能看见
 * ============================================================ */

/* ---- 1. 点击高亮：全站关掉（入口页原来漏了这条，导致点按钮还冒蓝块） ---- */
html, body { -webkit-tap-highlight-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-touch-callout: none; }
:focus:not(:focus-visible) { outline: none; }

/* ---- 2. 点击波纹：从手指/鼠标按下的那个点扩散 ----
 * 颜色与强度按场景分：浅底元素用「深色低透明度」，深底/主色元素用白色高一点的透明度。
 * 不透明度用「先保持、后衰减」——整段线性淡出的话，等圆圈长大时已经快透明了。
 * 通过 CSS 变量出参，宿主元素只需要覆盖 --rip-* 三个值。 */
.hd-ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    /* v53: 波纹默认用主色（朱砂），不再用灰黑的 currentColor —— 品牌感更强 */
    background: var(--rip-bg, var(--accent, currentColor));
    transform: scale(0);
    animation: hd-ripple-out .6s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes hd-ripple-out {
    0%   { transform: scale(0);   opacity: var(--rip-op, .25); }
    55%  { transform: scale(.82); opacity: var(--rip-mid, .2); }
    100% { transform: scale(1);   opacity: 0; }
}
/* 深底元素（填充按钮 / 主色胶囊 / hero 按钮）上换白色波纹，亮一点才看得见。
 * 注意 nav-pill-accent 是「浅底主色字」，用默认深色波纹即可。 */
.btn-primary, .btn-gradient, .chip.is-primary, .isekai-hero-link {
    --rip-bg: #fff; --rip-op: .42; --rip-mid: .34;
}

/* ---- 3. 按压反馈：所有可点元素 ----
 * v47：品牌 logo、汉堡菜单、规格选择、数量加减、分享、支付方式、展开全文、
 * 登录/注册页签、会员中心快捷入口、hero 按钮 全部补齐（对应 ui.js 的选择器）。 */
.btn, .chip, .subcat, .nav-pill, .nav-icon-btn, .nav-toggle, .navbar-brand,
.hd-skin-fab, .hd-skin-item, .skin-menu__item, .layout-menu__item, .drawer-link,
.account-tabs button, .auth-tabs button, .amt-chip, .pay, .pay-method, .variant-item,
.change-num-sub, .change-num-add, .desc-more, .shared-button, .acc-quick__item,
.theme-seg__btn, .msg-item, [data-tab], .isekai-hero-link, .item-card, .link-card, .promo-banner {
    transition: transform .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                background-color .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                border-color .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                box-shadow .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                opacity .14s var(--ease, cubic-bezier(.22, .61, .36, 1));
}
.btn:active { transform: scale(.96) translateY(1px); filter: brightness(.94); }
.chip:active, .subcat:active, .nav-pill:active { transform: scale(.92); }
.nav-icon-btn:active, .nav-toggle:active, .hd-skin-fab:active, .hd-skin-item:active,
.drawer-link:active, .skin-menu__item:active, .layout-menu__item:active,
.account-tabs button:active, .auth-tabs button:active, .amt-chip:active, .pay:active,
.pay-method:active, .variant-item:active, .acc-quick__item:active { transform: scale(.94); }
.change-num-sub:active, .change-num-add:active, .shared-button:active { transform: scale(.9); }
.theme-seg__btn:active { transform: scale(.9); }
.desc-more:active { transform: scale(.97); }
.msg-item:active { transform: scale(.992); }
[data-tab]:active { transform: scale(.97); }
.navbar-brand:active, .isekai-hero-link:active { transform: scale(.96); }
.item-card:active, .link-card:active, .promo-banner:active { transform: scale(.98); }
/* v53: 按压反馈从「变个灰底」升级为「主色染色 + 边框点亮 + 阴影收紧」，
 * 松手回弹 —— 每类控件都有符合自己形态的明确反馈： */
/* 填充按钮：压暗 + 下沉 + 阴影收紧（物理按压感） */
.btn-primary:active, .btn-gradient:active {
    filter: brightness(.88);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
}
/* 实心主色胶囊：保持实心、压暗一点，不再按成浅红 */
.chip.is-primary:active {
    background: var(--accent); border-color: var(--accent); color: #fff;
    filter: brightness(.88);
}
/* 描边/文字按钮：主色染色点亮 */
.btn-outline:active {
    background: var(--accent-soft); border-color: var(--accent);
    color: var(--accent-ink); box-shadow: none;
}
.btn-text:active, .btn-ghost:active { background: var(--accent-soft); color: var(--accent-ink); }
/* 浅底胶囊/规格：浅主色底 + 主色描边 */
.chip:active, .subcat:active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-ink);
}
/* 商品卡：主色描边代替灰底，按下像「被选中」 */
.item-card:active { background: var(--surface); border-color: var(--accent); }
.link-card:active { border-color: var(--card-color, var(--accent)); }
.promo-banner:active { border-color: var(--promo-color, var(--accent)); }
/* 桌面悬停：填充按钮微微上浮 + 主色泛光（松手/移开即回落） */
@media (hover: hover) {
    .btn-primary { transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), filter .18s var(--ease, ease); }
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 38%, transparent);
    }
}
/* 图片类（不能装波纹子元素）：用透明度做按压反馈 */
.item-cover:active { opacity: .85; }
/* 行内文字链接（装不下波纹）：用变淡做反馈 */
.auth-guest a:active, .desc-scroll a:active, .footer a:active { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    .hd-ripple { display: none; }
    .btn:active, .chip:active, .subcat:active, .nav-pill:active, .nav-icon-btn:active,
    .nav-toggle:active, .navbar-brand:active, .hd-skin-fab:active, .hd-skin-item:active,
    .drawer-link:active, .skin-menu__item:active, .layout-menu__item:active,
    .account-tabs button:active, .auth-tabs button:active, .item-card:active, .link-card:active,
    .promo-banner:active, .amt-chip:active, .pay:active, .pay-method:active, .variant-item:active,
    .change-num-sub:active, .change-num-add:active, .desc-more:active, .shared-button:active,
    .acc-quick__item:active, .isekai-hero-link:active, .theme-seg__btn:active { transform: none; }
}

/* ==== v160：入口页 hero 角色图改用 <img>（iOS Safari 伪元素背景图渲染兼容）==== */
.hero-figure {
    position: absolute; z-index: 0; pointer-events: none;
    right: 4%; bottom: -24px; width: 42%; height: 390px;
    object-fit: contain; object-position: center bottom;
}
@media (max-width: 900px) { .hero-figure { right: 0; width: 46%; } }
@media (max-width: 620px) { .hero-figure { right: -24px; bottom: -8px; width: 48%; height: 235px; opacity: .62; } }
@media (max-width: 359px) { .hero-figure { opacity: .36; } }
.hero::after { background-image: none !important; }