:root{--bg:#101214;--panel:#171c21;--accent:#2a5cff;--text:#fff;--muted:#9aa4af;--ok:#7dffae}
*{box-sizing:border-box}
html,body,#app{margin:0;padding:0;width:100%;height:100%;min-height:100dvh;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none}
body{overflow:hidden}
.login-body{display:flex;align-items:center;justify-content:center;padding:24px}.login-card{width:min(92vw,430px);background:var(--panel);border-radius:24px;padding:28px;box-shadow:0 16px 48px rgba(0,0,0,.28)}.login-card h1{margin:0 0 6px;font-size:28px}.muted{color:var(--muted)}.login-form{display:grid;gap:10px;margin-top:14px}.login-form input{width:100%;padding:14px 16px;border-radius:16px;border:1px solid #39424c;background:#0f1317;color:#fff}.login-form button{margin-top:8px;padding:15px 18px;border:none;border-radius:16px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}.login-note{margin-top:18px;padding:14px;border-radius:16px;background:#11161b}.login-note code{display:block;margin-top:6px}.alert{margin:10px 0 0;padding:12px 14px;border-radius:16px;background:#4c2727}
.app-body{overflow:hidden;background:var(--bg)}
.app-shell{position:relative;width:100%;height:100%;min-height:100dvh;padding:14px 16px 16px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;background:linear-gradient(180deg,#12171d 0%,#101214 100%)}
.top-hud{display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:8}.top-group{display:flex;gap:10px;align-items:center}.speed-label{font-weight:800;font-size:18px}
.scene-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(360px,520px) minmax(220px,1fr);gap:14px;align-items:start;min-height:0}
.main-panel,.camera-panel{background:rgba(23,28,33,.96);border-radius:22px;padding:12px;display:grid;grid-template-rows:auto auto;gap:8px;min-height:0;min-width:0;align-self:start}.panel-title,.camera-title{font-weight:800;font-size:16px}
.main-canvas,.camera-canvas,.wheel-canvas{width:100%;display:block;border-radius:14px;background:#0b1219}
.main-canvas{height:clamp(260px,36vh,420px);min-height:260px}.camera-canvas{height:clamp(170px,22vh,220px);min-height:170px}
.settings-panel{position:absolute;right:16px;top:66px;z-index:15;width:min(320px,92vw);background:rgba(23,28,33,.97);border-radius:22px;padding:16px;display:grid;gap:12px;box-shadow:0 14px 34px rgba(0,0,0,.28)}.settings-title{font-weight:800}.settings-row{display:grid;gap:8px}.settings-slider{width:100%}.help-lines{display:grid;gap:6px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}.help-line{font-size:13px;color:var(--muted);line-height:1.45}
.controls{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;min-width:0;z-index:8}.control-side{display:flex;gap:14px;align-items:flex-end}.pedal-cluster{display:grid;gap:10px;min-width:min(38vw,360px)}.row{display:flex;gap:10px}.btn,.big-btn,.pad-btn{user-select:none;-webkit-user-select:none}.btn{display:inline-flex;align-items:center;justify-content:center;background:#1c2128;border-radius:18px;padding:11px 15px;font-weight:700;cursor:pointer}.btn.active{background:#285842}.big-btn{flex:1;min-width:0;background:#232930;border-radius:20px;padding:15px 18px;text-align:center;font-weight:800;cursor:pointer}.big-btn.active{background:#285842}.big-btn.p.active{background:#4c5360}.pad-btn{flex:1;min-width:0;background:#232930;border-radius:20px;padding:16px 18px;text-align:center;font-weight:800;cursor:pointer}.pad-btn.acc.active{background:#1f5c3b}.pad-btn.brk.active{background:#65423a}.wheel-wrap{width:min(24vw,220px);height:min(24vw,220px);min-width:150px;min-height:150px;touch-action:none;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.small-text{font-size:12px;color:var(--muted);line-height:1.25}.goal-hint{text-align:center}
@media (max-width:1180px){.scene-layout{grid-template-columns:minmax(180px,1fr) minmax(300px,420px) minmax(180px,1fr);gap:12px}.main-canvas{height:clamp(230px,34vh,340px);min-height:230px}.camera-canvas{height:clamp(145px,19vh,185px);min-height:145px}.wheel-wrap{width:min(20vw,180px);height:min(20vw,180px);min-width:130px;min-height:130px}.pedal-cluster{min-width:min(34vw,290px)}}
@media (max-width:900px) and (orientation:landscape){.app-shell{padding:10px;gap:8px}.top-hud{gap:8px}.speed-label{font-size:16px}.btn{padding:9px 12px;border-radius:16px}.scene-layout{grid-template-columns:minmax(130px,1fr) minmax(220px,36vw) minmax(130px,1fr);gap:8px}.main-panel,.camera-panel{padding:8px;border-radius:18px}.panel-title,.camera-title{font-size:14px}.main-canvas{height:clamp(165px,30vh,210px);min-height:165px}.camera-canvas{height:clamp(100px,16vh,120px);min-height:100px}.controls{gap:10px;align-items:center}.wheel-wrap{width:min(16vw,120px);height:min(16vw,120px);min-width:96px;min-height:96px}.pedal-cluster{min-width:min(30vw,220px);gap:8px}.big-btn,.pad-btn{padding:11px 12px;border-radius:18px;font-size:13px}.row{gap:8px}.goal-hint{display:none}}
@media (orientation:portrait){.app-shell{grid-template-rows:auto 1fr auto;gap:10px;padding:12px}.scene-layout{grid-template-columns:1fr}.camera-panel{display:none}.main-canvas{height:auto;min-height:48vh}.controls{gap:12px;align-items:center}.wheel-wrap{width:min(42vw,220px);height:min(42vw,220px);min-width:150px;min-height:150px}.pedal-cluster{min-width:min(48vw,260px)}.settings-panel{right:12px;left:12px;width:auto}}