@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap";:root{--color-bg-base:#0a0a0f;--color-bg-surface:#191923b3;--color-bg-surface-hover:#282837cc;--color-text-primary:#f0f0f5;--color-text-secondary:#a0a0b5;--color-primary:#d4af37;--color-primary-glow:#d4af3766;--color-accent:#8b5cf6;--color-border:#ffffff1a;--font-family-base:"Inter", system-ui, sans-serif;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--transition-fast:.15s ease;--transition-normal:.3s ease}body{font-family:var(--font-family-base);background-color:var(--color-bg-base);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15%,#8b5cf626,#0000 25%),radial-gradient(circle at 85% 30%,#d4af371a,#0000 25%);background-attachment:fixed;min-height:100vh;margin:0}*{box-sizing:border-box}h1,h2,h3,h4{letter-spacing:-.02em;margin:0;font-weight:600}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:#f3d473;text-shadow:0 0 8px var(--color-primary-glow)}button{border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:var(--radius-md);font-family:var(--font-family-base);cursor:pointer;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffff0d,#fff0);padding:10px 20px;font-size:1rem;font-weight:500;position:relative;overflow:hidden}button:before{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);width:50%;height:100%;transition:all .5s;position:absolute;top:0;left:-100%;transform:skew(-20deg)}button:hover:before{left:150%}button:hover{border-color:var(--color-primary);box-shadow:0 0 15px var(--color-primary-glow);transform:translateY(-2px)}.game-card{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-normal);-webkit-backdrop-filter:blur(8px);text-align:left;flex-direction:column;padding:0;animation:.5s ease-out backwards fade-in-up;display:flex;overflow:hidden}.game-card:first-child{animation-delay:.1s}.game-card:nth-child(2){animation-delay:.2s}.game-card:hover{border-color:var(--color-primary);box-shadow:0 10px 30px #00000080, 0 0 15px var(--color-primary-glow);transform:translateY(-5px)scale(1.02)}.game-card:before{display:none}.game-card-header{height:320px;padding:var(--spacing-md);background-position:50%;background-size:cover;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:flex-start;display:flex;position:relative;overflow:hidden}.game-card-header.bg-honkai-star-rail-sel{background-image:url(https://upload-os-bbs.hoyolab.com/upload/2023/04/23/94776100/98bda9142f1cf4e3328e3705a1cb36cf_4167389445173163155.jpg?x-oss-process=image/resize,s_1000/quality,q_80/auto-orient,0/interlace,1/format,jpg)}.game-card-header.bg-r1999-sel{background-image:url(https://www.prydwen.gg/static/fcd1174cd08e75db740f90e386055d72/31336/rv_meta.webp)}.game-character-image{object-fit:contain;object-position:center bottom;z-index:1;opacity:.9;filter:drop-shadow(0 0 20px #000c);width:100%;height:100%;transition:transform .5s;position:absolute;top:0;left:0}.game-card-header.bg-r1999-sel .game-character-image{object-position:center top}.game-card:hover .game-character-image{opacity:1;transform:scale(1.08)}.game-card-overlay{z-index:2;width:100%;height:100%;transition:opacity var(--transition-normal);background:linear-gradient(#0a0a0f4d 0%,#0000 50%,#14141ef2 100%);position:absolute;top:0;left:0}.game-card:hover .game-card-overlay{opacity:.8}.game-card-badges{bottom:var(--spacing-sm);right:var(--spacing-md);z-index:3;position:absolute}.requires-login-badge{border:1px solid var(--color-primary);color:var(--color-primary);box-shadow:0 0 10px var(--color-primary-glow) inset;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-transform:uppercase;letter-spacing:.5px;background:#282837cc;border-radius:12px;padding:4px 10px;font-size:.75rem;font-weight:600}.game-card-body{padding:var(--spacing-lg) var(--spacing-md);gap:var(--spacing-sm);z-index:3;background:#14141e66;flex-direction:column;display:flex}.game-title-row{justify-content:space-between;align-items:center;gap:var(--spacing-sm);display:flex}.game-name{color:#fff;transition:color var(--transition-fast);margin-bottom:0;font-size:1.6rem}.game-card:hover .game-name{color:var(--color-primary)}.game-tag-badge{color:var(--color-text-secondary);letter-spacing:.05em;background:#ffffff1a;border:1px solid #ffffff1a;border-radius:4px;padding:2px 8px;font-size:.75rem;font-weight:500}.game-description{color:var(--color-text-secondary);margin:0;font-size:.95rem;line-height:1.5}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.layout{flex-direction:column;min-height:100vh;display:flex}.main-content{padding:var(--spacing-xl);flex:1;width:100%;max-width:1200px;margin:0 auto}.secondary-action{border:1px solid var(--color-border);color:var(--color-text-secondary);background:0 0}.secondary-action:hover{color:#fff;background:#ffffff0d;border-color:#fff;box-shadow:0 0 10px #ffffff1a}.secondary-action:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.primary-action{background:linear-gradient(135deg, var(--color-primary), #b8960c);border:1px solid var(--color-primary);color:#000;font-weight:600}.primary-action:hover{box-shadow:0 0 20px var(--color-primary-glow);border-color:var(--color-primary);transform:translateY(-2px)}.element-badge{text-transform:uppercase;letter-spacing:.1em;border-radius:var(--radius-sm);background:#0000004d;padding:4px 8px;font-size:.75rem;font-weight:600}.element-lightning{color:#d97afe;border:1px solid #d97afe8c}.element-imaginary{color:#f4d258;border:1px solid #f4d2584d}.element-fire{color:#f84f36;border:1px solid #f84f364d}.element-ice{color:#47c7fd;border:1px solid #47c7fd4d}.element-quantum{color:#7864aa;border:1px solid #7864aa66}.element-wind{color:#5bc89f;border:1px solid #5bc89f4d}.element-physical{color:#bcbcbc;border:1px solid #bcbcbc4d}@media (width<=768px){.main-content{padding:var(--spacing-md)}}.navbar{padding:var(--spacing-md) var(--spacing-xl);background:var(--color-bg-surface);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);z-index:100;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.brand-icon{color:var(--color-primary);-webkit-text-fill-color:var(--color-primary);margin-right:var(--spacing-sm);filter:drop-shadow(0 0 5px var(--color-primary-glow));font-size:1.2rem}.nav-brand{letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(90deg, #fff, var(--color-text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;align-items:center;font-size:1.2rem;font-weight:600;display:flex}.nav-auth{align-items:center;gap:1rem;display:flex}.user-email{color:var(--color-text-secondary);font-size:.9rem}@media (width<=768px){.navbar{padding:var(--spacing-md);gap:var(--spacing-md);flex-direction:column}.nav-auth{justify-content:space-between;width:100%}}.confirm-checkbox{align-items:center;gap:var(--spacing-sm);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);background:#ffffff0d;border:1px solid #ffffff1a;justify-content:center;width:100%;padding:10px 16px;font-family:inherit;font-size:.95rem;font-weight:500;display:flex}.confirm-checkbox:hover{background:#ffffff1a}.confirm-checkbox.checked{border-color:var(--color-primary);color:var(--color-primary);background:#d4af371a;box-shadow:0 0 10px #d4af3733}.confirm-checkbox.confirming{color:#ff6b6b;background:#ff6b6b1a;border-color:#ff6b6b;animation:1s infinite alternate pulse-warn}.checkbox-box{border:1px solid;border-radius:4px;justify-content:center;align-items:center;width:18px;height:18px;font-size:.8rem;display:flex}@keyframes pulse-warn{0%{box-shadow:0 0 #ff6b6b00}to{box-shadow:0 0 10px #ff6b6b66}}.character-card{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-normal);-webkit-backdrop-filter:blur(8px);flex-direction:column;animation:.5s ease-out backwards fade-in-up;display:flex;overflow:hidden}.character-card:first-child{animation-delay:.1s}.character-card:nth-child(2){animation-delay:.2s}.character-card:nth-child(3){animation-delay:.3s}.character-card:nth-child(4){animation-delay:.4s}.character-card:hover{border-color:var(--color-primary);box-shadow:0 10px 30px #00000080, 0 0 15px var(--color-primary-glow);transform:translateY(-5px)scale(1.02)}.card-header{height:250px;padding:var(--spacing-md);background:linear-gradient(#ffffff1a,#0000);border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:flex-start;display:flex;position:relative;overflow:hidden}.character-image{object-fit:cover;object-position:center top;z-index:0;width:100%;height:100%;transition:transform var(--transition-normal);opacity:.9;position:absolute;top:0;left:0}.character-card:hover .character-image{opacity:1;transform:scale(1.05)}.card-header-overlay{z-index:1;background:linear-gradient(#0006 0%,#0000 40%,#14141ee6 100%);width:100%;height:100%;position:absolute;top:0;left:0}.card-overlay-controls{z-index:2;padding:var(--spacing-sm);pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0}.card-overlay-controls>*{pointer-events:auto}.card-overlay-top,.card-overlay-bottom{justify-content:space-between;align-items:flex-end;display:flex}.card-overlay-badges{flex-direction:column;align-items:flex-start;gap:4px;display:flex}.card-body{padding:var(--spacing-lg) var(--spacing-md);gap:var(--spacing-md);flex-direction:column;display:flex}.character-name{color:#fff;margin-bottom:0;font-size:1.5rem}.progress-section{gap:var(--spacing-sm);padding:var(--spacing-md);border-radius:var(--radius-md);background:#00000026;border:1px solid #ffffff08;flex-direction:column;display:flex}.section-header{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;margin-bottom:4px;font-size:.85rem;font-weight:600;display:flex}.section-value{color:#fff}.level-slider{appearance:none;border-radius:2px;outline:none;width:100%;height:4px;margin:8px 0;box-shadow:inset 0 0 10px #00000080}.level-slider::-webkit-slider-thumb{appearance:none;background:var(--color-primary);cursor:pointer;width:16px;height:16px;box-shadow:0 0 10px var(--color-primary-glow);transition:transform var(--transition-fast);border-radius:50%}.level-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.relics-grid{gap:var(--spacing-sm);grid-template-columns:repeat(6,1fr);display:grid}.relic-slot{aspect-ratio:1;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);background:#ffffff08;border:1px solid #ffffff1a;justify-content:center;align-items:center;display:flex}.relic-icon{color:#fff3;transition:all var(--transition-fast);font-size:.8rem}.relic-icon.planar{color:#d4af3766;font-size:1.2rem}.relic-icon.cavern{color:#ffffff4d;font-size:1.1rem}.relic-slot:hover{background:#ffffff1a}.relic-slot.active{border-color:var(--color-primary);box-shadow:0 0 8px var(--color-primary-glow) inset;background:#d4af371a}.relic-slot.active .relic-icon{color:var(--color-primary);filter:drop-shadow(0 0 2px var(--color-primary-glow))}.remove-btn{color:var(--color-text-secondary);width:28px;height:28px;min-width:unset;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1rem;line-height:1;display:flex}.remove-btn:hover{color:#ff4d4f;box-shadow:none;border-color:#0000;transform:none}.remove-btn:before{display:none}.relic-set-icon{object-fit:contain;opacity:.9;filter:drop-shadow(0 2px 4px #00000080);width:80%;height:80%}@media (width<=480px){.card-header{height:200px}.character-name{font-size:1.25rem}.relics-grid{gap:6px}.relic-slot{border-radius:6px}.card-body{padding:var(--spacing-md)}}.favorite-btn{color:#fff;z-index:10;cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);min-width:unset;background:#00000080;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1.2rem;line-height:1;display:flex}.favorite-btn:before{display:none}.favorite-btn:hover{background:#000000b3;transform:scale(1.1);box-shadow:0 0 10px #00000080}.favorite-btn.active{color:var(--color-primary);border-color:var(--color-primary);text-shadow:0 0 8px var(--color-primary-glow);box-shadow:0 0 8px var(--color-primary-glow) inset;background:#d4af3726}.score-badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;text-shadow:0 1px 2px #00000080;transition:all var(--transition-fast);border-radius:12px;justify-content:center;align-items:center;padding:4px 8px;font-size:.85rem;font-weight:700;display:flex;box-shadow:0 2px 10px #00000080}.score-badge.tier-s{border:1px solid var(--color-primary);color:#fff;box-shadow:0 0 10px var(--color-primary-glow) inset, 0 2px 10px #00000080;background:#d4af3733}.score-badge.tier-s span{background:linear-gradient(135deg, #fff, var(--color-primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.score-badge.tier-a{color:#e6e6fa;background:#9370db33;border:1px solid #9370db;box-shadow:inset 0 0 8px #9370db80,0 2px 10px #00000080}.score-badge.tier-b{color:var(--color-text-secondary);background:#ffffff1a;border:1px solid #ffffff4d}.build-prefs-display{margin-top:-4px}.prefs-display-grid{border-radius:var(--radius-sm);background:#0000001a;border:1px solid #ffffff05;flex-direction:column;gap:6px;padding:8px;display:flex}.pref-display-row{align-items:flex-start;gap:8px;display:flex}.pref-display-label{color:var(--color-text-dim);text-transform:uppercase;min-width:48px;margin-top:2px;font-size:.75rem;font-weight:600}.pref-display-chain{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.pref-stat-badge{color:var(--color-text);background:#ffffff0f;border:1px solid #ffffff0d;border-radius:4px;padding:2px 6px;font-size:.75rem}.pref-operator-badge{color:var(--color-primary);opacity:.8;font-size:.75rem;font-weight:700}.build-comments-row{border-top:1px dashed #ffffff1a;margin-top:4px;padding-top:8px}.pref-comments-text{color:var(--color-text-secondary);overflow-wrap:break-word;opacity:.8;width:100%;font-size:.75rem;font-style:italic;line-height:1.5}.path-badge{text-transform:uppercase;letter-spacing:.04em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;border:1px solid;border-radius:10px;padding:3px 8px;font-size:.7rem;font-weight:700;line-height:1.3}.path-badge.path-destruction{color:#ff9090;background:#c83c3c40;border-color:#c83c3c99}.path-badge.path-the-hunt{color:#f5d68a;background:#d4af3740;border-color:#d4af3799}.path-badge.path-erudition{color:#7fe4d0;background:#46b4a040;border-color:#46b4a099}.path-badge.path-harmony{color:#f0a8d8;background:#dc78b440;border-color:#dc78b499}.path-badge.path-nihility{color:#c9a8f8;background:#8250c840;border-color:#8250c899}.path-badge.path-preservation{color:#8ab8f5;background:#3c78dc40;border-color:#3c78dc99}.path-badge.path-abundance{color:#90e09a;background:#46aa5040;border-color:#46aa5099}.path-badge.path-remembrance{color:#90e8f8;background:#50c8e640;border-color:#50c8e699}.path-badge.path-elation{color:#ffc875;background:#ffa02840;border-color:#ffa02899}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;animation:.2s ease-out forwards fade-in;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-bg-base);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:90%;max-width:500px;max-height:80vh;box-shadow:0 20px 50px #00000080, 0 0 20px var(--color-primary-glow);flex-direction:column;animation:.3s ease-out forwards slide-up;display:flex;overflow:hidden}.modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.modal-header h2{color:#fff;font-size:1.5rem}.close-btn{color:var(--color-text-secondary);min-width:unset;background:0 0;border:none;padding:0;font-size:1.5rem}.close-btn:hover{color:#fff;box-shadow:none;border-color:#0000;transform:none}.close-btn:before{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=600px){.modal-content{width:95%;max-height:90vh}.modal-header{padding:var(--spacing-md)}.modal-header h2{font-size:1.25rem}}.relic-editor-body{padding:var(--spacing-lg);gap:var(--spacing-lg);flex-direction:column;max-height:50vh;display:flex;overflow-y:auto}.form-group{gap:var(--spacing-sm);flex-direction:column;display:flex}.form-group label,.substats-section label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;font-weight:500}.relic-editor-body select,.relic-editor-body input{border:1px solid var(--color-border);border-radius:var(--radius-md);color:#fff;font-family:var(--font-family-base);transition:all var(--transition-fast);background:#ffffff0d;padding:10px 14px;font-size:1rem}.relic-editor-body select:focus,.relic-editor-body input:focus{border-color:var(--color-primary);background:#ffffff14;outline:none}.relic-editor-body select option{background:var(--color-bg-base);color:#fff}.substats-section{gap:var(--spacing-md);flex-direction:column;display:flex}.substat-row{gap:var(--spacing-sm);grid-template-columns:2fr 1fr auto;align-items:center;display:grid}.remove-substat{color:#ff4d4f;border-radius:var(--radius-md);cursor:pointer;width:38px;height:38px;transition:all var(--transition-fast);min-width:unset;background:#ff4d4f1a;border:1px solid #ff4d4f4d;justify-content:center;align-items:center;padding:0;display:flex}.remove-substat:hover{color:#fff;background:#ff4d4f}.remove-substat:before{display:none}.add-substat-btn{border:1px dashed var(--color-border);color:var(--color-text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background:0 0;padding:10px}.add-substat-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:#d4af370d}.modal-footer{justify-content:flex-end;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border);background:#0003;display:flex}.secondary-action.danger{color:#ff4d4f;border-color:#ff4d4f80}.secondary-action.danger:hover{color:#fff;background:#ff4d4f;border-color:#ff4d4f;box-shadow:0 0 10px #ff4d4f4d}.modal-tabs{border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-md);padding:0 var(--spacing-md);display:flex}.tab-btn{padding:var(--spacing-sm) var(--spacing-md);color:var(--color-text-dim);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;font-size:.95rem;font-weight:500}.tab-btn:hover{color:var(--color-text)}.tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.preferences-tab{gap:var(--spacing-lg);padding:0 var(--spacing-md);flex-direction:column;display:flex}.tab-description{color:var(--color-text-secondary);margin:0;font-size:.85rem;line-height:1.4}.pref-section h3{text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);margin-bottom:12px;padding-bottom:6px;font-size:.9rem}.pref-chain{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.pref-item{border:1px solid var(--color-border);border-radius:var(--radius-md);transition:var(--transition-fast);background:#ffffff05;align-items:center;gap:8px;padding:6px 12px;display:flex}.pref-item:hover{border-color:#fff3}.pref-item select{color:var(--color-text);cursor:pointer;background:0 0;border:none;outline:none;padding:0;font-size:.9rem}.pref-item select.operator-select{color:var(--color-primary);font-weight:700}.remove-pref-btn{color:var(--color-text-dim);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;padding:0 4px;font-size:.8rem;line-height:1}.remove-pref-btn:hover{color:#ff4d4f}.add-pref-btn{border:1px dashed var(--color-border);color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;width:100%;transition:all var(--transition-fast);background:#ffffff08;padding:8px 16px;font-size:.9rem}.add-pref-btn:hover{color:var(--color-text);background:#ffffff14;border-color:#ffffff4d}.build-comments-textarea{border:1px solid var(--color-border);border-radius:var(--radius-md);color:#fff;resize:vertical;width:100%;min-height:80px;transition:all var(--transition-fast);background:#ffffff0d;padding:10px 14px;font-family:inherit;font-size:.9rem}.build-comments-textarea:focus{border-color:var(--color-primary);background:#ffffff14;outline:none}@media (width<=600px){.relic-editor-body{padding:var(--spacing-md);gap:var(--spacing-md);max-height:60vh}.substat-row{grid-template-columns:1fr 1fr auto}.relic-editor-body select,.relic-editor-body input{padding:8px 10px;font-size:.9rem}}.modal-search{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid #ffffff0d}.modal-search input{border:1px solid var(--color-border);border-radius:var(--radius-md);color:#fff;width:100%;font-size:1rem;font-family:var(--font-family-base);transition:border-color var(--transition-fast);background:#ffffff0d;padding:12px 16px}.modal-search input:focus{border-color:var(--color-primary);background:#ffffff14;outline:none}.character-list{padding:var(--spacing-sm);flex:1;overflow-y:auto}.character-list-item{padding:var(--spacing-md);margin:var(--spacing-sm) 0;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;justify-content:space-between;align-items:center;display:flex}.character-list-item:hover{border-color:var(--color-border);background:#ffffff0d}.char-list-info{align-items:center;gap:var(--spacing-md);display:flex}.char-list-img-wrapper{border:2px solid var(--color-border);background:#ffffff0d;border-radius:50%;flex-shrink:0;width:48px;height:48px;overflow:hidden}.char-list-img{object-fit:cover;width:100%;height:100%}.char-list-details{flex-direction:column;gap:4px;display:flex}.char-list-name{color:#fff;font-size:1.1rem;font-weight:500}.char-list-tags{align-items:center;gap:var(--spacing-sm);display:flex}.add-btn{width:32px;height:32px;min-width:unset;background:#ffffff1a;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1.2rem;display:flex}.add-btn:before{display:none}.character-list-item:hover .add-btn{background:var(--color-primary);color:var(--color-bg-base);box-shadow:0 0 10px var(--color-primary-glow);border-color:#0000}.no-results{text-align:center;color:var(--color-text-secondary);padding:2rem}.hero{text-align:center;margin-bottom:4rem;padding:4rem 0;animation:.8s ease-out forwards fade-in-up}.title{margin-bottom:var(--spacing-md);background:linear-gradient(135deg, #fff 0%, var(--color-primary) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 12px #00000080);-webkit-background-clip:text;background-clip:text;font-size:4rem}.subtitle{color:var(--color-text-secondary);max-width:600px;margin:0 auto var(--spacing-xl);font-size:1.2rem;line-height:1.6}.action-group{gap:var(--spacing-md);justify-content:center;align-items:center;display:flex}.action-group button{width:100%}.search-and-sort-container{margin-top:var(--spacing-lg);justify-content:center;align-items:center;gap:var(--spacing-sm);width:100%;max-width:600px;margin-left:auto;margin-right:auto;display:flex}.roster-search-input{border:1px solid var(--color-border);border-radius:var(--radius-lg);color:#fff;width:100%;font-size:1.1rem;font-family:var(--font-family-base);transition:all var(--transition-fast);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;padding:12px 20px}.roster-search-input:focus{border-color:var(--color-primary);background:#ffffff14;outline:none;box-shadow:0 0 15px #d4af3733}.sort-btn{width:46px;height:46px;min-width:unset;border-radius:var(--radius-md);border:1px solid var(--color-border);color:var(--color-text-secondary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-fast);cursor:pointer;background:#ffffff0d;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:1rem;line-height:1;display:flex}.sort-btn:hover{border-color:var(--color-primary);color:var(--color-primary);box-shadow:0 0 10px var(--color-primary-glow);transform:none}.sort-btn.active{border-color:var(--color-primary);color:var(--color-primary);box-shadow:0 0 10px var(--color-primary-glow) inset;text-shadow:0 0 8px var(--color-primary-glow);background:#d4af371a}.sort-btn:before{display:none}.roster-grid{gap:var(--spacing-xl);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.empty-state{text-align:center;border:1px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-secondary);background:#ffffff05;grid-column:1/-1;padding:4rem;font-size:1.1rem}.empty-state.auth-gate{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:center;flex-direction:column;align-items:center;gap:1.5rem;max-width:480px;margin:2rem auto;padding:3rem 2rem;display:flex}.auth-gate-btn{justify-content:center;align-items:center;gap:.5rem;width:100%;margin-top:1rem;padding:1rem;font-size:1.1rem;display:flex}@media (width<=768px){.title{font-size:2.5rem}.hero{margin-bottom:2rem;padding:2rem 0}.subtitle{padding:0 var(--spacing-md);font-size:1rem}.action-group{padding:0 var(--spacing-md);flex-direction:column}.action-group button{justify-content:center;width:100%}.empty-state.auth-gate{margin:1rem;padding:2rem 1.5rem}}