*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f5f5f5;color:#222}.app-root{display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;background:#111827;color:#fff;padding:.75rem 1.5rem}.logo{font-weight:700}.header-right{display:flex;gap:1rem;align-items:center}.app-main{padding:1.5rem;max-width:100%;margin:0 auto;width:100%}.btn{border:none;padding:.4rem .8rem;cursor:pointer;border-radius:4px;background:#e5e7eb}.btn.primary{background:#2563eb;color:#fff}.btn.small{padding:.2rem .4rem;font-size:.8rem}.auth-container{max-width:400px;margin:3rem auto;background:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 4px 12px #0000000f}.auth-form label{display:flex;flex-direction:column;font-size:.9rem;margin-bottom:.8rem}.auth-form input{margin-top:.25rem;padding:.4rem .5rem;border-radius:4px;border:1px solid #d1d5db}.error-text{color:#b91c1c;margin-top:.5rem;font-size:.85rem}.success-text{color:#15803d;margin-top:.5rem;font-size:.85rem}.info-login{margin-top:1rem;font-size:.85rem;color:#4b5563}.page-calendar h1{margin-top:0}.filters{display:flex;gap:1rem;margin-bottom:1rem}.field label{display:flex;flex-direction:column;font-size:.9rem}.field select{margin-top:.25rem;padding:.3rem .4rem}.calendar{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 4px 12px #0000000d}.calendar-header{display:flex;justify-content:space-between;align-items:center}.calendar-month{font-weight:600}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;margin-top:.75rem}.calendar-weekday{font-size:.8rem;text-align:center;font-weight:600;color:#6b7280}.calendar-day{height:90px;border-radius:6px;background:#f9fafb;border:1px solid #e5e7eb;padding:.25rem;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;cursor:pointer;position:relative;overflow:hidden}.calendar-day.empty{background:transparent;border:none;cursor:default}.calendar-day .day-number{font-size:.8rem}.calendar-day.has-event{background:#dbeafe;border-color:#60a5fa;cursor:default}.event-dot{width:8px;height:8px;border-radius:999px;background:#1d4ed8;position:absolute;bottom:6px;left:6px}.calendar-legend{margin-top:.75rem;font-size:.8rem;display:flex;gap:1rem}.legend-item{display:flex;align-items:center;gap:.3rem}.legend-dot{width:10px;height:10px;border-radius:999px;background:#1d4ed8}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a66;display:flex;justify-content:center;align-items:center;z-index:50}.modal{background:#fff;border-radius:8px;max-width:450px;width:100%;padding:1rem}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-body{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem}.modal-body label{font-size:.9rem;display:flex;flex-direction:column}.modal-body input,.modal-body textarea,.modal-body select{margin-top:.25rem;padding:.3rem .4rem;border-radius:4px;border:1px solid #d1d5db}.modal-body textarea{min-height:60px}.modal-footer{margin-top:.5rem;display:flex;justify-content:flex-end;gap:.5rem}.event-card{margin-top:.2rem;width:100%;border-radius:6px;border-width:2px;border-style:solid;padding:.2rem .3rem;text-align:left;font-size:.7rem;overflow:hidden;max-height:40px}.event-card-champ{font-weight:600;margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-card-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.legend-color-box{width:14px;height:10px;border-radius:4px;background:#2563eb}.champ-preview{margin-top:.5rem;font-size:.85rem;display:flex;align-items:center;gap:.5rem}.champ-badge{padding:.2rem .5rem;border-radius:999px;color:#fff;font-size:.8rem;font-weight:600}.mode-toggle{display:flex;gap:1rem;margin-top:.25rem;font-size:.85rem}.mode-toggle label{display:flex;align-items:center;gap:.25rem}.date-range{display:flex;gap:.5rem}.date-range label{flex:1}.page-calendar{display:flex;flex-direction:column;align-items:center}.calendar{width:90%;max-width:100%;background:#fff;border-radius:8px;padding:1rem;box-shadow:0 4px 12px #0000000d}.month-select,.year-select{padding:6px 8px;font-size:14px;border-radius:6px;border:1px solid #ccc;margin:0 4px}.calendar-header{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:10px}@media(max-width:768px){.calendar{width:100%}}