.scaler-layout { display: flex; flex-direction: column; gap: 20px; }
.scaler-card { background: #0f172a; color: #f1f5f9; padding: 25px; border-radius: 12px; border: 1px solid #334155; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }

/* Toggle de Escalas */
.scale-selector { display: flex; background: #1e293b; padding: 5px; border-radius: 8px; margin-bottom: 5px; border: 1px solid #334155; }
.scale-opt { flex: 1; text-align: center; padding: 10px; font-size: 0.65rem; font-weight: 800; cursor: pointer; border-radius: 6px; transition: 0.3s; color: #64748b; letter-spacing: 1px; }
.scale-opt.active { background: var(--conv-primary); color: white; }

.output-box { background: #1e293b; padding: 15px; border-radius: 8px; border-left: 4px solid var(--conv-primary); margin-top: 5px; }
.output-label { font-size: 0.6rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 5px; }
.output-val { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; word-break: break-all; color: #fff; }

.curiosity-section { margin-top: 20px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; padding: 15px; border: 1px dashed #334155; }
.curiosity-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; color: #cbd5e1; }
.curiosity-table td { padding: 8px 4px; border-bottom: 1px solid #1e293b; }
.expo-blue { color: #38bdf8; font-weight: bold; font-family: monospace; }