/* 粒造社 · 工坊风界面 */

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

:root {
  --bg: #f3ece1;
  --bg2: #fffdf9;
  --bg3: #f6efe4;
  --bg4: #ece3d4;
  --border: #e5d9c6;
  --border2: #d4c4ab;
  --text: #2a221a;
  --text2: #6f6254;
  --text3: #9a8b78;
  --accent: #c45c26;
  --accent2: #e07a4c;
  --accent-ink: #fffdf8;
  --green: #2f8a6d;
  --red: #c24b45;
  --yellow: #c4922a;
  --orange: #d06a1f;
  --teal: #2a8a7e;
  --pink: #b85a72;
  --sidebar: #2a221b;
  --sidebar-2: #352b22;
  --sidebar-text: #f3eadc;
  --sidebar-muted: #b3a28c;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 28px rgba(42, 34, 26, .07);
  --shadow-lg: 0 22px 60px rgba(42, 34, 26, .16);
  --tr: all .2s cubic-bezier(.4, 0, .2, 1);
}

html, body { height: 100%; overflow: hidden }
body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  background: var(--bg);
  color: var(--text);
  letter-spacing: .01em;
}
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-thumb { background: #d2c3ad; border-radius: 8px }
::-webkit-scrollbar-track { background: transparent }

/* ========== 登录 ========== */
#login-page {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; background: var(--bg);
}
.login-art {
  flex: 1.08;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(224,122,76,.18), transparent 55%),
    radial-gradient(800px 500px at 80% 90%, rgba(42,138,126,.12), transparent 50%),
    linear-gradient(165deg, #3a2e24 0%, #2a221b 55%, #1f1914 100%);
  color: var(--sidebar-text);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.login-art::before {
  content: '';
  position: absolute; inset: -20%;
  background-image: radial-gradient(rgba(255,253,248,.08) 1.2px, transparent 1.4px);
  background-size: 18px 18px;
  opacity: .7;
}
.login-art-inner { position: relative; z-index: 1; text-align: center; padding: 40px 24px }
.login-hero-logo {
  width: min(420px, 78%);
  height: auto;
  display: block;
  margin: 0 auto 18px;
  filter: drop-shadow(0 22px 48px rgba(0,0,0,.38));
  image-rendering: auto;
}
.login-art p { color: var(--sidebar-muted); font-size: 14px; letter-spacing: .18em }
.login-panel {
  width: min(520px, 46vw); min-width: 380px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 40px 72px; position: relative;
  background:
    radial-gradient(circle at 1px 1px, rgba(196,92,38,.08) 1.2px, transparent 1.4px) 0 0 / 18px 18px,
    var(--bg);
}
.login-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 36px 32px;
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
  animation: slideModal .35s ease;
}
.login-logo { text-align: center; margin-bottom: 22px }
.login-box-logo {
  width: 196px; height: auto; display: block;
  margin: 0 auto 4px;
  filter: drop-shadow(0 10px 18px rgba(42,34,26,.12));
}
.login-logo h1 {
  font-size: 15px; margin: 2px 0 4px; letter-spacing: .08em;
  color: var(--text2); font-weight: 600;
}
.login-logo h1.is-default { display: none }
.login-logo p { font-size: 13px; color: var(--text3); letter-spacing: .16em }
.login-box input { width: 100%; margin-bottom: 14px; padding: 12px 14px; font-size: 15px }
.login-box .btn { width: 100%; padding: 12px; font-size: 15px; justify-content: center }
.login-error { color: var(--red); font-size: 13px; text-align: center; margin-bottom: 12px; display: none }
.login-footer {
  position: absolute; bottom: 22px; left: 0; right: 0;
  text-align: center; font-size: 12px; color: var(--text3);
}
.login-footer a { color: var(--text3); text-decoration: none }
.login-footer a:hover { color: var(--accent) }

/* ========== 品牌标识 ========== */
.brand-mark {
  width: 52px; height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.28));
}

/* ========== 应用壳 ========== */
#app { display: flex; height: 100vh; background: var(--bg) }
#sidebar {
  width: 232px; min-width: 232px;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
  box-shadow: 8px 0 32px rgba(42, 34, 26, .12);
}
.sidebar-logo {
  padding: 18px 16px 16px;
  display: flex; align-items: center; gap: 12px;
}
.sidebar-logo h1 { font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--sidebar-text) }
.sidebar-logo p { font-size: 11px; color: var(--sidebar-muted); margin-top: 3px; letter-spacing: .12em }
#nav { flex: 1; overflow-y: auto; padding: 4px 0 12px }
.nav-section {
  padding: 16px 20px 6px;
  font-size: 11px; color: var(--sidebar-muted);
  letter-spacing: .16em;
}
.nav-item {
  margin: 2px 10px; padding: 9px 12px;
  border-radius: 11px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: #d8cbb8;
  transition: var(--tr); position: relative;
}
.nav-item::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.nav-item:hover { background: rgba(255,253,248,.07); color: #fff }
.nav-item.active {
  background: linear-gradient(135deg, rgba(196,92,38,.92), rgba(224,122,76,.88));
  color: #fff;
  box-shadow: 0 8px 18px rgba(196,92,38,.28);
}
.nav-item[data-page="dashboard"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.5'/%3E%3Crect x='13' y='3' width='8' height='5' rx='1.5'/%3E%3Crect x='13' y='10' width='8' height='11' rx='1.5'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.5'/%3E%3C/svg%3E") }
.nav-item[data-page="seats"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11V8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3'/%3E%3Cpath d='M4 15h16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2z'/%3E%3Cpath d='M8 15v-4h8v4'/%3E%3C/svg%3E") }
.nav-item[data-page="coupons"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 1 0 0 4v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3a2 2 0 1 0 0-4V8z'/%3E%3Cpath d='M9 8v8'/%3E%3C/svg%3E") }
.nav-item[data-page="recharge"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.4 6.2L21 12l-6.6 2.8L12 21l-2.4-6.2L3 12l6.6-2.8L12 3z'/%3E%3C/svg%3E") }
.nav-item[data-page="register"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M19 8v6M16 11h6'/%3E%3C/svg%3E") }
.nav-item[data-page="members"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M16 19a4.6 4.6 0 0 1 5-4.2'/%3E%3C/svg%3E") }
.nav-item[data-page="sessions"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") }
.nav-item[data-page="ledger"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h11a2 2 0 0 1 2 2v14H8a2 2 0 0 1-2-2V4z'/%3E%3Cpath d='M6 4a2 2 0 0 0-2 2v12'/%3E%3Cpath d='M10 9h7M10 13h7'/%3E%3C/svg%3E") }
.nav-item[data-page="cashflow"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16l5-5 3.5 3.5L20 7'/%3E%3Cpath d='M14 7h6v6'/%3E%3C/svg%3E") }
.nav-item[data-page="products"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 11H7L6 8z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") }
.nav-item[data-page="inventory"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.6'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.6'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.6'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.6'/%3E%3C/svg%3E") }
.nav-item[data-page="users"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 19a7 7 0 0 1 14 0'/%3E%3C/svg%3E") }
.nav-item[data-page="logs"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h11M8 12h11M8 18h11'/%3E%3Ccircle cx='5' cy='6' r='1' fill='black'/%3E%3Ccircle cx='5' cy='12' r='1' fill='black'/%3E%3Ccircle cx='5' cy='18' r='1' fill='black'/%3E%3C/svg%3E") }
.nav-item[data-page="settings"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 4.5v1.6M12 17.9v1.6M4.5 12h1.6M17.9 12h1.6M6.7 6.7l1.1 1.1M16.2 16.2l1.1 1.1M17.3 6.7l-1.1 1.1M7.8 16.2l-1.1 1.1'/%3E%3C/svg%3E") }
.nav-item[data-page="backup"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v9'/%3E%3Cpath d='M8.5 10.5L12 14l3.5-3.5'/%3E%3Cpath d='M5 17.5V19a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1.5'/%3E%3C/svg%3E") }

.sidebar-footer {
  margin-top: auto; padding: 14px 14px 16px;
  border-top: 1px solid rgba(255,253,248,.08);
}
#user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.name { font-size: 13px; color: var(--sidebar-text); font-weight: 600 }
.sidebar-footer .btn { width: 100%; justify-content: center; margin-top: 8px }
.sidebar-footer .btn-ghost {
  background: rgba(255,253,248,.06);
  border-color: rgba(255,253,248,.1);
  color: #d8cbb8;
}
.sidebar-footer .btn-ghost:hover { border-color: var(--accent2); color: #fff }

#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0 }
#topbar {
  height: 64px; flex-shrink: 0;
  display: flex; align-items: center; padding: 0 28px; gap: 14px;
  background: rgba(255,253,249,.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
#topbar h2 { font-size: 18px; font-weight: 700; letter-spacing: .04em }
#topbar .spacer { flex: 1 }
.topbar-btn {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border2); background: var(--bg2);
  color: var(--text2); font-size: 13px; cursor: pointer;
  transition: var(--tr); display: flex; align-items: center; gap: 6px;
}
.topbar-btn:hover { border-color: var(--accent); color: var(--accent); background: #fff }
#clock {
  font-size: 13px; color: var(--text3);
  font-variant-numeric: tabular-nums;
  background: var(--bg3); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px;
}
#printer-status { cursor: default }

#content {
  flex: 1; overflow-y: auto;
  padding: 24px 28px 56px;
  background:
    radial-gradient(circle at 1px 1px, rgba(42,34,26,.045) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--bg);
}
.page { display: none; animation: fadeIn .22s ease }
.page.active { display: block }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes slideModal { from { transform: translateY(16px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }

/* ========== 卡片 / 统计 ========== */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap }
.card-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px }
.dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 3px rgba(196,92,38,.12) }

.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px }
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px }
.stat-card.blue::before { background: linear-gradient(90deg, #4a90c8, #98c1d9) }
.stat-card.green::before { background: linear-gradient(90deg, var(--green), var(--teal)) }
.stat-card.red::before { background: linear-gradient(90deg, var(--red), var(--pink)) }
.stat-card.yellow::before { background: linear-gradient(90deg, var(--yellow), var(--orange)) }
.stat-card.teal::before { background: linear-gradient(90deg, var(--teal), #81b29a) }
.stat-label { font-size: 12px; color: var(--text3); margin-bottom: 8px; letter-spacing: .04em }
.stat-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.stat-sub { font-size: 12px; color: var(--text3); margin-top: 6px }
.stat-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 30px; opacity: .14 }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.page-header { display: none }

/* ========== 工具栏 / 按钮 / 表单 ========== */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap }
.search-box {
  flex: 1; min-width: 200px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 999px; padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
}
.search-box input { background: none; border: none; outline: none; color: var(--text); font-size: 14px; flex: 1 }
.search-box input::placeholder { color: var(--text3) }

.btn {
  padding: 8px 16px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 13.5px; font-family: inherit; font-weight: 600;
  transition: var(--tr); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--accent-ink);
  box-shadow: 0 8px 18px rgba(196,92,38,.22);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.04) }
.btn-success { background: rgba(47,138,109,.1); color: var(--green); border: 1px solid rgba(47,138,109,.25) }
.btn-success:hover { background: rgba(47,138,109,.18) }
.btn-danger { background: rgba(194,75,69,.1); color: var(--red); border: 1px solid rgba(194,75,69,.25) }
.btn-danger:hover { background: rgba(194,75,69,.18) }
.btn-warn { background: rgba(196,146,42,.12); color: var(--yellow); border: 1px solid rgba(196,146,42,.28) }
.btn-warn:hover { background: rgba(196,146,42,.2) }
.btn-ghost { background: var(--bg2); color: var(--text2); border: 1px solid var(--border2) }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent) }
.btn-sm { padding: 5px 12px; font-size: 12px }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none }
.btn-secondary { background: rgba(196,146,42,.12); color: var(--yellow); border: 1px solid rgba(196,146,42,.28) }
.btn-secondary:hover { background: rgba(196,146,42,.2) }

select, input[type=text], input[type=number], input[type=date], input[type=tel], input[type=password], textarea {
  background: #fff; border: 1px solid var(--border2); border-radius: var(--radius-sm);
  color: var(--text); padding: 8px 12px; font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
select:focus, input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196,92,38,.12);
}
select option { background: #fff }
textarea { resize: vertical; min-height: 80px }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px }
thead th {
  background: #f8f1e6; padding: 11px 14px; text-align: left;
  font-weight: 600; color: var(--text2); white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
thead th:hover { color: var(--accent) }
tbody tr { border-bottom: 1px solid var(--border); transition: background .15s }
tbody tr:last-child { border-bottom: none }
tbody tr:hover { background: #fbf6ee }
tbody td { padding: 11px 14px; vertical-align: middle }
.table-empty { text-align: center; padding: 40px; color: var(--text3) }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.badge-green { background: rgba(47,138,109,.12); color: var(--green) }
.badge-red { background: rgba(194,75,69,.12); color: var(--red) }
.badge-blue { background: rgba(74,144,200,.12); color: #3a7cae }
.badge-yellow { background: rgba(196,146,42,.14); color: #a67b18 }
.badge-gray { background: rgba(154,139,120,.14); color: var(--text2) }
.badge-teal { background: rgba(42,138,126,.12); color: var(--teal) }
.badge-pink { background: rgba(184,90,114,.12); color: var(--pink) }

/* ========== 弹窗 / Toast ========== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(42, 34, 26, .46);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fadeOverlay .2s; backdrop-filter: blur(6px);
}
@keyframes fadeOverlay { from { opacity: 0 } to { opacity: 1 } }
.modal {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px; min-width: 400px; max-width: 600px;
  width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); animation: slideModal .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px }
.close { margin-left: auto; cursor: pointer; color: var(--text3); font-size: 22px; line-height: 1 }
.close:hover { color: var(--red) }
.form-row { margin-bottom: 14px }
.form-label { font-size: 12px; color: var(--text2); margin-bottom: 6px; display: block; font-weight: 600 }
.form-row input, .form-row select, .form-row textarea { width: 100% }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px }

.checkout-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px }
.checkout-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border) }
.checkout-row:last-child { border-bottom: none }
.checkout-key { font-size: 13px; color: var(--text2) }
.checkout-val { font-size: 14px; font-weight: 600 }
.checkout-highlight { color: var(--accent); font-size: 20px }
.balance-display { display: flex; gap: 10px; margin-top: 8px }
.balance-chip { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; text-align: center }
.balance-chip .label { font-size: 11px; color: var(--text3); margin-bottom: 4px }
.balance-chip .value { font-size: 16px; font-weight: 700 }
.balance-chip.principal .value { color: var(--accent) }
.balance-chip.gift .value { color: var(--green) }

/* ========== 座位 ========== */
.seats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 14px }
.seat-card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 18px; padding: 16px 12px 14px;
  cursor: pointer; transition: var(--tr); text-align: center;
  min-height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(42,34,26,.05);
  position: relative;
}
.seat-card::before {
  content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 6px; border-radius: 99px; background: var(--border2);
}
.seat-card.empty { border-style: dashed; background: #fffdf8 }
.seat-card.empty:hover { border-color: var(--green); background: rgba(47,138,109,.06); transform: translateY(-2px) }
.seat-card.occupied { border-color: rgba(194,75,69,.4); background: #fff6f4 }
.seat-card.occupied::before { background: var(--red) }
.seat-card.coupon { border-color: rgba(42,138,126,.45); background: #f3fbf8 }
.seat-card.coupon::before { background: var(--teal) }
.seat-card.overtime { border-color: rgba(208,106,31,.5); background: #fff6ec; animation: pulseOt 1.6s ease-in-out infinite }
.seat-card.overtime::before { background: var(--orange) }
.seat-card.reserved { border-color: rgba(196,146,42,.45); background: #fff9ec }
.seat-card.reserved::before { background: var(--yellow) }
.seat-card.coupon .seat-timer { color: var(--teal) }
.seat-card.overtime .seat-timer { color: var(--orange); font-weight: 700 }
@keyframes pulseOt { 50% { box-shadow: 0 0 0 4px rgba(208,106,31,.12) } }

.seat-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px }
.seat-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; color: var(--text2);
  background: var(--bg3); border: 1px solid var(--border);
}
.seat-legend-item i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0 }
.seat-legend-item.empty i { background: var(--green) }
.seat-legend-item.occupied i { background: var(--red) }
.seat-legend-item.coupon i { background: var(--teal) }
.seat-legend-item.overtime i { background: var(--orange) }
.seat-legend-item.reserved i { background: var(--yellow) }
.seat-name { font-size: 16px; font-weight: 700; margin: 8px 0 4px; display: flex; align-items: center; justify-content: center; gap: 8px }
.seat-delete { cursor: pointer; font-size: 14px; opacity: .45; transition: opacity .2s }
.seat-delete:hover { opacity: 1; color: var(--red) }
.seat-type-badge { font-size: 11px; color: var(--text3); letter-spacing: .04em }
.seat-status { margin-top: 8px }
.seat-timer { font-size: 13px; color: var(--yellow); margin-top: 6px; font-variant-numeric: tabular-nums; font-weight: 600 }
.seat-member { font-size: 12px; color: var(--text2); margin-top: 4px }

.color-swatch { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--border2); display: inline-block; vertical-align: middle }
input[type=color] { width: 40px; height: 34px; padding: 2px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border2); background: #fff }

.tab-nav { display: flex; gap: 4px; background: var(--bg3); border-radius: 999px; padding: 4px; margin-bottom: 16px; width: fit-content }
.tab-btn { padding: 7px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--text2); transition: var(--tr); font-weight: 600 }
.tab-btn.active { background: #fff; color: var(--text); box-shadow: 0 2px 10px rgba(42,34,26,.08) }

.chart-container { position: relative; height: 260px }
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px }
.toast {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 18px; font-size: 13.5px; color: var(--text);
  box-shadow: var(--shadow-lg); animation: toastIn .3s cubic-bezier(.34,1.56,.64,1);
  display: flex; align-items: center; gap: 8px; min-width: 200px;
}
.toast.success { border-left: 4px solid var(--green) }
.toast.error { border-left: 4px solid var(--red) }
.toast.info { border-left: 4px solid var(--accent) }
.toast.warn { border-left: 4px solid var(--yellow) }
@keyframes toastIn { from { transform: translateX(60px); opacity: 0 } to { transform: none; opacity: 1 } }

#coupon-alert-stack {
  position: fixed; right: 20px; bottom: 28px; z-index: 9800;
  display: flex; flex-direction: column-reverse; gap: 10px;
  max-width: 360px; width: min(360px, calc(100vw - 40px)); pointer-events: none;
}
.coupon-alert-item {
  pointer-events: auto; background: var(--bg2);
  border: 1px solid rgba(208,106,31,.35); border-left: 4px solid var(--orange);
  border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-lg);
}
.coupon-alert-item.coupon-alert-enter { animation: toastIn .25s ease }
.coupon-alert-item .ca-title { font-size: 13.5px; font-weight: 700; color: var(--orange); margin-bottom: 6px }
.coupon-alert-item .ca-body { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 10px }
.coupon-alert-item .ca-actions { display: flex; justify-content: flex-end }

.checkin-type-tabs { display: flex; gap: 8px; margin-bottom: 16px }
.checkin-type-tab {
  flex: 1; padding: 10px; border: 1.5px solid var(--border2); border-radius: 12px;
  text-align: center; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text2); transition: var(--tr);
}
.checkin-type-tab:hover { border-color: var(--accent); color: var(--text) }
.checkin-type-tab.active { border-color: var(--accent); background: rgba(196,92,38,.08); color: var(--accent) }
.checkin-type-tab.coupon.active { border-color: var(--teal); background: rgba(42,138,126,.1); color: var(--teal) }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text3) }
.empty-state .emoji { font-size: 36px; margin-bottom: 12px }
.money { font-variant-numeric: tabular-nums }
.money-pos { color: var(--green) }
.money-neg { color: var(--red) }
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px }
.filter-row label { font-size: 12px; color: var(--text3) }
.section-title { font-size: 13px; font-weight: 600; color: var(--text3); letter-spacing: .08em; margin-bottom: 12px }
.info-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px }
.info-item .k { font-size: 11px; color: var(--text3); margin-bottom: 2px }
.info-item .v { font-size: 14px; font-weight: 500 }

.product-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; cursor: pointer; transition: var(--tr); position: relative;
}
.product-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow) }
.product-card .name { font-size: 14px; font-weight: 600; margin-bottom: 6px }
.product-card .price { font-size: 18px; font-weight: 700; color: var(--accent) }
.product-card .stock { font-size: 12px; color: var(--text3); margin-top: 4px }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px }

