:root {
    --paper: #f6f0e7;
    --card: #fbf6ed;
    --card-soft: #f7efe4;
    --ink: #4a2f22;
    --body: #705848;
    --muted: #9b8877;
    --olive: #777c50;
    --olive-dark: #5b603d;
    --gold: #b89253;
    --line: #d9c8b3;
    --shadow: 0 24px 72px rgba(62, 43, 30, 0.14);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-height: 100%;
    background: var(--paper);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Avenir, "Avenir Next", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.backstage-login-page{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.9),transparent 42%),var(--paper)}.backstage-login{width:min(440px,100%);padding:clamp(30px,6vw,50px);border:1px solid var(--line);border-radius:26px;background:rgba(251,246,237,.94);box-shadow:var(--shadow);text-align:center}.backstage-login h1{margin:8px 0 10px;font-family:Georgia,serif;font-size:clamp(2.2rem,8vw,3.4rem);font-weight:400}.backstage-login>p:not(.admin-kicker){margin:0 0 25px;color:var(--muted)}.backstage-login form:not(.legacy-login){display:grid;gap:14px;text-align:left}.backstage-login label{display:grid;gap:7px}.backstage-login label span{font-size:.8rem;font-weight:700}.backstage-login input{width:100%;min-height:50px;padding:0 15px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);outline:none}.backstage-login input:focus{border-color:var(--olive);box-shadow:0 0 0 4px rgba(119,124,80,.11)}.backstage-login-error{margin-bottom:16px;padding:11px;border-radius:9px;background:#f5e5e2;color:#8d443b;font-size:.82rem}.legacy-login{display:grid;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.legacy-login small{color:var(--muted);font-size:.68rem;line-height:1.4}.backstage-login-brand{display:block;margin:35px auto 0}.backstage-login-brand img{width:150px;height:auto}.admin-logout{text-align:center;margin:8px 0 0;font-size:.72rem}.admin-logout a{color:var(--muted)}

button,
input {
    font: inherit;
}

.page-shell {
    position: relative;
    width: min(100%, 860px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 44px 24px 48px;
    overflow: hidden;
}

.wedding-header,
.upload-card,
.gallery-placeholder,
.wedding-footer {
    position: relative;
    z-index: 1;
}

.wedding-header {
    width: min(100%, 560px);
    margin: 0 auto 28px;
    text-align: center;
}

.project-logo { display:block; width:auto; max-width:min(300px,72vw); max-height:120px; margin:0 auto 22px; object-fit:contain; }
.project-title { margin:0; color:var(--ink); font-family:Avenir,"Avenir Next",sans-serif; font-size:clamp(2rem,6vw,3.4rem); font-weight:750; letter-spacing:-.035em; }
.project-subtitle { margin:10px 0 0; color:var(--body); font-size:.98rem; letter-spacing:.06em; }
.project-symbol{margin:0 0 10px;color:var(--gold);font-size:1rem;font-weight:800;letter-spacing:.2em}.project-date{margin-top:18px}.layout-party .project-title,.layout-family .project-title{font-family:Georgia,"Times New Roman",serif}.layout-festival .project-title{font-weight:900;letter-spacing:.04em;text-transform:uppercase}.layout-family .project-symbol{font-size:2.2rem}.style-modern .project-title,.style-modern h2,.style-bold .project-title,.style-bold h2{font-family:Avenir,"Avenir Next",sans-serif}.style-elegant .project-title,.style-elegant h2,.style-soft .project-title,.style-soft h2{font-family:Georgia,"Times New Roman",serif}.style-soft .upload-card{border-radius:34px}.style-soft .drop-zone{border-radius:20px}.style-playful .upload-card{border-radius:24px}.style-playful .project-title{letter-spacing:.01em}.style-bold .upload-card{border-radius:10px;border-width:2px}.style-bold h2{font-weight:900;letter-spacing:.2em}.style-bold .primary-button{border-radius:8px;font-weight:900}.style-modern .upload-card{border-radius:18px}
.layout-business .wedding-header { margin-bottom:34px; }
.layout-business .upload-card { border-radius:18px; }
.layout-business h2 { color:var(--ink); font-family:Avenir,"Avenir Next",sans-serif; letter-spacing:.18em; }
.layout-business .primary-button { color:var(--paper); }
.page-shell .primary-button { color:var(--paper); }
.monogram {
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 6vw, 4.4rem);
    font-weight: 400;
    line-height: 1;
}

.monogram span {
    margin: 0 0.18em;
    font-size: 0.42em;
    vertical-align: 0.2em;
}

h1,
h2,
p {
    overflow-wrap: anywhere;
}

.divider {
    display: grid;
    grid-template-columns: 62px auto 62px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 14px 0 15px;
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
}

.divider span {
    height: 1px;
    background: rgba(184, 146, 83, 0.5);
}

.divider b {
    font-weight: 400;
}

.date {
    margin: 0;
    color: #8a6045;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    line-height: 1.5;
    text-transform: uppercase;
}

.upload-card {
    width: min(100%, 650px);
    margin: 0 auto;
    padding: clamp(30px, 5vw, 48px) clamp(24px, 5vw, 54px) 42px;
    border: 1px solid rgba(112, 88, 72, 0.2);
    border-radius: 28px;
    background: rgba(251, 246, 237, 0.88);
    box-shadow: var(--shadow);
}

/* Het uploadvlak blijft licht, dus de tekstkleuren horen bij het vlak en niet
   bij de (mogelijk donkere) gekozen paginakleur. */
.upload-card h2 {
    color: #6f472f;
}

.upload-card .field,
.upload-card .field > span,
.upload-card .drop-title {
    color: #4f4037;
}

.upload-card .field small,
.upload-card .drop-copy,
.upload-card .format-note,
.upload-card .selected-count {
    color: #766a62;
}

.upload-card .field input[type="text"] {
    color: #4f4037;
}

.upload-card .field input[type="text"]::placeholder {
    color: #82756c;
    opacity: 1;
}

.card-heading {
    justify-content: center;
    margin-bottom: 26px;
    text-align: center;
}

h2 {
    margin: 0;
    color: #8a5632;
    font-size: clamp(1rem, 2.4vw, 1.18rem);
    font-weight: 700;
    letter-spacing: 0.34em;
    line-height: 1.4;
    text-transform: uppercase;
}

.upload-form {
    display: grid;
    gap: 18px;
}

.upload-form[hidden] {
    display: none;
}

.field {
    display: grid;
    gap: 8px;
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 500;
    text-align: center;
}

.field > span,
.field > small {
    display: block;
    width: 100%;
    text-align: center;
}

.field small {
    margin-top: -2px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 400;
}

.field input[type="text"] {
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    background: rgba(255, 250, 242, 0.34);
    outline: none;
    font-size: 0.95rem;
    text-align: center;
}

.field input[type="text"]::placeholder {
    color: rgba(112, 88, 72, 0.55);
}

.field input[type="text"]:focus {
    border-color: var(--olive);
    box-shadow: 0 0 0 4px rgba(119, 124, 80, 0.11);
}

.drop-zone {
    display: grid;
    place-items: center;
    min-height: 158px;
    padding: 24px 22px;
    border: 1px dashed rgba(112, 88, 72, 0.38);
    border-radius: 13px;
    color: #4f4037;
    background: rgba(247, 239, 228, 0.36);
    cursor: pointer;
    text-align: center;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.drop-zone input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.drop-zone.is-over {
    border-color: var(--olive);
    background: rgba(247, 239, 228, 0.7);
    transform: translateY(-1px);
}

.media-glyph svg {
    width: 96px;
    height: 50px;
    margin: 0 0 8px;
    overflow: visible;
    fill: none;
    stroke: #8b7d57;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.media-glyph svg.photo-only {
    width: 54px;
}

.drop-title {
    display: block;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 500;
}

.drop-copy {
    display: block;
    margin-top: 6px;
    color: var(--body);
    font-size: 0.85rem;
    font-weight: 400;
}

.format-note {
    margin: -2px 0 0;
    color: var(--body);
    font-size: 0.85rem;
    line-height: 1.5;
}

.preview-list {
    display: grid;
    gap: 10px;
}

.preview-more {
    margin: 2px 0 0;
    padding: 10px;
    color: #766a62;
    font-size: 0.82rem;
    text-align: center;
}

.selected-count {
    margin: -12px 0 -4px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 400;
    text-align: center;
}

.preview-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px;
    border: 1px solid rgba(112, 88, 72, 0.15);
    border-radius: 14px;
    background: rgba(247, 239, 228, 0.46);
}

.preview-thumb {
    width: 58px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--card-soft);
}

