.online-panel { display: grid; gap: var(--ui-space-16); padding: var(--ui-space-24); border: var(--ui-border-0); border-radius: var(--ui-radius-12); background: var(--ui-bg); color: var(--ui-text-primary); box-shadow: var(--ui-shadow-3); }
.online-panel h2, .online-panel h3, .online-panel h4, .online-panel p { margin: 0; }
.online-panel h2, .online-panel h3, .online-panel h4 { font: var(--ui-font-weight-headline) var(--ui-font-size-headline)/var(--ui-line-height-headline) var(--ui-font); }
.online-heading { display: flex; justify-content: space-between; align-items: start; gap: var(--ui-space-12); }
.online-heading p { margin-top: var(--ui-space-4); color: var(--ui-text-secondary); font: var(--ui-font-weight-callout) var(--ui-font-size-callout)/var(--ui-line-height-callout) var(--ui-font); }
.online-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); gap: var(--ui-space-12); }
.online-actions, .online-upload, .online-search, .online-views { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ui-space-8); }
.online-controls label, .online-upload label, .online-search label, .online-trash-filters label { display: grid; min-width: 0; gap: var(--ui-space-4); color: var(--ui-text-secondary); font: var(--ui-font-weight-callout) var(--ui-font-size-callout)/var(--ui-line-height-callout) var(--ui-font); }
.online-upload label, .online-search label { flex: 1 1 160px; }
.online-panel :is(.ui-input, .ui-select, .ui-search) { max-width: 100%; min-width: 0; }
.online-panel input[type="file"] { padding: 0 var(--ui-space-8); line-height: var(--ui-line-height-display); }
.online-panel input[type="file"]::file-selector-button { height: 100%; margin-right: var(--ui-space-8); border: 0; background: transparent; color: var(--ui-text-primary); font: inherit; cursor: pointer; }
.online-panel :is(input, select):disabled { opacity: .5; cursor: not-allowed; }
.online-status, .online-permission-note { color: var(--ui-text-secondary); overflow-wrap: anywhere; font: var(--ui-font-weight-callout) var(--ui-font-size-callout)/var(--ui-line-height-callout) var(--ui-font); }
.online-status.error { color: var(--ui-danger); }
.online-status:empty, .online-permission-note:empty { display: none; }
.online-content { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr); gap: var(--ui-space-24); }
.online-panel ul { display: grid; gap: var(--ui-space-8); padding: 0; margin: var(--ui-space-8) 0; list-style: none; }
.online-panel li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-8); padding: var(--ui-space-8); border: var(--ui-border-0); border-radius: var(--ui-radius-8); }
.online-panel li > span { flex: 1 1 128px; overflow-wrap: anywhere; }
.online-panel [data-drag-board][draggable="true"] { cursor: grab; }
.online-panel [data-drag-board][draggable="true"]:active { cursor: grabbing; }
.online-panel [data-drop-group] { border-style: dashed; }
.online-boards { min-width: 0; }
.online-board-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--ui-space-12); margin-top: var(--ui-space-8); }
.online-board-card { min-width: 0; display: grid; align-content: start; gap: var(--ui-space-8); padding: var(--ui-space-12); border: var(--ui-border-0); border-radius: var(--ui-radius-12); background: var(--ui-bg); }
.online-board-card:hover { box-shadow: var(--ui-shadow-2); }
.online-board-card strong, .online-board-meta { overflow-wrap: anywhere; }
.online-board-card strong { font-weight: var(--ui-font-weight-body-strong); }
.online-board-meta, .online-boards-empty, .online-picture-placeholder, .online-map-label { color: var(--ui-text-secondary); font: var(--ui-font-weight-caption) var(--ui-font-size-caption)/var(--ui-line-height-caption) var(--ui-font); }
.online-panel .online-card-preview { display: block; width: 100%; height: 168px; padding: 0; overflow: hidden; border: var(--ui-border-0); border-radius: var(--ui-radius-8); background: var(--ui-bg-secondary); }
.online-picture { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; background: var(--ui-bg-secondary); }
.online-picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.online-picture img[hidden], .online-picture-placeholder[hidden], .online-views button[hidden] { display: none; }
.online-picture-placeholder { padding: var(--ui-space-4); }
.online-board-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-8); }
.online-board-actions .ui-select { max-width: 160px; }
.online-board-actions [aria-pressed="true"] { background: var(--ui-selection-bg); color: var(--ui-selection-text); }
.online-board-maps { display: grid; gap: var(--ui-space-16); margin-top: var(--ui-space-8); }
.online-map-page h4 { margin: 0 0 var(--ui-space-8); overflow-wrap: anywhere; }
.online-map-scroll { overflow: auto; max-height: 65vh; min-height: 180px; padding: var(--ui-space-24); background: var(--ui-bg-secondary); border-radius: var(--ui-radius-12); }
.online-map-plane { position: relative; }
.online-map-tile { position: absolute; }
.online-panel .online-map-select { display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: var(--ui-border-0); border-radius: 0; }
.online-panel :is(.online-map-select, .online-card-preview):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.online-panel .online-map-select[aria-pressed="true"] { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.online-map-label { position: absolute; top: 100%; left: 0; max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.online-panel summary { cursor: pointer; font-weight: var(--ui-font-weight-body-strong); }
.online-trash > summary, .online-trash [data-field="trash-legacy"] > summary { display: flex; align-items: center; gap: var(--ui-space-8); list-style: none; }
.online-trash > summary::-webkit-details-marker, .online-trash [data-field="trash-legacy"] > summary::-webkit-details-marker { display: none; }
.online-trash > summary svg { width: 16px; height: 16px; color: var(--ui-text-secondary); }
.online-trash > summary svg:first-child, .online-trash [data-field="trash-legacy"] > summary svg:first-child { width: 12px; height: 12px; color: var(--ui-text-tertiary); }
.online-trash[open] > summary svg:first-child, .online-trash [data-field="trash-legacy"][open] > summary svg:first-child { transform: rotate(90deg); }
.online-trash > p, .online-trash details > p { color: var(--ui-text-secondary); font: var(--ui-font-weight-callout) var(--ui-font-size-callout)/var(--ui-line-height-callout) var(--ui-font); }
.online-trash-filters { display: flex; flex-wrap: wrap; gap: var(--ui-space-8); margin: var(--ui-space-12) 0; }
.online-trash li > span { display: grid; gap: var(--ui-space-4); }
.online-trash li small { color: var(--ui-text-secondary); overflow-wrap: anywhere; }
.online-trash li details { position: relative; }
.online-trash li details > summary { list-style: none; }
.online-trash li details > summary::-webkit-details-marker { display: none; }
.online-trash-menu { position: absolute; z-index: 1; top: 100%; right: 0; min-width: 160px; }
.online-trash li.online-trash-version { display: grid; gap: var(--ui-space-8); }
.online-trash-version-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-8); }
.online-trash-version > ul { margin: 0; }
.online-project-dialog { width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: var(--ui-space-24); border: var(--ui-border-0); border-radius: var(--ui-radius-16); background: var(--ui-bg); color: var(--ui-text-primary); box-shadow: var(--ui-shadow-3); }
.online-project-dialog::backdrop { background: color-mix(in srgb, var(--ui-text-primary) 30%, transparent); }
.online-project-dialog form { display: grid; gap: var(--ui-space-16); }
.online-project-dialog h2 { font: var(--ui-font-weight-title) var(--ui-font-size-title)/var(--ui-line-height-title) var(--ui-font); }
.online-project-dialog form > label { display: grid; gap: var(--ui-space-4); }
.online-project-dialog fieldset { display: flex; gap: var(--ui-space-16); padding: 0; border: 0; }
.online-project-dialog legend { margin-bottom: var(--ui-space-8); }
.online-project-dialog fieldset label { display: flex; align-items: center; gap: var(--ui-space-8); }
.online-project-dialog [role="alert"] { min-height: var(--ui-line-height-body); color: var(--ui-danger); }
.online-project-dialog-actions { display: flex; justify-content: flex-end; gap: var(--ui-space-8); }
.online-upload-dialog { box-sizing: border-box; width: min(440px, calc(100vw - var(--ui-space-32))); max-height: calc(100dvh - var(--ui-space-32)); overflow: auto; padding: var(--ui-space-24); border: var(--ui-border-0); border-radius: var(--ui-radius-16); background: var(--ui-bg); color: var(--ui-text-primary); box-shadow: var(--ui-shadow-3); font: var(--ui-font-weight-body) var(--ui-font-size-body)/var(--ui-line-height-body) var(--ui-font); }
.online-upload-dialog [hidden] { display: none !important; }
.online-upload-dialog::backdrop { background: var(--ui-text-tertiary); }
.online-upload-dialog form { display: grid; gap: var(--ui-space-16); }
.online-upload-dialog h2, .online-upload-dialog p { margin: 0; }
.online-upload-dialog h2 { font: var(--ui-font-weight-title) var(--ui-font-size-title)/var(--ui-line-height-title) var(--ui-font); }
.online-upload-dialog label { display: grid; gap: var(--ui-space-4); }
.online-upload-dialog label:focus-within { outline: none; }
.online-upload-dialog [data-upload-filename] { color: var(--ui-text-secondary); overflow-wrap: anywhere; }
.online-upload-dialog :is([data-upload-progress], [data-upload-asset-progress], [data-upload-storage-warning]) { color: var(--ui-text-secondary); }
.online-upload-dialog progress, .online-upload-background progress { display: block; width: 100%; height: var(--ui-space-8); accent-color: var(--ui-accent); }
.online-upload-dialog [data-upload-status] { color: var(--ui-danger); }
.online-upload-dialog :is([data-upload-progress], [data-upload-asset-progress], [data-upload-storage-warning], [data-upload-status]):empty { display: none; }
.online-upload-dialog [data-upload-review] { display: grid; gap: var(--ui-space-8); }
.online-upload-dialog [data-upload-versions] { max-height: 160px; overflow: auto; margin: 0; padding-left: var(--ui-space-24); }
.online-upload-dialog [data-upload-review] label { display: flex; align-items: center; gap: var(--ui-space-8); }
.online-upload-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ui-space-8); }
.online-upload-warning { position: fixed; z-index: 50; right: var(--ui-space-24); bottom: var(--ui-space-24); box-sizing: border-box; display: flex; align-items: start; gap: var(--ui-space-12); width: min(440px, calc(100vw - var(--ui-space-32))); max-height: 50vh; overflow: auto; padding: var(--ui-space-12); border: var(--ui-border-0); border-radius: var(--ui-radius-12); background: var(--ui-bg); color: var(--ui-text-primary); box-shadow: var(--ui-shadow-3); font: var(--ui-font-weight-body) var(--ui-font-size-body)/var(--ui-line-height-body) var(--ui-font); }
.online-upload-warning > div { flex: 1; min-width: 0; }
.online-upload-warning [hidden] { display: none !important; }
.online-upload-warning p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.online-upload-warning [data-upload-details] { margin-top: var(--ui-space-8); }
.online-upload-warning ul { padding-left: var(--ui-space-24); overflow-wrap: anywhere; }
.online-upload-background { position: fixed; z-index: 50; right: var(--ui-space-24); bottom: var(--ui-space-24); box-sizing: border-box; display: grid; gap: var(--ui-space-8); width: min(360px, calc(100vw - var(--ui-space-32))); padding: var(--ui-space-16); border: var(--ui-border-0); border-radius: var(--ui-radius-12); background: var(--ui-bg); color: var(--ui-text-primary); box-shadow: var(--ui-shadow-3); font: var(--ui-font-weight-body) var(--ui-font-size-body)/var(--ui-line-height-body) var(--ui-font); }
.online-upload-background p { margin: 0; overflow-wrap: anywhere; }
.online-upload-background [data-upload-background-progress] { color: var(--ui-text-secondary); }
.online-upload-background button { justify-self: end; }
.online-upload-background [hidden] { display: none !important; }
.online-upload-warning[data-asset-in-progress], .online-upload-background[data-asset-in-progress] { top: var(--ui-space-24); bottom: auto; }
@media (max-width: 640px) { .online-panel { padding: var(--ui-space-16); } .online-content { grid-template-columns: 1fr; } .online-board-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }