
:root{--navy:#0b376e;--blue:#1467d8;--line:#e5e8ee;--text:#1d2433;--muted:#7a8495;--bg:#f5f6f8;--white:#fff;--danger:#dc3545;--sidebar:230px}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
button,input,textarea{font:inherit}button{cursor:pointer}
.hidden{display:none!important}.topbar{height:40px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:13px}
.top-left{display:flex;gap:28px;align-items:center}.top-tab.active{font-weight:700}.top-right{display:flex;gap:16px;align-items:center}.link-btn{background:none;border:0;color:#fff}
.layout{display:flex;height:calc(100vh - 40px)}.sidebar{width:var(--sidebar);background:#fff;border-right:1px solid var(--line);overflow:auto}.group-title{padding:14px 16px;font-size:12px;color:#333;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
.nav{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:#fff;padding:10px 14px;color:#333;font-size:12px;text-align:left}.nav:hover{background:#f4f8ff}.nav.active{background:#eaf1fb;color:#1362d3;border-left:3px solid #1467d8;padding-left:11px;font-weight:700}.main{flex:1;overflow:auto;padding:12px 14px}
.content-card{background:#fff;border:1px solid var(--line);border-radius:6px;margin-bottom:14px;padding:16px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-head h2{margin:0;font-size:15px}.section-head p{margin:5px 0 0;color:var(--muted);font-size:12px}
.metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.metric{padding:14px;background:#fafbfd;border:1px solid var(--line);border-radius:6px}.metric span{display:block;color:var(--muted);font-size:11px}.metric b{display:block;font-size:24px;margin-top:8px;color:#1166d1}
.setting-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.kv{border:1px solid var(--line);border-radius:6px;padding:12px;background:#fcfdff}.kv span{display:block;color:var(--muted);font-size:11px}.kv b{display:block;margin-top:6px;font-size:13px}
.table{border:1px solid var(--line);border-radius:6px;overflow:hidden}.tr{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;border-bottom:1px solid var(--line)}.tr:last-child{border-bottom:0}.tr>div{padding:9px 10px;font-size:12px;border-right:1px solid var(--line)}.tr>div:last-child{border-right:0}.empty{padding:35px;text-align:center;color:var(--muted);font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.form-grid label{display:flex;gap:7px;flex-direction:column;font-size:12px;color:#465063}.form-grid input,.form-grid textarea,.form-inline input{padding:9px;border:1px solid #d7dde6;border-radius:5px;outline:none}.fullw{grid-column:1/-1}.actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.primary,.ghost,.danger,.actions button{border:0;border-radius:5px;padding:9px 14px;font-size:12px}.primary{background:var(--blue);color:#fff}.ghost{background:#edf3fb;color:#0e62cd}.danger{background:var(--danger);color:#fff}.actions button{background:#eef2f7}
.toggle{display:flex!important;flex-direction:row!important;align-items:center;gap:8px}.form-inline{display:flex;gap:8px}.input{min-width:260px}.result{margin-top:16px}.usercard{border:1px solid var(--line);padding:14px;border-radius:6px;background:#fbfcfe}.muted{color:var(--muted)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1e2a3d;color:white;padding:10px 16px;border-radius:7px;z-index:1000}
.login-shell{display:grid;grid-template-columns:42% 58%;min-height:100vh;background:#fff}.login-brand{background:linear-gradient(160deg,#6781a8,#526579);color:#fff;padding:8vh 9vw;position:relative;overflow:hidden}.login-brand:before,.login-brand:after{content:"";position:absolute;border:1px dotted rgba(255,255,255,.4);border-radius:50%;width:320px;height:320px;top:50px;left:50px}.login-brand:after{width:520px;height:520px;top:-30px;left:-40px;opacity:.35}.orb{position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;top:110px;left:80px;opacity:.7}.brand-logo{font-size:44px}.brand-title{font-size:26px;font-weight:800;margin-top:14px}.brand-sub{font-size:16px;font-weight:700;margin-top:6px}.login-brand p{max-width:520px;line-height:1.9;color:#f3f6fb;font-size:14px;margin-top:60px}.login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px}.login-title{font-size:28px;font-weight:800}.login-desc{margin:14px 0 24px;color:#666;font-size:14px;text-align:center;max-width:520px}.code-label{font-size:14px;color:#666}.big-code{font-size:58px;font-weight:800;letter-spacing:10px;margin:10px 0 20px;color:#303644}.full{width:340px;font-size:16px;padding:13px}.login-msg{margin-top:14px;color:#555;font-size:13px}.help{margin-top:18px;color:#87909d;font-size:12px;text-align:center;max-width:420px}
@media(max-width:1000px){.metric-grid{grid-template-columns:repeat(2,1fr)}.setting-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.sidebar{width:200px}.login-shell{grid-template-columns:1fr}.login-brand{padding:36px}.login-card{padding:36px}}

.subnav-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:20px 0;
}

.subnav-card{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:18px;
  border:1px solid #e5eaf2;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  text-align:left;
  transition:.2s;
}

.subnav-card:hover{
  border-color:#2f6fed;
  box-shadow:0 6px 18px rgba(40,70,120,.08);
}

.subnav-card.active{
  border-color:#2f6fed;
  background:#f4f8ff;
}

.subnav-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#edf4ff;
  font-size:20px;
  flex:none;
}

.subnav-card b{
  display:block;
  margin-bottom:5px;
  font-size:15px;
  color:#25324a;
}

.subnav-card span{
  display:block;
  font-size:12px;
  color:#8a95a8;
}

.subpage{
  margin-top:10px;
  padding-top:6px;
}

.subpage-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:12px 0 18px;
}

.subpage-head h3{
  margin:0 0 6px;
  font-size:18px;
  color:#25324a;
}

.subpage-head p{
  margin:0;
  color:#8a95a8;
  font-size:13px;
}

.rule-list{
  border:1px solid #e8edf5;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.rule-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:18px 20px;
  border-bottom:1px solid #edf1f6;
}

.rule-main{
  display:flex;
  align-items:center;
  gap:14px;
}

.rule-index{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#f0f4fa;
  color:#59708f;
  font-size:12px;
  font-weight:700;
}

.rule-item b{
  display:block;
  margin-bottom:5px;
  color:#25324a;
}

.rule-item p{
  margin:0;
  color:#8a95a8;
  font-size:12px;
}

.status-dot{
  padding:5px 10px;
  border-radius:999px;
  background:#eaf8ef;
  color:#25a05a;
  font-size:12px;
  white-space:nowrap;
}

.compact-grid{
  padding:20px;
}

.preview-box{
  margin-top:18px;
  padding:16px 18px;
  border:1px dashed #ccd6e5;
  border-radius:10px;
  background:#fafcff;
}

.preview-box > span{
  display:block;
  margin-bottom:8px;
  color:#7c899d;
  font-size:12px;
}

.preview-box > div{
  padding:12px;
  border-radius:8px;
  background:#fff;
  color:#33415c;
}

@media (max-width: 900px){
  .subnav-cards{
    grid-template-columns:1fr;
  }
}

.nav-parent{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav-arrow{
  font-size:12px;
  transition:transform .2s;
}

.nav-submenu{
  display:none;
  padding:4px 0 8px 34px;
}

.nav-submenu.open{
  display:block;
}

.nav-child{
  display:block;
  width:100%;
  padding:9px 12px;
  border:0;
  background:transparent;
  color:#7d899b;
  text-align:left;
  font-size:13px;
  border-radius:6px;
  cursor:pointer;
}

.nav-child:hover{
  background:#f1f5fb;
  color:#2f6fed;
}

.nav-child.active{
  background:#edf4ff;
  color:#2f6fed;
  font-weight:600;
}

.verify-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:18px 0 14px;
}

.verify-summary{
  color:#7f8a9d;
  font-size:13px;
}

.verify-table{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}

.verify-row{
  display:grid;
  grid-template-columns:70px 1.2fr 2fr 90px 160px 170px;
  align-items:center;
  min-height:54px;
  border-bottom:1px solid var(--line);
}

.verify-row:last-child{
  border-bottom:0;
}

.verify-row > div{
  padding:10px 12px;
  font-size:12px;
  border-right:1px solid var(--line);
}

.verify-row > div:last-child{
  border-right:0;
}

.verify-head{
  background:#f7f9fc;
  color:#6f7b8d;
  font-weight:700;
}

.verify-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
}

.verify-status.on{
  background:#eaf8ef;
  color:#25a05a;
}

.verify-status.off{
  background:#f1f3f6;
  color:#8a93a1;
}

.verify-action{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.verify-action button{
  border:1px solid #dce3ee;
  background:#fff;
  border-radius:5px;
  padding:5px 9px;
  cursor:pointer;
  font-size:11px;
}

.verify-action button:hover{
  border-color:#2f6fed;
  color:#2f6fed;
}

.verify-empty{
  padding:40px 20px;
  text-align:center;
  color:#8a95a8;
}

.verify-detail{
  margin-top:18px;
  padding:16px;
  border:1px solid #e5eaf2;
  border-radius:8px;
  background:#fafcff;
}

.verify-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}

.verify-detail-grid .full{
  grid-column:1/-1;
}

@media(max-width:1000px){
  .verify-row{
    grid-template-columns:60px 1fr 1.5fr 75px 120px 130px;
  }
}


.welcome-config-card{
  max-width:900px;
}

.card-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.form-group{
  margin-top:20px;
}

.form-group label{
  display:block;
  font-weight:600;
  margin-bottom:10px;
}

.welcome-textarea{
  width:100%;
  min-height:150px;
  resize:vertical;
  border:1px solid #d9e0ea;
  border-radius:8px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.7;
  box-sizing:border-box;
  outline:none;
  background:#fff;
}

.welcome-textarea:focus{
  border-color:#2f6fed;
  box-shadow:0 0 0 3px rgba(47,111,237,.08);
}

.form-tip{
  margin-top:8px;
  color:#8a94a6;
  font-size:13px;
}

.form-tip code,
.variable-item code{
  background:#f1f4f8;
  padding:3px 7px;
  border-radius:4px;
  color:#315d9b;
}

.welcome-preview-box,
.welcome-variable-box{
  margin-top:24px;
  padding:18px;
  background:#f8fafc;
  border:1px solid #e5eaf0;
  border-radius:8px;
}

.preview-title{
  font-weight:600;
  margin-bottom:12px;
}

.welcome-preview{
  background:#fff;
  border:1px solid #e1e6ed;
  border-radius:8px;
  padding:14px 16px;
  color:#2c3440;
  line-height:1.7;
  min-height:24px;
  white-space:pre-wrap;
}

.variable-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:#667085;
}
