/* ================= ESTILOS ================= */
:root {
    --bg: #050505; --card: #121212; --border: #333; --text: #e0e0e0;
    --primary: #8a2be2; --accent: #8a2be2; --primary-hover: #7a25cc; --primary-text: #fff;
    --danger: #ff4444; --success: #00ff88;
    --treinado: #ffd700; --veterano: #ff8c00; --expert: #b91c1c;
    --radius: 8px; --font-main: 'Segoe UI', sans-serif;
    --bar-pv: #e60000; --bar-pe: #0077ff; --bar-san: #ffffff;
}



/* SCROLLBAR CUSTOMIZADA */
* {
    scrollbar-width: thin;
    scrollbar-color: #666 #1a1a1a;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #666; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font-main); padding-bottom: 80px; display: flex; flex-direction: column; }

button, select, input, textarea { border-radius: var(--radius); outline: none; font-family: inherit; border: 1px solid var(--border); background: #000; color: #fff; cursor: pointer; }

.hidden { display: none !important; }
.btn { padding: 10px 20px; cursor: pointer; font-weight: bold; text-transform: uppercase; background: var(--card); transition: 0.2s; }
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); color: var(--primary-text); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #000; font-weight: bold; }
.btn-danger:hover { background: #cc3333; border-color: #cc3333; color: #000; }
.btn-sm { padding: 5px 10px; font-size: 0.8em; }

/* Botão de transformação */
#btnTransform { transition: all 0.3s; }
#btnTransform.btn-primary { animation: pulse-transform 2s infinite; }
@keyframes pulse-transform {
    0%, 100% { box-shadow: 0 0 5px var(--primary); }
    50% { box-shadow: 0 0 20px var(--primary), 0 0 30px var(--primary); }
}

/* Seletor de cor do glow - sem hover */
#glowColorSelect {
    transition: none;
    cursor: pointer;
}
#glowColorSelect:hover {
    background-color: inherit !important;
    border-color: inherit !important;
}
#glowColorSelect:focus {
    outline: none;
}
#glowColorSelect option {
    color: transparent;
    cursor: pointer;
    padding: 10px;
}
#glowColorSelect option:hover {
    background-color: inherit !important;
}

/* Elementos transformados com efeito pulse - apenas elementos específicos */
.transformado-active .avatar-img,
.transformado-active #fNome,
.transformado-active .attr-inp,
.transformado-active .status-fill {
    animation: pulse-transform 2s infinite;
}

/* Efeito reduzido para habilidades e rituais */
.transformado-active #listHab .item-card,
.transformado-active #listRit .item-card {
    animation: pulse-transform-soft 3s infinite;
}

@keyframes pulse-transform-soft {
    0%, 100% { box-shadow: 0 0 2px var(--primary); }
    50% { box-shadow: 0 0 8px var(--primary), 0 0 12px var(--primary); }
}

/* Inputs number customizados */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.number-input-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}
.number-input-wrapper input {
    text-align: center;
    flex: 1;
}
.number-btn {
    width: 28px;
    height: 28px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
}
.number-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.inp-dark { 
    padding: 10px 12px; 
    width: 100%; 
    cursor: text;
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.60) 0%, rgba(40, 30, 45, 0.60) 100%);
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95em;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.inp-dark:focus { 
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(50, 45, 60, 0.80) 0%, rgba(60, 45, 65, 0.80) 100%);
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    outline: none;
}

/* TOAST & MODALS */
#toast { visibility: hidden; min-width: 250px; background-color: var(--primary); color: #fff; text-align: center; border-radius: 50px; padding: 16px; position: fixed; z-index: 6000; left: 50%; top: 30px; transform: translateX(-50%); font-size: 17px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 1px solid var(--primary); }
#toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@keyframes fadein { from {top: 0; opacity: 0;} to {top: 30px; opacity: 1;} }
@keyframes fadeout { from {top: 30px; opacity: 1;} to {top: 0; opacity: 0;} }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 5000; display: flex; justify-content: center; align-items: center; }
.modal-content { 
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.75) 0%, rgba(50, 30, 50, 0.75) 100%);
    padding: 25px; 
    border-radius: 20px; 
    border: 1px solid rgba(102, 126, 234, 0.4); 
    width: 90%; 
    max-width: 500px; 
    max-height: 80vh; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 40px rgba(102, 126, 234, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
}

