@charset "UTF-8";

:root {
    /* Primary: Ant Design blue-6 */
    --main-color: var(--arco-blue-6);
    --main-light-color: rgba(22, 119, 255, 0.10);
    --main-medium-color: rgba(22, 119, 255, 0.16);
    --main-hover-color: var(--arco-blue-7);
    /* 主色「当文字用」的 hover 态。当前与 --main-hover-color 同值；
       单列一个令牌是为了让「主色当文字」与「实心按钮 hover 底色」能分别调整。 */
    --main-text-hover-color: var(--main-hover-color);

    /* 色板：全仓唯一色相来源，其它语义 token 一律引用这里。
       蓝色族沿用 Ant Design blue（与主色 #1677ff 同一梯级），
       其余色族沿用 Arco Design 命名。按用途分组：
         1-2   = 浅色底（light 家族按钮的 bg / border）
         3-5   = 主色浅阶（渐变起点等）
         6     = 实心填充（solid 按钮 bg / 强调色）
         7-9   = 文字级（浅底上的深色文字，数字越大对比度越高）
       只收录项目实际用得到的等级；每个色族保证有 6 级作为实心填充的锚点。
       其余等级**按需追加**，不要为了"凑齐 10 级"而提前声明。 */
    --arco-blue-1: #E6F4FF;
    --arco-blue-2: #BAE0FF;
    --arco-blue-3: #91CAFF;
    --arco-blue-4: #69B1FF;
    --arco-blue-5: #4096FF;
    --arco-blue-6: #1677FF;
    --arco-blue-7: #0958D9;
    --arco-red-1: #FFECE8;
    --arco-red-2: #FDCDC5;
    --arco-red-3: #FBACA3;
    --arco-red-4: #F98981;
    --arco-red-6: #F53F3F;
    --arco-red-7: #CB272D;
    --arco-red-8: #A1151E;
    --arco-green-1: #E8FFEA;
    --arco-green-2: #AFF0B5;
    --arco-green-3: #7BE188;
    --arco-green-4: #4CD263;
    --arco-green-6: #00B42A;
    --arco-green-7: #009A29;
    --arco-green-8: #008026;
    --arco-green-9: #006622;
    --arco-orange-1: #FFF7E8;
    --arco-orange-2: #FFE4BA;
    --arco-orange-3: #FFCF8B;
    --arco-orange-5: #FF9A2E;
    --arco-orange-6: #FF7D00;
    --arco-orange-7: #D25F00;
    --arco-orange-8: #A53D00;
    --arco-orange-9: #7A2400;
    --arco-cyan-1: #E8FFFB;
    --arco-cyan-2: #B7F4EC;
    --arco-cyan-3: #89E9E0;
    --arco-cyan-4: #5EDFD6;
    --arco-cyan-6: #14C9C9;
    --arco-cyan-7: #0DA5AA;
    --arco-cyan-8: #07828B;
    --arco-cyan-9: #03616C;

    /* Neutral scale: cool gray family（Ant / Element 同源的冷灰，取代旧 stone 暖灰）。
       层级顺序固定：heading > primary > secondary > muted > soft > disabled。
       文字档位保证白底对比度：primary 13.6:1 / secondary 7.0:1 / muted 4.6:1；
       soft 与 disabled 只用于占位符、分隔符、禁用态 —— 属"弱化但可辨"档。 */
    --color-white: #ffffff;
    /* 面板底色：与“彩底上的白字”语义分开。
       --color-white 在本项目里同时承担这两种用途（彩底白字约 20 处）。
       这里给出默认值，保证不加载 backend-base.css 的页面（如登录页）也能解析。 */
    --admin-surface: var(--color-white);
    --color-black: #1f2329;
    --color-text-primary: #1f2329;
    --color-text-secondary: #4e5969;
    --color-text-muted: #6b7280;
    --color-text-soft: #9ca3af;
    --color-text-disabled: #c0c4cc;
    --color-border-base: #dcdfe6;
    --color-border-soft: #e8ebf0;
    --color-border-panel: #e8ebf0;
    --color-bg-muted: #fafbfc;
    --color-bg-soft: #f4f6f8;
    --color-bg-panel: #f4f6f8;
    /* 页面底色：柔和浅灰白，与纯白卡片形成层级（不靠重边框区分）。 */
    --color-bg-page: #f5f7fa;
    --color-bg-tree: #f4f6f8;
    --color-bg-focus: var(--arco-blue-1);

    /* Semantic accents: 取 7/8 级以保住白底文字对比度（>= 4.5:1） */
    --color-success: #008026;
    --color-success-hover: var(--arco-green-9);
    --color-warning: #A53D00;
    --color-warning-hover: var(--arco-orange-9);
    --color-error: #CB272D;
    --color-error-hover: #A1151E;

    /* Sidebar dark theme tokens */
    --color-sidebar-fold-bg: #1f2329;
    --color-sidebar-fold-hover-bg: #4e5969;
    --color-sidebar-fold-text: #c0c4cc;
    --color-sidebar-dark-bg: #111827;
    --color-sidebar-comment-bg: #1f2329;
    --color-sidebar-more-bg: #4e5969;
    --color-sidebar-more-hover-bg: #6b7280;
    --color-sidebar-more-icon: #9ca3af;
    --color-sidebar-close-icon: var(--arco-blue-2);
    --color-sidebar-manage: #c0c4cc;
    --color-sidebar-title-text: #6b7280;
    --color-sidebar-split-border: #4e5969;

    /* Sidebar nav overrides (light sidebar navigation colors) */
    --sidebar-nav-text: #1f2329;
    --sidebar-nav-text-hover: var(--main-color);
    --sidebar-nav-icon: #6b7280;
    --sidebar-nav-bg-hover: #f4f6f8;
    --sidebar-nav-border-hover: rgba(22, 119, 255, 0.10);
    --sidebar-active-bg: var(--arco-blue-1);
    --sidebar-active-indicator: var(--main-color);
    --sidebar-active-shadow: rgba(22, 119, 255, 0.12);
    --sidebar-open-bg: #fafbfc;
    --sidebar-open-shadow: rgba(15, 23, 42, 0.03);
    --sidebar-submenu-text: #4e5969;
    --sidebar-submenu-text-hover: var(--main-color);
    --sidebar-submenu-bg-hover: #f4f6f8;
    --sidebar-submenu-active-bg: var(--arco-blue-1);
    --sidebar-submenu-active-shadow: rgba(22, 119, 255, 0.12);
    --sidebar-submenu-dot: #c0c4cc;
    --sidebar-submenu-dot-hover: var(--main-color);
    --sidebar-submenu-dot-active: var(--main-color);
    --sidebar-submenu-dot-ring: rgba(22, 119, 255, 0.10);
    --sidebar-submenu-border: #e8ebf0;
    /* 侧栏与内容区的分隔由 <aside> 自带的 1px border-r 承担（见 index_index.html），
       这里不再叠一层阴影 —— 两层会并成 2px 硬线。 */
    --sidebar-shell-shadow: none;
    --sidebar-head-glow: rgba(22, 119, 255, 0.10);
    --sidebar-footer-bg: rgba(250, 251, 252, 0.90);
    --shell-surface: #ffffff;
    --shell-surface-soft: rgba(255, 255, 255, 0.80);
    --shell-canvas: #f5f7fa;
    --shell-canvas-soft: #fafbfc;
    --shell-divider: #e8ebf0;
    --shell-card-border: rgba(232, 235, 240, 0.90);
    --shell-highlight: rgba(255, 255, 255, 0.86);
    --tabs-surface: #fafbfc;
    --topbar-surface: var(--shell-surface);
    --topbar-divider: var(--shell-divider);
    --sidebar-scrollbar-thumb: rgba(15, 23, 42, 0.14);
    --sidebar-scrollbar-thumb-hover: rgba(15, 23, 42, 0.24);
    --sidebar-scrollbar-color: rgba(15, 23, 42, 0.15);
    --sidebar-overlay-bg: rgba(15, 23, 42, 0.42);
    --sidebar-arrow-inactive: rgba(107, 114, 128, 0.60);
    --sidebar-arrow-active: var(--main-color);
    --sidebar-focus-ring: rgba(22, 119, 255, 0.30);

    --color-accent-info: var(--arco-cyan-8);
    --color-accent-info-hover: var(--arco-cyan-9);
    --color-accent-success: var(--arco-green-8);
    --color-accent-trigger: #4e5969;

    --color-text-heading: #111827;
    --color-text-subtle: #6b7280;
    --color-bg-subtitle: #f4f6f8;
    --color-bg-table-header: #f7f9fc;
    --color-bg-table-row-hover: #f0f6ff;
    --color-bg-table-row-active: rgba(22, 119, 255, 0.14);
    --color-bg-table-row-selected: rgba(22, 119, 255, 0.07);
    --color-bg-table-row-stripe: #fafbfd;
    --color-bg-table-footer: #fbfcfe;

    /* Form label width — shared between legacy .web forms and .builder-form-grid.
    Previously hardcoded as 15% in multiple places; now a single source of truth.
    纯 15% 在「半栏/两列」字段里会缩到 ~40px（减 12px 内边距），中文标签必换行，
    故加 120px 下限：宽表单仍按 15% 走，窄列不再把标签压成多行。 */
    --builder-form-label-width: max(15%, 120px);
    --color-bg-disabled: #f4f6f8;
    --color-border-accent-soft: #9ca3af;
    --color-border-accent-medium: #6b7280;

    /* 按钮 token；真正的按钮组件在 public/resource/css/base.css。
       只保留**有消费方**的项，避免留下没人读的"半个抽象层"：
         --btn-default*   → admin-pages.css 的 .collector-page 按钮底色/文字
         --btn-primary*   → backend-components.css / backend-base.css 的行内操作链接（.op-add/.op-edit）
         --btn-success*   → 同上（.op-restore）
         --btn-error*     → 同上（.op-delete）
       这几个链接消费方拿它当**文字色**，所以取各色族中「第一个满足白底 4.5:1」的等级
       （各族亮度不同，等级并不统一）：blue-6 / red-7 / green-8。
       没有消费方的变体色（info / warning 等）直接由 --arco-* 色板提供，不再另立 token。
       中性次级按钮统一为「白底 + 浅灰描边」，不再用灰底填充 —— 与 Ant / Element 一致。 */
    --btn-default: var(--admin-surface);
    --btn-default-hover: var(--color-bg-soft);
    --btn-default-text: var(--color-text-primary);
    --btn-primary: var(--arco-blue-6);
    --btn-primary-hover: var(--arco-blue-7);
    --btn-success: var(--arco-green-8);
    --btn-success-hover: var(--arco-green-9);
    --btn-error: var(--arco-red-7);
    --btn-error-hover: var(--arco-red-8);

    /* Typography: Geist for UI, JetBrains Mono for code */
    --font-family-base: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "Geist Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --admin-font-size-xs: 12px;
    --admin-font-size-notice: var(--admin-font-size-xs);
    --admin-font-size-sm: 14px;
    --admin-font-size-base: 16px;
    --admin-font-size-lg: 18px;
    --admin-font-size-xl: 20px;
    --admin-font-size-2xl: 24px;
    --admin-icon-size-base: 16px;
    --admin-icon-size-lg: 18px;
    --admin-icon-size-xl: 20px;
    --admin-icon-size-2xl: 30px;
    --admin-line-height-tight: 1.35;
    --admin-line-height-base: 1.55;

    /* Spacing and radius tokens —— 间距一律 8px 栅格（4 为半档）；
       圆角按用途分三档：卡片 8 / 控件与按钮 6 / 标签胶囊 4。 */
    --admin-space-1: 4px;
    --admin-space-2: 8px;
    --admin-space-3: 12px;
    --admin-space-4: 16px;
    --admin-space-5: 20px;
    --admin-space-6: 24px;
    /* 圆角刻度与 Tailwind 默认半径同步：rounded-xs/sm/md/lg/xl/2xl/3xl/full */
    --admin-radius-xs: 2px;
    --admin-radius-sm: 4px;
    --admin-radius-md: 6px;
    --admin-radius-lg: 8px;
    --admin-radius: var(--admin-radius-lg); /* 默认 = rounded-lg = 8px */
    --admin-radius-xl: 12px;
    --admin-radius-2xl: 16px;
    --admin-radius-3xl: 24px;
    --admin-radius-full: 9999px;
    /* 阴影梯队：只用于区分「卡片 / 弹层 / 悬浮」，全部为低透明度、短扩散的浅阴影。
       禁止再引入大 blur + 高 alpha 的投影（会立刻显出"厚重感"）。 */
    --admin-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
    --admin-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --admin-shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 14px rgba(15, 23, 42, 0.04);
    --admin-shadow-popover: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --admin-shadow-modal: 0 8px 32px rgba(15, 23, 42, 0.12);
    --admin-shadow-table: 0 1px 2px rgba(15, 23, 42, 0.03), 0 3px 10px rgba(15, 23, 42, 0.035);
    --admin-shadow-console: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 14px rgba(15, 23, 42, 0.04);
    --admin-shadow-focus-subtle: 0 0 0 3px rgba(22, 119, 255, 0.08);

    /* Unified component states */
    --admin-control-height: 36px;
    --admin-textarea-height: 80px;
    /* .ibw400 控制格最小宽度（原硬编码 360px） */
    --admin-form-control-min-width: 360px;
    --admin-legacy-control-height: 36px;
    --admin-control-padding-x: 9px;
    --admin-control-padding-y: 6px;
    --admin-form-control-bg: var(--color-white);
    --admin-form-control-text: var(--color-text-primary);
    --admin-form-control-border: var(--color-border-base);
    --admin-form-control-placeholder: var(--color-text-soft);
    --admin-form-label-color: var(--color-text-primary);
    --admin-form-notice-color: var(--color-text-muted);
    /* 标签页高度：壳层 tab 条（public_tabs.html/.tab-item）与页面内 .builder-tabs 是两套形态，
       高度各自独立命名，避免“改一个变量同时影响两处”的误改。
       52px = 40px 标签容器 + 上下各 6px 余量（与旧模板 h-13 的实际高度一致）。 */
    --admin-shell-tab-height: 34px;
    --admin-shell-tab-bar-height: 52px;
    --admin-builder-tab-height: 42px;
    /* 标签页共享视觉令牌：壳层 chip（.tab-item）与页面内 .builder-tabs
       形态不同、但字号/字重/激活色/交互色必须是同一组值，避免两套语言。 */
    --admin-tab-font-size: var(--admin-font-size-sm);
    --admin-tab-font-weight: 500;
    --admin-tab-font-weight-active: 600;
    --admin-tab-radius: var(--admin-radius-md);
    --admin-tab-text: var(--color-text-secondary);
    --admin-tab-text-hover: var(--main-color);
    --admin-tab-active-text: var(--main-color);
    --admin-tab-active-bg: var(--main-light-color);
    --admin-transition-fast: 150ms ease-out;
    --admin-transition-base: 200ms ease-out;
    --admin-focus-ring: 0 0 0 3px var(--main-light-color);
    --admin-focus-border: rgba(22, 119, 255, 0.55);
    /* 校验态聚焦环：从语义色推导，不写死 rgba，
       这样调整 --color-* 时环会自动同步。 */
    --admin-ring-success: 0 0 0 3px color-mix(in srgb, var(--color-success) 12%, transparent);
    --admin-ring-warning: 0 0 0 3px color-mix(in srgb, var(--color-warning) 12%, transparent);
    --admin-ring-error: 0 0 0 3px color-mix(in srgb, var(--color-error) 12%, transparent);

    /* z-index 层级令牌 */
    --admin-z-overlay: 900;
    --admin-z-header: 1000;
    --admin-z-sidebar: 1001;
    --admin-z-dropdown: 1100;
    --admin-z-popover: 1200;
    --admin-z-modal: 9999;
    --admin-z-context: 10000;

    font-size: 16px;

    /* Legacy layout/box aliases (moved out of backend-base.css so tokens have one source).
       Consumed by legacy pages, renderer and admin-pages/admin-ui. */
    --backend-button-height: 36px;
    --backend-action-button-min-width: 88px;
    --backend-small-action-button-min-width: 72px;
    --admin-page-bg: var(--color-bg-page);
    --admin-surface-muted: var(--color-bg-muted);
    --admin-surface-subtle: var(--color-bg-soft);
    --admin-border: var(--color-border-panel);
    --admin-border-strong: var(--color-border-base);
    --admin-text: var(--color-text-primary);
    --admin-text-strong: var(--color-text-heading);
    --admin-text-muted: var(--color-text-muted);
}

html,
body,
button,
input,
select,
textarea,
optgroup,
option {
    font-family: var(--font-family-base), sans-serif;
}

body code,
body pre,
body kbd,
body samp {
    font-family: var(--font-family-mono), monospace;
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Typography polish: balance headlines, tabular numbers, optical letter-spacing */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* Tabular figures for data-rich tables */
table {
    font-variant-numeric: tabular-nums;
}

/* Tighten letter-spacing on headings, open it on labels/small caps */
h1, h2 {
    letter-spacing: -0.021em;
}

h3, h4 {
    letter-spacing: -0.011em;
}

label, .label, .badge, .btn {
    letter-spacing: 0.005em;
}