*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8fafc;color:#1f2937;line-height:1.6;min-height:100vh}#root{min-height:100vh}.App{min-height:100vh;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}.header{background-color:#fff;border-bottom:1px solid #e2e8f0;padding:1rem 0;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px #0000001a;width:100%}.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;width:100%}.title{font-size:1.5rem;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:.5rem;margin:0}.subtitle{font-size:.875rem;color:#6b7280;margin-top:.25rem;margin-bottom:0}.header-buttons{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.375rem;border:1px solid #d1d5db;background-color:#fff;color:#6b7280;text-decoration:none;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.button:hover{background-color:#f9fafb;border-color:#9ca3af}.button:active{transform:translateY(1px)}.button.active{background-color:#10b981;border-color:#10b981;color:#fff}.button:disabled{opacity:.6;cursor:not-allowed}.button-text{font-size:.875rem;font-weight:500}.summary-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;padding:1rem 0;margin-bottom:2rem;width:100%}.summary-card{background-color:#fff;padding:1.5rem;border-radius:.5rem;border:1px solid #e2e8f0;text-align:center;transition:transform .2s ease,box-shadow .2s ease;min-height:120px;display:flex;flex-direction:column;justify-content:center}.summary-card:hover{transform:translateY(-2px);box-shadow:0 4px 6px #0000001a}.summary-number{font-size:2rem;font-weight:700;margin-bottom:.5rem;line-height:1}.summary-label{font-size:.875rem;color:#6b7280;text-align:center;line-height:1.2}.section-title{font-size:1.125rem;font-weight:700;color:#1f2937;margin-bottom:1rem;padding:0 1rem;width:100%}.district-card{background-color:#fff;margin:0 1rem 1rem;border-radius:.5rem;border:1px solid #e2e8f0;overflow:hidden;transition:box-shadow .2s ease;width:calc(100% - 2rem)}.district-card:hover{box-shadow:0 4px 6px #0000001a}.district-header{padding:1rem;border-bottom:1px solid #f1f5f9;background-color:#f8fafc;width:100%}.district-title-container{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer;width:100%}.district-title{font-size:1rem;font-weight:700;color:#1f2937;margin:0;cursor:pointer;transition:color .2s ease}.district-title:hover{color:#8b5cf6}.district-count{font-size:.875rem;color:#6b7280;margin:0}.court-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #f1f5f9;transition:background-color .2s ease;width:100%}.court-item:hover{background-color:#f8fafc}.court-item:last-child{border-bottom:none}.court-info{flex:1;min-width:0}.court-name{font-size:1rem;font-weight:600;color:#1f2937;margin-bottom:.25rem;margin-top:0;line-height:1.2}.court-time{font-size:.875rem;color:#6b7280;margin:0;line-height:1.2}.court-availability{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;min-width:120px}.court-count{font-size:.875rem;color:#6b7280;margin:0;text-align:right}.book-button{padding:.375rem .75rem;border-radius:.25rem;color:#fff;font-size:.75rem;font-weight:600;text-decoration:none;cursor:pointer;transition:opacity .2s ease;border:none;white-space:nowrap}.book-button:hover{opacity:.9}.book-button.high{background-color:#7c3aed}.book-button.medium{background-color:#f59e0b}.book-button.low{background-color:#ef4444}.show-more-button{padding:1rem;text-align:center;cursor:pointer;transition:background-color .2s ease;width:100%}.show-more-button:hover{background-color:#f8fafc}.show-more-text{color:#8b5cf6;font-size:.875rem;font-weight:500;margin:0}.empty-state{text-align:center;padding:3rem 1rem;width:100%}.empty-state-text{font-size:1rem;color:#6b7280;margin-bottom:.5rem;margin-top:0}.empty-state-subtext{font-size:.875rem;color:#9ca3af;margin:0}.footer{padding:2rem 1rem;text-align:center;border-top:1px solid #e2e8f0;margin-top:2rem;width:100%}.footer-text{font-size:.75rem;color:#9ca3af;text-align:center;margin:0}.loading{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;min-height:50vh;width:100%}.loading p{color:#6b7280;font-size:1rem;margin-top:1rem;margin-bottom:0}.spinner{border:2px solid #f3f3f3;border-top:2px solid #10b981;border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}@media (max-width: 768px){.header-content{flex-direction:column;align-items:flex-start;gap:1rem}.header-buttons{width:100%;justify-content:flex-start}.summary-container{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}.district-card{margin:0 .5rem 1rem;width:calc(100% - 1rem)}.court-item{flex-direction:column;align-items:flex-start;gap:.5rem}.court-availability{align-items:flex-start;width:100%;min-width:auto}.container{padding:0 1rem}}@media (max-width: 480px){.container{padding:0 .5rem}.summary-container{grid-template-columns:1fr}.title{font-size:1.25rem}.subtitle{font-size:.75rem}.district-card{margin:0 .25rem 1rem;width:calc(100% - .5rem)}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow{box-shadow:0 1px 3px #0000001a}.shadow-md{box-shadow:0 4px 6px #0000001a}.shadow-lg{box-shadow:0 10px 15px #0000001a}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}.homepage-container{min-height:100vh;background-color:#f5f5f5;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden;font-size:14px}.homepage-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;padding-top:calc(3.125rem + env(safe-area-inset-top));padding-bottom:1rem;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px #0000001a;min-height:4rem}.header-content{display:flex;align-items:center;flex:1}.header-badminton-icon{font-size:1.5rem;color:#fff;margin-right:.25rem}.header-text{margin-left:.75rem;flex:1}.header-title{font-size:1.25rem;font-weight:700;color:#fff;margin:0;margin-bottom:.125rem;line-height:1.2}.header-subtitle{font-size:.875rem;color:#ffffffe6;margin:0}.header-actions{display:flex;align-items:center;gap:.625rem}.refresh-btn{padding:.5rem;background-color:transparent;border:none;cursor:pointer;font-size:1.25rem;color:#fff;min-height:2.5rem;min-width:2.5rem;border-radius:.3125rem;transition:all .2s ease;touch-action:manipulation}.refresh-btn:active{transform:scale(.95);background-color:#ffffff1a}.homepage-main{flex:1;overflow:auto;padding:0 1rem}.status-section{margin:.5rem .5rem .25rem}.status-card{background-color:#fff;border-radius:.75rem;padding:1rem;box-shadow:0 2px 8px #0000001a}.status-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}.status-info{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;flex:1}.status-success{color:#28a745;font-weight:700;font-size:.875rem;line-height:1.3}.status-neutral{color:#666;font-size:.875rem;line-height:1.3}.status-error{color:#dc3545;font-weight:700;font-size:.875rem;line-height:1.3}.status-actions{display:flex;gap:.75rem}.timeline-section{margin:1rem .5rem}.timeline-header{display:flex;align-items:center;margin-bottom:.75rem}.timeline-icon{font-size:1.25rem;color:#ff6b35;margin-right:.5rem}.timeline-title{font-size:1rem;font-weight:700;color:#333;margin:0;line-height:1.3}.timeline-card{background-color:#fff;border-radius:.75rem;padding:1rem;box-shadow:0 2px 8px #0000001a}.timeline-duration-selector{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;justify-content:center;flex-wrap:wrap}.duration-label{font-size:.875rem;color:#666;font-weight:500}.duration-select{padding:.5rem .75rem;border:2px solid #ddd;border-radius:.75rem;font-size:.875rem;background-color:#fff;min-height:2.5rem;min-width:4rem;touch-action:manipulation}.timeline-filters{display:flex;gap:.75rem;margin-bottom:1rem;justify-content:center;flex-wrap:wrap}.time-filter-btn{padding:.5rem 1rem;border:2px solid #ddd;border-radius:1.5rem;background-color:#fff;color:#666;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;min-height:2.5rem;min-width:4rem;touch-action:manipulation}.time-filter-btn.active{background-color:#ff6b35;color:#fff;border-color:#ff6b35}.time-filter-btn:active{transform:scale(.95)}.timeline-content{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.timeline-content::-webkit-scrollbar{display:none}.timeline-item{display:flex;align-items:flex-start;padding:.75rem;background-color:#fff;border-radius:.5rem;box-shadow:0 2px 8px #0000001a;min-width:12.5rem;max-width:15.625rem;flex-shrink:0;cursor:pointer;transition:all .2s;scroll-snap-align:start;border:2px solid transparent;min-height:4rem;touch-action:manipulation}.timeline-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:#ff6b35}.timeline-item:active{transform:scale(.98)}.timeline-item-icon{font-size:1rem;margin-right:.5rem;margin-top:.125rem}.timeline-item-content{flex:1;min-width:0}.timeline-venue-name{font-size:.8125rem;font-weight:700;color:#333;margin:0 0 .125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.timeline-venue-details{font-size:.6875rem;color:#666;margin:0 0 .125rem;line-height:1.3}.timeline-court-count{font-size:.6875rem;color:#333;margin:0;line-height:1.3;font-weight:500}.timeline-empty{font-size:.75rem;color:#999;font-style:italic;text-align:center;padding:1.25rem 0}.time-period-section{margin-bottom:1rem;background-color:#f8f8f8;border-radius:.5rem;padding:.75rem}.time-period-header{display:flex;align-items:center;margin-bottom:.5rem}.time-period-icon{font-size:1rem;color:#ff6b35;margin-right:.5rem}.time-period-title{font-size:.875rem;font-weight:700;color:#333;margin:0;line-height:1.3}.time-period-range{font-size:.75rem;color:#666;margin-left:.5rem;line-height:1.3}.time-period-court-count{font-size:1.125rem;font-weight:700;color:#ff6b35;text-align:center;margin:.5rem 0}.time-period-label{font-size:.625rem;color:#666;text-align:center;line-height:1.3}.date-section{margin:.5rem .5rem .25rem}.date-header{display:flex;align-items:center;margin-bottom:.75rem}.date-icon{font-size:1.25rem;color:#ff6b35;margin-right:.5rem}.date-title{font-size:1rem;font-weight:700;color:#333;margin:0;line-height:1.3}.date-selector{display:flex;align-items:center;background-color:#fff;border-radius:.75rem;padding:.5rem;box-shadow:0 2px 8px #0000001a;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.date-list{display:flex;gap:.5rem;padding:0 .5rem;flex-shrink:0;justify-content:space-between;width:100%}.date-display{font-size:.75rem;color:inherit;font-weight:inherit;margin:0 0 .125rem;line-height:1.3}.date-court-count{font-size:.625rem;color:inherit;font-weight:inherit;margin:0;text-align:center;line-height:1.3}.facility-types-section{margin:.5rem .5rem 1rem}.facility-types-header{display:flex;align-items:center;margin-bottom:.75rem}.facility-types-icon{font-size:1.25rem;color:#ff6b35;margin-right:.5rem}.facility-types-title{font-size:1rem;font-weight:700;color:#333;margin:0;line-height:1.3}.facility-types-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}.facility-type-card{background-color:#fff;border-radius:.75rem;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:all .2s;min-height:8rem;border:2px solid transparent;touch-action:manipulation}.facility-type-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:#ff6b35}.facility-type-card:active{transform:scale(.98)}.facility-type-header{display:flex;align-items:center;margin-bottom:.75rem}.facility-type-icon{font-size:1.25rem;color:#666;margin-right:.75rem}.facility-type-info{margin-left:.75rem;text-align:center;flex:1}.facility-type-name{font-size:1rem;font-weight:700;color:#333;margin:0 0 .25rem;line-height:1.3}.facility-type-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem;width:100%}.facility-type-stat{text-align:center}.facility-type-stat-value{font-size:1.125rem;font-weight:700;color:#ff6b35;margin-bottom:.25rem}.facility-type-stat-label{font-size:.75rem;color:#666;line-height:1.3}.facility-type-button{width:100%;padding:.75rem;background-color:#ff6b35;color:#fff;border:none;border-radius:.75rem;font-size:.875rem;font-weight:700;cursor:pointer;transition:all .2s;min-height:2.5rem;touch-action:manipulation}.facility-type-button:hover{background-color:#e55a2b;transform:translateY(-2px)}.facility-type-button:active{transform:scale(.98)}.booking-instructions{padding:.75rem 1rem;background-color:#fff6f1;color:#ff6b35;border-radius:.75rem;margin-bottom:1rem;font-size:.875rem;text-align:center;border:2px solid #FFE4D6;line-height:1.4;font-weight:500}.timeline-columns{display:flex;flex-direction:column;gap:1rem}.timeline-column{flex:1}.timeline-column.full-width{flex:1 1 100%;max-width:100%;min-width:0;width:100%;margin:0;padding:0}@media (min-width: 480px){.homepage-main{padding:0 1.5rem}.status-section,.timeline-section,.date-section,.facility-types-section{margin-left:1.5rem;margin-right:1.5rem}.facility-types-grid{grid-template-columns:repeat(2,1fr)}.timeline-item{min-width:15rem}}@media (min-width: 768px){.header-title{font-size:1.5rem}.homepage-main{padding:0 2rem}.status-section,.timeline-section,.date-section,.facility-types-section{margin-left:2rem;margin-right:2rem}.facility-types-grid{grid-template-columns:repeat(3,1fr)}.timeline-item{min-width:16.25rem}.timeline-content{gap:1rem}.timeline-columns{flex-direction:row;gap:1rem}.timeline-column{flex:1;min-width:0}}@media (min-width: 1024px){.homepage-main{padding:0 2.5rem}.status-section,.timeline-section,.date-section,.facility-types-section{margin-left:2.5rem;margin-right:2.5rem}.facility-types-grid{grid-template-columns:repeat(3,1fr)}.timeline-columns{gap:1.5rem}}@media (hover: none) and (pointer: coarse){.timeline-item,.facility-type-card{transition:none}.timeline-item:active,.facility-type-card:active{transform:scale(.98)}.time-filter-btn,.date-item,.facility-type-button{min-height:2.5rem}.timeline-item:active,.facility-type-card:active,.time-filter-btn:active,.date-item:active,.facility-type-button:active{background-color:#f0f0f0}}@media (prefers-contrast: high){.timeline-item,.facility-type-card,.time-filter-btn{border:2px solid #000}}.filter-container{margin-bottom:1rem;width:100%}.filter-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.filter-label{font-weight:700;margin-right:.5rem;white-space:nowrap}.filter-btn{background:#fff;border:1.5px solid #e9ecef;color:#333;border-radius:6px;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;transition:all .2s;margin-right:.25rem}.filter-btn.selected{background:#ff6b35;color:#fff;border-color:#ff6b35;font-weight:700}.filter-btn:active{transform:scale(.97)}.time-period-btn{background:#fff;border:1.5px solid #e9ecef;color:#333;border-radius:6px;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;transition:all .2s;margin-right:.25rem}.time-period-btn.selected{background:#ff6b35;color:#fff;border-color:#ff6b35;font-weight:700}.time-period-btn:active{transform:scale(.97)}.district-available-section{margin-top:2rem}.district-available-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.district-available-icon{font-size:1.5rem}.district-available-title{font-size:1.25rem;font-weight:700}.district-available-grid{display:flex;flex-wrap:wrap;gap:1rem}.district-available-card{background:#fff;border-radius:10px;box-shadow:0 2px 8px #00000014;flex:1 1 calc(33.333% - 1rem);min-width:260px;max-width:33.333%;display:flex;flex-direction:column;margin-bottom:1rem}.district-available-card-header{font-size:1.1rem;font-weight:700;background:#ff6b35;color:#fff;border-radius:10px 10px 0 0;padding:.5rem 1rem}.district-available-card-content{padding:1rem;display:flex;flex-direction:column;gap:.5rem}.district-available-period-row{display:flex;align-items:center;gap:1rem;border-bottom:1px solid #eee;padding:.5rem 0}.district-available-period-row:last-child{border-bottom:none}.district-available-period-label{font-weight:700;color:#ff6b35;min-width:4.5rem}.district-available-period-count{font-size:1.1rem;color:#10b981;font-weight:700}@media (max-width: 900px){.district-available-card{min-width:48%;max-width:48%}}@media (max-width: 600px){.district-available-card{min-width:100%;max-width:100%}}.district-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;width:100%;max-width:800px;margin:0;align-items:start}.district-filter-group{gap:.25rem}.district-filter-group .filter-label{margin-right:.25rem}.district-filter-btn:first-child{font-weight:700;background:#f8f9fa;border:2px solid #FF6B35}.district-filter-btn:first-child.selected{background:#ff6b35;color:#fff;border-color:#ff6b35;font-weight:700}.district-filter-row{display:flex;flex-wrap:wrap;gap:.5rem;width:100%}.filter-btn-base{background:#fff;color:#ff6b35;border:1.5px solid #FF6B35;border-radius:1.5rem;padding:.4rem 1.1rem;font-size:1rem;font-weight:600;margin-bottom:0;transition:background .2s,color .2s,border .2s;cursor:pointer;min-width:80px;width:auto;text-align:center;display:inline-block}.district-filter-btn,.time-period-tab,.filter-btn{composes:filter-btn-base}.district-filter-btn.selected,.time-period-tab.selected,.filter-btn.selected,.district-filter-btn:active,.time-period-tab:active,.filter-btn:active{background:#ff6b35;color:#fff;border-color:#ff6b35}.district-filter-btn:not(.selected),.time-period-tab:not(.selected),.filter-btn:not(.selected){background:#fff;color:#ff6b35;border:1.5px solid #FF6B35}.district-filter-btn:hover,.time-period-tab:hover,.filter-btn:hover{background:#ffe3d3;color:#ff6b35}@media (max-width: 600px){.filter-btn-base{min-width:50px;font-size:.6rem;padding:.2rem .4rem}}.district-period-row{display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;gap:.5rem;padding-bottom:.5rem;margin-bottom:.5rem;scrollbar-width:thin;scrollbar-color:#FF6B35 #fff}.district-period-label{min-width:3rem;font-weight:600;color:#ff6b35;margin-right:.5rem;flex-shrink:0}.district-period-courts{display:flex;flex-direction:row;gap:.5rem}.facility-page-container{min-height:100vh;background-color:#f5f5f5;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden;font-size:14px}.facility-page-header{background-color:#ff6b35;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;padding-top:calc(3.125rem + env(safe-area-inset-top));padding-bottom:.75rem;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px #0000001a;min-height:4rem}.header-back-btn{padding:.5rem .625rem;background-color:#fff3;border:none;border-radius:.3125rem;cursor:pointer;color:#fff;font-size:.875rem;font-weight:500;min-height:2.5rem;min-width:2.5rem;transition:all .2s ease;touch-action:manipulation}.header-back-btn:active{transform:scale(.95);background-color:#ffffff4d}.header-content{display:flex;align-items:center;flex:1;justify-content:center}.header-icon{font-size:1.25rem;color:#fff;margin-right:.5rem}.header-title{font-size:1.25rem;font-weight:700;color:#fff;margin:0;text-align:center;line-height:1.3}.header-actions{display:flex;align-items:center;gap:8px}.language-toggle-btn{padding:.5rem .625rem;background-color:#fff3;border-radius:.3125rem;border:none;cursor:pointer;font-size:.875rem;color:#fff;font-weight:700;white-space:nowrap;min-height:2.5rem;min-width:2.5rem;transition:all .2s ease;touch-action:manipulation}.language-toggle-btn:active{transform:scale(.95);background-color:#ffffff4d}.facility-page-main{flex:1;overflow:auto;padding:0 1rem}.date-selection-section{margin:.5rem .5rem 1rem}.date-selection-header{display:flex;align-items:center;margin-bottom:.75rem}.date-selection-icon{font-size:1.25rem;color:#ff6b35;margin-right:.5rem}.date-selection-title{font-size:1rem;font-weight:700;color:#333;margin:0;line-height:1.3}.date-selector{display:flex;align-items:center;background-color:#fff;border-radius:.75rem;padding:.5rem .25rem;box-shadow:0 2px 8px #0000001a;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.date-selector::-webkit-scrollbar{display:none}.date-nav-btn{padding:.5rem;border:none;background-color:transparent;cursor:pointer;font-size:1.25rem;color:#666;flex-shrink:0;min-height:2.5rem;min-width:2.5rem;border-radius:.3125rem;transition:all .2s ease;touch-action:manipulation}.date-nav-btn:active{transform:scale(.95);background-color:#f0f0f0}.date-list{display:flex;gap:.375rem;padding:0 .5rem;flex-shrink:0}.date-item{padding:.5rem .75rem;border-radius:.5rem;border:1px solid #DDD;margin:0 .1875rem;background-color:#fff;cursor:pointer;transition:all .2s;min-width:3.75rem;text-align:center;scroll-snap-align:center;min-height:2.5rem;touch-action:manipulation}.date-item.selected{border-color:#ff6b35;background-color:#ff6b35;color:#fff}.date-item:active{transform:scale(.95)}.date-display{font-size:.8125rem;color:inherit;font-weight:inherit;margin:0 0 .125rem;line-height:1.3}.date-court-count{font-size:.6875rem;color:inherit;font-weight:inherit;margin:0;text-align:center;line-height:1.3}.time-period-tabs{margin:.5rem .5rem 1rem}.time-period-tabs-header{display:flex;align-items:center;margin-bottom:.75rem}.time-period-tabs-icon{font-size:1.25rem;color:#ff6b35;margin-right:.5rem}.time-period-tabs-title{font-size:1rem;font-weight:700;color:#333;margin:0;line-height:1.3}.time-period-tabs-container{display:flex;background-color:#fff;border-radius:.75rem;padding:.25rem;box-shadow:0 2px 8px #0000001a;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.time-period-tabs-container::-webkit-scrollbar{display:none}.time-period-tab{flex:1;min-width:5rem;padding:.75rem .5rem;border:none;background-color:transparent;color:#666;font-size:.875rem;font-weight:500;cursor:pointer;border-radius:.5rem;transition:all .2s;white-space:nowrap;scroll-snap-align:center;min-height:2.5rem;touch-action:manipulation}.time-period-tab.active{background-color:#ff6b35;color:#fff}.time-period-tab:hover{background-color:#f0f0f0}.time-period-tab:active{transform:scale(.95)}.time-period-tab-icon{display:block;font-size:1rem;margin-bottom:.25rem}.time-period-tab-label{display:block;font-size:.75rem;font-weight:500}.district-filter-section{margin:.5rem .5rem 1rem}.district-filter-header{display:flex;align-items:center;margin-bottom:.75rem}.district-filter-icon{font-size:1.25rem;color:#ff6b35;margin-right:.5rem}.district-filter-title{font-size:1rem;font-weight:700;color:#333;margin:0;line-height:1.3}.district-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1rem}.district-item{padding:.75rem .5rem;background-color:#fff;border-radius:.5rem;text-align:center;cursor:pointer;transition:all .2s;border:2px solid transparent;box-shadow:0 2px 8px #0000001a;min-height:4.5rem;display:flex;flex-direction:column;justify-content:center;touch-action:manipulation}.district-item:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.district-item.selected{border-color:#ff6b35;background-color:#fff5f2}.district-item:active{transform:scale(.98)}.district-name{font-size:.875rem;font-weight:500;color:#333;margin:0;line-height:1.3}.district-court-count{font-size:.75rem;color:#666;margin:.25rem 0 0;line-height:1.3}.reset-district-btn{width:100%;padding:.75rem;background-color:#6c757d;color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;min-height:2.5rem;touch-action:manipulation}.reset-district-btn:hover{background-color:#5a6268}.reset-district-btn:active{transform:scale(.98)}.court-data-section{margin:.5rem .5rem 1rem}.court-data-header{display:flex;align-items:center;margin-bottom:.75rem}.court-data-icon{font-size:1.25rem;color:#ff6b35;margin-right:.5rem}.court-data-title{font-size:1rem;font-weight:700;color:#333;margin:0;line-height:1.3}.court-data-content{background-color:#fff;border-radius:.75rem;padding:1rem;box-shadow:0 2px 8px #0000001a}.no-courts-message{text-align:center;padding:2.5rem 1rem;color:#666;font-size:1rem;line-height:1.4}.no-courts-icon{font-size:3rem;color:#ddd;margin-bottom:1rem;display:block}.sport-center-section{margin-bottom:1rem;background-color:#f8f8f8;border-radius:.75rem;padding:1rem;border:2px solid transparent;transition:all .2s ease;width:100%;box-sizing:border-box}.sport-center-section:hover{border-color:#ff6b35;box-shadow:0 4px 12px #0000001a}.sport-center-header{display:flex;align-items:center;margin-bottom:.75rem;flex-wrap:wrap}.sport-center-icon{font-size:1.25rem;color:#ff6b35;margin-right:.5rem}.sport-center-name{font-size:1rem;font-weight:700;color:#333;margin:0;flex:1;line-height:1.3;word-wrap:break-word;overflow-wrap:break-word}.sport-center-phone{font-size:.75rem;color:#666;margin:.25rem 0;line-height:1.3;width:100%}.sport-center-map{font-size:.75rem;color:#007bff;text-decoration:none;margin:.25rem 0;display:inline-block;line-height:1.3;word-wrap:break-word;overflow-wrap:break-word}.sport-center-map:hover{text-decoration:underline}.sport-center-date{font-size:.75rem;color:#666;margin:.25rem 0;font-weight:500;line-height:1.3;width:100%}.available-courts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:.75rem;width:100%}.available-court-card{background-color:#fff;border-radius:.5rem;padding:.75rem;text-align:center;cursor:pointer;transition:all .2s;border:1px solid #e0e0e0;box-shadow:0 2px 6px #0000000d;min-height:4.5rem;display:flex;flex-direction:column;justify-content:center;touch-action:manipulation;word-wrap:break-word;overflow-wrap:break-word}.available-court-card:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a;border-color:#ff6b35}.available-court-card:active{transform:scale(.98)}.available-court-time{font-size:.875rem;font-weight:700;color:#333;margin:0 0 .25rem;line-height:1.3}.available-court-count{font-size:1.125rem;font-weight:700;color:#28a745;margin:0;line-height:1.3}.content-layout{display:flex;flex-direction:row;gap:.75rem;width:100%}.left-column{flex:0 0 33.333%;width:33.333%;max-width:33.333%}.right-column{flex:0 0 66.667%;width:66.667%;max-width:66.667%}.layout-header{display:flex;gap:.75rem;margin-bottom:1rem}.layout-header .left-column{flex:0 0 33.333%;width:33.333%;max-width:33.333%}.layout-header .right-column{flex:0 0 66.667%;width:66.667%;max-width:66.667%}.section-subtitle{font-size:.875rem;font-weight:500;color:#666;margin:.75rem 0;text-align:center;padding:.75rem;background-color:#f0f0f0;border-radius:.375rem;line-height:1.4}.booking-instruction{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:.5rem;padding:.75rem 1rem;margin:1rem 0;text-align:center;color:#856404;font-size:.875rem;line-height:1.4;font-weight:500}@media (min-width: 480px){.facility-page-main{padding:0 1.5rem}.date-selection-section,.time-period-tabs,.district-filter-section,.court-data-section{margin-left:1.5rem;margin-right:1.5rem}.district-grid,.available-courts-grid{grid-template-columns:repeat(3,1fr)}.date-item{min-width:4rem}}@media (min-width: 768px){.header-title{font-size:1.5rem}.facility-page-main{padding:0 2rem}.date-selection-section,.time-period-tabs,.district-filter-section,.court-data-section{margin-left:2rem;margin-right:2rem}.district-grid,.available-courts-grid{grid-template-columns:repeat(4,1fr)}.content-layout{flex-direction:column;gap:1.5rem}.left-column,.right-column{flex:1;width:100%;max-width:none}.time-period-tab{min-width:5.5rem}}@media (min-width: 1024px){.facility-page-main{padding:0 2.5rem}.date-selection-section,.time-period-tabs,.district-filter-section,.court-data-section{margin-left:2.5rem;margin-right:2.5rem}.district-grid,.available-courts-grid{grid-template-columns:repeat(5,1fr)}}@media (hover: none) and (pointer: coarse){.available-court-card,.district-item{transition:none}.available-court-card:active,.district-item:active{transform:scale(.98)}.time-period-tab,.date-item,.reset-district-btn{min-height:2.5rem}.available-court-card:active,.district-item:active,.time-period-tab:active,.date-item:active,.reset-district-btn:active{background-color:#f0f0f0}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button:focus,input:focus,select:focus,textarea:focus{outline:3px solid #FF6B35;outline-offset:2px}@media (prefers-contrast: high){.available-court-card,.district-item,.time-period-tab,.date-item{border:2px solid #000}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:2.5rem 1rem}.loading-spinner{font-size:2.5rem;margin-bottom:1rem;animation:spin 1s linear infinite}.loading-text{font-size:1rem;color:#666;text-align:center;line-height:1.4}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:40vh;padding:2.5rem 1rem;text-align:center}.error-icon{font-size:2.5rem;color:#dc3545;margin-bottom:1rem}.error-text{font-size:1rem;color:#dc3545;margin-bottom:.75rem;line-height:1.4}.error-details{font-size:.75rem;color:#666;line-height:1.4}.timeslot-cards-container{display:flex;overflow-x:auto;gap:.5rem;padding:.5rem 0;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.timeslot-cards-container::-webkit-scrollbar{display:none}.timeslot-card{flex:0 0 auto;min-width:6rem;max-width:8rem;background-color:#fff;border-radius:.5rem;padding:.75rem;text-align:center;cursor:pointer;transition:all .2s;border:1px solid #e0e0e0;box-shadow:0 2px 6px #0000000d;scroll-snap-align:start;touch-action:manipulation}.timeslot-card:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a;border-color:#ff6b35}.timeslot-card:active{transform:scale(.98)}.timeslot-time{font-size:.875rem;font-weight:700;color:#333;margin:0 0 .25rem;line-height:1.3}.timeslot-count{font-size:1.125rem;font-weight:700;color:#28a745;margin:0;line-height:1.3}.map-button{background-color:#ff6b35;color:#fff;border:none;border-radius:6px;padding:8px 12px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .2s ease}.map-button:hover{background-color:#e55a2b;transform:translateY(-1px)}.map-button:active{transform:translateY(0)}.district-filter-btn{background-color:#ff6b35;color:#fff;border:none;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px;transition:all .2s ease}.district-filter-btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.district-filter-btn:active{transform:translateY(0)}.district-filter-btn-reset{background-color:#ff6b35}.district-filter-btn-refresh{background-color:#10b981}.district-filter-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.district-header-left{display:flex;flex-direction:column;flex:1}.district-title-row{display:flex;align-items:center;gap:8px}.district-header-right{display:flex;gap:8px}.selected-district-info{font-size:14px;color:#ff6b35;font-weight:500;margin-top:4px;margin-bottom:8px}.district-grid-card{background-color:#fff;border:2px solid #e9ecef;border-radius:12px;padding:16px;cursor:pointer;transition:all .2s ease;transform:scale(1)}.district-grid-card:hover{transform:scale(1.02);box-shadow:0 4px 8px #0000001a}.district-grid-card.selected{background-color:#fff6f1;border-color:#ff6b35;transform:scale(1.02)}.district-grid-content{text-align:center}.district-icon{font-size:24px;color:#ff6b35;margin-bottom:8px;display:block}.district-grid-name{font-size:16px;font-weight:700;color:#333;margin:8px 0;line-height:1.3}.district-grid-card.selected .district-grid-name{color:#ff6b35}.district-grid-stats,.district-grid-courts{font-size:14px;color:#666;margin:4px 0;line-height:1.3}.sport-center-card{background-color:#fff;border-radius:12px;padding:16px;margin-bottom:20px;box-shadow:0 2px 8px #0000001a;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}.sport-center-card-header{display:flex;align-items:center;margin-bottom:12px}.sport-center-card-icon{font-size:24px;color:#ff6b35;margin-right:10px}.sport-center-card-name{font-size:18px;font-weight:700;color:#333;margin:0}.sport-center-card-details{display:flex;flex-direction:column;gap:8px}.detail-row{display:flex;align-items:center;gap:8px}.detail-icon{font-size:16px;color:#666}.detail-text{font-size:14px;color:#333}.sport-center-section{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}.sport-center-header{display:flex;align-items:center;margin-bottom:10px}.sport-center-icon{font-size:24px;color:#10b981;margin-right:10px}.sport-center-name{font-size:18px;font-weight:700;color:#333;margin:0}.courts-scroll-container{overflow-x:auto;padding-bottom:10px;margin-bottom:10px;flex:1;display:flex;flex-direction:column;justify-content:center}.courts-scroll-content{display:flex;gap:12px;padding-right:10px}.timeslot-time{font-size:14px;font-weight:700;color:#333;text-align:center}.timeslot-count{font-size:20px;font-weight:700;color:#10b981;text-align:center}.no-data-container{text-align:center;padding:40px}.no-data-icon{font-size:48px;color:#ccc;margin-bottom:16px}.no-data-text{font-size:16px;color:#666;margin:16px 0 8px}.no-data-subtext{font-size:14px;color:#999;margin:0}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:#f5f5f5}.loading-spinner{font-size:48px;margin-bottom:16px}.loading-text{font-size:16px;color:#666}.district-list-container{padding:16px}.section-header{display:flex;align-items:center;margin-bottom:16px}.section-icon{font-size:20px;margin-right:8px}.section-title{font-size:18px;font-weight:700;color:#333;margin:0}.district-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.court-details-container{flex:1}.tab-container{display:flex;background-color:#fff;padding:8px 16px;box-shadow:0 2px 4px #0000001a}.content{padding:16px}.layout-header{display:flex;gap:20px;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee}.section-subtitle{font-size:16px;font-weight:700;color:#555;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #eee}.sport-center-row{display:flex;gap:20px;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee;align-items:flex-start}.booking-info{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:#fff3f0;border-radius:6px;margin-bottom:12px;font-size:12px;color:#ff6b35;border:1px solid #FF6B35}.booking-info-icon{font-size:14px}.booking-info-text{line-height:1.4}.map-button-container{margin-top:12px;text-align:center}