/* =============================================================================
   PinBack Design System — Light & Dark Mode
   ============================================================================= */

/* --- Design Tokens --- */
:root {
  /* Brand */
  --brand: #16a34a;
  --brand-hover: #15803d;
  --brand-subtle: #f0fdf4;
  --brand-ring: rgba(22,163,74,0.2);

  /* Surfaces */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --surface-hover: #e8edf2;

  /* Borders */
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Text */
  --text: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  /* Topbar */
  --topbar-bg: #111827;
  --topbar-text: #f9fafb;

  /* Semantic */
  --danger: #dc2626;
  --danger-subtle: #fef2f2;
  --danger-border: #fecaca;
  --warning: #f59e0b;
  --warning-subtle: #fffbeb;
  --warning-border: #fcd34d;
  --warning-text: #92400e;
  --success: #16a34a;
  --success-subtle: #f0fdf4;
  --success-border: #86efac;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;
  --info-text: #1e40af;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.12);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index */
  --z-resizer: 5;
  --z-topbar: 100;
  --z-dropdown: 200;
  --z-overlay: 1000;
  --z-toast: 2000;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 28px;

  /* Image viewer */
  --viewer-bg: #0a0a0a;

  color-scheme: light;
}

/* --- Dark Mode Tokens --- */
[data-theme="dark"] {
  --brand: #22c55e;
  --brand-hover: #4ade80;
  --brand-subtle: rgba(34,197,94,0.1);
  --brand-ring: rgba(34,197,94,0.25);

  --bg: #0f172a;
  --surface: #1e293b;
  --surface-alt: #283548;
  --surface-hover: #334155;

  --border: #334155;
  --border-strong: #475569;

  --text: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --topbar-bg: #020617;

  --danger: #f87171;
  --danger-subtle: rgba(248,113,113,0.1);
  --danger-border: rgba(248,113,113,0.3);
  --warning: #fbbf24;
  --warning-subtle: rgba(251,191,36,0.1);
  --warning-border: rgba(251,191,36,0.3);
  --warning-text: #fbbf24;
  --success: #4ade80;
  --success-subtle: rgba(74,222,128,0.1);
  --success-border: rgba(74,222,128,0.3);
  --info-bg: rgba(59,130,246,0.1);
  --info-border: rgba(59,130,246,0.3);
  --info-text: #93c5fd;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.4);

  --viewer-bg: #000;

  color-scheme: dark;
}

/* =============================================================================
   Base & Reset
   ============================================================================= */

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

::selection{background:var(--brand-ring);color:var(--text)}

body{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.5;
  height:100vh;
  display:flex;
  flex-direction:row;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Scrollbar */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
@supports (scrollbar-width: thin) {
  *{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

/* =============================================================================
   Sidebar
   ============================================================================= */

#sidebar{
  width:260px;
  height:100vh;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  background:var(--topbar-bg);
  color:var(--topbar-text);
  z-index:var(--z-topbar);
  border-right:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
  position:relative;
}

/* Header */
.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  height:52px;
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-header strong{
  font-size:var(--text-lg);
  cursor:pointer;
  letter-spacing:-0.01em;
  font-weight:800;
  transition:opacity var(--transition-fast);
  display:flex;
  align-items:center;
  gap:8px;
}
.sidebar-header strong:hover{opacity:0.8}
.sidebar-pin-logo{width:20px;height:20px;stroke:var(--brand);flex-shrink:0}

/* Admin warning icon (shown next to gear when user is admin) */
.sidebar-admin-warning{
  width:28px;height:28px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  color:#f59e0b;
  cursor:pointer;
  transition:all var(--transition-fast);
  flex-shrink:0;
}
.sidebar-admin-warning:hover{background:rgba(245,158,11,0.15);border-color:rgba(245,158,11,0.3)}
.sidebar-admin-warning svg{width:16px;height:16px}

/* Gear button */
.sidebar-gear-btn{
  width:32px;height:32px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  color:rgba(255,255,255,0.5);
  cursor:pointer;
  transition:all var(--transition-fast);
}
.sidebar-gear-btn:hover{color:#fff;background:rgba(255,255,255,0.08)}
.sidebar-gear-btn.active{color:var(--brand)}
.sidebar-gear-btn svg{width:18px;height:18px;transition:transform var(--transition-normal)}
.sidebar-gear-btn:hover svg{transform:rotate(30deg)}

/* New button */
.sidebar-new-btn{
  margin:12px 12px 4px;
  padding:10px 16px;
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:var(--radius-md);
  font-size:var(--text-base);
  font-weight:600;
  font-family:var(--font-sans);
  cursor:pointer;
  transition:all var(--transition-fast);
  flex-shrink:0;
}
.sidebar-new-btn:hover{
  background:var(--brand-hover);
  box-shadow:0 4px 12px rgba(22,163,74,0.3);
  transform:translateY(-1px);
}
.sidebar-new-btn:active{transform:translateY(0)}

/* Nav items */
.sidebar-nav{
  display:flex;
  flex-direction:column;
  padding:8px 8px 4px;
  gap:2px;
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  font-size:var(--text-sm);
  font-weight:500;
  font-family:var(--font-sans);
  color:rgba(255,255,255,0.65);
  background:transparent;
  border:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--transition-fast);
  text-align:left;
  white-space:nowrap;
  position:relative;
}
.sidebar-nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:0.7}
.sidebar-nav-item:hover{color:#fff;background:rgba(255,255,255,0.08)}
.sidebar-nav-item:hover svg{opacity:1}
.sidebar-nav-item.active{
  color:#fff;
  background:rgba(255,255,255,0.1);
  border-left:3px solid var(--brand);
  padding-left:9px;
}
.sidebar-nav-item.active svg{opacity:1;stroke:var(--brand)}

/* Draft badge */
.sidebar-badge{
  margin-left:auto;
  background:var(--brand);
  color:#fff;
  font-size:var(--text-xs);
  font-weight:700;
  padding:1px 7px;
  border-radius:var(--radius-full);
  min-width:20px;
  text-align:center;
}

/* Sidebar sections */
.sidebar-section{
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-albums-section{
  flex:1;
  min-height:0;
  border-bottom:none;
}
.sidebar-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px 6px;
  flex-shrink:0;
}
.sidebar-section-header span{
  font-size:var(--text-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:rgba(255,255,255,0.4);
}
.sidebar-tag-clear{
  font-size:var(--text-xs);
  color:rgba(255,255,255,0.5);
  background:transparent;
  border:none;
  cursor:pointer;
  padding:2px 6px;
  border-radius:var(--radius-sm);
  font-family:var(--font-sans);
  transition:all var(--transition-fast);
}
.sidebar-tag-clear:hover{color:#fff;background:rgba(255,255,255,0.1)}

/* Tag list in sidebar */
.sidebar-tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:0 12px 10px;
  max-height:224px;
  overflow-y:auto;
}
.sidebar-tag-list .tag-chip{
  font-size:var(--text-xs);
  padding:3px 10px;
  border-color:rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.6);
  background:transparent;
}
.sidebar-tag-list .tag-chip:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.25);
  color:#fff;
}
.sidebar-tag-list .tag-chip.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

