*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:-apple-system,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:#14171c;color:#e8ecf1;overflow:hidden}.app{display:flex;height:100%}.canvas-wrap{flex:1;position:relative;min-width:0}.canvas-wrap canvas{width:100%;height:100%;display:block}.canvas-hint{position:absolute;left:12px;bottom:10px;font-size:12px;color:#3d5568;background:#ffffffb8;padding:4px 10px;border-radius:20px;pointer-events:none}.panel{width:340px;height:100%;overflow-y:auto;background:#171b21;border-left:1px solid #262c35;padding:16px 16px 40px}.panel-head h1{font-size:17px;font-weight:600}.panel-head .sub{font-size:12px;color:#7d8894;margin:3px 0 6px}section{margin-top:16px;border-top:1px solid #232932;padding-top:10px}section h2{font-size:12px;font-weight:600;color:#8fa2b5;letter-spacing:1px;margin-bottom:8px}.slider-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:12.5px}.slider-label{flex:0 0 118px;color:#c7d0da;line-height:1.25}.slider-row input[type=range]{flex:1;accent-color:#e24b4a;min-width:0}.slider-val{flex:0 0 46px;text-align:right;font-variant-numeric:tabular-nums;color:#fff;font-size:12px}.check-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:6px;color:#c7d0da}.check-row input{accent-color:#e24b4a;width:15px;height:15px}.reset-btn{margin-top:6px;width:100%;padding:7px 0;font-size:13px;background:#232932;color:#c7d0da;border:1px solid #313945;border-radius:8px;cursor:pointer}.reset-btn:hover{background:#2b323d}.swatch-row{display:flex;gap:8px;align-items:center}.swatch{width:26px;height:26px;border-radius:7px;cursor:pointer;border:2px solid transparent;padding:0}.swatch.active{border-color:#fff;box-shadow:0 0 0 2px #e24b4a}.swatch-custom{width:30px;height:30px;padding:0;border:1px solid #313945;border-radius:7px;background:none;cursor:pointer}.chip-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.chip{padding:5px 10px;font-size:12px;cursor:pointer;background:#232932;color:#c7d0da;border:1px solid #313945;border-radius:14px}.chip.active{background:#e24b4a;border-color:#e24b4a;color:#fff}.float-fill{background:linear-gradient(90deg,#1d6fa5,#4fa3dd)}.mode-row{display:flex;gap:6px;margin-bottom:8px}.mode-btn{flex:1;padding:6px 0;font-size:12.5px;cursor:pointer;background:#232932;color:#c7d0da;border:1px solid #313945;border-radius:8px}.mode-btn.active{background:#e24b4a;border-color:#e24b4a;color:#fff}.go-btn{width:100%;margin-top:10px;padding:11px 0;font-size:15px;font-weight:600;background:#e24b4a;color:#fff;border:none;border-radius:10px;cursor:pointer}.go-btn:hover{background:#ef5a56}.phase-line{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px}.phase-tag{padding:3px 10px;border-radius:12px;background:#232932;color:#c7d0da;font-size:12px}.phase-air{background:#1d4f7c;color:#bfe0ff}.phase-crash{background:#6b201d;color:#ffc4c0}.phase-land{background:#1d5c37;color:#b9edcc}.result-card{margin-top:14px;padding:12px 14px;border-radius:10px;border:1px solid}.result-clean{background:#12291b;border-color:#2a6e44}.result-sketchy{background:#2b2410;border-color:#8a6d1f}.result-crash{background:#2e1514;border-color:#7a2f2c}.result-title{font-size:15px;font-weight:600;margin-bottom:4px}.result-clean .result-title{color:#7fd68a}.result-sketchy .result-title{color:#e8b93b}.result-crash .result-title{color:#f07a6d}.result-reason{font-size:12.5px;color:#b9c2cc;line-height:1.5;margin-bottom:8px}.warn-box{margin-top:14px;padding:10px 12px;font-size:12.5px;line-height:1.55;background:#3a1d1c;border:1px solid #7a2f2c;border-radius:8px;color:#f0b8b4}.sharebar-wrap{margin-bottom:10px}.sharebar-labels{display:flex;justify-content:space-between;font-size:12px;color:#c7d0da;margin-bottom:3px}.sharebar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:#232932}.sharebar-left{background:#185fa5}.sharebar-right{background:#378add}.stat-row{display:flex;justify-content:space-between;font-size:12.5px;color:#c7d0da;margin:4px 0}.stat-row b{color:#fff;font-variant-numeric:tabular-nums}.muscle-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:help}.muscle-name{flex:0 0 128px;font-size:12.5px;color:#c7d0da}.muscle-bar{flex:1;height:9px;background:#232932;border-radius:5px;overflow:hidden}.muscle-fill{height:100%;background:linear-gradient(90deg,#a33,#e24b4a);border-radius:5px}.muscle-val{flex:0 0 36px;text-align:right;font-size:11.5px;color:#9aa7b4;font-variant-numeric:tabular-nums}.hint{font-size:11.5px;color:#66727f;margin-top:8px;line-height:1.5}@media(max-width:760px){.app{flex-direction:column}.canvas-wrap{flex:0 0 48vh}.panel{width:100%;flex:1;border-left:none;border-top:1px solid #262c35}}.play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.play-hud{position:absolute;top:12px;left:12px;background:#10141cb8;border-radius:12px;padding:10px 14px;color:#eef3f9;min-width:158px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hud-speed{font-size:34px;font-weight:800;line-height:1}.hud-speed i{font-size:12px;font-style:normal;opacity:.7;margin-left:4px}.hud-sub{margin-top:6px;font-size:12px;opacity:.85}.bal-bar{position:relative;height:6px;margin-top:8px;background:#ffffff2e;border-radius:3px}.bal-bar:after{content:"";position:absolute;left:50%;top:-2px;width:2px;height:10px;background:#fff6}.bal-bar i{position:absolute;top:-3px;width:10px;height:12px;margin-left:-5px;border-radius:3px;background:#e8b93b}.charge-bar{height:5px;margin-top:6px;background:#ffffff26;border-radius:3px;overflow:hidden}.charge-bar i{display:block;height:100%;background:#7fd68a}.play-msg{position:absolute;top:14px;left:50%;transform:translate(-50%);max-width:72%;background:#10141cd1;color:#ffe9a8;padding:8px 16px;border-radius:10px;font-size:14px;text-align:center;animation:msgpop .25s ease}@keyframes msgpop{0%{transform:translate(-50%,-8px);opacity:0}to{transform:translate(-50%);opacity:1}}.pad{position:absolute;bottom:18px;display:flex;gap:12px;pointer-events:none}.pad-l{left:16px}.pad-r{right:16px}.pad-btn{pointer-events:auto;width:78px;height:62px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:#141a248c;color:#fff;font-size:13px;font-weight:600;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}.pad-btn:active{background:#2f6fd0c7}.key-grid{display:grid;grid-template-columns:26px 1fr;gap:6px 8px;font-size:12px;color:#a8b4c4;align-items:start;margin-bottom:8px}.key-cap{display:inline-block;text-align:center;background:#2a3242;border:1px solid #45506a;border-radius:5px;font-weight:700;color:#fff;padding:1px 0;font-size:11px}