/* ================================================================
   COUNTDOWN — styles for the dashboard countdown and the
   "Make Your Own Countdown" creator (the ten .cd-frame--* styles and
   the .cdc-* creator controls). Loaded after portal.css.
   ================================================================ */
.cd-own-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:none;
  border:1px solid var(--brass-dim);color:var(--brass-bright);
  font-family:var(--font-display);font-style:italic;font-size:15px;letter-spacing:.3px;
  padding:13px 16px;border-radius:11px;text-align:center;cursor:pointer;margin:2px 0 30px;
  transition:background .15s, border-color .15s;
}

.cd-own-cta:hover{background:rgba(200,162,76,0.08);border-color:var(--brass-bright);}

.cd-own-cta .arrow{transition:transform .2s ease;display:inline-block;}

.cd-own-cta:hover .arrow{transform:translateX(3px);}

.cdc-wrap{padding:4px 0 20px;}

.cdc-eyebrow{font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:6px;}

.cdc-title{font-family:var(--font-display);font-size:26px;color:var(--ivory);margin-bottom:4px;}

.cdc-subtitle{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--ivory-dim);margin-bottom:24px;}

.cdc-preview-stage{
  background:linear-gradient(168deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid var(--border-soft);border-radius:16px;padding:30px 16px;margin-bottom:24px;
  display:flex;align-items:center;justify-content:center;min-height:220px;
}
/* The preview card keeps one steady, generous size instead of
   shrinking to fit whatever names are typed. */
.cdc-preview-stage .cd-frame{width:100%;max-width:300px;margin-bottom:0;}

.cd-name-line{font-family:var(--font-display);letter-spacing:1px;color:var(--ivory);margin-bottom:8px;}

.cdc-field-group{margin-bottom:18px;}

.cdc-field-label{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:8px;}

.cdc-name-row{display:flex;gap:10px;align-items:center;}

.cdc-name-input{
  flex:1;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:9px;
  padding:12px 14px;color:var(--ivory);font-family:var(--font-body);font-size:13.5px;
}

.cdc-name-input:focus{outline:none;border-color:var(--brass-dim);}

.cdc-toggle{
  flex-shrink:0;width:44px;height:26px;border-radius:14px;background:rgba(255,255,255,0.08);
  border:1px solid var(--border);position:relative;cursor:pointer;transition:background .2s, border-color .2s;
}

.cdc-toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--ivory-faint);transition:transform .2s, background .2s;
}

.cdc-toggle.on{background:rgba(200,162,76,0.22);border-color:var(--brass-dim);}

.cdc-toggle.on::after{transform:translateX(18px);background:var(--brass-bright);}

.cdc-toggle-label{font-size:10.5px;color:var(--ivory-faint);margin-top:6px;letter-spacing:.5px;}

.cdc-photo-section{margin-bottom:18px;}

.cdc-photo-hint{font-size:11.5px;color:var(--ivory-faint);font-family:var(--font-body);margin:-4px 0 10px;line-height:1.5;}

.cdc-photo-add-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:rgba(200,162,76,0.06);border:1px dashed var(--brass-dim);border-radius:12px;
  padding:16px;color:var(--brass-bright);font-family:var(--font-body);font-size:12px;
  letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;transition:background .15s, border-color .15s;
}

.cdc-photo-add-btn:hover{background:rgba(200,162,76,0.11);border-color:var(--brass-bright);}

.cdc-photo-add-btn svg{flex-shrink:0;}

.cdc-photo-added{
  display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border-soft);
  border-radius:12px;background:rgba(255,255,255,0.02);
}

.cdc-photo-thumb{
  width:52px;height:52px;border-radius:8px;object-fit:cover;flex-shrink:0;
  border:1px solid var(--border-soft);
}

.cdc-photo-added-meta{flex:1;min-width:0;}

.cdc-photo-added-label{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:4px;}

.cdc-photo-added-actions{display:flex;gap:14px;}

