@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap";:root{--color-bg-base: #0a0a0f;--color-bg-surface: rgba(25, 25, 35, .7);--color-bg-surface-hover: rgba(40, 40, 55, .8);--color-text-primary: #f0f0f5;--color-text-secondary: #a0a0b5;--color-primary: #d4af37;--color-primary-glow: rgba(212, 175, 55, .4);--color-accent: #8b5cf6;--color-border: rgba(255, 255, 255, .1);--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{margin:0;font-family:var(--font-family-base);background-color:var(--color-bg-base);color:var(--color-text-primary);background-image:radial-gradient(circle at 15% 50%,rgba(139,92,246,.15),transparent 25%),radial-gradient(circle at 85% 30%,rgba(212,175,55,.1),transparent 25%);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:#f3d473;text-shadow:0 0 8px var(--color-primary-glow)}button{background:linear-gradient(135deg,#ffffff0d,#fff0);border:1px solid var(--color-border);color:var(--color-text-primary);padding:10px 20px;border-radius:var(--radius-md);font-family:var(--font-family-base);font-size:1rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;overflow:hidden}button:before{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,.1),transparent);transform:skew(-20deg);transition:all .5s ease}button:hover:before{left:150%}button:hover{border-color:var(--color-primary);box-shadow:0 0 15px var(--color-primary-glow);transform:translateY(-2px)}.layout{display:flex;flex-direction:column;min-height:100vh}.navbar{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-xl);background:var(--color-bg-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100}.brand-icon{color:var(--color-primary);font-size:1.2rem;margin-right:var(--spacing-sm);filter:drop-shadow(0 0 5px var(--color-primary-glow))}.nav-brand{font-size:1.2rem;font-weight:600;display:flex;align-items:center;letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(90deg,#fff,var(--color-text-secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.main-content{flex:1;padding:var(--spacing-xl);max-width:1200px;margin:0 auto;width:100%}.hero{text-align:center;margin-bottom:4rem;padding:4rem 0;animation:fade-in-up .8s ease-out forwards}.title{font-size:4rem;margin-bottom:var(--spacing-md);background:linear-gradient(135deg,#fff 0%,var(--color-primary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}.action-group{display:flex;gap:var(--spacing-md);justify-content:center;align-items:center}.secondary-action{background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary)}.secondary-action:hover{border-color:#fff;color:#fff;background:#ffffff0d;box-shadow:0 0 10px #ffffff1a}.secondary-action:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.subtitle{font-size:1.2rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto var(--spacing-xl);line-height:1.6}.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-xl)}.element-badge,.path-badge{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;padding:4px 8px;border-radius:var(--radius-sm);background:#0000004d;font-weight:600}.element-lightning{color:#d97afe;border:1px solid rgba(217,122,254,.3)}.element-imaginary{color:#f4d258;border:1px solid rgba(244,210,88,.3)}.element-fire{color:#f84f36;border:1px solid rgba(248,79,54,.3)}.element-ice{color:#47c7fd;border:1px solid rgba(71,199,253,.3)}.element-quantum{color:#7864aa;border:1px solid rgba(120,100,170,.4)}.element-wind{color:#5bc89f;border:1px solid rgba(91,200,159,.3)}.element-physical{color:#bcbcbc;border:1px solid rgba(188,188,188,.3)}.empty-state{grid-column:1 / -1;text-align:center;padding:4rem;background:#ffffff05;border:1px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-secondary);font-size:1.1rem}.confirm-checkbox{display:flex;align-items:center;gap:var(--spacing-sm);background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:10px 16px;border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:inherit;font-size:.95rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);width:100%;justify-content:center}.confirm-checkbox:hover{background:#ffffff1a}.confirm-checkbox.checked{background:#d4af371a;border-color:var(--color-primary);color:var(--color-primary);box-shadow:0 0 10px #d4af3733}.confirm-checkbox.confirming{background:#ff6b6b1a;border-color:#ff6b6b;color:#ff6b6b;animation:pulse-warn 1s infinite alternate}.checkbox-box{width:18px;height:18px;border:1px solid currentColor;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.8rem}@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);overflow:hidden;transition:all var(--transition-normal);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;animation:fade-in-up .5s ease-out backwards}.character-card:nth-child(1){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{transform:translateY(-5px) scale(1.02);border-color:var(--color-primary);box-shadow:0 10px 30px #00000080,0 0 15px var(--color-primary-glow)}.card-header{height:250px;position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:var(--spacing-md);border-bottom:1px solid rgba(255,255,255,.05);background:linear-gradient(to bottom,rgba(255,255,255,.1),transparent);overflow:hidden}.character-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;transition:transform var(--transition-normal);opacity:.9}.character-card:hover .character-image{transform:scale(1.05);opacity:1}.card-header-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 40%,rgba(20,20,30,.9) 100%);z-index:1}.card-header>*:not(.character-image):not(.card-header-overlay){position:relative;z-index:2}.card-body{padding:var(--spacing-lg) var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md)}.character-name{font-size:1.5rem;margin-bottom:0;color:#fff}.progress-section{display:flex;flex-direction:column;gap:var(--spacing-sm);background:#00000026;padding:var(--spacing-md);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.03)}.section-header{font-size:.85rem;color:var(--color-text-secondary);display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:4px}.section-value{color:#fff}.level-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#ffffff1a;border-radius:2px;outline:none;margin:8px 0}.level-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:0 0 10px var(--color-primary-glow);transition:transform var(--transition-fast)}.level-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.level-bar{height:4px;background:#ffffff0d;border-radius:2px;overflow:hidden;margin-top:-12px;pointer-events:none}.level-progress{height:100%;background:linear-gradient(90deg,var(--color-primary),#fff);border-radius:2px;box-shadow:0 0 10px var(--color-primary-glow)}.relics-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--spacing-sm)}.relic-slot{aspect-ratio:1;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.relic-icon{font-size:.8rem;color:#fff3;transition:all var(--transition-fast)}.relic-slot:hover{background:#ffffff1a}.relic-slot.active{background:#d4af371a;border-color:var(--color-primary);box-shadow:0 0 8px var(--color-primary-glow) inset}.relic-slot.active .relic-icon{color:var(--color-primary);filter:drop-shadow(0 0 2px var(--color-primary-glow))}.remove-btn{background:transparent;border:none;color:var(--color-text-secondary);font-size:1rem;padding:0 4px;min-width:unset;border-radius:50%}.remove-btn:hover{color:#ff4d4f;transform:none;box-shadow:none;border-color:transparent}.remove-btn:before{display:none}.relic-set-icon{width:80%;height:80%;object-fit:contain;opacity:.9;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fade-in .2s ease-out forwards}.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;display:flex;flex-direction:column;box-shadow:0 20px 50px #00000080,0 0 20px var(--color-primary-glow);overflow:hidden;animation:slide-up .3s ease-out forwards}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.modal-header h2{font-size:1.5rem;color:#fff}.close-btn{background:transparent;border:none;color:var(--color-text-secondary);font-size:1.5rem;padding:0;min-width:unset}.close-btn:hover{color:#fff;transform:none;box-shadow:none;border-color:transparent}.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)}}.relic-editor-body{padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg);overflow-y:auto;max-height:50vh}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-group label,.substats-section label{font-size:.9rem;color:var(--color-text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.relic-editor-body select,.relic-editor-body input{padding:10px 14px;background:#ffffff0d;border:1px solid var(--color-border);border-radius:var(--radius-md);color:#fff;font-family:var(--font-family-base);font-size:1rem;transition:all var(--transition-fast)}.relic-editor-body select:focus,.relic-editor-body input:focus{outline:none;border-color:var(--color-primary);background:#ffffff14}.relic-editor-body select option{background:var(--color-bg-base);color:#fff}.substats-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.substat-row{display:grid;grid-template-columns:2fr 1fr auto;gap:var(--spacing-sm);align-items:center}.remove-substat{background:#ff4d4f1a;color:#ff4d4f;border:1px solid rgba(255,77,79,.3);width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);padding:0;min-width:unset}.remove-substat:hover{background:#ff4d4f;color:#fff}.remove-substat:before{display:none}.add-substat-btn{background:transparent;border:1px dashed var(--color-border);color:var(--color-text-secondary);padding:10px;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.add-substat-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:#d4af370d}.modal-footer{display:flex;justify-content:flex-end;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border);background:#0003}.secondary-action.danger{border-color:#ff4d4f80;color:#ff4d4f}.secondary-action.danger:hover{background:#ff4d4f;color:#fff;border-color:#ff4d4f;box-shadow:0 0 10px #ff4d4f4d}.modal-search{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid rgba(255,255,255,.05)}.modal-search input{width:100%;padding:12px 16px;background:#ffffff0d;border:1px solid var(--color-border);border-radius:var(--radius-md);color:#fff;font-size:1rem;font-family:var(--font-family-base);transition:border-color var(--transition-fast)}.modal-search input:focus{outline:none;border-color:var(--color-primary);background:#ffffff14}.character-list{flex:1;overflow-y:auto;padding:var(--spacing-sm)}.character-list-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);margin:var(--spacing-sm) 0;border-radius:var(--radius-md);cursor:pointer;background:transparent;transition:all var(--transition-fast);border:1px solid transparent}.character-list-item:hover{background:#ffffff0d;border-color:var(--color-border)}.char-list-info{display:flex;align-items:center;gap:var(--spacing-md)}.char-list-img-wrapper{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid var(--color-border);background:#ffffff0d;flex-shrink:0}.char-list-img{width:100%;height:100%;object-fit:cover}.char-list-details{display:flex;flex-direction:column;gap:4px}.char-list-name{color:#fff;font-weight:500;font-size:1.1rem}.char-list-tags{display:flex;gap:var(--spacing-sm)}.add-btn{background:#ffffff1a;border-radius:50%;width:32px;height:32px;padding:0;display:flex;justify-content:center;align-items:center;font-size:1.2rem;min-width:unset}.add-btn:before{display:none}.character-list-item:hover .add-btn{background:var(--color-primary);color:var(--color-bg-base);border-color:transparent;box-shadow:0 0 10px var(--color-primary-glow)}.no-results{text-align:center;padding:2rem;color:var(--color-text-secondary)}