:root {
      --blue: #2f6fb2;
      --blue-dark: #255a8f;
      --gray-bg: #f4f6f8;
      --border: #dcdfe3;
      --text: #2b2b2b;
      --success: #3bb54a;
      --warning: #f5a623;
    }

    * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }

    body {
      margin: 0;
      background: #000; /* come nello screen mobile */
    }

    /* contenitore centrale */
    .screen {
      max-width: 900px;
      margin: 40px auto;
      background: #fff;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,.25);
    }

    /* header blu */
    .header {
      background: var(--blue);
      color: #fff;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header .title {
      font-weight: bold;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .header .icons {
      display: flex;
      gap: 12px;
      opacity: .9;
    }

    .content {
      padding: 16px;
      background: var(--gray-bg);
    }

    .row {
      display: grid;
      grid-template-columns: 1fr 200px 200px;
      gap: 12px;
      margin-bottom: 12px;
    }

    label {
      font-size: 12px;
      color: #555;
      margin-bottom: 4px;
      display: block;
    }

    input, select {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 3px;
      font-size: 13px;
      background: #fff;
    }

    /* tabella */
    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      margin-top: 12px;
    }

    thead {
      background: #e9eef3;
    }

    th, td {
      border: 1px solid var(--border);
      padding: 8px;
      font-size: 13px;
      text-align: left;
      vertical-align: middle;
    }

    th {
      font-weight: bold;
      color: #444;
    }

    .qty {
      text-align: right;
      font-weight: bold;
    }

    .unit {
      width: 70px;
    }

    .utilizzo {
      width: 60px;
      text-align: center;
    }

    .btn-util {
      width: 26px;
      height: 26px;
      border-radius: 3px;
      border: none;
      background: #ccc;
      color: #fff;
      cursor: pointer;
    }

    .btn-util.active {
      background: var(--success);
    }

    .lotto {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--warning);
    }

    /* footer */
    .footer {
      padding: 16px;
      background: #fff;
      text-align: center;
    }

    .btn-primary {
      background: linear-gradient(#3b82c4, var(--blue-dark));
      border: none;
      color: #fff;
      padding: 10px 22px;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
    }

    /* top actions (Annulla / Salva) */
    .top-actions {
      max-width: 900px;
      margin: 0 auto 10px;
      display: flex;
      justify-content: space-between;
      color: #fff;
      padding: 0 10px;
      font-size: 16px;
    }