/* Base comune a tutte le pagine, dallo stile dei mockup approvati. Blu Lufthansa Group #05164D. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-style: normal; font-display: swap; src: url(pjs-latin.woff2) format("woff2"); }
:root {
  --brand: #05164d;
  --brand-2: #0d2a80;
  --brand-soft: #e8ecf6;
  --panel: #f4f6fa;
  --focus: #1f5bd8;
  --dark: #05164d;
  --muted: #4f5a74;
  --ok: #17803d;
  --ok-bg: #eef8f1;
  --error: #b01411;
  --error-bg: #fdf5f5;
  --yellow: #ffad00;
  --margin: 84px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --font: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: var(--dark); font: 500 16px/1.5 var(--font); word-spacing: .08em; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; word-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

header { background: var(--brand); height: 96px; display: flex; align-items: center; gap: 16px; padding: 0 var(--margin); color: #fff; }
header img { display: block; width: 240px; height: auto; }
.role { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.role span, .role button { padding: 6px 14px; background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 99999px; font-size: 14px; font-weight: 600; }
.role button { transition: background .2s var(--ease); }
.live-dot { display: flex; align-items: center; gap: 8px; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e0263c; }

h1 { margin: 0 0 6px; font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }

.field-input { display: block; width: 100%; height: 56px; padding: 0 20px; background: #fff; font-size: 16px; border: 0; border-radius: 16px; box-shadow: 0 2px 12px rgba(5, 22, 77, .1); transition: box-shadow .2s var(--ease); }
.field-input:focus { outline: 0; box-shadow: 0 0 0 2px var(--brand), 0 2px 12px rgba(5, 22, 77, .1); }
.has-error .field-input { box-shadow: 0 0 0 2px var(--error), 0 2px 12px rgba(5, 22, 77, .1); }
.message { margin: 8px 0 0; padding: 8px 12px; background: var(--error-bg); color: var(--error); border-radius: 10px; font-size: 14px; font-weight: 600; }
.message.is-ok { background: var(--ok-bg); color: var(--ok); }
.message.is-info { background: var(--brand-soft); color: var(--brand); }

.btn-main { height: 56px; padding: 0 24px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border: 0; border-radius: 16px; font-size: 16px; font-weight: 700; box-shadow: 0 10px 24px rgba(5, 22, 77, .28); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.primary { background: var(--brand); color: #fff; }
.ghost { background: var(--brand-soft); color: var(--brand); }
.danger { background: var(--error-bg); color: var(--error); }

@media (hover: hover) {
  .role button:hover { background: rgba(255, 255, 255, .26); }
  .btn-main:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(5, 22, 77, .34); }
  .primary:not(:disabled):hover { background: var(--brand-2); }
  .ghost:not(:disabled):hover { background: #dbe1f0; }
  .danger:not(:disabled):hover { background: #f9e4e4; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { transition: none !important; animation: none !important; }
}
@media (max-width: 1400px) { :root { --margin: 40px; } }
@media (max-width: 1280px) { :root { --margin: 32px; } }
@media (max-width: 767px) {
  :root { --margin: 24px; }
  header { height: 72px; }
  header img { width: 200px; }
  h1 { font-size: 28px; }
}
@media (max-width: 375px) { :root { --margin: 16px; } }