:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:13px;color:#203247;background:#f1f4f8}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #438bfa;outline-offset:2px}
#framepad{min-height:675px;background:#f5f7fb;color:#203247;border:1px solid #dce4ee;border-radius:15px;overflow:hidden;box-shadow:0 12px 35px #263b5312}
.fp-header{background:#fff;border-bottom:1px solid #e1e7ef;padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.fp-logo{background:#1765dc;color:#fff;font-weight:800;letter-spacing:-.3px;border-radius:9px;padding:8px 11px;font-size:14px}.fp-brand{display:flex;gap:11px;align-items:center}.fp-brandtext{font-size:13px;font-weight:750}.fp-sub{font-size:11px;color:#8390a1;margin-top:3px}.fp-headright{display:flex;gap:9px;align-items:center}.fp-tag{font-size:11px;background:#edf6f0;color:#238451;border-radius:999px;padding:6px 10px;font-weight:700}.fp-outline{border:1px solid #dce4ed;background:#fff;border-radius:8px;padding:8px 11px;color:#49637d;font-weight:700}.fp-outline:hover{background:#edf4fd}
.fp-template{display:flex;align-items:center;gap:7px;background:#fff;border-bottom:1px solid #e6ebf2;padding:9px 16px;flex-wrap:wrap}.fp-template-label{color:#8190a3;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-right:6px}.fp-chip{background:#f4f7fb;border:1px solid transparent;border-radius:7px;padding:7px 11px;font-weight:700;font-size:12px;color:#617187}.fp-chip:hover{border-color:#a8caef}.fp-chip.active{background:#e5f0ff;border-color:#9cc1f9;color:#1765cc}
.fp-content{display:grid;grid-template-columns:64px minmax(0,1fr) 255px;min-height:510px}.fp-tools{background:#fff;border-right:1px solid #e4e9f0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:17px 8px}.fp-tool{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:48px;height:48px;border:1px solid transparent;border-radius:9px;background:transparent;color:#718198}.fp-tool:hover{background:#f4f7fc}.fp-tool.active{color:#1766da;background:#e9f1ff;border-color:#a9c8f6}.fp-tool svg{width:22px;height:22px}.fp-tool span{font-size:9px;font-weight:750}.fp-tool.sep{margin-top:16px}.fp-stage{min-width:0;display:flex;flex-direction:column;background:#f8faff}.fp-canvasbar{height:43px;background:#fbfcff;border-bottom:1px solid #ebeff4;display:flex;align-items:center;justify-content:space-between;padding:0 14px;gap:6px;flex-wrap:wrap}.fp-barleft,.fp-barright{display:flex;gap:6px;align-items:center}.fp-barlabel{font-size:11px;color:#8391a4;margin-right:4px}.fp-tab{background:transparent;border:0;border-radius:6px;color:#7b899b;padding:6px 10px;font-size:12px;font-weight:750}.fp-tab.active{color:#225bad;background:#e7f0ff}.fp-zoom{border:1px solid #e5ebf2;background:#fff;color:#5e7186;border-radius:6px;height:27px;min-width:28px;font-size:15px}.fp-zoom:hover{background:#ebf2fa}
.fp-surface{position:relative;flex:1;min-height:405px;overflow:hidden;background:linear-gradient(#f9fbfe,#f4f8fe)}#fp-svg{width:100%;height:100%;display:block;touch-action:none;user-select:none}.fp-canvas-hint{position:absolute;left:12px;bottom:12px;background:#fffffff0;border:1px solid #e5ebf3;padding:8px 10px;border-radius:7px;font-size:11px;color:#718299;pointer-events:none;max-width:80%;box-shadow:0 2px 8px #6c829012}.fp-tooltip{position:absolute;z-index:8;pointer-events:none;display:none;background:#20344d;color:white;padding:8px 10px;border-radius:7px;box-shadow:0 5px 20px #23334b30;font-size:11px;line-height:1.6;white-space:nowrap}
.fp-inspector{background:#fff;border-left:1px solid #e5ebf2;padding:17px 16px;overflow:auto}.fp-panel-title{color:#2c3c51;font-size:13px;font-weight:800;margin:0 0 15px}.fp-inspector small{color:#8291a2;font-size:11px;line-height:1.5}.fp-section{border-top:1px solid #edf0f5;padding-top:14px;margin-top:16px}.fp-label{font-size:11px;color:#79899d;font-weight:750;margin-bottom:5px;display:block}.fp-field{margin:0 0 12px}.fp-input{width:100%;height:34px;border-radius:7px;border:1px solid #dbe4ef;background:#fafdff;color:#25415e;padding:6px 9px}.fp-input:focus{border-color:#4187ee}.fp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.fp-actions{display:flex;gap:6px}.fp-action{background:#eff5ff;border:1px solid #cfe0fc;color:#2564bd;border-radius:7px;padding:7px 9px;font-weight:750;font-size:11px}.fp-action.danger{background:#fff4f3;border-color:#f6dcda;color:#bb5353}.fp-note{background:#f0f6ff;border:1px solid #dae8fb;color:#526b8d;font-size:11px;line-height:1.5;border-radius:8px;padding:10px}.fp-metric{padding:9px 10px;border:1px solid #e7edf4;border-radius:9px;margin:7px 0;background:#fbfcff}.fp-metric-name{color:#8391a3;font-size:10px}.fp-metric-value{color:#243d56;font-size:16px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}.fp-metric-unit{font-size:11px;color:#8290a1;margin-left:4px}.fp-statusbar{padding:12px 17px;border-top:1px solid #e0e7f0;background:#fff;display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}.fp-statusleft{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.fp-state{font-size:11px;font-weight:800;color:#167c54;background:#e6f7ed;padding:5px 9px;border-radius:999px}.fp-state.bad{color:#a75035;background:#fff1e5}.fp-results{font-size:12px;color:#536981}.fp-results b{color:#253d55}.fp-mini{font-size:11px;color:#8693a4}.fp-legend{font-size:11px;color:#8a99a7}.fp-legend .key{display:inline-block;width:17px;height:3px;background:#b35dd5;vertical-align:middle;margin-right:5px;border-radius:4px}.fp-file{display:none}.fp-units-label{display:flex;gap:7px;align-items:center;color:#617187;font-size:11px;font-weight:700}.fp-units-label select{background:#f4f8ff;border:1px solid #d9e4f1;border-radius:7px;padding:7px 8px;color:#244365;font-size:12px;max-width:170px}.fp-load-drag{cursor:grab}.fp-load-drag:active{cursor:grabbing}
@media(max-width:760px){.fp-content{grid-template-columns:55px minmax(0,1fr)}.fp-inspector{grid-column:1 / -1;border-left:0;border-top:1px solid #dfe7f0;max-height:none;min-height:185px}.fp-tools{padding:10px 4px}.fp-tool{width:45px;height:46px}.fp-surface{min-height:345px}.fp-canvasbar{height:auto;min-height:43px;padding:7px 9px}.fp-header{padding:10px}.fp-template{padding:7px 10px}.fp-zoom{min-width:26px}}

.fp-headright{flex-wrap:wrap;justify-content:flex-end}.fp-outline:disabled{opacity:.43;cursor:not-allowed}.fp-share{background:#1765dc;color:white;border-color:#1765dc}.fp-share:hover{background:#1255bb;color:#fff}.fp-toast{display:none;position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:12;max-width:min(95%,520px);border-radius:9px;background:#233f60;color:#fff;font-size:12px;line-height:1.45;padding:10px 15px;box-shadow:0 8px 24px #1233;pointer-events:none}.fp-toast.visible{display:block}.fp-disclaimer{max-width:1100px;margin:10px auto 22px;padding:0 14px;color:#687a8e;font-size:11px;line-height:1.5}.fp-inspector{min-width:0}.fp-brandtext{white-space:nowrap}
@media(max-width:980px){.fp-headright{gap:6px}.fp-outline{padding:7px 8px}.fp-content{grid-template-columns:55px minmax(0,1fr) 225px}.fp-inspector{padding:13px 11px}}
@media(max-width:700px){.fp-content{grid-template-columns:51px minmax(0,1fr)}.fp-inspector{grid-column:1/-1;border-left:0;border-top:1px solid #dfe7f0;max-height:none;min-height:165px}.fp-tools{padding:8px 2px}.fp-surface{min-height:340px}.fp-headright{justify-content:flex-start;width:100%}.fp-statusbar{padding:9px}.fp-template{gap:3px}.fp-chip{padding:7px 8px}.fp-canvasbar{height:auto;min-height:44px;padding:6px}.fp-tab{padding:6px 7px}.fp-zoom{min-width:25px}.fp-disclaimer{margin:9px auto}}
@media(max-width:410px){.fp-header{align-items:flex-start}.fp-headright .fp-units-label{flex-basis:100%}.fp-headright .fp-outline{font-size:11px}.fp-brandtext{white-space:normal}.fp-canvas-hint{max-width:94%;font-size:10px}}