:root {
    --gold-50: #fdfbf7;
    --gold-100: #fcf7ec;
    --gold-200: #f5e7cb;
    --gold-300: #e9cb99;
    --gold-400: #dba964;
    --gold-500: #c8863b;
    --gold-600: #b77130;
    --gold-700: #985727;
    --sage-50: #f4f7f5;
    --sage-100: #e5ebe7;
    --rosewood-800: #583636;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --success-50: #ecfdf5;
    --success-600: #059669;
    --success-700: #047857;
    --error-50: #fff1f2;
    --error-400: #fb7185;
    --error-500: #f43f5e;
    --error-700: #be123c;
    --font-serif: "Playfair Display", serif;
    --font-sans: "Inter", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.site-body {
    min-height: 100vh;
    color: var(--stone-800);
    background: var(--gold-50);
    font-family: var(--font-sans);
}

.scroll-locked { height: 100vh; overflow: hidden; }
.is-hidden { display: none !important; }

.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(to bottom, var(--sage-100), var(--gold-50), var(--sage-50));
    transition: opacity 1s ease, visibility 1s ease;
}

.intro-screen.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-header {
    margin-bottom: 2rem;
    text-align: center;
    transform: scale(1);
    transition: opacity 1s ease, transform 1s ease;
}

.intro-header.is-fading { opacity: 0; transform: scale(.95); }
.intro-eyebrow { display: block; margin-bottom: .5rem; color: var(--gold-600); font-size: .75rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.intro-header h1 { margin: 0; color: var(--rosewood-800); font-family: var(--font-serif); font-size: clamp(1.875rem, 6vw, 3rem); font-style: italic; font-weight: 500; }
.intro-header p { margin: .5rem 0 0; color: var(--stone-500); font-size: clamp(.875rem, 2vw, 1rem); }

.envelope-wrapper {
    position: relative;
    width: 320px;
    height: 220px;
    max-width: calc(100vw - 2rem);
    perspective: 1000px;
    cursor: pointer;
    transition: opacity 700ms ease, visibility 700ms ease, transform 700ms ease;
}

.envelope {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--stone-200);
    border-radius: 0 0 .5rem .5rem;
    background: var(--sage-100);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    transition: opacity 700ms ease, transform 1s ease;
    transform-style: preserve-3d;
}

.flap { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 50%; border-radius: .125rem .125rem 0 0; background: #d4ded7; clip-path: polygon(0 0, 50% 100%, 100% 0); transform-origin: top; transition: transform 800ms ease 200ms, opacity 500ms ease; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.envelope.open .flap { z-index: 1; transform: rotateX(180deg); }

.letter-card { position: absolute; bottom: 5px; left: 5%; z-index: 2; width: 90%; height: 90%; overflow: hidden; border-radius: .375rem; background: white; opacity: .8; box-shadow: 0 4px 10px rgba(0,0,0,.05); transition: transform 1s cubic-bezier(.175,.885,.32,1.275) 800ms, opacity 500ms ease 800ms, z-index 0s linear 1200ms; }
.letter-card__image { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; }
.envelope.open .letter-card { z-index: 6; opacity: 1; transform: translateY(-55%) scale(1.05); }

.envelope-front { position: absolute; bottom: 0; left: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; }
.envelope-front__left, .envelope-front__right, .envelope-front__bottom { position: absolute; bottom: 0; }
.envelope-front__left { left: 0; width: 50%; height: 100%; background: linear-gradient(to top right, rgba(245,245,244,.9), transparent); clip-path: polygon(0 0,100% 50%,0 100%); }
.envelope-front__right { right: 0; width: 50%; height: 100%; background: linear-gradient(to top left, rgba(245,245,244,.9), transparent); clip-path: polygon(100% 0,0 50%,100% 100%); }
.envelope-front__bottom { left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(231,229,228,.85), rgba(245,245,244,.5)); clip-path: polygon(0 100%,50% 0,100% 100%); }

.envelope-seal { position: absolute; top: 40%; left: 50%; z-index: 45; display: flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 50%; color: white; background: linear-gradient(to bottom right, var(--gold-300), var(--gold-600)); box-shadow: 0 4px 8px rgba(0,0,0,.18); transform: translate(-50%,-50%); transition: opacity 500ms ease, transform 500ms ease; }
.envelope-seal:hover { transform: translate(-50%,-50%) scale(1.1); }
.envelope-seal i { font-size: 1.125rem; animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.envelope-wrapper.envelope-fading { opacity: 0; visibility: hidden; transform: scale(.96); pointer-events: none; }

.invitation-image-preview { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.3) translateY(80px); transform-origin: center; transition: opacity 850ms ease, transform 1100ms cubic-bezier(.16,1,.3,1), visibility 0s linear 1100ms; }
.invitation-image-preview.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1) translateY(0); transition: opacity 850ms ease, transform 1100ms cubic-bezier(.16,1,.3,1), visibility 0s linear 0s; }
.invitation-image-preview__image { display: block; width: auto; height: auto; max-width: min(94vw,720px); max-height: calc(100dvh - 120px); border-radius: 10px; background: white; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.16); user-select: none; -webkit-user-drag: none; }

