/* ============================================================
   ui-dark.css —— 深色模式（对齐 macOS Sonoma 深色 / iOS 17 dark）
   ------------------------------------------------------------
   作用域：html.gd-dark（gd = glass dark），浅色零影响
   加载位置：必须排在 ui-theme.css / ui-frame.css / ui-glass-anim.css 之后
             （同为覆盖层，靠后 + 同名令牌重定义 + !important 才生效）
   共六段：
     1 深色令牌（重定义既有 --f-* / --g-* / --ui-*，不新增变量名）
     2 基础渲染（color-scheme、字体平滑）
     3 平滑过渡（切换瞬间由 JS 加 .gd-anim，450ms 后移除）
     4 顶栏切换按钮 + 日月图标动画 + 顶栏图标按钮组打磨（浅深两套）
     5 框架层深色覆盖（对照 ui-frame.css 逐条等价）
     6 顶栏搜索框 / 搜索结果面板深色（内联白底，必须 !important）
   仅覆盖展示层样式，不改 DOM / id / 事件
   ============================================================ */

/* ================= 1. 深色令牌 ================= */
html.gd-dark{
  /* ---- 框架层（对应 ui-frame.css） ---- */
  --g-brand:#0A84FF; --g-brand-strong:#3395FF;
  --f-txt:#F5F5F7;
  --f-txt-dim:rgba(235,235,245,.62);
  --f-faint:rgba(235,235,245,.32);
  --f-hair:rgba(255,255,255,.09);
  --f-bg:#1C1C1E;
  --f-material:rgba(28,28,30,.66);
  --f-material-2:rgba(28,28,30,.82);

  /* ---- 内容层（对应 ui-theme.css） ---- */
  --g-brand-bright:#409CFF;
  --g-brand-soft:#64A8F0;
  --g-brand-tint:rgba(10,132,255,.18);
  --g-brand-wash:rgba(10,132,255,.10);
  --g-ring:rgba(10,132,255,.40);
  --g-ok:#30D158;  --g-ok-tint:rgba(48,209,88,.16);
  --g-warn:#FFD60A;--g-warn-tint:rgba(255,214,10,.14);
  --g-danger:#FF453A;--g-danger-tint:rgba(255,69,58,.16);
  --g-bg-top:#1C1C1E; --g-bg-mid:#1C1C1E; --g-bg-bottom:#1C1C1E;
  --g-card:#2C2C2E; --g-card-solid:#2C2C2E;
  --g-glass:rgba(30,30,32,.66); --g-glass-strong:rgba(30,30,32,.84);
  --g-frost:rgba(30,30,32,.66); --g-frost-strong:rgba(30,30,32,.84);
  --g-frost-border:rgba(255,255,255,.10);
  --g-frost-hi:inset 0 1px 0 rgba(255,255,255,.07);
  --g-txt:#F5F5F7;
  --g-txt-body:rgba(235,235,245,.85);
  --g-sub:rgba(235,235,245,.60);
  --g-faint:rgba(235,235,245,.32);
  --g-hairline:rgba(255,255,255,.09);
  --g-border:rgba(255,255,255,.16);
  --g-shadow:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.42);
  --g-shadow-sm:0 1px 2px rgba(0,0,0,.38);
  --g-shadow-lg:0 16px 48px rgba(0,0,0,.58),0 3px 8px rgba(0,0,0,.40);
  --g-chip-gray:rgba(120,120,128,.30);
  /* ---- 兼容别名 ---- */
  --ui-primary:#0A84FF; --ui-bg:#1C1C1E; --ui-card:#2C2C2E;
  --ui-border:rgba(255,255,255,.09); --ui-txt:#F5F5F7; --ui-sub:rgba(235,235,245,.6);
}

/* ================= 2. 基础渲染 ================= */
/* color-scheme:dark —— 让原生控件（select 下拉 / 滚动条 / 日期输入）自动用系统深色 */
html.gd-dark{color-scheme:dark;}
html.gd-dark body{-webkit-font-smoothing:antialiased;}