.preview-video {
    display: grid;
    place-items: center;
    width: 58px;
    height: 48px;
    border-radius: 10px;
    color: var(--olive-dark);
    background: var(--card-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

.preview-name {
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-size {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
}

.remove-file {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(112, 88, 72, 0.25);
    border-radius: 999px;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
}

.remove-file:hover,
.remove-file:focus-visible {
    border-color: var(--olive);
    outline: none;
}

.progress-wrap {
    display: grid;
    gap: 9px;
}

.progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--body);
    font-size: 0.84rem;
    font-weight: 600;
}

.progress-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9dfcf;
}

.progress-bar span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--olive);
    transition: width 140ms ease;
}

.primary-button {
    display: inline-grid;
    place-items: center;
    justify-self: center;
    width: min(100%, 390px);
    min-height: 60px;
    margin-top: 4px;
    border: 1px solid rgba(229, 216, 136, 0.42);
    border-radius: 999px;
    color: #fffaf1;
    background: var(--olive);
    box-shadow: 0 15px 32px rgba(91, 96, 61, 0.28);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
}

.primary-button:hover,
.primary-button:focus-visible {
    background: var(--olive-dark);
    outline: none;
}

.primary-button:disabled,
.upload-form[aria-disabled="true"] .drop-zone {
    cursor: not-allowed;
    opacity: 0.58;
}

