/* ============================================================
 * PICASSOS 主站 · 三套配色皮肤层（2026-11-01 新增）
 * ------------------------------------------------------------
 * 老大要："米白 / 黑金 / picasso.org.cn 这种，三种配色，右下角圆圈连续点。"
 *
 * 三个 html 状态（互斥，切换时先清空再写）：
 *   html.skin-ivory  ——  ① 米白（纸白·墨黑·细金线）  美术馆/画廊
 *   html.dark        ——  ② 黑金（沿用 dark.css v2）  夜展/奢侈品
 *   html.skin-pop    ——  ③ 波普（亮黄·纯黑·克莱因蓝） 毕加索官方
 *
 * 为什么皮肤层能覆盖：本文件在 luxe.css 之后加载，选择器特异性
 * 与 main.css / dark.css 同级（html.class + 单/双类），靠"后到者赢"。
 * 凡遇到 main.css 写了 !important 的地方，这里同样 !important。
 *
 * 回退：删本文件 + header.php 一行「skins.css」引用；
 *       footer.php 浮球还原为二态即可，其余文件一行未动。
 * ============================================================ */

/* ============================================================
 * ① 米白 IVORY —— 纸白 + 墨黑 + 细金线
 * ------------------------------------------------------------
 * 老大上一版骂过"米黄大块难看"。病因不是"米"这个色，而是：
 *   底色 #F5F1E8 偏黄、卡片又是纯白、强调色还是红 → 三种暖色互相顶。
 * 这一版把"暖"抽掉：底色降到黄度更低的中性纸白（R236 G233 B226，
 * 明度差只有 3 个色阶），正文用近黑，金退成 1px 线和小字标签，
 * 唯一强对比交给「墨黑实底 CTA」—— 美术馆海报就是这么干的。
 *
 * 色板：
 *   paper  #F6F3EC  纸白底        surface #FBF9F4  分区
 *   card   #FFFFFF  卡片/浮层
 *   ink    #17171A  正文/标题     sub     #5B5850  次文字
 *   mute   #8C877C  弱文字
 *   line   rgba(23,23,26,.09)     金线 rgba(160,126,58,.24)
 *   gold   #A07E3A  金（仅线/标签）  deep #7A5C24  金 hover
 * ============================================================ */

