:root{--accent:#007bff;--muted:#f3f4f6}
    body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;margin:0;background:#fafafa;color:#111}
    .calendar{max-width:420px;margin:0 auto;background:#fff;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.08);overflow:hidden}
    .cal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee}
    .cal-header .controls{display:flex;gap:8px}
    button{appearance:none;border:0;background:transparent;padding:6px 10px;border-radius:6px;cursor:pointer;font-weight:600}
    button:hover{background:var(--muted)}
    .month-title{font-size:16px;font-weight:700}
    .weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:10px 12px;background:#fafafa;border-bottom:1px solid #eee}
    .weekday{font-size:12px;text-align:center;color:#666}
    .days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:12px}
    .day{height:56px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6px;cursor:pointer}
    .day .num{margin-top:4px;font-weight:600}
    .muted{color:#b0afaf}
    .today{border:2px solid var(--accent)}
    .selected{background:linear-gradient(90deg, rgba(0,123,255,0.12), rgba(0,123,255,0.06));border:1px solid rgba(0,123,255,0.14)}
    .other-month{opacity:0.38}
    .legend{padding:10px 16px;font-size:13px;color:#444;border-top:1px solid #eee}
    .events{margin-top:6px;font-size:11px;color:var(--accent)}
    @media (max-width:480px){.day{height:48px}}