.cd-app{
  --cd-bg:#0b0908;
  --cd-bg-card:#1f150c;
  --cd-amber:#f0980f;
  --cd-amber-deep:#b5650a;
  --cd-cream:#f5ead9;
  --cd-muted:#a89685;
  --cd-green:#4a8f5c;
  --cd-red:#b1442f;
  --cd-line: rgba(240,152,15,0.18);
  --cd-font-display:'Anton', sans-serif;
  --cd-font-body:'Work Sans', -apple-system, sans-serif;
  --cd-font-mono:'Space Mono', monospace;

  display:block;
  font-family: var(--cd-font-body);
  color: var(--cd-cream);
  background: var(--cd-bg);
  max-width:430px;
  margin:0 auto;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  line-height:normal;
}
.cd-app *, .cd-app *::before, .cd-app *::after{ box-sizing:border-box; }
.cd-app ul, .cd-app ol{ margin:0; padding:0; list-style:none; }
.cd-app .cd-loading{ padding:40px; text-align:center; color:#a89685; font-family: var(--cd-font-mono); }

.cd-app .cd-screen{ display:none; flex-direction:column; padding:28px 22px 20px; min-height:520px; animation: cd-fade .35s ease; }
.cd-app .cd-screen.cd-active{ display:flex; }
@keyframes cd-fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.cd-app .cd-eyebrow{ font-family: var(--cd-font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--cd-amber); margin-bottom:6px; }
.cd-app h1.cd-h1{ font-family: var(--cd-font-display); font-weight:400; font-size:36px; line-height:0.95; margin:0 0 10px; color:var(--cd-cream); }
.cd-app h1.cd-h1 .cd-accent{ color:var(--cd-amber); }
.cd-app p.cd-lead{ color:var(--cd-muted); font-size:15px; line-height:1.5; margin:0 0 20px; }

.cd-app .cd-duck-wrap{ display:flex; align-items:center; justify-content:center; margin:6px 0 22px; }
.cd-app .cd-duck-ring{ width:180px;height:180px;border-radius:50%; display:flex;align-items:center;justify-content:center; position:relative; background: radial-gradient(circle at 50% 40%, rgba(240,152,15,0.14), transparent 70%); }
.cd-app .cd-duck-ring::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--cd-ring-color, var(--cd-amber)); opacity:.55; }
.cd-app .cd-duck-ring.cd-pulse::before{ animation: cd-pulse 1.8s ease-in-out infinite; }
@keyframes cd-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(177,68,47,0.35);} 50%{ box-shadow:0 0 0 14px rgba(177,68,47,0);} }
.cd-app .cd-duck-emoji{ font-size:80px; filter: drop-shadow(0 0 22px rgba(240,152,15,0.35)); }
.cd-app .cd-duck-photo{ width:100%; height:100%; border-radius:50%; object-fit:cover; position:relative; z-index:1; }

.cd-app .cd-card{ background: var(--cd-bg-card); border:1px solid var(--cd-line); border-radius:14px; padding:18px; margin-bottom:14px; }
.cd-app .cd-card .cd-label{ font-family: var(--cd-font-mono); font-size:10px; letter-spacing:.12em; color:var(--cd-muted); text-transform:uppercase; margin-bottom:4px;}
.cd-app .cd-card .cd-value{ font-size:15px; color:var(--cd-cream); }

