:root {
  --bg-page: #f8fafc;
  --text-primary: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --retail: #7e22ce;
  --retail-hover: #6b21a8;
  --focus: #2563eb;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
}
.layout-app { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; background: #fff; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar-brand { padding: 20px 18px; border-bottom: 1px solid var(--border); }
.sidebar-brand h1 { font-size: 1.05rem; font-weight: 700; }
.sidebar-brand p { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.sidebar-nav { padding: 16px 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  padding: 10px 14px; border-radius: 6px; border: none; background: transparent;
  text-align: left; font-weight: 600; font-size: 0.88rem; color: #475569; cursor: pointer;
}
.nav-item.active { background: var(--retail); color: #fff; }
.main { flex: 1; display: flex; flex-direction: column; }
.top-header {
  height: 64px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; font-weight: 800;
}
.content { padding: 28px; flex: 1; overflow: auto; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.card-desc { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 16px; }
.btn {
  background: var(--retail); color: #fff; border: 1px solid var(--retail);
  padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.btn:hover { background: var(--retail-hover); }
.btn-outline {
  background: #fff; color: #334155; border: 1px solid #cbd5e1;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.form-group input {
  width: 100%; max-width: 360px; padding: 10px 14px; border: 1px solid #cbd5e1;
  border-radius: 6px; font-size: 0.95rem;
}
.form-group input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: #fff; padding: 40px; border-radius: 12px; border: 1px solid var(--border);
  width: 100%; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.badge-retail { background: #f3e8ff; color: var(--retail); border: 1px solid #d8b4fe; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }
.badge-online { background: #dcfce7; color: #15803d; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; }
.quota-bar { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin: 8px 0; }
.schedule-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.schedule-grid th,
.schedule-grid td {
  border: 1px solid #e2e8f0;
  padding: 6px 8px;
  text-align: left;
}
.schedule-grid input,
.schedule-grid select {
  font-size: 0.85rem;
}

.quota-fill { height: 100%; background: linear-gradient(90deg, #7e22ce, #a855f7); }
.hidden { display: none !important; }
.pair-notice {
  font-size: 0.85rem; color: #7e22ce; font-weight: 600;
  margin: 0 0 12px; min-height: 1.2em; line-height: 1.45;
}
.btn-xs { padding: 4px 8px !important; font-size: 0.75rem !important; }
select {
  padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; max-width: 420px;
}
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th { background: #f8fafc; text-align: left; padding: 10px; color: #475569; }
td { padding: 10px; border-top: 1px solid #f1f5f9; }