/* ===================================================================
   ModelCraft — Minecraft モデルエディタ  スタイル
   =================================================================== */
:root{
  --bg:        #1b1e24;
  --bg2:       #22262e;
  --panel:     #272b33;
  --panel2:    #2e333c;
  --line:      #14161a;
  --line2:     #3a414d;
  --fg:        #d5dae3;
  --fg-dim:    #8c95a3;
  --accent:    #4d9dff;
  --accent-d:  #2f6fbf;
  --warn:      #ffb454;
  --danger:    #ff6b6b;
  --ok:        #6ed67e;
  --sel:       #ffb454;
  --radius:    5px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg); color:var(--fg);
  font:12px/1.45 "Segoe UI","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  overflow:hidden; user-select:none;
}
button,input,select,textarea{ font:inherit; color:inherit; }
hr{ border:0; border-top:1px solid var(--line2); margin:5px 0; }
hr.soft{ border-top:1px dashed var(--line2); margin:8px 0 6px; }
kbd{ font:11px monospace; color:var(--fg-dim); margin-left:auto; padding-left:14px; }

#app{ display:flex; flex-direction:column; height:100%; }
.spring{ flex:1 1 auto; }
.dim{ color:var(--fg-dim); }

/* ------------- トップバー ------------- */
#topbar{
  display:flex; align-items:center; gap:14px; height:34px; flex:0 0 34px;
  background:var(--bg2); border-bottom:1px solid var(--line); padding:0 10px;
}
.brand{ display:flex; align-items:center; gap:6px; font-weight:600; letter-spacing:.4px; }
.brand .logo{ color:var(--accent); font-size:17px; }
.brand-name{ font-size:13px; }
.topbar-right{ margin-left:auto; }
.proj-name{ color:var(--fg-dim); font-size:11px; }