.cd-app .cd-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; font-family: var(--cd-font-body); font-weight:600; font-size:15.5px; padding:15px 18px; border-radius:11px; border:none; cursor:pointer; margin-bottom:11px; transition: transform .12s ease, filter .12s ease; }
.cd-app .cd-btn:active{ transform: scale(0.98); }
.cd-app .cd-btn-primary{ background: linear-gradient(180deg, var(--cd-amber), var(--cd-amber-deep)); color:#1a1006; }
.cd-app .cd-btn-outline{ background:transparent; border:1.5px solid var(--cd-line); color:var(--cd-cream); }
.cd-app .cd-btn-ghost{ background:transparent; color:var(--cd-muted); font-weight:500; padding:10px; }
.cd-app .cd-btn-danger{ background:transparent; border:1.5px solid rgba(177,68,47,.5); color:#e2a294; }
.cd-app .cd-btn:disabled{ opacity:.4; cursor:not-allowed; }

.cd-app .cd-back{ font-family: var(--cd-font-mono); font-size:12px; color:var(--cd-muted); background:none; border:none; cursor:pointer; padding:0 0 18px; text-align:left; }
.cd-app .cd-back:hover{ color:var(--cd-amber); }

.cd-app .cd-stamp{ border:1.5px dashed var(--cd-line); border-radius:12px; padding:14px; margin-bottom:12px; }
.cd-app .cd-stamp .cd-stamp-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.cd-app .cd-stamp .cd-tag{ font-family:var(--cd-font-mono); font-size:10px; color:var(--cd-amber); text-transform:uppercase; letter-spacing:.1em; }
.cd-app .cd-stamp .cd-date{ font-family:var(--cd-font-mono); font-size:11px; color:var(--cd-muted); }
.cd-app .cd-stamp .cd-story{ font-size:13.5px; color:var(--cd-cream); opacity:.9; line-height:1.4; }
.cd-app .cd-stamp .cd-loc{ font-family:var(--cd-font-mono); font-size:11px; color:var(--cd-muted); margin-top:6px; }
.cd-app .cd-stamp img{ max-width:100%; border-radius:8px; margin:8px 0; }

.cd-app .cd-stat-row{ display:flex; gap:10px; margin-bottom:14px; }
.cd-app .cd-stat{ flex:1; background:var(--cd-bg-card); border:1px solid var(--cd-line); border-radius:12px; padding:12px; text-align:center; }
.cd-app .cd-stat .cd-num{ font-family:var(--cd-font-display); font-size:24px; color:var(--cd-amber); }
.cd-app .cd-stat .cd-lbl{ font-family:var(--cd-font-mono); font-size:9px; letter-spacing:.08em; color:var(--cd-muted); text-transform:uppercase; margin-top:2px;}

.cd-app .cd-countdown{ font-family:var(--cd-font-mono); font-size:32px; color:var(--cd-amber); text-align:center; letter-spacing:.05em; }
.cd-app .cd-countdown-wrap{ text-align:center; margin-bottom:18px; }
.cd-app .cd-countdown-wrap .cd-cd-label{ font-family:var(--cd-font-mono); font-size:10px; color:var(--cd-muted); letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px;}

.cd-app textarea, .cd-app input[type=text], .cd-app input[type=number]{ width:100%; background:var(--cd-bg-card); border:1.5px solid var(--cd-line); border-radius:10px; color:var(--cd-cream); font-family:var(--cd-font-body); font-size:14px; padding:12px; margin-bottom:12px; resize:vertical; }
.cd-app textarea:focus, .cd-app input:focus{ outline:none; border-color:var(--cd-amber); }
.cd-app label.cd-field-label{ font-family:var(--cd-font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cd-muted); display:block; margin-bottom:6px;}

.cd-app .cd-file-drop{ border:1.5px dashed var(--cd-line); border-radius:12px; padding:20px; text-align:center; margin-bottom:14px; cursor:pointer; position:relative; }
.cd-app .cd-file-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.cd-app .cd-file-drop.cd-has-photo{ border-color: var(--cd-amber); }
.cd-app .cd-file-drop img{ max-width:100%; border-radius:8px; margin-top:8px; }
.cd-app .cd-file-drop .cd-hint{ color:var(--cd-muted); font-size:13px; }

.cd-app .cd-map-container{ width:100%; height:220px; border-radius:12px; overflow:hidden; margin-bottom:14px; border:1px solid var(--cd-line); }

.cd-app .cd-status-pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--cd-font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:20px; margin-bottom:16px; width:fit-content; }
.cd-app .cd-status-pill.cd-free{ background:rgba(74,143,92,0.15); color:var(--cd-green); border:1px solid rgba(74,143,92,.4);}
.cd-app .cd-status-pill.cd-mine{ background:rgba(240,152,15,0.15); color:var(--cd-amber); border:1px solid rgba(240,152,15,.4);}
.cd-app .cd-status-pill.cd-other{ background:rgba(177,68,47,0.15); color:#e2a294; border:1px solid rgba(177,68,47,.4);}

.cd-app .cd-debugbar{ display:flex; gap:6px; padding:10px; border-top:1px solid var(--cd-line); background:#0e0a06; }
.cd-app .cd-debugbar button{ flex:1; font-family: var(--cd-font-mono); font-size:10px; background:var(--cd-bg-card); color:var(--cd-muted); border:1px solid var(--cd-line); border-radius:8px; padding:8px 4px; cursor:pointer; }
.cd-app .cd-debugbar button.cd-active-mode{ color:var(--cd-amber); border-color:var(--cd-amber); }

.cd-app .cd-toast{ position:absolute; top:12px; left:50%; transform:translateX(-50%) translateY(-60px); background: var(--cd-amber); color:#1a1006; font-weight:600; font-size:13px; padding:10px 18px; border-radius:30px; z-index:100; transition:transform .3s ease; white-space:nowrap; }
.cd-app .cd-toast.cd-show{ transform:translateX(-50%) translateY(0); }

.cd-app .cd-spacer{ flex:1; }