:root{--primary:#5b4ef5;--secondary:#8b7fd4;--text:#333;--bg:#f5f5f5;--border:#ddd;--today:#667eea;--event:#764ba2}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px}
.container{background:white;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:40px;max-width:900px;margin:0 auto}
h1{color:var(--primary);text-align:center;margin-bottom:30px;font-size:2rem;display:flex;align-items:center;justify-content:center;gap:10px}
.controls{display:flex;gap:15px;margin-bottom:30px;flex-wrap:wrap;justify-content:center}
input,select,button{padding:12px 24px;border:2px solid var(--border);border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}
input{background:white;color:var(--text);border-color:var(--primary);outline:none;flex:1;min-width:200px}
button{background:var(--primary);color:white;border:none;font-weight:700}
button:hover{background:var(--secondary);transform:translateY(-2px);box-shadow:0 5px 15px rgba(91,78,245,.3)}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:30px 0}
.day-header{background:var(--primary);color:white;padding:10px;text-align:center;border-radius:8px;font-weight:700}
.day{border:2px solid var(--border);border-radius:8px;padding:10px;min-height:100px;background:var(--bg);cursor:pointer;transition:all .3s ease}
.day:hover{border-color:var(--primary);transform:translateY(-2px)}
.day.today{background:var(--today);color:white;font-weight:700}
.day.other-month{opacity:.5;background:#f9f9f9}
.day-number{font-weight:700;margin-bottom:5px;font-size:1.1rem}
.events{font-size:.85rem}
.event-item{background:var(--event);color:white;padding:4px 8px;border-radius:4px;margin:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-input{margin-top:20px;padding:20px;border:2px solid var(--border);border-radius:12px;background:var(--bg)}
.event-input label{display:block;margin-bottom:10px;font-weight:600}
.event-input input,.event-input textarea{width:100%;padding:10px;margin-bottom:10px;border:2px solid var(--border);border-radius:8px;font-size:1rem}
@media(max-width:768px){.calendar{grid-template-columns:repeat(7,1fr);gap:5px}
.day{min-height:80px;padding:8px}
.day-number{font-size:.9rem}
.event-item{font-size:.75rem}}