:root{
  --bg:#F6F4EE;
  --ink:#1B2A28;
  --sub:#71807C;
  --line:#E3DFD2;
  --brand:#0E6B5C;
  --brand-deep:#0A4A40;
  --brand-soft:#E3F0EC;
  --coral:#E25A41;
  --coral-soft:#FCEAE5;
  --amber:#D9912A;
  --amber-soft:#FBF1DF;
  --blue:#3D6FA8;
  --blue-soft:#E8EFF7;
  --gold:#C9A24B;
  --card:#FFFFFF;
  --shadow:0 12px 32px rgba(27,42,40,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  line-height:1.65;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{min-height:100vh}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px clamp(16px,4vw,34px);
  border-bottom:1px solid var(--line);
  background:rgba(246,244,238,.94);
  backdrop-filter:blur(10px);
}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--brand)}
h1,h2,h3,p{margin:0}
h1{font-size:22px;line-height:1.2}
h2{font-size:24px;line-height:1.35}
h3{font-size:16px}
.top-actions,.button-row,.form-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tabs{
  position:sticky;
  top:69px;
  z-index:19;
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:10px clamp(16px,4vw,34px);
  border-bottom:1px solid var(--line);
  background:rgba(246,244,238,.92);
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:#fff;
  color:var(--sub);
  border-radius:999px;
  padding:9px 16px;
  font-size:13px;
  font-weight:800;
}
.tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
main{max-width:1180px;margin:0 auto;padding:24px clamp(14px,4vw,34px) 72px}
.view{display:none}
.view.on{display:block}
.view-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
}
.view-head p,.panel-title p{color:var(--sub);font-size:13px;margin-top:4px}
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px;
  margin-bottom:14px;
  box-shadow:0 8px 22px rgba(27,42,40,.04);
}
.panel-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.split{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}
.brief{
  border:1px solid var(--line);
  border-radius:8px;
  background:#FBFAF6;
  padding:14px;
  color:var(--sub);
  font-size:13px;
}
.brief b{color:var(--ink)}
.case-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.case-card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  padding:13px;
  text-align:left;
}
.case-card.on{border-color:var(--brand);background:var(--brand-soft)}
.case-card b{display:block;font-size:14px}
.case-card span{display:block;color:var(--sub);font-size:12px;margin-top:4px}
.form-grid,.finding-form,.feedback-form{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:#59635E}
input,select,textarea{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:10px 11px;
  background:#fff;
  color:var(--ink);
}
textarea{resize:vertical;min-height:44px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
.wide{grid-column:1/-1}
.btn,.icon-btn{
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:8px;
  padding:10px 14px;
  font-size:13px;
  font-weight:800;
}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.warn{background:var(--coral);border-color:var(--coral);color:#fff}
.btn.small{padding:7px 11px;font-size:12px}
.icon-btn{width:40px;height:40px;padding:0;display:grid;place-items:center}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:5px 10px;
  background:var(--brand-soft);
  color:var(--brand-deep);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.pill.muted{background:#F1EFE7;color:var(--sub)}
.pill.fix{background:var(--coral-soft);color:#B33A24}
.pill.watch{background:var(--amber-soft);color:#A86E15}
.pill.builder{background:var(--blue-soft);color:var(--blue)}
.pill.info{background:#EFEDE6;color:#59635E}
.finding-list,.queue,.feedback-list{display:flex;flex-direction:column;gap:10px}
.finding{
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  background:#fff;
}
.finding-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.finding h4{margin:0;font-size:15px}
.meta{color:var(--sub);font-size:12px;margin-top:3px}
.comment{font-size:13px;margin-top:9px;white-space:pre-wrap}
.finding-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.back-note{margin-top:10px;border-left:3px solid var(--coral);background:#FFF8F6;border-radius:0 8px 8px 0;padding:9px 11px;color:#8A3A2A;font-size:12px}
.queue-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  padding:13px;
  text-align:left;
}
.queue-card.on{border-color:var(--brand);background:var(--brand-soft)}
.karte{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.karte-hero{
  background:linear-gradient(135deg,var(--brand-deep),var(--brand));
  color:#fff;
  padding:24px;
}
.karte-hero p{color:#CBE4DD;font-size:13px;margin-top:6px}
.score-grid{display:grid;grid-template-columns:160px 1fr;gap:18px;padding:20px}
.score{
  width:132px;
  height:132px;
  border-radius:50%;
  border:10px solid var(--brand-soft);
  display:grid;
  place-items:center;
  color:var(--brand-deep);
  font-size:38px;
  font-weight:900;
}
.karte-section{padding:0 20px 20px}
.karte-section h3{margin-bottom:10px}
.karte-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini-card{border:1px solid var(--line);border-radius:8px;padding:13px;background:#FBFAF6}
.mini-card b{display:block;font-size:13px}
.mini-card p{color:var(--sub);font-size:12px;margin-top:5px}
.feedback-item{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:13px;
}
.feedback-item .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.jsonbox{
  min-height:240px;
  font-family:Consolas,"Courier New",monospace;
  font-size:12px;
  white-space:pre;
}
.check-list{margin:0;padding-left:20px;color:#43504C;font-size:14px}
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translate(-50%,12px);
  opacity:0;
  pointer-events:none;
  background:#1B2A28;
  color:#fff;
  border-radius:999px;
  padding:12px 18px;
  font-size:13px;
  font-weight:800;
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  transition:.25s ease;
  z-index:50;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){
  .split,.score-grid,.karte-cards{grid-template-columns:1fr}
  .case-switch,.form-grid,.finding-form,.feedback-form{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .topbar{align-items:flex-start}
  .view-head,.panel-title,.queue-card{display:block}
  .view-head .btn,.panel-title .btn,.panel-title .button-row{margin-top:12px}
  .case-switch,.form-grid,.finding-form,.feedback-form{grid-template-columns:1fr}
  .tabs{top:73px}
  main{padding-bottom:44px}
  h2{font-size:21px}
}