/* Analyzer page only */
.wrap { max-width: 1000px; margin: 0 auto; }

.form-card {
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  border-radius: 1rem;
}

textarea{
  width: 100%;
  min-height: 160px;
  resize: vertical;
  border-radius: .8rem;
  padding: .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #f7fafc;
}

.actions{ display:flex; gap:.75rem; align-items:center; margin-top:.75rem; }
.analyze{
  padding:.85rem 1rem; border-radius:.8rem; background:#ffcc99;
  color:#1a1a1a; font-weight:800; border:none; cursor:pointer;
}
.status{ min-height:1.4em; opacity:.9 }

/* two-panel layout */
.result-card{
  display:grid; grid-template-columns:1fr 220px; gap:1.2rem; align-items:start;
  padding:1.2rem; border-radius:1rem; border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20); margin-top:1rem;
}
@media (max-width: 760px){ .result-card{ grid-template-columns:1fr; } }

/* Always hide things marked hidden (some browsers/extensions can be odd) */
#resultPanel[hidden]{ display:none !important; }

/* circular gauge */
.gauge{ --val:0; --bar:#2ecc71; width:180px; height:180px; border-radius:50%;
  background: conic-gradient(var(--bar) calc(var(--val)*1%), rgba(255,255,255,.10) 0);
  position:relative; margin:auto;
  box-shadow: inset 0 0 24px rgba(0,0,0,.55), 0 0 16px rgba(0,0,0,.25);
}
.gauge::before{ content:""; position:absolute; inset:12px; background:rgba(0,0,0,.65); border-radius:50% }
.gauge .val{ position:absolute; inset:auto 0 44% 0; text-align:center; font-weight:900; font-size:2.1rem }
.gauge small{ position:absolute; left:0; right:0; bottom:14px; text-align:center; opacity:.85; letter-spacing:.06em; font-size:.8rem }

/* analyzer background only on this page */
body.analyzer-bg{
  background:#000 url("/images/analyze.jpg") center center / cover no-repeat fixed;
}