:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; background: #0d0d10; color: #f7f7f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #352947 0, transparent 38%), #0d0d10; }
main { width: min(100%, 680px); margin: auto; padding: max(28px, env(safe-area-inset-top)) 18px max(32px, env(safe-area-inset-bottom)); }
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
h1 { margin: 2px 0 0; font-size: 34px; letter-spacing: -1.2px; }
.eyebrow { margin: 0; color: #a891cb; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }
button, input { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
.quiet { width: 44px; height: 44px; border-radius: 50%; background: #242329; font-size: 24px; }
.date-card { display: flex; justify-content: space-between; padding: 14px 16px; margin-bottom: 16px; border: 1px solid #34323b; border-radius: 14px; background: #19191e; color: #aaa8b0; }
.date-card strong { color: #fff; }
#message { min-height: 24px; color: #d7c0ff; padding: 0 3px 8px; }
.child-card { margin-bottom: 16px; padding: 20px; border: 1px solid #37353f; border-radius: 22px; background: rgba(29, 29, 35, .96); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; }
h2 { font-size: 25px; margin: 0; }
.status { color: #a9a7af; margin: 5px 0 0; }
.badge { padding: 7px 10px; border-radius: 999px; background: #36323c; font-size: 12px; font-weight: 700; }
.badge[data-kind="scheduled"] { background: #41345a; color: #e2d1ff; }
.badge[data-kind="confirmed"] { background: #153d2b; color: #a9f0c9; }
.badge[data-kind="failed"] { background: #4a2727; color: #ffc1c1; }
.stepper { display: grid; grid-template-columns: 72px 1fr 72px; gap: 10px; align-items: stretch; margin: 20px 0 14px; }
.stepper button { min-height: 64px; border-radius: 16px; background: #302e36; font-weight: 700; font-size: 18px; }
.stepper label { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #494651; border-radius: 16px; background: #141419; }
.minutes { width: 100%; padding: 4px; border: 0; outline: 0; background: transparent; color: white; text-align: center; font-size: 28px; font-weight: 750; }
.stepper label span { color: #918f98; font-size: 12px; }
.reason-label { display: block; color: #aaa8b0; font-size: 12px; }
.reason { display: block; width: 100%; margin-top: 6px; padding: 13px; border: 1px solid #403e47; border-radius: 12px; outline: 0; background: #141419; color: #fff; }
.save { width: 100%; min-height: 52px; margin-top: 14px; border-radius: 15px; background: #8c5bce; font-weight: 750; font-size: 17px; }
.save:disabled { opacity: .55; }
.details { min-height: 18px; margin: 12px 2px 0; color: #888690; font-size: 12px; line-height: 1.4; }
.footnote { color: #77747f; text-align: center; font-size: 12px; line-height: 1.45; padding: 4px 18px; }
@media (max-width: 390px) { .child-card { padding: 17px; } .stepper { grid-template-columns: 66px 1fr 66px; } }