* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.calculator {
    background-color: #000;
    border-radius: 25px;
    padding: 25px;
    width: 350px;
    max-width: 100%;
    box-shadow: 0 0 30px rgba(255, 165, 0, 0.2);
    position: relative;
}

.display {
    background-color: #000;
    margin-bottom: 25px;
    padding: 25px 20px;
    text-align: right;
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    border-radius: 15px;
}

.display-text {
    color: white;
    font-size: 48px;
    font-weight: 300;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1.1;
    max-width: 100%;
    max-height: 120px;
    overflow: hidden;
    white-space: pre-wrap;
    transition: font-size 0.2s ease;
}

.display-text.small-text {
    font-size: 36px;
}

.display-text.very-small-text {
    font-size: 28px;
}

.display-text.crypto-price {
    color: #ff9500;
    font-weight: 400;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 15px;
    height: 480px;
}

.btn {
    border: none;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: scale(0.95);
}

.btn:hover {
    transform: scale(1.05);
}

/* Boutons de fonction (C, +/-, %) */
.btn.function {
    background-color: #a6a6a6;
    color: black;
    font-weight: 500;
}

.btn.function:hover {
    background-color: #bfbfbf;
}

/* Boutons d'opération (+, -, ×, ÷) */
.btn.operator {
    background-color: #ff9500;
    color: white;
    font-weight: 500;
}

.btn.operator:hover {
    background-color: #ffad33;
}

.btn.operator.active {
    background-color: white;
    color: #ff9500;
}

/* Boutons crypto */
.btn.crypto {
     /*background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ff9500 100%);*/
     color: white;
     position: relative;
     /*box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3); */
}

.btn.crypto:hover {
    background: linear-gradient(135deg, #ff8c5a 0%, #ffad33 50%, #ffb733 100%);
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.4);
}

.btn.crypto.loading {
    background: linear-gradient(135deg, #666 0%, #888 50%, #666 100%);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.crypto-icon {
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Styles spécifiques pour chaque crypto 
 .crypto-icon.btc { color: #f7931a; }
 .crypto-icon.eth { color: #627eea; }
 .crypto-icon.xrp { color: #23292f; }
 .crypto-icon.usdt { color: #26a17b; }
 .crypto-icon.bnb { color: #f3ba2f; }
 .crypto-icon.sol { color: #9945ff; }
 .crypto-icon.doge { color: #c2a633; }
 .crypto-icon.tao { color: #ffffff; }
 .crypto-icon.ton { color: #0088cc; }
*/

/* Bouton numérique (0) */
.btn.number {
    background-color: #333;
    color: white;
    font-weight: 400;
}

.btn.number:hover {
    background-color: #404040;
}

/* Bouton 0*/
.btn.zero {
    
    border-radius: 50px;
    padding-left: 25px;
    justify-content: stretch;
}

/* Bouton égal */
.btn.equals {
    background-color: #ff9500;
    color: white;
    font-weight: 500;
}

.btn.equals:hover {
    background-color: #ffad33;
}

/* Indicateur de statut */
.status-indicator {
    position: absolute;
    top: 15px;
    left: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #666;
    transition: background-color 0.3s ease;
}

.status-dot.connected {
    background-color: #4caf50;
    animation: blink 2s infinite;
}

.status-dot.error {
    background-color: #f44336;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* Styles responsives */
@media (max-width: 380px) {
    .calculator {
        width: 100%;
        padding: 20px;
    }
    
    .display-text {
        font-size: 26px;
    }
    
    .btn {
        font-size: 24px;
    }
    
    .crypto-icon {
        font-size: 28px;
    }
    
    .buttons {
        height: 380px;
        gap: 12px;
    }
}

/* Animation pour les prix qui changent 
 .price-update {
    animation: priceFlash 0.5s ease-in-out;
}

 @keyframes priceFlash {
    0% { background-color: rgba(255, 149, 0, 0.3); }
    50% { background-color: rgba(255, 149, 0, 0.6); }
    100% { background-color: transparent; }
}
*/


 /*Cryptos Logos style */
    
    #bitcoin{
      background-image: url('https://i.supaimg.com/5e43ac0f-c1f1-4ec8-b14e-d1527a80dfe4.png');
      background-position: 50% 50%;
      background-size: cover;
    }
    #etherum{
      background-image:
      url('https://i.supaimg.com/4ec75bb7-192f-41d3-9801-083d3d3a7131.png');
      background-position: 50% 50%;
      background-size: cover;
    }
    #xrp{
      background-image:
      url('https://i.supaimg.com/68abeadd-0147-4b40-8d33-a3b08c6e9b1e.png');
      background-position: 50% 50%;
      background-size: cover;
    }
    #usdt{
      background-image:
      url('https://i.supaimg.com/aede6ad9-1f2b-470c-b5cd-40254031e91a.webp');
      background-position: 50% 50%;
      background-size: cover;
    }
    #bnb{
      background-image:
      url('https://i.supaimg.com/65a6751e-6ab7-40cc-a6a8-410338f237bc.png');
      background-position: 50% 50%;
      background-size: cover;
    }
    #solana{
      background-image:
      url('https://i.supaimg.com/6df6074d-f844-49ef-803f-fc672f0224f0.png');
      background-position: 50% 50%;
      background-size: cover;
    }
    #dogecoin{
      background-image:
      url('https://i.supaimg.com/dc8a1a59-e20d-4f2a-a193-107fb4e5fdd9.webp');
      background-position: 50% 50%;
      background-size: cover;
    }
    #tao{
      background-image:
      url('https://i.supaimg.com/6ea93e1c-8d99-4d0e-bc68-cece731aaaee.png');
      background-position: 50% 50%;
      background-size: cover;
    }
    #toncoin{
      background-image:
      url('https://i.supaimg.com/03c06a74-be07-43c8-9712-95716af47bda.png');
      background-position: 50% 50%;
      background-size: cover;
    }
  
  #equalsign{
    /*grid-column: span 2;*/
  }  
  
  /* numbers buttons style 
  
  button {
      padding: 20px;
       font-size: 1.2em;
       border: none;
       border-radius: 50%;
       background: #333;
       color: #fff;
       transition: 0.2s ease;
    }

    button:hover {
      background: #555;
    }
  */