:root {
    --gold: #c9a84c;
    --gold-light: #e8d5a3;
    --rose: #c47a8a;
    --rose-light: #f2d7dd;
    --cream: #fdf8f2;
    --dark: #2c2c2c;
    --text-muted: #8a7f7a;

    /* ── Responsive scale tokens ── */
    --btn-capture:  clamp(56px, 14vw, 76px);
    --btn-side:     clamp(36px, 10vw, 50px);
    --icon-btn:     clamp(32px, 9vw, 44px);
    --filter-h:     clamp(40px, 10vh, 54px);   /* tinggi baris filter */
    --bottom-h:     clamp(76px, 17vh, 104px);  /* tinggi baris tombol capture */
    --filter-bot:   var(--filter-h);           /* (tidak dipakai lagi, tetap untuk compat) */
    --chip-fs:      clamp(10px, 2.8vw, 13px);
    --chip-pad:     clamp(4px, 1.2vw, 8px) clamp(9px, 2.8vw, 14px);
    --icon-size:    clamp(16px, 4.5vw, 22px);
    --gap-sm:       clamp(4px, 1.5vw, 10px);
    --pad-h:        clamp(12px, 4vw, 24px);
    --corner-size:  clamp(18px, 5vw, 28px);
    --corner-off:   clamp(10px, 3vw, 18px);
    --safe-top:     env(safe-area-inset-top, 0px);
    --safe-bot:     env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: 'Poppins', sans-serif;
    background: #000;
    color: var(--dark);
    height: 100%; width: 100%;
    overflow: hidden;
}

/* ── PETALS ── */
.petals-bg { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.petal { position:absolute; top:-20px; font-size:clamp(12px,3vw,20px); opacity:0.4; animation:fall linear infinite; }
@keyframes fall {
    0%   { transform:translateY(-20px) rotate(0deg); opacity:0.4; }
    100% { transform:translateY(110vh) rotate(360deg); opacity:0; }
}

/* ══════════════════════════════════
   CAMERA SCREEN
══════════════════════════════════ */
.camera-screen {
    position: fixed; inset: 0; z-index: 10;
    background: #000; overflow: hidden;
}
.camera-screen video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}

/* Corner guides */
.cam-corner {
    position: absolute;
    width: var(--corner-size); height: var(--corner-size);
    z-index: 12; pointer-events: none;
}
.cam-corner.tl { top:var(--corner-off); left:var(--corner-off); border-top:2px solid var(--gold); border-left:2px solid var(--gold); }
.cam-corner.tr { top:var(--corner-off); right:var(--corner-off); border-top:2px solid var(--gold); border-right:2px solid var(--gold); }
.cam-corner.bl {
    bottom: calc(var(--bottom-h) + var(--filter-h) + var(--corner-off));
    left: var(--corner-off);
    border-bottom:2px solid var(--gold); border-left:2px solid var(--gold);
}
.cam-corner.br {
    bottom: calc(var(--bottom-h) + var(--filter-h) + var(--corner-off));
    right: var(--corner-off);
    border-bottom:2px solid var(--gold); border-right:2px solid var(--gold);
}