.notice,
.result-message {
    padding: 16px 18px;
    border: 1px solid rgba(119, 124, 80, 0.24);
    border-radius: 14px;
    color: var(--ink);
    background: rgba(230, 215, 131, 0.18);
    font-size: 0.93rem;
    line-height: 1.5;
}

.notice {
    margin-bottom: 20px;
    text-align: center;
}

.result-message {
    margin-top: 22px;
    text-align: center;
}

.result-message strong {
    display: block;
    margin-bottom: 6px;
    font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;
    font-size: clamp(1.35rem, 6vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.result-message.result-font-script strong{font-family:"Snell Roundhand","Apple Chancery","Segoe Script",cursive}.result-message.result-font-serif strong{font-family:Georgia,"Times New Roman",serif;font-weight:500}.result-message.result-font-sans strong{font-family:Avenir,"Avenir Next",Inter,Arial,sans-serif;font-size:clamp(1.05rem,4vw,1.35rem);font-weight:750}

.name-character-count {
    margin-top: -2px;
    font-size: 0.72rem !important;
    text-align: right !important;
}

.gallery-placeholder,
.gallery-section {
    width: min(100%, 650px);
    margin: 20px auto 0;
    text-align: center;
}

.gallery-placeholder p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.gallery-section {
    margin-top: 28px;
}

.gallery-section h2 {
    margin-bottom: 18px;
}

.gallery-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: 8px;
    align-items: start;
    gap: 12px;
}

.gallery-item {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(112, 88, 72, 0.16);
    border-radius: 16px;
    color: var(--ink);
    background: rgba(251, 246, 237, 0.8);
    box-shadow: 0 12px 32px rgba(62, 43, 30, 0.08);
    cursor: pointer;
}

.gallery-item img,
.gallery-item video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.gallery-item video {
    background: var(--card-soft);
}
.gallery-item .video-thumbnail { height:auto; background:var(--card-soft); }
.video-play{position:absolute;inset:0 0 42px;display:grid;place-items:center;color:#fff;font-size:1.1rem;text-shadow:0 2px 8px rgba(0,0,0,.55);pointer-events:none}.video-play::before{content:"";position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(35,29,25,.55);backdrop-filter:blur(3px);z-index:-1}

.gallery-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    color: var(--body);
    font-size: 0.78rem;
}

.gallery-meta strong {
    color: var(--ink);
    font-weight: 700;
}

.gallery-meta small {
    color: var(--muted);
}

.video-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fffaf1;
    background: rgba(74, 47, 34, 0.72);
    font-size: 0.72rem;
    font-weight: 800;
}

