/* ============================================================
   门店 WiFi 管理后台 · 样式
   纯手写 CSS，不用任何框架，改起来直观
   ============================================================ */

:root{
  --brown:#3E2723;
  --brown-2:#6B4029;
  --orange:#FF7A18;
  --orange-dark:#E8600A;
  --bg:#F6F1EC;
  --card:#FFFFFF;
  --line:#ECE0D6;
  --ink:#2A1B14;
  --muted:#8C7466;
  --green:#3B8C57;
  --red:#D84545;
  --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box;}

/* ------------------------------------------------------------
   【必读】hidden 属性的兜底规则，不要删！
   ------------------------------------------------------------
   HTML 上的 hidden 属性，是靠浏览器默认样式 [hidden]{display:none} 生效的。
   而浏览器默认样式的优先级低于我们写的 CSS，所以只要下面某条规则写了
   display:flex（比如 .modal-mask），就会把 hidden 顶掉 —— 元素照样显示。

   本项目里 .modal-mask 是 position:fixed 的全屏遮罩，一旦被顶掉，
   三个弹窗遮罩会从页面打开那一刻就盖在整页上面，
   表现就是「页面能看，但点什么都没反应」。

   所以这里必须显式兜底，且要 !important 才压得住带 display 的类。
   ------------------------------------------------------------ */
