.remote-toolbar-sep{margin-left:auto}
.remote-toolbar-group{flex:0 0 auto}
.btn-drive{min-width:176px;background:linear-gradient(135deg,#7253b8,#50359a);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 7px rgba(51,31,104,.28)}
.btn-drive:hover{background:linear-gradient(135deg,#8061c7,#5c3daa);transform:translateY(-1px)}
.btn-drive .btn-label{white-space:nowrap}
.btn-drive:disabled{cursor:not-allowed;filter:grayscale(.75);opacity:.48;transform:none}

.modal.remote-control-modal{display:flex;flex-direction:column;width:min(1180px,calc(100vw - 16px));max-width:none;height:auto;max-height:calc(100dvh - 12px);padding:0;overflow:hidden;background:#f7f2e6}
.remote-header{position:sticky;top:0;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:19px 24px 17px;background:linear-gradient(135deg,#143e24,#287b41);color:#fff}
.modal.remote-control-modal .remote-header h2{margin:1px 0 3px;color:#f5d98b;font-size:1.55rem}
.modal.remote-control-modal .remote-header p{margin:0;color:rgba(255,255,255,.88);font-size:.84rem}
.remote-kicker{display:block;font-size:.64rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#a9e2b5}
.remote-close{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(0,0,0,.16);color:#fff;font:700 1.35rem/1 'Nunito',sans-serif;cursor:pointer}
.remote-close:hover,.remote-close:focus-visible{background:rgba(0,0,0,.32);outline:3px solid #f5d98b;outline-offset:2px}
.remote-body{display:grid;grid-template-columns:minmax(245px,290px) minmax(650px,1fr);grid-template-areas:"status status" "connect connect" "setup controls";gap:10px 12px;min-height:0;padding:12px 14px 13px;overflow:hidden}
.remote-status{grid-area:status;display:flex;align-items:center;gap:9px;margin:0;padding:8px 11px;border:1px solid #c8b87a;border-radius:8px;background:#fff;color:#3d5440;font-size:.77rem;font-weight:700}
.remote-status-dot{width:10px;height:10px;border-radius:50%;background:#b88a24;box-shadow:0 0 0 3px rgba(184,138,36,.14)}
.remote-status[data-state="active"]{border-color:#71b17f;background:#edf8ef;color:#174f29}
.remote-status[data-state="active"] .remote-status-dot{background:#2f9b4d;box-shadow:0 0 0 3px rgba(47,155,77,.16)}
.remote-status[data-state="error"]{border-color:#d48b8b;background:#fff0f0;color:#7f1d1d}
.remote-status[data-state="error"] .remote-status-dot{background:#c53030;box-shadow:0 0 0 3px rgba(197,48,48,.15)}
.remote-status[data-state="starting"] .remote-status-dot{animation:remote-pulse .8s ease-in-out infinite alternate}
@keyframes remote-pulse{to{transform:scale(1.45);opacity:.55}}
.remote-connect-prompt{grid-area:connect;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px;border:1px solid #e0a53d;border-radius:8px;background:#fff4d6;color:#5b481f}
.remote-connect-prompt[hidden]{display:none}
.remote-connect-prompt>div{display:flex;flex-direction:column;gap:1px}.remote-connect-prompt strong{font-size:.78rem}.remote-connect-prompt span{font-size:.69rem}
.remote-connect-prompt button{flex:0 0 auto;min-height:34px;padding:6px 14px;border:0;border-radius:6px;background:#3a7ec2;color:#fff;font:800 .72rem 'Nunito',sans-serif;cursor:pointer}
.remote-connect-prompt button:hover{background:#286aa9}

.remote-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.remote-section-heading h3{font-family:'Zilla Slab',serif;font-size:1.02rem;color:#1a5c2e}
.remote-section-heading span{font-size:.64rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#718273}
.remote-setup{grid-area:setup;padding:11px 12px;border:1px solid #c8b87a;border-radius:10px;background:#fff}
.remote-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px;align-items:end}
.remote-setup label{display:flex;flex-direction:column;gap:4px;font-size:.69rem;font-weight:800;color:#3d5440}
.remote-setup select{min-height:35px;padding:5px 8px;border:1px solid #b9ae88;border-radius:6px;background:#faf6ec;color:#1e2d1f;font:700 .78rem 'Nunito',sans-serif}
.remote-range-label output{float:right;color:#1a5c2e}
.remote-setup input[type="range"],.remote-servo-controls input[type="range"]{accent-color:#2a7d42}
.remote-safety-note{margin:9px 0!important;padding:7px 9px;border-left:4px solid #d49224;border-radius:5px;background:#fff5d9;color:#5b481f!important;font-size:.69rem!important;line-height:1.35}
.remote-start{width:100%;min-height:42px;border:0;border-radius:7px;background:#2a7d42;color:#fff;font:800 .85rem 'Nunito',sans-serif;cursor:pointer}
.remote-start:hover{background:#1a5c2e}
.remote-start:disabled{cursor:wait;opacity:.65}

.remote-controls{grid-area:controls;display:grid;grid-template-columns:minmax(255px,.72fr) minmax(390px,1.28fr);gap:10px;margin:0;min-width:0;transition:opacity .15s}
.remote-controls[data-active="false"]{opacity:1;filter:none}
.remote-controls[data-active="false"] .remote-drive-key,.remote-controls[data-active="false"] .remote-stop,.remote-controls[data-active="false"] .remote-servo-controls{opacity:.5;filter:grayscale(.25)}
.remote-drive-panel,.remote-servo-panel{min-width:0;padding:11px 12px;border:1px solid #c8b87a;border-radius:10px;background:#fff}
.remote-dpad{display:grid;grid-template-columns:repeat(3,76px);grid-template-rows:repeat(3,61px);gap:6px;justify-content:center;touch-action:none;user-select:none}
.remote-drive-key,.remote-stop{border:0;border-radius:10px;font-family:'Nunito',sans-serif;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #c1b896;transition:transform .07s,box-shadow .07s,background .1s}
.remote-drive-key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#e5eee6;color:#174f29;border:1px solid #9fc4a7}
.remote-drive-key kbd{font-size:1.32rem}.remote-drive-key span{font-size:.63rem;text-transform:uppercase;letter-spacing:.06em}
.remote-drive-key:hover{background:#d4e7d7}.remote-drive-key.is-active{transform:translateY(3px);box-shadow:none;background:#4aa85e;color:#fff}
.remote-drive-key.up{grid-column:2;grid-row:1}.remote-drive-key.left{grid-column:1;grid-row:2}.remote-drive-key.right{grid-column:3;grid-row:2}.remote-drive-key.down{grid-column:2;grid-row:3}
.remote-stop{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#b32626;color:#fff;border:2px solid #8c1717;box-shadow:0 3px 0 #711010}
.remote-stop:hover{background:#d02d2d}.remote-stop:active{transform:translateY(3px);box-shadow:none}.remote-stop span{font-size:.92rem}.remote-stop small{font-size:.55rem;opacity:.78}
.remote-help{margin:8px 0 0!important;text-align:center;font-size:.67rem!important;line-height:1.35;color:#667568!important}

.remote-keyboard-map{display:grid;grid-template-columns:130px 1fr;gap:8px;align-items:center;margin-bottom:8px;padding:7px 8px;border:1px solid #d6c6ef;border-radius:8px;background:#f7f2ff}
.remote-keyboard-caption{display:flex;flex-direction:column;gap:2px}.remote-keyboard-caption strong{font-size:.7rem;color:#51378f}.remote-keyboard-caption span{font-size:.6rem;line-height:1.25;color:#685d79}
.remote-key-grid{display:grid;grid-template-columns:repeat(4,minmax(54px,1fr));gap:4px}
.remote-key-grid>div{display:flex;align-items:center;gap:4px;padding:3px 4px;border:1px solid #ddd2ef;border-radius:5px;background:#fff}
.remote-key-grid kbd{flex:0 0 auto;min-width:23px;color:#51378f;border-color:#b6a6d1}.remote-key-grid small{font-size:.51rem;line-height:1.1;color:#5f5968}.remote-key-grid b{color:#51378f}
.remote-servo-grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:7px}
.remote-servo-card{padding:8px 9px;border:1px solid #d7ccb0;border-radius:8px;background:#faf8f0}
.remote-servo-card>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.remote-servo-card strong{font-size:.76rem;color:#1a5c2e}.remote-servo-card>div:first-child span{font-size:.55rem;color:#667568;white-space:nowrap}
kbd{display:inline-block;min-width:22px;padding:1px 4px;border:1px solid #aaa18b;border-bottom-width:2px;border-radius:4px;background:#fff;color:#354338;font:800 .66rem 'Source Code Pro',monospace;text-align:center}
.remote-servo-controls{display:grid;grid-template-columns:35px minmax(90px,1fr) 35px;gap:7px;align-items:center}
.remote-servo-controls button{height:32px;border:1px solid #a6bba9;border-radius:6px;background:#e4eee5;color:#174f29;font:900 1.05rem 'Nunito',sans-serif;cursor:pointer}
.remote-servo-controls button:hover{background:#cee3d1}.remote-servo-controls input{width:100%}
.remote-servo-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px}
.remote-servo-card output{display:block;min-width:42px;text-align:center;color:#1a5c2e;font-size:.75rem;font-weight:900}
.remote-servo-footer label{display:flex;align-items:center;gap:4px;color:#526556;font-size:.58rem;font-weight:800;white-space:nowrap;cursor:pointer}
.remote-servo-footer input{width:14px;height:14px;margin:0;accent-color:#7253b8}
.remote-footer{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;border-top:1px solid #c8b87a;background:#eee5d2}
.remote-footer span{font-size:.63rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#6d775f}
.remote-end{min-height:37px;padding:7px 18px;border:1px solid #7f1d1d;border-radius:6px;background:#fff;color:#8d1c1c;font:800 .77rem 'Nunito',sans-serif;cursor:pointer}
.remote-end:hover{background:#fff0f0}.remote-end:disabled,.remote-close:disabled{cursor:wait;opacity:.6}

@media(max-width:1100px){
  .modal.remote-control-modal{width:calc(100vw - 8px);max-height:calc(100dvh - 8px)}
  .remote-body{grid-template-columns:225px minmax(610px,1fr);padding:9px;gap:8px}
  .remote-controls{grid-template-columns:245px minmax(350px,1fr);gap:8px}
  .remote-drive-panel,.remote-servo-panel,.remote-setup{padding:9px}
  .remote-dpad{grid-template-columns:repeat(3,70px);grid-template-rows:repeat(3,57px)}
  .remote-keyboard-map{grid-template-columns:110px 1fr}
}
@media(max-width:860px){
  .modal.remote-control-modal{overflow:auto}
  .remote-header{padding:15px 17px}.remote-body{display:block;padding:10px;overflow:visible}.remote-status,.remote-connect-prompt,.remote-setup,.remote-controls{margin-bottom:9px}.remote-controls{grid-template-columns:1fr}.remote-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .remote-servo-grid{grid-template-columns:1fr}.remote-dpad{grid-template-columns:repeat(3,82px)}
}
@media(max-width:430px){
  .remote-header p{display:none}.remote-setup-grid{grid-template-columns:1fr}.remote-dpad{grid-template-columns:repeat(3,72px)}
  .remote-footer{padding:8px 12px}.remote-footer span{display:none}.remote-end{width:100%}
}
@media(prefers-reduced-motion:reduce){.remote-status[data-state="starting"] .remote-status-dot{animation:none}}