/* Album list in sidebar */
.sidebar-album-list{
  flex:1;
  overflow-y:auto;
  padding:0 8px 8px;
}
.sidebar-album-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--transition-fast);
}
.sidebar-album-item:hover{background:rgba(255,255,255,0.08)}
.sidebar-album-item.active{background:rgba(255,255,255,0.1)}
.sidebar-album-thumb{
  width:36px;height:36px;
  border-radius:var(--radius-sm);
  object-fit:cover;
  flex-shrink:0;
  background:rgba(255,255,255,0.08);
}
.sidebar-album-thumb-placeholder{
  width:36px;height:36px;
  border-radius:var(--radius-sm);
  flex-shrink:0;
  background:rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:rgba(255,255,255,0.3);
}
.sidebar-album-info{
  min-width:0;
  flex:1;
}
.sidebar-album-name{
  font-size:var(--text-sm);
  font-weight:500;
  color:rgba(255,255,255,0.85);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-album-count{
  font-size:var(--text-xs);
  color:rgba(255,255,255,0.4);
}

/* Version pill — floating bottom-right of sidebar */
.sidebar-version-pill{
  position:absolute;
  bottom:8px;
  right:10px;
  font-size:10px;
  font-weight:500;
  color:rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:2px 7px;
  pointer-events:none;
  letter-spacing:0.02em;
  z-index:1;
}

/* App main wrapper */
#app-main{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
}

/* Keep .nav-btn for album view + other places that still use it */
.nav-btn{
  font-size:var(--text-sm);
  padding:6px 16px;
  cursor:pointer;
  background:transparent;
  color:var(--text-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  transition:all var(--transition-fast);
  font-family:var(--font-sans);
  font-weight:500;
  white-space:nowrap;
  position:relative;
}
.nav-btn:hover{color:var(--text);background:var(--surface-hover)}
.nav-btn.primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  font-weight:600;
}
.nav-btn.primary:hover{
  background:var(--brand-hover);
  border-color:var(--brand-hover);
}

/* Theme toggle in settings topstrip */
#theme-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-sm);padding:6px 12px;
  cursor:pointer;border:1px solid var(--border);
  background:var(--surface);color:var(--text);
  border-radius:var(--radius-sm);
  transition:all var(--transition-fast);
  font-family:var(--font-sans);
}
#theme-toggle:hover{background:var(--surface-hover)}
#theme-toggle svg{width:15px;height:15px;flex-shrink:0}

/* =============================================================================
   Views
   ============================================================================= */

.view{display:none;flex:1;overflow:hidden}
.view.active{display:flex;animation:viewFadeIn var(--transition-slow) ease}

@keyframes viewFadeIn{from{opacity:0}to{opacity:1}}

.panel-title{
  background:var(--surface-alt);
  padding:8px 14px;
  font-weight:600;
  font-size:var(--text-sm);
  flex-shrink:0;
  color:var(--text-secondary);
  letter-spacing:0.02em;
  border-bottom:1px solid var(--border);
  text-transform:uppercase;
  font-size:var(--text-xs);
}

.map-toggle{
  background:var(--surface);
  padding:4px 8px;
  display:flex;
  gap:2px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.map-toggle button{
  font-size:var(--text-xs);
  padding:4px 12px;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  transition:all var(--transition-fast);
  font-family:var(--font-sans);
}
.map-toggle button.active{
  background:var(--topbar-bg);
  color:var(--topbar-text);
  border-color:var(--topbar-bg);
}
[data-theme="dark"] .map-toggle button.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.map-search{
  display:flex;
  flex:1;
  align-items:center;
  gap:4px;
  margin-left:8px;
}
.map-search input{
  flex:1;
  font-size:var(--text-xs);
  padding:3px 8px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-alt);
  color:var(--text);
  font-family:var(--font-sans);
  min-width:0;
}
.map-search input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 2px var(--brand-ring);
}
.map-search button{
  font-size:var(--text-xs);
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-alt);
  color:var(--text-muted);
  cursor:pointer;
  flex-shrink:0;
}
.map-search button:hover{
  background:var(--topbar-bg);
  color:var(--topbar-text);
  border-color:var(--topbar-bg);
}

/* =============================================================================
   Login
   ============================================================================= */

#view-login{
  justify-content:center;
  align-items:center;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}

/* Subtle animated background */
#view-login::before{
  content:'';
  position:absolute;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle, var(--brand-ring) 0%, transparent 70%);
  top:-150px;right:-100px;
  animation:loginFloat 20s ease-in-out infinite;
}
#view-login::after{
  content:'';
  position:absolute;
  width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
  bottom:-100px;left:-80px;
  animation:loginFloat 25s ease-in-out infinite reverse;
}
@keyframes loginFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,15px) scale(1.05)}
}

