@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--primary-color:#2563eb;--primary-hover:#1d4ed8;--primary-light:#eff6ff;--bg-color:#f8fafc;--card-bg:#fff;--text-main:#0f172a;--text-muted:#64748b;--border-color:#e2e8f0;--success-color:#10b981;--success-light:#d1fae5;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--border-radius:12px;--transition-speed:.2s}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Inter,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}.card{background-color:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.app-container{max-width:1200px;margin:0 auto;padding:0 20px}.app-header{margin-bottom:20px;padding:40px 0}.header-content h1{color:var(--primary-color);letter-spacing:-.025em;margin-bottom:8px;font-size:2.5rem;font-weight:700}.header-content p{color:var(--text-muted);font-size:1.1rem}.main-content{padding-bottom:60px}.progress-overview{flex-direction:column;gap:16px;margin-bottom:32px;padding:24px;display:flex}.progress-header{justify-content:space-between;align-items:center;display:flex}.progress-header h2{font-size:1.25rem;font-weight:600}.progress-text{color:var(--primary-color);font-weight:600}.progress-bar-bg{background-color:var(--border-color);border-radius:9999px;height:12px;overflow:hidden}.progress-bar-fill{background-color:var(--primary-color);border-radius:9999px;height:100%;transition:width .5s ease-in-out}.phases-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;display:grid}.phase-card{background-color:var(--card-bg);border-radius:var(--border-radius);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:all var(--transition-speed) ease;flex-direction:column;gap:16px;padding:24px;display:flex;position:relative;overflow:hidden}.phase-card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary-color);transform:translateY(-4px)}.phase-card.completed-phase{background-color:var(--success-light);border-color:var(--success-color)}.phase-card-header{justify-content:space-between;align-items:flex-start;display:flex}.phase-card-header h3{flex:1;padding-right:12px;font-size:1.1rem;font-weight:600}.icon-primary{color:var(--primary-color)}.icon-success{color:var(--success-color)}.phase-stats{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.stat-text{color:var(--text-muted);font-size:.875rem;font-weight:500}.completed-phase .stat-text{color:var(--success-color)}.mini-progress-bg{background-color:var(--border-color);border-radius:9999px;height:6px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.mini-progress-fill{background-color:var(--primary-color);height:100%;transition:width .5s}.completed-phase .mini-progress-fill{background-color:var(--success-color)}.completed-phase .mini-progress-bg{background-color:#10b98133}.back-link{color:var(--text-muted);transition:color var(--transition-speed);align-items:center;gap:8px;margin-bottom:24px;font-weight:500;display:inline-flex}.back-link:hover{color:var(--primary-color)}.phase-header{justify-content:space-between;align-items:center;margin-bottom:32px;padding:32px;display:flex}.header-info h2{margin-bottom:8px;font-size:2rem;font-weight:700}.header-info p{color:var(--text-muted);font-size:1.1rem}.progress-circle-container{background-color:var(--border-color);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;display:flex}.progress-circle{border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.progress-circle:before{content:"";background-color:var(--card-bg);border-radius:50%;position:absolute;inset:6px}.progress-circle-text{color:var(--text-main);font-size:1.1rem;font-weight:700;position:relative}.problems-list{padding:0;overflow:hidden}.table-header,.problem-row{border-bottom:1px solid var(--border-color);grid-template-columns:60px 40px 2fr 1.5fr 1fr 60px;align-items:center;padding:16px 24px;display:grid}.table-header{background-color:var(--bg-color);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:600}.problem-row{transition:background-color var(--transition-speed)}.problem-row:last-child{border-bottom:none}.problem-row:hover{background-color:var(--primary-light)}.problem-row.completed{background-color:#f8fafc}.problem-row.completed .col-title{color:var(--text-muted);text-decoration:line-through}.col-checkbox{cursor:pointer;justify-content:center;display:flex}.checkbox-btn{color:var(--border-color);cursor:pointer;transition:all var(--transition-speed);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.checkbox-btn:hover{color:var(--primary-color)}.checkbox-btn.checked{color:var(--success-color)}.col-id{color:var(--text-muted);font-variant-numeric:tabular-nums}.col-title{color:var(--text-main);transition:color var(--transition-speed);font-weight:500}.pattern-badge{background-color:var(--primary-light);color:var(--primary-color);border-radius:9999px;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-block}.completed .pattern-badge{background-color:var(--border-color);color:var(--text-muted)}.col-platform{color:var(--text-muted);font-size:.875rem}.col-link{justify-content:flex-end;display:flex}.platform-link{color:var(--primary-color);transition:all var(--transition-speed);border-radius:6px;padding:8px;display:inline-flex}.platform-link:hover{background-color:var(--primary-light);transform:scale(1.05)}@media (width<=768px){.table-header{display:none}.problem-row{grid-template-columns:40px 1fr 40px;grid-template-areas:"check title link""check pattern link""check platform link";gap:4px 12px;padding:16px}.col-checkbox{grid-area:check}.col-title{grid-area:title;font-size:1rem}.col-pattern{grid-area:pattern}.col-platform{grid-area:platform}.col-link{grid-area:link}.col-id{display:none}.phase-header{flex-direction:column;align-items:flex-start;gap:24px}}.booster-details{border-top:2px dashed var(--border-color);margin-top:8px}.booster-summary{cursor:pointer;background-color:var(--primary-light);color:var(--primary-color);transition:background-color var(--transition-speed);justify-content:space-between;align-items:center;padding:16px 24px;font-weight:600;list-style:none;display:flex}.booster-summary:hover{background-color:#dbeafe}.booster-summary::-webkit-details-marker{display:none}.booster-content{background-color:#fafafa}