/* Área de conteúdo scrollável dentro da modal */
.db-list, #dbContent, #listaCampItens, #listaCampRituais, #listaCampMods, #listaCampMaldicoes, #listaPericiaBonus {
    max-height: calc(80vh - 140px);
    overflow-y: auto;
    padding-right: 5px;
}

/* CATÁLOGOS / DATABASE LIST */
.db-list { display: flex; flex-direction: column; gap: 10px; }
.db-btn { 
    padding: 14px 16px; 
    text-align: left; 
    background: #222;
    border: 1px solid #333; 
    border-radius: 12px;
    width: 100%; 
    cursor: pointer; 
    transition: all 0.25s ease; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    opacity: 0.6;
}
.db-btn:hover { 
    opacity: 1;
    border-color: #8a2be2; 
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15) 0%, rgba(138, 43, 226, 0.05) 100%);
    transform: translateX(3px); 
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}
.db-btn b { color: var(--primary); font-size: 1.3em; padding: 8px 14px; background: var(--primary); border-radius: 8px; color: #fff; }
/* Botão + nos catálogos */
.db-btn > span { color: var(--primary) !important; font-size: 1.5em; font-weight: bold; padding: 6px 12px; background: var(--primary); border-radius: 8px; color: #fff !important; }

/* Botão Adicionar (+) Estilo Moderno */
.db-add-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}
.db-add-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.6);
}

/* Cor de seleção em selects - Preto ao invés de branco */
#fCls,
#fTri,
#fOri,
#fAfinidade,
select.inp-dark {
    color: #fff;
}

#fCls option,
#fTri option,
#fOri option,
#fAfinidade option,
select.inp-dark option {
    background: #000;
    color: #fff;
}

#fCls option:checked,
#fTri option:checked,
#fOri option:checked,
#fAfinidade option:checked,
select.inp-dark option:checked {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

/* Habilidades automáticas recoláveis */
.auto-hab-container {
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.auto-hab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(138, 43, 226, 0.15);
    cursor: pointer;
    transition: 0.2s;
}
.auto-hab-header:hover {
    background: rgba(138, 43, 226, 0.25);
}
.auto-hab-header h4 {
    margin: 0;
    color: var(--primary);
    font-size: 0.9em;
}
.auto-hab-toggle {
    color: var(--primary);
    font-size: 1.2em;
    transition: transform 0.3s;
}
.auto-hab-toggle.collapsed {
    transform: rotate(-90deg);
}
.auto-hab-content {
    padding: 10px 15px;
    display: block;
}
.auto-hab-content.hidden {
    display: none;
}
.auto-hab {
    padding: 8px 0;
    border-bottom: 1px solid rgba(138, 43, 226, 0.2);
    font-size: 0.9em;
    color: #ccc;
}
.auto-hab:last-child {
    border-bottom: none;
}

/* Containers recolhíveis para Habilidades e Rituais */
.collapsible-container {
    background: linear-gradient(135deg, rgba(30, 20, 40, 0.60) 0%, rgba(40, 20, 45, 0.60) 100%);
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}
.collapsible-container:hover {
    border-color: rgba(102, 126, 234, 0.4);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(60, 50, 80, 0.40) 0%, rgba(70, 50, 85, 0.40) 100%);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(102, 126, 234, 0.15);
}
.collapsible-header:hover {
    background: linear-gradient(135deg, rgba(80, 70, 100, 0.60) 0%, rgba(90, 70, 105, 0.60) 100%);
}
.collapsible-title {
    color: #fff;
    font-weight: bold;
    font-size: 0.98em;
}
.collapsible-toggle {
    color: #667eea;
    font-size: 1em;
    transition: transform 0.3s;
}
.collapsible-toggle.collapsed {
    transform: rotate(-90deg);
}
.collapsible-content {
    padding: 15px 16px;
    display: block;
    background: linear-gradient(135deg, rgba(15, 10, 25, 0.40) 0%, rgba(25, 10, 30, 0.40) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.collapsible-content.hidden {
    display: none;
}
.hab-card-inner, .rit-card-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Diferenciação de cores: Rituais - roxo-rosado, Habilidades - roxo padrão */
#listRit .collapsible-container {
    border: 1px solid rgba(200, 100, 150, 0.30);
    background: linear-gradient(135deg, rgba(50, 20, 40, 0.60) 0%, rgba(50, 20, 35, 0.60) 100%);
}
#listRit .collapsible-header {
    background: linear-gradient(135deg, rgba(80, 40, 70, 0.40) 0%, rgba(80, 40, 65, 0.40) 100%);
    border-bottom-color: rgba(200, 100, 150, 0.20);
}
#listRit .collapsible-header:hover {
    background: linear-gradient(135deg, rgba(100, 60, 90, 0.60) 0%, rgba(100, 60, 85, 0.60) 100%);
}
#listRit .collapsible-title {
    color: #fff;
}
#listRit .collapsible-toggle {
    color: #e857a0;
}