#login-box{
  background:var(--surface);
  border-radius:var(--radius-xl);
  padding:44px 40px;
  width:380px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
  position:relative;
  z-index:1;
}
#login-box h2{
  font-size:var(--text-2xl);
  margin-bottom:4px;
  text-align:center;
  color:var(--text);
  font-weight:800;
  letter-spacing:-0.02em;
}
#login-subtitle{
  text-align:center;
  color:var(--text-muted);
  font-size:var(--text-sm);
  margin-bottom:28px;
}
#login-box .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
#login-box label{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}
#login-box input{
  font-size:var(--text-base);
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  transition:all var(--transition-fast);
  background:var(--surface);
  color:var(--text);
  height:42px;
}
#login-box input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-ring);
  outline:none;
}
#login-box button{
  font-size:var(--text-base);
  padding:12px 20px;
  cursor:pointer;
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:var(--radius-md);
  width:100%;
  font-weight:600;
  transition:all var(--transition-fast);
  height:46px;
  font-family:var(--font-sans);
}
#login-box button:hover{
  background:var(--brand-hover);
  box-shadow:0 4px 16px rgba(22,163,74,0.25);
  transform:translateY(-1px);
}
#login-box button:active{transform:translateY(0)}
#login-error{color:var(--danger);font-size:var(--text-sm);margin-top:12px;display:none;text-align:center}
#setup-hint{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:16px;display:none;text-align:center}

/* =============================================================================
   Library
   ============================================================================= */

#view-library{flex-direction:column}
#lib-map-container{
  height:33vh;
  flex-shrink:0;
  position:relative;
  z-index:1;
  border-bottom:1px solid var(--border);
}
#lib-map{height:100%;width:100%}

/* Search wrapper with clear button */
#search-wrapper{position:relative;flex:1;min-width:120px;display:flex}
#search-wrapper #search-input{flex:1;padding-right:32px}
#search-clear-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:18px;
  cursor:pointer;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:all var(--transition-fast);
}
#search-clear-btn:hover{color:var(--danger);background:var(--surface-hover)}

/* Pulsing map pin markers */
.lib-pin-marker{
  width:16px;height:16px;
  background:var(--brand);
  border-radius:50%;
  box-shadow:0 0 8px rgba(22,163,74,0.6), 0 0 20px rgba(22,163,74,0.3);
  position: relative;
}

.lib-pin-marker:after {
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.5;
  position: absolute;
  transform-origin: 50% 50%;
  animation: pin-pulse 2s ease-out infinite;
}

@keyframes pin-pulse {
  0% {
    scale: 1;
    opacity: 0.5;
  }

  70% {
    scale: 2;
    opacity: 0;
  }

  100% {
    scale: 1;
    opacity: 0;
  }
}

/* Location info in grid items */
.thumb-location{
  color:var(--text-muted);
  font-size:var(--text-xs);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Filter bar */
#filter-bar{
  padding:12px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:10px;
  flex-shrink:0;
}
#search-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#search-input{
  font-size:var(--text-base);
  padding:8px 14px 8px 36px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface-alt);
  color:var(--text);
  transition:all var(--transition-fast);
  font-family:var(--font-sans);
  height:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:12px center;
}
#search-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-ring);
  outline:none;
  background-color:var(--surface);
}
#sort-select{
  font-size:var(--text-sm);
  padding:6px 28px 6px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-secondary);
  font-family:var(--font-sans);
  cursor:pointer;
  height:38px;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
}
#sort-select:focus{border-color:var(--brand);outline:none}

/* Year filter */
#year-filter-row{display:flex;gap:6px;align-items:center;font-size:var(--text-sm);color:var(--text-muted)}
#year-filter-row input{
  font-size:var(--text-sm);
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:var(--font-sans);
  background:var(--surface);
  color:var(--text);
  width:72px;
  height:32px;
}
#year-filter-row input:focus{border-color:var(--brand);outline:none}
.filter-apply-btn{
  font-size:var(--text-xs);
  padding:5px 12px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-family:var(--font-sans);
  height:32px;
  transition:all var(--transition-fast);
}
.filter-apply-btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.filter-clear-btn{
  font-size:16px;
  padding:2px 8px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-muted);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-family:var(--font-sans);
  height:32px;
  transition:all var(--transition-fast);
}
.filter-clear-btn:hover{color:var(--danger);border-color:var(--danger)}

/* Tag filters */
#tag-filters{display:flex;flex-wrap:wrap;gap:6px;max-height:68px;overflow-y:auto}
.tag-chip{
  font-size:var(--text-sm);
  padding:4px 14px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  border-radius:var(--radius-full);
  transition:all var(--transition-fast);
  color:var(--text-secondary);
  white-space:nowrap;
}
.tag-chip:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.tag-chip.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:0 2px 8px rgba(22,163,74,0.2);
}
.tag-chip.reset-chip{
  background:var(--danger);
  color:#fff;
  border-color:var(--danger);
  font-weight:600;
}
.tag-chip.reset-chip:hover{background:#b91c1c;border-color:#b91c1c}

/* Grid info */
#grid-info{
  font-size:var(--text-sm);
  color:var(--text-muted);
  white-space:nowrap;
  background:var(--surface-alt);
  padding:3px 10px;
  border-radius:var(--radius-full);
}

/* Grid container */
#grid-container{flex:1;overflow-y:auto;padding:14px}
#image-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}

/* Grid items */
.grid-item{
  background:var(--surface);
  border:1px solid var(--border);
  cursor:pointer;
  overflow:hidden;
  border-radius:var(--radius-lg);
  transition:all var(--transition-normal);
  box-shadow:var(--shadow-card);
  position:relative;
}
.grid-item:hover{
  border-color:var(--border-strong);
  transform:translateY(-3px);
  box-shadow:var(--shadow-card-hover);
}
.grid-item:active{transform:translateY(-1px)}
.grid-item .thumb{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  background:var(--surface-alt);
}
.grid-item .thumb-placeholder{
  width:100%;
  aspect-ratio:4/3;
  background:var(--surface-alt);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:var(--text-sm);
}
.grid-item .thumb-meta{padding:10px 12px}
.grid-item .thumb-title{
  font-weight:600;
  font-size:var(--text-base);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text);
}
.grid-item .thumb-year{
  color:var(--text-muted);
  font-size:var(--text-sm);
  margin-top:3px;
  display:flex;
  align-items:center;
  gap:6px;
}
.grid-item.no-pin{border-left:3px solid var(--warning)}
.draft-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.draft-chip{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:600;line-height:1.6}
.chip-pin{background:rgba(245,158,11,0.15);color:var(--warning)}
.chip-tags{background:rgba(99,102,241,0.12);color:#818cf8}
.chip-album{background:rgba(156,163,175,0.12);color:var(--text-muted)}
#empty-library{
  color:var(--text-muted);
  padding:60px 40px;
  text-align:center;
  grid-column:1/-1;
  font-size:var(--text-base);
  line-height:1.8;
}