/* ── TOP CENTER ICON BUTTONS ── */
.cam-top-icons {
    position: absolute;
    top: calc(var(--safe-top) + clamp(8px, 2.5vh, 16px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex; gap: var(--gap-sm); align-items: center;
}
.cam-icon-btn {
    width: var(--icon-btn); height: var(--icon-btn);
    border-radius: 50%;
    background: rgba(0,0,0,0.42); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s; flex-shrink: 0;
}
.cam-icon-btn:active, .cam-icon-btn.active { background:var(--gold); border-color:var(--gold); }

/* ── DROPDOWNS ── */
.cam-dropdown {
    position: absolute;
    top: calc(var(--safe-top) + clamp(8px,2.5vh,16px) + var(--icon-btn) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    background: rgba(18,18,18,0.92); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: clamp(12px,3vw,18px);
    padding: clamp(10px,2.5vw,14px);
    min-width: clamp(180px, 55vw, 260px);
    display: none; flex-direction: column; gap: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.cam-dropdown.open { display: flex; }
.dd-title {
    font-size: clamp(9px, 2.2vw, 11px); font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.dd-chips { display: flex; flex-wrap: wrap; gap: clamp(4px,1.5vw,7px); }

/* ── COLLAGE SLOTS OVERLAY ── */
.cam-collage-slots {
    display: none; position: absolute;
    left: var(--pad-h); right: var(--pad-h);
    top: 50%; transform: translateY(-50%);
    z-index: 20; flex-direction: column; align-items: center;
    gap: clamp(6px, 2vw, 10px);
}
.cam-collage-slots.visible { display: flex; }
.cam-collage-slots .collage-slot-row { display:flex; gap:clamp(4px,1.5vw,8px); justify-content:center; flex-wrap:wrap; }
.cam-collage-slots .collage-slot {
    border: 2px dashed rgba(201,168,76,0.7); border-radius: clamp(8px,2.5vw,12px);
    background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    flex: 1; aspect-ratio: 1;
    min-width: clamp(48px, 14vw, 90px);
    max-width: clamp(72px, 20vw, 110px);
}
.cam-collage-slots .collage-slot img { width:100%; height:100%; object-fit:cover; }
.cam-collage-slots .collage-slot .slot-icon { color:rgba(201,168,76,0.9); font-size:clamp(16px,5vw,24px); }
.cam-collage-slots .collage-slot .slot-remove {
    position:absolute; top:3px; right:3px;
    background:rgba(0,0,0,0.6); color:#fff; border:none;
    border-radius:50%; width:clamp(16px,5vw,22px); height:clamp(16px,5vw,22px);
    font-size:clamp(9px,2.5vw,12px); cursor:pointer; display:none;
    align-items:center; justify-content:center;
}
.cam-collage-slots .collage-slot:has(img) .slot-remove { display:flex; }
.collage-progress {
    font-size: clamp(10px,2.5vw,12px); color:rgba(255,255,255,0.85);
    background:rgba(0,0,0,0.4); padding:3px 12px; border-radius:20px;
}

/* ── FILTER BAR (baris bawah, di bawah tombol capture) ── */
.cam-filter-bar {
    position: absolute; left: 0; right: 0;
    bottom: 0; z-index: 20;
    display: flex; gap: var(--gap-sm);
    padding: clamp(4px,1.2vh,7px) var(--pad-h) calc(var(--safe-bot) + clamp(4px,1.2vh,8px));
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cam-filter-bar::-webkit-scrollbar { display:none; }

/* ── CHIP (universal overlay style) ── */
.cam-chipbar { display:flex; gap:var(--gap-sm); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cam-chipbar::-webkit-scrollbar { display:none; }

.cam-chip {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: clamp(3px,1vw,5px);
    padding: var(--chip-pad); border-radius: 50px;
    background: rgba(0,0,0,0.40); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.25);
    font-size: var(--chip-fs); font-weight: 600; cursor: pointer;
    color: rgba(255,255,255,0.9);
    font-family: 'Poppins', sans-serif; white-space: nowrap;
    transition: all 0.18s;
}
.cam-chip.active { background:var(--gold); border-color:var(--gold); color:#fff; box-shadow:0 2px 8px rgba(201,168,76,0.4); }
.cam-chip:hover:not(.active) { background:rgba(255,255,255,0.20); }

canvas { display:none; }

/* ── BOTTOM BAR (switch | capture | timer — 3 kolom simetris) ── */
.cam-bottom {
    position: absolute; left: 0; right: 0; z-index: 20;
    bottom: var(--filter-h);
    height: var(--bottom-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    padding: 0 var(--pad-h);
    background: linear-gradient(to top, rgba(0,0,0,0.40) 0%, transparent 100%);
}



/* Big capture button */
.cam-capture-btn {
    width: var(--btn-capture); height: var(--btn-capture);
    border-radius: 50%; background: #fff;
    border: clamp(3px,0.8vw,5px) solid rgba(255,255,255,0.5);
    box-shadow: 0 0 0 clamp(2px,0.7vw,4px) rgba(201,168,76,0.5), 0 4px 20px rgba(0,0,0,0.4);
    cursor: pointer; flex-shrink: 0;
    transition: transform 0.1s, box-shadow 0.1s; outline: none;
}
.cam-capture-btn:active {
    transform: scale(0.91);
    box-shadow: 0 0 0 clamp(2px,0.7vw,4px) rgba(201,168,76,0.8), 0 2px 10px rgba(0,0,0,0.4);
}

/* Side buttons */
.cam-side-btn {
    width: var(--btn-side); height: var(--btn-side); border-radius: 50%;
    background: rgba(255,255,255,0.18); backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.cam-side-btn:active { background:rgba(255,255,255,0.30); }

/* ── VIEWFINDER AREA ── */
.viewfinder-area {
    position: absolute;
    top: calc(var(--safe-top) + clamp(8px,2.5vh,16px) + var(--icon-btn) + clamp(8px,2vh,14px));
    bottom: calc(var(--bottom-h) + var(--filter-h));
    left: 0; right: 0;
    pointer-events: none; z-index: 0;
}

/* ══════════════════════════════════
   PREVIEW SCREEN
══════════════════════════════════ */
.preview-screen {
    position: fixed; inset: 0; z-index: 10;
    background: #111; overflow: hidden;
    display: flex; flex-direction: column;
    align-items: stretch; justify-content: flex-start;
}

/* Area foto — mengisi ruang antara chip bar dan tombol bawah */
.prev-photo-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6px,1.5vh,12px) clamp(8px,2vw,16px);
}
.preview-screen #preview {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.sticker-layer {
    position: absolute;
    bottom: clamp(14px,3vh,22px);
    left: 0; right: 0;
    pointer-events: none;
    display: flex; justify-content: center;
    z-index: 5;
}
.sticker-text {
    background:rgba(0,0,0,0.40); color:#fff;
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:clamp(9px,2.2vw,12px); padding:clamp(3px,0.8vw,5px) clamp(10px,3vw,14px);
    border-radius:20px; letter-spacing:0.5px; opacity:0.85;
}

/* Frame options top — bagian pertama di flex column */
.prev-top {
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    padding: calc(var(--safe-top) + clamp(8px,2vh,14px)) var(--pad-h) clamp(6px,1.5vh,10px);
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px);
}

/* Action buttons bottom — bagian terakhir di flex column */
.prev-bottom {
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    padding: clamp(10px,2.5vh,16px) var(--pad-h) calc(var(--safe-bot) + clamp(10px,2.5vh,16px));
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px);
}
/* tombol sisi di preview — sedikit lebih besar dari cam-side-btn */
.prev-side-btn {
    width: clamp(44px,12vw,58px) !important;
    height: clamp(44px,12vw,58px) !important;
}
.prev-send-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    width: clamp(64px,17vw,80px); height: clamp(64px,17vw,80px);
    border-radius: 50%; background: var(--gold); border: none; color: #fff;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    box-shadow: 0 0 0 clamp(3px,1vw,5px) rgba(201,168,76,0.4), 0 4px 20px rgba(201,168,76,0.5);
    transition: transform 0.15s;
    padding: 0;
    overflow: hidden;
    line-height: 1;
}
.prev-send-btn:active { transform: scale(0.93); }
.prev-send-btn i { display: block; flex-shrink: 0; }
.prev-send-btn span { font-size: clamp(9px,2.2vw,11px); font-weight: 700; line-height: 1; flex-shrink: 0; }

/* Status — hidden, tidak dipakai di preview */
#status { display: none !important; }

/* ══════════════════════════════════
   MAIN APP — gallery / share
══════════════════════════════════ */
#main-app {
    position:fixed; inset:0; z-index:10;
    background:var(--cream); overflow-y:auto;
}

/* ── HEADER ── */
header {
    position:relative; z-index:1;
    background:linear-gradient(135deg,#2c2c2c 0%,#4a3728 50%,#2c2c2c 100%);
    padding:clamp(20px,5vh,36px) clamp(16px,5vw,28px) clamp(16px,4vh,28px);
    text-align:center; overflow:hidden;
}
header::before {
    content:''; position:absolute; inset:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.header-ornament { color:var(--gold); font-size:clamp(14px,4vw,22px); letter-spacing:clamp(4px,2vw,10px); margin-bottom:6px; opacity:0.8; }
header h1 { font-family:'Playfair Display',serif; font-size:clamp(22px,6vw,42px); color:#fff; line-height:1.2; }
header h1 span { color:var(--gold); font-style:italic; }
.header-subtitle { font-size:clamp(9px,2.2vw,12px); color:var(--gold-light); letter-spacing:clamp(1px,0.8vw,3px); text-transform:uppercase; margin-top:6px; opacity:0.9; }
.header-date {
    display:inline-block; margin-top:clamp(6px,1.5vh,12px);
    background:rgba(201,168,76,0.2); border:1px solid rgba(201,168,76,0.4);
    color:var(--gold-light); padding:clamp(4px,1vw,6px) clamp(12px,3.5vw,20px);
    border-radius:20px; font-size:clamp(9px,2.2vw,12px); letter-spacing:1.5px;
}

/* ── SECTIONS ── */
.section { display:none; padding:clamp(14px,4vw,22px) clamp(12px,4vw,18px) clamp(90px,18vh,130px); max-width:560px; margin:0 auto; }
.section.active { display:block; animation:fadeIn 0.3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ── GALLERY ── */
.gallery-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:clamp(10px,2.5vw,16px); }
.gallery-header h3 { font-family:'Playfair Display',serif; font-size:clamp(16px,4.5vw,20px); color:var(--dark); }
.gallery-count { background:var(--rose-light); color:var(--rose); font-size:clamp(10px,2.5vw,12px); font-weight:600; padding:3px 10px; border-radius:12px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(4px,1.5vw,8px); }
.gallery-item { position:relative; border-radius:clamp(8px,2.5vw,12px); overflow:hidden; aspect-ratio:1; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.1); transition:transform 0.2s; }
.gallery-item:hover { transform:scale(1.03); }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-item .del-btn { display:none !important; }
.gallery-empty { text-align:center; padding:clamp(30px,8vh,60px) 20px; color:var(--text-muted); }
.gallery-empty .icon { font-size:clamp(36px,10vw,52px); margin-bottom:12px; }
.gallery-empty p { font-size:clamp(12px,3vw,14px); }

/* ── SHARE ── */
.share-container { background:#fff; border-radius:clamp(12px,3vw,18px); padding:clamp(16px,4.5vw,24px); box-shadow:0 4px 20px rgba(0,0,0,0.06); border:1px solid var(--gold-light); text-align:center; }
.share-container h3 { font-family:'Playfair Display',serif; font-size:clamp(17px,4.5vw,22px); margin-bottom:8px; color:var(--dark); }
.share-container p { font-size:clamp(11px,2.8vw,13px); color:var(--text-muted); line-height:1.6; margin-bottom:clamp(14px,3.5vw,20px); }
.qr-code-box { background:var(--cream); padding:clamp(10px,3vw,16px); border-radius:12px; display:inline-block; margin-bottom:clamp(14px,4vw,22px); border:1.5px dashed var(--gold); }
.qr-code-box img { width:clamp(110px,30vw,150px); height:clamp(110px,30vw,150px); border-radius:8px; }
.qr-code-box p { margin:8px 0 0; font-size:clamp(10px,2.5vw,12px); font-weight:600; color:var(--gold); }

/* ── TAB BAR ── */
.tab-bar {
    position:fixed; bottom:clamp(14px,3vh,24px); left:50%; transform:translateX(-50%);
    z-index:50; background:rgba(255,255,255,0.92);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    display:flex; gap:clamp(2px,1vw,6px); padding:clamp(4px,1.2vw,8px) clamp(5px,1.5vw,10px);
    border-radius:50px; box-shadow:0 8px 32px rgba(0,0,0,0.12);
    border:1.5px solid rgba(232,213,163,0.5); width:max-content;
}
.tab-btn {
    padding:clamp(8px,2.2vw,12px) clamp(12px,3.5vw,20px); background:transparent; border:none;
    font-family:'Poppins',sans-serif; font-size:clamp(11px,3vw,14px); font-weight:600;
    color:#7a7068; cursor:pointer; transition:all 0.3s; border-radius:40px;
    display:flex; align-items:center; gap:clamp(4px,1.2vw,7px); white-space:nowrap;
}
.tab-btn.active { background:var(--gold); color:#fff; box-shadow:0 4px 14px rgba(201,168,76,0.35); }
.tab-btn:hover:not(.active) { color:var(--dark); background:rgba(201,168,76,0.1); }

/* FAB */
.fab-camera {
    position:fixed; bottom:clamp(16px,3.5vh,26px); right:clamp(14px,4vw,22px); z-index:51;
    width:clamp(42px,11vw,52px); height:clamp(42px,11vw,52px); border-radius:50%;
    background:var(--gold); border:none; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(201,168,76,0.45); cursor:pointer; transition:transform 0.2s;
}
.fab-camera:active { transform:scale(0.91); }

/* ── LIGHTBOX ── */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:999; align-items:center; justify-content:center; flex-direction:column; padding:20px; }
.lightbox.open { display:flex; }
.lightbox img { max-width:100%; max-height:80vh; border-radius:12px; }
.lightbox-close { position:absolute; top:clamp(12px,3vh,20px); right:clamp(12px,3vw,20px); color:#fff; font-size:clamp(22px,6vw,30px); cursor:pointer; background:none; border:none; }
.lightbox-actions { display:flex; gap:12px; margin-top:16px; }

/* ── BUTTONS ── */
.btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:clamp(9px,2.5vw,12px) clamp(16px,4.5vw,22px); border-radius:30px; border:none; cursor:pointer;
    font-size:clamp(12px,3vw,14px); font-weight:600; transition:all 0.3s; font-family:'Poppins',sans-serif;
}
.btn-primary { background:linear-gradient(135deg,var(--gold),#e0a84c); color:#fff; box-shadow:0 4px 15px rgba(201,168,76,0.4); }
.btn-outline  { background:#fff; border:2px solid var(--gold); color:var(--gold); }
.btn-outline:hover { background:var(--gold); color:#fff; }
.btn:disabled { background:#ddd; color:#aaa; box-shadow:none; cursor:not-allowed; }

/* ── TOAST ── */
.toast {
    position:fixed; bottom:clamp(80px,16vh,110px); left:50%;
    transform:translateX(-50%) translateY(60px);
    background:rgba(26,26,26,0.92); backdrop-filter:blur(4px);
    color:#fff; padding:clamp(8px,2.2vw,11px) clamp(18px,5vw,24px);
    border-radius:30px; font-size:clamp(11px,2.8vw,13px);
    z-index:9999; opacity:0; pointer-events:none;
    transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
    white-space:nowrap; box-shadow:0 4px 15px rgba(0,0,0,0.25);
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ── FOOTER ── */
footer { text-align:center; padding:clamp(14px,3.5vw,22px); font-size:clamp(10px,2.5vw,12px); color:var(--text-muted); border-top:1px solid var(--gold-light); margin-top:16px; }

.lucide { vertical-align:middle; }