.scroll-prompt { position: fixed; left: 50%; bottom: max(18px,env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 10px 18px; border: 1px solid rgba(200,134,59,.3); border-radius: 999px; color: var(--rosewood-800); background: rgba(253,251,247,.94); box-shadow: 0 10px 30px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08); backdrop-filter: blur(10px); translate: -50% 0; white-space: nowrap; transition: opacity 300ms ease, background 300ms ease, color 300ms ease; }
.scroll-prompt span { font-family: var(--font-serif); font-size: .875rem; font-style: italic; font-weight: 600; letter-spacing: .1em; }
.scroll-prompt:hover { color: var(--gold-700); background: var(--gold-50); }
.scroll-prompt:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.scroll-prompt.is-bouncing { animation: bounce 1s infinite; }
.scroll-prompt.is-fading { opacity: 0; pointer-events: none; }

.main-content { width: min(100% - 2rem, 56rem); min-height: 100vh; margin: 0 auto; padding: 4rem 0; opacity: 0; transition: opacity 1s ease; }
.main-content.is-visible { opacity: 1; }
.main-content > * + * { margin-top: 4rem; }
.page-header { text-align: center; }
.heart-divider { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .5rem; color: var(--gold-500); }
.heart-divider span { width: 3rem; height: 1px; background: var(--gold-300); }
.page-header h2 { margin: 0; color: var(--rosewood-800); font-family: var(--font-serif); font-size: clamp(2.25rem,7vw,3.75rem); font-style: italic; font-weight: 500; line-height: 1.15; }
.page-header p { max-width: 36rem; margin: 1rem auto 0; color: var(--stone-500); font-size: clamp(.75rem,2vw,.875rem); letter-spacing: .1em; line-height: 1.65; text-transform: uppercase; }

.event-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 42rem; margin-right: auto; margin-left: auto; text-align: center; }
.event-card { padding: 1.5rem; border: 1px solid rgba(252,247,236,.8); border-radius: 1rem; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow 200ms ease, transform 200ms ease; }
.event-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.event-card__icon { margin-bottom: .75rem; color: var(--gold-500); font-size: 1.5rem; }
.event-card h3 { margin: 0 0 .25rem; color: var(--rosewood-800); font-family: var(--font-serif); font-size: 1.125rem; }
.event-card p { margin: 0; color: var(--stone-600); font-size: .875rem; }
.event-card small { display: block; margin-top: .25rem; color: var(--stone-400); font-size: .75rem; }

