*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f0f4f8;
      min-height: 100vh;
      padding: 20px 16px 40px;
      line-height: 1.6;
      color: #1a1a1a;
    }
    .container { width: 100%; max-width: 600px; margin: 0 auto; }
    .card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 10px 40px rgba(0,0,0,.10);
      padding: 32px;
      margin-bottom: 20px;
    }
    .header { text-align: center; margin-bottom: 28px; }
    .header-title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
    .header-sub { font-size: 14px; color: #666; }

    /* Loading / error / used states */
    .state-box { text-align: center; padding: 40px 20px; }
    .state-icon { font-size: 40px; margin-bottom: 12px; }
    .state-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
    .state-msg { font-size: 14px; color: #666; }

    /* Summary */
    .summary-section { margin-bottom: 24px; }
    .summary-title { font-size: 13px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
    .summary-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f0f4f8; font-size: 14px; }
    .summary-row:last-child { border-bottom: none; }
    .summary-label { color: #888; flex-shrink: 0; width: 140px; }
    .summary-value { font-weight: 500; }
    .fare-note { font-size: 12px; color: #e07000; margin-top: 4px; }

    /* Action buttons */
    .action-section { margin-bottom: 20px; }
    .action-title { font-size: 13px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
    .action-buttons { display: flex; flex-direction: column; gap: 10px; }
    .action-btn {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px;
      border: 2px solid #e1e5e9;
      border-radius: 12px;
      cursor: pointer;
      background: #fff;
      font-family: inherit;
      font-size: 15px;
      font-weight: 500;
      color: #1a1a1a;
      transition: border-color .2s, background .2s;
      text-align: left;
      width: 100%;
    }
    .action-btn:hover { border-color: #2aa6fb; background: #f7fbff; }
    .action-btn.selected { border-color: #2aa6fb; background: #e0f2fe; }
    .action-btn.selected-confirm { border-color: #16a34a; background: #dcfce7; }
    .action-btn.selected-decline { border-color: #b91c1c; background: #fee2e2; }
    .action-icon { font-size: 20px; flex-shrink: 0; }
    .action-label { flex: 1; }
    .action-desc { font-size: 12px; color: #888; margin-top: 2px; font-weight: 400; }

    /* Note textarea */
    .note-section { margin-bottom: 20px; }
    .note-label { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; display: block; }
    .note-textarea {
      width: 100%; padding: 11px 13px;
      border: 2px solid #e1e5e9; border-radius: 10px;
      font-size: 14px; font-family: inherit; color: #1a1a1a;
      resize: vertical; min-height: 80px; outline: none;
      transition: border-color .2s;
    }
    .note-textarea:focus { border-color: #2aa6fb; }
    .note-hint { font-size: 12px; color: #888; margin-top: 4px; }

    /* Submit */
    .submit-btn {
      width: 100%; padding: 14px;
      background: #2aa6fb; color: #fff;
      border: none; border-radius: 12px;
      font-size: 16px; font-weight: 700; font-family: inherit;
      cursor: pointer; transition: background .2s;
    }
    .submit-btn:hover { background: #1a96eb; }
    .submit-btn:disabled { opacity: .5; cursor: not-allowed; }

    /* Alerts */
    .alert { border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }
    .alert-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

    /* Success state */
    .success-card { text-align: center; padding: 40px 20px; }
    .success-icon { font-size: 48px; margin-bottom: 16px; }
    .success-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #166534; }
    .success-msg { font-size: 14px; color: #666; }

    .hidden { display: none !important; }
    .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 6px; }
    @keyframes spin { to { transform: rotate(360deg); } }