@charset "utf-8";
/*!
 * 版本：MYUI Copyright © 2019
 * 作者：QQ726662013版权所有
 * 官网：https://www.mytheme.cn
 */

/* ============================================================
   CSS 设计令牌体系（单一来源）
   ─────────────────────────────────────────────────────────────
   层级结构：
   1. :root 原始令牌      — --color-* / --space-* / --radius-* 等
      ↓  通过 var() 引用
   2. :root 兼容别名      — --text-color / --panel-bg 等（旧版迁移用）
      ↓  深色模式只覆盖第 1 层，别名通过 var() 链自动继承
   3. [data-theme="dark"] — 仅覆盖原始令牌，别名无需重声明

   尺寸单位约定：
   · 颜色、字号、间距 → rem（随用户浏览器字号偏好缩放）
   · 固定视觉尺寸（封面尺寸、图标序号等） → px（保持精确像素）
   · 圆角、边框 → px（装饰性，不需要随字号缩放）

   新代码原则：
   · 使用原始令牌，不扩展别名列表
   · 修改主题色只需改 :root 中的 --color-* 变量
   ============================================================ */
:root {
  color-scheme: light;

  /* 品牌主色 */
  --color-primary:        #1890ff;
  --color-primary-end:    #40a9ff;
  --color-secondary:      #4fb1f7;
  --color-secondary-end:  #6bb8ee;

  /* 语义色 */
  --color-danger:         #f5222d;
  --color-badge-second:   #fa8c16;
  --color-warning:        #faad14;

  /* 文字色 */
  --color-text:           #333;
  --color-text-sub:       #666;
  --color-text-muted:     #999;
  --color-white:          #fff;

  /* 背景色 */
  --color-bg:             #fff;
  --color-bg-light:       #f5f5f5;
  --color-bg-lighter:     #eee;
  --color-bg-muted:       #f8f8f8;
  --color-bg-dark:        #000;

  /* 边框色 */
  --color-border:         #ddd;

  /* 第三方品牌固定色（不随主题变化） */
  --color-brand-thunder:    #11a5e8;
  --color-brand-local:      #009966;
  --color-brand-xiaomi:     #FF5722;
  --color-brand-thunderkk:  #009688;
  --color-player-dark:      #404040;
  --color-text-light:       #ccc;

  /* 间距（Spacing Scale）
     基准：1rem = 浏览器默认字号（通常 16px），随用户字体偏好等比缩放
     原 px 值已注释于行尾，便于对照 */
  --space-1:  0.3125rem;  /* 5px */
  --space-2:  0.625rem;   /* 10px */
  --space-3:  0.9375rem;  /* 15px */
  --space-4:  1.25rem;    /* 20px */
  --space-5:  1.875rem;   /* 30px */
  --space-6:  3.125rem;   /* 50px */

  /* 圆角（Border-radius Scale） */
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   15px;
  --radius-pill: 50rem;
  --radius-full: 50%;

  /* 阴影（Shadow Scale） */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.1);
  --shadow-sm:    0 2px 5px rgba(0,0,0,.1);
  --shadow-md:    0 2px 10px rgba(0,0,0,.05);
  --shadow-lg:    0 5px 8px rgba(0,0,0,.1);
  --shadow-card:  0 1px 4px rgba(0,0,0,.1);
  --shadow-hover: 0 3px 5px rgba(0,0,0,.08);

  /* 焦点环（Bootstrap 5 风格） */
  --focus-ring-shadow: 0 0 0 0.25rem rgba(24,144,255,.25);

  /* RGB 颜色分量（用于 rgba() 动态透明度，深色模式自动跟随） */
  --color-primary-rgb:      24, 144, 255;
  --color-secondary-rgb:    79, 177, 247;
  --color-danger-rgb:       245, 34, 45;
  --color-warning-rgb:      250, 173, 20;

  /* 语义色柔和背景（Subtle Tints — 用于 alert、badge 背景） */
  --color-primary-subtle:   #e6f4ff;
  --color-danger-subtle:    #fff1f0;
  --color-warning-subtle:   #fffbe6;
  --color-success-subtle:   #f6ffed;
  --color-info-subtle:      #e6fffb;

  /* 语义色强调文字（Text Emphasis — 用于 subtle 背景上的文字） */
  --color-primary-emphasis: #003eb3;
  --color-danger-emphasis:  #a8071a;
  --color-warning-emphasis: #ad6800;

  /* 过渡快捷变量（Bootstrap 5 风格预组合） */
  --transition-base:        all var(--duration-fast) ease-in-out;
  --transition-fade:        opacity var(--duration-fast) linear;
  --transition-collapse:    height var(--duration-normal) ease;
  --transition-form:        border-color var(--duration-fast) ease-in-out, box-shadow var(--duration-fast) ease-in-out;

  /* 边框标准化 */
  --border-width:           1px;
  --border-style:           solid;

  /* Z-index 分层（统一管理，防止层叠冲突） */
  --z-index-thumb:          1;    /* 封面悬停遮罩 */
  --z-index-content:        2;    /* 轮播内容叠加层 */
  --z-index-thumb-tag:      98;   /* 封面文字/标签 */
  --z-index-base:           99;   /* 基础浮层（下拉菜单、播放控制器） */
  --z-index-above-base:     101;  /* 略高于基础（轮播指示器、搜索下拉） */
  --z-index-sticky:         500;  /* 粘性定位（导航栏、快捷按钮） */
  --z-index-autocomplete:   520;  /* 搜索自动补全建议框 */
  --z-index-overlay:        600;  /* 全屏遮罩（分享面板、mask） */
  --z-index-popup:          700;  /* 滑出面板 */
  --z-index-modal-backdrop: 800;  /* 弹窗蒙版 */
  --z-index-fixed:          998;  /* 固定悬浮组件（小窗播放器） */
  --z-index-modal:          1000; /* 弹窗 / 全屏搜索覆盖层 */

  /* 过渡时间（Duration） */
  --duration-fast:   .15s;
  --duration-normal: .35s;
  --duration-slow:   .5s;

  /* ── 兼容别名（供从旧版本迁移的模版继续使用）──
     这些别名通过 var() 指向上方的原始令牌，无需在 [data-theme="dark"] 中重声明：
     深色模式只需覆盖原始变量，所有引用别名的地方会通过 var() 链自动继承新值。
     新代码请直接使用 --color-* / --space-* 等原始令牌，不要再扩展此别名列表。 */

  /* 文字 */
  --text-color:          var(--color-text);
  --text-muted:          var(--color-text-muted);
  --text-light:          var(--color-text-sub);
  --text-white:          var(--color-white);

  /* 背景/面板 */
  --panel-bg:            var(--color-bg);
  --panel-bg2:           var(--color-bg-light);
  --border-color:        var(--color-border);

  /* 品牌/语义色 */
  --primary-color:       var(--color-primary);
  --danger-color:        var(--color-danger);
  --info-color:          var(--color-primary);
  --badge-first:         var(--color-danger);
  --badge-second:        var(--color-badge-second);
  --badge-third:         var(--color-warning);

  /* 阴影 */
  --shadow-light:        var(--shadow-sm);
  --shadow-medium:       var(--shadow-md);

  /* 过渡 */
  --transition-medium:   var(--duration-normal);

  /* 字体
     字号使用 rem，随浏览器根字号缩放，满足用户无障碍字体偏好
     行高使用无单位比值，避免继承歧义 */
  --font-family-mono:    'Courier New', Courier, monospace;
  --font-size-xs:        0.75rem;    /* 12px */
  --font-size-sm:        0.8125rem;  /* 13px */
  --font-size-md:        0.9375rem;  /* 15px */
  --line-height-normal:  1.6;

  /* 圆角 */
  --radius-circle:       var(--radius-full);

  /* 间距扩展（0.5步进，同样使用 rem） */
  --space-0-5:   0.1875rem;  /* 3px */
  --space-1-5:   0.5rem;     /* 8px */
  --space-2-5:   0.75rem;    /* 12px */
  --space-3-5:   1.125rem;   /* 18px */
  --space-n2:    -0.625rem;  /* -10px */

  /* 宽高尺寸（用于封面、数字序号等） */
  --width-4:     16px;
  --width-5:     20px;
  --width-6:     24px;
  --width-7:     28px;
  --width-20:    80px;
  --width-25:    100px;
  --width-30:    120px;
  --width-35:    140px;
  --height-4:    16px;
  --height-5:    20px;
  --height-6:    24px;
  --height-7:    28px;
}

