:root{--color-backlog:#6c757d;--color-playing:#0d6efd;--color-completed:#198754;--color-abandoned:#dc3545;--color-wishlist:#ffc107;font-size:16px}body,html{height:100%;margin:0}#app{min-height:100%}#app,.main-layout{display:flex;flex-direction:column}.main-layout{min-height:100vh}.main-layout>main{flex:1;padding-bottom:2rem;padding-top:1rem}.main-layout>footer{border-top:1px solid var(--pico-muted-border-color);padding:1rem 0;text-align:center}header nav{justify-content:space-between}header nav,header nav ul{align-items:center;display:flex}header nav ul{gap:.5rem;list-style:none;margin:0;padding:0}header nav a{text-decoration:none}header nav a.active{font-weight:700}header nav a.brand{font-size:1.25rem}header nav .username{color:var(--pico-muted-color)}header nav a.logout{cursor:pointer}.page-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem}.page-header h1{margin:0}.loading-container{padding:3rem;text-align:center}.loading{animation:spin 1s linear infinite;border:3px solid var(--pico-muted-border-color);border-radius:50%;border-top-color:var(--pico-primary);display:inline-block;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(1turn)}}.empty-state{background:var(--pico-card-background-color);border-radius:var(--pico-border-radius);padding:3rem;text-align:center}.empty-state h3{margin-bottom:.5rem}.empty-state p{color:var(--pico-muted-color);margin-bottom:1.5rem}.collection-grid,.games-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-bottom:1.5rem}.game-card{display:flex;flex-direction:column;overflow:hidden;padding:0}.game-card .game-cover{aspect-ratio:3/4;background:var(--pico-muted-border-color);overflow:hidden;position:relative}.game-card .game-cover img{height:100%;object-fit:cover;width:100%}.game-card .game-cover.clickable{cursor:pointer}.game-card .game-info{flex:1;padding:1rem}.game-card .game-title{font-size:1rem;line-height:1.3;margin:0 0 .25rem}.game-card .game-genres,.game-card .game-platforms,.game-card .game-year{color:var(--pico-muted-color);margin:0}.game-card .game-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1rem 1rem}.game-card .game-actions button{flex:1;font-size:.875rem;margin:0;padding:.5rem}.local-cover-badge{background-color:rgba(0,0,0,.7);border-radius:4px;bottom:.5rem;color:#fff;cursor:help;font-size:.75rem;line-height:1;opacity:.8;padding:.25rem .4rem;position:absolute;right:.5rem;transition:opacity .2s ease}.local-cover-badge:hover{opacity:1}.collection-info{border-top:1px solid var(--pico-muted-border-color);margin-top:.75rem;padding-top:.75rem}.status-row{align-items:center;display:flex;gap:.5rem;margin-bottom:.5rem}.rating-row{margin-bottom:.25rem}.hours-played,.item-platform{margin:0}.badge{border-radius:var(--pico-border-radius);display:inline-block;font-size:.75rem;font-weight:600;padding:.25rem .5rem;text-transform:uppercase}.badge.secondary{background:var(--color-backlog);color:#fff}.badge.primary{background:var(--color-playing);color:#fff}.badge.success{background:var(--color-completed);color:#fff}.badge.warning{background:var(--color-abandoned);color:#fff}.badge.wishlist{background:var(--color-wishlist);color:#000}.favorite-badge,.physical-badge{font-size:.875rem}.rating-stars .star{color:var(--pico-muted-color)}.rating-stars .star.filled{color:#ffc107}.collection-filters{margin-bottom:1.5rem}.filter-row{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.filter-row input[type=search]{flex:2;min-width:200px}.filter-row select{flex:1;min-width:150px}.favorites-toggle{align-items:center;display:flex;gap:.5rem;white-space:nowrap}.favorites-toggle input{margin:0}.filter-actions{margin-top:.5rem}.pagination-row{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-top:1rem}.results-info{color:var(--pico-muted-color)}.pagination-buttons{align-items:center;display:flex;gap:.5rem}.page-indicator{color:var(--pico-muted-color);padding:0 .5rem}.pagination-buttons button.small{font-size:.875rem;padding:.4rem .8rem}.stats-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:1.5rem}.stat-card{background:var(--pico-card-background-color);border-radius:var(--pico-border-radius);padding:1rem;text-align:center}.stat-card.highlight{background:var(--pico-primary-background);color:#fff}.stat-value{display:block;font-size:2rem;font-weight:700;line-height:1.2}.stat-label{color:var(--pico-muted-color);display:block;font-size:.875rem}.stat-card.highlight .stat-label{color:#fff}.status-bars{gap:.75rem}.status-bar-item,.status-bars{display:flex;flex-direction:column}.status-bar-item{gap:.25rem}.status-bar-label{display:flex;font-size:.875rem;justify-content:space-between}.status-bar-track{background:var(--pico-muted-border-color);border-radius:.25rem;height:.5rem;overflow:hidden}.status-bar-fill{border-radius:.25rem;height:100%;transition:width .3s ease}.status-bar-fill.backlog{background:var(--color-backlog)}.status-bar-fill.playing{background:var(--color-playing)}.status-bar-fill.completed{background:var(--color-completed)}.status-bar-fill.abandoned{background:var(--color-abandoned)}.status-bar-fill.wishlist{background:var(--color-wishlist)}.platform-list{display:flex;flex-direction:column;gap:.5rem}.platform-item{background:var(--pico-card-background-color);border-radius:var(--pico-border-radius);display:flex;justify-content:space-between;padding:.5rem}.platform-count{font-weight:700}.stats-actions{margin-top:1.5rem}dialog{max-width:500px}dialog article{margin:0}dialog article header{position:relative}dialog article header .close{background:none;border:none;cursor:pointer;font-size:1.5rem;margin:0;padding:0;position:absolute;right:0;top:50%;transform:translateY(-50%);width:auto}dialog article footer{display:flex;gap:1rem;justify-content:flex-end}dialog article footer button{margin:0}.rating-select{margin-bottom:1rem}.rating-select>label{display:block;font-weight:700;margin-bottom:.5rem}.star-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.star-btn{background:var(--pico-secondary-background)}.star-btn:hover{background:var(--pico-secondary-hover-background);border:7px solid #000}.star-btn:focus{box-shadow:0 0 0 3px rgba(13,110,253,.25);outline:none}.star-btn.selected{background:var(--pico-primary);border:7px solid gold;color:var(--pico-primary-inverse);font-weight:700}.star-btn.selected:hover{background:var(--pico-primary-hover);border-color:var(--pico-primary-hover)}.search-bar{margin-bottom:1.5rem}.search-bar input{width:100%}.search-hint{color:var(--pico-muted-color);font-size:.875rem;margin-top:1rem;text-align:center}.button-group{display:flex;flex-wrap:wrap;gap:1rem}.results-count{color:var(--pico-muted-color);text-align:center}.auth-page{padding:3rem;text-align:center}.auth-page h1{margin-bottom:1rem}.auth-page p{margin-bottom:1.5rem}.sso-callback{padding:3rem;text-align:center}.browse-page section{margin-bottom:2rem}.browse-page .section-title{align-items:baseline;border-bottom:1px solid var(--pico-muted-border-color);display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;padding-bottom:.5rem}.browse-page .section-title .result-count{color:var(--pico-muted-color);font-size:.875rem;font-weight:400}.browse-page .section-title .igdb-attribution{color:var(--pico-muted-color);font-size:.75rem;font-weight:400;margin-left:auto}.browse-page .section-title .igdb-attribution a{color:inherit;text-decoration:underline}.browse-page .igdb-results{border-top:2px solid var(--pico-muted-border-color);margin-top:1rem;padding-top:1rem}.browse-page .error-state{padding:2rem;text-align:center}.browse-page .error-state .error-message{margin-bottom:1rem}.browse-page .pending-state{color:var(--pico-muted-color);padding:2rem;text-align:center}.storefront-select{margin-bottom:1rem;position:relative}.storefront-select.disabled{opacity:.6;pointer-events:none}.storefront-select .storefront-label{display:block;font-weight:500;margin-bottom:.25rem}.storefront-select .storefront-input-container{background:var(--pico-form-element-background-color);border:1px solid var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);cursor:pointer;min-height:2.5rem;padding:.5rem;transition:border-color .2s}.storefront-select .storefront-input-container:hover{border-color:var(--pico-form-element-active-border-color)}.storefront-select .storefront-chips{align-items:center;display:flex;flex-wrap:wrap;gap:.375rem}.storefront-select .storefront-placeholder{color:var(--pico-form-element-placeholder-color);font-size:.875rem}.storefront-select .storefront-chip{align-items:center;background:var(--pico-primary);border-radius:1rem;color:var(--pico-primary-inverse);display:inline-flex;font-size:.75rem;font-weight:500;gap:.25rem;padding:.125rem .5rem}.storefront-select .chip-remove{background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;line-height:1;margin:0;opacity:.8;padding:0;width:auto}.storefront-select .chip-remove:hover{opacity:1}.storefront-select .storefront-toggle{color:var(--pico-muted-color);font-size:.625rem;margin-left:auto;transition:transform .2s}.storefront-select .storefront-toggle.open{transform:rotate(180deg)}.storefront-select .storefront-dropdown{background:var(--pico-card-background-color);border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);box-shadow:0 4px 12px rgba(0,0,0,.15);left:0;margin-top:.25rem;max-height:300px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:100}.storefront-select .storefront-category{padding:.5rem 0}.storefront-select .storefront-category:not(:last-child){border-bottom:1px solid var(--pico-muted-border-color)}.storefront-select .category-header{color:var(--pico-muted-color);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:.25rem .75rem;text-transform:uppercase}.storefront-select .storefront-option{align-items:center;cursor:pointer;display:flex;gap:.5rem;margin:0;padding:.375rem .75rem;transition:background-color .15s}.storefront-select .storefront-option:hover{background:var(--pico-secondary-hover-background)}.storefront-select .storefront-option.selected{background:var(--pico-primary-background)}.storefront-select .storefront-option input[type=checkbox]{height:1rem;margin:0;width:1rem}.storefront-select .option-name{font-size:.875rem}.platform-select{margin-bottom:1rem;position:relative}.platform-select.disabled{opacity:.6;pointer-events:none}.platform-select .platform-label{display:block;font-weight:500;margin-bottom:.25rem}.platform-select .platform-input-container{background:var(--pico-form-element-background-color);border:1px solid var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);cursor:pointer;min-height:2.5rem;padding:.5rem;transition:border-color .2s}.platform-select .platform-input-container:hover{border-color:var(--pico-form-element-active-border-color)}.platform-select .platform-chips{align-items:center;display:flex;flex-wrap:wrap;gap:.375rem}.platform-select .platform-placeholder{color:var(--pico-form-element-placeholder-color);font-size:.875rem}.platform-select .platform-chip{align-items:center;background:var(--pico-primary);border-radius:1rem;color:var(--pico-primary-inverse);display:inline-flex;font-size:.75rem;font-weight:500;gap:.25rem;padding:.125rem .5rem}.platform-select .chip-remove{background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;line-height:1;margin:0;opacity:.8;padding:0;width:auto}.platform-select .chip-remove:hover{opacity:1}.platform-select .platform-toggle{color:var(--pico-muted-color);font-size:.625rem;margin-left:auto;transition:transform .2s}.platform-select .platform-toggle.open{transform:rotate(180deg)}.platform-select .platform-dropdown{background:var(--pico-card-background-color);border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);box-shadow:0 4px 12px rgba(0,0,0,.15);left:0;margin-top:.25rem;max-height:300px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:100}.platform-select .platform-category{padding:.5rem 0}.platform-select .platform-category:not(:last-child){border-bottom:1px solid var(--pico-muted-border-color)}.platform-select .category-header{color:var(--pico-muted-color);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:.25rem .75rem;text-transform:uppercase}.platform-select .platform-option{align-items:center;cursor:pointer;display:flex;gap:.5rem;margin:0;padding:.375rem .75rem;transition:background-color .15s}.platform-select .platform-option:hover{background:var(--pico-secondary-hover-background)}.platform-select .platform-option.selected{background:var(--pico-primary-background)}.platform-select .platform-option input[type=checkbox]{height:1rem;margin:0;width:1rem}.platform-select .option-name{font-size:.875rem}.platform-select .custom-platform-input{border-bottom:1px solid var(--pico-muted-border-color);display:flex;gap:.5rem;padding:.5rem .75rem}.platform-select .custom-platform-input input{flex:1;font-size:.875rem;margin:0;padding:.25rem .5rem}.platform-select .custom-platform-input .add-custom-btn{font-size:1rem;margin:0;min-width:auto;padding:.25rem .75rem}.import-page{margin:0 auto;max-width:900px}.import-tabs ul{border-bottom:1px solid var(--pico-muted-border-color);display:flex;gap:0;list-style:none;margin:0 0 1rem;padding:0}.import-tabs li{margin:0}.import-tabs a{border-bottom:2px solid transparent;color:var(--pico-muted-color);display:block;margin-bottom:-1px;padding:.75rem 1.25rem;text-decoration:none}.import-tabs a:hover{background:var(--pico-card-background-color);color:var(--pico-color)}.import-tabs a.active{border-bottom-color:var(--pico-primary);color:var(--pico-primary);font-weight:700}.import-content{padding:1rem 0}.import-content header{margin-bottom:1.5rem}.import-content header h2{margin-bottom:.5rem}.import-content header p{color:var(--pico-muted-color);margin-bottom:0}.import-content fieldset{border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);margin:1rem 0;padding:1rem}.import-content fieldset legend{font-weight:700;padding:0 .5rem}.import-content fieldset label{cursor:pointer;display:block;margin-bottom:.5rem}.import-content fieldset input[type=checkbox]{margin-right:.5rem}.import-preview{border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);margin:1.5rem 0;max-height:400px;overflow-y:auto;padding:1rem}.import-preview h3{margin-bottom:.5rem}.import-preview table{font-size:.875rem;margin-bottom:0}.form-group{margin-bottom:1rem}.form-group label{display:block;font-weight:500;margin-bottom:.5rem}.error-message{background:var(--pico-del-color)}.error-message,.success-message{border-radius:var(--pico-border-radius);color:#fff;margin:1rem 0;padding:1rem}.success-message{background:var(--pico-ins-color)}.success-message p{margin:.5rem 0}.success-message details{margin-top:.75rem}.success-message summary{cursor:pointer;font-weight:500}.success-message ul{margin:.5rem 0 0 1rem;padding:0}.import-results{margin:1rem 0}.import-results-summary{background:color-mix(in srgb,var(--pico-ins-color) 15%,transparent);border:1px solid var(--pico-ins-color);border-radius:var(--pico-border-radius);color:var(--pico-color);padding:1rem}.import-results-summary.has-errors{background:color-mix(in srgb,var(--pico-primary-background) 15%,transparent);border:1px solid var(--pico-primary-background)}.import-results-summary p{margin:.5rem 0}.import-updated{margin-top:1rem}.import-errors{background:color-mix(in srgb,var(--pico-del-color) 15%,transparent);border:1px solid var(--pico-del-color);border-radius:var(--pico-border-radius);color:var(--pico-color);margin-top:.5rem;padding:1rem}.import-errors summary{color:var(--pico-del-color);cursor:pointer;font-weight:600}.import-errors ul{margin:.5rem 0 0 1rem;padding:0}.input-mode-toggle{display:flex;gap:.5rem;margin-bottom:1.5rem}.input-mode-toggle button{flex:0 0 auto;margin:0;padding:.5rem 1rem}.simple-form,.simple-form table{margin-bottom:1rem}.simple-form table input,.simple-form table select{font-size:.875rem;margin-bottom:0;padding:.5rem}.simple-form table th{font-size:.875rem;padding:.5rem}.simple-form table td{padding:.25rem;vertical-align:middle}.simple-form table td:last-child{text-align:center;width:50px}.simple-form table td:last-child button{font-size:1rem;line-height:1;margin:0;padding:.25rem .5rem}.simple-bulk{margin-bottom:1rem}.simple-bulk p{margin-bottom:.5rem}.simple-bulk code{background:var(--pico-card-background-color);border-radius:var(--pico-border-radius);display:inline-block;font-size:.875rem;padding:.25rem .5rem}.simple-bulk textarea{font-family:monospace;font-size:.875rem;margin-bottom:1rem}.export-section header{margin-bottom:2rem}.import-progress{background:var(--pico-card-background-color);border:1px solid var(--pico-muted-border-color);border-radius:var(--pico-border-radius);margin:1.5rem 0;padding:1.5rem}.import-progress h3{font-size:1rem;margin:0 0 1rem}.import-progress .progress-info{margin-bottom:1rem}.import-progress .progress-info p{font-size:.9rem;margin:.25rem 0}.import-progress .progress-stats{font-size:.875rem;margin-top:.75rem}.import-progress .stat-imported{color:var(--color-completed)}.import-progress .stat-updated{color:var(--color-playing)}.import-progress .stat-skipped{color:var(--pico-muted-color)}.import-progress progress{height:1.5rem;margin:0;width:100%}@media (max-width:768px){header nav{flex-direction:column;gap:.5rem}header nav ul{flex-wrap:wrap;justify-content:center}.page-header{gap:1rem;text-align:center}.filter-row,.page-header{flex-direction:column}.filter-row input,.filter-row select{width:100%}.collection-grid,.games-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.stats-grid{grid-template-columns:repeat(2,1fr)}.browse-page .section-title{align-items:flex-start;flex-direction:column}.browse-page .section-title .igdb-attribution{margin-left:0}.platform-select .platform-dropdown,.storefront-select .storefront-dropdown{max-height:250px}.import-tabs ul{flex-wrap:wrap}.import-tabs a{font-size:.875rem;padding:.5rem .75rem}.input-mode-toggle{flex-direction:column}.input-mode-toggle button{width:100%}.simple-form table{font-size:.8rem}.simple-form table input,.simple-form table select{font-size:.8rem;padding:.375rem}}.external-game-links{display:flex;gap:.5rem;margin:.5rem 0 1rem}.external-game-links .external-link{align-items:center;background:var(--pico-secondary-background);border-radius:4px;display:inline-flex;height:28px;justify-content:center;transition:background-color .15s,transform .15s;width:28px}.external-game-links .external-link:hover{background:var(--pico-primary-background);transform:scale(1.1)}.external-game-links .external-link img{display:block}.hidden{display:none!important}