.archive-shell {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    min-height: 100vh;
}

.archive-sidebar {
    background: var(--pgs-surface);
    border-right: 1px solid var(--pgs-border);
}

.archive-sidebar nav {
    display: grid;
    gap: 5px;
    margin: 12px;
}

.archive-sidebar nav a {
    color: var(--pgs-text);
    padding: 11px 12px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--pgs-radius);
}

.archive-sidebar nav a:hover,
.archive-sidebar nav a[aria-current="page"] {
    background: var(--pgs-accent-soft);
    border-color: var(--pgs-border);
}

.archive-sidebar nav a[aria-current="page"] {
    font-weight: 600;
}

.archive-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 10px clamp(14px, 3vw, 34px);
    border-bottom: 1px solid var(--pgs-border);
    background: var(--pgs-surface);
    color: var(--pgs-muted);
}

.archive-panel {
    margin: clamp(12px, 3vw, 34px);
    padding: clamp(14px, 2vw, 24px);
    border: 1px solid var(--pgs-border);
    border-radius: var(--pgs-radius);
    background: var(--pgs-surface);
}

.archive-heading, .archive-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.archive-heading h1, .archive-dialog h2, .archive-login h1 {
    margin: 0;
    font: 600 clamp(1.45rem, 3vw, 1.9rem) / 1.2 Georgia, serif;
    color: var(--pgs-text);
}

.archive-shell .pgs-button, .archive-login .pgs-button {
    min-height: 35px;
    padding: 6px 14px;
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--pgs-border);
    border-radius: var(--pgs-radius);
    color: var(--pgs-text);
    background: var(--pgs-surface);
}

:is(.archive-shell, .archive-login) .pgs-button.archive-primary {
    border-color: var(--pgs-accent);
    background: var(--pgs-accent);
    color: #fff;
}

:is(.archive-shell, .archive-login) .pgs-button.archive-primary:hover:not(:disabled) {
    background: var(--pgs-accent-hover);
    color: #fff;
}

.archive-empty {
    margin: 20px 0 0;
    padding: 28px 12px;
    text-align: center;
    border: 1px dashed var(--pgs-border);
    border-radius: var(--pgs-radius);
    color: var(--pgs-muted);
}

.archive-table-wrap {
    overflow-x: auto;
    margin-top: 20px;
    border: 1px solid var(--pgs-border);
    border-radius: var(--pgs-radius);
}

.archive-selection-actions {
    margin-top: 18px;
}

.archive-selection-actions button:disabled {
    opacity: .55;
    cursor: default;
}

.archive-selection-actions + .archive-table-wrap {
    margin-top: 10px;
}

.archive-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--pgs-accent);
}

.archive-table th:first-child, .archive-table td:first-child {
    width: 1%;
}

.archive-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.archive-table th, .archive-table td {
    padding: 10px 13px;
    border-bottom: 1px solid var(--pgs-border-soft);
    vertical-align: top;
}

.archive-table th {
    background: var(--pgs-grid-header);
    font-weight: 600;
}

.archive-table tr:nth-child(even) {
    background: var(--pgs-grid-row-alt);
}

.archive-table tbody tr:last-child td {
    border-bottom: 0;
}

.archive-table time {
    white-space: nowrap;
}

.archive-files {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-files a {
    color: var(--pgs-accent-hover);
    overflow-wrap: anywhere;
}

.archive-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
}

.archive-login-card, .archive-dialog {
    box-sizing: border-box;
    width: min(100%, 468px);
    padding: 28px;
    background: var(--pgs-surface);
    color: var(--pgs-text);
    border: 1px solid var(--pgs-border);
    border-radius: var(--pgs-radius);
    box-shadow: 0 16px 42px #392b211c;
}

.archive-login-card img {
    width: min(100%, 245px);
    display: block;
    margin: 0 auto 22px;
}

.archive-login-card h1 {
    text-align: center;
    margin-bottom: 20px;
}

.archive-login-card form, .archive-dialog form, .archive-dialog label, .archive-login label {
    display: grid;
    gap: 8px;
}

.archive-login-card form, .archive-dialog form {
    gap: 16px;
}

.archive-dialog {
    width: min(calc(100% - 26px), 558px);
    max-height: calc(100% - 26px);
}

.archive-dialog::backdrop {
    background: #392b2166;
}

.archive-dialog p {
    margin: 0;
    color: var(--pgs-muted);
}

.archive-actions {
    justify-content: flex-end;
}

.archive-dialog input, .archive-dialog select, .archive-login input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 6px 9px;
    background: #fffdf9;
    color: var(--pgs-text);
    border: 1px solid var(--pgs-border);
    border-radius: var(--pgs-radius);
    font: inherit;
}

.archive-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 20;
}

@media (max-width: 680px) {
    .archive-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .archive-sidebar { border: 0; }
    .archive-sidebar nav { display: flex; flex-wrap: wrap; }
    .archive-top { min-height: auto; }
    .archive-top { border-top: 1px solid var(--pgs-border); }
    .archive-table th, .archive-table td { padding: 8px 6px; }
    .archive-table time { white-space: normal; }
    .archive-table .pgs-button { padding-inline: 8px; }
}