/* ========================================
   Jack Tools – Tool Page Layout
======================================== */

/* ========================================
   Global tool page scaling
======================================== */

.jt-tool-container{
  transform:scale(0.9);
  transform-origin:top center;
  width:111.111%;
  margin-left:-5.555%;
}

@media(max-width:640px){
  .jt-tool-container{
    transform:none;
    width:100%;
    margin-left:0;
  }
}

.jt-tool-page{
  margin-top:40px;
}

.jt-tool-container{
  max-width:1025px;
  margin:0 auto 0px;
}

.jt-tool-content{
  max-width:1025px;
  margin:0 auto;
}

.section-block{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  padding:28px;
  margin-bottom:28px;
}

.section-title{
  font-size:26px;
  font-weight:800;
  margin:0 0 18px;
  color:#fff;
}

.section-text{
  color:var(--muted);
  line-height:1.7;
  font-size:15px;
}

.section-text p{
  margin:0 0 14px;
}

.section-text p:last-child{
  margin-bottom:0;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:20px;
}

.info-chip{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:14px 16px;
}

.info-chip strong{
  display:block;
  color:#fff;
  font-size:14px;
  margin-bottom:6px;
}

.info-chip span{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.examples-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.example-card{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:18px;
  padding:22px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  transition:all .25s ease;
}

.example-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,0.5);
}

.example-title{
  font-weight:700;
  font-size:18px;
  margin-bottom:14px;
  color:#fff;
}

.example-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  padding:6px 0;
  color:var(--muted);
}

.example-result{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.15);
  font-weight:700;
  color:#fff;
}

.faq-item{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  margin-bottom:16px;
  overflow:hidden;
}

.faq-question{
  width:100%;
  background:transparent;
  border:none;
  color:#fff;
  padding:20px;
  font-size:16px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.faq-icon{
  font-size:20px;
  transition:transform .25s;
}

.faq-item.active .faq-icon{
  transform:rotate(45deg);
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.faq-answer-inner{
  padding:0 20px 20px;
  color:var(--muted);
  line-height:1.6;
  font-size:15px;
}

.back-top-wrap{
  margin-top:22px;
}

.back-top-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  color:#fff;
  font-weight:600;
  font-size:14px;
  padding:12px 18px;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
  transition:all .25s ease;
}

.back-top-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.12);
}

/* ========================================
   Mortgage Calculator
======================================== */

.jt-mortgage-wrap{
  --card:rgba(255,255,255,0.07);
  --text:#f8fafc;
  --mortgage-muted:#cbd5e1;
  --border:rgba(255,255,255,0.12);
  --accent:#38bdf8;
  --accent-dark:#2563eb;
  --success-bg:rgba(255,255,255,0.08);
  --shadow:0 18px 40px rgba(0,0,0,0.35);
  --radius:20px;
  color:var(--text);
  width:100%;
  max-width:1025px;
  margin:0 auto;
}

.jt-mortgage-wrap *{
  box-sizing:border-box;
}

.jt-tool-container{
  padding-bottom:40px;
}

.jt-mortgage-header{
  text-align:center;
  margin-bottom:28px;
}

.jt-mortgage-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  font-weight:700;
  color:#ffffff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.jt-mortgage-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow:0 0 18px rgba(56,189,248,0.7);
}

.jt-mortgage-header h1{
  margin:0 0 10px;
  line-height:1.1;
  color:#ffffff;
}

.jt-mortgage-header h1{
  font-size:2.6rem;
}

.jt-mortgage-header p{
  margin:0 auto;
  max-width:760px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

.jt-mortgage-calculator{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:24px;
  align-items:start;
}

.jt-mortgage-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.jt-mortgage-card h2{
  margin:0 0 18px;
  font-size:1.25rem;
  color:#ffffff;
}

.jt-mortgage-form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.jt-mortgage-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.jt-mortgage-field.full{
  grid-column:1 / -1;
}

.jt-mortgage-wrap label{
  font-size:0.95rem;
  font-weight:600;
  color:#e2e8f0;
}

.jt-mortgage-input-wrap{
  position:relative;
}

.jt-mortgage-prefix,
.jt-mortgage-suffix{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  font-size:0.95rem;
  pointer-events:none;
}

.jt-mortgage-prefix{
  left:14px;
}

.jt-mortgage-suffix{
  right:14px;
}

.jt-mortgage-wrap input[type="text"],
.jt-mortgage-wrap input[type="range"]{
  width:100%;
}

.jt-mortgage-wrap input[type="text"]{
  height:50px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:0 14px;
  font-size:1rem;
  color:#ffffff;
  outline:none;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background:rgba(255,255,255,0.05);
  -webkit-appearance:none;
  appearance:none;
}

.jt-mortgage-input-wrap.has-prefix input[type="text"]{
  padding-left:34px;
}

.jt-mortgage-input-wrap.has-suffix input[type="text"]{
  padding-right:34px;
}

.jt-mortgage-wrap input[type="text"]:focus{
  border-color:rgba(125,211,252,0.7);
  box-shadow:0 0 0 4px rgba(56,189,248,0.12);
  background:rgba(255,255,255,0.07);
}

.jt-mortgage-range-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
}

.jt-mortgage-wrap input[type="range"]{
  accent-color:var(--accent);
}

.jt-mortgage-range-value{
  min-width:64px;
  text-align:right;
  font-weight:700;
  color:#e0f2fe;
}

.jt-mortgage-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.jt-mortgage-wrap button{
  border:0;
  border-radius:14px;
  height:50px;
  padding:0 18px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:all 0.25s ease;
}

.jt-mortgage-primary-btn{
  flex:1;
  min-width:180px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#ffffff;
  box-shadow:0 8px 25px rgba(0,0,0,0.35);
}

.jt-mortgage-primary-btn:hover{
  background:rgba(255,255,255,0.16);
  transform:translateY(-2px);
  box-shadow:0 14px 35px rgba(0,0,0,0.4);
}

.jt-mortgage-secondary-btn{
  background:rgba(255,255,255,0.08);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.12);
}

.jt-mortgage-secondary-btn:hover{
  background:rgba(255,255,255,0.12);
  transform:translateY(-1px);
}

.jt-mortgage-results{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.jt-mortgage-hero-result{
  background:var(--success-bg);
  border:1px solid rgba(125,211,252,0.2);
  border-radius:18px;
  padding:20px;
}

.jt-mortgage-hero-result .label{
  color:#cbd5f5;
  font-size:0.95rem;
  margin-bottom:8px;
}

.jt-mortgage-hero-result .amount{
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800;
  line-height:1;
  color:#ffffff;
  margin-bottom:10px;
}

.jt-mortgage-hero-result .subtext{
  color:#cbd5f5;
  font-size:0.95rem;
  line-height:1.5;
}

.jt-mortgage-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.jt-mortgage-stat{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,0.05);
}

.jt-mortgage-stat .label{
  color:#cbd5f5;
  font-size:0.9rem;
  margin-bottom:6px;
}

.jt-mortgage-stat .value{
  font-size:1.25rem;
  font-weight:800;
  color:#ffffff;
}

.jt-mortgage-breakdown{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:18px;
  margin-top:6px;
}

.jt-mortgage-breakdown h3{
  margin:0 0 12px;
  font-size:1rem;
  color:#ffffff;
}

.jt-mortgage-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px dashed rgba(255,255,255,0.1);
  font-size:0.96rem;
  color:#dbeafe;
}

.jt-mortgage-row strong{
  color:#ffffff;
}

.jt-mortgage-row:last-child{
  border-bottom:0;
}

.jt-mortgage-note{
  margin-top:16px;
  color:#cbd5f5;
  font-size:0.9rem;
  line-height:1.6;
}

@media(max-width:1000px){
  .examples-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .info-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:860px){
  .jt-mortgage-calculator{
    grid-template-columns:1fr;
  }

  .jt-mortgage-form-grid,
  .jt-mortgage-stats{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .jt-tool-container,
  .jt-tool-content{
    padding-left:12px;
    padding-right:12px;
  }

  .jt-tool-content{
  margin-top:0;
}

  .examples-grid{
    grid-template-columns:1fr;
  }

  .section-title{
    font-size:22px;
  }

  .section-block{
    padding:22px 18px;
  }

  .jt-mortgage-card{
    padding:20px;
  }

  .jt-mortgage-header h1{
    font-size:2rem;
  }

  .jt-tool-container{
  margin-bottom:0px;
}

.section-block{
  margin-bottom:24px;
}
}

/* ========================================
   VAT Calculator
======================================== */

.jt-vat-wrap{
  --card:rgba(255,255,255,0.07);
  --text:#f8fafc;
  --border:rgba(255,255,255,0.12);
  --accent:#38bdf8;
  --success-bg:rgba(255,255,255,0.08);
  --shadow:0 18px 40px rgba(0,0,0,0.35);
  --radius:20px;
  color:var(--text);
  width:100%;
  max-width:1025px;
  margin:0 auto;
  font-size:0.92rem;
}

.jt-vat-wrap *{
  box-sizing:border-box;
}

.jt-vat-header{
  text-align:center;
  margin-bottom:28px;
}

.jt-vat-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  font-weight:700;
  color:#ffffff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.jt-vat-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow:0 0 18px rgba(56,189,248,0.7);
}

.jt-vat-header h1{
  margin:0 0 10px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  color:#ffffff;
}

.jt-vat-header p{
  margin:0 auto;
  max-width:760px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

.jt-vat-calculator{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:24px;
  align-items:start;
}

.jt-vat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.jt-vat-card h2{
  margin:0 0 18px;
  font-size:1.25rem;
  color:#ffffff;
}

.jt-vat-form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.jt-vat-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.jt-vat-field.full{
  grid-column:1 / -1;
}

.jt-vat-wrap label{
  font-size:0.95rem;
  font-weight:600;
  color:#e2e8f0;
}

.jt-vat-input-wrap,
.jt-vat-select-wrap{
  position:relative;
}

.jt-vat-prefix,
.jt-vat-suffix{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  font-size:0.95rem;
  pointer-events:none;
}

.jt-vat-prefix{
  left:14px;
}

.jt-vat-suffix{
  right:14px;
}

.jt-vat-wrap input[type="number"],
.jt-vat-wrap select{
  width:100%;
  height:50px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:0 14px;
  font-size:1rem;
  color:#ffffff;
  outline:none;
  background:rgba(255,255,255,0.05);
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance:none;
  -webkit-appearance:none;
}

.jt-vat-input-wrap.has-prefix input[type="number"]{
  padding-left:34px;
}

.jt-vat-input-wrap.has-suffix input[type="number"]{
  padding-right:34px;
}

.jt-vat-wrap input[type="number"]:focus,
.jt-vat-wrap select:focus{
  border-color:rgba(125,211,252,0.7);
  box-shadow:0 0 0 4px rgba(56,189,248,0.12);
  background:rgba(255,255,255,0.07);
}

.jt-vat-select-wrap::after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  pointer-events:none;
}

.jt-vat-wrap select option{
  color:#111827;
  background:#ffffff;
}

.jt-vat-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.jt-vat-wrap button{
  border:0;
  border-radius:14px;
  height:50px;
  padding:0 18px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:all 0.25s ease;
}

.jt-vat-primary-btn{
  flex:1;
  min-width:180px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#ffffff;
  box-shadow:0 8px 25px rgba(0,0,0,0.35);
}

.jt-vat-primary-btn:hover{
  background:rgba(255,255,255,0.16);
  transform:translateY(-2px);
  box-shadow:0 14px 35px rgba(0,0,0,0.4);
}

.jt-vat-secondary-btn{
  background:rgba(255,255,255,0.08);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.12);
}

.jt-vat-secondary-btn:hover{
  background:rgba(255,255,255,0.12);
  transform:translateY(-1px);
}

.jt-vat-note{
  margin-top:16px;
  color:#cbd5f5;
  font-size:0.9rem;
  line-height:1.6;
}

.jt-vat-results{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.jt-vat-hero-result{
  background:var(--success-bg);
  border:1px solid rgba(125,211,252,0.2);
  border-radius:18px;
  padding:20px;
}

.jt-vat-hero-result .label{
  color:#cbd5f5;
  font-size:0.95rem;
  margin-bottom:8px;
}

.jt-vat-hero-result .amount{
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800;
  line-height:1;
  color:#ffffff;
  margin-bottom:10px;
}

.jt-vat-hero-result .subtext{
  color:#cbd5f5;
  font-size:0.95rem;
  line-height:1.5;
}

.jt-vat-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.jt-vat-stat{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,0.05);
}

.jt-vat-stat .label{
  color:#cbd5f5;
  font-size:0.9rem;
  margin-bottom:6px;
}

.jt-vat-stat .value{
  font-size:1.15rem;
  font-weight:800;
  color:#ffffff;
  line-height:1.35;
}

.jt-vat-breakdown{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:18px;
  margin-top:6px;
}

.jt-vat-breakdown h3{
  margin:0 0 12px;
  font-size:1rem;
  color:#ffffff;
}

.jt-vat-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px dashed rgba(255,255,255,0.1);
  font-size:0.96rem;
  color:#dbeafe;
}

.jt-vat-row strong{
  color:#ffffff;
  text-align:right;
}

.jt-vat-row:last-child{
  border-bottom:0;
}

@media(max-width:860px){
  .jt-vat-calculator,
  .jt-vat-form-grid,
  .jt-vat-stats{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .jt-vat-card{
    padding:20px;
  }

  .jt-vat-header h1{
    font-size:2rem;
  }
}

/* ========================================
   Stamp Duty Calculator
======================================== */

.jt-sdlt-wrap{
  --card:rgba(255,255,255,0.07);
  --text:#f8fafc;
  --border:rgba(255,255,255,0.12);
  --accent:#38bdf8;
  --accent-dark:#2563eb;
  --success-bg:rgba(255,255,255,0.08);
  --shadow:0 18px 40px rgba(0,0,0,0.35);
  --radius:20px;
  color:var(--text);
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.jt-sdlt-wrap *{
  box-sizing:border-box;
}

.jt-sdlt-header{
  text-align:center;
  margin-bottom:28px;
}

.jt-sdlt-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  font-weight:700;
  color:#ffffff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.jt-sdlt-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow:0 0 18px rgba(56,189,248,0.7);
}

.jt-sdlt-header h1{
  margin:0 0 10px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  color:#ffffff;
}

.jt-sdlt-header p{
  margin:0;
  color:#cbd5f5;
  font-size:1rem;
  line-height:1.6;
}

.jt-sdlt-calculator{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:24px;
  align-items:start;
}

.jt-sdlt-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.jt-sdlt-card h2{
  margin:0 0 18px;
  font-size:1.25rem;
  color:#ffffff;
}

.jt-sdlt-form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.jt-sdlt-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.jt-sdlt-field.full{
  grid-column:1 / -1;
}

.jt-sdlt-wrap label{
  font-size:0.95rem;
  font-weight:600;
  color:#e2e8f0;
}

.jt-sdlt-input-wrap,
.jt-sdlt-select-wrap{
  position:relative;
}

.jt-sdlt-prefix{
  position:absolute;
  top:50%;
  left:14px;
  transform:translateY(-50%);
  color:#94a3b8;
  font-size:0.95rem;
  pointer-events:none;
}

.jt-sdlt-select-wrap::after{
  content:"▾";
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  color:#94a3b8;
  pointer-events:none;
}

.jt-sdlt-wrap input[type="number"],
.jt-sdlt-wrap select{
  width:100%;
  height:50px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:0 14px;
  font-size:1rem;
  color:#ffffff;
  outline:none;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background:rgba(255,255,255,0.05);
  appearance:none;
  -webkit-appearance:none;
}

.jt-sdlt-input-wrap.has-prefix input[type="number"]{
  padding-left:34px;
}

.jt-sdlt-wrap input[type="number"]:focus,
.jt-sdlt-wrap select:focus{
  border-color:rgba(125,211,252,0.7);
  box-shadow:0 0 0 4px rgba(56,189,248,0.12);
  background:rgba(255,255,255,0.07);
}

.jt-sdlt-wrap select option{
  color:#111827;
  background:#ffffff;
}

.jt-sdlt-toggle-group{
  display:grid;
  gap:12px;
}

.jt-sdlt-toggle-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
}

.jt-sdlt-toggle-copy strong{
  display:block;
  color:#ffffff;
  font-size:0.95rem;
  margin-bottom:4px;
}

.jt-sdlt-toggle-copy span{
  color:#cbd5f5;
  font-size:0.9rem;
  line-height:1.5;
}

.jt-sdlt-switch{
  position:relative;
  width:56px;
  height:32px;
  flex-shrink:0;
}

.jt-sdlt-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}

.jt-sdlt-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.16);
  cursor:pointer;
  transition:0.25s ease;
}

.jt-sdlt-slider::before{
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  left:3px;
  top:3px;
  border-radius:999px;
  background:#ffffff;
  transition:0.25s ease;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
}

.jt-sdlt-switch input:checked + .jt-sdlt-slider{
  background:linear-gradient(135deg, rgba(56,189,248,0.95), rgba(37,99,235,0.95));
}

.jt-sdlt-switch input:checked + .jt-sdlt-slider::before{
  transform:translateX(24px);
}

.jt-sdlt-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.jt-sdlt-wrap button{
  border:0;
  border-radius:14px;
  height:50px;
  padding:0 18px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:all 0.25s ease;
}

.jt-sdlt-primary-btn{
  flex:1;
  min-width:180px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#ffffff;
  box-shadow:0 8px 25px rgba(0,0,0,0.35);
}

.jt-sdlt-primary-btn:hover{
  background:rgba(255,255,255,0.16);
  transform:translateY(-2px);
  box-shadow:0 14px 35px rgba(0,0,0,0.4);
}

.jt-sdlt-secondary-btn{
  background:rgba(255,255,255,0.08);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.12);
}

.jt-sdlt-secondary-btn:hover{
  background:rgba(255,255,255,0.12);
  transform:translateY(-1px);
}

.jt-sdlt-results{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.jt-sdlt-hero-result{
  background:var(--success-bg);
  border:1px solid rgba(125,211,252,0.2);
  border-radius:18px;
  padding:20px;
}

.jt-sdlt-hero-result .label{
  color:#cbd5f5;
  font-size:0.95rem;
  margin-bottom:8px;
}

.jt-sdlt-hero-result .amount{
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800;
  line-height:1;
  color:#ffffff;
  margin-bottom:10px;
}

.jt-sdlt-hero-result .subtext{
  color:#cbd5f5;
  font-size:0.95rem;
  line-height:1.5;
}

.jt-sdlt-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.jt-sdlt-stat{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,0.05);
}

.jt-sdlt-stat .label{
  color:#cbd5f5;
  font-size:0.9rem;
  margin-bottom:6px;
}

.jt-sdlt-stat .value{
  font-size:1.15rem;
  font-weight:800;
  color:#ffffff;
  line-height:1.35;
}

.jt-sdlt-breakdown{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:18px;
  margin-top:6px;
}

.jt-sdlt-breakdown h3{
  margin:0 0 12px;
  font-size:1rem;
  color:#ffffff;
}

.jt-sdlt-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,0.1);
  font-size:0.96rem;
  color:#dbeafe;
}

.jt-sdlt-row strong{
  color:#ffffff;
  text-align:right;
}

.jt-sdlt-row:last-child{
  border-bottom:0;
}

.jt-sdlt-note{
  margin-top:16px;
  color:#cbd5f5;
  font-size:0.9rem;
  line-height:1.6;
}

@media(max-width:860px){
  .jt-sdlt-calculator{
    grid-template-columns:1fr;
  }

  .jt-sdlt-form-grid,
  .jt-sdlt-stats{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .jt-sdlt-card{
    padding:20px;
  }

  .jt-sdlt-header h1{
    font-size:2rem;
  }

  .jt-sdlt-toggle-card{
    align-items:flex-start;
  }
}

/* =========================================================
   BORROWING POWER CALCULATOR
   ========================================================= */

.jt-borrow-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-borrow-wrap * {
  box-sizing: border-box;
}

.jt-borrow-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-borrow-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-borrow-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-borrow-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-borrow-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-borrow-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-borrow-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-borrow-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-borrow-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-borrow-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-borrow-field.full {
  grid-column: 1 / -1;
}

.jt-borrow-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-borrow-input-wrap {
  position: relative;
}

.jt-borrow-prefix,
.jt-borrow-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-borrow-prefix {
  left: 14px;
}

.jt-borrow-suffix {
  right: 14px;
}

.jt-borrow-wrap input[type="number"],
.jt-borrow-wrap input[type="range"] {
  width: 100%;
}

.jt-borrow-wrap input[type="number"] {
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255,255,255,0.05);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-borrow-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-borrow-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-borrow-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-borrow-range-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.jt-borrow-wrap input[type="range"] {
  accent-color: var(--accent);
}

.jt-borrow-range-value {
  min-width: 64px;
  text-align: right;
  font-weight: 700;
  color: #e0f2fe;
}

.jt-borrow-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-borrow-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-borrow-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-borrow-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-borrow-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-borrow-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-borrow-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-borrow-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-borrow-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-borrow-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-borrow-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-borrow-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-borrow-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-borrow-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-borrow-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-borrow-stat .value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
}

.jt-borrow-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-borrow-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-borrow-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-borrow-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-borrow-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for borrowing page */

.borrow-content {
  margin-top: 60px;
  color: #e6edf7;
}

.borrow-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.borrow-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.borrow-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.borrow-content .section-text p {
  margin: 0 0 14px;
}

.borrow-content .section-text p:last-child {
  margin-bottom: 0;
}

.borrow-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.borrow-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.borrow-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.borrow-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.borrow-content .back-top-wrap {
  margin-top: 22px;
  display: flex;
  justify-content: flex-start;
}

.borrow-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.borrow-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.borrow-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.borrow-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.borrow-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.borrow-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.borrow-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.borrow-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.borrow-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .borrow-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .borrow-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-borrow-calculator {
    grid-template-columns: 1fr;
  }

  .jt-borrow-form-grid,
  .jt-borrow-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-borrow-card {
    padding: 20px;
  }

  .jt-borrow-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .borrow-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .borrow-content .section-block {
    padding: 22px 18px;
  }

  .borrow-content .section-title {
    font-size: 24px;
  }
}

/* =========================================================
   MORTGAGE OVERPAYMENT CALCULATOR
   ========================================================= */

.jt-overpay-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-overpay-wrap * {
  box-sizing: border-box;
}

.jt-overpay-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-overpay-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-overpay-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-overpay-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-overpay-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-overpay-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-overpay-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-overpay-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-overpay-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-overpay-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-overpay-field.full {
  grid-column: 1 / -1;
}

.jt-overpay-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-overpay-input-wrap {
  position: relative;
}

.jt-overpay-prefix,
.jt-overpay-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-overpay-prefix {
  left: 14px;
}

.jt-overpay-suffix {
  right: 14px;
}

.jt-overpay-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255,255,255,0.05);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-overpay-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-overpay-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-overpay-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-overpay-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-overpay-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-overpay-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-overpay-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-overpay-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-overpay-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-overpay-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-overpay-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-overpay-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-overpay-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-overpay-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-overpay-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-overpay-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-overpay-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-overpay-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-overpay-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-overpay-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-overpay-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-overpay-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-overpay-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-overpay-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for overpayment page */

.overpay-content {
  margin-top: 60px;
  color: #e6edf7;
}

.overpay-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.overpay-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.overpay-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.overpay-content .section-text p {
  margin: 0 0 14px;
}

.overpay-content .section-text p:last-child {
  margin-bottom: 0;
}

.overpay-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.overpay-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.overpay-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.overpay-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.overpay-content .back-top-wrap {
  margin-top: 22px;
  display: flex;
  justify-content: flex-start;
}

.overpay-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.overpay-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.overpay-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.overpay-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.overpay-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.overpay-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.overpay-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.overpay-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.overpay-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .overpay-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .overpay-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-overpay-calculator {
    grid-template-columns: 1fr;
  }

  .jt-overpay-form-grid,
  .jt-overpay-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-overpay-card {
    padding: 20px;
  }

  .jt-overpay-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .overpay-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .overpay-content .section-block {
    padding: 22px 18px;
  }

  .overpay-content .section-title {
    font-size: 24px;
  }
}

/* =========================================================
   REMORTGAGE CALCULATOR
   ========================================================= */

.jt-remortgage-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-remortgage-wrap * {
  box-sizing: border-box;
}

.jt-remortgage-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-remortgage-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-remortgage-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-remortgage-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-remortgage-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-remortgage-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-remortgage-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-remortgage-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-remortgage-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-remortgage-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-remortgage-field.full {
  grid-column: 1 / -1;
}

.jt-remortgage-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-remortgage-input-wrap {
  position: relative;
}

.jt-remortgage-prefix,
.jt-remortgage-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-remortgage-prefix {
  left: 14px;
}

.jt-remortgage-suffix {
  right: 14px;
}

.jt-remortgage-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255,255,255,0.05);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-remortgage-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-remortgage-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-remortgage-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-remortgage-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-remortgage-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-remortgage-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-remortgage-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-remortgage-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-remortgage-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-remortgage-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-remortgage-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-remortgage-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-remortgage-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-remortgage-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-remortgage-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-remortgage-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-remortgage-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-remortgage-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-remortgage-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-remortgage-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-remortgage-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-remortgage-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-remortgage-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-remortgage-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for remortgage page */

.remortgage-content {
  margin-top: 60px;
  color: #e6edf7;
}

.remortgage-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.remortgage-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.remortgage-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.remortgage-content .section-text p {
  margin: 0 0 14px;
}

.remortgage-content .section-text p:last-child {
  margin-bottom: 0;
}

.remortgage-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.remortgage-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.remortgage-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.remortgage-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.remortgage-content .back-top-wrap {
  margin-top: 22px;
  display: flex;
  justify-content: flex-start;
}

.remortgage-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.remortgage-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.remortgage-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.remortgage-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.remortgage-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.remortgage-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.remortgage-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.remortgage-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.remortgage-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .remortgage-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .remortgage-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-remortgage-calculator {
    grid-template-columns: 1fr;
  }

  .jt-remortgage-form-grid,
  .jt-remortgage-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-remortgage-card {
    padding: 20px;
  }

  .jt-remortgage-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .remortgage-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .remortgage-content .section-block {
    padding: 22px 18px;
  }

  .remortgage-content .section-title {
    font-size: 24px;
  }
}

/* =========================================================
   COMPOUND INTEREST CALCULATOR
   ========================================================= */

.jt-compound-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-compound-wrap * {
  box-sizing: border-box;
}

.jt-compound-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-compound-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-compound-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-compound-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-compound-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-compound-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-compound-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-compound-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-compound-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-compound-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-compound-field.full {
  grid-column: 1 / -1;
}

.jt-compound-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-compound-input-wrap {
  position: relative;
}

.jt-compound-prefix,
.jt-compound-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-compound-prefix {
  left: 14px;
}

.jt-compound-suffix {
  right: 14px;
}

.jt-compound-wrap input[type="number"],
.jt-compound-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255,255,255,0.05);
  appearance: none;
  -webkit-appearance: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-compound-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-compound-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-compound-wrap input[type="number"]:focus,
.jt-compound-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-compound-select-wrap {
  position: relative;
}

.jt-compound-select-wrap::after {
  content: "▾";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-compound-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-compound-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-compound-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-compound-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-compound-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-compound-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-compound-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-compound-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-compound-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-compound-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-compound-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-compound-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-compound-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-compound-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-compound-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-compound-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-compound-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-compound-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-compound-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-compound-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-compound-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-compound-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for compound page */

.compound-content {
  margin-top: 60px;
  color: #e6edf7;
}

.compound-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.compound-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.compound-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.compound-content .section-text p {
  margin: 0 0 14px;
}

.compound-content .section-text p:last-child {
  margin-bottom: 0;
}

.compound-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.compound-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.compound-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.compound-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.compound-content .back-top-wrap {
  margin-top: 22px;
}

.compound-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.compound-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.compound-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.compound-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.compound-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.compound-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.compound-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.compound-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.compound-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .compound-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .compound-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-compound-calculator {
    grid-template-columns: 1fr;
  }

  .jt-compound-form-grid,
  .jt-compound-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-compound-card {
    padding: 20px;
  }

  .jt-compound-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .compound-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .compound-content .section-title {
    font-size: 24px;
  }
}

/* =========================================================
   LOAN REPAYMENT CALCULATOR
   ========================================================= */

.jt-loan-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-loan-wrap * {
  box-sizing: border-box;
}

.jt-loan-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-loan-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-loan-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-loan-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-loan-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-loan-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-loan-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-loan-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-loan-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-loan-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-loan-field.full {
  grid-column: 1 / -1;
}

.jt-loan-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-loan-input-wrap {
  position: relative;
}

.jt-loan-prefix,
.jt-loan-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-loan-prefix {
  left: 14px;
}

.jt-loan-suffix {
  right: 14px;
}

.jt-loan-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255,255,255,0.05);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-loan-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-loan-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-loan-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-loan-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-loan-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-loan-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-loan-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-loan-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-loan-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-loan-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-loan-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-loan-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-loan-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-loan-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-loan-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-loan-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-loan-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-loan-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-loan-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-loan-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-loan-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-loan-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-loan-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-loan-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for loan page */

.loan-content {
  margin-top: 60px;
  color: #e6edf7;
}

.loan-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.loan-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.loan-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.loan-content .section-text p {
  margin: 0 0 14px;
}

.loan-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.loan-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.loan-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.loan-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.loan-content .back-top-wrap {
  margin-top: 22px;
}

.loan-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.loan-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.loan-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.loan-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.loan-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.loan-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.loan-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.loan-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .loan-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .loan-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-loan-calculator {
    grid-template-columns: 1fr;
  }

  .jt-loan-form-grid,
  .jt-loan-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-loan-card {
    padding: 20px;
  }

  .jt-loan-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .loan-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .loan-content .section-title {
    font-size: 24px;
  }
}

/* =========================================================
   SALARY AFTER TAX CALCULATOR
   ========================================================= */

.jt-salary-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-salary-wrap * {
  box-sizing: border-box;
}

.jt-salary-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-salary-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-salary-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-salary-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-salary-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-salary-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-salary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-salary-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-salary-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-salary-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-salary-field.full {
  grid-column: 1 / -1;
}

.jt-salary-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-salary-input-wrap,
.jt-salary-select-wrap {
  position: relative;
}

.jt-salary-prefix,
.jt-salary-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-salary-prefix {
  left: 14px;
}

