@import url("data:text/css,");

:root {
  --paper: #f4efe7;
  --paper-light: #fbf8f2;
  --paper-deep: #e9dfd2;
  --ink: #39322f;
  --muted: #817672;
  --rose: #a97875;
  --rose-soft: #d8bbb6;
  --brown: #80665a;
  --line: #d9cec2;
  --danger: #914f4d;
  --shadow: 0 12px 30px rgba(75, 57, 48, .09);
  --serif: Georgia, "Noto Serif SC", "Songti SC", serif;
  --sans: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --topbar: 68px;
  --sidebar: 238px;
}

@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: auto; }
body { margin: 0; min-width: 320px; background: var(--paper) url("/static/textures/paper-fibers.svg") repeat; color: var(--ink); font: 14px/1.55 var(--sans); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; transform: none !important; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid rgba(169,120,117,.55); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: 10px 14px; background: var(--ink); color: white; }
.skip-link:focus { top: 10px; }
.mobile-only { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar); display: flex; align-items: center; gap: 18px; padding: 0 28px; background-color: rgba(244,239,231,.9); background-image: url("/static/textures/paper-fibers.svg"); border-bottom: 1px solid rgba(217,206,194,.54); box-shadow: 0 7px 20px rgba(75,57,48,.025); -webkit-backdrop-filter: blur(5px) saturate(.82); backdrop-filter: blur(5px) saturate(.82); transition: background-color .14s linear,border-color .14s linear,box-shadow .14s linear; }
.is-page-scrolled .topbar { background-color: rgba(244,239,231,.6); border-bottom-color: rgba(217,206,194,.26); box-shadow: 0 8px 22px rgba(75,57,48,.018); }
.topbar::after { content: ""; position: absolute; left: var(--sidebar); right: 0; bottom: 0; height: 7px; opacity: .72; background-image: radial-gradient(circle,rgba(169,120,117,.62) 0 1px,transparent 1.4px),linear-gradient(90deg,transparent,rgba(128,102,90,.32) 8%,rgba(128,102,90,.32) 92%,transparent); background-position: center 1px,center bottom; background-size: 12px 5px,100% 1px; background-repeat: repeat-x,no-repeat; pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 214px; font: 650 20px var(--serif); letter-spacing: .1em; }
.brand > span:last-child { display: grid; gap: 1px; }
.brand > span:last-child::after { content: "THE PRIVATE PHOTO ARCHIVE"; color: var(--muted); font: 700 6.5px var(--sans); letter-spacing: .2em; }
.brand-mark { position: relative; width: 42px; height: 42px; flex: 0 0 42px; display: block; overflow: hidden; color: transparent; border: 3px double rgba(128,102,90,.62); border-radius: 50%; background: #f8f2e8 url("/static/generated/shiguang-emblem-v2.webp") center/112% auto no-repeat; box-shadow: 0 2px 8px rgba(75,57,48,.11); transform: rotate(-2deg); }
.brand-mark::before, .brand-mark::after { content: none; }
.top-location { color: var(--muted); font-size: 12px; white-space: nowrap; }
.search-box { position: relative; height: 38px; max-width: 420px; flex: 1; margin-inline: auto; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid rgba(207,192,180,.62); background: rgba(251,248,242,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32),0 5px 15px rgba(75,57,48,.025); transition: background-color .18s ease,border-color .18s ease,box-shadow .18s ease; }
.search-box:focus-within { border-color: rgba(169,120,117,.7); background: rgba(255,253,249,.68); box-shadow: 0 0 0 3px rgba(169,120,117,.09),0 5px 15px rgba(75,57,48,.035); }
.is-page-scrolled .search-box:not(:focus-within) { border-color: rgba(207,192,180,.38); background: rgba(251,248,242,.24); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.search-box > span[aria-hidden="true"] { position: relative; width: 19px; height: 22px; flex: 0 0 19px; display: block; border: 1px solid rgba(128,102,90,.58); background: rgba(255,253,248,.78); box-shadow: 2px 2px 0 rgba(216,187,182,.18); color: transparent; transform: rotate(-4deg); }
.search-box > span[aria-hidden="true"]::before { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 11px; background: linear-gradient(145deg,rgba(169,120,117,.44),rgba(128,102,90,.34)); }
.search-box > span[aria-hidden="true"]::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 3px; border-top: 1px solid rgba(128,102,90,.42); }
.search-box input { flex: 1; min-width: 80px; border: 0; outline: 0; background: transparent; }
.search-box kbd { padding: 0 6px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; font-size: 10px; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.button, .icon-button, .text-button { border: 0; background: transparent; }
.button { min-height: 38px; padding: 8px 14px; display: inline-flex; gap: 7px; align-items: center; justify-content: center; border: 1px solid var(--line); font-weight: 650; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fffaf6; background: var(--brown); border-color: var(--brown); }
.button-upload { color: #fff; background: var(--rose); border-color: var(--rose); }
.button-quiet { background: var(--paper-light); }
.button-danger { color: white; background: var(--danger); border-color: var(--danger); }
.admin-toggle[aria-pressed="true"] { color: #fffaf6; background: var(--brown); border-color: var(--brown); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; font-size: 18px; }
.text-button { padding: 5px 3px; color: var(--brown); text-decoration: underline; text-underline-offset: 4px; }
.menu-button { display: none; }

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - var(--topbar)); }
.sidebar { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); z-index: 35; padding: 24px 17px 52px; background-color: #eee5d9; background-image: linear-gradient(rgba(238,229,217,.95),rgba(238,229,217,.95)), url("/static/textures/polka-rose.svg"); border-right: 1px solid var(--line); box-shadow: 4px 0 16px rgba(75,57,48,.035); overflow-x: hidden; overflow-y: auto; }
.sidebar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px; opacity: .42; background: url("/static/generated/botanical-lace-border-v2.webp") center/auto 70px repeat-x; mix-blend-mode: multiply; pointer-events: none; }
.sidebar::after { content: ""; position: absolute; top: 0; right: -1px; width: 10px; height: 100%; opacity: .34; background: url("/static/textures/lace-strip.svg") repeat-y center/44px 11px; pointer-events: none; }
.sidebar-heading { display: flex; justify-content: space-between; padding: 0 10px 14px; color: var(--brown); font-size: 10px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.tree-link { min-height: 39px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-left: 2px solid transparent; }
.tree-link { border-radius: 0 8px 8px 0; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.tree-link:hover, .tree-link.is-current { background: rgba(255,255,255,.55); border-left-color: var(--rose); transform: translateX(2px); }
.tree-icon { width: 18px; color: var(--rose); text-align: center; }
.tree-link em { margin-left: auto; min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--rose-soft); font-size: 11px; font-style: normal; }
.tree-group summary { min-height: 37px; display: grid; grid-template-columns: 15px 1fr auto; gap: 5px; align-items: center; padding: 6px 9px; list-style: none; }
.tree-group summary::-webkit-details-marker { display: none; }
.tree-group summary:hover { background: rgba(255,255,255,.4); }
.tree-group summary a { overflow: hidden; text-overflow: ellipsis; }
.tree-group summary small { color: var(--muted); }
.tree-group .caret { transform: rotate(0); transition: transform .15s; color: var(--rose); }
.tree-group[open] > summary .caret { transform: rotate(90deg); }
.tree-children { margin-left: 12px; padding-left: 6px; border-left: 1px dashed #cbbcaf; }
.sidebar-special { margin-top: 18px; padding-top: 12px; border-top: 1px dashed #cbbcaf; }
.archive-stamp { position: relative; width: 124px; min-height: 142px; margin: 36px auto 0; padding: 78px 8px 10px; display: grid; place-items: center; transform: rotate(-2deg); color: rgba(128,102,90,.68); border: 1px solid rgba(128,102,90,.32); background: rgba(255,253,248,.7); box-shadow: 5px 7px 0 rgba(169,120,117,.08),0 8px 18px rgba(75,57,48,.07); font-family: var(--serif); line-height: 1.25; }
.archive-stamp::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 62px; background: linear-gradient(145deg,rgba(128,102,90,.35) 0 48%,rgba(169,120,117,.32) 48% 69%,rgba(216,187,182,.45) 69%); box-shadow: inset 0 0 0 1px rgba(128,102,90,.12); }
.archive-stamp::after { content: ""; position: absolute; width: 48px; height: 14px; left: 38px; top: -7px; background: rgba(216,187,182,.55); transform: rotate(3deg); clip-path: polygon(3% 8%,97% 0,94% 100%,0 91%); }
.archive-stamp span { font-size: 9px; letter-spacing: .14em; }
.archive-stamp b { font-size: 20px; }
.archive-stamp small { font-size: 9px; font-style: italic; }
.main-content { position: relative; isolation: isolate; width: 100%; min-width: 0; padding: 42px clamp(28px, 4.4vw, 72px) 80px; overflow: hidden; background-color: rgba(244,239,231,.72); background-image: linear-gradient(90deg, transparent 0 72%, rgba(216,187,182,.07) 72% 72.15%, transparent 72.15%), url("/static/textures/paper-fibers.svg"); touch-action: pan-y; animation: page-in .16s cubic-bezier(.2,.8,.2,1) backwards; view-transition-name: archive-content; }
.main-content::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: .22; pointer-events: none; background: url("/static/generated/scrapbook-collage-tile.webp") 0 0/640px 640px repeat; mix-blend-mode: multiply; }
.main-content.is-page-leaving { pointer-events: none; animation: none; will-change: transform, opacity; transition: transform .1s cubic-bezier(.4,0,1,1), opacity .09s linear; transform: translate3d(-12px,0,0); opacity: .62; }
.main-content.is-page-leaving[data-direction="prev"] { transform: translate3d(18px,0,0); }
@keyframes page-in { from { transform: translate3d(16px,0,0); opacity: .46; } to { transform: translate3d(0,0,0); opacity: 1; } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(archive-content) { animation: archive-out .1s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(archive-content) { animation: archive-in .16s cubic-bezier(.2,.8,.2,1) both; }
@keyframes archive-out { to { transform: translate3d(-14px,0,0); opacity: .55; } }
@keyframes archive-in { from { transform: translate3d(14px,0,0); opacity: .48; } }
.main-content > :not(.page-atmosphere) { position: relative; z-index: 2; }
.main-content > .page-edge-button { position: fixed; z-index: 24; }

.page-head { max-width: 1250px; margin: 0 auto 28px; }
.breadcrumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 25px; color: var(--muted); font-size: 12px; }
.breadcrumbs a:hover { color: var(--rose); }
.title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--rose); font: 700 10px var(--sans); letter-spacing: .19em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font: 500 clamp(29px, 3vw, 43px)/1.18 var(--serif); letter-spacing: .02em; }
.page-head p { max-width: 680px; margin-bottom: 0; color: var(--muted); }
.page-actions { display: flex; gap: 9px; flex-shrink: 0; }
.subbar { min-height: 48px; margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.subbar b { color: var(--ink); font-size: 15px; }
.subbar form, .subbar > div { display: flex; align-items: center; gap: 10px; }
select, input, textarea { border: 1px solid var(--line); background: var(--paper-light); padding: 9px 10px; }

.album-grid { max-width: 1250px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(30px, 3.2vw, 52px) clamp(22px, 2.7vw, 40px); }
.album-card { min-width: 0; }
.album-cover { position: relative; aspect-ratio: 3/2; display: block; padding: 9px 9px 20px; background: #fffdf8; box-shadow: 0 8px 24px rgba(75,57,48,.1), 0 1px 2px rgba(75,57,48,.12); transition: transform .18s ease, box-shadow .18s ease; }
.album-card:nth-child(3n+2) .album-cover { transform: translateY(7px); }
.album-card:hover .album-cover { transform: translateY(-3px) scale(1.005); box-shadow: var(--shadow); }
.album-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(.96); background: var(--paper-deep); }
.album-tape { position: absolute; top: -8px; left: 50%; width: 54px; height: 20px; transform: translateX(-50%) rotate(-1deg); background: rgba(216,187,182,.65); clip-path: polygon(4% 5%,97% 0,94% 100%,0 91%); }
.album-count { position: absolute; right: 15px; bottom: 10px; padding: 4px 7px; background: rgba(250,247,241,.9); color: var(--brown); font-size: 10px; letter-spacing: .04em; }
.empty-cover { width: 100%; height: 100%; display: grid; place-content: center; gap: 8px; background: linear-gradient(135deg,#d9c9bb,#bfa89b); color: rgba(57,50,47,.6); text-align: center; }
.empty-cover i { width: 42px; height: 32px; margin: auto; border: 1px solid currentColor; }
.empty-cover i::after { content: ""; display: block; width: 20px; height: 20px; margin: 5px auto; border-radius: 50%; border: 1px solid currentColor; }
.album-meta { padding: 16px 5px 0; }
.album-meta h2 { margin-bottom: 5px; font: 600 20px var(--serif); }
.album-meta p { min-height: 22px; margin-bottom: 9px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.album-facts { display: flex; gap: 12px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.album-facts span { padding-left: 12px; border-left: 1px solid var(--line); }
.album-admin-actions { align-items: center; gap: 14px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(128,102,90,.28); font-size: 11px; }
.pagination { position: relative; display: flex; justify-content: center; align-items: center; margin: 60px auto 0; max-width: 1250px; padding: 14px 0 24px; border-top: 1px solid var(--line); }
.pagination-pages { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pagination a { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid transparent; }
.pagination a.active { border-color: var(--rose); color: var(--rose); }
.pagination-arrow { color: var(--brown); font-size: 18px; }
.page-edge-button { top: 50%; z-index: 24; width: 44px; height: 44px; display: grid; place-items: center; transform: translate3d(0,-50%,0); border: 1px solid rgba(128,102,90,.5); border-radius: 50%; color: var(--brown); background: rgba(251,248,242,.76); box-shadow: 0 7px 18px rgba(75,57,48,.08); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: transform .16s ease-out,background-color .16s ease-out,color .16s ease-out,box-shadow .16s ease-out; }
.page-edge-button::before { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(169,120,117,.3); border-radius: 50%; pointer-events: none; }
.page-edge-button b { font: 400 28px/1 var(--serif); transform: translateY(-1px); }
.page-edge-prev { left: calc(var(--sidebar) + 10px); }
.page-edge-next { right: 10px; }
.page-edge-button:hover { color: #fffaf6; background: var(--brown); box-shadow: 0 9px 22px rgba(75,57,48,.13); }
.page-edge-prev:hover { transform: translate3d(-2px,-50%,0); }
.page-edge-next:hover { transform: translate3d(2px,-50%,0); }
.page-edge-button:active { transform: translate3d(0,-50%,0) scale(.96); }

.photo-grid { max-width: 1350px; margin: 0 auto; columns: 4 240px; column-gap: 18px; }
.photo-card { position: relative; width: 100%; margin: 0 0 18px; break-inside: avoid; display: inline-block; background: var(--paper-light); border: 1px solid rgba(217,206,194,.75); }
.photo-card.dragging { opacity: .35; }
.photo-open { width: 100%; padding: 0; display: block; border: 0; background: var(--paper-deep); overflow: hidden; }
.photo-open img { width: 100%; height: auto; min-height: 120px; object-fit: cover; filter: saturate(.88); transition: transform .22s, filter .22s; }
.photo-card:hover .photo-open img { transform: scale(1.015); filter: saturate(.98); }
.photo-caption { display: flex; justify-content: space-between; gap: 10px; padding: 10px 11px; color: var(--muted); font-size: 10px; }
.photo-caption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-caption small { flex-shrink: 0; }
.photo-select { position: absolute; z-index: 2; top: 9px; left: 9px; width: 28px; height: 28px; display: none; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(57,50,47,.55); color: white; }
.photo-select span { opacity: 0; transform: scale(.7); transition: opacity .14s,transform .14s; }
.is-admin-mode .photo-select { display: grid; }
.photo-card.selected { box-shadow: 0 0 0 3px var(--rose); }
.photo-card.selected .photo-select { background: var(--rose); }
.photo-card.selected .photo-select span { opacity: 1; transform: scale(1); }
.selection-bar { position: fixed; left: calc(var(--sidebar) + (100vw - var(--sidebar))/2); bottom: 22px; z-index: 60; width: min(680px, calc(100vw - var(--sidebar) - 48px)); min-height: 58px; padding: 10px 13px 10px 18px; display: flex; align-items: center; gap: 9px; transform: translate3d(-50%, 130%, 0); opacity: 0; background: #403936; color: #fff; box-shadow: 0 16px 40px rgba(25,20,18,.28); transition: transform .14s cubic-bezier(.2,.8,.2,1),opacity .1s linear; will-change: transform,opacity; }
.selection-bar.visible { transform: translate3d(-50%,0,0); opacity: 1; }
.selection-bar strong { margin-right: auto; }
.selection-bar .button-quiet { color: var(--ink); }
.selection-bar .text-button { color: #eadfd5; }
.management-tip { max-width: 1250px; margin: -12px auto 24px; padding: 9px 12px; align-items: center; color: var(--brown); border-left: 2px solid var(--rose); background: rgba(216,187,182,.12); font-size: 11px; }
.is-admin-mode .photo-open { cursor: crosshair; }
.is-admin-mode .photo-card:not(.selected):hover { box-shadow: 0 0 0 2px rgba(169,120,117,.28); }

.empty-state { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state h2 { margin: 6px 0; font: 500 25px var(--serif); }
.empty-state p { max-width: 420px; color: var(--muted); }
.empty-state > div:last-child { display: flex; gap: 8px; }
.empty-polaroid { width: 74px; height: 86px; margin-bottom: 25px; padding: 7px 7px 17px; transform: rotate(-4deg); background: #fffdfa; box-shadow: 0 5px 15px rgba(75,57,48,.12); }
.empty-polaroid span { display: block; height: 100%; background: linear-gradient(150deg,#cdbbad 0 52%,#a99182 53% 65%,#dacdc1 66%); filter: saturate(.6); }

.result-section { max-width: 1250px; margin: 42px auto; }
.section-label { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--muted); font: 700 11px var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.section-label b { min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-deep); }
.directory-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.directory-results a { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 15px; background: rgba(250,247,241,.55); border: 1px solid var(--line); }
.directory-results a > span { font-size: 20px; color: var(--rose); }
.directory-results small { display: block; color: var(--muted); }
.compact-grid { gap: 24px; }
.trash-list { max-width: 1000px; margin: auto; background: rgba(250,247,241,.5); border-top: 1px solid var(--line); }
.trash-list article { min-height: 92px; display: grid; grid-template-columns: 82px 1fr auto; gap: 18px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); }
.trash-list img { width: 82px; height: 66px; object-fit: cover; filter: grayscale(.25) saturate(.7); }
.trash-list small { display: block; margin-top: 5px; color: var(--muted); }
.trash-list article > div:last-child { display: flex; align-items: center; gap: 14px; }
.danger-text { color: var(--danger); }

.drawer { position: fixed; top: 0; right: 0; z-index: 100; width: min(480px,100vw); height: 100dvh; display: flex; flex-direction: column; padding: 25px; transform: translate3d(105%,0,0); visibility: hidden; background: var(--paper-light); box-shadow: -18px 0 50px rgba(45,35,31,.16); transition: transform .16s cubic-bezier(.2,.8,.2,1), visibility .16s; will-change: transform; }
.drawer.open { transform: none; visibility: visible; }
.drawer-scrim, .nav-scrim { position: fixed; inset: 0; z-index: 90; visibility: hidden; opacity: 0; background: rgba(47,39,35,.32); transition: opacity .12s linear,visibility .12s; }
.drawer.open ~ .drawer-scrim, body.drawer-open .drawer-scrim { visibility: visible; opacity: 1; }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.drawer-header h2 { margin: 0; font: 500 27px var(--serif); }
.upload-target { padding: 20px 0 14px; }
.upload-target label { display: block; margin-bottom: 6px; font-weight: 700; }
.upload-target select { width: 100%; min-height: 44px; padding: 10px 38px 10px 12px; border-color: #cfc0b4; background-color: #fffdf9; box-shadow: inset 0 1px 2px rgba(75,57,48,.05); }
.upload-target p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.drop-zone { min-height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed var(--rose); background: rgba(216,187,182,.1); cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.drop-zone:hover, .drop-zone:focus-within { border-color: var(--brown); background: rgba(216,187,182,.18); }
.drop-zone.drag-over { background: rgba(216,187,182,.28); }
.drop-icon { font-size: 30px; color: var(--rose); }
.drop-zone small { margin-top: 8px; color: var(--muted); }
.queue-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-weight: 700; }
.upload-queue { flex: 1; margin-top: 8px; overflow-y: auto; }
.queue-empty { padding: 25px 8px; color: var(--muted); text-align: center; }
.queue-item { display: grid; grid-template-columns: 50px 1fr auto; gap: 11px; align-items: center; padding: 10px 5px; border-bottom: 1px solid var(--line); }
.queue-item img { width: 50px; height: 50px; object-fit: cover; }
.queue-details { min-width: 0; }
.queue-details b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.queue-details small { color: var(--muted); }
.progress { height: 3px; margin-top: 6px; background: var(--paper-deep); }
.progress i { display: block; width: 0; height: 100%; background: var(--rose); transition: width .15s; }
.queue-item.success .progress i { background: #788b72; }
.queue-item.error .progress i { background: var(--danger); }
.queue-status { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; }
.drawer-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.drawer-footer-actions { display: flex; gap: 8px; flex-shrink: 0; }

.viewer { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 70px minmax(0,1fr) 70px 270px; grid-template-areas: "prev stage next info"; background: #282523; color: #f4efe7; }
.viewer[hidden] { display: none; }
.viewer-stage { grid-area: stage; min-width: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; }
.viewer-stage img { max-width: 100%; max-height: 100vh; object-fit: contain; transition: transform .18s; user-select: none; }
.viewer-stage img.zoomed { transform: scale(1.8); cursor: zoom-out; }
.viewer-loading { position: absolute; color: #aaa09a; }
.viewer-stage img:not([src=""]) + .viewer-loading { display: none; }
.viewer-arrow, .viewer-close { border: 0; background: transparent; color: #f4efe7; font-size: 42px; }
.viewer-prev { grid-area: prev; }.viewer-next { grid-area: next; }
.viewer-close { position: absolute; top: 14px; left: 17px; z-index: 2; width: 42px; height: 42px; font-size: 28px; }
.viewer-info { grid-area: info; display: flex; flex-direction: column; justify-content: center; padding: 30px 24px; background: #34302d; border-left: 1px solid #49423e; }
.viewer-info h2 { overflow-wrap: anywhere; font: 500 20px var(--serif); }
.viewer-counter { margin-bottom: 20px; color: #bdb2aa; font-size: 10px; letter-spacing: .16em; }
.viewer-info dl div { padding: 10px 0; border-top: 1px solid #4b4541; }
.viewer-info dt { color: #9e938c; font-size: 10px; }.viewer-info dd { margin: 3px 0 0; }
.viewer-actions { display: grid; gap: 7px; margin-top: 15px; }
.viewer-actions .button-quiet { color: var(--ink); }

.form-dialog { width: min(500px, calc(100vw - 28px)); max-height: min(760px,calc(100dvh - 28px)); padding: 0; overflow: hidden; border: 1px solid rgba(217,206,194,.8); background: var(--paper-light) url("/static/textures/paper-fibers.svg") repeat; color: var(--ink); box-shadow: 0 22px 70px rgba(50,38,33,.27); }
.form-dialog::backdrop { background: rgba(45,36,32,.45); }
.form-dialog form { position: relative; max-height: min(760px,calc(100dvh - 28px)); display: flex; flex-direction: column; padding: 34px 36px 30px; overflow: hidden; }
.form-dialog form::before { content: ""; position: absolute; left: 0; top: 0; width: 95px; height: 8px; background: url("/static/textures/polka-rose.svg") repeat-x 0 0/24px 24px; opacity: .7; }
.form-dialog h2 { margin-bottom: 0; font: 500 29px var(--serif); }
.dialog-close { position: absolute; right: 14px; top: 13px; }
.dialog-fields { min-height: 0; display: grid; gap: 17px; margin: 24px -8px 0 0; padding-right: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--rose-soft) transparent; scrollbar-width: thin; }
.dialog-fields .field { display: grid; gap: 7px; margin: 0; }
.field-label { display: flex; align-items: baseline; justify-content: space-between; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.field-label i { color: var(--rose); font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: .12em; }
.dialog-fields input, .dialog-fields textarea, .dialog-fields select { width: 100%; min-height: 45px; margin: 0; padding: 11px 12px; border: 1px solid #cfc0b4; border-radius: 2px; outline: 0; background-color: #fffdf9; box-shadow: inset 0 1px 2px rgba(75,57,48,.055); transition: border-color .16s, box-shadow .16s, background .16s; }
.dialog-fields select { padding-right: 38px; }
.dialog-fields textarea { min-height: 96px; line-height: 1.65; resize: vertical; }
.dialog-fields input::placeholder, .dialog-fields textarea::placeholder { color: #aaa09a; }
.dialog-fields input:hover, .dialog-fields textarea:hover, .dialog-fields select:hover { border-color: #bba99d; }
.dialog-fields input:focus, .dialog-fields textarea:focus, .dialog-fields select:focus { border-color: var(--rose); background: #fffefa; box-shadow: 0 0 0 3px rgba(169,120,117,.12),inset 0 1px 2px rgba(75,57,48,.04); }
.dialog-fields .field > small { margin-top: -1px; color: var(--muted); font-size: 10px; font-weight: 400; }
.dialog-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); background: linear-gradient(180deg,rgba(251,248,242,0),var(--paper-light) 12px); }
.form-error { min-height: 0; margin: 12px 0 0; color: var(--danger) !important; font-size: 12px; }
.form-error:empty { display: none; }
.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 300; display: grid; gap: 8px; }
.toast { max-width: 360px; padding: 12px 16px; background: #39322f; color: white; box-shadow: var(--shadow); animation: toast-in .18s ease; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

.settings-sheet { max-width: 850px; margin: auto; }
.settings-sheet fieldset { margin: 0 0 25px; padding: 4px 26px; border: 1px solid var(--line); background: rgba(250,247,241,.55); box-shadow: 0 8px 24px rgba(75,57,48,.035); }
.settings-sheet legend { padding: 0 10px; color: var(--rose); font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.settings-sheet label { min-height: 78px; display: grid; grid-template-columns: 1fr 240px; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.settings-sheet label:last-of-type { border-bottom: 0; }
.settings-sheet label span { font-weight: 700; }
.settings-sheet label small { display: block; color: var(--muted); font-weight: 400; }
.settings-sheet label > input:not([type="checkbox"]), .settings-sheet label > select { width: 240px; min-height: 43px; padding: 10px 12px; border-color: #cfc0b4; border-radius: 2px; background-color: #fffdf9; box-shadow: inset 0 1px 2px rgba(75,57,48,.05); }
.settings-sheet label > input:not([type="checkbox"]):focus, .settings-sheet label > select:focus, .login-card input:focus { border-color: var(--rose); outline: 0; box-shadow: 0 0 0 3px rgba(169,120,117,.12); }
.settings-sheet .check-row input { justify-self: end; width: 22px; height: 22px; accent-color: var(--rose); }
.settings-note { color: var(--muted); font-size: 11px; }
.form-footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.nav-status-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #7f9578; box-shadow: 0 0 0 3px rgba(127,149,120,.13); }
.integration-setting-row { min-height: 78px; display: grid; grid-template-columns: 1fr minmax(180px,240px); align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.integration-setting-row > span:first-child { font-weight: 700; }
.integration-setting-row small { display: block; color: var(--muted); font-weight: 400; }
.integration-setting-row code { overflow: hidden; color: var(--muted); font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.integration-setting-row > b { justify-self: end; font: 500 15px var(--serif); }
.integration-setting-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 18px 0 22px; }
.status-pill { width: fit-content; display: inline-flex; align-items: center; gap: 8px; justify-self: end; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,253,249,.72); color: var(--muted); font: 700 10px var(--sans); letter-spacing: .08em; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #a99e95; }
.status-pill.is-connected { color: #576652; border-color: rgba(91,112,84,.26); background: rgba(125,151,116,.1); }.status-pill.is-connected i { background: #748c6d; }
.status-pill.is-offline, .status-pill.is-degraded { color: #8d5c55; border-color: rgba(169,120,117,.35); background: rgba(216,187,182,.14); }.status-pill.is-offline i, .status-pill.is-degraded i { background: var(--rose); }
.managed-head { max-width: 1180px; margin-inline: auto; }
.managed-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.managed-title-row > div { max-width: 760px; }.managed-title-row h1 { margin-bottom: 8px; }.managed-title-row p { margin: 0; color: var(--muted); line-height: 1.7; }
.status-large { flex: 0 0 auto; margin-bottom: 6px; padding: 9px 14px; }
.integration-empty { max-width: 760px; margin: 30px auto 45px; padding: 48px 52px; border: 1px solid var(--line); background: rgba(250,247,241,.64); box-shadow: 8px 10px 0 rgba(169,120,117,.055); text-align: center; }
.integration-empty .empty-polaroid { margin-inline: auto; }.integration-empty h2 { margin: 6px 0; font: 500 25px var(--serif); }.integration-empty p { max-width: 610px; margin: 8px auto 22px; color: var(--muted); line-height: 1.7; }
.integration-empty pre { max-width: 610px; margin: 0 auto 22px; padding: 16px 18px; overflow-x: auto; border-left: 3px double rgba(169,120,117,.55); background: rgba(255,253,249,.72); color: var(--brown); font: 11px/1.8 ui-monospace,monospace; text-align: left; }
.integration-empty.compact { padding-block: 34px; }
.managed-metrics { max-width: 1180px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 0 auto 42px; }
.managed-metrics article { min-height: 128px; display: grid; align-content: center; padding: 22px; border: 1px solid var(--line); background: rgba(250,247,241,.58); box-shadow: 5px 6px 0 rgba(128,102,90,.045); }
.managed-metrics article:nth-child(even) { transform: translateY(7px); }.managed-metrics small { color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }.managed-metrics strong { margin: 5px 0 1px; color: var(--brown); font: 400 30px var(--serif); }.managed-metrics span { color: var(--muted); font-size: 11px; }
.managed-toolbar { max-width: 1180px; display: flex; align-items: end; justify-content: space-between; margin: 0 auto 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }.managed-toolbar h2 { margin: 3px 0 0; font: 500 24px var(--serif); }
.ou-album-grid { max-width: 1180px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 0 auto 48px; }
.ou-album-card { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 17px; align-items: center; padding: 13px; border: 1px solid var(--line); background: rgba(250,247,241,.62); }
.ou-album-card:nth-child(3n+2) { transform: translateY(6px); }.ou-album-cover { position: relative; height: 104px; padding: 6px 6px 17px; background: #fffdfa; box-shadow: 4px 5px 0 rgba(169,120,117,.1); transform: rotate(-.5deg); }.ou-album-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); }.ou-album-cover > span { height: 100%; display: grid; place-items: center; background: linear-gradient(145deg,#ded2c6,#bda493); color: rgba(255,255,255,.8); font: 21px var(--serif); }.ou-album-cover small { position: absolute; right: 7px; bottom: 2px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.ou-album-card h3 { margin: 0 0 5px; font: 500 18px var(--serif); }.ou-album-card p { display: -webkit-box; margin: 0 0 9px; overflow: hidden; color: var(--muted); font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.ou-album-card > div:last-child > span { color: var(--rose); font-size: 10px; letter-spacing: .08em; }
.integration-boundary { max-width: 980px; display: flex; align-items: center; justify-content: center; gap: 15px; margin: 35px auto 0; padding: 14px 18px; border-top: 1px dashed rgba(128,102,90,.35); border-bottom: 1px dashed rgba(128,102,90,.35); color: var(--muted); font-size: 10px; letter-spacing: .04em; }.integration-boundary b { color: var(--brown); }.integration-boundary i { color: var(--rose); font-style: normal; }
.local-management-panel { max-width: 1180px; margin: 0 auto 32px; padding: 22px 24px 25px; border: 1px solid var(--line); background: rgba(250,247,241,.52); }
.local-management-panel .managed-toolbar { margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; }.local-management-panel .managed-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.managed-local-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }.managed-local-metrics a { display: grid; gap: 3px; padding: 14px 15px; border: 1px solid rgba(207,192,180,.72); background: rgba(255,253,249,.55); color: var(--ink); transition: transform .12s ease-out,background-color .12s linear,border-color .12s linear; }.managed-local-metrics a:hover { transform: translateY(-2px); border-color: var(--rose-soft); background: rgba(255,253,249,.9); }.managed-local-metrics small { color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }.managed-local-metrics strong { color: var(--brown); font: 400 24px var(--serif); }.managed-local-metrics span { color: var(--muted); font-size: 10px; }
.managed-section-rule { max-width: 1180px; display: flex; align-items: center; gap: 13px; margin: 30px auto 23px; color: var(--muted); font: 700 10px var(--sans); letter-spacing: .16em; }.managed-section-rule i { flex: 1; border-top: 1px dashed rgba(128,102,90,.35); }
.login-card { width: min(430px,100%); margin: 60px auto; padding: 40px; background: var(--paper-light); border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-card h1 { font-size: 30px; }.login-card p { color: var(--muted); }.login-card label { display: block; font-weight: 700; }.login-card input { width: 100%; min-height: 45px; margin: 7px 0 18px; padding: 11px 12px; border-color: #cfc0b4; background: #fffdf9; }
.login-actions { display: flex; justify-content: space-between; gap: 9px; }
.admin-only { display: none !important; }
.is-admin-mode .admin-only { display: flex !important; }

/* Page atmosphere: handmade paper, editorial numbering, lace and restrained dots. */
.page-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmo { position: absolute; display: block; }
.atmo-polka { width: 250px; height: 250px; right: -55px; top: 185px; opacity: .2; transform: rotate(4deg); background: url("/static/textures/polka-rose.svg"); clip-path: polygon(4% 8%,94% 0,100% 88%,9% 100%,0 53%); }
.atmo-lace { width: 440px; height: 24px; right: 4%; top: 330px; opacity: .34; transform: rotate(-1.2deg); background: url("/static/textures/lace-strip.svg") repeat-x; }
.atmo-swatch { width: 190px; height: 115px; left: 7%; top: 475px; opacity: .12; transform: rotate(-7deg); background: linear-gradient(125deg, var(--rose-soft) 0 47%, var(--brown) 47% 49%, #cbb8a7 49%); clip-path: polygon(2% 7%,97% 0,91% 97%,0 88%); }
.atmo-polaroid { width: 154px; height: 184px; padding: 11px 11px 39px; border: 1px solid rgba(128,102,90,.26); background: rgba(255,253,248,.52); box-shadow: 8px 10px 0 rgba(169,120,117,.07),0 10px 24px rgba(75,57,48,.05); }
.atmo-polaroid::before { content: ""; position: absolute; inset: 11px 11px 39px; background: linear-gradient(145deg,rgba(128,102,90,.27) 0 48%,rgba(169,120,117,.25) 48% 68%,rgba(216,187,182,.32) 68%); }
.atmo-polaroid::after { content: ""; position: absolute; left: 48px; right: 48px; bottom: 18px; border-top: 1px solid rgba(128,102,90,.24); box-shadow: 0 5px 0 rgba(169,120,117,.14); }
.atmo-polaroid-a { right: 7%; top: 105px; opacity: .18; transform: rotate(6deg); }
.atmo-polaroid-b { left: 3%; top: 790px; width: 132px; height: 158px; opacity: .2; transform: rotate(-8deg); }
.atmo-issue { right: 22px; top: 680px; color: rgba(128,102,90,.17); font: 10px/1.9 var(--serif); letter-spacing: .18em; text-align: right; transform: rotate(90deg) translateX(100%); transform-origin: right top; white-space: nowrap; }
.atmo-issue b { font-size: 29px; font-weight: 400; letter-spacing: .05em; }
.page-explore .main-content { background-image: radial-gradient(circle at 18% 24%, rgba(216,187,182,.15) 0 90px, transparent 91px), linear-gradient(102deg, transparent 0 66%, rgba(255,255,255,.24) 66% 91%, transparent 91%), url("/static/textures/paper-fibers.svg"); }
.page-explore .page-head { padding-left: 24px; border-left: 3px double rgba(169,120,117,.52); }
.page-explore .page-head::after { content: "LIFE / PHOTO / JOURNAL"; position: absolute; right: 0; top: 21px; color: rgba(128,102,90,.42); font: 9px var(--sans); letter-spacing: .24em; writing-mode: vertical-rl; }
.page-album .main-content { background-image: linear-gradient(90deg, rgba(255,255,255,.2), transparent 31%), radial-gradient(circle at 93% 14%, rgba(216,187,182,.18) 0 72px, transparent 73px), url("/static/textures/paper-fibers.svg"); }
.page-album .atmo-polka { left: -70px; right: auto; top: 320px; width: 210px; height: 330px; opacity: .13; }
.page-album .atmo-lace { top: 260px; right: -40px; width: 370px; transform: rotate(2deg); }
.page-album .atmo-swatch { top: 760px; left: auto; right: 4%; width: 145px; height: 100px; opacity: .09; }
.page-search .atmo-polka { top: 90px; opacity: .14; }.page-search .atmo-lace { top: 270px; }
.page-utility .atmo-polka, .page-utility .atmo-swatch, .page-utility .atmo-issue { display: none; }
.page-utility .atmo-lace { top: 200px; opacity: .16; }

/* Album entries read like a varied, collected stack instead of repeated UI cards. */
.album-grid { counter-reset: archive-card; }
.album-card { position: relative; counter-increment: archive-card; }
.album-card::before { content: "0" counter(archive-card); position: absolute; z-index: 3; left: -6px; top: -17px; color: rgba(128,102,90,.53); font: italic 11px var(--serif); letter-spacing: .08em; }
.album-card:nth-child(4n+1) .album-cover { background: #fffdf8; transform: rotate(-.18deg); }
.album-card:nth-child(4n+2) .album-cover { background: #f1e5db url("/static/generated/paper-frame-lace.webp") center/cover no-repeat; transform: translateY(7px) rotate(.25deg); }
.album-card:nth-child(4n+3) .album-cover { background: #e8ddd0; box-shadow: 7px 9px 0 rgba(169,120,117,.11), 0 8px 24px rgba(75,57,48,.09); }
.album-card:nth-child(4n) .album-cover { background: #fffaf3 url("/static/textures/polka-rose.svg") repeat-x bottom/24px 24px; padding-bottom: 26px; }
.album-card:nth-child(5n+2) .album-cover::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -13px; height: 24px; opacity: .48; background: url("/static/textures/lace-strip.svg") repeat-x bottom; }
.album-card:nth-child(3n) .album-meta { margin-top: 5px; padding-left: 13px; border-left: 1px dashed rgba(128,102,90,.42); }
.album-card:nth-child(5n) .album-tape { width: 66px; background: rgba(185,177,151,.58); transform: translateX(-50%) rotate(3deg); }
.album-card:nth-child(6n+1) .album-tape { left: 24%; width: 47px; transform: rotate(-7deg); background: rgba(216,187,182,.7); }
.album-card:hover .album-cover { transform: translateY(-3px) rotate(0) scale(1.005); }
.album-meta h2::after { content: ""; display: inline-block; width: 22px; margin-left: 9px; border-top: 1px solid rgba(169,120,117,.55); vertical-align: middle; }

/* Named frame treatments chosen in the album editor. */
.album-card[data-frame-style="polaroid"] .album-cover { padding: 10px 10px 30px; background: #fffdf9; box-shadow: 0 9px 20px rgba(75,57,48,.13); transform: rotate(-.35deg); }
.album-card[data-frame-style="polaroid"] .album-cover::after { content: ""; position: absolute; left: 16px; bottom: 9px; width: 46px; height: 1px; background: var(--rose-soft); }
.album-card[data-frame-style="editorial"] .album-cover { padding: 6px 6px 18px; background: #e9dfd2; border: 1px solid #cdb9a7; box-shadow: 8px 8px 0 rgba(128,102,90,.13); transform: rotate(.2deg); }
.album-card[data-frame-style="editorial"] .album-meta { padding-left: 12px; border-left: 3px double var(--rose-soft); }
.album-card[data-frame-style="scrapbook"] .album-cover { padding: 12px 12px 22px; background: url("/static/generated/scrapbook-collage-tile.webp") center/320px repeat; border: 1px solid rgba(128,102,90,.32); box-shadow: 5px 7px 0 rgba(169,120,117,.16); transform: rotate(-.55deg); }
.album-card[data-frame-style="scrapbook"] .album-cover img { box-shadow: 0 2px 0 rgba(255,255,255,.7); }
.album-card[data-frame-style="vintage"] .album-cover { padding: 8px 8px 21px; background: #d7c3ad; border: 1px solid #a98d74; box-shadow: inset 0 0 0 4px rgba(250,239,218,.55), 0 8px 18px rgba(75,57,48,.12); transform: rotate(.35deg); }
.album-card[data-frame-style="vintage"] .album-cover img { filter: sepia(.28) saturate(.7) contrast(.94); }
.album-card[data-frame-style="lace"] .album-cover { padding: 10px 10px 28px; background: #f1e5db url("/static/generated/paper-frame-lace.webp") center/cover; border: 1px solid #d6bfb1; transform: rotate(-.2deg); }
.album-card[data-frame-style="lace"] .album-cover::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -8px; height: 18px; opacity: .7; background: url("/static/textures/lace-strip.svg") repeat-x bottom/74px 18px; }
.album-card[data-frame-style="dots"] .album-cover { padding: 9px 9px 25px; background: #fffaf3 url("/static/textures/polka-rose.svg") repeat-x bottom/24px 24px; border: 1px solid var(--rose-soft); transform: rotate(.25deg); }
.album-card[data-frame-style="dots"] .album-count { background: var(--rose-soft); color: var(--ink); }

/* Only a few photographs get a Polaroid or lace treatment; the rest remain aligned. */
.photo-card:nth-child(7n+1) { padding: 7px 7px 21px; transform: rotate(-.25deg); background: #fffdf8; box-shadow: 0 7px 18px rgba(75,57,48,.1); }
.photo-card:nth-child(7n+1) .photo-caption { margin-bottom: -16px; }
.photo-card:nth-child(9n+4)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 17px; opacity: .34; background: url("/static/textures/lace-strip.svg") repeat-x bottom/70px 18px; }
.photo-card:nth-child(11n+6) { box-shadow: -7px 8px 0 rgba(216,187,182,.18); }
.settings-sheet fieldset, .trash-list, .login-card { background-image: linear-gradient(rgba(250,247,241,.87),rgba(250,247,241,.87)), url("/static/textures/polka-rose.svg"); }

@media (max-width: 1100px) {
  :root { --sidebar: 210px; }
  .album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .photo-grid { columns: 3 210px; }
  .top-location { display: none; }
  .viewer { grid-template-columns: 52px minmax(0,1fr) 52px; grid-template-areas: "prev stage next" "info info info"; grid-template-rows: minmax(0,1fr) auto; }
  .viewer-info { max-height: 190px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px 20px; padding: 14px 20px; }
  .viewer-info dl { display: flex; gap: 22px; grid-column: 2; grid-row: 1/3; }.viewer-info dl div { border: 0; }.viewer-actions { display: flex; margin: 0; }
  .ou-album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.managed-metrics { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 780px) {
  :root { --topbar: 60px; }
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar::after { left: 0; opacity: .52; }
  .menu-button { display: grid; }.brand { min-width: 0; margin-right: auto; gap: 7px; font-size: 17px; }.brand-mark { width: 32px; height: 32px; flex-basis: 32px; display: block; border-width: 2px; }
  .desktop-label, .search-box, .top-actions > a { display: none; }
  .top-actions .button { min-width: 42px; padding: 7px 10px; }.top-actions .button-quiet { width: 42px; }.top-actions .button-quiet .desktop-label { display: none; }
  .app-shell { display: block; }.main-content { padding: 30px 18px 90px; }
  .atmo-issue, .atmo-swatch, .atmo-polaroid-b { display: none; }.atmo-polka { width: 150px; height: 190px; right: -55px; top: 250px; opacity: .12; }.atmo-lace { width: 250px; right: -60px; top: 310px; opacity: .2; }.atmo-polaroid-a { right: -42px; top: 220px; width: 118px; height: 142px; opacity: .13; }
  .page-explore .page-head { padding-left: 14px; }.page-explore .page-head::after { display: none; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 110; width: min(300px,85vw); height: 100dvh; transform: translateX(-105%); visibility: hidden; transition: .2s; box-shadow: 15px 0 40px rgba(45,35,31,.15); }
  .sidebar.open { transform: none; visibility: visible; }.sidebar.open + .nav-scrim { visibility: visible; opacity: 1; z-index: 105; }.mobile-only { display: grid !important; }
  .title-row { align-items: flex-start; flex-direction: column; gap: 20px; }.page-actions { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }.page-actions .button { width: 100%; min-width: 0; padding-inline: 8px; white-space: nowrap; }
  .album-grid { gap: 32px 16px; }.album-card:nth-child(n) .album-cover { transform: none; }.album-meta h2 { font-size: 18px; }
  .page-edge-button { width: 38px; height: 38px; }.page-edge-prev { left: 6px; }.page-edge-next { right: 6px; }.page-edge-button b { font-size: 24px; }
  .photo-grid { columns: initial; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-items: start; }.photo-card, .photo-card:nth-child(7n+1) { display: block; margin: 0; transform: none; }.photo-caption { display: none; }
  .directory-results { grid-template-columns: 1fr; }
  .selection-bar { left: 8px; right: 8px; bottom: max(8px,env(safe-area-inset-bottom)); width: auto; transform: translateY(130%); overflow-x: auto; padding: 9px; }
  .selection-bar.visible { transform: none; }.selection-bar strong { min-width: 95px; }.selection-bar .button { white-space: nowrap; }
  .viewer { grid-template-columns: 45px minmax(0,1fr) 45px; }.viewer-info { max-height: 170px; grid-template-columns: 1fr auto; overflow-y: auto; }.viewer-info dl { display: none; }.viewer-actions { grid-column: 2; grid-row: 1/3; flex-direction: column; }.viewer-info h2 { font-size: 16px; }
  .settings-sheet label { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }.settings-sheet label input:not([type="checkbox"]), .settings-sheet label select { width: 100%; }.settings-sheet .check-row { grid-template-columns: 1fr auto; }.form-footer { align-items: flex-start; gap: 15px; flex-direction: column; }
  .integration-setting-row { grid-template-columns: 1fr; gap: 7px; padding: 14px 0; }.integration-setting-row code { max-width: 100%; text-align: left; }.integration-setting-row .status-pill, .integration-setting-row > b { justify-self: start; }.managed-title-row { align-items: flex-start; flex-direction: column; }.managed-metrics { gap: 8px; }.ou-album-grid { grid-template-columns: 1fr; }.ou-album-card:nth-child(n), .managed-metrics article:nth-child(n) { transform: none; }.managed-local-metrics { grid-template-columns: repeat(2,1fr); }.local-management-panel .managed-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }.integration-boundary { align-items: flex-start; flex-direction: column; }.integration-boundary i { transform: rotate(90deg); }
  .trash-list article { grid-template-columns: 65px 1fr; }.trash-list img { width: 65px; height: 58px; }.trash-list article > div:last-child { grid-column: 1/-1; justify-content: flex-end; }
}

@media (max-width: 480px) {
  h1 { font-size: 29px; }.album-grid { grid-template-columns: 1fr; max-width: 410px; }.album-cover { padding: 8px 8px 18px; }.album-meta { padding-top: 12px; }
  .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.page-head { margin-bottom: 20px; }.subbar { margin-top: 22px; }
  .drawer { padding: 20px 16px; }.drop-zone { min-height: 145px; }.drawer-footer { align-items: flex-start; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }.drawer-footer-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }.form-dialog form { padding: 30px 21px 22px; }.dialog-actions .button { flex: 1; }.login-actions { flex-direction: column-reverse; }
  .viewer { grid-template-columns: 38px minmax(0,1fr) 38px; }.viewer-arrow { font-size: 34px; }
  .integration-empty { padding: 34px 20px; }.managed-metrics { grid-template-columns: 1fr 1fr; }.managed-metrics article { min-height: 105px; padding: 15px; }.managed-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }.local-management-panel { padding-inline: 16px; }.managed-local-metrics { grid-template-columns: 1fr 1fr; }.ou-album-card { grid-template-columns: 92px minmax(0,1fr); }.ou-album-cover { height: 88px; }
}

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

/* Instant interaction mode: keep the collage styling, remove motion latency. */
html { scroll-behavior: auto !important; }
*, *::before, *::after {
  animation: none !important;
  transition: none !important;
}