/* ===================== Reset & Base ===================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-dark: #1a1410;
  --bg-medium: #2d231e;
  --bg-light: #3d3228;
  --gold: #d4a853;
  --gold-light: #f0d68a;
  --gold-dark: #b8862c;
  --red: #c0392b;
  --red-dark: #8b2500;
  --text: #e8dcc8;
  --text-dim: #9a8c7a;
  --border: #4a3f35;
  --shadow: rgba(0,0,0,0.5);
  --incense-color: #b88a4a;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

body {
  font-family: "STKaiti", "KaiTi", "SimSun", "Noto Serif SC", serif;
  background: var(--bg-dark);
  color: var(--text);
}

/* ===================== Layout ===================== */
#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
}

/* Top Bar */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: linear-gradient(180deg, #2a1f18 0%, #1a1410 100%);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(212, 168, 83, 0.3);
}

nav {
  display: flex;
  gap: 4px;
}

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.2s;
}

.nav-btn:hover {
  color: var(--text);
  background: var(--bg-light);
}

.nav-btn.active {
  color: var(--gold);
  border-color: var(--gold-dark);
  background: rgba(212, 168, 83, 0.1);
}

/* ===================== Views ===================== */
.view {
  display: none;
  flex: 1;
  overflow: auto;
}

.view.active {
  display: flex;
}

/* ===================== Shrine View ===================== */
#view-shrine {
  flex-direction: column;
  background: #000;
  position: relative;
}

/* 灵堂背景白布条 — 与首页一致 */
#view-shrine::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 28px,
      rgba(255,255,255,0.06) 28px,
      rgba(255,255,255,0.12) 32px,
      rgba(255,255,255,0.06) 36px,
      transparent 40px,
      transparent 68px,
      rgba(255,255,255,0.07) 68px,
      rgba(255,255,255,0.14) 74px,
      rgba(255,255,255,0.07) 80px,
      transparent 84px,
      transparent 120px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 15px,
      rgba(200,200,210,0.03) 15px,
      transparent 17px
    );
}

#view-shrine > * {
  position: relative;
  z-index: 1;
}

#altar-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 60vh;
  position: relative;
}

/* 香炉两侧的烛光 */
#altar-area::before,
#altar-area::after {
  content: '🕯️';
  position: absolute;
  bottom: 80px;
  font-size: 2rem;
  z-index: 5;
  filter: drop-shadow(0 0 15px rgba(255,180,50,0.8))
          drop-shadow(0 0 30px rgba(255,150,20,0.4));
  animation: candleFlicker 2s ease-in-out infinite alternate;
  pointer-events: none;
}
#altar-area::before { left: calc(50% - 120px); animation-delay: 0s; }
#altar-area::after  { right: calc(50% - 120px); animation-delay: 0.5s; }
@keyframes candleFlicker {
  0% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.8; transform: scale(0.97); }
}

@keyframes markerPulse {
  0% { transform: translate(-50%,-100%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%,-100%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%,-100%) scale(1); opacity: 1; }
}

#altar-stage {
  position: relative;
  width: 100%;
  max-width: 800px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 150px;
  padding-bottom: 30px;
}

.altar-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  background:
    /* 顶部神光 */
    radial-gradient(ellipse at 50% 0%, rgba(200,160,80,0.08) 0%, transparent 50%),
    /* 中间散发光 */
    radial-gradient(ellipse at 50% 50%, rgba(180,130,50,0.04) 0%, transparent 70%),
    /* 底部暗红 */
    linear-gradient(180deg, #0d0906 0%, #100b07 40%, #0e0a06 100%);
  border: 3px solid #8b6914;
  border-radius: 4px;
  box-shadow:
    0 0 40px rgba(139, 105, 20, 0.08),
    0 0 80px rgba(139, 105, 20, 0.04),
    inset 0 0 60px rgba(0,0,0,0.4);
}

/* 灵位两侧中式题词 — 仿绢布对联 */
.altar-scroll-left,
.altar-scroll-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  writing-mode: vertical-rl;
  font-family: 'KaiTi', 'STKaiti', 'SimSun', serif;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.6rem;
  letter-spacing: 12px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 200, 100, 0.2);
  pointer-events: none;
  user-select: none;
}

.altar-scroll-left {
  left: 16px;
  background: linear-gradient(90deg, rgba(200,180,160,0.12), transparent);
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.25);
}

