:root { --ink:#17382f; --muted:#6d7b76; --paper:#f4f1e8; --card:#fffdf7; --lime:#d7f05b; --orange:#ff7451; --line:#deddd4; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"Noto Sans JP",system-ui,sans-serif; }
.shell { width:min(1120px,calc(100% - 32px)); margin:auto; padding:30px 0 48px; }
.topbar,.hero,.panel-title,footer { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.account-actions { display:flex; align-items:center; gap:12px; }
h1,h2,p { margin:0; } h1 { font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.04em; } h2 { font-size:1.2rem; }
.eyebrow { font-size:.68rem; font-weight:800; letter-spacing:.16em; color:var(--muted); margin-bottom:6px; }
.status { display:flex; gap:8px; align-items:center; font-size:.78rem; color:var(--muted); }
.status span { width:8px; height:8px; border-radius:50%; background:#6fbf73; box-shadow:0 0 0 4px #ddecda; }
.hero { margin:28px 0 18px; min-height:230px; padding:36px; border-radius:28px; background:var(--ink); color:white; overflow:hidden; position:relative; }
.hero::after { content:""; position:absolute; width:280px; height:280px; border:60px solid var(--lime); border-radius:50%; right:-90px; bottom:-170px; opacity:.95; }
.date { color:#c4d2cc; font-size:.86rem; margin-bottom:12px; } .hero h2 { font-size:clamp(1.8rem,5vw,3.4rem); max-width:650px; }
.hero-copy { margin-top:12px; color:#c4d2cc; }
.condition { z-index:1; flex:0 0 auto; background:white; color:var(--ink); border-radius:999px; padding:10px 14px; font-weight:800; }
.condition-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--orange); margin-right:7px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.metric,.panel { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px; }
.metric p,.metric small { color:var(--muted); }.metric div { display:flex; align-items:baseline; gap:6px; margin:10px 0; }
.metric strong { font-size:clamp(2rem,5vw,3.1rem); letter-spacing:-.06em; }.metric span { font-weight:700; }
.metric.accent { background:var(--lime); border-color:var(--lime); }
.grid { display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-top:14px; }
.panel-title > span { padding:7px 10px; background:#edeee9; border-radius:99px; font-size:.72rem; color:var(--muted); }
.chart-wrap { height:230px; margin-top:24px; } canvas { width:100%; height:100%; }
.goal-panel { display:flex; flex-direction:column; align-items:center; }.goal-panel .panel-title { align-self:stretch; }
.goal-ring { margin:20px auto 14px; width:154px; height:154px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--orange) 0%,#e8e6dc 0); position:relative; }
.goal-ring::before { content:""; position:absolute; width:116px; height:116px; border-radius:50%; background:var(--card); }
.goal-ring div { z-index:1; }.goal-ring strong { font-size:2.2rem; }.goal-ring span { font-weight:700; }
.goal-panel > p { color:var(--muted); font-size:.88rem; }
.note { margin-top:14px; border-left:6px solid var(--orange); }.note > p:last-child { color:var(--muted); margin-top:9px; line-height:1.7; }
footer { color:var(--muted); font-size:.78rem; padding:28px 4px 0; }
button { font:inherit; color:var(--ink); background:transparent; border:1px solid #bdc2bb; border-radius:999px; padding:9px 14px; cursor:pointer; }
button:hover { background:var(--card); } button:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }
.login-button { background:var(--ink); border-color:var(--ink); color:white; font-weight:750; }
.login-button:hover { background:#285044; }
@media (max-width:720px) { .shell{width:min(100% - 20px,600px);padding-top:18px}.hero{min-height:250px;padding:26px;align-items:flex-start;flex-direction:column}.hero::after{width:220px;height:220px;right:-105px;bottom:-130px}.metrics{grid-template-columns:1fr 1fr}.metric.accent{grid-column:1/-1}.grid{grid-template-columns:1fr}.chart-wrap{height:190px}.condition{font-size:.82rem} }
@media (max-width:540px) { .topbar{align-items:flex-start}.account-actions{flex-direction:column;align-items:flex-end}.status{max-width:130px;text-align:right}.login-button{padding:8px 11px} }
@media (max-width:410px) { .metrics{grid-template-columns:1fr}.metric.accent{grid-column:auto} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }