/* TTB Salary ↔ Hourly Converter – Modern Dark UI
   ------------------------------------------------
   Design language: soft-dark, glassy cards, rounded 2xl, subtle borders,
   focus rings, grid layout, readable contrast.  */

/* ---------- Root & Tokens ---------- */
.ttb-shc{
  --bg:#0a0f1d;
  --card:#0f172a;
  --elev:#0b1326;
  --line:#1e293b;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --hi:#22d3ee;      /* cyan */
  --hi2:#38bdf8;     /* sky */
  --chip:#0ea5e9;
  --shadow:0 10px 30px rgba(2,6,23,.35);
  color:var(--text);
}

/* ---------- Heading ---------- */
.ttb-shc-title{
  margin:0 0 12px;
  font-size:1.6rem;
  letter-spacing:.2px;
  line-height:1.2;
  color: #000;
}

/* ---------- Card Shell ---------- */
.ttb-shc-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
}

/* ---------- Segmented Controls ---------- */
.ttb-shc-modebar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.ttb-shc-seg,.ttb-shc-view{ display:flex; gap:8px; flex-wrap:wrap; }

.seg-btn,.view-btn{
  appearance:none;
  background:var(--elev);
  border:1px solid #20314f;
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:filter .15s ease, transform .04s ease;
}
.seg-btn:hover,.view-btn:hover{ filter:brightness(1.06); }
.seg-btn:active,.view-btn:active{ transform:translateY(1px); }
.seg-btn.active,.view-btn.active{
  background:linear-gradient(180deg,var(--hi),var(--hi2));
  color:#03141a;
  border:0;
  box-shadow:0 0 0 2px rgba(56,189,248,.25);
}

/* ---------- Form Grid ---------- */
.ttb-shc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.ttb-shc-grid-4{ grid-template-columns:repeat(4,1fr); }
.ttb-shc-field label{
  display:block;
  color:var(--muted);
  font-size:.92rem;
  margin:0 0 6px;
}
.ttb-shc-field input,
.ttb-shc-field select{
  width:100%;
  padding:10px 12px;
  background:var(--elev);
  border:1px solid #1f2a44;
  border-radius:10px;
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ttb-shc-field input:focus,
.ttb-shc-field select:focus{
  border-color:var(--hi2);
  box-shadow:0 0 0 3px rgba(56,189,248,.2);
}
.ttb-shc-field.inline{
  display:flex; align-items:center; gap:10px;
}
.ttb-shc-field.inline input[type="checkbox"]{
  width:auto; height:auto;
  accent-color:#67e8f9;
}

/* ---------- Presets (Simple View) ---------- */
.ttb-shc-presets{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
}
.ttb-shc .muted{ color:var(--muted); }
.ttb-shc .small{ font-size:.85rem; }
.chip{
  background:var(--elev);
  border:1px solid #20314f;
  color:var(--text);
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:filter .15s ease, transform .04s ease, border-color .15s ease;
}
.chip:hover{ filter:brightness(1.06); border-color:#2b4370; }
.chip:active{ transform:translateY(1px); }

/* ---------- Buttons ---------- */
.ttb-shc-actions{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;
}
.ttb-shc-btn{
  background:linear-gradient(180deg,var(--hi),var(--hi2));
  border:none; color:#03141a;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:filter .15s ease, transform .04s ease;
}
.ttb-shc-btn:hover{ filter:brightness(1.05); }
.ttb-shc-btn:active{ transform:translateY(1px); }

.ttb-shc-btn-ghost{
  background:transparent;
  border:1px dashed #2a3b59;
  color:var(--text);
}
.ttb-shc-btn-ghost:hover{ border-color:#34507b; }

.ttb-shc-btn-outline{
  background:transparent;
  border:1px solid var(--hi2);
  color:var(--text);
  box-shadow:0 0 0 2px rgba(56,189,248,.08) inset;
}
.ttb-shc-btn-outline:hover{ border-color:#7dd3fc; }

/* ---------- Output Card ---------- */
.ttb-shc-output{
  margin-top:16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
}
.ttb-shc-output-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px;
}
.ttb-shc-chip{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:var(--elev);
  border:1px solid var(--chip);
  color:#7dd3fc;
  font-size:.85rem;
}

/* ---------- Value Cards ---------- */
.ttb-shc-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:12px;
}
.ttb-shc-cards .card{
  background:var(--elev);
  border:1px solid #1f2a44;
  border-radius:12px;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:4px;
  cursor:pointer;
  transition:transform .06s ease, border-color .15s ease, filter .15s ease;
}
.ttb-shc-cards .card:hover{
  filter:brightness(1.05);
  border-color:#2a4068;
}
.ttb-shc-cards .card:active{ transform:translateY(1px); }
.ttb-shc-cards .card span{
  color:var(--muted);
  font-size:.92rem;
}
.ttb-shc-cards .card strong{
  font-size:1.1rem;
  letter-spacing:.2px;
}

/* ---------- Summary Grid ---------- */
.ttb-shc-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-bottom:8px;
}
.ttb-shc-summary-grid .row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px dashed #213253;
  padding:6px 0;
}
.ttb-shc-summary-grid .row span{ color:var(--muted); }

/* ---------- Advanced Section Headings ---------- */
.ttb-shc-adv h3{
  margin:14px 0 8px;
  font-size:1.05rem;
  color:#bfe7ff;
  letter-spacing:.2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .ttb-shc-grid{ grid-template-columns:1fr 1fr; }
  .ttb-shc-grid-4{ grid-template-columns:1fr 1fr; }
  .ttb-shc-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 580px){
  .ttb-shc-grid{ grid-template-columns:1fr; }
  .ttb-shc-cards{ grid-template-columns:1fr; }
  .ttb-shc-summary-grid{ grid-template-columns:1fr; }
}

/* ---------- Small Polish ---------- */
.ttb-shc select{
  background-image:
    linear-gradient(45deg, transparent 50%, #7dd3fc 50%),
    linear-gradient(135deg, #7dd3fc 50%, transparent 50%),
    linear-gradient(to right, #20314f, #20314f);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    calc(100% - 34px) 50%;
  background-size:5px 5px, 5px 5px, 1px 60%;
  background-repeat:no-repeat;
  padding-right:40px;
}

.ttb-shc input::placeholder{ color:#6b7a96; }
.ttb-shc .ttb-shc-btn:focus,
.ttb-shc .seg-btn:focus,
.ttb-shc .view-btn:focus,
.ttb-shc input:focus,
.ttb-shc select:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(34,211,238,.25);
}