/* ============================================================================
   云创OA · 新外观皮肤体系  ycc-premium.css
   皮肤：ink 墨青轻奢(默认) / graphite 石墨经典 / light 晨曦白 / navy 藏青蓝
   皮肤通过 body.ycc-skin-* 覆写设计令牌，全站配色随令牌变化。
   注意：本文件必须在页面级内联 <style> 之后加载（见 base.html）。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 设计令牌（默认皮肤：墨青轻奢）
   --------------------------------------------------------------------------- */
:root,
body.ycc-skin-ink {
  /* 品牌主色阶（主导表面：侧栏、按钮、标题） */
  --ycc-brand-900: #0B2329;
  --ycc-brand-800: #0E2A33;
  --ycc-brand-700: #123842;
  --ycc-brand-600: #14605A;
  --ycc-brand-500: #1B7A70;

  /* 强调色（单屏仅此一个强调，克制使用） */
  --ycc-accent: #C8922E;
  --ycc-accent-bright: #E0B464;
  --ycc-accent-soft: rgba(200, 146, 46, 0.14);
  --ycc-accent-line: rgba(200, 146, 46, 0.22);

  /* 工作区表面 */
  --ycc-bg: #F6F4EF;
  --ycc-surface: #FFFFFF;
  --ycc-surface-2: #FBFAF7;
  --ycc-surface-3: #F2F0EA;

  /* 文字 */
  --ycc-text: #1F2A2E;
  --ycc-text-2: #3C4A4E;
  --ycc-muted: #6E7A78;

  /* 侧栏 */
  --ycc-side-bg: radial-gradient(130% 55% at 50% -12%, rgba(200, 146, 46, 0.12), transparent 60%),
                 linear-gradient(180deg, #0E2A33 0%, #0B2329 100%);
  --ycc-side-bg-color: #0E2A33;
  --ycc-side-fg: rgba(255, 255, 255, 0.74);
  --ycc-side-fg-strong: #FFFFFF;
  --ycc-side-fg-dim: rgba(255, 255, 255, 0.46);
  --ycc-side-hover: rgba(255, 255, 255, 0.07);
  --ycc-side-active-bg: rgba(200, 146, 46, 0.12);
  --ycc-side-shadow: 1px 0 0 rgba(200, 146, 46, 0.22);
  --ycc-side-dark: 1; /* 1=深色侧栏，图标/Logo 需反白 */

  /* 顶栏 */
  --ycc-head-bg: linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 100%);
  --ycc-head-fg: #3C4A4E;
  --ycc-head-fg-hover: #0E2A33;

  /* 边框 */
  --ycc-border: rgba(15, 42, 51, 0.10);
  --ycc-border-strong: rgba(15, 42, 51, 0.16);

  /* 阴影 */
  --ycc-shadow-1: 0 1px 2px rgba(15, 42, 51, 0.05), 0 1px 3px rgba(15, 42, 51, 0.06);
  --ycc-shadow-2: 0 8px 24px rgba(15, 42, 51, 0.10);
  --ycc-shadow-3: 0 24px 64px rgba(15, 42, 51, 0.22);

  /* 登录页背景 */
  --ycc-login-bg: radial-gradient(60% 60% at 12% 8%, rgba(20, 96, 90, 0.45), transparent 60%),
                  radial-gradient(50% 50% at 92% 96%, rgba(200, 146, 46, 0.30), transparent 60%),
                  linear-gradient(150deg, #0B2329 0%, #0E2A33 45%, #14605A 100%);
  --ycc-login-foot-fg: rgba(255, 255, 255, 0.42);
}

/* ---------------------------------------------------------------------------
   2. 公共令牌（不随皮肤变化）
   --------------------------------------------------------------------------- */
:root {
  --ycc-font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --ycc-font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Segoe UI", sans-serif;
  --ycc-radius: 14px;
  --ycc-radius-sm: 10px;
  --ycc-radius-xs: 7px;
  --ycc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ycc-dur-fast: 160ms;
  --ycc-dur: 320ms;
  --ycc-dur-slow: 640ms;
}

/* ---------------------------------------------------------------------------
   3. 皮肤变体
   --------------------------------------------------------------------------- */
/* 石墨经典：中性深灰 + 冷银强调，最稳妥的商务深色调 */
body.ycc-skin-graphite,
body.ycc-skin-black {
  --ycc-brand-900: #171A1D;
  --ycc-brand-800: #1F2429;
  --ycc-brand-700: #2B3138;
  --ycc-brand-600: #3A424B;
  --ycc-brand-500: #4A545F;

  --ycc-accent: #8A9AA8;
  --ycc-accent-bright: #B6C4D0;
  --ycc-accent-soft: rgba(138, 154, 168, 0.16);
  --ycc-accent-line: rgba(138, 154, 168, 0.24);

  --ycc-bg: #F4F5F6;
  --ycc-surface: #FFFFFF;
  --ycc-surface-2: #FAFBFB;
  --ycc-surface-3: #F0F2F3;

  --ycc-text: #1B1F23;
  --ycc-text-2: #3A4249;
  --ycc-muted: #6B747C;

  --ycc-side-bg: linear-gradient(180deg, #1F2429 0%, #171A1D 100%);
  --ycc-side-bg-color: #1F2429;
  --ycc-side-fg: rgba(255, 255, 255, 0.72);
  --ycc-side-fg-strong: #FFFFFF;
  --ycc-side-fg-dim: rgba(255, 255, 255, 0.42);
  --ycc-side-hover: rgba(255, 255, 255, 0.06);
  --ycc-side-active-bg: rgba(182, 196, 208, 0.14);
  --ycc-side-shadow: 1px 0 0 rgba(0, 0, 0, 0.20);
  --ycc-side-dark: 1;

  --ycc-head-bg: linear-gradient(180deg, #FFFFFF 0%, #FAFBFB 100%);
  --ycc-head-fg: #3A4249;
  --ycc-head-fg-hover: #1F2429;

  --ycc-border: rgba(20, 24, 28, 0.10);
  --ycc-border-strong: rgba(20, 24, 28, 0.16);
  --ycc-shadow-1: 0 1px 2px rgba(20, 24, 28, 0.05), 0 1px 3px rgba(20, 24, 28, 0.06);
  --ycc-shadow-2: 0 8px 24px rgba(20, 24, 28, 0.10);
  --ycc-shadow-3: 0 24px 64px rgba(20, 24, 28, 0.24);

  --ycc-login-bg: radial-gradient(60% 60% at 12% 8%, rgba(74, 84, 95, 0.55), transparent 62%),
                  radial-gradient(50% 50% at 90% 96%, rgba(182, 196, 208, 0.22), transparent 60%),
                  linear-gradient(150deg, #171A1D 0%, #1F2429 50%, #3A424B 100%);
  --ycc-login-foot-fg: rgba(255, 255, 255, 0.40);
}

/* 晨曦白：浅色侧栏 + 墨青强调，明亮清爽，适合长时间办公 */
body.ycc-skin-light,
body.ycc-skin-white {
  --ycc-brand-900: #123842;
  --ycc-brand-800: #14605A;
  --ycc-brand-700: #1B7A70;
  --ycc-brand-600: #0E2A33;
  --ycc-brand-500: #2A8C80;

  --ycc-accent: #B8862B;
  --ycc-accent-bright: #D8A94F;
  --ycc-accent-soft: rgba(184, 134, 43, 0.12);
  --ycc-accent-line: rgba(184, 134, 43, 0.20);

  --ycc-bg: #F7F8F9;
  --ycc-surface: #FFFFFF;
  --ycc-surface-2: #FBFBFC;
  --ycc-surface-3: #F1F3F4;

  --ycc-text: #1C2427;
  --ycc-text-2: #38444A;
  --ycc-muted: #6B777C;

  --ycc-side-bg: linear-gradient(180deg, #FFFFFF 0%, #FBFBFC 100%);
  --ycc-side-bg-color: #FFFFFF;
  --ycc-side-fg: #4A555B;
  --ycc-side-fg-strong: #14605A;
  --ycc-side-fg-dim: #8C979C;
  --ycc-side-hover: rgba(20, 96, 90, 0.06);
  --ycc-side-active-bg: rgba(184, 134, 43, 0.12);
  --ycc-side-shadow: 1px 0 2px 0 rgba(20, 24, 28, 0.06);
  --ycc-side-dark: 0;

  --ycc-head-bg: linear-gradient(180deg, #FFFFFF 0%, #FBFBFC 100%);
  --ycc-head-fg: #38444A;
  --ycc-head-fg-hover: #14605A;

  --ycc-border: rgba(20, 36, 42, 0.10);
  --ycc-border-strong: rgba(20, 36, 42, 0.16);
  --ycc-shadow-1: 0 1px 2px rgba(20, 36, 42, 0.05), 0 1px 3px rgba(20, 36, 42, 0.06);
  --ycc-shadow-2: 0 8px 24px rgba(20, 36, 42, 0.10);
  --ycc-shadow-3: 0 24px 64px rgba(20, 36, 42, 0.20);

  --ycc-login-bg: radial-gradient(60% 60% at 10% 8%, rgba(20, 96, 90, 0.16), transparent 62%),
                  radial-gradient(50% 50% at 92% 94%, rgba(184, 134, 43, 0.18), transparent 60%),
                  linear-gradient(150deg, #F7F8F9 0%, #EEF2F3 100%);
  --ycc-login-foot-fg: #6B777C;
}

/* 藏青蓝：深海藏青 + 冰蓝强调，理性科技感 */
body.ycc-skin-navy,
body.ycc-skin-blue {
  --ycc-brand-900: #0C1B33;
  --ycc-brand-800: #102544;
  --ycc-brand-700: #16335C;
  --ycc-brand-600: #1D4B85;
  --ycc-brand-500: #2C68AE;

  --ycc-accent: #4FA3D1;
  --ycc-accent-bright: #7FC3E8;
  --ycc-accent-soft: rgba(79, 163, 209, 0.14);
  --ycc-accent-line: rgba(79, 163, 209, 0.24);

  --ycc-bg: #F5F7FA;
  --ycc-surface: #FFFFFF;
  --ycc-surface-2: #FAFBFD;
  --ycc-surface-3: #EFF2F7;

  --ycc-text: #1A2331;
  --ycc-text-2: #36445A;
  --ycc-muted: #69768A;

  --ycc-side-bg: radial-gradient(130% 55% at 50% -12%, rgba(79, 163, 209, 0.14), transparent 60%),
                 linear-gradient(180deg, #102544 0%, #0C1B33 100%);
  --ycc-side-bg-color: #102544;
  --ycc-side-fg: rgba(255, 255, 255, 0.74);
  --ycc-side-fg-strong: #FFFFFF;
  --ycc-side-fg-dim: rgba(255, 255, 255, 0.46);
  --ycc-side-hover: rgba(255, 255, 255, 0.07);
  --ycc-side-active-bg: rgba(79, 163, 209, 0.14);
  --ycc-side-shadow: 1px 0 0 rgba(79, 163, 209, 0.22);
  --ycc-side-dark: 1;

  --ycc-head-bg: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  --ycc-head-fg: #36445A;
  --ycc-head-fg-hover: #102544;

  --ycc-border: rgba(16, 37, 68, 0.10);
  --ycc-border-strong: rgba(16, 37, 68, 0.16);
  --ycc-shadow-1: 0 1px 2px rgba(16, 37, 68, 0.05), 0 1px 3px rgba(16, 37, 68, 0.06);
  --ycc-shadow-2: 0 8px 24px rgba(16, 37, 68, 0.10);
  --ycc-shadow-3: 0 24px 64px rgba(16, 37, 68, 0.24);

  --ycc-login-bg: radial-gradient(60% 60% at 12% 8%, rgba(29, 75, 133, 0.50), transparent 62%),
                  radial-gradient(50% 50% at 92% 96%, rgba(79, 163, 209, 0.26), transparent 60%),
                  linear-gradient(150deg, #0C1B33 0%, #102544 48%, #1D4B85 100%);
  --ycc-login-foot-fg: rgba(255, 255, 255, 0.42);
}

/* ---------------------------------------------------------------------------
   4. 全局基础
   --------------------------------------------------------------------------- */
body.main-body {
  font-family: var(--ycc-font-sans);
  background-color: var(--ycc-bg);
  color: var(--ycc-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ycc-figure,
.panel-num .blue,
.layui-card-body .layui-timeline-title {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* layui 主题色锚点 */
:root { --layui-primary: var(--ycc-brand-800); }

/* ---------------------------------------------------------------------------
   4.1 文字色彩层级（标题 / 正文 / 辅助 / 极弱 / 链接）
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.layui-card-header,
.layui-card-title,
.layui-form-label strong,
.p-page .panel-num .blue { color: var(--ycc-text); }

body.main-body,
.layui-card-body,
.layui-table td,
.layui-form-item .layui-input-block,
.layui-tab-content,
.layui-timeline-content { color: var(--ycc-text-2); }

/* 辅助说明 / 提示文字：统一弱化为 --ycc-muted，避免深浅不一 */
.layui-word-aux,
.layui-form-mid,
.layui-tips,
.layui-text p,
.layui-table-tips-c,
.help-block,
.text-muted,
.layui-font-gray,
.gray, .gray-dark, .gray-disabled {
  color: var(--ycc-muted) !important;
}
.layui-font-black { color: var(--ycc-text) !important; }

/* 语义色：与主题协调，避免原生的亮蓝/荧光绿 */
.blue, .blue-dark, .layui-font-blue { color: var(--ycc-brand-600) !important; }
.layui-font-cyan { color: var(--ycc-brand-700) !important; }
.green, .green-dark, .layui-font-green { color: #1F8A5F !important; }
.red, .red-dark, .layui-font-red { color: #C0392B !important; }
.yellow, .yellow-dark, .layui-font-orange { color: #A9761C !important; }
.layui-font-purple { color: #7B4FA8 !important; }
.blue-light, .green-light, .red-light, .yellow-light, .gray-light { color: var(--ycc-muted) !important; }

/* 链接：主色系，悬停转强调色 */
a { color: var(--ycc-brand-600); }
a:hover { color: var(--ycc-accent); }
.layui-card-header a:hover, .p-page a:hover { color: var(--ycc-accent); }

/* 引用块 / 提示条 */
.layui-elem-quote {
  background: var(--ycc-surface-2) !important;
  border-left: 5px solid var(--ycc-accent) !important;
  color: var(--ycc-text-2);
  border-radius: 0 var(--ycc-radius-xs) var(--ycc-radius-xs) 0;
}
.layui-elem-field { border-color: var(--ycc-border) !important; }
.layui-elem-field legend { color: var(--ycc-text); }

/* 表单标签与静态文本 */
.layui-form-label { color: var(--ycc-text-2); }
.layui-form-item .layui-form-checkbox span,
.layui-form-radio div { color: var(--ycc-text-2) !important; }

/* 空数据提示 */
.layui-table-empty, .layui-none { color: var(--ycc-muted) !important; }

/* ---------------------------------------------------------------------------
   5. 侧边栏
   --------------------------------------------------------------------------- */
.ycc-layout .layui-side,
.ycc-layout .layui-side-menu,
.ycc-layout .layui-side-black,
.ycc-layout .layui-side-white,
.ycc-layout .layui-side-blue,
.ycc-layout .layui-side-expand {
  background: var(--ycc-side-bg);
  background-color: var(--ycc-side-bg-color);
  color: var(--ycc-side-fg);
  box-shadow: var(--ycc-side-shadow);
}

.ycc-layout .layui-logo,
.ycc-layout .layui-logo a {
  color: var(--ycc-side-fg-strong) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ycc-accent-line) !important;
  letter-spacing: 1px;
}
/* ===== 通用卡片 / 宫格（body-card · card-header · square），统一收编到皮肤令牌 ===== */
.p-page .body-card {
  background-color: var(--ycc-surface);
  border: 1px solid var(--ycc-border);
  border-radius: var(--ycc-radius);
  box-shadow: var(--ycc-shadow-1);
  overflow: hidden;
}
.p-page .card-header {
  height: 46px; line-height: 46px; text-indent: 14px;
  color: var(--ycc-text);
  border-bottom: 1px solid var(--ycc-border);
}
.p-page .card-header.card-header-sub {
  height: auto; line-height: 1.2; padding: 14px 0 6px 12px; text-indent: 0;
  border-bottom: 0;
}
.p-page .card-header h3.h3-title,
.p-page .card-header .h3-title {
  font-family: var(--ycc-font-display);
  font-size: 16px; font-weight: 700; margin: 0;
  padding-left: 10px; position: relative; color: var(--ycc-text);
}
.p-page .card-header h3.h3-title::before,
.p-page .card-header .h3-title::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 2px; background: var(--ycc-accent);
}
.p-page .card-header strong {
  color: var(--ycc-text-2); font-size: 13px; font-weight: 600; line-height: 1.2;
  background: var(--ycc-accent-soft);
  padding: 5px 10px; border-radius: 6px; text-indent: 0; display: inline-block;
}
.p-page .square { padding: 4px 12px 12px; }
.p-page .square .layui-row { margin: 0 -6px; }
.p-page .square .layui-col-md2 { padding: 6px; border: 0; cursor: pointer; }
.p-page .square .layui-col-md2 div {
  height: 84px; padding: 14px 6px; text-align: center;
  background-color: var(--ycc-surface);
  border: 1px solid var(--ycc-border);
  border-radius: var(--ycc-radius-sm);
  color: var(--ycc-text-2); font-size: 13px; line-height: 1.4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  overflow: hidden;
  transition: border-color var(--ycc-dur-fast) var(--ycc-ease),
              box-shadow var(--ycc-dur-fast) var(--ycc-ease),
              color var(--ycc-dur-fast) var(--ycc-ease),
              background-color var(--ycc-dur-fast) var(--ycc-ease);
}
.p-page .square .layui-col-md2 i {
  font-size: 26px; font-weight: 500; display: block; line-height: 1;
  color: var(--ycc-brand-600);
  transition: color var(--ycc-dur-fast) var(--ycc-ease);
}
.p-page .square .layui-col-md2 div:hover {
  color: var(--ycc-brand-800);
  border-color: var(--ycc-accent);
  background-color: var(--ycc-accent-soft);
  box-shadow: var(--ycc-shadow-1);
}
.p-page .square .layui-col-md2 div:hover i { color: var(--ycc-accent); }
.p-page .apply-tip {
  padding: 14px 16px; text-align: center; font-size: 13px;
  color: var(--ycc-muted);
  border-top: 1px solid var(--ycc-border);
  background: var(--ycc-surface-2);
}
.p-page .apply-tip a { color: var(--ycc-accent); font-weight: 600; }
/* 详情页里残留的谷歌蓝图标（查看/编辑态高亮）统一收编为主色 */
.p-page .layui-icon[data-on],
.p-page .layui-icon[data-on="true"] { color: var(--ycc-brand-600) !important; }
@media (max-width: 1024px) { .p-page .square .layui-col-md2 { width: 33.3333%; } }
@media (max-width: 640px)  { .p-page .square .layui-col-md2 { width: 50%; } }

/* ===== 侧栏品牌标识（内联 SVG，颜色完全由皮肤令牌驱动） ===== */
.ycc-layout .layui-logo .ycc-brand {
  display: inline-flex; align-items: center; gap: 10px;
  height: 49px; line-height: 49px; vertical-align: middle;
}
.ycc-layout .layui-logo .ycc-brand-mark { width: 30px; height: 30px; display: block; flex: none; }
.ycc-layout .layui-logo .ycc-mark-bg { fill: var(--ycc-brand-800); }
.ycc-layout .layui-logo .ycc-mark-glyph { stroke: #FFFFFF; }
.ycc-layout .layui-logo .ycc-mark-bldg { fill: var(--ycc-accent); }
.ycc-layout .layui-logo .ycc-brand-text {
  font-family: var(--ycc-font-serif), "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: 1px;
  color: var(--ycc-side-fg-strong);
  white-space: nowrap;
}
.ycc-layout .layui-logo .ycc-brand-oa { color: var(--ycc-accent-bright); }

/* 深色侧栏：方块转暖金、笔画转墨青 —— 金在深底上对比最强，品牌色明确可见 */
body:not(.ycc-skin-light):not(.ycc-skin-white) .ycc-layout .layui-logo .ycc-mark-bg { fill: var(--ycc-accent); }
body:not(.ycc-skin-light):not(.ycc-skin-white) .ycc-layout .layui-logo .ycc-mark-glyph { stroke: var(--ycc-brand-800); }
body:not(.ycc-skin-light):not(.ycc-skin-white) .ycc-layout .layui-logo .ycc-mark-bldg { fill: var(--ycc-brand-800); }
body:not(.ycc-skin-light):not(.ycc-skin-white) .ycc-layout .layui-logo .ycc-brand-oa { color: var(--ycc-accent-bright); }

/* 侧栏收起：只留图标 */
.side-spread .ycc-layout .layui-logo .ycc-brand-text { display: none; }
.side-spread .ycc-layout .layui-logo .ycc-brand { gap: 0; justify-content: center; width: 100%; }
.side-spread .ycc-layout .layui-logo .ycc-brand-mark { width: 28px; height: 28px; }

/* 兼容：若管理员换成自定义图片 Logo */
.ycc-layout .layui-logo img.syslogo { height: 32px; width: auto; max-width: 166px; object-fit: contain; }
.ycc-layout .layui-logo img.logo { height: 30px; width: auto; object-fit: contain; }
.ycc-layout .layui-logo img.syslogo:not([src*="syslogo_premium.svg"]) {
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
  opacity: 0.95;
}

/* 客户自定义图片 Logo（非云创自带）：深色底反白剪影，浅色底保留本色 */
body.ycc-skin-light .ycc-layout .layui-logo img.syslogo,
body.ycc-skin-white .ycc-layout .layui-logo img.syslogo { filter: none; opacity: 1; }

.ycc-layout .layui-side-menu .layui-nav { background: transparent; }
.ycc-layout .layui-side-menu .layui-nav-item > a,
.ycc-layout .layui-side-menu .layui-nav-child a {
  color: var(--ycc-side-fg);
  font-size: 14px;
  transition: color var(--ycc-dur-fast) var(--ycc-ease),
              background-color var(--ycc-dur-fast) var(--ycc-ease);
}
.ycc-layout .layui-side-menu .layui-nav-item > a:hover,
.ycc-layout .layui-side-menu .layui-nav-itemed > a,
.ycc-layout .layui-side-menu .layui-nav-item.layui-this > a {
  color: var(--ycc-side-fg-strong);
  background: var(--ycc-side-hover);
}
.ycc-layout .layui-side-menu .layui-nav-child dd a:hover { color: var(--ycc-side-fg-strong); }

.ycc-layout .layui-side-menu .layui-nav-bar { background-color: var(--ycc-accent) !important; width: 3px; }
.ycc-layout .layui-side-menu .layui-nav-child dd.layui-this a,
.ycc-layout .layui-side-menu .layui-nav-item .layui-nav-child .layui-this a {
  color: var(--ycc-accent-bright) !important;
}
.ycc-layout .layui-side-menu .layui-nav-child dd.layui-this { background: var(--ycc-side-active-bg); }
.ycc-layout .layui-side-menu .layui-nav-more { color: var(--ycc-side-fg-dim) !important; }

.ycc-layout .layui-side-menu .layui-nav-item .iconfont,
.ycc-layout .layui-side-menu .layui-nav-item .bi,
.ycc-layout .layui-side-menu .layui-nav-item .layui-icon {
  color: var(--ycc-side-fg-dim);
  font-size: 18px;
}
.ycc-layout .layui-side-menu .layui-nav-item.layui-this .iconfont,
.ycc-layout .layui-side-menu .layui-nav-item.layui-this .bi { color: var(--ycc-accent-bright); }

/* 浅色皮肤：换回本色版（墨青+暖金），不反白 */
body.ycc-skin-light .ycc-layout .layui-logo img.syslogo[src*="syslogo_premium.svg"],
body.ycc-skin-white .ycc-layout .layui-logo img.syslogo[src*="syslogo_premium.svg"] {
  content: url("/static/home/images/syslogo_premium.svg");
  filter: none; opacity: 1;
}
body.ycc-skin-light .ycc-layout .layui-logo img.logo[src*="syslogo_small_premium.svg"],
body.ycc-skin-white .ycc-layout .layui-logo img.logo[src*="syslogo_small_premium.svg"] {
  content: url("/static/home/images/syslogo_small_premium.svg");
  filter: none; opacity: 1;
}
body.ycc-skin-light .ycc-layout .layui-logo img.syslogo:not([src*="syslogo_premium.svg"]),
body.ycc-skin-white .ycc-layout .layui-logo img.syslogo:not([src*="syslogo_premium.svg"]),
body.ycc-skin-light .ycc-layout .layui-logo img.logo,
body.ycc-skin-white .ycc-layout .layui-logo img.logo { filter: none; opacity: 1; }

/* 浅色皮肤：子菜单底面跟随侧栏，避免深色残留 */
body.ycc-skin-light .ycc-layout .layui-side-menu .layui-nav-child,
body.ycc-skin-light .ycc-layout .layui-side-menu .layui-nav-itemed > .layui-nav-child,
body.ycc-skin-white .ycc-layout .layui-side-menu .layui-nav-child,
body.ycc-skin-white .ycc-layout .layui-side-menu .layui-nav-itemed > .layui-nav-child {
  background: rgba(255, 255, 255, 0.9) !important;
}

/* 展开式菜单同步换肤 */
.ycc-layout .layui-side-expand .menu-li > a { color: var(--ycc-side-fg); }
.ycc-layout .layui-side-expand .menu-li > a:hover,
.ycc-layout .layui-side-expand .menu-li > a.layui-this { color: var(--ycc-side-fg-strong); background: var(--ycc-side-hover); }
.ycc-layout .layui-side-expand .menu-li .ycc-second-menu dd a.layui-this {
  color: var(--ycc-brand-800) !important;
  border-right: 3px solid var(--ycc-accent);
  background: var(--ycc-accent-soft);
}

/* ---------------------------------------------------------------------------
   6. 顶栏
   --------------------------------------------------------------------------- */
.ycc-layout .layui-header {
  background: var(--ycc-head-bg);
  border-bottom: 1px solid var(--ycc-border);
  box-shadow: 0 1px 0 var(--ycc-accent-line);
}
.ycc-layout .layui-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ycc-accent) 50%, transparent);
  opacity: 0.40;
}
.ycc-layout .layui-header::before {
  content: ""; position: absolute; top: 0; right: 0; width: 380px; height: 100%; pointer-events: none;
  background: radial-gradient(120% 140% at 100% 0%, var(--ycc-accent-soft), transparent 62%);
}
.ycc-layout .layui-header a,
.ycc-layout .layui-header a cite { color: var(--ycc-head-fg); }
.ycc-layout .layui-header a:hover { color: var(--ycc-head-fg-hover); }
.ycc-layout .layui-layout-right .ycc-head-item { border-left: 1px solid var(--ycc-border); }
.ycc-layout .layui-layout-right .ycc-head-item i.layui-icon { color: var(--ycc-head-fg); }
.ycc-layout .layui-layout-right .ycc-head-item a:hover i.layui-icon { color: var(--ycc-accent); }

.ycc-layout .ycc-message-num span {
  background-color: #D9534F;
  box-shadow: 0 2px 6px rgba(217, 83, 79, 0.4);
}
.ycc-layout .ycc-head-avatar img { border: 2px solid var(--ycc-border-strong); }

/* 皮肤切换下拉：色板预览 */
.ycc-skin-drop .layui-dropdown-menu { min-width: 208px; padding: 6px; }
.ycc-skin-drop .layui-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.ycc-skin-drop .layui-menu-item:hover { background: var(--ycc-surface-3); }
.ycc-skin-drop .ycc-skin-swatch {
  width: 30px; height: 20px; border-radius: 5px; flex: none;
  border: 1px solid var(--ycc-border-strong); overflow: hidden; display: flex;
}
.ycc-skin-drop .ycc-skin-swatch i { flex: 1; }
.ycc-skin-drop .ycc-skin-swatch i:first-child { flex: 0 0 40%; }
.ycc-skin-drop .layui-menu-item .ycc-skin-name { font-size: 13px; color: var(--ycc-text); }
.ycc-skin-drop .layui-menu-item.ycc-skin-current .ycc-skin-name { color: var(--ycc-accent); font-weight: 600; }
.ycc-skin-drop .layui-menu-item.ycc-skin-current::after { content: "✓"; margin-left: auto; color: var(--ycc-accent); font-weight: 700; }

/* ---------------------------------------------------------------------------
   7. 页面标签
   --------------------------------------------------------------------------- */
.ycc-layout .page-tabs {
  border-bottom: 1px solid var(--ycc-border);
  background: var(--ycc-surface-2);
}
.ycc-layout .layui-tab.ycc-admin-tab .layui-tab-title li {
  color: var(--ycc-muted);
  border-right: 1px solid var(--ycc-border);
}
.ycc-layout .layui-tab.ycc-admin-tab .layui-tab-title li.layui-this {
  color: var(--ycc-brand-800);
  background: var(--ycc-surface);
}
.ycc-layout .layui-tab.ycc-admin-tab .layui-tab-title li.layui-this::after { border-bottom-color: var(--ycc-accent); }

/* ---------------------------------------------------------------------------
   8. 卡片 / 通用容器
   --------------------------------------------------------------------------- */
.layui-card {
  background: var(--ycc-surface);
  border: 1px solid var(--ycc-border);
  border-radius: var(--ycc-radius);
  box-shadow: var(--ycc-shadow-1);
  overflow: visible;
  transition: box-shadow var(--ycc-dur) var(--ycc-ease), transform var(--ycc-dur) var(--ycc-ease);
}
/* 注意：此处绝不要加 transform: translateY()，否则 hover 时会创建层叠上下文，
   把 layui 原生下拉 dl(z-index:899) 困在卡片内，被后续兄弟(表格)盖住（挡下拉 bug）。
   悬浮反馈仅用 box-shadow，box-shadow 不创建层叠上下文，安全。 */
.layui-card:hover { box-shadow: var(--ycc-shadow-2); }
.layui-card-header {
  height: auto; line-height: 1.4; padding: 15px 18px;
  border-bottom: 1px solid var(--ycc-border);
  color: var(--ycc-text); font-weight: 600; font-size: 15px;
  background: var(--ycc-surface);
  display: flex; align-items: center; gap: 8px;
}
.layui-card-header::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, var(--ycc-accent), var(--ycc-brand-600));
}
.layui-card-body { padding: 18px; color: var(--ycc-text-2); }
.layui-card-title { padding: 12px 12px 0; color: var(--ycc-text); }

/* ---------------------------------------------------------------------------
   9. 仪表盘（工作台）—— 逐项收敛到令牌，消除灰块/蓝字/米黄底
   --------------------------------------------------------------------------- */
.p-page { background: transparent; }

/* 顶部统计条 */
.p-page .panel-num td,
.panel-num td {
  border-left: 1px solid var(--ycc-border) !important;
  padding: 22px 0 !important;
}
.p-page .panel-num td:nth-child(1),
.panel-num td:nth-child(1) { border-left: none !important; }
.p-page .panel-num .num-title,
.panel-num .num-title { color: var(--ycc-muted) !important; font-size: 13px; letter-spacing: 0.5px; }
.p-page .panel-num .blue,
.panel-num .blue {
  color: var(--ycc-brand-800) !important;
  font-size: 30px !important;
  font-weight: 600;
  font-family: var(--ycc-font-display);
}
.p-page .panel-num .badge span,
.panel-num .badge span {
  background: var(--ycc-accent-soft) !important;
  color: var(--ycc-accent) !important;
  border-radius: 0 0 0 6px;
  font-weight: 600;
}
.p-page .dashboard-total td { border-top: 1px solid var(--ycc-border); }

/* 快捷入口（顶部四个方块） */
.p-page .layui-shortcut-menu li a,
.layui-shortcut-menu li a {
  background-color: var(--ycc-surface-2) !important;
  border: 1px solid var(--ycc-border);
  border-radius: var(--ycc-radius-sm);
  padding: 10px 0;
  transition: all var(--ycc-dur) var(--ycc-ease);
}
.p-page .layui-shortcut-menu li .iconfont,
.layui-shortcut-menu li .iconfont {
  background-color: var(--ycc-brand-800) !important;
  color: #fff !important;
  border-radius: var(--ycc-radius-sm) !important;
  transition: all var(--ycc-dur) var(--ycc-ease);
}
.p-page .layui-shortcut-menu li cite,
.layui-shortcut-menu li cite {
  color: var(--ycc-text-2) !important;
  font-size: 13px;
  /* 长标签（如「资讯要闻统计」）不换行错位，超出省略 */
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 4px; line-height: 1.5;
}
.p-page .layui-shortcut-menu li:hover a,
.layui-shortcut-menu li:hover a {
  background-color: var(--ycc-surface) !important;
  border-color: var(--ycc-accent) !important;
  box-shadow: var(--ycc-shadow-1);
}
.p-page .layui-shortcut-menu li:hover .iconfont,
.layui-shortcut-menu li:hover .iconfont { background-color: var(--ycc-accent) !important; }
.p-page .layui-shortcut-menu li:hover cite,
.layui-shortcut-menu li:hover cite { color: var(--ycc-brand-800) !important; }

/* 企业日常 / 短菜单图标 */
.p-page .layui-short-menu li .iconfont,
.layui-short-menu li .iconfont {
  background-color: var(--ycc-surface-3) !important;
  color: var(--ycc-brand-800) !important;
  border-radius: var(--ycc-radius-sm) !important;
}
.p-page .layui-short-menu li cite,
.layui-short-menu li cite { color: var(--ycc-text-2) !important; }
.p-page .layui-short-menu li:hover .iconfont,
.layui-short-menu li:hover .iconfont {
  background-color: var(--ycc-brand-800) !important;
  color: #fff !important;
}
.p-page .layui-short-menu li:hover cite,
.layui-short-menu li:hover cite { color: var(--ycc-brand-800) !important; }

/* 待办事项 / 紧急事项小方块 */
.p-page .layui-matter-item li a,
.layui-matter-item li a {
  background-color: var(--ycc-surface-2) !important;
  border: 1px solid var(--ycc-border);
  color: var(--ycc-text-2) !important;
  border-radius: var(--ycc-radius-sm) !important;
}
.p-page .layui-matter-item li cite,
.layui-matter-item li cite { color: var(--ycc-brand-800) !important; font-size: 24px; font-weight: 300; }
.p-page .layui-matter-item li a:hover,
.layui-matter-item li a:hover {
  background-color: var(--ycc-surface) !important;
  border-color: var(--ycc-accent) !important;
  box-shadow: var(--ycc-shadow-1);
}

/* 右侧工具栏（办公审批 / 办公工具） */
.p-page .layui-right-bar a,
.layui-right-bar a {
  background-color: var(--ycc-surface-2) !important;
  border: 1px solid var(--ycc-border);
  color: var(--ycc-text-2) !important;
  border-radius: var(--ycc-radius-sm) !important;
}
.p-page .layui-right-bar a .iconfont,
.layui-right-bar a .iconfont { color: var(--ycc-brand-800) !important; }
.p-page .layui-right-bar a:hover,
.layui-right-bar a:hover {
  background-color: var(--ycc-surface) !important;
  border-color: var(--ycc-accent) !important;
  color: var(--ycc-brand-800) !important;
}

/* 详情表信息列（原浅灰底 #fafafa） */
.p-page .info-td,
.info-td {
  width: 90px; text-align: right; padding: 5px 3px;
  background-color: var(--ycc-surface-3) !important;
  color: var(--ycc-muted) !important;
}

/* 外部链接（原 #0088FF） */
.p-page .website a,
.website a { color: var(--ycc-brand-600) !important; }

/* 兜底：仪表盘里任何残留的行内硬编码颜色，统一收编到令牌 */
.p-page .layui-shortcut-menu li cite,
.p-page .layui-short-menu li cite,
.p-page .layui-right-bar a cite,
.p-page .layui-matter-item li a p { color: var(--ycc-text-2) !important; }
/* 注意：快捷入口是「墨青底 + 白图标」，必须与浅底图标区分开，否则图标与底色同色看不见 */
.p-page .layui-shortcut-menu li .iconfont { color: #fff !important; }
.p-page .layui-short-menu li .iconfont,
.p-page .layui-right-bar a .iconfont { color: var(--ycc-brand-800) !important; }
.p-page .layui-matter-item li cite,
.p-page .layui-matter-item li cite.blue { color: var(--ycc-brand-800) !important; }
.p-page .layui-card-title,
.p-page .layui-card-title span { color: var(--ycc-text) !important; }
.p-page .layui-card-title a { color: var(--ycc-brand-600) !important; font-size: 12px; }

/* 时间线 */
.p-page .layui-card-body .layui-timeline-title,
.layui-card-body .layui-timeline-title { color: var(--ycc-text) !important; font-weight: 500; font-size: 14px; }
.layui-timeline-axis { color: var(--ycc-accent) !important; }

/* ---------------------------------------------------------------------------
   10. 按钮
   --------------------------------------------------------------------------- */
.layui-btn {
  background-color: var(--ycc-brand-800);
  color: #fff;
  border-radius: var(--ycc-radius-xs);
  border: none; font-weight: 500; letter-spacing: 0.5px;
  transition: background-color var(--ycc-dur-fast) var(--ycc-ease),
              box-shadow var(--ycc-dur-fast) var(--ycc-ease),
              transform var(--ycc-dur-fast) var(--ycc-ease);
}
.layui-btn:hover { background-color: var(--ycc-brand-700); color: #fff; box-shadow: var(--ycc-shadow-1); }
.layui-btn:active { transform: translateY(1px); }
.layui-btn i.layui-icon, .layui-btn .iconfont { color: currentColor; }

/* 各语义按钮：底色与文字色成对定义，保证对比度 */
.layui-btn-primary {
  background-color: var(--ycc-surface) !important;
  border: 1px solid var(--ycc-border-strong) !important;
  color: var(--ycc-text) !important;
}
.layui-btn-primary:hover {
  background-color: var(--ycc-surface-2) !important;
  border-color: var(--ycc-brand-800) !important;
  color: var(--ycc-brand-800) !important;
}
.layui-btn-normal { background-color: var(--ycc-brand-800) !important; color: #fff !important; }
.layui-btn-normal:hover { background-color: var(--ycc-brand-700) !important; color: #fff !important; }
.layui-btn-warm { background-color: var(--ycc-accent) !important; color: #241a06 !important; }
.layui-btn-warm:hover { background-color: var(--ycc-accent-bright) !important; color: #241a06 !important; }
.layui-btn-danger { background-color: #D9534F !important; color: #fff !important; }
.layui-btn-danger:hover { background-color: #C84A46 !important; color: #fff !important; }
.layui-btn-checked { background-color: var(--ycc-brand-600) !important; color: #fff !important; }

/* 禁用态：不得继承主色实底，否则灰字压深底看不清 */
.layui-btn-disabled,
.layui-btn-disabled:hover,
.layui-btn-disabled:active {
  background-color: var(--ycc-surface-3) !important;
  color: var(--ycc-muted) !important;
  border-color: var(--ycc-border) !important;
  box-shadow: none !important;
}
/* 「清空 / 重置」按钮：ycc.css 原为白底灰字，这里显式保留，避免被主色实底吞掉 */
.layui-btn-reset {
  background-color: var(--ycc-surface) !important;
  border: 1px solid var(--ycc-border-strong) !important;
  color: var(--ycc-text-2) !important;
}
.layui-btn-reset:hover {
  background-color: var(--ycc-surface-2) !important;
  border-color: var(--ycc-accent) !important;
  color: var(--ycc-brand-800) !important;
}
/* 弹窗按钮：确认=主色实底，取消=浅底描边 */
.layui-layer-btn .layui-layer-btn0 {
  background-color: var(--ycc-brand-800) !important;
  border-color: var(--ycc-brand-800) !important;
  color: #fff !important;
}
.layui-layer-btn .layui-layer-btn1 {
  background-color: var(--ycc-surface) !important;
  border: 1px solid var(--ycc-border-strong) !important;
  color: var(--ycc-text) !important;
}
.layui-layer-btn .layui-layer-btn1:hover { border-color: var(--ycc-brand-800) !important; color: var(--ycc-brand-800) !important; }

/* 蓝底工具类统一收编为主色 */
.layui-bg-blue, .layui-bg-cyan { background-color: var(--ycc-brand-800) !important; color: #fff !important; }
.layui-bg-orange, .layui-bg-red { background-color: var(--ycc-accent) !important; color: #241a06 !important; }
.layui-tags-all { background-color: var(--ycc-brand-800) !important; color: #fff !important; }

/* ---------------------------------------------------------------------------
   11. 表格
   --------------------------------------------------------------------------- */
.layui-layout-body .layui-table,
.ycc-layout .layui-table,
.layui-table { background: var(--ycc-surface); color: var(--ycc-text); }
.layui-table thead tr,
.layui-table-header,
.layui-table-tool { background: var(--ycc-surface-2) !important; }
.layui-table th { color: var(--ycc-text-2) !important; font-weight: 600; }
.layui-table[lay-even] tr:nth-child(even) { background-color: var(--ycc-surface-2); }
.layui-table tbody tr:hover,
.layui-table-hover { background-color: var(--ycc-accent-soft) !important; }
.layui-table td, .layui-table th { border-color: var(--ycc-border) !important; }
.layui-table-view .layui-table td, .layui-table-view .layui-table th { border-color: var(--ycc-border) !important; }
.layui-table-page { background: var(--ycc-surface) !important; border-color: var(--ycc-border) !important; }
.layui-laypage a, .layui-laypage span { border-color: var(--ycc-border) !important; }
.layui-laypage .layui-laypage-curr .layui-laypage-em { background-color: var(--ycc-brand-800) !important; }

/* ---------------------------------------------------------------------------
   12. 表单
   --------------------------------------------------------------------------- */
.layui-input, .layui-textarea, .layui-select {
  border: 1px solid var(--ycc-border-strong);
  border-radius: var(--ycc-radius-xs);
  color: var(--ycc-text);
  background: var(--ycc-surface);
  transition: border-color var(--ycc-dur-fast) var(--ycc-ease), box-shadow var(--ycc-dur-fast) var(--ycc-ease);
}
.layui-input:focus, .layui-textarea:focus {
  border-color: var(--ycc-brand-600) !important;
  box-shadow: 0 0 0 3px var(--ycc-accent-soft);
}
.layui-form-select .layui-edge { border-top-color: var(--ycc-muted); }
.layui-form-selected dl { border-color: var(--ycc-border-strong); box-shadow: var(--ycc-shadow-2); }
/* 兜底：下拉展开后强制置于最上层，避免被任何后续兄弟(表格等)遮挡 */
.layui-form-select dl { z-index: 9999 !important; }
.layui-form-checked[lay-skin="primary"] i { background-color: var(--ycc-brand-800); border-color: var(--ycc-brand-800); }
.layui-form-onswitch { background-color: var(--ycc-brand-600); border-color: var(--ycc-brand-600); }
.layui-this, .layui-form-checked { color: var(--ycc-brand-800); }
.layui-form-radio > i:hover, .layui-form-radioed > i { color: var(--ycc-brand-800); }
.layui-tab-brief > .layui-tab-title .layui-this { color: var(--ycc-brand-800); }
.layui-tab-brief > .layui-tab-more li.layui-this::after,
.layui-tab-brief > .layui-tab-title .layui-this::after { border-bottom-color: var(--ycc-accent) !important; }
.layui-nav .layui-nav-bar { background-color: var(--ycc-accent) !important; }

/* ---------------------------------------------------------------------------
   13. 登录页
   --------------------------------------------------------------------------- */
.ycc-login {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(14px, 2.4vh, 22px);
  padding: clamp(18px, 3.6vh, 32px) 24px;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  font-family: var(--ycc-font-sans);
  background: var(--ycc-login-bg);
  color: var(--ycc-text);
}
/* 背景铺满且固定，避免内容高度变化时露出空白 */
.ycc-login { background-attachment: fixed; }
/* 颗粒质感 */
.ycc-login::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.05; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ycc-login .ycc-login-card {
  position: relative; z-index: 1;
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: stretch;
  background: var(--ycc-surface);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--ycc-shadow-3);
}
/* 左：品牌侧栏 */
.ycc-login .ycc-login-aside {
  position: relative;
  padding: clamp(32px, 5.4vh, 48px) 44px;
  min-height: min(520px, 58vh);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 80% at 0% 0%, var(--ycc-accent-soft), transparent 55%),
    linear-gradient(160deg, var(--ycc-brand-800) 0%, var(--ycc-brand-900) 55%, var(--ycc-brand-600) 130%);
  overflow: hidden;
}
.ycc-login .ycc-login-aside::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%;
}
.ycc-login .ycc-login-aside::after {
  content: ""; position: absolute; right: -10px; bottom: -10px; width: 160px; height: 160px;
  border: 1px solid var(--ycc-accent-line); border-radius: 50%;
}
.ycc-login .ycc-brand-mark {
  position: relative; z-index: 1;
  font-family: var(--ycc-font-display);
  font-size: 40px; font-weight: 700; letter-spacing: 4px; line-height: 1.1;
}
.ycc-login .ycc-brand-mark small {
  display: block; font-family: var(--ycc-font-sans); font-size: 13px;
  letter-spacing: 6px; color: var(--ycc-accent-bright); margin-top: 10px; font-weight: 400;
}
.ycc-login .ycc-brand-foot { position: relative; z-index: 1; }
.ycc-login .ycc-brand-slogan {
  font-family: var(--ycc-font-display);
  font-size: 22px; line-height: 1.8; color: rgba(255, 255, 255, 0.92);
}
.ycc-login .ycc-brand-slogan b { color: var(--ycc-accent-bright); font-weight: 700; }
.ycc-login .ycc-brand-meta { margin-top: 18px; font-size: 12px; color: rgba(255, 255, 255, 0.46); letter-spacing: 1px; }
.ycc-login .ycc-brand-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ycc-login .ycc-brand-tags span {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

/* 右：表单 */
.ycc-login .ycc-login-form { padding: clamp(34px, 5.4vh, 52px) 46px; display: flex; flex-direction: column; justify-content: center; }
.ycc-login .ycc-form-logo { height: clamp(42px, 6vh, 54px); margin-bottom: clamp(16px, 2.8vh, 26px); display: flex; align-items: center; }
.ycc-login .ycc-form-logo img { height: 100%; width: auto; max-width: 300px; object-fit: contain; }
.ycc-login .ycc-form-title { font-size: 22px; font-weight: 600; color: var(--ycc-text); letter-spacing: 1px; }
.ycc-login .ycc-form-sub { margin-top: 6px; color: var(--ycc-muted); font-size: 13px; margin-bottom: clamp(16px, 3vh, 28px); }
.ycc-login .layui-form-item { margin-bottom: clamp(14px, 2.4vh, 20px); }
.ycc-login .layui-input { height: clamp(42px, 6vh, 46px); padding-left: 14px; font-size: 14px; border-radius: var(--ycc-radius-sm); }
.ycc-login .ycc-input-icon { position: relative; }
.ycc-login .ycc-input-icon > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ycc-muted); font-size: 16px;
}
.ycc-login .ycc-input-icon .layui-input { padding-left: 40px; }
.ycc-login #login-submit {
  height: 48px; font-size: 16px; letter-spacing: 4px; margin-top: 8px;
  background: linear-gradient(135deg, var(--ycc-accent) 0%, var(--ycc-brand-600) 140%);
  color: #fff;
  box-shadow: 0 10px 24px var(--ycc-accent-soft);
  border-radius: var(--ycc-radius-sm);
  transition: filter var(--ycc-dur) var(--ycc-ease), transform var(--ycc-dur) var(--ycc-ease), box-shadow var(--ycc-dur) var(--ycc-ease);
}
.ycc-login #login-submit:hover { filter: brightness(1.06); box-shadow: 0 14px 30px var(--ycc-accent-soft); }
.ycc-login #login-submit:active { transform: translateY(1px); }

/* 备案脚注：独立于卡片之外，居中、与背景对比可读 */
.ycc-login .ycc-login-foot {
  position: relative; z-index: 1;
  text-align: center; font-size: 12px; line-height: 1.9;
  color: var(--ycc-login-foot-fg);
}
.ycc-login .ycc-login-foot a { color: var(--ycc-login-foot-fg); text-decoration: none; margin-left: 6px; }
.ycc-login .ycc-login-foot a:hover { color: var(--ycc-accent-bright); }

/* ---------------------------------------------------------------------------
   14. 动效（错峰入场 + 降级）
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ycc-reveal { opacity: 0; transform: translateY(22px); }
  .ycc-reveal.in {
    opacity: 1; transform: none;
    transition: opacity var(--ycc-dur) var(--ycc-ease), transform var(--ycc-dur) var(--ycc-ease);
  }
  .ycc-reveal.in:nth-child(1) { transition-delay: 60ms; }
  .ycc-reveal.in:nth-child(2) { transition-delay: 140ms; }
  .ycc-reveal.in:nth-child(3) { transition-delay: 220ms; }
  .ycc-reveal.in:nth-child(4) { transition-delay: 300ms; }
  .ycc-reveal.in:nth-child(5) { transition-delay: 380ms; }

  .ycc-login .ycc-login-card { opacity: 0; transform: translateY(28px) scale(0.985); animation: yccCardIn var(--ycc-dur-slow) var(--ycc-ease) forwards; }
  @keyframes yccCardIn { to { opacity: 1; transform: none; } }
  .ycc-login .ycc-login-aside > *,
  .ycc-login .ycc-login-form > * { opacity: 0; animation: yccFadeUp var(--ycc-dur) var(--ycc-ease) forwards; }
  .ycc-login .ycc-login-aside > *:nth-child(1) { animation-delay: 220ms; }
  .ycc-login .ycc-login-aside > *:nth-child(2) { animation-delay: 320ms; }
  .ycc-login .ycc-login-form > *:nth-child(1) { animation-delay: 260ms; }
  .ycc-login .ycc-login-form > *:nth-child(2) { animation-delay: 320ms; }
  .ycc-login .ycc-login-form > *:nth-child(3) { animation-delay: 380ms; }
  .ycc-login .ycc-login-form > *:nth-child(4) { animation-delay: 440ms; }
  .ycc-login .ycc-login-form > *:nth-child(5) { animation-delay: 500ms; }
  @keyframes yccFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .ycc-reveal { opacity: 1 !important; transform: none !important; }
  .ycc-login .ycc-login-card,
  .ycc-login .ycc-login-aside > *,
  .ycc-login .ycc-login-form > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   15. 可访问性 / 滚动条 / 响应式
   --------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--ycc-accent); outline-offset: 2px; }
.layui-btn:focus-visible { outline: 2px solid var(--ycc-accent); outline-offset: 2px; }

.ycc-layout .layui-side::-webkit-scrollbar { width: 0; }
.layui-body::-webkit-scrollbar, .ycc-tab-page::-webkit-scrollbar { width: 8px; height: 8px; }
.layui-body::-webkit-scrollbar-thumb, .ycc-tab-page::-webkit-scrollbar-thumb {
  background: var(--ycc-border-strong); border-radius: 8px;
}

@media (max-width: 768px) {
  .ycc-login .ycc-login-card { grid-template-columns: 1fr; }
  .ycc-login .ycc-login-aside { display: none; }
  .ycc-login .ycc-login-form { padding: 40px 28px; }
}
/* 矮视口（笔记本 / 分屏）：压缩留白，消除纵向滚动 */
@media (max-height: 640px) {
  .ycc-login { justify-content: flex-start; gap: 12px; padding: 16px 20px; }
  .ycc-login .ycc-login-aside { min-height: 0; padding: 26px 34px; }
  .ycc-login .ycc-login-form { padding: 26px 34px; }
  .ycc-login .ycc-brand-mark { font-size: 30px; }
  .ycc-login .ycc-brand-slogan { font-size: 18px; line-height: 1.6; }
  .ycc-login .ycc-brand-tags { margin-top: 12px; }
}