:root {
    color-scheme: dark;
    --bg: #121413;
    --panel: #1b1e1c;
    --raised: #252925;
    --border: #3b4038;
    --text: #f0eee7;
    --muted: #b1b5aa;
    --accent: #c9ad79;
    --ink: #171910;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    font-size: 16px;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}
body[data-theme='silver'] {
    --accent: #aebbd0;
}
body[data-theme='olive'] {
    --accent: #b7bea5;
}
[hidden] {
    display: none !important;
}
a {
    color: var(--accent);
    text-underline-offset: 4px;
}
button,
input,
select,
textarea {
    font: inherit;
}
button,
a.primary {
    cursor: pointer;
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 18px;
    color: var(--text);
    background: var(--raised);
    text-decoration: none;
    display: inline-block;
}
button:hover {
    border-color: var(--accent);
}
button:disabled {
    opacity: 0.5;
    cursor: wait;
}
.primary {
    background: var(--accent) !important;
    color: var(--ink) !important;
    border-color: var(--accent) !important;
    font-weight: 650;
}
.quiet {
    background: transparent;
}
.danger {
    color: #ffc6ba;
    border-color: #76594f;
}
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}
.topbar {
    max-width: 1280px;
    margin: auto;
    min-height: 96px;
    padding: 20px 36px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.brand {
    font-family: Georgia, serif;
    font-size: 25px;
    color: var(--text);
    text-decoration: none;
    line-height: 1.1;
}
.brand span {
    display: block;
    font: 10px system-ui;
    letter-spacing: 3px;
    margin-top: 9px;
    color: var(--muted);
}
nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
main {
    max-width: 1160px;
    margin: auto;
    padding: 0 30px 50px;
}
h1,
h2,
h3 {
    line-height: 1.2;
    font-weight: 400;
}
h1 {
    font:
        clamp(32px, 4vw, 48px)/1.2 Georgia,
        serif;
}
h2 {
    font:
        clamp(24px, 3vw, 32px)/1.25 Georgia,
        serif;
    margin: 10px 0 16px;
}
h3 {
    font-size: 20px;
}
.eyebrow {
    font-size: 12px;
    letter-spacing: 2.5px;
    color: var(--accent);
}
.couple {
    font-size: clamp(44px, 6vw, 76px);
    margin: 12px 0;
}
.couple em {
    color: var(--accent);
    font-weight: 400;
}
.welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 48px 0 36px;
}
.welcome p {
    color: var(--muted);
    margin: 0;
}
.date {
    color: var(--accent);
    text-align: right;
    font-size: 15px;
}
.panel {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    padding: 28px;
}
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pill {
    font-size: 13px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--muted);
    white-space: nowrap;
}
.dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 1px dashed #7c826f;
    border-radius: 8px;
    min-height: 220px;
    padding: 24px;
    text-align: center;
    background: #20251f;
    cursor: pointer;
    margin: 14px 0;
}
.dropzone:hover,
.dropzone.drag {
    border-color: var(--accent);
    background: #282d25;
}
.dropzone input {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.dropzone:focus-within {
    outline: 3px solid var(--accent);
}
.dropzone strong {
    font-size: 21px;
    font-weight: 550;
}
.dropzone span:not(.upload-symbol),
small {
    font-size: 14px;
    color: var(--muted);
}
.upload-symbol {
    color: var(--accent);
    font-size: 34px;
    line-height: 1;
}
.muted {
    color: var(--muted);
}
.small {
    font-size: 14px;
}
.selection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.file-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
    padding: 10px;
    min-width: 0;
}
.file-card .visual {
    width: 100%;
    height: 135px;
    object-fit: cover;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--raised);
    border: 0;
    border-radius: 3px;
    color: var(--muted);
    font-size: 15px;
}
.file-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.file-card p {
    margin: 7px 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}
