/* ══════════ Sonova 风格后台系统样式 ══════════ */
:root{
  --brand:#00A9E0;          /* Sonova 青蓝 */
  --brand-600:#0093C4;
  --brand-050:#E6F7FC;
  --brand-100:#CDEEF8;
  --navy:#12233F;
  --ink:#1F2D3D;
  --muted:#6B7A90;
  --line:#E4E9F0;
  --line-2:#D5DDE6;
  --bg:#F5F7FA;
  --panel:#FFFFFF;
  --ok:#2FA84F;
  --ok-bg:#EAF7EE;
  --warn:#F0A32B;
  --danger:#D0021B;
  --danger-bg:#FDEDEE;
  --r:#D0021B;              /* 右耳 */
  --l:#1B4FD8;              /* 左耳 */
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.05);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand-600);text-decoration:none;}
h1,h2,h3,h4{margin:0;color:var(--navy);letter-spacing:.01em;}

/* ── 布局 ── */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:236px;flex:0 0 236px;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{padding:20px 20px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;}
.brand-logo{height:32px;width:auto;max-width:175px;display:block;}
.brand .txt b{display:block;font-size:19px;font-weight:800;color:var(--brand-600);letter-spacing:-.02em;line-height:1.1;}
.brand .txt span{display:block;font-size:11px;color:var(--muted);letter-spacing:.12em;font-weight:700;}

.nav{padding:6px 12px;flex:1;overflow-y:auto;}
.nav .grp{font-size:11px;color:#9AA7B8;font-weight:700;letter-spacing:.08em;padding:14px 10px 6px;}
.nav a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;
  color:#3D4B5C;font-size:13.5px;font-weight:600;margin-bottom:2px;position:relative;
}
.nav a svg{width:17px;height:17px;flex:0 0 auto;opacity:.75;}
.nav a:hover{background:#F3F6FA;color:var(--navy);}
.nav a.active{background:var(--brand-050);color:var(--brand-600);}
.nav a.active svg{opacity:1;}
.nav a.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;background:var(--brand);border-radius:0 3px 3px 0;}
/* 共享菜单：鉴权前隐藏，鉴权后按权限放行，避免越权菜单闪现 */
.nav a.nav-pending{display:none !important;}
.nav a.nav-pending.nav-visible{display:flex !important;}
.side-foot{padding:12px 18px;border-top:1px solid var(--line);font-size:11px;color:#9AA7B8;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  height:58px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:20;
}
.topbar .title{font-size:15px;font-weight:700;color:var(--navy);}
.topbar .crumb{font-size:12px;color:var(--muted);}
.topbar .sp{flex:1;}

.userchip{position:relative;display:flex;align-items:center;gap:9px;cursor:pointer;padding:5px 9px;border-radius:8px;}
.userchip:hover{background:#F3F6FA;}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-050);color:var(--brand-600);
  display:grid;place-items:center;font-weight:800;font-size:12.5px;border:1px solid var(--brand-100);}
