*{box-sizing:border-box}.hidden{display:none}html,body{height:100%}
:root{--bg:#0f0e13;--panel:#171625;--card:#1d1a2b;--muted:#9d96c7;--text:#eceaff;--border:#2f2a44;--accent:#b062ff;--accent2:#ff88dc}
body{margin:0;background:linear-gradient(180deg,#0f0e13,#131024 60%,#0f0e13);color:var(--text);font-family:Inter,system-ui,Arial}
.top{position:sticky;top:0;background:rgba(19,16,36,.8);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);padding:10px 12px;z-index:9}
.brand{display:flex;gap:10px;align-items:center}.peach{font-size:22px}h1{font-size:18px;margin:0}.sub{font-size:12px;color:#cdbbff;margin-left:8px;background:rgba(176,98,255,.15);padding:2px 8px;border-radius:999px}
.greet{font-size:13px;color:var(--muted);margin-top:2px}
nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.tab-btn{background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}
.tab-btn.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(176,98,255,.25) inset}
main{padding:14px;max-width:1100px;margin:0 auto}h2{margin:6px 0 10px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}.callout{background:rgba(176,98,255,.12);border:1px dashed var(--accent);border-radius:12px;padding:10px;margin:10px 0}
.day-header{display:flex;justify-content:space-between;align-items:center}.mode select{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:6px 8px}
.ex{display:flex;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;align-items:center}
.ex img{width:96px;height:72px;border-radius:10px;border:1px solid var(--border);object-fit:cover;background:#0f0e13}
.ex .t{font-weight:700}.ex .m{font-size:12px;color:var(--muted)}.ex .btn{margin-left:auto}
.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border:1px solid #6f3fd6;color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}button{background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer}
.weeks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.week{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px}.week h3{margin:0 0 6px}.week ul{margin:0;padding-left:16px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;border:1px solid var(--border);border-radius:12px;padding:8px;background:var(--panel)}
.cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;color:var(--muted);font-size:12px}
.cell.done{background:linear-gradient(180deg,rgba(176,98,255,.25),rgba(255,136,220,.18));color:#fff;border-color:#7d52ff;box-shadow:0 0 0 1px rgba(176,98,255,.25) inset}
.cell.done::after{content:'🔥';margin-left:4px}
.tip{background:var(--card);border:1px dashed var(--accent);border-radius:12px;padding:12px;color:#fff}.ghost{background:var(--panel);border:1px dashed var(--border)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:12px}
.modal.hidden{display:none}.modal-content{background:var(--panel);border:1px solid var(--border);border-radius:14px;max-width:900px;width:100%}.close{position:absolute;margin:8px 0 0 8px}
.modal-body{display:grid;grid-template-columns:320px 1fr;gap:12px;padding:16px}
.modal-media img{width:100%;height:200px;border-radius:12px;border:1px solid var(--border);background:#0f0e13}
.meta{font-size:12px;color:var(--muted);margin:6px 0}.rest{margin-top:10px}.rest-title{font-size:12px;color:var(--muted)}
.circle{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid var(--border);position:relative;margin:8px 0}
.flow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}footer{padding:16px;text-align:center;color:var(--muted)}
@media (max-width:720px){.modal-body{grid-template-columns:1fr}}