@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Inter:wght@400;500;700&display=swap'); 

:root { 
    --scp-dark: var(--cor-fundo-principal, #1a1d24); 
    --scp-darker: #121419; 
    --scp-panel: var(--cor-fundo-elemento, #303544); 
    --scp-accent: var(--cor-destaque-principal, #89ddff); 
    --scp-accent-hover: var(--cor-destaque-secundaria, #60a5fa); 
    --scp-text: var(--cor-texto-principal, #e0e0e0); 
    --scp-text-muted: var(--cor-texto-secundario, #a0a8b7); 
    --scp-border: var(--cor-borda-elemento, #4f566b); 
    --scp-input-bg: rgba(0, 0, 0, 0.2); 
    --scp-error: var(--cor-erro, #ff4757); 
} 

.scp-full-layout, .scp-full-layout * { box-sizing: border-box; } 

.scp-full-layout { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--scp-darker); 
    color: var(--scp-text); 
    
    /* Padrão base como Fixed/Fullscreen, JS gerenciará se deve ser Relative conforme o tema */
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    z-index: 99999; 
    
    margin: 0; 
    padding: 0; 
    border-radius: 0; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
} 

.scp-full-layout button:focus, .scp-full-layout select:focus, .scp-full-layout input:focus, .action-btn:focus { 
    outline: none !important; 
    box-shadow: 0 0 0 2px var(--scp-darker), 0 0 0 4px var(--scp-accent) !important; 
    border-color: var(--scp-accent) !important; 
} 

/* ESTILOS PARA QUANDO ESTÁ EMBUTIDO NO CONTAINER DA PÁGINA (Layout com Limites e Rolagem Interna) */
.scp-embedded-mode {
    position: relative !important;
    /* Altura será gerida pelo JS de forma inteligente para ativar o scroll das sidebars */
    border-radius: 8px !important;
    border: 1px solid var(--scp-border) !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1) !important;
    margin: 20px auto !important;
    overflow: hidden !important; /* Força tudo a ficar dentro do limite e ativa barras internas */
}

.scp-embedded-mode .scp-grid-container {
    height: 100% !important;
    overflow: hidden !important;
    align-items: stretch;
}

.scp-embedded-mode .scp-sidebar-left,
.scp-embedded-mode .scp-sidebar-right {
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important; /* Ativa a barra de rolagem nas laterais quando o conteúdo excede */
}

.scp-embedded-mode .scp-main-content {
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
}

/* Header */ 
.scp-top-bar { 
    height: 60px; 
    background-color: var(--scp-dark); 
    border-bottom: 1px solid var(--scp-border); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 20px; 
    flex-shrink: 0; 
} 

.scp-branding h2 { 
    margin: 0; 
    font-size: 18px; 
    color: var(--scp-accent); 
    font-family: 'Roboto Mono', monospace; 
    font-weight: 700; 
} 

.scp-subtitle { 
    font-size: 12px; 
    color: var(--scp-text-muted); 
    margin-left: 10px; 
    display: none; 
} 

@media (min-width: 768px) { .scp-subtitle { display: inline; } } 

.scp-header-actions { display: flex; align-items: center; gap: 15px; } 

.scp-lang-wrapper { display: flex; align-items: center; gap: 8px; color: var(--scp-text-muted); } 

.scp-header-select { 
    background: var(--scp-dark) !important; 
    border: 1px solid var(--scp-border) !important; 
    color: var(--scp-text) !important; 
    padding: 6px 30px 6px 10px !important; /* Espaço extra para seta SVG */
    border-radius: 4px; 
    font-size: 12px; 
    cursor: pointer; 
} 

.scp-header-select:hover { 
    border-color: var(--scp-accent) !important; 
    color: var(--scp-accent) !important; 
} 

.scp-icon-btn { 
    background: transparent; 
    border: 1px solid var(--scp-border); 
    color: var(--scp-accent); 
    padding: 6px; 
    border-radius: 4px; 
    cursor: pointer; 
    display: none; 
} 

@media (max-width: 1024px) { .scp-icon-btn { display: block; } } 

/* Grid - Larguras Padrão Fixas */ 
.scp-grid-container { 
    display: grid; 
    grid-template-columns: 350px 1fr 300px; 
    flex: 1; 
    min-height: 0; 
    height: 100%; 
    overflow: hidden; 
} 

/* Left Sidebar */ 
.scp-sidebar-left { 
    background-color: var(--scp-dark); 
    border-right: 1px solid var(--scp-border); 
    overflow-y: auto; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
} 

.accordion-item { 
    margin-bottom: 12px; 
    border: 1px solid var(--scp-border); 
    border-radius: 8px; 
    background: transparent; 
    transition: all 0.3s ease; 
} 

.accordion-header { 
    background: var(--scp-panel) !important; 
    width: 100%; 
    padding: 15px; 
    border: none !important; 
    text-align: left; 
    color: var(--scp-accent) !important; 
    font-weight: 600; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-family: 'Roboto Mono', monospace; 
    font-size: 13px; 
    border-radius: 7px; 
} 

.accordion-header:hover { 
    background: var(--scp-panel) !important; 
    filter: brightness(1.2); 
    color: var(--scp-accent-hover) !important; 
} 

.accordion-item.active .accordion-header { 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
    border-bottom: 1px solid var(--scp-border) !important; 
} 

.accordion-content { 
    background: rgba(0,0,0,0.15); 
    max-height: 0; 
    overflow: hidden; 
    padding: 0 15px; 
    opacity: 0; 
    transition: max-height 0.35s ease-out, padding 0.3s ease, opacity 0.3s ease; 
} 

.accordion-item.active .accordion-content { 
    padding-top: 20px; 
    padding-bottom: 20px; 
    opacity: 1; 
} 

.control-group-content label { 
    display: block; 
    margin-top: 15px; 
    margin-bottom: 6px; 
    font-size: 12px; 
    font-weight: 500; 
    color: var(--scp-text); 
    opacity: 0.9; 
} 

.control-group-content > label:first-child { margin-top: 0; } 

#container_orelha { margin-top: 15px; } 

#container_orelha label { margin-top: 0; } 

/* Inputs de Texto/Número (Mantendo fundo semi-transparente) */
input[type="text"], input[type="number"] { 
    width: 100%; 
    background: var(--scp-input-bg) !important; 
    border: 1px solid var(--scp-border) !important; 
    color: var(--scp-text) !important; 
    padding: 10px; 
    border-radius: 6px; 
    font-family: 'Inter', sans-serif; 
    font-size: 13px; 
    transition: border-color 0.2s ease;
} 

/* Padronização Completa de Dropdowns (<select>) */
select {
    width: 100%; 
    background: var(--scp-dark) !important; /* Fundo sólido para forçar lista nativa a ficar escura */
    border: 1px solid var(--scp-border) !important; 
    color: var(--scp-text) !important; 
    padding: 10px; 
    border-radius: 6px; 
    font-family: 'Inter', sans-serif; 
    font-size: 13px; 
    cursor: pointer;
    transition: border-color 0.2s ease;
    
    /* Remove setas nativas e insere SVG moderno */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a8b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 35px !important;
}

/* Força opções a respeitar fundo escuro */
select option {
    background-color: var(--scp-darker) !important;
    color: var(--scp-text) !important;
    padding: 8px;
}

/* Efeito Hover Unificado */
input[type="text"]:hover, input[type="number"]:hover, select:hover {
    border-color: var(--scp-accent) !important;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 

/* Main Content */ 
.scp-main-content { 
    background-color: var(--scp-darker); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    position: relative; 
    height: 100%; 
} 

.scp-preview-wrapper { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 70%); 
    padding: 20px; 
    overflow-y: auto; 
} 

/* Result Box */ 
#resultado_container { 
    text-align: center; 
    padding: 2rem; 
    border-radius: 15px; 
    background-color: var(--scp-panel); 
    border: 1px solid var(--scp-border); 
    width: 100%; 
    max-width: 400px; 
    margin-bottom: 30px; 
    transition: all 0.3s ease; 
} 

#resultado_container.has-result { 
    border-color: var(--scp-accent); 
    /* Brilho dinâmico inteligente: acompanha a cor do Accent selecionada */
    box-shadow: 0 0 20px color-mix(in srgb, var(--scp-accent) 30%, transparent); 
} 

#resultado_container h2 { 
    color: var(--scp-text-muted); 
    font-size: 1rem; 
    font-weight: 500; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    margin-top: 0; 
    margin-bottom: 1.5rem; 
} 

.result-value-container { 
    display: flex; 
    justify-content: center; 
    align-items: baseline; 
    gap: 0.5rem; 
} 

#resultado_lombada { 
    font-family: 'Roboto Mono', monospace; 
    font-weight: 700; 
    font-size: 4rem; 
    color: var(--scp-accent); 
    /* Brilho do texto dinâmico */
    text-shadow: 0 0 10px color-mix(in srgb, var(--scp-accent) 40%, transparent); 
} 

#resultado_unidade { 
    font-family: 'Roboto Mono', monospace; 
    font-size: 1.5rem; 
    color: var(--scp-text-muted); 
} 

.unit-selector { 
    display: flex; 
    justify-content: center; 
    background-color: var(--scp-darker); 
    border-radius: 8px; 
    padding: 0.25rem; 
    margin: 0 auto 1.5rem auto; 
    max-width: fit-content; 
    border: 1px solid var(--scp-border); 
} 

.unit-selector input[type="radio"] { display: none; } 

.unit-selector label { 
    cursor: pointer; 
    padding: 0.5rem 1rem; 
    border-radius: 6px; 
    color: var(--scp-text-muted); 
    font-size: 12px; 
    transition: all 0.3s ease; 
    text-transform: uppercase; 
} 

.unit-selector input[type="radio"]:checked + label { 
    background-color: var(--scp-accent); 
    color: var(--scp-darker); 
    font-weight: 700; 
} 

/* Visual Spine Preview Base Container */ 
#visual-spine-wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    opacity: 0; 
    transition: opacity 0.5s ease; 
} 

