:root{
  --bg:#0b1220;--card:#101827;--muted:#9ca3af;--text:#e5e7eb;--primary:#22d3ee;--primary-2:#06b6d4;--ok:#22c55e;--danger:#ef4444;--border:#1f2a3b
}



*{box-sizing:border-box}
html,body{height:100%}
body{background:radial-gradient(1200px 800px at 60% -10%, #0f172a 0%, #0b1220 60%, #07111f 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,PingFang SC,Microsoft YaHei,sans-serif;margin:0}
.container{max-width:1280px;margin:0 auto;padding:20px}
.topbar{position:sticky;top:0;z-index:999;background:rgba(8,13,24,.85);backdrop-filter:blur(8px);border-bottom:1px solid #0f2338}
.topbar-inner{display:flex;align-items:center;gap:16px;max-width:1280px;margin:0 auto;padding:14px 20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.5px}
.brand .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#9fef00)}
.brand .title{font-size:18px}
.hnav{display:flex;gap:6px;margin-left:24px}
.hnav .tab{padding:10px 16px;border-radius:12px;background:#101826;border:1px solid #162235;color:#cbd5e1;cursor:pointer;font-weight:600}
.hnav .tab.active{background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#06242d;border-color:transparent}
.hnav .tab:hover{border-color:#2a3b52}
.hnav .aux{margin-left:auto;display:flex;gap:8px}
.btn{padding:10px 14px;border-radius:12px;border:1px solid #1e293b;background:#0b1220;color:#e5e7eb;cursor:pointer}
.btn:hover{border-color:#2a3b52}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#06242d;border-color:transparent;font-weight:700}
.btn.danger{background:#dc2626;border-color:#991b1b}
.card{background:rgba(16,24,39,.65);border:1px solid #162235;border-radius:16px;padding:16px;margin-top:18px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.row{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:1100px){.row-2{grid-template-columns:420px 1fr}}
h1,h2,h3{margin:8px 0 12px}
label{display:block;margin:8px 0 4px;color:#a8b0bb}
input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #233147;background:#0d1525;color:#e5e7eb;outline:none}
textarea{min-height:120px;resize:vertical}
.small{font-size:12px;color:#9aa5b2}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;background:#132135;color:#9ee8ff;font-size:12px}
.list{border:1px dashed #2a3b52;border-radius:12px;padding:8px}
.list .item{padding:8px;border-radius:10px;margin:6px 0;background:#0b1220;border:1px solid #223147;display:flex;justify-content:space-between;gap:8px;align-items:center}
.list .item.active{outline:2px solid var(--primary)}
.list .item.dragging{opacity:.6}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px 8px;border-bottom:1px solid #1e2a3d}.table th{color:#a8b0bb;font-weight:500}
.kv{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center}
.phone{width:320px;height:640px;border:12px solid #0b1220;border-radius:36px;background:#000;position:relative;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.phone .screen{position:absolute;inset:0;background:#fff;border-radius:24px;overflow:auto}
.phone .header{background:#0ea5e9;color:#063042;padding:10px 12px;border-radius:24px 24px 0 0;font-weight:700}
.phone ul{list-style:none;padding:12px;margin:0}
.phone li{padding:10px 12px;border-bottom:1px solid #e5e7eb}
.counter{font-size:12px;margin-left:8px}
.ok{color:#22c55e}.err{color:#ef4444}
.flex{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.right-actions{display:flex;gap:8px;flex-wrap:wrap}
/* 顶栏 logo 用站点根目录 /images/weixin.png */
.topbar .brand .logo{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: url('/images/weixin.png') center/cover no-repeat !important;
  box-shadow: none; /* 可选：去掉原来的渐变阴影 */
}
.req{color:#f66;margin-right:4px;}
/* 统一头部控件高度 */
.mat-head .right select { 
  height:34px;
  padding:0 12px;
  font-size:14px;
  line-height:1;          /* 防止某些系统字体把控件撑高 */
  border-radius:12px;
  box-sizing:border-box;
}

/* 关闭为独立图标按钮，不继承 .btn 的大边框与内边距 */
.icon-btn{
  width:34px; height:34px;
  display:inline-grid; place-items:center;
  background:transparent; border:0; cursor:pointer;
  border-radius:10px;
  transition:background .15s ease, opacity .15s ease;
}
.icon-btn:hover{ background:#162238; }
.icon-btn:active{ transform:translateY(0.5px); }

/* 画一个“X” */
.icon-btn .x{
  position:relative; width:16px; height:16px;
}
.icon-btn .x::before,
.icon-btn .x::after{
  content:""; position:absolute; left:50%; top:50%;
  width:16px; height:2px; background:#c8d3e0;
  transform-origin:center;
}
.icon-btn .x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.icon-btn .x::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* 让右侧区内部间距更舒服些 */
.mat-head .right{ gap:10px; }

.text-btn{
  height:34px;              /* 与 select 一致 */
  padding:0 16px;           /* 左右留白 */
  min-width:64px;           /* 关键：保证能放下两个字 */
  font-size:14px;
  line-height:34px;         /* 垂直居中 */
  color:#cde;
  background:transparent;
  border:1px solid #2a3b4d;
  border-radius:10px;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;       /* 禁止换行 */
  text-align:center;        /* 水平居中 */
}

.text-btn:hover{
  background:#162238;
  color:#fff;
}

.text-btn:active{
  background:#22334a;
}
/* === 预览弹层 (.pv-*) === */
.pv-mask{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.65); z-index:2600; /* 要比 .mat-mask(2000) 大 */
}
.pv-box{
  width:min(900px,96vw); max-height:86vh;
  background:#0b1320; border:1px solid #203040; border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.55);
  display:flex; flex-direction:column; overflow:hidden;
}
.pv-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid #203040;
}
.pv-title{ font-weight:600; }
.pv-meta{
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; border-bottom:1px solid #203040; color:#9ab;
}
.pv-id{ font-family:ui-monospace,Consolas,monospace; font-size:12px; word-break:break-all; opacity:.9; }
.pv-time{ font-size:12px; opacity:.75; }
.pv-body{ padding:12px; overflow:auto; }
.pv-foot{
  display:flex; gap:8px; padding:10px 12px;
  border-top:1px solid #203040; background:#0e1828;
}

/* 内容形态 */
.pv-img{ max-width:100%; height:auto; display:block; margin:0 auto; border-radius:8px; }
.pv-media{ width:100%; max-height:68vh; display:block; margin:0 auto; border-radius:8px; }
.pv-empty{ padding:30px 10px; text-align:center; color:#9ab; }

.pv-news{ display:flex; gap:12px; align-items:flex-start; }
.pv-news .pv-img{ width:180px; height:auto; flex-shrink:0; }
.pv-news-list{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.pv-article{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid #223446; background:#0f1a2a; border-radius:8px; padding:8px 10px;
}
.pv-ttl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-open{ font-size:12px; opacity:.9; }
.form-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px;
  border-top:1px dashed #203040;
}
.rt-grid{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:nowrap;       /* 不换行 */
}

/* 左侧：两个参数并排 */
.rt-left{
  display:flex;
  align-items:center;
  gap:24px;
  flex:1 1 auto;          /* 占满剩余空间，把按钮顶到右侧 */
  min-width:0;
}

/* 表单项横向排布 */
.kv.kv-compact{ display:flex; align-items:center; gap:8px; }
.kv.kv-compact label{ white-space:nowrap; margin-right:6px; }
.kv.kv-compact .field{ display:flex; align-items:center; gap:6px; }
.kv.kv-compact .field input.num{ width:80px; padding:4px 6px; text-align:center; }
.kv .unit,.kv .tip{ white-space:nowrap; }
.kv .tip{ font-size:12px; opacity:.7; }

/* 右侧按钮组靠右 */
.rt-actions{
  margin-left:auto;       /* 关键：把按钮组推到最右边 */
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.rt-actions .btn{
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
}