/* LAN Control — Dashboard pictures (public/lan-viz.js, public/dash-hub.js). Tokens only, so every theme carries it. */
.lv { --lv-1:#3987e5; --lv-2:#d95926; --lv-3:#199e70; --lv-4:#c98500; --lv-5:#d55181; --lv-6:#008300; --lv-7:#9085e9;
  --lv-card:color-mix(in srgb, var(--surface) 92%, transparent); --lv-seq:var(--lv-1); display:flex; flex-direction:column; gap:16px; }
.lv a { color:inherit; text-decoration:none; }

/* cards */
.lv-card { position:relative; background:var(--lv-card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); min-width:0; overflow:hidden; }
.lv-card::before { content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--gold) 50%, transparent), transparent); opacity:.7; }
.lv-h { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:14px 18px 0; }
.lv-h h3 { margin:0; font:600 12px/1.2 Montserrat, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.lv-h .lv-sub { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-h a.lv-more { font-size:12px; color:var(--accent-text); white-space:nowrap; }
.lv-body { padding:12px 18px 16px; }
.lv-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:16px; }
.lv-grid > * { grid-column:span 12; }
@media (min-width: 1100px) {
  .lv-grid .c7 { grid-column:span 7; } .lv-grid .c5 { grid-column:span 5; } .lv-grid .c6 { grid-column:span 6; }
  .lv-grid .c4 { grid-column:span 4; } .lv-grid .c8 { grid-column:span 8; } .lv-grid .c3 { grid-column:span 3; }
}
@media (min-width: 760px) and (max-width: 1099px) { .lv-grid .c4, .lv-grid .c3, .lv-grid .c6 { grid-column:span 6; } }

/* hero: orb + health */
.lv-hero { min-height:380px; }
.lv-orb { position:relative; height:100%; min-height:380px; background:radial-gradient(90% 80% at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.lv-orb canvas { position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none; }
.lv-orb .lv-h { position:relative; z-index:1; }
.lv-live { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ok); }
.lv-live i { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 var(--ok); animation:lvPing 2s infinite; }
@keyframes lvPing { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); } 80%, 100% { box-shadow:0 0 0 9px transparent; } }
.lv-orb-leg { position:absolute; left:14px; bottom:12px; right:14px; z-index:1; display:flex; flex-wrap:wrap; gap:6px; pointer-events:none; }
.lv-orb-leg button { pointer-events:auto; display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border-radius:99px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter:blur(6px); color:var(--ink-2); font:inherit; font-size:12px; cursor:pointer; transition:border-color .2s, color .2s; }
.lv-orb-leg button:hover, .lv-orb-leg button.on { border-color:var(--line-2); color:var(--ink); }
@media (max-width: 700px) {
  .lv-orb { min-height:0; display:flex; flex-direction:column; }
  .lv-orb canvas { position:relative; inset:auto; height:320px; }
  .lv-orb-leg { position:static; padding:0 14px 14px; }
  .lv-feed { max-width:60%; }
}
.lv-orb-leg i { width:8px; height:8px; border-radius:50%; }
.lv-orb-leg b { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.lv-feed { position:absolute; right:14px; top:44px; z-index:1; display:flex; flex-direction:column; gap:5px; align-items:flex-end; pointer-events:none; max-width:46%; }
.lv-feed span { font-size:11.5px; padding:3px 9px; border-radius:99px; background:color-mix(in srgb, var(--bg) 75%, transparent); border:1px solid var(--line); color:var(--ink-2); animation:lvFeed 4.5s forwards; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.lv-feed span i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
@keyframes lvFeed { 0% { opacity:0; transform:translateY(-6px); } 10%, 75% { opacity:1; transform:none; } 100% { opacity:0; } }

.lv-health { display:grid; grid-template-columns:minmax(170px, 230px) minmax(0, 1fr); gap:18px; align-items:center; }
@media (max-width: 560px) { .lv-health { grid-template-columns:1fr; } }
.lv-rings { width:100%; max-width:240px; display:block; margin:0 auto; overflow:visible; }
.lv-rings .t { fill:none; stroke:var(--soft); }
.lv-rings .v { fill:none; stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i) * 90ms); }
.lv-rings.lv-anim:not(.in) .v { stroke-dashoffset:var(--len); }
.lv-rings .v.ok { stroke:var(--ok); } .lv-rings .v.warn { stroke:var(--warn); } .lv-rings .v.bad { stroke:var(--bad); }
.lv-rings g:hover .v { filter:drop-shadow(0 0 6px currentColor) brightness(1.15); }
.lv-rings .n { font:700 42px/1 Montserrat, sans-serif; fill:var(--ink); text-anchor:middle; letter-spacing:-.02em; }
.lv-rings .c { font-size:11px; letter-spacing:.14em; text-transform:uppercase; fill:var(--muted); text-anchor:middle; }
.lv-hl { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.lv-hl a { display:grid; grid-template-columns:10px minmax(0, 1fr) auto; gap:4px 10px; align-items:center; padding:6px 8px; border-radius:9px; transition:background .15s; }
.lv-hl a:hover { background:var(--hover); }
.lv-hl i { width:8px; height:8px; border-radius:50%; }
.lv-hl i.ok { background:var(--ok); } .lv-hl i.warn { background:var(--warn); } .lv-hl i.bad { background:var(--bad); }
.lv-hl b { font-weight:600; font-size:13px; color:var(--ink); }
.lv-hl em { font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; font-size:13px; }
.lv-hl em.ok { color:var(--ok); } .lv-hl em.warn { color:var(--warn); } .lv-hl em.bad { color:var(--bad); }
.lv-hl span { grid-column:2 / 4; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* KPI tiles */
.lv-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
@media (min-width: 1100px) { .lv-tiles { grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); } }
.lv-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
.lv-col > .lv-card { flex:none; }
.lv-col > .lv-card:last-child { flex:1; }
.lv-tile { position:relative; display:flex; flex-direction:column; gap:3px; padding:14px 16px 10px; background:var(--lv-card); border:1px solid var(--line); border-radius:14px; min-width:0; overflow:hidden; transition:border-color .2s, transform .2s; }
a.lv-tile:hover { border-color:var(--line-2); transform:translateY(-1px); }
.lv-tl { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-tv { display:flex; align-items:baseline; gap:10px; }
.lv-tv b { font:700 30px/1.05 Montserrat, sans-serif; letter-spacing:-.02em; color:var(--ink); }
.lv-ts { font-size:12px; color:var(--ink-2); line-height:1.35; }
.lv-delta { font-size:12px; font-weight:700; padding:2px 7px; border-radius:99px; background:var(--soft); color:var(--muted); font-variant-numeric:tabular-nums; }
.lv-delta.up { color:var(--ok); background:var(--ok-soft); } .lv-delta.down { color:var(--bad); background:var(--bad-soft); }
.lv-spark { display:block; width:100%; height:48px; margin-top:6px; overflow:visible; }
.lv-spark .l { fill:none; stroke:var(--c); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.6s ease; vector-effect:non-scaling-stroke; }
.lv-spark.lv-anim:not(.in) .l { stroke-dashoffset:1; }
.lv-spark .a { transition:opacity 1.2s .4s; } .lv-spark.lv-anim:not(.in) .a { opacity:0; }
.lv-spark .p { fill:var(--c); stroke:var(--surface); stroke-width:2; vector-effect:non-scaling-stroke; }
.lv-spark rect:hover { fill:color-mix(in srgb, var(--ink) 6%, transparent); }
.lv-spark-empty { height:48px; margin-top:6px; }
.lv-tiles.wide .lv-tile { padding-bottom:14px; }

/* insights */
.lv-ins { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.lv-ins a { display:grid; grid-template-columns:30px minmax(0, 1fr); gap:12px; align-items:start; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:color-mix(in srgb, var(--soft) 60%, transparent); transition:border-color .2s, background .2s; animation:lvIn .5s both; animation-delay:calc(var(--i) * 60ms); }
.lv-ins a:hover { border-color:var(--line-2); background:var(--hover); }
.lv-ins .ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:14px; }
.lv-ins .ico svg { width:16px; height:16px; }
.lv-ins .bad .ico { background:var(--bad-soft); color:var(--bad); } .lv-ins .warn .ico { background:var(--warn-soft); color:var(--warn); }
.lv-ins .good .ico { background:var(--ok-soft); color:var(--ok); } .lv-ins .info .ico { background:var(--accent-soft); color:var(--accent-text); }
.lv-ins p { margin:0; font-size:13.5px; line-height:1.45; color:var(--ink); }
@keyframes lvIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* funnels */
.lv-funnel { display:flex; flex-direction:column; gap:7px; }
.lv-fs { display:grid; grid-template-columns:minmax(110px, 170px) minmax(0, 1fr) 84px; gap:12px; align-items:center; }
.lv-funnel.compact .lv-fs { grid-template-columns:minmax(90px, 130px) minmax(0, 1fr) 70px; }
.lv-fs .lab { font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-fs .trk { position:relative; height:22px; border-radius:6px; background:var(--soft); overflow:hidden; }
.lv-fs .bar { position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:6px; background:linear-gradient(90deg, var(--lv-1), color-mix(in srgb, var(--lv-1) 55%, var(--lv-7))); transition:width 1.1s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i) * 110ms); }
.lv-funnel.lv-anim:not(.in) .bar { width:0; }
.lv-fs .refband { position:absolute; top:0; bottom:0; left:var(--a); width:calc(var(--b) - var(--a)); background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 16%, transparent) 0 3px, transparent 3px 7px); border-left:1px dashed var(--muted); border-right:1px dashed var(--muted); z-index:1; }
.lv-fs .val { display:flex; align-items:baseline; justify-content:flex-end; gap:7px; font-variant-numeric:tabular-nums; }
.lv-fs .val b { font-weight:700; color:var(--ink); } .lv-fs .val em { font-style:normal; font-size:11.5px; color:var(--muted); min-width:30px; text-align:right; }
.lv-note { margin:10px 0 0; font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.lv-note i { display:inline-block; width:18px; height:10px; border:1px dashed var(--muted); background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 16%, transparent) 0 3px, transparent 3px 7px); }

/* heatmap */
.lv-heat { display:grid; grid-template-columns:minmax(80px, 150px) repeat(var(--cols), minmax(0, 1fr)); gap:3px; align-items:center; }
.lv-heat.wide { grid-template-columns:36px repeat(var(--cols), minmax(0, 1fr)); gap:2px; }
.lv-heat .ch { font-size:10.5px; color:var(--muted); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-bottom:3px; }
.lv-heat .rh { font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:6px; }
.lv-heat i { display:block; height:24px; border-radius:4px; background:color-mix(in srgb, var(--lv-seq) calc(var(--k) * 92% + 4%), var(--soft)); transition:opacity .6s, transform .6s; transition-delay:var(--d); }
.lv-heat.wide i { height:18px; border-radius:3px; }
.lv-heat.lv-anim:not(.in) i { opacity:0; transform:scale(.4); }
.lv-heat i:hover { outline:2px solid var(--ink); outline-offset:1px; }
.lv-scale { display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-top:10px; font-size:11px; color:var(--muted); }
.lv-scale i { width:90px; height:8px; border-radius:4px; background:linear-gradient(90deg, color-mix(in srgb, var(--lv-seq) 4%, var(--soft)), var(--lv-seq)); }

/* donut */
.lv-donut { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.lv-donut svg { flex:none; overflow:visible; }
.lv-donut circle { fill:none; stroke-width:16; transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.lv-donut circle.t { stroke:var(--soft); }
.lv-donut svg.lv-anim:not(.in) circle:not(.t) { opacity:0; }
.lv-donut circle:not(.t):hover { stroke-width:20; }
.lv-donut .n { font:700 24px/1 Montserrat, sans-serif; fill:var(--ink); text-anchor:middle; }
.lv-donut ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; flex:1; min-width:140px; }
.lv-donut li { display:grid; grid-template-columns:10px minmax(0, 1fr) auto; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-2); }
.lv-donut li i, .lv-stack-l i, .lv-leg i { width:9px; height:9px; border-radius:3px; display:inline-block; }
.lv-donut li span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-donut li b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* bars */
.lv-bars { display:flex; flex-direction:column; gap:7px; }
.lv-b { display:grid; grid-template-columns:minmax(90px, 160px) minmax(0, 1fr) 48px; gap:10px; align-items:center; }
.lv-b .lab { font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-b .trk { height:10px; border-radius:5px; background:var(--soft); overflow:hidden; }
.lv-b .trk i { display:block; height:100%; width:var(--w); border-radius:5px; background:var(--lv-1); transition:width 1s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i) * 60ms); }
.lv-bars.lv-anim:not(.in) .trk i { width:0; }
.lv-b b { text-align:right; font-weight:600; font-size:12.5px; color:var(--ink); font-variant-numeric:tabular-nums; }

/* columns, timeline */
.lv-cols, .lv-tl { width:100%; height:auto; display:block; overflow:visible; }
.lv-cols .gl, .lv-tl .gl { stroke:var(--line); stroke-width:1; }
.lv-cols text, .lv-tl text { text-transform:none; letter-spacing:0; }
.lv-cols .ax, .lv-tl .ax { font-size:12px; fill:var(--muted); font-variant-numeric:tabular-nums; }
.lv-cols rect { transform-box:fill-box; transform-origin:bottom; transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .2s; transition-delay:calc(var(--i) * 25ms); }
.lv-cols.lv-anim:not(.in) rect { transform:scaleY(0); }
.lv-cols rect:hover { opacity:.8; }
.lv-leg { display:flex; flex-wrap:wrap; gap:4px 14px; margin-bottom:6px; font-size:12px; color:var(--ink-2); }
.lv-leg i { margin-right:6px; vertical-align:-1px; }
.lv-tl .base { stroke:var(--line-2); stroke-width:1.5; }
.lv-tl .now { stroke:var(--gold); stroke-width:1.5; stroke-dasharray:3 3; }
.lv-tl .nowt { font-size:10px; fill:var(--gold-ink, var(--gold)); font-weight:600; }
.lv-tl circle { fill:var(--lv-1); stroke:var(--surface); stroke-width:1.5; transition:opacity .5s, r .2s; transition-delay:calc(var(--i) * 25ms); }
.lv-tl circle.hi { fill:var(--lv-2); } .lv-tl circle.bad { fill:var(--bad); }
.lv-tl.lv-anim:not(.in) circle { opacity:0; }
.lv-tl circle:hover { r:6.5; }

/* 100% stack */
.lv-stack { display:flex; gap:2px; height:18px; border-radius:6px; overflow:hidden; background:var(--soft); }
.lv-stack i { display:block; min-width:4px; transition:flex-grow 1s, opacity .6s; transition-delay:calc(var(--i) * 80ms); }
.lv-stack.lv-anim:not(.in) i { opacity:0; }
.lv-stack-l { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--ink-2); }
.lv-stack-l i { margin-right:6px; vertical-align:-1px; }
.lv-stack-l b { color:var(--ink); font-weight:600; margin-left:4px; }

/* needs a look, what changed, the parts */
.lv-att { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.lv-att a { display:grid; grid-template-columns:4px minmax(0, 1fr) auto; gap:10px; align-items:center; padding:8px 10px 8px 0; border-radius:9px; transition:background .15s; }
.lv-att a:hover { background:var(--hover); }
.lv-att a::before { content:""; align-self:stretch; border-radius:2px; background:var(--muted); }
.lv-att .bad::before { background:var(--bad); } .lv-att .warn::before { background:var(--warn); } .lv-att .info::before { background:var(--accent-text); }
.lv-att span { font-size:13px; color:var(--ink); }
.lv-att em { font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap; }
.lv-none { margin:0; color:var(--muted); font-size:13px; }
.lv-chg { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.lv-chg a { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, var(--soft) 60%, transparent); border:1px solid var(--line); }
.lv-chg span { font-size:12px; color:var(--muted); }
.lv-chg b { font:700 22px/1 Montserrat, sans-serif; color:var(--ink); }
.lv-chg em { font-style:normal; font-size:12px; font-weight:600; } .lv-chg em.up { color:var(--ok); } .lv-chg em.down { color:var(--bad); } .lv-chg em.flat { color:var(--muted); }
.lv-parts { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.lv-part { display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--lv-card); transition:border-color .2s, transform .2s; animation:lvIn .45s both; animation-delay:calc(var(--i) * 40ms); }
a.lv-part:hover { border-color:var(--line-2); transform:translateY(-1px); }
.lv-part .top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.lv-part .top b { font-weight:600; font-size:14px; color:var(--ink); }
.lv-part .pill { font-size:11px; }
.lv-part dl { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:3px 10px; margin:0; font-size:12.5px; }
.lv-part dt { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-part dd { margin:0; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* area tabs */
.lv-area { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:16px; grid-auto-flow:dense; align-items:start; }
.lv-area > .lv-tiles { grid-column:1 / -1; }
@media (min-width: 1100px) { .lv-area > .span2 { grid-column:span 2; } }

.lv-tip { position:fixed; left:0; top:0; z-index:400; pointer-events:none; max-width:300px; padding:8px 11px; border-radius:10px; background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); font-size:12.5px; line-height:1.4; display:flex; flex-direction:column; gap:2px; color:var(--ink-2); }
.lv-tip b { color:var(--ink); font-weight:600; }
.lv-tip[hidden] { display:none; }

@media (prefers-reduced-motion: reduce) { .lv *, .lv *::before { animation:none !important; transition:none !important; } }