:root {
      --mylogo: #26D9CD;
      --accent: #26D97C;
      --myinterface: #16847D;
      --bg: #121212;
      --black2: #191919;
      --black3: #1C1C1C;
      --grey: #404040;
      --grey2: #666666;
      --text: #FFFFFF;
      --radius: 20px;
    }
    .preloader {
      position: fixed;
      align-items: center; 
      justify-content: center; 
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: var(--bg);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.4s;
    }
    .spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%; 
    border: 4px solid transparent; 
    border-top-color: var(--myinterface); 
    animation: spin 0.4s linear infinite; 
}
@keyframes spin {
    0% {
        transform: rotate(0deg); 
    }
    100% {
        transform: rotate(360deg);
    }
}
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', Arial, sans-serif;
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }
    .calc-container {
      background: var(--black3);
      border-radius: 20px;
      box-shadow: 4px 0px 8px var(--black2);
      padding: 24px 24px 24px 24px;
      margin: 40px 0px 40px 0px;
      max-width: 860px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 24px;
      position: relative;
    }
    .columns-wrapper {
      display: flex;
      flex-direction: row;
      gap: 32px;
      align-items: flex-start;
    }
    .left-column,
    .right-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .left-column {
      min-width: 300px;
      max-width: 412px;
    }
    .right-column {
      min-width: 300px;
      max-width: 412px;
    }
    label {
      font-family: 'Ubuntu', Arial, sans-serif;
      font-weight: 300;
      font-size: 24px;
      line-height: 28px;
      color: var(--accent);
      margin-bottom: 0px;
      margin-top: 0px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    input[type="range"] {
      width: 100%;
      accent-color: var(--accent);
      margin-top: 24px;
      margin-bottom: 4px;
    }
    .checkbox-group {
      display: flex;
      gap: 16px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .checkbox-group label {
      margin: 0;
      font-family: 'DM Sans', Arial, sans-serif;
      font-weight: 300;
      font-size: 16px; 
      line-height: 24px;
      color: var(--text);
      cursor: pointer;
      gap: 8px;
      -webkit-user-select: none; 
      -moz-user-select: none;    
      -ms-user-select: none;     
      user-select: none;
    }
    input[type="checkbox"] {
      accent-color: var(--accent);
      width: 16px;
      height: 16px;
      border-radius: 8px;
      margin-right: 4px;
      vertical-align: middle;
      cursor: pointer;
    }
    .toggle {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }
        .toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--grey2);
            transition: .4s;
            border-radius: 12px;
        }
        .slider:before {
            position: absolute;
            content: '';
            height: 20px;
            width: 20px;
            left: 0px;
            bottom: 0px;
            background-color: var(--text);
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: var(--myinterface);
        }
        input:checked + .slider:before {
            transform: translateX(20px);
        }
    .total {
      margin-top: 120px;
      font-family: 'Ubuntu', Arial, sans-serif;
      font-weight: 300;
      font-size: 24px;
      line-height: 28px;
      color: var(--accent);
      text-align: left;
    }
    form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 0px;
      width: 100%;
    }
    .button-status-wrapper {
  display: flex;
  align-items: left;
}
    input[type="text"], input[type="text"], textarea {
      background: var(--black3);
      color: var(--text);
      border: 1px solid var(--grey2);
      border-radius: 24px;
      padding: 16px 8px;
      font-size: 16px;
      font-family: 'DM Sans', Arial, sans-serif;
      font-weight: 300;
      transition: border 0.4s, background 0.4s;
      resize: none;
      height: 22px;
      line-height: 20px;
      -webkit-user-select: none; 
      -moz-user-select: none;    
      -ms-user-select: none;     
      user-select: none;
    }
    input[type="text"]:focus, input[type="text"]:focus, textarea:focus {
      border: 1px solid var(--myinterface);
      background: var(--black3);
      outline: none;
    }
    textarea {
      min-height: 66px;
      max-height: 66px;
      height: 66px;
    }
    button[type="submit"] {
      width: 148px;
      height: 56px;
      flex: none;
      color: var(--text);
      padding: 16px 32px;
      border: none;
      border-radius: 60px;
      border-color: var(--accent);
      border: 1px solid var(--accent);
      font-size: 16px;
      font-family: 'DM Sans', Arial, sans-serif;
      font-weight: 300;
      cursor: pointer;
      text-decoration: none;
      background: transparent;
      letter-spacing: 0.04em;
      margin-top: 24px;
      -webkit-user-select: none; 
      -moz-user-select: none;    
      -ms-user-select: none;     
      user-select: none;
    }
    button[type="submit"]:hover {
      border: 1px solid var(--accent);
      background: transparent; 
      color: var(--accent);
    }
    button[type="submit"]:active {
      border: 1px solid var(--myinterface);
  background: transparent; 
  color: var(--myinterface);                
  transform: scale(0.96);
    }
    .success {
    margin-top: 44px;
    background-color: var(--black3); 
    color: var(--mylogo); 
    font-family: 'DM Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    margin-left: 12px;
}
.error {
    margin-top: 36px;
    margin-left: 12px;
    background-color: var(--black3); 
    color: var(--accent); 
    font-family: 'DM Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
}
.sending {
    margin-top: 36px;
    background-color: var(--black3); 
    color: var(--myinterface);
    font-family: 'DM Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    margin-left: 12px;
}
.checkbox-group .status {
      margin-left: -4px;
      font-family: 'DM Sans', Arial, sans-serif;
      font-weight: 300;
      font-size: 16px; 
      line-height: 24px;
      color: var(--text);
      cursor: pointer;
}
    @media (max-width: 1024px) {
      .calc-container {
        padding: 16px 16px 16px 16px;
        margin: 16px 0 16px 0;
        border-radius: 20x;
        max-width: 340px;
      }
      .columns-wrapper {
        flex-direction: column;
        gap: 12px;
      }
      .left-column,
      .right-column {
        min-width: auto;
      }
      label {
        font-family: 'Ubuntu', Arial, sans-serif;
      font-weight: 300;
      font-size: 20px;
      line-height: 24px;
      color: var(--accent);
      margin-bottom: 0px;
      margin-top: 0px;
      display: flex;
      align-items: center;
      gap: 4px;
      }
    input[type="range"] {
      width: 100%;
      accent-color: var(--accent);
      margin-top: 4px;
      margin-bottom: -4px;
    }
    .checkbox-group {
      margin-top: 4px;
      display: flex;
      gap: 12px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .checkbox-group label {
      margin: 0;
      font-family: 'DM Sans', Arial, sans-serif;
      font-weight: 300;
      font-size: 14px; 
      line-height: 24px;
      color: var(--text);
      cursor: pointer;
      gap: 4px;
    }
    .checkbox-group .status {
      margin-left: -4px;
      font-family: 'DM Sans', Arial, sans-serif;
      font-weight: 300;
      font-size: 14px; 
      line-height: 24px;
      color: var(--text);
}
    input[type="checkbox"] {
      accent-color: var(--accent);
      width: 16px;
      height: 16px;
      border-radius: 8px;
      margin-right: 4px;
      vertical-align: middle;
    }
    .total {
      margin-top: -8px;
      font-family: 'Ubuntu', Arial, sans-serif;
      font-weight: 300;
      font-size: 20px;
      line-height: 24px;
      color: var(--accent);
      text-align: left;
    }
    form {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 8px;
      width: 340px;
    }
    .button-status-wrapper {
  display: flex;
  align-items: left;
}
    input[type="text"], input[type="text"], textarea {
      background: var(--black3);
      color: var(--text);
      border: 1px solid var(--grey2);
      border-radius: 24px;
      padding: 13px 8px;
      font-size: 14px;
      line-height: 16px;
      font-family: 'DM Sans', Arial, sans-serif;
      font-weight: 300;
      transition: border 0.2s, background 0.4s;
      resize: none;
      height: 12px;
      -webkit-user-select: none; 
      -moz-user-select: none;    
      -ms-user-select: none;     
      user-select: none;
    }
    input[type="text"]:focus, input[type="text"]:focus, textarea:focus {
      border: 1px solid var(--myinterface);
      background: var(--black3);
      outline: none;
    }
    textarea {
      min-height: 60px;
      max-height: 60px;
      height: 60px;
    }
    button[type="submit"] {
      width: 128px;
      height: auto;
      flex: none;
      color: var(--text);
      padding: 14px 28px;
      border: none;
      border-radius: 60px;
      border-color: var(--accent);
      border: 1px solid var(--accent);
      font-size: 14px;
      font-family: 'DM Sans', Arial, sans-serif;
      font-weight: 300;
      cursor: pointer;
      text-decoration: none;
      background: transparent;
      letter-spacing: 0.04em;
      margin-top: 8px;
      -webkit-user-select: none; 
      -moz-user-select: none;    
      -ms-user-select: none;     
      user-select: none;
    }
    button[type="submit"]:hover {
      border: 1px solid var(--accent);
      background: transparent; 
      color: var(--accent);
    }
    button[type="submit"]:active {
      border: 1px solid var(--myinterface);
  background: transparent; 
  color: var(--myinterface);                
  transform: scale(0.96);
    }
    .success {
    margin-top: 24px;
    background-color: var(--black3); 
    color: var(--mylogo); 
    font-family: 'DM Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    margin-left: 12px;
}
.error {
    margin-top: 16px;
    margin-left: 12px;
    background-color: var(--black3); 
    color: var(--accent); 
    font-family: 'DM Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
}
.sending {
    margin-top: 16px;
    background-color: var(--black3); 
    color: var(--myinterface);
    font-family: 'DM Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    margin-left: 12px;
}
}