#visual-spine-wrapper.active { opacity: 1; } 

.visual-spine-label { 
    font-size: 12px; 
    color: var(--scp-text-muted); 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 

/* 1. Modo Simples (Apenas Lombada) */ 
#visual-spine-book { 
    height: 350px; 
    background: linear-gradient(90deg, #2a2d38 0%, #3e4455 10%, #3e4455 90%, #2a2d38 100%); 
    border-radius: 3px; 
    box-shadow: inset 2px 0 5px rgba(255,255,255,0.1), inset -2px 0 5px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.5); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
} 

#visual-spine-book::before, #visual-spine-book::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 2px; 
    background: rgba(0,0,0,0.2); 
} 

#visual-spine-book::before { left: 2%; } 
#visual-spine-book::after { right: 2%; } 

#visual-spine-text { 
    font-family: 'Roboto Mono', monospace; 
    font-size: 14px; 
    font-weight: bold; 
    color: rgba(255,255,255,0.8); 
    transform: rotate(90deg); 
    white-space: nowrap; 
    transition: opacity 0.3s; 
} 

/* 2. Modo Simulação Real (Capa Completa) */ 
#visual-full-cover { 
    display: none; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.6); 
    border-radius: 4px; 
    background-color: var(--scp-darker); 
    overflow: hidden; 
} 

