:root {
  --ink: #263d54;
  --muted: #718191;
  --line: #dce5ea;
  --bg: #f3f7f9;
  --navy: #174b70;
  --blue: #2c73a4;
  --blue-soft: #eaf3f8;
  --teal: #0d8b88;
  --teal-soft: #e6f5f2;
  --amber: #c78822;
  --amber-soft: #fff3dc;
  --red: #b95359;
  --red-soft: #fcebed;
  --white: #fff;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  padding: 14px;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app { max-width: 1220px; margin: 0 auto; }
.shell { overflow: hidden; border: 1px solid #d7e2e8; border-radius: 20px; background: #fff; box-shadow: 0 17px 42px rgba(30, 53, 72, .10); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; background: var(--navy); color: #fff; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brandmark { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 10px; background: var(--teal); font-size: 17px; }
.brand b { display: block; font-size: 16px; }
.brand small { display: block; color: #d5e3ed; font-size: 12px; }
.user { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.page { padding: 18px; background: #f8fafb; }
.heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.heading h1 { margin: 0; color: #173f5f; font-size: 22px; line-height: 1.35; }
.heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.status, .badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 9px; border: 1px solid #bfd3e1; border-radius: 999px; background: var(--blue-soft); color: #2c648d; font-size: 12px; font-weight: 900; white-space: nowrap; }
.status.teal, .badge.teal { border-color: #acd8d2; background: var(--teal-soft); color: #087269; }
.status.amber, .badge.amber { border-color: #e8cf9c; background: var(--amber-soft); color: #80590f; }
.status.red, .badge.red { border-color: #ebc1c5; background: var(--red-soft); color: #963e47; }
.status.gray, .badge.gray { border-color: #d7dfe4; background: #f1f4f6; color: #6b7986; }
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 13px; }
.summary.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.metric span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.metric strong { display: block; margin-top: 2px; color: #1f4867; font-size: 24px; line-height: 1.2; }
.metric small { color: var(--muted); font-size: 12px; }
.grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 14px; align-items: start; }
.grid.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: grid; gap: 10px; }
.card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
.cardhead h2 { display: flex; align-items: center; gap: 7px; margin: 0; color: #25465f; font-size: 14px; }
.cardhead h2 i { color: var(--teal); }
.cardbody { padding: 12px; }
.toolbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.search, .select { min-height: 38px; padding: 8px 10px; border: 1px solid #cedbe1; border-radius: 9px; background: #fff; color: #617382; }
.search { flex: 1 1 200px; }
.btn, .chipbtn { border: 1px solid #cbd9df; border-radius: 9px; background: #fff; color: #35566e; font-weight: 900; }
.btn { padding: 9px 12px; font-size: 13px; }
.btn.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.btn.teal { border-color: var(--teal); background: var(--teal); color: #fff; }
.btn.amber { border-color: var(--amber); background: var(--amber); color: #fff; }
.btn.small { padding: 6px 9px; font-size: 12px; }
.chipbtn { padding: 6px 9px; border-radius: 999px; font-size: 12px; }
.chipbtn.on { border-color: #7cbeb8; background: var(--teal-soft); color: #087269; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.table { width: 100%; min-width: 700px; border-collapse: collapse; }
.table th, .table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 13px; }
.table th { background: #edf3f6; color: #5f7180; font-weight: 900; }
.table tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover, .table tr.clickable.on { background: #f0f7fa; }
.table td strong { display: block; color: var(--ink); font-size: 13px; }
.table td small { color: var(--muted); font-size: 12px; }
.notice { padding: 10px 11px; border: 1px solid #c7dce5; border-radius: 10px; background: #eef6fa; color: #315d79; font-size: 12px; }
.notice.amber { border-color: #e8d1a3; background: #fff8e8; color: #755817; }
.notice.red { border-color: #ebc3c6; background: #fff0f1; color: #873e45; }
.list { display: grid; gap: 7px; }
.listrow { display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid #e0e8eb; border-radius: 10px; background: #fff; }
.listicon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--blue-soft); color: #2b6c98; }
.listrow b { display: block; font-size: 13px; }
.listrow small { display: block; color: var(--muted); font-size: 12px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.field label { display: block; margin-bottom: 4px; color: #5d6f7f; font-size: 12px; font-weight: 900; }
.field input, .field select, .field textarea { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid #ccd9df; border-radius: 8px; background: #fff; color: var(--ink); }
.field textarea { min-height: 78px; resize: none; }
.span2 { grid-column: 1 / -1; }
.tabs { display: flex; gap: 5px; padding: 9px 11px 0; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tab { padding: 8px 11px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; background: transparent; color: #6d7d8b; font-size: 12px; font-weight: 900; white-space: nowrap; }
.tab.on { position: relative; top: 1px; border-color: var(--line); background: #fff; color: var(--teal); }
.view { display: none; padding: 12px; }
.view.on { display: block; }
.progress { display: flex; align-items: flex-start; margin: 10px 0 4px; }
.step { position: relative; flex: 1; color: #82909c; text-align: center; font-size: 12px; font-weight: 900; }
.step:before { content: ""; display: block; position: relative; z-index: 2; width: 16px; height: 16px; margin: 0 auto 4px; border: 3px solid #cad6dd; border-radius: 50%; background: #fff; }
.step:after { content: ""; position: absolute; z-index: 1; top: 8px; left: -50%; width: 100%; height: 3px; background: #d8e1e6; }
.step:first-child:after { display: none; }
.step.done { color: #087269; }
.step.done:before { border-color: var(--teal); background: var(--teal); }
.step.done:after { background: var(--teal); }
.step.current { color: #245f88; }
.step.current:before { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.timeline { margin-left: 7px; padding-left: 17px; border-left: 2px solid #dce6e9; }
.event { position: relative; padding: 0 0 11px; }
.event:last-child { padding-bottom: 0; }
.event:before { content: ""; position: absolute; left: -23px; top: 4px; width: 9px; height: 9px; border: 3px solid #def2ef; border-radius: 50%; background: var(--teal); }
.event b { display: block; font-size: 13px; }
.event small { color: var(--muted); font-size: 12px; }
.productgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.product { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.productpic { display: grid; place-items: center; height: 96px; background: linear-gradient(145deg,#eef6fa,#e6f3f1); color: #286b91; font-size: 34px; }
.productbody { padding: 9px; }
.productbody b { display: block; font-size: 13px; }
.productbody small { color: var(--muted); font-size: 12px; }
.productfoot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; }
.productprice { color: #174c70; font-weight: 900; }
.phonewrap { display: grid; place-items: center; padding: 4px; }
.phone { width: min(370px,100%); padding: 9px; border-radius: 28px; background: #243b51; box-shadow: 0 17px 38px rgba(28,48,66,.2); }
.phonescreen { overflow: hidden; min-height: 570px; border-radius: 21px; background: #f8fafb; }
.phonehead { padding: 12px; background: var(--navy); color: #fff; }
.phonehead b { display: block; }
.phonehead small { color: #d4e2eb; font-size: 11px; }
.phonebody { padding: 10px; }
.actionbar { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; }
.result { display: none; margin-top: 9px; padding: 10px; border-radius: 9px; background: var(--teal-soft); color: #087169; font-size: 12px; font-weight: 900; }
.result.show { display: block; }
.photoarea { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 7px; }
.photo { display: grid; place-items: center; aspect-ratio: 4/3; border: 1px dashed #aebfca; border-radius: 8px; background: #edf4f7; color: #6f8796; }
.visual-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(180px,.55fr); gap: 12px; margin-top: 11px; }
.chart-box { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.chart-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; color: #36576d; font-size: 12px; font-weight: 900; }
.bar-chart { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 94px minmax(80px,1fr) 42px; align-items: center; gap: 8px; font-size: 12px; }
.bar-track { overflow: hidden; height: 9px; border-radius: 999px; background: #e7eef2; }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.bar-fill.blue { background: var(--blue); }
.bar-fill.amber { background: var(--amber); }
.bar-fill.red { background: var(--red); }
.bar-value { color: #536b7a; text-align: right; font-weight: 900; }
.ring-chart { --value: 70%; display: grid; place-items: center; width: 92px; aspect-ratio: 1; margin: 4px auto; border-radius: 50%; background: conic-gradient(var(--teal) var(--value), #e5edf1 0); position: relative; }
.ring-chart:before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.ring-chart strong { position: relative; z-index: 1; color: #174b70; font-size: 20px; }
.legend { display: flex; flex-wrap: wrap; gap: 7px 10px; margin-top: 9px; color: #657786; font-size: 11px; }
.legend i { margin-right: 4px; }
.legend .teal { color: var(--teal); }
.legend .amber { color: var(--amber); }
.legend .red { color: var(--red); }
@media (max-width: 860px) {
  .summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid, .grid.equal { grid-template-columns: 1fr; }
  .productgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .visual-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { padding: 8px; }
  .page { padding: 11px; }
  .topbar { padding: 11px; }
  .user { display: none; }
  .heading { display: block; }
  .heading > .status { margin-top: 7px; }
  .fields { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .productgrid { grid-template-columns: 1fr 1fr; }
}