html, body { background: #09090b !important; color: #e4e4e7; margin: 0; padding: 0; font-family: sans-serif; }
.xp-bg { width: 100%; height: 8px; background: #18181b; border-radius: 4px; margin-top: 5px; overflow: hidden; border: 1px solid #27272a; }
#xp-bar { height: 100%; background: linear-gradient(90deg, #facc15, #eab308) !important; width: 0%; transition: width 0.3s ease; }
.stats-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; padding: 0 10px; }
.box { flex: 1; background: #111113; border: 1px solid #27272a; padding: 12px 5px; border-radius: 10px; text-align: center; font-size: 11px; font-weight: bold; color: #f4f4f5; }

.character-area { width: 100%; display: flex; justify-content: center; align-items: center; margin: 20px 0; }
.character-layout { display: flex; justify-content: center; align-items: center; gap: 10px; }
.character-display { position: relative; width: 200px; height: 250px; }
.left-slots, .right-slots { display: flex; flex-direction: column; height: 250px; justify-content: space-between; }
.slot-square { width: 50px; height: 50px; background: #111113; border: 1px solid #27272a; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; }
.slot-square img { width: 80%; height: 80%; object-fit: contain; }

.afiacao-level { position: absolute; top: 2px; right: 4px; font-size: 10px; font-weight: bold; color: #facc15; text-shadow: 1px 1px 2px black; z-index: 5; }
.runa-icon-overlay { position: absolute; bottom: 2px; left: 2px; width: 16px; height: 16px; background-size: contain; z-index: 5; }

.action-list { padding: 15px; display: flex; flex-direction: column; gap: 8px; }
.summary-item { background: #111113; border: 1px solid #27272a; padding: 12px; border-radius: 10px; font-size: 13px; }

.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 2000; }
.modal-content { background: #09090b; border: 2px solid #27272a; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px; color: white; position: relative; }