.day-square{width:100%;aspect-ratio:1/1;background:#fff;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;box-shadow:0 2px 4px #0000001a}.day-square:hover{transform:scale(1.05);box-shadow:0 4px 8px #00000026}.day-square:active{transform:scale(.98)}.day-name{font-size:.75rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.day-number{font-size:1.5rem;font-weight:700;color:#333;line-height:1}.day-month{font-size:.75rem;color:#999;margin-top:4px}.day-square.weekend .day-name,.day-square.weekend .day-number{color:#dc2626}.day-square.month-boundary:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#e5e7eb,transparent)}.week-number{font-size:.65rem;color:#9ca3af;padding:0 6px;font-weight:600}.day-square.today{border:2px solid #3b82f6;box-shadow:0 0 0 2px #3b82f633}.day-square.today .day-number{color:#2563eb}.day-square.selected{background:#3b82f6;border:none}.day-square.selected .day-name,.day-square.selected .day-number,.day-square.selected .day-month{color:#fff}.event-dots{position:absolute;bottom:8px;display:flex;gap:2px}.event-dot{width:6px;height:6px;border-radius:50%;background-color:#3b82f6}.week-boundary{height:1px;background:#e5e7eb;margin:4px 0}.week-number{font-size:.7rem;color:#999;text-align:center;padding:4px 0;margin:4px 0}.days-list{width:130px;height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;background:#f9fafb;border-radius:12px;box-shadow:0 1px 3px #0000001a}.days-list-content{display:flex;flex-direction:column;align-items:center;padding:8px 4px;gap:4px}.days-list::-webkit-scrollbar{width:4px}.days-list::-webkit-scrollbar-track{background:transparent}.days-list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}.days-list::-webkit-scrollbar-thumb:hover{background:#9ca3af}.loading-indicator{padding:12px;text-align:center;color:#6b7280;font-size:.75rem}.scroll-indicator{position:absolute;left:50%;transform:translate(-50%);padding:4px 8px;background:#000000b3;color:#fff;border-radius:4px;font-size:.7rem;pointer-events:none}.scroll-indicator.top{top:8px}.scroll-indicator.bottom{bottom:8px}.week-separator{width:100%;height:2px;background:#e5e7eb;display:flex;align-items:center;justify-content:center;margin:4px 0}.week-separator .week-number{font-size:.65rem;color:#9ca3af;padding:0 6px;font-weight:600}.week-separator.month-boundary{height:3px;background:#d1d5db;margin:8px 0}.week-separator.month-boundary .week-number{color:#4b5563;font-weight:700}.scroll-observer{height:1px;width:100%}.desktop-layout{display:grid;grid-template-columns:80px 200px 1fr;height:calc(100vh - 40px);gap:1rem;padding:20px;max-width:1400px;margin:0 auto;box-sizing:border-box}.year-panel{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden;display:flex;flex-direction:column}.year-panel-header{padding:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center;font-weight:600}.days-panel{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden;display:flex;flex-direction:column}.days-panel-header{padding:12px 16px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-weight:600;color:#374151;font-size:.9rem}.days-list{flex:1;overflow-y:auto;padding:8px}.detail-panel{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){.desktop-layout{grid-template-columns:60px 150px 1fr;gap:.5rem}.year-panel{width:60px}}@media (max-width: 768px){.desktop-layout{display:none}}.mobile-list-view,.mobile-detail-view{height:100vh;display:flex;flex-direction:column;background:#f5f5f5;overflow:hidden}.mobile-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px;box-shadow:0 2px 4px #0000001a;z-index:10}.mobile-header h1{margin:0;font-size:1.2rem;font-weight:600}.mobile-content{display:flex;flex:1;overflow:hidden;gap:1rem;padding:1rem}.mobile-year-minimap{width:60px;flex-shrink:0;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.mobile-detail-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px;display:flex;align-items:center;gap:1rem;box-shadow:0 2px 4px #0000001a;z-index:10}.back-button{background:#fff3;color:#fff;border:none;padding:8px 12px;border-radius:6px;font-size:1rem;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s}.back-button:hover{background:#ffffff4d}.detail-date-display{font-size:1.1rem;font-weight:500;flex:1;text-align:center}.mobile-detail-content{flex:1;overflow-y:auto;padding:1rem}.event-form-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}@media (max-width: 480px){.mobile-content{padding:.5rem;gap:.5rem}.mobile-year-minimap{width:50px}.mobile-header h1{font-size:1rem}}.mobile-detail-view .mobile-content{display:none}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:#f5f5f5;color:#333}#root{min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:20px}.app h1{margin-bottom:1rem;color:#1f2937}.app p{margin-bottom:1.5rem;color:#6b7280}.calendar-container{width:100%;max-width:200px;height:500px;position:relative}.selected-date{margin-top:20px;padding:16px;background:#f3f4f6;border-radius:8px;display:inline-block}.selected-date p{margin:0;color:#374151}@media (max-width: 768px){.app{padding:10px}.calendar-container{max-width:100%;height:400px}}.detail-panel{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.detail-panel-header{background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;color:#fff}.detail-panel-header h2{margin:0;font-size:1.5rem}.detail-panel-content{padding:16px;min-height:200px}.detail-panel-footer{padding:16px 20px;border-top:1px solid #e5e7eb;background-color:#f9fafb}.detail-panel-footer .btn-add{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:1rem;cursor:pointer;transition:transform .1s,box-shadow .2s;width:100%;font-weight:600}.detail-panel-footer .btn-add:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.detail-panel-footer .btn-add:active{transform:translateY(0)}.loading-spinner{display:flex;align-items:center;justify-content:center;height:100%;color:#6b7280}.event-list{display:flex;flex-direction:column;gap:12px}.event-list-empty{text-align:center;padding:40px 20px;color:#6b7280;font-size:1.1rem;border:2px dashed #e5e7eb;border-radius:8px;background-color:#f9fafb}.event-item{display:flex;align-items:center;padding:12px 16px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;transition:box-shadow .2s,border-color .2s}.event-item:hover{box-shadow:0 2px 8px #00000014;border-color:#d1d5db}.event-item-content{flex:1;display:flex;align-items:center;gap:12px}.event-color-swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0}.event-details{flex:1;min-width:0}.event-time{font-size:.85rem;color:#6b7280;margin-bottom:2px}.event-title{font-weight:600;color:#1f2937;margin-bottom:4px}.event-description{font-size:.85rem;color:#4b5563;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-actions{display:flex;gap:8px}.btn-edit,.btn-delete{padding:6px 12px;border:none;border-radius:4px;font-size:.85rem;cursor:pointer;transition:background-color .2s}.btn-edit{background:#e5e7eb;color:#374151}.btn-edit:hover{background:#d1d5db}.btn-delete{background:#fee2e2;color:#991b1b}.btn-delete:hover{background:#fecaca}.color-picker{display:flex;flex-direction:column;gap:12px}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.color-swatch{width:40px;height:40px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .2s;padding:0}.color-swatch:hover{transform:scale(1.05)}.color-swatch.selected{border-color:#1f2937;box-shadow:0 0 0 2px #0000001a}.color-picker-custom{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid #e5e7eb}.color-input{flex:1;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:.9rem}.color-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px #667eea33}.event-form{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;overflow:hidden}.event-form-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.event-form-header h3{margin:0;font-size:1.2rem}.btn-close{background:#fff3;color:#fff;border:none;width:32px;height:32px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.btn-close:hover{background:#ffffff4d}.event-form-body{padding:20px;display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group-inline{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-group label{font-size:.85rem;font-weight:600;color:#374151}.form-group input[type=text],.form-group input[type=date],.form-group input[type=time],.form-group input[type=color],.form-group textarea{padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px #667eea33}.form-group textarea{resize:vertical;min-height:80px}.color-input[type=color]{padding:2px;cursor:pointer;width:100%;height:42px}.checkbox-wrapper{display:flex;align-items:center;gap:8px}.checkbox-wrapper input[type=checkbox]{width:18px;height:18px;cursor:pointer}.error{border-color:#ef4444!important}.error-message{font-size:.8rem;color:#ef4444}.event-form-footer{display:flex;gap:12px;padding:16px 20px;background:#f9fafb;border-top:1px solid #e5e7eb}.btn-cancel,.btn-save{flex:1;padding:12px 20px;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s}.btn-cancel{background:#e5e7eb;color:#374151}.btn-cancel:hover{background:#d1d5db}.btn-save{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-save:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.btn-save:active{transform:translateY(0)}@media (max-width: 768px){.event-form-header h3{font-size:1rem}.form-group-inline{grid-template-columns:1fr}.color-grid{grid-template-columns:repeat(4,1fr)}.detail-panel-footer .btn-add{font-size:.9rem}}@media (max-width: 480px){.color-grid{grid-template-columns:repeat(4,1fr)}.event-item{flex-direction:column;align-items:flex-start}.event-item-content{width:100%}.event-actions{width:100%;justify-content:flex-end;margin-top:12px}.btn-edit,.btn-delete{padding:8px 16px}}@keyframes scrollHighlight{0%{background-color:#667eea80;transform:scale(1.1)}to{background-color:transparent;transform:scale(1)}}.scroll-highlight{animation:scrollHighlight .5s ease-out}.loading-spinner{display:flex;align-items:center;justify-content:center;height:100vh;color:#6b7280;font-size:1.2rem}.error-banner{background:#fee2e2;border:1px solid #fecaca;color:#991b1b;padding:16px;border-radius:8px;margin:1rem auto;max-width:600px;text-align:center}.error-banner button{margin-top:12px;padding:8px 16px;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer}