.panel{

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:16px;

    box-shadow:var(--shadow);

}

.button{

    transition:.25s;

    cursor:pointer;

}

.input{

    transition:.25s;

}

.page-title{

    font-family:"Cinzel",serif;

    color:var(--gold);

    margin-bottom:10px;

}

.page-description{

    color:var(--text-secondary);

}

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

#toast-container{

    position:fixed;

    bottom:25px;

    right:25px;

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index:9999;

}

.toast{

    min-width:320px;

    max-width:380px;

    overflow-wrap:break-word;

    background:var(--panel);

    border-left:5px solid var(--gold);

    color:white;

    padding:18px;

    border-radius:12px;

    box-shadow:var(--shadow);

    animation:

        toastIn .3s ease;

}

.toast-title{

    font-weight:600;

    margin-bottom:5px;

}

.toast-message{

    color:var(--text-secondary);

    font-size:.95rem;

}

.toast.hide{

    animation:

        toastOut .25s forwards;

}

@keyframes toastIn{

    from{

        opacity:0;

        transform:

            translateX(40px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

@keyframes toastOut{

    to{

        opacity:0;

        transform:

            translateX(50px);

    }

}

/* ==========================================================
   MODAL
========================================================== */

.modal-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    backdrop-filter:blur(3px);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    z-index:9000;

    opacity:0;

    transition:opacity .2s ease;

}

.modal-overlay.open{

    opacity:1;

}

.modal{

    max-width:420px;

    padding:28px;

    transform:translateY(12px);

    transition:transform .2s ease;

}

.modal-overlay.open .modal{

    transform:translateY(0);

}

.modal-title{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:1.15rem;

    margin-bottom:10px;

}

.modal-message{

    color:var(--text-secondary);

    font-size:.92rem;

    line-height:1.5;

    margin-bottom:18px;

    overflow-wrap:break-word;

}

.modal-input{

    margin-bottom:18px;

}

.modal-textarea{

    min-height:240px;

    margin-bottom:16px;

    font-size:.82rem;

    line-height:1.5;

    resize:vertical;

}

.modal-actions{

    display:flex;

    justify-content:flex-end;

    gap:10px;

}

.modal-actions .button{

    margin-top:0;

}

.modal-fields{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:18px;

}

.modal-field-label{

    display:flex;

    flex-direction:column;

    gap:6px;

    font-size:.8rem;

    color:var(--text-secondary);

}

.modal-field-label .input{

    margin-bottom:0;

}

/* ==========================================================
   BOTÃO DISCRETO (ícone/texto pequeno)
========================================================== */

.icon-button{

    background:var(--panel-light);

    border:1px solid var(--border);

    color:var(--text-secondary);

    border-radius:10px;

    padding:8px 12px;

    font-size:.8rem;

    cursor:pointer;

    transition:var(--transition);

    flex-shrink:0;

}

.icon-button:hover{

    color:var(--text);

    border-color:var(--gold);

}

.icon-button.danger:hover{

    border-color:var(--danger);

    color:var(--danger);

}

.icon-button.star-active{

    color:var(--gold);

    border-color:var(--gold);

    background:rgba(201,168,79,.12);

}