.scp-cover-part { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
    position: relative; 
    box-sizing: border-box; 
    overflow: hidden; 
} 

.scp-cover-part.back { 
    background: #3e4455; 
    border-right: 1px solid rgba(0,0,0,0.5); 
} 

.scp-cover-part.spine { 
    background: linear-gradient(90deg, #2a2d38 0%, #3e4455 10%, #3e4455 90%, #2a2d38 100%); 
    box-shadow: inset 2px 0 5px rgba(255,255,255,0.1), inset -2px 0 5px rgba(0,0,0,0.3); 
    z-index: 2; 
} 

.scp-cover-part.front { 
    background: #464c5e; 
    border-left: 1px solid rgba(0,0,0,0.5); 
    box-shadow: inset 10px 0 20px -10px rgba(0,0,0,0.3); 
} 

.scp-cover-label { 
    font-family: 'Inter', sans-serif; 
    font-size: 11px; 
    font-weight: 600; 
    color: rgba(255,255,255,0.4); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    text-align: center; 
    padding: 10px; 
    pointer-events: none; 
} 

#visual-full-spine-text { 
    font-family: 'Roboto Mono', monospace; 
    font-size: 12px; 
    font-weight: bold; 
    color: rgba(255,255,255,0.8); 
    transform: rotate(90deg); 
    white-space: nowrap; 
} 

/* Footer Actions */ 
.scp-footer-actions { 
    width: 100%; 
    background: var(--scp-dark); 
    border-top: 1px solid var(--scp-border); 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    align-items: center; 
    flex-shrink: 0; 
    z-index: 10; 
} 

