:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17233b; background: #eef4fb; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #dbeafe 0, #eef4fb 38%, #f8fafc 100%); }
.app-shell { width: min(100% - 32px, 680px); margin: 0 auto; padding: 42px 0 28px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow, .result-label { color: #2563eb; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 7px 0 6px; color: #10285b; font-size: clamp(2.3rem, 8vw, 4rem); letter-spacing: -.06em; line-height: .95; }
.hero p { margin: 0; color: #61708d; font-size: 15px; }
.clock { color: #10285b; font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; }
.card, .result-card { border: 1px solid rgba(205, 217, 235, .9); border-radius: 24px; box-shadow: 0 18px 45px rgba(32, 58, 99, .08); }
.card { margin-bottom: 16px; padding: 22px; background: rgba(255,255,255,.82); }
.settings-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.settings-card label { color: #344565; font-size: 14px; font-weight: 750; }
.goal-control { display: flex; align-items: center; gap: 10px; color: #7a89a4; font-size: 12px; }
input { border: 1px solid #d3ddeb; border-radius: 12px; background: #f8fbff; color: #153571; font: inherit; font-weight: 800; outline: none; padding: 12px 13px; transition: .2s; }
input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.section-heading > div { display: flex; gap: 13px; align-items: flex-start; }
.step { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; background: #e8f0ff; color: #2563eb; font-size: 13px; font-weight: 900; }
.step.inverse { background: rgba(255,255,255,.18); color: white; }
h2 { margin: 2px 0 5px; color: #1d3157; font-size: 17px; letter-spacing: -.02em; }
.section-heading p { margin: 0; color: #8591a7; font-size: 13px; }
.ghost-button { border: 0; background: transparent; color: #6c7a94; cursor: pointer; font: inherit; font-size: 12px; padding: 5px 0; }
.ghost-button:hover { color: #2563eb; }
.punch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.punch-field { display: grid; gap: 8px; color: #6d7d99; font-size: 12px; font-weight: 700; }
.punch-field input { width: 100%; }
.result-card { position: relative; overflow: hidden; margin-bottom: 16px; padding: 25px; background: linear-gradient(145deg, #173a84, #1e56b4); color: white; }
.result-card::after { position: absolute; width: 220px; height: 220px; content: ""; right: -80px; top: -100px; border: 34px solid rgba(255,255,255,.06); border-radius: 50%; }
.result-topline { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.result-topline > div { display: flex; gap: 11px; align-items: center; }
.result-label { color: #b9d0ff; }
.status-pill { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 10px; color: #dbeafe; font-size: 11px; }
.status-pill.ready { background: #d4f7e4; border-color: transparent; color: #087443; }
.result-time { position: relative; z-index: 1; margin: 24px 0 5px; font-size: clamp(4rem, 16vw, 7rem); font-weight: 850; letter-spacing: -.09em; line-height: .95; }
.result-card p { position: relative; z-index: 1; min-height: 21px; margin: 0 0 24px; color: #c8d9f6; font-size: 14px; }
.alarm-control { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; margin-bottom: 22px; }
.alarm-button { border: 0; border-radius: 12px; background: #fef08a; color: #26345a; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; padding: 11px 14px; transition: .2s; }
.alarm-button:hover:not(:disabled) { background: #fde047; transform: translateY(-1px); }
.alarm-button:disabled { cursor: not-allowed; opacity: .5; }
.alarm-control span { color: #b2c8ec; font-size: 11px; }
.summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; }
.summary-row div { display: grid; gap: 5px; }
.summary-row span { color: #b2c8ec; font-size: 11px; }
.summary-row strong { color: white; font-size: 19px; }
footer { color: #8b98ad; text-align: center; font-size: 11px; }
@media (max-width: 560px) { .app-shell { padding-top: 28px; } .hero { align-items: flex-start; flex-direction: column; gap: 11px; } .clock { align-self: flex-end; margin-top: -45px; } .settings-card { align-items: flex-start; flex-direction: column; } .goal-control { width: 100%; justify-content: space-between; } .punch-grid { grid-template-columns: 1fr; } .punch-field { grid-template-columns: 1fr 1fr; align-items: center; } .punch-field input { justify-self: end; width: 145px; } }