*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--brand:#2563eb;--dark:#1e293b;--muted:#64748b;--border:#e2e8f0;--bg:#f8fafc;--white:#fff;--red:#ef4444;color:var(--dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px}body{background:var(--white);height:100vh;overflow:hidden}#root{height:100%}.app{flex-direction:column;height:100%;display:flex}.app-header{background:var(--brand);color:var(--white);flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 24px;display:flex}.app-title{align-items:center;gap:10px;font-size:15px;font-weight:700;display:flex}.app-logo{letter-spacing:.5px;background:#fff3;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:700}.split{flex:1;display:flex;overflow:hidden}.form-panel{flex:0 0 58%;padding:24px 28px;overflow-y:auto}.json-panel{border-left:1px solid var(--border);background:var(--bg);flex-direction:column;flex:1;min-width:0;display:flex}.json-header{color:var(--muted);text-transform:uppercase;letter-spacing:.7px;border-bottom:1px solid var(--border);background:var(--white);flex-shrink:0;padding:9px 16px;font-size:10.5px;font-weight:700}.json-area{resize:none;color:var(--dark);background:0 0;border:none;outline:none;flex:1;padding:14px 16px;font-family:SF Mono,Fira Code,monospace;font-size:11.5px;line-height:1.6}.section{margin-bottom:26px}.section-title{color:var(--brand);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);margin-bottom:12px;padding-bottom:7px;font-size:10.5px;font-weight:700}.fields{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:11px;display:grid}.field{flex-direction:column;gap:4px;display:flex}.field-full{grid-column:1/-1}.field label{color:var(--muted);font-size:11px;font-weight:500}.field input,.field select,.field textarea{border:1px solid var(--border);color:var(--dark);background:var(--white);border-radius:4px;padding:6px 9px;font-family:inherit;font-size:13px;transition:border-color .12s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none}.field textarea{resize:vertical}.items-table{border-collapse:collapse;width:100%;margin-bottom:10px}.items-table th{color:var(--muted);text-align:left;border-bottom:1px solid var(--border);padding:0 6px 7px;font-size:10.5px;font-weight:600}.items-table td{padding:3px}.items-table td input{border:1px solid var(--border);width:100%;color:var(--dark);background:var(--white);border-radius:4px;padding:5px 7px;font-family:inherit;font-size:13px}.items-table td input:focus{border-color:var(--brand);outline:none}.btn-clear-header{color:#fffc;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff40;border-radius:6px;padding:7px 14px;font-family:inherit;font-size:13px;font-weight:500}.btn-clear-header:hover{color:var(--white);background:#ef444459;border-color:#ef444499}.btn-sample{color:var(--white);cursor:pointer;background:#ffffff26;border:1px solid #ffffff59;border-radius:6px;padding:7px 14px;font-family:inherit;font-size:13px;font-weight:500}.btn-sample:hover{background:#ffffff40}.btn-generate{background:var(--white);color:var(--brand);cursor:pointer;border:none;border-radius:6px;padding:7px 18px;font-size:13px;font-weight:700}.btn-generate:hover{background:#eff6ff}.items-actions{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.btn-items-action{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:4px;padding:4px 10px;font-family:inherit;font-size:11.5px}.btn-items-action:hover{border-color:var(--brand);color:var(--brand)}.btn-items-clear:hover{border-color:var(--red)!important;color:var(--red)!important}.btn-add{color:var(--muted);cursor:pointer;background:0 0;border:1px dashed #94a3b8;border-radius:4px;padding:5px 13px;font-family:inherit;font-size:12px}.btn-add:hover{border-color:var(--brand);color:var(--brand)}.btn-remove{color:#cbd5e1;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 6px;font-size:15px;line-height:1}.btn-remove:hover:not(:disabled){color:var(--red)}.btn-remove:disabled{opacity:.3;cursor:default}.toolbar{border-bottom:1px solid var(--border);background:var(--white);flex-shrink:0;align-items:center;gap:10px;padding:9px 16px;display:flex}.toolbar-spacer{flex:1}.btn-back{border:1px solid var(--border);color:var(--dark);cursor:pointer;background:0 0;border-radius:6px;padding:5px 13px;font-family:inherit;font-size:13px}.btn-back:hover{border-color:var(--brand);color:var(--brand)}.toggle{border:1px solid var(--border);border-radius:6px;display:flex;overflow:hidden}.toggle button{cursor:pointer;background:var(--white);color:var(--muted);border:none;padding:5px 16px;font-family:inherit;font-size:13px}.toggle button.active{background:var(--brand);color:var(--white);font-weight:600}.btn-open{border:1px solid var(--border);color:var(--dark);cursor:pointer;background:0 0;border-radius:6px;padding:5px 13px;font-family:inherit;font-size:13px;text-decoration:none}.btn-open:hover{border-color:var(--brand);color:var(--brand)}.state-center{color:var(--muted);flex:1;justify-content:center;align-items:center;font-size:14px;display:flex}.error-panel{color:#991b1b;background:#fef2f2;flex:1;padding:24px;overflow:auto}.error-panel pre{white-space:pre-wrap;color:#b91c1c;margin-top:10px;font-size:11px}.login-wrap{background:var(--bg);justify-content:center;align-items:center;height:100vh;display:flex}.login-card{background:var(--white);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:20px;width:360px;padding:36px 40px;display:flex}.login-logo{align-items:center;gap:10px;margin-bottom:4px;display:flex}.login-title{color:var(--dark);font-size:17px;font-weight:700}.login-subtitle{color:var(--muted);font-size:13px}.login-error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:4px;padding:8px 10px;font-size:12px}.btn-login{background:var(--brand);color:var(--white);cursor:pointer;border:none;border-radius:6px;width:100%;padding:9px;font-family:inherit;font-size:14px;font-weight:600}.btn-login:hover:not(:disabled){background:#1d4ed8}.btn-login:disabled{opacity:.55;cursor:default}.btn-signout{color:var(--white);cursor:pointer;background:#ffffff26;border:1px solid #ffffff4d;border-radius:6px;padding:6px 10px;font-size:14px;line-height:1}.btn-signout:hover{background:#ffffff40}.json-actions{border-bottom:1px solid var(--border);background:var(--white);flex-shrink:0;margin-bottom:0;padding:8px 12px}@media (orientation:portrait){.split{flex-direction:column}.form-panel{flex:1}.json-panel{border-left:none;border-top:1px solid var(--border);flex:0 0 260px}}