:root{
  --blue:#2196F3; --green:#4CAF50; --yellow:#FFD700; --purple:#9C27B0;
  --text:#111; --muted:#666; --bg:#fff; --accent:#111;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;margin:0;background:var(--bg);color:var(--text)}
.theme-d1{--accent: var(--blue)}
.theme-d2{--accent: var(--green)}
.theme-d3{--accent: var(--yellow)}
.theme-extra{--accent: var(--purple)}

header#top-banner{background:#fff;color:#111;padding:16px 14px 12px;position:sticky;top:0;z-index:100;border-bottom:1px solid #eaeaea}
header#top-banner .phase-title{font-weight:800;font-size:20px;text-align:center;margin-bottom:10px}
#phase-progress-container{width:100%;height:10px;background:#eee;border-radius:6px;overflow:hidden;margin:0 auto 10px}
#phase-progress-bar{height:100%;width:0;background:var(--green);transition:width .3s ease}
#month-header{display:flex;align-items:center;justify-content:center;gap:10px}
#month-title{font-weight:800;font-size:16px}
#month-header button{background:#f0f0f0;border:1px solid #ddd;border-radius:10px;width:36px;height:32px;cursor:pointer;font-size:18px}

main{padding:12px 12px 96px;max-width:1000px;margin:0 auto;}
.row{display:flex;gap:8px;align-items:center}
.row.right{justify-content:flex-end}
.row.between{justify-content:space-between}

#calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;touch-action:pan-x}
.day{border-radius:14px;padding:10px;min-height:96px;position:relative;cursor:pointer;text-align:center;overflow:hidden;border:1px solid #e5e5e5;background:#fff}
.day .date-num{font-weight:900;font-size:16px;margin-bottom:2px;letter-spacing:.3px}
.day small{color:#333;font-size:13px;font-weight:700}
.day.day1{background:#e3f2fd;border-color:#90caf9}
.day.day2{background:#e8f5e9;border-color:#a5d6a7}
.day.day3{background:#fffbe6;border-color:#ffe066}
.checkmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;color:#fff;background:rgba(76,175,80,0.85);font-weight:900;pointer-events:none}
.extra-badge-corner{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(156,39,176,0.92);font-weight:900;font-size:18px;cursor:pointer}

.card{background:#fff;border-radius:16px;padding:14px;box-shadow:0 6px 16px rgba(0,0,0,.07);margin:12px 0}
.card.hero{display:flex;align-items:center;justify-content:space-between;border-left:6px solid var(--accent)}
.hero-orm{font-weight:900;font-size:18px}
.hero-sub{color:#555;font-size:14px}
.card-group .group-title{font-size:16px;font-weight:900;margin:8px 2px 6px;color:var(--accent)}
.cards{display:grid;grid-template-columns:1fr;gap:10px}
.exercise-card{border-radius:16px;padding:12px;border:1px solid #e5e5e5;background:#fff;border-left:6px solid var(--accent)}
.exercise-title{font-weight:900;font-size:18px;margin-bottom:4px}
.exercise-rows{font-size:16px;line-height:1.5}
.input-inline{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:16px}
input[type=tel],input[type=date],select,textarea{padding:12px;border:1px solid #ddd;border-radius:12px;width:100%;font-size:16px}

.primary{background:#111;color:#fff;border:none;padding:14px 18px;border-radius:16px;cursor:pointer;font-weight:900}
.themed-btn{background:var(--accent);color:#000;}

nav#bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;color:#888;display:flex;justify-content:space-around;align-items:center;padding:8px 0;border-top:1px solid #eaeaea;z-index:200;height:84px}
nav#bottom-nav .nav-btn{background:none;border:none;color:#666;cursor:pointer;flex:1;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}
nav#bottom-nav .icon{width:28px;height:28px;fill:#333}
nav#bottom-nav .nav-btn.center .icon{width:36px;height:36px}
nav#bottom-nav .nav-btn span{font-size:12px;color:#333}

.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);padding:12px;z-index:1000}
.modal-inner{background:#fff;border-radius:16px;padding:16px;max-width:520px;width:100%}
.toast{position:fixed;left:50%;top:25%;transform:translate(-50%,-50%);background:#111;color:#fff;padding:12px 16px;border-radius:12px;z-index:1500;box-shadow:0 6px 14px rgba(0,0,0,.25);font-weight:800}

#celebration-layer{position:fixed;inset:0;pointer-events:none;z-index:1200}
.confetti{position:absolute;font-size:24px;animation:fall 1200ms ease-out forwards}
@keyframes fall{0%{transform:translateY(-20px) scale(1)}100%{transform:translateY(80vh) scale(0.9);opacity:0}}

.hidden{display:none !important}

.goal-card{border:1px solid #eee;border-radius:14px;padding:12px;margin:8px 0}
.goal-title{font-weight:800}
.goal-meta{color:#666;font-size:13px;margin:4px 0}
.badge{background:#eee;border-radius:999px;padding:2px 8px;margin-left:6px}
.goal-progress{height:10px;background:#eee;border-radius:999px;overflow:hidden;margin:6px 0}
.goal-progress>div{height:100%;background:#4caf50;width:0}
.goal-actions{display:flex;gap:8px;flex-wrap:wrap}