:root { --bg: #0b1020; --card: #11192e; --text: #e6ecff; --muted: #98a3c7; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: radial-gradient(1200px at 70% 10%, #121a33, #0b1020); color: var(--text); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu; }


.fiv-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.fiv-card { width: 100%; max-width: 820px; background: color-mix(in hsl, var(--card) 92%, transparent); border: 1px solid #1f2a4a; border-radius: 20px; padding: 32px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.fiv-title {
  font-size: clamp(28px, 4vw, 48px);
  margin: 0 0 8px;
  letter-spacing: .2px;
  color: #f8faff;                 /* bianco quasi pieno, leggermente caldo */
  text-shadow: 0 1px 4px rgba(0,0,0,0.6); /* piccolo alone per contrasto sullo sfondo */
  font-weight: 600;
}

.fiv-sub { color: var(--muted); margin: 0 0 20px; }


#fiv-form { display: flex; gap: 12px; }
.fiv-input { flex: 1; padding: 16px 18px; border-radius: 14px; border: 1px solid #2a355c; background: #0f1730; color: var(--text); font-size: 16px; outline: none; }
.fiv-input::placeholder { color: #7f8ab1; }
.fiv-btn { padding: 14px 18px; border-radius: 14px; border: 1px solid #3b4a7c; background: #24335f; color: #fff; font-weight: 600; cursor: pointer; }
.fiv-btn:disabled { opacity: .6; cursor: not-allowed; }


.fiv-status { margin-top: 14px; color: #c7d2ff; min-height: 22px; }
.fiv-output { margin-top: 14px; background: #091126; border: 1px solid #233266; padding: 16px; border-radius: 12px; color: #d5e0ff; max-height: 340px; overflow: auto; }


.fiv-footer { position: fixed; bottom: 10px; left: 0; right: 0; text-align: center; color: #7a86b4; font-size: 13px; }