.elementor-7507 .elementor-element.elementor-element-a773743{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--padding-top:65px;--padding-bottom:65px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-7507 .elementor-element.elementor-element-a773743{--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}}/* Start custom CSS for html, class: .elementor-element-cf3d230 */.wrap{ max-width:820px; margin:0 auto; }
    .topnav{
      font-size:14px;
      color:var(--muted);
      margin-bottom:10px;
    }
    .topnav a{ color:inherit; text-decoration:none; border-bottom:1px dotted var(--muted); }
    h1{ font-size:28px; margin:8px 0 8px; }
    p{ margin:0 0 16px; color:var(--muted); line-height:1.5; }

    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:14px;
      padding:18px;
      box-shadow: 0 6px 20px rgba(17,24,39,.06);
    }

    table{ width:100%; border-collapse:separate; border-spacing:0 12px; }
    td{ vertical-align:middle; }
    .label{
      width:110px;
      text-align:right;
      padding-right:10px;
      font-weight:700;
      color:var(--text);
      white-space:nowrap;
    }
    .unit{
      width:170px;
      font-weight:700;
      white-space:nowrap;
    }
    input[type="text"]{
      width:100%;
      padding:12px 12px;
      border:1px solid var(--line);
      border-radius:10px;
      font-size:16px;
      outline:none;
      background:#fff;
    }
    input[type="text"]:focus{
      border-color:var(--focus);
      box-shadow:0 0 0 3px rgba(37,99,235,.15);
    }

    .swapCell{ width:48px; text-align:center; }
    .swapBtn{
      width:40px;
      height:40px;
      border-radius:10px;
      border:1px solid var(--line);
      background:#fff;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition:transform .05s ease;
    }
    .swapBtn:active{ transform:scale(.98); }
    .swapBtn svg{ width:18px; height:18px; }

    .actions{
      display:flex;
      gap:10px;
      justify-content:center;
      margin-top:6px;
      flex-wrap:wrap;
    }
    button{
      border-radius:10px;
      border:1px solid var(--btn);
      padding:10px 16px;
      font-weight:800;
      cursor:pointer;
      transition:transform .05s ease;
    }
    button:active{ transform:scale(.99); }
    .primary{ background:var(--btn); color:var(--btnText); }
    .secondary{ background:var(--btn2); color:var(--btn2Text); border-color:var(--line); }

    .result{
      margin-top:14px;
      padding:12px;
      border:1px dashed var(--line);
      border-radius:12px;
      color:var(--text);
      font-size:15px;
      background:#fafafa;
    }
    .result .muted{ color:var(--muted); font-weight:600; }

    @media (max-width:768px){
      .label{ width:70px; font-size:14px; }
      .unit{ width:auto; }
      .swapCell{ width:42px; }
      h1{
          font-size:21px;
      }
    }/* End custom CSS */