.jt-salary-suffix {
  right: 14px;
}

.jt-salary-wrap input[type="number"],
.jt-salary-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-salary-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-salary-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-salary-wrap input[type="number"]:focus,
.jt-salary-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-salary-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-salary-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-salary-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-salary-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-salary-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-salary-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-salary-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-salary-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-salary-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-salary-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-salary-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-salary-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-salary-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-salary-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-salary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-salary-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-salary-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-salary-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-salary-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-salary-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-salary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-salary-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-salary-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for salary page */

.salary-content {
  margin-top: 60px;
  color: #e6edf7;
}

.salary-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.salary-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.salary-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.salary-content .section-text p {
  margin: 0 0 14px;
}

.salary-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.salary-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.salary-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.salary-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.salary-content .back-top-wrap {
  margin-top: 22px;
}

.salary-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.salary-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.salary-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.salary-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.salary-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.salary-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.salary-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.salary-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.salary-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .salary-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .salary-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-salary-calculator,
  .jt-salary-form-grid,
  .jt-salary-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-salary-card {
    padding: 20px;
  }

  .jt-salary-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .salary-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .salary-content .section-title {
    font-size: 24px;
  }

  .salary-content .section-block {
    padding: 22px 18px;
  }
}

/* =========================================================
   SAVINGS CALCULATOR
   ========================================================= */

.jt-savings-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-savings-wrap * {
  box-sizing: border-box;
}

.jt-savings-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-savings-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-savings-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-savings-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-savings-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-savings-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-savings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-savings-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-savings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-savings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-savings-field.full {
  grid-column: 1 / -1;
}

.jt-savings-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-savings-input-wrap,
.jt-savings-select-wrap {
  position: relative;
}

.jt-savings-prefix,
.jt-savings-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-savings-prefix {
  left: 14px;
}

.jt-savings-suffix {
  right: 14px;
}

.jt-savings-wrap input[type="number"],
.jt-savings-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-savings-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-savings-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-savings-wrap input[type="number"]:focus,
.jt-savings-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-savings-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-savings-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-savings-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-savings-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-savings-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-savings-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-savings-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-savings-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-savings-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-savings-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-savings-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-savings-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-savings-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-savings-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-savings-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-savings-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-savings-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-savings-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-savings-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-savings-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-savings-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-savings-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-savings-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for savings page */

.savings-content {
  margin-top: 60px;
  color: #e6edf7;
}

.savings-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.savings-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.savings-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.savings-content .section-text p {
  margin: 0 0 14px;
}

.savings-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.savings-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.savings-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.savings-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.savings-content .back-top-wrap {
  margin-top: 22px;
}

.savings-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.savings-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.savings-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.savings-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.savings-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.savings-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.savings-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.savings-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.savings-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .savings-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .savings-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-savings-calculator,
  .jt-savings-form-grid,
  .jt-savings-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-savings-card {
    padding: 20px;
  }

  .jt-savings-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .savings-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .savings-content .section-title {
    font-size: 24px;
  }

  .savings-content .section-block {
    padding: 22px 18px;
  }
}

/* =========================================================
   CREDIT CARD INTEREST CALCULATOR
   ========================================================= */

.jt-cc-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-cc-wrap * {
  box-sizing: border-box;
}

.jt-cc-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-cc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-cc-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-cc-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-cc-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-cc-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-cc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-cc-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-cc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-cc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-cc-field.full {
  grid-column: 1 / -1;
}

.jt-cc-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-cc-input-wrap {
  position: relative;
}

.jt-cc-prefix,
.jt-cc-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-cc-prefix {
  left: 14px;
}

.jt-cc-suffix {
  right: 14px;
}

.jt-cc-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-cc-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-cc-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-cc-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-cc-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-cc-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-cc-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-cc-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-cc-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-cc-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-cc-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-cc-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-cc-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-cc-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-cc-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-cc-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-cc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-cc-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-cc-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-cc-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-cc-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-cc-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-cc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-cc-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-cc-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for credit card page */

.credit-card-content {
  margin-top: 60px;
  color: #e6edf7;
}

.credit-card-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.credit-card-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.credit-card-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.credit-card-content .section-text p {
  margin: 0 0 14px;
}

.credit-card-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.credit-card-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.credit-card-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.credit-card-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.credit-card-content .back-top-wrap {
  margin-top: 22px;
}

.credit-card-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.credit-card-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.credit-card-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.credit-card-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.credit-card-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.credit-card-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.credit-card-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.credit-card-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.credit-card-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .credit-card-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .credit-card-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-cc-calculator,
  .jt-cc-form-grid,
  .jt-cc-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-cc-card {
    padding: 20px;
  }

  .jt-cc-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .credit-card-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .credit-card-content .section-title {
    font-size: 24px;
  }

  .credit-card-content .section-block {
    padding: 22px 18px;
  }
}

/* =========================================================
   INFLATION CALCULATOR
   ========================================================= */

.jt-inflation-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-inflation-wrap * {
  box-sizing: border-box;
}

.jt-inflation-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-inflation-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-inflation-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-inflation-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-inflation-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-inflation-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-inflation-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-inflation-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-inflation-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-inflation-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-inflation-field.full {
  grid-column: 1 / -1;
}

.jt-inflation-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-inflation-input-wrap {
  position: relative;
}

.jt-inflation-prefix,
.jt-inflation-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-inflation-prefix {
  left: 14px;
}

.jt-inflation-suffix {
  right: 14px;
}

.jt-inflation-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-inflation-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-inflation-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-inflation-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-inflation-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-inflation-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-inflation-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-inflation-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-inflation-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-inflation-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-inflation-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-inflation-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-inflation-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-inflation-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-inflation-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-inflation-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-inflation-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-inflation-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-inflation-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-inflation-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-inflation-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-inflation-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-inflation-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-inflation-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-inflation-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for inflation page */

.inflation-content {
  margin-top: 60px;
  color: #e6edf7;
}

.inflation-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.inflation-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.inflation-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.inflation-content .section-text p {
  margin: 0 0 14px;
}

.inflation-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.inflation-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.inflation-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.inflation-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.inflation-content .back-top-wrap {
  margin-top: 22px;
}

.inflation-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.inflation-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.inflation-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.inflation-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.inflation-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.inflation-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.inflation-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.inflation-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.inflation-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .inflation-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .inflation-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-inflation-calculator,
  .jt-inflation-form-grid,
  .jt-inflation-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-inflation-card {
    padding: 20px;
  }

  .jt-inflation-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .inflation-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .inflation-content .section-title {
    font-size: 24px;
  }

  .inflation-content .section-block {
    padding: 22px 18px;
  }
}

/* =========================================================
   PERCENTAGE CALCULATOR
   ========================================================= */

.jt-percent-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-percent-wrap * {
  box-sizing: border-box;
}

.jt-percent-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-percent-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-percent-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-percent-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-percent-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-percent-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-percent-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-percent-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-percent-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-percent-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-percent-field.full {
  grid-column: 1 / -1;
}

.jt-percent-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-percent-input-wrap,
.jt-percent-select-wrap {
  position: relative;
}

.jt-percent-prefix,
.jt-percent-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-percent-prefix {
  left: 14px;
}

.jt-percent-suffix {
  right: 14px;
}

.jt-percent-wrap input[type="number"],
.jt-percent-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-percent-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-percent-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-percent-wrap input[type="number"]:focus,
.jt-percent-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-percent-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-percent-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-percent-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-percent-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-percent-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-percent-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-percent-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-percent-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-percent-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-percent-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-percent-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-percent-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-percent-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-percent-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-percent-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-percent-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-percent-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-percent-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-percent-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-percent-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-percent-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-percent-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-percent-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for percentage page */

.percentage-content {
  margin-top: 60px;
  color: #e6edf7;
}

.percentage-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.percentage-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.percentage-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.percentage-content .section-text p {
  margin: 0 0 14px;
}

.percentage-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.percentage-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.percentage-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.percentage-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.percentage-content .back-top-wrap {
  margin-top: 22px;
}

.percentage-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.percentage-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.percentage-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.percentage-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.percentage-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.percentage-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.percentage-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.percentage-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.percentage-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .percentage-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .percentage-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-percent-calculator,
  .jt-percent-form-grid,
  .jt-percent-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-percent-card {
    padding: 20px;
  }

  .jt-percent-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .percentage-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .percentage-content .section-title {
    font-size: 24px;
  }

  .percentage-content .section-block {
    padding: 22px 18px;
  }
}

/* =========================================================
   DISCOUNT CALCULATOR
   ========================================================= */

.jt-discount-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-discount-wrap * {
  box-sizing: border-box;
}

.jt-discount-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-discount-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-discount-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-discount-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-discount-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-discount-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-discount-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-discount-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-discount-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-discount-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-discount-field.full {
  grid-column: 1 / -1;
}

.jt-discount-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-discount-input-wrap,
.jt-discount-select-wrap {
  position: relative;
}

.jt-discount-prefix,
.jt-discount-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-discount-prefix {
  left: 14px;
}

.jt-discount-suffix {
  right: 14px;
}

.jt-discount-wrap input[type="number"],
.jt-discount-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-discount-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-discount-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-discount-wrap input[type="number"]:focus,
.jt-discount-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-discount-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-discount-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-discount-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-discount-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-discount-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-discount-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-discount-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-discount-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-discount-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-discount-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-discount-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-discount-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-discount-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-discount-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-discount-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-discount-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-discount-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-discount-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-discount-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-discount-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-discount-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-discount-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-discount-row:last-child {
  border-bottom: 0;
}

/* Shared lower content styling for discount page */

.discount-content {
  margin-top: 60px;
  color: #e6edf7;
}

.discount-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.discount-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.discount-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.discount-content .section-text p {
  margin: 0 0 14px;
}

.discount-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.discount-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.discount-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.discount-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.discount-content .back-top-wrap {
  margin-top: 22px;
}

.discount-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.discount-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.discount-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.discount-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.discount-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.discount-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.discount-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.discount-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.discount-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .discount-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .discount-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-discount-calculator,
  .jt-discount-form-grid,
  .jt-discount-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-discount-card {
    padding: 20px;
  }

  .jt-discount-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .discount-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .discount-content .section-title {
    font-size: 24px;
  }

  .discount-content .section-block {
    padding: 22px 18px;
  }
}

/* =========================================================
   ROI CALCULATOR
   ========================================================= */

.jt-roi-wrap {
  --card: rgba(255,255,255,0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255,255,255,0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255,255,255,0.08);
  --shadow: 0 18px 40px rgba(0,0,0,0.35);
  --radius: 20px;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-roi-wrap * {
  box-sizing: border-box;
}

.jt-roi-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-roi-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-roi-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow: 0 0 18px rgba(56,189,248,.7);
}

.jt-roi-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem,4vw,3rem);
  color: #fff;
  line-height: 1.1;
}

.jt-roi-header p {
  margin: 0;
  color: #cbd5f5;
  line-height: 1.6;
}

.jt-roi-calculator {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: start;
}

.jt-roi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-roi-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #fff;
}

.jt-roi-form-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px;
}

.jt-roi-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-roi-field.full {
  grid-column: 1 / -1;
}

.jt-roi-wrap label {
  font-size: .95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-roi-input-wrap {
  position: relative;
}

.jt-roi-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-roi-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px 0 34px;
  font-size: 1rem;
  color: #fff;
  background: rgba(255,255,255,0.05);
  outline: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.jt-roi-wrap input[type="number"]:focus {
  border-color: rgba(125,211,252,.7);
  box-shadow: 0 0 0 4px rgba(56,189,248,.12);
  background: rgba(255,255,255,0.07);
}

.jt-roi-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-roi-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: all .25s ease;
}

.jt-roi-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.jt-roi-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-roi-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-roi-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-roi-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-roi-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125,211,252,0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-roi-hero-result .label {
  color: #cbd5f5;
  margin-bottom: 8px;
  font-size: .95rem;
}

.jt-roi-hero-result .amount {
  font-size: clamp(2rem,4vw,2.8rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.jt-roi-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-roi-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-roi-stat .label {
  color: #cbd5f5;
  font-size: .9rem;
  margin-bottom: 6px;
}

.jt-roi-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
}

/* Shared lower content styling for ROI page */

.roi-content {
  margin-top: 60px;
  color: #e6edf7;
}

.roi-content .section-block {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 28px;
  margin-bottom: 28px;
}

.roi-content .section-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}

.roi-content .section-text {
  color: #cbd5f5;
  line-height: 1.75;
  font-size: 15px;
}

.roi-content .section-text p {
  margin: 0 0 14px;
}

.roi-content .info-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 20px;
}

.roi-content .info-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
}

.roi-content .info-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.roi-content .info-chip span {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.5;
}

.roi-content .back-top-wrap {
  margin-top: 22px;
}

.roi-content .back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all .25s ease;
}

.roi-content .back-top-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.38);
}

.roi-content .examples-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.roi-content .example-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: all .25s ease;
}

.roi-content .example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.roi-content .example-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
  color: #fff;
}

.roi-content .example-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  color: #cbd5f5;
  gap: 10px;
}

.roi-content .example-row span:last-child {
  text-align: right;
  color: #fff;
}

.roi-content .example-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1000px) {
  .roi-content .examples-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .roi-content .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .jt-roi-calculator,
  .jt-roi-form-grid,
  .jt-roi-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-roi-card {
    padding: 20px;
  }

  .jt-roi-header h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .roi-content .examples-grid {
    grid-template-columns: 1fr;
  }

  .roi-content .section-title {
    font-size: 24px;
  }

  .roi-content .section-block {
    padding: 22px 18px;
  }
}

