/* Reset default browser margins */
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      background: #0f172a; /* Dark background */
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100vh;
      padding: 20px;
    }

    /* Header styling */
    header {
      width: 100%;
      text-align: center;
      margin-bottom: 20px;
    }

    header a {
      text-decoration: none;
      color: #fff; /* Bitcoin gold color for brand feel */
      font-size: 1.5rem;
      font-weight: bold;
    }
    header span{
      color: #082f5cdc;
    }

    header a:hover {
      color: #ffd75e; /* Slightly lighter gold on hover */
    }

    /* Widget styles */
    .crypto-price-widget {
      background: #222;
      color: white;
      padding: 15px 20px;
      border-radius: 10px;
      text-align: center;
      max-width: 350px;
      width: 100%;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .widget-title {
      font-size: 1.1rem;
      color: #fff;
      margin-bottom: 15px;
      font-weight: bold;
    }

    .crypto-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #333;
    }

    .crypto-container:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .crypto-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .crypto-logo {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 16px;
    }

    .btc-logo { background: #f2a900; }
    .eth-logo { background: #627eea; }
    .sol-logo { background: #00ffa3; color: #000; }
    .xrp-logo { background: #23292f; }

    .crypto-name {
      font-size: 0.9rem;
      color: #ddd;
    }

    .price-info {
      text-align: right;
    }

    .crypto-price {
      font-size: 1rem;
      font-weight: bold;
      margin: 0;
    }

    .price-change {
      font-size: 0.8rem;
      margin: 0;
    }

    .positive { color: #26de81; }
    .negative { color: #ff4d4d; }

    .last-updated {
      font-size: 0.75rem;
      color: #777;
      margin-top: 10px;
    }

    .api-status {
      font-size: 0.7rem;
      color: #aaa;
      margin-top: 5px;
    }

    .status-online { color: #26de81; }
    .status-offline { color: #ff4d4d; }

    /* Mobile responsiveness */
    @media (max-width: 480px) {
      header a {
        font-size: 1.2rem;
      }
      .crypto-price-widget {
        padding: 12px;
        max-width: 95%;
      }
      .crypto-name {
        font-size: 0.85rem;
      }
      .crypto-price {
        font-size: 0.9rem;
      }
    }