*{box-sizing:border-box;margin:0;padding:0}:root{--width:calc((100vw / 4) * 2.8)}html,body{background-color:#000;background-image:url(/superfoot-app/assets/wood-background2-DtB9rRSJ.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;min-height:100vh;margin:0;padding:0}.main-container{flex-direction:column;justify-content:center;align-items:center;display:flex}.header{width:var(--width);margin-top:calc(var(--width) * .013);height:calc(var(--width) * .15);padding:0 calc(var(--width) * .013);color:#fff;justify-content:space-between;align-items:center;font-family:Mouse Memoirs,cursive;display:flex;box-shadow:0 4px 8px #0000001a}.header-logo{align-items:center;gap:8px;display:flex}.logo-image{height:calc(var(--width) * .15);object-fit:contain;width:auto}.buttons-container{flex-direction:row;align-items:flex-end;display:flex}.language-button{width:calc(var(--width) * .08);height:calc(var(--width) * .03);color:#fff;cursor:pointer;font-family:Urbanist,sans-serif;font-size:calc(var(--width) * .011);margin:calc(var(--width) * .004) calc(var(--width) * .008);filter:drop-shadow(-5px 5px 5px #000000ef);background:#0f0f0f81;border:1px solid #ffb5b53b;border-radius:5px;font-weight:800;transition:background .3s,transform .2s}.bank-button{width:calc(var(--width) * .12);height:calc(var(--width) * .03);color:#fff;border-radius:calc(var(--width) * .009);cursor:pointer;font-family:Urbanist,sans-serif;font-size:calc(var(--width) * .011);margin:calc(var(--width) * .004) calc(var(--width) * .008);filter:drop-shadow(-5px 5px 5px #000000ef);background:#1600009a;border:1px solid #ffb5b53b;font-weight:800;transition:background .3s,transform .2s}.bank-button:hover{background:#ffffff59;transform:translateY(-1px)}.language-buttons-container{gap:calc(var(--width) * .005);display:flex}.language-buttons-container .language-button{margin:0}.language-button:hover:not(:disabled){background:#ffffff59;transform:translateY(-1px)}.language-button:disabled{opacity:.4;cursor:default;filter:none;background:#32323299;border-color:#ffffff1a}.header-right{width:300px;height:100%;padding-top:calc(var(--width) * .04);justify-content:space-between;align-items:flex-end;gap:calc(var(--width) * .005);flex-direction:column;display:flex}.firmware-version{color:#fff;text-shadow:0 2px 4px #000000b3;width:var(--width);padding:0 calc(var(--width) * .013);text-align:right;font-family:Courier New,Courier,monospace;font-size:calc(var(--width) * .015);margin-top:8px}.device-status{align-items:center;gap:calc(var(--width) * .005);display:inline-flex}.status-text{color:#fff;font-family:Urbanist,sans-serif;font-size:calc(var(--width) * .016);font-weight:400}.status-led{width:calc(var(--width) * .03);height:calc(var(--width) * .03);object-fit:contain}#superfoot-img-container{width:var(--width);height:calc(var(--width) / 2);z-index:0;filter:drop-shadow(-30px 15px 15px #000000ef);background-image:url(/superfoot-app/assets/superfoot-body-B1XnM_nq.png);background-position:50%;background-repeat:no-repeat;background-size:cover;margin:0 auto;padding:0;position:relative}.led-hidden{opacity:0;transition:opacity .15s ease-in-out}.led-visible{opacity:1;transition:opacity .15s ease-in-out}.pedals-top,.pedals-bottom{cursor:pointer;z-index:1;opacity:0;transition:opacity .12s ease-in-out}.pedal-hidden{opacity:0}.pedal-visible{opacity:1}.menu-dropdown-container{display:inline-block;position:relative}.icon-dropdown-button{color:#fff;cursor:pointer;margin:0 calc(var(--width) * .008);filter:drop-shadow(1px 1px #000)drop-shadow(-1px -1px #000)drop-shadow(1px -1px #000)drop-shadow(-1px 1px #000)drop-shadow(4px 4px 4px #000000b3);background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:transform .9s,filter .2s,color .2s;display:flex}@keyframes gear-jump{0%,80%,to{transform:translateY(0)}85%{transform:translateY(-6px)}90%{transform:translateY(0)}95%{transform:translateY(-3px)}}.icon-dropdown-button svg{width:calc(var(--width) * .035);height:calc(var(--width) * .035);animation:2s ease-in-out infinite gear-jump}.icon-dropdown-button:hover{filter:drop-shadow(1px 1px #000)drop-shadow(-1px -1px #000)drop-shadow(1px -1px #000)drop-shadow(-1px 1px #000)drop-shadow(6px 6px 6px #000000e6);transform:rotate(90deg)scale(1.1)}.menu-dropdown-content{-webkit-backdrop-filter:blur(10px);min-width:calc(var(--width) * .25);z-index:10;border-radius:calc(var(--width) * .009);opacity:0;background-color:#160000bd;border:1px solid #000;flex-direction:column;max-height:0;padding:0;transition:max-height .9s,opacity .9s,padding .9s;display:flex;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:6px 6px 15px #000c}.menu-dropdown-content.open{opacity:1;max-height:500px;padding:calc(var(--width) * .005) 0}.dropdown-item-button{color:#fff;padding:calc(var(--width) * .01) calc(var(--width) * .015);text-align:right;cursor:pointer;width:100%;font-family:Urbanist,sans-serif;font-size:calc(var(--width) * .011);white-space:nowrap;background:0 0;border:none;font-weight:800;transition:background .3s,color .3s}.dropdown-item-button:hover{background:#fff3}.dropdown-separator{height:1px;margin:calc(var(--width) * .005) 0;background-color:#000}.program-device-button{color:#fff;text-shadow:0 0 5px #ff000080}.program-device-button:hover{background:#ff00004d}.rotate-warning{color:#fff;text-align:center;background-color:#000;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex}.rotate-warning-logo{width:60%;max-width:250px;height:auto;margin-bottom:30px}.rotate-warning-text{max-width:300px;margin-bottom:30px;font-family:Urbanist,sans-serif;font-size:1.5rem}.rotate-phone-icon{border:4px solid #fff;border-radius:10px;width:60px;height:100px;animation:2s ease-in-out infinite rotatePhone;position:relative}.rotate-phone-icon:after{content:"";background:#fff;border-radius:50%;width:15px;height:15px;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}@keyframes rotatePhone{0%{transform:rotate(0)}50%{transform:rotate(-90deg)}to{transform:rotate(-90deg)}}.main-container.mobile-mode{--width:75vw;flex-direction:row;justify-content:space-evenly;align-items:center;width:100vw;height:100vh;overflow:hidden}.main-container.mobile-mode .header{width:20vw;height:40vw;box-shadow:none;flex-direction:column;justify-content:center;align-items:flex-start;margin:0;padding:0 0 0 10px}.main-container.mobile-mode .header-right{justify-content:flex-start;align-items:flex-start;width:100%;padding-top:0}.main-container.mobile-mode .buttons-container{flex-direction:column;align-items:flex-start;width:100%}.main-container.mobile-mode .bank-button{width:90%;height:25px;margin:5px 0;font-size:.5rem}.main-container.mobile-mode .language-buttons-container{gap:10px;width:90%;margin:5px 0;display:flex}.main-container.mobile-mode .language-buttons-container .language-button{width:100%;height:20px;margin:0;font-size:.5rem}.main-container.mobile-mode .logo-image{width:100%;max-width:120px;height:auto}.main-container.mobile-mode .status-text{font-size:.5rem}.main-container.mobile-mode .status-led{width:15px;height:15px}.main-container.mobile-mode .menu-dropdown-content{min-width:90%;box-shadow:none;opacity:1;background:0 0;border:none;max-height:1000px;padding:0;position:static;overflow:visible}.main-container.mobile-mode .dropdown-item-button{text-align:left;background:#1600009a;border:1px solid #ffb5b53b;border-radius:5px;margin:2px 0;padding:5px;font-size:.5rem}.main-container.mobile-mode .dropdown-item-button:active{background:#ffffff59}.main-container.mobile-mode .icon-dropdown-button{display:none}.led-azul{top:calc(var(--width) * .069);width:calc(var(--width) * .0492);height:calc(var(--width) * .0492);background-image:url(/superfoot-app/assets/ledAzul-BOgOlSHU.png);background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute}.led-verde{width:calc(var(--width) * .0492);height:calc(var(--width) * .0492);background-image:url(/superfoot-app/assets/ledVerde-CMFBCNzh.png);background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute}.led-rojo{width:calc(var(--width) * .0492);height:calc(var(--width) * .0492);background-image:url(/superfoot-app/assets/ledRojo-nqTqsLw9.png);background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute}#led1{left:calc(var(--width) * .069)}#led2{left:calc(var(--width) * .098)}#led3{left:calc(var(--width) * .129)}#led4{left:calc(var(--width) * .159)}#led5{left:calc(var(--width) * .189)}#led6{left:calc(var(--width) * .219)}#led7{left:calc(var(--width) * .249)}#led8{left:calc(var(--width) * .279)}#led9{left:calc(var(--width) * .309)}#led10{left:calc(var(--width) * .339)}#ledA{left:calc(var(--width) * .088);top:calc(var(--width) * .137)}#ledB{left:calc(var(--width) * .282);top:calc(var(--width) * .137)}#ledC{left:calc(var(--width) * .474);top:calc(var(--width) * .137)}#ledD{left:calc(var(--width) * .668);top:calc(var(--width) * .137)}#ledE{left:calc(var(--width) * .088);top:calc(var(--width) * .32)}#ledF{left:calc(var(--width) * .282);top:calc(var(--width) * .32)}#ledG{left:calc(var(--width) * .474);top:calc(var(--width) * .32)}#ledH{left:calc(var(--width) * .668);top:calc(var(--width) * .32)}#ledUp{left:calc(var(--width) * .861);top:calc(var(--width) * .137)}#ledDwn{left:calc(var(--width) * .861);top:calc(var(--width) * .32)}.pedals-top{width:calc(var(--width) * .0508);height:calc(var(--width) * .0508);top:calc(var(--width) * .178);background-image:url(/superfoot-app/assets/pedalPressed-CNUsPKV0.png);background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute}.pedals-bottom{width:calc(var(--width) * .0508);height:calc(var(--width) * .0508);top:calc(var(--width) * .359);background-image:url(/superfoot-app/assets/pedalPressed-CNUsPKV0.png);background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute}#pedalA,#pedalE{left:calc(var(--width) * .087)}#pedalB,#pedalF{left:calc(var(--width) * .281)}#pedalC,#pedalG{left:calc(var(--width) * .475)}#pedalD,#pedalH{left:calc(var(--width) * .668)}#pedalUp,#pedalDwn{left:calc(var(--width) * .86)}.banktype-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;background-color:#0009;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.subtitle{color:#000;text-align:left;font-family:Urbanist,sans-serif;font-size:14px;font-weight:800}.banktype-popup{background:#ffffffb0;border:2px solid #000;border-radius:20px;width:90%;max-width:600px;max-height:80vh;padding:30px;font-family:Urbanist,sans-serif;font-size:14px;animation:.3s ease-out slideIn;overflow-y:auto;box-shadow:0 20px 40px #0000004d}.banktype-popup select,.banktype-popup option,.banktype-popup input,.banktype-popup textarea{font-family:Roboto,sans-serif}@keyframes slideIn{0%{opacity:0;transform:scale(.9)translateY(-20px)}to{opacity:1;transform:scale(1)translateY(0)}}.banktype-popup h2{text-align:center;color:#000;text-shadow:0 1px 2px #0000001a;margin-top:0;margin-bottom:20px;font-family:Mouse Memoirs,cursive;font-size:32px;font-weight:600}.banktype-popup .popup-fields{margin-top:16px}.banktype-popup .popup-field-row{align-items:center;gap:12px;margin-bottom:12px;display:flex}.banktype-popup .popup-field-row>label{color:#000;flex:0 0 42%;min-width:11.5rem;max-width:50%;font-weight:600;line-height:1.25}.banktype-popup .popup-field-row>select.popup-field-select{background:#fff;border:1px solid #ccc;border-radius:8px;flex:1;width:auto;min-width:0;padding:10px}.banktype-popup .popup-note-row{flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:12px;display:flex}.banktype-popup .popup-note-row .popup-note-label{color:#000;flex:0 0 38%;min-width:4.5rem;max-width:46%;font-weight:600;line-height:1.25}.banktype-popup .popup-note-row select.popup-field-select--note{background:#fff;border:1px solid #ccc;border-radius:8px;flex:0 55px;min-width:55px;padding:10px}.banktype-popup .popup-note-row .popup-octave-label{color:#000;flex:none;min-width:4.25rem;font-weight:600}.banktype-popup .popup-note-row select.popup-field-select--octave{background:#fff;border:1px solid #ccc;border-radius:8px;flex:0 55px;min-width:55px;padding:10px}.banktype-list{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-bottom:30px;display:grid}.banktype-item{background:#fffc;border-radius:10px;flex-direction:row;align-items:center;gap:12px;padding:15px;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 4px 8px #0000001a}.banktype-item:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.banktype-item label{color:#000;flex:none;min-width:5.5rem;font-family:Roboto,sans-serif;font-size:14px;font-weight:500}.banktype-item select{color:#000;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:8px;flex:1;min-width:0;padding:10px;font-family:Roboto,sans-serif;font-size:14px;transition:border-color .2s,box-shadow .2s}.banktype-item select:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 3px #007bff1a}.banktype-popup button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#007bff 0%,#0056b3 100%);border:none;border-radius:25px;margin:0 auto;padding:12px 30px;font-family:Roboto,sans-serif;font-size:16px;font-weight:500;transition:transform .2s,box-shadow .2s;display:block;box-shadow:0 4px 8px #007bff4d}.banktype-popup button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #007bff66}.banktype-popup button:active{transform:translateY(0)}@media (width<=768px){.banktype-popup{max-width:95%;padding:20px}.banktype-list{grid-template-columns:1fr}.banktype-popup h2{font-size:24px}}.warning-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2000;background-color:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.warning-popup{text-align:left;background:#fff;border-left:5px solid #ff4757;border-radius:15px;width:90%;max-width:400px;padding:30px;font-family:Roboto,sans-serif;animation:.3s ease-out slideIn;box-shadow:0 10px 30px #00000080}.warning-popup h3{color:#ff4757;margin-top:0;margin-bottom:15px;font-family:Mouse Memoirs,cursive;font-size:24px}.warning-popup p{color:#555;margin-bottom:25px;font-size:16px;line-height:1.5}.warning-popup .popup-warning-checkbox-row{text-align:left;align-items:flex-start;gap:10px;margin-bottom:20px;display:flex}.warning-popup .popup-warning-checkbox-row label{cursor:pointer;color:#555;flex:1;min-width:0;font-size:14px;line-height:1.4}.warning-popup .popup-warning-checkbox-row input{cursor:pointer;flex-shrink:0;width:18px;height:18px;margin-top:3px}.warning-actions{justify-content:center;gap:15px;display:flex}.warning-actions button{cursor:pointer;border:none;border-radius:20px;margin:0;padding:10px 20px;font-family:Roboto,sans-serif;font-size:16px;transition:all .2s}.warning-actions .confirm-btn{color:#fff;background:linear-gradient(135deg,#ff4757 0%,#ff6b81 100%);box-shadow:0 4px 8px #ff47574d}.warning-actions .confirm-btn:hover{background:linear-gradient(135deg,#ff6b81 0%,#ff4757 100%);transform:translateY(-2px);box-shadow:0 6px 12px #ff475766}.warning-actions .cancel-btn{color:#333;background:#f1f2f6;box-shadow:0 4px 8px #0000001a}.warning-actions .cancel-btn:hover{background:#dfe4ea;transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.confirm-device-popup .confirm-device-body{color:#333;text-align:left;margin-bottom:20px;font-size:16px;line-height:1.55}.confirm-device-popup .confirm-device-body p{margin:0 0 12px}.confirm-device-popup .confirm-device-body p:last-child{margin-bottom:0}.confirm-device-ack-row{align-items:flex-start;gap:12px;margin-bottom:24px;display:flex}.confirm-device-ack-row label{color:#222;cursor:pointer;text-align:left;flex:1;min-width:0;font-size:15px;font-weight:600;line-height:1.4}.confirm-device-ack-row input{cursor:pointer;flex-shrink:0;width:18px;height:18px;margin-top:3px}.confirm-device-actions{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.confirm-device-actions button{margin:0;display:inline-block}.banktype-popup.confirm-device-popup button.confirm-device-btn-secondary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6c757d 0%,#495057 100%);border:none;border-radius:25px;padding:12px 28px;font-family:Mouse Memoirs,cursive;font-size:16px;font-weight:500;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 8px #0003}.banktype-popup.confirm-device-popup button.confirm-device-btn-secondary:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000040}.banktype-popup.confirm-device-popup button.confirm-device-btn-secondary:active{transform:translateY(0)}.banktype-popup button:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:0 2px 4px #007bff26}.banktype-popup button:disabled:hover{transform:none;box-shadow:0 2px 4px #007bff26}.send-success-popup-actions{justify-content:center;margin-top:8px;display:flex}.send-progress-popup .send-progress-description{color:#333;text-align:left;margin:0 0 12px;font-size:16px;line-height:1.5}.send-progress-popup .send-progress-disconnect-warning{color:#5c2e00;text-align:left;background:#fff3cd;border:1px solid #ffc107;border-radius:8px;margin:0 0 20px;padding:10px 12px;font-size:15px;line-height:1.5}.send-progress-bar-wrap{background:#e2e6ea;border-radius:999px;width:100%;height:18px;overflow:hidden;box-shadow:inset 0 1px 3px #0000001f}.send-progress-bar-fill{background:linear-gradient(135deg,#2b8a3e 0%,#1c7430 100%);border-radius:999px;height:100%;transition:width .35s}.send-progress-popup .send-progress-label{color:#222;text-align:center;margin:14px 0 0;font-size:15px;font-weight:600}.midimonitor-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.midimonitor-popup{color:#fff;background:#1a1a1a;border:1px solid #333;border-radius:16px;flex-direction:column;width:90%;max-width:900px;height:90vh;padding:24px;display:flex;box-shadow:0 20px 40px #0009}.midimonitor-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;display:flex}.midimonitor-header h2{color:#0fc;letter-spacing:1px;text-align:center;flex:1;margin:0;padding-left:140px;font-family:Mouse Memoirs,cursive;font-size:32px;font-weight:600}.midimonitor-actions{justify-content:flex-end;gap:12px;width:140px;display:flex}.monitor-btn{color:#fff;cursor:pointer;background:#333;border:none;border-radius:6px;padding:8px 16px;font-family:Roboto,sans-serif;font-size:.9rem;transition:all .2s}.monitor-btn:hover{background:#444}.monitor-btn.clear{background:#c0392b}.monitor-btn.clear:hover{background:#e74c3c}.midimonitor-content{background:#000;border:1px solid #222;border-radius:8px;flex:1;padding:0;overflow-y:auto}.monitor-table{border-collapse:collapse;width:100%;font-family:Consolas,Monaco,Courier New,monospace;font-size:.85rem}.monitor-table th{color:#888;text-align:left;text-transform:uppercase;background:#111;border-bottom:1px solid #333;padding:10px;font-size:.75rem;font-weight:600;position:sticky;top:0}.monitor-table td{vertical-align:middle;border-bottom:1px solid #111;padding:8px 10px}.monitor-row{transition:background .1s}.monitor-row:hover{background:#ffffff0d}.type-note-on{color:#2ecc71;font-weight:700}.type-note-off{color:#e74c3c;font-weight:700}.type-cc{color:#3498db;font-weight:700}.type-pc{color:#f1c40f;font-weight:700}.type-sysex{color:#9b59b6;font-style:italic}.type-other{color:#95a5a6}.cell-time{color:#666;width:120px}.cell-type{width:100px}.cell-channel{color:#aaa;text-align:center;width:40px}.cell-num{color:#eee;text-align:center;width:100px}.cell-val{color:#eee;text-align:center;width:60px}.cell-hex{color:#555;font-size:.8rem}.midimonitor-content::-webkit-scrollbar{width:8px}.midimonitor-content::-webkit-scrollbar-track{background:#000}.midimonitor-content::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.midimonitor-content::-webkit-scrollbar-thumb:hover{background:#444}