*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5;color:#333}.app-layout{display:flex;height:100vh}.main-content{flex:1;overflow-y:auto;display:flex;flex-direction:column}header{background:#1976d2;color:#fff;padding:16px 20px;text-align:center;flex-shrink:0}header h1{font-size:1.4rem}.container{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}.card{background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 2px 8px #0000001a}.card h2{margin-bottom:12px;font-size:1rem;color:#1976d2}.presets-card h2{margin-bottom:10px}.presets-row{display:flex;gap:6px}.preset-btn{flex:1;padding:12px 4px;font-size:1.1rem;font-weight:700;border-radius:10px;border:2px solid #1976d2;background:#fff;color:#1976d2;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background .1s,color .1s}.preset-btn.active,.preset-btn:active{background:#1976d2;color:#fff}.card-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.card-header-row h2{margin-bottom:0}.utc-badge{font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;background:#1976d2;border-radius:6px;padding:3px 8px}.time-input-group{display:flex;gap:8px}.time-section{display:flex;flex-direction:column;flex:1}.time-section label{font-size:.7rem;color:#777;margin-bottom:4px}.time-section input{padding:10px 4px;border:1px solid #ddd;border-radius:8px;font-size:1.1rem;text-align:center;width:100%}.countdown{text-align:center;padding:12px}.countdown-label{font-size:.85rem;color:#777;margin-bottom:6px}.countdown-time{font-size:2.4rem;font-weight:700;color:#1976d2;font-variant-numeric:tabular-nums}.countdown-time.warning{color:#e53935}.speed-result{text-align:center;padding:20px;background:linear-gradient(135deg,#1976d2,#0d47a1);color:#fff;border-radius:12px;margin-top:auto}.speed-label{font-size:.85rem;opacity:.9;margin-bottom:4px}.speed-value{font-size:3rem;font-weight:700}.speed-unit{font-size:1.1rem;opacity:.9;margin-left:4px}.slider-column{width:88px;display:flex;flex-direction:column;align-items:center;background:#e3f2fd;border-left:2px solid #90caf9;padding:12px 0;flex-shrink:0}.distance-display{text-align:center;margin-bottom:10px;line-height:1.1}.distance-value{display:block;font-size:1.4rem;font-weight:700;color:#0d47a1}.distance-unit-label{font-size:.75rem;color:#555;font-weight:600}.step-btn{width:64px;height:64px;font-size:2rem;line-height:1;border-radius:12px;background:#1976d2;color:#fff;border:none;cursor:pointer;touch-action:manipulation;flex-shrink:0;-webkit-user-select:none;user-select:none;box-shadow:0 2px 6px #00000040}.step-btn:active{background:#0d47a1;transform:scale(.96)}.step-btn:disabled{background:#b0bec5;box-shadow:none}.slider-track{flex:1;display:flex;justify-content:center;align-items:center;padding:10px 0;width:100%;overflow:visible}input[type=range].vertical-slider{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:60px;height:100%;background:#90caf9;border-radius:5px;outline:none;cursor:pointer}input[type=range].vertical-slider::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:60px;border-radius:50%;background:#1976d2;border:4px solid white;box-shadow:0 3px 10px #00000059;cursor:pointer}input[type=range].vertical-slider::-moz-range-thumb{width:60px;height:60px;border-radius:50%;background:#1976d2;border:4px solid white;box-shadow:0 3px 10px #00000059;cursor:pointer}input[type=range].vertical-slider::-webkit-slider-runnable-track{width:10px;border-radius:5px;background:#90caf9}input[type=range].vertical-slider::-moz-range-track{width:10px;border-radius:5px;background:#90caf9}