:root{--primary-color:#ff6b6b;--background-color:#f5f5f5;--card-background:#fff;--text-color:#333}[data-theme=dark]{--primary-color:#ff6b6b;--background-color:#1a1a1a;--card-background:#2d2d2d;--text-color:#fff}body{margin:0;padding:20px;font-family:Arial,sans-serif;background-color:var(--background-color);color:var(--text-color);transition:background-color .3s,color .3s}.container{max-width:1200px;margin:0 auto}header{justify-content:space-between;margin-bottom:20px}.header-right,header{display:flex;align-items:center}.header-right{gap:15px}.progress-info{display:flex;gap:10px;font-size:14px;color:var(--text-color)}.progress-info span{background:var(--card-background);padding:5px 10px;border-radius:15px;border:1px solid var(--text-color)}.settings-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:10px;color:var(--text-color)}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:20px;gap:20px;padding:20px 0}.game-grid.list{grid-template-columns:1fr}.game-card{background:var(--card-background);aspect-ratio:16/9;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 10px rgba(0,0,0,.1);position:relative;padding:20px}.game-card.completed{background:linear-gradient(135deg,var(--card-background),rgba(76,175,80,.1));border:2px solid rgba(76,175,80,.3)}.completed-badge{position:absolute;top:10px;right:10px;background:rgba(76,175,80,.9);color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:700}.complete-btn{margin-top:10px;background:var(--primary-color);color:#fff;border:none;padding:8px 16px;border-radius:5px;font-size:12px;cursor:pointer;transition:background-color .2s}.complete-btn:hover:not(:disabled){background:hsla(0,100%,71%,.8)}.complete-btn:disabled{background:rgba(76,175,80,.7);cursor:not-allowed}.game-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.add-game-card{background:var(--card-background);border:2px dashed var(--text-color);opacity:.7}.add-game-card:hover{opacity:1}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center}.modal-content{background:var(--card-background);padding:20px;border-radius:15px;max-width:500px;width:90%;color:var(--text-color)}.setting-item{margin:15px 0;display:flex;justify-content:space-between;align-items:center}.setting-item input,.setting-item select{padding:5px;border:1px solid var(--text-color);background:var(--background-color);color:var(--text-color);border-radius:4px}.about-section{margin-top:20px;padding-top:15px;border-top:1px solid var(--text-color)}button{background:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;margin-top:15px}.logout-btn{background:#dc3545;margin-right:10px}.logout-btn:hover{background:#c82333}