:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;--app-bg: #f5f7fa;--surface-1: #ffffff;--surface-2: #f8fafc;--text-primary: #213547;--text-secondary: #7f8c8d;--border-color: #dbe4ef;color:#2c3e50;background-color:#f5f7fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root[data-theme=dark]{color-scheme:dark;--app-bg: #111827;--surface-1: #1f2937;--surface-2: #111827;--text-primary: #f3f4f6;--text-secondary: #cbd5e1;--border-color: #374151;color:#f3f4f6;background-color:#111827}html,body,#root{width:100%;height:100%;margin:0;padding:0}body{background:var(--app-bg);color:var(--text-primary)}a{font-weight:500;color:#0984e3;text-decoration:inherit}a:hover{color:#06c}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root[data-theme=dark] .survey-form,:root[data-theme=dark] .customize-card,:root[data-theme=dark] .card-rule-section,:root[data-theme=dark] .metric-row,:root[data-theme=dark] .dashboard-header,:root[data-theme=dark] .no-data-message,:root[data-theme=dark] .metric-card,:root[data-theme=dark] .main-value-card,:root[data-theme=dark] .detail-group,:root[data-theme=dark] .detail-item,:root[data-theme=dark] .detail-item-circle,:root[data-theme=dark] .date-picker,:root[data-theme=dark] .metric-checkboxes{background:var(--surface-1);border-color:var(--border-color);color:var(--text-primary)}:root[data-theme=dark] .survey-header h1,:root[data-theme=dark] .customize-header h1,:root[data-theme=dark] .dashboard-header h1,:root[data-theme=dark] .card-title h2,:root[data-theme=dark] .main-value,:root[data-theme=dark] .detail-value,:root[data-theme=dark] .card-rule-section h3,:root[data-theme=dark] .metrics-section h3,:root[data-theme=dark] .customize-container,:root[data-theme=dark] .survey-container,:root[data-theme=dark] .customize-status,:root[data-theme=dark] .loading-message,:root[data-theme=dark] .no-data-message h2,:root[data-theme=dark] .no-data-message p,:root[data-theme=dark] .checkbox-label span,:root[data-theme=dark] .calendar-header h3,:root[data-theme=dark] .day-btn,:root[data-theme=dark] .year-btn,:root[data-theme=dark] .date-button,:root[data-theme=dark] .form-field label,:root[data-theme=dark] .rule-field label,:root[data-theme=dark] .metric-field label,:root[data-theme=dark] .subsection-title,:root[data-theme=dark] .section-title.custom,:root[data-theme=dark] .section-title.delay{color:var(--text-primary)}:root[data-theme=dark] .survey-header p,:root[data-theme=dark] .customize-header p,:root[data-theme=dark] .detail-label,:root[data-theme=dark] .card-title .subtitle,:root[data-theme=dark] .field-hint,:root[data-theme=dark] .weekday-names,:root[data-theme=dark] .main-label{color:var(--text-secondary)}:root[data-theme=dark] .form-field input,:root[data-theme=dark] .metric-field input,:root[data-theme=dark] .metric-field select,:root[data-theme=dark] .rule-field input,:root[data-theme=dark] .rule-field select,:root[data-theme=dark] .date-input,:root[data-theme=dark] .date-button,:root[data-theme=dark] .day-btn,:root[data-theme=dark] .year-btn,:root[data-theme=dark] .customize-btn,:root[data-theme=dark] .back-btn,:root[data-theme=dark] .add-btn,:root[data-theme=dark] .submit-btn,:root[data-theme=dark] .save-btn{border-color:var(--border-color)}.custom-metric-card{background:#fff;border-radius:14px;padding:20px 24px;box-shadow:0 4px 12px #00000014;display:flex;flex-direction:column;gap:12px;min-height:140px}.custom-metric-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.custom-metric-card-header h3{margin:0;font-size:18px;font-weight:700;color:#2c3e50}.custom-metric-type{font-size:12px;font-weight:700;text-transform:uppercase;color:#636e72;background:#f1f2f6;padding:4px 10px;border-radius:999px}.custom-metric-card-value{font-size:28px;font-weight:800;color:#2d3436;letter-spacing:.5px}.card-selector{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.card-selector-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 1.5rem;border:2px solid #ddd;border-radius:12px;background:transparent;cursor:pointer;transition:all .3s ease;min-width:120px}.card-selector-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.card-selector-btn.active{box-shadow:0 4px 16px #00000026}.card-letter{font-size:2rem;font-weight:700;font-family:Courier New,monospace}.card-name{font-size:.875rem;color:#666;font-weight:500}.global-settings{position:relative;z-index:20}.settings-fab{width:40px;height:40px;border-radius:8px;border:1px solid #dbe4ef;background:#f8f9fa;color:#1f2a37;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;cursor:pointer}.settings-fab:hover{transform:translateY(-1px);background:#eef2f7;box-shadow:0 10px 18px #1f2a3733}.settings-fab-icon{width:18px;height:18px;object-fit:contain}:root[data-theme=dark] .settings-fab{background:#1f2a37;color:#fff;border-color:var(--border-color)}:root[data-theme=dark] .settings-fab:hover{background:#263445}.settings-panel{position:absolute;top:calc(100% + 10px);right:0;width:240px;border-radius:12px;border:1px solid var(--border-color);background:var(--surface-1);color:var(--text-primary);padding:14px;box-shadow:0 12px 24px #0000002e}.settings-panel h3{margin:0 0 10px;font-size:15px}.settings-control{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.settings-control:last-child{margin-bottom:0}.settings-control label,.settings-control span{font-size:13px;font-weight:600}.settings-control select{padding:8px;border:1px solid var(--border-color);border-radius:8px;background:var(--surface-2);color:var(--text-primary)}.theme-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-buttons button{padding:8px;border-radius:8px;border:1px solid var(--border-color);background:var(--surface-2);color:var(--text-primary)}.theme-buttons button.active{border-color:#3b82f6;background:#3b82f6;color:#fff}.page-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:10px 14px;border-radius:12px;border:1px solid var(--border-color);background:var(--surface-1)}.page-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.page-link-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border:1px solid var(--border-color);border-radius:8px;background:var(--surface-2);color:var(--text-primary);text-decoration:none;font-weight:600;transition:background .2s ease,transform .2s ease}.page-link-btn:hover{transform:translateY(-1px);background:#e7eef8}.page-link-btn.active{border-color:#3b82f6;background:#3b82f6;color:#fff}@media(max-width:768px){.page-topbar{align-items:flex-start;flex-direction:column}.page-links{width:100%}.page-link-btn{flex:1;min-width:120px}}.survey-container{max-width:900px;margin:0 auto;padding:40px 20px}.survey-header{text-align:center;margin-bottom:40px}.survey-header h1{font-size:32px;font-weight:700;color:#2c3e50;margin:0 0 8px}.survey-header p{font-size:16px;color:#7f8c8d;margin:0}.survey-form{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:32px}.form-section{margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid #f0f0f0}.form-section:last-of-type{border-bottom:none}.section-title{font-size:20px;font-weight:700;margin:0 0 20px;padding-bottom:12px;border-bottom:3px solid}.section-title.safety{color:#1dd1a1;border-color:#1dd1a1}.section-title.quality{color:#0984e3;border-color:#0984e3}.section-title.delay{color:#2c3e50;border-color:#2c3e50}.section-title.cost{color:#06c;border-color:#06c}.section-title.people{color:#7b2cbf;border-color:#7b2cbf}.section-title.custom{color:#2d3436;border-color:#2d3436}.subsection-title{font-size:16px;font-weight:600;color:#2c3e50;margin:20px 0 16px}.date-input{width:100%;max-width:300px;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:all .2s ease}.date-input:focus{outline:none;border-color:#0984e3;box-shadow:0 0 0 3px #0984e31a}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.form-field{display:flex;flex-direction:column;gap:8px}.form-field label{font-size:13px;font-weight:600;color:#2c3e50}.form-field input{padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:all .2s ease}.form-field input:focus{outline:none;border-color:#0984e3;box-shadow:0 0 0 3px #0984e31a}.form-field input:hover{border-color:#bdc3c7}.form-actions{margin-top:32px;display:flex;justify-content:center}.submit-btn{padding:14px 48px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.success-message{margin-top:20px;padding:16px;background:#d4edda;border:1px solid #c3e6cb;border-radius:8px;color:#155724;text-align:center;font-weight:600}@media(max-width:768px){.form-grid{grid-template-columns:1fr}.survey-form{padding:20px}}.metric-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 22px #14223514;border:1px solid #dbe4ef;transition:transform .24s ease,box-shadow .24s ease;display:flex;flex-direction:column;height:100%;min-height:780px}.metric-card:hover{box-shadow:0 16px 30px #14223524;transform:translateY(-3px)}.metric-card-safety{border-top:4px solid #1dd1a1}.metric-card-quality{border-top:4px solid #0984e3}.metric-card-delivery{border-top:4px solid #2c3e50}.metric-card-cost{border-top:4px solid #0066cc}.metric-card-people{border-top:4px solid #7b2cbf}.metric-card.success{box-shadow:0 10px 22px #27ae6029;border-left:4px solid #27ae60}.metric-card.success:hover{box-shadow:0 16px 30px #27ae603d}.metric-card.success .card-header{background:linear-gradient(to right,rgba(39,174,96,.05),transparent);border-left:3px solid #27ae60}.metric-card.success .card-header:before{content:"✓";color:#27ae60;font-size:18px;font-weight:700;margin-right:8px}.metric-card.failure{box-shadow:0 10px 22px #e74c3c29;border-left:4px solid #e74c3c}.metric-card.failure:hover{box-shadow:0 16px 30px #e74c3c3d}.metric-card.failure .card-header{background:linear-gradient(to right,rgba(231,76,60,.05),transparent);border-left:3px solid #e74c3c}.metric-card.failure .card-header:before{content:"✗";color:#e74c3c;font-size:18px;font-weight:700;margin-right:8px}.card-header{display:flex;align-items:center;padding:16px;gap:12px;border-bottom:1px solid #e8eef5}.letter-icon{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:inset 0 0 0 1px #ffffff40}.metric-card-safety .letter-icon{background:#1dd1a1}.metric-card-quality .letter-icon{background:#0984e3}.metric-card-delivery .letter-icon{background:#2c3e50}.metric-card-cost .letter-icon{background:#06c}.metric-card-people .letter-icon{background:#7b2cbf}.card-title{flex:1;text-align:left}.card-title h2{font-size:32px;line-height:1;font-weight:800;color:#1f2a37;margin:0}.card-title .subtitle{font-size:13px;color:#7b8796;margin:4px 0 0;font-weight:500}.chevron-icon{font-size:22px;color:#b7c3d1}.card-content{padding:16px;flex:1;display:flex;flex-direction:column;gap:14px}.chart-section{position:relative;height:200px;display:flex;align-items:center;justify-content:center}.letter-chart{width:200px;height:200px}.letter-value{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.main-value-card{display:flex;flex-direction:column;align-items:center;padding:14px;background:#fff;border:1px solid #dbe4ef;border-radius:14px;margin-bottom:8px;box-shadow:inset 0 1px #ffffffe6}.main-value{font-size:42px;line-height:1;font-weight:800;color:#1f2a37;margin-bottom:4px}.main-label{font-size:13px;font-weight:600;color:#7b8796;margin-bottom:10px}.main-icons{display:flex;gap:8px}.icon-btn{width:32px;height:32px;border-radius:8px;background:#eef4ff;border:1px solid #cad8ee;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#3b82f6;cursor:pointer;transition:all .2s ease}.icon-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.icon-btn:hover{background:#deebff}.icon-btn.active:hover{background:#2f74e2}.details-section{display:flex;flex-direction:column;gap:8px}.detail-group{display:flex;flex-direction:column;gap:6px;padding:10px 10px 8px;border-radius:10px;background:#f7f9fc;border:1px solid #e3eaf3}.detail-group-title{font-size:13px;font-weight:700;color:#1f2a37;display:flex;align-items:center;justify-content:space-between}.detail-group-items{display:flex;flex-direction:column;gap:6px}.detail-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:#fff;border-radius:6px;border:1px solid #edf2f7}.detail-item-circle{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#fff;border-radius:6px;border:1px solid #edf2f7}.percentage-circle{max-width:70px;height:auto}.detail-label{font-size:12px;color:#6c7a89;font-weight:600}.detail-value{font-size:12px;color:#223041;font-weight:700}.card-footer{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e8eef5;gap:12px}.percentage-display{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px}.percentage-value{font-size:18px;font-weight:700;color:#1f2a37}.percentage-label{font-size:10px;color:#90a0b1;text-transform:uppercase}.interaction-section{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px}.stats{display:flex;gap:8px;font-size:12px;color:#6f7d8d;margin-right:8px}.stat-item{min-width:32px;min-height:32px;padding:6px 8px;background:#f3f7fc;border-radius:8px;border:1px solid #e3ebf5;display:inline-flex;align-items:center;justify-content:center}.action-btn{display:flex;align-items:center;gap:4px;min-height:32px;padding:6px 10px;border:1px solid #d6e0ec;background:#fff;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;color:#6f7d8d;transition:all .2s ease}.action-btn:hover{border-color:#3b82f6;color:#3b82f6;background:#eff6ff}.like-btn.active{border-color:#3b82f6;color:#fff;background:#3b82f6}.dislike-btn{border-color:#e74c3c;color:#e74c3c}.dislike-btn.active{background:#e74c3c;border-color:#e74c3c;color:#fff}.dislike-btn:hover{background:#fff5f5}.bottom-section{padding:8px 16px;background:#f7f9fc;display:flex;justify-content:flex-end;border-top:1px solid #edf2f7}.date-badge{font-size:11px;color:#7b8796;font-weight:500}@media(max-width:768px){.card-header{padding:16px;gap:10px}.letter-icon{width:48px;height:48px;font-size:24px}.card-content{padding:16px}.card-footer{padding:10px 16px;flex-direction:column;align-items:flex-start}.interaction-section{width:100%;justify-content:space-between}.details-section{grid-template-columns:1fr;gap:8px}}.date-selector{position:relative}.date-button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;color:#2c3e50;transition:all .2s ease;white-space:nowrap}.date-button:hover{background:#f0f0f0;border-color:#d0d0d0}.date-button:active{background:#e8e8e8}.date-picker{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 8px 24px #0000001f;z-index:1000;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.date-picker-content{padding:16px;min-width:320px}.calendar-view{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f0f0f0}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.calendar-header h3{margin:0;font-size:14px;font-weight:600;color:#2c3e50}.nav-btn{background:none;border:none;cursor:pointer;padding:4px 8px;color:#0984e3;border-radius:4px;transition:background .2s ease}.nav-btn:hover{background:#f0f0f0}.weekday-names{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;margin-bottom:8px;font-size:12px;font-weight:600;color:#7f8c8d}.weekday-names div{padding:8px 0}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.day-btn{padding:8px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;color:#2c3e50;transition:all .2s ease;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.day-btn:hover:not(.empty):not(:disabled){background:#e8f4f8;border-color:#0984e3;color:#0984e3}.day-btn.active{background:#0984e3;border-color:#0984e3;color:#fff;font-weight:600}.day-btn.empty{background:transparent;border:none;cursor:default}.day-btn:disabled{cursor:not-allowed}.years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.year-btn{padding:8px 10px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;color:#7f8c8d;transition:all .2s ease}.year-btn:hover{background:#f0f0f0;border-color:#0984e3;color:#0984e3}.year-btn.active{background:#0984e3;border-color:#0984e3;color:#fff}@media(max-width:768px){.date-picker{position:fixed;inset:auto 0 0;border-radius:12px 12px 0 0;max-width:100%}.date-picker-content{min-width:auto}.years-grid{grid-template-columns:repeat(3,1fr)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--app-bg);min-height:100vh;padding:16px;color:var(--text-primary)}.dashboard-container{max-width:2000px;margin:0 auto}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;background:#ffffffeb;padding:16px 22px;border-radius:16px;border:1px solid #dbe4ef;box-shadow:0 8px 24px #1c2a3d14}.dashboard-actions{display:flex;align-items:center;gap:12px}.customize-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:#1f2a37;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;border:1px solid #1f2a37;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.customize-btn:hover{transform:translateY(-1px);background:#263445;box-shadow:0 10px 18px #1f2a3733}.dashboard-header h1{font-size:24px;font-weight:800;color:#1f2a37;letter-spacing:.08em}.metrics-grid{display:grid;grid-template-columns:repeat(5,minmax(260px,1fr));gap:20px;padding:0}@media(max-width:1400px){.metrics-grid{grid-template-columns:repeat(3,minmax(300px,1fr))}}@media(max-width:1000px){.metrics-grid{grid-template-columns:repeat(2,minmax(300px,1fr))}}@media(max-width:768px){body{padding:12px}.dashboard-header{flex-direction:column;align-items:flex-start;gap:14px;padding:14px}.dashboard-actions{flex-wrap:wrap;width:100%;gap:10px}.customize-btn{flex:1;justify-content:center;min-width:190px}.dashboard-header h1{font-size:20px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}@media(max-width:480px){.metrics-grid{grid-template-columns:1fr;gap:12px}}.loading-message{text-align:center;padding:60px 20px;font-size:18px;color:#6b7785}.no-data-message{text-align:center;padding:60px 20px;background:#fff;border-radius:16px;border:1px solid #dbe4ef;box-shadow:0 10px 24px #1c2a3d14}.no-data-message h2{font-size:24px;color:#2c3e50;margin-bottom:12px}.no-data-message p{font-size:16px;color:#7f8c8d;margin-bottom:24px}.survey-link-btn{display:inline-block;padding:12px 32px;background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:all .3s ease}.survey-link-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #3b82f659}.customize-container{max-width:1200px;margin:0 auto;padding:40px 20px}.customize-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}.customize-header h1{font-size:32px;font-weight:700;color:#2c3e50;margin:0 0 8px}.customize-header p{margin:0;color:#7f8c8d}.back-btn{padding:10px 20px;background:#2d3436;color:#fff;text-decoration:none;border-radius:8px;font-weight:600}.customize-card{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:24px}.customize-status{text-align:center;padding:40px 20px;color:#636e72}.customize-error{background:#ffecec;color:#d63031;padding:12px 16px;border-radius:8px;margin-bottom:16px;font-weight:600}.customize-success{background:#e6f9f1;color:#1e9c72;padding:12px 16px;border-radius:8px;margin-bottom:16px;font-weight:600}.customize-grid{display:flex;flex-direction:column;gap:16px}.metric-row{display:grid;grid-template-columns:2fr 1fr 1.5fr .5fr auto;gap:16px;align-items:end;padding:16px;border:1px solid #ecf0f1;border-radius:12px}.metric-field{display:flex;flex-direction:column;gap:6px}.metric-field label{font-size:12px;font-weight:700;color:#2c3e50}.metric-field input,.metric-field select{padding:10px 12px;border:1px solid #dfe6e9;border-radius:8px;font-size:14px}.metric-field input:disabled{background:#f5f6fa;color:#636e72}.metric-toggle{align-items:center}.metric-toggle input{width:20px;height:20px}.metric-delete{background:#ffecec;color:#d63031;border:none;padding:10px 14px;border-radius:8px;font-weight:600;cursor:pointer}.customize-actions{margin-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.add-btn,.save-btn{padding:12px 20px;border:none;border-radius:8px;font-weight:700;cursor:pointer}.add-btn{background:#dfe6e9;color:#2d3436}.save-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.card-rule-section{background:#f8f9fa;border-radius:12px;padding:24px;margin-bottom:32px;border:2px solid #e9ecef}.card-rule-section h3{font-size:20px;font-weight:700;color:#2c3e50;margin:0 0 8px}.card-rule-description{color:#7f8c8d;margin:0 0 20px;font-size:14px}.card-rule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.rule-field{display:flex;flex-direction:column;gap:8px}.rule-field label{font-weight:600;color:#2c3e50;font-size:14px}.rule-field input,.rule-field select{padding:10px;border:2px solid #dfe6e9;border-radius:8px;font-size:14px;transition:border-color .2s}.rule-field input:focus,.rule-field select:focus{outline:none;border-color:#667eea}.field-hint{color:#95a5a6;font-size:12px;font-style:italic}.metrics-section h3{font-size:20px;font-weight:700;color:#2c3e50;margin:0 0 16px}.metric-checkboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:12px;background:#fff;border:1px solid #dfe6e9;border-radius:8px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;border-radius:6px;transition:background-color .2s}.checkbox-label:hover{background-color:#f5f6fa}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#667eea}.checkbox-label span{font-size:14px;color:#2c3e50}.rule-field.full-width{grid-column:1 / -1}@media(max-width:960px){.customize-header{flex-direction:column;align-items:flex-start}.metric-row{grid-template-columns:1fr}.customize-actions{flex-direction:column;align-items:stretch}}