/**
 * ui-theme.css — 全站统一设计系统（扁平化 Flat / 圆角 0）
 *
 * 引入方式（放在页面 <style> 之前，页面可随时覆盖）：
 *   <link rel="stylesheet" href="static/ui/ui-theme.css">
 *
 * 设计原则：
 *   1. 扁平化 —— 无渐变、无立体阴影；层级靠边框和背景色区分
 *   2. 圆角 0 —— 全局 --radius: 0，输入框/按钮/卡片/徽标全部直角；悬浮按钮 .ui-fab 保持圆形
 *   3. 颜色全部走令牌变量，禁止在组件里写死色值
 *
 * 变量即契约：ui-dialog / ui-number / ui-select / ui-switch / ui-date / ui-checkbox
 * 都消费本文件定义的变量名。页面自己的 :root 若在后面重定义同名变量即完成定制。
 * 兼容别名（--text-color/--border-color/--card-bg/--bg-color）让老命名同样生效。
 *
 * 组件类（全部 .ui- 前缀，新代码直接使用）：
 *   基础：.ui-btn(.ghost/.danger/.small)  .ui-input(.small)  .ui-textarea  .ui-label  .ui-form-group
 *   高度：--control-h（默认 34px，按钮/输入/下拉）  --control-h-sm（默认 28px，.small）
 *   展示：.ui-card  .ui-badge  .ui-tag  .ui-avatar  .ui-alert  .ui-empty  .ui-divider
 *   交互：.ui-tabs/.ui-tab-item  .ui-pagination  .ui-checkbox  .ui-radio  .ui-switch  .ui-range
 *   反馈：.ui-modal-mask/.ui-modal/...  .ui-toast  .ui-tooltip  .ui-spinner  .ui-skeleton
 *   布局：.ui-container  .ui-flex(-col/-between)  .ui-grid(-2/-3/-4)
 *   其他：.ui-table  .ui-list  .ui-accordion  .ui-breadcrumb
 */

/* ============ 配色令牌（light） ============ */
:root,
[data-theme="light"] {
    --ink: #1a1a1a;             /* 主文字 */
    --muted: #666666;           /* 次要文字 */
    --line: #c8c8c8;            /* 常规边框 */
    --line-strong: #a8a8a8;     /* 强边框（输入/按钮描边） */
    --bg: #e4e4e4;              /* 页面背景 */
    --surface: #ececec;         /* 卡片/面板背景 */
    --input-bg: #ececec;        /* 输入框背景 */
    --input-focus-bg: #e4e4e4;  /* 输入框聚焦背景 */
    --hover-bg: #dcdcdc;        /* 悬停背景 */
    --accent: #505860;          /* 主题强调色 / 链接 */
    --accent-hover: #3e444c;
    --accent-soft: rgba(96, 104, 112, 0.14);
    --btn-primary-bg: #606870;  /* 主按钮 */
    --btn-primary-fg: #ececec;
    --btn-primary-hover: #505860;
    --warn: #8b5050;            /* 危险/错误 */
    --ok: #5a6a62;              /* 成功 */
    --success: #5a6a62;
    --caution: #8a7058;         /* 警告/提示 */
    --info: #666666;            /* 信息/中性 */
    --modal-overlay: rgba(0, 0, 0, 0.4);
    --radius: 0;                /* 扁平化：全局直角 */
    --control-h: 34px;          /* 默认控件高度：按钮、输入、下拉 */
    --control-h-sm: 28px;       /* 小控件高度：.small */
    --shadow: none;             /* 扁平化：卡片/按钮无阴影 */
    --shadow-pop: 0 2px 10px rgba(0, 0, 0, 0.14); /* 仅弹窗/浮层用 */
    --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --scrollbar-track: rgba(0, 0, 0, 0.04);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
    --scrollbar-thumb-active: rgba(0, 0, 0, 0.4);
    /* 兼容别名：老命名 → 规范令牌 */
    --text-color: var(--ink);
    --border-color: var(--line);
    --card-bg: var(--surface);
    --bg-color: var(--bg);
    --text-muted: var(--muted);
    --primary-color: var(--accent);
    --primary-contrast: var(--btn-primary-fg);
    --primary-muted: var(--accent-soft);
    --btn-primary-color: var(--btn-primary-fg);
    --btn-primary-border: var(--line);
    --secondary-color: #606870;
    --success-color: var(--ok);
    --danger-color: var(--warn);
    --warning-color: var(--caution);
    --info-color: var(--info);
    --bg-grad-start: #d8dce2;
    --bg-grad-end: #dcdcdc;
    --stripe: rgba(96, 104, 112, 0.035);
    --ghost-hover-border: #a8a8a8;
    --warn-soft: rgba(139, 80, 80, 0.12);
    --ok-soft: rgba(90, 106, 98, 0.12);
    --mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
    --transition: background-color .15s, color .15s, border-color .15s;

    --expiring: #9a7040;
    --expiring-soft: rgba(154,112,64,.14);
    --info-soft: rgba(80,96,112,.12);
    --table-head: #e0e0e0;
    --row-hover: #e6e6e6;
    --surface-elevated: #f2f2f2;
}

/* ============ 配色令牌（dark） ============ */
[data-theme="dark"] {
    --ink: #d0d0d0;
    --muted: #999999;
    --line: #555555;
    --line-strong: #707070;
    --bg: #2e2e2e;
    --surface: #383838;
    --input-bg: #343434;
    --input-focus-bg: #343434;
    --hover-bg: #404040;
    --accent: #c8c8c8;
    --accent-hover: #d8d8d8;
    --accent-soft: rgba(160, 168, 176, 0.14);
    --btn-primary-bg: #606870;
    --btn-primary-fg: #ececec;
    --btn-primary-hover: #505860;
    --warn: #c07070;
    --ok: #5a6a62;
    --success: #5a6a62;
    --caution: #b09273;
    --info: #999999;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --shadow: none;
    --shadow-pop: 0 2px 10px rgba(0, 0, 0, 0.3);
    --scrollbar-track: rgba(255, 255, 255, 0.04);
    --scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
    --scrollbar-thumb-active: rgba(255, 255, 255, 0.35);
    --text-color: var(--ink);
    --border-color: var(--line);
    --card-bg: var(--surface);
    --bg-color: var(--bg);
    --text-muted: var(--muted);
    --primary-color: var(--accent);
    --primary-contrast: var(--btn-primary-fg);
    --primary-muted: var(--accent-soft);
    --btn-primary-color: var(--btn-primary-fg);
    --btn-primary-border: var(--line);
    --secondary-color: #606870;
    --success-color: var(--ok);
    --danger-color: var(--warn);
    --warning-color: var(--caution);
    --info-color: var(--info);
    --bg-grad-start: #252525;
    --bg-grad-end: #333333;
    --stripe: rgba(160, 168, 176, 0.04);
    --ghost-hover-border: #707070;
    --warn-soft: rgba(192, 112, 112, 0.16);
    --ok-soft: rgba(122, 154, 136, 0.14);
    --mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
    --transition: background-color .15s, color .15s, border-color .15s;

    --expiring: #c4a06a;
    --expiring-soft: rgba(196,160,106,.16);
    --info-soft: rgba(140,160,180,.14);
    --table-head: #2a2a2a;
    --row-hover: #2c2c2c;
    --surface-elevated: #2a2a2a;
}

