:root {
  color-scheme: light;
  --rail: #101319;
  --rail-2: #171b23;
  --bg: #f5f3ee;
  --surface: #fbfaf7;
  --panel: #ffffff;
  --ink: #171717;
  --muted: #73706a;
  --subtle: #ede9df;
  --line: #dfd9ce;
  --line-strong: #cfc6b7;
  --brand: #206e63;
  --brand-2: #d6a84f;
  --danger: #b42318;
  --shadow: 0 18px 46px rgba(21, 21, 21, 0.12);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
label,
select {
  -webkit-tap-highlight-color: transparent;
}

input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  background:
    linear-gradient(90deg, var(--rail) 0 178px, transparent 178px),
    var(--bg);
}

.app-rail {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  padding: 22px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 38%),
    var(--rail);
  color: #fff;
  position: sticky;
  top: 0;
  align-self: start;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #f5d27a, #277b70);
  color: #111318;
  font-weight: 950;
  flex: 0 0 auto;
}

.rail-brand strong,
.rail-brand span {
  display: block;
}

.rail-brand strong {
  font-size: 1rem;
  letter-spacing: 0;
}

.rail-brand span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
}

.rail-nav {
  display: grid;
  align-content: start;
  gap: 8px;
}

.rail-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  padding: 0 10px;
  cursor: pointer;
  text-align: left;
}

.rail-item:hover,
.rail-item.active {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.rail-card {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: var(--rail-2);
  padding: 12px;
}

.rail-card span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
}

.rail-card strong {
  font-size: 0.92rem;
}

.app-main {
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.page-title h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 850;
  letter-spacing: 0;
}

.top-actions,
.controls,
.lightbox-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.icon-button,
.primary-upload,
.download-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 0 14px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(21, 21, 21, 0.05);
}

.icon-button:hover,
.download-link:hover {
  border-color: var(--line-strong);
  background: #fff;
}

.primary-upload {
  border: 0;
  background: var(--brand);
  color: #fff;
  font-weight: 850;
  box-shadow: 0 14px 30px rgba(32, 110, 99, 0.22);
}

.danger-button:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.toast {
  position: fixed;
  top: 88px;
  right: clamp(14px, 3vw, 28px);
  z-index: 50;
  width: min(390px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 13px 15px;
  box-shadow: var(--shadow);
}

.toast.error {
  border-color: rgba(180, 35, 24, 0.35);
  color: var(--danger);
}

.workspace {
  min-height: calc(100vh - 74px);
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 300px;
}

.sidebar {
  min-width: 0;
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: #eeece3;
}

.sidebar-kicker,
.eyebrow {
  display: block;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 8px 18px;
}

.sidebar-title h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0;
}

.sidebar-title strong {
  min-width: 32px;
  border-radius: 999px;
  background: #fff;
  padding: 4px 9px;
  text-align: center;
  font-size: 0.85rem;
}

.folder-list {
  display: grid;
  gap: 7px;
}

.folder-button {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  padding: 10px 11px;
  text-align: left;
  cursor: pointer;
}

.folder-button:hover {
  background: rgba(255, 255, 255, 0.62);
}

.folder-button.active {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(21, 21, 21, 0.08);
}

.folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.folder-name::before {
  content: "";
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--brand-2);
}

.folder-count {
  min-width: 30px;
  border-radius: 999px;
  background: var(--subtle);
  color: var(--muted);
  padding: 3px 8px;
  font-size: 0.78rem;
  text-align: center;
}

.content {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 32px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), transparent 260px),
    var(--surface);
}

.upload-panel,
.locked-panel {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
}

.drop-zone,
.lock-box {
  width: min(920px, 100%);
  display: grid;
  justify-items: center;
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: clamp(30px, 5vw, 62px);
  text-align: center;
  box-shadow: var(--shadow);
}

.drop-zone {
  border-style: dashed;
  border-width: 2px;
}

.drop-zone.dragover {
  border-color: var(--brand);
  background: #f8fbf6;
}

.drop-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf5f1;
  color: var(--brand);
  font-size: 2rem;
}

.drop-zone h2,
.lock-box h2 {
  max-width: 760px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
}

.drop-zone p,
.lock-box p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.upload-form {
  width: min(570px, 100%);
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.upload-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  text-align: left;
  font-size: 0.92rem;
  font-weight: 750;
}

.upload-form input:not([type="file"]),
.share-row input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 14px;
  outline: 0;
}

.upload-form input:focus,
.share-row input:focus,
.search-control:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(32, 110, 99, 0.12);
}

.file-picker {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--subtle);
  color: var(--ink);
  cursor: pointer;
  font-weight: 850;
}

.share-panel,
.album-hero,
.toolbar,
.stats div,
.status,
.detail-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.share-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(21, 21, 21, 0.04);
}

.share-panel h2,
.share-panel p,
.album-hero h2,
.album-hero p {
  margin: 0;
}

.share-panel p,
.album-hero p {
  margin-top: 5px;
  color: var(--muted);
}

.share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.gallery-surface {
  margin: 0;
}

.album-hero {
  min-height: 176px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(135deg, rgba(32, 110, 99, 0.12), rgba(214, 168, 79, 0.16)),
    var(--panel);
}

.album-hero::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 28px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1px solid rgba(32, 110, 99, 0.16);
  background: rgba(255, 255, 255, 0.46);
}

.album-hero h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4.2vw, 4.8rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.98;
}

.album-hero-badge {
  position: relative;
  z-index: 1;
  min-width: 132px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  padding: 14px;
  text-align: right;
}

.album-hero-badge span,
.album-hero-badge strong {
  display: block;
}

.album-hero-badge span {
  color: var(--muted);
  font-size: 0.78rem;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(21, 21, 21, 0.04);
}

.pathline {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.search-control {
  min-width: min(340px, 100%);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f5ef;
  padding: 0 13px;
}

.search-control input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

select {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.stats div {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 13px 15px;
}

.stats strong {
  font-size: 1.28rem;
}

.stats span {
  color: var(--muted);
  font-size: 0.9rem;
}

.status {
  color: var(--muted);
  padding: 18px;
}

.status.error {
  border-color: rgba(180, 35, 24, 0.35);
  color: var(--danger);
}

.gallery-grid {
  column-width: 224px;
  column-gap: 14px;
}

.photo-card {
  width: 100%;
  display: inline-block;
  margin: 0 0 14px;
  break-inside: avoid;
  border: 0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  text-align: left;
  padding: 0;
  box-shadow: 0 2px 8px rgba(21, 21, 21, 0.08);
  transform: translateZ(0);
}

.photo-card:hover {
  box-shadow: 0 18px 38px rgba(21, 21, 21, 0.16);
  transform: translateY(-2px);
}

.photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #eceff2;
}

.photo-card:nth-child(5n + 2) img {
  aspect-ratio: 1 / 1;
}

.photo-card:nth-child(5n + 3) img {
  aspect-ratio: 3 / 4;
}

.photo-card span {
  display: block;
  padding: 11px 12px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}

.photo-card small {
  display: block;
  padding: 0 12px 12px;
  color: var(--muted);
}

.details-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px 16px;
  border-left: 1px solid var(--line);
  background: #f0ede5;
}

.detail-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.detail-card h2,
.detail-card p {
  margin: 0;
}

.detail-card p {
  color: var(--muted);
  line-height: 1.45;
}

.accent-card {
  background:
    linear-gradient(135deg, rgba(32, 110, 99, 0.1), rgba(214, 168, 79, 0.16)),
    #fff;
}

.detail-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-action {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  padding: 0 12px;
}

.detail-action:hover {
  border-color: var(--line-strong);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 10, 12, 0.72);
}

#lightbox.modal-backdrop {
  padding: 0;
  background: #070707;
}

.progress-modal,
.admin-modal {
  width: min(780px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 8px;
  background: var(--panel);
  padding: 22px;
  box-shadow: var(--shadow);
}

.progress-modal {
  width: min(430px, 100%);
}

.modal-title-row,
.admin-actions,
.admin-item,
.admin-item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title-row {
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-title-row h2 {
  margin: 0;
}

.admin-actions {
  justify-content: flex-end;
  margin-bottom: 14px;
}

.admin-list {
  display: grid;
  gap: 10px;
}

.admin-item {
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f5ef;
  padding: 12px;
}

.admin-item strong,
.admin-item span {
  display: block;
}

.admin-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.92rem;
}

.admin-item-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.progress-modal h2,
.progress-modal p {
  margin: 0;
}

.progress-modal p {
  margin-top: 8px;
  color: var(--muted);
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--subtle);
  margin-top: 18px;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width 0.2s ease;
}

.lightbox {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  background: #070707;
  color: #fff;
}

.lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.lightbox h2,
.lightbox p,
.lightbox figure {
  margin: 0;
}