.viewer {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(33, 27, 23, 0.82);
}

.viewer-stage {
    display: grid;
    place-items: center;
    width: min(100%, 980px);
    max-height: 88vh;
}

.viewer-stage img,
.viewer-stage video {
    max-width: 100%;
    max-height: 88vh;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.viewer-close {
    position: fixed;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 250, 241, 0.32);
    border-radius: 999px;
    color: #fffaf1;
    background: rgba(74, 47, 34, 0.4);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
}

.wedding-footer {
    width: min(100%, 560px);
    margin: 48px auto 0;
    color: var(--body);
    text-align: center;
}

.wedding-footer div {
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
}

.wedding-footer p {
    margin: 8px 0 0;
    font-size: 1.08rem;
    letter-spacing: 0.05em;
}

.wedding-footer .thanks {
    color: #68432d;
    font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;
    font-size: 2.8rem;
    letter-spacing: 0;
}

.wedding-footer.closing-font-script .thanks {
    font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;
    font-style: normal;
    font-weight: 400;
}

.wedding-footer.closing-font-serif .thanks {
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
    font-weight: 400;
}

.wedding-footer.closing-font-sans .thanks {
    font-family: Avenir, "Avenir Next", Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.powered-by {
    margin: 38px 0 0;
    color: rgba(112, 88, 72, 0.58);
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    line-height: 1.6;
    text-align: center;
}

.powered-by a {
    color: inherit;
    text-decoration: none;
}

.powered-by a:hover,
.powered-by a:focus-visible {
    color: var(--olive-dark);
    text-decoration: underline;
}

.install-checks {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
}

.install-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(112, 88, 72, 0.16);
    border-radius: 14px;
    background: rgba(247, 239, 228, 0.46);
}

.install-check strong {
    color: var(--ink);
    font-size: 0.92rem;
}

.install-check span {
    min-width: 76px;
    color: var(--olive-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.install-check.is-error span {
    color: #8a4c35;
}

.link-button {
    margin-top: 2px;
}

.admin-shell {
    width: min(100%, 1240px);
    margin: 0 auto;
    padding: 24px 20px 54px;
}

.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    margin-bottom: 24px;
    padding: 0;
    text-align: left;
}

.admin-kicker {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.admin-header h1 {
    margin: 0;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 5vw, 3.4rem);
    font-weight: 400;
    line-height: 1;
}

.admin-project-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.admin-list-controls select {
    min-height: 44px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: rgba(255, 250, 242, 0.42);
    font: inherit;
    font-size: 0.82rem;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--body) 50%), linear-gradient(135deg, var(--body) 50%, transparent 50%);
    background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

.admin-sort-control,
.admin-search-control {
    margin: 0;
}

.admin-sort-control { display: block !important; }

.admin-search-control {
    display: block !important;
}

.admin-project-heading h1 {
    margin: 0;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 400;
    line-height: 1;
}

.admin-live-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 800;
}

.admin-live-status::before {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    content: "";
}

