:root{--bg: #fafafa;--card-bg: #fff;--text: #1a1a1a;--text-muted: #999;--text-secondary: #666;--border: #ddd;--btn-bg: #1a1a1a;--btn-bg-active: #333;--btn-bg-disabled: #666;--btn-text: #fff;--error-bg: #fee2e2;--error-text: #dc2626;--shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .04);--tutorial-accent: #007AFF;--tutorial-dim: rgba(0, 0, 0, .55);--tutorial-close-bg: rgba(142, 142, 147, .35)}html.dark{--bg: #111;--card-bg: #1e1e1e;--text: #e5e5e5;--text-muted: #777;--text-secondary: #aaa;--border: #333;--btn-bg: #e5e5e5;--btn-bg-active: #ccc;--btn-bg-disabled: #555;--btn-text: #111;--error-bg: #3b1111;--error-text: #f87171;--shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .2);--tutorial-accent: #0A84FF;--tutorial-dim: rgba(0, 0, 0, .7);--tutorial-close-bg: rgba(142, 142, 147, .45)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;transition:background .25s,color .25s}#root{width:100%;max-width:480px;margin:0 auto}.app{padding:24px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:24px 0;width:100%}.app-header__left{display:flex;align-items:center;gap:12px}.stop-name{font-size:14px;color:var(--text-secondary)}.gear-btn{background:none;border:none;font-size:20px;color:var(--text-muted);cursor:pointer;padding:4px 0;line-height:1;transition:color .15s;position:relative;top:2px}.gear-btn:active,.gear-btn--active{color:var(--text)}.cards{display:flex;flex-direction:column;gap:24px;flex:1}.bus-card{background:var(--card-bg);border-radius:16px;box-shadow:var(--shadow);cursor:pointer;padding:0;position:relative;overflow:hidden;transition:background .25s,box-shadow .25s}.bus-card--empty{opacity:.4}.bus-card--settings{cursor:default;animation:settings-fade-in .25s ease-out;position:absolute;top:0;left:0;right:0;z-index:10;box-shadow:0 1px 4px #0000000f;background:#fdfdfd}html.dark .bus-card--settings{background:#222}.bus-card--settings-inline{position:static;top:auto;left:auto;right:auto}.cards__list,.cards__lower{position:relative;display:flex;flex-direction:column;gap:24px}.bus-card__accent{width:40%;height:3px;border-radius:0 0 2px 2px;margin-left:24px}.bus-card__accent--gray{background-color:#999}.bus-card__row{display:flex;align-items:baseline;padding:24px;gap:6px}.bus-card__route{font-size:18px;font-weight:700;letter-spacing:-.5px;line-height:1;flex-shrink:0;min-width:48px;text-align:right}.bus-card__minutes{font-size:36px;font-weight:300;letter-spacing:-1px;line-height:1;flex:1;min-width:0}.bus-card__next-gap{font-size:14px;color:var(--text-muted);font-weight:400;margin-right:4px;flex-shrink:0;white-space:nowrap}.bus-card__no-data{font-size:14px;color:var(--text-muted);font-style:italic}.bus-card__stops-away{font-size:12px;color:var(--text-muted);font-weight:400;white-space:nowrap}.status-dot-wrap{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.status-dot--stale{width:7px;height:7px;border-radius:50%;background:#b8960c;flex-shrink:0;animation:stale-pulse 2s ease-in-out infinite}.status-dot__label{font-size:11px;color:var(--text-muted);font-weight:500;white-space:nowrap}html.dark .status-dot--stale{background:#c4a030}@keyframes stale-pulse{0%,to{opacity:1}50%{opacity:.4}}.error{background:var(--error-bg);color:var(--error-text);padding:10px 14px;border-radius:8px;font-size:14px;margin-bottom:12px}.loading{text-align:center;padding:40px;color:var(--text-muted);font-size:16px}.settings-panel__content{padding:24px 24px 28px;display:flex;flex-direction:column;gap:20px}.settings-panel__form{display:flex;gap:8px}.settings-panel__input{flex:1;padding:14px 16px;border:2px solid var(--border);border-radius:10px;font-size:16px;font-family:inherit;outline:none;transition:border-color .15s;background:var(--card-bg);color:var(--text)}.settings-panel__input:focus{border-color:var(--text)}.settings-panel__go{background:var(--btn-bg);color:var(--btn-text);border:none;padding:14px 24px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;flex-shrink:0}.settings-panel__go:active{background:var(--btn-bg-active)}.settings-panel__go:disabled{background:var(--btn-bg-disabled);cursor:not-allowed}.settings-panel__refresh{background:var(--btn-bg);color:var(--btn-text);border:none;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}.settings-panel__refresh:active{background:var(--btn-bg-active)}.settings-panel__refresh:disabled{background:var(--btn-bg-disabled);cursor:not-allowed}.settings-toggles{display:flex;flex-direction:column;gap:16px}.settings-toggle{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.settings-toggle__track{position:relative;width:44px;height:24px;background:var(--border);border-radius:12px;flex-shrink:0;transition:background .2s}.settings-toggle__track:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #00000026}.settings-toggle input{position:absolute;opacity:0;width:0;height:0}.settings-toggle input:checked+.settings-toggle__track{background:#34c759}.settings-toggle input:checked+.settings-toggle__track:after{transform:translate(20px)}@keyframes settings-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tutorial-spotlight{z-index:1000;box-shadow:0 0 0 9999px var(--tutorial-dim);pointer-events:none;transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease,border-radius .22s ease;will-change:top,left,width,height}.tutorial-tooltip{z-index:1001;background:var(--card-bg);border-radius:12px;padding:20px;box-shadow:0 4px 24px #00000026;display:flex;flex-direction:column;gap:16px;max-width:340px}.tutorial-tooltip__text{font-size:16px;line-height:1.5;color:var(--text);margin:0}.tutorial-tooltip__btn{background:var(--tutorial-accent);color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;align-self:flex-end;font-family:inherit}.tutorial-tooltip__btn:active{opacity:.85}.tutorial-close{position:fixed;top:16px;right:16px;z-index:1001;width:28px;height:28px;border-radius:50%;background:var(--tutorial-close-bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.tutorial-close:active{opacity:.7}.tutorial-overlay{position:fixed;inset:0;opacity:1;transition:opacity .3s ease;animation:tutorial-enter .3s ease-out;z-index:999}.tutorial-overlay--hidden{opacity:0}.tutorial-overlay--instant{transition:none}@keyframes tutorial-enter{0%{opacity:0}to{opacity:1}}.settings-panel__input-wrap{position:relative;flex:1}.settings-panel__input-wrap .settings-panel__input{width:100%;padding-right:44px}.settings-panel__scan-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:var(--text-muted);line-height:0;transition:color .15s}.settings-panel__scan-btn:active{color:var(--text)}.settings-panel__scan-error{font-size:13px;color:var(--error-text);margin-top:4px}.qr-scanner{position:fixed;inset:0;z-index:2000;background:#000;display:flex;flex-direction:column}.qr-scanner__header{display:flex;align-items:center;gap:12px;padding:16px;background:#0009;z-index:1}.qr-scanner__close{background:none;border:none;color:#fff;padding:4px;cursor:pointer;line-height:0}.qr-scanner__title{color:#fff;font-size:16px;font-weight:600}.qr-scanner__viewport{flex:1;overflow:hidden}.qr-scanner__viewport video{width:100%;height:100%;object-fit:cover}.settings-stop-help{margin-top:8px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;opacity:1;transition:opacity .15s ease}.settings-stop-help__text{font-size:13px;color:var(--text-muted)}.settings-stop-help__link{font-size:13px;color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}.settings-stop-help__link:hover{color:var(--text)}.settings-stop-help__link:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:4px}.settings-stop-help__link:active{text-decoration:underline}@media(max-width:600px){:root{--bg: #f0f0f0;--shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .14)}html.dark{--bg: #0c0c0c;--card-bg: #232323;--shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35)}html,body{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.app{padding-top:40px}.bus-card__accent{display:none}.tutorial-tooltip{padding:16px;gap:10px}.tutorial-tooltip__text{line-height:1.4}.tutorial-tooltip__btn{padding:5px 12px}}
