:root {
  --album-bg: #f2f1ed;
  --album-panel: #fff;
  --album-ink: #171816;
  --album-muted: #6e716b;
  --album-line: #deded8;
  --album-soft: #f7f7f3;
  --album-accent: #d9ff43;
  --album-danger: #b83d39;
  --album-radius: 18px;
  --album-shadow: 0 18px 60px rgba(24, 25, 22, .08);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--album-bg); color: var(--album-ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.album-modal-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }

.album-app { min-height: calc(100vh - 64px); }
.album-admin-nav { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 64px); color: #fff; background: #151714; border-bottom: 1px solid rgba(255,255,255,.09); }
.album-admin-brand { display: flex; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 850; letter-spacing: .1em; }
.album-admin-brand small { color: #92978e; font-size: 9px; letter-spacing: .16em; }
.album-admin-account { display: flex; align-items: center; gap: 14px; color: #b9bdb5; font-size: 12px; }
.album-admin-account form { margin: 0; }
.album-admin-account button { padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #fff; background: transparent; font-size: 11px; }
.album-admin-account button:hover { border-color: var(--album-accent); color: var(--album-accent); }
.album-hero {
  min-height: 210px;
  padding: 46px clamp(24px, 5vw, 76px) 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 75% 15%, rgba(217,255,67,.19), transparent 30%),
    linear-gradient(125deg, #181a17, #272b25);
}
.album-eyebrow, .album-section-kicker {
  margin: 0 0 7px;
  color: #8d9389;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.album-hero .album-eyebrow { color: var(--album-accent); }
.album-hero h1 { margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: .92; font-weight: 650; letter-spacing: -.05em; }
.album-hero > div > p:last-child { max-width: 620px; margin: 18px 0 0; color: #b9bdb5; }
.album-isolation-note { display: flex; align-items: center; gap: 13px; min-width: 250px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.05); }
.album-isolation-note > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: #151713; background: var(--album-accent); font-size: 20px; }
.album-isolation-note strong, .album-isolation-note small { display: block; }
.album-isolation-note strong { font-size: 13px; }
.album-isolation-note small { color: #aeb2ab; margin-top: 2px; }

.album-alert { position: fixed; z-index: 1400; right: 28px; top: 84px; max-width: 420px; padding: 14px 18px; border-radius: 12px; color: #fff; background: #1f211e; box-shadow: 0 14px 42px rgba(0,0,0,.25); }
.album-alert.is-error { background: #8f2e2b; }

.album-workspace { width: min(1540px, calc(100% - 40px)); margin: -24px auto 54px; display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 18px; align-items: start; }
.album-sidebar, .album-editor { border: 1px solid var(--album-line); border-radius: var(--album-radius); background: var(--album-panel); box-shadow: var(--album-shadow); }
.album-sidebar { position: sticky; top: 78px; min-height: 560px; overflow: hidden; }
.album-sidebar-head { padding: 22px; border-bottom: 1px solid var(--album-line); }
.album-sidebar label, .album-meta-form > label, .album-create-form label { display: block; margin-bottom: 7px; color: var(--album-muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.album-sidebar select, .album-create-form input, .album-create-form textarea, .album-meta-form input, .album-meta-form textarea, .album-meta-form select, .album-picker-search input {
  width: 100%; border: 1px solid var(--album-line); border-radius: 10px; color: var(--album-ink); background: #fff; outline: none; transition: border-color .16s, box-shadow .16s;
}
.album-sidebar select { padding: 11px 38px 11px 12px; }
.album-create-form input, .album-create-form textarea, .album-meta-form input, .album-meta-form textarea, .album-meta-form select { padding: 12px 13px; }
input:focus, textarea:focus, select:focus { border-color: #8b9367 !important; box-shadow: 0 0 0 3px rgba(217,255,67,.2); }
textarea { resize: vertical; }
.album-new-button { width: calc(100% - 32px); margin: 16px; padding: 12px; border: 1px dashed #969b8f; border-radius: 11px; color: #353832; background: var(--album-soft); font-weight: 750; }
.album-new-button:hover { border-style: solid; background: var(--album-accent); }
.album-create-form { margin: 0 16px 16px; padding: 16px; border-radius: 12px; background: #f0f0eb; }
.album-create-form label:not(:first-child) { margin-top: 13px; }
.album-create-form label span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.album-create-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.album-list-status { padding: 25px 22px; color: var(--album-muted); font-size: 13px; text-align: center; }
.album-list { max-height: calc(100vh - 310px); overflow: auto; }
.album-card { width: 100%; display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: center; padding: 13px 16px; border: 0; border-top: 1px solid #ecece7; color: inherit; background: #fff; text-align: left; }
.album-card:hover { background: #fafaf7; }
.album-card.active { background: #eff0e9; box-shadow: inset 4px 0 0 var(--album-ink); }
.album-card-cover { width: 66px; height: 52px; border-radius: 8px; object-fit: cover; background: #dedfd8; }
.album-card-cover.album-placeholder { display: grid; place-items: center; color: #91958d; font-size: 20px; }
.album-card strong, .album-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-card strong { font-size: 14px; }
.album-card small { margin-top: 5px; color: var(--album-muted); font-size: 11px; }
.album-card small span { display: inline-block; margin-right: 8px; }
.album-card-status { color: #6c7453; text-transform: uppercase; letter-spacing: .06em; }

.album-editor { min-height: 720px; overflow: hidden; }
.album-empty-state { min-height: 720px; display: grid; place-content: center; justify-items: center; padding: 40px; text-align: center; }
.album-empty-mark { width: 80px; height: 80px; display: grid; place-items: center; margin-bottom: 25px; border-radius: 25px; color: var(--album-accent); background: #20221f; font-size: 34px; font-weight: 800; transform: rotate(-4deg); }
.album-empty-state h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.album-empty-state p { max-width: 520px; margin: 12px 0 0; color: var(--album-muted); }
.album-editor-content { padding: clamp(22px, 4vw, 48px); }
.album-editor-topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 26px; }
.album-status-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; color: #676b63; background: #e9eae5; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.album-status-badge.published { color: #273000; background: var(--album-accent); }
.album-save-state { margin-left: 10px; color: var(--album-muted); font-size: 12px; }
.album-delete-button { border: 0; color: var(--album-danger); background: transparent; font-size: 12px; font-weight: 700; }
.album-delete-button:hover { text-decoration: underline; }
.album-meta-form > input { font-size: clamp(30px, 4vw, 52px); font-weight: 650; line-height: 1; letter-spacing: -.045em; }
.album-meta-form > textarea { margin-bottom: 18px; color: #4f534c; font-size: 15px; line-height: 1.6; }
.album-meta-form > label:not(:first-child) { margin-top: 20px; }
.album-meta-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.album-publish-control { min-width: min(360px, 100%); }
.album-publish-control span { display: block; margin-bottom: 7px; color: var(--album-muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }

.album-button { min-height: 40px; padding: 9px 15px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 750; transition: transform .14s, background .14s, opacity .14s; }
.album-button:hover:not(:disabled) { transform: translateY(-1px); }
.album-button:disabled { cursor: not-allowed; opacity: .46; }
.album-button-dark { color: #fff; background: #1d1f1c; }
.album-button-quiet { border-color: var(--album-line); color: #3d403b; background: #fff; }
.album-button-accent { color: #1a1d15; background: var(--album-accent); }

.album-section { margin-top: 46px; padding-top: 35px; border-top: 1px solid var(--album-line); }
.album-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.album-section-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.album-section-heading h2 span { color: var(--album-muted); font-size: 14px; font-weight: 500; }
.album-photo-actions { display: flex; gap: 8px; }
.album-section-help { margin: 10px 0 20px; color: var(--album-muted); font-size: 12px; }
.album-items-empty { min-height: 190px; display: grid; place-items: center; border: 1px dashed #cbcdc5; border-radius: 13px; color: var(--album-muted); background: var(--album-soft); }
.album-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.album-item { position: relative; border: 1px solid var(--album-line); border-radius: 12px; overflow: hidden; background: #fff; }
.album-item.is-missing { opacity: .58; }
.album-item-image { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; background: #e2e3dd; }
.album-item-cover { position: absolute; top: 8px; left: 8px; padding: 5px 8px; border-radius: 999px; color: #20220f; background: var(--album-accent); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.album-item-info { padding: 10px; }
.album-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.album-item-owner { overflow: hidden; margin-top: 3px; color: var(--album-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.album-item-controls { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--album-line); }
.album-item-controls button { min-height: 33px; border: 0; border-right: 1px solid var(--album-line); color: #4b4e48; background: #fafaf8; font-size: 11px; }
.album-item-controls button:last-child { border-right: 0; color: var(--album-danger); }
.album-item-controls button:hover:not(:disabled) { background: #eeefe9; }
.album-item-controls button:disabled { color: #c3c5bf; }

.album-share-section { margin-bottom: 8px; }
.album-share-card { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 18px; border: 1px solid var(--album-line); border-radius: 13px; background: var(--album-soft); }
.album-share-card strong, .album-share-card small { display: block; }
.album-share-card small { margin-top: 5px; color: var(--album-muted); }
.album-share-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.album-link-result { margin-top: 14px; padding: 14px; border: 1px solid #b2c35d; border-radius: 11px; background: #f6ffd1; }
.album-link-result label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.album-link-row { display: flex; gap: 8px; }
.album-link-row input { flex: 1; min-width: 0; padding: 10px; border: 1px solid #b8c66e; border-radius: 8px; background: #fff; }

.album-picker[hidden] { display: none; }
.album-picker { position: fixed; inset: 0; z-index: 1300; display: flex; justify-content: flex-end; }
.album-picker-backdrop { position: absolute; inset: 0; background: rgba(12,13,11,.68); backdrop-filter: blur(3px); }
.album-picker-panel { position: relative; width: min(920px, 94vw); height: 100%; display: flex; flex-direction: column; padding: 26px; background: #f7f7f3; box-shadow: -22px 0 70px rgba(0,0,0,.22); overflow: hidden; }
.album-picker-header { display: flex; justify-content: space-between; align-items: start; }
.album-picker-header h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.album-picker-close { border: 0; color: #3c3f39; background: transparent; font-size: 38px; line-height: 1; }
.album-picker-search { display: flex; gap: 8px; margin-top: 20px; }
.album-picker-search input { padding: 11px 13px; }
.album-picker-search button, .album-picker-more { padding: 10px 16px; border: 0; border-radius: 9px; color: #fff; background: #272925; font-weight: 700; }
.album-picker-summary { display: flex; justify-content: space-between; padding: 14px 1px 10px; color: var(--album-muted); font-size: 12px; }
.album-picker-summary strong { color: #30342d; }
.album-picker-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; align-content: start; overflow-y: auto; padding-right: 4px; }
.album-picker-photo { position: relative; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #dedfd8; text-align: left; }
.album-picker-photo img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; }
.album-picker-photo span { display: block; padding: 7px 8px; overflow: hidden; color: #40433e; background: #fff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.album-picker-photo.selected { border-color: #20231a; box-shadow: 0 0 0 3px var(--album-accent); }
.album-picker-photo.selected::after { content: '✓'; position: absolute; top: 7px; right: 7px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #172000; background: var(--album-accent); font-weight: 900; }
.album-picker-photo.in-album { opacity: .45; cursor: not-allowed; }
.album-picker-more { align-self: center; margin-top: 12px; }
.album-picker-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 17px; }

@media (max-width: 900px) {
  .album-hero { align-items: flex-start; flex-direction: column; }
  .album-isolation-note { min-width: 0; }
  .album-workspace { grid-template-columns: 1fr; width: min(100% - 24px, 760px); }
  .album-sidebar { position: static; min-height: 0; }
  .album-list { max-height: 310px; }
  .album-editor { min-height: 600px; }
  .album-empty-state { min-height: 560px; }
}

@media (max-width: 600px) {
  .album-hero { padding: 34px 18px 46px; }
  .album-hero h1 { font-size: 50px; }
  .album-isolation-note { width: 100%; }
  .album-workspace { margin-top: -20px; }
  .album-editor-content { padding: 22px 16px; }
  .album-meta-actions, .album-section-heading, .album-share-card { align-items: stretch; flex-direction: column; }
  .album-meta-actions .album-button { width: 100%; }
  .album-photo-actions, .album-share-actions { justify-content: stretch; }
  .album-photo-actions .album-button, .album-share-actions .album-button { flex: 1; }
  .album-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .album-picker-panel { width: 100%; padding: 18px 12px; }
  .album-picker-grid { grid-template-columns: repeat(2, 1fr); }
  .album-link-row { flex-direction: column; }
}

.album-login-page { min-height: 100vh; color: #fff; background: #151714; }
.album-login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr); }
.album-login-brand { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(30px, 6vw, 82px); background:
  radial-gradient(circle at 72% 28%, rgba(217,255,67,.2), transparent 26%),
  linear-gradient(140deg, #171916, #292e24); }
.album-login-brand > span { font-size: 15px; font-weight: 900; letter-spacing: .14em; }
.album-login-brand p { margin: 0 0 14px; color: var(--album-accent); font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.album-login-brand h1 { margin: 0; font-size: clamp(48px, 7vw, 104px); font-weight: 600; line-height: .88; letter-spacing: -.065em; }
.album-login-brand > small { color: #8e9389; font-size: 10px; letter-spacing: .14em; }
.album-login-panel { display: grid; place-items: center; padding: 30px; color: var(--album-ink); background: #f4f3ee; }
.album-login-form { width: min(390px, 100%); }
.album-login-form h2 { margin: 0; font-size: 38px; letter-spacing: -.045em; }
.album-login-copy { margin: 12px 0 26px; color: var(--album-muted); line-height: 1.6; }
.album-login-form label { display: block; margin: 16px 0 7px; color: #5e625a; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.album-login-form input { width: 100%; padding: 13px 14px; border: 1px solid var(--album-line); border-radius: 10px; color: var(--album-ink); background: #fff; outline: none; }
.album-login-form button { width: 100%; margin-top: 22px; padding: 13px; border: 0; border-radius: 10px; color: #191b15; background: var(--album-accent); font-weight: 850; }
.album-login-note { display: block; margin-top: 15px; color: #868a81; text-align: center; }
.album-login-error { margin: 18px 0 4px; padding: 11px 13px; border-radius: 9px; color: #792d29; background: #fae1df; font-size: 12px; }

@media (max-width: 820px) {
  .album-login-shell { grid-template-columns: 1fr; }
  .album-login-brand { min-height: 300px; }
  .album-login-brand h1 { font-size: 54px; }
  .album-login-panel { min-height: 560px; }
  .album-admin-account span { display: none; }
}