:root {
      --italo-red: #b3120b;
      --italo-red-dark: #971008;
      --ink: #101010;
      --muted: #606060;
      --line: #d9d9d9;
      --soft-line: #ececec;
      --soft: #f5f5f5;
      --white: #fff;
      --shadow: 0 8px 25px rgba(0, 0, 0, .12);
      --radius: 5px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--white);
      font-family: "Work Sans", "Segoe UI", Arial, sans-serif;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }
    button { cursor: pointer; }

    .topbar {
      min-height: 108px;
      background: var(--italo-red);
      color: #fff;
      padding: 0 4.2vw;
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .brand {
      flex: 0 0 250px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-size: 46px;
      line-height: .8;
      letter-spacing: -3px;
      font-weight: 300;
    }

    .brand-mark {
      width: 54px;
      height: 35px;
      position: relative;
      display: inline-block;
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      background: #fff;
      border-radius: 100% 8% 100% 8%;
      transform: rotate(-17deg);
    }

    .brand-mark::before { width: 49px; height: 11px; top: 12px; left: 1px; }
    .brand-mark::after { width: 25px; height: 9px; top: 3px; left: 25px; transform: rotate(26deg); }

    .brand span { letter-spacing: -2px; }

    .nav-area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 15px; }
    .utility-nav, .main-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(15px, 2.2vw, 34px); }
    .utility-nav a, .main-nav a {
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      opacity: .98;
    }
    .utility-nav a::before { content: ""; display: inline-block; width: 17px; height: 17px; border: 1px solid #fff; border-radius: 50%; vertical-align: -4px; margin-right: 7px; opacity: .9; }
    .main-nav a::after { content: "⌄"; margin-left: 7px; font-size: 16px; }
    .main-nav a:last-child::after { content: ""; }

    .login-btn {
      border: 1px solid rgba(255,255,255,.8);
      color: #fff;
      background: transparent;
      border-radius: 4px;
      padding: 9px 17px;
      font-weight: 600;
      font-size: 13px;
      white-space: nowrap;
    }
    .login-btn:hover { background: #fff; color: var(--italo-red); }

    .page-heading { padding: 24px 4.2vw 42px; }
    .breadcrumb { font-size: 14px; color: var(--italo-red-dark); font-weight: 650; margin-bottom: 27px; }
    .breadcrumb span { color: var(--ink); font-weight: 500; }
    h1 { margin: 0 0 9px; font-size: clamp(31px, 3.1vw, 47px); line-height: 1.04; letter-spacing: -1.2px; }
    .lead { margin: 0; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.35; }

    .stepper {
      height: 51px;
      background: #f3f3f3;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      color: #444;
      font-size: 15px;
    }
    .step { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
    .step:not(:last-child)::after { content: ""; width: 31px; height: 1px; background: #a6a6a6; display: block; margin-left: 15px; }
    .step.active { color: var(--italo-red-dark); font-weight: 700; }

    main { max-width: 980px; margin: 40px auto 70px; padding: 0 24px; }
    .selection-card {
      border-radius: 8px;
      background: #fff;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1fr 1fr 2fr auto;
      gap: 30px;
      align-items: center;
      padding: 22px 27px;
      margin-bottom: 50px;
    }
    .selection-label { display: block; font-size: 12px; color: #555; margin-bottom: 5px; }
    .selection-value { display: block; font-size: 16px; font-weight: 550; line-height: 1.25; }
    .edit-btn { color: var(--italo-red-dark); background: transparent; border: 0; font-weight: 700; padding: 7px 0; white-space: nowrap; }
    .edit-btn::after { content: "↗"; display: inline-block; margin-left: 8px; font-size: 17px; transform: rotate(-45deg); }

    .form-heading { margin-bottom: 31px; }
    h2 { margin: 0 0 8px; font-size: clamp(26px, 2.5vw, 37px); line-height: 1.08; letter-spacing: -.7px; }
    .required-note { margin: 0; font-size: 13px; }
    .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 29px 24px; }
    .field { min-width: 0; }
    .field label, .field legend { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; }
    .field label:has(+ .required)::after { content: ""; }
    .field input, .field select {
      width: 100%;
      min-height: 54px;
      border: 1px solid #a9a9a9;
      border-radius: var(--radius);
      padding: 13px 14px;
      color: #333;
      background: #fff;
      outline: none;
    }
    .field input::placeholder { color: #696969; opacity: 1; }
    .field input:focus, .field select:focus { border-color: var(--italo-red); box-shadow: 0 0 0 3px rgba(179,18,11,.11); }
    .field select { appearance: auto; }
    .field input[type="number"] { appearance: textfield; }
    .field input[type="number"]::-webkit-inner-spin-button { appearance: none; }

    .date-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .date-group input { min-width: 0; }
    .helper { font-size: 12px; color: #555; margin-top: 6px; min-height: 17px; }
    .helper button { border: 0; background: none; padding: 0; color: #555; text-decoration: underline; }
    .helper button::after { content: "?"; display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1px solid #777; border-radius: 50%; text-decoration: none; margin-left: 5px; font-size: 10px; }
    .tooltip { display: none; position: absolute; z-index: 2; background: #1d1d1d; color: #fff; padding: 10px 12px; border-radius: 4px; width: 230px; font-size: 12px; line-height: 1.35; margin-top: 6px; }
    .tooltip.is-open { display: block; }

    .amount-wrap { position: relative; }
    .amount-wrap::before { content: "€"; position: absolute; left: 14px; top: 16px; color: #444; z-index: 1; }
    .amount-wrap input { padding-left: 30px; }

    .attachments { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--soft-line); }
    .attachments h3 { margin: 0 0 10px; font-size: 22px; }
    .attachments p { margin: 0 0 18px; font-size: 15px; line-height: 1.4; }
    .file-row { display: flex; align-items: flex-start; gap: 15px; flex-wrap: wrap; }
    .file-label, .primary-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 23px; border-radius: 4px; font-size: 15px; font-weight: 750; text-transform: uppercase; }
    .file-label { color: #fff; background: var(--italo-red); cursor: pointer; }
    .file-label:hover, .primary-btn:hover { background: var(--italo-red-dark); }
    .file-label input { display: none; }
    .file-help { flex-basis: 100%; font-size: 12px; color: #383838; margin-top: -9px; }
    .file-list { flex-basis: 100%; display: grid; gap: 8px; }
    .file-pill { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--soft-line); padding: 9px 12px; font-size: 13px; border-radius: 4px; background: #fafafa; }
    .file-pill button { color: var(--italo-red-dark); border: 0; background: none; font-weight: 700; }

    .actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 39px; }
    .secondary-btn { background: #fff; border: 1px solid #777; color: #222; border-radius: 4px; min-height: 50px; padding: 0 21px; font-weight: 650; }
    .primary-btn { border: 0; color: #fff; background: var(--italo-red); text-transform: none; }
    .primary-btn::after { content: "→"; font-size: 21px; margin-left: 13px; line-height: 0; }

    .toast { position: fixed; right: 22px; bottom: 22px; width: min(390px, calc(100vw - 44px)); padding: 16px 18px; border-left: 5px solid var(--italo-red); background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.2); border-radius: 5px; transform: translateY(140%); transition: transform .24s ease; z-index: 10; font-size: 14px; line-height: 1.4; }
    .toast.is-visible { transform: translateY(0); }

    .edit-panel { display: none; background: #fff8f7; border: 1px solid #e7b9b5; border-radius: 5px; padding: 16px; margin: -33px 0 40px; }
    .edit-panel.is-open { display: block; }
    .edit-panel strong { display: block; margin-bottom: 8px; }
    .edit-panel button { border: 1px solid #c5857f; border-radius: 4px; background: #fff; margin: 5px 8px 0 0; padding: 8px 11px; }
    .edit-panel button:hover { background: var(--italo-red); color: #fff; }

    @media (max-width: 1050px) {
      .topbar { padding: 18px 4vw; flex-wrap: wrap; }
      .brand { flex-basis: 180px; font-size: 36px; }
      .nav-area { min-width: calc(100% - 210px); }
      .utility-nav, .main-nav { gap: 14px; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
    }
    @media (max-width: 760px) {
      .topbar { min-height: 0; gap: 14px; }
      .brand { flex-basis: auto; font-size: 34px; }
      .nav-area { flex-basis: 100%; min-width: 100%; }
      .utility-nav a, .main-nav a { font-size: 12px; }
      .page-heading { padding: 22px 22px 30px; }
      .breadcrumb { line-height: 1.5; }
      .stepper { justify-content: flex-start; overflow-x: auto; padding: 0 22px; gap: 17px; }
      .step { font-size: 13px; gap: 8px; }
      .step:not(:last-child)::after { width: 14px; margin-left: 8px; }
      main { margin-top: 26px; padding: 0 18px; }
      .selection-card { grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 38px; padding: 18px; }
      .selection-card > :nth-child(3) { grid-column: 1 / -1; }
      .selection-card > :last-child { grid-column: 2; grid-row: 1; justify-self: end; }
      .form-grid { grid-template-columns: 1fr; gap: 21px; }
      .attachments { margin-top: 34px; }
      .actions { justify-content: stretch; flex-direction: column-reverse; align-items: stretch; }
      .actions button { width: 100%; }
    }