.file-card .quiet {
    padding: 5px 9px;
    width: 100%;
    font-size: 14px;
}
.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0;
}
.consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 20px 0;
}
.consent input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 4px;
    accent-color: var(--accent);
}
progress {
    width: 100%;
    height: 7px;
    accent-color: var(--accent);
}
#upload-message,
#admin-message,
#login-error {
    color: var(--accent);
    white-space: pre-line;
}
#gallery {
    padding: 40px 0;
}
.filters,
.admin-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 24px;
}
.filters button {
    border-radius: 24px;
    padding: 7px 20px;
    min-height: 42px;
}
.filters [aria-pressed='true'],
.admin-tabs .active {
    background: var(--accent);
    color: var(--ink);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.gallery-card {
    min-width: 0;
}
.gallery-card button.cover {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 250px;
    background: var(--panel);
}
.gallery-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.gallery-card button:hover img {
    transform: scale(1.02);
}
.caption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--muted);
    padding: 8px 0;
}
.caption span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.empty {
    padding: 45px 20px;
    text-align: center;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 8px;
}
label {
    display: block;
    margin-bottom: 16px;
    font-size: 15px;
}
input:not([type='checkbox']):not([type='file']),
select,
textarea {
    display: block;
    width: 100%;
    border: 1px solid #50564a;
    border-radius: 5px;
    color: var(--text);
    background: var(--bg);
    padding: 12px;
    margin-top: 7px;
    min-height: 46px;
}
textarea {
    min-height: 95px;
    resize: vertical;
}
.login-view {
    text-align: center;
    padding: 55px 0;
}
.login-panel {
    max-width: 460px;
    margin: 30px auto;
    text-align: left;
}
.login-panel .primary {
    width: 100%;
}
.login-panel h2 {
    font-size: 28px;
}
.login-panel p {
    font-size: 15px;
    color: var(--muted);
}
#admin-view {
    padding-top: 35px;
}
.inline-form {
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
}
.inline-form label {
    flex: 1;
    min-width: 140px;
    margin: 0;
}
.inline-form button {
    margin-bottom: 0;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.row {
    border-top: 1px solid var(--border);
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
.row > div:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
.row .actions {
    margin: 0;
}
.row small {
    display: block;
}
.row button {
    font-size: 14px;
    padding: 8px 12px;
}
.layout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--raised);
    margin: 8px 0;
    padding: 10px;
    border-radius: 5px;
}
.layout-row button {
    min-width: 44px;
    padding: 6px 14px;
}
.admin-tab {
    margin-bottom: 24px;
}
dialog {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    max-width: min(900px, 94vw);
    width: 100%;
    max-height: 94dvh;
    overflow: auto;
}
dialog::backdrop {
    background: #000c;
}
.dialog-close {
    display: block;
    margin-left: auto;
    margin-bottom: 15px;
}
#preview-content img,
#preview-content video {
    display: block;
    max-width: 100%;
    max-height: 65dvh;
    margin: auto;
}
#preview-name {
    overflow-wrap: anywhere;
}
#link-dialog {
    max-width: 650px;
}
details {
    margin-top: 20px;
}
summary {
    cursor: pointer;
    min-height: 44px;
    padding: 8px 0;
}
footer {
    padding: 25px;
    text-align: center;
    color: var(--muted);
    font-family: Georgia, serif;
    font-size: 15px;
    border-top: 1px solid var(--border);
}
.stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0;
}
.stat {
    padding: 15px;
    background: var(--raised);
    border-radius: 6px;
}
.stat strong {
    display: block;
    font-size: 26px;
    font-weight: 500;
}
.status-error {
    color: #ffc6ba;
}
.status-ok {
    color: #c5d5b8;
}
@media (max-width: 700px) {
    .topbar {
        padding: 16px 20px;
    }
    .topbar nav {
        gap: 6px;
    }
    #identity {
        display: none;
    }
    nav button {
        font-size: 14px;
        padding: 8px;
    }
    main {
        padding: 0 16px 30px;
    }
    .welcome {
        padding: 28px 0;
        display: block;
    }
    .date {
        display: block;
        margin-top: 16px;
        text-align: left;
    }
    .panel {
        padding: 20px 16px;
    }
    .section-heading {
        align-items: flex-start;
    }
    .section-heading .pill {
        display: none;
    }
    .dropzone {
        min-height: 210px;
        padding: 20px 12px;
    }
    .dropzone strong {
        font-size: 19px;
    }
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .gallery-card button.cover {
        height: 180px;
    }
    .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .row {
        align-items: flex-start;
        flex-direction: column;
    }
    .row .actions {
        gap: 8px;
    }
    .login-view {
        padding: 32px 0;
    }
    .login-panel {
        margin: 24px auto;
    }
    .selection {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inline-form {
        display: block;
    }
    .inline-form label {
        margin-bottom: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

#invitation-card { text-align: center; padding: 20px; background: #fff; color: #171717; border-radius: 12px; margin: 16px 0; }
#invitation-qr svg { display: block; width: min(100%, 320px); height: auto; margin: auto; }
@media print {
    @page { margin: 20mm; }
    body { background: white !important; color: black !important; }
    body > :not(#link-dialog) { display: none !important; }
    #link-dialog { position: static !important; max-height: none; max-width: none; width: 100%; padding: 0; border: 0; background: white; color: black; box-shadow: none; overflow: visible; }
    #link-dialog::backdrop { background: transparent; }
    #link-dialog > :not(#invitation-card) { display: none !important; }
    #invitation-card { break-inside: avoid; margin: 0; border: 1px solid #bbb; }
    #invitation-qr svg { width: 65mm; height: 65mm; }
}

#preview-navigation:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; }
#preview-navigation button { min-height: 48px; min-width: 48px; }
#preview-position { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { #preview-navigation { gap: 6px; } #preview-navigation button { padding: 10px 8px; font-size: 14px; } }

/* Keep guest gallery controls visible above the media, including on phones. */
#preview-navigation { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 8px 0; }
#preview-navigation button { flex-shrink: 0; }

.invitation-access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.invitation-link-block { min-width: 0; text-align: left; }
#invitation-link { color: #171717; text-decoration: underline; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
@media screen and (max-width: 540px) { .invitation-access { grid-template-columns: 1fr; } }
@media print {
    .invitation-access { grid-template-columns: 65mm minmax(0, 1fr); gap: 8mm; }
    #invitation-link { font-size: 10pt; color: black; }
}
/* 1.2 configurable sections and guest media management */
#welcome { display: block; }
.section-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.section-bar h2 { margin:0; flex:1; }
.section-toggle { width:100%; display:flex; justify-content:space-between; gap:16px; align-items:center; text-align:left; font:inherit; color:inherit; padding:12px 0; background:transparent; border:0; }
.section-toggle:disabled { opacity:1; cursor:default; }
.section-toggle[aria-expanded="false"] .section-arrow { transform:rotate(-90deg); }
.hidden-section-badge { border:1px solid #dfb36a; padding:6px 10px; color:#f0ca8f; border-radius:6px; }
.layout-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:14px 0; }
.layout-row > input { flex:1 1 220px; }
.layout-row .actions { flex:2 1 300px; }
.gallery-card .actions { padding:10px; }
.table-scroll { overflow:auto; max-height:400px; }
.table-scroll table { width:100%; border-collapse:collapse; }
.table-scroll th,.table-scroll td { padding:8px; border-bottom:1px solid var(--border); text-align:left; }
.import-panel { margin:28px 0; padding:18px 0; border-top:1px solid var(--border); }
#mail-form textarea { min-height:260px; }
#gallery-intro,#intro,#privacy-notice { white-space:pre-line; }
#site-brand { display:inline; font-size:inherit; letter-spacing:inherit; color:inherit; }
#print-invitation-sheet { display:none; }
@media print {
    body.invitation-print-window > :not(#print-invitation-sheet) { display:none !important; }
    body.invitation-print-window > #print-invitation-sheet { display:block !important; background:white; color:black; }
    #print-invitation-card { text-align:center; padding:20px; border:1px solid #bbb; break-inside:avoid; }
    #print-invitation-qr svg { display:block; width:65mm; height:65mm; }
    #print-invitation-link { color:black; text-decoration:underline; overflow-wrap:anywhere; font-size:10pt; line-height:1.6; }
}

.section-title { overflow-wrap:anywhere; min-width:0; }
#site-brand { overflow-wrap:anywhere; }

body.invitation-print-window { background:white; color:black; padding:24px; }
body.invitation-print-window > #print-invitation-sheet { display:block; max-width:800px; margin:auto; }