* { margin: 0; padding: 0; box-sizing: border-box; }
    input, textarea, button, select { font-family: inherit; }
    body { 
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
      background: #f3f5f7; 
      min-height: 100vh; 
      display: flex; 
      justify-content: center; 
      align-items: flex-start; 
      padding: 30px 10px; 
      margin: 20px;
      box-sizing: border-box;
    }
    .container { 
      background: white; 
      border-radius: 20px; 
      box-shadow: 0 10px 40px rgba(0,0,0,0.15); 
      max-width: 900px; 
      width: 100%; 
      padding: 30px; 
    }
    .nav-bar { 
      display: flex; 
      gap: 10px; 
      margin-bottom: 20px; 
      flex-wrap: wrap; 
    }
    .nav-bar button { 
      background: #2d5016; 
      color: white; 
      border: none; 
      padding: 8px 16px; 
      border-radius: 6px; 
      font-size: 14px; 
      cursor: pointer; 
    }
    .nav-bar button:hover { background: #3d6b1f; }
    h1 { color: #2d5016; margin-bottom: 10px; }
    h2 { color: #2d5016; margin: 20px 0 10px 0; font-size: 1.3em; }
    p { margin-bottom: 10px; color: #333; line-height: 1.6; }
    .section { 
      margin: 20px 0; 
      padding: 20px; 
      background: #f8fafc; 
      border-radius: 12px; 
      border-left: 4px solid #2d5016; 
    }
    .field-label { font-weight: 600; margin-bottom: 4px; display: block; }
    input[type="email"], input[type="password"], textarea {
      width: 100%;
      padding: 12px;
      margin-bottom: 10px;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
      font-size: 14px;
    }
    textarea { min-height: 120px; resize: vertical; }
    textarea::placeholder,
    .placeholder-text {
      color: #64748b;
      font-size: 14px;
      font-weight: 400;
      opacity: 1;
    }
    .spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #e2e8f0;
      border-radius: 50%;
      border-top-color: #2d5016;
      animation: spin 1s ease-in-out infinite;
      margin-right: 8px;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    .loading-text {
      color: #64748b;
      font-size: 14px;
    }
    
    button.action {
      background: #2d5016; 
      color: white; 
      border: none; 
      padding: 10px 18px; 
      border-radius: 10px; 
      font-size: 14px; 
      cursor: pointer; 
      margin-top: 4px;
    }
    button.action:disabled {
      background: #9ca3af;
      cursor: not-allowed;
      opacity: 0.7;
    }
    button.action:hover:not(:disabled) { background: #3d6b1f; }
    .status { margin-top: 8px; font-size: 0.9em; }
    .status.error { color: #b91c1c; }
    .status.success { color: #166534; }
    .summary-box {
      background: white;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 16px;
      margin-top: 10px;
      margin-bottom: 10px; 
    }
    .summary-title { font-weight: 600; margin-bottom: 4px; }
    .step-item {
      padding: 8px 10px;
      border-radius: 8px;
      background: #f1f5f9;
      margin-top: 6px;
      font-size: 0.95em;
    }
    .tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      background: #e5f3e8;
      color: #2d5016;
      font-size: 0.8em;
      margin-left: 4px;
    }
@media (max-width: 600px) {
    body {
      padding: 10px 5px;
      margin: 10px 0;
    }

    .container {
      padding: 20px 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      border-radius: 12px;
    }

    h1 {
      font-size: 1.5rem;
      margin-bottom: 8px;
    }

    h2 {
      font-size: 1.15rem;
      margin: 16px 0 8px 0;
    }

    p {
      font-size: 0.95rem;
    }

    .nav-bar {
      flex-direction: row;
      gap: 6px;
    }

    .nav-bar button {
      flex: 1;
      padding: 10px 8px;
      font-size: 13px;
    }

    .section {
      padding: 16px;
      margin: 16px 0;
    }

    input[type="email"], 
    input[type="password"], 
    textarea {
      padding: 14px;
      font-size: 16px;
    }

    button.action {
      width: 100%;
      padding: 14px 18px;
      font-size: 15px;
    }

    textarea {
      min-height: 140px;
    }

    #session-banner {
      padding: 12px !important;
    }

    #session-banner > div {
      flex-direction: column;
      align-items: stretch !important;
      gap: 10px;
    }

    .logout-btn {
      width: 100%;
      margin-left: 0 !important;
      padding: 10px 12px;
    }

    .summary-box {
      padding: 14px;
      font-size: 0.95rem;
    }

    .step-item {
      font-size: 0.9em;
      padding: 10px;
    }
}

    .logout-btn {
    background: #b91c1c;
    color: white;
    border: none;
     padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 30px;
    }

    .logout-btn:hover {
        background: #dc2626;
    }

    .badge { 
    display: inline-block; 
    padding: 4px 8px; 
    border-radius: 999px; 
    background: #e8f5e9; 
    color: #2d5016; 
    font-size: 12px; 
    margin-bottom: 10px; 
    }

    .diagram-placeholder { 
    border-radius: 12px; 
    border: 1px dashed #bbb; 
    padding: 16px; 
    font-size: 0.9em; 
    background: hsl(0, 0%, 100%); 
    color: #555; 
    margin: 10px 0; 
    text-align: center; 
    }

    .code-link { 
    margin-top: 10px; 
    padding: 10px 12px; 
    background: #f8f9fa; 
    border-radius: 8px; 
    border-left: 4px solid #2d5016; 
    font-size: 0.9em; 
    }

    .garmin-link {
    font-weight: bold;
    }

    /* Ensure images in diagram work */
    img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    }

    h1 { 
      color: #2d5016; 
      margin-bottom: 10px; 
    }
    h2 { 
      color: #2d5016; 
      margin: 20px 0 8px 0; 
      font-size: 1.3em; 
    }
    p { 
      margin-bottom: 10px; 
      color: #333; 
      line-height: 1.6; 
    }
    ul { 
      margin-left: 20px; 
      margin-bottom: 10px; 
    }
    li { 
      margin-bottom: 6px; 
    }

        .code-link { 
      margin-top: 10px; 
      padding: 10px 12px; 
      background: #f8f9fa; 
      border-radius: 8px; 
      border-left: 4px solid #2d5016; 
      font-size: 0.9em; 
    }
    a { 
      color: #2d5016; 
      text-decoration: none; 
    }
    a:hover { 
      text-decoration: underline; 
    }
    .garmin-link {
      font-weight: bold;
    }

    .note { 
      border-left: 4px solid #2d5016; 
      background: #e8f5e9; 
      padding: 10px 12px; 
      border-radius: 8px; 
      margin-top: 20px; 
      font-size: 0.9em; 
    }

    .warning { 
      border-left: 5px solid #dc3545; 
      background: #f8d7da; 
      color: #721c24; 
      padding: 12px; 
      border-radius: 8px; 
      margin-bottom: 20px; 
      font-size: 0.95em; 
    }

  /* Make sure all elements use border-box sizing */
  *, *::before, *::after {
    box-sizing: inherit;
  }