/* ================= 3. 平滑过渡（切换瞬间 JS 加 .gd-anim，450ms 后移除） ================= */
html.gd-anim,html.gd-anim body,html.gd-anim *{
  transition:background-color .35s cubic-bezier(.22,.61,.36,1),
             color .35s cubic-bezier(.22,.61,.36,1),
             border-color .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s cubic-bezier(.22,.61,.36,1)!important;
}

/* ================= 4. 顶栏切换按钮 + 日月图标 + 按钮组打磨 ================= */
/* 重要：顶栏图标按钮组的尺寸规格「已经存在于 ui-theme.css」并被统一打磨过 ——
     .layui-layout-admin .layui-header .layui-nav-item>a   → height:32px / padding:0 10px / border-radius:8px
     .layui-layout-admin .layui-header #searchIcon        → 同样 32px / 10px / 8px
     .layui-layout-admin .layui-header .layui-nav .layui-icon → color:var(--g-brand)（品牌蓝图标）
   新增的切换按钮本身就是 .layui-nav-item>a，天然继承同一套规格，
   因此这里「直接复用既有规格」，不再另立尺寸（原方案写的 60px 高 / 7px 圆角会与同组按钮
   高低不一，且需要 !important 去推翻既有浅色打磨）。本段只补三件事：
     ① hover 面（浅色 .12 / 深色 .26）与按下反馈
     ② 深色下的 hover 面加深
     ③ 日月双 SVG 的交叉切换动画（layui 2.5.5 无此图标，用内联 SVG）
   图标颜色沿用既有 ui-theme.css 的品牌蓝（--g-brand，深色下由第 1 段令牌自动变 #0A84FF），
   这样切换钮与搜索/消息/全屏属于同一视觉组，不出现「一颗灰图标混在蓝图标里」。 */
#themeToggle{cursor:pointer;}
#themeToggle,
#searchIcon{
  transition:background-color .18s var(--g-ease,cubic-bezier(.22,.61,.36,1)),
             color .18s var(--g-ease,cubic-bezier(.22,.61,.36,1))!important;
}
#themeToggle:hover,
#searchIcon:hover{background:rgba(120,120,128,.12);}
html.gd-dark #themeToggle:hover,
html.gd-dark #searchIcon:hover{background:rgba(120,120,128,.26);}
/* 按下反馈：内部图标缩小 */
#themeToggle:active .gd-theme-icon,
#searchIcon:active i{transform:scale(.88);}

/* 日月双 SVG 叠放（layui 2.5.5 无此图标，用内联 SVG） */
.gd-theme-icon{
  position:relative;display:inline-block;width:18px;height:18px;
  transition:transform .12s var(--g-ease,cubic-bezier(.22,.61,.36,1));
}
.gd-theme-icon svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.34,1.4,.64,1),opacity .3s ease;}
.gd-theme-icon .gd-sun{opacity:1;transform:none;}
.gd-theme-icon .gd-moon{opacity:0;transform:rotate(90deg) scale(.4);}
html.gd-dark .gd-theme-icon .gd-sun{opacity:0;transform:rotate(-90deg) scale(.4);}
html.gd-dark .gd-theme-icon .gd-moon{opacity:1;transform:none;}

