:root{--primary:#2563eb;--primary-dark:#1d4ed8;--primary-light:#dbeafe;--success:#10b981;--success-light:#d1fae5;--warning:#f59e0b;--warning-light:#fef3c7;--danger:#ef4444;--danger-light:#fee2e2;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--transition-fast:.15s ease;--transition-base:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--gray-100);color:var(--gray-900);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}svg{flex-shrink:0;width:20px;height:20px}.app{flex-direction:column;min-height:100vh;display:flex}.main{max-width:1200px;padding:var(--space-6);flex:1;width:100%;margin:0 auto}.header{border-bottom:1px solid var(--gray-200);z-index:100;background:#fff;position:sticky;top:0}.header-content{max-width:1200px;padding:var(--space-4)var(--space-6);justify-content:space-between;align-items:center;gap:var(--space-6);margin:0 auto;display:flex}.logo{align-items:center;gap:var(--space-3);display:flex}.logo-icon{width:36px;height:36px;color:var(--primary)}.logo-text{flex-direction:column;display:flex}.logo-title{color:var(--gray-900);font-size:1.125rem;font-weight:700;line-height:1.2}.logo-subtitle{color:var(--gray-500);font-size:.75rem;line-height:1.2}.nav{align-items:center;gap:var(--space-1);display:flex}.nav-link{padding:var(--space-2)var(--space-4);border-radius:var(--radius-md);color:var(--gray-600);transition:all var(--transition-fast);font-size:.875rem;font-weight:500;text-decoration:none}.nav-link:hover{background:var(--gray-100);color:var(--gray-900)}.nav-link.active{background:var(--primary-light);color:var(--primary)}.hidden{display:none!important}.date-nav-header{justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);margin-bottom:var(--space-6);background:#fff;display:flex}.date-btn{border-radius:var(--radius-md);cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);background:#fff;border:none;justify-content:center;align-items:center;display:flex}.date-btn:hover{background:var(--gray-50);box-shadow:var(--shadow-sm)}.date-btn svg{width:18px;height:18px;color:var(--gray-600)}.date-month{color:var(--gray-500);letter-spacing:.05em;font-size:.75rem;font-weight:600}.date-day{color:var(--gray-900);font-size:1.75rem;font-weight:700;line-height:1}.date-weekday{color:var(--gray-500);font-size:.75rem;font-weight:500}.sessions-grid{gap:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}@media (max-width:640px){.sessions-grid{grid-template-columns:1fr}}.session-box{border-radius:var(--radius-xl);box-shadow:var(--shadow-md);transition:all var(--transition-base);background:#fff;overflow:hidden}.session-box:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.session-box.locked{opacity:.7}.session-box-header{padding:var(--space-4)var(--space-5);background:linear-gradient(135deg,var(--primary)0%,var(--primary-dark)100%);color:#fff}.session-box.locked .session-box-header{background:linear-gradient(135deg,var(--gray-400)0%,var(--gray-500)100%)}.session-box.full .session-box-header{background:linear-gradient(135deg,var(--danger)0%,#dc2626 100%)}.session-box.booking-closed .session-box-header{background:linear-gradient(135deg,var(--warning)0%,#d97706 100%)}.session-box-title{margin-bottom:var(--space-1);font-size:1.125rem;font-weight:700}.session-box-status{opacity:.9;align-items:center;gap:var(--space-2);font-size:.875rem;display:flex}.session-box-status svg{flex-shrink:0;width:16px;height:16px}.session-progress{padding:var(--space-3)var(--space-5);background:var(--gray-50);border-bottom:1px solid var(--gray-100)}.progress-bar{background:var(--gray-200);border-radius:var(--radius-full);height:8px;margin-bottom:var(--space-2);overflow:hidden}.progress-fill{background:var(--success);border-radius:var(--radius-full);height:100%;transition:width .3s}.session-box.full .progress-fill{background:var(--danger)}.progress-text{color:var(--gray-500);text-align:center;font-size:.75rem}.session-teams{padding:var(--space-4)var(--space-5);min-height:100px;max-height:200px;overflow-y:auto}.teams-list{gap:var(--space-2);flex-wrap:wrap;display:flex}.team-tag{padding:var(--space-1)var(--space-3);background:var(--primary-light);color:var(--primary-dark);border-radius:var(--radius-full);align-items:center;font-size:.8125rem;font-weight:500;display:inline-flex}.no-teams{color:var(--gray-400);text-align:center;padding:var(--space-4);font-size:.875rem}.session-box-footer{padding:var(--space-4)var(--space-5);border-top:1px solid var(--gray-100)}.book-session-btn{width:100%;padding:var(--space-3);background:var(--primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:var(--space-2);border:none;font-size:.875rem;font-weight:600;display:flex}.book-session-btn:hover:not(:disabled){background:var(--primary-dark)}.book-session-btn:disabled{background:var(--gray-300);cursor:not-allowed}.section-header{margin-bottom:var(--space-6)}.section-title{color:var(--gray-900);margin-bottom:var(--space-1);font-size:1.5rem;font-weight:700}.section-desc{color:var(--gray-500);font-size:.875rem}.tool-filters{gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.filter-btn{padding:var(--space-2)var(--space-4);border-radius:var(--radius-full);border:1px solid var(--gray-200);color:var(--gray-600);cursor:pointer;transition:all var(--transition-fast);background:#fff;font-size:.875rem;font-weight:500}.filter-btn:hover{border-color:var(--gray-300);background:var(--gray-50)}.filter-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.tools-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));display:grid}.tool-card{border-radius:var(--radius-lg);padding:var(--space-5);border:1px solid var(--gray-200);transition:all var(--transition-base);background:#fff}.tool-card:hover{box-shadow:var(--shadow-md);border-color:var(--gray-300)}.tool-card.unavailable{opacity:.6}.tool-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:flex-start;display:flex}.tool-name{color:var(--gray-900);font-size:1rem;font-weight:600}.tool-category{padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);background:var(--gray-100);color:var(--gray-600);font-size:.75rem}.tool-desc{color:var(--gray-500);margin-bottom:var(--space-4);font-size:.875rem}.tool-availability{justify-content:space-between;align-items:center;display:flex}.tool-avail-bar{background:var(--gray-100);border-radius:var(--radius-full);height:6px;margin-right:var(--space-3);flex:1;overflow:hidden}.tool-avail-fill{background:var(--success);border-radius:var(--radius-full);height:100%;transition:width var(--transition-base)}.tool-avail-fill.low{background:var(--warning)}.tool-avail-fill.none{background:var(--danger)}.tool-avail-text{color:var(--gray-600);white-space:nowrap;font-size:.875rem;font-weight:500}.tool-actions{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--gray-100)}.tool-reserve-btn{width:100%;padding:var(--space-2)var(--space-4);border-radius:var(--radius-md);background:var(--primary);color:#fff;cursor:pointer;transition:all var(--transition-fast);border:none;font-size:.875rem;font-weight:500}.tool-reserve-btn:hover{background:var(--primary-dark)}.tool-reserve-btn:disabled{background:var(--gray-200);color:var(--gray-400);cursor:not-allowed}.modal{z-index:200;padding:var(--space-4);opacity:0;visibility:hidden;transition:all var(--transition-base);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal.active{opacity:1;visibility:visible}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;position:absolute;inset:0}.modal-content{border-radius:var(--radius-xl);width:100%;max-width:400px;max-height:90vh;box-shadow:var(--shadow-lg);transition:transform var(--transition-base);background:#fff;position:relative;overflow-y:auto;transform:translateY(20px)}.modal.active .modal-content{transform:translateY(0)}.modal-header{padding:var(--space-5)var(--space-6);border-bottom:1px solid var(--gray-100);justify-content:space-between;align-items:center;display:flex}.modal-title{color:var(--gray-900);font-size:1.125rem;font-weight:600}.modal-close{background:var(--gray-100);border-radius:var(--radius-md);cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;display:flex}.modal-close:hover{background:var(--gray-200)}.modal-body{padding:var(--space-6)}.form-group{margin-bottom:var(--space-5)}.form-label{color:var(--gray-700);margin-bottom:var(--space-2);font-size:.875rem;font-weight:500;display:block}.form-input{width:100%;padding:var(--space-3)var(--space-4);border:1px solid var(--gray-200);border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:.875rem}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}.form-actions{gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--gray-100);justify-content:flex-end;display:flex}.btn{padding:var(--space-3)var(--space-5);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:var(--space-2);white-space:nowrap;border:none;font-size:.875rem;font-weight:500;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--gray-100);color:var(--gray-700)}.btn-secondary:hover{background:var(--gray-200)}.toast-container{bottom:var(--space-6);right:var(--space-6);z-index:300;gap:var(--space-3);flex-direction:column;display:flex;position:fixed}.toast{padding:var(--space-4)var(--space-5);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);align-items:center;gap:var(--space-3);background:#fff;min-width:280px;animation:.3s slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast.success .toast-icon{color:var(--success)}.toast.error .toast-icon{color:var(--danger)}.toast.warning .toast-icon{color:var(--warning)}.toast-icon svg{width:20px;height:20px}.toast-message{color:var(--gray-700);flex:1;font-size:.875rem}.loading{padding:var(--space-12);justify-content:center;align-items:center;display:flex}.spinner{border:3px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-container{background:var(--gray-50);min-height:100vh;padding:var(--space-4);justify-content:center;align-items:center;display:flex}.login-card{border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:400px;box-shadow:var(--shadow-lg);border:1px solid var(--gray-200);background:#fff}.login-header{text-align:center;margin-bottom:var(--space-8)}.login-logo{background:var(--primary);border-radius:var(--radius-lg);width:64px;height:64px;margin:0 auto var(--space-4);justify-content:center;align-items:center;display:flex}.login-logo svg{stroke:#fff;width:32px;height:32px}.login-title{color:var(--gray-900);margin-bottom:var(--space-2);font-size:1.5rem;font-weight:700}.login-subtitle{color:var(--gray-500);font-size:.875rem}.login-form{gap:var(--space-5);flex-direction:column;display:flex}.login-btn{background:var(--primary);color:#fff;padding:var(--space-3)var(--space-4);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;font-size:1rem;font-weight:600}.login-btn:hover{background:var(--primary-dark)}.login-btn:disabled{opacity:.7;cursor:not-allowed}.login-error{background:var(--danger-light);color:var(--danger);padding:var(--space-3)var(--space-4);border-radius:var(--radius-md);font-size:.875rem;display:none}.login-error.show{display:block}.back-link{text-align:center;margin-top:var(--space-6)}.back-link a{color:var(--gray-500);font-size:.875rem;text-decoration:none}.back-link a:hover{color:var(--primary)}.session-checkboxes{gap:var(--space-2);flex-direction:column;display:flex}.session-checkbox{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);border:1px solid var(--gray-200);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);display:flex}.session-checkbox:hover{background:var(--gray-50);border-color:var(--gray-300)}.session-checkbox.unavailable{opacity:.5;cursor:not-allowed}.session-checkbox.locked{background:var(--warning-light);border-color:var(--warning)}.session-checkbox input[type=radio]{width:18px;height:18px;accent-color:var(--primary)}.checkbox-label{color:var(--gray-700);font-size:.875rem}.tool-info{margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--gray-100)}.tool-info h4{color:var(--gray-900);margin-bottom:var(--space-2);font-size:1.125rem;font-weight:600}.tool-info p{color:var(--gray-500);margin-bottom:var(--space-3);font-size:.875rem}.tool-meta{gap:var(--space-4);display:flex}.tool-avail{color:var(--success);font-size:.875rem;font-weight:500}.empty-state{text-align:center;padding:var(--space-12);color:var(--gray-400)}.empty-state svg{width:48px;height:48px;margin-bottom:var(--space-4);opacity:.5}.empty-state h3{color:var(--gray-600);margin-bottom:var(--space-2);font-size:1.125rem;font-weight:600}.empty-state p{font-size:.875rem}.date-display{padding:var(--space-2)var(--space-4);flex-direction:column;align-items:center;display:flex}@media (max-width:768px){.header-content{gap:var(--space-4);flex-direction:column}.nav{flex-wrap:wrap;justify-content:center;width:100%}.tools-grid{grid-template-columns:1fr}}