html.skin-ivory{
    --color-bg: #F6F3EC !important;
    --color-bg-light: #F6F3EC !important;
    --color-bg-secondary: #FBF9F4 !important;
    --color-bg-card: #FFFFFF !important;
    --color-text: #17171A !important;
    --color-text-secondary: #5B5850 !important;
    --color-text-muted: #8C877C !important;
    --color-border: rgba(23,23,26,.09) !important;
    --color-primary: #17171A !important;
    --color-accent: #A07E3A !important;
    --color-gold: #A07E3A !important;

    --sk-bg:#F6F3EC;
    --sk-surface:#FBF9F4;
    --sk-card:#FFFFFF;
    --sk-raise:#FFFFFF;
    --sk-ink:#17171A;
    --sk-sub:#5B5850;
    --sk-mute:#6E6A60;
    --sk-line:rgba(23,23,26,.09);
    --sk-gold:rgba(160,126,58,.24);
    /* 2026-11-02 00:30 对比度实测（像素取样，纸底 #F6F3EC）：
       金 #A07E3A 压纸白只有 3.2~3.8:1 —— 10~13px 的展签小字（MASTERPIECE /
       标准尺寸 / 系列编号）读起来发虚；这支"亮金"只配做**线**，不配做**字**。
       于是 --sk-gold-ink 直接并到深金 #7A5C24（5.6:1），灰色 --sk-mute 也压深
       到 #6E6A60（4.9:1）。金线、金块、hover 一律不动，还是同一支色。 */
    --sk-gold-ink:#7A5C24;
    --sk-gold-deep:#7A5C24;
    color-scheme: light;

    /* luxe 层金属色阶：纸面上要压暗，不然金属字发白看不见 */
    --lx-gold-1:#6E5320;
    --lx-gold-2:#92702D;
    --lx-gold-3:#B8933F;
    --lx-gold-4:#D8BE7C;
    --lx-metal: linear-gradient(100deg,#6E5320 0%,#92702D 16%,#C9A75C 30%,#A07E3A 44%,#7A5C24 58%,#B0904A 74%,#6E5320 100%);
    --lx-noise-op:.055;
    --lx-frame:#FFFFFF;
    --lx-frame-line:rgba(160,126,58,.28);
}

html.skin-ivory body{
    background:var(--sk-bg) !important;
    color:var(--sk-ink) !important;
}
html.skin-ivory ::selection{ background:rgba(160,126,58,.22); color:#17171A; }

/* ---------- 顶部导航 ---------- */
html.skin-ivory .site-header{
    background:rgba(246,243,236,.86) !important;
    border-bottom:1px solid rgba(23,23,26,.08) !important;
    backdrop-filter:blur(22px) saturate(1.05);
}
html.skin-ivory .site-logo,
html.skin-ivory .site-header .logo{ color:var(--sk-ink) !important; }
html.skin-ivory .main-nav a,
html.skin-ivory .nav-link{ color:#4A473F !important; }
html.skin-ivory .main-nav a:hover,
html.skin-ivory .main-nav a.active,
html.skin-ivory .main-nav a.current-menu-item,
html.skin-ivory .nav-link:hover,
html.skin-ivory .nav-link.active{ color:var(--sk-ink) !important; }
html.skin-ivory .main-nav a.reg{
    border-color:rgba(23,23,26,.18) !important;
    color:var(--sk-ink) !important;
}
html.skin-ivory .main-nav a.reg:hover{ background:rgba(23,23,26,.05) !important; }

/* ---------- 首屏 ---------- */
html.skin-ivory .hero-section{
    background:
        radial-gradient(900px 460px at 80% -14%, rgba(160,126,58,.055), transparent 66%),
        linear-gradient(180deg,#FBF9F4 0%,var(--sk-bg) 74%) !important;
}
html.skin-ivory .hero-title,
html.skin-ivory .hero-headline{ color:var(--sk-ink) !important; }
html.skin-ivory .hero-headline .highlight,
html.skin-ivory .hero-title em,
html.skin-ivory .hero-title strong{ color:var(--sk-gold-deep) !important; }
html.skin-ivory .hero-lead,
html.skin-ivory .hero-subtitle{ color:var(--sk-sub) !important; }
html.skin-ivory .hero-kicker{ color:var(--sk-gold-ink) !important; letter-spacing:2.5px; }
html.skin-ivory .hero-badge{
    background:rgba(160,126,58,.07) !important;
    border-color:rgba(160,126,58,.28) !important;
    color:var(--sk-gold-deep) !important;
}
html.skin-ivory .hero-card{
    background:var(--sk-card) !important;
    border:1px solid rgba(23,23,26,.08) !important;
    box-shadow:0 24px 60px rgba(23,23,26,.07) !important;
}
html.skin-ivory .hero-open-btn,
html.skin-ivory .hero-close-btn{ color:var(--sk-gold-deep) !important; }
html.skin-ivory .hero-media{ background:#EDEAE2 !important; }
html.skin-ivory .hero-sub-link{
    color:var(--sk-sub) !important;
    border-bottom-color:rgba(160,126,58,.28) !important;
}
html.skin-ivory .hero-sub-link:hover{ color:var(--sk-ink) !important; border-bottom-color:var(--sk-gold-deep) !important; }

/* ---------- 区块底色：靠明度切节奏，白—纸白交替 ---------- */
/* 节奏：纸白 → 纯白 → 纸白 → 纯白 ……
   原来六个区全是 #FBF9F4，跟纸白只差 5 个明度级，等于一整块；
   现在差 10 级，像"画册页 / 展墙"交替，闭着眼也分得出段。 */
html.skin-ivory .series-section,
html.skin-ivory .scenes-section,
html.skin-ivory .apply-preview{ background:var(--sk-bg) !important; }
html.skin-ivory .paintings-section,
html.skin-ivory .preview-promo,
html.skin-ivory .faq-section,
html.skin-ivory .brand-section,
html.skin-ivory .feature-section,
html.skin-ivory .stats-section{ background:#FFFFFF !important; }
html.skin-ivory .series-section,
html.skin-ivory .paintings-section,
html.skin-ivory .scenes-section{ border-bottom:1px solid var(--sk-line) !important; }

/* ---------- 区块标题 ---------- */
html.skin-ivory .section-label{ color:var(--sk-gold-ink) !important; letter-spacing:3.5px; }
html.skin-ivory .section-title{ color:var(--sk-ink) !important; }
html.skin-ivory .section-note{ color:var(--sk-mute) !important; }
html.skin-ivory .section-header .en,
html.skin-ivory .sec-en{ color:rgba(160,126,58,.9) !important; }

/* ---------- 卡片 ----------
   注意：.painting-card 不在这组里。它的立体木框是 luxe.css 用
   `background:url(frame-walnut) !important` 铺的（特异性 0,2,0），
   而 `html.skin-* .painting-card` 是 0,2,1 —— 更高，一旦写 background
   简写就会把木框整个吃掉，退化成一张白卡。名画卡单独在下面处理。 */
/* 纸白底上放白卡：1px .075 的边根本立不住（明度只差 4 级），
   把边压到 .12 并加一层贴地阴影，卡片才"离纸面浮起来"。 */
html.skin-ivory .series-card,
html.skin-ivory .scene-card,
html.skin-ivory .feature-card,
html.skin-ivory .stat-card{
    background:var(--sk-card) !important;
    border:1px solid rgba(23,23,26,.12) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 28px rgba(23,23,26,.075) !important;
}
html.skin-ivory .paintings-track .painting-card{
    box-shadow:0 22px 44px -20px rgba(23,23,26,.22), 0 5px 14px rgba(23,23,26,.09) !important;
}
html.skin-ivory .paintings-track .painting-card:hover{
    box-shadow:0 30px 60px -22px rgba(23,23,26,.3), 0 8px 20px rgba(23,23,26,.14) !important;
}
html.skin-ivory .series-card:hover,
html.skin-ivory .scene-card:hover{
    border-color:rgba(160,126,58,.4) !important;
    box-shadow:0 22px 52px rgba(23,23,26,.1), 0 0 0 1px rgba(160,126,58,.12) !important;
}
html.skin-ivory .series-name,
html.skin-ivory .scene-name,
html.skin-ivory .painting-name,
html.skin-ivory .scene-card .scene-name{ color:var(--sk-ink) !important; }
html.skin-ivory .series-desc,
html.skin-ivory .scene-desc,
html.skin-ivory .painting-desc{ color:var(--sk-sub) !important; }
html.skin-ivory .series-en,
html.skin-ivory .series-size{ color:var(--sk-gold-ink) !important; }
html.skin-ivory .series-link,
html.skin-ivory .scene-link,
html.skin-ivory .painting-link{ color:var(--sk-gold-deep) !important; }
html.skin-ivory .series-link:hover,
html.skin-ivory .scene-link:hover{ color:var(--sk-ink) !important; }
html.skin-ivory .series-image,
html.skin-ivory .scene-image{ position:relative; background:#EFECE4 !important; }
html.skin-ivory .series-image::after,
html.skin-ivory .scene-image::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(23,23,26,.07);
}
html.skin-ivory .series-num{
    background:rgba(255,255,255,.86) !important;
    color:var(--sk-gold-deep) !important;
    border:1px solid rgba(160,126,58,.3) !important;
    backdrop-filter:blur(6px);
    letter-spacing:1px;
}

/* ---------- 名画区 ---------- */
html.skin-ivory .paintings-track{ background:transparent !important; }
html.skin-ivory .paintings-more{ color:var(--sk-gold-deep) !important; }
html.skin-ivory .painting-frame,
html.skin-ivory .painting-meta{ background:var(--sk-card) !important; border-color:var(--sk-line) !important; }
html.skin-ivory .painting-overlay{
    background:linear-gradient(to top,rgba(16,15,13,.9) 0%,rgba(16,15,13,.45) 46%,transparent 100%) !important;
}
html.skin-ivory .painting-overlay h4{ color:#FBF9F4 !important; }
html.skin-ivory .painting-en{ color:rgba(228,206,155,.92) !important; }
html.skin-ivory .painting-year{ color:rgba(246,243,236,.72) !important; }

/* ---------- 按钮：墨黑实底 = 唯一强 CTA（金退到线） ---------- */
html.skin-ivory .btn-primary,
html.skin-ivory .btn-red,
html.skin-ivory .hero-actions .btn-primary{
    background:var(--sk-ink) !important;
    border:1px solid var(--sk-ink) !important;
    color:#F8F6F0 !important;
    font-weight:700 !important;
    box-shadow:0 8px 24px rgba(23,23,26,.16) !important;
}
html.skin-ivory .btn-primary:hover,
html.skin-ivory .btn-primary:active,
html.skin-ivory .hero-actions .btn-primary:hover{
    background:#000 !important;
    border-color:#000 !important;
    color:#FFF !important;
    box-shadow:0 14px 34px rgba(23,23,26,.24) !important;
}
html.skin-ivory .hero-actions .btn-primary.btn-outline{
    background:transparent !important;
    border:1px solid rgba(23,23,26,.22) !important;
    color:var(--sk-ink) !important;
    font-weight:500 !important;
    box-shadow:none !important;
}
html.skin-ivory .hero-actions .btn-primary.btn-outline:hover{
    background:rgba(23,23,26,.05) !important;
    border-color:rgba(23,23,26,.45) !important;
    color:#000 !important;
}
html.skin-ivory .btn-outline,
html.skin-ivory .btn-ghost,
html.skin-ivory .btn-secondary{
    background:transparent !important;
    border:1px solid rgba(23,23,26,.2) !important;
    color:var(--sk-ink) !important;
}
html.skin-ivory .btn-outline:hover,
html.skin-ivory .btn-ghost:hover,
html.skin-ivory .btn-secondary:hover{
    background:rgba(23,23,26,.05) !important;
    border-color:rgba(23,23,26,.44) !important;
    color:#000 !important;
}

/* ---------- 功能说明条 ---------- */
html.skin-ivory .tool-strip{
    background:var(--sk-surface) !important;
    border-top:1px solid var(--sk-line) !important;
    border-bottom:1px solid var(--sk-line) !important;
}
html.skin-ivory .tool-strip p{ color:var(--sk-mute) !important; }
html.skin-ivory .tool-strip b{ color:var(--sk-gold-deep) !important; }

/* ---------- 实景预告区 ---------- */
html.skin-ivory .promo-label{ color:var(--sk-gold-ink) !important; }
html.skin-ivory .promo-badge{
    background:var(--sk-ink) !important;
    color:#F8F6F0 !important;
    font-weight:700 !important;
    letter-spacing:2px;
}
html.skin-ivory .promo-copy .btn-primary{
    background:var(--sk-ink) !important;
    color:#F8F6F0 !important;
    border-color:var(--sk-ink) !important;
}
html.skin-ivory .promo-features li::before{ background:var(--sk-gold-deep) !important; }
html.skin-ivory .promo-title{ color:var(--sk-ink) !important; }
html.skin-ivory .promo-desc,
html.skin-ivory .promo-features li{ color:var(--sk-sub) !important; }
html.skin-ivory .promo-card,
html.skin-ivory .faq-card{
    background:var(--sk-card) !important;
    border:1px solid var(--sk-line) !important;
}
html.skin-ivory .promo-visual-top{
    background:var(--sk-card) !important;
    border-color:rgba(23,23,26,.1) !important;
    box-shadow:0 14px 34px rgba(23,23,26,.1) !important;
    color:var(--sk-gold-deep) !important;
}
html.skin-ivory .promo-visual-top span{ color:var(--sk-gold-deep) !important; }
html.skin-ivory .promo-visual-note{ color:var(--sk-mute) !important; }

/* ---------- FAQ ---------- */
html.skin-ivory .faq-item{
    background:var(--sk-card) !important;
    border:1px solid rgba(23,23,26,.12) !important;
    box-shadow:0 8px 22px rgba(23,23,26,.05) !important;
}
html.skin-ivory .faq-q{ color:var(--sk-ink) !important; }
html.skin-ivory .faq-a{ color:var(--sk-sub) !important; }

/* ---------- 申请表单区 ---------- */
html.skin-ivory .apply-preview{
    background:
        radial-gradient(760px 300px at 22% 0%, rgba(160,126,58,.05), transparent 62%),
        var(--sk-surface) !important;
    border-top:1px solid var(--sk-line);
    border-bottom:1px solid var(--sk-line);
}
html.skin-ivory .apply-badge{
    background:rgba(160,126,58,.08) !important;
    border:1px solid rgba(160,126,58,.26) !important;
    color:var(--sk-gold-deep) !important;
}
html.skin-ivory .apply-title{ color:var(--sk-ink) !important; }
html.skin-ivory .apply-desc{ color:var(--sk-sub) !important; }
html.skin-ivory .apply-points li{ color:var(--sk-sub) !important; }
html.skin-ivory .apply-points b{ color:var(--sk-ink) !important; }
html.skin-ivory .apply-points li::before{ background:var(--sk-gold-deep) !important; }

html.skin-ivory .pcs-form{
    background:var(--sk-card) !important;
    border:1px solid rgba(23,23,26,.075) !important;
    box-shadow:0 28px 64px rgba(23,23,26,.08) !important;
}
html.skin-ivory .pcs-form__title{ color:var(--sk-ink) !important; }
html.skin-ivory .pcs-form__sub{ color:var(--sk-mute) !important; }
html.skin-ivory .pcs-field label{ color:var(--sk-sub) !important; }
html.skin-ivory .pcs-field .req{ color:#B0563C !important; }
html.skin-ivory .pcs-form input[type="text"],
html.skin-ivory .pcs-form input[type="tel"],
html.skin-ivory .pcs-form input[type="email"],
html.skin-ivory .pcs-form textarea,
html.skin-ivory .pcs-form select{
    background:#FBFAF7 !important;
    border:1px solid rgba(23,23,26,.13) !important;
    color:var(--sk-ink) !important;
}
html.skin-ivory .pcs-form input::placeholder,
html.skin-ivory .pcs-form textarea::placeholder{ color:#A8A39A !important; }
html.skin-ivory .pcs-form input:focus,
html.skin-ivory .pcs-form textarea:focus,
html.skin-ivory .pcs-form select:focus{
    border-color:rgba(160,126,58,.7) !important;
    background:#FFF !important;
    box-shadow:0 0 0 3px rgba(160,126,58,.1) !important;
    outline:none !important;
}
html.skin-ivory .pcs-submit{
    background:var(--sk-ink) !important;
    color:#F8F6F0 !important;
    font-weight:700 !important;
    border:none !important;
    box-shadow:0 10px 28px rgba(23,23,26,.18) !important;
}
html.skin-ivory .pcs-submit:hover{ background:#000 !important; }
html.skin-ivory .pcs-note{ color:#9C978E !important; }
html.skin-ivory .pcs-done__t{ color:var(--sk-ink) !important; }
html.skin-ivory .pcs-done__d{ color:var(--sk-sub) !important; }

/* ---------- 城市授权 banner：亮色下保持深墨块（对照） ---------- */
html.skin-ivory .biz-banner{
    background:#17161A !important;
    border-top:1px solid rgba(160,126,58,.24) !important;
    border-bottom:1px solid rgba(160,126,58,.24) !important;
}
html.skin-ivory .biz-banner .biz-tag{
    background:rgba(201,165,94,.09) !important;
    border-color:rgba(201,165,94,.32) !important;
    color:#D8BE8C !important;
}
html.skin-ivory .biz-banner h2{ color:#F4EFE4 !important; }
html.skin-ivory .biz-banner h2 em{ color:#E9D6A6 !important; }
html.skin-ivory .biz-banner p{ color:#A9A091 !important; }
html.skin-ivory .biz-banner .biz-btn{
    background:#F4EFE4 !important;
    color:#17161A !important;
    font-weight:700 !important;
    box-shadow:none !important;
}
html.skin-ivory .biz-banner .biz-btn:hover{ background:#FFF !important; }
html.skin-ivory .biz-banner .biz-link{ color:#C9B78E !important; }
html.skin-ivory .biz-banner .biz-stats div{
    border-color:rgba(255,255,255,.09) !important;
    background:transparent !important;
}
html.skin-ivory .biz-banner .biz-stats b{ color:#E9D6A6 !important; }
html.skin-ivory .biz-banner .biz-stats span{ color:#8E8779 !important; }
html.skin-ivory .biz-ghost{ -webkit-text-stroke:1px rgba(201,165,94,.14); }

/* ---------- 页脚（米黄 · 2026-11-02 老大定：米白皮肤页脚用米黄） ---------- */
html.skin-ivory .site-footer{
    background:#F4E9CE !important;
    border-top:1px solid rgba(160,126,58,.32) !important;
    color:#5B564C !important;
}
html.skin-ivory .site-footer .footer-brand h3,
html.skin-ivory .site-footer .footer-nav h4,
html.skin-ivory .site-footer .footer-contact h4,
html.skin-ivory .site-footer .footer-col h4,
html.skin-ivory .site-footer b{ color:#1B1A17 !important; }
html.skin-ivory .site-footer .footer-brand p,
html.skin-ivory .site-footer .footer-nav a,
html.skin-ivory .site-footer .footer-contact p,
html.skin-ivory .site-footer .footer-col a,
html.skin-ivory .site-footer .footer-col span,
html.skin-ivory .site-footer .footer-bottom,
html.skin-ivory .site-footer .footer-bottom p,
html.skin-ivory .site-footer .footer-note,
html.skin-ivory .site-footer .footer-license{ color:#5B564C !important; }
html.skin-ivory .site-footer .footer-nav a:hover,
html.skin-ivory .site-footer .footer-contact a:hover,
html.skin-ivory .site-footer .footer-bottom a:hover{ color:#7A5C24 !important; }
html.skin-ivory .site-footer .footer-bottom{
    border-top:1px solid rgba(160,126,58,.22) !important;
}
html.skin-ivory .site-footer .footer-dot,
html.skin-ivory .site-footer .dot.red,
html.skin-ivory .site-footer .official-dot{ background:#A07E3A !important; }

/* ---------- 手机底部导航 ---------- */
html.skin-ivory .mobile-bottom-nav{
    background:rgba(246,243,236,.95) !important;
    border-top:1px solid rgba(23,23,26,.09) !important;
    backdrop-filter:blur(20px);
}
html.skin-ivory .bottom-nav-item{ color:#8C877C !important; }
html.skin-ivory .bottom-nav-item.active{ color:var(--sk-ink) !important; }
html.skin-ivory .mobile-nav,
html.skin-ivory .mobile-nav-panel{ background:#FBF9F4 !important; }
html.skin-ivory .mobile-nav a{ color:#5B5850 !important; border-color:rgba(23,23,26,.09) !important; }
html.skin-ivory .mobile-nav .mnav-item{ color:#5B5850 !important; }
html.skin-ivory .mobile-nav .mnav-item.active{ color:var(--sk-ink) !important; }

/* ============================================================
 * ③ 波普 POP v3 —— 品牌三色（老大 2026-11-01 22:33 定四色，23:00 撤绿变三色）
 * ------------------------------------------------------------
 * v1 只用了「亮黄 + 墨黑 + 克莱因蓝」，老大一眼否掉：太单薄。
 * v2 我从参考图 bg-mask2.png 抽了 11 个色（橘黄/紫/洋红/薄荷/橄榄…），
 * 结果颜色太多，成了"颜料盘打翻"，反而脏。
 *
 * 老大直接给了色值 —— 这就是答案，不多不少：
 *   #FFE04E 亮黄   舞台 / 大面积暖色
 *   #00A1E5 天蓝   中段彩色块 / 卡片影 / 强调 / hover
 *   #00A1E5 深蓝   深色块（名画墙 / 城市授权）/ 主 CTA / 深字底
 * 绿 #00A74B 已于 23:00 撤掉 —— 黄、蓝、白已经够"毕加索"，
 * 多一个绿相就把蓝黄关系搅浑了。三色之外只留纯黑与纯白。
 *
 * 结构：
 *   ① 九段色卡：黄 → 白 → 深蓝 → 天蓝 → 白 → 天蓝 → 白 → 深蓝 → 黑，
 *      相邻绝不重复，滚动时像在翻九张色卡；
 *   ② 首屏：黄舞台 + 白底黑框标题（内嵌深蓝高亮）+ 视频卡四色硬框 + 底部四段色带；
 *   ③ 卡片投影按 nth-child 在 深蓝/黄/天蓝 之间轮换，静态就有套色错位感；
 *   ④ 深色块用白/黄字，浅色块用纯黑字，实测对比度全 ≥ 4.5。
 * ============================================================ */

html.skin-pop{
    --color-bg: #FFE04E !important;
    --color-bg-light: #FFE04E !important;
    --color-bg-secondary: #FFFFFF !important;
    --color-bg-card: #FFFFFF !important;
    --color-text: #000000 !important;
    --color-text-secondary: #1A1A1A !important;
    --color-text-muted: #666666 !important;
    --color-border: rgba(0,161,229,.3) !important;
    --color-primary: #00A1E5 !important;
    --color-accent: #00A1E5 !important;
    --color-gold: #00A1E5 !important;

    /* 舞台与卡 */
    --pk-bg:#FFE04E;
    --pk-card:#FFFFFF;
    /* 2026-11-01 23:25 老大两句，把配色彻底定死：
       "深蓝色全换成 #00a1e5" + "文字恢复黑色"。
       于是这一版分出两个角色，别再混用：
         --pk-ink  线/影/块 —— #00A1E5（2px 描边、硬投影、色块、toast 底）
         --pk-text 文字    —— #000000（白纸上只有黑字最清楚，16:1）
       为什么必须分开：天蓝在白纸上只有 2.9:1，正文用它会累眼睛；
       而天蓝做描边和硬投影，饱和度刚好，比深蓝活泼得多。 */
    --pk-ink:#00A1E5;
    --pk-text:#000000;
    --pk-sub:#1A1A1A;
    --pk-mute:#666666;
    --pk-line:rgba(0,161,229,.3);

    /* ===== 品牌三色（老大 2026-11-01 定死；2026-11-01 夜 23:00 撤绿）=====
       #FFE04E 亮黄 —— 舞台 / 大面积暖色
       #00A1E5 天蓝 —— 中段彩色块 / 卡片影 / 强调
       深蓝 #00A1E5 于 2026-11-01 23:25 整体退役，--pk-navy 保留为**别名**
       指向 #00A1E5 —— 老规则里写 --pk-navy 的地方自动变天蓝，不用逐条改，
       也不会漏。所以现在整站只有：亮黄 / 天蓝 / 白 / 黑字。
       ⚠ 绿色 #00A74B 同理已撤：--pk-green 也是 #00A1E5 的别名。 */
    --pk-yellow:#FFE04E;
    --pk-sky:#00A1E5;
    --pk-green:#00A1E5;   /* 已弃用别名 → 天蓝 */
    --pk-navy:#00A1E5;    /* 已退役别名 → 天蓝（深蓝不再出现） */
    /* 2026-11-02 00:10 只为一件事复活"深蓝"：名画区要白字，白压天蓝只有
       2.9:1（读起来发飘），压这档钴蓝 #0A63B0 是 6.1:1 —— 同一个色相，
       深浅两档，正好把"天蓝＝亮墙 / 钴蓝＝深墙"的分工立起来。
       ⚠ 只给 .paintings-section 用，别处一律 var(--pk-sky)，波普不改味。 */
    --pk-cobalt:#0A63B0;
    --pk-paper:#FFFFFF;
    /* 老大给的 bg-above2.jpg（本地名 pop-bg.jpg，1600×900 / 45 KB）。
       这张图自带绿（左上、中部橄榄）和紫（左右边缘）—— 怎么办？
       不是给它加蒙版糊掉（老大不要灰蒙蒙），而是**只取黄区裁切**：
       background-position 全部落在 x 18~80% / y 10~92% 的黄色与品红地带，
       绿和紫根本不在视野里。每层再放大 200~300%，只留画的一小片 ——
       于是同一张画被切成五条不同颜色的"墨带"，色相全部落在
       黄 / 品红 / 深黄 这一族，不掺第五个色相。 */
    --pk-bgimg:url(/wp-content/themes/picasso/assets/images/luxe/pop-bg.jpg);

    color-scheme: light;

    --lx-gold-1:#00A1E5;
    --lx-gold-2:#00A1E5;
    --lx-gold-3:#FFE04E;
    --lx-gold-4:#00A1E5;
    --lx-metal: linear-gradient(100deg,#00A1E5 0%,#FFE04E 50%,#00A1E5 100%);
    --lx-noise-op:.05;
    --lx-frame:#FFFFFF;
    --lx-frame-line:rgba(0,161,229,.85);
}

html.skin-pop body{
    background:var(--pk-bg) !important;
    color:var(--pk-text) !important;
}
html.skin-pop ::selection{ background:var(--pk-green); color:#000000; }

html.skin-pop h1,
html.skin-pop h2,
html.skin-pop .section-title,
html.skin-pop .hero-headline{
    font-weight:900 !important;
    letter-spacing:-.02em !important;
}

/* ---------- 顶部导航：白底 + 毕加索蓝 #00A1E5（2026-11-01 老大指定） ----------
   白底是"展墙"，蓝线是分区标尺：白导航压在黄首屏上，白/黄一条硬边就分出两层；
   导航里的强调色统一收成毕加索蓝，和金/黄两组拉开距离。 */
html.skin-pop .site-header{
    background:#FFFFFF !important;
    border-bottom:3px solid var(--pk-sky) !important;
    backdrop-filter:none;
}
html.skin-pop body.luxe-scrolled .site-header{
    background:#FFFFFF !important;
    box-shadow:0 10px 26px rgba(0,161,229,.18) !important;
}
html.skin-pop .site-logo,
html.skin-pop .site-header .logo{ color:var(--pk-text) !important; }
html.skin-pop .main-nav a,
html.skin-pop .nav-link{ color:#000000 !important; font-weight:400 !important; }
/* 白导航上的 hover / active：字用黑（白底上黑 21:1），状态交给那根 4px 天蓝线，
   不拿天蓝当字色 —— 天蓝在白底只有 2.9:1，小字看不清。 */
html.skin-pop .main-nav a:hover,
html.skin-pop .main-nav a.active,
html.skin-pop .main-nav a.current-menu-item,
html.skin-pop .nav-link:hover,
html.skin-pop .nav-link.active{
    color:#000000 !important;
    box-shadow:inset 0 -4px 0 var(--pk-sky);
}
/* 城市授权 / 登录 / 注册 这几个链接在 index.php 里带 inline 金色（#B49A6A），
   白导航上那点金几乎看不见 —— 统一改成毕加索蓝；!important 压得住 inline 简写。 */
html.skin-pop .main-nav a[style*="B49A6A"],
html.skin-pop .main-nav a[style*="b49a6a"]{
    color:#000000 !important;
    border-color:var(--pk-sky) !important;
}
html.skin-pop .main-nav a.reg{
    border:2px solid var(--pk-sky) !important;
    color:#000000 !important;
    font-weight:500 !important;
}
html.skin-pop .main-nav a.reg:hover{
    background:var(--pk-sky) !important;
    color:#000000 !important;
}
/* 汉堡三条线在白底上要够黑 */
html.skin-pop .mobile-menu-btn span{ background:#00A1E5 !important; }

/* ---------- 首屏：橘黄舞台 + 几何斜切 + 五色色带 ----------
   为什么用 conic-gradient 而不是 radial：radial 的边界是圆弧，看起来像
   "打了一层光"，那是 SaaS 的语言；conic 的色停边界是**直线**，
   切出来的就是硬边三角块 —— 立体主义拿刀切开脸的那种感觉。
   角块只放在左上 / 左下（右侧是视频卡，铺了也看不见）。 */
html.skin-pop .hero-section{
    background:var(--pk-yellow) !important;
    position:relative;
    isolation:isolate;
    overflow:hidden;
}
html.skin-pop .hero-section::before{
    content:'';
    position:absolute; inset:0;
    z-index:0;
    pointer-events:none;
    /* 左右各压一条 12px 天蓝色带（像画册的色标）。
       —— 为什么不用 conic 三角：conic 的扇形面积跟半径平方走，1440 宽屏上
       一个 7deg 的小三角会张开成 400px 的色带，根本控不住。改成
       background-size 定像素的色带，尺寸完全可控。 */
    background-image:
        linear-gradient(180deg, var(--pk-sky), var(--pk-sky)),
        linear-gradient(180deg, var(--pk-green), var(--pk-green));
    background-size: 12px 100%, 12px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}
/* 底部五色色带：全宽、硬分段，整页最"波普"的一笔，且一定看得见 */
html.skin-pop .hero-section::after{
    content:'';
    position:absolute; left:0; right:0; bottom:0;
    height:20px;
    z-index:2;
    background:linear-gradient(90deg,
        var(--pk-navy) 0 25%,
        var(--pk-sky) 25% 50%,
        var(--pk-yellow) 50% 75%,
        var(--pk-navy) 75% 100%);
    border-top:2px solid var(--pk-ink);
    pointer-events:none;
}
html.skin-pop .hero-wrap{ position:relative; z-index:1; }
html.skin-pop .hero-title,
html.skin-pop .hero-headline{ color:var(--pk-text) !important; }
/* 标题第二行整体做成亮黄实底 + 2px 黑框 —— 波普海报的"色块标题"，
   比单纯给两个字上色有力得多；"你家"再压一层深蓝，形成双色套印。 */
html.skin-pop .hero-headline .pk-slash{
    display:inline-block;
    background:#FFFFFF !important;          /* 黄底上放黄块＝隐形，白块才立得住 */
    box-shadow:0 0 0 2px var(--pk-ink), 7px 7px 0 2px var(--pk-ink) !important;
    padding:0 .1em .04em !important;
    margin:2px 6px 0 0;
    color:var(--pk-text) !important;
}
html.skin-pop .hero-headline .highlight,
html.skin-pop .hero-title em,
html.skin-pop .hero-title strong{
    color:#000000 !important;
    background:var(--pk-navy) !important;   /* 白块里嵌深蓝块：双色套印 */
    padding:0 .1em !important;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
}
/* kicker 前的天蓝小方块：像展签上的色标 */
html.skin-pop .hero-kicker::before{
    content:'';
    display:inline-block;
    width:11px; height:11px;
    margin-right:9px;
    vertical-align:baseline;
    background:var(--pk-sky);
    box-shadow:0 0 0 2px var(--pk-ink);
}
html.skin-pop .hero-lead,
html.skin-pop .hero-subtitle{ color:#000000 !important; }
html.skin-pop .hero-kicker{
    color:var(--pk-text) !important;
    letter-spacing:3px;
    font-weight:800 !important;
}
html.skin-pop .hero-badge{
    background:var(--pk-sky) !important;
    border:2px solid var(--pk-ink) !important;
    color:var(--pk-text) !important;
    font-weight:700 !important;
}
/* 视频卡：纯黑框 + 白边 + 双层硬影（像贴在色卡上的一张相纸） */
/* 视频卡 = 蒙德里安拼贴框：上天蓝 / 下深蓝 / 左天蓝 / 右黑，硬边拼一圈。
   颜色全集中在这块方寸里，文案区保持纯橘黄 —— 这是唯一既"彩色"又不乱的解法。
   踩坑：这类元素的真名是 .hero-media（.hero-card 在本模板不存在），
   一开始挂到 .hero-card 上，四色框一条都没出来。 */
html.skin-pop .hero-media{
    background:#00A1E5 !important;
    /* 四边四色，但"上边"不能用黄——黄影落在黄底上等于没画，改白；
       右边原先是绿，绿色已撤，改黑：黑框贴着视频黑边像加厚装裱。 */
    box-shadow:
        -11px 0 0 0 var(--pk-sky),
        11px 0 0 0 var(--pk-ink),
        0 -11px 0 0 #FFFFFF,
        0 11px 0 0 var(--pk-navy) !important;
}
html.skin-pop .hero-open-btn,
html.skin-pop .hero-close-btn{ color:var(--pk-text) !important; }
html.skin-pop .hero-media{ background:#00A1E5 !important; }
html.skin-pop .hero-sub-link{
    color:#000000 !important;
    border-bottom-color:rgba(0,161,229,.42) !important;
}
html.skin-pop .hero-sub-link:hover{ color:var(--pk-text) !important; border-bottom-color:var(--pk-text) !important; }

/* ---------- 九块色卡：相邻区块换色相，绝不重复 ----------
   黄 → 白 → 深蓝 → 天蓝 → 白 → 天蓝 → 白 → 深蓝 → 黑
   这是参考图那种"色块拼贴"在长页面上的翻译：每一屏都有新颜色，
   但只用黄/天蓝/深蓝三色，不掺一个外来色相。 */
html.skin-pop .series-section{ background:#FFFFFF !important; }
html.skin-pop .paintings-section{ background:var(--pk-sky) !important; }
html.skin-pop .scenes-section{ background:var(--pk-sky) !important; }
html.skin-pop .preview-promo{ background:#FFFFFF !important; }
html.skin-pop .apply-preview{ background:var(--pk-sky) !important; }
html.skin-pop .faq-section{ background:#FFFFFF !important; }
html.skin-pop .biz-banner{ background:var(--pk-navy) !important; }
html.skin-pop .brand-section,
html.skin-pop .feature-section,
html.skin-pop .stats-section{ background:#FFFFFF !important; }

html.skin-pop .series-section,
html.skin-pop .preview-promo,
html.skin-pop .faq-section{
    border-top:2px solid var(--pk-ink) !important;
    border-bottom:0 !important;
}

/* ---------- 白压边：让四色从"整片底色"退成"横贯色带" ----------
   老大 22:35 一句"再通过白色调整"点在这上面：
   上一版每个彩色块铺满整屏，四色硬拼 = 颜料块砌墙，艳且闷。
   现在每块彩色区的上下各留 60px 纯白，颜色只剩中间一条横带，
   区块之间自然形成 120px 的白色呼吸 —— 白占主导，四色是标尺。
   顺带把这几块的 2px 黑顶线去掉：白接白不需要切线。 */
html.skin-pop .paintings-section{
    background:linear-gradient(180deg,#FFF 0 60px, var(--pk-cobalt) 60px calc(100% - 60px), #FFF calc(100% - 60px)) !important;
    border-top:0 !important;
}
html.skin-pop .scenes-section{
    background:linear-gradient(180deg,#FFF 0 60px, var(--pk-sky) 60px calc(100% - 60px), #FFF calc(100% - 60px)) !important;
    border-top:0 !important;
}
html.skin-pop .apply-preview{
    background:linear-gradient(180deg,#FFF 0 60px, var(--pk-sky) 60px calc(100% - 60px), #FFF calc(100% - 60px)) !important;
    border-top:0 !important;
}
html.skin-pop .biz-banner{
    background:linear-gradient(180deg,#FFF 0 60px, var(--pk-navy) 60px calc(100% - 60px), #FFF calc(100% - 60px)) !important;
    border-top:0 !important;
    border-bottom:0 !important;
}
/* 色带内侧再压一条 2px 黑线，像印刷色卡的规线 */
html.skin-pop .paintings-section,
html.skin-pop .scenes-section,
html.skin-pop .apply-preview,
html.skin-pop .biz-banner{
    box-shadow:
        inset 0 62px 0 -60px var(--pk-ink),
        inset 0 -62px 0 -60px var(--pk-ink) !important;
}

/* ---------- 区块标题 ---------- */
html.skin-pop .section-label{
    color:var(--pk-text) !important;
    letter-spacing:4px;
    font-weight:800 !important;
}
html.skin-pop .section-title{ color:var(--pk-text) !important; }
/* 标题前一根 6px 天蓝竖条：立体主义画面的"色块切口" */
html.skin-pop .section-header,
html.skin-pop .section-head{ position:relative; }
html.skin-pop .section-title::before{
    content:'';
    display:inline-block;
    width:7px; height:.82em;
    margin-right:14px;
    vertical-align:-.06em;
    background:var(--pk-green);
    border:2px solid var(--pk-ink);
}
html.skin-pop .section-note{ color:#000000 !important; }
html.skin-pop .section-header .en,
html.skin-pop .sec-en{ color:var(--pk-text) !important; font-weight:700 !important; }

/* ---------- 卡片：白底 + 2px 黑框 + 轮换彩色硬影 ---------- */
html.skin-pop .series-card,
html.skin-pop .scene-card,
html.skin-pop .feature-card,
html.skin-pop .stat-card{
    background:var(--pk-card) !important;
    border:2px solid var(--pk-ink) !important;
    box-shadow:8px 8px 0 var(--pk-navy) !important;
    transition:transform .22s var(--lx-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .22s ease !important;
}
/* 三色轮换：静态就有"印刷套色错位"的节奏，不用动效也活。
   深蓝 / 黄 / 天蓝 —— 绿色已撤，黄色硬影在白底上最跳，正好补绿的位置；
   天蓝底上必须剔掉天蓝影（否则影=底，等于没有影）。 */
html.skin-pop .series-grid > .series-card:nth-child(3n+2){ box-shadow:8px 8px 0 var(--pk-yellow) !important; }
html.skin-pop .series-grid > .series-card:nth-child(3n){ box-shadow:8px 8px 0 var(--pk-sky) !important; }
html.skin-pop .scenes-grid > .scene-card:nth-child(3n+2){ box-shadow:8px 8px 0 var(--pk-yellow) !important; }
html.skin-pop .scenes-grid > .scene-card:nth-child(3n){ box-shadow:8px 8px 0 #FFFFFF !important; }

html.skin-pop .series-card:hover,
html.skin-pop .scene-card:hover{
    transform:translate(-4px,-4px) !important;
    box-shadow:14px 14px 0 var(--pk-ink) !important;
    border-color:var(--pk-text) !important;
}
html.skin-pop .series-name,
html.skin-pop .scene-name,
html.skin-pop .scene-card .scene-name{ color:var(--pk-text) !important; font-weight:800 !important; }
html.skin-pop .series-desc,
html.skin-pop .scene-desc{ color:#000000 !important; }
html.skin-pop .series-en,
html.skin-pop .series-size{ color:var(--pk-text) !important; font-weight:700 !important; }
html.skin-pop .series-link,
html.skin-pop .scene-link{ color:var(--pk-text) !important; font-weight:800 !important; }
html.skin-pop .series-link:hover,
html.skin-pop .scene-link:hover{ color:var(--pk-text) !important; }
html.skin-pop .series-image,
html.skin-pop .scene-image{ position:relative; background:#F1EEE2 !important; border-bottom:2px solid var(--pk-ink) !important; }
html.skin-pop .series-image::after,
html.skin-pop .scene-image::after{ content:none !important; }
/* 序号角标：黑底亮黄字 */
html.skin-pop .series-num{
    background:var(--pk-ink) !important;
    color:#000000 !important;
    border:0 !important;
    font-weight:800 !important;
    letter-spacing:1px;
}

/* ---------- 名画区：天蓝展墙 + 白字（老大 2026-11-01 23:40 定）----------
   之前试过"浅底配深字"（黑字），老大否了 —— 蓝墙上要的就是一整块蓝里浮白字。
   于是标题 / 说明 / 英文标 / 卡片字 / 按钮，全部纯白，一个字不加阴影、不加描边
   （老大：文字不要加效果）。层次靠大小、字重、透明度拉开，不靠特效。
   ⚠ 白字压天蓝只有 2.9:1 —— 2026-11-02 00:10 把这块展墙单独换成钴蓝
     var(--pk-cobalt)=#0A63B0，白字升到 6.1:1，色相不变只压深一档；
     全站其他彩色块仍是天蓝 var(--pk-sky)，波普的"亮"没有被拖暗。 */
html.skin-pop .paintings-section{ background:var(--pk-cobalt) !important; }
html.skin-pop .paintings-section .section-title{ color:#FFFFFF !important; }
html.skin-pop .paintings-section .section-title::before{ background:var(--pk-yellow) !important; border:0 !important; }
html.skin-pop .paintings-section .section-note{ color:rgba(255,255,255,.9) !important; }
html.skin-pop .paintings-section .section-label{ color:rgba(255,255,255,.86) !important; font-weight:700 !important; }
html.skin-pop .paintings-section .sec-en,
html.skin-pop .paintings-section .section-header .en{ color:rgba(255,255,255,.72) !important; }
html.skin-pop .paintings-track{ background:transparent !important; --lx-frame-line:rgba(255,255,255,.6); }
html.skin-pop .paintings-more{ color:#FFFFFF !important; }
/* 名画卡：木框是底图，绝不能写 background / border —— 只换投影 */
html.skin-pop .paintings-track .painting-card{
    border:0 !important;
    box-shadow:10px 10px 0 rgba(255,224,78,.92) !important;
}
html.skin-pop .paintings-track .painting-card:nth-child(4n+2){ box-shadow:10px 10px 0 rgba(253,243,1,.9) !important; }
html.skin-pop .paintings-track .painting-card:nth-child(4n+3){ box-shadow:10px 10px 0 #FFFFFF !important; }
/* 第 4 张与 hover 原来用 --pk-navy —— 深蓝退役成天蓝后，影和墙同色等于没影，
   改用纯黑：天蓝墙上黑硬影是三色里最响的一档（黄 / 白 / 黑 轮着来）。 */
html.skin-pop .paintings-track .painting-card:nth-child(4n+4){ box-shadow:10px 10px 0 #000000 !important; }
html.skin-pop .paintings-track .painting-card:hover{
    box-shadow:14px 14px 0 #000000 !important;
}
html.skin-pop .painting-overlay h4{ color:#FFF !important; }
html.skin-pop .painting-en{ color:var(--pk-yellow) !important; }
html.skin-pop .painting-year{ color:rgba(255,255,255,.86) !important; }
html.skin-pop .painting-name{ color:#FFF !important; }

/* ---------- 名画卡展签的底：三套皮肤共同的旧账，一起修 ----------
   展签（分类 / 画名 / 说明）在 luxe.css 里已被撑满整块画芯，文字落在**顶部**；
   而浮层的黑渐变还写着 `to top` —— 深的那头压在底部，字这一头几乎全透，
   等于白字直接糊在画上。浅色画（灰墙、白裙）最明显，实测 2.4:1。
   改成"上深下透"：字在 88% 黑上 → 12:1 以上，画本身只在下半幅露出来。
   hover 才出现，不影响平时看画。 */
html.skin-pop .painting-overlay{
    background:linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 45%,
                                        rgba(0,0,0,.18) 80%, rgba(0,0,0,0) 100%) !important;
}
html.skin-ivory .painting-overlay{
    background:linear-gradient(180deg, rgba(20,17,12,.86) 0%, rgba(20,17,12,.58) 45%,
                                        rgba(20,17,12,.16) 80%, rgba(20,17,12,0) 100%) !important;
}
html.dark .painting-overlay{
    background:linear-gradient(180deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.6) 45%,
                                        rgba(8,8,10,.16) 80%, rgba(8,8,10,0) 100%) !important;
}

/* ---------- 按钮：黑底亮黄字方块（黄字在黑上 18:1，最狠的一组） ---------- */
html.skin-pop .btn-primary,
html.skin-pop .btn-red,
html.skin-pop .hero-actions .btn-primary{
    background:var(--pk-ink) !important;
    border:2px solid var(--pk-ink) !important;
    color:#000000 !important;
    font-weight:800 !important;
    letter-spacing:.02em;
    box-shadow:5px 5px 0 var(--pk-green) !important;
}
html.skin-pop .btn-primary:hover,
html.skin-pop .btn-primary:active,
html.skin-pop .hero-actions .btn-primary:hover{
    background:var(--pk-green) !important;
    border-color:var(--pk-text) !important;
    color:var(--pk-text) !important;
    transform:translate(2px,2px) !important;
    box-shadow:2px 2px 0 var(--pk-ink) !important;
}
html.skin-pop .hero-actions .btn-primary.btn-outline{
    background:var(--pk-yellow) !important;
    border:2px solid var(--pk-ink) !important;
    color:var(--pk-text) !important;
    font-weight:700 !important;
    box-shadow:5px 5px 0 var(--pk-ink) !important;
}
html.skin-pop .hero-actions .btn-primary.btn-outline:hover{
    background:var(--pk-sky) !important;
    color:var(--pk-text) !important;
    border-color:var(--pk-text) !important;
    box-shadow:2px 2px 0 var(--pk-ink) !important;
}
html.skin-pop .btn-outline,
html.skin-pop .btn-ghost,
html.skin-pop .btn-secondary{
    background:transparent !important;
    border:2px solid var(--pk-ink) !important;
    color:var(--pk-text) !important;
    font-weight:700 !important;
}
html.skin-pop .btn-outline:hover,
html.skin-pop .btn-ghost:hover,
html.skin-pop .btn-secondary:hover{
    background:var(--pk-ink) !important;
    color:#000000 !important;
}

/* ---------- 功能说明条 ---------- */
html.skin-pop .tool-strip{
    background:#FFF !important;
    border-top:2px solid var(--pk-ink) !important;
    border-bottom:2px solid var(--pk-ink) !important;
}
html.skin-pop .tool-strip p{ color:#000000 !important; }
html.skin-pop .tool-strip b{ color:var(--pk-text) !important; }

/* ---------- 实景预告区：白 ----------
   这块试过整屏洋红（像美妆促销）、也试过整屏亮黄（荧光刺眼）——
   两版都错在同一处：把参考图里只占 7%~10% 的**点缀色**放大成了整屏底色。
   现在底交回白，颜色让 badge（天蓝）、标题竖条（天蓝）、卡片硬影（天蓝）去出，
   这一节的主角本来就该是那张 3.4 米宽的大照片。 */
html.skin-pop .preview-promo{ background:#FFFFFF !important; }
html.skin-pop .promo-label{ color:var(--pk-text) !important; font-weight:800 !important; letter-spacing:3px; }
html.skin-pop .promo-badge{
    background:var(--pk-green) !important;
    color:var(--pk-text) !important;
    font-weight:800 !important;
    letter-spacing:2px;
    border:2px solid var(--pk-ink) !important;
}
html.skin-pop .promo-copy .btn-primary{
    background:var(--pk-ink) !important;
    color:#000000 !important;
    border-color:var(--pk-text) !important;
    box-shadow:5px 5px 0 var(--pk-green) !important;
}
html.skin-pop .promo-features li::before{ background:var(--pk-ink) !important; }
html.skin-pop .promo-title{ color:var(--pk-text) !important; }
html.skin-pop .promo-title::before{ background:var(--pk-yellow) !important; border-color:var(--pk-text) !important; }
html.skin-pop .promo-desc,
html.skin-pop .promo-features li{ color:#000000 !important; }
html.skin-pop .promo-card{ background:var(--pk-card) !important; border:2px solid var(--pk-ink) !important; box-shadow:12px 12px 0 var(--pk-green) !important; }
html.skin-pop .promo-visual-top{
    background:var(--pk-sky) !important;
    border:2px solid var(--pk-ink) !important;
    box-shadow:8px 8px 0 var(--pk-ink) !important;
    color:var(--pk-text) !important;
}
html.skin-pop .promo-visual-top span{ color:var(--pk-text) !important; }
html.skin-pop .promo-visual-note{ color:var(--pk-mute) !important; }

/* ---------- FAQ：白底黑框，第 3 条起换成深蓝影换节奏 ---------- */
html.skin-pop .faq-item{
    background:#FFF !important;
    border:2px solid var(--pk-ink) !important;
    box-shadow:6px 6px 0 var(--pk-sky) !important;
}
html.skin-pop .faq-item:nth-child(2n){ box-shadow:6px 6px 0 var(--pk-navy) !important; }
html.skin-pop .faq-q{ color:var(--pk-text) !important; font-weight:700 !important; }
html.skin-pop .faq-a{ color:#000000 !important; }

/* ---------- 申请区：天蓝底 + 白表单 + 黑硬影 ----------
   原先是薄荷绿整块，绿色撤掉后改天蓝（与首屏底部色带同一支蓝，首尾呼应）；
   块内的小竖条/圆点必须换黄 —— 天蓝点落在天蓝底上等于没画。 */
html.skin-pop .apply-preview{ background:var(--pk-sky) !important; }
html.skin-pop .apply-badge{
    background:var(--pk-yellow) !important;
    border:2px solid var(--pk-ink) !important;
    color:var(--pk-text) !important;
    font-weight:700 !important;
}
html.skin-pop .apply-title{ color:var(--pk-text) !important; }
html.skin-pop .apply-title::before{ background:var(--pk-yellow) !important; border-color:var(--pk-text) !important; }
html.skin-pop .apply-desc{ color:#0A1633 !important; }
html.skin-pop .apply-points li{ color:#0A1633 !important; }
html.skin-pop .apply-points b{ color:var(--pk-text) !important; }
html.skin-pop .apply-points li::before{ background:var(--pk-yellow) !important; }

html.skin-pop .pcs-form{
    background:#FFF !important;
    border:2px solid var(--pk-ink) !important;
    box-shadow:16px 16px 0 var(--pk-ink) !important;
}
html.skin-pop .pcs-form__title{ color:var(--pk-text) !important; }
html.skin-pop .pcs-form__sub{ color:var(--pk-mute) !important; }
html.skin-pop .pcs-field label{ color:#000000 !important; font-weight:600 !important; }
html.skin-pop .pcs-field .req{ color:var(--pk-text) !important; }
html.skin-pop .pcs-form input[type="text"],
html.skin-pop .pcs-form input[type="tel"],
html.skin-pop .pcs-form input[type="email"],
html.skin-pop .pcs-form textarea,
html.skin-pop .pcs-form select{
    background:#FFF !important;
    border:2px solid rgba(0,161,229,.3) !important;
    color:var(--pk-text) !important;
}
html.skin-pop .pcs-form input::placeholder,
html.skin-pop .pcs-form textarea::placeholder{ color:#6E6754 !important; }
html.skin-pop .pcs-form input:focus,
html.skin-pop .pcs-form textarea:focus,
html.skin-pop .pcs-form select:focus{
    border-color:var(--pk-text) !important;
    box-shadow:3px 3px 0 rgba(255,62,181,.85) !important;
    outline:none !important;
}
html.skin-pop .pcs-submit{
    background:var(--pk-ink) !important;
    color:#000000 !important;
    font-weight:800 !important;
    border:none !important;
    box-shadow:5px 5px 0 var(--pk-green) !important;
}
html.skin-pop .pcs-submit:hover{ background:var(--pk-navy) !important; color:#000000 !important; }
html.skin-pop .pcs-note{ color:#4A4436 !important; }
html.skin-pop .pcs-done__t{ color:var(--pk-text) !important; }
html.skin-pop .pcs-done__d{ color:#000000 !important; }

/* ---------- 城市授权：天蓝整块 + 白字（老大 2026-11-01 23:40 定）----------
   老大两条指令落地在这里：
     ① "文字不要加效果，直接白色字" —— luxe.css 那条
        .biz-copy / .biz-stats { text-shadow:0 1px 24px rgba(0,0,0,.55) }
        是给"字要压在照片上"兜底的，一层 24px 的黑雾让整段字发灰。
        这里 text-shadow:none 清掉，字就是干干净净的白。
     ② 白字要立住，靠的是遮罩（左实右透），不是靠字的特效 —— 遮罩那层
        早就是 94% 天蓝压实了，所以去掉阴影不掉可读性。
   唯一保留的彩色件是那颗黄色 CTA 按钮：它是"按下去的东西"，不是文案。 */
html.skin-pop .biz-banner{
    background:var(--pk-sky) !important;
    border-top:2px solid var(--pk-sky) !important;
    border-bottom:2px solid var(--pk-sky) !important;
}
html.skin-pop .biz-banner .biz-copy,
html.skin-pop .biz-banner .biz-stats{ text-shadow:none !important; }
html.skin-pop .biz-banner .biz-tag{
    background:transparent !important;
    border:1.5px solid rgba(255,255,255,.75) !important;
    color:#FFFFFF !important;
    font-weight:700 !important;
    text-shadow:none !important;
}
html.skin-pop .biz-banner h2{ color:#FFFFFF !important; text-shadow:none !important; }
html.skin-pop .biz-banner h2 em{ color:#FFFFFF !important; font-style:normal; }
html.skin-pop .biz-banner p{ color:rgba(255,255,255,.92) !important; text-shadow:none !important; }
html.skin-pop .biz-banner .biz-link{ color:#FFFFFF !important; }
html.skin-pop .biz-banner .biz-btn{
    background:var(--pk-yellow) !important;
    color:#000000 !important;
    font-weight:800 !important;
    border:2px solid #FFFFFF !important;
    box-shadow:6px 6px 0 rgba(255,255,255,.55) !important;
}
html.skin-pop .biz-banner .biz-btn:hover{
    background:#FFFFFF !important;
    border-color:#FFFFFF !important;
    color:var(--pk-sky) !important;
    box-shadow:2px 2px 0 rgba(255,255,255,.55) !important;
}
html.skin-pop .biz-banner .biz-stats div{
    border-color:rgba(255,255,255,.5) !important;
    background:transparent !important;
}
html.skin-pop .biz-banner .biz-stats b{ color:#FFFFFF !important; text-shadow:none !important; }
html.skin-pop .biz-banner .biz-stats span{ color:rgba(255,255,255,.88) !important; text-shadow:none !important; }
html.skin-pop .biz-ghost{ -webkit-text-stroke:1.5px rgba(255,255,255,.42) !important; }

/* ---------- 页脚：白纸 + 黑字（老大 2026-11-01 23:40："页脚白色"）----------
   之前页脚也是天蓝，跟上面的城市授权连成一大片蓝，页面结尾糊成一块。
   改成白纸后收尾是 蓝(城市) → 白(页脚)，一深一浅；页脚全是链接和备案号，
   白底黑字也才读得快。顶部压一条 4px 天蓝，把"这是页脚"这件事说清楚，
   不靠加粗不加分割线。
   注意：老规则里写的 .footer-col 这个类根本不存在（真名 .footer-nav /
   .footer-contact），所以以前有一半颜色是漏的 —— 这版按真类名重写。 */
html.skin-pop .site-footer{
    background:#FFFFFF !important;
    border-top:4px solid var(--pk-sky) !important;
    color:#000000 !important;
}
html.skin-pop .site-footer .footer-nav h4,
html.skin-pop .site-footer .footer-contact h4{
    color:#000000 !important;
    font-weight:800 !important;
    letter-spacing:.06em;
}
html.skin-pop .site-footer .footer-brand p,
html.skin-pop .site-footer .footer-contact p{ color:#2B2B2B !important; }
html.skin-pop .site-footer .footer-contact p a{ color:#000000 !important; }
html.skin-pop .site-footer .footer-nav a{
    color:#2B2B2B !important;
    box-shadow:inset 0 0 0 var(--pk-sky);
    transition:color .18s ease, box-shadow .18s ease;
}
html.skin-pop .site-footer .footer-nav a:hover{
    color:#000000 !important;
    box-shadow:inset 0 -2px 0 var(--pk-sky);
}
html.skin-pop .site-footer .footer-license{ color:#5A5A5A !important; }
html.skin-pop .site-footer .dot.red{ background:var(--pk-sky) !important; }
html.skin-pop .site-footer .footer-bottom{
    color:#5A5A5A !important;
    border-top:1px solid rgba(0,161,229,.32) !important;
}
html.skin-pop .site-footer .footer-bottom a{ color:#000000 !important; }
html.skin-pop .site-footer .footer-bottom a:hover{ color:var(--pk-sky) !important; }

/* ---------- 手机底部导航 ---------- */
html.skin-pop .mobile-bottom-nav{
    background:var(--pk-yellow) !important;
    border-top:2px solid var(--pk-ink) !important;
    backdrop-filter:none;
}
html.skin-pop .bottom-nav-item{ color:#4F4938 !important; }
html.skin-pop .bottom-nav-item.active{ color:var(--pk-text) !important; }
html.skin-pop .mobile-nav,
html.skin-pop .mobile-nav-panel{ background:#FFF !important; border-color:var(--pk-text) !important; }
html.skin-pop .mobile-nav a{ color:#000000 !important; border-color:rgba(0,161,229,.16) !important; }
html.skin-pop .mobile-nav .mnav-item{ color:#000000 !important; }
html.skin-pop .mobile-nav .mnav-item.active{ color:var(--pk-text) !important; }

/* ---------- 波普专属小零件 ---------- */
/* 取景角标：天蓝（深蓝区/黄区上都看得见） */
html.skin-pop .luxe-viewfinder i{
    border-color:var(--pk-text) !important;
    filter:drop-shadow(0 0 0 rgba(0,161,229,0));
}
/* 卡片左侧那根装饰线：天蓝 */
html.skin-pop .series-card::before,
html.skin-pop .scene-card::before{
    background:var(--pk-green) !important;
    opacity:1 !important;
}
/* 噪点调成"印刷网点"感 */
html.skin-pop body::after{
    mix-blend-mode:multiply;
    opacity:.05;
}
/* 动效降级 */
@media (prefers-reduced-motion: reduce){
    html.skin-pop .hero-section::before{ animation:none !important; }
}

/* ============================================================
 * 切换球 · 三态外观（图标随皮肤自动换，暗示"点一下会变成哪套"）
 * 注意：.cs-fab 的基础尺寸/定位在 dark.css，这里只改配色与图标。
 * ============================================================ */
/* 2026-11-01 23:52 老大："
   右边那个变色球，直接用 logo 左边那枚圆形徽标"。
   于是不再画三套 SVG 图标（画框 / 月亮 / 调色盘）——
   那枚徽标本就是品牌记号（红黄绿三块立体主义色块），
   三套皮肤共用一个图标，皮肤差异全部交给球的外圈颜色和投影。
   2026-11-02 00:55：logo 换成正式版（1203×354）后，浮球图标也重做了一遍 ——
   从新标左端那枚 295px 的圆章按圆形遮罩裁出，128px / 11 KB，边缘比旧图干净。 */
.cs-fab .cs-mark{
    width:100%; height:100%;
    display:block; object-fit:cover;
    border-radius:50%;
}
.cs-fab{ padding:0; overflow:hidden; }

/* ① 米白：纸白球 + 墨黑图标 + 细金边 */
html.skin-ivory .cs-fab{
    background:linear-gradient(145deg,#FFFDF8,#EFEAE0) !important;
    border:1px solid rgba(160,126,58,.42) !important;
    color:#17171A !important;
    box-shadow:0 8px 24px rgba(23,23,26,.14), 0 0 0 0 rgba(160,126,58,.4) !important;
}
html.skin-ivory .cs-fab:hover{
    border-color:rgba(160,126,58,.8) !important;
    box-shadow:0 12px 32px rgba(23,23,26,.2), 0 0 0 4px rgba(160,126,58,.1) !important;
}
html.skin-ivory .cs-fab .cs-dot{ background:#A07E3A; border-color:#FFFDF8; }

/* ③ 波普：亮黄球 + 2px 黑边 + 天蓝硬投影 */
/* ③ 波普：白底圆盘（徽标本体是米白圆，配黄底会糊在一起）+ 天蓝 2px 圈 + 亮黄硬影 */
html.skin-pop .cs-fab{
    background:#FFFFFF !important;
    border:2px solid var(--pk-sky) !important;
    box-shadow:5px 5px 0 var(--pk-yellow) !important;
    border-radius:50% !important;
}
html.skin-pop .cs-fab:hover{
    border-color:var(--pk-sky) !important;
    transform:translate(2px,2px) !important;
    box-shadow:2px 2px 0 var(--pk-sky) !important;
}
html.skin-pop .cs-fab .cs-dot{ background:var(--pk-yellow); border-color:var(--pk-sky); }
html.skin-pop .cs-toast{
    background:var(--pk-ink) !important;
    color:#000000 !important;
    border:2px solid var(--pk-green) !important;
    font-weight:700;
}

/* ============================================================
 * 皮肤 × 材质层校准
 * ------------------------------------------------------------
 * luxe.css 的背景视差/光雾是按"暗色底"设计的，只有一档
 * `html:not(.dark)` 的亮色兜底（白遮罩）。一旦换成 pop（黑展墙）
 * 或 ivory（纸白），这层白遮罩就会把底色压成一片灰。
 * 所以每套皮肤必须自己重新定义遮罩色 —— 不是调透明度能解决的。
 * ============================================================ */

/* ---------- ① 米白：把照片压成"纸上的淡水痕" ---------- */
html.skin-ivory .luxe-par{
    filter:blur(30px) saturate(.55) brightness(1.35) !important;
}
html.skin-ivory .luxe-par.on{ opacity:.20 !important; }
html.skin-ivory .luxe-par::after{
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(251,249,244,.72), rgba(251,249,244,.94) 58%, #FBF9F4 100%),
        linear-gradient(180deg, #FBF9F4 0%, rgba(251,249,244,.6) 20%, rgba(251,249,244,.6) 80%, #FBF9F4 100%) !important;
}
html.skin-ivory .paintings-section .luxe-par.on{ opacity:.14 !important; }
html.skin-ivory .paintings-section .luxe-par::after{
    background:
        radial-gradient(120% 100% at 50% 18%, rgba(251,249,244,.78), rgba(251,249,244,.96) 62%, #FBF9F4 100%),
        linear-gradient(180deg, #FBF9F4 0%, rgba(251,249,244,.62) 20%, rgba(251,249,244,.62) 82%, #FBF9F4 100%) !important;
}
html.skin-ivory .luxe-par-grid{
    background-image:radial-gradient(rgba(160,126,58,.5) 1px, transparent 1.6px) !important;
}
html.skin-ivory .luxe-par-grid.on{ opacity:.10 !important; }
/* 首屏暖金光雾：亮底上会变成一块发脏的黄斑，降到 1/3 */
html.skin-ivory .hero-section::before{
    background:
        radial-gradient(760px 480px at 6% -8%, rgba(226,208,172,.09), transparent 64%),
        radial-gradient(660px 400px at 26% 30%, rgba(201,165,94,.05), transparent 66%) !important;
}
/* 取景角标：main 的 1px 淡金在纸白上等于隐形（对比度 <1.6:1），
   压深到 #785C24 一档，四角才真的"框住"首屏。 */
html.skin-ivory .luxe-viewfinder{ opacity:1 !important; }
html.skin-ivory .luxe-viewfinder i{
    border-color:rgba(120,92,36,.92) !important;
}
/* 城市授权区在 ivory 下是**深墨块**（跟页脚同色做收口），
   所以这块的视差层必须按"暗色"处理 —— 沿用 luxe 的亮色兜底
   （照片 brightness 1.22 + 白系遮罩）会把整块染成中灰，字就糊了。 */
/* 2026-11-01 23:49 老大：这张婚宴大厅在三套皮肤里都当背景。
   米白原来 opacity .34 + blur 18 + 一层厚黑膜 —— 图等于没有。
   现在跟波普同一套做法：清晰、满透，只留一支暖黑（不是灰）遮罩，
   左实右疏管住文字，下沿压实管住三格数据。照片本身是金色拱廊，
   跟米白这套的暖金一个色温，压暗后正好是"黄昏的教堂"。 */
html.skin-ivory .biz-banner .luxe-par{
    filter:saturate(1.04) contrast(1.03) brightness(.92) !important;
}
html.skin-ivory .biz-banner .luxe-par.on{ opacity:1 !important; }
html.skin-ivory .biz-banner .luxe-par::after{
    background:
        linear-gradient(90deg,
            rgba(20,17,12,.94) 0%,
            rgba(20,17,12,.88) 20%,
            rgba(20,17,12,.66) 38%,
            rgba(20,17,12,.30) 56%,
            rgba(20,17,12,.26) 76%,
            rgba(20,17,12,.50) 100%),
        linear-gradient(180deg,
            rgba(20,17,12,.56) 0%,
            rgba(20,17,12,.26) 26%,
            rgba(20,17,12,.44) 60%,
            rgba(20,17,12,.88) 82%,
            rgba(14,12,9,.98) 100%) !important;
}
html.skin-ivory .biz-banner .luxe-par-grid{ background-image:radial-gradient(rgba(201,165,94,.42) 1px, transparent 1.6px) !important; }

/* ---------- ③ 波普：照片几乎压掉，只留"墙"的一点肌理 ---------- */
html.skin-pop .luxe-par{
    filter:blur(36px) saturate(.5) brightness(.55) !important;
}
/* 名画区 = 深蓝展墙：照片只当极淡底纹，绝不能盖掉深蓝 */
html.skin-pop .paintings-section .luxe-par.on{ opacity:.20 !important; }
html.skin-pop .paintings-section .luxe-par::after{
    background:
        radial-gradient(120% 100% at 50% 16%, rgba(0,161,229,.62), rgba(0,161,229,.93) 62%, #00A1E5 100%),
        linear-gradient(180deg, #00A1E5 0%, rgba(0,161,229,.55) 18%, rgba(0,161,229,.55) 84%, #00A1E5 100%) !important;
}
/* 城市授权区：天蓝块 + 那张婚宴大厅图做视差底（老大 2026-11-01 23:21 指定）
   ------------------------------------------------------------------
   以前这层是 blur(36) + brightness(.42) + opacity .26 —— 图基本是"不存在"，
   换什么图都白搭。现在改成：图原样清晰铺（不模糊、不压暗），
   靠遮罩开口子：右上角 30% 处只盖 16% 天蓝，拱门、阳光、新人背影整块透出来；
   越往左越实，标题区接近纯天蓝；下沿 78% 之后直接实色，压住三格数据条。
   这样"图在动 + 字能读"同时成立，也不用截图糊一层灰膜（老大最烦那个）。 */
/* 底图 = 老大给的婚宴大厅（拱廊 + 阳光 + 新人背影），三套皮肤同一张。
   这张照片是暖金色的，白字直接压上去只有 1.6:1，读不了；
   但也不能拿模糊 + 灰色蒙版糊掉（老大："不要灰蒙蒙"）。
   做法：图不糊、不降透明，干净地铺满；遮罩用同色系的深蓝（不是退役的 #0300A7，
   是按 #00A1E5 压暗到 12% 亮度的那一支），左密右疏、下密上疏 ——
   字在左、人在右，拱门和新人整块透出来，白字落在 8:1 的深底上。 */
html.skin-pop .biz-banner .luxe-par{
    filter:saturate(.92) contrast(1.04) brightness(.98) !important;
}
html.skin-pop .biz-banner .luxe-par.on{ opacity:1 !important; }
html.skin-pop .biz-banner .luxe-par::after{
    background:
        /* 下层：左右方向 —— 左边 0~30% 压到 0.9（文案区），
           中间 45~70% 只留 0.25（拱门与阳光），右边 85% 之后再收一点边 */
        linear-gradient(90deg,
            rgba(0,38,74,.93) 0%,
            rgba(0,38,74,.88) 20%,
            rgba(0,38,74,.72) 34%,
            rgba(0,38,74,.38) 48%,
            rgba(0,38,74,.22) 62%,
            rgba(0,38,74,.30) 78%,
            rgba(0,38,74,.55) 100%),
        /* 上层：上下方向 —— 顶部轻压（不挡拱顶），
           底部 78% 之后几乎实色，三格数据条坐在实底上 */
        linear-gradient(180deg,
            rgba(0,38,74,.58) 0%,
            rgba(0,38,74,.30) 26%,
            rgba(0,38,74,.40) 58%,
            rgba(0,38,74,.86) 80%,
            rgba(0,26,52,.98) 100%) !important;
}
html.skin-pop .luxe-par-grid{
    background-image:radial-gradient(rgba(253,243,1,.42) 1px, transparent 1.6px) !important;
}
html.skin-pop .luxe-par-grid.on{ opacity:.10 !important; }

/* 名画区按钮：蓝墙上一律白框白字（白底块会把整块蓝墙戳破，也不要） */
html.skin-pop .paintings-section .btn-outline,
html.skin-pop .paintings-section .btn-ghost{
    background:transparent !important;
    border:2px solid #FFFFFF !important;
    color:#FFFFFF !important;
    box-shadow:none !important;
}
html.skin-pop .paintings-section .btn-outline:hover,
html.skin-pop .paintings-section .btn-ghost:hover{
    background:#FFFFFF !important;
    border-color:#FFFFFF !important;
    color:var(--pk-sky) !important;
    box-shadow:none !important;
}

/* ---------- pop 首屏按钮：2px 边 + 硬阴影把 4 个按钮挤换行，收一点 ---------- */
html.skin-pop .hero-actions{ gap:10px !important; }
html.skin-pop .hero-actions .btn,
html.skin-pop .hero-actions .btn-primary{
    padding-left:18px !important;
    padding-right:18px !important;
}
@media (min-width:1024px){
    html.skin-pop .hero-actions{ flex-wrap:nowrap !important; }
}

/* ============================================================
 * ④ 板块穿插 + 图层位移视差（老大 2026-11-01 23:20 纠正后重做）
 * ------------------------------------------------------------
 * 上一版做错了：把 bg-above2.jpg 整幅钉在板块后面当固定背景 ——
 * 结果是一张画铺满整屏、内容浮在画上，平、死、没有前后。
 *
 * 老大要的是三件事：
 *   ① 板块穿插 —— 彩画从两个板块的缝里钻出来，被白纸压住一半；
 *   ② 后面图层也要动 —— 底层色带随滚动位移，不是钉死的；
 *   ③ 交错感 —— 相邻层方向 / 速度都不同，滚过去像两层面料擦过。
 *
 * 实现分两半：
 *   [底层] #pkStage（fixed / z-index:-1，luxe.js 注入）里三条窄色带，
 *          取同一张画的左缘 / 右缘 / 下缘三处裁切，
 *          各自正弦位移（周期 1500 / 1080 / 820，相位 0 / 2.1 / 4.0），
 *          来回摆、永不越界 —— 这就是"后面也在动"。
 *   [板块] 每个浅色 section 的 ::before 是一条横贯全宽的彩带，
 *          top:-46px / height:190px，跨在上一节尾部与本节留白之间，
 *          被本节白纸（> .container，z-index:2）压住 → 穿插。
 *          五条带用画的不同位置，颜色不重样；位移由 JS 写进 --pk-py，
 *          奇偶节方向相反 → 交错。
 *   白纸五张左右错开（-28 / +36 / -12 / +30 / -20px），不叠一条竖线。
 *
 * 这一段写在文件最后，用同特异性 + !important 正面压住前面所有历史规则。
 * ============================================================ */
html.skin-pop{ background:#FFFFFF !important; overflow-x:clip; }
html.skin-pop body{ background:transparent !important; overflow-x:clip; }

/* ---------- 底层舞台：纸下面那层会动的墨 ---------- */
#pkStage{ display:none; }
html.skin-pop #pkStage{
    display:block;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
}
html.skin-pop #pkStage i{
    position:absolute;
    display:block;
    background-image:var(--pk-bgimg);
    background-repeat:no-repeat;
    will-change:transform;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
/* 左窄带：画的左中段光影，染成天蓝 */
html.skin-pop #pkStage .pk-l1{
    left:-3%; top:-18%; width:30%; height:136%;
    background-size:auto 145%;
    background-position:24% 64%;
    -webkit-clip-path:polygon(0 6%, 78% 0, 100% 74%, 22% 100%);
    clip-path:polygon(0 6%, 78% 0, 100% 74%, 22% 100%);
}
/* 右窄带：画的右中段光影，染成亮黄 */
html.skin-pop #pkStage .pk-l2{
    right:-4%; top:-16%; width:29%; height:132%;
    background-size:auto 145%;
    background-position:80% 64%;
    -webkit-clip-path:polygon(24% 0, 100% 10%, 100% 94%, 0 100%);
    clip-path:polygon(24% 0, 100% 10%, 100% 94%, 0 100%);
}
/* 中下斜块：画的下缘光影，染成深蓝（压场的一块） */
html.skin-pop #pkStage .pk-l3{
    left:16%; top:64%; width:58%; height:46%;
    background-size:auto 380%;
    background-position:43% 96%;
    -webkit-clip-path:polygon(0 30%, 88% 0, 100% 62%, 14% 100%);
    clip-path:polygon(0 30%, 88% 0, 100% 62%, 14% 100%);
}

/* ---------- 五个浅色区：底色交出去，只留白纸 ---------- */
html.skin-pop .series-section,
html.skin-pop .scenes-section,
html.skin-pop .preview-promo,
html.skin-pop .apply-preview,
html.skin-pop .faq-section{
    background:transparent !important;
    box-shadow:none !important;
    border-top:0 !important;
    position:relative;
    isolation:isolate;
    overflow:visible !important;
    /* 横向边距由白纸自己控制（见下），section 只管上下留白 ——
       否则 section 的 72px 会把白纸往里推，跟名画/城市区对不上。 */
    padding:132px 0 !important;
}

/* ---------- 穿插用的彩色纸板：单侧斜插，只占 64% 宽 ----------
   这一版的关键改动：上一版做成"横贯全宽的彩带"，结果成了夹在两节之间的
   一条彩虹 —— 脏、抢、还翻出绿。现在改成**一次只从一侧插进来**：
   左 → 右 → 左 → 右 → 左，宽度 64%，斜切边，被白纸压住伸进来的那一头。
   视觉上是"一张彩纸斜插进两叠白纸之间，只从左边露出来"，这才是穿插。
   取色怎么定的（一刀切在 y=87% 这条横带上）：
   把画按 9×6 网格采样过一遍，y=83% 那一行从左到右依次是
   橙黄 / 珊瑚 / 品红 / 橙 / 黄 / 黄 —— 一行六块，全是暖色，
   没有一个绿、没有一个紫。所以五块纸板全部切在这一行上，
   只改横向位置：13% / 27% / 42% / 57% / 71%，
   五块颜色绝不重样，而且是同一笔画里的同一个色带，天生一家。
   background-size 用「宽 400% / 高 auto」：横向只露整幅画的 25%，
   画不被压扁，纵向也不会翻到底部的其他颜色。
   （2026-11-01 23:22 老大明确："原图自带绿色和紫色，不用管" ——
     所以这里不做任何 blend / hue 校正，原图什么色就是什么色，
     一刀裁切、原样端上来。之前那版 color 混合锁色相的做法已撤。） */
html.skin-pop .series-section::before,
html.skin-pop .scenes-section::before,
html.skin-pop .preview-promo::before,
html.skin-pop .apply-preview::before,
html.skin-pop .faq-section::before{
    content:"";
    position:absolute;
    top:-70px;
    width:64%;
    height:230px;
    z-index:-1;
    background-image:var(--pk-bgimg);
    background-repeat:no-repeat;
    background-size:400% auto;
    background-position:var(--pp, 13% 87%);
    pointer-events:none;
    will-change:transform;
    -webkit-transform:translate3d(0,var(--pk-py,0px),0);
    transform:translate3d(0,var(--pk-py,0px),0);
}
/* 五块纸板 = 同一张画的五个位置：亮黄 → 黄 → 品红 → 黄 → 珊瑚 */
html.skin-pop .series-section::before{
    left:-2px; right:auto;
    --pp:13% 87%;
    -webkit-clip-path:polygon(0 0, 100% 20%, 90% 100%, 0 76%);
    clip-path:polygon(0 0, 100% 20%, 90% 100%, 0 76%);
}
html.skin-pop .scenes-section::before{
    right:-2px; left:auto;
    --pp:27% 87%;
    -webkit-clip-path:polygon(0 20%, 100% 0, 100% 76%, 10% 100%);
    clip-path:polygon(0 20%, 100% 0, 100% 76%, 10% 100%);
}
html.skin-pop .preview-promo::before{
    left:-2px; right:auto;
    --pp:42% 87%;
    -webkit-clip-path:polygon(0 0, 100% 20%, 90% 100%, 0 76%);
    clip-path:polygon(0 0, 100% 20%, 90% 100%, 0 76%);
}
html.skin-pop .apply-preview::before{
    right:-2px; left:auto;
    --pp:57% 87%;
    -webkit-clip-path:polygon(0 20%, 100% 0, 100% 76%, 10% 100%);
    clip-path:polygon(0 20%, 100% 0, 100% 76%, 10% 100%);
}
html.skin-pop .faq-section::before{
    left:-2px; right:auto;
    --pp:71% 87%;
    -webkit-clip-path:polygon(0 0, 100% 20%, 90% 100%, 0 76%);
    clip-path:polygon(0 0, 100% 20%, 90% 100%, 0 76%);
}

/* ---------- 白纸：实心、2px 边、16px 硬影，五张互相错开 ---------- */
html.skin-pop .series-section > .container,
html.skin-pop .scenes-section > .container,
html.skin-pop .preview-promo > .container,
html.skin-pop .apply-preview > .container,
html.skin-pop .faq-section > .container{
    position:relative;
    z-index:2;
    background:#FFFFFF !important;
    border:2px solid var(--pk-ink) !important;
    box-shadow:16px 16px 0 var(--pk-ink) !important;
    /* ---- 对齐（老大 2026-11-01 23:42 连提三条）----
       之前五张纸各自 translateX 错开（-28 / +36 / -12 / +30 / -20），
       再套在 section 的 72px 边距里 —— 结果每张纸的左右边都与
       名画区（全站 .container：max-width 1440 + 15px 栏距）对不上，
       左边差 79px、右边差 85px，看着就是"没对齐"。
       现在改成一道算式：
         全站内容栏 = 1440 - 2×15 = 1410
         纸宽 = 1410 + 2×33 = 1476，居中 → 纸内边距 33（实写 31，扣掉 2px 边框）
         于是纸内内容的左沿 = (屏宽 - 1476)/2 + 33 = (屏宽 - 1440)/2 + 15
         = 名画区内容的左沿，一模一样，任何宽度下都成立。
       纸比内容栏宽 36px（每侧 18px），所以才像"一张纸包住内容"，
       而不是内容贴着纸边。错位撤了，穿插感只留 ::before 的彩板。 */
    /* 2026-11-02 00:45 跟着 --col 走：纸宽 = 内容栏 + 36，随便 --col 怎么变都对齐 */
    max-width:calc(var(--col) + 36px) !important;
    width:100% !important;
    margin:0 auto !important;
    padding:52px 31px 56px !important;
    /* 屏宽不够时纸撑满，内边距从 31 收到 13（= 15px 栏距 - 2px 边框），
       内容仍然钉在全站同一条竖线上。一条 clamp 算式顶掉原来的 @media 断点。 */
    padding-left:clamp(13px, calc((100vw - var(--col)) / 2 + 13px), 31px) !important;
    padding-right:clamp(13px, calc((100vw - var(--col)) / 2 + 13px), 31px) !important;
}
/* 五张纸统一宽度、统一居中 —— 上一条注释里的算式保证与名画区同栏。
   想要"错位纸叠"的观感，交给每张纸右下 16px 的硬影（方向一致但深浅不同）。 */

/* 纸的内边距已经由上面的 clamp 自己算，这里不留断点 —— 屏宽一变它对一变，
   不管 --col 以后调成 1500 还是 1680，纸内文字的左沿永远等于名画区的左沿。 */

@media (max-width:900px){
    html.skin-pop .series-section,
    html.skin-pop .scenes-section,
    html.skin-pop .preview-promo,
    html.skin-pop .apply-preview,
    html.skin-pop .faq-section{
        padding:84px 0 !important;
    }
    html.skin-pop .series-section::before,
    html.skin-pop .scenes-section::before,
    html.skin-pop .preview-promo::before,
    html.skin-pop .apply-preview::before,
    html.skin-pop .faq-section::before{
        top:-30px;
        width:78%;
        height:120px;
        background-size:400% auto;
    }
    html.skin-pop .series-section > .container,
    html.skin-pop .scenes-section > .container,
    html.skin-pop .preview-promo > .container,
    html.skin-pop .apply-preview > .container,
    html.skin-pop .faq-section > .container{
        -webkit-transform:none !important;
        transform:none !important;
        /* 14 + 2px 边框 = 16，和 ≤768 时 .container 的 16px 栏距严丝合缝 */
        padding:26px 14px 30px !important;
        box-shadow:8px 8px 0 var(--pk-ink) !important;
    }
    /* 手机屏窄，底层色带收窄一点，别把白纸挤得没地儿站 */
    html.skin-pop #pkStage .pk-l1{ width:24%; left:-8%; }
    html.skin-pop #pkStage .pk-l2{ width:24%; right:-8%; }
    html.skin-pop #pkStage .pk-l3{ left:8%; width:84%; top:68%; height:40%; }
}

/* 名画区天蓝、城市授权深蓝 —— 两块彩色区一浅一深，深浅端各挂各的字 */
html.skin-pop .paintings-section,
html.skin-pop .biz-banner{ isolation:isolate; }

/* ---------- 2026-11-01 23:26 收口：字只有黑与白 ----------
   老大原话："文字有不清楚的，就用白色，也就是黑色和白色文字颜色。"
   于是这里兜两类漏网的：
   · .highlight 之前是 var(--pk-sky)，天蓝字压在黄底上只有 2.9:1 —— 改黑；
   · index.php 里有 4 处 inline 的 #B49A6A（城市授权/登录/注册/客服电话），
     inline 优先级高，必须用属性选择器 + !important 才压得住，改黑。
   天蓝只留在「线、影、块」上，一个字都不染。 */
html.skin-pop .highlight{ color:#000000 !important; }
html.skin-pop a[style*="B49A6A"],
html.skin-pop a[style*="b49a6a"],
html.skin-pop [style*="B49A6A"] a{ color:#000000 !important; }
html.skin-pop .promo-title .highlight{
    background:var(--pk-sky) !important;
    color:#000000 !important;
    padding:0 6px !important;
}

/* 黑金：这张底图同样是背景（老大 23:49），原来 blur(16) 太糊，收到 4px ——
   还看得出拱廊和光，但不会跟正文抢。 */
html.dark .biz-banner .luxe-par{
    filter:blur(4px) saturate(.98) brightness(.82) !important;
}
html.dark .biz-banner .luxe-par.on{ opacity:.95 !important; }

/* ============================================================
 * 浮球：三套皮肤共用同一枚圆形人面章（老大 2026-11-02 00:01 定死）
 * ------------------------------------------------------------
 * 之前是"每套皮肤配一个球"：米白纸白球、黑金金球、波普黄球，
 * 球里还各画了一套图标。老大这次的指令很简单 ——
 * 右下角那个圆圈，三个配色都用这张图（logo_face）。
 * 所以这里把三套的外观统一成：白圆盘 + 这枚章 + 一层柔和投影，
 * 皮肤差异不再由球承担（页面上别的元素已经足够区分）。
 * 图是从原图按 alpha 边界裁的 128px PNG，四周留 6px 透明边，
 * 这样黑色圆环不会被球的边缘切到。
 * ============================================================ */
html .cs-fab,
html.dark .cs-fab,
html.skin-ivory .cs-fab,
html.skin-pop .cs-fab{
    width:56px; height:56px;
    padding:0 !important;
    overflow:hidden;
    border-radius:50% !important;
    border:1px solid rgba(0,0,0,.10) !important;
    background:#FFFFFF !important;
    background-image:none !important;
    box-shadow:0 6px 20px rgba(15,15,18,.18) !important;
    transition:transform .22s ease, box-shadow .22s ease !important;
}
html .cs-fab:hover,
html.dark .cs-fab:hover,
html.skin-ivory .cs-fab:hover,
html.skin-pop .cs-fab:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 10px 26px rgba(15,15,18,.24) !important;
}
html .cs-fab:active,
html.dark .cs-fab:active,
html.skin-ivory .cs-fab:active,
html.skin-pop .cs-fab:active{ transform:scale(.95) !important; }
html .cs-fab .cs-mark{
    width:100%; height:100%;
    display:block; object-fit:contain;
    border-radius:50%;
}
@media (max-width:768px){
    html .cs-fab,
    html.dark .cs-fab,
    html.skin-ivory .cs-fab,
    html.skin-pop .cs-fab{ width:50px; height:50px; }
}

/* ============================================================
 * 全站 logo：老大 2026-11-02 00:50 给的正式标（人脸章 + 手写 PICASSOS + ®）
 * ------------------------------------------------------------
 * 一对图，一套开关：
 *   .lg-on-light  黑字版 —— 纸白 / 象牙 / 波普（浅底）
 *   .lg-on-dark   白字版 —— 黑金（深底）
 * 浅底皮肤里白版根本不入场（display:none），深底里边反过来。
 * 这样深色皮肤再也不用给 logo 上"反白染金"的滤镜 —— 那滤镜会把红黄绿的脸
 * 一起染成一坨金，印章就废了。
 * ============================================================ */
.lg-on-dark{ display:none !important; }
.lg-on-light{ display:block; }
html.dark .lg-on-light{ display:none !important; }
html.dark .lg-on-dark{ display:block !important; }

/* 深色皮肤头部/页脚 img 一律不许反色（dark.css 那条老滤镜在这里退役） */
html.dark .site-header .logo-img img,
html.dark .footer-logo img{
    filter:none !important;
    -webkit-filter:none !important;
}

/* 头部：42 / 36 / 30 三档（跟 main.css 的 .logo-img img 同一组数，
   这里只是把高度写实，防止新图被 height 属性拉回 128） */
html .site-header .logo-img img{
    height:42px; width:auto; display:block;
}
@media (max-width:900px){
    html .site-header .logo-img img{ height:36px; }
}
@media (max-width:560px){
    html .site-header .logo-img img{ height:30px; }
}