:root{
  --bg:#fff;
  --ink:#1c2430;
  --accent:#d83a2e;
  --panel:#f7f9fc;
  --line:#dfe6ef;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font:14px/1.6 "Noto Sans JP",system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
}
.brand{font-weight:700;font-size:16px;}
.ctx{display:flex;gap:6px;align-items:center;}
.ctx input{height:28px;padding:2px 6px;border-radius:6px;border:1px solid var(--line);}
button{height:28px;padding:0 10px;border-radius:6px;cursor:pointer;border:1px solid var(--line);}
button.primary{background:var(--accent);color:#fff;border:none;}
button.ghost{background:#fff;color:#555;}

.tabs{display:flex;gap:6px;padding:6px 12px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:48px;z-index:9;}
.tabs button{background:#f3f6fb;border:1px solid var(--line);border-radius:6px;padding:4px 10px;}
.tabs button.active{background:#fff;font-weight:700;}

.viewport{display:flex;justify-content:center;padding:14px;background:#fff;}
.canvas-wrap{width:100%;max-width:1200px;}
.tab{display:none;}
.tab.active{display:block;}
.sheet{background:var(--panel);border-radius:10px;padding:16px;border:1px solid var(--line);}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;}
.card{background:#fff;border-radius:10px;padding:10px;border:1px solid var(--line);}
.card h3{margin:0 0 6px;font-size:15px;}
.metrics{display:grid;gap:4px;}
.metrics div{display:flex;justify-content:space-between;}
.metrics div.total b{font-size:18px;}
.muted{color:#777;}
.note{margin-top:10px;font-size:12px;color:#777;}
.kpi-form{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;max-width:400px;}
.kpi-row{margin-bottom:8px;display:flex;flex-direction:column;}
label{font-size:12px;color:#555;}
input{height:32px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;}
.btn-lg{height:36px;border-radius:8px;font-weight:700;}
a.link{color:#1565c0;text-decoration:none;border-bottom:1px dashed #1565c0;}
a.link:hover{color:#0d47a1;}