.menubar{ display:flex; }
.menu{ position:relative; }
.menu-btn{
  background:transparent; border:0; padding:6px 11px; cursor:pointer;
  border-radius:var(--radius); color:var(--fg);
}
.menu-btn:hover, .menu.open .menu-btn{ background:var(--panel2); }
.menu-pop{
  display:none; position:absolute; top:100%; left:0; z-index:60; min-width:250px;
  background:var(--panel); border:1px solid var(--line2); border-radius:var(--radius);
  padding:4px; box-shadow:0 8px 26px rgba(0,0,0,.55);
}
.menu.open .menu-pop{ display:block; }
.menu-pop button{
  display:flex; align-items:center; width:100%; text-align:left; background:transparent;
  border:0; padding:6px 9px; border-radius:4px; cursor:pointer; white-space:nowrap;
}
.menu-pop button:hover{ background:var(--accent-d); }
.menu-pop button:hover kbd{ color:#dfeaff; }

/* ------------- ツールバー ------------- */
#toolbar{
  display:flex; align-items:center; gap:8px; height:36px; flex:0 0 36px;
  background:var(--panel); border-bottom:1px solid var(--line); padding:0 8px;
  overflow-x:auto; scrollbar-width:thin;
}
.tool-group{ display:flex; align-items:center; gap:4px; }
.sep{ width:1px; height:20px; background:var(--line2); flex:0 0 1px; }
.lbl{ color:var(--fg-dim); font-size:11px; }
.tool{
  display:flex; align-items:center; gap:4px; background:var(--panel2); border:1px solid transparent;
  padding:4px 8px; border-radius:var(--radius); cursor:pointer; white-space:nowrap;
}
.tool .ti{ font-size:13px; line-height:1; }
.tool:hover{ background:#39404b; }
.tool.active{ background:var(--accent-d); border-color:var(--accent); color:#fff; }
.icon-btn,.view-btn,.mini-btn{
  background:var(--panel2); border:1px solid transparent; border-radius:var(--radius);
  padding:4px 8px; cursor:pointer; min-width:26px;
}
.icon-btn:hover,.view-btn:hover,.mini-btn:hover{ background:#39404b; }
.view-btn.active{ background:var(--accent-d); border-color:var(--accent); color:#fff; }
.chk{ display:flex; align-items:center; gap:4px; color:var(--fg-dim); cursor:pointer; white-space:nowrap; }
.chk input{ accent-color:var(--accent); }
.badge{ background:var(--accent-d); padding:3px 8px; border-radius:10px; font-size:11px; }
select.mini{
  background:var(--panel2); border:1px solid var(--line2); border-radius:4px; padding:3px 4px;
}
select.grow-el{ flex:1 1 auto; min-width:0; }

/* ------------- レイアウト ------------- */
#main{ display:flex; flex:1 1 auto; min-height:0; }
.side{
  display:flex; flex-direction:column; gap:1px; background:var(--line);
  flex:0 0 250px; min-width:190px; overflow:hidden;
}
#right{ flex-basis:288px; }
#center{ flex:1 1 auto; position:relative; min-width:0; background:#101216; }
#gl{ display:block; width:100%; height:100%; }
#viewport-overlay{ position:absolute; inset:0; pointer-events:none; }
#vp-info{
  position:absolute; left:8px; bottom:8px; font:11px/1.5 monospace; color:#9fb0c6;
  text-shadow:0 1px 2px #000; white-space:pre;
}

/* ------------- パネル ------------- */
.panel{ background:var(--panel); display:flex; flex-direction:column; min-height:0; }
.panel.grow{ flex:1 1 auto; }
.panel-head{
  display:flex; align-items:center; gap:6px; padding:5px 8px; background:var(--bg2);
  font-size:11px; font-weight:600; letter-spacing:.6px; color:var(--fg-dim);
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.panel-actions{ margin-left:auto; display:flex; gap:2px; }
.panel-actions button{
  background:transparent; border:0; color:var(--fg-dim); cursor:pointer;
  padding:2px 5px; border-radius:3px; font-size:11px;
}
.panel-actions button:hover{ background:var(--accent-d); color:#fff; }
.panel-body{ overflow:auto; padding:7px 8px; min-height:0; scrollbar-width:thin; }
.panel-body::-webkit-scrollbar{ width:9px; height:9px; }
.panel-body::-webkit-scrollbar-thumb{ background:#3d4450; border-radius:5px; }
.empty{ color:var(--fg-dim); text-align:center; padding:18px 6px; font-size:11px; }
.hint{ color:var(--fg-dim); font-size:10.5px; margin:6px 0 0; line-height:1.5; }

/* ------------- アウトライナー ------------- */
.node{
  display:flex; align-items:center; gap:5px; padding:2px 4px; border-radius:4px;
  cursor:pointer; white-space:nowrap;
}
.node:hover{ background:var(--panel2); }
.node.selected{ background:var(--accent-d); color:#fff; }
.node .twist{ width:12px; text-align:center; color:var(--fg-dim); flex:0 0 12px; }
.node .ico{ flex:0 0 14px; text-align:center; color:var(--fg-dim); }
.node.selected .ico,.node.selected .twist{ color:#cfe3ff; }
.node .nm{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.node .eye{ flex:0 0 16px; text-align:center; color:var(--fg-dim); opacity:.55; }
.node .eye:hover{ opacity:1; color:var(--fg); }
.node.hidden-node .nm{ opacity:.4; font-style:italic; }
.node[draggable="true"]{ }
.node.drop-into{ outline:1px solid var(--accent); }
.node.drop-before{ box-shadow:inset 0 2px 0 var(--accent); }
.node.drop-after{ box-shadow:inset 0 -2px 0 var(--accent); }
.children{ margin-left:11px; border-left:1px dotted var(--line2); padding-left:3px; }

/* ------------- テクスチャ一覧 ------------- */
.tex-item{
  display:flex; align-items:center; gap:7px; padding:3px 4px; border-radius:4px; cursor:pointer;
}
.tex-item:hover{ background:var(--panel2); }
.tex-item.active{ background:var(--accent-d); color:#fff; }
.tex-item canvas{
  width:30px; height:30px; flex:0 0 30px; image-rendering:pixelated;
  border:1px solid var(--line2); border-radius:3px;
  background-image:linear-gradient(45deg,#3a3a3a 25%,transparent 25%),linear-gradient(-45deg,#3a3a3a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#3a3a3a 75%),linear-gradient(-45deg,transparent 75%,#3a3a3a 75%);
  background-size:8px 8px; background-position:0 0,0 4px,4px -4px,-4px 0;
}
.tex-item .meta{ min-width:0; flex:1 1 auto; }
.tex-item .tname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tex-item .tsize{ font-size:10px; color:var(--fg-dim); }
.tex-item.active .tsize{ color:#cfe3ff; }

/* ------------- ペイント ------------- */
.paint-body{ padding-bottom:9px; }
.paint-tools{ display:flex; gap:3px; margin-bottom:6px; }
.ptool{
  flex:1 1 0; background:var(--panel2); border:1px solid transparent; border-radius:4px;
  padding:5px 0; cursor:pointer; font-size:14px;
}
.ptool:hover{ background:#39404b; }
.ptool.active{ background:var(--accent-d); border-color:var(--accent); color:#fff; }
.row{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.row input[type=color]{
  width:32px; height:24px; padding:0; border:1px solid var(--line2);
  border-radius:4px; background:none; cursor:pointer;
}
.slider{ flex:1 1 auto; min-width:0; accent-color:var(--accent); }
.num{ width:26px; text-align:right; color:var(--fg-dim); font-variant-numeric:tabular-nums; }
.swatches{ display:grid; grid-template-columns:repeat(10,1fr); gap:3px; margin-top:6px; }
.swatch{ aspect-ratio:1; border-radius:3px; border:1px solid var(--line); cursor:pointer; }
.swatch:hover{ transform:scale(1.15); }

/* ------------- フォーム ------------- */
.field{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.field.inline{ flex-wrap:wrap; }
.field>label{ color:var(--fg-dim); flex:0 0 66px; font-size:11px; }
.field>label.chk{ flex:0 0 auto; }
input.text{
  flex:1 1 auto; min-width:0; background:var(--bg2); border:1px solid var(--line2);
  border-radius:4px; padding:4px 6px;
}
input.text:focus{ outline:1px solid var(--accent); border-color:var(--accent); }
.vec-row{ display:flex; align-items:center; gap:4px; margin-bottom:5px; }
.vec-row>label{ color:var(--fg-dim); flex:0 0 66px; font-size:11px; }
.num-in{
  flex:1 1 0; min-width:0; width:100%; background:var(--bg2); border:1px solid var(--line2);
  border-radius:4px; padding:4px 5px; text-align:right; cursor:ew-resize;
  font-variant-numeric:tabular-nums;
}
.num-in.wide{ flex:2 1 0; }
.num-in:focus{ outline:1px solid var(--accent); border-color:var(--accent); cursor:text; }
.num-in[data-axis="0"]{ border-bottom:2px solid #d9534f; }
.num-in[data-axis="1"]{ border-bottom:2px solid #5cb85c; }
.num-in[data-axis="2"]{ border-bottom:2px solid #4d9dff; }
.uv4 .num-in{ border-bottom-color:var(--line2); }
.angle-btns{ display:flex; gap:3px; margin:0 0 6px 72px; }
.angle-btns button{
  flex:1 1 0; background:var(--panel2); border:1px solid transparent; border-radius:4px;
  padding:3px 0; cursor:pointer; font-size:11px;
}
.angle-btns button:hover{ background:#39404b; }
.angle-btns button.active{ background:var(--accent-d); border-color:var(--accent); color:#fff; }

.face-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-bottom:7px; }
.face-tabs button{
  background:var(--panel2); border:1px solid transparent; border-radius:4px;
  padding:4px 0; cursor:pointer; font-size:11px;
}
.face-tabs button:hover{ background:#39404b; }
.face-tabs button.active{ background:var(--accent-d); border-color:var(--accent); color:#fff; }
.face-tabs button.off{ opacity:.4; }

/* ------------- UVエディタ ------------- */
.uv-body{ padding:6px; display:flex; flex-direction:column; align-items:center; }
#uv-canvas{
  image-rendering:pixelated; border:1px solid var(--line2); border-radius:3px;
  cursor:crosshair; max-width:100%;
}
.uv-hint{ color:var(--fg-dim); font-size:10.5px; margin-top:5px; text-align:center; line-height:1.5; }

/* ------------- ステータスバー ------------- */
#status{
  display:flex; align-items:center; gap:10px; height:22px; flex:0 0 22px; padding:0 10px;
  background:var(--bg2); border-top:1px solid var(--line); font-size:11px;
}
#status-text.err{ color:var(--danger); }
#status-text.ok{ color:var(--ok); }
#status-text.warn{ color:var(--warn); }

/* ------------- モーダル ------------- */
#modal-back{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
#modal{
  background:var(--panel); border:1px solid var(--line2); border-radius:8px;
  min-width:340px; max-width:min(780px,92vw); max-height:86vh; overflow:auto;
  box-shadow:0 16px 50px rgba(0,0,0,.6); scrollbar-width:thin;
}
.modal-head{
  display:flex; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line2);
  font-weight:600; background:var(--bg2); position:sticky; top:0; z-index:2;
}
.modal-head .x{ margin-left:auto; background:transparent; border:0; cursor:pointer; font-size:16px; color:var(--fg-dim); }
.modal-head .x:hover{ color:var(--fg); }
.modal-body{ padding:14px; }
.modal-foot{ display:flex; gap:8px; justify-content:flex-end; padding:10px 14px; border-top:1px solid var(--line2); }
.btn{
  background:var(--panel2); border:1px solid var(--line2); border-radius:var(--radius);
  padding:6px 14px; cursor:pointer;
}
.btn:hover{ background:#39404b; }
.btn.primary{ background:var(--accent-d); border-color:var(--accent); color:#fff; }
.btn.primary:hover{ background:var(--accent); }
.modal-body h4{ margin:14px 0 7px; font-size:12px; color:var(--accent); }
.modal-body h4:first-child{ margin-top:0; }
.modal-body table{ border-collapse:collapse; width:100%; font-size:11.5px; }
.modal-body td{ padding:3px 8px 3px 0; vertical-align:top; }
.modal-body td.k{ color:var(--accent); white-space:nowrap; font-family:monospace; }
.modal-body code{ background:var(--bg2); padding:1px 5px; border-radius:3px; font-family:monospace; }
.modal-body pre{
  background:var(--bg); padding:9px; border-radius:5px; overflow:auto; font-size:11px;
  max-height:340px; border:1px solid var(--line2); scrollbar-width:thin;
}
.msg-list{ margin:0; padding-left:18px; }
.msg-list li{ margin-bottom:4px; }
.msg-list li.err{ color:var(--danger); }
.msg-list li.warn{ color:var(--warn); }
.msg-list li.ok{ color:var(--ok); }

.disp-grid{ display:grid; grid-template-columns:110px repeat(3,1fr) 30px; gap:4px 6px; align-items:center; }
.disp-grid .hd{ color:var(--fg-dim); font-size:10.5px; text-align:center; }
.disp-slot{ color:var(--fg-dim); font-size:11px; overflow:hidden; text-overflow:ellipsis; }
.disp-grid .num-in{ border-bottom-color:var(--line2); }
.disp-grid button.eye-btn{
  background:var(--panel2); border:1px solid transparent; border-radius:4px; cursor:pointer; padding:3px 0;
}
.disp-grid button.eye-btn.active{ background:var(--accent-d); border-color:var(--accent); color:#fff; }