:root{--hdb-bg:#0e1116;--hdb-surface:#161b22;--hdb-surface-2:#1f262f;--hdb-border:#2a323d;--hdb-text:#e6edf3;--hdb-text-dim:#9aa4b2;--hdb-accent:#06f;--hdb-accent-hover:#0052cc;--hdb-success:#2ecc71;--hdb-error:#e74c3c;--hdb-radius:10px;--hdb-shadow:0 8px 32px rgba(0,0,0,.35);--hdb-panel-width:380px}.hdb-builder{display:grid;grid-template-columns:1fr var(--hdb-panel-width);gap:0;width:100%;height:calc(100vh - 80px);min-height:700px;background:var(--hdb-bg);color:var(--hdb-text);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5}.hdb-stage{position:relative;background:#fff;overflow:hidden}.hdb-iframe{width:100%;height:100%;border:0;display:block}.hdb-iframe-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(14,17,22,.85);color:var(--hdb-text);pointer-events:none;opacity:0;transition:opacity .2s ease}.hdb-iframe-loader.is-visible{opacity:1;pointer-events:auto}.hdb-spinner{width:32px;height:32px;border:3px solid var(--hdb-border);border-top-color:var(--hdb-accent);border-radius:50%;animation:hdb-spin .8s linear infinite}@keyframes hdb-spin{to{transform:rotate(360deg)}}.hdb-panel{background:var(--hdb-surface);border-left:1px solid var(--hdb-border);display:flex;flex-direction:column;overflow:hidden}.hdb-panel-header{padding:20px 20px 12px;border-bottom:1px solid var(--hdb-border)}.hdb-panel-title{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--hdb-text)}.hdb-panel-subtitle{margin:0;font-size:13px;color:var(--hdb-text-dim)}.hdb-progress{list-style:none;margin:0;padding:16px 20px;display:flex;justify-content:space-between;gap:4px;border-bottom:1px solid var(--hdb-border);counter-reset:hdb-step}.hdb-progress-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--hdb-text-dim);text-align:center;position:relative}.hdb-progress-step span{width:28px;height:28px;border-radius:50%;background:var(--hdb-surface-2);border:1px solid var(--hdb-border);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--hdb-text-dim);transition:all .2s ease}.hdb-progress-step.is-active span,.hdb-progress-step.is-done span{background:var(--hdb-accent);border-color:var(--hdb-accent);color:#fff}.hdb-progress-step.is-active{color:var(--hdb-text);font-weight:600}.hdb-steps{flex:1;overflow-y:auto;padding:20px}.hdb-step{display:none;animation:hdb-fade-in .25s ease}.hdb-step.is-active{display:block}@keyframes hdb-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.hdb-step h3{margin:0 0 8px;font-size:16px;font-weight:600;color:var(--hdb-text)}.hdb-help{margin:0 0 16px;font-size:13px;color:var(--hdb-text-dim)}.hdb-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hdb-demo-card{appearance:none;background:var(--hdb-surface-2);border:1px solid var(--hdb-border);border-radius:var(--hdb-radius);padding:12px 10px;color:var(--hdb-text);text-align:left;cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;gap:2px}.hdb-demo-card:hover{border-color:var(--hdb-accent);transform:translateY(-1px)}.hdb-demo-card.is-selected{border-color:var(--hdb-accent);background:rgba(0,102,255,.12);box-shadow:0 0 0 1px var(--hdb-accent) inset}.hdb-demo-card-label{font-weight:600;font-size:13px}.hdb-demo-card-sector{font-size:11px;color:var(--hdb-text-dim)}.hdb-field{display:block;margin-bottom:14px}.hdb-field-label{display:block;font-size:12px;font-weight:600;color:var(--hdb-text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}.hdb-input{width:100%;background:var(--hdb-surface-2);border:1px solid var(--hdb-border);border-radius:8px;padding:10px 12px;color:var(--hdb-text);font-size:14px;font-family:inherit;transition:border-color .15s ease;box-sizing:border-box}.hdb-input:focus{outline:none;border-color:var(--hdb-accent);box-shadow:0 0 0 3px rgba(0,102,255,.15)}.hdb-textarea{resize:vertical;min-height:70px;font-family:inherit}.hdb-color-row{display:flex;gap:8px;align-items:center}.hdb-color-input{width:48px;height:40px;border:1px solid var(--hdb-border);border-radius:8px;background:var(--hdb-surface-2);cursor:pointer;padding:2px}.hdb-color-hex{flex:1;text-transform:uppercase;font-family:ui-monospace,"SF Mono",Menlo,monospace}.hdb-presets{margin-top:16px}.hdb-preset-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.hdb-preset-chip{appearance:none;background:var(--hdb-surface-2);border:1px solid var(--hdb-border);border-radius:999px;padding:6px 10px 6px 6px;color:var(--hdb-text);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s ease}.hdb-preset-chip:hover{border-color:var(--hdb-accent)}.hdb-preset-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.15)}.hdb-font-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hdb-font-option{cursor:pointer;background:var(--hdb-surface-2);border:1px solid var(--hdb-border);border-radius:var(--hdb-radius);padding:16px 8px;text-align:center;transition:all .15s ease;display:flex;flex-direction:column;align-items:center;gap:4px}.hdb-font-option input{position:absolute;opacity:0;pointer-events:none}.hdb-font-option:has(input:checked),.hdb-font-option.is-selected{border-color:var(--hdb-accent);background:rgba(0,102,255,.12)}.hdb-font-preview{font-size:28px;font-weight:700;color:var(--hdb-text);line-height:1}.hdb-font-name{font-size:12px;color:var(--hdb-text-dim)}.hdb-logo-block{margin-top:20px;padding-top:18px;border-top:1px solid var(--hdb-border)}.hdb-logo-controls{display:flex;gap:8px;margin-top:6px;align-items:center}.hdb-logo-btn{margin:0;width:auto;flex:0 0 auto;cursor:pointer}.hdb-logo-preview{margin-top:12px;padding:10px;background:var(--hdb-surface-2);border:1px solid var(--hdb-border);border-radius:var(--hdb-radius);display:flex;align-items:center;gap:12px}.hdb-logo-preview img{max-width:80px;max-height:60px;width:auto;height:auto;object-fit:contain;background:#fff;padding:4px;border-radius:4px}.hdb-logo-meta{font-size:12px;color:var(--hdb-text-dim);word-break:break-all;line-height:1.3}.hdb-help-small{margin:6px 0 0;font-size:11px;color:var(--hdb-text-dim)}.hdb-summary{background:var(--hdb-surface-2);border:1px solid var(--hdb-border);border-radius:var(--hdb-radius);padding:12px 14px;margin-bottom:14px}.hdb-summary h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--hdb-text-dim)}.hdb-summary ul{list-style:none;margin:0;padding:0;font-size:13px}.hdb-summary li+li{margin-top:4px}.hdb-btn{appearance:none;border:0;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px}.hdb-btn:disabled{opacity:.45;cursor:not-allowed}.hdb-btn-primary{background:var(--hdb-accent);color:#fff}.hdb-btn-primary:hover:not(:disabled){background:var(--hdb-accent-hover)}.hdb-btn-secondary{background:var(--hdb-surface-2);border:1px solid var(--hdb-border);color:var(--hdb-text);margin-top:8px;width:100%}.hdb-btn-secondary:hover:not(:disabled){border-color:var(--hdb-accent)}.hdb-btn-ghost{background:0 0;color:var(--hdb-text-dim)}.hdb-btn-ghost:hover:not(:disabled){color:var(--hdb-text)}.hdb-btn-large{width:100%;padding:14px 16px;font-size:15px}.hdb-panel-nav{border-top:1px solid var(--hdb-border);padding:14px 20px;display:flex;justify-content:space-between;gap:8px;background:var(--hdb-surface)}.hdb-panel-nav .hdb-btn{min-width:100px}.hdb-feedback{margin-top:12px;padding:0;font-size:13px;text-align:center;min-height:20px}.hdb-feedback.is-success{color:var(--hdb-success)}.hdb-feedback.is-error{color:var(--hdb-error)}@media (max-width:900px){.hdb-builder{grid-template-columns:1fr;height:auto;min-height:0}.hdb-stage{height:60vh;min-height:400px}.hdb-panel{border-left:0;border-top:1px solid var(--hdb-border)}.hdb-progress-step{font-size:10px}}