/* 发廊会员管理系统 - 后台全局样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  background: #f5f3ef;
  color: #24201d;
  font-size: 14px;
  line-height: 1.6;
}
a { color: #0f766e; text-decoration: none; }
a:hover { color: #0c635c; }

/* ===== 整体布局 ===== */
.layout { display: flex; min-height: 100vh; }

/* ===== 侧边栏 ===== */
.sidebar {
  width: 236px; flex-shrink: 0;
  background: linear-gradient(180deg, #173d39, #0f2b28);
  color: #d5e5e1;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-mark {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(217, 163, 95, 0.16); color: #e0b77f;
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title { font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; }
.brand-sub { font-size: 11px; color: #8eb0ab; margin-top: 2px; }

.sidebar-nav { flex: 1; padding: 12px 12px; overflow-y: auto; }
.nav-section {
  padding: 12px 14px 6px; font-size: 11px; color: #71968f;
}
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px; margin: 2px 0;
  border-radius: 9px; color: #c6ddd8; font-size: 14px;
  transition: background .15s, color .15s;
}
.nav-item .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.92; }
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.nav-item.active { background: #1f7a70; color: #fff; font-weight: 600; }

.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.user-box { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.avatar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #d9a35f, #b6553e); color: #fff;
  font-size: 15px; font-weight: 700;
}
.user-meta { display: flex; flex-direction: column; min-width: 0; }
.user-name { color: #fff; font-size: 13.5px; font-weight: 700; }
.user-role { color: #9ab9b4; font-size: 12px; }
.user-expiry { color: #71968f; font-size: 11px; margin-top: 2px; }
.logout-link {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: #c6ddd8; padding: 7px 10px; border-radius: 8px;
}
.logout-link svg { width: 16px; height: 16px; }
.logout-link:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* ===== 主区域 ===== */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  padding: 16px 28px; background: #fff; border-bottom: 1px solid #e8e4dd;
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topbar-left { min-width: 0; }
.page-title { font-size: 19px; font-weight: 700; color: #1e2b29; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar-context {
  font-size: 12.5px; color: #0f766e; background: #edf5f2;
  padding: 5px 12px; border-radius: 999px; font-weight: 600;
}
.topbar-date { font-size: 12.5px; color: #8a8279; }
.content { padding: 24px 28px; flex: 1; }

/* ===== 提示 ===== */
.alert { padding: 11px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 13.5px; }
.alert-success { background: #eaf7ea; color: #2e7d32; border: 1px solid #cde8cd; }
.alert-error { background: #fdecec; color: #c62828; border: 1px solid #f5cccc; }

/* ===== 统计卡片 ===== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
  min-width: 0; background: #fff; border: 1px solid #e8e4dd;
  border-radius: 12px; padding: 17px 18px;
}
.stat-label { font-size: 12.5px; color: #7c756c; }
.stat-value { font-size: 24px; font-weight: 800; color: #b6553e; margin-top: 5px; }
.stat-value .unit { font-size: 12px; color: #7c756c; font-weight: 400; margin-left: 2px; }
.stat-sub { font-size: 12px; color: #7c756c; margin-top: 2px; }

/* ===== 卡片 ===== */
.card {
  background: #fff; border: 1px solid #e8e4dd; border-radius: 12px;
  padding: 20px; margin-bottom: 18px;
}
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: #1e2b29; }
.card-title .hint { font-size: 12px; color: #7c756c; font-weight: 400; margin-left: 8px; }

/* ===== 表格 ===== */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; padding: 10px 12px; background: #f7f5f1;
  color: #6f675e; font-weight: 600; border-bottom: 1px solid #e8e4dd; white-space: nowrap;
}
.table td { padding: 10px 12px; border-bottom: 1px solid #f0ede8; vertical-align: middle; }
.table tr:hover td { background: #faf8f5; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== 徽章 ===== */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
}
.badge-normal { background: #eeece8; color: #574f47; }
.badge-silver { background: #eef2fa; color: #3d5a99; }
.badge-gold { background: #fdf3df; color: #9a6b00; }
.badge-diamond { background: #e7f3f0; color: #0f766e; }
.badge-active { background: #eaf7ea; color: #2e7d32; }
.badge-inactive { background: #fdecec; color: #c62828; }
.badge-pending { background: #fdf3df; color: #9a6b00; }
.badge-done { background: #eaf7ea; color: #2e7d32; }
.badge-cancelled { background: #eeece8; color: #7c756c; }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 9px; border: 1px solid transparent;
  font-size: 13.5px; cursor: pointer; background: #0f766e; color: #fff;
  transition: background .15s, border-color .15s; text-decoration: none; line-height: 1.4;
}
.btn:hover { background: #0c635c; color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }
.btn-outline { background: #fff; color: #0f766e; border-color: #bfdcd6; }
.btn-outline:hover { background: #edf5f2; color: #0f766e; }
.btn-danger { background: #d84040; }
.btn-danger:hover { background: #bd3434; }
.btn-ghost { background: #fff; color: #6f675e; border-color: #ded9d1; }
.btn-ghost:hover { background: #f5f2ed; color: #2f2a25; }
.btn-block { display: flex; width: 100%; }

/* ===== 表单 ===== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; color: #574f47; margin-bottom: 5px; font-weight: 500; }
.form-control, select.form-control, textarea.form-control {
  width: 100%; padding: 9px 12px; border: 1px solid #ded9d1; border-radius: 9px;
  font-size: 13.5px; background: #fff; color: #24201d; font-family: inherit;
}
.form-control:focus { outline: none; border-color: #4c8d84; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12); }
textarea.form-control { resize: vertical; min-height: 70px; }
.form-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.form-hint { font-size: 12px; color: #7c756c; margin-top: 4px; }
.form-hint .hint, .form-group .hint { color: #9a927f; font-weight: 400; }
.store-url-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: center; }
.store-url-row .form-control { flex: 1 1 280px; }
.search-select { position: relative; }
.search-select-menu {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 30;
  display: none; background: #fff; border: 1px solid #e0dbd2; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(30, 43, 41, 0.16); max-height: 260px; overflow-y: auto;
}
.search-select-menu.show { display: block; }
.search-select-option { padding: 10px 12px; font-size: 13.5px; cursor: pointer; color: #24201d; }
.search-select-option:hover { background: #f0f5f3; }
.search-select-empty { padding: 12px; color: #8a8279; font-size: 13px; text-align: center; }

/* ===== 工具栏 ===== */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 16px; align-items: center; }
.toolbar-left, .toolbar-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ===== 模态弹窗 ===== */
.modal-mask { display: none; position: fixed; inset: 0; background: rgba(20,15,30,0.45); z-index: 100; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal-mask.show { display: flex; }
.modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.modal.modal-lg { max-width: 760px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close { border: none; background: none; font-size: 20px; cursor: pointer; color: #888; line-height: 1; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

/* ===== 会员详情 ===== */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.detail-item { background: #faf8f5; border-radius: 10px; padding: 10px 14px; }
.detail-item .k { font-size: 12px; color: #7c756c; }
.detail-item .v { font-size: 14px; font-weight: 600; margin-top: 2px; color: #24201d; }
.profile-card { background: #fff; border: 1px solid #e8e4dd; border-radius: 12px; margin-bottom: 18px; overflow: hidden; }
.profile-top { display: flex; align-items: center; gap: 18px; padding: 20px; flex-wrap: wrap; }
.profile-avatar {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #d9a35f, #b6553e); color: #fff;
  font-size: 26px; font-weight: 700;
}
.profile-main { flex: 1 1 240px; min-width: 0; }
.profile-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 20px; font-weight: 800; color: #17302d; }
.profile-meta { margin-top: 5px; color: #7c756c; font-size: 13.5px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 1px solid #e8e4dd; background: #faf8f5; }
.profile-stat { padding: 15px 20px; }
.profile-stat-value { font-size: 18px; font-weight: 800; color: #17302d; }
.profile-stat-label { font-size: 12px; color: #7c756c; margin-top: 2px; }

/* ===== 开单 ===== */
.consume-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.service-pick { border: 1px solid #e8e4dd; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.service-pick .name { font-weight: 600; }
.service-pick .price { color: #b6553e; font-weight: 700; }
.summary-box { background: #f7f5f1; border-radius: 10px; padding: 12px 14px; }
.summary-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13.5px; }
.summary-line.total { font-weight: 700; font-size: 16px; color: #b6553e; border-top: 1px dashed #ded9d1; margin-top: 6px; padding-top: 8px; }

/* ===== 简易柱状图 ===== */
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.bar-fill { width: 70%; max-width: 34px; background: linear-gradient(180deg, #57a79b, #0f766e); border-radius: 5px 5px 0 0; min-height: 2px; }
.bar-label { font-size: 11px; color: #7c756c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bar-value { font-size: 10.5px; color: #8a8279; }

/* ===== 登录页 ===== */
.login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #173d39, #0f766e);
  padding: 20px;
}
.login-card {
  background: #fff; border-radius: 16px; width: 100%; max-width: 400px;
  padding: 34px 32px; box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
.login-title { font-size: 20px; font-weight: 800; text-align: center; color: #173d39; }
.login-sub { text-align: center; color: #7c756c; font-size: 13px; margin: 6px 0 24px; }
.demo-hint { margin-top: 18px; padding: 12px 14px; background: #f7f5f1; border-radius: 10px; font-size: 12.5px; color: #574f47; line-height: 1.8; }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .sidebar { width: 66px; }
  .sidebar-brand { padding: 18px 13px; justify-content: center; }
  .brand-text, .nav-item span, .nav-section, .user-meta, .logout-link span { display: none; }
  .nav-item { padding: 12px; justify-content: center; }
  .nav-item .nav-icon { width: 19px; height: 19px; }
  .sidebar-footer { padding: 12px; }
  .user-box { justify-content: center; margin-bottom: 8px; }
  .logout-link { justify-content: center; }
  .topbar { padding: 14px 16px; }
  .topbar-date { display: none; }
  .content { padding: 16px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 13px 14px; }
  .stat-value { font-size: 20px; }
  .modal-mask { padding: 16px 10px; }
  .modal, .modal.modal-lg { max-width: 100%; padding: 16px; border-radius: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .table th, .table td { padding: 9px 8px; }
  .members-table .desktop-only { display: none; }
}