:root {
    --rug-m: 2.0;
    --bg: #ffffff;
    --panel: #ffffff;
    --fg: #1a1a1a;
    --muted: #777777;
    --border: #cfcfcf;
    --hover: #f1f1f1;
    --accent: #b4502e;
    --compare-bg: #f5f5f5;
    --radius: 1px;
    --ctrl: 30px;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --font: var(--mono);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body { font-family: var(--font); color: var(--fg); background: var(--bg); font-size: 13px; display: flex; flex-direction: column; height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; }

  /* header */
  header { display: flex; align-items: center; gap: 18px; padding: 0 14px; height: 46px; border-bottom: 1px solid var(--border); background: var(--panel); flex: 0 0 auto; }
  .tabs { display: inline-flex; gap: 16px; }
  .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 3px 1px; color: var(--muted); font: inherit; cursor: pointer; }
  .tabs button.active { color: var(--fg); border-bottom-color: var(--fg); }
  .spacer { flex: 1; }
  .dims { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .03em; }
  .dims strong { color: var(--fg); font-weight: 600; }

  /* minimal controls */
  button, .menu > summary {
    font: inherit; font-size: 12px; padding: 6px 10px; border: 1px solid var(--border);
    background: var(--panel); color: var(--fg); border-radius: var(--radius); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; list-style: none;
  }
  button:hover, .menu > summary:hover { border-color: var(--fg); }
  button.primary { background: var(--fg); color: var(--panel); border-color: var(--fg); }
  button.on { background: var(--fg); color: var(--panel); border-color: var(--fg); }
  button:disabled { opacity: .3; cursor: default; border-color: var(--border); }
  select, input[type="number"], input[type="text"] { font: inherit; font-size: 12px; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--fg); }
  input[type="range"] { accent-color: var(--fg); vertical-align: middle; }
  .note { font-size: 11px; color: var(--muted); line-height: 1.5; }
  .hbar { display: flex; align-items: center; gap: 7px; }

  .menu { position: relative; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { border-color: var(--fg); }
  .menu .menu-pop { position: absolute; right: 0; top: calc(100% + 6px); width: 210px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 26px rgba(0,0,0,.14); padding: 11px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
  .menu .menu-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
  .menu .menu-pop .inline { flex-direction: row; align-items: center; gap: 7px; }

  /* workspace fills the viewport below the header; dock floats over it */
  #workspace { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }

  /* two-view workspace */
  #views { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--split, 56%) 1fr; position: relative; background: var(--bg); }
  .view { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; }
  .view + .view { border-left: 1px solid var(--border); }

  /* transform popover — appears only while dragging the rug */
  #transformPop { position: absolute; top: 14px; left: 14px; z-index: 11; display: none; gap: 8px; align-items: center;
    padding: 7px 10px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0,0,0,.16); }
  #transformPop.show { display: flex; }
  #transformPop input[type="number"] { width: 46px; }
  #transformPop input[type="range"] { width: 90px; }
  #transformPop .lbl { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .view-splitter { position: absolute; top: 0; bottom: 0; left: var(--split, 56%); width: 14px; transform: translateX(-50%); cursor: col-resize; z-index: 8; touch-action: none; }
  .view-splitter::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border); transform: translateX(-50%); }
  .view-splitter:hover::before, .view-splitter.drag::before { background: var(--fg); width: 2px; }

  .studio-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; }
  .studio-wrap img.bg { width: 100%; height: 100%; display: block; }
  #studioWarp { position: absolute; inset: 0; pointer-events: none; }
  #studioWarp canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: auto; cursor: move; }
  .handle { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: grab; touch-action: none; z-index: 5; opacity: 0; transition: opacity .12s; }
  .studio-wrap:hover .handle, .studio-wrap.dragging .handle { opacity: 1; }
  .handle:active { cursor: grabbing; }
  canvas { display: block; touch-action: none; }

  /* curtain compare */
  .compare { position: relative; overflow: hidden; background: var(--compare-bg); --cx: 50%; cursor: ew-resize; touch-action: none; }
  .compare canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  #designCanvas { clip-path: inset(0 calc(100% - var(--cx)) 0 0); }
  .curtain { position: absolute; top: 0; bottom: 0; left: var(--cx); width: 0; pointer-events: none; z-index: 4; }
  .curtain-line { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--fg); }
  .curtain-grip { position: absolute; top: 50%; left: -11px; width: 22px; height: 22px; transform: translateY(-50%); border-radius: 50%; background: var(--panel); border: 1.5px solid var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .clabel { position: absolute; top: 8px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); pointer-events: none; }
  .clabel.left { left: 10px; } .clabel.right { right: 10px; }

  /* floating translucent bottom dock — colours + background (full width) */
  #dock { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 10;
    display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; max-height: 42vh; overflow: auto;
    background: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 24px rgba(0,0,0,.14); }
  .dock-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  /* BOM — small floating panel, top-right */
  #bomPanel { position: absolute; top: 8px; right: 8px; z-index: 10; width: 300px; max-height: 64vh; overflow: auto;
    display: flex; flex-direction: column; gap: 8px; padding: 9px 11px;
    background: rgba(255,255,255,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0,0,0,.14); }
  #bomPanel > select { width: 100%; }
  .dock-row.tray { gap: 4px; }
  .dock-row .lbl { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .dock-row .sep { width: 1px; height: 20px; background: var(--border); margin: 0 5px; }
  .dock-row input[type="number"] { width: 50px; }
  .dock-row input[type="range"] { width: 120px; }
  .rc-sw { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
  .rc-sw:hover { border-color: var(--fg); }
  .rc-sw.active { outline: 2px solid var(--fg); outline-offset: 1px; }
  .tray-sw { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 0; }
  .tray-sw:hover { border-color: var(--fg); }
  .tray-sw.active { outline: 2px solid var(--fg); outline-offset: 1px; }
  .rc-tool { width: 28px; height: 28px; padding: 0; font-size: 13px; }
  .rc-tool.on { background: var(--fg); color: var(--panel); border-color: var(--fg); }
  /* sold-out yarns: dimmed with a diagonal hatch overlay */
  .rc-sw, .tray-sw { position: relative; }
  .rc-sw.oos, .tray-sw.oos { opacity: .8; }
  .rc-sw.oos::after, .tray-sw.oos::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(255,255,255,.85) 0 1.5px, transparent 1.5px 5px); }
  /* grounding shadow so the rug sits in the room */
  #studioWarp canvas { filter: drop-shadow(0 6px 11px rgba(0,0,0,.4)); }

  /* in-rug colour chips (swatch + name) */
  .rc-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 9px 2px 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
  .rc-chip:hover { border-color: var(--fg); }
  .rc-chip.active { outline: 2px solid var(--fg); outline-offset: 1px; }
  .rc-chip .sw { width: 22px; height: 22px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); position: relative; }
  .rc-chip .sw.oos::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(45deg, rgba(255,255,255,.85) 0 1.5px, transparent 1.5px 5px); }
  .rc-chip .nm { font-size: 12px; color: var(--fg); }
  .rc-chip .role { font: 9px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

  /* BOM (bill of materials) in the dock */
  #bom { width: 100%; }
  .est-table { width: 100%; max-width: 600px; border-collapse: collapse; font-size: 12px; }
  .est-table td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--hover); }
  .est-table td.c { width: 16px; padding-right: 0; }
  .est-table td .dot { width: 15px; height: 15px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
  .est-table td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
  .est-table a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border); }
  .est-table a:hover { border-color: var(--fg); }
  .oos { color: var(--accent); font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
  .est-total { font-size: 12px; margin-top: 8px; color: var(--muted); }
  .est-total strong { color: var(--fg); }