:root{
    --primary:#5900B2;
    --bg:#f5f5f5;
    --card:#fff;
    --text:#333;
    --muted:#777;
    --border:#ddd;
}

body.dark{
    --bg:#121212;
    --card:#1e1e1e;
    --text:#f1f1f1;
    --muted:#aaa;
    --border:#333;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--bg);
    font-family:Segoe UI, sans-serif;
    color:var(--text);
}

.container{
    max-width:700px;
    margin:auto;
    padding:20px;
}

.topbar{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-btn,.theme-btn{
    width:45px;
    height:45px;
    border:none;
    border-radius:10px;
    background:var(--card);
    cursor:pointer;
    color:var(--text);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.filtros,.leitura,.sobre{
    background:var(--card);
    padding:20px;
    border-radius:15px;
    margin-top:15px;
}

label{
    display:block;
    margin:10px 0 5px;
    font-weight:600;
}

select{
    width:100%;
    height:50px;
    border:1px solid var(--border);
    border-radius:10px;
	font-size:15px;
    background:var(--card);
    color:var(--text);
}

button#btnLer{
    width:100%;
    height:50px;
    margin-top:15px;
    border:none;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
}

.hidden{
    display:none;
}

.versiculo{
    margin:15px 0;
    font-size:18px;
    line-height:1.6;
}

.texto-versiculo{
       display:inline;
}

.numero{
    color:var(--primary);
    font-weight:bold;
    margin-right:6px;
}

/* MENU */
.sidebar{
    position:fixed;
    top:0;
    left:-260px;
    width:250px;
    height:100%;
    background:var(--card);
    box-shadow:4px 0 20px rgba(0,0,0,.1);
    transition:.3s;
    z-index:1000;
}

.sidebar.active{
    left:0;
}

.menu-header{
    padding:25px;
    border-bottom:1px solid var(--border);
}

.sidebar a{
    display:block;
    padding:18px 25px;
    color:var(--text);
    text-decoration:none;
    border-bottom:1px solid var(--border);
}

.sidebar a:hover{
    background:rgba(89,0,178,0.08);
}

.overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.4);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
}

.overlay.active{
    opacity:1;
    visibility:visible;
}

.pix-box{
    margin-top:15px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(89,0,178,0.05);
}

.search-box{
    display:flex;
    align-items:center;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
    margin-top:10px;
}

.search-icon{
    margin-right:8px;
    font-size:18px;
}

#searchInput{
    border:none;
    outline:none;
    width:100%;
    font-size:16px;
    background:transparent;
    color:var(--text);
}

.clicavel{
    cursor: pointer;
    transition: .2s;
}

.clicavel:hover{
    background: rgba(89,0,178,0.08);
    border-radius: 8px;
    padding: 5px;
}

.versiculo{
    cursor:pointer;
    transition:.2s;
}

.versiculo:hover{
    background:rgba(89,0,178,0.08);
    border-radius:8px;
}

.offline-warning{
    background:#fff3cd;
    color:#856404;
    padding:15px;
    border-radius:10px;
    margin-top:10px;
}

/* ================= COPIAR VERSÍCULO ================= */

.copiar-versiculo{
    font-size:18px;
    line-height:1;

    cursor:pointer;
    user-select:none;

    opacity:.65;

    transition:opacity .15s ease;
}

.copiar-versiculo:hover{
    opacity:.75;
}

.copiar-versiculo:active{
    opacity:1;
}

body.dark .copiar-versiculo{
    opacity:.55;
}

/* ================= TOAST ================= */

#toast{
    position:fixed;

    left:50%;
    bottom:25px;

    transform:translateX(-50%);

    background:#222;
    color:#fff;

    padding:12px 18px;

    border-radius:10px;

    font-size:14px;

    opacity:0;
    visibility:hidden;

    transition:all .25s ease;

    z-index:9999;
}

#toast.show{
    opacity:1;
    visibility:visible;
}

body.dark #toast{
    background:#111;
}


/* ================= DESTAQUE BUSCA ================= */

.versiculo-destacado{
    background:#fff3b0;
    border-radius:8px;
    transition:all .4s ease;
}

body.dark .versiculo-destacado{
    background:rgba(255,255,0,.15);
}

/* ================= ÚLTIMO VÍDEO ================= */

