:root {
  color-scheme: light; --ink: #192831; --muted: #677680; --line: #e4eaee;
  --paper: #f6f8fa; --blue: #2473d3; --teal: #168780; --rail: #101f2b;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--paper);
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; font-size: 13px; }
button, input, select { font: inherit; color: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: wait; opacity: .5; }
a { color: inherit; text-decoration: none; }
svg { width: 19px; height: 19px; flex-shrink: 0; stroke-width: 1.7; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #2473d3; outline-offset: 3px; }
h1, h2, p { margin: 0; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 16px; border-radius: 6px; background: var(--blue); color: #fff; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 3px #19283108; }
.button:hover { background: #1d60b3; }
.icon-button { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: var(--muted); }
.icon-button:hover, .ghost-button:hover { background: #edf2f6; color: var(--ink); }
.ghost-button { padding: 7px 10px; border-radius: 5px; font-weight: 500; }

.app-shell { display: grid; grid-template-columns: 64px 216px minmax(0, 1fr); min-height: 100svh; }
.icon-rail { position: sticky; top: 0; height: 100svh; background: var(--rail); display: flex; flex-direction: column; align-items: center; z-index: 20; padding: 17px 0 16px; color: #a2b6c4; }
.rail-brand { display: grid; place-items: center; height: 34px; margin-bottom: 29px; }
.rail-brand img { width: 30px; height: 30px; }
.icon-rail nav, .rail-bottom { display: flex; flex-direction: column; gap: 13px; align-items: center; }
.rail-bottom { margin-top: auto; }
.rail-button { position: relative; width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; color: #a2b6c4; }
.rail-button:hover { background: #243b4b; color: #fff; }
.rail-button.is-active { background: #1d425c; color: #71c8f7; }
.rail-button.is-active::before { content: ""; position: absolute; left: -12px; width: 3px; height: 22px; background: #65c5f5; border-radius: 0 2px 2px 0; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; background: #294e50; color: #b9eee0; border-radius: 50%; font-size: 10px; font-weight: 600; }
.profile-avatar { display: inline-block; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.profile-avatar svg { display: block; width: 100%; height: 100%; }
.avatar > .profile-avatar { width: 30px; height: 30px; }
.account-identity { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; vertical-align: middle; }
.account-identity-label { min-width: 0; overflow-wrap: anywhere; }
.sidebar { position: sticky; top: 0; height: 100svh; padding: 22px 14px 18px; border-right: 1px solid var(--line); background: #f8fafb; display: flex; flex-direction: column; min-width: 0; }
.brand { margin: 0 9px 27px; }
.brand img { display: block; width: 164px; height: auto; }
.workspace-label { display: flex; align-items: center; gap: 8px; padding: 0 10px 23px; font-size: 11px; font-weight: 500; color: #566a77; }
.workspace-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--teal); }
.tree-heading, .insights-heading, .details-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tree-heading { padding-left: 10px; margin-bottom: 9px; }
.tree-heading h2 { font-size: 11px; color: var(--muted); font-weight: 600; }
.folder-tree { min-height: 0; overflow: auto; flex: 1; }
.tree-row { display: flex; align-items: center; min-height: 39px; border-radius: 5px; margin-bottom: 3px; }
.tree-row:hover { background: #edf2f5; }
.tree-row.is-active { background: #e8f1fc; color: #1d65b6; }
.tree-caret { flex: 0 0 18px; width: 18px; display: grid; place-items: center; padding: 0; color: #81909a; }
.tree-caret svg { width: 12px; height: 12px; }
.tree-caret.is-open svg { transform: rotate(90deg); }
.tree-caret.is-leaf { visibility: hidden; }
.tree-label { display: flex; align-items: center; gap: 9px; padding: 8px 5px 8px 0; min-width: 0; flex: 1; text-align: left; font-size: 12px; font-weight: 500; }
.tree-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-folder-icon { color: #5f94bc; width: 18px; height: 18px; }
.tree-row.is-active .tree-folder-icon { color: var(--blue); }
.sidebar-bottom { border-top: 1px solid var(--line); margin-top: 18px; padding: 17px 9px 0; }
.storage-card { display: flex; align-items: center; gap: 10px; color: #8a9ca7; }
.storage-card strong, .storage-card div > span { display: block; }
.storage-card strong { font-size: 12px; color: var(--ink); margin-bottom: 4px; font-weight: 600; }
.storage-card div > span { font-size: 10px; color: var(--muted); }
.workspace-menu { margin-top: 20px; color: var(--muted); font-size: 11px; }
.workspace-menu summary { cursor: pointer; padding: 5px 0; }
.danger-button { display: flex; align-items: center; gap: 6px; color: #b43b3b; padding: 10px 0; font-size: 11px; }
.danger-button svg { width: 15px; height: 15px; }
.account-email { display: block; margin-top: 12px; font-size: 10px; color: #687982; overflow-wrap: anywhere; }

.workspace { min-width: 0; background: #fff; }
.topbar { position: sticky; top: 0; z-index: 15; background: #fff; height: 66px; border-bottom: 1px solid var(--line); padding: 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.search { display: flex; align-items: center; gap: 10px; width: min(380px, 100%); min-width: 0; color: #7d8c98; }
.search > span { display: flex; }
.search input { width: 100%; min-width: 0; border: 0; background: transparent; height: 38px; font-size: 12px; outline-offset: 0; }
.search input::placeholder { color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.workspace-status { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 10px; color: #687c86; margin-right: 14px; }
.workspace-status > span { width: 6px; height: 6px; border-radius: 50%; background: #2e9d84; }
.page-heading { display: flex; align-items: center; justify-content: space-between; padding: 30px 30px 26px; gap: 16px; }
.page-heading .eyebrow { margin-bottom: 8px; }
.page-heading h1 { font-size: 26px; font-weight: 600; line-height: 1.2; }
.page-subtitle { margin-top: 8px; color: var(--muted); font-size: 12px; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 258px; padding: 0 30px; gap: 28px; }
.library-panel { min-width: 0; }
.library-toolbar { display: flex; align-items: center; gap: 12px; min-height: 40px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.save-folder-photos { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; flex-shrink: 0; }
.save-folder-photos svg { width: 18px; height: 18px; }
.save-folder-photos:disabled { opacity: .45; cursor: default; }
.breadcrumbs { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.breadcrumbs button { padding: 4px 0; font-weight: 500; color: var(--muted); font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs button.is-current { color: var(--ink); font-weight: 600; }
.crumb-sep { color: #9fabb3; font-size: 11px; }
.result-count { margin-left: auto; color: var(--muted); white-space: nowrap; font-size: 11px; }
.filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 0; }
.segment { display: flex; gap: 3px; flex-shrink: 0; }
.segment button { padding: 7px 10px; border-radius: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.segment button:hover { background: #f4f7fa; }
.segment button.is-active { color: #256fc0; background: #edf4fc; font-weight: 600; }
.library-controls { display: flex; align-items: center; gap: 12px; }
.library-controls select { max-width: 130px; border: 0; font-size: 11px; background: #fff; color: var(--muted); padding: 7px 0; }
.view-switch { display: flex; border: 1px solid var(--line); border-radius: 5px; padding: 2px; }
.view-switch .icon-button { width: 27px; height: 27px; flex-basis: 27px; }
.view-switch svg { width: 15px; height: 15px; }
.view-switch .is-active { background: #edf2f6; color: var(--blue); }
.upload-zone { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 22px; border: 1px dashed #cbd9e3; border-radius: 6px; background: #f9fbfd; cursor: pointer; }
.upload-zone:hover, .upload-zone.is-dragging { background: #edf5ff; border-color: #75a9dd; }
.upload-visual { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; color: #4989bc; background: #eaf2fa; border-radius: 6px; }
.upload-visual svg { width: 20px; height: 20px; }
.upload-zone strong, .upload-zone div > span { display: block; }
.upload-zone strong { font-size: 11px; font-weight: 600; }
.upload-zone div > span { font-size: 10px; margin-top: 4px; color: var(--muted); }
.upload-end { margin-left: auto; color: #7396b0; display: flex; }
.upload-zone[aria-disabled="true"] { opacity: .55; cursor: wait; }
.upload-menu { position: fixed; z-index: 80; width: 286px; padding: 8px; border: 1px solid #dce5ee; border-radius: 16px; background: #fff; box-shadow: 0 16px 48px #19283126, 0 3px 12px #1928310f; overflow-y: auto; overscroll-behavior: contain; }
.upload-menu-heading { display: grid; gap: 5px; padding: 9px 12px 12px; }
.upload-menu-heading > strong { font-size: 13px; font-weight: 600; }
.upload-menu-heading > span { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-source { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 9px 12px; border-radius: 9px; text-align: left; }
.upload-source:hover, .upload-source:focus-visible { background: #edf4fc; }
.upload-source:focus-visible { outline-offset: -3px; }
.upload-source-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: #f0f5fa; color: #377bb8; }
.upload-source-icon svg { width: 20px; height: 20px; }
.upload-source > span:last-child { display: grid; gap: 4px; min-width: 0; }
.upload-source strong { font-size: 14px; font-weight: 500; }
.upload-source small { font-size: 11px; line-height: 1.4; color: var(--muted); }
.upload-menu-divider { height: 1px; background: var(--line); margin: 6px 12px; }
.file-input { display: none; }
.upload-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0 18px; }
.upload-progress > span { flex: 1 1 100%; overflow-wrap: anywhere; font-size: 11px; }
.upload-progress progress { flex: 1; height: 5px; accent-color: var(--blue); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
.asset-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; transition: border-color .15s; }
.asset-card:hover { border-color: #a7c4da; }
.asset-card.is-selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.asset-open, .folder-open { display: block; width: 100%; padding: 0; text-align: left; }
.asset-label { display: block; width: 100%; padding: 0; text-align: left; }
.asset-label:hover { background: #f6f9fc; }
.asset-label[aria-pressed="true"] { background: #edf4fc; }
.thumb { position: relative; aspect-ratio: 16 / 11; width: 100%; min-width: 0; min-height: 0; background: #edf2f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb > img, .thumb > video { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.thumb > svg { width: 38px; height: 38px; color: #5d9ac3; fill: #dbeaf7; stroke-width: 1.1; }
.asset-kind { position: absolute; bottom: 8px; left: 8px; border-radius: 3px; font-size: 9px; background: #ffffffed; color: #43545f; padding: 3px 5px; }
.play-indicator { position: absolute; width: 34px; height: 34px; background: #142936b3; border: 1px solid #ffffffa3; border-radius: 50%; color: #fff; display: grid; place-items: center; }
.play-indicator svg { width: 15px; height: 15px; fill: #fff; margin-left: 2px; }
.asset-info { padding: 12px 36px 12px 11px; min-width: 0; }
.asset-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.asset-info > span { display: block; color: #677680; font-size: 11px; margin-top: 5px; }
.asset-select, .folder-delete { position: absolute; right: 5px; bottom: 12px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 4px; color: #71828e; }
.asset-select svg, .folder-delete svg { width: 15px; height: 15px; }
.asset-select:hover { background: #edf4fc; color: var(--blue); }
.asset-select[aria-pressed="true"] { color: var(--blue); }
.folder-delete:hover { background: #fceeee; color: #b43b3b; }
.folder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.folder-card { background: #f9fbfd; }
.folder-card .folder-open { display: flex; align-items: center; gap: 10px; padding: 10px 36px 10px 12px; }
.folder-card .thumb { width: 28px; height: 36px; flex: 0 0 28px; aspect-ratio: auto; background: none; }
.folder-card .thumb > svg { width: 25px; height: 25px; }
.folder-card .asset-info { padding: 0; }
.folder-card .folder-delete { bottom: 15px; }
.preview-unavailable::after { content: attr(data-preview-error); position: absolute; color: var(--muted); font-size: 11px; }
.preview-unavailable > img, .preview-unavailable > video { opacity: 0; }
.is-dragging { opacity: .5; }
.is-drop-target { outline: 2px solid var(--blue); outline-offset: -2px; background: #edf4fc; }
.gallery-grid.is-list { display: flex; flex-direction: column; gap: 0; }
.is-list .asset-card { display: flex; align-items: center; gap: 12px; padding: 10px 40px 10px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; min-height: 76px; overflow: visible; }
.is-list .asset-card.is-selected { background: #f0f6fe; box-shadow: none; }
.is-list .asset-open { width: 76px; flex: 0 0 76px; }
.is-list .folder-open { display: flex; align-items: center; gap: 12px; }
.is-list .asset-label { width: auto; min-width: 0; flex: 1; align-self: stretch; display: flex; align-items: center; }
.is-list .thumb { width: 76px; flex: 0 0 76px; aspect-ratio: 16 / 11; border-radius: 4px; }
.is-list .thumb > svg { width: 25px; height: 25px; }
.is-list .asset-kind { display: none; }
.is-list .play-indicator { width: 24px; height: 24px; }
.is-list .asset-info { padding: 0; flex: 1; }
.is-list .asset-select, .is-list .folder-delete { bottom: 24px; }
.empty-state { min-height: 310px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; text-align: center; color: var(--muted); }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; background: #edf4fc; color: #6c9bc8; margin-bottom: 4px; }
.empty-icon svg { width: 25px; height: 25px; }
.empty-state strong { font-weight: 600; color: var(--ink); font-size: 15px; }
.empty-state > span:not(.empty-icon) { font-size: 12px; }
.empty-state .button { margin-top: 5px; }
.library-footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 26px; padding: 16px 0 22px; color: var(--muted); font-size: 11px; }

.insights-panel { border-left: 1px solid var(--line); padding-left: 24px; min-width: 0; }
.insights-heading { height: 41px; border-bottom: 1px solid var(--line); }
.insights-panel h2 { font-size: 13px; font-weight: 600; }
.composition { padding: 23px 0 19px; }
.composition-ring { width: 128px; height: 128px; margin: 0 auto 22px; border-radius: 50%; padding: 9px; background: conic-gradient(var(--blue) 0 var(--image-share, 0%), var(--teal) var(--image-share, 0%) 100%); }
.composition-ring.is-empty { background: #e9eef2; }
.composition-ring > div { height: 100%; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.composition-ring strong { font-size: 26px; font-weight: 600; }
.composition-ring div > span { font-size: 10px; color: var(--muted); margin-top: 3px; }
.composition-legend { display: flex; flex-direction: column; gap: 12px; }
.composition-legend > div { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.composition-legend strong { margin-left: auto; color: var(--ink); font-size: 11px; font-weight: 500; }
.legend-dot { width: 7px; height: 7px; border-radius: 2px; }
.images-dot { background: var(--blue); }
.videos-dot { background: var(--teal); }
.overview-stats { margin: 0; padding: 18px 0 23px; border-top: 1px solid var(--line); display: grid; gap: 13px; }
.overview-stats > div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.overview-stats dt { color: var(--muted); }
.overview-stats dd { margin: 0; font-weight: 500; }
.file-details { border-top: 1px solid var(--line); padding-top: 17px; }
.details-heading { min-height: 34px; }
.details-empty { padding: 32px 0 24px; display: flex; align-items: center; flex-direction: column; gap: 13px; color: #91a2ae; }
.details-empty svg { width: 31px; height: 31px; stroke-width: 1.2; }
.details-empty strong { color: var(--muted); font-size: 11px; font-weight: 400; }
.detail-preview { margin: 13px 0; padding: 0; aspect-ratio: 16 / 10; width: 100%; min-width: 0; min-height: 0; overflow: hidden; border-radius: 5px; background: #eff3f6; display: flex; align-items: center; justify-content: center; }
.detail-preview img, .detail-preview video { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.detail-name { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.5; }
.file-metadata { margin: 17px 0; display: grid; gap: 13px; }
.file-metadata > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; font-size: 10px; line-height: 1.5; }
.file-metadata dt { color: var(--muted); }
.file-metadata dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.detail-actions { display: flex; gap: 8px; padding-bottom: 22px; }
.detail-actions .button { flex: 1; min-height: 34px; font-size: 11px; padding: 8px; }
.detail-actions > .icon-button { border: 1px solid var(--line); }
.mobile-folders, .close-insights { display: none; }

/* Keep Safari's document tall enough to avoid automatic scaling while the body is fixed. */
html.ios-viewer-open, html.ios-viewer-open body { min-height: 100vh; min-height: 100lvh; }
.viewer { position: fixed; inset: 0; z-index: 100; display: flex; padding: 0; overscroll-behavior: none; }
.viewer-backdrop { position: absolute; inset: 0; background: #080c10; }
.viewer-panel { position: relative; width: 100%; min-width: 0; height: 100%; min-height: 0; background: #080c10; color: #f7f9fc; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; }
.viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: #111820; }
.viewer-heading { min-width: 0; }
.viewer-header .eyebrow { font-size: 10px; color: #a8b6c4; }
.viewer-header h2 { font-size: 15px; font-weight: 600; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-header .viewer-heading > span { display: block; font-size: 11px; color: #a8b6c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-actions { display: flex; flex-shrink: 0; }
.viewer-stage { position: relative; background: #080c10; display: flex; align-items: center; justify-content: center; flex: 1 1 0%; min-height: 0; min-width: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.viewer-stage img, .viewer-stage video { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center center; }
.viewer-stage .viewer-placeholder { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; pointer-events: none; }
.viewer-stage [data-viewer-media] { position: relative; }
.viewer-stage img { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-drag: none; }
.viewer-footer { flex: 0 0 auto; padding: 4px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: #111820; border-top: 1px solid #ffffff12; }
.viewer-preferences-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.viewer-position { flex-shrink: 0; color: #a8b6c4; font-size: 11px; font-variant-numeric: tabular-nums; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.viewer-navigation { display: flex; gap: 20px; }
.viewer .icon-button, .viewer .file-preferences button { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; color: #d8e5f3; }
.viewer .icon-button:hover, .viewer .file-preferences button:hover, .viewer .file-preferences button:focus-visible { color: #fff; background: #ffffff14; }
.viewer .icon-button:disabled { cursor: default; opacity: .3; }
.viewer .icon-button svg { width: 22px; height: 22px; }
.viewer .file-preferences { gap: 0; padding: 0; }
.viewer .file-stars { gap: 0; }
.viewer .file-preferences svg { width: 21px; height: 21px; }
.viewer .file-stars [aria-pressed="true"] { color: #f3c66b; }
.viewer .file-heart[aria-pressed="true"] { color: #ff6b96; }
.viewer :focus-visible { outline-color: #8dc5ff; outline-offset: -3px; }
@media (min-width: 700px) {
  .viewer-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .viewer-preferences-row { gap: 16px; }
  .viewer-toolbar { gap: 20px; }
}
@media (max-width: 359px) {
  .viewer-preferences-row { flex-wrap: wrap; gap: 0; }
  .viewer-position { margin-left: auto; }
  .viewer-toolbar { gap: 6px; }
  .viewer-navigation { gap: 0; }
}
@media (max-height: 450px) and (orientation: landscape) {
  .viewer-header { padding-top: max(4px, env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
  .viewer-header .eyebrow, .viewer-header .viewer-heading > span { display: none; }
  .viewer-footer { display: flex; align-items: center; gap: 8px; padding-top: 0; padding-bottom: max(2px, env(safe-area-inset-bottom, 0px)); }
  .viewer-preferences-row { flex: 1; gap: 4px; }
  .viewer-toolbar { gap: 4px; }
  .viewer-navigation { gap: 0; }
}
@media (max-width: 620px) and (max-height: 450px) and (orientation: landscape) {
  .viewer-position { display: none; }
  .viewer-footer { flex-wrap: wrap; }
  .viewer-preferences-row, .viewer-toolbar { flex: 1 1 100%; }
}
.viewer-stage .media-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; color: #d4dfe7; text-align: center; pointer-events: none; }
.viewer-stage .media-error { pointer-events: auto; }
.viewer-stage .media-status .button { min-height: 44px; }
.viewer-ios-only, .viewer-filmstrip, .viewer-show-controls, .viewer-menu-label { display: none; }
.viewer:not(.viewer--ios) .viewer-menu { display: flex !important; align-items: center; gap: inherit; }
.viewer:not(.viewer--ios) .viewer-ratings { display: block !important; position: static; padding: 0; background: none; border: 0; box-shadow: none; }
.viewer:not(.viewer--ios) .viewer-ratings .viewer-sheet-heading, .viewer:not(.viewer--ios) .viewer-menu-dismiss { display: none; }
.viewer-sheet { position: absolute; z-index: 5; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); max-height: min(60%, 420px); overflow-y: auto; padding: 14px 18px 20px; border: 1px solid #ffffff18; border-radius: 22px; background: #222222ed; box-shadow: 0 10px 48px #0008; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.viewer-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.viewer-sheet-heading h3 { margin: 0; font-size: 16px; font-weight: 600; }
.viewer-sheet-heading .icon-button { flex-shrink: 0; }
[data-viewer-details-body] { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
[data-viewer-details-body] dl { display: grid; gap: 12px; margin: 0; }
[data-viewer-details-body] dl > div { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(0, 2fr); gap: 14px; }
[data-viewer-details-body] dt { color: #a7a7ad; }
[data-viewer-details-body] dd { margin: 0; text-align: right; }
.viewer--ios { --ink: #f5f5f7; --muted: #a7a7ad; --line: #ffffff18; --blue: #0a84ff; color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
.viewer--ios .viewer-backdrop, .viewer--ios .viewer-panel, .viewer--ios .viewer-stage { background: #000; }
.viewer--ios .viewer-header { position: relative; z-index: 2; justify-content: center; min-height: calc(76px + env(safe-area-inset-top, 0px)); padding: calc(12px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 12px max(18px, env(safe-area-inset-left, 0px)); background: #000; }
.viewer--ios .viewer-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.viewer--ios .viewer-date-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 142px; max-width: calc(100% - 120px); min-height: 44px; padding: 5px 15px; border-radius: 999px; border: 1px solid #ffffff0c; background: #252525bc; box-shadow: inset 0 1px 1px #ffffff0c, 0 2px 9px #0004; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); text-align: center; }
.viewer-date-pill strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; font-weight: 600; }
.viewer-date-pill span { font-size: 11px; line-height: 14px; font-weight: 500; }
.viewer--ios .viewer-actions { position: absolute; left: max(18px, env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); }
.viewer--ios .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; color: #f5f5f7; border-radius: 50%; }
.viewer--ios .icon-button svg { width: 24px; height: 24px; stroke-width: 1.65; }
.viewer--ios .viewer-back, .viewer--ios .viewer-more, .viewer--ios .viewer-share, .viewer--ios .viewer-delete, .viewer--ios .viewer-tools { border: 1px solid #ffffff0a; background: #252525bc; box-shadow: inset 0 1px 1px #ffffff0c, 0 2px 9px #0004; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.viewer--ios .viewer-back svg { width: 28px; height: 28px; stroke-width: 2; }
.viewer--ios .viewer-more { display: inline-flex; position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); }
.viewer--ios .viewer-footer { position: static; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 4px max(24px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); border: 0; background: #000; }
.viewer--ios .viewer-preferences-row { height: 0; min-height: 0; flex: 0 0 0; padding: 0; }
.viewer--ios .viewer-position { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.viewer--ios .viewer-toolbar { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; }
.viewer--ios .viewer-share, .viewer--ios .viewer-delete { width: 48px; height: 48px; flex: 0 0 48px; }
.viewer--ios .viewer-tools { display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; }
.viewer--ios [data-viewer-favorite][aria-pressed="true"] svg { fill: currentColor; }
.viewer--ios [data-viewer-info][aria-expanded="true"], .viewer--ios [data-viewer-adjustments][aria-expanded="true"] { color: #0a84ff; }
.viewer--ios .icon-button:hover { background-color: #ffffff14; color: #fff; }
.viewer--ios .viewer-navigation { display: none; }
.viewer--ios .viewer-filmstrip { display: flex; align-items: center; align-self: center; gap: 2px; width: calc(100% + 24px); min-height: 54px; overflow-x: auto; overflow-y: hidden; padding: 3px 6px; scroll-padding-inline: 6px; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.viewer--ios .viewer-filmstrip::-webkit-scrollbar { display: none; }
.viewer--ios .viewer-filmstrip:empty { display: none; }
.viewer-thumbnail { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 48px; min-width: 44px; min-height: 44px; flex: 0 0 44px; padding: 3px 6px; border-radius: 5px; overflow: hidden; }
.viewer-thumbnail::before { content: ""; position: absolute; width: 32px; height: 40px; border-radius: 3px; background: #171719; }
.viewer-thumbnail img, .viewer-thumbnail video { position: relative; z-index: 1; display: block; width: 32px; height: 40px; max-width: none; border-radius: 3px; object-fit: cover; background: #151515; pointer-events: none; }
.viewer-thumbnail[aria-current="true"] { padding-inline: 2px; }
.viewer-thumbnail[aria-current="true"]::before { width: 40px; height: 46px; border: 1.5px solid #ffffffd9; }
.viewer-thumbnail[aria-current="true"] img, .viewer-thumbnail[aria-current="true"] video { width: 40px; height: 46px; box-shadow: 0 0 0 1.5px #ffffffd9; }
.viewer-thumbnail.preview-unavailable::after { content: "…"; position: absolute; z-index: 1; color: #ffffff80; font-size: 15px; }
.viewer-thumbnail-video { position: absolute; z-index: 2; right: 8px; bottom: 5px; display: inline-flex; align-items: center; gap: 2px; max-width: 30px; padding: 1px 2px; border-radius: 2px; color: #fff; background: #0008; font-size: 8px; font-variant-numeric: tabular-nums; pointer-events: none; }
.viewer-thumbnail-video svg { width: 9px; height: 9px; }
.viewer-thumbnail[aria-current="true"] .viewer-thumbnail-video { right: 3px; bottom: 3px; }
.viewer--ios .viewer-menu { position: absolute; z-index: 6; top: calc(70px + env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); width: min(260px, calc(100% - 36px)); padding: 8px; border: 1px solid #ffffff18; border-radius: 20px; background: #252525ed; box-shadow: 0 8px 36px #0009; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.viewer--ios .viewer-menu:not([hidden]) { display: flex; flex-direction: column; gap: 4px; }
.viewer--ios .viewer-menu .icon-button { justify-content: flex-start; gap: 12px; width: 100%; flex: 0 0 44px; padding: 8px 10px; border-radius: 12px; }
.viewer--ios .viewer-menu .viewer-menu-dismiss { justify-content: center; align-self: flex-end; width: 44px; padding: 8px; }
.viewer--ios .viewer-menu-label { display: inline; font-size: 14px; }
.viewer--ios .viewer-menu [data-download] svg { order: -1; }
.viewer--ios .viewer-ratings .file-preferences { justify-content: center; }
.viewer--ios .viewer-sheet .ghost-button { min-height: 44px; }
.viewer--ios .viewer-sheet .ghost-button:hover { background: #ffffff14; color: #fff; }
.viewer--ios .viewer-show-controls { position: absolute; z-index: 7; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); background: #2229; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.viewer--ios.viewer--immersive .viewer-header, .viewer--ios.viewer--immersive .viewer-footer { display: none; }
.viewer--ios.viewer--immersive .viewer-show-controls { display: inline-flex; }
@media (orientation: landscape) {
  .viewer--ios .viewer-header { z-index: auto; min-height: calc(68px + env(safe-area-inset-top, 0px)); padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
  .viewer--ios .viewer-actions, .viewer--ios .viewer-more { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .viewer--ios .viewer-date-pill { width: 142px; max-width: calc(100% - 380px); }
  .viewer--ios .viewer-footer { z-index: auto; flex: 0 0 auto; gap: 0; padding-top: 2px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .viewer--ios .viewer-filmstrip { width: min(100%, 760px); }
  .viewer--ios .viewer-toolbar, .viewer--ios .viewer-tools { display: contents; }
  .viewer--ios .viewer-toolbar::before, .viewer--ios .viewer-toolbar::after { content: ""; position: absolute; z-index: 2; top: calc(12px + env(safe-area-inset-top, 0px)); height: 44px; border: 1px solid #ffffff0a; border-radius: 999px; background: #252525bc; box-shadow: inset 0 1px 1px #ffffff0c; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .viewer--ios .viewer-toolbar::before { left: calc(max(18px, env(safe-area-inset-left, 0px)) + 56px); width: 94px; }
  .viewer--ios .viewer-toolbar::after { right: max(18px, env(safe-area-inset-right, 0px)); width: 184px; }
  .viewer--ios .viewer-share, .viewer--ios .viewer-delete, .viewer--ios .viewer-tools .icon-button { position: absolute; z-index: 3; top: calc(12px + env(safe-area-inset-top, 0px)); width: 44px; height: 44px; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .viewer--ios .viewer-share { left: calc(max(18px, env(safe-area-inset-left, 0px)) + 59px); }
  .viewer--ios [data-viewer-favorite] { left: calc(max(18px, env(safe-area-inset-left, 0px)) + 103px); }
  .viewer--ios [data-viewer-adjustments] { right: calc(max(18px, env(safe-area-inset-right, 0px)) + 138px); }
  .viewer--ios [data-viewer-info] { right: calc(max(18px, env(safe-area-inset-right, 0px)) + 92px); }
  .viewer--ios .viewer-delete { right: calc(max(18px, env(safe-area-inset-right, 0px)) + 46px); }
  .viewer--ios .viewer-more { z-index: 3; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .viewer--ios .viewer-sheet { right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(74px + env(safe-area-inset-bottom, 0px)); left: auto; width: min(380px, calc(100% - 36px)); max-height: calc(100% - 146px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .viewer *, .viewer *::before, .viewer *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.media-error { color: #d4dfe7; padding: 30px; text-align: center; font-size: 12px; }
.drop-overlay { position: fixed; inset: 12px; z-index: 90; pointer-events: none; opacity: 0; display: grid; place-items: center; border: 2px dashed #6ea4d8; border-radius: 8px; background: #eff7ffef; transition: opacity .15s; }
.drop-overlay.is-visible { opacity: 1; }
.drop-overlay > div { display: flex; flex-direction: column; align-items: center; gap: 17px; text-align: center; color: #2269ac; padding: 20px; }
.drop-overlay svg { width: 44px; height: 44px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 12px); z-index: 110; max-width: min(560px, calc(100vw - 30px)); padding: 13px 18px; border-radius: 6px; background: var(--rail); color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transition: .15s; box-shadow: 0 5px 20px #0002; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.viewer--ios:not([hidden]) ~ .toast { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); border-radius: 999px; background: #252525ed; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.viewer--ios:not([hidden]) ~ .toast:not(.is-visible) { visibility: hidden; }
@media (orientation: landscape) {
  .viewer--ios:not([hidden]) ~ .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

.auth-page { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 20px; background: #f6f8fa; }
.auth-page > a { margin-bottom: 28px; }
.auth-page > a img { display: block; width: 184px; height: auto; }
.auth-panel { width: min(390px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.auth-panel h1 { font-size: 23px; font-weight: 600; line-height: 1.3; margin: 10px 0 24px; }
.auth-panel label { display: grid; gap: 8px; margin: 16px 0; font-size: 12px; font-weight: 500; }
.auth-panel input { min-width: 0; width: 100%; height: 44px; padding: 10px 12px; border: 1px solid #d9e2e9; border-radius: 5px; background: #fff; font-size: 16px; }
.auth-panel .button { width: 100%; min-height: 44px; margin-top: 6px; }
.auth-copy { color: var(--muted); font-size: 13px; line-height: 1.6; margin: -10px 0 24px; }
.auth-panel label small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.auth-switch { margin: 24px 0 0; font-size: 12px; text-align: center; }
.auth-setup { margin: 20px 0 0; font-size: 11px; text-align: center; }
.auth-panel p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.google-button { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #d9e2e9; border-radius: 5px; padding: 12px; margin-bottom: 20px; font-size: 12px; font-weight: 500; }
.google-button img { width: 20px; height: 20px; }
.auth-error { color: #b43b3b; font-size: 12px; line-height: 1.5; }
.auth-error:empty { display: none; }
.auth-footer { color: var(--muted); font-size: 11px; margin-top: 24px; }

@media (min-width: 1680px) {
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .content-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 1240px) {
  .app-shell { grid-template-columns: 60px 196px minmax(0, 1fr); }
  .content-layout { grid-template-columns: minmax(0, 1fr); }
  .insights-panel { display: none; }
  .inspector-open .insights-panel { display: block; position: fixed; right: 0; top: 66px; bottom: 0; overflow: auto; width: min(300px, calc(100vw - 60px)); background: #fff; box-shadow: -12px 0 32px #19283115; z-index: 30; padding: 17px 22px; }
  .close-insights { display: inline-flex; }
  .workspace-status { display: none; }
}
@media (min-width: 1241px) { .topbar [data-toggle-insights] { display: none; } }
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 48px minmax(0, 1fr); }
  .icon-rail { padding-top: 18px; }
  .rail-button { width: 34px; height: 36px; }
  .rail-button.is-active::before { left: -7px; }
  .rail-brand img { width: 27px; height: 27px; }
  .sidebar { display: none; }
  .folders-open .sidebar { display: flex; position: fixed; top: 66px; bottom: 0; left: 48px; width: min(240px, calc(100vw - 48px)); height: auto; z-index: 30; box-shadow: 10px 0 24px #19283115; }
  .mobile-folders { display: inline-flex; }
  .topbar { padding: 0 13px; gap: 8px; }
  .topbar-actions { gap: 1px; }
  .search { gap: 7px; }
  .search > span { display: none; }
  .search input { font-size: 11px; }
  .page-heading { padding: 24px 18px 23px; }
  .page-heading h1 { font-size: 22px; }
  .page-heading .button { font-size: 11px; padding: 9px 11px; min-height: 36px; }
  .page-heading .eyebrow { font-size: 9px; }
  .page-subtitle { font-size: 10px; }
  .content-layout { padding: 0 18px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .folder-grid { gap: 8px; }
  .folder-card .folder-open { gap: 6px; padding: 9px 27px 9px 8px; }
  .folder-card .thumb { width: 20px; flex-basis: 20px; }
  .folder-card .thumb > svg { width: 20px; height: 20px; }
  .folder-card .folder-delete { bottom: 15px; }
  .filter-toolbar { flex-wrap: wrap; gap: 12px; padding: 14px 0; }
  .library-controls { margin-left: auto; gap: 9px; }
  .segment button { padding: 7px 8px; font-size: 10px; }
  .upload-zone { padding: 11px; gap: 9px; margin-bottom: 17px; }
  .upload-zone strong { font-size: 10px; }
  .upload-zone div > span { font-size: 9px; }
  .asset-info { padding: 10px 29px 10px 9px; }
  .asset-info strong { font-size: 10px; }
  .asset-info > span { font-size: 9px; }
  .asset-select, .folder-delete { right: 2px; bottom: 9px; }
  .library-footer > span:last-child { display: none; }
}
@media (max-width: 380px) { .page-heading > .button { font-size: 0; width: 36px; min-width: 36px; padding: 8px; } }
@media (max-width: 760px) {
  .rail-button[data-upload-trigger], .rail-button[data-upload-folder-trigger] { width: 44px; height: 44px; }
  .page-heading > [data-upload-trigger], .empty-state > [data-upload-trigger] { min-height: 44px; min-width: 44px; }
  .upload-zone { min-height: 68px; }
  .upload-zone strong { font-size: 12px; }
  .upload-zone div > span { font-size: 11px; line-height: 1.4; }
  .upload-menu { width: 294px; border-radius: 18px; }
  .upload-source { min-height: 64px; }
  .upload-source strong { font-size: 15px; }
  .upload-source small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Per-item conversations */
.conversation-button { position: absolute; bottom: 12px; right: 34px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 4px; color: #71828e; }
.conversation-button svg { width: 15px; height: 15px; }
.conversation-button:hover { background: #edf4fc; color: var(--blue); }
.asset-card .asset-info { padding-right: 66px; }
.folder-card .folder-open { padding-right: 66px; }
.folder-card .asset-info { padding-right: 0; }
.folder-card .conversation-button { bottom: 15px; }
.is-list .conversation-button { bottom: 24px; }
.is-list .asset-card { padding-right: 70px; }
.is-list .asset-info { padding-right: 0; }
.discussion-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100svh - 40px); padding: 24px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); box-shadow: 0 22px 90px #0004; overflow: auto; margin: auto; }
.discussion-dialog::backdrop { background: #07131eb3; }
.discussion-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.discussion-heading > div { min-width: 0; }
.discussion-heading h2 { margin: 8px 0; font-size: 20px; overflow-wrap: anywhere; }
.discussion-heading p:not(.eyebrow) { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; line-height: 1.6; }
.discussion-status { margin: 12px 0; min-height: 18px; color: #258578; font-size: 11px; }
.discussion-error { color: #b43b3b; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; margin-bottom: 12px; }
.discussion-error:empty { display: none; }
.discussion-tabs { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.discussion-messages { height: min(340px, 38svh); overflow-y: auto; overscroll-behavior: contain; padding: 12px 4px; }
.discussion-messages article { margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #f9fbfd; }
.discussion-messages header { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; }
.discussion-messages strong { font-size: 11px; overflow-wrap: anywhere; }
.discussion-messages time { font-size: 10px; color: var(--muted); }
.discussion-messages article p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; margin-top: 8px; }
.discussion-empty { color: var(--muted); padding: 34px 12px; text-align: center; font-size: 12px; line-height: 1.6; }
.discussion-earlier { margin-top: 12px; }
.discussion-composer textarea { width: 100%; min-height: 76px; max-height: 200px; resize: vertical; padding: 12px; border: 1px solid #d9e2e9; border-radius: 5px; font: inherit; font-size: 13px; }
.discussion-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.discussion-composer span { font-size: 10px; color: var(--muted); line-height: 1.5; }
.discussion-composer .button { flex-shrink: 0; }
.discussion-sharing { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.discussion-sharing summary { font-size: 12px; cursor: pointer; font-weight: 500; }
.discussion-sharing p { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.discussion-sharing form { display: flex; align-items: flex-end; gap: 10px; }
.discussion-sharing label { display: grid; gap: 6px; font-size: 11px; flex: 1; min-width: 0; }
.discussion-sharing input { width: 100%; min-width: 0; height: 40px; padding: 10px; border: 1px solid #d9e2e9; border-radius: 5px; }
.discussion-people > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; font-size: 11px; }
.discussion-people span { overflow-wrap: anywhere; }
.discussion-inbox { min-height: 170px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.shared-conversation { display: grid; gap: 6px; width: 100%; padding: 14px; margin: 8px 0; text-align: left; border: 1px solid var(--line); border-radius: 6px; }
.shared-conversation:hover { background: #edf4fc; }
.shared-conversation strong { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.shared-conversation span { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .conversation-button { bottom: 9px; right: 29px; }
  .asset-card .asset-info { padding-right: 56px; }
  .folder-card .folder-open { padding-right: 56px; }
  .folder-card .asset-info, .is-list .asset-info { padding-right: 0; }
  .discussion-dialog { padding: 18px; }
  .discussion-composer > div { align-items: flex-end; }
  .discussion-sharing form { flex-direction: column; align-items: stretch; }
}

/* S3 storage mounts */
.mount-launch { display: flex; align-items: center; gap: 8px; justify-content: flex-start; margin-bottom: 12px; width: 100%; }
.mount-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100svh - 40px); margin: auto; padding: 26px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); box-shadow: 0 22px 90px #0004; overflow: auto; }
.mount-dialog::backdrop { background: #07131eb3; }
.mount-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mount-heading h2 { margin: 8px 0 12px; font-size: 23px; }
.mount-description, .mount-note { font-size: 12px; line-height: 1.7; color: var(--muted); }
.mount-form { display: grid; gap: 14px; margin-top: 20px; }
.mount-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mount-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 500; }
.mount-form label span, .mount-form small { color: var(--muted); font-weight: 400; font-size: 11px; }
.mount-form .mount-label { color: var(--ink); font-size: 12px; font-weight: 500; }
.mount-form input:not([type=checkbox]) { width: 100%; min-width: 0; height: 40px; border: 1px solid #d9e2e9; border-radius: 5px; padding: 10px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); }
.mount-form input:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.mount-form .mount-checkbox { display: flex; align-items: center; gap: 9px; line-height: 1.5; }
.mount-checkbox input { width: 16px; height: 16px; accent-color: var(--blue); flex-shrink: 0; }
.mount-form summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.mount-form details label { margin-top: 12px; }
.mount-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.mount-actions > :first-child { margin-right: auto; }
.mount-error { color: #b43b3b; font-size: 12px; line-height: 1.5; }
.mount-status { color: #258578; font-size: 12px; line-height: 1.5; }
.mount-error:empty, .mount-status:empty { display: none; }
.mount-list { margin-top: 18px; }
.mount-list > p { padding: 10px 0; color: var(--muted); font-size: 12px; }
.mount-list article { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 12px; border-radius: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.mount-list article > div { display: grid; flex: 1; min-width: 120px; gap: 6px; overflow-wrap: anywhere; }
.mount-list strong { font-size: 12px; }
.mount-list span { font-size: 10px; color: var(--muted); }
.mount-dialog button:disabled { opacity: .5; cursor: wait; }
@media (max-width: 600px) { .mount-dialog { padding: 18px; } .mount-fields { grid-template-columns: 1fr; } .mount-actions { justify-content: flex-start; } .mount-actions .button { margin-left: auto; } }

/* Friends, inbox, and live chat share an accessible communication workspace. */
.social-dialog { width: min(1180px, calc(100vw - 40px)); height: min(830px, calc(100svh - 40px)); max-width: none; max-height: none; border: 1px solid var(--line); border-radius: 12px; padding: 0; color: var(--ink); background: #fff; box-shadow: 0 24px 100px #101f2b40; overflow: hidden; }
.social-dialog[open] { display: flex; flex-direction: column; }
.social-dialog::backdrop { background: #101f2b88; }
.social-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.social-heading h2 { font-size: 21px; margin-top: 5px; }
.social-heading > div:last-child { display: flex; align-items: center; gap: 12px; }
[data-social-status] { color: var(--teal); font-size: 12px; white-space: nowrap; }
.social-error { color: #b42d38; padding: 0 24px; line-height: 1.6; flex-shrink: 0; max-height: 110px; overflow-y: auto; }
.social-error:not(:empty) { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.social-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); flex: 1; min-height: 0; }
.social-sidebar { background: #f6f8fb; border-right: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; }
.social-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex-shrink: 0; }
.social-nav button { text-align: left; padding: 10px; min-height: 40px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.social-nav button:hover { background: #e9eff6; }
.social-nav button[aria-current="page"] { background: #e0ecfb; color: #1d60b3; }
.social-mailbox-identity { display: grid; gap: 5px; padding: 1px 10px; }
.social-mailbox-identity > span { font-size: 10px; font-weight: 600; color: var(--teal); }
.social-mailbox-identity strong { font-size: 12px; overflow-wrap: anywhere; }
.social-mailbox-identity p { font-size: 11px; line-height: 1.5; color: var(--muted); }
.social-sidebar > .button { flex-shrink: 0; }
.social-mailbox-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 4px 0; flex-shrink: 0; }
.social-mailbox-heading h3 { font-size: 14px; margin: 0 0 5px; }
.social-mailbox-heading span { font-size: 11px; color: var(--muted); }
.social-list { overflow-y: auto; min-height: 0; flex: 1; overscroll-behavior: contain; }
.social-list-item { display: block; width: 100%; text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--line); border-radius: 5px; }
.social-list-item:hover { background: #edf2f8; }
.social-list-item.is-active { background: #e7f0fc; box-shadow: inset 3px 0 var(--blue); }
.social-list-item strong, .social-list-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-list-item span { color: var(--muted); font-size: 12px; margin-top: 5px; }
.social-list-item.is-unread strong::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--blue); border-radius: 50%; margin-right: 7px; }
.social-mail-item { padding: 15px 12px; }
.social-list-item .social-mail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 0; }
.social-list-item .social-mail-sender { font-size: 11px; margin-top: 0; min-width: 0; }
.social-mail-row time { flex-shrink: 0; color: var(--muted); font-size: 10px; white-space: nowrap; }
.social-mail-subject { font-size: 13px; font-weight: 500; margin-top: 8px; }
.social-mail-item.is-unread .social-mail-subject { font-weight: 700; color: #163e72; }
.social-list-item .social-mail-preview { font-size: 12px; line-height: 1.6; }
.social-list-item .account-identity { display: flex; align-items: center; gap: 9px; margin-top: 0; color: inherit; font-size: inherit; }
.social-list-item .account-identity-label { margin-top: 0; color: inherit; font-size: inherit; }
.social-list-item .profile-avatar { margin-top: 0; width: 30px; height: 30px; flex-basis: 30px; }
.social-list-empty { padding: 28px 12px; }
.social-list-empty strong { font-size: 13px; }
.social-list-empty p { font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 9px; }
.social-content { padding: 24px; overflow-y: auto; min-width: 0; min-height: 0; }
.social-content h3 { font-size: 19px; margin: 0 0 8px; }
.social-hint { color: var(--muted); line-height: 1.7; font-size: 12px; }
.social-add { display: flex; gap: 12px; align-items: end; margin: 22px 0 10px; }
.social-dialog label { display: grid; gap: 7px; font-weight: 600; font-size: 12px; }
.social-add label { flex: 1; min-width: 0; }
.social-dialog input, .social-dialog select, .social-dialog textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #d5dfe7; border-radius: 6px; font: inherit; background: #fff; }
.social-dialog textarea { resize: vertical; min-height: 80px; max-height: 180px; line-height: 1.6; font-weight: 400; }
.social-people-section { margin-top: 28px; }
.social-people-section h4 { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.social-person { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.social-person > span { overflow-wrap: anywhere; min-width: 0; }
.social-person > div { display: flex; gap: 5px; flex-shrink: 0; }
.social-conversation { height: 100%; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.social-thread-heading { padding-bottom: 16px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; flex-shrink: 0; }
.social-thread-heading p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.social-thread-heading .social-thread-type { color: var(--teal); font-size: 10px; font-weight: 600; margin-bottom: 9px; text-transform: uppercase; letter-spacing: .04em; }
.social-thread-addresses { display: grid; gap: 6px; margin: 14px 0 0; font-size: 12px; }
.social-thread-addresses > div { display: flex; gap: 10px; }
.social-thread-addresses dt { width: 32px; flex-shrink: 0; color: var(--muted); }
.social-thread-addresses dd { margin: 0; overflow-wrap: anywhere; }
.social-selection { display: flex; flex: 1; min-height: 200px; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px; }
.social-selection-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 12px; background: #edf4fc; color: var(--blue); }
.social-selection-icon svg { width: 28px; height: 28px; }
.social-selection h4 { font-size: 17px; margin: 3px 0 0; }
.social-selection p { max-width: 350px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.social-selection .button { margin-top: 5px; }
.social-messages { flex: 1; min-height: 80px; overflow-y: auto; padding-right: 10px; overscroll-behavior: contain; }
.social-message { padding: 16px 0; border-bottom: 1px solid #eef2f6; }
.social-message header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: baseline; margin-bottom: 6px; }
.social-message strong { overflow-wrap: anywhere; }
.social-message time { font-size: 11px; color: var(--muted); }
.social-message-recipient { display: block; font-size: 11px; color: var(--muted); margin-bottom: 10px; overflow-wrap: anywhere; }
.social-message p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.social-conversation.is-chat .social-message { border: 0; padding: 11px 14px; border-radius: 8px; margin-bottom: 8px; background: #f5f7fa; }
.social-conversation.is-chat .social-message.is-mine { background: #edf5ff; }
.social-composer { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; flex-shrink: 0; }
.social-dialog.is-composing .social-composer { border-top: 0; padding-top: 0; }
.social-dialog.is-composing textarea { min-height: 180px; max-height: 280px; }
.social-send-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.social-dictation-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.social-dictation-controls button { flex-shrink: 0; min-height: 40px; }
.social-dictation-controls button[aria-pressed="true"] { color: var(--blue); background: #edf5ff; }
.social-dictation-controls .social-hint { flex: 1; min-width: 160px; font-size: 11px; }
[data-social-draft-status] { color: var(--teal); font-size: 11px; }
.social-back { display: none; }
.social-alerts { font-size: 12px; color: var(--blue); }
@media (max-width: 760px) {
  .social-dialog { width: calc(100vw - 16px); height: calc(100svh - 16px); border-radius: 9px; }
  .social-heading { padding: 14px; flex-wrap: wrap; gap: 10px; }
  .social-heading h2 { font-size: 18px; }
  .social-heading > div:last-child { width: 100%; justify-content: space-between; gap: 5px; }
  .social-heading .icon-button { min-width: 36px; }
  .social-alerts { font-size: 11px; padding-left: 0; }
  [data-social-status] { font-size: 11px; }
  .social-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .social-sidebar { padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); gap: 10px; }
  .social-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .social-nav button { padding: 8px 4px; min-height: 40px; font-size: 10px; text-align: center; white-space: normal; line-height: 1.4; }
  .social-mailbox-identity { padding: 2px 4px; }
  .social-mailbox-identity p { display: none; }
  .social-sidebar > .button { min-height: 38px; padding: 8px 12px; }
  .social-list { max-height: 125px; }
  .social-list-item { padding: 10px; }
  .social-content { padding: 16px; }
  .social-add { flex-wrap: wrap; }
  .social-person { flex-wrap: wrap; }
  .social-send-actions .social-hint { display: none; }
  .social-conversation { gap: 12px; }
  .social-thread-heading { padding-bottom: 12px; }
  .social-content h3 { font-size: 18px; }
  .social-thread-heading .social-thread-type { margin-bottom: 5px; }
  .social-thread-addresses { margin-top: 10px; }
  .social-composer { gap: 10px; padding-top: 12px; }
  .social-dialog textarea { min-height: 76px; max-height: 130px; }
  .social-dialog.is-composing textarea { min-height: 120px; max-height: 170px; }
  .social-dialog[data-social-current-view="inbox"]:not(.has-thread) .social-layout,
  .social-dialog[data-social-current-view="sent"]:not(.has-thread) .social-layout { grid-template-rows: minmax(0, 1fr); }
  .social-dialog[data-social-current-view="inbox"]:not(.has-thread) .social-content,
  .social-dialog[data-social-current-view="sent"]:not(.has-thread) .social-content { display: none; }
  .social-dialog[data-social-current-view="inbox"]:not(.has-thread) .social-list,
  .social-dialog[data-social-current-view="sent"]:not(.has-thread) .social-list { max-height: none; }
  .social-dialog.has-thread .social-mailbox-identity,
  .social-dialog.has-thread .social-mailbox-heading,
  .social-dialog.has-thread .social-sidebar > .button,
  .social-dialog.has-thread .social-list,
  .social-dialog.has-thread [data-social-more-mail] { display: none; }
  .social-dialog.has-thread .social-back { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 5px 0; color: var(--blue); font-size: 12px; flex-shrink: 0; }
  .social-dialog.has-thread .social-back svg { width: 15px; height: 15px; }
}

/* File attachments and message reactions */
.message-attachment-composer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border: 1px dashed #cbd8e5; border-radius: 7px; min-width: 0; background: #fafcfe; }
.discussion-composer > .message-attachment-composer { justify-content: flex-start; align-items: center; }
.message-attachment-composer.is-dragging { border-color: var(--blue); background: #eaf4ff; outline: 2px solid #bad7fa; }
.message-attach-button { font-size: 12px; padding: 6px; flex-shrink: 0; }
.message-attachment-hint { font-size: 11px; color: var(--muted); line-height: 1.5; }
.message-pending-attachments, .message-attachments { list-style: none; padding: 0; margin: 0; min-width: 0; }
.message-pending-attachments { width: 100%; max-height: 120px; overflow-y: auto; }
.message-pending-attachments:empty { display: none; }
.message-pending-attachments li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 6px 0; }
.message-pending-attachments li span { font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.message-pending-attachments button { flex-shrink: 0; font-size: 11px; padding: 6px; }
.message-attachments { display: grid; gap: 6px; margin-top: 10px; }
.message-attachments a { display: inline-block; max-width: 100%; padding: 8px 10px; border: 1px solid #ccdaea; border-radius: 6px; background: white; font-size: 12px; color: var(--blue); overflow-wrap: anywhere; text-decoration: none; }
.message-attachments a:hover { background: #edf5ff; text-decoration: underline; }
.message-reactions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.message-reaction { min-width: 34px; min-height: 32px; padding: 4px 8px; border: 1px solid #d5e0ea; border-radius: 16px; background: white; font-size: 15px; cursor: pointer; }
.message-reaction:hover { background: #edf5ff; }
.message-reaction[aria-pressed="true"] { border-color: var(--blue); background: #e4f0ff; box-shadow: inset 0 0 0 1px var(--blue); }
.message-reaction:disabled { cursor: default; opacity: .6; }
.message-reaction-picker summary { padding: 5px 9px; min-height: 32px; border-radius: 16px; color: var(--muted); border: 1px dashed #d5e0ea; font-size: 11px; cursor: pointer; list-style: none; display: flex; align-items: center; }
.message-reaction-picker summary::-webkit-details-marker { display: none; }
.message-reaction-picker[open] { display: flex; flex-wrap: wrap; gap: 6px; }
.message-reaction-choices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.message-reaction-picker summary:hover { background: white; color: var(--blue); }
.message-reactions :focus-visible, .message-attachment-composer :focus-visible, .message-attachments a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 760px) {
  .message-attachment-composer { padding: 6px 8px; gap: 4px 8px; }
  .message-attachment-hint { font-size: 10px; }
  .message-pending-attachments { max-height: 92px; }
  .message-reaction { min-height: 36px; min-width: 36px; }
}
.social-voice-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.social-voice-controls [role="status"] { font-size: .8rem; color: var(--text-muted, #64748b); flex: 1 1 170px; }
.social-voice-controls audio { width: min(100%, 360px); height: 42px; }
.social-message audio { display: block; max-width: 100%; width: 320px; margin-top: .6rem; }
.social-voice-controls [hidden] { display: none; }

/* Owner share controls and the public, read-only recipient page. */
.share-folder-button { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.share-folder-button svg { width: 16px; height: 16px; }
.share-dialog { width: min(580px, calc(100vw - 28px)); max-height: calc(100svh - 40px); border: 1px solid var(--line); border-radius: 14px; padding: 25px; color: var(--ink); overflow-y: auto; }
.share-dialog::backdrop { background: #122a44a6; }
.share-dialog > header { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.share-dialog h2 { margin: 5px 0 0; font-size: 22px; overflow-wrap: anywhere; }
.share-dialog > p { font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
.share-note, .shared-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.share-error { color: #a33434; line-height: 1.7; }
.share-status { color: var(--teal); }
.share-links { display: grid; gap: 15px; margin-top: 15px; }
.share-link-row { padding: 15px; border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 10px; }
.share-link-row label { display: grid; gap: 7px; font-size: 12px; font-weight: 600; }
.share-link-row input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 10px; font-size: 12px; }
.share-link-row small { color: var(--muted); }
.share-link-row > div { display: flex; gap: 10px; flex-wrap: wrap; }
.shared-page { background: #f5f8fb; }
.shared-shell { max-width: 1100px; margin: auto; padding: 30px 24px 60px; }
.shared-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 36px; }
.shared-heading img { display: block; max-width: 100%; height: auto; }
.shared-heading > span { color: var(--muted); font-size: 12px; }
.shared-shell h1 { font-size: clamp(24px, 4vw, 36px); margin-bottom: 10px; overflow-wrap: anywhere; }
.shared-note { margin-bottom: 24px; }
.shared-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 25px 0; }
.shared-breadcrumbs button { padding: 7px 10px; color: var(--blue); border-radius: 5px; overflow-wrap: anywhere; }
.shared-breadcrumbs button:hover { background: #e5edf8; }
.shared-folders, .shared-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.shared-folder { text-align: left; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: white; overflow-wrap: anywhere; }
.shared-folder:hover { border-color: var(--blue); }
.shared-asset { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; }
.shared-asset > button { width: 100%; text-align: left; }
.shared-asset img, .shared-asset video { display: block; width: 100%; height: 180px; object-fit: contain; background: #eef2f7; border-radius: 6px; }
.shared-asset strong { display: block; margin: 12px 0; overflow-wrap: anywhere; }
.shared-asset .button { display: inline-flex; font-size: 12px; padding: 9px 12px; }
.shared-preview { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.shared-preview header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.shared-preview h2 { flex: 1; min-width: 160px; margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.shared-preview > img, .shared-preview > video { display: block; width: 100%; max-height: 70svh; object-fit: contain; background: #eef2f7; }
@media (max-width: 600px) {
  .library-toolbar { flex-wrap: wrap; gap: 7px; }
  .library-toolbar .breadcrumbs { flex: 1 1 100%; }
  .library-toolbar .result-count { margin-left: 0; margin-right: auto; }
  .share-dialog { padding: 18px; }
  .share-folder-button { font-size: 11px; padding: 5px; }
  .shared-shell { padding: 22px 14px 40px; }
  .shared-heading { align-items: flex-start; flex-direction: column; margin-bottom: 24px; }
  .shared-heading img { width: 170px; }
  .shared-preview { padding: 12px; }
  .shared-folders, .shared-assets { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}
.selection-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 11px; color: var(--muted); }
.selection-toolbar > span { flex: 1 1 180px; }
.selection-toolbar .ghost-button { font-size: 11px; padding: 6px 8px; }
.gallery-grid { padding: 8px 8px 48px; min-height: 140px; user-select: none; }
.gallery-grid:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.gallery-grid.is-selecting { cursor: crosshair; }
.selection-marquee { position: fixed; pointer-events: none; z-index: 50; border: 1px solid var(--blue); background: #2583d52b; }
.asset-card.is-selected .thumb { outline: 2px solid var(--blue); outline-offset: -2px; }
.asset-select[aria-pressed="true"] { background: var(--blue); color: white; }

.file-context-menu { position: fixed; z-index: 100; width: 220px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 8px 28px #14293626; }
.file-context-menu button { display: block; width: 100%; padding: 10px 12px; border-radius: 4px; text-align: left; font-size: 12px; }
.file-context-menu button:hover, .file-context-menu button:focus-visible { background: #edf4fc; outline: none; }
.file-context-menu button:disabled { color: #8b969f; background: none; }
.file-context-menu button.is-danger { color: #b43b3b; border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; }
.move-files-dialog { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.move-files-dialog::backdrop { background: #14293666; }
.move-files-dialog h2 { margin: 0 0 20px; font-size: 18px; overflow-wrap: anywhere; }
.move-files-dialog label { display: grid; gap: 8px; font-size: 12px; }
.move-files-dialog select { width: 100%; padding: 10px; margin-bottom: 20px; }

.file-location { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.file-location h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.file-location p { font-size: 11px; line-height: 1.5; color: var(--muted); }
.file-location .location-coordinates { color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.file-location iframe { display: block; width: 100%; height: 200px; border: 1px solid var(--line); border-radius: 6px; margin: 10px 0; }
.location-maps-link { display: block; color: var(--blue); font-size: 12px; line-height: 1.5; margin: 12px 0; }
.location-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.location-actions button { font-size: 11px; padding: 7px 10px; }
.location-form label { display: grid; gap: 5px; margin-bottom: 10px; font-size: 11px; }
.location-form input { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
.file-location .location-error { color: #b43b3b; }

.preference-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.preference-filters select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: 11px; }
.preference-filters .ghost-button { padding: 7px 10px; font-size: 11px; }
[data-favorites-filter][aria-pressed="true"] { color: #b93b67; background: #fff0f5; }
.file-preferences { display: flex; align-items: center; gap: 8px; padding: 3px 10px 9px; }
.file-stars { display: flex; gap: 1px; }
.file-preferences button { display: grid; place-items: center; width: 23px; height: 25px; border-radius: 4px; color: #83939f; }
.file-preferences button:hover, .file-preferences button:focus-visible { background: #edf4fc; }
.file-preferences svg { width: 16px; height: 16px; }
.file-stars [aria-pressed="true"] { color: #bc8615; }
.file-stars [aria-pressed="true"] svg { fill: #eeb94d; }
.file-heart[aria-pressed="true"] { color: #bd3c69; }
.file-heart[aria-pressed="true"] svg { fill: currentColor; }
.is-list .file-preferences { flex: 0 0 auto; padding: 0; }
.details-preferences { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.details-preferences h3 { font-size: 13px; margin: 0 0 9px; }
.details-preferences .file-preferences { padding: 0; }
.details-preferences p { font-size: 11px; color: var(--muted); line-height: 1.5; }
@media (max-width: 600px) {
  .is-list .asset-card { flex-wrap: wrap; }
  .is-list .file-preferences { margin-left: 88px; flex-basis: calc(100% - 88px); }
}
.gallery-grid:not(.is-list) .asset-info { padding-right: 70px; }
.gallery-grid:not(.is-list) .asset-select, .gallery-grid:not(.is-list) .conversation-button { bottom: 49px; }
.gallery-grid:not(.is-list) .file-preferences { gap: 4px; padding-left: 6px; padding-right: 6px; }
.gallery-grid:not(.is-list) .file-preferences button { width: 21px; }
@media (max-width: 420px) { .gallery-grid:not(.is-list) { grid-template-columns: 1fr; } }

.file-lifecycle-dialog { width: min(850px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 1px solid #dce5ee; border-radius: 12px; padding: 24px; color: #243746; overflow: auto; }
.file-lifecycle-dialog::backdrop { background: rgb(13 29 43 / 65%); }
.file-lifecycle-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.file-lifecycle-dialog h2 { font-size: 20px; overflow-wrap: anywhere; }
.file-lifecycle-dialog h3 { margin: 24px 0 12px; }
.file-lifecycle-dialog p { line-height: 1.5; font-size: 13px; }
.lifecycle-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.trash-row, .history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e3eaf1; font-size: 13px; overflow-wrap: anywhere; }
.trash-row > span { flex: 1; min-width: 0; }
.trash-row small { display: block; margin-top: 4px; color: #6e8090; }
.history-row > span { flex: 1; min-width: 0; }
.history-row button { flex-shrink: 0; }
.lifecycle-status { color: #9a4422; }
@media(max-width: 600px) { .file-lifecycle-dialog { padding: 16px; } .history-row { flex-wrap: wrap; } }
.photo-details { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.photo-details h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.photo-details p, .photo-details > div { font-size: 11px; line-height: 1.5; color: var(--muted); }
.photo-details dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.library-mode-switch { margin: 16px 0; width: fit-content; }
.activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 20px; }
.activity-heading h2 { font-size: 20px; margin: 0 0 6px; }
.activity-heading p { color: var(--muted); margin: 0; font-size: 12px; }
.activity-posts { display: grid; gap: 20px; max-width: 680px; margin: 0 auto; }
.activity-post { border: 1px solid var(--line); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 12px rgb(32 56 79 / 3%); }
.activity-post > header { display: flex; align-items: center; gap: 10px; padding: 18px 20px 8px; }
.activity-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e6f4f1; color: #087b83; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.activity-post > header strong { font-size: 13px; overflow-wrap: anywhere; }
.activity-post time { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.activity-description { padding: 0 20px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.activity-path { padding: 0 20px; color: var(--muted); font-size: 11px; margin-top: -4px; }
.activity-media { display: block; width: 100%; max-height: 480px; object-fit: contain; background: #101c26; }
.activity-image-button { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.activity-post-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 12px; }
.activity-post-actions a { color: var(--blue); }
.activity-post-actions span { color: var(--muted); }
.activity-unavailable, .activity-empty { padding: 24px; color: var(--muted); font-size: 13px; }
.activity-load-more { display: block; margin: 24px auto; }
.activity-new-notice { display: block; margin: 0 auto 16px; color: var(--blue); }
@media(max-width: 600px) { .activity-heading { align-items: flex-start; } .activity-heading h2 { font-size: 17px; } .activity-post > header { padding: 14px 12px 6px; } .activity-description, .activity-path { padding: 0 12px; } .activity-post-actions { padding: 10px 12px; gap: 8px; } }
.activity-media-caption { margin: 0; padding: 8px 20px; color: var(--muted); font-size: 10px; }
.file-analytics { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.file-analytics h3 { margin: 0 0 12px; font-size: 13px; }
.file-analytics-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.file-analytics-stats > div { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.file-analytics-stats dt { font-size: 11px; color: var(--muted); }
.file-analytics-stats dd { margin: 6px 0 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.file-audit-entry { padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.file-audit-entry > strong { font-size: 13px; }
.file-audit-entry p { margin: 5px 0; }
.file-audit-entry time { display: block; font-size: 12px; font-variant-numeric: tabular-nums; }
.file-audit-entry details { margin-top: 10px; font-size: 12px; }
.file-audit-entry summary { cursor: pointer; color: var(--blue); }
.file-analytics-dialog .file-metadata { font-size: 12px; }
@media(min-width: 600px) { .file-analytics-dialog .file-analytics-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.site-analytics-dialog { overflow-wrap: anywhere; }
.site-analytics-dialog .lifecycle-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.site-analytics-dialog .lifecycle-toolbar input { min-width: 0; max-width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
@media(min-width: 600px) { .site-analytics-dialog .file-analytics-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post-composer label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
.post-composer textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; font: inherit; }
.post-composer-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.post-composer-media article { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.post-composer-media img, .post-composer-media video { width: 100%; height: 140px; object-fit: contain; background: #101c26; border-radius: 6px; }
.post-composer-media p { font-size: 12px; overflow-wrap: anywhere; }
.post-composer-media article > div { display: flex; flex-wrap: wrap; gap: 4px; }
.post-composer-media button { font-size: 11px; padding: 6px; }
.activity-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-post-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.activity-post-gallery:has(> :only-child) { grid-template-columns: 1fr; }
.activity-post-media-item { min-width: 0; }
.activity-post-media-item .activity-media { height: 240px; }
.activity-post-media-item .activity-post-actions { padding: 8px; gap: 6px; }
.activity-post-media-item .activity-post-actions button { font-size: 11px; padding: 4px; }
@media(max-width: 600px) { .activity-post-gallery { grid-template-columns: 1fr; } .post-composer-media { grid-template-columns: 1fr; } }

.activity-avatar > .profile-avatar { width: 36px; height: 36px; }

.photos-save-dialog { width: min(520px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 20px 70px #14293640; overflow-y: auto; overscroll-behavior: contain; }
.photos-save-dialog::backdrop { background: #07131eb3; }
.photos-save-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.photos-save-dialog h2 { min-width: 0; font-size: 20px; line-height: 1.3; }
.photos-save-dialog p { margin: 10px 0; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.photos-save-description { color: var(--muted); }
.photos-save-dialog [data-photos-error] { color: #a92d35; }
.photos-save-dialog [data-photos-error]:empty, .photos-save-dialog [data-photos-status]:empty { display: none; }
.photos-save-dialog progress { width: 100%; height: 10px; margin: 8px 0; accent-color: var(--blue); }
.photos-save-files, .photos-save-downloads { margin: 12px 0; padding: 0; list-style: none; }
.photos-save-files { max-height: 140px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.photos-save-files:empty, .photos-save-actions:empty { display: none; }
.photos-save-files li { padding: 9px 12px; font-size: 12px; overflow-wrap: anywhere; }
.photos-save-files li + li { border-top: 1px solid var(--line); }
.photos-save-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.photos-save-dialog button, .photos-save-download { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 10px 12px; border-radius: 7px; font-size: 13px; line-height: 1.4; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.photos-save-dialog button:hover, .photos-save-download:hover { background: #edf4fc; }
.photos-save-dialog .primary-button { background: var(--blue); color: #fff; }
.photos-save-dialog .primary-button:hover { background: #205faa; }
.photos-save-dialog button:disabled { opacity: .5; cursor: default; }
.photos-save-fallback { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.photos-save-fallback p { flex: 1 1 100%; color: var(--muted); font-size: 12px; }
.photos-save-download { border: 1px solid var(--line); color: #256fc0; max-width: 100%; }
.photos-save-downloads li { display: grid; gap: 6px; margin: 12px 0; }
.photos-save-downloads li > span { font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 600px) {
  .save-folder-photos { font-size: 11px; padding: 5px 7px; }
  .photos-save-dialog { padding: 16px; }
  .photos-save-actions { flex-direction: column; }
  .photos-save-actions button { width: 100%; }
}

/* Safari zooms small focused fields, including when rotating an iPhone.
   Cover both orientations so focus cannot leave the viewer enlarged. */
@media (any-pointer: coarse) {
  body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
    font-size: 16px;
  }
}

.locations-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 0 30px 30px; }
.locations-card { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.locations-card h2 { font-size: 17px; line-height: 1.4; }
.locations-card h3 { font-size: 13px; margin: 22px 0 10px; }
.locations-hint, .locations-map-caption { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 10px 0; overflow-wrap: anywhere; }
.locations-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.locations-card button, .locations-card input, .locations-card select { min-height: 44px; }
.locations-card button { white-space: normal; text-align: center; }
.locations-current { margin: 15px 0 10px; font-variant-numeric: tabular-nums; line-height: 1.6; overflow-wrap: anywhere; }
.locations-status { color: #168780; line-height: 1.5; margin: 10px 0; }
.locations-error { color: #a92d35; line-height: 1.5; margin: 10px 0; }
.locations-status:empty, .locations-error:empty { display: none; }
.locations-auto { border-top: 1px solid var(--line); margin-top: 20px; }
.locations-auto label { display: inline-flex; align-items: center; gap: 7px; }
.locations-card input, .locations-card select { border: 1px solid #cbd8e1; border-radius: 6px; padding: 8px 10px; background: #fff; max-width: 100%; }
.locations-card select { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, #677680 50%), linear-gradient(135deg, #677680 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.locations-auto input { width: 85px; }
.locations-auto [data-location-auto-status] { line-height: 1.6; }
.locations-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.locations-section-heading .locations-actions { margin: 0; }
.locations-source { display: grid; gap: 4px; font-size: 11px; max-width: 100%; }
.locations-source select { max-width: 290px; }
.locations-map { position: relative; height: 360px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: 7px; margin-top: 14px; background: #eaf0f3; }
.locations-map-empty { display: grid; place-items: center; height: 100%; padding: 25px; color: var(--muted); line-height: 1.6; text-align: center; }
.locations-map .locations-map-tile { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; }
.locations-map-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.locations-map-trail polyline { fill: none; stroke: #2473d3; stroke-width: 3; stroke-opacity: .65; stroke-dasharray: 6 4; }
.locations-map .locations-map-pin { position: absolute; display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; background: #2473d3; color: #fff; border: 2px solid #fff; font-size: 11px; box-shadow: 0 2px 4px #182e4c4d; }
.locations-map-pin[aria-pressed="true"] { background: #152f51 !important; outline: 3px solid #79bef4; z-index: 2; }
.locations-map-pin.is-current { background: #168780; }
.locations-map-controls { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 2px; }
.locations-map-controls button { width: 44px; height: 44px; background: #fff; border: 1px solid #cad6df; border-radius: 4px; font-size: 20px; box-shadow: 0 1px 4px #19283120; }
.locations-map-attribution { position: absolute; right: 0; bottom: 0; background: #fffffff0; color: #285a94; padding: 5px 7px; font-size: 10px; z-index: 3; }
.locations-map-notice { position: absolute; right: 8px; top: 8px; max-width: calc(100% - 76px); padding: 8px; border-radius: 5px; background: #ffffffec; font-size: 11px; line-height: 1.4; color: #785015; }
.locations-google-pin { display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; background: #2473d3; color: #fff; border: 2px solid #fff; font-size: 11px; box-shadow: 0 2px 4px #182e4c4d; }
.locations-google-pin[aria-pressed="true"] { background: #152f51; outline: 3px solid #79bef4; }
.locations-google-pin.is-current { background: #168780; }
.locations-map-caption a { color: var(--blue); text-decoration: underline; }
.locations-history-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.locations-history-select { flex: 1; min-width: 0; padding: 12px 8px; text-align: left !important; border-radius: 5px; }
.locations-history-select time { display: block; font-size: 13px; font-weight: 600; }
.locations-history-select span { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; line-height: 1.5; }
.locations-history-select[aria-pressed="true"] { background: #edf4fc; color: var(--blue); }
.locations-history-select .locations-history-view { color: var(--blue); font-size: 12px; font-weight: 600; }
.locations-clear { color: #a12626; border-color: #e5bcbc; }
.locations-clear:hover { background: #fff1f1; }
.locations-history-select:hover { background: #f5f8fb; }
.locations-share-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 16px 0; }
.locations-share-form label { display: grid; gap: 7px; min-width: 0; flex: 1 1 140px; }
.locations-share-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.locations-share-row > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.6; }
.locations-share-row > button { flex-shrink: 0; }
@media (max-width: 1250px) { .locations-content { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .locations-content { padding: 0 12px 24px; gap: 16px; } .locations-card { padding: 15px; } .locations-map { height: 310px; } .locations-workspace .page-heading { padding: 22px 16px; } .locations-workspace .topbar { padding: 0 16px; } .locations-history-row { gap: 4px; } .locations-card .button { max-width: 100%; } .locations-source { width: 100%; } .locations-source select { width: 100%; max-width: 100%; } }

/* Platform guidance is available wherever members use the console. */
.mobile-help { display: none; }
.help-dialog { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 26px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 22px 90px #0004; overflow: hidden; }
.help-dialog[open] { display: flex; flex-direction: column; }
.help-dialog::backdrop { background: #07131eb3; }
.help-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help-header h2 { margin-top: 6px; font-size: 23px; line-height: 1.3; }
.help-header button { flex-shrink: 0; min-height: 44px; }
.help-description { flex-shrink: 0; margin-top: 12px; color: var(--muted); line-height: 1.6; }
.help-topics { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.help-topics button { padding: 10px 14px; min-height: 44px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); font-weight: 600; }
.help-topics button:hover { background: #eaf2fa; }
.help-sections { display: grid; gap: 28px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.help-sections section { scroll-margin-top: 12px; min-width: 0; }
.help-sections h3 { margin: 0 0 10px; font-size: 16px; }
.help-sections details { border-top: 1px solid var(--line); }
.help-sections summary { padding: 16px 4px; cursor: pointer; font-weight: 600; line-height: 1.5; }
.help-sections details[open] summary { color: var(--blue); }
.help-sections p { margin: 0 4px 14px; line-height: 1.7; overflow-wrap: anywhere; }
.help-sections a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media(max-width: 760px) { .mobile-help { display: inline-flex; } }
@media(max-width: 600px) { .help-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 18px; } .help-header { align-items: flex-start; } .help-header h2 { font-size: 20px; } .help-topics { gap: 6px; } .help-topics button { padding: 9px 11px; } }