.cdc-photo-link-btn{
  background:none;border:none;padding:0;font-family:var(--font-body);font-size:11px;
  letter-spacing:.5px;color:var(--ivory-dim);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;
}

.cdc-photo-link-btn:hover{color:var(--brass-bright);}

.cdc-photo-input{display:none;}
/* ── The client's photo, in front ──
   With a photo added, each style shows it clearly as the hero, framed
   to suit the style; the names and the countdown sit beneath it. */
.cd-frame > *{position:relative;z-index:1;}
.cd-portrait{width:70%;aspect-ratio:31/35;margin:2px auto 16px;overflow:hidden;background:#222;}
.cd-portrait-canvas{display:block;width:100%;height:100%;}
.cd-portrait-wrap{position:relative;width:70%;margin:2px auto 18px;}
.cd-portrait-wrap .cd-portrait{width:100%;margin:0;}

.cd-portrait--silk{border-radius:14px;box-shadow:0 10px 24px rgba(16,27,48,.22);outline:1px solid rgba(200,162,76,.75);outline-offset:6px;}
.cd-portrait--arch{border-radius:999px 999px 6px 6px / 45% 45% 6px 6px;border:1.5px solid #C8A24C;outline:1px solid rgba(200,162,76,.45);outline-offset:6px;box-shadow:0 14px 30px rgba(0,0,0,.5);}
.cd-portrait--macro{width:100%;aspect-ratio:3/2;border-radius:6px;border:1px solid rgba(214,181,126,.5);box-shadow:0 16px 34px rgba(0,0,0,.6);}
.cd-portrait--seal{width:100%;aspect-ratio:1;border-radius:50%;border:4px solid #f6f1e7;box-shadow:0 0 0 1px rgba(124,43,38,.35),0 12px 26px rgba(60,30,10,.28);}
.cd-frame .cd-seal.cd-seal--on-photo{position:absolute;right:-4px;bottom:-4px;margin:0;width:46px;height:46px;z-index:2;}
.cd-frame .cd-seal.cd-seal--on-photo .cd-seal-mark{font-size:13px;}
.cd-portrait--mono{width:74%;border-radius:0;border:6px solid #fff;}
.cd-portrait--golden{border-radius:18px;border:1.5px solid rgba(255,240,210,.85);box-shadow:0 14px 34px rgba(140,90,30,.5);}
.cd-portrait--frosted{border-radius:16px;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 0 6px rgba(238,241,234,.14),0 12px 28px rgba(0,0,0,.35);}
.cd-portrait--velvet{width:62%;aspect-ratio:1;border-radius:50%;border:3px solid #d6b57e;box-shadow:0 0 0 7px rgba(214,181,126,.10),0 0 0 8px rgba(214,181,126,.5),0 14px 30px rgba(0,0,0,.55);margin-top:10px;margin-bottom:22px;}
.cd-portrait--parchment{width:58%;aspect-ratio:29/35;border-radius:50%;border:2px solid #C8A24C;outline:1px solid rgba(200,162,76,.6);outline-offset:6px;box-shadow:0 10px 24px rgba(90,60,20,.25);}

/* Velvet with a photo: the countdown sits beneath the bezel. */
.cd-frame--velvet.has-photo .cd-num{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:500;color:#f3ead9;}
.cd-frame--velvet.has-photo .cd-label{font-size:9px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(243,234,217,0.72);margin-top:6px;}
.cd-frame--velvet.has-photo .cd-name-line{margin-bottom:6px;}
/* Polaroid: the print grows into a proper instant photo. */
.cd-frame--polaroid .cd-photo-area.has-photo{height:auto;aspect-ratio:162/145;padding:0;border:10px solid #fff;border-bottom-width:26px;box-shadow:0 10px 22px rgba(0,0,0,.18);transform:rotate(-1.5deg);border-radius:2px;}
.cd-frame--polaroid .cd-photo-area{background-size:cover;background-position:center;}

.cdc-style-strip-wrap{position:relative;display:flex;align-items:center;gap:4px;min-width:0;}

.cdc-style-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;min-width:0;flex:1;}

.cdc-style-strip::-webkit-scrollbar{display:none;}

.cdc-style-strip::-webkit-scrollbar{height:4px;}

.cdc-style-strip::-webkit-scrollbar-thumb{background:var(--brass-dim);border-radius:4px;}

.cdc-style-arrow{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--border-soft);
  background:rgba(255,255,255,0.04);color:var(--ivory-faint);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;
}

.cdc-style-arrow:hover{border-color:var(--brass-bright);color:var(--brass-bright);}

@media (hover:none){
  .cdc-style-arrow{display:none;}
}

@media (max-width:480px){
  .cdc-style-strip-wrap{flex-wrap:wrap;}
  .cdc-style-arrow{display:none;}
  .cdc-style-strip{flex-wrap:wrap;overflow-x:visible;}
}

/* Arrows are a desktop/trackpad affordance; on touch screens the strip
   scrolls natively and the buttons would just eat space. */

/* Narrow phones: wrap into rows instead of relying on horizontal scroll. */

.cdc-style-card{
  flex-shrink:0;width:76px;padding:12px 6px;border-radius:10px;border:1px solid var(--border-soft);
  background:rgba(255,255,255,0.02);text-align:center;cursor:pointer;transition:border-color .15s, transform .15s;
}

.cdc-style-card:hover{transform:translateY(-2px);}

.cdc-style-card.active{border-color:var(--brass-bright);box-shadow:0 0 0 2px rgba(200,162,76,0.18);}

.cdc-style-card-num{font-family:var(--font-display);font-size:17px;color:var(--brass-bright);}

.cdc-style-card-label{font-size:6.8px;letter-spacing:.5px;text-transform:uppercase;color:var(--ivory-faint);margin-top:3px;}

.cdc-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px;}

/* "Share on WhatsApp" — deep forest green with ivory text, gold edge on hover. */
#app #cdcShareBtn,#cdcShareBtn{background:#162d0d;border-color:#162d0d;color:#F6F1E7;}
#app #cdcShareBtn:hover,#cdcShareBtn:hover{background:#1f3d13;border-color:var(--brass-dim);color:#FFFFFF;transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(22,45,13,0.7);}
#app #cdcShareBtn:active,#cdcShareBtn:active{background:#11240a;transform:translateY(0);}
#app #cdcShareBtn:focus-visible,#cdcShareBtn:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

.cd-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}

.cd-section-eyebrow{font-size:9.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--brass-bright);font-weight:500;}

.cd-section-date{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ivory-faint);}

.cd-picker-wrap{margin-bottom:18px;margin-top:6px;}

.cd-picker-title{
  font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ivory-faint);
  margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;
}

.cd-picker-title .cd-picker-toggle{
  color:var(--brass-bright);font-size:10px;letter-spacing:.5px;text-transform:none;background:none;border:none;
  padding:2px 0;
}

.cd-picker-strip{
  display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;
}

.cd-picker-strip::-webkit-scrollbar{height:4px;}

.cd-picker-strip::-webkit-scrollbar-thumb{background:var(--brass-dim);border-radius:4px;}

.cd-swatch{
  flex-shrink:0;width:72px;height:88px;border-radius:10px;scroll-snap-align:start;
  border:1.5px solid var(--border-soft);background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transform:scale(1);transition:transform .15s, border-color .15s;
}

.cd-swatch:hover{transform:translateY(-2px);}

.cd-swatch.active{border-color:var(--brass-bright);box-shadow:0 0 0 2px rgba(200,162,76,0.18);}

.cd-swatch-num{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--brass-bright);}

