* { box-sizing: border-box; }

body {
  margin: 0;
  font-size: 14px; /* 👈 font base ridotto */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: #0b1020;
  color: #eef2ff;
}

.container {
  margin: 32px auto;
  padding: 0 16px;
}

h1 {
  font-size: 26px; /* 👈 più piccolo */
  margin-bottom: 16px;
}

h2 {
  font-size: 18px; /* 👈 aggiunto per ridurre i sottotitoli */
}

.page-title {
  text-align: right;
}

.card {
  background: #111936;
  border: 1px solid #203057;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 10px 25px rgba(2,6,23,.35);
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px; /* leggermente ridotto */
  font-size: 14px;
}

input {
  width: 100%;
  padding: 10px 12px; /* 👈 più compatto */
  border-radius: 12px;
  border: 1px solid #203057;
  background: #0e1530;
  color: #e5e7eb;
  font-size: 14px;
  outline: none;
}

button {
  margin-top: 8px;
  padding: 10px 14px; /* 👈 più compatto */
  border: 0;
  border-radius: 12px;
  background: #4f46e5;
  color: white;
  font-size: 14px; /* 👈 più piccolo */
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease;
}

button:hover {
  transform: translateY(-1px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px 8px; /* 👈 più compatto */
  border-bottom: 1px solid #203057;
  font-size: 14px;
}

th {
  text-align: left;
  opacity: 0.8;
  font-weight: 600;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal-content {
  background: #0f1733;
  border: 1px solid #203057;
  border-radius: 16px;
  padding: 16px;
  max-width: 760px;
  width: 100%;
  box-shadow: 0 10px 25px rgba(2,6,23,.45);
  font-size: 14px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.modal-body {
  max-height: 60vh;
  overflow: auto;
}

.modal-table {
  width: 100%;
  border-collapse: collapse;
}

.modal-table th, .modal-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #203057;
  font-size: 13px; /* 👈 un filo più piccolo nelle modali */
}

.highlight {
  background: #000000;
}

.subtable {
  margin: 8px 0;
  padding: 8px;
  background: #0b132b;
  border-radius: 12px;
}

.subtable table {
  width: 100%;
  border-collapse: collapse;
}

.subtable th, .subtable td {
  padding: 6px 8px;
  border-bottom: 1px solid #203057;
  font-size: 13px;
}

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

.grid-2 p,
.grid-2 label,
.grid-2 input {
  margin-bottom: 8px;
}

.linkish {
  color: #60a5fa;      /* azzurrino leggibile */
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s ease;
  font-size: 14px;
}

.linkish:hover {
  color: #93c5fd;      /* più chiaro al passaggio */
  text-decoration: underline;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 50%;
  width: 26px; /* 👈 leggermente più piccolo */
  height: 26px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px; /* 👈 più piccolo */
  line-height: 1;
  padding: 0;
  transition: background .2s, transform .1s;
}

.toggle-btn:hover {
  background: #334155;
  transform: scale(1.05);
}

.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 16px;
}