.admin-live-status.is-active { color: #2f6f43; }
.admin-live-status.is-active::before { background: #4a9a61; box-shadow: 0 0 0 4px rgba(74, 154, 97, 0.12); }
.admin-live-status.is-inactive { color: #a13b32; }
.admin-live-status.is-inactive::before { background: #b44b42; box-shadow: 0 0 0 4px rgba(180, 75, 66, 0.1); }

.admin-link,
.admin-button {
    display: inline-grid;
    place-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(112, 88, 72, 0.22);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(251, 246, 237, 0.72);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.admin-link:hover,
.admin-button:hover {
    border-color: var(--olive);
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.admin-share-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 15px 18px;
    border: 1px solid rgba(112, 88, 72, 0.17);
    border-radius: 16px;
    background: rgba(251, 246, 237, 0.82);
    box-shadow: 0 14px 42px rgba(62, 43, 30, 0.06);
}

.admin-share-copy h2,
.admin-panel-heading h2 {
    margin: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.admin-share-copy p,
.admin-panel-heading p,
.admin-qr-panel p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.77rem;
    line-height: 1.45;
}

.admin-share-copy a {
    display: inline-block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.77rem;
    line-height: 1.45;
    text-decoration: underline;
    text-decoration-color: rgba(112, 88, 72, 0.35);
    text-underline-offset: 3px;
}

.admin-share-copy a:hover,
.admin-share-copy a:focus-visible {
    color: var(--olive-dark);
    text-decoration-color: currentColor;
}

.admin-share-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-share-actions .admin-live-status {
    margin: 0 10px 0 0;
}

.admin-qr-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(112, 88, 72, 0.13);
}

.admin-qr-panel[hidden] { display: none; }

.admin-qr-code {
    display: grid;
    place-items: center;
    width: 150px;
    min-height: 150px;
    padding: 10px;
    border: 1px solid rgba(112, 88, 72, 0.15);
    border-radius: 12px;
    background: #fff;
}

.admin-qr-code img,
.admin-qr-code svg {
    display: block;
    width: 128px;
    height: 128px;
}

.admin-qr-panel .admin-button { margin-top: 11px; }

.admin-grid article,
.admin-panel {
    border: 1px solid rgba(112, 88, 72, 0.17);
    border-radius: 18px;
    background: rgba(251, 246, 237, 0.82);
    box-shadow: 0 14px 42px rgba(62, 43, 30, 0.08);
}

.admin-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.65fr);
    align-items: start;
    gap: 14px;
}

.admin-content-grid .admin-panel {
    margin-top: 0;
}

.admin-side-column {
    display: grid;
    gap: 14px;
}
.admin-settings-panel{order:1}.admin-slideshow-panel{order:2}.admin-download-panel{order:3}.admin-theme-panel{order:4}.admin-closing-panel{order:5}

.admin-panel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: -2px 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(112, 88, 72, 0.13);
}

.admin-media-panel {
    min-width: 0;
}

.admin-settings-list {
    margin: -4px 0;
}

.admin-slideshow-options { margin-top: 12px; padding-top:13px; border-top:1px solid var(--line) }
.admin-slideshow-qr-setting{margin-top:12px;padding-top:13px;border-top:1px solid var(--line)}
.admin-slideshow-options label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 0.78rem; }.admin-slideshow-options label>span{display:grid;gap:3px}.admin-slideshow-options strong{color:var(--ink);font-size:12px}.admin-slideshow-options small{font-size:10px;font-weight:400}
.admin-theme-preview{min-height:132px;margin-bottom:16px;padding:18px;border-radius:16px;background:var(--theme-paper);color:var(--theme-ink);display:grid;place-items:center;gap:12px;text-align:center;transition:background-color .2s ease,color .2s ease}.admin-theme-preview>strong{font-family:Georgia,serif;font-size:19px;font-weight:500}.admin-theme-preview>span{width:min(190px,90%);padding:15px 12px;border:1px solid color-mix(in srgb,var(--theme-ink) 16%,transparent);border-radius:11px;background:color-mix(in srgb,var(--theme-paper) 82%,white);display:grid;gap:7px}.admin-theme-preview b{font-size:7px;letter-spacing:.12em;text-transform:uppercase}.admin-theme-preview i{width:34px;height:2px;margin:auto;border-radius:99px;background:var(--theme-accent)}.admin-theme-preview em{width:70%;height:13px;margin:auto;border-radius:5px;background:var(--theme-accent);opacity:.9}.admin-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:285px;overflow-y:auto;padding:3px}.admin-theme-grid label{min-width:0;cursor:pointer;text-align:center}.admin-theme-grid input{position:absolute;opacity:0;pointer-events:none}.admin-theme-grid label>span{display:block;height:42px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(135deg,var(--swatch-paper) 0 58%,var(--swatch-accent) 58% 76%,var(--swatch-ink) 76%)}.admin-theme-grid input:checked+span{outline:3px solid var(--olive);outline-offset:2px}.admin-theme-grid small{display:block;margin-top:6px;overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.admin-theme-status{min-height:16px;margin:10px 0 0;color:var(--olive-dark);font-size:10px;text-align:center}
.admin-theme-panel>.admin-panel-heading{padding-bottom:16px;border-bottom:1px solid var(--line)}.admin-theme-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:15px}.admin-theme-summary>strong{font-size:12px}.admin-theme-current{display:flex;align-items:center;gap:9px}.admin-theme-current>span{width:48px;height:28px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(135deg,var(--swatch-paper) 0 58%,var(--swatch-accent) 58% 76%,var(--swatch-ink) 76%)}.admin-theme-current .admin-button{padding:8px 12px;font-size:11px}.admin-theme-editor{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.admin-theme-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.admin-button.is-primary{border-color:var(--olive);background:var(--olive);color:#fff}.admin-button.is-primary:hover{background:var(--olive-dark)}
.admin-closing-form{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}.admin-closing-form>label:not(.admin-closing-enabled){display:grid;gap:6px}.admin-closing-form label>span{color:var(--muted);font-size:10px;font-weight:700}.admin-closing-form input[type=text],.admin-closing-form select{width:100%;min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff;font:inherit;font-size:11px}.admin-closing-enabled{display:flex;align-items:center;gap:8px}.admin-closing-enabled input{accent-color:var(--olive)}.admin-closing-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.admin-closing-status{color:var(--olive-dark);font-size:10px}
.admin-closing-form{border-top:0}
.admin-slideshow-options select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.52); font: inherit; }
.admin-slideshow-open { display: grid; width:100%; min-height:44px; margin: 12px 0 0; padding:0 14px; text-align: center; }
.admin-choice-unavailable { color: var(--muted); }

