/* ===========================================
   xTibia - CSS Base (Variáveis e Estilos Globais)
   =========================================== */

:root {
    --bg: #1a1a1a; 
    --card: #2a2a2a; 
    --text: #f0f0f0; 
    --muted: #b0b0b0;
    --primary: #6a6a6a; 
    --accent: #8a8a8a; 
    --danger: #a66; 
    --gold: #aa9;
    --border: rgba(255,255,255,.15);
    --gradient-1: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    --gradient-2: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    --gradient-3: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
    --bg-hover: rgba(255,255,255,0.05);
    --accent-light: #aaa;
    
    /* Sidebar Variables */
    --sidebar-width: 250px;
    --sidebar-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d30 50%, #1a1a1a 100%);
    --sidebar-border: rgba(212, 175, 55, 0.5);
    --sidebar-link-color: #e0e0e0;
    --sidebar-link-hover-bg: rgba(212, 175, 55, 0.1);
    --sidebar-link-active-bg: linear-gradient(90deg, #d4af37, #f4e677);
    --sidebar-link-active-color: #1a1a1a;
    --sidebar-sublink-color: #f2e7b9;
    --sidebar-sublink-bg: rgba(212, 175, 55, 0.08);
    --sidebar-sublink-hover-bg: rgba(212, 175, 55, 0.18);
    --sidebar-sublink-active-bg: linear-gradient(90deg, #2d2a20 0%, #1c1a14 100%);
}

/* ===========================================
   Sidebar Layout
   =========================================== */

body.has-sidebar {
    display: flex;
}

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding-top: 1rem;
    overflow-y: auto;
    transition: transform 0.3s ease;
    z-index: 1000;
    box-shadow: 4px 0 15px rgba(0,0,0,0.5);
}

.main-content {
    margin-left: var(--sidebar-width);
    padding: 2rem;
    width: calc(100% - var(--sidebar-width));
    transition: margin-left 0.3s ease;
}

.sidebar-header {
    padding: 0 1.5rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 1rem;
    text-align: center;
}

.sidebar-header strong {
    font-size: 1.5em;
    font-weight: 700;
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sidebar Auth Tabs */
.sidebar-auth-tabs {
    display: flex;
    margin: 0 0.5rem 1rem;
    gap: 0.5rem;
}

.sidebar-auth-tabs a {
    flex: 1;
    text-align: center;
    padding: 0.8rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.tab-register {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white !important;
}

.tab-register:hover {
    background: linear-gradient(135deg, #27ae60, #229954);
    transform: translateY(-2px);
}

.tab-login {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white !important;
}

.tab-login:hover {
    background: linear-gradient(135deg, #2980b9, #1f6dad);
    transform: translateY(-2px);
}

/* Sidebar Navigation */
.sidebar-nav-item, .sidebar-nav-link {
    display: block;
    color: var(--sidebar-link-color);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.sidebar-nav-link {
    padding: 0.85rem 1.5rem;
}

.sidebar-nav-link:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: #d4af37;
    padding-left: 1.7rem;
}

.sidebar-nav-link.active {
    background: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active-color) !important;
    font-weight: bold;
    border-right: 4px solid #d4af37;
    box-shadow: inset -5px 0 15px rgba(0,0,0,0.3);
}

.sidebar-nav-dropdown-toggle {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.85rem 1.5rem;
    font-family: inherit;
    color: var(--sidebar-link-color);
}

.sidebar-nav-dropdown-toggle:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: #d4af37;
}

.sidebar-nav-dropdown-toggle.active {
    background: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active-color) !important;
    font-weight: bold;
    border-right: 4px solid #d4af37;
    box-shadow: inset -5px 0 15px rgba(0,0,0,0.3);
}

.sidebar-nav-dropdown {
    padding-left: 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(0,0,0,0.2);
}

.sidebar-nav-dropdown .sidebar-nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.9rem;
    color: var(--sidebar-sublink-color);
    background: var(--sidebar-sublink-bg);
    border-left: 3px solid transparent;
}

.sidebar-nav-dropdown .sidebar-nav-link:hover,
.sidebar-nav-dropdown .sidebar-nav-link:focus {
    background: var(--sidebar-sublink-hover-bg);
    color: #ffe89a;
    padding-left: 1.9rem;
}

.sidebar-nav-dropdown .sidebar-nav-link.active {
    background: var(--sidebar-sublink-active-bg);
    color: #f8e7b0 !important;
    font-weight: 600;
    border-left: 3px solid #d4af37;
    box-shadow: inset -4px 0 10px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,175,55,0.25);
}

.sidebar-nav-item.open > .sidebar-nav-dropdown {
    max-height: 1000px;
}

.dropdown-arrow {
    float: right;
    transition: transform 0.3s;
    font-size: 0.8em;
}

.sidebar-nav-item.open .sidebar-nav-dropdown-toggle .dropdown-arrow {
    transform: rotate(90deg);
}

.sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-footer .sidebar-nav-link {
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Sidebar Section Title */
.sidebar-section-title {
    padding: 0.5rem 1.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin-top: 0.5rem;
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
        width: 100%;
    }
    .mobile-toggle {
        display: block;
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1001;
        background: var(--card);
        border: 1px solid var(--border);
        color: var(--text);
        border-radius: 4px;
        padding: 0.5rem 0.8rem;
        cursor: pointer;
    }
}

/* Reset e Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background: 
        linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
        url('../images/bg.png') no-repeat center center fixed,
        #0f0f0f;
    background-size: cover;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--text);
    font: 16px/1.4 system-ui, Segoe UI, Roboto, sans-serif;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            90deg, transparent, transparent 2px,
            rgba(255,255,255,0.004) 2px, rgba(255,255,255,0.004) 4px
        ),
        repeating-linear-gradient(
            0deg, transparent, transparent 2px,
            rgba(255,255,255,0.004) 2px, rgba(255,255,255,0.004) 4px
        );
    pointer-events: none;
    z-index: -1;
}

/* Container */
.container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* Cards */
.card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin: 14px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Tipografia */
h1, h2, h3 { margin: 0 0 10px; }
.muted { color: var(--muted); }
hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* xTibia Logo Text Style */
.xtibia-logo {
    font-weight: 700;
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    display: inline;
}