.jt-breakeven-wrap {
  --jt-breakeven-card: rgba(255, 255, 255, 0.07);
  --jt-breakeven-text: #f8fafc;
  --jt-breakeven-muted: #cbd5e1;
  --jt-breakeven-border: rgba(255, 255, 255, 0.12);
  --jt-breakeven-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-breakeven-radius: 20px;
  width: 100%;
  color: var(--jt-breakeven-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-breakeven-wrap * {
  box-sizing: border-box;
}

.jt-breakeven-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-breakeven-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-breakeven-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-breakeven-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-breakeven-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-breakeven-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-breakeven-card {
  background: var(--jt-breakeven-card);
  border: 1px solid var(--jt-breakeven-border);
  border-radius: var(--jt-breakeven-radius);
  box-shadow: var(--jt-breakeven-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-breakeven-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-breakeven-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-breakeven-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-breakeven-field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-breakeven-input-wrap {
  position: relative;
}

.jt-breakeven-prefix {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-breakeven-input-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0 14px 0 34px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-breakeven-input-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255, 255, 255, 0.07);
}

.jt-breakeven-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-breakeven-primary-btn,
.jt-breakeven-secondary-btn {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-breakeven-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.jt-breakeven-primary-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

.jt-breakeven-secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.jt-breakeven-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.jt-breakeven-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.92rem;
  line-height: 1.6;
}

.jt-breakeven-note.is-error {
  color: #fecdd3;
}

.jt-breakeven-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-breakeven-hero-result {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-breakeven-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-breakeven-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-breakeven-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-breakeven-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.jt-breakeven-stat {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.jt-breakeven-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-breakeven-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-breakeven-breakdown {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-breakeven-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-breakeven-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-breakeven-row:last-child {
  border-bottom: 0;
}

.jt-breakeven-row strong {
  color: #ffffff;
  text-align: right;
}

@media (max-width: 860px) {
  .jt-breakeven-calculator,
  .jt-breakeven-form-grid,
  .jt-breakeven-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-breakeven-card {
    padding: 20px;
  }

  .jt-breakeven-header h1 {
    font-size: 2rem;
  }
}

.jt-margin-wrap {
  --jt-margin-card: rgba(255, 255, 255, 0.07);
  --jt-margin-text: #f8fafc;
  --jt-margin-muted: #cbd5e1;
  --jt-margin-border: rgba(255, 255, 255, 0.12);
  --jt-margin-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-margin-radius: 20px;
  width: 100%;
  color: var(--jt-margin-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-margin-wrap * {
  box-sizing: border-box;
}

.jt-margin-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-margin-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-margin-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-margin-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-margin-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-margin-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-margin-card {
  background: var(--jt-margin-card);
  border: 1px solid var(--jt-margin-border);
  border-radius: var(--jt-margin-radius);
  box-shadow: var(--jt-margin-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-margin-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-margin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-margin-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-margin-field.full {
  grid-column: 1 / -1;
}

.jt-margin-field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-margin-input-wrap {
  position: relative;
}

.jt-margin-prefix,
.jt-margin-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-margin-prefix {
  left: 14px;
}

.jt-margin-suffix {
  right: 14px;
}

.jt-margin-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-margin-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-margin-input-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-margin-input-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-margin-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-margin-primary-btn,
.jt-margin-secondary-btn {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-margin-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-margin-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-margin-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-margin-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-margin-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-margin-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-margin-hero-result {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-margin-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-margin-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-margin-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-margin-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.jt-margin-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-margin-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-margin-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-margin-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-margin-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-margin-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-margin-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-margin-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-margin-calculator,
  .jt-margin-form-grid,
  .jt-margin-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-margin-card {
    padding: 20px;
  }

  .jt-margin-header h1 {
    font-size: 2rem;
  }
}

.jt-payrise-wrap {
  --jt-payrise-card: rgba(255, 255, 255, 0.07);
  --jt-payrise-text: #f8fafc;
  --jt-payrise-muted: #cbd5e1;
  --jt-payrise-border: rgba(255, 255, 255, 0.12);
  --jt-payrise-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-payrise-radius: 20px;
  width: 100%;
  color: var(--jt-payrise-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-payrise-wrap * {
  box-sizing: border-box;
}

.jt-payrise-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-payrise-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-payrise-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-payrise-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-payrise-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-payrise-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-payrise-card {
  background: var(--jt-payrise-card);
  border: 1px solid var(--jt-payrise-border);
  border-radius: var(--jt-payrise-radius);
  box-shadow: var(--jt-payrise-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-payrise-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-payrise-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-payrise-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-payrise-field.full {
  grid-column: 1 / -1;
}

.jt-payrise-field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-payrise-input-wrap {
  position: relative;
}

.jt-payrise-prefix,
.jt-payrise-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-payrise-prefix {
  left: 14px;
}

.jt-payrise-suffix {
  right: 14px;
}

.jt-payrise-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-payrise-input-wrap.has-suffix input[type="number"] {
  padding-right: 34px;
}

.jt-payrise-input-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-payrise-input-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-payrise-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-payrise-primary-btn,
.jt-payrise-secondary-btn {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-payrise-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-payrise-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-payrise-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-payrise-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-payrise-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-payrise-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-payrise-hero-result {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-payrise-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-payrise-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-payrise-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-payrise-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.jt-payrise-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-payrise-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-payrise-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-payrise-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-payrise-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-payrise-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-payrise-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-payrise-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-payrise-calculator,
  .jt-payrise-form-grid,
  .jt-payrise-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-payrise-card {
    padding: 20px;
  }

  .jt-payrise-header h1 {
    font-size: 2rem;
  }
}

.jt-afford-wrap {
  --jt-afford-card: rgba(255, 255, 255, 0.07);
  --jt-afford-text: #f8fafc;
  --jt-afford-muted: #cbd5e1;
  --jt-afford-border: rgba(255, 255, 255, 0.12);
  --jt-afford-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-afford-radius: 20px;
  width: 100%;
  color: var(--jt-afford-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-afford-wrap * {
  box-sizing: border-box;
}

.jt-afford-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-afford-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-afford-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-afford-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-afford-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-afford-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-afford-card {
  background: var(--jt-afford-card);
  border: 1px solid var(--jt-afford-border);
  border-radius: var(--jt-afford-radius);
  box-shadow: var(--jt-afford-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-afford-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-afford-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-afford-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-afford-field.full {
  grid-column: 1 / -1;
}

.jt-afford-field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-afford-input-wrap {
  position: relative;
}

.jt-afford-prefix,
.jt-afford-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-afford-prefix {
  left: 14px;
}

.jt-afford-suffix {
  right: 14px;
}

.jt-afford-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-afford-input-wrap.has-suffix input[type="number"] {
  padding-right: 42px;
}

.jt-afford-input-wrap input[type="number"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-afford-input-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-afford-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-afford-primary-btn,
.jt-afford-secondary-btn {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-afford-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-afford-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-afford-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-afford-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-afford-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-afford-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-afford-hero-result {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-afford-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-afford-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-afford-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-afford-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.jt-afford-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-afford-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-afford-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-afford-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-afford-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-afford-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-afford-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-afford-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-afford-calculator,
  .jt-afford-form-grid,
  .jt-afford-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-afford-card {
    padding: 20px;
  }

  .jt-afford-header h1 {
    font-size: 2rem;
  }
}

.jt-calc-wrap {
  --jt-calc-card: rgba(255, 255, 255, 0.065);
  --jt-calc-card-strong: rgba(255, 255, 255, 0.09);
  --jt-calc-text: #f8fafc;
  --jt-calc-muted: #cbd5e1;
  --jt-calc-border: rgba(255, 255, 255, 0.12);
  --jt-calc-border-soft: rgba(255, 255, 255, 0.08);
  --jt-calc-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 8px 20px rgba(0, 0, 0, 0.22);
  --jt-calc-radius: 22px;
  --jt-calc-accent: #38bdf8;
  --jt-calc-accent-strong: #60a5fa;
  --jt-calc-equals: #93c5fd;
  width: 100%;
  color: var(--jt-calc-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: relative;
}

.jt-calc-wrap::before {
  content: "";
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.08), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(96, 165, 250, 0.08), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.04), transparent 35%);
  pointer-events: none;
  filter: blur(12px);
}

.jt-calc-wrap * {
  box-sizing: border-box;
}

.jt-calc-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-calc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
}

.jt-calc-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-calc-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-calc-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-calc-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.jt-calc-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  border: 1px solid var(--jt-calc-border);
  border-radius: var(--jt-calc-radius);
  box-shadow: var(--jt-calc-shadow);
  padding: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}

.jt-calc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02) 24%,
    transparent 60%
  );
  pointer-events: none;
}

.jt-calc-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.jt-calc-machine {
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.jt-calc-screen {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.48));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 18px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -12px 24px rgba(0,0,0,0.16),
    0 10px 24px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
}

.jt-calc-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    transparent 32%,
    transparent 68%,
    rgba(255,255,255,0.03)
  );
  pointer-events: none;
}

.jt-calc-expression {
  min-height: 24px;
  text-align: right;
  color: #cbd5f5;
  font-size: 0.95rem;
  word-break: break-all;
  opacity: 0.9;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

.jt-calc-display {
  text-align: right;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  word-break: break-all;
  text-shadow: 0 2px 18px rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
  transform-origin: right center;
}

.jt-calc-keypad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.jt-calc-btn {
  position: relative;
  isolation: isolate;
  height: 62px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 750;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    filter 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 18px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.jt-calc-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.01) 45%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}

.jt-calc-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 24px rgba(0,0,0,0.22);
}

.jt-calc-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.18),
    0 6px 12px rgba(0,0,0,0.16);
}

.jt-calc-btn.operator {
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.18),
    rgba(56, 189, 248, 0.09)
  );
  border-color: rgba(56, 189, 248, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 22px rgba(14, 116, 144, 0.18);
}

.jt-calc-btn.operator:hover {
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.24),
    rgba(56, 189, 248, 0.12)
  );
  border-color: rgba(125, 211, 252, 0.38);
}

.jt-calc-btn.action {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
}

.jt-calc-btn.equals {
  background: linear-gradient(
    180deg,
    rgba(147, 197, 253, 0.3),
    rgba(96, 165, 250, 0.2)
  );
  border-color: rgba(147, 197, 253, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 14px 28px rgba(59, 130, 246, 0.22);
}

.jt-calc-btn.equals:hover {
  background: linear-gradient(
    180deg,
    rgba(147, 197, 253, 0.38),
    rgba(96, 165, 250, 0.24)
  );
  border-color: rgba(191, 219, 254, 0.55);
  filter: brightness(1.03);
}

.jt-calc-btn.zero {
  grid-column: span 2;
}

.jt-calc-btn:focus-visible {
  outline: none;
  border-color: rgba(191, 219, 254, 0.8);
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 24px rgba(0,0,0,0.2);
}

.jt-calc-note {
  margin-top: 16px;
  text-align: center;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.jt-calc-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.jt-calc-hero-result {
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05));
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 28px rgba(0,0,0,0.14);
  transform-origin: center;
}

.jt-calc-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-calc-hero-result .amount {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 10px;
  word-break: break-all;
}

.jt-calc-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-calc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.jt-calc-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.jt-calc-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-calc-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  word-break: break-word;
}

.jt-calc-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-calc-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-calc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-calc-row strong {
  color: #ffffff;
  text-align: right;
  word-break: break-word;
}

.jt-calc-row:last-child {
  border-bottom: 0;
}

/* Animations */

.jt-pop {
  animation: jtPop 180ms ease;
}

.jt-pop-soft {
  animation: jtPopSoft 220ms ease;
}

.jt-result-flash {
  animation: jtResultFlash 340ms ease;
}

.jt-error-flash {
  animation: jtErrorFlash 320ms ease;
}

.jt-shake {
  animation: jtShake 320ms ease;
}

.jt-key-active {
  animation: jtKeyPress 180ms ease;
}

@keyframes jtPop {
  0% {
    transform: scale(1);
    opacity: 0.96;
  }
  40% {
    transform: scale(1.03);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes jtPopSoft {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes jtResultFlash {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(1.035);
    filter: brightness(1.12);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes jtErrorFlash {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.2);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes jtShake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes jtKeyPress {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(1px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 860px) {
  .jt-calc-layout,
  .jt-calc-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-calc-card {
    padding: 20px;
  }

  .jt-calc-header h1 {
    font-size: 2rem;
  }

  .jt-calc-btn {
    height: 58px;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jt-calc-btn,
  .jt-calc-display,
  .jt-calc-hero-result,
  .jt-calc-machine {
    transition: none !important;
    animation: none !important;
  }
}

.jt-tip-wrap {
  --jt-tip-card: rgba(255, 255, 255, 0.07);
  --jt-tip-text: #f8fafc;
  --jt-tip-muted: #cbd5e1;
  --jt-tip-border: rgba(255, 255, 255, 0.12);
  --jt-tip-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-tip-radius: 20px;
  width: 100%;
  color: var(--jt-tip-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-tip-wrap * {
  box-sizing: border-box;
}

.jt-tip-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-tip-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-tip-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-tip-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-tip-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-tip-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-tip-card {
  background: var(--jt-tip-card);
  border: 1px solid var(--jt-tip-border);
  border-radius: var(--jt-tip-radius);
  box-shadow: var(--jt-tip-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-tip-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-tip-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-tip-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-tip-field.full {
  grid-column: 1 / -1;
}

.jt-tip-field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-tip-input-wrap {
  position: relative;
}

.jt-tip-prefix,
.jt-tip-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-tip-prefix {
  left: 14px;
}

.jt-tip-suffix {
  right: 14px;
}

.jt-tip-wrap input[type="number"],
.jt-tip-wrap input[type="range"] {
  width: 100%;
}

.jt-tip-wrap input[type="number"] {
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-tip-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-tip-input-wrap.has-suffix input[type="number"] {
  padding-right: 40px;
}

.jt-tip-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-tip-slider-wrap {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-tip-slider-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #e2e8f0;
  font-weight: 600;
}

.jt-tip-slider-label {
  color: #ffffff;
}

.jt-tip-wrap input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  outline: none;
}

.jt-tip-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(56, 189, 248, 0.9);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
}

.jt-tip-wrap input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(56, 189, 248, 0.9);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
}

.jt-tip-slider-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: #cbd5f5;
  text-align: center;
}

.jt-tip-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-tip-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jt-tip-toggle-text strong {
  color: #ffffff;
  font-size: 0.95rem;
}

.jt-tip-toggle-text span {
  color: #cbd5f5;
  font-size: 0.85rem;
  line-height: 1.4;
}

.jt-tip-switch {
  position: relative;
  width: 54px;
  height: 30px;
  flex: 0 0 auto;
}

.jt-tip-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.jt-tip-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  transition: all 0.25s ease;
}

.jt-tip-switch-slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.jt-tip-switch input:checked + .jt-tip-switch-slider {
  background: rgba(56, 189, 248, 0.24);
  border-color: rgba(56, 189, 248, 0.35);
}

.jt-tip-switch input:checked + .jt-tip-switch-slider::before {
  transform: translateX(24px);
}

.jt-tip-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-tip-primary-btn,
.jt-tip-secondary-btn {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-tip-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-tip-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-tip-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-tip-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-tip-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-tip-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-tip-hero-result {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-tip-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-tip-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-tip-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-tip-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.jt-tip-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-tip-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-tip-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-tip-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-tip-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-tip-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-tip-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-tip-calculator,
  .jt-tip-form-grid,
  .jt-tip-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-tip-card {
    padding: 20px;
  }

  .jt-tip-header h1 {
    font-size: 2rem;
  }
}

/* AGE CALCULATOR */

.jt-age-wrap {
--card: rgba(255,255,255,0.07);
--border: rgba(255,255,255,0.12);
--shadow: 0 18px 40px rgba(0,0,0,0.35);
--radius: 20px;
width:100%;
color:#f8fafc;
}

.jt-age-header{
text-align:center;
margin-bottom:28px;
}

.jt-age-brand{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:16px;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 8px 24px rgba(0,0,0,0.2);
font-weight:700;
color:#fff;
backdrop-filter:blur(12px);
}

.jt-age-brand-dot{
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg,#7dd3fc,#2563eb);
box-shadow:0 0 18px rgba(56,189,248,0.7);
}

.jt-age-calculator{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:24px;
}

.jt-age-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
}

.jt-age-form-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.jt-age-field{
display:flex;
flex-direction:column;
gap:8px;
}

.jt-age-field.full{
grid-column:1/-1;
}

.jt-age-wrap input{
height:50px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(255,255,255,0.05);
color:#fff;
padding:0 14px;
}

.jt-age-results{
display:flex;
flex-direction:column;
gap:16px;
}

.jt-age-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.jt-age-stat{
border:1px solid rgba(255,255,255,0.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,0.05);
}

.jt-age-breakdown{
border-top:1px solid rgba(255,255,255,0.1);
padding-top:18px;
margin-top:6px;
}

.jt-age-row{
display:flex;
justify-content:space-between;
padding:9px 0;
border-bottom:1px dashed rgba(255,255,255,0.1);
}

@media(max-width:860px){
.jt-age-calculator,
.jt-age-form-grid,
.jt-age-stats{
grid-template-columns:1fr;
}
}

.jt-unit-wrap {
  --jt-unit-card: rgba(255,255,255,0.07);
  --jt-unit-text: #f8fafc;
  --jt-unit-border: rgba(255,255,255,0.12);
  --jt-unit-success-bg: rgba(255,255,255,0.08);
  --jt-unit-shadow: 0 18px 40px rgba(0,0,0,0.35);
  --jt-unit-radius: 20px;
  width: 100%;
  color: var(--jt-unit-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-unit-wrap * {
  box-sizing: border-box;
}

.jt-unit-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-unit-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-unit-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow: 0 0 18px rgba(56,189,248,0.7);
}

.jt-unit-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem,4vw,3rem);
  line-height: 1.1;
  color: #fff;
}

.jt-unit-header p {
  margin: 0;
  color: #cbd5f5;
  line-height: 1.6;
}

.jt-unit-calculator {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: start;
}

.jt-unit-card {
  background: var(--jt-unit-card);
  border: 1px solid var(--jt-unit-border);
  border-radius: var(--jt-unit-radius);
  box-shadow: var(--jt-unit-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-unit-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #fff;
}

.jt-unit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-unit-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-unit-field.full {
  grid-column: 1 / -1;
}

.jt-unit-field label {
  font-weight: 600;
  font-size: .95rem;
  color: #e2e8f0;
}

.jt-unit-input-wrap {
  position: relative;
}

.jt-unit-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-unit-wrap input,
.jt-unit-wrap select {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff;
  padding: 0 14px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-unit-input-wrap input {
  padding-left: 34px;
}

.jt-unit-wrap input:focus,
.jt-unit-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-unit-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.jt-unit-primary-btn,
.jt-unit-secondary-btn {
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #fff;
}

.jt-unit-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-unit-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-unit-secondary-btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
}

.jt-unit-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-unit-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-unit-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-unit-hero {
  background: var(--jt-unit-success-bg);
  border: 1px solid rgba(125,211,252,0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-unit-hero .label {
  color: #cbd5f5;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.jt-unit-hero .amount {
  font-size: clamp(2rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 10px;
}

.jt-unit-hero .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-unit-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-unit-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
}

.jt-unit-stat .label {
  color: #cbd5f5;
  font-size: .9rem;
  margin-bottom: 6px;
}

.jt-unit-stat .value {
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  font-size: 1.15rem;
}

.jt-unit-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-unit-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #fff;
}

.jt-unit-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-unit-row strong {
  color: #fff;
  text-align: right;
}

.jt-unit-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-unit-calculator,
  .jt-unit-form-grid,
  .jt-unit-stats {
    grid-template-columns: 1fr;
  }
}

.jt-split-wrap {
  --jt-split-card: rgba(255,255,255,0.07);
  --jt-split-text: #f8fafc;
  --jt-split-border: rgba(255,255,255,0.12);
  --jt-split-success-bg: rgba(255,255,255,0.08);
  --jt-split-shadow: 0 18px 40px rgba(0,0,0,0.35);
  --jt-split-radius: 20px;
  width: 100%;
  color: var(--jt-split-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-split-wrap * {
  box-sizing: border-box;
}

.jt-split-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-split-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-split-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow: 0 0 18px rgba(56,189,248,0.7);
}

.jt-split-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem,4vw,3rem);
  line-height: 1.1;
  color: #fff;
}

.jt-split-header p {
  margin: 0;
  color: #cbd5f5;
  line-height: 1.6;
}

.jt-split-calculator {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: start;
}

.jt-split-card {
  background: var(--jt-split-card);
  border: 1px solid var(--jt-split-border);
  border-radius: var(--jt-split-radius);
  box-shadow: var(--jt-split-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-split-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #fff;
}

.jt-split-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-split-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-split-field.full {
  grid-column: 1 / -1;
}

.jt-split-field label {
  font-weight: 600;
  font-size: .95rem;
  color: #e2e8f0;
}

.jt-split-input-wrap {
  position: relative;
}

.jt-split-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-split-wrap input {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff;
  padding: 0 14px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-split-input-wrap input {
  padding-left: 34px;
}

.jt-split-wrap input:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-split-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.jt-split-primary-btn,
.jt-split-secondary-btn {
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #fff;
}

.jt-split-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-split-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-split-secondary-btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
}

.jt-split-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-split-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-split-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-split-hero {
  background: var(--jt-split-success-bg);
  border: 1px solid rgba(125,211,252,0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-split-hero .label {
  color: #cbd5f5;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.jt-split-hero .amount {
  font-size: clamp(2rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 10px;
}

.jt-split-hero .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-split-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-split-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
}

.jt-split-stat .label {
  color: #cbd5f5;
  font-size: .9rem;
  margin-bottom: 6px;
}

.jt-split-stat .value {
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  font-size: 1.15rem;
}

.jt-split-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-split-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #fff;
}

.jt-split-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-split-row strong {
  color: #fff;
  text-align: right;
}

.jt-split-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-split-calculator,
  .jt-split-form-grid,
  .jt-split-stats {
    grid-template-columns: 1fr;
  }
}

.jt-fuel-wrap {
  --jt-fuel-card: rgba(255, 255, 255, 0.07);
  --jt-fuel-text: #f8fafc;
  --jt-fuel-muted: #cbd5e1;
  --jt-fuel-border: rgba(255, 255, 255, 0.12);
  --jt-fuel-accent: #38bdf8;
  --jt-fuel-success-bg: rgba(255, 255, 255, 0.08);
  --jt-fuel-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-fuel-radius: 20px;
  width: 100%;
  color: var(--jt-fuel-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-fuel-wrap * {
  box-sizing: border-box;
}

.jt-fuel-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-fuel-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-fuel-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-fuel-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-fuel-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-fuel-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-fuel-card {
  background: var(--jt-fuel-card);
  border: 1px solid var(--jt-fuel-border);
  border-radius: var(--jt-fuel-radius);
  box-shadow: var(--jt-fuel-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-fuel-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-fuel-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-fuel-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-fuel-field.full {
  grid-column: 1 / -1;
}

.jt-fuel-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-fuel-input-wrap,
.jt-fuel-select-wrap {
  position: relative;
}

.jt-fuel-prefix,
.jt-fuel-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-fuel-prefix {
  left: 14px;
}

.jt-fuel-suffix {
  right: 14px;
}

.jt-fuel-wrap input[type="number"],
.jt-fuel-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-fuel-input-wrap.has-prefix input[type="number"] {
  padding-left: 34px;
}

.jt-fuel-input-wrap.has-suffix input[type="number"] {
  padding-right: 56px;
}

.jt-fuel-wrap input[type="number"]:focus,
.jt-fuel-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-fuel-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-fuel-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-fuel-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-fuel-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-fuel-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-fuel-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-fuel-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-fuel-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-fuel-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-fuel-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-fuel-hero-result {
  background: var(--jt-fuel-success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-fuel-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-fuel-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-fuel-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-fuel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-fuel-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-fuel-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-fuel-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-fuel-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-fuel-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-fuel-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-fuel-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-fuel-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-fuel-calculator,
  .jt-fuel-form-grid,
  .jt-fuel-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-fuel-card {
    padding: 20px;
  }

  .jt-fuel-header h1 {
    font-size: 2rem;
  }
}

.jt-pace-wrap {
  --jt-pace-card: rgba(255, 255, 255, 0.07);
  --jt-pace-text: #f8fafc;
  --jt-pace-muted: #cbd5e1;
  --jt-pace-border: rgba(255, 255, 255, 0.12);
  --jt-pace-accent: #38bdf8;
  --jt-pace-success-bg: rgba(255, 255, 255, 0.08);
  --jt-pace-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-pace-radius: 20px;
  width: 100%;
  color: var(--jt-pace-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-pace-wrap * {
  box-sizing: border-box;
}

.jt-pace-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-pace-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-pace-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-pace-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-pace-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-pace-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-pace-card {
  background: var(--jt-pace-card);
  border: 1px solid var(--jt-pace-border);
  border-radius: var(--jt-pace-radius);
  box-shadow: var(--jt-pace-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-pace-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-pace-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-pace-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-pace-field.full {
  grid-column: 1 / -1;
}

.jt-pace-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-pace-input-wrap,
.jt-pace-select-wrap {
  position: relative;
}

.jt-pace-suffix {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-pace-wrap input[type="number"],
.jt-pace-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-pace-input-wrap.has-suffix input[type="number"] {
  padding-right: 52px;
}

.jt-pace-wrap input[type="number"]:focus,
.jt-pace-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-pace-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-pace-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-pace-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.jt-pace-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-pace-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-pace-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-pace-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-pace-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-pace-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-pace-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-pace-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-pace-hero-result {
  background: var(--jt-pace-success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-pace-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-pace-hero-result .amount {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-pace-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-pace-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-pace-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-pace-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-pace-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  word-break: break-word;
}

.jt-pace-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-pace-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-pace-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-pace-row strong {
  color: #ffffff;
  text-align: right;
  word-break: break-word;
}

.jt-pace-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-pace-calculator,
  .jt-pace-form-grid,
  .jt-pace-stats,
  .jt-pace-time-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-pace-card {
    padding: 20px;
  }

  .jt-pace-header h1 {
    font-size: 2rem;
  }
}

.jt-bmi-wrap {
  --jt-bmi-card: rgba(255, 255, 255, 0.07);
  --jt-bmi-text: #f8fafc;
  --jt-bmi-muted: #cbd5e1;
  --jt-bmi-border: rgba(255, 255, 255, 0.12);
  --jt-bmi-accent: #38bdf8;
  --jt-bmi-success-bg: rgba(255, 255, 255, 0.08);
  --jt-bmi-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-bmi-radius: 20px;
  width: 100%;
  color: var(--jt-bmi-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-bmi-wrap * {
  box-sizing: border-box;
}

.jt-bmi-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-bmi-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-bmi-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-bmi-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-bmi-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-bmi-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-bmi-card {
  background: var(--jt-bmi-card);
  border: 1px solid var(--jt-bmi-border);
  border-radius: var(--jt-bmi-radius);
  box-shadow: var(--jt-bmi-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-bmi-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-bmi-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-bmi-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-bmi-field.full {
  grid-column: 1 / -1;
}

.jt-bmi-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-bmi-input-wrap,
.jt-bmi-select-wrap {
  position: relative;
}

.jt-bmi-suffix {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-bmi-wrap input[type="number"],
.jt-bmi-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-bmi-input-wrap.has-suffix input[type="number"] {
  padding-right: 50px;
}

.jt-bmi-wrap input[type="number"]:focus,
.jt-bmi-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-bmi-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-bmi-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-bmi-inline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.jt-bmi-mixed-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.jt-bmi-mixed-top {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: end;
}

.jt-bmi-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-bmi-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-bmi-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-bmi-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-bmi-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-bmi-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-bmi-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-bmi-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-bmi-hero-result {
  background: var(--jt-bmi-success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-bmi-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-bmi-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-bmi-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-bmi-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-bmi-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-bmi-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-bmi-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
}

.jt-bmi-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-bmi-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-bmi-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-bmi-row strong {
  color: #ffffff;
  text-align: right;
  word-break: break-word;
}

.jt-bmi-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-bmi-calculator,
  .jt-bmi-form-grid,
  .jt-bmi-stats,
  .jt-bmi-inline-grid,
  .jt-bmi-mixed-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-bmi-card {
    padding: 20px;
  }

  .jt-bmi-header h1 {
    font-size: 2rem;
  }
}

.jt-convert-wrap {
  --jt-convert-card: rgba(255, 255, 255, 0.07);
  --jt-convert-text: #f8fafc;
  --jt-convert-muted: #cbd5e1;
  --jt-convert-border: rgba(255, 255, 255, 0.12);
  --jt-convert-accent: #38bdf8;
  --jt-convert-success-bg: rgba(255, 255, 255, 0.08);
  --jt-convert-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-convert-radius: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--jt-convert-text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-convert-wrap * {
  box-sizing: border-box;
}

.jt-convert-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-convert-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-convert-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-convert-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-convert-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-convert-calculator {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-convert-card {
  background: var(--jt-convert-card);
  border: 1px solid var(--jt-convert-border);
  border-radius: var(--jt-convert-radius);
  box-shadow: var(--jt-convert-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-convert-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-convert-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.jt-convert-tab {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #dbeafe;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-convert-tab:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.1);
}

.jt-convert-tab.active {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.28);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.jt-convert-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jt-convert-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-convert-field.full {
  grid-column: 1 / -1;
}

.jt-convert-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-convert-input-wrap,
.jt-convert-select-wrap {
  position: relative;
}

.jt-convert-wrap input[type="number"],
.jt-convert-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.jt-convert-wrap input[type="number"]:focus,
.jt-convert-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-convert-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-convert-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-convert-swap-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.jt-convert-swap-btn {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-convert-swap-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.14);
}

.jt-convert-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-convert-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-convert-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-convert-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-convert-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-convert-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-convert-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-convert-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-convert-hero-result {
  background: var(--jt-convert-success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-convert-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-convert-hero-result .amount {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 10px;
  word-break: break-word;
}

.jt-convert-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: break-word;
}

.jt-convert-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-convert-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-convert-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-convert-stat .value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  word-break: break-word;
}

.jt-convert-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-convert-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-convert-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-convert-row strong {
  color: #ffffff;
  text-align: right;
  word-break: break-word;
}

.jt-convert-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-convert-calculator,
  .jt-convert-form-grid,
  .jt-convert-stats {
    grid-template-columns: 1fr;
  }

  .jt-convert-swap-wrap {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .jt-convert-card {
    padding: 20px;
  }

  .jt-convert-header h1 {
    font-size: 2rem;
  }
}

.jt-image-tools-wrap {
  --jt-image-card: rgba(255, 255, 255, 0.07);
  --jt-image-text: #f8fafc;
  --jt-image-muted: #cbd5e1;
  --jt-image-border: rgba(255, 255, 255, 0.12);
  --jt-image-accent: #38bdf8;
  --jt-image-success-bg: rgba(255, 255, 255, 0.08);
  --jt-image-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-image-radius: 20px;
  color: var(--jt-image-text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-image-tools-wrap * {
  box-sizing: border-box;
}

.jt-image-tools-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-image-tools-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-image-tools-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-image-tools-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-image-tools-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-image-tools-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.jt-image-tools-card {
  background: var(--jt-image-card);
  border: 1px solid var(--jt-image-border);
  border-radius: var(--jt-image-radius);
  box-shadow: var(--jt-image-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-image-tools-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-image-tools-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.jt-image-tools-tab {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #dbeafe;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-image-tools-tab:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
}

.jt-image-tools-tab.active {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.28);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.jt-image-tools-panel {
  display: none;
}

.jt-image-tools-panel.active {
  display: block;
}

.jt-image-tools-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-image-tools-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-image-tools-field.full {
  grid-column: 1 / -1;
}

.jt-image-tools-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-image-tools-input-wrap,
.jt-image-tools-select-wrap {
  position: relative;
}

.jt-image-tools-wrap select,
.jt-image-tools-wrap input[type="file"],
.jt-image-tools-wrap input[type="number"] {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-image-tools-wrap select:focus,
.jt-image-tools-wrap input[type="file"]:focus,
.jt-image-tools-wrap input[type="number"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255, 255, 255, 0.07);
}

.jt-image-tools-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.jt-image-tools-wrap select option {
  color: #111827;
  background: #ffffff;
}

.jt-image-tools-upload-box {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.jt-image-tools-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.jt-image-tools-inline-check input[type="checkbox"] {
  width: auto;
  min-height: auto;
  accent-color: #38bdf8;
}

.jt-image-tools-preview-wrap {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.jt-image-tools-preview-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.jt-image-tools-preview-card h3 {
  margin: 0 0 10px;
  font-size: 0.98rem;
  color: #ffffff;
}

.jt-image-tools-preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.jt-image-tools-preview-box img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.jt-image-tools-pdf-preview {
  display: block;
  padding: 12px;
  overflow: auto;
}

.jt-image-tools-pdf-summary-box {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 18px;
}

.jt-image-tools-pdf-summary-list {
  width: 100%;
}

.jt-image-tools-pdf-thumbs {
  display: grid;
  gap: 10px;
}

.jt-image-tools-pdf-thumb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.jt-image-tools-pdf-thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 auto;
}

.jt-image-tools-pdf-thumb-text {
  min-width: 0;
}

.jt-image-tools-pdf-thumb-name {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
}

.jt-image-tools-pdf-thumb-meta {
  color: #cbd5f5;
  font-size: 0.84rem;
  line-height: 1.5;
}

.jt-image-tools-placeholder {
  color: #94a3b8;
  font-size: 0.92rem;
  text-align: center;
  line-height: 1.5;
  padding: 16px;
}

.jt-image-tools-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-image-tools-wrap button,
.jt-image-tools-download {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-image-tools-primary-btn,
.jt-image-tools-download {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.jt-image-tools-primary-btn:hover,
.jt-image-tools-download:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

.jt-image-tools-secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.jt-image-tools-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.jt-image-tools-download[hidden] {
  display: none;
}

.jt-image-tools-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-image-tools-range {
  width: 100%;
}

.jt-image-tools-range-text {
  color: #cbd5f5;
  font-size: 0.92rem;
}

.jt-image-tools-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-image-tools-hero-result {
  background: var(--jt-image-success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-image-tools-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-image-tools-hero-result .amount {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 10px;
  word-break: break-word;
}

.jt-image-tools-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: break-word;
}

.jt-image-tools-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-image-tools-stat {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.jt-image-tools-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-image-tools-stat .value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  word-break: break-word;
}

.jt-image-tools-breakdown {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-image-tools-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-image-tools-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-image-tools-row strong {
  color: #ffffff;
  text-align: right;
  word-break: break-word;
}

.jt-image-tools-row:last-child {
  border-bottom: 0;
}

.image-tools-content {
  margin-top: 0;
}

@media (max-width: 860px) {
  .jt-image-tools-layout,
  .jt-image-tools-form-grid,
  .jt-image-tools-stats,
  .jt-image-tools-preview-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-image-tools-card {
    padding: 20px;
  }

  .jt-image-tools-header h1 {
    font-size: 2rem;
  }
}

.jt-date-diff-wrap {
  --jt-date-diff-card: rgba(255, 255, 255, 0.07);
  --jt-date-diff-text: #f8fafc;
  --jt-date-diff-muted: #cbd5e1;
  --jt-date-diff-border: rgba(255, 255, 255, 0.12);
  --jt-date-diff-accent: #38bdf8;
  --jt-date-diff-success-bg: rgba(255, 255, 255, 0.08);
  --jt-date-diff-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-date-diff-radius: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--jt-date-diff-text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-date-diff-wrap * {
  box-sizing: border-box;
}

.jt-date-diff-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-date-diff-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-date-diff-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-date-diff-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-date-diff-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-date-diff-calculator {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: start;
}

.jt-date-diff-card {
  background: var(--jt-date-diff-card);
  border: 1px solid var(--jt-date-diff-border);
  border-radius: var(--jt-date-diff-radius);
  box-shadow: var(--jt-date-diff-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-date-diff-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-date-diff-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-date-diff-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-date-diff-field.full {
  grid-column: 1 / -1;
}

.jt-date-diff-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-date-diff-wrap input[type="date"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
  -webkit-appearance: none;
  appearance: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-date-diff-wrap input[type="date"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255, 255, 255, 0.07);
}

.jt-date-diff-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.jt-date-diff-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jt-date-diff-toggle-copy strong {
  font-size: 0.96rem;
  color: #ffffff;
}

.jt-date-diff-toggle-copy span {
  font-size: 0.88rem;
  color: #cbd5f5;
  line-height: 1.4;
}

.jt-date-diff-switch {
  position: relative;
  display: inline-flex;
  width: 54px;
  height: 30px;
  flex: 0 0 auto;
}

.jt-date-diff-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.jt-date-diff-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
  cursor: pointer;
}

.jt-date-diff-slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 999px;
  background: #ffffff;
  transition: transform 0.25s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.jt-date-diff-switch input:checked + .jt-date-diff-slider {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.45);
}

.jt-date-diff-switch input:checked + .jt-date-diff-slider::before {
  transform: translateX(24px);
}

.jt-date-diff-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-date-diff-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-date-diff-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.jt-date-diff-primary-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

.jt-date-diff-secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.jt-date-diff-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.jt-date-diff-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-date-diff-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-date-diff-hero-result {
  background: var(--jt-date-diff-success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-date-diff-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-date-diff-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-date-diff-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-date-diff-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-date-diff-stat {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.jt-date-diff-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-date-diff-stat .value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
}

.jt-date-diff-breakdown {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-date-diff-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-date-diff-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-date-diff-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-date-diff-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-date-diff-calculator {
    grid-template-columns: 1fr;
  }

  .jt-date-diff-form-grid,
  .jt-date-diff-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-date-diff-card {
    padding: 20px;
  }

  .jt-date-diff-header h1 {
    font-size: 2rem;
  }
}

.jt-business-days-wrap {
--jt-business-days-card: rgba(255,255,255,0.07);
--jt-business-days-border: rgba(255,255,255,0.12);
--jt-business-days-text:#f8fafc;
--jt-business-days-shadow:0 18px 40px rgba(0,0,0,0.35);
--jt-business-days-radius:20px;

max-width:1100px;
margin:0 auto;
color:var(--jt-business-days-text);
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.jt-business-days-calculator{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:24px;
}

.jt-business-days-card{
background:var(--jt-business-days-card);
border:1px solid var(--jt-business-days-border);
border-radius:var(--jt-business-days-radius);
padding:24px;
box-shadow:var(--jt-business-days-shadow);
backdrop-filter:blur(14px);
}

.jt-business-days-card h2{
margin:0 0 18px;
font-size:1.25rem;
color:#fff;
}

.jt-business-days-form-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.jt-business-days-field{
display:flex;
flex-direction:column;
gap:8px;
}

.jt-business-days-field.full{
grid-column:1/-1;
}

.jt-business-days-wrap label{
font-weight:600;
font-size:.95rem;
color:#e2e8f0;
}

.jt-business-days-wrap input,
.jt-business-days-wrap select{
height:50px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(255,255,255,0.05);
padding:0 14px;
color:#fff;
font-size:1rem;
outline:none;
}

.jt-business-days-toggle-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.jt-business-days-toggle{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
}

.jt-business-days-switch{
position:relative;
width:54px;
height:30px;
}

.jt-business-days-switch input{
opacity:0;
width:0;
height:0;
}

.jt-business-days-slider{
position:absolute;
inset:0;
border-radius:999px;
background:rgba(255,255,255,0.14);
border:1px solid rgba(255,255,255,0.12);
cursor:pointer;
}

.jt-business-days-slider::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
top:3px;
border-radius:999px;
background:#fff;
transition:transform .25s;
}

.jt-business-days-switch input:checked + .jt-business-days-slider::before{
transform:translateX(24px);
}

.jt-business-days-actions{
display:flex;
gap:12px;
margin-top:22px;
}

.jt-business-days-primary-btn,
.jt-business-days-secondary-btn{
height:50px;
border-radius:14px;
font-weight:700;
cursor:pointer;
padding:0 18px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.1);
color:#fff;
}

.jt-business-days-secondary-btn{
background:rgba(255,255,255,0.08);
}

.jt-business-days-results{
display:flex;
flex-direction:column;
gap:16px;
}

.jt-business-days-hero-result{
background:rgba(255,255,255,0.08);
border:1px solid rgba(125,211,252,0.2);
border-radius:18px;
padding:20px;
}

.jt-business-days-hero-result .amount{
font-size:clamp(2rem,4vw,2.8rem);
font-weight:800;
}

.jt-business-days-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.jt-business-days-stat{
border:1px solid rgba(255,255,255,0.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,0.05);
}

.jt-business-days-breakdown{
border-top:1px solid rgba(255,255,255,0.1);
padding-top:18px;
}

.jt-business-days-row{
display:flex;
justify-content:space-between;
padding:9px 0;
border-bottom:1px dashed rgba(255,255,255,0.1);
}

@media (max-width:860px){
.jt-business-days-calculator,
.jt-business-days-form-grid,
.jt-business-days-stats,
.jt-business-days-toggle-grid{
grid-template-columns:1fr;
}
}

.jt-work-hours-wrap {
  --jt-work-hours-card: rgba(255, 255, 255, 0.07);
  --jt-work-hours-text: #f8fafc;
  --jt-work-hours-muted: #cbd5e1;
  --jt-work-hours-border: rgba(255, 255, 255, 0.12);
  --jt-work-hours-accent: #38bdf8;
  --jt-work-hours-success-bg: rgba(255, 255, 255, 0.08);
  --jt-work-hours-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-work-hours-radius: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--jt-work-hours-text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-work-hours-wrap * {
  box-sizing: border-box;
}

.jt-work-hours-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-work-hours-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-work-hours-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-work-hours-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-work-hours-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-work-hours-calculator {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: start;
}

.jt-work-hours-card {
  background: var(--jt-work-hours-card);
  border: 1px solid var(--jt-work-hours-border);
  border-radius: var(--jt-work-hours-radius);
  box-shadow: var(--jt-work-hours-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-work-hours-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-work-hours-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-work-hours-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-work-hours-field.full {
  grid-column: 1 / -1;
}

.jt-work-hours-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-work-hours-wrap input[type="time"],
.jt-work-hours-wrap input[type="text"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
  -webkit-appearance: none;
  appearance: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-work-hours-wrap input[type="time"]:focus,
.jt-work-hours-wrap input[type="text"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255, 255, 255, 0.07);
}

.jt-work-hours-input-wrap {
  position: relative;
}

.jt-work-hours-prefix,
.jt-work-hours-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-work-hours-prefix {
  left: 14px;
}

.jt-work-hours-suffix {
  right: 14px;
}

.jt-work-hours-input-wrap.has-prefix input[type="text"] {
  padding-left: 34px;
}

.jt-work-hours-input-wrap.has-suffix input[type="text"] {
  padding-right: 42px;
}

.jt-work-hours-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.jt-work-hours-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jt-work-hours-toggle-copy strong {
  font-size: 0.95rem;
  color: #ffffff;
}

.jt-work-hours-toggle-copy span {
  font-size: 0.84rem;
  color: #cbd5f5;
  line-height: 1.4;
}

.jt-work-hours-switch {
  position: relative;
  display: inline-flex;
  width: 54px;
  height: 30px;
  flex: 0 0 auto;
}

.jt-work-hours-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.jt-work-hours-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
  cursor: pointer;
}

.jt-work-hours-slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 999px;
  background: #ffffff;
  transition: transform 0.25s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.jt-work-hours-switch input:checked + .jt-work-hours-slider {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.45);
}

.jt-work-hours-switch input:checked + .jt-work-hours-slider::before {
  transform: translateX(24px);
}

.jt-work-hours-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-work-hours-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-work-hours-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.jt-work-hours-primary-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

.jt-work-hours-secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.jt-work-hours-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.jt-work-hours-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-work-hours-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-work-hours-hero-result {
  background: var(--jt-work-hours-success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-work-hours-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-work-hours-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
}

.jt-work-hours-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-work-hours-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-work-hours-stat {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.jt-work-hours-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-work-hours-stat .value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
}

.jt-work-hours-breakdown {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-work-hours-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-work-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-work-hours-row strong {
  color: #ffffff;
  text-align: right;
}

.jt-work-hours-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-work-hours-calculator,
  .jt-work-hours-form-grid,
  .jt-work-hours-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-work-hours-card {
    padding: 20px;
  }

  .jt-work-hours-header h1 {
    font-size: 2rem;
  }
}

.jt-word-counter-wrap{
--jt-word-counter-card:rgba(255,255,255,0.07);
--jt-word-counter-border:rgba(255,255,255,0.12);
--jt-word-counter-text:#f8fafc;
--jt-word-counter-shadow:0 18px 40px rgba(0,0,0,0.35);
--jt-word-counter-radius:20px;
max-width:1100px;
margin:0 auto;
color:var(--jt-word-counter-text);
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.jt-word-counter-calculator{
display:grid;
grid-template-columns:1.08fr .92fr;
gap:24px;
}

.jt-word-counter-card{
background:var(--jt-word-counter-card);
border:1px solid var(--jt-word-counter-border);
border-radius:var(--jt-word-counter-radius);
padding:24px;
box-shadow:var(--jt-word-counter-shadow);
backdrop-filter:blur(14px);
}

.jt-word-counter-wrap textarea{
width:100%;
min-height:320px;
resize:vertical;
border:1px solid rgba(255,255,255,0.12);
border-radius:18px;
padding:16px;
font-size:1rem;
line-height:1.7;
color:#fff;
background:rgba(255,255,255,0.05);
}

.jt-word-counter-actions{
display:flex;
gap:12px;
margin-top:18px;
flex-wrap:wrap;
}

.jt-word-counter-primary-btn,
.jt-word-counter-secondary-btn{
height:50px;
border-radius:14px;
font-weight:700;
cursor:pointer;
padding:0 18px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.1);
color:#fff;
}

.jt-word-counter-secondary-btn{
background:rgba(255,255,255,0.08);
}

.jt-word-counter-results{
display:flex;
flex-direction:column;
gap:16px;
}

.jt-word-counter-hero-result{
background:rgba(255,255,255,0.08);
border:1px solid rgba(125,211,252,0.2);
border-radius:18px;
padding:20px;
}

.jt-word-counter-hero-result .amount{
font-size:clamp(2rem,4vw,2.8rem);
font-weight:800;
}

.jt-word-counter-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.jt-word-counter-stat{
border:1px solid rgba(255,255,255,0.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,0.05);
}

.jt-word-counter-breakdown{
border-top:1px solid rgba(255,255,255,0.1);
padding-top:18px;
}

.jt-word-counter-row{
display:flex;
justify-content:space-between;
padding:9px 0;
border-bottom:1px dashed rgba(255,255,255,0.1);
}

@media (max-width:860px){
.jt-word-counter-calculator,
.jt-word-counter-stats{
grid-template-columns:1fr;
}
}

.jt-character-counter-wrap{
max-width:1100px;
margin:0 auto;
color:#f8fafc;
}

.jt-char-calculator{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:24px;
}

.jt-char-card{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:20px;
padding:24px;
}

.jt-character-counter-wrap textarea{
width:100%;
min-height:300px;
border-radius:16px;
border:1px solid rgba(255,255,255,.12);
padding:16px;
background:rgba(255,255,255,.05);
color:#fff;
resize:vertical;
}

.jt-char-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.jt-char-stat{
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,.05);
}

.jt-char-row{
display:flex;
justify-content:space-between;
padding:8px 0;
border-bottom:1px dashed rgba(255,255,255,.1);
}

@media(max-width:860px){
.jt-char-calculator{grid-template-columns:1fr;}
.jt-char-stats{grid-template-columns:1fr;}
}

.jt-currency-wrap {
  --jt-currency-card: rgba(255, 255, 255, 0.07);
  --jt-currency-text: #f8fafc;
  --jt-currency-muted: #cbd5e1;
  --jt-currency-border: rgba(255, 255, 255, 0.12);
  --jt-currency-accent: #38bdf8;
  --jt-currency-success-bg: rgba(255, 255, 255, 0.08);
  --jt-currency-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --jt-currency-radius: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--jt-currency-text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-currency-wrap * {
  box-sizing: border-box;
}

.jt-currency-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-currency-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-currency-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-currency-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-currency-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-currency-calculator {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: start;
}

.jt-currency-card {
  background: var(--jt-currency-card);
  border: 1px solid var(--jt-currency-border);
  border-radius: var(--jt-currency-radius);
  box-shadow: var(--jt-currency-shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-currency-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-currency-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-currency-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-currency-field.full {
  grid-column: 1 / -1;
}

.jt-currency-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-currency-wrap input[type="text"],
.jt-currency-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255,255,255,0.05);
  -webkit-appearance: none;
  appearance: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-currency-wrap select option {
  background: #0f172a;
  color: #ffffff;
}

.jt-currency-wrap input[type="text"]:focus,
.jt-currency-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255,255,255,0.07);
}

.jt-currency-input-wrap {
  position: relative;
}

.jt-currency-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.jt-currency-input-wrap.has-prefix input[type="text"] {
  padding-left: 30px;
}

.jt-currency-swap-row {
  display: flex;
  justify-content: center;
  margin: 4px 0 2px;
}

.jt-currency-swap-btn {
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-currency-swap-btn:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.jt-currency-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-currency-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jt-currency-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.jt-currency-primary-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}

.jt-currency-secondary-btn {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}

.jt-currency-secondary-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.jt-currency-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-currency-status {
  margin-top: 10px;
  font-size: 0.88rem;
  color: #cbd5f5;
}

.jt-currency-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-currency-hero-result {
  background: var(--jt-currency-success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-currency-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-currency-hero-result .amount {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 10px;
  word-break: break-word;
}

.jt-currency-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-currency-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-currency-stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
}

.jt-currency-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-currency-stat .value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  word-break: break-word;
}

.jt-currency-breakdown {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-currency-breakdown h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-currency-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-currency-row strong {
  color: #ffffff;
  text-align: right;
  word-break: break-word;
}

.jt-currency-row:last-child {
  border-bottom: 0;
}

@media (max-width: 860px) {
  .jt-currency-calculator,
  .jt-currency-form-grid,
  .jt-currency-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-currency-card {
    padding: 20px;
  }

  .jt-currency-header h1 {
    font-size: 2rem;
  }
}

.jt-password-wrap{
  --jt-password-card:rgba(255,255,255,.07);
  --jt-password-text:#f8fafc;
  --jt-password-muted:#cbd5e1;
  --jt-password-border:rgba(255,255,255,.12);
  --jt-password-accent:#38bdf8;
  --jt-password-shadow:0 18px 40px rgba(0,0,0,.35);
  --jt-password-radius:20px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--jt-password-text);
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.jt-password-wrap *{
  box-sizing:border-box;
}

.jt-password-header{
  text-align:center;
  margin-bottom:28px;
}

.jt-password-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  font-weight:700;
}

.jt-password-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#7dd3fc,#2563eb);
}

.jt-password-header h1{
  margin:0 0 10px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  color:#ffffff;
}

.jt-password-header p{
  margin:0;
  color:#cbd5f5;
}

.jt-password-calculator{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:start;
}

.jt-password-card{
  background:var(--jt-password-card);
  border:1px solid var(--jt-password-border);
  border-radius:var(--jt-password-radius);
  box-shadow:var(--jt-password-shadow);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.jt-password-card h2{
  margin:0 0 18px;
  font-size:1.2rem;
  color:#ffffff;
}

.jt-password-mode-tabs{
  display:flex;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.jt-password-mode-btn{
  height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.jt-password-mode-btn.active{
  background:rgba(56,189,248,.18);
  border-color:rgba(56,189,248,.38);
}

.jt-password-panel{
  display:none;
}

.jt-password-panel.active{
  display:block;
}

.jt-password-length{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.jt-password-length input[type="range"]{
  flex:1;
  accent-color:var(--jt-password-accent);
}

.jt-password-length-value{
  font-weight:700;
  min-width:40px;
  text-align:right;
}

.jt-password-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:18px;
}

.jt-password-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
}

.jt-password-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

.jt-password-field label{
  font-size:.92rem;
  font-weight:600;
  color:#e2e8f0;
}

.jt-password-wrap select{
  width:100%;
  height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  padding:0 12px;
  font-size:1rem;
  color:#fff;
  background:rgba(255,255,255,.05);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.jt-password-wrap select option{
  background:#0f172a;
  color:#fff;
}

.jt-password-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.jt-password-wrap button{
  height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-weight:700;
  padding:0 16px;
  cursor:pointer;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.jt-password-wrap button:hover{
  background:rgba(255,255,255,.16);
}

.jt-password-note{
  margin-top:16px;
  color:#cbd5f5;
  font-size:.9rem;
  line-height:1.6;
}

.jt-password-results{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.jt-password-output{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(125,211,252,.2);
  border-radius:18px;
  padding:20px;
  word-break:break-all;
}

.jt-password-output .label{
  font-size:.9rem;
  color:#cbd5f5;
  margin-bottom:8px;
}

.jt-password-output .value{
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.04em;
}

.jt-password-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.jt-password-stat{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,.05);
}

.jt-password-stat .label{
  font-size:.85rem;
  color:#cbd5f5;
  margin-bottom:4px;
}

.jt-password-stat .value{
  font-size:1.1rem;
  font-weight:800;
}

@media(max-width:860px){
  .jt-password-calculator{
    grid-template-columns:1fr;
  }

  .jt-password-stats{
    grid-template-columns:1fr;
  }

  .jt-password-options{
    grid-template-columns:1fr;
  }
}

.jt-rng-wrap{
  --jt-rng-card:rgba(255,255,255,.07);
  --jt-rng-text:#f8fafc;
  --jt-rng-muted:#cbd5e1;
  --jt-rng-border:rgba(255,255,255,.12);
  --jt-rng-accent:#38bdf8;
  --jt-rng-success-bg:rgba(255,255,255,.08);
  --jt-rng-shadow:0 18px 40px rgba(0,0,0,.35);
  --jt-rng-radius:20px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--jt-rng-text);
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.jt-rng-wrap *{
  box-sizing:border-box;
}

.jt-rng-header{
  text-align:center;
  margin-bottom:28px;
}

.jt-rng-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  font-weight:700;
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.jt-rng-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow:0 0 18px rgba(56,189,248,.7);
}

.jt-rng-header h1{
  margin:0 0 10px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  color:#fff;
}

.jt-rng-header p{
  margin:0;
  color:#cbd5f5;
  font-size:1rem;
  line-height:1.6;
}

.jt-rng-calculator{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:24px;
  align-items:start;
}

.jt-rng-card{
  background:var(--jt-rng-card);
  border:1px solid var(--jt-rng-border);
  border-radius:var(--jt-rng-radius);
  box-shadow:var(--jt-rng-shadow);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.jt-rng-card h2{
  margin:0 0 18px;
  font-size:1.25rem;
  color:#fff;
}

.jt-rng-form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.jt-rng-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.jt-rng-field.full{
  grid-column:1 / -1;
}

.jt-rng-wrap label{
  font-size:.95rem;
  font-weight:600;
  color:#e2e8f0;
}

.jt-rng-wrap input[type="text"]{
  width:100%;
  height:50px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:0 14px;
  font-size:1rem;
  color:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  background:rgba(255,255,255,.05);
  -webkit-appearance:none;
  appearance:none;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.jt-rng-wrap input[type="text"]:focus{
  border-color:rgba(125,211,252,.7);
  box-shadow:0 0 0 4px rgba(56,189,248,.12);
  background:rgba(255,255,255,.07);
}

.jt-rng-toggle-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:6px;
  width:100%;
}

.jt-rng-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  width:100%;
  padding:18px 20px;

  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.jt-rng-toggle-copy{
  flex:1;
  min-width:0;
}

.jt-rng-toggle-copy strong{
  display:block;
  margin-bottom:6px;
  font-size:1rem;
  line-height:1.3;
  color:#fff;
}

.jt-rng-toggle-copy span{
  display:block;
  color:#cbd5e1;
  font-size:.95rem;
  line-height:1.5;
}

.jt-rng-switch{
  position:relative;
  flex:0 0 54px;
  width:54px;
  height:30px;
  display:inline-block;
}

.jt-rng-switch input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

.jt-rng-slider{
  position:absolute;
  inset:0;
  cursor:pointer;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  transition:all .2s ease;
}

.jt-rng-slider::before{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:transform .2s ease;
}

.jt-rng-switch input:checked + .jt-rng-slider{
  background:linear-gradient(135deg,#38bdf8,#2563eb);
  border-color:transparent;
  box-shadow:0 0 18px rgba(56,189,248,.25);
}

.jt-rng-switch input:checked + .jt-rng-slider::before{
  transform:translateX(24px);
}

.jt-rng-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.jt-rng-primary-btn,
.jt-rng-secondary-btn{
  height:48px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}

.jt-rng-primary-btn{
  background:linear-gradient(135deg,rgba(56,189,248,.28),rgba(37,99,235,.2));
  border-color:rgba(125,211,252,.3);
}

.jt-rng-secondary-btn{
  background:rgba(255,255,255,.06);
}

.jt-rng-primary-btn:hover,
.jt-rng-secondary-btn:hover{
  transform:translateY(-1px);
}

.jt-rng-results{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.jt-rng-hero-result{
  background:var(--jt-rng-success-bg);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:20px 22px;
}

.jt-rng-hero-result .label{
  font-size:.95rem;
  color:#cbd5f5;
  margin-bottom:10px;
}

.jt-rng-hero-result .amount{
  font-size:2.1rem;
  font-weight:800;
  line-height:1.1;
  color:#fff;
  margin-bottom:8px;
  word-break:break-word;
}

.jt-rng-hero-result .subtext{
  color:#dbeafe;
  line-height:1.5;
}

.jt-rng-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.jt-rng-stat{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:18px 20px;
}

.jt-rng-stat .label{
  font-size:.95rem;
  color:#cbd5e1;
  margin-bottom:8px;
  line-height:1.4;
}

.jt-rng-stat .value{
  font-size:1.1rem;
  font-weight:800;
  color:#fff;
  word-break:break-word;
}

@media (max-width:860px){
  .jt-rng-calculator{
    grid-template-columns:1fr;
  }

  .jt-rng-form-grid{
    grid-template-columns:1fr;
  }

  .jt-rng-toggle-grid{
    grid-template-columns:1fr;
  }

  .jt-rng-stats{
    grid-template-columns:1fr;
  }
}

.jt-colour-wrap{
  --jt-colour-card:rgba(255,255,255,.07);
  --jt-colour-text:#f8fafc;
  --jt-colour-muted:#cbd5e1;
  --jt-colour-border:rgba(255,255,255,.12);
  --jt-colour-accent:#38bdf8;
  --jt-colour-success-bg:rgba(255,255,255,.08);
  --jt-colour-shadow:0 18px 40px rgba(0,0,0,.35);
  --jt-colour-radius:20px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--jt-colour-text);
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.jt-colour-wrap *{
  box-sizing:border-box;
}

.jt-colour-header{
  text-align:center;
  margin-bottom:28px;
}

.jt-colour-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  font-weight:700;
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.jt-colour-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow:0 0 18px rgba(56,189,248,.7);
}

.jt-colour-header h1{
  margin:0 0 10px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  color:#fff;
}

.jt-colour-header p{
  margin:0;
  color:#cbd5f5;
  font-size:1rem;
  line-height:1.6;
}

.jt-colour-calculator{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:24px;
  align-items:start;
}

.jt-colour-card{
  background:var(--jt-colour-card);
  border:1px solid var(--jt-colour-border);
  border-radius:var(--jt-colour-radius);
  box-shadow:var(--jt-colour-shadow);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.jt-colour-card h2{
  margin:0 0 18px;
  font-size:1.25rem;
  color:#fff;
}

.jt-colour-form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.jt-colour-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.jt-colour-field.full{
  grid-column:1 / -1;
}

.jt-colour-wrap label{
  font-size:.95rem;
  font-weight:600;
  color:#e2e8f0;
}

.jt-colour-wrap input[type="text"],
.jt-colour-wrap select{
  width:100%;
  height:50px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:0 14px;
  font-size:1rem;
  color:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  background:rgba(255,255,255,.05);
  -webkit-appearance:none;
  appearance:none;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.jt-colour-wrap select option{
  background:#0f172a;
  color:#fff;
}

.jt-colour-wrap input[type="text"]:focus,
.jt-colour-wrap select:focus{
  border-color:rgba(125,211,252,.7);
  box-shadow:0 0 0 4px rgba(56,189,248,.12);
  background:rgba(255,255,255,.07);
}

.jt-colour-picker-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}

.jt-colour-picker-row input[type="text"]{
  flex:1;
}

.jt-colour-wrap input[type="color"]{
  width:64px;
  min-width:64px;
  height:50px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:transparent;
  cursor:pointer;
}

.jt-colour-slider-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}

.jt-colour-wrap input[type="range"]{
  flex:1;
  accent-color:var(--jt-colour-accent);
}

.jt-colour-slider-value{
  min-width:50px;
  text-align:right;
  font-weight:700;
  color:#e0f2fe;
}

.jt-colour-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.jt-colour-wrap button{
  border:0;
  border-radius:14px;
  height:50px;
  padding:0 18px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:all .25s ease;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.jt-colour-primary-btn{
  flex:1;
  min-width:180px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,.35);
}

.jt-colour-primary-btn:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-2px);
  box-shadow:0 14px 35px rgba(0,0,0,.4);
}

.jt-colour-secondary-btn{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}

.jt-colour-secondary-btn:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}

.jt-colour-note{
  margin-top:16px;
  color:#cbd5f5;
  font-size:.9rem;
  line-height:1.6;
}

.jt-colour-results{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.jt-colour-hero{
  background:var(--jt-colour-success-bg);
  border:1px solid rgba(125,211,252,.2);
  border-radius:18px;
  padding:20px;
}

.jt-colour-hero .label{
  color:#cbd5f5;
  font-size:.95rem;
  margin-bottom:8px;
}

.jt-colour-hero .amount{
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;
  line-height:1.1;
  color:#fff;
  margin-bottom:10px;
}

.jt-colour-hero .subtext{
  color:#cbd5f5;
  font-size:.95rem;
  line-height:1.5;
}

.jt-colour-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.jt-colour-stat{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,.05);
}

.jt-colour-stat .label{
  color:#cbd5f5;
  font-size:.9rem;
  margin-bottom:6px;
}

.jt-colour-stat .value{
  font-size:1rem;
  font-weight:800;
  color:#fff;
  word-break:break-word;
}

.jt-colour-swatches{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.jt-colour-swatch{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}

.jt-colour-swatch-chip{
  height:56px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
}

.jt-colour-swatch-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.jt-colour-swatch-title{
  font-size:.9rem;
  color:#cbd5f5;
}

.jt-colour-swatch-hex{
  font-weight:800;
  color:#fff;
  word-break:break-word;
}

.jt-colour-copy-btn{
  height:40px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  font-size:.9rem !important;
}

@media (max-width:860px){
  .jt-colour-calculator,
  .jt-colour-form-grid,
  .jt-colour-stats{
    grid-template-columns:1fr;
  }

  .jt-colour-swatch{
    grid-template-columns:64px 1fr;
  }

  .jt-colour-copy-btn{
    grid-column:1 / -1;
    width:100%;
  }
}

@media (max-width:640px){
  .jt-colour-card{
    padding:20px;
  }

  .jt-colour-header h1{
    font-size:2rem;
  }

  .jt-colour-picker-row{
    align-items:stretch;
  }
}

.jt-contrast-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-contrast-wrap * {
  box-sizing: border-box;
}

.jt-contrast-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-contrast-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-contrast-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-contrast-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #ffffff;
}

.jt-contrast-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-contrast-calculator {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 24px;
  align-items: start;
}

.jt-contrast-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-contrast-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #ffffff;
}

.jt-contrast-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #ffffff;
}

.jt-contrast-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-contrast-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-contrast-field.full {
  grid-column: 1 / -1;
}

.jt-contrast-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-contrast-wrap input[type="text"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
  -webkit-appearance: none;
  appearance: none;
}

.jt-contrast-wrap input[type="text"]:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255, 255, 255, 0.07);
}

.jt-contrast-picker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.jt-contrast-wrap input[type="color"] {
  width: 64px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.jt-contrast-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-contrast-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-contrast-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.jt-contrast-primary-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

.jt-contrast-secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.jt-contrast-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.jt-contrast-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-contrast-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-contrast-hero-result {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-contrast-hero-result .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-contrast-hero-result .amount {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 10px;
  word-break: break-word;
}

.jt-contrast-hero-result .subtext {
  color: #cbd5f5;
  font-size: 0.95rem;
  line-height: 1.5;
}

.jt-contrast-preview {
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #2563eb;
  color: #ffffff;
}

.jt-contrast-preview h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
}

.jt-contrast-preview p {
  margin: 0 0 16px;
  font-size: 0.98rem;
  line-height: 1.7;
}

.jt-contrast-preview button {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
}

.jt-contrast-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-contrast-stat {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.jt-contrast-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-contrast-stat .value {
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  word-break: break-word;
}

.jt-contrast-breakdown {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
  margin-top: 6px;
}

.jt-contrast-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.96rem;
  color: #dbeafe;
}

.jt-contrast-row:last-child {
  border-bottom: 0;
}

.jt-contrast-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.jt-contrast-status-badge.pass {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.28);
  color: #dcfce7;
}

.jt-contrast-status-badge.fail {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.28);
  color: #fee2e2;
}

@media (max-width: 860px) {
  .jt-contrast-calculator,
  .jt-contrast-form-grid,
  .jt-contrast-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-contrast-card {
    padding: 20px;
  }

  .jt-contrast-header h1 {
    font-size: 2rem;
  }

  .jt-contrast-picker-row {
    align-items: stretch;
    flex-direction: column;
  }

  .jt-contrast-wrap input[type="color"] {
    width: 100%;
  }
}

.jt-gradient-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-gradient-wrap * {
  box-sizing: border-box;
}

.jt-gradient-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-gradient-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-gradient-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.jt-gradient-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #fff;
}

.jt-gradient-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-gradient-calculator {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 24px;
  align-items: start;
}

.jt-gradient-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-gradient-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #fff;
}

.jt-gradient-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.jt-gradient-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-gradient-field.full {
  grid-column: 1 / -1;
}

.jt-gradient-wrap label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-gradient-wrap input[type="text"],
.jt-gradient-wrap select {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
  -webkit-appearance: none;
  appearance: none;
}

.jt-gradient-wrap select option {
  background: #0f172a;
  color: #fff;
}

.jt-gradient-wrap input[type="text"]:focus,
.jt-gradient-wrap select:focus {
  border-color: rgba(125, 211, 252, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  background: rgba(255, 255, 255, 0.07);
}

.jt-gradient-picker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.jt-gradient-wrap input[type="color"] {
  width: 58px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.jt-gradient-stop-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.jt-gradient-stop-card {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.jt-gradient-stop-card:last-child .jt-gradient-stop-row {
  margin-bottom: 0;
}

.jt-gradient-range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.jt-gradient-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.jt-gradient-angle-value {
  min-width: 56px;
  text-align: right;
  font-weight: 700;
  color: #e0f2fe;
}

.jt-gradient-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.jt-gradient-wrap .is-direction-chip {
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.jt-gradient-wrap .is-direction-chip.active {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.38);
}

.jt-gradient-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-gradient-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.jt-gradient-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.jt-gradient-primary-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

.jt-gradient-secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.jt-gradient-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.jt-gradient-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: 0.9rem;
  line-height: 1.6;
}

.jt-gradient-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-gradient-preview {
  height: 260px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #EC4899 100%);
}

.jt-gradient-hero {
  background: var(--success-bg);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-gradient-hero .label {
  color: #cbd5f5;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.jt-gradient-hero .amount {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.jt-gradient-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-gradient-stat {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.jt-gradient-stat .label {
  color: #cbd5f5;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.jt-gradient-stat .value {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  word-break: break-word;
}

@media (max-width: 860px) {
  .jt-gradient-calculator,
  .jt-gradient-form-grid,
  .jt-gradient-stats,
  .jt-gradient-stop-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .jt-gradient-card {
    padding: 20px;
  }

  .jt-gradient-header h1 {
    font-size: 2rem;
  }

  .jt-gradient-picker-row {
    flex-direction: column;
    align-items: stretch;
  }

  .jt-gradient-wrap input[type="color"] {
    width: 100%;
  }
}

.jt-shadow-wrap {
  --card: rgba(255, 255, 255, 0.07);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #38bdf8;
  --success-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-shadow-wrap * {
  box-sizing: border-box;
}

.jt-shadow-header {
  text-align: center;
  margin-bottom: 28px;
}

.jt-shadow-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-shadow-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow: 0 0 18px rgba(56,189,248,.7);
}

.jt-shadow-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem,4vw,3rem);
  line-height: 1.1;
  color: #fff;
}

.jt-shadow-header p {
  margin: 0;
  color: #cbd5f5;
  font-size: 1rem;
  line-height: 1.6;
}

.jt-shadow-calculator {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 24px;
  align-items: start;
}

.jt-shadow-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.jt-shadow-card h2 {
  margin: 0 0 18px;
  font-size: 1.25rem;
  color: #fff;
}

.jt-shadow-form-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px;
}

.jt-shadow-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt-shadow-field.full {
  grid-column: 1 / -1;
}

.jt-shadow-wrap label {
  font-size: .95rem;
  font-weight: 600;
  color: #e2e8f0;
}

.jt-shadow-wrap input[type="text"] {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1rem;
  color: #fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  background: rgba(255,255,255,.05);
  -webkit-appearance: none;
  appearance: none;
}

.jt-shadow-wrap input[type="text"]:focus {
  border-color: rgba(125,211,252,.7);
  box-shadow: 0 0 0 4px rgba(56,189,248,.12);
  background: rgba(255,255,255,.07);
}

.jt-shadow-wrap input[type="color"] {
  width: 64px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.jt-shadow-picker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}

.jt-shadow-range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}

.jt-shadow-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.jt-shadow-range-value {
  min-width: 56px;
  text-align: right;
  font-weight: 700;
  color: #e0f2fe;
}

.jt-shadow-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}

.jt-shadow-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jt-shadow-toggle-copy strong {
  font-size: .95rem;
  color: #fff;
}

.jt-shadow-toggle-copy span {
  font-size: .84rem;
  color: #cbd5f5;
  line-height: 1.4;
}

.jt-shadow-switch {
  position: relative;
  display: inline-flex;
  width: 54px;
  height: 30px;
  flex: 0 0 auto;
}

.jt-shadow-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.jt-shadow-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.12);
  transition: all .25s ease;
  cursor: pointer;
}

.jt-shadow-slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 999px;
  background: #fff;
  transition: transform .25s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.jt-shadow-switch input:checked + .jt-shadow-slider {
  background: rgba(56,189,248,.25);
  border-color: rgba(56,189,248,.45);
}

.jt-shadow-switch input:checked + .jt-shadow-slider::before {
  transform: translateX(24px);
}

.jt-shadow-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.jt-shadow-wrap .is-shadow-preset-chip {
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.jt-shadow-wrap .is-shadow-preset-chip:hover,
.jt-shadow-wrap .is-shadow-preset-chip.active {
  background: rgba(56,189,248,.22);
  border-color: rgba(56,189,248,.38);
}

.jt-shadow-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-shadow-wrap button {
  border: 0;
  border-radius: 14px;
  height: 50px;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s ease;
}

.jt-shadow-primary-btn {
  flex: 1;
  min-width: 180px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
}

.jt-shadow-primary-btn:hover {
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,.4);
}

.jt-shadow-secondary-btn {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}

.jt-shadow-secondary-btn:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.jt-shadow-note {
  margin-top: 16px;
  color: #cbd5f5;
  font-size: .9rem;
  line-height: 1.6;
}

.jt-shadow-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jt-shadow-preview-wrap {
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
}

.jt-shadow-preview-stage {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.12);
  padding: 20px;
}

.jt-shadow-preview-box {
  width: min(100%,260px);
  min-height: 160px;
  border-radius: 18px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-weight: 700;
  color: #0f172a;
}

.jt-shadow-hero {
  background: var(--success-bg);
  border: 1px solid rgba(125,211,252,.2);
  border-radius: 18px;
  padding: 20px;
}

.jt-shadow-hero .label {
  color: #cbd5f5;
  font-size: .95rem;
  margin-bottom: 8px;
}

.jt-shadow-hero .amount {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  word-break: break-word;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}

.jt-shadow-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jt-shadow-stat {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,.05);
}

.jt-shadow-stat .label {
  color: #cbd5f5;
  font-size: .9rem;
  margin-bottom: 6px;
}

.jt-shadow-stat .value {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  word-break: break-word;
}

@media (max-width:860px) {
  .jt-shadow-calculator,
  .jt-shadow-form-grid,
  .jt-shadow-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .jt-shadow-card {
    padding: 20px;
  }

  .jt-shadow-header h1 {
    font-size: 2rem;
  }

  .jt-shadow-picker-row {
    flex-direction: column;
    align-items: stretch;
  }

  .jt-shadow-wrap input[type="color"] {
    width: 100%;
  }
}

.jt-name-picker-wrap{
  --card:rgba(255,255,255,.07);
  --text:#f8fafc;
  --muted:#cbd5e1;
  --border:rgba(255,255,255,.12);
  --accent:#38bdf8;
  --success-bg:rgba(255,255,255,.08);
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --radius:20px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.jt-name-picker-wrap *{
  box-sizing:border-box;
}

.jt-name-picker-header{
  text-align:center;
  margin-bottom:28px;
}

.jt-name-picker-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  font-weight:700;
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.jt-name-picker-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#7dd3fc,#2563eb);
  box-shadow:0 0 18px rgba(56,189,248,.7);
}

.jt-name-picker-header h1{
  margin:0 0 10px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  color:#fff;
}

.jt-name-picker-header p{
  margin:0;
  color:#cbd5f5;
  font-size:1rem;
  line-height:1.6;
}

.jt-name-picker-calculator{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:24px;
  align-items:start;
}

.jt-name-picker-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.jt-name-picker-card h2{
  margin:0 0 18px;
  font-size:1.25rem;
  color:#fff;
}

.jt-name-picker-wrap h3{
  margin:0 0 12px;
  font-size:1rem;
  color:#fff;
}

.jt-name-picker-wrap label{
  font-size:.95rem;
  font-weight:600;
  color:#e2e8f0;
  display:block;
  margin-bottom:8px;
}

.jt-name-picker-wrap textarea,
.jt-name-picker-wrap input[type="text"]{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px;
  font-size:1rem;
  color:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  background:rgba(255,255,255,.05);
  -webkit-appearance:none;
  appearance:none;
  font-family:inherit;
}

.jt-name-picker-wrap textarea{
  min-height:260px;
  resize:vertical;
  line-height:1.6;
}

.jt-name-picker-wrap input[type="text"]{
  height:50px;
  padding:0 14px;
}

.jt-name-picker-wrap textarea:focus,
.jt-name-picker-wrap input[type="text"]:focus{
  border-color:rgba(125,211,252,.7);
  box-shadow:0 0 0 4px rgba(56,189,248,.12);
  background:rgba(255,255,255,.07);
}

.jt-name-picker-wrap input[readonly]{
  color:#cbd5f5;
}

.jt-name-picker-form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:18px;
}

.jt-name-picker-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.jt-name-picker-field.full{
  grid-column:1 / -1;
}

.jt-name-picker-toggle-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.jt-name-picker-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}

.jt-name-picker-toggle-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.jt-name-picker-toggle-copy strong{
  font-size:.95rem;
  color:#fff;
}

.jt-name-picker-toggle-copy span{
  font-size:.84rem;
  color:#cbd5f5;
  line-height:1.4;
}

.jt-name-picker-switch{
  position:relative;
  display:inline-flex;
  width:54px;
  height:30px;
  flex:0 0 auto;
}

.jt-name-picker-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}

.jt-name-picker-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.12);
  transition:all .25s ease;
  cursor:pointer;
}

.jt-name-picker-slider::before{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  left:3px;
  top:3px;
  border-radius:999px;
  background:#fff;
  transition:transform .25s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.jt-name-picker-switch input:checked + .jt-name-picker-slider{
  background:rgba(56,189,248,.25);
  border-color:rgba(56,189,248,.45);
}

.jt-name-picker-switch input:checked + .jt-name-picker-slider::before{
  transform:translateX(24px);
}

.jt-name-picker-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.jt-name-picker-wrap button{
  border:0;
  border-radius:14px;
  height:50px;
  padding:0 18px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:all .25s ease;
  font-family:inherit;
}

.jt-name-picker-primary-btn{
  flex:1;
  flex:1 1 180px;
min-width:0;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,.35);
  min-height:48px;
  padding:12px 16px;
}

.jt-name-picker-primary-btn:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-2px);
  box-shadow:0 14px 35px rgba(0,0,0,.4);
}

.jt-name-picker-secondary-btn{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  min-height:48px;
  padding:12px 16px;
}

.jt-name-picker-secondary-btn:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}

.jt-name-picker-note{
  margin-top:16px;
  color:#cbd5f5;
  font-size:.9rem;
  line-height:1.6;
}

.jt-name-picker-results{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.jt-name-picker-hero{
  background:var(--success-bg);
  border:1px solid rgba(125,211,252,.2);
  border-radius:18px;
  padding:20px;
}

.jt-name-picker-hero .label{
  color:#cbd5f5;
  font-size:.95rem;
  margin-bottom:8px;
}

.jt-name-picker-hero .amount{
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:800;
  line-height:1.3;
  color:#fff;
  word-break:break-word;
}

.jt-name-picker-hero .subtext{
  color:#cbd5f5;
  font-size:.95rem;
  line-height:1.5;
  margin-top:10px;
}

.jt-name-picker-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.jt-name-picker-stat{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,.05);
}

.jt-name-picker-stat .label{
  color:#cbd5f5;
  font-size:.9rem;
  margin-bottom:6px;
}

.jt-name-picker-stat .value{
  font-size:1.05rem;
  font-weight:800;
  color:#fff;
  word-break:break-word;
}

.jt-name-picker-breakdown{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:18px;
  margin-top:6px;
}

.jt-name-picker-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px dashed rgba(255,255,255,.1);
  font-size:.96rem;
  color:#dbeafe;
}

.jt-name-picker-row strong{
  color:#fff;
  text-align:right;
  word-break:break-word;
}

.jt-name-picker-row:last-child{
  border-bottom:0;
}

@media (max-width:860px){
  .jt-name-picker-calculator,
  .jt-name-picker-form-grid,
  .jt-name-picker-stats,
  .jt-name-picker-toggle-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .jt-name-picker-card{
    padding:20px;
  }

  .jt-name-picker-header h1{
    font-size:2rem;
  }

  .jt-name-picker-actions{
    flex-direction:column;
  }

  .jt-name-picker-primary-btn,
  .jt-name-picker-secondary-btn{
    width:100%;
    max-height:20px;
  }
}

.jt-meal-wrap{
  --card:rgba(255,255,255,.07);
  --text:#f8fafc;
  --muted:#cbd5e1;
  --border:rgba(255,255,255,.12);
  --accent:#38bdf8;
  --success-bg:rgba(255,255,255,.08);
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --radius:20px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.jt-meal-header{
  text-align:center;
  margin-bottom:24px;
}

.jt-meal-calculator{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:20px;
  align-items:start;
}

.jt-meal-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  backdrop-filter:blur(8px);
}

.jt-meal-card h2{
  margin:0 0 18px;
  font-size:2rem;
  line-height:1.1;
}

.jt-meal-field + .jt-meal-field{
  margin-top:14px;
}

.jt-meal-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  margin-top:14px;
}

.jt-meal-label{
  display:block;
  margin-bottom:8px;
  font-size:.95rem;
  font-weight:700;
  color:#fff;
}

.jt-meal-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.jt-meal-chip{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:12px;
  padding:9px 12px;
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
  line-height:1.1;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.jt-meal-chip:hover{
  transform:translateY(-1px);
}

.jt-meal-chip.active{
  background:rgba(56,189,248,.18);
  border-color:rgba(56,189,248,.38);
}

.jt-meal-input{
  width:100%;
  min-height:44px;
  padding:11px 13px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  font:inherit;
  outline:none;
}

.jt-meal-input::placeholder{
  color:rgba(203,213,225,.7);
}

.jt-meal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.jt-meal-primary-btn,
.jt-meal-secondary-btn{
  min-height:44px;
  padding:11px 15px;
  border-radius:12px;
  font-size:.92rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  color:#fff;
}

.jt-meal-primary-btn{
  flex:1 1 200px;
  background:rgba(255,255,255,.11);
}

.jt-meal-secondary-btn{
  flex:1 1 150px;
  background:rgba(255,255,255,.07);
}

.jt-meal-note{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.45;
  font-size:.95rem;
}

.jt-meal-results{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.jt-meal-hero{
  background:var(--success-bg);
  border:1px solid rgba(125,211,252,.2);
  border-radius:16px;
  padding:16px;
}

.jt-meal-hero .label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:6px;
}

.jt-meal-hero .amount{
  font-size:2rem;
  font-weight:800;
  line-height:1.05;
  margin-bottom:8px;
}

.jt-meal-hero .subtext{
  color:var(--muted);
  line-height:1.45;
}

.jt-meal-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.jt-meal-stat{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:12px;
}

.jt-meal-stat span{
  display:block;
  color:var(--muted);
  font-size:.8rem;
  margin-bottom:4px;
}

.jt-meal-stat strong{
  display:block;
  font-size:.95rem;
  color:#fff;
}

.jt-meal-block{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:14px;
}

.jt-meal-block h3{
  margin:0 0 10px;
  font-size:1rem;
}

.jt-meal-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.jt-meal-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  font-size:.8rem;
  font-weight:700;
  color:#e5eef8;
}

.jt-meal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.jt-meal-item{
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.jt-meal-method{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  line-height:1.55;
}

@media (max-width: 980px){
  .jt-meal-calculator{
    grid-template-columns:1fr;
  }
}

@media (max-width: 700px){
  .jt-meal-grid-2,
  .jt-meal-stats{
    grid-template-columns:1fr;
  }

  .jt-meal-card{
    padding:16px;
  }

  .jt-meal-card h2{
    font-size:1.7rem;
  }

  .jt-meal-hero .amount{
    font-size:1.6rem;
  }

  .jt-meal-actions{
    flex-direction:column;
  }

  .jt-meal-primary-btn,
  .jt-meal-secondary-btn{
    width:100%;
    flex:1 1 auto;
  }
}

.jt-dice-wrap,
.jt-dice-wrap *{
  box-sizing:border-box;
}

.jt-dice-wrap{
  --panel:rgba(15,20,34,.72);
  --text:#eef3ff;
  --muted:#9aa7c7;
  --soft:#7f8eb2;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --radius-xl:28px;
  --accent:#da4b57;
  --accent-rgb:218,75,87;
  position:relative;
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.jt-dice-wrap .jt-dice-shell{
  position:relative;
  overflow:hidden;
  padding:24px;
  border-radius:32px;
  background:
    radial-gradient(circle at 15% 10%, rgba(var(--accent-rgb),.18), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(129,170,255,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(10,13,22,.92), rgba(7,10,18,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}

.jt-dice-wrap .jt-dice-shell:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.06), transparent 22%, transparent 76%, rgba(255,255,255,.04)),
    radial-gradient(circle at 80% 120%, rgba(var(--accent-rgb),.10), transparent 25%);
  pointer-events:none;
}

.jt-dice-wrap .jt-dice-head{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:22px;
}

.jt-dice-wrap .jt-eyebrow{
  margin:0 0 6px;
  color:#cfd7f5;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.9;
}

.jt-dice-wrap h1{
  margin:0;
  font-size:clamp(28px,4vw,42px);
  line-height:1.04;
  letter-spacing:-.03em;
  color:#fff;
}

.jt-dice-wrap .jt-sub{
  margin:10px 0 0;
  max-width:760px;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

.jt-dice-wrap .jt-head-badge{
  padding:12px 14px;
  border-radius:999px;
  white-space:nowrap;
  color:#fff;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.24), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.jt-dice-wrap .jt-dice-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(360px,1.15fr);
  gap:18px;
}

.jt-dice-wrap .jt-card{
  position:relative;
  border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--panel);
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.30);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.jt-dice-wrap .jt-card-glow{
  position:absolute;
  inset:auto -20% 65% auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.20), transparent 60%);
  pointer-events:none;
}

.jt-dice-wrap .jt-card-inner{
  position:relative;
  z-index:2;
  padding:20px;
}

.jt-dice-wrap .jt-panel .jt-block + .jt-block{
  margin-top:18px;
}

.jt-dice-wrap .jt-two-up{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.jt-dice-wrap .jt-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.jt-dice-wrap .jt-label,
.jt-dice-wrap .jt-mini-label{
  display:block;
  color:#dfe6ff;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.jt-dice-wrap .jt-mini-label{
  margin:0 0 10px;
}

.jt-dice-wrap .jt-chip,
.jt-dice-wrap .jt-die-type,
.jt-dice-wrap .jt-btn,
.jt-dice-wrap .jt-skin{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
  font-family:inherit;
}

.jt-dice-wrap .jt-chip:hover,
.jt-dice-wrap .jt-die-type:hover,
.jt-dice-wrap .jt-btn:hover,
.jt-dice-wrap .jt-skin:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
}

.jt-dice-wrap .jt-preset-row,
.jt-dice-wrap .jt-die-select{
  display:grid;
  gap:10px;
}

.jt-dice-wrap .jt-preset-row{
  grid-template-columns:repeat(3,1fr);
}

.jt-dice-wrap .jt-die-select{
  grid-template-columns:repeat(4,1fr);
}

.jt-dice-wrap .jt-chip,
.jt-dice-wrap .jt-die-type{
  min-height:46px;
  padding:12px 10px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  font-weight:700;
  font-size:14px;
}

.jt-dice-wrap .is-active{
  border-color:rgba(var(--accent-rgb),.55) !important;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.08)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.12), 0 14px 28px rgba(var(--accent-rgb),.12);
}

.jt-dice-wrap .jt-stepper{
  display:grid;
  grid-template-columns:46px 1fr 46px;
  gap:8px;
}

.jt-dice-wrap .jt-step,
.jt-dice-wrap .jt-input{
  min-height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
}

.jt-dice-wrap .jt-step{
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.jt-dice-wrap .jt-input{
  width:100%;
  padding:0 14px;
  text-align:center;
  font-weight:800;
  font-size:16px;
  outline:none;
  font-family:inherit;
}

.jt-dice-wrap .jt-input:focus{
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}

.jt-dice-wrap .jt-switch{
  min-height:48px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  cursor:pointer;
}

.jt-dice-wrap .jt-switch input{
  display:none;
}

.jt-dice-wrap .jt-switch-ui{
  width:42px;
  height:24px;
  border-radius:999px;
  position:relative;
  flex:0 0 auto;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  transition:background .2s ease,border-color .2s ease;
}

.jt-dice-wrap .jt-switch-ui:before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  transition:left .2s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}

.jt-dice-wrap .jt-switch input:checked + .jt-switch-ui{
  background:rgba(var(--accent-rgb),.28);
  border-color:rgba(var(--accent-rgb),.44);
}

.jt-dice-wrap .jt-switch input:checked + .jt-switch-ui:before{
  left:20px;
}

.jt-dice-wrap .jt-switch-text{
  color:#e5ecff;
  font-size:14px;
  line-height:1.3;
}

.jt-dice-wrap .jt-skin-groups{
  display:grid;
  gap:14px;
}

.jt-dice-wrap .jt-skin-group{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(255,255,255,.02);
}

.jt-dice-wrap .jt-skin-group:nth-child(2){
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb),.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(255,255,255,.02);
}

.jt-dice-wrap .jt-skin-group-title{
  margin:0 0 10px;
  color:#dbe5ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.jt-dice-wrap .jt-skins{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

.jt-dice-wrap .jt-skins-basic{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.jt-dice-wrap .jt-skins-legendary{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.jt-dice-wrap .jt-skin{
  position:relative;
  min-height:58px;
  padding:0;
  overflow:hidden;
  border-radius:15px;
  background:rgba(255,255,255,.04);
  isolation:isolate;
}

.jt-dice-wrap .jt-skins-legendary .jt-skin{
  min-height:62px;
}

.jt-dice-wrap .jt-skins-basic .jt-skin{
  min-height:54px;
}

.jt-dice-wrap .jt-skin span{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  width:100%;
  height:100%;
  padding:11px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.15;
  text-align:left;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

.jt-dice-wrap .jt-skin:before,
.jt-dice-wrap .jt-skin:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.jt-dice-wrap .jt-skin:after{
  background:linear-gradient(180deg, rgba(255,255,255,.20), transparent 34%, rgba(0,0,0,.22) 100%);
  mix-blend-mode:screen;
}

.jt-dice-wrap .jt-skin-premium{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 26px rgba(0,0,0,.20);
}

.jt-dice-wrap .jt-skin-premium:before{
  filter:saturate(1.08) contrast(1.04);
}

.jt-dice-wrap .jt-skin-premium:after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 28%, rgba(0,0,0,.22) 100%),
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.18), transparent 28%);
}

.jt-dice-wrap .jt-skin.is-active{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb),.18),
    0 16px 30px rgba(var(--accent-rgb),.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.jt-dice-wrap .jt-skins-legendary .jt-skin.is-active{
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb),.22),
    0 18px 34px rgba(var(--accent-rgb),.18),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.jt-dice-wrap .jt-skin[data-skin="dragon"]:before{
  background:linear-gradient(140deg, #4d0a10 0%, #8f1520 36%, #d73e4b 68%, #ff9c9f 100%);
}
.jt-dice-wrap .jt-skin[data-skin="sapphire"]:before{
  background:linear-gradient(140deg, #091b49 0%, #1248a4 34%, #2d79ff 66%, #9adfff 100%);
}
.jt-dice-wrap .jt-skin[data-skin="emerald"]:before{
  background:linear-gradient(140deg, #08321f 0%, #0f7a49 36%, #1db36e 68%, #9affe0 100%);
}
.jt-dice-wrap .jt-skin[data-skin="amethyst"]:before{
  background:linear-gradient(140deg, #22093a 0%, #6e2ac0 36%, #a35eff 68%, #f1cfff 100%);
}
.jt-dice-wrap .jt-skin[data-skin="obsidian"]:before{
  background:linear-gradient(140deg, #06080b 0%, #171b22 38%, #343b46 72%, #8b97a8 100%);
}
.jt-dice-wrap .jt-skin[data-skin="gold"]:before{
  background:linear-gradient(140deg, #473208 0%, #8e6610 32%, #d9b44d 60%, #fff0b2 100%);
}

.jt-dice-wrap .jt-skin[data-skin="marble"]:before{
  background:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.92), transparent 22%),
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.34), transparent 26%),
    linear-gradient(145deg, #faf8f3 0%, #eee7de 30%, #d9d0c4 62%, #8a8177 100%);
}

.jt-dice-wrap .jt-skin[data-skin="marble"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 32%, rgba(0,0,0,.08) 100%),
    repeating-linear-gradient(
      120deg,
      rgba(112,104,97,.00) 0 18px,
      rgba(112,104,97,.10) 18px 20px,
      rgba(170,160,150,.00) 20px 42px,
      rgba(122,115,108,.08) 42px 44px,
      rgba(95,90,84,.00) 44px 66px
    );
  mix-blend-mode:multiply;
}

.jt-dice-wrap .jt-skin[data-skin="lava"]:before{
  background:
    radial-gradient(circle at 24% 30%, rgba(255,200,110,.92), transparent 14%),
    radial-gradient(circle at 58% 44%, rgba(255,110,0,.92), transparent 18%),
    radial-gradient(circle at 72% 70%, rgba(255,145,35,.68), transparent 16%),
    linear-gradient(145deg, #0b0908 0%, #1e110d 28%, #6f1d00 56%, #ff6800 82%, #ffd076 100%);
}

.jt-dice-wrap .jt-skin[data-skin="lava"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 28%, rgba(0,0,0,.16) 100%),
    repeating-linear-gradient(
      133deg,
      rgba(255,180,70,.00) 0 14px,
      rgba(255,180,70,.18) 14px 16px,
      rgba(255,90,0,.00) 16px 30px,
      rgba(255,120,0,.16) 30px 32px,
      rgba(255,220,120,.00) 32px 44px
    );
  mix-blend-mode:screen;
}

.jt-dice-wrap .jt-skin[data-skin="nebula"]:before{
  background:
    radial-gradient(circle at 22% 30%, rgba(255,79,216,.92), transparent 15%),
    radial-gradient(circle at 63% 40%, rgba(89,211,255,.88), transparent 16%),
    radial-gradient(circle at 54% 70%, rgba(177,69,255,.64), transparent 18%),
    radial-gradient(circle at 78% 20%, rgba(120,88,255,.42), transparent 18%),
    linear-gradient(145deg, #09041a 0%, #1c0b59 24%, #5522ca 48%, #c445ff 72%, #63d6ff 100%);
}

.jt-dice-wrap .jt-skin[data-skin="nebula"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%, rgba(0,0,0,.18) 100%);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.05),
    inset 0 0 34px rgba(122,87,255,.08);
}

.jt-dice-wrap .jt-skin[data-skin="nebula"] span::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.92) 0 1px, transparent 1.8px),
    radial-gradient(circle at 23% 62%, rgba(255,255,255,.74) 0 1px, transparent 1.8px),
    radial-gradient(circle at 44% 32%, rgba(255,255,255,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 58% 74%, rgba(255,255,255,.70) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 26%, rgba(255,255,255,.88) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 62%, rgba(255,255,255,.78) 0 1px, transparent 1.8px);
  pointer-events:none;
  opacity:.9;
}

.jt-dice-wrap .jt-skin[data-skin="frost"]:before{
  background:
    radial-gradient(circle at 24% 26%, rgba(255,255,255,.92), transparent 18%),
    radial-gradient(circle at 70% 34%, rgba(205,242,255,.58), transparent 22%),
    radial-gradient(circle at 56% 72%, rgba(155,223,255,.34), transparent 18%),
    linear-gradient(145deg, #eefcff 0%, #d8f2ff 28%, #9edfff 62%, #ffffff 100%);
}

.jt-dice-wrap .jt-skin[data-skin="frost"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 30%, rgba(0,0,0,.08) 100%),
    repeating-linear-gradient(
      126deg,
      rgba(255,255,255,.00) 0 16px,
      rgba(255,255,255,.16) 16px 17px,
      rgba(190,235,255,.00) 17px 34px,
      rgba(255,255,255,.12) 34px 35px
    );
  mix-blend-mode:screen;
}

.jt-dice-wrap .jt-skin[data-skin="void"]:before{
  background:
    radial-gradient(circle at 28% 30%, rgba(140,69,255,.50), transparent 16%),
    radial-gradient(circle at 66% 44%, rgba(192,140,255,.34), transparent 18%),
    radial-gradient(circle at 56% 72%, rgba(92,52,210,.24), transparent 18%),
    linear-gradient(145deg, #04040a 0%, #140b25 24%, #34166f 52%, #7a3cff 78%, #caa8ff 100%);
}

.jt-dice-wrap .jt-skin[data-skin="void"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 30%, rgba(0,0,0,.20) 100%);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.03),
    inset 0 0 26px rgba(140,69,255,.08);
}

.jt-dice-wrap .jt-skin[data-skin="void"] span::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 60%, rgba(255,255,255,.56) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 28%, rgba(255,255,255,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 66%, rgba(255,255,255,.62) 0 1px, transparent 1.8px);
  pointer-events:none;
  opacity:.72;
}

.jt-dice-wrap .jt-skin[data-skin="opal"]:before{
  background:
    radial-gradient(circle at 24% 28%, rgba(255,255,255,.96), transparent 18%),
    radial-gradient(circle at 34% 58%, rgba(255,183,218,.52), transparent 16%),
    radial-gradient(circle at 62% 34%, rgba(159,234,255,.54), transparent 18%),
    radial-gradient(circle at 72% 66%, rgba(255,231,155,.44), transparent 16%),
    radial-gradient(circle at 52% 74%, rgba(217,194,255,.34), transparent 14%),
    linear-gradient(145deg, #fffdf9 0%, #f4efe8 30%, #f6ebff 56%, #d7f7ff 78%, #fff8cf 100%);
}

.jt-dice-wrap .jt-skin[data-skin="opal"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), transparent 28%, rgba(0,0,0,.06) 100%);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.08),
    inset 0 0 24px rgba(255,210,240,.10);
}

.jt-dice-wrap .jt-skin[data-skin="thunder"]:before{
  background:
    radial-gradient(circle at 24% 28%, rgba(95,208,255,.46), transparent 16%),
    radial-gradient(circle at 66% 42%, rgba(125,134,255,.34), transparent 18%),
    radial-gradient(circle at 54% 72%, rgba(232,243,255,.22), transparent 14%),
    linear-gradient(145deg, #070b14 0%, #16233f 24%, #2450c7 54%, #5fd0ff 82%, #cfdfff 100%);
}

.jt-dice-wrap .jt-skin[data-skin="thunder"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 30%, rgba(0,0,0,.18) 100%),
    repeating-linear-gradient(
      132deg,
      rgba(255,255,255,.00) 0 16px,
      rgba(160,220,255,.14) 16px 17px,
      rgba(80,130,255,.00) 17px 30px,
      rgba(210,235,255,.12) 30px 31px
    );
  mix-blend-mode:screen;
}

.jt-dice-wrap .jt-skin[data-skin="thunder"] span::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.70) 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 28%, rgba(255,255,255,.62) 0 1px, transparent 1.8px),
    radial-gradient(circle at 60% 66%, rgba(255,255,255,.54) 0 1px, transparent 1.8px);
  pointer-events:none;
  opacity:.55;
}

.jt-dice-wrap .jt-skin[data-skin="ocean"]:before{
  background:
    radial-gradient(circle at 24% 28%, rgba(99,223,255,.34), transparent 18%),
    radial-gradient(circle at 68% 36%, rgba(216,251,255,.26), transparent 20%),
    radial-gradient(circle at 54% 72%, rgba(22,144,168,.26), transparent 18%),
    linear-gradient(145deg, #061824 0%, #0f4a63 24%, #1690a8 54%, #63dfff 82%, #d8fbff 100%);
}

.jt-dice-wrap .jt-skin[data-skin="ocean"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%, rgba(0,0,0,.12) 100%),
    repeating-linear-gradient(
      132deg,
      rgba(255,255,255,.00) 0 18px,
      rgba(180,245,255,.10) 18px 20px,
      rgba(80,185,210,.00) 20px 38px,
      rgba(220,250,255,.08) 38px 40px
    );
  mix-blend-mode:screen;
}

.jt-dice-wrap .jt-skin[data-skin="bloodstone"]:before{
  background:
    radial-gradient(circle at 26% 30%, rgba(240,106,116,.24), transparent 18%),
    radial-gradient(circle at 66% 44%, rgba(158,31,42,.28), transparent 18%),
    radial-gradient(circle at 54% 72%, rgba(70,18,24,.18), transparent 16%),
    linear-gradient(145deg, #090b0c 0%, #1b2422 24%, #3e1216 56%, #8e1f29 82%, #f06a74 100%);
}

.jt-dice-wrap .jt-skin[data-skin="bloodstone"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 30%, rgba(0,0,0,.18) 100%),
    repeating-linear-gradient(
      128deg,
      rgba(255,255,255,.00) 0 18px,
      rgba(180,60,72,.10) 18px 20px,
      rgba(50,20,24,.00) 20px 38px,
      rgba(230,100,115,.08) 38px 40px
    );
  mix-blend-mode:screen;
}

.jt-dice-wrap .jt-skin[data-skin="dragon_gold"]:before{
  background:
    radial-gradient(circle at 26% 28%, rgba(255,220,130,.30), transparent 18%),
    radial-gradient(circle at 66% 40%, rgba(217,170,60,.34), transparent 18%),
    radial-gradient(circle at 54% 72%, rgba(190,50,60,.24), transparent 18%),
    linear-gradient(145deg, #2a070b 0%, #6d1118 26%, #b62731 54%, #d9aa3c 82%, #fff0b2 100%);
}

.jt-dice-wrap .jt-skin[data-skin="dragon_gold"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 30%, rgba(0,0,0,.14) 100%),
    repeating-linear-gradient(
      132deg,
      rgba(255,245,190,.00) 0 16px,
      rgba(255,230,150,.13) 16px 18px,
      rgba(160,35,45,.00) 18px 32px,
      rgba(220,185,80,.10) 32px 34px
    );
  mix-blend-mode:screen;
}

.jt-dice-wrap .jt-skin[data-skin="crystal"]:before{
  background:
    radial-gradient(circle at 22% 26%, rgba(255,255,255,.96), transparent 18%),
    radial-gradient(circle at 68% 34%, rgba(210,238,255,.46), transparent 20%),
    radial-gradient(circle at 54% 72%, rgba(214,209,255,.24), transparent 16%),
    linear-gradient(145deg, #f7fdff 0%, #e8f4ff 26%, #d6eeff 54%, #cfcfff 82%, #ffffff 100%);
}

.jt-dice-wrap .jt-skin[data-skin="crystal"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 28%, rgba(0,0,0,.06) 100%),
    repeating-linear-gradient(
      130deg,
      rgba(255,255,255,.00) 0 16px,
      rgba(255,255,255,.14) 16px 17px,
      rgba(190,225,255,.00) 17px 32px,
      rgba(235,245,255,.10) 32px 33px
    );
  mix-blend-mode:screen;
}

.jt-dice-wrap .jt-skin[data-skin="forest"]:before{
  background:
    radial-gradient(circle at 24% 28%, rgba(121,217,164,.26), transparent 18%),
    radial-gradient(circle at 68% 36%, rgba(230,255,232,.18), transparent 18%),
    radial-gradient(circle at 54% 72%, rgba(23,138,84,.20), transparent 18%),
    linear-gradient(145deg, #06140c 0%, #0d3a24 24%, #178a54 54%, #79d9a4 82%, #e6ffe8 100%);
}

.jt-dice-wrap .jt-skin[data-skin="forest"]::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 30%, rgba(0,0,0,.12) 100%),
    repeating-linear-gradient(
      130deg,
      rgba(255,255,255,.00) 0 18px,
      rgba(170,240,190,.10) 18px 20px,
      rgba(30,120,70,.00) 20px 38px,
      rgba(235,255,240,.08) 38px 40px
    );
  mix-blend-mode:screen;
}

.jt-dice-wrap .jt-action-row{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:10px;
  margin-top:18px;
}

.jt-dice-wrap .jt-btn{
  min-height:50px;
  padding:13px 16px;
  border-radius:15px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  font-weight:800;
  font-size:14px;
}

.jt-stage-roll-cta {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.jt-stage-roll-cta .jt-btn {
  flex: 1;
  min-width: 120px;
}

.jt-dice-wrap .jt-btn-primary{
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.28), rgba(var(--accent-rgb),.14)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-color:rgba(var(--accent-rgb),.42);
  box-shadow:0 18px 32px rgba(var(--accent-rgb),.14);
}

.jt-dice-wrap .jt-btn-ghost{
  opacity:.88;
}

.jt-dice-wrap .jt-results-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}

.jt-dice-wrap .jt-notation{
  font-size:28px;
  line-height:1;
  letter-spacing:-.03em;
  font-weight:900;
}

.jt-dice-wrap .jt-total-orb{
  min-width:124px;
  text-align:center;
  padding:12px 14px;
  border-radius:20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(var(--accent-rgb),.18), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.jt-dice-wrap .jt-total-label{
  display:block;
  color:#d7dffa;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.jt-dice-wrap .jt-total-value{
  display:block;
  margin-top:5px;
  font-size:32px;
  font-weight:900;
  letter-spacing:-.04em;
}

.jt-dice-wrap .jt-stage-wrap{
  margin-top:18px;
}

.jt-dice-wrap .jt-stage{
  min-height:240px;
  padding:0;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 18% 10%, rgba(var(--accent-rgb),.10), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(135,170,255,.06), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(8,13,25,.68), rgba(4,8,18,.90));
  position:relative;
  overflow:hidden;
}

.jt-dice-wrap .jt-stage-3d canvas{
  width:100%;
  height:240px;
  display:block;
}

.jt-dice-wrap .jt-stage-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  pointer-events:none;
  transition:opacity .2s ease;
}

.jt-dice-wrap .jt-stage-empty.is-hidden{
  opacity:0;
}

.jt-dice-wrap .jt-stage-empty-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  font-size:28px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.jt-dice-wrap .jt-build-wrap,
.jt-dice-wrap .jt-breakdown-wrap{
  margin-top:18px;
}

.jt-dice-wrap .jt-build,
.jt-dice-wrap .jt-breakdown{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.jt-dice-wrap .jt-build-pill,
.jt-dice-wrap .jt-roll-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#f3f7ff;
  font-size:13px;
  font-weight:700;
}

.jt-dice-wrap .jt-roll-pill.is-dropped{
  opacity:.46;
  text-decoration:line-through;
}

.jt-dice-wrap .jt-build-pill strong{
  font-size:14px;
  color:#fff;
}

.jt-dice-wrap .jt-build-idle,
.jt-dice-wrap .jt-breakdown-idle{
  color:var(--soft);
  font-size:14px;
}

.jt-dice-wrap .jt-stats-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.jt-dice-wrap .jt-stat{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
}

.jt-dice-wrap .jt-stat-label{
  display:block;
  color:#d6def8;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.jt-dice-wrap .jt-stat-value{
  margin-top:8px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#fff;
  word-break:break-word;
}

@media (max-width:980px){
  .jt-dice-wrap .jt-dice-grid{
    grid-template-columns:1fr;
  }

  .jt-dice-wrap .jt-dice-head{
    flex-direction:column;
  }

  .jt-dice-wrap .jt-skins-basic{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .jt-dice-wrap .jt-skins-legendary{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:720px){
  .jt-dice-wrap .jt-dice-shell{
    padding:18px;
  }

  .jt-dice-wrap .jt-card-inner{
    padding:16px;
  }

  .jt-dice-wrap .jt-preset-row{
    grid-template-columns:1fr;
  }

  .jt-dice-wrap .jt-die-select{
    grid-template-columns:repeat(3,1fr);
  }

  .jt-dice-wrap .jt-two-up{
    grid-template-columns:1fr;
  }

  .jt-dice-wrap .jt-skins-basic{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .jt-dice-wrap .jt-skins-legendary{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .jt-dice-wrap .jt-action-row{
    grid-template-columns:1fr;
  }

  .jt-dice-wrap .jt-results-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .jt-dice-wrap .jt-total-orb{
    width:100%;
  }

  .jt-dice-wrap .jt-stage,
  .jt-dice-wrap .jt-stage-3d canvas{
    min-height:210px;
    height:210px;
  }

  .jt-dice-wrap .jt-stats-grid{
    grid-template-columns:1fr;
  }
}

.jt-wheel-wrap{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--success-bg:rgba(255,255,255,.08);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1120px;
margin:0 auto;
}
.jt-wheel-wrap *{box-sizing:border-box;}

.jt-wheel-header{
text-align:center;
margin-bottom:28px;
}
.jt-wheel-brand{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:16px;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 8px 24px rgba(0,0,0,.2);
font-weight:700;
color:#fff;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.jt-wheel-brand-dot{
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg,#7dd3fc,#2563eb);
box-shadow:0 0 18px rgba(56,189,248,.7);
}
.jt-wheel-header h1{
margin:0 0 10px;
font-size:clamp(2rem,4vw,3rem);
line-height:1.1;
color:#fff;
}
.jt-wheel-header p{
margin:0;
color:#cbd5f5;
font-size:1rem;
line-height:1.65;
}

.jt-wheel-calculator{
display:grid;
grid-template-columns:1.02fr .98fr;
gap:24px;
align-items:start;
}
.jt-wheel-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-wheel-card h2{
margin:0 0 18px;
font-size:1.25rem;
color:#fff;
}

.jt-wheel-label{
display:block;
margin-bottom:10px;
font-size:.95rem;
font-weight:700;
color:#e2e8f0;
}
.jt-wheel-wrap textarea{
width:100%;
min-height:240px;
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:14px;
font-size:1rem;
color:#fff;
outline:none;
resize:vertical;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
background:rgba(255,255,255,.05);
-webkit-appearance:none;
appearance:none;
font-family:inherit;
line-height:1.6;
}
.jt-wheel-wrap textarea:focus{
border-color:rgba(125,211,252,.7);
box-shadow:0 0 0 4px rgba(56,189,248,.12);
background:rgba(255,255,255,.07);
}

.jt-wheel-field{margin-top:18px;}
.jt-wheel-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-wheel-chip{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-size:.9rem;
font-weight:700;
cursor:pointer;
transition:all .2s ease;
}
.jt-wheel-chip:hover{
background:rgba(255,255,255,.1);
transform:translateY(-1px);
}
.jt-wheel-chip.active{
background:rgba(56,189,248,.18);
border-color:rgba(56,189,248,.38);
color:#e0f2fe;
}

.jt-wheel-range-row{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}
.jt-wheel-wrap input[type="range"]{
flex:1;
accent-color:var(--accent);
}
.jt-wheel-range-value{
min-width:74px;
text-align:right;
font-weight:700;
color:#e0f2fe;
}

.jt-wheel-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
margin-top:12px;
}
.jt-wheel-toggle-copy{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0;
}
.jt-wheel-toggle-copy strong{
font-size:.95rem;
color:#fff;
}
.jt-wheel-toggle-copy span{
font-size:.84rem;
color:#cbd5f5;
line-height:1.4;
}
.jt-wheel-switch{
position:relative;
display:inline-flex;
width:54px;
height:30px;
flex:0 0 auto;
}
.jt-wheel-switch input{
opacity:0;
width:0;
height:0;
position:absolute;
}
.jt-wheel-slider{
position:absolute;
inset:0;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
cursor:pointer;
}
.jt-wheel-slider::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
top:3px;
border-radius:999px;
background:#fff;
transition:transform .25s ease;
box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.jt-wheel-switch input:checked + .jt-wheel-slider{
background:rgba(56,189,248,.25);
border-color:rgba(56,189,248,.45);
}
.jt-wheel-switch input:checked + .jt-wheel-slider::before{
transform:translateX(24px);
}

.jt-wheel-actions{
display:flex;
gap:12px;
margin-top:22px;
flex-wrap:wrap;
}

.jt-wheel-wrap button{
border:0;
border-radius:14px;
height:50px;
padding:0 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:all .25s ease;
}

.jt-wheel-primary-btn{
flex:1;
min-width:180px;
border:1px solid rgba(255,255,255,.18);
background:var(--jt-wheel-button, rgba(255,255,255,.1));
color:var(--jt-wheel-button-text, #ffffff);
box-shadow:
0 10px 28px rgba(0,0,0,.35),
0 0 18px var(--jt-wheel-glow, rgba(56,189,248,.25)),
0 0 0 1px rgba(255,255,255,.08) inset;
}

.jt-wheel-primary-btn:hover{
transform:translateY(-2px);
filter:brightness(1.12);
box-shadow:
0 16px 36px rgba(0,0,0,.45),
0 0 22px var(--jt-wheel-glow, rgba(56,189,248,.28)),
0 0 0 1px rgba(255,255,255,.1) inset;
}

.jt-wheel-primary-btn:disabled{
opacity:.7;
cursor:not-allowed;
transform:none;
filter:none;
}

.jt-wheel-secondary-btn{
background:rgba(255,255,255,.08);
color:#fff;
border:1px solid rgba(255,255,255,.12);
}

.jt-wheel-secondary-btn:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-wheel-stage-actions{
display:flex;
justify-content:center;
margin-top:4px;
}

.jt-wheel-stage-spin-btn{
width:100%;
max-width:260px;
min-width:0;
}

.jt-wheel-note{
margin-top:16px;
color:#cbd5f5;
font-size:.9rem;
line-height:1.6;
}

.jt-wheel-results{
display:flex;
flex-direction:column;
gap:16px;
}
.jt-wheel-stage{
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-height:440px;
border-radius:20px;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.07), transparent 40%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.1);
overflow:hidden;
padding:24px;
}

.jt-wheel-arrow{
position:absolute;
top:12px;
left:50%;
transform:translateX(-50%);
z-index:5;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.38));
pointer-events:none;
}

/* 1. Classic */
.jt-wheel-arrow.classic{
width:0;
height:0;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-top:30px solid #f8fafc;
}
.jt-wheel-arrow.classic::after{
content:"";
position:absolute;
left:-11px;
top:-29px;
width:0;
height:0;
border-left:11px solid transparent;
border-right:11px solid transparent;
border-top:22px solid rgba(255,255,255,.45);
filter:blur(.2px);
}

/* 2. Gem */
.jt-wheel-arrow.gem{
width:30px;
height:38px;
background:linear-gradient(180deg,#ffffff 0%, #dbeafe 45%, #93c5fd 100%);
clip-path:polygon(50% 0%, 100% 38%, 76% 100%, 24% 100%, 0% 38%);
border-radius:2px;
}
.jt-wheel-arrow.gem::before{
content:"";
position:absolute;
inset:4px 8px 10px 8px;
background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.18));
clip-path:polygon(50% 0%, 100% 40%, 72% 100%, 28% 100%, 0% 40%);
opacity:.85;
}

/* 3. Pin */
.jt-wheel-arrow.pin{
width:28px;
height:40px;
background:linear-gradient(180deg,#ffffff 0%, #c7d2fe 55%, #7dd3fc 100%);
clip-path:polygon(50% 100%, 84% 48%, 84% 18%, 16% 18%, 16% 48%);
border-radius:16px 16px 14px 14px / 18px 18px 10px 10px;
}
.jt-wheel-arrow.pin::before{
content:"";
position:absolute;
left:50%;
top:6px;
transform:translateX(-50%);
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,255,255,.72);
}

/* 4. Crown */
.jt-wheel-arrow.crown{
width:34px;
height:34px;
background:linear-gradient(180deg,#fde68a 0%, #fbbf24 45%, #b45309 100%);
clip-path:polygon(50% 100%, 100% 30%, 78% 32%, 65% 0%, 50% 24%, 35% 0%, 22% 32%, 0% 30%);
}
.jt-wheel-arrow.crown::before{
content:"";
position:absolute;
left:50%;
top:7px;
transform:translateX(-50%);
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,248,220,.95);
box-shadow:-10px 8px 0 rgba(255,235,160,.85), 10px 8px 0 rgba(255,235,160,.85);
}

/* 5. Needle */
.jt-wheel-arrow.needle{
width:12px;
height:40px;
background:linear-gradient(180deg,#f8fafc 0%, #cbd5e1 55%, #64748b 100%);
clip-path:polygon(50% 100%, 100% 18%, 72% 0%, 28% 0%, 0% 18%);
border-radius:3px;
}
.jt-wheel-arrow.needle::before{
content:"";
position:absolute;
left:50%;
top:-4px;
transform:translateX(-50%);
width:18px;
height:18px;
border-radius:50%;
background:linear-gradient(180deg,#ffffff,#dbeafe);
box-shadow:0 4px 10px rgba(0,0,0,.18);
}

/* 6. Badge */
.jt-wheel-arrow.badge{
width:34px;
height:42px;
}
.jt-wheel-arrow.badge::before{
content:"";
position:absolute;
left:50%;
top:0;
transform:translateX(-50%);
width:28px;
height:28px;
border-radius:50%;
background:linear-gradient(180deg,#ffffff 0%, #e2e8f0 55%, #94a3b8 100%);
box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.jt-wheel-arrow.badge::after{
content:"";
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:18px solid #cbd5e1;
}

.jt-wheel-board{
position:relative;
width:min(100%,390px);
aspect-ratio:1/1;
display:flex;
align-items:center;
justify-content:center;
}
.jt-wheel-rim{
position:absolute;
inset:0;
border-radius:50%;
padding:14px;
background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
box-shadow:
0 18px 40px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.1),
0 0 28px var(--jt-wheel-glow, rgba(56,189,248,.25));
}
.jt-wheel{
position:relative;
width:100%;
height:100%;
border-radius:50%;
overflow:hidden;
transform:rotate(0deg);
transition:transform 5s cubic-bezier(.08,.82,.17,1);
background:#0f172a;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -20px 30px rgba(0,0,0,.2);
}
.jt-wheel::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:
radial-gradient(circle at 28% 22%, rgba(255,255,255,.20), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,.06), transparent 50%);
pointer-events:none;
mix-blend-mode:screen;
}
.jt-wheel-svg{
display:block;
width:100%;
height:100%;
}
.jt-wheel-slice{
stroke:rgba(255,255,255,.18);
stroke-width:.7;
vector-effect:non-scaling-stroke;
}
.jt-wheel-slice-text{
font-weight:800;
text-anchor:middle;
dominant-baseline:middle;
paint-order:stroke;
stroke-linejoin:round;
pointer-events:none;
user-select:none;
}

.jt-wheel-center{
position:absolute;
inset:50%;
width:92px;
height:92px;
transform:translate(-50%,-50%);
border-radius:50%;
background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.16);
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:.85rem;
letter-spacing:.08em;
text-transform:uppercase;
color:#fff;
backdrop-filter:blur(10px);
z-index:4;
box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.jt-wheel-hero{
background:var(--success-bg);
border:1px solid rgba(125,211,252,.2);
border-radius:18px;
padding:20px;
}
.jt-wheel-hero .label{
color:#cbd5f5;
font-size:.95rem;
margin-bottom:8px;
}
.jt-wheel-hero .amount{
font-size:clamp(1.8rem,3vw,2.4rem);
font-weight:800;
line-height:1.1;
color:#fff;
margin-bottom:10px;
word-break:break-word;
}
.jt-wheel-hero .subtext{
color:#cbd5f5;
font-size:.95rem;
line-height:1.5;
}

.jt-wheel-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.jt-wheel-stat{
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,.05);
}
.jt-wheel-stat .label{
color:#cbd5f5;
font-size:.9rem;
margin-bottom:6px;
}
.jt-wheel-stat .value{
font-size:1rem;
font-weight:800;
color:#fff;
word-break:break-word;
}

.jt-wheel-winners{
border-top:1px solid rgba(255,255,255,.1);
padding-top:18px;
margin-top:6px;
}
.jt-wheel-winners h3{
margin:0 0 12px;
font-size:1rem;
color:#fff;
}
.jt-wheel-winner-list{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-wheel-winner-pill{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.88rem;
font-weight:700;
color:#e2e8f0;
}

.jt-wheel-sections{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--accent-soft:rgba(56,189,248,.16);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1100px;
margin:24px auto 0;
}
.jt-wheel-sections *{
box-sizing:border-box;
}
.jt-wheel-block{
margin-top:24px;
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-wheel-block:first-child{
margin-top:0;
}
.jt-wheel-block h2{
margin:0 0 12px;
font-size:clamp(1.45rem,2.3vw,2rem);
line-height:1.15;
color:#ffffff;
}
.jt-wheel-block p{
margin:0 0 14px;
color:#dbeafe;
font-size:1rem;
line-height:1.75;
}
.jt-wheel-block p:last-child{
margin-bottom:0;
}

.jt-wheel-section-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:16px 0 20px;
}
.jt-wheel-section-chip{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
color:#e0f2fe;
font-size:.92rem;
font-weight:600;
}

.jt-wheel-back-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:46px;
padding:0 16px;
border-radius:14px;
text-decoration:none;
font-size:.96rem;
font-weight:700;
color:#ffffff;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
}
.jt-wheel-back-link:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-wheel-subgrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-wheel-mini-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:16px;
}
.jt-wheel-mini-card h3{
margin:0 0 8px;
font-size:1rem;
color:#ffffff;
}
.jt-wheel-mini-card p{
margin:0;
font-size:.95rem;
line-height:1.65;
color:#cfe3ff;
}

.jt-wheel-example-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-wheel-example-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:18px;
}
.jt-wheel-example-label{
display:inline-flex;
margin-bottom:12px;
padding:6px 10px;
border-radius:999px;
background:var(--accent-soft);
border:1px solid rgba(56,189,248,.22);
color:#e0f2fe;
font-size:.82rem;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
}
.jt-wheel-example-card h3{
margin:0 0 12px;
font-size:1.05rem;
color:#ffffff;
}
.jt-wheel-example-row{
display:flex;
justify-content:space-between;
gap:12px;
padding:8px 0;
border-bottom:1px dashed rgba(255,255,255,.1);
font-size:.95rem;
color:#dbeafe;
}
.jt-wheel-example-row strong{
color:#ffffff;
text-align:right;
word-break:break-word;
}
.jt-wheel-example-row:last-child{
border-bottom:0;
}

.jt-wheel-preview-tags{
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.jt-wheel-preview-tag{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.86rem;
font-weight:700;
color:#e2e8f0;
}

.jt-wheel-faq-list{
display:flex;
flex-direction:column;
gap:12px;
margin-top:18px;
}
.jt-wheel-faq-item{
border-radius:18px;
overflow:hidden;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}
.jt-wheel-faq-question{
width:100%;
border:0;
outline:0;
background:transparent;
color:#ffffff;
text-align:left;
padding:18px 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.jt-wheel-faq-question span:last-child{
font-size:1.3rem;
line-height:1;
color:#7dd3fc;
transition:transform .25s ease;
}
.jt-wheel-faq-item.open .jt-wheel-faq-question span:last-child{
transform:rotate(45deg);
}
.jt-wheel-faq-answer{
display:none;
padding:0 18px 18px;
color:#dbeafe;
font-size:.96rem;
line-height:1.75;
}
.jt-wheel-faq-item.open .jt-wheel-faq-answer{
display:block;
}

.jt-wheel.winner-flash{
animation:jtWheelWinnerFlash .75s ease;
}
.jt-wheel-center.win-pulse{
animation:jtWheelCenterPulse .7s ease;
}

.jt-wheel-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:flex-start;
}

.jt-wheel-chip{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-size:.9rem;
font-weight:700;
cursor:pointer;
transition:all .2s ease;
line-height:1.2;
white-space:nowrap;
}

.jt-wheel-stage-actions{
display:flex;
justify-content:center;
margin-top:4px;
}

.jt-wheel-stage-spin-btn{
width:100%;
max-width:260px;
min-width:0;
}

@keyframes jtWheelWinnerFlash{
0%{filter:brightness(1);}
35%{filter:brightness(1.18);}
100%{filter:brightness(1);}
}
@keyframes jtWheelCenterPulse{
0%{transform:translate(-50%,-50%) scale(1);}
40%{transform:translate(-50%,-50%) scale(1.08);}
100%{transform:translate(-50%,-50%) scale(1);}
}

@media (max-width:860px){
.jt-wheel-calculator,
.jt-wheel-stats,
.jt-wheel-subgrid,
.jt-wheel-example-grid{
grid-template-columns:1fr;
}
.jt-wheel-stage{
min-height:400px;
}
}
@media (max-width:640px){
.jt-wheel-card,
.jt-wheel-block{padding:20px;}
.jt-wheel-header h1{font-size:2rem;}
.jt-wheel-board{width:min(100%,320px);}
.jt-wheel-center{width:80px;height:80px;font-size:.78rem;}
}

.jt-gift-wrap{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--accent-soft:rgba(56,189,248,.16);
--success-bg:rgba(255,255,255,.08);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1120px;
margin:0 auto;
}
.jt-gift-wrap *{box-sizing:border-box;}

.jt-gift-header{
text-align:center;
margin-bottom:28px;
}
.jt-gift-brand{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:16px;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 8px 24px rgba(0,0,0,.2);
font-weight:700;
color:#fff;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.jt-gift-brand-dot{
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg,#7dd3fc,#2563eb);
box-shadow:0 0 18px rgba(56,189,248,.7);
}
.jt-gift-header h1{
margin:0 0 10px;
font-size:clamp(2rem,4vw,3rem);
line-height:1.1;
color:#fff;
}
.jt-gift-header p{
margin:0;
color:#cbd5f5;
font-size:1rem;
line-height:1.65;
}

.jt-gift-calculator{
display:grid;
grid-template-columns:1.02fr .98fr;
gap:24px;
align-items:start;
}
.jt-gift-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-gift-card h2{
margin:0 0 18px;
font-size:1.25rem;
color:#fff;
}

.jt-gift-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.jt-gift-field{margin-top:18px;}
.jt-gift-field:first-child{margin-top:0;}

.jt-gift-label{
display:block;
margin-bottom:10px;
font-size:.95rem;
font-weight:700;
color:#e2e8f0;
}

.jt-gift-wrap textarea,
.jt-gift-wrap input[type="text"],
.jt-gift-wrap select{
width:100%;
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:14px;
font-size:1rem;
color:#fff;
outline:none;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
background:rgba(255,255,255,.05);
-webkit-appearance:none;
appearance:none;
font-family:inherit;
line-height:1.5;
}

.jt-gift-wrap textarea{
min-height:120px;
resize:vertical;
}

.jt-gift-wrap textarea:focus,
.jt-gift-wrap input[type="text"]:focus,
.jt-gift-wrap select:focus{
border-color:rgba(125,211,252,.7);
box-shadow:0 0 0 4px rgba(56,189,248,.12);
background:rgba(255,255,255,.07);
}

.jt-gift-wrap input[type="text"]::placeholder,
.jt-gift-wrap textarea::placeholder{
color:#bcd0ea;
opacity:1;
}

.jt-gift-select-wrap{
position:relative;
}

.jt-gift-select-wrap::after{
content:"";
position:absolute;
right:16px;
top:50%;
width:10px;
height:10px;
border-right:2px solid #cfe3ff;
border-bottom:2px solid #cfe3ff;
transform:translateY(-65%) rotate(45deg);
pointer-events:none;
opacity:.95;
}

.jt-gift-wrap select{
padding-right:46px;
cursor:pointer;
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
}

.jt-gift-wrap select::-ms-expand{
display:none;
}

.jt-gift-wrap select option{
background:#132033;
color:#ffffff;
}

.jt-gift-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-gift-chip{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-size:.9rem;
font-weight:700;
cursor:pointer;
transition:all .2s ease;
line-height:1.2;
}
.jt-gift-chip:hover{
background:rgba(255,255,255,.1);
transform:translateY(-1px);
}
.jt-gift-chip.active{
background:rgba(56,189,248,.18);
border-color:rgba(56,189,248,.38);
color:#e0f2fe;
}

.jt-gift-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
margin-top:18px;
}
.jt-gift-toggle-copy{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0;
}
.jt-gift-toggle-copy strong{
font-size:.95rem;
color:#fff;
}
.jt-gift-toggle-copy span{
font-size:.84rem;
color:#cbd5f5;
line-height:1.4;
}
.jt-gift-switch{
position:relative;
display:inline-flex;
width:54px;
height:30px;
flex:0 0 auto;
}
.jt-gift-switch input{
opacity:0;
width:0;
height:0;
position:absolute;
}
.jt-gift-slider{
position:absolute;
inset:0;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
cursor:pointer;
}
.jt-gift-slider::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
top:3px;
border-radius:999px;
background:#fff;
transition:transform .25s ease;
box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.jt-gift-switch input:checked + .jt-gift-slider{
background:rgba(56,189,248,.25);
border-color:rgba(56,189,248,.45);
}
.jt-gift-switch input:checked + .jt-gift-slider::before{
transform:translateX(24px);
}

.jt-gift-actions{
display:flex;
gap:12px;
margin-top:22px;
flex-wrap:wrap;
}

.jt-gift-wrap button{
border:0;
border-radius:14px;
height:50px;
padding:0 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:all .25s ease;
}

@media (max-width: 640px){
  .jt-gift-actions{
    flex-direction:column;
  }

  .jt-gift-primary-btn,
  .jt-gift-secondary-btn{
    width:100%;
    min-width:0;
    min-height:48px;
    flex:1 1 auto;
  }
}

.jt-gift-primary-btn{
flex:1;
min-width:220px;
border:1px solid rgba(255,255,255,.18);
background:rgba(56,189,248,.18);
color:#fff;
box-shadow:
0 10px 28px rgba(0,0,0,.35),
0 0 18px rgba(56,189,248,.25),
0 0 0 1px rgba(255,255,255,.08) inset;
}
.jt-gift-primary-btn:hover{
transform:translateY(-2px);
filter:brightness(1.08);
box-shadow:
0 16px 36px rgba(0,0,0,.45),
0 0 22px rgba(56,189,248,.28),
0 0 0 1px rgba(255,255,255,.1) inset;
}

.jt-gift-secondary-btn{
background:rgba(255,255,255,.08);
color:#fff;
border:1px solid rgba(255,255,255,.12);
}
.jt-gift-secondary-btn:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-gift-note{
margin-top:16px;
color:#cbd5f5;
font-size:.9rem;
line-height:1.6;
}

.jt-gift-results{
display:flex;
flex-direction:column;
gap:16px;
}
.jt-gift-hero{
background:var(--success-bg);
border:1px solid rgba(125,211,252,.2);
border-radius:18px;
padding:20px;
}
.jt-gift-hero .label{
color:#cbd5f5;
font-size:.95rem;
margin-bottom:8px;
}
.jt-gift-hero .amount{
font-size:clamp(1.55rem,3vw,2.2rem);
font-weight:800;
line-height:1.15;
color:#fff;
margin-bottom:10px;
word-break:break-word;
}
.jt-gift-hero .subtext{
color:#cbd5f5;
font-size:.95rem;
line-height:1.5;
}

.jt-gift-results-primary-action{
display:flex;
justify-content:center;
margin-top:2px;
}

.jt-gift-results-primary-btn{
width:100%;
max-width:280px;
min-width:0;
}

.jt-gift-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.jt-gift-stat{
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,.05);
}
.jt-gift-stat .label{
color:#cbd5f5;
font-size:.9rem;
margin-bottom:6px;
}
.jt-gift-stat .value{
font-size:1rem;
font-weight:800;
color:#fff;
word-break:break-word;
}

.jt-gift-ideas{
display:grid;
gap:14px;
}
.jt-gift-empty{
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:22px;
background:rgba(255,255,255,.05);
color:#dbeafe;
line-height:1.7;
}
.jt-gift-idea-card{
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
padding:18px;
background:rgba(255,255,255,.05);
}
.jt-gift-idea-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.jt-gift-idea-title{
font-size:1.02rem;
font-weight:800;
color:#fff;
line-height:1.35;
}
.jt-gift-idea-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(56,189,248,.14);
border:1px solid rgba(56,189,248,.25);
font-size:.78rem;
font-weight:800;
color:#e0f2fe;
text-transform:uppercase;
letter-spacing:.03em;
white-space:nowrap;
}
.jt-gift-idea-desc{
color:#dbeafe;
font-size:.95rem;
line-height:1.7;
margin-bottom:12px;
}
.jt-gift-idea-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.jt-gift-idea-tag{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.82rem;
font-weight:700;
color:#e2e8f0;
}