.userchip .who{line-height:1.25;}
.userchip .who b{display:block;font-size:12.5px;color:var(--navy);}
.userchip .who span{display:block;font-size:11px;color:var(--muted);}
.dropdown{
  position:absolute;right:0;top:46px;min-width:170px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 28px rgba(16,24,40,.12);padding:6px;display:none;z-index:40;
}
.dropdown.show{display:block;}
.dropdown button{
  width:100%;text-align:left;border:none;background:none;font:inherit;font-size:13px;color:#3D4B5C;
  padding:8px 10px;border-radius:7px;cursor:pointer;
}
.dropdown button:hover{background:#F3F6FA;color:var(--navy);}

.content{padding:20px 22px 40px;}

/* ── 页头 ── */
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.page-head h1{font-size:20px;}
.page-head p{margin:4px 0 0;font-size:12.5px;color:var(--muted);}
.page-head .sp{flex:1;}
.page-actions{display:flex;gap:8px;}

/* ── 卡片 / 网格 ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.card + .card{margin-top:16px;}
.card-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);}
.card-head h2{font-size:14.5px;}
.card-head .sub{font-size:11.5px;color:var(--muted);}
.card-head .sp{flex:1;}
.card-body{padding:16px;}
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);}
@media (max-width:1180px){.grid-2{grid-template-columns:1fr;}}

/* ── 表单 ── */
.fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media (max-width:900px){.fields{grid-template-columns:1fr 1fr;}}
.field{display:block;}
.field .lb{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600;}
.input,.select{
  width:100%;height:36px;padding:0 11px;border:1px solid var(--line-2);border-radius:8px;
  font:inherit;font-size:13.5px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.select{padding-right:8px;}
.input:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,169,224,.14);}
.input[readonly]{background:#F7F9FB;color:var(--muted);}

/* ── 按钮 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 15px;
  border-radius:8px;border:1px solid var(--line-2);background:#fff;color:#3D4B5C;
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:#B9C6D4;background:#FAFCFE;}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600);}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--muted);}
.btn-danger{background:#fff;border-color:#F0C3C7;color:var(--danger);}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger);}
.btn-sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:7px;}
.btn:disabled{opacity:.55;cursor:not-allowed;}

/* ── 表格 ── */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{
  text-align:left;font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.03em;
  padding:9px 12px;background:#F8FAFC;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:10px 12px;border-bottom:1px solid #F0F3F7;vertical-align:middle;}
.tbl tbody tr:hover{background:#FAFCFE;}
.tbl .num{font-variant-numeric:tabular-nums;}
.tbl .op{text-align:right;white-space:nowrap;}
.tbl .sub{display:block;font-size:11px;color:var(--muted);}
.empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:13px;}

/* ── 徽章 / 标签 ── */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;}
.badge-admin{background:#F1ECFC;color:#6B46C1;}
.badge-supervisor{background:var(--brand-050);color:var(--brand-600);}
.badge-audiologist{background:#EAF7EE;color:#2FA84F;}
.badge-viewer{background:#F1F4F8;color:#5C6B80;}
.badge-on{background:var(--ok-bg);color:var(--ok);}
.badge-off{background:#F1F4F8;color:#98A5B4;}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;
  background:#F3F6FA;border:1px solid var(--line);font-size:11.5px;color:#4A5A6D;margin:0 6px 6px 0;}
.chip.on{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-600);font-weight:700;}

/* ── 统计块 ── */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.stat{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fff;}
.stat .k{font-size:11.5px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px;}
.stat .v{font-size:22px;font-weight:800;color:var(--navy);line-height:1.25;font-variant-numeric:tabular-nums;}
.stat .v small{font-size:12px;font-weight:700;color:var(--muted);margin-left:3px;}
.stat .t{font-size:12px;color:var(--muted);}
.stat.r .k .dot{background:var(--r);} .stat.l .k .dot{background:var(--l);}
.stat.r{border-color:#F3C3CA;} .stat.l{border-color:#C6D8FB;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* ── 听阈表格 ── */
table.thr{width:100%;border-collapse:collapse;}
table.thr th{font-size:11.5px;color:var(--muted);font-weight:700;padding:0 0 8px;text-align:center;}
table.thr th.f{text-align:left;width:72px;}
table.thr td.f .hz{font-size:10px;color:#A0ABB9;margin-left:2px;font-weight:700;}
table.thr th.rr{color:var(--r);} table.thr th.ll{color:var(--l);}
table.thr td{padding:3px 0;}
table.thr td.f{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:700;}
.sl{display:flex;align-items:center;gap:9px;padding:0 5px;}
.sl input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:18px;background:transparent;cursor:pointer;}
.sl input[type=range]::-webkit-slider-runnable-track{height:4px;background:#E3E9F0;border-radius:2px;}
.sl input[type=range]::-moz-range-track{height:4px;background:#E3E9F0;border-radius:2px;}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:#fff;border:3px solid var(--r);margin-top:-5.5px;box-shadow:0 1px 3px rgba(16,24,40,.2);}
.sl input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--r);}
.sl.ear-l input[type=range]::-webkit-slider-thumb{border-color:var(--l);}
.sl.ear-l input[type=range]::-moz-range-thumb{border-color:var(--l);}
.sl .valwrap{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;}
.sl .val{width:58px;height:28px;padding:0 24px 0 4px;border:1px solid var(--line-2);border-radius:6px;
  font:inherit;font-size:12.5px;text-align:right;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
.sl .val:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,169,224,.14);}
.sl .unit{position:absolute;right:6px;font-size:10px;color:var(--muted);pointer-events:none;font-weight:700;}
.val::-webkit-outer-spin-button,.val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.val{-moz-appearance:textfield;appearance:textfield;}

/* ── 建议勾选 ── */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;}
@media (max-width:900px){.opts{grid-template-columns:1fr;}}
.opts label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;color:#3D4B5C;}
.opts input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);}
.opts .inline{flex:1;min-width:140px;height:32px;}

/* ── 底部操作条 ── */
.actionbar{display:flex;gap:9px;align-items:center;padding:13px 16px;border-top:1px solid var(--line);background:#FCFDFE;border-radius:0 0 var(--radius) var(--radius);}
.actionbar .sp{flex:1;}
.msg{font-size:12.5px;color:var(--ok);}
.msg.err{color:var(--danger);}

/* ── 模态框 ── */
.mask{position:fixed;inset:0;background:rgba(18,35,63,.42);display:none;align-items:center;justify-content:center;z-index:60;padding:20px;}
.mask.show{display:flex;}
.modal{background:#fff;border-radius:12px;width:520px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 60px rgba(16,24,40,.28);}
.modal .m-head{padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;color:var(--navy);}
.modal .m-body{padding:18px;}
.modal .m-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;background:#FCFDFE;}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}
.perm-grid label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;}
.perm-grid input{width:16px;height:16px;accent-color:var(--brand);}
.perm-group{font-size:11.5px;color:var(--muted);font-weight:700;margin:6px 0 2px;letter-spacing:.04em;}
.hint{font-size:11.5px;color:var(--muted);margin:6px 0 0;line-height:1.6;}

/* ── 提示条 ── */
.toast{position:fixed;top:16px;right:18px;z-index:90;display:flex;flex-direction:column;gap:8px;}
.toast .t{
  background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;font-size:13px;
  box-shadow:0 10px 26px rgba(16,24,40,.22);animation:slide .18s ease-out;
}
.toast .t.ok{background:#1E7F3B;} .toast .t.err{background:#B3172A;}
@keyframes slide{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ── 日期选择控件（年 / 月 / 日） ── */
input.dp{cursor:pointer;background:#fff;}
.dp-panel{position:fixed;z-index:80;width:250px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 14px 32px rgba(16,24,40,.18);padding:10px;display:none;}
.dp-head{display:flex;align-items:center;gap:5px;margin-bottom:8px;}
.dp-head select{height:28px;border:1px solid var(--line-2);border-radius:6px;font:inherit;font-size:12.5px;padding:0 3px;background:#fff;color:var(--ink);cursor:pointer;}
.dp-head .u{font-size:12px;color:var(--muted);}
.dp-nav{width:26px;height:26px;flex:0 0 auto;border:1px solid var(--line-2);background:#fff;border-radius:6px;
  cursor:pointer;font-weight:700;color:#4A5A6D;line-height:1;}
.dp-nav:hover{border-color:var(--brand);color:var(--brand-600);}
.dp-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--muted);margin-bottom:4px;}
.dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.dp-day{height:28px;display:grid;place-items:center;font-size:12.5px;border-radius:6px;cursor:pointer;color:#3D4B5C;}
.dp-day:hover{background:#EFF8FC;}
.dp-day.out{color:#C3CBD6;cursor:default;}
.dp-day.out:hover{background:transparent;}
.dp-day.today{border:1px solid var(--brand);color:var(--brand-600);font-weight:700;}
.dp-day.sel{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;}
.dp-foot{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}
.dp-foot button{flex:1;height:28px;border:1px solid var(--line-2);background:#fff;border-radius:6px;
  font:inherit;font-size:12px;cursor:pointer;color:#3D4B5C;}
.dp-foot button:hover{border-color:var(--brand);color:var(--brand-600);}

/* ── 结论中的耳别标签（右耳红 / 左耳蓝 / 双耳深蓝 / 正常绿） ── */
.echip{display:inline-block;padding:1px 9px;border-radius:999px;font-weight:800;font-size:12px;margin:0 2px;white-space:nowrap;}
.echip.r{background:#FDECEE;color:#D0021B;border:1px solid #F6C7CC;}
.echip.l{background:#EAF1FE;color:#1B4FD8;border:1px solid #C6D8FB;}
.echip.b{background:#EEF1F5;color:#12233F;border:1px solid #D5DDE6;}
.echip.ok{background:#EAF7EE;color:#2FA84F;border:1px solid #C4E4CC;}

/* ── 二维码维护 ── */
.qr-wrap{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;}
.qr-box{width:180px;height:180px;flex:0 0 auto;border:1px solid var(--line);border-radius:10px;
  background:#FAFCFE;display:grid;place-items:center;overflow:hidden;}
.qr-box img{width:100%;height:100%;object-fit:contain;display:block;}
.qr-empty{font-size:12px;color:var(--muted);}
.qr-side{flex:1;min-width:260px;}
.row-actions{display:flex;gap:8px;align-items:center;margin:10px 0;}
.row-actions input[type=file]{display:none;}
.row-actions label.btn{margin:0;}

/* ── 数据看板 ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:16px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow);}
.kpi .k{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.02em;}
.kpi .v{font-size:24px;font-weight:800;color:var(--navy);line-height:1.35;font-variant-numeric:tabular-nums;}
.kpi .v small{font-size:12px;font-weight:700;color:var(--muted);margin-left:3px;}
.kpi .s{font-size:11.5px;color:var(--muted);}
.bl{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.bl .lb{width:88px;flex:0 0 auto;text-align:right;font-size:12px;color:#4A5A6D;}
.bl .track{flex:1;height:9px;background:#F0F3F7;border-radius:5px;overflow:hidden;}
.bl .fill{display:block;height:100%;border-radius:5px;}
.bl .ct{width:38px;text-align:right;font-size:12px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:6px;}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;}
/* 看板图表卡片统一栅格：两列等宽、逐行等高对齐 */
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.dash-grid .card{display:flex;flex-direction:column;margin-top:0;}
.dash-grid .card-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:206px;}
@media (max-width:1080px){.dash-grid{grid-template-columns:1fr;}}

/* ── 登录页 ── */
.login-wrap{display:flex;min-height:100vh;}
.login-left{
  flex:1.1;background:linear-gradient(160deg,#0B2545 0%,#123A5E 45%,#00A9E0 130%);
  color:#fff;padding:56px 60px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.login-left::after{content:"";position:absolute;right:-90px;bottom:-90px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.06);}
.login-left .wm{font-size:44px;font-weight:800;letter-spacing:-.03em;}
.login-left .wm span{color:#7FE0FF;}
.login-left .wm-logo{
  height:46px;width:auto;display:block;background:#fff;border-radius:12px;padding:10px 16px;
  box-shadow:0 12px 26px rgba(0,0,0,.20);position:relative;z-index:1;
}
.login-left .slogan{font-size:22px;font-weight:700;line-height:1.5;max-width:420px;margin-top:26px;}
.login-left .desc{font-size:13.5px;color:rgba(255,255,255,.78);max-width:420px;margin-top:12px;line-height:1.8;}
.login-left .foot{font-size:12px;color:rgba(255,255,255,.6);position:relative;z-index:1;}
.login-right{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:40px 24px;}
.login-card{width:360px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:30px 28px 26px;}
.login-card h2{font-size:20px;margin-bottom:4px;}
.login-card .sub{font-size:12.5px;color:var(--muted);margin:0 0 20px;}
.login-card .field{margin-bottom:14px;}
.login-card .btn-primary{width:100%;height:40px;font-size:14px;}
.login-err{background:var(--danger-bg);color:var(--danger);font-size:12.5px;padding:8px 10px;border-radius:7px;margin-bottom:12px;display:none;}
.login-tip{margin-top:16px;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.7;}
@media (max-width:900px){.login-left{display:none;}}