[hidden]{display:none!important;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

code{
  background:#F1EAE3;
  padding:1px 6px;
  border-radius:5px;
  font-size:12.5px;
  font-family:ui-monospace,Consolas,monospace;
  color:#B3244A;
}

/* ============================================================
   环境自检条
   只在"页面脚本没跑起来 / 报错"时出现。
   正常使用后台时永远不会看到它。
   ============================================================ */

.env-warn{
  background:#FFF4E5;
  border-bottom:2px solid var(--orange);
  color:#8A4B06;
  font-size:13px;
  line-height:1.9;
  padding:12px 18px;
  position:sticky;
  top:0;
  z-index:9999;
}
.env-warn b{color:#B3244A;}
.env-warn code{
  background:#fff;
  border:1px solid #F0D9BC;
  color:#8A4B06;
  word-break:break-all;
}

/* ---------- 通用按钮 ---------- */
.btn{
  border:none;
  border-radius:10px;
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 5px 14px rgba(255,122,24,.28);}
.btn-primary:hover{background:var(--orange-dark);}
.btn-ghost{background:#fff;color:var(--brown);border:1px solid var(--line);}
.btn-ghost:hover{background:#FAF5F1;}
.btn-danger{background:#FDEEEE;color:var(--red);border:1px solid #F8D8D8;}
.btn-danger:hover{background:#FBE2E2;}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:8px;}
.btn-block{display:block;width:100%;}
.btn:disabled{opacity:.55;cursor:not-allowed;}

/* ---------- 登录页 ---------- */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(150deg,#3E2723 0%,#6B4029 55%,#8A5230 100%);
}
.login-card{
  width:100%;
  max-width:380px;
  background:#fff;
  border-radius:20px;
  padding:36px 32px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.login-brand{text-align:center;margin-bottom:26px;}
.login-logo{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,#FF8A2B,#FF6A00);
  color:#fff;font-size:24px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
}
.login-brand h1{font-size:18px;font-weight:600;}
.login-brand p{font-size:12.5px;color:var(--muted);margin-top:5px;}
.login-err{
  background:#FDF0F0;border:1px solid #F7D5D5;color:#B33A3A;
  border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:14px;
}
.login-foot{text-align:center;font-size:11.5px;color:#B9A79B;margin-top:16px;}

/* ---------- 表单控件 ---------- */
.field{display:block;margin-bottom:18px;}
.field > span{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;}
.field > span i{color:var(--red);font-style:normal;}
.field input,.field textarea{
  display:block;width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#FCFAF8;
  font-size:14px;
  font-family:inherit;
  color:var(--ink);
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);background:#fff;
}
.field .tip{
  display:block;font-size:11.5px;color:#A8968A;
  font-style:normal;line-height:1.7;margin-top:6px;
}

/* 密码体检结果：录入时实时提示，避免把"顾客一定连不上"的密码录进去 */
.pwd-check{
  margin-top:9px;
  border-radius:9px;
  padding:10px 13px;
  font-size:12px;
  line-height:1.75;
}
.pwd-check.warn{background:#FFF6E8;border:1px solid #FFE0B8;color:#7A5320;}
.pwd-check.bad{background:#FDF0F0;border:1px solid #F7D5D5;color:#B33A3A;}
.pwd-check-head{font-weight:600;margin-bottom:3px;}
.pwd-check ul{list-style:none;margin:0;padding:0;}
.pwd-check li{position:relative;padding-left:12px;}
.pwd-check li::before{
  content:"";
  position:absolute;left:2px;top:8px;
  width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.55;
}

/* ---------- 顶栏 ---------- */
.topbar{
  background:linear-gradient(135deg,#3E2723 0%,#6B4029 100%);
  color:#fff;
  padding:0 28px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;top:0;z-index:50;
}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0;}
.topbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.logo-sm{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,#FF8A2B,#FF6A00);
  color:#fff;font-size:17px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.topbar-title{font-size:16px;font-weight:600;letter-spacing:.3px;}
.topbar-sub{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:2px;}
.topbar .btn-ghost{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
}
.topbar .btn-ghost:hover{background:rgba(255,255,255,.2);}

/* ---------- 布局 ---------- */
.container{max-width:1400px;margin:0 auto;padding:24px 28px 60px;}

/* ---------- 概览卡片 ---------- */
.overview{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
  margin-bottom:22px;
}
.stat-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
}
.stat-card.highlight{
  background:linear-gradient(135deg,#FFF6EE 0%,#FFEFE0 100%);
  border-color:#FFD9BA;
}
.stat-label{font-size:12.5px;color:var(--muted);margin-bottom:8px;}
.stat-value{font-size:29px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums;}
.stat-card.highlight .stat-value{color:var(--orange-dark);}
.stat-foot{font-size:11.5px;color:#B3A196;margin-top:7px;}

/* ---------- 工具条 ---------- */
.toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.search{
  flex:1 1 260px;
  max-width:340px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-size:14px;
  font-family:inherit;
}
.search:focus{outline:none;border-color:var(--orange);}
.toolbar-btns{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- 表格 ---------- */
.table-wrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.store-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.store-table th{
  text-align:left;
  font-weight:600;
  color:var(--muted);
  font-size:12.5px;
  padding:14px 14px;
  background:#FBF7F4;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.store-table td{
  padding:13px 14px;
  border-bottom:1px solid #F4EDE7;
  vertical-align:middle;
}
.store-table tr:last-child td{border-bottom:none;}
.store-table tbody tr:hover{background:#FDFAF8;}

.cell-code{
  font-family:ui-monospace,Consolas,monospace;
  font-weight:600;
  color:var(--brown);
}
.cell-name{
  font-weight:500;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cell-mono{
  font-family:ui-monospace,Consolas,monospace;
  font-size:12.5px;
  color:#5A463C;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.num{font-variant-numeric:tabular-nums;font-weight:600;}
.num-strong{color:var(--orange-dark);}

.badge{
  display:inline-block;
  font-size:11.5px;
  padding:3px 9px;
  border-radius:20px;
  font-weight:500;
}
.badge-on{background:#E9F6EE;color:var(--green);}
.badge-off{background:#F3F1EF;color:#9A8C82;}

.row-actions{display:flex;gap:7px;flex-wrap:wrap;}

.table-empty{
  text-align:center;
  color:var(--muted);
  padding:56px 20px;
  font-size:13.5px;
}

.page-foot{
  text-align:center;
  font-size:11.5px;
  color:#B9A79B;
  line-height:2;
  margin-top:28px;
}

/* ---------- 弹窗 ---------- */
.modal-mask{
  position:fixed;
  inset:0;
  background:rgba(42,27,20,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:200;
  overflow-y:auto;
}
.modal{
  background:#fff;
  border-radius:18px;
  width:100%;
  max-width:720px;
  box-shadow:0 24px 64px rgba(0,0,0,.28);
  animation:pop .18s ease both;
  margin:auto;
}
.modal-sm{max-width:420px;}
@keyframes pop{
  from{opacity:0;transform:translateY(12px) scale(.98);}
  to{opacity:1;transform:none;}
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px 14px;
  border-bottom:1px solid var(--line);
}
.modal-head h3{font-size:16px;font-weight:600;}
.modal-close{
  background:none;border:none;
  font-size:24px;line-height:1;
  color:#B9A79B;cursor:pointer;
  padding:0 4px;font-family:inherit;
}
.modal-close:hover{color:var(--brown);}
.modal-body{padding:22px 24px;max-height:70vh;overflow-y:auto;}
.modal-body.center{text-align:center;}
.modal-body .tip{
  font-size:13px;color:var(--muted);line-height:2;margin-bottom:16px;
}
.center-tip{font-size:12px;margin-top:18px;margin-bottom:0;text-align:center;}
.modal-foot{
  display:flex;justify-content:flex-end;gap:11px;
  padding:16px 24px 20px;
  border-top:1px solid var(--line);
}
.modal-err{
  background:#FDF0F0;border:1px solid #F7D5D5;color:#B33A3A;
  border-radius:9px;padding:11px 14px;font-size:13px;margin-top:14px;
  line-height:1.8;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 20px;
}
@media(max-width:680px){.form-grid{grid-template-columns:1fr;}}

.switch-row{
  display:flex;gap:26px;flex-wrap:wrap;
  padding-top:6px;border-top:1px dashed var(--line);margin-top:4px;
}
.switch{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;padding-top:12px;}
.switch input{width:16px;height:16px;accent-color:var(--orange);cursor:pointer;}

/* ---------- 二维码弹窗 ---------- */
.qr-box{
  width:220px;height:220px;
  margin:0 auto 16px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.qr-box canvas,.qr-box img{width:100%;height:100%;object-fit:contain;}
.qr-code{
  font-size:19px;font-weight:600;
  font-family:ui-monospace,Consolas,monospace;
  letter-spacing:1px;
  margin-bottom:6px;
}
.qr-link{
  font-size:12px;color:var(--muted);
  word-break:break-all;line-height:1.8;
  font-family:ui-monospace,Consolas,monospace;
}

/* ---------- 批量导入 ---------- */
.import-area{
  width:100%;
  min-height:190px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#FCFAF8;
  font-family:ui-monospace,Consolas,monospace;
  font-size:12.5px;
  line-height:2;
  resize:vertical;
}
.import-area:focus{outline:none;border-color:var(--orange);background:#fff;}
.import-actions{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:12px;gap:12px;flex-wrap:wrap;
}
.import-result{
  background:#F1F8F3;
  border:1px solid #CFE8D8;
  border-radius:10px;
  padding:13px 16px;
  font-size:13px;
  line-height:2;
  color:#2F6B45;
  margin-top:14px;
  max-height:200px;
  overflow-y:auto;
}
.import-result .fail{color:#B33A3A;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  left:50%;bottom:44px;
  transform:translateX(-50%) translateY(12px);
  background:rgba(42,27,20,.93);
  color:#fff;
  font-size:13.5px;
  padding:11px 22px;
  border-radius:24px;
  z-index:9999;
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
  max-width:80vw;
  text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- 窄屏适配 ---------- */
@media(max-width:900px){
  .container{padding:18px 14px 50px;}
  .topbar{padding:0 16px;height:64px;}
  .topbar-title{font-size:14.5px;}
  .table-wrap{overflow-x:auto;}
  .store-table{min-width:1000px;}
}