/* ───────────────────────────────────────────────────────────
   event-cloud — DESKTOP styles (shares tokens from styles.css)
   Public, shareable memories gallery
   ─────────────────────────────────────────────────────────── */

.dk-page {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  letter-spacing: -0.005em;
  overflow: hidden;
}
.dk-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.dk-scroll::-webkit-scrollbar { width: 10px; }
.dk-scroll::-webkit-scrollbar-thumb { background: #DDD4C5; border-radius: 10px; border: 3px solid var(--bg); }

.dk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 44px; }

/* ── top bar ──────────────────────────────────────────────── */
.dk-topbar {
  flex-shrink: 0; height: 66px;
  display: flex; align-items: center; gap: 20px;
  padding: 0 28px;
  background: rgba(250,247,241,.86);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 6;
}
.dk-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dk-brand__mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
}
.dk-brand__name { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.dk-divider { width: 1px; height: 26px; background: var(--line); }
.dk-event { line-height: 1.15; }
.dk-event__n { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.dk-event__d { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 1px; }
.dk-spacer { flex: 1; }

.dk-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 0 13px; height: 40px; width: 230px; transition: border-color .15s ease, box-shadow .15s ease;
}
.dk-search:focus-within { border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(42,37,30,.06); }
.dk-search input { border: none; outline: none; background: transparent; font-family: var(--font); font-size: 14px; color: var(--ink); width: 100%; }
.dk-search input::placeholder { color: var(--ink-3); }

.dk-avatar {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  box-shadow: var(--shadow-sm); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--bg-2);
}
.dk-rolepill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px; cursor: pointer; transition: all .15s ease;
}
.dk-rolepill.is-admin { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* ── hero ─────────────────────────────────────────────────── */
.dk-hero {
  position: relative; height: 380px; overflow: hidden;
  display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--line);
}
.dk-hero image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.dk-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(28,22,16,.62) 0%, rgba(28,22,16,.22) 45%, rgba(28,22,16,.05) 70%),
              linear-gradient(transparent 50%, rgba(28,22,16,.5));
}
.dk-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: 40px; color: #fff; }
.dk-hero__eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.dk-hero h1 { font-size: 58px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin: 12px 0 0; }
.dk-hero__sub { font-size: 16px; opacity: .92; margin: 14px 0 0; max-width: 46ch; line-height: 1.5; }
.dk-hero__row { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.dk-hero__stats { display: flex; gap: 18px; margin-left: 4px; }
.dk-hero__stat { color: #fff; }
.dk-hero__stat b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.dk-hero__stat span { font-size: 12.5px; opacity: .8; margin-left: 6px; }
.ec-btn--onhero { background: rgba(255,255,255,.92); color: var(--ink); }
.ec-btn--onhero:hover { background: #fff; }
.ec-btn--ghosthero { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.ec-btn--ghosthero:hover { background: rgba(255,255,255,.2); }

/* ── sections + catalog grid ──────────────────────────────── */
.dk-section { padding: 40px 0 8px; }
.dk-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.dk-section-head h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.025em; margin: 0; display: flex; align-items: center; gap: 9px; }
.dk-section-head p { font-size: 13.5px; color: var(--ink-3); margin: 0; }

.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 24px; }
.dk-card { cursor: pointer; }
.dk-card__cover {
  position: relative; width: 100%; aspect-ratio: 4/5;
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.dk-card:hover .dk-card__cover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.dk-card__cover.is-locked .ec-ph { filter: blur(16px) saturate(.78) brightness(1.04); transform: scale(1.2); }
.dk-card__chip { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.dk-card__chip--tr { left: auto; right: 12px; top: 12px; bottom: auto; }
.dk-card__sel { position: absolute; right: 12px; top: 12px; z-index: 4; }
.dk-card.is-selected .dk-card__cover { outline: 3px solid var(--accent); outline-offset: 2px; }
.dk-card__meta { padding: 13px 2px 0; }
.dk-card__title { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.dk-card__sub { font-size: 12.5px; color: var(--ink-3); margin: 3px 0 0; }

/* ── catalog view ─────────────────────────────────────────── */
.dk-catbar {
  display: flex; align-items: center; gap: 16px;
  padding: 30px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.dk-catbar__main { flex: 1; min-width: 0; }
.dk-catbar__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.dk-catbar h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; margin: 6px 0 0; }
.dk-catbar__acts { display: flex; gap: 9px; align-items: center; }

.dk-back {
  width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--card); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); transition: background .15s ease; flex-shrink: 0;
}
.dk-back:hover { background: var(--card-2); }

/* ── masonry ──────────────────────────────────────────────── */
.dk-masonry { column-count: 4; column-gap: 14px; padding-bottom: 50px; }
@media (max-width: 1080px) { .dk-masonry { column-count: 3; } }
.dk-tile {
  position: relative; break-inside: avoid; margin-bottom: 14px;
  border-radius: var(--r-tile); overflow: hidden; cursor: pointer;
}
.dk-tile__media { width: 100%; transition: transform .35s ease; }
.dk-tile:hover .dk-tile__media { transform: scale(1.04); }
.dk-tile__cap {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end;
  padding: 12px; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(transparent 55%, rgba(28,22,16,.5));
  pointer-events: none;
}
.dk-tile:hover .dk-tile__cap { opacity: 1; }
.dk-tile__fn { font-family: var(--mono); font-size: 11px; color: #fff; letter-spacing: .03em; }
.dk-tile__vid { position: absolute; left: 10px; bottom: 10px; z-index: 3; }
.dk-tile__check { position: absolute; right: 10px; top: 10px; z-index: 4; opacity: 0; transform: scale(.7); transition: all .14s ease; }
.dk-masonry.is-selecting .dk-tile__check { opacity: 1; transform: scale(1); }
.dk-tile.is-selected { outline: 3px solid var(--accent); outline-offset: -3px; }
.dk-tile.is-selected .dk-tile__media { filter: brightness(.85); }

/* ── floating bulk toolbar ────────────────────────────────── */
.dk-toolbar {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 9px 10px; animation: dkBarUp .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes dkBarUp { from { transform: translate(-50%, 16px); } to { transform: translate(-50%, 0); } }
.dk-toolbar__count { font-size: 13.5px; font-weight: 600; padding: 0 12px 0 8px; }
.dk-tbtn {
  display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent;
  font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--ink);
  padding: 9px 14px; border-radius: 10px; cursor: pointer; transition: background .14s ease;
}
.dk-tbtn:hover { background: rgba(42,37,30,.06); }
.dk-tbtn--danger { color: #A23E33; }
.dk-tbtn--div { width: 1px; height: 24px; background: var(--line); margin: 0 2px; }

/* ── modals ───────────────────────────────────────────────── */
.dk-overlay {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(36,30,22,.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  animation: dkFade .2s ease;
}
@keyframes dkFade { from { transform: translateY(4px); } to { transform: none; } }
.dk-dialog {
  width: 100%; max-width: 460px; max-height: 86%; display: flex; flex-direction: column;
  background: var(--bg); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden;
  animation: dkPop .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes dkPop { from { transform: translateY(10px) scale(.98); } to { transform: none; } }
.dk-dialog__top { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 6px; }
.dk-dialog__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.dk-dialog__body { padding: 8px 22px 22px; overflow-y: auto; }

/* ── lightbox (desktop) ───────────────────────────────────── */
.dk-lb {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(245,241,234,.94); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: flex; flex-direction: column; animation: dkFade .2s ease;
}
.dk-lb__top { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; }
.dk-lb__counter { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.dk-lb__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 80px 10px; position: relative; min-height: 0; }
.dk-lb__media { max-height: 100%; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.dk-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); transition: transform .15s ease, background .15s ease;
}
.dk-lb__nav:hover { background: var(--card-2); }
.dk-lb__nav:active { transform: translateY(-50%) scale(.92); }
.dk-lb__nav.prev { left: 22px; }
.dk-lb__nav.next { right: 22px; }
.dk-lb__bar {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 16px 24px 26px;
}
.dk-lb__info { text-align: left; }
.dk-lb__fn { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: .03em; }
.dk-lb__by { font-size: 15px; font-weight: 600; margin-top: 2px; }
.dk-lb__date { font-size: 12.5px; color: var(--ink-3); }
.dk-lb__acts { display: flex; gap: 9px; }

/* unlock hero reused via .ec-unlock-* ; dropzone via .ec-* */
.dk-empty { text-align: center; color: var(--ink-3); padding: 80px 20px; }

.dk-fade { animation: dkIn .3s ease both; }
@keyframes dkIn { from { transform: translateY(8px); } to { transform: none; } }