/* ── ATP Portal — Import modal styles ───────────────────────── */

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .65);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .modal {
      background: var(--bg1);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px;
      width: 600px;
      max-width: 95vw;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
    }

    .modal-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px
    }

    .modal-sub {
      font-size: 11px;
      color: var(--text3);
      margin-bottom: 20px
    }

    .modal-section {
      font-size: 11px;
      font-weight: 600;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin: 16px 0 8px
    }

    .modal-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .modal-field {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .modal-field label {
      font-size: 11px;
      color: var(--text2)
    }

    .modal-field input,
    .modal-field select {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 7px 10px;
      color: var(--text1);
      outline: none;
      width: 100%
    }

    .modal-field input:focus {
      border-color: var(--blue)
    }

    .modal-actions {
      display: flex;
      gap: 8px;
      margin-top: 20px;
      justify-content: flex-end
    }

    .quota-target-row {
      display: grid;
      grid-template-columns: 1fr 110px;
      gap: 8px;
      align-items: center;
      margin-bottom: 6px
    }

    .quota-target-row label {
      font-size: 12px;
      color: var(--text1)
    }

    .quota-target-row input {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 10px;
      color: var(--text1);
      outline: none;
      width: 100%;
      font-size: 12px
    }

    .drop-zone {
      border: 2px dashed var(--border);
      border-radius: 10px;
      padding: 18px;
      text-align: center;
      color: var(--text3);
      cursor: pointer;
      transition: border-color .2s, color .2s;
      margin-bottom: 4px;
      font-size: 12px
    }

    .drop-zone:hover,
    .drop-zone.drag {
      border-color: var(--blue);
      color: var(--text2)
    }

    .drop-zone.done {
      border-color: var(--teal);
      color: var(--teal)
    }

    @media(max-width:1180px) {
      .metric-row {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .section-row {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:760px) {
      .metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .charts-row {
        grid-template-columns: 1fr
      }
    }