.jt-gift-history{
border-top:1px solid rgba(255,255,255,.1);
padding-top:18px;
margin-top:6px;
}
.jt-gift-history h3{
margin:0 0 12px;
font-size:1rem;
color:#fff;
}
.jt-gift-history-list{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-gift-history-pill{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.88rem;
font-weight:700;
color:#e2e8f0;
}

.jt-gift-sections{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--accent-soft:rgba(56,189,248,.16);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1100px;
margin:24px auto 0;
}
.jt-gift-sections *{box-sizing:border-box;}

.jt-gift-block{
margin-top:24px;
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-gift-block:first-child{margin-top:0;}
.jt-gift-block h2{
margin:0 0 12px;
font-size:clamp(1.45rem,2.3vw,2rem);
line-height:1.15;
color:#ffffff;
}
.jt-gift-block p{
margin:0 0 14px;
color:#dbeafe;
font-size:1rem;
line-height:1.75;
}
.jt-gift-block p:last-child{margin-bottom:0;}

.jt-gift-section-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:16px 0 20px;
}
.jt-gift-section-chip{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
color:#e0f2fe;
font-size:.92rem;
font-weight:600;
}

.jt-gift-back-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:46px;
padding:0 16px;
border-radius:14px;
text-decoration:none;
font-size:.96rem;
font-weight:700;
color:#ffffff;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
}
.jt-gift-back-link:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-gift-subgrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-gift-mini-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:16px;
}
.jt-gift-mini-card h3{
margin:0 0 8px;
font-size:1rem;
color:#ffffff;
}
.jt-gift-mini-card p{
margin:0;
font-size:.95rem;
line-height:1.65;
color:#cfe3ff;
}

