:root {
  color-scheme: dark;
  --bg: #080b12;
  --panel: rgba(17, 24, 39, .92);
  --panel-strong: #111827;
  --text: #fff7ed;
  --muted: #a9b4c7;
  --line: rgba(255,255,255,.12);
  --orange: #fb923c;
  --orange-strong: #f97316;
  --green: #34d399;
  --red: #fb7185;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(251,146,60,.30), transparent 30rem),
    radial-gradient(circle at 95% 18%, rgba(52,211,153,.14), transparent 24rem),
    linear-gradient(180deg, #0b1020, var(--bg));
  color: var(--text);
}

button, input, textarea { font: inherit; }
.shell {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 10px max(28px, env(safe-area-inset-bottom));
}
.card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(10,15,26,.94));
  box-shadow: var(--shadow);
  padding: clamp(16px, 4.5vw, 24px);
  margin: 10px 0;
}
.hero { min-height: 0; display: grid; align-content: start; }
.eyebrow {
  margin: 0 0 8px;
  color: #fdba74;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
}
h1 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(2.35rem, 10vw, 4.2rem);
  line-height: .9;
  letter-spacing: -.07em;
}
.lede {
  color: #d5deed;
  font-size: clamp(.98rem, 3.5vw, 1.18rem);
  margin: 12px 0 0;
}
.status-pill {
  justify-self: start;
  margin-top: 14px;
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(251,113,133,.13);
  border: 1px solid rgba(251,113,133,.35);
  color: #fecdd3;
  font-weight: 900;
}
.status-pill.done {
  background: rgba(52,211,153,.12);
  border-color: rgba(52,211,153,.35);
  color: #bbf7d0;
}
.entry-card { position: sticky; top: 8px; z-index: 2; overflow: visible; }
.big-label {
  display: block;
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 800;
}
.input-wrap {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 2px solid rgba(251,146,60,.55);
  border-radius: 24px;
  padding: 6px 16px;
  background: #070b13;
}
.input-wrap:focus-within { border-color: var(--orange); box-shadow: 0 0 0 6px rgba(251,146,60,.12); }
.input-wrap input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: white;
  background: transparent;
  font-size: clamp(3.5rem, 18vw, 6.4rem);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.04em;
  padding-right: .08em;
  text-align: right;
}
.input-wrap span {
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  color: #fed7aa;
  font-weight: 950;
}
.input-wrap::before,
.input-wrap::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: auto 10% 12px auto;
  z-index: 3;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(0) scale(.55);
}
.input-wrap::before {
  width: min(24vw, 112px);
  height: min(24vw, 112px);
  background:
    radial-gradient(circle at 45% 70%, rgba(251,146,60,.95), transparent 34%),
    radial-gradient(circle at 60% 35%, rgba(254,215,170,.9), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(234,88,12,.45), transparent 62%);
  filter: blur(.2px);
}
.input-wrap::after {
  width: min(46vw, 220px);
  height: min(46vw, 220px);
  background:
    radial-gradient(ellipse at 30% 68%, rgba(241,245,249,.58), transparent 32%),
    radial-gradient(ellipse at 62% 44%, rgba(203,213,225,.46), transparent 30%),
    radial-gradient(ellipse at 74% 24%, rgba(148,163,184,.34), transparent 28%),
    radial-gradient(ellipse at 46% 48%, rgba(71,85,105,.38), transparent 62%);
  filter: blur(6px);
  mix-blend-mode: screen;
}
.input-wrap.is-burning {
  animation: burnPulse 1100ms ease-out both;
}
.input-wrap.is-burning::before {
  animation: emberPop 900ms ease-out both;
}
.input-wrap.is-burning::after {
  animation: smokeRise 1100ms ease-out both;
}
.input-wrap.is-burning input {
  animation: digitToast 1100ms ease-out both;
}
.smoke-stack {
  pointer-events: none;
  position: absolute;
  right: 18px;
  top: -92px;
  width: min(72vw, 320px);
  height: 260px;
  z-index: 12;
  opacity: 0;
  overflow: visible;
}
.smoke-stack i {
  position: absolute;
  bottom: 0;
  display: block;
  width: 148px;
  height: 148px;
  border-radius: 48% 52% 55% 45%;
  background: rgba(226,232,240,.72);
  box-shadow:
    -34px -18px 0 18px rgba(255,255,255,.58),
    38px -12px 0 12px rgba(203,213,225,.52),
    8px 28px 0 18px rgba(148,163,184,.36);
  filter: blur(3px);
  mix-blend-mode: screen;
  transform: translateY(90px) scale(.28) rotate(-8deg);
}
.smoke-stack i:nth-child(1) { right: 4px; }
.smoke-stack i:nth-child(2) { right: 82px; width: 176px; height: 176px; animation-delay: 80ms; }
.smoke-stack i:nth-child(3) { right: 148px; width: 132px; height: 132px; animation-delay: 150ms; }
.entry-card.is-burning .smoke-stack {
  opacity: 1;
}
.entry-card.is-burning .smoke-stack i {
  animation: smokeColumn 1100ms ease-out both;
}
.submit {
  width: 100%;
  min-height: 68px;
  margin-top: 12px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #fb923c, #ea580c);
  color: #1b0b02;
  font-size: clamp(1.45rem, 5.8vw, 2.25rem);
  font-weight: 1000;
  letter-spacing: -.04em;
  box-shadow: 0 18px 50px rgba(249,115,22,.35);
}
.submit:active { transform: translateY(2px) scale(.99); }
.note-input {
  display: block;
  width: 100%;
  min-height: 54px;
  max-height: 86px;
  margin-top: 10px;
  border: 1px solid rgba(251,146,60,.28);
  border-radius: 18px;
  padding: 13px 14px;
  color: var(--text);
  background: rgba(8,13,23,.82);
  resize: vertical;
  line-height: 1.25;
  font-size: 1rem;
  font-weight: 750;
}
.note-input::placeholder { color: #94a3b8; }
.note-input:focus {
  outline: 0;
  border-color: rgba(251,146,60,.72);
  box-shadow: 0 0 0 4px rgba(251,146,60,.10);
}
.details {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
}
.details summary { cursor: pointer; font-weight: 900; color: #fed7aa; }
.details label { display: block; margin: 14px 0 6px; color: var(--muted); font-weight: 800; }
.details input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 16px;
  color: var(--text);
  background: #080d17;
}
.message { min-height: 1.5em; margin: 12px 2px 0; color: #bbf7d0; font-weight: 800; }
.message.error { color: #fecdd3; }
.summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.summary strong { display: block; font-size: clamp(1.45rem, 5vw, 2.2rem); line-height: 1.05; }
.tiny {
  display: block;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 900;
  margin-bottom: 6px;
}
.history-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}
h2 { margin: 0; font-size: clamp(1.8rem, 8vw, 3.2rem); letter-spacing: -.06em; line-height: .95; }
.ghost {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  padding: 10px 12px;
  font-weight: 800;
}
.history { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.history-item {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(8,13,23,.82);
  padding: 16px;
}
.history-item strong { display: block; font-size: 1.55rem; line-height: 1; }
.history-item span, .history-item time { color: var(--muted); font-weight: 750; }
.history-item p { margin: 8px 0 0; color: #d6deeb; }
.empty { color: var(--muted); font-size: 1.1rem; }
[hidden] { display: none !important; }

@keyframes burnPulse {
  0% { border-color: rgba(251,146,60,.55); box-shadow: none; }
  28% { border-color: rgba(254,215,170,.96); box-shadow: 0 0 0 7px rgba(251,146,60,.16), 0 0 36px rgba(249,115,22,.38); }
  100% { border-color: rgba(251,146,60,.55); box-shadow: none; }
}

@keyframes emberPop {
  0% { opacity: 0; transform: translateY(12px) scale(.35) rotate(-8deg); }
  24% { opacity: 1; transform: translateY(-18px) scale(1.08) rotate(7deg); }
  100% { opacity: 0; transform: translateY(-92px) scale(.48) rotate(24deg); }
}

@keyframes smokeRise {
  0% { opacity: 0; transform: translateY(18px) translateX(0) scale(.32) rotate(-5deg); }
  12% { opacity: .95; transform: translateY(-48px) translateX(-4px) scale(.9) rotate(2deg); }
  58% { opacity: .78; transform: translateY(-148px) translateX(-30px) scale(1.45) rotate(9deg); }
  100% { opacity: 0; transform: translateY(-220px) translateX(-58px) scale(2.05) rotate(18deg); }
}

@keyframes digitToast {
  0% { color: #fff; text-shadow: none; }
  25% { color: #fed7aa; text-shadow: 0 0 18px rgba(251,146,60,.7); }
  100% { color: #fff; text-shadow: none; }
}

@keyframes smokeColumn {
  0% { opacity: 0; transform: translateY(118px) translateX(20px) scale(.18) rotate(-10deg); }
  16% { opacity: .96; transform: translateY(32px) translateX(2px) scale(.72) rotate(2deg); }
  55% { opacity: .88; transform: translateY(-72px) translateX(-34px) scale(1.08) rotate(12deg); }
  100% { opacity: 0; transform: translateY(-184px) translateX(-84px) scale(1.62) rotate(24deg); }
}

@media (prefers-reduced-motion: reduce) {
  .input-wrap.is-burning,
  .input-wrap.is-burning::before,
  .input-wrap.is-burning::after,
  .input-wrap.is-burning input,
  .entry-card.is-burning .smoke-stack i {
    animation-duration: 1ms;
  }
}

@media (min-width: 680px) {
  .summary { grid-template-columns: .8fr 1.2fr; }
}