/* Skeleton loading */
.skeleton-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.skeleton-thumb{
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-hover) 50%, var(--surface-alt) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.5s infinite;
}
.skeleton-meta{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.skeleton-line{
  height:12px;
  border-radius:var(--radius-sm);
  background:linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-hover) 50%, var(--surface-alt) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.5s infinite;
}
.skeleton-line.short{width:60%}

@keyframes skeletonShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* =============================================================================
   Overlay / Modal System
   ============================================================================= */

.overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
  animation:overlayFadeIn .2s ease;
}
.overlay.active{display:flex}
@keyframes overlayFadeIn{from{opacity:0}}

.modal{
  width:96vw;max-width:1600px;height:94vh;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  animation:modalIn .3s ease;
}
@keyframes modalIn{from{transform:scale(.96) translateY(12px);opacity:0}}

.modal-header{
  display:flex;align-items:center;padding:10px 16px;
  border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--surface-alt);gap:8px;
}
.modal-header h2{font-size:var(--text-md);font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-header-sub{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}
.modal-close{
  width:32px;height:32px;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-muted);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-fast);font-family:var(--font-sans);
  flex-shrink:0;
}
.modal-close:hover{background:var(--surface-hover);color:var(--text)}
.modal-body{flex:1;display:flex;overflow:hidden;min-height:0}
.modal-footer{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-top:1px solid var(--border);flex-shrink:0;
  background:var(--surface-alt);
}
.modal-btn{
  padding:7px 14px;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);font-size:var(--text-sm);font-weight:500;
  cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-sans);
}
.modal-btn:hover{background:var(--surface-hover);color:var(--text)}
.modal-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.modal-btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);box-shadow:0 4px 12px rgba(22,163,74,0.25)}
.modal-btn.danger{color:var(--danger);border-color:var(--danger-border)}
.modal-btn.danger:hover{background:var(--danger-subtle);border-color:var(--danger)}

/* =============================================================================
   Detail Overlay — 2×2 Grid
   ============================================================================= */

.detail-grid{
  flex:1;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  overflow:hidden;min-height:0;
}
.detail-sv-panel{
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;display:flex;
}
.detail-sv-panel iframe{width:100%;height:100%;border:none}
#detail-sv-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--viewer-bg);color:var(--text-muted);font-size:var(--text-base);
}
.detail-photo-panel{
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;display:flex;
}
.detail-photo-inner{
  width:100%;height:100%;background:var(--viewer-bg);
  position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.detail-photo-inner img{
  max-width:100%;max-height:100%;object-fit:contain;
  transition:transform var(--transition-fast);transform-origin:center center;
  user-select:none;-webkit-user-drag:none;
}
#detail-no-img{color:var(--text-muted);font-size:var(--text-base)}
.photo-controls{
  position:absolute;bottom:12px;right:12px;z-index:5;
  display:flex;gap:4px;
}
.photo-ctrl-btn{
  width:32px;height:32px;border-radius:var(--radius-md);
  background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.1);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;cursor:pointer;transition:all var(--transition-fast);
}
.photo-ctrl-btn:hover{background:rgba(0,0,0,0.8);color:#fff}

/* Detail map panel */
.detail-map-panel{
  border-right:1px solid var(--border);
  position:relative;overflow:hidden;
}
.detail-map-panel #detail-map{width:100%;height:100%}

/* Custom dot marker for overlay maps */
.custom-marker{background:none;border:none}
.marker-dot{
  width:18px;height:18px;border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 8px rgba(22,163,74,0.6), 0 0 20px rgba(22,163,74,0.3);
  position:relative;
}
.marker-dot::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--brand);opacity:.3;
  animation:marker-ring 3s ease-in-out infinite;
}
@keyframes marker-ring{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.6);opacity:0}}

/* FOV cone overlay (CSS-based) */
.fov-overlay{position:absolute;inset:0;z-index:600;pointer-events:none}
.fov-cone{
  position:absolute;top:50%;left:50%;
  width:80px;height:70px;margin-left:-40px;
  clip-path:polygon(50% 0%, 10% 100%, 90% 100%);
  background:linear-gradient(to bottom, rgba(22,163,74,0.7) 0%, rgba(22,163,74,0.35) 40%, rgba(22,163,74,0.05) 100%);
  transform-origin:50% 0%;
}
.fov-dot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 8px rgba(22,163,74,0.6), 0 0 20px rgba(22,163,74,0.3);
  z-index:601;
}
.fov-heading-label{
  position:absolute;bottom:8px;left:8px;z-index:602;
  padding:3px 8px;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);
  border-radius:var(--radius-sm);font-size:var(--text-xs);
  font-family:var(--font-mono, monospace);color:var(--brand);
  border:1px solid rgba(255,255,255,0.1);
}

/* Detail metadata panel */
.detail-meta-panel{overflow-y:auto;display:flex;flex-direction:column;min-height:0}

/* Detail field (read-only, looks like a disabled input) */
.detail-field{
  width:100%;padding:7px 10px;
  background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  font-size:var(--text-sm);font-family:var(--font-sans);
  min-height:36px;box-sizing:border-box;
  display:flex;align-items:center;
  line-height:1.4;word-break:break-word;
}
.detail-field:empty::after{content:'\2014';color:var(--text-muted)}
.detail-field.mono{font-family:var(--font-mono, monospace);font-size:var(--text-xs);color:var(--text-secondary)}
.detail-field a{color:var(--brand);text-decoration:none}
.detail-field a:hover{text-decoration:underline}

/* Tags in detail (inline above form) */
.detail-tags-inline{display:flex;flex-wrap:wrap;gap:4px}
.detail-tags-inline .tag{
  font-size:var(--text-xs);padding:3px 10px;
  border-radius:var(--radius-full);
  background:var(--brand-subtle);color:var(--brand);
  border:1px solid var(--success-border);
}

