/* ============================================================
   现代化后台外观（覆盖层，不破坏原布局）
   ============================================================ */
:root{
  --primary:#0a9f7b;
  --primary-dark:#087a61;
  --primary-light:#e9f8f2;
  --bg:#f3f7f5;
  --card:#ffffff;
  --text:#1d2f2a;
  --muted:#71817b;
  --line:#e3ece8;
  --radius:18px;
  --shadow:0 16px 40px rgba(20,48,41,.07);
  --sidebar:#0b332c;
  --control-radius:12px;
  --control-height:42px;
}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(1200px 700px at 100% 0%,#edf8f2 0%,transparent 55%),var(--bg);color:var(--text);overflow-x:hidden}
a{transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}

/* 侧边栏 */
.sidebar{width:232px;background:radial-gradient(110% 80% at 100% 0%,rgba(20,160,125,.18),transparent 55%),linear-gradient(180deg,#0d3c33 0%,#092b26 100%);border-right:0;box-shadow:8px 0 30px rgba(8,38,31,.06)}
.sidebar .brand{padding:20px 18px 17px;border-bottom-color:rgba(255,255,255,.07)}
.sidebar .brand .logo{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.1)}
.sidebar .brand .brand-text b{font-size:16.5px;letter-spacing:.2px}
.sidebar .menu{padding:12px 12px 18px}
.sidebar .menu .group{font-size:10px;letter-spacing:1.4px;padding:16px 12px 7px;color:#7fa79c}
.sidebar .menu a{display:flex;align-items:center;gap:9px;border-radius:11px;padding:9px 12px;margin:2px 0;color:#c6ddd6;font-size:13px;transition:.18s}
.sidebar .menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar .menu a.active{background:linear-gradient(135deg,rgba(10,159,123,.95),rgba(8,122,97,.95));color:#fff;box-shadow:0 8px 20px rgba(10,159,123,.22)}
.sidebar .menu a .badge{background:rgba(255,255,255,.18);color:#fff}
.main{flex:0 0 calc(100% - 232px);width:calc(100% - 232px);margin-left:232px;min-width:0}

/* 顶部与内容 */
.main-content{background:transparent}
.page-head,.page-header{padding:22px 0 6px}
.page-head h1,.page-header h1{font-size:24px;letter-spacing:-.3px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel-head{padding:18px 22px;border-bottom:1px solid #edf3f0;background:linear-gradient(180deg,#fff,#fcfefd)}
.panel-head h2{font-size:17px;letter-spacing:-.2px;color:#183b31}
.panel-sub{color:var(--muted);font-size:12px}
.panel-body{padding:20px 22px}
.stat-grid{gap:14px}
.stat-card{border-radius:17px;border:1px solid #e7efeb;box-shadow:0 10px 28px rgba(20,48,41,.055);padding:18px 20px}
.stat-card .num{font-size:26px;letter-spacing:-.5px}
.stat-card .lab{font-size:12px;color:var(--muted)}

/* 表格 */
.table-wrap{overflow:auto}
.table{font-size:12.8px}
.table thead th{background:#f7faf8;color:#74847e;font-size:11px;letter-spacing:.04em;font-weight:600;border-bottom:1px solid #e8f0ec;padding:12px 14px;white-space:nowrap}
.table tbody td{padding:13px 14px;border-bottom:1px solid #f0f5f2;vertical-align:middle}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:#f8fcfa}
.table tbody tr:last-child td{border-bottom:0}

/* 按钮 */
.btn{border-radius:11px;font-weight:600;letter-spacing:.1px;box-shadow:0 4px 12px rgba(10,159,123,.12)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,159,123,.18)}
.btn-gray,.btn-ghost{box-shadow:none;background:#f6faf8;border-color:#e1ece7;color:#315a4e}
.btn-ghost:hover,.btn-gray:hover{background:#eef8f3;border-color:#cfe6dc}
.btn-danger{background:linear-gradient(135deg,#ef6a58,#d94b39);color:#fff}
.btn-danger:hover{background:linear-gradient(135deg,#e85d4c,#c93f2e);color:#fff}
.btn-danger:disabled,.btn-danger.disabled{opacity:.55;color:#fff}
.btn-sm{min-height:32px;padding:0 12px;border-radius:9px;font-size:12px}

/* 表单 */
.form-group label{font-size:12px;color:#3f5d53;font-weight:600;margin-bottom:7px}
.form-group input,.form-group select,.form-group textarea,.form-grid input,.form-grid select,.form-grid textarea{border:1px solid #dbe8e2;border-radius:var(--control-radius);background:#fbfdfc;color:var(--text);min-height:var(--control-height);padding:10px 13px;font-size:13px;transition:.18s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#66c7ac;background:#fff;box-shadow:0 0 0 4px rgba(10,159,123,.09);outline:none}
.form-actions{margin-top:18px;padding-top:4px}
.tip{color:var(--muted);font-size:11.5px;line-height:1.7}

/* 页签与 hero */
.channel-hero{border-radius:22px;border:1px solid #dceee7;box-shadow:0 18px 44px rgba(20,48,41,.06);background:radial-gradient(80% 120% at 95% 0%,rgba(10,159,123,.14),transparent 55%),linear-gradient(135deg,#f7fcfa,#fff)}
.channel-hero h2{font-size:24px;letter-spacing:-.3px}
.channel-hero p{color:#6c8178}
.channel-tabs{gap:6px;border-bottom:1px solid #e1ece7;padding:0 2px}
.channel-tabs a{border-radius:11px 11px 0 0;padding:11px 16px;font-size:12.5px;color:#70837b}
.channel-tabs a.active{background:#fff;border-color:#dfeae5;color:var(--primary-dark);box-shadow:0 -4px 16px rgba(20,48,41,.04)}
.channel-tabs,.conversation-bar{scrollbar-width:none;-ms-overflow-style:none}
.channel-tabs::-webkit-scrollbar,.conversation-bar::-webkit-scrollbar{display:none;height:0}

/* 上传拖拽 */
.upload-dropzone{border:1.5px dashed #c9ded6;border-radius:14px;background:#f9fcfa;padding:16px;transition:.18s}
.upload-dropzone:hover,.upload-dropzone.is-dragover{border-color:#34b795;background:#f0fbf6;box-shadow:0 8px 22px rgba(10,159,123,.08)}
.upload-preview{border:1px solid #e1ece7;border-radius:12px;background:#fbfdfc}
.upload-thumb{border-radius:9px}

/* 徽标与提示 */
.badge{border-radius:999px;padding:4px 9px;font-size:10.5px;font-weight:600}
.alert{border-radius:12px;border:1px solid transparent;padding:12px 15px;font-size:12.5px;line-height:1.8}
.alert-info{background:#eef8fb;border-color:#d5e9f1;color:#2d6c81}
.alert-warning{background:#fff8e8;border-color:#f4e2b8;color:#8a6116}
.alert-danger{background:#fff2f0;border-color:#f4d4cf;color:#a63e32}
.alert-success{background:#eefaf4;border-color:#cfeee2;color:#0a7a5e}

@media(max-width:900px){
  .main{flex:1 1 100%;width:100%;margin-left:0}
  .sidebar{width:216px}
  .panel-head,.panel-body{padding-left:16px;padding-right:16px}
}
/* 公众号消息工作台 */
.conversation-bar { display:flex; gap:8px; overflow-x:auto; padding:0 0 12px; }
.table-wrap{scrollbar-width:thin;scrollbar-color:#c9ddd5 transparent}
.table-wrap::-webkit-scrollbar{width:6px;height:6px}
.table-wrap::-webkit-scrollbar-thumb{background:#c9ddd5;border-radius:99px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.conversation-chip { flex:0 0 auto; min-width:150px; display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); text-decoration:none; }
.conversation-chip.active { border-color:var(--primary); box-shadow:0 0 0 2px rgba(10,159,123,.12); }
.conversation-chip b { font-size:13px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-chip span { font-size:11px; color:var(--muted); }
.conversation-chip i { align-self:flex-start; font-style:normal; }
.hot-page:hover{border-color:var(--primary)!important;box-shadow:0 2px 8px rgba(7,40,34,.10)}

/* ============================================================
   2026 统一视觉细节：页头、空状态、表格、权限勾选、可访问性
   ============================================================ */

/* 页头：业务域标签 + 页面标题 */
.topbar-heading{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.topbar-heading h1{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topbar-context{
  flex:0 0 auto;
  padding:3px 9px;
  border:1px solid #d6ece4;
  border-radius:999px;
  background:#eefaf5;
  color:#0a7a5e;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.3px;
  white-space:nowrap;
}
.muted{color:var(--muted);font-size:12px;}

/* 统一空状态：即使页面只写了“暂无数据”，也有完整视觉 */
.empty{
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
  justify-content:center;
  padding:44px 20px;
  color:#8c9c96;
  font-size:12.5px;
  line-height:1.8;
  text-align:center;
}
.empty::before{
  content:"";
  width:46px;
  height:46px;
  margin-bottom:4px;
  border-radius:15px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2399b3aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center / 22px no-repeat,
    #f2f9f6;
}
.empty p{margin:0;}
.empty .btn{margin-top:8px;}

/* 表格：轻微斑马纹，长表更易读 */
.table tbody tr:nth-child(even){background:#fcfefd;}
.table tbody tr:nth-child(even):hover{background:#f7fcfa;}
.table tbody td .btn-sm{vertical-align:middle;}
.table code{
  display:inline-block;
  padding:2px 6px;
  border-radius:6px;
  background:#f1f7f4;
  color:#276451;
  font-size:11.5px;
  line-height:1.5;
}
.table tbody td[colspan][style*="text-align:center"]{
  padding:46px 20px!important;
  color:#8c9c96!important;
  font-size:12.5px!important;
  background:#fff!important;
}
.table tbody td[colspan][style*="text-align:center"]::before{
  content:"";
  display:block;
  width:44px;
  height:44px;
  margin:0 auto 9px;
  border-radius:14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2399b3aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center / 21px no-repeat,
    #f2f9f6;
}

/* 权限勾选卡片：选中后整卡高亮 */
.perm-check{transition:border-color .16s,background .16s,box-shadow .16s;}
.perm-check:has(input:checked){
  border-color:#8ed7c2;
  background:#eefaf5;
  box-shadow:0 0 0 2px rgba(10,159,123,.08);
}
.perm-check input{accent-color:var(--primary);}

/* 功能开关：设置页的开关卡片 */
.feature-toggle-wrap{margin-bottom:10px;}
.feature-toggle{
  position:relative;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0!important;
  padding:13px 15px;
  border:1px solid #e1ece7;
  border-radius:12px;
  background:#fbfdfc;
  color:#35584c!important;
  font-weight:500!important;
  cursor:pointer;
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.feature-toggle:hover{border-color:#c8e7dc;background:#f7fcfa;}
.feature-toggle:has(input:checked){border-color:#b7e4d6;background:#f2fbf7;box-shadow:0 0 0 2px rgba(10,159,123,.05);}
.feature-toggle input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0;
  pointer-events:none;
}
.feature-toggle-text{flex:1;min-width:0;font-size:12.5px;}
.feature-toggle-track{
  position:relative;
  flex:0 0 40px;
  width:40px;
  height:22px;
  border-radius:999px;
  background:#dce8e3;
  box-shadow:inset 0 1px 2px rgba(20,48,41,.08);
  transition:background .18s;
}
.feature-toggle-track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(20,48,41,.22);
  transition:transform .18s;
}
.feature-toggle input:checked ~ .feature-toggle-track{background:linear-gradient(135deg,#0aa987,#087f64);}
.feature-toggle input:checked ~ .feature-toggle-track::after{transform:translateX(18px);}
.feature-toggle input:focus-visible ~ .feature-toggle-track{outline:3px solid rgba(10,159,123,.22);outline-offset:2px;}

/* 按钮、分页、代码与焦点态 */
.btn:focus-visible,
.pagination a:focus-visible,
.settings-nav a:focus-visible,
.channel-tabs a:focus-visible{
  outline:3px solid rgba(10,159,123,.22);
  outline-offset:2px;
}
.pagination a{
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.pagination a:hover{
  border-color:#bfe4d8;
  background:#f1faf6;
  color:var(--primary-dark);
  transform:translateY(-1px);
}
.pagination a.active:hover{background:var(--primary);color:#fff;}
code{
  padding:2px 6px;
  border-radius:6px;
  background:#f1f7f4;
  color:#276451;
  font-size:11.5px;
}

/* 小屏页头 */
@media(max-width:600px){
  .topbar-context{display:none;}
  .topbar{padding:12px 16px;}
  .topbar-heading{gap:0;}
}

/* ============================================================
   小程序后台 · 发布检查
   ============================================================ */
.release-check{display:flex;flex-direction:column;gap:16px;}
.release-check-summary{
  display:flex;
  align-items:center;
  gap:22px;
  padding:18px 20px;
  border:1px solid #dceee7;
  border-radius:16px;
  background:
    radial-gradient(90% 140% at 100% 0,rgba(10,159,123,.10),transparent 55%),
    linear-gradient(135deg,#f6fcfa,#fff);
}
.release-check-score{flex:0 0 128px;min-width:0;}
.release-check-score > span{display:block;color:#7b8d86;font-size:10.5px;font-weight:700;letter-spacing:.8px;}
.release-check-score b{display:block;margin:3px 0 1px;color:#173f33;font-size:29px;font-weight:750;line-height:1.1;letter-spacing:-.6px;}
.release-check-score b small{color:#93a49e;font-size:12px;font-weight:600;letter-spacing:0;}
.release-check-score em{display:block;color:#7d8e88;font-size:10.5px;font-style:normal;line-height:1.6;}
.release-check-progress{flex:1;min-width:140px;}
.release-check-bar{height:9px;overflow:hidden;border-radius:999px;background:#e7f1ed;box-shadow:inset 0 1px 2px rgba(20,48,41,.05);}
.release-check-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0a9f7b,#5bd4b2);box-shadow:0 0 12px rgba(10,159,123,.18);transition:width .35s ease;}
.release-check-progress p{margin:8px 0 0;color:#7b8d86;font-size:11.5px;line-height:1.7;}
.release-check-list{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;}
.release-check-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto 90px;
  gap:13px;
  align-items:center;
  padding:15px 18px;
  border-top:1px solid #eef4f1;
  transition:background .15s;
}
.release-check-item:first-child{border-top:0;}
.release-check-item:hover{background:#fbfdfc;}
.release-check-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:10px;
  font-size:14px;
  font-weight:800;
  line-height:1;
}
.release-check-item.ok .release-check-icon{background:#e6f8ef;color:#0a7a56;}
.release-check-item.warn .release-check-icon{background:#fff6e6;color:#b7791f;}
.release-check-item.bad .release-check-icon{background:#fdecea;color:#c0392b;}
.release-check-item.info .release-check-icon{background:#eef4ff;color:#2b6fd6;}
.release-check-copy{min-width:0;}
.release-check-copy b{display:block;color:#203f35;font-size:13px;font-weight:650;line-height:1.4;}
.release-check-copy span{display:block;margin-top:2px;color:#7b8d86;font-size:11.5px;line-height:1.65;}
.release-check-copy code{padding:1px 5px;border-radius:5px;background:#f2f8f5;color:#3d6d5c;font-size:10.5px;}
.release-check-item .badge{justify-self:end;white-space:nowrap;}
.release-check-action{
  justify-self:end;
  color:var(--primary-dark);
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  transition:color .15s;
}
.release-check-action:hover{color:#055c49;text-decoration:underline;}
.release-check-action.is-muted{color:#a0aea8;font-weight:400;}
#mini-privacy,
#mini-templates{scroll-margin-top:96px;}

@media(max-width:820px){
  .release-check-summary{flex-wrap:wrap;gap:14px;}
  .release-check-score{flex-basis:110px;}
  .release-check-progress{flex-basis:calc(100% - 140px);}
  .release-check-summary > .badge{order:3;margin-left:auto;}
}
@media(max-width:560px){
  .release-check-summary{padding:15px 16px;}
  .release-check-score{flex-basis:100%;}
  .release-check-progress{flex-basis:100%;}
  .release-check-summary > .badge{margin-left:0;}
  .release-check-item{grid-template-columns:32px minmax(0,1fr) auto;gap:10px;padding:13px 14px;}
  .release-check-item .badge{grid-column:2;justify-self:start;}
  .release-check-action{grid-column:3;grid-row:2;align-self:center;}
}