.action-btn { 
    width: 100%; 
    max-width: 400px; 
    padding: 16px; 
    font-family: 'Roboto Mono', monospace; 
    font-weight: 700; 
    text-transform: uppercase; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 14px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    transition: transform 0.2s, box-shadow 0.2s; 
} 

#scp-save-db { 
    background: transparent !important; 
    border: 2px solid var(--scp-accent) !important; 
    color: var(--scp-text) !important; 
    transition: all 0.2s ease !important; 
} 

#scp-save-db:hover:not(:disabled) { 
    border-color: var(--scp-accent) !important; 
    color: var(--scp-darker) !important; 
    background: var(--scp-accent) !important; 
    /* Brilho dinâmico do botão */
    box-shadow: 0 0 15px color-mix(in srgb, var(--scp-accent) 40%, transparent) !important; 
} 

.action-btn:disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
    filter: grayscale(100%); 
} 

#scp-save-decision { 
    /* Fundo dinâmico baseado na cor principal */
    background: color-mix(in srgb, var(--scp-accent) 10%, transparent); 
    padding: 15px; 
    border-radius: 8px; 
    border: 1px solid var(--scp-accent); 
    width: 100%; 
    max-width: 400px; 
    margin-top: 10px; 
} 

.scp-decision-text { 
    text-align: center; 
    color: var(--scp-accent); 
    margin: 0 0 10px 0; 
    font-size: 13px; 
    font-weight: bold; 
} 

.scp-decision-buttons { display: flex; gap: 10px; } 

.scp-btn-decision-update { 
    background: var(--scp-accent) !important; 
    color: #000 !important; 
    border: 1px solid var(--scp-accent) !important; 
    flex:1; 
    padding:8px; 
    border-radius:4px; 
    font-weight:bold; 
    cursor:pointer; 
} 

.scp-btn-decision-new { 
    background: transparent !important; 
    border: 1px solid var(--scp-accent) !important; 
    color: var(--scp-accent) !important; 
    flex:1; 
    padding:8px; 
    border-radius:4px; 
    font-weight:bold; 
    cursor:pointer; 
} 

/* Right Sidebar */ 
.scp-sidebar-right { 
    background-color: var(--scp-dark); 
    border-left: 1px solid var(--scp-border); 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    max-height: 100%; 
} 

.scp-saved-header { 
    padding: 20px; 
    border-bottom: 1px solid var(--scp-border); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 

.scp-saved-header h3 { 
    margin: 0; 
    font-size: 14px; 
    color: var(--scp-accent); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700; 
} 

.scp-saved-controls { 
    padding: 15px 20px; 
    border-bottom: 1px solid var(--scp-border); 
    display: flex; 
    gap: 8px; 
} 

#scp-search { 
    flex: 2; 
    padding: 8px; 
    font-size: 12px; 
} 

.scp-saved-section { 
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 0; 
} 

.scp-saved-item { 
    padding: 15px 20px; 
    border-bottom: 1px solid var(--scp-border); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: background 0.2s; 
    cursor: pointer; 
} 

.scp-saved-item:hover { 
    background: rgba(255,255,255,0.03); 
    border-left: 3px solid var(--scp-accent); 
    padding-left: 17px; 
} 

.scp-code-info { 
    flex: 1; 
    min-width: 0; 
    margin-right: 15px; 
} 

.scp-code-val { 
    display: flex; 
    align-items: baseline; 
    gap: 5px; 
    font-weight: bold; 
    color: #fff; 
    font-size: 15px; 
    font-family: 'Roboto Mono', monospace; 
} 

.scp-code-meta { 
    display: block; 
    font-size: 11px; 
    color: var(--scp-text-muted); 
    margin-top: 4px; 
} 

.scp-saved-title { 
    display: block; 
    font-size: 12px; 
    color: var(--scp-accent); 
    font-style: italic; 
    margin-top: 4px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    opacity: 0.9; 
} 

.scp-btn-load { 
    background: var(--scp-accent) !important; 
    color: var(--scp-darker) !important; 
    border: none !important; 
    padding: 8px; 
    border-radius: 4px; 
    cursor: pointer; 
} 