/* EXIF in detail */
.exif-summary{
  padding:8px 14px;display:flex;flex-wrap:wrap;gap:4px;
  border-top:1px solid var(--border);background:var(--surface-alt);
}
.exif-badge{
  font-size:var(--text-xs);background:var(--surface);
  border:1px solid var(--border);padding:3px 8px;
  border-radius:var(--radius-full);color:var(--text-secondary);
}
.exif-details{
  border-top:1px solid var(--border);padding:8px 14px;
  font-size:var(--text-sm);max-height:160px;overflow-y:auto;
}
.exif-details summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:var(--text-sm)}
.exif-details summary:hover{color:var(--brand-hover)}
.exif-full-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:var(--text-xs)}
.exif-full-table td{padding:3px 6px;border-bottom:1px solid var(--border);vertical-align:top;word-break:break-all}
.exif-full-table td:first-child{color:var(--text-muted);white-space:nowrap;width:160px;font-weight:500}

/* Map toggle — floating (Google Maps style) */
.map-toggle-float{
  position:absolute;bottom:10px;left:10px;z-index:999;
  display:flex;gap:0;border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.map-toggle-float button{
  font-size:var(--text-xs);padding:5px 12px;
  cursor:pointer;border:none;
  background:var(--surface);color:var(--text-muted);
  transition:all var(--transition-fast);font-family:var(--font-sans);
  font-weight:500;
}
.map-toggle-float button.active{
  background:var(--topbar-bg);color:var(--topbar-text);
}
[data-theme="dark"] .map-toggle-float button{background:rgba(30,41,59,0.9);color:var(--text-muted)}
[data-theme="dark"] .map-toggle-float button.active{background:var(--brand);color:#fff}

/* Map search — floating */
.map-search-float{
  position:absolute;top:10px;left:10px;right:10px;z-index:999;
  display:flex;gap:4px;
}
.map-search-float input{
  flex:1;font-size:var(--text-xs);padding:5px 10px;
  border:none;border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);
  font-family:var(--font-sans);box-shadow:0 1px 4px rgba(0,0,0,0.3);
  min-width:0;
}
.map-search-float input:focus{outline:none;box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 0 2px var(--brand-ring)}
.map-search-float button{
  font-size:var(--text-xs);padding:5px 8px;
  border:none;border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text-muted);
  cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.3);flex-shrink:0;
}
.map-search-float button:hover{background:var(--surface-hover)}

/* =============================================================================
   Edit Overlay — 2×2 Grid (matching detail layout)
   ============================================================================= */

/* Street View panel in edit mode */
.edit-sv-panel{
  position:relative;overflow:hidden;display:flex;
}
.edit-sv-panel #new-sv-pano{width:100%;height:100%}
.edit-sv-panel .sv-placeholder-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--viewer-bg);color:var(--text-muted);font-size:var(--text-base);
  text-align:center;padding:10px;
}

/* Photo/Upload panel in edit mode */
.edit-photo-panel{display:flex}
.edit-preview{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--viewer-bg);position:relative;overflow:hidden;
  cursor:pointer;flex-direction:column;gap:8px;
}
.edit-preview.has-image{cursor:default}
.edit-preview.drag-over{background:var(--brand-subtle)}
.edit-preview img{
  max-width:100%;max-height:100%;object-fit:contain;display:none;
  transition:transform var(--transition-fast);transform-origin:center center;
  user-select:none;-webkit-user-drag:none;cursor:grab;
}
.edit-preview img:active{cursor:grabbing}
.edit-preview span{color:var(--text-muted);font-size:var(--text-base)}
#file-input{display:none}

/* Map panel in edit mode */
.edit-map-panel #new-map{width:100%;height:100%}

/* Form panel in edit mode */
.edit-meta-panel{overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.edit-form-scroll{
  flex:1;overflow-y:auto;padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
}

/* Form elements (used in edit overlay) */
.form-group{display:flex;flex-direction:column;gap:4px}
.form-label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--text-secondary)}
.form-input,.form-textarea{
  width:100%;padding:7px 10px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  font-size:var(--text-sm);font-family:var(--font-sans);
  outline:none;transition:all var(--transition-fast);
  height:36px;box-sizing:border-box;
}
.form-textarea{min-height:60px;resize:vertical;height:auto}
.form-input:focus,.form-textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* URL upload */
#url-upload-row{display:flex;gap:6px;align-items:center}
#url-upload-row input{
  flex:1;font-size:var(--text-sm);padding:7px 10px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:var(--font-sans);background:var(--surface);color:var(--text);
  height:36px;
}
#url-upload-row input:focus{border-color:var(--brand);outline:none}
#url-upload-row button{
  font-size:var(--text-sm);padding:7px 14px;
  border:1px solid var(--brand);background:var(--brand);color:#fff;
  border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);
  white-space:nowrap;height:36px;transition:all var(--transition-fast);
}
#url-upload-row button:hover{background:var(--brand-hover);border-color:var(--brand-hover)}

/* Legacy form-row (used in settings etc.) */
.form-row{display:flex;flex-direction:column;gap:5px}
.form-row label{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}
.form-row input,.form-row textarea,.form-row select{
  font-size:var(--text-base);padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);
  transition:all var(--transition-fast);font-family:var(--font-sans);height:40px;
}
.form-row textarea{resize:vertical;height:auto;min-height:72px}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);outline:none;
}

/* Pin status */
#pin-status{
  font-size:var(--text-sm);padding:8px 12px;
  background:var(--warning-subtle);border:1px solid var(--warning-border);
  color:var(--warning-text);border-radius:var(--radius-md);
  display:flex;align-items:center;gap:8px;
}
#pin-status::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warning);flex-shrink:0}
#pin-status.ok{background:var(--success-subtle);border-color:var(--success-border);color:var(--brand)}
#pin-status.ok::before{background:var(--brand)}

/* EXIF section in edit form */
#exif-section{
  border:1px solid var(--border);background:var(--surface-alt);
  padding:8px 10px;font-size:var(--text-sm);display:none;border-radius:var(--radius-md);
}
#exif-section .exif-title{font-weight:600;margin-bottom:4px;color:var(--text-secondary);font-size:var(--text-xs)}
#exif-table{width:100%;border-collapse:collapse}
#exif-table td{padding:3px 6px;font-size:var(--text-xs)}
#exif-table td:first-child{color:var(--text-muted);width:100px}

