/* =========================================================
   CS17 CONVERSION WORKSHOP V1.0
   ========================================================= */

.cs17-convert-app{
  --b:#1769aa;
  --bd:#0f568d;
  --tx:#173247;
  --mut:#6d7f8d;
  --ln:#dbe5eb;
  --soft:#f5f9fc;
  --softb:#edf6fb;
  width:100%;
  max-width:980px;
  margin:18px auto 36px;
  padding:0 12px;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--tx);
  box-sizing:border-box;
}

.cs17-convert-app *{box-sizing:border-box}

.cw-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  padding:8px 2px 13px;
}

.cw-head small{
  display:block;
  color:var(--b);
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
}

.cw-head h1{
  margin:3px 0 2px;
  font-size:27px;
  line-height:1.1;
}

.cw-head p{
  margin:0;
  color:var(--mut);
  font-size:12px;
}

.cw-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:7px;
  border:1px solid var(--ln);
  border-radius:10px;
  background:#f3f6f8;
}

.cw-tab,
.cw-subtab{
  appearance:none;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#506878;
  font:700 11px Arial,Helvetica,sans-serif;
  padding:8px 10px;
  cursor:pointer;
}

.cw-tab:hover,
.cw-subtab:hover{background:#fff}

.cw-tab.active,
.cw-subtab.active{
  border-color:#b9d5e8;
  background:#fff;
  color:var(--bd);
  box-shadow:0 1px 3px rgba(20,70,100,.06);
}

.cw-panel{
  margin-top:10px;
  padding:18px;
  border:1px solid var(--ln);
  border-radius:11px;
  background:#fff;
}

.cw-panel-title small{
  display:block;
  color:var(--b);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.cw-panel-title h2{
  margin:3px 0 3px;
  font-size:20px;
}

.cw-panel-title p{
  margin:0;
  color:var(--mut);
  font-size:11px;
  line-height:1.45;
}

.cw-subtabs{
  display:flex;
  gap:5px;
  margin:13px 0 0;
  padding:5px;
  width:max-content;
  max-width:100%;
  border:1px solid var(--ln);
  border-radius:8px;
  background:var(--soft);
}

.cw-converter{
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
  gap:12px;
  align-items:end;
  margin-top:16px;
}

.cw-field{
  min-width:0;
}

.cw-field label{
  display:block;
  margin-bottom:5px;
  color:#516b7b;
  font-size:11px;
  font-weight:700;
}

.cw-field input,
.cw-field select{
  width:100%;
  border:1px solid #cfdce5;
  border-radius:8px;
  background:#fff;
  color:var(--tx);
  font:600 14px Arial,Helvetica,sans-serif;
}

.cw-field input{
  height:48px;
  padding:0 12px;
  margin-bottom:7px;
  font-size:18px;
}

.cw-field select{
  height:38px;
  padding:0 10px;
  font-size:12px;
}

.cw-result-field input{
  background:#f7fbfd;
  color:var(--bd);
}

.cw-swap{
  width:44px;
  height:44px;
  margin-bottom:0;
  border:1px solid #bdd7e7;
  border-radius:50%;
  background:#fff;
  color:var(--b);
  font-size:21px;
  font-weight:700;
  cursor:pointer;
}

.cw-swap:hover{background:var(--softb)}

.cw-result-summary{
  margin-top:15px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--softb);
  color:var(--bd);
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

.cw-reference{
  margin-top:11px;
  padding:10px 12px;
  border:1px solid var(--ln);
  border-radius:8px;
  background:var(--soft);
  color:#607685;
  font-size:11px;
  line-height:1.55;
}

.cw-reference:empty{display:none}

.cw-footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 3px 0;
  color:#81919c;
  font-size:10px;
}

@media(max-width:720px){
  .cw-tabs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .cw-tab{padding:8px 5px}
  .cw-converter{
    grid-template-columns:1fr;
    gap:9px;
  }
  .cw-swap{
    margin:0 auto;
    transform:rotate(90deg);
  }
}

@media(max-width:500px){
  .cs17-convert-app{padding:0 7px}
  .cw-head h1{font-size:23px}
  .cw-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cw-panel{padding:13px}
  .cw-footer{flex-direction:column;gap:3px}
}