.ultimo-video{

    margin:20px 0;

    background:var(--card-bg,#fff);

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    cursor:pointer;

    transition:.2s;
}

.ultimo-video:hover{

    transform:translateY(-2px);

    box-shadow:0 4px 15px rgba(0,0,0,.12);
}

.ultimo-video img{

    width:100%;

    display:block;

    max-height:220px;

    object-fit:cover;
}

.ultimo-video-conteudo{

    padding:15px;
}

.ultimo-video-tag{

    font-size:13px;

    font-weight:bold;

    color:#6d28d9;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.ultimo-video-titulo{

    font-size:18px;

    font-weight:bold;

    margin-bottom:8px;
}

.ultimo-video-btn{

    display:inline-block;

    margin-top:12px;

    padding:8px 14px;
	
	    cursor:pointer;

    border-radius:8px;

    background:#6d28d9;

    color:#fff;

    font-weight:bold;

    transition:.2s;
}

.ultimo-video-btn:hover{

    background:#5b21b6;
}

/* Compatibilidade com tema escuro */

body.dark .ultimo-video{

    background:#1e1e1e;

    box-shadow:0 2px 10px rgba(0,0,0,.4);
}

body.dark .ultimo-video-tag{

    color:#a78bfa;
}

body.dark .ultimo-video-btn{

    background:#7c3aed;
}

body.dark .ultimo-video-btn:hover{

    background:#6d28d9;
}

/* ================= VIEW VIDEO ================= */

#viewVideo{

    padding-top:20px;
}

#videoTitulo{

    margin:15px 0 10px;

    font-size:22px;

    font-weight:bold;
}

#videoDescricao{

    margin-top:10px;

    line-height:1.6;

    opacity:.9;
}

#videoPlayer{

    width:100%;

    border-radius:12px;

    background:#000;

    margin-top:10px;
}

/* ================= MAIS VÍDEOS ================= */

.mais-videos{

    margin-top:30px;
}

.mais-videos h3{

    margin-bottom:15px;
}

.video-relacionado{

    display:flex;

    gap:12px;

    margin-bottom:15px;

    cursor:pointer;

    padding:8px;

    border-radius:10px;

    transition:.2s;
}

.video-relacionado:hover{

    background:rgba(0,0,0,.05);
}

body.dark .video-relacionado:hover{

    background:rgba(255,255,255,.05);
}

.video-relacionado img{

    width:120px;

    height:68px;

    object-fit:cover;

    border-radius:8px;

    flex-shrink:0;
}

.video-relacionado-info{

    flex:1;
}

.video-relacionado-titulo{

    font-weight:bold;

    margin-bottom:5px;
}

.video-relacionado-data{

    font-size:13px;

    opacity:.7;
}

/* ================= ÚLTIMO VÍDEO ================= */

.ultimo-video{

    margin-top:20px;

    border-radius:12px;

    overflow:hidden;

    cursor:pointer;
}

.ultimo-video-layout{

    display:flex;
	margin-top:20px;

    gap:16px;

    align-items:center;
}

.ultimo-video-thumb{

    width:220px;

    height:124px;

    object-fit:cover;

    border-radius:10px;

    flex-shrink:0;
}

.ultimo-video-conteudo{

    flex:1;
}

.ultimo-video-tag{

    font-size:12px;

    font-weight:bold;

    margin-bottom:8px;
}

.ultimo-video-titulo{

    font-size:20px;

    font-weight:700;

    margin-bottom:10px;

    line-height:1.3;
}

.ultimo-video-descricao{

    opacity:.85;

    margin-bottom:15px;

    line-height:1.5;
}

.ultimo-video-btn{

    display:inline-block;

    padding:10px 18px;

    border-radius:8px;

    font-weight:bold;

    cursor:pointer;
}

@media(max-width:768px){

    .ultimo-video-layout{

        flex-direction:column;
    }

    .ultimo-video-thumb{

        width:100%;

        height:auto;

        max-height:220px;
    }

    .ultimo-video-conteudo{

        width:100%;
    }

}

.navegacao-capitulos{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin:30px 0 10px;
}

.btn-capitulo{
    padding:10px 16px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:bold;
}

/* ================= VERSÍCULO DO DIA ================= */

#viewVersiculoDia{
    padding:25px 0;
}

