.documents-app {
    min-height: 100%;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    background: var(--surface-solid);
}

.documents-sidebar {
    display: flex;
    flex-direction: column;
    padding: 16px 11px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-muted) 50%, transparent);
}

.documents-location-title { display: flex; align-items: center; gap: 10px; padding: 4px 8px 17px; font-size: 13px; }
.documents-location-title .app-icon { width: 29px; height: 29px; border-radius: 8px; box-shadow: none; }
.documents-sidebar nav { display: grid; gap: 3px; }
.documents-sidebar nav button {
    min-height: 39px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    color: var(--ink);
    text-align: left;
    background: transparent;
}
.documents-sidebar nav button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.documents-sidebar nav button.is-current { background: color-mix(in srgb, var(--luma-accent) 15%, var(--surface-raised)); }
.documents-sidebar nav button:disabled { opacity: .55; }
.documents-sidebar nav .icon { width: 18px; }
.documents-sidebar nav small { color: var(--ink-muted); font-size: 9px; }

.storage-summary { display: grid; gap: 8px; margin-top: auto; padding: 16px 9px 6px; border-top: 1px solid var(--line); }
.storage-summary > div:first-child { display: grid; gap: 3px; }
.storage-summary span { color: var(--ink-muted); font-size: 10px; }
.storage-summary strong { font-size: 11px; }
.storage-summary small { color: var(--ink-muted); font-size: 9px; line-height: 1.4; }
.storage-track { height: 5px; overflow: hidden; border-radius: 5px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.storage-track i { width: 100%; height: 100%; display: block; border-radius: inherit; background: var(--luma-accent); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease-out); }

.documents-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); }
.documents-toolbar {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
    overflow: auto hidden;
}
.toolbar-primary, .toolbar-context { display: flex; align-items: center; gap: 4px; }
.documents-app.has-selection .toolbar-primary { display: none; }
.toolbar-context { padding-left: 7px; border-left: 1px solid var(--line); }
.view-controls { display: flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: 9px; background: var(--surface-muted); }
.view-controls button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; color: var(--ink-muted); background: transparent; }
.view-controls button:hover { color: var(--ink); }
.view-controls button.is-selected { color: var(--ink); background: var(--surface-raised); box-shadow: 0 2px 7px rgba(10, 15, 38, .1); }
.view-controls .icon { width: 16px; height: 16px; }
.toolbar-button {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    color: var(--ink);
    white-space: nowrap;
    background: transparent;
}
.toolbar-button:hover:not(:disabled) { background: var(--surface-muted); }
.toolbar-button--primary { color: #fff; background: var(--luma-accent); }
.toolbar-button--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--luma-accent), white 9%); }
.toolbar-button--danger:not(:disabled) { color: #d1485c; }
.toolbar-button:disabled { opacity: .38; cursor: not-allowed; }
.toolbar-context .toolbar-button:disabled { display: none; }
.toolbar-button .icon { width: 17px; }

.documents-search {
    min-width: 190px;
    width: min(280px, 24vw);
    flex: 1 1 190px;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    padding: 0 10px;
    border-radius: 9px;
    background: var(--surface-muted);
}
.documents-search .icon { width: 16px; color: var(--ink-muted); }
.documents-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.documents-search input::placeholder { color: var(--ink-muted); opacity: 1; }

.documents-path { min-height: 48px; display: flex; align-items: center; gap: 5px; padding: 7px 16px; border-bottom: 1px solid var(--line); overflow: auto hidden; }
.documents-path button { padding: 7px 9px; border: 0; border-radius: 8px; color: var(--ink); white-space: nowrap; background: transparent; }
.documents-path button:hover { background: var(--surface-muted); }
.documents-path .icon { flex: 0 0 auto; width: 15px; color: var(--ink-muted); }
.documents-path strong { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.documents-path > span { margin-left: auto; color: var(--ink-muted); font-size: 10px; white-space: nowrap; }
.mobile-storage-label { display: none; }

.documents-selection-bar { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 4px 17px; color: color-mix(in srgb, var(--luma-accent), var(--ink) 30%); background: color-mix(in srgb, var(--luma-accent) 10%, var(--surface-muted)); font-size: 11px; }
.documents-selection-bar button { border: 0; color: inherit; background: transparent; font-weight: 600; }

.documents-browser-shell { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 210px; overflow: hidden; }
.documents-browser { min-width: 0; min-height: 0; overflow: auto; padding-bottom: 20px; }
.documents-table-head, .document-row { min-width: 650px; display: grid; grid-template-columns: 32px minmax(210px, 1.8fr) minmax(140px, 1fr) minmax(100px, .8fr) 80px; align-items: center; gap: 8px; padding: 0 16px; }
.documents-table-head { position: sticky; top: 0; z-index: 2; min-height: 36px; color: var(--ink-muted); border-bottom: 1px solid var(--line); background: var(--surface-solid); font-size: 10px; }
.document-row { min-height: 48px; color: var(--ink-muted); border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent); font-size: 11px; }
.document-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.document-row.is-selected { background: color-mix(in srgb, var(--luma-accent) 13%, var(--surface-solid)); }
.document-row label, .documents-table-head label { display: grid; place-items: center; }
.document-row input, .documents-table-head input { width: 15px; height: 15px; accent-color: var(--luma-accent); }
.document-name { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.document-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.document-kind { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #7180a5; background: var(--surface-muted); }
.document-kind--folder { color: #5f73dc; background: color-mix(in srgb, #6578e3 14%, var(--surface-muted)); }
.document-kind .icon { width: 17px; height: 17px; }

.document-details { min-width: 0; padding: 25px 18px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--surface-muted) 42%, transparent); }
.detail-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 13px; color: color-mix(in srgb, var(--luma-accent), var(--ink) 18%); background: color-mix(in srgb, var(--luma-accent) 13%, var(--surface-muted)); }
.detail-icon .icon { width: 27px; height: 27px; }
.document-details h2 { margin: 0 0 7px; font-size: 15px; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; }
.document-details p { margin: 0; color: var(--ink-muted); font-size: 10px; line-height: 1.5; }
.document-details dl { display: grid; gap: 0; margin: 18px 0 0; }
.document-details dl div { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--line); }
.document-details dt { color: var(--ink-muted); font-size: 9px; }
.document-details dd { margin: 0; font-size: 10px; overflow-wrap: anywhere; }

