.layout[data-v-105848e2]{min-height:100vh;display:flex;flex-direction:column;transition:all .3s ease}.dark-mode[data-v-105848e2]{background:#1a1a1a;color:#fff}.navbar[data-v-105848e2]{background:#fff;box-shadow:0 2px 10px #0000001a;padding:0 20px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;transition:all .3s ease}.dark-mode .navbar[data-v-105848e2]{background:#2d2d2d;box-shadow:0 2px 10px #0000004d}.nav-brand[data-v-105848e2]{flex-shrink:0}.brand-link[data-v-105848e2]{font-size:1.5rem;font-weight:700;text-decoration:none;color:#42b883;transition:color .3s ease}.brand-link[data-v-105848e2]:hover{color:#369870}.nav-menu[data-v-105848e2]{display:flex;list-style:none;margin:0;padding:0;gap:30px}.nav-item[data-v-105848e2]{margin:0}.nav-link[data-v-105848e2]{text-decoration:none;color:#333;font-weight:500;padding:15px 0;transition:color .3s ease;position:relative}.dark-mode .nav-link[data-v-105848e2]{color:#fff}.nav-link[data-v-105848e2]:hover,.nav-link.router-link-active[data-v-105848e2]{color:#42b883}.nav-link.router-link-active[data-v-105848e2]:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#42b883;border-radius:2px}.nav-actions[data-v-105848e2]{display:flex;align-items:center;gap:15px}.theme-toggle[data-v-105848e2]{background:none;border:2px solid #ddd;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;transition:all .3s ease}.dark-mode .theme-toggle[data-v-105848e2]{border-color:#555}.theme-toggle[data-v-105848e2]:hover{border-color:#42b883;transform:scale(1.1)}.menu-toggle[data-v-105848e2]{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:5px;gap:3px}.menu-toggle span[data-v-105848e2]{width:25px;height:3px;background:#333;transition:all .3s ease}.dark-mode .menu-toggle span[data-v-105848e2]{background:#fff}.main-content[data-v-105848e2]{flex:1;padding:40px 20px;max-width:1200px;margin:0 auto;width:100%}.footer[data-v-105848e2]{background:#f8f9fa;padding:20px;text-align:center;color:#666;border-top:1px solid #eee}.dark-mode .footer[data-v-105848e2]{background:#2d2d2d;color:#ccc;border-top-color:#444}@media (max-width: 768px){.navbar[data-v-105848e2]{padding:0 15px}.nav-menu[data-v-105848e2]{position:fixed;top:70px;left:0;right:0;background:#fff;flex-direction:column;padding:20px;box-shadow:0 2px 10px #0000001a;transform:translateY(-100%);opacity:0;transition:all .3s ease;gap:10px}.dark-mode .nav-menu[data-v-105848e2]{background:#2d2d2d}.nav-menu.active[data-v-105848e2]{transform:translateY(0);opacity:1}.menu-toggle[data-v-105848e2]{display:flex}.main-content[data-v-105848e2]{padding:20px 15px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#2c3e50;background:#fff;transition:all .3s ease}input[type=checkbox],input[type=radio]{opacity:0;position:absolute}*:focus{outline:2px solid #42b883;outline-offset:2px}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid #42b883;outline-offset:2px}html{scroll-behavior:smooth}*{transition:color .3s ease,background-color .3s ease,border-color .3s ease}.card[data-v-82e18c09]{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden;transition:all .3s ease;border:1px solid #e9ecef}.card--hoverable[data-v-82e18c09]:hover{transform:translateY(-2px);box-shadow:0 4px 15px #00000026}.card--clickable[data-v-82e18c09]{cursor:pointer}.card--clickable[data-v-82e18c09]:hover{transform:translateY(-2px);box-shadow:0 4px 15px #00000026}.card-header[data-v-82e18c09]{padding:20px;border-bottom:1px solid #e9ecef;background:#f8f9fa}.card-title[data-v-82e18c09]{margin:0 0 5px;color:#2c3e50;font-size:1.25rem;font-weight:600}.card-subtitle[data-v-82e18c09]{margin:0;color:#6c757d;font-size:.9rem}.card-content[data-v-82e18c09]{padding:20px}.card-footer[data-v-82e18c09]{padding:15px 20px;border-top:1px solid #e9ecef;background:#f8f9fa}.card--success[data-v-82e18c09]{border-left:4px solid #28a745}.card--warning[data-v-82e18c09]{border-left:4px solid #ffc107}.card--error[data-v-82e18c09]{border-left:4px solid #dc3545}.card--info[data-v-82e18c09]{border-left:4px solid #17a2b8}.card--success .card-header[data-v-82e18c09]{background:linear-gradient(90deg,#28a74510,#f8f9fa)}.card--warning .card-header[data-v-82e18c09]{background:linear-gradient(90deg,#ffc10710,#f8f9fa)}.card--error .card-header[data-v-82e18c09]{background:linear-gradient(90deg,#dc354510,#f8f9fa)}.card--info .card-header[data-v-82e18c09]{background:linear-gradient(90deg,#17a2b810,#f8f9fa)}.home[data-v-e7c3a300]{max-width:1200px;margin:0 auto}.hero[data-v-e7c3a300]{text-align:center;padding:60px 20px;background:linear-gradient(135deg,#42b883,#347474);color:#fff;border-radius:20px;margin-bottom:60px}.hero-title[data-v-e7c3a300]{font-size:3rem;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.hero-subtitle[data-v-e7c3a300]{font-size:1.2rem;margin-bottom:40px;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.hero-stats[data-v-e7c3a300]{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}.stat[data-v-e7c3a300]{text-align:center}.stat-number[data-v-e7c3a300]{display:block;font-size:2.5rem;font-weight:700;margin-bottom:5px}.stat-label[data-v-e7c3a300]{font-size:.9rem;opacity:.8}.section-title[data-v-e7c3a300]{font-size:2rem;text-align:center;margin-bottom:40px;color:#2c3e50}.tech-grid[data-v-e7c3a300]{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;margin-bottom:60px}.tech-content[data-v-e7c3a300]{display:flex;flex-direction:column;align-items:center;text-align:center}.tech-icon[data-v-e7c3a300]{font-size:3rem;margin-bottom:20px}.tech-features[data-v-e7c3a300]{list-style:none;padding:0;margin:0;width:100%}.tech-features li[data-v-e7c3a300]{padding:5px 0;color:#666}.tech-features li[data-v-e7c3a300]:before{content:"✓ ";color:#42b883;font-weight:700;margin-right:8px}.btn[data-v-e7c3a300]{padding:10px 20px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-primary[data-v-e7c3a300]{background:#42b883;color:#fff}.btn-primary[data-v-e7c3a300]:hover{background:#369870;transform:translateY(-2px)}.btn-secondary[data-v-e7c3a300]{background:#6c757d;color:#fff}.btn-secondary[data-v-e7c3a300]:hover{background:#545b62}.btn-outline[data-v-e7c3a300]{background:transparent;border:2px solid #42b883;color:#42b883}.btn-outline[data-v-e7c3a300]:hover{background:#42b883;color:#fff}.quick-demo[data-v-e7c3a300]{margin-bottom:60px}.counter-demo[data-v-e7c3a300]{text-align:center;padding:20px}.counter-display[data-v-e7c3a300]{margin-bottom:30px}.counter-number[data-v-e7c3a300]{font-size:4rem;font-weight:700;color:#42b883;background:linear-gradient(135deg,#42b883,#347474);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.counter-controls[data-v-e7c3a300]{display:flex;justify-content:center;gap:15px;margin-bottom:20px;flex-wrap:wrap}.counter-explanation[data-v-e7c3a300]{color:#666;font-style:italic;max-width:500px;margin:0 auto}.steps-grid[data-v-e7c3a300]{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}.step-card[data-v-e7c3a300]{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 10px #0000001a;text-align:center;transition:transform .3s ease}.step-card[data-v-e7c3a300]:hover{transform:translateY(-5px)}.step-number[data-v-e7c3a300]{display:inline-block;width:50px;height:50px;background:#42b883;color:#fff;border-radius:50%;line-height:50px;font-size:1.5rem;font-weight:700;margin-bottom:20px}.step-title[data-v-e7c3a300]{margin-bottom:15px;color:#2c3e50}.step-description[data-v-e7c3a300]{color:#666;line-height:1.6}@media (max-width: 768px){.hero-title[data-v-e7c3a300]{font-size:2rem}.hero-stats[data-v-e7c3a300]{gap:20px}.tech-grid[data-v-e7c3a300]{grid-template-columns:1fr}.counter-controls[data-v-e7c3a300]{flex-direction:column;align-items:center}.steps-grid[data-v-e7c3a300]{grid-template-columns:1fr}}.modal-overlay[data-v-b61cdf68]{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-container[data-v-b61cdf68]{background:#fff;border-radius:12px;box-shadow:0 10px 30px #0000004d;max-width:90vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal-header[data-v-b61cdf68]{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #eee;background:#f8f9fa}.modal-header h3[data-v-b61cdf68]{margin:0;color:#2c3e50}.close-button[data-v-b61cdf68]{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:5px;border-radius:50%;transition:all .2s}.close-button[data-v-b61cdf68]:hover{background:#e9ecef;color:#333}.modal-body[data-v-b61cdf68]{padding:20px;flex:1;overflow-y:auto}.modal-footer[data-v-b61cdf68]{padding:20px;border-top:1px solid #eee;background:#f8f9fa;display:flex;justify-content:flex-end;gap:10px}.modal-enter-active[data-v-b61cdf68],.modal-leave-active[data-v-b61cdf68]{transition:opacity .3s ease}.modal-enter-from[data-v-b61cdf68],.modal-leave-to[data-v-b61cdf68]{opacity:0}.modal-enter-active .modal-container[data-v-b61cdf68]{animation:modalSlideIn-b61cdf68 .3s ease}.modal-leave-active .modal-container[data-v-b61cdf68]{animation:modalSlideOut-b61cdf68 .3s ease}@keyframes modalSlideIn-b61cdf68{0%{transform:translateY(-50px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes modalSlideOut-b61cdf68{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-50px) scale(.9);opacity:0}}@media (max-width: 768px){.modal-container[data-v-b61cdf68]{margin:20px;max-width:calc(100vw - 40px)}.modal-header[data-v-b61cdf68],.modal-body[data-v-b61cdf68],.modal-footer[data-v-b61cdf68]{padding:15px}}.modal-demo[data-v-4fe47176]{max-width:1200px;margin:0 auto}.page-header[data-v-4fe47176]{text-align:center;margin-bottom:40px}.page-header h1[data-v-4fe47176]{font-size:2.5rem;color:#2c3e50;margin-bottom:15px}.page-description[data-v-4fe47176]{font-size:1.1rem;color:#666;max-width:600px;margin:0 auto}.explanation[data-v-4fe47176]{line-height:1.6}.explanation ul[data-v-4fe47176]{margin:15px 0;padding-left:20px}.explanation li[data-v-4fe47176]{margin:8px 0}.demo-grid[data-v-4fe47176]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin:40px 0}.demo-content[data-v-4fe47176]{text-align:center}.code-explanation[data-v-4fe47176]{margin-top:20px;text-align:left}.code-explanation h4[data-v-4fe47176]{color:#2c3e50;margin-bottom:10px}.code-explanation ul[data-v-4fe47176]{margin:0;padding-left:20px}.code-explanation li[data-v-4fe47176]{margin:5px 0;color:#666;font-size:.9rem}.btn[data-v-4fe47176]{padding:12px 24px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;margin:5px}.btn-primary[data-v-4fe47176]{background:#42b883;color:#fff}.btn-primary[data-v-4fe47176]:hover{background:#369870}.btn-secondary[data-v-4fe47176]{background:#6c757d;color:#fff}.btn-secondary[data-v-4fe47176]:hover{background:#545b62}.btn-success[data-v-4fe47176]{background:#28a745;color:#fff}.btn-success[data-v-4fe47176]:hover{background:#218838}.btn-warning[data-v-4fe47176]{background:#ffc107;color:#212529}.btn-warning[data-v-4fe47176]:hover{background:#e0a800}.btn-info[data-v-4fe47176]{background:#17a2b8;color:#fff}.btn-info[data-v-4fe47176]:hover{background:#138496}.btn-outline[data-v-4fe47176]{background:transparent;border:2px solid #42b883;color:#42b883}.btn-outline[data-v-4fe47176]:hover{background:#42b883;color:#fff}.implementation h3[data-v-4fe47176]{color:#2c3e50;margin:30px 0 15px}.code-block[data-v-4fe47176]{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:20px;overflow-x:auto;margin:15px 0}.code-block code[data-v-4fe47176]{font-family:Courier New,monospace;font-size:.9rem;line-height:1.4;color:#2c3e50}.form-group[data-v-4fe47176]{margin-bottom:20px;text-align:left}.form-group label[data-v-4fe47176]{display:block;margin-bottom:5px;font-weight:500;color:#2c3e50}.form-group input[data-v-4fe47176],.form-group textarea[data-v-4fe47176]{width:100%;padding:10px;border:2px solid #ddd;border-radius:6px;font-size:16px;transition:border-color .3s ease}.form-group input[data-v-4fe47176]:focus,.form-group textarea[data-v-4fe47176]:focus{outline:none;border-color:#42b883}.confirm-content[data-v-4fe47176]{text-align:center;padding:20px}.confirm-icon[data-v-4fe47176]{font-size:3rem;margin-bottom:20px}.confirm-warning[data-v-4fe47176]{color:#dc3545;font-style:italic;margin-top:10px}.custom-header[data-v-4fe47176]{display:flex;align-items:center;justify-content:space-between;width:100%}.custom-badge[data-v-4fe47176]{background:#ffc107;color:#212529;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:700}.custom-content[data-v-4fe47176]{text-align:center}.custom-image[data-v-4fe47176]{margin-bottom:20px}.placeholder-image[data-v-4fe47176]{font-size:4rem;color:#ddd;background:#f8f9fa;border:2px dashed #ddd;border-radius:8px;padding:40px;margin-bottom:20px}.feature-list[data-v-4fe47176]{text-align:left;margin:20px 0}.feature-item[data-v-4fe47176]{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #eee}.feature-item[data-v-4fe47176]:last-child{border-bottom:none}.feature-icon[data-v-4fe47176]{margin-right:12px;font-size:1.2rem}@media (max-width: 768px){.demo-grid[data-v-4fe47176]{grid-template-columns:1fr}.page-header h1[data-v-4fe47176]{font-size:2rem}.code-block[data-v-4fe47176]{font-size:.8rem}}.form-demo[data-v-898a7f46]{max-width:1200px;margin:0 auto}.page-header[data-v-898a7f46]{text-align:center;margin-bottom:40px}.page-header h1[data-v-898a7f46]{font-size:2.5rem;color:#2c3e50;margin-bottom:15px}.page-description[data-v-898a7f46]{font-size:1.1rem;color:#666;max-width:600px;margin:0 auto}.demo-section[data-v-898a7f46]{margin:40px 0}.demo-section h2[data-v-898a7f46]{color:#2c3e50;margin-bottom:20px}.explanation ul[data-v-898a7f46]{margin:15px 0;padding-left:20px}.explanation li[data-v-898a7f46]{margin:8px 0}.input-demo[data-v-898a7f46]{display:grid;gap:20px}.input-group[data-v-898a7f46]{display:flex;flex-direction:column;gap:8px}.input-group label[data-v-898a7f46]{font-weight:500;color:#2c3e50}.input-group input[data-v-898a7f46],.input-group textarea[data-v-898a7f46]{padding:10px;border:2px solid #ddd;border-radius:6px;font-size:16px;transition:border-color .3s ease}.input-group input[data-v-898a7f46]:focus,.input-group textarea[data-v-898a7f46]:focus{outline:none;border-color:#42b883}.value-display[data-v-898a7f46]{font-size:.9rem;color:#666;font-style:italic}.selection-demo[data-v-898a7f46]{display:grid;gap:30px}.checkbox-section[data-v-898a7f46],.radio-section[data-v-898a7f46],.switch-section[data-v-898a7f46]{padding:20px;background:#f8f9fa;border-radius:8px}.checkbox-group[data-v-898a7f46],.radio-group[data-v-898a7f46]{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:15px 0}.checkbox-item[data-v-898a7f46],.radio-item[data-v-898a7f46]{display:flex;align-items:center;gap:8px;cursor:pointer}.switch[data-v-898a7f46]{display:flex;align-items:center;gap:10px;margin:10px 0;cursor:pointer}.slider[data-v-898a7f46]{position:relative;width:50px;height:24px;background:#ddd;border-radius:24px;transition:.3s}.slider[data-v-898a7f46]:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.3s}input:checked+.slider[data-v-898a7f46]{background:#42b883}input:checked+.slider[data-v-898a7f46]:before{transform:translate(26px)}.result[data-v-898a7f46]{margin-top:15px;padding:10px;background:#fff;border-radius:6px;font-size:.9rem}.select-demo[data-v-898a7f46]{display:grid;gap:20px}.select-group[data-v-898a7f46]{display:flex;flex-direction:column;gap:8px}.select-group select[data-v-898a7f46]{padding:10px;border:2px solid #ddd;border-radius:6px;font-size:16px;background:#fff}.select-group select[data-v-898a7f46]:focus{outline:none;border-color:#42b883}.validation-form[data-v-898a7f46]{max-width:800px;margin:0 auto}.form-row[data-v-898a7f46]{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.form-group[data-v-898a7f46]{display:flex;flex-direction:column;gap:8px}.form-group.error label[data-v-898a7f46]{color:#dc3545}.form-group label[data-v-898a7f46]{font-weight:500;color:#2c3e50}.form-group input[data-v-898a7f46]{padding:12px;border:2px solid #ddd;border-radius:6px;font-size:16px;transition:all .3s ease}.form-group input[data-v-898a7f46]:focus{outline:none;border-color:#42b883}.form-group input.invalid[data-v-898a7f46]{border-color:#dc3545;background-color:#fff5f5}.error-message[data-v-898a7f46]{color:#dc3545;font-size:.85rem;margin-top:-4px}.password-field[data-v-898a7f46]{position:relative}.password-toggle[data-v-898a7f46]{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px}.password-strength[data-v-898a7f46]{margin-top:8px}.strength-bar[data-v-898a7f46]{height:6px;background:#eee;border-radius:3px;overflow:hidden;margin-bottom:5px}.strength-fill[data-v-898a7f46]{height:100%;transition:all .3s ease}.strength-bar.weak .strength-fill[data-v-898a7f46]{background:#dc3545}.strength-bar.medium .strength-fill[data-v-898a7f46]{background:#ffc107}.strength-bar.strong .strength-fill[data-v-898a7f46]{background:#28a745}.strength-bar.very-strong .strength-fill[data-v-898a7f46]{background:#007bff}.strength-text[data-v-898a7f46]{font-size:.8rem;color:#666}.checkbox-label[data-v-898a7f46]{display:flex;align-items:center;gap:8px;cursor:pointer}.form-actions[data-v-898a7f46]{display:flex;gap:15px;justify-content:center;margin:30px 0;flex-wrap:wrap}.btn[data-v-898a7f46]{padding:12px 24px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-primary[data-v-898a7f46]{background:#42b883;color:#fff}.btn-primary[data-v-898a7f46]:hover:not(.disabled){background:#369870}.btn-primary.disabled[data-v-898a7f46]{background:#ccc;cursor:not-allowed}.btn-secondary[data-v-898a7f46]{background:#6c757d;color:#fff}.btn-secondary[data-v-898a7f46]:hover{background:#545b62}.form-summary[data-v-898a7f46]{margin-top:30px;padding:20px;background:#f8f9fa;border-radius:8px}.form-summary h4[data-v-898a7f46]{margin-bottom:15px;color:#2c3e50}.form-summary pre[data-v-898a7f46]{background:#fff;padding:15px;border-radius:6px;overflow-x:auto;font-size:.85rem;color:#333}.implementation h3[data-v-898a7f46]{color:#2c3e50;margin:30px 0 15px}.code-block[data-v-898a7f46]{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:20px;overflow-x:auto;margin:15px 0}.code-block code[data-v-898a7f46]{font-family:Courier New,monospace;font-size:.9rem;line-height:1.4;color:#2c3e50}@media (max-width: 768px){.form-row[data-v-898a7f46],.checkbox-group[data-v-898a7f46],.radio-group[data-v-898a7f46]{grid-template-columns:1fr}.form-actions[data-v-898a7f46]{flex-direction:column;align-items:center}.page-header h1[data-v-898a7f46]{font-size:2rem}}.component-demo[data-v-531de500]{max-width:1200px;margin:0 auto}.page-header[data-v-531de500]{text-align:center;margin-bottom:40px}.page-header h1[data-v-531de500]{font-size:2.5rem;color:#2c3e50;margin-bottom:15px}.page-description[data-v-531de500]{font-size:1.1rem;color:#666;max-width:600px;margin:0 auto}.demo-section[data-v-531de500]{margin:40px 0}.demo-section h2[data-v-531de500]{color:#2c3e50;margin-bottom:20px}.explanation ul[data-v-531de500]{margin:15px 0;padding-left:20px}.explanation li[data-v-531de500]{margin:8px 0}.props-demo[data-v-531de500]{display:grid;grid-template-columns:1fr 1fr;gap:30px}.props-controls h4[data-v-531de500],.component-preview h4[data-v-531de500]{margin-bottom:20px;color:#2c3e50}.control-group[data-v-531de500]{margin-bottom:15px}.control-group label[data-v-531de500]{display:block;margin-bottom:5px;font-weight:500;color:#2c3e50}.control-group input[data-v-531de500],.control-group select[data-v-531de500]{width:100%;padding:8px;border:2px solid #ddd;border-radius:6px;font-size:14px}.control-group input[data-v-531de500]:focus,.control-group select[data-v-531de500]:focus{outline:none;border-color:#42b883}.user-card[data-v-531de500]{display:flex;align-items:center;gap:15px;padding:20px;background:#fff;border:2px solid #eee;border-radius:12px;cursor:pointer;transition:all .3s ease}.user-card[data-v-531de500]:hover{border-color:#42b883;transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.user-avatar[data-v-531de500]{position:relative;width:60px;height:60px}.user-avatar img[data-v-531de500]{width:100%;height:100%;border-radius:50%;object-fit:cover}.avatar-placeholder[data-v-531de500]{width:100%;height:100%;border-radius:50%;background:#42b883;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}.status-indicator[data-v-531de500]{position:absolute;bottom:2px;right:2px;width:16px;height:16px;border-radius:50%;border:2px solid white}.status-indicator.online[data-v-531de500]{background:#28a745}.status-indicator.away[data-v-531de500]{background:#ffc107}.status-indicator.busy[data-v-531de500]{background:#dc3545}.status-indicator.offline[data-v-531de500]{background:#6c757d}.user-name[data-v-531de500]{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#2c3e50}.verified-badge[data-v-531de500]{background:#28a745;color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px}.user-details[data-v-531de500]{color:#666;font-size:14px}.slots-demo[data-v-531de500],.slot-examples[data-v-531de500]{display:grid;gap:30px}.slot-example h4[data-v-531de500]{margin-bottom:15px;color:#2c3e50}.slot-card[data-v-531de500]{border:2px solid #eee;border-radius:12px;overflow:hidden;background:#fff}.slot-card-header[data-v-531de500]{background:#f8f9fa;padding:20px;border-bottom:1px solid #eee}.slot-card-body[data-v-531de500]{padding:20px}.slot-card-footer[data-v-531de500]{background:#f8f9fa;padding:15px 20px;border-top:1px solid #eee}.custom-header[data-v-531de500]{display:flex;align-items:center;justify-content:space-between}.custom-header h3[data-v-531de500]{margin:0;color:#2c3e50}.badge[data-v-531de500]{background:#42b883;color:#fff;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:700}.rich-content ul[data-v-531de500]{margin:15px 0;padding-left:20px}.custom-footer[data-v-531de500]{display:flex;gap:10px;justify-content:flex-end}.data-list[data-v-531de500]{border:1px solid #eee;border-radius:8px;overflow:hidden}.data-list-item[data-v-531de500]{border-bottom:1px solid #eee}.data-list-item[data-v-531de500]:last-child{border-bottom:none}.custom-item[data-v-531de500]{display:flex;align-items:center;gap:15px;padding:20px;transition:background-color .2s ease}.custom-item[data-v-531de500]:hover{background:#f8f9fa}.item-number[data-v-531de500]{background:#42b883;color:#fff;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.item-content[data-v-531de500]{flex:1}.item-content h5[data-v-531de500]{margin:0 0 5px;color:#2c3e50}.item-content p[data-v-531de500]{margin:0 0 10px;color:#666;font-size:.9rem}.item-tags[data-v-531de500]{display:flex;gap:5px}.tag[data-v-531de500]{padding:2px 8px;border-radius:12px;font-size:.8rem;font-weight:500}.tag.vue[data-v-531de500]{background:#e8f5e8;color:#2d5a32}.tag.javascript[data-v-531de500]{background:#fff3cd;color:#856404}.tag.frontend[data-v-531de500]{background:#e2e3ff;color:#383d41}.tag.components[data-v-531de500]{background:#f8d7da;color:#721c24}.tag.advanced[data-v-531de500]{background:#d1ecf1;color:#0c5460}.tag.state[data-v-531de500]{background:#d4edda;color:#155724}.tag.pinia[data-v-531de500]{background:#ffeaa7;color:#6c5ce7}.communication-demo[data-v-531de500]{display:grid;gap:40px}.parent-child-demo[data-v-531de500],.counter-demo[data-v-531de500]{padding:20px;background:#f8f9fa;border-radius:12px}.communication-flow[data-v-531de500]{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}.parent-section h5[data-v-531de500]{margin-bottom:15px;color:#2c3e50}.message-list[data-v-531de500]{max-height:200px;overflow-y:auto;border:1px solid #ddd;border-radius:8px;padding:10px;background:#fff}.message-item[data-v-531de500]{padding:8px 0;border-bottom:1px solid #eee;font-size:.9rem}.message-item[data-v-531de500]:last-child{border-bottom:none}.message-item small[data-v-531de500]{color:#666;margin-left:10px}.message-sender[data-v-531de500]{background:#fff;padding:20px;border-radius:8px;border:1px solid #ddd}.message-sender h5[data-v-531de500]{margin-bottom:15px;color:#2c3e50}.sender-controls[data-v-531de500]{display:flex;flex-direction:column;gap:10px}.sender-controls input[data-v-531de500]{padding:8px;border:1px solid #ddd;border-radius:6px}.sender-controls button[data-v-531de500]{padding:8px 16px;background:#42b883;color:#fff;border:none;border-radius:6px;cursor:pointer}.sender-controls button[data-v-531de500]:disabled{background:#ccc;cursor:not-allowed}.counters[data-v-531de500]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:20px}.counter-component[data-v-531de500]{background:#fff;border:2px solid;border-radius:12px;padding:20px;text-align:center}.counter-component h6[data-v-531de500]{margin:0 0 15px;color:#2c3e50}.counter-display[data-v-531de500]{font-size:3rem;font-weight:700;margin-bottom:15px}.counter-controls[data-v-531de500]{display:flex;gap:5px;justify-content:center}.counter-controls button[data-v-531de500]{padding:8px 12px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease}.counter-controls button[data-v-531de500]:hover{background:#f8f9fa}.counter-controls button.reset[data-v-531de500]{background:#dc3545;color:#fff;border-color:#dc3545}.total[data-v-531de500]{text-align:center;font-size:1.5rem;color:#2c3e50}.btn[data-v-531de500]{padding:10px 16px;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-primary[data-v-531de500]{background:#42b883;color:#fff}.btn-primary[data-v-531de500]:hover{background:#369870}.btn-secondary[data-v-531de500]{background:#6c757d;color:#fff}.btn-secondary[data-v-531de500]:hover{background:#545b62}.implementation h3[data-v-531de500]{color:#2c3e50;margin:30px 0 15px}.code-block[data-v-531de500]{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:20px;overflow-x:auto;margin:15px 0}.code-block code[data-v-531de500]{font-family:Courier New,monospace;font-size:.9rem;line-height:1.4;color:#2c3e50}@media (max-width: 768px){.props-demo[data-v-531de500],.communication-flow[data-v-531de500],.counters[data-v-531de500]{grid-template-columns:1fr}.page-header h1[data-v-531de500]{font-size:2rem}}.lifecycle-demo[data-v-a52cf729]{max-width:1200px;margin:0 auto}.page-header[data-v-a52cf729]{text-align:center;margin-bottom:40px}.page-header h1[data-v-a52cf729]{font-size:2.5rem;color:#2c3e50;margin-bottom:15px}.page-description[data-v-a52cf729]{font-size:1.1rem;color:#666;max-width:600px;margin:0 auto}.demo-section[data-v-a52cf729]{margin:40px 0}.demo-section h2[data-v-a52cf729]{color:#2c3e50;margin-bottom:20px}.explanation ul[data-v-a52cf729]{margin:15px 0;padding-left:20px}.explanation li[data-v-a52cf729]{margin:8px 0}.lifecycle-monitor[data-v-a52cf729]{display:grid;grid-template-columns:1fr 1fr;gap:30px}.lifecycle-log h4[data-v-a52cf729],.lifecycle-controls h4[data-v-a52cf729]{margin-bottom:15px;color:#2c3e50}.log-container[data-v-a52cf729]{max-height:300px;overflow-y:auto;border:1px solid #ddd;border-radius:8px;padding:15px;background:#f8f9fa;margin-bottom:15px}.log-entry[data-v-a52cf729]{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid #eee;font-size:.9rem}.log-entry[data-v-a52cf729]:last-child{border-bottom:none}.log-entry.mounted[data-v-a52cf729]{color:#28a745}.log-entry.updated[data-v-a52cf729]{color:#ffc107}.log-entry.unmounted[data-v-a52cf729]{color:#dc3545}.log-entry.child[data-v-a52cf729]{color:#17a2b8}.log-time[data-v-a52cf729]{font-weight:700;min-width:80px}.log-hook[data-v-a52cf729]{font-family:monospace;background:#e9ecef;padding:2px 6px;border-radius:4px;min-width:100px}.log-message[data-v-a52cf729]{flex:1}.control-buttons[data-v-a52cf729]{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.data-display[data-v-a52cf729]{background:#f8f9fa;padding:15px;border-radius:8px;border:1px solid #ddd}.data-display p[data-v-a52cf729]{margin:5px 0;font-family:monospace}.child-component-area[data-v-a52cf729]{margin-top:30px;padding-top:30px;border-top:2px solid #eee}.child-component[data-v-a52cf729]{background:#e8f5e8;border:2px solid #28a745;border-radius:12px;padding:20px;text-align:center}.child-component h4[data-v-a52cf729]{margin-bottom:15px;color:#155724}.child-controls[data-v-a52cf729]{display:flex;gap:10px;justify-content:center;margin-top:15px}.reactivity-demo[data-v-a52cf729]{display:grid;gap:40px}.watcher-demo[data-v-a52cf729],.computed-demo[data-v-a52cf729]{padding:20px;background:#f8f9fa;border-radius:12px}.watcher-demo h4[data-v-a52cf729],.computed-demo h4[data-v-a52cf729]{margin-bottom:20px;color:#2c3e50}.watcher-controls[data-v-a52cf729]{display:grid;gap:25px}.input-group[data-v-a52cf729]{display:flex;flex-direction:column;gap:8px}.input-group label[data-v-a52cf729]{font-weight:500;color:#2c3e50}.input-group input[data-v-a52cf729]{padding:8px;border:2px solid #ddd;border-radius:6px}.input-group input[data-v-a52cf729]:focus{outline:none;border-color:#42b883}.watcher-info[data-v-a52cf729]{background:#fff;padding:10px;border-radius:6px;border:1px solid #ddd}.watcher-info small[data-v-a52cf729]{color:#666}.watcher-info pre[data-v-a52cf729]{margin:10px 0 0;font-size:.8rem;color:#333}.array-controls[data-v-a52cf729]{display:flex;gap:10px;align-items:center}.array-display[data-v-a52cf729]{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.array-item[data-v-a52cf729]{background:#fff;border:1px solid #ddd;border-radius:6px;padding:5px 10px;font-size:.9rem;display:flex;align-items:center;gap:5px}.remove-btn[data-v-a52cf729]{background:#dc3545;color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:12px}.computed-examples[data-v-a52cf729]{background:#fff;padding:20px;border-radius:8px;border:1px solid #ddd}.computed-item label[data-v-a52cf729]{display:block;margin-bottom:15px;font-weight:500;color:#2c3e50}.product-list[data-v-a52cf729]{display:grid;gap:10px;margin-bottom:20px}.product-item[data-v-a52cf729]{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#f8f9fa;border-radius:6px}.computed-results[data-v-a52cf729]{background:#e8f5e8;padding:15px;border-radius:8px;border:1px solid #28a745}.computed-results p[data-v-a52cf729]{margin:5px 0;font-family:monospace}.composables-demo[data-v-a52cf729]{display:grid;gap:30px}.composable-example[data-v-a52cf729]{background:#f8f9fa;padding:20px;border-radius:12px;border:1px solid #ddd}.composable-example h4[data-v-a52cf729]{margin-bottom:15px;color:#2c3e50}.timer-display[data-v-a52cf729]{text-align:center}.timer-time[data-v-a52cf729]{font-size:3rem;font-weight:700;color:#42b883;margin-bottom:20px;font-family:monospace}.timer-controls[data-v-a52cf729]{display:flex;gap:10px;justify-content:center;margin-bottom:15px}.timer-info[data-v-a52cf729]{color:#666}.storage-demo[data-v-a52cf729]{text-align:center}.storage-controls[data-v-a52cf729]{display:flex;gap:10px;justify-content:center;margin-bottom:15px}.storage-controls input[data-v-a52cf729]{padding:8px;border:1px solid #ddd;border-radius:6px}.storage-info[data-v-a52cf729]{background:#fff;padding:15px;border-radius:8px;border:1px solid #ddd}.mouse-demo[data-v-a52cf729]{text-align:center}.mouse-tracker[data-v-a52cf729]{position:relative;height:200px;background:#fff;border:2px dashed #ddd;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:crosshair;overflow:hidden}.mouse-info[data-v-a52cf729]{display:flex;gap:20px;font-family:monospace;font-weight:700;color:#42b883}.mouse-pointer[data-v-a52cf729]{position:absolute;width:10px;height:10px;background:#42b883;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:all .1s ease}.btn[data-v-a52cf729]{padding:8px 16px;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block}.btn[data-v-a52cf729]:disabled{opacity:.6;cursor:not-allowed}.btn-primary[data-v-a52cf729]{background:#42b883;color:#fff}.btn-primary[data-v-a52cf729]:hover:not(:disabled){background:#369870}.btn-secondary[data-v-a52cf729]{background:#6c757d;color:#fff}.btn-secondary[data-v-a52cf729]:hover{background:#545b62}.btn-success[data-v-a52cf729]{background:#28a745;color:#fff}.btn-success[data-v-a52cf729]:hover:not(:disabled){background:#218838}.btn-warning[data-v-a52cf729]{background:#ffc107;color:#212529}.btn-warning[data-v-a52cf729]:hover{background:#e0a800}.implementation h3[data-v-a52cf729]{color:#2c3e50;margin:30px 0 15px}.code-block[data-v-a52cf729]{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:20px;overflow-x:auto;margin:15px 0}.code-block code[data-v-a52cf729]{font-family:Courier New,monospace;font-size:.9rem;line-height:1.4;color:#2c3e50}@media (max-width: 768px){.lifecycle-monitor[data-v-a52cf729]{grid-template-columns:1fr}.child-controls[data-v-a52cf729],.timer-controls[data-v-a52cf729],.storage-controls[data-v-a52cf729],.array-controls[data-v-a52cf729]{flex-direction:column;align-items:center}.page-header h1[data-v-a52cf729]{font-size:2rem}}.state-demo[data-v-280e5e75]{max-width:1200px;margin:0 auto}.page-header[data-v-280e5e75]{text-align:center;margin-bottom:40px}.page-header h1[data-v-280e5e75]{font-size:2.5rem;color:#2c3e50;margin-bottom:15px}.page-description[data-v-280e5e75]{font-size:1.1rem;color:#666;max-width:600px;margin:0 auto}.demo-section[data-v-280e5e75]{margin:40px 0}.demo-section h2[data-v-280e5e75]{color:#2c3e50;margin-bottom:20px}.explanation ul[data-v-280e5e75]{margin:15px 0;padding-left:20px}.explanation li[data-v-280e5e75]{margin:8px 0}.state-overview[data-v-280e5e75]{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.state-section[data-v-280e5e75]{background:#f8f9fa;padding:20px;border-radius:12px;border:1px solid #ddd}.state-section h4[data-v-280e5e75]{margin:0 0 15px;color:#2c3e50;font-size:1.1rem}.state-item[data-v-280e5e75]{display:flex;justify-content:space-between;align-items:center;margin:10px 0;padding:8px 0;border-bottom:1px solid #eee}.state-item[data-v-280e5e75]:last-child{border-bottom:none}.state-label[data-v-280e5e75]{font-weight:500;color:#666}.state-value[data-v-280e5e75]{font-family:monospace;background:#fff;padding:4px 8px;border-radius:4px;border:1px solid #ddd;color:#2c3e50}.counter-value[data-v-280e5e75]{font-size:1.2rem;font-weight:700;color:#42b883}.counter-controls[data-v-280e5e75]{display:flex;gap:5px}.user-info[data-v-280e5e75],.todos-summary[data-v-280e5e75]{display:flex;flex-direction:column;gap:5px}.demo-grid[data-v-280e5e75]{display:grid;grid-template-columns:1fr 1fr;gap:30px}.user-form[data-v-280e5e75]{display:flex;flex-direction:column;gap:15px}.form-group[data-v-280e5e75]{display:flex;flex-direction:column;gap:5px}.form-group label[data-v-280e5e75]{font-weight:500;color:#2c3e50}.form-group input[data-v-280e5e75]{padding:8px;border:2px solid #ddd;border-radius:6px;font-size:14px}.form-group input[data-v-280e5e75]:focus{outline:none;border-color:#42b883}.checkbox-label[data-v-280e5e75]{display:flex;align-items:center;gap:8px;cursor:pointer}.todos-manager[data-v-280e5e75]{display:flex;flex-direction:column;gap:20px}.add-todo[data-v-280e5e75]{display:flex;gap:10px}.add-todo input[data-v-280e5e75]{flex:1;padding:8px;border:2px solid #ddd;border-radius:6px}.add-todo input[data-v-280e5e75]:focus{outline:none;border-color:#42b883}.todos-list[data-v-280e5e75]{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.todo-item[data-v-280e5e75]{display:flex;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid #ddd;border-radius:6px;transition:all .3s ease}.todo-item.completed[data-v-280e5e75]{background:#f8f9fa;opacity:.7}.todo-item.completed .todo-text[data-v-280e5e75]{text-decoration:line-through;color:#666}.todo-checkbox[data-v-280e5e75]{position:relative;cursor:pointer}.todo-checkbox input[data-v-280e5e75]{position:absolute;opacity:0;cursor:pointer}.checkmark[data-v-280e5e75]{display:block;width:20px;height:20px;background:#fff;border:2px solid #ddd;border-radius:4px;transition:all .3s ease}.todo-checkbox input:checked+.checkmark[data-v-280e5e75]{background:#42b883;border-color:#42b883}.todo-checkbox input:checked+.checkmark[data-v-280e5e75]:after{content:"✓";color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px}.todo-text[data-v-280e5e75]{flex:1;color:#2c3e50}.todo-remove[data-v-280e5e75]{background:#dc3545;color:#fff;border:none;border-radius:4px;width:24px;height:24px;cursor:pointer;font-size:12px;transition:background-color .3s ease}.todo-remove[data-v-280e5e75]:hover{background:#c82333}.reactivity-demo[data-v-280e5e75]{text-align:center}.demo-description[data-v-280e5e75]{background:#e8f5e8;padding:15px;border-radius:8px;border:1px solid #28a745;margin-bottom:30px;color:#155724}.sync-demos[data-v-280e5e75]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.sync-demo[data-v-280e5e75]{background:#f8f9fa;padding:20px;border-radius:12px;border:1px solid #ddd}.sync-demo h5[data-v-280e5e75]{margin:0 0 15px;color:#2c3e50}.mini-counter[data-v-280e5e75]{display:flex;flex-direction:column;align-items:center;gap:10px}.counter-display[data-v-280e5e75]{font-size:2rem;font-weight:700;color:#42b883;font-family:monospace}.mini-controls[data-v-280e5e75]{display:flex;gap:5px}.btn-mini[data-v-280e5e75]{padding:6px 12px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;transition:all .3s ease}.btn-mini[data-v-280e5e75]:hover{background:#f8f9fa;border-color:#42b883}.theme-status[data-v-280e5e75]{display:flex;flex-direction:column;align-items:center;gap:10px}.theme-indicator[data-v-280e5e75]{padding:8px 16px;border-radius:20px;background:#fff3cd;color:#856404;font-weight:500;transition:all .3s ease}.theme-indicator.dark[data-v-280e5e75]{background:#343a40;color:#fff}.progress-demo[data-v-280e5e75]{display:flex;flex-direction:column;gap:10px}.progress-bar[data-v-280e5e75]{width:100%;height:8px;background:#e9ecef;border-radius:4px;overflow:hidden}.progress-fill[data-v-280e5e75]{height:100%;background:#42b883;border-radius:4px;transition:width .3s ease}.progress-text[data-v-280e5e75]{font-family:monospace;font-size:.9rem;color:#666}.async-demo[data-v-280e5e75]{text-align:center}.async-actions[data-v-280e5e75]{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:20px}.notification[data-v-280e5e75]{padding:15px;border-radius:8px;margin-top:20px;display:flex;justify-content:space-between;align-items:center}.notification.success[data-v-280e5e75]{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.notification.error[data-v-280e5e75]{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.notification.info[data-v-280e5e75]{background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.notification-close[data-v-280e5e75]{background:none;border:none;cursor:pointer;font-size:16px;color:inherit}.btn[data-v-280e5e75]{padding:8px 16px;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block}.btn[data-v-280e5e75]:disabled{opacity:.6;cursor:not-allowed}.btn-primary[data-v-280e5e75]{background:#42b883;color:#fff}.btn-primary[data-v-280e5e75]:hover:not(:disabled){background:#369870}.btn-secondary[data-v-280e5e75]{background:#6c757d;color:#fff}.btn-secondary[data-v-280e5e75]:hover{background:#545b62}.btn-success[data-v-280e5e75]{background:#28a745;color:#fff}.btn-success[data-v-280e5e75]:hover{background:#218838}.btn-warning[data-v-280e5e75]{background:#ffc107;color:#212529}.btn-warning[data-v-280e5e75]:hover{background:#e0a800}.btn-outline[data-v-280e5e75]{background:transparent;border:2px solid #42b883;color:#42b883}.btn-outline[data-v-280e5e75]:hover{background:#42b883;color:#fff}.implementation h3[data-v-280e5e75]{color:#2c3e50;margin:30px 0 15px}.code-block[data-v-280e5e75]{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:20px;overflow-x:auto;margin:15px 0}.code-block code[data-v-280e5e75]{font-family:Courier New,monospace;font-size:.9rem;line-height:1.4;color:#2c3e50}@media (max-width: 768px){.demo-grid[data-v-280e5e75],.state-overview[data-v-280e5e75],.sync-demos[data-v-280e5e75]{grid-template-columns:1fr}.async-actions[data-v-280e5e75]{flex-direction:column;align-items:center}.page-header h1[data-v-280e5e75]{font-size:2rem}}:root{--color-primary: #42b883;--color-secondary: #6c757d;--color-background: #ffffff;--color-surface: #f8f9fa;--color-text: #2c3e50;--color-text-secondary: #666666;--color-border: #dee2e6;--color-accent: #ff6b6b;--transition-speed: .3s}[data-theme=dark]{--color-primary: #4ade80;--color-secondary: #9ca3af;--color-background: #1a1a1a;--color-surface: #2d2d2d;--color-text: #ffffff;--color-text-secondary: #cccccc;--color-border: #444444;--color-accent: #ff8585}.theme-demo[data-v-5986f4a9]{max-width:1200px;margin:0 auto;background:var(--color-background);color:var(--color-text);transition:all var(--transition-speed) ease}.dark-theme[data-v-5986f4a9]{background:var(--color-background);color:var(--color-text)}.page-header[data-v-5986f4a9]{text-align:center;margin-bottom:40px}.page-header h1[data-v-5986f4a9]{font-size:2.5rem;color:var(--color-text);margin-bottom:15px}.page-description[data-v-5986f4a9]{font-size:1.1rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto}.demo-section[data-v-5986f4a9]{margin:40px 0}.demo-section h2[data-v-5986f4a9]{color:var(--color-text);margin-bottom:20px}.explanation ul[data-v-5986f4a9]{margin:15px 0;padding-left:20px}.explanation li[data-v-5986f4a9]{margin:8px 0;color:var(--color-text)}.theme-controls[data-v-5986f4a9]{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}.current-theme[data-v-5986f4a9],.theme-toggle-section[data-v-5986f4a9],.theme-info[data-v-5986f4a9]{background:var(--color-surface);padding:20px;border-radius:12px;border:1px solid var(--color-border)}.current-theme h4[data-v-5986f4a9],.theme-toggle-section h4[data-v-5986f4a9],.theme-info h4[data-v-5986f4a9]{margin:0 0 15px;color:var(--color-text)}.theme-indicator[data-v-5986f4a9]{display:flex;align-items:center;gap:10px;padding:15px;background:var(--color-background);border-radius:8px;border:1px solid var(--color-border)}.theme-icon[data-v-5986f4a9]{font-size:2rem}.theme-name[data-v-5986f4a9]{font-weight:600;color:var(--color-primary)}.toggle-buttons[data-v-5986f4a9]{display:flex;gap:10px;flex-wrap:wrap}.theme-btn[data-v-5986f4a9]{padding:10px 16px;border:2px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text);cursor:pointer;transition:all var(--transition-speed) ease}.theme-btn[data-v-5986f4a9]:hover{border-color:var(--color-primary)}.theme-btn.active[data-v-5986f4a9]{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.info-grid[data-v-5986f4a9]{display:grid;gap:10px}.info-item[data-v-5986f4a9]{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--color-border)}.info-item[data-v-5986f4a9]:last-child{border-bottom:none}.info-label[data-v-5986f4a9]{font-weight:500;color:var(--color-text-secondary)}.info-value[data-v-5986f4a9]{font-family:monospace;color:var(--color-primary)}.visual-demo-grid[data-v-5986f4a9]{display:grid;grid-template-columns:2fr 1fr;gap:30px}.themed-elements[data-v-5986f4a9]{display:grid;gap:25px}.element-showcase h5[data-v-5986f4a9]{margin:0 0 15px;color:var(--color-text)}.button-showcase[data-v-5986f4a9]{display:flex;gap:10px;flex-wrap:wrap}.themed-btn[data-v-5986f4a9]{padding:10px 16px;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all var(--transition-speed) ease}.themed-btn.primary[data-v-5986f4a9]{background:var(--color-primary);color:#fff}.themed-btn.secondary[data-v-5986f4a9]{background:var(--color-secondary);color:#fff}.themed-btn.success[data-v-5986f4a9]{background:#28a745;color:#fff}.themed-btn.warning[data-v-5986f4a9]{background:#ffc107;color:#212529}.themed-btn.danger[data-v-5986f4a9]{background:#dc3545;color:#fff}.form-showcase[data-v-5986f4a9]{display:grid;gap:10px}.themed-input[data-v-5986f4a9],.themed-select[data-v-5986f4a9],.themed-textarea[data-v-5986f4a9]{padding:10px;border:2px solid var(--color-border);border-radius:6px;background:var(--color-background);color:var(--color-text);transition:all var(--transition-speed) ease}.themed-input[data-v-5986f4a9]:focus,.themed-select[data-v-5986f4a9]:focus,.themed-textarea[data-v-5986f4a9]:focus{outline:none;border-color:var(--color-primary)}.cards-showcase[data-v-5986f4a9]{display:grid;gap:15px}.themed-card[data-v-5986f4a9]{padding:15px;border-radius:8px;border:1px solid var(--color-border);transition:all var(--transition-speed) ease}.themed-card.primary[data-v-5986f4a9]{background:var(--color-surface);border-left:4px solid var(--color-primary)}.themed-card.secondary[data-v-5986f4a9]{background:var(--color-surface);border-left:4px solid var(--color-secondary)}.themed-card h6[data-v-5986f4a9]{margin:0 0 10px;color:var(--color-text)}.themed-card p[data-v-5986f4a9]{margin:0;color:var(--color-text-secondary);font-size:.9rem}.color-palette h5[data-v-5986f4a9]{margin:0 0 20px;color:var(--color-text)}.color-grid[data-v-5986f4a9]{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:15px}.color-item[data-v-5986f4a9]{text-align:center}.color-swatch[data-v-5986f4a9]{width:60px;height:60px;border-radius:50%;margin:0 auto 8px;border:2px solid var(--color-border)}.color-swatch.primary[data-v-5986f4a9]{background:var(--color-primary)}.color-swatch.secondary[data-v-5986f4a9]{background:var(--color-secondary)}.color-swatch.background[data-v-5986f4a9]{background:var(--color-background)}.color-swatch.surface[data-v-5986f4a9]{background:var(--color-surface)}.color-swatch.text[data-v-5986f4a9]{background:var(--color-text)}.color-swatch.accent[data-v-5986f4a9]{background:var(--color-accent)}.color-item span[data-v-5986f4a9]{font-size:.8rem;color:var(--color-text-secondary)}.advanced-controls[data-v-5986f4a9]{display:grid;gap:30px}.control-section[data-v-5986f4a9]{background:var(--color-surface);padding:20px;border-radius:12px;border:1px solid var(--color-border)}.control-section h5[data-v-5986f4a9]{margin:0 0 15px;color:var(--color-text)}.switch-label[data-v-5986f4a9]{display:flex;align-items:center;gap:10px;margin:10px 0;cursor:pointer;color:var(--color-text)}.switch[data-v-5986f4a9]{position:relative;width:50px;height:24px;background:var(--color-border);border-radius:24px;transition:all var(--transition-speed) ease}.switch[data-v-5986f4a9]:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:2px;left:2px;transition:all var(--transition-speed) ease}input:checked+.switch[data-v-5986f4a9]{background:var(--color-primary)}input:checked+.switch[data-v-5986f4a9]:before{transform:translate(26px)}.custom-theme-controls[data-v-5986f4a9]{display:grid;gap:15px;margin-bottom:20px}.color-picker-group[data-v-5986f4a9]{display:flex;align-items:center;gap:10px}.color-picker-group label[data-v-5986f4a9]{min-width:120px;color:var(--color-text)}.color-picker[data-v-5986f4a9]{width:50px;height:30px;border:none;border-radius:6px;cursor:pointer}.color-value[data-v-5986f4a9]{font-family:monospace;color:var(--color-text-secondary);font-size:.9rem}.custom-actions[data-v-5986f4a9]{display:flex;gap:10px;flex-wrap:wrap}.transition-controls[data-v-5986f4a9]{display:flex;align-items:center;gap:10px;margin-bottom:15px}.transition-controls label[data-v-5986f4a9]{color:var(--color-text)}.range-input[data-v-5986f4a9]{flex:1;max-width:200px}.range-value[data-v-5986f4a9]{font-family:monospace;color:var(--color-primary);min-width:50px}.accessibility-demo[data-v-5986f4a9]{display:grid;grid-template-columns:1fr 1fr;gap:30px}.accessibility-info h5[data-v-5986f4a9],.contrast-demo h5[data-v-5986f4a9]{margin:0 0 15px;color:var(--color-text)}.accessibility-list[data-v-5986f4a9]{list-style:none;padding:0;margin:0}.accessibility-list li[data-v-5986f4a9]{padding:8px 0;color:var(--color-text);border-bottom:1px solid var(--color-border)}.accessibility-list li[data-v-5986f4a9]:last-child{border-bottom:none}.contrast-examples[data-v-5986f4a9]{display:grid;gap:10px}.contrast-example[data-v-5986f4a9]{padding:15px;border-radius:8px;text-align:center;font-weight:500}.contrast-example.good[data-v-5986f4a9]{background:var(--color-primary);color:#fff}.contrast-example.warning[data-v-5986f4a9]{background:#ffc107;color:#212529}.contrast-example.poor[data-v-5986f4a9]{background:#e9ecef;color:#adb5bd}.btn[data-v-5986f4a9]{padding:10px 16px;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all var(--transition-speed) ease;text-decoration:none;display:inline-block}.btn-primary[data-v-5986f4a9]{background:var(--color-primary);color:#fff}.btn-primary[data-v-5986f4a9]:hover{filter:brightness(.9)}.btn-secondary[data-v-5986f4a9]{background:var(--color-secondary);color:#fff}.btn-secondary[data-v-5986f4a9]:hover{filter:brightness(.9)}.btn-warning[data-v-5986f4a9]{background:#ffc107;color:#212529}.btn-warning[data-v-5986f4a9]:hover{background:#e0a800}.implementation h3[data-v-5986f4a9]{color:var(--color-text);margin:30px 0 15px}.code-block[data-v-5986f4a9]{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:20px;overflow-x:auto;margin:15px 0}.code-block code[data-v-5986f4a9]{font-family:Courier New,monospace;font-size:.9rem;line-height:1.4;color:var(--color-text)}@media (max-width: 768px){.theme-controls[data-v-5986f4a9],.visual-demo-grid[data-v-5986f4a9],.accessibility-demo[data-v-5986f4a9]{grid-template-columns:1fr}.toggle-buttons[data-v-5986f4a9]{flex-direction:column}.page-header h1[data-v-5986f4a9]{font-size:2rem}}