:root {
    color-scheme: light dark;
    --bg: #f6f5f2;
    --surface: #fff;
    --text: #1f2328;
    --muted: #6b7280;
    --border: #dcdad5;
    --accent: #2f6f5e;
    --danger: #b3261e;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #17191c;
        --surface: #22262b;
        --text: #e8e6e3;
        --muted: #9aa1ab;
        --border: #353a41;
        --accent: #6fbfa8;
        --danger: #f2877f;
    }
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 system-ui, sans-serif;
}
a { color: var(--accent); }
h1 { margin: 0 0 .5em; font-size: 1.6rem; }
.muted { color: var(--muted); }

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; color: var(--text); text-decoration: none; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }

button, .button {
    display: inline-block;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: var(--bg);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
button.plain { padding: 4px 8px; background: none; color: var(--accent); font-weight: 400; }
button.danger { color: var(--danger); }

input[type=text], input[type=password] {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
label { display: block; font-weight: 600; }
input[type=file] { display: block; margin-top: 4px; max-width: 100%; }

.flash {
    padding: 10px 14px;
    border: 1px solid var(--danger);
    border-radius: 6px;
    background: var(--surface);
}
.card, .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}
.card { max-width: 420px; margin: 8vh auto 0; display: grid; gap: 16px; }
.card h1, .card p { margin: 0; }
.panel { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 24px 0; }
.panel label { flex: 1 1 240px; }
.panel p { flex-basis: 100%; margin: 0; }

.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.head h1 { margin: 0; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.grid.albums { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.grid img, .tile .empty {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    background: var(--border);
}
.tile { display: grid; gap: 2px; color: var(--text); text-decoration: none; }
.tile img, .tile .empty { margin-bottom: 6px; }

figure { margin: 0; }
figcaption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    padding-top: 4px;
}
.album-delete { margin-top: 40px; text-align: right; }

dialog {
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    border: 0;
    background: none;
}
dialog::backdrop { background: rgb(0 0 0 / .88); }
dialog img {
    display: block;
    max-width: 96vw;
    max-height: calc(96vh - 56px);
    margin: 0 auto;
}
dialog .bar { display: flex; justify-content: center; align-items: center; gap: 16px; height: 56px; }
dialog button.plain { color: #fff; font-size: 1.5rem; }