/* =========================
   Original CSS (preserved)
   ========================= */

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  background-color: rgb(25,25,25);
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Button Styles */
.bx--btn--primary {
  cursor: pointer;
  background: linear-gradient(45deg, #462964, #9C54D5, #5EE2F0);
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  background-size: 150% 150%;
  background-position: 0% 50%;
}
.bx--btn--primary:hover {
  background-position: 100% 50%;
}

.bx--btn--secondary {
  cursor: pointer;
  background: linear-gradient(45deg, #3b3b3b, #727272);
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  background-size: 150% 150%;
  background-position: 0% 50%;
}
.bx--btn--secondary:hover {
  background-position: 100% 50%;
}

.bx--btn--danger {
  cursor: pointer;
  background: linear-gradient(45deg, #5dace4, #5EE2F0);
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  background-size: 150% 150%;
  background-position: 0% 50%;
}
.bx--btn--danger:hover {
  background-position: 100% 50%;
}

.bx--btn--tertiary {
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  border-color: #9C54D5;
  background-color: rgba(0,0,0,0);
  color: #9C54D5;
}
.bx--btn--tertiary:hover {
  cursor: pointer;
  background: linear-gradient(45deg, #462964, #9C54D5, #5EE2F0);
  transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border-color: #9C54D5;
  border-width: 1px;
  border-style: solid;
  background-size: 150% 150%;
  background-position: 100% 50%;
}

/* Logos */
.pedalplex-logo {
  width: 25px;
  height: 25px;
  mask-image: url('logos/pedalplex_logo_white.png');
  -webkit-mask-image: url('logos/pedalplex_logo_white.png');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  background: white;
  display: inline-block;
  transition: background 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pedalplex-logo:hover {
  background: linear-gradient(45deg, #462964, #9C54D5, #5EE2F0);
}


.pedalplex-logo-fullscreen-menu {
  width: 100px;
  height: 100px;
  mask-image: url('logos/pedalplex_logo_white.png');
  -webkit-mask-image: url('logos/pedalplex_logo_white.png');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  background: linear-gradient(45deg, #462964, #9C54D5, #5EE2F0);
  display: inline-block;
}

.pedalplex-logo-fullscreen-menu:hover {
  background-position: 100% 50%;
}


/* Inputs */
#username, #password, #email, #newPassword, #oldPassword {
  font-size: 0.875rem;
  padding: 6px 12px;
  border: 1px solid rgb(140, 140, 140);
  border-radius: 4px;
  outline-offset: 2px;
  width: 150px;
  height: 28px;
}

/* Menu */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
}
.menu-icon, .close-icon {
  width: 24px;
  height: 24px;
}
.menu-icon { fill: #ffffff; }
.close-icon { fill: #161616; }

/* Title */
.title {
  position: relative;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}

/* Fullscreen Menu */
.fullscreen-menu {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  display: none;
  flex-direction: column;
  z-index: 5000;
}
.fullscreen-menu.active { display: flex; }
.fullscreen-header {
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
}
.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  left: 16px;
}
.fullscreen-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fullscreen-nav a {
  margin: 1rem;
  font-size: 1.5rem;
  text-decoration: none;
  color: #161616;
}



/* Page content */
#page-content { padding-top: 64px; }
.swal2-container { z-index: 99999 !important; }
body { background: #2e2e2e; color: #fff; padding: 20px; font-family: 'IBM Plex Sans', sans-serif; }
html { box-sizing: content-box !important; }
*, *::before, *::after { box-sizing: inherit !important; }

/* Auth container */
.auth-container {
  margin: 80px auto;
  max-width: 400px;
  padding: 0 16px; /* safe padding */
  box-sizing: border-box;
}

/* Inputs override */
#username, #password, #email, #newPassword, #oldPassword {
  width: 100% !important;   /* fill available space */
  max-width: 100% !important;
  height: auto;             /* let Carbon style dictate height */
  font-size: 1rem;
  padding: 10px 12px;
}

/* Submit button – always regular size */
#submitBtn {
  width: auto !important;
  max-width: none !important;
  display: inline-block; /* keeps natural button size */
}

/* Password toggle stays inside input */
#togglePassword {
  padding: 4px;
  line-height: 0;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .auth-container {
    margin-top: 40px;
    padding: 0 12px;
  }
  .auth-container h2 {
    font-size: 1.25rem;
  }
  .toggle-link {
    font-size: 0.9rem;
  }
}




/* Pedal dropdowns, catalog */
#pedalAddDropdownContainer { background: white; max-height: 300px; overflow-y: auto; width: 200px; z-index: 1000; }
#catalog, #selected-pedals { margin-top: 1rem; min-height: 2rem; }
#preset { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 100vw; white-space: normal; }
#catalog { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 100vw; white-space: normal; }
#pedalboard { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pedal-catalog, .pedal { border-radius: 10px; padding: 12px; display: flex; flex-direction: column; align-items: center; position: relative; }
.pedal-catalog[style*="display: none"] { display: none !important; }
.pedal-name { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; width: max-content; }
.head-name { position: absolute; }
.row { display: flex; justify-content: center; gap: 10px; margin: 4px 0; }
.row > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0px; min-width: 40px; }
.row.lowest-row > div { min-width: 0px; }
.row > div > select { margin-bottom: 10px; }
#pedalboardSelect, #presetSelect, #folderSelect, #folderSelectInput, #selectFolder { height: 40px; font-size: initial; max-width: 11rem; }
#pedalFilterInput { height: 13px; }
.lower-row { position: relative; top: 50px; }
.lowest-row { position: relative; top: 85px; }

/* Knobs */
.knob-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 60px; }
.knob, .smallknob, .largeknob, .xlargeknob {
  width: 40px; height: 40px; border-radius: 50%; position: relative; cursor: pointer; box-sizing: border-box; aspect-ratio: 1 / 1; flex-shrink: 0;
}
.smallknob { width: 26px; height: 26px; margin-bottom: 4px; }
.largeknob { width: 52px; height: 52px; margin-bottom: 4px; }
.xlargeknob { width: 75px; height: 75px; margin-bottom: 4px; }
.knob::after, .smallknob::after, .largeknob::after, .xlargeknob::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 2px; background-color: var(--indicator-color, #fff);
}
.knob::after { top: 2px; width: 4px; height: 12px; }
.smallknob::after { top: 0; width: 4px; height: 9px; }
.largeknob::after { top: 5px; width: 4px; height: 16px; }
.xlargeknob::after { top: 5px; width: 4px; height: 20px; }

/* Thick knob adjustments */
.knob.thick::after { top: -9px; height: 20px; }
.smallknob.thick::after { top: -9px; height: 16px; }
.largeknob.thick::after { top: -8px; height: 20px; }
.xlargeknob.thick::after { top: -12px; }

/* Knob labels */
.knob-value-label { font-size: 12px; font-weight: bold; color: inherit; user-select: none; text-align: center; }
.label-top { text-align: center; font-size: 12px; margin-bottom: 2px; z-index: 100; }

/* Knob tooltips */
.bx--tooltip__label { text-align: center; width: 100%; display: block!important; color:#ffffff }
.bx--tooltip { min-width: 2rem; }

/* LED */
.led { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; transition: box-shadow 0.3s ease; z-index: 10; }
.row > div > .led, .row > div > input[type="checkbox"] { margin-top: 4px; align-self: center; }

/* Alignment helpers */
.align-left { position: absolute; left: 12px; }
.align-right { position: absolute; right: 12px; }
.align-bottom { margin-top: 25px; }
.align-top { margin-top: -15px; }
.align-top-est { margin-top: -125px; }

/* Slider containers */
.slider-container { display: flex; flex-direction: column; align-items: center; margin: 0 -12px; }
input[type="range"].vertical { writing-mode: bt-lr; appearance: slider-vertical; width: 8px; height: 100px; background: transparent; }
input[type="range"].verticalsmall { writing-mode: bt-lr; appearance: slider-vertical; width: 8px; height: 50px; background: transparent; }
input[type="range"].horizontal { width: 100%; height: 6px; }
.slider-label { margin-bottom: 4px; font-size: 12px; }

/* Builder */
#builder { display:flex; gap:20px; flex-wrap:wrap; }
#editor { flex: 0 0 55%; min-width:300px; padding:12px; border-radius:8px; }
#preview { flex: 0 0 40%; min-width:200px; padding:12px; border-radius:8px; color:white; }
#pedal-box { position:relative; }
.row-actions { margin-top:6px; display:flex; flex-direction:row!important; }
.row-buttons, .controls-row { display:flex; flex-direction:row!important; gap:6px; flex-wrap:nowrap; }
.row-buttons, .controls-row button { flex:0 0 auto; white-space:nowrap; }
.control { background:#222; padding:6px; margin:6px 0; border-radius:6px; z-index:200; }
.control label { display:block; font-size:12px; margin:2px 0; }
.ctrl-actions { gap:4px; flex-direction: column; }
.ctrl-label { width:70px; }
.ctrl-num, .ctrl-text { width:50px; }
button { cursor:pointer; margin-left:0px!important; }
input { font-size: 0.875rem; border: 1px solid rgb(140, 140, 140); border-radius: 4px; outline-offset: 2px; }
.create-gear-input { padding: 6px 12px; }
input[type="color"] { width: 30px; border: 0px; margin:0px; cursor: pointer; padding: 0px; outline-offset: 0px; border-radius: 0px; background-color:transparent; }
.pedal-info label { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 12px;}
.pedal-info input { width: 94%; box-sizing: border-box; }
.ctrl-width, .ctrl-height { width:50px; }

#pedal-published-options { list-style: none; padding: 0; margin: 0; }

/* Pedal item */
.pedal-item { cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; margin: 5px; display: inline-block; border-radius: 4px; background-color: white; position: relative; box-shadow: #000000 0 0 8px 3px; }
.pedal-item:hover:not(.selected-catalog) { background-color: #eef; }
.pedal-item.selected-catalog { background-color: #ddd; color: #888; cursor: default; }
.pedal-item.selected-board { background-color: #fff5e6; cursor: grab; }
.delete-btn { position: absolute; top: -8px; right: -8px; background: red; color: white; border: none; border-radius: 50%; font-size: 12px; cursor: pointer; }

/* Pedal catalog buttons */
.pedal-catalog .edit-btn { position: absolute; top: -6px; right: -5px; background: linear-gradient(45deg, #462964, #9C54D5, #5EE2F0); transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease; background-size: 150% 150%; background-position: 0% 50%; border-radius: 50%; border: none; cursor: pointer; width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; }
.edit-btn svg { width: 16px; height: 16px; fill: white; pointer-events: none; }
.edit-btn:hover { background-position: 100% 50%; }

.pedal-catalog .duplicate-btn { position: absolute; top: -6px; right: -5px; border-radius: 50%; border: none; cursor: pointer; width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; }
.duplicate-btn svg { width: 16px; height: 16px; fill: white; pointer-events: none; }

#selected-pedals { display: flex; flex-wrap: wrap; gap: 8px; }
.drag-over { border: 2px dashed #555; }
.dragging { opacity: 0.5; }

.rotate-btn { position: absolute; bottom: -8px; right: -8px; background: #0078d7; color: white; border: none; border-radius: 50%; font-size: 12px; cursor: pointer; }

/* Loading overlay */
.bx--loading-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; background: none; }
.bx--text-input { border-radius: 8px; }
.bx--btn { margin-left: 8px!important; min-height: 0.5rem; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 16px; max-width: 8rem!important; }

.pedal-author { font-size: 0.7em; color: #aaa; text-align: right; position: absolute; pointer-events: none; user-select: none; bottom: -14px; left: -3px; }
.modal-footer { display: block; margin: auto; position: relative; padding-bottom: 40px; }

/* Fonts (all preserved) */
@font-face { font-family: bigmuff; src: url("fonts/ITC\ Pioneer\ Regular.otf"); }
@font-face { font-family: pioneer; src: url("fonts/ITC\ Pioneer\ Regular.otf"); }
@font-face { font-family: boss; src: url("fonts/BossStyle-Bold.otf"); }
@font-face { font-family: amped; src: url("fonts/BebasNeue-Regular.otf"); }
@font-face { font-family: bebasneue; src: url("fonts/BebasNeue-Regular.otf"); }
@font-face { font-family: mxr; src: url("fonts/eurostile.TTF"); }
@font-face { font-family: eurostyle; src: url("fonts/eurostile.TTF"); }
@font-face { font-family: tsmini; src: url("fonts/Schluber.otf"); }
@font-face { font-family: schluber; src: url("fonts/Schluber.otf"); }
@font-face { font-family: sp; src: url("fonts/Lobster-Regular.ttf"); }
@font-face { font-family: lobster; src: url("fonts/Lobster-Regular.ttf"); }
@font-face { font-family: orangeamps; src: url("fonts/AmpedOrange.ttf"); }
@font-face { font-family: ampedorange; src: url("fonts/AmpedOrange.ttf"); }
@font-face { font-family: marshall; src: url("fonts/Amplify_PersonalUseOnly.ttf"); }
@font-face { font-family: amplify; src: url("fonts/Amplify_PersonalUseOnly.ttf"); }
@font-face { font-family: vox; src: url("fonts/PlayfairDisplay-Black.ttf"); }
@font-face { font-family: playfair; src: url("fonts/PlayfairDisplay-Black.ttf"); }
@font-face { font-family: bubbly; src: url("fonts/Talina.otf"); }
@font-face { font-family: talina; src: url("fonts/Talina.otf"); }
@font-face { font-family: ibanez; src: url("fonts/SecretAgentPersonalUse-vPzE.ttf"); }
@font-face { font-family: secretagent; src: url("fonts/SecretAgentPersonalUse-vPzE.ttf"); }
@font-face { font-family: fender; src: url("fonts/StratoRegular-2d5o.ttf"); }
@font-face { font-family: strato; src: url("fonts/StratoRegular-2d5o.ttf"); }
@font-face { font-family: walrus; src: url("fonts/acumin-pro-condensed.otf"); }
@font-face { font-family: acumin; src: url("fonts/acumin-pro-condensed.otf"); }
@font-face { font-family: yamaha; src: url("fonts/yamaha.ttf"); }
@font-face { font-family: strymon1; src: url("fonts/dinot-regular.otf"); }
@font-face { font-family: dinot; src: url("fonts/dinot-regular.otf"); }
@font-face { font-family: moonieeyes; src: url("fonts/MoonieEyes.otf"); }
@font-face { font-family: goldenhills; src: url("fonts/GoldenHills.ttf"); }
@font-face { font-family: cute; src: url("fonts/cute.ttf"); }
@font-face { font-family: grapple; src: url("fonts/grapple.ttf"); }
@font-face { font-family: funky; src: url("fonts/TF\ Funky\ Fusion\ Demo.ttf"); }
@font-face { font-family: balloon; src: url("fonts/balloon.TTF"); }
@font-face { font-family: fuzzface; src: url("fonts/staccato.TTF"); }
@font-face { font-family: staccato; src: url("fonts/staccato.TTF"); }
@font-face { font-family: compacta; src: url("fonts/CompactaPlain.ttf"); }
@font-face { font-family: mesa; src: url("fonts/Cowboys\ 2.0.otf"); }
@font-face { font-family: cowboys; src: url("fonts/Cowboys\ 2.0.otf"); }
@font-face { font-family: dookie; src: url("fonts/Bad\ Dookie\ NF\ Regular.ttf"); }
@font-face { font-family: script; src: url("fonts/Avenue\ de\ Madison.ttf"); }
@font-face { font-family: avenue; src: url("fonts/Avenue\ de\ Madison.ttf"); }
@font-face { font-family: cloister; src: url("fonts/CloisterBlack.ttf"); }
@font-face { font-family: stencil; src: url("fonts/Stencilia-A.ttf"); }
@font-face { font-family: broken; src: url("fonts/BROKEN74.TTF"); }
@font-face { font-family: baliw; src: url("fonts/Baliw.ttf"); }
@font-face { font-family: neonstar; src: url("fonts/Neonstar.ttf"); }
@font-face { font-family: bubbleboddy; src: url("fonts/Bubbleboddy-FatTrial.ttf"); }
@font-face { font-family: tallboy; src: url("fonts/TALLBOY.otf"); }
@font-face { font-family: doublebubble; src: url("fonts/Double_Bubble_shadow.otf"); }
@font-face { font-family: nightstalker; src: url("fonts/Night\ Stalker\ Free.ttf"); }
@font-face { font-family: arista; src: url("fonts/Arista-Pro-Fat-trial.ttf"); }
@font-face { font-family: monsters; src: url("fonts/MonstersHeart-Regular.ttf"); }
@font-face { font-family: magneto; src: url("fonts/MAGNETOB.TTF"); }
@font-face { font-family: mistress; src: url("fonts/knuckled.ttf"); }
@font-face { font-family: knuckled; src: url("fonts/knuckled.ttf"); }
@font-face { font-family: bolton; src: url("fonts/Bolton.ttf"); }
@font-face { font-family: MIB; src: url("fonts/MIB.ttf"); }
@font-face { font-family: thorema; src: url("fonts/thorema-demo.regular.ttf"); }
@font-face { font-family: pixeland; src: url("fonts/Pixeland.ttf"); }
@font-face { font-family: minecraft; src: url("fonts/Minecraft.ttf"); }
@font-face { font-family: ducky; src: url("fonts/jd_ducky.ttf"); }
@font-face { font-family: godmother; src: url("fonts/fairy_godmother.otf"); }


/* Diamond plate */
.diamond-plate {
  display: block;
  position: relative;
  background-color: rgba(150, 150, 150, 1);
  background-image:
    linear-gradient(144deg, rgba(150,150,150,1) 10px, transparent 11px),
    linear-gradient(-34deg, rgba(150,150,150,1) 10px, transparent 11px),
    linear-gradient(132deg, rgba(255,255,255, 1) 10px, transparent 11px),
    linear-gradient(128deg, rgba(200,200,200, 0.7) 10px, transparent 11px),
    linear-gradient(-41deg, rgba(200,200,200, 1) 11px, transparent 12px),
    linear-gradient(-52deg, rgba(255,255,255, 1) 11px, transparent 12px),
    linear-gradient(-125deg, rgba(150,150,150,1) 10px, transparent 11px),
    linear-gradient(55deg, rgba(150,150,150,1) 10px, transparent 11px),
    linear-gradient(-132deg, rgba(200,200,200, 1) 10px, transparent 11px),
    linear-gradient(-141deg, rgba(255,255,255, 1) 10px, transparent 11px),
    linear-gradient(42deg, rgba(255,255,255, 1) 11px, transparent 12px),
    linear-gradient(38deg, rgba(200,200,200, 0.5) 11px, transparent 12px);
  background-size: 40px 40px;
  background-position:
    -6px 4px, -5px -5px,
    -5px 5px, -5px 6px,
    -5px -5px, -5px -6px,
    -9px 0px, -1px 0px, 
    -10px 0px, -11px 0px,
    -1px 0px, 0px 0px;
  background-repeat: repeat;
  height: 0;
  width: auto;
  padding-bottom: 72px;
  top: -10px;
  border-radius: 4px;
}
.diamond-plate-black {
  display: block;
  position: relative;
  background-color: #363437;
  background-image:
    linear-gradient(144deg,#363437 10px, transparent 11px),
    linear-gradient(-34deg, #363437 10px, transparent 11px),
    linear-gradient(132deg, rgba(255,255,255, 1) 10px, transparent 11px),
    linear-gradient(128deg, rgba(200,200,200, 0.7) 10px, transparent 11px),
    linear-gradient(-41deg, rgba(200,200,200, 1) 11px, transparent 12px),
    linear-gradient(-52deg, rgba(255,255,255, 1) 11px, transparent 12px),
    linear-gradient(-125deg, #363437 10px, transparent 11px),
    linear-gradient(55deg, #363437 10px, transparent 11px),
    linear-gradient(-132deg, rgba(200,200,200, 1) 10px, transparent 11px),
    linear-gradient(-141deg, rgba(255,255,255, 1) 10px, transparent 11px),
    linear-gradient(42deg, rgba(255,255,255, 1) 11px, transparent 12px),
    linear-gradient(38deg, rgba(200,200,200, 0.5) 11px, transparent 12px);
  background-size: 40px 40px;
  background-position:
    -6px 4px, -5px -5px,
    -5px 5px, -5px 6px,
    -5px -5px, -5px -6px,
    -9px 0px, -1px 0px, 
    -10px 0px, -11px 0px,
    -1px 0px, 0px 0px;
  background-repeat: repeat;
  height: 0;
  width: auto;
  padding-bottom: 72px;
  top: -10px;
  border-radius: 4px;
}

/* =========================
   Responsive Merged Rules
   ========================= */
@media (max-width: 1024px) and (orientation: landscape) {
  #catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    justify-content: center;
  }
  #preset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    justify-content: center;
  }
}



  /* Generic hide/show desktop*/
  .showDesktop { display: flex !important; }
  .showMobile { display: none !important; }

/* =========================
   Mobile / Small screen adjustments
   ========================= */
@media (max-width: 768px) {

  /* Generic hide/show mobile */
  .showDesktop { display: none !important; }
  .showMobile { display: flex !important; }
  .showMobile.bx--btn--icon-only {
    width: 2.5rem;   /* 40px */
    height: 2.5rem;  /* 40px */
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;      /* keep icon centered */
    justify-content: center;
    align-items: center;
    padding: 0;
    flex: none;               /* prevent flex gap from shrinking */
  }

  header .title {
    display: none !important;
  }
  
  /* Adjust subtitle positioning if needed */
  header .subtitle {
    font-size: 1rem;
  }

  /* Hide pedal counts */
  #pedalCount, #createPedalBtn { display: none !important; }

  /* Search input takes remaining width and flows on the left */
  #pedalFilterInput {
    width: 100% !important;
    max-width: 200px;
    order: -1; /* move it before buttons in flex layout */
    margin-right: 8px;
    display: none;
    transition: all 0.3s ease;
  }

  #toggleFilterBtn {
    flex-shrink: 0;
  }

  /* Optionally adjust input width for filter */
  #pedalFilterInput {
    width: 80px !important;
  }

  header > div:last-child {
    flex-wrap: wrap; /* allow input + button to wrap nicely */
  }
}


#togglePassword {
  position: absolute; right: -14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;
}

.zoom-controls {
  position: fixed;
  bottom: -25px;
  right: 0px;
  display: flex;
  gap: 8px;
  z-index: 200;
  margin-bottom: 25px;
  padding: 15px 20px 15px 0px;
  background-color: #2e2e2e;
  width: 100%;
  justify-content: flex-end;
}

/* Desktop: keep everything in one line */
#preset-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Mobile: stack selects vertically, keep buttons on the right of their related select */
@media (max-width: 768px) {

  #preset { display: flex; flex-wrap: wrap; gap: 10px; justify-content: left; max-width: 100vw; white-space: normal; }

  /* Pedalboard select can remain full-width, no button */
  #pedalboardSelect {
    width: 100%;
    margin-left: 0;
  }

  #togglePassword {
    position: absolute; right: 25px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;
  }

  /* Folder select + button container */
  #folderSelectContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  #folderSelect {
    flex: 1;
    width: 33%;
  }
  #renameFolderBtn {
    flex: 0 0 auto; /* keep button size */
  }

  /* Preset select + button container */
  #presetSelectContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  #presetSelect {
    flex: 1; /* take remaining space */
  }
  #renamePresetBtn {
    flex: 0 0 auto; /* keep button size */
  }

  /* Inputs override */
  #username, #password, #email, #newPassword, #oldPassword {
    width: 80% !important;   /* fill available space */
    max-width: 80% !important;
    height: auto;             /* let Carbon style dictate height */
    font-size: 1rem;
    padding: 10px 12px;
  }

}

 

/* Mobile icons buttons container */
@media (max-width: 768px) {
  .mobile-icon-btns {
    justify-content: flex-start; /* horizontal layout on mobile */
  }
  .mobile-icon-btns {
    display: none; /* hide on desktop */
  }
}



/* Mobile: 3 selects in one row */
@media (max-width: 768px) {
  #preset-controls {
    flex-wrap: nowrap; /* keep them in one line */
  }



}



/* Force 3 equal columns for Features */
.features .bx--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 2rem; /* spacing between columns */
}

.features .bx--col {
  flex: 1 1 30%;   /* shrink/grow but aim for ~30% each */
  max-width: 30%;
  min-width: 250px; /* ensures readability on small screens */
}

.features h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.features p {
  color: #666;
}