.jt-gift-example-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-gift-example-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:18px;
}
.jt-gift-example-label{
display:inline-flex;
margin-bottom:12px;
padding:6px 10px;
border-radius:999px;
background:var(--accent-soft);
border:1px solid rgba(56,189,248,.22);
color:#e0f2fe;
font-size:.82rem;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
}
.jt-gift-example-card h3{
margin:0 0 12px;
font-size:1.05rem;
color:#ffffff;
}
.jt-gift-example-row{
display:flex;
justify-content:space-between;
gap:12px;
padding:8px 0;
border-bottom:1px dashed rgba(255,255,255,.1);
font-size:.95rem;
color:#dbeafe;
}
.jt-gift-example-row strong{
color:#ffffff;
text-align:right;
word-break:break-word;
}
.jt-gift-example-row:last-child{
border-bottom:0;
}

.jt-gift-preview-tags{
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.jt-gift-preview-tag{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.86rem;
font-weight:700;
color:#e2e8f0;
}

.jt-gift-faq-list{
display:flex;
flex-direction:column;
gap:12px;
margin-top:18px;
}
.jt-gift-faq-item{
border-radius:18px;
overflow:hidden;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}
.jt-gift-faq-question{
width:100%;
border:0;
outline:0;
background:transparent;
color:#ffffff;
text-align:left;
padding:18px 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.jt-gift-faq-question span:last-child{
font-size:1.3rem;
line-height:1;
color:#7dd3fc;
transition:transform .25s ease;
}
.jt-gift-faq-item.open .jt-gift-faq-question span:last-child{
transform:rotate(45deg);
}
.jt-gift-faq-answer{
display:none;
padding:0 18px 18px;
color:#dbeafe;
font-size:.96rem;
line-height:1.75;
}
.jt-gift-faq-item.open .jt-gift-faq-answer{
display:block;
}

@media (max-width:860px){
.jt-gift-calculator,
.jt-gift-stats,
.jt-gift-subgrid,
.jt-gift-example-grid,
.jt-gift-grid{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.jt-gift-card,
.jt-gift-block{padding:20px;}
.jt-gift-header h1{font-size:2rem;}
.jt-gift-primary-btn{min-width:0;}
}

.jt-meme-wrap{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--success-bg:rgba(255,255,255,.08);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1120px;
margin:0 auto;
}
.jt-meme-wrap *{box-sizing:border-box;}

.jt-meme-header{text-align:center;margin-bottom:28px;}
.jt-meme-brand{
display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;padding:8px 14px;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px rgba(0,0,0,.2);
font-weight:700;color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.jt-meme-brand-dot{
width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,#7dd3fc,#2563eb);
box-shadow:0 0 18px rgba(56,189,248,.7);
}
.jt-meme-header h1{
margin:0 0 10px;font-size:clamp(2rem,4vw,3rem);line-height:1.1;color:#fff;
}
.jt-meme-header p{
margin:0;color:#cbd5f5;font-size:1rem;line-height:1.65;
}

.jt-meme-calculator{
display:grid;
grid-template-columns:1.04fr .96fr;
gap:24px;
align-items:start;
}

.jt-meme-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}

.jt-meme-card h2{
margin:0 0 18px;
font-size:1.25rem;
color:#fff;
}

.jt-meme-field{margin-bottom:18px;}
.jt-meme-label{
display:block;
margin-bottom:10px;
font-size:.95rem;
font-weight:700;
color:#e2e8f0;
}

.jt-meme-wrap input[type="text"],
.jt-meme-wrap textarea{
width:100%;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
padding:12px 14px;
font-size:1rem;
color:#fff;
outline:none;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
background:rgba(255,255,255,.05);
-webkit-appearance:none;
appearance:none;
font-family:inherit;
}

.jt-meme-wrap textarea{
min-height:96px;
resize:vertical;
line-height:1.55;
}

.jt-meme-wrap input[type="text"]:focus,
.jt-meme-wrap textarea:focus{
border-color:rgba(125,211,252,.7);
box-shadow:0 0 0 4px rgba(56,189,248,.12);
background:rgba(255,255,255,.07);
}

.jt-meme-upload{
display:flex;
align-items:center;
justify-content:center;
min-height:120px;
padding:18px;
border-radius:18px;
border:1px dashed rgba(255,255,255,.18);
background:rgba(255,255,255,.04);
text-align:center;
color:#dbeafe;
transition:border-color .2s ease, background .2s ease;
}
.jt-meme-upload.dragover{
border-color:rgba(125,211,252,.72);
background:rgba(56,189,248,.08);
}
.jt-meme-upload input{
display:none;
}
.jt-meme-upload-inner{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}
.jt-meme-upload-status{
font-size:.9rem;
color:#cbd5f5;
line-height:1.5;
word-break:break-word;
}
.jt-meme-upload-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 16px;
border-radius:14px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#fff;
font-size:.95rem;
font-weight:700;
cursor:pointer;
transition:all .2s ease;
}
.jt-meme-upload-btn:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-meme-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-meme-chip{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-size:.9rem;
font-weight:700;
cursor:pointer;
transition:all .2s ease;
}
.jt-meme-chip:hover{
background:rgba(255,255,255,.1);
transform:translateY(-1px);
}
.jt-meme-chip.active{
background:rgba(56,189,248,.18);
border-color:rgba(56,189,248,.38);
color:#e0f2fe;
}

.jt-meme-grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.jt-meme-range-row{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}
.jt-meme-wrap input[type="range"]{
flex:1;
accent-color:var(--accent);
}
.jt-meme-range-value{
min-width:68px;
text-align:right;
font-weight:700;
color:#e0f2fe;
}

.jt-meme-actions{
display:flex;
gap:12px;
margin-top:22px;
flex-wrap:wrap;
}

.jt-meme-wrap button{
border:0;
border-radius:14px;
height:50px;
padding:0 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:all .25s ease;
}

.jt-meme-primary-btn{
flex:1;
min-width:180px;
border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.1);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
color:#fff;
box-shadow:0 8px 25px rgba(0,0,0,.35);
}
.jt-meme-primary-btn:hover{
background:rgba(255,255,255,.16);
transform:translateY(-2px);
box-shadow:0 14px 35px rgba(0,0,0,.4);
}
.jt-meme-secondary-btn{
background:rgba(255,255,255,.08);
color:#fff;
border:1px solid rgba(255,255,255,.12);
}
.jt-meme-secondary-btn:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-meme-note{
margin-top:16px;
color:#cbd5f5;
font-size:.9rem;
line-height:1.6;
}

.jt-meme-results{
display:flex;
flex-direction:column;
gap:16px;
}

.jt-meme-preview-wrap{
border-radius:20px;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.07), transparent 40%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.1);
padding:18px;
}

