/* 蓝灰扁平主题 —— html[data-theme="light"] 时生效，覆盖各页面的变量 + 常见硬编码颜色。
   放在每页自己的 <style> 之后引入，靠 html[data-theme] 的更高优先级覆盖。 */

/* --ink2 = 次级正文色（原本各页写死成浅灰）。深色默认浅灰，亮色变深灰，正文随主题翻转。 */
:root{--ink2:#c6c8c7}

html[data-theme="light"]{
  --ink2:#34353b;
  /* 通用底色/层级/线/字 */
  --canvas:#ececed;--s1:#ffffff;--s2:#e9e9eb;--s3:#dfe0e3;
  --line:rgba(0,0,0,.09);--line2:rgba(0,0,0,.15);
  --ink:#101012;--muted:#5f6064;--tert:#9a9a9e;
  /* 强调色统一成 iMessage 蓝 */
  --blue:#1f8cff;--lav:#1f8cff;
  --teal:#1f8cff;--teal-ink:#ffffff;--teal-soft:rgba(31,140,255,.12);--teal-line:rgba(31,140,255,.42);
  /* 语义色：上线=绿、危险=红 保留 */
  --green:#16a34a;--red:#e5484d;
  /* 头像底 */
  --av:#e9e9eb;--av-ink:#454650;
  /* 渐变压平成蓝 */
  --g-violet:#1f8cff;--g-orange:#1f8cff;
}
html[data-theme="light"] body{background:var(--canvas);color:var(--ink)}

/* —— 顶栏玻璃 —— */
html[data-theme="light"] .nav{border-bottom-color:rgba(0,0,0,.08)!important}
html[data-theme="light"] .nav::before{background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)}
html[data-theme="light"] .nav.nav-scrolled{background:rgba(255,255,255,.78)!important;border-bottom-color:rgba(0,0,0,.07)!important}

