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

:root {
  --bg: #0d0d0d;
  --surface: #161616;
  --surface2: #1f1f1f;
  --border: #2a2a2a;
  --accent: #c0392b;
  --accent-hover: #e74c3c;
  --text: #e8e8e8;
  --text-muted: #888;
  --text-dim: #555;
  --green: #27ae60;
  --yellow: #f39c12;
  --blue: #2980b9;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Mono', monospace;
  --radius: 6px;
  --shadow: 0 4px 24px rgba(0,0,0,.6);
}

html { font-size: 15px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ===== CONTENT WARNING ===== */
#content-warning {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex;                       /* centering via margin:auto below so it stays */
  overflow-y: auto;                    /* scrollable when the box is taller than the screen */
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  padding: 20px;
}
.cw-box {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 10px;
  max-width: 560px; width: 100%;
  padding: 36px 40px;
  text-align: center;
  margin: auto;                        /* centers when it fits, scroll-safe when it doesn't */
}
.cw-icon { font-size: 3rem; margin-bottom: 16px; }
.cw-box h1 { font-size: 1.5rem; margin-bottom: 10px; color: var(--accent); letter-spacing: .03em; }
.cw-box p { color: var(--text-muted); margin-bottom: 14px; font-size: .95rem; line-height: 1.7; }
.cw-box p strong { color: var(--text); }
.cw-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 12px 28px; border-radius: var(--radius); cursor: pointer;
  font-size: 1rem; font-weight: 600; transition: background .2s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  padding: 12px 28px; border-radius: var(--radius); cursor: pointer;
  font-size: 1rem; transition: border-color .2s, color .2s;
}
.btn-secondary:hover { border-color: var(--text-muted); color: var(--text); }

/* ===== HEADER ===== */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.site-title {
  font-size: 1.15rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text); white-space: nowrap;
}
.site-title span { color: var(--accent); }
.header-stats {
  font-size: .8rem; color: var(--text-muted);
  background: var(--surface2); padding: 4px 12px; border-radius: 20px;
}

/* ===== FILTERS ===== */
.filters-bar {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
}
.filters-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.search-wrap {
  flex: 1; min-width: 200px; position: relative;
}
.search-wrap input {
  width: 100%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 9px 14px 9px 38px; border-radius: var(--radius);
  font-size: .9rem; transition: border-color .2s;
}
.search-wrap input:focus { outline: none; border-color: var(--accent); }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); font-size: .85rem; pointer-events: none;
}
.filter-select {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: var(--radius); font-size: .9rem; cursor: pointer;
  min-width: 140px;
}
.filter-select:focus { outline: none; border-color: var(--accent); }
.filter-select option { background: var(--surface); }
.date-group { display: flex; gap: 8px; align-items: center; }
.date-group label { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.date-input {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: var(--radius); font-size: .85rem;
  color-scheme: dark;
}
.date-input:focus { outline: none; border-color: var(--accent); }
.btn-reset {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  padding: 9px 16px; border-radius: var(--radius); cursor: pointer; font-size: .85rem;
  transition: all .2s; white-space: nowrap;
}
.btn-reset:hover { border-color: var(--accent); color: var(--accent); }
/* Desktop: the .chips-row / .date-panel wrappers are layout-transparent (display:contents)
   so the filters render exactly as before the 2026-08-11 mobile redesign; they become real
   containers only inside the mobile media block. .btn-reset moved into .chips-row in the
   DOM, so order:1 keeps it visually last on desktop. */
.chips-row, .date-panel { display: contents; }
.btn-reset { order: 1; }
.btn-date-toggle { display: none; }
#filter-archive { min-width: 220px; }

/* ===== ACTIVE-IMPORT NOTICE (classes replace the old inline styles; same desktop look) ===== */
.import-notice {
  max-width: 1100px; margin: 14px auto 0; padding: 11px 18px;
  background: rgba(192,57,43,.1); border: 1px solid #c0392b; border-radius: 8px;
  color: #dcdcdc; font-size: .9rem; line-height: 1.55; text-align: center;
}
.import-notice a { color: #e74c3c; font-weight: 600; }
.import-notice .in-x { display: none; }

/* ===== RESULTS BAR ===== */
.results-bar {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.results-count { font-size: .9rem; color: var(--text-muted); }
.results-count strong { color: var(--text); }
.view-toggle { display: flex; gap: 6px; }
.view-btn {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
  padding: 6px 12px; border-radius: var(--radius); cursor: pointer; font-size: .85rem;
  transition: all .2s;
}
.view-btn.active, .view-btn:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ===== MAIN CONTENT ===== */
.page-body { max-width: 1400px; margin: 0 auto; padding: 0 24px 60px; }

/* ===== GRID ===== */
#gallery.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
#gallery.list-view {
  display: flex; flex-direction: column; gap: 12px;
}

/* ===== CARD ===== */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: border-color .2s, transform .15s, box-shadow .15s;
}
.card:hover { border-color: #444; transform: translateY(-2px); box-shadow: var(--shadow); }

/* Grid card thumbnail */
.grid-view .card-thumb {
  position: relative; width: 100%; aspect-ratio: 16/9;
  overflow: hidden; background: #000;
}
.grid-view .card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.card:hover .card-thumb img { transform: scale(1.04); }

/* List card */
.list-view .card {
  display: flex; gap: 0; align-items: stretch;
}
.list-view .card-thumb {
  width: 200px; flex-shrink: 0; position: relative;
  overflow: hidden; background: #000;
}
.list-view .card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Media type badge */
.media-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 3px; text-transform: uppercase;
}
.media-badge.video { background: rgba(192,57,43,.85); }
.media-badge.photo { background: rgba(41,128,185,.85); }

/* Duration badge */
.duration-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.8); color: #fff;
  font-size: .75rem; font-family: var(--mono);
  padding: 3px 7px; border-radius: 3px;
}

