:root {
  /* KTM Orange theme */
  --brand: #ff6a00;            /* primary orange */
  --brand-2: #ff7f1a;          /* lighter */
  --brand-3: #e65f00;          /* darker */
  --surface: #0f1218;          /* dark header surface */
  --panel: #121826;            /* dark panel */
  --text: #e5e7eb;             /* light text on dark */
  --muted: #a8b3c7;            /* muted text */
  /* Bootstrap overrides */
  --bs-primary: #ff6a00;
  --bs-link-color: #ff6a00;
  --bs-link-hover-color: #ff7f1a;
}

.brand-logo {
  height: 56px;
  width: auto;
  margin-right: 12px;
  border-radius: 8px;
}
.navbar .navbar-brand{ display:flex; align-items:center; gap:12px; flex: 1; min-width: 0 }
.brand-title{ color: var(--brand); font-weight: 800; font-size: clamp(22px, 5vw, 32px); line-height: 1.1; text-align: center; flex: 1 }
/* 品牌闪烁优化：在品牌未就绪前隐藏品牌文字，避免默认文案露出 */
html:not(.brand-ready) .brand-title{ visibility: hidden }

.scanner-frame {
  max-width: 520px;
  width: 100%;
  aspect-ratio: 1/1; /* square viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b13241a;
}

.sticky-info {
  position: sticky;
  top: 0.5rem;
  z-index: 1030;
}

.big-cta {
  padding: 12px 16px;
  font-size: 1.125rem;
}

.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: #f1f3f5;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 2px 6px;
}

/* Neo look: softly rounded cards and elevated panels */
body[data-bs-theme='dark']{ background: linear-gradient(180deg,#0a0f1d,#0b1324); color: var(--text) }
.navbar{ background: var(--surface) !important; border-bottom: 2px solid var(--brand); padding-top: 14px; padding-bottom: 14px }
.navbar .nav-link{ color: #cbd5e1 !important; font-weight: 600 }
.navbar .nav-link:hover{ color: #ffffff !important }
.navbar .nav-link.active{ color: var(--brand) !important }
.navbar .navbar-brand{ color:#fff !important }
.card, .el-card, .table, table{ background: #0e1629; color: var(--text) }
.btn-primary{ background: linear-gradient(135deg,#2563eb,#3b82f6); border: none }
.btn-primary{ background: linear-gradient(135deg,var(--brand),var(--brand-3)); border: none }
.btn-primary:hover{ filter: brightness(1.05) }
.btn-outline-primary{ border-color: var(--brand); color: var(--brand) }
.btn-outline-primary:hover{ background: var(--brand); color:#fff }
.btn{ border-radius: 10px }

/* Pills (group tabs) */
.nav-pills .nav-link{ color: var(--brand) }
.nav-pills .nav-link.active{ background: var(--brand) !important; color:#fff !important }

/* Table accents for light mode containers */
.table thead, .table .table-light, table thead{ background: #fff3e9 !important; color: #7a3e00; border-bottom: 2px solid var(--brand) }
/* 更高对比度的深色斑马纹表格 */
.table{ color: var(--text) }
.table-striped>tbody>tr:nth-of-type(odd){ --bs-table-accent-bg: #111a2f; background-color:#111a2f !important; color: #e5e7eb }
.table-striped>tbody>tr:nth-of-type(even){ --bs-table-accent-bg: #0e1629; background-color:#0e1629 !important; color: #e5e7eb }
.table>tbody>tr{ background-color:#0e1629 !important }
.table tbody td, .table tbody th{ background-color: inherit !important }
.table tbody tr:hover{ background: #1a2747 }
.table td, .table th{ border-color: #2a3a58 }
.table-bordered{ border-color: #2a3a58 }
.table thead th{ border-color: #2a3a58 }
/* 横向滚动时不换行，避免文字竖排 */
.table-responsive table td, .table-responsive table th{ white-space: nowrap }

/* 明确声明页面为深色配色，避免微信/系统夜间模式二次改色 */
html{ color-scheme: dark }
body{ -webkit-tap-highlight-color: transparent }

/* 会员管理页更友好的移动端布局与触控区域 */
@media (max-width: 576px){
  .brand-logo{ height: 48px }
  .table.table-sm{ font-size: 14px }
  #tbl .btn{ padding: 6px 10px; border-radius: 8px }
  #tbl select.form-select-sm{ min-width: 120px }
  /* 行距更松，便于点按 */
  #tbl tbody tr{ --row-pad: 10px }
  #tbl tbody tr td{ padding-top: var(--row-pad); padding-bottom: var(--row-pad) }
}

/* 列宽与横向滚动优化（会员管理） */
#tbl .col-id{ min-width: 72px }
#tbl .col-name{ min-width: 180px }
#tbl .col-tier{ min-width: 160px }
#tbl .col-created{ min-width: 200px }
#tbl .ops{ min-width: 260px; white-space: nowrap }
#tbl .ops .btn{ margin-right: 6px }

/* Links inside cards */
a{ color: var(--brand) }
a:hover{ color: var(--brand-2) }

/* 全局：客服信息条 */
.contact-bar{ position: fixed; left:0; right:0; bottom:0; z-index:1040; text-align:center; color: var(--brand); padding: 12px 14px; font-weight: 700; background:#0e1629; border-top:1px solid var(--brand) }
.contact-bar .wx{ cursor: pointer; text-decoration: underline }

/* Mobile-friendly tables: show labels on small screens */
/* 若需要卡片式表格，为表格添加 .stacked 类 */
@media (max-width: 768px){
  table.stacked thead{ display: none; }
  table.stacked tbody tr{ display: block; margin: 12px 0; border: 1px solid #24304a; border-radius: 12px; overflow: hidden; }
  table.stacked tbody tr td{ display: grid; grid-template-columns: 40% 60%; padding: 10px 12px; border: none; border-bottom: 1px solid #1d2842; }
  table.stacked tbody tr td:last-child{ border-bottom: none; }
  table.stacked tbody tr td::before{ content: attr(data-label); color: #93a4bf; padding-right: 8px; }
}