.altar-scroll-right {
  right: 16px;
  background: linear-gradient(270deg, rgba(200,180,160,0.12), transparent);
  padding-right: 10px;
  border-right: 1px solid rgba(255,255,255,0.25);
}

/* Ancestor Tablets — 仿传统木牌位 */
#tablets-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 30px 20px;
  width: 100%;
}

.ancestor-tablet {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 24px 18px;
  background:
    linear-gradient(180deg,
      rgba(100,60,25,0.6) 0%,
      rgba(70,38,18,0.8) 30%,
      rgba(45,22,10,0.9) 70%,
      rgba(30,14,6,0.95) 100%),
    repeating-linear-gradient(90deg,
      transparent, transparent 3px,
      rgba(139,105,20,0.03) 3px, rgba(139,105,20,0.03) 4px);
  border: 2px solid #8b6914;
  min-width: 130px;
  text-align: center;
  transition: all 0.3s;
  position: relative;
  box-shadow:
    0 2px 12px rgba(0,0,0,0.6),
    0 0 8px rgba(139, 105, 20, 0.1),
    inset 0 1px 0 rgba(139, 105, 20, 0.2);
  border-radius: 6px 6px 3px 3px;
}

/* 木牌顶部的弧形金冠 */
.ancestor-tablet::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 5px;
  background: linear-gradient(90deg, transparent, #c9a84c, #e8d080, #c9a84c, transparent);
  border-radius: 3px;
  opacity: 0.7;
}

.ancestor-tablet:hover {
  border-color: #c9a84c;
  box-shadow:
    0 0 30px rgba(201, 168, 76, 0.3),
    0 0 60px rgba(201, 168, 76, 0.1),
    inset 0 0 30px rgba(201, 168, 76, 0.08);
  transform: translateY(-3px);
}

.ancestor-tablet.selected {
  border-color: #d4a84c;
  box-shadow:
    0 0 35px rgba(212, 168, 76, 0.5),
    0 0 80px rgba(201, 150, 50, 0.2),
    inset 0 0 30px rgba(201, 168, 76, 0.12);
  background:
    linear-gradient(180deg,
      rgba(110,70,30,0.7) 0%,
      rgba(80,45,22,0.85) 30%,
      rgba(55,28,14,0.9) 70%,
      rgba(35,18,8,0.95) 100%),
    repeating-linear-gradient(90deg,
      transparent, transparent 3px,
      rgba(180,130,40,0.04) 3px, rgba(180,130,40,0.04) 4px);
}

.ancestor-tablet .tablet-title {
  font-size: 0.9rem;
  color: #a08860;
  margin-bottom: 3px;
  letter-spacing: 2px;
}

.ancestor-tablet .tablet-name {
  font-size: 1.5rem;
  color: #e8c84a;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  letter-spacing: 1px;
}

.ancestor-tablet .tablet-dates {
  font-size: 0.8rem;
  color: #8a7a60;
  margin-top: 3px;
}

/* 灵位选中时的光泽动画 */
.ancestor-tablet.selected::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(201, 168, 76, 0.1) 50%, transparent 60%);
  pointer-events: none;
  animation: tablet-glow 3s ease-in-out infinite;
}

@keyframes tablet-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* 匾额 — 灵境 */
.altar-watermark {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: rgba(200, 160, 60, 0.15);
  letter-spacing: 16px;
  font-family: 'KaiTi', 'STKaiti', serif;
  font-weight: bold;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 20px rgba(200,150,50,0.2);
}

/* 供桌木台 — 仿红木供桌 */
.altar-table {
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 16px;
  background: linear-gradient(180deg,
    #6b4520 0%,
    #5a3820 20%,
    #4a2d15 50%,
    #3d2210 80%,
    #2d180c 100%);
  border: 1px solid #a07830;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  box-shadow:
    0 -2px 16px rgba(200, 150, 50, 0.15),
    inset 0 1px 0 rgba(180,130,50,0.2);
  z-index: 0;
}

.altar-table-base {
  position: absolute;
  bottom: -10px;
  left: 12%;
  right: 12%;
  height: 10px;
  background: linear-gradient(180deg,
    #5a3518 0%,
    #3d2210 40%,
    #2a1808 100%);
  border: 1px solid #7a5020;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: -1;
}

/* Incense sticks */
#incense-area {
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

#incense-sticks {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.incense-stick {
  width: 4px;
  height: 80px;
  background: linear-gradient(180deg, var(--incense-color) 60%, #6b4a2a 100%);
  border-radius: 2px 2px 0 0;
  position: relative;
}

.incense-stick .ember {
  width: 6px;
  height: 6px;
  background: #ff6600;
  border-radius: 50%;
  position: absolute;
  top: -3px;
  left: -1px;
  animation: ember-glow 1.5s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 102, 0, 0.8), 0 0 12px rgba(255, 102, 0, 0.4);
}

@keyframes ember-glow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

#incense-smoke {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.smoke-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(200, 180, 150, 0.2);
  border-radius: 50%;
  animation: smoke-rise 3s ease-out infinite;
}

