.typewriter{display:inline}.typewriter-cursor{display:inline-block;margin-left:2px;color:var(--primary-color);font-weight:300;opacity:0;transition:opacity .1s ease}.typewriter-cursor.visible{opacity:1}.typewriter-cursor.typing{opacity:1;animation:blink .5s step-end infinite}@keyframes blink{50%{opacity:0}}.glow-card{position:relative;background:#ffffffb3;border-radius:var(--border-radius-lg);border:1px solid rgba(255,255,255,.3);overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base)}.glow-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -15px #00000026}.glow-effect{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;transition:opacity var(--transition-base)}.glow-card-content{position:relative;z-index:1;padding:var(--space-lg)}.scroll-reveal{transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .6s cubic-bezier(.4,0,.2,1);will-change:transform,opacity}.scroll-reveal.visible{transform:translate(0)!important;opacity:1!important}.home{padding:var(--space-lg) 0}.hero{text-align:center;padding:var(--space-2xl) var(--space-md);background:linear-gradient(135deg,var(--primary-light) 0%,var(--bg-secondary) 100%);border-radius:var(--border-radius-xl);margin-bottom:var(--space-2xl)}.hero-title{font-size:3rem;font-weight:700;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-md)}.hero-subtitle{font-size:1.5rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}.hero-description{font-size:1.125rem;color:var(--text-tertiary);max-width:600px;margin:0 auto}.section-title{font-size:1.875rem;font-weight:600;text-align:center;margin-bottom:var(--space-xl);color:var(--text-primary)}.features{margin-bottom:var(--space-2xl)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg)}.feature-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--space-xl);text-align:center;transition:all var(--transition-base);text-decoration:none;color:inherit}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}.feature-icon{font-size:3rem;color:var(--primary-color);margin-bottom:var(--space-md)}.feature-title{font-size:1.5rem;font-weight:600;margin-bottom:var(--space-sm);color:var(--text-primary)}.feature-description{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--space-md);line-height:1.6}.platform-icons{display:flex;justify-content:center;gap:var(--space-sm);margin-top:var(--space-md)}.platform-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--primary-light);color:var(--primary-color);border-radius:var(--border-radius-md);font-size:1rem}.platform-info{padding:var(--space-2xl) 0;background:var(--bg-secondary);border-radius:var(--border-radius-xl)}.platform-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-lg);max-width:800px;margin:0 auto;padding:0 var(--space-md)}.platform-card{background:var(--bg-primary);border-radius:var(--border-radius-lg);padding:var(--space-xl);text-align:center;box-shadow:var(--shadow-sm)}.platform-card-icon{font-size:2.5rem;color:var(--primary-color);margin-bottom:var(--space-md)}.platform-card h3{font-size:1.25rem;font-weight:600;margin-bottom:var(--space-sm);color:var(--text-primary)}.platform-card p{font-size:.875rem;color:var(--text-secondary)}@media (max-width: 768px){.hero{padding:var(--space-xl) var(--space-md)}.hero-title{font-size:2rem}.hero-subtitle{font-size:1.125rem}.hero-description{font-size:1rem}.feature-grid{grid-template-columns:1fr;gap:var(--space-md)}.feature-card{padding:var(--space-lg)}.feature-icon{font-size:2.5rem}.section-title{font-size:1.5rem}.platform-cards{grid-template-columns:1fr}}@media (max-width: 480px){.hero-title{font-size:1.75rem}.nav-links{gap:var(--space-sm)}.nav-link{padding:var(--space-xs) var(--space-sm);font-size:.875rem}}.qr-generator{padding:var(--space-lg)}.platform-support{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--primary-light);color:var(--primary-color);border-radius:var(--border-radius-md);font-size:.875rem;font-weight:500}.qr-generator-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl)}.input-section{display:flex;flex-direction:column;gap:var(--space-md)}.input-label{font-size:1rem;font-weight:600;color:var(--text-primary)}.qr-input{width:100%;padding:var(--space-md);border:2px solid var(--border-color);border-radius:var(--border-radius-md);font-size:1rem;font-family:inherit;resize:vertical;transition:border-color var(--transition-fast)}.qr-input:focus{outline:none;border-color:var(--primary-color)}.input-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap}.size-selector{display:flex;align-items:center;gap:var(--space-sm)}.size-selector label{font-size:.875rem;color:var(--text-secondary)}.size-selector select{padding:var(--space-xs) var(--space-sm);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);background:var(--bg-primary);font-size:.875rem;cursor:pointer}.generate-btn{padding:var(--space-md) var(--space-xl);background:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius-md);font-size:1rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.generate-btn:hover:not(:disabled){background:var(--primary-hover)}.generate-btn:disabled{opacity:.5;cursor:not-allowed}.output-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);padding:var(--space-xl);background:var(--bg-secondary);border-radius:var(--border-radius-lg)}.qr-preview{background:#fff;padding:var(--space-lg);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm)}.qr-info{text-align:center}.qr-text-preview{font-size:.875rem;color:var(--text-secondary);word-break:break-all}.qr-actions{display:flex;gap:var(--space-md);flex-wrap:wrap;justify-content:center}.action-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid var(--border-color);border-radius:var(--border-radius-md);background:var(--bg-primary);color:var(--text-secondary);font-size:.875rem;cursor:pointer;transition:all var(--transition-fast)}.action-btn.download:hover{background:var(--primary-color);color:#fff}.action-btn.copy:hover{background:var(--success-color);border-color:var(--success-color);color:#fff}@media (max-width: 1024px){.qr-generator-content{grid-template-columns:1fr;gap:var(--space-xl)}.output-section{order:-1}}@media (max-width: 768px){.qr-generator{padding:var(--space-md)}.input-actions{flex-direction:column;align-items:stretch}.size-selector{justify-content:center}.generate-btn{width:100%}.qr-actions{flex-direction:column}.action-btn{width:100%;justify-content:center}}@media (max-width: 480px){.platform-support{font-size:.75rem;padding:var(--space-xs) var(--space-sm)}}.clipboard-tool{padding:var(--space-lg)}.clipboard-not-supported{text-align:center;padding:var(--space-2xl);background:var(--bg-secondary);border-radius:var(--border-radius-lg)}.not-supported-icon{font-size:4rem;color:var(--text-tertiary);margin-bottom:var(--space-lg)}.clipboard-not-supported h3{font-size:1.5rem;color:var(--text-primary);margin-bottom:var(--space-md)}.clipboard-not-supported p{color:var(--text-secondary);max-width:500px;margin:0 auto var(--space-lg);line-height:1.6}.platform-badge-large{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-radius:var(--border-radius-md);font-size:1rem;font-weight:600}.platform-badge-large.desktop{background:var(--primary-light);color:var(--primary-color)}.clipboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--border-color);flex-wrap:wrap;gap:var(--space-md)}.clipboard-header h3{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.clipboard-stats{display:flex;align-items:center;gap:var(--space-md)}.clipboard-stats span{font-size:.875rem;color:var(--text-secondary)}.clear-btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--error-color);color:#fff;border:none;border-radius:var(--border-radius-sm);font-size:.75rem;cursor:pointer;transition:opacity var(--transition-fast)}.clear-btn:hover{opacity:.8}.clipboard-list{max-height:500px;overflow-y:auto}.empty-state{text-align:center;padding:var(--space-2xl);color:var(--text-secondary)}.empty-state p:first-child{font-size:1.125rem;margin-bottom:var(--space-sm)}.hint{font-size:.875rem;color:var(--text-tertiary)}.clipboard-item{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);margin-bottom:var(--space-sm);transition:border-color var(--transition-fast)}.clipboard-item:hover{border-color:var(--primary-color)}.item-content{flex:1;min-width:0}.item-text{font-size:.875rem;color:var(--text-primary);word-break:break-all;line-height:1.5;margin-bottom:var(--space-xs)}.item-time{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:.75rem;color:var(--text-tertiary)}.item-actions{display:flex;gap:var(--space-xs);flex-shrink:0}.action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.action-btn.copy:hover{background:var(--primary-color);color:#fff}.action-btn.delete:hover{background:var(--error-color);border-color:var(--error-color);color:#fff}@media (max-width: 768px){.clipboard-tool{padding:var(--space-md)}.clipboard-header{flex-direction:column;align-items:flex-start}.clipboard-stats{width:100%;justify-content:space-between}.clipboard-item{flex-direction:column;gap:var(--space-sm)}.item-actions{width:100%;justify-content:flex-end}}@media (max-width: 480px){.platform-support{font-size:.75rem}.clipboard-header h3{font-size:1.125rem}.clear-btn{padding:var(--space-xs);font-size:.625rem}}.keyboard-tester{padding:var(--space-lg)}.platform-notice{margin-bottom:var(--space-lg);text-align:center}.platform-support{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius-md);font-size:.875rem;font-weight:500}.platform-support.desktop-only{background:#fee2e2;color:#dc2626}.keyboard-start{text-align:center;padding:var(--space-2xl);background:var(--bg-secondary);border-radius:var(--border-radius-lg)}.keyboard-icon{font-size:5rem;color:var(--primary-color);margin-bottom:var(--space-lg)}.keyboard-start h3{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-md)}.keyboard-start p{color:var(--text-secondary);margin-bottom:var(--space-sm)}.keyboard-start .hint{font-size:.875rem;color:var(--text-tertiary);background:var(--bg-tertiary);padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius-sm);display:inline-block}.start-btn{margin-top:var(--space-xl);padding:var(--space-md) var(--space-2xl);background:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius-md);font-size:1.125rem;font-weight:600;cursor:pointer;transition:background var(--transition-fast)}.start-btn:hover{background:var(--primary-hover)}.keyboard-active{padding:var(--space-lg);background:var(--bg-secondary);border-radius:var(--border-radius-lg)}.keyboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--border-color);flex-wrap:wrap;gap:var(--space-md)}.keyboard-header h3{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.stop-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--error-color);color:#fff;border:none;border-radius:var(--border-radius-md);font-size:.875rem;cursor:pointer;transition:opacity var(--transition-fast)}.stop-btn:hover{opacity:.8}.virtual-keyboard{display:flex;flex-direction:column;gap:var(--space-xs);margin-bottom:var(--space-xl);overflow-x:auto;padding:var(--space-md);background:var(--bg-tertiary);border-radius:var(--border-radius-md)}.keyboard-row{display:flex;justify-content:center;gap:var(--space-xs);min-width:max-content}.key{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--space-sm);background:var(--bg-primary);border:2px solid var(--border-color);border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:600;color:var(--text-primary);text-transform:uppercase;transition:all var(--transition-fast);cursor:default;-webkit-user-select:none;user-select:none}.key:hover{border-color:var(--primary-color)}.key.pressed{background:var(--primary-color);border-color:var(--primary-color);color:#fff;transform:translateY(2px);box-shadow:inset 0 2px 4px #0003}.key[data-code=Space]{min-width:200px}.key[data-code=ShiftLeft],.key[data-code=ShiftRight]{min-width:100px}.key[data-code=Enter],.key[data-code=Backspace]{min-width:80px}.key[data-code=Tab],.key[data-code=CapsLock]{min-width:70px}.key-history{margin-top:var(--space-xl)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--border-color)}.history-header h4{font-size:1rem;font-weight:600;color:var(--text-primary)}.clear-btn.small{padding:var(--space-xs) var(--space-sm);font-size:.75rem}.no-history{text-align:center;padding:var(--space-xl);color:var(--text-tertiary);font-style:italic}.history-list{max-height:300px;overflow-y:auto}.history-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border-color);font-size:.875rem}.history-item:last-child{border-bottom:none}.key-combo{font-family:var(--font-mono);font-weight:600;color:var(--primary-color);background:var(--primary-light);padding:var(--space-xs) var(--space-sm);border-radius:var(--border-radius-sm)}.key-code{font-family:var(--font-mono);font-size:.75rem;color:var(--text-tertiary)}.timestamp{margin-left:auto;font-size:.75rem;color:var(--text-tertiary)}@media (max-width: 1024px){.key{min-width:32px;height:32px;font-size:.625rem}.key[data-code=Space]{min-width:120px}}@media (max-width: 768px){.keyboard-start{padding:var(--space-xl)}.keyboard-icon{font-size:3rem}.virtual-keyboard{display:none}.keyboard-header{flex-direction:column;align-items:flex-start}.history-header{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.history-item{flex-wrap:wrap}.timestamp{margin-left:0;width:100%}}@media (max-width: 480px){.keyboard-tester{padding:var(--space-sm)}.keyboard-active{padding:var(--space-md)}.key-combo{font-size:.75rem}}.tools-page{padding:var(--space-lg) 0}.page-header p{font-size:1.125rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-lg)}.tool-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--space-xl);text-align:center;cursor:pointer;transition:all var(--transition-base)}.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}.tool-icon{font-size:3rem;color:var(--primary-color);margin-bottom:var(--space-md)}.tool-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm)}.tool-description{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--space-md);line-height:1.6}.tool-platforms{display:flex;justify-content:center;gap:var(--space-sm);flex-wrap:wrap}.platform-tag{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500}.platform-tag.desktop{background:var(--primary-light);color:var(--primary-color)}.platform-tag.mobile{background:#dcfce7;color:#16a34a}.tool-active{background:var(--bg-primary);border-radius:var(--border-radius-lg);padding:var(--space-xl)}.back-button{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);color:var(--text-secondary);font-size:.875rem;cursor:pointer;transition:all var(--transition-fast);margin-bottom:var(--space-lg)}.back-button:hover{background:var(--bg-tertiary);color:var(--text-primary)}.tool-content{margin-top:var(--space-lg)}@media (max-width: 768px){.page-header h1{font-size:1.875rem}.page-header p{font-size:1rem}.tools-grid{grid-template-columns:1fr}.tool-card{padding:var(--space-lg)}.tool-icon{font-size:2.5rem}}@media (max-width: 480px){.platform-tag{font-size:.625rem;padding:var(--space-xs)}}.button-demo{padding:var(--space-lg)}.button-row{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center}.button-column{display:flex;flex-direction:column;gap:var(--space-md)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:.875rem;font-weight:500;line-height:1.5;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid transparent;border-radius:var(--border-radius-md);transition:all var(--transition-fast)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}.btn-secondary:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--text-tertiary)}.btn-success:hover:not(:disabled){background:#059669;border-color:#059669}.btn-warning:hover:not(:disabled){background:#d97706;border-color:#d97706}.btn-error{background:var(--error-color);border-color:var(--error-color);color:#fff}.btn-error:hover:not(:disabled){background:#dc2626;border-color:#dc2626}.btn-small{padding:var(--space-xs) var(--space-sm);font-size:.75rem}.btn-large{padding:var(--space-md) var(--space-lg);font-size:1rem}.btn-block{display:flex;width:100%}.btn.loading{position:relative;color:transparent}.btn.loading:after{content:"";position:absolute;width:16px;height:16px;top:50%;left:50%;margin-top:-8px;margin-left:-8px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}@media (max-width: 768px){.button-demo{padding:var(--space-md)}.demo-section{margin-bottom:var(--space-lg)}.button-row{gap:var(--space-sm)}.btn{padding:var(--space-xs) var(--space-sm);font-size:.75rem}.btn-large{padding:var(--space-sm) var(--space-md);font-size:.875rem}}@media (max-width: 480px){.button-row{flex-direction:column;align-items:stretch}.btn{width:100%}}.input-demo{padding:var(--space-lg)}.input-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-lg)}.input-wrapper{display:flex;flex-direction:column;gap:var(--space-xs)}.input-wrapper.focused .input-label{color:var(--primary-color)}.input-wrapper.focused .input-field{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}.input-label{font-size:.875rem;font-weight:500;color:var(--text-primary);transition:color var(--transition-fast)}.input-field{padding:var(--space-sm) var(--space-md);font-size:.875rem;line-height:1.5;color:var(--text-primary);background:var(--bg-primary);border:2px solid var(--border-color);border-radius:var(--border-radius-md);transition:all var(--transition-fast);width:100%}.input-field::placeholder{color:var(--text-tertiary)}.input-field:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}.input-field:disabled{background:var(--bg-secondary);color:var(--text-tertiary);cursor:not-allowed}.input-wrapper.error .input-label{color:var(--error-color)}.input-wrapper.error .input-field{border-color:var(--error-color)}.input-wrapper.error .input-field:focus{box-shadow:0 0 0 3px #ef44441a}.error-message{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:.75rem;color:var(--error-color)}.input-wrapper.success .input-label{color:var(--success-color)}.input-wrapper.success .input-field{border-color:var(--success-color)}.success-message{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:.75rem;color:var(--success-color)}.input-with-icon{position:relative;display:flex;align-items:center}.input-with-icon .input-field{padding-right:40px}.icon-button{position:absolute;right:var(--space-sm);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;color:var(--text-tertiary);cursor:pointer;transition:color var(--transition-fast);border-radius:var(--border-radius-sm)}.icon-button:hover{color:var(--text-primary);background:var(--bg-secondary)}.demo-form{background:var(--bg-primary);border-radius:var(--border-radius-lg);padding:var(--space-xl);border:1px solid var(--border-color)}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-md);margin-bottom:var(--space-md)}.form-actions{display:flex;gap:var(--space-md);margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--border-color)}@media (max-width: 768px){.input-demo{padding:var(--space-md)}.demo-section{margin-bottom:var(--space-lg)}.demo-form{padding:var(--space-md)}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions .btn{width:100%}}@media (max-width: 480px){.input-row{grid-template-columns:1fr}}.modal-demo{padding:var(--space-lg)}.modal-buttons{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-lg)}.confirm-result{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius-md);font-weight:500;animation:fadeIn .3s ease}.confirm-result.confirmed{background:#dcfce7;color:#16a34a}.confirm-result.cancelled{background:#fee2e2;color:#dc2626}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.btn-secondary{background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-tertiary);border-color:var(--text-tertiary)}.btn-success{background:var(--success-color);border-color:var(--success-color);color:#fff}.btn-success:hover{background:#059669;border-color:#059669}.btn-warning{background:var(--warning-color);border-color:var(--warning-color);color:#fff}.btn-warning:hover{background:#d97706;border-color:#d97706}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-md);animation:overlayFadeIn .2s ease}@keyframes overlayFadeIn{0%{background:#0000}to{background:#00000080}}.modal{background:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);max-width:500px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}.modal-header.success{background:#dcfce7;border-bottom-color:#86efac}.modal-header.warning{background:#fef3c7;border-bottom-color:#fcd34d}.modal-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-sm)}.modal-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:var(--bg-primary);color:var(--text-secondary);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast)}.modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-body{padding:var(--space-xl);overflow-y:auto;flex:1}.modal-body p{margin-bottom:var(--space-sm);line-height:1.6;color:var(--text-secondary)}.modal-body p:last-child{margin-bottom:0}.success-icon,.warning-icon{text-align:center;margin-bottom:var(--space-lg);font-size:4rem}.success-icon{color:var(--success-color)}.warning-icon{color:var(--warning-color)}.success-text,.warning-text{text-align:center;font-size:1.125rem;font-weight:500;color:var(--text-primary);margin-bottom:var(--space-md)}.warning-hint{text-align:center;font-size:.875rem;color:var(--text-secondary)}.modal-footer{display:flex;gap:var(--space-md);padding:var(--space-lg);border-top:1px solid var(--border-color);justify-content:flex-end;background:var(--bg-secondary)}@media (max-width: 768px){.modal-demo{padding:var(--space-md)}.modal-buttons{flex-direction:column}.modal-buttons .btn{width:100%}.modal-overlay{padding:var(--space-sm)}.modal{border-radius:var(--border-radius-md)}.modal-header,.modal-body,.modal-footer{padding:var(--space-md)}.modal-footer{flex-direction:column}.modal-footer .btn{width:100%}.success-icon,.warning-icon{font-size:3rem}}@media (max-width: 480px){.modal-title{font-size:1.125rem}}.card-demo{padding:var(--space-lg)}.demo-section{margin-bottom:var(--space-xl)}.demo-section h4{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--border-color)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-lg)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);overflow:hidden;transition:all var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}.card-content{padding:var(--space-lg)}.card-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm)}.card-text{font-size:.875rem;color:var(--text-secondary);line-height:1.6}.card-footer{padding:var(--space-lg);border-top:1px solid var(--border-color)}.card-image{width:100%;height:180px;overflow:hidden}.placeholder-image{width:100%;height:100%;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:.875rem}.social-card{max-width:360px}.card-header{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg)}.card-avatar{width:40px;height:40px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary-color);font-size:1.25rem}.card-user{flex:1;display:flex;flex-direction:column;gap:2px}.user-name{font-size:.875rem;font-weight:600;color:var(--text-primary)}.user-time{font-size:.75rem;color:var(--text-tertiary)}.card-menu{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--text-tertiary);cursor:pointer;border-radius:var(--border-radius-md);font-size:1.25rem;transition:background var(--transition-fast)}.card-menu:hover{background:var(--bg-secondary);color:var(--text-primary)}.card-actions{display:flex;align-items:center;padding:var(--space-sm) var(--space-lg);border-top:1px solid var(--border-color);gap:var(--space-sm)}.action-item{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border:none;background:none;color:var(--text-secondary);cursor:pointer;border-radius:var(--border-radius-md);font-size:.875rem;transition:all var(--transition-fast)}.action-item:hover{background:var(--bg-secondary);color:var(--primary-color)}.action-item.bookmark{margin-left:auto}.product-card{max-width:320px}.product-image{position:relative;width:100%;height:200px}.placeholder-image.product{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#d97706}.product-badge{position:absolute;top:var(--space-sm);right:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:var(--error-color);color:#fff;font-size:.75rem;font-weight:600;border-radius:var(--border-radius-sm)}.product-name{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.product-desc{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--space-md)}.product-meta{display:flex;align-items:baseline;gap:var(--space-sm)}.product-price{font-size:1.25rem;font-weight:700;color:var(--primary-color)}.product-original{font-size:.875rem;color:var(--text-tertiary);text-decoration:line-through}.stat-card{border:none;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px}.stat-card.primary:before{background:var(--primary-color)}.stat-card.success:before{background:var(--success-color)}.stat-card.warning:before{background:var(--warning-color)}.stat-card.error:before{background:var(--error-color)}.stat-content{padding:var(--space-lg)}.stat-label{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--space-xs)}.stat-value{font-size:2rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-xs)}.stat-change{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:.875rem;font-weight:500;padding:var(--space-xs) var(--space-sm);border-radius:var(--border-radius-sm)}.stat-change.up{background:#dcfce7;color:#16a34a}.stat-change.down{background:#fee2e2;color:#dc2626}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:.875rem;font-weight:500;line-height:1.5;border:1px solid transparent;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast)}.btn-primary{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.btn-block{width:100%}@media (max-width: 768px){.card-demo{padding:var(--space-md)}.demo-section{margin-bottom:var(--space-lg)}.card-grid{grid-template-columns:1fr}.social-card,.product-card{max-width:100%}.stat-value{font-size:1.5rem}}@media (max-width: 480px){.card-content,.stat-content{padding:var(--space-md)}.card-header{padding:var(--space-sm) var(--space-md)}.card-actions{padding:var(--space-xs) var(--space-md)}}.components-page{padding:var(--space-lg) 0}.page-header{text-align:center;margin-bottom:var(--space-2xl)}.page-header h1{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-md)}.page-header p{font-size:1.125rem;color:var(--text-secondary)}.components-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--space-lg)}.component-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--space-xl);cursor:pointer;transition:all var(--transition-base);display:flex;flex-direction:column;gap:var(--space-md);position:relative}.component-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-color)}.component-info{flex:1}.component-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm)}.component-description{font-size:.875rem;color:var(--text-secondary);line-height:1.6}.component-platforms{display:flex;gap:var(--space-sm)}.platform-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--border-radius-sm);font-size:.875rem;transition:all var(--transition-fast)}.platform-badge.desktop{background:var(--primary-light);color:var(--primary-color)}.platform-badge.mobile{background:#dcfce7;color:#16a34a}.component-arrow{position:absolute;right:var(--space-lg);top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-tertiary);transition:all var(--transition-fast)}.component-card:hover .component-arrow{color:var(--primary-color);transform:translateY(-50%) translate(4px)}.demo-section{background:var(--bg-primary);border-radius:var(--border-radius-lg);padding:var(--space-xl)}.demo-header{display:flex;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl);flex-wrap:wrap}.back-btn{padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);color:var(--text-secondary);font-size:.875rem;cursor:pointer;transition:all var(--transition-fast)}.back-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.demo-header h2{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.demo-content{padding:var(--space-lg);background:var(--bg-secondary);border-radius:var(--border-radius-md)}@media (max-width: 768px){.page-header h1{font-size:1.875rem}.components-grid{grid-template-columns:1fr}.component-card{padding:var(--space-lg)}.component-arrow{display:none}.demo-header{flex-direction:column;align-items:flex-start;gap:var(--space-md)}}@media (max-width: 480px){.platform-badge{width:24px;height:24px;font-size:.75rem}}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.nav{max-width:1200px;margin:0 auto;padding:var(--space-md) var(--space-lg);display:flex;justify-content:space-between;align-items:center}.nav-logo{font-size:1.5rem;font-weight:700;color:var(--primary-color)}.nav-logo:hover{color:var(--primary-hover)}.nav-links{display:flex;gap:var(--space-lg)}.nav-link{color:var(--text-secondary);font-weight:500;padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius-md);transition:all var(--transition-fast)}.nav-link:hover{color:var(--primary-color);background-color:var(--primary-light)}.app-main{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:var(--space-xl) var(--space-lg)}.app-footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--space-lg);text-align:center}.app-footer p{color:var(--text-secondary);font-size:.875rem}@media (max-width: 768px){.nav{flex-direction:column;gap:var(--space-md);padding:var(--space-md)}.nav-links{gap:var(--space-sm)}.nav-link{padding:var(--space-sm);font-size:.875rem}.app-main{padding:var(--space-md)}}:root{--primary-color: #2563eb;--primary-hover: #1d4ed8;--primary-light: #dbeafe;--secondary-color: #7c3aed;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--text-primary: #1f2937;--text-secondary: #6b7280;--text-tertiary: #9ca3af;--bg-primary: #ffffff;--bg-secondary: #f3f4f6;--bg-tertiary: #e5e7eb;--border-color: #e5e7eb;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-xl: 16px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", Monaco, Inconsolata, "Fira Code", monospace;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);color:var(--text-primary);background-color:var(--bg-primary);line-height:1.5}a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-hover)}button{font-family:inherit;cursor:pointer;border:none;background:none}button:disabled{cursor:not-allowed;opacity:.6}input,textarea,select{font-family:inherit;font-size:inherit}ul,ol{list-style:none}img{max-width:100%;height:auto;display:block}table{border-collapse:collapse;width:100%}code,pre{font-family:var(--font-mono)}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}