/* Form action buttons */
#btn-save{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important}
#btn-save:hover{background:var(--brand-hover)!important;border-color:var(--brand-hover)!important;box-shadow:0 4px 12px rgba(22,163,74,0.25)}

/* Image viewer controls (shared) */
#img-viewer-controls,#preview-viewer-controls{
  position:absolute;bottom:12px;right:12px;
  display:flex;gap:4px;z-index:10;
}

/* Fullscreen */
.detail-photo-inner:fullscreen .fullscreen-btn{display:none}
.detail-photo-inner:fullscreen,.detail-photo-inner:-webkit-full-screen{background:#000}
.detail-photo-inner:fullscreen #img-viewer-controls,
.detail-photo-inner:-webkit-full-screen #img-viewer-controls{bottom:24px;right:24px}
.fullscreen-close-btn{display:none!important}
.detail-photo-inner:fullscreen .fullscreen-close-btn,
.detail-photo-inner:-webkit-full-screen .fullscreen-close-btn{display:flex!important}

/* Upload preview fullscreen */
.edit-preview:fullscreen,.edit-preview:-webkit-full-screen{background:#000;border:none;border-radius:0;cursor:default}
.edit-preview:fullscreen img,.edit-preview:-webkit-full-screen img{max-height:100%;max-width:100%}
.preview-fullscreen-close-btn{display:none!important}
.edit-preview:fullscreen .preview-fullscreen-close-btn,
.edit-preview:-webkit-full-screen .preview-fullscreen-close-btn{display:flex!important}
.edit-preview:fullscreen .preview-fullscreen-btn,
.edit-preview:-webkit-full-screen .preview-fullscreen-btn{display:none}

/* =============================================================================
   Settings
   ============================================================================= */

#view-settings{padding:24px;flex-direction:column;gap:18px;max-width:720px;overflow-y:auto}

.settings-group{
  border:1px solid var(--border);
  background:var(--surface);
  padding:22px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.settings-group h3{font-size:var(--text-md);margin-bottom:14px;color:var(--text);font-weight:700}
.settings-group label{font-size:var(--text-sm);color:var(--text-secondary);display:block;margin-bottom:6px;font-weight:500}
.settings-group button{
  font-size:var(--text-sm);padding:8px 16px;
  cursor:pointer;border:1px solid var(--border);
  background:var(--surface);color:var(--text);
  border-radius:var(--radius-sm);
  transition:all var(--transition-fast);
  margin-top:8px;font-family:var(--font-sans);
}
.settings-group button:hover{background:var(--surface-hover)}
.settings-group button:active{transform:scale(0.97)}
.settings-topstrip{
  display:flex;align-items:center;gap:10px;
  padding:4px 0 8px;
  font-size:var(--text-base);font-weight:600;color:var(--text);
  flex-shrink:0;
}
.btn-logout{
  font-size:var(--text-sm);padding:6px 12px;
  cursor:pointer;border:1px solid var(--border);
  background:var(--surface);color:var(--text);
  border-radius:var(--radius-sm);
  transition:all var(--transition-fast);
  font-family:var(--font-sans);
}
.btn-logout:hover{color:var(--danger);border-color:var(--danger-border)}
.settings-subsection{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.settings-subsection h4{font-size:var(--text-base);margin-bottom:12px;color:var(--text);font-weight:600}
.settings-hint{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:10px}
.btn-primary-sm{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important;font-weight:500}
.btn-primary-sm:hover{background:var(--brand-hover)!important;border-color:var(--brand-hover)!important}
.btn-danger-sm{color:var(--danger)!important;border-color:var(--danger-border)!important}
.btn-danger-sm:hover{background:var(--danger-subtle)!important;border-color:var(--danger)!important}

/* Tag management */
.tag-manage-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
  transition:background var(--transition-fast);
}
.tag-manage-item:last-child{border-bottom:none}
.tag-manage-item:hover{background:var(--surface-alt);margin:0 -10px;padding:10px}
.tag-manage-item .tag-name{flex:1;font-size:var(--text-base);font-weight:500;color:var(--text)}
.tag-manage-item .tag-count{font-size:var(--text-xs);color:var(--text-muted);min-width:70px}
.tag-manage-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}
.tag-manage-item button{margin-top:0;font-size:var(--text-xs);padding:4px 12px}

/* User management */
.user-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.user-item:last-child{border-bottom:none}
.user-item .user-name{flex:1;font-weight:600;font-size:var(--text-base);color:var(--text)}
.user-item .user-role{
  font-size:var(--text-xs);color:var(--text-secondary);
  background:var(--surface-alt);padding:4px 12px;
  border-radius:var(--radius-full);
  border:1px solid var(--border);
}
.user-item .user-temp-pw{
  font-size:var(--text-xs);color:var(--warning-text);
  background:var(--warning-subtle);
  border:1px solid var(--warning-border);
  padding:4px 12px;border-radius:var(--radius-full);
}
.user-item button{margin-top:0;font-size:var(--text-xs);padding:4px 12px}

/* =============================================================================
   Autocomplete
   ============================================================================= */

.autocomplete-dropdown{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  z-index:var(--z-dropdown);
  max-height:200px;overflow-y:auto;
}
.ac-item{
  padding:9px 14px;cursor:pointer;font-size:var(--text-base);
  transition:background var(--transition-fast);
  color:var(--text);
}
.ac-item:hover,.ac-item.ac-active{background:var(--surface-hover)}
.ac-item small{color:var(--text-muted);margin-left:6px}

/* =============================================================================
   Overlays & Modals
   ============================================================================= */

#change-pw-overlay,#album-name-overlay,#bulk-tag-overlay,#bulk-album-overlay,#album-merge-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
  z-index:var(--z-overlay);
  backdrop-filter:blur(8px);
  animation:overlayFadeIn var(--transition-normal) ease;
}
[data-theme="dark"] #change-pw-overlay,
[data-theme="dark"] #album-name-overlay,
[data-theme="dark"] #bulk-tag-overlay,
[data-theme="dark"] #bulk-album-overlay,
[data-theme="dark"] #album-merge-overlay{
  background:rgba(0,0,0,0.7);
}

