:root{--bg-primary: #f8f9fa;--bg-secondary: #ffffff;--bg-card: #ffffff;--text-primary: #1a1a1a;--text-secondary: #6c757d;--text-tertiary: #adb5bd;--accent: #0066cc;--accent-hover: #0052a3;--success: #28a745;--warning: #ffc107;--danger: #dc3545;--border: #dee2e6;--shadow: rgba(0, 0, 0, .08);--shadow-hover: rgba(0, 0, 0, .12)}@media(prefers-color-scheme:dark){:root{--bg-primary: #0d0d0d;--bg-secondary: #1a1a1a;--bg-card: #1a1a1a;--text-primary: #e8e8e8;--text-secondary: #9ca3af;--text-tertiary: #6b7280;--accent: #3b82f6;--accent-hover: #2563eb;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--border: #2d2d2d;--shadow: rgba(0, 0, 0, .3);--shadow-hover: rgba(0, 0, 0, .4)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;transition:background-color .2s ease,color .2s ease;overflow-x:hidden}.container{max-width:600px;margin:0 auto;padding:1rem}header{text-align:center;padding:2rem 0 1.5rem}header h1{font-size:1.5rem;font-weight:500;margin-bottom:.5rem;letter-spacing:-.02em;color:var(--text-primary)}.subtitle{color:var(--text-secondary);font-size:.875rem;font-weight:400}.search-section{margin-bottom:1.5rem}.search-form{display:flex;flex-direction:column;gap:.5rem}.input-group{display:flex;gap:.5rem;flex-wrap:wrap}.input-group input[type=text]{flex:1;min-width:0;padding:.75rem;font-size:.875rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);transition:all .15s ease}.input-group input[type=date]{padding:.75rem .5rem;font-size:.8125rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);transition:all .15s ease;min-width:115px;cursor:pointer}.input-group input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;filter:var(--calendar-icon-filter, none)}@media(prefers-color-scheme:dark){:root{--calendar-icon-filter: invert(.8)}}.input-group input[type=text]:focus,.input-group input[type=date]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #3b82f61a}.input-group input[type=text]::placeholder{color:var(--text-tertiary)}.input-group button{padding:.75rem 1rem;font-size:.875rem;font-weight:500;border:none;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;transition:all .15s ease;white-space:nowrap}.input-group button:hover{background:var(--accent-hover);box-shadow:0 2px 4px var(--shadow)}.input-group button:disabled{opacity:.5;cursor:not-allowed}.error-message{margin-top:.75rem;padding:.75rem 1rem;background:#ef44441a;border:1px solid var(--danger);border-radius:6px;color:var(--danger);font-size:.875rem;font-weight:500}.search-history{margin-top:1rem}.search-history h3{font-size:.8125rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}.search-history-list{display:flex;flex-wrap:wrap;gap:.5rem}.search-history-item{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;font-size:.8125rem;cursor:pointer;transition:all .15s ease}.search-history-item:hover{border-color:var(--accent);background:var(--bg-card)}.search-history-item .flight-num{font-weight:600;color:var(--text-primary)}.search-history-item .flight-date,.search-history-item .flight-route{color:var(--text-secondary);font-size:.75rem}.search-history-item .remove-btn{padding:.125rem .25rem;margin-left:.25rem;background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:.875rem;line-height:1;border-radius:3px;transition:all .15s ease}.search-history-item .remove-btn:hover{color:var(--danger);background:#ef44441a}.flight-info{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:1.5rem;margin-bottom:1rem;box-shadow:0 1px 3px var(--shadow)}.flight-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:.5rem}.flight-number{display:flex;align-items:baseline;gap:.5rem}.flight-number span:first-child{font-size:1.375rem;font-weight:600;letter-spacing:-.01em}.aircraft-reg{font-size:.8125rem;color:var(--text-secondary);font-weight:400}.flightaware-link{font-size:.6875rem;font-weight:600;color:var(--bg);background:var(--accent);padding:.125rem .375rem;border-radius:4px;text-decoration:none;letter-spacing:.02em;transition:opacity .15s ease}.flightaware-link:hover{opacity:.85}.flight-status{padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em}.flight-status.in-air{background:#3b82f61a;color:var(--accent);border:1px solid rgba(59,130,246,.2)}.flight-status.landed{background:#10b9811a;color:var(--success);border:1px solid rgba(16,185,129,.2)}.flight-status.scheduled{background:#9ca3af1a;color:var(--text-secondary);border:1px solid rgba(156,163,175,.2)}.flight-status.delayed{background:#f59e0b1a;color:var(--warning);border:1px solid rgba(245,158,11,.2)}.flight-status.cancelled{background:#ef44441a;color:var(--danger);border:1px solid rgba(239,68,68,.2)}.flight-status.not-found{background:#6b72801a;color:var(--text-secondary);border:1px solid rgba(107,114,128,.2)}.status-note{font-size:.85rem;color:var(--text-secondary);margin-top:.5rem;text-align:center;font-style:italic}.current-leg{margin-bottom:1.5rem}.route{display:flex;align-items:center;gap:1rem}.airport{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:60px}.airport.origin{align-items:flex-start;text-align:left}.airport.destination{align-items:flex-end;text-align:right}.airport .code{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}.airport .name{font-size:.6875rem;color:var(--text-secondary);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.airport .time{font-size:.8125rem;color:var(--text-secondary);margin-top:.25rem;font-weight:500}.route-line{flex:1;position:relative}.progress-container{height:4px;background:var(--border);border-radius:2px;position:relative;overflow:visible}.progress-bar{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width .5s ease}.plane-icon{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);font-size:1.25rem;transition:left .5s ease}.delay-info{margin-top:1rem;padding:.625rem .875rem;background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);border-radius:6px;font-size:.875rem;display:flex;align-items:center;gap:.5rem}.delay-badge{background:var(--warning);color:#000;padding:.25rem .5rem;border-radius:4px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em}.legs-section{border-top:1px solid var(--border);padding-top:1rem}.legs-tabs{display:flex;gap:.25rem;margin-bottom:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-btn{flex:1;padding:.5rem .75rem;font-size:.8125rem;font-weight:500;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:6px;white-space:nowrap;transition:all .15s ease}.tab-btn:hover{background:var(--bg-primary);color:var(--text-primary)}.tab-btn.active{background:var(--accent);color:#fff;box-shadow:0 1px 3px var(--shadow)}.tab-content{display:none}.tab-content.active{display:block}.legs-list,.history-list{display:flex;flex-direction:column;gap:.5rem}.leg-item{display:flex;align-items:center;padding:.75rem;background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;gap:.75rem;transition:all .15s ease}.leg-item:hover{border-color:var(--text-tertiary)}.leg-item .leg-flight{font-weight:600;min-width:70px;font-size:.875rem}.leg-item .leg-times{font-size:.8125rem;color:var(--text-primary);font-weight:500;min-width:95px}.leg-item .leg-route{flex:1;font-size:.875rem;color:var(--text-secondary)}.leg-item .leg-status{font-size:.6875rem;padding:.25rem .5rem;border-radius:4px;font-weight:500;text-transform:uppercase;letter-spacing:.025em}.leg-item .leg-status.landed{background:#10b9811a;color:var(--success);border:1px solid rgba(16,185,129,.2)}.leg-item .leg-status.in-air{background:#3b82f61a;color:var(--accent);border:1px solid rgba(59,130,246,.2)}.leg-item .leg-status.scheduled{background:#9ca3af1a;color:var(--text-secondary);border:1px solid rgba(156,163,175,.2)}.history-item{padding:.625rem .75rem;background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;font-size:.8125rem}.history-item .time{color:var(--text-secondary);font-size:.6875rem;font-weight:500}.no-data{text-align:center;color:var(--text-secondary);padding:1rem;font-size:.9rem}.settings-section{margin-bottom:1rem}.settings-section details{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;overflow:hidden}.settings-section summary{padding:1rem 1.25rem;cursor:pointer;font-weight:500;font-size:.9375rem;-webkit-user-select:none;user-select:none;transition:background .15s ease}.settings-section summary:hover{background:var(--bg-primary)}.settings-content{padding:0 1.25rem 1.25rem;border-top:1px solid var(--border)}.setting-item{margin-top:1rem;display:flex;align-items:center;gap:.75rem}.setting-item label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;cursor:pointer;-webkit-user-select:none;user-select:none}.setting-item input[type=checkbox]{width:1rem;height:1rem;cursor:pointer;accent-color:var(--accent)}.btn-primary{width:100%;padding:.625rem;font-size:.875rem;font-weight:500;border:none;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;transition:all .15s ease}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 2px 4px var(--shadow)}.btn-small{padding:.375rem .625rem;font-size:.75rem;font-weight:500;border:1px solid var(--border);border-radius:4px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all .15s ease}.btn-small:hover{background:var(--bg-primary);border-color:var(--text-tertiary)}.btn-secondary{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all .15s ease}.btn-secondary:hover{background:var(--bg-primary);border-color:var(--text-tertiary)}footer{text-align:center;padding:1.5rem 1rem;color:var(--text-secondary);font-size:.8125rem}.polling-status{margin-top:.375rem;font-size:.75rem;font-weight:500}.polling-status.active{color:var(--success)}.polling-status.active:before{content:"";display:inline-block;width:6px;height:6px;background:var(--success);border-radius:50%;margin-right:.5rem;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.notification-banner{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);padding:1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;border-top:1px solid var(--border);box-shadow:0 -2px 12px var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.notification-banner p{flex:1 1 100%;text-align:center;font-size:.875rem;color:var(--text-primary)}.notification-banner button{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .15s ease}#enable-notifications{background:var(--accent);color:#fff;border:none}#enable-notifications:hover{background:var(--accent-hover);box-shadow:0 2px 4px var(--shadow)}.hidden{display:none!important}.loading{position:relative;pointer-events:none}.loading:after{content:"";position:absolute;inset:0;background:var(--bg-card);opacity:.7;display:flex;align-items:center;justify-content:center}@media(min-width:480px){.container{padding:1.5rem}header h1{font-size:1.75rem}.input-group input[type=text]{padding:.75rem 1rem;font-size:.9375rem}.input-group input[type=date]{padding:.75rem;font-size:.875rem;min-width:130px}.input-group button{padding:.75rem 1.5rem;font-size:.9375rem}.notification-banner{padding:1rem 2rem}.notification-banner p{flex:1;text-align:left}}@media(min-width:768px){.container{padding:2rem}header{padding:2.5rem 0 2rem}.flight-info{padding:2rem}.airport .name{max-width:120px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.flight-info{animation:fadeIn .3s ease}
