/* === 线框图通用样式 v6.0 — 导航重构 + 折叠交互 + 组件库 === */
/* 作为所有线框图页面的 CSS 源，各模块不得重复声明通用组件样式 */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#f3f4f6;color:#374151;line-height:1.5}

/* ═══ 1. 布局框架 ═══ */
.wireframe{position:relative;padding:0;max-width:1440px;margin:0 auto;min-height:100vh;background:#fff;display:flex;flex-direction:column}
.wf-label{position:sticky;top:0;z-index:999;background:#1f2937;color:#fff;padding:6px 16px;font-size:12px;font-family:monospace;display:flex;justify-content:space-between}
.wf-label .state{color:#8bc34a}
.wf-label .page{color:#9ca3af}
.wf-body{display:flex;flex:1;min-height:700px}
.wf-layout{display:flex;flex:1}
.wf-main{flex:1;padding:20px 24px;overflow-y:auto;min-width:0}

/* ═══ 2. 导航栏（v6.0 全宽 220px 可折叠） ═══ */
.wf-nav{width:220px;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;flex-shrink:0;position:relative}
.wf-nav-logo{padding:14px 18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #f3f4f6;font-size:14px;font-weight:600;color:#1f2937}
.wf-nav-logo .icon{width:28px;height:28px;background:#1f2937;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
.wf-nav-scroll{flex:1;overflow-y:auto;padding:4px 0}
.wf-nav-grp{font-size:11px;color:#9ca3af;padding:10px 18px 2px;font-weight:500}

/* 一级导航 */
.wf-nav-l1{display:flex;align-items:center;padding:9px 18px;font-size:13px;color:#4b5563;gap:8px;cursor:pointer}
.wf-nav-l1:hover{background:#f3f4f6}
.wf-nav-l1.act{background:#e6f4ff;color:#1890ff;font-weight:500}
.wf-nav-l1 .arr{font-size:12px;color:#6b7280;transition:transform .2s;cursor:pointer;display:inline-block}
.wf-nav-l1 .arr.open{transform:rotate(90deg)}
.wf-nav-l1 .kt{font-size:10px;color:#d1d5db;font-family:monospace;margin-left:auto;background:#f3f4f6;padding:1px 6px;border-radius:3px}
.wf-nav-l1.act .kt{background:#d6eaff}

/* 子菜单 */
.wf-nav-sub{overflow:hidden;max-height:0;transition:max-height .25s}
.wf-nav-sub.open{max-height:400px}
.wf-nav-l2{display:flex;align-items:center;padding:6px 18px 6px 46px;font-size:12px;color:#6b7280;gap:6px;cursor:pointer}
.wf-nav-l2:hover{background:#f3f4f6}
.wf-nav-l2.act{color:#1890ff;font-weight:500}
.wf-nav-l2 .kt{font-size:10px;color:#d1d5db;font-family:monospace;margin-left:auto}

/* 用户区 */
.wf-nav-user{padding:10px 18px;border-top:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7280}
.wf-nav-user .av{width:24px;height:24px;border-radius:50%;background:#6b7280;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px}

/* ═══ 3. 侧边栏折叠交互 ═══ */
.wf-nav-toggle{position:absolute;bottom:56px;right:-12px;width:24px;height:24px;background:#fff;border:1px solid #d1d5db;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:10px;color:#9ca3af;z-index:10}
.wf-nav.collapsed{width:60px}
.wf-nav.collapsed .wf-nav-logo{justify-content:center;padding:14px 0}
.wf-nav.collapsed .wf-nav-logo span{display:none}
.wf-nav.collapsed .wf-nav-l1{justify-content:center;padding:9px 0;font-size:0}
.wf-nav.collapsed .wf-nav-l1 .arr{display:none}
.wf-nav.collapsed .wf-nav-sub{display:none!important}
.wf-nav.collapsed .wf-nav-user{justify-content:center;padding:10px 0}
.wf-nav.collapsed .wf-nav-user span{display:none}
.wf-nav.collapsed .wf-nav-toggle{right:-12px;transform:rotate(180deg)}

/* ═══ 4. 图标式导航（60px 紧凑型） ═══ */
.wf-nav.nav-icon{width:60px;align-items:center;padding-top:12px;gap:4px}
.wf-nav.nav-icon .l{width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#9ca3af;cursor:pointer}
.wf-nav.nav-icon .l.act{background:#e6f4ff;color:#1890ff}
.wf-nav.nav-icon .sep{width:28px;height:1px;background:#e5e7eb;margin:4px 0}

/* ═══ 5. 按钮 ═══ */
.wf-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 18px;border-radius:4px;font-size:13px;border:1px solid;gap:4px;line-height:1;cursor:pointer}
.wf-btn.p{background:#6b7280;color:#fff;border-color:#9ca3af}
.wf-btn.s{background:#fff;color:#6b7280;border-color:#d1d5db}
.wf-btn.d{background:#fff;color:#c44;border-color:#ffa39e}
.wf-btn.sm{padding:4px 10px;font-size:11px}
.wf-btn:disabled{opacity:.4;cursor:not-allowed}
.wf-btn.ghost{border-color:transparent;background:transparent;color:#1890ff}

/* ═══ 6. 标签 ═══ */
.wf-tg{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;border:1px solid #e5e7eb;line-height:1.5}
.wf-tg.g{border-color:#b7eb8f;background:#f6ffed;color:#52c41a}
.wf-tg.b{border-color:#91d5ff;background:#e6f7ff;color:#1890ff}
.wf-tg.r{border-color:#ffccc7;background:#fff2f0;color:#ff4d4f}
.wf-tg.y{border-color:#ffe58f;background:#fffbe6;color:#ad8b00}
.wf-tg.gy{border-color:#d1d5db;background:#f3f4f6;color:#9ca3af}
.wf-tg.p{border-color:#d3adf7;background:#f9f0ff;color:#722ed1}

/* ═══ 7. 统计卡 ═══ */
.wf-stat{border:1px solid #d1d5db;border-radius:6px;padding:14px 18px;min-width:130px;flex:1;background:#fff}
.wf-stat .n{font-size:24px;font-weight:700}
.wf-stat .l{font-size:12px;color:#9ca3af;margin-top:2px}

/* ═══ 8. 表格 ═══ */
.wf-tb{width:100%;border-collapse:collapse;font-size:13px}
.wf-tb th{padding:8px 10px;border-bottom:2px solid #e5e7eb;font-weight:600;color:#6b7280;text-align:left;font-size:12px;background:#f9fafb}
.wf-tb td{padding:8px 10px;border-bottom:1px solid #f3f4f6}
.wf-tb tr.sel td{background:#f0f7ff}

/* ═══ 9. 表单控件 ═══ */
.wf-inp{border:1px solid #d1d5db;border-radius:4px;padding:6px 10px;font-size:13px;min-height:30px;background:#fff;display:flex;align-items:center}
.wf-inp-er{border-color:#ff4d4f}
.wf-sel{border:1px solid #d1d5db;border-radius:4px;padding:6px 26px 6px 10px;font-size:13px;background:#fff;min-height:30px;display:flex;align-items:center;position:relative}
.wf-sel::after{content:"▾";position:absolute;right:8px;font-size:10px;color:#9ca3af}
.wf-srch{display:flex;align-items:center;border:1px solid #d1d5db;border-radius:4px;padding:4px 10px;background:#fff;gap:6px;font-size:12px;color:#d1d5db}
.wf-flt{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.wf-fg{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.wf-fl{font-size:12px;color:#6b7280;font-weight:500}
.wf-fh{font-size:11px;color:#9ca3af;margin-top:2px}
.wf-tog{display:inline-flex;width:34px;height:17px;border-radius:9px;background:#e5e7eb;position:relative;cursor:pointer}
.wf-tog.on{background:#6b7280}
.wf-tog::after{content:"";width:13px;height:13px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px}
.wf-tog.on::after{left:19px}
.wf-cb{width:15px;height:15px;border:1px solid #d1d5db;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;background:#fff}
.wf-cb.ch{background:#6b7280;border-color:#6b7280}
.wf-cb.ch::after{content:"✓";color:#fff;font-size:10px;font-weight:700}

/* ═══ 10. 分页 ═══ */
.wf-pg{display:flex;align-items:center;gap:4px;justify-content:center;margin-top:14px}
.wf-pb{padding:4px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;background:#fff;cursor:pointer}
.wf-pb.act{background:#6b7280;color:#fff;border-color:#6b7280}
.wf-pb.dis{opacity:.3;cursor:not-allowed}

/* ═══ 11. 模态框 ═══ */
.wf-mo{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:200;display:flex;align-items:center;justify-content:center}
.wf-mo-cd{background:#fff;border-radius:8px;padding:24px;min-width:360px;max-width:500px}
.wf-mo-t{font-size:15px;font-weight:600;margin-bottom:10px}
.wf-mo-b{font-size:13px;color:#6b7280;margin-bottom:18px}
.wf-mo-f{display:flex;justify-content:flex-end;gap:8px}

/* ═══ 12. 抽屉 ═══ */
.wf-dr{position:fixed;top:0;right:0;width:400px;height:100%;background:#fff;box-shadow:-2px 0 12px rgba(0,0,0,.08);z-index:200;display:flex;flex-direction:column}
.wf-dr-h{padding:14px 20px;border-bottom:1px solid #e5e7eb;font-size:15px;font-weight:600;display:flex;justify-content:space-between}
.wf-dr-b{padding:20px;flex:1;overflow-y:auto}
.wf-dr-f{padding:14px 20px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:8px}

/* ═══ 13. 状态提示 ═══ */
.wf-er{background:#fff2f0;border:1px solid #ffccc7;border-radius:4px;padding:10px 14px;font-size:13px;color:#c44;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wf-wa{background:#fffbe6;border:1px solid #ffe58f;border-radius:4px;padding:8px 12px;font-size:12px;color:#ad8b00;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.wf-em{text-align:center;padding:60px 20px;color:#9ca3af}
.wf-em .ic{font-size:40px;margin-bottom:8px;opacity:.4}
.wf-em .msg{font-size:14px;margin-bottom:4px}
.wf-bc{font-size:12px;color:#9ca3af;margin-bottom:6px}
.wf-tabs{display:flex;border-bottom:2px solid #e5e7eb;margin-bottom:12px}
.wf-tab{padding:7px 14px;font-size:13px;color:#9ca3af;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer}
.wf-tab.act{color:#374151;border-bottom-color:#6b7280;font-weight:500}
.wf-sk{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%);background-size:400% 100%;animation:sk 1.5s ease-in-out infinite;border-radius:4px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.wf-r{display:flex;gap:14px}
.wf-c{flex:1}