/* ─────────────────────────────────────────────
   gallery.css
   Galería principal de Doc Liz
─────────────────────────────────────────────── */


/* =========================================================
   VISTA
========================================================= */

#view-gallery {
  min-height: 100vh;
  overflow: hidden;
}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell {
  display: flex;

  height: 100vh;

  padding: 18px;

  gap: var(--content-gap);

  background: var(--paper);
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {

  width: var(--sidebar-w);

  flex-shrink: 0;

  background: var(--ink-950);

  border-radius: 42px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 20px 12px;

  gap: 8px;

  box-shadow:
    0 12px 32px rgba(23, 23, 23, .08);
}

.sidebar-brand {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-height: 32px;

  margin-bottom: 4px;
}

.sidebar-brand img {

  width: auto;

  height: 30px;

  display: block;
}

.sidebar-nav {

  display: flex;

  flex-direction: column;

  gap: 8px;

  align-items: center;
  justify-content: center;

  flex: 1;
}

.sidebar-link {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: var(--r-pill);

  color:
    rgba(255, 255, 255, .48);

  cursor: pointer;

  border: 1px solid transparent;

  background: transparent;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease,
    border-color .15s ease;
}

.sidebar-link i {

  font-size: 19px;

  flex-shrink: 0;
}

.sidebar-link span {
  display: none;
}

.sidebar-link:hover {

  background:
    rgba(255, 255, 255, .08);

  color:
    rgba(255, 255, 255, .9);

  transform:
    translateY(-1px);
}

.sidebar-link.active {

  background:
    var(--paper);

  color:
    var(--ink-950);
}

.sidebar-link:focus-visible {

  outline:
    none;

  box-shadow:
    0 0 0 3px
    rgba(255,255,255,.14);
}

.sidebar-settings {
  margin-top: auto;
}


/* =========================================================
   GALLERY COLUMN
========================================================= */

.gallery-col {

  flex: 1;

  min-width: 0;

  height: 100%;

  display: flex;

  flex-direction: column;

  gap: 16px;
}


/* =========================================================
   SEARCH HEADER
========================================================= */

.search-row {

  display: flex;

  align-items: center;

  min-height: 52px;

  flex-shrink: 0;
}

.search-cont {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 16px;
}

.search-box {

  width:
    min(560px, 100%);

  height: 48px;

  display: flex;

  align-items: center;

  gap: 11px;

  background:
    var(--surface);

  border:
    1px solid var(--line);

  border-radius:
    var(--r-pill);

  padding:
    0 18px;

  box-shadow:
    var(--shadow-sm);

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.search-box:hover {

  border-color:
    var(--line-strong);
}

.search-box:focus-within {

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px var(--accent-soft),
    var(--shadow-sm);

  transform:
    translateY(-1px);
}

.search-box i {

  color:
    var(--ink-400);

  font-size:
    19px;

  flex-shrink:
    0;
}

.search-box input {

  border:
    none;

  outline:
    none;

  background:
    transparent;

  width:
    100%;

  height:
    100%;

  border-radius:
    var(--r-pill);

  color:
    var(--ink-950);

  font-family:
    var(--font-body);

  font-size:
    13.5px;
}

.search-box input::placeholder {

  color:
    var(--ink-400);
}

.search-box input::-webkit-search-cancel-button {

  cursor:
    pointer;
}

.credits {

  margin-left:
    auto;

  padding-right:
    3px;

  font-size:
    11px;

  color:
    var(--ink-400);

  white-space:
    nowrap;
}

.credits a {

  text-decoration:
    none;

  color:
    inherit;

  transition:
    color .15s ease;
}

.credits a:hover {

  color:
    var(--ink-700);
}


/* =========================================================
   MAIN PANEL
========================================================= */

.gallery-panel {

  flex:
    1;

  min-height:
    0;

  background:
    var(--container);

  border:
    1px solid
    rgba(255,255,255,.75);

  border-radius:
    var(--r-xl);

  overflow:
    hidden;

  box-shadow:
    0 8px 34px
    rgba(23,23,23,.025);
}

.gallery-panel-scroll {

  height:
    100%;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    30px;

  scrollbar-width:
    thin;
}


/* =========================================================
   GALLERY HEADER
========================================================= */

.gallery-header {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  margin-bottom:
    22px;
}

.gallery-header-copy {

  min-width:
    0;
}

.gallery-eyebrow {

  font-size:
    10.5px;

  font-weight:
    600;

  letter-spacing:
    .08em;

  color:
    var(--ink-400);

  margin-bottom:
    6px;
}

.gallery-title {

  font-size:
    32px;

  font-weight:
    700;

  line-height:
    1.05;

  letter-spacing:
    -.025em;

  margin-bottom:
    8px;
}

.gallery-subtitle {

  max-width:
    610px;

  font-size:
    13px;

  line-height:
    1.55;

  color:
    var(--ink-500);
}


/* =========================================================
   CATEGORIES
========================================================= */

.chip-row-wrap {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    22px;
}

.chip-row-new-btn {

  display:
    none;

  flex-shrink:
    0;

  width:
    38px;

  height:
    38px;

  border-radius:
    var(--r-pill);

  border:
    none;

  background:
    var(--accent);

  color:
    #fff;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    18px;

  cursor:
    pointer;

  box-shadow:
    0 7px 16px
    rgba(255,81,0,.18);

  transition:
    background .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.chip-row-new-btn:hover {

  background:
    var(--accent-hover);

  transform:
    translateY(-1px);

  box-shadow:
    0 9px 20px
    rgba(255,81,0,.22);
}

.chip-row-new-btn:focus-visible {

  outline:
    none;

  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 7px 16px rgba(255,81,0,.18);
}

.chip-row {

  display:
    flex;

  gap:
    8px;

  flex-wrap:
    wrap;

  flex:
    1;

  min-width:
    0;
}

.chip {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    36px;

  padding:
    8px 15px;

  border-radius:
    var(--r-pill);

  border:
    1px solid var(--line);

  background:
    var(--surface);

  font-size:
    12px;

  font-weight:
    500;

  color:
    var(--ink-700);

  cursor:
    pointer;

  font-family:
    var(--font-body);

  flex-shrink:
    0;

  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

.chip:hover {

  border-color:
    var(--line-strong);

  transform:
    translateY(-1px);
}

.chip:focus-visible {

  outline:
    none;

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px var(--accent-soft);
}

.chip.active {

  background:
    var(--ink-950);

  border-color:
    var(--ink-950);

  color:
    #fff;
}


/* =========================================================
   TEMPLATE GRID
========================================================= */

.tpl-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(270px, 1fr)
    );

  gap:
    18px;

  align-items:
    stretch;
}


/* =========================================================
   TEMPLATE CARD
========================================================= */

.tpl-card {

  background:
    var(--surface);

  border:
    1px solid var(--line);

  border-radius:
    var(--r-md);

  padding:
    0;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  height:
    100%;

  min-width:
    0;

  cursor:
    pointer;

  box-shadow:
    0 2px 8px
    rgba(23,23,23,.018);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.tpl-card:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 14px 30px
    rgba(23,23,23,.075);

  border-color:
    var(--line-strong);
}

.tpl-card:focus-within {

  border-color:
    var(--line-strong);

  box-shadow:
    0 0 0 3px
    rgba(255,81,0,.08),
    var(--shadow-md);
}


/* =========================================================
   TEMPLATE THUMB
========================================================= */

.tpl-thumb {

  height:
    148px;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  padding:
    18px;
}

.tpl-thumb.thumb-blue {

  background:
    var(--illus-blue);
}

.tpl-thumb.thumb-sand {

  background:
    var(--illus-sand);
}

.tpl-thumb-page {

  background:
    var(--surface);

  border-radius:
    4px;

  box-shadow:
    0 8px 18px
    rgba(23,23,23,.11);

  transition:
    transform .2s ease;
}

.tpl-card:hover .tpl-thumb-page {

  transform:
    translateY(-2px);
}

.tpl-thumb-badge {

  position:
    absolute;

  top:
    10px;

  left:
    10px;

  background:
    rgba(255,255,255,.94);

  color:
    var(--ink-800);

  font-size:
    10px;

  font-weight:
    600;

  padding:
    5px 9px;

  border-radius:
    var(--r-pill);

  border:
    1px solid
    rgba(255,255,255,.75);
}

.tpl-fav {

  position:
    absolute;

  top:
    9px;

  right:
    9px;

  width:
    30px;

  height:
    30px;

  border-radius:
    50%;

  border:
    1px solid
    rgba(23,23,23,.05);

  background:
    rgba(255,255,255,.92);

  color:
    var(--ink-400);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  cursor:
    pointer;

  font-size:
    15px;

  transition:
    color .15s ease,
    background .15s ease,
    transform .15s ease;
}

.tpl-fav:hover {

  background:
    #fff;

  transform:
    scale(1.04);
}

.tpl-fav:focus-visible {

  outline:
    none;

  box-shadow:
    0 0 0 3px var(--accent-soft);
}

.tpl-fav.active {

  color:
    var(--seal);
}


/* =========================================================
   TEMPLATE BODY
========================================================= */

.tpl-body {

  padding:
    16px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  flex:
    1;
}

.tpl-meta {

  display:
    flex;

  align-items:
    center;

  min-height:
    18px;

  gap:
    8px;
}

.tpl-name {

  font-family:
    var(--font-display);

  font-weight:
    650;

  font-size:
    15.5px;

  line-height:
    1.25;

  color:
    var(--ink-950);
}

.tpl-desc {

  font-size:
    12px;

  color:
    var(--ink-500);

  line-height:
    1.5;

  display:
    -webkit-box;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;

  overflow:
    hidden;

  min-height:
    36px;
}


/* =========================================================
   TEMPLATE ACTIONS
========================================================= */

.tpl-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    auto;

  padding-top:
    12px;
}

.tpl-fill-pill {

  flex:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  background:
    var(--ink-950);

  color:
    #fff;

  border-radius:
    var(--r-pill);

  font-size:
    12.5px;

  font-weight:
    500;

  padding:
    0 14px;

  height:
    40px;

  text-decoration:
    none;

  min-width:
    0;

  transition:
    background .15s ease,
    transform .15s ease;
}

.tpl-fill-pill i {

  font-size:
    14px;

  flex-shrink:
    0;
}

.tpl-fill-pill span {

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.tpl-fill-pill:hover {

  background:
    var(--ink-800);

  transform:
    translateY(-1px);
}

.tpl-fill-pill:focus-visible {

  outline:
    none;

  box-shadow:
    0 0 0 3px var(--accent-soft);
}

.tpl-edit-btn {

  flex-shrink:
    0;
}


/* =========================================================
   NEW TEMPLATE
========================================================= */

.tpl-new-card {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-style:
    dashed;

  border-color:
    var(--line-strong);

  min-height:
    236px;

  background:
    transparent;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.tpl-new-card:hover {

  border-color:
    var(--accent);

  background:
    var(--accent-soft);

  transform:
    translateY(-2px);
}

.tpl-new-inner {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--ink-500);

  font-size:
    12.5px;

  font-weight:
    500;

  text-align:
    center;
}

.tpl-new-inner i {

  font-size:
    28px;

  color:
    var(--accent);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {

  padding:
    70px 20px;

  text-align:
    center;

  color:
    var(--ink-400);
}

.empty-state i {

  font-size:
    36px;

  margin-bottom:
    10px;

  display:
    block;
}


/* =========================================================
   COMING SOON
========================================================= */

.tpl-card.soon {

  cursor:
    default;

  opacity:
    .55;
}

.tpl-card.soon:hover {

  transform:
    none;

  box-shadow:
    0 2px 8px
    rgba(23,23,23,.018);

  border-color:
    var(--line);
}


/* =========================================================
   SETTINGS MODAL
========================================================= */

.settings-modal {

  width:
    min(
      460px,
      calc(100vw - 32px)
    );

  max-width:
    460px;

  padding:
    26px;

  border-radius:
    28px;

  text-align:
    left;

  overflow:
    hidden;
}


/* =========================================================
   SETTINGS HEADER
========================================================= */

.settings-header {

  position:
    relative;

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    36px;

  align-items:
    start;

  gap:
    14px;

  margin-bottom:
    18px;

  padding:
    0;
}

.settings-heading {

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;
}

.settings-icon {

  width:
    32px;

  height:
    32px;

  min-width:
    32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    10px;

  background:
    var(--paper);

  color:
    var(--ink-700);

  font-size:
    17px;

  margin-top:
    1px;
}

.settings-eyebrow {

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.2;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;

  color:
    var(--ink-400);

  margin-bottom:
    3px;
}

.settings-header h3 {

  margin:
    0;

  font-size:
    17px;

  line-height:
    1.2;

  font-weight:
    650;

  color:
    var(--ink-950);
}


/* =========================================================
   SETTINGS CLOSE BUTTON
========================================================= */

.settings-header .btn-icon {

  width:
    36px;

  height:
    36px;

  min-width:
    36px;

  margin:
    0;

  flex-shrink:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    transparent;

  border:
    1px solid var(--line);

  color:
    var(--ink-600);

  font-size:
    16px;

  cursor:
    pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.settings-header .btn-icon:hover {

  background:
    var(--paper);

  border-color:
    var(--line-strong);

  color:
    var(--ink-950);

  transform:
    rotate(3deg);
}

.settings-header .btn-icon:focus-visible {

  outline:
    none;

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px var(--accent-soft);
}


/* =========================================================
   SETTINGS SECTIONS
========================================================= */

.settings-section {

  padding:
    17px 0;

  border-top:
    1px solid var(--line);

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;
}

.settings-section:first-of-type {

  border-top:
    none;

  padding-top:
    0;
}

.settings-section .prop-label {

  font-size:
    9.5px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .07em;

  color:
    var(--ink-500);

  margin-bottom:
    1px;
}


/* =========================================================
   SETTINGS RADIO
========================================================= */

.settings-radio {

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-height:
    38px;

  padding:
    7px 9px;

  border:
    1px solid transparent;

  border-radius:
    var(--r-sm);

  font-size:
    13px;

  color:
    var(--ink-800);

  cursor:
    pointer;

  transition:
    background .12s ease,
    border-color .12s ease;
}

.settings-radio:hover {

  background:
    var(--paper);

  border-color:
    var(--line-soft);
}

.settings-radio.disabled {

  color:
    var(--ink-400);

  cursor:
    default;

  background:
    transparent;

  border-color:
    transparent;
}

.settings-radio input {

  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    16px;

  height:
    16px;

  margin:
    0;

  border:
    1.5px solid var(--line-strong);

  border-radius:
    50%;

  background:
    var(--surface);

  position:
    relative;

  cursor:
    pointer;
}

.settings-radio input:checked {

  border-color:
    var(--accent);
}

.settings-radio input:checked::after {

  content:
    '';

  position:
    absolute;

  inset:
    3px;

  border-radius:
    50%;

  background:
    var(--accent);
}

.settings-radio.disabled input {

  cursor:
    default;

  background:
    var(--paper);
}


/* =========================================================
   SETTINGS HINT
========================================================= */

.settings-section .field-hint {

  margin:
    0;

  max-width:
    380px;

  font-size:
    11.5px;

  line-height:
    1.55;

  color:
    var(--ink-400);
}


/* =========================================================
   IMPORT TEMPLATE
========================================================= */

#jsonUploadBtn {

  min-height:
    40px;

  margin-top:
    3px;

  border-radius:
    var(--r-pill);

  justify-content:
    center;

  font-size:
    12.5px;

  background:
    transparent;
}

#jsonUploadBtn:hover {

  background:
    var(--paper);

  border-color:
    var(--line-strong);
}


/* =========================================================
   PRIVACY LINK
========================================================= */

.settings-footer-section {

  padding-top:
    13px;

  padding-bottom:
    0;
}

.settings-footer-section
.settings-link {

  width:
    100%;

  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    9px 11px;

  border:
    1px solid transparent;

  border-radius:
    var(--r-sm);

  background:
    transparent;

  color:
    var(--ink-600);

  text-decoration:
    none;

  font-size:
    12.5px;

  font-weight:
    500;

  transition:
    color .12s ease,
    background .12s ease,
    border-color .12s ease;
}

.settings-footer-section
.settings-link i {

  font-size:
    16px;

  color:
    var(--ink-400);

  flex-shrink:
    0;
}

.settings-footer-section
.settings-link:hover {

  color:
    var(--accent-hover);

  background:
    var(--accent-soft);

  border-color:
    rgba(255,81,0,.08);
}

.settings-footer-section
.settings-link:hover i {

  color:
    var(--accent);
}


/* =========================================================
   SETTINGS TAG
========================================================= */

.settings-radio .tag-soft {

  margin-left:
    auto;

  flex-shrink:
    0;

  padding:
    4px 8px;

  font-size:
    9.5px;
}


/* =========================================================
   TABLET COMPACT
========================================================= */

@media (min-width: 901px)
and (max-width: 1180px) {

  .app-shell {

    padding:
      16px;

    gap:
      16px;
  }

  .sidebar {

    width:
      64px;

    padding-inline:
      10px;
  }

  .gallery-panel-scroll {

    padding:
      24px;
  }

  .tpl-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:
      16px;
  }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 900px) {

  #view-gallery {

    height:
      auto;

    min-height:
      100vh;

    overflow:
      visible;
  }

  .app-shell {

    flex-direction:
      column;

    height:
      auto;

    padding:
      14px;

    gap:
      0;
  }


  /* Sidebar becomes bottom navigation */

  .sidebar {

    position:
      fixed;

    left:
      14px;

    right:
      14px;

    bottom:
      14px;

    top:
      auto;

    z-index:
      200;

    width:
      auto;

    height:
      62px;

    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;

    border-radius:
      var(--r-pill);

    padding:
      0 9px;

    gap:
      6px;

    box-shadow:
      0 14px 34px
      rgba(23,23,23,.16);
  }

  .sidebar-brand {

    width:
      38px;

    min-height:
      38px;

    flex-shrink:
      0;

    margin:
      0;
  }

  .sidebar-brand img {

    height:
      24px;
  }

  .sidebar-nav {

    flex-direction:
      row;

    gap:
      2px;

    flex:
      1;

    justify-content:
      center;
  }

  .sidebar-link {

    width:
      42px;

    height:
      42px;
  }

  .sidebar-settings {

    margin-top:
      0;

    flex-shrink:
      0;
  }


  /* Header */

  .gallery-col {

    gap:
      12px;

    height:
      auto;
  }

  .search-row {

    min-height:
      auto;

    padding:
      2px;
  }

  .search-cont {

    display:
      block;
  }

  .search-box {

    width:
      100%;

    max-width:
      none;

    height:
      50px;
  }

  .credits {

    display:
      none;
  }


  /* Main */

  .gallery-panel {

    border-radius:
      var(--r-lg);

    overflow:
      visible;
  }

  .gallery-panel-scroll {

    height:
      auto;

    overflow:
      visible;

    padding:
      22px 18px 104px;
  }


  /* Header */

  .gallery-header {

    margin-bottom:
      18px;
  }

  .gallery-eyebrow {

    font-size:
      9.5px;
  }

  .gallery-title {

    font-size:
      27px;

    margin-bottom:
      6px;
  }

  .gallery-subtitle {

    font-size:
      12.5px;
  }


  /* Chips */

  .chip-row-wrap {

    margin-bottom:
      18px;
  }

  .chip-row-new-btn {

    display:
      inline-flex;

    width:
      38px;

    height:
      38px;
  }

  .chip-row {

    flex-wrap:
      nowrap;

    overflow-x:
      auto;

    scrollbar-width:
      none;

    padding-bottom:
      1px;
  }

  .chip-row::-webkit-scrollbar {

    display:
      none;
  }


  /* Grid */

  .tpl-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:
      14px;
  }

  .tpl-new-card {

    display:
      none;
  }

  .tpl-thumb {

    height:
      128px;

    padding:
      14px;
  }

  .tpl-body {

    padding:
      14px;
  }


  /* Settings modal */

  .settings-modal {

    width:
      min(
        460px,
        calc(100vw - 28px)
      );

    max-width:
      none;

    padding:
      22px;

    border-radius:
      24px;
  }

  .settings-header {

    grid-template-columns:
      minmax(0,1fr)
      34px;

    gap:
      10px;
  }

  .settings-icon {

    width:
      30px;

    height:
      30px;

    min-width:
      30px;

    font-size:
      16px;
  }

  .settings-header h3 {

    font-size:
      16px;
  }

  .settings-radio {

    min-height:
      40px;

    padding-inline:
      8px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .app-shell {

    padding:
      10px;
  }

  .gallery-panel-scroll {

    padding-inline:
      14px;
  }

  .gallery-title {

    font-size:
      25px;
  }

  .gallery-subtitle {

    max-width:
      100%;

    font-size:
      12px;
  }

  .tpl-grid {

    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  .tpl-card {

    border-radius:
      var(--r-md);
  }

  .tpl-thumb {

    height:
      150px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .sidebar {

    left:
      10px;

    right:
      10px;

    bottom:
      10px;
  }

  .sidebar-nav {

    gap:
      0;
  }

  .sidebar-link {

    width:
      40px;

    height:
      40px;
  }

  .gallery-panel-scroll {

    padding-bottom:
      100px;
  }

  .chip {

    min-height:
      34px;

    padding-inline:
      13px;

    font-size:
      11.5px;
  }

  .tpl-fill-pill {

    height:
      38px;

    font-size:
      12px;
  }

  .settings-modal {

    padding:
      19px;

    border-radius:
      22px;
  }

  .settings-heading {

    gap:
      8px;
  }

  .settings-radio .tag-soft {

    font-size:
      8.5px;

    padding:
      3px 7px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

  .settings-modal {

    width:
      calc(100vw - 20px);

    padding:
      18px;
  }

  .settings-header {

    grid-template-columns:
      minmax(0,1fr)
      34px;
  }

  .settings-footer-section
  .settings-link {

    min-height:
      42px;

    padding:
      9px 10px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sidebar-link,
  .search-box,
  .chip,
  .chip-row-new-btn,
  .tpl-card,
  .tpl-thumb-page,
  .tpl-fav,
  .tpl-fill-pill,
  .tpl-new-card,
  .settings-header .btn-icon,
  .settings-radio,
  .settings-footer-section .settings-link {

    transition:
      none;
  }

}


/* =========================================================
   SAFE AREA
========================================================= */

@supports (padding: env(safe-area-inset-bottom)) {

  @media (max-width: 900px) {

    .sidebar {

      bottom:
        max(
          10px,
          env(safe-area-inset-bottom)
        );
    }

  }

}