.jt-meme-preview-stage{
position:relative;
width:100%;
min-height:360px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border-radius:16px;
background:rgba(0,0,0,.18);
}

.jt-meme-preview-stage img{
max-width:100%;
max-height:520px;
display:block;
}

.jt-meme-placeholder{
color:#cbd5f5;
font-size:1rem;
text-align:center;
line-height:1.7;
padding:24px;
}

.jt-meme-caption{
position:absolute;
left:50%;
transform:translateX(-50%);
width:min(92%, 720px);
text-align:center;
padding:0 10px;
font-weight:900;
letter-spacing:.01em;
line-height:1.02;
word-break:break-word;
text-transform:uppercase;
pointer-events:none;
z-index:3;
}

.jt-meme-caption.top{top:14px;}
.jt-meme-caption.bottom{bottom:14px;}

.jt-meme-style-classic{
font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.jt-meme-style-clean{
font-family:Inter, ui-sans-serif, system-ui, sans-serif;
font-weight:800;
text-transform:none;
}
.jt-meme-style-poster{
font-family:Inter, ui-sans-serif, system-ui, sans-serif;
font-weight:900;
letter-spacing:.05em;
}
.jt-meme-style-subtitle{
font-family:Inter, ui-sans-serif, system-ui, sans-serif;
font-weight:800;
text-transform:none;
border-radius:10px;
padding:8px 12px;
background:rgba(0,0,0,.45);
display:inline-block;
width:auto;
max-width:92%;
}

.jt-meme-suggestions{
border-top:1px solid rgba(255,255,255,.1);
padding-top:18px;
margin-top:6px;
}
.jt-meme-suggestions h3{
margin:0 0 12px;
font-size:1rem;
color:#fff;
}
.jt-meme-suggestion-list{
display:flex;
flex-direction:column;
gap:10px;
}
.jt-meme-suggestion{
padding:12px 14px;
border-radius:14px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:#e2e8f0;
cursor:pointer;
transition:all .2s ease;
}
.jt-meme-suggestion:hover{
background:rgba(255,255,255,.08);
transform:translateY(-1px);
}
.jt-meme-suggestion strong{
display:block;
margin-bottom:4px;
color:#fff;
}

.jt-meme-meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.jt-meme-stat{
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,.05);
}
.jt-meme-stat .label{
color:#cbd5f5;
font-size:.9rem;
margin-bottom:6px;
}
.jt-meme-stat .value{
font-size:1rem;
font-weight:800;
color:#fff;
word-break:break-word;
}

