/* 深圳想去的地方 — Eva-01 dark / Eva-00 light theme */

/* === Eva-01 (default dark): 黑 + 紫 + 螢光綠 === */
:root,
:root[data-theme="eva01"] {
  --bg: #000000;
  --bg-elevated: #0a0512;
  --surface: #0e0a18;
  --surface-2: #1a1426;
  --border: #2a1f3a;
  --border-strong: #5B2A86;
  --text: #f0f0f5;
  --text-muted: #a89cb8;
  --accent: #39ff14;          /* Eva 螢光綠 */
  --accent-2: #9b4dff;        /* Eva 亮紫 (高飽和) */
  --accent-2-dim: #5B2A86;    /* Eva 深紫 (低飽和) */
  --accent-3: #ff7a00;        /* Eva 橙 (for 茶飲 type) */
  --accent-glow: rgba(57, 255, 20, 0.25);
  --purple-glow: rgba(155, 77, 255, 0.22);
  --type-restaurant: #39ff14;
  --type-massage: #FA0203;
  --type-tea: #ff7a00;
  --type-dessert: #ffb800;
  --type-shopping: #9b4dff;
  --type-attraction: #00d9ff;
  --danger: #ff3860;
  --success: #39ff14;
  --shadow: 0 2px 12px rgba(155, 77, 255, 0.15), 0 2px 8px rgba(0,0,0,0.7);
  --radius: 14px;
  --radius-sm: 8px;
  --header-pattern:
    linear-gradient(135deg, #2a0f4a 0%, #5B2A86 40%, #1a0524 100%);
  --purple-accent-bar: linear-gradient(90deg,
    transparent 0%, var(--accent-2) 20%, var(--accent-2) 80%, transparent 100%);
  --green-accent-bar: linear-gradient(90deg,
    transparent 0%, var(--accent) 15%, var(--accent) 85%, transparent 100%);
}

/* === Eva-00 (light): 白 + 黃 + 灰 === */
:root[data-theme="eva00"] {
  --bg: #f5f5f0;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #efefe8;
  --border: #d8d8d0;
  --border-strong: #ffb800;
  --text: #1a1a1a;
  --text-muted: #6a6a6a;
  --accent: #ffb800;
  --accent-2: #888888;
  --accent-2-dim: #aaaaaa;
  --accent-3: #ff8800;
  --accent-glow: rgba(255, 184, 0, 0.18);
  --purple-glow: rgba(0,0,0,0);
  --type-restaurant: #22b80e;
  --type-massage: #FA0203;
  --type-tea: #ff8800;
  --type-dessert: #d49000;
  --type-shopping: #6b46c1;
  --type-attraction: #0284c7;
  --danger: #d92e4f;
  --success: #1c7d3a;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --header-pattern: linear-gradient(180deg, #ffffff 0%, #f5f5f0 100%);
  --purple-accent-bar: linear-gradient(90deg,
    transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%);
  --green-accent-bar: linear-gradient(90deg,
    transparent 0%, var(--accent) 20%, var(--accent) 80%, 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-pick-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 20px !important;
  background: linear-gradient(135deg, rgba(91, 42, 134, 0.25) 0%, rgba(26, 20, 38, 0.9) 100%) !important;
  border: 2px solid rgba(57, 255, 20, 0.4) !important;
  color: var(--text) !important;
  font-size: 15px !important;
  min-height: 96px;
  position: relative;
  overflow: hidden;
}
.region-pick-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(57, 255, 20, 0.12) 50%, transparent 70%);
  pointer-events: none;
  animation: bar-shine 2.6s linear infinite;
}
.region-pick-btn:hover {
  border-color: var(--accent) !important;
  background: linear-gradient(135deg, rgba(91, 42, 134, 0.4) 0%, rgba(57, 255, 20, 0.1) 100%) !important;
  box-shadow: 0 0 18px var(--accent-glow) !important;
  transform: translateY(-2px) scale(1.02);
}
.region-flag-big {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.4));
}
.region-name-big {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
  font-family: "Consolas", "SF Mono", "Courier New", monospace;
}
.region-tag-big {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
.region-pick-sz {
  border-color: rgba(255, 56, 96, 0.5) !important;
}
.region-pick-sz:hover {
  box-shadow: 0 0 18px rgba(255, 56, 96, 0.5) !important;
}
.region-pick-hk {
  border-color: rgba(57, 199, 255, 0.5) !important;
}
.region-pick-hk:hover {
  box-shadow: 0 0 18px rgba(57, 199, 255, 0.5) !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; }
}