@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--color-bg: #0f1117;--color-bg-elevated: #1a1d27;--color-bg-card: #21242f;--color-bg-hover: #282c3a;--color-bg-input: #1a1d27;--color-border: #2d3143;--color-border-light: #383d52;--color-text: #e8eaf0;--color-text-secondary: #8b91a8;--color-text-muted: #5c6278;--color-primary: #47a700;--color-primary-hover: #3d8f00;--color-primary-glow: rgba(71, 167, 0, .15);--color-primary-text: #ffffff;--color-accent: #363181;--color-accent-light: #4e48b0;--color-accent-glow: rgba(54, 49, 129, .2);--color-available: #1a3a2a;--color-available-border: #2d6b47;--color-available-hover: #224a35;--color-own: #1a2d4a;--color-own-border: #3b6cb5;--color-own-text: #7db4f5;--color-booked: #2a2130;--color-booked-border: #5c4470;--color-booked-text: #b89dd6;--color-past: #15161d;--color-past-text: #3a3d4d;--color-danger: #ef4444;--color-danger-hover: #dc2626;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .8125rem;--font-size-base: .875rem;--font-size-lg: 1rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(71, 167, 0, .1);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-bg);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:var(--color-primary-text);font-weight:600}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-glow)}.btn-ghost{background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-ghost:hover:not(:disabled){background:var(--color-bg-hover);color:var(--color-text);border-color:var(--color-border-light)}.btn-danger{background:var(--color-danger);color:#fff;font-weight:600}.btn-danger:hover:not(:disabled){background:var(--color-danger-hover)}.btn-icon{padding:var(--space-sm);background:transparent;color:var(--color-text-secondary);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center}.btn-icon:hover:not(:disabled){background:var(--color-bg-hover);color:var(--color-text)}.btn-icon:disabled{opacity:.3;cursor:not-allowed}.btn-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm)}.btn-loading{display:inline-flex;align-items:center;gap:var(--space-sm)}.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .6s linear infinite}.spinner-lg{width:28px;height:28px;border-width:3px}@keyframes spin{to{transform:rotate(360deg)}}.app-loading{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--color-bg)}.loading-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.loading-logo{font-size:3rem;animation:bounce 1s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.app-layout{min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.header-content{max-width:960px;margin:0 auto;padding:var(--space-md) var(--space-lg);display:flex;align-items:center;justify-content:space-between}.header-brand{display:flex;align-items:center;gap:var(--space-sm)}.header-logo{font-size:1.5rem}.header-title{font-size:var(--font-size-lg);font-weight:700;background:linear-gradient(135deg,var(--color-primary),#7dd43a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-user{display:flex;align-items:center;gap:var(--space-md)}.user-name{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500}.btn-logout{padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-border)}.logout-text{display:none}@media(min-width:640px){.logout-text{display:inline}}.app-main{flex:1;max-width:960px;margin:0 auto;padding:var(--space-lg);width:100%}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-lg);background:radial-gradient(ellipse at 20% 50%,rgba(71,167,0,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(71,167,0,.04) 0%,transparent 50%),var(--color-bg)}.login-form{width:100%;max-width:400px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-3xl) var(--space-2xl);box-shadow:var(--shadow-lg)}.login-logo{text-align:center;margin-bottom:var(--space-2xl)}.login-logo-icon{width:220px;height:120px;object-fit:contain;margin-bottom:var(--space-md)}.login-logo h1{font-size:var(--font-size-2xl);font-weight:700;background:linear-gradient(135deg,var(--color-primary),#7dd43a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-subtitle{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-top:var(--space-xs)}.login-error{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#fca5a5;font-size:var(--font-size-sm);margin-bottom:var(--space-lg)}.error-icon{flex-shrink:0}.form-group{margin-bottom:var(--space-lg)}.form-group label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-xs)}.form-group input{width:100%;padding:var(--space-md) var(--space-lg);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-base);transition:border-color var(--transition-fast)}.form-group input::placeholder{color:var(--color-text-muted)}.form-group input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.form-group input:disabled{opacity:.6}.btn-login{width:100%;padding:var(--space-md) var(--space-lg);font-size:var(--font-size-lg);margin-top:var(--space-sm)}.login-hint{text-align:center;font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-lg)}.login-success{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:#47a7001a;border:1px solid rgba(71,167,0,.3);border-radius:var(--radius-md);color:#7dd43a;font-size:var(--font-size-sm);margin-bottom:var(--space-lg)}.login-switch{text-align:center;margin-top:var(--space-lg)}.btn-link{background:none;border:none;color:var(--color-primary);font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color var(--transition-fast)}.btn-link:hover:not(:disabled){color:var(--color-primary-hover)}.btn-link:disabled{opacity:.5;cursor:not-allowed}.pending-card{width:100%;max-width:440px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-3xl) var(--space-2xl);box-shadow:var(--shadow-lg);text-align:center}.pending-icon{font-size:3rem;margin-bottom:var(--space-lg)}.pending-card h1{font-size:var(--font-size-xl);font-weight:700;margin-bottom:var(--space-lg);background:linear-gradient(135deg,var(--color-primary),#7dd43a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.pending-text{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-md);line-height:1.6}.btn-logout-pending{margin-top:var(--space-xl)}.btn-admin-nav{border-color:var(--color-primary);color:var(--color-primary);font-weight:600}.btn-admin-nav:hover:not(:disabled),.btn-admin-nav.active{background:var(--color-primary-glow);color:var(--color-primary);border-color:var(--color-primary)}.admin-page{max-width:700px;margin:0 auto}.admin-header{margin-bottom:var(--space-xl)}.admin-header h2{font-size:var(--font-size-xl);font-weight:700}.admin-subtitle{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-top:var(--space-xs)}.admin-tabs{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl)}.admin-tab{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.admin-tab:hover{background:var(--color-bg-hover);color:var(--color-text)}.admin-tab.active{background:var(--color-primary-glow);border-color:var(--color-primary);color:var(--color-primary);font-weight:600}.admin-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--color-danger);color:#fff;border-radius:999px;font-size:var(--font-size-xs);font-weight:700}.admin-empty{text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm);padding:var(--space-3xl) 0}.admin-error{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#fca5a5;font-size:var(--font-size-sm);margin-bottom:var(--space-lg)}.admin-user-list{display:flex;flex-direction:column;gap:var(--space-sm)}.admin-user-card{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:background var(--transition-fast);gap:var(--space-md)}.admin-user-card:hover{background:var(--color-bg-hover)}.admin-user-info{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}.admin-user-name{font-weight:600;font-size:var(--font-size-base);display:flex;align-items:center;gap:var(--space-sm)}.admin-role-badge{display:inline-flex;padding:1px 8px;background:var(--color-primary-glow);color:var(--color-primary);font-size:var(--font-size-xs);font-weight:600;border-radius:999px}.admin-user-meta{display:flex;align-items:center;gap:var(--space-md);font-size:var(--font-size-xs);flex-wrap:wrap}.admin-status{font-weight:600}.admin-status.approved{color:var(--color-primary)}.admin-status.pending{color:#fbbf24}.admin-user-date{color:var(--color-text-muted)}.admin-user-actions{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}.btn-delete-user{color:var(--color-danger)!important;border-color:transparent!important}.btn-delete-user:hover:not(:disabled){background:#ef444426!important}.booking-page,.booking-main{display:flex;flex-direction:column;gap:var(--space-lg)}.loading-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-3xl);color:var(--color-text-secondary)}.my-bookings{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.my-bookings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.my-bookings-header h3{font-size:var(--font-size-base);font-weight:600}.counter-badge{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-sm);background:var(--color-primary-glow);color:var(--color-primary);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:600}.counter-badge.full{background:#ef444426;color:#fca5a5}.my-bookings-loading{display:flex;justify-content:center;padding:var(--space-lg)}.my-bookings-empty{color:var(--color-text-muted);font-size:var(--font-size-sm);text-align:center;padding:var(--space-sm) 0}.my-bookings-list{display:flex;flex-direction:column;gap:var(--space-sm)}.my-booking-card{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--color-own);border:1px solid var(--color-own-border);border-radius:var(--radius-md);transition:background var(--transition-fast)}.my-booking-card:hover{background:#1a2d4acc}.my-booking-info{display:flex;align-items:center;gap:var(--space-md);font-size:var(--font-size-sm);flex-wrap:wrap}.my-booking-court{font-weight:600;color:var(--color-own-text)}.my-booking-date{color:var(--color-text-secondary)}.my-booking-time{color:var(--color-text);font-weight:500}.btn-cancel-booking{color:var(--color-danger);border-color:transparent;flex-shrink:0}.btn-cancel-booking:hover:not(:disabled){background:#ef444426;color:var(--color-danger)}.bookings-remaining{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-md);text-align:center}.date-picker{display:flex;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-md) 0}.date-display{display:flex;flex-direction:column;align-items:center;min-width:200px}.date-today-badge{display:inline-block;padding:1px 8px;background:var(--color-primary);color:var(--color-primary-text);font-size:var(--font-size-xs);font-weight:600;border-radius:999px;margin-bottom:var(--space-xs)}.date-tomorrow-badge{display:inline-block;padding:1px 8px;background:var(--color-text-muted);color:var(--color-primary-text);font-size:var(--font-size-xs);font-weight:600;border-radius:999px;margin-bottom:var(--space-xs)}.date-text{font-size:var(--font-size-base);font-weight:600;text-align:center}.date-btn{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--color-border);flex-shrink:0}.court-tabs{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg)}.court-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.court-tab:hover{background:var(--color-bg-hover);color:var(--color-text)}.court-tab.active{background:var(--color-primary-glow);border-color:var(--color-primary);color:var(--color-primary);font-weight:600}.court-tab-icon{font-size:1rem}.court-grids{display:flex;gap:var(--space-lg)}.court-column{flex:1;min-width:0}.court-header{text-align:center;margin-bottom:var(--space-md)}.court-header h3{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-secondary)}@media(max-width:767px){.court-tabs{display:flex}.court-column{display:none}.court-column.active{display:block}.court-header{display:none}}@media(min-width:768px){.court-tabs{display:none}.court-column{display:block}}.time-slot-grid{display:flex;flex-direction:column;gap:2px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;padding:2px}.time-slot{display:flex;align-items:center;padding:var(--space-sm) var(--space-md);min-height:44px;border-radius:var(--radius-sm);transition:all var(--transition-fast);gap:var(--space-sm)}.time-slot[data-span]{min-height:calc(44px * var(--span-rows) + 2px * (var(--span-rows) - 1))}.slot-time{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);min-width:40px;flex-shrink:0;font-variant-numeric:tabular-nums}.slot-available{background:var(--color-available);border:1px solid var(--color-available-border);cursor:pointer}.slot-available:hover:not(.slot-disabled){background:var(--color-available-hover);border-color:var(--color-primary)}.slot-available.slot-disabled{opacity:.5;cursor:not-allowed}.slot-action{display:flex;align-items:center;gap:var(--space-xs);margin-left:auto;padding:var(--space-xs) var(--space-sm);background:transparent;border:1px solid var(--color-available-border);border-radius:var(--radius-sm);color:var(--color-primary);font-family:var(--font-family);font-size:var(--font-size-xs);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.slot-action:hover:not(:disabled){background:var(--color-primary);color:var(--color-primary-text);border-color:var(--color-primary)}.slot-action:disabled{opacity:.4;cursor:not-allowed}.slot-limit{font-size:var(--font-size-xs);color:var(--color-text-muted)}.slot-own{background:var(--color-own);border:1px solid var(--color-own-border)}.slot-booking{display:flex;align-items:center;justify-content:space-between;flex:1;margin-left:var(--space-sm)}.own-booking .booking-label{font-size:var(--font-size-xs);font-weight:600;color:var(--color-own-text)}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:var(--space-xs);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.btn-cancel:hover{background:#ef444433;color:var(--color-danger)}.slot-booked{background:var(--color-booked);border:1px solid var(--color-booked-border)}.other-booking .booking-name{font-size:var(--font-size-xs);font-weight:500;color:var(--color-booked-text)}.slot-past{background:var(--color-past);border:1px solid transparent}.slot-past .slot-time{color:var(--color-past-text)}.slot-past-label{color:var(--color-past-text);margin-left:auto}.slot-blocked{background:#2a1a1a;border:1px solid #6b3030}.slot-blocked .slot-time{color:#ef9a9a}.blocked-booking{display:flex;align-items:center;gap:var(--space-sm);margin-left:auto;color:#ef9a9a}.blocked-label{font-size:var(--font-size-xs);font-weight:500}.admin-section-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-xl);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xs);flex-wrap:wrap}.admin-section-tab{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:transparent;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:var(--font-family);font-size:var(--font-size-xs);font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.admin-section-tab:hover{background:var(--color-bg-hover);color:var(--color-text)}.admin-section-tab.active{background:var(--color-bg-elevated);color:var(--color-primary);font-weight:600;box-shadow:var(--shadow-sm)}.court-block-manager{display:flex;flex-direction:column;gap:var(--space-xl)}.block-form-card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg)}.block-form-title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-lg);font-weight:700;color:var(--color-text)}.block-form-title--danger{color:var(--color-danger)}.block-field{display:flex;flex-direction:column;gap:var(--space-sm)}.block-label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary)}.block-label-sm{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-muted)}.block-select{width:100%;padding:var(--space-md) var(--space-lg);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-base);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b91a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.block-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-glow)}.block-toggle-group{display:flex;gap:var(--space-xs);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-xs)}.block-toggle-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.block-toggle-btn:hover{background:var(--color-bg-hover);color:var(--color-text)}.block-toggle-btn.active{background:var(--color-bg-elevated);color:var(--color-primary);font-weight:600;box-shadow:var(--shadow-sm)}.block-time-range{display:flex;align-items:flex-end;gap:var(--space-md)}.block-time-field{flex:1;display:flex;flex-direction:column;gap:var(--space-xs)}.block-time-sep{color:var(--color-text-muted);font-size:var(--font-size-lg);padding-bottom:var(--space-md)}.block-reason-chips{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.block-reason-chip{padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-secondary);font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.block-reason-chip:hover{background:var(--color-bg-hover);border-color:var(--color-border-light);color:var(--color-text)}.block-reason-chip.active{background:#ef444426;border-color:var(--color-danger);color:var(--color-danger);font-weight:600}.block-reason-custom{border-style:dashed}.block-custom-reason{display:flex;gap:var(--space-sm)}.block-input{flex:1;padding:var(--space-md) var(--space-lg);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-base)}.block-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-glow)}.block-reason-back{padding:var(--space-sm) var(--space-md);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;white-space:nowrap}.block-reason-back:hover{background:var(--color-bg-hover)}.block-error{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#fca5a5;font-size:var(--font-size-sm)}.block-success{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:#47a7001a;border:1px solid rgba(71,167,0,.3);border-radius:var(--radius-md);color:var(--color-primary);font-size:var(--font-size-sm);font-weight:500}.block-submit-btn{width:100%;padding:var(--space-lg);font-size:var(--font-size-base);font-weight:600}.block-list-section{display:flex;flex-direction:column;gap:var(--space-lg);margin-top:var(--space-lg)}.block-list-title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-lg);font-weight:700}.block-list-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:#ef444426;color:var(--color-danger);border-radius:999px;font-size:var(--font-size-xs);font-weight:700}.block-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-3xl);text-align:center;color:var(--color-text-secondary)}.block-empty-icon{color:var(--color-primary);opacity:.5;margin-bottom:var(--space-sm)}.block-empty-sub{font-size:var(--font-size-sm);color:var(--color-text-muted)}.block-list{display:flex;flex-direction:column;gap:var(--space-md)}.block-date-group{display:flex;flex-direction:column;gap:var(--space-sm)}.block-date-header{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);padding:var(--space-xs) 0;border-bottom:1px solid var(--color-border)}.block-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-left:3px solid var(--color-danger);border-radius:var(--radius-md);gap:var(--space-md)}.block-item-info{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}.block-item-details{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.block-item-court{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text)}.block-item-time{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500}.block-item-reason{font-size:var(--font-size-xs);color:var(--color-danger);font-weight:500}.block-item-delete{flex-shrink:0;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.block-item-delete:hover:not(:disabled){background:#ef444426;border-color:var(--color-danger);color:var(--color-danger)}.block-item-delete:disabled{opacity:.5;cursor:not-allowed}.modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--space-lg);z-index:200;animation:fadeIn var(--transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:420px;animation:slideUp var(--transition-base)}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.modal-sm{max-width:340px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl) var(--space-xl) var(--space-md)}.modal-header h2{font-size:var(--font-size-lg);font-weight:700}.modal-close{color:var(--color-text-muted)}.modal-body{padding:var(--space-md) var(--space-xl)}.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-sm);padding:var(--space-md) var(--space-xl) var(--space-xl)}.modal-info{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg);background:var(--color-bg);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.info-row{display:flex;justify-content:space-between;align-items:center}.info-label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.info-value{font-size:var(--font-size-sm);font-weight:600}.duration-select{margin-bottom:var(--space-md)}.duration-label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-md)}.duration-options{display:flex;gap:var(--space-md)}.duration-option{flex:1;cursor:pointer}.duration-option input{position:absolute;opacity:0;pointer-events:none}.duration-box{display:flex;flex-direction:column;align-items:center;padding:var(--space-lg) var(--space-md);background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.duration-option:hover:not(.disabled) .duration-box{border-color:var(--color-border-light);background:var(--color-bg-hover)}@media(hover:none){.duration-option:hover:not(.disabled) .duration-box{border-color:var(--color-border);background:var(--color-bg)}.duration-option.selected:hover .duration-box{border-color:var(--color-primary);background:var(--color-primary-glow)}}.duration-option.selected .duration-box{border-color:var(--color-primary);background:var(--color-primary-glow)}.duration-option.disabled{opacity:.4;cursor:not-allowed}.duration-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text)}.duration-option.selected .duration-value{color:var(--color-primary)}.duration-unit{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-xs)}.duration-note{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-md);font-style:italic}.modal-error{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#fca5a5;font-size:var(--font-size-sm);margin-top:var(--space-md)}.announcement-banners{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg)}.announcement-banner{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);border:1px solid;animation:slideDown var(--transition-base)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.announcement-info{background:#3b82f61a;border-color:#3b82f64d;color:#93bbfd}.announcement-warning{background:#f59e0b1a;border-color:#f59e0b4d;color:#fbbf24}.announcement-success{background:#47a7001a;border-color:#47a7004d;color:var(--color-primary)}.announcement-icon{flex-shrink:0;margin-top:1px}.announcement-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-xs)}.announcement-title{font-size:var(--font-size-sm);font-weight:600}.announcement-message{font-size:var(--font-size-sm);opacity:.85;line-height:1.4}.announcement-dismiss{flex-shrink:0;background:transparent;border:none;color:inherit;opacity:.5;cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-sm);transition:opacity var(--transition-fast)}.announcement-dismiss:hover{opacity:1}.block-textarea{resize:vertical;min-height:72px;font-family:var(--font-family);line-height:1.5}.announcement-admin-item{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--space-lg);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);gap:var(--space-md);transition:opacity var(--transition-fast)}.announcement-admin-item.inactive{opacity:.5}.announcement-admin-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-sm)}.announcement-admin-header{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.announcement-type-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-size-xs);font-weight:600;padding:2px 8px;border-radius:999px;background:var(--color-bg)}.announcement-type-info{color:#93bbfd}.announcement-type-warning{color:#fbbf24}.announcement-type-success{color:var(--color-primary)}.announcement-status-badge{font-size:var(--font-size-xs);font-weight:500;padding:2px 8px;border-radius:999px;background:#ef444426;color:var(--color-danger)}.announcement-status-badge.active{background:#47a70026;color:var(--color-primary)}.announcement-admin-title{font-size:var(--font-size-base);font-weight:600;color:var(--color-text)}.announcement-admin-message{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.4}.announcement-admin-meta{font-size:var(--font-size-xs);color:var(--color-text-muted)}.announcement-admin-actions{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}.stats-dashboard{display:flex;flex-direction:column;gap:var(--space-xl)}.stats-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}.stats-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-xl) var(--space-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:center}.stats-card-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-primary)}.stats-card-label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);margin-top:var(--space-xs)}.stats-card-sub{font-size:var(--font-size-xs);color:var(--color-text-muted)}.stats-section{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl)}.stats-section-title{font-size:var(--font-size-base);font-weight:700;color:var(--color-text);margin-bottom:var(--space-lg)}.stats-courts{display:flex;flex-direction:column;gap:var(--space-lg)}.stats-court-card{display:flex;flex-direction:column;gap:var(--space-sm)}.stats-court-header{display:flex;justify-content:space-between;align-items:center}.stats-court-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text)}.stats-court-pct{font-size:var(--font-size-sm);font-weight:700;color:var(--color-primary)}.stats-bar-track{width:100%;height:8px;background:var(--color-bg);border-radius:999px;overflow:hidden}.stats-bar-sm{height:6px}.stats-bar-fill{height:100%;background:var(--color-primary);border-radius:999px;transition:width var(--transition-slow);min-width:2px}.stats-court-detail{font-size:var(--font-size-xs);color:var(--color-text-muted)}.stats-hours{display:flex;flex-direction:column;gap:var(--space-sm)}.stats-hour-row{display:flex;align-items:center;gap:var(--space-md)}.stats-hour-label{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-secondary);min-width:42px;font-variant-numeric:tabular-nums}.stats-hour-count{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);min-width:24px;text-align:right;font-variant-numeric:tabular-nums}.stats-users{display:flex;flex-direction:column;gap:var(--space-sm)}.stats-user-row{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-bg);border-radius:var(--radius-md)}.stats-user-rank{font-size:var(--font-size-xs);font-weight:700;color:var(--color-primary);min-width:20px;text-align:center}.stats-user-name{flex:1;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text)}.stats-user-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);font-weight:500}.admin-booking-summary{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg);background:var(--color-bg);border-radius:var(--radius-md);border:1px solid var(--color-border);margin-bottom:var(--space-md)}.admin-booking-filter{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-md);color:var(--color-text-muted)}.admin-booking-filter-input{flex:1;background:none;border:none;color:var(--color-text);font-size:var(--font-size-sm);outline:none}.admin-booking-filter-input::placeholder{color:var(--color-text-muted)}.admin-booking-filter-clear{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:2px;display:flex;align-items:center;transition:color var(--transition-fast)}.admin-booking-filter-clear:hover{color:var(--color-text)}.user-picker{position:relative}.user-picker-input-wrap{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.user-picker-input-wrap.focused{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-glow)}.user-picker-search-icon{flex-shrink:0;color:var(--color-text-muted)}.user-picker-input{flex:1;background:none;border:none;color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-base);outline:none;min-width:0}.user-picker-input::placeholder{color:var(--color-text-muted)}.user-picker-input-clear{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:2px;display:flex;align-items:center;transition:color var(--transition-fast);flex-shrink:0}.user-picker-input-clear:hover{color:var(--color-text)}.user-picker-dropdown{position:absolute;top:calc(100% + var(--space-xs));left:0;right:0;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:50;overflow:hidden}.user-picker-list{max-height:220px;overflow-y:auto;padding:var(--space-xs)}.user-picker-list::-webkit-scrollbar{width:6px}.user-picker-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.user-picker-option{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;text-align:left;transition:background var(--transition-fast)}.user-picker-option:hover{background:#47a70014}.user-picker-option-avatar,.user-picker-selected-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),#3d8f00);color:var(--color-primary-text);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-xs);flex-shrink:0}.user-picker-option-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-picker-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:var(--radius-sm);background:#47a70026;color:var(--color-primary);flex-shrink:0}.user-picker-empty{padding:var(--space-lg);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm)}.user-picker-selected{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-input);border:1px solid var(--color-primary);border-radius:var(--radius-md)}.user-picker-selected-info{flex:1;display:flex;align-items:center;gap:var(--space-sm);min-width:0}.user-picker-selected-name{font-size:var(--font-size-base);font-weight:500;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-picker-clear{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:4px;display:flex;align-items:center;border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast);flex-shrink:0}.user-picker-clear:hover{color:var(--color-danger);background:#ef44441a}.admin-booking-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}.admin-booking-item:hover{border-color:var(--color-border-hover)}.admin-booking-item-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);margin-bottom:2px}.admin-booking-date-count{font-size:var(--font-size-xs);font-weight:400;color:var(--color-text-muted);margin-left:auto}.csv-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);margin-bottom:var(--space-lg)}.csv-summary-item{display:flex;flex-direction:column;align-items:center;padding:var(--space-md);background:var(--color-bg);border-radius:var(--radius-md);text-align:center}.csv-summary-value{font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary)}.csv-summary-label{font-size:var(--font-size-xs);color:var(--color-text-muted)}.csv-format-info{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-xs);color:var(--color-text-muted);padding:var(--space-md);background:var(--color-bg);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.date-weather{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:2px}.weather-icon{font-size:1rem;line-height:1}.weather-temp{font-weight:600;color:var(--color-text)}.weather-rain{font-size:var(--font-size-xs);color:#60a5fa;font-weight:500}.overlap-warning{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-md);color:#fbbf24;font-size:var(--font-size-sm);margin-bottom:var(--space-md)}.overlap-list{display:flex;flex-direction:column;gap:var(--space-sm);max-height:200px;overflow-y:auto}.overlap-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--color-bg);border-radius:var(--radius-md);border:1px solid var(--color-border)}.overlap-item-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text)}.overlap-item-detail{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.error-banner{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#ef44441a;border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);font-size:.92rem}.error-banner-icon{flex-shrink:0;font-size:1.1rem}.error-banner-message{flex:1}.error-banner-retry{flex-shrink:0;padding:var(--space-xs) var(--space-sm);background:transparent;border:1px solid var(--color-danger);border-radius:var(--radius-sm);color:var(--color-danger);font-size:.85rem;cursor:pointer;transition:background var(--transition-fast);white-space:nowrap}.error-banner-retry:hover{background:#ef444426}.error-boundary{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-xl);background:var(--color-bg)}.error-boundary-content{text-align:center;max-width:420px}.error-boundary-icon{font-size:3rem;display:block;margin-bottom:var(--space-md)}.error-boundary-content h1{font-size:var(--font-size-xl);font-weight:700;margin-bottom:var(--space-sm);color:var(--color-text)}.error-boundary-message{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.error-boundary-details{text-align:left;font-size:var(--font-size-xs);color:var(--color-danger);background:#ef444414;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-lg);overflow-x:auto;white-space:pre-wrap;word-break:break-word}.error-boundary-actions{display:flex;gap:var(--space-sm);justify-content:center}@media(max-width:480px){.app-main{padding:var(--space-md)}.my-booking-info{gap:var(--space-sm);font-size:var(--font-size-xs)}.login-form{padding:var(--space-2xl) var(--space-lg)}.date-text{font-size:var(--font-size-sm)}.date-display{min-width:160px}.admin-section-tabs{gap:var(--space-xs)}.admin-section-tab{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-xs)}.admin-section-tab svg{display:none}.block-form-card{padding:var(--space-lg)}.block-toggle-btn{padding:var(--space-sm) var(--space-xs);font-size:var(--font-size-xs)}.block-reason-chips{gap:var(--space-xs)}.block-reason-chip{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}.block-time-range{gap:var(--space-sm)}.block-item{padding:var(--space-sm) var(--space-md)}.block-item-details{gap:var(--space-sm)}.stats-summary,.csv-summary{grid-template-columns:repeat(2,1fr)}.announcement-admin-item{flex-direction:column}.announcement-admin-actions{align-self:flex-end}.admin-section-tabs{gap:var(--space-xs);flex-wrap:wrap}}