/* ===== WJS-C 五健儿童健康 · 浅彩玻璃主题（与统算仪表盘一致） ===== */ :root{ --bg1:#fff5fb; --bg2:#eef5ff; --bg3:#f3fff6; --card:#ffffff; --ink:#3a3a52; --ink-soft:#7a7a96; --line:#ececf6; --primary:#7c6cff; --primary-d:#5b4fe0; --primary-soft:#efeaff; --sleep:#6c8cff; --nutri:#46c08a; --sport:#ffab4c; --vision:#33c6d8; --psy:#ff7eb6; --tcm:#b08bff; --green:#37c98d; --yellow:#ffce4f; --orange:#ff9f43; --red:#ff6b6b; --shadow:0 14px 34px rgba(124,108,255,.16); --shadow-sm:0 4px 14px rgba(120,110,200,.10); --radius:22px; --radius-sm:14px; --glass:linear-gradient(160deg, rgba(255,255,255,.92), rgba(250,251,255,.84)); --glass-line:rgba(124,108,255,.14); --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif; } *{box-sizing:border-box} body{margin:0;font-family:var(--font);color:var(--ink); background: radial-gradient(900px 520px at 6% -6%, rgba(124,108,255,.28), transparent 52%), radial-gradient(820px 500px at 98% -2%, rgba(63,214,240,.22), transparent 52%), radial-gradient(960px 640px at 50% 122%, rgba(255,126,182,.20), transparent 52%), linear-gradient(160deg,#eef0ff 0%, #e7f1ff 46%, #fbeef8 100%); background-attachment:fixed;min-height:100vh;font-size:15px;line-height:1.6} a{color:var(--primary);text-decoration:none} h1,h2,h3,h4{margin:0 0 .4em;font-weight:800;letter-spacing:.3px} .btn{display:inline-flex;align-items:center;gap:6px;border:none;cursor:pointer; background:linear-gradient(135deg,var(--primary),var(--primary-d));color:#fff; padding:11px 20px;border-radius:999px;font-weight:700;font-size:14px; box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(124,108,255,.30)} .btn:active{transform:translateY(0)} .btn.ghost{background:#fff;color:var(--primary);border:2px solid var(--primary-soft)} .btn.soft{background:var(--primary-soft);color:var(--primary-d)} .btn.sm{padding:7px 14px;font-size:13px} .btn.danger{background:linear-gradient(135deg,#ff8585,#ff5d5d)} .btn.gray{background:#eef0f7;color:var(--ink-soft)} input,select,textarea{font-family:var(--font);font-size:15px;padding:11px 14px; border:2px solid var(--line);border-radius:var(--radius-sm);width:100%;background:#fff;color:var(--ink)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)} input[readonly]{background:#fafaff;cursor:pointer} .date-picker{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237c6cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat right 12px center;background-size:18px;padding-right:40px;cursor:pointer} label{font-weight:700;font-size:13px;color:var(--ink-soft);display:block;margin:10px 0 4px} .field{margin-bottom:6px} /* 证件类型（身份证号 / 健康卡号）：类型下拉 + 号码输入 组合控件 */ .id-combo{display:flex;gap:8px} .id-combo select{flex:none;width:124px} .id-combo input{flex:1;min-width:0} .id-hint{margin-top:6px;font-size:12.5px;line-height:1.5;min-height:18px} .id-hint.ok{color:var(--green)} .id-hint.warn{color:var(--orange)} .id-hint.err{color:var(--red)} /* layout */ /* 外壳：横向铺满整屏。原 `max-width:1600px;margin:0 auto` 会让全站在宽屏被压成中间一条、 两侧留大片背景空白（2026-09-23 按需求解除）。 */ .app{display:flex;min-height:100vh;width:100%;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .sidebar{width:248px;flex:none;background:rgba(255,255,255,.70);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-right:1px solid rgba(124,108,255,.12);padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh} .brand{display:flex;align-items:center;gap:10px;padding:8px 10px 16px;font-weight:900;font-size:18px;color:var(--primary-d)} .brand .logo{width:30px;height:30px;flex:none;border-radius:9px;display:block; box-shadow:0 4px 12px rgba(124,108,255,.28)} .nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;color:var(--ink-soft);font-weight:700;transition:.15s} .nav a:hover{background:var(--primary-soft);color:var(--primary-d)} .nav a.active{background:linear-gradient(135deg,var(--primary),var(--primary-d));color:#fff;box-shadow:var(--shadow-sm)} .nav .ic{font-size:18px;width:22px;text-align:center} .content{flex:1;padding:22px 28px;min-width:0} .topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap} .topbar h1{font-size:24px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 顶栏左右两组的伸缩：左侧标题可压缩，右侧（机构+用户+账户操作）保持贴右不被换行挤走。 - flex-basis 必须给具体值（不能 auto）：flex-wrap 的换行判定用的是各组 max-content， h1 含 nowrap 长文本时会虚高，导致右侧组被挤到第二行。 - 左侧组必须 nowrap：否则标题+返回按钮自身折行会把整条顶栏撑高（实测 98.8px）， 右侧组随之垂直居中下移，账户操作看上去「掉到了下面」。 */ .topbar > .row{flex:1 1 200px;min-width:0;flex-wrap:nowrap} .topbar > div:last-child{flex:0 0 auto} .topbar .row > .hamburger,.topbar .row > .back-btn{flex:none} .userchip{display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--glass-line);padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-sm)} .avatar{width:38px;height:38px;border-radius:50%;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:20px} .rolebadge{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary-d)} .warnbadge{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px} .warnbadge.green{background:#e8f9f1;color:#229e6b} .warnbadge.yellow{background:#fff7e0;color:#b38600} .warnbadge.orange{background:#fff0e0;color:#c46a1e} .warnbadge.red{background:#ffeaea;color:#d94444} .warnbadge.gray{background:#f2f3f7;color:var(--ink-soft)} .hamburger{display:none;font-size:26px;background:#fff;border:none;border-radius:12px;padding:6px 12px;cursor:pointer;box-shadow:var(--shadow-sm)} /* cards & grid */ .grid{display:grid;gap:16px} .cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .card{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);border:1px solid var(--glass-line)} .card.pad{padding:22px} /* ---- 整卡可点 · stretched link（2026-10-12）---------------------------------- 需求：点卡片任意位置即进入该卡片的"主操作"，不必精确点到卡片里的小按钮。 ─ 为什么用"覆盖层"而不是把整卡包进 ：HTML 规范禁止 嵌套 ， 浏览器会把内层按钮从包裹链接中"拆"出去（DOM 被重排），渲染与点击都会错乱。 ─ 为什么不用 JS：覆盖层纯 HTML/CSS，无脚本报错风险、无加载时序问题， 且卡片本身已内联 position:relative（绝对定位的包含块来源）。 ─ 使用纪律：覆盖层 href 必须与卡片内【第一个按钮】的 href 完全同源。 模板里用同一个 {% set card_href %} 变量同时生成两者，避免日后改了按钮漏改覆盖层。 ─ 卡片内的按钮/表单必须提到覆盖层之上（z-index:2），否则按钮点不到。 */ .card.clickable{position:relative;cursor:pointer;transition:box-shadow .16s ease,transform .16s ease} .card.clickable:hover{box-shadow:0 12px 28px rgba(124,108,255,.18);transform:translateY(-2px)} .card.clickable:active{transform:translateY(0)} .card-link{position:absolute;inset:0;z-index:1;border-radius:inherit} .card.clickable a.btn, .card.clickable button, .card.clickable form{position:relative;z-index:2} .card .head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:8px} .card .head h4{margin-bottom:0} .d-flex{display:flex}.d-flex.align-items-center{align-items:center} .gap-2{gap:8px}.gap-3{gap:12px} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .between{justify-content:space-between} .wrap{flex-wrap:wrap} .stat{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);flex:1;min-width:150px;border:1px solid var(--glass-line)} .stat .n{font-size:30px;font-weight:900;color:var(--primary-d)} .stat .l{color:var(--ink-soft);font-weight:700;font-size:13px} .muted{color:var(--ink-soft)} .pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font-weight:800;font-size:12px;background:var(--primary-soft);color:var(--primary-d)} /* 预约状态徽章（与全站四档语义一致：warn/info/success/danger/muted） */ .st{display:inline-block;padding:3px 11px;border-radius:8px;font-weight:800;font-size:12px;white-space:nowrap} .st-warn{background:#fff4d6;color:#a3680a} .st-info{background:#e6f0ff;color:#1f5fbf} .st-success{background:#e3f9e5;color:#1f8a3b} .st-danger{background:#ffe3e3;color:#c0392b} .st-muted{background:#eef0f3;color:#7a828c} .chip{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.8);border:2px solid var(--line);font-weight:700;color:var(--ink-soft);cursor:pointer;font-size:13px} .chip.active{background:var(--primary);color:#fff;border-color:var(--primary)} /* level colors */ .lv{font-weight:900;padding:5px 14px;border-radius:999px;color:#fff;display:inline-flex;gap:6px;align-items:center} .lv-绿{background:var(--green)} .lv-黄{background:var(--yellow);color:#7a5b00} .lv-橙{background:var(--orange)} .lv-红{background:var(--red)} .lv-蓝{background:#4aa3ff} .dot{width:10px;height:10px;border-radius:50%;display:inline-block} .d-green{background:var(--green)} .d-yellow{background:var(--yellow)} .d-orange{background:var(--orange)} .d-red{background:var(--red)} /* child card */ .child-card{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:.18s;cursor:pointer;border:1px solid var(--glass-line);position:relative;overflow:hidden} .child-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(124,108,255,.20)} .child-card .face{font-size:46px;text-align:center;margin:6px 0} .child-card .nm{font-weight:900;font-size:17px} .child-card .meta{color:var(--ink-soft);font-size:13px} .child-index{position:absolute;top:8px;left:8px;z-index:2;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--vision));color:#fff;font-weight:900;font-size:13px;box-shadow:0 2px 8px rgba(124,108,255,.35)} .child-del-form{position:absolute;top:8px;right:8px;z-index:2;margin:0;padding:0} .child-del-form button{padding:4px 8px;font-size:14px;line-height:1;border-radius:8px;opacity:.85} .child-del-form button:hover{opacity:1} /* assessment */ .progress{height:14px;background:#eef0f7;border-radius:999px;overflow:hidden;margin:14px 0} .progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--vision));width:0;transition:width .3s} .qcard{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);margin-bottom:14px;border:1px solid var(--glass-line);border-left:6px solid var(--primary)} .qcard .q{font-weight:800;margin-bottom:4px} .qcard .q .code{color:var(--ink-soft);font-size:12px;font-weight:700;margin-right:8px} .qcard .dim{font-size:12px;color:var(--ink-soft);margin-bottom:10px} .opts{display:flex;gap:8px;flex-wrap:wrap} .opt{flex:1;min-width:72px;text-align:center;padding:10px 6px;border-radius:14px;border:2px solid var(--line);background:#fff;cursor:pointer;font-weight:800;transition:.12s;user-select:none} .opt:hover{border-color:var(--primary)} .opt.sel{color:#fff;border-color:transparent} /* freq 4 档：未选中即各自彩色（柔和底+彩边+彩字），选中实心深色 */ .opt.s0{background:#e9faf2;border-color:#9fe0bd;color:#1d9e6f} .opt.s1{background:#f4fadf;border-color:#c6e79a;color:#6f9e3a} .opt.s2{background:#fff3e4;border-color:#ffcf9e;color:#d97a1f} .opt.s3{background:#ffecec;border-color:#ffb4b4;color:#d94b4b} .opt.s0:hover{background:#d9f6e6;border-color:var(--green)} .opt.s1:hover{background:#ecf9d0;border-color:#9bd17a} .opt.s2:hover{background:#ffe8cd;border-color:var(--orange)} .opt.s3:hover{background:#ffd9d9;border-color:var(--red)} .opt.s0.sel{background:var(--green)} .opt.s1.sel{background:#9bd17a} .opt.s2.sel{background:var(--orange)} .opt.s3.sel{background:var(--red)} /* V5.0 五级第 5 档（深红） */ .opt.s4{background:#ffe3e3;border-color:#ff9d9d;color:#c23535} .opt.s4:hover{background:#ffd2d2;border-color:#ff8080} .opt.s4.sel{background:#d93838} .opt.y0.sel{background:var(--green)} .opt.y1.sel{background:var(--red)} .group-title{display:flex;align-items:center;gap:10px;margin:22px 0 6px;font-weight:900;font-size:18px} .group-title .gi{font-size:24px} /* report */ .bar{height:16px;background:#eef0f7;border-radius:999px;overflow:hidden;margin-top:6px} .bar > i{display:block;height:100%;border-radius:999px} .presc{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.9);border:2px solid var(--line);border-radius:16px;padding:10px 16px;font-weight:800;margin:6px 6px 0 0} .presc .pi{font-size:22px} .table{width:100%;border-collapse:collapse;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--glass-line)} .table th,.table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px} .table th{background:var(--primary-soft);color:var(--primary-d);font-weight:800} .table tr:last-child td{border-bottom:none} /* ===== 列表通栏（2026-09-23 按需求：所有列表横向铺满）===== 背景：`.table` 自身已带圆角 / 边框 / 阴影，本身就是「一张卡」；项目里又常把它套进 `.card` / `.card.pad`，卡片 18 / 22px 的水平内边距让表格左右各缩进，同一页里就比其它 卡片窄一截。用真实 Chromium 量测（1920 视口）：11 个页面 gapRight = 19 / 23px （= 卡片 padding + 1px 边框），而未套卡片的 /screening/child/pick、/admin/users 等为 0。 表格左右外框改由卡片提供（去掉自身左右 border，避免双层框）。 ★ 卡片有两种形态，必须分开处理（2026-10-11 修正）： 形态 A「卡片自带内边距」 class="flush card pad"（14 处：/admin/*、/data/、/growth/*、 /screening/*）—— 卡片里除表格外还有标题 / 筛选栏 / 表单等，**必须保留 .card.pad 的 22px 内边距**，否则这些内容会贴到卡片边缘；表格用负 margin 抵消该内边距。 形态 B「卡片不吃内边距」 class="card flush" + 内联 padding:0（4 处：/appointments/、 /appointments/slots、/appointments/、/children/audit）—— 卡片内只有表格， 表格 width:100% 即通栏，**不能加负 margin**。 原实现只用一条 `.card.flush > .table{margin-left:-22px}` 覆盖两种形态，对形态 B 就是 负 margin 无处抵消 → 表格整体左移 22px、被卡片 overflow:hidden 裁掉首列约 8px。 实测被切：审核台「验收新建儿童」首字「验」、预约详情 / 预约列表「预约号」首字「预」。 分流手段用 `:not(.pad)` —— 两张卡片形态的唯一 class 差异。 */ .card.flush{overflow:hidden} /* ---- 形态 A：带 .pad（22px 内边距）→ 用负 margin 抵消 ---- */ .card.flush.pad > .table-scroll, .card.flush.pad > form > .table-scroll, .card.flush.pad > .table{margin-left:-22px;margin-right:-22px} /* 有滚动层：滚动层已被负 margin 撑到卡片全宽，表格占满它即可，切不可再叠加 calc(100% + 44px)（会溢出 43px，实测 gapRight = -43）。 `> form >` 分支：/admin/roles 的权限矩阵表格被
包住， 只写直接子选择器会漏掉它（实测该页 ml=0 完全未生效）。 */ .card.flush.pad > .table-scroll > .table, .card.flush.pad > form > .table-scroll > .table{width:100%;border-left:0;border-right:0; border-radius:0;box-shadow:none;margin-bottom:0} /* 无滚动层：表格自己负 margin 抵消卡片内边距，要把被抵消掉的宽度补回来 */ .card.flush.pad > .table{width:calc(100% + 44px);border-left:0;border-right:0; border-radius:0;box-shadow:none;margin-bottom:0} /* ---- 形态 B：不带 .pad → 卡片自身 padding:0，表格 width:100% 即通栏 ---- */ .card.flush:not(.pad){padding:0} .card.flush:not(.pad) > .table-scroll, .card.flush:not(.pad) > form > .table-scroll, .card.flush:not(.pad) > .table{margin-left:0;margin-right:0} .card.flush:not(.pad) > .table-scroll > .table, .card.flush:not(.pad) > form > .table-scroll > .table, .card.flush:not(.pad) > .table{width:100%;border-left:0;border-right:0;border-radius:0; box-shadow:none;margin-bottom:0} /* 通栏表格与卡片同宽后，表头左右两端的圆角也交给卡片 */ .card.flush > .table-scroll > .table:first-child thead tr:first-child th:first-child, .card.flush > .table thead tr:first-child th:first-child{border-top-left-radius:0} .card.flush > .table-scroll > .table:first-child thead tr:first-child th:last-child, .card.flush > .table thead tr:first-child th:last-child{border-top-right-radius:0} /* login */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px} .login-card{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-line);border-radius:28px;padding:34px;box-shadow:0 20px 60px rgba(124,108,255,.22);width:380px;max-width:100%;text-align:center} .login-card .mascot{font-size:64px} .login-card h2{font-size:22px;margin-top:6px} .login-card .sub{color:var(--ink-soft);margin-bottom:20px} /* flash */ .flash{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:8px} .flash .msg{padding:12px 22px;border-radius:14px;font-weight:800;box-shadow:var(--shadow);animation:pop .3s} .flash .success{background:#e7fbf1;color:#1d9e6a} .flash .error{background:#ffeaea;color:#d84545} .flash .warning{background:#fff4e0;color:#b3710a} .flash .info{background:#eef0ff;color:#5b4fe0} /* 别名：历史代码里用 'ok' / 'danger' 作分类（全项目 16 处），但此前没有对应样式， 会渲染成「无底色裸文本」浮在页面顶部（2026-09-23 在五健筛查入口页截图确认）。 补成与 success / error 同色即可，避免去改 16 处调用点。 */ .flash .ok{background:#e7fbf1;color:#1d9e6a} .flash .danger{background:#ffeaea;color:#d84545} @keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1}} .section-title{display:flex;align-items:center;gap:10px;margin:6px 0 14px} .section-title .si{font-size:22px} /* ============ 档案详情页（children/detail.html，2026-10-31 重做） ============ 旧版 .detail-card / .info-rows / .guardian-rows 已随模板一起下线： .guardian-rows 用 justify-content:space-between 撑满整列，把 6 行家长信息 拉成 40px 行距；两卡等高等距导致大面积留白。新版全部换成 cd-* 命名空间， 不复用旧类名（避免以后有人以为旧样式还在用）。 */ /* ⓪ 页签条（2026-10-31 详情页改页签式） 复用全站既有契约 .gtab / .gtab-h / .gtab-b / .gtab-p（与 screening/group.html 同源）， 这里只调本页的间距、字号与徽标配色。 ★ 打印时「隐藏面板也展开」由 .gtab-p.is-hide 的 @media print 规则负责，此处不重复声明 —— 重复声明容易在后续改动里先被删掉，导致 Ctrl+P 丢内容。 */ .cd-tabs{margin:-2px 0 4px} .cd-tabs .gtab-h{margin-bottom:16px} .cd-tabs .gtab-b{font-size:14.5px;padding:11px 15px} .cd-tabs .gtab-b:first-child{margin-left:-15px} /* 首字与卡片左边缘对齐，避免整体右移一格 */ .cd-tabs .gtab-b .n{font-size:11.5px;font-weight:800;line-height:1;padding:3px 7px;border-radius:999px; background:rgba(124,108,255,.12);color:var(--primary-d)} .cd-tabs .gtab-b.is-on .n{background:var(--primary);color:#fff} .cd-tabs .gtab-b .n-warn{background:#fff2d9;color:#b7791f} .cd-tabs .gtab-b.is-on .n-warn{background:#e08a1e;color:#fff} /* 健康宣教卡片内的表格（住在「健康宣教」页签里） 原表头写死内联 width:56px，但 .table 是 table-layout:auto —— 固定宽压不住内容： 「序号」被折成「序 / 号」两行、下发时间折成日期+时刻两行、操作列两个按钮上下叠， 整行虚高到 79px（8 行吃掉 640px）。改类名 + nowrap，让列宽按内容撑。 */ .edu-c-no{width:62px;white-space:nowrap} .edu-c-time{width:150px;white-space:nowrap} .edu-c-ops{width:148px;white-space:nowrap} .edu-ops{flex-wrap:nowrap} /* ① 身份条 */ .cd-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 22px;margin-bottom:14px} .cd-hero-id{display:flex;align-items:center;gap:16px;flex:1;min-width:280px} .cd-ava{flex:none;width:66px;height:66px;border-radius:20px;display:grid;place-items:center; font-size:34px;line-height:1; background:linear-gradient(150deg,#efeaff 0%,#e6f2ff 55%,#ffe9f4 100%); border:1px solid rgba(124,108,255,.20);box-shadow:0 8px 18px rgba(124,108,255,.14)} .cd-ident{min-width:0} .cd-name{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;line-height:1.3} .cd-name .cd-nm{font-size:22px;font-weight:900;letter-spacing:.4px} .cd-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;font-size:13px; font-weight:600;color:var(--ink-soft)} .cd-meta b{color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums} .cd-meta span+span{position:relative} .cd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .cd-tag{display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap; padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700; color:var(--primary-d);background:rgba(124,108,255,.09);border:1px solid rgba(124,108,255,.16)} .cd-tag .icv{opacity:.85} .cd-tag-mute{color:var(--ink-soft);background:rgba(122,122,150,.08);border-color:rgba(122,122,150,.16)} .cd-acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end} .cd-del-form{margin:0;padding:0;display:flex} .btn.cd-del{background:#fdecec;color:#d84545} .btn.cd-del:hover{background:#ffdede;box-shadow:0 8px 18px rgba(255,107,107,.22)} /* 小尺寸状态胶囊（表格与身份条共用；沿用全站 .pill 底色系） */ .pill.cd-pill{font-size:11.5px;padding:3px 10px;font-weight:800} .pill.cd-pill-ok{background:#e7fbf1;color:#1d9e6a} .pill.cd-pill-warn{background:#fff4e5;color:#d88410} .pill.cd-pill-pend{background:#fff9e6;color:#b89100} .pill.cd-pill-bad{background:#ffeaea;color:#d84545} .pill.cd-pill-mute{background:rgba(122,122,150,.10);color:var(--ink-soft)} /* ② 关键指标条 */ .cd-metrics{display:grid;gap:12px;margin-bottom:16px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr))} .cd-mt{position:relative;padding:12px 16px 13px;border-radius:18px;overflow:hidden; background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-sm)} .cd-mt-bar{position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:0 3px 3px 0} .cd-mt-k{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800; letter-spacing:.3px;color:var(--ink-soft)} .cd-mt-v{margin-top:5px;font-size:23px;font-weight:900;line-height:1.15;color:var(--ink); font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px} .cd-mt-u{margin-left:2px;font-size:12px;font-weight:700;color:var(--ink-soft)} .cd-mt-na{color:#c9c9d8;font-weight:800} .cd-mt-s{margin-top:3px;font-size:12px;font-weight:800} .cd-mt-s.ok{color:#1d9e6a} .cd-mt-s.warn{color:#d88410} .cd-mt-s.bad{color:#d84545} .cd-mt-s.info{color:#2b8fd0} .cd-mt-s.mute{color:#a6a6bb;font-weight:700} /* ③ 双栏字段卡 */ /* 双栏等高：默认 align-items:stretch（原先 start 会让右侧卡片随内容变矮，底边参差）。 卡片内部用 flex 列布局，字段区不拉伸（grid 行会被均分拉高 → 虚线间距忽大忽小）， 多出来的空间留作卡片底部留白。 */ .cd-cols{display:grid;gap:16px;grid-template-columns:1.15fr 1fr;align-items:stretch} .cd-cols>.cd-card{display:flex;flex-direction:column} .cd-cols>.cd-card>.cd-fields{flex:0 0 auto} .cd-card{padding:18px 22px} .cd-card .section-title{margin:0 0 6px} .cd-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px} .cd-f{min-width:0;padding:10px 0 9px;border-bottom:1px dashed var(--line)} .cd-f.full{grid-column:1 / -1} .cd-f-k{font-size:12px;font-weight:800;color:var(--ink-soft);letter-spacing:.2px; margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cd-f-v{font-size:14px;font-weight:800;color:var(--ink);line-height:1.45; overflow-wrap:anywhere} .cd-f-v a{color:var(--primary-d);font-weight:800} .cd-f-v a:hover{text-decoration:underline} .cd-f-sub{margin-left:6px;font-size:12px;font-weight:700;color:#d88410} .cd-f-none{color:#b9b9cc;font-weight:800} .cd-mono{font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace; font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:.2px} .cd-empty-lite{padding:16px 0 6px;color:var(--ink-soft);font-weight:700;font-size:13px} /* ④ 测评记录 */ .cd-list{margin-top:16px} .cd-tool{margin-bottom:12px;gap:12px;align-items:center} .cd-tool .section-title{margin:0} .cd-count{display:inline-flex;align-items:center;justify-content:center;min-width:26px; height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:900; color:var(--primary-d);background:rgba(124,108,255,.12)} .cd-filter{display:flex;align-items:center;gap:8px;flex-wrap:nowrap} /* ★ flex 子项默认 flex-shrink:1：筛选行窄一点就把「筛选 / 重置」压成逐字竖排 （实测 1440 视口出现「筛\n选」「重\n置」）。按钮必须 flex:none + nowrap。 */ .cd-filter .btn{flex:none;white-space:nowrap} .cd-sel{appearance:none;-webkit-appearance:none;padding:6px 26px 6px 10px;border-radius:10px; border:1px solid var(--line);background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a7a96' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center; font-size:13px;font-weight:700;color:var(--ink);min-width:118px;cursor:pointer} .cd-sel:focus{outline:none;border-color:rgba(124,108,255,.45); box-shadow:0 0 0 3px rgba(124,108,255,.13)} .cd-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:7px 12px;margin-bottom:10px;border-radius:12px; background:rgba(124,108,255,.055);border:1px dashed rgba(124,108,255,.22); font-size:12.5px;font-weight:700} .cd-bulk .muted{font-weight:700} .cd-bulk #cdSelN{color:var(--primary-d);font-weight:900} .btn.cd-bulk-del{background:#fff;color:#d84545;border:1px solid rgba(216,69,69,.35); padding:4px 11px;font-size:12.5px} .btn.cd-bulk-del:hover{background:#fdecec;box-shadow:0 6px 14px rgba(255,107,107,.18)} .cd-table th,.cd-table td{padding:10px 12px} .cd-table .cd-c-chk{width:42px;text-align:center;padding-left:14px;padding-right:0} .cd-table .cd-c-chk input{width:15px;height:15px;cursor:pointer;accent-color:var(--primary)} .cd-table .cd-c-ops{text-align:right;white-space:nowrap;width:1%} .cd-table th{font-size:12.5px;letter-spacing:.3px;white-space:nowrap} .cd-src{padding:2px 8px;border-radius:8px;background:rgba(122,122,150,.09); font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap} /* 操作列：必须包一层 flex 容器。inline-flex 直接放进 td 会按基线对齐， 单元格底部多出 descender 空隙（实测行高 51px 而按钮只有 28px）。 */ .cd-ops{display:flex;align-items:center;justify-content:flex-end;gap:1px;white-space:nowrap} /* 图标 + 文字的小胶囊，删除做成纯图标（确认框仍会把话说全） */ .cd-ops .cd-op{display:inline-flex;align-items:center;gap:4px;flex:none; padding:4px 8px;border-radius:9px;border:1px solid transparent;background:none; font-size:12.5px;font-weight:800;line-height:1.35;color:var(--primary-d);cursor:pointer; transition:background .14s ease,color .14s ease} .cd-ops .cd-op:hover{background:rgba(124,108,255,.10)} .cd-op-go{color:#1d9e6a} .cd-op-go:hover{background:rgba(29,158,106,.10)} .cd-op-form{display:flex;align-items:center;margin:0;padding:0;flex:none} .cd-ops .cd-op-x{color:#b9b9cc;padding:4px 6px} .cd-ops .cd-op-x:hover{background:#fdecec;color:#d84545} /* 窄屏收敛：表格里「来源 / 填写人」属次要信息，先让位，避免操作列被挤换行 */ @media (max-width:1240px){ .cd-table .cd-c-src,.cd-table .cd-c-rater{display:none} } @media (max-width:1000px){ .cd-table .cd-c-age{display:none} } .cd-empty{padding:26px 12px 30px;text-align:center;color:var(--ink-soft)} .cd-empty .icv{color:#cdc9ea} .cd-empty-t{margin-top:8px;font-size:15px;font-weight:900;color:var(--ink)} .cd-empty-s{margin:4px auto 14px;max-width:460px;font-size:13px;font-weight:600;line-height:1.6} .cd-empty-s a{font-weight:800} @media (max-width:1180px){ .cd-cols{grid-template-columns:1fr} /* 指标条：≤1180 收成 2×2。四块挤在 ~800px 内容区时每块仅 171px， 「0.496 · 中心性肥胖」会被拆成「中心性肥 / 胖」（实测 1024 视口）。 */ .cd-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ .cd-fields{grid-template-columns:1fr} .cd-metrics{grid-template-columns:1fr} .cd-hero{padding:16px} .cd-acts{width:100%;justify-content:flex-start} .cd-filter{flex-wrap:wrap} .cd-sel{min-width:100px} .cd-mono{font-size:12.5px} } /* hospital management two-column layout */ @media (max-width:920px){ .hospital-layout{grid-template-columns:1fr !important} } /* mobile */ @media (max-width:860px){ .sidebar{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:.25s;box-shadow:var(--shadow)} .sidebar.open{transform:translateX(0)} .hamburger{display:block} .content{padding:16px} .topbar h1{font-size:20px} .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .opts .opt{min-width:60px;font-size:13px;padding:9px 4px} .stat{min-width:120px} } .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:40} .overlay.show{display:block} /* 密码查看切换 */ .pw-wrap{position:relative;display:block} .pw-wrap input{padding-right:40px} .pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:6px;color:#8a8fb0;border-radius:8px;z-index:2} .pw-toggle:hover{background:var(--primary-soft);color:var(--primary-d)} /* 顶部医院徽章 */ .hosp-badge{display:flex;align-items:center;gap:9px; background:linear-gradient(135deg,var(--primary-soft) 0%,rgba(63,214,240,.12) 100%); border:1px solid rgba(124,108,255,.28);border-radius:16px;padding:6px 14px 6px 10px; box-shadow:0 2px 12px rgba(124,108,255,.12);position:relative;overflow:hidden} .hosp-badge::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60px 30px at 90% -10%,rgba(124,108,255,.18),transparent)} .hosp-badge .hosp-ico{width:34px;height:34px;flex:none;border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--vision)); display:flex;align-items:center;justify-content:center;font-size:17px; box-shadow:0 4px 10px rgba(124,108,255,.35)} .hosp-badge .hosp-name{font-weight:800;font-size:13px;color:var(--primary-d);line-height:1.5;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hosp-badge .hosp-code{font-size:10px;color:#8a8fb0;font-weight:600;letter-spacing:.3px;margin-top:3px} /* 窄屏优先保证右上角账户操作贴边：机构徽章提前收起（原 720px 收起会导致顶栏换行、按钮掉行）。 阈值 1400：≥1401 时一行可容纳「标题 + 机构徽章 + 用户 + 两个操作按钮」实测约 1097px； 1366 及以下收起徽章，保证最长的页面标题（园所/班级五健筛查汇总表）不被省略号截断。 */ @media (max-width:1400px){.hosp-badge{display:none}} /* 小屏（手机）：用户信息只留头像，保证两个账户操作按钮仍贴在右上角同一行 */ @media (max-width:600px){ .topbar > .row{flex:1 1 140px} .userchip{padding:6px 10px} .userchip > .uinfo{display:none} } /* 右上角账户操作（修改密码 / 退出登录） */ .top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .top-act{display:inline-flex;align-items:center;gap:6px;white-space:nowrap; background:var(--glass);border:1px solid var(--glass-line);border-radius:999px; padding:8px 14px;font-weight:700;font-size:13px;color:var(--primary-d); box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,background .15s,border-color .15s} .top-act .ic{font-size:15px;line-height:1} .top-act:hover{transform:translateY(-2px);background:var(--primary-soft);color:var(--primary-d); box-shadow:0 8px 18px rgba(124,108,255,.22)} .top-act:active{transform:translateY(0)} .top-act.on{background:var(--primary-soft);border-color:rgba(124,108,255,.38)} .top-act.danger{color:#d94444} .top-act.danger:hover{background:#ffeaea;border-color:rgba(255,107,107,.38); box-shadow:0 8px 18px rgba(255,107,107,.20);color:#d94444} @media (max-width:1180px){ .top-act .tx{display:none} .top-act{padding:8px 11px} } /* 右上角用户菜单（2026-10-11）：用户名徽章改为下拉触发器， 「修改密码 / 退出登录」默认收起，点击用户名才展开。 - .userchip 由 div 改为 button（去掉浏览器默认 button 样式，视觉与原来一致）； - 下拉面板绝对定位在徽章下方右对齐，按钮的 .top-act 保留原图标/配色， 仅把胶囊外形改为整行菜单项（悬停仍高亮，不位移）。 */ .user-menu{position:relative;z-index:60} button.userchip{font:inherit;color:inherit;cursor:pointer;transition:box-shadow .15s,border-color .15s} button.userchip:hover{border-color:rgba(124,108,255,.38);box-shadow:0 6px 18px rgba(124,108,255,.20)} button.userchip:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .ucaret{width:0;height:0;flex:none;margin-left:3px; border-left:4.5px solid transparent;border-right:4.5px solid transparent; border-top:5.5px solid #868aa8;transition:transform .18s} .user-menu.open .ucaret{transform:rotate(180deg)} .user-menu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:174px; display:none;flex-direction:column;gap:4px;padding:7px; background:#fff;border:1px solid var(--glass-line);border-radius:16px; box-shadow:0 14px 34px rgba(60,60,110,.16);z-index:60} .user-menu.open .user-menu-pop{display:flex} .user-menu-pop .top-act{display:flex;width:100%;justify-content:flex-start;gap:9px; background:transparent;border:none;border-radius:11px;padding:10px 12px; font-size:13.5px;box-shadow:none;transform:none;color:var(--ink)} .user-menu-pop .top-act:hover{transform:none;background:var(--primary-soft);color:var(--primary-d);box-shadow:none} .user-menu-pop .top-act.on{background:var(--primary-soft);color:var(--primary-d)} .user-menu-pop .top-act.danger{color:#d94444} .user-menu-pop .top-act.danger:hover{background:#ffeaea;color:#d94444;box-shadow:none} /* 窄屏原会把 .top-act 文字隐藏（换行免挤），菜单里的文字必须保留 */ .user-menu-pop .top-act .tx{display:inline} /* 手机端：用户名徽章只留头像，箭头保留（提示可点开） */ @media (max-width:600px){ .user-menu-pop{min-width:156px} } /* ===== 测评 · 对话式向导 ===== */ .wz-bar{display:flex;align-items:center;gap:12px;margin:0 0 14px} .chat-box{background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,246,255,.88));border-radius:var(--radius); padding:30px 22px 16px;box-shadow:var(--shadow); height:210px;min-height:210px;overflow-y:auto; display:flex;flex-direction:column;gap:14px} .chat-row{display:flex;gap:12px;align-items:flex-start} .chat-row.doc{animation:chatIn .32s ease} .chat-row.user{justify-content:flex-end;animation:chatIn .28s ease} .chat-avatar{width:44px;height:44px;flex:none;border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--vision)); display:flex;align-items:center;justify-content:center;font-size:22px; box-shadow:0 4px 12px rgba(124,108,255,.28)} .chat-row.user .chat-avatar{background:linear-gradient(135deg,var(--nutri),#2aa573)} .chat-bubble{max-width:82%;background:rgba(255,255,255,.92);border-radius:4px 18px 18px 18px; padding:14px 18px;box-shadow:var(--shadow-sm);border:1px solid #f0eefc} .chat-bubble.user{background:linear-gradient(135deg,var(--primary-soft),#eafcff); border-radius:18px 4px 18px 18px;font-weight:800;color:var(--primary-d)} .chat-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px} .q-dim{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800; background:var(--primary-soft);color:var(--primary-d);padding:3px 10px;border-radius:999px} .q-code{font-size:11px;color:#a3a6c6;font-weight:700} .chat-q{font-size:17px;font-weight:800;line-height:1.7;color:var(--ink)} .opts.big{margin-top:16px} .opts.big .opt{min-width:96px;padding:16px 10px;font-size:16px;border-radius:16px} .opts.big .opt:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .wz-nav{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:10px} .rev-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.9);border-radius:var(--radius-sm); padding:11px 14px;margin-bottom:8px;box-shadow:var(--shadow-sm);cursor:pointer; transition:opacity .35s ease, transform .12s, border-color .12s; opacity:0;pointer-events:none} .rev-row.rev-in{opacity:1} .rev-row.ready{pointer-events:auto} .rev-row:hover{border-color:var(--primary);transform:translateX(3px)} .rev-no{width:28px;height:28px;flex:none;border-radius:50%; background:var(--primary-soft);color:var(--primary-d);font-weight:900;font-size:12px; display:flex;align-items:center;justify-content:center} .rev-q{flex:1;font-size:14px;font-weight:700;color:var(--ink);display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rev-a{flex:none;font-size:13px;font-weight:900;color:var(--nutri); background:#e9faf2;padding:4px 12px;border-radius:999px} .rev-a.none{color:var(--red);background:#ffecec} @keyframes chatIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (max-width:720px){ .chat-bubble{max-width:90%} .opts.big .opt{min-width:72px;padding:13px 6px;font-size:14px} } /* ===== 测评向导 · 增强 ===== */ .wz-bar{justify-content:space-between;flex-wrap:wrap} .wz-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .dim-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px} .dim-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px; background:#fff;border:2px solid var(--line);font-size:12px;font-weight:800;color:var(--ink-soft); cursor:pointer;transition:.12s;user-select:none} .dim-chip:hover{border-color:var(--primary);transform:translateY(-1px)} .dim-chip.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-d)} .dim-chip .dc-cnt{font-size:10px;opacity:.75;font-weight:700} .dim-chip .dc-cnt.dc-done{color:var(--nutri)} #toast.err{background:var(--red)} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none} #reviewJump{margin:0 0 10px} /* ===== 侧边栏「系统设置」折叠分组（2026-09-23）===== 原一级导航的 8 个配置类入口收进此分组，侧边栏不再流水线式堆长。 展开时若超出视口高度，由 .nav 自身滚动，不撑破 sticky 侧栏。 */ .nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:thin} .nav::-webkit-scrollbar{width:6px} .nav::-webkit-scrollbar-thumb{background:rgba(124,108,255,.20);border-radius:3px} .nav::-webkit-scrollbar-track{background:transparent} .nav-group{position:relative} .nav-group > a{padding-right:48px} .nav-caret{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px; padding:0;border:none;background:transparent;cursor:pointer;border-radius:10px; color:var(--ink-soft);font-size:13px;line-height:1;display:flex;align-items:center; justify-content:center;transition:.15s} .nav-caret:hover{background:var(--primary-soft);color:var(--primary-d)} .nav-group.open > a{background:var(--primary-soft);color:var(--primary-d)} .nav-group.open .nav-caret{transform:translateY(-50%) rotate(180deg);color:var(--primary-d)} .nav-sub{display:none;flex-direction:column;gap:2px;margin:3px 0 3px 10px;padding-left:9px; border-left:2px solid var(--primary-soft)} .nav-sub.open{display:flex} .nav-sub a{padding:9px 12px;font-size:13.5px;border-radius:12px} .nav-sub a .ic{font-size:15px;width:20px} @media (max-width:900px){.nav-sub a{padding:11px 12px;font-size:14px}} /* ===== 侧边栏分组标题（2026-10-30 导航分类改造）===== 纯视觉分隔：不可点、不折叠。左侧小字标签 + 右侧渐隐细线，与 .nav-group 的折叠箭头区分开。 首组（档案管理）顶部留白略小，避免与上方「统算仪表盘」拉开过大空隙。 */ .nav-sec{display:flex;align-items:center;gap:9px;padding:15px 14px 7px; font-size:11px;font-weight:900;color:#9aa1b8;letter-spacing:.06em;line-height:1; white-space:nowrap;user-select:none} .nav-sec::before{content:"";width:3px;height:10px;border-radius:2px;flex:none; background:linear-gradient(180deg,var(--primary),var(--primary-d));opacity:.55} .nav-sec::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,rgba(124,108,255,.22),rgba(124,108,255,0))} .nav > .nav-sec:first-of-type{padding-top:8px} @media (max-width:900px){.nav-sec{padding:16px 14px 8px;font-size:11.5px}} /* ===== 侧边栏手风琴分组（2026-10-30）===== 每组 .nav-acc = 可点标题 .nav-acc-head + 内容 .nav-acc-body。 · 折叠规则只在 html.js 下生效：脚本被禁用/加载失败时全部展开，入口不会变成不可达。 · 5 组一律可折叠（2026-10-30 二次调整后「档案管理」也并入手风琴，不再有常展开组）。 · 视觉沿用原 .nav-sec：左侧紫竖条 + 小字标题 + 右侧渐隐细线，箭头在线条右侧。 */ .nav-acc{display:block} .nav-acc-head{display:flex;align-items:center;gap:9px;width:100%;margin:0; padding:14px 8px 6px 14px;background:none;border:0;font:inherit; font-size:11px;font-weight:900;color:#9aa1b8;letter-spacing:.06em;line-height:1; white-space:nowrap;text-align:left;cursor:pointer;transition:color .15s} .nav-acc-head::before{content:"";width:3px;height:10px;border-radius:2px;flex:none; background:linear-gradient(180deg,var(--primary),var(--primary-d));opacity:.55;transition:opacity .15s} .nav-acc-head .nav-sec-t{flex:none} .nav-acc-head .line{flex:1;height:1px;min-width:8px; background:linear-gradient(90deg,rgba(124,108,255,.22),rgba(124,108,255,0))} .nav-acc-head .acc-ar{flex:none;font-size:11px;opacity:.7;transform:rotate(-90deg); transition:transform .2s,opacity .15s} /* 可点提示：整行淡底 + 文字变主色（常展开组除外，见下） */ .nav-acc-head:hover{color:var(--primary-d);background:rgba(124,108,255,.07);border-radius:12px} .nav-acc-head:hover::before{opacity:1} .nav-acc-head:hover .acc-ar{opacity:.9} .nav-acc.open > .nav-acc-head{color:var(--primary-d)} .nav-acc.open > .nav-acc-head::before{opacity:1} /* 展开态箭头朝下 ▾，收起态朝右 ▸（默认 -90°） */ .nav-acc.open > .nav-acc-head .acc-ar{transform:rotate(0)} /* .always（历史兼容：当前无分组使用；保留规则以防回退）标题静态、不响应悬停变色 */ .nav-acc.always > .nav-acc-head{cursor:default} .nav-acc.always > .nav-acc-head:hover{color:#9aa1b8;background:none} .nav-acc.always > .nav-acc-head:hover::before{opacity:.55} .nav-acc-body{display:block} /* 首组顶部留白略小，避免与上方「统算仪表盘」拉开过大空隙 */ .nav > .nav-acc:first-of-type > .nav-acc-head{padding-top:10px} /* ★ 关键：只折叠「非 .always」的组，且只在启用 JS 时折叠 */ html.js .nav-acc:not(.always):not(.open) > .nav-acc-body{display:none} /* 无 JS 时全部展开、折叠不可用 → 隐藏箭头并禁止点击，避免“点了没反应” */ html:not(.js) .nav-acc-head{cursor:default;pointer-events:none} html:not(.js) .nav-acc-head .acc-ar{display:none} @media (max-width:900px){.nav-acc-head{padding:16px 8px 8px 14px;font-size:11.5px}} /* ===== 导航栏视觉升级（2026-10-30）===== 目标：让「分组标题」与「功能入口」一眼分得开，并统一入口的图标底片 / 字号 / 间距。 分层逻辑（不靠颜色猜，靠结构特征辨认）： · 分组标题 —— 无图标、小字疏排、前置短竖条、右侧渐隐细线、可折叠组另有 chevron，像章节眉标； · 功能入口 —— 一律带方形图标底片 + 整项胶囊，组内再整体内缩并挂一条竖向引导线，形成归属。 全部为视觉覆盖：不改 DOM、不改权限判定与端点，只调字号 / 间距 / 圆角 / 配色。 */ /* 品牌区与导航区之间加一道细分隔，视觉上分出「标识」与「菜单」两块 */ .sidebar .brand{padding:4px 10px 14px;margin-bottom:8px; border-bottom:1px solid rgba(124,108,255,.10)} /* —— 功能入口：统一字号、字重、圆角；图标加柔和底片 —— */ .nav a{padding:9px 11px;border-radius:12px;font-size:14px;font-weight:700; letter-spacing:.01em;color:#666d8a;gap:9px} .nav a .ic{width:28px;height:28px;border-radius:9px;flex:none; display:inline-flex;align-items:center;justify-content:center; font-size:16px;color:#8b86b8;background:rgba(124,108,255,.08); transition:background .16s,color .16s} .nav a:hover .ic{background:rgba(124,108,255,.16);color:var(--primary-d)} .nav a.active .ic{background:rgba(255,255,255,.20);color:#fff} .nav a.active{box-shadow:0 6px 16px rgba(92,79,224,.26)} /* 组内相邻项之间留 2px，悬停底色不会连成一片 */ .nav-acc-body .nav a + a{margin-top:2px} /* 2026-10-30 按需求：分组内展开的入口字号整体收小一档（14 → 13px）， 图标底片 28 → 25px、内边距 9/11 → 8/10，条目更紧凑；顶部「统算仪表盘」不在此列，保持原尺寸。 */ .nav-acc-body > a{padding:8px 10px;border-radius:11px;font-size:13px;gap:8px} .nav-acc-body > a .ic{width:25px;height:25px;border-radius:8px;font-size:14.5px} /* —— 组内容区：整体内缩 + 左侧竖向引导线，明确「这些项属于上一个分组标题」 —— */ .nav-acc-body{margin:5px 0 8px 12px;padding-left:7px; border-left:1.5px solid rgba(124,108,255,.18)} /* —— 分组标题：更像章节眉标（更大上下留白、更深的字、更实的竖条、箭头换 chevron） —— */ .nav-acc-head{padding:19px 8px 8px 10px;font-size:11.5px;font-weight:800; letter-spacing:.09em;color:#767d99} /* 悬停 / 展开统一 10px 圆角淡紫底，收起时保持纯文字，三态不至于跳变 */ .nav-acc-head:hover{background:rgba(124,108,255,.09);border-radius:10px} .nav-acc-head::before{width:3px;height:11px;border-radius:2px;opacity:.9; background:linear-gradient(180deg,var(--primary),rgba(124,108,255,.45))} .nav-acc-head .line{background:linear-gradient(90deg,rgba(124,108,255,.26),rgba(124,108,255,.02))} /* chevron：收起 ›，展开 ˅（用两条边框画，比 ▾ 字符更细更稳） */ .nav-acc-head .acc-ar{width:18px;height:18px;font-size:0;border-radius:6px; display:inline-flex;align-items:center;justify-content:center; color:#b6bad0;opacity:1;transform:none;transition:color .15s,background .15s} .nav-acc-head .acc-ar::before{content:"";width:6px;height:6px;border-radius:1px; border-top:1.7px solid currentColor;border-right:1.7px solid currentColor; transform:rotate(45deg);transition:transform .2s;margin-right:2px} .nav-acc.open > .nav-acc-head .acc-ar::before{transform:rotate(135deg);margin:2px 0 0 0} .nav-acc-head:hover .acc-ar{color:var(--primary-d);background:rgba(124,108,255,.12)} .nav-acc.open > .nav-acc-head .acc-ar{color:var(--primary-d)} /* 当前所在分组（展开态）标题加一层淡紫底，进一步与「收起的分组」区分开， 也让用户一眼知道「我现在在哪个分类里」。5 组一致（含档案管理）。 */ html.js .nav-acc.open:not(.always) > .nav-acc-head{background:rgba(124,108,255,.07);border-radius:10px} /* 首组（档案管理）顶部留白与其它组一致 */ .nav > .nav-acc:first-of-type > .nav-acc-head{padding-top:13px} /* 顶部「统算仪表盘」是唯一不归组的顶层入口，与下方分组之间留出间隔 */ .nav > a{margin-bottom:2px} @media (max-width:900px){ .nav a{font-size:14.5px;padding:10px 11px} /* 手机抽屉：组内入口仍比顶层略小一档，且不低于 13.6px 保证可读 */ .nav-acc-body > a{font-size:13.6px;padding:9px 10px} .nav-acc-head{padding:19px 8px 8px 10px;font-size:12px} } /* ===== 系统设置总览页（/admin/settings）===== */ .set-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; background:linear-gradient(135deg,#f4f1ff,#eef6ff);border:1px solid var(--glass-line); border-radius:var(--radius);padding:18px 22px;margin-bottom:14px} .set-h1{font-size:20px;font-weight:900;color:var(--primary-d)} .set-sub{font-size:13px;color:var(--ink-soft);margin-top:4px} .set-id{display:flex;gap:8px;flex-wrap:wrap} .set-id span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 13px; font-size:12.5px;font-weight:700;color:var(--ink-soft)} .set-note{display:flex;gap:10px;align-items:flex-start;background:#fffdf3;border:1px solid #ffe9b8; border-radius:16px;padding:13px 16px;font-size:12.5px;color:#8a7a45;line-height:1.65} .set-sec{margin-bottom:20px} .set-sh{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);margin:0 0 10px} .set-sh .bar{width:4px;height:15px;border-radius:2px; background:linear-gradient(180deg,var(--primary),var(--primary-d))} /* 固定列数（不用 auto-fit）：auto-fit 会让「只有 1~2 张卡」的分组被撑满整行， 导致同页不同分组卡片宽度在 289 / 591 / 1196 之间跳变、高度也不齐。 */ /* 2026-10-31 按需求改为每行 4 张（原 3 张）： ≥1320 视口 4 列 → 卡宽约 270~300px（.set-d 描述折 3 行，卡高自适应不裁字）； 1320 以下逐级降 3 / 2 / 1 列，避免窄屏把标题和箭头挤成竖排。 */ .set-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media (max-width:1319px){.set-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:1099px){.set-grid{grid-template-columns:repeat(2,1fr)}} /* 4 列时单卡更窄：图标与内边距略收，描述字号 12.5→12，保证 1440 下不出现「一行只剩两个字」 */ @media (min-width:1320px){ .set-card{padding:14px 14px;gap:11px} .set-ic{width:40px;height:40px;border-radius:12px} .set-d{font-size:12px} } .set-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;background:#fff; border:1px solid #eef0f7;border-radius:18px;padding:15px 16px; box-shadow:0 4px 16px rgba(120,110,200,.09); transition:transform .15s,box-shadow .15s,border-color .15s} .set-card:hover{transform:translateY(-3px);border-color:var(--c); box-shadow:0 12px 26px rgba(124,108,255,.20)} .set-card::after{content:"";position:absolute;right:-24px;bottom:-24px;width:88px;height:88px; border-radius:50%;background:var(--c);opacity:.09} .set-ic{width:44px;height:44px;flex:none;border-radius:14px;display:flex;align-items:center; justify-content:center;font-size:20px; background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.45),transparent 62%),var(--c); box-shadow:0 6px 14px rgba(90,80,170,.18)} .set-bd{min-width:0;flex:1} .set-t{font-weight:800;font-size:15px;color:var(--ink);display:flex;align-items:center; gap:8px;flex-wrap:wrap} .set-b{font-size:11px;font-weight:800;color:#6b6b8c;background:#f2f3fa;border-radius:999px;padding:2px 9px} .set-d{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.5} .set-go{flex:none;color:#c8cadf;font-weight:900;font-size:16px;transition:.15s} .set-card:hover .set-go{color:var(--primary);transform:translateX(3px)} @media (max-width:720px){ .set-hero{padding:15px 16px} .set-grid{grid-template-columns:1fr} .set-card{padding:13px 14px} } /* ===== 系统设置 · 功能模块开关（2026-10-30）===== 用途：控制左侧导航里「公众号菜单」「HIS 对接」「数据归集」三个入口是否显示。 交互用原生 checkbox + CSS 画的开关，不引第三方库；label 包住整行，点哪都能切换。 */ .feat-card{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius); padding:16px 18px} .feat-hint{display:flex;gap:9px;font-size:12.5px;color:var(--ink-soft);line-height:1.55; background:#f7f4ff;border:1px solid rgba(124,108,255,.16);border-radius:12px; padding:10px 12px;margin-bottom:12px} .feat-hint .hi{flex:none;font-size:15px;line-height:1.3} .feat-list{display:flex;flex-direction:column;gap:8px} /* 宽屏三列一行（2026-10-30 改）：三个入口正好排满一行，不再出现「第三个掉到第二行」； 单列/两列时开关会被推到行尾、与文字空出几百像素。grid 行内 stretch 保证三张卡等高， 卡内的开关按 center 垂直居中 → 三卡开关 y 恒定一致，不受描述是否折行影响。 */ @media (min-width:900px){ .feat-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} /* 描述统一占两行高度（2×18px 行高）：否则「HIS 对接」描述只一行 → 该卡内容整体下移。 但行数会随列宽变（960px 下各列折 2~3 行互不相同），仅靠 min-height 兜不住 → 三列模式一律顶部对齐（align-items:flex-start），标题永远齐平，不再随描述行数浮动。 开关 26px 高、标题行高约 20px，顶对齐后中心比标题中心低 3px → 上提 3px 对齐视觉中心。 */ /* 必须带 .feat-list 前缀：本条写在 .feat-row 定义之前，同特异性会被后面的 align-items:center 覆盖 （实测首版就踩了这个：媒体查询里写 .feat-row{align-items:flex-start} 完全没生效）。 */ .feat-list .feat-row{align-items:flex-start} .feat-list .feat-d{min-height:36px} .feat-list .sw{margin-top:-3px} } .feat-row{display:flex;align-items:center;gap:14px;margin:0;padding:12px 14px; background:#fff;border:1px solid var(--line);border-radius:14px;cursor:pointer; font-weight:400;transition:border-color .15s,box-shadow .15s} .feat-row:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)} .feat-tb{flex:1;min-width:0} .feat-t{font-size:14px;font-weight:800;color:var(--ink)} .feat-d{font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.5} /* 开关本体：46×26 胶囊，勾选后滑块右移并渐变为主色 */ .sw{position:relative;flex:none;width:46px;height:26px;display:inline-block} .sw input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;border:0} .sw i{position:absolute;inset:0;border-radius:999px;background:#dcdfea;transition:.18s} .sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .18s} .sw input:checked + i{background:linear-gradient(135deg,var(--primary),var(--primary-d))} .sw input:checked + i::after{transform:translateX(20px)} .sw input:focus-visible + i{box-shadow:0 0 0 4px var(--primary-soft)} .feat-foot{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap} .feat-tip{font-size:12px;color:var(--ink-soft)} /* 平台账号无法在此改（开关按租户存），给一条说明即可 */ .feat-ro{font-size:12.5px;color:var(--ink-soft);line-height:1.6} @media (max-width:720px){ .feat-card{padding:14px} .feat-row{padding:11px 12px} } /* ===== 横向铺满：单卡片表单页（2026-09-23）===== 原写法是每页各自 inline `max-width:460~760px`，宽屏下卡片只占左边一条、右侧全空。 现在统一用 .form-wide： - 卡片本身铺满整行（width:100%，并显式 max-width:none 覆盖历史 inline 值）； - ≥1100px 时字段**固定两列**。只让 `.field` 参与多列，其余直接子节点 （.row / 裸 label + input / 表格 / 按钮组 / 宏输出）一律 grid-column:1/-1 整行， 因此「字段规整型」「裸 label 型」「纯 .row 型」三种结构都不会错位。 - 这里刻意用固定 2 列而不是 repeat(auto-fill,minmax(300px,1fr))： auto-fill 在 1920 屏会生成 4 列，而表单字段数常常是奇数/非 4 的倍数， 第一行只填 2 个字段 → 右侧空掉两列，看着像「还是没铺满」。 固定 2 列时每列约 800px（1920）/ 525px（1366），首行正好填满，观感最饱满。 - 不这么做而只是解除 max-width，输入框会被拉成 1900px 宽，是反向优化。 */ .form-wide{width:100%;max-width:none} @media (min-width:1100px){ /* 两种页面结构都要覆盖： a) → 容器本身就是 form（如 user_form） b)
… → 容器外面还套了一层 form （hospital_form / tenants/form / config / database / dept_form 都是这种） 只写 `.form-wide` 时，b) 的唯一直接子元素是 ，网格只有 1 项， 字段仍然单列堆叠 —— 卡片宽了、字段却全挤在左半边，是「假铺满」。 2026-09-23 实测：9 个表单页里只有 1 个真正多列，就是漏了这一层。 */ .form-wide, .form-wide > form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px;align-items:start} .form-wide > :not(.field), .form-wide > form > :not(.field){grid-column:1/-1} } /* ===== 健康宣教组件（2026-10-11）===== 背景：全局 `input,select,textarea{width:100%}`（本文件第 36 行）是为「表单控件」 写的，但复选框与「工具栏里的紧凑下拉/搜索框」被它一并撑满容器： 实测下发页 `.edu-pick` 内的复选框被撑到 326px，把同排的文字列挤成 0 宽 —— 文字逐字竖排、整页布局崩坏。此处按用途分档修正，只作用于 .edu-* 组件， 不影响站内既有表单（既有页面靠 td 宽度或 max-width 自行兜住）。 同时把宣教组件样式集中到本文件（单一来源），模板里不再各写一份