/* ============================================================
   sqli.css — SQL Injection Sandbox (didattico)
   Login vulnerabile, query composta dal vivo, difesa.
   Prefisso .si-  ·  Usa base.css + lab.css.
   ============================================================ */

.si-sec { position: relative; z-index: 2; }
.si-layout { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1.25rem; }
@media (max-width: 900px) { .si-layout { grid-template-columns: 1fr; } }

/* ---------- Finto login ---------- */
.si-login-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.2rem; }
.si-login-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #3fae6b; }
.si-login-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.si-formrow { margin-bottom: 1rem; }
.si-formrow label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.4rem; }
.si-input {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  color: var(--ink); font-family: var(--font-mono); font-size: 0.95rem; padding: 0.65rem 0.8rem; outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.si-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.si-login-btn { width: 100%; justify-content: center; margin-top: 0.4rem; }

.si-mode { display: flex; align-items: center; gap: 0.7rem; margin: 1.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.si-mode .control-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); }

.si-banner { margin-top: 1.1rem; padding: 0.85rem 1rem; border-radius: 10px; font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.5; display: none; }
.si-banner.show { display: block; }
.si-banner.win { background: color-mix(in srgb, #e0533d 14%, transparent); border: 1px solid color-mix(in srgb, #e0533d 50%, transparent); color: #c0392b; }
.si-banner.ok { background: color-mix(in srgb, #3fae6b 14%, transparent); border: 1px solid color-mix(in srgb, #3fae6b 50%, transparent); color: #2e8c55; }
.si-banner.deny { background: var(--bg-sunk); border: 1px solid var(--line); color: var(--ink-soft); }
.si-banner b { font-weight: 700; }

/* ---------- Pannello query / risultati ---------- */
.si-qlabel { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; display: block; }
.si-query {
  font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.7; word-break: break-word;
  padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-sunk); color: var(--ink-soft);
}
.si-kw { color: var(--accent); font-weight: 600; }
.si-str { color: #2e8c55; }
.si-inj { color: #b9711d; font-weight: 600; background: color-mix(in srgb, #d9772b 14%, transparent); border-radius: 3px; padding: 0 1px; }
[data-theme="dark"] .si-inj { color: #e6a44e; }
.si-danger { color: #fff; background: #e0533d; border-radius: 3px; padding: 0 2px; font-weight: 700; }

.si-result-title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin: 1.4rem 0 0.6rem; }
.si-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table.si-table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 0.84rem; }
.si-table th, .si-table td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.si-table th { background: var(--bg-sunk); color: var(--ink-soft); font-weight: 600; }
.si-table td.leak { color: #c0392b; font-weight: 600; }
.si-empty { padding: 0.9rem 1rem; font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink-faint); }

/* ---------- Sfide ---------- */
.si-challenges { margin-top: 1.25rem; }
.si-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.si-chip {
  font-family: var(--font-mono); font-size: 0.78rem; padding: 0.4rem 0.8rem; border-radius: 100px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.si-chip:hover { border-color: #e0533d; color: #c0392b; }
.si-hint { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; margin-top: 1rem; min-height: 1.4rem; }
.si-hint b { color: var(--ink); }

/* ---------- Difesa ---------- */
.si-defense { margin-top: 1.25rem; }
.si-defense h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 3.5vw, 2rem); letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.si-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1rem; }
@media (max-width: 720px) { .si-cols { grid-template-columns: 1fr; } }
.si-defcard { border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem; background: var(--bg); }
.si-defcard.bad { border-color: color-mix(in srgb, #e0533d 40%, var(--line)); }
.si-defcard.good { border-color: color-mix(in srgb, #3fae6b 40%, var(--line)); }
.si-defcard h3 { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.7rem; }
.si-defcard.bad h3 { color: #c0392b; }
.si-defcard.good h3 { color: #2e8c55; }
.si-defcard pre { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.si-defcard .si-kw { color: var(--accent); }
.si-note { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; margin-top: 1.1rem; padding: 0.9rem 1.1rem; border-left: 3px solid #3fae6b; background: color-mix(in srgb, #3fae6b 10%, transparent); border-radius: 0 8px 8px 0; }
.si-note b { color: var(--ink); }
.si-loading { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-faint); }