/* ================= 5. 框架层深色覆盖（对照 ui-frame.css） ================= */
/* 顶栏下拉：macOS 深色菜单（浅色 rgba(255,255,255,.86) → 深色材质 + 加重投影） */
html.gd-dark .layui-layout-admin .layui-header .layui-nav .layui-nav-child{
  background:rgba(44,44,46,.88)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3)!important;
}
/* 顶栏 hover 面 */
html.gd-dark .layui-layout-admin .layui-header .layui-nav .layui-nav-item a:hover{
  background:rgba(120,120,128,.26);
}
/* 侧栏：子菜单底与各级 hover 面（浅色 .08/.14 → 深色 .16/.26） */
html.gd-dark .layui-side .layui-nav-tree .layui-nav-item a:hover{background:rgba(120,120,128,.26)!important;}
html.gd-dark .layui-side .layui-nav-tree .layui-nav-child{background:rgba(120,120,128,.16)!important;}
html.gd-dark .layui-side .layui-nav-tree .layui-nav-child a:hover{background:rgba(120,120,128,.26)!important;}
/* 侧栏原生 select（浅色 rgba(255,255,255,.9) → #3A3A3C） */
html.gd-dark .layui-side select{background:#3A3A3C!important;}
/* 侧栏滚动条 */
html.gd-dark .layui-side-scroll::-webkit-scrollbar-thumb{background:rgba(235,235,245,.22);}
/* 折叠态悬浮子菜单（浅色 rgba(255,255,255,.88) → 深色材质 + 加重投影） */
html.gd-dark .layui-layout-admin.admin-nav-mini .layui-side .layui-nav .admin-nav-hover>.layui-nav-child:before{
  background:rgba(44,44,46,.9)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.55)!important;
}
/* 页签条：hover 面、选中白卡 → 深色卡 */
html.gd-dark .layui-body>.layui-tab>.layui-tab-title li:hover{background:rgba(120,120,128,.26);}
html.gd-dark .layui-body>.layui-tab>.layui-tab-title li.layui-this{
  background:#3A3A3C!important;
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 0 0 .5px rgba(255,255,255,.04);
}
/* 页签关闭钮 / 工具按钮（上一页、下一页、页签下拉） */
html.gd-dark .layui-body>.layui-tab>.layui-tab-title li .layui-tab-close{background:rgba(120,120,128,.32)!important;}
html.gd-dark .admin-tabs-control,
html.gd-dark .layui-tab .admin-tab-refresh{background:rgba(120,120,128,.26)!important;}
html.gd-dark .admin-tabs-control:hover,
html.gd-dark .layui-tab .admin-tab-refresh:hover{background:rgba(120,120,128,.34)!important;}
/* 页签下拉 */
html.gd-dark .admin-tabs-select .layui-nav-child{
  background:rgba(44,44,46,.88)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.55)!important;
}
/* 侧栏图标徽章 8 色：换 iOS 深色变体（深色下仍保持彩色识别度） */
html.gd-dark .layui-side ul.layui-nav-tree>li.layui-nav-item:nth-child(8n+1)>a>.layui-icon{background:#0A84FF;}
html.gd-dark .layui-side ul.layui-nav-tree>li.layui-nav-item:nth-child(8n+2)>a>.layui-icon{background:#30D158;}
html.gd-dark .layui-side ul.layui-nav-tree>li.layui-nav-item:nth-child(8n+3)>a>.layui-icon{background:#FF9F0A;}
html.gd-dark .layui-side ul.layui-nav-tree>li.layui-nav-item:nth-child(8n+4)>a>.layui-icon{background:#FF375F;}
html.gd-dark .layui-side ul.layui-nav-tree>li.layui-nav-item:nth-child(8n+5)>a>.layui-icon{background:#BF5AF2;}
html.gd-dark .layui-side ul.layui-nav-tree>li.layui-nav-item:nth-child(8n+6)>a>.layui-icon{background:#40C8E0;}
html.gd-dark .layui-side ul.layui-nav-tree>li.layui-nav-item:nth-child(8n+7)>a>.layui-icon{background:#5E5CE6;}
html.gd-dark .layui-side ul.layui-nav-tree>li.layui-nav-item:nth-child(8n+8)>a>.layui-icon{background:#8E8E93;}

/* ================= 5.5 登录页深色（login.html） =================
   背景说明（先读图再决策）：登录页**没有背景图片** —— login.html 与 login.css 都写着
   background-image:none；#splashPic 上的 background-size 是 Google 验证码二维码容器，
   不是页面背景。真正的视觉背景是 .login-wrapper 的浅色渐变 + 两枚装饰光晕/圆环（纯 CSS）。
   因此不使用「全屏暗化遮罩」，直接把渐变换成深色等价物，并同步把品牌标题的深色文字渐变换成
   浅色（否则深底上的深色大标题不可读）。本小节只改颜色，不动任何尺寸/布局/结构。 */
html.gd-dark body{background-color:#1C1C1E!important;}   /* 与 ui-dark-components.css 同值，不冲突 */
html.gd-dark .login-wrapper{
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(10,132,255,.16), transparent 62%),
    radial-gradient(760px 520px at 88% 92%, rgba(94,92,230,.16), transparent 60%),
    linear-gradient(180deg, #1C1C1E 0%, #131315 100%);
}
html.gd-dark .login-wrapper::before{
  border-color:rgba(10,132,255,.22);
  background:radial-gradient(circle at 50% 50%, rgba(10,132,255,.12), transparent 66%);
}
html.gd-dark .login-wrapper::after{
  border-color:rgba(94,92,230,.20);
  background:radial-gradient(circle at 50% 50%, rgba(94,92,230,.10), transparent 68%);
}
html.gd-dark .login-hero-glow{
  background:radial-gradient(circle at 42% 40%, rgba(10,132,255,.22), rgba(94,92,230,.12) 58%, transparent 72%);
}
html.gd-dark .login-hero-title{
  color:#F5F5F7;
  background:linear-gradient(120deg, #F5F5F7 4%, #9CC6FF 52%, #0A84FF 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;
}
html.gd-dark .login-hero-title::after{background:linear-gradient(90deg,#0A84FF,rgba(94,92,230,.55) 55%,rgba(10,132,255,0));}
/* ---- 登录卡（login.html 内联 #FFFFFF!important / login.css .login-card 浅白玻璃） ---- */
html.gd-dark .login-body>.layui-card,
html.gd-dark .login-card{
  background:#2C2C2E!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.30)!important;
}
html.gd-dark .login-body .layui-card-header,
html.gd-dark .login-card .layui-card-header{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0))!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  color:#F5F5F7!important;
}
html.gd-dark .login-body .layui-card-header .layui-icon{color:var(--g-brand);}
html.gd-dark .login-card-title{color:#F5F5F7;}
html.gd-dark .login-card-sub{color:rgba(235,235,245,.60);}
/* ---- 表单控件（login.html 内联背景/聚焦环均为浅色硬编码） ---- */
html.gd-dark .login-body .layui-form-pane .layui-form-label{color:rgba(235,235,245,.70)!important;}
html.gd-dark .login-body .layui-input{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#F5F5F7!important;
}
html.gd-dark .login-body .layui-input::placeholder{color:rgba(235,235,245,.35)!important;}
html.gd-dark .login-body .layui-input:focus{
  border-color:#0A84FF!important;
  box-shadow:0 0 0 3.5px rgba(10,132,255,.35)!important;
}
/* ---- Google 验证码弹窗：内联 style 写死 background-color:white ---- */
html.gd-dark #oauthForm{background-color:#1C1C1E!important;}
html.gd-dark #oauthForm .layui-input{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#F5F5F7!important;
}

/* ================= 6. 顶栏搜索框 / 结果面板深色 ================= */
/* 二者都是内联样式写死的白底白面，必须 !important 覆盖 */
html.gd-dark #menuSearchInput{
  background:rgba(44,44,46,.92)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#F5F5F7!important;
}
html.gd-dark #menuSearchInput::placeholder{color:rgba(235,235,245,.38)!important;}
html.gd-dark #menuSearchResult{
  background:rgba(44,44,46,.94)!important;
  border-color:rgba(255,255,255,.1)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.62),0 2px 8px rgba(0,0,0,.45)!important;
}
/* 结果项：li / a 都带内联浅色，需 !important 覆盖；hover 走苹果蓝胶囊白字 */
html.gd-dark #menuSearchResult li{color:var(--g-txt)!important;}
html.gd-dark #menuSearchResult .layui-menu-item{background-color:rgba(120,120,128,.18)!important;}
html.gd-dark #menuSearchResult .layui-menu-item a{color:var(--g-txt)!important;}
html.gd-dark #menuSearchResult .layui-menu-item:hover{background-color:var(--g-brand)!important;}
html.gd-dark #menuSearchResult .layui-menu-item:hover a{color:#fff!important;}