@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root { --ink:#16233a; --muted:#6d788b; --paper:#f6f7f4; --line:#e6e8e4; --lime:#cce941; --coral:#ff806b; --blue:#5069e8; --navy:#17243d; --mint:#e7f5d8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(1160px,calc(100% - 36px)); margin:auto; padding:56px 0 72px; }
.hero { display:flex; justify-content:space-between; align-items:end; margin:0 0 34px; }
.eyebrow { letter-spacing:.14em; font:600 11px 'DM Mono',monospace; color:#778396; margin:0 0 7px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:4px; font:700 clamp(44px,7vw,72px)/.98 'Playfair Display',serif; letter-spacing:-.05em; } h1 em { color:var(--coral); } h2 { font-size:21px; letter-spacing:-.03em; margin:0; }.sub { color:var(--muted); margin:0; }
.streak { display:flex; align-items:center; gap:10px; padding:14px 19px; background:var(--navy); color:white; border-radius:14px; }.streak span { font-size:25px; }.streak strong,.streak small { display:block; }.streak strong { font-size:23px; line-height:1; }.streak small { color:#aab4c7; margin-top:4px; font:10px 'DM Mono',monospace; letter-spacing:.1em; }
.dashboard { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:15px; }.dashboard article,.panel,.chart-card { background:white; border:1px solid var(--line); border-radius:18px; }.level-card { padding:23px; }.card-label,.stat-card span { font:11px 'DM Mono',monospace; color:#748094; letter-spacing:.1em; }.level-row { display:flex; justify-content:space-between; align-items:end; margin:11px 0 12px; }.level-row strong { font-size:31px; }.level-row span { color:var(--muted); font-size:13px; }.progress { height:10px; border-radius:10px; background:#edf0eb; overflow:hidden; }.progress i { display:block; height:100%; width:0; background:var(--lime); border-radius:inherit; transition:width .35s; }.level-card p { margin:8px 0 0; font-size:12px; color:var(--muted); }.stat-card { padding:23px; }.stat-card strong { display:block; font-size:31px; margin:9px 0 4px; }.stat-card strong small { font-size:13px; margin-left:3px; }.stat-card p { font-size:12px; margin:0; color:var(--muted); }.stat-card.accent { background:var(--mint); border-color:transparent; }
.chart-card { padding:24px; margin:15px 0; }.section-head { display:flex; align-items:start; justify-content:space-between; gap:16px; }.section-head > span { color:var(--muted); font-size:12px; padding-top:6px; }.chart { height:148px; display:flex; align-items:end; gap:9px; padding-top:20px; border-bottom:1px solid #e8ece7; }.bar-wrap { flex:1; min-width:12px; height:100%; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:6px; }.bar { width:min(40px,90%); border-radius:6px 6px 0 0; background:var(--blue); min-height:3px; transition:height .35s; }.bar-wrap small { font:9px 'DM Mono',monospace; color:#8490a1; }.chart-empty { color:var(--muted); width:100%; text-align:center; align-self:center; font-size:14px; }
.content-grid { display:grid; grid-template-columns:1.65fr 1fr; gap:15px; }.panel { padding:26px; }.pill { background:#fff0ed; color:#d45543; font:11px 'DM Mono',monospace; padding:6px 8px; border-radius:20px; } form { margin-top:21px; } label { display:block; color:#647084; font-size:12px; font-weight:600; } input,select { display:block; width:100%; color:var(--ink); background:#fafbf9; border:1px solid #e2e6df; outline:none; border-radius:9px; padding:11px; margin:6px 0 14px; transition:border .2s; } input:focus,select:focus { border-color:var(--blue); }.form-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } form button,.suggestion-controls > button { border:0; border-radius:10px; background:var(--navy); color:white; padding:13px 16px; width:100%; font-weight:600; transition:transform .15s,background .15s; } form button:hover,.suggestion-controls > button:hover { transform:translateY(-1px); background:#273a5e; } form button span { margin-left:7px; color:var(--lime); }.coach-selector { border-top:1px solid var(--line); margin-top:21px; padding-top:17px; }.coach-selector > span { display:block; color:#778396; font:11px 'DM Mono',monospace; letter-spacing:.08em; margin-bottom:8px; }.coach { border:1px solid #e4e8e1; color:#5f6b7e; background:#fff; border-radius:7px; padding:7px 9px; margin-right:5px; font-size:12px; }.coach.active { color:var(--ink); background:var(--mint); border-color:#cce4a6; }.coach-panel { background:var(--navy); color:white; border:0; }.coach-panel .eyebrow { color:#aeb8c9; }.coach-panel h2 { font:600 30px 'Playfair Display',serif; }.coach-message { margin:23px 0; }.quote { font:50px/0 'Playfair Display',serif; color:var(--lime); }.coach-message p { margin:13px 0 0; color:#e8edf5; line-height:1.75; font-size:14px; white-space:pre-line; }.coach-note { color:#aeb8c9; border-top:1px solid #3b4960; padding-top:15px; font-size:12px; line-height:1.5; margin-bottom:0; }
.suggestion { margin-top:15px; }.suggestion-controls { display:grid; grid-template-columns:1fr 1fr 1.25fr; align-items:end; gap:12px; margin-top:18px; }.suggestion-controls label { margin:0; }.suggestion-controls select { margin-bottom:0; }.suggestion-controls > button { height:42px; padding:0 12px; font-size:13px; }.suggestion-result { white-space:pre-line; color:#59667a; background:#f5f7f3; border-radius:10px; padding:15px; font-size:14px; line-height:1.7; margin-top:16px; }.history { margin-top:15px; }.text-button { border:0; background:none; color:#d95d50; font-size:12px; }.record-list { margin-top:17px; }.record { display:grid; grid-template-columns:82px 1fr auto 25px; align-items:center; border-top:1px solid var(--line); padding:13px 2px; gap:12px; }.record-date,.record-detail { color:#758194; font-size:12px; }.record-exercise { display:block; }.record-detail { margin-top:3px; display:block; }.record-volume { color:var(--blue); font-size:14px; }.delete-record { border:0; background:#f4f5f3; color:#8590a0; border-radius:50%; width:23px; height:23px; }.empty { color:var(--muted); font-size:14px; }
@media (max-width:720px) { .app-shell { width:min(100% - 24px,520px); padding-top:30px; }.hero { align-items:start; gap:18px; }.streak { padding:10px; }.dashboard,.content-grid,.suggestion-controls { grid-template-columns:1fr; }.streak small { display:none; }.form-row { grid-template-columns:1fr; gap:0; }.panel,.chart-card { padding:20px; }.record { grid-template-columns:65px 1fr 25px; }.record-volume { display:none; } }