.jt-meme-sections{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--accent-soft:rgba(56,189,248,.16);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1100px;
margin:24px auto 0;
}
.jt-meme-sections *{
box-sizing:border-box;
}
.jt-meme-block{
margin-top:24px;
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-meme-block:first-child{
margin-top:0;
}
.jt-meme-block h2{
margin:0 0 12px;
font-size:clamp(1.45rem,2.3vw,2rem);
line-height:1.15;
color:#ffffff;
}
.jt-meme-block p{
margin:0 0 14px;
color:#dbeafe;
font-size:1rem;
line-height:1.75;
}
.jt-meme-block p:last-child{
margin-bottom:0;
}

.jt-meme-section-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:16px 0 20px;
}
.jt-meme-section-chip{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
color:#e0f2fe;
font-size:.92rem;
font-weight:600;
}

.jt-meme-back-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:46px;
padding:0 16px;
border-radius:14px;
text-decoration:none;
font-size:.96rem;
font-weight:700;
color:#ffffff;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
}
.jt-meme-back-link:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-meme-subgrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-meme-mini-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:16px;
}
.jt-meme-mini-card h3{
margin:0 0 8px;
font-size:1rem;
color:#ffffff;
}
.jt-meme-mini-card p{
margin:0;
font-size:.95rem;
line-height:1.65;
color:#cfe3ff;
}

.jt-meme-example-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-meme-example-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:18px;
}
.jt-meme-example-label{
display:inline-flex;
margin-bottom:12px;
padding:6px 10px;
border-radius:999px;
background:var(--accent-soft);
border:1px solid rgba(56,189,248,.22);
color:#e0f2fe;
font-size:.82rem;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
}
.jt-meme-example-card h3{
margin:0 0 12px;
font-size:1.05rem;
color:#ffffff;
}
.jt-meme-example-row{
display:flex;
justify-content:space-between;
gap:12px;
padding:8px 0;
border-bottom:1px dashed rgba(255,255,255,.1);
font-size:.95rem;
color:#dbeafe;
}
.jt-meme-example-row strong{
color:#ffffff;
text-align:right;
word-break:break-word;
}
.jt-meme-example-row:last-child{
border-bottom:0;
}

.jt-meme-preview-tags{
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.jt-meme-preview-tag{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.86rem;
font-weight:700;
color:#e2e8f0;
}

.jt-meme-faq-list{
display:flex;
flex-direction:column;
gap:12px;
margin-top:18px;
}
.jt-meme-faq-item{
border-radius:18px;
overflow:hidden;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}
.jt-meme-faq-question{
width:100%;
border:0;
outline:0;
background:transparent;
color:#ffffff;
text-align:left;
padding:18px 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.jt-meme-faq-question span:last-child{
font-size:1.3rem;
line-height:1;
color:#7dd3fc;
transition:transform .25s ease;
}
.jt-meme-faq-item.open .jt-meme-faq-question span:last-child{
transform:rotate(45deg);
}
.jt-meme-faq-answer{
display:none;
padding:0 18px 18px;
color:#dbeafe;
font-size:.96rem;
line-height:1.75;
}
.jt-meme-faq-item.open .jt-meme-faq-answer{
display:block;
}

@media (max-width:860px){
.jt-meme-calculator,
.jt-meme-grid-2,
.jt-meme-meta,
.jt-meme-subgrid,
.jt-meme-example-grid{
grid-template-columns:1fr;
}
}
@media (max-width:640px){
.jt-meme-card,
.jt-meme-block{padding:20px;}
.jt-meme-header h1{font-size:2rem;}
.jt-meme-preview-stage{min-height:280px;}
}

.jt-gift-wrap{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--accent-soft:rgba(56,189,248,.16);
--success-bg:rgba(255,255,255,.08);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1120px;
margin:0 auto;
}
.jt-gift-wrap *{box-sizing:border-box;}

.jt-gift-header{
text-align:center;
margin-bottom:28px;
}
.jt-gift-brand{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:16px;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 8px 24px rgba(0,0,0,.2);
font-weight:700;
color:#fff;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.jt-gift-brand-dot{
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg,#7dd3fc,#2563eb);
box-shadow:0 0 18px rgba(56,189,248,.7);
}
.jt-gift-header h1{
margin:0 0 10px;
font-size:clamp(2rem,4vw,3rem);
line-height:1.1;
color:#fff;
}
.jt-gift-header p{
margin:0;
color:#cbd5f5;
font-size:1rem;
line-height:1.65;
}

.jt-gift-calculator{
display:grid;
grid-template-columns:1.02fr .98fr;
gap:24px;
align-items:start;
}
.jt-gift-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-gift-card h2{
margin:0 0 18px;
font-size:1.25rem;
color:#fff;
}

.jt-gift-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.jt-gift-field{margin-top:18px;}
.jt-gift-field:first-child{margin-top:0;}

.jt-gift-label{
display:block;
margin-bottom:10px;
font-size:.95rem;
font-weight:700;
color:#e2e8f0;
}

.jt-gift-wrap textarea,
.jt-gift-wrap input[type="text"],
.jt-gift-wrap select{
width:100%;
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:14px;
font-size:1rem;
color:#fff;
outline:none;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
background:rgba(255,255,255,.05);
-webkit-appearance:none;
appearance:none;
font-family:inherit;
line-height:1.5;
}

.jt-gift-wrap textarea{
min-height:120px;
resize:vertical;
}

.jt-gift-wrap textarea:focus,
.jt-gift-wrap input[type="text"]:focus,
.jt-gift-wrap select:focus{
border-color:rgba(125,211,252,.7);
box-shadow:0 0 0 4px rgba(56,189,248,.12);
background:rgba(255,255,255,.07);
}

.jt-gift-wrap input[type="text"]::placeholder,
.jt-gift-wrap textarea::placeholder{
color:#bcd0ea;
opacity:1;
}

.jt-gift-select-wrap{
position:relative;
}

.jt-gift-select-wrap::after{
content:"";
position:absolute;
right:16px;
top:50%;
width:10px;
height:10px;
border-right:2px solid #cfe3ff;
border-bottom:2px solid #cfe3ff;
transform:translateY(-65%) rotate(45deg);
pointer-events:none;
opacity:.95;
}

.jt-gift-wrap select{
padding-right:46px;
cursor:pointer;
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
}

.jt-gift-wrap select::-ms-expand{
display:none;
}

.jt-gift-wrap select option{
background:#132033;
color:#ffffff;
}

.jt-gift-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-gift-chip{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-size:.9rem;
font-weight:700;
cursor:pointer;
transition:all .2s ease;
line-height:1.2;
}
.jt-gift-chip:hover{
background:rgba(255,255,255,.1);
transform:translateY(-1px);
}
.jt-gift-chip.active{
background:rgba(56,189,248,.18);
border-color:rgba(56,189,248,.38);
color:#e0f2fe;
}

.jt-gift-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
margin-top:18px;
}
.jt-gift-toggle-copy{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0;
}
.jt-gift-toggle-copy strong{
font-size:.95rem;
color:#fff;
}
.jt-gift-toggle-copy span{
font-size:.84rem;
color:#cbd5f5;
line-height:1.4;
}
.jt-gift-switch{
position:relative;
display:inline-flex;
width:54px;
height:30px;
flex:0 0 auto;
}
.jt-gift-switch input{
opacity:0;
width:0;
height:0;
position:absolute;
}
.jt-gift-slider{
position:absolute;
inset:0;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
cursor:pointer;
}
.jt-gift-slider::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
top:3px;
border-radius:999px;
background:#fff;
transition:transform .25s ease;
box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.jt-gift-switch input:checked + .jt-gift-slider{
background:rgba(56,189,248,.25);
border-color:rgba(56,189,248,.45);
}
.jt-gift-switch input:checked + .jt-gift-slider::before{
transform:translateX(24px);
}

.jt-gift-actions{
display:flex;
gap:12px;
margin-top:22px;
flex-wrap:wrap;
}

.jt-gift-wrap button{
border:0;
border-radius:14px;
height:50px;
padding:0 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:all .25s ease;
}

.jt-gift-primary-btn{
flex:1;
min-width:220px;
border:1px solid rgba(255,255,255,.18);
background:rgba(56,189,248,.18);
color:#fff;
box-shadow:
0 10px 28px rgba(0,0,0,.35),
0 0 18px rgba(56,189,248,.25),
0 0 0 1px rgba(255,255,255,.08) inset;
}
.jt-gift-primary-btn:hover{
transform:translateY(-2px);
filter:brightness(1.08);
box-shadow:
0 16px 36px rgba(0,0,0,.45),
0 0 22px rgba(56,189,248,.28),
0 0 0 1px rgba(255,255,255,.1) inset;
}

.jt-gift-secondary-btn{
background:rgba(255,255,255,.08);
color:#fff;
border:1px solid rgba(255,255,255,.12);
}
.jt-gift-secondary-btn:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-gift-note{
margin-top:16px;
color:#cbd5f5;
font-size:.9rem;
line-height:1.6;
}

.jt-gift-results{
display:flex;
flex-direction:column;
gap:16px;
}
.jt-gift-hero{
background:var(--success-bg);
border:1px solid rgba(125,211,252,.2);
border-radius:18px;
padding:20px;
}
.jt-gift-hero .label{
color:#cbd5f5;
font-size:.95rem;
margin-bottom:8px;
}
.jt-gift-hero .amount{
font-size:clamp(1.55rem,3vw,2.2rem);
font-weight:800;
line-height:1.15;
color:#fff;
margin-bottom:10px;
word-break:break-word;
}
.jt-gift-hero .subtext{
color:#cbd5f5;
font-size:.95rem;
line-height:1.5;
}

.jt-gift-results-primary-action{
display:flex;
justify-content:center;
margin-top:2px;
}

.jt-gift-results-primary-btn{
width:100%;
max-width:280px;
min-width:0;
}

.jt-gift-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.jt-gift-stat{
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,.05);
}
.jt-gift-stat .label{
color:#cbd5f5;
font-size:.9rem;
margin-bottom:6px;
}
.jt-gift-stat .value{
font-size:1rem;
font-weight:800;
color:#fff;
word-break:break-word;
}

.jt-gift-ideas{
display:grid;
gap:14px;
}
.jt-gift-empty{
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:22px;
background:rgba(255,255,255,.05);
color:#dbeafe;
line-height:1.7;
}
.jt-gift-idea-card{
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
padding:18px;
background:rgba(255,255,255,.05);
}
.jt-gift-idea-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.jt-gift-idea-title{
font-size:1.02rem;
font-weight:800;
color:#fff;
line-height:1.35;
}
.jt-gift-idea-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:rgba(56,189,248,.14);
border:1px solid rgba(56,189,248,.25);
font-size:.78rem;
font-weight:800;
color:#e0f2fe;
text-transform:uppercase;
letter-spacing:.03em;
white-space:nowrap;
}
.jt-gift-idea-desc{
color:#dbeafe;
font-size:.95rem;
line-height:1.7;
margin-bottom:12px;
}
.jt-gift-idea-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.jt-gift-idea-tag{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.82rem;
font-weight:700;
color:#e2e8f0;
}

.jt-gift-history{
border-top:1px solid rgba(255,255,255,.1);
padding-top:18px;
margin-top:6px;
}
.jt-gift-history h3{
margin:0 0 12px;
font-size:1rem;
color:#fff;
}
.jt-gift-history-list{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-gift-history-pill{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.88rem;
font-weight:700;
color:#e2e8f0;
}

.jt-gift-sections{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--accent-soft:rgba(56,189,248,.16);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1100px;
margin:24px auto 0;
}
.jt-gift-sections *{box-sizing:border-box;}

.jt-gift-block{
margin-top:24px;
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-gift-block:first-child{margin-top:0;}
.jt-gift-block h2{
margin:0 0 12px;
font-size:clamp(1.45rem,2.3vw,2rem);
line-height:1.15;
color:#ffffff;
}
.jt-gift-block p{
margin:0 0 14px;
color:#dbeafe;
font-size:1rem;
line-height:1.75;
}
.jt-gift-block p:last-child{margin-bottom:0;}

.jt-gift-section-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:16px 0 20px;
}
.jt-gift-section-chip{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
color:#e0f2fe;
font-size:.92rem;
font-weight:600;
}

.jt-gift-back-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:46px;
padding:0 16px;
border-radius:14px;
text-decoration:none;
font-size:.96rem;
font-weight:700;
color:#ffffff;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
}
.jt-gift-back-link:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-gift-subgrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-gift-mini-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:16px;
}
.jt-gift-mini-card h3{
margin:0 0 8px;
font-size:1rem;
color:#ffffff;
}
.jt-gift-mini-card p{
margin:0;
font-size:.95rem;
line-height:1.65;
color:#cfe3ff;
}

.jt-gift-example-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-gift-example-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:18px;
}
.jt-gift-example-label{
display:inline-flex;
margin-bottom:12px;
padding:6px 10px;
border-radius:999px;
background:var(--accent-soft);
border:1px solid rgba(56,189,248,.22);
color:#e0f2fe;
font-size:.82rem;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
}
.jt-gift-example-card h3{
margin:0 0 12px;
font-size:1.05rem;
color:#ffffff;
}
.jt-gift-example-row{
display:flex;
justify-content:space-between;
gap:12px;
padding:8px 0;
border-bottom:1px dashed rgba(255,255,255,.1);
font-size:.95rem;
color:#dbeafe;
}
.jt-gift-example-row strong{
color:#ffffff;
text-align:right;
word-break:break-word;
}
.jt-gift-example-row:last-child{
border-bottom:0;
}

.jt-gift-preview-tags{
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.jt-gift-preview-tag{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.86rem;
font-weight:700;
color:#e2e8f0;
}

.jt-gift-faq-list{
display:flex;
flex-direction:column;
gap:12px;
margin-top:18px;
}
.jt-gift-faq-item{
border-radius:18px;
overflow:hidden;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}
.jt-gift-faq-question{
width:100%;
border:0;
outline:0;
background:transparent;
color:#ffffff;
text-align:left;
padding:18px 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.jt-gift-faq-question span:last-child{
font-size:1.3rem;
line-height:1;
color:#7dd3fc;
transition:transform .25s ease;
}
.jt-gift-faq-item.open .jt-gift-faq-question span:last-child{
transform:rotate(45deg);
}
.jt-gift-faq-answer{
display:none;
padding:0 18px 18px;
color:#dbeafe;
font-size:.96rem;
line-height:1.75;
}
.jt-gift-faq-item.open .jt-gift-faq-answer{
display:block;
}

@media (max-width:860px){
.jt-gift-calculator,
.jt-gift-stats,
.jt-gift-subgrid,
.jt-gift-example-grid,
.jt-gift-grid{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.jt-gift-card,
.jt-gift-block{padding:20px;}
.jt-gift-header h1{font-size:2rem;}
.jt-gift-primary-btn{min-width:0;}
}

.jt-qr-wrap{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--accent-soft:rgba(56,189,248,.16);
--success-bg:rgba(255,255,255,.08);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1120px;
margin:0 auto;
}
.jt-qr-wrap *{box-sizing:border-box;}

.jt-qr-header{
text-align:center;
margin-bottom:28px;
}
.jt-qr-brand{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:16px;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 8px 24px rgba(0,0,0,.2);
font-weight:700;
color:#fff;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.jt-qr-brand-dot{
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg,#7dd3fc,#2563eb);
box-shadow:0 0 18px rgba(56,189,248,.7);
}
.jt-qr-header h1{
margin:0 0 10px;
font-size:clamp(2rem,4vw,3rem);
line-height:1.1;
color:#fff;
}
.jt-qr-header p{
margin:0;
color:#cbd5f5;
font-size:1rem;
line-height:1.65;
}

.jt-qr-calculator{
display:grid;
grid-template-columns:1.02fr .98fr;
gap:24px;
align-items:start;
}
.jt-qr-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-qr-card h2{
margin:0 0 18px;
font-size:1.25rem;
color:#fff;
}

.jt-qr-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.jt-qr-field{margin-top:18px;}
.jt-qr-field:first-child{margin-top:0;}

.jt-qr-label{
display:block;
margin-bottom:10px;
font-size:.95rem;
font-weight:700;
color:#e2e8f0;
}
.jt-qr-sub-label{
font-size:.86rem;
margin-bottom:8px;
color:#dbeafe;
}

.jt-qr-wrap textarea,
.jt-qr-wrap input[type="text"],
.jt-qr-wrap select,
.jt-qr-wrap input[type="color"]{
width:100%;
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:14px;
font-size:1rem;
color:#fff;
outline:none;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
background:rgba(255,255,255,.05);
-webkit-appearance:none;
appearance:none;
font-family:inherit;
line-height:1.5;
}
.jt-qr-wrap textarea{
min-height:110px;
resize:vertical;
}
.jt-qr-wrap input[type="color"]{
padding:8px;
height:52px;
cursor:pointer;
}
.jt-qr-wrap textarea:focus,
.jt-qr-wrap input[type="text"]:focus,
.jt-qr-wrap select:focus,
.jt-qr-wrap input[type="color"]:focus{
border-color:rgba(125,211,252,.7);
box-shadow:0 0 0 4px rgba(56,189,248,.12);
background:rgba(255,255,255,.07);
}
.jt-qr-wrap input[type="text"]::placeholder,
.jt-qr-wrap textarea::placeholder{
color:#bcd0ea;
opacity:1;
}

.jt-qr-select-wrap{
position:relative;
}
.jt-qr-select-wrap::after{
content:"";
position:absolute;
right:16px;
top:50%;
width:10px;
height:10px;
border-right:2px solid #cfe3ff;
border-bottom:2px solid #cfe3ff;
transform:translateY(-65%) rotate(45deg);
pointer-events:none;
opacity:.95;
}
.jt-qr-wrap select{
padding-right:46px;
cursor:pointer;
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
}
.jt-qr-wrap select option{
background:#132033;
color:#fff;
}

.jt-qr-file-input{
padding:12px 14px !important;
}

.jt-qr-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-qr-chip{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-size:.9rem;
font-weight:700;
cursor:pointer;
transition:all .2s ease;
line-height:1.2;
}
.jt-qr-chip:hover{
background:rgba(255,255,255,.1);
transform:translateY(-1px);
}
.jt-qr-chip.active{
background:rgba(56,189,248,.18);
border-color:rgba(56,189,248,.38);
color:#e0f2fe;
}

.jt-qr-panels{
margin-top:16px;
}
.jt-qr-panel{
display:none;
}
.jt-qr-panel.active{
display:block;
}

.jt-qr-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
margin-top:18px;
}
.jt-qr-toggle-copy{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0;
}
.jt-qr-toggle-copy strong{
font-size:.95rem;
color:#fff;
}
.jt-qr-toggle-copy span{
font-size:.84rem;
color:#cbd5f5;
line-height:1.4;
}

.jt-qr-switch{
position:relative;
display:inline-flex;
width:54px;
height:30px;
flex:0 0 auto;
}
.jt-qr-switch input{
opacity:0;
width:0;
height:0;
position:absolute;
}
.jt-qr-slider{
position:absolute;
inset:0;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
cursor:pointer;
}
.jt-qr-slider::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
top:3px;
border-radius:999px;
background:#fff;
transition:transform .25s ease;
box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.jt-qr-switch input:checked + .jt-qr-slider{
background:rgba(56,189,248,.25);
border-color:rgba(56,189,248,.45);
}
.jt-qr-switch input:checked + .jt-qr-slider::before{
transform:translateX(24px);
}

.jt-qr-logo-panel{
margin-top:14px;
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}

.jt-qr-actions{
display:flex;
gap:12px;
margin-top:22px;
flex-wrap:wrap;
}

.jt-qr-wrap button{
border:0;
border-radius:14px;
height:50px;
padding:0 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:all .25s ease;
}

.jt-qr-primary-btn{
flex:1;
min-width:180px;
border:1px solid rgba(255,255,255,.18);
background:rgba(56,189,248,.18);
color:#fff;
box-shadow:
0 10px 28px rgba(0,0,0,.35),
0 0 18px rgba(56,189,248,.25),
0 0 0 1px rgba(255,255,255,.08) inset;
}
.jt-qr-primary-btn:hover{
transform:translateY(-2px);
filter:brightness(1.08);
box-shadow:
0 16px 36px rgba(0,0,0,.45),
0 0 22px rgba(56,189,248,.28),
0 0 0 1px rgba(255,255,255,.1) inset;
}

.jt-qr-secondary-btn{
background:rgba(255,255,255,.08);
color:#fff;
border:1px solid rgba(255,255,255,.12);
}
.jt-qr-secondary-btn:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-qr-note{
margin-top:16px;
color:#cbd5f5;
font-size:.9rem;
line-height:1.6;
}

.jt-qr-results{
display:flex;
flex-direction:column;
gap:16px;
}

.jt-qr-stage{
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-height:420px;
border-radius:20px;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.07), transparent 40%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.1);
overflow:hidden;
padding:30px;
}
.jt-qr-glow{
position:absolute;
width:260px;
height:260px;
border-radius:32px;
background:radial-gradient(circle, rgba(56,189,248,.28) 0%, rgba(56,189,248,.15) 36%, rgba(56,189,248,.04) 62%, transparent 78%);
filter:blur(18px);
opacity:.95;
pointer-events:none;
}
.jt-qr-preview-shell{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:min(100%,340px);
aspect-ratio:1/1;
padding:18px;
border-radius:28px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
box-shadow:
0 18px 40px rgba(0,0,0,.36),
0 0 26px rgba(56,189,248,.14);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
z-index:1;
}
#jtQrCanvas{
display:block;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
border-radius:20px;
background:transparent;
}

.jt-qr-stage-actions{
display:flex;
justify-content:center;
margin-top:4px;
}
.jt-qr-stage-btn{
width:100%;
max-width:260px;
min-width:0;
}

.jt-qr-hero{
background:var(--success-bg);
border:1px solid rgba(125,211,252,.2);
border-radius:18px;
padding:20px;
}
.jt-qr-hero .label{
color:#cbd5f5;
font-size:.95rem;
margin-bottom:8px;
}
.jt-qr-hero .amount{
font-size:clamp(1.55rem,3vw,2.2rem);
font-weight:800;
line-height:1.15;
color:#fff;
margin-bottom:10px;
word-break:break-word;
}
.jt-qr-hero .subtext{
color:#cbd5f5;
font-size:.95rem;
line-height:1.5;
}

.jt-qr-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.jt-qr-stat{
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,.05);
}
.jt-qr-stat .label{
color:#cbd5f5;
font-size:.9rem;
margin-bottom:6px;
}
.jt-qr-stat .value{
font-size:1rem;
font-weight:800;
color:#fff;
word-break:break-word;
}

.jt-qr-history{
border-top:1px solid rgba(255,255,255,.1);
padding-top:18px;
margin-top:6px;
}
.jt-qr-history h3{
margin:0 0 12px;
font-size:1rem;
color:#fff;
}
.jt-qr-history-list{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-qr-history-pill{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.88rem;
font-weight:700;
color:#e2e8f0;
}

.jt-qr-sections{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--accent-soft:rgba(56,189,248,.16);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1100px;
margin:24px auto 0;
}
.jt-qr-sections *{box-sizing:border-box;}

.jt-qr-block{
margin-top:24px;
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-qr-block:first-child{margin-top:0;}
.jt-qr-block h2{
margin:0 0 12px;
font-size:clamp(1.45rem,2.3vw,2rem);
line-height:1.15;
color:#ffffff;
}
.jt-qr-block p{
margin:0 0 14px;
color:#dbeafe;
font-size:1rem;
line-height:1.75;
}
.jt-qr-block p:last-child{margin-bottom:0;}

.jt-qr-section-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:16px 0 20px;
}
.jt-qr-section-chip{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
color:#e0f2fe;
font-size:.92rem;
font-weight:600;
}

.jt-qr-back-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:46px;
padding:0 16px;
border-radius:14px;
text-decoration:none;
font-size:.96rem;
font-weight:700;
color:#ffffff;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
}
.jt-qr-back-link:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-qr-subgrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-qr-mini-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:16px;
}
.jt-qr-mini-card h3{
margin:0 0 8px;
font-size:1rem;
color:#ffffff;
}
.jt-qr-mini-card p{
margin:0;
font-size:.95rem;
line-height:1.65;
color:#cfe3ff;
}

.jt-qr-example-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:18px;
}
.jt-qr-example-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
padding:18px;
}
.jt-qr-example-label{
display:inline-flex;
margin-bottom:12px;
padding:6px 10px;
border-radius:999px;
background:var(--accent-soft);
border:1px solid rgba(56,189,248,.22);
color:#e0f2fe;
font-size:.82rem;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
}
.jt-qr-example-card h3{
margin:0 0 12px;
font-size:1.05rem;
color:#ffffff;
}
.jt-qr-example-row{
display:flex;
justify-content:space-between;
gap:12px;
padding:8px 0;
border-bottom:1px dashed rgba(255,255,255,.1);
font-size:.95rem;
color:#dbeafe;
}
.jt-qr-example-row strong{
color:#ffffff;
text-align:right;
word-break:break-word;
}
.jt-qr-example-row:last-child{
border-bottom:0;
}

