chore: move styles to css file

Author: sarahschwartz

passkey-wallet-app/index.html

@@ -12,381 +12,10 @@
       type="image/svg+xml"
       href="/favicon.svg"
     />
-    <style>
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-
-      body {
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        background: #f5f7fa;
-        min-height: 100vh;
-      }
-
-      /* PayPal Header */
-      .paypal-header {
-        background: #ffffff;
-        border-bottom: 1px solid #cbd2d9;
-        padding: 16px 24px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-
-      .paypal-logo {
-        font-size: 24px;
-        font-weight: bold;
-        color: #0070ba;
-        letter-spacing: -0.5px;
-      }
-
-      .header-right {
-        display: flex;
-        align-items: center;
-        gap: 24px;
-      }
-
-      .header-network {
-        font-size: 13px;
-        color: #6c7378;
-        padding: 6px 12px;
-        background: #f5f7fa;
-        border-radius: 16px;
-        border: 1px solid #cbd2d9;
-      }
-
-      .header-network strong {
-        color: #2c2e2f;
-        font-weight: 600;
-      }
-
-      .header-balance {
-        font-size: 14px;
-        color: #2c2e2f;
-      }
-
-      .header-balance strong {
-        color: #0070ba;
-        font-size: 18px;
-      }
-
-      /* Main Container */
-      .container {
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 24px;
-      }
-
-      /* Navigation Tabs */
-      .nav-tabs {
-        display: flex;
-        background: white;
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-        margin-bottom: 24px;
-      }
-
-      .nav-tab {
-        flex: 1;
-        padding: 16px;
-        text-align: center;
-        background: white;
-        border: none;
-        border-right: 1px solid #cbd2d9;
-        cursor: pointer;
-        font-size: 14px;
-        font-weight: 500;
-        color: #6c7378;
-        transition: all 0.2s;
-      }
-
-      .nav-tab:last-child {
-        border-right: none;
-      }
-
-      .nav-tab:hover {
-        color: #f5f7fa;
-      }
-
-      .nav-tab.active {
-        color: #0070ba !important;
-        background: #f5f7fa !important;
-        border-bottom: 3px solid #0070ba;
-      }
-
-      .nav-left {
-        display: flex;
-        gap: 12px;
-      }
-
-      .lang-label {
-        margin: auto;
-      }
-
-      /* Content Sections */
-      .tab-content {
-        display: none;
-      }
-
-      .tab-content.active {
-        display: block;
-      }
-
-      /* Card Styling */
-      .card {
-        background: white;
-        border-radius: 8px;
-        padding: 24px;
-        margin-bottom: 16px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-      }
-
-      .card-title {
-        font-size: 20px;
-        font-weight: 500;
-        color: #2c2e2f;
-        margin-bottom: 16px;
-      }
-
-      .card-subtitle {
-        font-size: 14px;
-        color: #6c7378;
-        margin-bottom: 20px;
-        line-height: 1.5;
-      }
-
-      /* Form Elements */
-      .form-group {
-        margin-bottom: 20px;
-      }
-
-      label {
-        display: block;
-        margin-bottom: 8px;
-        font-size: 14px;
-        font-weight: 500;
-        color: #2c2e2f;
-      }
-
-      input {
-        width: 100%;
-        padding: 14px 16px;
-        border: 1px solid #cbd2d9;
-        border-radius: 4px;
-        font-size: 15px;
-        color: #2c2e2f;
-        transition: border-color 0.2s;
-      }
-
-      input:focus {
-        outline: none;
-        border-color: #0070ba;
-        box-shadow: 0 0 0 2px rgba(0, 112, 186, 0.1);
-      }
-
-      /* PayPal Button Styles */
-      button {
-        width: 100%;
-        padding: 14px 24px;
-        background: #0070ba;
-        color: white;
-        border: none;
-        border-radius: 24px;
-        font-size: 15px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-
-      button:hover:not(:disabled) {
-        background: #005ea6;
-      }
-
-      button:disabled {
-        background: #cbd2d9;
-        cursor: not-allowed;
-      }
-
-      button.secondary {
-        background: white;
-        color: #0070ba;
-        border: 1px solid #cbd2d9;
-      }
-
-      button.secondary:hover:not(:disabled) {
-        background: #f5f7fa;
-        border-color: #0070ba;
-      }
-
-      button.small {
-        width: auto;
-        padding: 10px 20px;
-        font-size: 13px;
-        display: inline-block;
-        margin-top: 12px;
-      }
-
-      /* Alert Boxes */
-      .alert {
-        padding: 16px;
-        border-radius: 4px;
-        margin-bottom: 16px;
-        font-size: 14px;
-      }
-
-      .alert-success {
-        background: #e8f5e9;
-        border-left: 4px solid #4caf50;
-        color: #2e7d32;
-      }
-
-      .alert-error {
-        background: #ffebee;
-        border-left: 4px solid #f44336;
-        color: #c62828;
-      }
-
-      .alert-info {
-        background: #e3f2fd;
-        border-left: 4px solid #0070ba;
-        color: #1565c0;
-      }
-
-      .alert strong {
-        display: block;
-        margin-bottom: 8px;
-        font-weight: 600;
-      }
-
-      /* Info Display */
-      .info-row {
-        display: flex;
-        justify-content: space-between;
-        padding: 12px 0;
-        border-bottom: 1px solid #f5f7fa;
-        font-size: 14px;
-      }
-
-      .info-row:last-child {
-        border-bottom: none;
-      }
-
-      .info-label {
-        color: #6c7378;
-      }
-
-      .info-value {
-        color: #2c2e2f;
-        font-weight: 500;
-        font-family: monospace;
-        font-size: 13px;
-      }
-
-      .balance-display {
-        text-align: center;
-        padding: 32px;
-        background: linear-gradient(135deg, #0070ba 0%, #005ea6 100%);
-        color: white;
-        border-radius: 8px;
-        margin-bottom: 24px;
-      }
-
-      .balance-label {
-        font-size: 14px;
-        opacity: 0.9;
-        margin-bottom: 8px;
-      }
-
-      .balance-amount {
-        font-size: 36px;
-        font-weight: 300;
-        letter-spacing: -1px;
-      }
-
-      code {
-        background: #f5f7fa;
-        padding: 3px 6px;
-        border-radius: 3px;
-        font-family: "Courier New", monospace;
-        font-size: 12px;
-        word-break: break-all;
-      }
-
-      .hidden {
-        display: none;
-      }
-
-      /* Footer */
-      .footer {
-        text-align: center;
-        padding: 24px;
-        font-size: 12px;
-        color: #6c7378;
-        border-top: 1px solid #cbd2d9;
-        margin-top: 32px;
-      }
-
-      /* Setup Flow */
-      .setup-step {
-        padding: 24px;
-        background: white;
-        border-radius: 8px;
-        margin-bottom: 16px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-      }
-
-      .setup-step.completed {
-        background: #f5f7fa;
-        border-left: 4px solid #4caf50;
-      }
-
-      .step-header {
-        display: flex;
-        align-items: center;
-        margin-bottom: 16px;
-      }
-
-      .step-icon {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        background: #0070ba;
-        color: white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 12px;
-        font-weight: 600;
-        font-size: 14px;
-      }
-
-      .step-icon.completed {
-        background: #4caf50;
-      }
-
-      .step-title {
-        font-size: 16px;
-        font-weight: 500;
-        color: #2c2e2f;
-      }
-
-      #token-transfer-form {
-        padding-top: 20px;
-      }
-
-      #token-info {
-        background: #e3f2fd;
-        padding: 20px;
-        border-radius: 8px;
-      }
-
-      input::placeholder {
-        color: #bababa;
-      }
-    </style>
+    <link
+      rel="stylesheet"
+      href="styles.css"
+    />
   </head>
   <body>
     <!-- PayPal Header -->