:root{
  --bg:#0b1020;
  --panel:#121936;
  --muted:#1a224a;
  --accent:#6ea8fe;
  --text:#e6ecff;
  --sub:#a9b3d6;
  --danger:#ff6b6b;
  --ok:#64d2a3;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0d1330,#0a0f24);color:var(--text);font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial}
.app{display:grid;grid-template-columns:56px 1fr 320px;grid-template-rows:auto 1fr;grid-template-areas:"top top top" "tools stage side";height:100%}
.topbar{grid-area:top;display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.02);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:5}
.brand{font-weight:700;letter-spacing:.3px}
.sep{flex:1}
.hint{color:var(--sub);font-size:12px}
.tools{grid-area:tools;display:flex;flex-direction:column;gap:8px;padding:10px;background:transparent;border-right:1px solid rgba(255,255,255,.06)}
.toolbtn{appearance:none;border:0;cursor:pointer;border-radius:12px;padding:10px;display:grid;place-items:center;background:var(--panel);box-shadow:var(--shadow);color:var(--text);transition:transform .05s ease, background .2s}
.toolbtn:hover{transform:translateY(-1px)}
.toolbtn.active{outline:2px solid var(--accent);background:var(--muted)}
.stage{grid-area:stage;position:relative;overflow:hidden;background:repeating-conic-gradient(from 45deg, #0c132e 0% 25%, #0b122a 0% 50%) 50% / 26px 26px;}
.stage.gridless{background:var(--bg);}
.canvaswrap{position:absolute;inset:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:10}
.zoom-btn{appearance:none;border:0;background:var(--panel);color:var(--text);width:44px;height:44px;border-radius:12px;font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.12);transition:all .2s ease}
.zoom-btn:hover{transform:translateY(-1px);background:var(--muted);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.zoom-btn:active{transform:translateY(0);transition:none}
#board{width:100%;height:100%;display:block;cursor:default;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
#board.panning{cursor:grabbing !important}
#board.space-held{cursor:grab}
#board.dragging{cursor:grabbing !important}
.side{grid-area:side;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);overflow:auto}
.panel{padding:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.panel h3{margin:0 0 10px;font-size:12px;letter-spacing:.15em;color:var(--sub);text-transform:uppercase}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inline-label{display:flex;align-items:center;gap:8px}
.row.spaced{margin-bottom:8px}
.chip{padding:6px 10px;border-radius:999px;background:var(--panel);border:1px solid rgba(255,255,255,.08);color:var(--text)}
input[type="color"]{background:transparent;border:0;width:36px;height:28px;padding:0;border-radius:6px;overflow:hidden}
input[type="range"]{accent-color:var(--accent)}
.aws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;max-height:28vh;overflow-y:auto;padding-right:4px}
.aws-grid::-webkit-scrollbar{width:6px}
.aws-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:3px}
.aws-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
.aws-grid::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.aws-card{cursor:pointer;border-radius:12px;padding:10px;background:var(--panel);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:6px;align-items:center;box-shadow:var(--shadow);transition:transform .1s}
.aws-card:hover{transform:translateY(-1px)}
.aws-card[draggable="true"]{cursor:grab}
.aws-card[draggable="true"]:active{cursor:grabbing}
.aws-card:hover[draggable="true"]{transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,0,0,.45)}
.aws-icon{width:28px;height:28px;object-fit:contain}
.aws-name{font-weight:500;font-size:10px;text-align:center;line-height:1.2}
.icon-search{width:100%;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:var(--panel);color:var(--text);margin-bottom:8px;font-size:14px}
.icon-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(110,168,254,.2)}
.icon-search::placeholder{color:var(--sub)}
.category-selector{width:100%;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:var(--panel);color:var(--text);margin-bottom:8px}
.layers{max-height:42vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.layer{display:flex;align-items:center;gap:6px;padding:8px;border-radius:10px;background:var(--panel);border:1px solid rgba(255,255,255,.06)}
.layer.active{outline:2px solid var(--accent)}
.layer .name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 6px;border-radius:6px;transition:background .2s;cursor:text}
.layer .name:hover{background:rgba(255,255,255,.06);cursor:text}
.layer .name:focus{outline:none;background:rgba(255,255,255,.1);box-shadow:0 0 0 2px rgba(110,168,254,.3);cursor:text}
.iconbtn{appearance:none;border:0;background:transparent;color:var(--text);cursor:pointer;border-radius:8px;padding:6px}
.iconbtn:hover{background:rgba(255,255,255,.06)}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;background:#0e1633;border:1px solid rgba(255,255,255,.12);padding:1px 6px;border-radius:6px;font-size:11px}
.toast{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);padding:10px 12px;border-radius:10px;color:#fff;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.color-swatches{display:flex;gap:6px;margin-top:8px}
.color-swatch{width:28px;height:28px;border-radius:8px;border:2px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s;position:relative;appearance:none;padding:0}
.color-swatch:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3);border-color:rgba(255,255,255,.4)}
.color-swatch:active{transform:translateY(0)}
.color-swatch[data-color="#FFFFFF"]{border-color:rgba(0,0,0,.3)}
.color-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(110,168,254,.3)}
.badge{font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.footer{display:flex;justify-content:space-between;align-items:center;color:var(--sub);font-size:12px;padding:8px 12px}

/* Item hover state */
g.item{cursor:move}
g.item.drawing{cursor:default}
g.item.dragging{cursor:grabbing !important}

/* Handles */
.handle{pointer-events:all;cursor:pointer}
.handle[data-mode^="resize"]{cursor:nwse-resize}
.handle[data-mode="resize-n"],.handle[data-mode="resize-s"]{cursor:ns-resize}
.handle[data-mode="resize-e"],.handle[data-mode="resize-w"]{cursor:ew-resize}
.handle[data-mode="resize-ne"],.handle[data-mode="resize-sw"]{cursor:nesw-resize}
.handle[data-mode="rotate"]{cursor:grab}
.handle[data-mode="rotate"]:active{cursor:grabbing}
.handle[data-mode="multi-move"]{cursor:grab}
.handle[data-mode="multi-move"]:active{cursor:grabbing}
.handle[data-mode="move"]{cursor:grab}
.handle[data-mode="move"]:active{cursor:grabbing}

/* Selection box */
.selection-box{fill:rgba(110,168,254,.1);stroke:#6ea8fe;stroke-width:1;stroke-dasharray:4 2;pointer-events:none}
.selection-rect{fill:none;stroke:#8fb1ff;stroke-dasharray:6 4;stroke-width:1.5;pointer-events:none}

/* Snap indicators */
@keyframes snapPulse {
  0% { r: 6; opacity: 1; }
  50% { r: 10; opacity: 0.6; }
  100% { r: 6; opacity: 1; }
}
.snap-indicator{animation: snapPulse 0.6s ease-in-out infinite}
.snap-indicator-preview{transition: opacity 0.2s}