/* ================= DataNiva Clean ================= */
#clean .panel-inner{ background:var(--paper); }
#clean-root{ max-width:1180px; margin:0 auto; color:var(--ink); }
.cl-work{ position:relative; }
.cl-head h2{ font-family:'Poppins'; font-weight:800; font-size:clamp(1.6rem,2.6vw,2.2rem); margin:0 0 6px; }
.cl-head .lead{ color:var(--muted); max-width:640px; margin:0 0 22px; line-height:1.6; }

.cl-drop{ border:1.6px dashed rgba(188,170,232,.5); border-radius:16px; background:var(--card); padding:44px 26px; text-align:center; transition:.18s; }
.cl-drop.over{ border-color:var(--accent); background:rgba(188,170,232,.08); }
.cl-dropico{ font-size:2rem; color:var(--accent-ink); }
.cl-droptxt{ margin:10px 0 18px; color:var(--muted); }
.cl-browse{ color:var(--accent-ink); font-weight:700; cursor:pointer; text-decoration:underline; }
.cl-browse input{ display:none; }
.cl-sample{ border:0; cursor:pointer; font:inherit; font-weight:700; color:#fff; background:linear-gradient(135deg,#8a6fc0,#c9738f); border-radius:11px; padding:11px 20px; }

.cl-top{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; margin-bottom:16px; }
.cl-score{ position:relative; width:130px; height:130px; }
.cl-score svg{ width:130px; height:130px; }
.cl-ring-bg{ fill:none; stroke:rgba(236,231,245,.12); stroke-width:10; }
.cl-ring{ fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.3,.8,.3,1), stroke .5s; }
.cl-score-mid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cl-score-n{ font-family:'Poppins'; font-weight:800; font-size:2.1rem; line-height:1; }
.cl-score-l{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.cl-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.cl-stat{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.cl-stat-v{ font-family:'Poppins'; font-weight:700; font-size:1.3rem; }
.cl-stat-l{ font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:2px; }

.cl-mid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.cl-logwrap{ margin-top:20px; }
.cl-h-sub{ font-family:'Inter',sans-serif; font-weight:500; font-size:.72rem; color:var(--muted); letter-spacing:.01em; }
.cl-col h3, .cl-stepsblock h3, .cl-logwrap h3{ font-family:'Poppins'; font-weight:700; font-size:.95rem; margin:0 0 10px; color:var(--ink); }
.cl-heat{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.cl-hrow{ display:grid; grid-template-columns:96px 1fr auto; gap:10px; align-items:center; padding:5px 0; font-size:.8rem; }
.cl-hname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-weight:600; }
.cl-hbar{ height:10px; border-radius:6px; background:rgba(217,122,143,.34); overflow:hidden; }
.cl-hbar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#8ea6d6,#b6a3e0); transition:width .6s cubic-bezier(.3,.8,.3,1); }
.cl-hpct{ font-size:.72rem; color:var(--muted); white-space:nowrap; }
/* scan-on-load */
.cl-scan{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:34px 30px; text-align:center; }
.cl-scanwrap{ height:88px; border-radius:12px; border:1px solid var(--line); position:relative; overflow:hidden;
  background:repeating-linear-gradient(90deg, rgba(236,231,245,.06) 0 22px, transparent 22px 44px), var(--paper); }
.cl-scanbeam{ position:absolute; top:0; bottom:0; left:-120px; width:120px; background:linear-gradient(90deg, transparent, rgba(188,170,232,.55), transparent); animation:clScan 1s linear infinite; }
@keyframes clScan{ to{ left:100%; } }
.cl-scantxt{ margin:16px 0 4px; color:var(--ink); font-weight:600; } .cl-scantxt b{ color:var(--accent-ink); }
.cl-scanbar{ height:8px; border-radius:6px; background:rgba(236,231,245,.14); overflow:hidden; margin:6px auto 8px; max-width:420px; }
.cl-scanbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#8a6fc0,#c9738f); transition:width .9s ease; }
.cl-scanissues{ font-size:.82rem; color:var(--muted); } .cl-scanissues b{ color:var(--accent-ink); }
.cl-issues{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.cl-chip{ font-size:.74rem; font-weight:600; color:#e7c4c8; background:rgba(200,90,110,.14); border:1px solid rgba(200,90,110,.28); border-radius:999px; padding:6px 12px; }
.cl-chip.cl-clean{ color:#a7dcc2; background:rgba(80,180,140,.14); border-color:rgba(80,180,140,.3); }
.cl-cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.cl-ccard{ background:var(--card); border:1px solid var(--line); border-radius:11px; padding:11px 12px; }
.cl-cname{ font-weight:700; font-size:.86rem; display:flex; align-items:center; justify-content:space-between; }
.cl-ctype{ font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:rgba(188,170,232,.14); border-radius:6px; padding:2px 7px; }
.cl-cstat{ font-size:.72rem; color:var(--muted); margin:5px 0 8px; }
.cl-cstat .warn{ color:#e0899a; }
.cl-spark{ display:flex; align-items:flex-end; gap:2px; height:30px; }
.cl-spark i{ flex:1; background:linear-gradient(180deg,#b6a3e0,#8ea6d6); border-radius:2px 2px 0 0; }
.cl-cmeta{ font-size:.66rem; color:var(--muted); margin-top:6px; }
.cl-tops{ display:flex; flex-direction:column; gap:3px; }
.cl-topr{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink); }
.cl-topr span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-topr b{ color:var(--accent-ink); }

.cl-recipe{ display:flex; flex-direction:column; gap:6px; }
.cl-step{ display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:.86rem; cursor:pointer; }
.cl-step input{ accent-color:#8a6fc0; width:15px; height:15px; }
.cl-fillm{ margin-left:auto; font:inherit; font-size:.76rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:4px 8px; cursor:pointer; }
.cl-step2{ background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cl-step-hd{ display:flex; align-items:center; gap:9px; padding:9px 12px; font-size:.86rem; }
.cl-step-hd input[type=checkbox]{ accent-color:#8a6fc0; width:15px; height:15px; }
.cl-step-name{ font-weight:600; }
.cl-step-cnt{ margin-left:auto; font-size:.72rem; color:var(--muted); opacity:.65; }
.cl-step-cnt.has{ color:var(--accent-ink); opacity:1; }
.cl-exp{ border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:.85rem; padding:2px 4px; transition:transform .2s; }
.cl-exp.open{ transform:rotate(180deg); }
.cl-opts{ padding:2px 14px 12px 34px; display:flex; flex-wrap:wrap; gap:14px; }
.clo{ display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--muted); }
.clo select{ font:inherit; font-size:.76rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:4px 8px; }
.clo input[type=checkbox]{ accent-color:#8a6fc0; }
.cl-hrow.fillable{ cursor:pointer; margin:0 -6px; padding-left:6px; padding-right:6px; border-radius:8px; transition:background .15s; }
.cl-hrow.fillable:hover{ background:rgba(188,170,232,.12); }
.cl-flash{ animation:clFlash .72s ease; }
@keyframes clFlash{ 0%{ box-shadow:0 0 0 0 rgba(160,120,210,0);} 30%{ box-shadow:0 0 0 2px rgba(160,120,210,.5), 0 0 26px rgba(160,120,210,.32);} 100%{ box-shadow:0 0 0 0 rgba(160,120,210,0);} }
.cl-score.cl-pulse{ animation:clPulse .6s ease; }
@keyframes clPulse{ 0%,100%{ transform:scale(1);} 42%{ transform:scale(1.06);} }
.cl-run{ display:flex; gap:10px; margin-top:12px; }
.cl-auto{ flex:1; border:0; cursor:pointer; font:inherit; font-weight:700; color:#fff; background:linear-gradient(135deg,#8a6fc0,#c9738f); border-radius:11px; padding:12px; box-shadow:0 12px 26px -14px rgba(138,111,192,.8); }
.cl-apply{ border:1.5px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-weight:700; border-radius:11px; padding:12px 16px; cursor:pointer; }
.cl-auto:disabled,.cl-apply:disabled{ opacity:.5; cursor:default; }
.cl-log{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; max-height:180px; overflow-y:auto; font-size:.82rem; }
.cl-log-empty{ color:var(--muted); }
.cl-logrow{ display:flex; align-items:baseline; gap:6px; padding:4px 0; animation:clIn .3s ease; }
.cl-logrow b{ color:var(--accent-ink); margin-left:auto; }
.cl-check{ color:#7fd39a; font-weight:800; }
@keyframes clIn{ from{ opacity:0; transform:translateX(-6px);} to{ opacity:1; transform:none; } }
.cl-undo{ display:flex; gap:10px; margin-top:10px; }
.cl-undo button{ flex:1; border:1px solid var(--line); background:transparent; color:var(--muted); font:inherit; font-weight:600; font-size:.82rem; border-radius:9px; padding:9px; cursor:pointer; }
.cl-undo button:hover{ color:var(--ink); border-color:var(--accent); }

.cl-previewwrap{ margin-top:18px; } .cl-previewwrap h3{ font-family:'Poppins'; font-weight:700; font-size:.95rem; margin:0 0 10px; }
.cl-preview{ overflow:auto; border:1px solid var(--line); border-radius:12px; }
.cl-tbl{ width:100%; border-collapse:collapse; font-size:.78rem; }
.cl-tbl th{ background:var(--card); text-align:left; padding:9px 12px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); white-space:nowrap; }
.cl-tbl td{ padding:8px 12px; color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap; }
.cl-tbl td.miss{ color:#e0899a; }

.cl-actions{ display:flex; gap:12px; margin:20px 0 8px; }
.cl-dl{ border:0; cursor:pointer; font:inherit; font-weight:700; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 22px; }
.cl-go{ text-decoration:none; font-weight:700; color:#fff; background:linear-gradient(135deg,#8a6fc0,#c9738f); border-radius:12px; padding:14px 24px; box-shadow:0 14px 30px -14px rgba(138,111,192,.7); }

.cl-petal{ position:absolute; width:12px; height:12px; border-radius:64% 64% 60% 60% / 82% 82% 42% 42%; z-index:50; pointer-events:none;
  animation:clPetal 1.3s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes clPetal{ 0%{ opacity:0; transform:translate(0,0) scale(.4) rotate(0);} 15%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot)); } }

@media (max-width:1000px){ .cl-mid{ grid-template-columns:1fr; } .cl-stats{ grid-template-columns:repeat(3,1fr); } .cl-top{ grid-template-columns:1fr; justify-items:center; } }

/* ============ glassy pastel polish ============ */
.cl-stat,.cl-heat,.cl-ccard,.cl-log,.cl-preview,.cl-step2{
  border:1px solid rgba(255,255,255,.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 18px 38px -24px rgba(0,0,0,.7) !important;
  background:
    radial-gradient(135% 120% at 20% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    radial-gradient(120% 120% at 92% 98%, rgba(14,9,24,.5), rgba(14,9,24,0) 55%),
    linear-gradient(150deg,#2b2442,#201a31) !important;
}
.cl-stat{ position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.cl-stat::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:4px 0 0 4px; opacity:.9; }
.cl-stat:hover{ transform:translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 26px 46px -22px rgba(0,0,0,.8), 0 0 34px -10px rgba(160,120,210,.4) !important; }
/* pastel tints per stat tile — echoing the chart-library wall */
.cl-stats .cl-stat:nth-child(1){ background:
  radial-gradient(135% 120% at 20% 10%, rgba(255,255,255,.11), transparent 55%),
  linear-gradient(150deg,#332a4e,#231b36) !important; }
.cl-stats .cl-stat:nth-child(1)::after{ background:linear-gradient(#c9a7ec,#8a6fc0); }
.cl-stats .cl-stat:nth-child(2){ background:
  radial-gradient(135% 120% at 20% 10%, rgba(255,255,255,.11), transparent 55%),
  linear-gradient(150deg,#26334f,#1a2335) !important; }
.cl-stats .cl-stat:nth-child(2)::after{ background:linear-gradient(#93c0f0,#5f8fd0); }
.cl-stats .cl-stat:nth-child(3){ background:
  radial-gradient(135% 120% at 20% 10%, rgba(255,255,255,.11), transparent 55%),
  linear-gradient(150deg,#22413d,#18292a) !important; }
.cl-stats .cl-stat:nth-child(3)::after{ background:linear-gradient(#8fd8c4,#4fae94); }
.cl-stats .cl-stat:nth-child(4){ background:
  radial-gradient(135% 120% at 20% 10%, rgba(255,255,255,.11), transparent 55%),
  linear-gradient(150deg,#3d2733,#291a23) !important; }
.cl-stats .cl-stat:nth-child(4)::after{ background:linear-gradient(#efa9bc,#c9738f); }
.cl-stats .cl-stat:nth-child(5){ background:
  radial-gradient(135% 120% at 20% 10%, rgba(255,255,255,.11), transparent 55%),
  linear-gradient(150deg,#38321d,#251f12) !important; }
.cl-stats .cl-stat:nth-child(5)::after{ background:linear-gradient(#eed08a,#d0a24f); }
.cl-stat-v{ position:relative; z-index:1; }

/* step cards */
.cl-step2{ transition:transform .16s ease, box-shadow .2s ease; }
.cl-step2:hover{ transform:translateY(-1px); }
.cl-step2.cl-running{ box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1.5px rgba(201,163,224,.55), 0 0 28px -4px rgba(160,120,210,.45) !important; }
.cl-step2.cl-justdone{ box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1.5px rgba(95,175,140,.6), 0 0 26px -6px rgba(80,180,120,.4) !important; }
.cl-step2.cl-justdone .cl-step-name::after{ content:" ✓"; color:#7fd6a6; font-weight:800; }
.cl-runmini{ display:flex; align-items:center; gap:9px; padding:0 13px 10px 34px; }
.cl-runlbl{ font-size:.7rem; letter-spacing:.02em; color:var(--accent-ink); white-space:nowrap; min-width:118px; }
.cl-runbar{ flex:1; height:5px; border-radius:4px; background:rgba(236,231,245,.12); overflow:hidden; }
.cl-runbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#8a6fc0,#c9738f); box-shadow:0 0 10px rgba(160,120,210,.6); transition:width .19s linear; }

/* surprise: verdict ribbon + sparkle sweep */
.cl-verdict{ position:absolute; left:50%; top:-4px; transform:translate(-50%,-130%); z-index:70;
  font-family:'Poppins'; font-weight:700; font-size:.94rem; color:#fff; letter-spacing:.01em;
  padding:11px 26px; border-radius:0 0 16px 16px; white-space:nowrap;
  background:linear-gradient(90deg,#8a6fc0,#c9738f); box-shadow:0 16px 36px -14px rgba(138,111,192,.75);
  transition:transform .5s cubic-bezier(.2,.85,.3,1); }
.cl-verdict.show{ transform:translate(-50%,0); }
.cl-heat{ position:relative; overflow:hidden; }
#clWork{ position:relative; }

/* ============ steps pipeline (card + live feed per step) ============ */
.cl-stepsblock{ margin-bottom:22px; }
.cl-pipe{ display:flex; flex-direction:column; gap:12px; }
.cl-node{ position:relative; display:grid; grid-template-columns:minmax(240px,1fr) 1.3fr; gap:14px; align-items:stretch; transition:opacity .25s ease, filter .25s ease; }
.cl-node.off{ opacity:.45; filter:grayscale(.5); }
@media (max-width:1000px){ .cl-node{ grid-template-columns:1fr; } }

.cl-node-card{ position:relative; border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:2px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 34px -24px rgba(0,0,0,.7);
  background:
    radial-gradient(135% 120% at 18% 8%, rgba(255,255,255,.09), rgba(255,255,255,0) 55%),
    linear-gradient(150deg,#2b2442,#201a31);
  transition:box-shadow .2s ease, transform .16s ease; }
.cl-node.on .cl-node-card:hover{ transform:translateY(-1px); }
.cl-node.cl-running .cl-node-card{ box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1.5px rgba(201,163,224,.5), 0 0 26px -4px rgba(160,120,210,.4); }
.cl-node.cl-done .cl-node-card{ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(95,190,140,.3), 0 16px 34px -24px rgba(0,0,0,.7); }

.cl-node-hd{ display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer; user-select:none; }
.cl-node-hd .cl-step-name{ font-weight:600; font-size:.88rem; }
.cl-node-hd .cl-step-cnt{ font-size:.7rem; color:var(--muted); opacity:.6; }
.cl-node-hd .cl-step-cnt.has{ color:var(--accent-ink); opacity:1; }
/* sliding switch */
.cl-sw{ margin-left:auto; flex:0 0 auto; width:38px; height:21px; border-radius:999px; border:0; cursor:pointer; padding:0; position:relative;
  background:rgba(150,140,170,.32); transition:background .22s ease; }
.cl-sw i{ position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.4); transition:transform .22s cubic-bezier(.3,1.4,.5,1); }
.cl-sw[aria-checked="true"]{ background:linear-gradient(90deg,#8a6fc0,#c9738f); }
.cl-sw[aria-checked="true"] i{ transform:translateX(17px); }
/* step number badge — on the RIGHT of the step */
.cl-node-num{ position:relative; flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Poppins'; font-weight:700; font-size:.78rem; color:#fff; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  background:linear-gradient(140deg,#8a6fc0,#c9738f); box-shadow:0 6px 14px -6px rgba(138,111,192,.7); }
.cl-node.off .cl-node-num{ background:rgba(120,110,140,.4); box-shadow:none; }
.cl-node-check{ display:none; }
.cl-node.cl-done .cl-node-num{ background:linear-gradient(140deg,#63c98c,#3f9f78); box-shadow:0 0 14px 1px rgba(90,200,140,.45); }
.cl-node.cl-done .cl-node-i{ display:none; }
.cl-node.cl-done .cl-node-check{ display:block; }
.cl-node.cl-justdone .cl-node-num, .cl-node.cl-wave .cl-node-num{ transform:scale(1.16); box-shadow:0 0 22px 3px rgba(90,200,140,.7); }
.cl-node.cl-running .cl-node-num{ box-shadow:0 0 20px 3px rgba(170,130,225,.7); }
.cl-node.cl-running .cl-node-num::after{ content:""; position:absolute; top:-5px; left:-5px; width:40px; height:40px; border-radius:50%; border:2px solid transparent; border-top-color:#e7d6ff; animation:clSpin .7s linear infinite; }
@keyframes clSpin{ to{ transform:rotate(360deg); } }

.cl-exp{ display:block; margin:0 0 2px 13px; border:0; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:.72rem; padding:2px 4px 8px; letter-spacing:.02em; }
.cl-exp:hover{ color:var(--accent-ink); }
.cl-node .cl-opts{ padding:0 14px 12px 13px; }

/* live activity feed (right of each step) */
.cl-node-live{ border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:10px 14px; min-height:46px;
  background:linear-gradient(150deg,#191325,#140e1f);
  font-family:ui-monospace,'SFMono-Regular','JetBrains Mono',Menlo,monospace; font-size:.72rem; line-height:1.2;
  color:var(--muted); overflow:auto; max-height:150px; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.cl-node-live.cl-live-run{ justify-content:flex-start; border-color:rgba(201,163,224,.3); }
.cl-node.cl-done .cl-node-live{ border-color:rgba(95,190,140,.22); }
.cl-live-idle{ color:rgba(190,180,205,.5); }
.cl-live-line{ display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(3px); animation:clLiveIn .18s ease forwards; white-space:nowrap; }
.cl-live-line.sub{ color:rgba(203,190,228,.9); padding-left:5px; }
@keyframes clLiveIn{ to{ opacity:1; transform:none; } }
.cl-live-tick{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; border:1.5px solid rgba(201,163,224,.5); position:relative; }
.cl-live-line.cur .cl-live-tick{ border-color:#c9a3e0; animation:clPulseDot .7s ease infinite; }
.cl-live-line.ok .cl-live-tick{ border-color:#5fbe8c; background:#5fbe8c; }
.cl-live-line.ok .cl-live-tick::after{ content:"✓"; position:absolute; inset:0; color:#0f1a14; font-size:.58rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
@keyframes clPulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,163,224,.5);} 50%{ box-shadow:0 0 0 4px rgba(201,163,224,0);} }
.cl-live-sum{ color:#7fd6a6; font-weight:600; margin-top:2px; }
.cl-live-line.sub .cl-lc-name{ color:rgba(206,193,231,.95); }
.cl-live-line.sub .cl-lc-n{ margin-left:auto; padding-left:14px; color:#eab6c8; font-weight:600; white-space:nowrap; }
.cl-live-line.ok.sub .cl-lc-n{ color:#8fd9ab; }

/* ============ themed scrollbars (Clean) ============ */
#clean ::-webkit-scrollbar{ width:10px; height:10px; }
#clean ::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:999px; }
#clean ::-webkit-scrollbar-thumb{ border-radius:999px; border:2px solid transparent; background-clip:padding-box;
  background-image:linear-gradient(180deg,#8a6fc0,#c9738f); }
#clean ::-webkit-scrollbar-thumb:hover{ background-image:linear-gradient(180deg,#9c82d0,#d68aa2); background-clip:padding-box; border:2px solid transparent; }
#clean ::-webkit-scrollbar-corner{ background:transparent; }
#clean{ scrollbar-color:#a684cf rgba(255,255,255,.06); scrollbar-width:thin; }
#clean .cl-node-live::-webkit-scrollbar{ width:7px; height:7px; }

/* ===== Clean — 3-step guided flow ===== */
.cl-stepper{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 24px; flex-wrap:wrap; }
.cl-sd{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card); color:var(--muted); font:inherit; font-weight:700; font-size:.86rem; padding:9px 16px; border-radius:999px; cursor:pointer; transition:.15s; }
.cl-sd b{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--paper,#efeaf7); color:var(--muted); font-size:.76rem; }
.cl-sd.on{ color:#fff; background:linear-gradient(135deg,#a99ada,#c3a2d2); border-color:transparent; }
.cl-sd.on b{ background:rgba(255,255,255,.28); color:#fff; }
.cl-sdsep{ width:26px; height:2px; background:var(--line); border-radius:2px; }
.cl-pane{ display:block; animation:clFade .3s ease; }
.cl-pane[hidden]{ display:none !important; }
@keyframes clFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.cl-steplead{ text-align:center; margin:0 0 18px; } .cl-steplead h3{ margin:0 0 5px; }
.cl-stepnav{ display:flex; align-items:center; gap:10px; margin:24px 0 4px; }
.cl-navspacer{ flex:1; } .cl-navnote{ flex:1; color:var(--muted); font-size:.86rem; }
.cl-next{ border:none; cursor:pointer; font:inherit; font-weight:700; color:#fff; background:linear-gradient(135deg,#a99ada,#c3a2d2); border-radius:12px; padding:12px 20px; }
.cl-next:hover{ filter:brightness(1.05); }
.cl-ghost{ border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-weight:600; border-radius:11px; padding:10px 16px; cursor:pointer; }
.cl-ghost:hover{ border-color:#c3a2d2; }
.cl-result{ display:flex; align-items:center; gap:11px; background:linear-gradient(135deg,rgba(127,211,154,.16),rgba(195,162,210,.12)); border:1px solid rgba(127,211,154,.45); border-radius:14px; padding:14px 18px; margin:0 0 16px; font-size:.95rem; }
.cl-result-badge{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#7fd39a; color:#fff; font-weight:800; flex:0 0 auto; }
.cl-runhost{ margin:0 0 16px; }
.cl-drophint{ margin-top:10px; font-size:.78rem; color:var(--muted); }