@font-face{font-family:'Permanent Marker';src:url('assets/fonts/PermanentMarker-Regular.ttf') format('truetype');font-display:swap}
.recrue-cover{position:relative;border:1px solid #98723e;border-radius:14px;overflow:hidden;margin:0 0 16px;background:#151313}
.recrue-cover>img{display:block;width:100%;height:auto;min-height:90px}
.recrue-customize{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:5px;background:#101010e8;border:1px solid #d0ad66;color:#f6d68d;border-radius:20px;padding:7px 10px;font:500 11px Inter,system-ui,sans-serif;min-height:36px}
.recrue-customize svg{width:14px;height:14px}
.recrue-menu{display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:inherit;font:inherit;min-height:72px;padding:14px 16px;margin:12px 0}
.recrue-menu>svg:first-child{width:27px;height:27px;flex-shrink:0}.recrue-menu>span{flex:1;min-width:0}.recrue-menu b{font:600 15px Inter,system-ui,sans-serif;display:block}.recrue-menu small{display:block;font-size:11px;margin-top:5px;line-height:1.5;opacity:.8}.recrue-menu>svg:last-child{width:18px;flex-shrink:0}
.recrue-stats{display:block;text-align:left;width:100%;font:inherit;color:inherit;padding:16px;margin:16px 0}
.recrue-stats-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:17px}.recrue-stats-heading svg{width:18px}
.recrue-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0;gap:8px}.recrue-stats-grid>span{min-width:0;padding-right:5px}.recrue-stats-grid>span+span{border-left:1px solid #9b793f66;padding-left:9px}.recrue-stats-grid small{display:block;font-size:10px;line-height:1.5}.recrue-stats-grid strong{display:block;font-size:17px;font-weight:600;margin-top:8px;overflow-wrap:anywhere}.recrue-stats-grid strong small{display:inline;font-size:10px;font-weight:400}
.recrue-stats-footer{display:block;border-top:1px solid #9b793f66;padding-top:12px;font-size:12px}
.recrue-banner-preview{display:block;width:100%;height:auto;border-radius:10px;margin:12px 0}.recrue-banner-options{display:flex;flex-wrap:wrap;gap:8px}.recrue-banner-options button{font-size:12px}.recrue-banner-options [aria-pressed=true]{border-color:var(--pink);box-shadow:inset 0 -2px var(--pink)}
#modal:has(.recrue-banner-preview) .upload-label input{max-width:100%}
#modal .recrue-card{max-width:100%;margin:12px 0}#modal .backup-section{margin-top:12px}
html[data-theme=light] :is(.recrue-stats,.recrue-menu){background:#fffdf9!important;color:#30271e!important;border-color:#c3a777!important}
html[data-theme=light] .recrue-stats *,html[data-theme=light] .recrue-menu *{color:inherit!important}
html[data-appearance=purple-queen] :is(.recrue-stats,.recrue-menu){background:#281735!important;color:#f4dca7!important;border-color:#805077!important}
html[data-appearance=white-dress] :is(.recrue-stats,.recrue-menu){background:#fffafd!important;color:#302132!important;border-color:#d7a7be!important}
@media(max-width:360px){.recrue-stats{padding:12px}.recrue-stats-grid{gap:4px}.recrue-stats-grid strong{font-size:15px}.recrue-stats-grid small{font-size:9px}.recrue-menu{padding:12px}.recrue-menu b{font-size:14px}}