.cd-swatch-label{font-size:7px;letter-spacing:.6px;text-transform:uppercase;color:var(--ivory-faint);text-align:center;padding:0 4px;}

.cd-frame{
  position:relative;border-radius:16px;padding:26px 22px;margin-bottom:20px;text-align:center;overflow:hidden;
}

/* ⭐ NEW: soft navy glow pulsing around the countdown card's edge,
   layered underneath the frame's own background via negative
   z-index equivalent (box-shadow, so it never needs its own stacking
   context and can't interfere with the frame variants' own styling). */

.cd-frame{
  animation:navyFrameGlow 4.5s ease-in-out infinite;
}

.cd-num{font-family:'Cormorant Garamond',serif;line-height:1;color:var(--brass-bright);}

.cd-label{letter-spacing:.5px;}

.cd-sub{letter-spacing:2px;text-transform:uppercase;}
/* ── Shared decorative primitives reused across the 10 styles ──── */

.cd-frame .cd-seal{width:76px;height:76px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;position:relative;}

.cd-frame .cd-seal::before{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);}

.cd-frame .cd-seal-mark{font-family:'Cormorant Garamond',serif;font-size:22px;color:rgba(246,241,231,0.92);letter-spacing:1px;}

.cd-frame .cd-watch{width:118px;height:118px;border-radius:50%;margin:0 auto 14px;border:2px solid rgba(214,181,126,0.55);position:relative;background:radial-gradient(circle, rgba(214,181,126,0.08), transparent 70%);}