@keyframes smoke-rise {
  0% { opacity: 0.6; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 10px), -80px) scale(3); }
}

/* Offerings */
#offering-area {
  margin-top: 10px;
  z-index: 1;
}

#offering-items {
  display: flex;
  gap: 15px;
  justify-content: center;
  font-size: 1.8rem;
}

.offering-item {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-light) 0%, #2d1d0e 100%);
  border-radius: 50%;
  border: 1px solid var(--gold-dark);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  animation: offering-appear 0.5s ease-out;
}

@keyframes offering-appear {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Burning money effect */
#money-burn-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}

.money-ash {
  position: absolute;
  font-size: 1.2rem;
  animation: ash-fall 3s linear forwards;
  opacity: 0;
}

@keyframes ash-fall {
  0% { opacity: 0.8; transform: translate(0, 0) rotate(0deg); }
  50% { opacity: 0.5; transform: translate(var(--dx, 20px), -30px) rotate(180deg); }
  100% { opacity: 0; transform: translate(var(--dx, -20px), 40px) rotate(360deg); }
}

/* Worship controls */
#worship-controls {
  padding: 16px 20px;
  background: linear-gradient(0deg, #1a1410 0%, #221a14 100%);
  border-top: 2px solid var(--gold-dark);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

.control-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.control-group h3 {
  font-size: 0.85rem;
  color: #a09070;
  font-weight: normal;
  margin-right: 6px;
  letter-spacing: 1px;
}

.action-btn {
  padding: 8px 16px;
  border: 1px solid #6b4f14;
  background: linear-gradient(180deg, #3d3228 0%, #2d231e 100%);
  color: var(--gold);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
}

.action-btn:hover {
  border-color: #c9a84c;
  background: linear-gradient(180deg, #4d3a28 0%, #3d2a18 100%);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.15);
}

.action-btn.secondary {
  border-color: var(--border);
  color: var(--text-dim);
  background: linear-gradient(180deg, #2a221c 0%, #1e1814 100%);
}

.action-btn.secondary:hover {
  border-color: var(--gold-dark);
  color: var(--gold);
}
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.action-btn:hover {
  background: linear-gradient(180deg, #4a3f35 0%, #3d3228 100%);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(212, 168, 83, 0.2);
}

.action-btn.secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}

.action-btn.secondary:hover {
  border-color: var(--text);
  color: var(--text);
}

.action-btn.danger {
  border-color: var(--red);
  color: var(--red);
}

.action-btn.danger:hover {
  background: rgba(192, 57, 43, 0.1);
}

#ancestor-select {
  background: var(--bg-medium);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
}

/* ===================== Map View — 全屏全景地图 ===== */
#view-map {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

#view-map.active {
  display: flex;
  flex-direction: column;
}

/* 地图 DOM: 直接填满 view-map */
#map-fullscreen {
  flex: 1;
  width: 100%;
  min-height: 300px;
  position: relative;
  z-index: 1;
}

#map-fullscreen .leaflet-container {
  background: #1e1a14 !important;
}

#map-fullscreen .leaflet-control-zoom {
  border: 1px solid #b8862c !important;
  border-radius: 6px !important;
  overflow: hidden;
}

#map-fullscreen .leaflet-control-zoom a {
  background: rgba(45,35,30,0.85) !important;
  color: #e8dcc8 !important;
  border-bottom: 1px solid #4a3f35 !important;
}

#map-fullscreen .leaflet-control-zoom a:hover {
  background: rgba(61,50,40,0.9) !important;
}

/* 半透明遮罩 */
#map-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(135deg, rgba(26,20,16,0.65) 0%, rgba(26,20,16,0.25) 50%, rgba(26,20,16,0.55) 100%);
  pointer-events: none;
}