.documents-app[data-view="grid"] .documents-table-head { display: none; }
.documents-app[data-view="grid"] .documents-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 16px; }
.documents-app[data-view="grid"] .document-row { min-width: 0; min-height: 128px; display: grid; grid-template-columns: 20px 1fr; grid-template-rows: 1fr auto; align-items: start; gap: 7px; padding: 12px; border: 0; border-radius: 13px; background: var(--surface-muted); }
.documents-app[data-view="grid"] .document-row:hover { background: color-mix(in srgb, var(--surface-muted), var(--ink) 5%); }
.documents-app[data-view="grid"] .document-row.is-selected { background: color-mix(in srgb, var(--luma-accent) 15%, var(--surface-muted)); }
.documents-app[data-view="grid"] .document-name { grid-column: 1 / -1; grid-row: 1; min-width: 0; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; }
.documents-app[data-view="grid"] .document-kind { width: 48px; height: 48px; border-radius: 12px; }
.documents-app[data-view="grid"] .document-kind .icon { width: 25px; height: 25px; }
.documents-app[data-view="grid"] .document-row time { grid-column: 2; grid-row: 2; text-align: right; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.documents-app[data-view="grid"] .document-row > span:not(.document-name) { display: none; }

.documents-empty { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 32px; text-align: center; }
.documents-empty > .icon { width: 38px; height: 38px; margin-bottom: 5px; color: color-mix(in srgb, var(--luma-accent), var(--ink-muted) 45%); }
.documents-empty h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.documents-empty p { max-width: 42ch; margin: 0; color: var(--ink-muted); font-size: 11px; line-height: 1.5; }
.documents-empty button { min-height: 36px; margin-top: 6px; padding: 0 13px; border: 0; border-radius: 9px; color: #fff; background: var(--luma-accent); }
.documents-loading, .app-loading { padding: 30px; color: var(--ink-muted); font-size: 12px; }
.app-error { max-width: 60ch; padding: 36px; }

.documents-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 15px; color: var(--ink); background: var(--surface-raised); box-shadow: var(--panel-shadow); }
.documents-dialog::backdrop { background: rgba(4, 8, 25, .48); backdrop-filter: blur(3px); }
.documents-dialog form { padding: 24px; }
.documents-dialog h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.025em; }
.documents-dialog p { margin: 0 0 18px; color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.documents-dialog label { display: grid; gap: 7px; margin-top: 17px; color: var(--ink-muted); font-size: 11px; }
.documents-dialog input, .documents-dialog select { width: 100%; min-height: 41px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.dialog-actions button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; color: var(--ink); background: var(--surface-muted); }
.dialog-actions button.is-primary { color: #fff; background: var(--luma-accent); }
.dialog-actions button.is-danger { color: #fff; background: #ca3f55; }

.documents-app[data-trash="true"] [data-action="new-folder"],
.documents-app[data-trash="true"] [data-action="upload"],
.documents-app[data-trash="true"] [data-action="download"],
.documents-app[data-trash="true"] [data-action="rename"],
.documents-app[data-trash="true"] [data-action="move"],
.documents-app[data-trash="true"] [data-action="trash"],
.documents-app[data-trash="false"] [data-action="restore"],
.documents-app[data-trash="false"] [data-action="delete"],
.documents-app[data-trash="false"] [data-action="empty-trash"] { display: none; }

@media (max-width: 820px) {
    .documents-app { grid-template-columns: 172px minmax(0, 1fr); }
    .toolbar-button span { display: none; }
    .documents-search { min-width: 160px; }
}

@media (max-width: 660px) {
    .documents-app { grid-template-columns: 1fr; }
    .documents-sidebar { display: none; }
    .documents-toolbar { flex-wrap: wrap; }
    .documents-search { width: 100%; order: 3; }
}

@container (max-width: 680px) {
    .documents-app { grid-template-columns: 1fr; }
    .documents-sidebar { display: none; }
    .documents-toolbar { flex-wrap: wrap; }
    .documents-search { width: 100%; order: 3; }
    .documents-browser-shell { grid-template-columns: minmax(0, 1fr); }
    .document-details { display: none; }
    .mobile-storage-label { display: inline; }
}

@container (max-width: 900px) {
    .documents-browser-shell { grid-template-columns: minmax(0, 1fr); }
    .document-details { display: none; }
}