:root{
  --ui-bg:#fff; --muted:#666; --accent:#1976d2;
  --panel-h:320px; --panel-h-min:120px; --panel-h-max:95vh;
  --panel-padding:6px; --handle-h:10px; --topbar-h:40px;
  --focus-ring: 3px solid rgba(25,118,210,0.25);
  --filename-size:12px;
}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial;}
body{background:#f4f6f8;overflow:hidden;color:#111}
#topBar{ position:fixed;left:0;right:0;top:0;height:var(--topbar-h);background:linear-gradient(180deg,#fff,#fbfdff);
  border-bottom:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;gap:12px;padding:0 12px;box-sizing:border-box;z-index:800;min-width:0;}
#topBar h1{ margin:0; font-size:clamp(14px, 2.5vw, 18px); font-weight:600; flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#topBar > div{ flex-shrink:0; white-space:nowrap; font-size:clamp(11px, 1.5vw, 13px) !important; }
#statusLive{ margin-left:auto; color:var(--muted); font-size:13px; }
#app{height:100vh;display:flex;flex-direction:column;min-height:0;position:relative;padding-top:var(--topbar-h);}
#canvas-wrap{ position:relative; width:100%; display:flex; align-items:flex-start; justify-content:center; background:#ffffff; overflow:hidden; box-sizing:border-box; transition:height 160ms ease; padding-top:0; }
canvas{ display:block; background:transparent; -webkit-user-select:none; user-select:none; touch-action:none; }
#guideText{ background:#ffffff; padding:4px 8px; white-space:nowrap; overflow:hidden; }

/* Canvas progress overlay */
.canvasProgress{ position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,0.9); z-index:100; pointer-events:none; }
.canvasProgressText{ font-size:16px; font-weight:600; color:var(--muted); margin-bottom:12px; }
.canvasProgressBar{ width:200px; height:4px; background:rgba(0,0,0,0.1); border-radius:2px; overflow:hidden; margin-bottom:8px; }
.canvasProgressBarFill{ height:100%; background:var(--accent); transition:width 0.2s ease; }
.canvasProgressPercent{ font-size:14px; font-weight:500; color:var(--muted); }

/* panel */
#panel{ position:static; height:var(--panel-h); min-height:var(--panel-h-min); max-height:var(--panel-h-max); margin:6px;
  background:var(--ui-bg); border-radius:10px; padding:var(--panel-padding); box-shadow:0 10px 28px rgba(0,0,0,0.12); box-sizing:border-box; overflow:auto; }
#panelHandle{ position:static; height:var(--handle-h); margin:0 10px; cursor:ns-resize; display:flex; align-items:center; justify-content:center; }
#panelHandle .bar{ width:64px; height:4px; background:rgba(0,0,0,0.12); border-radius:2px; }

.panelTitle{ margin:0 0 6px 0; font-size:14px; font-weight:700; padding-left:6px; }
#panelContent{ display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start; }
.col{ display:flex; flex-direction:column; gap:4px; min-width:180px; }
.row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.labelBold{ min-width:120px; color:var(--muted); font-size:13px; font-weight:700; }
label{ color:var(--muted); font-size:13px; }

.btn{ padding:6px 8px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); background:#fff; cursor:pointer; font-size:13px; }
.btn:focus{ outline:none; box-shadow: var(--focus-ring); border-color:var(--accent); }

