/* ProtoX specific tweaks built on top of style.css */
.px-canvas{
  background: radial-gradient(circle at top,#15264a,#0B122B 70%);
  overflow:auto;
  position:relative;
  display:block;
  width:100%;
  height:100%;
  flex:1 1 auto;
  align-self:stretch;
  box-sizing:border-box;
  padding:0;
  overscroll-behavior: contain;
}
.px-preview-wrap{
  align-items:stretch;
  justify-content:flex-start;
}
.px-grid{ position:absolute; left:24px; top:24px; min-width:calc(100% - 24px); min-height:calc(100% - 24px); background-size:40px 40px, 8px 8px; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-blend-mode: overlay; opacity:.9; border-radius:20px
}
.px-view{ position:absolute; left:24px; top:24px; min-width:calc(100% - 24px); min-height:calc(100% - 24px); overflow:visible; outline:none; transform-origin: 0 0; }
.px-artboard{ position:absolute; background:#121826; border-radius:16px; box-shadow:0 14px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(120,180,255,.18) inset }
.px-artboard .title{ position:absolute; top:-28px; left:0; color:var(--muted); font-size:12px }
.px-board-clip{ position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; border-radius:inherit }
.px-node{ position:absolute; border-radius:12px; color:#111; font-family:Inter,system-ui,sans-serif; display:flex; align-items:center; justify-content:center }
.px-node[data-locked="true"]::before{ content:'\1F512'; position:absolute; top:6px; left:6px; font-size:12px; line-height:1; color:rgba(134,210,255,.9); background:rgba(11,17,36,.82); border-radius:10px; padding:2px 6px; pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.px-node.image img{ width:100%; height:100%; object-fit:contain; border-radius:inherit; pointer-events:none }
.px-node.text{ color:#fff; background:transparent; border-radius:0; overflow:hidden }
.px-node .px-link-pin{ position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%; border:1px solid rgba(134,210,255,.6); background:linear-gradient(180deg,rgba(28,46,88,.9),rgba(13,22,46,.9)); box-shadow:0 0 0 1px rgba(11,70,134,.35); cursor:crosshair; display:flex; align-items:center; justify-content:center; padding:0; color:#7fd2ff; font-size:10px; line-height:1; opacity:0.85; transition:transform .12s ease, opacity .12s ease; }
.px-node .px-link-pin::after{ content:''; width:6px; height:6px; border-radius:50%; background:#7fd2ff; box-shadow:0 0 6px rgba(127,210,255,.7); }
.px-node .px-link-pin:hover{ opacity:1; transform:scale(1.08); }
.px-node .px-link-pin[data-has-link="true"]::after{ background:#f7d57c; box-shadow:0 0 6px rgba(247,213,124,.7); }
.px-selected{ outline:2px solid #86d2ff; outline-offset:0 }
.px-handle{ position:absolute; width:8px; height:8px; background:#86d2ff; border-radius:50%; border:1px solid #0a1a2c }
.px-handle[data-pos="n"], .px-handle[data-pos="s"]{ left:50%; transform:translateX(-50%) }
.px-handle[data-pos="e"], .px-handle[data-pos="w"]{ top:50%; transform:translateY(-50%) }
.px-handle[data-pos="n"]{ top:-5px } .px-handle[data-pos="s"]{ bottom:-5px }
.px-handle[data-pos="e"]{ right:-5px } .px-handle[data-pos="w"]{ left:-5px }
.px-handle[data-pos="ne"]{ top:-5px; right:-5px } .px-handle[data-pos="nw"]{ top:-5px; left:-5px }
.px-handle[data-pos="se"]{ bottom:-5px; right:-5px } .px-handle[data-pos="sw"]{ bottom:-5px; left:-5px }
.prop-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px }

.shape-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin:12px 0; }
.shape-chip{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px; border-radius:12px; border:1px solid var(--border,#1A2342); background:linear-gradient(180deg,#162341,#0d152d); color:var(--ink,#e7ecff); font-size:12px; transition:all .16s ease; cursor:pointer; }
.shape-chip:hover{ border-color:#61c2ff; box-shadow:0 0 0 1px rgba(97,194,255,.4), 0 8px 18px rgba(0,0,0,.35); transform:translateY(-1px); }
.shape-chip[data-active="true"]{ border-color:#86d2ff; box-shadow:0 0 0 1px rgba(134,210,255,.5), 0 10px 24px rgba(0,0,0,.42); background:linear-gradient(180deg,#1b2b4a,#101832); }
.shape-chip .chip-preview{ width:48px; height:32px; border-radius:12px; background:#1f2b4f; border:1px solid rgba(134,210,255,.25); box-shadow:inset 0 0 0 1px rgba(12,18,40,.8); position:relative; }
.chip-pill{ border-radius:999px !important; }
.chip-ellipse{ border-radius:50% !important; }
.chip-circle{ border-radius:50% !important; width:40px; height:40px; }
.chip-cut::after{ content:''; position:absolute; inset:0; clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); background:linear-gradient(135deg,rgba(134,210,255,.35),rgba(12,18,40,.8)); opacity:.4; border-radius:8px; }
.chip-rounded{ border-radius:18px !important; }
.chip-line-h{ position:relative; }
.chip-line-h::after{ content:''; position:absolute; left:8px; right:8px; top:50%; height:2px; background:#86d2ff; transform:translateY(-50%); border-radius:2px; }
.chip-line-v{ position:relative; }
.chip-line-v::after{ content:''; position:absolute; top:6px; bottom:6px; left:50%; width:2px; background:#86d2ff; transform:translateX(-50%); border-radius:2px; }
.chip-triangle{ clip-path:polygon(50% 12%, 10% 88%, 90% 88%); background:#26406f; }
.chip-diamond{ clip-path:polygon(50% 10%, 90% 50%, 50% 90%, 10% 50%); background:#26406f; }
.shape-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.shape-row .control{ flex:1; min-width:120px; }
.shape-row .control.compact{ max-width:110px; }

.preset-groups{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.preset-group h4{ margin:0 0 6px 0; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#7f8bb7); font-weight:600; }
.preset-group .group-row{ display:flex; flex-wrap:wrap; gap:8px; }
.preset-group .pxPreset{ flex:1 1 120px; white-space:nowrap; justify-content:center; }
.preset-group[data-group="desktop"] .pxPreset{ min-width:140px; }

.px-link-layer{ overflow:visible; }
.px-link-path{ fill:none; stroke:rgba(111,192,255,.55); stroke-width:2.2px; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; filter:drop-shadow(0 0 8px rgba(72,160,255,.35)); }
.px-link-path.active{ stroke:rgba(186,219,255,.95); stroke-width:2.8px; }
.px-link-path.draft{ stroke-dasharray:6 6; stroke:rgba(134,210,255,.7); }
.px-linking{ cursor:crosshair !important; }

/* Wireframe mode */
.px-canvas.wireframe .px-node{ background:transparent !important; color:#9fd4ff; border:1px dashed rgba(159,212,255,.6) !important }
.px-canvas.wireframe .px-node.image img{ opacity:.45; filter:grayscale(100%) }

/* Alignment guides */
.px-guide-v, .px-guide-h{ position:absolute; background:rgba(121,201,255,.75); pointer-events:none; z-index:3000 }
.px-guide-v{ width:1px; top:0; bottom:0 }
.px-guide-h{ height:1px; left:0; right:0 }

/* Rulers */
.px-ruler{ position:absolute; z-index:2500; background:linear-gradient(180deg,#0c1534,#0b122b); border:1px solid rgba(60,108,180,.35); box-shadow:inset 0 0 0 1px rgba(22,34,70,.4); image-rendering:pixelated }
.px-ruler-top{ left:24px; right:0; top:0; height:24px; cursor:ns-resize }
.px-ruler-left{ top:24px; bottom:0; left:0; width:24px; cursor:ew-resize }
.px-canvas .px-grid{ left:24px; top:24px; }

/* Background editor */
.bg-stop-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bg-stop-row input[type="color"]{ width:42px; height:32px; padding:0; border:none; background:transparent }
.bg-stop-row input[type="number"]{ width:72px }
.bg-stop-row .remove-stop{ margin-left:auto }

/* Keep UI buttons themed regardless of artboard color */
.preset-group .pxPreset,
#pxBtnNewBoard{
  background:#2c2149 !important;
  color:var(--ink) !important;
  border:1px solid #4a3a77 !important;
}

/* Text panel enhancements */
#px-panel-text details.gradient-card{ margin-top:8px; border-radius:14px; border:1px solid #35275a; background:#1a1231; padding:10px 12px 12px; }
#px-panel-text details.gradient-card[open]{ background:#21163c; }
#px-panel-text details.gradient-card summary{ cursor:pointer; display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); margin:-10px -12px 10px; padding:10px 12px; border-radius:12px; list-style:none; }
#px-panel-text details.gradient-card summary::-webkit-details-marker{ display:none; }
#px-panel-text .gradient-controls{ display:flex; flex-direction:column; gap:12px; }
#px-panel-text .angle-field{ display:flex; flex-direction:column; gap:6px; min-width:120px; }

.px-workspace-panel{ min-width:560px; min-height:420px; }
.px-workspace-toolbar input[type="text"]{ flex:1 1 320px; min-width:220px; height:32px; border-radius:8px; border:1px solid #4a3a77; background:#241a3f; color:var(--ink); padding:4px 8px; }
.px-workspace-toolbar select{ height:32px; }
.px-workspace-body{ display:grid; grid-template-columns:250px 1fr; gap:12px; padding:12px; height:calc(100% - 96px); min-height:0; }
.px-workspace-sidebar{ display:flex; flex-direction:column; gap:12px; min-height:0; }
.px-workspace-summary{ border:1px solid #35275a; background:#1a1231; border-radius:14px; padding:12px; overflow:auto; min-height:0; }
.px-workspace-summary h4{ margin:0 0 8px 0; font-size:.86rem; color:var(--ink); }
.px-workspace-summary .summary-metric{ display:flex; justify-content:space-between; gap:8px; font-size:.82rem; color:#cfd8ff; }
.px-workspace-summary .summary-chip-wrap{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.px-workspace-summary .summary-chip{ padding:4px 8px; border-radius:999px; background:#241c43; border:1px solid #473971; font-size:.75rem; color:#d7e2ff; }
.px-workspace-options{ display:flex; flex-direction:column; gap:8px; border:1px solid #35275a; background:#1a1231; border-radius:14px; padding:12px; }
.px-workspace-main{ display:flex; flex-direction:column; min-height:0; border:1px solid #35275a; background:#130f27; border-radius:14px; overflow:hidden; }
.px-workspace-tree-head{ display:flex; justify-content:space-between; gap:8px; align-items:center; padding:10px 12px; border-bottom:1px solid #2c224c; }
.px-workspace-tree{ padding:12px; overflow:auto; min-height:0; font-size:.85rem; }
.px-workspace-tree ul{ list-style:none; margin:0; padding-left:18px; }
.px-workspace-tree li{ margin:0; padding:2px 0; }
.px-workspace-tree .node-row{ display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:10px; color:#d7e2ff; }
.px-workspace-tree .node-row:hover{ background:rgba(134,210,255,.08); }
.px-workspace-tree .node-row.dir{ color:#9fd4ff; font-weight:600; }
.px-workspace-tree .node-row.file{ color:#d7e2ff; }
.px-workspace-tree .node-meta{ color:#8ea1d0; font-size:.74rem; margin-left:auto; }
.px-workspace-tree .node-children{ margin-top:2px; }

@media (max-width: 980px){
  .px-workspace-body{ grid-template-columns:1fr; }
}

/* --------- Responsive tuning for ProtoX --------- */
@media (max-width: 980px){
  /* Tighten rulers and insets to maximize canvas on phones */
  .px-ruler-top{ left:16px; height:18px; }
  .px-ruler-left{ top:18px; width:18px; }
  .px-grid{ left:18px; top:18px; }
  .px-view{ left:18px; top:18px; }
  .px-artboard{ border-radius:12px; }
}
@media (max-width: 640px){
  .shape-gallery{ grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
  .shape-chip .chip-preview{ width:42px; height:28px; }
}