/* Botões */
.btn {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    background: var(--gradient-3);
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 14px;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.btn.primary {
    background: linear-gradient(to bottom, #6a6a6a, #4a4a4a);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.btn.gold {
    background: linear-gradient(to bottom, #aa9, #887);
    color: #332200;
    border: none;
}

.btn.small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

.btn.danger {
    background: linear-gradient(135deg, #e53e3e, #c53030);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(229,62,62,0.3);
}

/* Grid System */
.grid { display: grid; gap: 12px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Forms */
label { display: block; margin: 8px 0 4px; }

input, select, textarea {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    color: var(--text);
    transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #6a6a6a;
    box-shadow: 0 0 0 2px rgba(106,106,106,0.2);
}

/* Images */
img.thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    image-rendering: auto;
}

/* Stats */
.stat {
    display: inline-block;
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
    padding: 6px 10px;
    border-radius: 8px;
    margin: 0 6px 6px 0;
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Row */
.row {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--gradient-2);
}

/* Tabelas */
.table-wrap { overflow-x: auto; border-radius: 10px; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
}

table thead {
    background: rgba(0,0,0,0.4);
}

table th, table td {
    padding: 10px 14px;
    text-align: left;
}

table th {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
}

table tbody tr {
    transition: background 0.25s;
    border-bottom: 1px solid var(--border);
}

table tbody tr:hover {
    background: rgba(255,255,255,0.06);
}

/* Alertas */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.alert-success {
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.alert-error {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.alert-warning {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Responsivo */
@media (max-width: 768px) {
    .container { padding: 10px; }
    .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-6 {
        grid-template-columns: 1fr;
    }
}
/* ===========================================
   xTibia - Temas Dinâmicos
   =========================================== */

/* Tema Clássico (Padrão) */
[data-theme="classic"] {
    --bg: #1a1a1a; 
    --card: #2a2a2a; 
    --text: #f0f0f0; 
    --muted: #b0b0b0;
    --primary: #6a6a6a; 
    --accent: #ffd700; 
    --danger: #a66; 
    --gold: #aa9;
    --border: rgba(255,255,255,.15);
    --gradient-1: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    --gradient-2: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    --gradient-3: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
    --bg-hover: rgba(255,255,255,0.05);
    --accent-light: #ffe066;
}

/* Tema Medieval Dark */
[data-theme="medieval"] {
    --bg: #0d0d0d; 
    --card: #1a1a1a; 
    --text: #e0e0e0; 
    --muted: #999;
    --primary: #8b0000; 
    --accent: #dc143c; 
    --danger: #ff4444; 
    --gold: #c9a227;
    --border: rgba(220, 20, 60, .2);
    --gradient-1: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    --gradient-2: linear-gradient(135deg, #2a1a1a 0%, #1a0d0d 100%);
    --gradient-3: linear-gradient(135deg, #3a2020 0%, #2a1515 100%);
    --bg-hover: rgba(220, 20, 60, 0.1);
    --accent-light: #ff6b6b;
}

[data-theme="medieval"] html,
html[data-theme="medieval"] {
    background: 
        linear-gradient(rgba(20, 0, 0, 0.8), rgba(10, 0, 0, 0.9)),
        url('../images/bg.png') no-repeat center center fixed,
        #0d0d0d;
    background-size: cover;
}

/* Tema Oceano Profundo */
[data-theme="ocean"] {
    --bg: #0a1929; 
    --card: #132f4c; 
    --text: #e3f2fd; 
    --muted: #90caf9;
    --primary: #1976d2; 
    --accent: #00d4ff; 
    --danger: #f44336; 
    --gold: #ffeb3b;
    --border: rgba(0, 212, 255, .2);
    --gradient-1: linear-gradient(135deg, #132f4c 0%, #0a1929 100%);
    --gradient-2: linear-gradient(135deg, #1e4976 0%, #132f4c 100%);
    --gradient-3: linear-gradient(135deg, #2a5a8a 0%, #1e4976 100%);
    --bg-hover: rgba(0, 212, 255, 0.1);
    --accent-light: #4dd0e1;
}

[data-theme="ocean"] html,
html[data-theme="ocean"] {
    background: 
        linear-gradient(rgba(0, 20, 40, 0.85), rgba(0, 10, 30, 0.9)),
        url('../images/bg.png') no-repeat center center fixed,
        #0a1929;
    background-size: cover;
}

/* Tema Floresta Encantada */
[data-theme="forest"] {
    --bg: #0d1f0d; 
    --card: #1a3a1a; 
    --text: #e8f5e9; 
    --muted: #a5d6a7;
    --primary: #2e7d32; 
    --accent: #4caf50; 
    --danger: #ef5350; 
    --gold: #ffca28;
    --border: rgba(76, 175, 80, .2);
    --gradient-1: linear-gradient(135deg, #1a3a1a 0%, #0d1f0d 100%);
    --gradient-2: linear-gradient(135deg, #2e5a2e 0%, #1a3a1a 100%);
    --gradient-3: linear-gradient(135deg, #3e7a3e 0%, #2e5a2e 100%);
    --bg-hover: rgba(76, 175, 80, 0.1);
    --accent-light: #81c784;
}

[data-theme="forest"] html,
html[data-theme="forest"] {
    background: 
        linear-gradient(rgba(0, 20, 0, 0.85), rgba(0, 15, 0, 0.9)),
        url('../images/bg.png') no-repeat center center fixed,
        #0d1f0d;
    background-size: cover;
}

/* Tema Realeza Púrpura */
[data-theme="royal"] {
    --bg: #1a0a2e; 
    --card: #2d1b4e; 
    --text: #f3e5f5; 
    --muted: #ce93d8;
    --primary: #7b1fa2; 
    --accent: #e040fb; 
    --danger: #f44336; 
    --gold: #ffd54f;
    --border: rgba(224, 64, 251, .2);
    --gradient-1: linear-gradient(135deg, #2d1b4e 0%, #1a0a2e 100%);
    --gradient-2: linear-gradient(135deg, #4a2c7a 0%, #2d1b4e 100%);
    --gradient-3: linear-gradient(135deg, #6a3d9a 0%, #4a2c7a 100%);
    --bg-hover: rgba(224, 64, 251, 0.1);
    --accent-light: #ea80fc;
}

[data-theme="royal"] html,
html[data-theme="royal"] {
    background: 
        linear-gradient(rgba(20, 0, 40, 0.85), rgba(10, 0, 30, 0.9)),
        url('../images/bg.png') no-repeat center center fixed,
        #1a0a2e;
    background-size: cover;
}

/* ===== Ajustes gerais para todos os temas ===== */

/* Links e botões com cor accent */
[data-theme] a:hover,
[data-theme] .nav-link:hover {
    color: var(--accent);
}

[data-theme] .btn-primary,
[data-theme] .btn-accent {
    background: var(--accent);
    color: var(--bg);
}

/* Títulos e destaques */
[data-theme] h1,
[data-theme] h2,
[data-theme] h3 {
    color: var(--accent);
}

/* Bordas destacadas */
[data-theme] .card {
    border-color: var(--border);
    background: var(--gradient-2);
}

/* Sidebar */
[data-theme] .sidebar {
    background: var(--gradient-1);
    border-color: var(--border);
}

[data-theme] .sidebar-item:hover,
[data-theme] .sidebar-item.active {
    background: var(--bg-hover);
    border-left-color: var(--accent);
}

/* Inputs */
[data-theme] input,
[data-theme] select,
[data-theme] textarea {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

[data-theme] input:focus,
[data-theme] select:focus,
[data-theme] textarea:focus {
    border-color: var(--accent);
}

/* Badges e tags */
[data-theme] .badge,
[data-theme] .tag {
    background: var(--primary);
    color: var(--text);
}

/* Barras de progresso */
[data-theme] .progress-fill {
    background: linear-gradient(90deg, var(--primary), var(--accent));
}
/* ===========================================
   xTibia - Tooltips e Modais
   =========================================== */

/* Tooltips */
.tooltip {
    position: absolute;
    max-width: 320px;
    min-width: 200px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #d4af37;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.7), 0 0 15px rgba(212, 175, 55, 0.2);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tooltip.visible {
    opacity: 1;
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.tooltip-icon {
    width: 48px;
    height: 48px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-icon img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.tooltip-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #d4af37;
    margin: 0;
}

.tooltip-subtitle {
    font-size: 0.85em;
    color: var(--muted);
    margin: 4px 0 0;
}

.tooltip-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tooltip-stat {
    background: rgba(0,0,0,0.2);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.9em;
}

.tooltip-stat .label {
    color: var(--muted);
}

.tooltip-stat .value {
    font-weight: bold;
    float: right;
}

.tooltip-description {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.9em;
    color: var(--muted);
    line-height: 1.5;
}

/* Modais genéricos */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

.modal-content {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    border: 2px solid #d4af37;
    border-radius: 14px;
    max-width: 90%;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d30 50%, #1a1a1a 100%);
    padding: 20px;
    border-bottom: 2px solid #d4af37;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    background: linear-gradient(45deg, #d4af37, #f4e677);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
}

.modal-close:hover {
    color: #e74c3c;
}

.modal-body {
    padding: 25px;
    max-height: calc(90vh - 160px);
    overflow-y: auto;
}

.modal-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Confirmação */
.confirm-modal .modal-content {
    max-width: 400px;
    text-align: center;
}

.confirm-modal .modal-body {
    padding: 30px;
}

.confirm-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.confirm-icon.warning {
    color: #f1c40f;
}

.confirm-icon.danger {
    color: #e74c3c;
}

.confirm-icon.success {
    color: #2ecc71;
}

.confirm-message {
    font-size: 1.1em;
    margin-bottom: 20px;
}

.confirm-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Loading Spinner */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(212, 175, 55, 0.3);
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px 20px;
    min-width: 280px;
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.success {
    border-color: rgba(46, 204, 113, 0.5);
}

.toast.success .toast-icon {
    color: #2ecc71;
}

.toast.error {
    border-color: rgba(231, 76, 60, 0.5);
}

.toast.error .toast-icon {
    color: #e74c3c;
}

.toast.warning {
    border-color: rgba(241, 196, 15, 0.5);
}

.toast.warning .toast-icon {
    color: #f1c40f;
}

.toast-icon {
    font-size: 1.5em;
}

.toast-message {
    flex: 1;
}

.toast-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    border: 1px solid #d4af37;
    border-radius: 8px;
    min-width: 180px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    z-index: 10001;
    overflow: hidden;
}

.context-menu-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease;
}

.context-menu-item:hover {
    background: rgba(212, 175, 55, 0.2);
}

.context-menu-separator {
    height: 1px;
    background: var(--border);
    margin: 5px 0;
}

.context-menu-item.danger {
    color: #e74c3c;
}

.context-menu-item.danger:hover {
    background: rgba(231, 76, 60, 0.2);
}
/* ===========================================
   xTibia - Header e Navegação
   =========================================== */

.header {
    border-bottom: 2px solid #d4af37;
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d30 50%, #1a1a1a 100%);
    backdrop-filter: blur(10px);
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 1px 0 rgba(212, 175, 55, 0.5);
}

.header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    opacity: 0.8;
}

.header .container {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    padding: 12px 20px;
}

.header-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-brand strong {
    font-size: 1.8em;
    font-weight: 700;
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.header-brand strong:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.header-description {
    font-size: 0.85em;
    color: #c0c0c0;
    opacity: 0.9;
    font-weight: 400;
}

/* Menu principal */
.nav {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-wrap: wrap;
    background: transparent;
    padding: 0;
    margin: 0;
}

.nav-mobile-toggle {
    display: none !important;
    background: linear-gradient(45deg, #d4af37, #f4e677);
    border: none;
    color: #1a1a1a;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.nav-mobile-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.nav-item {
    position: relative;
    display: inline-block;
}

.nav a, .nav-dropdown-toggle {
    color: #e0e0e0;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 0;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-size: 0.95em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin-right: 1px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-dropdown-toggle {
    font-family: inherit;
}

.nav a::before, .nav-dropdown-toggle::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    transition: left 0.5s ease;
}

.nav a:hover::before, .nav-dropdown-toggle:hover::before {
    left: 100%;
}

.nav a:hover, .nav-dropdown-toggle:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.4) 0%, rgba(244, 230, 119, 0.3) 100%);
    color: #d4af37;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 8px rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}

.nav a:active, .nav-dropdown-toggle:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.nav a.nav-active, .nav-dropdown-toggle.nav-active {
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Dropdown */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95) 0%, rgba(30, 30, 30, 0.98) 100%);
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6), 0 0 20px rgba(212, 175, 55, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    z-index: 1000;
    min-width: 220px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    display: block;
    padding: 12px 20px;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    border-right: none;
    font-size: 0.9em;
    margin-right: 0;
    box-shadow: none;
}

.nav-dropdown a:last-child {
    border-bottom: none;
    border-radius: 0 0 7px 7px;
}

.nav-dropdown a:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.3), rgba(244, 230, 119, 0.2));
    color: #d4af37;
    transform: none;
    box-shadow: none;
    padding-left: 25px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.dropdown-arrow {
    font-size: 0.7em;
    transition: transform 0.2s ease;
    margin-left: 6px;
    opacity: 0.8;
}

.nav-item:hover .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
    color: #d4af37;
}

/* Separador visual */
.nav-separator {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.6), transparent);
    margin: 0 4px;
    opacity: 0.8;
    align-self: center;
}

/* Estados especiais */
.nav-logout {
    background: linear-gradient(135deg, rgba(150, 50, 50, 0.9) 0%, rgba(120, 40, 40, 0.95) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(200, 80, 80, 0.6) !important;
}

.nav-logout:hover {
    background: linear-gradient(135deg, rgba(180, 70, 70, 0.9) 0%, rgba(150, 50, 50, 0.95) 100%) !important;
}

.nav-login {
    background: linear-gradient(135deg, rgba(50, 120, 180, 0.9) 0%, rgba(40, 100, 150, 0.95) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(80, 150, 220, 0.6) !important;
}

.nav-login:hover {
    background: linear-gradient(135deg, rgba(70, 140, 200, 0.9) 0%, rgba(50, 120, 180, 0.95) 100%) !important;
}

/* Responsivo */
@media (max-width: 820px) {
    .header .container {
        flex-direction: column;
        gap: 10px;
    }
    
    .nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav a, .nav-dropdown-toggle {
        padding: 10px 14px;
        font-size: 0.85em;
    }
}
/* ===========================================
   xTibia - Login Page Premium
   =========================================== */

/* Wrapper */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 180px);
    padding: 40px 20px;
}

/* Login Box */
.login-box {
    width: 100%;
    max-width: 400px;
    background: linear-gradient(165deg, #1e1e24 0%, #15151a 100%);
    border-radius: 24px;
    padding: 45px 40px;
    position: relative;
    box-shadow: 
        0 30px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.login-box::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, #f4e677, #d4af37, transparent);
    border-radius: 2px;
}

/* Header */
.login-header {
    text-align: center;
    margin-bottom: 35px;
}

.logo-container {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
}

.logo-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(212,175,55,0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.logo-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    background: linear-gradient(145deg, #2a2a30 0%, #1a1a1f 100%);
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.3);
    box-shadow: 
        0 8px 20px rgba(0,0,0,0.4),
        inset 0 2px 4px rgba(255,255,255,0.1);
}

.login-header .xtibia-logo {
    font-size: 2.2em;
    margin: 0;
    letter-spacing: -1px;
}

.tagline {
    color: #888;
    font-size: 0.9em;
    margin: 8px 0 0;
}

/* Alert Error */
.alert-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 12px;
    margin-bottom: 25px;
}

.alert-icon {
    font-size: 1.2em;
}

.alert-text {
    color: #e74c3c;
    font-size: 0.9em;
}

/* Form */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s ease;
}

.input-group:focus-within {
    border-color: rgba(212,175,55,0.5);
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 0 4px rgba(212,175,55,0.1);
}

.input-icon {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: #666;
    transition: color 0.3s ease;
}

.input-group:focus-within .input-icon {
    color: #d4af37;
}

.input-group input {
    flex: 1;
    padding: 16px 16px 16px 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 15px;
    outline: none;
}

.input-group input::placeholder {
    color: #555;
}

.input-line {
    position: absolute;
    bottom: 0;
    left: 50px;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #d4af37, #f4e677);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    border-radius: 0 0 14px 0;
}

.input-group:focus-within .input-line {
    transform: scaleX(1);
}

/* Button Enter */
.btn-enter {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 30px;
    margin-top: 10px;
    background: transparent;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.btn-enter:hover {
    transform: translateY(-3px);
}

.btn-enter:active {
    transform: translateY(-1px);
}

.btn-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #d4af37 0%, #f7e98e 50%, #d4af37 100%);
    background-size: 200% auto;
    border-radius: 14px;
    transition: background-position 0.5s ease;
    box-shadow: 0 8px 25px rgba(212,175,55,0.4);
}

.btn-enter:hover .btn-bg {
    background-position: right center;
}

.btn-text {
    position: relative;
    z-index: 1;
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
}

.btn-arrow {
    position: relative;
    z-index: 1;
    color: #1a1a1a;
    font-size: 1.3em;
    transition: transform 0.3s ease;
}

.btn-enter:hover .btn-arrow {
    transform: translateX(5px);
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 30px 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.divider-text {
    color: #555;
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 2px;
}

/* Button Register */
.btn-create-account {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: #22c55e;
    color: white;
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.btn-create-account:hover {
    background: #16a34a;
    transform: scale(1.02);
}

/* ==================== Página de Registro ==================== */
.register-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
}

.register-card {
    background: linear-gradient(165deg, #1e1e24 0%, #15151a 100%);
    border-radius: 24px;
    padding: 45px 40px;
    width: 100%;
    max-width: 480px;
    position: relative;
    box-shadow: 
        0 30px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.register-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, #f4e677, #d4af37, transparent);
    border-radius: 2px;
}

.register-header {
    text-align: center;
    margin-bottom: 30px;
}

.register-header h1 {
    font-size: 1.8em;
    font-weight: 700;
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 8px;
}

.register-header p {
    color: var(--muted);
    margin: 0;
}

.register-form .form-group {
    margin-bottom: 20px;
}

.register-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-weight: 500;
}

.register-form input,
.register-form select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(0,0,0,0.4);
    color: var(--text);
    font-size: 15px;
    transition: all 0.3s ease;
}

.register-form input:focus,
.register-form select:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
    outline: none;
}

.register-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.register-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.register-footer a {
    color: #d4af37;
    text-decoration: none;
    font-weight: 600;
}

.register-footer a:hover {
    color: #f4e677;
}

/* Success/Error Messages */
.error-message {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.95em;
}

.success-message {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.95em;
}
/* ===========================================
   xTibia - Página do Jogo (game.php)
   =========================================== */

/* Interface de Status estilo Tibia */
.status-interface {
    background: linear-gradient(135deg, #111a2b, #1a2635);
    border-radius: 12px;
    padding: 20px;
    margin: 20px auto;
    max-width: 700px;
}

.status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.status-column {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
}

.status-header {
    background: #2d3748;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 10px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.status-row:last-child {
    border-bottom: none;
}

.status-label {
    color: #9bb0d1;
}

.status-value {
    font-weight: bold;
}

/* Barras de HP/Mana/Energy */
.hp-bar, .mana-bar, .energy-bar {
    height: 20px;
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
    overflow: hidden;
    margin: 5px 0;
    border: 1px solid var(--border);
}

.hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    transition: width 0.5s ease;
}

.mana-fill {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2980b9);
    transition: width 0.5s ease;
}

.energy-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    transition: width 0.5s ease;
}

/* Cards de equipamento */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 15px 0;
}

.equipment-slot {
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.equipment-slot:hover {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
}

.equipment-slot img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.equipment-slot .slot-name {
    font-size: 11px;
    color: var(--muted);
    margin-top: 5px;
}

/* Backpack */
.backpack-container {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
}

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

.backpack-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.backpack-slot {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 8px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.backpack-slot:hover {
    border-color: #d4af37;
    transform: scale(1.05);
}

.backpack-slot img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Slots de poções e magias */
.action-slots {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.action-slot {
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-slot:hover {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
}

.action-slot img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Área de combate */
.combat-area {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.monster-display {
    text-align: center;
    padding: 30px;
}

.monster-image {
    max-width: 150px;
    margin: 0 auto 20px;
}

.monster-info {
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
}

/* Botões de ação */
.combat-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.attack-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.attack-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

.attack-btn:disabled {
    background: #555;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Log de combate */
.combat-log {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 15px;
}

.log-entry {
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
}

.log-entry:last-child {
    border-bottom: none;
}

.log-damage {
    color: #e74c3c;
}

.log-heal {
    color: #2ecc71;
}

.log-exp {
    color: #f1c40f;
}

.log-loot {
    color: #9b59b6;
}

/* Responsivo */
@media (max-width: 768px) {
    .status-grid {
        grid-template-columns: 1fr;
    }
    
    .equipment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .backpack-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* ===========================================
   xTibia - Página de Loja (shop.php)
   =========================================== */

.shop-page {
    padding: 20px;
}

.shop-header {
    text-align: center;
    margin-bottom: 30px;
}

.shop-header h1 {
    background: linear-gradient(45deg, #d4af37, #f4e677);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.2em;
}

.shop-balance {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px 25px;
    display: inline-block;
    margin-top: 15px;
}

.shop-balance .gold-amount {
    font-size: 1.5em;
    font-weight: bold;
    color: #f1c40f;
}

/* Categorias */
.shop-categories {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 25px;
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
}

.category-btn {
    padding: 10px 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-btn:hover,
.category-btn.active {
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    border-color: transparent;
}

/* Grid de itens */
.shop-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.shop-item-card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.3s ease;
}

.shop-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    border-color: #d4af37;
}

.item-image-container {
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-bottom: 15px;
}

.item-image-container img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.item-info h3 {
    margin: 0 0 10px;
    font-size: 1.1em;
}

.item-slot {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    color: var(--muted);
    margin-bottom: 10px;
}

.item-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-bottom: 15px;
}

.item-stat {
    font-size: 0.85em;
    padding: 5px;
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
}

.item-stat .label {
    color: var(--muted);
}

.item-stat .value {
    font-weight: bold;
    margin-left: 5px;
}

/* Preços */
.item-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.price-tag {
    font-size: 1.2em;
    font-weight: bold;
    color: #f1c40f;
}

.buy-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.buy-btn:hover {
    background: linear-gradient(135deg, #3dd983, #2ecc71);
    transform: translateY(-2px);
}

.buy-btn:disabled {
    background: #555;
    cursor: not-allowed;
    transform: none;
}

.sell-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.sell-btn:hover {
    background: linear-gradient(135deg, #f05545, #d4433b);
}

/* Responsivo */
@media (max-width: 768px) {
    .shop-items-grid {
        grid-template-columns: 1fr;
    }
    
    .shop-categories {
        justify-content: center;
    }
}
/* ===========================================
   xTibia - Página de Caça (hunt.php) - PROFISSIONAL
   =========================================== */

/* ==========================================
   PLAYER PANEL - PAINEL DO JOGADOR
   ========================================== */

.player-panel {
    background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(212, 175, 55, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.panel-header {
    background: linear-gradient(135deg, #d4af37 0%, #f4e677 50%, #d4af37 100%);
    background-size: 200% 100%;
    animation: headerGradient 4s ease infinite;
    padding: 16px 24px;
    font-size: 1.1em;
    font-weight: 700;
    color: #1a1a1a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

@keyframes headerGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ==========================================
   STAT GRID - GRID DE ESTATÍSTICAS
   ========================================== */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 20px;
}

.stat-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-card:hover::before {
    opacity: 1;
}

/* ==========================================
   PROGRESS BARS - BARRAS DE PROGRESSO
   ========================================== */

.progress-bar {
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
    border-radius: 5px 5px 0 0;
}

/* ==========================================
   EXP PROGRESS CARD - CARTÃO DE EXPERIÊNCIA
   ========================================== */

.exp-progress-card {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.08), rgba(15, 23, 42, 0.9)) !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
}

.exp-progress-header {
    color: #fbbf24;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp-progress-info {
    margin-bottom: 12px;
}

.exp-info-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exp-info-line:last-child {
    border-bottom: none;
}

.exp-info-label {
    color: #9bb0d1;
    font-size: 12px;
}

.exp-info-value {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.exp-progress-card .progress-bar {
    height: 12px;
    margin-bottom: 8px;
}

.exp-progress-card .progress-fill {
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
    background-size: 200% 100%;
    animation: expShimmer 2s ease infinite;
}

@keyframes expShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.exp-percentage {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #fbbf24;
}

/* ==========================================
   EQUIPMENT GRID - GRID DE EQUIPAMENTOS
   ========================================== */

.equipment-skills-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 20px 20px;
}

.hunt-equipment-img,
.hunt-ammo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease;
}

.hunt-equipment-img:hover,
.hunt-ammo-img:hover {
    transform: scale(1.1);
}

/* ==========================================
   MONSTER GALLERY - GALERIA DE MONSTROS
   ========================================== */

.monster-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
    padding: 5px;
}

.monster-tile {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.monster-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.monster-tile:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 175, 55, 0.25);
}

.monster-tile:hover::before {
    opacity: 1;
}

.monster-tile:active {
    transform: translateY(-2px) scale(0.98);
}

.monster-tile img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.monster-tile:hover img {
    transform: scale(1.1);
}

.monster-tile > div:first-of-type {
    border-radius: 12px;
    position: relative;
    z-index: 1;
}

/* ==========================================
   SELECTED MONSTER PANEL - PAINEL DO MONSTRO SELECIONADO
   ========================================== */

#selectedMonsterPanel {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 2px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
    transition: all 0.3s ease;
}

#selectedMonsterPanel:hover {
    border-color: rgba(212, 175, 55, 0.5) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

#selectedMonsterPlaceholder {
    padding: 30px 20px;
    text-align: center;
}

#selectedMonsterPlaceholder div:first-child {
    font-size: 1.2em;
    color: #9bb0d1;
    margin-bottom: 8px;
    font-weight: 600;
}

/* ==========================================
   SPELLS & POTIONS SLOTS - SLOTS DE MAGIAS E POÇÕES
   ========================================== */

.hunt-potion-slot {
    transition: all 0.2s ease;
}

.hunt-potion-slot:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.3);
}

/* Cooldown Timer Animation */
.cooldown-timer {
    animation: cooldownPulse 1s ease-in-out infinite;
}

@keyframes cooldownPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ==========================================
   HUNT BUTTONS - BOTÕES DE CAÇA
   ========================================== */

.hunt-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    position: relative;
    overflow: hidden;
}

.hunt-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.hunt-btn:hover::before {
    left: 100%;
}

.hunt-btn:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

.hunt-btn:disabled {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.hunt-btn:disabled::before {
    display: none;
}

/* Experience Button */
.hunt-experience-btn {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3) !important;
}

.hunt-experience-btn:hover {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%) !important;
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4) !important;
}

/* ==========================================
   ENERGY WARNING - AVISO DE ENERGIA
   ========================================== */

.energy-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 2px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    padding: 20px;
    border-radius: 14px;
    text-align: center;
    margin-bottom: 20px;
    animation: energyPulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.energy-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.1), transparent);
    animation: energyShine 3s infinite;
}

@keyframes energyPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.2); }
    50% { box-shadow: 0 0 35px rgba(251, 191, 36, 0.4); }
}

@keyframes energyShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ==========================================
   FILTERS - FILTROS
   ========================================== */

