/* ═══════════════════════════════════════════
   铭家会员运营管理系统 — 温润食记风
   餐饮运营手册 · 暖调 · 衬线字体 · 纸质肌理
   ═══════════════════════════════════════════ */

:root {
  /* Surfaces — warm cream & paper */
  --bg:        oklch(0.955 0.016 82);
  --surface:   oklch(0.99 0.008 82);
  --surface-hv: oklch(0.97 0.018 80);

  /* Sidebar — deep warm espresso, contrasts with light main */
  --sb-bg:     oklch(0.18 0.018 70);
  --sb-active: oklch(0.40 0.10 168);
  --sb-hover:  oklch(0.23 0.018 70);
  --sb-text:   oklch(0.92 0.006 82);
  --sb-muted:  oklch(0.58 0.018 72);

  /* Text — warm browns instead of cold grays */
  --text:      oklch(0.24 0.028 68);
  --text-sub:  oklch(0.36 0.028 68);
  --text-muted: oklch(0.48 0.025 68);
  --text-inv:  oklch(0.994 0.002 85);

  /* Accent — deep teal green, like menu embossing */
  --accent:    oklch(0.38 0.11 168);
  --accent-hv: oklch(0.44 0.12 168);
  --accent-bg: oklch(0.91 0.05 162);

  /* Data highlight — warm amber for key numbers */
  --hi:        oklch(0.52 0.17 60);
  --hi-bg:     oklch(0.93 0.06 78);

  /* Status */
  --ok:        oklch(0.44 0.12 142);
  --ok-bg:     oklch(0.92 0.05 140);
  --warn:      oklch(0.52 0.15 58);
  --warn-bg:   oklch(0.93 0.06 72);
  --err:       oklch(0.42 0.18 25);
  --err-bg:    oklch(0.93 0.04 25);

  /* Charts — richer tones */
  --ch-blue:   oklch(0.45 0.14 250);
  --ch-teal:   oklch(0.42 0.12 188);
  --ch-amber:  oklch(0.52 0.15 78);
  --ch-pink:   oklch(0.47 0.13 350);

  /* Borders — warm beige */
  --border:    oklch(0.82 0.025 78);
  --border-sb: oklch(0.25 0.018 70);

  /* Layout */
  --sb-w: 180px;
  --tb-h: 52px;

  /* Tokens */
  --r:       6px;
  --r-md:    8px;
  --r-lg:    10px;

  --font:        -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: "Noto Serif SC", "Source Han Serif SC", "STSong", "Songti SC", serif;
  --mono:       "SF Mono", "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--font);font-size:14.5px;line-height:1.6;
  color:var(--text);background:var(--bg);overflow:hidden;
  font-variant-numeric:tabular-nums;
}
input,button,select,textarea{font:inherit;font-variant-numeric:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;font-variant-numeric:tabular-nums}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:oklch(0.78 0.018 80);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:oklch(0.65 0.025 75)}

/* ── Shell ── */
.app{
  display:grid;
  grid-template-columns:var(--sb-w) 1fr;
  grid-template-rows:var(--tb-h) 1fr;
  grid-template-areas:"sb tb" "sb mn";
  height:100vh;width:100vw;
}

/* ── Sidebar ── */
.sidebar{
  grid-area:sb;
  background:var(--sb-bg);
  display:flex;flex-direction:column;overflow-y:auto;
  border-right:1px solid var(--border-sb);user-select:none;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:20px 18px 16px;
  border-bottom:1px solid var(--border-sb);
}
.sidebar-logo-svg{flex-shrink:0;color:var(--accent)}
.sidebar-title{
  font-family:var(--font-display);
  font-size:15px;font-weight:700;color:var(--sb-text);
  letter-spacing:0.02em;line-height:1.3;
}

.sidebar-nav{flex:1;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-md);
  color:var(--sb-muted);font-size:14px;font-weight:500;
  font-family:var(--font-display);
  transition:all 0.15s;
}
.sidebar-nav a:hover{background:var(--sb-hover);color:var(--sb-text)}
.sidebar-nav a.active{
  background:var(--sb-active);color:var(--text-inv);font-weight:700;
  box-shadow:0 2px 8px oklch(0.15 0.02 170 / 0.35);
}
.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:0.55}
.sidebar-nav a.active .nav-icon{opacity:1}

