/* ── DIAGNOSIS ── */
#diagnose { background: var(--rice); }

.diagnosis-layout {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2rem;
}

/* Input panel */
.input-panel {
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:3px; overflow:hidden;
}
.panel-header {
  background:var(--parchment);
  padding:1rem 1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--border);
}
.panel-title {
  font-size:0.6rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink2);
}
.panel-badge {
  font-size:0.58rem; letter-spacing:0.1em;
  color:var(--muted); background:var(--rice);
  border:1px solid var(--border2);
  padding:0.2rem 0.6rem; border-radius:2px;
}
.panel-body { padding:0 1.5rem; }
.panel-footer {
  padding:1.2rem 1.5rem;
  border-top:1px solid var(--border2);
  display:flex; gap:0.8rem; flex-wrap:wrap;
}

/* Electrode rows */
.elec-row {
  border-bottom:1px solid var(--border2);
  padding:0.8rem 0;
  display:grid;
  grid-template-columns:90px 1fr;
  gap:1rem; align-items:center;
}
.elec-row:last-child { border-bottom:none; }

.elec-tag {
  background:var(--parchment);
  border:1px solid var(--border2);
  border-radius:2px; padding:0.4rem 0.6rem;
  text-align:center;
}
.elec-tag-code {
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem; letter-spacing:0.1em;
  color:var(--signal); font-weight:600; display:block;
}
.elec-tag-zh {
  font-family:'Noto Serif SC', serif;
  font-size:0.68rem; color:var(--gold); display:block;
  margin-top:1px;
}

.elec-bands {
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
}
.band-cell { display:flex; flex-direction:column; gap:3px; }
.band-cell-label {
  font-size:0.5rem; letter-spacing:0.12em;
  color:var(--muted); text-align:center; text-transform:uppercase;
}
.band-cell-input {
  width:100%; padding:0.35rem 0.3rem;
  background:var(--rice); border:1px solid var(--border2);
  border-radius:1px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6rem; color:var(--ink);
  text-align:center; transition:border-color 0.15s;
}
.band-cell-input:focus {
  outline:none; border-color:var(--signal);
  background:var(--cream);
}

/* Sample buttons */
.sample-btn {
  background:none; border:1px solid var(--border);
  padding:0.5rem 1rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6rem; letter-spacing:0.08em;
  color:var(--ink3); cursor:pointer;
  border-radius:2px; transition:all 0.2s;
}
.sample-btn:hover { border-color:var(--signal); color:var(--signal); }
.sample-btn.gold-hover:hover { border-color:var(--gold); color:var(--gold); }

.submit-area { padding:0 1.5rem 1.5rem; margin-top:0; }

/* ── RESULT PANEL ── */
.result-panel { display:flex; flex-direction:column; gap:1rem; }

.result-main {
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:3px;
  padding:2rem; min-height:400px;
  display:flex; flex-direction:column; justify-content:center;
}

/* Empty state */
.result-empty { text-align:center; opacity:0.5; }
.result-empty-icon { font-size:3rem; margin-bottom:1rem; }
.result-empty-text {
  font-family:'Playfair Display', serif;
  font-size:1.2rem; font-style:italic; color:var(--muted);
}
.result-empty-zh {
  font-family:'Noto Serif SC', serif;
  font-size:0.85rem; color:var(--muted); margin-top:0.3rem;
}

/* Filled state */
.result-filled { display:none; animation:fadeIn 0.5s ease; }
.result-filled.visible { display:block; }

.result-verdict { margin-bottom:1.5rem; }
.verdict-en {
  font-family:'Playfair Display', serif;
  font-size:3.2rem; font-style:italic;
  color:var(--ink); line-height:1;
}

