:root{
  --bg:#0b0f14;
  --card:#121826;
  --text:#e8eef7;
  --muted:#9fb0c3;
  --btn:#2563eb;
  --btn2:#334155;
  --danger:#ef4444;
}

*{
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,
    "PingFang SC","Microsoft YaHei";
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
}

/* ======================
   Layout
====================== */

.container{
  max-width:1100px;
  margin:0 auto;
  padding:18px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.brand{
  font-weight:700;
  font-size:16px;
}

/* ======================
   Cards / Blocks
====================== */

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
}

/* ======================
   Forms
====================== */

label{
  display:block;
  margin-top:10px;
  margin-bottom:6px;
  color:var(--muted);
  font-size:13px;
}

input,
textarea,
select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:#0f172a;
  color:var(--text);
}

/* ======================
   Buttons
====================== */

.btn{
  padding:10px 12px;
  border-radius:12px;
  background:var(--btn);
  color:#fff;
  border:none;
  cursor:pointer;
  font-weight:600;
}

.link{
  color:#93c5fd;
  font-weight:600;
  text-decoration:none;
}

.link.danger{
  color:var(--danger);
}

/* ======================
   Table (PC)
====================== */

table{
  width:100%;
  border-collapse:collapse;
  background:#0c1220;
}

th,td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13px;
}

/* ======================
   Mobile Cards
====================== */

.mobile-cards{
  display:none;
}

/* ======================
   Mobile Responsive
====================== */

@media (max-width:768px){

  /* 隐藏 PC 表格 */
  table{
    display:none;
  }

  /* 显示手机卡片 */
  .mobile-cards{
    display:block;
    margin-top:14px;
  }

  .shop-card{
    background:#0f172a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:14px;
    margin-bottom:12px;
  }

  .shop-title{
    font-size:16px;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    margin-bottom:6px;
  }

  .tag-recommend{
    background:#facc15;
    color:#000;
    font-size:12px;
    padding:2px 6px;
    border-radius:6px;
    font-weight:700;
  }

  .shop-row{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin:4px 0;
  }

  .shop-row .on{color:#22c55e;font-weight:700;}
  .shop-row .off{color:#ef4444;font-weight:700;}

  .shop-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
  }

  .shop-actions button,
  .shop-actions a{
    flex:1;
    padding:10px;
    border-radius:10px;
  }

  .container{
    padding:12px;
  }

  .brand{
    font-size:14px;
  }
}

/* public 表格：让类型列不至于太宽（可选） */
.table-wrap table td:nth-child(2),
.table-wrap table th:nth-child(2){
  width: 120px;
  white-space: nowrap;
}

/* =========================
   前台 · 卡片瀑布流
========================= */

body.public{
  background:#0b0f14;
  color:#e8eef7;
}

.public-header{
  position:sticky;
  top:0;
  background:#0b0f14;
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}

.empty{
  text-align:center;
  color:#9fb0c3;
  padding:40px 0;
}

/* =====================
   联系方式弹窗
===================== */

.contact-mask{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.contact-box{
  background:#0f172a;
  border-radius:16px;
  padding:20px;
  width:85%;
  max-width:320px;
  text-align:center;
  border:1px solid rgba(255,255,255,.12);
}

.contact-box h3{
  margin:0 0 14px;
  font-size:18px;
}

.contact-item{
  margin:8px 0;
  font-size:15px;
}

.close-btn{
  margin-top:14px;
  width:100%;
}

/* =========================
   推荐店铺 · 微高亮
========================= */

.shop-card.recommended,
tr.recommended {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.08),
    rgba(245, 158, 11, 0.02)
  );
  border: 1px solid rgba(245, 158, 11, 0.35);
}

/* PC 表格行高亮 */
tr.recommended td {
  font-weight: 600;
}

/* 推荐标签更精致 */
.tag-recommend {
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #111827;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}