:root{--primary-color: #007bff;--secondary-color: #6c757d;--tertiary-color: #28a745;--font-family: "Arial", sans-serif;--font-size: 16px;--line-height: 1.5;--border-radius: 4px;--box-shadow: 0 2px 4px rgba(0, 0, 0, .1);--background-color: #f8f9fa;--text-color: #343a40;--link-color: #007bff;--hover-color: #0056b3;--active-color: #004085;--focus-color: #0069d9;--disabled-color: #6c757d;--error-color: #dc3545;--success-color: #28a745;--warning-color: #ffc107;--info-color: #17a2b8}html{font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height)}body{margin:0;padding:0;background-color:var(--background-color);color:var(--text-color)}.app{max-width:900px;margin:0 auto;padding:1rem 2rem}.app header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #ddd}.app header h1{margin:0;font-size:1.5rem;color:var(--primary-color)}.app main{min-height:400px}.btn{display:inline-block;padding:.5rem 1rem;font-size:1rem;font-weight:500;text-decoration:none;border:none;border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:var(--hover-color)}.btn-secondary{background-color:var(--secondary-color);color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-sm{padding:.25rem .5rem;font-size:.875rem}.btn-warning{background-color:var(--warning-color);color:#212529}.btn-warning:hover{background-color:#e0a800}textarea{width:100%;padding:.75rem;font-family:monospace;font-size:.875rem;border:1px solid #ccc;border-radius:var(--border-radius);resize:vertical;box-sizing:border-box}textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #007bff40}.loading{color:var(--secondary-color);font-style:italic}.error{color:var(--error-color);background-color:#f8d7da;padding:.75rem;border-radius:var(--border-radius);margin:1rem 0}.error-banner{display:flex;justify-content:space-between;align-items:center;background-color:#f8d7da;color:var(--error-color);padding:.75rem 1rem;margin-bottom:1rem;border-radius:var(--border-radius)}.error-banner button{background:none;border:none;color:var(--error-color);cursor:pointer;font-size:1rem}.help-text{color:var(--secondary-color);font-size:.875rem;margin-bottom:1rem}.not-authenticated{text-align:center;padding:3rem}.not-authenticated p{margin-bottom:1.5rem;font-size:1.1rem}.json-input h2{margin-top:0}.json-input h3{margin-top:1.5rem;margin-bottom:.5rem}.json-input textarea{margin-bottom:1rem}.input-actions{display:flex;gap:.5rem}.script-section{background-color:#f8f9fa;border:1px solid #ddd;border-radius:var(--border-radius);padding:1rem;margin-bottom:1rem}.script-section h3{margin-top:0;margin-bottom:.75rem}.instructions{margin:0 0 1rem;padding-left:1.5rem}.instructions li{margin-bottom:.5rem}.console-screenshot{display:block;max-width:100%;margin-top:.5rem;border:1px solid #ccc;border-radius:var(--border-radius)}.script-box{position:relative;background-color:#2d2d2d;border-radius:var(--border-radius);padding:1rem;overflow-x:auto}.script-box pre{margin:0;color:#f8f8f2;font-family:Consolas,Monaco,Courier New,monospace;font-size:.8rem;white-space:pre-wrap;word-break:break-all}.script-box .copy-btn{position:absolute;top:.5rem;right:.5rem}.game-matcher h2{margin-top:0}.match-summary{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:1rem;background-color:#e9ecef;border-radius:var(--border-radius)}.match-actions{display:flex;gap:.5rem}.game-list{max-height:400px;overflow-y:auto;border:1px solid #ddd;border-radius:var(--border-radius);margin-bottom:1rem}.game-item{padding:.75rem 1rem;border-bottom:1px solid #eee}.game-item:last-child{border-bottom:none}.game-item label{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer}.game-item input[type=checkbox]{margin-top:.25rem}.game-info{display:flex;flex-direction:column;gap:.25rem}.epic-title{font-weight:500}.itad-title{color:var(--success-color);font-size:.875rem}.no-match{color:var(--error-color);font-size:.875rem;font-style:italic}.game-item.unmatched{background-color:#fff3cd}.game-item.selected{background-color:#d4edda}.collection-picker h2{margin-top:0}.group-list{margin-bottom:1.5rem}.group-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1px solid #ddd;border-radius:var(--border-radius);margin-bottom:.5rem;cursor:pointer}.group-item:hover{background-color:#f8f9fa}.group-item input[type=radio]{margin:0}.create-category-btn{margin-top:.5rem}.create-category-form{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border:1px dashed #ccc;border-radius:var(--border-radius);margin-top:.5rem;background-color:#f8f9fa}.create-category-form input[type=text]{padding:.5rem .75rem;font-size:1rem;border:1px solid #ccc;border-radius:var(--border-radius)}.create-category-form input[type=text]:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #007bff40}.create-category-actions{display:flex;gap:.5rem}.import-summary{padding:1rem;background-color:#d1ecf1;border-radius:var(--border-radius);margin-bottom:1rem}.import-summary p{margin:0}.import-summary p+p{margin-top:.5rem}.profile-setup h2{margin-top:0}.setup-step{padding:1.5rem;margin-bottom:1rem;border:1px solid #ddd;border-radius:var(--border-radius);background-color:#fff}.setup-step.completed{border-color:var(--success-color);background-color:#d4edda}.setup-step.warning{border-color:var(--warning-color);background-color:#fff3cd}.setup-step h3{margin-top:0;margin-bottom:.5rem}.success-text{color:var(--success-color);font-weight:500}.sync-result{text-align:center;padding:2rem}.sync-stats{display:flex;justify-content:center;gap:3rem;margin:2rem 0}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:2.5rem;font-weight:700;color:var(--primary-color)}.stat-value.stat-added{color:var(--success-color)}.stat-value.stat-removed{color:var(--error-color)}.stat-label{font-size:.875rem;color:var(--secondary-color);text-transform:uppercase}.warning-text{color:var(--warning-color);background-color:#fff3cd;padding:.75rem 1rem;border-radius:var(--border-radius);margin:1rem 0;text-align:left}.success-state h2{color:var(--success-color)}.error-state h2{color:var(--error-color)}.loading-state{padding:2rem}.actions{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}a{color:var(--link-color)}a:hover{color:var(--hover-color)}
