:root{
  --tfl-bg0:#070A10;
  --tfl-bg1:#0A111C;
  --tfl-glass:rgba(16,24,40,.58);
  --tfl-glass2:rgba(16,24,40,.38);
  --tfl-stroke:rgba(255,255,255,.10);
  --tfl-text:#EAF2FF;
  --tfl-muted:#A9B3C6;
  --tfl-orange:#FF8A00;
  --tfl-orange2:#FFB14A;
  --tfl-shadow:0 20px 70px rgba(0,0,0,.55);
  --tfl-r16:16px;
  --tfl-r20:20px;
}

.tfl-ie-wrap{padding:18px 10px;}
.tfl-ie-card{
  max-width:1100px;margin:0 auto;
  background:linear-gradient(180deg,var(--tfl-glass),var(--tfl-glass2));
  border:1px solid var(--tfl-stroke);
  border-radius:var(--tfl-r20);
  box-shadow:var(--tfl-shadow);
  color:var(--tfl-text);
  overflow:hidden;
  position:relative;
}
.tfl-ie-card:before{
  content:""; position:absolute; inset:-2px;
  background:radial-gradient(700px 280px at 20% 0%, rgba(255,138,0,.28), transparent 55%),
             radial-gradient(700px 280px at 80% 10%, rgba(76,201,240,.18), transparent 55%);
  pointer-events:none;
}
.tfl-ie-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 10px; position:relative;
}
.tfl-ie-title{display:flex; gap:12px; align-items:center;}
.tfl-ie-logo{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,var(--tfl-orange),#FF4D00);
  display:flex;align-items:center;justify-content:center;
  font-weight:800; letter-spacing:.5px; color:#111;
  box-shadow:0 10px 25px rgba(255,138,0,.25);
}
.tfl-ie-h1{font-size:18px;font-weight:800;line-height:1.1}
.tfl-ie-sub{font-size:12px;color:var(--tfl-muted);margin-top:3px}
.tfl-ie-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--tfl-stroke);
  font-size:12px;color:var(--tfl-muted);
}
.tfl-ie-pill b{color:var(--tfl-text)}
.tfl-ie-body{
  display:grid; grid-template-columns: 360px 1fr;
  gap:14px; padding:12px 18px 18px; position:relative;
}
@media (max-width: 980px){
  .tfl-ie-body{grid-template-columns:1fr}
}
.tfl-ie-left, .tfl-ie-right{min-width:0}
.tfl-ie-box{
  background:rgba(0,0,0,.22);
  border:1px solid var(--tfl-stroke);
  border-radius:var(--tfl-r16);
  padding:12px;
  margin-bottom:12px;
}
.tfl-ie-box-title{
  font-weight:800; font-size:12px; letter-spacing:.2px;
  margin-bottom:10px; color:var(--tfl-text);
  display:flex; align-items:center; justify-content:space-between;
}
.tfl-ie-upload input{display:none}
.tfl-ie-upload-ui{
  display:flex; gap:12px; align-items:center;
  border:1px dashed rgba(255,255,255,.22);
  border-radius:14px;
  padding:14px;
  cursor:pointer;
  background:rgba(255,255,255,.04);
}
.tfl-ie-upload-ui:hover{border-color:rgba(255,138,0,.45)}
.tfl-ie-upload-ic{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,138,0,.14);
  border:1px solid rgba(255,138,0,.25);
}
.tfl-ie-upload-t{font-weight:800;font-size:12px}
.tfl-ie-upload-s{font-size:11px;color:var(--tfl-muted);margin-top:2px}

.tfl-ie-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tfl-ie-label{font-size:12px;font-weight:800;color:var(--tfl-text)}
.tfl-ie-seg{
  display:inline-flex; gap:6px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--tfl-stroke);
  border-radius:999px; padding:6px;
}
.tfl-ie-seg button{
  border:0; background:transparent; color:var(--tfl-muted);
  padding:8px 10px; border-radius:999px;
  font-weight:800; font-size:12px;
  cursor:pointer;
}
.tfl-ie-seg button.is-on{
  background:linear-gradient(135deg,var(--tfl-orange),#FF4D00);
  color:#111;
}
.tfl-ie-slider{margin:10px 0}
.tfl-ie-slider input[type=range]{width:100%}
.tfl-ie-mini{display:flex;justify-content:flex-end;color:var(--tfl-muted);font-size:11px;margin-top:4px}

.tfl-ie-btn{
  width:100%;
  border:0;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,var(--tfl-orange),#FF4D00);
  color:#111;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 14px 30px rgba(255,138,0,.18);
}
.tfl-ie-btn:disabled{opacity:.6;cursor:not-allowed}
.tfl-ie-btn-ic{font-size:16px}

.tfl-ie-note{margin-top:10px;font-size:12px;color:var(--tfl-muted);min-height:18px}

.tfl-ie-preview{
  background:rgba(0,0,0,.22);
  border:1px solid var(--tfl-stroke);
  border-radius:var(--tfl-r16);
  overflow:hidden;
}
.tfl-ie-preview-top{
  padding:12px 12px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.tfl-ie-preview-title{font-weight:900;font-size:12px}
.tfl-ie-preview-meta{font-size:11px;color:var(--tfl-muted);text-align:right}

.tfl-ie-canvas{
  height:520px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
@media (max-width: 980px){ .tfl-ie-canvas{height:420px} }

.tfl-ie-empty{ text-align:center; color:var(--tfl-muted); }
.tfl-ie-empty-ic{font-size:28px;margin-bottom:8px}
.tfl-ie-empty-t{font-weight:800}

.tfl-ie-compare{position:absolute; inset:0; overflow:hidden}
.tfl-ie-compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px}
.tfl-ie-after{position:absolute; inset:0; overflow:hidden; width:50%;}
.tfl-ie-split{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,138,0,.75)}
#tfl_ie_split{
  position:absolute; left:0; right:0; bottom:12px;
  width: calc(100% - 24px);
  margin:0 12px;
}
.tfl-ie-handle{
  position:absolute; top:0; bottom:0;
  width:2px; background:rgba(255,138,0,.75);
  left:50%;
}
.tfl-ie-actions{
  display:flex; gap:10px; padding:12px;
}
.tfl-ie-btn2, .tfl-ie-btn3{
  border-radius:12px; padding:10px 12px; font-weight:900; font-size:12px;
  border:1px solid var(--tfl-stroke);
  background:rgba(255,255,255,.04);
  color:var(--tfl-text);
  text-decoration:none;
  cursor:pointer;
}
.tfl-ie-btn2{background:rgba(255,138,0,.12); border-color:rgba(255,138,0,.25)}
.tfl-ie-btn2:hover{background:rgba(255,138,0,.18)}
.tfl-ie-btn3:hover{background:rgba(255,255,255,.06)}
.is-hide{display:none!important}
