*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f5f6f8;color:#1a1a2e;line-height:1.5;-webkit-font-smoothing:antialiased}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px;color:#666}.spinner{width:32px;height:32px;border:3px solid #e0e0e0;border-top-color:#3b82f6;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:20}.header h1{font-size:18px;font-weight:700;letter-spacing:-.02em}.header-left{display:flex;align-items:center;gap:12px}.subtitle{font-size:13px;color:#888}.header-nav{display:flex;gap:2px;margin-left:8px}.nav-link{padding:4px 12px;font-size:13px;font-weight:500;color:#666;text-decoration:none;border-radius:6px;transition:background .12s,color .12s}.nav-link:hover{background:#f3f4f6;color:#1a1a2e}.nav-link.active{background:#1a1a2e;color:#fff}.header-right{display:flex;align-items:center;gap:12px}.last-updated{font-size:12px;color:#999}.refresh-btn{padding:6px 14px;font-size:13px;font-weight:500;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;cursor:pointer;transition:background .15s}.refresh-btn:hover{background:#f3f4f6}.content{max-width:1200px;margin:0 auto;padding:24px}.content-split{display:flex;min-height:calc(100vh - 53px)}.main-area{flex:1;min-width:0;padding:24px}.carpark-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.carpark-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:box-shadow .15s,border-color .15s;text-align:left;font:inherit;color:inherit;width:100%}.carpark-card:hover{box-shadow:0 2px 8px #0000000f}.carpark-card.selected{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f626}.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.card-name{font-size:14px;font-weight:600;line-height:1.3}.card-badge{flex-shrink:0;padding:2px 8px;font-size:11px;font-weight:600;border-radius:99px;white-space:nowrap}.card-badge.status-open{background:#dcfce7;color:#166534}.card-badge.status-nearly_full{background:#fef3c7;color:#92400e}.card-badge.status-full{background:#fee2e2;color:#991b1b}.card-body{display:flex;flex-direction:column;gap:6px}.occupancy-bar-container{width:100%;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden}.occupancy-bar{height:100%;border-radius:3px;transition:width .4s ease}.occupancy-bar.status-open{background:#22c55e}.occupancy-bar.status-nearly_full{background:#f59e0b}.occupancy-bar.status-full{background:#dc2626}.card-stats{display:flex;justify-content:space-between;font-size:13px;color:#666}.stat-available strong{color:#1a1a2e}.card-footer{display:flex;align-items:center;gap:8px;font-size:12px;color:#999}.card-full-by{color:#b45309;font-weight:500}.card-updated{margin-left:auto;font-size:11px;color:#bbb}.search-bar{margin-bottom:16px}.search-input{width:100%;padding:8px 14px;font-size:14px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#1a1a2e;font-family:inherit;outline:none;transition:border-color .15s}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.side-panel{width:50%;flex-shrink:0;background:#fff;border-left:1px solid #e5e7eb;position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto}.side-panel-inner{padding:20px 24px;display:flex;flex-direction:column;gap:16px}.side-panel-header{display:flex;justify-content:space-between;align-items:center}.side-panel-header h2{font-size:17px;font-weight:700}.close-btn{padding:4px 12px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#666;cursor:pointer}.close-btn:hover{background:#f3f4f6}.trend-description{font-size:13px;color:#666}.side-panel-stats{display:flex;gap:8px}.stat-chip{font-size:13px;font-weight:600;padding:4px 12px;border-radius:99px}.stat-chip.status-open{background:#dcfce7;color:#166534}.stat-chip.status-nearly_full{background:#fef3c7;color:#92400e}.stat-chip.status-full{background:#fee2e2;color:#991b1b}.day-selector{display:flex;gap:4px;flex-wrap:wrap}.day-btn{padding:5px 12px;font-size:12px;font-weight:500;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#374151;cursor:pointer;transition:all .12s}.day-btn:hover{background:#f3f4f6}.day-btn.active{background:#1a1a2e;color:#fff;border-color:#1a1a2e}.trend-chart-wrapper{display:flex;flex-direction:column;gap:12px}.trend-chart-title{font-size:14px;font-weight:600;color:#444}.holiday-badge{font-size:11px;font-weight:600;padding:2px 8px;background:#dbeafe;color:#1e40af;border-radius:99px;margin-left:8px;vertical-align:middle}.school-holiday-badge{background:#fef3c7;color:#92400e}.typically-full-by{font-weight:400;color:#888;font-size:13px}.trend-chart-scroll{overflow-x:auto;padding-bottom:4px}.trend-chart-scroll svg{display:block}.trend-legend{display:flex;gap:16px;font-size:12px;color:#666}.legend-item{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.trend-loading{display:flex;justify-content:center;padding:40px}.no-data{text-align:center;padding:40px;color:#999;font-size:14px}.trend-generated{font-size:11px;color:#bbb;text-align:right}.readings-explorer{padding:20px 24px;background:#fff;border:1px solid #e5e7eb;border-radius:12px}.readings-explorer h2{font-size:18px;font-weight:700;margin-bottom:16px}.readings-controls{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}.readings-label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:#666}.readings-input,.readings-select{padding:6px 10px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#1a1a2e;font-family:inherit}.readings-select{min-width:280px}.readings-hint{text-align:center;padding:32px;color:#999;font-size:13px}.readings-error{text-align:center;padding:32px;color:#dc2626;font-size:13px}.readings-loading{display:flex;justify-content:center;padding:40px}.readings-chart{margin-bottom:20px}.readings-count{margin-left:auto;color:#999}.readings-table-wrapper{overflow-x:auto;max-height:400px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:8px}.readings-table{width:100%;border-collapse:collapse;font-size:13px}.readings-table th{position:sticky;top:0;background:#f9fafb;padding:8px 12px;text-align:left;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb}.readings-table td{padding:6px 12px;border-bottom:1px solid #f0f0f0;color:#444}.readings-table tr:last-child td{border-bottom:none}.readings-table .row-full td{background:#fef2f2;color:#991b1b}.readings-table .row-nearly-full td{background:#fffbeb;color:#92400e}@media(max-width:900px){.content-split{flex-direction:column}.side-panel{width:100%;position:static;height:auto;border-left:none;border-top:1px solid #e5e7eb}}@media(max-width:640px){.header{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 16px}.header-left{flex-wrap:wrap}.header-nav{margin-left:0;width:100%}.main-area,.content{padding:16px}.carpark-grid{grid-template-columns:1fr}.day-selector{overflow-x:auto;flex-wrap:nowrap}.side-panel-inner{padding:16px}}