.hunt-filters {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.filter-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    color: #9bb0d1;
    font-size: 13px;
    font-weight: 600;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14px;
    transition: all 0.2s ease;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

/* ==========================================
   HUNT INFO BOX - CAIXA DE INFORMAÇÕES
   ========================================== */

.hunt-info-box {
    background: linear-gradient(135deg, rgba(70, 226, 180, 0.08) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(70, 226, 180, 0.2);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
}

.hunt-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.hunt-info-item {
    text-align: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.hunt-info-item:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.hunt-info-title {
    color: #46e2b4;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.hunt-info-content {
    color: #90e6d0;
    font-size: 13px;
    line-height: 1.5;
}

/* ==========================================
   SKILL CARDS - CARTÕES DE SKILLS
   ========================================== */

.skill-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.skill-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.skill-name {
    font-weight: 700;
    font-size: 13px;
}

.skill-level {
    font-weight: 700;
    font-size: 15px;
}

.skill-progress {
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.skill-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}

.skill-percent {
    color: #9bb0d1;
}

.skill-critical {
    color: #ff6384;
    font-weight: 600;
}

/* ==========================================
   CRITICAL CHANCE BOX - CAIXA DE CHANCE CRÍTICA
   ========================================== */

.critical-box {
    background: linear-gradient(135deg, rgba(255, 99, 132, 0.1) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(255, 99, 132, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-top: 20px;
}

.critical-title {
    font-size: 12px;
    color: #ff6384;
    font-weight: 700;
    margin-bottom: 6px;
}

.critical-value {
    font-size: 22px;
    color: #ff6384;
    font-weight: 800;
}

.critical-desc {
    font-size: 10px;
    color: #ffb3c1;
    margin-top: 4px;
}

/* ==========================================
   BUTTONS GERAIS - BOTÕES GENÉRICOS
   ========================================== */

.btn {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn.primary {
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.btn.magic {
    background: linear-gradient(135deg, #b8860b, #daa520);
    color: #fff;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
}

.btn.magic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
}

.btn.accent {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

.btn.accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}

/* ==========================================
   TOOLTIP STYLES - ESTILOS DE TOOLTIP
   ========================================== */

#lootTooltip {
    font-family: inherit;
}

#lootTooltip::-webkit-scrollbar {
    width: 6px;
}

#lootTooltip::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#lootTooltip::-webkit-scrollbar-thumb {
    background: #ffd24d;
    border-radius: 3px;
}

/* ==========================================
   RESPONSIVO
   ========================================== */

@media (max-width: 1024px) {
    .equipment-skills-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .monster-gallery {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 10px;
    }
    
    .monster-tile {
        padding: 10px 8px;
    }
    
    .monster-tile img {
        width: 48px;
        height: 48px;
    }
    
    .stat-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-row {
        flex-direction: column;
    }
    
    #selectedMonsterPanel > div {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    .player-panel {
        border-radius: 16px;
    }
    
    .panel-header {
        padding: 14px 18px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .monster-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hunt-btn {
        padding: 12px 16px;
        font-size: 13px;
    }
    
    .btn {
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* ==========================================
   ANIMAÇÕES E EFEITOS EXTRAS
   ========================================== */

/* Animação de Pulso para Energia Baixa */
@keyframes lowEnergyPulse {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
    }
    50% { 
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.6);
    }
}

.low-energy-warning {
    animation: lowEnergyPulse 1.5s ease-in-out infinite;
}

/* Efeito de Brilho no Hover */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer-effect {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Efeito de Flutuação */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

.float-effect {
    animation: float 3s ease-in-out infinite;
}

/* Efeito de Borda Animada */
@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(212, 175, 55, 0.4);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
    }
    50% {
        border-color: rgba(212, 175, 55, 0.7);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.35);
    }
}

.glow-border {
    animation: borderGlow 2s ease-in-out infinite;
}

/* Transição suave para links */
a {
    transition: all 0.2s ease;
}

/* Scrollbar customizada para toda a página */
.player-panel::-webkit-scrollbar {
    width: 8px;
}

.player-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.player-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d4af37, #f4e677);
    border-radius: 4px;
}

.player-panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e6c24a, #f8ec8c);
}

/* Efeito de Destaque para Item Selecionado */
.monster-tile.selected {
    border-color: rgba(212, 175, 55, 0.8) !important;
    background: rgba(212, 175, 55, 0.15) !important;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

/* Tooltip de Ajuda */
.help-tooltip {
    position: relative;
    cursor: help;
}

.help-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.help-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 8px);
}

