/* GraphLab 0.8 — Graphkit.io design system */
.gl-root{
 --bg:#061020;--p:#09182a;--line:#203650;--text:#edf5ff;--muted:#91a7c2;
 --a:#b5ff36;--a2:#23d9ce;--accent-gradient:linear-gradient(105deg,#b5ff36 0%,#23d9ce 100%);
 --panel:#09182a;--panel2:#0b1d32;--focus:#28d6ce;--danger:#ff6b7a;
}
.gl-root *{box-sizing:border-box}
.gl-root,.gl-root{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.45 Inter,Manrope,"Segoe UI",Arial,sans-serif}
.gl-root button,.gl-root input,.gl-root select,.gl-root textarea{font:inherit}
.gl-root button{border:1px solid #2c435e;background:#10243a;color:var(--text);padding:8px 11px;border-radius:7px;cursor:pointer;transition:border-color .15s,background .15s}
.gl-root button:hover:not(:disabled){border-color:var(--a2);background:#15314a}
.gl-root button:disabled{opacity:.38;cursor:not-allowed}
.gl-root button:focus-visible,.gl-root input:focus-visible,.gl-root select:focus-visible,.gl-root textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.gl-root .primary{background:var(--accent-gradient);border:0;color:#071526;font-weight:800}
.gl-root .primary:hover:not(:disabled){filter:brightness(1.06);background:var(--accent-gradient)}
.gl-root .primary:disabled{background:#1a2e44;color:#7088a3;opacity:1}
.gl-root .danger:hover:not(:disabled){border-color:var(--danger);color:#ffd6db}

.gl-root .app{height:100%;min-height:530px;display:grid;grid-template-rows:54px minmax(0,1fr) 27px}
.gl-root .top{display:flex;align-items:center;gap:14px;padding:0 18px;background:#050d1b;border-bottom:1px solid #1a304a;box-shadow:0 4px 18px #0002;z-index:6}
.gl-root .brand{display:flex;align-items:center;gap:10px;min-width:186px}
.gl-root .logo{height:32px;width:32px;border-radius:8px;background:#071528;display:grid;place-items:center;overflow:hidden}
.gl-root .logo svg{width:30px;height:30px;display:block}
.gl-root .brand strong{font-size:16px;letter-spacing:-.35px;font-weight:800}
.gl-root .brand small{display:block;color:#91a7c2;font-size:9px;letter-spacing:1.1px;text-transform:uppercase}
.gl-root #open{white-space:nowrap;background:#10243a}
.gl-root .actions{margin-left:auto;display:flex;gap:6px}
.gl-root .actions button{white-space:nowrap}

.gl-root .workspace{display:grid;grid-template-columns:58px minmax(0,1fr) 296px;min-height:0}
.gl-root .toolbar{min-height:0;background:#071426;border-right:1px solid #1b3049;display:flex;align-items:center;flex-direction:column;gap:7px;padding:12px 5px}
.gl-root .tool{position:relative;width:42px;height:40px;padding:0;border-color:transparent;background:transparent;font-size:19px;color:#a9bdd4;border-radius:7px}
.gl-root .tool:hover:not(:disabled){color:#fff;background:#102741}
.gl-root .tool.active{color:#071526;background:var(--accent-gradient);border-color:transparent;box-shadow:0 0 0 1px #23d9ce55}
.gl-root .tool .soon{position:absolute;right:-3px;bottom:-3px;font-size:8px;line-height:1;padding:2px 3px;border-radius:3px;background:#203650;color:#9fb6cf;font-weight:700;letter-spacing:.3px}
.gl-root .sep{height:1px;width:29px;background:#203650;margin:5px 0}

.gl-root .stage{min-width:0;min-height:0;display:grid;grid-template-rows:42px minmax(0,1fr);background-color:#081528;background-image:radial-gradient(#19304b .75px,transparent .75px);background-size:16px 16px;position:relative}
.gl-root .stagebar{display:flex;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid #203650;background:#09182a;color:#91a7c2;font-size:12px;white-space:nowrap;overflow:hidden}
.gl-root .stagebar button{padding:6px 9px}
.gl-root .stagebar #zoomSlider{accent-color:var(--a2);width:110px;padding:0}
.gl-root #toolLabel{color:var(--text);font-weight:700}
.gl-root #toolLabel b{color:var(--a2)}
.gl-root .grow{flex:1;min-width:8px}
.gl-root #zoom{min-width:42px;text-align:right;color:var(--text)}

/* Scrollable stage. The wrapper grows with the canvas so the whole image is
   always reachable by scrolling (grid/place-items centring cut off the
   top/left part of an oversized canvas in 0.7). */
.gl-root .stagebody{min-height:0;position:relative;overflow:auto;overscroll-behavior:contain}
.gl-root .stagebody.pan-ready,.gl-root .stagebody.pan-ready *{cursor:grab!important}
.gl-root .stagebody.panning,.gl-root .stagebody.panning *{cursor:grabbing!important}
.gl-root .stagewrap{display:flex;min-width:100%;min-height:100%;width:max-content;height:max-content;padding:56px}
.gl-root .canvasbox{position:relative;flex:none;margin:auto;box-shadow:0 14px 42px #0008;
 background-color:#fff;background-image:linear-gradient(45deg,#d7dde4 25%,transparent 25%),linear-gradient(-45deg,#d7dde4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d7dde4 75%),linear-gradient(-45deg,transparent 75%,#d7dde4 75%);
 background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;touch-action:none;user-select:none;-webkit-user-select:none}
.gl-root .canvasbox canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.gl-root #view{image-rendering:auto}
.gl-root #overlay{pointer-events:none}
.gl-root .canvasbox[hidden]{display:none}

.gl-root .empty{position:absolute;inset:42px 0 0 0;display:grid;place-items:center;padding:20px;pointer-events:none}
.gl-root .empty>div{pointer-events:auto;max-width:510px;text-align:center;padding:34px 24px;border:1px solid #29435d;border-radius:12px;background:linear-gradient(145deg,#0b1d32f2,#071426f2);box-shadow:0 18px 50px #0003}
.gl-root .empty .glyph{font-size:37px;color:var(--a2)}
.gl-root .empty h2{font-size:21px;margin:8px 0;letter-spacing:-.4px}
.gl-root .empty p{color:#9ab0c9;margin:0 auto 18px;max-width:390px}
.gl-root .empty[hidden]{display:none}
.gl-root .stage.dragover .stagebody{outline:2px dashed var(--a2);outline-offset:-8px}

.gl-root .right{min-height:0;background:#09182a;border-left:1px solid #203650;overflow:auto;padding:15px}
.gl-root .section{border-bottom:1px solid #203650;padding-bottom:15px;margin-bottom:15px}
.gl-root .section:last-child{border-bottom:0}
.gl-root .sectitle{display:flex;align-items:center;justify-content:space-between;font-weight:800;margin-bottom:10px;letter-spacing:-.15px}
.gl-root .tag{font-size:10px;color:#061528;background:var(--accent-gradient);border-radius:4px;padding:3px 7px;font-weight:800}
.gl-root .hint{font-size:12px;color:#91a7c2;line-height:1.55}
.gl-root .hint b,.gl-root .hint kbd{color:#cfe0f2}
.gl-root kbd{font:11px/1 ui-monospace,Consolas,monospace;background:#10243a;border:1px solid #2c435e;border-bottom-width:2px;border-radius:4px;padding:1px 4px}
.gl-root .field{display:grid;gap:5px;margin:8px 0}
.gl-root .field label{font-size:11px;color:#a1b5cc}
.gl-root input[type=number],.gl-root select,.gl-root textarea{width:100%;background:#061324;border:1px solid #2a425c;border-radius:7px;color:var(--text);padding:7px 8px;outline:none}
.gl-root input[type=number]:focus,.gl-root select:focus,.gl-root textarea:focus{border-color:var(--a2);box-shadow:0 0 0 2px #23d9ce18}
.gl-root input:disabled{opacity:.45}
.gl-root textarea{resize:vertical}
.gl-root input[type=checkbox],.gl-root input[type=range]{accent-color:var(--a2)}
.gl-root .row{display:flex;gap:7px}.gl-root .row>*{flex:1;min-width:0}
.gl-root .wide{width:100%}
.gl-root .stack{display:grid;gap:7px}
.gl-root .check{display:flex;align-items:center;gap:6px;margin:6px 0}

.gl-root .layers{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px;max-height:190px;overflow:auto}
.gl-root .layers li{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #203650;border-radius:7px;cursor:pointer;font-size:12px;background:#071426}
.gl-root .layers li:hover{border-color:#2c5770}
.gl-root .layers li.active{border-color:var(--a2);background:#0c2a36}
.gl-root .layers li canvas{width:34px;height:26px;border-radius:3px;flex:none;background:#fff;background-image:linear-gradient(45deg,#d7dde4 25%,transparent 25%),linear-gradient(-45deg,#d7dde4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d7dde4 75%),linear-gradient(-45deg,transparent 75%,#d7dde4 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}
.gl-root .layers li .ln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-root .layers li .ld{color:#7f97b2;font-size:11px}
.gl-root .layers li.basebg{cursor:default;opacity:.85}

.gl-root .status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 11px;background:#050d1b;border-top:1px solid #1a304a;font-size:11px;color:#91a7c2;white-space:nowrap;overflow:hidden}
.gl-root .dot{display:inline-block;width:6px;height:6px;background:var(--a2);border-radius:50%;margin-right:6px}
.gl-root .toast{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:none;background:#102b3d;border:1px solid #26766e;border-radius:8px;padding:10px 14px;z-index:20;max-width:90%;box-shadow:0 8px 25px #0008}
.gl-root .toast.error{border-color:#8a3442;background:#2b1420}

/* Transform box: positioned in CSS px = document px × zoom, rotated about its centre. */
.gl-root #transformBox{position:absolute;z-index:4;display:none;left:0;top:0;outline:1px solid var(--a2);transform-origin:50% 50%;pointer-events:none}
.gl-root #transformBox .handle,.gl-root #transformBox .rotateHandle{position:absolute;width:12px;height:12px;min-width:0;padding:0;border:1px solid #098f8d;background:#f3fffd;border-radius:2px;pointer-events:auto;touch-action:none}
.gl-root #transformBox .nw{left:-6px;top:-6px}.gl-root #transformBox .n{left:calc(50% - 6px);top:-6px}
.gl-root #transformBox .ne{right:-6px;top:-6px}.gl-root #transformBox .e{right:-6px;top:calc(50% - 6px)}
.gl-root #transformBox .se{right:-6px;bottom:-6px}.gl-root #transformBox .s{left:calc(50% - 6px);bottom:-6px}
.gl-root #transformBox .sw{left:-6px;bottom:-6px}.gl-root #transformBox .w{left:-6px;top:calc(50% - 6px)}
.gl-root #transformBox .rotateHandle{left:calc(50% - 10px);top:-34px;width:20px;height:20px;border-radius:50%;font-size:13px;line-height:17px;cursor:grab;color:#087d7c}
.gl-root #transformBox .stem{position:absolute;left:50%;top:-22px;width:1px;height:16px;background:var(--a2)}

.gl-root .busy-veil{position:absolute;inset:42px 0 0 0;z-index:15;display:none;place-items:center;background:#06102055;backdrop-filter:blur(1px)}
.gl-root .busy-veil.on{display:grid}
.gl-root .busy-veil div{background:#0b1d32;border:1px solid #26766e;border-radius:10px;padding:14px 18px}

@media(max-width:1050px){.gl-root .workspace{grid-template-columns:52px minmax(0,1fr) 266px}.gl-root .stagebar .kbdhint{display:none}.gl-root .brand{min-width:160px}}
@media(max-width:850px){.gl-root .workspace{grid-template-columns:52px minmax(0,1fr)}.gl-root .right{display:none}.gl-root .brand{min-width:0}.gl-root .brand small{display:none}.gl-root .top{padding:0 8px}.gl-root .actions button{padding:7px;font-size:12px}.gl-root .stagewrap{padding:24px}}
@media(max-width:520px){.gl-root .brand strong{font-size:15px}.gl-root .actions{gap:3px}.gl-root .actions .optional{display:none}.gl-root .tool{width:40px;height:40px}.gl-root #open{font-size:12px;padding:7px}.gl-root .stagebar{gap:5px;padding:0 6px}.gl-root .stagebar #zoomSlider{width:64px}.gl-root #toolLabel{display:none}}

.gl-root #aifillTop:not(:disabled){animation:gkPulse 2s ease-in-out 3}
@keyframes gkPulse{50%{box-shadow:0 0 0 5px #23d9ce40}}

.gl-root .refine{border:1px solid #203650;border-radius:8px;padding:8px 10px;margin-top:10px;transition:opacity .2s}
.gl-root .refine.off{opacity:.5}
.gl-root .refine.off label{cursor:not-allowed}

/* Collapsible sidebar sections */
.gl-root .sectoggle{width:100%;background:none;border:0;border-radius:6px;padding:4px 2px;color:var(--text);font:inherit;font-weight:800;text-align:left;gap:8px;cursor:pointer}
.gl-root .sectoggle:hover:not(:disabled){background:#0e2238;border:0}
.gl-root .sectoggle .tag{margin-left:auto}
.gl-root .sectoggle .chev{color:#7f97b2;font-size:12px;transition:transform .15s;width:14px;text-align:center}
.gl-root .section.collapsed .chev{transform:rotate(-90deg)}
.gl-root .section.collapsed .secbody{display:none}
.gl-root .section.collapsed{padding-bottom:6px;margin-bottom:8px}
.gl-root .section .sectoggle{margin-bottom:6px}
.gl-root .section.collapsed .sectoggle{margin-bottom:0}

/* Floating selection actions on the canvas */
.gl-root .selbar{position:absolute;z-index:6;display:none;gap:4px;padding:4px;background:#071426f2;border:1px solid #2c5770;border-radius:10px;box-shadow:0 8px 24px #000a;white-space:nowrap;backdrop-filter:blur(4px)}
.gl-root .selbar.on{display:flex}
.gl-root .selbar button{padding:6px 10px;font-size:12.5px;border-radius:7px}
.gl-root .selbar .ghost{padding:6px 9px}
.gl-root .ghost{background:transparent;border-color:#2c435e}

/* ── Inside Graphkit (global nav 60px above) ── */
.gl-root{position:relative;z-index:1;padding-top:60px;height:auto}
.gl-root .app{height:calc(100vh - 60px);height:calc(100dvh - 60px)}
.gl-root a.brand{color:inherit;text-decoration:none}
.gl-root a.brand:hover{text-decoration:none}
.gl-root .logo img{width:26px;height:26px;object-fit:contain;display:block}
.gl-root .gl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gl-root .gl-credits{white-space:nowrap;background:#0b2030;border-color:#2d6577;font-size:12.5px}
.gl-root .gl-credits b{color:#b5ff36}
.gl-root .gl-cost{margin:2px 0 10px}
.gl-root .gl-cost b{color:var(--a)}
.gl-root .status{border-top:1px solid #1a304a}
.gl-root + footer{margin-top:0}
.gl-root .gl-credits{flex-shrink:0}@media(max-width:620px){.gl-root .gl-credits{display:none}}
.gl-root .app{grid-template-columns:minmax(0,1fr)}.gl-root .top{min-width:0;overflow-x:auto;scrollbar-width:none}@media(max-width:520px){.gl-root .brand>div:last-child{display:none}.gl-root .brand{min-width:0}}

/* 0.13.1 — How it works: header button, empty-state steps, side-panel guide, guide dialog */
.gl-root .gl-help-btn{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap;font-size:12.5px;background:transparent;border-color:#2c435e}
.gl-root .gl-help-btn span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--a2);color:#061020;font-weight:900;font-size:12px;font-style:normal}
.gl-root .gl-help-btn em{font-style:normal}
@media(max-width:1050px){.gl-root .gl-help-btn em{display:none}.gl-root .gl-help-btn{padding:7px}}
.gl-root .gl-steps{list-style:none;counter-reset:gls;margin:0 0 18px;padding:0;text-align:left;display:flex;flex-direction:column;gap:10px}
.gl-root .gl-steps li{counter-increment:gls;position:relative;padding-left:34px;line-height:1.4}
.gl-root .gl-steps li::before{content:counter(gls);position:absolute;left:0;top:0;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#061020;background:var(--accent-gradient)}
.gl-root .gl-steps b{color:var(--text)}
.gl-root .gl-steps i{color:var(--muted);font-style:normal;font-size:12px}
.gl-root .gl-steps span{display:block;color:#9ab0c9;font-size:13px;margin-top:2px}
.gl-root .gl-steps kbd{font-size:11px}
.gl-root .empty .gl-steps{max-width:400px;margin:0 auto 20px}
.gl-root .gl-steps-sm{gap:9px;margin-bottom:12px}
.gl-root .gl-steps-sm li{padding-left:28px}
.gl-root .gl-steps-sm li::before{width:20px;height:20px;font-size:11px}
.gl-root .gl-steps-sm span{font-size:12px}
.gl-root .gl-guide-sec{background:linear-gradient(160deg,#0d2438,#09182a)}
.gl-root .gl-guide{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:72px 16px 16px;background:rgba(2,8,18,.72);backdrop-filter:blur(3px)}
.gl-root .gl-guide[hidden]{display:none}
.gl-root .gl-guide-card{width:min(560px,100%);max-height:calc(100dvh - 88px);overflow-y:auto;background:linear-gradient(150deg,#0c1f35,#071426);border:1px solid #2a4560;border-radius:14px;padding:22px 24px;box-shadow:0 30px 80px #000a}
.gl-root .gl-guide-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.gl-root .gl-guide-head h2{margin:0;font-size:20px;letter-spacing:-.4px}
.gl-root .gl-guide-head button{padding:5px 10px}
.gl-root .gl-guide-tips{border-top:1px solid #203650;padding-top:14px;margin-bottom:16px}
.gl-root .gl-guide-tips p{margin:0 0 9px;color:#9ab0c9;font-size:13px}
.gl-root .gl-guide-tips b{color:var(--text)}
.gl-root .gl-guide-tips i{color:var(--a)}
@media(max-width:520px){.gl-root .gl-guide-card{padding:18px 16px}}