/* =============================================================================
   Tema Arquivex para Coppermine 1.6.x
   -----------------------------------------------------------------------------
   Porte fiel do visual de arquivex-gallery para a marcação do Coppermine.
   Sem dependências externas: nenhuma fonte remota, nenhum framework.

   Este arquivo é GERADO por build-style.py. Para alterar o design system,
   mexa em app/globals.css do projeto original e rode o script de novo; para
   alterar a ligação com o Coppermine, mexa em bridge.css.

   Ordem (a cascata importa: várias seções são revisões que sobrescrevem as
   anteriores de propósito):
     1. Reset — preflight do Tailwind v4 resolvido
     2. Variáveis do tema
     3. Design system do arquivex
     4. Ponte Coppermine -> arquivex
   ============================================================================= */

/* == 1. RESET ============================================================ */
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    *,:before,:after {
      --tw-rotate-x:initial;
      --tw-rotate-y:initial;
      --tw-rotate-z:initial;
      --tw-skew-x:initial;
      --tw-skew-y:initial;
      --tw-shadow:0 0 #0000;
      --tw-shadow-color:initial;
      --tw-shadow-alpha:100%;
      --tw-inset-shadow:0 0 #0000;
      --tw-inset-shadow-color:initial;
      --tw-inset-shadow-alpha:100%;
      --tw-ring-color:initial;
      --tw-ring-shadow:0 0 #0000;
      --tw-inset-ring-color:initial;
      --tw-inset-ring-shadow:0 0 #0000;
      --tw-ring-inset:initial;
      --tw-ring-offset-width:0px;
      --tw-ring-offset-color:#fff;
      --tw-ring-offset-shadow:0 0 #0000;
      --tw-blur:initial;
      --tw-brightness:initial;
      --tw-contrast:initial;
      --tw-grayscale:initial;
      --tw-hue-rotate:initial;
      --tw-invert:initial;
      --tw-opacity:initial;
      --tw-saturate:initial;
      --tw-sepia:initial;
      --tw-drop-shadow:initial;
      --tw-drop-shadow-color:initial;
      --tw-drop-shadow-alpha:100%;
      --tw-drop-shadow-size:initial
    }
    ::backdrop {
      --tw-rotate-x:initial;
      --tw-rotate-y:initial;
      --tw-rotate-z:initial;
      --tw-skew-x:initial;
      --tw-skew-y:initial;
      --tw-shadow:0 0 #0000;
      --tw-shadow-color:initial;
      --tw-shadow-alpha:100%;
      --tw-inset-shadow:0 0 #0000;
      --tw-inset-shadow-color:initial;
      --tw-inset-shadow-alpha:100%;
      --tw-ring-color:initial;
      --tw-ring-shadow:0 0 #0000;
      --tw-inset-ring-color:initial;
      --tw-inset-ring-shadow:0 0 #0000;
      --tw-ring-inset:initial;
      --tw-ring-offset-width:0px;
      --tw-ring-offset-color:#fff;
      --tw-ring-offset-shadow:0 0 #0000;
      --tw-blur:initial;
      --tw-brightness:initial;
      --tw-contrast:initial;
      --tw-grayscale:initial;
      --tw-hue-rotate:initial;
      --tw-invert:initial;
      --tw-opacity:initial;
      --tw-saturate:initial;
      --tw-sepia:initial;
      --tw-drop-shadow:initial;
      --tw-drop-shadow-color:initial;
      --tw-drop-shadow-alpha:100%;
      --tw-drop-shadow-size:initial
    }
  }
}
@layer theme {
  :root,:host {
    --font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing:.25rem;
    --default-font-family:var(--font-sans);
    --default-mono-font-family:var(--font-mono)
  }
}
@layer base {
  *,:after,:before {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  ::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  ::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  html,:host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }
  hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }
  abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }
  h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
  }
  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }
  b,strong {
    font-weight:bolder
  }
  code,kbd,samp,pre {
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }
  small {
    font-size:80%
  }
  sub,sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }
  sub {
    bottom:-.25em
  }
  sup {
    top:-.5em
  }
  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }
  :-moz-focusring {
    outline:auto
  }
  progress {
    vertical-align:baseline
  }
  summary {
    display:list-item
  }
  ol,ul,menu {
    list-style:none
  }
  img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align:middle;
    display:block
  }
  img,video {
    max-width:100%;
    height:auto
  }
  button,input,select,optgroup,textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  ::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  :where(select:is([multiple],[size])) optgroup {
    font-weight:bolder
  }
  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px
  }
  ::file-selector-button {
    margin-inline-end:4px
  }
  ::placeholder {
    opacity:1
  }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor
    }
    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color:color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }
  textarea {
    resize:vertical
  }
  ::-webkit-search-decoration {
    -webkit-appearance:none
  }
  ::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit
  }
  ::-webkit-datetime-edit {
    display:inline-flex
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding:0
  }
  ::-webkit-datetime-edit {
    padding-block:0
  }
  ::-webkit-datetime-edit-year-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-month-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-day-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-second-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block:0
  }
  ::-webkit-calendar-picker-indicator {
    line-height:1
  }
  :-moz-ui-invalid {
    box-shadow:none
  }
  button,input:where([type=button],[type=reset],[type=submit]) {
    -webkit-appearance:button;
    appearance:button
  }
  ::file-selector-button {
    -webkit-appearance:button;
    appearance:button
  }
  ::-webkit-inner-spin-button {
    height:auto
  }
  ::-webkit-outer-spin-button {
    height:auto
  }
  [hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }
}
@layer components;
@layer utilities {
  .visible {
    visibility:visible
  }
  .absolute {
    position:absolute
  }
  .fixed {
    position:fixed
  }
  .relative {
    position:relative
  }
  .static {
    position:static
  }
  .start {
    inset-inline-start:var(--spacing)
  }
  .block {
    display:block
  }
  .hidden {
    display:none
  }
  .table {
    display:table
  }
  .transform {
    transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
  }
  .resize {
    resize:both
  }
  .shadow\/impersonate {
    --tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }
  .filter {
    filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
  }
}

/* == 2. VARIÁVEIS DO TEMA ================================================ */
/* Pontos de personalização do tema.
   Tudo que costuma mudar de galeria para galeria mora aqui, para não ser
   preciso caçar valores no meio do design system. */
:root {
  /* Fotografia do hero. Troque o arquivo em themes/demi_lovato_gallery/images/ ou aponte
     para qualquer URL. É usada pelo fundo desfocado, pela figura em primeiro
     plano e pelas fatias do efeito de glitch. */
  --arq-hero-image: url('images/hero-hailey-v2.png');
}

/* Tipografia hospedada no próprio tema.
   O theme.php carrega a Inter do Google Fonts por padrão. Para não depender de
   servidor externo, baixe a Inter (https://rsms.me/inter/), coloque os arquivos
   em themes/demi_lovato_gallery/fonts/, descomente o bloco abaixo e apague a chave
   'font_url' do $arquivex_config. */
/*
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable.woff2') format('woff2');
}
*/


/* == 3. DESIGN SYSTEM DO ARQUIVEX ======================================== */

:root {
  --ink: #1b1b1b;
  --paper: #bab7b5;
  --white: #ffffff;
  --fog: #bab7b5;
  --muted: #4a4747;
  --line: #1b1b1b;
  --accent: #1b1b1b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
button, input, select ,
a{ font: inherit; }
button ,
a { cursor: pointer; }
img { display: block; width: 100%; }

.site-shell { min-height: 100vh; overflow: hidden; }
.topbar { height: 76px; padding: 0 4.5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d2d2ce; background: rgba(244,244,241,.96); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); font-weight: 900; font-size: 15px; letter-spacing: -.04em; }
.brand-mark { width: 28px; height: 28px; display: inline-grid; place-items: center; background: var(--ink); color: #f7f6f4; font-size: 13px; }
.brand-muted { color: #858580; }
.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav button ,
.main-nav a { border: 0; background: transparent; color: #50504b; font-size: 12px; font-weight: 700; padding: 28px 0 25px; position: relative; }
.main-nav button:hover, .main-nav button.active ,
.main-nav a:hover, .main-nav a.active { color: #000; }
.main-nav button.active::after ,
.main-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #000; }
.nav-count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 4px; background: #111; color: #f7f6f4; border-radius: 50%; font-size: 9px; }
.admin-entry { border: 1px solid #161616; background: transparent; padding: 10px 14px; text-transform: uppercase; font-size: 9px; letter-spacing: .14em; font-weight: 800; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #50c95c; margin-right: 7px; }

.hero { min-height: 680px; display: grid; grid-template-columns: 52% 48%; border-bottom: 1px solid var(--line); }
.hero-copy { padding: 91px 6vw 62px 7vw; display: flex; flex-direction: column; justify-content: center; }
.eyebrow, .section-kicker { font-size: 9px; font-weight: 900; letter-spacing: .22em; color: #73736e; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 30px; height: 1px; background: #777; }
.hero h1 { margin: 27px 0 23px; font-size: clamp(48px, 6vw, 93px); line-height: .93; letter-spacing: -.075em; font-weight: 900; }
.hero h1 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.hero-description { max-width: 490px; color: #65655f; line-height: 1.7; font-size: 14px; }
.search-box { max-width: 620px; height: 58px; margin-top: 28px; background: #fff; border: 1px solid #cacac4; display: flex; align-items: center; box-shadow: 0 7px 20px rgba(0,0,0,.04); }
.search-icon { font-size: 23px; margin-left: 18px; transform: rotate(-20deg); }
.search-box input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; padding: 0 14px; background: transparent; font-size: 12px; }
.search-box select { width: 156px; height: 36px; border: 0; border-left: 1px solid #ddd; color: #686862; outline: 0; padding-left: 13px; font-size: 10px; background: #fff; }
.search-box button ,
.search-box a { align-self: stretch; min-width: 96px; border: 0; background: var(--ink); color: #f7f6f4; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.hero-stats { display: flex; gap: 54px; margin-top: 39px; }
.hero-stats div { display: flex; flex-direction: column; gap: 5px; }
.hero-stats strong { font-size: 20px; letter-spacing: -.04em; }
.hero-stats span { font-size: 9px; letter-spacing: .17em; color: #8a8a83; font-weight: 700; }
.hero-collage { position: relative; background: #151515; display: grid; grid-template-columns: 66% 34%; grid-template-rows: 50% 50%; overflow: hidden; }
.hero-collage img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.08); transition: transform .7s ease, filter .4s ease; }
.hero-collage div:hover img { transform: scale(1.035); filter: grayscale(40%) contrast(1.05); }
.collage-large { grid-row: 1 / 3; border-right: 3px solid var(--paper); }
.collage-small.top { border-bottom: 3px solid var(--paper); }
.image-index { position: absolute; right: 18px; bottom: 16px; padding: 7px 9px; background: rgba(0,0,0,.78); color: #f7f6f4; font-size: 9px; letter-spacing: .15em; }

.content-wrap { width: min(1080px, 88vw); margin: 0 auto; }
.album-section { padding: 94px 0 112px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; }
.section-heading h2 { margin: 7px 0 0; font-size: 32px; letter-spacing: -.045em; }
.section-heading > button, .result-tools button ,
.section-heading > a, .result-tools a { border: 0; border-bottom: 1px solid #111; background: transparent; padding: 0 0 7px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.section-heading > button span ,
.section-heading > a span { margin-left: 8px; }
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.album-card { height: 410px; position: relative; overflow: hidden; border: 0; padding: 0; text-align: left; background: #111; color: #f7f6f4; }
.album-card img { height: 100%; object-fit: cover; filter: grayscale(100%); transition: transform .65s ease, filter .35s; }
.album-card:hover img { transform: scale(1.05); filter: grayscale(20%); }
.album-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.73)); }
.album-number { position: absolute; top: 18px; left: 20px; font-size: 10px; letter-spacing: .16em; }
.album-info { position: absolute; left: 25px; bottom: 26px; display: flex; flex-direction: column; gap: 8px; }
.album-info strong { font-size: 21px; letter-spacing: -.035em; }
.album-info small { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #d5d5d5; }
.album-arrow { position: absolute; right: 25px; bottom: 26px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }

.recent-section { padding: 0 0 100px; }
.recent-heading { border-top: 1px solid var(--line); padding-top: 85px; }
.result-tools { display: flex; gap: 20px; align-items: center; }
.result-tools > span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 9px; }
.photo-card { position: relative; overflow: hidden; background: #1a1a1a; color: #f7f6f4; }
.photo-card.tall { grid-row: span 2; }
.photo-card.wide { grid-column: span 2; }
.photo-open { position: absolute; inset: 0; border: 0; padding: 0; background: transparent; }
.photo-open img { height: 100%; object-fit: cover; filter: grayscale(100%); transition: transform .55s ease, filter .3s ease; }
.photo-card:hover .photo-open img { transform: scale(1.035); filter: grayscale(20%); }
.photo-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.84)); }
.heart { position: absolute; z-index: 2; right: 13px; top: 13px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.56); border-radius: 50%; color: #f7f6f4; background: rgba(0,0,0,.28); backdrop-filter: blur(6px); font-size: 18px; }
.heart.saved { background: #fff; color: #111; }
.photo-meta { position: absolute; z-index: 1; left: 18px; right: 16px; bottom: 17px; pointer-events: none; }
.photo-meta > span { display: block; margin-bottom: 7px; color: #d3ff37; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.photo-meta h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: -.015em; }
.photo-meta small { font-size: 9px; color: #c5c5c5; text-transform: uppercase; letter-spacing: .08em; }
.load-more { display: block; margin: 43px auto 0; padding: 13px 22px; border: 1px solid #a9a9a4; background: transparent; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.load-more span { margin-left: 12px; }
.empty-state { padding: 80px 20px; border: 1px dashed #bbb; text-align: center; color: #65655f; }
.empty-state > span { font-size: 40px; }.empty-state h3 { margin-bottom: 7px; color: #111; }.empty-state p { font-size: 13px; }
.cta-band { background: var(--ink); color: #f7f6f4; min-height: 340px; padding: 70px max(6vw, calc((100vw - 1260px)/2)); display: flex; align-items: center; justify-content: space-between; }
.cta-band p { font-size: 9px; color: #a5a5a5; letter-spacing: .18em; font-weight: 800; }
.cta-band h2 { margin: 16px 0 0; font-size: clamp(40px, 4.5vw, 65px); line-height: .98; letter-spacing: -.06em; }
.cta-band button ,
.cta-band a { border: 1px solid #707070; background: transparent; color: #f7f6f4; padding: 18px 23px; text-transform: uppercase; font-size: 9px; letter-spacing: .13em; font-weight: 800; }
.cta-band button span ,
.cta-band a span { margin-left: 28px; }
footer { min-height: 110px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; background: #050505; color: #797979; border-top: 1px solid #242424; }
.footer-brand { color: #f7f6f4; pointer-events: none; }.footer-brand .brand-mark { background: white; color: black; }
footer p, footer button , footer a { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
footer div:last-child { display: flex; gap: 24px; }footer button ,footer a { border: 0; background: transparent; color: #a0a0a0; }

.lightbox { position: fixed; inset: 0; z-index: 50; background: #050505; color: #f7f6f4; display: grid; grid-template-columns: 1fr minmax(280px, 350px); }
.lightbox-image { min-width: 0; padding: 36px; display: grid; place-items: center; }
.lightbox-image img { max-height: calc(100vh - 72px); object-fit: contain; }
.lightbox-info { border-left: 1px solid #2d2d2d; padding: 90px 34px 34px; display: flex; flex-direction: column; }
.lightbox-info > p { color: var(--accent); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
.lightbox-info h2 { font-size: 30px; line-height: 1.08; letter-spacing: -.05em; }
.lightbox-info dl { margin-top: 25px; border-top: 1px solid #303030; }
.lightbox-info dl div { border-bottom: 1px solid #303030; padding: 15px 0; display: flex; justify-content: space-between; gap: 20px; font-size: 10px; }
.lightbox-info dt { color: #777; text-transform: uppercase; letter-spacing: .1em; }.lightbox-info dd { margin: 0; text-align: right; }
.lightbox-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: auto; }
.lightbox-actions button ,
.lightbox-actions a { padding: 14px 7px; border: 1px solid #5a5a5a; background: transparent; color: #f7f6f4; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.lightbox-actions button.primary ,
.lightbox-actions a.primary { background: white; color: #111; border-color: white; }
.lightbox-close { position: fixed; z-index: 3; right: 19px; top: 15px; border: 0; background: transparent; color: #f7f6f4; font-size: 31px; font-weight: 200; }
.lightbox-nav { position: fixed; z-index: 3; top: 50%; width: 43px; height: 43px; border: 1px solid #555; border-radius: 50%; color: #f7f6f4; background: rgba(0,0,0,.6); }.lightbox-nav.previous { left: 18px; }.lightbox-nav.next { right: 368px; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 25px; transform: translateX(-50%); padding: 13px 18px; background: #111; color: #f7f6f4; box-shadow: 0 10px 35px rgba(0,0,0,.3); font-size: 11px; }.toast span { color: var(--accent); margin-right: 9px; }

/* Galeria pública */
.gallery-site { background: #f3f3f0; }
.gallery-topbar { background: #0a0a0a; color: #f7f6f4; border-bottom: 1px solid #303030; position: sticky; top: 0; z-index: 20; }
.gallery-header-inner { width: min(1120px, 92vw); height: 78px; margin: 0 auto; display: flex; align-items: center; gap: 42px; }
.gallery-brand { color: #f7f6f4; margin-right: auto; }
.gallery-brand .brand-mark { background: white; color: #0a0a0a; }
.gallery-brand > span:not(.brand-mark):last-child { display: flex; flex-direction: column; }
.gallery-brand small { margin-top: 2px; color: #666; font-size: 9px; letter-spacing: .26em; }
.gallery-nav { align-self: stretch; display: flex; align-items: stretch; }
.gallery-nav button ,
.gallery-nav a { border: 0; border-bottom: 2px solid transparent; padding: 0 15px; background: transparent; color: #969696; font-size: 9px; font-weight: 700; }
.gallery-nav button:hover, .gallery-nav button.active ,
.gallery-nav a:hover, .gallery-nav a.active { color: #f7f6f4; border-bottom-color: white; }
.gallery-nav button span ,
.gallery-nav a span { min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 8px; background: #303030; color: #f7f6f4; font-size: 9px; }
.gallery-topbar .admin-entry { border-color: #555; color: #f7f6f4; }
.archive-intro { min-height: 465px; padding: 58px 0; position: relative; overflow: hidden; background: #151515; color: #f7f6f4; display: flex; align-items: center; }
.archive-intro::before { content: ""; position: absolute; inset: 0; background: var(--arq-hero-image) center 28% / cover no-repeat; filter: grayscale(100%) contrast(1.04); transform: scale(1.01); }
.archive-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.72) 42%, rgba(8,8,8,.22) 78%, rgba(8,8,8,.08) 100%); }
.archive-intro-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 620px); align-content: center; gap: 35px; }
.archive-intro p { margin: 0 0 10px; color: #7b7b7b; font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.archive-intro h1 { margin: 0 0 11px; max-width: 620px; font-size: clamp(46px, 5.2vw, 78px); line-height: .95; letter-spacing: -.065em; }
.archive-intro > div > div:first-child > span { color: #8f8f8f; font-size: 10px; }
.archive-search { height: 51px; display: flex; align-items: center; background: #fff; border: 1px solid #3d3d3d; color: #111; }
.archive-search > span { margin-left: 16px; font-size: 21px; transform: rotate(-18deg); }
.archive-search input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; padding: 0 13px; font-size: 10px; }
.archive-search select { width: 160px; height: 30px; padding-left: 12px; border: 0; border-left: 1px solid #ddd; outline: 0; background: white; color: #656560; font-size: 9px; }
.archive-search button ,
.archive-search a { align-self: stretch; padding: 0 20px; border: 0; background: #e4e4e0; color: #111; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.archive-search button:hover ,
.archive-search a:hover { background: var(--accent); }
.archive-stats-bar { background: white; border-bottom: 1px solid #d7d7d2; }
.archive-stats-bar > div { min-height: 52px; display: flex; align-items: center; gap: 21px; }
.archive-stats-bar span { color: #7d7d77; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.archive-stats-bar strong { margin-right: 4px; color: #111; font-size: 11px; }
.archive-stats-bar i { width: 1px; height: 13px; background: #d1d1cc; }
.archive-stats-bar p { margin-left: auto; color: #898984; font-size: 9px; }
.archive-stats-bar p b { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #28a94f; }
.archive-content { padding-bottom: 90px; }
.archive-section { padding: 52px 0 57px; border-bottom: 1px solid #d3d3ce; }
.archive-section-title { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.archive-section-title > div > span { color: #8c8c86; font-size: 9px; font-weight: 900; letter-spacing: .19em; }
.archive-section-title h2 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.04em; }
.archive-section-title > button, .uploads-tools > button:not(.view-mode) ,
.archive-section-title > a, .uploads-tools > a:not(.view-mode) { border: 0; border-bottom: 1px solid #222; background: transparent; padding: 0 0 5px; color: #333; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.updated-albums-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 150px)); justify-content: center; gap: 18px; }
.updated-album { position: relative; min-width: 0; border: 1px solid #d9d9d4; padding: 0; background: white; color: #111; text-align: left; overflow: hidden; }
.album-thumb { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #222; }
.album-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 22%; filter: grayscale(100%); transition: transform .35s, filter .25s; }
.updated-album:hover .album-thumb img { transform: scale(1.04); filter: grayscale(20%); }
.album-thumb i { position: absolute; right: 7px; bottom: 7px; padding: 4px 6px; background: rgba(0,0,0,.8); color: #f7f6f4; font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: .07em; }
.album-copy { min-height: 84px; padding: 10px 9px 9px; display: flex; flex-direction: column; }
.album-copy small { color: #8a8a84; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; }
.album-copy strong { margin-top: 7px; font-size: 10px; line-height: 1.35; }
.album-copy em { margin-top: auto; color: #9a9a94; font-size: 9px; font-style: normal; }
.updated-album > b { position: absolute; right: 10px; bottom: 10px; color: #d1d1cc; font-size: 9px; }
.category-section .archive-section-title > p { width: 245px; margin: 0 24px 1px 0; display: grid; grid-template-columns: 1fr 72px 72px; color: #90908b; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.category-section .archive-section-title > p b { font-weight: 700; text-align: center; }
.category-list { border-top: 1px solid #bababa; }
.category-list > button ,
.category-list > a { width: 100%; min-height: 74px; display: grid; grid-template-columns: 56px 31px minmax(0,1fr) 72px 72px 25px; align-items: center; gap: 14px; border: 0; border-bottom: 1px solid #d8d8d3; padding: 8px 13px 8px 8px; background: transparent; text-align: left; color: #111; transition: background .2s; }
.category-list > button:hover ,
.category-list > a:hover { background: white; }
.category-list img { width: 56px; height: 50px; object-fit: cover; filter: grayscale(100%); }
.folder-symbol { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #ccc; color: #777; font-size: 13px; }
.category-copy { display: flex; flex-direction: column; gap: 5px; }
.category-copy strong { font-size: 11px; }.category-copy small { color: #85857f; font-size: 9px; }
.category-list > button > b ,
.category-list > a > b { font-size: 9px; text-align: center; }.category-list > button > i ,.category-list > a > i { font-style: normal; color: #92928c; }
.category-group { border-bottom: 1px solid #d8d8d3; }
.category-row { width: 100%; min-height: 74px; display: grid; grid-template-columns: 56px 31px minmax(0,1fr) 72px 72px 25px; align-items: center; gap: 14px; padding: 8px 13px 8px 8px; transition: background .2s; cursor: pointer; }
.category-row:focus-visible { outline: 2px solid #999; outline-offset: -2px; }
.category-group.expanded .category-row, .category-row:hover { background: white; }
.category-row > img { width: 56px; height: 50px; object-fit: cover; }
.category-row .folder-symbol { border: 1px solid #c7c7c2; background: transparent; }
.category-row > b { font-size: 9px; text-align: center; }
.category-expand-arrow { border: 0; background: transparent; color: #777; font-size: 11px; }
.category-years-panel { padding: 14px 22px 16px 109px; background: #e5e5e1; border-top: 1px solid #d2d2cd; animation: reveal-years .22s ease-out; }
.category-years-panel > div:first-child { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }.category-years-panel > div:first-child span { font-size: 9px; font-weight: 900; letter-spacing: .14em; }.category-years-panel > div:first-child small { color: #888; font-size: 9px; }
.category-year-buttons { display: grid; grid-template-columns: repeat(7, minmax(78px, 96px)); justify-content: start; gap: 5px; }
.category-year-buttons button ,
.category-year-buttons a { min-height: 39px; padding: 5px 7px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #cacac5; background: #f6f6f3; color: #111; text-align: left; }.category-year-buttons button:hover ,.category-year-buttons a:hover { background: #111; border-color: #111; color: #f7f6f4; }.category-year-buttons strong { font-size: 10px; }.category-year-buttons small { grid-column: 1; margin-top: 1px; color: #8a8a84; font-size: 9px; }.category-year-buttons span { grid-column: 2; grid-row: 1/3; font-size: 9px; }
@keyframes reveal-years { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.uploads-title { align-items: center; }
.uploads-tools { display: flex; align-items: center; gap: 10px; }
.uploads-tools > span { color: #8d8d87; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.view-mode { width: 27px; height: 27px; border: 1px solid #d0d0cb; background: transparent; color: #777; font-size: 12px; }
.view-mode.active { background: #111; border-color: #111; color: #f7f6f4; }
.thumbnail-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 9px; }
.thumbnail-card { min-width: 0; position: relative; }
.thumbnail-image { width: 100%; aspect-ratio: 4 / 3; position: relative; display: block; overflow: hidden; border: 0; padding: 0; background: #ddd; }
.thumbnail-image img { height: 100%; object-fit: cover; filter: grayscale(100%); transition: transform .3s, filter .25s; }
.thumbnail-image > span { position: absolute; inset: auto 0 0; padding: 7px; background: rgba(0,0,0,.82); color: #f7f6f4; opacity: 0; transform: translateY(100%); transition: .25s; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.thumbnail-image:hover img { transform: scale(1.04); filter: grayscale(0%); }.thumbnail-image:hover > span { opacity: 1; transform: translateY(0); }
.thumb-heart { position: absolute; right: 6px; top: 6px; z-index: 2; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(0,0,0,.38); color: #f7f6f4; font-size: 13px; }
.thumb-heart.saved { background: white; color: #111; }
.thumbnail-card > div { padding: 9px 2px 0; }
.thumbnail-card > div > small { color: #777; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.thumbnail-card h3 { margin: 5px 0 7px; min-height: 26px; font-size: 9px; line-height: 1.35; }
.thumbnail-card p { margin: 0; display: flex; justify-content: space-between; color: #969690; font-size: 9px; text-transform: uppercase; }
.archive-pagination { margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.archive-pagination button ,
.archive-pagination a { width: 30px; height: 30px; border: 1px solid #d1d1cc; background: white; color: #555; font-size: 9px; }.archive-pagination button.active ,.archive-pagination a.active { background: #111; border-color: #111; color: #f7f6f4; }.archive-pagination button.disabled ,.archive-pagination a.disabled { color: #c2c2bd; }.archive-pagination span { margin: 0 5px; color: #999; font-size: 9px; }
.throwback-section { overflow: hidden; }
.media-placeholder { width: 100%; height: 100%; min-height: 72px; display: grid; place-items: center; background: linear-gradient(135deg,#e8e8e4,#f7f7f4); color: #8b8b84; font-size: 24px; }
.gallery-empty-state { grid-column: 1 / -1; min-height: 150px; padding: 28px; display: grid; place-content: center; gap: 7px; text-align: center; border: 1px solid #d8d8d3; border-radius: var(--gallery-radius,5px); color: var(--gallery-text,#111); }
.gallery-empty-state span { color: #777; font-size: 13px; }
.gallery-empty-state.dark { min-width: min(720px,80vw); color: #f7f6f4; border-color: #333; background: #171717; }
.gallery-loading-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 150px)); justify-content: center; gap: 18px; }
.gallery-loading-grid span { aspect-ratio: 4 / 5; border-radius: var(--gallery-radius,5px); background: linear-gradient(90deg, #e4e4df 25%, #efefec 37%, #e4e4df 63%); background-size: 400% 100%; animation: gallery-skeleton-pulse 1.4s ease infinite; }
.gallery-loading-grid.dark { min-width: min(720px,80vw); grid-template-columns: repeat(6, 138px); }
.gallery-loading-grid.dark span { background: linear-gradient(90deg, #232323 25%, #2c2c2c 37%, #232323 63%); background-size: 400% 100%; }
@keyframes gallery-skeleton-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.is-loading-text { display: inline-block; min-width: 40%; height: .85em; vertical-align: middle; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.16) 25%, rgba(255,255,255,.3) 37%, rgba(255,255,255,.16) 63%); background-size: 400% 100%; animation: gallery-skeleton-pulse 1.4s ease infinite; color: transparent !important; }
.gallery-brand .is-loading-text { min-width: 90px; }
.archive-intro h1 .is-loading-text { min-width: 55%; }
.archive-intro-inner > div > div:first-child > .is-loading-text { min-width: 60%; }
@media (prefers-reduced-motion: reduce) { .is-loading-text { animation: none; } }
.archive-stats-bar.is-loading strong { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .gallery-loading-grid span { animation: none; } }
.throwback-section .uploads-title > div > p { margin: 6px 0 0; color: #85857f; font-size: 9px; }
.throwback-window { width: 100%; padding: 22px; overflow: hidden; background: #101010; border: 1px solid #252525; }
.throwback-track { width: max-content; display: flex; gap: 11px; animation: throwback-scroll 42s linear infinite; will-change: transform; }
.throwback-track:hover { animation-play-state: paused; }
.throwback-card { width: 150px; flex: 0 0 150px; overflow: hidden; background: #1b1b1b; color: #f7f6f4; border: 1px solid #2e2e2e; }
.throwback-card > button ,
.throwback-card > a { width: 100%; aspect-ratio: 4 / 5; position: relative; display: block; overflow: hidden; border: 0; padding: 0; background: #191919; }
.throwback-card > button img ,
.throwback-card > a img { height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(100%); transition: transform .35s, filter .25s; }
.throwback-card > button > span ,
.throwback-card > a > span { position: absolute; inset: auto 0 0; padding: 7px; background: rgba(0,0,0,.85); color: #f7f6f4; transform: translateY(100%); transition: .25s; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.throwback-card > button:hover img ,
.throwback-card > a:hover img { transform: scale(1.04); filter: grayscale(10%); }.throwback-card > button:hover span ,.throwback-card > a:hover span { transform: translateY(0); }
.throwback-card > div { min-height: 70px; padding: 9px 10px 10px; }.throwback-card small { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .11em; }.throwback-card h3 { margin: 5px 0; font-size: 9px; line-height: 1.3; }.throwback-card p { margin: 0; color: #777; font-size: 9px; text-transform: uppercase; }
.throwback-hint { margin: 14px 0 0; color: #85857f; font-size: 9px; text-align: center; text-transform: uppercase; letter-spacing: .09em; }.throwback-hint span { margin-right: 7px; color: #111; }
@keyframes throwback-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5.5px)); } }
.popular-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 150px)); justify-content: center; gap: 18px; }
.popular-grid > button ,
.popular-grid > a { min-width: 0; position: relative; border: 1px solid #d9d9d4; padding: 0; overflow: hidden; background: white; color: #111; text-align: left; }
.popular-grid img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 22%; transition: transform .35s; }.popular-grid > button:hover img ,.popular-grid > a:hover img { transform: scale(1.04); }
.popular-rank { position: absolute; z-index: 1; left: 8px; top: 8px; width: 27px; height: 27px; display: grid; place-items: center; background: rgba(0,0,0,.82); color: #f7f6f4; font-family: Georgia, serif; font-size: 12px; }
.popular-copy { min-height: 84px; padding: 10px 9px 9px; display: flex; flex-direction: column; gap: 6px; }.popular-copy strong { font-size: 9px; line-height: 1.35; }.popular-copy small { margin-top: auto; color: #8c8c86; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.gallery-footer { background: #0a0a0a; color: #f7f6f4; }
.gallery-footer > div { min-height: 104px; display: flex; align-items: center; justify-content: space-between; }
.gallery-footer p { color: #6f6f6f; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.gallery-footer > div > div:last-child { display: flex; gap: 22px; }.gallery-footer button ,.gallery-footer a { border: 0; background: transparent; color: #8b8b8b; font-size: 9px; text-transform: uppercase; }
.gallery-home.is-hidden { display: none; }
.archive-browser { min-height: calc(100vh - 78px); padding: 28px 0 80px; background: #f3f3f0; }
.archive-breadcrumb { display: flex; align-items: center; gap: 8px; color: #969690; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.archive-breadcrumb button ,
.archive-breadcrumb a { border: 0; padding: 0; background: transparent; color: #777; font-size: inherit; text-transform: inherit; letter-spacing: inherit; }.archive-breadcrumb button:hover ,.archive-breadcrumb a:hover { color: #111; text-decoration: underline; text-underline-offset: 4px; }.archive-breadcrumb strong { color: #111; }
.browser-title { min-height: 175px; padding: 43px 0 35px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #bcbcb7; }
.browser-title p { margin: 0 0 9px; color: #8c8c86; font-size: 9px; font-weight: 900; letter-spacing: .17em; }.browser-title h1 { margin: 0 0 9px; font-size: clamp(38px,5vw,68px); line-height: .94; letter-spacing: -.06em; }.browser-title > div > span { color: #777; font-size: 10px; }.browser-title > button ,.browser-title > a { border: 0; border-bottom: 1px solid #222; padding: 0 0 5px; background: transparent; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 28px; }
.year-grid > button ,
.year-grid > a { min-width: 0; border: 1px solid #d6d6d1; padding: 0; background: white; color: #111; text-align: left; position: relative; }.year-cover { height: 175px; display: block; position: relative; overflow: hidden; }.year-cover img { height: 100%; object-fit: cover; filter: grayscale(100%) brightness(.72); transition: .35s; }.year-grid > button:hover .year-cover img ,.year-grid > a:hover .year-cover img { transform: scale(1.04); filter: grayscale(25%) brightness(.72); }.year-cover b { position: absolute; left: 14px; bottom: 8px; color: #f7f6f4; font-size: 39px; letter-spacing: -.06em; }.year-copy { min-height: 65px; padding: 12px; display: flex; flex-direction: column; gap: 5px; }.year-copy strong { font-size: 10px; }.year-copy small { color: #8d8d87; font-size: 9px; }.year-grid > button > i ,.year-grid > a > i { position: absolute; right: 12px; bottom: 19px; font-style: normal; }
.browser-album-grid { padding-top: 28px; display: grid; grid-template-columns: repeat(6, minmax(0, 150px)); justify-content: space-between; gap: 10px; }.browser-album-grid > button ,.browser-album-grid > a { min-width: 0; border: 1px solid #d6d6d1; padding: 0; background: white; color: #111; text-align: left; }.browser-album-grid > button > span ,.browser-album-grid > a > span { aspect-ratio: 4/5; position: relative; display: block; overflow: hidden; }.browser-album-grid img { height: 100%; object-fit: cover; filter: grayscale(100%); transition: .3s; }.browser-album-grid button:hover img ,.browser-album-grid a:hover img { transform: scale(1.04); filter: grayscale(15%); }.browser-album-grid > button > span i ,.browser-album-grid > a > span i { position: absolute; right: 7px; bottom: 7px; padding: 4px 6px; background: rgba(0,0,0,.8); color: #f7f6f4; font-size: 9px; font-style: normal; }.browser-album-grid > button > div ,.browser-album-grid > a > div { min-height: 98px; padding: 10px; display: flex; flex-direction: column; }.browser-album-grid small { color: #888; font-size: 9px; }.browser-album-grid strong { margin-top: 6px; font-size: 9px; line-height: 1.35; }.browser-album-grid em { margin-top: auto; color: #777; font-size: 9px; font-style: normal; text-transform: uppercase; }
.related-albums { margin-top: 46px; padding-top: 30px; border-top: 1px solid #dededa; }
.related-albums-title { margin-bottom: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.related-albums-title strong { font-size: 17px; font-weight: 550; letter-spacing: -.02em; }
.related-albums-title button ,
.related-albums-title a { border: 0; border-bottom: 1px solid #333; background: transparent; padding: 0 0 3px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.photo-browser-title { min-height: 155px; }.album-photo-grid { padding-top: 28px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 9px; }.album-photo-grid article { min-width: 0; position: relative; }.album-photo-grid article > button:first-child ,.album-photo-grid article > a:first-child { width: 100%; aspect-ratio: 4/5; display: block; position: relative; overflow: hidden; border: 0; padding: 0; background: #222; }.album-photo-grid img { height: 100%; object-fit: cover; filter: grayscale(100%); transition: .3s; }.album-photo-grid article > button:first-child span ,.album-photo-grid article > a:first-child span { position: absolute; inset: auto 0 0; padding: 7px; background: rgba(0,0,0,.8); color: #f7f6f4; transform: translateY(100%); transition: .2s; font-size: 9px; font-weight: 900; }.album-photo-grid article > button:first-child:hover img ,.album-photo-grid article > a:first-child:hover img { transform: scale(1.04); filter: grayscale(10%); }.album-photo-grid article > button:first-child:hover span ,.album-photo-grid article > a:first-child:hover span { transform: translateY(0); }.album-photo-grid article > button:nth-child(2) ,.album-photo-grid article > a:nth-child(2) { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(0,0,0,.5); color: #f7f6f4; }.album-photo-grid article > button.saved ,.album-photo-grid article > a.saved { background: white; color: #111; }.album-photo-grid article p { margin: 7px 1px 0; color: #777; font-size: 9px; }.album-photo-grid article p span { float: right; color: #aaa; }

.browser-album-grid img, .album-photo-grid img { object-position: 50% 22%; }
.gallery-site img, .admin-shell img, .upload-modal img { filter: none !important; }
.popular-grid img { filter: none !important; }
.browser-album-grid { justify-content: center; gap: 18px; }

/* Cantos suaves da interface */
.gallery-site button, .gallery-site input, .gallery-site select,
.updated-album, .album-thumb, .popular-grid > button, .popular-grid img,
.throwback-window, .throwback-card, .throwback-card > button,
.category-group, .category-row, .category-years-panel, .category-year-buttons button,
.year-grid > button, .year-cover, .browser-album-grid > button,
.browser-album-grid > button > span, .album-photo-grid article > button:first-child,
.archive-search, .panel-card, .dropzone, .workspace-pill, .storage-card,
.upload-dialog, .modal-files > button,
.smart-crop-option, .selected-files span ,

/* Cantos suaves da interface */
.gallery-site a, .popular-grid > a, .throwback-card > a, .category-year-buttons a,
.year-grid > a, .browser-album-grid > a,
.browser-album-grid > a > span, .album-photo-grid article > a:first-child, .modal-files > a{ border-radius: 5px; }
.archive-search button ,
.archive-search a { border-radius: 0 4px 4px 0; }
.category-row .folder-symbol, .thumb-heart, .heart, .lightbox-nav { border-radius: 50%; }

/* Admin */
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; background: #efefec; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; width: 238px; background: #0b0b0b; color: #f7f6f4; padding: 25px 19px 20px; display: flex; flex-direction: column; z-index: 5; }
.admin-brand { color: #f7f6f4; align-self: flex-start; margin: 0 7px 28px; }.admin-brand .brand-mark { background: #1b1b1b; color: black; }
.workspace-pill { padding: 11px; border: 1px solid #2f2f2f; background: #161616; display: flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.workspace-pill > span { width: 30px; height: 30px; display: grid; place-items: center; background: #e8e8e5; color: #111; font-size: 10px; font-weight: 900; }
.workspace-pill div { display: flex; flex-direction: column; gap: 2px; flex: 1; }.workspace-pill strong { font-size: 10px; }.workspace-pill small { font-size: 9px; color: #777; }.workspace-pill b { color: #666; font-size: 10px; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar nav button ,
.admin-sidebar nav a { height: 39px; padding: 0 10px; border: 0; background: transparent; color: #8d8d8d; display: flex; align-items: center; text-align: left; font-size: 10px; font-weight: 700; }
.admin-sidebar nav button:hover ,
.admin-sidebar nav a:hover { color: #f7f6f4; }.admin-sidebar nav button ,.admin-sidebar nav a { position: relative; border-radius: 6px; }.admin-sidebar nav button.active ,.admin-sidebar nav a.active { background: #242424; color: #f7f6f4; }.admin-sidebar nav button.active::before ,.admin-sidebar nav a.active::before { content: ""; position: absolute; left: -10px; top: 0; width: 2px; height: 100%; border-radius: 0 2px 2px 0; background: white; }
.admin-icon { width: 29px; color: #aaa; font-size: 15px; }.admin-sidebar nav button small ,.admin-sidebar nav a small { margin-left: auto; color: #676767; font-size: 9px; }
.storage-card { margin-top: auto; padding: 14px; background: #151515; border: 1px solid #292929; }.storage-card > div { display: flex; justify-content: space-between; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: #989898; }.storage-card strong { color: #f7f6f4; }.storage-card progress { width: 100%; height: 3px; margin-top: 12px; accent-color: white; }.storage-card p { font-size: 9px; color: #777; }.storage-card button ,.storage-card a { border: 0; padding: 0; background: transparent; color: #f7f6f4; text-decoration: underline; text-underline-offset: 4px; font-size: 9px; text-transform: uppercase; font-weight: 800; }
.view-site { border: 0; background: transparent; color: #777; margin: 17px 0 0; padding: 0; text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.admin-main { grid-column: 2; min-width: 0; }
.admin-topbar { height: 66px; padding: 0 38px; display: flex; justify-content: flex-end; align-items: center; border-bottom: 1px solid #d4d4d0; background: #f6f6f4; }
.back-to-gallery { margin-right: auto; border: 0; border-bottom: 1px solid #777; padding: 0 0 5px; background: transparent; color: #555; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.admin-topbar > div { display: flex; align-items: center; gap: 9px; }.admin-topbar-icons button ,.admin-topbar-icons a { width: 29px; height: 29px; border: 1px solid #d2d2cf; background: white; border-radius: 50%; position: relative; }.admin-topbar-icons i { position: absolute; right: 4px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: #0da646; }.mobile-admin-label { display: none; }
.user-menu { margin-left: 16px; padding-left: 18px; border: 0; border-left: 1px solid #ddd; background: transparent; display: flex; align-items: center; gap: 9px; }.user-menu > span { width: 29px; height: 29px; display: grid; place-items: center; background: #111; color: #f7f6f4; font-size: 9px; }.user-menu div { display: flex; flex-direction: column; text-align: left; gap: 2px; }.user-menu strong { font-size: 9px; }.user-menu small { font-size: 9px; color: #8a8a84; }.user-menu b { margin-left: 7px; color: #777; font-size: 9px; }
.admin-content { padding: 39px 4vw 70px; max-width: 1380px; margin: 0 auto; }
.admin-title-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }.admin-title-row p { margin: 0 0 9px; color: #8b8b86; font-size: 9px; letter-spacing: .17em; font-weight: 800; }.admin-title-row h1 { margin: 0 0 7px; font-size: 29px; letter-spacing: -.045em; }.admin-title-row > div > span { color: #797973; font-size: 10px; }
.new-upload, .save-button { padding: 12px 17px; border: 0; background: #111; color: #f7f6f4; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.stat-card { min-height: 133px; padding: 20px; background: white; border: 1px solid #deded9; display: flex; justify-content: space-between; }.stat-card div { display: flex; flex-direction: column; }.stat-card p { color: #85857f; font-size: 9px; letter-spacing: .14em; font-weight: 800; }.stat-card strong { margin-top: 7px; font-size: 24px; letter-spacing: -.04em; }.stat-card span { margin-top: auto; color: #148144; font-size: 9px; }.stat-card > i { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #d9d9d5; border-radius: 50%; font-style: normal; color: #666; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .8fr); gap: 9px; margin-top: 9px; }
.panel-card { background: white; border: 1px solid #deded9; }.recent-uploads, .upload-zone { padding: 22px; }.panel-title { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 19px; }.panel-title p { margin: 0 0 5px; color: #969690; font-size: 9px; letter-spacing: .14em; font-weight: 800; }.panel-title h2 { margin: 0; font-size: 16px; letter-spacing: -.03em; }.panel-title button:not(.save-button) ,.panel-title a:not(.save-button) { border: 0; border-bottom: 1px solid #333; background: transparent; padding: 0 0 4px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.appearance-save-bar { position: sticky; top: 0; z-index: 6; margin: -25px -25px 19px; padding: 20px 25px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #e6e6e2; }
.appearance-save-hint { display: block; margin: -13px 0 20px; color: #8a8a84; font-size: 10px; }
.upload-row { min-height: 63px; border-top: 1px solid #ecece8; display: grid; grid-template-columns: 48px 1fr auto 25px; align-items: center; gap: 11px; }.upload-row img { width: 48px; height: 42px; object-fit: cover; filter: grayscale(100%); }.upload-row > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }.upload-row strong { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.upload-row small, .upload-row > span { color: #92928c; font-size: 9px; }.upload-row > button ,.upload-row > a { border: 0; background: transparent; color: #777; }
.dropzone { width: 100%; min-height: 149px; border: 1px dashed #bcbcb6; background: #f8f8f6; display: flex; flex-direction: column; align-items: center; justify-content: center; }.dropzone > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #cfcfca; border-radius: 50%; background: white; font-size: 15px; }.dropzone strong { margin-top: 12px; font-size: 10px; }.dropzone small { margin-top: 4px; color: #777; font-size: 9px; }.dropzone em { margin-top: 12px; color: #aaa; font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }.quick-actions > button ,.quick-actions > a { min-width: 0; padding: 11px; border: 1px solid #e1e1dc; background: white; display: flex; align-items: center; text-align: left; gap: 9px; }.quick-actions > button > span ,.quick-actions > a > span { width: 25px; height: 25px; display: grid; place-items: center; background: #f0f0ed; }.quick-actions > button div ,.quick-actions > a div { display: flex; flex-direction: column; min-width: 0; }.quick-actions strong { font-size: 9px; }.quick-actions small { margin-top: 3px; color: #999; font-size: 9px; }.quick-actions b { margin-left: auto; font-size: 9px; }
.site-status { margin-top: 9px; min-height: 111px; padding: 20px 23px; display: grid; grid-template-columns: 1.1fr 1.6fr auto; gap: 25px; align-items: center; }.site-status > div:first-child { display: grid; grid-template-columns: 10px 1fr; align-items: center; }.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #19a04c; }.site-status p { margin: 0; font-size: 9px; letter-spacing: .12em; font-weight: 800; }.site-status h2 { grid-column: 1 / 3; margin: 8px 0 3px; font-size: 16px; }.site-status > div > small { grid-column: 1 / 3; color: #999; font-size: 9px; }.status-metrics { display: flex; justify-content: space-around; border-left: 1px solid #e1e1dd; border-right: 1px solid #e1e1dd; }.status-metrics span { display: flex; flex-direction: column; gap: 7px; }.status-metrics small { color: #93938e; font-size: 9px; }.status-metrics strong { font-size: 14px; }.site-status > button ,.site-status > a { border: 0; border-bottom: 1px solid #111; background: transparent; padding: 0 0 5px; font-size: 9px; text-transform: uppercase; font-weight: 800; }

.settings-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.7fr); gap: 10px; }.settings-card { padding: 25px; }.setting-block { display: flex; flex-direction: column; gap: 9px; padding: 18px 0; border-top: 1px solid #e8e8e4; }.setting-block > span { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }.setting-block input { border: 1px solid #cfcfca; padding: 12px; outline: none; }.palette-row { display: flex; gap: 9px; }.palette { width: 90px; height: 45px; border: 2px solid transparent; background: #eee; padding: 4px; display: flex; }.palette.selected { border-color: #111; }.palette i { flex: 1; background: #0b0b0b; }.palette i:nth-child(2) { background: #fff; }.palette i:nth-child(3) { background: #aaa; }.palette.warm i:first-child { background: #352a25; }.palette.warm i:nth-child(2) { background: #f3e9df; }.palette.warm i:nth-child(3) { background: #bc6f4f; }.palette.cool i:first-child { background: #152335; }.palette.cool i:nth-child(2) { background: #f0f5f7; }.palette.cool i:nth-child(3) { background: #557c8e; }
.segmented { display: flex; border: 1px solid #ccc; width: fit-content; }.segmented button ,.segmented a { border: 0; border-right: 1px solid #ccc; background: white; padding: 9px 14px; font-size: 9px; }.segmented button:last-child ,.segmented a:last-child { border-right: 0; }.segmented button.active ,.segmented a.active { background: #111; color: #f7f6f4; }
.theme-preview { border-top: 1px solid #e8e8e4; padding-top: 18px; }.theme-preview > span { display: block; margin-bottom: 9px; font-size: 9px; color: #888; letter-spacing: .12em; }.theme-preview > div { height: 210px; background: rgba(0,0,0,.18); color: #f7f6f4; display: flex; align-items: center; gap: 25px; padding: 28px; position: relative; overflow: hidden; }.theme-preview b { align-self: flex-start; width: 26px; height: 26px; display: grid; place-items: center; background: white; color: black; }.theme-preview strong { font-size: 31px; line-height: .95; letter-spacing: -.06em; }.theme-preview strong em { font-family: Georgia, serif; font-weight: 400; }.theme-preview > div > i { position: absolute; right: -30px; width: 190px; height: 260px; background: linear-gradient(135deg,#333,#888); transform: rotate(12deg); opacity: .5; }
.toggle-row { width: 100%; border: 0; border-top: 1px solid #e4e4df; background: transparent; padding: 17px 0; display: flex; align-items: center; justify-content: space-between; text-align: left; }.toggle-row div { display: flex; flex-direction: column; gap: 4px; }.toggle-row strong { font-size: 10px; }.toggle-row small { color: #8d8d87; font-size: 9px; }.toggle-row > span { width: 32px; height: 17px; padding: 2px; border-radius: 10px; background: #ccc; transition: .2s; }.toggle-row > span i { display: block; width: 13px; height: 13px; border-radius: 50%; background: white; transition: transform .2s; }.toggle-row > span.on { background: #111; }.toggle-row > span.on i { transform: translateX(15px); }
.module-placeholder { min-height: 450px; padding: 70px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }.module-icon { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; background: #111; color: #f7f6f4; font-size: 21px; }.module-placeholder p { margin-top: 22px; color: #898984; font-size: 9px; font-weight: 800; letter-spacing: .16em; }.module-placeholder h2 { margin: 8px 0; font-size: 28px; }.module-placeholder > span { max-width: 460px; color: #777; font-size: 11px; line-height: 1.6; }.module-actions { display: flex; gap: 7px; margin-top: 27px; }.module-actions button ,.module-actions a { border: 1px solid #ccc; background: white; padding: 11px 15px; font-size: 9px; text-transform: uppercase; font-weight: 800; }.module-actions button:first-child ,.module-actions a:first-child { background: #111; color: #f7f6f4; border-color: #111; }

.upload-modal { position: fixed; inset: 0; z-index: 100; padding: 24px; display: grid; place-items: center; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); overflow-y: auto; }
.upload-dialog { width: min(820px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: #f5f5f2; color: #111; box-shadow: 0 25px 80px rgba(0,0,0,.42); }
.upload-dialog > header { min-height: 112px; padding: 25px 29px; display: flex; justify-content: space-between; align-items: flex-start; background: #101010; color: #f7f6f4; }
.upload-dialog > header p { margin: 0 0 6px; color: #777; font-size: 9px; font-weight: 900; letter-spacing: .16em; }.upload-dialog > header h2 { margin: 0 0 6px; font-size: 23px; }.upload-dialog > header span { color: #929292; font-size: 9px; }.upload-dialog > header button ,.upload-dialog > header a { border: 0; background: transparent; color: #f7f6f4; font-size: 27px; font-weight: 200; }
.upload-dialog section { padding: 22px 29px; }.modal-files { border-bottom: 1px solid #d9d9d4; }
.modal-label { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }.modal-label > span { font-size: 9px; font-weight: 900; letter-spacing: .11em; }.modal-label small { color: #888; font-size: 9px; }
.modal-files > button ,
.modal-files > a { width: 100%; min-height: 72px; padding: 12px 15px; border: 1px dashed #bdbdb7; background: white; display: flex; align-items: center; gap: 13px; text-align: left; }.modal-files > button > span ,.modal-files > a > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #111; color: #f7f6f4; font-size: 15px; }.modal-files > button > div ,.modal-files > a > div { display: flex; flex-direction: column; gap: 5px; }.modal-files > button strong ,.modal-files > a strong { font-size: 9px; }.modal-files > button small ,.modal-files > a small { color: #888; font-size: 9px; }.modal-files > button > b ,.modal-files > a > b { margin-left: auto; padding: 8px 11px; background: #eee; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.selected-files { margin-top: 8px; display: flex; gap: 5px; flex-wrap: wrap; }.selected-files span { padding: 6px 8px; background: #e2e2de; color: #666; font-size: 9px; }
.modal-destination > label:not(.smart-crop-option), .new-album-fields label { display: flex; flex-direction: column; gap: 7px; }.modal-destination label > span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.modal-destination select, .modal-destination input:not([type='checkbox']) { width: 100%; height: 41px; border: 1px solid #cfcfca; padding: 0 11px; background: white; outline: none; font-size: 9px; }
.new-category-field { margin-top: 10px; }.new-category-field input { border-color: #111 !important; box-shadow: 0 0 0 1px #111; }
.new-album-fields { display: grid; grid-template-columns: 1.6fr .7fr; gap: 8px; }
.upload-empty-album-hint { margin: 0; padding: 12px 29px 0; color: #85857f; font-size: 10px; }
.smart-crop-option { margin-top: 14px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #cfcfca; background: white; cursor: pointer; }.smart-crop-option input { width: 15px; height: 15px; accent-color: #111; }.smart-crop-option > span { display: flex; flex-direction: column; gap: 4px; }.smart-crop-option strong { font-size: 9px; }.smart-crop-option small { color: #888; font-size: 9px; }
.upload-dialog > footer { min-height: 68px; padding: 13px 29px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid #d5d5d0; background: white; color: #111; }.upload-dialog > footer button ,.upload-dialog > footer a { padding: 11px 15px; border: 1px solid #cfcfca; background: white; color: #111; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }.upload-dialog > footer .upload-submit { background: #111; border-color: #111; color: #f7f6f4; }.upload-submit span { margin-left: 18px; }
.category-manager { padding: 25px; }.category-admin-list { border-top: 1px solid #d5d5d0; }.category-admin-list article { min-height: 66px; display: grid; grid-template-columns: 54px minmax(0,1fr) 90px 90px 30px; align-items: center; gap: 14px; border-bottom: 1px solid #e0e0dc; }.category-admin-list img { width: 54px; height: 48px; object-fit: cover; border-radius: 5px; }.category-admin-list article > div { display: grid; gap: 4px; }.category-admin-list strong { font-size: 11px; }.category-admin-list small, .category-admin-list article > span { color: #85857f; font-size: 9px; }.category-admin-list article > button ,.category-admin-list article > a { border: 0; background: transparent; color: #777; }
.category-create-dialog { width: min(500px, 100%); overflow: hidden; border-radius: 10px; background: #f5f5f2; color: #111; box-shadow: 0 25px 80px rgba(0,0,0,.42); }.category-create-dialog > header { min-height: 112px; padding: 25px 29px; display: flex; justify-content: space-between; align-items: flex-start; background: #101010; color: #f7f6f4; }.category-create-dialog header p { margin: 0 0 6px; color: #777; font-size: 9px; font-weight: 900; letter-spacing: .16em; }.category-create-dialog header h2 { margin: 0 0 6px; font-size: 23px; }.category-create-dialog header span { color: #929292; font-size: 9px; }.category-create-dialog header button ,.category-create-dialog header a { border: 0; background: transparent; color: #f7f6f4; font-size: 27px; }.category-create-dialog > div { padding: 24px 29px; display: grid; gap: 14px; }.category-create-dialog label { display: grid; gap: 7px; }.category-create-dialog label > span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.category-create-dialog input, .category-create-dialog textarea { width: 100%; border: 1px solid #cfcfca; padding: 11px; background: #fff; outline: 0; font: inherit; font-size: 10px; }.category-create-dialog textarea { min-height: 90px; resize: vertical; }.category-create-dialog > div > small { color: #85857f; font-size: 9px; }.category-create-dialog > footer { padding: 14px 29px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #d5d5d0; background: #fff; }.category-create-dialog > footer button ,.category-create-dialog > footer a { padding: 11px 15px; border: 1px solid #cfcfca; background: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; }.category-create-dialog > footer button[type='submit'] ,.category-create-dialog > footer a[type='submit'] { border-color: #111; background: #111; color: #f7f6f4; }

.category-icon-options { margin: 0; padding: 0; border: 0; }.category-icon-options legend { margin-bottom: 9px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.category-icon-options > div { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }.category-icon-options button ,.category-icon-options a { position: relative; overflow: hidden; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #ddd; }.category-icon-options button.active ,.category-icon-options a.active { border-color: #111; }.category-icon-options img { width: 100%; height: 100%; object-fit: cover; }.category-icon-options button span ,.category-icon-options a span { position: absolute; inset: 0; display: grid; place-items: center; color: #f7f6f4; background: rgba(0,0,0,.38); font-size: 18px; opacity: 0; }.category-icon-options button.active span ,.category-icon-options a.active span { opacity: 1; }
.media-manager, .album-manager { padding: 25px; }.media-manager-title > div > span, .album-manager .panel-title > div > span { color: #85857f; font-size: 9px; }.media-toolbar { margin: 18px 0; padding: 7px; display: grid; grid-template-columns: minmax(220px,1fr) auto auto; align-items: center; gap: 10px; border: 1px solid #d8d8d3; border-radius: 7px; background: #f6f6f3; }.media-toolbar label { height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #ddd; border-radius: 5px; background: white; }.media-toolbar input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 10px; }.media-toolbar > div { display: flex; gap: 3px; }.media-toolbar button ,.media-toolbar a { height: 38px; padding: 0 13px; border: 0; border-radius: 5px; background: transparent; color: #777; font-size: 9px; font-weight: 800; text-transform: uppercase; }.media-toolbar button.active ,.media-toolbar a.active { background: #111; color: #f7f6f4; }.media-library-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 15px; }.media-library-grid article { position: relative; min-width: 0; }.media-thumb { position: relative; overflow: hidden; width: 100%; aspect-ratio: .82; padding: 0; border: 0; border-radius: 6px; background: #ddd; }.media-thumb img { width: 100%; height: 100%; object-fit: cover; }.media-thumb span { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #f7f6f4; opacity: 0; }.media-thumb:hover span { opacity: 1; }.media-library-grid article > div { min-width: 0; padding: 8px 24px 0 1px; display: grid; gap: 3px; }.media-library-grid strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.media-library-grid small { overflow: hidden; color: #85857f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.media-library-grid article > button:last-child ,.media-library-grid article > a:last-child { position: absolute; right: 0; bottom: 0; border: 0; background: transparent; color: #777; }.incremental-reveal-sentinel { grid-column: 1/-1; height: 1px; }
.empty-library { grid-column: 1/-1; min-height: 230px; place-content: center; text-align: center; }.empty-library span { color: #888; font-size: 9px; }
.admin-year-list { margin-top: 18px; border-top: 1px solid #dadad5; }.admin-year-list > article { border-bottom: 1px solid #dadad5; }.admin-year-row { width: 100%; min-height: 61px; display: grid; grid-template-columns: 1fr 120px 120px 30px; align-items: center; padding: 0 12px; border: 0; background: transparent; text-align: left; }.admin-year-row:hover { background: #f6f6f3; }.admin-year-row strong { font-size: 20px; }.admin-year-row span { color: #777; font-size: 9px; }.admin-year-row i { font-style: normal; font-size: 20px; text-align: center; }.admin-month-list { padding: 0 12px 14px 46px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }.admin-month-list button ,.admin-month-list a { min-height: 70px; padding: 13px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #d7d7d2; border-radius: 6px; background: #f7f7f4; text-align: left; }.admin-month-list span { font-size: 11px; font-weight: 800; }.admin-month-list small { grid-column: 1; color: #85857f; font-size: 9px; }.admin-month-list i { grid-column: 2; grid-row: 1/3; font-style: normal; }
.user-manager { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 16px; }.user-list-card, .permission-card { padding: 25px; }.user-role-list { margin-top: 17px; border-top: 1px solid #d8d8d3; }.user-role-list article { min-height: 76px; display: grid; grid-template-columns: 44px minmax(150px,1fr) 80px 150px 58px 40px; align-items: center; gap: 12px; border-bottom: 1px solid #e0e0dc; }.user-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #111; color: #f7f6f4; font-size: 10px; font-weight: 900; }.user-avatar.muted { background: #e5e5e0; color: #111; }.user-role-list article > div { display: grid; gap: 3px; }.user-role-list strong { font-size: 11px; }.user-role-list small, .user-role-list em { color: #7d7d78; font-size: 9px; font-style: normal; }.user-role-list article > i { color: #777; font-size: 9px; font-style: normal; text-align: right; }.role-badge { width: fit-content; padding: 5px 8px; border-radius: 999px; background: #e7e7e2; font-size: 9px; text-transform: uppercase; }.role-badge.master { background: #111; color: #f7f6f4; }.permission-head, .permission-row { min-height: 39px; display: grid; grid-template-columns: 1fr 60px 60px; align-items: center; border-bottom: 1px solid #e1e1dc; font-size: 9px; }.permission-head { margin-top: 15px; color: #888; text-transform: uppercase; }.permission-head b, .permission-row b { text-align: center; }.permission-row .yes { color: #148a39; }.permission-row .no { color: #aaa; }

@media (max-width: 1100px) { .media-library-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.user-manager { grid-template-columns: 1fr; }.admin-month-list { grid-template-columns: repeat(2,1fr); } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }.hero-copy { min-height: 620px; padding: 70px 7vw; }.hero-collage { min-height: 520px; }.album-card { height: 330px; }.photo-grid { grid-template-columns: repeat(3,1fr); }.stat-grid { grid-template-columns: repeat(2,1fr); }.admin-grid, .settings-layout { grid-template-columns: 1fr; }.site-status { grid-template-columns: 1fr auto; }.status-metrics { grid-column: 1/3; border: 0; border-top: 1px solid #ddd; padding-top: 15px; }.site-status > button ,.site-status > a { grid-column: 2; grid-row: 1; }
}

@media (max-width: 720px) {
  .topbar { height: 64px; padding: 0 18px; }.main-nav { display: none; }.admin-entry { font-size: 0; padding: 10px; }.admin-entry::after { content: "PAINEL"; font-size: 9px; }.hero-copy { padding: 55px 20px; min-height: 560px; }.hero h1 { font-size: 53px; }.search-box { height: auto; flex-wrap: wrap; }.search-icon { display: none; }.search-box input { height: 52px; flex-basis: 100%; border-bottom: 1px solid #ddd; padding: 0 15px; }.search-box select { flex: 1; }.search-box button ,.search-box a { height: 45px; min-width: 84px; }.hero-stats { gap: 27px; }.hero-collage { min-height: 390px; grid-template-columns: 68% 32%; }.content-wrap { width: calc(100vw - 32px); }.album-section { padding: 66px 0 80px; }.section-heading { align-items: flex-start; gap: 20px; }.section-heading h2 { font-size: 26px; }.section-heading > button ,.section-heading > a { font-size: 9px; }.album-grid { grid-template-columns: 1fr; }.album-card { height: 300px; }.recent-heading { padding-top: 65px; }.result-tools > span { display: none; }.photo-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 190px; }.photo-card.wide { grid-column: span 2; }.photo-meta h3 { font-size: 12px; }.cta-band { min-height: 360px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 35px; padding: 55px 20px; }.cta-band h2 { font-size: 45px; }footer { padding: 25px 20px; flex-direction: column; gap: 18px; align-items: flex-start; }.lightbox { grid-template-columns: 1fr; grid-template-rows: 55% 45%; overflow: auto; }.lightbox-image { padding: 25px; }.lightbox-info { border-left: 0; border-top: 1px solid #333; padding: 24px; }.lightbox-info h2 { font-size: 23px; }.lightbox-actions { margin-top: 20px; }.lightbox-nav.next { right: 15px; }
  .admin-shell { display: block; }.admin-sidebar { position: static; width: 100%; height: auto; padding: 15px; flex-direction: row; align-items: center; }.admin-brand { margin: 0 auto 0 0; }.workspace-pill, .admin-sidebar nav, .storage-card, .view-site { display: none; }.admin-main { display: block; }.admin-topbar { height: 55px; padding: 0 16px; justify-content: space-between; }.mobile-admin-label { display: block; margin-right: auto; font-size: 9px; letter-spacing: .14em; font-weight: 900; }.user-menu div, .user-menu b { display: none; }.admin-content { padding: 28px 15px 50px; }.admin-title-row { align-items: flex-start; }.admin-title-row > div > span { display: none; }.admin-title-row h1 { font-size: 25px; }.new-upload { font-size: 0; width: 38px; height: 38px; padding: 0; }.new-upload::after { content: "+"; font-size: 18px; }.stat-grid { grid-template-columns: 1fr 1fr; }.stat-card { min-height: 118px; padding: 15px; }.stat-card strong { font-size: 20px; }.quick-actions { grid-template-columns: 1fr; }.site-status { grid-template-columns: 1fr; }.status-metrics { grid-column: 1; gap: 12px; }.site-status > button ,.site-status > a { grid-column: 1; grid-row: auto; justify-self: start; }.settings-layout { grid-template-columns: 1fr; }.settings-card { padding: 18px; }.appearance-save-bar { margin: -18px -18px 16px; padding: 14px 18px; }.palette { width: 73px; }.theme-preview > div { height: 170px; }.theme-preview strong { font-size: 25px; }.module-actions { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 420px) { .hero h1 { font-size: 45px; }.hero-stats { justify-content: space-between; gap: 10px; }.hero-stats strong { font-size: 17px; }.photo-grid { grid-template-columns: 1fr; }.photo-card.wide { grid-column: span 1; }.photo-card.tall { grid-row: span 2; }.stat-grid { grid-template-columns: 1fr; } }

@media (max-width: 1100px) {
  .gallery-header-inner { gap: 18px; }.gallery-nav button ,.gallery-nav a { padding: 0 9px; }.updated-albums-grid, .thumbnail-grid { grid-template-columns: repeat(4, 1fr); }.archive-intro-inner { grid-template-columns: .75fr 1.25fr; gap: 35px; }
}

@media (max-width: 800px) {
  .gallery-header-inner { height: 66px; }.gallery-nav { display: none; }.archive-intro { padding: 35px 0; }.archive-intro-inner { grid-template-columns: 1fr; gap: 24px; }.archive-intro h1 { font-size: 31px; }.archive-stats-bar > div { flex-wrap: wrap; gap: 12px; padding: 12px 0; }.archive-stats-bar p { width: 100%; margin: 0; }.updated-albums-grid, .thumbnail-grid { grid-template-columns: repeat(3, 1fr); }.category-section .archive-section-title > p { display: none; }.popular-grid { grid-template-columns: repeat(2,1fr); }.gallery-footer > div { padding: 25px 0; flex-wrap: wrap; gap: 18px; }.gallery-footer p { order: 3; width: 100%; }
}

@media (max-width: 560px) {
  .gallery-header-inner { width: calc(100vw - 28px); }.gallery-topbar .admin-entry { font-size: 0; padding: 9px; }.gallery-topbar .admin-entry::after { content: "PAINEL"; font-size: 9px; }.archive-intro { padding: 30px 0; }.archive-intro h1 { font-size: 28px; }.archive-intro > div > div:first-child > span { display: block; line-height: 1.5; }.archive-search { height: auto; flex-wrap: wrap; }.archive-search > span { display: none; }.archive-search input { flex-basis: 100%; height: 46px; border-bottom: 1px solid #ddd; padding: 0 12px; }.archive-search select { flex: 1; }.archive-search button ,.archive-search a { height: 42px; }.archive-stats-bar i { display: none; }.archive-section { padding: 38px 0 43px; }.archive-section-title { align-items: flex-start; gap: 15px; }.archive-section-title h2 { font-size: 19px; }.archive-section-title > button ,.archive-section-title > a { white-space: nowrap; font-size: 9px; }.updated-albums-grid, .thumbnail-grid { grid-template-columns: repeat(2, 1fr); }.album-copy { min-height: 102px; }.category-list > button ,.category-list > a { grid-template-columns: 45px minmax(0,1fr) 45px 18px; gap: 10px; padding-left: 0; }.category-list img { width: 45px; height: 45px; }.folder-symbol, .category-list > button > b:first-of-type , .category-list > a > b:first-of-type { display: none; }.category-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.category-list > button > b ,.category-list > a > b { font-size: 9px; }.uploads-title { align-items: flex-end; }.uploads-tools > span, .uploads-tools .view-mode { display: none; }.thumbnail-card h3 { min-height: 30px; }.popular-grid { grid-template-columns: 1fr; }.popular-grid > button ,.popular-grid > a { height: 130px; }.gallery-footer > div > div:last-child { gap: 12px; }
}

@media (max-width: 800px) {
  .archive-intro { min-height: 420px; background-position: center, 90% 28%; background-size: cover, 330px auto; }.archive-intro-inner { grid-template-columns: minmax(0, 520px); }.archive-intro h1 { max-width: 430px; font-size: 48px; }.year-grid { grid-template-columns: repeat(2,1fr); }.browser-album-grid { grid-template-columns: repeat(3,1fr); justify-content: initial; }.album-photo-grid { grid-template-columns: repeat(4,1fr); }.browser-title { min-height: 150px; }.throwback-window { padding: 16px; }.category-year-buttons { grid-template-columns: repeat(4,1fr); }.popular-grid { grid-template-columns: repeat(3,1fr); justify-content: initial; }.popular-grid > button ,.popular-grid > a { height: auto; }
}

@media (max-width: 560px) {
  .archive-intro { min-height: 460px; align-items: flex-end; background-image: linear-gradient(0deg, #151515 0%, rgba(21,21,21,.96) 38%, rgba(21,21,21,.2) 82%), var(--arq-hero-image); background-position: center, 75% 18%; background-size: cover, 280px auto; }.archive-intro h1 { font-size: 42px; }.updated-albums-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.throwback-window { margin-left: -16px; width: calc(100% + 32px); padding: 15px; }.throwback-card { width: 138px; flex-basis: 138px; }.year-grid { grid-template-columns: 1fr; }.year-cover { height: 150px; }.browser-title { min-height: 175px; align-items: flex-start; flex-direction: column; gap: 22px; }.browser-title h1 { font-size: 38px; }.browser-album-grid { grid-template-columns: repeat(2,1fr); }.album-photo-grid { grid-template-columns: repeat(3,1fr); }.upload-modal { padding: 0; place-items: stretch; }.upload-dialog { max-height: 100vh; min-height: 100vh; }.upload-dialog > header { padding: 20px; }.upload-dialog section { padding: 18px; }.new-album-fields { grid-template-columns: 1fr; }.upload-dialog > footer { position: sticky; bottom: 0; padding: 12px 18px; }.back-to-gallery { font-size: 0; }.back-to-gallery::after { content: "← GALERIA"; font-size: 9px; }.category-row { grid-template-columns: 45px 30px minmax(0,1fr) 45px 20px; gap: 8px; padding-left: 0; }.category-row > img { width: 45px; height: 45px; }.category-row > b:first-of-type { display: none; }.category-years-panel { padding: 15px; }.category-years-panel > div:first-child { flex-direction: column; gap: 4px; }.category-year-buttons { grid-template-columns: repeat(2,1fr); }.popular-grid { grid-template-columns: repeat(2,1fr); }.popular-grid > button ,.popular-grid > a { height: auto; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

@media (max-width: 800px) { .archive-intro::before { background-position: 62% 22%; } }
@media (max-width: 560px) { .archive-intro::before { background-position: 58% 18%; } }

/* Demi Lovato Gallery — revisão visual 2026 */
:root { --paper: #f5f5f2; --muted: #696963; --accent: #d8ff3e; }
body { font-size: 15px; line-height: 1.5; }
.content-wrap { width: min(1120px, 92vw); }
.gallery-header-inner { width: min(1180px, 94vw); height: 82px; }
.brand { gap: 12px; font-size: 18px; letter-spacing: -.045em; }
.brand-mark { width: 36px; height: 36px; border-radius: 5px; font-size: 16px; }
.gallery-brand small { margin-top: 3px; color: #858585; font-size: 9px; letter-spacing: .22em; }
.gallery-nav button ,
.gallery-nav a { padding: 0 16px; font-size: 12px; }
.gallery-nav button span ,
.gallery-nav a span { min-width: 20px; height: 20px; font-size: 10px; }
.gallery-topbar .admin-entry { padding: 11px 15px; font-size: 10px; }

.archive-intro { min-height: 610px; padding: 76px 0; }
.archive-intro::before { background-position: center 27%; filter: grayscale(100%) contrast(1.1); }
.archive-intro::after { background: linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.78) 40%, rgba(5,5,5,.25) 70%, rgba(5,5,5,.1) 100%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 45%); }
.archive-intro-inner { grid-template-columns: minmax(0, 690px); gap: 30px; }
.archive-intro p { width: fit-content; margin: 0 0 20px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; background: rgba(0,0,0,.24); color: #f3f3f3; font-size: 11px; letter-spacing: .16em; }
.archive-intro h1 { margin: 0 0 20px; max-width: 700px; font-size: clamp(62px, 7vw, 94px); line-height: .88; letter-spacing: -.07em; }
.archive-intro > div > div:first-child > span { display: block; max-width: 610px; color: #e0e0e0; font-size: 17px; line-height: 1.65; }
.hero-quicklinks { margin-top: 24px; display: flex; align-items: center; gap: 13px; color: #d0d0d0; font-size: 12px; }
.hero-quicklinks strong { color: var(--accent); font-size: 13px; letter-spacing: .08em; }
.hero-quicklinks i { width: 1px; height: 16px; background: rgba(255,255,255,.35); }
.archive-search { height: 62px; max-width: 680px; margin-top: 8px; border: 0; box-shadow: 0 14px 42px rgba(0,0,0,.28); }
.archive-search > span { margin-left: 20px; font-size: 25px; }
.archive-search input { padding: 0 16px; font-size: 14px; }
.archive-search select { width: 180px; height: 36px; font-size: 12px; }
.archive-search button ,
.archive-search a { padding: 0 23px; font-size: 11px; }

.archive-stats-bar > div { min-height: 72px; gap: 25px; }
.archive-stats-bar span { font-size: 11px; letter-spacing: .08em; }
.archive-stats-bar strong { margin-right: 6px; font-size: 17px; }
.archive-stats-bar i { height: 20px; }
.archive-stats-bar p { font-size: 11px; }
.archive-stats-bar p b { width: 7px; height: 7px; }

.archive-content { padding-bottom: 78px; }
.archive-section { padding: 48px 0 54px; }
.archive-section-title { margin-bottom: 28px; }
.archive-section-title > div > span { font-size: 10px; letter-spacing: .17em; }
.archive-section-title h2 { margin-top: 8px; font-size: 32px; line-height: 1.12; }
.archive-section-title > button, .uploads-tools > button:not(.view-mode) ,
.archive-section-title > a, .uploads-tools > a:not(.view-mode) { padding-bottom: 7px; font-size: 10px; }
.updated-albums-grid, .popular-grid, .browser-album-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); justify-content: stretch; gap: 14px; }
.updated-album, .popular-grid > button, .browser-album-grid > button , .popular-grid > a, .browser-album-grid > a { box-shadow: 0 4px 14px rgba(0,0,0,.045); transition: transform .22s, box-shadow .22s; }
.updated-album:hover, .popular-grid > button:hover, .browser-album-grid > button:hover , .popular-grid > a:hover, .browser-album-grid > a:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.11); }
.album-copy { min-height: 118px; padding: 14px; }
.album-copy small { font-size: 9px; }
.album-copy strong { margin-top: 8px; font-size: 14px; line-height: 1.35; }
.album-copy em { font-size: 9px; }
.updated-album > b { right: 13px; bottom: 12px; font-size: 11px; }
.album-thumb i { right: 9px; bottom: 9px; padding: 6px 8px; font-size: 9px; }

.category-section .archive-section-title > p { width: 265px; font-size: 9px; }
.category-row { min-height: 92px; grid-template-columns: 72px 38px minmax(0,1fr) 72px 72px 28px; gap: 16px; padding: 12px; }
.category-row > img { width: 72px; height: 64px; border-radius: 5px; }
.folder-symbol { width: 30px; height: 30px; font-size: 18px; }
.category-copy { gap: 6px; }
.category-copy strong { font-size: 15px; }
.category-copy small { color: #70706a; font-size: 12px; line-height: 1.45; }
.category-row > b { font-size: 12px; }
.category-expand-arrow { font-size: 15px; }
.category-years-panel { padding: 23px 24px 25px 138px; }
.category-years-panel > div:first-child span { font-size: 10px; }
.category-years-panel > div:first-child small { font-size: 11px; }
.category-year-buttons button ,
.category-year-buttons a { min-height: 68px; padding: 11px 12px; }
.category-year-buttons strong { font-size: 16px; }
.category-year-buttons small { font-size: 9px; }

.throwback-section .uploads-title > div > p { font-size: 12px; }
.throwback-window { padding: 26px; }
.throwback-track { gap: 14px; }
.throwback-card { width: 170px; flex-basis: 170px; }
.throwback-card > div { min-height: 94px; padding: 13px; }
.throwback-card small { font-size: 9px; }
.throwback-card h3 { margin: 7px 0; font-size: 13px; }
.throwback-card p { font-size: 9px; }
.throwback-card > button > span ,
.throwback-card > a > span { padding: 9px; font-size: 9px; }
.throwback-hint { margin-top: 18px; font-size: 10px; }
.popular-copy { min-height: 118px; padding: 14px; }
.popular-copy strong { font-size: 14px; }
.popular-copy small { font-size: 9px; }
.popular-rank { left: 10px; top: 10px; width: 32px; height: 32px; font-size: 14px; }

.gallery-footer > div { min-height: 125px; }
.gallery-footer p, .gallery-footer button , .gallery-footer a { font-size: 10px; }

.archive-breadcrumb { font-size: 11px; }
.browser-title p { font-size: 10px; }
.browser-title > div > span { font-size: 14px; }
.browser-title > button ,
.browser-title > a { font-size: 10px; }
.year-copy strong { font-size: 14px; }
.year-copy small { font-size: 10px; }
.browser-album-grid > button > div ,
.browser-album-grid > a > div { min-height: 122px; padding: 14px; }
.browser-album-grid small { font-size: 9px; }
.browser-album-grid strong { margin-top: 7px; font-size: 13px; }
.browser-album-grid em { font-size: 9px; }
.album-photo-grid article p { font-size: 10px; }

.month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; padding-top: 24px; }
.month-grid > button ,
.month-grid > a { min-height: 116px; display: grid; grid-template-columns: 72px 1fr 18px; align-items: center; gap: 12px; border: 1px solid #d6d6d1; border-radius: 5px; padding: 10px; background: white; color: #111; text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,.04); transition: transform .2s, border-color .2s, box-shadow .2s; }
.month-grid > button:hover ,
.month-grid > a:hover { transform: translateY(-3px); border-color: #a8a8a2; box-shadow: 0 11px 24px rgba(0,0,0,.09); }
.month-preview { width: 72px; height: 94px; position: relative; overflow: hidden; border-radius: 4px; background: #ddd; }
.month-preview img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; animation: month-image-in .55s ease both; }
.month-preview b { position: absolute; left: 6px; bottom: 6px; padding: 3px 5px; border-radius: 3px; background: rgba(0,0,0,.76); color: #f7f6f4; font-size: 9px; letter-spacing: .1em; }
.month-grid > button > div ,
.month-grid > a > div { display: flex; flex-direction: column; gap: 5px; }
.month-grid strong { font-size: 14px; }
.month-grid small { color: #797973; font-size: 9px; }
.month-grid em { color: #a0a09a; font-size: 9px; font-style: normal; line-height: 1.25; }
.month-grid i { color: #777; font-size: 14px; font-style: normal; text-align: right; }

.month-browser-title { min-height: 190px; }
.browser-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.album-view-switch { display: flex; overflow: hidden; border: 1px solid #c9c9c4; border-radius: 5px; background: white; }
.album-view-switch button ,
.album-view-switch a { min-width: 88px; height: 39px; border: 0; border-right: 1px solid #d4d4cf; background: white; color: #74746e; font-size: 12px; font-weight: 800; }
.album-view-switch button:last-child ,
.album-view-switch a:last-child { border-right: 0; }
.album-view-switch button.active ,
.album-view-switch a.active { background: #111; color: #f7f6f4; }
.album-view-switch button span ,
.album-view-switch a span { margin-left: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.browser-back { border: 0; border-bottom: 1px solid #222; padding: 0 0 6px; background: transparent; color: #111; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

@keyframes month-image-in { from { opacity: .35; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }

.browser-album-grid.is-icons { grid-template-columns: repeat(6, minmax(0, 128px)); justify-content: center; gap: 12px; }
.browser-album-grid.is-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.browser-album-grid.is-list > button ,
.browser-album-grid.is-list > a { display: grid; grid-template-columns: 76px 1fr; min-height: 96px; }
.browser-album-grid.is-list > button > span ,
.browser-album-grid.is-list > a > span { width: 76px; height: 96px; aspect-ratio: auto; }
.browser-album-grid.is-list > button > div ,
.browser-album-grid.is-list > a > div { min-height: 96px; padding: 10px 12px; }
.browser-album-grid.is-list strong { font-size: 12px; }
.browser-album-grid.is-list em { align-self: flex-start; margin-top: auto; }

.photo-size-switch { display: flex; overflow: hidden; border: 1px solid #c9c9c4; border-radius: 5px; background: white; }
.photo-size-switch button ,
.photo-size-switch a { min-width: 72px; height: 38px; border: 0; border-right: 1px solid #d4d4cf; background: white; color: #74746e; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.photo-size-switch button:last-child ,
.photo-size-switch a:last-child { border-right: 0; }
.photo-size-switch button.active ,
.photo-size-switch a.active { background: #111; color: #f7f6f4; }
.album-photo-grid.size-large { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.album-photo-grid.size-medium { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 15px 8px; }
.album-photo-grid.size-small { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 13px 7px; }
.album-photo-grid.size-medium article p, .album-photo-grid.size-small article p { font-size: 9px; }
.album-photo-grid.size-small article > button:nth-child(2) ,
.album-photo-grid.size-small article > a:nth-child(2) { width: 21px; height: 21px; font-size: 10px; }

/* Calibração tipográfica: um nível abaixo, sem voltar a ficar pequena */
body { font-size: 14px; }
.gallery-brand { flex-shrink: 0; }
.gallery-brand > span:not(.brand-mark):last-child { display: block; min-width: max-content; white-space: nowrap; }
.brand { font-size: 17px; }
.gallery-brand small { font-size: 9px; white-space: nowrap; }
.gallery-nav button ,
.gallery-nav a { font-size: 11px; }
.gallery-topbar .admin-entry { font-size: 9px; }
.archive-intro h1 { font-size: clamp(58px, 6.4vw, 86px); }
.archive-intro > div > div:first-child > span { font-size: 16px; }
.hero-quicklinks { font-size: 11px; }
.hero-quicklinks strong { font-size: 12px; }
.archive-search input { font-size: 13px; }
.archive-search select { font-size: 11px; }
.archive-stats-bar span, .archive-stats-bar p { font-size: 10px; }
.archive-stats-bar strong { font-size: 16px; }
.archive-section-title h2 { font-size: 29px; }
.archive-section-title > button, .uploads-tools > button:not(.view-mode) ,
.archive-section-title > a, .uploads-tools > a:not(.view-mode) { font-size: 9px; }
.album-copy strong, .popular-copy strong { font-size: 13px; }
.category-copy strong { font-size: 14px; }
.category-copy small { font-size: 11px; }
.throwback-card h3 { font-size: 12px; }
.browser-title h1 { font-size: clamp(34px, 4vw, 58px); }
.browser-title > div > span { font-size: 13px; }
.browser-album-grid strong { font-size: 12px; }
.admin-sidebar nav button ,
.admin-sidebar nav a { font-size: 12px; }
.admin-title-row h1 { font-size: 33px; }
.admin-title-row > div > span { font-size: 13px; }
.stat-card strong { font-size: 28px; }
.panel-title h2 { font-size: 19px; }
.dropzone strong { font-size: 13px; }

.month-browser-title { min-height: 158px; }
.photo-browser-title { min-height: 132px; gap: 24px; }
.photo-browser-title > div:first-child { min-width: 0; flex: 1; }
.photo-browser-title h1 { max-width: 100%; margin-bottom: 7px; overflow: hidden; font-size: clamp(25px, 2.45vw, 35px); line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; }
.photo-browser-actions { flex: 0 0 auto; }

/* Ações rápidas do álbum: upload direto no álbum aberto + seleção em lote. */
.photo-browser-tools .arq-album-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.photo-browser-tools .arq-add-photos,
.photo-browser-tools .arq-selec-toggle {
  box-sizing: border-box;
  min-height: 35px;
  margin: 0;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1d1d1d;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}
.photo-browser-tools .arq-add-photos {
  background: #f46fb5;
  border-color: #f46fb5;
  color: #fff;
}
.photo-browser-tools .arq-add-photos:hover,
.photo-browser-tools .arq-add-photos:focus-visible {
  background: #1d1d1d;
  border-color: #1d1d1d;
  color: #fff;
}
.photo-browser-tools .arq-add-photos span {
  margin-right: 6px;
  font-size: 14px;
  line-height: 1;
}

/* Visualizador com a galeria desfocada ao fundo */
.lightbox { display: block; background: rgba(243,243,240,.58); color: #111; backdrop-filter: blur(22px) saturate(.78); -webkit-backdrop-filter: blur(22px) saturate(.78); }
.lightbox-image { width: 100%; height: 100vh; padding: 40px 80px 92px; display: grid; place-items: center; }
.lightbox-image img { width: auto; max-width: min(920px, calc(100vw - 180px)); max-height: calc(100vh - 135px); border-radius: 5px; object-fit: contain; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.lightbox-close { right: 20px; top: 16px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); color: #111; box-shadow: 0 5px 18px rgba(0,0,0,.15); font-size: 24px; }
.lightbox-nav { border-color: rgba(0,0,0,.2); background: rgba(255,255,255,.9); color: #111; box-shadow: 0 4px 15px rgba(0,0,0,.13); }
.lightbox-nav.previous { left: 20px; }
.lightbox-nav.next { right: 20px; }
.lightbox-quick-actions { position: fixed; z-index: 3; left: 50%; bottom: 20px; display: flex; gap: 7px; transform: translateX(-50%); padding: 6px; border: 1px solid rgba(0,0,0,.12); border-radius: 5px; background: rgba(255,255,255,.93); box-shadow: 0 10px 30px rgba(0,0,0,.13); }
.lightbox-quick-actions button ,
.lightbox-quick-actions a { min-height: 39px; padding: 0 16px; border: 1px solid #d0d0cb; border-radius: 4px; background: white; color: #111; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.lightbox-quick-actions button.primary ,
.lightbox-quick-actions a.primary { border-color: #111; background: #111; color: #f7f6f4; }
.lightbox-details-toggle { position: fixed; z-index: 5; right: 74px; top: 18px; min-width: 114px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #d1d1cc; border-radius: 5px; background: rgba(255,255,255,.94); color: #111; font-size: 15px; box-shadow: 0 5px 18px rgba(0,0,0,.12); transition: right .28s ease; }
.lightbox-details-toggle span { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.lightbox-details-toggle.is-open { right: 340px; }
.lightbox-info { position: fixed; z-index: 4; inset: 0 0 0 auto; width: 320px; padding: 72px 25px 28px; border-left: 1px solid #d4d4cf; background: rgba(250,250,248,.97); color: #111; transform: translateX(100%); transition: transform .28s ease; box-shadow: -12px 0 38px rgba(0,0,0,.1); }
.lightbox-info.is-open { transform: translateX(0); }
.lightbox-info > p { color: #74746e; font-size: 9px; }
.lightbox-info h2 { margin: 9px 0 0; font-size: 22px; }
.lightbox-info dl { margin-top: 22px; border-top-color: #d8d8d3; }
.lightbox-info dl div { border-bottom-color: #d8d8d3; padding: 13px 0; font-size: 9px; }
.lightbox-info dt { color: #85857f; }

/* Nova capa: foto inteira, preenchimento desfocado e fumaça mais viva */
.archive-intro { margin-bottom: 0; }
.archive-intro::before { background-image: var(--arq-hero-image); background-position: center; background-size: cover; filter: grayscale(100%) contrast(1.08) brightness(.48) blur(22px); transform: scale(1.12); animation: none; }
.archive-intro::after { z-index: 1; background: linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.78) 38%, rgba(5,5,5,.2) 68%, rgba(5,5,5,.08) 100%), linear-gradient(0deg, rgba(0,0,0,.64) 0%, transparent 48%, rgba(0,0,0,.16) 100%); }
.hero-photo { position: absolute; z-index: 1; inset: 0; background: var(--arq-hero-image) center center / auto 100% no-repeat; filter: grayscale(100%) contrast(1.1) brightness(.72); animation: hero-camera-drift 9s ease-in-out infinite alternate; }
.archive-intro-inner { z-index: 3; }
.hero-smoke { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; opacity: .92; }
.hero-smoke i { position: absolute; width: 58vw; height: 27vw; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.4) 0%, rgba(225,225,225,.22) 30%, rgba(180,180,180,.08) 52%, transparent 72%); filter: blur(28px); will-change: transform, opacity; }
.hero-smoke i:nth-child(1) { left: 22%; bottom: -15%; animation: smoke-drift-a 7s ease-in-out infinite alternate; }
.hero-smoke i:nth-child(2) { left: 48%; bottom: -20%; animation: smoke-drift-b 8.5s ease-in-out -3s infinite alternate; }
.hero-smoke i:nth-child(3) { left: -12%; bottom: -22%; opacity: .76; animation: smoke-drift-c 9.5s ease-in-out -1s infinite alternate; }
.hero-smoke i:nth-child(4) { right: -18%; top: 15%; width: 44vw; height: 21vw; opacity: .62; animation: smoke-drift-d 7.8s ease-in-out -4s infinite alternate; }
@keyframes hero-camera-drift { from { transform: scale(1.005) translate3d(-.15%, 0, 0); } to { transform: scale(1.025) translate3d(.35%, -.2%, 0); } }
@keyframes smoke-drift-a { from { transform: translate3d(-10%, 20%, 0) scale(.72) rotate(-7deg); opacity: .26; } to { transform: translate3d(16%, -22%, 0) scale(1.3) rotate(8deg); opacity: .92; } }
@keyframes smoke-drift-b { from { transform: translate3d(16%, 15%, 0) scale(.68) rotate(8deg); opacity: .25; } to { transform: translate3d(-20%, -28%, 0) scale(1.38) rotate(-10deg); opacity: .86; } }
@keyframes smoke-drift-c { from { transform: translate3d(-8%, 24%, 0) scale(.7); opacity: .2; } to { transform: translate3d(28%, -20%, 0) scale(1.3); opacity: .78; } }
@keyframes smoke-drift-d { from { transform: translate3d(18%, -10%, 0) scale(.76); } to { transform: translate3d(-24%, 22%, 0) scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .hero-photo, .hero-smoke i { animation: none !important; } }

/* Estatísticas sobrepostas na foto com vidro desfocado */
.archive-stats-bar { position: relative; z-index: 6; width: min(1120px, 92vw); margin: -82px auto 0; border: 1px solid rgba(255,255,255,.22); border-radius: 5px 5px 0 0; background: rgba(18,18,18,.46); color: #f7f6f4; backdrop-filter: blur(18px) saturate(.8); -webkit-backdrop-filter: blur(18px) saturate(.8); box-shadow: 0 -8px 28px rgba(0,0,0,.12); }
.archive-stats-bar > div { width: 100%; padding: 0 20px; }
.archive-stats-bar span, .archive-stats-bar p { color: #d0d0cc; }
.archive-stats-bar strong { color: #f7f6f4; }
.archive-stats-bar i { background: rgba(255,255,255,.25); }
.archive-content { padding-top: 42px; }

.language-switcher { height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid #333; border-radius: 5px; background: #151515; }
.language-switcher > span { font-size: 11px; }
.language-switcher select { border: 0; outline: 0; background: transparent; color: #f7f6f4; font-size: 9px; font-weight: 900; }
.language-switcher option { color: #111; }
.login-entry, .logout-entry { height: 34px; padding: 0 11px; border: 1px solid #3a3a3a; border-radius: 5px; background: transparent; color: #d0d0d0; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.login-entry:hover { border-color: white; color: #f7f6f4; }
.logout-entry { border-color: #2c2c2c; color: #8b8b8b; }
.admin-logout { border: 0; background: transparent; color: #777; margin: 10px 0 0; padding: 0; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

/* Cabeçalho em vidro sobre a fotografia */
.gallery-topbar { border-bottom: 0; transition: background .25s, box-shadow .25s; }
.gallery-topbar.hero-mode { position: absolute; inset: 0 0 auto; background: linear-gradient(180deg, rgba(0,0,0,.42), transparent); }
.gallery-topbar.archive-mode { position: sticky; background: rgba(12,12,12,.84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.gallery-header-inner { width: min(1220px, 94vw); height: 92px; gap: 15px; }
.gallery-brand { margin-right: 14px; padding: 7px 13px 7px 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(18,18,18,.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gallery-brand .brand-mark { width: 40px; height: 40px; border-radius: 50%; }
.gallery-nav { height: 52px; align-self: auto; align-items: center; padding: 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(28,24,22,.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 26px rgba(0,0,0,.12); }
.gallery-nav button ,
.gallery-nav a { height: 40px; border: 0; border-radius: 999px; padding: 0 18px; color: #deddd9; font-size: 10px; }
.gallery-nav button:hover, .gallery-nav button.active ,
.gallery-nav a:hover, .gallery-nav a.active { border: 0; background: rgba(255,255,255,.14); color: #f7f6f4; }
.language-switcher { height: 42px; border-color: rgba(255,255,255,.2); border-radius: 999px; padding: 0 12px; background: rgba(20,20,20,.42); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.login-entry, .logout-entry, .gallery-topbar .admin-entry { height: 42px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; padding: 0 16px; background: rgba(255,255,255,.92); color: #111; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.gallery-topbar .admin-entry .status-dot { background: #22a447; }
.logout-entry { background: rgba(20,20,20,.45); color: #ddd; }
.archive-intro { padding-top: 126px; }
.archive-intro h1 { max-width: none; font-size: clamp(42px, 5vw, 72px); white-space: nowrap; }

@media (max-width: 980px) {
  .gallery-header-inner { height: 78px; }
  .gallery-nav { display: none; }
  .gallery-brand { margin-right: auto; }
  .archive-intro { padding-top: 108px; }
  .archive-intro h1 { font-size: clamp(36px, 6vw, 58px); }
}
@media (max-width: 560px) {
  .gallery-header-inner { width: calc(100vw - 22px); gap: 7px; }
  .gallery-brand { padding-right: 10px; }
  .gallery-brand .brand-mark { width: 34px; height: 34px; }
  .brand { font-size: 15px; }
  .language-switcher { height: 38px; padding: 0 8px; }
  .login-entry, .logout-entry, .gallery-topbar .admin-entry { height: 38px; padding: 0 10px; font-size: 9px; }
  .gallery-topbar .admin-entry { font-size: 0; }
  .gallery-topbar .admin-entry::after { content: "PAINEL"; font-size: 9px; }
  .archive-intro { padding-top: 102px; }
  .archive-intro h1 { font-size: clamp(25px, 8.3vw, 42px); letter-spacing: -.055em; }
}

/* Hero editorial 2026 — composição central, fluida e sem emendas */
.gallery-topbar.hero-mode { background: transparent; }
.gallery-header-inner { justify-content: center; }
.gallery-brand { margin-right: 0; }
.brand, .gallery-nav button, .login-entry, .logout-entry, .gallery-topbar .admin-entry , .gallery-nav a{ font-weight: 500; }
.brand-mark { font-weight: 600; }
.archive-intro { min-height: 720px; padding: 128px 0 128px; isolation: isolate; background: #08080b; }
.archive-intro::before { inset: -10%; background-image: var(--arq-hero-image); background-size: cover; background-position: center; filter: grayscale(100%) contrast(1.08) brightness(.46) blur(48px); opacity: .9; transform: scale(1.16); animation: hero-color-pan 10s ease-in-out infinite alternate; }
.archive-intro::after { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.04), transparent 32%), linear-gradient(90deg, rgba(7,7,10,.86) 0%, rgba(7,7,10,.2) 30%, rgba(7,7,10,.16) 70%, rgba(7,7,10,.84) 100%), linear-gradient(0deg, rgba(5,5,8,.94) 0%, transparent 38%, rgba(5,5,8,.22) 100%); }
.hero-photo { inset: 0 10%; background-size: auto 100%; background-position: center; filter: grayscale(35%) saturate(1.12) contrast(1.05) brightness(.7); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 84%, transparent 100%); animation: hero-camera-drift 7s ease-in-out infinite alternate; }
.hero-smoke { opacity: 1; }
.hero-smoke::before, .hero-smoke::after { content: ""; position: absolute; width: 52vw; height: 52vw; border-radius: 50%; filter: blur(54px); opacity: .42; }
.hero-smoke::before { left: -8%; top: 8%; background: radial-gradient(circle, rgba(132,61,255,.75), transparent 66%); animation: aura-orbit-a 8s ease-in-out infinite alternate; }
.hero-smoke::after { right: -8%; bottom: -34%; background: radial-gradient(circle, rgba(255,52,151,.62), rgba(255,111,57,.28) 34%, transparent 67%); animation: aura-orbit-b 9s ease-in-out infinite alternate; }
.archive-intro-inner { width: min(1040px, 88vw); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; }
.archive-intro-inner > div:first-child { display: flex; flex-direction: column; align-items: center; }
.archive-intro h1 { margin: 0; max-width: none; color: #f7f6f4; font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 6.2vw, 92px); font-weight: 400; font-style: italic; line-height: .94; letter-spacing: -.055em; white-space: nowrap; text-shadow: 0 8px 42px rgba(0,0,0,.38); animation: title-glow 5s ease-in-out infinite alternate; }
.archive-intro h1::after { content: ""; display: block; width: 82px; height: 2px; margin: 22px auto 0; border-radius: 2px; background: linear-gradient(90deg, transparent, #d9ff3e, #d9b8ff, transparent); box-shadow: 0 0 24px rgba(216,255,62,.46); }
.archive-intro > div > div:first-child > span { max-width: 650px; margin-top: 22px; color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.6; }
.hero-quicklinks { justify-content: center; margin-top: 18px; color: rgba(255,255,255,.66); font-size: 10px; }
.hero-quicklinks strong { color: #e7ff7d; font-size: 10px; font-weight: 600; }
.archive-search { width: min(690px, 100%); height: 58px; margin: 4px auto 0; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: 0 18px 60px rgba(0,0,0,.24); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.archive-search input { font-weight: 400; }
.archive-search select { border-radius: 999px; background: rgba(0,0,0,.04); font-weight: 400; }
.archive-search button ,
.archive-search a { margin: 6px; border-radius: 999px; font-weight: 500; letter-spacing: .03em; }
.archive-stats-bar { width: min(940px, 88vw); margin: -82px auto 0; border: 0; border-radius: 18px; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.archive-stats-bar > div { min-height: 116px; display: grid; grid-template-columns: repeat(4, 1fr) 1.35fr; gap: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(14,14,18,.44); backdrop-filter: blur(24px) saturate(1.15); -webkit-backdrop-filter: blur(24px) saturate(1.15); box-shadow: 0 22px 55px rgba(0,0,0,.18); }
.archive-stats-bar > div > i { display: none; }
.archive-stats-bar span, .archive-stats-bar p { min-width: 0; height: 80px; margin: 0; padding: 13px 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.62); font-size: 9px; font-weight: 400; letter-spacing: .1em; }
.archive-stats-bar strong { margin: 0 0 4px; color: #f7f6f4; font-size: 20px; font-weight: 400; letter-spacing: -.02em; }
.archive-stats-bar p { flex-direction: row; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: 9px; letter-spacing: 0; }
.archive-stats-bar p b { flex: 0 0 auto; margin: 0; box-shadow: 0 0 16px rgba(40,190,85,.72); }
.archive-content { padding-top: 62px; }
@keyframes hero-color-pan { from { transform: scale(1.16) translate3d(-1.5%, -.8%, 0); filter: grayscale(30%) saturate(1.18) brightness(.44) blur(48px); } to { transform: scale(1.22) translate3d(1.6%, .8%, 0); filter: grayscale(5%) saturate(1.55) brightness(.52) blur(52px); } }
@keyframes aura-orbit-a { from { transform: translate3d(-6%, -4%, 0) scale(.85); } to { transform: translate3d(20%, 12%, 0) scale(1.18); } }
@keyframes aura-orbit-b { from { transform: translate3d(8%, 8%, 0) scale(.86); } to { transform: translate3d(-18%, -12%, 0) scale(1.16); } }
@keyframes title-glow { from { text-shadow: 0 8px 42px rgba(0,0,0,.38), 0 0 0 rgba(211,161,255,0); } to { text-shadow: 0 8px 42px rgba(0,0,0,.38), 0 0 36px rgba(211,161,255,.18); } }

@media (max-width: 980px) {
  .archive-intro { min-height: 690px; padding-top: 114px; }
  .archive-intro h1 { font-size: clamp(43px, 8vw, 70px); }
  .archive-stats-bar > div { grid-template-columns: repeat(4, 1fr); }
  .archive-stats-bar p { grid-column: 1 / -1; height: 48px; justify-content: center; }
}
@media (max-width: 560px) {
  .archive-intro { min-height: 720px; padding: 112px 0 128px; align-items: center; }
  .hero-photo { inset: 0 -16%; background-position: 60% center; -webkit-mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent); mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent); }
  .archive-intro-inner { width: calc(100vw - 32px); }
  .archive-intro h1 { max-width: 100%; font-size: clamp(31px, 10vw, 46px); white-space: normal; }
  .archive-intro > div > div:first-child > span { font-size: 13px; }
  .archive-search { border-radius: 18px; }
  .archive-search button ,
  .archive-search a { border-radius: 12px; }
  .archive-stats-bar { width: calc(100vw - 24px); margin-top: -105px; }
  .archive-stats-bar > div { min-height: auto; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 7px; }
  .archive-stats-bar span { height: 68px; padding: 10px; }
  .archive-stats-bar strong { font-size: 17px; }
  .archive-stats-bar p { grid-column: 1 / -1; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .archive-intro::before, .hero-smoke::before, .hero-smoke::after, .archive-intro h1 { animation: none !important; } }

/* Direção final do hero: fotografia P&B, cor apenas nos degradês */
.archive-intro { min-height: 700px; background: #ececef; }
.archive-intro::before { inset: -8%; background-image: var(--arq-hero-image); background-size: cover; background-position: center; filter: grayscale(100%) brightness(.9) contrast(.9) blur(34px); opacity: .72; animation: final-bg-drift 9s ease-in-out infinite alternate; }
.archive-intro::after { background: radial-gradient(circle at 12% 34%, rgba(111,72,255,.28), transparent 34%), radial-gradient(circle at 88% 55%, rgba(255,72,151,.25), transparent 35%), linear-gradient(90deg, rgba(10,10,15,.74) 0%, rgba(10,10,15,.12) 32%, rgba(10,10,15,.1) 68%, rgba(10,10,15,.72) 100%), linear-gradient(0deg, rgba(8,8,12,.88) 0%, transparent 42%, rgba(8,8,12,.18) 100%); background-size: 120% 120%, 125% 125%, 100% 100%, 100% 100%; animation: final-gradient-flow 7s ease-in-out infinite alternate; }
.hero-photo { inset: 0; background-image: var(--arq-hero-image); background-size: cover; background-position: center; filter: grayscale(100%) contrast(1.03) brightness(.66); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 6%, black 16%, black 84%, rgba(0,0,0,.72) 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 6%, black 16%, black 84%, rgba(0,0,0,.72) 94%, transparent 100%); }
.gallery-brand { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.gallery-brand .brand-mark { border: 1px solid rgba(255,255,255,.72); background: rgba(255,255,255,.94); }
.archive-intro h1 { display: flex; flex-direction: column; align-items: center; gap: 7px; font-style: normal; animation: none; }
.archive-intro h1::after { display: none; }
.archive-intro h1 strong { color: #f7f6f4; font-family: Arial, Helvetica, sans-serif; font-size: clamp(53px, 6.7vw, 98px); font-weight: 400; line-height: .88; letter-spacing: -.065em; text-shadow: 0 8px 36px rgba(0,0,0,.3); }
.archive-intro h1 small { color: rgba(255,255,255,.8); font-family: Georgia, "Times New Roman", serif; font-size: clamp(14px, 1.25vw, 20px); font-weight: 400; letter-spacing: .48em; line-height: 1; }
.archive-intro > div > div:first-child > span { max-width: none; margin-top: 18px; font-size: 12px; white-space: nowrap; }
.archive-search button ,
.archive-search a { font-weight: 800; }
.archive-stats-bar { width: min(980px, 90vw); margin-top: -54px; }
.archive-stats-bar > div { min-height: 66px; display: flex; align-items: center; gap: 0; padding: 0 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(12,12,16,.58); box-shadow: 0 18px 45px rgba(0,0,0,.16); }
.archive-stats-bar > div > i { display: block; width: 1px; height: 22px; margin: 0 18px; background: rgba(255,255,255,.18); }
.archive-stats-bar span, .archive-stats-bar p { width: auto; min-width: 0; height: auto; padding: 0; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 7px; border: 0; border-radius: 0; background: transparent; font-size: 9px; }
.archive-stats-bar strong { margin: 0; font-size: 17px; }
.archive-stats-bar p { margin-left: auto; align-items: center; white-space: nowrap; }
@keyframes final-bg-drift { from { transform: scale(1.12) translate3d(-1%, -.6%, 0); } to { transform: scale(1.18) translate3d(1.4%, .6%, 0); } }
@keyframes final-gradient-flow { from { background-position: 0% 20%, 100% 70%, center, center; } to { background-position: 16% 38%, 84% 48%, center, center; } }

@media (max-width: 980px) {
  .archive-intro h1 strong { font-size: clamp(48px, 9vw, 74px); }
  .archive-intro > div > div:first-child > span { white-space: normal; }
  .archive-stats-bar > div { flex-wrap: wrap; justify-content: center; gap: 10px 16px; border-radius: 20px; padding: 14px; }
  .archive-stats-bar > div > i { display: none; }
  .archive-stats-bar p { width: 100%; justify-content: center; margin: 0; }
}
@media (max-width: 560px) {
  .hero-photo { background-size: auto 100%; background-position: center; }
  .archive-intro h1 strong { font-size: clamp(38px, 13vw, 56px); white-space: nowrap; }
  .archive-intro h1 small { font-size: 11px; letter-spacing: .34em; }
  .archive-intro > div > div:first-child > span { max-width: 330px; font-size: 11px; }
  .archive-stats-bar { width: calc(100vw - 24px); margin-top: -68px; }
  .archive-stats-bar > div { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 16px; }
  .archive-stats-bar span { justify-content: center; }
  .archive-stats-bar p { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .archive-intro::before, .archive-intro::after { animation: none !important; } }

/* Arquivo por ano: seis capas verticais por fileira */
.year-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
.year-grid > button ,
.year-grid > a { min-width: 0; }
.year-cover { height: auto; aspect-ratio: 4 / 5; }
.year-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.year-cover b { left: 11px; bottom: 7px; font-size: 30px; }
.year-copy { min-height: 76px; padding: 10px; }
.year-copy strong { font-size: 12px; }
.year-copy small { font-size: 9px; }
.year-grid > button > i ,
.year-grid > a > i { right: 9px; bottom: 17px; font-size: 12px; }

/* Painel mais legível */
.admin-shell { grid-template-columns: 260px 1fr; }
.admin-sidebar { width: 260px; padding: 27px 20px 22px; }
.admin-sidebar nav { gap: 4px; }
.admin-sidebar nav button ,
.admin-sidebar nav a { height: 46px; padding: 0 12px; font-size: 13px; }
.admin-sidebar nav button.active::before ,
.admin-sidebar nav a.active::before { height: 46px; }
.admin-icon { width: 34px; font-size: 17px; }
.admin-sidebar nav button small ,
.admin-sidebar nav a small { font-size: 10px; }
.workspace-pill { padding: 13px; }
.workspace-pill > span { width: 36px; height: 36px; font-size: 12px; }
.workspace-pill strong { font-size: 12px; }
.workspace-pill small { font-size: 10px; }
.storage-card { padding: 16px; }
.storage-card > div, .storage-card p, .storage-card button, .view-site , .storage-card a{ font-size: 10px; }
.admin-topbar { height: 74px; padding: 0 42px; }
.back-to-gallery { font-size: 10px; }
.admin-topbar-icons button ,
.admin-topbar-icons a { width: 34px; height: 34px; }
.user-menu > span { width: 34px; height: 34px; font-size: 11px; }
.user-menu strong { font-size: 12px; }
.user-menu small { font-size: 10px; }
.admin-content { padding: 44px 4vw 78px; }
.admin-title-row { margin-bottom: 34px; }
.admin-title-row p { margin-bottom: 10px; font-size: 10px; }
.admin-title-row h1 { margin-bottom: 8px; font-size: 36px; }
.admin-title-row > div > span { font-size: 14px; }
.new-upload, .save-button { padding: 14px 19px; font-size: 11px; }
.stat-card { min-height: 150px; padding: 22px; }
.stat-card p { font-size: 10px; }
.stat-card strong { font-size: 30px; }
.stat-card span { font-size: 11px; }
.stat-card > i { width: 38px; height: 38px; font-size: 16px; }
.recent-uploads, .upload-zone { padding: 25px; }
.panel-title { margin-bottom: 22px; }
.panel-title p { margin-bottom: 6px; font-size: 10px; }
.panel-title h2 { font-size: 21px; }
.panel-title button:not(.save-button) ,
.panel-title a:not(.save-button) { font-size: 10px; }
.upload-row { min-height: 78px; grid-template-columns: 60px 1fr auto 28px; gap: 13px; }
.upload-row img { width: 60px; height: 52px; border-radius: 5px; }
.upload-row strong { font-size: 12px; }
.upload-row small, .upload-row > span { font-size: 10px; }
.dropzone { min-height: 180px; }
.dropzone > span { width: 40px; height: 40px; font-size: 18px; }
.dropzone strong { font-size: 14px; }
.dropzone small { font-size: 11px; }
.dropzone em { font-size: 9px; }
.quick-actions > button ,
.quick-actions > a { padding: 14px; }
.quick-actions > button > span ,
.quick-actions > a > span { width: 32px; height: 32px; }
.quick-actions strong { font-size: 11px; }
.quick-actions small { font-size: 9px; }
.site-status { min-height: 130px; padding: 24px 26px; }
.site-status p { font-size: 10px; }
.site-status h2 { font-size: 20px; }
.site-status > div > small, .status-metrics small, .site-status > button , .site-status > a { font-size: 10px; }
.status-metrics strong { font-size: 18px; }
.setting-block > span, .theme-preview > span { font-size: 10px; }
.setting-block input { font-size: 13px; }
.segmented button ,
.segmented a { font-size: 10px; }
.toggle-row strong { font-size: 13px; }
.toggle-row small { font-size: 10px; }
.module-placeholder p { font-size: 10px; }
.module-placeholder > span { font-size: 14px; }
.module-actions button ,
.module-actions a { font-size: 10px; }

@media (max-width: 1100px) {
  .updated-albums-grid, .popular-grid, .browser-album-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .browser-album-grid.is-icons { grid-template-columns: repeat(4, minmax(0, 128px)); }
  .browser-album-grid.is-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .month-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .year-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .gallery-nav button ,
  .gallery-nav a { padding: 0 10px; }
}
@media (max-width: 800px) {
  .archive-intro { min-height: 570px; padding: 58px 0; }
  .archive-intro::before { background-position: 58% 22%; }
  .archive-intro h1 { font-size: 62px; }
  .archive-intro > div > div:first-child > span { font-size: 15px; }
  .archive-search { height: auto; }
  .archive-section-title h2 { font-size: 28px; }
  .category-years-panel { padding-left: 24px; }
  .month-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .month-browser-title { align-items: flex-start; flex-direction: column; gap: 24px; padding-bottom: 26px; }
  .browser-actions { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .browser-album-grid.is-icons { grid-template-columns: repeat(3, minmax(0, 125px)); }
  .album-photo-grid.size-large { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .album-photo-grid.size-medium { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .album-photo-grid.size-small { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .hero-photo { background-position: 58% center; }
  .year-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .content-wrap { width: calc(100vw - 32px); }
  .archive-intro { min-height: 640px; padding: 48px 0 38px; align-items: flex-end; }
  .archive-intro::before { background-position: 60% 15%; }
  .archive-intro::after { background: linear-gradient(0deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.76) 49%, rgba(5,5,5,.08) 100%); }
  .archive-intro h1 { font-size: 50px; }
  .archive-intro p { font-size: 9px; }
  .archive-intro > div > div:first-child > span { font-size: 14px; }
  .hero-quicklinks { flex-wrap: wrap; font-size: 10px; }
  .archive-stats-bar span { font-size: 10px; }
  .archive-stats-bar strong { font-size: 15px; }
  .archive-section { padding: 40px 0 44px; }
  .archive-section-title h2 { font-size: 25px; }
  .archive-section-title > button ,
  .archive-section-title > a { font-size: 9px; }
  .updated-albums-grid, .popular-grid, .browser-album-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
  .album-copy, .popular-copy { min-height: 126px; padding: 12px; }
  .album-copy strong, .popular-copy strong { font-size: 13px; }
  .category-row { min-height: 88px; grid-template-columns: 52px 34px minmax(0,1fr) 45px 22px; gap: 9px; }
  .category-row > img { width: 52px; height: 52px; }
  .category-copy strong { font-size: 14px; }
  .category-copy small { font-size: 11px; }
  .month-grid { grid-template-columns: 1fr; gap: 9px; }
  .month-grid > button ,
  .month-grid > a { min-height: 78px; padding: 13px 15px; }
  .album-view-switch button ,
  .album-view-switch a { min-width: 42px; }
  .album-view-switch button span ,
  .album-view-switch a span { display: none; }
  .browser-album-grid.is-icons { grid-template-columns: repeat(2, minmax(0, 125px)); }
  .browser-album-grid.is-list { grid-template-columns: 1fr; }
  .browser-album-grid.is-list > button ,
  .browser-album-grid.is-list > a { grid-template-columns: 72px 1fr; min-height: 92px; }
  .browser-album-grid.is-list > button > span ,
  .browser-album-grid.is-list > a > span { width: 72px; height: 92px; }
  .browser-album-grid.is-list > button > div ,
  .browser-album-grid.is-list > a > div { min-height: 92px; padding: 10px; }
  .browser-album-grid.is-list strong { font-size: 12px; }
  .photo-size-switch button ,
  .photo-size-switch a { min-width: 54px; font-size: 9px; }
  .album-photo-grid.size-large { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .album-photo-grid.size-medium { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .album-photo-grid.size-small { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .photo-browser-title h1 { font-size: 22px; }
  .lightbox-image { padding: 56px 18px 96px; }
  .lightbox-image img { max-width: calc(100vw - 36px); max-height: calc(100vh - 165px); }
  .lightbox-quick-actions { width: calc(100vw - 32px); }
  .lightbox-quick-actions button ,
  .lightbox-quick-actions a { flex: 1; padding: 0 8px; font-size: 9px; }
  .lightbox-info { width: min(300px, 86vw); }
  .lightbox-details-toggle { right: 64px; min-width: 38px; width: 38px; }
  .lightbox-details-toggle span { display: none; }
  .lightbox-details-toggle.is-open { right: calc(min(300px, 86vw) + 12px); }
  .hero-photo { background-position: 62% center; background-size: auto 100%; }
  .hero-smoke { opacity: .5; }
  .year-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .archive-stats-bar { width: 100%; margin-top: -96px; border-radius: 0; }
  .archive-stats-bar > div { padding: 12px 16px; }
  .language-switcher { margin-left: auto; }
  .throwback-card { width: 158px; flex-basis: 158px; }
  .admin-title-row h1 { font-size: 30px; }
  .stat-card p { font-size: 9px; }
  .stat-card strong { font-size: 25px; }
}

/* Topo Demi Lovato Gallery — composição final monocromática */
.gallery-topbar.hero-mode { background: transparent; }
.gallery-header-inner { width: min(980px, 94vw); height: 86px; gap: 11px; }
.gallery-brand { flex: 0 0 auto; gap: 9px; color: #f7f6f4; font-size: 17px; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.gallery-brand > span:not(.brand-mark):last-child { display: inline-flex; flex-direction: row; align-items: baseline; white-space: nowrap; }
.gallery-brand .brand-mark { width: 38px; min-width: 38px; max-width: 38px; height: 38px; flex: 0 0 38px; overflow: hidden; border-color: #fff; background: #fff; color: #111; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.gallery-brand .brand-muted { display: inline; color: #f7f6f4; opacity: 1; }
.gallery-nav { height: 42px; padding: 4px 6px; border-color: rgba(255,255,255,.16); background: rgba(12,12,14,.62); box-shadow: 0 10px 32px rgba(0,0,0,.16); }
.nav-primary { height: 34px; display: inline-flex; align-items: center; }
.gallery-nav button ,
.gallery-nav a { height: 28px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 500; line-height: 1; vertical-align: middle; }
.gallery-nav .nav-primary button ,
.gallery-nav .nav-primary a { position: relative; z-index: 0; isolation: isolate; border-radius: 999px; }
.gallery-nav .nav-primary button + button::before ,
.gallery-nav .nav-primary a + a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; background: rgba(255,255,255,.2); transform: translateY(-50%); }
.gallery-nav .nav-primary button::after ,
.gallery-nav .nav-primary a::after { content: ""; position: absolute; z-index: -1; inset: 2px 6px; border-radius: 999px; background: transparent; transition: background .18s ease; }
.gallery-nav .nav-primary button:hover ,
.gallery-nav .nav-primary a:hover { background: transparent; color: #f7f6f4; }
.gallery-nav .nav-primary button:hover::after ,
.gallery-nav .nav-primary a:hover::after { background: rgba(255,255,255,.1); }
.nav-category-picker { position: relative; height: 34px; display: inline-flex; align-items: center; }
.nav-category-picker::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; background: rgba(255,255,255,.2); transform: translateY(-50%); }
.gallery-nav .nav-category-picker > button::before ,
.gallery-nav .nav-category-picker > a::before { display: none; content: none; }
.nav-category-menu { position: absolute; z-index: 80; top: calc(100% + 10px); left: 50%; width: 250px; max-height: 350px; padding: 7px; display: grid; gap: 3px; overflow-y: auto; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(24,24,25,.96); box-shadow: 0 18px 45px rgba(0,0,0,.36); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: language-menu-in .16s ease-out; }
.gallery-nav .nav-category-menu button ,
.gallery-nav .nav-category-menu a { width: 100%; min-height: 36px; height: auto; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 600; line-height: 1.25; text-align: left; white-space: normal; }
.gallery-nav .nav-category-menu button::before, .gallery-nav .nav-category-menu button::after ,
.gallery-nav .nav-category-menu a::before, .gallery-nav .nav-category-menu a::after { display: none; content: none; }
.gallery-nav .nav-category-menu button:hover ,
.gallery-nav .nav-category-menu a:hover { background: rgba(255,255,255,.1); color: #f7f6f4; }
.gallery-nav .nav-category-menu button b ,
.gallery-nav .nav-category-menu a b { flex: 0 0 auto; font-size: 11px; font-weight: 500; }
.nav-utility-divider { width: 1px; height: 16px; flex: 0 0 1px; margin: 0; align-self: center; background: rgba(255,255,255,.22); }
.gallery-nav .header-utilities { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; vertical-align: middle; }
.gallery-nav .language-switcher { width: 62px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-sizing: border-box; vertical-align: middle; }
.language-switcher:hover { background: transparent; }
.gallery-nav .language-trigger { width: 62px; height: 28px; gap: 5px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent !important; color: #f7f6f4; box-shadow: none !important; cursor: pointer; }
.gallery-nav .language-trigger strong { display: block; flex: 0 0 auto; min-width: 16px; font-size: 10px; font-weight: 600; line-height: 1; text-align: left; }
.language-icon { width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; color: #f7f6f4; font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: 400; line-height: 13px; vertical-align: middle; }
.gallery-nav .utility-divider { display: block; width: 1px; height: 16px; flex: 0 0 1px; margin: 0; align-self: center; background: rgba(255,255,255,.25); }
.gallery-topbar .gallery-nav .login-entry { width: 39px; min-width: 39px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; overflow: visible; border: 0 !important; border-radius: 999px !important; background: none !important; color: #f7f6f4; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-sizing: border-box; }
.gallery-topbar .gallery-nav .login-entry::before, .gallery-topbar .gallery-nav .login-entry::after { display: none !important; content: none !important; }
.gallery-nav .login-entry:hover { background: radial-gradient(circle, rgba(255,255,255,.1) 0 11.5px, transparent 12px) !important; color: #f7f6f4; box-shadow: none !important; }
.user-icon { width: 13px; height: 13px; display: block; flex: 0 0 13px; overflow: visible; color: currentColor; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; transform: translateY(.25px); }
.gallery-topbar .gallery-nav .admin-entry { width: 28px; min-width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; align-self: center; line-height: 0; border: 0 !important; border-radius: 999px !important; background: none !important; color: #f7f6f4; font-size: 0; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-sizing: border-box; }
.gallery-nav .admin-entry:hover { background: radial-gradient(circle, rgba(255,255,255,.1) 0 11.5px, transparent 12px) !important; color: #f7f6f4; }
.gallery-nav .language-switcher { position: relative; z-index: 0; isolation: isolate; }
.gallery-nav .language-switcher::before { display: none; content: none; }
.gallery-nav .language-trigger:hover, .gallery-nav .language-trigger:active, .gallery-nav .language-trigger:focus, .gallery-nav .language-trigger:focus-visible { border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; outline-offset: 3px; }
.gallery-nav .language-icon { border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; }
.language-menu { position: absolute; z-index: 40; top: calc(100% + 9px); left: 50%; width: 96px; padding: 6px; display: grid; gap: 3px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(24,24,25,.94); box-shadow: 0 16px 38px rgba(0,0,0,.3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: language-menu-in .16s ease-out; }
.gallery-nav .language-menu button ,
.gallery-nav .language-menu a { width: 100%; height: 30px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.7); font-size: 10px; font-weight: 600; }
.gallery-nav .language-menu button:hover ,
.gallery-nav .language-menu a:hover { background: rgba(255,255,255,.1); color: #f7f6f4; }
.gallery-nav .language-menu button.active ,
.gallery-nav .language-menu a.active { background: rgba(255,255,255,.14); color: #f7f6f4; }
.gallery-nav .language-menu button b ,
.gallery-nav .language-menu a b { font-size: 10px; font-weight: 500; }
@keyframes language-menu-in { from { opacity: 0; transform: translate(-50%,-5px) scale(.97); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
.gallery-nav .logout-entry { height: 30px; margin-left: 0; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: #f7f6f4; font-size: 9px; }
.gallery-nav .logout-entry:hover { background: rgba(255,255,255,.14); }

.archive-intro { min-height: 700px; padding: 104px 0 44px; align-items: center; overflow: hidden; background: #111; }
.archive-intro::before { inset: -11%; background-image: var(--arq-hero-image); background-position: center; background-size: cover; filter: grayscale(100%) contrast(1.02) brightness(.56) blur(44px); opacity: .92; animation: monochrome-bg-pulse 3.4s steps(2, end) infinite; }
.archive-intro::after { background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.06) 0%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.74) 100%), linear-gradient(90deg, rgba(0,0,0,.62), transparent 28%, transparent 72%, rgba(0,0,0,.62)), linear-gradient(0deg, rgba(0,0,0,.72), transparent 42%, rgba(0,0,0,.28)); background-size: 100% 100%; animation: monochrome-light-shift 2.8s steps(3, end) infinite; }
.hero-photo { inset: 0; overflow: hidden; background-image: var(--arq-hero-image); background-position: center; background-size: contain; background-repeat: no-repeat; filter: grayscale(100%) contrast(1.06) brightness(.68); -webkit-mask-image: none; mask-image: none; animation: hero-glitch-shift 2.6s steps(1, end) infinite; }
.hero-photo::before, .hero-photo::after { content: ""; position: absolute; inset: 0; background: var(--arq-hero-image) center / contain no-repeat; filter: grayscale(100%) contrast(1.12) brightness(.72); opacity: 0; pointer-events: none; }
.hero-photo::before { clip-path: polygon(0 23%,100% 23%,100% 39%,0 39%); animation: hero-glitch-slice-a 1.7s steps(1, end) infinite; }
.hero-photo::after { clip-path: polygon(0 58%,100% 58%,100% 73%,0 73%); animation: hero-glitch-slice-b 2.1s steps(1, end) infinite; }
.hero-smoke::before, .hero-smoke::after { background: radial-gradient(circle, rgba(255,255,255,.28), rgba(180,180,180,.1) 38%, transparent 68%); filter: blur(50px) grayscale(100%); opacity: .3; animation-duration: 3.6s; }
.hero-smoke i { filter: grayscale(100%) blur(18px); opacity: .58; animation-duration: 3.2s; }
.archive-intro-inner { width: min(840px, 88vw); gap: 16px; }
.archive-intro h1 { display: block; margin: 0; font-family: Arial, Helvetica, sans-serif; font-style: normal; white-space: nowrap; }
.archive-intro h1 strong { color: #f7f6f4; font-size: clamp(48px, 5.6vw, 78px); font-weight: 400; line-height: .92; letter-spacing: -.065em; }
.archive-intro > div > div:first-child > span { max-width: none; margin-top: 13px; color: rgba(255,255,255,.78); font-size: 10px; line-height: 1.4; white-space: nowrap; }
.archive-search { width: min(585px, 100%); height: 48px; margin: 6px auto 0; border-color: rgba(255,255,255,.22); background: rgba(250,250,250,.93); box-shadow: 0 12px 35px rgba(0,0,0,.2); }
.archive-search > span { width: 42px; font-size: 16px; }
.archive-search input { padding: 0 8px 0 0; font-size: 11px; }
.archive-search select { width: 170px; font-size: 9px; }
.archive-search button ,
.archive-search a { height: 36px; margin: 5px; padding: 0 19px; font-size: 9px; font-weight: 800; }
.archive-intro .archive-stats-bar { position: static; z-index: auto; width: auto; margin: 2px auto 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.archive-intro .archive-stats-bar > div { min-height: 40px; width: auto; display: flex; align-items: center; justify-content: center; gap: 0; padding: 0 21px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.archive-intro .archive-stats-bar span { width: auto; min-width: 0; height: auto; padding: 0; flex-direction: row; align-items: baseline; gap: 5px; border: 0; background: transparent; color: #f7f6f4; font-size: 9px; font-weight: 500; letter-spacing: .09em; white-space: nowrap; }
.archive-intro .archive-stats-bar strong { margin: 0; color: #f7f6f4; font-size: 13px; font-weight: 500; letter-spacing: -.02em; }
.archive-intro .archive-stats-bar i { display: block; width: 1px; height: 15px; margin: 0 14px; background: rgba(255,255,255,.25); }
.archive-content { padding-top: 30px; }

.archive-subhero { position: relative; height: 300px; overflow: hidden; isolation: isolate; display: grid; place-items: end center; padding: 0 24px 34px; background: #111; }
.archive-subhero::before { content: ""; position: absolute; z-index: -3; inset: -18%; background: var(--arq-hero-image) center / cover no-repeat; filter: grayscale(100%) brightness(.48) blur(36px); animation: monochrome-bg-pulse 3.4s steps(2,end) infinite; }
.archive-subhero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.04), rgba(0,0,0,.3) 58%, rgba(0,0,0,.7)), linear-gradient(0deg, rgba(0,0,0,.72), transparent 72%); }
.archive-subhero-photo, .archive-subhero-glitch { position: absolute; z-index: -2; inset: -15px 0; background: var(--arq-hero-image) center / contain no-repeat; filter: grayscale(100%) brightness(.66) contrast(1.06); }
.archive-subhero-photo { animation: hero-glitch-shift 2.6s steps(1,end) infinite; }
.archive-subhero-glitch { z-index: -1; clip-path: polygon(0 42%,100% 42%,100% 62%,0 62%); opacity: 0; animation: hero-glitch-slice-a 1.7s steps(1,end) infinite; }
.archive-subhero-title { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #f7f6f4; text-shadow: 0 5px 24px rgba(0,0,0,.4); }
.archive-subhero-title strong { color: #f7f6f4; font-size: 38px; font-weight: 400; line-height: .94; letter-spacing: -.055em; }
.archive-subhero-title small { color: rgba(255,255,255,.78); font-family: Georgia, "Times New Roman", serif; font-size: 9px; font-weight: 400; letter-spacing: .48em; }
.archive-mode + .archive-subhero { padding-top: 78px; }
.archive-subhero + .archive-browser { padding-top: 42px; }
.archive-page-footer { margin-top: 64px; }

.login-modal { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(10,10,12,.36); backdrop-filter: blur(18px) grayscale(100%); -webkit-backdrop-filter: blur(18px) grayscale(100%); animation: login-fade .2s ease-out; }
.login-card { width: min(410px, 100%); padding: 28px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: rgba(18,18,20,.92); color: #f7f6f4; box-shadow: 0 28px 90px rgba(0,0,0,.34); }
.login-card header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.login-card header span { color: rgba(255,255,255,.48); font-size: 9px; font-weight: 700; letter-spacing: .19em; }
.login-card h2 { margin: 7px 0 6px; font-size: 27px; font-weight: 500; letter-spacing: -.04em; }
.login-card header p { margin: 0; color: rgba(255,255,255,.56); font-size: 11px; }
.login-card header button ,
.login-card header a { width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: transparent; color: #f7f6f4; font-size: 18px; }
.login-card > label { display: grid; gap: 7px; margin-top: 13px; }
.login-card > label > span { color: rgba(255,255,255,.62); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.login-card input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 11px; outline: 0; background: rgba(255,255,255,.065); color: #f7f6f4; font: inherit; font-size: 13px; }
.login-card input:focus { border-color: rgba(255,255,255,.56); background: rgba(255,255,255,.09); }
.login-error { margin: 12px 0 0; color: #ffb4b4; font-size: 10px; }
.login-submit { width: 100%; height: 46px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border: 0; border-radius: 11px; background: #f4f4f4; color: #111; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.login-submit:disabled { opacity: .45; cursor: not-allowed; }
@keyframes login-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes monochrome-bg-pulse { 0%, 82%, 100% { transform: scale(1.12) translate3d(0,0,0); } 84% { transform: scale(1.135) translate3d(-.6%,.2%,0); } 87% { transform: scale(1.12) translate3d(.4%,-.15%,0); } }
@keyframes monochrome-light-shift { 0%, 72%, 100% { opacity: 1; transform: translateX(0); } 74% { opacity: .88; transform: translateX(-4px); } 77% { opacity: 1; transform: translateX(3px); } }
@keyframes hero-glitch-shift { 0%, 76%, 100% { transform: translate3d(0,0,0) scale(1); } 78% { transform: translate3d(-5px,1px,0) scale(1.006); } 80% { transform: translate3d(4px,-1px,0) scale(1.003); } 82% { transform: translate3d(0,0,0) scale(1); } }
@keyframes hero-glitch-slice-a { 0%, 62%, 100% { opacity: 0; transform: translateX(0); } 64% { opacity: .68; transform: translateX(14px); } 67% { opacity: .36; transform: translateX(-8px); } 70% { opacity: 0; } }
@keyframes hero-glitch-slice-b { 0%, 78%, 100% { opacity: 0; transform: translateX(0); } 80% { opacity: .58; transform: translateX(-16px); } 83% { opacity: .3; transform: translateX(9px); } 86% { opacity: 0; } }

@media (max-width: 800px) {
  .gallery-nav { display: flex; }
  .gallery-nav .nav-primary, .gallery-nav .nav-utility-divider { display: none; }
  .archive-intro { min-height: 620px; padding: 96px 0 38px; }
  .archive-intro h1 strong { font-size: clamp(38px, 9vw, 58px); }
  .archive-intro > div > div:first-child > span { max-width: 86vw; white-space: normal; }
  .archive-intro .archive-stats-bar > div { flex-wrap: wrap; gap: 6px 12px; padding: 9px 16px; }
  .archive-intro .archive-stats-bar i { display: none; }
  .archive-subhero { height: 250px; padding-bottom: 24px; }
}
@media (max-width: 560px) {
  .gallery-header-inner { width: calc(100vw - 20px); justify-content: space-between; }
  .gallery-brand { font-size: 12px; }
  .gallery-brand .brand-mark { width: 34px; min-width: 34px; max-width: 34px; height: 34px; flex-basis: 34px; }
  .language-switcher { margin-left: 0; width: 56px; }
  .archive-intro { min-height: 660px; padding: 92px 0 42px; align-items: center; }
  .hero-photo, .hero-photo::before, .hero-photo::after { background-size: contain; background-position: center; }
  .archive-intro-inner { width: calc(100vw - 28px); }
  .archive-intro h1 strong { font-size: clamp(33px, 12vw, 50px); white-space: nowrap; }
  .archive-intro > div > div:first-child > span { max-width: 300px; font-size: 9px; }
  .archive-search { height: auto; padding: 5px; border-radius: 16px; flex-wrap: wrap; }
  .archive-search > span { display: none; }
  .archive-search input { width: calc(100% - 10px); height: 38px; padding: 0 10px; }
  .archive-search select { width: calc(62% - 5px); height: 36px; }
  .archive-search button ,
  .archive-search a { width: calc(38% - 5px); margin: 0; }
  .archive-intro .archive-stats-bar { width: 100%; margin-top: 0; }
  .archive-intro .archive-stats-bar > div { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 16px; }
  .archive-intro .archive-stats-bar span { justify-content: center; }
  .archive-subhero { height: 225px; padding-top: 72px; }
  .archive-subhero-title strong { font-size: 28px; }
  .archive-subhero-title small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .archive-intro::before, .archive-intro::after, .hero-photo, .hero-photo::before, .hero-photo::after, .archive-subhero::before, .archive-subhero-photo, .archive-subhero-glitch { animation: none !important; }
}

/* Painel: escala legível, biblioteca compacta e ferramentas reais */
.admin-content { width: 100%; max-width: 1680px; padding-left: clamp(24px, 3vw, 52px); padding-right: clamp(24px, 3vw, 52px); }
.media-manager, .album-manager, .category-manager { padding: 30px; }
.media-library-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 13px; }
.media-thumb { aspect-ratio: 4 / 5; border-radius: 5px; }
.media-thumb span { width: auto; height: 25px; padding: 0 9px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.media-library-grid strong { font-size: 10px; }
.media-library-grid small { font-size: 9px; }
.media-toolbar button ,
.media-toolbar a { font-size: 9px; }

.upload-dialog { width: min(980px, 100%); }
.upload-dialog > header { min-height: 132px; padding: 30px 36px; }
.upload-dialog > header h2 { font-size: 29px; }
.upload-dialog > header p, .upload-dialog > header span { font-size: 10px; }
.upload-dialog section { padding: 26px 36px; }
.modal-files > button ,
.modal-files > a { min-height: 88px; padding: 16px 18px; }
.modal-label span, .modal-destination label > span, .new-album-fields label > span { font-size: 10px; }
.modal-label small, .modal-files small, .smart-crop-option small { font-size: 9px; line-height: 1.45; }
.modal-destination select, .modal-destination input { min-height: 46px; font-size: 11px; }
.smart-crop-option strong { font-size: 11px; }
.upload-dialog > footer { min-height: 76px; padding: 14px 36px; }
.upload-dialog > footer button ,
.upload-dialog > footer a { min-height: 44px; padding: 0 19px; font-size: 9px; }

.category-icon-upload { display: grid !important; gap: 8px; }
.category-icon-upload > span:first-child { color: #666; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.category-icon-upload-box { position: relative; min-height: 76px; display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 13px; padding: 8px 14px 8px 8px; overflow: hidden; border: 1px dashed #bbb; border-radius: 6px; background: #f8f8f5; cursor: pointer; }
.category-icon-upload-box:hover { border-color: #555; background: #f1f1ee; }
.category-icon-upload-box img { grid-row: 1 / 3; width: 58px; height: 58px; object-fit: cover; border-radius: 5px; }
.category-icon-placeholder { grid-row: 1 / 3; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 5px; background: #e7e7e3; color: #777; font-size: 22px; font-style: normal; }
.category-icon-upload-box strong { align-self: end; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.category-icon-upload-box em { align-self: start; color: #888; font-size: 9px; font-style: normal; }
.category-icon-upload-box input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.media-editor-modal { position: fixed; z-index: 320; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8,8,9,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.media-editor-dialog { width: min(1180px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #f3f3f0; color: #111; box-shadow: 0 30px 100px rgba(0,0,0,.42); }
.media-editor-dialog > header { min-height: 104px; padding: 24px 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; background: #111; color: #f7f6f4; }
.media-editor-dialog > header p { margin: 0 0 7px; color: #aaa; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.media-editor-dialog > header h2 { max-width: 720px; margin: 0 0 5px; overflow: hidden; font-size: 24px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.media-editor-dialog > header span { color: #999; font-size: 10px; }
.media-editor-dialog > header button ,
.media-editor-dialog > header a { width: 36px; height: 36px; border: 1px solid #444; border-radius: 50%; background: transparent; color: #f7f6f4; font-size: 23px; }
.media-editor-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); min-height: 570px; }
.media-editor-stage { min-width: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 30px; overflow: hidden; background: #1d1d1e; }
.media-editor-stage > small { color: #999; font-size: 9px; text-align: center; }
.media-editor-preview { position: relative; width: min(100%, 680px); max-height: 58vh; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #090909; box-shadow: 0 16px 50px rgba(0,0,0,.34); }
.media-editor-preview img { width: 100%; height: 100%; max-height: 58vh; object-fit: contain; }
.media-editor-preview.crop-1-1 { width: min(58vh, 100%); aspect-ratio: 1; }
.media-editor-preview.crop-4-5 { width: min(46.4vh, 100%); aspect-ratio: 4 / 5; }
.media-editor-preview.crop-16-9 { aspect-ratio: 16 / 9; }
.media-editor-preview:not(.crop-original) img { object-fit: cover; }
.editor-grain { position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.editor-watermark { position: absolute; right: 5%; bottom: 5%; color: rgba(255,255,255,.78); font-size: clamp(13px, 2vw, 25px); letter-spacing: .05em; text-shadow: 0 1px 5px rgba(0,0,0,.65); }
.media-editor-controls { padding: 25px; display: grid; align-content: start; gap: 20px; border-left: 1px solid #d5d5d0; background: #fafaf8; }
.media-editor-controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.media-editor-controls legend, .editor-range > span strong { margin-bottom: 9px; color: #666; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.editor-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.editor-choice-grid.filters { grid-template-columns: repeat(3, 1fr); }
.editor-choice-grid button ,
.editor-choice-grid a { min-height: 40px; padding: 7px; border: 1px solid #d0d0cb; border-radius: 5px; background: #fff; color: #444; font-size: 9px; font-weight: 700; }
.editor-choice-grid button.active ,
.editor-choice-grid a.active { border-color: #111; background: #111; color: #f7f6f4; }
.editor-range { display: grid; gap: 8px; }
.editor-range > span { display: flex; align-items: center; justify-content: space-between; }
.editor-range > span strong { margin: 0; }
.editor-range > span b { color: #777; font-size: 9px; }
.editor-range input { accent-color: #111; }
.editor-watermark-control { display: grid; gap: 7px; }
.editor-watermark-control > button ,
.editor-watermark-control > a { min-height: 54px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #d0d0cb; border-radius: 5px; background: #fff; text-align: left; }
.editor-watermark-control > button > span ,
.editor-watermark-control > a > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #bbb; border-radius: 4px; }
.editor-watermark-control > button.active > span ,
.editor-watermark-control > a.active > span { border-color: #111; background: #111; color: #f7f6f4; }
.editor-watermark-control strong, .editor-watermark-control small { display: block; font-size: 9px; }
.editor-watermark-control small { margin-top: 3px; color: #888; }
.editor-watermark-control > input { height: 40px; padding: 0 11px; border: 1px solid #ccc; border-radius: 5px; font: inherit; font-size: 10px; }
.media-editor-dialog > footer { min-height: 72px; padding: 13px 20px; display: flex; align-items: center; gap: 8px; border-top: 1px solid #d4d4d0; background: #fff; }
.media-editor-dialog > footer > span { flex: 1; }
.media-editor-dialog > footer button ,
.media-editor-dialog > footer a { min-height: 42px; padding: 0 15px; border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #111; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.media-editor-dialog > footer .editor-delete { border-color: #e2b7b7; color: #a60000; }
.media-editor-dialog > footer .editor-save { border-color: #111; background: #111; color: #f7f6f4; }

@media (max-width: 1180px) {
  .media-library-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .media-editor-layout { grid-template-columns: 1fr; }
  .media-editor-controls { grid-template-columns: repeat(2, minmax(0,1fr)); border-left: 0; border-top: 1px solid #d5d5d0; }
}
@media (max-width: 760px) {
  .admin-content { padding-left: 16px; padding-right: 16px; }
  .media-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .upload-dialog > header, .upload-dialog section, .upload-dialog > footer { padding-left: 20px; padding-right: 20px; }
  .media-editor-modal { padding: 0; }
  .media-editor-dialog { max-height: 100vh; min-height: 100vh; border-radius: 0; }
  .media-editor-controls { grid-template-columns: 1fr; }
  .media-editor-dialog > footer { position: sticky; bottom: 0; }
}

/* Biblioteca selecionável, editor completo e modais mais legíveis */
.upload-dialog { width: min(840px, 100%); }
.upload-dialog > header p, .upload-dialog > header span, .modal-label small, .modal-files small, .smart-crop-option small { font-size: 10px; }
.modal-label span, .modal-destination label > span, .new-album-fields label > span { font-size: 11px; }
.modal-destination select, .modal-destination input, .smart-crop-option strong { font-size: 12px; }
.modal-files > button strong, .modal-files > button b ,
.modal-files > a strong, .modal-files > a b { font-size: 11px; }

.media-bulkbar { min-height: 48px; margin: 0 0 16px; padding: 6px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid #d8d8d3; border-radius: 7px; background: #f6f6f3; }
.media-bulkbar > strong { margin-right: auto; color: #666; font-size: 10px; font-weight: 600; }
.media-bulkbar > button, .media-size-switch button ,
.media-bulkbar > a, .media-size-switch a { min-height: 34px; padding: 0 11px; border: 1px solid #d1d1cc; border-radius: 5px; background: #fff; color: #222; font-size: 9px; font-weight: 800; }
.media-bulkbar > button.danger ,
.media-bulkbar > a.danger { color: #a00000; }
.media-bulkbar > button.subtle ,
.media-bulkbar > a.subtle { border-color: #e0baba; }
.media-select-all { display: inline-flex; align-items: center; gap: 7px; }
.media-select-all > span, .media-select > span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #999; border-radius: 4px; background: #fff; color: #f7f6f4; font-size: 10px; }
.media-size-switch { display: flex; align-items: center; gap: 3px; padding-left: 4px; }
.media-size-switch > span { margin-right: 4px; color: #777; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.media-size-switch button ,
.media-size-switch a { width: 34px; padding: 0; }
.media-size-switch button.active ,
.media-size-switch a.active { border-color: #111; background: #111; color: #f7f6f4; }
.media-library-grid.size-large { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.media-library-grid.size-medium { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.media-library-grid.size-small { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.media-library-grid article.selected .media-thumb { outline: 3px solid #111; outline-offset: 2px; }
.media-select { position: absolute; z-index: 4; left: 8px; top: 8px; padding: 0; border: 0; border-radius: 4px; background: transparent; }
.media-library-grid article.selected .media-select > span { border-color: #111; background: #111; }
.media-more { position: absolute !important; z-index: 5; right: 0 !important; bottom: 0 !important; min-width: 25px; min-height: 25px; }
.media-item-menu { position: absolute; z-index: 12; right: 0; top: calc(100% - 2px); width: 142px; padding: 5px !important; display: grid !important; gap: 2px !important; border: 1px solid #d0d0cb; border-radius: 7px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.media-item-menu button ,
.media-item-menu a { min-height: 34px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; text-align: left; font-size: 10px; }
.media-item-menu button:hover ,
.media-item-menu a:hover { background: #f0f0ed; }
.media-item-menu button.danger ,
.media-item-menu a.danger { color: #a00000; }

.media-editor-dialog { width: min(1080px, 100%); }
.media-editor-layout { grid-template-columns: minmax(0, 1.45fr) minmax(330px, .8fr); }
.media-editor-preview img { filter: var(--editor-filter, none) !important; }
.media-editor-preview.crop-original { width: fit-content; max-width: 100%; background: transparent; box-shadow: none; }
.media-editor-preview.crop-original img, .media-editor-preview.crop-free img { width: auto; max-width: 100%; height: auto; max-height: 58vh; object-fit: contain; }
.media-editor-preview.crop-free { width: fit-content; max-width: 100%; background: transparent; box-shadow: none; touch-action: none; }
.free-crop-box { position: absolute; z-index: 5; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55), 0 0 0 1px #111; cursor: move; touch-action: none; }
.free-crop-box::before, .free-crop-box::after { content: ""; position: absolute; background: rgba(255,255,255,.72); pointer-events: none; }
.free-crop-box::before { left: 33.333%; top: 0; bottom: 0; width: 1px; box-shadow: calc(var(--crop-third, 1) * 100%) 0 rgba(255,255,255,.72); }
.free-crop-box::after { left: 0; right: 0; top: 33.333%; height: 1px; }
.free-crop-box > i { position: absolute; right: -8px; bottom: -8px; width: 17px; height: 17px; border: 2px solid #111; border-radius: 50%; background: #fff; cursor: nwse-resize; }
.crop-reset { margin-top: 7px; min-height: 32px; padding: 0 10px; border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #555; font-size: 10px; }
.editor-grain { z-index: 2; }
.editor-watermark { position: absolute; z-index: 6; right: auto; bottom: auto; padding: 0; transform: translate(-50%, -50%); border: 0; background: transparent; color: rgba(255,255,255,.95); cursor: grab; touch-action: none; text-shadow: 0 1px 5px rgba(0,0,0,.72); }
.editor-watermark:active { cursor: grabbing; }
.editor-watermark.logo img { width: 100%; height: auto; max-height: none; object-fit: contain; filter: none !important; }
.editor-watermark.text strong { white-space: nowrap; letter-spacing: .05em; }
.media-editor-controls { gap: 17px; }
.media-editor-controls legend, .editor-range > span strong { font-size: 10px; }
.editor-choice-grid button, .editor-range > span b, .editor-watermark-control strong, .editor-watermark-control small ,
.editor-choice-grid a{ font-size: 10px; }
.editor-range input { width: 100%; }
.editor-range.compact { gap: 5px; }
.watermark-options { display: grid; gap: 8px; padding: 10px; border: 1px solid #d0d0cb; border-top: 0; border-radius: 0 0 6px 6px; background: #fff; }
.watermark-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.watermark-mode button ,
.watermark-mode a { min-height: 34px; border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #444; font-size: 10px; font-weight: 800; }
.watermark-mode button.active ,
.watermark-mode a.active { border-color: #111; background: #111; color: #f7f6f4; }
.watermark-options > input, .automatic-watermark-settings > input { min-height: 38px; padding: 0 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 11px; }
.watermark-logo-upload { position: relative; min-height: 40px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #aaa; border-radius: 5px; background: #f6f6f3; font-size: 10px; font-weight: 800; cursor: pointer; }
.watermark-logo-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.save-watermark-default { min-height: 40px; padding: 0 10px; border: 1px solid #111; border-radius: 5px; background: #111; color: #f7f6f4; font-size: 9px; font-weight: 800; }
.watermark-layer-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.watermark-layer-heading strong { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.watermark-layer-heading span { color: #777; font-size: 9px; }
.watermark-layer-list { display: flex; gap: 5px; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: thin; }
.watermark-layer-list button ,
.watermark-layer-list a { min-width: 78px; height: 38px; padding: 0 8px; display: flex; align-items: center; gap: 7px; border: 1px solid #d0d0cb; border-radius: 6px; background: #fff; color: #444; }
.watermark-layer-list button b ,
.watermark-layer-list a b { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border-radius: 50%; background: #e8e8e4; font-size: 9px; }
.watermark-layer-list button span ,
.watermark-layer-list a span { max-width: 82px; overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.watermark-layer-list button.active ,
.watermark-layer-list a.active { border-color: #111; background: #111; color: #f7f6f4; }
.watermark-layer-list button.active b ,
.watermark-layer-list a.active b { background: #fff; color: #111; }
.watermark-layer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.watermark-layer-actions button ,
.watermark-layer-actions a { min-height: 34px; padding: 0 7px; border: 1px solid #c9c9c4; border-radius: 5px; background: #f7f7f4; color: #222; font-size: 9px; font-weight: 800; }
.watermark-layer-actions button.danger ,
.watermark-layer-actions a.danger { grid-column: 1 / -1; border-color: #e1b6b6; background: #fff8f8; color: #a00000; }
.editor-watermark.selected::after { content: ""; position: absolute; inset: -7px; border: 1px dashed rgba(255,255,255,.95); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.editor-watermark.text.selected::after { inset: -6px -9px; }
.automatic-watermark-settings { margin: -1px 0 10px; padding: 13px; display: grid; gap: 9px; border: 1px solid #d4d4cf; border-radius: 6px; background: #f6f6f3; }
.automatic-watermark-settings > strong { font-size: 11px; }

.archive-empty-period { grid-column: 1 / -1; min-height: 170px; display: grid; place-content: center; gap: 7px; border: 1px dashed #ccc; border-radius: 5px; color: #777; text-align: center; }
.archive-empty-period strong { color: #222; font-size: 13px; }
.archive-empty-period span { font-size: 10px; }
.month-preview.empty { display: grid; place-items: center; background: linear-gradient(145deg, #ecece8, #dadad5); }
.month-preview.empty > i { color: #aaa; font-size: 24px; font-style: normal; }

@media (max-width: 1250px) {
  .media-library-grid.size-small { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .media-library-grid.size-medium { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .media-bulkbar { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .media-library-grid.size-small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .media-library-grid.size-medium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .media-library-grid.size-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-editor-layout { grid-template-columns: 1fr; }
}

/* Acabamento do painel: ritmo consistente, menos vazio e modais objetivos */
.admin-shell { --admin-radius: 7px; }
.admin-main-header { min-height: 72px; }
.admin-content { padding-top: 34px; padding-bottom: 56px; }
.admin-page-heading { margin-bottom: 26px; }
.admin-page-heading h1 { line-height: 1.05; }
.panel-card { border-radius: var(--admin-radius); }
.media-manager, .album-manager, .category-manager { padding: 26px 28px 30px; }
.panel-title { min-height: 68px; gap: 20px; }
.panel-title h2 { line-height: 1.1; }
.panel-title > div > span { display: block; margin-top: 7px; color: #777; font-size: 10px; line-height: 1.45; }
.save-button { border-radius: 5px; }
.admin-title-actions { display: flex; align-items: center; gap: 8px; }
.ghost-button { min-height: 40px; padding: 0 16px; border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #222; font-size: 10px; font-weight: 800; white-space: nowrap; }
.ghost-button:hover { background: #f2f2ee; }

.media-manager-title { align-items: center; }
.media-toolbar { min-height: 52px; margin-top: 10px; border-radius: 6px; }
.media-advanced-filters { margin: 9px 0 14px; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)) auto; align-items: end; gap: 9px; border: 1px solid #d8d8d3; border-radius: 6px; background: #f7f7f4; }
.media-advanced-filters label { display: grid; gap: 5px; }
.media-advanced-filters label > span { color: #777; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.media-advanced-filters select, .media-advanced-filters button , .media-advanced-filters a { min-height: 38px; padding: 0 10px; border: 1px solid #cecec8; border-radius: 5px; background: #fff; color: #222; font: inherit; font-size: 10px; }
.media-advanced-filters button ,
.media-advanced-filters a { font-weight: 800; }
.media-library-grid article > div { min-width: 0; padding-right: 28px; }
.media-library-grid article > div strong { display: -webkit-box; min-height: 25px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }
.media-library-grid article > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item-menu a { min-height: 34px; padding: 0 10px; display: flex; align-items: center; border-radius: 4px; color: #222; font-size: 10px; text-decoration: none; }
.media-item-menu a:hover { background: #f0f0ed; }

.admin-year-list { margin-top: 8px; }
.admin-year-list > article { border-radius: 6px; overflow: hidden; }
.admin-year-list > article.expanded { overflow: visible; }
.admin-year-row { min-height: 58px; }
.admin-month-list { padding: 8px 12px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: #f3f3f0; }
.admin-month-list > div { min-width: 0; border: 1px solid #d7d7d2; border-radius: 6px; background: #fff; overflow: hidden; }
/* The "•••" menu on each album card needs to pop out past these rounded
   containers, so let the overflow open back up once a year/month is
   actually expanded and showing album cards (collapsed rows still clip
   normally, keeping their rounded corners). */
.admin-month-list > div.open { overflow: visible; }
.admin-month-list > div > button ,
.admin-month-list > div > a { width: 100%; min-height: 58px; padding: 10px 13px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 3px 10px; border: 0; background: transparent; text-align: left; }
.admin-month-list > div > button span ,
.admin-month-list > div > a span { font-size: 11px; font-weight: 800; }
.admin-month-list > div > button small ,
.admin-month-list > div > a small { color: #777; font-size: 9px; }
.admin-month-list > div > button i ,
.admin-month-list > div > a i { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; }
.admin-month-list > div.open { grid-column: 1 / -1; }
.admin-album-cards { padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; border-top: 1px solid #ddd; background: #fafaf8; }
.admin-album-cards article { min-width: 0; min-height: 72px; padding: 7px; display: flex; align-items: center; gap: 9px; border: 1px solid #deded9; border-radius: 5px; background: #fff; }
.admin-album-card-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 9px; border: 0; padding: 0; background: transparent; text-align: left; cursor: pointer; }
.admin-album-card-open img { width: 50px; height: 58px; object-fit: cover; border-radius: 4px; }
.admin-empty-album-cover { width: 50px; height: 58px; display: grid; place-items: center; border: 1px dashed #bdbdb7; border-radius: 4px; background: linear-gradient(145deg, #f6f6f2, #e7e7e1); color: #777; font-size: 20px; }
.admin-album-card-open > div { min-width: 0; }
.admin-album-card-open strong, .admin-album-card-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-album-card-open strong { font-size: 10px; }
.admin-album-card-open small { margin-top: 4px; color: #777; font-size: 9px; }
.admin-album-card-menu { position: relative; flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; }
.admin-album-card-menu .media-more { position: static !important; width: 28px; height: 28px; border-radius: 5px; background: transparent; color: #777; font-size: 12px; letter-spacing: 1px; }
.admin-album-card-menu .media-more:hover { background: #f2f2ee; color: #111; }
.admin-album-card-menu .media-item-menu { top: calc(100% + 4px); }

.category-admin-list article { min-height: 68px; }
.category-admin-list article img { width: 52px; height: 52px; }
.category-admin-list article > div small { max-width: 680px; }

.settings-layout { align-items: start; }
.theme-preview { min-height: 230px; border-radius: 6px; transition: background .28s ease, color .28s ease; }
.theme-preview.preview-warm { background: linear-gradient(120deg, #2f261f 0 68%, #bd704f 68% 100%); color: #fff8f1; }
.theme-preview.preview-cool { background: linear-gradient(120deg, #101d2e 0 68%, #5f8495 68% 100%); color: #f3f9fb; }
.theme-preview.preview-mono { background: linear-gradient(120deg, #111 0 68%, #3c3c3c 68% 100%); color: #f7f6f4; }

.account-settings { display: grid; gap: 18px; }
.settings-summary { min-height: 104px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #d7d7d2; border-radius: 7px; background: linear-gradient(118deg, #111 0 62%, #2e2e2e 62% 100%); color: #f7f6f4; }
.settings-summary p { margin: 0 0 7px; color: #aaa; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.settings-summary h2 { margin: 0 0 5px; font-size: 23px; font-weight: 500; }
.settings-summary span { color: #bbb; font-size: 10px; }
.settings-summary > b { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #111; font-size: 14px; }
.settings-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-card { min-height: 370px; padding: 25px; display: flex; flex-direction: column; gap: 13px; }
.account-card .panel-title { min-height: 56px; margin-bottom: 2px; }
.account-card > label { display: grid; gap: 6px; }
.account-card > label > span { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.account-card input { min-height: 44px; padding: 0 12px; border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #111; font: inherit; font-size: 11px; }
.account-card > .save-button { width: max-content; min-width: 150px; margin-top: auto; }
.account-card > p { max-width: 620px; margin: 0; color: #777; font-size: 10px; line-height: 1.55; }
.password-security-card { min-height: 410px; }
.password-security-card .panel-title { align-items: center; }
.privacy-card .toggle-row { min-height: 61px; }

.upload-dialog { width: min(800px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); border-radius: 9px; }
.upload-dialog > header { min-height: 88px; padding: 17px 24px; }
.upload-dialog > header p { margin-bottom: 5px; }
.upload-dialog > header h2 { margin-bottom: 3px; font-size: 24px; }
.upload-dialog section { padding: 14px 24px; }
.modal-files > button ,
.modal-files > a { min-height: 64px; padding: 10px 13px; }
.selected-files { margin-top: 7px; }
.modal-destination { gap: 9px; }
.upload-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.upload-category-heading > strong { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.upload-category-heading button ,
.upload-category-heading a { min-height: 30px; padding: 0 9px; border: 1px solid #bdbdb7; border-radius: 5px; background: #fff; color: #111; font-size: 9px; font-weight: 800; }
.upload-category-select { display: block; }
.upload-category-select select { width: 100%; }
.new-album-fields { gap: 8px; }
.modal-destination select, .modal-destination input { min-height: 40px; }
.smart-crop-option { min-height: 50px !important; padding: 8px 11px !important; }
.upload-dialog > footer { min-height: 60px; padding: 9px 24px; }
.upload-dialog > footer button ,
.upload-dialog > footer a { min-height: 40px; }

.move-album-dialog { width: min(650px, calc(100vw - 32px)); overflow: hidden; border-radius: 9px; background: #f7f7f4; box-shadow: 0 28px 90px rgba(0,0,0,.34); }
.move-album-dialog > header { min-height: 104px; padding: 22px 24px; display: flex; justify-content: space-between; gap: 18px; background: #111; color: #f7f6f4; }
.move-album-dialog header p { margin: 0 0 6px; color: #aaa; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.move-album-dialog header h2 { margin: 0 0 4px; font-size: 23px; font-weight: 500; }
.move-album-dialog header span { color: #aaa; font-size: 10px; }
.move-album-dialog header button ,
.move-album-dialog header a { width: 34px; height: 34px; border: 1px solid #444; border-radius: 50%; background: transparent; color: #f7f6f4; font-size: 20px; }
.move-album-current { margin: 18px 22px 0; padding: 8px; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 11px; border: 1px solid #d7d7d2; border-radius: 6px; background: #fff; }
.move-album-current img { width: 56px; height: 64px; object-fit: cover; border-radius: 4px; }
.move-album-current small, .move-album-current strong, .move-album-current span { display: block; }
.move-album-current small { color: #888; font-size: 9px; }
.move-album-current strong { margin: 3px 0; font-size: 12px; }
.move-album-current span { color: #777; font-size: 9px; }
.move-album-dialog > section { padding: 16px 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.move-album-dialog label { display: grid; gap: 6px; }
.move-album-dialog label:first-child { grid-column: 1 / -1; }
.move-album-dialog label span { font-size: 9px; font-weight: 800; text-transform: uppercase; }
.move-album-dialog select, .move-album-dialog input { min-height: 42px; padding: 0 11px; border: 1px solid #ccc; border-radius: 5px; background: #fff; font: inherit; font-size: 10px; }
.move-album-dialog > footer { min-height: 62px; padding: 10px 22px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #d5d5d0; background: #fff; }
.move-album-dialog footer button ,
.move-album-dialog footer a { min-height: 40px; padding: 0 15px; border: 1px solid #ccc; border-radius: 5px; background: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.move-album-dialog footer .move-confirm { border-color: #111; background: #111; color: #f7f6f4; }
.move-album-hint { grid-column: 1 / -1; color: #888; font-size: 9px; line-height: 1.4; }
.move-album-name-new { grid-column: 1 / -1; }
.rename-album-dialog { width: min(460px, calc(100vw - 32px)); }
.media-album-banner { margin-bottom: 12px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #d7d7d2; border-radius: 7px; background: #f2f2ee; font-size: 11px; }
.media-album-banner strong { font-weight: 700; }
.media-album-banner button ,
.media-album-banner a { border: 0; background: transparent; color: #b3261e; font-size: 10px; font-weight: 800; }
.media-album-banner button:hover ,
.media-album-banner a:hover { text-decoration: underline; }

.media-editor-dialog { width: min(940px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); }
.media-editor-dialog > header { min-height: 82px; padding: 17px 22px; align-items: center; }
.media-editor-dialog > header p { margin-bottom: 5px; }
.media-editor-dialog > header h2 { margin-bottom: 3px; font-size: 21px; }
.media-editor-layout { grid-template-columns: minmax(0, 1.5fr) minmax(285px, .72fr); min-height: 470px; }
.media-editor-stage { padding: 22px; gap: 9px; }
.media-editor-preview { max-height: 54vh; background: transparent; box-shadow: none; }
.media-editor-preview img { width: auto; max-width: 100%; height: auto; max-height: 54vh; object-fit: contain; border: 0; outline: 0; }
.media-editor-preview:not(.crop-original):not(.crop-free) { background: #111; box-shadow: 0 12px 38px rgba(0,0,0,.28); }
.media-editor-preview:not(.crop-original):not(.crop-free) img { width: 100%; height: 100%; object-fit: cover; }
.media-editor-controls { padding: 20px; gap: 14px; }
.editor-choice-grid { grid-template-columns: repeat(3, 1fr); }
.editor-choice-grid.filters { grid-template-columns: repeat(3, 1fr); }
.editor-choice-grid button ,
.editor-choice-grid a { min-height: 38px; }
.media-editor-dialog > footer { min-height: 60px; padding: 9px 14px; }
.media-editor-dialog > footer button ,
.media-editor-dialog > footer a { min-height: 39px; }

.gallery-lock-screen { position: fixed; z-index: 520; inset: 0; display: grid; place-content: center; justify-items: center; padding: 30px; background: rgba(8,8,8,.82); color: #f7f6f4; text-align: center; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.gallery-lock-screen span { font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.gallery-lock-screen h2 { margin: 12px 0 5px; font-size: clamp(38px, 6vw, 72px); font-weight: 400; }
.gallery-lock-screen p { margin: 0 0 22px; color: #bbb; font-size: 11px; }
.gallery-lock-screen button ,
.gallery-lock-screen a { min-height: 44px; padding: 0 18px; border: 1px solid #fff; border-radius: 999px; background: #fff; color: #111; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.login-overlay { z-index: 620; }

.gallery-site.palette-warm { --gallery-accent: #a85e40; }
.gallery-site.palette-cool { --gallery-accent: #1b1b1b; }
.gallery-site.palette-warm .archive-section-title > div > span,
.gallery-site.palette-warm .category-years-panel > div > span { color: var(--gallery-accent); }
.gallery-site.palette-cool .archive-section-title > div > span,
.gallery-site.palette-cool .category-years-panel > div > span { color: var(--gallery-accent); }
.gallery-site.density-compact .updated-albums-grid,
.gallery-site.density-compact .most-viewed-grid { gap: 10px; }
.gallery-site.density-ample .updated-albums-grid,
.gallery-site.density-ample .most-viewed-grid { gap: 22px; }
.gallery-site.motion-off *, .gallery-site.motion-off *::before, .gallery-site.motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }

@media (max-width: 980px) {
  .media-advanced-filters { grid-template-columns: repeat(2, 1fr); }
  .admin-month-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-card-grid { grid-template-columns: 1fr; }
  .media-editor-layout { grid-template-columns: 1fr; }
  .media-editor-controls { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .admin-content { padding-top: 22px; }
  .media-manager, .album-manager, .category-manager { padding: 18px; }
  .media-advanced-filters, .admin-month-list, .admin-album-cards, .move-album-dialog > section { grid-template-columns: 1fr; }
  .admin-month-list > div.open, .move-album-dialog label:first-child { grid-column: auto; }
  .admin-album-card-open { grid-template-columns: 44px 1fr; }
  .admin-album-card-open img, .admin-empty-album-cover { width: 44px; height: 50px; }
  .settings-summary { align-items: flex-start; }
  .settings-summary span { display: block; max-width: 240px; }
  .account-card { min-height: 0; padding: 20px; }
  .upload-dialog { width: 100%; max-height: 100dvh; border-radius: 0; }
  .upload-dialog > header { min-height: 80px; }
  .upload-dialog section { padding: 12px 18px; }
  .new-album-fields { grid-template-columns: 1fr; }
  .media-editor-dialog { width: 100%; max-height: 100dvh; border-radius: 0; }
  .media-editor-controls { grid-template-columns: 1fr; }
}

/* Personalização global e acabamento público */
.gallery-site { background: var(--gallery-bg, #f4f4f1); color: var(--gallery-text, #111); font-family: var(--gallery-text-font, Inter), Arial, sans-serif; }
.gallery-site h1, .gallery-site h2, .gallery-site h3, .gallery-site .archive-subhero-title, .gallery-site .brand { font-family: var(--gallery-title-font, Inter), Arial, sans-serif; }
.gallery-site .archive-content, .gallery-site .public-index-page, .gallery-site .archive-browser, .gallery-site .gallery-home { background: var(--gallery-bg, #f4f4f1); color: var(--gallery-text, #111); }
.gallery-site .updated-album, .gallery-site .category-group, .gallery-site .popular-grid > button, .gallery-site .all-albums-grid > button, .gallery-site .ranking-list > button, .gallery-site .browser-month-card, .gallery-site .browser-album-card, .gallery-site .album-photo-card , .gallery-site .popular-grid > a, .gallery-site .all-albums-grid > a, .gallery-site .ranking-list > a{ background: var(--gallery-surface, #fff); color: var(--gallery-text, #111); }
.gallery-site img, .gallery-site .album-thumb, .gallery-site .month-preview, .gallery-site .year-cover, .gallery-site .all-album-cover { border-radius: var(--gallery-radius, 5px) !important; }
.gallery-site button:focus-visible, .gallery-site input:focus-visible, .gallery-site select:focus-visible ,
.gallery-site a:focus-visible{ outline: 2px solid var(--gallery-accent, #888); outline-offset: 2px; }
.brand-mark.has-image, .appearance-assets label > b, .theme-preview b { overflow: hidden; padding: 0; }
.brand-mark.has-image img, .theme-preview b img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }

/* O hero mantém uma área previsível; o enquadramento é controlado pelo painel. */
.archive-intro { height: 720px; min-height: 720px; max-height: 720px; }
.hero-photo { background-position: var(--hero-x, 50%) var(--hero-y, 50%) !important; background-size: var(--hero-fit, cover) !important; background-repeat: no-repeat !important; }
.archive-subhero-photo, .archive-subhero-glitch { background-position: var(--hero-x, 50%) var(--hero-y, 50%) !important; background-size: var(--hero-fit, cover) !important; background-repeat: no-repeat !important; }

/* Seletor público: menu abaixo do campo e acesso direto à categoria. */
.public-category-picker { position: relative; width: 178px; height: 38px; flex: 0 0 178px; }
.archive-search .public-category-trigger { width: 100%; height: 100%; margin: 0; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-left: 1px solid #ddd; border-radius: 999px; background: rgba(0,0,0,.04); color: #555; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.archive-search .public-category-trigger:hover { background: rgba(0,0,0,.08); }
.public-category-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-category-trigger b { font-size: 13px; font-weight: 500; transition: transform .18s ease; }
.public-category-picker.open .public-category-trigger b { transform: rotate(180deg); }
.public-category-menu { position: absolute; z-index: 90; top: calc(100% + 9px); left: 0; width: max(250px, 100%); max-height: 330px; padding: 7px; display: grid; gap: 2px; overflow-y: auto; border: 1px solid rgba(0,0,0,.09); border-radius: 12px; background: #fff; color: #111; box-shadow: 0 26px 60px rgba(0,0,0,.26), 0 4px 14px rgba(0,0,0,.14); }
.archive-search .public-category-menu button ,
.archive-search .public-category-menu a { width: 100%; min-height: 39px; margin: 0; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 8px; background: transparent; color: #222; font-size: 10px; font-weight: 600; letter-spacing: 0; text-align: left; text-transform: none; }
.archive-search .public-category-menu button:hover, .archive-search .public-category-menu button.active ,
.archive-search .public-category-menu a:hover, .archive-search .public-category-menu a.active { background: #e7e7e4; }

/* Painel completo de aparência */
.appearance-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.appearance-form-grid .span-all { grid-column: 1 / -1; }
.appearance-assets { display: grid; grid-template-columns: 150px 150px minmax(260px,1fr); gap: 11px; }
.appearance-assets label { position: relative; min-height: 118px; padding: 10px; display: grid; grid-template-rows: 70px auto; gap: 8px; border: 1px solid #d4d4cf; border-radius: 7px; background: #f7f7f4; cursor: pointer; }
.appearance-assets label.hero-asset { grid-template-rows: 70px auto; }
.appearance-assets label > b { width: 100%; height: 70px; display: grid; place-items: center; border-radius: 5px; background: #111; color: #f7f6f4; font-size: 22px; }
.appearance-assets label > b img { width: 100%; height: 100%; object-fit: cover; }
.appearance-assets label > span { font-size: 10px; font-weight: 800; text-align: center; }
.appearance-assets input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hero-position-controls { padding: 16px; border: 1px solid #d4d4cf; border-radius: 7px; background: #fafaf8; }
.hero-fit-buttons { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hero-fit-buttons button ,
.hero-fit-buttons a { min-height: 40px; border: 1px solid #cfcfca; border-radius: 6px; background: #fff; color: #222; font-size: 10px; font-weight: 800; }
.hero-fit-buttons button.active ,
.hero-fit-buttons a.active { border-color: #111; background: #111; color: #f7f6f4; }
.hero-position-sliders { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-position-sliders label { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 10px; font-weight: 700; }
.hero-position-sliders input { grid-column: 1 / -1; width: 100%; accent-color: #111; }
.hero-position-controls > small { display: block; margin-top: 10px; color: #777; font-size: 9px; line-height: 1.45; }
.appearance-colors { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.appearance-colors label { min-height: 58px; padding: 8px; display: flex; align-items: center; gap: 9px; border: 1px solid #d4d4cf; border-radius: 6px; background: #fafaf8; }
.appearance-colors input { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 5px; background: transparent; }
.appearance-colors span, .appearance-colors small { display: block; }
.appearance-colors span { font-size: 10px; font-weight: 800; }
.appearance-colors small { margin-top: 3px; color: #777; font-size: 9px; font-weight: 500; }
.appearance-controls > div { display: grid; grid-template-columns: minmax(220px,1.35fr) repeat(2,minmax(145px,.7fr)); gap: 11px; }
.appearance-controls label { min-height: 72px; padding: 10px; display: grid; align-content: center; gap: 8px; border: 1px solid #d4d4cf; border-radius: 6px; background: #fafaf8; font-size: 10px; font-weight: 800; }
.appearance-controls label b { color: #777; }
.appearance-controls select { min-height: 36px; padding: 0 9px; border: 1px solid #ccc; border-radius: 5px; background: #fff; font: inherit; font-size: 10px; }
.appearance-controls input[type="range"] { width: 100%; }
.hero-title-size-control label { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto auto; gap: 12px; align-items: center; }
.hero-title-size-control label > span { color: #777; font-size: 10px; }
.hero-title-size-control label > b { min-width: 52px; padding: 7px 9px; border-radius: 5px; background: #111; color: #f7f6f4; font-size: 10px; text-align: center; }
.hero-title-size-control input { width: 100%; padding: 0; border: 0; accent-color: #111; }
.hero-title-size-control > small { color: #777; font-size: 9px; line-height: 1.45; }
.gallery-site .archive-intro h1 strong { font-size: min(var(--hero-title-size, 78px), 13vw) !important; }

@media (max-width: 640px) {
  .hero-position-sliders { grid-template-columns: 1fr; }
  .hero-title-size-control label { grid-template-columns: auto minmax(120px, 1fr) auto; }
  .hero-title-size-control label > span:last-child { display: none; }
}

.admin-account-menu { position: relative; }
.admin-account-dropdown { position: absolute; z-index: 120; top: calc(100% + 10px); right: 0; width: 220px; padding: 7px; display: grid; gap: 3px; border: 1px solid #d4d4cf; border-radius: 8px; background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.admin-account-dropdown button ,
.admin-account-dropdown a { min-height: 39px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 5px; background: transparent; color: #222; font-size: 10px; text-align: left; }
.admin-account-dropdown button:hover ,
.admin-account-dropdown a:hover { background: #f0f0ed; }
.admin-account-dropdown button.danger ,
.admin-account-dropdown a.danger { color: #9c1111; }
.user-role-list article.disabled { opacity: .58; }
.admin-empty-state { padding: 20px 4px; display: grid; gap: 4px; }
.admin-empty-state strong { font-size: 11px; }
.admin-empty-state span { color: #85857f; font-size: 10px; }
.moderator-actions { position: relative; justify-self: end; }
.moderator-actions > button ,
.moderator-actions > a { width: 38px; height: 38px; border: 1px solid #d5d5d0; border-radius: 50%; background: #fff; font-weight: 900; }
.moderator-actions > div { position: absolute; z-index: 80; top: 44px; right: 0; width: 190px; padding: 6px; display: grid; gap: 2px; border: 1px solid #d4d4cf; border-radius: 7px; background: #fff; box-shadow: 0 14px 38px rgba(0,0,0,.16); }
.moderator-actions > div button ,
.moderator-actions > div a { min-height: 38px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; font-size: 10px; text-align: left; }
.moderator-actions > div button:hover ,
.moderator-actions > div a:hover { background: #efefeb; }
.moderator-actions > div button.danger ,
.moderator-actions > div a.danger { color: #a00000; }
.private-password-fields button ,
.private-password-fields a { min-height: 42px; padding: 0 14px; border: 1px solid #111; border-radius: 5px; background: #111; color: #f7f6f4; font-size: 10px; font-weight: 850; }
.private-password-fields { margin: 2px 0 12px; padding: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 1px solid #d5d5d0; border-radius: 6px; background: #f7f7f4; }
.private-password-fields button ,
.private-password-fields a { grid-column: 1 / -1; }

/* Álbuns e ranking em leitura rápida. */
.public-index-page { min-height: 70vh; padding: 62px 0 82px; }
.public-index-heading { margin-bottom: 25px; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.public-index-heading p { margin: 0 0 8px; color: var(--gallery-accent); font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.public-index-heading h1 { margin: 0 0 7px; font-size: clamp(38px,5vw,66px); font-weight: 500; letter-spacing: -.055em; }
.public-index-heading span { color: #777; font-size: 11px; }
.public-index-heading > button ,
.public-index-heading > a { min-height: 38px; padding: 0 13px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-size: 9px; font-weight: 800; }
.public-index-filters { margin-bottom: 20px; padding: 8px; display: grid; grid-template-columns: 1fr 220px; gap: 8px; border: 1px solid #d5d5d0; border-radius: 8px; background: var(--gallery-surface); }
.public-index-filters label { display: flex; align-items: center; gap: 9px; }
.public-index-filters input, .public-index-filters select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d7d7d2; border-radius: 6px; background: #fff; font: inherit; font-size: 11px; }
.search-form { grid-template-columns: 1fr 200px auto; }
.search-form > button ,
.search-form > a { min-height: 42px; padding: 0 22px; border: 0; border-radius: 6px; background: #111; color: #f7f6f4; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.search-form > button:hover ,
.search-form > a:hover { background: #2a2a2a; }
.search-section-title { margin: 8px 0 14px; font-size: 15px; font-weight: 550; letter-spacing: -.02em; }
.search-results-page .all-albums-grid { margin-bottom: 34px; }
.all-albums-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.all-albums-grid > button ,
.all-albums-grid > a { min-width: 0; padding: 0; overflow: hidden; display: grid; grid-template-rows: 240px minmax(118px,auto); border: 1px solid #d8d8d3; border-radius: var(--gallery-radius); text-align: left; box-shadow: 0 7px 22px rgba(0,0,0,.05); }
.all-album-cover { position: relative; display: block; overflow: hidden; }
.all-album-cover img { width: 100%; height: 100%; object-fit: cover; }
.all-album-cover i { position: absolute; right: 8px; bottom: 8px; padding: 5px 7px; border-radius: 4px; background: rgba(0,0,0,.74); color: #f7f6f4; font-size: 9px; font-style: normal; }
.all-album-copy { padding: 13px; display: grid; align-content: start; gap: 7px; }
.all-album-copy small, .all-album-copy em { color: #777; font-size: 9px; font-style: normal; }
.all-album-copy strong { font-size: 13px; line-height: 1.25; }
.all-albums-grid > button > b ,
.all-albums-grid > a > b { display: none; }
.ranking-period { width: max-content; margin: 0 0 18px; padding: 4px; display: flex; gap: 4px; border: 1px solid #d4d4cf; border-radius: 999px; background: var(--gallery-surface); }
.ranking-period button ,
.ranking-period a { min-height: 38px; padding: 0 17px; border: 0; border-radius: 999px; background: transparent; color: #666; font-size: 10px; font-weight: 800; }
.ranking-period button.active ,
.ranking-period a.active { background: var(--gallery-text); color: var(--gallery-surface); }
.ranking-list { overflow: hidden; border: 1px solid #d5d5d0; border-radius: 10px; background: var(--gallery-surface); }
.ranking-list > button ,
.ranking-list > a { width: 100%; min-height: 102px; padding: 12px 18px; display: grid; grid-template-columns: 72px 70px minmax(0,1fr) auto 24px; align-items: center; gap: 16px; border: 0; border-bottom: 1px solid #e2e2de; text-align: left; }
.ranking-list > button:last-child ,
.ranking-list > a:last-child { border-bottom: 0; }
.ranking-list > button:hover ,
.ranking-list > a:hover { background: color-mix(in srgb, var(--gallery-accent) 10%, transparent); }
.ranking-list img { width: 70px; height: 76px; object-fit: cover; }
.ranking-position { color: var(--gallery-accent); font-size: 25px; font-weight: 600; }
.ranking-list span b, .ranking-list span small { display: block; }
.ranking-list span b { margin-bottom: 5px; font-size: 13px; }
.ranking-list span small { color: #777; font-size: 10px; }
.ranking-list em { padding: 5px 8px; border-radius: 999px; background: var(--gallery-text); color: var(--gallery-surface); font-size: 8px; font-style: normal; font-weight: 900; }
.ranking-winner { min-height: 132px !important; background: color-mix(in srgb, var(--gallery-accent) 16%, var(--gallery-surface)) !important; }
.ranking-winner .ranking-position { font-size: 38px; }
.ranking-winner img { width: 84px; height: 94px; }

@media (max-width: 980px) {
  .appearance-assets { grid-template-columns: repeat(2,1fr); }
  .appearance-assets .hero-asset { grid-column: 1 / -1; }
  .appearance-colors { grid-template-columns: repeat(2,1fr); }
  .appearance-controls > div { grid-template-columns: 1fr; }
  .all-albums-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .archive-intro { height: 640px; min-height: 640px; max-height: 640px; }
  .archive-search .public-category-picker { width: calc(62% - 5px); flex: 0 0 calc(62% - 5px); }
  .public-category-menu { left: 0; width: min(280px, calc(100vw - 38px)); }
  .appearance-form-grid, .appearance-assets, .appearance-colors { grid-template-columns: 1fr; }
  .appearance-form-grid .span-all, .appearance-assets .hero-asset { grid-column: auto; }
  .public-index-page { padding: 38px 0 58px; }
  .public-index-heading { align-items: flex-start; flex-direction: column; }
  .public-index-filters { grid-template-columns: 1fr; }
  .all-albums-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .all-albums-grid > button ,
  .all-albums-grid > a { grid-template-rows: 190px minmax(110px,auto); }
  .ranking-list > button ,
  .ranking-list > a { grid-template-columns: 46px 54px minmax(0,1fr) 15px; gap: 9px; padding: 9px; }
  .ranking-list img { width: 54px; height: 62px; }
  .ranking-list em { display: none; }
}
@media (max-width: 430px) {
  .archive-intro { height: 610px; min-height: 610px; max-height: 610px; }
  .all-albums-grid { grid-template-columns: 1fr; }
}

/* Mobile navigation: below 800px the primary nav links are hidden with no
   replacement, so give small screens a hamburger menu to reach them. */
.mobile-nav { display: none; position: relative; }
.mobile-nav-toggle { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; gap: 4px; flex-direction: column; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.06); cursor: pointer; }
.mobile-nav-toggle span { width: 15px; height: 2px; background: #fff; border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
.mobile-nav.is-open .mobile-nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.mobile-nav.is-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; }
.mobile-nav.is-open .mobile-nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mobile-nav-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(16,16,16,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.mobile-nav-menu button ,
.mobile-nav-menu a { height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.86); font-size: 12px; font-weight: 600; text-align: left; }
.mobile-nav-menu button:hover, .mobile-nav-menu button:active ,
.mobile-nav-menu a:hover, .mobile-nav-menu a:active { background: rgba(255,255,255,.1); color: #f7f6f4; }
@media (max-width: 800px) {
  .mobile-nav { display: block; order: -1; margin-right: 6px; }
  .mobile-nav-toggle { display: inline-flex; }
}

/* Long/custom hero titles must wrap instead of running off-screen on phones. */
@media (max-width: 560px) {
  .archive-intro h1, .archive-intro h1 strong { white-space: normal; word-break: break-word; }
}

/* The 6-column category-row layout left only ~130px for the name and
   description on phones (plus a stray ellipsis rule bleeding in from the
   compact category-list variant), so text was clipped to a few characters.
   Stack it into two rows instead of squeezing everything into one line. */
@media (max-width: 560px) {
  .category-row { grid-template-columns: 52px minmax(0,1fr) auto; grid-template-areas: "img copy stat" "img copy arrow"; row-gap: 6px; align-items: start; padding: 12px 13px 12px 8px; }
  .category-row > img { grid-area: img; align-self: start; }
  .category-row .folder-symbol { display: none; }
  .category-row .category-copy { grid-area: copy; }
  .category-row .category-copy small { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.35; }
  .category-row > b:nth-of-type(2) { grid-area: stat; justify-self: end; }
  .category-row .category-expand-arrow { grid-area: arrow; align-self: end; justify-self: end; }
}

/* No celular, a fotografia sempre preenche todo o hero. O enquadramento e o
   modo escolhidos no painel continuam valendo normalmente no desktop. */
@media (max-width: 700px) {
  .gallery-site .archive-intro .hero-photo,
  .gallery-site .archive-intro .hero-photo::before,
  .gallery-site .archive-intro .hero-photo::after {
    inset: 0;
    background-size: cover !important;
    background-position: var(--hero-x, 50%) var(--hero-y, 50%) !important;
    background-repeat: no-repeat !important;
  }
}

/* Refinos finais: rodapé à frente, Throwback limpo e logo do menu sem corte. */
.gallery-home .throwback-window {
  border: 0;
  box-shadow: none;
}
.gallery-site .gallery-footer {
  z-index: 5;
  margin-top: -1px;
  box-shadow: 0 -16px 38px rgba(27, 27, 27,.22), inset 0 1px rgba(255,255,255,.18);
}
.gallery-site .gallery-footer > .content-wrap {
  min-height: 210px;
  grid-template-columns: 175px minmax(0, 880px);
  gap: clamp(34px, 4.5vw, 70px);
}
.gallery-site .gallery-footer .footer-brand,
.gallery-site .gallery-footer .footer-brand .brand-mark {
  width: 175px;
  min-width: 175px;
}
.gallery-site .gallery-footer .footer-brand .brand-mark { height: 123px; }
.gallery-site .gallery-nav .nav-brand {
  width: 64px;
  min-width: 64px;
  height: 42px;
  padding: 0 12px;
  overflow: visible;
}
.gallery-site .gallery-nav .nav-brand .brand-mark {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 28px;
  flex-basis: 40px;
  overflow: visible;
  transform: none;
}
.gallery-site .gallery-nav .nav-brand .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 760px) {
  .gallery-site .gallery-footer .footer-brand,
  .gallery-site .gallery-footer .footer-brand .brand-mark { width: 145px; min-width: 145px; }
  .gallery-site .gallery-footer .footer-brand .brand-mark { height: 102px; }
}

/* ========================================================================== 
   ÁLBUM + FOTO — cartões e visualizador na paleta Demi Lovato
   ========================================================================== */

/* Cabeçalho do álbum: um cartão leve, título menor e um único coração em traço. */
.gallery-site .archive-browser .photo-browser-title {
  position: relative;
  min-height: 0;
  margin: 4px 0 34px;
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3.5vw, 46px);
  gap: 28px;
  overflow: hidden;
  border: 1px solid #1b1b1b;
  border-radius: 20px;
  background:
    radial-gradient(circle at 94% 10%, rgba(186, 183, 181,.28), transparent 27%),
    linear-gradient(135deg, rgba(186, 183, 181,.98), rgba(186, 183, 181,.94));
  box-shadow: 0 18px 42px rgba(74, 71, 71,.14);
}
.gallery-site .archive-browser .photo-browser-title::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -72px;
  width: 210px;
  height: 150px;
  border-radius: 50%;
  background: rgba(27, 27, 27,.12);
  filter: blur(38px);
  pointer-events: none;
}
.gallery-site .archive-browser .photo-browser-title > div {
  position: relative;
  z-index: 1;
}
.gallery-site .archive-browser .photo-browser-title > div:first-child > p {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1b1b1b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}
.gallery-site .archive-browser .photo-browser-title > div:first-child > p::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.7a5.5 5.5 0 0 0-7.8 0L12 5.8l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.3l7.8-7.7 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gallery-site .archive-browser .photo-browser-title h1 {
  max-width: 920px;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #1b1b1b;
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 650;
  line-height: 1.17;
  letter-spacing: -.035em;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gallery-site .archive-browser .photo-browser-tools {
  flex: 0 0 auto;
  align-self: center;
}
.gallery-site .archive-browser .thumbnail-size-switch {
  padding: 4px;
  display: inline-flex;
  border: 1px solid rgba(27, 27, 27,.18);
  border-radius: 12px;
  background: rgba(186, 183, 181,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.55);
}
.gallery-site .archive-browser .thumbnail-size-switch button {
  min-width: 72px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4a4747;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
}
.gallery-site .archive-browser .thumbnail-size-switch button.active {
  background: #1b1b1b;
  color: #bab7b5;
  box-shadow: 0 7px 18px rgba(27, 27, 27,.2);
}

/* Miniaturas do álbum com a mesma linguagem dos cartões da página inicial. */
.gallery-site .archive-browser .thumbnail-grid {
  max-width: 1160px;
  margin: 0 auto 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.2vw, 30px) !important;
  align-items: start;
}
.gallery-site .archive-browser .thumbnail-card {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.gallery-site .archive-browser .thumbnail-image {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #1b1b1b;
  border-radius: 20px;
  background: #bab7b5;
  box-shadow: 0 14px 34px rgba(74, 71, 71,.16);
  transition: transform .24s ease, box-shadow .24s ease;
}
.gallery-site .archive-browser .thumbnail-image img,
.gallery-site .archive-browser .thumbnail-image img.image {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  object-position: 50% 22%;
  border: 0 !important;
  border-radius: 13px !important;
  filter: none !important;
  opacity: .82;
  transform: none !important;
  transition: opacity .22s ease !important;
}
.gallery-site .archive-browser .thumbnail-card:hover .thumbnail-image {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(27, 27, 27,.17);
}
.gallery-site .archive-browser .thumbnail-card:hover .thumbnail-image img {
  opacity: 1;
  transform: none !important;
}
.gallery-site .archive-browser .thumbnail-image > span {
  display: none !important;
}
.gallery-site .archive-browser .thumbnail-meta-wrap {
  position: relative;
  min-height: 86px !important;
  margin: -1px 16px 0;
  padding: 29px 17px 15px !important;
  border: 1px solid #1b1b1b;
  border-top: 0;
  border-radius: 0 0 13px 13px;
  background: rgba(186, 183, 181,.96);
  box-shadow: 0 12px 28px rgba(74, 71, 71,.11);
}
.gallery-site .archive-browser .thumbnail-meta {
  min-height: 38px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.gallery-site .archive-browser .thumbnail-sequence {
  color: #1b1b1b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.gallery-site .archive-browser .thumbnail-views {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  min-height: 28px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(186, 183, 181,.7);
  border-radius: 7px;
  background: #1b1b1b;
  color: #bab7b5;
  box-shadow: 0 6px 15px rgba(27, 27, 27,.2);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.gallery-site .archive-browser .thumbnail-views b,
.gallery-site .archive-browser .thumbnail-views small {
  color: inherit !important;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.gallery-site .archive-browser .thumbnail-meta-icon {
  width: 12px;
  height: 12px;
}
.gallery-site .archive-browser .thumbnail-heart {
  position: static;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1px solid #1b1b1b;
  border-radius: 50%;
  background: rgba(186, 183, 181,.8);
  color: #1b1b1b;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.gallery-site .archive-browser .thumbnail-heart:hover,
.gallery-site .archive-browser .thumbnail-heart.is-saved {
  background: #1b1b1b;
  color: #bab7b5;
  transform: translateY(-1px);
}
.gallery-site .archive-browser .thumbnail-heart-icon {
  width: 15px;
  height: 15px;
}

/* Visualizador: mesma composição do tema Justin, reconstruída na paleta. */
.gallery-site .archive-browser .cpg-photo-bar {
  position: relative;
  min-height: 68px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1px solid #1b1b1b;
  border-radius: 16px;
  background: rgba(186, 183, 181,.94);
  box-shadow: 0 14px 32px rgba(74, 71, 71,.12);
}
.gallery-site .archive-browser .cpg-photo-pos {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #1b1b1b;
  font-size: 9px;
  transform: translate(-50%, -50%);
}
.gallery-site .archive-browser .cpg-photo-bar a {
  min-height: 42px;
  padding: 0 15px;
  border-color: #1b1b1b;
  border-radius: 11px;
  background: #bab7b5;
  color: #1b1b1b;
  box-shadow: none;
}
.gallery-site .archive-browser .cpg-photo-bar a:hover {
  border-color: #1b1b1b;
  background: #1b1b1b;
  color: #bab7b5;
}
.gallery-site .archive-browser .cpg-photo-bar .cpg-photo-back {
  border-color: #1b1b1b;
  background: #1b1b1b;
  color: #bab7b5;
}
.gallery-site .archive-browser .cpg-photo-bar .cpg-photo-back:hover {
  border-color: #1b1b1b;
  background: #1b1b1b;
}
.gallery-site .archive-browser .cpg-photo-steps a {
  width: 42px;
  padding: 0;
  border-radius: 0;
}
.gallery-site .archive-browser .cpg-photo-steps a:first-child { border-radius: 11px 0 0 11px; }
.gallery-site .archive-browser .cpg-photo-steps a:last-child { border-radius: 0 11px 11px 0; }
.gallery-site .archive-browser .cpg-photo {
  position: relative;
  margin: 0;
}
.gallery-site .archive-browser .cpg-photo-stage {
  min-height: min(72vh, 820px);
  padding: clamp(20px, 3vw, 38px);
  display: grid;
  place-items: center;
  border: 1px solid #1b1b1b;
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 12%, rgba(186, 183, 181,.2), transparent 28%),
    linear-gradient(145deg, rgba(186, 183, 181,.97), rgba(186, 183, 181,.9));
  box-shadow: 0 20px 46px rgba(74, 71, 71,.13);
}
.gallery-site .archive-browser .cpg-photo-stage img {
  max-height: min(66vh, 760px);
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 15px 34px rgba(27, 27, 27,.12);
}
.gallery-site .archive-browser .cpg-stage-nav {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #1b1b1b;
  border-radius: 50%;
  background: rgba(186, 183, 181,.92);
  color: #1b1b1b;
  box-shadow: 0 10px 24px rgba(27, 27, 27,.12);
  transform: translateY(-50%);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.gallery-site .archive-browser .cpg-stage-prev { left: 22px; }
.gallery-site .archive-browser .cpg-stage-next { right: 22px; }
.gallery-site .archive-browser .cpg-stage-nav:hover {
  background: #1b1b1b;
  color: #bab7b5;
  transform: translateY(-50%) scale(1.04);
}
.gallery-site .archive-browser .cpg-filmstrip {
  position: relative;
  margin-top: 18px;
  padding: 18px 190px 18px 18px;
  overflow: hidden;
  border: 1px solid #1b1b1b;
  border-radius: 16px;
  background: rgba(186, 183, 181,.94);
  box-shadow: 0 14px 32px rgba(74, 71, 71,.1);
}
.gallery-site .archive-browser .cpg-filmstrip .thumbLink {
  padding: 2px;
  border-color: transparent;
  border-radius: 10px;
  background: #bab7b5;
}
.gallery-site .archive-browser .cpg-filmstrip img {
  border-radius: 7px !important;
  filter: none;
  opacity: .46;
  transform: none !important;
}
.gallery-site .archive-browser .cpg-filmstrip a:hover img,
.gallery-site .archive-browser .cpg-filmstrip img.middlethumb {
  opacity: 1;
  filter: none;
  transform: none !important;
}
.gallery-site .archive-browser .cpg-filmstrip td.thumb:has(img.middlethumb) .thumbLink {
  border-color: #1b1b1b;
  box-shadow: 0 0 0 2px #1b1b1b;
}
.gallery-site .archive-browser .cpg-filmstrip .prev_strip a,
.gallery-site .archive-browser .cpg-filmstrip .next_strip a {
  border-color: #1b1b1b;
  background: #bab7b5;
}
.gallery-site .archive-browser .cpg-filmstrip .prev_strip a:hover,
.gallery-site .archive-browser .cpg-filmstrip .next_strip a:hover {
  border-color: #1b1b1b;
  background: #1b1b1b;
}
.gallery-site .archive-browser .cpg-photo-meta {
  position: absolute;
  right: 20px;
  top: 50%;
  min-width: 145px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-left: 1px solid #1b1b1b;
  transform: translateY(-50%);
}
.gallery-site .archive-browser .cpg-current-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #1b1b1b;
}
.gallery-site .archive-browser .cpg-current-views b,
.gallery-site .archive-browser .cpg-current-views small {
  color: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.gallery-site .archive-browser .cpg-current-heart {
  position: static;
  border-color: #1b1b1b;
  background: #bab7b5;
  color: #1b1b1b;
}
.gallery-site .archive-browser .cpg-current-heart:hover,
.gallery-site .archive-browser .cpg-current-heart.is-saved {
  background: #1b1b1b;
  color: #bab7b5;
}
.gallery-site .archive-browser .maintable:has(#voting_title) {
  display: none;
}

@media (max-width: 900px) {
  .gallery-site .archive-browser .thumbnail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .gallery-site .archive-browser .photo-browser-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .gallery-site .archive-browser .cpg-photo-pos { display: none; }
  .gallery-site .archive-browser .cpg-filmstrip { padding-right: 18px; padding-bottom: 76px; }
  .gallery-site .archive-browser .cpg-photo-meta {
    left: 18px;
    right: 18px;
    top: auto;
    bottom: 17px;
    min-width: 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid #1b1b1b;
    transform: none;
  }
}
@media (max-width: 600px) {
  .gallery-site .archive-browser .thumbnail-grid {
    grid-template-columns: 1fr !important;
  }
  .gallery-site .archive-browser .photo-browser-title { border-radius: 15px; }
  .gallery-site .archive-browser .thumbnail-size-switch button { min-width: 62px; padding: 0 9px; }
  .gallery-site .archive-browser .cpg-photo-bar { align-items: flex-start; }
  .gallery-site .archive-browser .cpg-photo-bar-right { width: 100%; justify-content: flex-end; }
  .gallery-site .archive-browser .cpg-stage-prev { left: 10px; }
  .gallery-site .archive-browser .cpg-stage-next { right: 10px; }
}

/* ========================================================================== 
   LOGIN DO COPPERMINE — cartão editorial na paleta do tema
   ========================================================================== */
.gallery-site .archive-browser:has(input[name="username"]) {
  position: relative;
  padding-top: clamp(34px, 5vw, 72px);
  padding-bottom: clamp(70px, 9vw, 130px);
  background:
    radial-gradient(circle at 18% 18%, rgba(186, 183, 181,.32), transparent 27%),
    radial-gradient(circle at 88% 78%, rgba(27, 27, 27,.15), transparent 24%),
    #bab7b5;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) {
  position: relative;
  width: min(650px, calc(100vw - 36px)) !important;
  margin: 0 auto !important;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(221,192,202,.94);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(186, 183, 181,.24), transparent 31%),
    linear-gradient(145deg, rgba(186, 183, 181,.98), rgba(186, 183, 181,.96));
  box-shadow:
    0 32px 74px rgba(27, 27, 27,.14),
    0 10px 28px rgba(74, 71, 71,.18),
    inset 0 1px rgba(255,255,255,.65);
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tbody {
  width: 100%;
  padding: clamp(27px, 4vw, 46px);
  display: grid;
  gap: 15px;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr,
.gallery-site .archive-browser table.maintable:has(input[name="username"]) td {
  width: 100% !important;
  display: block;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:first-child {
  margin-bottom: 12px;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) .cpg-title-cell {
  padding: 0;
  border: 0;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) .archive-section-title {
  min-height: 0;
  padding: 0;
  border: 0;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) .archive-section-title > div {
  width: 100%;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) .archive-section-title span:first-child {
  color: #1b1b1b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) .archive-section-title h2 {
  max-width: 510px;
  margin: 13px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  color: #1b1b1b;
  font-size: clamp(25px, 3.2vw, 37px);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) .cpg-title-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  margin-top: 3px;
  display: block;
  border: 1px solid rgba(27, 27, 27,.42);
  border-radius: 50%;
  background: rgba(186, 183, 181,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.7a5.5 5.5 0 0 0-7.8 0L12 5.8l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.3l7.8-7.7 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 7px 16px rgba(74, 71, 71,.14);
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) .cpg-title-icon > * {
  display: none;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(input[name="username"]),
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(input[name="password"]) {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(input[name="username"]) td,
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(input[name="password"]) td {
  padding: 0;
  border: 0;
  background: transparent;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(input[name="username"]) td:first-child,
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(input[name="password"]) td:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #1b1b1b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(input[name="username"]) td:first-child img,
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(input[name="password"]) td:first-child img {
  width: 15px !important;
  height: 15px !important;
  opacity: .72;
  filter: sepia(.35) saturate(2.1) hue-rotate(286deg) brightness(.88);
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) input.textinput {
  width: 100% !important;
  height: 54px;
  padding: 0 17px;
  border: 1px solid #1b1b1b;
  border-radius: 14px;
  outline: 0;
  background: rgba(186, 183, 181,.8) !important;
  color: #1b1b1b !important;
  box-shadow: inset 0 1px rgba(255,255,255,.7);
  font: inherit;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) input.textinput:-webkit-autofill,
.gallery-site .archive-browser table.maintable:has(input[name="username"]) input.textinput:-webkit-autofill:hover,
.gallery-site .archive-browser table.maintable:has(input[name="username"]) input.textinput:-webkit-autofill:focus {
  -webkit-text-fill-color: #1b1b1b !important;
  box-shadow: inset 0 0 0 1000px #bab7b5 !important;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) input.textinput:focus {
  border-color: #1b1b1b;
  background: #bab7b5 !important;
  box-shadow: 0 0 0 4px rgba(27, 27, 27,.12), inset 0 1px rgba(255,255,255,.75);
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(#remember_me) {
  margin: 1px 0 2px;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:has(#remember_me) td {
  padding: 5px 2px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #1b1b1b;
  font-size: 10px;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) #remember_me {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1b1b1b;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:last-child {
  margin-top: 3px;
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(221,192,202,.9);
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:last-child td {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:last-child td:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:last-child br {
  display: none;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) a.topmenu {
  color: #1b1b1b;
  font-size: 9px;
  font-weight: 760;
  text-decoration: none;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) a.topmenu:hover {
  color: #1b1b1b;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) button.button {
  position: relative;
  min-width: 112px;
  height: 46px;
  padding: 0 20px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 13px;
  background: #1b1b1b;
  color: #bab7b5;
  box-shadow: 0 12px 25px rgba(27, 27, 27,.2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) button.button::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -65%;
  width: 42%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) button.button:hover {
  background: #1b1b1b;
  box-shadow: 0 16px 30px rgba(27, 27, 27,.27);
  transform: translateY(-2px);
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) button.button:hover::after {
  left: 125%;
}
.gallery-site .archive-browser table.maintable:has(input[name="username"]) button.button img {
  display: none;
}
@media (max-width: 620px) {
  .gallery-site .archive-browser table.maintable:has(input[name="username"]) tbody {
    padding: 27px 21px;
  }
  .gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:last-child {
    grid-template-columns: 1fr;
  }
  .gallery-site .archive-browser table.maintable:has(input[name="username"]) tr:last-child td:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .gallery-site .archive-browser table.maintable:has(input[name="username"]) button.button {
    width: 100%;
  }
}

/* Mensagens temporárias de entrada e saída do Coppermine. */
.gallery-site #cpgMessage.cpg_user_message {
  position: relative;
  width: min(720px, calc(100vw - 36px));
  min-height: 70px;
  margin: 26px auto 34px;
  padding: 18px 58px 18px 70px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #1b1b1b;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(186, 183, 181,.3), transparent 32%),
    linear-gradient(135deg, rgba(186, 183, 181,.98), rgba(186, 183, 181,.96));
  color: #1b1b1b;
  box-shadow: 0 16px 38px rgba(74, 71, 71,.16), inset 0 1px rgba(255,255,255,.65);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
  animation: arq-message-in .38s ease-out both;
}
.gallery-site #cpgMessage.cpg_user_message::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(27, 27, 27,.46);
  border-radius: 50%;
  background: rgba(186, 183, 181,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.7a5.5 5.5 0 0 0-7.8 0L12 5.8l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.3l7.8-7.7 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E") center / 17px no-repeat;
  box-shadow: 0 7px 18px rgba(74, 71, 71,.15);
  transform: translateY(-50%);
}
.gallery-site #cpgMessage.cpg_user_message::after {
  content: "";
  position: absolute;
  right: -32px;
  top: -52px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(27, 27, 27,.12);
  filter: blur(32px);
  pointer-events: none;
}
.gallery-site #cpgMessage.cpg_message_success,
.gallery-site #cpgMessage.cpg_message_info,
.gallery-site #cpgMessage.cpg_message_warning,
.gallery-site #cpgMessage.cpg_message_error,
.gallery-site #cpgMessage.cpg_message_validation {
  border-left: 1px solid #1b1b1b;
}
@keyframes arq-message-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
  .gallery-site #cpgMessage.cpg_user_message {
    min-height: 62px;
    padding: 15px 22px 15px 62px;
    border-radius: 15px;
    font-size: 11px;
  }
  .gallery-site #cpgMessage.cpg_user_message::before {
    left: 16px;
    width: 31px;
    height: 31px;
  }
}

/* Cabeçalho da tabela de categorias: somente ÁLBUNS e FOTOS, alinhados aos números. */
.gallery-home .category-section .archive-section-title > p b:first-child {
  display: none !important;
}
.gallery-home .category-section .archive-section-title > p b:nth-child(2) {
  grid-column: 1;
}
.gallery-home .category-section .archive-section-title > p b:nth-child(3) {
  grid-column: 2;
}
.gallery-home .category-section .archive-section-title > p {
  width: 204px;
  margin-right: 12px;
  grid-template-columns: 72px 72px 28px;
  column-gap: 16px;
}

/* Prioridade final do topo das páginas internas. */
.gallery-site .gallery-topbar.archive-mode {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.gallery-site .archive-subhero {
  height: clamp(300px, 25vw, 580px) !important;
  min-height: 0 !important;
  background: #bab7b5 !important;
  box-shadow: none !important;
}
.gallery-site .archive-subhero::before { display: none !important; }
.gallery-site .archive-subhero-photo {
  inset: 0 !important;
  background-color: #bab7b5 !important;
  background-image: var(--arq-hero-image) !important;
  background-position: center 32% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}
.gallery-site .archive-subhero::after {
  background:
    linear-gradient(90deg, #bab7b5 0%, rgba(186, 183, 181,.72) 7%, transparent 20% 80%, rgba(186, 183, 181,.72) 93%, #bab7b5 100%),
    linear-gradient(180deg, transparent 60%, rgba(186, 183, 181,.18) 72%, rgba(186, 183, 181,.7) 89%, #bab7b5 100%) !important;
}

/* Topo das páginas internas: foto completa, menu flutuante e blend rosa. */
.gallery-site .gallery-topbar.archive-mode {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.gallery-site .archive-subhero {
  height: clamp(300px, 25vw, 580px) !important;
  min-height: 0 !important;
  background: #bab7b5 !important;
  box-shadow: none !important;
}
.gallery-site .archive-subhero::before {
  display: none !important;
}
.gallery-site .archive-subhero-photo {
  inset: 0 !important;
  background-color: #bab7b5 !important;
  background-image: var(--arq-hero-image) !important;
  background-position: center 32% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}
.gallery-site .archive-subhero::after {
  background:
    linear-gradient(90deg, #bab7b5 0%, rgba(186, 183, 181,.72) 7%, transparent 20% 80%, rgba(186, 183, 181,.72) 93%, #bab7b5 100%),
    linear-gradient(180deg, transparent 60%, rgba(186, 183, 181,.18) 72%, rgba(186, 183, 181,.7) 89%, #bab7b5 100%) !important;
}

/* ================================================================
   Correções isoladas — não alcançam a página principal
   ================================================================ */
:root {
  --dlp-body: #bab7b5;
  --dlp-surface: #bab7b5;
  --dlp-pink: #bab7b5;
  --dlp-blue: #1b1b1b;
  --dlp-blue-dark: #1b1b1b;
  --dlp-muted: #1b1b1b;
  --dlp-border: #1b1b1b;
  --dlp-image-border: #1b1b1b;
}

/* Páginas internas: hero menor, sem preto/cinza e sem título sobreposto. */
.gallery-site .archive-subhero {
  height: clamp(300px, 25vw, 580px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  place-items: stretch;
  overflow: hidden;
  isolation: isolate;
  background: var(--dlp-pink) !important;
  box-shadow: none !important;
}
.gallery-site .archive-subhero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -5%;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(27, 27, 27,.72), transparent 38%),
    radial-gradient(ellipse at 90% 45%, rgba(27, 27, 27,.62), transparent 39%),
    linear-gradient(90deg, rgba(186, 183, 181,.52), transparent 29% 71%, rgba(186, 183, 181,.52));
  filter: blur(30px) !important;
  opacity: .9;
  animation: none !important;
  display: none !important;
}
.gallery-site .archive-subhero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #bab7b5 0%, rgba(186, 183, 181,.72) 7%, transparent 20% 80%, rgba(186, 183, 181,.72) 93%, #bab7b5 100%),
    linear-gradient(180deg, transparent 60%, rgba(186, 183, 181,.18) 72%, rgba(186, 183, 181,.7) 89%, #bab7b5 100%) !important;
}
.gallery-site .archive-subhero-photo {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 50% !important;
  width: min(76vw, 1800px) !important;
  height: 100% !important;
  aspect-ratio: auto;
  transform: translateX(-50%);
  background: #bab7b5 var(--arq-hero-image) center 32% / cover no-repeat !important;
  filter: none !important;
  opacity: 1;
  animation: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 7%, #000 19%, #000 81%, rgba(0,0,0,.22) 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 7%, #000 19%, #000 81%, rgba(0,0,0,.22) 93%, transparent 100%);
}
.gallery-site .archive-subhero-glitch,
.gallery-site .archive-subhero-title { display: none !important; }
.gallery-site .gallery-topbar.archive-mode {
  position: absolute !important;
  inset: 0 0 auto !important;
  z-index: 20;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Conteúdo interno somente quando ele vem depois do subhero. */
.gallery-site .archive-subhero + .archive-browser {
  background:
    linear-gradient(180deg, rgba(186, 183, 181,.96) 0%, rgba(186, 183, 181,.76) 62px, rgba(186, 183, 181,.34) 150px, rgba(186, 183, 181,0) 265px),
    var(--dlp-body) !important;
  color: var(--dlp-blue-dark) !important;
}
.gallery-site .archive-subhero + .archive-content {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}
.gallery-site .archive-subhero + .archive-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 280px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(186, 183, 181,.98) 0%,
    rgba(186, 183, 181,.82) 66px,
    rgba(186, 183, 181,.46) 150px,
    rgba(186, 183, 181,0) 275px);
}
.gallery-site .archive-subhero + .archive-browser :where(.maintable, .tableb, .tableb_alternate,
  .tablef, fieldset, .category-group, .category-row, .category-years-panel,
  .cpg-panel, .cpg-info-card, .cpg-empty-state) {
  background: var(--dlp-surface) !important;
  border-color: var(--dlp-border) !important;
  color: var(--dlp-blue-dark) !important;
}
.gallery-site .archive-subhero + .archive-browser :where(.tableh1, .tableh2, legend, th) {
  background: var(--dlp-pink) !important;
  border-color: var(--dlp-border) !important;
  color: var(--dlp-blue-dark) !important;
}
.gallery-site .archive-subhero + .archive-browser :where(h1, h2, h3, h4, a, strong, b, span, p, small, td, label) {
  color: var(--dlp-blue-dark) !important;
  border-color: var(--dlp-border) !important;
}
.gallery-site .archive-subhero + .archive-browser :where(input, select, textarea) {
  background: var(--dlp-surface) !important;
  border-color: var(--dlp-border) !important;
  color: var(--dlp-blue-dark) !important;
}
.gallery-site .archive-subhero + .archive-browser :where(.category-thumb, .category-row > a,
  .category-row > img, .category-row > .cpg-no-thumb) {
  border: 3px solid var(--dlp-image-border) !important;
  background: var(--dlp-surface) !important;
  box-sizing: border-box;
}
.gallery-site .archive-subhero + .archive-browser .cpg-photo-stage {
  background: var(--dlp-blue-dark) !important;
}

/* Painel: paleta própria, completamente isolada da home. */
.admin-shell,
.admin-shell .admin-main,
.admin-shell .admin-content { background: var(--dlp-body) !important; color: var(--dlp-blue-dark) !important; }
.admin-shell .admin-sidebar,
.admin-shell .admin-topbar { background: var(--dlp-blue) !important; border-color: var(--dlp-border) !important; color: var(--dlp-surface) !important; }
.admin-shell :where(.admin-nav-item, .admin-sidebar nav a, .admin-sidebar nav button,
  .back-to-gallery, .logout-entry, .admin-logout, .view-site) {
  color: var(--dlp-surface) !important;
  border-color: var(--dlp-pink) !important;
}
.admin-shell :where(.admin-nav-item:hover, .admin-nav-item.active,
  .admin-sidebar nav a:hover, .admin-sidebar nav a.active,
  .admin-sidebar nav button:hover, .admin-sidebar nav button.active,
  .workspace-pill, .storage-card, .user-menu > span) {
  background: var(--dlp-blue-dark) !important;
  border-color: var(--dlp-pink) !important;
  color: var(--dlp-surface) !important;
}
.admin-shell :where(.admin-nav-item.active, .admin-sidebar nav a.active,
  .admin-sidebar nav button.active)::before { background: var(--dlp-pink) !important; }
.admin-shell :where(.maintable, .tableh1, .tableh2, .tableb, .tableb_alternate, .tablef,
  fieldset, .settings-card, .stat-card, .panel-card, .site-status, .quick-action,
  .dropzone, .appearance-save-bar, .media-toolbar, .media-toolbar label) {
  background: var(--dlp-surface) !important;
  border-color: var(--dlp-border) !important;
  color: var(--dlp-blue-dark) !important;
  box-shadow: none !important;
}
.admin-shell :where(h1, h2, h3, h4, strong, label, legend, th, td, a, p, small, span) {
  border-color: var(--dlp-border) !important;
}
.admin-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: var(--dlp-surface) !important;
  border-color: var(--dlp-border) !important;
  color: var(--dlp-blue-dark) !important;
  outline: 0 !important;
}
.admin-shell :where(.button, button.button, input[type="submit"], input[type="button"],
  .buttonlist a, .new-upload, .save-button) {
  background: var(--dlp-blue) !important;
  border-color: var(--dlp-blue) !important;
  color: var(--dlp-surface) !important;
}
.upload-modal { background: rgba(27, 27, 27,.72) !important; }
.upload-dialog, .category-create-dialog { background: var(--dlp-body) !important; color: var(--dlp-blue-dark) !important; }
.upload-dialog > header, .category-create-dialog > header { background: var(--dlp-blue) !important; color: var(--dlp-surface) !important; }

/* Menu móvel sem preto; única mudança cromática permitida na home. */
.gallery-site .mobile-nav-menu { background: rgba(27, 27, 27,.97) !important; color: var(--dlp-surface) !important; }
.gallery-site .mobile-nav-toggle,
.gallery-site .mobile-nav-toggle :where(span, i, svg, path) { color: var(--dlp-pink) !important; }
.gallery-site .mobile-nav-toggle :where(span, i) { background-color: var(--dlp-pink) !important; }

/* Logo completo do menu: asset quadrado com margem real, sem recorte. */
.gallery-site .gallery-nav .nav-brand {
  width: 64px !important;
  min-width: 64px !important;
  height: 42px !important;
  padding: 0 5px !important;
  overflow: visible !important;
}
.gallery-site .gallery-nav .nav-brand .brand-mark {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 38px !important;
  flex-basis: 54px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
  background: #1b1b1b !important;
}
.gallery-site .gallery-nav .nav-brand .brand-mark img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  object-position: center !important;
}

/* Única mudança solicitada no rodapé da home. */
.gallery-site .gallery-footer .footer-copy p { color: #bab7b5 !important; }
.gallery-site .gallery-footer .footer-site-name { white-space: nowrap; }
.gallery-site .gallery-footer .footer-site-name .footer-name-pink { color: #bab7b5 !important; }
.gallery-site .gallery-footer .footer-site-name .footer-name-white { color: #f7f6f4 !important; }

@media (max-width: 760px) {
  .gallery-site .archive-subhero { height: 230px; }
}

/* Tipografia do painel: elimina o preto sem escapar do admin. */
.admin-shell :where(h1, h2, h3, h4, h5, p, a, span, strong, b, small, em,
  label, legend, td, th) {
  color: var(--dlp-blue-dark) !important;
}
.admin-shell :where(.admin-sidebar, .admin-topbar)
  :where(a, span, strong, b, small, em, button, svg) {
  color: var(--dlp-surface) !important;
}
.admin-shell .admin-title-row p,
.admin-shell .panel-title p,
.admin-shell .stat-card p { color: var(--dlp-muted) !important; }

/* Cartões de ano das categorias internas: nenhum branco/preto nativo. */
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a) {
  background: var(--dlp-surface) !important;
  border: 1px solid var(--dlp-border) !important;
  color: var(--dlp-blue-dark) !important;
  box-shadow: 0 10px 24px rgba(27, 27, 27,.08);
}
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a) strong,
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a) span {
  color: var(--dlp-blue-dark) !important;
}
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a) small {
  color: var(--dlp-muted) !important;
}
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a):hover,
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a):focus-visible {
  background: var(--dlp-blue) !important;
  border-color: var(--dlp-blue) !important;
  color: #bab7b5 !important;
  box-shadow: 0 12px 28px rgba(27, 27, 27,.2);
  transform: translateY(-2px);
}
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a):hover :where(strong, span),
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a):focus-visible :where(strong, span) {
  color: #bab7b5 !important;
}
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a):hover small,
.gallery-site .archive-subhero + .archive-browser .category-year-buttons :where(button, a):focus-visible small {
  color: #bab7b5 !important;
}

.modal-backdrop-action { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; cursor: default; z-index: 0; }
.login-card, .lightbox-image, .upload-dialog, .category-create-dialog, .move-album-dialog, .media-editor-dialog { position: relative; z-index: 1; }

/* Migração direta do Coppermine */
.migration-manager { display: grid; gap: 16px; }
.migration-form-card, .migration-preview-card, .migration-history { padding: 26px; }
.migration-form-card > header, .migration-history > header { margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.migration-form-card > header p, .migration-preview-heading p, .migration-history > header p { margin: 0 0 5px; color: #8a8a85; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.migration-form-card > header h2, .migration-preview-heading h2, .migration-history > header h2 { margin: 0; font-size: 25px; font-weight: 520; letter-spacing: -.035em; }
.migration-queue { display: grid; gap: 14px; }
.migration-entry { display: grid; gap: 10px; padding: 16px; border: 1px solid #e2e2dd; border-radius: 8px; background: #fafaf8; }
.migration-entry-head { display: flex; align-items: center; justify-content: space-between; }
.migration-entry-head span { font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: #666; }
.migration-source, .migration-entry-grid label { min-width: 0; display: grid; gap: 7px; }
.migration-source > span:first-child, .migration-entry-grid label span { font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.migration-entry input, .migration-entry select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #cdcdc8; border-radius: 5px; background: #fff; color: #111; font: inherit; font-size: 11px; }
.migration-entry-grid { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(160px, 1fr) 100px minmax(130px, 1fr); gap: 10px; }
.migration-mode-switch { display: flex; gap: 6px; }
.migration-mode-switch button ,
.migration-mode-switch a { min-height: 32px; padding: 0 12px; border: 1px solid #cdcdc8; border-radius: 999px; background: #fff; color: #555; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.migration-mode-switch button.active ,
.migration-mode-switch a.active { border-color: #111; background: #111; color: #f7f6f4; }
.migration-source-row { display: flex; gap: 8px; align-items: center; }
.migration-source-row input { flex: 1; }
.migration-detect-button { flex: 0 0 auto; min-height: 44px; padding: 0 14px; white-space: nowrap; border: 1px solid #cdcdc8; border-radius: 5px; background: #fff; color: #333; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.migration-detect-button:hover:not(:disabled) { background: #f2f2ee; }
.migration-detect-button:disabled { opacity: .5; }
.migration-remove-url { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid #cdcdc8; border-radius: 5px; background: #fff; color: #b3261e; font-size: 16px; line-height: 1; }
.migration-remove-url:hover { background: #fbeceb; }
.migration-add-url { justify-self: start; min-height: 38px; padding: 0 14px; border: 1px dashed #b8b8b2; border-radius: 999px; background: transparent; color: #444; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.migration-add-url:hover { border-style: solid; background: #f2f2ee; }
.migration-submit { justify-self: start; min-height: 46px; padding: 0 22px; white-space: nowrap; }
.migration-safety { margin-top: 14px; padding: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; border: 1px solid #d8d8d3; border-radius: 6px; background: #f7f7f4; color: #555; font-size: 10px; }
.migration-safety span::first-letter { color: #159947; }
.migration-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.migration-preview-heading > div > span { display: block; margin-top: 7px; color: #777; font-size: 10px; }
.migration-status { padding: 7px 10px; border-radius: 999px; background: #e8e8e4; color: #333; font-size: 9px; text-transform: uppercase; }
.migration-status.status-ready { background: #111; color: #f7f6f4; }
.migration-status.status-importing { background: #e5f0ff; color: #135baf; }
.migration-status.status-completed { background: #def4e5; color: #18733a; }
.migration-status.status-completed_with_errors, .migration-status.status-failed { background: #ffe7e4; color: #a12219; }
.migration-progress { margin: 20px 0 16px; padding: 15px; border: 1px solid #d8d8d3; border-radius: 6px; background: #fafaf8; }
.migration-progress > div { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }
.migration-progress progress { width: 100%; height: 9px; accent-color: #111; }
.migration-progress small { display: block; margin-top: 8px; color: #777; font-size: 9px; }
.migration-album-list { max-height: 310px; overflow-y: auto; border: 1px solid #ddd; border-radius: 6px; }
.migration-album-list article { min-height: 58px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e2e2de; }
.migration-album-list article:last-child { border-bottom: 0; }
.migration-album-list article strong, .migration-album-list article small { display: block; }
.migration-album-list article strong { font-size: 11px; }
.migration-album-list article small { margin-top: 4px; color: #777; font-size: 9px; }
.migration-album-list article > b { font-size: 10px; white-space: nowrap; }
.migration-warnings { margin-top: 12px; display: grid; gap: 5px; color: #945014; font-size: 9px; }
.migration-preview-card > footer { margin-top: 16px; display: flex; justify-content: flex-end; }
.migration-history > div:last-child { display: grid; gap: 6px; }
.migration-history-row { display: flex; align-items: stretch; gap: 8px; }
.migration-history-row > button:first-child ,
.migration-history-row > a:first-child { flex: 1; min-width: 0; min-height: 58px; padding: 9px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #111; text-align: left; }
.migration-history-row > button:first-child:hover ,
.migration-history-row > a:first-child:hover { background: #f3f3f0; }
.migration-history-delete { flex: 0 0 36px; width: 36px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #999; font-size: 16px; }
.migration-history-delete:hover { background: #fdeaea; color: #c0392b; border-color: #e7b9b9; }
.migration-history button strong, .migration-history button small ,
.migration-history a strong, .migration-history a small { display: block; }
.migration-history button strong ,
.migration-history a strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.migration-history button small ,
.migration-history a small { margin-top: 4px; color: #777; font-size: 9px; }
.migration-history button > span ,
.migration-history a > span { color: #777; font-size: 9px; }
.migration-history button > b ,
.migration-history a > b { font-size: 10px; }

@media (max-width: 980px) {
  .migration-entry-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .migration-form-card, .migration-preview-card, .migration-history { padding: 18px; }
  .migration-entry-grid, .migration-safety { grid-template-columns: 1fr; }
  .migration-submit { width: 100%; }
  .migration-preview-heading { align-items: flex-start; flex-direction: column; }
  .migration-history > div:last-child > button ,
  .migration-history > div:last-child > a { grid-template-columns: minmax(0, 1fr) auto; }
  .migration-history button > span ,
  .migration-history a > span { display: none; }
}

/* "Últimos álbuns atualizados" cards: clamp the title to 2 lines with an
   ellipsis instead of overflowing when the album name is long. */
.album-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }

/* Clicking the empty padding around the lightbox photo should close it,
   same as clicking anywhere else outside the image. Rather than making the
   whole container a click target (which would need extra a11y wiring),
   let clicks in that padding fall through to the .modal-backdrop-action
   button underneath, and only re-enable pointer events on the actual
   interactive content (image, quick actions). */
.lightbox-image ,
   let clicks in that padding fall through to the .modal-backdrop-action
   a underneath{ pointer-events: none; }
.lightbox-image > * { pointer-events: auto; }

/* Public-media intelligence monitor with delayed disclosure safeguards. */
.monitor-command-bar { min-height: 70px; margin-bottom: 9px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #d8d8d3; border-radius: 8px; background: #111; color: #f7f6f4; }
.monitor-command-copy { min-width: 0; display: flex; align-items: center; gap: 12px; }.monitor-command-copy > div { display: grid; gap: 4px; }
.monitor-command-copy strong { font-size: 12px; }.monitor-command-copy small { color: #aaa; font-size: 10px; line-height: 1.45; }
.monitor-live-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #45d17d; box-shadow: 0 0 0 5px rgba(69, 209, 125, .12); }
.monitor-command-bar > button ,
.monitor-command-bar > a { min-height: 38px; padding: 0 14px; border: 1px solid #444; border-radius: 5px; background: #fff; color: #111; font-size: 9px; font-weight: 900; white-space: nowrap; text-transform: uppercase; }
.monitor-command-bar > button:disabled ,
.monitor-command-bar > a:disabled { opacity: .65; }.monitor-stat-grid { margin-bottom: 9px; }
.monitor-view-tabs { margin-bottom: 9px; padding: 0 17px; display: flex; gap: 25px; border: 1px solid #d8d8d3; border-radius: 7px; background: #fff; }
.monitor-view-tabs button ,
.monitor-view-tabs a { min-height: 49px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #7d7d77; font: inherit; font-size: 10px; font-weight: 800; }
.monitor-view-tabs button.active ,
.monitor-view-tabs a.active { border-color: #111; color: #111; }.monitor-view-tabs span { margin-left: 5px; padding: 2px 5px; border-radius: 8px; background: #eeeeea; font-size: 8px; }
.monitor-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.monitor-section-heading.compact { margin-bottom: 12px; }.monitor-section-heading > div { display: grid; gap: 5px; }
.monitor-section-heading p { margin: 0; color: #888; font-size: 8px; font-weight: 900; letter-spacing: .13em; }.monitor-section-heading h2 { margin: 0; font-family: var(--font-serif), Georgia, serif; font-size: 20px; font-weight: 500; }.monitor-section-heading span { color: #85857f; font-size: 9px; }
.monitor-connections { padding: 25px; border: 1px solid #d8d8d3; border-radius: 8px; background: #fff; }
.monitor-connector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.monitor-connector-card { min-width: 0; padding: 17px; border: 1px solid #d8d8d3; border-radius: 7px; background: #fafaf8; }.monitor-connector-card.connected { border-top: 3px solid #168148; }.monitor-connector-card.error { border-top: 3px solid #b44732; }.monitor-connector-card.setup { border-top: 3px solid #b7b7b0; }
.monitor-connector-card header { display: grid; grid-template-columns: 38px minmax(0, 1fr) 8px; align-items: center; gap: 10px; }.monitor-connector-card header > div { min-width: 0; display: grid; gap: 3px; }.monitor-connector-card header strong { font-size: 11px; }.monitor-connector-card header small { color: #898983; font-size: 8px; }.monitor-connector-card header i { width: 7px; height: 7px; border-radius: 50%; background: #aaa; }.monitor-connector-card.connected header i { background: #21a55c; }.monitor-connector-card.error header i { background: #b44732; }
.monitor-platform-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: #161616; color: #f7f6f4; font-size: 14px; font-style: normal; font-weight: 900; }.monitor-platform-mark.instagram { background: #7a345c; }.monitor-platform-mark.telegram { background: #2d779f; }.monitor-platform-mark.news { background: #716957; }
.monitor-connector-card > p { min-height: 42px; margin: 16px 0 12px; color: #666; font-size: 9px; line-height: 1.5; }.monitor-connector-card ul { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; color: #555; font-size: 8px; }.monitor-connector-card li::first-letter { color: #168148; }
.monitor-connector-card footer { margin-top: 17px; padding-top: 11px; display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #e2e2dd; color: #8b8b85; font-size: 8px; }
.monitor-setup-panel { margin-top: 12px; padding: 20px; display: grid; grid-template-columns: .8fr 1.5fr; gap: 20px; border: 1px solid #d8d8d3; border-radius: 7px; background: #f4f4f0; }.monitor-setup-panel > div { display: grid; align-content: start; gap: 5px; }.monitor-setup-panel p { margin: 0; color: #85857f; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.monitor-setup-panel h3 { margin: 0; font-family: var(--font-serif), Georgia, serif; font-size: 18px; font-weight: 500; }.monitor-setup-panel ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; counter-reset: setup; }.monitor-setup-panel li { padding: 11px; display: grid; gap: 5px; border-left: 2px solid #bbb; background: #fff; }.monitor-setup-panel li strong { font-size: 9px; }.monitor-setup-panel li span, .monitor-setup-panel > small { color: #777; font-size: 8px; line-height: 1.45; }.monitor-setup-panel > small { grid-column: 1 / -1; }
.monitor-rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.monitor-rules-grid article { min-height: 190px; padding: 25px; display: grid; align-content: start; gap: 13px; }.monitor-rules-grid article > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #111; color: #f7f6f4; font-size: 9px; }.monitor-rules-grid h3 { margin: 0; font-family: var(--font-serif), Georgia, serif; font-size: 20px; font-weight: 500; }.monitor-rules-grid p { margin: 0; color: #666; font-size: 10px; line-height: 1.6; }.monitor-rules-grid strong { margin-top: auto; color: #168148; font-size: 8px; letter-spacing: .08em; }
.monitor-filter-panel { margin-bottom: 9px; padding: 12px; }.monitor-search { height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #d2d2cd; border-radius: 6px; background: #fafaf8; }.monitor-search span { color: #777; font-size: 18px; }.monitor-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #222; font: inherit; font-size: 10px; }
.monitor-filter-row { margin-top: 8px; display: flex; align-items: center; gap: 7px; }.monitor-person-filter { display: flex; gap: 3px; padding: 3px; border-radius: 6px; background: #f0f0ec; }.monitor-person-filter button, .monitor-filter-row select, .monitor-add-source ,.monitor-person-filter a{ min-height: 36px; padding: 0 11px; border: 1px solid #d6d6d0; border-radius: 5px; background: #fff; color: #555; font: inherit; font-size: 9px; font-weight: 800; }.monitor-person-filter button ,.monitor-person-filter a { border: 0; background: transparent; }.monitor-person-filter button.active ,.monitor-person-filter a.active { background: #111; color: #f7f6f4; }.monitor-add-source { margin-left: auto; color: #111; }
.monitor-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .72fr); gap: 9px; align-items: start; }.monitor-queue, .monitor-review { padding: 22px; }.monitor-media-list { border-top: 1px solid #e3e3df; }
.monitor-media-item { width: 100%; min-height: 102px; padding: 10px 8px; display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 13px; border: 0; border-bottom: 1px solid #e3e3df; background: #fff; color: #111; text-align: left; }.monitor-media-item:hover, .monitor-media-item.selected { background: #f5f5f1; }.monitor-media-item.selected { box-shadow: inset 2px 0 #111; }
.monitor-media-thumb { width: 82px; height: 76px; display: grid; place-content: center; gap: 6px; overflow: hidden; border-radius: 6px; background: #e8e8e3; color: #555; text-align: center; }.monitor-media-thumb > span { font-size: 18px; font-weight: 900; }.monitor-media-thumb > small { font-size: 8px; text-transform: uppercase; }.monitor-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.monitor-media-copy { min-width: 0; display: grid; gap: 7px; }.monitor-media-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #898983; font-size: 8px; }.monitor-media-copy > div > span + span::before { margin-right: 6px; content: "·"; }.monitor-media-copy > div .monitor-platform-pill::before { content: none; }.monitor-platform-pill { padding: 3px 6px; border-radius: 9px; background: #ecece7; color: #333; font-weight: 900; }.monitor-platform-pill.x { background: #171717; color: #f7f6f4; }.monitor-platform-pill.instagram { background: #efe2ea; color: #74365c; }.monitor-platform-pill.telegram { background: #deedf4; color: #23688e; }.monitor-media-copy > strong { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.35; }.monitor-media-copy > small { overflow: hidden; color: #7f7f79; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.monitor-status { font-size: 8px; font-style: normal; font-weight: 900; text-transform: uppercase; }.monitor-status.verified { color: #148144; }.monitor-status.reviewing { color: #96600f; }.monitor-status.protected { color: #777; }.monitor-empty { min-height: 210px; display: grid; place-content: center; gap: 6px; color: #777; text-align: center; }.monitor-empty strong { color: #222; font-size: 12px; }.monitor-empty span { font-size: 9px; }
.monitor-review { position: sticky; top: 12px; }.monitor-review-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }.monitor-review-heading > div { display: grid; gap: 4px; }.monitor-review-heading strong { font-size: 12px; }.monitor-review-heading small { color: #85857f; font-size: 9px; }.monitor-review-media { height: 190px; margin-bottom: 13px; overflow: hidden; border-radius: 7px; background: #eee; }.monitor-review-media img { width: 100%; height: 100%; object-fit: cover; }.monitor-review-caption { max-height: 76px; margin: 0 0 10px; overflow: auto; color: #555; font-size: 9px; line-height: 1.55; }
.monitor-source-link { display: inline-block; margin-bottom: 15px; padding-bottom: 4px; border-bottom: 1px solid #333; color: #222; font-size: 8px; font-weight: 900; text-decoration: none; text-transform: uppercase; }.monitor-region-select { display: grid; gap: 7px; padding: 14px; border: 1px solid #d8d8d3; border-radius: 6px; background: #f7f7f4; }.monitor-region-select > span { color: #777; font-size: 8px; font-weight: 900; letter-spacing: .08em; }.monitor-region-select select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid #cecec8; border-radius: 5px; background: #fff; color: #222; font: inherit; font-size: 9px; }.monitor-review-facts { margin: 13px 0 0; }.monitor-review-facts > div { min-height: 40px; padding: 8px 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 9px; border-bottom: 1px solid #e3e3df; font-size: 9px; }.monitor-review-facts dt { color: #85857f; }.monitor-review-facts dd { margin: 0; }.monitor-review-actions { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 6px; }.monitor-review-actions button ,.monitor-review-actions a { min-height: 36px; padding: 0 11px; border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #222; font-size: 8px; font-weight: 900; text-transform: uppercase; }.monitor-review-actions .save-button { border-color: #111; background: #111; color: #f7f6f4; }
.monitor-source-dialog { width: min(720px, 100%); }.monitor-source-dialog > section { display: grid; gap: 13px; }.monitor-source-dialog label { min-width: 0; display: grid; gap: 7px; }.monitor-source-dialog label > span { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.monitor-source-dialog input, .monitor-source-dialog select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #cecec8; border-radius: 5px; background: #fff; color: #222; font: inherit; font-size: 10px; }.monitor-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 1180px) {
  .monitor-connector-grid { grid-template-columns: repeat(2, 1fr); }
  .monitor-layout { grid-template-columns: 1fr; }.monitor-review { position: static; }
}
@media (max-width: 760px) {
  .monitor-command-bar, .monitor-section-heading { align-items: flex-start; flex-direction: column; }.monitor-command-bar > button, .monitor-section-heading > button ,.monitor-command-bar > a, .monitor-section-heading > a { width: 100%; }
  .monitor-view-tabs { padding: 0 10px; gap: 15px; overflow-x: auto; }.monitor-view-tabs button ,.monitor-view-tabs a { flex: 0 0 auto; }
  .monitor-connections, .monitor-queue, .monitor-review { padding: 17px; }.monitor-connector-grid, .monitor-rules-grid { grid-template-columns: 1fr; }.monitor-setup-panel { grid-template-columns: 1fr; }.monitor-setup-panel ol { grid-template-columns: 1fr; }
  .monitor-filter-row { align-items: stretch; flex-direction: column; }.monitor-person-filter { display: grid; grid-template-columns: repeat(3, 1fr); }.monitor-add-source { margin-left: 0; }
  .monitor-media-item { grid-template-columns: 68px minmax(0, 1fr); }.monitor-media-thumb { width: 68px; height: 68px; }.monitor-status { grid-column: 2; }.monitor-form-row { grid-template-columns: 1fr; }
}


/* == 4. PONTE COPPERMINE -> ARQUIVEX ===================================== */
/* Ponte entre a marcação do Coppermine e o design system do arquivex.
   Duas responsabilidades:
     a) dar acabamento às partes que o core do Coppermine desenha sozinho e o
        tema não reescreve (formulários, paginação, avisos, menu do admin);
     b) resolver as pequenas diferenças entre o HTML do app original (React)
        e o que o Coppermine consegue emitir.
   Tudo aqui é escrito na mesma linguagem visual do design system acima:
   preto, branco, papel, maiúsculas pequenas com muito espaçamento. */

/* -- Estrutura -------------------------------------------------------------- */

/* O app original decide a foto do hero em JavaScript; aqui ela vem de uma
   variável CSS, então os três planos precisam ser religados na mão. */
.hero-photo,
.archive-subhero-photo,
.archive-subhero-glitch,
.archive-intro::before,
.archive-subhero::before { background-image: var(--arq-hero-image); }
.hero-photo::before,
.hero-photo::after { background-image: var(--arq-hero-image); }

/* starttable() devolve uma <table> de verdade, e não uma <div>, porque metade
   do Coppermine emite `<tr>`/`<td>` direto do PHP — o painel de administração
   inteiro, a ficha técnica da foto, os comentários. Fora de uma tabela o
   navegador descarta essas tags e sobra um amontoado de texto.

   Os blocos deste tema que produzem grades saem da tabela de propósito: o
   `header` começa com `</table>` e o `footer` termina com `<table>`, para o
   `</table>` do endtable() continuar fechando alguma coisa. As tabelas vazias
   que sobram no meio não ocupam espaço nenhum. */
.maintable { width: 100%; border-collapse: collapse; }
.maintable:empty { display: none; }
.cpg-title-cell { padding: 0; }

/* A capa do Coppermine é uma sequência de seções; a última não precisa da
   linha divisória. */
.archive-content .archive-section:last-of-type { border-bottom: 0; }

/* -- Lista de categorias ---------------------------------------------------- */

/* {CAT_THUMB} devolve a miniatura já embrulhada num link, então o link precisa
   ocupar o lugar que o design system reserva para a imagem.

   Sem tons de cinza: o acervo público é colorido — só a fotografia do hero é
   tratada em P&B. */
.category-row > a { display: block; width: 72px; height: 64px; overflow: hidden; border-radius: var(--gallery-radius, 5px); }
.category-row > a > img { width: 100%; height: 100%; object-fit: cover; }

/* Quando a categoria não tem imagem, o Coppermine devolve vazio: um bloco
   neutro evita que a grade de seis colunas colapse. */
.category-row > .cpg-no-thumb { width: 72px; height: 64px; border-radius: var(--gallery-radius, 5px); background: #e4e4df; }

/* Nas telas menores o design system posiciona `.category-row > img` na grade.
   Como aqui a miniatura vem embrulhada num link, o link precisa ocupar o lugar
   dela — senão a foto cai em cima do texto. */
@media (max-width: 800px) {
  .category-row > a { width: 45px; height: 45px; }
}
@media (max-width: 560px) {
  .category-row > a { grid-area: img; align-self: start; width: 52px; height: 52px; }
}

/* {CAT_ALBUMS} é uma lista de links de álbuns. O desenho dos cartões já vem do
   design system (`.category-year-buttons button`, que o build replica para
   `a`); aqui só entra o que o Coppermine acrescenta: o separador de vírgula
   entre os links e a seta solta no fim da lista. */
.category-year-buttons { align-items: stretch; }
.category-year-buttons br { display: none; }

/* A linha de estatísticas que o Coppermine devolve no rodapé da lista. */
.archive-statline { margin: 18px 0 0; color: #8c8c86; font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.archive-statline a { color: #111; }

/* -- Miniaturas e álbuns geridos pelo core ---------------------------------- */

/* Enquanto os blocos de álbum/miniatura do core não são reescritos, as tabelas
   padrão do Coppermine recebem o acabamento do tema para não destoarem. */
.maintable { width: 100%; border-collapse: collapse; }
.maintable td { vertical-align: top; }

td.thumbnails { padding: 0 7px 22px; text-align: center; }
td.thumbnails img.image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; transition: transform .3s ease; }
td.thumbnails a:hover img.image { transform: scale(1.04); }

.thumb_title, .thumb_caption { display: block; margin-top: 7px; color: #111; font-size: 9px; line-height: 1.35; }
.thumb_filename, .thumb_caption_ctime, .thumb_caption_mtime, .thumb_num_comments, .thumb_title_views { display: block; color: #969690; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }

/* -- Páginas internas -------------------------------------------------------
   Complementos para o que os blocos $template_* reescritos produzem e o design
   system não previa, porque no app original essas telas eram outro componente.
   -------------------------------------------------------------------------- */

/* Legenda das miniaturas. O Coppermine devolve o texto da legenda já montado,
   com <br /> entre as linhas; o design system espera um bloco com título e
   dados. As classes abaixo são as que o core emite. */
.thumbnail-card > div { padding: 9px 2px 0; }
.thumbnail-card .thumb_title { display: block; margin: 5px 0 7px; min-height: 26px; color: #111; font-size: 9px; line-height: 1.35; }
.thumbnail-card .thumb_caption { display: block; color: #777; font-size: 9px; line-height: 1.4; }
.thumbnail-card .thumb_filename,
.thumbnail-card .thumb_caption_ctime,
.thumbnail-card .thumb_caption_mtime,
.thumbnail-card .thumb_num_comments,
.thumbnail-card .thumb_title_views { display: block; color: #969690; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

/* Paginação. Duas diferenças em relação ao design system: os números viram
   links (que são inline por natureza e precisam virar caixas para o
   `width`/`height` do desenho valer), e a página atual e os limites sem
   destino saem como <b>, que a variante `a` gerada no build não alcança. */
.archive-pagination a { display: inline-flex; align-items: center; justify-content: center; }
.archive-pagination b { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d1d1cc; background: #fff; color: #555; font-size: 9px; font-weight: 400; }
.archive-pagination b.active { border-color: #111; background: #111; color: #f7f6f4; }
.archive-pagination b.disabled { border-color: #e2e2de; color: #c2c2bd; }
.archive-pagination span { margin: 0 5px; color: #999; font-size: 9px; }

/* A entrada do painel no topo. Só quem administra a galeria a vê, e ela leva à
   visão geral — que é o index.php com um parâmetro, e portanto não teria como
   ser alcançada de outro jeito. Cor própria para funcionar tanto sobre a foto
   da capa quanto sobre o fundo claro das páginas internas. */
.gallery-nav .panel-entry {
  height: 30px; padding: 0 13px; display: inline-flex; align-items: center;
  border: 0; border-radius: 999px; background: var(--gallery-accent, #d8ff3e); color: #111;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.gallery-nav .panel-entry:hover { filter: brightness(.93); color: #111; }
.mobile-nav-menu .panel-entry { justify-content: center; }

/* O cartão de álbum vem embrulhado num item da grade.

   O motivo é o modo de administração: o Coppermine devolve um menu de álbum
   ({ADMIN_MENU}) que tem links próprios, e link dentro de link é HTML
   inválido. Ele fica então ao lado do cartão — mas, solto na grade, virava uma
   célula, e cada álbum passava a ocupar uma linha inteira. Embrulhados, cartão
   e menu contam como um item só. */
.browser-album-grid > .browser-album-item { min-width: 0; display: flex; flex-direction: column; }
.browser-album-item > a {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid #d6d6d1; border-radius: var(--gallery-radius, 5px);
  background: #fff; color: #111; text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,.045);
  transition: transform .22s, box-shadow .22s;
}
.browser-album-item > a:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.11); }
.browser-album-item > a > span { aspect-ratio: 4/5; position: relative; display: block; overflow: hidden; border-radius: var(--gallery-radius, 5px) var(--gallery-radius, 5px) 0 0; }
.browser-album-item > a > div { min-height: 122px; padding: 14px; display: flex; flex-direction: column; }
.browser-album-item > a > span i { position: absolute; right: 7px; bottom: 7px; padding: 4px 6px; background: rgba(0,0,0,.8); color: #f7f6f4; font-size: 9px; font-style: normal; }
.browser-album-item > a:hover img { transform: scale(1.04); filter: grayscale(15%); }

/* -----------------------------------------------------------------------------
   Imagens do Coppermine

   O CSS de origem estica toda imagem para 100% da largura do contêiner. Isso
   está certo para as fotos do acervo e é um desastre para o resto: o
   Coppermine manda ícones de 16x16 com width/height no próprio <img>, e um
   deles, esticado para a largura da página, virava uma figura de 900px de
   altura no meio da tela. Foi o que abriu aquele vazio enorme na capa em modo
   de administração.

   A regra: imagem que traz o próprio tamanho fica com o próprio tamanho; as
   dos lugares que são grade de fotos voltam a preencher a célula.
   -------------------------------------------------------------------------- */
.gallery-site img[width], .admin-shell img[width] { width: auto; height: auto; max-width: 100%; }
.gallery-site .browser-album-grid img[width],
.gallery-site .category-thumb img[width],
.gallery-site .album-photo-grid img[width],
.gallery-site .updated-albums-grid img[width],
.gallery-site .popular-grid img[width],
.gallery-site .thumbnail-image img[width],
.gallery-site td.thumbnails img[width],
.browser-album-grid img, .category-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Os ícones do core têm classe própria: tamanho fixo, para continuarem
   pequenos mesmo quando o arquivo não carrega (uma imagem quebrada com
   width:auto vira um bloco da largura inteira). */
.gallery-site img.icon, .admin-shell img.icon { width: 16px; height: 16px; }
.gallery-site img[src$="help.gif"], .admin-shell img[src$="help.gif"] { width: 13px; height: 11px; }

/* O CSS de origem manda `img { display: block }`. Está certo para as fotos do
   acervo e errado para os ícones de 16px que o Coppermine imprime no meio de
   uma frase: cada um caía numa linha só sua. Era isso que empilhava as setas
   de ordenação embaixo dos títulos das colunas e punha a coluna de ações do
   gerenciador de usuários em quatro andares. */
.gallery-site :where(img.icon, img[src$="help.gif"], img[src*="images/icons/"],
                     img[src$="ascending.png"], img[src$="descending.png"]),
.admin-shell  :where(img.icon, img[src$="help.gif"], img[src*="images/icons/"],
                     img[src$="ascending.png"], img[src$="descending.png"]) {
  display: inline-block; vertical-align: -3px;
}

/* As setas de ordenação do cabeçalho das tabelas. Não moram em `images/icons/`,
   então o conjunto do tema não as alcança pelo nome — vão pelo caminho
   inteiro. */
.gallery-site img[src$="ascending.png"], .admin-shell img[src$="ascending.png"] {
  width: 11px; height: 11px; vertical-align: -1px; opacity: .5;
  content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}
.gallery-site img[src$="descending.png"], .admin-shell img[src$="descending.png"] {
  width: 11px; height: 11px; vertical-align: -1px; opacity: .5;
  content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.admin-shell a:hover img[src$="ascending.png"],
.admin-shell a:hover img[src$="descending.png"] { opacity: 1; }

/* O espaçador que o core usa para indentar não tem nada para mostrar. */
.gallery-site img[src*="spacer.gif"] { display: none; }

/* -----------------------------------------------------------------------------
   Ícones

   O tema traz o próprio conjunto, em SVG de traço (ver themes/demi_lovato_gallery/icones.php).
   Sendo SVG embutido com `currentColor`, cada ícone herda a cor de quem o
   contém — preto sobre o papel, branco sobre a barra lateral escura — e não
   precisa de regra nenhuma para isso.

   Os PNGs do Coppermine que sobrarem (os de plugins, por exemplo) ficam em
   silhueta de uma cor só, para não destoarem.
   -------------------------------------------------------------------------- */
.arq-ico { width: 16px; height: 16px; flex: 0 0 16px; display: block; }
.gallery-site img[src*="images/icons/"],
.gallery-site img[src*="images/navbar/"],
.gallery-site img[src$="help.gif"],
.admin-shell img[src*="images/icons/"],
.admin-shell img[src*="images/navbar/"],
.admin-shell img[src$="help.gif"] { filter: brightness(0) !important; opacity: .45; }
.admin-sidebar img[src*="images/icons/"] { filter: brightness(0) invert(1) !important; opacity: .5; }

/* O título de seção que o core manda com um ícone junto. */
.cpg-title-icon { margin-right: 10px; display: inline-flex; color: #b4b4ae; vertical-align: -1px; }
.cpg-title-icon .arq-ico { width: 15px; height: 15px; }

/* A grade de miniaturas do core precisa do mesmo respiro embaixo. */
.archive-content .thumbnail-grid { margin-bottom: 8px; }

/* A largura da célula vem da resolução real das miniaturas da galeria (ver
   arquivex_largura_da_miniatura no theme.php). Assim a grade nunca estica uma
   imagem além do que ela aguenta, e fica mais generosa sozinha quando a
   largura das miniaturas é aumentada na configuração. */
.thumbnail-grid {
  grid-template-columns: repeat(auto-fill, minmax(0, var(--arq-thumb-max, 150px)));
  justify-content: space-between;
}
@media (max-width: 700px) {
  .thumbnail-grid { grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); }
}
/* A legenda de cada miniatura tem altura variável (às vezes traz o nome do
   arquivo, às vezes não). Uma altura mínima mantém as linhas alinhadas. */
.archive-content .thumbnail-card > div { min-height: 46px; }

/* A moldura da miniatura da categoria existe sempre, mesmo sem capa: é ela que
   segura a primeira coluna da linha. Sem isso, categoria sem foto empurrava
   todas as colunas uma casa (era o defeito que aparecia na instalação real). */
.category-thumb { width: 56px; height: 50px; display: block; overflow: hidden; border-radius: var(--gallery-radius, 5px); background: #ececE7; }
.category-thumb.is-empty { background: #f0f0eb; border: 1px dashed #dcdcd6; }
.category-thumb a { display: block; width: 100%; height: 100%; }
.category-group.is-child > .category-row { padding-left: 26px; }
.category-group.level-2 > .category-row { padding-left: 44px; }
.category-group.level-3 > .category-row { padding-left: 62px; }
.category-group.is-child > .category-row::before { content: "↳"; position: absolute; left: 9px; color: #b6b6b0; font-size: 12px; }
.category-group.is-child { position: relative; }
.category-row.is-static { cursor: default; }
/* A linha inteira leva à categoria sem envolver tudo num <a> — link dentro de
   link é HTML inválido, e o navegador fecha o de fora, desmontando a grade. */
.category-row.is-link { position: relative; }
.category-row.is-link .category-copy a::after { content: ""; position: absolute; inset: 0; }
.category-row.is-link:hover { background: #fafaf7; }
.category-albums-panel > .maintable { display: none; }
.category-albums-panel .browser-album-grid { padding-top: 0; }

/* O crédito que o Coppermine imprime no fim de cada página vem com estilo
   embutido (Verdana, link azul). Sem alcançá-lo, ele é a única coisa na página
   que não pertence ao desenho. */
.gallery-site .footer, .admin-shell .footer {
  padding: 26px 0 0 !important; font-family: inherit !important;
  color: #a5a59f; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.gallery-site .footer a, .admin-shell .footer a { color: #6f6f69; }
.gallery-site .footer a:hover, .admin-shell .footer a:hover { color: #111; }

/* O quadro de notícias que o Coppermine mostra a quem administra. Ele vem como
   tabela crua, com um iframe do site do projeto dentro. Não dá para reescrevê-lo
   sem tocar no core, então recebe a moldura de cartão do tema. */
.archive-content .tableh1 {
  padding: 0 0 12px; background: transparent; border: 0;
  color: #85857f; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.archive-content .tableh1 img { display: inline-block; margin-right: 8px; vertical-align: -2px; }
.archive-content .tableh1 a.admin_menu { color: #85857f; }
.archive-content .tableh1 a.admin_menu:hover { color: #111; }
.archive-content .tableb { padding: 0; background: transparent; }
.archive-content iframe {
  width: 100%; min-height: 96px; border: 1px solid #e3e3de; border-radius: var(--gallery-radius, 5px);
  background: #fff;
}

/* A legenda das galerias de usuário (index.php?cat=1). O core devolve uma
   tabelinha de três linhas — nome, álbuns, arquivos — e ela passa pelo mesmo
   cartão de miniatura do tema. */
.user_thumb_infobox { width: 100%; margin: 9px 0 0; border-collapse: collapse; }
.user_thumb_infobox th { padding: 0 0 4px; text-align: left; }
.user_thumb_infobox th a { color: #111; font-size: 11px; font-weight: 700; }
.user_thumb_infobox th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.user_thumb_infobox td { padding: 1px 0; color: #969690; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Barra do administrador: só aparece no modo de administração.

   Os três comandos do álbum vêm com rótulo ("Delete", "Properties", "Edit
   Files"); debaixo de um cartão de 150px eles quebravam em três linhas e
   desalinhavam a grade. Aqui viram botões só de ícone, numa linha só — o
   rótulo continua acessível no `title`, que o tema copia do próprio texto do
   Coppermine (ver arquivex_acoes_do_album). */
.cpg-admin-strip:empty { display: none; }
.cpg-admin-strip { margin: 7px 0 0; }
.cpg-admin-strip .buttonlist ul { display: flex; gap: 4px; }
.cpg-admin-strip .buttonlist li { list-style: none; }
.cpg-admin-strip .buttonlist a {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e0e0db; border-radius: 999px; background: #fff; color: #6f6f69;
  font-size: 0; line-height: 0;
  transition: border-color .18s ease, background .18s ease;
}
.cpg-admin-strip .buttonlist a:hover { border-color: #111; background: #111; color: #f7f6f4; }
.cpg-admin-strip .buttonlist span { display: inline-flex; }
/* `flex: 0 0 13px` porque o ícone é item de um contêiner flex zerado pelo
   `font-size: 0` do botão — sem isso ele encolhe até sumir. */
.cpg-admin-strip .arq-ico { width: 14px; height: 14px; flex: 0 0 14px; }
.gallery-site .cpg-admin-strip img[width], .cpg-admin-strip img { width: 13px; height: 13px; flex: 0 0 13px; object-fit: contain; }
.cpg-admin-strip .clearer { display: none; }

/* Navegação da foto ampliada. */
/* -----------------------------------------------------------------------------
   A página da foto (displayimage.php)

   Antes: a foto num caixote preto no meio de uma página clara, a tira de
   miniaturas noutra faixa preta e os comandos espalhados em três alturas
   diferentes. Agora a foto fica sobre papel, como o resto da galeria: uma
   barra só de comandos no topo, a foto grande no centro, a legenda embaixo e
   a tira de miniaturas como uma fileira de cartões.
   -------------------------------------------------------------------------- */

/* A barra de comandos, uma linha só: voltar e posição à esquerda; enviar,
   denunciar e as setas à direita. */
.cpg-photo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid #e2e2dd;
}
.cpg-photo-bar-left, .cpg-photo-bar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cpg-photo-pos { color: #969690; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.cpg-photo-bar a {
  min-height: 34px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #d6d6d1; border-radius: 999px; background: #fff; color: #333;
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.cpg-photo-bar a:hover { border-color: #111; background: #111; color: #f7f6f4; }
.cpg-photo-bar .cpg-photo-back { border-color: #111; background: #111; color: #f7f6f4; }
.cpg-photo-bar .cpg-photo-back:hover { background: #333; border-color: #333; }

/* As quatro setas ficam juntas, como um controle só. */
.cpg-photo-steps { display: inline-flex; align-items: center; gap: 0; margin-left: 4px; }
.cpg-photo-steps a {
  width: 36px; min-height: 34px; padding: 0; justify-content: center;
  border-radius: 0; margin-left: -1px; font-size: 13px; letter-spacing: 0;
}
.cpg-photo-steps a:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.cpg-photo-steps a:last-child { border-radius: 0 999px 999px 0; }
.cpg-photo-steps a:only-child { border-radius: 999px; }
.cpg-photo-steps a:hover { position: relative; z-index: 1; }
.cpg-photo-bar #pic_info_button a, .cpg-photo-bar #slideshow_button a { gap: 7px; }

/* A foto. Cartão branco, altura limitada pela janela para caber sem rolar. */
.cpg-photo { margin: 0; }
/* Bloco com o conteúdo centralizado, não flex: uma <img> sem width/height
   próprios (um SVG com só viewBox, por exemplo) resolve para largura zero
   dentro de um item flex, e a foto some. */
.cpg-photo-stage {
  padding: 26px; display: block; text-align: center;
  border: 1px solid #e2e2dd; border-radius: var(--gallery-radius, 5px); background: #fff;
}
.cpg-photo-stage a { display: inline-block; max-width: 100%; }
.cpg-photo-stage img {
  max-width: 100%; max-height: min(74vh, 900px); width: auto; height: auto;
  margin: 0 auto; border: 0; border-radius: 2px;
}
.cpg-photo-stage br { display: none; }
.cpg-photo-copy { padding: 26px 2px 0; max-width: 74ch; }
.cpg-photo-copy .pic_title {
  margin: 0; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -.04em;
}
.cpg-photo-copy .pic_caption { margin: 10px 0 0; color: #65655f; font-size: 13px; line-height: 1.65; }

/* A tira de miniaturas. O js/displayimage.js do Coppermine tem dependências
   rígidas desta marcação (injeta as setas em `td.prev_strip`, conta as
   miniaturas como filhas de `.tape tr`), então a estrutura fica intacta e só
   a aparência muda. */
.cpg-filmstrip { margin-top: 30px; padding: 24px 0 0; overflow: hidden; border-top: 1px solid #e2e2dd; }
.cpg-filmstrip > table { width: 100%; border-collapse: collapse; }
.cpg-filmstrip #film { margin: 0 auto; overflow: hidden; }
.cpg-filmstrip .tape { border-collapse: separate; border-spacing: 8px 0; }
.cpg-filmstrip td.thumb { padding: 0; vertical-align: middle; }
.cpg-filmstrip .thumbLink {
  display: block; overflow: hidden; border-radius: var(--gallery-radius, 5px);
  border: 1px solid #e2e2dd; background: #fff;
}
.cpg-filmstrip img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  filter: grayscale(100%); opacity: .55; transition: opacity .2s ease, filter .25s ease, transform .3s ease;
}
.cpg-filmstrip a:hover img { opacity: 1; filter: grayscale(0%); transform: scale(1.04); }
.cpg-filmstrip img.middlethumb { opacity: 1; filter: grayscale(0%); }
.cpg-filmstrip td.thumb:has(img.middlethumb) .thumbLink { border-color: #111; box-shadow: 0 0 0 1px #111; }

/* As setas da tira, injetadas nestes <td> pelo displayimage.js. */
.cpg-filmstrip .prev_strip, .cpg-filmstrip .next_strip { width: 46px; }
.cpg-filmstrip .next_strip { text-align: right; }
.cpg-filmstrip .prev_strip a, .cpg-filmstrip .next_strip a {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d6d6d1; border-radius: 50%; background: #fff;
}
.cpg-filmstrip .prev_strip a:hover, .cpg-filmstrip .next_strip a:hover { border-color: #111; background: #111; }
.cpg-filmstrip .prev_strip img, .cpg-filmstrip .next_strip img {
  width: auto; aspect-ratio: auto; opacity: 1; filter: brightness(0) !important;
}
.cpg-filmstrip .prev_strip a:hover img, .cpg-filmstrip .next_strip a:hover img { filter: brightness(0) invert(1) !important; }

/* -- Cabeçalhos de tabela do core ------------------------------------------- */

.tableh1, .tableh2 { padding: 12px 14px; background: transparent; color: #8c8c86; font-size: 9px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; text-align: left; }
.tableb, .tablef { padding: 12px 14px; border-bottom: 1px solid #d8d8d3; background: transparent; font-size: 11px; }
.tableb_alternate { background: rgba(255,255,255,.55); }

/* -- Navegação, paginação e barras de ordenação ----------------------------- */

.navmenu, .sortorder_options, .admin_menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; }
.navmenu a, .sortorder_options a, .admin_menu a, .buttonlist a, .pagination a {
  min-height: 32px; padding: 0 13px; display: inline-flex; align-items: center;
  border: 1px solid #cfcfc9; border-radius: 999px; background: #fff; color: #333;
  font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease;
}
.navmenu a:hover, .sortorder_options a:hover, .admin_menu a:hover, .buttonlist a:hover, .pagination a:hover { border-color: #111; background: #111; color: #f7f6f4; }
.navmenu img, .sortorder_cell img, .admin_menu img { display: none; }

/* -- Formulários ------------------------------------------------------------
   Escopo em `.archive-content` de propósito. Esta seção existe para dar
   acabamento aos formulários que o Coppermine desenha sozinho — login, busca
   avançada, perfil, envio — e todos saem dentro do {GALLERY}, que mora ali.

   Sem esse escopo, as regras alcançavam também os campos do próprio design
   system, que ficam no hero: o campo da busca ganhava borda, fundo branco e
   cantos arredondados e aparecia como uma caixa dentro da caixa. Não é uma
   correção pontual daquele campo — é a regra deixando de invadir território
   que não é dela.
   -------------------------------------------------------------------------- */

.archive-content :where(.textinput, .listbox, input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="number"], select, textarea) {
  min-height: 40px; padding: 0 12px; border: 1px solid #cfcfc9; border-radius: 8px;
  background: #fff; color: #111; font: inherit; font-size: 12px;
}
.archive-content textarea { padding: 10px 12px; line-height: 1.5; }
.archive-content :where(.textinput, .listbox, input, select, textarea):focus { border-color: #111; outline: 0; }

.archive-content :where(.button, input[type="submit"], input[type="button"], button.button) {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: #111; color: #f7f6f4; font-size: 9px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.archive-content :where(.button, input[type="submit"]):hover { background: #333; }

/* -- Avisos e mensagens ----------------------------------------------------- */

.cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation {
  margin: 0 0 22px; padding: 14px 16px; border-left: 3px solid #111;
  background: #fff; color: #333; font-size: 11px; line-height: 1.6;
}
.cpg_message_error, .cpg_message_validation { border-left-color: #b23b3b; }
.cpg_message_success { border-left-color: #3f8f4f; }

/* -- Imagem em exibição ----------------------------------------------------- */

.display_media { padding: 24px 0; text-align: center; }
.display_media img.image, .image.imageborder { max-width: 100%; height: auto; margin: 0 auto; border: 0; }
.imageborder { border: 1px solid #d7d7d2; }

/* -- Rodapé ----------------------------------------------------------------- */

/* No app o rodapé é um flex de três colunas; no celular ele precisa empilhar,
   senão as estatísticas espremem o logo. */
@media (max-width: 640px) {
  .gallery-footer > div { min-height: 0; padding: 28px 0; flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* -- Correções herdadas do CSS de origem ------------------------------------ */

/* Entre 801px e 980px a navegação sumia por completo: uma revisão antiga
   escondia `.gallery-nav` a partir de 980px, e a revisão seguinte, que trouxe
   o menu sanduíche, só a devolveu a partir de 800px — sobrou uma faixa de
   180px sem nenhuma forma de navegar. Aqui ela volta; abaixo de 800px o menu
   sanduíche continua assumindo, exatamente como no projeto original. */
@media (max-width: 980px) {
  .gallery-nav { display: flex; }
}

/* A gaveta do menu sanduíche abria a partir da borda esquerda do próprio
   botão (`left: 0`), e como o botão fica no canto direito do topo, os 200px
   de largura mínima saíam da tela. Ancorada à direita ela abre para dentro. */
.mobile-nav-menu { left: auto; right: 0; }

/* Os itens da gaveta pediam alinhamento à esquerda, mas herdavam
   `justify-content: center` de `.gallery-nav button`, que vem antes na
   cascata e não é sobrescrito — o texto acabava centralizado. */
.mobile-nav-menu a, .mobile-nav-menu button { justify-content: flex-start; }

/* -- Painel de administração ------------------------------------------------
   As páginas do painel são do próprio Coppermine e continuam sendo tabelas de
   verdade. O que muda é o acabamento: as linhas viram uma ficha de opções, com
   a mesma linguagem dos cartões do painel do arquivex.
   -------------------------------------------------------------------------- */

/* Na visão geral a galeria não é exibida — o conteúdo é o painel. */
.arq-dashboard-mode .cpg-gallery-slot { display: none; }

/* Os itens da barra lateral vêm do menu do Coppermine, como links de verdade
   entre páginas — daí <a> no lugar do <button> do design system. */
.admin-nav-wrap { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.admin-nav-wrap .admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-item { min-height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 4px; border-radius: 6px; color: #8d8d8d; font-size: 10px; font-weight: 700; line-height: 1.2; text-align: left; }
.admin-nav-item:hover { color: #f7f6f4; }
.admin-nav-item.active { position: relative; background: #242424; color: #f7f6f4; }
.admin-nav-item.active::before { content: ""; position: absolute; left: -6px; top: 0; width: 2px; height: 100%; border-radius: 0 2px 2px 0; background: #fff; }

/* Os ícones são os do próprio Coppermine. Ficam pequenos e com pouca presença
   para não competirem com o texto num fundo escuro. */
.admin-nav-item .admin-icon { width: 26px; min-width: 26px; display: inline-flex; align-items: center; justify-content: center; color: #9a9a9a; font-size: 13px; }
.admin-nav-item .admin-icon img { width: 15px; height: 15px; opacity: .72; }
.admin-nav-item .admin-icon .arq-ico { width: 15px; height: 15px; }
/* Os números da visão geral: o ícone fica claro, dentro da moldura redonda. */
.stat-card i .arq-ico, .stat-card > i > svg { width: 15px; height: 15px; }
.stat-card i { color: #a8a8a2; }
.admin-nav-item:hover .admin-icon img, .admin-nav-item.active .admin-icon img { opacity: 1; }

/* Item com pendência (envios aguardando aprovação). */
.admin-nav-item.is-flagged { color: #e8e8e5; }
.admin-nav-item.is-flagged::after { content: ""; width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #d8ff3e; }

.admin-sidebar .workspace-pill > span { font-size: 8px; letter-spacing: .06em; text-align: center; line-height: 1.1; }

/* Fora do painel o menu continua onde o Coppermine o coloca: uma barra de
   comandos sobre a galeria, como no tema padrão. */
.archive-content .admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.archive-content .admin-nav-item { min-height: 34px; padding: 0 12px; border: 1px solid #d9d9d4; border-radius: 999px; background: #fff; color: #333; font-size: 9px; letter-spacing: .05em; }
.archive-content .admin-nav-item:hover { border-color: #111; background: #111; color: #f7f6f4; }
.archive-content .admin-nav-item .admin-icon { width: 18px; min-width: 18px; }
.archive-content .admin-nav-item .admin-icon img { opacity: .6; }

.admin-topbar .back-to-gallery,
.admin-topbar .logout-entry { border: 0; background: transparent; color: #555; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-topbar .back-to-gallery { margin-right: auto; border-bottom: 1px solid #777; padding: 0 0 5px; }
.admin-topbar .logout-entry:hover { color: #111; }

/* Cartões da visão geral. */
.cpg-panel-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cpg-panel-grid > .panel-card { padding: 22px; }
.cpg-panel-row { padding: 11px 0; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid #ececE7; color: #111; }
.cpg-panel-row:first-of-type { border-top: 0; }
.cpg-panel-row strong { font-size: 12px; }
.cpg-panel-row small { color: #85857f; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.cpg-panel-row:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.cpg-panel-empty { margin: 0; color: #85857f; font-size: 11px; }
.cpg-panel-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.cpg-panel-shortcuts .admin-nav { display: contents; }
.cpg-panel-shortcut { min-height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 7px; border: 1px solid #e2e2dd; border-radius: 6px; color: #111; font-size: 10px; font-weight: 700; line-height: 1.2; }
.cpg-panel-shortcut:hover { border-color: #111; }
.cpg-panel-shortcut .admin-icon { width: 20px; min-width: 20px; display: inline-flex; align-items: center; justify-content: center; color: #8b8b85; font-size: 13px; }
.cpg-panel-shortcut .admin-icon img { width: 15px; height: 15px; filter: none; }
.cpg-panel-shortcut .admin-icon .arq-ico { width: 15px; height: 15px; }

/* O aviso das telas que só o Coppermine sabe desenhar (aparece na prévia,
   nunca numa instalação de verdade — lá o miolo vem do próprio Coppermine). */
.cpg-area-note { margin-top: 18px; padding: 22px; }
.cpg-area-note p { margin: 0; color: #555; font-size: 12px; line-height: 1.6; max-width: 62ch; }
.cpg-area-note p + p { margin-top: 9px; }
.cpg-area-note strong { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #111; color: #f7f6f4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: .02em; }

/* As tabelas do Coppermine dentro do painel. */
.admin-content .maintable { margin-bottom: 18px; border: 1px solid #deded9; background: #fff; }
.admin-content .tableh1 { padding: 15px 18px; border-bottom: 1px solid #e6e6e1; background: #fff; color: #111; font-size: 13px; font-weight: 700; letter-spacing: -.02em; text-transform: none; }
.admin-content .tableh2 { padding: 11px 18px; border-bottom: 1px solid #ececE7; background: #f7f7f4; color: #85857f; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.admin-content .tableb { padding: 12px 18px; border-bottom: 1px solid #f0f0eb; background: #fff; color: #333; font-size: 12px; line-height: 1.55; vertical-align: middle; }
.admin-content .tableb_alternate { background: #fbfbf9; }
.admin-content .tablef { padding: 14px 18px; background: #f7f7f4; }
.admin-content .cpg-title-cell { padding: 0; }

/* -----------------------------------------------------------------------------
   O painel: acabamento das telas que o Coppermine desenha

   Auditoria das páginas de administração — tudo aqui corrige algo que o core
   emite e que, sem regra, aparece torto.
   -------------------------------------------------------------------------- */

/* Cabeçalho de seção do admin.php (`tableh2`, uma linha de tabela). */
.admin-content .tableh2 {
  padding: 16px 18px 12px; background: #fafaf7; border-bottom: 1px solid #ececE7;
  color: #85857f; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}

/* O link de ajuda que acompanha cada opção. O core o desenha com um GIF de
   11px; com `img { display:block }` ele caía numa linha só para si, debaixo do
   rótulo. Vira um sinal de interrogação desenhado em CSS. */
.admin-content a.greybox img, .archive-content a.greybox img { display: none; }
.admin-content a.greybox, .archive-content a.greybox {
  width: 15px; height: 15px; margin-left: 7px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d8d8d3; border-radius: 999px; background: #fff;
  color: #9a9a94; font-size: 9px; font-weight: 700; line-height: 1; vertical-align: -3px;
}
.admin-content a.greybox::before, .archive-content a.greybox::before { content: "?"; }
.admin-content a.greybox:hover, .archive-content a.greybox:hover { border-color: #111; color: #111; }

/* Rótulo de cada opção. */
.admin-content .tableb label { color: #333; font-size: 12px; line-height: 1.5; }
.admin-content .tableb > a[name] { display: none; }

/* Caixas de seleção e botões de opção: sem o azul do navegador, e com espaço
   entre a marca e o texto. */
.admin-content input[type="checkbox"], .admin-content input[type="radio"] {
  width: 15px; height: 15px; margin: 0 6px 0 0; accent-color: #111; vertical-align: -2px;
}
.admin-content label.clickable_option { margin-right: 16px; font-size: 12px; }

/* Campos e botões do painel. */
.admin-content :where(.textinput, .listbox, input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="number"], select, textarea) {
  min-height: 36px; padding: 0 11px; border: 1px solid #d6d6d1; border-radius: 6px;
  background: #fff; color: #111; font: inherit; font-size: 12px;
}
.admin-content textarea { padding: 9px 11px; line-height: 1.5; }
.admin-content :where(input, select, textarea):focus { border-color: #111; outline: 0; }
.admin-content :where(.button, button.button, input[type="submit"], input[type="button"]) .arq-ico { width: 14px; height: 14px; }
.admin-content :where(.button, button.button, input[type="submit"], input[type="button"]) {
  min-height: 36px; padding: 0 15px; display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 999px; background: #111; color: #f7f6f4;
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.admin-content :where(.button, button.button, input[type="submit"]):hover { background: #333; }
.admin-content .buttonlist ul { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-content .buttonlist a { min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid #d6d6d1; border-radius: 999px; background: #fff; color: #333; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.admin-content .buttonlist a:hover { border-color: #111; background: #111; color: #f7f6f4; }

@media (max-width: 1000px) {
  .cpg-panel-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; width: auto; inset: auto; }
  .admin-sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .admin-main { grid-column: 1; }
  .admin-content { padding: 26px 18px 60px; }
  .stat-grid { grid-template-columns: 1fr; }
  .cpg-panel-shortcuts { grid-template-columns: 1fr; }
}

/* -- Acessibilidade --------------------------------------------------------- */

:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   As tabelas de listagem do painel

   catmgr, albmgr, picmgr, usermgr, banning, reviewcom: todas são a mesma
   tabela do core — `tableh1` no cabeçalho das colunas, `tableb` nas linhas, os
   comandos como ícones soltos numa célula. O que segue é o acabamento dessa
   tabela, e vale para todas de uma vez.
   -------------------------------------------------------------------------- */

/* Cabeçalho das colunas. O `.tableh1` também é usado como título de tabela em
   algumas telas; ali o título já sai pela célula própria (`.cpg-title-cell`),
   então aqui ele é sempre cabeçalho de coluna. */
.admin-content .maintable .tableh1 {
  padding: 11px 14px; border-bottom: 1px solid #e2e2dd; background: #fafaf8;
  color: #85857f; font-size: 9px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.admin-content .maintable .tableh1 .statlink,
.admin-content .maintable .tableh1 .statlink a { color: #85857f; font: inherit; }
.admin-content .maintable .tableh1 a:hover { color: #111; }
.admin-content .maintable .tableh1 a { margin-left: 2px; }

/* Linhas. */
.admin-content .maintable .tableb { padding: 11px 14px; vertical-align: middle; }
.admin-content .maintable .tableb:first-child { padding-left: 18px; }
.admin-content .maintable .tableb:last-child { padding-right: 18px; }

/* A célula de comandos: nunca quebra em várias linhas, e os ícones ficam
   afastados um do outro o bastante para serem alvos de clique. */
.admin-content .maintable td:has(> a > img.icon),
.admin-content .maintable td:has(> img.icon) { white-space: nowrap; }
.admin-content .maintable td > a > img.icon,
.admin-content .maintable td > img.icon { margin-right: 7px; }
.admin-content .maintable td > a:last-child > img.icon { margin-right: 0; }
.admin-content .maintable td > a > img.icon { opacity: .45; transition: opacity .15s ease; }
.admin-content .maintable td > a:hover > img.icon { opacity: 1; }

/* O título da tela e a sua barra de ferramentas, quando o core os manda juntos
   (ver starttable() no theme.php). */
.admin-content .cpg-title-cell .archive-section-title {
  margin: 0; padding: 20px 18px 16px; border-bottom: 1px solid #ececE7;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.admin-content .cpg-title-cell .archive-section-title h2 { font-size: 21px; }
.admin-content .cpg-title-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.admin-content .cpg-title-tools span[id] { display: flex !important; align-items: center; gap: 8px; color: #85857f; font-size: 10px; }
.admin-content .cpg-title-cell input[type="hidden"] { display: none; }

/* A barra de progresso que o core usa para cota de disco e para a contagem de
   comentários e de arquivos é uma tabela de duas células, cada uma com uma cor
   de fundo e uma largura em porcentagem, e o número dentro de um <div>
   posicionado por cima. Vira uma barra fina de verdade, com o número logo
   abaixo — o valor NÃO some: ele é o conteúdo desse <div>. */
.admin-content .maintable td > table[width="60"],
.admin-content .maintable td > table[width="150"] { display: block; width: 100%; max-width: 150px; }
.admin-content .maintable td > table[width="60"] tbody,
.admin-content .maintable td > table[width="150"] tbody { display: block; }
.admin-content .maintable td > table[width="60"] tr,
.admin-content .maintable td > table[width="150"] tr {
  display: flex; align-items: flex-start; height: 5px; border-radius: 999px; background: #ececE7;
}
.admin-content .maintable td > table[width="60"] > tbody > tr > td,
.admin-content .maintable td > table[width="150"] > tbody > tr > td {
  height: 5px; padding: 0; border: 0; border-radius: 999px; position: relative;
}
.admin-content .maintable td > table[width] img[src*="spacer"] { display: none; }
.admin-content .maintable td > table[width] div[style] {
  position: absolute !important; top: 10px !important; left: 0 !important;
  height: auto !important; padding: 0 !important;
  color: #85857f !important; font-size: 10px; white-space: nowrap;
}
/* espaço para o número que fica embaixo da barra */
.admin-content .maintable td:has(> table[width="60"]),
.admin-content .maintable td:has(> table[width="150"]) { padding-bottom: 26px; }

/* A miniatura que aparece nas listagens (picmgr, albmgr, perfil). O core não
   põe classe nenhuma nela, e o `thumb_nopic` chega em tamanho natural. */
/* Tudo que o Coppermine desenha como enfeite mora em `images/`; o que vem do
   acervo, não. Um `:not([src*="images/"])` separa os dois sem precisar listar
   arquivo por arquivo. */
.admin-content .maintable td img:not([src*="images/"]) {
  max-width: 96px; max-height: 96px; width: auto; height: auto;
  border-radius: 6px; object-fit: cover;
}

/* As setas de ordenação vivem dentro dessa mesma célula: precisam de uma regra
   tão específica quanto a da miniatura, ou herdam o tamanho dela. */
.admin-content .maintable img[src$="ascending.png"],
.admin-content .maintable img[src$="descending.png"] {
  width: 11px; height: 11px; max-width: 11px; max-height: 11px;
}

/* A tira de paginação do core ("3 usuários em 1 página"). */
.admin-content .maintable .tablef,
.admin-content table.maintable + table.maintable .tablef { font-size: 11px; color: #85857f; }

/* Rótulos do gerenciador de grupos: o core cola o texto no botão de opção. */
.admin-content .maintable td > table td { vertical-align: middle; }
.admin-content .maintable input[type="radio"] + *,
.admin-content .maintable td > input[type="radio"] { margin-right: 4px; }
.admin-content .maintable td:has(> input[type="radio"]) { padding-right: 4px; white-space: nowrap; }

/* A barra de rodapé das listagens: busca, "criar novo usuário", paginação. */
.admin-content .maintable .tablef { padding: 14px 18px; background: #fafaf8; }
.admin-content .maintable .tablef table { width: 100%; }
.admin-content .maintable .tablef td {
  padding: 0 14px 0 0; border: 0; background: none; text-align: left !important; vertical-align: middle;
}
.admin-content .maintable .tablef form { margin: 0; display: inline-flex; align-items: center; gap: 10px; }

/* O `a.admin_menu` é o comando solto que o core espalha pelas telas ("criar
   novo usuário", "esconder notícias"). Vira o mesmo botão de contorno do
   resto do painel — inclusive com o ícone, que a regra geral escondia. */
.admin-content a.admin_menu {
  min-height: 34px; margin: 0; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #d6d6d1; border-radius: 999px; background: #fff; color: #333;
  font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.admin-content a.admin_menu:hover { border-color: #111; background: #111; color: #f7f6f4; }
.admin-content a.admin_menu img { display: inline-block !important; width: 15px; height: 15px; opacity: .5; }
.admin-content a.admin_menu:hover img { filter: brightness(0) invert(1) !important; opacity: .9; }

/* A contagem de páginas que o core imprime fora da tabela (ver theme.php). */
.admin-content .cpg-tabs-count, .archive-content .cpg-tabs-count {
  display: block; color: #85857f; font-size: 10px; letter-spacing: .04em;
}
.admin-content .cpg-tabs-count { margin: 0 0 20px; padding: 0 2px; }

/* A barra de cota vem do core em vermelho e verde. No painel em preto e branco
   o preenchimento é a cor do texto e o vazio é a trilha cinza. */
.admin-content .maintable td > table[width] > tbody > tr > td:first-child[style] { background-color: #111 !important; background-image: none !important; }
.admin-content .maintable td > table[width] > tbody > tr > td + td[style] { background-color: transparent !important; background-image: none !important; }

/* Lista de seleção múltipla (grupos que podem criar álbuns numa categoria). A
   altura mínima dos campos comuns a deixava do tamanho de uma linha só. */
.admin-content select[multiple], .archive-content select[multiple] {
  min-height: 116px; padding: 8px 10px; line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   O gerenciador de álbuns (albmgr.php)

   O core desenha a lista de álbuns como uma tabela arrastável (`#album_sort`)
   e a barra de comandos como uma fileira de <button> — uns com rótulo, outros
   só com ícone. Sem regra, os de ícone viravam bolas pretas do tamanho dos
   outros e a lista virava uma linha de texto com dois ícones grudados.
   -------------------------------------------------------------------------- */

/* A faixa do <noscript>: com JavaScript ligado ela fica vazia, mas o <td>
   continua ocupando uma linha em branco embaixo do título. */
.admin-content tr.noscript td { padding: 0; border: 0; }

/* Vale para a lista de álbuns (`#album_sort`) e para a de fotos (`#pic_sort`):
   é a mesma tabela arrastável. */
.admin-content #sort { margin: 0; }
.admin-content #sort > table { width: 100%; border-collapse: collapse; }
.admin-content #sort > table tr {
  border-bottom: 1px solid #f0f0eb; cursor: grab; transition: background .15s ease;
}
.admin-content #sort > table tr:hover { background: #fafaf8; }
.admin-content #sort > table tr.selected, .admin-content #sort > table tr.ui-selected { background: #f2f2ee; }
.admin-content #sort > table td { padding: 12px 4px; border: 0; vertical-align: middle; }

/* A lista de fotos do picmgr: nome, caminho do arquivo e a miniatura. O core
   manda a miniatura com width="0" quando não consegue medir o arquivo, então
   o tamanho vem daqui. */
.admin-content #pic_sort td:nth-child(2) { width: 100%; }
.admin-content #pic_sort strong { color: #111; font-size: 12px; font-weight: 600; }
.admin-content #pic_sort pre.filepath {
  margin: 5px 0 0; color: #9a9a94; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
}
.admin-content #pic_sort pre.filepath a { color: inherit; }
.admin-content #pic_sort pre.filepath a:hover { color: #111; }
.admin-content td.pic_thumbnail { width: 88px; padding-right: 0 !important; }
.admin-content td.pic_thumbnail img, .admin-content img.thumbnail {
  width: 72px !important; height: 90px !important; max-width: 72px; max-height: 90px;
  object-fit: cover; border-radius: 6px; background: #ececE7;
}
.admin-content td.dragHandle {
  width: 22px; padding-left: 0 !important; color: #c2c2bb;
}
.admin-content td.dragHandle::before {
  content: ""; display: block; width: 10px; height: 14px;
  background:
    radial-gradient(circle, #c2c2bb 1.1px, transparent 1.2px) 0 0/5px 5px;
}
.admin-content td.album_text { display: flex; align-items: center; gap: 10px; }
.admin-content .albumName { margin-right: auto; color: #111; font-size: 12px; font-weight: 600; }
.admin-content td.album_text > a { display: inline-flex; opacity: .45; }
.admin-content td.album_text > a:hover { opacity: 1; }
.admin-content .editAlbum {
  min-height: 28px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #e0e0da; border-radius: 999px; color: #77776f;
  font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
}
.admin-content .editAlbum:hover { border-color: #111; color: #111; }
.admin-content .editAlbum img { opacity: .5; }

/* A barra de comandos. */
.admin-content #control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-content .album_operate td { padding: 16px 0 4px; border: 0; }
.admin-content #control button#upup_click,
.admin-content #control button#up_click,
.admin-content #control button#down_click,
.admin-content #control button#downdown_click,
.admin-content #control button#delete_album {
  width: 36px; min-width: 36px; padding: 0; justify-content: center;
  border: 1px solid #d6d6d1; background: #fff; color: #333;
}
.admin-content #control button#upup_click img,
.admin-content #control button#up_click img,
.admin-content #control button#down_click img,
.admin-content #control button#downdown_click img,
.admin-content #control button#delete_album img { filter: brightness(0) !important; opacity: .5; }
.admin-content #control button:not([disabled]):hover { background: #111; color: #f7f6f4; }
.admin-content #control button:not([disabled]):hover img { filter: brightness(0) invert(1) !important; opacity: .9; }
.admin-content button[disabled], .admin-content input[disabled] { opacity: .38; cursor: not-allowed; }

/* Célula vazia não vira faixa em branco. O core intercala linhas com as opções
   detalhadas de cada ferramenta, escondidas até a opção ser escolhida — sem
   isto cada item das Ferramentas de administração ficava com um vão embaixo. */
.admin-content .maintable td:empty { padding: 0; border-bottom: 0; }

/* O core cola o texto no botão de opção ("Comments◉Yes"). */
.admin-content .maintable input[type="radio"] { margin: 0 5px 0 9px; }
.admin-content .maintable td > input[type="radio"]:first-child { margin-left: 0; }

/* -----------------------------------------------------------------------------
   A página de configuração (admin.php)
   -------------------------------------------------------------------------- */

/* Cada uma das vinte seções ("Configurações gerais", "Miniaturas"…) é um <span>
   clicável que abre e fecha o bloco. Sem regra, saía como texto corrido no meio
   do formulário. */
.admin-content .detail_head_collapsed, .admin-content .detail_head_expanded {
  margin: 0 0 2px; padding: 6px 0 14px; display: flex; align-items: center; gap: 10px;
  color: #111; font-size: 13px; font-weight: 700; letter-spacing: -.01em; cursor: pointer;
}
.admin-content .detail_head_collapsed::before, .admin-content .detail_head_expanded::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px;
  background: no-repeat center/13px 13px
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: transform .18s ease;
}
.admin-content .detail_head_expanded::before { transform: rotate(90deg); }
.admin-content .detail_body { margin-bottom: 8px; }

/* Os avisos de valor inválido vêm com o ícone na propriedade `list-style-image`
   de cada <li>, direto no atributo style. */
.admin-content li[style*="list-style-image"] {
  list-style: none !important; list-style-image: none !important;
  position: relative; margin-left: 0; padding: 3px 0 3px 26px; line-height: 1.55;
}
.admin-content li[style*="list-style-image"]::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px;
  background: no-repeat center/15px 15px
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 4.2 2.9 17.4a1.5 1.5 0 0 0 1.3 2.3h15.6a1.5 1.5 0 0 0 1.3-2.3L13.3 4.2a1.5 1.5 0 0 0-2.6 0Z'/%3E%3Cpath d='M12 9.6v4M12 16.6h.01'/%3E%3C/svg%3E");
}
.admin-content ul:has(> li[style*="list-style-image"]) { margin: 0; padding: 0; }

/* Os sinais de mais/menos da árvore de seções. */
.admin-shell img[src*="images/tree/plus.gif"] {
  width: 11px; height: 11px;
  content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.admin-shell img[src*="images/tree/minus.gif"] {
  width: 11px; height: 11px;
  content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.admin-shell img[src*="images/tree/toggle.gif"] {
  width: 11px; height: 11px;
  content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5 4 9l4 4M4 9h11a5 5 0 0 1 0 10H9'/%3E%3C/svg%3E");
}
.admin-shell img[src*="images/tree/"] { filter: none !important; opacity: 1; }

/* -----------------------------------------------------------------------------
   A barra lateral do painel

   Os comandos são os do próprio Coppermine, então a lista muda de tamanho com
   a instalação: com plugins, EXIF e registro de log ligados passa de vinte
   itens e não cabe na altura da tela. A barra é fixa, então quem rola é ela.
   -------------------------------------------------------------------------- */
.admin-sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.admin-sidebar::-webkit-scrollbar { width: 7px; }
.admin-sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: #333; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar nav a, .admin-sidebar nav button { height: 36px; }

/* Numa tela estreita o título das páginas de administração é o que estoura a
   largura ("Gallery Configuration - Coppermine Photo Gallery 1.6.29 (stable)"
   não tem onde quebrar). A tabela do core não encolhe abaixo do conteúdo. */
.admin-content .archive-section-title h2,
.admin-content .detail_head_collapsed, .admin-content .detail_head_expanded { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .admin-content .maintable td, .admin-content .maintable th { overflow-wrap: anywhere; }
  .admin-content .maintable .tableh1 { white-space: normal; }
  .admin-content .cpg-title-cell .archive-section-title { padding: 18px 14px 14px; }
}

/* O core marca as células que devem alinhar pelo topo com o atributo
   `valign="top"`. O CSS vence o atributo, então a regra geral de alinhar pelo
   meio desalinhava colunas de alturas diferentes — no gerenciador de grupos, a
   coluna de duas linhas descia 13px em relação à de três. */
.admin-content .maintable td[valign="top"], .admin-content .maintable th[valign="top"] { vertical-align: top; }
.admin-content .maintable td[valign="middle"] { vertical-align: middle; }

/* -----------------------------------------------------------------------------
   O gerenciador de grupos (groupmgr.php)

   Cada coluna de opções é uma tabelinha própria, com três células por linha:
   o rótulo, o botão "Sim" e o botão "Não". O core não põe espaço nenhum entre
   o rótulo e o primeiro botão ("Comments◉Yes"), não fixa a largura de nenhuma
   coluna (então "Sim" e "Não" ficam em posições diferentes em cada linha) e
   manda o comando "álbuns atribuídos" como link de menu — que no painel é um
   botão grande, e aqui vira o elemento mais pesado da tela.
   -------------------------------------------------------------------------- */

.cpg-page-groupmgr .admin-content .maintable > tbody > tr > td:not(.cpg-title-cell) { padding-top: 20px; padding-bottom: 20px; }

/* A coluna da caixa de marcar. Ela só recebe conteúdo nos grupos criados por
   você (o Coppermine não deixa apagar Administradores, Registrados e
   Visitantes), então nas três primeiras linhas fica vazia de propósito: o que
   ela precisa é ser estreita, não sumir. */
.cpg-page-groupmgr .admin-content .maintable > tbody > tr > :first-child:not(.cpg-title-cell) {
  padding-left: 16px; padding-right: 6px; text-align: center;
}

/* A coluna do grupo: nome, cota e o comando, um por linha, com o espaçamento
   dado por margem — o `line-height` alto de antes deixava as três linhas
   soltas no meio de um vão. */
/* Todo texto solto da célula ("Cota:", "KiB") passa a ter a mesma voz das
   etiquetas do painel — que é a mesma do comando "álbuns atribuídos" logo
   abaixo. Sem isso eram três tipografias diferentes empilhadas: uma caixa de
   texto grande, uma frase em corpo de leitura e um link em versalete. */
.cpg-page-groupmgr .admin-content .maintable > tbody > tr > td:nth-child(2) {
  width: 208px; padding-right: 26px; line-height: 1.4;
  color: #9a9a94; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.cpg-page-groupmgr .admin-content .maintable input[name^="group_name"] {
  width: 168px; min-height: 32px; height: 32px; margin: 0 0 11px;
  font-size: 12px !important; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.cpg-page-groupmgr .admin-content .maintable input[name^="group_quota"] {
  width: 62px; min-height: 28px; height: 28px; margin: 0 8px; padding: 0 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-align: right;
}
.cpg-page-groupmgr .admin-content .maintable > tbody > tr > td:nth-child(2) br + br { display: none; }

/* "álbuns atribuídos" é um comando secundário: link discreto, não botão. */
.cpg-page-groupmgr .admin-content a.admin_menu {
  min-height: 0; margin: 13px 0 0; padding: 0; display: inline-block; gap: 0;
  border: 0; border-radius: 0; background: none; color: #77776f;
  font: inherit; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #d9d9d3;
}
.cpg-page-groupmgr .admin-content a.admin_menu:hover { background: none; color: #111; text-decoration-color: #111; }
.cpg-page-groupmgr .admin-content a.admin_menu img { display: none !important; }

/* As tabelinhas de opções: rótulo com respiro, "Sim" e "Não" em colunas de
   largura fixa, para alinharem linha a linha e coluna a coluna. */
.cpg-page-groupmgr .admin-content .maintable td > table { font-size: 12px !important; }
.cpg-page-groupmgr .admin-content .maintable td > table td {
  padding: 5px 0; border: 0; line-height: 1.25; vertical-align: middle;
}
.cpg-page-groupmgr .admin-content .maintable td > table td:first-child {
  padding-right: 18px; color: #85857f; white-space: nowrap;
}
/* Separação entre "Sim" e "Não": por espaço, não por largura — a tabelinha do
   core encolhe as células quando a coluna aperta, e a largura fixa era
   ignorada, deixando "Yes○ No" grudado. */
.cpg-page-groupmgr .admin-content .maintable td > table td + td { padding-right: 22px; white-space: nowrap; }
.cpg-page-groupmgr .admin-content .maintable td > table td:last-child { padding-right: 0; }
.cpg-page-groupmgr .admin-content .maintable td > table input[type="radio"] { margin: 0 6px 0 0; }
.cpg-page-groupmgr .admin-content label.clickable_option { margin-right: 0; font-size: 12px; }

/* O nível de acesso é uma coluna de opções empilhadas, sem tabelinha. */
.cpg-page-groupmgr .admin-content .maintable > tbody > tr > td:last-child { line-height: 2.1; font-size: 12px; }
.cpg-page-groupmgr .admin-content .maintable > tbody > tr > td:last-child input[type="radio"] { margin: 0 8px 0 0; }

/* O sinal de "este grupo não pode ser apagado", ao lado do nome. */
.cpg-page-groupmgr .admin-content .maintable td img.icon { opacity: .3; margin: 0 0 10px 8px; vertical-align: -9px; }

/* O sinal de ajuda alinhado com a linha de texto que ele acompanha. */
.cpg-page-groupmgr .admin-content td a.greybox { vertical-align: -2px; }

/* Ícone dentro de botão escuro. A regra geral deixa todo ícone do core em
   silhueta preta — sobre o preto do botão ele sumia, deixando só uma marca
   fantasma à esquerda do rótulo. */
.admin-content :where(.button, button.button, input[type="submit"], input[type="button"]) img {
  filter: brightness(0) invert(1) !important; opacity: .85;
}

/* -----------------------------------------------------------------------------
   A grade de fotos do álbum

   O componente do design system que corresponde a esta grade é o navegador de
   fotos do app original, e lá o cartão é RETRATO (4/5) — que é também o
   formato da maioria das fotos de um acervo assim. A `.thumbnail-image` vinha
   em 4/3, então toda foto em pé aparecia cortada em cima e embaixo.
   -------------------------------------------------------------------------- */
.archive-content .thumbnail-image, .gallery-site .thumbnail-image { aspect-ratio: 4 / 5; }
.archive-content .thumbnail-image img, .gallery-site .thumbnail-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
}

/* -----------------------------------------------------------------------------
   Avaliação, comentários e carinhas (displayimage.php)
   -------------------------------------------------------------------------- */

.cpg-photo-bar { margin-top: 4px; }

/* A linha da avaliação. */
.archive-content #rating_stars, .archive-content .rating {
  margin: 28px 0 0; padding-top: 22px; border-top: 1px solid #e2e2dd;
}
/* O bloco de comentários fecha a página com o mesmo respiro. */
.archive-content #comments, .archive-content .comment_form { margin-top: 28px; padding-top: 22px; border-top: 1px solid #e2e2dd; }
.archive-content .rateit, .archive-content .rating td { font-size: 10px; }

/* O formulário de comentário. O core o monta como tabela de duas colunas: o
   rótulo à esquerda, o campo à direita. */
.archive-content #cpgform, .archive-content form[name="post_comment"] { margin: 0; }
.archive-content table.maintable tr td.tableb { padding: 8px 0; }
.archive-content .comment_form_row td:first-child { width: 130px; }

/* As carinhas. São imagens do core, uma dúzia delas; sem regra elas saem em
   tamanho natural, ocupando uma faixa inteira da página. */
.archive-content .smilies, .archive-content #smilies, .archive-content td.smilies {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 0 0;
}
.archive-content img[src*="images/smiles/"], .gallery-site img[src*="images/smiles/"] {
  width: 20px !important; height: 20px !important; display: inline-block;
  filter: grayscale(100%); opacity: .55; transition: opacity .15s ease, filter .15s ease;
  cursor: pointer; vertical-align: -4px;
}
.archive-content img[src*="images/smiles/"]:hover, .gallery-site img[src*="images/smiles/"]:hover {
  filter: grayscale(0%); opacity: 1;
}


/* -- Ícones nas páginas desenhadas pelo Coppermine -----------------------
   Gerado por themes/demi_lovato_gallery/icones.php --css. A propriedade `content` de
   um <img> troca a imagem inteira, e é assim que os ícones do core somem
   até nas telas em que o tema não passa (catmgr, usermgr, admin…).
   -------------------------------------------------------------------- */
.gallery-site img[src$="icons/config.png"],.admin-shell img[src$="icons/config.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.6v2.2M12 19.2v2.2M4.4 4.4l1.6 1.6M18 18l1.6 1.6M2.6 12h2.2M19.2 12h2.2M4.4 19.6 6 18M18 6l1.6-1.6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/cat_mgr.png"],.admin-shell img[src$="icons/cat_mgr.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h6l1.6 2H21v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18Z'/%3E%3Cpath d='M3 6.5V5a1.5 1.5 0 0 1 1.5-1.5H8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/alb_mgr.png"],.admin-shell img[src$="icons/alb_mgr.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.6'/%3E%3Cpath d='M3 15.5 8 11l4.5 4 3-2.5L21 17'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/picture_sort.png"],.admin-shell img[src$="icons/picture_sort.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='11' height='9' rx='1.4'/%3E%3Cpath d='M18 6v13M18 19l-2.6-2.8M18 19l2.6-2.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/groups_mgr.png"],.admin-shell img[src$="icons/groups_mgr.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.2'/%3E%3Cpath d='M3.2 19.4c.4-3.3 2.9-5.4 5.8-5.4s5.4 2.1 5.8 5.4'/%3E%3Cpath d='M16.4 6.1a3.2 3.2 0 0 1 0 6.1M17.6 14.4c2.1.6 3.5 2.5 3.8 5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/user_mgr.png"],.admin-shell img[src$="icons/user_mgr.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20c.5-3.9 3.4-6.4 7.2-6.4s6.7 2.5 7.2 6.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/ban_user.png"],.admin-shell img[src$="icons/ban_user.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.4'/%3E%3Cpath d='M3.4 19.6c.4-3.3 2.9-5.6 6.1-5.9'/%3E%3Ccircle cx='17' cy='16' r='4.4'/%3E%3Cpath d='m14 19 6-6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/my_profile.png"],.admin-shell img[src$="icons/my_profile.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='9.8' r='3'/%3E%3Cpath d='M6.6 18.6c.7-2.4 2.8-3.9 5.4-3.9s4.7 1.5 5.4 3.9'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/file_approval.png"],.admin-shell img[src$="icons/file_approval.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5V4.2M12 4.2 8.2 8M12 4.2 15.8 8'/%3E%3Cpath d='M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/comment_approval.png"],.admin-shell img[src$="icons/comment_approval.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2a1.6 1.6 0 0 1-1.6 1.6H9.2L5 19.6V5.7A1.6 1.6 0 0 1 6.6 4h12.3a1.6 1.6 0 0 1 1.6 1.7Z'/%3E%3Cpath d='m9.4 10 1.9 1.9 3.6-3.6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/searchnew.png"],.admin-shell img[src$="icons/searchnew.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h6l1.6 2H21v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18Z'/%3E%3Cpath d='M12 11.4v5M9.5 13.9h5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/keyword_mgr.png"],.admin-shell img[src$="icons/keyword_mgr.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 11.4V4.6a1 1 0 0 1 1-1h6.8a1 1 0 0 1 .7.3l8 8a1 1 0 0 1 0 1.4l-6.8 6.8a1 1 0 0 1-1.4 0l-8-8a1 1 0 0 1-.3-.7Z'/%3E%3Ccircle cx='7.9' cy='7.9' r='1.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/random.png"],.admin-shell img[src$="icons/random.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h3.2l3 5 2.8 5H18M3 17.5h3.2l3-5'/%3E%3Cpath d='M15.4 4.2 18 6.5l-2.6 2.3M15.4 15.2 18 17.5l-2.6 2.3'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/last_uploads.png"],.admin-shell img[src$="icons/last_uploads.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.3V12l3.2 1.9'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/util.png"],.admin-shell img[src$="icons/util.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5.3a4.3 4.3 0 0 1-5.6 5.6l-8 8a2 2 0 0 1-2.9-2.9l8-8A4.3 4.3 0 0 1 17.1 2.4l-3 3 1.4 3.1 3.1 1.4Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/plugin_mgr.png"],.admin-shell img[src$="icons/plugin_mgr.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 3.6h5.2v3a2 2 0 1 0 3.8 1h2.1v5.2h-3a2 2 0 1 0-1 3.8v2.1H9.4v-3a2 2 0 1 0-3.8-1H3.5V9.4h3a2 2 0 1 0 1-3.8Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/bridge_mgr.png"],.admin-shell img[src$="icons/bridge_mgr.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 13.8a4 4 0 0 0 5.7 0l2.6-2.6a4 4 0 0 0-5.7-5.7l-1.4 1.4'/%3E%3Cpath d='M13.8 10.2a4 4 0 0 0-5.7 0l-2.6 2.6a4 4 0 0 0 5.7 5.7l1.4-1.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/check_versions.png"],.admin-shell img[src$="icons/check_versions.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 4.6 6v6c0 4.3 3 7.4 7.4 8.8 4.4-1.4 7.4-4.5 7.4-8.8V6Z'/%3E%3Cpath d='m9.2 12 2 2 3.6-3.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/update_database.png"],.admin-shell img[src$="icons/update_database.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.2' rx='7.4' ry='2.8'/%3E%3Cpath d='M4.6 6.2v11.6c0 1.5 3.3 2.8 7.4 2.8s7.4-1.3 7.4-2.8V6.2'/%3E%3Cpath d='M4.6 12c0 1.5 3.3 2.8 7.4 2.8s7.4-1.3 7.4-2.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/phpinfo.png"],.admin-shell img[src$="icons/phpinfo.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 11v5.4M12 7.9h.01'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/documentation.png"],.admin-shell img[src$="icons/documentation.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 5.1A1.8 1.8 0 0 1 6.2 3.3H19v14.4H6.2a1.8 1.8 0 0 0-1.8 1.8Z'/%3E%3Cpath d='M4.4 19.5a1.8 1.8 0 0 1 1.8-1.8H19v3H6.2a1.8 1.8 0 0 1-1.8-1.2Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/news_show.png"],.admin-shell img[src$="icons/news_show.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.2L14 5.4v13.2L7.2 14.5H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M17.6 9a4.4 4.4 0 0 1 0 6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/news_hide.png"],.admin-shell img[src$="icons/news_hide.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 4.2 19.8 19.8'/%3E%3Cpath d='M9.6 5.6 14 3.2v6.1M14 14.4v4.4l-4.9-2.9'/%3E%3Cpath d='M4 9.5h3.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/delete.png"],.admin-shell img[src$="icons/delete.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 6.6h14.8M9.4 6.6V4.8a1 1 0 0 1 1-1h3.2a1 1 0 0 1 1 1v1.8'/%3E%3Cpath d='M6.6 6.6 7.4 19a1.4 1.4 0 0 0 1.4 1.3h6.4A1.4 1.4 0 0 0 16.6 19l.8-12.4'/%3E%3Cpath d='M10.4 10v6.2M13.6 10v6.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/modifyalb.png"],.admin-shell img[src$="icons/modifyalb.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.6'/%3E%3Cpath d='M7.5 15.2 10 12.6l2.2 2 2.4-2.6 2.9 3.2'/%3E%3Ccircle cx='8.4' cy='8.6' r='1.3'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/edit.png"],.admin-shell img[src$="icons/edit.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.8 16.2 5.1a2.1 2.1 0 0 1 3 3L7.5 19.8l-4 1Z'/%3E%3Cpath d='m14.4 6.9 2.7 2.7'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/tab_right.png"],.admin-shell img[src$="icons/tab_right.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/right.png"],.admin-shell img[src$="icons/right.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13.5 6.5 19.5 12l-6 5.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/up.png"],.admin-shell img[src$="icons/up.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 14.5 5.5-5.5 5.5 5.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/down.png"],.admin-shell img[src$="icons/down.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/upup.png"],.admin-shell img[src$="icons/upup.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 11 5.5-5.5 5.5 5.5M6.5 18l5.5-5.5 5.5 5.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/downdown.png"],.admin-shell img[src$="icons/downdown.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 6 5.5 5.5 5.5-5.5M6.5 13l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/ok.png"],.admin-shell img[src$="icons/ok.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.7 4.7L19 7.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/cancel.png"],.admin-shell img[src$="icons/cancel.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 6.4 17.6 17.6M17.6 6.4 6.4 17.6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/stop.png"],.admin-shell img[src$="icons/stop.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M6.6 6.6 17.4 17.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/add.png"],.admin-shell img[src$="icons/add.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/search.png"],.admin-shell img[src$="icons/search.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.4'/%3E%3Cpath d='m15.4 15.4 4.4 4.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/filter.png"],.admin-shell img[src$="icons/filter.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 5.2h16.8L14 12.8v5.6l-4 2.4v-8Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/info.png"],.admin-shell img[src$="icons/info.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 11v5.4M12 7.9h.01'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/thumbnails.png"],.admin-shell img[src$="icons/thumbnails.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='7.2' height='7.2' rx='1.2'/%3E%3Crect x='13.4' y='3.4' width='7.2' height='7.2' rx='1.2'/%3E%3Crect x='3.4' y='13.4' width='7.2' height='7.2' rx='1.2'/%3E%3Crect x='13.4' y='13.4' width='7.2' height='7.2' rx='1.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/plugin_install.png"],.admin-shell img[src$="icons/plugin_install.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10M12 14l-3.4-3.4M12 14l3.4-3.4'/%3E%3Cpath d='M4.6 15.4v3a1.6 1.6 0 0 0 1.6 1.6h11.6a1.6 1.6 0 0 0 1.6-1.6v-3'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/left.png"],.admin-shell img[src$="icons/left.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/leftleft.png"],.admin-shell img[src$="icons/leftleft.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 5.5 5 12l6.5 6.5M19 5.5 12.5 12 19 18.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/rightright.png"],.admin-shell img[src$="icons/rightright.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 5.5 19 12l-6.5 6.5M5 5.5 11.5 12 5 18.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/tab_left.png"],.admin-shell img[src$="icons/tab_left.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/tab_first.png"],.admin-shell img[src$="icons/tab_first.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 5.5 9.5 12 16 18.5M6 5.5v13'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/tab_last.png"],.admin-shell img[src$="icons/tab_last.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5 14.5 12 8 18.5M18 5.5v13'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/top.png"],.admin-shell img[src$="icons/top.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V7M12 7 7.5 11.5M12 7l4.5 4.5M5 4h14'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/move.png"],.admin-shell img[src$="icons/move.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18M12 3 9.6 5.4M12 3l2.4 2.4M12 21l-2.4-2.4M12 21l2.4-2.4M3 12l2.4-2.4M3 12l2.4 2.4M21 12l-2.4-2.4M21 12l-2.4 2.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/key_enter.png"],.admin-shell img[src$="icons/key_enter.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5v7.5a2 2 0 0 1-2 2H5'/%3E%3Cpath d='m8.5 11-3.5 3.5L8.5 18'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/reload.png"],.admin-shell img[src$="icons/reload.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12a8.4 8.4 0 1 1-2.5-6'/%3E%3Cpath d='M20.4 4.2V10h-5.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/undo.png"],.admin-shell img[src$="icons/undo.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12a8.4 8.4 0 1 0 2.5-6'/%3E%3Cpath d='M3.6 4.2V10h5.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/rotate_cw.png"],.admin-shell img[src$="icons/rotate_cw.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12a8.4 8.4 0 1 1-2.5-6'/%3E%3Cpath d='M20.4 4.2V10h-5.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/rotate_ccw.png"],.admin-shell img[src$="icons/rotate_ccw.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12a8.4 8.4 0 1 0 2.5-6'/%3E%3Cpath d='M3.6 4.2V10h5.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/online.png"],.admin-shell img[src$="icons/online.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.2'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='currentColor' stroke='none'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/offline.png"],.admin-shell img[src$="icons/offline.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/add_user.png"],.admin-shell img[src$="icons/add_user.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.4'/%3E%3Cpath d='M3 19.4c.4-3.4 3-5.6 6.5-5.6 1 0 1.9.2 2.7.5'/%3E%3Cpath d='M17.5 13.5v6M14.5 16.5h6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/group_add.png"],.admin-shell img[src$="icons/group_add.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='3.2'/%3E%3Cpath d='M2.8 19.4c.4-3.3 2.8-5.4 5.7-5.4 1 0 1.9.2 2.7.7'/%3E%3Cpath d='M17.5 13.5v6M14.5 16.5h6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/memberlist.png"],.admin-shell img[src$="icons/memberlist.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='8' r='2.6'/%3E%3Cpath d='M3 18c.3-2.6 1.9-4.2 4-4.2s3.7 1.6 4 4.2'/%3E%3Cpath d='M14 8.5h7M14 12.5h7M14 16.5h7'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/my_gallery.png"],.admin-shell img[src$="icons/my_gallery.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='14' height='11' rx='1.5'/%3E%3Cpath d='M7 20h12a2 2 0 0 0 2-2V9'/%3E%3Cpath d='m3 13.5 3.5-3 3 2.6 2.6-2.2L17 14'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/ban_user_disabled.png"],.admin-shell img[src$="icons/ban_user_disabled.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.4'/%3E%3Cpath d='M3.4 19.6c.4-3.3 2.9-5.6 6.1-5.9'/%3E%3Ccircle cx='17' cy='16' r='4.4'/%3E%3Cpath d='m14 19 6-6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/ban_user_comment.png"],.admin-shell img[src$="icons/ban_user_comment.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13a1.6 1.6 0 0 1-1.6 1.6H9.2L5 18.4V5.7A1.6 1.6 0 0 1 6.6 4h12.3a1.6 1.6 0 0 1 1.6 1.7Z'/%3E%3Cpath d='m9.6 7.6 6 6M15.6 7.6l-6 6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/login.png"],.admin-shell img[src$="icons/login.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.5h5A1.5 1.5 0 0 1 20 5v14a1.5 1.5 0 0 1-1.5 1.5h-5'/%3E%3Cpath d='M10 8.5 13.5 12 10 15.5M13.5 12H3.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/logout.png"],.admin-shell img[src$="icons/logout.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 3.5h-5A1.5 1.5 0 0 0 4 5v14a1.5 1.5 0 0 0 1.5 1.5h5'/%3E%3Cpath d='M17 8.5 20.5 12 17 15.5M20.5 12h-10'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/admin_mode_on.png"],.admin-shell img[src$="icons/admin_mode_on.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 4.6 6v6c0 4.3 3 7.4 7.4 8.8 4.4-1.4 7.4-4.5 7.4-8.8V6Z'/%3E%3Cpath d='m9.2 12 2 2 3.6-3.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/admin_mode_off.png"],.admin-shell img[src$="icons/admin_mode_off.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 4.6 6v6c0 4.3 3 7.4 7.4 8.8 4.4-1.4 7.4-4.5 7.4-8.8V6Z'/%3E%3Cpath d='m9.6 9.6 4.8 4.8M14.4 9.6l-4.8 4.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/comment.png"],.admin-shell img[src$="icons/comment.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.6a1.6 1.6 0 0 1-1.6 1.6H9.2L5 19V5.7A1.6 1.6 0 0 1 6.6 4h12.3a1.6 1.6 0 0 1 1.6 1.7Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/comment_approve.png"],.admin-shell img[src$="icons/comment_approve.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.6a1.6 1.6 0 0 1-1.6 1.6H9.2L5 19V5.7A1.6 1.6 0 0 1 6.6 4h12.3a1.6 1.6 0 0 1 1.6 1.7Z'/%3E%3Cpath d='m9.4 9.8 1.9 1.9 3.6-3.6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/comment_approve_disabled.png"],.admin-shell img[src$="icons/comment_approve_disabled.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.6a1.6 1.6 0 0 1-1.6 1.6H9.2L5 19V5.7A1.6 1.6 0 0 1 6.6 4h12.3a1.6 1.6 0 0 1 1.6 1.7Z'/%3E%3Cpath d='m9.4 9.8 1.9 1.9 3.6-3.6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/comment_disapprove.png"],.admin-shell img[src$="icons/comment_disapprove.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.6a1.6 1.6 0 0 1-1.6 1.6H9.2L5 19V5.7A1.6 1.6 0 0 1 6.6 4h12.3a1.6 1.6 0 0 1 1.6 1.7Z'/%3E%3Cpath d='m9.6 7.8 5.8 5.8M15.4 7.8l-5.8 5.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/comment_disapprove_disabled.png"],.admin-shell img[src$="icons/comment_disapprove_disabled.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.6a1.6 1.6 0 0 1-1.6 1.6H9.2L5 19V5.7A1.6 1.6 0 0 1 6.6 4h12.3a1.6 1.6 0 0 1 1.6 1.7Z'/%3E%3Cpath d='m9.6 7.8 5.8 5.8M15.4 7.8l-5.8 5.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/mail.png"],.admin-shell img[src$="icons/mail.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.2' width='18' height='13.6' rx='1.6'/%3E%3Cpath d='m3.6 6.4 8.4 6.4 8.4-6.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/contact.png"],.admin-shell img[src$="icons/contact.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.2' width='18' height='13.6' rx='1.6'/%3E%3Cpath d='m3.6 6.4 8.4 6.4 8.4-6.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/ecard_review.png"],.admin-shell img[src$="icons/ecard_review.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.2' width='18' height='13.6' rx='1.6'/%3E%3Cpath d='m3.6 6.4 8.4 6.4 8.4-6.4'/%3E%3Cpath d='m17.4 15.4 1 2 2.2.3-1.6 1.6.4 2.2-2-1-2 1 .4-2.2-1.6-1.6 2.2-.3Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/folder.png"],.admin-shell img[src$="icons/folder.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h6l1.6 2H21v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/category.png"],.admin-shell img[src$="icons/category.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h6l1.6 2H21v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/file.png"],.admin-shell img[src$="icons/file.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3.4H6.8a1.6 1.6 0 0 0-1.6 1.6v14a1.6 1.6 0 0 0 1.6 1.6h10.4a1.6 1.6 0 0 0 1.6-1.6V8.4Z'/%3E%3Cpath d='M13.6 3.4v5h5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/filename.png"],.admin-shell img[src$="icons/filename.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3.4H6.8a1.6 1.6 0 0 0-1.6 1.6v14a1.6 1.6 0 0 0 1.6 1.6h10.4a1.6 1.6 0 0 0 1.6-1.6V8.4Z'/%3E%3Cpath d='M13.6 3.4v5h5'/%3E%3Cpath d='M8.4 13h7M8.4 16.4h5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/zip.png"],.admin-shell img[src$="icons/zip.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3.4H6.8a1.6 1.6 0 0 0-1.6 1.6v14a1.6 1.6 0 0 0 1.6 1.6h10.4a1.6 1.6 0 0 0 1.6-1.6V8.4Z'/%3E%3Cpath d='M13.6 3.4v5h5'/%3E%3Cpath d='M10.4 4v2M12 6v2M10.4 8v2M12 10v2M10.4 12v2.4h1.6V12'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/upload.png"],.admin-shell img[src$="icons/upload.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4.4M12 4.4 8.2 8.2M12 4.4l3.8 3.8'/%3E%3Cpath d='M4 15.4v3.2A1.6 1.6 0 0 0 5.6 20.2h12.8a1.6 1.6 0 0 0 1.6-1.6v-3.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/download.png"],.admin-shell img[src$="icons/download.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.4V16M12 16l-3.8-3.8M12 16l3.8-3.8'/%3E%3Cpath d='M4 15.4v3.2A1.6 1.6 0 0 0 5.6 20.2h12.8a1.6 1.6 0 0 0 1.6-1.6v-3.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/hdd.png"],.admin-shell img[src$="icons/hdd.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8.2' width='18' height='8.6' rx='1.6'/%3E%3Cpath d='M6.4 12.5h.01M9.4 12.5h.01'/%3E%3Cpath d='M5 8.2 6.8 4.4h10.4L19 8.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/disk_usage.png"],.admin-shell img[src$="icons/disk_usage.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 3.4V12l6 4.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/erase.png"],.admin-shell img[src$="icons/erase.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.6 4.4 5 5a1.6 1.6 0 0 1 0 2.3l-7.4 7.4H7.4l-3-3a1.6 1.6 0 0 1 0-2.3l9.2-9.4a1.6 1.6 0 0 1 1-.0Z'/%3E%3Cpath d='M8.4 19.1 4.6 15.3'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/favorites.png"],.admin-shell img[src$="icons/favorites.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 4 2.5 5 5.6.8-4 4 .9 5.6-5-2.6-5 2.6.9-5.6-4-4 5.6-.8Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/rating.png"],.admin-shell img[src$="icons/rating.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 4 2.5 5 5.6.8-4 4 .9 5.6-5-2.6-5 2.6.9-5.6-4-4 5.6-.8Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/top_rated.png"],.admin-shell img[src$="icons/top_rated.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 4 2.5 5 5.6.8-4 4 .9 5.6-5-2.6-5 2.6.9-5.6-4-4 5.6-.8Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/most_viewed.png"],.admin-shell img[src$="icons/most_viewed.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 12S6 5.4 12 5.4 21.6 12 21.6 12 18 18.6 12 18.6 2.4 12 2.4 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/last_viewed.png"],.admin-shell img[src$="icons/last_viewed.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 12S6 5.4 12 5.4 21.6 12 21.6 12 18 18.6 12 18.6 2.4 12 2.4 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/show_table_row.png"],.admin-shell img[src$="icons/show_table_row.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 12S6 5.4 12 5.4 21.6 12 21.6 12 18 18.6 12 18.6 2.4 12 2.4 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/hide_table_row.png"],.admin-shell img[src$="icons/hide_table_row.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.4 20 20.4'/%3E%3Cpath d='M9.4 6c.8-.3 1.7-.4 2.6-.4 6 0 9.6 6.4 9.6 6.4a17 17 0 0 1-3.3 3.9M6.3 8.2A17 17 0 0 0 2.4 12s3.6 6.6 9.6 6.6c1.5 0 2.8-.4 4-1'/%3E%3Cpath d='M10 10.2a3.2 3.2 0 0 0 4 4.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/slideshow.png"],.admin-shell img[src$="icons/slideshow.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.6' width='18' height='12.8' rx='1.6'/%3E%3Cpath d='m10.4 9 4.4 2.6-4.4 2.6Z'/%3E%3Cpath d='M8.4 20.6h7.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/run_not.png"],.admin-shell img[src$="icons/run_not.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/last_created.png"],.admin-shell img[src$="icons/last_created.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.3V12l3.2 1.9'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/last_uploads_disabled.png"],.admin-shell img[src$="icons/last_uploads_disabled.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.3V12l3.2 1.9'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/calendar.png"],.admin-shell img[src$="icons/calendar.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.4' width='17.2' height='15.2' rx='1.6'/%3E%3Cpath d='M3.4 10h17.2M8.4 3.4v4M15.6 3.4v4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/calendar_delete.png"],.admin-shell img[src$="icons/calendar_delete.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.4' width='17.2' height='15.2' rx='1.6'/%3E%3Cpath d='M3.4 10h17.2M8.4 3.4v4M15.6 3.4v4'/%3E%3Cpath d='m9.6 13.6 4.8 4.8M14.4 13.6l-4.8 4.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/exif_mgr.png"],.admin-shell img[src$="icons/exif_mgr.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4h3.2l1.8-2.6h6l1.8 2.6H20a1.4 1.4 0 0 1 1.4 1.4v8a1.4 1.4 0 0 1-1.4 1.4H4a1.4 1.4 0 0 1-1.4-1.4v-8A1.4 1.4 0 0 1 4 8.4Z'/%3E%3Ccircle cx='12' cy='13.4' r='3.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/help.png"],.admin-shell img[src$="icons/help.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M9.6 9.5a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.7-.9 1.3v.6M12 16.8h.01'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/warning.png"],.admin-shell img[src$="icons/warning.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 4.2 2.9 17.4a1.5 1.5 0 0 0 1.3 2.3h15.6a1.5 1.5 0 0 0 1.3-2.3L13.3 4.2a1.5 1.5 0 0 0-2.6 0Z'/%3E%3Cpath d='M12 9.6v4M12 16.6h.01'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/bug.png"],.admin-shell img[src$="icons/bug.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='7.6' width='8' height='11.4' rx='4'/%3E%3Cpath d='M8 11.4H4.6M16 11.4h3.4M8 15.4H4.2M16 15.4h3.8M9.4 8 8 5.6M14.6 8 16 5.6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/report.png"],.admin-shell img[src$="icons/report.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4.4M5 5.4h12.6l-2.2 3.4 2.2 3.4H5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/close.png"],.admin-shell img[src$="icons/close.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/browser.png"],.admin-shell img[src$="icons/browser.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.6' width='18' height='14.8' rx='1.6'/%3E%3Cpath d='M3 9.2h18M6.2 6.9h.01M8.8 6.9h.01'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/client.png"],.admin-shell img[src$="icons/client.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.6' width='18' height='11.6' rx='1.6'/%3E%3Cpath d='M8.4 20.2h7.2M12 16.2v4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/sidebar.png"],.admin-shell img[src$="icons/sidebar.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.6' width='18' height='14.8' rx='1.6'/%3E%3Cpath d='M9.4 4.6v14.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/web.png"],.admin-shell img[src$="icons/web.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M3.2 12h17.6M12 3.2a14 14 0 0 1 0 17.6 14 14 0 0 1 0-17.6Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/ip.png"],.admin-shell img[src$="icons/ip.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M3.2 12h17.6M12 3.2a14 14 0 0 1 0 17.6 14 14 0 0 1 0-17.6Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/babelfish.png"],.admin-shell img[src$="icons/babelfish.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6h8.2M6.7 4.4V6M9 6c0 3.4-2.4 6.4-6.4 7.6M4.6 9.4c1.4 2.4 3.6 3.6 6.6 4.2'/%3E%3Cpath d='m12.4 20 4-9.6L20.4 20M13.8 17h5.2'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/github.png"],.admin-shell img[src$="icons/github.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 20.4v-2.6c-3 .6-3.8-1.4-3.8-1.4-.5-1.2-1.2-1.6-1.2-1.6-1-.7.1-.7.1-.7 1.1.1 1.7 1.2 1.7 1.2 1 1.7 2.6 1.2 3.2.9.1-.7.4-1.2.7-1.5-2.4-.3-4.9-1.2-4.9-5.4 0-1.2.4-2.2 1.1-2.9-.1-.3-.5-1.4.1-2.9 0 0 .9-.3 3 1.1a10 10 0 0 1 5.4 0c2.1-1.4 3-1.1 3-1.1.6 1.5.2 2.6.1 2.9.7.7 1.1 1.7 1.1 2.9 0 4.2-2.5 5.1-4.9 5.4.4.4.8 1.1.8 2.2v3.5'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/stats.png"],.admin-shell img[src$="icons/stats.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.4V13M9.4 20.4V6.4M14.8 20.4v-9M20.2 20.4V8.6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/stats_delete.png"],.admin-shell img[src$="icons/stats_delete.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.4V13M9.4 20.4V6.4M14.8 20.4v-9'/%3E%3Cpath d='m17.6 14.4 4.4 4.4M22 14.4l-4.4 4.4'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/view_logs.png"],.admin-shell img[src$="icons/view_logs.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3.4H6.8a1.6 1.6 0 0 0-1.6 1.6v14a1.6 1.6 0 0 0 1.6 1.6h10.4a1.6 1.6 0 0 0 1.6-1.6V8.4Z'/%3E%3Cpath d='M13.6 3.4v5h5'/%3E%3Cpath d='M8.4 12.4h7M8.4 15.8h7M8.4 9h2.6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/announcement.png"],.admin-shell img[src$="icons/announcement.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.2L14 5.4v13.2L7.2 14.5H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M17.6 9a4.4 4.4 0 0 1 0 6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/home.png"],.admin-shell img[src$="icons/home.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.6 12 3.8l8.4 6.8v8.2a1.6 1.6 0 0 1-1.6 1.6H5.2a1.6 1.6 0 0 1-1.6-1.6Z'/%3E%3Cpath d='M9.4 20.4v-6.6h5.2v6.6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/ignore.png"],.admin-shell img[src$="icons/ignore.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/title.png"],.admin-shell img[src$="icons/title.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.4V4.6h14v1.8M12 4.6v14.8M9 19.4h6'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/text_left.png"],.admin-shell img[src$="icons/text_left.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.4h16M4 11h10M4 15.6h16M4 20.2h10'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/text_bottom.png"],.admin-shell img[src$="icons/text_bottom.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.4h16M4 9h10M4 13.6h16M4 18.2h10'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/plugin_enabled.png"],.admin-shell img[src$="icons/plugin_enabled.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 3.6h5.2v3a2 2 0 1 0 3.8 1h2.1v5.2h-3a2 2 0 1 0-1 3.8v2.1H9.4v-3a2 2 0 1 0-3.8-1H3.5V9.4h3a2 2 0 1 0 1-3.8Z'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/plugin_disabled.png"],.admin-shell img[src$="icons/plugin_disabled.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 3.6h5.2v3a2 2 0 1 0 3.8 1h2.1v5.2h-3a2 2 0 1 0-1 3.8v2.1H9.4v-3a2 2 0 1 0-3.8-1H3.5V9.4h3a2 2 0 1 0 1-3.8Z'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/plugin_uninstall.png"],.admin-shell img[src$="icons/plugin_uninstall.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 3.6h5.2v3a2 2 0 1 0 3.8 1h2.1v5.2h-3a2 2 0 1 0-1 3.8v2.1H9.4v-3a2 2 0 1 0-3.8-1H3.5V9.4h3a2 2 0 1 0 1-3.8Z'/%3E%3Cpath d='M8.6 12h6.8'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/file_approve.png"],.admin-shell img[src$="icons/file_approve.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5V4.2M12 4.2 8.2 8M12 4.2 15.8 8'/%3E%3Cpath d='M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15'/%3E%3C/svg%3E"); width: 16px; height: 16px; }
.gallery-site img[src$="icons/file_disapprove.png"],.admin-shell img[src$="icons/file_disapprove.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2v11.3M12 15.5 8.2 11.7M12 15.5l3.8-3.8'/%3E%3Cpath d='M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15'/%3E%3C/svg%3E"); width: 16px; height: 16px; }

/* Identidade Demi Lovato — capa integrada e paleta pública. */
:root {
  --demi-body-bg: #bab7b5;
  --demi-hero-bg: #bab7b5;
  --demi-hero-smoke: #1b1b1b;
}

body { background: var(--demi-body-bg); }

.gallery-site,
.gallery-site .archive-content,
.gallery-site .public-index-page,
.gallery-site .archive-browser,
.gallery-site .gallery-home {
  background-color: var(--gallery-bg, var(--demi-body-bg)) !important;
}

.gallery-home .archive-intro {
  background: var(--demi-hero-bg);
  z-index: 2;
  min-height: clamp(720px, 86vh, 860px);
  margin-bottom: -2px;
  box-shadow:
    inset 0 -132px 154px -66px rgba(186, 183, 181,.82);
}

.gallery-home { --arq-hero-image: url('images/hero-hailey-v2.png') !important; }

.gallery-home .archive-content {
  position: relative;
  z-index: 1;
  box-shadow: none;
}

.gallery-home .archive-content::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -100px;
  left: 50%;
  width: calc(100vw + 120px);
  height: 380px;
  pointer-events: none;
  background: linear-gradient(180deg, #bab7b5 0%, #bab7b5 42%, rgba(186, 183, 181,.78) 58%, rgba(186, 183, 181,.38) 76%, transparent 100%);
  filter: blur(30px);
  transform: translateX(-50%);
}

.gallery-home .archive-content > * { position: relative; z-index: 1; }

.gallery-home .archive-intro::before {
  z-index: 0;
  inset: -12%;
  background:
    radial-gradient(ellipse at 16% 30%, rgba(27, 27, 27,.72) 0%, rgba(27, 27, 27,.32) 25%, transparent 58%),
    radial-gradient(ellipse at 82% 66%, rgba(27, 27, 27,.66) 0%, rgba(27, 27, 27,.26) 28%, transparent 62%),
    linear-gradient(rgba(233,181,200,.36), rgba(233,181,200,.36)),
    var(--arq-hero-image) center / cover no-repeat;
  filter: blur(52px) saturate(.88);
  opacity: .86;
  transform: none;
  animation: demi-smoke-bed 11s ease-in-out infinite alternate;
}

.gallery-home .archive-intro::after {
  z-index: 4;
  background: linear-gradient(180deg, transparent 0%, transparent 84%, rgba(186, 183, 181,.2) 87%, rgba(186, 183, 181,.48) 91%, rgba(186, 183, 181,.82) 96%, #bab7b5 100%);
  pointer-events: none;
  animation: none;
}

.gallery-home .hero-photo {
  z-index: 2;
  inset: 0 auto 0 50%;
  width: auto;
  height: 100%;
  aspect-ratio: 3400 / 1707;
  background-image: var(--arq-hero-image) !important;
  background-position: var(--hero-x, 50%) var(--hero-y, 50%) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  transform: translateX(-50%);
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 92%, rgba(0,0,0,.9) 96%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 15%, #000 29%, #000 71%, rgba(0,0,0,.12) 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, #000 0%, #000 92%, rgba(0,0,0,.9) 96%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 15%, #000 29%, #000 71%, rgba(0,0,0,.12) 85%, transparent 100%);
  mask-composite: intersect;
  animation: none;
}

.gallery-home .hero-photo::before,
.gallery-home .hero-photo::after { display: none; }

.gallery-home .hero-smoke {
  z-index: 1;
  mix-blend-mode: normal;
  opacity: .76;
}

.gallery-home .hero-smoke::before,
.gallery-home .hero-smoke::after,
.gallery-home .hero-smoke i {
  background: radial-gradient(ellipse at center, var(--demi-hero-smoke) 0%, rgba(27, 27, 27,.42) 30%, rgba(27, 27, 27,.16) 52%, transparent 73%);
  filter: blur(38px) !important;
  opacity: .5;
}

.gallery-home .hero-smoke::before { left: -15%; top: 4%; }
.gallery-home .hero-smoke::after { right: -13%; bottom: -28%; }

/* O nome ja faz parte da arte; continua no HTML para leitores de tela. */
.gallery-home .archive-intro-inner > div:first-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.gallery-home .archive-intro-inner {
  position: relative;
  z-index: 5;
  min-height: 100%;
  padding: 116px 0 24px;
  justify-content: flex-end;
  gap: 12px;
}

.gallery-home .archive-intro-inner > * { position: relative; z-index: 6; }

.gallery-home .archive-search {
  border-color: rgba(27, 27, 27,.38);
  background: rgba(255,250,252,.94);
  box-shadow: 0 16px 42px rgba(74,89,101,.18);
}

.gallery-home .archive-search .public-category-picker { display: none; }

.gallery-home .archive-search input:focus,
.gallery-home .archive-search input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.gallery-home .archive-intro .archive-stats-bar > div {
  border-color: rgba(255,255,255,.48);
  background: rgba(27, 27, 27,.34);
  box-shadow: 0 14px 34px rgba(74,89,101,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@media (min-width: 981px) {
  .gallery-home .archive-intro-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 116px 0 92px;
  }

  .gallery-home .hero-toolbar {
    position: relative;
    z-index: 6;
    width: fit-content;
    max-width: 88vw;
    margin: 0 auto;
    min-height: 50px;
    padding: 4px 5px;
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 12px;
    background: rgba(27, 27, 27,.48);
    box-shadow: 0 16px 38px rgba(63,94,108,.22);
    backdrop-filter: blur(22px) saturate(1.12);
    -webkit-backdrop-filter: blur(22px) saturate(1.12);
    overflow: hidden;
    transform: translateY(76px);
  }

  .gallery-home .archive-search {
    flex: 0 0 205px;
    width: 205px;
    height: 42px;
    margin: 0;
    border: 0;
    border-right: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .gallery-home .archive-search > span {
    flex: 0 0 14px;
    width: 14px;
    margin-left: 4px;
    margin-right: 4px;
    display: grid;
    place-items: center;
    color: #bab7b5;
    font-size: 16px;
    line-height: 1;
    transform: none;
  }
  .gallery-home .archive-search input {
    padding: 0 9px;
    background: transparent;
    color: #f7f6f4;
    font-size: 11px;
  }
  .gallery-home .archive-search input::placeholder { color: rgba(255,255,255,.72); }
  .gallery-home .archive-search .public-category-picker {
    flex: 0 0 132px;
    width: 132px;
    height: 36px;
  }
  .gallery-home .archive-search .public-category-trigger {
    padding: 0 10px;
    border-left-color: rgba(255,255,255,.28);
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    color: #f7f6f4;
    font-size: 9px;
  }
  .gallery-home .archive-search .public-category-trigger:hover { background: rgba(255,255,255,.2); }
  .gallery-home .archive-search button,
  .gallery-home .archive-search a {
    align-self: center;
    width: 34px;
    min-width: 34px;
    height: 26px;
    margin: 0 5px 0 4px;
    padding: 0 7px;
    border-radius: 6px;
    border: 0;
    background: #1b1b1b;
    color: #bab7b5;
    font-size: 9px;
  }
  .gallery-home .archive-search button:hover,
  .gallery-home .archive-search a:hover { background: #1b1b1b; color: #bab7b5; }

  .gallery-home .archive-stats-bar {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
  }

  .gallery-home .archive-intro .archive-stats-bar > div {
    width: auto;
    min-height: 42px;
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: 0 9px 9px 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .gallery-home .archive-stats-bar span { font-size: 7.5px; }
  .gallery-home .archive-stats-bar strong { color: #f7f6f4; font-size: 13px; }
  .gallery-home .archive-stats-bar > div > i {
    height: 16px;
    margin: 0 9px;
  }
}

/* Navegação Demi — azul sólido e geometria menos arredondada. */
.gallery-site .gallery-nav {
  border-color: rgba(255,255,255,.32);
  border-radius: 14px;
  background: #1b1b1b;
  box-shadow: 0 12px 30px rgba(63,94,108,.24);
}

.gallery-site .gallery-nav button,
.gallery-site .gallery-nav a {
  border-radius: 8px;
  color: rgba(255,255,255,.94);
}

.gallery-site .gallery-nav button:hover,
.gallery-site .gallery-nav button.active,
.gallery-site .gallery-nav a:hover,
.gallery-site .gallery-nav a.active {
  background: rgba(255,255,255,.16);
  color: #f7f6f4;
}

.gallery-site .gallery-nav .nav-brand {
  position: relative;
  width: 52px;
  min-width: 52px;
  height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.gallery-site .gallery-nav .nav-brand:hover { background: transparent; }

.gallery-site .gallery-nav .nav-brand::after {
  display: none;
  content: none;
}

.gallery-site .gallery-nav .nav-brand .brand-mark {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 27px;
  flex-basis: 38px;
  overflow: visible;
  border-radius: 0 !important;
  box-shadow: none;
  transform: translateY(-1px);
}

.gallery-site .gallery-nav .nav-brand .brand-mark img {
  object-fit: contain;
}

.gallery-site .brand-mark.has-image {
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent;
}

/* Títulos e categorias — paleta Demi. */
.gallery-home .archive-section-title h2 {
  color: #1b1b1b;
}

.gallery-home .archive-section .archive-section-title h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.gallery-home .archive-section .archive-section-title h2::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: url("images/title-heart.svg?v=hailey") center / contain no-repeat;
}

.gallery-home .archive-section-title > div > span {
  color: #1b1b1b;
}

.gallery-home .archive-section-title > button,
.gallery-home .archive-section-title > a {
  border-bottom-color: #1b1b1b;
  color: #1b1b1b;
}

.gallery-home .category-section,
.gallery-home .category-section .category-list,
.gallery-home .category-section .category-group,
.gallery-home .category-section .category-row,
.gallery-home .category-section .category-years-panel {
  background: #bab7b5;
}

.gallery-home .category-section {
  padding-right: 28px;
  padding-left: 28px;
  overflow: hidden;
  border: 1px solid rgba(27, 27, 27,.22);
  border-radius: 20px;
}

.gallery-home .category-section .archive-section-title h2 {
  gap: 12px;
}

.gallery-home .category-section .archive-section-title > p,
.gallery-home .category-section .category-years-panel > div:first-child small {
  color: #4a4747;
}

.gallery-home .category-section .archive-section-title > p {
  width: 204px;
  margin-right: 12px;
  grid-template-columns: 72px 72px 28px;
  column-gap: 16px;
  color: #4a4747;
}

.gallery-home .category-section .category-copy small {
  color: #1b1b1b;
}

.gallery-home .category-section .category-copy strong,
.gallery-home .category-section .category-years-panel > div:first-child span {
  color: #1b1b1b;
}

.gallery-home .category-section .category-row > b,
.gallery-home .category-section .category-expand-arrow,
.gallery-home .category-section .folder-symbol {
  color: #4a4747;
}

.gallery-home .category-section .category-list,
.gallery-home .category-section .category-row,
.gallery-home .category-section .category-years-panel {
  border-color: #1b1b1b;
}

.gallery-home .category-section .category-row .folder-symbol {
  border-color: #1b1b1b;
}

.gallery-home .category-section .category-group.expanded .category-row,
.gallery-home .category-section .category-row:hover {
  background: rgba(255,255,255,.28);
}

/* Divisórias e contornos do conteúdo — não altera o hero nem a navegação. */
.gallery-site {
  --gallery-text: #4a4747 !important;
}

.gallery-site .gallery-home,
.gallery-site .archive-content,
.gallery-site .public-index-page,
.gallery-site .archive-browser {
  color: #4a4747;
}

.gallery-site :where(
  .empty-state h3,
  .gallery-empty-state:not(.dark),
  .updated-album,
  .popular-grid > button,
  .popular-grid > a,
  .year-grid > button,
  .year-grid > a,
  .browser-album-grid > button,
  .browser-album-grid > a,
  .month-grid > button,
  .month-grid > a,
  .category-year-buttons button,
  .category-year-buttons a,
  .archive-breadcrumb strong,
  .archive-breadcrumb button:hover,
  .archive-breadcrumb a:hover,
  .browser-back,
  .archive-statline a,
  .thumb_title,
  .thumb_caption,
  .thumbnail-card .thumb_title,
  .heart.saved,
  .thumb-heart.saved,
  .album-photo-grid article > button.saved,
  .album-photo-grid article > a.saved
) {
  color: #4a4747;
}

.gallery-site .public-index-filters :where(input, select),
.gallery-site .archive-content :where(.textinput, .listbox, input, select, textarea) {
  color: #4a4747;
}

.gallery-site .lightbox,
.gallery-site .lightbox-close,
.gallery-site .lightbox-nav,
.gallery-site .lightbox-quick-actions button,
.gallery-site .lightbox-quick-actions a,
.gallery-site .lightbox-details-toggle,
.gallery-site .lightbox-info {
  color: #4a4747;
}

.gallery-site .gallery-footer {
  border-top-color: #1b1b1b;
  background: #4a4747;
  color: #f7f6f4;
}

.gallery-site .gallery-footer p,
.gallery-site .gallery-footer button,
.gallery-site .gallery-footer a {
  color: rgba(255,255,255,.82);
}

.gallery-home .throwback-window,
.gallery-home .throwback-card,
.gallery-home .gallery-empty-state.dark,
.gallery-home .throwback-card > button,
.gallery-home .throwback-card > a {
  border-color: #1b1b1b;
  background: #4a4747;
  color: #f7f6f4;
}

.gallery-home .popular-rank {
  background: #4a4747;
  color: #f7f6f4;
}

/* Textos neutros da galeria usam o blush da nova paleta. */
.gallery-site :where(
  .gallery-empty-state > span,
  .throwback-section .uploads-title > div > p,
  .throwback-hint,
  .album-copy small,
  .album-copy em,
  .updated-album > b,
  .thumbnail-card > div > small,
  .thumbnail-card p,
  .public-index-heading span,
  .all-album-copy small,
  .all-album-copy em,
  .ranking-list small,
  .archive-breadcrumb,
  .browser-title > div > span,
  .year-copy small,
  .browser-album-grid small,
  .browser-album-grid em,
  .album-photo-grid article p,
  .month-grid small,
  .month-grid em,
  .month-grid i,
  .category-year-buttons small,
  .lightbox-info > p,
  .lightbox-info dt,
  .archive-statline,
  .thumb_caption
) {
  color: #4a4747 !important;
}

.gallery-site .gallery-empty-state > span,
.gallery-site .throwback-section .uploads-title > div > p {
  color: #4a4747 !important;
}

/* Preview vazio: blush sólido com coração da paleta, sem o ícone cinza. */
.gallery-site .media-placeholder {
  position: relative;
  overflow: hidden;
  background: #4a4747;
  color: transparent;
}

.gallery-site .media-placeholder > span {
  width: 34px;
  height: 34px;
  display: block;
  border: 1px solid rgba(27, 27, 27,.2);
  border-radius: 50%;
  background: #bab7b5 url("images/title-heart.svg?v=hailey") center / 18px 18px no-repeat;
  box-shadow: 0 7px 18px rgba(27, 27, 27,.16);
  color: transparent;
  font-size: 0;
}

.gallery-site .archive-content .archive-section,
.gallery-site .archive-content .browser-title,
.gallery-site .public-index-page .public-index-heading {
  border-color: #1b1b1b;
}

.gallery-home #albuns {
  border-bottom: 0;
}

.gallery-home .archive-section-title > button {
  position: relative;
  isolation: isolate;
  min-height: 36px;
  padding: 0 18px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #1b1b1b;
  color: #f7f6f4;
  box-shadow: 0 8px 24px rgba(27, 27, 27,.4), 0 0 18px rgba(27, 27, 27,.25);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.gallery-home .archive-section-title > button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55%;
  left: -45%;
  width: 34%;
  height: 210%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: skewX(-22deg) translateX(-180%);
  transition: transform .65s ease;
}

.gallery-home .archive-section-title > button:hover {
  background: #1b1b1b;
  color: #f7f6f4;
  box-shadow: 0 11px 30px rgba(27, 27, 27,.5), 0 0 24px rgba(27, 27, 27,.34);
  transform: translateY(-1px);
}

.gallery-home .archive-section-title > button:hover::before {
  transform: skewX(-22deg) translateX(620%);
}

.gallery-site .archive-content :where(
  .updated-album,
  .gallery-empty-state,
  .throwback-window,
  .throwback-card,
  .popular-grid > button,
  .popular-grid > a,
  .browser-album-grid > button,
  .browser-album-grid > a,
  .category-section,
  .category-list,
  .category-group,
  .category-row,
  .category-years-panel,
  .category-year-buttons button,
  .category-year-buttons a,
  .folder-symbol
),
.gallery-site .public-index-page :where(
  .public-index-filters,
  .public-index-filters input,
  .public-index-filters select,
  .all-albums-grid > button,
  .all-albums-grid > a,
  .ranking-period,
  .ranking-list,
  .ranking-list > button,
  .ranking-list > a,
  .gallery-empty-state
),
.gallery-site .archive-browser :where(
  .browser-title,
  .browser-month-card,
  .browser-album-card,
  .browser-album-grid > button,
  .browser-album-grid > a,
  .gallery-empty-state
) {
  border-color: #1b1b1b;
}

.gallery-site .ranking-list > button,
.gallery-site .ranking-list > a,
.gallery-site .category-group,
.gallery-site .category-row {
  border-bottom-color: #1b1b1b;
}

@media (max-width: 700px) {
  .gallery-home .category-section {
    padding-right: 16px;
    padding-left: 16px;
    border-radius: 14px;
  }
}

@keyframes demi-smoke-bed {
  from { transform: translate3d(-1.5%, -.8%, 0) scale(1.02); }
  to { transform: translate3d(1.5%, .8%, 0) scale(1.08); }
}

@media (max-width: 700px) {
  .gallery-home .hero-photo {
    inset: 78px 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3400 / 1707;
    background-position: center !important;
    background-size: contain !important;
    transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,.5) 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,.5) 90%, transparent 100%);
  }

  .gallery-home .archive-intro-inner { padding: 340px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-home .archive-intro::before { animation: none !important; }
}
.gallery-site img[src$="icons/blank.png"],.admin-shell img[src$="icons/blank.png"] { content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3C/svg%3E"); width: 16px; height: 16px; }

/* Ajustes da edição instalável para a marcação nativa do Coppermine. */
.gallery-home .archive-section-title > a {
  position: relative;
  isolation: isolate;
  min-height: 36px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #1b1b1b;
  color: #f7f6f4;
  box-shadow: 0 8px 24px rgba(27, 27, 27,.4), 0 0 18px rgba(27, 27, 27,.25);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.gallery-home .archive-section-title > a .inline-action-icon { display: none; }
.gallery-home .archive-section-title > a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55%;
  left: -45%;
  width: 34%;
  height: 210%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: skewX(-22deg) translateX(-180%);
  transition: transform .65s ease;
}
.gallery-home .archive-section-title > a:hover {
  background: #1b1b1b;
  color: #f7f6f4;
  box-shadow: 0 11px 30px rgba(27, 27, 27,.5), 0 0 24px rgba(27, 27, 27,.34);
  transform: translateY(-1px);
}
.gallery-home .archive-section-title > a:hover::before {
  transform: skewX(-22deg) translateX(620%);
}

.gallery-site .media-placeholder {
  background: #4a4747 url("images/title-heart.svg?v=hailey") center / 22px 22px no-repeat;
  font-size: 0;
}

.gallery-site .gallery-footer .footer-brand .brand-mark {
  width: 58px;
  min-width: 58px;
  height: 58px;
  overflow: hidden;
  border: 0;
  border-radius: 12px !important;
  background: transparent;
  box-shadow: none;
}
.gallery-site .gallery-footer .footer-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Barra de atalhos do Coppermine — mesma composição compacta do tema Justin. */
.admin-control-dock:empty { display: none; }
.admin-control-dock {
  position: sticky;
  top: 62px;
  z-index: 19;
  width: 100%;
  max-width: 100%;
  margin: 0 0 20px;
  padding-top: 12px;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(186, 183, 181,.98) 72%, rgba(186, 183, 181,0));
}
.gallery-site .archive-content > .admin-control-dock { position: sticky; }
.admin-control-dock .admin-nav {
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  background: #101010;
  box-shadow: 0 9px 24px rgba(0,0,0,.12);
  scrollbar-width: thin;
  scrollbar-color: #4b4b4b transparent;
}
.admin-control-dock .admin-nav::before {
  content: "PAINEL";
  position: sticky;
  left: 0;
  z-index: 2;
  min-height: 34px;
  padding: 0 12px 0 8px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border-right: 1px solid #343434;
  background: #101010;
  color: #d4d4cf;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}
.admin-control-dock .admin-nav-item {
  width: auto;
  height: 34px;
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #b9b9b4;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .015em;
  white-space: nowrap;
}
.admin-control-dock .admin-nav-item:hover,
.admin-control-dock .admin-nav-item.active {
  border-color: #3d3d3d;
  background: #242424;
  color: #f7f6f4;
}
.admin-control-dock .admin-nav-item.active::before { display: none; }
.admin-control-dock .admin-nav-item .admin-icon {
  width: 16px;
  min-width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-control-dock .admin-nav-item .admin-icon img,
.admin-control-dock .admin-nav-item .admin-icon .arq-ico {
  width: 14px !important;
  height: 14px !important;
  filter: brightness(0) invert(1) !important;
  opacity: .64;
}
.admin-control-dock .admin-nav-item:hover .admin-icon img,
.admin-control-dock .admin-nav-item:hover .admin-icon .arq-ico { opacity: 1; }

@media (max-width: 760px) {
  .admin-control-dock { top: 58px; margin-bottom: 16px; padding-top: 9px; }
}

/* Cartões, imagens e categorias — acabamento aprovado para a Demi. */
.gallery-site :where(
  .updated-album,
  .browser-album-item > a,
  .browser-album-grid > button,
  .browser-album-grid > a,
  .all-albums-grid > button,
  .all-albums-grid > a,
  .album-photo-card,
  .ranking-list > button,
  .ranking-list > a
) {
  background: #bab7b5 !important;
}

.gallery-site :where(
  .album-copy strong,
  .browser-album-grid strong,
  .browser-album-item strong,
  .all-album-copy strong,
  .album-photo-card strong
) {
  color: #1b1b1b !important;
}

.gallery-site :where(
  .album-thumb,
  .thumbnail-image,
  .category-thumb,
  .throwback-card > button,
  .throwback-card > a,
  .popular-grid > button,
  .popular-grid > a,
  .browser-album-item > a > span,
  .browser-album-grid > button > span,
  .browser-album-grid > a > span,
  .album-photo-grid article > button:first-child,
  .album-photo-grid article > a:first-child,
  .all-album-cover,
  .year-cover,
  .month-preview,
  .ranking-list > button,
  .ranking-list > a
) img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  border-radius: 0 !important;
  opacity: .8;
  transition: opacity .25s ease, transform .35s ease, filter .25s ease;
}

.gallery-site :where(
  .album-thumb,
  .thumbnail-image,
  .category-thumb,
  .throwback-card > button,
  .throwback-card > a,
  .popular-grid > button,
  .popular-grid > a,
  .browser-album-item > a > span,
  .browser-album-grid > button > span,
  .browser-album-grid > a > span,
  .album-photo-grid article > button:first-child,
  .album-photo-grid article > a:first-child,
  .all-album-cover,
  .year-cover,
  .month-preview,
  .ranking-list > button,
  .ranking-list > a
):hover img {
  opacity: 1;
}

.gallery-site :where(
  .album-thumb,
  .thumbnail-image,
  .category-thumb,
  .browser-album-item > a > span,
  .browser-album-grid > button > span,
  .browser-album-grid > a > span,
  .all-album-cover,
  .year-cover,
  .month-preview
) {
  border-radius: 0 !important;
}

.gallery-home .category-section .folder-symbol,
.gallery-site .category-row .folder-symbol {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.7a5.5 5.5 0 0 0-7.8 0L12 5.8l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.3l7.8-7.7 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

/* Revisão final: estrutura do Justin, identidade 100% Demi. */
.admin-control-dock {
  background: linear-gradient(to bottom, rgba(186, 183, 181,.98) 72%, rgba(186, 183, 181,0));
}
.admin-control-dock .admin-nav {
  border-color: rgba(27, 27, 27,.28);
  background: #1b1b1b;
  box-shadow: 0 12px 30px rgba(27, 27, 27,.22);
}
.admin-control-dock .admin-nav::before {
  border-right-color: rgba(186, 183, 181,.34);
  background: #1b1b1b;
  color: #bab7b5;
}
.admin-control-dock .admin-nav-item {
  color: #bab7b5;
}
.admin-control-dock .admin-nav-item:hover,
.admin-control-dock .admin-nav-item.active {
  border-color: rgba(186, 183, 181,.28);
  background: #1b1b1b;
  color: #f7f6f4;
}
.admin-control-dock .admin-nav-item .admin-icon,
.admin-control-dock .admin-nav-item .admin-icon .arq-ico { color: #bab7b5; }
.admin-control-dock .admin-nav-item .admin-icon img {
  filter: brightness(0) saturate(100%) invert(82%) sepia(20%) saturate(573%) hue-rotate(291deg) brightness(98%) contrast(91%) !important;
}

/* Cartão inspirado fielmente no mockup do Photoshop enviado pela usuária. */
.gallery-home .updated-albums-grid {
  align-items: start;
  gap: clamp(18px, 2vw, 28px);
}
.gallery-home .updated-album {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  transform: none;
}
.gallery-home .updated-album:hover {
  box-shadow: none;
  transform: translateY(-3px);
}
.gallery-home .updated-album .album-thumb {
  z-index: 2;
  aspect-ratio: 4 / 5;
  padding: 9px;
  overflow: visible;
  border: 1px solid #1b1b1b;
  border-radius: 16px !important;
  background: #bab7b5;
  box-shadow: 0 10px 24px rgba(74, 71, 71,.18);
}
.gallery-home .updated-album .album-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  opacity: .8;
}
.gallery-home .updated-album:hover .album-thumb img { opacity: 1; }
.gallery-home .updated-album .album-thumb i {
  right: auto;
  left: 50%;
  bottom: 0;
  min-width: 58%;
  padding: 10px 14px;
  border: 1px solid rgba(186, 183, 181,.48);
  border-radius: 9px;
  background: #1b1b1b;
  color: #bab7b5;
  box-shadow: 0 8px 18px rgba(27, 27, 27,.2);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  transform: translate(-50%, 48%);
}
.gallery-home .updated-album .album-copy {
  position: relative;
  z-index: 1;
  min-height: 132px;
  margin: 0 10px;
  padding: 40px 16px 18px;
  border: 1px solid #1b1b1b;
  border-top: 0;
  border-radius: 0 0 11px 11px;
  background: #bab7b5;
  box-shadow: 0 12px 24px rgba(74, 71, 71,.12);
}
.gallery-home .updated-album .album-copy small { display: none; }
.gallery-home .updated-album .album-copy strong {
  margin: 0 0 10px;
  color: #1b1b1b !important;
  font-size: 13px;
  line-height: 1.35;
}
.gallery-home .updated-album .album-copy em {
  margin-top: auto;
  padding-right: 28px;
  color: #4a4747 !important;
}
.gallery-home .updated-album > b {
  z-index: 3;
  right: 24px;
  bottom: 19px;
  color: #4a4747;
}

/* Nenhum contador ou comando público usa preto. */
.gallery-site .thumbnail-image > span,
.gallery-site .throwback-card > button > span,
.gallery-site .throwback-card > a > span,
.gallery-site .browser-album-grid > button > span i,
.gallery-site .browser-album-grid > a > span i,
.gallery-site .browser-album-item > a > span i,
.gallery-site .album-thumb i {
  background: #1b1b1b;
  color: #bab7b5;
}
.gallery-site .lightbox,
.gallery-site .lightbox-info { background: #1b1b1b; }
.gallery-site .lightbox-close,
.gallery-site .lightbox-nav,
.gallery-site .lightbox-quick-actions button,
.gallery-site .lightbox-quick-actions a { background: #1b1b1b; color: #bab7b5; }

/* Ajuste fino conforme a referência compacta enviada em 28/08. */
.gallery-site .admin-control-dock {
  padding-top: 0;
  background: transparent;
}
.gallery-home .updated-album .album-thumb {
  padding: 5px;
  border-radius: 14px !important;
}
.gallery-home .updated-album .album-thumb img {
  border-radius: 9px !important;
}
.gallery-home .updated-album .album-thumb i {
  min-width: 0;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 8px;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(27, 27, 27,.18);
}
.gallery-home .updated-album .album-copy {
  min-height: 88px;
  margin: 0 8px;
  padding: 28px 12px 10px;
  border-radius: 0 0 9px 9px;
}
.gallery-home .updated-album .album-copy strong {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.28;
}
.gallery-home .updated-album .album-copy em {
  padding-right: 22px;
  font-size: 8px;
  line-height: 1.25;
}
.gallery-home .updated-album > b {
  right: 19px;
  bottom: 11px;
  font-size: 9px;
}
.gallery-home .updated-album:hover .album-thumb img {
  transform: none !important;
}
.gallery-home .updated-albums-grid {
  gap: clamp(10px, 1.2vw, 16px);
}

/* Mais vistas com o mesmo cartão compacto dos últimos álbuns. */
.gallery-home .popular-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: clamp(10px, 1.2vw, 16px);
}
.gallery-home .popular-grid > button,
.gallery-home .popular-grid > a {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  transform: none;
}
.gallery-home .popular-grid > button:hover,
.gallery-home .popular-grid > a:hover {
  box-shadow: none;
  transform: translateY(-3px);
}
.gallery-home .popular-thumb {
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 5;
  padding: 5px;
  display: block;
  overflow: visible;
  border: 1px solid #1b1b1b;
  border-radius: 14px;
  background: #bab7b5;
  box-shadow: 0 10px 24px rgba(74, 71, 71,.18);
}
.gallery-home .popular-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto;
  object-fit: cover !important;
  border-radius: 9px !important;
  opacity: .8;
  transform: none !important;
}
.gallery-home .popular-grid > button:hover .popular-thumb img,
.gallery-home .popular-grid > a:hover .popular-thumb img {
  opacity: 1;
  transform: none !important;
}
.gallery-home .popular-rank {
  left: 50%;
  top: auto;
  bottom: 0;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 5px 9px;
  border: 1px solid rgba(186, 183, 181,.48);
  border-radius: 6px;
  background: #1b1b1b;
  color: #bab7b5;
  box-shadow: 0 5px 12px rgba(27, 27, 27,.18);
  font-family: inherit;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, 50%);
}
.gallery-home .popular-copy {
  min-height: 88px;
  margin: 0 8px;
  padding: 28px 12px 10px;
  border: 1px solid #1b1b1b;
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: #bab7b5;
  box-shadow: 0 12px 24px rgba(74, 71, 71,.12);
}
.gallery-home .popular-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #1b1b1b;
  font-size: 12px;
  line-height: 1.28;
  text-overflow: ellipsis;
}
.gallery-home .popular-copy small {
  color: #4a4747;
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 1100px) {
  .gallery-home .popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .gallery-home .popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Throwback aprovado na prévia: carrossel azul, cartões rosa e movimento contínuo. */
.gallery-home .throwback-window {
  position: relative;
  width: 100%;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(186, 183, 181,.72);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(186, 183, 181,.42), transparent 28%),
    radial-gradient(circle at 92% 100%, rgba(186, 183, 181,.28), transparent 32%),
    linear-gradient(135deg, rgba(27, 27, 27,.96), rgba(27, 27, 27,.88));
  box-shadow: 0 28px 70px rgba(27, 27, 27,.22), inset 0 1px rgba(255,255,255,.28);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}
.gallery-home .throwback-window::before,
.gallery-home .throwback-window::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 160px;
  border-radius: 50%;
  background: rgba(186, 183, 181,.25);
  filter: blur(48px);
  pointer-events: none;
}
.gallery-home .throwback-window::before { left: -100px; top: -100px; transform: rotate(-12deg); }
.gallery-home .throwback-window::after { right: -80px; bottom: -110px; transform: rotate(18deg); }
.gallery-home .throwback-top {
  position: relative;
  z-index: 2;
  margin-bottom: 18px;
  color: #bab7b5;
}
.gallery-home .throwback-top strong {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}
.gallery-home .throwback-track {
  position: relative;
  z-index: 2;
  width: max-content;
  gap: 14px;
  animation: throwback-scroll 30s linear infinite;
}
.gallery-home .throwback-track:hover { animation-play-state: paused; }
.gallery-home .throwback-card {
  width: 188px;
  flex: 0 0 188px;
  overflow: hidden;
  border: 1px solid rgba(186, 183, 181,.65);
  border-radius: 16px;
  background: rgba(186, 183, 181,.92);
  color: #1b1b1b;
  box-shadow: 0 16px 30px rgba(27, 27, 27,.16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-home .throwback-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 36px rgba(27, 27, 27,.24);
}
.gallery-home .throwback-card > button,
.gallery-home .throwback-card > a {
  position: relative;
  width: calc(100% - 10px);
  aspect-ratio: 4 / 5;
  margin: 5px 5px 0;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  background: #bab7b5;
}
.gallery-home .throwback-card > button::after,
.gallery-home .throwback-card > a::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(186, 183, 181,.7);
  border-radius: 50%;
  background-color: rgba(27, 27, 27,.62);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a08f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.7a5.5 5.5 0 0 0-7.8 0L12 5.8l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.3l7.8-7.7 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gallery-home .throwback-card > button img,
.gallery-home .throwback-card > a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  filter: none;
  opacity: .82;
  transform: none !important;
  transition: opacity .25s ease;
}
.gallery-home .throwback-card:hover img { opacity: 1; transform: none !important; }
.gallery-home .throwback-card > button > span,
.gallery-home .throwback-card > a > span {
  inset: auto auto 10px 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(27, 27, 27,.86);
  color: #f7f6f4;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  transform: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gallery-home .throwback-card > div {
  min-height: 68px;
  padding: 11px 13px 10px;
  display: flex;
  flex-direction: column;
}
.gallery-home .throwback-card h3 {
  height: 30px;
  min-height: 30px;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #1b1b1b;
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gallery-home .throwback-card p {
  margin: 5px 0 0;
  color: #1b1b1b;
  font-size: 7.5px;
  font-weight: 750;
  letter-spacing: .04em;
  white-space: nowrap;
  text-transform: uppercase;
}
@media (max-width: 620px) {
  .gallery-home .throwback-window { padding: 14px; border-radius: 18px; }
  .gallery-home .throwback-card { width: 154px; flex-basis: 154px; }
}

/* Rodapé editorial com logo transparente e aviso institucional. */
.gallery-site .gallery-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(186, 183, 181,.5);
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at 5% 0%, rgba(186, 183, 181,.35), transparent 30%),
    radial-gradient(circle at 96% 100%, rgba(186, 183, 181,.18), transparent 32%),
    linear-gradient(135deg, #1b1b1b, #1b1b1b);
  box-shadow: 0 -20px 55px rgba(27, 27, 27,.15), inset 0 1px rgba(255,255,255,.18);
  color: #bab7b5;
}
.gallery-site .gallery-footer::before {
  content: "";
  position: absolute;
  left: 34%;
  top: -100px;
  width: 420px;
  height: 180px;
  border-radius: 50%;
  background: rgba(186, 183, 181,.18);
  filter: blur(55px);
  pointer-events: none;
}
.gallery-site .gallery-footer > .content-wrap {
  position: relative;
  z-index: 1;
  min-height: 230px;
  padding: 42px 0;
  display: grid;
  grid-template-columns: 210px minmax(0, 880px);
  align-items: center;
  justify-content: center;
  gap: clamp(38px, 5vw, 82px);
}
.gallery-site .gallery-footer .footer-brand {
  width: 210px;
  pointer-events: none;
}
.gallery-site .gallery-footer .footer-brand .brand-mark {
  width: 210px;
  min-width: 210px;
  height: 147px;
  overflow: visible;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}
.gallery-site .gallery-footer .footer-brand img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.gallery-site .gallery-footer .footer-copy {
  max-width: 880px;
  padding-left: clamp(24px, 3vw, 48px);
  border-left: 1px solid rgba(186, 183, 181,.34);
}
.gallery-site .gallery-footer .footer-copy p {
  margin: 0;
  color: rgba(186, 183, 181,.9);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .015em;
  text-transform: none;
}
.gallery-site .gallery-footer .footer-copy strong {
  color: #bab7b5;
  font-size: 13px;
  font-weight: 900;
}
@media (max-width: 760px) {
  .gallery-site .gallery-footer { border-radius: 20px 20px 0 0; }
  .gallery-site .gallery-footer > .content-wrap {
    min-height: 0;
    padding: 34px 0;
    grid-template-columns: 1fr;
    gap: 22px;
    justify-items: start;
  }
  .gallery-site .gallery-footer .footer-brand,
  .gallery-site .gallery-footer .footer-brand .brand-mark { width: 160px; min-width: 160px; }
  .gallery-site .gallery-footer .footer-brand .brand-mark { height: 112px; }
  .gallery-site .gallery-footer .footer-copy {
    padding: 20px 0 0;
    border-top: 1px solid rgba(186, 183, 181,.34);
    border-left: 0;
  }
}
/* Ajustes pós-publicação: sem sombra no Throwback e logos inteiros. */
.gallery-site .category-row :where(.category-thumb, .cpg-no-thumb),
.gallery-site .category-row > a,
.gallery-site .category-row > img {
  border: 2px solid #bab7b5 !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-sizing: border-box;
}
.gallery-site .category-row :where(.category-thumb, .cpg-no-thumb) img,
.gallery-site .category-row > a > img {
  border-radius: 3px !important;
}
.gallery-site .category-row :where(.category-thumb.is-empty, .cpg-no-thumb) {
  background: #bab7b5 !important;
}
.gallery-site .cpg-gallery-slot .footer[align="center"] {
  color: #1b1b1b !important;
}
.gallery-site .cpg-gallery-slot .footer[align="center"] a {
  color: #1b1b1b !important;
}
.gallery-site .cpg-gallery-slot .footer[align="center"] a:hover {
  color: #1b1b1b !important;
}
.gallery-site .gallery-nav .nav-brand .brand-mark img.nav-logo-image[width][height] {
  width: 54px !important;
  max-width: 54px !important;
  height: 38px !important;
  max-height: 38px !important;
  object-fit: cover !important;
  object-position: center !important;
}
.gallery-home .category-section .category-year-buttons :where(button, a) {
  background: #bab7b5 !important;
  border: 1px solid #1b1b1b !important;
  color: #1b1b1b !important;
  box-shadow: 0 8px 20px rgba(27, 27, 27,.08);
}
.gallery-home .category-section .category-year-buttons :where(button, a) strong,
.gallery-home .category-section .category-year-buttons :where(button, a) span {
  color: #1b1b1b !important;
}
.gallery-home .category-section .category-year-buttons :where(button, a) small {
  color: #1b1b1b !important;
}
.gallery-home .category-section .category-year-buttons :where(button, a):hover,
.gallery-home .category-section .category-year-buttons :where(button, a):focus-visible {
  background: #1b1b1b !important;
  border-color: #1b1b1b !important;
  color: #bab7b5 !important;
  box-shadow: 0 12px 26px rgba(27, 27, 27,.2);
}
.gallery-home .category-section .category-year-buttons :where(button, a):hover :where(strong, span),
.gallery-home .category-section .category-year-buttons :where(button, a):focus-visible :where(strong, span) {
  color: #bab7b5 !important;
}
.gallery-home .category-section .category-year-buttons :where(button, a):hover small,
.gallery-home .category-section .category-year-buttons :where(button, a):focus-visible small {
  color: #bab7b5 !important;
}
.gallery-home .throwback-window {
  border: 0 !important;
  box-shadow: none !important;
}
.gallery-site .gallery-footer {
  position: relative;
  z-index: 5;
  margin-top: -1px;
  box-shadow: 0 -16px 38px rgba(27, 27, 27,.22), inset 0 1px rgba(255,255,255,.18);
}
.gallery-site .gallery-footer > .content-wrap {
  min-height: 210px;
  grid-template-columns: 175px minmax(0, 880px);
  gap: clamp(34px, 4.5vw, 70px);
}
.gallery-site .gallery-footer .footer-brand,
.gallery-site .gallery-footer .footer-brand .brand-mark {
  width: 175px;
  min-width: 175px;
}
.gallery-site .gallery-footer .footer-brand .brand-mark { height: 123px; }
.gallery-site .gallery-nav .nav-brand {
  width: 64px;
  min-width: 64px;
  height: 42px;
  padding: 0 12px;
  overflow: visible;
}
.gallery-site .gallery-nav .nav-brand .brand-mark {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 28px;
  flex-basis: 40px;
  overflow: visible;
  transform: none;
}
.gallery-site .gallery-nav .nav-brand .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 760px) {
  .gallery-site .gallery-footer .footer-brand,
  .gallery-site .gallery-footer .footer-brand .brand-mark { width: 145px; min-width: 145px; }
  .gallery-site .gallery-footer .footer-brand .brand-mark { height: 102px; }
}

/* =============================================================================
   O NAVEGADOR DE PASTAS DO "ADICIONAR EM LOTE"

   O searchnew.php desenha o seletor de diretórios dentro de um <iframe>, e esse
   iframe carrega este mesmo style.css. A regra global da linha 400 —
   `img { display: block; width: 100%; }` — valia lá dentro também: o
   spacer.gif de 1×1 pixel e os ícones de pasta viravam quadrados de mais de mil
   pixels, que empurravam a mensagem real da tela ("não há pastas dentro de
   albums") para fora do campo de visão. Era por isso que a tela parecia vazia e
   quebrada.

   Estas regras existem só para dentro do iframe. O `body` dele vem com
   `class="tableb"`, que nenhuma página do tema usa — daí o escopo.

   Como este arquivo é carregado antes do palette.css, qualquer coisa aqui pode
   ser sobrescrita lá; o que está aqui é o mínimo que precisa existir neste
   arquivo, porque o iframe não carrega o palette.
   ========================================================================== */
body.tableb {
  margin: 0;
  padding: 14px;
  background: #ebe9e7;
  color: #4f4c4b;
  font-family: inherit;
}

body.tableb img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}
/* O spacer de 1×1 só servia para empurrar layout em tabela; sem tamanho
   forçado ele não faz nada, mas continua ocupando uma linha à toa. */
body.tableb img[src*="spacer"] {
  display: none;
}
body.tableb img.icon {
  width: 17px;
  height: 17px;
  margin-right: 9px;
}

body.tableb table.maintable,
body.tableb table.maintable > tbody {
  width: 100%;
  border-collapse: collapse;
}

/* O título do iframe é uma legenda, não um título de página. */
body.tableb .cpg-title-cell {
  padding: 0 0 10px;
}
body.tableb .archive-section-title {
  min-height: 0;
  padding: 0;
  border: 0;
}
body.tableb .archive-section-title :where(h1, h2, h3, div, span) {
  margin: 0;
  color: #6f6c6b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* A linha do caminho atual. */
body.tableb td.tableh2 {
  padding: 0 0 12px;
  background: transparent;
  border: 0;
}
body.tableb input.tableh2 {
  width: 100%;
  max-width: 420px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(40, 38, 38, .22);
  border-radius: 11px;
  background: #fdf6f1;
  color: #4f4c4b;
  font-family: inherit;
  font-size: 12px;
}

/* Cada pasta é uma linha da lista. */
body.tableb td.tableb {
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(40, 38, 38, .10);
  font-size: 12px;
}
body.tableb td.tableb a {
  display: flex;
  align-items: center;
  padding: 11px 12px;
  border-radius: 10px;
  color: #4f4c4b;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
body.tableb td.tableb a:hover {
  background: rgba(27, 27, 27, .08);
  color: #1b1b1b;
}

/* O recado do rodapé — "não há pastas dentro de albums" e afins. */
body.tableb td.tablef {
  padding: 14px 12px 4px;
  background: transparent;
  border: 0;
  color: #6f6c6b;
  font-size: 11px;
  line-height: 1.6;
}

/* =============================================================================
   EDITOR COMPACTO DE FOTOS

   editpics.php pode trazer dezenas de formulários no mesmo envio. O script do
   tema marca cada grupo como uma linha expansível, mantendo todos os inputs e
   o POST original do Coppermine. edit_one_pic.php recebe o mesmo acabamento
   quando só existe uma foto.
   ========================================================================== */
.cpg-page-editpics .admin-content,
.cpg-page-edit_one_pic .admin-content {
  max-width: 1520px;
  padding: 22px 2.5vw 44px;
}

.cpg-page-editpics .admin-content #cpgform *,
.cpg-page-edit_one_pic .admin-content #cpgform_editonepic * {
  border-radius: 0 !important;
}

.admin-content .arq-edit-list > .maintable {
  width: 100% !important;
  margin: 0;
  border-collapse: collapse;
  table-layout: auto;
  box-shadow: none;
}

.admin-content .arq-edit-list .cpg-title-cell .archive-section-title {
  min-height: 0;
  padding: 12px 14px 10px;
  align-items: center;
}
.admin-content .arq-edit-list .cpg-title-cell .archive-section-title h2 {
  margin: 0;
  font-size: 19px;
}

/* Barra do lote, links do álbum e seleção em massa. */
.admin-content .arq-edit-list > .maintable > tbody > tr > td.tableh2[colspan]:not(:has(.arq-edit-file-summary)) {
  padding: 7px 10px;
  background: #f3f3f0;
  color: #666660;
  font-size: 10px;
  letter-spacing: .04em;
  text-align: left !important;
  text-transform: none;
}
.admin-content .arq-edit-list > .maintable > tbody > tr > td[colspan] > table > tbody > tr > td.tableh2 {
  height: 34px;
  padding: 5px 7px;
  background: #f8f8f5;
  font-size: 9px;
}
.admin-content .arq-edit-list .admin_menu,
.admin-content .arq-edit-list .buttonlist a,
.admin-content .arq-edit-list :where(.button, button.button, input[type="submit"], input[type="button"]) {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 0 !important;
  font-size: 9px;
}
.admin-content .arq-edit-list > .maintable > tbody > tr > td.tablef {
  padding: 7px 10px;
  border-top: 1px solid #deded9;
  border-bottom: 1px solid #deded9;
  background: #171717;
  text-align: right !important;
}
.admin-content .arq-edit-list > .maintable > tbody > tr > td.tablef .button {
  border: 1px solid #fff;
  background: #171717;
  color: #fff;
}
.admin-content .arq-edit-list > .maintable > tbody > tr > td.tablef .button:hover {
  background: #fff;
  color: #171717;
}

/* Cabeçalho de cada foto. */
.admin-content .arq-edit-file-head > td {
  padding: 0 !important;
  border-top: 1px solid #d9d9d4;
  border-bottom: 1px solid #d9d9d4;
  background: #fff !important;
}
.admin-content .arq-edit-file-head:first-of-type > td { border-top: 0; }
.admin-content .arq-edit-file-head.is-open > td { background: #f6f6f3 !important; }
.admin-content .arq-edit-file-head > td > table {
  width: 100%;
  border-collapse: collapse;
}
.admin-content .arq-edit-file-head td:has(> .arq-edit-file-summary) {
  padding: 5px 9px !important;
  border: 0;
  background: transparent !important;
}
.admin-content .arq-edit-file-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 30px;
  gap: 9px;
  align-items: center;
  min-height: 39px;
  cursor: pointer;
}
.admin-content .arq-edit-file-thumb {
  display: block;
  width: 30px;
  height: 36px;
  overflow: hidden;
  border: 1px solid #deded9;
  background: #ecece8;
}
.admin-content .arq-edit-file-thumb:empty::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #deded9, #aaa9a4);
}
.admin-content .arq-edit-file-thumb a,
.admin-content .arq-edit-file-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
}
.admin-content .arq-edit-file-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 7px;
  overflow: hidden;
  color: #292929;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.admin-content .arq-edit-file-copy strong {
  overflow: hidden;
  max-width: 100%;
  color: #202020;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-content .arq-edit-file-copy tt {
  display: block;
  overflow: hidden;
  flex: 1 1 100%;
  color: #8b8b85;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-content .arq-edit-file-copy > img,
.admin-content .arq-edit-file-copy > svg { flex: 0 0 auto; }
.admin-content .arq-edit-file-copy .admin_menu {
  min-height: 27px;
  padding: 0 8px;
  font-size: 8px;
}
.admin-content .arq-edit-file-position {
  color: #8b8b85;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.admin-content .arq-edit-file-toggle {
  display: inline-grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid #d5d5d0;
  background: #fff;
  color: #222;
  cursor: pointer;
}
.admin-content .arq-edit-file-toggle span {
  display: block;
  font-size: 18px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
.admin-content .arq-edit-file-head.is-open .arq-edit-file-toggle {
  border-color: #171717;
  background: #171717;
  color: #fff;
}
.admin-content .arq-edit-file-head.is-open .arq-edit-file-toggle span { transform: rotate(90deg); }

/* Ações técnicas do item: só aparecem junto com o formulário aberto. */
.admin-content .arq-edit-file-tools { display: none; }
.admin-content .arq-edit-file-head.is-open .arq-edit-file-tools { display: table-row; }
.admin-content .arq-edit-file-tools > td {
  height: 29px;
  padding: 3px 6px !important;
  border-top: 1px solid #e6e6e1;
  border-bottom: 0;
  background: #fbfbf8 !important;
  font-size: 9px;
}
.admin-content .arq-edit-file-tools > td:first-child { padding-left: 53px !important; }

/* Campos do item aberto. */
.admin-content .arq-edit-file-body > td.tableb {
  padding: 6px 9px;
  border-bottom: 1px solid #ecece7;
  background: #fff;
  color: #333;
  font-size: 11px;
  line-height: 1.3;
}
.admin-content .arq-edit-file-body > td.tableb:first-child {
  width: 190px;
  padding-left: 14px;
  color: #5f5f59;
  font-size: 10px;
  font-weight: 700;
}
.admin-content .arq-edit-file-body > td[rowspan] { display: none; }
.admin-content .arq-edit-file-body :where(.textinput, .listbox, input[type="text"], select, textarea) {
  width: 100% !important;
  min-height: 31px;
  height: 31px;
  padding: 0 8px;
  border: 1px solid #d4d4cf;
  background: #fff;
  color: #202020;
  font-size: 11px;
}
.admin-content .arq-edit-file-body textarea,
.admin-content .arq-edit-file-body textarea.textinput {
  min-height: 48px;
  height: 48px;
  padding: 7px 8px;
  line-height: 1.35;
}
.admin-content .arq-edit-file-body tt {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  color: #8b8b85;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-content .arq-edit-file-body label.clickable_option { margin-right: 10px; font-size: 10px; }
.admin-content .arq-edit-file-body input[type="checkbox"],
.admin-content .arq-edit-file-body input[type="radio"] { width: 14px; height: 14px; }
.admin-content .arq-edit-file-body > td[colspan="3"] > table { width: 100%; }
.admin-content .arq-edit-file-body > td[colspan="3"] > table td {
  padding: 5px 7px;
  border: 0;
  background: #fafaf7;
  font-size: 9px;
  white-space: normal;
}

@media (max-width: 760px) {
  .cpg-page-editpics .admin-content,
  .cpg-page-edit_one_pic .admin-content { padding: 14px 10px 34px; }
  .admin-content .arq-edit-file-summary { grid-template-columns: 31px minmax(0, 1fr) 27px; gap: 7px; }
  .admin-content .arq-edit-file-position { display: none; }
  .admin-content .arq-edit-file-toggle { width: 27px; height: 27px; }
  .admin-content .arq-edit-file-copy .admin_menu { display: none; }
  .admin-content .arq-edit-file-body > td.tableb:first-child { width: 118px; padding-left: 8px; white-space: normal !important; }
  .admin-content .arq-edit-file-tools > td:first-child { padding-left: 7px !important; }
}

/* Envio de fotos sobre o álbum, sem abrir o painel em outra página. */
html.arq-album-upload-open,
html.arq-album-upload-open body { overflow: hidden !important; }
.arq-album-upload-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 28px; }
.arq-album-upload-backdrop { position: absolute; inset: 0; border: 0; border-radius: 0; background: rgba(17,17,17,.72); cursor: pointer; }
.arq-album-upload-panel { position: relative; width: min(1080px,94vw); height: min(760px,88vh); display: grid; grid-template-rows: 64px minmax(0,1fr); border: 1px solid #1d1d1d; border-radius: 0; background: #f8f7f5; box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.arq-album-upload-header { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 22px; border-bottom: 1px solid rgba(29,29,29,.18); background: #1d1d1d; color: #fff; }
.arq-album-upload-header div { display: grid; gap: 2px; }
.arq-album-upload-header small { color: #f46fb5; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.arq-album-upload-header strong { font-size: 18px; font-weight: 600; }
.arq-album-upload-close { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.42); border-radius: 0; background: transparent; color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }
.arq-album-upload-close:hover,
.arq-album-upload-close:focus-visible { background: #f46fb5; }
.arq-album-upload-frame { width: 100%; height: 100%; border: 0; background: #e8e8e8; }
html.arq-embedded-upload body { background: #e8e8e8 !important; }
html.arq-embedded-upload .admin-sidebar,
html.arq-embedded-upload .admin-topbar,
html.arq-embedded-upload .admin-control-dock { display: none !important; }
html.arq-embedded-upload main.admin-shell { min-height: 0 !important; display: block !important; background: #e8e8e8 !important; }
html.arq-embedded-upload .admin-main { width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
html.arq-embedded-upload .admin-content { width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 18px !important; }
html.arq-embedded-upload .cpg-gallery-slot { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
html.arq-embedded-upload .arq-envio { margin: 0 !important; box-shadow: none !important; }
@media (max-width: 700px) {
  .arq-album-upload-modal { padding: 0; }
  .arq-album-upload-panel { width: 100vw; height: 100vh; border: 0; }
  html.arq-embedded-upload .admin-content { padding: 10px !important; }
}

/* A escolha do usuário prevalece também nos breakpoints responsivos. */
.gallery-site .archive-browser .thumbnail-grid[data-arq-size="small"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.gallery-site .archive-browser .thumbnail-grid[data-arq-size="medium"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.gallery-site .archive-browser .thumbnail-grid[data-arq-size="large"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) {
  .gallery-site .archive-browser .thumbnail-grid[data-arq-size="small"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .gallery-site .archive-browser .thumbnail-grid[data-arq-size="medium"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .gallery-site .archive-browser .thumbnail-grid[data-arq-size="large"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .gallery-site .archive-browser .photo-browser-tools,
  .gallery-site .archive-browser .thumbnail-size-switch { width: 100% !important; }
  .gallery-site .archive-browser .thumbnail-size-switch { box-sizing: border-box; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-site .archive-browser .thumbnail-size-switch button { width: 100% !important; min-width: 0 !important; padding-inline: 6px !important; }
  .gallery-site .archive-browser .thumbnail-grid[data-arq-size="small"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gallery-site .archive-browser .thumbnail-grid[data-arq-size="medium"] { grid-template-columns: minmax(0, min(78vw, 320px)) !important; justify-content: center !important; }
  .gallery-site .archive-browser .thumbnail-grid[data-arq-size="large"] { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; }
}