/* Jr Labs RC13 — SVG Studio
   Local visual SVG editor, designed to fit the existing Jr Labs product language. */

#tool-svgStudio .app-content{
  width:min(1540px,calc(100% - 36px));
  padding-top:20px;
}
.svg-studio-shell{
  min-height:calc(100vh - 120px);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.svg-studio-toolbar{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:56px;
  padding:7px;
  border:1px solid #dfe5ec;
  border-radius:16px;
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 28px rgba(15,23,42,.055);
  overflow-x:auto;
  scrollbar-width:thin;
}
.svg-toolbar-group{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
.svg-toolbar-sep{
  width:1px;
  height:28px;
  margin:0 3px;
  background:#e7ebf0;
  flex:0 0 auto;
}
.svg-tool-btn,
.svg-icon-btn{
  min-width:38px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 9px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#4a586d;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
  white-space:nowrap;
  transition:.14s ease;
}
.svg-tool-btn:hover,.svg-icon-btn:hover{background:#f5f7fa;color:#172033}
.svg-tool-btn.active,.svg-icon-btn.active{
  border-color:#ccd5ff;
  background:#eef2ff;
  color:#4338ca;
}
.svg-tool-btn:disabled,.svg-icon-btn:disabled{opacity:.34;cursor:not-allowed}
.svg-tool-symbol{font-size:15px;line-height:1;font-weight:900}
.svg-toolbar-spacer{margin-left:auto}
.svg-zoom-display{
  min-width:48px;
  color:#5e6b7d;
  text-align:center;
  font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.svg-mobile-panel-buttons{display:none}

.svg-studio-workspace{
  position:relative;
  min-height:680px;
  display:grid;
  grid-template-columns:250px minmax(420px,1fr) 310px;
  overflow:hidden;
  border:1px solid #dfe5ec;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 34px rgba(15,23,42,.045);
}
.svg-side-panel{
  min-width:0;
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.svg-layers-panel{border-right:1px solid #e6eaf0}
.svg-inspector-panel{border-left:1px solid #e6eaf0}
.svg-panel-head{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px;
  border-bottom:1px solid #edf0f4;
}
.svg-panel-head h3{
  margin:0;
  color:#263246;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
}
.svg-panel-head span{color:#94a3b8;font-size:9px}
.svg-panel-scroll{
  min-height:0;
  overflow:auto;
  padding:10px;
  flex:1;
}

/* Layers */
.svg-layers-tree,.svg-layers-tree ul{list-style:none;margin:0;padding:0}
.svg-layer-item>ul{margin-left:12px}
.svg-layer-row{
  min-height:38px;
  display:grid;
  grid-template-columns:25px minmax(0,1fr) 26px 26px 24px 24px;
  align-items:center;
  gap:2px;
  margin:2px 0;
  padding:2px 3px 2px calc(4px + var(--layer-depth,0)*5px);
  border:1px solid transparent;
  border-radius:9px;
}
.svg-layer-row:hover{background:#f8fafc}
.svg-layer-item.is-selected>.svg-layer-row{border-color:#d7ddff;background:#f1f4ff}
.svg-layer-type{
  width:23px;height:23px;display:grid;place-items:center;border-radius:7px;
  background:#f3f5f8;color:#69778c;font-size:9px;font-weight:950
}
.svg-layer-row input{
  width:100%;min-width:0;height:29px;padding:0 6px;border:1px solid transparent;border-radius:7px;
  background:transparent;color:#3b485c;font-size:9.5px;font-weight:750
}
.svg-layer-row input:focus{outline:none;border-color:#d7ddff;background:#fff}
.svg-layer-row button{
  width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:#8a96a8;font-size:9px;cursor:pointer
}
.svg-layer-row button:hover{background:#fff;color:#374151;box-shadow:0 1px 4px rgba(15,23,42,.08)}
.svg-layers-empty{padding:24px 12px;color:#9aa5b5;text-align:center;font-size:10.5px;line-height:1.5}

/* Canvas */
.svg-canvas-panel{position:relative;min-width:0;overflow:hidden;background:#f3f5f8}
.svg-studio-stage{
  --svg-workspace-bg:#eef1f5;
  position:absolute;inset:0;
  overflow:hidden;
  background:var(--svg-workspace-bg);
  touch-action:none;
  user-select:none;
}
.svg-studio-stage.show-grid{
  background-color:var(--svg-workspace-bg);
  background-image:linear-gradient(rgba(100,116,139,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,139,.09) 1px,transparent 1px);
  background-size:16px 16px;
}
.svg-studio-stage.is-dragover::after{
  content:"Drop SVG to open";
  position:absolute;inset:18px;z-index:20;display:grid;place-items:center;
  border:2px dashed #818cf8;border-radius:18px;background:rgba(238,242,255,.86);
  color:#4338ca;font-size:13px;font-weight:900;pointer-events:none
}
.svg-canvas-transform{
  position:absolute;left:50%;top:50%;transform-origin:center center;
  will-change:transform;
}
.svg-canvas-host{
  width:100%;height:100%;
  filter:drop-shadow(0 14px 24px rgba(15,23,42,.12));
}
.svg-studio-canvas{
  width:100%;height:100%;display:block;background:transparent;overflow:visible;
  outline:1px solid rgba(15,23,42,.08);
}
.svg-studio-stage[data-tool="select"] .svg-studio-canvas{cursor:default}
.svg-studio-stage[data-tool="pan"] .svg-studio-canvas{cursor:grab}
.svg-studio-stage[data-tool="pan"] .svg-studio-canvas:active{cursor:grabbing}
.svg-studio-stage[data-tool="rect"] .svg-studio-canvas,
.svg-studio-stage[data-tool="circle"] .svg-studio-canvas,
.svg-studio-stage[data-tool="ellipse"] .svg-studio-canvas,
.svg-studio-stage[data-tool="line"] .svg-studio-canvas,
.svg-studio-stage[data-tool="polygon"] .svg-studio-canvas,
.svg-studio-stage[data-tool="star"] .svg-studio-canvas,
.svg-studio-stage[data-tool="pen"] .svg-studio-canvas,
.svg-studio-stage[data-tool="text"] .svg-studio-canvas{cursor:crosshair}
.svg-stage-hint{
  position:absolute;left:12px;bottom:12px;z-index:12;
  max-width:420px;padding:7px 9px;border:1px solid rgba(226,232,240,.9);border-radius:9px;
  background:rgba(255,255,255,.87);backdrop-filter:blur(6px);color:#718096;font-size:9.5px;line-height:1.4;
  pointer-events:none
}
.svg-selection-box{fill:none;stroke:#6366f1;stroke-width:1.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:none}
.svg-selection-handle,.svg-rotation-handle{
  fill:#fff;stroke:#4f46e5;stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:pointer;pointer-events:all
}
.svg-rotation-handle{fill:#eef2ff}
.svg-rotation-line,.svg-node-line{stroke:#818cf8;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.svg-path-node{fill:#fff;stroke:#4f46e5;stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:move;pointer-events:all}
.svg-path-control{fill:#eef2ff;stroke:#7c83ee;stroke-width:1.4;vector-effect:non-scaling-stroke;cursor:move;pointer-events:all}

/* Inspector */
.svg-inspector-tabs{
  min-height:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:5px;border-bottom:1px solid #e9edf2;background:#fbfcfd
}
.svg-inspector-tabs button{
  min-height:32px;border:0;border-radius:8px;background:transparent;color:#7b8798;font-size:9px;font-weight:900;cursor:pointer
}
.svg-inspector-tabs button.active{background:#fff;color:#2d394d;box-shadow:0 1px 4px rgba(15,23,42,.08)}
.svg-inspector-tab{display:none;min-height:0;overflow:auto;padding:10px;flex:1}
.svg-inspector-tab.active{display:block}
.svg-inspector-section{
  margin-bottom:9px;padding:12px;border:1px solid #e5e9ef;border-radius:13px;background:#fff
}
.svg-inspector-section h4{
  margin:0 0 10px;color:#3c485b;font-size:9.5px;font-weight:950;text-transform:uppercase;letter-spacing:.055em
}
.svg-inspector-note{margin:0;color:#8793a5;font-size:9.5px;line-height:1.5}
.svg-selection-empty{min-height:170px;display:grid;place-items:center;padding:25px;text-align:center;color:#97a2b1;font-size:10.5px;line-height:1.55}
.svg-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.svg-mini-grid.one{grid-template-columns:1fr}
.svg-mini-grid.three{grid-template-columns:repeat(3,1fr)}
.svg-mini-field{display:grid;gap:4px;min-width:0}
.svg-mini-field.full{grid-column:1/-1}
.svg-mini-field label{color:#7c899a;font-size:8.5px;font-weight:850}
.svg-mini-field input,.svg-mini-field select,.svg-mini-field textarea{
  width:100%;min-width:0;min-height:34px;padding:0 8px;border:1px solid #dfe5ec;border-radius:8px;background:#fbfcfd;color:#334155;font-size:9.5px
}
.svg-mini-field textarea{min-height:70px;padding:8px;resize:vertical;line-height:1.45}
.svg-mini-field input[type="color"]{padding:3px;height:34px}
.svg-mini-field input[type="checkbox"]{width:16px;min-height:16px;padding:0}
.svg-toggle-line{display:flex;align-items:center;gap:7px;min-height:32px;color:#5f6b7b;font-size:9.5px;font-weight:750}
.svg-action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.svg-action-grid.two{grid-template-columns:repeat(2,1fr)}
.svg-action-grid button{
  min-height:32px;padding:4px;border:1px solid #e0e5eb;border-radius:8px;background:#fbfcfd;color:#546176;font-size:8.5px;font-weight:850;cursor:pointer
}
.svg-action-grid button:hover:not(:disabled){background:#f3f6f9;color:#283548}
.svg-action-grid button:disabled{opacity:.35;cursor:not-allowed}
.svg-node-action{
  width:100%;min-height:34px;border:1px solid #dfe0ff;border-radius:9px;background:#f2f4ff;color:#4f46e5;font-size:9.5px;font-weight:900;cursor:pointer
}
.svg-node-action.active{background:#4f46e5;color:#fff}
.svg-status{
  min-height:42px;display:flex;align-items:center;padding:9px 11px;border-top:1px solid #e6eaf0;background:#fbfcfd;
  color:#69778a;font-size:9.5px;line-height:1.45
}
.svg-status[data-type="ok"]{color:#246746;background:#f7fcf8}
.svg-status[data-type="error"]{color:#9f3f45;background:#fff9f9}

/* Code */
.svg-code-editor{
  width:100%;min-height:430px;padding:12px;border:1px solid #dfe5ec;border-radius:11px;background:#111827;color:#dbe7f4;
  font:10px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;tab-size:2
}
.svg-code-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.svg-code-actions button{
  min-height:34px;padding:0 10px;border:1px solid #dfe5ec;border-radius:9px;background:#fff;color:#475569;font-size:9px;font-weight:900;cursor:pointer
}
.svg-code-actions .primary{background:#172033;color:#fff;border-color:#172033}

/* Assets */
.svg-assets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.svg-asset-btn{
  min-height:72px;display:grid;place-items:center;gap:3px;padding:7px;border:1px solid #e3e8ee;border-radius:11px;background:#fbfcfd;color:#4d5a6e;cursor:pointer
}
.svg-asset-btn:hover{background:#f4f6f9;border-color:#d1d9e3}
.svg-asset-btn strong{font-size:18px;line-height:1}
.svg-asset-btn span{font-size:8px;font-weight:850}

/* Export strip */
.svg-export-strip{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px 14px;border:1px solid #dfe5ec;border-radius:15px;background:#fff
}
.svg-export-main{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.svg-export-main input[type="text"]{
  width:180px;height:38px;padding:0 10px;border:1px solid #dfe5ec;border-radius:9px;background:#fbfcfd;color:#334155;font-size:10px
}
.svg-export-main button{
  min-height:38px;padding:0 11px;border:1px solid #dfe5ec;border-radius:9px;background:#fff;color:#3e4b5e;font-size:9.5px;font-weight:900;cursor:pointer
}
.svg-export-main button.primary{background:#172033;color:#fff;border-color:#172033}
.svg-png-options{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.svg-png-options select,.svg-png-options input{
  height:34px;border:1px solid #dfe5ec;border-radius:8px;background:#fbfcfd;color:#4b586a;font-size:9px;padding:0 7px
}
.svg-png-options input[type="number"]{width:62px}
.svg-png-options input[type="color"]{width:38px;padding:3px}
.svg-png-options label{display:flex;align-items:center;gap:5px;color:#667386;font-size:9px;font-weight:800}

/* Dialogs */
.svg-dialog{
  width:min(520px,calc(100% - 28px));max-width:none;padding:0;border:0;border-radius:18px;background:#fff;box-shadow:0 30px 85px rgba(15,23,42,.25)
}
.svg-dialog::backdrop{background:rgba(15,23,42,.48);backdrop-filter:blur(4px)}
.svg-dialog-body{padding:20px}
.svg-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.svg-dialog-head h3{margin:0;color:#172033;font-size:19px;letter-spacing:-.03em}
.svg-dialog-head button{width:34px;height:34px;border:1px solid #e3e8ef;border-radius:9px;background:#fff;color:#64748b;font-size:17px;cursor:pointer}
.svg-dialog-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:15px}
.svg-dialog-actions button{min-height:38px;padding:0 12px;border:1px solid #dfe5ec;border-radius:9px;background:#fff;color:#475569;font-size:9.5px;font-weight:900;cursor:pointer}
.svg-dialog-actions .primary{background:#172033;border-color:#172033;color:#fff}
.svg-preview-dialog{width:min(980px,calc(100% - 28px));max-width:none;padding:0;border:0;border-radius:18px;background:#fff;box-shadow:0 30px 90px rgba(15,23,42,.28)}
.svg-preview-dialog::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(5px)}
.svg-preview-head{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #e7ebf0}
.svg-preview-head strong{font-size:11px;color:#334155}
.svg-preview-head button{width:34px;height:34px;border:1px solid #e2e7ee;border-radius:9px;background:#fff;color:#64748b;font-size:17px;cursor:pointer}
.svg-preview-surface{min-height:520px;display:grid;place-items:center;padding:32px;background:#f3f5f8;overflow:auto}
.svg-preview-surface svg{max-width:100%;max-height:70vh;filter:drop-shadow(0 12px 25px rgba(15,23,42,.10))}

.pro-icon.design,.task-icon.design{background:#eef2ff;color:#4f46e5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}

@media(max-width:1180px){
  .svg-studio-workspace{grid-template-columns:210px minmax(380px,1fr) 280px}
  .svg-tool-btn .svg-tool-label{display:none}
  .svg-tool-btn{min-width:38px;padding:0 8px}
}
@media(max-width:900px){
  #tool-svgStudio .app-content{width:calc(100% - 22px);padding-top:12px}
  .svg-studio-workspace{min-height:calc(100vh - 210px);grid-template-columns:1fr}
  .svg-side-panel{
    position:absolute;left:10px;right:10px;bottom:10px;z-index:60;
    max-height:min(68vh,580px);border:1px solid #dfe5ec!important;border-radius:16px;
    box-shadow:0 24px 65px rgba(15,23,42,.22);transform:translateY(calc(100% + 22px));transition:transform .18s ease
  }
  .svg-side-panel.mobile-open{transform:translateY(0)}
  .svg-canvas-panel{min-height:calc(100vh - 230px)}
  .svg-mobile-panel-buttons{display:inline-flex}
  .svg-toolbar-spacer{display:none}
  .svg-export-strip{grid-template-columns:1fr}
  .svg-png-options{justify-content:flex-start}
}
@media(max-width:620px){
  .svg-studio-toolbar{border-radius:13px;min-height:52px;padding:6px}
  .svg-toolbar-sep{height:24px}
  .svg-tool-btn,.svg-icon-btn{min-width:36px;min-height:36px;padding:0 7px}
  .svg-studio-workspace{border-radius:15px}
  .svg-stage-hint{left:8px;right:8px;bottom:8px;max-width:none}
  .svg-export-main input[type="text"]{width:100%}
  .svg-export-main{display:grid;grid-template-columns:1fr 1fr}
  .svg-export-main input{grid-column:1/-1}
  .svg-png-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .svg-png-options>*{min-width:0;width:100%}
  .svg-preview-surface{min-height:400px;padding:16px}
}
@media(prefers-reduced-motion:reduce){
  .svg-side-panel,.svg-tool-btn,.svg-icon-btn,.svg-asset-btn{transition:none}
}

.svg-local-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;border:1px solid #e3e8ee;border-radius:13px;background:#fafcfd;
  color:#6f7c8e;font-size:9.5px;line-height:1.4
}
.svg-local-note span{font-size:8.5px;font-weight:950;text-transform:uppercase;letter-spacing:.06em;color:#53715f}
.svg-local-note b{color:#314a3a;font-size:10.5px}
.svg-local-note em{font-style:normal;color:#909bad}