/* m3.css: dimuat paling akhir.
   1) Kolom isian gaya Material 3 (outlined): label di dalam kolom, naik ke garis saat fokus/terisi. Warna tetap tema TeleBuild.
   2) Daftar alur profesional.
   3) Perbaikan lag: animasi hanya transform + opacity, tanpa blur layar penuh, tanpa clip-path. */

/* ======================================================================
   1. KOLOM ISIAN M3 (OUTLINED)
   ====================================================================== */
.fld{--m3-ease:cubic-bezier(.2,0,0,1)}
.act .fld{--sheet:var(--paper,#fff1d6)}
.step .fld,.pfs-card .fld,.bte .fld{--sheet:var(--card,#fff)}

/* label: posisi diam di dalam kolom (transform saja, tidak memicu layout) */
html body .fld.fld>label,html body #login .fld.fld>label{
  position:absolute!important;left:14px!important;top:0!important;margin:0!important;padding:0 5px!important;
  max-width:calc(100% - 28px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:15px!important;line-height:22px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--mute)!important;background:transparent!important;
  transform:translate3d(0,16px,0)!important;transform-origin:0 0;
  transition:transform .2s var(--m3-ease),color .15s linear,background-color 0s .1s!important;
  pointer-events:none;z-index:2;will-change:transform
}
html body .fld.fld:has(>textarea)>label{transform:translate3d(0,17px,0)!important}

/* label: naik ke garis kolom (fokus, terisi, atau pilihan) */
html body .fld.fld:is(:focus-within,.fl,.sel,:has(>input:not(:placeholder-shown)),:has(>textarea:not(:placeholder-shown)),:has(>.csel))>label,
html body #login .fld.fld:is(:focus-within,.fl,.sel,:has(>input:not(:placeholder-shown)),:has(>textarea:not(:placeholder-shown)))>label{
  transform:translate3d(-3px,-9px,0) scale(.8)!important;
  background:var(--sheet,#fff)!important;transition:transform .2s var(--m3-ease),color .15s linear,background-color 0s!important
}
html body .fld.fld:focus-within>label,html body #login .fld.fld:focus-within>label,
html body .fld.fld:has(>.csel.open)>label{color:var(--coral,#ff4458)!important}

/* garis kolom: 1.5px, saat fokus jadi 2px (ring dalam) */
html body .fld.fld.fld.fld.fld.fld>:is(input,textarea){
  border:1.5px solid var(--fb,#111)!important;border-radius:12px!important;box-shadow:none!important;
  transition:border-color .15s linear,box-shadow .15s linear!important
}
html body .fld.fld.fld.fld.fld.fld>:is(input,textarea):focus{
  border-color:var(--coral,#ff4458)!important;box-shadow:inset 0 0 0 .5px var(--coral,#ff4458)!important
}
html body .fld.fld>input:not(.otp){height:54px;padding:0 16px!important;line-height:normal}
html body .fld.fld>textarea{padding:18px 16px 12px!important;line-height:1.5}
html body .bte .fld.fld>input{height:42px;padding:0 10px!important}
html body .bte .fld.fld>label{font-size:13px!important;transform:translate3d(0,10px,0)!important}
html body .bte .fld.fld:is(:focus-within,:has(>input:not(:placeholder-shown)))>label{transform:translate3d(-3px,-9px,0) scale(.85)!important}

/* placeholder: tersembunyi sampai kolom difokus (perilaku M3) */
html body .fld.fld>:is(input,textarea)::placeholder{opacity:0!important;-webkit-text-fill-color:var(--mute)!important;color:var(--mute)!important;transition:opacity .15s linear}
html body .fld.fld>:is(input,textarea):focus::placeholder{opacity:.7!important}

/* kolom pilihan (dropdown kustom) ikut bentuk outlined */
.fld>select{position:absolute;opacity:0;pointer-events:none;height:0}
html body .fld.fld>.csel .cs-t{
  min-height:54px;padding:0 12px 0 16px!important;border:1.5px solid var(--fb,#111)!important;border-radius:12px!important;
  background:var(--card,#fff)!important;box-shadow:none!important;font-size:15px;font-weight:400;
  transition:border-color .15s linear,box-shadow .15s linear
}
html body .fld.fld>.csel.open .cs-t{border-color:var(--coral,#ff4458)!important;box-shadow:inset 0 0 0 .5px var(--coral,#ff4458)!important}
html body .fld.fld>.csel .cs-c{width:24px;height:24px;border:0!important;background:transparent!important;border-radius:50%;color:var(--mute)}
html body .fld.fld>.csel.open .cs-c{color:var(--coral,#ff4458)}
html body .fld.fld>.csel .cs-t:active{translate:none!important}
html.dark body .fld.fld>.csel .cs-t{background:var(--card2)!important;border-color:var(--bd)!important}
.fld.sel{margin-top:18px}
#valBox .fld,#scopeBox .fld{margin-top:18px}
.two>.fld,.two>div>.fld{margin-top:18px}

/* ======================================================================
   2. DAFTAR ALUR PROFESIONAL
   ====================================================================== */
#listBox>.bar{margin:14px 0 10px}
#flowTools{display:grid;gap:12px;margin:0 0 14px}
.fl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fl-stat{display:flex;flex-direction:column;gap:3px;padding:11px 13px;background:var(--card);color:var(--ink);border:2px solid var(--bd);border-radius:16px}
.fl-stat b{font-size:24px;line-height:1;font-weight:700}
.fl-stat span{font-size:11.5px;color:var(--mute)}
.fl-stat:nth-child(1){background:var(--acc);color:#111}.fl-stat:nth-child(1) span{color:rgba(17,17,17,.72)}
.fl-search{margin:2px 0 0!important}
.fl-search>label{pointer-events:none}
.fl-filters{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.fl-f{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;padding:7px 13px!important;border:2px solid var(--bd)!important;border-radius:999px!important;background:var(--card)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:700;box-shadow:none!important;transition:background-color .15s,transform .12s}
.fl-f:active{transform:scale(.96)}
.fl-f em{font-style:normal;font-size:11px;min-width:18px;height:18px;padding:0 5px;display:inline-grid;place-items:center;border-radius:9px;background:rgba(127,127,127,.18)}
.fl-f.on{background:var(--acc)!important;color:#111!important}
.fl-f.on em{background:rgba(17,17,17,.16)}
.fl-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--mute);margin:2px 2px 0}

#flowList{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important;counter-reset:none!important;align-items:start}
@media(min-width:900px){#flowList{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

.fl-card{
  position:relative;display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:13px;row-gap:12px;padding:14px;
  background:var(--card);color:var(--ink);border:2px solid var(--bd);border-radius:20px;box-shadow:4px 4px 0 var(--sd,#111);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--out,cubic-bezier(.16,1,.3,1)),box-shadow .16s var(--out,cubic-bezier(.16,1,.3,1));
  content-visibility:auto;contain-intrinsic-size:auto 190px
}
.fl-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--sd,#111)}
.fl-ic{width:50px;height:50px;border-radius:15px;border:2px solid var(--bd);display:grid;place-items:center;background:var(--t,var(--acc));color:#111}
.fl-ic svg.ic{font-size:24px;stroke-width:2.1}
.fl-body{min-width:0;display:flex;flex-direction:column;gap:7px}
.fl-name{font-size:17px;line-height:1.25;font-weight:700;margin:0;overflow-wrap:anywhere;color:var(--ink)}
.fl-meta{display:flex;flex-wrap:wrap;gap:6px}
.fl-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 9px;border:1.5px solid var(--bd);border-radius:8px;background:var(--card);color:var(--ink);font-size:11.5px;font-weight:700;line-height:1.35}
.fl-chip svg.ic{font-size:12px}
.fl-chip.trig{background:var(--t,var(--acc));color:#111;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-chip.mut{border-style:dashed;color:var(--mute);font-weight:600}
.fl-prev{margin:0;font-size:13px;line-height:1.5;color:var(--mute)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.fl-prev.none{font-style:italic;opacity:.8}
.fl-seq{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fl-sq{width:28px;height:28px;border-radius:9px;border:1.5px solid var(--bd);display:grid;place-items:center;background:var(--card2,var(--card));color:var(--ink)}
.fl-sq svg.ic{font-size:14px}
.fl-sqn{font-size:11.5px;font-weight:700;color:var(--mute);padding:0 4px}
.fl-foot{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding-top:12px;border-top:2px dashed rgba(127,127,127,.35)}
.fl-date{flex:1;min-width:0;font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 13px!important;border:2px solid var(--bd)!important;border-radius:11px!important;background:var(--card)!important;color:var(--ink)!important;font-size:13px!important;font-weight:700;box-shadow:2px 2px 0 var(--sd,#111)!important;transition:transform .12s,box-shadow .12s}
.fl-btn svg.ic{font-size:16px}
.fl-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--sd,#111)!important}
.fl-btn.ic1{width:38px;padding:0!important}
.fl-btn.pri{background:var(--acc)!important;color:#111!important}
.fl-btn.dng{color:var(--err)!important}
.fl-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 20px;border:2px dashed var(--bd);border-radius:20px;background:var(--card);color:var(--ink)}
.fl-empty .fl-ic{width:62px;height:62px;border-radius:20px}
.fl-empty .fl-ic svg.ic{font-size:30px}
.fl-empty b{font-size:16px}
.fl-empty p{margin:0;font-size:13px;line-height:1.55;color:var(--mute)}
.t-command{--t:var(--acc)}.t-keyword{--t:var(--pink)}.t-callback{--t:var(--blue)}.t-any{--t:var(--green)}.t-media{--t:var(--pink)}
.t-join{--t:var(--green)}.t-left{--t:var(--red)}.t-joinreq{--t:var(--blue)}.t-channel{--t:var(--acc)}.t-botstatus{--t:var(--blue)}.t-payment{--t:var(--green)}
body.compact .fl-card{padding:11px;row-gap:9px}
body.compact .fl-prev,body.compact .fl-seq{display:none}

/* ======================================================================
   3. PERFORMA ANIMASI (anti patah-patah)
   ====================================================================== */
/* loader layar penuh dengan blur sudah tidak dipakai saat pindah tab */
#pgLoad,#pgLoad.on{display:none!important}
/* pergantian halaman: satu animasi ringan di JS (opacity + transform), animasi anak-anak berantai dimatikan */
#vTerm:not(.hide)>*,#vFlow:not(.hide)>*,#vSet:not(.hide)>*{animation:none!important}
.row,.panel,.sc{animation:none}
#vFlow:not(.hide) .fl-card{animation:flIn .28s var(--m-ease,cubic-bezier(.2,.8,.2,1)) backwards;animation-delay:calc(min(var(--i,0),7) * 30ms)}
@keyframes flIn{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
/* lapisan GPU hanya untuk elemen yang memang bergerak */
#splash.out,.ui-sheet,.ui-scrim{will-change:transform,opacity}
body.noanim .fl-card,body.noanim .fld>label{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.fl-card,.fld>label,.fl-btn{animation:none!important;transition:none!important}}
#flowList.noin .fl-card{animation:none!important}
.fld-chk{margin-top:10px}
/* kolom grid boleh menyusut: cegah panel editor melebar melewati layar */
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.two{grid-template-columns:minmax(0,1fr)}}
.two>*,.fld,.fld>.csel{min-width:0}
#paneS .panel,#paneS .step{max-width:100%;min-width:0}
@media(max-width:900px){.build{grid-template-columns:minmax(0,1fr)}.build>*{min-width:0}}

.two{gap:0 12px}
.fl-stat:nth-child(1) b{color:#111!important}

/* halaman Global (.gp): geser naik + fade, tanpa clip-path layar penuh */
html body .gp{clip-path:none!important;opacity:0;transform:translate3d(0,28px,0);transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s linear!important;will-change:transform,opacity;contain:layout paint}
html body .gp.in{opacity:1;transform:translate3d(0,0,0)}
html body .gp.in.done{transform:none;will-change:auto;contain:none}
html body .gp.out{opacity:0;transform:translate3d(0,28px,0);transition-duration:.22s,.16s!important;will-change:transform,opacity}
html body .gp.out.done{contain:layout paint}
/* isi halaman muncul tanpa animasi berantai yang berat saat layar sedang bergeser */
html body .gp .gl-sh,html body .gp .gl-hc,html body .gp .gl-pj,html body .gp .gl-row,html body .gp .gl-empty{animation-duration:.25s;animation-delay:calc(min(var(--i,0),5) * 25ms)}
@keyframes glUp{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
body.noanim .gp{transition:none!important}