:root {
    --ui-accent: #0078d4;
    --ui-text: #1c1c1c;
    --ui-border: #ddd;
  }
  html, body { height: 100%; margin: 0; font-family: sans-serif; color: var(--ui-text); overflow: hidden; overscroll-behavior: none; }

  .toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 10px;
    background: #f5f6f8;
    border-bottom: 1px solid var(--ui-border);
    position: sticky;
    top: 0;
    z-index: 1002;
  }
  .toolbar-section { display: flex; align-items: center; gap: 12px; }
  .toolbar-section.center { justify-content: flex-start; flex: 1; }

  @media (max-width: 1100px) {
    .toolbar { flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
  }

  .group { display: flex; align-items: center; gap: 6px; }
  .group label { font-size: 0.85rem; color: #555; }

  .bordered {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 3px 6px;
  }

  .btn {
    padding: 6px 10px;
    border: 1px solid #ccc;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
  }
  .btn:hover { background: #eee; }
  .btn.ghost { border-color: transparent; background: transparent; }
  .btn.ghost:hover { background: rgba(0,0,0,0.05); }
  .btn:disabled { opacity: 0.4; cursor: default; }
  .btn:disabled:hover { background: white; }
  .btn.ghost:disabled:hover { background: transparent; }

  input[type="number"], select, input[type="text"] {
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0 4px;
    font-size: 0.85rem;
    background: white;
  }
  input[type="number"]:disabled { background: #f0f0f0; color: #999; }
  select:disabled { background: #f0f0f0; color: #999; }
  input[type="color"] { width: 32px; height: 28px; padding: 0; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; }

  details { position: relative; }
  details summary { list-style: none; outline: none; }
  details summary::-webkit-details-marker { display: none; }

  details .panel {
    position: absolute;
    top: 110%;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    z-index: 1001;
  }
  .toolbar-section.right details .panel { left: auto; right: 0; }

  .panel .item, .panel button {
    padding: 6px 10px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--ui-text);
    width: 100%;
    box-sizing: border-box;
  }
  .panel .item:hover, .panel button:hover { background: #eee; }
  .panel .item.disabled { opacity: 0.4; cursor: default; pointer-events: none; }
  .panel hr { border: none; border-top: 1px solid #ddd; margin: 4px 0; }


  .wrap { position: relative; height: calc(100% - 45px); }
  svg#canvas { width: 100%; height: 100%; display: block; background: #fff; cursor: crosshair; touch-action: none; overscroll-behavior: none; }
  svg#canvas.dragging, svg#canvas.panning { cursor: grabbing; }
  /* Selection inset outline */
  .sel-inset { fill: none; stroke: white; stroke-width: 1.5px; stroke-dasharray: 5,4; pointer-events: none; }
  .sel-inset-shadow { fill: none; stroke: rgba(0,0,0,0.55); stroke-width: 1.5px; stroke-dasharray: 5,4; stroke-dashoffset: 4.5; pointer-events: none; }

  .vertex-handle { cursor: grab; }
  .vertex-under { fill: none; stroke: #fff; stroke-width: 1.6px; pointer-events: none; }
  .vertex { fill: none; stroke: #111; stroke-width: 1.6px; stroke-dasharray: 4,3; pointer-events: none; }
  .vertex-handle:hover .vertex { stroke-width: 2.4px; }
  .vertex-handle:hover .vertex-under { stroke-width: 2.4px; }
  svg.dragging .vertex, svg.dragging .vertex-under { visibility: hidden; }
  #grid { pointer-events: none; }
  #grid .line { stroke: #e5e7eb; shape-rendering: crispEdges; }

  .ctxmenu { position: absolute; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.1); padding: 6px 0; font-size: 0.92rem; min-width: 220px; display: none; z-index: 1000; }
  .ctxmenu .item { padding: 6px 14px; cursor: pointer; }
  .ctxmenu .item:hover { background: #f5f7ff; }
  .ctxmenu .item.disabled { opacity: 0.4; cursor: default; pointer-events: none; }
  .ctxmenu .sep { height: 1px; background: #ddd; margin: 4px 0; }
  .ctxmenu .row { display: flex; align-items: center; gap: 8px; padding: 4px 14px; }
  .grad-controls { display: none; gap: 4px; align-items: center; }
  .grad-controls.active { display: inline-flex; }
  code.inline { background: #f3f4f6; padding: .08rem .25rem; border-radius: 4px; }

  /* FIX: status bar for mode indicators */
  .statusbar {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.65);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
  }
  .statusbar.visible { opacity: 1; }

/* Yarn palette swatches */
.swatch-grid { display: grid; grid-template-columns: repeat(8, 24px); gap: 4px; padding: 2px 0; }
.swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.18); cursor: pointer; padding: 0; }
.swatch:hover { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.yarn-match { font-size: 0.8rem; color: #555; padding-top: 8px; min-height: 1.2em; }

/* My Yarns manager */
.myyarn-row { display:flex; align-items:center; gap:6px; font-size:0.8rem; }
.myyarn-row .swatch { width:20px; height:20px; flex-shrink:0; }
.myyarn-row input[type="text"] { flex:1; height:24px; font-size:0.78rem; padding:0 4px; }
.myyarn-row .btn { padding:2px 6px; font-size:0.75rem; }

/* Highlight whichever gradient stop a Yarn swatch click will target */
.grad-stop-active {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-accent);
}