:root{--bg:#08090e;--bg-elevated:#0e1018;--bg-card:#121420;--border:#1c1e2e;--text:#c8cad0;--text-muted:#8b8fa3;--text-dim:#5c6078;--amber:#f0a830;--amber-dim:#f0a83026;--amber-glow:#f0a83014;--red:#ef4444;--red-dim:#ef444426;--green:#34d399;--green-dim:#34d3991f;--mono:"DM Mono", monospace;--sans:"Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--sans);background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;min-height:100dvh;overflow:hidden}#app{max-width:480px;height:100dvh;padding-top:env(safe-area-inset-top);flex-direction:column;margin:0 auto;display:flex;position:relative;overflow:hidden}#app:before{content:"";pointer-events:none;z-index:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");position:absolute;inset:0}#app>*{z-index:1;position:relative}.top-bar{flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.icon-btn{border:1px solid var(--border);background:var(--bg-elevated);width:40px;height:40px;color:var(--text-muted);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;transition:all .2s;display:flex}.icon-btn:active{background:var(--bg-card);color:var(--text);border-color:var(--text-muted)}.icon-btn svg,.icon-btn *{pointer-events:none;width:18px;height:18px}.icon-btn.notif-on{border-color:var(--amber);color:var(--amber);background:var(--amber-dim)}.clock{font-family:var(--mono);color:var(--text-dim);font-variant-numeric:tabular-nums;letter-spacing:.08em;font-size:.85rem}main{flex-direction:column;flex:1;justify-content:center;gap:0;padding:0 24px;display:flex}.direction-toggle{background:var(--bg-elevated);border-radius:10px;justify-content:center;align-self:center;gap:2px;margin-bottom:8px;padding:3px;display:flex}.dir-btn{color:var(--text-dim);font-family:var(--sans);cursor:pointer;letter-spacing:.08em;background:0 0;border:none;border-radius:8px;padding:6px 20px;font-size:.8rem;font-weight:500;transition:all .25s}.dir-btn.active{background:var(--amber-dim);color:var(--amber)}.countdown-section{text-align:center;padding:16px 0 24px}.countdown-label{color:var(--text-muted);letter-spacing:.15em;margin-bottom:8px;font-size:.8rem;font-weight:300}.countdown-wrap{display:inline-block;position:relative}.countdown{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--amber);text-shadow:0 0 60px var(--amber-glow), 0 0 120px var(--amber-glow);font-size:5rem;font-weight:500;line-height:1;transition:color .4s,text-shadow .4s}.countdown.warning{color:var(--red);text-shadow:0 0 60px var(--red-dim), 0 0 120px var(--red-dim)}.countdown.urgent{color:var(--red);text-shadow:0 0 40px var(--red-dim), 0 0 100px var(--red-dim);animation:.6s ease-in-out infinite alternate urgent-pulse}.countdown.ended{color:var(--text-dim);text-shadow:none;font-size:1.8rem}@keyframes urgent-pulse{0%{opacity:1;transform:scale(1)}to{opacity:.6;transform:scale(.98)}}.deadline{justify-content:center;align-items:center;gap:10px;margin-top:14px;font-size:.85rem;display:flex}.divider{background:linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);height:1px;margin:4px 0 16px}.next-section{padding:0}.next-label{font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.2em;margin-bottom:10px;font-size:.65rem}.next-trains{flex-direction:column;gap:6px;display:flex}.train-row{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;align-items:center;gap:10px;padding:11px 14px;font-size:.85rem;transition:border-color .2s;display:flex}.train-row.next{border-color:#f0a83033}.train-time{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:3.4em;color:var(--text);letter-spacing:.03em;font-weight:500}.train-type{white-space:nowrap;letter-spacing:.04em;border-radius:4px;padding:3px 8px;font-size:.65rem;font-weight:500}.type-快速{color:#fb923c;background:#f57c0026}.type-通勤快速{color:#f87171;background:#dc262626}.type-普通{color:var(--text-muted);background:#ffffff0a}.train-dest{color:var(--text-muted);flex:1;font-size:.8rem}.train-remain{font-family:var(--mono);color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.7rem}.no-trains{text-align:center;color:var(--text-dim);padding:32px;font-size:.85rem;font-weight:300}.bottom-bar{padding:12px 24px;padding-bottom:calc(16px + env(safe-area-inset-bottom));flex-shrink:0;gap:10px;display:flex}.action-btn{font-family:var(--sans);cursor:pointer;letter-spacing:.06em;border:none;border-radius:14px;flex:1;padding:16px;font-size:.95rem;font-weight:700;transition:all .15s}.action-go{background:var(--green);color:#042f1c}.action-go:active{background:#2ac084;transform:scale(.97)}.action-give-up{background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted)}.action-give-up:active{background:var(--bg-elevated);color:var(--text);transform:scale(.97)}.settings-modal{z-index:100;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.settings-modal[hidden]{display:none}.modal-backdrop{-webkit-backdrop-filter:blur(4px);background:#000000b3;position:absolute;inset:0}.modal-content{background:var(--bg-elevated);border:1px solid var(--border);padding:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom));border-bottom:none;border-radius:20px 20px 0 0;width:100%;max-width:480px;position:relative}.modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.modal-title{letter-spacing:.1em;font-size:1rem;font-weight:500}.modal-close-x{width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:flex}.modal-close-x:active{background:var(--bg-card)}.modal-close-x svg{width:18px;height:18px}.setting-row{border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 0;display:flex}.setting-label{color:var(--text);font-size:.9rem;font-weight:400}.setting-input{align-items:center;gap:10px;display:flex}.stepper-btn{border:1px solid var(--border);background:var(--bg-card);width:36px;height:36px;color:var(--text);font-family:var(--mono);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;font-size:1.1rem;transition:all .15s;display:flex}.stepper-btn:active{background:var(--amber-dim);border-color:var(--amber);color:var(--amber)}.walk-display{font-family:var(--mono);color:var(--amber);text-align:center;min-width:2ch;font-size:1.4rem;font-weight:500}.walk-unit{color:var(--text-muted);font-size:.85rem}.modal-close{background:var(--bg-card);border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--sans);cursor:pointer;border-radius:12px;margin-top:20px;padding:14px;font-size:.9rem;font-weight:500;transition:all .15s}.modal-close:active{background:var(--amber-dim);border-color:var(--amber)}