body{margin:0;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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{max-width:1200px;margin:0 auto;padding:20px}.example-section{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a}.example-section h3{color:#333;border-bottom:2px solid #007acc;padding-bottom:10px;margin-bottom:15px}.search-input{width:100%;padding:10px;border:2px solid #ddd;border-radius:4px;margin-bottom:15px;font-size:16px}.search-input:focus{outline:none;border-color:#007acc}.result-text{background:#f8f9fa;padding:15px;border-radius:4px;border-left:4px solid #007acc;font-size:18px;line-height:1.5}.custom-highlight{background:linear-gradient(45deg,#ff6b6b,#feca57);padding:2px 4px;border-radius:3px;color:#fff;font-weight:700}.blue-highlight{background-color:#007acc;color:#fff;padding:2px 4px;border-radius:3px;font-weight:700}.green-highlight{background-color:#28a745;color:#fff;padding:2px 4px;border-radius:3px;font-weight:700}:root{--bg-primary: #ffffff;--bg-secondary: #f9fafb;--bg-tertiary: #f3f4f6;--bg-elevated: #ffffff;--border-color: #e5e7eb;--border-subtle: #f3f4f6;--text-primary: #111827;--text-secondary: #4b5563;--text-muted: #9ca3af;--accent: #6b7280;--accent-hover: #4b5563;--success: #16a34a;--success-bg: #f0fdf4;--error: #dc2626;--error-bg: #fef2f2;--warning: #f59e0b}*{box-sizing:border-box}body{background:var(--bg-secondary);color:var(--text-primary);margin:0}.App{padding:24px;max-width:1200px;margin:0 auto;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100vh}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.App-header{background:var(--bg-primary);border:1px solid var(--border-color);padding:48px 32px;border-radius:16px;margin-bottom:32px;text-align:center;box-shadow:0 1px 3px #0000000d}.App-header h1{margin:0 0 12px;font-size:1.75rem;font-weight:600;color:var(--text-primary);letter-spacing:-.025em}.App-header p{font-size:.95rem;color:var(--text-secondary);max-width:500px;margin:0 auto;line-height:1.6}.tabs-nav{display:flex;gap:4px;padding:4px;margin-bottom:24px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;overflow-x:auto;box-shadow:0 1px 3px #0000000d}.tab-btn{padding:10px 20px;border:none;background:transparent;color:var(--text-muted);font-size:.875rem;font-weight:500;border-radius:8px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.tab-btn:hover{background:var(--bg-tertiary);color:var(--text-secondary)}.tab-btn.active{background:var(--text-primary);color:#fff}.app-content{display:flex;flex-direction:column;gap:24px}.example-section{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px #0000000d}.example-header{padding:24px;border-bottom:1px solid var(--border-color)}.example-header h2{margin:0 0 8px;font-size:1.25rem;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.example-description{margin:0;color:var(--text-secondary);line-height:1.6;font-size:.9rem}.example-description code{background:var(--bg-tertiary);padding:2px 6px;border-radius:4px;font-size:.85em;color:var(--text-primary);font-family:JetBrains Mono,Fira Code,monospace}.example-demo{padding:24px;background:var(--bg-secondary)}.example-demo h3{margin:0 0 16px;font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.example-code{padding:24px;border-top:1px solid var(--border-color)}.example-code h3{margin:0 0 16px;font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.code-block{border-radius:12px;overflow:hidden;margin-bottom:16px;border:1px solid var(--border-color);background:#1e293b}.code-block-title{background:#334155;color:#e2e8f0;padding:10px 16px;font-size:.8rem;font-weight:500;border-bottom:1px solid #475569}.code-block-header{display:flex;justify-content:space-between;align-items:center;background:#334155;padding:8px 16px;border-bottom:1px solid #475569}.code-block-lang{color:#94a3b8;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.code-block-copy{background:#475569;border:1px solid #64748b;color:#e2e8f0;padding:4px 12px;border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .15s ease}.code-block-copy:hover{background:#64748b;color:#fff;border-color:#94a3b8}.code-block-content{background:#1e293b;color:#e2e8f0;padding:16px;margin:0;overflow-x:auto;font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem;line-height:1.7}.code-block-content code{font-family:inherit}.demo-table{width:100%;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a}.demo-header{display:flex;background:#f9fafb;border-bottom:1px solid #e5e7eb}.demo-header .demo-cell{color:#374151;padding:12px 16px;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;flex:1}.demo-body{display:flex;flex-direction:column}.demo-row{display:flex;border-bottom:1px solid #f3f4f6;transition:background .15s ease}.demo-row:last-child{border-bottom:none}.demo-row:hover{background:#f9fafb}.demo-cell{padding:8px 12px;color:#1f2937;flex:1;display:flex;align-items:center}.demo-header .buy-header{background:#dcfce7;color:#16a34a}.demo-header .sell-header{background:#fee2e2;color:#dc2626}.demo-cell.ticker-cell{font-weight:600;color:#1f2937;background:#f3f4f6;font-family:JetBrains Mono,monospace}.demo-cell.volume-cell{font-weight:500;justify-content:flex-end;font-family:JetBrains Mono,monospace;font-size:.85rem}.demo-cell.volume-buy{background:#f0fdf4;color:#16a34a}.demo-cell.volume-sell{background:#fef2f2;color:#dc2626}.demo-cell.computed-cell{background:#f0fdf4;color:#16a34a;font-family:JetBrains Mono,monospace}.demo-hint{margin:16px 0 0;color:var(--text-muted);font-size:.85rem}.editable-cell{background:transparent;padding:4px;flex:1;display:flex;align-items:center}.editable-cell input,.editable-cell select{background:#fff;border:1px solid #d1d5db;color:#1f2937;padding:10px 12px;border-radius:8px;font-size:.875rem;width:100%;transition:all .15s ease;font-family:inherit}.editable-cell input::placeholder{color:#9ca3af}.editable-cell input:focus,.editable-cell select:focus{outline:none;border-color:var(--text-secondary);box-shadow:0 0 0 3px #6b728026;background:#fff}.editable-cell.is-active input,.editable-cell.is-active select{border-color:var(--text-secondary)}.editable-cell.has-error input,.editable-cell.has-error select{border-color:var(--error);background:#fef2f2}.editable-cell .cell-error{color:var(--error);font-size:.75rem;margin-top:4px;display:block}.computed-cell{background:#ecfdf5;color:#059669;font-weight:600;text-align:right;font-family:JetBrains Mono,monospace;font-size:.9rem}.trading-table .ticker-cell{font-weight:600;color:#1f2937;background:#f3f4f6;font-family:JetBrains Mono,monospace}.trading-table .buy-header{background:#dcfce7;color:#16a34a}.trading-table .sell-header{background:#fee2e2;color:#dc2626}.trading-table .volume-cell{font-weight:500;text-align:right;font-family:JetBrains Mono,monospace;font-size:.85rem}.trading-table .volume-buy{background:#f0fdf4;color:#16a34a}.trading-table .volume-sell{background:#fef2f2;color:#dc2626}.keyboard-nav-section{padding:24px}.keyboard-shortcuts{margin:24px 0}.shortcuts-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a;table-layout:fixed}.shortcuts-table th:first-child,.shortcuts-table td:first-child{width:180px}.shortcuts-table th{background:#f9fafb;color:#374151;padding:12px 16px;font-weight:600;font-size:.8rem;text-align:left;text-transform:uppercase;letter-spacing:.03em}.shortcuts-table td{padding:12px 16px;border-bottom:1px solid #f3f4f6;color:#4b5563}.shortcuts-table tr:last-child td{border-bottom:none}.shortcuts-table tr:hover{background:#f9fafb}.shortcuts-table kbd{background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:.8rem;color:#1f2937;box-shadow:0 2px #d1d5db}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:24px 0}.feature-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:20px;transition:all .15s ease;box-shadow:0 1px 3px #0000000d}.feature-card:hover{border-color:var(--text-muted);box-shadow:0 4px 12px #00000014}.feature-card h4{margin:0 0 8px;font-size:.95rem;font-weight:600;color:var(--text-primary)}.feature-card p{margin:0;color:var(--text-secondary);font-size:.85rem;line-height:1.5}.app-footer{margin-top:48px;padding:24px;text-align:center;color:var(--text-muted);font-size:.85rem;border-top:1px solid var(--border-color)}.app-footer p{margin:0}.bookorders-container{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:16px;padding:24px;box-shadow:0 1px 3px #0000000d}.bookorders-container h2{margin:0 0 8px;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.bookorders-instructions{color:var(--text-secondary);font-size:.9rem;margin:0 0 24px}.bookorders-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a}.bookorders-table th{background:#f9fafb;color:#374151;padding:12px 16px;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}.bookorders-table .ticker-header{background:#f3f4f6}.bookorders-table .group-header.buy-header{background:#dcfce7;color:#16a34a}.bookorders-table .group-header.sell-header{background:#fee2e2;color:#dc2626}.bookorders-table .volume-header{background:#f3f4f6;color:#6b7280}.bookorders-table tbody tr{border-bottom:1px solid #f3f4f6}.bookorders-table tbody tr:hover{background:#f9fafb}.bookorders-table .ticker-cell{font-weight:600;color:#1f2937;background:#f9fafb;font-family:JetBrains Mono,monospace;padding:12px 16px}.bookorders-table .volume-cell{font-family:JetBrains Mono,monospace;font-size:.85rem;padding:12px 16px;text-align:right}.bookorders-table .volume-buy{background:#f0fdf4;color:#16a34a}.bookorders-table .volume-sell{background:#fef2f2;color:#dc2626}.productform-container{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:16px;padding:24px;box-shadow:0 1px 3px #0000000d}.productform-container h2{margin:0 0 8px;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.productform-instructions{color:var(--text-secondary);font-size:.9rem;margin:0 0 24px}.productform-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a}.productform-table thead th{background:#f9fafb;color:#374151;padding:12px 16px;font-weight:600;font-size:.8rem;text-align:left;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid #e5e7eb}.productform-table tbody tr{border-bottom:1px solid #f3f4f6}.productform-table tbody tr:hover{background:#f9fafb}@media(max-width:768px){.App{padding:16px}.App-header{padding:32px 20px}.App-header h1{font-size:1.5rem}.tabs-nav{flex-wrap:nowrap;padding:4px}.tab-btn{padding:8px 16px;font-size:.8rem}.features-grid{grid-template-columns:1fr}.example-header,.example-demo,.example-code{padding:16px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-tertiary)}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#9ca3af}::selection{background:#6b728033;color:var(--text-primary)}.virtual-table-container{background:#fff;border:1px solid var(--border-color);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.virtual-header .buy-header{background:#dcfce7;color:#16a34a}.virtual-header .sell-header{background:#fee2e2;color:#dc2626}.virtual-table{width:100%}.virtual-header{display:flex;width:100%;background:#f9fafb;border-bottom:1px solid var(--border-color);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:#374151}.virtual-row{display:flex;border-bottom:1px solid #f3f4f6;position:absolute;width:100%}.virtual-row:hover{background:#f9fafb}.virtual-cell{display:flex;align-items:center;padding:8px 12px;height:100%}.virtual-cell.virtual-id{width:60px;min-width:60px;color:var(--text-muted);font-size:.8rem;font-family:JetBrains Mono,monospace;background:#f9fafb;justify-content:center}.virtual-cell.virtual-ticker{width:80px;min-width:80px;font-weight:600;color:#1f2937;font-family:JetBrains Mono,monospace;background:#f3f4f6}.virtual-cell.virtual-volume{width:120px;min-width:120px;font-family:JetBrains Mono,monospace;font-size:.85rem;justify-content:flex-end}.virtual-cell.virtual-input{width:100px;min-width:100px;flex:1}.virtual-volume-cell{display:flex;align-items:center;justify-content:flex-end;padding:8px 12px;width:120px;min-width:120px;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:500}.virtual-volume-cell.volume-buy{background:#f0fdf4;color:#16a34a}.virtual-volume-cell.volume-sell{background:#fef2f2;color:#dc2626}.virtual-volume-cell.volume-buy.is-self,.quantity-buy-cell.is-self,.price-buy-cell.is-self{background:#22c55e4d}.virtual-volume-cell.volume-sell.is-self,.quantity-sell-cell.is-self,.price-sell-cell.is-self{background:#ef44444d}.virtual-row .editable-cell{padding:4px}.virtual-row .input-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.virtual-row .editable-cell input{padding:8px 10px;font-size:.85rem}.submissions-log{background:#fff;border:1px solid var(--border-color);border-radius:12px;margin-bottom:16px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.submissions-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f9fafb;border-bottom:1px solid var(--border-color);font-weight:600;font-size:.85rem;color:var(--text-secondary)}.submissions-header button{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);padding:4px 12px;border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .15s ease}.submissions-header button:hover{background:var(--error-bg);border-color:var(--error);color:var(--error)}.submissions-list{max-height:200px;overflow-y:auto}.submission-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #f3f4f6;font-size:.85rem}.submission-item:last-child{border-bottom:none}.submission-item.buy{background:#f0fdf4}.submission-item.sell{background:#fef2f2}.submission-type{font-weight:700;font-size:.75rem;padding:2px 8px;border-radius:4px;min-width:40px;text-align:center}.submission-item.buy .submission-type{background:#dcfce7;color:#16a34a}.submission-item.sell .submission-type{background:#fee2e2;color:#dc2626}.submission-ticker{font-weight:600;font-family:JetBrains Mono,monospace;color:var(--text-primary);min-width:60px}.submission-details{flex:1;color:var(--text-secondary);font-family:JetBrains Mono,monospace;font-size:.8rem}.submission-time{color:var(--text-muted);font-size:.75rem}.form-table{width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5;color:#333}.form-table-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:12px;background-color:#f8f9fa;border-radius:6px;border:1px solid #e9ecef}.table-actions{display:flex;gap:8px}.btn{padding:6px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;color:#333;font-size:12px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:4px}.btn:hover{background-color:#f8f9fa;border-color:#bbb}.btn:active{background-color:#e9ecef}.btn-add-row{background-color:#28a745;color:#fff;border-color:#28a745}.btn-add-row:hover{background-color:#218838;border-color:#1e7e34}.btn-delete{background-color:#dc3545;color:#fff;border-color:#dc3545;padding:4px 8px}.btn-delete:hover{background-color:#c82333;border-color:#bd2130}.btn-reset{background-color:#6c757d;color:#fff;border-color:#6c757d;padding:4px 8px}.btn-reset:hover{background-color:#545b62;border-color:#4e555b}.btn-validate{background-color:#007bff;color:#fff;border-color:#007bff}.btn-validate:hover{background-color:#0056b3;border-color:#004085}.btn-link{background:none;border:none;color:#007bff;text-decoration:underline;padding:0}.btn-link:hover{color:#0056b3;background:none}.table{width:100%;border-collapse:collapse;background-color:#fff;border:1px solid #ddd;border-radius:6px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.form-table-header{display:flex;background-color:#f8f9fa;border-bottom:2px solid #dee2e6}.form-table-header .form-table-cell{padding:12px 8px;text-align:left;font-weight:600;color:#495057}font-weight: 600; color: #495057; position: relative; } .header-content{display:flex;align-items:center;gap:4px}.required-indicator{color:#dc3545;font-weight:700}.actions-header{width:80px;text-align:center}.form-table-row{display:flex}.form-table-row:nth-child(2n){background-color:#f8f9fa}.form-table-row:hover{background-color:#e8f4f8}.form-table-cell{flex:1;border-bottom:1px solid #dee2e6;padding:0;position:relative;vertical-align:top;min-width:120px;max-width:300px}.cell-content{position:relative;min-height:40px;display:flex;align-items:center}.cell-value{padding:8px 12px;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:24px;line-height:24px}.cell-input{width:100%;border:none;outline:none;padding:8px 12px;background:transparent;font-size:inherit;font-family:inherit;min-height:40px;box-sizing:border-box}.cell-input:focus{background-color:#fff;box-shadow:inset 0 0 0 2px #007bff}.form-table-cell.active{background-color:#e3f2fd;box-shadow:inset 0 0 0 2px #2196f3}.form-table-cell.editing{background-color:#fff;box-shadow:inset 0 0 0 2px #007bff;z-index:1}.form-table-cell.dirty:before{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background-color:#ffc107;z-index:2}.form-table-cell.error{background-color:#ffebee;border-color:#f44336}.form-table-cell.error .cell-value{color:#d32f2f}.cell-error{position:absolute;top:100%;left:0;right:0;background-color:#ffebee;border:1px solid #f44336;border-top:none;border-radius:0 0 4px 4px;padding:4px 8px;font-size:12px;color:#d32f2f;z-index:10;display:flex;align-items:center;gap:4px}.error-icon{color:#f44336;font-weight:700}.error-message{flex:1}.actions-cell{border-bottom:1px solid #dee2e6;padding:4px;text-align:center;width:80px}.cell-actions{display:flex;gap:4px;justify-content:center}.empty-table{padding:40px;text-align:center;color:#6c757d;font-style:italic}.form-table-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:12px;background-color:#f8f9fa;border-radius:6px;border:1px solid #e9ecef;font-size:12px;color:#6c757d}.footer-info{display:flex;align-items:center;gap:16px}.footer-legend{display:flex;gap:16px;align-items:center}.legend-item{display:flex;align-items:center;gap:4px}.legend-symbol{font-size:10px}.legend-symbol.dirty{color:#ffc107}.legend-symbol.error{color:#f44336}.legend-symbol.required{color:#dc3545;font-weight:700}.table-responsive{overflow-x:auto}@media(max-width:768px){.form-table-controls{flex-direction:column;align-items:stretch;gap:12px}.table-actions{justify-content:center}.footer-legend{display:none}.form-table-cell{min-width:100px}}select.cell-input{cursor:pointer}select.cell-input:focus{background-color:#fff}.editable-cell{position:relative;padding:0;vertical-align:top}.editable-cell .cell-input{width:100%;border:1px solid #dee2e6;border-radius:4px;padding:8px 12px;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease}.editable-cell .cell-input:focus{border-color:#007bff;box-shadow:0 0 0 3px #007bff26;outline:none}.editable-cell.is-active .cell-input{border-color:#007bff;box-shadow:0 0 0 3px #007bff26}.editable-cell.has-error .cell-input{border-color:#dc3545;background-color:#fff8f8}.editable-cell.has-error .cell-input:focus{box-shadow:0 0 0 3px #dc354526}.editable-cell.has-error.is-active .cell-input{border-color:#dc3545;box-shadow:0 0 0 3px #dc354526}.editable-cell .cell-error{display:block;color:#dc3545;font-size:12px;margin-top:4px;padding:0 4px}.form-table-cell:focus-within{z-index:1}.form-table [role=grid]{position:relative}.form-table-cell[aria-selected=true]{outline:2px solid #007bff;outline-offset:-2px}.form-table-cell,.cell-error{transition:all .15s ease}.form-table-row{transition:background-color .15s ease}