@keyframes overlayFadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlideIn{from{opacity:0;transform:scale(0.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Change password */
#change-pw-box{
  background:var(--surface);
  padding:36px;
  border-radius:var(--radius-xl);
  width:400px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
  animation:modalSlideIn var(--transition-slow) ease;
}
#change-pw-box h3{margin-bottom:8px;font-size:18px;color:var(--text);font-weight:700}
#change-pw-box p{font-size:var(--text-base);color:var(--text-secondary);margin-bottom:18px}
#change-pw-box .form-row{margin-bottom:14px}
#change-pw-box button{
  width:100%;margin-top:10px;padding:12px;font-size:var(--text-base);
  background:var(--brand);color:#fff;border:none;border-radius:var(--radius-md);
  cursor:pointer;font-weight:600;font-family:var(--font-sans);transition:all var(--transition-fast);
  height:46px;
}
#change-pw-box button:hover{background:var(--brand-hover)}
#cp-error{color:var(--danger);font-size:var(--text-sm);margin-top:10px}

/* Album breadcrumb */
#album-breadcrumb{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:var(--info-bg);
  border-bottom:1px solid var(--info-border);
  font-size:var(--text-base);
  color:var(--info-text);
  flex-shrink:0;
}
#album-breadcrumb strong{font-weight:600}
#album-breadcrumb button{
  font-size:var(--text-xs);padding:4px 12px;
  border:1px solid var(--info-border);background:var(--surface);
  color:var(--info-text);border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--font-sans);
  transition:all var(--transition-fast);
}
#album-breadcrumb button:hover{background:var(--info-bg);border-color:var(--brand)}

/* =============================================================================
   Albums
   ============================================================================= */

#view-albums{flex-direction:column}
#albums-container{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--bg)}
#albums-header{
  display:flex;align-items:center;
  padding:12px 18px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0;gap:14px;
}
#albums-header .panel-title{
  border-bottom:none;background:transparent;padding:0;
  font-size:var(--text-md);text-transform:none;font-weight:700;color:var(--text);
}
#albums-grid{
  flex:1;overflow-y:auto;padding:18px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;align-content:start;
}

/* Album card — collage layout */
.album-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
  transition:all var(--transition-normal);
}
.album-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}

/* 2×2 image collage */
.album-collage{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  aspect-ratio:1.6;
  cursor:pointer;
  overflow:hidden;
  flex-shrink:0;
}
.album-collage-cell{
  background-size:cover;background-position:center;
  background-color:var(--surface-alt);
  transition:transform var(--transition-normal);
}
.album-collage:hover .album-collage-cell{transform:scale(1.03)}
.album-collage-empty{
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:22px;
}

/* Card info section */
.album-card-info{
  padding:12px 16px 8px;cursor:pointer;flex:1;min-height:0;
}
.album-card-info:hover .album-card-name{color:var(--brand)}
.album-card-name{font-weight:700;font-size:var(--text-md);color:var(--text);margin-bottom:2px;word-break:break-word}
.album-card-count{font-size:var(--text-sm);color:var(--text-muted)}
.album-card-desc{
  font-size:var(--text-sm);color:var(--text-secondary);margin-top:5px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;
}

.album-card-actions{
  display:flex;gap:6px;padding:8px 14px;
  border-top:1px solid var(--border);
  background:var(--surface-alt);
  flex-wrap:wrap;
}
.album-card-actions button{
  font-size:var(--text-xs);padding:5px 11px;
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius-sm);cursor:pointer;
  font-family:var(--font-sans);color:var(--text-secondary);
  transition:all var(--transition-fast);
}
.album-card-actions button:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.album-card-actions .btn-danger{color:var(--danger);border-color:var(--danger-border)}
.album-card-actions .btn-danger:hover{background:var(--danger-subtle);border-color:var(--danger)}
.albums-empty{color:var(--text-muted);padding:60px;text-align:center;font-size:var(--text-base);grid-column:1/-1;line-height:1.8}

/* Album name & merge overlays */
#album-name-box,#album-merge-box{
  background:var(--surface);padding:32px;border-radius:var(--radius-xl);
  width:420px;box-shadow:var(--shadow-lg);border:1px solid var(--border);
  animation:modalSlideIn var(--transition-slow) ease;
}
#album-name-box h3,#album-merge-box h3{margin-bottom:18px;font-size:16px;color:var(--text);font-weight:700}
#album-desc-input{
  width:100%;resize:vertical;
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:8px 12px;font-family:var(--font-sans);font-size:var(--text-base);
  background:var(--surface-alt);color:var(--text);
  transition:border-color var(--transition-fast);box-sizing:border-box;
}
#album-desc-input:focus{outline:none;border-color:var(--brand)}
#album-name-actions,#album-merge-actions{display:flex;gap:8px;margin-top:18px;justify-content:flex-end}
#album-name-actions button,#album-merge-actions button{
  font-size:var(--text-base);padding:10px 20px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius-md);transition:all var(--transition-fast);
  font-family:var(--font-sans);font-weight:500;color:var(--text);
}
#album-name-actions button:hover,#album-merge-actions button:hover{background:var(--surface-hover)}
#album-name-error{color:var(--danger);font-size:var(--text-sm);margin-top:10px;display:none}

/* Nearby pins */
.nearby-pin{opacity:1;filter:grayscale(100%)}
.nearby-pin:hover{opacity:1;filter:grayscale(40%)}

/* =============================================================================
   Toast Notifications
   ============================================================================= */

#toast-container{
  position:fixed;top:64px;right:18px;
  z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:10px;
  padding-top:env(safe-area-inset-top);
}
.toast{
  font-size:var(--text-base);
  padding:12px 18px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  opacity:0;
  transform:translateX(20px);
  transition:all var(--transition-slow);
  max-width:360px;
  box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:10px;
  line-height:1.4;
}
.toast.show{opacity:1;transform:translateX(0)}
.toast.error{
  background:var(--danger-subtle);
  border-color:var(--danger-border);
  color:var(--danger);
}
.toast.success{
  background:var(--success-subtle);
  border-color:var(--success-border);
  color:var(--brand);
}
.toast-icon{flex-shrink:0;width:20px;height:20px}
.toast-progress{
  position:absolute;bottom:0;left:0;
  height:3px;
  background:var(--brand);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  animation:toastProgress 3s linear forwards;
}
.toast.error .toast-progress{background:var(--danger)}

