.character-preview { position: fixed; z-index: 1850; width: 520px; max-width: calc(100vw - 20px); padding: 14px; border: 1px solid rgba(246,185,59,.45); border-radius: 12px; background: #0d1420; box-shadow: 0 16px 48px rgba(0,0,0,.7); color: #e9edf4; pointer-events: none; }
.character-preview[hidden] { display: none; }
.character-preview h3 { margin: 0 0 3px; font-size: 18px; color: #f6b93b; }
.character-preview p { margin: 0 0 10px; font-size: 11px; color: #a6adba; }
.character-preview-grid { position: relative; display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 12px; }
.character-preview-hero { position: relative; height: 235px; display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; gap: 4px; background: radial-gradient(ellipse at bottom,rgba(246,185,59,.12),transparent 65%); }
.character-preview-hero > img { width: 100%; height: 210px; object-fit: contain; }
.character-preview-slots { display: grid; gap: 5px; }
.character-preview-slot { display: grid; place-items: center; height: 32px; border: 1px solid rgba(246,185,59,.16); border-radius: 5px; background: #111f2c; color: #445468; }
.character-preview-slot img { max-width: 40px; max-height: 30px; object-fit: contain; }
.character-preview-stats { display: grid; align-content: start; gap: 9px; padding: 10px; border: 1px solid #283446; border-radius: 8px; }
.character-preview-stat { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.character-preview-stat strong { color: #f6b93b; }
.character-preview-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; font-size: 9px; text-align: center; }
.character-preview-progress strong { display: block; color: #fff; font-size: 12px; }
.character-preview-location { margin-top: 8px !important; text-align: center; }
.character-preview-protected .character-preview-details { filter: blur(5px); opacity: .35; }
.character-preview-lock { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; background: rgba(7,21,35,.75); border-radius: 9px; text-align: center; padding: 20px; }
.character-preview-lock i { font-size: 32px; color: #adbbc9; }
.character-preview-lock span { max-width: 250px; font-size: 13px; color: #c4ccd8; }