/* ============ 基底 ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}
img, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ============ 通用组件（.ui-* 前缀，新代码优先） ============ */

/* 按钮 */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: var(--control-h);
    padding: 0 .95rem;
    border-radius: var(--radius);
    border: 1px solid var(--btn-primary-bg);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.ui-btn:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.ui-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-btn.ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink);
}
.ui-btn.ghost:hover { background: var(--hover-bg); border-color: var(--accent); }
.ui-btn.ghost.danger { background: transparent; color: var(--warn); border-color: var(--line-strong); }
.ui-btn.ghost.danger:hover { background: var(--warn-soft, rgba(139,80,80,.12)); border-color: var(--warn); color: var(--warn); }
.ui-btn.danger { background: var(--warn); border-color: var(--warn); color: #f5f5f5; }
.ui-btn.danger:hover { filter: brightness(1.08); }
.ui-btn.ok { background: var(--ok); border-color: var(--ok); color: #f5f5f5; }
.ui-btn.ok:hover { filter: brightness(1.08); }
.ui-btn.caution { background: var(--caution); border-color: var(--caution); color: #f5f5f5; }
.ui-btn.caution:hover { filter: brightness(1.08); }
.ui-btn.small { height: var(--control-h-sm); padding: 0 .6rem; font-size: .8rem; }

/* 图标按钮 */
.ui-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ui-icon-btn.small { width: var(--control-h-sm); height: var(--control-h-sm); }
.ui-icon-btn:hover { background: var(--hover-bg); color: var(--ink); }
.ui-icon-btn.danger { color: var(--warn); }
.ui-icon-btn.danger:hover { background: var(--hover-bg); color: var(--warn); }

/* 文字按钮 */
.ui-text-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--accent);
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ui-text-btn:hover { background: var(--hover-bg); }
.ui-text-btn.danger { color: var(--warn); }

/* 输入 */
.ui-input, .ui-textarea {
    display: block;
    width: 100%;
    min-height: var(--control-h);
    padding: .5rem .7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--input-bg);
    color: var(--ink);
    outline: none;
    transition: border-color .15s, background .15s;
}
.ui-textarea { resize: vertical; }
/* 单行输入固定高度，与 .ui-select-trigger / .ui-date 触发器同高（--control-h, border-box） */
.ui-input {
    height: var(--control-h);
    min-height: var(--control-h);
    padding: 0 .7rem;
    line-height: 1;
}
.ui-input.small {
    height: var(--control-h-sm);
    min-height: var(--control-h-sm);
    padding: 0 .55rem;
    font-size: .8rem;
}
.ui-input:focus, .ui-textarea:focus {
    border-color: var(--accent);
    background: var(--input-focus-bg);
}
select.ui-input { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .5rem center; background-size: 16px 12px; padding-right: 2rem; cursor: pointer; }

/* 搜索框（图标 + 输入） */
.ui-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 140px; }
.ui-search > i { position: absolute; left: .7rem; color: var(--muted); font-size: .82rem; pointer-events: none; }
.ui-search > .ui-input { flex: 1; padding-left: 2rem; }

/* ============ 下拉菜单 ============ */
.ui-dropdown { position: relative; display: inline-block; }
.ui-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: var(--control-h);
    padding: 0 .95rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ui-dropdown-toggle.small { height: var(--control-h-sm); padding: 0 .6rem; font-size: .8rem; }
.ui-dropdown-toggle.icon.small { width: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0; }
.ui-dropdown-toggle:hover { background: var(--hover-bg); }
.ui-dropdown-toggle i { font-size: .9em; transition: transform .2s; }
.ui-dropdown-toggle.open i { transform: rotate(180deg); }
.ui-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, visibility .15s;
}
.ui-dropdown-menu.open { opacity: 1; visibility: visible; }
.ui-dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .9rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ui-dropdown-item:hover { background: var(--accent-soft); color: var(--accent); }
.ui-dropdown-item.danger { color: var(--warn); }
.ui-dropdown-item.danger:hover { background: rgba(139,80,80,.12); color: var(--warn); }
.ui-dropdown-divider { height: 1px; background: var(--line); margin: .25rem 0; }

/* icon-only toggle (ellipsis / avatar menus) */
.ui-dropdown-toggle.icon {
    width: var(--control-h);
    min-width: var(--control-h);
    padding: 0;
    justify-content: center;
    color: var(--muted);
    border-color: transparent;
    background: var(--surface);
}
.ui-dropdown-toggle.icon:hover,
.ui-dropdown-toggle.icon.open {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--accent-soft);
}
.ui-dropdown-toggle.icon.open i,
.ui-dropdown-toggle.icon i {
    transform: none;
}
.ui-dropdown-menu {
    padding: .35rem 0;
    border: 1px solid var(--line);
    margin-top: 6px;
}
.ui-dropdown-item.is-on i,
.ui-dropdown-item.active {
    color: var(--accent);
}
.ui-dropdown-item.active {
    background: var(--accent-soft);
}
.ui-dropdown-item i {
    width: 1em;
    text-align: center;
    opacity: .85;
}
.ui-dropdown-item.is-on i { opacity: 1; }


/* ============ 悬浮按钮 FAB ============ */
.ui-fab-wrap {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}
.ui-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--btn-primary-bg);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ui-fab:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.ui-fab:disabled { opacity: .55; cursor: not-allowed; }
.ui-fab.danger { background: var(--warn); border-color: var(--warn); }
.ui-fab.is-fixed {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 60;
}

/* ============ 进度条 ============ */
.ui-progress {
    height: 4px;
    background: var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.ui-progress-bar {
    height: 100%;
    background: var(--accent);
    transition: width .3s;
}

/* ============ Toast 增强（图标/标题/关闭/进度） ============ */
.ui-toast { position: relative; display: flex; align-items: flex-start; gap: .6rem; }
.ui-toast-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.ui-toast-body { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.ui-toast-title { font-weight: 600; font-size: .95rem; color: var(--ink); }
.ui-toast-msg { font-size: .88rem; color: var(--muted); line-height: 1.4; }
.ui-toast-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    font-size: .9rem;
    flex-shrink: 0;
    margin-top: 2px;
    transition: color .15s;
}
.ui-toast-close:hover { color: var(--ink); }
.ui-toast.ok { border-left: 3px solid var(--ok); }
.ui-toast.ok .ui-toast-icon { color: var(--ok); }
.ui-toast.error { border-left: 3px solid var(--warn); }
.ui-toast.error .ui-toast-icon { color: var(--warn); }
.ui-toast.warning { border-left: 3px solid var(--caution); }
.ui-toast.warning .ui-toast-icon { color: var(--caution); }
.ui-toast.info { border-left: 3px solid var(--info); }
.ui-toast.info .ui-toast-icon { color: var(--info); }
.ui-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: .3;
    animation: ui-toast-bar 3s linear forwards;
}
@keyframes ui-toast-bar { from { width: 100%; } to { width: 0%; } }

