@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Great+Vibes&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --ivory: #fbf8f3;
    --paper: #fffdf9;
    --taupe: #a9998d;
    --taupe-dark: #76685f;
    --rose: #b7837c;
    --rose-soft: #efe0dc;
    --gold: #c3ad88;
    --ink: #382f2a;
    --muted: #83756b;
    --line: rgba(118, 104, 95, .18);
    --shadow: 0 24px 70px rgba(77, 60, 49, .16);
    --radius: 30px;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --script: 'Great Vibes', 'Brush Script MT', cursive;
    --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ivory); }
body {
    margin: 0;
    min-height: 100%;
    color: var(--ink);
    font-family: var(--sans);
    background: radial-gradient(circle at 12% 10%, rgba(195,173,136,.18), transparent 36%),
                linear-gradient(160deg, #fffdfa 0%, #f4ede6 52%, #efe4dc 100%);
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.page-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url('../img/rings.jpg');
    background-size: cover;
    background-position: center;
    opacity: .055;
    filter: blur(1px);
}

.shell {
    width: min(1060px, 100%);
    margin: 0 auto;
    padding: clamp(16px, 3vw, 34px) 16px 40px;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(340px, .8fr);
    gap: clamp(18px, 3vw, 34px);
    align-items: start;
}

.hero-card, .app-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(169,153,141,.25);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: rgba(255,253,249,.88);
    backdrop-filter: blur(16px);
}

.hero-card { min-height: 760px; display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(.96); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(56,47,42,.44) 62%, rgba(56,47,42,.72)); }
.hero-content { position: relative; z-index: 1; width: 100%; padding: 34px; color: white; text-align: center; }
.monogram {
    width: 110px; height: 110px; border: 1px solid rgba(255,255,255,.62); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; gap: 1px;
    font-family: var(--script); font-size: 48px; line-height: 1; color: #fff; margin-bottom: 18px;
    background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 8px rgba(255,255,255,.035);
}
.monogram span { font-family: var(--serif); font-size: 20px; margin: 0 1px; opacity: .82; }
.eyebrow { margin: 0 0 6px; letter-spacing: .22em; text-transform: uppercase; font-size: 12px; font-weight: 700; opacity: .86; }
.eyebrow.dark { color: var(--taupe-dark); opacity: 1; }
.hero-content h1 { margin: 0; font-family: var(--script); font-size: clamp(52px, 8vw, 86px); font-weight: 400; line-height: .95; text-shadow: 0 8px 32px rgba(0,0,0,.25); }
.hero-content h1 span { font-family: var(--serif); font-size: .5em; }
.quote { max-width: 580px; margin: 18px auto 0; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.25; color: rgba(255,255,255,.91); }
.date-row { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 18px; font-family: var(--serif); font-weight: 700; letter-spacing: .16em; }
.date-row i { width: 1px; height: 34px; background: rgba(255,255,255,.55); display: block; }

.app-card { padding: clamp(22px, 4vw, 34px); }
.app-card:before {
    content: ''; position: absolute; inset: 14px; border: 1px solid rgba(169,153,141,.16); border-radius: calc(var(--radius) - 12px); pointer-events: none;
}
.app-card > * { position: relative; z-index: 1; }
.section-title p { margin: 0; color: var(--rose); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700; }
.section-title h2, .app-card h2 { margin: 4px 0 10px; font-family: var(--serif); font-size: clamp(32px, 6vw, 46px); font-weight: 600; line-height: 1; color: var(--taupe-dark); }
.section-title.compact h2 { font-size: 34px; }
.soft-text, .muted, .microcopy { color: var(--muted); line-height: 1.55; }
.microcopy { font-size: 13px; margin: 14px 0 0; }

.input-label { display: block; font-size: 13px; font-weight: 700; color: var(--taupe-dark); margin: 18px 0 8px; }
input[type="text"], input[type="password"], .search-input, select {
    width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.88); border-radius: 18px;
    padding: 15px 16px; color: var(--ink); outline: none; font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
input:focus, select:focus { border-color: rgba(183,131,124,.65); box-shadow: 0 0 0 4px rgba(183,131,124,.13); }

.primary-btn, .ghost-btn, .link-btn, .danger-btn, .download-btn {
    border: 0; border-radius: 18px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.primary-btn, .download-btn {
    width: 100%; margin-top: 18px; padding: 15px 18px; color: white; font-weight: 800;
    background: linear-gradient(135deg, #8e7665, #b7837c); box-shadow: 0 14px 30px rgba(142,118,101,.25);
}
.primary-btn:disabled { opacity: .58; cursor: not-allowed; box-shadow: none; }
.primary-btn:not(:disabled):active, .ghost-btn:active, .link-btn:active { transform: translateY(1px); }
.ghost-btn { background: rgba(255,255,255,.72); border: 1px solid var(--line); color: var(--taupe-dark); padding: 11px 14px; font-weight: 700; }
.link-btn { background: transparent; color: var(--rose); padding: 8px 4px; font-weight: 800; }
.danger-btn { background: rgba(169,55,55,.09); color: #9b3030; padding: 10px 12px; font-weight: 800; }

.tiny-flower { width: 92px; height: 92px; margin: 0 auto 4px; opacity: .75; background: radial-gradient(circle at 50% 10%, var(--taupe), transparent 5px), radial-gradient(circle at 30% 28%, var(--taupe), transparent 4px), radial-gradient(circle at 68% 28%, var(--taupe), transparent 4px), linear-gradient(var(--taupe), var(--taupe)); background-size: 100% 100%,100% 100%,100% 100%,1px 70px; background-repeat:no-repeat; background-position:center; }
.countdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.countdown div { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 8px; text-align: center; }
.countdown strong { display: block; color: var(--taupe-dark); font-family: var(--serif); font-size: 34px; line-height: 1; }
.countdown span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }

.dash-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dash-top h2 { margin: 0; }
.event-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
.event-option { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); padding: 13px; color: var(--taupe-dark); font-weight: 800; text-align: center; }
.event-option.active { border-color: rgba(183,131,124,.7); background: var(--rose-soft); color: #77564f; }

.upload-box { margin-top: 18px; }
.upload-box input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choose-btn {
    display: flex; min-height: 150px; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
    text-align: center; border: 2px dashed rgba(169,153,141,.45); border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(250,244,237,.9)); cursor: pointer;
}
.choose-btn strong { color: var(--taupe-dark); font-size: 18px; }
.choose-btn small { color: var(--muted); }
.camera-icon { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--rose); font-size: 34px; box-shadow: 0 10px 26px rgba(118,104,95,.14); }

