:root{
  --bg:#eef3f8;
  --surface:rgba(255,255,255,0.84);
  --surface-strong:rgba(255,255,255,0.96);
  --stroke:rgba(15,23,42,0.08);
  --stroke-strong:rgba(15,23,42,0.14);

  --text:#0f172a;
  --muted:#475569;
  --muted-2:#64748b;

  --green:#22c55e;
  --green-2:#16a34a;

  --shadow-lg:0 20px 50px rgba(15,23,42,0.10);
  --shadow-md:0 10px 24px rgba(15,23,42,0.08);

  --maxw:980px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,0.10), transparent 30%),
    radial-gradient(circle at top right, rgba(59,130,246,0.08), transparent 28%),
    linear-gradient(180deg,#f7fafc 0%,#edf3f8 52%,#e7edf5 100%);
  min-height:100vh;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:28px 16px 90px;
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand img{
  width:54px;
  height:54px;
  border-radius:14px;
  box-shadow:var(--shadow-md);
}

.brand h1{
  margin:0 0 2px;
  font-size:clamp(28px,4vw,38px);
  line-height:1.02;
  letter-spacing:-0.03em;
}

.sub{
  color:var(--muted);
  font-size:14px;
}

/* ===== BADGE ===== */

.mode-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(15,23,42,0.05);
  border:1px solid rgba(15,23,42,0.08);
  color:#334155;
  font-size:13px;
  font-weight:800;
}

.mode-badge.is-tech{
  background:rgba(34,197,94,0.14);
  border-color:rgba(34,197,94,0.20);
  color:#166534;
}

/* 🔥 NUOVO PRO */
.mode-badge.is-pro{
  background:rgba(124,58,237,0.14);
  border-color:rgba(124,58,237,0.20);
  color:#6d28d9;
}

/* ===== CARD ===== */

.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-strong));
  border:1px solid var(--stroke);
  border-radius:28px;
  box-shadow:var(--shadow-lg);
  padding:18px;
  backdrop-filter:blur(10px);
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.mt{margin-top:12px;}

label{
  display:block;
  margin:0 0 8px;
  font-size:13px;
  font-weight:800;
  color:#334155;
}

input,select,button{font:inherit;}

input,select{
  width:100%;
  min-height:52px;
  border:1px solid var(--stroke-strong);
  border-radius:16px;
  padding:0 14px;
  background:#fff;
  color:var(--text);
  outline:none;
}

input:focus,select:focus{
  border-color:rgba(34,197,94,0.45);
  box-shadow:0 0 0 4px rgba(34,197,94,0.10);
}

input::placeholder{color:#94a3b8;}
#code{font-size:20px;font-weight:800;}
.code-wrap{position:relative;}

/* ===== BUTTON ===== */

.btn-search{
  width:100%;
  margin-top:16px;
  min-height:54px;
  border:0;
  border-radius:18px;
  padding:0 18px;
  font-size:17px;
  font-weight:800;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(180deg,var(--green),var(--green-2));
  box-shadow:0 14px 30px rgba(34,197,94,0.22);
}

/* ===== RESULT ===== */

.result,#result{margin-top:16px;}

.result-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.90),rgba(255,255,255,0.97));
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow-md);
}

.result-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.eyebrow{
  margin-bottom:6px;
  font-size:12px;
  font-weight:800;
  color:var(--muted-2);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* ===== PRO BLOCKS ===== */

.tc-block{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid #e5e7eb;
  background:#ffffff;
}

.tc-block-title{
  font-size:13px;
  font-weight:800;
  color:#334155;
  margin-bottom:8px;
}

.tc-p{
  margin:0;
  color:#1f2937;
  line-height:1.55;
}

.tc-list{
  margin:0;
  padding-left:18px;
  color:#1f2937;
}

.tc-list li{
  margin:6px 0;
}

/* ===== DIAGNOSI ===== */

.diagnosis-box,
.path-box{
  margin-bottom:14px;
  padding:14px 15px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(34,197,94,0.08),rgba(255,255,255,0.96));
  border:1px solid rgba(34,197,94,0.16);
}

.stop-box{
  margin-bottom:14px;
  padding:14px 15px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(239,68,68,0.08),rgba(255,255,255,0.97));
  border:1px solid rgba(239,68,68,0.16);
}

/* ===== BADGE SEVERITY ===== */

.severity-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.sev-high{
  color:#b91c1c;
  background:rgba(239,68,68,0.12);
}
.sev-medium{
  color:#b45309;
  background:rgba(245,158,11,0.14);
}
.sev-low{
  color:#166534;
  background:rgba(34,197,94,0.12);
}

/* ===== MOBILE ===== */

@media (max-width: 860px){
  .grid{grid-template-columns:1fr;}
}

@media (max-width: 560px){
  .btn-search{font-size:15px;}
}
/* =========================
   AUTOCOMPLETE
========================= */

.code-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin-top: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  z-index: 20;
  display: none;
}

.suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.suggestion-item:hover {
  background: #f0fdf4;
}