/* 浮层 UI */
#map-ui {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  pointer-events: none;
}

.plot-temp-marker {
  font-size: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.map-card {
  pointer-events: auto;
  background: rgba(45,35,30,0.9);
  border: 1px solid #b8862c;
  border-radius: 12px;
  padding: 20px;
  width: 320px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.map-card-header h3 {
  color: #d4a853;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.hint {
  color: #9a8c7a;
  font-size: 0.85rem;
}

#plot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plot-item {
  background: rgba(61,50,40,0.7);
  border: 1px solid #4a3f35;
  border-radius: 6px;
  padding: 10px 12px;
  transition: all 0.2s;
}

.plot-item:hover {
  border-color: #b8862c;
}

.plot-item .plot-name {
  font-size: 1rem;
  color: #d4a853;
}

.plot-item .plot-ancestor {
  font-size: 0.82rem;
  color: #e8dcc8;
  margin-top: 2px;
}

.plot-item .plot-desc {
  font-size: 0.78rem;
  color: #9a8c7a;
  margin-top: 4px;
}

.plot-item .plot-delete {
  float: right;
  cursor: pointer;
  color: #c0392b;
  font-size: 0.78rem;
  border: none;
  background: none;
  font-family: inherit;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.plot-item .plot-delete:hover {
  opacity: 1;
}

#plot-form {
  background: rgba(61,50,40,0.7);
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #4a3f35;
}

#plot-form input,
#plot-form textarea {
  width: 100%;
  background: rgba(26,20,16,0.7);
  color: #e8dcc8;
  border: 1px solid #4a3f35;
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

#plot-form input:focus,
#plot-form textarea:focus {
  border-color: #b8862c;
  outline: none;
  box-shadow: 0 0 8px rgba(212,168,83,0.15);
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.hidden {
  display: none !important;
}

.leaflet-popup-content-wrapper {
  background: #2d231e !important;
  color: #e8dcc8 !important;
  border: 1px solid #b8862c !important;
  border-radius: 8px !important;
}

.leaflet-popup-tip {
  background: #2d231e !important;
  border: 1px solid #b8862c !important;
}

.grave-marker {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  pointer-events: auto;
}

.grave-marker div {
  pointer-events: auto;
}

@media (max-width: 768px) {
  #map-ui {
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
  }
  .map-card {
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
  }
  #map-fullscreen {
    min-height: 300px;
    flex: 1;
  }
  #view-map.active {
    flex-direction: column;
    overflow: visible;
  }
}

/* ===================== Family View ===================== */
#view-family {
  flex-direction: column;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

#family-tree-container h3 {
  color: var(--gold);
  margin-bottom: 8px;
}

#ancestor-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.ancestor-card {
  background: var(--bg-medium);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.ancestor-card:hover {
  border-color: var(--gold-dark);
  background: var(--bg-light);
}

.ancestor-card .card-name {
  font-size: 1.15rem;
  color: var(--gold);
  font-weight: bold;
}

.ancestor-card .card-title {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.ancestor-card .card-dates {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 4px;
}

.ancestor-card .card-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}

/* ===================== Settings View ===================== */
#view-settings {
  flex-direction: column;
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}

#view-settings h3 {
  color: var(--gold);
  margin-bottom: 16px;
}

.setting-group {
  margin-bottom: 16px;
}

.setting-group label {
  display: block;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.setting-group input,
.setting-group select {
  width: 100%;
  background: var(--bg-medium);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
}

.setting-group .action-btn {
  margin-right: 8px;
  margin-top: 4px;
}

/* ===================== Modal ===================== */
#modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal-content {
  background: var(--bg-medium);
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
  position: relative;
}

.close-modal {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.5rem;
  color: var(--text-dim);
  cursor: pointer;
}

.close-modal:hover {
  color: var(--text);
}

#modal-body h3 {
  color: var(--gold);
  margin-bottom: 12px;
}

#modal-body input,
#modal-body textarea,
#modal-body select {
  width: 100%;
  background: var(--bg-dark);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 0.9rem;
}

#modal-body label {
  display: block;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 2px;
}

/* ===================== Family actions ===================== */
.family-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ancestor-card .card-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-dark);
  margin-bottom: 8px;
}

.ancestor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Genealogy files */
#genealogy-files {
  margin: 12px 0;
}

#genealogy-files h4 {
  color: var(--gold);
  margin-bottom: 6px;
}