.admin-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 66px;
    margin: 0;
    border-bottom: 1px solid rgba(112, 88, 72, 0.11);
}

.admin-setting:last-child { border-bottom: 0; }

.admin-setting > span > strong,
.admin-setting > span > small {
    display: block;
}

.admin-setting > span > strong {
    color: var(--ink);
    font-size: 0.84rem;
}

.admin-setting > span > small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.admin-switch {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(138, 76, 53, 0.26);
    cursor: pointer;
}

.admin-switch span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(52, 40, 31, 0.2);
    transition: transform 160ms ease;
}

.admin-switch.is-on { background: var(--olive); }
.admin-switch.is-on span { transform: translateX(18px); }
.admin-switch.is-disabled { cursor: not-allowed; opacity: 0.44; }

.admin-download-actions {
    display: grid;
    gap: 9px;
}

.admin-download-actions .admin-button {
    width: 100%;
}
.admin-download-status{margin:0 0 14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.42);display:grid;gap:9px}.admin-download-status>div:first-child{display:grid;gap:3px}.admin-download-status>div:first-child strong{font-size:12px}.admin-download-status>div:first-child span,.admin-download-empty{color:var(--muted);font-size:10px}.admin-download-progress{height:7px;border-radius:99px;background:#e8e0d5;overflow:hidden}.admin-download-progress span{display:block;height:100%;border-radius:inherit;background:var(--olive)}.admin-download-status p{display:flex;justify-content:space-between;gap:12px;margin:0;padding-top:8px;border-top:1px solid var(--line);font-size:10px}.admin-download-status p span{color:var(--muted)}.admin-download-status .admin-download-empty{display:block;padding-top:7px;text-align:center}

.admin-grid article {
    padding: 18px;
}

.admin-grid span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-grid strong {
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
    font-weight: 400;
}

.admin-panel {
    margin-top: 14px;
    padding: 18px;
}

.admin-actions,
.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-status {
    margin: 14px 0 0;
    color: var(--body);
    font-size: 0.92rem;
}

.admin-status-value {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.admin-status-value.is-on {
    color: #1f6b3a;
    background: rgba(62, 155, 93, 0.14);
}

.admin-status-value.is-off {
    color: #a13b32;
    background: rgba(190, 65, 55, 0.13);
}

.admin-search {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.admin-search label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 700;
}

.admin-search input {
    width: min(210px, 100%);
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: rgba(255, 250, 242, 0.42);
    outline: none;
}

.admin-list-controls .admin-button,
.admin-list-controls input,
.admin-list-controls select {
    height: 44px;
}

.admin-brand-footer {
    display: grid;
    place-items: center;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(112, 88, 72, 0.11);
}

.admin-brand-footer a {
    display: block;
    width: 150px;
    opacity: 0.72;
    transition: opacity 160ms ease;
}

.admin-brand-footer a:hover,
.admin-brand-footer a:focus-visible {
    opacity: 1;
}

.admin-brand-footer img {
    display: block;
    width: 100%;
    height: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.admin-uploader-name{display:block;max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.admin-number-heading,
.admin-upload-number {
    width: 34px;
    padding-right: 3px !important;
    padding-left: 3px !important;
    text-align: center !important;
}

.admin-upload-number {
    color: var(--muted) !important;
    font-size: 0.72rem !important;
    font-variant-numeric: tabular-nums;
}

.admin-choice-heading {
    text-align: center !important;
}

.admin-choice-heading small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.admin-choice-cell {
    text-align: center !important;
}

.admin-choice-cell form {
    display: inline-block;
    margin: 0;
}

.admin-choice {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.admin-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.admin-choice span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(112, 88, 72, 0.4);
    border-radius: 6px;
    background: rgba(255, 250, 242, 0.5);
}

.admin-choice input:checked + span {
    border-color: var(--olive);
    background: var(--olive);
}

.admin-choice input:checked + span::after {
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: "";
    transform: rotate(45deg);
}

.admin-choice:focus-within span {
    box-shadow: 0 0 0 4px rgba(119, 124, 80, 0.13);
}

.admin-choice.is-disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.admin-table th,
.admin-table td {
    padding: 13px 10px;
    border-bottom: 1px solid rgba(112, 88, 72, 0.13);
    color: var(--body);
    font-size: 0.86rem;
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-table td strong {
    display: inline-block;
    max-width: 280px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-preview {
    position: relative;
    display: block;
    width: 72px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(112, 88, 72, 0.2);
    border-radius: 10px;
    background: rgba(112, 88, 72, 0.08);
    cursor: zoom-in;
}

.admin-preview img,
.admin-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-preview span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(33, 27, 23, 0.2);
    font-size: 1.15rem;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

.admin-row-actions button {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(112, 88, 72, 0.22);
    border-radius: 999px;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-row-actions .danger {
    color: #8a4c35;
    border-color: rgba(138, 76, 53, 0.34);
}

.admin-favorite {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--olive-dark);
    background: rgba(230, 215, 131, 0.24);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .page-shell {
        padding: 28px 17px 30px;
    }

    .divider {
        grid-template-columns: 52px auto 52px;
        gap: 14px;
    }

    .date {
        font-size: 0.76rem;
        letter-spacing: 0.28em;
    }

    .upload-card {
        padding: 24px 20px 28px;
        border-radius: 23px;
    }

    .card-heading {
        margin-bottom: 20px;
    }

    .upload-form {
        gap: 15px;
    }

    h2 {
        font-size: 0.92rem;
        letter-spacing: 0.22em;
    }

    .drop-zone {
        min-height: 132px;
        padding: 18px 18px;
    }

    .primary-button {
        min-height: 54px;
        font-size: 0.9rem;
        letter-spacing: 0.1em;
    }

    .preview-item {
        grid-template-columns: 52px minmax(0, 1fr) 36px;
    }

    .preview-thumb,
    .preview-video {
        width: 52px;
        height: 46px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-project-heading { align-items: flex-start; flex-direction: column; }

    .admin-share-panel { grid-template-columns: 1fr; }
    .admin-share-actions .admin-button { flex: 1; }

    .admin-qr-panel { grid-template-columns: 110px minmax(0, 1fr); }
    .admin-qr-code { width: 110px; min-height: 110px; padding: 8px; }
    .admin-qr-code img,
    .admin-qr-code svg { width: 92px; height: 92px; }

    .admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-content-grid { grid-template-columns: 1fr; }

    .admin-panel-heading { align-items: flex-start; flex-direction: column; }

    .admin-search {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-search-control { flex: 1 1 180px; }
    .admin-search input { width: 100%; }
    .admin-list-controls select { min-width: 130px; }
}

@media (max-width: 480px) {
    .admin-share-actions { width: 100%; }
    .admin-share-actions .admin-live-status { width: 100%; margin-bottom: 4px; }
    .admin-qr-panel { grid-template-columns: 1fr; }
}