/* === Base === */
    :root {
      --pm-blue: #007BFF;
      --pm-text: #333;
      --pm-muted: #666;
      --pm-bg: #f9f9f9;
      --pm-card: #fff;
      --pm-border: #e6e6e6;
      --pm-radius: 12px;
      --pm-shadow: 0 2px 8px rgba(0,0,0,.06);
      --pm-gap: 12px;        /* tight vertical rhythm */
      --pm-gap-lg: 16px;
      --pm-input-h: 40px;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
      background: var(--pm-bg);
      color: var(--pm-text);
      display: grid;
      place-items: center; /* centers the container both axes */
      padding: 24px;
    }

    /* === Center Panel === */
    .panel {
      width: 100%;
      max-width: 520px;
      background: var(--pm-card);
      border-radius: var(--pm-radius);
      box-shadow: var(--pm-shadow);
      overflow: hidden;
      border: 1px solid var(--pm-border);
    }

    .panel-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--pm-border);
      background: #fff;
    }
    .panel-title {
      margin: 0;
      font-size: 22px;
      font-weight: 700;
      color: var(--pm-blue);     /* blue header text */
      letter-spacing: .2px;
    }
    .panel-body {
      padding: 20px;
    }

    /* === Form Styles (matches past forms) === */
    form.pm-form {
      display: grid;
      gap: var(--pm-gap-lg);
    }

    .field {
      display: grid;
      gap: 6px;
    }
    .field label {
      font-size: 13px;
      color: var(--pm-muted);
    }
    .input {
      height: var(--pm-input-h);
      border: 1px solid var(--pm-border);
      border-radius: 10px;
      padding: 0 12px;
      font-size: 15px;
      outline: none;
      background: #fff;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .input:focus {
      border-color: var(--pm-blue);
      box-shadow: 0 0 0 3px rgba(0,123,255,.12);
    }

    .actions {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      margin-top: 4px;
    }
    .btn {
      appearance: none;
      border: 0;
      border-radius: 999px;
      padding: 10px 16px;
      font-size: 15px;
      cursor: pointer;
      transition: transform .04s ease, box-shadow .15s ease, background .15s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,.06);
    }
    .btn:active { transform: translateY(1px); }

    .btn-primary {
      background: var(--pm-blue);
      color: #fff;
    }
    .btn-primary:hover {
      filter: brightness(1.05);
    }

    .message {
      padding: 10px 12px;
      border-radius: 10px;
      background: #ffe9e9;
      color: #a40000;
      border: 1px solid #ffd0d0;
      font-weight: 600;
      margin-bottom: var(--pm-gap-lg);
    }

    .helper {
      margin-top: 6px;
      font-size: 12px;
      color: var(--pm-muted);
    }

    /* keep spacing tight between groups */
    .stack { display: grid; gap: var(--pm-gap); }