/* =======================================================================
   EnCoDash 5.3.0 — Modern dark SCADA dashboard theme
   ======================================================================= */

.encodash-dark {
    --enc-bg:        #0b0f17;
    --enc-bg-2:      #111826;
    --enc-panel:     #141c2c;
    --enc-panel-2:   #1a2334;
    --enc-border:    #243049;
    --enc-border-2:  #2d3a55;
    --enc-text:      #e6ecf5;
    --enc-text-dim:  #8a99b8;
    --enc-muted:     #5c6b8a;
    --enc-accent:    #39d4ff;
    --enc-accent-2:  #7c5cff;
    --enc-accent-3:  #2bf0a4;
    --enc-warn:      #ffb547;
    --enc-danger:    #ff5b7c;
    --enc-led-on:    #2bf0a4;
    --enc-led-off:   #3b475e;
    --enc-shadow:    0 6px 24px rgba(0,0,0,.35);
    --enc-glow:      0 0 18px rgba(57,212,255,.35);
    --enc-radius:    14px;

    color: var(--enc-text);
    background: radial-gradient(1200px 600px at 10% -10%, rgba(124,92,255,.18), transparent 60%),
                radial-gradient(900px 500px at 110% 10%, rgba(57,212,255,.14), transparent 60%),
                var(--enc-bg);
    border-radius: 16px;
    padding: 22px 24px 32px;
    margin: 16px 0;
    max-width: 1500px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

.encodash-dark *, .encodash-dark *::before, .encodash-dark *::after { box-sizing: border-box; }

/* ============================================================
   FRONTEND ISOLATION
   The dashboard renders inside whatever WordPress theme the
   site uses. Themes routinely style p / h1-h6 / a / ul / form
   controls, which would corrupt the dashboard look. These rules
   neutralise common theme bleed so the frontend matches the
   backend Shortcut Builder pixel-for-pixel.
   ============================================================ */
.encodash-frontend.encodash-dark {
    /* Make the dashboard a self-contained card on the page */
    isolation: isolate;
    contain: layout style;
    line-height: 1.5;
}
.encodash-frontend.encodash-dark,
.encodash-frontend.encodash-dark * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.encodash-frontend.encodash-dark h1,
.encodash-frontend.encodash-dark h2,
.encodash-frontend.encodash-dark h3,
.encodash-frontend.encodash-dark h4,
.encodash-frontend.encodash-dark h5,
.encodash-frontend.encodash-dark h6 {
    background: none !important;
    text-shadow: none !important;
    text-transform: none;
    border: 0 !important;
    padding: 0 !important;
    line-height: 1.25;
}
.encodash-frontend.encodash-dark h1 { font-size: 24px !important; font-weight: 700 !important; margin: 0 0 6px !important; color: var(--enc-text) !important; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.encodash-frontend.encodash-dark h2 { font-size: 16px !important; font-weight: 600 !important; margin: 0 !important; color: var(--enc-text) !important; display: flex; align-items: center; gap: 10px; }
.encodash-frontend.encodash-dark h3 { font-size: 15px !important; font-weight: 600 !important; margin: 0 0 12px !important; color: var(--enc-text) !important; letter-spacing: .01em; }
.encodash-frontend.encodash-dark h4 { font-size: 12px !important; font-weight: 600 !important; margin: 14px 0 8px !important; color: var(--enc-text-dim) !important; letter-spacing: .02em; }
.encodash-frontend.encodash-dark p,
.encodash-frontend.encodash-dark .encodash-sub {
    color: var(--enc-text-dim) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 0 4px !important;
    background: none !important;
    text-shadow: none !important;
}
.encodash-frontend.encodash-dark .encodash-hint {
    color: var(--enc-muted) !important;
    font-size: 12px !important;
    margin: 8px 0 0 !important;
}
.encodash-frontend.encodash-dark a {
    color: var(--enc-accent) !important;
    text-decoration: none !important;
    background: none !important;
    box-shadow: none !important;
}
.encodash-frontend.encodash-dark a:hover {
    color: #9ee9ff !important;
    text-decoration: underline !important;
}
.encodash-frontend.encodash-dark code {
    background: rgba(255,255,255,.06) !important;
    color: var(--enc-accent) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
.encodash-frontend.encodash-dark .encodash-btn,
.encodash-frontend.encodash-dark .encodash-btn:hover,
.encodash-frontend.encodash-dark .encodash-btn:focus,
.encodash-frontend.encodash-dark .encodash-btn:visited {
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none;
    line-height: 1.2 !important;
}
.encodash-frontend.encodash-dark .encodash-btn-primary  { color: #061018 !important; }
.encodash-frontend.encodash-dark .encodash-btn-primary:hover { color: #061018 !important; }
.encodash-frontend.encodash-dark form,
.encodash-frontend.encodash-dark label,
.encodash-frontend.encodash-dark fieldset {
    background: none !important;
    border: 0 !important;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
}
.encodash-frontend.encodash-dark input,
.encodash-frontend.encodash-dark select,
.encodash-frontend.encodash-dark textarea,
.encodash-frontend.encodash-dark button {
    font-family: inherit !important;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.encodash-frontend.encodash-dark input[type="date"],
.encodash-frontend.encodash-dark select {
    -webkit-appearance: menulist;
    appearance: menulist;
}
.encodash-frontend.encodash-dark ul,
.encodash-frontend.encodash-dark ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.encodash-frontend.encodash-dark table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   OXYGEN BUILDER COMPATIBILITY
   Oxygen replaces the active theme and wraps shortcode output
   in .ct-shortcode / .ct-code-block / .oxy-* containers, which
   often constrain width or apply their own resets. These rules
   make sure the dashboard breaks out of those constraints and
   ignores Oxygen's element resets while still living happily
   inside an Oxygen page.
   ============================================================ */
.ct-shortcode > .encodash-frontend.encodash-dark,
.ct-code-block > .encodash-frontend.encodash-dark,
.oxy-shortcode > .encodash-frontend.encodash-dark,
.oxy-code-block > .encodash-frontend.encodash-dark {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 16px auto !important;
}
/* Some Oxygen containers force narrow inner widths via inline style
   or .ct-section-inner-wrap. Make sure our wrapper can breathe. */
.ct-section .encodash-frontend.encodash-dark,
.ct-section-inner-wrap .encodash-frontend.encodash-dark,
.ct-div-block .encodash-frontend.encodash-dark,
[class*="oxy-"] .encodash-frontend.encodash-dark {
    width: 100% !important;
    max-width: 1500px !important;
    box-sizing: border-box !important;
}
/* Oxygen often nukes default margins/padding on p, ul, h*, etc.
   Re-assert ours from inside the wrapper to defeat those resets. */
.encodash-frontend.encodash-dark *,
.encodash-frontend.encodash-dark *::before,
.encodash-frontend.encodash-dark *::after {
    box-sizing: border-box !important;
}
/* Oxygen sometimes targets ".ct-shortcode p" with custom font-size
   or color — our chips/buttons use spans/divs that should not
   inherit those page-level styles. */
.encodash-frontend.encodash-dark span,
.encodash-frontend.encodash-dark div {
    background: none;
    text-shadow: none;
    letter-spacing: normal;
}
/* Oxygen Foundation occasionally sets img { max-width: 100%; height: auto }
   which is fine, but it also sets svg { vertical-align: baseline } that
   shifts our icons. Force middle alignment for any inline glyphs. */
.encodash-frontend.encodash-dark svg { vertical-align: middle; }

.encodash-dark a              { color: var(--enc-accent); text-decoration: none; }
.encodash-dark a:hover        { color: #9ee9ff; text-decoration: underline; }
.encodash-dark code           { background: rgba(255,255,255,.06); color: var(--enc-accent); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.encodash-dark h1             { color: var(--enc-text); font-size: 24px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.encodash-dark h2             { color: var(--enc-text); font-size: 16px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; }
.encodash-dark h3             { color: var(--enc-text); font-size: 15px; font-weight: 600; margin: 0 0 12px; letter-spacing: .01em; }
.encodash-dark h4             { color: var(--enc-text-dim); font-size: 12px; font-weight: 600; margin: 14px 0 8px; letter-spacing: .02em; }
.encodash-dark p, .encodash-dark .encodash-sub  { color: var(--enc-text-dim); font-size: 13px; line-height: 1.5; margin: 0 0 4px; }
.encodash-dark .encodash-hint { color: var(--enc-muted); font-size: 12px; line-height: 1.5; margin: 8px 0 0; }

/* Header bar */
.encodash-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    padding: 4px 4px 18px; flex-wrap: wrap;
}
.encodash-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.encodash-version { color: var(--enc-muted); font-size: 12px; font-weight: 500; padding: 2px 8px; border: 1px solid var(--enc-border); border-radius: 999px; }
.encodash-logo-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--enc-accent);
    box-shadow: 0 0 10px var(--enc-accent), 0 0 22px var(--enc-accent);
    display: inline-block;
}

/* New header v2: logo lockup on the left, Connection Health card on the right */
.encodash-header-v2 { align-items: stretch; }
.encodash-header-brand {
    display: flex; align-items: center; gap: 18px; flex: 1 1 420px; min-width: 0;
}
.encodash-logo-img {
    height: 64px; width: auto; flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--enc-border);
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.encodash-header-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.encodash-header-text h1 { margin-bottom: 2px; }
.encodash-header-text .encodash-sub { margin-bottom: 8px; }

/* Connection Health card (top-right) */
.encodash-health {
    flex: 0 0 320px; max-width: 360px;
    background: linear-gradient(180deg, var(--enc-panel) 0%, var(--enc-panel-2) 100%);
    border: 1px solid var(--enc-border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--enc-shadow);
    display: flex; flex-direction: column; gap: 10px;
    position: relative; overflow: hidden;
}
.encodash-health::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--enc-accent);
    opacity: .8;
}
.encodash-health.is-online::before  { background: linear-gradient(90deg, #1bd87f, #2ec5ee); }
.encodash-health.is-offline::before { background: linear-gradient(90deg, #ff5b7c, #ffb547); }
.encodash-health.is-empty::before   { background: rgba(255,255,255,.18); }
.encodash-health.is-missing::before { background: linear-gradient(90deg, #ffb547, #ff5b7c); }

.encodash-health-head {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--enc-muted); font-weight: 700;
}
.encodash-health-main { display: flex; align-items: center; gap: 12px; }
.encodash-health-emoji {
    font-size: 30px; line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.encodash-health.is-online  .encodash-health-emoji { animation: encodash-pulse 2.4s ease-in-out infinite; }
.encodash-health-state { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.encodash-health-label {
    font-size: 22px; font-weight: 700; line-height: 1.1;
    color: var(--enc-text);
}
.encodash-health.is-online  .encodash-health-label { color: #1bd87f; }
.encodash-health.is-offline .encodash-health-label { color: #ff7a96; }
.encodash-health.is-missing .encodash-health-label { color: var(--enc-warn); }
.encodash-health-sub  { font-size: 12px; color: var(--enc-text-dim); }

.encodash-health-meta {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px;
    border-top: 1px dashed var(--enc-border);
    padding-top: 10px;
}
.encodash-health-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.encodash-health-k {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--enc-muted); font-weight: 600;
}
.encodash-health-v {
    font-size: 14px; color: var(--enc-text); font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.encodash-health-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}
.encodash-health-age {
    font-size: 11px; color: var(--enc-text-dim);
    margin-top: 2px;
}

@keyframes encodash-pulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(27,216,127,0)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(27,216,127,.55)); }
}

/* Health card needs the same frontend isolation guarantee */
.encodash-frontend.encodash-dark .encodash-health-label,
.encodash-frontend.encodash-dark .encodash-health-v {
    color: var(--enc-text) !important;
}
.encodash-frontend.encodash-dark .encodash-health.is-online  .encodash-health-label { color: #1bd87f !important; }
.encodash-frontend.encodash-dark .encodash-health.is-offline .encodash-health-label { color: #ff7a96 !important; }
.encodash-frontend.encodash-dark .encodash-health.is-missing .encodash-health-label { color: var(--enc-warn) !important; }
.encodash-frontend.encodash-dark .encodash-logo-img { background: #fff !important; }

@media (max-width: 900px){
    .encodash-header-v2 { flex-direction: column; }
    .encodash-health { flex: 1 1 auto; max-width: none; width: 100%; }
}
@media (max-width: 600px){
    .encodash-header-brand { gap: 12px; }
    .encodash-logo-img { height: 48px; padding: 6px 10px; }
    .encodash-health-meta { grid-template-columns: 1fr; }
}

/* Pills + buttons */
.encodash-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.04); border: 1px solid var(--enc-border);
    color: var(--enc-text-dim); font-size: 12px; font-weight: 500;
    padding: 6px 12px; border-radius: 999px;
}
.encodash-pill-ghost  { color: var(--enc-text-dim); }
.encodash-pill-led    { width: 8px; height: 8px; border-radius: 50%; }
.encodash-pill-led.is-on  { background: var(--enc-led-on); box-shadow: 0 0 8px var(--enc-led-on); }
.encodash-pill-led.is-off { background: var(--enc-led-off); }

.encodash-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px; border: 1px solid var(--enc-border-2);
    background: var(--enc-panel-2); color: var(--enc-text);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease;
    text-decoration: none;
}
.encodash-btn:hover         { background: var(--enc-panel); border-color: var(--enc-accent); color: #fff; text-decoration: none; }
.encodash-btn-primary       { background: linear-gradient(180deg, #2ec5ee, #1a9dd0); border-color: #1a9dd0; color: #061018; }
.encodash-btn-primary:hover { background: linear-gradient(180deg, #4ddcff, #2ec5ee); color: #061018; }
.encodash-btn-ghost         { background: transparent; }
.encodash-btn-danger        { background: transparent; border-color: rgba(255,91,124,.4); color: var(--enc-danger); }
.encodash-btn-danger:hover  { background: rgba(255,91,124,.1); border-color: var(--enc-danger); color: #fff; }
.encodash-btn-large         { padding: 12px 22px; font-size: 14px; }

/* Panels */
.encodash-panel {
    background: linear-gradient(180deg, var(--enc-panel) 0%, var(--enc-panel-2) 100%);
    border: 1px solid var(--enc-border);
    border-radius: 14px;
    padding: 18px;
    margin: 16px 0;
    box-shadow: var(--enc-shadow);
}
.encodash-empty p { color: var(--enc-text-dim); margin: 0; text-align: center; padding: 20px 0; }
.encodash-notice  { background: rgba(255,181,71,.08); border: 1px solid rgba(255,181,71,.3); color: var(--enc-warn); padding: 10px 14px; border-radius: 10px; margin: 12px 0; }
.encodash-notice p { color: var(--enc-warn); margin: 0; }

/* Filter bar */
.encodash-controls .encodash-actions { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.encodash-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px; align-items: end;
}
.encodash-filter-grid label { display: flex; flex-direction: column; gap: 4px; }
.encodash-filter-grid label > span { color: var(--enc-text-dim); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.encodash-filter-grid input,
.encodash-filter-grid select {
    background: var(--enc-bg-2); color: var(--enc-text);
    border: 1px solid var(--enc-border-2); border-radius: 4px; /* squared: was 8px */
    padding: 7px 8px; font-size: 13px; font-family: inherit;
    height: 36px; /* consistent square height */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.encodash-filter-grid input:focus,
.encodash-filter-grid select:focus {
    border-color: var(--enc-accent); box-shadow: 0 0 0 2px rgba(57,212,255,.18); outline: none;
}
.encodash-filter-grid button { align-self: end; height: 36px; border-radius: 4px; }

/* Timespan display title */
.encodash-timespan-title {
    margin-top: 10px; padding: 8px 12px;
    background: rgba(57,212,255,.06); border: 1px solid rgba(57,212,255,.2);
    border-radius: 6px; font-size: 12px; color: var(--enc-text-dim);
    line-height: 1.5;
}
.encodash-timespan-title strong { color: var(--enc-accent); font-weight: 600; letter-spacing: .01em; }

/* Quick-select row */
.encodash-quick-select {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--enc-border);
}
.encodash-quick-select-label {
    font-size: 10px; color: var(--enc-text-dim);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
    white-space: nowrap;
}
.encodash-btn-quick {
    padding: 5px 12px; font-size: 12px; border-radius: 4px; height: 28px;
    background: rgba(57,212,255,.08); border: 1px solid rgba(57,212,255,.28);
    color: var(--enc-accent); cursor: pointer; font-family: inherit; font-weight: 600;
    transition: background .12s ease, border-color .12s ease;
    display: inline-flex; align-items: center;
}
.encodash-btn-quick:hover { background: rgba(57,212,255,.18); border-color: var(--enc-accent); color: #fff; }
.encodash-qs-divider { color: var(--enc-border-2); padding: 0 4px; }
.encodash-qs-date-input,
.encodash-qs-shift-select {
    background: var(--enc-bg-2); color: var(--enc-text);
    border: 1px solid var(--enc-border-2); border-radius: 4px;
    padding: 4px 8px; font-size: 12px; font-family: inherit; height: 28px;
    transition: border-color .12s ease;
}
.encodash-qs-date-input:focus,
.encodash-qs-shift-select:focus { border-color: var(--enc-accent); outline: none; }

/* ========== HERO TILES ========== */
.encodash-hero-wrap { margin: 18px 0 24px; }
.encodash-hero-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; }
.encodash-hero-meta { color: var(--enc-text-dim); font-size: 12px; font-weight: 500; }
.encodash-spark {
    width: 14px; height: 14px; border-radius: 4px;
    background: linear-gradient(135deg, var(--enc-accent), var(--enc-accent-2));
    box-shadow: 0 0 12px rgba(57,212,255,.6);
    display: inline-block;
}
.encodash-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.encodash-hero-tile {
    --hero: var(--enc-accent);
    --tile-bg: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--enc-panel);
    --tile-border: var(--enc-border-2);
    --tile-radius: 16px;
    --tile-padding: 18px 18px 16px;
    --tile-text: var(--enc-text);
    --tile-min-h: auto;
    position: relative;
    background: var(--tile-bg);
    color: var(--tile-text);
    border: 1px solid var(--tile-border);
    border-radius: var(--tile-radius);
    padding: var(--tile-padding);
    min-height: var(--tile-min-h);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: var(--enc-shadow);
}
.encodash-hero-tile.has-bg-image {
    background:
        linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.55)),
        var(--tile-bg-image) center/var(--tile-bg-size, cover) no-repeat;
}
.encodash-hero-tile.has-strong-shadow {
    box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.05);
}
.encodash-tile-icon {
    width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: 0 0 auto;
}
.encodash-hero-tile::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--hero), transparent);
    box-shadow: 0 0 18px var(--hero);
}
.encodash-hero-tile:hover { transform: translateY(-2px); border-color: var(--hero); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px var(--hero); }
.encodash-hero-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.encodash-hero-tile-head h3 { margin: 0; font-size: 14px; text-transform: none; letter-spacing: 0; flex: 1; color: var(--enc-text); }
.encodash-hero-pill { font-size: 10px; font-weight: 700; letter-spacing: .12em; padding: 3px 7px; border-radius: 4px; background: rgba(57,212,255,.12); color: var(--hero); border: 1px solid rgba(57,212,255,.3); }
.encodash-hero-unit { font-size: 11px; color: var(--enc-text-dim); padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.04); }
.encodash-hero-value {
    font-size: 38px; font-weight: 700; line-height: 1.1; color: #fff;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    margin: 4px 0 14px;
    text-shadow: 0 0 24px rgba(57,212,255,.3);
}
.encodash-hero-formula { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.encodash-formula-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid var(--enc-border);
    font-size: 11px; color: var(--enc-text-dim);
}
.encodash-formula-name { font-weight: 600; color: var(--enc-text); }
.encodash-formula-val  { color: var(--hero); font-variant-numeric: tabular-nums; }
.encodash-plus { color: var(--enc-muted); font-weight: 700; padding: 0 2px; }
.encodash-formula-op {
    color: var(--hero);
    font-weight: 700;
    font-size: 13px;
    padding: 0 3px;
    font-variant-numeric: tabular-nums;
}
.encodash-formula-chip-num { background: rgba(124,92,255,.10); border-color: rgba(124,92,255,.35); }
.encodash-formula-chip-num .encodash-formula-name { color: var(--enc-accent-2); }
.encodash-chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.encodash-hero-foot {
    color: var(--enc-text-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    margin: -6px 0 10px;
}
.encodash-hero-value.is-pending { color: var(--enc-muted); text-shadow: none; }
.encodash-hero-value.is-error   { color: var(--enc-warn);  text-shadow: 0 0 18px rgba(255,181,71,.35); }

.encodash-hero-empty { margin-top: 0; }
.encodash-hero-empty p { text-align: left; padding: 6px 0; }
.encodash-hero-empty p + p { margin-top: 12px; text-align: center; }

/* ========== Section meta ========== */
.encodash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.encodash-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.encodash-meta span { display: flex; flex-direction: column; }
.encodash-meta label { color: var(--enc-text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }

/* ========== Device groups + cards ========== */
.encodash-group { margin-bottom: 22px; }
.encodash-group-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--enc-border); }
.encodash-group-count { color: var(--enc-muted); font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--enc-border); }
.encodash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.encodash-card {
    background: var(--enc-bg-2);
    border: 1px solid var(--enc-border);
    border-radius: 12px; padding: 14px;
    transition: border-color .15s ease, transform .15s ease;
}
.encodash-card:hover { border-color: var(--enc-border-2); transform: translateY(-1px); }
.encodash-card-head  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.encodash-card-title { color: var(--enc-text); font-size: 13px; font-weight: 600; word-break: break-word; letter-spacing: .01em; }
.encodash-card-led   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.encodash-card-led.is-on  { background: var(--enc-led-on); box-shadow: 0 0 6px var(--enc-led-on); }
.encodash-card-led.is-off { background: var(--enc-led-off); }
.encodash-card-value { font-size: 24px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.encodash-card-meta  { margin-top: 10px; font-size: 11px; color: var(--enc-text-dim); line-height: 1.5; }
.encodash-card-meta div { display: flex; gap: 6px; }
.encodash-card-meta span { color: var(--enc-muted); font-weight: 600; min-width: 28px; }
.encodash-card-actions { margin-top: 10px; }
.encodash-link {
    color: var(--enc-accent); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}

/* Table */
.encodash-table-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--enc-border); border-radius: 10px; }
.encodash-table      { border-collapse: collapse; width: 100%; }
.encodash-table th, .encodash-table td {
    padding: 8px 10px; font-size: 12px; text-align: left;
    border-bottom: 1px solid var(--enc-border); white-space: nowrap;
}
.encodash-table th   { background: var(--enc-bg-2); color: var(--enc-text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; position: sticky; top: 0; z-index: 1; }
.encodash-table td   { color: var(--enc-text); }
.encodash-table tr:hover td { background: rgba(255,255,255,.02); }

/* Mobile */
@media (max-width: 768px) {
    .encodash-dark { padding: 14px; border-radius: 12px; }
    .encodash-header { flex-direction: column; align-items: stretch; }
    .encodash-header-actions { justify-content: flex-start; }
    .encodash-filter-grid { grid-template-columns: 1fr 1fr; }
    .encodash-cards { grid-template-columns: 1fr; }
    .encodash-hero-grid { grid-template-columns: 1fr; }
    .encodash-hero-value { font-size: 30px; }
    .encodash-hero-tile-head { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .encodash-filter-grid { grid-template-columns: 1fr; }
    .encodash-hero-value { font-size: 26px; }
    .encodash-btn { padding: 8px 10px; font-size: 12px; }
    .encodash-header h1 { font-size: 20px; }
}

/* =======================================================================
   v5.4 — Composable shortcode fragments + Appearance settings page
   ======================================================================= */

/* When a single shortcode is dropped in its own Oxygen container we don't
   want the full dashboard padding — let the builder's container drive
   spacing. The wrapper still keeps font/color isolation. */
.encodash-frontend.encodash-fragment {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    max-width: none;
    border-radius: 0;
}
.encodash-frontend.encodash-fragment > .encodash-header-brand,
.encodash-frontend.encodash-fragment > .encodash-health,
.encodash-frontend.encodash-fragment > .encodash-panel,
.encodash-frontend.encodash-fragment > .encodash-hero-wrap { margin: 0; }

/* Light theme tweaks layered on top of the dark base via CSS vars + a few touch-ups. */
.encodash-light-mode {
    background: #f4f6fa !important;
    color: #0f172a;
}
.encodash-light-mode.encodash-frontend.encodash-dark *:not(code):not(.encodash-hero-pill):not(.encodash-pill-led) {
    color: inherit;
}
.encodash-light-mode .encodash-panel,
.encodash-light-mode .encodash-card,
.encodash-light-mode .encodash-health,
.encodash-light-mode .encodash-hero-tile {
    background: #ffffff !important;
    border-color: rgba(15,23,42,.10) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.07) !important;
    color: #0f172a;
}
.encodash-light-mode h1, .encodash-light-mode h2, .encodash-light-mode h3, .encodash-light-mode h4 { color: #0f172a !important; }
.encodash-light-mode .encodash-sub, .encodash-light-mode p { color: #475569 !important; }
.encodash-light-mode .encodash-hint, .encodash-light-mode .encodash-muted, .encodash-light-mode .encodash-version { color: #64748b !important; }
.encodash-light-mode .encodash-card-value, .encodash-light-mode .encodash-hero-value { color: #0f172a !important; }
.encodash-light-mode .encodash-table th { background: #f1f5f9; color: #0f172a; }
.encodash-light-mode .encodash-table td { border-color: rgba(15,23,42,.06); }
.encodash-light-mode code { background: rgba(15,23,42,.06) !important; color: #0a5e7a !important; }

/* Card actions: stack CSV + XLSX buttons */
.encodash-card-actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.encodash-card-actions .encodash-link {
    flex: 1 1 auto; text-align: center;
    background: rgba(57,212,255,.08);
    border: 1px solid var(--enc-border-2);
    padding: 4px 8px; border-radius: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
}
.encodash-card-actions .encodash-link:hover {
    background: rgba(57,212,255,.18);
    border-color: var(--enc-accent);
    text-decoration: none;
}

/* ----- Appearance settings page ----- */
.encodash-settings-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.encodash-settings-wide { grid-column: 1 / -1; }
.encodash-settings-form .encodash-panel { margin: 0; }
.encodash-settings-form .encodash-builder-footer { padding-top: 16px; display: flex; justify-content: flex-end; }

.encodash-radio,
.encodash-check {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--enc-border);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    cursor: pointer;
    margin: 8px 0;
}
.encodash-radio:hover,
.encodash-check:hover { border-color: var(--enc-accent); }
.encodash-radio input[type="radio"],
.encodash-check input[type="checkbox"] { margin: 0; }

.encodash-field {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center;
    gap: 12px; margin: 10px 0;
    padding: 8px 12px;
    border: 1px solid var(--enc-border);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
}
.encodash-field span { color: var(--enc-text-dim); font-size: 13px; font-weight: 500; }
.encodash-field input[type="color"] {
    width: 44px; height: 32px; padding: 0; border: 1px solid var(--enc-border-2); border-radius: 6px; cursor: pointer; background: transparent;
}
.encodash-field input[type="number"],
.encodash-field input[type="url"],
.encodash-field input[type="range"] {
    background: var(--enc-bg-2); border: 1px solid var(--enc-border-2); color: var(--enc-text);
    padding: 6px 10px; border-radius: 6px; font: inherit;
}
.encodash-field input[type="range"] { padding: 0; height: 28px; }
.encodash-field code { font-size: 11px; color: var(--enc-muted); }
.encodash-field-stack { grid-template-columns: 1fr; gap: 6px; }

.encodash-toggle-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
}
.encodash-shortcode-list {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 18px;
    color: var(--enc-text-dim);
}
.encodash-shortcode-list li { font-size: 13px; }
.encodash-shortcode-list code {
    background: rgba(57,212,255,.10) !important;
    color: var(--enc-accent) !important;
    margin-right: 6px;
}

@media (max-width: 900px){
    .encodash-settings-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   v5.5 — Globals admin, Shifts admin, Shift picker, Widget snippets
   ---------------------------------------------------------------------- */

.encodash-globals-table,
.encodash-shifts-table {
    width: 100%; border-collapse: collapse;
}
.encodash-globals-table th, .encodash-globals-table td,
.encodash-shifts-table th,  .encodash-shifts-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--enc-border);
    vertical-align: middle;
}
.encodash-globals-table input[type="text"],
.encodash-shifts-table  input[type="text"],
.encodash-shifts-table  input[type="time"],
.encodash-shifts-table  select,
.encodash-globals-table select {
    background: var(--enc-panel-2);
    color: var(--enc-text);
    border: 1px solid var(--enc-border-2);
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
}
.encodash-globals-remove,
.encodash-shifts-remove {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
}

.encodash-shortcode-block {
    background: rgba(57,212,255,.08);
    border: 1px dashed var(--enc-border-2);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0;
    overflow-x: auto;
}
.encodash-shortcode-block code {
    color: var(--enc-accent);
    background: transparent !important;
}

/* Shift picker (frontend shortcode output) */
.encodash-shift-picker {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px;
    background: var(--enc-panel);
    border: 1px solid var(--enc-border);
    border-radius: var(--enc-radius);
    box-shadow: var(--enc-shadow);
}
.encodash-shift-picker-title {
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--enc-muted);
}
.encodash-shift-picker-buttons {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.encodash-shift-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--enc-border-2);
    border-radius: 999px;
    background: var(--enc-panel-2);
    color: var(--enc-text);
    text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.encodash-shift-btn:hover { background: rgba(57,212,255,.10); border-color: var(--enc-accent); }
.encodash-shift-btn.is-active {
    background: var(--enc-accent);
    border-color: var(--enc-accent);
    color: #0a121b;
    box-shadow: 0 0 12px rgba(46,197,238,.45);
}

/* Widget snippet reference table on the Shortcuts builder */
.encodash-widget-snippets { margin-top: 18px; }
.encodash-widget-snippets-table {
    width: 100%; border-collapse: collapse;
}
.encodash-widget-snippets-table th,
.encodash-widget-snippets-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--enc-border);
    text-align: left;
    font-size: 13px;
}
.encodash-widget-snippets-table code {
    background: rgba(57,212,255,.10) !important;
    color: var(--enc-accent) !important;
    user-select: all;
    cursor: text;
}
.encodash-widget-snippets-table .encodash-chip-dot {
    display: inline-block; width: 9px; height: 9px;
    border-radius: 50%; margin-right: 8px; vertical-align: middle;
}

/* ----------------------------------------------------------------------
   v5.6 — Group pins, calculated cards inside device groups, tile themes
   ---------------------------------------------------------------------- */

/* Group-pinned widget rendered as a device-style card */
.encodash-card-pinned {
    --pin-accent: var(--enc-accent);
    border-color: rgba(57,212,255,.30) !important;
    background: linear-gradient(180deg, rgba(57,212,255,.06), rgba(57,212,255,0)), var(--enc-panel);
    box-shadow: 0 0 0 1px rgba(57,212,255,.10), var(--enc-shadow);
    position: relative;
}
.encodash-card-pinned::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--pin-accent);
    box-shadow: 0 0 12px var(--pin-accent);
}
.encodash-card-pinned .encodash-pin-flag {
    display: inline-block; width: 18px; height: 18px; border-radius: 4px;
    background: var(--pin-accent); color: #0a121b;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
    margin-right: 6px;
}
.encodash-card-pinned .encodash-card-value.is-error { color: var(--enc-led-off); }
.encodash-card-unit { font-size: 12px; color: var(--enc-text-dim); margin-left: 4px; }
.encodash-card-meta code {
    background: rgba(57,212,255,.10);
    color: var(--enc-accent);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
}
.encodash-link-muted { color: var(--enc-muted); font-size: 10px; user-select: all; cursor: text; }

/* Pin assignment table on the Shortcuts page */
.encodash-pins-panel { margin-top: 18px; }
.encodash-pins-table th, .encodash-pins-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--enc-border);
    text-align: left; font-size: 13px;
}
.encodash-pins-table code {
    background: rgba(57,212,255,.10) !important;
    color: var(--enc-accent) !important;
    font-size: 11px;
}
.encodash-pin-select {
    background: var(--enc-panel-2);
    color: var(--enc-text);
    border: 1px solid var(--enc-border-2);
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 200px;
}

/* ---- Tile preset themes (apply via [encodash_widget theme="..."]) ---- */

/* Glass — frosted, semi-transparent over whatever is behind */
.encodash-tile-theme-glass {
    --tile-bg: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    --tile-border: rgba(255,255,255,.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Neon — black background, vivid accent everywhere */
.encodash-tile-theme-neon {
    --tile-bg: #050a14;
    --tile-border: var(--hero);
    box-shadow: 0 0 0 1px var(--hero), 0 0 24px rgba(57,212,255,.30);
}
.encodash-tile-theme-neon .encodash-hero-value { color: var(--hero); text-shadow: 0 0 12px var(--hero); }

/* Industrial — yellow safety stripes, high-contrast block */
.encodash-tile-theme-industrial {
    --tile-bg: #1a1814;
    --tile-border: #f4c430;
    --hero: #f4c430;
    background-image:
        repeating-linear-gradient(45deg, rgba(244,196,48,.12) 0 8px, transparent 8px 16px),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    background-color: var(--tile-bg);
}
.encodash-tile-theme-industrial .encodash-hero-value { color: #f4c430; }

/* Minimal — flat white-ish, thin border, no gradient */
.encodash-tile-theme-minimal {
    --tile-bg: #ffffff;
    --tile-border: rgba(15,23,42,.12);
    --tile-text: #0f172a;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.encodash-tile-theme-minimal .encodash-hero-value { color: #0f172a; }
.encodash-tile-theme-minimal .encodash-hero-foot { color: #475569; }
.encodash-tile-theme-minimal::before { background: linear-gradient(180deg, var(--hero), transparent); }

/* Dark — force the default dark look even if the surrounding container is light */
.encodash-tile-theme-dark {
    --tile-bg: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), #0d1422;
    --tile-border: rgba(255,255,255,.08);
    --tile-text: #fff;
}

/* Light — force a light look */
.encodash-tile-theme-light {
    --tile-bg: #f7f9fc;
    --tile-border: rgba(15,23,42,.10);
    --tile-text: #0f172a;
}
.encodash-tile-theme-light .encodash-hero-value { color: #0f172a; }
.encodash-tile-theme-light .encodash-hero-foot { color: #475569; }

/* ----------------------------------------------------------------------
   v5.7 — Quick scaffold + identifier reference (Shortcuts page)
   ---------------------------------------------------------------------- */

.encodash-quick-scaffold { margin-bottom: 14px; }
.encodash-quick-scaffold .encodash-shortcode-list {
    grid-template-columns: 1fr; gap: 4px 0; margin-bottom: 12px;
}

.encodash-idents-panel {
    margin-bottom: 14px;
    padding: 12px 18px;
    cursor: default;
}
.encodash-idents-panel summary {
    cursor: pointer;
    padding: 6px 0;
    font-size: 14px;
    color: var(--enc-text);
}
.encodash-idents-panel summary::marker { color: var(--enc-accent); }
.encodash-idents-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-top: 12px;
}
.encodash-idents-grid h4 {
    margin: 0 0 8px;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--enc-text-dim);
}
.encodash-idents-list {
    list-style: none; margin: 0; padding: 0;
    font-size: 12px;
    max-height: 240px; overflow-y: auto;
    border: 1px solid var(--enc-border);
    border-radius: 8px;
    background: var(--enc-panel-2);
    padding: 8px 12px;
}
.encodash-idents-list li {
    padding: 4px 0;
    border-bottom: 1px dashed var(--enc-border);
    line-height: 1.5;
}
.encodash-idents-list li:last-child { border-bottom: 0; }
.encodash-idents-list code {
    background: rgba(57,212,255,.10);
    color: var(--enc-accent);
    padding: 1px 5px;
    border-radius: 3px;
    user-select: all;
    cursor: text;
}
.encodash-muted { color: var(--enc-muted); font-size: 11px; }

@media (max-width: 900px){
    .encodash-idents-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   v5.8 — Widget breakdowns (tile rows + admin form) + per-widget downloads
   ---------------------------------------------------------------------- */

/* Hero tile breakdown rows (rendered between value and footer) */
.encodash-hero-breakdown {
    margin: 0 0 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,.03);
    border: 1px dashed var(--enc-border);
    border-radius: 8px;
    font-size: 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.encodash-hero-breakdown-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.encodash-hero-breakdown-row dt {
    margin: 0;
    color: var(--enc-text-dim);
    font-weight: 500;
}
.encodash-hero-breakdown-row dd {
    margin: 0;
    color: var(--tile-text, var(--enc-text));
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.encodash-hero-breakdown-row dd.is-error { color: var(--enc-led-off); }
.encodash-hero-breakdown-unit { color: var(--enc-text-dim); font-weight: 400; font-size: 10px; margin-left: 2px; }

/* Hero tile actions (CSV / XLSX) row at the bottom */
.encodash-hero-actions {
    display: flex; gap: 10px; margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--enc-border);
}
.encodash-hero-actions .encodash-link {
    font-size: 11px;
    color: var(--enc-text-dim);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--enc-border-2);
    border-radius: 6px;
}
.encodash-hero-actions .encodash-link:hover {
    color: var(--enc-accent);
    border-color: var(--enc-accent);
}

/* Pinned card breakdown */
.encodash-card-breakdown {
    margin: 6px 0;
    padding: 6px 8px;
    background: rgba(255,255,255,.03);
    border: 1px dashed var(--enc-border);
    border-radius: 6px;
    font-size: 11px;
    display: flex; flex-direction: column; gap: 3px;
}
.encodash-card-breakdown-row {
    display: flex; justify-content: space-between; gap: 6px;
}
.encodash-card-breakdown-label { color: var(--enc-text-dim); }
.encodash-card-breakdown-value { color: var(--enc-text); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Breakdowns admin form */
.encodash-breakdowns-panel { margin-top: 18px; }
.encodash-breakdown-block {
    border: 1px solid var(--enc-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--enc-panel-2);
}
.encodash-breakdown-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 8px; font-size: 13px;
}
.encodash-breakdown-head code {
    background: rgba(57,212,255,.10) !important;
    color: var(--enc-accent) !important;
    font-size: 11px;
    padding: 2px 6px; border-radius: 3px;
}
.encodash-breakdowns-table { width: 100%; border-collapse: collapse; }
.encodash-breakdowns-table th, .encodash-breakdowns-table td {
    padding: 6px 8px;
    text-align: left;
    font-size: 12px;
}
.encodash-breakdowns-table th { color: var(--enc-text-dim); font-weight: 500; }
.encodash-breakdowns-table input[type="text"] {
    width: 100%;
    background: var(--enc-panel);
    color: var(--enc-text);
    border: 1px solid var(--enc-border-2);
    border-radius: 6px;
    padding: 5px 8px;
    font: inherit;
}

/* ----------------------------------------------------------------------
   v5.10 — Meter readings comparison on widget tiles
   ---------------------------------------------------------------------- */
.encodash-hero-meter {
    background: rgba(46, 197, 238, 0.08);
    border-style: solid;
    border-color: rgba(46, 197, 238, 0.35);
}
.encodash-hero-meter dt::before {
    content: '⚡';
    margin-right: 6px;
    opacity: .7;
}
.encodash-hero-meter dt:not(:first-child)::before { content: ''; margin: 0; }
.encodash-hero-breakdown-row.is-over dd { color: #f6ce4a; }
.encodash-hero-meter-empty dd { color: var(--enc-muted); font-weight: 400; }

/* ----------------------------------------------------------------------
   v5.10.1 — Meter comparison tiles (standalone, per-month)
   ---------------------------------------------------------------------- */
.encodash-hero-meter-tile .encodash-hero-month {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--enc-text-dim);
    text-transform: uppercase;
    margin: -4px 0 6px;
}
.encodash-hero-meter-tile .encodash-hero-pill {
    background: rgba(46, 197, 238, 0.18);
    color: #2ec5ee;
}
.encodash-hero-breakdown-row dd.is-empty {
    color: var(--enc-muted);
    font-weight: 400;
}

/* ----------------------------------------------------------------------
   v5.11.1 — Widget-groups panel on the frontend
   ---------------------------------------------------------------------- */
.encodash-hero-group-tile .encodash-hero-pill {
    background: rgba(57, 212, 255, 0.18);
    color: #39d4ff;
}
.encodash-link.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}