.jt-qr-preview-tags{
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.jt-qr-preview-tag{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.86rem;
font-weight:700;
color:#e2e8f0;
}

.jt-qr-faq-list{
display:flex;
flex-direction:column;
gap:12px;
margin-top:18px;
}
.jt-qr-faq-item{
border-radius:18px;
overflow:hidden;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}
.jt-qr-faq-question{
width:100%;
border:0;
outline:0;
background:transparent;
color:#ffffff;
text-align:left;
padding:18px 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.jt-qr-faq-question span:last-child{
font-size:1.3rem;
line-height:1;
color:#7dd3fc;
transition:transform .25s ease;
}
.jt-qr-faq-item.open .jt-qr-faq-question span:last-child{
transform:rotate(45deg);
}
.jt-qr-faq-answer{
display:none;
padding:0 18px 18px;
color:#dbeafe;
font-size:.96rem;
line-height:1.75;
}
.jt-qr-faq-item.open .jt-qr-faq-answer{
display:block;
}

@media (max-width:860px){
.jt-qr-calculator,
.jt-qr-stats,
.jt-qr-subgrid,
.jt-qr-example-grid,
.jt-qr-grid{
grid-template-columns:1fr;
}
.jt-qr-stage{
min-height:380px;
}
}

@media (max-width:640px){
.jt-qr-card,
.jt-qr-block{padding:20px;}
.jt-qr-header h1{font-size:2rem;}
.jt-qr-primary-btn{min-width:0;}
.jt-qr-preview-shell{width:min(100%,280px);}
}

@media (max-width: 640px) {
  [class$="-brand"] {
    padding: 5px 11px !important;
    font-size: 12px !important;
    gap: 7px !important;
    border-radius: 999px !important;
  }

  [class$="-brand-dot"] {
    width: 8px !important;
    height: 8px !important;
  }
}

/* Related tools */

.jt-related-tools {
  margin-top: 28px;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.jt-related-tools-title {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.jt-related-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.jt-related-tool {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.jt-related-tool:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}

.jt-related-tool-name {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-weight: 700;
  font-size: 0.96rem;
}

.jt-related-tool-text {
  display: block;
  color: #cbd5f5;
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .jt-related-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* Age calculator button polish */

.jt-age-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.jt-age-primary-btn,
.jt-age-secondary-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  min-height: 50px;
  padding: 0 18px;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.jt-age-primary-btn {
  flex: 1 1 220px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)),
    rgba(255,255,255,0.06);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.jt-age-primary-btn:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08)),
    rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

.jt-age-primary-btn:active {
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.jt-age-secondary-btn {
  flex: 0 0 auto;
  color: #eaf2ff;
  background: rgba(255,255,255,0.05);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.jt-age-secondary-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

.jt-age-secondary-btn:active {
  transform: translateY(0);
}

.jt-age-primary-btn:focus-visible,
.jt-age-secondary-btn:focus-visible {
  outline: none;
  border-color: rgba(125, 211, 252, 0.72);
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.14),
    0 10px 24px rgba(0,0,0,0.24);
}

@media (max-width: 640px) {
  .jt-age-primary-btn,
  .jt-age-secondary-btn {
    width: 100%;
  }
}

/* Age calculator toggle polish */

.jt-age-inline-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.jt-age-inline-toggle-text strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.jt-age-inline-toggle-text span {
  display: block;
  color: #cbd5f5;
  font-size: 0.88rem;
  line-height: 1.45;
}

.jt-age-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
}

.jt-age-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.jt-age-switch-slider {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
}

.jt-age-switch-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.28);
  transition: transform .18s ease;
}

.jt-age-switch input:checked + .jt-age-switch-slider {
  background: rgba(56, 189, 248, 0.42);
  border-color: rgba(125, 211, 252, 0.62);
}

.jt-age-switch input:checked + .jt-age-switch-slider::after {
  transform: translateX(22px);
}

.jt-age-switch input:focus-visible + .jt-age-switch-slider {
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.14),
    inset 0 1px 2px rgba(0,0,0,0.22);
}

.jt-drink-wrap{
--card:rgba(255,255,255,.07);
--text:#f8fafc;
--muted:#cbd5e1;
--border:rgba(255,255,255,.12);
--accent:#38bdf8;
--accent-soft:rgba(56,189,248,.16);
--shadow:0 18px 40px rgba(0,0,0,.35);
--radius:20px;
--success-bg:rgba(255,255,255,.08);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
width:100%;
max-width:1120px;
margin:0 auto;
}
.jt-drink-wrap *{box-sizing:border-box;}

.jt-drink-view{
transition:opacity .35s ease, transform .35s ease;
}
.jt-drink-view[hidden]{display:none!important;}
.jt-drink-view.is-leaving{
opacity:0;
transform:translateY(18px);
}
.jt-drink-view.is-entering{
opacity:0;
transform:translateY(18px);
}
.jt-drink-view.is-active{
opacity:1;
transform:translateY(0);
}

.jt-drink-header{
text-align:center;
margin-bottom:28px;
}
.jt-drink-brand{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:16px;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 8px 24px rgba(0,0,0,.2);
font-weight:700;
color:#fff;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.jt-drink-brand-dot{
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg,#7dd3fc,#2563eb);
box-shadow:0 0 18px rgba(56,189,248,.7);
}
.jt-drink-header h1{
margin:0 0 10px;
font-size:clamp(2rem,4vw,3rem);
line-height:1.1;
color:#fff;
}
.jt-drink-header p{
margin:0;
color:#cbd5f5;
font-size:1rem;
line-height:1.65;
}

.jt-drink-grid{
display:grid;
grid-template-columns:1.02fr .98fr;
gap:24px;
align-items:start;
}
.jt-drink-game-grid{
display:grid;
grid-template-columns:1.08fr .92fr;
gap:24px;
align-items:start;
}
.jt-drink-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:24px;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.jt-drink-card h2{
margin:0 0 18px;
font-size:1.25rem;
color:#fff;
}
.jt-drink-card h3{
margin:0 0 10px;
font-size:1rem;
color:#fff;
}

.jt-drink-label{
display:block;
margin-bottom:10px;
font-size:.95rem;
font-weight:700;
color:#e2e8f0;
}
.jt-drink-field{margin-top:18px;}

.jt-drink-chip-row{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:flex-start;
}
.jt-drink-chip{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-size:.9rem;
font-weight:700;
cursor:pointer;
transition:all .2s ease;
line-height:1.2;
white-space:nowrap;
}
.jt-drink-chip:hover{
background:rgba(255,255,255,.1);
transform:translateY(-1px);
}
.jt-drink-chip.active{
background:rgba(56,189,248,.18);
border-color:rgba(56,189,248,.38);
color:#e0f2fe;
}

.jt-drink-range-row{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}
.jt-drink-wrap input[type="range"]{
flex:1;
accent-color:var(--accent);
}
.jt-drink-range-value{
min-width:90px;
text-align:right;
font-weight:700;
color:#e0f2fe;
}

.jt-drink-toggle-list{
display:grid;
gap:12px;
margin-top:18px;
}
.jt-drink-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
}
.jt-drink-toggle-copy{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0;
}
.jt-drink-toggle-copy strong{
font-size:.95rem;
color:#fff;
}
.jt-drink-toggle-copy span{
font-size:.84rem;
color:#cbd5f5;
line-height:1.4;
}
.jt-drink-switch{
position:relative;
display:inline-flex;
width:54px;
height:30px;
flex:0 0 auto;
}
.jt-drink-switch input{
opacity:0;
width:0;
height:0;
position:absolute;
}
.jt-drink-slider{
position:absolute;
inset:0;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.12);
transition:all .25s ease;
cursor:pointer;
}
.jt-drink-slider::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
top:3px;
border-radius:999px;
background:#fff;
transition:transform .25s ease;
box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.jt-drink-switch input:checked + .jt-drink-slider{
background:rgba(56,189,248,.25);
border-color:rgba(56,189,248,.45);
}
.jt-drink-switch input:checked + .jt-drink-slider::before{
transform:translateX(24px);
}

.jt-drink-actions{
display:flex;
gap:12px;
margin-top:22px;
flex-wrap:wrap;
}
.jt-drink-wrap button{
border:0;
border-radius:14px;
min-height:50px;
padding:0 18px;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:all .25s ease;
font-family:inherit;
}
.jt-drink-primary-btn{
flex:1;
min-width:180px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.1);
color:#fff;
box-shadow:
0 10px 28px rgba(0,0,0,.35),
0 0 18px rgba(56,189,248,.25),
0 0 0 1px rgba(255,255,255,.08) inset;
}
.jt-drink-primary-btn:hover{
transform:translateY(-2px);
filter:brightness(1.12);
box-shadow:
0 16px 36px rgba(0,0,0,.45),
0 0 22px rgba(56,189,248,.28),
0 0 0 1px rgba(255,255,255,.1) inset;
}
.jt-drink-primary-btn:disabled{
opacity:.7;
cursor:not-allowed;
transform:none;
filter:none;
}
.jt-drink-secondary-btn{
background:rgba(255,255,255,.08);
color:#fff;
border:1px solid rgba(255,255,255,.12);
}
.jt-drink-secondary-btn:hover{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
}

.jt-drink-risk-btn{
background:
linear-gradient(180deg, rgba(56,189,248,.30), rgba(37,99,235,.18)),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
border:1px solid rgba(56,189,248,.42);
color:#fff;
box-shadow:
0 12px 28px rgba(0,0,0,.35),
0 0 18px rgba(56,189,248,.28),
0 0 36px rgba(37,99,235,.16);
}
.jt-drink-risk-btn:hover{
transform:translateY(-2px);
filter:brightness(1.08);
box-shadow:
0 16px 34px rgba(0,0,0,.4),
0 0 24px rgba(56,189,248,.34),
0 0 48px rgba(37,99,235,.22);
}

.jt-drink-summary-hero{
background:var(--success-bg);
border:1px solid rgba(125,211,252,.2);
border-radius:18px;
padding:20px;
}
.jt-drink-summary-hero .label{
color:#cbd5f5;
font-size:.95rem;
margin-bottom:8px;
}
.jt-drink-summary-hero .amount{
font-size:clamp(1.8rem,3vw,2.4rem);
font-weight:800;
line-height:1.1;
color:#fff;
margin-bottom:10px;
word-break:break-word;
}
.jt-drink-summary-hero .subtext{
color:#cbd5f5;
font-size:.95rem;
line-height:1.5;
}

.jt-drink-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-top:16px;
}
.jt-drink-stat{
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px;
background:rgba(255,255,255,.05);
}
.jt-drink-stat .label{
color:#cbd5f5;
font-size:.9rem;
margin-bottom:6px;
}
.jt-drink-stat .value{
font-size:1rem;
font-weight:800;
color:#fff;
word-break:break-word;
}

.jt-drink-chip-list{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:16px;
}
.jt-drink-chip-pill{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
color:#e0f2fe;
font-size:.88rem;
font-weight:700;
}
.jt-drink-chip-pill.is-off{
opacity:.45;
}

.jt-drink-game-top{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:22px;
}
.jt-drink-top-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.92rem;
font-weight:700;
color:#fff;
}
.jt-drink-top-pill span{
color:#7dd3fc;
}

.jt-drink-stage{
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-height:440px;
border-radius:20px;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.07), transparent 40%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.1);
overflow:hidden;
padding:24px;
box-shadow:
0 0 0 1px rgba(125,211,252,.08) inset,
0 0 28px rgba(56,189,248,.10),
0 18px 40px rgba(0,0,0,.35);
}
.jt-drink-deck{
perspective:1200px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:360px;
}
.jt-drink-card-shell{
position:relative;
width:min(100%,540px);
min-height:320px;
border-radius:24px;
padding:26px;
background:
radial-gradient(circle at 20% 16%, rgba(255,255,255,.16), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
border:1px solid rgba(125,211,252,.24);
box-shadow:
0 18px 40px rgba(0,0,0,.35),
0 0 30px rgba(56,189,248,.16),
0 0 60px rgba(37,99,235,.10),
0 0 0 1px rgba(255,255,255,.06) inset;
transform-style:preserve-3d;
backface-visibility:hidden;
overflow:hidden;
}
.jt-drink-card-shell::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 18% 14%, rgba(125,211,252,.22), transparent 24%),
radial-gradient(circle at 80% 18%, rgba(37,99,235,.12), transparent 20%),
linear-gradient(180deg, rgba(255,255,255,.04), transparent 55%);
pointer-events:none;
}
.jt-drink-card-shell::after{
content:"";
position:absolute;
inset:-1px;
border-radius:24px;
pointer-events:none;
box-shadow:
0 0 0 1px rgba(125,211,252,.10) inset,
0 0 18px rgba(56,189,248,.16) inset;
}

.jt-drink-deck.is-drawing .jt-drink-card-shell{
animation:jtDrinkCardReveal .7s cubic-bezier(.2,.8,.2,1), jtDrinkCardGlow .95s ease;
}
@keyframes jtDrinkCardReveal{
0%{opacity:.15;transform:rotateY(-85deg) scale(.94) translateY(18px);}
55%{opacity:1;transform:rotateY(8deg) scale(1.02) translateY(0);}
100%{opacity:1;transform:rotateY(0deg) scale(1) translateY(0);}
}
@keyframes jtDrinkCardGlow{
0%{
box-shadow:
0 18px 40px rgba(0,0,0,.35),
0 0 10px rgba(56,189,248,.10),
0 0 24px rgba(37,99,235,.06),
0 0 0 1px rgba(255,255,255,.06) inset;
}
45%{
box-shadow:
0 18px 40px rgba(0,0,0,.35),
0 0 34px rgba(56,189,248,.24),
0 0 70px rgba(37,99,235,.16),
0 0 0 1px rgba(255,255,255,.08) inset;
}
100%{
box-shadow:
0 18px 40px rgba(0,0,0,.35),
0 0 30px rgba(56,189,248,.16),
0 0 60px rgba(37,99,235,.10),
0 0 0 1px rgba(255,255,255,.06) inset;
}
}

.jt-drink-card-badge{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
font-size:.85rem;
font-weight:800;
letter-spacing:.03em;
text-transform:capitalize;
box-shadow:0 0 18px rgba(56,189,248,.08);
}
.jt-drink-card-text{
position:relative;
z-index:2;
margin-top:18px;
font-size:clamp(1.8rem,3vw,2.5rem);
line-height:1.18;
font-weight:800;
letter-spacing:-.03em;
color:#fff;
text-shadow:0 0 18px rgba(56,189,248,.06);
}
.jt-drink-card-meta{
position:relative;
z-index:2;
margin-top:16px;
color:#dbeafe;
font-size:.98rem;
line-height:1.7;
}
.jt-drink-card-submeta{
position:relative;
z-index:2;
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:18px;
}
.jt-drink-mini-pill{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(125,211,252,.16);
font-size:.84rem;
font-weight:700;
color:#dbeafe;
box-shadow:0 0 14px rgba(56,189,248,.08);
}

.jt-drink-effects-block + .jt-drink-effects-block{
margin-top:18px;
}
.jt-drink-pill-list{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.jt-drink-pill{
display:inline-flex;
align-items:center;
padding:9px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
font-size:.88rem;
font-weight:700;
color:#e2e8f0;
}
.jt-drink-pill-empty{
color:#94a3b8;
font-size:.92rem;
}

.jt-drink-back-row{
display:flex;
justify-content:flex-start;
margin-bottom:18px;
}

.jt-cat-instant{background:rgba(34,211,238,.18);border-color:rgba(34,211,238,.35);}
.jt-cat-social{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.35);}
.jt-cat-challenge{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.35);}
.jt-cat-drawing{background:rgba(244,114,182,.18);border-color:rgba(244,114,182,.35);}
.jt-cat-rule{background:rgba(251,146,60,.18);border-color:rgba(251,146,60,.35);}
.jt-cat-mate{background:rgba(96,165,250,.18);border-color:rgba(96,165,250,.35);}
.jt-cat-risk{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.35);}
.jt-cat-environment{background:rgba(74,222,128,.18);border-color:rgba(74,222,128,.35);}
.jt-cat-balance{background:rgba(148,163,184,.18);border-color:rgba(148,163,184,.35);}
.jt-cat-chaos{background:rgba(217,70,239,.18);border-color:rgba(217,70,239,.35);}
.jt-cat-kingscup{background:rgba(250,204,21,.18);border-color:rgba(250,204,21,.35);}

.jt-drink-empty-note{
margin-top:14px;
padding:14px 16px;
border-radius:16px;
border:1px solid rgba(248,113,113,.2);
background:rgba(248,113,113,.08);
color:#fecaca;
font-size:.92rem;
line-height:1.5;
}

/* drawing timer */
.jt-draw-timer-panel{
margin-top:18px;
padding:18px;
border-radius:22px;
border:1px solid rgba(56,189,248,.24);
background:
radial-gradient(circle at 15% 10%, rgba(56,189,248,.14), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
box-shadow:
0 0 24px rgba(56,189,248,.12),
0 18px 36px rgba(0,0,0,.28);
}
.jt-draw-timer-panel[hidden]{display:none!important;}
.jt-draw-timer-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
}
.jt-draw-timer-badge{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(56,189,248,.16);
border:1px solid rgba(56,189,248,.28);
font-size:.84rem;
font-weight:800;
color:#e0f2fe;
text-transform:uppercase;
letter-spacing:.05em;
}
.jt-draw-timer-clock{
font-size:clamp(2rem,4vw,3rem);
font-weight:900;
line-height:1;
color:#fff;
text-shadow:0 0 18px rgba(56,189,248,.18);
}
.jt-draw-timer-text{
margin-top:10px;
color:#dbeafe;
font-size:.96rem;
line-height:1.6;
}
.jt-draw-timer-actions{
display:flex;
gap:12px;
margin-top:16px;
flex-wrap:wrap;
}

/* Risk panel */
.jt-risk-panel{
margin-top:18px;
border-radius:22px;
overflow:hidden;
border:1px solid rgba(255,255,255,.1);
background:
radial-gradient(circle at 15% 10%, rgba(77,143,255,.18), transparent 28%),
radial-gradient(circle at 86% 18%, rgba(129,170,255,.10), transparent 24%),
linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
linear-gradient(180deg, rgba(10,13,22,.92), rgba(7,10,18,.94));
box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.jt-risk-panel[hidden]{display:none!important;}
.jt-risk-inner{
padding:18px;
}
.jt-risk-head{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
margin-bottom:14px;
}
.jt-risk-pillbox{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(135deg, rgba(77,143,255,.24), rgba(255,255,255,.06));
box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
color:#fff;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
font-weight:800;
white-space:nowrap;
}
.jt-risk-notation{
font-size:26px;
line-height:1;
letter-spacing:-.03em;
font-weight:900;
}
.jt-risk-total-orb{
min-width:140px;
text-align:center;
padding:12px 14px;
border-radius:20px;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 34%),
linear-gradient(180deg, rgba(77,143,255,.18), rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.jt-risk-total-label{
display:block;
color:#d7dffa;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
}
.jt-risk-total-value{
display:block;
margin-top:5px;
font-size:32px;
font-weight:900;
letter-spacing:-.04em;
}
.jt-risk-stage{
min-height:260px;
height:260px;
border-radius:20px;
border:1px solid rgba(255,255,255,.09);
background:
radial-gradient(circle at 18% 10%, rgba(77,143,255,.10), transparent 24%),
radial-gradient(circle at 82% 22%, rgba(135,170,255,.06), transparent 20%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
linear-gradient(180deg, rgba(8,13,25,.68), rgba(4,8,18,.90));
position:relative;
overflow:hidden;
}
.jt-risk-stage canvas{
width:100%;
height:260px;
display:block;
}
.jt-risk-stage-empty{
position:absolute;
inset:0;
display:grid;
place-items:center;
text-align:center;
color:#9aa7c7;
pointer-events:none;
transition:opacity .2s ease;
padding:20px;
}
.jt-risk-stage-empty.is-hidden{opacity:0;}
.jt-risk-stage-empty-icon{
width:48px;
height:48px;
display:grid;
place-items:center;
margin:0 auto 10px;
font-size:28px;
border-radius:14px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.jt-risk-stage-legend{
position:absolute;
left:14px;
right:14px;
bottom:12px;
display:flex;
justify-content:center;
pointer-events:none;
z-index:5;
}
.jt-risk-stage-legend-pill{
padding:10px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background:rgba(8,13,25,.68);
backdrop-filter:blur(8px);
color:#e8efff;
font-size:13px;
font-weight:800;
box-shadow:0 10px 26px rgba(0,0,0,.18);
text-align:center;
}
.jt-risk-stage-roll-cta{
margin-top:16px;
display:flex;
gap:10px;
flex-wrap:wrap;
}
.jt-risk-stage-roll-cta .jt-drink-secondary-btn,
.jt-risk-stage-roll-cta .jt-drink-primary-btn{
flex:1;
min-width:120px;
}

.jt-risk-outcome-card{
margin-top:18px;
min-height:120px;
display:grid;
place-items:center;
text-align:center;
padding:14px;
border-radius:18px;
border:1px solid rgba(255,255,255,.09);
background:rgba(255,255,255,.04);
}
.jt-risk-outcome-state{
display:grid;
gap:8px;
justify-items:center;
}
.jt-risk-outcome-kicker{
color:#d6def8;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
}
.jt-risk-outcome-main{
font-size:clamp(28px,4vw,44px);
font-weight:900;
letter-spacing:-.04em;
color:#fff;
line-height:1;
}
.jt-risk-outcome-sub{
color:#9aa7c7;
font-size:14px;
line-height:1.5;
max-width:420px;
}
.jt-risk-outcome-drink .jt-risk-outcome-main{
color:#ffb8bf;
text-shadow:0 0 24px rgba(255,120,136,.12);
}
.jt-risk-outcome-safe .jt-risk-outcome-main{
color:#b9d5ff;
text-shadow:0 0 24px rgba(77,143,255,.14);
}

@media (max-width:860px){
.jt-drink-grid,
.jt-drink-game-grid,
.jt-drink-stats{
grid-template-columns:1fr;
}
.jt-drink-stage{
min-height:400px;
}
}
@media (max-width:640px){
.jt-drink-card{padding:20px;}
.jt-drink-header h1{font-size:2rem;}
.jt-drink-card-shell{min-height:290px;padding:22px;}
.jt-risk-head{flex-direction:column;align-items:flex-start;}
}
/* =========================
   DRINKING GAME
   ========================= */

.jt-drink-wrap,
.jt-drink-wrap * {
  box-sizing: border-box;
}

.jt-drink-wrap {
  --panel: rgba(15, 20, 34, 0.74);
  --text: #eef3ff;
  --muted: #9aa7c7;
  --soft: #7f8eb2;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --radius-xl: 28px;
  --accent: #4d8fff;
  --accent-rgb: 77, 143, 255;
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jt-drink-shell {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 15% 10%, rgba(var(--accent-rgb), 0.18), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(129, 170, 255, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, rgba(10, 13, 22, 0.92), rgba(7, 10, 18, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
}

.jt-drink-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 22%, transparent 76%, rgba(255, 255, 255, 0.04)),
    radial-gradient(circle at 80% 120%, rgba(var(--accent-rgb), 0.10), transparent 25%);
  pointer-events: none;
}

.jt-drink-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.jt-drink-brandline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.jt-drink-brandline img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px;
}

.jt-pillbox {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.24), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  white-space: nowrap;
}

.jt-eyebrow {
  margin: 0 0 6px;
  color: #cfd7f5;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
}

.jt-drink-wrap h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
}

.jt-sub {
  margin: 10px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.jt-drink-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.2fr);
  gap: 18px;
}

.jt-card {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), var(--panel);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jt-card-glow {
  position: absolute;
  inset: auto -20% 65% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.20), transparent 60%);
  pointer-events: none;
}

.jt-card-inner {
  position: relative;
  z-index: 2;
  padding: 20px;
}

.jt-block + .jt-block {
  margin-top: 18px;
}

.jt-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.jt-label,
.jt-mini-label {
  display: block;
  color: #dfe6ff;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.jt-mini-label {
  margin: 0 0 10px;
}

.jt-chip,
.jt-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
  font-family: inherit;
}

.jt-chip:hover,
.jt-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
}

.jt-chip {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  font-weight: 800;
  font-size: 14px;
  width: 100%;
  text-align: center;
}

.jt-chip.active,
.jt-is-active {
  border-color: rgba(var(--accent-rgb), 0.55) !important;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.08)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 14px 28px rgba(var(--accent-rgb), 0.12);
}

.jt-two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.jt-rule-box,
.jt-stat,
.jt-outcome-card,
.jt-turn-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
}

.jt-rule-lines {
  display: grid;
  gap: 10px;
}

.jt-rule-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.jt-rule-line input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.jt-turn-card-value,
.jt-stat-value {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
}

.jt-stat-label {
  display: block;
  color: #d6def8;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.jt-action-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.jt-btn {
  min-height: 50px;
  padding: 13px 16px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  font-weight: 800;
  font-size: 14px;
}

.jt-btn-primary {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow: 0 18px 32px rgba(var(--accent-rgb), 0.14);
}

.jt-btn-ghost {
  opacity: 0.88;
}

.jt-results-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.jt-notation {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #fff;
}

.jt-total-orb {
  min-width: 150px;
  text-align: center;
  padding: 12px 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.jt-total-label {
  display: block;
  color: #d7dffa;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jt-total-value {
  display: block;
  margin-top: 5px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
}

.jt-stage-wrap {
  margin-top: 18px;
}

.jt-stage {
  min-height: 260px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 18% 10%, rgba(var(--accent-rgb), 0.10), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(135, 170, 255, 0.06), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    linear-gradient(180deg, rgba(8, 13, 25, 0.68), rgba(4, 8, 18, 0.90));
  position: relative;
  overflow: hidden;
}

.jt-stage-empty {
  transition: opacity 0.2s ease;
}

.jt-stage-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  font-size: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.jt-stage-roll-cta {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.jt-stage-roll-cta .jt-btn {
  flex: 1;
  min-width: 120px;
}

.jt-outcome-card {
  margin-top: 18px;
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
}

.jt-outcome-state {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.jt-outcome-kicker {
  color: #d6def8;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jt-outcome-main {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}

.jt-outcome-sub {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 420px;
}

.jt-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jt-drink-pill,
.jt-drink-chip-pill,
.jt-drink-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: #f3f7ff;
  font-size: 13px;
  font-weight: 700;
}

.jt-drink-mini-pill {
  min-height: 34px;
  font-size: 12px;
  color: #dfe9ff;
}

.jt-drink-chip-pill.is-off {
  opacity: 0.48;
}

.jt-drink-pill-empty {
  color: var(--soft);
  font-size: 14px;
}

.jt-drink-card-badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 800;
}

.jt-cat-instant,
.jt-cat-social,
.jt-cat-challenge,
.jt-cat-drawing,
.jt-cat-rule,
.jt-cat-mate,
.jt-cat-risk,
.jt-cat-environment,
.jt-cat-balance,
.jt-cat-chaos,
.jt-cat-kingscup {
  box-shadow: 0 0 18px rgba(59,130,246,.16);
  border-color: rgba(59,130,246,.25);
}

.jt-drink-risk-btn {
  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    0 0 18px rgba(59,130,246,.28),
    0 0 36px rgba(76,147,187,.18);
}

.jt-drink-setup,
.jt-drink-game {
  transition: opacity .24s ease, transform .24s ease;
}

.jt-drink-setup.is-leaving,
.jt-drink-game.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}

.jt-drink-setup.is-entering,
.jt-drink-game.is-entering {
  opacity: 0;
  transform: translateY(8px);
}

.jt-drink-setup.is-active,
.jt-drink-game.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   SEO / CONTENT SECTIONS
   ========================= */

.jt-tool-content.calculator-content {
  width: 100%;
  max-width: 1100px;
  margin: 28px auto 0;
}

.section-block {
  margin-top: 28px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(10, 13, 22, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.20);
}

.section-title {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -0.03em;
}

.section-text p {
  margin: 0 0 12px;
  color: var(--muted, #9aa7c7);
  line-height: 1.7;
  font-size: 15px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.info-chip {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.info-chip strong {
  color: #fff;
  font-size: 15px;
}

.info-chip span {
  color: #cbd5f5;
  line-height: 1.65;
  font-size: 14px;
}

.back-top-wrap {
  margin-top: 20px;
}

.back-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  text-decoration: none;
  font-size: .96rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: all .25s ease;
}

.back-top-btn:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.example-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 18px;
}

.example-title {
  margin-bottom: 12px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

.example-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.1);
  font-size: .95rem;
  color: #dbeafe;
}

.example-row span:last-child {
  color: #fff;
  font-weight: 700;
  text-align: right;
}

.example-result {
  margin-top: 14px;
  color: #e0f2fe;
  font-weight: 800;
  font-size: .95rem;
}

.faq-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}

.faq-question {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.faq-icon {
  font-size: 1.3rem;
  line-height: 1;
  color: #7dd3fc;
  transition: transform .25s ease;
}

.faq-answer {
  display: none;
}

.faq-answer-inner {
  padding: 0 18px 18px;
  color: #dbeafe;
  font-size: .96rem;
  line-height: 1.75;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.jt-related-tools {
  margin-top: 28px;
}

.jt-related-tools-title {
  margin: 0 0 14px;
  font-size: 1.2rem;
  color: #fff;
}

.jt-related-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.jt-related-tool {
  display: block;
  padding: 18px;
  border-radius: 18px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.jt-related-tool:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

.jt-related-tool-name {
  display: block;
  color: #fff;
  font-weight: 800;
  margin-bottom: 8px;
}

.jt-related-tool-text {
  display: block;
  color: #cbd5f5;
  line-height: 1.6;
  font-size: 14px;
}

/* =========================
   FAQ fallback if site JS
   does not already handle it
   ========================= */

.faq-question {
  user-select: none;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 980px) {
  .jt-drink-grid,
  .info-grid,
  .examples-grid,
  .jt-related-tools-grid {
    grid-template-columns: 1fr;
  }

  .jt-drink-head {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .jt-drink-shell {
    padding: 18px;
  }

  .jt-card-inner,
  .section-block {
    padding: 16px;
  }

  .jt-two-up,
  .jt-action-row {
    grid-template-columns: 1fr;
  }

  .jt-results-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .jt-total-orb {
    width: 100%;
  }

  .jt-stage {
    min-height: 220px;
  }
}

.jt-drink-card-stage {
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 22px;
}

.jt-drink-live-card {
  width: 100%;
  max-width: 520px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(180deg, rgba(10,13,22,.88), rgba(7,10,18,.94));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 24px 50px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 34px rgba(59,130,246,.16);
  transform-style: preserve-3d;
}

.jt-drink-live-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(59,130,246,.10), transparent 32%, transparent 70%, rgba(118,180,216,.08)),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.08), transparent 18%);
  pointer-events: none;
}

.jt-drink-live-card-top,
.jt-drink-live-card-body,
.jt-drink-live-card-bottom {
  position: relative;
  z-index: 2;
}

.jt-drink-live-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.jt-drink-live-card-body {
  flex: 1;
  display: grid;
  align-items: center;
}

.jt-drink-live-card-text {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  text-align: left;
}

.jt-drink-live-card-meta {
  color: #cbd5f5;
  font-size: 14px;
  line-height: 1.6;
}

.jt-drink-live-card.is-placeholder .jt-drink-live-card-text {
  color: #dbeafe;
}

.jt-drink-live-card.is-drawing {
  animation: jtDrinkCardDraw .62s cubic-bezier(.2,.8,.2,1);
}

@keyframes jtDrinkCardDraw {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateY(-16deg) scale(.94) translateY(18px);
    filter: blur(3px);
  }
  45% {
    opacity: 1;
    transform: perspective(1000px) rotateY(8deg) scale(1.02) translateY(-4px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg) scale(1) translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 720px) {
  .jt-drink-card-stage {
    min-height: 340px;
    padding: 14px;
  }

  .jt-drink-live-card {
    min-height: 280px;
    padding: 18px;
    border-radius: 20px;
  }

  .jt-drink-live-card-text {
    font-size: clamp(22px, 6vw, 28px);
  }
}