.view { max-width: 1200px; margin: 0 auto; padding: 20px; width: 100%; flex: 1; border: none; }

/* LOGIN */
#viewLogin { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw !important;     /* Força largura total da tela */
    height: 100vh !important;    /* Força altura total da tela */
    max-width: none !important;  /* Remove o limite de 1200px da classe .view */
    margin: 0 !important;        /* Remove margens automáticas */
    padding: 0 !important;       /* Remove preenchimentos */
    
    background: #000; 
    z-index: 9999; 
    
    /* Centralização Flexbox */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

.login-logo { 
    width: 300px; 
    margin: 0 0 20px 0; /* Remove margens laterais */
    display: block;
}

.auth-box { 
    background: var(--card); 
    padding: 40px; 
    border-radius: 20px; 
    width: 90%; 
    max-width: 400px; 
    text-align: center; 
    border: 1px solid var(--border); 
    margin: 0; /* Garante que não tenha margem lateral empurrando */
}

/* ESTILOS DO RODAPÉ ATUALIZADO */
.footer { 
    text-align: center; 
    padding: 40px 20px; 
    color: #666; 
    font-size: 0.9em; 
    border-top: 1px solid #222; 
    margin-top: 50px; 
    line-height: 1.6; 
    background: #050505;
}
.footer-links { margin-bottom: 20px; }
.footer-links a { 
    color: var(--text); 
    text-decoration: none; 
    margin: 0 10px; 
    font-weight: bold; 
    transition: 0.2s; 
    display: inline-block;
}
.footer-links a:hover { color: var(--primary); }
.footer-legal { 
    font-size: 0.85em; 
    opacity: 1;       /* Mudei de 0.6 para 1 (totalmente visível) */
    color: #cccccc;   /* Defini uma cor cinza claro específica */
    max-width: 800px; 
    margin: 20px auto 0 auto; 
}
.footer-credits { color: #888; font-size: 1em; }
.footer-credits strong { color: var(--primary); }

/* DASHBOARD */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.card { background: var(--card); border: 1px solid var(--border); padding: 0; border-radius: var(--radius); cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; min-height: 180px; overflow: hidden; position: relative; }
.card:hover { border-color: var(--primary); transform: translateY(-3px); background: rgba(138, 43, 226, 0.15); box-shadow: 0 0 20px rgba(138, 43, 226, 0.3); }
.card-img { width: 100%; height: 100px; object-fit: cover; background: #222; }
.card-content { padding: 15px; }
.card-add { border: 2px dashed #444; align-items: center; justify-content: center; background: transparent; min-height: 180px; display: flex; flex-direction: column; cursor: pointer; padding: 20px; }

/* FICHA */
.header-container { display: flex; gap: 20px; background: var(--card); padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); align-items: center; margin-bottom: 20px; margin-top: 40px; }
.avatar-area { position: relative; width: 150px; height: 150px; flex-shrink: 0; cursor: pointer; }
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 15px rgba(255,255,255,0.2); }
.avatar-overlay { position: absolute; bottom: 0; width: 100%; text-align: center; background: rgba(0,0,0,0.7); font-size: 0.8em; border-radius: 0 0 100px 100px; padding: 5px; opacity: 0; transition: 0.3s; }
.avatar-area:hover .avatar-overlay { opacity: 1; }
.info-area { flex-grow: 1; display: grid; gap: 10px; }
.row-3 { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 10px; }

.attr-container { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; }
.attr-box { display: flex; flex-direction: column; align-items: center; }
.attr-box span { font-weight: 900; font-size: 0.9em; margin-bottom: 5px; } 
.attr-inp { width: 60px; height: 50px; font-size: 1.8em; text-align: center; font-weight: bold; border: 2px solid #555; appearance: textfield; -moz-appearance: textfield; }
.attr-inp::-webkit-inner-spin-button, .attr-inp::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

.attr-input-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.attr-btn { width: 60px; height: 22px; border: none; background: #333; color: #fff; font-size: 1.2em; font-weight: bold; cursor: pointer; transition: 0.2s; border-radius: 4px; opacity: 0; pointer-events: none; }
.attr-input-wrap:hover .attr-btn { opacity: 1; pointer-events: auto; }
.attr-btn:hover { background: var(--primary); color: #000; }
.attr-btn:first-child { border-radius: 4px 4px 0 0; }
.attr-btn:last-child { border-radius: 0 0 4px 4px; }

.nex-input-wrap { display: flex; align-items: center; gap: 3px; }
.nex-btn-col { display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transition: 0.2s; }
.nex-input-wrap:hover .nex-btn-col { opacity: 1; pointer-events: auto; }
.nex-btn { width: 20px; height: 14px; border: none; background: #333; color: #fff; font-size: 0.8em; font-weight: bold; cursor: pointer; transition: 0.2s; border-radius: 3px; padding: 0; line-height: 1; }
.nex-btn:hover { background: var(--primary); color: #000; }
.nex-inp { width: 60px; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.nex-inp::-webkit-inner-spin-button, .nex-inp::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

.status-vertical { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.status-bar-row { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 10px; background: #0f0f0f; padding: 8px 15px; border-radius: var(--radius); border: 1px solid #222; }
.status-label { font-weight: bold; font-size: 1.2em; text-align: right; }
.status-fill-area { height: 30px; background: #222; border-radius: 4px; position: relative; overflow: hidden; border: 1px solid #333; }
.status-fill { height: 100%; transition: width 0.3s; }
.status-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 5; text-shadow: 1px 1px 3px #000; font-weight: bold; }
.inp-mini-overlay { width: 45px; text-align: center; font-size: 1em; font-weight: bold; background: transparent; border: none; color: #fff; padding: 0; margin: 0; text-shadow: inherit; }
.c-pv { color: #ff4444; } .bg-pv { background: #ff4444; }
.c-pe { color: #0077ff; } .bg-pe { background: #0077ff; }
.c-san { color: #aaa; } .bg-san { background: #555; }

.def-container { display: flex; justify-content: space-around; background: var(--card); padding: 15px; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 30px; }
.def-box { text-align: center; }
.def-val { font-size: 1.5em; font-weight: bold; color: #fff; }

.section-title { color: var(--accent); border-bottom: 1px solid #333; margin: 30px 0 10px 0; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.ficha-full-width { margin-bottom: 20px; }

.skill-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width: 800px) { .skill-list { grid-template-columns: 1fr; } }
.skill-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px; border-radius: 6px; border: 1px solid #222; background: #080808; font-size: 0.9em; transition: 0.2s; }
.skill-row:hover { background: #111; border-color: var(--primary); transform: translateX(3px); }
.sk-tr { border: 1px solid var(--treinado); color: var(--treinado); }
.sk-tr:hover { border-color: var(--treinado); box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
.sk-tr select, .sk-tr input, .sk-tr .sk-total { color: var(--treinado) !important; border-color: var(--treinado) !important; }
.sk-vet { border: 1px solid var(--veterano); color: var(--veterano); }
.sk-vet:hover { border-color: var(--veterano); box-shadow: 0 0 10px rgba(30, 144, 255, 0.3); }
.sk-vet select, .sk-vet input, .sk-vet .sk-total { color: var(--veterano) !important; border-color: var(--veterano) !important; }
.sk-exp { border: 1px solid var(--expert); color: var(--expert); }
.sk-exp:hover { border-color: var(--expert); box-shadow: 0 0 10px rgba(138, 43, 226, 0.3); }
.sk-exp select, .sk-exp input, .sk-exp .sk-total { color: var(--expert) !important; border-color: var(--expert) !important; }
.sk-val { width: 45px; text-align: center; background: #000; border: 1px solid #444; color: #fff; }
.sk-total { width: 40px; text-align: center; font-weight: bold; color: #fff; padding: 5px; background: #222; border-radius: 4px; }

/* Profissão: input inline ao lado do nome da perícia */
.inp-prof { padding: 6px 8px; font-size: 0.9em; background: #000; border: 1px solid #444; color: #fff; border-radius: 6px; width: 140px; box-sizing: border-box; }

/* Mantém o texto das perícias em tamanho uniforme (sem small visual menor) */
.skill-row .sk-name small { font-size: 0.95em; opacity: 0.6; margin-left: 6px; }

.item-card { 
    background: linear-gradient(135deg, rgba(15, 15, 25, 0.60) 0%, rgba(30, 15, 30, 0.60) 100%);
    border: 1px solid rgba(102, 126, 234, 0.25);
    margin-bottom: 8px; 
    border-radius: 8px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.item-header { 
    padding: 12px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.80) 0%, rgba(30, 20, 35, 0.80) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.15);
    transition: all 0.2s ease;
}
.item-header:hover {
    background: linear-gradient(135deg, rgba(40, 30, 50, 0.90) 0%, rgba(50, 30, 60, 0.90) 100%);
}
.item-body { 
    padding: 15px; 
    display: none; 
    border-top: 1px solid rgba(102, 126, 234, 0.15);
    background: linear-gradient(135deg, rgba(10, 10, 20, 0.50) 0%, rgba(20, 10, 25, 0.50) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.item-card.open .item-body { display: block; }
.arrow { transition: 0.3s; font-size: 0.8em; color: #666; }
.item-card.open .arrow { transform: rotate(180deg); color: #fff; }

/* ATTACK CARDS - Enhanced styling */
.item-card .btn { margin: 2px; }
.item-card .btn:hover { transform: scale(1.02); }
.item-card select.inp-dark { cursor: pointer; font-weight: bold; }
.item-card select.inp-dark:focus { border-color: var(--primary); box-shadow: 0 0 5px rgba(138, 43, 226, 0.3); }

/* HABILIDADES CARD */
.hab-card { background: #1a1a1a; border-left: 3px solid var(--primary); padding: 10px; margin-bottom: 5px; position: relative; }
.hab-header-edit { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.inp-transp-bold { background: transparent; border: none; color: #fff; font-weight: bold; width: 85%; font-size: 1em; }
.inp-transp-bold:focus { border-bottom: 1px solid #666; }
.text-transp { background: transparent; border: none; color: #ccc; width: 100%; font-size: 0.9em; resize: vertical; min-height: 40px; font-family: inherit; }
.text-transp:focus { background: #111; outline: 1px solid #444; }

/* RITUAIS CARD (NOVO) - cor roxo-rosado para diferenciar de habilidades */
.rit-card { background: #110d14; border-left: 3px solid #c832b4; padding: 10px; margin-bottom: 5px; position: relative; }
.rit-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 5px; margin-bottom: 5px; }
.inp-rit-mini { background: #000; border: 1px solid #444; color: #aaa; font-size: 0.8em; text-align: center; padding: 5px; border-radius: 4px; }

.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width: 800px) { .split-row { grid-template-columns: 1fr; } }

.auto-hab strong { color: #fff; display: block; }
.text-area-box { width: 100%; height: 300px; padding: 15px; background: #080808; border: 1px solid #333; border-radius: var(--radius); resize: vertical; color:#ccc; line-height:1.5; }

.footer { text-align: center; padding: 30px; color: #555; font-size: 0.9em; border-top: 1px solid #222; margin-top: 50px; line-height: 1.6; }

/* PAINEL STREAMER */
#viewPainelStreamer { background: #00b140; min-height: 100vh; padding: 50px; }
.painel-streamer-card-v2 { display: flex; align-items: center; margin-bottom: 30px; width: 600px; }
.painel-streamer-avatar-container { position: relative; width: 120px; height: 120px; margin-right: -20px; z-index: 2; flex-shrink: 0; }
.painel-streamer-img { width: 100%; height: 100%; border-radius: 50%; border: 4px solid #fff; object-fit: cover; background: transparent; }
.painel-streamer-san-bubble { position: absolute; bottom: 0; right: 0; width: 45px; height: 45px; background: #111; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; font-size: 1.2em; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.painel-streamer-data { flex-grow: 1; background: transparent; border: none; padding: 10px 20px 10px 40px; display: flex; flex-direction: column; justify-content: center; height: 100px; }
.painel-streamer-name { font-family: 'Arial Black', sans-serif; font-size: 1.6em; text-transform: uppercase; color: #fff; margin-bottom: 8px; line-height: 1; font-weight: 900; text-shadow: none; }
.painel-streamer-bars { display: flex; flex-direction: column; gap: 5px; }
.painel-streamer-bar-bg { width: 100%; height: 18px; background: rgba(0,0,0,0.5); border-radius: 10px; overflow: hidden; position: relative; border: none; }
.painel-streamer-bar-fill { height: 100%; transition: width 0.5s; }
.painel-streamer-bar-txt { position: absolute; width: 100%; text-align: center; font-size: 0.75em; line-height: 18px; font-weight: bold; color: #fff; top:0; left:0; z-index: 5; text-shadow: none; }

/* ================= ROLAGEM (DICE EXTENSION) ================= */
.cat-box {
    padding: 12px 16px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 60px;
    transition: all 0.2s;
}
.cat-box:hover {
    border-color: var(--primary);
    background: #222;
}
.cat-label {
    font-size: 0.75em;
    color: #888;
    text-transform: uppercase;
    font-weight: bold;
}
.cat-count {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--primary);
}

.dice-panel {
    position: fixed; bottom: 20px; right: 20px; width: 300px; height: 300px;
    background: #000; border: 2px solid var(--primary); border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); display: none; flex-direction: column;
    z-index: 9000;
}
.dice-panel.show { display: flex; animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from {transform: translateX(100%);} to {transform: translateX(0);} }

.dice-header {
    background: #111; padding: 5px 10px; display: flex;
    justify-content: space-between; align-items: center;
    color: var(--primary); font-family: sans-serif; font-size: 12px;
    letter-spacing: 1px; border-bottom: 1px solid #333;
}
.dice-controls { display: flex; gap: 10px; align-items: center; }
#dice-color-picker { border: none; width: 20px; height: 20px; background: transparent; cursor: pointer; padding: 0; }
.btn-icon-small { background:none; border:none; cursor:pointer; font-size:1.2em; color:#fff; padding:0; }
.dice-table-container { position: relative; flex: 1; overflow: hidden; }
.table-img { width: 100%; height: 100%; object-fit: cover; }
#dice-wrapper {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 120px; height: 120px; display: flex; justify-content: center; align-items: center;
}
#dice-img { width: 100%; transition: filter 0.2s; }
#dice-result {
    position: absolute; color: #fff; font-size: 32px; font-family: 'Courier New', Courier, monospace;
    font-weight: bold; text-shadow: 2px 2px 5px #000; z-index: 2;
}
.rolling { animation: rollAnim 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes rollAnim { 0% { transform: scale(0) rotate(0deg); } 100% { transform: scale(1) rotate(720deg); } }

/* MALDIÇÕES */
.btn-maldicao {
    background: linear-gradient(135deg, #8a2be2, #5a1a9a);
    border-color: #8a2be2;
    color: #fff;
    text-shadow: 0 0 5px rgba(138, 43, 226, 0.5);
}
.btn-maldicao:hover {
    background: linear-gradient(135deg, #9b3cf3, #6b2bab);
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
    border-color: #9b3cf3;
    color: #fff;
}

/* AFINIDADES */
.afinidade-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(26, 26, 26, 0.5);
    border: 1px solid rgba(51, 51, 51, 0.8);
    border-radius: 6px;
    transition: 0.2s;
}
.afinidade-row:hover {
    background: rgba(34, 34, 34, 0.7);
    border-color: var(--primary);
}
.afinidade-label {
    font-weight: bold;
    font-size: 0.9em;
    min-width: 120px;
}
.afinidade-checks {
    display: flex;
    gap: 8px;
}
.check-afinidade {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.85em;
    color: #ccc;
    transition: 0.2s;
}
.check-afinidade:hover {
    color: var(--primary);
}
.check-afinidade input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* BOTÃO DE DESCANSO - mesmo estilo do transformar */
.btn-descanso-icon {
    position: absolute;
    top: -45px;
    right: 0;
    background: var(--card);
    color: #fff;
    font-weight: bold;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    text-transform: uppercase;
}
.btn-descanso-icon:hover {
    transform: scale(1.05);
    border-color: var(--primary);
    color: var(--primary);
}



/* BOTÕES DO MODAL DE DESCANSO */
.btn-descanso {
    padding: 15px 20px;
    text-align: left;
    transition: all 0.2s;
    border: none;
}
.btn-descanso:hover {
    transform: translateX(5px);
    filter: brightness(1.15);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.btn-descanso small {
    font-size: 0.75em;
    display: block;
    margin-top: 2px;
}

/* Estilos para abas de catálogo */
.db-tab {
    padding: 12px 20px;
    border: none;
    background: #1a1a1a;
    color: #aaa;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    font-weight: normal;
    transition: all 0.3s ease;
    font-size: 0.95em;
    border-bottom: 2px solid transparent;
}

.db-tab:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #ddd;
}

.db-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: bold;
    border-bottom: 2px solid #667eea;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}