/* 卡片 */
.ui-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.ui-card-head, .ui-card-foot {
    padding: .7rem 1rem;
    font-weight: 700;
}
.ui-card-head { border-bottom: 1px solid var(--line); }
.ui-card-foot { border-top: 1px solid var(--line); font-weight: 400; color: var(--muted); }
.ui-card-body { padding: 1rem; }

/* 徽标 */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .5rem;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.ui-badge.danger { background: rgba(139, 80, 80, .14); color: var(--warn); }
[data-theme="dark"] .ui-badge.danger { background: rgba(192, 112, 112, .18); }
.ui-badge.ok { background: rgba(90, 106, 98, .14); color: var(--ok); }
.ui-badge.primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border: 1px solid var(--line); }
.ui-badge.neutral { background: var(--accent-soft); color: var(--muted); }
.ui-badge + .ui-badge { margin-left: .35rem; }
.ui-badge.pin { color: var(--caution); background: var(--expiring-soft); }
.ui-badge.lock { color: var(--warn); background: var(--warn-soft); }
.ui-badge.ess,
.ui-badge.rec { color: var(--ok); background: var(--ok-soft); }
.ui-badge.draft { color: var(--warn); background: var(--warn-soft); }
.ui-badge.op,
.ui-badge.cat { color: var(--accent); background: var(--accent-soft); }

/* 弹窗（新代码用；命令式弹窗请直接用 static/ui/ui-dialog.js） */
.ui-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: var(--modal-overlay);
}
.ui-modal {
    position: relative;
    width: min(92vw, 480px);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}
.ui-modal-head { padding: .9rem 1.1rem .4rem; font-size: 1.02rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ui-modal-head > .ui-icon-btn[title="关闭"] { margin-left: auto; flex-shrink: 0; }
.ui-modal > .ui-modal-x {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
}
.ui-modal-body { padding: .4rem 1.1rem; overflow: auto; color: var(--ink); }
.ui-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .7rem 1.1rem .9rem;
    border-top: 1px solid var(--line);
}
.ui-modal.lg { width: min(92vw, 800px); }
.ui-modal.sm { width: min(92vw, 400px); }
.ui-modal.wide { width: min(92vw, 560px); }
.ui-modal.large { width: min(94vw, 1024px); }
.ui-modal.xlarge { width: min(96vw, 960px); }
.ui-modal-desc { font-size: .8rem; color: var(--muted); margin: 0 0 .85rem; line-height: 1.45; }
form.ui-modal { margin: 0; }
.ui-modal-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
/* novel 等页用 .active 控制遮罩显隐 */
.ui-modal-mask:not(.active)[data-ui-active-toggle],
.ui-modal-mask.ui-active-toggle:not(.active) { opacity: 0; pointer-events: none; }
.ui-modal-mask.ui-active-toggle { display: flex; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ui-modal-mask.ui-active-toggle.active { opacity: 1; pointer-events: all; }

.ui-modal > form { display: contents; }


/* 表格 */
.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.ui-table th, .ui-table td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}
.ui-table th { color: var(--muted); font-weight: 600; }
.ui-table tbody tr:hover { background: var(--hover-bg); }

/* ============ 布局工具 ============ */
.ui-container { width: min(1100px, 94vw); margin-inline: auto; }
.ui-flex { display: flex; align-items: center; gap: .6rem; }
.ui-flex-col { display: flex; flex-direction: column; gap: .6rem; }
.ui-flex-between { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ui-grid { display: grid; gap: 1rem; }
.ui-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ui-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ui-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
    .ui-grid-2, .ui-grid-3, .ui-grid-4 { grid-template-columns: 1fr; }
}

/* ============ 排版 ============ */
.ui-title { margin: 0; font-weight: 700; line-height: 1.3; }
.ui-title-xl { font-size: 1.5rem; }
.ui-title-lg { font-size: 1.25rem; }
.ui-title-md { font-size: 1.05rem; }
.ui-text-muted { color: var(--muted); }
.ui-text-warn { color: var(--warn); }
.ui-text-ok  { color: var(--ok); }
.ui-text-accent { color: var(--accent); }
.ui-text-center { text-align: center; }
.ui-text-right { text-align: right; }
.ui-text-small { font-size: .8rem; }
.ui-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.ui-link:hover { text-decoration: underline; }

/* ============ 标签页 ============ */
.ui-tabs { display: flex; gap: .1rem; border-bottom: 1px solid var(--line); }
.ui-tab-item {
    padding: .5rem .9rem;
    font-size: .9rem;
    color: var(--muted);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.ui-tab-item:hover { color: var(--ink); }
.ui-tab-item.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ============ 面包屑 ============ */
.ui-breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); }
.ui-breadcrumb > *:not(:last-child)::after { content: '›'; margin-left: .4rem; color: var(--line-strong); }

/* ============ 分页 ============ */
.ui-pagination { display: inline-flex; align-items: center; gap: .25rem; }
.ui-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 .5rem;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); font-size: .85rem; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ui-page-btn:hover { border-color: var(--accent); background: var(--hover-bg); }
.ui-page-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ui-page-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ============ 表单辅助 ============ */
.ui-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; color: var(--ink); }
.ui-form-group { margin-bottom: 1rem; }
.ui-form-group--stretch { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
.ui-form-group--stretch > .ui-label { flex-shrink: 0; }
.ui-form-hint { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.ui-form-error { font-size: .8rem; color: var(--warn); margin-top: .25rem; }

/* ============ 复选框 / 单选（纯 CSS） ============ */
.ui-checkbox, .ui-radio {
    position: relative;
    display: inline-flex; align-items: center; gap: .4rem;
    cursor: pointer; font-size: .9rem; user-select: none;
}
.ui-checkbox input, .ui-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-checkbox .box, .ui-radio .dot {
    width: 18px; height: 18px;
    border: 1px solid var(--line-strong); background: var(--input-bg);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.ui-checkbox .box { border-radius: var(--radius); }
.ui-radio .dot  { border-radius: 50%; }
.ui-checkbox input:checked + .box, .ui-radio input:checked + .dot {
    border-color: var(--btn-primary-bg); background: var(--btn-primary-bg);
}
.ui-checkbox input:checked + .box::after {
    content: ''; width: 6px; height: 10px;
    border: solid var(--btn-primary-fg); border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}
.ui-radio input:checked + .dot::after {
    content: ''; width: 8px; height: 8px; background: var(--btn-primary-fg); border-radius: 50%;
}
.ui-checkbox input:focus + .box, .ui-radio input:focus + .dot { outline: 2px solid var(--accent-soft); }

/* ============ 开关（纯 CSS） ============ */
.ui-switch {
    display: inline-flex; align-items: center; gap: .5rem;
    cursor: pointer; font-size: .9rem; user-select: none;
}
.ui-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-switch .track {
    width: 38px; height: 20px; background: var(--line-strong); border-radius: var(--radius);
    position: relative; transition: background .2s;
}
.ui-switch .track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #fff; border-radius: 50%;
    transition: transform .2s;
}
.ui-switch input:checked + .track { background: var(--btn-primary-bg); }
.ui-switch input:checked + .track::after { transform: translateX(18px); }
.ui-switch input:focus + .track { outline: 2px solid var(--accent-soft); }

/* ============ 滑块 ============ */
.ui-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--line); border-radius: 0; outline: none; }
.ui-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--accent); border-radius: 0; cursor: pointer; border: none; }
.ui-range::-moz-range-thumb { width: 16px; height: 16px; background: var(--accent); border-radius: 0; cursor: pointer; border: none; }