.scp-btn-del { 
    background: transparent !important; 
    color: var(--scp-error) !important; 
    border: none !important; 
    cursor: pointer; 
    font-size: 18px; 
    padding: 5px; 
    opacity: 0.8; 
} 

/* Locked Auth */ 
.scp-locked-sidebar { 
    padding: 20px; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    height: 100%; 
} 

.scp-lock-icon { 
    font-size: 40px; 
    margin-bottom: 15px; 
    display: block; 
    width: auto; 
    height: auto; 
    color: var(--scp-text-muted); 
} 

.scp-btn-auth { 
    display: block; 
    width: 100%; 
    padding: 10px; 
    border-radius: 6px; 
    text-align: center; 
    text-decoration: none !important; 
    font-weight: 700; 
    font-family: 'Roboto Mono', monospace; 
    font-size: 13px; 
    margin-bottom: 10px; 
} 

.scp-btn-login { 
    background: transparent !important; 
    border: 1px solid var(--scp-accent) !important; 
    color: var(--scp-accent) !important; 
} 

.scp-btn-register { 
    background: var(--scp-accent) !important; 
    color: var(--scp-darker) !important; 
} 

/* Seletor de Unidades */ 
.scp-sim-unit-selector {
    display: flex;
    width: 100%;
    background: var(--scp-darker);
    border-radius: 6px;
    border: 1px solid var(--scp-border);
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 25px;
}

.scp-sim-unit-selector input[type="radio"] {
    display: none;
}

.scp-sim-unit-selector label {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    margin: 0 !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--scp-text-muted);
    cursor: pointer;
    transition: all 0.2s;
    border-right: 1px solid var(--scp-border);
    text-transform: uppercase;
}

.scp-sim-unit-selector label:last-child {
    border-right: none;
}

.scp-sim-unit-selector input[type="radio"]:checked + label {
    background: var(--scp-accent);
    color: var(--scp-darker);
}

/* Balões de Plataformas Disponíveis com Cores Inteligentes do Tema */
.scp-platforms-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.scp-platform-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--scp-accent) 15%, transparent);
    color: var(--scp-accent);
    border: 1px solid color-mix(in srgb, var(--scp-accent) 30%, transparent);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Scrollbar */ 
.custom-scrollbar::-webkit-scrollbar { width: 6px; } 
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; } 
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--scp-border); border-radius: 3px; } 

@media (max-width: 1024px) { 
    .scp-grid-container { 
        grid-template-columns: 300px 1fr; 
        position: relative; 
    } 
    .scp-sidebar-right { 
        position: absolute; 
        top: 0; 
        right: 0; 
        bottom: 0; 
        width: 300px; 
        z-index: 100; 
        background: var(--scp-darker); 
        transform: translateX(100%); 
        transition: transform 0.3s ease; 
        box-shadow: -10px 0 30px rgba(0,0,0,0.8); 
    } 
    .scp-sidebar-right.open { transform: translateX(0); } 
    #scp-close-saved-mobile { 
        display: block !important; 
        background:none; 
        border:none; 
        color:#fff; 
        font-size:24px; 
        cursor:pointer; 
    } 
} 

/* LAYOUT MOBILE */
@media (max-width: 768px) { 
    .scp-full-layout { 
        position: relative !important; 
        top: auto !important;
        left: auto !important;
        width: 100% !important; 
        height: auto !important;
        min-height: auto !important; 
        margin: 0 auto !important; 
        border-radius: 0 !important;
        z-index: 1 !important;
        overflow: visible !important; 
    } 
    .scp-grid-container { 
        display: flex; 
        flex-direction: column; 
        grid-template-columns: none; 
        height: auto;
        overflow: visible;
    } 
    .scp-main-content { 
        order: 1; 
        height: auto; 
        min-height: 350px; 
        flex: none; 
        border-bottom: 1px solid var(--scp-border); 
        overflow: visible;
    } 
    .scp-sidebar-left { 
        order: 2; 
        width: 100%; 
        height: auto; 
        flex: 1; 
        border-right: none; 
        border-top: 1px solid var(--scp-border);
        /* Travamos a altura máxima no mobile e permitimos rolagem interna para não crescer ao infinito */
        max-height: 500px !important;
        overflow-y: auto !important;
        padding-bottom: 20px; 
    } 
    #visual-spine-book { height: 150px; } 
    #visual-full-cover { max-height: 250px; } 
}