/* Index track */
.index-track {
  height:6px; border-radius:3px;
  background: linear-gradient(90deg,
    var(--green-muted) 0%, #8a7d1c 40%, var(--gold) 60%, var(--red-muted) 100%);
  position:relative; margin-bottom:0.5rem;
}
.index-thumb {
  width:14px; height:14px;
  background:var(--ink); border-radius:50%;
  border:2px solid var(--cream);
  position:absolute; top:50%; transform:translate(-50%,-50%);
  transition:left 1s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 2px 8px rgba(26,20,16,0.3);
}
.index-labels {
  display:flex; justify-content:space-between;
  font-size:0.58rem; letter-spacing:0.08em;
  color:var(--muted); margin-bottom:1rem;
}

/* Grade chip */
.grade-chip {
  display:inline-block;
  padding:0.3rem 0.8rem;
  font-size:0.6rem; letter-spacing:0.15em;
  text-transform:uppercase; border-radius:2px;
  margin-bottom:1.5rem;
}
.grade-healthy  { background:rgba(45,107,74,0.12);  color:var(--green-muted); border:1px solid rgba(45,107,74,0.25); }
.grade-borderline { background:rgba(184,134,11,0.1); color:var(--gold);         border:1px solid rgba(184,134,11,0.25); }
.grade-mild     { background:rgba(139,90,43,0.1);   color:#8b5a2b;             border:1px solid rgba(139,90,43,0.25); }
.grade-severe   { background:rgba(139,58,58,0.12);  color:var(--red-muted);    border:1px solid rgba(139,58,58,0.25); }

.result-sub-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.result-sub {
  background:var(--rice); border:1px solid var(--border2);
  padding:1rem; border-radius:2px;
}
.sub-label {
  font-size:0.55rem; letter-spacing:0.18em;
  color:var(--muted); text-transform:uppercase; margin-bottom:0.4rem;
}
.sub-val { font-size:1.6rem; color:var(--ink); font-family:'Playfair Display',serif; }
.sub-val-detail { font-size:0.85rem; color:var(--ink3); margin-top:0.3rem; }

/* Per-electrode mini grid */
.elec-mini-grid {
  display:grid; grid-template-columns:repeat(6,1fr); gap:4px;
}
.elec-mini {
  background:var(--rice); border:1px solid var(--border2);
  padding:0.5rem 0.3rem; border-radius:2px; text-align:center;
}
.elec-mini-code {
  font-family:'IBM Plex Mono', monospace;
  font-size:0.55rem; color:var(--signal); letter-spacing:0.08em;
}
.elec-mini-zh {
  font-family:'Noto Serif SC', serif;
  font-size:0.6rem; color:var(--gold); margin:2px 0;
}
.elec-mini-val {
  font-family:'IBM Plex Mono', monospace;
  font-size:0.65rem; font-weight:500;
}

/* Recommendation box */
.reco-box {
  background:var(--cream);
  border:1px solid var(--border);
  border-left:3px solid var(--signal);
  border-radius:2px; padding:1.5rem;
}
.reco-label {
  font-size:0.58rem; letter-spacing:0.2em;
  color:var(--signal); text-transform:uppercase; margin-bottom:0.8rem;
}
.reco-en {
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem; line-height:1.8; color:var(--ink3);
}

/* Treatment strip */
.treatment-strip {
  margin-top:1rem; padding:0.8rem 1rem;
  background:rgba(184,134,11,0.06);
  border:1px solid rgba(184,134,11,0.18);
  border-radius:2px; display:none;
}
.treatment-strip.show { display:block; }
.treatment-label {
  font-size:0.55rem; letter-spacing:0.18em;
  color:var(--gold); text-transform:uppercase; margin-bottom:0.4rem;
}
.treatment-val {
  font-size:0.78rem; color:var(--ink3); line-height:1.7;
  font-family:'Noto Sans SC', sans-serif;
}

@media(max-width:900px) {
  .diagnosis-layout { grid-template-columns:1fr; }
  .elec-mini-grid { grid-template-columns:repeat(3,1fr); }
}