/* SONO 管理后台样式 —— 与 _design/admin.html 设计稿同源（组件级 1:1） */
:root{
  --paper:#F4F0E5; --paper-deep:#ECE5D3;
  --ink:#0D3A52; --ink-70:#3D5A6E; --ink-45:#7C919E;
  --wave:#1FA6B8; --wave-soft:#8AD4DC; --wave-tint:#DBEEF1;
  --line:#DAD3C1; --danger:#C0563F; --silver:#B9C2C6;
  --ok:#1F9D6C; --ok-tint:#E8F5EE; --warn:#C98A2B; --warn-tint:#F9EFDC;
  --danger-tint:#F8E9E4; --neutral-tint:#EEF1F2;
  --radius-card:16px; --radius-btn:14px;
  --font-num:"DIN Alternate","Bahnschrift","Arial Narrow","PingFang SC",sans-serif;
  --font-cn:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font-cn);-webkit-font-smoothing:antialiased;background:var(--paper);color:var(--ink)}
a{text-decoration:none;color:inherit}

/* ---------- 应用骨架 ---------- */
.app{display:flex;height:100vh;overflow:hidden}
.side{width:232px;height:100%;background:var(--ink);display:flex;flex-direction:column;flex:none}
.brand{display:flex;align-items:center;gap:11px;padding:20px 18px 18px}
.bars{display:flex;align-items:flex-end;gap:2.5px;height:26px}
.bars i{width:3.5px;border-radius:2px;background:var(--wave-soft)}
.bars i:nth-child(1){height:9px;background:#B9C2C6}
.bars i:nth-child(2){height:16px}
.bars i:nth-child(3){height:26px;background:#fff}
.bars i:nth-child(4){height:20px}
.bars i:nth-child(5){height:12px}
.brand b{display:block;color:#F4F0E5;font-size:16px;letter-spacing:.5px}
.brand span{display:block;color:#7C919E;font-size:10px;letter-spacing:1.5px;margin-top:1px}
.nav{flex:1;padding:6px 12px;overflow-y:auto}
.nav-g{font-size:11px;color:rgba(185,194,198,.72);padding:14px 10px 8px;letter-spacing:1px}
.ni{display:flex;align-items:center;gap:11px;height:42px;padding:0 12px;border-radius:10px;color:rgba(244,240,229,.62);font-size:13px;position:relative;margin-bottom:2px}
.ni svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ni:hover{color:rgba(244,240,229,.9)}
.ni.on{background:rgba(31,166,184,.18);color:#fff;font-weight:600}
.ni.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--wave)}
.ni .ct{margin-left:auto;background:rgba(192,86,63,.9);color:#fff;font-size:10px;font-weight:600;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.me{margin:12px;background:rgba(244,240,229,.07);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px}
.me .ava{width:32px;height:32px;border-radius:50%;background:var(--wave);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.me b{display:block;color:#F4F0E5;font-size:12.5px}
.me span{display:block;color:#7C919E;font-size:11px;margin-top:1px}
.me a{margin-left:auto;color:#7C919E;font-size:11px}
.me a:hover{color:var(--wave-soft)}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{height:64px;background:#fff;border-bottom:1px solid rgba(218,211,193,.55);display:flex;align-items:center;padding:0 24px;gap:16px;flex:none}
.top h1{font-size:18px;font-weight:600;color:var(--ink)}
.top .crumb{font-size:12px;color:var(--ink-45);margin-top:3px}
.tools{margin-left:auto;display:flex;align-items:center;gap:14px}
.ava-sm{width:34px;height:34px;border-radius:50%;background:var(--wave);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.body{flex:1;padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:18px}
.grow{flex:1;min-width:0}

/* ---------- 卡片 ---------- */
.card{background:#fff;border:1px solid rgba(218,211,193,.6);border-radius:var(--radius-card);padding:20px}
.card h3{font-size:14px;font-weight:600;color:var(--ink)}
.card .sub{font-size:12px;color:var(--ink-45);margin-top:3px}
.card-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.lnk{font-size:12px;color:var(--wave);font-weight:600;cursor:pointer}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:var(--radius-btn);font-size:13px;font-weight:600;border:none;cursor:pointer;font-family:var(--font-cn)}
.btn-pri{background:var(--wave);color:#fff}
.btn-pri:hover{background:#1996A7}
.btn-ghost{border:1px solid var(--line);color:var(--ink-70);background:#fff}
.btn-danger{background:var(--danger-tint);color:var(--danger)}
.btn-sm{height:30px;padding:0 12px;font-size:12px;border-radius:10px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{border-radius:var(--radius-card);padding:20px;background:#fff;border:1px solid rgba(218,211,193,.6)}
.kpi .lb{font-size:12.5px;color:var(--ink-45)}
.kpi .v{font-family:var(--font-num);font-size:30px;font-weight:500;color:var(--ink);margin-top:8px;letter-spacing:.5px}
.kpi .v small{font-size:14px;color:var(--ink-45);margin-left:2px}
.kpi .delta{font-size:11.5px;margin-top:8px;font-weight:600}
.kpi .delta.up{color:var(--ok)} .kpi .delta.dn{color:var(--danger)} .kpi .delta.mut{color:var(--ink-45);font-weight:400}
.kpi-hero{background:var(--ink);border-color:var(--ink)}
.kpi-hero .lb{color:var(--wave-soft)} .kpi-hero .v{color:#fff}
.kpi-hero .delta{color:rgba(244,240,229,.65)}

/* ---------- 图表 ---------- */
.chart{display:flex;align-items:flex-end;gap:26px;height:190px;padding:6px 4px 0}
.cbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.cbar i{width:26px;border-radius:7px 7px 3px 3px;background:var(--wave-tint)}
.cbar.hi i{background:var(--wave)}
.cbar b{font-family:var(--font-num);font-size:11.5px;color:var(--ink-45);font-weight:400}
.cbar span{font-size:11.5px;color:var(--ink-45)}
.donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.donut-c{position:relative;width:150px;height:150px;flex:none}
.donut-c .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-c .c b{font-family:var(--font-num);font-size:26px;color:var(--ink)}
.donut-c .c span{font-size:11.5px;color:var(--ink-45);margin-top:2px}
.dleg{flex:1;display:flex;flex-direction:column;gap:11px;min-width:130px}
.dleg .li{display:flex;align-items:center;font-size:12.5px;color:var(--ink-70)}
.dleg .li i{width:10px;height:10px;border-radius:3px;margin-right:9px}
.dleg .li b{margin-left:auto;font-family:var(--font-num);font-weight:500;color:var(--ink)}

/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;font-weight:600;color:var(--ink-45);text-align:left;background:#F6F3EA;padding:10px 14px}
.tbl th:first-child{border-radius:9px 0 0 9px}.tbl th:last-child{border-radius:0 9px 9px 0}
.tbl td{font-size:12.5px;color:var(--ink-70);padding:12px 14px;border-bottom:1px solid rgba(218,211,193,.4)}
.tbl tr:hover td{background:#FAF8F2}
.tbl tr:last-child td{border-bottom:none}
.tbl .t-name{color:var(--ink);font-weight:600;font-size:12.5px}
.tbl .num{font-family:var(--font-num);letter-spacing:.4px}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:7px;font-size:11px;font-weight:600}
.pill-ok{background:var(--ok-tint);color:var(--ok)}
.pill-warn{background:var(--warn-tint);color:var(--warn)}
.pill-danger{background:var(--danger-tint);color:var(--danger)}
.pill-neutral{background:var(--neutral-tint);color:var(--ink-45)}
.pill-wave{background:var(--wave-tint);color:var(--wave)}
.op{color:var(--wave);font-weight:600;font-size:12px;margin-right:12px;cursor:pointer;background:none;border:none;font-family:var(--font-cn);padding:0}
.op.d{color:var(--danger)}
form.inline{display:inline}
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.pager span{font-size:12px;color:var(--ink-45)}
.pg{display:flex;gap:6px}
.pg a,.pg b{min-width:28px;height:28px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-70);font-weight:500;padding:0 6px}
.pg a:hover{border-color:var(--wave);color:var(--wave)}
.pg b.cur{background:var(--wave);border-color:var(--wave);color:#fff}
.empty-tip{padding:36px 0;text-align:center;font-size:13px;color:var(--ink-45)}

/* ---------- 筛选 / 表单 ---------- */
.filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inp{height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:8px}
.inp input{border:none;outline:none;background:transparent;font-size:12.5px;color:var(--ink);width:100%;font-family:var(--font-cn)}
.inp:focus-within{border-color:var(--wave)}
.inp.sel{min-width:130px;position:relative;padding-right:26px}
.inp.sel::after{content:"";position:absolute;right:12px;width:7px;height:7px;border-right:1.5px solid var(--ink-45);border-bottom:1.5px solid var(--ink-45);transform:rotate(45deg) translateY(-2px)}
.inp.sel select{appearance:none;-webkit-appearance:none;border:none;outline:none;background:transparent;font-size:12.5px;color:var(--ink-70);width:100%;font-family:var(--font-cn);cursor:pointer}
.chip{height:30px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;color:var(--ink-70);border:1px solid var(--line);background:#fff;cursor:pointer}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

.f-item{margin-bottom:16px}
.f-item label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.f-item label em{font-style:normal;color:var(--ink-45);font-weight:400;margin-left:8px;font-size:11.5px}
.f-ipt{width:100%;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:0 12px;font-size:13px;color:var(--ink);display:flex;align-items:center}
.f-ipt input,.f-ipt select,.f-ipt textarea{border:none;outline:none;background:transparent;width:100%;font-size:13px;color:var(--ink);font-family:var(--font-cn)}
.f-ipt textarea{height:100%;resize:none;padding:0}
.f-ta{height:84px;padding:10px 12px;align-items:flex-start}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.ck{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:10px;border:1px solid var(--line);font-size:12.5px;color:var(--ink-70);background:#fff;cursor:pointer}
.ck i{width:15px;height:15px;border-radius:5px;border:1.5px solid var(--silver);display:flex;align-items:center;justify-content:center;flex:none}
.ck input{display:none}
.ck.on{border-color:var(--wave);background:var(--wave-tint);color:var(--ink);font-weight:600}
.ck.on i{background:var(--wave);border-color:var(--wave)}
.ck.on i::after{content:"";width:8px;height:4.5px;border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg) translate(0.5px,-1px)}
.switch{width:42px;height:24px;border-radius:12px;background:var(--wave);position:relative;flex:none;border:none;cursor:pointer;display:inline-block;vertical-align:middle}
.switch::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.switch.off{background:#CBD5DA}.switch.off::after{left:3px;right:auto}
.frow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid rgba(218,211,193,.4)}
.frow:last-child{border-bottom:none}
.frow b{font-size:13px;color:var(--ink);font-weight:600;display:block}
.frow p{font-size:11.5px;color:var(--ink-45);margin-top:3px}
.radio{display:flex;gap:12px;flex-wrap:wrap}
.rd{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;min-width:120px}
.rd b{font-size:13px;color:var(--ink);display:block}
.rd span{font-size:11.5px;color:var(--ink-45)}
.rd.on{border-color:var(--wave);background:var(--wave-tint);box-shadow:inset 0 0 0 1px var(--wave)}

/* ---------- 存储 ---------- */
.meter{height:8px;border-radius:5px;background:var(--neutral-tint);overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;border-radius:5px}
.stor{display:flex;align-items:center;gap:14px}
.stor .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.stor .ic svg{width:20px;height:20px;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 登录 ---------- */
.login-wrap{height:100vh;display:flex;background:#fff}
.lg-left{width:40%;min-width:420px;background:var(--ink);position:relative;padding:64px 56px;display:flex;flex-direction:column}
.lg-left .lg-wave{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:70px}
.lg-left .lg-wave i{width:10px;border-radius:5px;background:var(--wave)}
.lg-left h2{color:#F4F0E5;font-size:30px;margin-top:44px;letter-spacing:1px}
.lg-left p{color:#7C919E;font-size:14px;margin-top:12px;line-height:1.7}
.lg-slogan{margin-top:auto;color:rgba(244,240,229,.4);font-size:12px;letter-spacing:2px}
.lg-right{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.lg-box{width:380px;max-width:100%}
.lg-box h3{font-size:22px;color:var(--ink);font-weight:600}
.lg-box .tip{font-size:13px;color:var(--ink-45);margin:8px 0 30px}
.lg-box .f-item label{color:var(--ink-70)}
.lg-box .f-ipt{background:#fff;height:44px;border-radius:12px}
.lg-box .btn{width:100%;height:46px;border-radius:var(--radius-btn);font-size:14.5px;margin-top:6px}
.lg-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-45);margin-top:18px}
.lg-foot b{color:var(--wave);font-weight:600}
.alert{border-radius:12px;padding:12px 16px;font-size:12.5px;margin-bottom:18px}
.alert-err{background:var(--danger-tint);color:var(--danger)}
.alert-ok{background:var(--ok-tint);color:var(--ok)}
.alert-warn{background:var(--warn-tint);color:var(--warn)}

/* ---------- 安装向导 ---------- */
.inst-wrap{min-height:100vh;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:40px 24px}
.inst{width:760px;max-width:100%;background:#fff;border:1px solid rgba(218,211,193,.6);border-radius:20px;padding:36px 40px}
.inst h1{font-size:20px;color:var(--ink);display:flex;align-items:center;gap:12px}
.inst .step-tip{font-size:12.5px;color:var(--ink-45);margin:6px 0 24px}
.steps{display:flex;gap:8px;margin-bottom:26px}
.st{flex:1;height:4px;border-radius:3px;background:var(--neutral-tint)}
.st.on{background:var(--wave)}
.env{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(218,211,193,.4);font-size:13px}
.env:last-child{border-bottom:none}
.env b{color:var(--ink);font-weight:600}
.env span{color:var(--ink-45);font-size:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}