/* ============ Cookie consent ============ */
  .cc {
    --cc-bg: #ffffff;
    --cc-text: #1c2430;
    --cc-muted: #5b6573;
    --cc-line: #dde1e7;
    --cc-btn: #1c2430;
    --cc-btn-text: #ffffff;
    --cc-btn-hover: #38445a;
    --cc-focus: #2f6fed;
    --cc-on: #2f6fed;

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    width: min(380px, calc(100vw - 40px));
    box-sizing: border-box;
    padding: 20px;
    background: var(--cc-bg);
    color: var(--cc-text);
    border: 1px solid var(--cc-line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(20, 28, 40, .14);
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    animation: cc-in .28s ease-out;
  }
  .cc[hidden] { display: none; }
  .cc:focus { outline: none; }

  @media (prefers-color-scheme: dark) {
    .cc {
      --cc-bg: #1a212c;
      --cc-text: #eef1f5;
      --cc-muted: #a2acba;
      --cc-line: #2d3644;
      --cc-btn: #eef1f5;
      --cc-btn-text: #1a212c;
      --cc-btn-hover: #ffffff;
      --cc-focus: #7aa5ff;
      --cc-on: #7aa5ff;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    }
  }

  @keyframes cc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .cc { animation: none; } }

  .cc h2 { margin: 0 0 6px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
  .cc p { margin: 0; color: var(--cc-muted); }
  .cc a { color: var(--cc-text); text-underline-offset: 3px; }

  .cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }

  .cc-btn {
    font: inherit;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
  }
  /* Accetta e Rifiuta: stesso identico stile = stesso peso visivo */
  .cc-btn--choice { background: var(--cc-btn); color: var(--cc-btn-text); }
  .cc-btn--choice:hover { background: var(--cc-btn-hover); }
  /* Personalizza e Salva: secondario, ma sempre un pulsante vero */
  .cc-btn--ghost { grid-column: 1 / -1; background: transparent; color: var(--cc-text); border-color: var(--cc-line); }
  .cc-btn--ghost:hover { border-color: var(--cc-muted); }
  .cc-btn:focus-visible, .cc-switch input:focus-visible + span, .cc a:focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 2px;
  }

  /* Vista preferenze */
  .cc-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--cc-line); }
  .cc-list li { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--cc-line); }
  .cc-list strong { display: block; font-weight: 600; color: var(--cc-text); }
  .cc-list small { display: block; color: var(--cc-muted); font-size: 13px; line-height: 1.4; }

  .cc-switch { position: relative; flex: none; width: 40px; height: 24px; margin-top: 2px; }
  .cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .cc-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--cc-line); transition: background-color .15s; pointer-events: none; }
  .cc-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
  .cc-switch input:checked + span { background: var(--cc-on); }
  .cc-switch input:checked + span::after { transform: translateX(16px); }
  .cc-switch input:disabled { cursor: not-allowed; }
  .cc-switch input:disabled + span { opacity: .55; }

  .cc-back { display: inline-block; margin-top: 12px; padding: 0; background: none; border: 0; font: inherit; color: var(--cc-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .cc-back:hover { color: var(--cc-text); }

  .cc-link-btn { padding: 0; background: none; border: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

  @media (max-width: 480px) {
    .cc { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  }