/* WeaveSite Unit Converter Express - Tech Blue + Gradient Tabs */
.wsucx{
  --bg: #f6f9ff;
  --panel: #ffffff;
  --border: #cfd8e3;
  --text: #0f172a;

  --primary: #2563eb;
  --primary2:#06b6d4;
  --accent: #7c3aed;
  --focus: rgba(37, 99, 235, .18);

  max-width: 980px !important;
  border: 1px solid var(--border) !important;
  background:
    radial-gradient(1200px 600px at 12% 0%, rgba(6,182,212,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(124,58,237,.10), transparent 55%),
    var(--bg) !important;
  padding: 12px 12px 8px !important;

  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08) !important;
}

.wsucx-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-bottom: 8px !important;
}

.wsucx-title{
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #0b2a7a !important;
  line-height: 1.15 !important;
  letter-spacing: .2px !important;
}

.wsucx-icon{
  font-size: 17px !important;
  color:#0b2a7a !important;
  font-weight: 900 !important;
  opacity: .9 !important;
}

.wsucx-tabs{
  display:flex !important;
  gap: 8px !important;
  align-items:flex-end !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}

.wsucx-tab{
  border: 1px solid rgba(37,99,235,.35) !important;
  border-bottom: none !important;

  background: linear-gradient(90deg, var(--primary2), var(--primary), var(--accent)) !important;
  color: #ffffff !important;

  font-weight: 900 !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;

  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;

  box-shadow: 0 8px 18px rgba(37,99,235,.18) !important;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease !important;
}

.wsucx-tab:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.22) !important;
}

.wsucx-tab.is-active{
  background: var(--panel) !important;
  color: #0b2a7a !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.wsucx-panel{
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(6px) !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

.wsucx-box{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.wsucx-col .wsucx-label{
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
}

/* Input style per screenshot:
   - From: white bg, grey border
   - To: grey bg, grey border (readonly)
*/
.wsucx-input{
  width: 100% !important;
  height: 46px !important;
  font-size: 18px !important;
  font-weight: 800 !important;

  border: 2px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;

  background: #ffffff !important;
  color: #111827 !important;

  box-sizing: border-box !important;
  margin-bottom: 10px !important;
  outline: none !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
}

.wsucx-input::placeholder{
  color: #9ca3af !important;
  font-weight: 700 !important;
}

.wsucx-input:focus{
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 4px rgba(147,197,253,.35) !important;
}

.wsucx-input--readonly{
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

.wsucx-list{
  width: 100% !important;
  height: 260px !important;
  font-size: 15px !important;

  border: 2px solid #d1d5db !important;
  border-radius: 12px !important;
  padding: 8px !important;

  background: #ffffff !important;
  color: #111827 !important;
  box-sizing: border-box !important;
  outline: none !important;

  transition: border-color .12s ease, box-shadow .12s ease !important;
}

.wsucx-list:focus{
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 4px rgba(147,197,253,.25) !important;
}

.wsucx-result{
  margin-top: 10px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.wsucx-result-label{
  color: var(--primary) !important;
  margin-right: 10px !important;
}

.wsucx-hint{
  min-height: 18px !important;
  text-align: center !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  color: #1d4ed8 !important;
  opacity: .95 !important;
}

/* Single conversion page header */
.wsucx-single-page{
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.wsucx-page-title{
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #0b2a7a !important;
  margin: 6px 0 6px !important;
}

.wsucx-page-desc{
  margin: 0 0 14px !important;
  color: #334155 !important;
  font-weight: 700 !important;
}

/* Single converter layout tweaks */
.wsucx--single{
  max-width: 980px !important;
}

.wsucx-single-box{
  display: grid !important;
  gap: 12px !important;
  position: relative !important;
}

.wsucx-swap{
  position: absolute !important;
  right: 78px !important; /* align near unit labels */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.10) !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}

.wsucx-swap:hover{ filter: brightness(1.02) !important; }

.wsucx-swap__icon{
  font-weight: 900 !important;
  font-size: 22px !important;
  color: var(--primary) !important;
  line-height: 1 !important;
}

@media (max-width: 700px){
  .wsucx-swap{ right: 14px !important; }
}

.wsucx-unit{
  font-weight: 900 !important;
  color: #111827 !important;
  margin-top: -4px !important;
}

.wsucx-actions{
  display:flex !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  margin-top: 6px !important;
}

.wsucx-btn{
  border: 2px solid var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 900 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

.wsucx-btn:hover{ filter: brightness(1.05) !important; }

.wsucx-btn--ghost{
  border-color: var(--primary) !important;
  background: transparent !important;
  color: var(--primary) !important;
}

@media (max-width: 900px){
  .wsucx-title{ font-size: 20px !important; }
  .wsucx-tab{ font-size: 12px !important; padding: 6px 10px !important; }
  .wsucx-box{ grid-template-columns: 1fr !important; gap: 12px !important; }
  .wsucx-col .wsucx-label{ font-size: 14px !important; }
  .wsucx-input{ height: 44px !important; font-size: 16px !important; }
  .wsucx-list{ height: 240px !important; font-size: 14px !important; }
  .wsucx-result{ font-size: 14px !important; }
}

@media (max-width: 700px){
  .wsucx-page-title{ font-size: 22px !important; }
  .wsucx-actions{ flex-wrap: wrap !important; }
}

/* Layout (main + right sidebar) */
.wsucx-layout{
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 18px !important;
  align-items: start !important;
}

.wsucx-main .wsucx{
  margin: 0 !important;
}

.wsucx-side{
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,.78) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.06) !important;
}

.wsucx-side__title{
  background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
}

.wsucx-side__list{
  list-style: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
}

.wsucx-side__list li{
  margin: 8px 0 !important;
}

.wsucx-side__list a{
  color: #0b2a7a !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

.wsucx-side__list a:hover{
  text-decoration: underline !important;
}

/* Common Conversions section */
.wsucx-common{
  margin-top: 18px !important;
  padding: 0 2px !important;
}

.wsucx-common__title{
  font-weight: 900 !important;
  color: #0b2a7a !important;
  margin: 18px 0 10px !important;
  font-size: 14px !important;
}

.wsucx-common__grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
}

.wsucx-common__grid ul{
  margin: 0 !important;
  padding-left: 18px !important;
}

.wsucx-common__grid li{
  margin: 6px 0 !important;
}

.wsucx-common__grid a{
  color: #0b2a7a !important;
  text-decoration: underline !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

@media (max-width: 980px){
  .wsucx-layout{
    grid-template-columns: 1fr !important;
  }
  .wsucx-side{
    max-width: 520px !important;
  }
}

@media (max-width: 700px){
  .wsucx-common__grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}