/* style */
.myui-panel,.myui-panel-box{ padding: 0;}
.myui-panel.active,.myui-panel_hd{ padding: 10px;}
.myui-panel-box.active{ margin: 0;}

/* all  */
body{ background: var(--color-bg-light); color: var(--color-text);}

/* text */
a,h1, h2, h3, h4, h5, h6,h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ color: var(--color-text);}
a:hover{ color: var(--color-secondary);}
a.disabled{ cursor: not-allowed; opacity: 0.6;}
.text-333{ color: var(--color-text);}
.text-666{ color: var(--color-text-sub);}
.text-muted{ color: var(--color-text-muted);}
.text-red{ color: red;}
.text-link{ color: blue;}
.text-fff{ color: var(--color-white);}

/* form */
.form-control{ background-color: var(--color-bg-light); color: var(--color-text-muted); border: 1px solid var(--color-bg-lighter);}
.form-control:focus{ border-color: var(--color-primary); box-shadow: var(--focus-ring-shadow);}

/* btn */
.btn-default{ background-color: var(--color-bg-lighter); color: var(--color-text); background: linear-gradient(to right, var(--color-bg-lighter) 0, #f6f6f6 100%);}
.btn-warm{ background-color: var(--color-primary); background: linear-gradient(to right, var(--color-primary) 0, var(--color-primary-end) 100%);}
.btn-primary{ background-color: var(--color-secondary); background: linear-gradient(to right, var(--color-secondary) 0, var(--color-secondary-end) 100%);}
.btn-danger{ background-color: #fc000c; background: linear-gradient(to right,#fc000c 0,#f9444d 100%);}
.btn-info{ background-color: #5bc0de; background: linear-gradient(to right,#5bc0de 0,#7cc1d6 100%); }
.btn-gray{ background-color: #282828; color: var(--color-border); background: linear-gradient(to right,#282828 0,#3b3b3b 100%);}
.btn-warm,.btn-primary,.btn-danger,.btn-info{  color: var(--color-white);}
.btn-warm:hover,.btn-primary:hover,.btn-danger:hover,.btn-info:hover,.btn-gray:hover{ color: var(--color-white); box-shadow: var(--shadow-lg);}
.btn.disabled{ cursor: not-allowed; opacity: 0.6;}

/* border */
.border{ border-color: var(--color-bg-lighter);}
.border-primary{ border-color: var(--color-secondary);}
.border-danger{ border-color: red;}
.border-info{ border-color: #5bc0de;}

/* line */
.spot{ border-color: var(--color-primary);}
.split-line{ background-color: var(--color-bg-lighter);}
.top-line:before,.bottom-line:after,.top-line-dot:before,.bottom-line-dot:after{ border-color: var(--color-bg-lighter);}

/* badge */
.badge{ background-color: var(--color-bg-lighter); color: var(--color-text);}
.badge-first{ background-color: var(--color-danger); color: var(--color-white);}
.badge-second{ background-color: var(--color-badge-second); color: var(--color-white);}
.badge-third{ background-color: var(--color-warning); color: var(--color-white);}

/* dropdown */
.dropdown-box .item{ background-color: var(--color-bg); box-shadow: var(--shadow-sm);}

/* pic-tag */
.pic-tag .tag{ background-color: rgba(0,0,0,0.6); color: var(--color-white);}
.pic-tag .tag.active,.pic-tag-h{ background-color: var(--color-primary); color: var(--color-white);}
.pic-text,.pic-title-bottom{ background-repeat: no-repeat; background-image: linear-gradient(transparent,rgba(0,0,0,.5)); color: var(--color-white);}
.pic-text.active{ background: rgba(0,0,0,0.6); color: var(--color-white);}
.pic-title-top{background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 100%); color: var(--color-white);}

/* link */
.myui-link__pic li img{ display: block; padding: 2px 6px; border-radius: 4px; background-color: var(--color-bg);}

/* nav */
.nav-tabs > li.active a{ border-color: var(--color-primary); color: var(--color-primary);}
.nav-tabs > li .dropdown-box .item li a{ color: var(--color-text);}
.nav-tabs > li .dropdown-box .item li.active a{ color: var(--color-primary);}
.nav-btn > li a{ background-color: var(--color-bg-light);}
.nav-btn > li.active a{ background-color: var(--color-primary); color: var(--color-white);}

/* header */
.myui-header__top{ background-color: var(--color-bg); box-shadow: var(--shadow-sm);}
.myui-header__menu > li > a{ color: var(--color-text);}
.myui-header__menu > li.active > a{ color: var(--color-primary);}
.myui-header__search .form-control{ background-color: var(--color-bg-light);}
.myui-header__user > li > a,.myui-header__user > li > a .fa{ color: var(--color-text);}

/* panel */
.myui-panel-bg{ background-color: var(--color-bg); border-radius: var(--radius-md);}
.myui-panel-bg2{ background-color: var(--color-bg-light); border-radius: var(--radius-md);}

/* vodlist */
.myui-vodlist__bg{background-color: var(--color-bg-light);}
.myui-vodlist__bg:hover{ box-shadow: var(--shadow-hover);}

/* text-list */
.myui-vodlist__text.striped .striped-head,.myui-vodlist__text.to-color li:nth-of-type(odd){ background-color: var(--color-bg-light);}

/* table */
.myui-table>thead>tr>th,.myui-table>tbody>tr>td, .myui-table>tbody>tr>th, .myui-table>tfoot>tr>td, .myui-table>tfoot>tr>th, .myui-table>thead>tr>td, .myui-table>thead>tr>th { border-color: var(--color-border);}

/* player */
.myui-player__video{ background-color: var(--color-bg-dark);}

/* popup */
.popup{ background-color: var(--color-bg-muted);}
.popup-head{ background-color: var(--color-bg);}

/* content */
.myui-content__detail .score .rating li .fa,.myui-content__detail .score .branch{ color: var(--color-primary);}

/* flickity */
.flickity-page-dots .dot{ background-color: var(--color-primary);}

/* carousel */
.carousel-indicators-dots li{ background-color: var(--color-primary);}
.carousel-indicators-text li.active .title{ color: var(--color-primary);}
.carousel-indicators-thumb li.active{ border: 3px solid var(--color-primary);}

/* extra */
.myui-extra li a{ background-color: var(--color-bg); box-shadow: var(--shadow-card);}
.myui-extra li a.backtop{ background-color: rgba(0,0,0,0.6); color: var(--color-white); }

/* autocomplete */
.autocomplete-suggestions{ background-color: var(--color-bg); box-shadow: var(--shadow-md);}
.autocomplete-suggestion, .autocomplete-suggestions li,.autocomplete-suggestion, .autocomplete-suggestions li a{ color: var(--color-text);}
.autocomplete-suggestions li strong{ color: var(--color-primary);}

/* search keyword highlight */
.search-key{ color: var(--color-primary); font-weight: 700; background: none; padding: 0;}


/* footer */
.myui-foot{ background-color: var(--color-bg-muted);}

/* ============================================================
   深色主题 — iOS 风格
   <html data-theme="dark"> 时生效
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  /* 品牌主色（去 iOS 满饱和，统一降至 60-65%） */
  --color-primary:        #3d85d4;
  --color-primary-end:    #5595dc;
  --color-secondary:      #3aa8cc;
  --color-secondary-end:  #50b8dc;

  /* 语义色（饱和度统一控制在 45-55%） */
  --color-danger:         #c87070;
  --color-badge-second:   #c08830;
  --color-warning:        #b8a038;

  /* 文字色（iOS label 层级） */
  --color-text:           #f2f2f7;
  --color-text-sub:       #aeaeb2;
  --color-text-muted:     #636366;
  --color-white:          #fff;

  /* 背景色（iOS grouped background 层级） */
  --color-bg:             #1c1c1e;
  --color-bg-light:       #000000;
  --color-bg-lighter:     #3a3a3c;
  --color-bg-muted:       #2c2c2e;
  --color-bg-dark:        #000;

  /* 边框/分割线 */
  --color-border:         #38383a;

  /* 阴影（深色下更强对比） */
  --shadow-xs:    0 1px 3px  rgba(0,0,0,.5);
  --shadow-sm:    0 2px 6px  rgba(0,0,0,.6);
  --shadow-md:    0 2px 12px rgba(0,0,0,.5);
  --shadow-lg:    0 5px 10px rgba(0,0,0,.6);
  --shadow-card:  0 1px 5px  rgba(0,0,0,.5);
  --shadow-hover: 0 3px 8px  rgba(0,0,0,.5);

  --focus-ring-shadow: 0 0 0 0.25rem rgba(61,133,212,.30);

  /* RGB 颜色分量（深色模式） */
  --color-primary-rgb:      61, 133, 212;
  --color-secondary-rgb:    58, 168, 204;
  --color-danger-rgb:       200, 112, 112;
  --color-warning-rgb:      184, 160, 56;

  /* 语义色柔和背景（深色模式，引用 RGB 变量自动同步） */
  --color-primary-subtle:   rgba(var(--color-primary-rgb),.15);
  --color-danger-subtle:    rgba(var(--color-danger-rgb),.15);
  --color-warning-subtle:   rgba(var(--color-warning-rgb),.15);
  --color-success-subtle:   rgba(48,209,88,.15);
  --color-info-subtle:      rgba(var(--color-secondary-rgb),.15);

  /* 语义色强调文字（深色模式，全面柔和化） */
  --color-primary-emphasis: #5aa0d8;
  --color-danger-emphasis:  #d09090;
  --color-warning-emphasis: #c4a840;
}

/* btn-default 渐变（内含硬编码色，需单独覆盖） */
[data-theme="dark"] .btn-default {
  background: linear-gradient(to right, #3a3a3c 0, #2c2c2e 100%) !important;
  color: var(--color-text) !important;
}

/* 标签边框（hardcoded rgba(0,0,0,.1) 在深色下不可见） */
[data-theme="dark"] .myui-content__tag a {
  border-color: rgba(255,255,255,.15) !important;
}

/* alert 信息框（player_sidebar 温馨提示） */
[data-theme="dark"] .alert-info {
  background-color: var(--color-primary-subtle) !important;
  border-color:     rgba(var(--color-primary-rgb),.35) !important;
  color:            var(--color-primary-emphasis) !important;
}
[data-theme="dark"] .alert-info strong {
  color: #90ceff !important;
}
[data-theme="dark"] .alert-info strong[style*="d9534f"] {
  color: #ff6b6b !important;
}

/* 搜索框 */
[data-theme="dark"] .myui-header__search .form-control {
  background-color: #2c2c2e !important;
  color: var(--color-text) !important;
}

/* 下拉菜单 */
[data-theme="dark"] .dropdown-box .item {
  background-color: #2c2c2e !important;
}
[data-theme="dark"] .dropdown-box .item li a,
[data-theme="dark"] .nav-tabs > li .dropdown-box .item li a {
  color: var(--color-text) !important;
}
[data-theme="dark"] .dropdown-box .item li.active a,
[data-theme="dark"] .nav-tabs > li .dropdown-box .item li.active a {
  color: var(--color-primary) !important;
}

/* 滚动条 */
[data-theme="dark"] #player-sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] .scrollbar::-webkit-scrollbar-thumb { background-color: #48484a; }

/* 主题切换按钮图标：深色模式下与其他导航图标保持一致 */
[data-theme="dark"] #theme-toggle-btn .fa { color: var(--color-text); }

/* ── 平滑过渡（仅用户主动切换时，由 JS 控制 .theme-switching 类） ── */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition:
    background-color .25s ease,
    color            .25s ease,
    border-color     .25s ease,
    box-shadow       .25s ease !important;
}

/* 尊重用户「减少动态效果」偏好：主题切换动画同样应当即时完成 */
@media (prefers-reduced-motion: reduce) {
  .theme-switching,
  .theme-switching *,
  .theme-switching *::before,
  .theme-switching *::after {
    transition: none !important;
  }
}