:root {
  color-scheme: dark;
  --ink: #f3f2ed;
  --muted: #9b9d95;
  --bg: #111210;
  --surface: #181a17;
  --line: #30332d;
  --accent: #c97959;
  --danger: #e29a82;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 86% 8%, rgba(201, 121, 89, .12), transparent 32rem),
    var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }

svg {
  width: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-label {
  margin: 0 0 1.25rem;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
}

.login-page { min-height: 100dvh; }

.login-shell {
  width: min(1120px, calc(100% - 48px));
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: center;
  gap: clamp(3rem, 10vw, 9rem);
  padding: 5rem 0;
}

.brand-mark {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 4.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: -.08em;
}

.login-copy h1 {
  max-width: 9ch;
  margin: 0;
  font-size: clamp(3rem, 7vw, 6.7rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.login-intro {
  max-width: 34rem;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.security-note {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #c5c6c0;
  font-size: .78rem;
}

.security-note svg { width: 1rem; }

.login-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: rgba(24, 26, 23, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 30px 80px rgba(5, 6, 5, .24);
}

.login-form { display: grid; gap: 2rem; }
.field-group { display: grid; gap: .65rem; }
.field-group label { font-size: .82rem; font-weight: 650; }

.pin-wrap { position: relative; }
.pin-wrap input {
  width: 100%;
  height: 3.75rem;
  padding: 0 3.5rem 0 1rem;
  border: 1px solid #3a3d36;
  border-radius: .8rem;
  outline: none;
  background: #10110f;
  color: var(--ink);
  font-size: 1.35rem;
  letter-spacing: .25em;
  transition: border-color .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1);
}

.pin-wrap input:focus { border-color: var(--accent); }
.reveal-button {
  position: absolute;
  inset: 0 .5rem 0 auto;
  width: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.field-help, .form-error { margin: 0; font-size: .72rem; }
.field-help { color: #777a73; }
.form-error { color: var(--danger); }

.primary-button {
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem 0 1.4rem;
  border: 0;
  border-radius: .8rem;
  background: var(--accent);
  color: #17100d;
  font-weight: 750;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), filter .25s cubic-bezier(.16, 1, .3, 1);
}

.primary-button:hover { filter: brightness(1.08); }
.primary-button:active { transform: scale(.98); }
.primary-button:disabled { opacity: .5; cursor: not-allowed; }

.stats-login-shell .login-copy h1 { max-width: 10ch; }
.stats-shell {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 0 6rem;
}
.stats-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
}
.stats-heading h1 { margin: 0; font-size: clamp(2.8rem, 7vw, 6.5rem); line-height: .9; letter-spacing: -.07em; }
.stats-heading > p { margin: 0; color: #d0d1cc; font-size: .72rem; line-height: 1.7; text-align: right; }
.stats-heading > p span { color: var(--muted); }
.stats-summary {
  margin: clamp(3rem, 7vw, 6rem) 0 5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-summary > div { padding: 1.5rem 1.25rem; border-right: 1px solid var(--line); }
.stats-summary > div:first-child { padding-left: 0; }
.stats-summary > div:last-child { border-right: 0; }
.stats-summary strong { display: block; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.06em; }
.stats-summary span { display: block; margin-top: .6rem; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.stats-section { margin-top: 5rem; }
.stats-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.stats-section-heading h2 { margin: 0; font-size: 1.2rem; }
.stats-section-heading p { margin: 0; color: var(--muted); font-size: .7rem; }
.stats-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.stats-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.stats-table th, .stats-table td { padding: 1rem .75rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.stats-table th:first-child, .stats-table td:first-child { padding-left: 0; }
.stats-table th { color: #767970; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.stats-table td { color: #d2d3cd; }
.video-ranking { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.video-ranking li { display: flex; justify-content: space-between; gap: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: .78rem; }
.video-ranking strong { color: var(--accent); }
.stats-muted, .stats-footnote { color: var(--muted); font-size: .7rem; line-height: 1.6; }
.stats-footnote { margin: 5rem 0 0; max-width: 70ch; }
.stats-empty { padding: 4rem 1.5rem; }

.topbar {
  width: min(1380px, calc(100% - 48px));
  height: 5.5rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
  letter-spacing: .04em;
}
.wordmark span { margin-right: .65rem; color: var(--accent); font-weight: 850; }

.logout-button {
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid #555950;
  background: transparent;
  color: #b7b9b2;
  font-size: .72rem;
  cursor: pointer;
}

.gallery-shell {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 8rem) 0 7rem;
}

.gallery-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
}

.gallery-heading h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .88;
  letter-spacing: -.075em;
}

.gallery-heading > p {
  margin: 0;
  color: #d0d1cc;
  font-size: .78rem;
  line-height: 1.8;
  text-align: right;
}
.gallery-heading > p span { color: var(--muted); }

.toolbar {
  margin: clamp(3rem, 7vw, 6rem) 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.filter-group { display: flex; gap: 1.25rem; }
.filter-button {
  padding: .5rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: .72rem;
  cursor: pointer;
}
.filter-button.active { border-color: var(--accent); color: var(--ink); }

.search-field {
  width: min(100%, 17rem);
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .8rem;
  border-bottom: 1px solid #43463f;
  color: var(--muted);
}
.search-field svg { width: 1rem; flex: 0 0 auto; }
.search-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: .75rem;
}
.search-field input::placeholder { color: #6e716a; }

.media-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.8rem);
}

.media-card {
  min-width: 0;
  flex: 1 1 300px;
  max-width: 430px;
  opacity: 0;
  transform: translateY(16px);
  animation: reveal .6s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: min(calc(var(--i) * 55ms), 600ms);
}

@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

.media-frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #0b0c0a;
}

.media-frame video, .media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-open {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.image-open img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.image-open:hover img { transform: scale(1.025); }

.media-meta { padding: 1rem .15rem 0; }
.media-meta h2 {
  margin: 0;
  overflow: hidden;
  color: #e7e7e2;
  font-size: .88rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-meta p {
  margin: .45rem 0 0;
  color: #777a73;
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.media-meta p span::before { content: " / "; }

.media-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.media-link, .back-link {
  padding: .45rem 0;
  border-bottom: 1px solid #555950;
  color: #c8c9c3;
  font-size: .68rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s cubic-bezier(.16, 1, .3, 1), color .25s cubic-bezier(.16, 1, .3, 1);
}

.media-link:hover, .back-link:hover { border-color: var(--accent); color: var(--ink); }
.media-link:active, .back-link:active { transform: translateY(1px); }

.watch-page {
  min-height: 100dvh;
  overflow-x: hidden;
}

.watch-shell {
  width: min(1600px, calc(100% - 48px));
  min-height: calc(100dvh - 5.5rem);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1.5rem;
  padding: 2rem 0 1.5rem;
}

.watch-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.watch-heading .section-label { margin-bottom: .55rem; }
.watch-heading h1 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.share-button {
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid #555950;
  background: transparent;
  color: #c8c9c3;
  font-size: .72rem;
  cursor: pointer;
}
.share-button:hover { border-color: var(--accent); color: var(--ink); }
.share-button:active { transform: translateY(1px); }

.watch-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #0b0c0a;
}

.watch-stage video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(100dvh - 13rem);
  object-fit: contain;
}

.watch-stage img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(100dvh - 13rem);
  object-fit: contain;
}

.share-status {
  min-height: 1rem;
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  text-align: right;
}

.empty-state {
  padding: 6rem 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.empty-state h2 { margin: 0; font-size: 1.3rem; }
.empty-state p { margin: .75rem 0 0; color: var(--muted); font-size: .8rem; }

.image-dialog {
  max-width: min(94vw, 1200px);
  max-height: 92dvh;
  padding: 0;
  border: 1px solid #3d4039;
  border-radius: 1rem;
  background: #10110f;
  color: var(--ink);
}
.image-dialog::backdrop { background: rgba(7, 8, 7, .9); backdrop-filter: blur(10px); }
.image-dialog img { display: block; max-width: 92vw; max-height: 78dvh; object-fit: contain; }
.image-dialog p { margin: 0; padding: 1rem 1.25rem; color: var(--muted); font-size: .75rem; }
.dialog-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: .65rem .8rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .5rem;
  background: rgba(17,18,16,.82);
  cursor: pointer;
}

[hidden] { display: none !important; }

@media (max-width: 767px) {
  .login-shell {
    width: min(100% - 32px, 32rem);
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 2.5rem 0;
  }
  .brand-mark { margin-bottom: 3rem; }
  .login-copy h1 { font-size: clamp(3.2rem, 16vw, 5rem); }
  .login-panel { padding: 1.25rem; border-radius: 1.15rem; }
  .topbar, .gallery-shell, .watch-shell, .stats-shell { width: calc(100% - 32px); }
  .gallery-shell { padding: 4rem 0; }
  .gallery-heading { grid-template-columns: 1fr; }
  .gallery-heading > p { text-align: left; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-field { width: 100%; max-width: none; }
  .media-grid { gap: 2rem; }
  .media-card { flex-basis: 100%; max-width: none; }
  .media-frame { border-radius: .75rem; }
  .watch-topbar { height: 4.5rem; }
  .watch-shell {
    min-height: calc(100dvh - 4.5rem);
    gap: 1rem;
    padding: 1.25rem 0 1rem;
  }
  .watch-heading { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .watch-stage { border-radius: .75rem; }
  .watch-stage video { max-height: calc(100dvh - 13.5rem); }
  .stats-heading { grid-template-columns: 1fr; }
  .stats-heading > p { text-align: left; }
  .stats-summary { grid-template-columns: 1fr 1fr; }
  .stats-summary > div { border-bottom: 1px solid var(--line); }
  .stats-summary > div:nth-child(2) { border-right: 0; }
  .stats-summary > div:nth-child(3), .stats-summary > div:nth-child(4) { border-bottom: 0; }
  .stats-summary > div:nth-child(3) { padding-left: 0; }
  .stats-section-heading { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .stats-table, .stats-table tbody, .stats-table tr, .stats-table td { display: block; }
  .stats-table thead { display: none; }
  .stats-table tr { padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .stats-table td { display: flex; justify-content: space-between; gap: 1.5rem; padding: .45rem 0; border: 0; white-space: normal; text-align: right; }
  .stats-table td::before { content: attr(data-label); color: #767970; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}