.meshRows { width:100%; max-height:260px; border:1px solid #d0d7de; border-radius:8px; background:#fff; overflow:auto; padding:3px; box-sizing:border-box; font-size:13px; display:flex; flex-direction:column; gap:2px; }
.meshRowHeader{ min-height:28px; border-bottom:2px solid rgba(0,0,0,0.1); display:flex; align-items:center; gap:6px; padding:3px 5px; background:#f8f9fa; font-weight:700; color:var(--muted); flex-wrap:nowrap; }
.meshRowHeader .meshCellRb{ width:20px; padding:3px 5px; text-align:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
.meshRowHeader .meshCellLbl{ padding:3px 5px; width:120px; flex:0 0 120px; min-width:0; display:flex; align-items:center; box-sizing:border-box; }
.meshRowHeader .meshCellPicker{ padding:3px 5px; text-align:center; flex:1; min-width:0; white-space:nowrap; display:flex; align-items:center; justify-content:flex-start; gap:4px; flex-wrap:wrap; box-sizing:border-box; }
.meshRowItem{ min-height:28px; border-bottom:1px solid rgba(0,0,0,0.03); display:flex; align-items:center; gap:6px; padding:3px 5px; border-radius:4px; flex-wrap:nowrap; overflow:hidden; }
.meshRowItem:last-child{ border-bottom:none; }
.meshHeaderLabel{ font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; }
.meshCellRb{ width:20px; padding:3px 5px; text-align:center; flex-shrink:0; box-sizing:border-box; }
.meshCellLbl{ width:120px; padding:3px 5px; flex:0 0 120px; min-width:0; box-sizing:border-box; }
.meshCellPicker{ padding:3px 5px; text-align:center; flex:1; min-width:0; white-space:nowrap; display:flex; align-items:center; gap:4px; flex-wrap:nowrap; box-sizing:border-box; overflow:hidden; }
.meshCellPicker > *{ flex-shrink:1; min-width:0; }
.meshChk{ width:20px; height:20px; }
.meshLabel{ font-size:clamp(12px, 2vw, 15px); color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meshColor{ width:clamp(36px, 4vw, 48px); height:clamp(28px, 3vw, 36px); border-radius:6px; border:1px solid var(--accent); background:#fff; cursor:pointer; flex-shrink:0; }
.meshColorHint{ font-size:clamp(9px, 1.2vw, 11px); color:var(--muted); white-space:nowrap; flex-shrink:0; }
.meshColorSelectBtn{ font-size:clamp(10px, 1.3vw, 12px); padding:clamp(3px, 0.4vw, 4px) clamp(6px, 0.8vw, 8px); min-width:clamp(50px, 6vw, 60px); white-space:nowrap; flex-shrink:1; }

/* Lab dialog button */
.labBtn{ font-size:clamp(10px, 1.3vw, 12px); padding:clamp(3px, 0.4vw, 4px) clamp(6px, 0.8vw, 8px); min-width:clamp(60px, 8vw, 80px); white-space:nowrap; flex-shrink:1; }

/* Lab dialog */
.labDialogOverlay{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); display:flex; align-items:flex-end; justify-content:center; padding-bottom:10vh; z-index:1000; }
.labDialog{ background:var(--ui-bg); border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3); min-width:320px; max-width:90vw; max-height:85vh; overflow-y:auto; }
.labDialogInputs{ display:flex; flex-direction:column; gap:12px; }
.labDialogRow{ display:flex; align-items:center; gap:12px; }
.labDialogRow label{ font-size:14px; font-weight:600; color:var(--muted); }
.labDialogSlider{ flex:1; min-width:120px; height:6px; cursor:pointer; }
.labDialogRow input[type="number"]{ padding:8px 12px; font-size:14px; border:1px solid #d0d7de; border-radius:6px; box-sizing:border-box; }
.labDialogRow input[type="number"]:focus{ outline:none; box-shadow: var(--focus-ring); border-color:var(--accent); }
.labDialogPreview + input[type="text"]:focus{ outline:none; box-shadow: var(--focus-ring); border-color:var(--accent); }

.modelFilename{ font-size:var(--filename-size); color:var(--muted); margin-left:8px; align-self:center; }

/* Status row */
.statusRow{ display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; min-width:0; width:100%; }
.statusLabel{ color:var(--muted); font-size:13px; flex-shrink:0; }
.statusValue{ color:var(--muted); font-weight:500; font-size:13px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.statusFileName{ color:var(--muted); font-size:var(--filename-size); flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Material group */
.materialGroup{ border:1px solid #d0d7de; border-radius:8px; background:#f8f9fa; padding:6px; margin-bottom:2px; }
.materialGroupTitle{ margin:0 0 4px 0; font-size:14px; font-weight:700; color:var(--muted); padding-bottom:3px; border-bottom:1px solid rgba(0,0,0,0.1); }
.modelSelectTitle{ margin:0; padding:0; border:none; display:inline; white-space:nowrap; flex-shrink:0; }
.materialGroupContent{ width:100%; display:flex; flex-direction:column; gap:3px; }
.materialRow{ display:flex; align-items:center; gap:6px; min-height:28px; background:#ffffff; padding:4px 6px; border-radius:4px; flex-wrap:nowrap; overflow:hidden; }
.materialLabelCell{ min-width:0; flex:0 0 auto; max-width:140px; }
.materialLabelCell .modelSelectTitle{ flex-shrink:0; }
.materialDefaultCell{ min-width:0; flex:0 0 auto; max-width:100px; text-align:left; }
.materialSelectCell{ flex:1; min-width:180px; }
/* 車体の選択のドロップダウンの左端をメッシュカラーと揃える */
.materialGroupContent .materialRow:first-child .materialLabelCell{ width:146px; flex:0 0 146px; }
.modelSelectLabel{ font-size:18px; font-weight:700; }
.materialSliderCell{ flex:1; min-width:80px; box-sizing:border-box; }
.materialValueCell{ width:80px; min-width:80px; text-align:right; flex-shrink:0; }
/* スライダーの左端を揃えるため、ラベルと標準値セルの幅を固定 */
.materialGroupContent .materialLabelCell{ width:100px; flex:0 0 100px; }
.materialGroupContent .materialDefaultCell{ width:90px; flex:0 0 90px; }
.materialGroupContent .labelBold{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.materialGroupContent input[type="range"]{ width:100%; min-width:80px; }
.materialGroupContent #metalVal,
.materialGroupContent #roughVal,
.materialGroupContent #clearcoatVal{ width:100%; min-width:60px; font-size:12px; text-align:right; padding:4px 6px; border:1px solid #d0d7de; border-radius:4px; box-sizing:border-box; }
.materialGroupContent #metalVal:focus,
.materialGroupContent #roughVal:focus,
.materialGroupContent #clearcoatVal:focus{ outline:none; box-shadow: var(--focus-ring); border-color:var(--accent); }

@media(max-width:860px){
  :root{ --panel-h:46vh; --topbar-h:40px; }
  #topBar{ gap:8px; padding:0 8px; }
  #topBar h1{ font-size:clamp(12px, 3vw, 16px); }
  #topBar > div{ font-size:clamp(10px, 1.4vw, 12px) !important; }
  #panel{ margin:6px; padding:4px; }
  #panelHandle{ display:none; }
  #panelContent{ flex-direction:column; gap:4px; }
  .col{ min-width:unset; width:100%; gap:3px; }
  .row{ gap:4px; }
  .labelBold{ min-width:100px; }
  #canvas-wrap{ flex:0 0 auto; }

  /* Reduce vertical spacing for mobile */
  .materialGroup{ padding:4px; margin-bottom:2px; }
  .materialGroupTitle{ margin:0 0 3px 0; padding-bottom:2px; font-size:13px; }
  .modelSelectTitle{ margin:0; padding:0; border:none; display:inline; white-space:nowrap; flex-shrink:0; }
  .materialGroupContent{ gap:2px; }
  .materialRow{ min-height:24px; padding:3px 4px; gap:3px; flex-wrap:nowrap; overflow:hidden; }
  .materialLabelCell{ min-width:0; flex:0 0 auto; max-width:80px; font-size:10px; }
  .materialDefaultCell{ min-width:0; flex:0 0 auto; max-width:60px; font-size:9px; }
  .materialSelectCell{ min-width:0; flex:1 1 auto; }
  .materialSliderCell{ min-width:0; flex:1 1 auto; min-width:40px; box-sizing:border-box; }
  .materialValueCell{ width:50px; min-width:50px; flex:0 0 auto; }
  /* スライダーの左端を揃えるため、ラベルと標準値セルの幅を固定（モバイル） */
  .materialGroupContent .materialLabelCell{ width:70px; flex:0 0 70px; }
  .materialGroupContent .materialDefaultCell{ width:65px; flex:0 0 65px; }
  /* 車体の選択のドロップダウンの左端をメッシュカラーと揃える（モバイル） */
  .materialGroupContent .materialRow:first-child .materialLabelCell{ width:102px; flex:0 0 102px; }
  .materialGroupContent .labelBold{ font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .modelSelectLabel{ font-size:15px; }
  .materialGroupContent input[type="range"]{ min-width:40px; }
  .materialGroupContent #metalVal,
  .materialGroupContent #roughVal,
  .materialGroupContent #clearcoatVal{ min-width:45px; font-size:10px; padding:2px 3px; }

  .meshRows{ padding:2px; max-height:200px; gap:1px; }
  .meshRowHeader{ min-height:24px; padding:2px 3px; gap:4px; font-size:11px; }
  .meshRowHeader .meshCellRb{ padding:2px 3px; width:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
  .meshRowHeader .meshCellLbl{ padding:2px 3px; width:80px; font-size:11px; flex:0 0 80px; display:flex; align-items:center; box-sizing:border-box; }
  .meshRowHeader .meshCellPicker{ padding:2px 3px; white-space:nowrap; gap:2px; display:flex; align-items:center; justify-content:flex-start; box-sizing:border-box; }
  .meshHeaderLabel{ font-size:11px; }
  .meshRowItem{ min-height:24px; padding:2px 3px; gap:4px; flex-wrap:nowrap; overflow:hidden; }
  .meshCellRb{ padding:2px 3px; width:18px; flex-shrink:0; box-sizing:border-box; }
  .meshCellLbl{ padding:2px 3px; width:80px; font-size:clamp(9px, 1.2vw, 11px); flex:0 0 80px; box-sizing:border-box; }
  .meshLabel{ font-size:clamp(11px, 1.8vw, 13px); }
  .meshCellPicker{ padding:2px 3px; white-space:nowrap; gap:2px; box-sizing:border-box; flex-wrap:nowrap; overflow:hidden; }
  .meshCellPicker > *{ flex-shrink:1; min-width:0; }
  .meshColor{ width:clamp(28px, 4vw, 36px); height:clamp(20px, 3vw, 28px); }
  .meshColorHint{ font-size:clamp(8px, 1.1vw, 9px); }
  .meshColorSelectBtn{ font-size:clamp(9px, 1.2vw, 11px); padding:clamp(2px, 0.3vw, 3px) clamp(4px, 0.6vw, 6px); min-width:clamp(40px, 5vw, 50px); flex-shrink:1; }
  .labBtn{ padding:clamp(2px, 0.3vw, 2px) clamp(3px, 0.4vw, 4px); font-size:clamp(9px, 1.2vw, 10px); min-width:clamp(50px, 6vw, 60px); white-space:nowrap; flex-shrink:1; }

  .btn{ padding:4px 6px; font-size:12px; }
  #guideText{ padding:3px 6px; }
  .labDialogOverlay{ padding-bottom:5vh; }
  .labDialog{ max-height:75vh; }
}