.genealogy-item {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.genealogy-item a {
  color: var(--gold);
  text-decoration: none;
}

.genealogy-item a:hover {
  text-decoration: underline;
}

/* ===================== Members View & Invite ===================== */
#view-members {
  flex-direction: column;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.members-container h3,
.members-container h4 {
  color: var(--gold);
  margin-bottom: 8px;
  margin-top: 16px;
}

.invite-box {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.invite-box input {
  flex: 1;
  background: var(--bg-dark);
  color: var(--gold);
  border: 1px solid var(--gold-dark);
  padding: 10px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 4px;
}

.member-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 6px;
}

.member-item .member-name {
  font-size: 1rem;
  color: var(--gold);
}

.member-item .member-role {
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.member-item .member-role.owner {
  color: var(--gold);
  border-color: var(--gold-dark);
}

.member-item .member-stats {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.member-remove-btn {
  background: rgba(192,57,43,0.15);
  border: 1px solid rgba(192,57,43,0.4);
  color: #c0392b;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-left: 8px;
}

.member-remove-btn:hover {
  background: rgba(192,57,43,0.3);
  border-color: #c0392b;
}

.worship-log-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.worship-log-item .log-action {
  color: var(--text);
}

.worship-log-item .log-time {
  color: var(--text-dim);
  font-size: 0.75rem;
}

/* ===================== Landing 鈥?鍏ㄥ睆鍏ㄦ櫙鍦板浘 ===================== */
#view-landing {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 首页背景 — 纯黑底 */
#landing-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  background: #000;
  overflow: hidden;
}

/* 白色布条 — 仿戴孝缟素 */
#landing-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 28px,
      rgba(255,255,255,0.06) 28px,
      rgba(255,255,255,0.12) 32px,
      rgba(255,255,255,0.06) 36px,
      transparent 40px,
      transparent 68px,
      rgba(255,255,255,0.07) 68px,
      rgba(255,255,255,0.14) 74px,
      rgba(255,255,255,0.07) 80px,
      transparent 84px,
      transparent 120px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 15px,
      rgba(200,200,210,0.03) 15px,
      transparent 17px
    );
  pointer-events: none;
}

/* 布条自然垂感光晕 */
#landing-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255,255,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse at 48% 0%, rgba(255,255,255,0.06) 0%, transparent 65%),
    radial-gradient(ellipse at 78% 0%, rgba(255,255,255,0.07) 0%, transparent 70%),
    radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.04) 0%, transparent 80%),
    radial-gradient(ellipse at 65% 60%, rgba(255,255,255,0.05) 0%, transparent 75%);
  pointer-events: none;
  animation: clothDrift 6s ease-in-out infinite alternate;
}

/* 清除 overlay 上的右花串 */
#landing-overlay::before { display: none; }

@keyframes clothDrift {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* 鍗婇€忔槑鏆楄壊閬僵锛岃鏂囧瓧鏇存竻鏅?*/
#landing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* 鍓嶆櫙 UI 灞?鈥?灞呬腑鍗＄墖 */
#landing-ui {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.landing-card {
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 44px 36px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 80px rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.landing-icon {
  font-size: 3.5rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(255,255,255,0.3));
}

.landing-card h1 {
  color: #fff;
  font-size: 2.8rem;
  letter-spacing: 8px;
  margin-bottom: 4px;
  text-shadow: 0 0 20px rgba(255,255,255,0.15);
}

.landing-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.landing-desc {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  margin-bottom: 28px;
}

.landing-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 登录/注册标签 */
.landing-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.landing-tab {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.landing-tab:hover {
  border-color: var(--gold-dark);
  color: var(--text);
}

.landing-tab.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 168, 83, 0.1);
}

#landing-login, #landing-register {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#landing-login input,
#landing-register input {
  background: rgba(26, 20, 16, 0.7);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
}

#landing-login input:focus,
#landing-register input:focus {
  border-color: var(--gold-dark);
  outline: none;
  box-shadow: 0 0 8px rgba(212, 168, 83, 0.15);
}

.landing-error {
  color: #e74c3c;
  font-size: 0.85rem;
  text-align: center;
}

#landing-family-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#join-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#join-form input {
  background: rgba(26, 20, 16, 0.7);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
}

#join-form input:focus {
  border-color: var(--gold-dark);
  outline: none;
  box-shadow: 0 0 8px rgba(212, 168, 83, 0.15);
}