.sidebar-footer{
  padding:14px 18px;border-top:1px solid var(--border-sb);
  font-size:10.5px;color:var(--sb-muted);letter-spacing:0.04em;
  text-transform:uppercase;font-family:var(--font-display);
}
.sidebar-footer span{display:block;line-height:2}

/* ── Topbar ── */
.topbar{
  grid-area:tb;
  background:var(--surface);
  border-bottom:2px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;gap:14px;z-index:10;
  box-shadow:0 2px 8px oklch(0 0 0 / 0.05);
}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-title{
  font-family:var(--font-display);
  font-size:16px;font-weight:700;color:var(--text);
  letter-spacing:0.04em;
}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-select{
  height:30px;padding:0 6px 0 10px;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--bg);color:var(--text-sub);
  font-size:12px;font-weight:500;outline:none;cursor:pointer;
}
.topbar-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.topbar-user{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--text-sub);
  font-family:var(--font-display);
}
.topbar-avatar{
  width:26px;height:26px;border-radius:var(--r);background:var(--accent);
  color:var(--text-inv);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-family:var(--font-display);
}

/* ── Main ── */
.main{grid-area:mn;overflow-y:auto;padding:24px 28px}

.page{display:none}
.page.active{display:block}

/* ── Section header ── */
.section-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;margin-top:28px;
}
.section-hd:first-child{margin-top:0}
.section-hd h3{
  font-family:var(--font-display);
  font-size:14px;font-weight:700;color:var(--text);
  letter-spacing:0.06em;text-transform:uppercase;
}
.section-hd .section-sub{
  font-size:12px;color:var(--text-muted);margin-top:2px;
  font-family:var(--font-display);
}

/* ── KPI ── */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.kpi-card{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:18px 20px 18px 17px;
  transition:all 0.18s;
  box-shadow:0 2px 6px oklch(0 0 0 / 0.04);
}
.kpi-card:nth-child(2),
.kpi-card:nth-child(4),
.kpi-card:nth-child(7),
.kpi-card:nth-child(9){border-left-color:var(--hi)}
.kpi-card:hover{
  border-color:var(--accent);
  box-shadow:0 6px 16px oklch(0 0 0 / 0.08);
  transform:translateY(-2px);
}
.kpi-card .kpi-label{
  font-size:11px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;
  font-family:var(--font-display);
}
.kpi-card .kpi-value{
  font-size:30px;font-weight:800;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}

/* ── Trend ── */
.trend-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.trend-block{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:18px 22px;
  box-shadow:0 2px 6px oklch(0 0 0 / 0.04);
}
.trend-block h4{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  color:var(--text);margin-bottom:2px;
}
.trend-block .sub{
  font-size:10.5px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;
  font-family:var(--font-display);
}
.trend-block svg{width:100%;height:140px;overflow:visible}
.trend-legend{
  display:flex;gap:16px;margin-top:8px;
  font-size:10.5px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.04em;
}
.trend-legend span{display:flex;align-items:center;gap:5px}
.trend-dot{width:6px;height:6px;border-radius:1px;flex-shrink:0}

/* ── Panel ── */
.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 2px 6px oklch(0 0 0 / 0.04);
}
.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid var(--border);
}
.panel-header h3{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;
}
.panel-header p{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.panel-body{padding:16px 18px}
.panel-body.no-pad{padding:0}

/* ── Table ── */
.table-wrap{overflow-x:auto}
table{width:100%;font-size:13px}
thead th{
  position:sticky;top:0;z-index:1;
  background:var(--bg);padding:10px 12px;
  font-family:var(--font-display);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;
  color:var(--text-muted);text-align:left;
  border-bottom:2px solid var(--border);
}
tbody td{
  padding:10px 12px;border-bottom:1px solid var(--border);
  color:var(--text-sub);vertical-align:middle;
}
tbody tr:nth-child(even){background:oklch(0.978 0.007 82)}
tbody tr:hover{background:var(--surface-hv)}
tbody td:first-child{color:var(--text);font-weight:600}

/* ── Status pills ── */
.pill{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 10px;border-radius:99px;
  font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  font-family:var(--font-display);
}
.pill-brand{background:var(--accent-bg);color:var(--accent)}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-err{background:var(--err-bg);color:var(--err)}
.pill-muted{background:var(--bg);color:var(--text-muted)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--r);
  font-size:12.5px;font-weight:600;letter-spacing:0.02em;
  transition:all 0.15s;font-family:var(--font-display);
}
.btn-primary{background:var(--accent);color:var(--text-inv);box-shadow:0 2px 4px oklch(0.42 0.08 170 / 0.2)}
.btn-primary:hover{background:var(--accent-hv);box-shadow:0 4px 8px oklch(0.42 0.08 170 / 0.25)}
.btn-ghost{
  color:var(--text-sub);border:1px solid var(--border);
  background:var(--surface);
}
.btn-ghost:hover{background:var(--bg);border-color:var(--text-muted);color:var(--text)}
.btn-sm{padding:4px 10px;font-size:11.5px}

