:root {
  --ink: #1d2329; --soft: #5b6670; --paper: #ffffff; --ground: #eef0f2; --line: #d5dade; --mark: #b4530a;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; color: var(--ink); background: var(--ground);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
header {
  display: flex; align-items: baseline; gap: 12px; padding: 8px 14px; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
header h1 { margin: 0; font-size: 17px; font-weight: 600; }
header p { margin: 0; flex: 1; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { flex: 1; display: flex; min-height: 0; }
#side {
  width: 290px; flex: none; overflow-y: auto; padding: 4px 14px 10px; background: var(--paper);
  border-right: 1px solid var(--line);
}
#map, #view3d, #sections, #extra { flex: 1; min-width: 0; background: #dfe3e6; }
#map[hidden], #view3d[hidden], #sections[hidden], #extra[hidden], #tab-3d[hidden], #tab-sections[hidden],
#measure-box[hidden], #info-box[hidden], #fit[hidden], #dates[hidden] { display: none; }
#sections { display: flex; flex-direction: column; }
#section-title { margin: 0; padding: 6px 12px; background: var(--paper); border-bottom: 1px solid var(--line);
  color: var(--soft); }
#section-map { flex: 1; min-height: 0; }
#extra { overflow-y: auto; padding: 12px 18px; background: var(--ground); }
.extra-part h2 { margin-top: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.card img { display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 6px; }
.plugin-page { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px;
  max-width: 900px; }
.plugin-page img { max-width: 100%; height: auto; }
#dates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 14px; background: var(--paper);
  border-bottom: 1px solid var(--line); }
#dates input[type=range] { width: 160px; }
.dates-title { color: var(--soft); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.section-item { display: block; width: 100%; text-align: left; margin: 2px 0; }
a.download { display: inline-block; margin: 4px 0; color: var(--mark); }
#view3d { position: relative; overflow: hidden; touch-action: none; }
#view3d canvas { display: block; width: 100%; height: 100%; }
#tabs { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
#tabs[hidden] { display: none; }
.tab { padding: 3px 12px; }
h2 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
h3 { margin: 10px 0 4px; font-size: 13px; }
button {
  font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 10px; cursor: pointer;
}
button:hover { border-color: var(--soft); }
button.on { border-color: var(--mark); color: var(--mark); }
.buttons { display: flex; gap: 6px; flex-wrap: wrap; }
#fit { margin-top: 8px; }
label.layer { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
label.layer.group { padding-left: 20px; }
.swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.count { color: var(--soft); margin-left: auto; font-variant-numeric: tabular-nums; }
.value { margin: 6px 0 0; font-variant-numeric: tabular-nums; min-height: 1.4em; white-space: pre-line; }
.note { color: var(--soft); margin: 4px 0; }
table { width: 100%; border-collapse: collapse; }
td { padding: 2px 0; vertical-align: top; overflow-wrap: anywhere; }
td:first-child { color: var(--soft); padding-right: 10px; width: 45%; }
footer { margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--soft); font-size: 12px; }
.failed { padding: 14px; color: #a11; }
#notice { margin: 0 0 12px; padding: 8px 10px; border: 1px solid #d9a400; border-radius: 4px; background: #fff7d6;
  color: #4a3a00; font-size: 13px; }
#notice p { margin: 0 0 4px; }
#notice ul { margin: 0; padding-left: 18px; }
@media (max-width: 700px) {
  main { flex-direction: column-reverse; }
  #side { width: auto; max-height: 42%; border-right: 0; border-top: 1px solid var(--line); }
  header p { display: none; }
  header { flex-wrap: wrap; align-items: center; }
  .tab { padding: 3px 8px; }
}