/* 搴曢儴鎻愮ず */
.landing-footer {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.8rem;
  letter-spacing: 2px;
  animation: footer-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes footer-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Leaflet 鎺т欢瑕嗙洊 */
#landing-map-layer .leaflet-control-zoom {
  display: none !important;
}

/* ===================== Big Buttons & Indicators ===================== */
.action-btn.primary {
  background: linear-gradient(180deg, #d4a853 0%, #b8862c 100%);
  color: #1a1410;
  border-color: #d4a853;
}

.action-btn.primary:hover {
  background: linear-gradient(180deg, #f0d68a 0%, #d4a853 100%);
  box-shadow: 0 0 12px rgba(212, 168, 83, 0.4);
}

.action-btn.big {
  padding: 12px 24px;
  font-size: 1.05rem;
}

#online-indicator {
  font-size: 0.85rem;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ===================== Responsive ===================== */
@media (max-width: 768px) {
  #top-bar {
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
  }

  #worship-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .control-group {
    flex-wrap: wrap;
  }
}

/* ===================== Shop / Coin System ===================== */
#top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.balance-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid var(--gold-dark);
  border-radius: 16px;
  font-size: 0.85rem;
  color: var(--gold);
  background: rgba(212, 168, 83, 0.08);
  transition: all 0.2s;
}

.balance-badge:hover {
  background: rgba(212, 168, 83, 0.15);
  box-shadow: 0 0 10px rgba(212, 168, 83, 0.2);
}

.price-tag {
  font-size: 0.7rem;
  color: var(--gold);
  background: rgba(212, 168, 83, 0.12);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  white-space: nowrap;
}

.shop-btn {
  border-color: var(--gold-dark) !important;
  color: var(--gold) !important;
}

.buy-btn {
  position: relative;
}

/* Shop Modal */
#shop-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#shop-modal-content {
  background: var(--bg-medium);
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
  max-width: 700px;
  width: 95%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

#shop-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

#shop-modal-header h3 {
  color: var(--gold);
  flex: 1;
}

#shop-balance {
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: bold;
  padding: 4px 12px;
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
}

#shop-items-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.shop-category {
  margin-bottom: 20px;
}

.shop-cat-title {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-weight: normal;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.shop-item-card {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.shop-item-card:hover {
  border-color: var(--gold-dark);
  box-shadow: 0 0 12px rgba(212, 168, 83, 0.1);
}

.shop-item-emoji {
  font-size: 2rem;
  margin-bottom: 4px;
}

.shop-item-name {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: bold;
}

.shop-item-desc {
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.3;
  min-height: 2em;
}

.shop-item-price {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: bold;
  margin: 2px 0 6px;
}

.shop-item-price.unaffordable {
  color: #c0392b;
}

.shop-item-card .action-btn {
  font-size: 0.8rem;
  padding: 4px 12px;
  width: 100%;
}

#shop-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* Purchases modal */
#purchases-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}

#purchases-modal-content {
  background: var(--bg-medium);
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

#purchases-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

#purchases-header h4 {
  color: var(--gold);
}

#purchases-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.purchase-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.purchase-emoji {
  font-size: 1.5rem;
  width: 36px;
  text-align: center;
}

.purchase-info {
  flex: 1;
}

.purchase-name {
  font-size: 0.9rem;
  color: var(--text);
}

.purchase-time {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.purchase-price {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: bold;
}

/* Responsive shop */
@media (max-width: 500px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================== Recharge / Top-up ===================== */
#recharge-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#recharge-modal-content {
  background: var(--bg-medium);
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
  max-width: 600px;
  width: 95%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

#recharge-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

#recharge-header h3 {
  color: var(--gold);
  flex: 1;
}

#recharge-balance {
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: bold;
  padding: 4px 12px;
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
}

#recharge-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

#recharge-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px;
}

.recharge-plan {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}

.recharge-plan:hover {
  border-color: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(212, 168, 83, 0.15);
}

