:root {
    font-family: system-ui, sans-serif;
    color-scheme: light;
    --asset-background: #f3f5f8;
    --asset-surface: #fff;
    --asset-text: #202631;
    --asset-muted: #576276;
    --asset-primary: #254db3;
    --asset-selected: #e7edff;
    --asset-border: #dbe0e9;
}
:root[data-theme=dark] {
    color-scheme: dark;
    --asset-background: #151922;
    --asset-surface: #1e2430;
    --asset-text: #e6eaf2;
    --asset-muted: #b0b8c9;
    --asset-primary: #a1b9ff;
    --asset-selected: #2c3957;
    --asset-border: #394253;
}
body { margin: 0; background: var(--asset-background); color: var(--asset-text); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--asset-primary); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.app-bar { border-bottom: 1px solid var(--asset-border); }
.brand { line-height: 1.15; }
.brand .mud-typography-caption { color: var(--asset-muted); }
.brand-icon { margin-right: .75rem; color: var(--asset-primary); }
.account-name { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-settings-button { text-transform: none; }
.account-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.account-settings fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.account-settings legend { font-size: 1.1rem; font-weight: 500; margin-bottom: .75rem; }
.account-settings label { display: block; font-size: .9rem; font-weight: 500; margin-top: .75rem; }
.account-settings input { box-sizing: border-box; width: 100%; margin-top: .4rem; padding: .85rem; border: 1px solid var(--asset-muted); border-radius: 8px; font: inherit; color: var(--asset-text); background: var(--asset-surface); }
.account-settings input:disabled { opacity: .6; }
.account-help { color: var(--asset-muted); font-size: .85rem; line-height: 1.5; }
.workspace-container { padding: 1.75rem 2rem; }
.workspace-heading { margin-bottom: 1rem; }
.workspace-heading .mud-typography-body2 { color: var(--asset-muted); margin-top: .25rem; }
.toolbar, .upload-toolbar, .pagination { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.upload-toolbar .mud-typography-caption { color: var(--asset-muted); }
.pagination { justify-content: space-between; }
.breadcrumbs.mud-breadcrumbs { padding: 0; flex-wrap: wrap; }
.breadcrumbs .mud-button { text-transform: none; max-width: 100%; overflow-wrap: anywhere; }
.library-workspace { --folder-pane-width: 256px; display: grid; grid-template-columns: minmax(0, var(--folder-pane-width)) 12px minmax(0, 1fr); align-items: start; }
.library-navigation-toolbar { grid-column: 1 / -1; margin: 0 0 .75rem; }
.folder-pane { grid-column: 1; min-width: 0; position: sticky; top: 5rem; max-height: calc(100dvh - 6rem); overflow: auto; border: 1px solid var(--asset-border); border-radius: 8px; background: var(--asset-surface); scrollbar-gutter: stable; }
.folder-pane-heading { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; color: var(--asset-muted); }
.tree-close, .tree-backdrop { display: none; }
.folder-tree, .folder-tree ul { list-style: none; margin: 0; padding: 0; }
.folder-tree { padding: 0 .25rem .75rem; }
.folder-tree .mud-treeview-item-content { padding: 0; background: transparent; }
.folder-tree .mud-treeview-group { margin-left: 0; }
.tree-row { display: flex; align-items: center; min-width: 0; width: 100%; padding-left: min(calc(var(--tree-depth) * 1rem), 6rem); }
.tree-expand, .tree-expand-space { flex: 0 0 1.5rem; width: 1.5rem; }
.tree-name.mud-button { min-width: 0; flex: 1; justify-content: flex-start; padding: .45rem .25rem; font-weight: 400; text-transform: none; color: var(--asset-text); }
.tree-name .mud-button-label { min-width: 0; justify-content: flex-start; gap: .4rem; }
.tree-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.tree-name:hover, .tree-expand:hover:enabled { background: var(--asset-selected); }
.tree-name[aria-selected=true] { color: var(--asset-primary); background: var(--asset-selected); font-weight: 600; }
.tree-name:focus-visible { outline-offset: -3px; }
.tree-name:focus-visible .tree-label { white-space: normal; overflow-wrap: anywhere; }
.tree-folder-icon { flex-shrink: 0; color: var(--asset-primary); }
.tree-feedback { padding: .4rem .75rem .4rem 1.75rem; color: var(--asset-muted); overflow-wrap: anywhere; }
.tree-divider { grid-column: 2; align-self: stretch; cursor: col-resize; touch-action: none; min-height: 15rem; border-radius: .3rem; }
.tree-divider:hover, .tree-divider:focus-visible { background: var(--asset-selected); outline: 2px solid var(--asset-primary); outline-offset: -3px; }
.library-main { grid-column: 3; min-width: 0; padding: 1.25rem; }
.library-workspace[data-tree-open=false] { grid-template-columns: minmax(0, 1fr); }
.library-workspace[data-tree-open=false] .library-main { grid-column: 1; }
.library-table { overflow-wrap: anywhere; }
.library-view-controls { display: flex; margin-left: auto; gap: .25rem; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.library-grid > li { min-width: 0; }
.library-tile { position: relative; height: 100%; border: 1px solid var(--asset-border); border-radius: 8px; background: var(--asset-surface); }
.library-tile-open { display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; width: 100%; height: 100%; min-height: 14rem; padding: .5rem; border: 0; border-radius: 8px; font: inherit; text-align: left; cursor: pointer; color: var(--asset-text); background: transparent; }
.library-tile-open:hover:enabled { background: var(--asset-selected); }
.library-tile-open:disabled { opacity: .6; cursor: default; }
.library-tile-preview { display: flex; align-items: center; justify-content: center; height: 10rem; flex-shrink: 0; overflow: hidden; border-radius: 4px; background: var(--asset-background); }
.thumbnail-checkerboard { background-color: var(--asset-surface); background-image: conic-gradient(var(--asset-border) 25%, transparent 0 50%, var(--asset-border) 0 75%, transparent 0); background-size: 16px 16px; }
.library-tile-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.library-tile-icon.mud-icon-root { width: 3.5rem; height: 3.5rem; color: var(--asset-primary); }
.library-tile-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.4; margin-top: .5rem; padding-right: 2.25rem; }
.library-tile-open:focus-visible .library-tile-name { display: block; }
.library-tile-size { font-size: .8rem; color: var(--asset-muted); padding-right: 2.25rem; margin-top: .25rem; }
.library-tile-actions { position: absolute; right: .25rem; bottom: .25rem; }
.item-name { min-width: 12rem; }
.folder-link.mud-button { justify-content: flex-start; text-align: left; text-transform: none; font-weight: 500; }
.file-link { display: inline-flex; align-items: center; gap: .5rem; }
.file-link.mud-button { text-transform: none; text-align: left; justify-content: flex-start; }
.preview-dialog.mud-dialog { height: 90dvh; max-height: 90dvh; width: min(94vw, 90rem); }
.preview-dialog .mud-dialog-title { padding: .75rem 1rem; border-bottom: 1px solid var(--asset-border); flex-shrink: 0; }
.preview-toolbar { display: flex; align-items: center; gap: .5rem; }
.preview-heading { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.preview-heading h2 { max-height: 4.5em; overflow: auto; }
.preview-dialog .mud-dialog-content { padding: 1rem; display: flex; overflow: hidden; min-height: 0; flex: 1; }
.preview-dialog .mud-dialog-actions { justify-content: space-between; border-top: 1px solid var(--asset-border); flex-shrink: 0; }
.preview-body { display: flex; flex-direction: column; min-width: 0; width: 100%; min-height: 0; }
.preview-viewer { display: flex; flex-direction: column; gap: .75rem; min-height: 0; flex: 1; overflow: auto; }
.preview-tool { padding: .5rem .8rem; border: 1px solid var(--asset-border); border-radius: 5px; color: var(--asset-primary); background: var(--asset-surface); cursor: pointer; align-self: flex-start; }
.preview-image-controls { display: flex; flex-wrap: wrap; gap: .5rem; flex-shrink: 0; }
.preview-image-stage { min-height: 0; flex: 1; overflow: auto; position: relative; background: var(--asset-background); }
.preview-image-stage[data-enlarged=false] { display: flex; align-items: center; justify-content: center; }
.preview-image { display: block; object-fit: contain; max-width: none; max-height: none; }
.preview-image-stage[data-enlarged=true] { cursor: grab; touch-action: none; }
.preview-image-stage[data-enlarged=true]:active { cursor: grabbing; }
.preview-audio { width: min(100%, 45rem); align-self: center; margin: auto; flex-shrink: 0; }
.preview-model-controls { display: flex; flex-wrap: wrap; gap: .4rem; flex-shrink: 0; }
.preview-model-stage { flex: 1; min-height: 10rem; position: relative; overflow: hidden; background: var(--asset-background); }
.preview-model-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.preview-model-stage canvas:focus-visible { outline: 2px solid var(--asset-primary); outline-offset: -3px; }
.preview-model-status, .preview-model-warning { font-size: .85rem; flex-shrink: 0; margin: 0; }
.preview-model-status { color: var(--asset-muted); }
.preview-model-warning { max-height: 5rem; overflow: auto; color: var(--asset-text); overflow-wrap: anywhere; }
.preview-model-warning:empty { display: none; }
.preview-document { overflow: auto; min-height: 0; flex: 1; line-height: 1.6; overflow-wrap: anywhere; }
.preview-source { white-space: pre-wrap; font-family: ui-monospace, monospace; tab-size: 4; margin: 0; }
.preview-document pre { overflow: auto; padding: 1rem; background: var(--asset-background); border-radius: 6px; }
.preview-document table { border-collapse: collapse; }
.preview-document th, .preview-document td { border: 1px solid var(--asset-border); padding: .4rem .75rem; }
.preview-document h1, .preview-document h2, .preview-document h3 { margin: 1rem 0 .5rem; font-weight: 600; }
.preview-document ul, .preview-document ol { padding-left: 2rem; list-style: revert; }
.preview-document a { color: var(--asset-primary); text-decoration: underline; }
.preview-fallback { font-size: 5rem; text-align: center; color: var(--asset-muted); margin-top: auto; }
.preview-explanation { text-align: center; margin-bottom: auto; }
.item-actions { width: 4rem; }
.empty-folder { padding: 3rem 1rem; color: var(--asset-muted); }
.file-list-drop-target { position: relative; min-height: 12rem; border-radius: 8px; }
.file-drop-overlay { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: none; border: 2px dashed var(--asset-primary); border-radius: 8px; background: var(--asset-surface); color: var(--asset-primary); align-items: center; justify-content: center; flex-direction: column; gap: .5rem; }
.file-list-drop-target.dragging .file-drop-overlay { display: flex; }
.upload-count, .upload-error-count { margin-left: .5rem; font-size: .75rem; text-transform: none; }
.upload-error-count { color: var(--mud-palette-error); }
.upload-panel .mud-drawer-content { overflow: hidden; }
.upload-panel-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.upload-panel-heading { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; flex-shrink: 0; }
.upload-panel .upload-toolbar { flex-direction: column; align-items: flex-start; flex-shrink: 0; margin: 0; padding: 0 1rem .75rem; overflow-wrap: anywhere; }
.upload-clear { align-self: flex-start; margin: 0 1rem .5rem; flex-shrink: 0; }
.upload-results { list-style: none; padding: 0 1rem; margin: 0; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.upload-results li { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 0; border-top: 1px solid var(--asset-border); overflow-wrap: anywhere; }
.upload-destination, .upload-panel-footer, .upload-empty { color: var(--asset-muted); }
.upload-result-actions { display: flex; gap: .5rem; }
.upload-result-actions:empty { display: none; }
.upload-panel-footer { padding: .75rem 1rem; flex-shrink: 0; border-top: 1px solid var(--asset-border); }
/* Cookie authentication remains a conventional server-rendered form. */
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; box-sizing: border-box; }
.auth-page main { width: min(26rem, 100%); padding: 2rem; box-sizing: border-box; border: 1px solid var(--asset-border); border-radius: 12px; background: var(--asset-surface); box-shadow: 0 4px 24px #17223612; }
.auth-page header { color: var(--asset-muted); font-size: .9rem; }
.auth-page h1 { margin: 1.5rem 0 .5rem; font-size: 1.75rem; font-weight: 500; }
.auth-page p { color: var(--asset-muted); line-height: 1.6; }
.auth-page form { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.auth-page label { display: block; font-size: .9rem; font-weight: 500; }
.auth-page input[type=email], .auth-page input[type=password] { box-sizing: border-box; width: 100%; margin-top: .4rem; padding: .85rem; border: 1px solid var(--asset-muted); border-radius: 8px; font: inherit; color: var(--asset-text); background: var(--asset-surface); }
.auth-page .remember { font-weight: 400; }
.auth-page button { padding: .8rem; border: 0; border-radius: 8px; color: var(--asset-surface); background: var(--asset-primary); font: inherit; font-weight: 600; cursor: pointer; }
.validation-summary-errors { color: #dc5454; }
.validation-summary-valid { display: none; }
@media (max-width: 800px) {
    .workspace-container { padding: 1rem; }
    .account-name { display: none; }
    .account-settings-button .mud-button-icon-start { margin: 0; }
    .library-workspace { grid-template-columns: minmax(0, 1fr); }
    .library-main { grid-column: 1; padding: .75rem; }
    .folder-pane { display: none; position: fixed; inset: 0 auto 0 0; top: 0; width: min(85vw, 22rem); max-height: 100dvh; box-sizing: border-box; z-index: 1200; border-radius: 0; box-shadow: 4px 0 24px #17223633; }
    .library-workspace[data-tree-open=true] .folder-pane { display: block; }
    .tree-divider { display: none; }
    .tree-close { display: inline-flex; }
    .tree-backdrop { display: block; position: fixed; inset: 0; z-index: 1199; width: 100%; height: 100%; border: 0; background: #17223688; }
    .library-workspace:not([data-tree-open=true]) .tree-backdrop { display: none; }
    .brand-icon { display: none; }
}
@media (max-width: 600px) {
    .preview-dialog.mud-dialog { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .preview-toolbar { flex-wrap: wrap; }
    .preview-heading { flex-basis: 100%; }
    .preview-download { margin-right: auto; }
    .library-table .item-actions { width: auto; }
    .app-bar .mud-toolbar { padding-inline: .5rem; }
    .app-bar .mud-button { min-width: 0; padding-inline: .4rem; }
    .app-bar .brand .mud-typography-caption { display: none; }
    .app-bar .brand .mud-typography-h6 { font-size: 1rem; }
    .app-bar .sign-out-button .mud-button-icon-start { display: none; }
    .app-bar .sign-out-button, .upload-toggle { white-space: nowrap; }
    .upload-count-label { display: none; }
    .upload-count, .upload-error-count { margin-left: .3rem; }
}
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; position: fixed; inset: 0; z-index: 2000; padding: 20vh 2rem 2rem; text-align: center; background: var(--asset-background); color: var(--asset-text); }
.reconnect-reload { display: none; }
.components-reconnect-failed .reconnect-wait, .components-reconnect-rejected .reconnect-wait { display: none; }
.components-reconnect-failed .reconnect-reload, .components-reconnect-rejected .reconnect-reload { display: block; }
#components-reconnect-modal button { padding: .8rem 1.5rem; border: 0; border-radius: 8px; color: var(--asset-surface); background: var(--asset-primary); font: inherit; cursor: pointer; }