@charset "UTF-8";
.cd-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.cd-controls .tool-field { min-width: 150px; }
.cd-controls .tool-field.grow { flex: 1; min-width: 200px; }
.cd-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cd-stage { position: relative; border-radius: var(--tool-radius); overflow: hidden; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 30px; user-select: none; }
.cd-stage:fullscreen { border-radius: 0; }
.cd-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 18px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.cd-timer { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.cd-num { font-weight: 800; line-height: 1; text-shadow: 0 3px 12px rgba(0,0,0,0.45); font-variant-numeric: tabular-nums; }
.cd-lbl { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; opacity: 0.85; margin-top: 6px; }
.cd-done { font-size: 2rem; font-weight: 800; text-shadow: 0 3px 12px rgba(0,0,0,0.45); }
.cd-text { position: absolute; cursor: move; padding: 4px 8px; white-space: nowrap; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.cd-text.sel { outline: 2px dashed rgba(255,255,255,0.8); border-radius: 4px; }
.cd-textbar { display: none; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 14px 0; padding: 12px; background: var(--alt-content-bg-color); border: 1px solid var(--border-color); border-radius: var(--tool-radius); }
.cd-textbar.show { display: flex; }
.cd-textbar .tool-field { min-width: 90px; }
.cd-share { margin-top: 14px; }
#cdShareUrl { font-family: 'Courier New', monospace; font-size: 0.82rem; width: 100%; box-sizing: border-box; }
.cd-about p { margin: 0 0 12px; }
/* Background designs */
.bg-midnight { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }
.bg-sunset { background: linear-gradient(135deg, #ff512f, #dd2476); }
.bg-ocean { background: linear-gradient(135deg, #2193b0, #6dd5ed); }
.bg-forest { background: linear-gradient(135deg, #134e5e, #71b280); }
.bg-aurora { background: linear-gradient(135deg, #4776e6, #8e54e9); }
.bg-ember { background: linear-gradient(135deg, #f12711, #f5af19); }
.bg-grape { background: linear-gradient(135deg, #654ea3, #eaafc8); }
.bg-slate { background: linear-gradient(135deg, #232526, #414345); }
.bg-candy { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: #4a2b3a; }
.bg-mono { background: #111827; }
@media (max-width: 600px) { .cd-timer { gap: 10px; } .cd-unit { min-width: 64px; } }