/* Badge de Status */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.success {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.status-badge.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge.info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
/* ===========================================
   HUNT ARENA - NOVA ÁREA DE CAÇA PROFISSIONAL
   =========================================== */

.hunt-arena {
    background: linear-gradient(165deg, #0f172a 0%, #1a1a2e 50%, #0f172a 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 24px;
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 24px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(212, 175, 55, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Header da Arena */
.hunt-arena-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.05));
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    position: relative;
    overflow: hidden;
}

.hunt-arena-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 50%, rgba(239, 68, 68, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(251, 146, 60, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.hunt-arena-title {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.hunt-arena-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 
        0 8px 20px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.hunt-arena-text h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.5px;
}

.hunt-arena-text p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #fca5a5;
    font-weight: 500;
}

.hunt-arena-stats {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.arena-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    min-width: 80px;
}

.arena-stat-value {
    font-size: 1.6em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.arena-stat-label {
    font-size: 11px;
    color: #9bb0d1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Sistema de Tabs de Dicas */
.hunt-tips-container {
    margin: 24px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.hunt-tips-header {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hunt-tip-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    color: #9bb0d1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.hunt-tip-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #d4af37, #f4e677);
    border-radius: 3px 3px 0 0;
    transition: width 0.3s ease;
}

.hunt-tip-tab:hover {
    color: #e2e8f0;
    background: rgba(212, 175, 55, 0.05);
}

.hunt-tip-tab.active {
    color: #fff;
    background: rgba(212, 175, 55, 0.1);
}

.hunt-tip-tab.active::after {
    width: 60%;
}

.hunt-tip-tab .tab-icon {
    font-size: 16px;
}

.hunt-tips-content {
    padding: 20px;
}

.hunt-tip-panel {
    display: none;
    gap: 16px;
}

.hunt-tip-panel.active {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tip-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.tip-card:hover {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

.tip-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.tip-icon.energy {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.tip-icon.regen {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.tip-icon.gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.tip-icon.exp {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.05));
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.tip-icon.damage {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.tip-icon.crit {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.05));
    border: 1px solid rgba(251, 146, 60, 0.3);
}

.tip-info h4 {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.tip-info p {
    margin: 0;
    font-size: 13px;
    color: #9bb0d1;
    line-height: 1.5;
}

.tip-info strong {
    color: #d4af37;
}

/* Área de Seleção do Monstro */
.monster-selection-area {
    padding: 0 24px;
}

.selected-monster-panel {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    border: 2px solid rgba(212, 175, 55, 0.15);
    border-radius: 20px;
    padding: 24px;
    min-height: 120px;
    transition: all 0.3s ease;
}

.selected-monster-panel:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.monster-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.placeholder-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.02));
    border: 2px dashed rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 16px;
    animation: placeholderFloat 3s ease-in-out infinite;
}

@keyframes placeholderFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.placeholder-text h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #e2e8f0;
}

.placeholder-text p {
    margin: 0;
    font-size: 14px;
    color: #9bb0d1;
}

.placeholder-hint {
    margin-top: 16px;
    padding: 10px 20px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    font-size: 12px;
    color: #d4af37;
    font-weight: 600;
    animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Seção da Galeria de Monstros */
.monster-gallery-section {
    margin: 24px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    overflow: hidden;
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gallery-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #e2e8f0;
}

.gallery-icon {
    font-size: 20px;
}

.gallery-filter {
    display: flex;
    align-items: center;
}

.gallery-search {
    padding: 10px 16px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 13px;
    width: 200px;
    transition: all 0.3s ease;
}

.gallery-search::placeholder {
    color: #64748b;
}

.gallery-search:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Nova Galeria de Monstros */
.monster-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    padding: 20px;
    max-height: 450px;
    overflow-y: auto;
}

.monster-gallery::-webkit-scrollbar {
    width: 8px;
}

.monster-gallery::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
}

.monster-gallery::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d4af37, #f4e677);
    border-radius: 4px;
}

.monster-tile {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.monster-tile-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, var(--glow-color, rgba(212, 175, 55, 0.3)) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.monster-tile:hover .monster-tile-glow {
    opacity: 0.5;
}

.monster-tile-content {
    position: relative;
    z-index: 1;
    padding: 16px 12px;
}

.monster-tile-img {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.monster-tile-img img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.monster-tile-img.no-img {
    font-size: 36px;
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.1), transparent);
    border-color: rgba(212, 175, 55, 0.2);
}

.monster-tile:hover .monster-tile-img img {
    transform: scale(1.15);
}

.monster-tile:hover .monster-tile-img {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.monster-tile-name {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.monster-tile-difficulty {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--diff-color, #10b981);
    background: color-mix(in srgb, var(--diff-color, #10b981) 15%, transparent);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--diff-color, #10b981) 30%, transparent);
    margin-bottom: 8px;
}

.monster-tile-stats {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.mini-stat {
    font-size: 10px;
    color: #9bb0d1;
    background: rgba(15, 23, 42, 0.6);
    padding: 3px 8px;
    border-radius: 6px;
}

.mini-stat.hp {
    color: #ef4444;
}

.mini-stat.win {
    color: #10b981;
}

.monster-tile:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(212, 175, 55, 0.15);
}

.monster-tile:active {
    transform: translateY(-2px) scale(0.98);
}

.monster-tile.selected {
    border-color: rgba(16, 185, 129, 0.6);
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.1), rgba(15, 23, 42, 0.95));
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(16, 185, 129, 0.2);
}

/* Responsividade para Hunt Arena */
@media (max-width: 768px) {
    .hunt-arena-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 20px;
    }
    
    .hunt-arena-title {
        flex-direction: column;
        gap: 12px;
    }
    
    .hunt-arena-stats {
        width: 100%;
        justify-content: center;
    }
    
    .hunt-tips-header {
        flex-wrap: wrap;
    }
    
    .hunt-tip-tab {
        padding: 12px 16px;
    }
    
    .hunt-tip-tab .tab-text {
        display: none;
    }
    
    .hunt-tip-tab .tab-icon {
        font-size: 20px;
    }
    
    .hunt-tip-panel.active {
        grid-template-columns: 1fr;
    }
    
    .monster-gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 12px;
        padding: 15px;
        max-height: 350px;
    }
    
    .monster-tile-content {
        padding: 12px 8px;
    }
    
    .monster-tile-img {
        width: 56px;
        height: 56px;
    }
    
    .monster-tile-img img {
        width: 48px;
        height: 48px;
    }
    
    .monster-tile-name {
        font-size: 11px;
    }
    
    .gallery-search {
        width: 150px;
        font-size: 12px;
        padding: 8px 12px;
    }
    
    .selected-monster-panel {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .hunt-arena {
        border-radius: 16px;
        margin: 0 -10px 20px;
    }
    
    .hunt-tips-container,
    .monster-selection-area,
    .monster-gallery-section {
        margin: 16px;
    }
    
    .monster-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 12px;
    }
    
    .monster-tile-stats {
        display: none;
    }
}
/* ===========================================
   xTibia - Battle Modal Profissional
   =========================================== */

/* Overlay do Modal */
.battle-modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInOverlay 0.3s ease;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Container do Modal */
.battle-modal-content {
    background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    width: 95%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(-20px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* Header do Modal */
.battle-modal-header {
    background: linear-gradient(135deg, #b8860b 0%, #d4af37 50%, #b8860b 100%);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.battle-modal-header h2 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.battle-modal-header h2::before {
    content: '⚔️';
    font-size: 1.2em;
}

.battle-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.battle-close:hover {
    background: #ef4444;
    transform: rotate(90deg);
}

/* Body do Modal */
.battle-modal-body {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%);
}

.battle-modal-body::-webkit-scrollbar {
    width: 6px;
}

.battle-modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.battle-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b8860b, #d4af37);
    border-radius: 3px;
}

/* Header dos Detalhes */
.battle-details-header {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.9) 0%, rgba(234, 88, 12, 0.9) 100%);
    margin: -20px -20px 20px -20px;
    padding: 14px 24px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.battle-details-header h3 {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Timeline de Batalha */
.battle-timeline {
    position: relative;
    padding-left: 20px;
}

.battle-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #d4af37 0%, #06b6d4 50%, #10b981 100%);
    border-radius: 1px;
}

/* Entradas do Log */
.battle-log-entry {
    position: relative;
    padding: 14px 18px;
    margin: 12px 0;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transform: translateX(-15px);
    animation: slideInLog 0.4s ease-out forwards;
    transition: all 0.2s ease;
}

.battle-log-entry:hover {
    background: rgba(30, 41, 59, 1);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateX(3px);
}

@keyframes slideInLog {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Indicador de Timeline */
.battle-log-entry::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d4af37;
    border: 3px solid #1a1f2e;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    z-index: 1;
}

/* Tipos de Entrada */
.battle-log-entry.player-damage {
    border-left: 3px solid #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.battle-log-entry.player-damage::before {
    background: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.battle-log-entry.monster-damage {
    border-left: 3px solid #ef4444;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.battle-log-entry.monster-damage::before {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.battle-log-entry.spell-cast {
    border-left: 3px solid #d4af37;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.battle-log-entry.spell-cast::before {
    background: #d4af37;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.battle-log-entry.victory {
    border-left: 3px solid #fbbf24;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, rgba(30, 41, 59, 0.8) 100%);
    font-weight: 600;
}

.battle-log-entry.victory::before {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
}

.battle-log-entry.skill-message {
    border-left: 3px solid #06b6d4;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.1) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.battle-log-entry.skill-message::before {
    background: #06b6d4;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

/* Footer do Modal */
.battle-modal-footer {
    padding: 16px 24px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 1) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

/* Botões Modernos */
.battle-modal-footer .btn {
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.battle-modal-footer .btn.primary {
    background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.battle-modal-footer .btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

.battle-modal-footer .btn.secondary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.battle-modal-footer .btn.secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Input de quantidade */
.battle-modal-footer input[type="number"] {
    width: 55px;
    padding: 10px 8px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.8);
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.battle-modal-footer input[type="number"]:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* Contador de Auto-Ataque */
#autoAttackCounter {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ==========================================
   LEVEL UP NOTIFICATION - SIMPLES E LIMPO
   ========================================== */

.level-up-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    animation: slideInRight 0.4s ease-out;
    transition: all 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.levelup-simple {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-left: 4px solid #10b981;
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 280px;
    max-width: 320px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    position: relative;
}

.levelup-simple-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.levelup-icon {
    font-size: 24px;
    animation: levelIconPulse 1s ease-in-out infinite;
}

@keyframes levelIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.levelup-title {
    font-size: 18px;
    font-weight: 700;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.levelup-simple-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.levelup-new-level {
    font-size: 16px;
    color: #e2e8f0;
}

.levelup-new-level strong {
    color: #fbbf24;
    font-size: 20px;
}

.levelup-vocation {
    display: inline-block;
    background: rgba(212, 175, 55, 0.15);
    color: #d4af37;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.levelup-gains {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.levelup-gains .gain {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.levelup-gains .gain.hp {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.levelup-gains .gain.mana {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.levelup-gains .gain.skill {
    background: rgba(212, 175, 55, 0.15);
    color: #d4af37;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.levelup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.levelup-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Partículas de celebração (removidas - agora simples) */
.level-up-particles {
    display: none;
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: particleFall 3s ease-in infinite;
}

@keyframes particleFall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Responsivo */
@media (max-width: 480px) {
    .battle-modal-content {
        max-height: 90vh;
        border-radius: 16px;
    }
    
    .battle-modal-footer {
        flex-direction: column;
    }
    
    .battle-modal-footer .btn {
        width: 100%;
        justify-content: center;
    }
    
    .level-up-card {
        min-width: 300px;
        max-width: 95vw;
    }
    
    .level-up-stats {
        grid-template-columns: 1fr;
    }
}
/* ==========================================
   BATTLE SUMMARY - RESUMO DA BATALHA
   ========================================== */

.battle-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.battle-summary-item {
    text-align: center;
    padding: 16px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.battle-summary-item:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-3px);
}

.battle-summary-item .icon {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
}

.battle-summary-item .label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.battle-summary-item .value {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, #f4e677);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.battle-summary-item.damage .value {
    background: linear-gradient(135deg, #10b981, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.battle-summary-item.received .value {
    background: linear-gradient(135deg, #ef4444, #f87171);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.battle-summary-item.exp .value {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================
   MONSTER INFO - INFORMAÇÕES DO MONSTRO
   ========================================== */

.battle-monster-info {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(30, 41, 59, 0.8) 100%);
    border-radius: 16px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    margin-bottom: 20px;
}

.battle-monster-avatar {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(239, 68, 68, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.battle-monster-avatar img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.battle-monster-details {
    flex: 1;
}

.battle-monster-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.battle-monster-name .skull {
    font-size: 1rem;
    opacity: 0.8;
}

.battle-monster-hp-bar {
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.battle-monster-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f87171);
    border-radius: 5px;
    transition: width 0.5s ease;
    position: relative;
}

.battle-monster-hp-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
    border-radius: 5px 5px 0 0;
}

.battle-monster-stats {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.battle-monster-stats span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================
   VICTORY BANNER - BANNER DE VITÓRIA
   ========================================== */

.victory-banner {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 2px solid rgba(251, 191, 36, 0.5);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.victory-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.2), transparent);
    animation: victoryShine 2s infinite;
}

@keyframes victoryShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.victory-banner h3 {
    margin: 0 0 12px 0;
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

.victory-banner p {
    margin: 0;
    color: #fde68a;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}

/* ==========================================
   DEATH BANNER - BANNER DE DERROTA
   ========================================== */

.death-banner {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 2px solid rgba(239, 68, 68, 0.5);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.death-banner h3 {
    margin: 0 0 12px 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ef4444;
}

.death-banner p {
    margin: 0;
    color: #fca5a5;
    font-size: 1rem;
}

/* ==========================================
   LOOT DISPLAY - EXIBIÇÃO DE LOOT
   ========================================== */

.battle-loot {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.battle-loot-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.battle-loot-header .icon {
    font-size: 1.5rem;
}

.battle-loot-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fbbf24;
}

.battle-loot-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.loot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.loot-item:hover {
    border-color: rgba(251, 191, 36, 0.4);
    transform: translateY(-2px);
}

.loot-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.loot-item .item-name {
    color: #e2e8f0;
    font-weight: 500;
}

.loot-item .item-count {
    color: #fbbf24;
    font-weight: 700;
    margin-left: 4px;
}

.loot-item.gold {
    border-color: rgba(251, 191, 36, 0.4);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(30, 41, 59, 0.6) 100%);
}

/* ==========================================
   ANIMATIONS - ANIMAÇÕES EXTRAS
   ========================================== */

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.6); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }

/* Efeito de crítico */
.critical-hit {
    animation: criticalHit 0.5s ease;
}

@keyframes criticalHit {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.3); filter: brightness(1.5); }
    50% { transform: scale(0.9); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Efeito de dano recebido */
.damage-flash {
    animation: damageFlash 0.3s ease;
}

@keyframes damageFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(239, 68, 68, 0.3); }
}
/* ===========================================
   xTibia - Rankings
   =========================================== */

/* ---- Layout Wrapper ---- */
.rankings-page-wrapper {
    width: 100%;
    padding: 20px;
}

.rankings-card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px 30px 40px;
    margin-top: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
}

/* ---- Header ---- */
.rankings-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.rankings-title {
    display: flex;
    align-items: center;
    gap: 18px;
}

.rankings-emoji {
    font-size: 56px;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
    flex-shrink: 0;
}

.rankings-h1 {
    margin: 0;
    font-size: 2.2em;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #ffd700, #ffae00, #ffcc33, #ffd700);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 700;
    animation: rankTitleShimmer 4s linear infinite;
}

@keyframes rankTitleShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ---- Summary Cards ---- */
.rankings-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.rsummary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .25s, transform .25s;
}

.rsummary-card:hover {
    border-color: rgba(255,215,0,0.35);
    transform: translateY(-2px);
}

.rsummary-icon {
    font-size: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.rsummary-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rsummary-label {
    font-size: 11px;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.rsummary-value {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.rsummary-sub {
    font-size: 11px;
    color: #ffd700;
    font-weight: 500;
}

.rsummary-link {
    color: #fff;
    text-decoration: none;
    transition: color .2s;
}

.rsummary-link:hover {
    color: #ffd700;
    text-decoration: underline;
}

/* ---- Nav Tabs ---- */
.rankings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(0,0,0,0.25);
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

.rank-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.07);
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    transition: background .22s, color .22s, transform .22s, box-shadow .22s, border-color .22s;
    white-space: nowrap;
    font-family: inherit;
}

.rank-tab-btn:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.rank-tab-btn.active {
    background: linear-gradient(135deg, #ffd700, #e6a800);
    color: #111;
    border-color: #ffd700;
    box-shadow: 0 0 0 2px rgba(255,215,0,0.25), 0 4px 14px rgba(0,0,0,0.45);
}

.rank-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    background: rgba(0,0,0,0.3);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    color: inherit;
    opacity: 0.85;
}

.rank-tab-btn.active .rank-tab-count {
    background: rgba(0,0,0,0.25);
    color: #111;
}

/* ---- Filtro ---- */
.rankings-filter input {
    width: 100%;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--border);
    padding: 12px 16px;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color .25s, background .25s, box-shadow .25s;
    font-family: inherit;
}

.rankings-filter input:focus {
    border-color: rgba(255,215,0,0.5);
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 0 3px rgba(255,215,0,0.08);
}

.rankings-filter input::placeholder {
    color: #666;
}

/* ---- Section + Fade Animation ---- */
.ranking-section {
    margin-top: 36px;
}

.ranking-section.rank-fade {
    animation: rankSectionFade .35s ease both;
}

@keyframes rankSectionFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.ranking-section-header {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ranking-h2 {
    margin: 0;
    font-size: 1.35em;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #66f2c4, #46e2b4, #66f2c4);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: 0.3px;
}

.rh2-emoji {
    font-size: 1.1em;
}

.info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
    color: #aaa;
    transition: background .22s, color .22s;
    flex-shrink: 0;
}

.info-badge:hover {
    background: rgba(255,215,0,0.25);
    color: #ffd700;
}

/* ---- Table Wrap (scroll mobile) ---- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.table-wrap::-webkit-scrollbar {
    height: 5px;
}

.table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

/* ---- Table ---- */
.table-ranking {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
    min-width: 520px;
}

.table-ranking thead {
    background: rgba(0,0,0,0.45);
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-ranking th,
.table-ranking td {
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
}

.table-ranking th {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #8a8a8a;
    cursor: pointer;
    user-select: none;
    transition: color .2s;
}

.table-ranking th:hover {
    color: #fff;
}

.table-ranking th[data-sort]::after {
    content: ' ⇅';
    opacity: 0.4;
    font-size: 10px;
}

/* ---- Rows ---- */
.table-ranking tbody tr {
    transition: background .2s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.table-ranking tbody tr:last-child {
    border-bottom: none;
}

.table-ranking tbody tr:hover {
    background: rgba(255,255,255,0.05);
}

/* Top 1 — fundo dourado sutil */
.rank-top-1 {
    background: linear-gradient(90deg,
        rgba(255,215,0,0.13) 0%,
        rgba(255,215,0,0.04) 40%,
        transparent 100%
    ) !important;
}

/* Top 2 — fundo prata sutil */
.rank-top-2 {
    background: linear-gradient(90deg,
        rgba(192,192,192,0.13) 0%,
        rgba(192,192,192,0.04) 40%,
        transparent 100%
    ) !important;
}

/* Top 3 — fundo bronze sutil */
.rank-top-3 {
    background: linear-gradient(90deg,
        rgba(205,127,50,0.13) 0%,
        rgba(205,127,50,0.04) 40%,
        transparent 100%
    ) !important;
}

/* Linha do jogador atual — borda esquerda dourada */
.rank-current {
    border-left: 3px solid #ffd700 !important;
    background: linear-gradient(90deg,
        rgba(255,215,0,0.09) 0%,
        rgba(255,215,0,0.02) 50%,
        transparent 100%
    ) !important;
}

/* ---- Colunas ---- */
.col-medal {
    width: 36px;
    text-align: center;
    padding-right: 4px !important;
}

.col-pos {
    width: 44px;
    font-weight: 600;
}

.col-name {
    min-width: 180px;
}

.col-value {
    text-align: right;
    font-weight: 700;
}

.col-bar {
    width: 120px;
    min-width: 80px;
}

.cell-medal {
    text-align: center;
    padding-right: 4px !important;
    font-size: 16px;
    line-height: 1;
}

.cell-pos {
    font-weight: 600;
    color: #8a8a8a;
    font-size: 12px;
}

.rank-top-1 .cell-pos,
.rank-top-2 .cell-pos,
.rank-top-3 .cell-pos {
    color: #ccc;
}

.cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.cell-value {
    text-align: right;
    font-weight: 700;
    font-size: 13px;
    color: #e0e0e0;
}

.rank-top-1 .cell-value { color: #ffd700; }
.rank-top-2 .cell-value { color: #d0d0d0; }
.rank-top-3 .cell-value { color: #cd9f60; }

/* ---- Avatar Circle ---- */
.rank-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    letter-spacing: 0.5px;
}

/* Avatar com imagem de outfit */
.rank-avatar-outfit {
    background: rgba(0,0,0,0.35) !important;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    padding: 2px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.rank-avatar-outfit img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
}

.rank-player-name {
    font-weight: 600;
    color: #e0e0e0;
}

.rank-top-1 .rank-player-name { color: #ffd700; }
.rank-top-2 .rank-player-name { color: #d0d0d0; }
.rank-top-3 .rank-player-name { color: #cd9f60; }
.rank-current .rank-player-name { color: #ffe066; }

.rank-player-link {
    text-decoration: none;
    color: inherit;
    transition: opacity .2s;
}

.rank-player-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* Badge "VOCÊ" */
.rank-you-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    background: rgba(255,215,0,0.2);
    color: #ffd700;
    border: 1px solid rgba(255,215,0,0.4);
    vertical-align: middle;
    margin-left: 4px;
    text-transform: uppercase;
}

/* ---- Progress Bar ---- */
.cell-bar {
    padding-left: 8px !important;
    padding-right: 14px !important;
}

.rank-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.rank-progress-fill {
    height: 100%;
    min-width: 2px;
    border-radius: 3px;
    background: linear-gradient(90deg, #46e2b4, #66f2c4);
    transition: width .5s ease;
}

/* Cores distintas para top 3 */
.rank-top-1 .rank-progress-fill {
    background: linear-gradient(90deg, #e6a800, #ffd700);
}

.rank-top-2 .rank-progress-fill {
    background: linear-gradient(90deg, #aaa, #d0d0d0);
}

.rank-top-3 .rank-progress-fill {
    background: linear-gradient(90deg, #a0622a, #cd9f60);
}

/* ---- Medalhas ---- */
.medal {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}

/* ---- Footer da seção ---- */
.ranking-updated {
    margin-top: 8px;
    text-align: right;
}

.ranking-updated time {
    font-size: 11px;
    opacity: 0.55;
}

/* ---- Responsivo ---- */
@media (max-width: 900px) {
    .rankings-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .rankings-summary .rsummary-card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 620px) {
    .rankings-summary {
        grid-template-columns: 1fr;
    }

    .rankings-summary .rsummary-card:last-child {
        grid-column: span 1;
    }

    .rankings-nav {
        justify-content: center;
    }

    .rankings-title {
        flex-direction: column;
        text-align: center;
    }

    .rankings-emoji {
        font-size: 44px;
    }

    .rankings-h1 {
        font-size: 1.7em;
    }

    .table-ranking th,
    .table-ranking td {
        padding: 8px 10px;
    }

    .rank-tab-btn {
        font-size: 12px;
        padding: 6px 10px;
    }

    .col-bar,
    .cell-bar {
        display: none;
    }
}
/* ===========================================
   xTibia - Players Online, Last Kills, Status
   =========================================== */

/* Players Online */
.players-online-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.online-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.online-counter {
    font-weight: 700;
    color: #66f2c4;
}

.refresh-button {
    background: rgba(255,255,255,0.08);
    padding: 8px 12px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.15);
    transition: background .25s, transform .25s, box-shadow .25s;
}

.refresh-button:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.no-players {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.player-card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background .25s, transform .25s, box-shadow .25s;
    margin-bottom: 20px;
}

.player-card:hover { 
    background: var(--gradient-3);
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    border-color: var(--accent);
}

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

.player-outfit {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 26px;
}

.player-info h3 {
    margin: 0;
    font-size: 1.05em;
}

.player-vocation {
    font-size: 12px;
    color: var(--muted);
}

.player-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.player-stats .stat-item {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
}

.player-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.status-indicator {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.status-active {
    background: rgba(70,226,180,0.15);
    color: #46e2b4;
    border: 1px solid rgba(70,226,180,0.4);
}

.status-resting {
    background: rgba(255,193,7,0.15);
    color: #ffc107;
    border: 1px solid rgba(255,193,7,0.4);
}

.status-tired {
    background: rgba(255,87,34,0.15);
    color: #ff5722;
    border: 1px solid rgba(255,87,34,0.4);
}

.status-dead {
    background: rgba(255,90,122,0.15);
    color: #ff5a7a;
    border: 1px solid rgba(255,90,122,0.4);
}

/* Last Kills */
.last-kills-page-wrapper {
    width: 100%;
    padding: 20px;
}

.last-kills-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kill-entry {
    display: grid;
    grid-template-columns: 40px 180px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(0,0,0,0.25);
    transition: background .25s, transform .25s, box-shadow .25s;
}

.kill-entry:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.kill-entry.even { background: rgba(0,0,0,0.2); }
.kill-entry.odd  { background: rgba(0,0,0,0.25); }

.kill-number {
    font-weight: 700;
    color: #999;
    text-align: right;
}

.kill-timestamp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--muted);
}

.kill-description {
    line-height: 1.4;
}

.player-name {
    color: #ff6b6b;
    font-weight: 600;
}

.killer-player {
    color: #66f2c4;
    font-weight: 600;
}

.killer-monster {
    color: #ffd56b;
    font-weight: 600;
}

/* Server Status */
.server-status-page-wrapper {
    width: 100%;
    padding: 20px;
}

.server-status-page .player-name-link {
    cursor: pointer;
    color: var(--accent);
    text-decoration: none;
    transition: color .2s ease;
    font-weight: 700;
}

.server-status-page .player-name-link:hover {
    color: var(--accent-light);
}

.server-status-page .empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text);
}

.server-status-page .table-container {
    overflow-x: auto;
}

.server-status-page .data-table {
    width: 100%;
    border-collapse: collapse;
}

.server-status-page .data-table thead tr {
    background: var(--gradient-2);
    border-bottom: 2px solid var(--border);
}

.server-status-page .data-table th {
    padding: 12px 16px;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9em;
}

.server-status-page .data-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .2s;
}

.server-status-page .data-table tbody tr:hover {
    background: var(--bg-hover);
}

.server-status-page .data-table td {
    padding: 12px 16px;
}

/* Responsivo */
@media (max-width: 720px) {
    .online-header {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: center;
    }
    
    .players-grid {
        grid-template-columns: 1fr;
    }
    
    .kill-entry {
        grid-template-columns: 28px 1fr;
        grid-template-rows: auto auto;
    }
    
    .kill-number { grid-row: 1; grid-column: 1; }
    .kill-timestamp { grid-row: 1; grid-column: 2; text-align: right; }
    .kill-description { grid-row: 2; grid-column: 1 / span 2; }
}
/* ===========================================
   xTibia - News e Index
   =========================================== */

.news-page, .index-page {
    padding: 20px;
}

.news-header {
    text-align: center;
    margin-bottom: 30px;
}

.news-header h1 {
    background: linear-gradient(45deg, #d4af37, #f4e677);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.2em;
}

/* News Card */
.news-card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    border-color: rgba(212, 175, 55, 0.3);
}

.news-card.highlighted {
    border: 2px solid #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.news-card-header {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(244, 230, 119, 0.05) 100%);
    padding: 20px 25px;
    border-bottom: 1px solid var(--border);
}

.news-card-header h2 {
    margin: 0 0 10px;
    font-size: 1.4em;
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.news-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9em;
    color: var(--muted);
}

.news-meta .author {
    color: #d4af37;
}

.news-card-body {
    padding: 25px;
}

.news-content {
    line-height: 1.7;
    white-space: pre-line;
}

.news-image {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 15px;
}

/* Index Hero Section */
.hero-section {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(0,0,0,0.3) 100%);
    border-radius: 16px;
    margin-bottom: 40px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.hero-title {
    font-size: 3em;
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

.hero-subtitle {
    font-size: 1.2em;
    color: var(--muted);
    margin-bottom: 30px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 15px 40px;
    font-size: 1.1em;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: bold;
}

.hero-btn-primary {
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.hero-btn-secondary {
    background: rgba(255,255,255,0.1);
    color: var(--text);
    border: 1px solid var(--border);
}

.hero-btn-secondary:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-3px);
}

/* Stats Section */
.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    border-color: #d4af37;
}

.stat-card .stat-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.stat-card .stat-value {
    font-size: 2em;
    font-weight: bold;
    color: #d4af37;
}

.stat-card .stat-label {
    color: var(--muted);
    margin-top: 5px;
}

/* Features Section */
.features-section {
    margin-bottom: 40px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.feature-card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.feature-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
}

.feature-title {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: #d4af37;
}

.feature-description {
    color: var(--muted);
    line-height: 1.6;
}

/* Responsivo */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2em;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}
/* ===========================================
   xTibia - Experience e Skills
   =========================================== */

/* Experience Table */
.experience-page {
    padding: 20px;
}

.experience-header {
    text-align: center;
    margin-bottom: 30px;
}

.experience-header h1 {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.2em;
}

.stages-info {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 30px;
}

.stages-info h2 {
    color: #d4af37;
    margin: 0 0 15px;
}

.stages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.stage-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.stage-level {
    font-size: 0.85em;
    color: var(--muted);
    margin-bottom: 5px;
}

.stage-multiplier {
    font-size: 1.8em;
    font-weight: bold;
    color: #2ecc71;
}

.stage-multiplier::after {
    content: 'x';
    font-size: 0.6em;
    color: var(--muted);
}

/* Experience Bar */
.exp-progress-container {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

.exp-bar {
    height: 30px;
    background: rgba(0,0,0,0.4);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.exp-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60, #2ecc71);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    transition: width 0.5s ease;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.exp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.exp-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
    text-align: center;
}

.exp-detail {
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

.exp-detail-label {
    font-size: 0.85em;
    color: var(--muted);
}

.exp-detail-value {
    font-size: 1.2em;
    font-weight: bold;
    color: #2ecc71;
}

/* Skills Distribution */
.skills-page {
    padding: 20px;
}

.skills-container {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 25px;
}

.skill-row {
    display: grid;
    grid-template-columns: 150px 1fr 100px;
    gap: 15px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}

.skill-row:last-child {
    border-bottom: none;
}

.skill-name {
    font-weight: bold;
}

.skill-bar-container {
    height: 20px;
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
    overflow: hidden;
}

.skill-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.skill-sword .skill-bar { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.skill-axe .skill-bar { background: linear-gradient(90deg, #f39c12, #d68910); }
.skill-club .skill-bar { background: linear-gradient(90deg, #9b59b6, #8e44ad); }
.skill-distance .skill-bar { background: linear-gradient(90deg, #3498db, #2980b9); }
.skill-shield .skill-bar { background: linear-gradient(90deg, #1abc9c, #16a085); }
.skill-fishing .skill-bar { background: linear-gradient(90deg, #34495e, #2c3e50); }
.skill-magic .skill-bar { background: linear-gradient(90deg, #f1c40f, #d4ac0d); }

.skill-level {
    font-weight: bold;
    text-align: right;
}

.skill-actions {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.skill-btn {
    padding: 6px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
}

.skill-btn.increase {
    background: #2ecc71;
    color: white;
}

.skill-btn.increase:hover {
    background: #27ae60;
}

.skill-btn.decrease {
    background: #e74c3c;
    color: white;
}

.skill-btn.decrease:hover {
    background: #c0392b;
}

/* Points disponíveis */
.points-available {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(244, 230, 119, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
}

.points-available .label {
    color: var(--muted);
}

.points-available .value {
    font-size: 2em;
    font-weight: bold;
    color: #d4af37;
}

/* Responsivo */
@media (max-width: 768px) {
    .skill-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .skill-level {
        text-align: left;
    }
    
    .exp-details {
        grid-template-columns: 1fr;
    }
}
/* ===========================================
   xTibia - Spells e Outfits
   =========================================== */

/* Spells */
.spells-page {
    padding: 20px;
}

.spells-header {
    text-align: center;
    margin-bottom: 30px;
}

.spells-header h1 {
    background: linear-gradient(45deg, #9b59b6, #8e44ad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.2em;
}

.spells-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.spell-card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.3s ease;
}

.spell-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(155, 89, 182, 0.2);
    border-color: #9b59b6;
}

.spell-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.spell-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
}

.spell-icon img {
    max-width: 48px;
    max-height: 48px;
}

.spell-info h3 {
    margin: 0 0 5px;
    font-size: 1.1em;
}

.spell-info .spell-formula {
    color: #9b59b6;
    font-family: monospace;
    font-size: 0.9em;
}

.spell-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.spell-stat {
    background: rgba(0,0,0,0.2);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
}

.spell-stat .label {
    color: var(--muted);
}

.spell-stat .value {
    font-weight: bold;
    margin-left: 5px;
}

.spell-vocations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.vocation-tag {
    background: rgba(155, 89, 182, 0.2);
    border: 1px solid rgba(155, 89, 182, 0.4);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75em;
    color: #9b59b6;
}

.spell-description {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    font-size: 0.9em;
    color: var(--muted);
    line-height: 1.5;
}

.learn-spell-btn {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.learn-spell-btn:hover {
    background: linear-gradient(135deg, #a866c4, #9b59b6);
    transform: translateY(-2px);
}

.learn-spell-btn:disabled {
    background: #555;
    cursor: not-allowed;
    transform: none;
}

/* Outfits */
.outfits-page {
    padding: 20px;
}

.outfits-header {
    text-align: center;
    margin-bottom: 30px;
}

.outfits-header h1 {
    background: linear-gradient(45deg, #3498db, #2980b9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.2em;
}

.current-outfit {
    background: var(--gradient-2);
    border: 2px solid #d4af37;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.current-outfit-preview {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #d4af37;
}

.current-outfit-preview img {
    max-width: 120px;
    max-height: 120px;
}

.outfits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.outfit-card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.outfit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.2);
    border-color: #3498db;
}

.outfit-card.selected {
    border: 2px solid #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.outfit-card.locked {
    opacity: 0.6;
}

.outfit-preview {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.outfit-preview img {
    max-width: 64px;
    max-height: 64px;
}

.outfit-name {
    font-weight: bold;
    margin-bottom: 8px;
}

.outfit-requirements {
    font-size: 0.85em;
    color: var(--muted);
}

.outfit-price {
    margin-top: 10px;
    font-weight: bold;
    color: #f1c40f;
}

.outfit-locked-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    opacity: 0.8;
}

/* Addons */
.addons-section {
    margin-top: 30px;
}

.addons-grid {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.addon-slot {
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    width: 120px;
}

.addon-slot.unlocked {
    border-color: #2ecc71;
}

.addon-slot.equipped {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
}

.addon-name {
    font-size: 0.9em;
    margin-top: 10px;
}

/* Responsivo */
@media (max-width: 768px) {
    .spells-grid {
        grid-template-columns: 1fr;
    }
    
    .outfits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ===========================================
   xTibia - Páginas Admin
   =========================================== */

.admin-page {
    padding: 20px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border);
}

.admin-header h1 {
    background: linear-gradient(45deg, #9b59b6, #8e44ad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2em;
    margin: 0;
}

/* Cards de estatísticas */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.admin-stat-card {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.admin-stat-card .stat-value {
    font-size: 2.5em;
    font-weight: bold;
    color: #d4af37;
}

.admin-stat-card .stat-label {
    color: var(--muted);
    margin-top: 5px;
}

/* Formulários Admin */
.admin-form {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 25px;
}

.form-section {
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.form-section-title {
    font-size: 1.15em;
    font-weight: 600;
    color: #d4af37;
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
    color: var(--text);
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* Tabela Admin */
.admin-table-container {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table thead {
    background: rgba(0,0,0,0.4);
}

.admin-table th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: #d4af37;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}

.admin-table td {
    padding: 15px;
    border-bottom: 1px solid var(--border);
}

.admin-table tbody tr:hover {
    background: rgba(255,255,255,0.05);
}

.admin-table .actions {
    display: flex;
    gap: 8px;
}

.admin-table .actions .btn {
    padding: 6px 12px;
    font-size: 12px;
}

/* Botões Admin */
.btn-admin {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-admin:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4);
}

.btn-edit {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.btn-delete {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* Modal Admin */
.admin-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.3s ease;
}

.admin-modal-content {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    margin: 5% auto;
    border: 2px solid #d4af37;
    border-radius: 14px;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    animation: slideDown 0.3s ease;
}

.admin-modal-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d30 50%, #1a1a1a 100%);
    padding: 20px 25px;
    border-bottom: 2px solid #d4af37;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-modal-header h2 {
    margin: 0;
    background: linear-gradient(45deg, #d4af37, #f4e677);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.admin-modal-close {
    color: var(--muted);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.admin-modal-close:hover {
    color: #e74c3c;
}

.admin-modal-body {
    padding: 25px;
}

/* News Creation Section */
.news-creation-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d30 50%, #1a1a1a 100%);
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border: 2px solid #d4af37;
}

.news-form-header {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, rgba(244, 230, 119, 0.1) 100%);
    padding: 25px 30px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.5);
}

.news-form-title {
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.6em;
    font-weight: 700;
    margin: 0;
}

.news-form-subtitle {
    color: #c0c0c0;
    font-size: 0.95em;
    margin: 10px 0 0 0;
}

.news-form-content {
    padding: 30px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
}

/* Responsivo */
@media (max-width: 768px) {
    .admin-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .admin-table {
        font-size: 12px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 10px;
    }
}

/* ===========================================
   NPC Potions Shop Styles
   =========================================== */

.potions-shop-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Admin Tabs */
.admin-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.admin-tab {
    padding: 12px 24px;
    background: var(--card-bg, #fff);
    border: 2px solid var(--border, #ddd);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary, #333);
    font-weight: bold;
    transition: all 0.3s;
}

.admin-tab:hover {
    background: rgba(155, 89, 182, 0.1);
    border-color: #9B59B6;
}

.admin-tab.active {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    color: white;
    border-color: #9B59B6;
}

/* NPC Header */
.npc-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(75, 0, 130, 0.1));
    border-radius: 12px;
    margin-bottom: 25px;
    border: 1px solid rgba(138, 43, 226, 0.2);
}

.npc-avatar {
    font-size: 64px;
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.npc-info h2 {
    margin: 0 0 10px 0;
    color: #fff;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.npc-dialogue {
    font-style: italic;
    color: #e0e0e0;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid #9B59B6;
    border-radius: 0 8px 8px 0;
    margin: 0;
}

/* Potions Grid */
.potions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.potion-card {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 15px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.potion-card.healing {
    border-color: rgba(231, 76, 60, 0.3);
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.05), transparent);
}

.potion-card.mana_healing {
    border-color: rgba(52, 152, 219, 0.3);
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.05), transparent);
}

.potion-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.potion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.potion-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.1);
    padding: 5px;
}

.potion-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.potion-info {
    flex: 1;
}

.potion-name {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.potion-type {
    font-size: 12px;
    margin-top: 3px;
    font-weight: 600;
}

.potion-card.healing .potion-type {
    color: #FF6B6B;
}

.potion-card.mana_healing .potion-type {
    color: #5DADE2;
}

.potion-stats {
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    margin-bottom: 15px;
}

.heal-info {
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 8px currentColor;
}

.heal-info.healing {
    color: #FF5252;
}

.heal-info.mana_healing {
    color: #40C4FF;
}

.potion-price {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #F1C40F;
    padding: 10px;
    background: rgba(241, 196, 15, 0.1);
    border-radius: 8px;
    margin-bottom: 15px;
}

.potion-actions {
    margin-top: auto;
}

.buy-potion-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.qty-label {
    font-weight: bold;
    color: var(--text-secondary, #666);
}

.btn-qty {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border, #ddd);
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.2s;
}

.btn-qty:hover {
    background: var(--primary, #4CAF50);
    color: white;
    border-color: var(--primary, #4CAF50);
}

.qty-input {
    width: 60px;
    padding: 8px;
    border: 2px solid var(--border, #ddd);
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.btn-max {
    padding: 6px 12px;
    background: #17a2b8;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-max:hover {
    background: #138496;
}

.total-price {
    text-align: center;
    padding: 8px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 6px;
    font-weight: bold;
    color: #4CAF50;
}

.total-display {
    font-size: 16px;
}

.buy-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.buy-btn:hover {
    background: linear-gradient(135deg, #45a049, #3d8b40);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.buy-btn.disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
}

.player-gold {
    background: linear-gradient(135deg, #F1C40F, #F39C12);
    color: #333;
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3);
}

.gold-amount {
    font-size: 24px;
    font-weight: bold;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary, #666);
}

.empty-state p:first-child {
    font-size: 18px;
    margin-bottom: 10px;
}

.btn-add-first {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    margin-top: 10px;
}

.message {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: bold;
}

.message.success {
    background: rgba(76, 175, 80, 0.1);
    border-left: 4px solid #4CAF50;
    color: #4CAF50;
}

.message.error {
    background: rgba(244, 67, 54, 0.1);
    border-left: 4px solid #f44336;
    color: #f44336;
}

.message.info {
    background: rgba(33, 150, 243, 0.1);
    border-left: 4px solid #2196F3;
    color: #2196F3;
}

/* ==================== ADMIN PANEL STYLES ==================== */
.admin-panel .card {
    margin-bottom: 20px;
}

/* Admin Card Header */
.admin-create-card {
    border: none;
    background: var(--card-bg, #fff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.admin-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(155, 89, 182, 0.2);
}

.admin-card-icon {
    font-size: 48px;
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.admin-card-header h2 {
    margin: 0;
    font-size: 24px;
    color: #fff;
}

.admin-card-subtitle {
    margin: 5px 0 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Form Pro Styles */
.admin-form-pro {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(155, 89, 182, 0.2);
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(142, 68, 173, 0.15));
    border-bottom: 1px solid rgba(155, 89, 182, 0.3);
}

.form-section-icon {
    font-size: 20px;
}

.form-section-title {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

.form-section-content {
    padding: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

.label-icon {
    font-size: 16px;
}

.required {
    color: #FF6B6B;
    font-weight: bold;
}

.form-input,
.form-select {
    padding: 12px 16px;
    border: 2px solid rgba(155, 89, 182, 0.3);
    border-radius: 10px;
    font-size: 15px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #9B59B6;
    box-shadow: 0 0 0 4px rgba(155, 89, 182, 0.2);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Input with Addon */
.input-with-addon {
    display: flex;
    align-items: stretch;
}

.input-with-addon .form-input {
    border-radius: 10px 0 0 10px;
    border-right: none;
    flex: 1;
}

.input-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    color: white;
    font-weight: bold;
    font-size: 14px;
    border-radius: 0 10px 10px 0;
    min-width: 50px;
}

.input-addon.gold {
    background: linear-gradient(135deg, #F1C40F, #D4AC0D);
    color: #1a1a1a;
    font-weight: 800;
}

/* Heal Preview */
.heal-preview {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-align: center;
}

.heal-preview-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.heal-preview-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 50%;
}

.heal-preview-fill.healing {
    background: linear-gradient(90deg, #E74C3C, #C0392B);
}

.heal-preview-fill.mana_healing {
    background: linear-gradient(90deg, #3498DB, #2980B9);
}

.heal-preview-text {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* Profit Tip */
.profit-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 12px 16px;
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-radius: 8px;
}

.profit-tip-icon {
    font-size: 20px;
}

.profit-tip-text {
    font-size: 13px;
    color: #F1C40F;
}

/* Image Upload */
.image-upload-area {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.image-preview {
    width: 100px;
    height: 100px;
    border: 3px dashed var(--border, #ddd);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.image-preview.has-image {
    border-style: solid;
    border-color: #9B59B6;
}

.image-preview img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.image-preview-icon {
    font-size: 32px;
    opacity: 0.5;
}

.image-preview-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
}

.image-upload-info {
    flex: 1;
    min-width: 200px;
}

.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3498DB, #2980B9);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.upload-btn input[type="file"] {
    display: none;
}

.upload-btn-icon {
    font-size: 18px;
}

.upload-specs {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    border-radius: 8px;
}

.upload-specs p {
    margin: 5px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.upload-specs strong {
    color: #fff;
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.btn-create-potion {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 48px;
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.btn-create-potion:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(155, 89, 182, 0.5);
}

.btn-create-potion .btn-icon {
    font-size: 22px;
}

.admin-form {
    padding: 10px 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.btn-submit {
    padding: 12px 30px;
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
}

/* Admin Potions List */
.admin-potions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-potion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    border-left: 4px solid #ccc;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-potion-item.healing {
    border-left-color: #E74C3C;
}

.admin-potion-item.mana_healing {
    border-left-color: #3498DB;
}

.admin-potion-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 250px;
}

.admin-potion-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.1);
}

.admin-potion-img.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.admin-potion-details {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin-top: 3px;
}

.admin-potion-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==================== MODAL PREMIUM DESIGN ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 40, 0.95) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    border-radius: 20px;
    padding: 0;
    max-width: 650px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d4af37, #f4d03f, #d4af37);
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header */
.modal-content h3 {
    margin: 0;
    padding: 25px 30px;
    padding-right: 60px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    font-size: 1.4rem;
    font-weight: 700;
    color: #f4d03f;
    text-shadow: 0 2px 10px rgba(244, 208, 63, 0.3);
    letter-spacing: 0.5px;
}

/* Modal Body */
.modal-content .admin-form {
    padding: 25px 30px;
    overflow-y: auto;
    max-height: calc(90vh - 180px);
}

/* Close Button Premium */
.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 22px;
    font-weight: 300;
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.modal-close:hover {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-color: #e74c3c;
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

/* Form Grid Premium */
.modal-content .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

/* Form Group Premium */
.modal-content .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-content .form-group.full-width {
    grid-column: 1 / -1;
}

.modal-content .form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-content .form-group label::before {
    content: '';
    width: 3px;
    height: 12px;
    background: linear-gradient(180deg, #d4af37, #f4d03f);
    border-radius: 2px;
}

/* Input Premium */
.modal-content .form-group input[type="text"],
.modal-content .form-group input[type="number"],
.modal-content .form-group select {
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    color: #fff;
    transition: all 0.3s ease;
    outline: none;
}

.modal-content .form-group input[type="text"]:hover,
.modal-content .form-group input[type="number"]:hover,
.modal-content .form-group select:hover {
    border-color: rgba(212, 175, 55, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%);
}

.modal-content .form-group input[type="text"]:focus,
.modal-content .form-group input[type="number"]:focus,
.modal-content .form-group select:focus {
    border-color: #d4af37;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.08) 100%);
    box-shadow: 
        0 0 0 3px rgba(212, 175, 55, 0.15),
        0 4px 20px rgba(212, 175, 55, 0.1);
}

.modal-content .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Select Premium */
.modal-content .form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23d4af37' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 45px;
}

.modal-content .form-group select option {
    background: #1a1a2e;
    color: #fff;
    padding: 10px;
}

/* File Input Premium */
.modal-content .form-group input[type="file"] {
    padding: 12px;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.15) 0%, rgba(155, 89, 182, 0.08) 100%);
    border: 2px dashed rgba(155, 89, 182, 0.4);
    border-radius: 12px;
    color: #b8b8b8;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-content .form-group input[type="file"]:hover {
    border-color: #9b59b6;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.2) 0%, rgba(155, 89, 182, 0.12) 100%);
}

.modal-content .form-group input[type="file"]::file-selector-button {
    padding: 8px 16px;
    margin-right: 12px;
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-content .form-group input[type="file"]::file-selector-button:hover {
    background: linear-gradient(135deg, #a569bd 0%, #9b59b6 100%);
    transform: translateY(-1px);
}

.modal-content .form-group small {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 8px;
    color: #81c784;
    font-size: 0.85rem;
}

.modal-content .form-group small img {
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Modal Buttons Premium */
.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 30px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel {
    padding: 14px 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-cancel:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.modal-buttons .btn-submit {
    padding: 14px 32px;
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.modal-buttons .btn-submit:hover {
    background: linear-gradient(135deg, #a569bd 0%, #9b59b6 100%);
    transform: translateY(-3px);
    box-shadow: 
        0 8px 25px rgba(155, 89, 182, 0.4),
        0 0 0 3px rgba(155, 89, 182, 0.2);
}

.modal-buttons .btn-submit:active {
    transform: translateY(-1px);
}

/* Modal Responsive */
@media (max-width: 600px) {
    .modal-content {
        margin: 10px;
        max-height: 95vh;
    }
    
    .modal-content h3 {
        padding: 20px;
        font-size: 1.2rem;
    }
    
    .modal-content .admin-form {
        padding: 20px;
    }
    
    .modal-content .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .modal-buttons {
        padding: 15px 20px;
        flex-direction: column;
    }
    
    .modal-buttons .btn-cancel,
    .modal-buttons .btn-submit {
        width: 100%;
        justify-content: center;
    }
}

/* NPC Potions Responsive */
@media (max-width: 768px) {
    .npc-header {
        flex-direction: column;
        text-align: center;
    }
    
    .potions-grid {
        grid-template-columns: 1fr;
    }
    
    .player-gold {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .admin-tabs {
        flex-direction: column;
    }
    
    .admin-potion-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .admin-potion-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   Admin Pages - Estilos Comuns
   =========================================== */

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.page-header h1 {
    margin: 0;
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.stat-number {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--gold);
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 5px;
}

.stat-success .stat-number { color: #4CAF50; }
.stat-warning .stat-number { color: #ff9800; }
.stat-info .stat-number { color: #2196F3; }
.stat-danger .stat-number { color: #f44336; }

/* Form Header */
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.form-header h2 {
    margin: 0;
}

/* Admin Forms */
.admin-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--gradient-2);
    color: var(--text);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(170, 153, 0, 0.15);
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
    font-family: inherit;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--muted);
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

.checkbox-label:hover {
    background: var(--bg-hover);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

/* Button Variants */
.btn-primary {
    background: linear-gradient(135deg, var(--gold), #887);
    color: #1a1a1a;
    border: none;
    font-weight: 600;
}

.btn-primary:hover {
    box-shadow: 0 4px 15px rgba(170, 153, 0, 0.4);
}

.btn-secondary {
    background: var(--gradient-3);
    color: var(--text);
}

.btn-success {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: white;
    border: none;
}

.btn-warning {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: #1a1a1a;
    border: none;
}

.btn-danger {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    border: none;
}

.btn-info {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    border: none;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 6px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.1rem;
}

/* Inline Form */
.inline-form {
    display: inline-block;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.badge-danger {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.badge-warning {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.badge-info {
    background: rgba(33, 150, 243, 0.2);
    color: #2196F3;
}

/* ===========================================
   Admin News - Estilos Específicos
   =========================================== */

.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.news-card.highlighted {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(170, 153, 0, 0.2);
}

.news-card.inactive {
    opacity: 0.6;
    border-style: dashed;
}

.news-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.news-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.news-card-title h3 {
    margin: 0;
    font-size: 1.2rem;
}

.news-type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-ticker {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: #1a1a1a;
}

.badge-news {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
}

.news-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.news-card-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.news-card-image {
    margin: 15px 0;
    border-radius: 8px;
    overflow: hidden;
    max-height: 200px;
}

.news-card-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.news-card-content {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.news-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

/* Admin News Responsive */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .news-card-header {
        flex-direction: column;
    }
    
    .news-card-actions {
        flex-direction: column;
    }
    
    .news-card-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* =====================================================
   ADMIN ITEMS - LISTA DE ITENS PROFISSIONAL
   ===================================================== */

/* Container Principal da Lista */
.items-list-container {
    background: var(--gradient-2);
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Header da Lista */
.items-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border-bottom: 1px solid var(--border);
}

.items-list-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.items-list-header .header-icon-list {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.items-list-header .header-info h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.items-list-header .header-info p {
    margin: 0;
    font-size: 14px;
    color: #9bb0d1;
}

.items-list-header .header-stats {
    display: flex;
    gap: 12px;
}

.items-list-header .stat-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    border-radius: 12px;
    min-width: 80px;
}

.items-list-header .stat-badge.total {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.items-list-header .stat-badge.visible {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.items-list-header .stat-number {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.items-list-header .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9bb0d1;
    margin-top: 4px;
}

/* Barra de Busca e Filtros */
.search-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.6;
    pointer-events: none;
}

.search-input-wrapper .search-input {
    width: 100%;
    padding: 12px 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-input-wrapper .search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-input-wrapper .search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(239, 68, 68, 0.2);
    border: none;
    color: #ef4444;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.search-input-wrapper .search-clear:hover {
    background: rgba(239, 68, 68, 0.3);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #9bb0d1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-select {
    padding: 10px 36px 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239bb0d1' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
}

.filter-select:hover {
    border-color: #3b82f6;
}

.filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-clear-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear-filters:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
}

/* Feedback de Busca */
.search-feedback {
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-feedback .feedback-icon {
    font-size: 16px;
}

.search-feedback .feedback-text {
    font-size: 14px;
    color: #9bb0d1;
}

.search-feedback.has-results {
    background: rgba(16, 185, 129, 0.1);
}

.search-feedback.has-results .feedback-text {
    color: #10b981;
}

.search-feedback.no-results {
    background: rgba(239, 68, 68, 0.1);
}

.search-feedback.no-results .feedback-text {
    color: #ef4444;
}

/* Estado Vazio */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state .empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
    color: #9bb0d1;
}

/* Container de Categorias */
.items-categories-container {
    padding: 20px;
}

/* Categoria Individual */
.item-category {
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 16px;
}

.item-category:last-child {
    margin-bottom: 0;
}

/* Header da Categoria */
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-header:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
}

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

.category-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid var(--border);
}

.category-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.category-count {
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
}

.category-toggle {
    width: 32px;
    height: 32px;
    background: var(--gradient-2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.category-toggle .toggle-icon {
    font-size: 12px;
    color: #9bb0d1;
    transition: transform 0.3s ease;
}

.category-header.collapsed .category-toggle .toggle-icon {
    transform: rotate(-90deg);
}

/* Items da Categoria */
.category-items {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    transition: all 0.3s ease;
}

.category-header.collapsed + .category-items {
    display: none;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

/* Card do Item */
.item-card {
    position: relative;
    background: var(--gradient-2);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
}

.item-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.item-card-image {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}

.item-card-image img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
}

.item-card-image .no-image {
    font-size: 32px;
    opacity: 0.4;
}

.item-card-info {
    text-align: center;
}

.item-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-card-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #fbbf24;
}

.item-card-price .gold-icon {
    font-size: 11px;
}

/* Hover Overlay */
.item-card-hover {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.95), rgba(180, 140, 30, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: 12px;
}

.item-card:hover .item-card-hover {
    opacity: 1;
}

.item-card-hover span {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
}

/* Responsivo para Lista de Itens */
@media (max-width: 992px) {
    .items-list-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .items-list-header .header-left {
        flex-direction: column;
    }

    .search-filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-wrapper {
        max-width: 100%;
    }

    .filter-chips {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .items-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 12px;
    }

    .item-card {
        padding: 12px;
    }

    .item-card-image {
        width: 48px;
        height: 48px;
    }

    .item-card-image img {
        max-width: 36px;
        max-height: 36px;
    }

    .item-card-name {
        font-size: 12px;
    }

    .category-header {
        padding: 12px 16px;
    }

    .category-items {
        padding: 12px 16px;
    }
}

/* ==========================================
   ADMIN MONSTERS PAGE - PÁGINA DE MONSTROS
   Design Profissional e Moderno
   ========================================== */

/* Header da página - Premium Design */
.admin-monsters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px 32px;
    background: linear-gradient(135deg, var(--card, #2a2a2a) 0%, var(--bg, #1a1a1a) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.admin-monsters-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d4af37, #f4e677, #d4af37, transparent);
}

.admin-monsters-header::after {
    content: '🐉';
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    opacity: 0.08;
    pointer-events: none;
}

.admin-header-info h1 {
    font-size: 2rem;
    margin-bottom: 6px;
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
    text-shadow: 0 2px 20px rgba(212, 175, 55, 0.3);
}

@keyframes shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.admin-header-stats {
    display: flex;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.stat-box {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    padding: 16px 24px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}

.stat-box:hover::before {
    opacity: 1;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #d4af37;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 1px;
    font-weight: 600;
    margin-top: 4px;
}

/* Alertas - Design Moderno */
.alert-message {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-radius: 14px;
    margin-bottom: 24px;
    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.alert-message::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.alert-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(22, 163, 74, 0.06));
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #86efac;
}

.alert-success::before {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}

.alert-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(220, 38, 38, 0.06));
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.alert-error::before {
    background: linear-gradient(180deg, #ef4444, #dc2626);
}

.alert-icon {
    font-size: 1.3rem;
}

.alert-text {
    font-weight: 500;
    font-size: 0.95rem;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tabs de Admin - Premium */
.admin-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    padding: 6px;
    background: linear-gradient(135deg, var(--card, #2a2a2a), var(--bg, #1a1a1a));
    border-radius: 16px;
    border: 1px solid var(--border, rgba(255,255,255,.1));
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.admin-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.admin-tab:hover {
    color: var(--text);
}

.admin-tab:hover::before {
    opacity: 0.5;
}

.admin-tab.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.08));
    color: #d4af37;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.admin-tab.active::before {
    opacity: 1;
}

.tab-icon {
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Conteúdo das Tabs */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Card de Formulário Admin - Premium Glass Effect */
.admin-form-card {
    background: linear-gradient(145deg, var(--card, #2a2a2a), var(--bg, #1a1a1a));
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 20px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.admin-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    position: relative;
}

.form-header h2 {
    margin: 0;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--text, #f0f0f0), #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-header p.muted {
    color: var(--muted);
    margin: 6px 0 0;
    font-size: 0.9rem;
}

/* Seções do Formulário - Cards Modernos */
.form-section {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    transition: all 0.3s ease;
}

.form-section:hover {
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.form-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 3px;
    background: linear-gradient(180deg, #d4af37, rgba(212, 175, 55, 0.2));
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-section:hover::before {
    opacity: 1;
}

.section-title {
    font-size: 1.15rem;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    color: #d4af37;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

/* Grid do Formulário */
.form-grid {
    display: grid;
    gap: 20px;
}

.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted, #b0b0b0);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.form-group:focus-within .form-label {
    color: #d4af37;
}

.attr-icon {
    font-size: 1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.form-input,
.form-select {
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.15));
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 12px;
    color: var(--text, #f0f0f0);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input:hover,
.form-select:hover {
    border-color: rgba(212, 175, 55, 0.3);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-input.small { width: 100px; }
.form-input.tiny { width: 70px; }

.form-hint {
    font-size: 0.75rem;
    color: var(--muted);
}

/* Grid de Imunidades - Design Premium */
.immunities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.immunity-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.immunity-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.immunity-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.immunity-card:hover::before {
    opacity: 1;
}

.immunity-card:has(input:checked) {
    border-color: rgba(212, 175, 55, 0.5);
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.03));
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15), inset 0 0 20px rgba(212, 175, 55, 0.05);
}

.immunity-card:has(input:checked)::before {
    opacity: 1;
}

.immunity-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.immunity-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #d4af37;
    cursor: pointer;
}

.immunity-label {
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.immunity-card:has(input:checked) .immunity-label {
    color: #d4af37;
}

.immunity-percentage {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.immunity-percentage input {
    width: 70px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 10px;
    color: var(--text, #f0f0f0);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

.immunity-percentage input:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.immunity-percentage input:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.percentage-symbol {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Lista de Habilidades e Loot - Design Premium */
.abilities-list,
.loot-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.ability-row,
.loot-row {
    animation: slideInRow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInRow {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.ability-input-group,
.loot-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    transition: all 0.3s ease;
}

.ability-input-group:hover,
.loot-input-group:hover {
    border-color: rgba(212, 175, 55, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ability-input-group input,
.loot-input-group input,
.loot-input-group select {
    flex: 1;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 10px;
    color: var(--text, #f0f0f0);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ability-input-group input:focus,
.loot-input-group input:focus,
.loot-input-group select:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
    outline: none;
}

.ability-input-group input:first-child {
    flex: 2;
}

.loot-input-group select {
    min-width: 150px;
}

/* Botões do Admin - Design Premium */
.btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 0.9rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.btn-add::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-add:hover::before {
    opacity: 1;
}

.btn-icon {
    padding: 10px 14px;
    font-size: 0.9rem;
    border-radius: 10px;
}

.btn-primary {
    background: linear-gradient(135deg, #d4af37, #c9a227);
    border: none;
    color: #1a1a1a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #e4bf47, #d4af37);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4), 0 0 30px rgba(212, 175, 55, 0.2);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:active {
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.btn-danger::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #f87171, #ef4444);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}

.btn-danger:hover::before {
    opacity: 1;
}

.btn-lg {
    padding: 18px 36px;
    font-size: 1.05rem;
    border-radius: 14px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
}

/* Busca - Design Premium */
.search-box input {
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.15));
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 14px;
    color: var(--text, #f0f0f0);
    font-size: 0.95rem;
    font-weight: 500;
    min-width: 280px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-box input:hover {
    border-color: rgba(212, 175, 55, 0.3);
}

.search-box input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2);
}

.search-box input::placeholder {
    color: var(--muted);
}

/* Estado Vazio - Premium */
.empty-state {
    text-align: center;
    padding: 80px 40px;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05));
    border-radius: 20px;
    border: 2px dashed rgba(212, 175, 55, 0.2);
    margin-top: 24px;
}

.empty-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    opacity: 0.4;
    filter: grayscale(0.5);
}

.empty-state h3 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 1.3rem;
}

.empty-state p {
    color: var(--muted);
    font-size: 0.95rem;
}

/* Grid de Monstros - Premium Cards */
.monsters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.monster-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, var(--card, #2a2a2a), var(--bg, #1a1a1a));
    border: 2px solid var(--border, rgba(255,255,255,.08));
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.monster-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.monster-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 175, 55, 0.15);
}

.monster-card:hover::before {
    opacity: 1;
}

.monster-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.15));
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.monster-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}

.monster-card-image img {
    max-width: 90px;
    max-height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.monster-card:hover .monster-card-image img {
    transform: scale(1.15) translateY(-5px);
}

.monster-placeholder {
    font-size: 3.5rem;
    opacity: 0.4;
}

.monster-card-info {
    padding: 18px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.monster-card-name {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #f0f0f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monster-card-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.monster-card-stats .stat {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.monster-card-stats .stat.hp { color: #f87171; }
.monster-card-stats .stat.exp { color: #fbbf24; }

.monster-card-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 500;
}

.monster-card-badges {
    display: flex;
    gap: 8px;
    padding: 0 18px 18px;
    position: relative;
    z-index: 1;
}

.badge {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.badge-magic { 
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.1)); 
    color: #c4b5fd; 
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.badge-loot { 
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.1)); 
    color: #fcd34d; 
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.badge-immunity { 
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1)); 
    color: #93c5fd; 
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Ações do Modal */
.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

/* Responsivo para Admin Monsters */
@media (max-width: 992px) {
    .admin-monsters-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .admin-header-stats {
        justify-content: center;
    }

    .form-grid.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .immunities-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 768px) {
    .admin-tabs {
        flex-direction: column;
    }

    .form-grid.cols-2,
    .form-grid.cols-3 {
        grid-template-columns: 1fr;
    }

    .monsters-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .monster-card-image {
        height: 100px;
    }

    .ability-input-group,
    .loot-input-group {
        flex-wrap: wrap;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions .btn {
        width: 100%;
    }
}

/* =====================================================
   ADMIN BACKPACKS PAGE STYLES
   ===================================================== */

/* Grid de Backpacks */
.backpacks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Card de Backpack */
.backpack-card-new {
    background: var(--gradient-2, linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%));
    border-radius: 16px;
    border: 1px solid var(--border, rgba(255,255,255,.15));
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.backpack-card-new:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(212, 175, 55, 0.1);
}

.backpack-card-image {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg, #1a1a1a);
    padding: 20px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.15));
}

.backpack-card-image img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s ease;
}

.backpack-card-new:hover .backpack-card-image img {
    transform: scale(1.1);
}

.backpack-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.backpack-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text, #f0f0f0);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.backpack-card-title i {
    color: #d4af37;
    font-size: 0.9rem;
}

.backpack-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    flex: 1;
}

.backpack-stat {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: var(--bg-hover, rgba(255,255,255,0.05));
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,.15));
}

.backpack-stat-label {
    font-size: 0.7rem;
    color: var(--muted, #b0b0b0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.backpack-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: #d4af37;
}

.backpack-stat-value.slots {
    color: #60a5fa;
}

.backpack-stat-value.price {
    color: #34d399;
}

.backpack-card-description {
    font-size: 0.85rem;
    color: var(--muted, #b0b0b0);
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.backpack-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

/* Form Grid Customizado */
.form-grid-custom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Textarea estilizado */
.form-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px 16px;
    background: var(--bg, #1a1a1a);
    border: 1px solid var(--border, rgba(255,255,255,.15));
    border-radius: 10px;
    color: var(--text, #f0f0f0);
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-textarea::placeholder {
    color: var(--muted, #b0b0b0);
}

/* Image Upload Box */
.image-upload-box {
    border: 2px dashed var(--border, rgba(255,255,255,.15));
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg, #1a1a1a);
}

.image-upload-box:hover {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.05);
}

.image-upload-box.dragover {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
    transform: scale(1.02);
}

.image-upload-box i {
    font-size: 2.5rem;
    color: var(--muted, #b0b0b0);
    margin-bottom: 12px;
    display: block;
}

.image-upload-box p {
    color: var(--muted, #b0b0b0);
    font-size: 0.9rem;
    margin: 0;
}

.image-upload-box small {
    color: var(--muted, #b0b0b0);
    font-size: 0.75rem;
}

/* Image Preview Box */
.image-preview-box {
    display: none;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg, #1a1a1a);
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255,255,255,.15));
}

.image-preview-box.active {
    display: flex;
}

.image-preview-box img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: rgba(45, 45, 60, 0.6);
    border-radius: 8px;
    padding: 8px;
}

.image-preview-info {
    flex: 1;
}

.image-preview-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #fff;
}

.image-preview-info small {
    color: rgba(255, 255, 255, 0.5);
}

/* Botões pequenos */
.btn-sm {
    padding: 8px 14px;
    font-size: 0.8rem;
    border-radius: 8px;
}

.btn-sm i {
    font-size: 0.85rem;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.available {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.status-badge.unavailable {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Mensagens de estado vazio */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.empty-state p {
    font-size: 0.9rem;
    margin: 0;
}

/* Responsivo para Admin Backpacks */
@media (max-width: 992px) {
    .form-grid-custom {
        grid-template-columns: repeat(2, 1fr);
    }

    .backpacks-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .form-grid-custom {
        grid-template-columns: 1fr;
    }

    .backpacks-grid {
        grid-template-columns: 1fr;
    }

    .backpack-card-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .image-preview-box {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================
   ADMIN BACKPACKS - LISTA APRIMORADA
   ===================================================== */

/* Header da Lista */
.backpacks-list-header {
    flex-wrap: wrap;
    gap: 16px;
}

.backpacks-list-header .header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.backpacks-list-header .header-left h2 {
    margin: 0;
}

.results-count {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Busca Avançada */
.search-box-advanced {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box-advanced .search-icon {
    position: absolute;
    left: 14px;
    font-size: 0.9rem;
    opacity: 0.5;
}

.search-box-advanced input {
    padding: 10px 36px 10px 40px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    width: 220px;
    transition: all 0.2s ease;
}

.search-box-advanced input:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.5);
    width: 280px;
}

.search-box-advanced input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.clear-search {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.search-box-advanced input:not(:placeholder-shown) + .clear-search {
    opacity: 1;
}

.clear-search:hover {
    color: #fff;
}

/* Toggle de Visualização */
.view-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.view-btn {
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.view-btn.active {
    background: rgba(212, 175, 55, 0.2);
    color: #d4af37;
}

/* Select de Ordenação */
.sort-select {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.sort-select:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.5);
}

.sort-select option {
    background: #1a1a2e;
    color: #fff;
}

/* Filtros Rápidos */
.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 20px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.filter-chip.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.3);
    color: #d4af37;
}

.chip-count {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.filter-chip.active .chip-count {
    background: rgba(212, 175, 55, 0.2);
}

/* Card de Mochila Aprimorado */
.backpack-card-new {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 30, 0.98));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.backpack-card-new:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(212, 175, 55, 0.1);
}

/* Badge do Card */
.card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.card-badge.premium {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a2e;
}

.card-badge.best-value {
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #1a1a2e;
}

/* Imagem do Card */
.backpack-card-image {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(45, 45, 60, 0.6), rgba(35, 35, 50, 0.8));
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.backpack-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.05), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.backpack-card-new:hover .backpack-card-image::before {
    opacity: 1;
}

.backpack-card-image img {
    max-width: 90px;
    max-height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.backpack-card-new:hover .backpack-card-image img {
    transform: scale(1.15) rotate(3deg);
}

.backpack-placeholder {
    font-size: 3.5rem;
    opacity: 0.3;
}

/* Body do Card */
.backpack-card-body {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.backpack-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.backpack-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.backpack-id {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: monospace;
}

/* Stats do Card */
.backpack-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.backpack-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.stat-icon-wrapper {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.1rem;
}

.stat-icon-wrapper.slots {
    background: rgba(96, 165, 250, 0.15);
}

.stat-icon-wrapper.price {
    background: rgba(52, 211, 153, 0.15);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.backpack-stat .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.backpack-stat .stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Barra de Eficiência */
.efficiency-bar {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.efficiency-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.efficiency-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.efficiency-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: #d4af37;
}

.efficiency-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.efficiency-fill {
    height: 100%;
    background: linear-gradient(90deg, #34d399, #10b981);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Descrição */
.backpack-description {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.backpack-description p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* Footer do Card */
.backpack-card-footer {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.backpack-card-footer .btn {
    flex: 1;
    justify-content: center;
}

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Estado Sem Resultados */
.no-results-state {
    text-align: center;
    padding: 60px 20px;
}

.no-results-state .empty-icon {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 16px;
}

.no-results-state h3 {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.no-results-state p {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

/* View em Lista */
.backpacks-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.backpacks-grid.list-view .backpack-card-new {
    flex-direction: row;
    align-items: stretch;
}

.backpacks-grid.list-view .backpack-card-image {
    width: 120px;
    height: auto;
    min-height: 100px;
    flex-shrink: 0;
}

.backpacks-grid.list-view .backpack-card-image img {
    max-width: 60px;
    max-height: 60px;
}

.backpacks-grid.list-view .backpack-card-body {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.backpacks-grid.list-view .backpack-card-title {
    min-width: 180px;
}

.backpacks-grid.list-view .backpack-card-stats {
    display: flex;
    gap: 12px;
}

.backpacks-grid.list-view .backpack-stat {
    min-width: 100px;
}

.backpacks-grid.list-view .efficiency-bar {
    flex: 1;
    min-width: 200px;
}

.backpacks-grid.list-view .backpack-description {
    display: none;
}

.backpacks-grid.list-view .backpack-card-footer {
    flex-direction: column;
    width: auto;
    padding: 14px;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.backpacks-grid.list-view .card-badge {
    top: 8px;
    right: auto;
    left: 8px;
}

/* Animação de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

/* Responsivo para Lista Aprimorada */
@media (max-width: 1200px) {
    .header-controls {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .backpacks-list-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-controls {
        flex-wrap: wrap;
    }

    .search-box-advanced input {
        width: 100%;
    }

    .search-box-advanced input:focus {
        width: 100%;
    }

    .quick-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 12px;
        margin-bottom: 16px;
    }

    .filter-chip {
        flex-shrink: 0;
    }

    .backpacks-grid.list-view .backpack-card-new {
        flex-direction: column;
    }

    .backpacks-grid.list-view .backpack-card-image {
        width: 100%;
        height: 100px;
    }

    .backpacks-grid.list-view .backpack-card-body {
        flex-direction: column;
        align-items: stretch;
    }

    .backpacks-grid.list-view .backpack-card-footer {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
}


/* ==========================================
   DEPOT BOX - ESTILOS PADRÃO DO SERVIDOR
   ========================================== */

/* Header do Depot */
.depot-header {
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.95), rgba(26, 26, 26, 0.95));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.depot-header-content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.depot-icon-wrapper {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.depot-icon-glow {
    display: none;
}

.depot-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.depot-title-area {
    flex: 1;
}

.depot-title {
    font-size: 1.8em;
    margin: 0 0 5px;
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.depot-subtitle {
    color: var(--muted);
    margin: 0;
    font-size: 0.9rem;
}

/* Card de Capacidade */
.depot-capacity-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 18px;
}

.depot-capacity-card .capacity-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.depot-capacity-card .capacity-label {
    color: var(--muted);
    font-size: 0.9rem;
}

.depot-capacity-card .capacity-numbers {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f1c40f;
}

.capacity-bar-container {
    height: 10px;
    background: rgba(0,0,0,0.4);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15px;
}

.capacity-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4af37, #f4e677);
    border-radius: 5px;
    transition: width 0.3s ease;
}

.capacity-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #2ecc71;
}

.hint-icon {
    font-size: 1rem;
}

/* Alertas */
.depot-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.depot-alert.alert-success {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.depot-alert.alert-danger {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.depot-alert .alert-icon {
    font-size: 1.1rem;
}

.depot-alert .alert-text {
    flex: 1;
    font-size: 0.95rem;
}

/* Tabs do Depot */
.depot-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.depot-tab {
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.depot-tab:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
}

.depot-tab.active {
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.depot-tab .tab-icon {
    font-size: 1.2rem;
}

.depot-tab .tab-label {
    font-size: 1rem;
}

.depot-tab .tab-count {
    background: rgba(0,0,0,0.2);
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
}

.depot-tab.active .tab-count {
    background: rgba(0,0,0,0.15);
}

/* Conteúdo do Depot */
.depot-content {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Estado Vazio */
.depot-empty-state {
    text-align: center;
    padding: 50px 20px;
}

.depot-empty-state .empty-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    opacity: 0.6;
}

.depot-empty-state h3 {
    color: var(--text);
    margin: 0 0 10px;
    font-size: 1.3rem;
}

.depot-empty-state p {
    color: var(--muted);
    margin: 0 0 20px;
}

.btn-go-backpack {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-go-backpack:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* Grid de Itens do Depot */
.depot-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

/* Card de Item do Depot */
.depot-item-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.depot-item-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.depot-item-card .item-card-header {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.depot-item-card .item-image-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

.depot-item-card .item-image-box img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}

.depot-item-card .item-image-box .no-image {
    font-size: 1.8rem;
    opacity: 0.5;
}

.depot-item-card .item-quantity {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

.depot-item-card .item-card-body {
    padding: 12px;
    text-align: center;
}

.depot-item-card .item-name {
    margin: 0 0 6px;
    font-size: 0.9rem;
    color: var(--text);
}

.depot-item-card .item-slot-badge {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    color: var(--muted);
}

/* Stats do Item */
.depot-item-card .item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    justify-content: center;
}

.depot-item-card .item-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.depot-item-card .item-stats .stat.atk {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.depot-item-card .item-stats .stat.def {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.depot-item-card .item-stats .stat.hp {
    background: rgba(231, 76, 60, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(231, 76, 60, 0.25);
}

.depot-item-card .item-stats .stat.magic {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.3);
}

.depot-item-card .item-stats .stat.shield {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.3);
}

.depot-item-card .item-stats .stat.heal {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.depot-item-card .item-stats .stat.mana {
    background: rgba(52, 152, 219, 0.2);
    color: #5dade2;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.depot-item-card .item-card-footer {
    padding: 12px;
    background: rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.depot-item-card .backpack-select {
    width: 100%;
    padding: 10px 14px;
    background: #1a1a22;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
}

.depot-item-card .backpack-select:hover {
    border-color: #d4af37;
}

.depot-item-card .backpack-select:focus {
    outline: none;
    border-color: #d4af37;
}

.depot-item-card .backpack-select option {
    background: #1a1a22;
    color: #fff;
    padding: 8px;
}

.depot-item-card .backpack-select option:disabled {
    color: #555;
}

.btn-withdraw {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-withdraw:hover {
    background: linear-gradient(135deg, #4aa3df, #3498db);
}

/* Cards de Mochila */
.depot-content .backpack-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
}

.depot-content .backpack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--border);
}

.depot-content .backpack-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.depot-content .backpack-icon {
    font-size: 1.4rem;
}

.depot-content .backpack-name {
    margin: 0;
    font-size: 1rem;
    color: var(--text);
}

.depot-content .backpack-capacity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.depot-content .capacity-text {
    font-weight: 700;
    color: #f1c40f;
    font-size: 0.9rem;
}

.mini-capacity-bar {
    width: 70px;
    height: 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    overflow: hidden;
}

.mini-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4af37, #f4e677);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.depot-content .backpack-empty {
    padding: 25px;
    text-align: center;
    color: var(--muted);
    font-style: italic;
}

.depot-content .backpack-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 18px;
}

/* Card de Item na Mochila - Novo Layout */
.bp-item-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.bp-item-card:hover {
    border-color: rgba(46, 204, 113, 0.5);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.bp-item-header {
    position: relative;
    background: rgba(0,0,0,0.2);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bp-item-image {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

.bp-item-image img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}

.bp-item-image .no-image {
    font-size: 1.8rem;
    opacity: 0.5;
}

.bp-item-qty {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.bp-item-body {
    padding: 12px;
    text-align: center;
}

.bp-item-name {
    margin: 0 0 6px;
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 600;
}

.bp-item-slot {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    color: var(--muted);
    margin-bottom: 8px;
}

.bp-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-top: 8px;
}

.bp-item-stats .stat-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 600;
}

.bp-item-stats .stat-tag.atk {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.bp-item-stats .stat-tag.def {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.bp-item-stats .stat-tag.hp {
    background: rgba(231, 76, 60, 0.15);
    color: #ff6b6b;
}

.bp-item-stats .stat-tag.heal {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.bp-item-stats .stat-tag.mana {
    background: rgba(52, 152, 219, 0.2);
    color: #5dade2;
}

.bp-item-footer {
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.05);
}

.btn-deposit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-deposit:hover:not(:disabled) {
    background: linear-gradient(135deg, #3dd983, #2ecc71);
}

.btn-deposit:disabled {
    background: #555;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Link para Market */
.depot-footer-link {
    margin-top: 25px;
}

.market-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(244, 230, 119, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s ease;
}

.market-link:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(244, 230, 119, 0.1));
    border-color: rgba(212, 175, 55, 0.5);
}

.market-link .market-icon {
    font-size: 1.8rem;
}

.market-link .market-text {
    flex: 1;
    font-size: 0.9rem;
}

.market-link .market-text strong {
    color: #d4af37;
}

.market-link .arrow {
    font-size: 1.2rem;
    color: #d4af37;
}

/* Responsivo */
@media (max-width: 768px) {
    .depot-header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .depot-tabs {
        flex-direction: column;
    }
    
    .depot-tab {
        justify-content: center;
    }
    
    .depot-items-grid {
        grid-template-columns: 1fr;
    }
    
    .depot-content .backpack-items-grid {
        grid-template-columns: 1fr;
    }
    
    .depot-content .backpack-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .depot-item-card .item-card-footer {
        flex-direction: column;
    }
    
    .depot-content .backpack-item-card {
        flex-wrap: wrap;
    }
    
    .depot-content .item-action {
        width: 100%;
    }
    
    .btn-deposit {
        width: 100%;
        justify-content: center;
    }
    
    .market-link {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================
   DEPOT MODAL - Retirar Item
   ========================================== */

.depot-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.depot-modal {
    background: linear-gradient(135deg, #1e1e26, #15151a);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.depot-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.depot-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
}

.modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #fff;
}

.depot-modal-body {
    padding: 20px;
}

/* Info do Item no Modal */
.modal-item-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-bottom: 20px;
}

.modal-item-image {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

.modal-item-image img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}

.modal-item-image .no-img {
    font-size: 2rem;
    opacity: 0.5;
}

.modal-item-details h4 {
    margin: 0 0 5px;
    font-size: 1rem;
    color: #fff;
}

.modal-item-available {
    font-size: 0.85rem;
    color: #888;
}

.modal-item-available strong {
    color: #d4af37;
}

/* Campos do Modal */
.modal-field {
    margin-bottom: 18px;
}

.modal-field label {
    display: block;
    font-size: 0.85rem;
    color: #aaa;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Seleção de Mochila */
.modal-backpacks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.backpack-option {
    cursor: pointer;
}

.backpack-option input {
    display: none;
}

.backpack-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.2s;
}

.backpack-option input:checked + .backpack-option-content {
    background: rgba(212, 175, 55, 0.15);
    border-color: #d4af37;
}

.backpack-option:not(.disabled):hover .backpack-option-content {
    border-color: rgba(212, 175, 55, 0.5);
}

.backpack-option.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bp-icon {
    font-size: 1.2rem;
}

.bp-name {
    flex: 1;
    font-size: 0.9rem;
    color: #fff;
}

.bp-slots {
    font-size: 0.8rem;
    color: #2ecc71;
    font-weight: 600;
}

.bp-slots.full {
    color: #e74c3c;
}

/* Controles de Quantidade */
.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.qty-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.quantity-controls input[type="number"] {
    width: 70px;
    height: 40px;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.quantity-controls input[type="number"]:focus {
    outline: none;
    border-color: #d4af37;
}

.qty-max-btn {
    padding: 0 15px;
    height: 40px;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    border: none;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.qty-max-btn:hover {
    transform: translateY(-1px);
}

/* Footer do Modal */
.depot-modal-footer {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel {
    flex: 1;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #aaa;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.btn-confirm {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-confirm:hover {
    background: linear-gradient(135deg, #4aa3df, #3498db);
}

.btn-confirm.btn-deposit-confirm {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.btn-confirm.btn-deposit-confirm:hover {
    background: linear-gradient(135deg, #3dd983, #2ecc71);
}

/* Destino Depot */
.depot-destination {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    margin-bottom: 8px;
}

.depot-dest-icon {
    font-size: 1.3rem;
}

.depot-dest-name {
    flex: 1;
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
}

.depot-dest-slots {
    font-size: 0.85rem;
    color: #d4af37;
    font-weight: 600;
}

.depot-slots-info {
    font-size: 0.8rem;
    color: #888;
    text-align: right;
}

.depot-slots-info strong {
    color: #2ecc71;
}

@media (max-width: 480px) {
    .depot-modal {
        max-width: 100%;
        margin: 10px;
    }
    
    .quantity-controls {
        flex-wrap: wrap;
    }
    
    .qty-max-btn {
        flex: 1;
    }
}

/* ==========================================
   MARKET - ESTILOS PADRÃO DO SERVIDOR
   ========================================== */

/* Wrapper do Market */
.market-wrapper {
    max-width: 100%;
}

/* Header do Market */
.market-header {
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.95), rgba(26, 26, 26, 0.95));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.market-header-content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.market-icon-wrapper {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.market-icon-glow {
    display: none;
}

.market-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.market-title-area {
    flex: 1;
}

.market-title {
    font-size: 1.8em;
    margin: 0 0 5px;
    background: linear-gradient(45deg, #d4af37, #f4e677, #d4af37);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.market-subtitle {
    color: var(--muted);
    margin: 0;
    font-size: 0.9rem;
}

/* Card de Informações do Market */
.market-info-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 18px;
}

.market-info-card .info-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.market-info-card .info-item {
    flex: 1;
    min-width: 120px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.market-info-card .info-item .info-icon {
    font-size: 1.3rem;
}

.market-info-card .info-item .info-label {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
}

.market-info-card .info-item .info-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1c40f;
}

.market-info-card .info-item.gold .info-value {
    color: #f1c40f;
}

.market-info-card .info-item.offers .info-value {
    color: #3498db;
}

.market-info-card .info-item.available .info-value {
    color: #2ecc71;
}

.market-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #3498db;
}

.market-hint .hint-icon {
    font-size: 1rem;
}

/* Alertas do Market */
.market-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.market-alert.alert-success {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.market-alert.alert-danger {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.market-alert .alert-icon {
    font-size: 1.1rem;
}

.market-alert .alert-text {
    flex: 1;
    font-size: 0.95rem;
}

/* Tabs do Market */
.market-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.market-tab {
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.market-tab:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
}

.market-tab.active {
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.market-tab .tab-icon {
    font-size: 1.2rem;
}

.market-tab .tab-label {
    font-size: 1rem;
}

.market-tab .tab-count {
    background: rgba(0, 0, 0, 0.2);
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
}

.market-tab.active .tab-count {
    background: rgba(0, 0, 0, 0.15);
}

/* Conteúdo do Market */
.market-content {
    background: var(--gradient-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Estado Vazio */
.market-empty-state {
    text-align: center;
    padding: 50px 20px;
}

.market-empty-state .empty-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    opacity: 0.6;
}

.market-empty-state h3 {
    color: var(--text);
    margin: 0 0 10px;
    font-size: 1.3rem;
}

.market-empty-state p {
    color: var(--muted);
    margin: 0 0 20px;
}

.btn-go-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-go-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* Grid de Itens do Market */
.market-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

/* Card de Item do Market */
.market-item-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.market-item-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.market-item-card.my-offer {
    border-color: rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(0,0,0,0.3));
}

.market-item-card .item-card-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.market-item-card .item-image-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.market-item-card .item-image-box img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}

.market-item-card .item-image-box .no-image {
    font-size: 1.8rem;
    opacity: 0.5;
}

.market-item-card .item-quantity {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

.market-item-card .item-timer {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    color: var(--muted);
}

.market-item-card .item-timer.urgent {
    background: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

.market-item-card .item-timer .timer-icon {
    font-size: 0.8rem;
}

.market-item-card .item-card-body {
    padding: 12px;
    text-align: center;
}

.market-item-card .item-name {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 600;
}

.market-item-card .item-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 8px;
}

.market-item-card .item-price .price-icon {
    font-size: 1rem;
}

.market-item-card .item-price .price-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1c40f;
}

.market-item-card .item-price .price-label {
    font-size: 0.8rem;
    color: var(--muted);
}

.market-item-card .item-seller,
.market-item-card .item-fee-paid {
    font-size: 0.8rem;
    color: var(--muted);
}

.market-item-card .item-seller .seller-name {
    color: #3498db;
}

.market-item-card .item-card-footer {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-buy {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-buy:hover:not(.disabled):not(:disabled) {
    background: linear-gradient(135deg, #3dd983, #2ecc71);
}

.btn-buy.disabled,
.btn-buy:disabled {
    background: #555;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-cancel-offer {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-offer:hover {
    background: linear-gradient(135deg, #ec5f50, #e74c3c);
}

/* Sub-tabs de Fonte (Vender) */
.sell-source-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.source-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 0.95rem;
}

.source-tab:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
}

.source-tab.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(244, 230, 119, 0.1));
    border-color: rgba(212, 175, 55, 0.5);
    color: #d4af37;
}

.source-tab .source-icon {
    font-size: 1.2rem;
}

/* Cards de Mochila (para vender) */
.sell-backpack {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
}

.sell-backpack .backpack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border);
}

.sell-backpack .backpack-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sell-backpack .backpack-icon {
    font-size: 1.4rem;
}

.sell-backpack .backpack-name {
    margin: 0;
    font-size: 1rem;
    color: var(--text);
}

.sell-backpack .backpack-capacity .capacity-text {
    font-weight: 700;
    color: #f1c40f;
    font-size: 0.9rem;
}

.sell-backpack .backpack-empty {
    padding: 25px;
    text-align: center;
    color: var(--muted);
    font-style: italic;
}

/* Grid de Itens para Vender */
.sell-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 18px;
}

/* Card de Item para Vender */
.sell-item-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.sell-item-card:hover {
    border-color: rgba(46, 204, 113, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sell-item-header {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sell-item-image {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.sell-item-image img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}

.sell-item-image .no-image {
    font-size: 1.8rem;
    opacity: 0.5;
}

.sell-item-qty {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    color: #1a1a1a;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.sell-item-body {
    padding: 12px;
    text-align: center;
}

.sell-item-name {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 600;
}

.sell-item-form {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.price-input-group {
    margin-bottom: 10px;
}

.price-input-group .price-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    text-align: center;
}

.price-input-group .price-input:focus {
    outline: none;
    border-color: #d4af37;
}

.price-input-group .fee-display {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 5px;
    text-align: center;
}

.btn-sell {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    border: none;
    border-radius: 6px;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sell:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

/* Histórico de Transações */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 18px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.history-card:hover {
    background: rgba(0, 0, 0, 0.3);
}

.history-card.sold {
    border-left: 4px solid #2ecc71;
}

.history-card.expired {
    border-left: 4px solid #f39c12;
}

.history-card.cancelled {
    border-left: 4px solid #e74c3c;
}

.history-card-icon {
    font-size: 1.8rem;
    width: 45px;
    text-align: center;
}

.history-card-image {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    flex-shrink: 0;
}

.history-card-image img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
}

.history-card-image .no-image {
    font-size: 1.4rem;
    opacity: 0.5;
}

.history-card-details {
    flex: 1;
    min-width: 0;
}

.history-item-name {
    margin: 0 0 5px;
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 600;
}

.history-meta {
    font-size: 0.85rem;
    color: var(--muted);
}

.history-meta .meta-action {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 5px;
}

.history-meta .meta-action.sell {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.history-meta .meta-action.buy {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.history-meta .meta-action.expired {
    background: rgba(243, 156, 18, 0.2);
    color: #f39c12;
}

.history-meta .meta-action.cancelled {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.history-card-price {
    text-align: right;
    flex-shrink: 0;
}

.history-price-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #f1c40f;
    margin-bottom: 4px;
}

.history-date {
    font-size: 0.75rem;
    color: var(--muted);
}

/* Link para Depot */
.market-footer-link {
    margin-top: 25px;
}

.depot-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(41, 128, 185, 0.05));
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s ease;
}

.depot-link:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(41, 128, 185, 0.1));
    border-color: rgba(52, 152, 219, 0.5);
}

.depot-link .depot-link-icon {
    font-size: 1.8rem;
}

.depot-link .depot-link-text {
    flex: 1;
    font-size: 0.9rem;
}

.depot-link .depot-link-text strong {
    color: #3498db;
}

.depot-link .arrow {
    font-size: 1.2rem;
    color: #3498db;
}

/* Market - Responsivo */
@media (max-width: 768px) {
    .market-header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .market-info-card .info-row {
        flex-direction: column;
    }
    
    .market-tabs {
        flex-direction: column;
    }
    
    .market-tab {
        justify-content: center;
    }
    
    .market-items-grid {
        grid-template-columns: 1fr;
    }
    
    .sell-items-grid {
        grid-template-columns: 1fr;
    }
    
    .sell-source-tabs {
        flex-direction: column;
    }
    
    .sell-backpack .backpack-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .history-card {
        flex-wrap: wrap;
    }
    
    .history-card-price {
        width: 100%;
        text-align: left;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }
    
    .depot-link {
        flex-direction: column;
        text-align: center;
    }
}

/* ===========================================
   Chat Global - Estilos do Sistema de Chat
   =========================================== */

/* Chat Page Layout - Largura Total */
.main-content .page-header {
    margin-bottom: 1.5rem;
}

.main-content .page-header h1 {
    margin: 0 0 0.5rem 0;
    color: var(--gold);
}

.main-content .page-subtitle {
    color: var(--muted);
    margin: 0;
}

/* Chat Container */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 70vh;
    max-height: 700px;
    min-width: 100%;
    width: 100%;
    overflow: hidden;
}

.chat-container .card-header {
    padding: 1rem 1.5rem;
    background: var(--gradient-2);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-container .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--gold);
}

.chat-container .card-header .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

/* Chat Messages Area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg);
}

.chat-welcome {
    text-align: center;
    color: var(--muted);
    padding: 3rem 1.5rem;
}

.chat-welcome-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.chat-welcome p {
    margin: 0.5rem 0;
}

/* Individual Message */
.chat-message {
    display: flex;
    gap: 12px;
    padding: 12px 15px;
    background: var(--card);
    border-radius: 8px;
    border: 1px solid var(--border);
    position: relative;
    animation: chatFadeIn 0.3s ease;
}

.chat-message:hover {
    background: var(--gradient-2);
}

.chat-message:hover .chat-message-actions {
    opacity: 1;
}

@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #f4e677);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #1a1a1a;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.chat-message-content {
    flex: 1;
    min-width: 0;
}

.chat-message-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.chat-message-username {
    font-weight: 600;
    color: var(--gold);
    cursor: pointer;
    transition: color 0.2s;
}

.chat-message-username:hover {
    color: #f4e677;
    text-decoration: underline;
}

.chat-message-time {
    font-size: 11px;
    color: var(--muted);
}

.chat-message-text {
    color: var(--text);
    word-wrap: break-word;
    line-height: 1.5;
}

/* Reply styling - DESTAQUE FORTE */
.chat-message-reply {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.15) 100%);
    border: 2px solid var(--gold);
    border-left: 5px solid var(--gold);
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.1);
}

.chat-message-reply-user {
    color: #f4e677;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.chat-message-reply-text {
    color: #e0e0e0;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    font-style: italic;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Message actions */
.chat-message-actions {
    position: absolute;
    top: 8px;
    right: 10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chat-action-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    color: var(--text);
}

.chat-action-btn:hover {
    background: var(--gold);
    color: #1a1a1a;
    border-color: var(--gold);
}

.chat-action-btn.report:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.chat-action-btn.private:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.chat-action-btn.delete:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

/* Reply indicator */
.chat-reply-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: rgba(212, 175, 55, 0.1);
    border-left: 3px solid var(--gold);
    margin: 0;
}

.chat-reply-indicator .reply-text {
    font-size: 13px;
    color: var(--muted);
}

.chat-reply-indicator .reply-text strong {
    color: var(--gold);
}

.reply-cancel {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 4px;
}

.reply-cancel:hover {
    color: var(--danger);
    background: rgba(166, 102, 102, 0.2);
}

/* Cooldown indicator */
.chat-cooldown {
    padding: 10px 15px;
    background: rgba(166, 102, 102, 0.15);
    border-left: 3px solid var(--danger);
    color: var(--danger);
    font-size: 13px;
}

/* Chat Input Form */
.chat-input-form {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: var(--card);
    border-top: 1px solid var(--border);
}

.chat-input-form .chat-input {
    flex: 1;
}

.chat-send-btn {
    min-width: 100px;
}

/* Page Header for Chat */
.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    margin: 0 0 0.5rem 0;
    color: var(--gold);
}

.page-subtitle {
    color: var(--muted);
    margin: 0;
}

/* Chat Modal Styles */
.chat-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.chat-modal-box {
    background: var(--card);
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.chat-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--gradient-2);
    border-bottom: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
}

.chat-modal-header h3 {
    margin: 0;
    color: var(--gold);
}

.chat-modal-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    border-radius: 4px;
}

.chat-modal-close:hover {
    color: var(--danger);
    background: rgba(166, 102, 102, 0.2);
}

.chat-modal-body {
    padding: 20px;
}

.report-info {
    margin-bottom: 15px;
    color: var(--text);
}

.report-info strong {
    color: var(--gold);
}

.report-message-preview {
    background: var(--bg);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid var(--danger);
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 15px;
}

.chat-modal-footer {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: var(--gradient-2);
    border-top: 1px solid var(--border);
    border-radius: 0 0 12px 12px;
    justify-content: flex-end;
}

/* Chat Responsive */
@media (max-width: 768px) {
    .chat-container {
        height: 65vh;
    }
    
    .chat-input-form {
        flex-direction: column;
    }
    
    .chat-send-btn {
        width: 100%;
    }
}