.lightbox h2 {
  max-width: min(680px, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 800;
}

.lightbox p {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
}

.lightbox figure {
  min-height: 0;
  display: grid;
  place-items: center;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 8px;
  object-fit: contain;
}

.round-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.small-round {
  width: 36px;
  height: 36px;
  color: var(--ink);
  border-color: var(--line);
  background: var(--panel);
}

.close-button {
  font-size: 1.5rem;
}

.nav-button {
  position: fixed;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  font-size: 2rem;
}

.prev-button {
  left: 16px;
}

.next-button {
  right: 16px;
}

.download-link {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.filmstrip {
  min-height: 82px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.filmstrip-item {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.filmstrip-item.active {
  border-color: var(--brand-2);
}

.filmstrip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 1240px) {
  .workspace {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .details-panel {
    display: none;
  }
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    background: var(--bg);
  }

  .app-rail {
    min-height: auto;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    position: static;
  }

  .rail-nav {
    display: flex;
    overflow-x: auto;
    justify-content: flex-end;
  }

  .rail-card {
    display: none;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .folder-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    overflow-x: auto;
  }

  .topbar,
  .toolbar,
  .share-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .share-panel {
    grid-template-columns: 1fr;
  }

  .controls {
    width: 100%;
  }

  .search-control {
    flex: 1 1 220px;
  }
}

@media (max-width: 560px) {
  .app-rail,
  .topbar,
  .content,
  .sidebar {
    padding-inline: 14px;
  }

  .top-actions .icon-button span:last-child {
    display: none;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .album-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .album-hero-badge {
    text-align: left;
  }

  .gallery-grid {
    column-width: 160px;
  }

  .nav-button {
    width: 38px;
    height: 38px;
  }
}

/* Redesign: upload landing, protected modal and photo-first gallery. */
body:not(.has-album) .app-rail,
body:not(.has-album) .topbar,
body:not(.has-album) .sidebar {
  display: none;
}

body:not(.has-album) .shell {
  grid-template-columns: 1fr;
  background:
    linear-gradient(135deg, rgba(32, 110, 99, 0.12), transparent 34%),
    linear-gradient(315deg, rgba(214, 168, 79, 0.16), transparent 35%),
    var(--surface);
}

body:not(.has-album) .app-main {
  min-height: 100vh;
}

body:not(.has-album) .workspace {
  min-height: 100vh;
  display: block;
}

body:not(.has-album) .content {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 52px);
}

body:not(.has-album) .upload-panel {
  width: 100%;
  min-height: auto;
}

body:not(.has-album) .drop-zone {
  width: min(760px, 100%);
}

.workspace {
  grid-template-columns: 264px minmax(0, 1fr);
}

.content {
  background: #f8f7f3;
}

.album-hero {
  min-height: auto;
  align-items: center;
  margin-bottom: 12px;
  padding: 22px 24px;
  background: #171b23;
  color: #fff;
}

.album-hero::after,
.album-hero-badge {
  display: none;
}

.album-hero .eyebrow {
  color: #f5d27a;
}

.album-hero h2 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 900;
  line-height: 1.06;
}

.album-hero p {
  color: rgba(255, 255, 255, 0.68);
}

.toolbar {
  position: sticky;
  top: 74px;
  z-index: 15;
  background: rgba(248, 247, 243, 0.9);
  backdrop-filter: blur(16px);
}

.stats {
  display: flex;
  flex-wrap: wrap;
}

.stats div {
  min-height: 48px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 150px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 24px;
  column-width: auto;
  column-gap: normal;
  padding-top: 8px;
  padding-bottom: 34px;
}

.photo-card {
  display: block;
  position: relative;
  height: clamp(170px, 18vw, 260px);
  margin: 0;
  border-radius: 14px;
  background: #e9e7df;
  box-shadow: 0 8px 26px rgba(21, 21, 21, 0.08);
}

.photo-card:nth-child(7n + 1) {
  grid-row: span 2;
  height: clamp(350px, 37vw, 530px);
}

.photo-card:nth-child(11n + 4) {
  grid-column: span 2;
}

.photo-card img,
.photo-card:nth-child(5n + 2) img,
.photo-card:nth-child(5n + 3) img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

.photo-overlay {
  position: absolute;
  inset: auto 0 0;
  display: grid !important;
  gap: 2px;
  padding: 42px 14px 14px !important;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.74));
  color: #fff;
  white-space: normal !important;
}

.photo-overlay strong,
.photo-overlay small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-overlay small {
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
}

.locked-panel {
  position: fixed;
  inset: 0;
  z-index: 35;
  min-height: 100vh;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(16, 19, 25, 0.92), rgba(16, 19, 25, 0.78)),
    var(--rail);
}

.locked-panel .lock-box {
  width: min(460px, 100%);
  padding: 28px;
}

.locked-panel .lock-box h2 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
}

#lightbox.modal-backdrop {
  background: #050608;
}

.lightbox {
  width: 100vw;
  height: 100vh;
  grid-template-rows: 82px minmax(0, 1fr) 126px;
  gap: 0;
  padding: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.08), transparent 34%),
    #050608;
}

.lightbox-top {
  min-height: 82px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 6, 8, 0.92);
}

.lightbox h2 {
  max-width: min(760px, 62vw);
  font-size: 1.05rem;
}

.lightbox figure {
  width: 100%;
  height: calc(100vh - 208px);
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 28px 96px 34px;
  overflow: hidden;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 270px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.45);
}

.lightbox-actions {
  flex-wrap: nowrap;
}

.download-link {
  min-height: 44px;
  padding-inline: 18px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}

.round-button {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}

.nav-button {
  top: calc(50% - 48px);
}

.filmstrip {
  min-height: 126px;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #050608;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.32);
}

.filmstrip-item {
  width: 92px;
  height: 82px;
  border-width: 2px;
  border-radius: 12px;
  opacity: 0.72;
  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.filmstrip-item:hover,
.filmstrip-item.active {
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 1240px) {
  .workspace {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .toolbar {
    position: static;
  }

  .photo-card:nth-child(11n + 4) {
    grid-column: span 1;
  }

  .lightbox {
    grid-template-rows: 76px minmax(0, 1fr) 112px;
  }

  .lightbox figure {
    height: calc(100vh - 188px);
    padding: 18px 58px 24px;
  }

  .lightbox img {
    max-height: calc(100vh - 246px);
  }

  .filmstrip {
    min-height: 112px;
    padding: 14px 14px 18px;
  }

  .filmstrip-item {
    width: 76px;
    height: 70px;
  }
}

@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .photo-card,
  .photo-card:nth-child(7n + 1) {
    height: 190px;
    grid-row: auto;
  }

  .lightbox h2 {
    max-width: 46vw;
  }

  .lightbox figure {
    height: calc(100vh - 178px);
    padding: 14px 10px 20px;
  }

  .lightbox img {
    max-height: calc(100vh - 228px);
  }

  .nav-button {
    top: auto;
    bottom: 126px;
  }
}

/* Final app skin: equal photo tiles, theme switch and footer. */
:root {
  --app-bg: #f4f1e8;
  --app-surface: #fbfaf6;
  --app-panel: #ffffff;
  --app-panel-2: #efebe1;
  --app-ink: #171717;
  --app-muted: #6f6a60;
  --app-line: #ded6c7;
  --app-line-strong: #cfc4b3;
  --app-brand: #1f7568;
  --app-accent: #d8ad55;
  --app-rail: #11151d;
  --app-rail-soft: #1c222d;
  --app-shadow: 0 16px 38px rgba(24, 20, 14, 0.1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #0d1117;
  --app-surface: #111720;
  --app-panel: #171e28;
  --app-panel-2: #101720;
  --app-ink: #f5f3ed;
  --app-muted: #a9a397;
  --app-line: #2a3442;
  --app-line-strong: #3b4756;
  --app-brand: #54c3ae;
  --app-accent: #e5bd6b;
  --app-rail: #080b10;
  --app-rail-soft: #121823;
  --app-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

body {
  background: var(--app-bg);
  color: var(--app-ink);
}

.shell {
  background:
    linear-gradient(90deg, var(--app-rail) 0 178px, transparent 178px),
    var(--app-bg);
}

.app-main {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.app-rail {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    var(--app-rail);
}

.rail-card,
.rail-item:hover,
.rail-item.active {
  background: var(--app-rail-soft);
}

.topbar,
.content,
.app-footer {
  background: var(--app-surface);
}

.topbar,
.sidebar,
.app-footer {
  border-color: var(--app-line);
}

.sidebar {
  background: var(--app-panel-2);
}

.icon-button,
.theme-toggle,
.download-link,
.toolbar,
.stats div,
.drop-zone,
.lock-box,
.admin-modal,
.progress-modal,
.share-panel,
.status,
.folder-button.active,
.file-picker,
.upload-form input:not([type="file"]),
.share-row input,
select {
  border-color: var(--app-line);
  background: var(--app-panel);
  color: var(--app-ink);
}

.icon-button:hover,
.theme-toggle:hover,
.download-link:hover,
.detail-action:hover {
  border-color: var(--app-line-strong);
}

.eyebrow,
.sidebar-kicker {
  color: var(--app-brand);
}

.primary-upload {
  background: var(--app-brand);
}

.folder-count,
.file-picker,
.search-control,
.progress-track {
  background: var(--app-panel-2);
  color: var(--app-muted);
}

.theme-toggle {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  padding: 0 14px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(21, 21, 21, 0.05);
}

.theme-toggle span:first-child {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--app-panel-2);
  color: var(--app-brand);
  font-size: 0.85rem;
}

.floating-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
}

body.has-album .floating-theme-toggle {
  display: none;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
  padding: 16px 24px;
  border-top: 1px solid var(--app-line);
  color: var(--app-muted);
}

.app-footer strong,
.app-footer span {
  display: block;
}

.app-footer strong {
  color: var(--app-ink);
  font-size: 0.95rem;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-links span {
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-panel);
  padding: 5px 10px;
  font-size: 0.8rem;
}

body:not(.has-album) .shell {
  min-height: 100vh;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--app-brand), transparent 88%), transparent 34%),
    linear-gradient(315deg, color-mix(in srgb, var(--app-accent), transparent 84%), transparent 35%),
    var(--app-bg);
}

body:not(.has-album) .app-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

body:not(.has-album) .workspace {
  min-height: auto;
}

body:not(.has-album) .app-footer {
  background: transparent;
}

.album-hero {
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--app-brand), #11151d 72%), #11151d);
  box-shadow: var(--app-shadow);
}

:root[data-theme="dark"] .album-hero {
  background:
    linear-gradient(135deg, rgba(84, 195, 174, 0.2), rgba(229, 189, 107, 0.12)),
    var(--app-panel);
}

.toolbar {
  border-radius: 16px;
  box-shadow: none;
}

.search-control {
  border-color: var(--app-line);
}

.gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  align-items: start;
}

.photo-card,
.photo-card:nth-child(7n + 1),
.photo-card:nth-child(11n + 4) {
  grid-column: auto;
  grid-row: auto;
  height: auto;
  aspect-ratio: 1 / 1;
}

.photo-card {
  border: 1px solid var(--app-line);
  background: var(--app-panel);
  box-shadow: var(--app-shadow);
}

.photo-card img,
.photo-card:nth-child(5n + 2) img,
.photo-card:nth-child(5n + 3) img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.photo-card:hover {
  box-shadow: 0 20px 44px rgba(21, 21, 21, 0.16);
}

.photo-overlay {
  padding: 54px 14px 14px !important;
}

:root[data-theme="dark"] .photo-card:hover {
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .search-control input,
:root[data-theme="dark"] .upload-form input,
:root[data-theme="dark"] .share-row input {
  color: var(--app-ink);
}

:root[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.78);
}