.log-entry { padding: 10px 0; border-bottom: 1px solid var(--border) }
.log-time { font-size: 11px; color: var(--text3); margin-bottom: 4px }
.log-content { font-size: 13px }
.log-user { color: var(--accent) }

.role-selector { display: flex; gap: 8px }
.role-option { flex: 1; padding: 10px; border: 1.5px solid var(--border2); border-radius: 12px; text-align: center; cursor: pointer; transition: var(--tr) }
.role-option:hover { border-color: var(--accent) }
.role-option.selected { border-color: var(--accent); background: rgba(196,92,38,.08) }
.role-option .role-name { font-size: 14px; font-weight: 600; margin-bottom: 4px }
.role-option .role-desc { font-size: 11px; color: var(--text3) }

.toggle-switch { position: relative; width: 44px; height: 24px }
.toggle-switch input { opacity: 0; width: 0; height: 0 }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg4); border-radius: 24px; transition: var(--tr) }
.toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: var(--tr); box-shadow: 0 1px 4px rgba(0,0,0,.15) }
.toggle-switch input:checked + .toggle-slider { background: var(--accent) }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px) }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text2); flex-wrap: wrap }
.printer-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block }

.session-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px;
}
.session-row:last-child { border-bottom: none }
.stock-chip {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; display: flex; align-items: center; gap: 8px;
}