.recharge-plan.featured {
  border-color: var(--gold-dark);
  background: linear-gradient(180deg, #3d3020 0%, var(--bg-light) 100%);
}

.recharge-plan.featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.plan-emoji {
  font-size: 2rem;
  margin-bottom: 6px;
}

.plan-amount {
  font-size: 1.05rem;
  color: var(--text);
  font-weight: bold;
}

.plan-price {
  font-size: 0.85rem;
  color: var(--gold);
  margin: 4px 0;
}

.plan-badge {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 8px;
  display: inline-block;
  background: var(--bg-medium);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.plan-badge.hot {
  color: #ff6b35;
  border-color: #ff6b35;
  background: rgba(255, 107, 53, 0.1);
}

.plan-badge.vip {
  color: var(--gold);
  border-color: var(--gold-dark);
  background: rgba(212, 168, 83, 0.1);
}

/* Payment area */
#payment-area {
  padding: 8px 16px 16px;
}

#payment-plan-info {
  margin-bottom: 12px;
}

#payment-methods {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.payment-method {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95rem;
  color: var(--text-dim);
}

.payment-method:hover {
  border-color: var(--gold-dark);
  color: var(--text);
}

.payment-method.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 168, 83, 0.08);
}

.pm-emoji {
  font-size: 1.3rem;
}

/* QR Code payment area */
#qr-payment-area {
  padding: 8px 16px 16px;
}

#qr-plan-summary {
  margin-bottom: 12px;
}

#qr-code-area {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

#qr-code-img {
  max-width: 200px;
  max-height: 200px;
  image-rendering: pixelated;
}

#qr-code-loading {
  color: var(--text-dim);
  font-size: 0.95rem;
  text-align: center;
}

.qr-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

#qr-status-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: rgba(212, 168, 83, 0.1);
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
  color: var(--gold);
  font-size: 0.9rem;
}

.qr-status-dot {
  font-size: 1.1rem;
}

/* Recharge mode badge */
.recharge-payment-mode-badge {
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 4px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}

/* Payment processing overlay */
#pay-processing {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pay-processing-content {
  text-align: center;
  animation: pay-pulse 1.5s ease-in-out infinite;
}

.pay-spinner {
  font-size: 3rem;
  margin-bottom: 12px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pay-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

#pay-processing h3 {
  color: var(--gold);
  margin: 8px 0;
}

#pay-processing p {
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* Recharge history modal */
#recharge-history-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}

#recharge-history-content {
  background: var(--bg-medium);
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
  max-width: 550px;
  width: 90%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

#rh-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

#rh-header h4 {
  color: var(--gold);
}

#recharge-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.recharge-log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.rl-emoji {
  font-size: 1.3rem;
  width: 32px;
  text-align: center;
}

.rl-info {
  flex: 1;
}

.rl-action {
  font-size: 0.9rem;
  color: var(--text);
}

.rl-time {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.rl-amount {
  font-size: 0.9rem;
  font-weight: bold;
}

.rl-amount.positive {
  color: #4ecdc4;
}

#recharge-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ===== Admin Panel ===== */
#admin-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1005;
  display: flex;
  align-items: center;
  justify-content: center;
}

#admin-panel-content {
  background: var(--bg-medium);
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
  max-width: 650px;
  width: 92%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#admin-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#admin-header h3 {
  color: var(--gold);
  width: 100%;
}

#admin-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
}

.admin-tab {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.admin-tab:hover {
  border-color: var(--gold-dark);
  color: var(--text);
}

.admin-tab.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 168, 83, 0.1);
}

.admin-tab-content {
  flex: 1;
  overflow-y: auto;
}

.admin-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.admin-order-item .ao-user {
  font-weight: bold;
  color: var(--text);
  min-width: 100px;
}

.admin-order-item .ao-plan {
  color: var(--gold);
  font-size: 0.9rem;
}

.admin-order-item .ao-time {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.admin-order-item .ao-status {
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 4px;
}

.ao-status.awaiting {
  background: #ff9800;
  color: #000;
}

.ao-status.pending {
  background: var(--border);
  color: var(--text-dim);
}

.ao-status.paid {
  background: #4CAF50;
  color: #fff;
}

.admin-order-item .ao-confirm-btn {
  margin-left: auto;
  padding: 4px 12px;
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
}

.admin-order-item .ao-confirm-btn:hover {
  background: #c99a4a;
}

.admin-order-item .ao-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-qr-upload {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.admin-qr-upload h4 {
  color: var(--gold);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

#admin-orders-list {
  min-height: 200px;
}

/* Admin entry button in app */
#btn-open-admin-wrapper {
  display: none; /* shown via JS when user is operator */
}

@media (max-width: 500px) {
  #recharge-plans {
    grid-template-columns: repeat(2, 1fr);
  }
  .payment-method {
    font-size: 0.85rem;
    padding: 8px;
  }
}