:root {
     --bg: #0d0d0f;
     --panel: #151518;
     --border: #2a2a30;
     --accent: #00ffe0;
     --accent2: #ff4da6;
     --text: #e8e8f0;
     --muted: #555570;
     --btn-bg: #1c1c22;
     --btn-hover: #252530;
     --btn-shadow: rgba(0, 255, 224, 0.12);
     --op-bg: #1e1225;
     --op-color: #ff4da6;
     --eq-bg: linear-gradient(135deg, #00ffe0 0%, #00c9b1 100%);
     --eq-color: #0d0d0f;
 }


 body {
     min-height: 100vh;
     background: var(--bg);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Share Tech Mono', monospace;
     background-image:
         radial-gradient(ellipse at 20% 20%, rgba(0, 255, 224, 0.04) 0%, transparent 60%),
         radial-gradient(ellipse at 80% 80%, rgba(255, 77, 166, 0.04) 0%, transparent 60%);
 }

 .flex {
     display: flex;
     flex-direction: column;
     gap: 23px;
     align-items: center;
     position: relative;
     z-index: 1;
     background: var(--panel);
     border-radius: 26px;
     padding: 28px 2px 29px;
     box-shadow:0 30px 80px rgba(0, 0, 0, 0.7),inset 0 1px 0 rgba(255, 255, 255, 0.04);

 }

 .calc-wrap {
     position: relative;

 }

 /* Glow rings */
 .calc-wrap::before,
 .calc-wrap::after {
     content: '';
     position: absolute;
     border-radius: 28px;
     pointer-events: none;
 }

 .calc-wrap::before {
     inset: -2px;
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     z-index: 0;
     opacity: 0.5;
     filter: blur(1px);
 }

 .calc-wrap::after {
     inset: -8px;
     background: linear-gradient(135deg, var(--accent), var(--accent2));
     z-index: 0;
     opacity: 0.08;
     filter: blur(12px);
     border-radius: 36px;
 }



 .inp input {
     width: 450px;
     margin: 20px;
     height: 120px;
     border-radius: 14px;
     background-color: var(--bg);
     border: 1px solid var(--border);
     font-family: 'Orbitron', sans-serif;
     font-size: 38px;
     font-weight: 700;
     color: var(--accent);
     letter-spacing: -0.01em;
     line-height: 1;
     word-break: break-all;
     text-align: right;
     text-shadow: 0 0 20px rgba(0, 255, 224, 0.4);
     transition: color 0.15s;
      caret-color: transparent; 
       cursor: default; 

 }

 input:focus,
 textarea:focus,
 select:focus {
     outline: none;

 }

 button {
     margin: 10px 0;
     width: 100px;
     height: 70px;
     border-radius: 14px;
     position: relative;
     overflow: hidden;
     transition: background 0.12s,
         transform 0.08s,
         box-shadow 0.12s,
         border-color 0.12s;
     color: var(--text);
     background: var(--btn-bg);
     border: 1px solid var(--border);
     font-size: 20px;



 }

 button:hover {
     background: var(--btn-hover);
     border-color: rgba(0, 255, 224, 0.25);
     box-shadow: 0 4px 20px var(--btn-shadow);
     transform: translateY(-1px);
 }

 .btn-zero {
     width: 210px;
     height: 70px;

 }

 .btn-eq {
     background: var(--eq-bg);
     color: var(--eq-color);
     border: none;
     font-size: 24px;
     font-family: 'Orbitron', sans-serif;
     font-weight: 700;
     box-shadow: 0 6px 24px rgba(0, 255, 224, 0.25);
 }

 .btn-eq:active {
     filter: brightness(0.95);
 }

 .btn-dot {
     font-size: 28px;
     font-weight: bold;
     position: relative;
     top: 4px;
 }

 .btn-op {
     background: var(--op-bg);
     color: var(--op-color);
     border-color: rgba(255, 77, 166, 0.2);
     font-size: 22px;
     font-family: 'Orbitron', sans-serif;
     font-weight: 700;
 }

 .btn-op:hover {
     border-color: rgba(255, 77, 166, 0.5);
     box-shadow: 0 4px 20px rgba(255, 77, 166, 0.15);
 }




 /* Modal Overlay */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal-overlay.show {
    display: flex;
}

/* Modal Box */
.modal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    position: relative;
}

.modal h2 {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent2);
    font-size: 18px;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
}

.modal p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.modal button {
    width: 120px;
    height: 46px;
    background: var(--eq-bg);
    color: var(--eq-color);
    border: none;
    border-radius: 12px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin: 0; 
}


 /* Modal Overlay */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal-overlay.show {
    display: flex;
}

/* Modal Box */
.modal-er {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    position: relative;
}

.modal-er h2 {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent2);
    font-size: 18px;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
}

.modal-er p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.modal-er button {
    width: 120px;
    height: 46px;
    background: var(--eq-bg);
    color: var(--eq-color);
    border: none;
    border-radius: 12px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin: 0; 
}

/* Responsive style */
 @media (max-width: 600px){
  
    #inp{
    width: 80%;
    margin-left: 45px;
    
   
   }

    button{
        width: 80px;
        
    }
    .btn-zero{
        width: 170px;
    }

 }

@media (max-width:400px){
      
    #inp{
    width: 80%;
    margin-left: 25px;
    
   
   }

    button{
        width: 60px;
        
    }
    .btn-zero{
        width: 128px;
    }

}

@media (max-width:300px){
      
    #inp{
    width: 80%;
    
   
   }
    button{
        width: 40px;
        
    }
    .btn-zero{
        width: 95px;
    }

}