/* ========== 充值 ========== */
.recharge-container { display: grid; grid-template-columns: 1fr 380px; gap: 20px; height: calc(100vh - 120px) }
.recharge-plans-section { overflow-y: auto }
.recharge-plans-section .section-header,
.recharge-action-section .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px }
.recharge-plans-section .section-header h3,
.recharge-action-section .section-header h3 { font-size: 16px; font-weight: 600; color: var(--text) }
.recharge-plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px }
.recharge-plan-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 16px;
  padding: 20px; cursor: pointer; transition: var(--tr); position: relative; overflow: hidden;
}
.recharge-plan-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-color, var(--accent)) }
.recharge-plan-card:hover { border-color: var(--card-color, var(--accent)); transform: translateY(-2px); box-shadow: var(--shadow) }
.recharge-plan-card.selected {
  border-color: var(--card-color, var(--accent));
  background: rgba(196,92,38,.06);
  box-shadow: 0 10px 24px rgba(196,92,38,.12);
}
.recharge-plan-card .plan-icon { font-size: 32px; margin-bottom: 12px }
.recharge-plan-card .plan-name { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--text) }
.recharge-plan-card .plan-amounts { font-size: 13px; color: var(--text2); margin-bottom: 12px }
.recharge-plan-card .plan-gift { color: var(--green); margin-top: 4px }
.recharge-plan-card .plan-price { font-size: 18px; font-weight: 700; color: var(--card-color, var(--accent)) }
.recharge-plan-card .price-label { font-size: 11px; font-weight: 400; margin-right: 4px; color: var(--text3) }
.recharge-plan-card .plan-pay-method { font-size: 11px; color: var(--text3); margin-top: 8px; padding: 4px 8px; background: var(--bg3); border-radius: var(--radius-sm); display: inline-block }
.recharge-action-section { background: var(--bg2); border-radius: var(--radius); padding: 20px; border: 1px solid var(--border); height: fit-content; position: sticky; top: 20px }
.member-search-box { position: relative; margin-bottom: 16px }
.search-input-wrapper { display: flex; align-items: center; background: #fff; border: 1px solid var(--border2); border-radius: 999px; padding: 10px 14px; gap: 10px }
.search-input-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,92,38,.12) }
.search-icon { font-size: 16px; opacity: .6 }
.search-input-wrapper input { flex: 1; background: none; border: none; outline: none; font-size: 14px; color: var(--text) }
.search-input-wrapper input::placeholder { color: var(--text3) }
.search-results-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  margin-top: 4px; max-height: 300px; overflow-y: auto; z-index: 100; box-shadow: var(--shadow);
}
.search-result-item { padding: 12px 14px; cursor: pointer; transition: var(--tr); border-bottom: 1px solid var(--border) }
.search-result-item:last-child { border-bottom: none }
.search-result-item:hover { background: var(--bg3) }
.search-result-item .result-name { font-size: 14px; font-weight: 500; color: var(--text) }
.search-result-item .result-phone { font-size: 12px; color: var(--text3); margin: 4px 0 }
.search-result-item .result-balance { font-size: 12px; color: var(--accent) }
.search-no-result { padding: 20px; text-align: center; color: var(--text3); font-size: 13px }
.selected-member-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px; position: relative;
}
.selected-member-card .member-info { flex: 1 }
.selected-member-card .member-name { font-size: 15px; font-weight: 600; color: var(--text) }
.selected-member-card .member-phone { font-size: 13px; color: var(--text3); margin-top: 4px }
.selected-member-card .member-balance { display: flex; gap: 20px }
.selected-member-card .balance-item { text-align: center }
.selected-member-card .balance-label { font-size: 11px; color: var(--text3); display: block }
.selected-member-card .balance-value { font-size: 16px; font-weight: 600; color: var(--accent) }
.selected-member-card .balance-value.gift { color: var(--green) }
.selected-member-card .btn-clear { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text3); cursor: pointer; font-size: 16px; padding: 4px }
.selected-member-card .btn-clear:hover { color: var(--red) }
.recharge-preview { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px }
.recharge-preview .preview-header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px }
.recharge-preview .preview-plan-icon { font-size: 24px }
.recharge-preview .preview-plan-name { font-size: 15px; font-weight: 600 }
.recharge-preview .preview-details { font-size: 13px }
.recharge-preview .preview-row { display: flex; justify-content: space-between; padding: 6px 0; color: var(--text2) }
.recharge-preview .preview-row.total { font-size: 15px; font-weight: 600; color: var(--text); padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border) }
.recharge-preview .preview-principal { color: var(--accent) }
.recharge-preview .preview-gift { color: var(--green) }
.recharge-preview .preview-price { color: var(--yellow); font-size: 18px }
.recharge-preview .preview-note { font-size: 12px; color: var(--text3); text-align: center; margin: 10px 0 }
.recharge-preview .btn-block { width: 100%; margin-top: 12px }
.recharge-hint {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 20px; color: var(--text3);
  background: var(--bg3); border: 1.5px dashed var(--border2); border-radius: var(--radius); min-height: 200px;
}
.recharge-hint .hint-icon { font-size: 40px; margin-bottom: 16px; opacity: .5 }
.recharge-hint p { font-size: 14px; line-height: 1.6 }
.success-modal { text-align: center; max-width: 360px }
.success-icon { font-size: 60px; margin-bottom: 16px }
.success-modal h3 { font-size: 20px; color: var(--text); margin-bottom: 16px }
.success-details { background: var(--bg3); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 20px; text-align: left }
.success-details p { font-size: 13px; color: var(--text2); margin-bottom: 8px }
.success-balance { display: flex; justify-content: space-around; margin: 12px 0; padding: 12px; background: #fff; border-radius: var(--radius-sm) }
.success-balance .value { font-size: 20px; font-weight: 700; color: var(--green) }
.success-balance div span:first-child { color: var(--text3); margin-right: 8px }
.success-new-balance { text-align: center; padding-top: 12px; border-top: 1px solid var(--border) }
.success-new-balance p { font-size: 12px; color: var(--text3) }
.success-new-balance .balance-row { font-size: 15px; font-weight: 600; color: var(--accent); margin-top: 4px }
.success-new-balance .balance-row.gift { color: var(--green) }
.plans-management-list { display: flex; flex-direction: column; gap: 8px }
.plan-management-item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px;
}
.plan-management-item .plan-info { display: flex; align-items: center; gap: 12px; flex: 1 }
.plan-management-item .plan-icon { font-size: 24px }
.plan-management-item .plan-details .plan-name { font-size: 14px; font-weight: 600; color: var(--text) }
.plan-management-item .plan-details .plan-meta { font-size: 12px; color: var(--text3); margin-top: 4px }
.plan-management-item .plan-actions { display: flex; gap: 8px }
.plan-management-item .btn-icon { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; opacity: .7; transition: var(--tr) }
.plan-management-item .btn-icon:hover { opacity: 1 }
.plan-form .form-group { margin-bottom: 16px }
.plan-form label { display: block; font-size: 13px; color: var(--text3); margin-bottom: 6px }
.plan-form input, .plan-form select { width: 100%; padding: 10px 12px; background: #fff; border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 14px }
.plan-form input:focus, .plan-form select:focus { outline: none; border-color: var(--accent) }
.plan-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.plan-form small { display: block; font-size: 11px; color: var(--text3); margin-top: 4px }
.color-input-wrapper { display: flex; align-items: center; gap: 10px }
.color-input-wrapper input[type="color"] { width: 40px; height: 36px; padding: 2px; border: none; cursor: pointer }
.color-preview { width: 24px; height: 24px; border-radius: 4px; background: var(--accent) }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border) }