/* —— 白底/实心按钮 → 蓝 —— */
html[data-theme="light"] .btn-white,
html[data-theme="light"] .btn-pill-w,
html[data-theme="light"] .btn-w,
html[data-theme="light"] .btn-blue,
html[data-theme="light"] .submit,
html[data-theme="light"] .up-btn,
html[data-theme="light"] .signup{background:#1f8cff!important;color:#fff!important;box-shadow:none!important}

/* —— 硬编码白字标题 → 深色 —— */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .head h1,
html[data-theme="light"] .pname,
html[data-theme="light"] .brand,
html[data-theme="light"] .id-stats b,
html[data-theme="light"] .id-nm{color:var(--ink)!important}

/* —— 卡片阴影变柔 —— */
html[data-theme="light"] .ec-img,
html[data-theme="light"] .wc,
html[data-theme="light"] .card{box-shadow:0 4px 16px rgba(0,0,0,.06)!important}

/* —— “可体验/扫码”角标 —— */
html[data-theme="light"] .ec-badge{background:#1f8cff!important;color:#fff!important}
html[data-theme="light"] .ec-badge.demo{background:#8a8a90!important;color:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}

/* —— faux 预览（暗灰块 → 浅灰） —— */
html[data-theme="light"] .fk-vid{background:#e9e9eb}
html[data-theme="light"] .fk-top i{background:#cfd0d3}
html[data-theme="light"] .fk-side .s,
html[data-theme="light"] .fk-chat b{background:#dfe0e3}
html[data-theme="light"] .fk-main .h{background:#cfd0d3}
html[data-theme="light"] .fk-main .l{background:#e4e5e8}

/* —— CTA 上传卡 —— */
html[data-theme="light"] .ec.cta .ec-img{background:#f6f7f9!important;border:none!important}
html[data-theme="light"] .ec.cta .ec-img::before,
html[data-theme="light"] .ec.cta .ec-img::after{display:none!important}
html[data-theme="light"] .ec.cta .splus{background:#1f8cff!important;box-shadow:none!important}
html[data-theme="light"] .ec.cta .cta-t{color:#1f8cff!important}
html[data-theme="light"] .brand .mk{background:#1f8cff!important}

/* —— 个人中心头像/上传空状态 —— */
html[data-theme="light"] .id-av,html[data-theme="light"] .nav-av{box-shadow:0 0 0 1px rgba(0,0,0,.1)!important}
html[data-theme="light"] .empty .plus svg{color:#1f8cff}

/* —— 详情页大屏/底部 dock —— */
html[data-theme="light"] .slide{background:#f0f0f2}
html[data-theme="light"] .slide.vid,html[data-theme="light"] .slide.shot{background:#0a0a0b}
html[data-theme="light"] .dockpill{background:rgba(255,255,255,.85)!important;border-color:rgba(0,0,0,.1)!important}
html[data-theme="light"] .dthumb{background:#e6e7ea!important;border-color:rgba(0,0,0,.12)!important}

/* —— 招牌渐变光卡（如有）压平 —— */
html[data-theme="light"] .spot.violet,html[data-theme="light"] .spot.orange{background:#1f8cff!important}
html[data-theme="light"] .spot::after{display:none}

/* —— 提示气泡 —— */
html[data-theme="light"] .toast{background:#1d1f22!important;border-color:rgba(255,255,255,.12)!important;color:#fff!important}

/* —— 首页 eyebrow 点 / “只看可体验” 开关 —— */
html[data-theme="light"] .eyebrow .d{background:#1f8cff;box-shadow:0 0 9px 1px rgba(31,140,255,.5)}
html[data-theme="light"] .tb-toggle.on{color:#fff!important;background:#1f8cff!important;border-color:#1f8cff!important}
html[data-theme="light"] .tb-toggle.on .pd{background:#fff!important;box-shadow:none}
html[data-theme="light"] .lr-cover .fk-top i,html[data-theme="light"] .lr-cover .fk-side .s{background:#cfd0d3}

/* —— 主题开关按钮在亮色下 —— */
html[data-theme="light"] #themeTg{background:transparent;border-color:rgba(0,0,0,.16)}

/* —— 写死成 #fff 的正文/表单/姓名/数字：亮色下翻成深色（这些不是按钮文字）—— */
html[data-theme="light"] .nm,
html[data-theme="light"] .dv,
html[data-theme="light"] .v,
html[data-theme="light"] .input,
html[data-theme="light"] .textarea,
html[data-theme="light"] .combo-tr,
html[data-theme="light"] .combo-val,
html[data-theme="light"] .opt-l,
html[data-theme="light"] .multi-box,
html[data-theme="light"] .rt{color:var(--ink)}

/* 这些是后代选择器（.field label / .grp-head h3 等），优先级比单类高，必须等价覆盖 */
html[data-theme="light"] .field label,
html[data-theme="light"] .grp-head h3,
html[data-theme="light"] .nsel select,
html[data-theme="light"] .nsel select option,
html[data-theme="light"] .pop-search input,
html[data-theme="light"] .opt-new b,
html[data-theme="light"] .lock b,
html[data-theme="light"] .ropt .rt,
html[data-theme="light"] .fld textarea,
html[data-theme="light"] .replybar input,
html[data-theme="light"] .modal h3,
html[data-theme="light"] .modal textarea,
html[data-theme="light"] .cm-head h3,
html[data-theme="light"] .cm-input input,
html[data-theme="light"] .byline .nm,
html[data-theme="light"] .cm .nm,
html[data-theme="light"] .dim .dv,
html[data-theme="light"] .mrow .v,
html[data-theme="light"] .act:hover,
html[data-theme="light"] .navback:hover,
html[data-theme="light"] .soc:hover{color:var(--ink)}
/* 段号圆圈 / 服务条款链接 */
html[data-theme="light"] .grp-num{background:#1f8cff;color:#fff}
html[data-theme="light"] .agree a{color:#1f8cff}
/* “怎么做出来的”折叠卡：暗底翻成浅卡 */
html[data-theme="light"] .fold{background:var(--s1)!important;border-color:var(--line)!important}
html[data-theme="light"] .fold summary{color:var(--ink)!important}
/* “打开网页体验”主按钮：青绿翻蓝 */
html[data-theme="light"] .acc-btn.primary,
html[data-theme="light"] .acc-btn.primary:hover{background:#1f8cff!important;color:#fff!important;border-color:#1f8cff!important}

/* —— 残留的强调色文字：翻成亮色后保证可读 —— */
html[data-theme="light"] .seek-chip{color:#2f59c0!important;background:rgba(31,140,255,.1)!important;border-color:rgba(31,140,255,.32)!important}
html[data-theme="light"] .ec.cta .ec-img{color:#5c6f6b}
html[data-theme="light"] .drop.has{color:#fff}
html[data-theme="light"] .seek-lbl{color:var(--tert)}
/* dashboard：注销/危险项 红字在亮色下 */
html[data-theme="light"] .snav .lo:hover{color:#e5484d!important;background:rgba(229,72,77,.08)!important}
html[data-theme="light"] .um-out{color:#e5484d!important}

/* ===== 下拉 / 菜单 / 选项框 在亮色下（修复语言选项、用户菜单、铃铛等看不见的问题）===== */
/* 语言下拉 (i18n) */
html[data-theme="light"] #langDD .lbtn{background:transparent!important;border-color:rgba(0,0,0,.16)!important;color:#33343a!important}
html[data-theme="light"] #langDD .lbtn:hover{background:rgba(0,0,0,.09)!important}
html[data-theme="light"] #langDD .lpop{background:#fff!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 18px 44px rgba(0,0,0,.16)!important}
html[data-theme="light"] #langDD .lopt{color:#33343a!important}
html[data-theme="light"] #langDD .lopt:hover{background:rgba(0,0,0,.05)!important;color:#101012!important}
html[data-theme="light"] #langDD .lopt .ck{color:#1f8cff!important}
/* 用户菜单 / 铃铛 / 通知 (usermenu) */
html[data-theme="light"] .um-bell{color:#33343a!important;background:rgba(0,0,0,.05)!important;border-color:rgba(0,0,0,.12)!important}
html[data-theme="light"] .um-bell:hover{background:rgba(0,0,0,.09)!important}
html[data-theme="light"] .um-av{box-shadow:0 0 0 1px rgba(0,0,0,.12)!important}
html[data-theme="light"] .um-pop,html[data-theme="light"] .um-npop{background:#fff!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 20px 48px rgba(0,0,0,.18)!important}
html[data-theme="light"] .um-item{color:#33343a!important}
html[data-theme="light"] .um-item:hover{background:rgba(0,0,0,.05)!important}
html[data-theme="light"] .um-out{color:#e5484d!important;border-top-color:rgba(0,0,0,.08)!important}
html[data-theme="light"] .um-nhead{border-bottom-color:rgba(0,0,0,.08)!important;color:#101012!important}
html[data-theme="light"] .um-n{color:#33343a!important}
html[data-theme="light"] .um-n b{color:#101012!important}
html[data-theme="light"] .um-n i{color:#86888c!important}
html[data-theme="light"] .um-n:hover{background:rgba(0,0,0,.05)!important}
html[data-theme="light"] .um-n.un{background:rgba(31,140,255,.09)!important}
html[data-theme="light"] .um-nempty{color:#86888c!important}
html[data-theme="light"] .um-n:hover{background:rgba(0,0,0,.04)!important}
html[data-theme="light"] .um-nempty{color:#9a9a9e!important}
html[data-theme="light"] .um-dot{border-color:#fff!important;background:#1f8cff!important}
/* 首页分类/排序下拉 阴影压柔 */
html[data-theme="light"] .dd-pop{box-shadow:0 18px 44px rgba(0,0,0,.16)!important}
/* 上传页 上传框 / 组合下拉的“完成”键 / 弹层阴影 */
html[data-theme="light"] .drop{background:#f4f5f7}
/* 视觉封面缩略图九宫格在亮色下（不然格子是写死的黑） */
html[data-theme="light"] .mcell.filled{background:#e9e9eb;border-color:rgba(0,0,0,.12)}
html[data-theme="light"] .mcell img,html[data-theme="light"] .mcell video{background:#e9e9eb}
html[data-theme="light"] .mcell.add{background:#f4f5f7;border-color:rgba(0,0,0,.18);color:#7a7b80}
html[data-theme="light"] .mcell.add:hover{border-color:#1f8cff;color:#33343a}
html[data-theme="light"] .mcell .bad{background:#eceef1;color:#5f6064}
html[data-theme="light"] .pop{box-shadow:0 18px 44px rgba(0,0,0,.16)!important}
html[data-theme="light"] .pop-done{background:#1f8cff!important;color:#fff!important}
html[data-theme="light"] .pop-grab{background:rgba(0,0,0,.18)!important}

/* ===== 响应式兜底：任何页面都不超出屏幕宽度；窄屏收紧顶栏内边距 ===== */
html{overflow-x:clip}
@media(max-width:560px){
  .nav{padding-left:16px!important;padding-right:16px!important}
}
/* 顶栏右侧控件间距兜底：主题切换 / 语言 / 铃铛头像，不论被注入到哪个容器都不会挤在一起。
   行内 margin-left:auto 优先级更高，靠右推的逻辑不受影响。 */
.nav #themeTg,.nav #langDD,.nav .um-wrap{margin-left:10px}

/* —— 弹窗里的输入框在亮色下翻成浅色（默认就是亮色，别让深框扣在白面板里）—— */
html[data-theme="light"] .modal input,html[data-theme="light"] .modal textarea,html[data-theme="light"] #mText{background:#f6f7f9!important;color:#101012!important;border-color:rgba(0,0,0,.12)!important}
html[data-theme="light"] .modal input::placeholder,html[data-theme="light"] .modal textarea::placeholder,html[data-theme="light"] #mText::placeholder{color:#9a9a9e!important}
html[data-theme="light"] .modal p{color:#5f6064!important}
/* 找回密码弹窗（login）行内深色 → 亮色 */
html[data-theme="light"] #rsBg>div{background:#fff!important;border-color:rgba(0,0,0,.1)!important}
html[data-theme="light"] #rsBg h3{color:#101012!important}
html[data-theme="light"] #rsBg p{color:#5f6064!important}
html[data-theme="light"] #rsBg input{background:#f6f7f9!important;color:#101012!important;border-color:rgba(0,0,0,.12)!important}