/* TTB Countdown — clean, dark, no‑animation styles (flatpickr‑ready)
   Paste this entire file over your current assets/style.css
*/

/* Base */
.ttb-countdown-root, .ttb-countdown-root * { box-sizing: border-box; }
.ttb-countdown-root button, .ttb-countdown-root input { font: inherit; }

:root{
  --ttb-accent:#00d1b2;
  --ttb-bg:#0c1117;
  --ttb-panel:#0f1722;
  --ttb-edge:#1b2635;
  --ttb-text:#e8f0ff;
  --ttb-muted:#9fb1c7;
  --ttb-shadow:rgba(0,0,0,.35);
}

.ttb-countdown-root{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--ttb-text);
}

/* Config form */
.ttb-cd-config{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
  align-items:start;            /* top-align fields */
  background:linear-gradient(180deg, var(--ttb-panel), #0b0f14);
  border:1px solid var(--ttb-edge);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 28px var(--ttb-shadow);
}

.ttb-cd-field{ display:flex; flex-direction:column; gap:6px; }
.ttb-cd-field label{ display:block; font-size:.9rem; color:var(--ttb-muted); }

/* Inputs (native or flatpickr-controlled) */
.ttb-cd-field input,
.ttb-cd-field .flatpickr-input{
  width:100%;
  height:44px;                    /* consistent control height */
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #223046;
  background:#0e1520;
  color:var(--ttb-text);
  outline:none;
}
.ttb-cd-field input::placeholder,
.ttb-cd-field .flatpickr-input::placeholder{ color:var(--ttb-muted); }
.ttb-cd-field input:focus,
.ttb-cd-field .flatpickr-input:focus{ border-color:var(--ttb-accent); box-shadow:0 0 0 3px rgba(0,209,178,.15); }

.ttb-cd-help{ font-size:.8rem; color:var(--ttb-muted); min-height:.95rem; }

/* Start button */
.ttb-cd-btn{ border:none; cursor:pointer; background:var(--ttb-accent); color:#052824; font-weight:800; padding:12px 16px; border-radius:12px; box-shadow:0 8px 22px rgba(0,209,178,.28); }
.ttb-cd-btn:hover{ filter:brightness(.95) }
.ttb-cd-btn:active{ transform:translateY(1px) }

/* Center the Start button in the grid's cross‑axis */
#ttb-cd-start{ align-self:center; }

/* Live area */
.hidden{ display:none !important }
.ttb-cd-live{ margin-top:16px }

/* Board */
.ttb-cd-board{ background:var(--ttb-bg); border:1px solid var(--ttb-edge); border-radius:20px; padding:clamp(10px,2vw,18px); box-shadow:0 22px 44px var(--ttb-shadow); }
.ttb-cd-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,2vw,16px); align-items:stretch; }

.ttb-unit{ display:flex; flex-direction:column; gap:8px; align-items:center }
.ttb-label{ color:var(--ttb-muted); font-size:clamp(.8rem,1vw,1rem) }

/* One number block per unit */
.ttb-flip-group{ display:flex; justify-content:center }
.ttb-num{
  display:flex; align-items:center; justify-content:center;
  width:clamp(82px,10vw,120px); height:clamp(72px,11vw,128px);
  border-radius:14px; box-shadow:0 10px 24px var(--ttb-shadow);
  background:linear-gradient(180deg,#121a26,#0b131c);
  border:1px solid #172233; color:var(--ttb-text);
  font-weight:900; font-variant-numeric:tabular-nums; line-height:1;
  font-size:clamp(1.8rem,5vw,3rem);
}

/* Read-only link field (above actions) */
.ttb-cd-linkwrap{ margin-top:12px }
.ttb-cd-linkfield{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #223046;
  background:#0e1520; color:var(--ttb-text); outline:none; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:.95rem;
}
.ttb-cd-linkfield[readonly]{ opacity:1; cursor:text }

/* Actions */
.ttb-cd-actions{ display:flex; align-items:center; gap:12px; margin-top:12px }
.ttb-cd-link{ color:var(--ttb-accent); text-decoration:none; padding:8px 10px; border-radius:10px; border:1px dashed rgba(0,209,178,.4) }
.ttb-cd-link:hover{ background:rgba(0,209,178,.08) }
.ttb-cd-toast{ min-height:1em; color:var(--ttb-muted); font-size:.95rem }

/* Flatpickr (dark theme) */
.flatpickr-calendar{ background:var(--ttb-panel); border:1px solid #1b2635; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:99999; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year{ color:var(--ttb-text); }
.flatpickr-weekday{ color:var(--ttb-muted); }
.flatpickr-day{ color:var(--ttb-text); border-radius:10px; }
.flatpickr-day.today{ border-color:var(--ttb-accent); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{ background:var(--ttb-accent); color:#052824; }
.flatpickr-time input,
.flatpickr-time .numInputWrapper span,
.flatpickr-am-pm{ color:var(--ttb-text); }

/* Responsive */
@media (max-width:700px){
  .ttb-cd-config{ grid-template-columns:1fr }
  #ttb-cd-start{ align-self:stretch }
  .ttb-cd-row{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}