:root {
  color-scheme: dark;
  --accent: #63e6b1;
  --ink: #f8f4e9;
  --muted: #a9b2b8;
  --surface: rgba(18, 24, 28, 0.88);
  --line: rgba(255, 255, 255, 0.12);
  background: #071014;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34rem),
    linear-gradient(145deg, #071014, #10191d 58%, #05090b);
}
body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.2;
  background-image: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.04) 23px 24px);
}
#app { width: min(960px, 100%); margin: auto; padding: 4rem 1.25rem 2rem; }
.hero { animation: reveal .65s ease-out both; padding: 1rem 0 2.5rem; }
.eyebrow { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; }
h1 { max-width: 760px; margin: .4rem 0 .7rem; font-size: clamp(3rem, 10vw, 6.6rem); letter-spacing: -.065em; line-height: .88; }
.hero p { max-width: 650px; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
main { display: grid; gap: 1.2rem; }
.panel, .result-panel {
  position: relative;
  overflow: hidden;
  animation: reveal .65s ease-out both;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}
.result-panel { border-top: 4px solid var(--accent); }
h2 { margin: 0 0 1rem; font-size: 1.65rem; }
.status, .empty, small, time { color: var(--muted); }
.entry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; align-content: start; gap: .45rem; }
.field:has(textarea), .field:has(input[type=file]), .entry-form > button { grid-column: 1 / -1; }
.field-label { font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
input, textarea, select, button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: #0b1216;
  font: inherit;
}
input, textarea, select { min-height: 3.25rem; padding: .82rem 1rem; }
textarea { resize: vertical; line-height: 1.5; }
button { min-height: 3.35rem; padding: .8rem 1.1rem; border: 0; color: #061014; background: var(--accent); font-weight: 900; cursor: pointer; }
button:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:disabled { opacity: .5; cursor: wait; }
.secondary, .danger { color: var(--ink); border: 1px solid var(--line); background: #182227; }
.danger { color: #ffaaa4; }
.compact { width: auto; min-height: 2.35rem; padding: .45rem .8rem; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.metric { display: grid; gap: .3rem; border: 1px solid var(--line); border-radius: 18px; padding: 1rem; background: rgba(0,0,0,.18); }
.metric span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.metric strong { color: var(--accent); font-family: Georgia, serif; font-size: 1.45rem; }
.timer { margin-top: 1rem; color: var(--accent); font-family: Georgia, serif; font-size: clamp(3rem, 12vw, 6rem); text-align: center; }
.records { display: grid; gap: .7rem; }
.record { border-bottom: 1px solid var(--line); padding: .8rem 0 1.2rem; }
.record-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.record p { color: var(--muted); }
.record-actions, .tools { display: flex; flex-wrap: wrap; gap: .6rem; }
.tools { margin-top: 1rem; }
.tools button { flex: 1 1 200px; }
footer { padding: 2rem .5rem; color: var(--muted); text-align: center; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 620px) {
  #app { padding-top: 2rem; }
  .entry-form { grid-template-columns: 1fr; }
  .field { grid-column: 1; }
  .record-heading { align-items: flex-start; flex-direction: column; gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}