:root{--color-bg-base:#0e1014;--color-bg-surface:#1a1e26b3;--color-bg-surface-hover:#262c38cc;--color-bg-elevated:#1e232de6;--color-text-primary:#e9e4d8;--color-text-secondary:#b3ad9e;--color-text-dim:#9a9484;--color-text-on-primary:#000;--color-temper-rust:#8a6050;--color-temper-amber:#c88040;--color-temper-gold:#d4af37;--color-temper-verdigris:#40c8a0;--color-brand-primary:#d4af37;--color-brand-primary-glow:#d4af3766;--color-brand-primary-muted:#d4af3726;--color-brand-accent:#8b5cf6;--color-ui-border:#ffffff1a;--color-ui-border-strong:#fff3;--color-ui-danger:#ff4d4f;--color-ui-danger-bg:#ff4d4f1a;--color-ui-warning:#ff6b6b;--color-ui-interactive-hover:#ffffff0d;--color-input-surface:#ffffff0d;--color-input-surface-focus:#ffffff14;--color-input-surface-subtle:#ffffff08;--color-focus-glow:#d4af3733;--color-toast-error-bg:#dc2626f2;--color-toast-error-border:#f8717180;--color-toast-warning-bg:#d97706f2;--color-toast-warning-border:#fbbf2480;--color-toast-success-bg:#16a34af2;--color-toast-success-border:#4ade8080;--color-toast-info-bg:#1e3a8af2;--color-toast-info-border:#60a5fa80;--color-hsr-element-lightning:#d97afe;--color-hsr-element-imaginary:#f4d258;--color-hsr-element-fire:#f84f36;--color-hsr-element-ice:#47c7fd;--color-hsr-element-quantum:#7864aa;--color-hsr-element-wind:#5bc89f;--color-hsr-element-physical:#bcbcbc;--color-hsr-element-thunder:#d97afe;--color-hsr-path-destruction:#ff9090;--color-hsr-path-the-hunt:#f5d68a;--color-hsr-path-erudition:#7fe4d0;--color-hsr-path-harmony:#f0a8d8;--color-hsr-path-nihility:#c9a8f8;--color-hsr-path-preservation:#8ab8f5;--color-hsr-path-abundance:#90e09a;--color-hsr-path-remembrance:#90e8f8;--color-hsr-path-elation:#ffc875;--color-score-grade-s:#40c8a0;--color-score-grade-a:#d4af37;--color-score-grade-b:#c88040;--color-score-grade-c:#b48c64;--color-score-grade-d:#8a6050;--color-n2e-esper-anima:#f5b080;--color-n2e-esper-chaos:#c9a8f8;--color-n2e-esper-cosmos:#90d0f0;--color-n2e-esper-incantation:#f5d68a;--color-n2e-esper-lakshana:#90e09a;--color-n2e-esper-psyche:#f0a0b8;--color-n2e-arc-gas:#80d8b0;--color-n2e-arc-liquid:#80b0e8;--color-n2e-arc-plasma:#f09070;--color-n2e-arc-solid:#d0c8a0;--color-n2e-arc-synthesis:#d0a8e0;--color-n2e-rarity-s:#d4af37;--color-n2e-rarity-a:#c9a8f8;--color-n2e-rarity-b:#90d0f0;--color-ae-element-physical:#bcbcbc;--color-ae-element-cryo:#47c7fd;--color-ae-element-electric:#d97afe;--color-ae-element-heat:#f84f36;--color-ae-element-nature:#5bc89f;--color-ae-class-caster:#c9a8f8;--color-ae-class-defender:#8ab8f5;--color-ae-class-guard:#ff9090;--color-ae-class-striker:#f5d68a;--color-ae-class-supporter:#90e09a;--color-ae-class-vanguard:#f5b080;--color-ae-weapon-sword:#f0a8d8;--color-ae-weapon-greatsword:#f5b080;--color-ae-weapon-polearm:#90d0f0;--color-ae-weapon-handcannon:#f5d68a;--color-ae-weapon-arts-unit:#c9a8f8;--color-p5x-element-physical:#bcbcbc;--color-p5x-element-gun:#f5b080;--color-p5x-element-fire:#f84f36;--color-p5x-element-ice:#47c7fd;--color-p5x-element-electric:#f5d68a;--color-p5x-element-wind:#5bc89f;--color-p5x-element-psychokinesis:#f0a0b8;--color-p5x-element-nuclear:#7fe4d0;--color-p5x-element-bless:#f5f0c0;--color-p5x-element-curse:#c9a8f8;--color-p5x-element-almighty:#d0c8a0;--color-p5x-element-none:#9a9a9a;--color-p5x-role-single-target:#ff9090;--color-p5x-role-multi-target:#f5b080;--color-p5x-role-buffer:#90e09a;--color-p5x-role-debuffer:#c9a8f8;--color-p5x-role-healer:#90d0f0;--color-p5x-role-tank:#8ab8f5;--color-p5x-role-navigator:#f0a8d8;--color-p5x-role-virtuoso:#f5d68a;--color-p5x-weapon-rarity2:#8be28b;--color-p5x-weapon-rarity3:#7fbfff;--color-p5x-weapon-rarity4:#c9a8f8;--color-p5x-weapon-rarity5:gold;--color-r1999-afflatus-plant:#90e09a;--color-r1999-afflatus-star:#f5d68a;--color-r1999-afflatus-beast:#f5b080;--color-r1999-afflatus-mineral:#a8c8f0;--color-r1999-afflatus-intellect:#c9a8f8;--color-r1999-afflatus-spirit:#90d0f0;--color-r1999-damage-mental:#c9a8f8;--color-r1999-damage-reality:#f5d68a;--color-r1999-accent:#deb887;--color-tier-splus:#ff6b35;--color-tier-s:gold;--color-tier-a:#7fbfff;--color-tier-b:#8be28b;--typography-font-family-display:"Bahnschrift", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;--typography-font-family-base:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;--typography-font-family-data:"Cascadia Mono", Consolas, "SF Mono", "Menlo", monospace;--typography-font-size-xs:.7rem;--typography-font-size-sm:.8rem;--typography-font-size-base:.9rem;--typography-font-size-md:1rem;--typography-font-size-lg:1.1rem;--typography-font-size-xl:1.2rem;--typography-font-size-xl2:1.25rem;--typography-font-size-2xl:1.5rem;--typography-font-size-3xl:1.8rem;--typography-font-size-4xl:2.2rem;--typography-font-size-5xl:3rem;--typography-font-size-display:4rem;--typography-font-weight-normal:400;--typography-font-weight-medium:500;--typography-font-weight-semibold:600;--typography-font-weight-bold:700;--typography-font-weight-extrabold:800;--typography-line-height-tight:1.3;--typography-line-height-base:1.4;--typography-line-height-relaxed:1.5;--typography-line-height-loose:1.6;--spacing-1:2px;--spacing-2:4px;--spacing-3:6px;--spacing-5:10px;--spacing-6:12px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--spacing-3xl:64px;--border-radius-xs:2px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-badge:10px;--border-radius-lg:16px;--border-radius-xl:20px;--border-radius-full:9999px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 12px #0000004d;--shadow-lg:0 10px 30px #00000080;--shadow-xl:0 20px 50px #00000080;--shadow-glow-primary:0 0 15px #d4af3766;--shadow-glow-sm:0 0 8px #d4af3766;--shadow-inset-glow:0 0 8px #d4af3766 inset;--shadow-slider-track-inset:0 0 10px #00000080 inset;--shadow-modal:0 20px 50px #00000080, 0 0 20px #d4af3766;--shadow-card-hover:0 10px 30px #00000080, 0 0 15px #d4af3766;--z-index-base:0;--z-index-card:1;--z-index-overlay:2;--z-index-controls:3;--z-index-sticky:100;--z-index-modal:1000;--z-index-toast:9999;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s ease;--duration-instant:.01ms;--duration-fast:.15s;--duration-normal:.3s;--duration-slow:.5s;--duration-pulse:1.5s}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-in-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toast-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes saving-toast-pulse{0%,to{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes spinner-bounce{0%,80%,to{opacity:.3;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}@keyframes pulse-warn{0%{box-shadow:0 0 0 color-mix(in srgb, var(--color-ui-warning) 0%, transparent)}to{box-shadow:0 0 10px color-mix(in srgb, var(--color-ui-warning) 40%, transparent)}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:var(--duration-instant)!important;transition-duration:var(--duration-instant)!important;animation-iteration-count:1!important}}.game-card{background:var(--color-bg-surface);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-lg);transition:border-color var(--transition-normal), box-shadow var(--transition-normal);-webkit-backdrop-filter:blur(8px);flex-direction:column;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:nth-child(3){animation-delay:.3s}.game-card:nth-child(4){animation-delay:.4s}.game-card:nth-child(n+5){animation-delay:.5s}.game-card:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-card-hover)}.game-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;transform:translateZ(0)}.game-card-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}.game-card:hover .game-card-image{opacity:1;transform:scale(1.05)}.game-card-overlay{z-index:1;background:linear-gradient(#0006 0%,#0000 40%,#14141ee6 100%);width:100%;height:100%;position:absolute;top:0;left:0}.game-card-controls{z-index:2;padding:var(--spacing-sm);pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0}.game-card-controls>*{pointer-events:auto}.game-card-controls-top,.game-card-controls-bottom{justify-content:space-between;align-items:flex-end;display:flex}.game-card-badges{align-items:flex-start;gap:var(--spacing-2);flex-direction:column;display:flex}.game-card-header-actions{align-items:center;gap:var(--spacing-sm);display:flex}.game-badge{border-radius:var(--border-radius-badge);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-bold);text-transform:uppercase;letter-spacing:.04em;-webkit-backdrop-filter:blur(8px);line-height:var(--typography-line-height-tight);white-space:nowrap;border:1px solid;padding:3px 8px}.game-card-body{padding:var(--spacing-md) var(--spacing-md) 0;flex-direction:column;display:flex}.game-card-name{font-family:var(--typography-font-family-display);font-size:var(--typography-font-size-2xl);color:var(--color-text-primary);margin-bottom:0}.game-card-body>.game-card-name{margin-bottom:var(--spacing-3)}.game-card-static-summary{max-height:var(--game-card-summary-max-height,200px);transition:opacity .2s,max-height .3s;overflow:hidden}.game-card-static-summary-inner{gap:var(--spacing-3);padding-bottom:var(--spacing-md);flex-direction:column;display:flex}.game-card-body.is-editing .game-card-static-summary{opacity:0;pointer-events:none;max-height:0}.game-card-static-stats{align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.game-card.reserve-summary-rows .game-card-static-stats{min-height:calc(2 * (.75rem * var(--typography-line-height-tight) + 4px + 2px) + var(--spacing-sm));align-content:flex-start}.game-card-static-line{font-size:var(--typography-font-size-sm);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.game-card-edit-body{max-height:0;transition:max-height .4s;overflow:hidden}.game-card-body.is-editing .game-card-edit-body{max-height:var(--game-card-edit-max-height,1200px)}.game-card-edit-body-inner{gap:var(--spacing-md);padding-bottom:var(--spacing-lg);flex-direction:column;display:flex}.favorite-btn{border:1px solid var(--color-ui-border);border-radius:var(--border-radius-full);width:32px;height:32px;color:var(--color-text-primary);font-size:var(--typography-font-size-xl);z-index:10;cursor:pointer;transition:color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), text-shadow var(--transition-fast), transform var(--transition-fast);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;justify-content:center;align-items:center;padding:0;line-height:1;display:flex}.favorite-btn:hover{background:#000000b3;transform:scale(1.1);box-shadow:0 0 10px #00000080}.favorite-btn.active{color:var(--color-brand-primary);border-color:var(--color-brand-primary);background:var(--color-brand-primary-muted);text-shadow:0 0 8px var(--color-brand-primary-glow);box-shadow:var(--shadow-inset-glow)}.remove-btn{color:var(--color-text-secondary);font-size:var(--typography-font-size-md);border-radius:var(--border-radius-full);background:0 0;border:none;justify-content:center;align-items:center;width:28px;height:28px;padding:0;line-height:1;display:flex}.remove-btn:hover{color:var(--color-ui-danger)}.edit-toggle-btn{border-radius:var(--border-radius-full);width:28px;height:28px;color:var(--color-text-secondary);font-size:var(--typography-font-size-base);cursor:pointer;transition:color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;border:1px solid #ffffff26;flex-shrink:0;justify-content:center;align-items:center;padding:0;line-height:1;display:flex}.edit-toggle-btn:hover{border-color:var(--color-brand-primary);color:var(--color-brand-primary)}.edit-toggle-btn.active{border-color:var(--color-brand-primary);color:var(--color-brand-primary);background:var(--color-brand-primary-muted)}.progress-section{gap:var(--spacing-sm);padding:var(--spacing-md);border-radius:var(--border-radius-md);background:#00000026;border:1px solid #ffffff08;flex-direction:column;display:flex}.section-header{font-family:var(--typography-font-family-display);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:var(--typography-font-weight-semibold);margin-bottom:var(--spacing-2);justify-content:space-between;display:flex}.section-value{color:var(--color-text-primary)}.section-sublabel{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:var(--typography-font-weight-semibold);white-space:nowrap;flex-shrink:0}.equip-slot-grid{gap:var(--spacing-sm);grid-template-columns:repeat(6,1fr);display:grid}.equip-slot-cell{aspect-ratio:1;border-radius:var(--border-radius-sm);cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);background:#ffffff08;border:1px solid #ffffff1a;justify-content:center;align-items:center;display:flex}.equip-slot-cell:hover{background:#ffffff1a}.equip-slot-cell.active{background:color-mix(in srgb, var(--color-brand-primary) 10%, transparent);border-color:var(--color-brand-primary);box-shadow:var(--shadow-inset-glow)}.equip-slot-icon{font-size:var(--typography-font-size-sm);color:#fff3;transition:color var(--transition-fast), filter var(--transition-fast)}.equip-slot-cell.active .equip-slot-icon{color:var(--color-brand-primary);filter:drop-shadow(0 0 2px var(--color-brand-primary-glow))}.equip-slot-img{object-fit:contain;opacity:.9;filter:drop-shadow(0 2px 4px #00000080);width:80%;height:80%}.build-prefs-display{margin-top:-4px}.prefs-display-grid{gap:var(--spacing-3);padding:var(--spacing-sm);border-radius:var(--border-radius-sm);background:#0000001a;border:1px solid #ffffff05;flex-direction:column;display:flex}.pref-display-row{align-items:flex-start;gap:var(--spacing-sm);display:flex}.pref-display-label{color:var(--color-text-dim);text-transform:uppercase;min-width:48px;font-size:.75rem;font-weight:var(--typography-font-weight-semibold);margin-top:var(--spacing-1)}.pref-display-chain{align-items:center;gap:var(--spacing-2);flex-wrap:wrap;display:flex}.pref-stat-badge{padding:var(--spacing-1) var(--spacing-3);border-radius:var(--border-radius-sm);color:var(--color-text-primary);background:#ffffff0f;border:1px solid #ffffff0d;font-size:.75rem}.pref-operator-badge{color:var(--color-brand-primary);font-size:.75rem;font-weight:var(--typography-font-weight-bold);opacity:.8}.build-comments-row{margin-top:var(--spacing-2);padding-top:var(--spacing-sm);border-top:1px dashed #ffffff1a}.pref-comments-text{color:var(--color-text-secondary);font-size:.75rem;line-height:var(--typography-line-height-relaxed);overflow-wrap:break-word;opacity:.8;width:100%;font-style:italic}.level-slider{appearance:none;width:100%;height:4px;margin:var(--spacing-sm) 0;border-radius:2px;outline:none;box-shadow:inset 0 0 10px #00000080}.level-slider::-webkit-slider-thumb{appearance:none;border-radius:var(--border-radius-full);background:var(--slider-fill-color,var(--color-brand-primary));cursor:pointer;width:16px;height:16px;box-shadow:0 0 10px var(--slider-fill-glow,var(--color-brand-primary-glow));transition:transform var(--transition-fast)}.level-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.level-slider::-moz-range-thumb{border-radius:var(--border-radius-full);background:var(--slider-fill-color,var(--color-brand-primary));cursor:pointer;width:16px;height:16px;box-shadow:0 0 10px var(--slider-fill-glow,var(--color-brand-primary-glow));transition:transform var(--transition-fast);border:none}.level-slider::-moz-range-thumb:hover{transform:scale(1.2)}.level-slider:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:4px}.level-slider-row{align-items:center;gap:var(--spacing-md);display:flex}.level-slider-row .level-slider{flex:1;margin:0}.level-value{font-family:var(--typography-font-family-data);font-variant-numeric:tabular-nums;font-size:var(--typography-font-size-md);font-weight:var(--typography-font-weight-bold);color:var(--color-text-primary);text-align:right;min-width:2ch}.game-card-image.loading{opacity:0}.game-card-image.loaded{opacity:.9;transition:opacity .3s ease-in}.game-card-image-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.game-card-image-spinner{gap:var(--spacing-3);z-index:1;opacity:.6;align-items:center;display:flex;position:absolute}.spinner-dot{border-radius:var(--border-radius-full);background:var(--color-brand-primary);width:6px;height:6px;animation:1.2s ease-in-out infinite spinner-bounce}.spinner-dot:nth-child(2){animation-delay:.15s}.spinner-dot:nth-child(3){animation-delay:.3s}.stat-chip{font-family:var(--typography-font-family-data);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-sm);letter-spacing:.03em;line-height:var(--typography-line-height-tight);background:#ffffff0d;padding:2px 8px}.toggle-btn{padding:var(--spacing-3);font-size:var(--typography-font-size-sm);font-weight:var(--typography-font-weight-semibold);border-radius:var(--border-radius-sm);border:1px solid var(--color-ui-border);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);text-align:center;background:#ffffff08;flex:1}.toggle-btn:hover{border-color:var(--color-brand-primary);color:var(--color-brand-primary)}.toggle-btn.active{background:var(--color-brand-primary-muted);border-color:var(--color-brand-primary);color:var(--color-brand-primary);box-shadow:var(--shadow-inset-glow)}.toggle-btn.compact{padding:5px 4px;font-size:.78rem}.segmented-buttons{gap:var(--spacing-3);display:flex}.game-select{width:100%;padding:var(--spacing-3) var(--spacing-5);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-sm);background-color:var(--color-input-surface);color:var(--color-text-primary);transition:border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);box-sizing:border-box;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a0a0b5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;outline:none;padding-right:30px;font-size:.85rem}.game-select-md{padding:var(--spacing-5) var(--spacing-6);font-size:var(--typography-font-size-md);border-radius:var(--border-radius-md);padding-right:30px}.game-select option{background:var(--color-bg-surface);color:var(--color-text-primary)}.game-select:focus{border-color:var(--color-brand-primary);background-color:var(--color-input-surface-focus);box-shadow:0 0 12px var(--color-focus-glow)}.game-select:disabled{opacity:.5;cursor:not-allowed}.substats-section{gap:var(--spacing-md);flex-direction:column;display:flex}.substats-section label{font-size:var(--typography-font-size-base);color:var(--color-text-secondary);font-weight:var(--typography-font-weight-medium);text-transform:uppercase;letter-spacing:.05em}.substat-row{gap:var(--spacing-sm);align-items:center;display:grid}.substat-row.stat-value{grid-template-columns:2fr 1fr auto}.substat-row.stat-only{grid-template-columns:1fr auto}.substat-value-input{background:var(--color-input-surface);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-md);color:var(--color-text-primary);font-family:var(--typography-font-family-base);font-size:var(--typography-font-size-md);transition:border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);box-sizing:border-box;width:100%;padding:10px 14px}.substat-value-input:focus{border-color:var(--color-brand-primary);background:var(--color-input-surface-focus);box-shadow:0 0 12px var(--color-focus-glow);outline:none}.remove-substat{background:var(--color-ui-danger-bg);color:var(--color-ui-danger);border:1px solid color-mix(in srgb, var(--color-ui-danger) 30%, transparent);border-radius:var(--border-radius-md);cursor:pointer;width:38px;height:38px;transition:color var(--transition-fast), background var(--transition-fast);justify-content:center;align-items:center;padding:0;display:flex}.remove-substat:hover{background:var(--color-ui-danger);color:var(--color-text-primary)}.add-substat-btn{border:1px dashed var(--color-ui-border);color:var(--color-text-secondary);padding:var(--spacing-5);border-radius:var(--border-radius-md);cursor:pointer;transition:color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);background:0 0}.add-substat-btn:hover{border-color:var(--color-brand-primary);color:var(--color-brand-primary);background:color-mix(in srgb, var(--color-brand-primary) 5%, transparent)}@media (width<=600px){.substat-row.stat-value{grid-template-columns:1fr 1fr auto}}.readonly-stat{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-sm);background:var(--color-input-surface);color:var(--color-text-secondary);font-size:var(--typography-font-size-sm);display:inline-block}.equip-slot-card{gap:var(--spacing-md);padding:var(--spacing-md);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-md);background:var(--color-input-surface);flex-direction:column;display:flex}.equip-slot-header{font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-bold);color:var(--color-text-primary);text-transform:uppercase;letter-spacing:.05em}.is-gated{opacity:.4}.readonly-stat-row{gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.filter-row{gap:var(--spacing-xs);display:flex}.filter-chip{height:32px;padding:0 var(--spacing-sm);border-radius:var(--border-radius-full);border:1px solid var(--color-ui-border);color:var(--color-text-secondary);font-size:.75rem;font-weight:var(--typography-font-weight-bold);white-space:nowrap;cursor:pointer;transition:color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);background:#ffffff0d;flex-shrink:0}.filter-chip:hover{border-color:var(--filter-chip-accent);color:var(--filter-chip-accent);box-shadow:0 0 8px color-mix(in srgb, var(--filter-chip-accent) 30%, transparent)}.filter-chip.active{border-color:var(--filter-chip-accent);color:var(--filter-chip-accent);background:color-mix(in srgb, var(--filter-chip-accent) 15%, transparent);box-shadow:0 0 8px color-mix(in srgb, var(--filter-chip-accent) 30%, transparent) inset}.parties-tab{padding-bottom:var(--spacing-xl)}.parties-header{margin-bottom:var(--spacing-xl);justify-content:space-between;align-items:center;display:flex}.parties-header h2{font-size:var(--typography-font-size-3xl);color:var(--color-text-primary);margin:0}.parties-grid{gap:var(--spacing-xl);grid-template-columns:repeat(auto-fill,minmax(360px,1fr));display:grid}.party-card{background:var(--color-bg-surface);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);gap:var(--spacing-md);transition:transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;display:flex;position:relative;overflow:hidden}.party-card:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.party-tier-banner{font-size:var(--typography-font-size-sm);font-weight:var(--typography-font-weight-extrabold);letter-spacing:.05em;border-bottom-left-radius:var(--border-radius-md);clip-path:polygon(8px 0%,100% 0%,100% 100%,0% 100%);padding:3px 12px 3px 16px;position:absolute;top:0;right:0}.tier-banner-Splus{color:var(--color-text-primary);background:var(--color-tier-splus)}.tier-banner-S{color:var(--color-text-on-primary);background:var(--color-tier-s)}.tier-banner-A{color:var(--color-text-primary);background:var(--color-tier-a)}.tier-banner-B{color:var(--color-text-primary);background:var(--color-tier-b)}.party-card-header{justify-content:space-between;align-items:center;display:flex}.party-name{font-size:var(--typography-font-size-xl2);color:var(--color-text-primary);margin:0}.party-actions{gap:var(--spacing-xs);display:flex}.icon-btn{font-size:var(--typography-font-size-lg);color:var(--color-text-dim);cursor:pointer;padding:var(--spacing-2);border-radius:var(--border-radius-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;line-height:1}.icon-btn:hover{color:var(--color-text-primary);background:#ffffff0d}.party-favorite-btn.active{color:var(--color-tier-s)}.party-favorite-btn:hover{color:var(--color-tier-s);background:color-mix(in srgb, var(--color-tier-s) 10%, transparent)}.edit-btn:hover{color:var(--color-tier-a);background:color-mix(in srgb, var(--color-tier-a) 10%, transparent)}.delete-btn:hover{color:var(--color-ui-danger);background:var(--color-ui-danger-bg)}.party-notes{font-size:var(--typography-font-size-base);color:var(--color-text-secondary);line-height:var(--typography-line-height-base);line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-style:italic;display:-webkit-box;overflow:hidden}.party-members-row{gap:var(--spacing-sm);margin-top:var(--spacing-sm);grid-template-columns:repeat(4,1fr);display:grid}.party-members-row .slot-group-panel{border:1px solid color-mix(in srgb, var(--color-ui-border) 40%, transparent);border-radius:var(--border-radius-md);padding:var(--spacing-sm);gap:var(--spacing-3);flex-direction:column;display:flex}.party-members-row .slot-group-label{font-size:var(--typography-font-size-xs);font-variant:small-caps;letter-spacing:.05em;color:var(--color-text-dim)}.party-members-row .slot-group-row{gap:var(--spacing-sm);grid-template-columns:repeat(4,1fr);display:grid}.slot-item{align-items:center;gap:var(--spacing-3);flex-direction:column;display:flex}.slot-avatar{aspect-ratio:1;border-radius:var(--border-radius-md);border:1px solid var(--color-ui-border);background:#ffffff08;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.slot-avatar.empty{border-style:dashed}.char-img{object-fit:cover;width:100%;height:100%}.char-name-small{font-size:var(--typography-font-size-xs);color:var(--color-text-secondary);text-align:center;white-space:nowrap;text-overflow:ellipsis;width:100%;overflow:hidden}.empty-plus{font-size:var(--typography-font-size-2xl);color:var(--color-text-dim);opacity:.5}@media (width<=480px){.parties-grid{grid-template-columns:1fr}}body{font-family:var(--typography-font-family-base);background-color:var(--color-bg-base);color:var(--color-text-primary);background-image:radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--color-brand-accent) 15%, transparent), transparent 25%), radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--color-brand-primary) 10%, transparent), transparent 25%);-webkit-font-smoothing:antialiased;background-attachment:fixed;min-height:100vh;margin:0}*{box-sizing:border-box}:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px}h1,h2,h3,h4{font-family:var(--typography-font-family-display);letter-spacing:.01em;margin:0;font-weight:600}a{color:var(--color-brand-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-brand-primary);text-shadow:0 0 8px var(--color-brand-primary-glow)}button{font-family:var(--typography-font-family-base);font-size:var(--typography-font-size-md);color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;padding:0}.btn{border:1px solid var(--color-ui-border);padding:var(--spacing-5) var(--spacing-md);border-radius:var(--border-radius-md);font-weight:var(--typography-font-weight-medium);transition:color var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal);-webkit-backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffff0d,#fff0);position:relative;overflow:hidden}.btn:before{content:"";width:50%;height:100%;transition:left var(--transition-slow);background:linear-gradient(90deg,#0000,#ffffff1a,#0000);position:absolute;top:0;left:-100%;transform:skew(-20deg)}.btn:hover:before{left:150%}.btn:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-glow-primary);transform:translateY(-2px)}.selection-card{background:var(--color-bg-surface);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-lg);transition:transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);-webkit-backdrop-filter:blur(8px);text-align:left;flex-direction:column;animation:.5s ease-out backwards fade-in-up;display:flex;overflow:hidden}.selection-card:first-child{animation-delay:.1s}.selection-card:nth-child(2){animation-delay:.2s}.selection-card:nth-child(3){animation-delay:.3s}.selection-card:nth-child(4){animation-delay:.4s}.selection-card:nth-child(n+5){animation-delay:.5s}.selection-card:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-card-hover);transform:translateY(-5px)scale(1.02)}.selection-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}.selection-card-header.bg-honkai-star-rail-sel{background:linear-gradient(135deg,#0a1e2e 0%,#16405a 50%,#0a0a1a 100%)}.selection-card-header.bg-r1999-sel{background:linear-gradient(135deg,#2e230a 0%,#4e3d1b 50%,#0a0a1a 100%)}.selection-card-header.bg-n2e-sel{background:linear-gradient(135deg,#1a0a2e 0%,#2d1b4e 50%,#0a0a1a 100%)}.selection-card-header.bg-ae-sel{background:linear-gradient(135deg,#0a1a2e 0%,#1b2d4e 50%,#0a0a1a 100%)}.selection-card-header.bg-p5x-sel{background:linear-gradient(135deg,#2e0a0a 0%,#4e1b1b 50%,#0a0a1a 100%)}.game-character-image{object-fit:contain;object-position:center bottom;z-index:1;width:100%;height:100%;transition:transform var(--transition-slow);opacity:.9;filter:drop-shadow(0 0 20px #000c);position:absolute;top:0;left:0}.selection-card-header.bg-honkai-star-rail-sel .game-character-image,.selection-card-header.bg-r1999-sel .game-character-image,.selection-card-header.bg-n2e-sel .game-character-image{object-fit:cover;object-position:center}.selection-card-header.bg-p5x-sel .game-character-image{object-fit:cover;object-position:left top}.selection-card:hover .game-character-image{opacity:1;transform:scale(1.08)}.selection-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}.selection-card:hover .selection-card-overlay{opacity:.8}.selection-card-badges{bottom:var(--spacing-sm);right:var(--spacing-md);z-index:3;position:absolute}.requires-login-badge{border:1px solid var(--color-brand-primary);color:var(--color-brand-primary);padding:var(--spacing-2) var(--spacing-5);border-radius:var(--border-radius-xl);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-semibold);box-shadow:var(--shadow-inset-glow);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-transform:uppercase;letter-spacing:.5px;background:#282837cc}.selection-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:var(--color-text-primary);transition:color var(--transition-fast);margin-bottom:0;font-size:1.6rem}.selection-card:hover .game-name{color:var(--color-brand-primary)}.game-tag-badge{color:var(--color-text-secondary);padding:var(--spacing-1) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium);letter-spacing:.05em;border:1px solid var(--color-ui-border);background:#ffffff1a}.game-description{color:var(--color-text-secondary);font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed);margin: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-ui-border);color:var(--color-text-secondary);background:0 0}.secondary-action:hover{border-color:var(--color-text-primary);color:var(--color-text-primary);background:var(--color-ui-interactive-hover);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-brand-primary), #b8960c);border:1px solid var(--color-brand-primary);color:#000;font-weight:600}.primary-action:hover{box-shadow:0 0 20px var(--color-brand-primary-glow);border-color:var(--color-brand-primary);transform:translateY(-2px)}.element-lightning{color:var(--color-hsr-element-lightning)}.element-imaginary{color:var(--color-hsr-element-imaginary)}.element-fire{color:var(--color-hsr-element-fire)}.element-ice{color:var(--color-hsr-element-ice)}.element-quantum{color:var(--color-hsr-element-quantum)}.element-wind{color:var(--color-hsr-element-wind)}.element-physical{color:var(--color-hsr-element-physical)}.element-thunder{color:var(--color-hsr-element-thunder)}.element-badge.element-lightning,.element-badge.element-thunder{background:color-mix(in srgb, var(--color-hsr-element-lightning) 25%, transparent);border-color:color-mix(in srgb, var(--color-hsr-element-lightning) 60%, transparent)}.element-badge.element-imaginary{background:color-mix(in srgb, var(--color-hsr-element-imaginary) 25%, transparent);border-color:color-mix(in srgb, var(--color-hsr-element-imaginary) 60%, transparent)}.element-badge.element-fire{background:color-mix(in srgb, var(--color-hsr-element-fire) 25%, transparent);border-color:color-mix(in srgb, var(--color-hsr-element-fire) 60%, transparent)}.element-badge.element-ice{background:color-mix(in srgb, var(--color-hsr-element-ice) 25%, transparent);border-color:color-mix(in srgb, var(--color-hsr-element-ice) 60%, transparent)}.element-badge.element-quantum{background:color-mix(in srgb, var(--color-hsr-element-quantum) 25%, transparent);border-color:color-mix(in srgb, var(--color-hsr-element-quantum) 60%, transparent)}.element-badge.element-wind{background:color-mix(in srgb, var(--color-hsr-element-wind) 25%, transparent);border-color:color-mix(in srgb, var(--color-hsr-element-wind) 60%, transparent)}.element-badge.element-physical{background:color-mix(in srgb, var(--color-hsr-element-physical) 25%, transparent);border-color:color-mix(in srgb, var(--color-hsr-element-physical) 60%, transparent)}@media (width<=768px){.main-content{padding:var(--spacing-md)}}.game-switcher{margin-right:var(--spacing-md);position:relative}.switcher-trigger{border:1px solid var(--color-ui-border);border-radius:var(--border-radius-md);padding:var(--spacing-3) var(--spacing-5);align-items:center;gap:var(--spacing-sm);cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);color:var(--color-text-primary);background:#ffffff0d;display:flex}.switcher-trigger:hover,.switcher-trigger.active{border-color:var(--color-brand-primary);box-shadow:0 0 10px var(--color-focus-glow);background:#ffffff1a}.current-game-icon-container{border-radius:var(--border-radius-sm);border:1px solid var(--color-ui-border);background:#ffffff0d;justify-content:center;align-items:center;width:24px;height:24px;display:flex;overflow:hidden}.current-game-icon-img{object-fit:cover;width:100%;height:100%}.chevron{font-size:var(--typography-font-size-sm);opacity:.5;transition:transform var(--transition-fast)}.switcher-trigger.active .chevron{transform:rotate(180deg)}.switcher-dropdown{top:calc(100% + var(--spacing-5));background:var(--color-bg-elevated);border:1px solid var(--color-ui-border);border-radius:var(--border-radius-badge);width:220px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(16px);z-index:var(--z-index-modal);animation:slide-in-down var(--duration-fast) ease-out;position:absolute;left:0;overflow:hidden}.dropdown-header{padding:var(--spacing-6) var(--spacing-md);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);border-bottom:1px solid var(--color-ui-border);background:#ffffff05}.dropdown-list{padding:var(--spacing-sm)}.dropdown-item{align-items:center;gap:var(--spacing-6);padding:var(--spacing-5) var(--spacing-6);color:var(--color-text-primary);border-radius:var(--border-radius-md);transition:background var(--transition-fast), transform var(--transition-fast);text-decoration:none;display:flex;position:relative}.dropdown-item:hover{background:#ffffff14;transform:translate(4px)}.dropdown-item.active{background:color-mix(in srgb, var(--color-brand-primary) 10%, transparent)}.game-icon-container{border-radius:var(--border-radius-sm);border:1px solid var(--color-ui-border);background:#ffffff0d;justify-content:center;align-items:center;width:32px;height:32px;display:flex;overflow:hidden}.game-icon-img{object-fit:cover;width:100%;height:100%}.switcher-game-name{font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-medium)}.active-indicator{font-size:var(--typography-font-size-xs);color:var(--color-brand-primary);margin-left:auto}.dropdown-footer{padding:var(--spacing-sm);border-top:1px solid var(--color-ui-border);background:#ffffff05}.back-link{text-align:center;padding:var(--spacing-sm);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary);border-radius:var(--border-radius-md);transition:color var(--transition-fast), background var(--transition-fast);text-decoration:none;display:block}.back-link:hover{background:var(--color-ui-interactive-hover);color:var(--color-text-primary)}.navbar{padding:var(--spacing-md) var(--spacing-xl);background:var(--color-bg-surface);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-ui-border);z-index:var(--z-index-sticky);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.nav-left{align-items:center;display:flex}.brand-logo{width:auto;height:40px;margin-right:var(--spacing-sm);mix-blend-mode:lighten;opacity:.92}.nav-brand{font-size:var(--typography-font-size-xl);font-weight:var(--typography-font-weight-semibold);letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(90deg, #fff, var(--color-text-secondary));-webkit-text-fill-color:transparent;transition:filter var(--transition-normal), transform var(--transition-normal);cursor:pointer;-webkit-background-clip:text;background-clip:text;align-items:center;text-decoration:none;display:flex}.nav-brand:hover{filter:brightness(1.2);transform:translateY(-1px)}.nav-brand:active{transform:translateY(0)}.nav-auth{align-items:center;gap:var(--spacing-md);display:flex}.user-email{color:var(--color-text-secondary);font-size:var(--typography-font-size-base)}@media (width<=768px){.navbar{padding:var(--spacing-md);gap:var(--spacing-md);flex-direction:column}.nav-auth{justify-content:space-between;width:100%}}.toast-container{top:var(--spacing-lg);right:var(--spacing-lg);z-index:var(--z-index-toast);gap:var(--spacing-sm);pointer-events:none;flex-direction:column;max-width:400px;display:flex;position:fixed}.toast{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-6) var(--spacing-md);border-radius:var(--border-radius-md);font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-medium);box-shadow:var(--shadow-md);pointer-events:auto;animation:toast-slide-in var(--duration-fast) ease-out;display:flex}.toast-error{background:var(--color-toast-error-bg);border:1px solid var(--color-toast-error-border);color:#fff}.toast-warning{background:var(--color-toast-warning-bg);border:1px solid var(--color-toast-warning-border);color:#fff}.toast-success{background:var(--color-toast-success-bg);border:1px solid var(--color-toast-success-border);color:#fff}.toast-info{background:var(--color-toast-info-bg);border:1px solid var(--color-toast-info-border);color:#fff}.toast-icon{font-size:var(--typography-font-size-md);flex-shrink:0}.toast-message{line-height:var(--typography-line-height-base);flex:1}.toast-close{color:inherit;opacity:.6;cursor:pointer;font-size:var(--typography-font-size-base);padding:0 0 0 var(--spacing-xs);transition:opacity var(--transition-fast);background:0 0;border:none;flex-shrink:0}.toast-close:hover{opacity:1}.selection-hero{text-align:center;margin-bottom:var(--spacing-2xl);animation:.6s ease-out fade-in-down}.selection-title{font-size:var(--typography-font-size-5xl);font-weight:var(--typography-font-weight-extrabold);margin-bottom:var(--spacing-sm);background:linear-gradient(135deg, #fff, var(--color-brand-primary));-webkit-text-fill-color:transparent;color:#fff;-webkit-background-clip:text;background-clip:text}.selection-subtitle{font-size:var(--typography-font-size-xl);color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.selection-content{max-width:1400px}.selection-grid{gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(360px,1fr));max-width:1400px;margin:0 auto;display:grid}.selection-empty{text-align:center;padding:var(--spacing-3xl) var(--spacing-xl);color:var(--color-text-secondary);font-size:var(--typography-font-size-lg)}@media (width<=768px){.selection-title{font-size:var(--typography-font-size-4xl)}}