.preview-wrap { margin-top: 18px; }
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.preview-head div { display: flex; flex-direction: column; gap: 2px; }
.preview-head span { color: var(--muted); font-size: 13px; }
.preview-grid, .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preview-item, .media-item {
    position: relative; overflow: hidden; border-radius: 18px; background: #f4ede6; aspect-ratio: 1 / 1; border: 1px solid var(--line);
}
.preview-item img, .preview-item video, .media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; color: var(--taupe-dark); font-weight: 800; background: linear-gradient(135deg, #fff, #efe7dd); }
.remove-preview, .delete-media {
    position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; border: 0; border-radius: 50%;
    color: white; background: rgba(56,47,42,.72); font-weight: 900; cursor: pointer;
}
.media-item .meta {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 8px; color: white;
    background: linear-gradient(transparent, rgba(56,47,42,.72)); font-size: 11px;
}
.media-item .meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-actions { position: absolute; left: 7px; top: 7px; display: flex; gap: 6px; }
.open-media { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.86); color: var(--taupe-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; text-decoration: none; }

.progress-panel { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.72); }
.progress-info { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.progress-info strong { color: var(--taupe-dark); }
.bar { height: 12px; border-radius: 999px; overflow: hidden; background: rgba(169,153,141,.18); }
.bar i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--gold), var(--rose)); transition: width .16s ease; }
.my-gallery { margin-top: 28px; }
.empty-gallery { border: 1px solid var(--line); border-radius: 20px; padding: 18px; color: var(--muted); background: rgba(255,255,255,.58); text-align: center; }

.toast { position: fixed; z-index: 50; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(92vw, 430px); background: rgba(56,47,42,.96); color: white; border-radius: 18px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.25); text-align: center; }

/* Admin */
.admin-page .shell-admin { width: min(1220px, 100%); margin: 0 auto; padding: 22px 16px 50px; }
.admin-header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; }
.admin-header h1 { margin:0; font-family:var(--script); font-size:58px; font-weight:400; color:var(--taupe-dark); }
.admin-panel { background:rgba(255,253,249,.9); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); padding:22px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.stat { background:#fff; border:1px solid var(--line); border-radius:20px; padding:16px; }
.stat strong { display:block; font-family:var(--serif); font-size:32px; color:var(--taupe-dark); line-height:1; }
.stat span { color:var(--muted); font-size:13px; }
.toolbar { display:grid; grid-template-columns:1.3fr .7fr .7fr; gap:10px; margin:18px 0; }
.admin-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0; }
.admin-actions button, .admin-actions a { border:1px solid var(--line); border-radius:14px; padding:10px 12px; background:#fff; color:var(--taupe-dark); font-weight:800; text-decoration:none; cursor:pointer; }
.admin-actions .main { background:linear-gradient(135deg, #8e7665, #b7837c); color:#fff; border:0; }
.admin-actions .danger { color:#9b3030; background:#fff4f2; }
.admin-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.admin-card { position:relative; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; min-height:220px; }
.admin-card .thumb { height:150px; background:#f4ede6; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.admin-card img, .admin-card video { width:100%; height:100%; object-fit:cover; }
.admin-card .info { padding:10px; font-size:12px; color:var(--muted); }
.admin-card .info strong { display:block; color:var(--ink); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-card input[type="checkbox"] { position:absolute; top:9px; left:9px; width:22px; height:22px; accent-color:var(--rose); }
.badge { position:absolute; top:9px; right:9px; background:rgba(56,47,42,.74); color:#fff; border-radius:999px; padding:5px 8px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.login-box { max-width:430px; margin:70px auto; }
.login-box .monogram { color:var(--taupe-dark); border-color:var(--line); background:#fff; display:flex; margin:0 auto 16px; }
.login-box h1 { text-align:center; font-family:var(--script); font-size:58px; color:var(--taupe-dark); font-weight:400; margin:0 0 6px; }
.error-box { background:#fff0ef; color:#9b3030; border:1px solid rgba(155,48,48,.18); padding:12px; border-radius:16px; margin:12px 0; }

@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; padding-top: 10px; }
    .hero-card { min-height: 470px; }
    .hero-content { padding: 24px 18px; }
    .quote { font-size: 18px; }
    .app-card { border-radius: 26px; }
    .preview-grid, .media-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-grid { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .toolbar { grid-template-columns: 1fr; }
    .admin-header { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 430px) {
    .shell { padding-left: 10px; padding-right: 10px; }
    .hero-card { min-height: 430px; border-radius: 24px; }
    .monogram { width: 88px; height: 88px; font-size: 40px; }
    .date-row { font-size: 13px; gap: 12px; }
    .dash-top { flex-direction: column; }
    .ghost-btn { width: 100%; }
    .event-selector { grid-template-columns: 1fr; }
    .preview-grid, .media-grid { gap: 8px; }
    .progress-info { flex-direction: column; }
    .admin-grid { grid-template-columns: 1fr; }
}