/* 公共设计变量（index.html + admin.html 共享）
   注意：零构建方案，通过 <link rel="stylesheet" href="/common.css"> 引入
   UI 2.0 P0-1：token 层完整化。保留原有 12 个变量名（向后兼容），新增色阶/字号/间距/圆角/阴影/焦点/动效/断点 token。 */

:root {
  /* ===== 品牌蓝（主色 #0066CC 不动）===== */
  --primary: #0066CC;      /* 主色锚点 = primary-600 */
  --primary2: #0A84FF;     /* 辅助蓝 = primary-500 */
  --primary-bg: #E8F1FB;   /* 浅蓝底 = primary-100 */
  --primary-dark: #0055AA; /* 深蓝 = primary-700（原散落在 index.html 局部 :root，此处统一） */

  --primary-50:  #F0F7FF;
  --primary-100: #E8F1FB;
  --primary-200: #C9E0FF;
  --primary-300: #A6CBFF;
  --primary-400: #4DA3FF;
  --primary-500: #0A84FF;
  --primary-600: #0066CC;
  --primary-700: #0055AA;
  --primary-800: #004488;
  --primary-900: #003366;

  /* ===== 中性色（暖白物理面板）===== */
  --ink: #2A2118;   /* 暖深棕，主文字 */
  --ink2: #4A4238;  /* 暖中棕，次级文字 */
  --muted: #7A6E5D; /* 暖灰棕，辅助文字 */
  --line: #E4DDD0;  /* 暖米灰，分隔线 */
  --bg: #F5F2EC;    /* 暖白背景（新拟态画布色）*/
  --card: #F5F2EC;  /* 暖白卡片（与画布同色，靠阴影区分）*/
  --surface: #F7F5EF; /* 略亮暖白，次级表面 */

  --gray-100: #EFEAE1;
  --gray-200: #EAE5DC;
  --gray-300: #E0DACD;
  --gray-400: #C9C0AF;
  --gray-500: #B3A896;
  --gray-600: #8A7E68;
  --gray-700: #7A6E5D;

  /* ===== 语义色（收入绿 / 支出红，中国习惯；对齐画布物理面板）===== */
  --green: #5A9E6F;
  --red: #C9553D;
  --amber: #E8833A;

  --success: #5A9E6F;  --success-bg: #EAF3DE;  --success-ink: #3B6D11;
  --danger:  #C9553D;  --danger-bg:  #FCEBEB;  --danger-ink:  #A32D2D;
  --warning: #E8833A;  --warning-bg: #FFF3E0;  --warning-ink: #B25E00;
  --warning-soft: #FFF7E6;  --warning-border: #FFD591;  --warning-ink2: #8a5a00;
  --empty-bg: #FFF3E4;  --empty-ink: #D9985F;  /* 空态暖色图标（跨页统一） */

  /* ===== 代码/日志深底 ===== */
  --ink-inverse-2: #0d1117;
  --text-inverse: #d8d8dc;

  /* ===== 字号（无小数）===== */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --title: 24px;


  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ===== 间距（4 的倍数刻度）===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ===== 圆角（5 档 + 胶囊）===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ===== 阴影（6 级 + 3 色光晕）===== */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --shadow-xl: 0 16px 40px rgba(0,40,90,.14);
  --glow-primary: 0 6px 18px rgba(0,102,204,.22);
  --glow-danger: 0 8px 24px rgba(201,85,61,.30);
  --glow-success: 0 8px 24px rgba(90,158,111,.25);

  /* ===== 新拟态凸起 / 凹陷（暖白物理面板核心）===== */
  --inset-bg: #E3DED2;  /* 凹陷键/凹槽底色 */
  --raise:    -3px -3px 6px rgba(255,255,255,.90), 3px 3px 8px rgba(166,156,122,.40);
  --inset:    inset 3px 3px 6px rgba(166,156,122,.40), inset -3px -3px 6px rgba(255,255,255,.85);
  --inset-sm: inset 2px 2px 4px rgba(166,156,122,.40), inset -2px -2px 4px rgba(255,255,255,.85);
  --btn-side: 0 4px 0 #00437F, 0 10px 18px rgba(0,102,204,.30);

  /* ===== 焦点 / 动效 ===== */
  --ring: 0 0 0 3px rgba(0,102,204,.14);
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;

  /* ===== 布局 ===== */
  --sidebar-w: 232px;      /* 画布侧栏宽（原 224）*/

  /* ===== Brutalist-lite 硬边语言（后台统一；前台官网用 3px 描边）
     原则：沿用暖白新拟态底子（页面背景），只收硬边与圆角，不做糖果色。
     描边/硬阴影统一纯黑 #141414；圆角卡片 16→8、控件 12→6；hover 改位移+硬阴影。 */
  --hard-ink: #141414;
  --border-hard: 1.5px solid #2F2F2F;
  --shadow-hard: 0 2px 0 rgba(20,20,20,.07);
  --radius-card: 8px;      /* 卡片圆角（原 16 减半）*/
  --radius-ctl: 6px;       /* 按钮/控件圆角（原 12 减半）*/
  /* 语义实底色（badge/状态点用；只在 badge 等小控件上作底色，不做大面积糖果色） */
  --sem-green: #1A9E5C;
  --sem-yellow: #FFD93D;
  --sem-red: #E5484D;
}

