/* Claude */
  /* :root{
    --bg: #0d2740;
    --bg-grid: rgba(231,239,247,0.045);
    --panel: #12324f;
    --panel-2: #163a5c;
    --ink: #e9f1f9;
    --ink-dim: #93aec6;
    --ink-faint: #6688a3;
    --border: rgba(231,239,247,0.14);
    --border-strong: rgba(231,239,247,0.28);
    --redline: #e2582f;
    --redline-dim: rgba(226,88,47,0.15);
    --cyan: #6fc3e4;
    --amber: #f2b84e;
    --mint: #7ed0a6;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --sans: 'Inter', system-ui, sans-serif;
  } */
   /* Clan Navy + Orange */
   :root{
  --bg: #f4f7fa;
  --bg-grid: rgba(13,39,64,0.045);
  --panel: #ffffff;
  --panel-2: #edf3f8;
  --ink: #172b3d;
  --ink-dim: #60788c;
  --ink-faint: #8ba0b0;
  --border: rgba(13,39,64,0.12);
  --border-strong: rgba(13,39,64,0.22);
  --redline: #d94f2b;
  --redline-dim: rgba(217,79,43,0.10);
  --cyan: #268caf;
  --amber: #c98918;
  --mint: #3c9a6b;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
}
 /* Warm Technical */
 /* :root{
  --bg: #f7f5f0;
  --bg-grid: rgba(36,45,52,0.045);
  --panel: #fffdf9;
  --panel-2: #f0eee8;
  --ink: #252d32;
  --ink-dim: #687277;
  --ink-faint: #929a9d;
  --border: rgba(37,45,50,0.13);
  --border-strong: rgba(37,45,50,0.24);
  --redline: #c94b2d;
  --redline-dim: rgba(201,75,45,0.10);
  --cyan: #327f91;
  --amber: #b87919;
  --mint: #438a68;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
} */
 /* Crisp Blue/Slate */
 /* :root{
  --bg: #eef3f7;
  --bg-grid: rgba(24,48,69,0.055);
  --panel: #fdfefe;
  --panel-2: #e6edf3;
  --ink: #142b3d;
  --ink-dim: #5d7385;
  --ink-faint: #8a9eae;
  --border: rgba(20,43,61,0.13);
  --border-strong: rgba(20,43,61,0.25);
  --redline: #dc542f;
  --redline-dim: rgba(220,84,47,0.11);
  --cyan: #2188ad;
  --amber: #c5861c;
  --mint: #379568;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
} */
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0/28px 28px,
      linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0/28px 28px,
      var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    min-height:100vh;
    padding:20px;
  }
  @media (min-width:720px){ body{padding:36px;} }

  .app{max-width:1080px;margin:0 auto;}

  /* title block */
  .titleblock{
    border:1px solid var(--border-strong);
    background:var(--panel);
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:16px 20px;
    gap:16px;
    flex-wrap:wrap;
  }
  .titleblock h1{
    margin:0;
    font-size:15px;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--ink);
  }
  .titleblock .sub{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--ink-dim);
    margin-top:6px;
    letter-spacing:.02em;
  }
  .titleblock .badge{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--redline);
    border:1px solid var(--redline);
    padding:3px 8px;
    letter-spacing:.08em;
  }

  /* upload */
  .dropzone{
    margin-top:14px;
    border:1.5px dashed var(--border-strong);
    background:repeating-linear-gradient(135deg, rgba(231,239,247,0.02) 0 2px, transparent 2px 10px);
    padding:44px 20px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .dropzone:hover, .dropzone.drag{
    border-color:var(--cyan);
    background:rgba(111,195,228,0.06);
  }
  .dropzone:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}
  .dropzone svg{opacity:.55;margin-bottom:10px;}
  .dropzone .title{font-weight:600;font-size:14.5px;}
  .dropzone .hint{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);margin-top:6px;}
  input[type=file]{display:none;}

  .error{
    margin-top:14px;
    border:1px solid var(--redline);
    background:var(--redline-dim);
    padding:12px 16px;
    font-size:13px;
    display:none;
  }

  /* summary */
  .summary-bar{
    margin-top:16px;
    display:none;
    flex-wrap:wrap;
    gap:1px;
    background:var(--border);
    border:1px solid var(--border-strong);
  }
  .summary-bar .stat{
    flex:1 1 140px;
    background:var(--panel);
    padding:12px 16px;
  }
  .summary-bar .stat .num{font-family:var(--mono);font-weight:700;font-size:19px;color:var(--cyan);}
  .summary-bar .stat .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);margin-top:3px;}
  .summary-bar .filename{
    flex:1 1 100%;
    background:var(--panel-2);
    padding:8px 16px;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--ink-dim);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .filename button{
    font-family:var(--sans);
    font-size:11.5px;
    font-weight:600;
    background:transparent;
    border:1px solid var(--border-strong);
    color:var(--ink);
    padding:5px 10px;
    cursor:pointer;
  }
  .filename button:hover{border-color:var(--cyan);color:var(--cyan);}

  /* tabs */
  .tabs{display:none;margin-top:22px;border-bottom:1px solid var(--border-strong);gap:2px;}
  .tabs button{
    font-family:var(--sans);
    font-weight:600;
    font-size:13px;
    background:transparent;
    border:none;
    color:var(--ink-dim);
    padding:10px 16px;
    cursor:pointer;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
  }
  .tabs button.active{color:var(--ink);border-bottom-color:var(--redline);}
  .tabs button:hover{color:var(--ink);}
  .tabs .spacer{flex:1;}
  .tabs-row{display:none;align-items:center;}
  .tabs-row.show{display:flex;}
  .export-btn{
    font-family:var(--sans);
    font-weight:600;
    font-size:12.5px;
    background:var(--redline);
    color:#fff;
    border:none;
    padding:8px 14px;
    cursor:pointer;
    margin-left:auto;
    align-self:center;
  }
  .export-btn:hover{background:#c94a25;}
  .export-btn:disabled{opacity:.4;cursor:default;}

  .panel{display:none;margin-top:16px;}
  .panel.show{display:block;}
  .note{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-bottom:12px;line-height:1.6;}

  /* layer tree (folder view) */
  .layer-table{border:1px solid var(--border-strong);background:var(--panel);}
  .layer-node > summary{list-style:none;}
  .layer-node > summary::-webkit-details-marker{display:none;}
  .layer-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 14px;
    cursor:pointer;
    border-bottom:1px solid var(--border);
    font-size:13px;
  }
  .layer-row:hover{background:var(--panel-2);}
  .layer-row::before{
    content:'▸';
    color:var(--ink-faint);
    font-size:10px;
    width:10px;
    transition:transform .12s ease;
  }
  details[open] > .layer-row::before{transform:rotate(90deg);}
  .layer-swatch{width:10px;height:10px;flex:none;border:1px solid rgba(0,0,0,.25);}
  .layer-name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .layer-stats{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
  .badge{
    font-family:var(--mono);
    font-size:10.5px;
    padding:2px 6px;
    border:1px solid var(--border-strong);
    color:var(--ink-dim);
    white-space:nowrap;
  }
  .badge.point{color:var(--mint);border-color:rgba(126,208,166,.4);}
  .badge.line{color:var(--cyan);border-color:rgba(111,195,228,.4);}
  .badge.poly{color:var(--amber);border-color:rgba(242,184,78,.4);}
  .layer-body{padding-left:22px;border-bottom:1px solid var(--border);}
  .layer-body:empty{border-bottom:none;}
  .leaf-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    font-size:12px;
    color:var(--ink-dim);
    border-bottom:1px solid var(--border);
  }
  .leaf-row:last-child{border-bottom:none;}
  .leaf-dot{width:4px;height:4px;border-radius:50%;background:var(--ink-faint);flex:none;}
  .leaf-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* name group table */
  .group-table{border:1px solid var(--border-strong);background:var(--panel);}
  .group-node > summary{list-style:none;}
  .group-node > summary::-webkit-details-marker{display:none;}
  .group-row{
    display:grid;
    grid-template-columns:1fr auto auto auto;
    gap:14px;
    align-items:center;
    padding:10px 14px;
    cursor:pointer;
    border-bottom:1px solid var(--border);
    font-size:13px;
  }
  .group-row:hover{background:var(--panel-2);}
  .group-head{
    display:grid;
    grid-template-columns:1fr auto auto auto;
    gap:14px;
    padding:8px 14px;
    font-family:var(--mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--ink-faint);
    border-bottom:1px solid var(--border-strong);
  }
  .group-head span, .group-row .col{text-align:right;}
  .group-head span:first-child, .group-row .col.name{text-align:left;}
  .group-row .col.name{font-weight:600;display:flex;align-items:center;gap:8px;}
  .group-row .col.name::before{content:'▸';font-size:9px;color:var(--ink-faint);transition:transform .12s ease;}
  details[open] > .group-row .col.name::before{transform:rotate(90deg);}
  .col val{font-family:var(--mono);}
  .group-body{padding:0 14px 12px 34px;border-bottom:1px solid var(--border);}
  .orig-chip{
    display:inline-block;
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--ink-dim);
    border:1px solid var(--border);
    padding:2px 7px;
    margin:3px 5px 0 0;
  }

  .empty-state{
    padding:30px 14px;
    text-align:center;
    color:var(--ink-faint);
    font-size:13px;
  }

  @media (max-width:600px){
    .layer-stats{justify-content:flex-start;width:100%;order:3;}
    .layer-row{flex-wrap:wrap;}
    .group-row, .group-head{grid-template-columns:1fr;gap:4px;}
    .group-row .col, .group-head span{text-align:left;}
  }