/* ============ 提示条 ============ */
.ui-alert {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem .9rem; border: 1px solid var(--line);
    background: var(--surface); font-size: .88rem;
}
.ui-alert.info { border-left: 3px solid var(--accent); }
.ui-alert.warn { border-left: 3px solid var(--warn); background: rgba(139,80,80,.06); }
.ui-alert.ok   { border-left: 3px solid var(--ok);   background: rgba(90,106,98,.06); }
[data-theme="dark"] .ui-alert.warn { background: rgba(192,112,112,.08); }
[data-theme="dark"] .ui-alert.ok   { background: rgba(90,106,98,.08); }

/* ============ 轻提示 Toast ============ */
.ui-toast-wrap {
    position: fixed; inset: auto 1.25rem 1.25rem auto; z-index: 300;
    display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
.ui-toast {
    pointer-events: auto; min-width: 200px; max-width: 420px;
    padding: .7rem 1rem; border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); font-size: .88rem; box-shadow: var(--shadow-pop);
    animation: ui-toast-in .25s ease;
}
.ui-toast.leave { animation: ui-toast-out .2s ease forwards; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } }

/* ============ Tooltip ============ */
.ui-tooltip {
    position: relative; display: inline-block;
}
.ui-tooltip::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: 100%;
    transform: translateX(-50%) translateY(-6px);
    padding: .35rem .6rem; white-space: nowrap;
    background: var(--ink); color: var(--bg); font-size: .75rem;
    opacity: 0; pointer-events: none; transition: opacity .15s;
}
.ui-tooltip:hover::after { opacity: 1; }

/* ============ 加载 / 骨架屏 ============ */
.ui-spinner {
    display: inline-block; width: 20px; height: 20px;
    border: 2px solid var(--line); border-top-color: var(--accent);
    border-radius: 50%; animation: ui-spin 1s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-skeleton {
    background: linear-gradient(90deg, var(--line) 25%, var(--hover-bg) 50%, var(--line) 75%);
    background-size: 200% 100%; animation: ui-skel 1.4s ease infinite;
}
@keyframes ui-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============ 空状态 ============ */
.ui-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .6rem; padding: 2.5rem 1rem; color: var(--muted); text-align: center;
}
.ui-empty .icon { font-size: 2.5rem; opacity: .35; }

/* ============ 分割线 ============ */
.ui-divider {
    display: flex; align-items: center; gap: .7rem;
    color: var(--muted); font-size: .8rem;
}
.ui-divider::before, .ui-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ============ 标签 Tag ============ */
.ui-tag {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .5rem; border: 1px solid var(--line);
    background: var(--surface); color: var(--muted); font-size: .78rem;
    white-space: nowrap;
}
.ui-tag.primary { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.ui-tag.warn    { background: rgba(139,80,80,.1); color: var(--warn); border-color: rgba(139,80,80,.2); }
.ui-tag.ok      { background: rgba(90,106,98,.1); color: var(--ok);   border-color: rgba(90,106,98,.2); }

/* ============ 头像 ============ */
.ui-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-size: .85rem; font-weight: 600; overflow: hidden;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }
.ui-avatar.sm { width: 24px; height: 24px; font-size: .7rem; }

/* ============ 手风琴 ============ */
.ui-accordion { border: 1px solid var(--line); }
.ui-accordion-item + .ui-accordion-item { border-top: 1px solid var(--line); }
.ui-accordion-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem .9rem; cursor: pointer; font-weight: 600; font-size: .9rem;
    background: var(--surface); transition: background .15s;
}
.ui-accordion-header:hover { background: var(--hover-bg); }
.ui-accordion-body { padding: .6rem .9rem; font-size: .88rem; color: var(--ink); }

/* ============ 列表 ============ */
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-list > li {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; border-bottom: 1px solid var(--line);
    font-size: .88rem;
}
.ui-list > li:last-child { border-bottom: none; }
.ui-list > li:hover { background: var(--hover-bg); }


/* ============================================================
 * 组件样式（原内置于各 ui-*.js，统一提取于此；页面需同时引入本文件）
 * 注意：这些规则刻意放在文件末尾，组件版结构样式优先于上方纯 CSS 演示版
 * ============================================================ */

