@import "https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap";
:root{--bg-desk:#141414;--bg-binder:#1e1e1e;--bg-page:#252525;--bg-slot:#181818;--bg-halo:#1e1e1e;--bg-panel:#1e1e1ecc;--bg-panel-hover:#2d2d2d99;--text-primary:#f0ebe4;--text-secondary:#8a8078;--text-accent:#d4cdc4;--border-glass:#fff0d20a;--border-highlight:#fff0d21a;--border-slot:#0006;--accent-color:#c9a96e;--accent-glow:#c9a96e26;--rarity-common:#8a8078;--rarity-uncommon:#c4b8a8;--rarity-rare:#c084fc;--rarity-epic:#f472b6;--rarity-legendary:#fbbf24;--font-body:"Outfit", sans-serif;--font-display:"Space Grotesk", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-desk);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(at 50% 0,#c9a96e0f,#0000 60%),radial-gradient(at 80% 100%,#c9a96e08,#0000 50%);background-attachment:fixed;min-height:100vh;margin:0;display:flex}#root{width:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#c9a96e26;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#c9a96e4d}.back-to-library-btn{color:var(--text-secondary);cursor:pointer;font-size:.85rem;font-family:var(--font-body,inherit);background:#fff0d20f;border:1px solid #fff0d21a;border-radius:20px;justify-content:center;align-items:center;gap:8px;width:auto;height:36px;padding:0 16px;font-weight:500;transition:all .2s;display:flex}.back-to-library-btn:hover{color:var(--text-primary);background:#fff0d21f}
.app-container{flex-direction:column;width:100%;min-height:100vh;display:flex}.header{background:var(--bg-binder);border-bottom:1px solid var(--border-glass);flex-wrap:wrap;align-items:center;gap:16px;padding:32px 48px 20px;display:flex}.header-title-container{margin-right:auto}.header h1{font-family:var(--font-display);letter-spacing:-.03em;color:var(--accent-color);align-items:center;gap:4px;margin:0;font-size:2.2rem;font-weight:600;display:inline-flex}.header-stats{color:var(--text-secondary);letter-spacing:.02em;margin-top:4px;font-size:.92rem;font-weight:300}.stats-dashboard{background:var(--bg-binder);border-bottom:1px solid var(--border-glass);align-items:center;gap:24px;padding:14px 48px;display:flex}.stat-item{flex-direction:column;gap:2px;display:flex}.stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-size:.65rem;font-weight:500}.stat-value{font-family:var(--font-display);color:var(--text-primary);font-size:1.1rem;font-weight:600}.stat-value.highlight{color:var(--accent-color)}.stat-value.wishlist{color:#fbbf24}.progress-bar-container{flex-direction:column;flex:1;gap:4px;max-width:300px;display:flex}.progress-bar-track{background:#fff0d20f;border-radius:3px;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--accent-color), #e8c87a);border-radius:3px;height:100%;transition:width .5s}.progress-label{color:var(--text-secondary);letter-spacing:.05em;font-size:.65rem}.tabs-bar{z-index:50;background:var(--bg-binder);border-bottom:1px solid var(--border-highlight);flex-wrap:nowrap;align-items:flex-start;gap:12px;padding:8px 24px;display:flex;position:relative}.tabs-bar-left{flex-shrink:0;align-items:center;gap:8px;display:flex}.filter-bar-wrapper{flex:1;min-width:0}.view-mode-toggles{background:var(--bg-binder);border:1px solid var(--border-highlight);border-radius:8px;padding:2px;display:flex}.view-toggle-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;border-radius:6px;align-items:center;gap:6px;padding:4px 10px;font-size:.8rem;font-weight:400;transition:all .2s;display:flex}.view-toggle-btn.active{background:var(--accent-color);color:#111;font-weight:700}.tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;flex:1;align-items:center;gap:6px;min-width:0;padding:2px 0;display:flex;overflow-x:auto}.tabs-scroll-container::-webkit-scrollbar{display:none}.inline-tab{color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;white-space:nowrap;background:#fff0d208;border:1px solid #fff0d20f;border-radius:20px;flex-shrink:0;align-items:center;gap:6px;padding:7px 14px;font-size:.78rem;font-weight:500;transition:all .2s;display:flex}.inline-tab:hover{color:var(--text-primary);background:#fff0d214;border-color:#fff0d226}.inline-tab.active{color:var(--accent-color);background:#c9a96e26;border-color:#c9a96e66}.tab-label{text-overflow:ellipsis;overflow:hidden}.tab-count{color:var(--text-secondary);text-align:center;background:#fff0d20f;border-radius:10px;min-width:24px;padding:1px 6px;font-size:.68rem;font-weight:600}.inline-tab.active .tab-count{color:var(--accent-color);background:#c9a96e33}.main-content{background:var(--bg-page);background-image:repeating-linear-gradient(0deg,#0000,#0000 40px,#fff0d202 40px 41px);flex-direction:column;flex:1;display:flex}.grid-container{flex:1;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-content:start;gap:16px;padding:16px 24px 40px;display:grid}.virtualized-grid-wrapper{width:100%;padding:16px 24px 40px}.sections-container{flex-direction:column;gap:32px;padding:16px 24px 40px;display:flex}.group-section{background-color:var(--bg-binder);border:1px solid var(--border-highlight);border-radius:8px;flex-direction:column;gap:8px;margin-bottom:16px;padding:8px 16px;scroll-margin-top:130px;display:flex;box-shadow:0 4px 12px #0006}.group-header{font-family:var(--font-display);color:var(--accent-color);align-items:baseline;gap:8px;margin:0;padding:0;font-size:1.1rem;display:flex}.group-owned-count{color:#34d399;letter-spacing:.02em;text-transform:none;margin-left:auto;font-size:.8rem;font-weight:500}.grid-container.chunked{flex:none;padding:0}.loading-container{font-size:1.2rem;font-family:var(--font-display);color:var(--text-secondary);letter-spacing:.1em;text-transform:uppercase;flex:1;justify-content:center;align-items:center;display:flex}.empty-state{color:var(--text-secondary);border-radius:24px;flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;padding:100px;display:flex}.empty-state h3{font-family:var(--font-display);color:var(--text-primary);margin-bottom:8px;font-size:1.5rem;font-weight:400}.header-nav-actions,.header-more-actions{align-items:center;gap:10px;display:flex}.mobile-actions-toggle{display:none}.header-user-actions{align-items:center;gap:10px;display:flex;position:relative}.header-action-btn{cursor:pointer;font-size:.9rem;font-weight:600;font-family:var(--font-body);letter-spacing:.02em;border:1px solid;border-radius:10px;padding:.5rem 1.1rem;transition:all .2s}.trade-btn{color:#60a5fa;background:#60a5fa1f;border-color:#60a5fa4d}.trade-btn:hover{background:#60a5fa38;border-color:#60a5fa8c}.admin-btn{color:var(--accent-color);background:#c9a96e1f;border-color:#c9a96e4d}.admin-btn:hover{background:#c9a96e33;border-color:#c9a96e80}.user-switcher{position:relative}.user-switch-btn{cursor:pointer;font-family:var(--font-body);background:#fff0d20a;border:1px solid;border-radius:10px;align-items:center;gap:8px;padding:7px 14px;transition:all .2s;display:flex}.user-switch-btn:hover{background:#fff0d214}.user-emoji{font-size:1rem}.user-name{font-size:.82rem;font-weight:600}.user-caret{color:var(--text-secondary);font-size:.7rem}.user-menu{z-index:100;background:#1a1710;border:1px solid #c9a96e33;border-radius:14px;min-width:180px;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 16px 40px #00000080}.user-menu-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);border-bottom:1px solid #fff0d20f;padding:10px 14px 8px;font-size:.65rem;font-weight:600}.user-menu-item{cursor:pointer;text-align:left;width:100%;font-family:var(--font-body);background:0 0;border:none;align-items:center;gap:10px;padding:11px 14px;transition:background .15s;display:flex}.user-menu-item:hover{background:#fff0d20d}.user-menu-item.active{background:rgba(var(--user-color), .08)}.um-emoji{font-size:1rem}.um-name{color:var(--text-primary);flex:1;font-size:.85rem;font-weight:500}.um-check{color:var(--accent-color);font-size:.8rem;font-weight:700}@media (max-width:768px){.header{box-sizing:border-box;flex-flow:wrap;justify-content:space-between;align-items:center;gap:6px;width:100%;max-width:100vw;padding:10px;display:flex}.header-title-container{flex:auto;order:1;min-width:0}.header h1{align-items:center;margin:0;font-size:1.4rem;display:flex}.header h1 img{width:auto;height:38px!important}.header-stats{flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px;font-size:.78rem;display:flex}.header-stats img{width:20px!important;height:20px!important}.header-user-actions{flex:none;order:2;gap:4px}.header-nav-actions{border:none;flex-wrap:wrap;order:4;align-items:center;gap:5px;width:100%;margin-top:4px;padding:0;display:flex!important}.mobile-actions-toggle{color:var(--text-primary);cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding:5px 8px;display:flex!important}.header-more-actions{border-top:1px solid #ffffff14;flex-wrap:wrap;align-items:center;gap:6px;width:100%;margin-top:6px;padding-top:6px;display:none}.header-more-actions.open{display:flex}.header-action-btn{white-space:nowrap;flex-shrink:1;min-width:0;padding:.35rem .6rem;font-size:.72rem}.user-name,.logout-text,.refresh-text-desktop,.view-toggle-text{display:none}.show-missing-text,.add-card-text{display:inline}.header-admin-toggles .toggle-label,.header-admin-toggles a{padding:6px 8px!important}.stats-dashboard{justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.stats-dashboard a,.stat-item{flex-shrink:0}.progress-bar-container{flex-shrink:0;border-radius:50%!important;justify-content:center!important;align-items:center!important;width:32px!important;min-width:auto!important;max-width:none!important;height:32px!important;padding:0!important;display:flex!important}.stats-dashboard .progress-label{display:none!important}.tabs-bar{flex-wrap:nowrap;gap:8px;padding:8px 12px}.filter-bar-wrapper{flex:1;justify-content:flex-end;min-width:auto;display:flex}.grid-container{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:12px 12px 32px}.virtualized-grid-wrapper{padding:12px 12px 32px}.sections-container{gap:16px;padding:12px 12px 32px}.group-section{padding:8px}.group-header{font-size:1rem}.empty-state{padding:40px 20px}.era-header-title{width:100%;margin-bottom:4px}.generate-template-btn{margin-left:0}}.era-header-layout{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.era-header-title{align-items:center;gap:8px;margin:0;padding:0;display:flex}.generate-template-btn{margin-left:auto}[data-tooltip]{position:relative}[data-tooltip]:before{content:attr(data-tooltip);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;z-index:100;letter-spacing:.2px;background-color:#0f0f12f2;border:1px solid #ffffff1a;border-radius:6px;padding:6px 10px;font-family:sans-serif;font-size:.72rem;font-weight:500;transition:opacity .15s,transform .15s;position:absolute;bottom:135%;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000080}[data-tooltip]:hover:before{opacity:1;transform:translate(-50%)translateY(-2px)}