@keyframes toastProgress{from{width:100%}to{width:0}}

/* =============================================================================
   Selection Mode
   ============================================================================= */

#select-mode-btn{
  font-size:var(--text-xs);padding:5px 12px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--font-sans);white-space:nowrap;
  transition:all var(--transition-fast);height:32px;
}
#select-mode-btn:hover{background:var(--surface-hover);border-color:var(--border-strong)}
#select-mode-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

#selection-toolbar{display:flex;align-items:center;gap:8px;padding:8px 0 0;flex-wrap:wrap}
#selection-toolbar button{
  font-size:var(--text-xs);padding:5px 12px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--font-sans);
  transition:all var(--transition-fast);height:32px;
}
#selection-toolbar button:hover{background:var(--surface-hover)}
#selection-count{font-size:var(--text-sm);font-weight:600;color:var(--text);min-width:90px}
#bulk-action-select{
  font-size:var(--text-sm);padding:5px 10px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text-secondary);
  font-family:var(--font-sans);height:32px;
}
#bulk-action-btn{
  font-size:var(--text-xs);padding:5px 14px;
  border:1px solid var(--brand);background:var(--brand);
  color:#fff;border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--font-sans);
  font-weight:600;transition:all var(--transition-fast);height:32px;
}
#bulk-action-btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)}

/* Grid item selection */
.grid-item .select-checkbox{
  position:absolute;top:8px;left:8px;
  width:22px;height:22px;
  border-radius:var(--radius-sm);
  border:2px solid rgba(255,255,255,0.9);
  background:rgba(0,0,0,0.3);
  display:none;
  align-items:center;justify-content:center;
  cursor:pointer;z-index:2;
  transition:all var(--transition-fast);
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.selection-mode .grid-item .select-checkbox{display:flex}
.grid-item.selected .select-checkbox{background:var(--brand);border-color:var(--brand)}
.grid-item.selected .select-checkbox::after{content:'\2713';color:#fff;font-size:12px;font-weight:700;line-height:1}
.grid-item.selected{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-ring);transform:translateY(-1px)}
.selection-mode .grid-item{cursor:default}
.selection-mode .grid-item:hover .select-checkbox{background:rgba(22,163,74,0.4);border-color:#fff}

/* Bulk overlays */
#bulk-tag-box,#bulk-album-box{
  background:var(--surface);padding:32px;border-radius:var(--radius-xl);
  width:380px;box-shadow:var(--shadow-lg);border:1px solid var(--border);
  animation:modalSlideIn var(--transition-slow) ease;
}
#bulk-tag-box h3,#bulk-album-box h3{margin-bottom:18px;font-size:16px;color:var(--text);font-weight:700}
#bulk-tag-actions,#bulk-album-actions{display:flex;gap:8px;margin-top:18px;justify-content:flex-end}
#bulk-tag-actions button,#bulk-album-actions button{
  font-size:var(--text-base);padding:10px 20px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius-md);transition:all var(--transition-fast);
  font-family:var(--font-sans);font-weight:500;color:var(--text);
}
#bulk-tag-actions button:hover,#bulk-album-actions button:hover{background:var(--surface-hover)}

/* =============================================================================
   Responsive
   ============================================================================= */

/* =============================================================================
   Dark mode map tiles
   ============================================================================= */

/* Invert & hue-rotate OSM tiles to get a dark map look */
[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
/* Satellite tiles stay natural – toggled via .map-sat on the map container */
[data-theme="dark"] .map-sat .leaflet-tile-pane {
  filter: none;
}

@media(max-width:900px){
  #lib-map-container{height:25vh}
  .modal{width:100vw;height:100vh;border-radius:0}
  .detail-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
  .detail-sv-panel,.edit-sv-panel{border-right:none;min-height:200px}
  .detail-photo-panel,.edit-photo-panel{min-height:200px}
  .detail-map-panel,.edit-map-panel{border-right:none;min-height:200px}
  .overlay .modal-body{flex-direction:column;overflow-y:auto}
}

@media(max-width:600px){
  #topbar{
    flex-wrap:wrap;gap:6px;padding:8px 12px;
    padding-top:max(8px,env(safe-area-inset-top));
    height:auto;
  }
  #topbar .spacer{display:none}
  #topbar strong{font-size:var(--text-md)}
  .nav-btn{font-size:var(--text-xs);padding:5px 10px}
  #image-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .grid-item .thumb{aspect-ratio:4/3}
  #view-settings{padding:12px}
  #search-row{flex-wrap:wrap}
  #year-filter-row{flex-wrap:wrap}
  #form-scroll{padding:12px}
  #albums-grid{padding:12px;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  #toast-container{right:10px;left:10px}
  .toast{max-width:100%}
}

/* =============================================================================
   Admin Pill
   ============================================================================= */

.admin-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  background: #f59e0b;
  color: #1c1008;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  user-select: none;
  flex-shrink: 0;
}

[data-theme="dark"] .admin-pill {
  background: #d97706;
  color: #fff8eb;
}

/* =============================================================================
   Papierkorb View
   ============================================================================= */

#view-trash {
  padding: 24px 32px;
  overflow-y: auto;
  flex: 1;
}

#trash-container {
  max-width: 860px;
  margin: 0 auto;
}

#trash-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

#trash-hint {
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.trash-loading,
.trash-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 48px 0;
  font-size: 14px;
}

.trash-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  transition: background 0.15s;
}

.trash-item:hover {
  background: var(--surface-hover);
}

.trash-thumb {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--surface-alt);
}

.trash-thumb-placeholder {
  width: 72px;
  height: 54px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.trash-info {
  flex: 1;
  min-width: 0;
}

.trash-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.trash-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.trash-deleted {
  font-size: 11px;
  color: var(--text-muted);
}

.trash-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-restore {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.btn-restore:hover {
  background: var(--brand);
  color: #fff;
}

.btn-permanent-delete {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.btn-permanent-delete:hover {
  background: var(--danger);
  color: #fff;
}

@media (max-width: 600px) {
  #view-trash { padding: 12px; }
  .trash-item { flex-wrap: wrap; }
  .trash-actions { width: 100%; justify-content: flex-end; }
}