:root {
      --bg: #f5f7fb;
      --card: #ffffff;
      --ink: #1f2937;
      --muted: #6b7280;
      --line: #e5e7eb;
      --green: #1f8f5f;
      --blue: #2f6df6;
      --blue-soft: #eef4ff;
      --shadow: 0 10px 28px rgba(15,23,42,.07);
      --radius: 18px;
      --warn-bg: #fff5f6;
      --warn-bd: #f5c2c7;
      --warn-tx: #8a2432;
      --empty-bg: #fafbfc;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height: 1.4;
    }
    .wrap { max-width: 1380px; margin: 0 auto; padding: 28px; }
    .topbar {
      display: flex; justify-content: space-between; align-items: flex-end;
      gap: 18px; margin-bottom: 18px;
    }
    h1 { margin: 0; font-size: 34px; line-height: 1.05; }
    .sub { color: var(--muted); margin-top: 8px; font-size: 14px; }
    .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .btn, .file-label {
      background: white; border: 1px solid var(--line); border-radius: 999px;
      padding: 11px 16px; font-size: 14px; cursor: pointer; box-shadow: var(--shadow);
    }
    .file-label {
      background: linear-gradient(90deg, #1f8f5f, #3db781);
      color: white;
      border-color: transparent;
      font-weight: 800;
      padding: 14px 22px;
      font-size: 15px;
    }
    .btn:hover, .file-label:hover { border-color: #cdd5df; }
    .file-label:hover {
      filter: brightness(0.98);
      border-color: transparent;
    }
    input[type=file] { display: none; }
    .status {
      flex-basis: 100%;
      font-size: 13px;
      color: var(--muted);
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 4px 0 0 2px;
      box-shadow: none;
    }
    .error {
      display: none; margin: 14px 0 18px; padding: 10px 14px; border-radius: 12px;
      border: 1px solid var(--warn-bd); background: var(--warn-bg); color: var(--warn-tx); font-size: 13px;
    }
    .grid { display: grid; gap: 18px; }
    .card {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
      box-shadow: var(--shadow); padding: 20px;
    }
    .section-title {
      font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
      color: var(--muted); font-weight: 800; margin-bottom: 14px;
    }
    .hero { display: grid; gap: 18px; grid-template-columns: 1.08fr .92fr; }
    .objective-row {
      display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); align-items: end;
    }
    .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
    .big { font-size: 40px; font-weight: 800; line-height: 1; margin-top: 8px; }
    .progress { margin-top: 18px; height: 16px; background: #edf2f7; border-radius: 999px; overflow: hidden; }
    .progress > span {
      display: block; height: 100%; width: 0%;
      background: linear-gradient(90deg, var(--green), #3db781); border-radius: 999px;
    }
    .progress-caption {
      display: flex; justify-content: space-between; font-size: 13px;
      color: var(--muted); margin-top: 8px;
    }
    .note {
      margin-top: 12px; padding: 10px 12px; border-radius: 12px;
      background: var(--blue-soft); color: #2a4d9b; font-size: 13px;
    }
    table { width: 100%; border-collapse: collapse; }
    th, td {
      padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px;
    }
    th {
      color: var(--muted); font-size: 12px; text-transform: uppercase;
      letter-spacing: .05em; font-weight: 700;
    }
    tbody tr:last-child td { border-bottom: none; }
    .two-col { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
    .three-col { display: grid; gap: 18px; grid-template-columns: 1fr 1fr 1fr; }
    .chart svg { width: 100%; height: 270px; display: block; }
    .nuts2-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 250px;
      gap: 16px;
      align-items: stretch;
    }
    .nuts2-tiles {
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .nuts2-tile {
      border: 1px solid var(--line);
      border-left: 5px solid #98a2b3;
      border-radius: 14px;
      background: #fbfcfe;
      padding: 12px 13px;
      min-height: 82px;
    }
    .nuts2-tile.organic { border-left-color: var(--green); }
    .nuts2-tile.fairtrade { border-left-color: var(--blue); }
    .nuts2-tile .tile-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .nuts2-tile .tile-price {
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
      margin-top: 8px;
    }
    .nuts2-tile .tile-sub {
      color: var(--muted);
      font-size: 12px;
      margin-top: 6px;
    }
    .legend {
      display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 10px;
    }
    .legend span::before {
      content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 999px;
      margin-right: 8px; vertical-align: middle;
    }
    .l-bio::before { background: var(--green); }
    .l-conv::before { background: #98a2b3; }
    .l-total::before { background: var(--blue); }
    .metrics { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
    .metric {
      border: 1px solid var(--line); border-radius: 14px; background: #fbfcfe; padding: 14px;
    }
    .metric .num { font-size: 24px; font-weight: 800; margin-top: 6px; }
    .empty-state {
      background: var(--empty-bg);
      border: 1px dashed #cdd5df;
      border-radius: 18px;
      padding: 32px 22px;
      text-align: center;
      color: var(--muted);
      font-size: 15px;
    }
    .hidden { display: none !important; }
    @media (max-width: 1150px) {
      .hero, .two-col, .three-col, .metrics, .objective-row, .nuts2-layout { grid-template-columns: 1fr; }
      .nuts2-tiles { grid-template-columns: repeat(3, 1fr); }
      .topbar { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 760px) {
      .nuts2-tiles { grid-template-columns: 1fr; }
    }

    @media print {
      body { background: white; }
      .wrap { max-width: none; padding: 12mm; }
      .actions, .error, #emptyState { display: none !important; }
      .card { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
      .topbar { margin-bottom: 12px; }
      h1 { font-size: 26px; }
      .sub { font-size: 12px; }
      .grid { gap: 12px; }
      .hero, .two-col, .three-col { gap: 12px; }
      th, td { padding: 7px 8px; font-size: 11px; }
      .section-title { font-size: 10px; margin-bottom: 8px; }
      .big { font-size: 28px; }
      .metric .num { font-size: 18px; }
      .chart svg { height: 220px; }
      .nuts2-layout { grid-template-columns: 1fr !important; }
      .nuts2-tiles { grid-template-columns: 1fr 1fr 1fr !important; }
      .nuts2-tile .tile-price { font-size: 18px; }
    }


    @media print {
      .hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
      }
      .two-col {
        display: grid !important;
        grid-template-columns: 1fr !important;
      }
      .three-col {
        display: grid !important;
        grid-template-columns: 1fr !important;
      }
      .objective-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: end !important;
      }
      .metrics {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
      }
      .card {
        border-radius: 18px !important;
      }
      .progress {
        display: block !important;
        height: 16px !important;
      }
      .progress > span {
        display: block !important;
        height: 100% !important;
      }
      .note {
        border-radius: 14px !important;
      }
    }