.cd-frame .cd-watch::before,.cd-frame .cd-watch::after{content:'';position:absolute;left:50%;top:50%;background:#d6b57e;transform-origin:0 100%;border-radius:2px;}

.cd-frame .cd-watch::before{width:2px;height:34px;margin:-34px 0 0 -1px;animation:watchHourHand 40s linear infinite;}

.cd-frame .cd-watch::after{width:2px;height:44px;margin:-44px 0 0 -1px;background:rgba(214,181,126,0.6);animation:watchMinHand 20s linear infinite;}

.cd-frame .cd-arch-shape{position:absolute;top:0;left:50%;width:210px;height:150px;transform:translateX(-50%);border:1px solid rgba(200,162,76,0.4);border-bottom:none;border-radius:105px 105px 0 0;pointer-events:none;}

.cd-frame .cd-arch-glint{position:absolute;inset:0;background:linear-gradient(100deg, transparent 40%, rgba(214,181,126,0.35) 50%, transparent 60%);background-size:250% 100%;animation:archGlint 6s ease-in-out infinite;pointer-events:none;}

.cd-frame .cd-leaf{position:absolute;opacity:.5;border-radius:50% 0 50% 50%;background:rgba(122,155,126,0.35);}

.cd-frame .cd-ribbon-rule{width:44px;height:1px;margin:10px auto;background:linear-gradient(90deg, transparent, currentColor, transparent);}

.cd-frame .cd-film-sprocket{position:absolute;top:0;bottom:0;width:14px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;}

.cd-frame .cd-film-sprocket span{width:5px;height:5px;background:rgba(0,0,0,0.35);border-radius:1.5px;}

@media (prefers-reduced-motion: reduce){
  .cd-frame .cd-watch::before,.cd-frame .cd-watch::after,.cd-frame .cd-arch-glint,.cd-frame{animation:none !important;}
}
/* 1. THE MINIMALIST SILK & SERIFS — quiet editorial luxury */

.cd-frame--silk{background:linear-gradient(155deg, #F6F1E7, #ECE3D1);border:1px solid rgba(200,162,76,0.35);}

.cd-frame--silk .cd-name-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:#101B30;letter-spacing:.5px;}

.cd-frame--silk .cd-ribbon-rule{color:#C8A24C;}

.cd-frame--silk .cd-num{font-size:52px;font-weight:400;color:#101B30;letter-spacing:1px;}

.cd-frame--silk .cd-label{font-size:9.5px;letter-spacing:3.5px;text-transform:uppercase;color:#6b5c3f;margin-top:8px;}
/* 2. THE ARCHITECTURAL ARCH — moody brushed-brass frame */

.cd-frame--arch{background:linear-gradient(180deg, #14161c, #0a0b10);border:1px solid rgba(200,162,76,0.22);padding-top:54px;}

.cd-frame--arch .cd-name-line{font-family:'Cormorant Garamond',serif;font-size:15px;color:#e8c97e;letter-spacing:1.5px;text-transform:uppercase;}

.cd-frame--arch .cd-num{font-size:46px;font-weight:500;color:#f3ead9;}

.cd-frame--arch .cd-label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(243,234,217,0.55);margin-top:6px;}
/* 3. THE CINEMATIC MACRO LENS FLARE — soft bokeh depth */

.cd-frame--macro{background:radial-gradient(circle at 30% 20%, rgba(214,181,126,0.28), transparent 45%), radial-gradient(circle at 75% 80%, rgba(184,147,90,0.22), transparent 50%), linear-gradient(160deg,#1a1410,#0b0906);border:none;}

.cd-frame--macro .cd-name-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:#f3ead9;opacity:.85;}

.cd-frame--macro .cd-num{font-size:50px;font-weight:600;color:#f0d9a3;text-shadow:0 0 34px rgba(214,181,126,0.55);}

.cd-frame--macro .cd-label{font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(243,234,217,0.65);margin-top:6px;}
/* 4. THE MONOGRAM WAX SEAL — royal stationery */

.cd-frame--seal{background:linear-gradient(160deg,#F6F1E7,#E8DCC2);border:1px solid rgba(139,58,58,0.18);}

.cd-frame--seal .cd-seal{background:radial-gradient(circle at 35% 30%, #b4483f, #7c2b26);box-shadow:0 6px 16px rgba(124,43,38,0.35);animation:sealPulse 3.6s ease-in-out infinite;}

.cd-frame--seal .cd-name-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:#5a2a24;}

.cd-frame--seal .cd-num{font-size:44px;font-weight:600;color:#3c2a17;}

.cd-frame--seal .cd-label{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#7c6a4a;margin-top:6px;font-style:italic;}
/* 5. THE MONOCHROME EDITORIAL — high-fashion split */

.cd-frame--mono{background:#0c0c0c;border:1px solid #fff;position:relative;padding:26px 18px 26px calc(12% + 18px);}

/* A slim white band down the left edge: the editorial split, kept clear of the text. */
.cd-frame--mono::before{content:'';position:absolute;left:0;top:0;bottom:0;width:12%;background:#fff;}

.cd-frame--mono .cd-name-line{position:relative;font-family:var(--font-body);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#e8e8e8;}

.cd-frame--mono .cd-num{position:relative;font-size:50px;font-weight:700;color:#fff;letter-spacing:-1px;}

.cd-frame--mono .cd-label{position:relative;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#c9c9c9;margin-top:6px;}
/* 6. THE SUN-DRENCHED GOLDEN HOUR — warm romantic light */

.cd-frame--golden{background:linear-gradient(165deg, #f3d9a8, #d9a75e 55%, #b9803c);border:none;}

.cd-frame--golden .cd-name-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:#3c2a10;}

.cd-frame--golden .cd-num{font-size:50px;font-weight:600;color:#3c2a10;}

.cd-frame--golden .cd-label{font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(60,42,16,0.75);margin-top:6px;}
/* 7. THE FROSTED GLASS & BOTANICALS — organic contemporary */

.cd-frame--frosted{background:linear-gradient(160deg, #5c665a, #3b423a);border:1px solid rgba(158,168,150,0.3);backdrop-filter:blur(2px);position:relative;overflow:hidden;}

.cd-frame--frosted .cd-leaf:nth-child(1){width:60px;height:80px;top:-18px;left:-14px;transform:rotate(20deg);}

.cd-frame--frosted .cd-leaf:nth-child(2){width:44px;height:60px;bottom:-14px;right:-10px;transform:rotate(-30deg);}

.cd-frame--frosted .cd-name-line{position:relative;font-family:'Cormorant Garamond',serif;font-size:16px;color:#eef1ea;}

.cd-frame--frosted .cd-num{position:relative;font-size:46px;font-weight:500;color:#f4f6f0;}

.cd-frame--frosted .cd-label{position:relative;font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(238,241,234,0.75);margin-top:6px;}
/* 8. THE VELVET & VINTAGE POCKET WATCH — moody old-world */

.cd-frame--velvet{background:radial-gradient(circle at 50% 0%, #1c3d33, #0c1a16);border:1px solid rgba(214,181,126,0.25);}

.cd-frame--velvet .cd-watch .cd-num,.cd-frame--velvet .cd-watch .cd-label{position:relative;z-index:1;}

.cd-frame--velvet .cd-name-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:#e8c97e;margin-bottom:10px;}

.cd-frame--velvet .cd-watch .cd-num{font-size:26px;font-weight:600;color:#f3ead9;text-shadow:0 0 6px #0c1a16,0 0 12px #0c1a16;}
/* The number and label sit in the middle of the clock face. */
.cd-frame--velvet .cd-watch{display:flex;flex-direction:column;align-items:center;justify-content:center;}
/* The clock hands pass softly behind the number rather than across it. */
.cd-frame--velvet .cd-watch::before,.cd-frame--velvet .cd-watch::after{opacity:.45;}

.cd-frame--velvet .cd-watch .cd-label{font-size:7px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(243,234,217,0.7);margin-top:2px;}
/* 9. THE FLOATING POLAROID & FILM STRIP — emotional, personal */

.cd-frame--polaroid{background:#f4f1ea;border:none;padding:20px 20px 46px;position:relative;}

.cd-frame--polaroid .cd-film-sprocket.l{left:0;}
 
.cd-frame--polaroid .cd-film-sprocket.r{right:0;}

.cd-frame--polaroid .cd-photo-area{background:linear-gradient(135deg,#2c2c30,#4a4640 45%,#6b5f4e);border-radius:3px;height:96px;margin:0 18px 14px;position:relative;overflow:hidden;}

.cd-frame--polaroid .cd-photo-area::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.22) 48%, transparent 65%);background-size:220% 100%;animation:filmLeak 7s ease-in-out infinite;}

.cd-frame--polaroid .cd-name-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:#2b2b2b;}

.cd-frame--polaroid .cd-num{font-size:38px;font-weight:600;color:#2b2b2b;}

.cd-frame--polaroid .cd-label{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:#6b6559;margin-top:4px;}
/* 10. THE ROYAL PARCHMENT & CALLIGRAPHY RIBBON — heritage luxury */

.cd-frame--parchment{background:linear-gradient(160deg, #F1E9D6, #E4D6B4);border:1px solid rgba(200,162,76,0.4);position:relative;}

.cd-frame--parchment::before,.cd-frame--parchment::after{content:'';position:absolute;left:14px;right:14px;height:1px;background:linear-gradient(90deg, transparent, #C8A24C, transparent);}

.cd-frame--parchment::before{top:10px;}
 
.cd-frame--parchment::after{bottom:10px;}

.cd-frame--parchment .cd-name-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:#3c2a10;animation:inkWrite 1.1s ease-out;}

.cd-frame--parchment .cd-num{font-size:48px;font-weight:500;color:#7c5a1e;font-family:'Cormorant Garamond',serif;}

.cd-frame--parchment .cd-label{font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:#8a7548;margin-top:6px;}
/* ── Dashboard CTA into countdown creator ───────────────────────── */

#app .cd-own-cta{
  font-family:var(--font-body);
  font-style:normal;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.3px;
  color:var(--brass-bright);
}
/* ── Countdown creator controls (NOT countdown frame styles) ────── */

#app .cdc-eyebrow{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:6px;
}

/* cdc-title and cdc-subtitle use --font-display (Cormorant) — they are editorial
   headings within the creator; acceptable and left intentionally */

#app .cdc-field-label{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:0.8px;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:7px;
}

#app .cdc-name-input{
  font-family:var(--font-body);font-size:13.5px;
}

#app .cdc-toggle-label{
  font-family:var(--font-body);
  font-size:11px;color:var(--ivory-faint);margin-top:6px;letter-spacing:0;
}

#app .cdc-photo-hint{
  font-family:var(--font-body);
  font-size:12px;color:var(--ivory-faint);line-height:1.55;letter-spacing:0;
}

#app .cdc-photo-add-btn{
  font-family:var(--font-body);
  font-size:11.5px;letter-spacing:0.8px;text-transform:uppercase;
}

#app .cdc-photo-added-label{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:4px;
}

#app .cdc-photo-link-btn{
  font-family:var(--font-body);font-size:11.5px;letter-spacing:0;
}

/* Countdown style strip picker labels */

#app .cdc-style-card-num{
  /* Was Cormorant — this is a UI control, not editorial typography */
  font-family:var(--font-body);
  font-size:15px;font-weight:600;color:var(--brass-bright);
}

#app .cdc-style-card-label{
  font-family:var(--font-body);
  font-size:8px;letter-spacing:0.4px;text-transform:uppercase;color:var(--ivory-faint);margin-top:3px;
}

/* cd-picker swatch numbers */

#app .cd-swatch-num{
  /* Was Cormorant — UI swatch picker control */
  font-family:var(--font-body);
  font-size:17px;font-weight:600;color:var(--brass-bright);
}

#app .cd-swatch-label{
  font-family:var(--font-body);
  font-size:7.5px;letter-spacing:0.4px;text-transform:uppercase;color:var(--ivory-faint);
  text-align:center;padding:0 4px;
}

#app .cd-picker-title{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ivory-faint);
  margin-bottom:10px;
}

#app .cd-section-eyebrow{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brass-bright);font-weight:500;
}

#app .cd-section-date{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:0.8px;text-transform:uppercase;color:var(--ivory-faint);
}

@keyframes navyFrameGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(66,110,196,0); }
  50%{ box-shadow:0 0 32px 4px rgba(66,110,196,0.28); }
}

@keyframes watchHourHand{from{transform:rotate(35deg);}to{transform:rotate(395deg);}}

@keyframes watchMinHand{from{transform:rotate(120deg);}to{transform:rotate(480deg);}}

@keyframes archGlint{0%,100%{background-position:120% 0;}50%{background-position:-20% 0;}}

@keyframes sealPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}

@keyframes filmLeak{0%,100%{background-position:130% 0;}50%{background-position:-30% 0;}}

@keyframes inkWrite{from{opacity:0;letter-spacing:4px;}to{opacity:1;letter-spacing:.5px;}}

/* ── Studio mark at the foot of the creator's preview card ── */
.cd-frame .cd-brand{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;
  font:500 7.5px/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:rgba(60,42,16,.72);}
.cd-frame .cd-brand span{margin-right:-.28em;}
.cd-frame .cd-brand img{width:14px;height:14px;object-fit:contain;flex:none;}
.cd-frame--arch .cd-brand,.cd-frame--macro .cd-brand,.cd-frame--mono .cd-brand,
.cd-frame--frosted .cd-brand,.cd-frame--velvet .cd-brand{color:rgba(243,234,217,.72);}
.cd-frame--seal .cd-brand{color:rgba(124,43,38,.75);}
.cd-frame--silk .cd-brand{color:rgba(16,27,48,.7);}

/* ================================================================
   ADJUST YOUR PHOTO — the framing sheet
   ================================================================ */
body.cdc-crop-open{overflow:hidden;}
.cdc-crop{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px;}
.cdc-crop-veil{position:absolute;inset:0;background:rgba(6,9,18,.82);opacity:0;transition:opacity .25s ease;}
.cdc-crop-sheet{
  position:relative;width:min(420px,100%);max-height:calc(100dvh - 36px);overflow:auto;
  background:linear-gradient(180deg,#121d33,#0d1628);border:1px solid rgba(200,162,76,.35);border-radius:20px;
  padding:26px 20px 20px;text-align:center;color:var(--cream,#f6f1e7);
  box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(14px) scale(.98);opacity:0;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .25s ease;
}
.cdc-crop.is-in .cdc-crop-veil{opacity:1;}
.cdc-crop.is-in .cdc-crop-sheet{transform:none;opacity:1;}
.cdc-crop-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;background:none;border:1px solid rgba(255,255,255,.18);color:#f6f1e7;font-size:22px;line-height:1;cursor:pointer;}
.cdc-crop-eyebrow{font-size:10px;letter-spacing:2.6px;text-transform:uppercase;color:#C8A24C;margin-bottom:6px;}
.cdc-crop-title{font-family:var(--font-display,'Cormorant Garamond',serif);font-size:26px;line-height:1.15;margin-bottom:4px;}
.cdc-crop-hint{font-size:11.5px;color:rgba(246,241,231,.6);margin-bottom:18px;}
.cdc-crop-stage{
  display:flex;align-items:center;justify-content:center;padding:22px 10px;border-radius:14px;margin-bottom:16px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(200,162,76,.10),rgba(255,255,255,.02));border:1px solid rgba(200,162,76,.16);
}
.cdc-crop-stage .cdc-crop-frame{width:min(62vw,250px);margin:0;cursor:grab;touch-action:none;position:relative;}
.cdc-crop-stage .cdc-crop-frame:active{cursor:grabbing;}
.cdc-crop-stage .cd-portrait--macro{width:min(76vw,320px);}
.cdc-crop-stage .cd-portrait--polaroid{aspect-ratio:162/145;border:8px solid #fff;border-bottom-width:22px;border-radius:2px;}
/* thirds grid while framing */
.cdc-crop-grid{position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:
    linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.7) calc(33.33% - .5px),rgba(255,255,255,.7) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.7) calc(66.66% - .5px),rgba(255,255,255,.7) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
    linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.7) calc(33.33% - .5px),rgba(255,255,255,.7) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.7) calc(66.66% - .5px),rgba(255,255,255,.7) calc(66.66% + .5px),transparent calc(66.66% + .5px));}
.cdc-crop-zoom{display:flex;align-items:center;gap:12px;margin:0 4px 18px;}
.cdc-crop-zoom input{flex:1;accent-color:#C8A24C;height:28px;}
.cdc-crop-step{width:40px;height:40px;flex:none;border-radius:50%;background:rgba(200,162,76,.08);border:1px solid rgba(200,162,76,.4);color:#E7CB84;font-size:20px;line-height:1;cursor:pointer;}
.cdc-crop-label{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(246,241,231,.62);margin-bottom:10px;}
.cdc-crop-tones{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.cdc-tone{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;padding:0;cursor:pointer;color:rgba(246,241,231,.7);font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;width:56px;line-height:1.3;}
.cdc-tone-thumb{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(200,162,76,.25);transition:border-color .2s ease,transform .2s ease;}
.cdc-tone.is-on{color:#E7CB84;}
.cdc-tone.is-on .cdc-tone-thumb{border-color:#E7CB84;box-shadow:0 0 0 3px rgba(200,162,76,.22);transform:scale(1.06);}
.cdc-crop-actions{display:flex;gap:10px;}
.cdc-crop-actions .btn{margin-top:0;}
.cdc-photo-link-btn--strong{color:var(--brass-bright,#E7CB84);font-weight:600;}
@media (prefers-reduced-motion:reduce){.cdc-crop-veil,.cdc-crop-sheet,.cdc-tone-thumb{transition:none;}}

/* Dashboard count-up: the number settles with a soft glow once it lands. */
.cd-frame.cd-counted .cd-num{animation:cdSettle .9s cubic-bezier(.2,.7,.2,1);}
@keyframes cdSettle{
  0%{transform:scale(1.07);filter:brightness(1.35) drop-shadow(0 0 14px rgba(200,162,76,.55));}
  100%{transform:scale(1);filter:none;}
}
@media (prefers-reduced-motion: reduce){.cd-frame.cd-counted .cd-num{animation:none;}}