/* ---------- Checkbox（ui-checkbox.js） ---------- */
:root, [data-theme="light"] {
    --ui-checkbox-off:#a8a8a8;--ui-checkbox-on:#505860;--ui-checkbox-soft:rgba(80,88,96,.12);--ui-checkbox-ink:#1a1a1a;
}
[data-theme="dark"] {
    --ui-checkbox-off:#707070;--ui-checkbox-on:#a8b0b8;--ui-checkbox-soft:rgba(168,176,184,.14);--ui-checkbox-ink:#d0d0d0;
}
.ui-checkbox-row{
    display:inline-flex!important;align-items:flex-start;gap:.55rem;cursor:pointer;user-select:none;
    margin-top:.35rem;margin-bottom:0;font:inherit;color:inherit;vertical-align:middle;
    --_off:var(--line-strong, var(--border-color, var(--ui-checkbox-off)));
    --_on:var(--accent, var(--primary-color, var(--ui-checkbox-on)));
    --_soft:var(--accent-soft, var(--primary-muted, var(--ui-checkbox-soft)));
    --_ink:var(--ink, var(--text-color, var(--ui-checkbox-ink)));
}
.ui-checkbox-row.flush{margin-top:0}
.ui-checkbox-row.is-disabled{opacity:.55;cursor:not-allowed}
.ui-checkbox-row > .ui-checkbox{
    position:relative;display:inline-block;flex-shrink:0;margin-top:.08rem;
    --ui-checkbox-size:18px;
    width:var(--ui-checkbox-size);height:var(--ui-checkbox-size);
}
.ui-checkbox-row > .ui-checkbox input{
    opacity:0;margin:0;padding:0;border:0;position:absolute;inset:0;width:100%!important;height:100%!important;
    max-width:none;min-width:0;min-height:0;box-sizing:border-box;
    cursor:pointer;pointer-events:none;z-index:2;
}
.ui-checkbox-box{
    position:absolute;inset:0;border:1.5px solid var(--_off);border-radius:var(--radius);
    background:var(--input-bg, var(--surface, #fff));transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
    z-index:1;
}
.ui-checkbox-box::after{
    content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0;
    transition:transform .15s ease,opacity .15s ease;transform-origin:center;
}
.ui-checkbox-row.is-on .ui-checkbox-box{background:var(--_on);border-color:var(--_on)}
.ui-checkbox-row.is-on .ui-checkbox-box::after{opacity:1;transform:rotate(45deg) scale(1)}
.ui-checkbox-row:focus-within .ui-checkbox-box{box-shadow:0 0 0 3px var(--_soft)}
.ui-checkbox-text{font-size:.875rem;font-weight:600;color:var(--_ink);line-height:1.45}
.ui-checkbox-row:not(.is-on) .ui-checkbox-text{color:var(--muted, var(--text-secondary, var(--_ink)))}
.form-group .ui-checkbox input{
    position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;
    padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
    min-height:0;cursor:pointer;pointer-events:none!important;z-index:2;
}
.form-group .ui-checkbox-row{margin-top:0}
.field .ui-checkbox input{
    position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;
    padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
    min-height:0;cursor:pointer;pointer-events:none!important;z-index:2;
}
.field .ui-checkbox-row{align-self:flex-start}
.ui-checkbox-field{display:flex;align-items:center;gap:.65rem;padding:0 .15rem;min-height:var(--control-h,auto)}
.ui-checkbox-field .ui-checkbox{margin-top:0}
.ui-checkbox-field-hint{font-size:.72rem;color:var(--muted,var(--text-secondary,#606870));line-height:1.3;user-select:none}

/* ---------- Switch（ui-switch.js） ---------- */
:root, [data-theme="light"] {
    --ui-switch-off:#a8a8a8;--ui-switch-on:#505860;--ui-switch-soft:rgba(80,88,96,.12);--ui-switch-ink:#1a1a1a;
}
[data-theme="dark"] {
    --ui-switch-off:#707070;--ui-switch-on:#a8b0b8;--ui-switch-soft:rgba(168,176,184,.14);--ui-switch-ink:#d0d0d0;
}
.ui-switch-row{
    display:inline-flex!important;align-items:center;gap:.55rem;cursor:pointer;user-select:none;
    margin-top:.35rem;margin-bottom:0;font:inherit;color:inherit;vertical-align:middle;
    --_off:var(--line-strong, var(--border-color, var(--ui-switch-off)));
    --_on:var(--accent, var(--primary-color, var(--ui-switch-on)));
    --_soft:var(--accent-soft, var(--primary-muted, var(--ui-switch-soft)));
    --_ink:var(--ink, var(--text-color, var(--ui-switch-ink)));
}
.ui-switch-row.flush{margin-top:0}
.ui-switch-row.is-disabled{opacity:.55;cursor:not-allowed}
.ui-switch{
    position:relative;display:inline-block;flex-shrink:0;
    --ui-switch-w:40px;--ui-switch-h:22px;--ui-switch-pad:2px;--ui-switch-thumb:18px;
    width:var(--ui-switch-w);height:var(--ui-switch-h);
}
.ui-switch input{
    opacity:0;margin:0;padding:0;border:0;position:absolute;inset:0;width:100%!important;height:100%!important;
    max-width:none;min-width:0;min-height:0;box-sizing:border-box;
    cursor:pointer;pointer-events:none;z-index:2;
}
.ui-switch-slider{
    position:absolute;inset:0;background:var(--_off);border-radius:var(--radius);
    transition:background .18s ease,box-shadow .18s ease;z-index:1;
}
.ui-switch-slider::before{
    content:'';position:absolute;width:var(--ui-switch-thumb);height:var(--ui-switch-thumb);
    left:var(--ui-switch-pad);top:var(--ui-switch-pad);background:#fff;border-radius:var(--radius);
    transition:transform .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.16);
}
.ui-switch-row.is-on .ui-switch-slider{background:var(--_on)}
.ui-switch-row.is-on .ui-switch-slider::before{
    transform:translateX(calc(var(--ui-switch-w) - var(--ui-switch-thumb) - var(--ui-switch-pad) * 2));
}
.ui-switch-row:focus-within .ui-switch-slider{box-shadow:0 0 0 3px var(--_soft)}
.ui-switch-text{font-size:.88rem;color:var(--_ink);line-height:1.2}
.form-group .ui-switch input{
    position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;
    padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
    min-height:0;cursor:pointer;pointer-events:none!important;z-index:2;
}
.form-group .ui-switch-row{margin-top:0}
.field .ui-switch input{
    position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;
    padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
    min-height:0;cursor:pointer;pointer-events:none!important;z-index:2;
}
.field .ui-switch-row{align-self:flex-start}
.ui-switch-field{display:flex;align-items:center;gap:.65rem;padding:0 .15rem;min-height:var(--control-h,auto)}
.ui-switch-field-hint{font-size:.72rem;color:var(--muted,var(--text-secondary,#606870));line-height:1.3;user-select:none}
.ui-switch-field-label{font-size:.86rem;color:var(--muted,var(--text-secondary));user-select:none;line-height:1.2}
.ui-switch-inline{display:inline-flex;align-items:center;gap:10px;user-select:none}
.ui-switch-inline-text{font-size:.88rem;color:var(--text-secondary,var(--muted))}

/* ---------- Number（ui-number.js） ---------- */
:root, [data-theme="light"] {
    --ui-number-ink:#1a1a1a;--ui-number-muted:#606870;--ui-number-line:#c8c8c8;--ui-number-accent:#505860;--ui-number-accent-soft:rgba(80,88,96,.12);
}
[data-theme="dark"] {
    --ui-number-ink:#d0d0d0;--ui-number-muted:#8a9098;--ui-number-line:#555;--ui-number-accent:#a8b0b8;--ui-number-accent-soft:rgba(168,176,184,.14);
}
.ui-number{
    display:flex;align-items:stretch;width:100%;max-width:100%;
    --_ink:var(--ink,var(--text-color,var(--ui-number-ink)));
    --_muted:var(--muted,var(--text-secondary,var(--ui-number-muted)));
    --_line:var(--line,var(--border-color,var(--ui-number-line)));
    --_input:var(--input-bg,var(--surface,#ececec));
    --_input-focus:var(--input-focus-bg,var(--_input));
    --_accent:var(--accent,var(--primary-color,var(--ui-number-accent)));
    --_soft:var(--accent-soft,var(--primary-muted,var(--ui-number-accent-soft)));
    --_control-h:var(--control-h,34px);
    color-scheme:light;
}
.ui-number.small{--_control-h:var(--control-h-sm,28px)}
[data-theme="dark"] .ui-number{color-scheme:dark}
.ui-number.is-disabled{opacity:.55;pointer-events:none}
.ui-number-btn{
    appearance:none;flex:0 0 var(--_control-h);width:var(--_control-h);min-width:var(--_control-h);
    border:1px solid var(--_line);background:var(--_input);color:var(--_muted);
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
    font-size:.82rem;line-height:1;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.ui-number-btn:first-child{border-radius:var(--radius);border-right:0}
.ui-number-btn:last-child{border-radius:var(--radius);border-left:0}
.ui-number:not(.has-controls) .ui-number-btn{display:none}
.ui-number-btn:hover:not(:disabled){color:var(--_accent);border-color:var(--_accent);background:var(--_soft);z-index:1}
.ui-number-btn:disabled{opacity:.45;cursor:not-allowed}
.ui-number-btn i{font-size:.68rem;pointer-events:none;line-height:1}
.ui-number-input{
    flex:1 1 auto;min-width:0;width:100%;height:var(--_control-h);min-height:var(--_control-h);max-height:var(--_control-h);
    border:1px solid var(--_line);background:var(--_input);color:var(--_ink);
    font:inherit;font-size:.925rem;padding:0 .65rem;outline:none;box-sizing:border-box;
    -moz-appearance:textfield;appearance:textfield;
}
.ui-number.has-controls .ui-number-input{border-radius:var(--radius)}
.ui-number:not(.has-controls) .ui-number-input{border-radius:var(--radius)}
.ui-number-input::-webkit-outer-spin-button,.ui-number-input::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0;
}
.ui-number-input::placeholder{color:var(--_muted);opacity:.85}
.ui-number-input:focus{border-color:var(--_accent);box-shadow:0 0 0 3px var(--_soft);background:var(--_input-focus);z-index:1}
.ui-number-input:disabled{cursor:not-allowed}
.ui-number.align-center .ui-number-input{text-align:center}
.ui-number.align-right .ui-number-input{text-align:right}
.form-group .ui-number,.field .ui-number{width:100%}
.form-group .ui-number-input,.field .ui-number-input{
    width:100%!important;height:var(--_control-h)!important;min-height:var(--_control-h)!important;max-height:var(--_control-h)!important;max-width:none;
    padding-left:.65rem!important;padding-right:.65rem!important;
    box-shadow:none;
}
.form-group .ui-number-input:focus,.field .ui-number-input:focus{
    box-shadow:0 0 0 3px var(--_soft)!important;
}

/* ---------- Select（ui-select.js） ---------- */
.ui-select,
.ui-select-menu{
    --_ink:var(--ink, var(--text-color, #1a1a1a));
    --_muted:var(--muted, var(--text-secondary, var(--text-muted, #606870)));
    --_surface:var(--surface, var(--card-bg, #ececec));
    --_input:var(--input-bg, var(--bg-color, #e4e4e4));
    --_input-focus:var(--input-focus-bg, var(--card-bg, var(--_input)));
    --_line:var(--line, var(--border-color, #c8c8c8));
    --_accent:var(--accent, var(--primary-color, #505860));
    --_accent-soft:var(--accent-soft, var(--primary-muted, rgba(80,88,96,.12)));
    --_shadow:var(--shadow, 0 4px 16px rgba(0,0,0,.08));
    --_control-h:var(--control-h, 34px);
    --_font:var(--font, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
}
.ui-select.small{--_control-h:var(--control-h-sm,28px)}
.ui-select{
    position:relative;width:100%;
}
.ui-select.open{z-index:130}
.ui-select.compact,.ui-select.ui-select-sm{width:auto;min-width:7rem}
.ui-select-trigger{
    appearance:none;position:relative;width:100%;height:var(--_control-h);min-height:var(--_control-h);max-height:var(--_control-h);box-sizing:border-box;
    padding:0 1.8rem 0 .7rem;border:1px solid var(--_line);border-radius:var(--radius);
    background:var(--_input);color:var(--_ink);font:inherit;font-size:.82rem;line-height:1;
    text-align:left;cursor:pointer;display:flex;align-items:center;margin:0;
}
.ui-select.compact .ui-select-trigger,.ui-select.ui-select-sm .ui-select-trigger{
    height:var(--_control-h);min-height:var(--_control-h);max-height:var(--_control-h);
    padding:0 1.6rem 0 .55rem;font-size:.82rem;line-height:1;
}
.ui-select.open .ui-select-trigger,.ui-select-trigger:focus{
    outline:none;border-color:var(--_line);box-shadow:none;
    background:var(--_input-focus);
}
.ui-select-trigger:disabled{opacity:.55;cursor:not-allowed}
.ui-select-trigger .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-select-trigger .label.is-placeholder{color:var(--_muted)}
.ui-select-trigger .chevron{
    position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
    font-size:.6rem;color:var(--_muted);pointer-events:none;transition:transform .15s ease;
}
.ui-select.open .ui-select-trigger .chevron{transform:translateY(-50%) rotate(180deg)}
.ui-select-menu{
    position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:140;
    max-height:min(240px,45vh);overflow:auto;padding:.25rem;
    border:1px solid var(--_line);border-radius:var(--radius);background:var(--_surface);
    box-shadow:var(--_shadow);min-width:100%;width:max-content;color:var(--_ink);
    font-family:var(--_font);animation:ui-select-pop .14s ease;
}
.ui-select-menu.is-fixed{
    position:fixed;right:auto;bottom:auto;margin:0;z-index:1100;
}
.ui-select.drop-up .ui-select-menu:not(.is-fixed){top:auto;bottom:calc(100% + 4px)}
.ui-select-option{
    appearance:none;width:100%;border:0;background:transparent;color:var(--_ink);font:inherit;
    font-size:.88rem;text-align:left;cursor:pointer;padding:.45rem .55rem;border-radius:var(--radius);
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}
.ui-select.compact .ui-select-option,.ui-select.ui-select-sm .ui-select-option{font-size:.85rem;padding:.4rem .5rem}
.ui-select-option:hover,.ui-select-option.active{
    background:var(--_accent-soft);color:var(--_accent);
}
.ui-select-option i{font-size:.7rem;opacity:.85}
.ui-select-empty{padding:.55rem;font-size:.82rem;color:var(--_muted);text-align:center}
@keyframes ui-select-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* 与 input 同高：跟随页面 --control-h（默认 34px） */
.ui-select-trigger,
.ui-select.compact .ui-select-trigger,
.ui-select.ui-select-sm .ui-select-trigger{
    height:var(--_control-h)!important;min-height:var(--_control-h)!important;max-height:var(--_control-h)!important;
    box-sizing:border-box!important;line-height:1!important;margin:0!important;
}
.form-group .ui-select,.field .ui-select{width:100%}
.form-group .ui-date,.field .ui-date{width:100%}
.toolbar .ui-select,.toolbar .ui-date{width:auto;min-width:7rem}
.page-size .ui-select{width:auto}
.search-box .ui-select,.search-row .ui-select{width:100%}

/* ---------- Dialog / Toast（ui-dialog.js） ---------- */
.ui-toast-wrap{
    position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:240;
    display:flex;flex-direction:column;align-items:center;gap:.45rem;
    pointer-events:none;max-width:min(92vw,420px);width:max-content;
}
.ui-toast{
    min-width:0;max-width:min(92vw,420px);padding:.7rem 1.15rem;border:none;border-radius:var(--radius);
    background:var(--btn-primary-bg,#606870);color:var(--btn-primary-fg,#ececec);
    font:inherit;font-size:.875rem;text-align:center;line-height:1.4;
    box-shadow:var(--shadow-pop,0 2px 10px rgba(0,0,0,.14));
    opacity:0;transform:translateY(12px);transition:opacity .28s ease,transform .28s ease;
}
.ui-toast.show{opacity:1;transform:translateY(0)}
.ui-toast.error,.ui-toast.err{background:var(--warn,#8b5050);color:#f5f5f5}
.ui-toast.ok,.ui-toast.success{background:var(--ok,#5a6a62);color:#f5f5f5}
.ui-toast.warn,.ui-toast.warning{background:var(--caution,#8a7058);color:#f5f5f5}
.ui-toast.info{background:var(--btn-primary-bg,#606870);color:var(--btn-primary-fg,#ececec)}

.ui-dlg-mask{
    position:fixed;inset:0;z-index:230;background:rgba(18,20,24,.52);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
    display:flex;align-items:center;justify-content:center;padding:1rem;
    animation:ui-dlg-fade .16s ease;
}
.ui-dlg-card{
    position:relative;
    width:min(92vw,360px);background:var(--surface,#ececec);border:1px solid var(--line,#c8c8c8);
    border-radius:var(--radius);box-shadow:0 22px 56px rgba(0,0,0,.28);padding:1.15rem 1.1rem 1rem;
    color:var(--ink,#1a1a1a);font:inherit;
    animation:ui-dlg-pop .18s cubic-bezier(.2,.9,.3,1.15);
}
.ui-dlg-x{
    position:absolute;top:.35rem;right:.35rem;z-index:1;
    width:28px;height:28px;padding:0;border:0;border-radius:var(--radius);
    background:transparent;color:var(--muted,#606870);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;
}
.ui-dlg-x:hover{background:var(--hover-bg,rgba(0,0,0,.06));color:var(--ink,#1a1a1a)}
.ui-dlg-icon{
    width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    margin:0 auto .75rem;font-size:1.05rem;background:var(--accent-soft,rgba(80,88,96,.12));color:var(--accent,#505860);
}
.ui-dlg-card.danger .ui-dlg-icon{background:rgba(139,80,80,.16);color:var(--warn,#8b5050)}
.ui-dlg-card.info .ui-dlg-icon{background:var(--accent-soft,rgba(80,88,96,.12));color:var(--accent,#505860)}
.ui-dlg-title{text-align:center;font-size:1.02rem;font-weight:650;margin-bottom:.35rem;color:var(--ink,#1a1a1a)}
.ui-dlg-msg{text-align:center;color:var(--muted,#606870);font-size:.88rem;line-height:1.5;white-space:pre-wrap}
.ui-dlg-input{
    display:block;width:100%;margin-top:.85rem;min-height:var(--control-h,34px);
    padding:.5rem .7rem;border:1px solid var(--line,#c8c8c8);border-radius:var(--radius);
    background:var(--input-bg,#e4e4e4);color:var(--ink,#1a1a1a);font:inherit;outline:none;
}
.ui-dlg-input:focus{
    border-color:var(--accent,#505860);box-shadow:0 0 0 3px var(--accent-soft,rgba(80,88,96,.12));
    background:var(--input-focus-bg,var(--input-bg,#ececec));
}
.ui-dlg-card.form{width:min(92vw,400px);overflow:visible}
.ui-dlg-fields{margin-top:.85rem;display:flex;flex-direction:column;gap:.65rem;text-align:left}
.ui-dlg-field{display:flex;flex-direction:column;gap:.28rem}
.ui-dlg-field > span{font-size:.78rem;color:var(--muted,#606870)}
.ui-dlg-field .ui-dlg-input{margin-top:0}
.ui-dlg-field .ui-select{width:100%}
.ui-dlg-card .ui-select.open{z-index:250}
select.ui-dlg-input{
    appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1.8rem;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23606870' d='M1 1l4 4 4-4'/></svg>");
    background-repeat:no-repeat;background-position:right .65rem center;background-size:10px 6px;
}
.ui-dlg-check{
    display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--ink,#1a1a1a);
    cursor:pointer;user-select:none;
}
.ui-dlg-check input{accent-color:var(--accent,#505860)}
.ui-dlg-actions{display:flex;gap:.5rem;margin-top:1.05rem}
.ui-dlg-btn{
    flex:1;height:36px;padding:0 .85rem;border-radius:var(--radius);border:1px solid var(--line-strong,#a8a8a8);
    background:var(--input-bg,var(--bg,#e4e4e4));color:var(--ink,#1a1a1a);font:inherit;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
}
.ui-dlg-btn:hover{border-color:var(--accent,#505860);background:var(--accent-soft,rgba(80,88,96,.12))}
.ui-dlg-btn.ghost{background:var(--input-bg,var(--bg,#e4e4e4));color:var(--ink,#1a1a1a);border-color:var(--line-strong,#a8a8a8)}
.ui-dlg-btn.ghost:hover{color:var(--ink,#1a1a1a);background:var(--accent-soft,rgba(80,88,96,.12))}
.ui-dlg-btn.primary{background:var(--btn-primary-bg,#606870);color:var(--btn-primary-fg,#ececec);border-color:var(--btn-primary-bg,#606870)}
.ui-dlg-btn.primary:hover{background:var(--btn-primary-hover,#505860);border-color:var(--btn-primary-hover,#505860);color:var(--btn-primary-fg,#ececec)}
.ui-dlg-btn.danger{background:var(--warn,#8b5050);border-color:var(--warn,#8b5050);color:#f5f5f5}
.ui-dlg-btn.danger:hover{filter:brightness(1.05)}
@keyframes ui-dlg-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-dlg-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ---------- Date（ui-date.js） ---------- */
:root, [data-theme="light"] {
    --ui-date-ink: #1a1a1a;
    --ui-date-muted: #606870;
    --ui-date-surface: #ececec;
    --ui-date-input: #e4e4e4;
    --ui-date-input-focus: #ececec;
    --ui-date-line: #c8c8c8;
    --ui-date-line-strong: #a8a8a8;
    --ui-date-accent: #505860;
    --ui-date-accent-hover: #3e444c;
    --ui-date-accent-soft: rgba(80,88,96,.12);
    --ui-date-btn-fg: #ececec;
    --ui-date-shadow: 0 4px 16px rgba(0,0,0,.08);
}
[data-theme="dark"] {
    --ui-date-ink: #d0d0d0;
    --ui-date-muted: #8a9098;
    --ui-date-surface: #383838;
    --ui-date-input: #2e2e2e;
    --ui-date-input-focus: #3e3e3e;
    --ui-date-line: #555;
    --ui-date-line-strong: #707070;
    --ui-date-accent: #a8b0b8;
    --ui-date-accent-hover: #c0c8d0;
    --ui-date-accent-soft: rgba(168,176,184,.14);
    --ui-date-btn-fg: #1a1a1a;
    --ui-date-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.ui-date{
    position:relative;width:100%;
    color-scheme:light;
    --_ink: var(--ink, var(--text-color, var(--ui-date-ink)));
    --_muted: var(--muted, var(--text-muted, var(--ui-date-muted)));
    --_surface: var(--surface, var(--card-bg, var(--dropdown-bg, var(--ui-date-surface))));
    --_input: var(--input-bg, var(--_surface));
    --_input-focus: var(--input-focus-bg, var(--_surface));
    --_line: var(--line, var(--border-color, var(--ui-date-line)));
    --_line-strong: var(--line-strong, var(--_line));
    --_accent: var(--accent, var(--primary-color, var(--ui-date-accent)));
    --_accent-hover: var(--accent-hover, var(--btn-primary-hover, var(--ui-date-accent-hover)));
    --_accent-soft: var(--accent-soft, var(--primary-muted, var(--ui-date-accent-soft)));
    --_btn-fg: var(--btn-primary-fg, var(--btn-primary-color, var(--primary-contrast, var(--ui-date-btn-fg))));
    --_shadow: var(--shadow, var(--ui-date-shadow));
    --_control-h: var(--control-h, 34px);
}
.ui-date.small{--_control-h:var(--control-h-sm,28px)}
[data-theme="dark"] .ui-date{
    color-scheme:dark;
}
.ui-date.open{z-index:130}
.ui-date-trigger{
    appearance:none;position:relative;width:100%;height:var(--_control-h);min-height:var(--_control-h);max-height:var(--_control-h);box-sizing:border-box;
    padding:0 2.1rem 0 .7rem;border:1px solid var(--_line);border-radius:var(--radius);
    background:var(--_input);color:var(--_ink);font:inherit;font-size:.82rem;line-height:1;
    text-align:left;cursor:pointer;display:flex;align-items:center;gap:.4rem;margin:0;
}
.ui-date.open .ui-date-trigger,.ui-date-trigger:focus{
    outline:none;border-color:var(--_accent);box-shadow:0 0 0 3px var(--_accent-soft);
    background:var(--_input-focus);
}
.ui-date-trigger:disabled{opacity:.55;cursor:not-allowed}
.ui-date-trigger .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-date-trigger .label.is-placeholder{color:var(--_muted)}
.ui-date-trigger .cal-ico{
    position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
    font-size:.78rem;color:var(--_muted);pointer-events:none;
}
.ui-date-panel{
    position:absolute;top:calc(100% + 4px);left:0;z-index:140;width:min(292px,92vw);
    border:1px solid var(--_line);border-radius:var(--radius);background:var(--_surface);
    box-shadow:var(--_shadow);padding:.65rem .7rem .7rem;color:var(--_ink);
    animation:ui-date-pop .16s ease;
}
.ui-date-panel.is-fixed{
    position:fixed;right:auto;bottom:auto;margin:0;
}
.ui-date.drop-up .ui-date-panel:not(.is-fixed){top:auto;bottom:calc(100% + 4px)}
@keyframes ui-date-pop-up{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.ui-date.drop-up .ui-date-panel{animation-name:ui-date-pop-up}
.ui-date-head{display:flex;align-items:center;justify-content:space-between;gap:.35rem;margin-bottom:.55rem}
.ui-date-head .ym{font-weight:650;font-size:.92rem;color:var(--_ink);border:0;background:transparent;cursor:pointer;padding:.2rem .35rem;border-radius:var(--radius)}
.ui-date-head .ym:hover{background:var(--_accent-soft);color:var(--_accent)}
.ui-date-head .ym.is-static{cursor:default}
.ui-date-head .ym.is-static:hover{background:transparent;color:var(--_ink)}
.ui-date-nav{display:flex;gap:.2rem}
.ui-date-nav button{
    width:28px;height:28px;border:1px solid var(--_line);background:var(--_input);
    color:var(--_muted);border-radius:var(--radius);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
}
.ui-date-nav button:hover{color:var(--_accent);border-color:var(--_accent);background:var(--_accent-soft)}
.ui-date-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:.25rem}
.ui-date-week span{text-align:center;font-size:.68rem;color:var(--_muted);padding:.2rem 0}
.ui-date-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ui-date-day{
    appearance:none;border:0;background:transparent;color:var(--_ink);font:inherit;font-size:.82rem;
    height:32px;border-radius:var(--radius);cursor:pointer;
}
.ui-date-day:hover{background:var(--_accent-soft);color:var(--_accent)}
.ui-date-day.muted{color:var(--_muted);opacity:.55}
.ui-date-day.today{font-weight:700;box-shadow:inset 0 0 0 1px var(--_line-strong)}
.ui-date-day.active{background:var(--_accent-soft);color:var(--_accent);font-weight:650;box-shadow:inset 0 0 0 1px var(--_accent)}
.ui-date-day.active:hover{background:var(--_accent-soft);color:var(--_accent)}
.ui-date-months,.ui-date-years{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.ui-date-months button,.ui-date-years button{
    appearance:none;border:1px solid var(--_line);background:var(--_input);color:var(--_ink);
    font:inherit;font-size:.82rem;padding:.55rem .3rem;border-radius:var(--radius);cursor:pointer;
}
.ui-date-months button:hover,.ui-date-years button:hover,.ui-date-months button.active,.ui-date-years button.active{
    border-color:var(--_accent);background:var(--_accent-soft);color:var(--_accent);font-weight:600;
}
.ui-date-time{
    display:flex;align-items:center;gap:.45rem;margin-top:.65rem;padding-top:.65rem;border-top:1px solid var(--_line);
}
.ui-date-time label{font-size:.78rem;color:var(--_muted);white-space:nowrap}
.ui-date-time input{
    width:100%;border:1px solid var(--_line);background:var(--_input);border-radius:var(--radius);
    padding:.4rem .55rem;color:var(--_ink);font:inherit;outline:none;color-scheme:inherit;
}
.ui-date-time input:focus{border-color:var(--_accent);box-shadow:0 0 0 3px var(--_accent-soft)}
.ui-date-actions{display:flex;justify-content:space-between;gap:.4rem;margin-top:.65rem}
.ui-date-actions button{
    appearance:none;border:1px solid var(--_line);background:var(--_surface);color:var(--_ink);
    font:inherit;font-size:.8rem;padding:.35rem .65rem;border-radius:var(--radius);cursor:pointer;
}
.ui-date-actions button:hover{border-color:var(--ghost-hover-border, var(--_line-strong))}
.ui-date-actions .primary{background:var(--_accent);border-color:var(--_accent);color:var(--_btn-fg)}
.ui-date-actions .primary:hover{background:var(--_accent-hover)}
@keyframes ui-date-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* 与 input 同高：跟随页面 --control-h（默认 34px） */
.ui-date-trigger{
    height:var(--_control-h)!important;min-height:var(--_control-h)!important;max-height:var(--_control-h)!important;
    box-sizing:border-box!important;line-height:1!important;margin:0!important;
}
.form-group .ui-date,.field .ui-date{width:100%}
.toolbar .ui-date{width:auto;min-width:7rem}

/* ============ 状态栏占位（App / 刘海屏） ============ */
.ui-status-spacer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--status-h, env(safe-area-inset-top, 0px));
    z-index: 40;
    pointer-events: none;
    background: transparent;
}

/* ============ 页面条纹渐变底（登录/资料/表单等） ============ */
.ui-page-stripe {
    background:
        repeating-linear-gradient(-12deg, transparent, transparent 11px, var(--stripe) 11px, var(--stripe) 12px),
        linear-gradient(165deg, var(--bg-grad-start) 0%, var(--bg) 38%, var(--bg-grad-end) 100%);
}