/* Admin quick-delete button */
.card-delete-btn {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.15);
  color: #ccc; font-size: .85rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
  z-index: 10;
}
.card:hover .card-delete-btn { opacity: 1; }
.card-delete-btn:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

/* Play overlay */
.play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
  background: rgba(0,0,0,.3);
}
.card:hover .play-overlay { opacity: 1; }
.play-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(192,57,43,.9);
  display: flex; align-items: center; justify-content: center;
}
.play-icon::after {
  content: ''; border: 0 solid transparent;
  border-left: 14px solid #fff; border-top: 9px solid transparent;
  border-bottom: 9px solid transparent; margin-left: 4px;
}

/* Card info */
.card-info {
  padding: 12px 14px;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.grid-view .card-info { padding: 12px 14px; }

.card-date {
  font-size: .75rem; color: var(--text-muted); font-family: var(--mono);
  display: flex; align-items: center; gap: 6px;
}
.topic-tag {
  font-size: .7rem; padding: 2px 8px; border-radius: 20px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
}
.topic-war-crimes { background: rgba(192,57,43,.2); color: #e74c3c; }
.topic-news { background: rgba(41,128,185,.2); color: #3498db; }
.topic-resistance { background: rgba(39,174,96,.2); color: #2ecc71; }
.topic-iof { background: rgba(243,156,18,.2); color: #f39c12; }
.topic-settler { background: rgba(155,89,182,.2); color: #9b59b6; }
.topic-default { background: rgba(100,100,100,.2); color: #888; }

.card-source {
  font-size: .8rem; color: var(--text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.card-source strong { color: var(--text); }
.card-desc {
  font-size: .82rem; color: var(--text-muted); line-height: 1.5;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.list-view .card-desc { -webkit-line-clamp: 2; }

/* Hover the description text to expand it and read the full caption. */
.card-info { position: relative; }
.card-desc:hover {
  -webkit-line-clamp: unset; display: block; overflow-y: auto; max-height: 300px;
  position: relative; z-index: 6; cursor: text;
  background: var(--surface2); margin: -6px -8px; padding: 6px 8px;
  border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.45);
}

/* Keyboard-focused grid card (arrow-key / File-Explorer-style navigation). */
.card-focused { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ===== PAGINATION ===== */
.pagination {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  padding: 32px 0 16px; flex-wrap: wrap;
}
.page-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  padding: 8px 14px; border-radius: var(--radius); cursor: pointer; font-size: .9rem;
  min-width: 40px; text-align: center; transition: all .2s;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }
.page-ellipsis { color: var(--text-dim); padding: 8px 4px; }

/* ===== LIGHTBOX / MODAL ===== */
#modal-overlay {
  /* z-index must beat the sticky site header (nav.css z-index:900) — otherwise the
     opaque header renders OVER the modal's top: ~1cm crop on desktop, the whole top
     half (incl. the video top + close button) hidden on mobile, with no way to scroll
     it into view because the overlay is position:fixed. */
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
#modal-overlay.open { display: flex; }

.modal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; max-width: 1100px; width: 100%;
  max-height: 92vh; max-height: 92dvh; overflow: hidden;   /* dvh accounts for mobile URL bar */
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.8);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: .95rem; color: var(--text-muted); font-weight: 500; }
.modal-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 4px 8px; border-radius: 4px;
  transition: color .2s, background .2s;
}
.modal-close:hover { color: var(--text); background: var(--surface2); }

.modal-body {
  display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden;  /* min-height:0 lets children shrink so scroll works */
  flex-direction: row;
}

.modal-media {
  flex: 1; min-width: 0; min-height: 0;
  background: #000; display: flex; align-items: center; justify-content: center;
}
/* Desktop: media is bounded by the body height (not a fixed 70vh), so header + media +
   nav always fit inside the box and nothing clips off the top. */
.modal-media video, .modal-media img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}

/* Mobile: stack vertically, make the whole body scroll, and CAP the media height so the
   whole (portrait) video fits and the description below is reachable. This block MUST come
   AFTER the base .modal-media rules: equal specificity → source order wins, so placing it
   before let the base `max-height:100%` override the cap → the video overflowed and its top
   half sat above the scroll area, unreachable. */
@media (max-width: 700px) {
  #modal-overlay { padding: 10px; }
  .modal-body { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-media { flex: 0 0 auto; max-height: 60vh; align-items: flex-start; }
  .modal-media video, .modal-media img { max-height: 60vh; }
}

.modal-meta {
  width: 320px; flex-shrink: 0;
  padding: 20px; overflow-y: auto;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 700px) {
  .modal-meta { width: 100%; border-left: none; border-top: 1px solid var(--border); }
}

.meta-section h3 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); margin-bottom: 6px; font-weight: 600;
}
.meta-value {
  font-size: .88rem; color: var(--text); line-height: 1.6;
  word-break: break-word;
}
.meta-value.mono { font-family: var(--mono); font-size: .82rem; }

.modal-nav {
  display: flex; gap: 8px; padding: 12px 20px;
  border-top: 1px solid var(--border); background: var(--surface2);
}
.nav-btn {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); padding: 10px; border-radius: var(--radius);
  cursor: pointer; font-size: .9rem; transition: all .2s; text-align: center;
}
.nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.btn-download { flex: 0 0 auto; background: #1a2e1a; border-color: #2d5a2d; color: var(--green); }
.btn-download:hover { background: #1f381f; border-color: var(--green); color: var(--green); }
.btn-delete { flex: 0 0 auto; background: #2e1a1a; border-color: #5a2d2d; color: var(--accent); }
.btn-delete:hover { background: #3d1f1f; border-color: var(--accent); color: var(--accent-hover); }
.btn-share { flex: 0 0 auto; white-space: nowrap; }
/* Public flag button + dropdown (report a clip to moderators) */
.modal-flag-wrap { position: relative; flex: 0 0 auto; display: flex; }
.btn-flag { flex: 0 0 auto; background: #2e1a1a; border-color: #5a2d2d; color: var(--accent); white-space: nowrap; }
.btn-flag:hover { background: #3d1f1f; border-color: var(--accent); color: var(--accent-hover); }
.btn-flag:disabled { opacity: .55; cursor: default; }
.flag-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20;
  min-width: 260px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.45);
  padding: 6px; display: none;
}
.flag-menu.open { display: block; }
.flag-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text-muted); padding: 10px 12px; border-radius: 6px; cursor: pointer;
  font-family: var(--font); font-size: .85rem; line-height: 1.4;
}
.flag-menu-item:hover { background: var(--surface2); color: var(--accent); }
.btn-submit-footage { background: var(--accent); color: #fff; padding: 7px 16px; border-radius: var(--radius); font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .2s; white-space: nowrap; margin-left: auto; }
.btn-submit-footage:hover { background: var(--accent-hover); color: #fff; }
.btn-admin { background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); padding: 6px 14px; border-radius: var(--radius); cursor: pointer; font-family: var(--font); font-size: .82rem; transition: all .2s; text-decoration: none; }
.btn-admin:hover { border-color: var(--accent); color: var(--accent); }
.btn-admin.active { border-color: var(--accent); color: var(--accent); background: rgba(192,57,43,.1); }
.btn-admin-tool { color: var(--text-muted); font-size: .78rem; padding: 5px 10px; }
.admin-badge { display: inline-block; background: var(--surface); color: var(--accent); font-size: .68rem; padding: 1px 6px; border-radius: 10px; margin-left: 4px; font-weight: 600; }

/* Source links */
.source-links { display: flex; flex-direction: column; gap: 6px; }
.source-link {
  font-size: .8rem; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.source-link:hover { color: var(--accent-hover); }

/* ===== CONFIDENCE BADGES ===== */
.conf-badge {
  font-size: .68rem; padding: 2px 7px; border-radius: 3px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.conf-medium { background: rgba(243,156,18,.2); color: #f39c12; }
.conf-low    { background: rgba(100,100,100,.2); color: #888; }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center; padding: 80px 20px; color: var(--text-muted);
}
.empty-state .es-icon { font-size: 3rem; margin-bottom: 16px; }
.empty-state h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 8px; }

/* ===== LOADING ===== */
.loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 20px; gap: 16px; color: var(--text-muted);
}
.spinner {
  width: 36px; height: 36px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  /* Content warning: compact so the buttons are reachable on small/iOS screens */
  .cw-box { padding: 26px 20px; }
  .cw-icon { font-size: 2.4rem; margin-bottom: 10px; }
  .cw-box h1 { font-size: 1.3rem; }
  .cw-box p { font-size: .9rem; line-height: 1.6; }
  .cw-buttons { margin-top: 20px; }
  /* Header */
  .header-inner {
    padding: 10px 16px;
    gap: 8px;
  }
  .site-title {
    font-size: .98rem;
    flex: 0 0 100%;
  }
  .header-stats {
    font-size: .72rem;
    padding: 4px 10px;
    flex: 0 0 100%;
    text-align: center;
  }
  /* Header action buttons: clean 2-then-1 grid, equal width, full tap targets */
  .btn-submit-footage {
    padding: 10px 12px;
    font-size: .8rem;
    margin: 0 !important;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
  }
  .btn-admin, .btn-admin-tool {
    padding: 5px 10px;
    font-size: .75rem;
  }
  #admin-controls { margin-left: 0 !important; }

  /* Import notice: slim dismissible bar (2026-08-11 mobile redesign) */
  .import-notice {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 8px 10px 0; padding: 8px 11px;
    font-size: .74rem; line-height: 1.45; text-align: left;
  }
  .import-notice .in-body { flex: 1; min-width: 0; }
  .import-notice .in-x {
    display: block; flex: 0 0 auto; background: none; border: 0;
    color: #9a9a9a; font-size: .95rem; line-height: 1; padding: 2px 4px; cursor: pointer;
    font-family: inherit;
  }

  /* Filters: search on top, then a horizontally-scrollable chip row; the date range
     collapses behind the 📅 chip. Sticky under the 63px header (nav.css reserves
     exactly 63px at every breakpoint) so search + chips follow the scroll. */
  .filters-bar { padding: 8px 10px 0; position: sticky; top: 63px; z-index: 800; }
  .filters-inner { display: block; }
  .search-wrap { min-width: unset; width: 100%; }
  .search-wrap input { border-radius: 22px; padding: 10px 13px 10px 36px; }
  .chips-row {
    display: flex; gap: 7px; overflow-x: auto; padding: 9px 1px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .chips-row::-webkit-scrollbar { display: none; }
  .chips-row .filter-select {
    width: auto; min-width: unset; flex: 0 0 auto;
    appearance: none; -webkit-appearance: none;
    border-radius: 18px; padding: 7px 26px 7px 13px; font-size: .78rem;
    background-color: var(--surface2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
  }
  .btn-date-toggle {
    display: block; flex: 0 0 auto;
    background: var(--surface2); border: 1px solid var(--border); color: #d6d6d6;
    border-radius: 18px; padding: 7px 13px; font-size: .78rem; font-family: inherit; cursor: pointer;
  }
  .btn-date-toggle.on { border-color: var(--accent); color: #fff; background: rgba(192,57,43,.14); }
  .btn-reset { order: 0; width: auto; flex: 0 0 auto; border-radius: 18px; padding: 7px 13px; font-size: .78rem; }
  .date-panel { display: none; }
  .date-panel.open { display: flex; gap: 8px; padding: 0 1px 10px; }
  .date-panel .date-group { width: auto; flex: 1; }
  .date-input { flex: 1; min-width: 0; }

  /* Results bar: mono count + segmented Grid/List */
  .results-bar { padding: 8px 10px; }
  .results-count { font-family: var(--mono); font-size: .72rem; }
  .view-toggle { gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .view-btn { border: 0; border-radius: 0; font-size: .74rem; padding: 6px 12px; }

  /* Page padding */
  .page-body { padding: 0 12px 40px; }

  /* Gallery */
  #gallery.grid-view {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
  .list-view .card-thumb { width: 120px; }
  .modal-meta { width: 100%; border-left: none; border-top: 1px solid var(--border); }
}