*{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-color:#f5f5f5}.app{min-height:100vh;padding:20px;max-width:1200px;margin:0 auto}.card{background:white;border-radius:8px;padding:24px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a}.button{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.button-primary{background-color:#6366f1;color:#fff}.button-primary:hover{background-color:#4f46e5}.button-secondary{background-color:#e5e7eb;color:#374151}.button-secondary:hover{background-color:#d1d5db}.button:disabled{opacity:.5;cursor:not-allowed}.input,.textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px}.textarea{min-height:120px;resize:vertical}.input:focus,.textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.title{font-size:24px;font-weight:600;margin-bottom:8px;color:#111827}.description{font-size:14px;color:#6b7280;margin-bottom:16px}.error{background-color:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:12px;border-radius:6px;margin-bottom:16px}.success{background-color:#f0fdf4;border:1px solid #bbf7d0;color:#166534;padding:12px;border-radius:6px;margin-bottom:16px}.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.result-item{padding:16px;background:#f9fafb;border-radius:6px;border:1px solid #e5e7eb}.result-label{font-size:12px;color:#6b7280;margin-bottom:4px}.result-value{font-size:18px;font-weight:600;color:#111827}.pattern-selector{display:flex;gap:8px;margin-bottom:20px}.pattern-button{flex:1;padding:12px;border:2px solid #e5e7eb;border-radius:6px;background:white;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.pattern-button.active{background:#6366f1;color:#fff;border-color:#6366f1}.pattern-button:hover:not(.active){border-color:#6366f1;background:#f5f3ff}.loading{display:inline-block;width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #6366f1;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}