.flex-layout-generator{--flg-line:#e3e7ed;--flg-border:#dce4ee;--flg-muted:#7a8ca6;--flg-accent:#615cf2;width:calc(100% - 48px);max-width:1400px;margin:0 auto;padding-bottom:30px;color:#263247}.flex-layout-layout{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;align-items:start}.flex-layout-controls{display:flex;flex-direction:column;gap:14px;min-width:0}.flex-layout-section{padding:15px 16px;background:#fff;border:1px solid var(--flg-border);border-radius:12px;box-shadow:0 2px 4px #1f2d400e}.flex-layout-section h2{margin:0 0 12px;color:#1f2937;font-size:13px;font-weight:650}.flex-layout-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.flex-layout-section-head h2{margin:0}.flex-layout-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}.flex-layout-preset{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--flg-border);border-radius:9px;background:#fcfdff;color:#40536e}.flex-layout-preset:hover{border-color:#c3bdfd;background:#f6f5ff}.flex-layout-preset-diagram{display:flex;gap:3px;width:100%;aspect-ratio:3/2;align-items:center;justify-content:center}.flex-layout-preset-diagram[data-direction=column]{flex-direction:column}.flex-layout-preset-diagram[data-justify=space-between]{justify-content:space-between}.flex-layout-preset-diagram[data-justify=center]{justify-content:center}.flex-layout-preset-diagram[data-justify=flex-end]{justify-content:flex-end}.flex-layout-preset-diagram i{flex:1 1;border-radius:3px;background:#c3bdfd;min-height:4px;min-width:4px}.flex-layout-preset-diagram[data-justify=center] i,.flex-layout-preset-diagram[data-justify=flex-end] i,.flex-layout-preset-diagram[data-justify=space-between] i{flex:0 1 22%}.flex-layout-preset-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flex-layout-control-group+.flex-layout-control-group{margin-top:14px;padding-top:14px;border-top:1px solid #eef1f6}.flex-layout-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.flex-layout-label label{color:#40536e;font:600 11px ui-monospace,SFMono-Regular,monospace}.flex-layout-count{display:flex;align-items:center;gap:2px}.flex-layout-count button{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--flg-border);border-radius:6px;background:#f8fafc;color:#52647e;font-size:14px;line-height:1}.flex-layout-count button:hover{background:#eef2ff;color:var(--flg-accent)}.flex-layout-count output{min-width:26px;text-align:center;color:#1f2937;font:650 13px ui-monospace,SFMono-Regular,monospace}.flex-layout-btn-group{display:flex;flex-wrap:wrap;gap:5px}.flex-layout-btn-group button{padding:5px 9px;border:1px solid var(--flg-border);border-radius:6px;background:#f8fafc;color:#64748b;font:11px ui-monospace,SFMono-Regular,monospace}.flex-layout-btn-group button:hover{border-color:#c3bdfd;color:var(--flg-accent)}.flex-layout-btn-group button[aria-pressed=true]{border-color:var(--flg-accent);background:var(--flg-accent);color:#fff}.flex-layout-gaps{display:grid;grid-template-columns:1fr;gap:9px}.flex-layout-gaps label{display:flex;align-items:center;gap:5px;color:#52647e;font-size:11px;white-space:nowrap}.flex-layout-gaps input{flex:1 1;width:auto;min-width:0;padding:7px 8px;border:1px solid var(--flg-border);border-radius:7px;background:#f8fafc;color:#1f2937;font:12px ui-monospace,SFMono-Regular,monospace}.flex-layout-gaps i{color:var(--flg-muted);font-size:11px;font-style:normal}.flex-layout-number,.flex-layout-text{width:100%;min-width:0;padding:7px 8px;border:1px solid var(--flg-border);border-radius:7px;background:#f8fafc;color:#1f2937;font:12px ui-monospace,SFMono-Regular,monospace}.flex-layout-number:focus-visible,.flex-layout-text:focus-visible{outline:0;border-color:#a9a3fb;box-shadow:0 0 0 3px #eeedff}.flex-layout-suggestions{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.flex-layout-suggestions button{padding:3px 7px;border:1px solid var(--flg-border);border-radius:5px;background:#f8fafc;color:#7a8ca6;font:10px ui-monospace,SFMono-Regular,monospace}.flex-layout-suggestions button:hover{border-color:#c3bdfd;color:var(--flg-accent)}.flex-layout-item-list{display:flex;flex-direction:column;gap:5px}.flex-layout-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid transparent;border-radius:7px}.flex-layout-item.is-active{border-color:#c3bdfd;background:#f6f5ff}.flex-layout-item-pick{display:flex;align-items:center;gap:7px;flex:1 1;min-width:0;padding:3px;border:0;background:transparent;color:#334155;font-size:12px;text-align:left}.flex-layout-item-index{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:5px;background:#eef2ff;color:var(--flg-accent);font:600 10px ui-monospace,SFMono-Regular,monospace}.flex-layout-item-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flex-layout-item-delete{display:grid;place-items:center;flex:none;width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:#9aa7b8}.flex-layout-item-delete:hover{background:#fee2e2;color:#dc2626}.flex-layout-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:9px;padding:7px;border:1px dashed var(--flg-border);border-radius:8px;background:#fcfdff;color:#64748b;font-size:12px}.flex-layout-add:hover{border-color:#c3bdfd;color:var(--flg-accent)}.flex-layout-right{display:flex;flex-direction:column;gap:14px;min-width:0}.flex-layout-preview{padding:15px 16px;background:#fff;border:1px solid var(--flg-border);border-radius:12px;box-shadow:0 2px 4px #1f2d400e;min-width:0}.flex-layout-preview h2{margin:0 0 12px;color:#1f2937;font-size:13px;font-weight:650}.flex-layout-canvas{display:flex;min-height:300px;padding:12px;border-radius:10px;background:#f8fafc;background-image:linear-gradient(45deg,#eef1f6 25%,transparent 0),linear-gradient(-45deg,#eef1f6 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eef1f6 0),linear-gradient(-45deg,transparent 75%,#eef1f6 0);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;overflow:auto}.flex-layout-box{display:grid;place-items:center;min-width:44px;min-height:44px;padding:6px 8px;border:1px solid #c3bdfd;border-radius:8px;background:#eef2ff;color:#4f46b5;font-size:11px;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer}.flex-layout-box:hover{background:#e0e7ff}.flex-layout-box.is-active{border-color:var(--flg-accent);background:var(--flg-accent);color:#fff;box-shadow:0 0 0 3px #eeedff}.flex-layout-preview-hint{margin:12px 0 0;color:var(--flg-muted);font-size:11px;line-height:1.8}.flex-layout-output{background:#fff;border:1px solid var(--flg-border);border-radius:12px;box-shadow:0 2px 4px #1f2d400e;overflow:hidden}.flex-layout-output-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--flg-line)}.flex-layout-tabs{display:flex;gap:2px;padding:3px;border-radius:7px;background:#f1f5f9}.flex-layout-tabs button{padding:5px 12px;border:0;border-radius:5px;background:transparent;color:#64748b;font-size:12px}.flex-layout-tabs button[aria-pressed=true]{background:#fff;color:#334155;box-shadow:0 1px 3px #00000012}.flex-layout-copy{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--flg-border);border-radius:7px;background:#fff;color:#52647e;font-size:12px}.flex-layout-copy:hover{border-color:#c3bdfd;color:var(--flg-accent)}.flex-layout-code{margin:0;padding:16px;overflow:auto;max-height:420px;color:#334155;font:12px/22px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre}.flex-layout-notice{min-height:16px;margin:10px 0 0;color:#367c55;font-size:11px}@media(max-width:1000px){.flex-layout-layout{grid-template-columns:1fr}.flex-layout-canvas{min-height:240px}}@media(max-width:700px){.flex-layout-generator{width:calc(100% - 28px)}.flex-layout-section{padding:13px 12px}.flex-layout-gaps{grid-template-columns:1fr}.flex-layout-canvas{min-height:200px;padding:8px}.flex-layout-code{max-height:320px;font-size:11px}.flex-layout-preview-hint{font-size:10px}}