.fst-wrap{padding-top:60px;padding-bottom:60px;max-width:860px}
.fst-wrap [hidden]{display:none !important}
.fst-lead{font-size:18px;margin-bottom:24px}
.fst-drop{display:block;position:relative;border:2px dashed #e72a77;border-radius:8px;padding:48px 16px;text-align:center;cursor:pointer;transition:background .2s}
.fst-drop:hover,.fst-drop.over,.fst-drop:focus-within{background:rgba(231,42,119,.08)}
.fst-drop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.fst-drop b{display:block;font-size:28px;margin-bottom:8px}
.fst-drop span{font-size:19px;opacity:.7}
.fst-msg{margin:12px 0;min-height:1.2em}.fst-msg.warn{color:#b26a00}.fst-msg.err{color:#c0152f}
#editor{margin-top:48px}
#wave{display:block;width:100%;height:210px;background:#120d13;border-radius:16px;border:1px solid rgba(231,42,119,.28);box-shadow:0 10px 30px rgba(110,18,115,.25),inset 0 0 0 1px rgba(255,255,255,.04);touch-action:none;cursor:ew-resize}
.fst-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:18px 0}
.fst-row label{display:flex;align-items:center;gap:8px;margin:0;font-size:18px}
.fst-row input,.fst-row select{font-size:18px;height:44px;padding:0 10px}
.fst-row input[type=number]{width:120px}
.fst-row .btn{font-size:18px;padding:10px 24px}
#len{font-size:18px}
.fst-priv{margin:24px 0;opacity:.8}.fst-wrap h2{margin-top:40px}
.site-loader{display:none !important}

/* Contextual tools menu + cards */
.fst-tools-nav .nav>li.active>a{color:#e72a77 !important;font-weight:700}
.fst-tools-nav .nav>li>a .fa{margin-right:4px}
.fst-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 22px;
margin-top: 28px;
}

.fst-card {
display: block;
position: relative;
overflow: hidden;
padding: 30px 24px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
background: linear-gradient(135deg, #e62a77 0%, #6e1273 100%);
text-decoration: none;
color: #ffffff !important;
box-shadow: 0 8px 22px rgba(110, 18, 115, 0.22);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto de luz decorativo */
.fst-card::before {
content: "";
position: absolute;
top: -45px;
right: -45px;
width: 130px;
height: 130px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.10);
pointer-events: none;
transition: transform 0.35s ease;
}

.fst-card:hover,
.fst-card:focus {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(110, 18, 115, 0.35);
text-decoration: none;
color: #ffffff !important;
}

.fst-card:hover::before {
transform: scale(1.35);
}

/* Iconos blancos */
.fst-card .fa {
display: block;
position: relative;
font-size: 34px;
color: #ffffff !important;
margin-bottom: 18px;
transition: transform 0.3s ease;
}

.fst-card:hover .fa {
transform: scale(1.12);
}

/* Títulos */
.fst-card b {
display: block;
position: relative;
font-size: 21px;
font-weight: 700;
line-height: 1.35;
margin-bottom: 10px;
color: #ffffff !important;
}

/* Descripciones */
.fst-card span {
display: block;
position: relative;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9) !important;
opacity: 1;
}

/* Ajustes para móviles */
@media (max-width: 600px) {
.fst-cards {
grid-template-columns: 1fr;
gap: 16px;
}

.fst-card {
    padding: 24px 20px;
    border-radius: 14px;
}

}

/* File list (converter) */
.fst-files{list-style:none;padding:0;margin:0 0 8px}
.fst-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 0;border-bottom:1px solid rgba(128,128,128,.25);font-size:18px}
.fst-file .n{flex:1 1 220px;font-weight:600;word-break:break-all;color:#111}
.fst-file .sz{color:#444}
.fst-file .st{min-width:170px;color:#222}.fst-file .st.ok{color:#1b7a3d}.fst-file .st.err{color:#c0152f}
.fst-file .btn{font-size:16px;padding:6px 16px}
.fst-wrap ul.fst-tips{padding-left:20px}.fst-tips li{margin-bottom:6px}

/* Compact drop zone once files are loaded */
.fst-drop.compact{padding:14px 16px;border-width:1px}
.fst-drop.compact b{font-size:18px;margin:0}
.fst-drop.compact span{display:none}

#dl{min-width:190px}
.fst-row .fst-msg{margin:0}

/* Audio joiner list */
.fst-joiner .st{min-width:0}
.fst-joiner .idx{width:28px;color:#e72a77;font-weight:700}
.fst-joiner .ctl{display:flex;gap:6px}
.fst-joiner .fst-mini{font-size:16px;padding:2px 10px}
.fst-joiner .fst-file{cursor:grab}
#total{font-size:18px;color:#222}

.fst-row input[type=checkbox]{width:20px;height:20px;padding:0}

#wave.static{cursor:default}
.fst-row input[type=range]{width:min(320px,60vw);height:auto;padding:0}
#vl{font-size:18px;min-width:130px;color:#222}

/* Equalizer */
.fst-eq{margin:18px 0}
.fst-band{display:grid;grid-template-columns:170px 1fr 70px;gap:12px;align-items:center;margin:10px 0;font-size:18px}
.fst-band small{opacity:.7;margin-left:6px}
.fst-band input[type=range]{width:100%;height:auto;padding:0}
.fst-band output{text-align:right;color:#222}
@media (max-width:600px){.fst-band{grid-template-columns:110px 1fr 60px}.fst-band small{display:block;margin:0}}
#thro{font-size:18px;min-width:70px;color:#222}

/* Range outputs */
.fst-row output{min-width:70px;font-size:18px;color:#222}

/* ===== Modern controls (selects, inputs, buttons, sliders) ===== */
/* Selects (Format, Bitrate, Mode...) and number fields */
.fst-wrap .fst-row select,.fst-wrap .fst-row input[type=number]{font-size:17px;font-weight:600;height:44px;color:#2a1a24 !important;background-color:#fff !important;border:1.5px solid rgba(231,42,119,.32) !important;border-radius:12px !important;box-shadow:0 1px 2px rgba(110,18,115,.06);transition:border-color .2s,box-shadow .2s}
.fst-wrap .fst-row select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 42px 0 16px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e72a77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 16px center !important;background-size:14px 9px !important}
.fst-wrap .fst-row input[type=number]{padding:0 14px}
.fst-wrap .fst-row select option{color:#2a1a24;background:#fff}
.fst-wrap .fst-row select:hover,.fst-wrap .fst-row input[type=number]:hover{border-color:rgba(231,42,119,.6) !important}
.fst-wrap .fst-row select:focus,.fst-wrap .fst-row input[type=number]:focus{outline:none;border-color:#e72a77 !important;box-shadow:0 0 0 4px rgba(231,42,119,.18)}
.fst-wrap .fst-row select:disabled,.fst-wrap .fst-row input[type=number]:disabled{opacity:.5;cursor:not-allowed}
.fst-row input[type=checkbox]{accent-color:#e72a77}

/* Buttons: outlined by default, filled gradient for the main action (download / convert) */
.fst-wrap .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px !important;font-weight:600;letter-spacing:.2px;color:#e72a77 !important;background:#fff !important;border:1.5px solid #e72a77 !important;box-shadow:none;text-shadow:none;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.fst-wrap .btn:hover{background:rgba(231,42,119,.08) !important;color:#c21d63 !important;transform:translateY(-1px)}
.fst-wrap .btn:active{transform:none}
.fst-wrap .btn:focus,.fst-wrap .btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(231,42,119,.25)}
.fst-wrap .btn:disabled,.fst-wrap .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.fst-wrap #dl,.fst-wrap #go,.fst-wrap .fst-file a.btn{color:#fff !important;background:linear-gradient(135deg,#e62a77 0%,#6e1273 100%) !important;border-color:transparent !important;box-shadow:0 8px 20px rgba(110,18,115,.28)}
.fst-wrap #dl:hover,.fst-wrap #go:hover,.fst-wrap .fst-file a.btn:hover{color:#fff !important;background:linear-gradient(135deg,#ff3a8a 0%,#7d1583 100%) !important;box-shadow:0 12px 26px rgba(110,18,115,.38);transform:translateY(-2px)}
.fst-wrap #dl:disabled,.fst-wrap #go:disabled{box-shadow:none}
.fst-wrap .fst-mini{padding:2px 12px;min-width:36px}

/* Sliders (equalizer bands, echo, volume...): pink instead of the browser's default blue */
.fst-wrap input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;height:28px;padding:0;margin:0;cursor:pointer;accent-color:#e72a77}
.fst-wrap input[type=range]:focus{outline:none}
.fst-wrap input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(231,42,119,.30),rgba(110,18,115,.30))}
.fst-wrap input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(231,42,119,.30),rgba(110,18,115,.30))}
.fst-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:linear-gradient(135deg,#ff5fa2,#e72a77 55%,#a21caf);border:3px solid #fff;box-shadow:0 2px 8px rgba(110,18,115,.45);transition:transform .15s ease}
.fst-wrap input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#ff5fa2,#e72a77 55%,#a21caf);border:3px solid #fff;box-shadow:0 2px 8px rgba(110,18,115,.45);transition:transform .15s ease}
.fst-wrap input[type=range]:hover::-webkit-slider-thumb,.fst-wrap input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.fst-wrap input[type=range]:hover::-moz-range-thumb,.fst-wrap input[type=range]:active::-moz-range-thumb{transform:scale(1.15)}
.fst-wrap input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(231,42,119,.28),0 2px 8px rgba(110,18,115,.45)}
.fst-wrap input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(231,42,119,.28),0 2px 8px rgba(110,18,115,.45)}

/* Drop zone: softer corners */
.fst-drop{border-radius:16px;background:rgba(231,42,119,.03)}

/* LUFS normalizer: measurement cards */
.fst-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:22px 0 8px}
.fst-stats>div{padding:16px 18px;border-radius:14px;background:#fff;border:1.5px solid rgba(231,42,119,.22);box-shadow:0 6px 18px rgba(110,18,115,.08)}
.fst-stats small{display:block;font-size:14px;color:#555;margin-bottom:4px}
.fst-stats b{display:block;font-size:26px;font-weight:700;line-height:1.2;color:#2a1a24;white-space:nowrap}
.fst-stats>.hl{border-color:transparent;background:linear-gradient(135deg,#e62a77 0%,#6e1273 100%);box-shadow:0 8px 20px rgba(110,18,115,.28)}
.fst-stats>.hl small{color:rgba(255,255,255,.85)}.fst-stats>.hl b{color:#fff}

/* Audio analyzer */
.fst-sub{font-size:20px;font-weight:700;margin:28px 0 0;color:#2a1a24}
.fst-stats.sm{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fst-stats.sm b{font-size:21px;white-space:normal;overflow-wrap:anywhere}
.fst-stats i{display:block;font-style:normal;font-size:13px;line-height:1.35;color:#666;margin-top:4px;min-height:1.35em}
.fst-stats>.hl i{color:rgba(255,255,255,.85)}
.fst-stats>.ok{border-color:rgba(27,122,61,.45)}.fst-stats>.ok b{color:#1b7a3d}
.fst-stats>.warn{border-color:rgba(178,106,0,.5)}.fst-stats>.warn b{color:#b26a00}
.fst-stats>.bad{border-color:rgba(192,21,47,.55)}.fst-stats>.bad b{color:#c0152f}


/* ===== Panel / tarjeta del editor ===== */
.fst-panel{background:#fff;border:1.5px solid rgba(231,42,119,.22);border-radius:20px;box-shadow:0 10px 30px rgba(110,18,115,.10);padding:8px 28px}
.fst-panel-sec{padding:22px 0;border-bottom:1px solid rgba(231,42,119,.14)}
.fst-panel-sec:last-child{border-bottom:0}
.fst-panel-h{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#e72a77}
.fst-panel #wave{box-shadow:none}
.fst-panel .fst-row{margin:0}
.fst-panel .fst-msg{margin:12px 0 0}
.fst-panel .fst-row .fst-msg{margin:0}
@media (max-width:600px){.fst-panel{padding:4px 16px;border-radius:16px}}

/* ===== Tarjeta de explicación ===== */
.fst-infowrap{padding-left:15px;padding-right:15px}
.fst-info{margin-top:10px;padding:28px;border-radius:20px;background:linear-gradient(135deg,rgba(231,42,119,.06),rgba(110,18,115,.06));border:1.5px solid rgba(231,42,119,.18)}
.fst-wrap .fst-info h2{margin:0 0 20px}
.fst-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fst-tip{background:#fff;border-radius:14px;padding:20px;border:1px solid rgba(231,42,119,.16);box-shadow:0 4px 14px rgba(110,18,115,.06)}
.fst-tip .fa{display:block;font-size:24px;color:#e72a77;margin-bottom:10px}
.fst-tip b{display:block;font-size:18px;margin-bottom:6px;color:#2a1a24}
.fst-tip span{display:block;font-size:16px;line-height:1.55;color:#444}
.fst-note{margin:18px 0 0;font-size:15px;color:#555}
@media (max-width:992px){.fst-info-grid{grid-template-columns:1fr}}
@media (max-width:700px){.fst-info{padding:18px}}

/* ===== More free audio tools (mismo margen que el menú) ===== */
.fst-more{padding:80px 15px 70px}
.fst-more h2{margin:0 0 6px}
.fst-more .fst-cards{grid-template-columns:repeat(4,1fr)}
@media (max-width:992px){.fst-more .fst-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.fst-more .fst-cards{grid-template-columns:1fr}}
.fst-more-wrap{text-align:center;margin:34px 0 0}
.fst-more-btn{display:inline-block;padding:12px 38px;border-radius:999px;font-size:18px;font-weight:600;text-decoration:none;color:#fff !important;background:linear-gradient(135deg,#e62a77 0%,#6e1273 100%);box-shadow:0 8px 20px rgba(110,18,115,.28);transition:transform .2s ease,box-shadow .2s ease}
.fst-more-btn:hover,.fst-more-btn:focus{color:#fff !important;text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 26px rgba(110,18,115,.38)}

/* ===== Ajustes para paneles con varias filas y tarjetas de explicación ===== */
.fst-panel .fst-row + .fst-row,.fst-panel .fst-eq + .fst-row,.fst-panel .fst-row + .fst-eq{margin-top:18px}
.fst-panel .fst-eq{margin:0}
.fst-panel .fst-panel-h + .fst-stats{margin-top:0}
.fst-info-grid.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:992px){.fst-info-grid.c2{grid-template-columns:1fr}}
.fst-notes{margin-top:18px}
.fst-notes p{margin:0 0 10px;font-size:16px;line-height:1.6;color:#555}
.fst-notes p:last-child{margin-bottom:0}
.fst-info-sub{margin:28px 0 10px;font-size:22px;font-weight:700;color:#2a1a24}

/* Separación entre la onda y los botones que van justo debajo (p. ej. Audio Analyzer) */
.fst-panel #wave + .fst-row{margin-top:18px}

/* ===== Voice Recorder ===== */
.fst-rec{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.fst-recbtn{flex:0 0 auto;width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:34px;background:linear-gradient(135deg,#e62a77 0%,#6e1273 100%);box-shadow:0 8px 20px rgba(110,18,115,.32);transition:transform .2s ease,box-shadow .2s ease}
.fst-recbtn:hover{transform:scale(1.06)}
.fst-recbtn:focus{outline:none;box-shadow:0 0 0 5px rgba(231,42,119,.28)}
.fst-recbtn.on{background:#c0152f;animation:fstpulse 1.4s infinite}
@keyframes fstpulse{0%{box-shadow:0 0 0 0 rgba(192,21,47,.5)}70%{box-shadow:0 0 0 18px rgba(192,21,47,0)}100%{box-shadow:0 0 0 0 rgba(192,21,47,0)}}
.fst-rectxt{flex:0 0 auto;min-width:210px}
.fst-rectxt b{display:block;font-size:40px;line-height:1.1;color:#2a1a24;font-variant-numeric:tabular-nums}
.fst-rectxt span{display:block;font-size:16px;color:#555;margin-top:4px}
.fst-meter{flex:1 1 180px;height:12px;border-radius:999px;background:rgba(231,42,119,.14);overflow:hidden}
.fst-meter i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ff5fa2,#e72a77);transition:width .08s linear}
.fst-meter i.hot{background:#c0152f}
.fst-panel .fst-rec + .fst-row{margin-top:20px}

/* ===== Online Tuner ===== */
.fst-tuner{text-align:center;padding:6px 0 0}
.fst-tnote{font-size:96px;line-height:1.05;font-weight:700;color:#2a1a24;min-height:100px}
.fst-tnote sup{font-size:34px;font-weight:600;color:#888;top:-1.4em}
.fst-gauge{position:relative;height:16px;max-width:520px;margin:20px auto 26px;border-radius:999px;background:linear-gradient(90deg,rgba(192,21,47,.28),rgba(178,106,0,.22) 30%,rgba(27,122,61,.40) 50%,rgba(178,106,0,.22) 70%,rgba(192,21,47,.28))}
.fst-gauge:after{content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:rgba(42,26,36,.45)}
.fst-gauge i{position:absolute;left:50%;top:-8px;width:8px;height:32px;margin-left:-4px;border-radius:4px;background:linear-gradient(#ff5fa2,#a21caf);box-shadow:0 2px 8px rgba(110,18,115,.45);transition:left .12s linear,background .2s;z-index:1}
.fst-tuner.ok .fst-tnote{color:#1b7a3d}
.fst-tuner.ok .fst-gauge i{background:#1b7a3d}
.fst-tstate{font-size:20px;font-weight:600;color:#2a1a24;min-height:1.5em}
.fst-tfreq{font-size:16px;color:#666;min-height:1.5em;margin-top:2px}
.fst-wrap .btn.fst-str.on{background:linear-gradient(135deg,#e62a77 0%,#6e1273 100%) !important;color:#fff !important;border-color:transparent !important}
.fst-wrap .fst-str{min-width:56px}

/* ===== Metronome ===== */
.fst-bigbpm{text-align:center;padding:4px 0 0}
.fst-bigbpm b{font-size:84px;line-height:1.05;font-weight:700;color:#2a1a24;font-variant-numeric:tabular-nums}
.fst-bigbpm span{font-size:22px;font-weight:600;color:#888;margin-left:8px}
.fst-bigbpm em{display:block;font-size:20px;font-style:normal;color:#e72a77;font-weight:600;min-height:1.5em}
.fst-dots{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.fst-dot{width:36px;height:36px;border-radius:50%;background:rgba(231,42,119,.12);border:2px solid rgba(231,42,119,.3);transition:transform .08s,background .08s}
.fst-dot.first{border-color:#e72a77}
.fst-dot.on{background:#e72a77;transform:scale(1.18)}
.fst-dot.first.on{background:#6e1273;border-color:#6e1273}
.fst-panel .fst-row.ctr{justify-content:center}
.fst-wrap #go{min-width:190px}
.fst-panel .fst-row + .fst-dots,.fst-panel .fst-dots + .fst-row{margin-top:18px}
.fst-row .fst-note{font-size:17px;color:#2a1a24;font-weight:600}
.fst-wrap #start{color:#fff !important;background:linear-gradient(135deg,#e62a77 0%,#6e1273 100%) !important;border-color:transparent !important;box-shadow:0 8px 20px rgba(110,18,115,.28)}
.fst-wrap #start:hover{color:#fff !important;background:linear-gradient(135deg,#ff3a8a 0%,#7d1583 100%) !important;transform:translateY(-2px)}

/* ===== Audio Mixer: dos zonas de carga ===== */
.fst-twodrop{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fst-twodrop .fst-drop{padding:34px 16px}
.fst-twodrop .fst-drop b{font-size:22px;word-break:break-word}
.fst-twodrop .fst-drop span{font-size:16px}
.fst-drop.loaded{border-style:solid;background:rgba(231,42,119,.06)}
@media (max-width:700px){.fst-twodrop{grid-template-columns:1fr}}

/* ===== Audio Splitter ===== */
.fst-wrap #wave.pick{cursor:crosshair}
.fst-res{margin-top:22px}
.fst-res[hidden]{display:none}
.fst-res .fst-files{margin-bottom:14px}

/* ===== Escenario estéreo (8D Audio y Pan) ===== */
.fst-stage{position:relative;height:44px;max-width:560px;margin:6px auto 18px;border-radius:999px;background:linear-gradient(90deg,rgba(231,42,119,.22),rgba(231,42,119,.06) 50%,rgba(231,42,119,.22));border:1.5px solid rgba(231,42,119,.28)}
.fst-stage:after{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;margin-left:-1px;background:rgba(42,26,36,.18)}
.fst-stage i{position:absolute;left:50%;top:5px;width:32px;height:32px;margin-left:-16px;border-radius:50%;background:linear-gradient(135deg,#ff5fa2,#e72a77 55%,#a21caf);box-shadow:0 2px 10px rgba(110,18,115,.45);z-index:1}
.fst-stage b{position:absolute;top:50%;transform:translateY(-50%);font-size:15px;color:#6e1273;opacity:.75}
.fst-stage b.l{left:16px}.fst-stage b.r{right:16px}
.fst-panel .fst-stage + .fst-row{margin-top:0}

/* ===== MP3 Tag Editor ===== */
.fst-form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px}
.fst-form label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:16px;font-weight:600;color:#2a1a24}
.fst-form label.wide{grid-column:1/-1}
.fst-wrap .fst-form input[type=text],.fst-wrap .fst-row input[type=text]{height:44px;padding:0 14px;font-size:17px;font-weight:400;color:#2a1a24 !important;background:#fff !important;border:1.5px solid rgba(231,42,119,.32) !important;border-radius:12px !important;box-shadow:0 1px 2px rgba(110,18,115,.06);transition:border-color .2s,box-shadow .2s}
.fst-wrap .fst-form input[type=text]:focus,.fst-wrap .fst-row input[type=text]:focus{outline:none;border-color:#e72a77 !important;box-shadow:0 0 0 4px rgba(231,42,119,.18)}
.fst-row input[type=text]{min-width:260px}
@media (max-width:700px){.fst-form{grid-template-columns:1fr}.fst-row input[type=text]{min-width:0;width:100%}}
.fst-cover{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fst-cover img{width:140px;height:140px;object-fit:cover;border-radius:14px;border:1.5px solid rgba(231,42,119,.28);background:#f3eef2}
.fst-cover .ph{width:140px;height:140px;border-radius:14px;border:2px dashed rgba(231,42,119,.35);display:flex;align-items:center;justify-content:center;color:#888;font-size:14px;text-align:center;padding:8px}
.fst-cover .acts{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fst-cover .acts .btn{cursor:pointer;margin:0}

/* ===== Waveform Image Generator ===== */
.fst-row input[type=color]{width:56px;height:44px;padding:3px;border-radius:10px;border:1.5px solid rgba(231,42,119,.32);background:#fff;cursor:pointer}
.fst-panel #wave.fit{margin:0 auto;cursor:default}
.fst-panel #wave.checker{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.fst-wrap #wave.pick{cursor:crosshair}

/* ===== Online Piano ===== */
.fst-kb{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0 10px;user-select:none;-webkit-user-select:none;touch-action:none}
.fst-kbin{position:relative;display:flex;height:230px;min-width:780px}
.fst-kb .k{box-sizing:border-box;cursor:pointer}
.fst-kb .w{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;background:linear-gradient(#fff,#f1eef0);border:1px solid #bbb;border-top:0;border-radius:0 0 8px 8px;font-size:12px;color:#777}
.fst-kb .w.on{background:linear-gradient(#ffd6e8,#ffb3d4)}
.fst-kb .b{position:absolute;top:0;height:62%;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;background:linear-gradient(#3a3a3a,#111);border-radius:0 0 6px 6px;font-size:11px;color:#aaa;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.fst-kb .b.on{background:linear-gradient(#e72a77,#a21caf)}
.fst-kb .kc{font-weight:700;text-transform:uppercase;color:#e72a77;pointer-events:none}
.fst-kb .b .kc{color:#ff9ac8}
.fst-kb .nm{pointer-events:none;margin-top:2px}
.fst-kb.hidenames .nm{display:none}.fst-kb.hidekeys .kc{display:none}
.fst-row .fst-oct{font-size:17px;font-weight:600;color:#2a1a24;min-width:96px;text-align:center}

/* ===== Drum Pad ===== */
.fst-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:640px;margin:6px auto 4px;touch-action:none}
.fst-pad{position:relative;height:96px;border-radius:14px;border:1.5px solid rgba(231,42,119,.3);background:linear-gradient(135deg,#fff,#fbeef5);color:#2a1a24;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(110,18,115,.12);transition:transform .06s,background .06s;user-select:none;-webkit-user-select:none;padding:4px}
.fst-pad b{font-size:16px;line-height:1.2}
.fst-pad .kc{font-size:13px;color:#e72a77;font-weight:700;margin-top:4px}
.fst-pad.on,.fst-pad:active{transform:scale(.95);background:linear-gradient(135deg,#e62a77,#6e1273);color:#fff}
.fst-pad.on .kc,.fst-pad:active .kc{color:#ffd0e6}
@media (max-width:560px){.fst-pad{height:78px}.fst-pad b{font-size:14px}.fst-pads{gap:8px}}
.fst-wrap #rec.on{background:#c0152f !important;color:#fff !important;border-color:#c0152f !important;animation:fstpulse 1.4s infinite}
.fst-gap{margin-top:24px}

/* ===== Microphone Test / Speaker Test ===== */
.fst-panel .fst-meter.full{width:100%;flex:none;height:14px;margin:16px 0 8px}
.fst-msg.ok{color:#1b7a3d}
.fst-panel #status{font-size:19px;font-weight:600;margin:6px 0 4px}
.fst-bigfreq{text-align:center;font-size:44px;font-weight:700;color:#2a1a24;min-height:56px;font-variant-numeric:tabular-nums}
.fst-panel .fst-stats{margin-top:14px}
.fst-panel .fst-stats + .fst-msg{margin-top:8px}

/* Separación: lo que va justo debajo de una fila de controles (onda, teclado, pads, lista...) no queda pegado */
.fst-panel .fst-row + :not(.fst-row):not(.fst-msg):not(p):not(datalist):not([hidden]){margin-top:18px}


/* ===== Menu principal: los desplegables quedan por encima del contenido ===== */
.solid-menus{position:relative;z-index:1050}