@media (max-width: 900px) {
  .shell {
    background: var(--app-bg);
  }

  .app-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .theme-toggle span:last-child {
    display: none;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .photo-card,
  .photo-card:nth-child(7n + 1) {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}


/* Fast lightbox + photo details */
body.lightbox-open { overflow: hidden; }
.lightbox figure { overflow: hidden; border-radius: 22px; background: rgba(0,0,0,.18); }
#lightboxImage { transition: opacity .18s ease, filter .22s ease, transform .22s ease; transform-origin: center center; cursor: zoom-in; }
#lightboxImage.loading { filter: blur(10px); opacity: .78; }
.filmstrip { scroll-behavior:smooth; }
.photo-card img { content-visibility:auto; }
@media (max-width:720px){ .lightbox figure{touch-action:pan-y;} }

/* Velix Photo Cloud v3 */
.album-hero{position:relative;min-height:320px;background-size:cover;background-position:center;border-radius:24px;overflow:hidden;display:flex;align-items:flex-end;color:#fff;padding:34px;margin-bottom:22px}
.album-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.72))}
.album-hero-content{position:relative;z-index:1;max-width:760px}.album-hero h2{font-size:clamp(2rem,5vw,4.5rem);margin:.2rem 0}.album-hero p{max-width:680px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.hero-button{border:0;border-radius:12px;padding:12px 18px;font-weight:700;background:#fff;color:#111;cursor:pointer}.hero-button.secondary{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.admin-modal-wide{width:min(1180px,96vw);max-height:94vh;padding:0;overflow:hidden}.admin-modal-wide>.modal-title-row{padding:22px 24px;border-bottom:1px solid var(--line)}.admin-login{padding:24px}.admin-shell{display:grid;grid-template-columns:210px 1fr;min-height:650px}.admin-nav{padding:18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:7px;background:var(--panel-muted)}.admin-tab{border:0;background:transparent;text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer;color:var(--text);font-weight:650}.admin-tab:hover,.admin-tab.active{background:var(--panel);box-shadow:0 5px 18px rgba(0,0,0,.07)}.danger-text{color:#d04b4b;margin-top:auto}.admin-content{padding:22px;overflow:auto;max-height:76vh}.admin-section{min-height:400px}.dashboard-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:12px 0 18px}.dashboard-cards article,.dashboard-panel,.maintenance-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}.dashboard-cards span{display:block;color:var(--muted);font-size:.86rem}.dashboard-cards strong{display:block;font-size:2rem;margin-top:7px}.dashboard-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}.dashboard-panel h3,.maintenance-card h3{margin-top:0}.storage-meter{height:14px;border-radius:99px;background:var(--line);overflow:hidden;margin:16px 0 9px}.storage-meter>div{height:100%;background:linear-gradient(90deg,#4e8cff,#7a5cff)}.storage-meter.warning>div{background:#e9a33b}.storage-meter.critical>div{background:#df4b4b}.storage-caption{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}.mini-list{display:grid;gap:10px}.mini-list>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.system-grid>div{background:var(--panel-muted);border-radius:12px;padding:13px}.system-grid span{display:block;color:var(--muted);font-size:.8rem}.system-grid strong{display:block;margin-top:5px}.storage-alert{padding:12px;border-radius:12px;background:rgba(223,75,75,.12);color:#c53c3c;font-weight:700}.admin-filter-row{display:flex;gap:10px;margin-bottom:16px}.admin-filter-row input,.admin-filter-row select{padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}.admin-filter-row input{flex:1}.modern-admin-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.admin-album-card{display:grid;grid-template-columns:150px 1fr;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}.admin-album-card.disabled{opacity:.68}.admin-cover{background:var(--panel-muted);background-size:cover;background-position:center;min-height:160px}.admin-album-body{padding:15px}.admin-album-heading{display:flex;justify-content:space-between;gap:10px}.admin-album-heading strong{display:block;font-size:1.05rem}.admin-album-heading span,.album-metrics{color:var(--muted);font-size:.82rem}.status-pill{white-space:nowrap;background:var(--panel-muted);border-radius:99px;padding:5px 9px}.album-metrics{display:flex;gap:12px;flex-wrap:wrap;margin:13px 0}.edit-album-modal,.share-dialog{width:min(680px,94vw);background:var(--panel);color:var(--text);border-radius:20px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.3)}.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.edit-grid label{display:grid;gap:7px;font-weight:650}.edit-grid input,.edit-grid textarea,.share-dialog input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-muted);color:var(--text)}.full-span{grid-column:1/-1}.toggle-label{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.toggle-label input{width:auto}.button-link{border:0;cursor:pointer}.qr-code{display:grid;place-items:center;padding:18px}.qr-code img{width:220px;height:220px;background:#fff;padding:10px;border-radius:12px}.share-dialog input{margin-bottom:12px}.lightbox:fullscreen{background:#050505;width:100vw;height:100vh}.lightbox:fullscreen figure{height:calc(100vh - 170px)}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.admin-nav{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;overflow:auto}.danger-text{margin-top:0;margin-left:auto}.dashboard-cards{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.modern-admin-list{grid-template-columns:1fr}.admin-album-card{grid-template-columns:110px 1fr}.system-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.album-hero{min-height:260px;padding:22px}.dashboard-cards,.system-grid,.edit-grid{grid-template-columns:1fr}.admin-content{padding:14px}.admin-album-card{grid-template-columns:1fr}.admin-cover{min-height:150px}.lightbox-actions .button-link{display:none}}

/* ===== Velix Foto Cloud 4.0 — modern UI based on approved visual concept ===== */
:root {
  --pro-bg:#f4f6fa; --pro-card:#fff; --pro-border:#e6eaf1; --pro-text:#151b2b;
  --pro-muted:#7d8799; --pro-primary:#5267ef; --pro-primary-dark:#3f51d7;
  --pro-success:#20b879; --pro-warning:#f6a629; --pro-danger:#eb5670;
  --pro-shadow:0 10px 35px rgba(38,48,72,.08); --pro-radius:14px;
}
.admin-modal-wide{width:min(1510px,97vw);height:min(920px,94vh);max-height:94vh;padding:0;overflow:hidden;background:var(--pro-bg);border:1px solid rgba(255,255,255,.7);box-shadow:0 35px 90px rgba(14,24,48,.22)}
.admin-modal-wide>.modal-title-row{display:none}.admin-modal-wide #adminLoginForm{max-width:430px;margin:12vh auto;background:#fff;padding:34px;border-radius:18px;box-shadow:var(--pro-shadow)}
.admin-shell-pro{display:grid;grid-template-columns:210px 1fr;height:94vh;min-height:680px;background:var(--pro-bg)}
.admin-sidebar{display:flex;flex-direction:column;background:linear-gradient(180deg,#121b2e 0%,#0b1425 100%);color:#fff;padding:20px 15px 16px}
.admin-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 25px}.admin-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#788aff,#5367ec);font-size:18px}.admin-brand strong{display:block;font-size:14px;letter-spacing:.04em}.admin-brand small{color:#8d9bb1;font-size:10px}
.admin-nav{display:flex;flex-direction:column;gap:5px}.admin-tab{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 13px;border:0;border-radius:9px;color:#aeb9ca;background:transparent;font-weight:650;cursor:pointer;transition:.18s}.admin-tab:before{content:'○';font-size:15px}.admin-tab[data-admin-tab="dashboard"]:before{content:'▦'}.admin-tab[data-admin-tab="albums"]:before{content:'▣'}.admin-tab[data-admin-tab="storage"]:before{content:'▤'}.admin-tab[data-admin-tab="maintenance"]:before{content:'◉'}.admin-tab[data-admin-tab="system"]:before{content:'⚙'}.admin-tab:hover,.admin-tab.active{color:#fff;background:#24304a}.admin-tab.active:before{color:#8290ff}
.admin-user-card{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.08)}.admin-avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,#e8a26e,#805648);font-weight:800}.admin-user-card strong,.admin-user-card small{display:block}.admin-user-card strong{font-size:11px}.admin-user-card small{font-size:9px;color:#91a0b6}.admin-logout{margin-left:auto;border:0;background:transparent;color:#94a2b6;font-size:18px;cursor:pointer}
.admin-content{padding:0 26px 28px;overflow:auto}.admin-pagebar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:22px 0 16px;background:linear-gradient(var(--pro-bg) 75%,rgba(244,246,250,0))}.admin-page-kicker{font-size:10px;color:var(--pro-muted);text-transform:uppercase;letter-spacing:.09em}.admin-pagebar h3{margin:2px 0 0;font-size:22px}.admin-actions{display:flex;align-items:center;gap:8px}.admin-icon-action,.admin-secondary-action,.admin-primary-action{border:1px solid var(--pro-border);background:#fff;border-radius:8px;padding:9px 13px;color:var(--pro-text);font-weight:650;text-decoration:none;cursor:pointer}.admin-icon-action{width:37px;height:37px;padding:0}.admin-primary-action{color:#fff;border-color:transparent;background:linear-gradient(135deg,#6073f6,#495be5);box-shadow:0 7px 17px rgba(82,103,239,.25)}
.admin-section{animation:adminFade .22s ease}@keyframes adminFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.dashboard-cards{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:11px;margin-bottom:13px}.dashboard-cards article{position:relative;background:#fff;border:1px solid var(--pro-border);border-radius:11px;padding:15px 16px;min-height:91px;box-shadow:0 4px 16px rgba(35,45,70,.035)}.dashboard-cards article span{font-size:10px;color:var(--pro-muted)}.dashboard-cards article strong{display:block;font-size:25px;margin-top:9px}.dashboard-cards article small{display:block;margin-top:8px;color:var(--pro-success);font-size:9px;font-weight:700}.dashboard-cards article:first-child:after{content:'';display:block;height:5px;margin-top:10px;border-radius:5px;background:linear-gradient(90deg,#20a8d2 52%,#edf0f5 52%)}
.dashboard-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:13px}.dashboard-panel{background:#fff;border:1px solid var(--pro-border);border-radius:12px;padding:16px;box-shadow:0 4px 18px rgba(35,45,70,.04)}.dashboard-panel h3{font-size:13px;margin:0 0 15px}.dashboard-chart{position:relative;height:175px;border-left:1px solid #edf0f5;border-bottom:1px solid #edf0f5;background:repeating-linear-gradient(to bottom,transparent 0,transparent 42px,#f0f2f6 43px)}.dashboard-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.dashboard-chart .area{fill:url(#areaGradient);opacity:.22}.dashboard-chart .line{fill:none;stroke:#5267ef;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.dashboard-lower{display:grid;grid-template-columns:1.4fr 1fr;gap:13px;margin-top:13px}.mini-list div{padding:9px 0;border-bottom:1px solid #f0f2f6}.mini-list div:last-child{border:0}.mini-list span{font-size:11px}.mini-list strong{font-size:11px}
.storage-overview{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:center}.storage-donut{--pct:0;position:relative;width:145px;height:145px;border-radius:50%;background:conic-gradient(var(--pro-primary) calc(var(--pct)*1%),#edf0f6 0);display:grid;place-items:center}.storage-donut:after{content:'';width:103px;height:103px;background:#fff;border-radius:50%;position:absolute}.storage-donut-content{position:relative;z-index:1;text-align:center}.storage-donut-content strong{display:block;font-size:27px}.storage-donut-content span{font-size:10px;color:var(--pro-muted)}
.storage-breakdown{display:grid;gap:11px}.storage-row{display:grid;grid-template-columns:130px 1fr 76px;gap:10px;align-items:center;font-size:11px}.storage-row i{height:6px;border-radius:5px;background:#edf0f4;overflow:hidden}.storage-row i:after{content:'';display:block;width:var(--w);height:100%;background:var(--c,#5267ef);border-radius:inherit}.storage-row strong{text-align:right}
.admin-section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.admin-section-heading>div{display:flex;align-items:center;gap:10px}.section-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#eef0ff;color:#5267ef}.admin-section-heading h3{margin:0;font-size:17px}.admin-section-heading p{margin:3px 0 0;color:var(--pro-muted);font-size:10px}.admin-filter-row{display:grid;grid-template-columns:minmax(260px,1fr) 170px auto;gap:10px;margin-bottom:12px}.admin-filter-row input,.admin-filter-row select{height:39px;border:1px solid var(--pro-border);border-radius:8px;background:#fff;padding:0 12px}.modern-admin-list{background:#fff;border:1px solid var(--pro-border);border-radius:12px;overflow:hidden}.admin-album-card{display:grid;grid-template-columns:54px minmax(0,1fr);gap:11px;padding:10px 14px;border-bottom:1px solid #edf0f4;background:#fff;border-radius:0;box-shadow:none}.admin-album-card:last-child{border-bottom:0}.admin-album-card:hover{background:#fafbff}.admin-cover{width:45px;height:45px;border-radius:7px;background-size:cover;background-position:center;background-color:#edf0f4}.admin-album-body{display:grid;grid-template-columns:minmax(180px,1.8fr) 1.2fr auto;align-items:center;gap:15px}.admin-album-heading{display:block}.admin-album-heading strong{display:block;font-size:12px}.admin-album-heading span:not(.status-pill){display:block;font-size:9px;color:var(--pro-muted);margin-top:3px}.status-pill{display:inline-flex;margin-top:4px;font-size:8px;padding:2px 7px;border-radius:999px;background:#eaf9f2;color:#159866}.album-metrics{display:flex;gap:18px;color:#596276;font-size:10px}.admin-item-actions{display:flex;gap:6px}.admin-item-actions .icon-button{padding:7px 9px;font-size:9px;border-radius:7px;min-height:auto}.admin-album-card.disabled{opacity:.58}
.edit-album-modal{width:min(760px,94vw);max-height:91vh;overflow:auto;background:#fff;border-radius:16px;padding:23px;box-shadow:0 28px 80px rgba(18,25,45,.28)}.edit-tabs{display:flex;gap:26px;border-bottom:1px solid var(--pro-border);margin:6px 0 20px}.edit-tabs button{padding:10px 0;border:0;background:none;color:var(--pro-muted);font-weight:650;font-size:11px}.edit-tabs button.active{color:var(--pro-primary);border-bottom:2px solid var(--pro-primary)}.edit-layout{display:grid;grid-template-columns:180px 1fr;gap:22px}.edit-cover-panel>span{display:block;font-size:10px;font-weight:700;margin-bottom:8px}.edit-cover-preview{height:130px;border-radius:10px;background:linear-gradient(135deg,#edf0f5,#f7f8fb);display:grid;place-items:center;color:var(--pro-muted);margin-bottom:8px;background-size:cover;background-position:center}.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.edit-grid label{font-size:10px;font-weight:700}.edit-grid input,.edit-grid textarea{width:100%;margin-top:6px;border:1px solid var(--pro-border);border-radius:8px;padding:10px;background:#fff}.edit-grid .full-span{grid-column:1/-1}.required{color:#e84d67}.switch-label{display:flex!important;align-items:center;gap:9px;margin-top:7px}.switch-label input{width:auto;margin:0}.edit-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;padding-top:15px;border-top:1px solid var(--pro-border)}
.album-hero{min-height:300px;border-radius:16px;overflow:hidden;background-position:center 35%;box-shadow:0 16px 40px rgba(20,28,44,.18)}.album-hero-overlay{background:linear-gradient(90deg,rgba(12,14,19,.73),rgba(12,14,19,.12) 70%)}.album-hero-content{max-width:620px;padding:50px 40px}.album-hero-content h2{font-size:42px;line-height:1.05;margin:8px 0 12px}.hero-button{border-radius:9px;padding:11px 16px;font-weight:750}.gallery-surface{background:#fff;border-radius:16px;padding:0 0 20px;box-shadow:var(--pro-shadow)}.gallery-surface .toolbar{padding:14px 18px;border-bottom:1px solid var(--pro-border)}.gallery-surface .stats{margin:12px 18px}.gallery-grid{padding:0 18px;gap:7px}.gallery-card{border-radius:8px;overflow:hidden}.gallery-card img{transition:transform .28s ease}.gallery-card:hover img{transform:scale(1.035)}
#lightbox.modal-backdrop{background:rgba(6,10,17,.92);backdrop-filter:blur(12px)}.lightbox{width:min(1400px,96vw);height:min(900px,95vh);border-radius:15px;background:#0b111b;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);display:grid;grid-template-rows:60px 1fr 92px 48px}.lightbox-top{padding:0 18px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);background:#0d1420}.lightbox-top h2{font-size:13px}.lightbox-top p{font-size:10px}.lightbox-actions .download-link{background:transparent;border:0;color:#dbe2ed;font-size:10px}.lightbox figure{min-height:0;margin:0;background:#070b11;display:grid;place-items:center;overflow:hidden}.lightbox figure img{max-height:100%;max-width:100%;object-fit:contain}.filmstrip{height:92px;padding:10px 15px;background:#101722;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:7px;overflow-x:auto}.filmstrip button{min-width:70px;border-radius:6px;overflow:hidden;opacity:.62;border:2px solid transparent}.filmstrip button.active{opacity:1;border-color:#6378ff}.lightbox-bottom-controls{height:48px;display:flex;align-items:center;justify-content:center;gap:12px;color:#e7ecf4;background:#0d1420;border-top:1px solid rgba(255,255,255,.07)}.lightbox-bottom-controls button{border:0;background:transparent;color:inherit;font-size:16px}.lightbox-bottom-controls input{width:120px}.lightbox-bottom-controls span{font-size:11px}.nav-button{width:42px;height:42px;background:rgba(9,14,22,.62);border:1px solid rgba(255,255,255,.16);color:#fff}
.maintenance-card{background:transparent;border:0;padding:0}.maintenance-card>h3,.maintenance-card>p{display:none}.maintenance-card .admin-item-actions{margin-bottom:14px}.maintenance-card .system-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.maintenance-card .system-grid>div,.system-grid>div{background:#fff;border:1px solid var(--pro-border);border-radius:11px;padding:15px}.system-grid span{font-size:10px;color:var(--pro-muted)}.system-grid strong{display:block;margin-top:6px}
@media(max-width:900px){.admin-shell-pro{grid-template-columns:68px 1fr}.admin-brand div,.admin-tab span,.admin-user-card div{display:none}.admin-brand{justify-content:center}.admin-sidebar{padding:15px 8px}.admin-tab{justify-content:center;font-size:0}.admin-tab:before{font-size:17px}.dashboard-cards{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.dashboard-lower{grid-template-columns:1fr}.admin-content{padding:0 14px 20px}.edit-layout{grid-template-columns:1fr}.admin-album-body{grid-template-columns:1fr}.album-metrics{display:none}.lightbox{width:100vw;height:100vh;border-radius:0}.lightbox-actions .button-link{display:none}}

/* v5 redesign enhancements */
.upload-form-pro { gap: 18px; }
.upload-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.upload-grid .full-span { grid-column: 1 / -1; }
.upload-form-pro textarea,
.upload-form-pro input[type="text"],
.upload-form-pro input[type="password"],
.upload-form-pro input[type="search"],
.upload-form-pro input[type="datetime-local"] { width:100%; min-height:46px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--panel); color:var(--ink); }
.upload-form-pro textarea { min-height:96px; resize:vertical; }
.upload-sources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.source-card { position:relative; border:1px dashed var(--line-strong); border-radius:14px; background:rgba(255,255,255,.6); padding:18px; display:grid; gap:6px; min-height:112px; justify-items:start; align-content:center; }
.source-label { font-weight:800; }
.source-card small { color:var(--muted); }
.queue-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.queue-preview > div { display:flex; gap:10px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.72); }
.queue-preview strong { width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:#eef2ff; color:#5267ef; }
.toolbar-pro { display:grid; gap:14px; }
.toolbar-main { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.view-toggle-group { display:inline-flex; gap:8px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.view-toggle { min-width:42px; min-height:40px; border:0; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; }
.view-toggle.active { background:#eef1ff; color:#5267ef; }
#selectedOnlyButton.active { background:#eef8f5; border-color:#bcded5; color:#206e63; }
.gallery-grid { display:grid; gap:16px; }
.gallery-grid.mode-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.gallery-grid.mode-wide { grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); }
.gallery-grid.mode-list { grid-template-columns: 1fr; }
.photo-card { position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel); box-shadow:0 10px 30px rgba(21,21,21,.06); }
.photo-card.is-selected { border-color:#d6a84f; box-shadow:0 16px 34px rgba(214,168,79,.18); }
.photo-open { display:block; width:100%; border:0; background:transparent; padding:0; cursor:pointer; }
.photo-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.gallery-grid.mode-wide .photo-card img { aspect-ratio:4/3; }
.gallery-grid.mode-list .photo-card { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:stretch; }
.gallery-grid.mode-list .photo-card img { aspect-ratio:auto; height:100%; min-height:170px; }
.gallery-grid.mode-list .photo-overlay { position:static; background:none; color:var(--ink); padding:18px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.gallery-grid.mode-list .photo-overlay strong { font-size:1.05rem; }
.photo-overlay { position:absolute; left:0; right:0; bottom:0; display:grid; gap:4px; padding:18px 16px 14px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(12,15,22,.72) 100%); color:#fff; }
.photo-select { position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(15,16,20,.55); color:#fff; cursor:pointer; backdrop-filter: blur(10px); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.stats > div { border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:14px 16px; display:grid; gap:4px; }
.stats strong { font-size:1.2rem; }
.upload-panel .drop-zone { border-radius:24px; padding:32px; background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7)); box-shadow: var(--shadow); border:1px solid rgba(223,217,206,.85); }
.album-hero { min-height:280px; border-radius:26px; overflow:hidden; background-size:cover; background-position:center; position:relative; }
.album-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,12,16,.68) 0%, rgba(10,12,16,.24) 60%, rgba(10,12,16,.08) 100%); }
.album-hero-content { position:relative; z-index:1; max-width:520px; padding:34px; color:#fff; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.hero-button { min-height:44px; border-radius:12px; border:0; padding:0 16px; font-weight:700; cursor:pointer; }
.hero-button.secondary { background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.18); }
.hero-button:not(.secondary) { background:#fff; color:#111; }
.modal-backdrop .admin-modal.admin-modal-wide { width:min(100vw, 100vw); height:100vh; max-width:none; max-height:none; border-radius:0; }
body.admin-open { overflow:hidden; }
.lightbox-top { position:relative; z-index:4; }
.lightbox-bottom-controls { display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 18px; color:#fff; }
.share-dialog input { width:100%; min-height:46px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .sidebar { order:2; }
  .content { order:1; }
  .shell { grid-template-columns: 1fr; background: var(--bg); }
  .app-rail { position:static; min-height:auto; grid-template-rows:auto; grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .upload-grid, .upload-sources, .queue-preview, .stats { grid-template-columns:1fr; }
  .gallery-grid.mode-list .photo-card { grid-template-columns:1fr; }
  .toolbar-main, .topbar, .controls { flex-direction:column; align-items:stretch; }
}

/* v5.1 fixes: better gallery controls and full lightbox image */
.gallery-surface {
  background: linear-gradient(180deg, #fff 0%, #fbfaf6 100%);
  border: 1px solid rgba(217, 209, 193, .85);
  border-radius: 22px;
  padding: 0 0 26px;
  overflow: hidden;
}
.gallery-surface .toolbar.toolbar-pro {
  margin: 16px 18px 10px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,245,238,.96));
  border: 1px solid rgba(222, 214, 199, .95);
  border-radius: 22px;
  box-shadow: 0 10px 32px rgba(38, 35, 29, .06);
  gap: 14px;
}
.toolbar-pro .toolbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.toolbar-pro .pathline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 800;
  color: #554d3f;
  background: #fff;
  border: 1px solid rgba(223, 214, 198, .95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.toolbar-pro .controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}
.toolbar-pro .search-control,
.toolbar-pro #sortSelect,
.toolbar-pro #selectedOnlyButton {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(223, 214, 198, .95);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.toolbar-pro .search-control { padding: 0 14px; }
.toolbar-pro .search-control input { background: transparent; border: 0; min-height: 46px; }
.toolbar-pro #sortSelect { padding: 0 14px; font-weight: 700; color: #463f34; }
.toolbar-pro #selectedOnlyButton {
  padding: 0 18px;
  font-weight: 800;
  color: #514838;
}
.view-toggle-group {
  padding: 5px;
  border-radius: 16px;
  background: #f4f1ea;
  border: 1px solid rgba(223, 214, 198, .95);
}
.view-toggle {
  min-width: 46px;
  min-height: 42px;
  border-radius: 12px;
  font-size: 17px;
  color: #7f7567;
}
.view-toggle.active {
  color: #5b62ff;
  background: #e9edff;
  box-shadow: 0 8px 18px rgba(91, 98, 255, .14);
}
.gallery-surface .stats {
  margin: 0 18px 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.gallery-surface .stats > div {
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(223, 214, 198, .95);
  background: linear-gradient(180deg, #ffffff 0%, #faf7f1 100%);
  box-shadow: 0 10px 25px rgba(35, 32, 27, .05);
}
.gallery-surface .stats strong {
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: #22201b;
}
.gallery-surface .stats span {
  font-size: .92rem;
  color: #857968;
  font-weight: 700;
}
.gallery-grid { padding: 0 18px; gap: 14px; }
.photo-card {
  border: 1px solid rgba(223,214,198,.92);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(26, 24, 20, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.photo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(26, 24, 20, .11);
  border-color: rgba(201, 187, 164, .95);
}
.photo-select {
  width: 42px;
  height: 42px;
  top: 14px;
  right: 14px;
  font-size: 19px;
  background: rgba(13,17,26,.56);
}
.photo-card.is-selected .photo-select { background: rgba(196, 146, 47, .92); }
.photo-overlay {
  padding: 22px 16px 14px;
  background: linear-gradient(180deg, rgba(9,12,17,0) 0%, rgba(9,12,17,.78) 100%);
}
.photo-overlay strong { font-size: .98rem; }
.photo-overlay small { opacity: .86; }

#lightbox.modal-backdrop {
  background: rgba(7, 10, 16, .94);
  backdrop-filter: blur(14px);
}
.lightbox {
  width: min(1500px, 97vw);
  height: min(940px, 96vh);
  border-radius: 18px;
  grid-template-rows: 72px minmax(0,1fr) 106px 52px;
}
.lightbox-top {
  padding: 0 20px;
  min-height: 72px;
}
.lightbox-top h2 { font-size: 16px; }
.lightbox-top p { font-size: 12px; opacity: .82; }
.lightbox figure {
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(29,37,54,.45) 0%, rgba(7,11,18,.96) 68%);
  overflow: hidden;
}
.lightbox figure img,
#lightboxImage {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  margin: auto;
}
.filmstrip {
  height: 106px;
  padding: 11px 16px;
}
.filmstrip button {
  min-width: 82px;
  border-radius: 10px;
}
.lightbox-bottom-controls {
  height: 52px;
}
@media (max-width: 920px) {
  .toolbar-pro .controls { grid-template-columns: 1fr; }
  .gallery-surface .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .gallery-surface .toolbar.toolbar-pro { margin: 12px; padding: 14px; border-radius: 18px; }
  .toolbar-pro .toolbar-main { flex-direction: column; align-items: stretch; }
  .gallery-surface .stats { margin: 0 12px 14px; grid-template-columns: 1fr; }
  .gallery-grid { padding: 0 12px; }
  .lightbox { width: 100vw; height: 100vh; border-radius: 0; grid-template-rows: 64px minmax(0,1fr) 92px 48px; }
  .lightbox figure { padding: 10px 10px 6px; }
}

/* v5.2 polishing: lightbox, upload page and album stats */
.album-hero-content { max-width: 720px; }
.album-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.album-hero-stats > div {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
.album-hero-stats strong {
  display:block;
  color:#fff;
  font-size:1.05rem;
  line-height:1.1;
}
.album-hero-stats span {
  display:block;
  color:rgba(255,255,255,.82);
  font-size:.78rem;
  margin-top:4px;
  font-weight:700;
}

.upload-panel .drop-zone {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 34px;
}
.upload-panel .drop-zone h2 {
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 6px 0 10px;
}
.upload-panel .drop-zone p {
  max-width: 700px;
  margin: 0 auto 18px;
}
.upload-form-pro { margin-top: 10px; }
.upload-grid { grid-template-columns: repeat(2, minmax(0,1fr)); align-items:start; }
.upload-grid > label { display:grid; gap:8px; font-weight:800; color:#4d4538; }
.upload-grid > label.full-span { grid-column: 1 / -1; }
.upload-form-pro .upload-sources { margin-top: 4px; }
.upload-form-pro .source-card { min-height: 120px; }
.upload-form-pro .queue-preview { margin-top: 6px; }

#lightbox.modal-backdrop { padding: 14px; }
.lightbox {
  width: min(1500px, 96vw);
  height: min(950px, 95vh);
  grid-template-columns: 1fr;
  grid-template-rows: 72px minmax(0, 1fr) 116px 56px;
  border-radius: 22px;
  overflow: hidden;
  background: #09111b;
}
.lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  min-height: 72px;
}
.lightbox-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lightbox-top .download-link {
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:10px;
  color:#dce4ef;
}
.lightbox figure {
  grid-row: 2;
  min-height: 0;
  min-width: 0;
  padding: 12px 24px 18px;
  background: #050b13;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lightbox figure img,
#lightboxImage {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.28);
  border-radius: 8px;
}
.filmstrip {
  grid-row: 3;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  height: 116px;
  background: #0d1521;
  border-top: 1px solid rgba(255,255,255,.07);
  overflow-x: auto;
  overflow-y: hidden;
}
.filmstrip::-webkit-scrollbar { height: 8px; }
.filmstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
.filmstrip button,
.filmstrip .filmstrip-item {
  min-width: 88px;
  width: 88px;
  height: 88px;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #111b29;
}
.filmstrip img { width: 100%; height: 100%; object-fit: cover; display:block; }
.lightbox-bottom-controls {
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  background: #0a111a;
  border-top: 1px solid rgba(255,255,255,.07);
}
.lightbox-bottom-controls button {
  min-width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #e6edf6;
  font-size: 18px;
  cursor: pointer;
}
#zoomIndicator {
  min-width: 72px;
  text-align: center;
  font-weight: 800;
  color: #eef4fb;
  font-size: .95rem;
}
.nav-button {
  width: 48px;
  height: 48px;
  top: 50%;
  transform: translateY(-68%);
  z-index: 6;
}
.prev-button { left: 16px; }
.next-button { right: 16px; }

@media (max-width: 980px) {
  .album-hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lightbox-top { flex-direction: column; align-items:flex-start; justify-content:center; padding: 10px 16px; }
  .lightbox { grid-template-rows: auto minmax(0,1fr) 104px 54px; }
}
@media (max-width: 700px) {
  .upload-panel .drop-zone h2 { font-size: 2.1rem; }
  .album-hero-stats { grid-template-columns: 1fr 1fr; }
  .lightbox { width: 100vw; height: 100vh; border-radius: 0; }
  .lightbox figure { padding: 8px 10px 12px; }
  .filmstrip { height: 96px; padding: 8px 10px; }
  .filmstrip button, .filmstrip .filmstrip-item { width: 72px; min-width: 72px; height: 72px; }
  .nav-button { width: 42px; height: 42px; }
}

/* v5.3 definitive Safari lightbox layout fix */
.lightbox {
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
}
.lightbox-top {
  flex: 0 0 72px !important;
  position: relative !important;
  z-index: 20 !important;
}
.lightbox figure {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  padding: 14px 24px 18px !important;
  box-sizing: border-box !important;
}
.lightbox figure img,
#lightboxImage {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  flex: 0 1 auto !important;
}
.filmstrip {
  flex: 0 0 116px !important;
  min-height: 116px !important;
  height: 116px !important;
  position: relative !important;
  inset: auto !important;
  z-index: 30 !important;
  opacity: 1 !important;
  background: #0d1521 !important;
  box-shadow: none !important;
  margin: 0 !important;
  transform: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.lightbox-bottom-controls {
  flex: 0 0 56px !important;
  min-height: 56px !important;
  height: 56px !important;
  position: relative !important;
  z-index: 31 !important;
  margin: 0 !important;
}
@media (max-width: 980px) {
  .lightbox-top { flex-basis: auto !important; min-height: 72px; }
}
@media (max-width: 700px) {
  .filmstrip { flex-basis: 96px !important; min-height: 96px !important; height: 96px !important; }
  .lightbox-bottom-controls { flex-basis: 52px !important; min-height: 52px !important; height: 52px !important; }
}

/* v5.5 public stats cleanup + admin album stats */
.album-hero-stats.album-hero-stats-minimal {
  display: flex;
  grid-template-columns: none;
  margin-top: 14px;
  margin-bottom: 2px;
}
.hero-size-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.hero-size-pill strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}
.hero-size-pill span {
  color: rgba(255,255,255,.82);
  font-size: .84rem;
  font-weight: 700;
}
.hero-actions { margin-top: 18px; }
.hero-actions .hero-button { min-height: 46px; }
#stats[hidden] { display:none !important; }

.edit-stats-panel {
  margin-top: 18px;
  border-top: 1px solid rgba(218,210,196,.85);
  padding-top: 18px;
}
.edit-stats-panel h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}
.edit-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.edit-stats-grid > div {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(221,214,202,.95);
  background: linear-gradient(180deg, #fff 0%, #faf8f4 100%);
  box-shadow: 0 10px 24px rgba(31,29,24,.05);
}
.edit-stats-grid span {
  display: block;
  font-size: .82rem;
  color: #7d7262;
  margin-bottom: 6px;
}
.edit-stats-grid strong {
  display: block;
  font-size: 1.06rem;
  color: #23201a;
}
.admin-album-card .admin-cover,
.admin-album-card .admin-album-body { cursor: pointer; }
@media (max-width: 920px) {
  .edit-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .edit-stats-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   FOTO CLOUD v6 — complete visual redesign
   ========================================================= */
:root {
  --v6-bg: #f4f6fb;
  --v6-surface: #ffffff;
  --v6-panel: #fbfcff;
  --v6-ink: #141824;
  --v6-muted: #737b8c;
  --v6-line: #e5e8f0;
  --v6-dark: #07101b;
  --v6-dark-2: #0d1724;
  --v6-purple: #6958ff;
  --v6-purple-2: #8c65ff;
  --v6-green: #2cbf9f;
  --v6-shadow: 0 20px 55px rgba(32, 40, 70, .10);
  --v6-radius: 18px;
}
html[data-theme="light"] body,
body { background: var(--v6-bg); color: var(--v6-ink); }
.shell {
  grid-template-columns: 188px minmax(0,1fr);
  background: linear-gradient(90deg, var(--v6-dark) 0 188px, var(--v6-bg) 188px);
}
.app-rail {
  width:188px;
  padding:20px 14px 16px;
  gap:24px;
  background: linear-gradient(180deg, #07101b 0%, #0a1522 100%);
  border-right:1px solid rgba(255,255,255,.04);
}
.rail-brand { gap:10px; }
.brand-mark {
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(145deg,#8f77ff,#50d1b5);
  color:#fff;font-size:18px;
}
.rail-brand strong { font-size:.92rem; letter-spacing:.04em; }
.rail-brand span { font-size:.72rem; color:rgba(255,255,255,.48); }
.rail-nav { gap:6px; }
.rail-item {
  min-height:42px;border-radius:10px;padding:0 11px;
  color:rgba(255,255,255,.68);font-size:.86rem;font-weight:700;
}
.rail-item:hover,.rail-item.active {
  background:rgba(255,255,255,.08);color:#fff;border-color:transparent;
}
.rail-item span:first-child { width:18px; text-align:center; opacity:.9; }
.rail-footer-stack { margin-top:auto; display:grid; gap:12px; }
.rail-card {
  border-radius:12px;padding:12px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.rail-card i { display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px; }
.rail-card i b { display:block;height:100%;width:0;background:linear-gradient(90deg,var(--v6-purple),#8c70ff);border-radius:inherit;transition:width .3s; }
.rail-user { display:flex;align-items:center;gap:9px;padding:10px 8px;color:#fff;border-top:1px solid rgba(255,255,255,.08); }
.rail-avatar { width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:#fff;color:#121827;font-weight:900;font-size:.78rem; }
.rail-user div { min-width:0;flex:1;display:grid; }
.rail-user strong { font-size:.78rem; }
.rail-user small { color:rgba(255,255,255,.45);font-size:.68rem; }
.rail-user button { border:0;background:none;color:rgba(255,255,255,.55);font-size:20px; }
.app-main { background:var(--v6-bg); }
.topbar {
  min-height:72px;padding:14px 22px;border-bottom:1px solid var(--v6-line);
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
}
.page-title .eyebrow { color:var(--v6-purple);letter-spacing:.08em;font-size:.72rem; }
.page-title h1 { font-size:1.25rem; }
.top-actions .theme-toggle,
.top-actions .icon-button { border-radius:11px;border-color:var(--v6-line);background:#fff;min-height:40px;box-shadow:none; }
.workspace { grid-template-columns:0 minmax(0,1fr); }
.sidebar { display:none; }
.content { padding:18px 22px 30px; }
.app-footer { display:none; }

/* Album page */
.gallery-surface { background:transparent;border:0;box-shadow:none;padding:0;overflow:visible; }
.album-hero {
  min-height:300px;border-radius:18px;box-shadow:var(--v6-shadow);
  background-position:center 40%;overflow:hidden;
}
.album-hero-overlay { background:linear-gradient(90deg,rgba(6,10,16,.78) 0%,rgba(6,10,16,.42) 48%,rgba(6,10,16,.10) 100%); }
.album-hero-content { padding:34px 32px;max-width:680px; }
.album-hero-content .eyebrow { color:#c9beff;letter-spacing:.06em;font-size:.72rem; }
.album-hero-content h2 { font-family:inherit;font-size:2.15rem;line-height:1.05;margin:8px 0 10px;letter-spacing:-.04em; }
.album-hero-content p { color:rgba(255,255,255,.74); }
.album-hero-stats-minimal { margin-top:12px; }
.hero-size-pill { border-radius:9px;padding:8px 11px;background:rgba(7,12,20,.42); }
.hero-actions { display:flex;gap:9px;flex-wrap:wrap;margin-top:18px; }
.hero-button { min-height:42px;border-radius:9px;padding:0 14px;font-size:.86rem;font-weight:800; }
.hero-button.accent { background:linear-gradient(135deg,var(--v6-purple),var(--v6-purple-2));color:#fff;box-shadow:0 12px 28px rgba(105,88,255,.28); }
.hero-button.secondary { background:rgba(8,12,19,.55);border:1px solid rgba(255,255,255,.16); }
.gallery-surface .toolbar.toolbar-pro {
  margin:10px 0 12px;padding:10px 12px;border-radius:14px;
  background:#fff;border:1px solid var(--v6-line);box-shadow:0 8px 24px rgba(30,40,70,.05);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.toolbar-pro .toolbar-main { display:flex;align-items:center;gap:12px;flex:1; }
.toolbar-pro .pathline { min-height:auto;padding:0;border:0;background:transparent;box-shadow:none;color:var(--v6-muted);font-size:.82rem;font-weight:700; }
.toolbar-pro .controls { display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end; }
.view-toggle-group { padding:3px;border-radius:9px;background:#f3f4f8;border:1px solid var(--v6-line); }
.view-toggle { min-width:34px;min-height:34px;border-radius:7px;font-size:14px; }
.view-toggle.active { background:#eceaff;color:var(--v6-purple);box-shadow:none; }
.search-control { max-width:320px;flex:1;border-radius:9px!important;min-height:38px!important;background:#f8f9fc!important;border-color:var(--v6-line)!important; }
.search-control input { min-height:36px!important;font-size:.82rem; }
#selectedOnlyButton,#sortSelect { min-height:38px!important;border-radius:9px!important;font-size:.82rem; }
.gallery-grid { padding:0;column-gap:10px;row-gap:10px; }
.gallery-grid.mode-grid { display:block;columns:4 220px; }
.gallery-grid.mode-wide { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.gallery-grid.mode-list { display:grid;grid-template-columns:1fr; }
.photo-card { break-inside:avoid;margin:0 0 10px;border:0;border-radius:11px;overflow:hidden;box-shadow:none;background:#fff; }
.photo-card:hover { transform:none;box-shadow:0 14px 30px rgba(24,31,55,.12); }
.photo-open img { aspect-ratio:auto;height:auto;max-height:none;object-fit:cover; }
.gallery-grid.mode-wide .photo-card img { aspect-ratio:4/3; }
.gallery-grid.mode-list .photo-card { grid-template-columns:230px minmax(0,1fr);border:1px solid var(--v6-line); }
.photo-overlay { opacity:0;transition:opacity .2s;padding:34px 14px 12px;background:linear-gradient(180deg,transparent,rgba(5,8,13,.74)); }
.photo-card:hover .photo-overlay { opacity:1; }
.photo-select { width:34px;height:34px;top:9px;right:9px;font-size:16px;opacity:.92; }
.status { border-radius:16px;border:1px dashed var(--v6-line);padding:42px;background:#fff;color:var(--v6-muted);text-align:center; }

/* Upload page */
.upload-panel { min-height:calc(100vh - 120px);display:grid;align-items:center; }
.upload-panel .drop-zone {
  max-width:1180px;width:100%;margin:0 auto;padding:0;border:0;border-radius:18px;
  background:linear-gradient(145deg,#0a111c,#111a29);box-shadow:0 28px 75px rgba(4,11,20,.28);color:#fff;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:0;overflow:hidden;
}
.upload-intro { grid-column:1/-1;padding:24px 28px 12px;display:flex;align-items:center;gap:16px; }
.upload-intro .drop-icon { width:48px;height:48px;border-radius:13px;background:rgba(105,88,255,.15);color:#a797ff;font-size:22px;display:grid;place-items:center; }
.upload-intro h2 { margin:2px 0 4px!important;font-size:1.55rem!important;letter-spacing:-.02em!important; }
.upload-intro p { margin:0!important;color:rgba(255,255,255,.55)!important;font-size:.86rem; }
.upload-form-pro { display:contents; }
.upload-grid { padding:18px 22px 24px 28px;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border-right:1px solid rgba(255,255,255,.07); }
.upload-grid > label { color:rgba(255,255,255,.78);font-size:.8rem; }
.upload-form-pro input,.upload-form-pro textarea { background:#121d2d!important;border:1px solid rgba(255,255,255,.08)!important;color:#fff!important;border-radius:9px!important; }
.upload-form-pro input::placeholder,.upload-form-pro textarea::placeholder { color:rgba(255,255,255,.32); }
.upload-sources { grid-template-columns:1fr 1fr; }
.source-card { background:#0d1725;border-color:rgba(255,255,255,.12);border-radius:12px;color:#fff;min-height:108px; }
.source-card:hover { border-color:rgba(139,114,255,.65);background:#101c2d; }
.source-card small { color:rgba(255,255,255,.43); }
.upload-queue-list { padding:18px 28px 18px 22px;display:grid;align-content:start;gap:10px;min-height:320px; }
.queue-empty { min-height:280px;border:1px dashed rgba(255,255,255,.12);border-radius:12px;display:grid;place-content:center;text-align:center;color:rgba(255,255,255,.45);gap:6px; }
.queue-empty strong { color:#fff; }
.upload-queue-item { display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:10px;background:rgba(255,255,255,.035); }
.queue-file-icon { width:36px;height:36px;border-radius:9px;background:rgba(105,88,255,.16);color:#b4a8ff;display:grid;place-items:center;font-size:.72rem;font-weight:900; }
.upload-queue-item div { min-width:0;display:grid;gap:4px; }
.upload-queue-item strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem; }
.upload-queue-item small,.queue-state { color:rgba(255,255,255,.45);font-size:.7rem; }
.upload-queue-item i { display:block;height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden; }
.upload-queue-item i b { display:block;height:100%;background:linear-gradient(90deg,var(--v6-purple),var(--v6-green)); }
.queue-more { color:rgba(255,255,255,.55);font-size:.78rem;text-align:center; }
.primary-upload { grid-column:2;padding:0 22px;margin:0 28px 24px 22px;min-height:44px;border-radius:9px;background:linear-gradient(135deg,var(--v6-purple),var(--v6-purple-2));box-shadow:none; }

/* Admin */
#adminModal.modal-backdrop { padding:0;background:#f4f6fb; }
.admin-modal.admin-modal-wide { width:100vw;height:100vh;max-height:none;border-radius:0;background:#f4f6fb; }
.admin-modal.admin-modal-wide > .modal-title-row { display:none; }
.admin-shell-pro { grid-template-columns:190px minmax(0,1fr);min-height:100vh; }
.admin-sidebar { background:linear-gradient(180deg,#07101b,#0a1522);padding:18px 12px;color:#fff;border:0; }
.admin-brand { padding:4px 8px 18px;border-bottom:1px solid rgba(255,255,255,.07); }
.admin-brand-icon { background:linear-gradient(135deg,var(--v6-purple),var(--v6-green));border-radius:10px; }
.admin-tab { border-radius:9px;color:rgba(255,255,255,.62);padding:11px 12px; }
.admin-tab:hover,.admin-tab.active { background:rgba(255,255,255,.08);color:#fff;box-shadow:none; }
.admin-user-card { margin-top:auto;border-top:1px solid rgba(255,255,255,.08); }
.admin-content { padding:0 22px 28px;max-height:none;background:#f4f6fb; }
.admin-pagebar { min-height:70px;background:#fff;margin:0 -22px 18px;padding:0 22px;border-bottom:1px solid var(--v6-line); }
.admin-pagebar h3 { font-size:1.1rem; }
.admin-section-heading { margin-bottom:14px; }
.dashboard-cards,.stats-kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.dashboard-cards article,.stats-kpi-grid article,.dashboard-panel,.analytics-card,.analytics-table-card { border-radius:14px;border:1px solid var(--v6-line);background:#fff;box-shadow:0 8px 24px rgba(29,37,66,.04); }
.dashboard-cards article,.stats-kpi-grid article { padding:16px; }
.dashboard-cards strong,.stats-kpi-grid strong { font-size:1.7rem; }
.dashboard-grid,.analytics-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.analytics-grid { margin:14px 0; }
.analytics-card { padding:16px;min-height:260px; }
.analytics-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.analytics-head h4,.analytics-table-card h4 { margin:0 0 3px;font-size:.95rem; }
.analytics-head span { color:var(--v6-muted);font-size:.76rem; }
.analytics-head b { font-size:1.1rem; }
.analytics-card svg { width:100%;height:180px;margin-top:12px;overflow:visible; }
.analytics-card polyline { fill:none;stroke:var(--v6-purple);stroke-width:2;vector-effect:non-scaling-stroke; }
.analytics-card:nth-child(2) polyline { stroke:var(--v6-green); }
.analytics-table-card { padding:16px; }
.analytics-table { display:grid;margin-top:10px; }
.analytics-table > div { display:grid;grid-template-columns:32px minmax(0,1fr) 110px 110px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--v6-line);font-size:.8rem; }
.analytics-table em { color:var(--v6-muted);font-style:normal;text-align:right; }
.modern-admin-list { grid-template-columns:1fr;gap:0;border:1px solid var(--v6-line);border-radius:14px;overflow:hidden;background:#fff; }
.admin-album-card { grid-template-columns:74px minmax(0,1fr);border:0;border-bottom:1px solid var(--v6-line);border-radius:0;min-height:74px; }
.admin-cover { min-height:74px; }
.admin-album-body { display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:10px 14px; }
.admin-album-heading { align-items:center; }
.album-metrics { margin:0;white-space:nowrap; }
.admin-item-actions { display:flex;gap:6px; }
.admin-item-actions .icon-button { min-height:34px;padding:0 10px;border-radius:8px;font-size:.75rem; }
.edit-album-modal { width:min(980px,96vw);max-height:92vh;overflow:auto;border-radius:16px; }
.edit-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Lightbox */
#lightbox.modal-backdrop { padding:0;background:rgba(2,6,12,.96); }
.lightbox { width:100vw;height:100vh;border-radius:0;grid-template-rows:64px minmax(0,1fr) 96px;background:#050a11; }
.lightbox-top { background:linear-gradient(180deg,rgba(5,9,15,.98),rgba(5,9,15,.78));border:0; }
.lightbox figure { padding:12px 24px 18px;background:radial-gradient(circle at center,rgba(36,43,58,.22),#050a11 72%); }
.filmstrip { height:96px;padding:10px 16px;background:linear-gradient(180deg,rgba(5,10,17,.58),rgba(5,10,17,.98));border:0; }
.filmstrip button { width:76px;min-width:76px;height:76px;border-radius:8px; }
.lightbox-bottom-controls { position:absolute;top:12px;right:250px;z-index:8;height:auto;background:transparent;border:0;padding:0; }
.lightbox-bottom-controls button { width:34px;min-width:34px;height:34px;border-radius:8px; }
#zoomIndicator { min-width:58px;font-size:.78rem; }
.nav-button { background:rgba(10,15,23,.58);backdrop-filter:blur(8px); }

/* Skeletons */
body[data-view="gallery"] .photo-card img[src=""] { background:linear-gradient(90deg,#eef0f5 25%,#f8f9fb 50%,#eef0f5 75%);background-size:200% 100%;animation:skeleton 1.4s infinite; }
@keyframes skeleton { from{background-position:200% 0} to{background-position:-200% 0} }

@media (max-width: 1000px) {
  .shell { grid-template-columns:72px minmax(0,1fr);background:linear-gradient(90deg,var(--v6-dark) 0 72px,var(--v6-bg) 72px); }
  .app-rail { width:72px;padding:16px 8px; }
  .rail-brand div,.rail-item span:last-child,.rail-card,.rail-user div,.rail-user button { display:none; }
  .rail-brand { justify-content:center; }
  .rail-item { justify-content:center;padding:0; }
  .content { padding:14px; }
  .gallery-grid.mode-grid { columns:3 200px; }
  .admin-shell-pro { grid-template-columns:72px 1fr; }
  .admin-brand div,.admin-tab { font-size:0;justify-content:center; }
  .upload-panel .drop-zone { grid-template-columns:1fr; }
  .upload-grid { border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:18px 22px; }
  .upload-queue-list { min-height:220px; }
  .primary-upload { grid-column:1;margin:0 22px 22px; }
}
@media (max-width: 720px) {
  .shell { grid-template-columns:1fr;background:var(--v6-bg); }
  .app-rail { position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;min-height:58px;z-index:80;display:block;padding:6px 10px;background:#07101b; }
  .rail-brand,.rail-footer-stack { display:none; }
  .rail-nav { display:flex;justify-content:space-around;gap:4px; }
  .rail-item { width:auto;min-width:54px;height:46px; }
  .topbar { padding:10px 12px; }
  .top-actions .theme-toggle span:last-child,.top-actions .icon-button span:last-child { display:none; }
  .content { padding:10px 10px 78px; }
  .album-hero { min-height:250px;border-radius:14px; }
  .album-hero-content { padding:24px 20px; }
  .album-hero-content h2 { font-size:1.65rem; }
  .gallery-surface .toolbar.toolbar-pro { align-items:stretch;flex-direction:column; }
  .toolbar-pro .controls { width:100%;flex-wrap:wrap;justify-content:stretch; }
  .search-control { max-width:none;min-width:100%; }
  .gallery-grid.mode-grid { columns:2 150px; }
  .photo-overlay { opacity:1; }
  .upload-panel .drop-zone { display:block;border-radius:14px; }
  .upload-grid { grid-template-columns:1fr; }
  .upload-sources { grid-template-columns:1fr; }
  .admin-content { padding:0 10px 80px; }
  .admin-pagebar { margin:0 -10px 12px;padding:0 12px; }
  .dashboard-cards,.stats-kpi-grid,.dashboard-grid,.analytics-grid { grid-template-columns:1fr 1fr; }
  .analytics-table > div { grid-template-columns:28px minmax(0,1fr); }
  .analytics-table em { display:none; }
  .lightbox-bottom-controls { right:12px;top:12px; }
  .lightbox-actions .button-link { display:none; }
}

/* v6.1 — standalone admin page, persistent session and responsive layout */
body.admin-page {
  overflow: auto;
  background: #f4f6fb;
}
body.admin-page > .shell,
body.admin-page > .floating-theme-toggle,
body.admin-page > #progressModal,
body.admin-page > #lightbox,
body.admin-page > #shareModal,
body.admin-page > #albumEditModal[hidden] {
  display: none !important;
}
body.admin-page #adminModal.modal-backdrop {
  position: static !important;
  inset: auto !important;
  display: block !important;
  min-height: 100vh;
  width: 100%;
  padding: 0 !important;
  background: #f4f6fb !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
body.admin-page #adminModal .admin-modal-wide {
  position: static;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  height: auto;
  max-height: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}
body.admin-page #adminModal > .admin-modal-wide > .modal-title-row {
  display: none !important;
}
body.admin-page #adminLoginForm {
  min-height: 100vh;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  display: grid;
  place-content: center;
  gap: 16px;
  padding: 24px;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 20% 15%, rgba(108,92,255,.14), transparent 32%),
    linear-gradient(135deg, #07111e, #101c2d) !important;
  box-shadow: none !important;
}
body.admin-page #adminLoginForm label,
body.admin-page #adminLoginForm button {
  width: min(420px, calc(100vw - 40px));
}
body.admin-page #adminLoginForm label {
  display: grid;
  gap: 9px;
  color: #fff;
  font-weight: 750;
}
body.admin-page #adminLoginForm input {
  min-height: 50px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 0 14px;
}
body.admin-page #adminPanel,
body.admin-page #adminPanel .admin-shell-pro {
  min-height: 100vh;
  height: auto;
}
body.admin-page .admin-shell-pro {
  grid-template-columns: 224px minmax(0,1fr) !important;
  width: 100%;
  background: #f4f6fb;
}
body.admin-page .admin-sidebar {
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: start;
}
body.admin-page .admin-content {
  max-height: none !important;
  height: auto;
  min-width: 0;
  overflow: visible !important;
  padding: 0 28px 36px;
}
body.admin-page .admin-pagebar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244,246,251,.9);
  backdrop-filter: blur(18px);
}

/* Public layout — desktop */
.shell {
  grid-template-columns: 204px minmax(0,1fr) !important;
}
.app-rail {
  width: 204px;
  min-width: 204px;
}
.app-main,
.content,
.gallery-surface,
.album-hero,
.toolbar-pro,
.gallery-grid {
  min-width: 0;
}
.workspace {
  grid-template-columns: minmax(0,1fr) !important;
}
.sidebar {
  display: none !important;
}
.content {
  width: 100%;
  padding: 24px;
}
.gallery-surface {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}
.album-hero {
  width: 100%;
}
.toolbar-pro {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px 18px;
}
.toolbar-pro .toolbar-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.toolbar-pro .pathline {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toolbar-pro .controls {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.toolbar-pro .search-control {
  width: clamp(220px, 28vw, 390px);
  min-width: 0;
}
.toolbar-pro select {
  width: auto;
  min-width: 150px;
}
.gallery-grid.mode-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr)) !important;
}
.gallery-grid.mode-wide {
  grid-template-columns: repeat(auto-fill, minmax(320px,1fr)) !important;
}

@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 84px minmax(0,1fr) !important;
  }
  .app-rail {
    width: 84px;
    min-width: 84px;
    padding: 18px 10px;
  }
  .rail-brand > div,
  .rail-item span:last-child,
  .rail-card,
  .rail-user-card > div {
    display: none !important;
  }
  .rail-brand,
  .rail-item,
  .rail-user-card {
    justify-content: center;
  }
  .topbar {
    padding: 14px 18px;
  }
  .content {
    padding: 18px;
  }
  .toolbar-pro {
    grid-template-columns: 1fr;
  }
  .toolbar-pro .controls {
    justify-content: stretch;
  }
  .toolbar-pro .search-control {
    flex: 1;
    width: auto;
  }
  body.admin-page .admin-shell-pro {
    grid-template-columns: 82px minmax(0,1fr) !important;
  }
  body.admin-page .admin-brand div,
  body.admin-page .admin-tab,
  body.admin-page .admin-user-card div {
    font-size: 0;
  }
  body.admin-page .admin-brand div,
  body.admin-page .admin-user-card div {
    display: none;
  }
  body.admin-page .admin-content {
    padding: 0 18px 28px;
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 72px;
  }
  .shell {
    display: block !important;
    min-height: 100vh;
    background: #f4f6fb !important;
  }
  .app-rail {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    z-index: 100;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    height: 68px;
    padding: 8px 12px;
    display: block !important;
    background: rgba(7,16,29,.96);
    backdrop-filter: blur(18px);
  }
  .rail-brand,
  .rail-card,
  .rail-user-card {
    display: none !important;
  }
  .rail-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 4px;
    height: 100%;
  }
  .rail-item {
    min-height: 50px;
    height: 50px;
    padding: 4px;
    display: grid;
    place-items: center;
    gap: 2px;
    font-size: .72rem;
  }
  .rail-item span:last-child {
    display: block !important;
    font-size: .68rem;
  }
  .app-main {
    display: block;
    min-height: 100vh;
  }
  .topbar {
    position: sticky;
    top: 0;
    min-height: 62px;
    padding: 10px 12px;
    flex-wrap: nowrap;
  }
  .page-title .eyebrow {
    display: none;
  }
  .page-title h1 {
    font-size: 1.15rem;
  }
  .top-actions {
    gap: 6px;
    flex-wrap: nowrap;
  }
  .top-actions .icon-button,
  .top-actions .theme-toggle {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 12px;
  }
  .top-actions .icon-button span:last-child,
  .top-actions .theme-toggle span:last-child {
    display: none;
  }
  .content {
    padding: 10px;
  }
  .album-hero {
    min-height: 360px !important;
    border-radius: 18px;
  }
  .album-hero-content {
    padding: 24px 20px !important;
    align-self: end;
  }
  .album-hero-content h2 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hero-actions .hero-button:last-child {
    grid-column: 1 / -1;
  }
  .toolbar-pro {
    margin: 10px 0 !important;
    padding: 12px !important;
    gap: 10px;
    border-radius: 16px !important;
  }
  .toolbar-pro .toolbar-main {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .toolbar-pro .controls {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .toolbar-pro .search-control {
    width: 100%;
    grid-column: 1 / -1;
  }
  .toolbar-pro #selectedOnlyButton,
  .toolbar-pro select {
    width: 100%;
    min-width: 0;
  }
  .view-toggle-group {
    justify-self: end;
  }
  .gallery-grid.mode-grid,
  .gallery-grid.mode-wide {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .photo-card {
    border-radius: 12px !important;
  }
  .photo-overlay {
    display: none !important;
  }
  .photo-select {
    width: 36px;
    height: 36px;
    top: 8px;
    right: 8px;
  }
  .gallery-grid.mode-list .photo-card {
    grid-template-columns: 110px minmax(0,1fr) !important;
  }
  body.admin-page {
    padding-bottom: 0;
  }
  body.admin-page .admin-shell-pro {
    display: block !important;
  }
  body.admin-page .admin-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: auto;
    height: auto;
    padding: 10px;
  }
  body.admin-page .admin-brand,
  body.admin-page .admin-user-card {
    display: none !important;
  }
  body.admin-page .admin-nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 6px;
    border: 0;
    padding: 0;
  }
  body.admin-page .admin-tab {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 42px;
    padding: 0 12px;
    font-size: .8rem !important;
  }
  body.admin-page .admin-content {
    padding: 0 10px 24px;
  }
  body.admin-page .admin-pagebar {
    top: 62px;
    padding: 12px 0;
  }
  body.admin-page .admin-actions .admin-secondary-action {
    display: none;
  }
  .dashboard-cards,
  .dashboard-grid,
  .dashboard-lower,
  .modern-admin-list,
  .system-grid,
  .storage-overview {
    grid-template-columns: 1fr !important;
  }
  .admin-filter-row {
    flex-direction: column;
  }
  .admin-album-card {
    grid-template-columns: 100px minmax(0,1fr) !important;
  }
  .admin-item-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .edit-album-modal,
  .share-dialog {
    width: 100vw !important;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0 !important;
    overflow-y: auto;
  }
  .edit-layout,
  .edit-grid,
  .edit-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  .gallery-grid.mode-grid,
  .gallery-grid.mode-wide {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-actions {
    grid-template-columns: 1fr;
  }
  .hero-actions .hero-button:last-child {
    grid-column: auto;
  }
  .toolbar-pro .toolbar-main {
    grid-template-columns: 1fr;
  }
  .view-toggle-group {
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }
}

/* v6.2 hotfix — repair public upload landing after standalone-admin refactor */
body:not(.has-album) .shell {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  min-width: 0 !important;
  background:
    radial-gradient(circle at 15% 15%, rgba(105,88,255,.12), transparent 32%),
    radial-gradient(circle at 88% 82%, rgba(44,191,159,.10), transparent 34%),
    #f4f6fb !important;
}
body:not(.has-album) .app-main {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
body:not(.has-album) .workspace {
  display: block !important;
  width: 100% !important;
  min-height: 100vh !important;
}
body:not(.has-album) .content {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  padding: 32px !important;
  background: transparent !important;
}
body:not(.has-album) .upload-panel {
  display: block !important;
  width: min(1120px, 100%) !important;
  min-height: 0 !important;
}
body:not(.has-album) .drop-zone {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 34px !important;
  overflow: visible !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #0a111c, #111a29) !important;
  color: #fff !important;
  box-shadow: 0 30px 80px rgba(4,11,20,.30) !important;
}
body:not(.has-album) .drop-zone > .drop-icon {
  width: 58px !important;
  height: 58px !important;
  margin: 0 auto 14px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: rgba(105,88,255,.16) !important;
  color: #b5aaff !important;
  font-size: 26px !important;
}
body:not(.has-album) .drop-zone > .eyebrow,
body:not(.has-album) .drop-zone > h2,
body:not(.has-album) .drop-zone > p {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body:not(.has-album) .drop-zone > .eyebrow {
  color: #a797ff !important;
}
body:not(.has-album) .drop-zone > h2 {
  max-width: 760px !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  color: #fff !important;
}
body:not(.has-album) .drop-zone > p {
  max-width: 700px !important;
  margin-bottom: 28px !important;
  color: rgba(255,255,255,.58) !important;
}
body:not(.has-album) .upload-form-pro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
}
body:not(.has-album) .upload-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 24px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.035) !important;
}
body:not(.has-album) .upload-grid > label {
  display: grid !important;
  gap: 8px !important;
  color: rgba(255,255,255,.78) !important;
  font-weight: 750 !important;
}
body:not(.has-album) .upload-grid .full-span {
  grid-column: 1 / -1 !important;
}
body:not(.has-album) .upload-grid input,
body:not(.has-album) .upload-grid textarea {
  width: 100% !important;
  min-width: 0 !important;
  color: #fff !important;
  background: #121d2d !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
}
body:not(.has-album) .upload-sources {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
}
body:not(.has-album) .source-card {
  min-height: 126px !important;
  display: grid !important;
  place-content: center !important;
  text-align: center !important;
  border-radius: 14px !important;
}
body:not(.has-album) .queue-preview {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 12px !important;
}
body:not(.has-album) .queue-preview > div {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.78) !important;
}
body:not(.has-album) .primary-upload {
  grid-column: auto !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 50px !important;
  border-radius: 12px !important;
}
body:not(.has-album) .floating-theme-toggle {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 50 !important;
}
@media (max-width: 760px) {
  body:not(.has-album) { padding-bottom: 0 !important; }
  body:not(.has-album) .content { padding: 14px !important; }
  body:not(.has-album) .drop-zone { padding: 24px 16px !important; border-radius: 18px !important; }
  body:not(.has-album) .upload-grid,
  body:not(.has-album) .upload-sources,
  body:not(.has-album) .queue-preview {
    grid-template-columns: 1fr !important;
  }
  body:not(.has-album) .upload-grid { padding: 16px !important; }
  body:not(.has-album) .drop-zone > h2 { font-size: clamp(2rem, 12vw, 3rem) !important; }
}