:root{font-family:Inter,system-ui,sans-serif;color:#17202a;background:#f6f7f9}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#f6f7f9}
button{font:inherit}
.shell{max-width:520px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom))}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
h1,h2,p{margin:0}
h1{font-size:28px;line-height:1.05}
h2{font-size:18px}
small,span{color:#6f7782}
.card{background:#fff;border:1px solid #e8eaee;border-radius:18px;box-shadow:0 4px 14px rgba(20,28,38,.04)}
.icon{border:0;background:#fff;border-radius:50%;width:42px;height:42px}
.health{display:flex;justify-content:space-between;align-items:center;padding:16px;margin-bottom:12px}
.health div{display:flex;flex-direction:column;gap:4px}
.health b{font-size:12px;padding:7px 10px;border-radius:999px;background:#eef8f1}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.summary-grid article{padding:14px;display:flex;flex-direction:column;gap:6px}
.summary-grid strong{font-size:20px}
.section-head{display:flex;align-items:end;justify-content:space-between;margin:6px 2px 10px}
.section-head div{display:flex;flex-direction:column;gap:3px}
.primary{border:0;border-radius:12px;padding:9px 13px;background:#17202a;color:#fff;font-weight:700}
.appointments{display:grid;gap:9px}
.appointment{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;padding:13px}
.appointment time{font-weight:800}
.appointment div{display:flex;flex-direction:column;gap:3px}
.appointment em{font-style:normal;font-size:12px;color:#555d66}
.appointment .paid{font-weight:700}
.radar{margin-top:18px;padding:16px}
.radar-line{display:flex;justify-content:space-between;margin:8px 0}
.progress{height:8px;border-radius:99px;background:#eef0f3;overflow:hidden}
.progress i{display:block;height:100%;background:currentColor;border-radius:99px}
.radar p{margin-top:9px;color:#6f7782;font-size:12px;line-height:1.45}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(520px,100%);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #e8eaee;backdrop-filter:blur(12px)}
.bottom-nav button{border:0;background:transparent;padding:10px 3px;color:#737b85;font-size:12px}
.bottom-nav .active{color:#17202a;font-weight:800}
@media (max-width:360px){.summary-grid{grid-template-columns:1fr}.appointment{grid-template-columns:52px 1fr}.appointment em{grid-column:2}}
@media (min-width:700px){.shell{padding-top:28px}.bottom-nav{border-radius:18px 18px 0 0}}

dialog{width:min(440px,calc(100% - 32px));border:0;border-radius:20px;padding:0;box-shadow:0 18px 70px rgba(20,28,38,.22)}
dialog::backdrop{background:rgba(10,15,20,.42);backdrop-filter:blur(2px)}
dialog form{display:grid;gap:14px;padding:20px}
dialog label{display:grid;gap:6px;font-size:13px;font-weight:700}
dialog input{width:100%;border:1px solid #dfe3e8;border-radius:12px;padding:12px;font:inherit;background:#fff;color:#17202a}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.dialog-actions button{border:1px solid #e1e4e8;border-radius:12px;padding:10px 14px;background:#fff}
.status-btn{border:0;border-radius:999px;padding:7px 9px;background:#f2f3f5;color:#555d66;font-size:12px;white-space:nowrap}
.status-btn.paid{background:#eef8f1;font-weight:800}