/* ── Alerts ── */
.alert-grid{display:flex;flex-direction:column;gap:8px}
.alert-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--surface);
  font-size:12px;line-height:1.55;
}
.alert-item.warn{border-left:3px solid var(--warn)}
.alert-item.info{border-left:3px solid var(--accent)}

/* ── Login ── */
.login-overlay{
  position:fixed;inset:0;z-index:999;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 80%, oklch(0.94 0.04 150 / 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, oklch(0.95 0.04 80 / 0.25) 0%, transparent 60%);
}
.login-box{
  width:min(420px, calc(100vw - 48px));
  min-height:auto;
  padding:30px 30px 28px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:0 8px 32px oklch(0 0 0 / 0.06), 0 2px 8px oklch(0 0 0 / 0.03);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.login-logo-img{
  width:70px;
  height:70px;
  max-width:70px;
  max-height:70px;
  object-fit:contain;
  display:block;
  border-radius:18px;
  box-shadow:0 8px 18px oklch(0 0 0 / 0.08);
}
.login-box h1{
  font-family:var(--font-display);font-size:24px;font-weight:800;
  letter-spacing:0.03em;text-align:center;color:var(--text);
  line-height:1.1;
  margin-top:0;
  margin-bottom:0;
}
.login-form{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  margin-top:8px;
}
.login-box label{
  display:block;font-size:15px;font-weight:700;color:var(--text-sub);
  margin-bottom:8px;text-transform:uppercase;letter-spacing:0.06em;
  font-family:var(--font-display);
  text-align:left;
}
.login-box input{
  width:100%;height:44px;padding:0 14px;
  border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:16px;font-size:16px;outline:none;
  background:var(--bg);color:var(--text);
  transition:border-color 0.15s, box-shadow 0.15s;
}
.login-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.login-box .btn{width:100%;justify-content:center;height:42px;font-size:14px;margin-top:2px}
.login-error{color:var(--err);font-size:11.5px;font-weight:600;margin-bottom:10px;display:none}

/* ── Modal / Dialog ── */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:oklch(0 0 0 / 0.35);
  display:flex;align-items:center;justify-content:center;
}
.modal-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px 32px;
  width:440px;max-width:90vw;max-height:80vh;overflow-y:auto;
  box-shadow:0 12px 40px oklch(0 0 0 / 0.12);
}
.modal-box h3{
  font-family:var(--font-display);font-size:16px;font-weight:700;
  margin-bottom:16px;color:var(--text);
}
.modal-box label{
  display:block;font-size:11px;font-weight:700;color:var(--text-sub);
  margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;
  font-family:var(--font-display);
}
.modal-box input[type="text"],
.modal-box input[type="password"]{
  width:100%;height:38px;padding:0 12px;
  border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:12px;font-size:13px;outline:none;
  background:var(--bg);color:var(--text);
  transition:border-color 0.15s;
}
.modal-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.modal-error{color:var(--err);font-size:11.5px;font-weight:600;margin-bottom:10px;display:none}

/* ── Permissions Checklist ── */
.perm-checkbox-group{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px;
}
.perm-checkbox-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg);cursor:pointer;transition:all 0.15s;
  font-size:13px;color:var(--text-sub);
}
.perm-checkbox-item:hover{border-color:var(--accent);background:var(--surface-hv)}
.perm-checkbox-item.checked{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);font-weight:600}
.perm-checkbox-item input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px}

/* ── Empty ── */
.empty{padding:36px 18px;text-align:center;color:var(--text-muted);font-size:13px;font-family:var(--font-display)}

/* ── Responsive ── */
@media(max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .trend-strip{grid-template-columns:1fr}
}
@media(max-width:768px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .main{padding:16px}
  .login-box{
    width:min(420px, calc(100vw - 24px));
    min-height:auto;
    padding:28px 24px;
  }
  .login-box h1{font-size:22px}
  .login-box label{font-size:14px}
}