@charset "utf-8";
:root{
  --primary:#3C3838; --accent:#C2706B; --text:#333;
  --bg:#FBF9F9; --panel:#fff; --sub:#FAF8F8; --line:#E0DADA;
  --mid:#8A7C7C; --warm:#5C4848; --rose:#E8B4B0;
  --ok:#2f6b4f; --ng:#a3453f; --warn:#9a6a1e; --info:#3a6a8f;
  --rail:66px; --top:52px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Meiryo','Hiragino Sans','Yu Gothic',Arial,sans-serif;
  color:var(--text);background:var(--bg);font-size:13px;line-height:1.65;
  display:flex;flex-direction:column;overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}
select,input,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

/* ---------- error banner ---------- */
#errbar{background:#7d2b26;color:#fff;padding:7px 14px;font-size:12px}
#errbar[hidden]{display:none}

/* ---------- topbar ---------- */
.topbar{
  height:var(--top);flex:0 0 auto;background:var(--primary);color:#fff;
  display:flex;align-items:center;gap:16px;padding:0 16px;
}
.topbar .mk{font-size:14px;font-weight:bold;letter-spacing:.06em}
.topbar .mk span{color:var(--rose)}
.topbar .ttl{font-size:13px;opacity:.92;padding-left:14px;border-left:1px solid rgba(255,255,255,.25)}
.topbar .sp{flex:1}
.topbar .pick{display:flex;align-items:center;gap:7px;font-size:11.5px;opacity:.9}
.topbar select{
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);
  border-radius:4px;padding:3px 7px;font-size:11.5px;
}
.topbar select option{color:#333}
.topbar .usr{font-size:11.5px;opacity:.8}

/* ---------- shell ---------- */
.shell{flex:1;display:flex;min-height:0}
.rail{
  width:var(--rail);flex:0 0 auto;background:#332F2F;
  display:flex;flex-direction:column;align-items:stretch;padding-top:6px;
}
.rail button{
  background:none;border:0;color:#B8ADAD;padding:11px 2px 9px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:9.5px;line-height:1.35;letter-spacing:.02em;text-align:center;
  border-left:3px solid transparent;
}
.rail button .ic{font-size:17px;line-height:1}
.rail button:hover{background:rgba(255,255,255,.06);color:#fff}
.rail button[aria-current="true"]{background:rgba(194,112,107,.18);color:#fff;border-left-color:var(--accent)}
.rail .sp{flex:1}
.rail .env{color:#7E7373;font-size:8.5px;text-align:center;padding:8px 4px}

main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.view{flex:1;min-height:0;display:none;flex-direction:column}
.view.on{display:flex}

/* ---------- view head ---------- */
.vhead{
  flex:0 0 auto;background:var(--panel);border-bottom:1px solid var(--line);
  padding:11px 18px;display:flex;align-items:center;gap:12px;
}
.vhead h2{font-size:15px;color:var(--primary)}
.vhead .sd{font-size:11.5px;color:var(--mid)}
.vhead .sp{flex:1}
.vhead .role{
  font-size:10.5px;color:var(--warm);background:#F6F1F1;
  border:1px solid var(--line);border-radius:3px;padding:3px 9px;white-space:nowrap;
}

/* ---------- generic ---------- */
.body{flex:1;min-height:0;overflow:auto;padding:16px 18px}
.grid{flex:1;min-height:0;display:grid;gap:12px;padding:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;min-height:0}
.card>.ch{
  flex:0 0 auto;padding:8px 12px;border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:bold;color:var(--primary);
  display:flex;align-items:center;gap:8px;
}
.card>.ch .sp{flex:1}
.card>.cb{flex:1;min-height:0;overflow:auto;padding:11px 12px}
.card>.cb.flush{padding:0}
.hint{font-size:11px;color:var(--mid);line-height:1.6}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}

.btn{
  background:var(--primary);color:#fff;border:0;border-radius:4px;
  padding:7px 14px;font-size:12px;letter-spacing:.02em;
}
.btn:hover{background:#4a4444}
.btn.ac{background:var(--accent)}
.btn.ac:hover{background:#ac625d}
.btn.gh{background:#fff;color:var(--warm);border:1px solid var(--line)}
.btn.gh:hover{background:#F6F1F1}
.btn.sm{padding:4px 10px;font-size:11px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.badge{
  font-size:10px;padding:2px 7px;border-radius:10px;border:1px solid var(--line);
  background:#F6F1F1;color:var(--warm);white-space:nowrap;
}
.badge.ok{background:#EAF3EE;border-color:#c4dfd0;color:var(--ok)}
.badge.ng{background:#FBEDEC;border-color:#e8c6c3;color:var(--ng)}
.badge.wn{background:#FBF3E4;border-color:#e6d5b2;color:var(--warn)}
.badge.info{background:#EAF0F6;border-color:#c5d5e4;color:var(--info)}

/* ---------- tables ---------- */
.tb{font-size:11.5px}
.tb th{
  background:#F6F1F1;color:var(--warm);font-weight:bold;text-align:left;
  padding:6px 9px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;
}
.tb td{padding:6px 9px;border-bottom:1px solid #EFE9E9;vertical-align:top}
.tb tr:hover td{background:#FDFAFA}
.tb .num{text-align:right;font-variant-numeric:tabular-nums}
.tb .mono{font-family:'Consolas','SFMono-Regular',monospace;font-size:11px;color:var(--warm)}
.tb .act{white-space:nowrap}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:11px 13px}
.kpi .k{font-size:10.5px;color:var(--mid)}
.kpi .v{font-size:22px;font-weight:bold;color:var(--primary);line-height:1.3}
.kpi .v small{font-size:11px;font-weight:normal;color:var(--mid);margin-left:3px}
.filters{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.filters select,.filters input{border:1px solid var(--line);border-radius:4px;padding:5px 8px;font-size:11.5px;background:#fff}
.filters input{min-width:180px}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;min-height:0}
.chat .body{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--sub)}
.msg{max-width:96%;font-size:11.5px;line-height:1.7}
.msg.u{align-self:flex-end;background:#332F2F;color:#F2EDEB;border-radius:9px 9px 2px 9px;padding:8px 12px}
.msg.a{align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:9px 9px 9px 2px;padding:8px 12px;color:var(--warm)}
.msg.a .who{font-size:9.5px;font-weight:bold;color:var(--accent);letter-spacing:.06em;margin-bottom:3px}
.msg.a b{color:var(--primary)}
.msg.sys{align-self:center;font-size:10.5px;color:var(--mid)}
.ask{background:#FFF9F9;border:1.5px solid var(--accent);border-radius:9px;padding:9px 11px;align-self:flex-start;max-width:96%}
.ask .q{font-size:11.5px;font-weight:bold;color:var(--primary);margin-bottom:6px;line-height:1.55}
.ask .q:before{
  content:"?";display:inline-block;width:15px;height:15px;background:var(--accent);color:#fff;
  border-radius:50%;text-align:center;line-height:15px;font-size:10px;margin-right:6px;font-weight:bold;
}
.ask .opts{display:flex;flex-direction:column;gap:5px}
.ask .opt{background:#fff;border:1px solid var(--line);border-radius:5px;padding:5px 9px;font-size:11px;text-align:left}
.ask .opt:hover{border-color:var(--accent);background:#FFF4F3}
.typing{font-size:11px;color:var(--mid);align-self:flex-start}
.chat .foot{flex:0 0 auto;border-top:1px solid var(--line);background:#fff;padding:9px 11px}
.chat .row{display:flex;gap:7px}
.chat input[type=text]{flex:1;border:1px solid var(--line);border-radius:4px;padding:7px 9px;font-size:11.5px}
.chat .tip{font-size:10px;color:var(--mid);margin-top:6px}

/* ---------- 3D ---------- */
.stage{position:relative;flex:1;min-height:0;background:#EDE9E7}
.stage canvas{display:block;width:100%;height:100%}
.stage .tools{
  position:absolute;top:8px;left:8px;right:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  pointer-events:none;
}
.stage .tools>*{pointer-events:auto}
.chip{
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:4px;
  padding:4px 8px;font-size:10.5px;color:var(--warm);display:inline-flex;align-items:center;gap:5px;
}
.chip input{margin:0}
.stage .legend{
  position:absolute;bottom:8px;left:8px;background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:4px;padding:6px 9px;font-size:10px;color:var(--mid);
}
.stage .legend b{color:var(--primary)}
.stage .ov{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(237,233,231,.9);font-size:12px;color:var(--warm);text-align:center;padding:20px;
}
.stage .ov[hidden]{display:none}
.spin{
  width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:sp .8s linear infinite;margin:0 auto 9px;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- 定義エディター ---------- */
#view-define .grid{grid-template-columns:minmax(320px,380px) 1fr;grid-template-rows:1fr}
.rt{display:grid;grid-template-rows:1.15fr .85fr;gap:12px;min-height:0}
.tabs{display:flex;gap:4px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:3px 8px;font-size:11.5px;color:var(--mid)}
.tabs button[aria-selected="true"]{color:var(--primary);border-bottom-color:var(--accent);font-weight:bold}
.pane[hidden]{display:none}
.st{font-size:10px;padding:1px 6px;border-radius:3px;white-space:nowrap}
.st.done{background:#EAF3EE;color:var(--ok)}
.st.todo{background:#FBF3E4;color:var(--warn)}
.st.read{background:#EAF0F6;color:var(--info)}
.st.talk{background:#FBF3E4;color:var(--warn)}
.st.none{background:#FBEDEC;color:var(--ng)}
tr.new td{background:#FFF7F6 !important;animation:fin .9s ease-out}
@keyframes fin{from{background:#FFE9E6}}

/* ---------- モデル作成 ---------- */
#view-model .grid{grid-template-columns:minmax(360px,430px) 1fr}
.steps{display:flex;flex-direction:column;gap:12px}
.step{border:1px solid var(--line);border-radius:5px;background:#fff}
.step>.sh{
  padding:7px 10px;background:#F6F1F1;border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:bold;color:var(--primary);display:flex;align-items:center;gap:8px;
}
.step>.sh .no{
  width:17px;height:17px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:10px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.step>.sb{padding:10px}
.drop{
  border:1.5px dashed var(--line);border-radius:5px;background:var(--sub);
  padding:14px;text-align:center;font-size:11px;color:var(--mid);
}
.files{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:5px}
.files li{
  display:flex;align-items:center;gap:7px;font-size:11px;color:var(--warm);
  background:#F8F5F5;border:1px solid var(--line);border-radius:4px;padding:5px 8px;
}
.files li .ex{font-size:9.5px;background:var(--accent);color:#fff;border-radius:2px;padding:1px 5px}
.files li .sp{flex:1}
.bar{height:5px;background:#EFE9E9;border-radius:3px;overflow:hidden;margin-top:9px}
.bar>i{display:block;height:100%;width:0;background:var(--accent);transition:width .18s linear}
select.full,input.full,textarea.full{width:100%;border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:11.5px;background:#fff}
textarea.full{resize:vertical;min-height:52px}

/* ---------- 点検 ---------- */
#view-inspect .grid{grid-template-columns:230px 1fr 310px;grid-template-rows:1fr 168px}
#insTreeCard{grid-column:1/2;grid-row:1/3}
#insCard3d{grid-column:2/3;grid-row:1/2}
#insFormCard{grid-column:3/4;grid-row:1/3}
#insListCard{grid-column:2/3;grid-row:2/3}
.tree{list-style:none;font-size:11.5px}
.tree .g{padding:5px 4px 3px;font-size:10.5px;color:var(--mid);font-weight:bold;letter-spacing:.04em}
.tree .g.sub{padding-left:12px;color:var(--warm)}
.tree button{
  display:flex;width:100%;align-items:center;gap:6px;background:none;border:0;
  padding:4px 6px 4px 22px;text-align:left;border-radius:4px;font-size:11.5px;color:var(--warm);
}
.tree button:hover{background:#F6F1F1}
.tree button[aria-current="true"]{background:#FFF0EF;color:var(--primary);font-weight:bold}
.tree button .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree button .c{
  font-size:9.5px;background:var(--ng);color:#fff;border-radius:8px;padding:0 5px;line-height:15px;
}
.sel{font-size:13px;font-weight:bold;color:var(--primary)}
.selmeta{font-size:10.5px;color:var(--mid);margin-top:2px}
.fl{margin-top:10px}
.fl>label{display:block;font-size:10.5px;color:var(--warm);font-weight:bold;margin-bottom:4px}
.grades{display:flex;gap:5px}
.grades label{
  flex:1;text-align:center;border:1px solid var(--line);border-radius:4px;padding:5px 0;
  font-size:11.5px;color:var(--warm);cursor:pointer;background:#fff;
}
.grades input{display:none}
.grades input:checked+span{color:#fff}
.grades label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.photos{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.photo{
  width:52px;height:40px;border:1px solid var(--line);border-radius:3px;background:#EDE9E7;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--mid);
}
.existing{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:5px}
.existing li{font-size:11px;color:var(--warm);background:#F8F5F5;border:1px solid var(--line);border-radius:4px;padding:5px 7px}
.existing li .t{font-weight:bold;color:var(--primary)}
.empty{font-size:11px;color:var(--mid);padding:6px 0}

/* ---------- 帳票 ---------- */
#view-report .grid{grid-template-columns:minmax(300px,350px) 1fr}
.checks{display:flex;flex-direction:column;gap:6px}
.checks label{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--warm)}
.radios{display:flex;gap:12px}
.radios label{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--warm)}
.sheet{background:#fff;border:1px solid #c9c3c3;padding:16px;font-size:11px;min-width:640px}
.sheet .sttl{text-align:center;font-size:14px;font-weight:bold;letter-spacing:.14em;margin-bottom:11px;color:#222}
.sheet .meta{display:grid;grid-template-columns:repeat(4,auto);gap:0;margin-bottom:11px;border:1px solid #b9b3b3}
.sheet .meta div{border-right:1px solid #d8d3d3;padding:4px 8px}
.sheet .meta div:last-child{border-right:0}
.sheet .meta .l{background:#F1EDED;color:#555;font-size:10px}
.sheet table{border:1px solid #b9b3b3;font-size:10.5px}
.sheet th{background:#F1EDED;border:1px solid #d8d3d3;padding:4px 6px;text-align:center;color:#444;font-weight:bold}
.sheet td{border:1px solid #d8d3d3;padding:4px 6px;vertical-align:middle}
.sheet td.c{text-align:center}
.sheet .ph{width:44px;height:32px;background:#EDE9E7;border:1px solid #cfc9c9;display:inline-block}
.sheet .fig[hidden]{display:none}
.sheet .meta[hidden]{display:none}
.sheet .fig{
  margin-top:12px;border:1px solid #cfc9c9;background:#F4F1F0;height:120px;
  display:flex;align-items:center;justify-content:center;font-size:10.5px;color:#8A7C7C;
}
.hist{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:6px}
.hist li{font-size:10.5px;color:var(--warm);display:flex;gap:7px;align-items:center}
.hist li .f{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- footer / toast ---------- */
.note{
  flex:0 0 auto;background:#F2ECEC;border-top:1px solid var(--line);
  padding:5px 16px;font-size:10px;color:var(--mid);
}
#toast{
  position:fixed;bottom:34px;left:50%;transform:translateX(-50%) translateY(14px);
  background:#332F2F;color:#F5F0F0;font-size:11.5px;padding:9px 18px;border-radius:5px;
  opacity:0;transition:.25s;pointer-events:none;z-index:50;max-width:80vw;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:1180px){
  #view-inspect .grid{grid-template-columns:200px 1fr 280px}
  #view-define .grid{grid-template-columns:300px 1fr}
}