/* Shared storage and printed photographs. Only their ink outlines wobble. */
.drive-workbench [hidden], .album-library [hidden], .album-workbench [hidden], .photo-lightbox [hidden], .media-file-dialog [hidden] { display: none !important; }
.drive-workbench .theme-menu-content.spring-unfold, .media-file-dialog .theme-menu-content.spring-unfold { display: block; height: 0; overflow: clip; transition: none; }
.drive-workbench .spring-unfold > .theme-menu-inner, .media-file-dialog .spring-unfold > .theme-menu-inner { overflow: visible; opacity: 1; transform: none; transition: none; }
.media-round { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink-soft); font: inherit; cursor: pointer; transition: color var(--t-fast), background var(--t-fast), transform var(--t-base) var(--ease-spring); }
.media-round::before { content: ""; position: absolute; inset: 0; border: 1.3px solid var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.media-round:hover { color: var(--accent-deep); background: var(--accent-soft); transform: translateY(-2px); }
.media-round:active { transform: scale(.94); }
.media-round:disabled { opacity: .4; cursor: default; }
.media-round[aria-pressed="true"], .media-round.is-favorite, .media-round.is-cover { color: var(--accent-deep); background: var(--accent-soft); }
.media-round.is-favorite svg { fill: var(--accent-soft); }
.media-round:focus-visible, .file-open:focus-visible, .album-open:focus-visible, .photo-open:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
.media-view-switch { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px; position: relative; border-radius: 999px; background: var(--paper-2); }
.media-view-switch::before { content: ""; position: absolute; inset: 0; border: 1.2px solid var(--line-soft); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.media-view-switch .media-round::before { border-color: transparent; }
.media-view-switch .media-round[aria-pressed="true"]::before { border-color: var(--line); }
.media-view-switch .btn { box-shadow: none; min-height: 36px; justify-content: center; }
.media-view-switch .btn::before { border-color: transparent; }
.media-view-switch .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-deep); }
.media-view-switch .btn[aria-pressed="true"]::before { border-color: var(--line); }
.media-image { position: relative; isolation: isolate; background: var(--paper-3); }
.media-image img { opacity: 0; transition: opacity 280ms var(--ease-hand); }
.media-image.is-loaded img { opacity: 1; }
.media-image-error { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 8px; color: var(--ink-faint); text-align: center; }
.media-image.is-broken .media-image-error { display: flex; }
.media-image-error small { font-size: var(--fs-11); }
.media-results { position: relative; min-height: 110px; isolation: isolate; }
.media-results > .quick-form-leaving { position: absolute; inset: 0; width: 100%; pointer-events: none; }
.media-results[aria-busy="true"] > :not(.quick-form-leaving) { opacity: .7; transition: opacity var(--t-base); }
.media-search-empty { padding: 30px 12px; text-align: center; color: var(--ink-soft); }
.media-disclosure { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; margin-block: 10px; border: 0; border-radius: 999px; background: var(--paper-3); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.media-disclosure > span:not(.ico) { flex: 1; }
.media-disclosure::before { content: ""; position: absolute; inset: 0; border: 1.2px dashed var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }

/* A directory is a collapsible navigator, never a wall of tools above the files. */
.drive-workbench { grid-template-columns: 232px minmax(0, 1fr); gap: 22px; }
.drive-workbench .drive-side { position: sticky; top: 0; gap: 0; min-width: 0; }
.drive-directory-toggle { position: relative; display: none; grid-template-columns: 28px minmax(0, 1fr) auto 18px; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 8px 15px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink); font: inherit; cursor: pointer; }
.drive-directory-toggle::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.drive-directory-toggle > span:not(.ico) { text-align: left; font-size: var(--fs-14); }
.drive-directory-toggle small { color: var(--ink-faint); font-size: var(--fs-11); white-space: nowrap; }
.drive-directory-inner { display: flex; flex-direction: column; gap: 12px; padding: 2px; }
.drive-workbench .quota-card { border-radius: var(--r-control); box-shadow: none; padding: 14px; }
.drive-workbench .quota-card::before { filter: url(#squiggle); border-style: dashed; }
.drive-workbench .quota-top { gap: 12px; }
.drive-workbench .quota-top strong { font-family: var(--font-display); font-weight: 400; font-size: 29px; line-height: 1.1; }
.drive-workbench .quota-top small { font-size: var(--fs-11); }
.drive-workbench .quota-ico { display: grid; place-items: center; width: 38px; height: 38px; color: var(--sky); }
.drive-workbench .quota-bar { margin: 12px 0 0; height: 7px; }
.drive-directory-list { display: flex; flex-direction: column; gap: 5px; max-height: 64dvh; padding: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.drive-directory-label { padding: 12px 12px 4px; color: var(--ink-faint); font-size: var(--fs-11); }
.drive-workbench .folder-item, .media-file-dialog .folder-item { position: relative; width: 100%; min-width: 0; min-height: 42px; border-radius: 999px; padding: 8px 12px; gap: 8px; }
.drive-workbench .folder-item::before, .media-file-dialog .folder-item::before { content: ""; position: absolute; inset: 0; border: 1.2px solid transparent; border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.drive-workbench .folder-item.is-active { color: var(--accent-deep); }
.drive-workbench .folder-item.is-active::before { border-color: var(--line); }
.drive-folder-row { display: flex; align-items: center; gap: 3px; padding-left: calc(var(--folder-depth) * 10px); }
.drive-folder-row .folder-item { flex: 1; }
.drive-folder-row .folder-more { width: 30px; min-width: 30px; height: 30px; background: transparent; }
.drive-folder-row .folder-more::before { border: 0; }
.drive-workbench .folder-item em { font-size: var(--fs-11); }
.drive-location { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.drive-workbench .drive-crumb { margin: 0; min-width: 0; gap: 4px; }
.drive-workbench .crumb { position: relative; display: inline-flex; align-items: center; border-radius: 999px; min-height: 32px; padding: 5px 11px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-workbench .crumb::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--line-soft); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.drive-search { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 6px 4px 17px; border-radius: 999px; background: var(--paper-2); color: var(--ink-faint); }
.drive-search::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.drive-search:focus-within::before { border-color: var(--accent); }
.drive-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-14); }
.drive-search input::-webkit-search-cancel-button { display: none; }
.drive-search .media-round { width: 36px; height: 36px; background: transparent; }
.drive-search .media-round::before { border: 0; }
.drive-workbench .drive-toolbar { margin: 12px 0; }
.drive-workbench .kind-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding: 2px; scrollbar-width: thin; }
.drive-workbench .kind-chips .chip { flex: none; display: inline-flex; gap: 6px; min-height: 36px; padding: 6px 10px; position: relative; border: 0; border-radius: 999px; background: var(--paper-2); font-size: var(--fs-12); }
.drive-workbench .kind-chips .chip::before { content: ""; position: absolute; inset: 0; border: 1.2px solid var(--line-soft); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.drive-workbench .kind-chips .chip.is-active { color: var(--accent-deep); background: var(--accent-soft); }
.drive-workbench .kind-chips .chip.is-active::before { border-color: var(--accent); }
.drive-workbench .kind-chips em { font-style: normal; color: var(--ink-faint); font-size: var(--fs-11); }
.drive-workbench .drive-drop { display: flex; align-items: stretch; gap: 8px; border: 0; background: transparent; padding: 0; margin-bottom: 16px; border-radius: 999px; }
.drive-drop::before, .drive-drop::after { display: none; }
.drive-drop-pick { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; flex: 1; min-width: 0; min-height: 52px; border: 0; border-radius: 999px; padding: 0; background: var(--paper-2); color: var(--ink-soft); font: inherit; cursor: pointer; }
.drive-drop-pick::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.drive-drop-pick > .ico { justify-self: center; color: var(--accent); }
.drive-drop-pick > span:not(.ico) { min-width: 0; font-size: var(--fs-13); text-align: center; white-space: nowrap; }
.drive-workbench .drive-drop.is-drag .drive-drop-pick { background: var(--accent-soft); transform: scale(1.015); transition: transform var(--t-slow) var(--ease-spring); }
.drive-drop #pick-folder { justify-content: center; padding: 8px 13px; }
.drive-results-heading { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; min-height: 22px; font-size: var(--fs-12); }
.drive-results-heading strong { font-weight: 500; }
#drive-load-status { margin-left: auto; font-size: var(--fs-11); color: var(--ink-faint); }
.drive-subfolders { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 8px; margin-bottom: 14px; }
.drive-subfolder { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; grid-template-rows: auto auto; align-items: center; gap: 0 6px; min-height: 60px; padding: 7px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.drive-subfolder::before { content: ""; position: absolute; inset: 0; border: 1.3px solid var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.drive-subfolder > .ico:first-child { grid-column: 1; grid-row: 1 / 3; justify-self: center; color: var(--mustard); }
.drive-subfolder > .ico:last-child { grid-column: 3; grid-row: 1 / 3; }
.drive-subfolder > span:not(.ico) { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); }
.drive-subfolder small { grid-column: 2; color: var(--ink-faint); font-size: var(--fs-11); }
.drive-workbench .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 12px; }
.drive-workbench .file-card { display: block; border-radius: var(--r-control); padding: 8px; background: var(--paper-2); box-shadow: var(--shadow-paper); overflow: visible; contain: none; }
.drive-workbench .file-card::before { z-index: 3; border-radius: inherit; border-color: var(--line-soft); filter: url(#squiggle); }
.drive-workbench .file-card:hover { transform: translateY(-3px); }
.drive-workbench .file-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: calc(var(--r-control) - 8px); flex-direction: column; gap: 8px; }
.drive-workbench .file-kind-ico { color: var(--sky); }
.file-extension { color: var(--ink-faint); font: 500 11px var(--font-brand); letter-spacing: .12em; }
.drive-workbench .file-kind-tag { left: 7px; bottom: 7px; padding: 2px 8px; background: var(--paper-2); color: var(--ink-soft); }
.drive-workbench .file-meta { padding: 10px 4px 3px; }
.drive-workbench .file-meta strong { font-size: var(--fs-14); padding-right: 2px; }
.drive-workbench .file-meta small { font-size: var(--fs-11); }
.drive-workbench .file-by { margin-top: 5px; }
.drive-workbench .file-by .avatar { --size: 19px; }
.file-open, .album-open, .photo-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; padding: 0; cursor: pointer; }
.file-open { z-index: 4; }
.drive-workbench .file-tools { display: flex; top: 13px; right: 13px; z-index: 5; opacity: 1; }
.drive-workbench .file-tools button { width: 30px; height: 30px; min-width: 30px; padding: 0; border-radius: 50%; background: var(--paper-2); }
.drive-workbench .file-tools button::after { content: ""; position: absolute; inset: -6px; }
.drive-workbench .file-grid.is-list { grid-template-columns: 1fr; gap: 8px; }
.drive-workbench .file-grid.is-list .file-card { display: grid; grid-template-columns: 54px minmax(0, 1fr) 38px; align-items: center; gap: 12px; padding: 8px; border-radius: 999px; }
.drive-workbench .file-grid.is-list .file-thumb { width: 54px; height: 54px; aspect-ratio: 1; border-radius: 50%; }
.drive-workbench .file-grid.is-list .file-kind-tag, .drive-workbench .file-grid.is-list .file-extension { display: none; }
.drive-workbench .file-grid.is-list .file-meta { padding: 0; min-width: 0; }
.drive-workbench .file-grid.is-list .file-by { display: none; }
.drive-workbench .file-grid.is-list .file-tools { position: relative; top: auto; right: auto; }
.drive-workbench .pager { display: flex; flex-direction: column; gap: 7px; align-items: center; margin-top: 16px; }
.drive-workbench .pager small { color: var(--ink-faint); font-size: var(--fs-11); }
.drive-workbench .pager .btn { min-width: 180px; justify-content: center; }
.media-folder-menu { display: grid; gap: 10px; }
.media-folder-menu .btn { width: 100%; justify-content: center; min-height: 44px; }
.media-file-dialog .file-preview-stage { border-radius: var(--r-control); overflow: hidden; padding: 10px; min-height: 260px; }
.media-file-dialog .file-preview-stage img { width: 100%; height: auto; max-height: 56dvh; object-fit: contain; border-radius: 12px; }
.media-file-dialog .file-preview-stage::before { content: ""; position: absolute; inset: 0; border: 1.3px solid var(--line-soft); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.file-text-preview { width: 100%; max-height: 48dvh; margin: 0; padding: 12px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font: var(--fs-13)/1.8 var(--font-ui); }
.media-file-dialog .fp-actions { margin: 12px 0; gap: 7px; }
.media-file-dialog .fp-actions > .btn { justify-content: center; }
.media-file-dialog .fp-organize-inner { padding: 2px 2px 10px; }
.media-file-dialog .fp-share[hidden] { display: none; }
.media-file-dialog .fp-share { border-radius: var(--r-control); overflow-wrap: anywhere; }

/* A shelf of paper albums; the print is not another generic dashboard card. */
.album-library .album-search { margin: 0 0 25px; max-width: 480px; }
.album-library .album-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px 20px; padding: 4px 3px; }
.album-library .album-card { border-radius: var(--r-control); padding: 8px; overflow: visible; contain: none; }
.album-library .album-card::before { border-color: var(--line); border-radius: inherit; filter: url(#squiggle); }
.album-library .album-card::after { content: ""; position: absolute; top: -5px; left: 9%; width: 82%; height: 12px; border: 1.2px solid var(--line-soft); border-radius: 14px 14px 0 0; z-index: -1; background: var(--paper-3); transform: rotate(-1.2deg); filter: url(#squiggle); }
.album-library .album-cover { border-radius: calc(var(--r-control) - 8px); overflow: hidden; aspect-ratio: 4 / 3; }
.album-library .album-cover img { border-radius: inherit; object-fit: cover; }
.album-cover-doodle { display: flex; flex-direction: column; gap: 10px; align-items: center; color: var(--ink-faint); }
.album-cover-doodle > .ico { filter: url(#squiggle); transform: rotate(-7deg); color: var(--sky); }
.album-cover-doodle small { font-size: var(--fs-12); }
.album-library .album-count { left: 8px; bottom: 8px; min-width: 46px; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: var(--fs-12); }
.album-library .album-meta { padding: 11px 5px 5px; }
.album-library .album-meta strong { line-height: 1.5; font-size: var(--fs-17); overflow-wrap: anywhere; }
.album-library .album-meta small { margin-top: 5px; font-size: var(--fs-11); }
.album-library .album-meta .chip { margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.album-open { z-index: 3; }
/* A 44px target sits at the print corner; its 30px ink circle shares the
   card's 22px corner center. Pin every axis against generic button styles. */
.album-library .album-del { position: absolute; top: 0; right: 0; bottom: auto; left: auto; display: inline-flex; align-items: center; justify-content: center; opacity: 1; z-index: 4; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); }
.album-library .album-del::before { inset: 7px; background: var(--paper-2); }
.album-library .album-del::after { display: none; }
.album-library .album-del .ico { position: relative; z-index: 1; }
.album-library .album-del:hover { transform: none; background: transparent; color: var(--clay); }
.album-library .album-del:hover::before { background: var(--clay-soft); }
.album-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.album-workbench { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
.album-main { min-width: 0; }
.album-workbench .album-drop { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 0; width: 100%; min-height: 56px; padding: 0; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); font: inherit; cursor: pointer; }
.album-workbench .album-drop::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--line); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.album-drop > .ico { justify-self: center; color: var(--accent); }
.album-drop > span:not(.ico) { font-size: var(--fs-14); text-align: center; }
.album-workbench .album-drop.is-drag { background: var(--accent-soft); transform: scale(1.015); transition: transform var(--t-slow) var(--ease-spring); }
.album-display { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 8px; }
.album-display > span { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-soft); font-size: var(--fs-13); }
.album-day { min-width: 0; margin-bottom: 24px; }
.album-day h2 { display: flex; align-items: center; gap: 9px; margin: 16px 0 12px; font-family: var(--font-hand); font-size: var(--fs-14); font-weight: 500; }
.album-day h2 small { font-family: var(--font-ui); color: var(--ink-faint); font-size: var(--fs-11); }
.album-workbench .album-photos { display: block; columns: 3 175px; column-gap: 14px; }
.album-workbench .photo-tile { display: inline-block; width: 100%; min-height: 0; margin: 0 0 14px; padding: 7px; break-inside: avoid; border-radius: var(--r-control); contain: none; overflow: visible; vertical-align: top; }
.album-workbench .photo-tile::before { z-index: 3; border-radius: inherit; filter: url(#squiggle); }
.photo-print { border-radius: calc(var(--r-control) - 7px); overflow: hidden; }
.album-workbench .photo-tile img { width: 100%; height: auto; aspect-ratio: auto; border-radius: inherit; object-fit: contain; display: block; }
.album-workbench .photo-print.is-broken { min-height: 130px; }
.album-workbench .photo-tile figcaption { display: block; font-size: var(--fs-13); padding: 2px 4px 3px; margin-top: 7px; line-height: 1.5; }
.album-workbench .photo-tile figcaption > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.album-workbench .photo-tile figcaption > small { display: block; font-size: var(--fs-11); color: var(--ink-faint); margin-top: 4px; }
.photo-open { z-index: 4; cursor: zoom-in; }
.album-workbench .photo-tools { z-index: 5; display: flex; top: 12px; right: 12px; gap: 5px; opacity: 1; }
.album-workbench .photo-tools button { width: 28px; min-width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--paper-2); }
.album-workbench .photo-tools button::after { content: ""; position: absolute; inset: -7px; }
.photo-cover-label { position: absolute; z-index: 3; top: 12px; left: 12px; border-radius: 999px; background: var(--paper-2); color: var(--accent-deep); padding: 3px 8px; font-size: 11px; }
.album-workbench .album-side { order: 0; gap: 14px; }
.album-workbench .album-side > .card { padding: 14px; border-radius: var(--r-control); box-shadow: none; }
.album-workbench .album-side > .card::before { filter: url(#squiggle); }
.album-workbench .card-head { margin-bottom: 12px; }
.album-workbench .card-head h3 { font-size: var(--fs-14); }
.album-photo-section.is-square .album-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.album-photo-section.is-square .photo-tile { margin: 0; }
.album-photo-section.is-square .photo-print { aspect-ratio: 1; display: grid; place-items: center; }
.album-photo-section.is-square .photo-tile img { height: 100%; max-height: 100%; object-fit: contain; }

/* The photograph keeps the same pixels while its frame grows from the thumbnail. */
.photo-lightbox { position: fixed; inset: 0; z-index: 240; isolation: isolate; }
.photo-lightbox-shade { position: absolute; inset: 0; background: #17131e; }
.photo-lightbox-dialog { position: absolute; inset: max(12px, var(--safe-top)) max(16px, var(--safe-right)) max(12px, var(--safe-bottom)) max(16px, var(--safe-left)); max-width: 1450px; margin: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 12px; color: #f7f1e9; outline: none; }
.viewer-head { display: flex; align-items: center; gap: 9px; min-height: 44px; }
.viewer-album { display: flex; align-items: center; min-width: 0; gap: 8px; flex: 1; font-size: var(--fs-14); }
.viewer-album > span:not(.ico) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-count { color: #d2c5dc; font-size: var(--fs-12); white-space: nowrap; }
.photo-lightbox .media-round { background: #302836; color: #f7f1e9; }
.photo-lightbox .media-round::before { border-color: #8e7a97; }
.photo-lightbox .media-round:hover { background: #514058; }
.photo-lightbox .photo-view { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 0; gap: 10px; min-height: 0; align-items: stretch; }
.viewer-prev, .viewer-next { align-self: center; justify-self: center; }
.viewer-stage { position: relative; min-width: 0; min-height: 0; touch-action: pan-y pinch-zoom; cursor: zoom-in; }
.viewer-stage.is-zoomed { touch-action: none; cursor: grab; overflow: hidden; border-radius: 16px; }
.viewer-stage.is-zoomed:active { cursor: grabbing; }
.viewer-images { position: absolute; inset: 0; }
.viewer-images img { position: absolute; display: block; max-width: none; max-height: none; margin: 0; object-fit: contain; border: 5px solid #f6eee2; border-radius: 16px; box-shadow: 0 12px 45px #0006; user-select: none; }
.viewer-loading { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 999px; padding: 7px 14px; background: #302836; color: #e2d5eb; font-size: var(--fs-12); pointer-events: none; }
.viewer-loading:empty { display: none; }
.viewer-error { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 100%; white-space: normal; }
.viewer-error:hover { transform: translate(-50%, -50%); }
.viewer-description { display: flex; align-items: center; gap: 12px; padding-inline: 55px; }
.viewer-description > div { min-width: 0; flex: 1; }
.viewer-description strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: var(--font-hand); font-size: var(--fs-17); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.viewer-description small { display: block; color: #c3b3cd; font-size: var(--fs-11); margin-top: 5px; }
.viewer-description .btn { color: #ede4f3; background: #302836; box-shadow: none; }
.viewer-description .btn::before { border-color: #8e7a97; }
.viewer-filmstrip { display: flex; justify-content: center; gap: 8px; padding: 3px; min-height: 50px; overflow-x: auto; scrollbar-width: thin; }
.viewer-thumb { position: relative; flex: 0 0 48px; width: 48px; height: 48px; border: 0; border-radius: 14px; padding: 4px; background: transparent; cursor: pointer; opacity: .55; transition: opacity var(--t-base), transform var(--t-base) var(--ease-spring); }
.viewer-thumb::before { content: ""; position: absolute; inset: 0; border: 1.4px solid transparent; border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.viewer-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.viewer-thumb.is-current { opacity: 1; transform: translateY(-2px); background: #514058; }
.viewer-thumb.is-current::before { border-color: #e5ba91; }
.viewer-thumb:hover { opacity: 1; }
.photo-lightbox #lb-hugs { justify-self: center; }
.photo-lightbox #lb-hugs .reaction-btn { color: #f7f1e9; background: #302836; }
.photo-lightbox #lb-hugs .reaction-btn::before { border-color: #8e7a97; }
.photo-lightbox.is-closing { pointer-events: none; }

@media (max-width: 1100px) {
  .drive-workbench { grid-template-columns: 205px minmax(0, 1fr); gap: 16px; }
  .album-workbench { grid-template-columns: minmax(0, 1fr) 235px; gap: 16px; }
}
@media (max-width: 980px) {
  .page:has(.drive-workbench) > .page-head .head-kicker { display: none; }
  .page:has(.drive-workbench) > .page-head .head-actions { margin-left: auto; }
  .page:has(.album-workbench) > .page-head .head-actions { flex: 1 1 100%; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; order: 3; }
  .page:has(.album-workbench) > .page-head .head-actions .btn { width: 100%; min-width: 0; min-height: 44px; justify-content: center; font-size: var(--fs-13); }
  .page:has(.album-workbench) .album-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; }
  .page:has(.album-workbench) .album-breadcrumb > .btn { flex: 1; justify-content: center; }
  .drive-workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .drive-workbench .drive-side { position: static; order: 0; }
  .drive-directory-toggle { display: grid; }
  .drive-directory-inner { padding: 12px 2px 3px; }
  .drive-workbench .quota-card { display: none; }
  .drive-directory-list { max-height: 260px; }
  .drive-workbench .folder-item { display: flex; flex: 1; width: 100%; padding: 9px 13px; min-height: 44px; }
  .drive-folder-row .folder-more { width: 36px; min-width: 36px; height: 36px; }
  .drive-workbench .drive-location { margin-bottom: 10px; }
  .drive-workbench .crumb { max-width: 155px; min-height: 36px; }
  .drive-search input { font-size: 16px; }
  .drive-workbench .kind-chips { scrollbar-width: none; }
  .drive-workbench .kind-chips .chip { min-height: 40px; }
  .drive-workbench .drive-drop { margin-bottom: 12px; gap: 7px; }
  .drive-drop-pick { grid-template-columns: 48px minmax(0, 1fr) 12px; min-height: 48px; }
  .drive-drop-pick > .ico:last-child { display: none; }
  .drive-drop-pick > span:not(.ico) { font-size: var(--fs-12); }
  .drive-drop #pick-folder { min-height: 48px; padding: 7px 10px; font-size: var(--fs-12); }
  .drive-workbench .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .drive-workbench .file-card { min-width: 0; }
  .drive-workbench .file-card .file-meta { padding: 9px 3px 3px; }
  .drive-workbench .file-card .file-meta strong { font-size: var(--fs-13); }
  .drive-workbench .file-by { display: none; }
  .drive-workbench .file-grid.is-list .file-card { grid-template-columns: 54px minmax(0, 1fr) 36px; gap: 9px; }
  .drive-workbench .file-grid.is-list .file-meta { padding: 0; }
  .drive-workbench .file-tools button { min-height: 30px; }
  .drive-workbench .pager .btn { width: 100%; }
  .media-file-dialog .file-preview { grid-template-columns: 1fr; gap: 12px; }
  .media-file-dialog .file-preview-stage { min-height: 180px; }
  .media-file-dialog .fp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-file-dialog .fp-actions > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .media-file-dialog .fp-actions > .btn { min-height: 42px; white-space: normal; }
  .media-file-dialog .fp-meta .chip { font-size: var(--fs-11); }
  .album-library .album-search { max-width: none; margin-bottom: 24px; }
  .album-library .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .album-library .album-meta { padding: 9px 3px 4px; }
  .album-library .album-meta strong { font-size: var(--fs-14); }
  .album-library .album-meta small { font-size: var(--fs-11); line-height: 1.5; }
  .album-library .album-meta .chip { font-size: var(--fs-11); }
  .album-breadcrumb { margin-bottom: 9px; }
  .album-breadcrumb .btn { min-height: 36px; }
  .album-workbench { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .album-workbench .album-main { order: 0; }
  .album-workbench .album-side { order: 1; }
  .album-workbench .album-photos { columns: 2; column-gap: 12px; }
  .album-workbench .photo-tile { margin-bottom: 12px; }
  .album-workbench .photo-tools button { min-height: 28px; }
  .album-photo-section.is-square .album-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .album-display { margin-top: 14px; }
  .album-display .btn { min-height: 36px; }
  .album-workbench .photo-tile figcaption { font-size: var(--fs-12); }
  .photo-lightbox-dialog { inset: max(10px, var(--safe-top)) 10px max(10px, var(--safe-bottom)); gap: 10px; }
  .viewer-head { flex-wrap: wrap; gap: 7px; }
  .viewer-head .media-round { width: 40px; min-width: 40px; height: 40px; }
  .viewer-count { font-size: 11px; }
  .photo-lightbox .photo-view { grid-template-columns: minmax(0, 1fr); position: relative; }
  .viewer-prev, .viewer-next { position: absolute; z-index: 3; bottom: 8px; width: 40px; height: 40px; }
  .viewer-prev { left: 7px; } .viewer-next { right: 7px; }
  .viewer-stage { min-height: 150px; }
  .viewer-description { padding-inline: 7px; }
  .viewer-description strong { font-size: var(--fs-14); }
  .viewer-description .btn { min-height: 40px; font-size: var(--fs-12); }
  .viewer-filmstrip { justify-content: flex-start; padding: 4px 6px; min-height: 54px; }
  .viewer-thumb { flex-basis: 46px; width: 46px; height: 46px; }
  .photo-lightbox #lb-hugs { max-width: 100%; overflow-x: auto; padding: 3px; }
}
@media (max-width: 360px) {
  .drive-directory-toggle { grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 6px; }
  .drive-directory-toggle small { display: none; }
  .drive-drop #pick-folder > .ico { display: none; }
  .viewer-album { max-width: 100px; }
  .viewer-head { gap: 5px; }
}
@media (max-height: 540px) {
  .photo-lightbox-dialog { gap: 5px; }
  .viewer-filmstrip { min-height: 36px; }
  .viewer-thumb { height: 34px; width: 34px; flex-basis: 34px; padding: 2px; }
  .photo-lightbox #lb-hugs, .viewer-description small { display: none; }
  .viewer-stage { min-height: 80px; }
}
[data-motion="calm"] .media-image img { transition: none; }
@media (prefers-reduced-motion: reduce) { .media-image img { transition: none; } }

.media-photo-picker { min-width: 0; }
.picker-summary { color: var(--ink-soft); font-size: var(--fs-12); margin: 12px 3px; }
.media-picker-dialog .pick-grid { max-height: 46dvh; padding: 4px; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 13px; }
.media-picker-dialog .pick-tile { display: block; min-width: 0; border-radius: var(--r-control); padding: 6px; background: var(--paper-2); }
.media-picker-dialog .pick-tile::before { content: ""; position: absolute; inset: 0; border: 1.4px solid var(--line-soft); border-radius: inherit; filter: url(#squiggle); pointer-events: none; }
.media-picker-dialog .pick-preview { display: block; border-radius: calc(var(--r-control) - 6px); aspect-ratio: 1; overflow: hidden; }
.media-picker-dialog .pick-preview img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: inherit; }
.media-picker-dialog .pick-tile > span:last-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 3px 1px; font-size: var(--fs-12); }
.media-picker-dialog .pick-check { border-radius: 50%; width: 28px; height: 28px; right: 12px; top: 12px; }
.media-picker-dialog .pick-tile:has(input:checked)::before { border-color: var(--accent); border-width: 2px; }
.media-picker-dialog .pick-tile:has(input:checked) img { transform: none; box-shadow: none; }
.media-picker-dialog .pick-tile:has(input:disabled) { opacity: .55; cursor: default; }
.media-picker-dialog .pick-tile:has(input:focus-visible) { outline: 2px dashed var(--accent); outline-offset: 2px; }
.media-picker-dialog .picker-more { width: 100%; justify-content: center; margin-top: 12px; }
@media (max-width: 560px) { .media-picker-dialog .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }