/* ============================================================
   Wiman widget-runtime.css  (Phase B/E)
   Vars scoped to .custom-widget so the widget renders in its own
   dark context (matches the Creator) regardless of platform theme.
   Below: widgets.css (.wg-*) + designer.css (.el-* + @keyframes),
   bundled verbatim. .dz-* editor selectors are inert dead CSS.
   ============================================================ */
.custom-widget{
  --bg:#070b14; --card:#0f1830; --card-2:#111c38;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --ink:#e6edf7; --ink-2:#cfe1ff; --muted:#8a99b6; --muted-2:#5e6e8c;
  --teal:#22d3ee; --green:#22c55e; --amber:#f59e0b; --red:#ef4444;
  --violet:#a78bfa; --blue:#60a5fa; --yellow:#facc15; --cyan:#67e8f9;
  --pink:#ec4899; --orange:#fb923c; --sky:#38bdf8;
  --emerald:#10b981; --slate:#94a3b8;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--ink);
  overflow:hidden;
  position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.35), 0 12px 30px -14px rgba(0,0,0,.55);
}
.custom-widget{display:block}
.custom-widget .cw-mount{position:absolute;inset:0;border-radius:inherit}
.custom-widget .cw-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}

/* ===== widgets.css ===== */
/* ============================================================
   Wiman Widget Editor — widget visual styles
   Same tokens as platform; cards are the host wrappers.
   ============================================================ */

/* widget inner header */
.wg-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:7px}
.wg-hdr .nm{display:flex;align-items:center;gap:7px;min-width:0}
.wg-hdr .nm .ic{
  width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;flex-shrink:0;background:rgba(34,211,238,.14);color:#67e8f9;border:1px solid rgba(34,211,238,.25)
}
.wg-hdr .nm .ic.green{background:rgba(34,197,94,.14);color:#86efac;border-color:rgba(34,197,94,.3)}
.wg-hdr .nm .ic.amber{background:rgba(245,158,11,.14);color:#fcd34d;border-color:rgba(245,158,11,.3)}
.wg-hdr .nm .ic.red{background:rgba(239,68,68,.14);color:#fca5a5;border-color:rgba(239,68,68,.3)}
.wg-hdr .nm .ic.violet{background:rgba(167,139,250,.14);color:#c4b5fd;border-color:rgba(167,139,250,.3)}
.wg-hdr .nm .ic.blue{background:rgba(96,165,250,.14);color:#93c5fd;border-color:rgba(96,165,250,.3)}
.wg-hdr .nm .ic.yellow{background:rgba(250,204,21,.14);color:#fde047;border-color:rgba(250,204,21,.3)}
.wg-hdr .nm .ic.pink{background:rgba(236,72,153,.14);color:#f9a8d4;border-color:rgba(236,72,153,.3)}
.wg-hdr .nm .t{font-size:11.5px;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-hdr .sub{font-size:9.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:1px}
.wg-hdr .pill{font-size:9px;font-weight:700;padding:2px 7px;border-radius:999px;letter-spacing:.5px;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.wg-hdr .pill.live{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.3)}
.wg-hdr .pill.live::before{content:"";display:inline-block;width:4px;height:4px;background:#22c55e;border-radius:50%;margin-right:4px;vertical-align:1px;box-shadow:0 0 4px #22c55e;animation:wg-breathe 1.6s ease-in-out infinite}

@keyframes wg-breathe{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes wg-wave{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes wg-flow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-30}}

/* big value */
.wg-val{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1}
.wg-val.xl{font-size:30px}.wg-val.l{font-size:22px}.wg-val.m{font-size:16px}.wg-val.s{font-size:13px}
.wg-val.c-teal{color:#67e8f9}
.wg-val.c-green{color:#86efac}
.wg-val.c-amber{color:#fcd34d}
.wg-val.c-red{color:#fca5a5}
.wg-val.c-violet{color:#c4b5fd}
.wg-val.c-blue{color:#93c5fd}
.wg-val.c-yellow{color:#fde047}
.wg-val.c-pink{color:#f9a8d4}
.wg-unit{color:var(--muted);font-size:11px;font-weight:500;margin-left:3px}

.wg-delta{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:4px}
.wg-delta.up{color:#86efac;background:rgba(34,197,94,.12)}
.wg-delta.dn{color:#fca5a5;background:rgba(239,68,68,.12)}
.wg-delta.fl{color:var(--muted);background:rgba(255,255,255,.05)}

.wg-foot{display:flex;justify-content:space-between;font-size:10px;color:var(--muted-2);margin-top:auto;font-variant-numeric:tabular-nums}
.wg-foot b{color:var(--ink-2);font-weight:600}

/* bar */
.wg-bar{position:relative;height:7px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin-top:6px}
.wg-bar > i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#22d3ee,#a78bfa)}
.wg-bar.green > i{background:linear-gradient(90deg,#22c55e,#86efac)}
.wg-bar.amber > i{background:linear-gradient(90deg,#f59e0b,#fcd34d)}
.wg-bar.red > i{background:linear-gradient(90deg,#ef4444,#fca5a5)}
.wg-bar.violet > i{background:linear-gradient(90deg,#a78bfa,#c4b5fd)}
.wg-bar.blue > i{background:linear-gradient(90deg,#3b82f6,#93c5fd)}
.wg-bar.yellow > i{background:linear-gradient(90deg,#facc15,#fde047)}

/* arc gauge svg */
.wg-arc{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;position:relative;min-height:80px}
.wg-arc svg{display:block;filter:drop-shadow(0 0 5px currentColor)}
.wg-arc .lbl{margin-top:-22px;text-align:center;line-height:1}
.wg-arc .lbl b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.3px;display:block}
.wg-arc .lbl small{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-top:2px}

/* split */
.wg-split{display:grid;grid-template-columns:1fr 1px 1fr;gap:12px;align-items:stretch;flex:1}
.wg-split .divider{background:linear-gradient(180deg,transparent,var(--line-2) 30%,var(--line-2) 70%,transparent)}
.wg-split .side{display:flex;flex-direction:column;gap:3px;min-width:0}
.wg-split .side .lbl{font-size:9.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.5px;font-weight:600;display:flex;align-items:center;gap:5px}
.wg-split .side .lbl .dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}

/* hero+companion */
.wg-hero{display:flex;gap:12px;align-items:flex-start;flex:1;min-height:0}
.wg-hero .primary{flex:1;min-width:0}
.wg-hero .companion{padding:7px 9px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;min-width:78px;text-align:center;flex-shrink:0}
.wg-hero .companion .l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;display:block}
.wg-hero .companion .v{font-size:17px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;display:block}

/* battery */
.wg-batt{position:relative;width:42px;height:20px;border:2px solid var(--ink-2);border-radius:3px;flex-shrink:0}
.wg-batt::after{content:"";position:absolute;right:-4px;top:5px;width:3px;height:8px;background:var(--ink-2);border-radius:0 1px 1px 0}
.wg-batt .fill{position:absolute;inset:2px;background:linear-gradient(90deg,#22c55e,#86efac);border-radius:1px;transition:width .4s ease}
.wg-batt.med .fill{background:linear-gradient(90deg,#f59e0b,#fcd34d)}
.wg-batt.low .fill{background:linear-gradient(90deg,#ef4444,#fca5a5)}

/* tank */
.wg-tank{position:relative;width:34px;height:80px;border:2px solid rgba(34,211,238,.4);border-radius:5px 5px 8px 8px;flex-shrink:0;
  background:radial-gradient(circle at 30% 10%,rgba(255,255,255,.05),transparent 60%),#0a1124;overflow:hidden;
  box-shadow:0 0 14px rgba(34,211,238,.15) inset}
.wg-tank .fill{position:absolute;left:-50%;right:-50%;bottom:0;background:linear-gradient(180deg,rgba(34,211,238,.5),rgba(34,211,238,.85));transition:height .4s ease}
.wg-tank .fill svg{position:absolute;top:-9px;left:0;width:200%;height:12px;display:block;animation:wg-wave 5s linear infinite}
.wg-tank.green{border-color:rgba(34,197,94,.45);box-shadow:0 0 14px rgba(34,197,94,.18) inset}
.wg-tank.green .fill{background:linear-gradient(180deg,rgba(34,197,94,.5),rgba(34,197,94,.85))}
.wg-tank.amber{border-color:rgba(245,158,11,.45);box-shadow:0 0 14px rgba(245,158,11,.18) inset}
.wg-tank.amber .fill{background:linear-gradient(180deg,rgba(245,158,11,.5),rgba(245,158,11,.85))}
.wg-tank.red{border-color:rgba(239,68,68,.5);box-shadow:0 0 14px rgba(239,68,68,.22) inset}
.wg-tank.red .fill{background:linear-gradient(180deg,rgba(239,68,68,.5),rgba(239,68,68,.9))}

/* donut */
.wg-donut{position:relative;width:90px;height:90px;flex-shrink:0}
.wg-donut svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.wg-donut .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.wg-donut .lbl b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.wg-donut .lbl small{font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:1px}

/* LED */
.wg-led{display:inline-block;width:14px;height:14px;border-radius:50%;flex-shrink:0;position:relative;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5) 0%,transparent 30%),radial-gradient(circle,#22c55e,#15803d);
  box-shadow:0 0 10px #22c55e,inset 0 0 4px rgba(0,0,0,.4)}
.wg-led.lg{width:22px;height:22px;box-shadow:0 0 16px currentColor,inset 0 0 6px rgba(0,0,0,.5)}
.wg-led.red{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5) 0%,transparent 30%),radial-gradient(circle,#ef4444,#991b1b);box-shadow:0 0 10px #ef4444,inset 0 0 4px rgba(0,0,0,.4);animation:wg-breathe 1s infinite}
.wg-led.amber{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5) 0%,transparent 30%),radial-gradient(circle,#f59e0b,#a16207);box-shadow:0 0 10px #f59e0b,inset 0 0 4px rgba(0,0,0,.4)}
.wg-led.blue{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5) 0%,transparent 30%),radial-gradient(circle,#3b82f6,#1e3a8a);box-shadow:0 0 10px #3b82f6,inset 0 0 4px rgba(0,0,0,.4)}
.wg-led.violet{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5) 0%,transparent 30%),radial-gradient(circle,#a78bfa,#6d28d9);box-shadow:0 0 10px #a78bfa,inset 0 0 4px rgba(0,0,0,.4)}
.wg-led.off{background:radial-gradient(circle,#1e293b,#0f172a);box-shadow:inset 0 0 4px rgba(0,0,0,.6)}

/* mini area chart */
.wg-spark{width:100%;height:36px;display:block;margin-top:6px}
.wg-area{width:100%;height:60px;display:block}
.wg-area-wrap{margin-top:6px;border-radius:6px;background:linear-gradient(180deg,rgba(34,211,238,.05),transparent);border:1px solid var(--line);overflow:hidden;flex:1;min-height:0}

/* glass cells (master+quad) */
.wg-quad{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}
.wg-quad .cell{
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line-2);border-radius:6px;padding:6px 8px;backdrop-filter:blur(6px);text-align:center
}
.wg-quad .cell .l{font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.wg-quad .cell .v{font-size:12px;font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums}

/* stacked rows */
.wg-rows{display:flex;flex-direction:column;gap:0;margin-top:4px;flex:1;min-height:0}
.wg-rows .row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line-2);min-height:0}
.wg-rows .row:last-child{border-bottom:none}
.wg-rows .row .lbl{font-size:10.5px;color:var(--muted-2);min-width:50px;font-weight:600}
.wg-rows .row .bar{flex:1;height:6px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;position:relative}
.wg-rows .row .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#22d3ee,#a78bfa)}
.wg-rows .row .val{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}

/* alarm card */
.wg-alarm{padding:10px 12px;border-radius:9px;border:1px solid;display:flex;gap:10px;align-items:flex-start;flex:1;position:relative;overflow:hidden}
.wg-alarm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:currentColor}
.wg-alarm.red{background:rgba(239,68,68,.08);color:#fca5a5;border-color:rgba(239,68,68,.25)}
.wg-alarm.amber{background:rgba(245,158,11,.08);color:#fcd34d;border-color:rgba(245,158,11,.25)}
.wg-alarm.green{background:rgba(34,197,94,.08);color:#86efac;border-color:rgba(34,197,94,.25)}
.wg-alarm.blue{background:rgba(96,165,250,.08);color:#93c5fd;border-color:rgba(96,165,250,.25)}
.wg-alarm .ic-big{width:28px;height:28px;border-radius:50%;background:currentColor;color:#070b14;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;box-shadow:0 0 12px currentColor}
.wg-alarm .col{flex:1;min-width:0}
.wg-alarm .col b{display:block;color:inherit;font-size:12px;font-weight:700;letter-spacing:.3px;line-height:1.2}
.wg-alarm .col small{color:var(--muted-2);font-size:10.5px;display:block;margin-top:3px;line-height:1.3}

/* ============================================================
   CUSTOM MULTI-PARAM WIDGET
   Each .wg-c row is one parameter; display style per param.
   ============================================================ */
.wg-custom{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;overflow:auto;padding-right:2px}
.wg-c{padding:4px 0;border-bottom:1px dashed var(--line-2)}
.wg-c:last-child{border-bottom:none}
.wg-c .lbl{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.wg-c .val{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.2px}
.wg-c .val small{font-size:9px;color:var(--muted);font-weight:500;margin-left:1px}

.wg-c.value{display:flex;flex-direction:column;gap:2px}
.wg-c.value .row{display:flex;align-items:baseline;gap:4px}

.wg-c.bar .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;gap:6px}
.wg-c.bar .top .val{font-size:12px}

.wg-c.spark .top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.wg-c.spark .top .val{font-size:12px}
.wg-c.spark svg{width:100%;height:30px;display:block;margin-top:3px}

.wg-c.gauge{display:flex;align-items:center;gap:10px}
.wg-c.gauge svg{flex-shrink:0;filter:drop-shadow(0 0 4px currentColor)}
.wg-c.gauge .info{flex:1;min-width:0}
.wg-c.gauge .info .val{font-size:14px}

.wg-c.led-row{display:flex;align-items:center;gap:10px}
.wg-c.led-row .info{flex:1;min-width:0}
.wg-c.led-row .info .val{font-size:13px}

.wg-c.kv{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 0}
.wg-c.kv .lbl{color:var(--muted-2);font-size:11px;text-transform:none;letter-spacing:0;font-weight:500}
.wg-c.kv .val{font-size:13px}

/* status pill (text status) */
.wg-status{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:8px;text-align:center}
.wg-status .big-text{font-size:20px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;line-height:1.1;text-shadow:0 0 12px currentColor}
.wg-status .big-text.green{color:#86efac}
.wg-status .big-text.red{color:#fca5a5}
.wg-status .big-text.amber{color:#fcd34d}
.wg-status .sub-text{font-size:11px;color:var(--muted)}

/* ===== designer.css ===== */
/* ============================================================
   Wiman Widget Editor — Designer (full-screen widget composer)
   ============================================================ */
.designer{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  background:
    radial-gradient(900px 500px at 0% 0%,rgba(34,211,238,.08),transparent 60%),
    radial-gradient(900px 500px at 100% 100%,rgba(167,139,250,.08),transparent 60%),
    #050811;
  color:var(--ink);
}
.designer[hidden]{display:none}

/* ==== top bar ==== */
.dz-top{
  flex-shrink:0;display:grid;grid-template-columns:280px 1fr 280px;align-items:center;gap:14px;
  padding:0 14px;height:54px;
  background:linear-gradient(180deg,rgba(10,21,48,.95),rgba(7,11,20,.95));
  border-bottom:1px solid var(--line);position:relative
}
.dz-top::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.6),rgba(167,139,250,.6),transparent)}
.dz-brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.dz-brand .logo{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#22d3ee,#7c3aed);box-shadow:0 0 10px rgba(34,211,238,.5)}
.dz-brand b{background:linear-gradient(135deg,#22d3ee 20%,#a78bfa 80%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.dz-center{display:flex;align-items:center;justify-content:center;gap:12px}
.dz-center input{background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--ink);border-radius:7px;padding:6px 12px;font-size:13px;font-weight:600;text-align:center;min-width:280px}
.dz-center input:focus{outline:none;border-color:rgba(34,211,238,.4)}
.dz-meta{font-size:11px;color:var(--muted);letter-spacing:.4px}
.dz-meta b{color:var(--ink-2);font-weight:700}
.dz-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.dz-actions .sep{width:1px;height:18px;background:var(--line-2);margin:0 4px}
.dz-toggle{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);padding:5px 8px;border:1px solid var(--line-2);border-radius:6px;background:rgba(255,255,255,.03);cursor:pointer}
.dz-toggle:hover{color:var(--ink-2);background:rgba(255,255,255,.06)}
.dz-toggle input{margin:0}

/* ==== body grid ==== */
.dz-body{
  flex:1;display:grid;
  grid-template-columns:220px 1fr 280px;
  overflow:hidden;
}

/* ==== palette ==== */
.dz-palette{
  background:rgba(10,21,40,.5);border-right:1px solid var(--line);
  padding:10px;overflow-y:auto;backdrop-filter:blur(6px);display:flex;flex-direction:column
}
.dz-palette h4{margin:0 0 8px;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.dz-pal-head{display:flex;flex-direction:column;gap:5px;margin-bottom:8px;flex-shrink:0}
.dz-pal-head h4{margin:0}
.dz-pal-head input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--ink);
  border-radius:6px;padding:5px 9px;font-size:11.5px}
.dz-pal-head input:focus{outline:none;border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.06)}
.dz-pal-list{flex:1;overflow-y:auto;padding-right:2px;margin-bottom:8px}
.dz-pal-cat{margin-bottom:8px}
.dz-pal-cat h5{
  margin:8px 4px 5px;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-2);font-weight:700;
  display:flex;align-items:center;gap:6px;padding:0 4px
}
.dz-pal-cat h5 .dz-pal-n{
  background:rgba(255,255,255,.06);color:var(--muted);padding:1px 6px;border-radius:999px;
  font-size:9px;font-weight:700;letter-spacing:.3px
}
.dz-pal-empty{padding:20px 8px;text-align:center;color:var(--muted-2);font-size:11px;font-style:italic}

/* user symbols category — highlighted with gold accent */
.dz-pal-symbols{
  background:linear-gradient(135deg,rgba(250,204,21,.06),rgba(34,211,238,.04));
  border:1px solid rgba(250,204,21,.18);border-radius:8px;padding:5px 6px;margin-bottom:10px
}
.dz-pal-symbols h5{color:#fde047 !important}
.dz-pal-symbols h5 .dz-pal-n{background:rgba(250,204,21,.18) !important;color:#fde047 !important}
.dz-sym{position:relative}
.dz-sym .ic{background:linear-gradient(135deg,#facc15,#fb923c) !important;color:#070b14 !important;border-color:rgba(250,204,21,.5) !important}
.dz-sym .dz-sym-del{
  position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:3px;
  background:rgba(7,11,20,.6);color:var(--muted-2);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s
}
.dz-sym:hover .dz-sym-del{opacity:1}
.dz-sym .dz-sym-del:hover{background:rgba(239,68,68,.5);color:#fff}
.dz-layers-head{margin-top:6px !important;padding-top:8px;border-top:1px solid var(--line);flex-shrink:0}

.dz-add{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:6px 8px;margin-bottom:3px;border-radius:6px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink-2);
  font-size:11px;font-weight:600;letter-spacing:.2px;cursor:pointer;
  transition:all .12s ease;text-align:left
}
.dz-add:hover{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.3);transform:translateX(2px);color:#fff}
.dz-add .ic{
  width:28px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0a1124,#1a2540);border:1px solid var(--line-2);color:#67e8f9;flex-shrink:0;
  font-size:11px;font-family:'Courier New',monospace;font-weight:700
}
.dz-add .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* layer list */
.dz-layers{display:flex;flex-direction:column;gap:3px}
.dz-layer{
  display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:5px;cursor:pointer;
  background:rgba(255,255,255,.02);border:1px solid transparent;font-size:11px;color:var(--ink-2)
}
.dz-layer:hover{background:rgba(255,255,255,.06)}
.dz-layer.selected{background:rgba(34,211,238,.15);border-color:rgba(34,211,238,.35);color:#fff}
.dz-layer .ic-mini{font-size:11px;color:var(--muted);font-family:'Courier New',monospace;width:18px;text-align:center}
.dz-layer .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-layer .ord{font-size:9.5px;color:var(--muted-2);font-weight:700}

/* ==== canvas ==== */
.dz-canvas-wrap{display:flex;flex-direction:column;overflow:hidden;background:transparent}
.dz-canvas-rule{
  display:flex;justify-content:space-between;align-items:center;padding:7px 14px;
  background:rgba(7,11,20,.5);border-bottom:1px solid var(--line);
  font-size:10.5px;color:var(--muted-2);font-style:italic
}
.dz-canvas-rule b{color:var(--ink-2);font-weight:600;font-style:normal}
.dz-canvas-frame{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;
  background:
    radial-gradient(800px 400px at 50% 50%,rgba(34,211,238,.04),transparent 60%)}
.dz-canvas{
  position:relative;width:900px;max-width:100%;aspect-ratio:4/3;
  background:linear-gradient(180deg,rgba(15,24,48,.85),rgba(17,28,56,.85));
  border:1px solid rgba(34,211,238,.25);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(34,211,238,.1);
  overflow:hidden
}
.dz-grid-overlay{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(0deg,rgba(34,211,238,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.05) 1px,transparent 1px);
  background-size:calc(100%/24) calc(100%/16);
  opacity:.5;z-index:1
}
.dz-canvas.no-grid .dz-grid-overlay{display:none}

/* background image layer — sits behind everything */
.dz-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center;
  background-color:transparent;transition:opacity .2s ease
}
.dz-bg.empty{background-image:none !important}

/* drop-target overlay specifically for image drop */
.dz-canvas.dz-img-target::before{
  content:"▥  Drop image to set as background";
  position:absolute;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,211,238,.12);border:3px dashed #22d3ee;border-radius:14px;
  color:#67e8f9;font-size:18px;font-weight:700;letter-spacing:.5px;
  pointer-events:none;
  box-shadow:0 0 30px rgba(34,211,238,.4) inset
}

/* BG popover */
.dz-bg-pop{
  position:fixed;z-index:250;
  background:linear-gradient(180deg,rgba(15,24,48,.97),rgba(17,28,56,.97));
  border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 14px 36px rgba(0,0,0,.6),0 0 0 1px rgba(34,211,238,.15);
  padding:14px;backdrop-filter:blur(14px);
  width:300px;animation:dz-ctx-pop .15s ease-out
}
.dz-bg-pop h5{margin:0 0 10px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#67e8f9;font-weight:700}
.dz-bg-pop .preview{
  width:100%;height:120px;border:1px dashed var(--line-2);border-radius:6px;
  background:#06101e center/contain no-repeat;display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);font-size:11px;margin-bottom:10px;overflow:hidden
}
.dz-bg-pop .preview.has-img{border-style:solid;border-color:rgba(34,211,238,.3)}
.dz-bg-pop .row{display:flex;gap:6px;align-items:center;margin-bottom:7px}
.dz-bg-pop .row label{font-size:10.5px;color:var(--muted);min-width:60px;font-weight:600}
.dz-bg-pop input[type=range]{flex:1}
.dz-bg-pop select{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);
  border-radius:5px;padding:4px 7px;font-size:11.5px;font-family:inherit}
.dz-bg-pop .pick-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px}
.dz-bg-pop .pick-btn{
  padding:7px;border-radius:6px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);
  color:var(--ink-2);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit
}
.dz-bg-pop .pick-btn:hover{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.3);color:#fff}
.dz-bg-pop .pick-btn.primary{background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(167,139,250,.15));border-color:rgba(34,211,238,.4);color:#67e8f9}
.dz-bg-pop .pick-btn.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#fca5a5}
.dz-bg-pop .pick-btn.danger:hover{background:rgba(239,68,68,.22)}
.dz-bg-pop .opacity-val{color:#67e8f9;font-weight:700;font-variant-numeric:tabular-nums;min-width:32px;text-align:right;font-size:11px}
.dz-bg-pop .hint{font-size:10px;color:var(--muted-2);font-style:italic;margin:6px 0 0;text-align:center;line-height:1.4}

/* ==== elements on canvas ==== */
.dz-el{
  position:absolute;border:1px dashed transparent;border-radius:4px;
  cursor:move;user-select:none;overflow:hidden;
  transition:border-color .15s ease;
}
.dz-el:hover{border-color:rgba(34,211,238,.4)}
.dz-el.selected{border-color:#22d3ee;border-style:solid;box-shadow:0 0 0 1px #22d3ee,0 0 14px rgba(34,211,238,.3)}
.dz-el.dragging{cursor:grabbing;opacity:.85}

/* resize handles (only on selected) */
.dz-el .rh{
  position:absolute;width:10px;height:10px;background:#22d3ee;border:1.5px solid #0a1124;border-radius:50%;
  box-shadow:0 0 6px rgba(34,211,238,.6);display:none;z-index:10
}
.dz-el.selected .rh{display:block}
.dz-el .rh.nw{top:-5px;left:-5px;cursor:nwse-resize}
.dz-el .rh.n {top:-5px;left:50%;margin-left:-5px;cursor:ns-resize}
.dz-el .rh.ne{top:-5px;right:-5px;cursor:nesw-resize}
.dz-el .rh.e {top:50%;right:-5px;margin-top:-5px;cursor:ew-resize}
.dz-el .rh.se{bottom:-5px;right:-5px;cursor:nwse-resize}
.dz-el .rh.s {bottom:-5px;left:50%;margin-left:-5px;cursor:ns-resize}
.dz-el .rh.sw{bottom:-5px;left:-5px;cursor:nesw-resize}
.dz-el .rh.w {top:50%;left:-5px;margin-top:-5px;cursor:ew-resize}

/* element-type styling (inside canvas — and same applied at smaller scale on dashboard) */
.dz-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}

/* element renderer styles — also used at smaller scale on dashboard canvas */
.el-label{width:100%;line-height:1.1;letter-spacing:.2px}
.el-value{width:100%;display:flex;align-items:baseline;gap:4px;line-height:1;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.3px}
.el-value .u{color:var(--muted);font-size:.45em;font-weight:500;margin-left:2px}
.el-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;line-height:1}
.el-bar{width:100%;height:100%;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;position:relative}
.el-bar > i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--teal),var(--violet));box-shadow:0 0 6px rgba(34,211,238,.3);transition:width .4s ease}
.el-bar.green > i{background:linear-gradient(90deg,#22c55e,#86efac)}
.el-bar.amber > i{background:linear-gradient(90deg,#f59e0b,#fcd34d)}
.el-bar.red > i{background:linear-gradient(90deg,#ef4444,#fca5a5)}
.el-bar.violet > i{background:linear-gradient(90deg,#a78bfa,#c4b5fd)}
.el-bar.blue > i{background:linear-gradient(90deg,#3b82f6,#93c5fd)}
.el-bar.yellow > i{background:linear-gradient(90deg,#facc15,#fde047)}
.el-bar.pink > i{background:linear-gradient(90deg,#ec4899,#f9a8d4)}
.el-gauge{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el-gauge svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px currentColor)}
/* smooth live transitions — only effective with in-place DOM patching (liveTick) */
.el-gauge svg path,
.el-ring svg circle{transition:stroke-dashoffset .7s cubic-bezier(.22,.61,.36,1)}
.el-gauge svg line{transition:x2 .7s cubic-bezier(.22,.61,.36,1),y2 .7s cubic-bezier(.22,.61,.36,1)}
.el-bullet .actual{transition:width .7s cubic-bezier(.22,.61,.36,1)}
.el-rangebar .pin{transition:left .7s cubic-bezier(.22,.61,.36,1)}
.wg-el-host .el-value span,
.dz-content .el-value span{transition:color .3s ease}
.el-spark{width:100%;height:100%;display:block}
.el-led{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el-led .dot{width:80%;height:80%;max-width:30px;max-height:30px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),transparent 30%),radial-gradient(circle,currentColor,#0a1124);
  box-shadow:0 0 14px currentColor,inset 0 0 6px rgba(0,0,0,.5)}
.el-divider{width:100%;height:1px;background:currentColor;opacity:.4;margin:auto 0}
.el-pill{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el-pill > span{padding:3px 10px;border-radius:999px;font-size:.7em;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:currentColor;color:#070b14;box-shadow:0 0 10px currentColor}
.el-box{width:100%;height:100%;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:6px;backdrop-filter:blur(4px)}

/* ==== props panel ==== */
.dz-props{
  background:rgba(10,21,40,.5);border-left:1px solid var(--line);
  padding:14px;overflow-y:auto;backdrop-filter:blur(6px);
}
.dz-props h4{margin:0 0 10px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.dz-prop-body{display:flex;flex-direction:column;gap:14px}
.dz-empty{font-size:12px;color:var(--muted);line-height:1.55}
.dz-empty ul{margin:8px 0 0;padding-left:18px;color:var(--muted-2);font-size:11px}
.dz-empty ul li{margin-top:3px}
.dz-empty b{color:var(--ink-2)}

.dz-section{padding-bottom:12px;border-bottom:1px solid var(--line)}
.dz-section:last-child{border-bottom:none}
.dz-section h5{margin:0 0 8px;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:700}
.dz-section .prop{margin-bottom:7px}
.dz-section .prop label{display:block;font-size:10px;color:var(--muted);margin-bottom:3px;font-weight:600}
.dz-section .prop input[type=text],.dz-section .prop input[type=number],.dz-section .prop select,.dz-section .prop textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);
  border-radius:5px;padding:4px 8px;font-size:11.5px
}
.dz-section .prop input:focus,.dz-section .prop select:focus{outline:none;border-color:rgba(34,211,238,.4)}
.dz-section .row4{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.dz-section .row4 input{width:100%}

/* small color grid */
.dz-section .color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.dz-section .color-grid .sw{width:100%;aspect-ratio:1;border-radius:4px;cursor:pointer;border:2px solid transparent;position:relative}
.dz-section .color-grid .sw.on{border-color:#fff;box-shadow:0 0 0 1px #0a1124,0 0 6px currentColor}
.dz-section .color-grid .sw.teal{background:#22d3ee;color:#22d3ee}
.dz-section .color-grid .sw.green{background:#22c55e;color:#22c55e}
.dz-section .color-grid .sw.amber{background:#f59e0b;color:#f59e0b}
.dz-section .color-grid .sw.red{background:#ef4444;color:#ef4444}
.dz-section .color-grid .sw.violet{background:#a78bfa;color:#a78bfa}
.dz-section .color-grid .sw.blue{background:#60a5fa;color:#60a5fa}
.dz-section .color-grid .sw.pink{background:#ec4899;color:#ec4899}
.dz-section .color-grid .sw.yellow{background:#facc15;color:#facc15}
.dz-section .color-grid .sw.ink{background:#e6edf7;color:#e6edf7}
.dz-section .color-grid .sw.muted{background:#8a99b6;color:#8a99b6}

/* fontsize chip */
.dz-fz{display:flex;gap:3px}
.dz-fz button{flex:1;padding:4px 6px;border-radius:5px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink-2);font-size:10.5px;cursor:pointer;font-weight:600}
.dz-fz button.on{background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(167,139,250,.15));color:#fff;border-color:rgba(34,211,238,.4)}

/* element action buttons */
.dz-el-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}
.dz-el-actions button{padding:6px;border-radius:5px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--ink-2);font-size:11px;font-weight:600;cursor:pointer}
.dz-el-actions button:hover{background:rgba(255,255,255,.1)}
.dz-el-actions .del{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#fca5a5}
.dz-el-actions .del:hover{background:rgba(239,68,68,.22)}

/* ==== dashboard host (the rendered widget) ==== */
.wg-canvas{
  position:relative;width:100%;height:100%;flex:1;min-height:0;
  margin-top:4px;
}
.wg-canvas .wg-el-host{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* full-bleed variant used by Designer widgets on the dashboard (no header/margin) */
.wg-canvas-bleed{margin-top:0;height:100%;border-radius:inherit}

/* ============================================================
   New element types — visual styles
   ============================================================ */
@keyframes wg-wave-l { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes spin-cw   { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes blink-1s  { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes rotate-beacon{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* kv */
.el-kv{width:100%;height:100%;display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:0 4px;line-height:1.1}
.el-kv .lbl{font-size:.65em;text-transform:uppercase;letter-spacing:.5px;font-weight:600;color:var(--muted)}
.el-kv .val{font-size:1em;font-weight:700;font-variant-numeric:tabular-nums}
.el-kv .val small{font-size:.7em;color:var(--muted);font-weight:500;margin-left:1px}

/* delta */
.el-delta{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:.78em;font-weight:700;padding:2px 6px;border-radius:5px}
.el-delta.up{color:#86efac;background:rgba(34,197,94,.12)}
.el-delta.dn{color:#fca5a5;background:rgba(239,68,68,.12)}
.el-delta.fl{color:var(--muted);background:rgba(255,255,255,.05)}

/* chip */
.el-chip{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el-chip > span{padding:2px 10px;border-radius:999px;font-size:.7em;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:currentColor;color:#070b14;box-shadow:0 0 10px currentColor}

/* vbar */
.el-vbar{position:relative;width:100%;height:100%;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.el-vbar i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#22d3ee,#a78bfa);
  box-shadow:0 0 6px rgba(34,211,238,.3);transition:height .4s ease}
.el-vbar.green i{background:linear-gradient(0deg,#22c55e,#86efac);box-shadow:0 0 6px rgba(34,197,94,.4)}
.el-vbar.amber i{background:linear-gradient(0deg,#f59e0b,#fcd34d);box-shadow:0 0 6px rgba(245,158,11,.4)}
.el-vbar.red i{background:linear-gradient(0deg,#ef4444,#fca5a5);box-shadow:0 0 6px rgba(239,68,68,.4)}
.el-vbar.violet i{background:linear-gradient(0deg,#a78bfa,#c4b5fd)}
.el-vbar.blue i{background:linear-gradient(0deg,#3b82f6,#93c5fd)}
.el-vbar.yellow i{background:linear-gradient(0deg,#facc15,#fde047)}
.el-vbar.pink i{background:linear-gradient(0deg,#ec4899,#f9a8d4)}

/* stepbar (segmented LED bar) */
.el-stepbar{width:100%;height:100%;display:flex;align-items:stretch;gap:2px}
.el-stepbar i{flex:1;background:rgba(255,255,255,.06);border-radius:2px}
.el-stepbar i.on{background:#86efac;box-shadow:0 0 5px #22c55e}
.el-stepbar i.on.g{background:linear-gradient(180deg,#86efac,#22c55e);box-shadow:0 0 5px #22c55e}
.el-stepbar i.on.y{background:linear-gradient(180deg,#fde047,#facc15);box-shadow:0 0 5px #facc15}
.el-stepbar i.on.r{background:linear-gradient(180deg,#fca5a5,#ef4444);box-shadow:0 0 6px #ef4444}

/* rangebar */
.el-rangebar{position:relative;width:100%;height:100%}
.el-rangebar .track{position:absolute;left:0;right:0;top:50%;height:7px;margin-top:-3.5px;
  background:linear-gradient(90deg,#3b82f6,#22d3ee 25%,#22c55e 50%,#facc15 70%,#ef4444);border-radius:4px}
.el-rangebar .pin{position:absolute;top:50%;width:3px;height:140%;margin-top:-70%;margin-left:-1.5px;
  background:#fff;box-shadow:0 0 0 2px #0d1424,0 0 6px #fff;border-radius:1.5px}

/* bullet chart */
.el-bullet{position:relative;width:100%;height:100%}
.el-bullet .track{position:absolute;inset:0;background:rgba(255,255,255,.05);border-radius:4px}
.el-bullet .actual{position:absolute;left:0;top:25%;bottom:25%;background:linear-gradient(90deg,#22d3ee,#a78bfa);
  border-radius:3px;box-shadow:0 0 6px rgba(34,211,238,.3)}
.el-bullet .actual.green{background:linear-gradient(90deg,#22c55e,#86efac)}
.el-bullet .actual.amber{background:linear-gradient(90deg,#f59e0b,#fcd34d)}
.el-bullet .actual.red{background:linear-gradient(90deg,#ef4444,#fca5a5)}
.el-bullet .actual.violet{background:linear-gradient(90deg,#a78bfa,#c4b5fd)}
.el-bullet .target{position:absolute;top:0;bottom:0;width:2.5px;background:#fcd34d;box-shadow:0 0 5px #facc15;margin-left:-1.25px}

/* ring & donut */
.el-ring{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el-ring svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px currentColor)}

/* battery */
.el-battery{width:100%;height:100%;display:flex;align-items:center;gap:3px;color:#86efac}
.el-battery .cell{position:relative;flex:1;height:80%;border:2px solid currentColor;border-radius:3px;overflow:hidden}
.el-battery .cell .fill{position:absolute;inset:1px;background:currentColor;border-radius:1px;transition:width .4s ease}
.el-battery .tip{width:3px;height:50%;background:currentColor;border-radius:0 1.5px 1.5px 0;flex-shrink:0}
.el-battery.low{color:#fca5a5}.el-battery.med{color:#fcd34d}

/* tank with wave */
.el-tank{position:relative;width:100%;height:100%;border:2px solid currentColor;border-radius:4px 4px 8px 8px;
  overflow:hidden;background:#0a1124;box-shadow:0 0 8px currentColor inset}
.el-tank .fill{position:absolute;left:-50%;right:-50%;bottom:0;background:currentColor;opacity:.7;transition:height .4s ease}
.el-tank .wave{position:absolute;top:-9px;left:0;width:200%;height:12px;animation:wg-wave-l 5s linear infinite;z-index:1}

/* area / bar spark */
.el-barspark{display:flex;align-items:flex-end;gap:1.5px;width:100%;height:100%}
.el-barspark i{flex:1;background:currentColor;border-radius:1px;min-height:1px;box-shadow:0 0 3px currentColor;opacity:.9}

/* traffic light */
.el-traffic{width:100%;height:100%;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:2px}
.el-traffic .lite{width:70%;flex:1;border-radius:50%;background:rgba(255,255,255,.04);box-shadow:inset 0 0 4px rgba(0,0,0,.5)}
.el-traffic .lite.r.on{background:radial-gradient(circle at 30% 30%,#fff8 0%,transparent 30%),radial-gradient(circle,#ef4444,#7f1d1d);
  box-shadow:0 0 10px #ef4444,inset 0 0 4px rgba(0,0,0,.5);animation:blink-1s .8s infinite}
.el-traffic .lite.y.on{background:radial-gradient(circle at 30% 30%,#fff8 0%,transparent 30%),radial-gradient(circle,#facc15,#854d0e);
  box-shadow:0 0 10px #facc15,inset 0 0 4px rgba(0,0,0,.5)}
.el-traffic .lite.g.on{background:radial-gradient(circle at 30% 30%,#fff8 0%,transparent 30%),radial-gradient(circle,#22c55e,#14532d);
  box-shadow:0 0 10px #22c55e,inset 0 0 4px rgba(0,0,0,.5)}

/* beacon */
.el-beacon{position:relative;width:100%;height:100%}
.el-beacon .dome{position:absolute;inset:15%;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff8 0%,transparent 30%),radial-gradient(circle,currentColor,rgba(0,0,0,.5));
  box-shadow:0 0 14px currentColor,inset 0 0 6px rgba(255,255,255,.3)}
.el-beacon .ray{position:absolute;inset:0;animation:rotate-beacon 1.5s linear infinite}
.el-beacon .ray::before,.el-beacon .ray::after{content:"";position:absolute;left:50%;top:50%;
  width:120%;height:5px;margin-top:-2.5px;margin-left:-60%;
  background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.55}
.el-beacon .ray::after{transform:rotate(90deg)}

/* toggle */
.el-toggle{width:100%;height:100%;display:flex;align-items:center;padding:2px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1.5px solid var(--line-2);transition:all .25s ease}
.el-toggle .slider{height:100%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.5);transition:all .25s ease;flex-shrink:0}
.el-toggle.on{background:currentColor;border-color:currentColor;justify-content:flex-end}
.el-toggle.on .slider{background:#fff;box-shadow:0 0 6px #fff}

/* pipe */
.el-pipe{width:100%;height:100%;background:linear-gradient(180deg,#1a2540,#0f1830,#1a2540);
  border:1px solid #2a3a5a;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 6px rgba(0,0,0,.5)}
.el-pipe svg{display:block;width:100%;height:100%}

/* valve */
.el-valve{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el-valve .body{width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#3a4768,#1a2540);border:2px solid currentColor;
  display:flex;align-items:center;justify-content:center;font-size:.5em;font-weight:700;font-family:'Courier New',Consolas,monospace;letter-spacing:.5px}
.el-valve.open{color:#86efac}
.el-valve.closed{color:#fca5a5}
.el-valve.closed .body{box-shadow:0 0 6px #ef4444}

/* motor / fan */
.el-motor{width:100%;height:100%;display:flex;align-items:center;justify-content:center;line-height:1;font-size:3em}
.el-motor .gear{display:inline-block}
.el-motor.running .gear{animation:spin-cw 2s linear infinite}
.el-motor.stopped{color:var(--muted-2)}

.el-fan{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el-fan svg{display:block;width:100%;height:100%}
.el-fan.running .blades{transform-origin:32px 32px;animation:spin-cw 1.2s linear infinite}
.el-fan.stopped{color:var(--muted-2)}

/* thermometer */
.el-thermo{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:6%}
.el-thermo .tube{position:relative;width:32%;flex:1;background:rgba(255,255,255,.04);border:1.5px solid currentColor;
  border-radius:50% 50% 0 0;overflow:hidden;box-shadow:0 0 6px currentColor inset}
.el-thermo .tube .fill{position:absolute;left:0;right:0;bottom:0;background:currentColor;transition:height .4s ease}
.el-thermo .bulb{width:55%;aspect-ratio:1;border-radius:50%;background:currentColor;margin-top:-15%;
  border:1.5px solid currentColor;box-shadow:0 0 8px currentColor}

/* clock & timestamp */
.el-clock{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:'Courier New',Consolas,monospace;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:1.5px;font-size:.95em;text-shadow:0 0 6px currentColor}
.el-timestamp{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:.85em;color:currentColor;font-style:italic;letter-spacing:.3px}

/* image */
.el-image{display:block;background:rgba(255,255,255,.03);border-radius:4px}
.el-image-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);font-size:.7em;border:1px dashed var(--line-2);border-radius:4px;background:rgba(255,255,255,.02)}

/* ============================================================
   INDUSTRIAL — pipes, valves, pumps, tanks, heat, P&ID
   ============================================================ */
.el-pipe-v{width:100%;height:100%;background:linear-gradient(90deg,#1a2540,#0f1830,#1a2540);
  border:1px solid #2a3a5a;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 6px rgba(0,0,0,.5)}
.el-pipe-v svg{display:block;width:100%;height:100%}
.el-pipe-shape{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el-pipe-shape svg{display:block;width:100%;height:100%}

/* valves */
.el-ball-valve,.el-gate-valve,.el-check-valve,.el-control-valve,.el-solenoid{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center
}
.el-ball-valve svg,.el-gate-valve svg,.el-check-valve svg,.el-control-valve svg,.el-solenoid svg{
  display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px currentColor)
}
.el-ball-valve.closed{color:#fca5a5}
.el-ball-valve.open{color:#86efac}
.el-gate-valve.closed{color:#fca5a5}
.el-gate-valve.open{color:#86efac}
.el-solenoid.off{color:#475569}
.el-solenoid.on{color:#93c5fd}

/* pumps & rotating */
.el-pump,.el-pump-recip,.el-blower,.el-compressor,.el-agitator,.el-conveyor{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center
}
.el-pump svg,.el-pump-recip svg,.el-blower svg,.el-compressor svg,
.el-agitator svg,.el-conveyor svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px currentColor)}

.el-pump.running .impeller{transform-origin:28px 36px;animation:spin-cw 1.2s linear infinite}
.el-pump.stopped .impeller{opacity:.4}
.el-pump.stopped{color:var(--muted-2)}

.el-pump-recip.running .piston{animation:piston-x 1s linear infinite}
.el-pump-recip.running .crank-arm{transform-origin:52px 20px;animation:crank-r 1s linear infinite}
.el-pump-recip.stopped{color:var(--muted-2)}
@keyframes piston-x{0%{transform:translateX(0)} 50%{transform:translateX(8px)} 100%{transform:translateX(0)}}
@keyframes crank-r{from{transform:rotate(0)} to{transform:rotate(360deg)}}

.el-blower.running .impeller{transform-origin:32px 32px;animation:spin-cw .7s linear infinite}
.el-blower.stopped{color:var(--muted-2)}

.el-compressor.running .impeller{transform-origin:32px 23px;animation:spin-cw .8s linear infinite}
.el-compressor.stopped{color:var(--muted-2)}

.el-agitator.running .impeller{transform-origin:32px 46px;animation:spin-cw 1.2s linear infinite}
.el-agitator.stopped{color:var(--muted-2)}

.el-conveyor.stopped{color:var(--muted-2)}
.el-conveyor.stopped .box,.el-conveyor.stopped svg line[stroke-dasharray]{animation-play-state:paused}

/* tanks & vessels */
.el-htank,.el-pvessel,.el-hopper{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center
}
.el-htank svg,.el-pvessel svg,.el-hopper svg{
  display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px currentColor)
}

/* heat */
.el-hxchg,.el-cooler,.el-boiler{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center
}
.el-hxchg svg,.el-cooler svg,.el-boiler svg{
  display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px currentColor)
}
.el-boiler.running .flame{animation:blink-1s 0.8s infinite}
.el-boiler.stopped{color:var(--muted-2)}
.el-boiler.stopped .flame{opacity:.3;animation:none}

/* P&ID instrument bubble */
.el-pid-inst{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.el-pid-inst svg{display:block;height:80%;filter:drop-shadow(0 0 5px currentColor)}
.el-pid-inst .pid-val{
  font-size:.65em;font-weight:700;font-variant-numeric:tabular-nums;color:currentColor;
  background:rgba(0,0,0,.4);padding:1px 5px;border-radius:3px;letter-spacing:.3px;
  border:1px solid currentColor;line-height:1.2
}

/* ============================================================
   CUSTOM COLOR PICKER + APPEARANCE CONTROLS (props panel)
   ============================================================ */
.custom-color-row{display:flex;align-items:center;gap:7px;margin-top:7px}
.custom-color-row label{min-width:48px;font-size:10px;color:var(--muted);margin:0}
.custom-color-row input[type=color]{
  width:34px;height:26px;padding:0;border:1px solid var(--line-2);border-radius:5px;
  background:transparent;cursor:pointer;flex-shrink:0
}
.custom-color-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.custom-color-row input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}
.custom-color-row input[type=text]{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--ink);border-radius:5px;padding:4px 7px;font-size:11px;font-family:'Courier New',monospace}
.dz-props input[type=range]{accent-color:#22d3ee;height:4px}

/* ============================================================
   MULTI-SELECT + ALIGNMENT GUIDES
   ============================================================ */
.dz-el.selected{border-color:rgba(34,211,238,.7);border-style:dashed;box-shadow:none}
.dz-el.selected.primary{border-color:#22d3ee;border-style:solid;box-shadow:0 0 0 1px #22d3ee,0 0 14px rgba(34,211,238,.3)}

/* alignment guides — red lines that appear while dragging */
.dz-guide{
  position:absolute;background:#ef4444;pointer-events:none;z-index:60;
  box-shadow:0 0 6px rgba(239,68,68,.7);opacity:.85
}
.dz-guide.v{top:0;bottom:0;width:1px}
.dz-guide.h{left:0;right:0;height:1px}

/* align button grid in multi-select props */
.dz-align-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.dz-align-grid button{
  padding:6px 4px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);
  color:var(--ink-2);border-radius:5px;font-size:10.5px;font-weight:600;cursor:pointer;
  letter-spacing:.2px;font-family:inherit
}
.dz-align-grid button:hover{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.3);color:#fff}

/* ============================================================
   ANIMATION RULES — runtime effects on elements
   ============================================================ */
@keyframes dz-rule-blink { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.dz-rule-blink { animation: dz-rule-blink .8s ease-in-out infinite }

/* in designer: hidden elements are dimmed (not fully hidden) so you can still edit them */
.dz-el.dz-rule-hidden { opacity: .15; outline: 1px dashed var(--muted-2); outline-offset: -2px }
.dz-el.dz-rule-hidden::after {
  content: "rule: hidden"; position: absolute; bottom: 2px; left: 4px;
  font-size: 9px; color: var(--muted-2); font-weight: 700; letter-spacing: .4px;
  background: rgba(7,11,20,.8); padding: 1px 5px; border-radius: 3px; pointer-events: none
}

/* ============ rule-row (animation rule editor) ============ */
.rule-row{
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 9px;
  margin-bottom:6px;
}
.rule-row:hover{border-color:var(--line-2);background:rgba(255,255,255,.04)}
.rule-row .rule-head{
  display:flex;align-items:center;gap:6px;
  margin:-1px -2px 7px;padding:0 2px 5px;
  border-bottom:1px dashed var(--line-2);
}
.rule-row .rule-num{
  font-size:9px;color:var(--muted-2);font-weight:700;letter-spacing:.4px;
  background:rgba(255,255,255,.06);padding:1px 5px;border-radius:3px;flex-shrink:0;
}
.rule-row .rule-desc{
  font-size:10.5px;color:var(--ink-2);font-family:'Courier New',Consolas,monospace;
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.2px
}
.rule-row .rule-del{
  width:20px;height:20px;border-radius:4px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);color:var(--ink-2);cursor:pointer;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s ease
}
.rule-row .rule-del:hover{background:rgba(239,68,68,.22);color:#fca5a5;border-color:rgba(239,68,68,.35)}

.rule-form{display:flex;flex-direction:column;gap:5px}
.rule-line{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap
}
.rule-line .rl-lbl{
  font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;
  min-width:32px;
}
.rule-line select,
.rule-line input{
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);
  border-radius:5px;padding:3px 6px;font-size:10.5px;
  font-family:inherit;flex:1;min-width:0
}
.rule-line .rl-tag{flex:2}
.rule-line .rl-op{flex:0 0 60px}
.rule-line .rl-val{flex:1;min-width:40px}
.rule-line .rl-prop{flex:1.5}
.rule-line .rl-eq{color:var(--muted-2);font-weight:700;padding:0 2px}
.rule-line .rl-result{flex:1.5;display:flex}
.rule-line .rl-result select,
.rule-line .rl-result input{width:100%}
.rule-line select:focus,.rule-line input:focus{outline:none;border-color:rgba(34,211,238,.4)}

/* dashboard host background (when widget has bgImage) */
.wg-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.wg-canvas{position:relative;width:100%;height:100%}
.wg-canvas .wg-el-host{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:2}

/* ============================================================
   GENERIC SVG ELEMENT — wraps any svg-based industrial symbol
   ============================================================ */
.el-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el-svg svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px currentColor)}
.el-svg.on{filter:none}
.el-svg.off{opacity:.4;color:var(--muted-2)}
.el-svg.on .icon{animation:dz-rule-blink .8s infinite}

/* busbar — solid colored block */
.el-busbar{width:100%;height:100%;background:currentColor;border-radius:2px;box-shadow:0 0 8px currentColor;opacity:.85}

/* wind turbine + AHU fan animations */
.el-svg .wt-blades{transform-origin:32px 36px}
.el-svg.running .wt-blades{animation:spin-cw 3s linear infinite}
.el-svg.running .ahu-fan{animation:spin-cw 1.5s linear infinite}
.el-svg.stopped .wt-blades,.el-svg.stopped .ahu-fan{animation:none}
.el-svg.stopped{color:var(--muted-2)}

/* gas alarm animation when active */
.el-svg.on{animation:dz-rule-blink .8s ease-in-out infinite}

/* callout (speech bubble) */
.el-callout{width:100%;height:100%;display:flex;align-items:flex-start;justify-content:flex-start;font-size:.8em;line-height:1.2}
.el-callout .bubble{
  background:rgba(255,255,255,.06);border:1.5px solid currentColor;border-radius:8px;
  padding:5px 9px;color:currentColor;font-weight:600;position:relative;width:75%;
  box-shadow:0 4px 12px rgba(0,0,0,.25)
}
.el-callout .bubble::after{
  content:"";position:absolute;left:18px;bottom:-8px;
  width:0;height:0;border:6px solid transparent;border-top-color:currentColor
}

/* sticky note */
.el-note{
  width:100%;height:100%;background:#facc15;color:#1f2937;
  border-radius:2px;padding:6px 8px;font-size:.7em;line-height:1.3;font-weight:500;
  box-shadow:2px 3px 8px rgba(0,0,0,.35), -1px -1px 0 rgba(0,0,0,.08) inset;
  overflow:hidden;border-bottom-right-radius:14px;
  position:relative
}
.el-note::after{
  content:"";position:absolute;bottom:0;right:0;width:14px;height:14px;
  background:linear-gradient(135deg,transparent 50%,#a16207 50%);opacity:.6
}

/* ============================================================
   PALETTE — drag-from-palette + favorites + recent
   ============================================================ */
.dz-add{cursor:grab}
.dz-add:active{cursor:grabbing}
.dz-add.dragging-from-pal{opacity:.5;transform:scale(.97)}

.dz-canvas.dz-drop-target{outline:2px dashed rgba(34,211,238,.55);outline-offset:-2px;
  box-shadow:0 0 24px rgba(34,211,238,.2) inset}
.dz-drop-marker{
  position:absolute;width:30px;height:30px;border-radius:50%;
  border:2px dashed #22d3ee;background:rgba(34,211,238,.15);
  pointer-events:none;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;color:#67e8f9;font-size:14px;font-weight:700;
  box-shadow:0 0 14px rgba(34,211,238,.4);z-index:50
}

/* ============================================================
   CONTEXT MENU — right-click on canvas
   ============================================================ */
.dz-ctx{
  position:fixed;z-index:300;min-width:180px;
  background:linear-gradient(180deg,rgba(15,24,48,.97),rgba(17,28,56,.97));
  border:1px solid var(--line-2);border-radius:9px;
  box-shadow:0 12px 32px rgba(0,0,0,.6),0 0 0 1px rgba(34,211,238,.15);
  padding:5px;backdrop-filter:blur(12px);
  font-size:12px;
  animation:dz-ctx-pop .12s ease-out
}
@keyframes dz-ctx-pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.dz-ctx button{
  display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;
  background:transparent;border:none;color:var(--ink-2);cursor:pointer;
  border-radius:5px;font-size:12px;font-weight:500;letter-spacing:.2px;text-align:left;
  font-family:inherit
}
.dz-ctx button:hover{background:rgba(34,211,238,.12);color:#fff}
.dz-ctx button .key{margin-left:auto;color:var(--muted-2);font-size:10px;font-family:Consolas,monospace}
.dz-ctx button.danger{color:#fca5a5}
.dz-ctx button.danger:hover{background:rgba(239,68,68,.2)}
.dz-ctx .sep{height:1px;background:var(--line);margin:4px 6px}
.dz-ctx .ic{width:14px;text-align:center;color:var(--muted)}

/* ============================================================
   GAUGE VARIANTS — extra styling on top of .el-gauge
   ============================================================ */
.el-manometer svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.el-manometer svg > circle:first-child{
  /* metallic bezel via gradient stroke */
  stroke:#5a6788
}
.el-compass{filter:drop-shadow(0 0 5px currentColor)}

/* ============================================================
   RECORD ANIMATION — banner + options popover
   ============================================================ */
.dz-rec-banner{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:9999;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
  padding:8px 18px;border-radius:999px;font-weight:700;font-size:12.5px;
  letter-spacing:.3px;display:flex;align-items:center;gap:8px;
  box-shadow:0 10px 32px rgba(239,68,68,.5),0 0 0 2px #0d1424
}
.dz-rec-banner .dot{
  width:10px;height:10px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.8);
  animation:dz-rec-blink .8s ease-in-out infinite
}
@keyframes dz-rec-blink{0%,100%{opacity:1}50%{opacity:.3}}
.dz-rec-banner b{font-variant-numeric:tabular-nums;font-weight:800}
.dz-rec-banner .rec-stop{
  margin-left:10px;padding:4px 12px;border-radius:999px;
  background:#fff;color:#dc2626;border:none;font-weight:800;font-size:11px;
  letter-spacing:.4px;cursor:pointer;font-family:inherit;text-transform:uppercase
}
.dz-rec-banner .rec-stop:hover{background:#fee2e2}
.dz-rec-banner .rec-stop:disabled{opacity:.6;cursor:wait;background:#fef3c7;color:#92400e}

.dz-rec-pop{
  position:fixed;z-index:250;width:320px;
  background:linear-gradient(180deg,rgba(15,24,48,.97),rgba(17,28,56,.97));
  border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 14px 36px rgba(0,0,0,.6),0 0 0 1px rgba(34,211,238,.15);
  padding:14px;backdrop-filter:blur(14px);
  animation:dz-ctx-pop .15s ease-out
}
.dz-rec-pop h5{margin:0 0 10px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#67e8f9;font-weight:700}
.dz-rec-pop .row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dz-rec-pop .row label{font-size:11px;color:var(--muted);min-width:80px;font-weight:600}
.dz-rec-pop select{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);
  border-radius:5px;padding:4px 7px;font-size:11.5px;font-family:inherit}
.dz-rec-pop .hint{font-size:10px;color:var(--muted-2);font-style:italic;margin:8px 0 10px;line-height:1.4}
.dz-rec-pop .hint b{color:#67e8f9;font-style:normal}
.dz-rec-pop .hint code{background:rgba(34,211,238,.1);color:#67e8f9;padding:1px 4px;border-radius:3px;font-size:10px}
.dz-rec-pop .rp-btns{display:grid;grid-template-columns:1fr 1.5fr;gap:6px}
.dz-rec-pop .btn{padding:7px 10px;border-radius:6px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink-2);font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.dz-rec-pop .btn:hover{background:rgba(255,255,255,.1)}
.dz-rec-pop .btn.primary{background:linear-gradient(135deg,rgba(239,68,68,.25),rgba(245,158,11,.15));border-color:rgba(239,68,68,.45);color:#fca5a5}
.dz-rec-pop .btn.primary:hover{background:linear-gradient(135deg,rgba(239,68,68,.4),rgba(245,158,11,.25));color:#fff;box-shadow:0 0 10px rgba(239,68,68,.3)}

/* "Open Designer" link on the canvas host (visible on the host card) */
.dz-open-btn{
  width:22px;height:22px;border-radius:5px;border:1px solid var(--line-2);
  background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(167,139,250,.15));
  color:#67e8f9;cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
.dz-open-btn:hover{background:linear-gradient(135deg,rgba(34,211,238,.3),rgba(167,139,250,.25));color:#fff}

/* trend popup over bound parameters */
.cw-trendable{ cursor:pointer; }
.cw-trend-ov{ position:fixed; inset:0; background:rgba(7,11,20,.62); z-index:3000; display:none; align-items:center; justify-content:center; }
.cw-trend-box{ background:#0f1830; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:16px 18px; width:min(92vw,780px); box-shadow:0 24px 60px -12px rgba(0,0,0,.6); }
.cw-trend-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:#e6edf7; font-weight:700; font-size:14px; gap:12px; }
.cw-trend-ranges{ display:flex; align-items:center; gap:4px; }
.cw-trend-ranges button[data-r]{ background:rgba(255,255,255,.06); color:#cbd5e1; border:1px solid rgba(255,255,255,.12); border-radius:5px; font-size:11px; padding:3px 9px; cursor:pointer; }
.cw-trend-ranges button[data-r].on{ background:#0d9488; color:#fff; border-color:#0d9488; }
.cw-trend-x{ background:none !important; border:0 !important; color:#94a3b8 !important; font-size:20px !important; cursor:pointer; margin-left:6px; padding:0 4px !important; }