/* Personal presentation settings; folder colours retain their own appearance. */
html #shell>main[data-workspace-background=color],html #shell>main[data-workspace-background=image],html #sidebar[data-workspace-background=color],html #sidebar[data-workspace-background=image]{background-color:var(--workspace-panel-color);background-image:linear-gradient(var(--workspace-veil),var(--workspace-veil)),var(--workspace-panel-image);background-size:auto,var(--workspace-image-size);background-position:center;background-repeat:no-repeat,var(--workspace-image-repeat)}
html #shell>main[data-workspace-background=color],html #sidebar[data-workspace-background=color]{background-image:none}
html #shell>main[data-workspace-background]:not([data-workspace-background=theme])>.content>.page-heading :is(h1,.eyebrow),html #shell>main[data-workspace-background]:not([data-workspace-background=theme]) #library-view>.section-heading h2,html #shell>main[data-workspace-background]:not([data-workspace-background=theme]) #folder-section>.section-heading h2{color:var(--workspace-panel-ink)}
html #shell>main[data-workspace-background]:not([data-workspace-background=theme])>.content>.page-heading .muted,html #shell>main[data-workspace-background]:not([data-workspace-background=theme]) #library-view>.hint,html #shell>main[data-workspace-background]:not([data-workspace-background=theme]) #folder-section>.section-heading small{color:var(--workspace-panel-muted)}
html #sidebar[data-workspace-background]:not([data-workspace-background=theme]) :is(.brand,.brand-home,.nav-button,.tree-row,.tree-link,.account,.account b){color:var(--workspace-panel-ink)}
html #sidebar[data-workspace-background]:not([data-workspace-background=theme]) :is(.sidebar-section,.sidebar-heading,.storage,.storage small,.version,.account small){color:var(--workspace-panel-muted)}
html #shell main .primary,html #dialog .primary,html #photo-editor .primary,html #editor-save-choice .primary{color:var(--workspace-primary-text,#fff)}
html #shell main :is(.secondary,.text-button:not(.danger),.icon-button,.top-nav),html #dialog :is(.secondary,.text-button:not(.danger)),html #photo-editor .secondary,html #editor-save-choice .secondary{color:var(--workspace-secondary-text,var(--ink))}
html:not([data-button-text-custom=true]) #shell>main[data-workspace-background]:not([data-workspace-background=theme]) #library-view>.section-heading .text-button{color:var(--workspace-panel-ink)}
.workspace-settings-section{border-top:1px solid var(--line);padding-top:24px;margin-top:24px}.workspace-settings-section h3{font-size:16px;margin:0 0 17px}.workspace-settings-section h4{font-size:13px;margin:0 0 8px}.workspace-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.workspace-settings-card{min-width:0;display:flex;flex-direction:column;gap:13px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft)}.workspace-settings-card>label,.workspace-settings-card .workspace-color-control label{margin:0}.workspace-color-control{max-width:450px;min-width:0}.workspace-color-row{display:flex;gap:10px;align-items:center;margin-top:7px}.workspace-color-row input[type=color]{width:58px!important;height:42px;padding:4px!important;flex:0 0 58px}.workspace-color-row input[type=text]{min-width:0;max-width:155px;font-family:monospace;letter-spacing:.5px}.workspace-swatches,.workspace-presets{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.workspace-swatch{width:30px;height:30px;border-radius:50%;border:2px solid #fff6;box-shadow:0 0 0 1px var(--line)}.workspace-settings-card .primary,.workspace-settings-card .secondary{align-self:flex-start}.workspace-contrast-warning{color:var(--danger,#d35369);min-height:1em}.workspace-background-sample{height:110px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background-position:center}.workspace-image-options{display:grid;gap:16px}.workspace-image-options label{display:flex;flex-direction:column;gap:7px}.workspace-image-options output{display:inline;font-size:12px}.workspace-image-options input[type=range]{width:100%;padding:0;accent-color:var(--accent)}.workspace-image-options[hidden]{display:none}.settings-grid>.panel:has(#appearance-form){grid-column:1/-1}
/* Compact list uses the same cards, selection and context menu as the grid. */
.layout-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--glass,var(--surface));gap:2px}.layout-switch .icon-button{width:34px;height:34px;border-radius:50%}.layout-switch .active{background:var(--selected);color:var(--accent)}html .view-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.listing-details,.listing-columns{display:none}
html #library-view[data-layout=list] :is(.gallery,.gallery.large,.folder-cards){display:flex;flex-direction:column;gap:7px}
html #library-view[data-layout=list] :is(.photo-card,.folder-card){display:grid;grid-template-columns:minmax(170px,1fr) minmax(370px,1.3fr);align-items:center;position:relative;min-height:78px;padding:10px 78px 10px 44px;gap:14px;border-radius:14px;overflow:hidden}
html #library-view[data-layout=list] .photo-card{grid-template-columns:54px minmax(116px,1fr) minmax(370px,1.3fr)}
html #library-view[data-layout=list] .photo-open{width:54px;height:54px;aspect-ratio:auto;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
html #library-view[data-layout=list] .photo-open>img{width:100%;height:100%;object-fit:cover}html #library-view[data-layout=list] .photo-placeholder{font-size:0;min-height:0;height:54px;width:54px}html #library-view[data-layout=list] .photo-placeholder .icon{width:23px;height:23px}
html #library-view[data-layout=list] .photo-caption{padding:0!important;min-width:0}html #library-view[data-layout=list] .photo-caption b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}html #library-view[data-layout=list] .photo-caption small{font-size:10px;margin-top:5px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html #library-view[data-layout=list] .folder-open{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;padding:0;text-align:left;min-width:0}html #library-view[data-layout=list] .folder-art{width:54px;min-width:54px;height:46px;aspect-ratio:auto}.folder-art .folder-cover{max-width:none}
html #library-view[data-layout=list] .folder-caption{min-width:0;min-height:0;padding:0;text-align:left;background:transparent}html #library-view[data-layout=list] .folder-caption b{font-size:12px;max-width:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}html #library-view[data-layout=list] .folder-caption small{font-size:10px}
html #library-view[data-layout=list] .pick{display:flex;position:absolute;left:12px!important;right:auto!important;top:50%;transform:translateY(-50%);width:22px;height:22px}
html #library-view[data-layout=list] .item-more{display:flex;top:calc(50% - 15px);right:10px;width:30px;height:30px}
html #library-view[data-layout=list] .listing-details{display:grid;grid-template-columns:65px 95px minmax(90px,1fr) minmax(90px,1fr);gap:12px;min-width:0;font-size:11px;color:var(--muted)}.listing-details>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html #library-view[data-layout=list] .listing-columns{display:grid;grid-template-columns:minmax(170px,1fr) 65px 95px minmax(90px,.65fr) minmax(90px,.65fr);gap:12px;padding:8px 78px 8px 44px;font-size:10px;font-weight:650;color:var(--muted)}
html #library-view[data-layout=list] .video-badge{left:2px;bottom:2px;padding:2px;font-size:8px;gap:1px}html #library-view[data-layout=list] .video-badge .icon{width:11px;height:11px}
/* Share exact columns between folder rows, media rows and their headings. */
@media(min-width:1251px){
html #library-view[data-layout=list] :is(.photo-card,.folder-card,.listing-columns){grid-template-columns:54px minmax(116px,1fr) 65px 95px minmax(90px,.65fr) minmax(90px,.65fr);column-gap:12px}
html #library-view[data-layout=list] .folder-open{grid-column:1/3}
html #library-view[data-layout=list] .listing-details{display:contents}
html #library-view[data-layout=list] .listing-columns>span:first-child{grid-column:1/3}
}
/* Native mouse dragging and explicit touch handles coexist with OS uploads. */
.entry-drag-handle{display:none;touch-action:none;user-select:none;-webkit-user-select:none;align-items:center;justify-content:center;cursor:grab;width:30px;height:32px;border-radius:8px;background:var(--glass,var(--surface));color:var(--muted);font-size:24px;z-index:4;position:absolute;bottom:7px;right:8px}.tree-row>.entry-drag-handle{position:static;flex:0 0 24px;width:24px;height:28px;font-size:20px;background:none}.entry-dragging{opacity:.4}.entry-drop-target{outline:2px solid var(--accent)!important;outline-offset:-2px;background:var(--selected)!important}.entry-drop-denied{outline:2px dashed var(--danger,#d35369)!important;outline-offset:-2px}.entry-drag-active .photo-open,.entry-drag-active .folder-open{cursor:grabbing}.entry-drag-ghost{position:fixed;left:0;top:0;z-index:300;max-width:min(280px,70vw);padding:12px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 10px 35px #0003;color:var(--ink);font-size:13px;display:flex;gap:10px;align-items:center;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;will-change:transform}
html #library-view[data-layout=list] .entry-drag-handle{top:calc(50% - 16px);bottom:auto;right:44px;background:none}
@media(pointer:coarse){.entry-drag-handle{display:inline-flex}.photo-caption{padding-right:40px!important}.folder-caption{padding-right:24px}}
@media(max-width:1250px){.workspace-settings-card{padding:16px}html .view-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:7px}.view-controls select{width:100%;max-width:100%;min-width:0}.view-controls #grid-size{display:none}.layout-switch .icon-button{width:30px;height:32px}.layout-switch{padding:2px}.entry-drag-handle{display:inline-flex}html #library-view[data-layout=list] :is(.photo-card,.folder-card){grid-template-columns:minmax(0,1fr);padding:12px 76px 12px 42px;gap:7px;min-height:90px}html #library-view[data-layout=list] .photo-card{grid-template-columns:48px minmax(0,1fr)}html #library-view[data-layout=list] .photo-open{width:48px;height:48px;grid-row:1/3}html #library-view[data-layout=list] .photo-caption b,html #library-view[data-layout=list] .folder-caption b{font-size:12px}html #library-view[data-layout=list] .listing-details{grid-template-columns:auto auto;justify-content:start;gap:5px 14px;font-size:10px}html #library-view[data-layout=list] .photo-card>.listing-details{grid-column:2}html #library-view[data-layout=list] .folder-card>.listing-details{padding-left:66px}html #library-view[data-layout=list] .listing-details .file-taken{display:none}html #library-view[data-layout=list] .listing-details .file-created{grid-column:1/-1}html #library-view[data-layout=list] .listing-details .file-created::before{content:'Erstellt / erfasst: ';opacity:.7}html #library-view[data-layout=list] .listing-columns{display:none}html #library-view[data-layout=list] .folder-open{gap:12px}.entry-drag-ghost{font-size:12px}}
@media(max-width:650px){.workspace-settings-grid{grid-template-columns:minmax(0,1fr)}.workspace-settings-section{padding-top:20px;margin-top:20px}.workspace-presets button{max-width:100%;white-space:normal}html #library-view[data-layout=list] :is(.photo-card,.folder-card){padding-left:38px;padding-right:70px}html #library-view[data-layout=list] .pick{left:9px!important}.workspace-color-row input[type=text]{max-width:100%}}

html #shell>main[data-workspace-background]:not([data-workspace-background=theme]) #empty :is(h2,p,small),html #shell>main[data-workspace-background]:not([data-workspace-background=theme])>.content>.member-toolbar .muted{color:var(--workspace-panel-ink)}

html .appearance-options{display:block}.appearance-options>label{margin:22px 0}.appearance-options>div:last-child{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.workspace-settings-section>p{margin-bottom:16px}

.session-loading{position:fixed;inset:0;display:grid;place-items:center;color:var(--ink);font-size:14px;pointer-events:none}.session-loading[hidden]{display:none}

html .appearance-options>#workspace-settings{display:block;width:100%;min-width:0}html #library-view[data-layout=list] .listing-columns{color:var(--workspace-panel-muted,var(--muted))}

/* Folders sit directly on the user's gallery background, without white tiles. */
html #library-view .folder-card,html #library-view .folder-card:hover{background:transparent;border-color:transparent;box-shadow:none}
html #library-view .folder-caption{background:transparent}
html #library-view .folder-caption b{color:var(--workspace-panel-ink,var(--ink))}
html #library-view .folder-caption small,html #library-view .folder-card .listing-details{color:var(--workspace-panel-muted,var(--muted))}
html #library-view .folder-caption small{white-space:normal;line-height:1.5;overflow-wrap:anywhere}
html #library-view .folder-card.selected{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px}
.favorite-toggle .icon{fill:none}.favorite-toggle.is-favorite .icon{fill:currentColor}
.photo-card>.favorite-toggle{position:absolute;top:12px;right:49px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--glass,var(--surface));color:var(--ink);backdrop-filter:blur(10px);z-index:3;opacity:0;transition:opacity .15s}
.photo-card:hover>.favorite-toggle,.photo-card:focus-within>.favorite-toggle,.photo-card>.favorite-toggle.is-favorite{opacity:1}
.favorite-toggle.is-favorite{color:#d95778!important}.favorite-toggle .icon{width:17px;height:17px}.favorite-toggle:disabled{cursor:progress}
html #library-view[data-layout=list] .photo-card{padding-right:114px}
html #library-view[data-layout=list] .photo-card>.favorite-toggle{top:calc(50% - 15px);right:78px;opacity:1}
html #library-view[data-layout=list] .listing-columns{padding-right:114px}
html #library-view[data-layout=list] .folder-card{padding-right:114px}
@media(pointer:coarse),(max-width:1250px){.photo-card>.favorite-toggle{opacity:1}html #library-view[data-layout=list] .photo-card{padding-right:108px}}
@media(max-width:650px){html #library-view[data-layout=list] .photo-card{padding-right:104px}html #library-view[data-layout=list] .folder-card{padding-right:70px}}