:root{
  --green:#1D9E75; --green-d:#0F6E56; --green-l:#E1F5EE;
  --red:#E24B4A;   --red-l:#FCEBEB;
  --amber:#BA7517; --amber-l:#FAEEDA;
  --blue:#378ADD;  --blue-l:#E6F1FB;
  --txt:#1F1F1F; --txt2:#5F5E5A; --txt3:#8A8983;
  --bg:#F4F6F5; --card:#fff; --line:#E4E7E6;
  --side:#1E2A26; --side-hover:#2A3A34;
  --r:8px; --r-lg:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;color:var(--txt);background:var(--bg);line-height:1.6;
}
button,input,select,textarea{font-family:inherit;font-size:14px;outline:none}
a{color:inherit;text-decoration:none}

/* ---------------- 登录 ---------------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#0F6E56,#1D9E75 60%,#3BB98E);padding:20px;
}
.login-box{
  width:100%;max-width:380px;background:#fff;border-radius:16px;
  padding:36px 32px 28px;box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.login-logo{font-size:24px;font-weight:600;color:var(--green-d);text-align:center;letter-spacing:2px}
.login-sub{text-align:center;color:var(--txt3);font-size:13px;margin:4px 0 26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--txt2);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;height:42px;border:1px solid var(--line);border-radius:var(--r);
  padding:0 12px;background:#fff;transition:border-color .15s;
}
.field textarea{height:auto;padding:9px 12px;resize:vertical;min-height:76px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green)}
.login-tip{color:var(--red);font-size:13px;min-height:20px;margin-top:10px;text-align:center}
.login-hint{text-align:center;color:var(--txt3);font-size:12px;margin-top:14px}

/* ---------------- 按钮 ---------------- */
.btn{
  height:38px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;color:var(--txt);cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
}
.btn:hover{border-color:#C9CDCB;background:#FAFBFB}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-d);border-color:var(--green-d)}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-danger:hover{background:#C63A38;border-color:#C63A38}
.btn-ghost{background:transparent;border-color:transparent;color:var(--txt2)}
.btn-ghost:hover{background:#EEF1F0;border-color:transparent}
.btn-sm{height:31px;padding:0 12px;font-size:13px}
.btn-xs{height:26px;padding:0 9px;font-size:12px;border-radius:6px}
.btn-block{width:100%;height:44px;font-size:15px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------------- 布局 ---------------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:208px;background:var(--side);color:#C8D2CE;flex-shrink:0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{
  padding:20px 20px 16px;font-size:17px;font-weight:600;color:#fff;letter-spacing:1px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand span{display:block;font-size:11px;color:#7C8C86;font-weight:400;letter-spacing:0;margin-top:2px}
#nav{padding:10px 10px;flex:1;overflow-y:auto}
.nav-item{
  display:block;padding:10px 14px;border-radius:var(--r);font-size:13.5px;
  cursor:pointer;margin-bottom:2px;transition:all .13s;
}
.nav-item:hover{background:var(--side-hover);color:#fff}
.nav-item.active{background:var(--green);color:#fff;font-weight:500}
.side-foot{padding:14px;border-top:1px solid rgba(255,255,255,.08)}
.who{font-size:12px;color:#8FA09A;margin-bottom:8px;line-height:1.5}
.side-foot .btn-ghost{color:#B6C4BF;font-size:13px;padding:0}
.side-foot .btn-ghost:hover{background:var(--side-hover);color:#fff;padding:0 10px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:60px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;position:sticky;top:0;z-index:10;
}
.topbar h1{font-size:17px;font-weight:600}
.content{padding:22px 24px 40px;flex:1}

/* ---------------- 卡片 ---------------- */
.card{background:#fff;border-radius:var(--r-lg);padding:18px;margin-bottom:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;gap:12px;flex-wrap:wrap}
.card-head h3{font-size:15px;font-weight:600}
.card-head .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------------- 统计 ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:16px}
.stat{background:#fff;border-radius:var(--r-lg);padding:16px 18px;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.stat-label{font-size:12.5px;color:var(--txt3);margin-bottom:6px}
.stat-value{font-size:25px;font-weight:600;color:var(--green-d);line-height:1.2}
.stat-value.warn{color:var(--amber)}
.stat-value.danger{color:var(--red)}

/* ---------------- 表格 ---------------- */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
thead th{
  background:#FAFBFB;text-align:left;padding:10px 12px;font-weight:500;
  color:var(--txt2);white-space:nowrap;border-bottom:1px solid var(--line);
}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFCFB}
td.mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
td.actions{white-space:nowrap;display:flex;gap:6px;align-items:center}
.empty{text-align:center;color:var(--txt3);padding:36px 0;font-size:13px}

/* ---------------- 标签 ---------------- */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;line-height:1.6}
.badge-green{background:var(--green-l);color:var(--green-d)}
.badge-red{background:var(--red-l);color:var(--red)}
.badge-amber{background:var(--amber-l);color:var(--amber)}
.badge-blue{background:var(--blue-l);color:var(--blue)}
.badge-gray{background:#EEF1F0;color:var(--txt2)}

/* ---------------- 筛选栏 ---------------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filters input,.filters select{height:36px;border:1px solid var(--line);
  border-radius:var(--r);padding:0 12px;background:#fff;min-width:150px}
.filters input:focus,.filters select:focus{border-color:var(--green)}

/* ---------------- 分页 ---------------- */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  font-size:13px;color:var(--txt2)}
.pager button{height:31px;padding:0 12px;border:1px solid var(--line);
  border-radius:6px;background:#fff;cursor:pointer}
.pager button:disabled{opacity:.45;cursor:not-allowed}

/* ---------------- 表单栅格 ---------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---------------- 弹窗 ---------------- */
/* 关键修复：.modal-mask / .toast 用了 display:flex/block，
   会覆盖 HTML hidden 属性自带的 display:none，导致元素永远显示且关不掉。
   用 [hidden] 显式声明 display:none 并提高优先级来兜底。 */
[hidden]{display:none !important}

.modal-mask{
  position:fixed;inset:0;background:rgba(20,26,24,.5);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;
}
.modal-mask[hidden]{display:none !important}
.modal{background:#fff;border-radius:var(--r-lg);width:100%;max-width:640px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);animation:pop .16s ease-out}
@keyframes pop{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15.5px;font-weight:600}
.modal-x{border:0;background:none;font-size:24px;line-height:1;color:var(--txt3);
  cursor:pointer;padding:0 4px}
.modal-x:hover{color:var(--txt)}
.modal-body{padding:20px;max-height:64vh;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;
  padding:14px 20px;border-top:1px solid var(--line)}

/* ---------------- 提示 ---------------- */
.toast{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:200;
  background:#25322D;color:#fff;padding:11px 22px;border-radius:9px;font-size:13.5px;
  box-shadow:0 8px 26px rgba(0,0,0,.24);animation:pop .16s;
}
.toast[hidden]{display:none !important}
.toast.err{background:#B4342F}

/* ---------------- 详情 ---------------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13px}
.dl dt{color:var(--txt3);white-space:nowrap}
.dl dd{word-break:break-all}
.section-title{font-size:14px;font-weight:600;margin:20px 0 12px;
  padding-left:9px;border-left:3px solid var(--green)}

/* ---------------- 图片 ---------------- */
.thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;
  border:1px solid var(--line);background:var(--bg)}
.img-picker{display:flex;gap:9px;flex-wrap:wrap}
.img-picker .thumb-wrap{position:relative}
.img-picker .thumb{width:76px;height:76px;border-radius:8px}
.img-picker .del{
  position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  background:var(--red);color:#fff;border:0;font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.upload-btn{
  width:76px;height:76px;border:1px dashed #C9CDCB;border-radius:8px;background:#FAFBFB;
  cursor:pointer;color:var(--txt3);font-size:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
}
.upload-btn:hover{border-color:var(--green);color:var(--green)}

/* ---------------- 图片上传区块（置顶醒目） ---------------- */
.img-section{
  background:#F7FBF9;
  border:1px solid #D9EDE4;
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:18px;
}
.img-section-title{
  display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;margin-bottom:12px;
}
.img-section-label{
  font-size:13.5px;font-weight:500;color:var(--green-d);
}
.img-section-hint{
  font-size:11.5px;color:#7BA396;
}
.img-section .field{margin-bottom:0}
.img-section .field > label{display:none}
.img-section .upload-btn{
  width:88px;height:88px;
  border:1.5px dashed #A8D5C2;
  background:#fff;
}
.img-section .upload-btn:hover{
  border-color:var(--green);background:#F0FAF6;
}
.img-section .thumb{
  width:88px;height:88px;
}

/* ---------------- 提示条 ---------------- */
.tip{background:var(--blue-l);color:#1A5490;padding:11px 14px;border-radius:var(--r);
  font-size:13px;margin-bottom:14px;line-height:1.65}
.tip.warn{background:var(--amber-l);color:#7A4C09}
.tip.danger{background:var(--red-l);color:#8C2624}

@media(max-width:860px){
  .sidebar{position:fixed;left:-208px;z-index:50;transition:left .2s}
  .sidebar.open{left:0}
  .content{padding:16px 14px 32px}
  .topbar{padding:0 14px}
}

/* ---------------- ICP 备案号 ---------------- */
.admin-icp{
  text-align:center;
  padding:14px 20px 18px;
  font-size:11.5px;
  color:#9A9A9A;
  line-height:1.6;
}
.admin-icp a{
  color:#9A9A9A;
  text-decoration:none;
  border-bottom:1px dotted #D5D5D5;
}
.admin-icp a:hover{color:var(--green)}
.admin-icp .icp-sep{
  margin:0 8px;
  color:#D5D5D5;
}