/* 光伏运维助手 · 管理端样式（延续设计方案：深蓝品牌导航 / 浅蓝背景 / 白色卡片 / 蓝色主操作） */
:root{
  --navy:#16304f; --navy2:#1d3a5f; --blue:#2f6fed; --blue-dark:#2258c4;
  --bg:#f2f6fb; --line:#dfe7f0; --text:#22303f; --muted:#7a8aa0;
  --ok:#0f9d58; --ok-bg:#e8f5ee; --warn:#c77c11; --warn-bg:#fdf3e3;
  --fail:#d93025; --fail-bg:#fdecea; --info:#2f6fed; --info-bg:#eaf1fe;
  --radius:10px; --shadow:0 1px 3px rgba(22,48,79,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.6 "Microsoft YaHei",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* 左侧导航栏（宽屏侧栏 + 窄屏紧凑顶栏，对应设计 01 §12.1） */
.sun{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd66b,#f5a623);display:inline-block;flex:none}
.shell{display:flex;min-height:100vh}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:216px;z-index:60;color:#cfe0f5;
  background:linear-gradient(185deg,var(--navy) 0%,#1d3a5f 70%,#20456e 100%);
  display:flex;flex-direction:column;box-shadow:2px 0 10px rgba(22,48,79,.18)}
.sidebar .logo{display:flex;align-items:center;gap:9px;padding:18px 16px 14px;font-size:15.5px;font-weight:700;color:#fff;
  letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.09)}
.nav-groups{flex:1;overflow-y:auto;padding:8px 12px 12px}
.nav-groups::-webkit-scrollbar{width:5px}
.nav-groups::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.nav-cap{font-size:11px;color:#7f97b5;padding:12px 10px 4px;letter-spacing:2px}
.nav-item{display:flex;align-items:center;gap:10px;color:#c3d5ec;padding:9px 12px;border-radius:8px;font-size:14px;
  margin-bottom:2px;position:relative;transition:background .15s}
.nav-item svg{width:17px;height:17px;flex:none;opacity:.9}
.nav-item:hover{background:rgba(255,255,255,.10);color:#fff;text-decoration:none}
.nav-item.active{background:rgba(47,111,237,.38);color:#fff;font-weight:600}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:2px;background:#5b9bff}
.nav-badge{margin-left:auto;background:#e5484d;color:#fff;font-size:11px;border-radius:10px;padding:0 7px;line-height:1.7}
.sidebar .me{border-top:1px solid rgba(255,255,255,.09);padding:12px 14px;display:flex;align-items:center;gap:10px}
.sidebar .avatar{width:36px;height:36px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 35%,#ffd66b,#f5a623);color:var(--navy);
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.sidebar .me .info{flex:1;min-width:0;font-size:12px;line-height:1.5;color:#9fb6d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .me .info b{display:block;color:#fff;font-size:13px}
.sidebar .me .info .role{color:#ffd66b}
.sidebar .me button{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:6px;padding:5px 10px;font-size:12px;flex:none}
.sidebar .me button:hover{background:rgba(255,255,255,.26)}
.main{flex:1;margin-left:216px;min-width:0}

/* 布局 */
.page{max-width:1180px;margin:18px auto 70px;padding:0 18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.card h3{font-size:14px;color:var(--muted);font-weight:500;margin-bottom:6px}
.card .num{font-size:26px;font-weight:700;color:var(--navy)}
.card .num small{font-size:13px;font-weight:400;color:var(--muted)}
.section{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-top:14px;box-shadow:var(--shadow)}
.section>h2{font-size:15px;color:var(--navy);margin-bottom:12px;border-left:4px solid var(--blue);padding-left:9px}
.section .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.section .head h2{margin:0}

/* 表格 */
table.tb{width:100%;border-collapse:collapse;font-size:13.5px}
table.tb th{background:#f4f8fc;color:#52627a;font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tb td{padding:8px 10px;border-bottom:1px solid #eef3f8;vertical-align:top}
table.tb tr:hover td{background:#f8fbfe}
td .sub{color:var(--muted);font-size:12px}

/* 标签/状态 */
.tag{display:inline-block;font-size:12px;padding:2px 9px;border-radius:20px;line-height:1.6;white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.fail{background:var(--fail-bg);color:var(--fail)}
.tag.info{background:var(--info-bg);color:var(--info)}
.tag.gray{background:#eef2f7;color:#64748b}
.tag.navy{background:#e3ebf5;color:var(--navy)}

/* 表单 */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.form .field label{display:block;font-size:13px;color:#52627a;margin-bottom:4px}
.form .field label b{color:var(--fail);margin-left:2px}
.form input,.form select,.form textarea{width:100%;border:1px solid #c6d3e2;border-radius:7px;padding:7px 10px;font-size:13.5px;font-family:inherit;background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid #b9d0fa;border-color:var(--blue)}
.form .full{grid-column:1/-1}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline input,.inline select{border:1px solid #c6d3e2;border-radius:7px;padding:6px 10px;font-size:13.5px}

/* 按钮 */
button{font-family:inherit;cursor:pointer}
.btn{background:var(--blue);color:#fff;border:0;border-radius:7px;padding:8px 16px;font-size:13.5px}
.btn:hover{background:var(--blue-dark)}
.btn.big{padding:10px 24px;font-size:14.5px}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.btn.ghost:hover{background:#eaf1fe}
.btn.gray{background:#fff;color:#52627a;border:1px solid #c6d3e2}
.btn.gray:hover{background:#f1f5fa}
.btn.red{background:#fff;color:var(--fail);border:1px solid #eec7c3}
.btn.red:hover{background:var(--fail-bg)}
.btn:disabled{background:#c6d3e2;cursor:not-allowed;border:0;color:#fff}
.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:6px}

/* 提示 */
.toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:200;min-width:320px;max-width:620px;
  background:#0f1b2d;color:#fff;padding:11px 18px;border-radius:9px;font-size:13.5px;box-shadow:0 6px 22px rgba(0,0,0,.28);display:none}
.toast.err{background:#7f1d1d}
.toast.ok{background:#14532d}
.modal-mask{position:fixed;inset:0;background:rgba(15,27,45,.45);z-index:100;display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:12px;width:min(680px,92vw);max-height:86vh;overflow:auto;padding:20px 22px}
.modal h3{color:var(--navy);margin-bottom:12px;font-size:16px}

/* 圆环 */
.ring{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto}
.ring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}
.ring b{position:relative;z-index:1;font-size:24px;color:var(--navy)}
.ring b small{font-size:12px;color:var(--muted)}
.ring-cap{text-align:center;color:var(--muted);font-size:12.5px;margin-top:8px}

/* 执行页 */
.group-title{margin:14px 0 6px;font-size:13.5px;color:var(--navy);font-weight:700;background:#eef4fb;padding:5px 12px;border-radius:6px}
.item-row{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border-bottom:1px solid #eef3f8}
.item-row:hover{background:#f8fbfe}
.item-row .idx{width:34px;color:var(--muted);font-size:12px;padding-top:5px;text-align:right}
.item-row .name{flex:1;font-size:13.5px}
.item-row .name .std{color:var(--muted);font-size:12px}
.item-row .opts{display:flex;gap:6px}
.opt{border:1px solid #c6d3e2;background:#fff;border-radius:16px;padding:3px 13px;font-size:12.5px;color:#52627a}
.opt.sel-ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:600}
.opt.sel-ab{background:var(--fail-bg);border-color:var(--fail);color:var(--fail);font-weight:600}
.opt.sel-na{background:var(--warn-bg);border-color:var(--warn);color:var(--warn);font-weight:600}
.item-row .note-in{display:none;margin-top:6px}
.item-row.show-note .note-in{display:block}
.item-row .note-in input,.item-row .note-in textarea{width:100%;border:1px solid #c6d3e2;border-radius:6px;padding:5px 9px;font-size:13px}
.item-row .cur{font-size:11.5px;color:var(--muted);padding-top:6px;white-space:nowrap}
.area-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.area-tab{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 14px;font-size:13px;color:#52627a}
.area-tab.active{border-color:var(--blue);background:#eaf1fe;color:var(--blue);font-weight:600}
.area-tab .st{font-size:11px;margin-left:6px}
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:14px}
.tabs a{padding:8px 18px;font-size:14px;color:#52627a;border-bottom:2px solid transparent;margin-bottom:-2px}
.tabs a.active{color:var(--blue);border-color:var(--blue);font-weight:600}
.tabs a:hover{text-decoration:none}

/* 登录页 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#122a47,#24507e 60%,#2f6fed)}
.login-box{background:#fff;border-radius:14px;padding:34px 38px;width:400px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.login-box h1{font-size:19px;color:var(--navy);margin-bottom:4px;display:flex;align-items:center;gap:9px}
.login-box .sub{color:var(--muted);font-size:12.5px;margin-bottom:20px}
.login-box .field{margin-bottom:12px}
.login-box label{display:block;font-size:13px;color:#52627a;margin-bottom:4px}
.login-box input{width:100%;border:1px solid #c6d3e2;border-radius:8px;padding:9px 12px;font-size:14px}
.login-box .btn{width:100%;margin-top:6px;padding:10px}
.login-box .hint{margin-top:16px;font-size:12px;color:var(--muted);background:#f4f8fc;border-radius:8px;padding:9px 12px;line-height:1.8}

/* 其它 */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.kv .k{font-size:12.5px;color:var(--muted)}
.kv .v{font-size:13.5px}
.progress{height:8px;background:#e6edf5;border-radius:6px;overflow:hidden;min-width:90px}
.progress i{display:block;height:100%;background:var(--blue);border-radius:6px}
.progress i.done{background:var(--ok)}
.muted{color:var(--muted)} .small{font-size:12.5px}
.mt{margin-top:12px} .mb{margin-bottom:12px}
.err-box{background:var(--fail-bg);color:var(--fail);border-radius:8px;padding:10px 14px;font-size:13px;margin:10px 0}
#boot{padding:80px;text-align:center;color:var(--muted)}
.empty{padding:34px;text-align:center;color:var(--muted);font-size:13.5px}
@media (max-width:880px){
  /* 窄屏：侧栏收成顶部紧凑导航（01 §12.1） */
  .shell{flex-direction:column}
  .sidebar{position:static;width:100%;flex-direction:column;box-shadow:var(--shadow)}
  .sidebar .logo{padding:12px 16px;border-bottom:0}
  .nav-groups{display:flex;overflow-x:auto;padding:4px 8px 10px}
  .nav-cap{display:none}
  .nav-item{white-space:nowrap;margin:0 2px;padding:7px 12px}
  .nav-item.active::before{display:none}
  .sidebar .me{border-top:1px solid rgba(255,255,255,.09);padding:8px 14px}
  .sidebar .me .info{display:none}
  .main{margin-left:0}
  .page{margin-top:12px}
}