.footer-filing {
  display: none; position: fixed; bottom: 0; left: 232px; right: 0;
  text-align: center; padding: 8px; font-size: 12px; color: var(--text3);
  background: rgba(243,236,225,.92); border-top: 1px solid var(--border); z-index: 100;
}
.footer-filing a { color: var(--text3); text-decoration: none }
.footer-filing a:hover { color: var(--accent) }
#app.show ~ .footer-filing { display: block }

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border) }
.modal-header h3 { font-size: 17px; font-weight: 700; margin: 0 }
.modal-close { background: none; border: none; font-size: 20px; color: var(--text3); cursor: pointer; padding: 4px 8px; line-height: 1 }
.modal-close:hover { color: var(--red) }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr) }
}
@media (min-width: 901px) {
  .login-box-logo { width: 168px }
}
@media (max-width: 900px) {
  .login-art { display: none }
  .login-panel { width: 100%; min-width: 0 }
  .recharge-container, .two-col { grid-template-columns: 1fr }
  .stat-grid { grid-template-columns: repeat(2, 1fr) }
  #sidebar { width: 210px; min-width: 210px }
  .footer-filing { left: 210px }
}
@media (max-width: 600px) {
  .recharge-plans-grid { grid-template-columns: repeat(2, 1fr) }
  .stat-grid { grid-template-columns: 1fr }
}