/* B612 ♡ RV — Le Petit Prince theme
 * Day (default light): 奶油黄 + 玫瑰 + B612 蓝
 * Night (dark): 星空 + 月光金 + 玫瑰粉
 */

/* === Day (default light) — B612 + Rose + Sky === */
:root,
:root[data-theme="b612-day"] {
  --bg: #fdf6e3;             /* 奶油黄天 */
  --bg-elevated: #faf3e0;    /* 浅米 */
  --surface: #ffffff;         /* 卡片白 */
  --surface-2: #faf3e0;       /* 米色 */
  --border: #e6dfc6;          /* 沙金边 */
  --border-strong: #f4b400;  /* 小王子金 */
  --text: #1e4d2b;            /* 墨绿 (le Petit Prince 插画字) */
  --text-muted: #6b7c5e;      /* 哑绿 */
  --accent: #f4b400;          /* 小王子金 */
  --accent-2: #c0392b;        /* 玫瑰紅 */
  --accent-2-dim: #a93226;
  --accent-3: #5dade2;        /* B612 蓝 */
  --accent-glow: rgba(244, 180, 0, 0.22);
  --rose-glow: rgba(192, 57, 43, 0.18);
  --type-restaurant: #e8867a;  /* 玫瑰粉 (pastel rose) — 重要的爱 */
  --type-massage: #f0a878;     /* 狐狸橙 pastel */
  --type-tea: #7fb8d4;         /* B612 蓝 pastel */
  --type-dessert: #f4c45a;     /* 星星金 pastel */
  --type-shopping: #7dbf85;    /* 墨绿 pastel */
  --type-attraction: #b487c4;  /* 紫罗兰 pastel */
  --danger: #c0392b;
  --success: #27ae60;
  --shadow: 0 2px 10px rgba(192, 57, 43, 0.10), 0 2px 4px rgba(244, 180, 0, 0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --header-pattern:
    linear-gradient(180deg, #faf3e0 0%, #fdf6e3 100%);
  --rose-accent-bar: linear-gradient(90deg,
    transparent 0%, var(--accent-2) 20%, var(--accent-2) 80%, transparent 100%);
  --gold-accent-bar: linear-gradient(90deg,
    transparent 0%, var(--accent) 15%, var(--accent) 85%, transparent 100%);
}

/* === Night (dark) — 星空 + 月光金 + 玫瑰粉 === */
:root[data-theme="b612-night"] {
  --bg: #0f0a2e;              /* 星空深蓝紫 */
  --bg-elevated: #1a1538;
  --surface: #1a1538;
  --surface-2: #251e4a;
  --border: #2e2750;
  --border-strong: #ffd700;
  --text: #f5f0e8;            /* 月光白 */
  --text-muted: #9d96b8;
  --accent: #ffd700;          /* 星星金 */
  --accent-2: #ff6b9d;        /* 玫瑰粉 */
  --accent-2-dim: #c64f7a;
  --accent-3: #ff9f43;        /* 狐狸橘 */
  --accent-glow: rgba(255, 215, 0, 0.22);
  --rose-glow: rgba(255, 107, 157, 0.22);
  --type-restaurant: #ff8aa6;  /* 玫瑰粉 (夜空 pastel) */
  --type-massage: #ffb487;     /* 狐狸橘 pastel */
  --type-tea: #88c4e6;         /* 夜空下 B612 蓝 pastel */
  --type-dessert: #ffe07a;     /* 星星金 pastel */
  --type-shopping: #7ed99a;    /* 翡翠绿 pastel */
  --type-attraction: #d4a8e6;  /* 夜空紫罗兰 pastel */
  --danger: #ff6b9d;
  --success: #2ecc71;
  --shadow: 0 2px 12px rgba(255, 107, 157, 0.15), 0 2px 8px rgba(0,0,0,0.6);
  --radius: 14px;
  --radius-sm: 8px;
  --header-pattern:
    linear-gradient(180deg, #0f0a2e 0%, #1a1538 100%);
  --rose-accent-bar: linear-gradient(90deg,
    transparent 0%, var(--accent-2) 20%, var(--accent-2) 80%, transparent 100%);
  --gold-accent-bar: linear-gradient(90deg,
    transparent 0%, var(--accent) 15%, var(--accent) 85%, transparent 100%);
}

/* === Loading screen (Eva-01 themed) === */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000000;
  background-image:
    radial-gradient(ellipse at center, rgba(91, 42, 134, 0.25) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(57, 255, 20, 0.025) 2px, rgba(57, 255, 20, 0.025) 3px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.25s ease;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 20px;
  max-width: 360px;
}
.loading-icon {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a0f4a 0%, #5B2A86 50%, #1a0524 100%);
  border: 2px solid var(--accent, #39ff14);
  box-shadow:
    0 0 30px rgba(57, 255, 20, 0.4),
    0 0 60px rgba(155, 77, 255, 0.3),
    inset 0 0 20px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: icon-pulse 1.6s ease-in-out infinite;
}
.loading-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, transparent 30%, rgba(57, 255, 20, 0.15) 50%, transparent 70%);
  pointer-events: none;
  animation: icon-shine 2.4s linear infinite;
}
.loading-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.5));
  position: relative;
  z-index: 1;
}
@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 30px rgba(57, 255, 20, 0.4),
      0 0 60px rgba(155, 77, 255, 0.3),
      inset 0 0 20px rgba(0, 0, 0, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow:
      0 0 50px rgba(57, 255, 20, 0.6),
      0 0 100px rgba(155, 77, 255, 0.5),
      inset 0 0 20px rgba(0, 0, 0, 0.4);
  }
}
@keyframes icon-shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(200%) rotate(45deg); }
}
.loading-text {
  font-size: 18px;
  font-weight: 700;
  color: #39ff14;
  text-shadow:
    0 0 8px rgba(57, 255, 20, 0.6),
    0 0 16px rgba(57, 255, 20, 0.4);
  letter-spacing: 1.5px;
  font-family: "Consolas", "SF Mono", "Courier New", monospace;
  text-transform: uppercase;
}
.loading-bar {
  width: 200px;
  height: 4px;
  background: rgba(155, 77, 255, 0.15);
  border: 1px solid rgba(57, 255, 20, 0.3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #39ff14 0%, #9b4dff 50%, #39ff14 100%);
  background-size: 200% 100%;
  animation: bar-fill 1.4s ease-out forwards, bar-shine 1.4s linear infinite;
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
}
@keyframes bar-fill {
  0% { width: 0%; }
  60% { width: 70%; }
  100% { width: 100%; }
}
@keyframes bar-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.loading-status {
  font-size: 12px;
  color: #9b4dff;
  text-shadow: 0 0 6px rgba(155, 77, 255, 0.4);
  letter-spacing: 1.5px;
  font-family: "Consolas", "SF Mono", "Courier New", monospace;
  text-transform: uppercase;
  animation: status-blink 1.2s ease-in-out infinite;
}
@keyframes status-blink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-icon { animation: none; transform: scale(1); }
  .loading-bar-fill { animation: bar-fill 0.6s ease-out forwards; }
  .loading-status { animation: none; }
}

.chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.chip-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s;
}
.chip-edit:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.chip-edit-rename:hover {
  color: #ffb800;
  border-color: #ffb800;
}
.chip-edit-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}
.chip-edit-add {
  width: 26px;
  font-size: 14px;
  font-weight: 700;
}
:root[data-theme="eva01"] .chip-edit {
  background: rgba(26, 20, 38, 0.6);
}
:root[data-theme="eva01"] .chip-edit-add {
  color: var(--accent);
  border-color: var(--accent);
}

/* === Login screen === */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000000;
  background-image:
    radial-gradient(ellipse at center, rgba(91, 42, 134, 0.3) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(57, 255, 20, 0.025) 2px, rgba(57, 255, 20, 0.025) 3px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.4s ease;
}
.login-screen.hidden { display: none; }
.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 20px;
  max-width: 380px;
  width: 100%;
}
.login-icon {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a0f4a 0%, #5B2A86 50%, #1a0524 100%);
  border: 2px solid var(--accent, #39ff14);
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.4), 0 0 48px rgba(155, 77, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: icon-pulse 1.6s ease-in-out infinite;
}
.login-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.5));
}
.login-title {
  font-size: 22px;
  font-weight: 700;
  color: #39ff14;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
  letter-spacing: 1.5px;
  font-family: "Consolas", "SF Mono", "Courier New", monospace;
  text-transform: uppercase;
}
.login-subtitle {
  font-size: 13px;
  color: #9b4dff;
  letter-spacing: 1.5px;
}
.login-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.login-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(26, 20, 38, 0.7);
  border: 1px solid var(--border, #444);
  color: var(--text, #fff);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-align: left;
}
.login-btn:hover {
  background: rgba(57, 255, 20, 0.1);
  border-color: var(--accent, #39ff14);
  transform: translateY(-1px);
}
.login-btn-owner {
  border-color: rgba(255, 184, 0, 0.6);
  background: rgba(80, 50, 0, 0.4);
}
.login-btn-owner:hover {
  background: rgba(255, 184, 0, 0.15);
  border-color: #ffb800;
  box-shadow: 0 0 14px rgba(255, 184, 0, 0.5);
}
.login-btn-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.login-btn-name {
  flex: 1;
}
.login-btn-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #aaa);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.login-btn-owner .login-btn-tag {
  background: rgba(255, 184, 0, 0.2);
  color: #ffb800;
}

/* Region picker buttons: large Eva-01 themed cards */
.region-buttons {
  gap: 14px;
  width: 100%;
  max-width: 320px;
}
/* --- Region picker buttons (SZ / HK) — pastel --- */
.region-pick-btn {
  background: #ffffff !important;
  border: 2px solid #f1e5c8 !important;
  color: #1e4d2b !important;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.06) !important;
  border-radius: 20px !important;
  min-height: 110px !important;
}
.region-pick-btn::before {
  background: none !important;
  animation: none !important;
}
.region-pick-btn:hover {
  border-color: #f4b400 !important;
  background: linear-gradient(135deg, #fff7d6 0%, #ffffff 100%) !important;
  box-shadow: 0 6px 18px rgba(244, 180, 0, 0.20) !important;
  transform: translateY(-2px);
}
.region-flag-big {
  font-size: 38px;
  line-height: 1;
  filter: none;
}
.region-name-big {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #c0392b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
}
.region-tag-big {
  font-size: 11px;
  color: #6b7c5e;
  letter-spacing: 0.5px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
  text-transform: uppercase;
}
.region-pick-sz {
  border-color: #f4b400 !important;
}
.region-pick-sz:hover {
  box-shadow: 0 6px 18px rgba(244, 180, 0, 0.25) !important;
}
.region-pick-hk {
  border-color: #e67e22 !important;
}
.region-pick-hk:hover {
  box-shadow: 0 6px 18px rgba(230, 126, 34, 0.25) !important;
}
.region-buttons {
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px !important;
}
@media (max-width: 480px) {
  .region-buttons { flex-direction: column !important; }
  .region-pick-btn { width: 100%; }
}
:root[data-theme="b612-night"] .region-pick-btn {
  background: rgba(26, 21, 56, 0.7) !important;
  border-color: #2e2750 !important;
  color: #f5f0e8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important;
}
:root[data-theme="b612-night"] .region-pick-btn:hover {
  background: rgba(26, 21, 56, 0.9) !important;
  border-color: #ffd700 !important;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.18) !important;
}
:root[data-theme="b612-night"] .region-name-big { color: #ffd700; }
:root[data-theme="b612-night"] .region-tag-big { color: #9d96b8; }
:root[data-theme="b612-night"] .region-pick-sz { border-color: #ffd700 !important; }
:root[data-theme="b612-night"] .region-pick-hk { border-color: #ff6b9d !important; }

/* Header region button: flag only, larger flag size */
.btn-icon-region {
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  padding: 0;
}
.btn-icon-region #btn-region-flag {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
}

/* === Owner password modal === */
.modal-card-small {
  max-width: 360px;
  width: 92%;
}
.pwd-hint {
  font-size: 13px;
  color: var(--text-muted, #aaa);
  margin-bottom: 8px;
}
#owner-pwd {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border, #444);
  background: var(--surface-2, #1a1426);
  color: var(--text, #fff);
  font-size: 18px;
  font-family: "Consolas", "SF Mono", monospace;
  letter-spacing: 4px;
  text-align: center;
}
#owner-pwd:focus {
  outline: none;
  border-color: var(--accent, #39ff14);
  box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.2);
}
.pwd-error {
  color: #ff3860;
  font-size: 12px;
  margin-top: 6px;
  min-height: 16px;
}
.pwd-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  justify-content: flex-end;
}

/* === User tag (in header) === */
.user-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26, 20, 38, 0.6);
  border: 1px solid var(--border, #444);
  color: var(--text, #fff);
  margin-right: 6px;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-tag.owner {
  background: rgba(255, 184, 0, 0.18);
  border-color: #ffb800;
  color: #ffb800;
}

/* === Activity log modal === */
.activity-card { max-width: 720px; max-height: 88vh; }
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 70vh;
  padding-right: 4px;
}
.activity-entry {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.activity-time {
  color: var(--text-muted);
  font-family: "Consolas", "SF Mono", monospace;
  font-size: 11px;
}
.activity-action {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.activity-action.add { background: rgba(57, 255, 20, 0.18); color: #39ff14; }
.activity-action.edit { background: rgba(255, 184, 0, 0.18); color: #ffb800; }
.activity-action.visit { background: rgba(57, 199, 255, 0.18); color: #39c7ff; }
.activity-action.photo { background: rgba(155, 77, 255, 0.18); color: #9b4dff; }
.activity-action.delete { background: rgba(255, 56, 96, 0.18); color: #ff3860; }
.activity-action.reorder { background: rgba(255, 184, 0, 0.1); color: #aaa; }
.activity-user {
  font-weight: 700;
}
.activity-user.owner { color: #ffb800; }
.activity-user.me { background: var(--accent); color: #000; padding: 0 6px; border-radius: 4px; }
.activity-target {
  color: var(--text);
}
.activity-details {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
  grid-column: 1 / -1;
  padding-left: 4px;
  border-left: 2px solid var(--border);
}
.activity-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 32px;
}
.activity-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.activity-filter-row select,
.activity-filter-row input {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}

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

/* Global utility class — used to hide any element via classList.toggle('hidden', ...) */
.hidden { display: none !important; }
html { height: 100%; scrollbar-width: none; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei",
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Allow the browser's native pull-to-refresh to fire. Use `auto` (not
     `contain`) so the overscroll at scroll-top propagates to the navigation
     agent and triggers a page reload — that's the only PTR in this app. */
  overscroll-behavior-y: auto;
  transition: background 0.25s, color 0.25s;
  scrollbar-width: none;
}
/* Hide the mobile scrollbar thumb on WebKit/Blink. The user gets a full-bleed
   content area with no right-side slider while scrolling. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* === Layered backgrounds ===
   Eva-01: scan-line (green) + vignette (purple) — green-dominant now
   Eva-00: nothing
*/
:root[data-theme="eva01"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at top, rgba(57, 255, 20, 0.05) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px,
      rgba(57, 255, 20, 0.018) 2px, rgba(57, 255, 20, 0.018) 3px);
  z-index: 0;
}
/* Stacking context: only set z-index + isolation, don't touch position.
   Avoid the trap where this overrides .app-header/.toolbar position rules. */
:root[data-theme="eva01"] body > * { isolation: isolate; }

/* Green accent bar removed — was fixed under header but stayed during scroll.
   Header already has its own green accent border (see .app-header shadow).
*/

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  background: var(--header-pattern);
  border-bottom: 1px solid var(--border-strong);
  box-shadow:
    0 4px 16px rgba(155, 77, 255, 0.25),
    0 1px 0 var(--accent);
}
.app-header h1 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;
}
/* On mobile (≤679px): hide the title + put account name on LEFT and buttons on RIGHT.
   Desktop is intentionally unchanged — title centered between left and right. */
@media (max-width: 679px) {
  .app-header h1 { display: none; }
  .app-header { justify-content: space-between; flex-wrap: wrap; }
  .user-tag { order: 1; }
  .header-actions { order: 2; gap: 4px; }
  .btn-icon { width: 36px; height: 36px; }
}
:root[data-theme="eva01"] .app-header h1 {
  color: var(--accent);
  text-shadow:
    0 0 8px var(--accent-glow),
    0 0 16px var(--accent-glow);
  font-family: "Consolas", "SF Mono", "Courier New", monospace;
}
.header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.btn-icon {
  background: rgba(26, 20, 38, 0.6);
  border: 1px solid var(--border-strong);
  color: var(--text);
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
  font-family: inherit;
}
.btn-icon svg { width: 18px; height: 18px; }
.btn-icon#btn-add svg { width: 20px; height: 20px; }
.btn-icon#btn-region {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.btn-icon#btn-region .region-flag {
  font-size: 13px;
  margin-right: 3px;
}
:root[data-theme="eva00"] .btn-icon {
  background: var(--surface);
  border-color: var(--border);
}
.btn-icon:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
:root[data-theme="eva01"] .btn-icon:hover {
  color: var(--accent);
}
.btn-icon.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
:root[data-theme="eva01"] .btn-icon.active {
  box-shadow: 0 0 16px var(--accent);
}

/* === Toolbar: NON-STICKY, sits in normal flow, scrolls away with content === */
.toolbar {
  position: static;
  background: var(--bg-elevated);
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border);
  width: 100%;
  display: block;
  overflow: visible;
}
:root[data-theme="eva01"] .toolbar {
  background: linear-gradient(180deg, rgba(10, 30, 18, 0.96) 0%, rgba(10, 5, 18, 0.98) 100%);
  border-bottom: 1px solid var(--accent);
  box-shadow: 0 2px 12px rgba(57, 255, 20, 0.08);
}
.search-row {
  padding: 0 12px 8px 12px;
  width: 100%;
  display: block;
}
.search-row input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
  display: block;
}
.search-row input::placeholder { color: var(--text-muted); }
.search-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }

/* Each filter-group is a vertical block: label on its own line, then horizontal-scroll chips */
.filter-row {
  display: block;
  width: 100%;
}
.filter-group {
  display: block;
  width: 100%;
  margin-bottom: 6px;
}
.filter-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  display: block;
  width: 100%;
  padding: 0 12px 4px 12px;
}
:root[data-theme="eva01"] .filter-label {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}

/* Chips: horizontal-scroll, NO wrap, fixed height */
.chips {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding: 2px 12px 6px 12px;
  width: 100%;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
:root[data-theme="eva01"] .chip {
  background: rgba(26, 20, 38, 0.6);
  border-color: var(--border-strong);
}
.chip:hover { border-color: var(--accent); }
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 800;
  text-shadow: none;
}
:root[data-theme="eva01"] .chip.active {
  background: var(--accent);
  color: #000;
  border-color: #000;
  box-shadow: 0 0 8px var(--accent-glow);
}
:root[data-theme="eva00"] .chip.active {
  background: var(--accent);
  color: #000;
  border-color: #c89400;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.places {
  padding: 14px 12px 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;  /* below sticky toolbar (z-index: 20) to prevent overlap */
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  position: relative;
  transition: all 0.2s;
  touch-action: manipulation;
  z-index: 1;
  /* Mobile: stack thumb on top, like desktop */
  flex-direction: column;
}
:root[data-theme="eva01"] .card {
  background: linear-gradient(135deg, #0e0a18 0%, #14182a 100%);
  border-color: var(--border-strong);
}
.card:hover {
  border-color: var(--accent);
}
:root[data-theme="eva01"] .card:hover {
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 20px var(--accent-glow);
  transform: translateY(-1px);
}
:root[data-theme="eva01"] .card:hover .name {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}
.card.visited { opacity: 0.55; }
.card.visited .name { text-decoration: line-through; }
.card.selected {
  border-color: var(--accent);
  background: var(--surface-2);
}
:root[data-theme="eva01"] .card.selected {
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 16px var(--accent-glow),
    inset 0 0 20px rgba(57, 255, 20, 0.06);
}
.card.dragging { opacity: 0.4; transform: scale(0.98); }
.card.ghost {
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--accent);
}

/* Reserve top-left space for the absolute-positioned check icon AND
   the card-edit-btn (both always in flow via visibility, not display,
   so toggling edit mode never shifts the layout). */
.card-check {
  position: absolute;
  top: 10px; left: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  /* Always in flow (visibility, not display) so layout never shifts. */
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.15s, visibility 0.15s, background 0.15s, border-color 0.15s;
}
body.edit-mode .card-check { visibility: visible; opacity: 1; }
.card-check.checked {
  background: var(--accent);
  border-color: var(--accent);
}
.card-check.checked::after {
  content: "✓";
  color: #000;
  font-size: 14px;
  font-weight: bold;
}

.card-thumb {
  width: 100%;
  flex-shrink: 0;
  background: var(--surface-2);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  height: 140px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-thumb.placeholder {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder-char {
  font-size: 36px;
  font-weight: 800;
  font-family: "Consolas", "SF Mono", "Courier New", monospace;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
  opacity: 0.7;
}
:root[data-theme="eva00"] .placeholder-char {
  color: var(--accent-2);
  text-shadow: none;
  opacity: 0.6;
}
.card-thumb.placeholder svg { width: 32px; height: 32px; }
.card-thumb img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;  /* cover so image fills the fixed 140px area */
  display: block;
}

/* Reserve top space for the absolute-positioned check icon so toggling edit
   mode doesn't shift card content. */
.card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.card-head-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.card-edit-btn {
  background: rgba(10, 5, 18, 0.85);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: 6px;
  /* Positioned over the thumbnail (top-right corner). Hidden by default
     via visibility, not display, so toggling edit mode never shifts the
     card layout. */
  position: absolute;
  top: 8px; right: 8px;
  visibility: hidden;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s, visibility 0.15s;
  padding: 0;
  z-index: 3;
}
body.edit-mode .card-edit-btn {
  visibility: visible;
  opacity: 1;
}
.card-edit-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
:root[data-theme="eva01"] .card-edit-btn:hover {
  background: rgba(57, 255, 20, 0.15);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
.name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  flex: 1;
  word-break: break-word;
  color: var(--text);
  transition: color 0.2s;
}
:root[data-theme="eva01"] .name {
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}

/* Per-type badge colors */
.type-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  color: #000;
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.type-badge.t-餐廳 { background: var(--type-restaurant); color: #000; }
.type-badge.t-按摩 { background: var(--type-massage); color: #fff; border-color: var(--type-massage); }
.type-badge.t-茶飲 { background: var(--type-tea); color: #000; }
.type-badge.t-甜品 { background: var(--type-dessert); color: #000; }
.type-badge.t-購物 { background: var(--type-shopping); color: #fff; border-color: var(--type-shopping); }
.type-badge.t-景點 { background: var(--type-attraction); color: #000; }

.area {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
:root[data-theme="eva01"] .area::before {
  content: "▸";
  color: var(--accent);
  font-size: 11px;
  text-shadow: 0 0 6px var(--accent-glow);
}

.addresses {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;  /* allow text wrapping inside flex */
}
.addresses .addr {
  display: block;  /* simpler layout, allow text wrap freely */
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;  /* break long unbreakable strings */
  padding-left: 12px;
  position: relative;
}
.addresses .addr::before {
  content: "›";
  color: var(--accent);
  position: absolute;
  left: 0;
  font-weight: 700;
}
:root[data-theme="eva01"] .addresses .addr::before {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}
.addresses .addr.primary {
  color: var(--text);
}

.address {
  font-size: 12px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes {
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  padding: 6px 9px;
  border-radius: 6px;
  margin-top: 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.4;
}
:root[data-theme="eva01"] .notes {
  border-left: 3px solid var(--accent-2);
  background: linear-gradient(90deg, rgba(155, 77, 255, 0.12) 0%, rgba(57, 255, 20, 0.04) 100%);
}

.card-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}
:root[data-theme="eva01"] .action-btn {
  background: rgba(26, 20, 38, 0.6);
  border-color: var(--border-strong);
}
.action-btn:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
:root[data-theme="eva01"] .action-btn:hover {
  box-shadow: 0 0 8px var(--accent-glow);
}
.action-btn svg { width: 13px; height: 13px; }
.action-btn.ig { color: #e1306c; }
:root[data-theme="eva01"] .action-btn.ig {
  color: var(--accent);
}

/* Visit button: identical to other action buttons — same color, no green tint */
.action-btn.action-visit {
  color: var(--text);
}
.action-btn.action-visit:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--text);
}

.drag-handle {
  /* Always in flow (visibility, not display) so toggling edit mode never
     shifts the actions row. Hidden in normal mode, visible in edit mode.
     On desktop, the whole card is draggable so the handle is hidden. */
  visibility: hidden;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  color: var(--accent);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: grab;
  font-family: inherit;
  font-size: 14px;
  padding: 0;
  margin-left: auto;  /* push to right end of actions row */
  transition: opacity 0.15s, visibility 0.15s, background 0.15s;
  flex-shrink: 0;
}
body.edit-mode:not(.desktop-edit) .drag-handle {
  visibility: visible;
  opacity: 1;
}
.drag-handle:hover {
  background: var(--accent);
  color: #000;
}

.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
  font-size: 14px;
}

/* Edit bar — fixed bottom, hidden via display:none by default */
.edit-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 2px solid var(--accent);
  z-index: 40;
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: none;
  box-shadow: 0 -4px 16px var(--purple-glow);
}
body.edit-mode .edit-bar { display: block; }
:root[data-theme="eva01"] .edit-bar {
  background: linear-gradient(180deg, #14182a 0%, #0a0512 100%);
  border-top: 2px solid var(--accent);
  box-shadow:
    0 -4px 24px var(--accent-glow),
    0 -1px 0 var(--accent-2);
}
:root[data-theme="eva00"] .edit-bar {
  border-top: 2px solid var(--accent);
  background: var(--surface);
}
.edit-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}
#selected-count { flex: 1; font-size: 13px; color: var(--text-muted); font-weight: 600; }
:root[data-theme="eva01"] #selected-count {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}

.btn-primary, .btn-secondary, .btn-danger {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 700;
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.btn-primary {
  background: var(--accent);
  color: #000;
}
.btn-primary:hover { filter: brightness(1.1); }
:root[data-theme="eva01"] .btn-primary {
  box-shadow: 0 0 14px var(--accent-glow);
}
.btn-primary:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="eva01"] .btn-secondary {
  background: rgba(26, 20, 38, 0.6);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface); border-color: var(--accent); }
.btn-danger {
  background: var(--danger);
  color: white;
}
:root[data-theme="eva01"] .btn-danger {
  box-shadow: 0 0 10px rgba(255, 56, 96, 0.4);
}
.btn-danger:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 0.18s;
}
.modal.hidden { display: none; }
/* Lock body scroll while a modal is open */
body.modal-open { overflow: hidden; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--surface);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slide-up 0.22s;
  border-top: 2px solid var(--accent);
}
:root[data-theme="eva01"] .modal-card {
  background: linear-gradient(180deg, #14182a 0%, #0e0a18 100%);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 32px var(--accent-glow);
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-strong);
}
.modal-head h2 { font-size: 16px; font-weight: 700; }
:root[data-theme="eva01"] .modal-head h2 {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: "Consolas", "SF Mono", "Courier New", monospace;
  text-shadow: 0 0 8px var(--accent-glow);
}
.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
  width: 32px; height: 32px;
  cursor: pointer;
  border-radius: 6px;
}
.btn-close:hover { background: var(--surface-2); color: var(--text); }

.modal-body {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
:root[data-theme="eva01"] .field-label {
  color: var(--accent);
  text-shadow: 0 0 4px var(--accent-glow);
}
.modal-body input[type="text"],
.modal-body input[type="url"],
.modal-body select,
.modal-body textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  outline: none;
  resize: vertical;
}
:root[data-theme="eva01"] .modal-body input,
:root[data-theme="eva01"] .modal-body select,
:root[data-theme="eva01"] .modal-body textarea {
  background: rgba(10, 5, 18, 0.7);
  border-color: var(--border-strong);
}
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.modal-body label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.modal-body label input,
.modal-body label select,
.modal-body label textarea {
  color: var(--text);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.addr-list { display: flex; flex-direction: column; gap: 6px; }
.addr-row { display: flex; gap: 6px; align-items: center; }
.addr-row input { flex: 1; }
.addr-row .addr-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px; height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.addr-row .addr-remove:hover { color: var(--danger); border-color: var(--danger); }
.btn-add-addr {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
:root[data-theme="eva01"] .btn-add-addr {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-add-addr:hover { border-color: var(--accent); color: var(--accent); }

#btn-extract { margin-top: 4px; }
.status-msg {
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  min-height: 44px;
  word-break: break-word;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.status-msg.error {
  background: rgba(255, 56, 96, 0.1);
  color: var(--danger);
  border-color: var(--danger);
}
.status-msg.warn {
  background: rgba(255, 184, 0, 0.08);
  color: var(--text);
  border-color: var(--accent);
}
:root[data-theme="eva01"] .status-msg.warn {
  background: rgba(255, 184, 0, 0.06);
  border-color: var(--accent);
  color: var(--text);
}
.status-msg a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}
.status-msg.ok {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: var(--accent);
}
:root[data-theme="eva01"] .status-msg.ok {
  text-shadow: 0 0 4px var(--accent-glow);
}
.status-msg:empty { display: none; }

.preview-card {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preview-card.hidden { display: none; }
.preview-thumb-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
}
.preview-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.preview-fields { display: flex; flex-direction: column; gap: 8px; }
.preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.preview-actions .btn-primary { flex: 1; }

/* Address picker modal */
.picker-card { max-width: 480px; }
.picker-actions {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}
.picker-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.picker-item:hover {
  border-color: var(--accent);
  background: var(--surface);
}
.picker-num {
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 11px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.picker-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

/* Guided paste card inside image-search modal — replaces the auto grid
   which returned generic results from the worker IP. */
.guided-paste {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:root[data-theme="eva01"] .guided-paste {
  background: linear-gradient(180deg, rgba(10, 30, 18, 0.4) 0%, rgba(10, 5, 18, 0.6) 100%);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.guided-paste-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.3px;
}
.guided-paste-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.guided-paste-steps .step {
  padding-left: 4px;
}
.guided-paste .search-link {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}
.guided-paste .search-link:hover {
  color: var(--text);
  background: var(--accent);
  text-decoration: none;
  padding: 0 2px;
  border-radius: 3px;
}
.guided-paste-tip {
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
  font-style: italic;
}

/* Image search modal */
.img-search-card { max-width: 720px; }
.img-search-query {
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
  word-break: break-all;
}
.img-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 680px) {
  .img-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.img-candidate {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: all 0.15s;
  position: relative;
  aspect-ratio: 4/3;
}
.img-candidate:hover {
  border-color: var(--accent);
  transform: scale(1.02);
}
.img-candidate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--bg);
}
.img-candidate .img-src {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  color: var(--accent);
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 700;
}

.manual-paste {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.manual-paste summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
  list-style: none;
  user-select: none;
}
.manual-paste summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 6px;
  font-size: 9px;
  transition: transform 0.15s;
}
.manual-paste[open] summary::before {
  transform: rotate(90deg);
}
.manual-paste-body {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.manual-paste-body input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.manual-paste-body input:focus {
  border-color: var(--accent);
}

/* Inline card edit form */
.inline-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px;
  margin-top: 4px;
}
:root[data-theme="eva01"] .inline-edit {
  background: rgba(10, 30, 18, 0.5);
  box-shadow: 0 0 10px var(--accent-glow);
}
.inline-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.inline-edit-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.ie-row {
  display: flex;
  gap: 8px;
}
.ie-row > label {
  flex: 1;
}
.ie-row select {
  width: 100%;
}

/* Preview entries (multi-add via from-url) */
.preview-entry {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid var(--border);
}
.preview-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preview-fields > label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.preview-fields input,
.preview-fields select,
.preview-fields textarea {
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}
.ie-addr-list {
  margin: 4px 0;
}
.entry-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-block;
}
:root[data-theme="eva01"] .entry-tag {
  background: rgba(57, 255, 20, 0.1);
  color: var(--accent);
  border: 1px solid rgba(57, 255, 20, 0.3);
}
.inline-edit label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.inline-edit input,
.inline-edit select,
.inline-edit textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  outline: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.inline-edit input:focus,
.inline-edit select:focus,
.inline-edit textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.inline-edit textarea {
  resize: vertical;
  min-height: 50px;
}
.ie-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ie-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.ie-addr-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ie-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.ie-actions .btn-primary { flex: 1; }
.ie-actions .btn-secondary { flex: 1; }

.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 600;
  z-index: 60;
  animation: toast-in 0.2s;
  max-width: 90vw;
  word-break: break-word;
}
:root[data-theme="eva01"] .toast {
  color: var(--accent);
  text-shadow: 0 0 4px var(--accent-glow);
}
.toast.hidden { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Pull-to-refresh: now using the browser's native pull-to-reload — no custom
   indicator or touch listeners. The body uses overscroll-behavior-y: contain
   (set above) so the bounce only triggers the reload, not a scroll jiggle. */

@media (min-width: 680px) {
  body { font-size: 14px; }
  .app-header { padding: 16px 24px 12px; }
  .app-header h1 { font-size: 20px; }
  .toolbar { padding: 10px 0; }
  .search-row { padding: 0 24px 8px 24px; }
  .filter-label { padding: 0 24px 4px 24px; }
  .chips { padding: 2px 24px 6px 24px; }
  /* Desktop: filter groups inline in single row */
  .filter-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 4px 24px 6px 24px;
    width: auto;
  }
  .filter-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: auto;
    margin-bottom: 0;
  }
  .filter-label { width: auto; }
  .chips { width: auto; }
  .places {
    padding: 16px 24px 100px;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  /* Desktop: card layout same as mobile (thumb on top, body below).
     Override the 3-column grid + 1080px max-width on the grid container. */
  .places {
    padding: 16px 24px 100px;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  /* Same thumb sizing for desktop */
  .card-check {
    top: 8px; left: 8px;
  }
  .empty { grid-column: 1 / -1; }
  /* Desktop: hide the drag handle — the whole card is draggable. */
  body.desktop-edit .drag-handle { visibility: hidden; opacity: 0; }
}
/* ============================================================
 * B612 ♡ RV — Pastel Overrides (override Eva defaults)
 * Loaded at end → wins on equal specificity.
 * ============================================================ */

/* --- Loading screen: cream + soft rose, no scan lines --- */
.loading-screen {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(244, 180, 0, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(232, 134, 130, 0.10) 0%, transparent 60%),
    #fdf6e3;
}
.loading-icon {
  background: linear-gradient(135deg, #fff7d6 0%, #ffe1d0 50%, #ffd6e0 100%);
  border: 2px solid #f4b400;
  box-shadow:
    0 6px 20px rgba(244, 180, 0, 0.25),
    0 2px 6px rgba(192, 57, 43, 0.10);
  animation: icon-pulse-soft 2.2s ease-in-out infinite;
}
.loading-icon::before {
  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
}
.loading-icon img,
.loading-icon svg {
  filter: none;
}
.loading-icon svg {
  color: #c0392b;
  width: 70%;
  height: 70%;
}
@keyframes icon-pulse-soft {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(244, 180, 0, 0.25), 0 2px 6px rgba(192, 57, 43, 0.10); }
  50% { transform: scale(1.04); box-shadow: 0 8px 28px rgba(244, 180, 0, 0.35), 0 3px 8px rgba(192, 57, 43, 0.15); }
}
.loading-text {
  color: #c0392b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 22px;
  font-weight: 700;
}
.loading-bar {
  background: rgba(244, 180, 0, 0.18);
  border: 1px solid rgba(244, 180, 0, 0.30);
  border-radius: 4px;
  height: 6px;
}
.loading-bar-fill {
  background: linear-gradient(90deg, #f4b400 0%, #e67e22 50%, #c0392b 100%);
  background-size: 200% 100%;
  animation: bar-fill 1.4s ease-out forwards, bar-shine 1.4s linear infinite;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(244, 180, 0, 0.4);
}
.loading-status {
  color: #6b7c5e;
  text-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
  text-transform: none;
  letter-spacing: 0.5px;
  animation: status-blink 1.4s ease-in-out infinite;
}

/* --- Login screen: cream + soft stars --- */
.login-screen {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(244, 180, 0, 0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(232, 134, 130, 0.15) 0%, transparent 50%),
    #fdf6e3;
}
.login-icon {
  background: linear-gradient(135deg, #fff7d6 0%, #ffe1d0 50%, #ffd6e0 100%);
  border: 2px solid #f4b400;
  box-shadow: 0 6px 20px rgba(244, 180, 0, 0.25), 0 2px 6px rgba(192, 57, 43, 0.10);
  animation: icon-pulse-soft 2.2s ease-in-out infinite;
  border-radius: 28px;
}
.login-icon svg {
  color: #c0392b;
  width: 60%;
  height: 60%;
}
.login-icon img { filter: none; }
.login-title {
  color: #c0392b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 28px;
  font-weight: 700;
}
.login-subtitle {
  color: #6b7c5e;
  text-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 14px;
}

/* --- Login buttons: pastel + soft + cute --- */
.login-btn {
  background: #ffffff;
  border: 1.5px solid #f1e5c8;
  color: #1e4d2b;
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
  text-align: left;
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.04);
}
.login-btn:hover {
  background: #fffaf0;
  border-color: #f4b400;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 180, 0, 0.18);
}
.login-btn-owner {
  border-color: #f4b400;
  background: linear-gradient(135deg, #fff7d6 0%, #ffffff 100%);
}
.login-btn-owner:hover {
  background: linear-gradient(135deg, #fff2b8 0%, #fff7d6 100%);
  border-color: #e67e22;
  box-shadow: 0 4px 14px rgba(244, 180, 0, 0.28);
}
.login-btn-icon {
  font-size: 22px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.login-btn-name {
  flex: 1;
  font-weight: 700;
  color: #1e4d2b;
}
.login-btn-tag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #fff2b8;
  color: #a96a00;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  border: 1px solid #f4b400;
}
.login-btn:not(.login-btn-owner) .login-btn-tag {
  background: #ffe1d0;
  color: #c0392b;
  border-color: #e67e22;
}

/* --- App header: pastel + user-tag next to title --- */
.app-header {
  background: linear-gradient(180deg, #fffaf0 0%, #fdf6e3 100%);
  border-bottom: 1px solid #f1e5c8;
  box-shadow: 0 1px 0 rgba(244, 180, 0, 0.10);
  gap: 8px;
  flex-wrap: nowrap;
}
.app-header h1 {
  color: #1e4d2b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
  text-transform: none;
  letter-spacing: 0.3px;
  font-size: 18px;
  font-weight: 700;
}
.app-header h1 .prince-glyph { color: #c0392b; vertical-align: middle; margin-right: 4px; }

/* user-tag next to title (no more middle-float).
   On desktop, push it right after title (no extra gap from buttons). */
.user-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  background: #fff7d6;
  border: 1px solid #f4b400;
  color: #a96a00;
  margin-right: 0;
  margin-left: 16px;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  order: 0;
  box-shadow: 0 1px 3px rgba(244, 180, 0, 0.15);
  flex-shrink: 0;
}
.app-header-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  margin-right: 0;
}
/* Cancel the h1 flex:1 (from older rules) so title doesn't push user-tag to middle */
.app-header h1 { flex: 0 0 auto !important; min-width: 0; }
/* Push the entire right-side group (user-tag + actions) to the right edge.
   On desktop, user-tag + actions stick together on the far right. */
.header-actions { margin-left: auto; }
.user-tag.owner {
  background: linear-gradient(135deg, #fff7d6 0%, #ffe1d0 100%);
  border-color: #e67e22;
  color: #c0392b;
}
.user-tag:not(.owner) {
  background: #ffe1d0;
  border-color: #e67e22;
  color: #c0392b;
}

/* On mobile (≤679px): hide title to save space, keep user-tag + actions visible */
@media (max-width: 679px) {
  .app-header h1 { display: none; }
  .app-header { gap: 6px; }
  .user-tag { font-size: 11px; padding: 4px 10px; }
  .header-actions { gap: 4px; }
  .btn-icon { width: 34px; height: 34px; }
  .app-header-left { flex: 1; }
}

/* --- Header icon buttons: pastel --- */
.btn-icon {
  background: #ffffff;
  border: 1.5px solid #f1e5c8;
  color: #1e4d2b;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(192, 57, 43, 0.04);
}
.btn-icon:hover {
  border-color: #f4b400;
  color: #c0392b;
  box-shadow: 0 2px 6px rgba(244, 180, 0, 0.18);
}
.btn-icon.active {
  background: linear-gradient(135deg, #f4b400 0%, #e67e22 100%);
  color: #ffffff;
  border-color: #e67e22;
  box-shadow: 0 2px 8px rgba(244, 180, 0, 0.35);
}

/* --- Toolbar (filter chips) — pastel --- */
.toolbar {
  background: #fffaf0;
  border-bottom: 1px solid #f1e5c8;
  padding: 14px 16px 16px;
  position: static;
}
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  padding: 2px 0;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #f1e5c8;
  color: #1e4d2b;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
  font-family: inherit;
}
.chip:hover {
  border-color: #f4b400;
  color: #c0392b;
}
.chip.active {
  background: linear-gradient(135deg, #f4b400 0%, #e67e22 100%);
  border-color: #e67e22;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(244, 180, 0, 0.30);
}
.filter-label {
  color: #6b7c5e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-right: 6px;
}

/* --- Search input: pastel --- */
#search {
  background: #ffffff;
  border: 1.5px solid #f1e5c8;
  color: #1e4d2b;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#search:focus {
  border-color: #f4b400;
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 180, 0, 0.15);
}

/* --- Cards: pastel + soft --- */
.card {
  background: #ffffff;
  border: 1.5px solid #f1e5c8;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.05);
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.10);
}
.card-thumb {
  background: linear-gradient(135deg, #fff7d6 0%, #ffe1d0 100%);
  border-radius: 14px 14px 0 0;
}

/* --- B612 dark night mode override --- */
:root[data-theme="b612-night"] .app-header {
  background: linear-gradient(180deg, #1a1538 0%, #0f0a2e 100%);
  border-bottom-color: #2e2750;
  box-shadow: 0 1px 0 rgba(255, 215, 0, 0.10);
}
:root[data-theme="b612-night"] .app-header h1 {
  color: #f5f0e8;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}
:root[data-theme="b612-night"] .app-header h1 .prince-glyph { color: #ff6b9d; }
:root[data-theme="b612-night"] .user-tag {
  background: rgba(255, 215, 0, 0.10);
  border-color: #ffd700;
  color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}
:root[data-theme="b612-night"] .user-tag.owner {
  background: rgba(255, 107, 157, 0.10);
  border-color: #ff6b9d;
  color: #ff6b9d;
}
:root[data-theme="b612-night"] .btn-icon {
  background: rgba(26, 21, 56, 0.7);
  border-color: #2e2750;
  color: #f5f0e8;
}
:root[data-theme="b612-night"] .btn-icon:hover {
  border-color: #ffd700;
  color: #ffd700;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15);
}
:root[data-theme="b612-night"] .toolbar {
  background: #1a1538;
  border-bottom-color: #2e2750;
}
:root[data-theme="b612-night"] .chip {
  background: rgba(26, 21, 56, 0.6);
  border-color: #2e2750;
  color: #f5f0e8;
}
:root[data-theme="b612-night"] .chip:hover {
  border-color: #ffd700;
  color: #ffd700;
}
:root[data-theme="b612-night"] .chip.active {
  background: linear-gradient(135deg, #ffd700 0%, #ff9f43 100%);
  color: #0f0a2e;
  border-color: #ff9f43;
}
:root[data-theme="b612-night"] .filter-label {
  color: #9d96b8;
}
:root[data-theme="b612-night"] #search {
  background: rgba(26, 21, 56, 0.6);
  border-color: #2e2750;
  color: #f5f0e8;
}
:root[data-theme="b612-night"] #search:focus {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.20);
}
:root[data-theme="b612-night"] .card {
  background: #1a1538;
  border-color: #2e2750;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}
:root[data-theme="b612-night"] .card:hover {
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.15);
}
:root[data-theme="b612-night"] .card-thumb {
  background: linear-gradient(135deg, #251e4a 0%, #2e2750 100%);
}
:root[data-theme="b612-night"] .loading-screen {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 215, 0, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(255, 107, 157, 0.10) 0%, transparent 60%),
    #0f0a2e;
}
:root[data-theme="b612-night"] .loading-icon {
  background: linear-gradient(135deg, #251e4a 0%, #2e2750 50%, #251e4a 100%);
  border-color: #ffd700;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.5);
}
:root[data-theme="b612-night"] .loading-icon svg { color: #ff6b9d; }
:root[data-theme="b612-night"] .loading-text { color: #ffd700; }
:root[data-theme="b612-night"] .loading-status { color: #9d96b8; }
:root[data-theme="b612-night"] .login-screen {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(255, 107, 157, 0.10) 0%, transparent 50%),
    #0f0a2e;
}
:root[data-theme="b612-night"] .login-icon {
  background: linear-gradient(135deg, #251e4a 0%, #2e2750 50%, #251e4a 100%);
  border-color: #ffd700;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.5);
}
:root[data-theme="b612-night"] .login-icon svg { color: #ff6b9d; }
:root[data-theme="b612-night"] .login-title { color: #ffd700; }
:root[data-theme="b612-night"] .login-subtitle { color: #9d96b8; }
:root[data-theme="b612-night"] .login-btn {
  background: rgba(26, 21, 56, 0.7);
  border-color: #2e2750;
  color: #f5f0e8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}
:root[data-theme="b612-night"] .login-btn:hover {
  background: rgba(26, 21, 56, 0.9);
  border-color: #ffd700;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.18);
}
:root[data-theme="b612-night"] .login-btn-owner {
  border-color: #ffd700;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.10) 0%, rgba(26, 21, 56, 0.7) 100%);
}
:root[data-theme="b612-night"] .login-btn-owner:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.20) 0%, rgba(26, 21, 56, 0.7) 100%);
  border-color: #ff6b9d;
}
:root[data-theme="b612-night"] .login-btn-name { color: #f5f0e8; }
:root[data-theme="b612-night"] .login-btn-tag {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
  border-color: #ffd700;
}
:root[data-theme="b612-night"] .login-btn:not(.login-btn-owner) .login-btn-tag {
  background: rgba(255, 107, 157, 0.15);
  color: #ff6b9d;
  border-color: #ff6b9d;
}