.versiculo-dia-card{
    margin:20px auto;
    padding:25px 22px;
    border-radius:16px;
    background:var(--card-bg,#fff);
    box-shadow:0 4px 18px rgba(0,0,0,.08);
}

.versiculo-dia-tag{
    font-size:13px;
    font-weight:bold;
    color:#6d28d9;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:18px;
}

.versiculo-dia-texto{
    font-size:22px;
    line-height:1.6;
    font-weight:500;
    margin-bottom:18px;
}

.versiculo-dia-referencia{
    font-size:16px;
    font-weight:bold;
    opacity:.75;
    margin-bottom:25px;
}

.versiculo-dia-acoes{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.versiculo-dia-acoes button{
    flex:1;
    min-width:130px;
}

/* AÇÕES DOS VERSÍCULOS: FAVORITO + COPIAR */

.texto-versiculo{
    display:inline;
}

.acoes-versiculo{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    width:100%;
    margin-top:6px;
    clear:both;
}

.favoritar-versiculo,
.compartilhar-versiculo,
.copiar-versiculo{
    display:inline-flex;
    cursor:pointer;
    font-size:18px;
    user-select:none;
    opacity:.65;
    transition:opacity .15s ease;
}

.favoritar-versiculo:hover,
.compartilhar-versiculo:hover,
.copiar-versiculo:hover{
    opacity:1;
}

/* Tema escuro */

body.dark .versiculo-dia-card{
    background:#1e1e1e;
    box-shadow:0 4px 18px rgba(0,0,0,.4);
}

body.dark .versiculo-dia-tag{
    color:#a78bfa;
}

/* Mobile */

@media(max-width:768px){

    .versiculo-dia-card{
        margin:15px 0;
        padding:22px 18px;
    }

    .versiculo-dia-texto{
        font-size:20px;
    }

}

/* ================= FAVORITOS ================= */

#viewFavoritos{
    padding:25px 0;
}

.favoritos-card{
    padding:22px;
    border-radius:16px;
    background:var(--card-bg,#fff);
    box-shadow:0 4px 18px rgba(0,0,0,.08);
}

.favorito-item{
    padding:16px;
    margin-bottom:14px;
    border-radius:12px;
    cursor:pointer;
    background:rgba(0,0,0,.04);
    transition:.2s;
}

.favorito-item:hover{
    transform:translateY(-2px);
    background:rgba(109,40,217,.08);
}

.favorito-texto{
    font-size:17px;
    line-height:1.6;
    margin-bottom:10px;
}

.favorito-ref{
    font-weight:bold;
    color:#6d28d9;
}

.favorito-vazio{
    padding:20px;
    text-align:center;
    opacity:.7;
}

body.dark .favoritos-card{
    background:#1e1e1e;
}

body.dark .favorito-item{
    background:rgba(255,255,255,.06);
}

body.dark .favorito-ref{
    color:#a78bfa;
}

.cabecalho-capitulo{

    text-align:center;

    margin-bottom:25px;

    padding:20px;

    border-bottom:1px solid rgba(0,0,0,.08);
}

.cabecalho-livro{

    font-size:28px;

    font-weight:700;

    color:#5900B2;

    margin-bottom:5px;
}

.cabecalho-numero{

    font-size:16px;

    opacity:.7;

    letter-spacing:.5px;
}

body.dark .cabecalho-capitulo{

    border-bottom:1px solid rgba(255,255,255,.08);
}

body.dark .cabecalho-livro{

    color:#B388FF;
}

/* ================= DOWNLOAD OFFLINE ================= */

.offline-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    padding:20px;
}

.offline-modal.hidden{
    display:none;
}

.offline-box{
    width:100%;
    max-width:360px;
    background:#fff;
    color:#222;
    padding:25px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
}

.offline-box h2{
    margin-bottom:12px;
    font-size:20px;
}

.offline-box p{
    font-size:15px;
    margin-bottom:18px;
}

.offline-progress{
    width:100%;
    height:12px;
    background:#e5e5e5;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:10px;
}

#offlineProgressBar{
    height:100%;
    width:0%;
    background:#6d28d9;
    transition:width .2s ease;
}

#offlinePercent{
    font-weight:bold;
    color:#6d28d9;
}

body.dark .offline-box{
    background:#1e1e1e;
    color:#fff;
}

body.dark .offline-progress{
    background:#333;
}