.rsvp-card { position: relative; max-width: 42rem; margin-right: auto; margin-left: auto; padding: clamp(1.5rem,5vw,2.5rem); overflow: hidden; border: 1px solid var(--gold-100); border-radius: 1.5rem; background: white; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.section-heading { margin-bottom: 2rem; text-align: center; }
.section-heading span { color: var(--gold-600); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.section-heading h3 { margin: .25rem 0 .5rem; color: var(--rosewood-800); font-family: var(--font-serif); font-size: clamp(1.5rem,5vw,1.875rem); }
.rsvp-form > * + * { margin-top: 1.25rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.form-group label, .attendance-fieldset legend { display: block; margin-bottom: .375rem; color: var(--stone-600); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.form-group input, .form-group textarea { display: block; width: 100%; padding: .75rem 1rem; border: 1px solid var(--stone-200); border-radius: .75rem; color: var(--stone-800); background: white; outline: none; transition: border-color 200ms ease, box-shadow 200ms ease; }
.form-group textarea { resize: vertical; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(219,169,100,.18); }
.required { color: var(--error-500); }
.attendance-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.attendance-fieldset legend { margin-bottom: .625rem; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.choice-card { display: flex; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid var(--stone-200); border-radius: .75rem; cursor: pointer; transition: border-color 200ms ease, background 200ms ease; }
.choice-card input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.choice-card span { font-size: .875rem; font-weight: 500; }
.choice-icon { color: var(--stone-300); font-size: 1.125rem; }
.choice-card.is-selected-yes { border-color: var(--gold-500); background: rgba(253,251,247,.75); }
.choice-card.is-selected-no { border-color: var(--error-400); background: rgba(250,250,249,.75); }
.choice-card.is-selected-yes .choice-icon { color: var(--gold-500); }
.choice-card.is-selected-no .choice-icon { color: var(--error-500); }
.form-feedback { padding: 1rem; border-radius: .75rem; text-align: center; font-size: .875rem; font-weight: 500; }
.form-feedback.is-success { color: var(--success-700); background: var(--success-50); }
.form-feedback.is-error { color: var(--error-700); background: var(--error-50); }
.submit-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; border: 0; border-radius: .75rem; color: white; background: linear-gradient(to right,var(--gold-500),var(--gold-600)); font-weight: 600; transition: filter 200ms ease, transform 200ms ease; }
.submit-button:hover:not(:disabled) { filter: brightness(.96); transform: translateY(-1px); }
.submit-button:disabled { cursor: wait; opacity: .7; }
.spinner { animation: spin 1s linear infinite; }

.site-footer { padding: 2rem 0 3rem; border-top: 1px solid rgba(245,231,203,.6); color: var(--stone-400); text-align: center; font-size: .75rem; }
.site-footer p { margin: 0 0 1rem; }
.site-footer a { display: inline-flex; align-items: center; gap: .25rem; color: inherit; font-size: .625rem; text-decoration: none; opacity: .6; transition: color 200ms ease, opacity 200ms ease; }
.site-footer a:hover { color: var(--gold-600); opacity: 1; }

.admin-body { min-height: 100vh; margin: 0; color: var(--stone-800); background: #f5f5f5; font-family: var(--font-sans); }
.admin-centered { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
.admin-panel { width: min(100%,24rem); padding: 2rem; border: 1px solid #e5e7eb; border-radius: .75rem; background: white; box-shadow: 0 10px 25px rgba(0,0,0,.1); text-align: center; }
.admin-panel h1, .admin-panel h2 { margin: 0 0 1.5rem; font-family: var(--font-serif); }
.admin-form input { width: 100%; margin-bottom: 1rem; padding: .7rem 1rem; border: 1px solid #d1d5db; border-radius: .375rem; }
.admin-button { display: inline-flex; width: 100%; justify-content: center; padding: .7rem 1rem; border: 0; border-radius: .375rem; color: white; background: var(--gold-500); font-weight: 600; text-decoration: none; }
.admin-button:hover { background: var(--gold-600); }
.admin-message { margin: 0 0 1rem; font-size: .875rem; }
.admin-message--error { color: #dc2626; }
.admin-message--success { color: #15803d; }
.admin-link { color: var(--gold-500); font-weight: 600; text-decoration: none; }
.admin-dashboard { width: min(100% - 2rem,75rem); margin: 0 auto; padding: 2rem 0; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.admin-header h1 { margin: 0; font-family: var(--font-serif); }
.admin-logout { color: #b91c1c; font-weight: 600; text-decoration: none; }
.stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { padding: 1rem 1.5rem; border: 1px solid #e5e7eb; border-radius: .75rem; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.06); text-align: center; }
.stat-card span { color: #6b7280; font-size: .75rem; text-transform: uppercase; }
.stat-card strong { display: block; margin-top: .25rem; font-size: 1.5rem; }
.stat-card--success strong { color: #16a34a; }
.stat-card--error strong { color: #ef4444; }
.table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: .75rem; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; text-align: left; }
.admin-table th, .admin-table td { padding: 1rem; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.admin-table thead { color: #4b5563; background: #f3f4f6; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .center { text-align: center; }
.admin-table .muted { color: #9ca3af; }
.admin-table .name { font-weight: 600; }
.message-cell { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6b7280; }
.status-badge { display: inline-block; padding: .25rem .5rem; border-radius: .25rem; font-size: .75rem; }
.status-badge--yes { color: #15803d; background: #dcfce7; }
.status-badge--no { color: #b91c1c; background: #fee2e2; }

@keyframes pulse { 50% { opacity: .5; } }
@keyframes bounce { 0%,100% { transform: translateY(-12%); animation-timing-function: cubic-bezier(.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,.2,1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Design för radera-knappar */
.table-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.btn-danger {
    background: var(--error-500);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.375rem;
    color: white;
    cursor: pointer;
    transition: background 200ms ease, opacity 200ms ease;
}

.btn-danger:hover:not(:disabled) {
    background: var(--error-700);
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.delete-btn {
    background: none;
    border: none;
    color: var(--error-500);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: underline;
}

.delete-btn:hover {
    color: var(--error-700);
}

@media (min-width: 768px) {
    .envelope-wrapper { width: 400px; height: 270px; }
    .event-grid, .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .main-content { width: min(100% - 4rem,56rem); }
}

@media (max-width: 640px) {
    .choice-grid, .stats-grid { grid-template-columns: 1fr; }
    .admin-header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
    .invitation-image-preview { padding: 10px 10px calc(96px + env(safe-area-inset-bottom)); }
    .invitation-image-preview__image { max-width: calc(100vw - 20px); max-height: calc(100dvh - 116px); border-radius: 6px; }
    .scroll-prompt { bottom: max(14px,env(safe-area-inset-bottom)); padding: 9px 15px; }
    .scroll-prompt span { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--gold-50); }
::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--gold-500); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-600); }