/* ===== 全局焦点可见（键盘导航无障碍）===== */
:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;}

/* ===== 动效降级（尊重系统减少动态偏好）===== */
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

/* ===== Toast 轻提示（Brutalist-lite：白底 + 2px 黑描边 + 硬阴影 + 语义色圆点图标，右上角）===== */
.toast{position:fixed;top:20px;right:20px;z-index:9999;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-ctl);font-size:14px;color:var(--hard-ink);background:#fff;border:var(--border-hard);box-shadow:var(--shadow-hard);max-width:min(90vw,420px);opacity:0;transform:translateY(-6px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);pointer-events:none;line-height:1.5;word-break:break-word;}
.toast.show{opacity:1;transform:translateY(0);}
.toast-ic{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.toast-ic svg{width:20px;height:20px;display:block;}
.ti-info{color:var(--hard-ink);}
.ti-success{color:var(--sem-green);}
.ti-error{color:var(--sem-red);}

/* ===== 确认弹窗（Brutalist-lite：白底 + 2px 黑描边 + 硬阴影 + 圆角 8）===== */
.confirm-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1000;}
.confirm-box{background:#fff;border:var(--border-hard);border-radius:var(--radius-card);padding:24px;width:360px;max-width:92vw;box-shadow:var(--shadow-hard);}
.confirm-msg{font-size:14px;line-height:1.6;margin-bottom:20px;white-space:pre-wrap;word-break:break-word;color:var(--ink);}
.prompt-input{width:100%;padding:10px 13px;border:var(--border-hard);border-radius:var(--radius-ctl);font-size:14px;font-family:inherit;background:#fff;color:var(--ink);margin-bottom:20px;height:44px;box-sizing:border-box;}
.prompt-input:focus{outline:none;box-shadow:var(--ring);}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;}
.confirm-actions button{min-height:44px;padding:8px 20px;border-radius:var(--radius-ctl);font-size:14px;cursor:pointer;font-family:inherit;border:var(--border-hard);transition:opacity .15s;}
.confirm-actions button:hover{opacity:.88;}
.confirm-cancel{background:#fff;color:var(--ink2);box-shadow:0 1px 0 rgba(20,20,20,.10);}
.confirm-ok{background:var(--primary);color:#fff;font-weight:600;box-shadow:0 2px 0 #003D7A;}
.confirm-ok.danger{background:var(--sem-red);box-shadow:0 2px 0 #A32024;}

/* ===== 工具类 ===== */
.hidden{display:none !important;}


/* ===== 弹窗宽度三档（配合 .modal-box 使用；双类特异性压过 .modal-box 默认宽度）===== */
.modal-sm{width:360px;}
.modal-box.modal-md{width:440px;}
.modal-box.modal-lg{width:640px;}

/* ===== 弹窗进场动画（scale+fade；mask 由 display 切回时 animation 自动重播，免改 JS）===== */
.modal-box{animation:modal-in .25s var(--ease);}
@keyframes modal-in{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}

/* ===== 骨架屏（替换「加载中…」纯文字）===== */
.skel{padding:14px;}
.skel .skeleton{display:block;height:14px;margin-bottom:12px;background:var(--gray-200);border-radius:8px;position:relative;overflow:hidden;}
.skel .skeleton:last-child{margin-bottom:0;width:70%;}
.skel .skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:sk-wave 1.4s infinite;}
@keyframes sk-wave{100%{transform:translateX(100%);}}

/* ===== 共享组件（index.html + admin.html 复用，抽到此处：改样式只改这一处）=====
   注意：仅抽取两页「完全一致或已统一」的部分。以下同名组件仍保留在各页 <style> 里覆盖，
   它们不是重复、是不同场景的有意规格差异：
   - .btn 的 padding/字号（客户端 11px 18px/14px，管理端 7px 14px/13px，密度不同）
   - .card 的 margin-bottom / overflow（管理端表格多，加 overflow-x:auto）
   - .sidebar 的背景（客户端透明、管理端暖白+右边框）
   - .field 的结构（管理端支持 select/checkbox/radio，客户端只有 input/textarea） */

/* 侧栏菜单项（Brutalist-lite：常态透明底、hover 位移+硬阴影+白底描边、选中=主色蓝底白字+左白条） */
.menu-item{display:flex;align-items:center;gap:12px;padding:12px 18px;margin-bottom:8px;color:var(--ink2);font-size:14px;border-radius:var(--radius-ctl);cursor:pointer;transition:all .15s;border:2px solid transparent;background:transparent;width:100%;text-align:left;font-family:inherit;min-height:48px;position:relative;box-sizing:border-box;}
.menu-item:hover{background:#fff;color:var(--ink);border-color:#141414;box-shadow:var(--shadow-hard);transform:translate(-2px,-2px);}
.menu-item.active{color:#fff;background:var(--primary);border-color:#141414;font-weight:600;}
.menu-item.active::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:4px;height:20px;border-radius:2px;background:#fff;}

/* 菜单角标（待办数：语义红实底 + 2px 黑描边 + 6px 圆角，见对比稿「待办badge」样例） */
.menu-badge{margin-left:auto;background:var(--sem-red);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:var(--radius-ctl);display:inline-flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0;font-variant-numeric:tabular-nums;border:1px solid #2F2F2F;}
.menu-badge.hidden{display:none;}

/* 状态徽标（Brutalist-lite：统一 2px 黑描边 + 6px 圆角，只换底色不换形状；
   状态色用语义实底——绿白字/黄黑字/红白字，中性态保留浅底） */
.badge{display:inline-block;font-size:11px;padding:2px 10px;border-radius:var(--radius-ctl);background:var(--primary-bg);color:var(--primary);font-weight:600;border:var(--border-hard);}
.badge.ok{background:var(--sem-green);color:#fff;}
.badge.fail{background:var(--sem-red);color:#fff;}
.badge.amber{background:var(--sem-yellow);color:var(--hard-ink);}
.badge.gray{background:var(--gray-200);color:var(--ink2);}

/* 按钮骨架 + 变体（Brutalist-lite：2px 黑描边 + 圆角 12→6 + 3px 实色底座，三种颜色：主蓝/次白/危险红；
   padding/字号因页面密度不同保留在各页覆盖，见文件头说明） */
.btn{border:var(--border-hard);border-radius:var(--radius-ctl);background:#fff;color:var(--hard-ink);cursor:pointer;font-family:inherit;transition:all .15s;}
.btn-primary{background:var(--primary);color:#fff;font-weight:600;box-shadow:0 2px 0 #003D7A;}
.btn-primary:hover{opacity:.96;transform:translateY(-1px);}
.btn-primary:active{box-shadow:0 1px 0 #003D7A;transform:translateY(1px);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-ghost{background:#fff;color:var(--hard-ink);font-weight:600;box-shadow:0 1px 0 rgba(20,20,20,.10);}
.btn-ghost:disabled{opacity:.5;cursor:not-allowed;}
.btn-danger{background:var(--sem-red);color:#fff;font-weight:600;box-shadow:0 2px 0 #A32024;}
.btn-danger:hover{opacity:.92;}
.btn-sm{padding:4px 10px;font-size:12px;}
.btn-block{width:100%;}

/* 卡片骨架（Brutalist-lite：白底 + 2px 黑描边 + 硬阴影 4px 4px 0 + 圆角 16→8；
   margin/overflow 因页面密度不同保留在各页覆盖，见文件头说明） */
.card{background:#fff;border:var(--border-hard);border-radius:var(--radius-card);padding:20px;box-shadow:var(--shadow-hard);}

/* 侧栏骨架（背景/边框因视觉差异保留在各页覆盖，见文件头说明） */
.sidebar{width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}