/* =============================================================================
   DK9 — PointCard styles
   Tema escuro + 4 variações (Classic, Carbon, Glow, Strip).
   ========================================================================== */

:root {
    --dk9-bg:           #0f1320;
    --dk9-surface:      #1a1f33;
    --dk9-surface-2:    #232a44;
    --dk9-border:       #2e3656;
    --dk9-text:         #e8ecf7;
    --dk9-text-dim:     #9aa3c4;
    --dk9-text-muted:   #6b7397;

    --dk9-on:           #3fc77a;
    --dk9-on-soft:      #2a8a55;
    --dk9-on-glow:      rgba(63, 199, 122, 0.30);
    --dk9-off:          #e25c5c;
    --dk9-off-soft:     #6a7393;
    --dk9-accent:       #6ea8ff;
    --dk9-accent-soft:  #3a6ec7;
    --dk9-warn:         #f5b34a;
    --dk9-info:         #8ec5ff;

    --dk9-cat-light:    #f5b34a;
    --dk9-cat-window:   #b794f6;
    --dk9-cat-water:    #4dd0e1;
    --dk9-cat-sensor:   #3fc77a;
    --dk9-cat-group:    #4a7ee0;
    --dk9-cat-meter:    #ff9a76;
    --dk9-cat-info:     #9ba6c2;

    --dk9-radius:       14px;
    --dk9-radius-sm:    8px;
    --dk9-pad-y:        10px;
    --dk9-pad-x:        14px;
    --dk9-gap:          12px;
    --dk9-fast:         150ms;
    --dk9-norm:         220ms;
    --dk9-slow:         360ms;
    --dk9-ease:         cubic-bezier(.22, .61, .36, 1);
    /* Ease com leve overshoot ("spring") p/ entradas de modais/sheets — sensação física. */
    --dk9-ease-spring:  cubic-bezier(.34, 1.56, .64, 1);

    /* Sistema de elevação — profundidade por nível (1=repouso, 3=flutuante/modal). */
    --dk9-elev-1:       0 2px 8px rgba(0,0,0,0.25);
    --dk9-elev-2:       0 12px 32px rgba(0,0,0,0.42);
    --dk9-elev-3:       0 24px 60px rgba(0,0,0,0.55);
}

/* =============================================================================
   Container base (Classic é o default)
   ========================================================================== */
.dk9-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 2px var(--dk9-gap);
    padding: var(--dk9-pad-y) var(--dk9-pad-x);
    border-radius: var(--dk9-radius);
    background: linear-gradient(180deg, var(--dk9-surface) 0%, var(--dk9-surface-2) 100%);
    border: 1px solid var(--dk9-border);
    color: var(--dk9-text);
    transition:
        transform var(--dk9-fast) var(--dk9-ease),
        box-shadow var(--dk9-norm) var(--dk9-ease),
        background var(--dk9-norm) var(--dk9-ease),
        border-color var(--dk9-norm) var(--dk9-ease),
        color var(--dk9-norm) var(--dk9-ease);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 6px rgba(0,0,0,0.18);
    min-height: 68px;
    min-width: 0;             /* permite encolher dentro de grid track estreito */
    overflow: hidden;          /* nada do card ultrapassa as bordas arredondadas */
}
.dk9-card:hover {
    transform: translateY(-1px) scale(1.005);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.05) inset;
}
.dk9-card.is-on {
    border-color: rgba(63, 199, 122, 0.45);
    box-shadow:
        0 0 0 1px rgba(63, 199, 122, 0.18) inset,
        0 6px 20px rgba(63, 199, 122, 0.12);
}

/* ----- Compact: linha única ----- */
.dk9-card--compact { min-height: 44px; padding: 6px var(--dk9-pad-x); gap: 1px 8px; }
.dk9-card--compact .dk9-card__title { font-size: 0.92rem; }
.dk9-card--compact .dk9-card__sub,
.dk9-card--compact .dk9-card__extras { display: none; }
.dk9-card--compact .dk9-card__code--inline { display: inline-block; }
.dk9-card--compact .dk9-action { width: 36px; height: 36px; font-size: 1.15rem; }
.dk9-card--compact .dk9-mini-btn { width: 28px; height: 28px; font-size: 1rem; }
.dk9-card--compact .dk9-elev-btn { width: 26px; height: 26px; font-size: 0.95rem; }
.dk9-card--compact .dk9-meter__num { font-size: 1.15rem; }
.dk9-card--compact .dk9-knob { width: 44px; height: 44px; }
.dk9-card--compact .dk9-knob__center { inset: 9px; }    /* proporcional ao knob menor */
.dk9-card--compact .dk9-knob__center i { font-size: 0.65rem; margin-bottom: 0; }
.dk9-card--compact .dk9-knob__center span { font-size: 0.5rem; }
.dk9-card--compact .dk9-knob__num { font-size: 0.65rem; }

/* Shimmer enquanto carrega */
.dk9-card.is-loading > *:not(.dk9-card__shimmer) { opacity: 0.35; pointer-events: none; }
.dk9-card__shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: dk9-shimmer 1.6s linear infinite;
    border-radius: inherit;
    pointer-events: none;
}
@keyframes dk9-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* =============================================================================
   Cabeçalho — 2 linhas + 3ª (extras) condicional só quando há timer
   ========================================================================== */
.dk9-card__menu {
    background: transparent;
    border: 0;
    color: var(--dk9-text-dim);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--dk9-radius-sm);
    transition: background var(--dk9-fast), color var(--dk9-fast);
    font-size: 0.95rem;
    line-height: 1;
}
.dk9-card__menu:hover { background: rgba(255,255,255,0.08); color: var(--dk9-text); }

/* Estrela de favorito (opcional, só no Home). Absoluta no canto superior direito pra não
   entrar na grade de 3 colunas do card (o body do card fica centralizado, então o canto livre). */
.dk9-card__fav {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--dk9-text-dim);
    padding: 2px 4px;
    border-radius: var(--dk9-radius-sm);
    font-size: 0.85rem;
    line-height: 1;
    transition: color var(--dk9-fast), background var(--dk9-fast), transform var(--dk9-fast);
}
.dk9-card__fav:hover { background: rgba(255,255,255,0.08); color: var(--dk9-text); transform: scale(1.1); }
.dk9-card__fav.is-fav { color: #FFC247; }            /* dourado quando favoritado */
.dk9-card__fav.is-fav:hover { color: #ffce6b; }

.dk9-card__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 0;
}
.dk9-card__title-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dk9-card__title {
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0;
    color: var(--dk9-text);
    line-height: 1.22;
    /* TÍTULO NUNCA ABREVIA */
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.dk9-card__sub {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    color: var(--dk9-text-dim);
    font-size: 0.78rem;
    line-height: 1.3;
    overflow: hidden;
    min-width: 0;
}
.dk9-card__sub-text {
    color: var(--dk9-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.dk9-card__code {
    display: inline-block;
    flex-shrink: 0;
    background: rgba(110, 168, 255, 0.14);
    color: var(--dk9-info);
    border: 1px solid rgba(110, 168, 255, 0.25);
    border-radius: 6px;
    padding: 0 7px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.55;
    font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
}
.dk9-card__code--inline { font-size: 0.66rem; padding: 0 5px; }

/* 3ª linha: aparece SÓ se houver timer/extras — não compete com a sub-row */
.dk9-card__extras {
    display: flex; align-items: center; gap: 8px;
    min-height: 0;
}
.dk9-card__timer {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(226, 92, 92, 0.18);
    color: #ffb3b3;
    border: 1px solid rgba(226, 92, 92, 0.28);
    border-radius: 999px;
    padding: 0 9px;
    font-size: 0.74rem;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--dk9-fast), transform var(--dk9-fast);
    animation: dk9-timer-pulse 1.6s var(--dk9-ease) infinite;
    flex-shrink: 0;
}
.dk9-card__timer:hover { background: rgba(226, 92, 92, 0.3); transform: scale(1.05); }
@keyframes dk9-timer-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(226, 92, 92, 0.4); }
    50%      { box-shadow: 0 0 0 5px rgba(226, 92, 92, 0); }
}
/* "Vai desligar" — contador zerou, aguardando o desligamento efetivo (âmbar, pulso mais visível). */
.dk9-card__timer--expiring {
    background: rgba(240, 173, 78, 0.20);
    color: #ffcf8f;
    border-color: rgba(240, 173, 78, 0.40);
    animation: dk9-timer-expiring 0.9s var(--dk9-ease) infinite;
}
.dk9-card__timer--expiring:hover { background: rgba(240, 173, 78, 0.32); }
@keyframes dk9-timer-expiring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 173, 78, 0.5); opacity: 1; }
    50%      { box-shadow: 0 0 0 5px rgba(240, 173, 78, 0); opacity: 0.72; }
}

/* =============================================================================
   Corpo (área de ação)
   ========================================================================== */
.dk9-card__body {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 60px;
}

/* --- Toggle ------------------------------------------------------------- */
.dk9-action {
    width: 48px; height: 48px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dk9-off-soft);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.85rem;
    transition: color var(--dk9-norm), background var(--dk9-norm), transform var(--dk9-fast);
}
.dk9-action:hover { background: rgba(255,255,255,0.06); transform: scale(1.08); }
.dk9-action:active { transform: scale(0.96); }
.is-on .dk9-action--power { color: var(--dk9-on); }
.is-off .dk9-action--power { color: var(--dk9-off-soft); }
/* Toggle "físico": ao LIGAR, o botão se preenche com um halo na MESMA cor do ícone
   (currentColor → segue o tema: verde/ciano/dourado/categoria) e o brilho do ícone sobe
   suave. É só transição — não dispara no carregamento de cards já ligados. */
.is-on .dk9-action--power { background: color-mix(in srgb, currentColor 15%, transparent); }
.dk9-action--power i { transition: filter var(--dk9-norm) var(--dk9-ease); }
.is-on .dk9-action--power i { filter: drop-shadow(0 0 8px var(--dk9-on-glow)); }

/* --- Group: 2 mini botões ON/OFF lado a lado, compactos --- */
.dk9-group-actions { display: inline-flex; flex-direction: row; gap: 0; }
/* margem negativa lateral aproxima os ícones (botões são transparentes, overlap não cria artefato) */
.dk9-group-actions .dk9-mini-btn + .dk9-mini-btn { margin-left: -10px; }
.dk9-dimmer__quick { display: inline-flex; gap: 2px; }
.dk9-mini-btn {
    width: 46px; height: 46px;             /* pouco menor que o power do Toggle (48px) */
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--dk9-text-dim);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.7rem;                      /* próximo do power 1.85rem */
    transition: background var(--dk9-fast), color var(--dk9-fast), transform var(--dk9-fast);
}
.dk9-mini-btn:hover { background: rgba(255,255,255,0.08); color: var(--dk9-text); transform: scale(1.1); }
.dk9-mini-btn:active { transform: scale(0.93); }
.dk9-mini-btn--on  { color: var(--dk9-on);  }
.dk9-mini-btn--off { color: var(--dk9-off); }
.dk9-mini-btn--on:hover  { background: rgba(63, 199, 122, 0.14); }
.dk9-mini-btn--off:hover { background: rgba(226, 92, 92, 0.14); }

/* --- Elevator: segmented control horizontal (3 zonas num único pill) --- */
.dk9-elev-actions {
    display: inline-flex;
    flex-direction: row;
    gap: 0;
    padding: 1px;
    background: rgba(110, 168, 255, 0.06);
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(110, 168, 255, 0.10);
}
.dk9-elev-btn {
    width: 36px; height: 36px;
    border: 0;
    border-radius: 0;                         /* segmentos sem arredondar individualmente */
    background: rgba(110, 168, 255, 0.10);
    color: var(--dk9-info);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    padding: 0;
    transition: background var(--dk9-fast), color var(--dk9-fast);
}
.dk9-elev-btn + .dk9-elev-btn { margin-left: 1px; }    /* divider sutil entre segmentos */
.dk9-elev-btn:first-child { border-radius: 8px 0 0 8px; }
.dk9-elev-btn:last-child  { border-radius: 0 8px 8px 0; }
.dk9-elev-btn:hover { background: rgba(110, 168, 255, 0.28); color: #fff; }
.dk9-elev-btn:active { background: rgba(110, 168, 255, 0.45); }
/* O ícone de stop é um pequeno quadrado sólido — centralizado no mesmo segmento */
.dk9-elev-btn--stop i { font-size: 0.55rem; }

/* --- Status (icon only) ------------------------------------------------- */
.dk9-status { display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.dk9-status__icon { font-size: 1.85rem; transition: color var(--dk9-norm), filter var(--dk9-norm); }
.is-on .dk9-status__icon { filter: drop-shadow(0 0 7px var(--dk9-on-glow)); }

/* --- Knob (Dimmer interativo + Donut display) -------------------------- */
.dk9-knob {
    position: relative; width: 68px; height: 68px;
    cursor: pointer;                         /* anel todo é clicável (Dimmer) */
}
.dk9-knob__svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;                    /* clicks passam para o div pai */
    overflow: visible;                       /* glow/drop-shadow não é cortado nos cantos */
}
.dk9-knob__track { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 6; transition: stroke var(--dk9-norm); }
.dk9-knob:hover .dk9-knob__track { stroke: rgba(255,255,255,0.18); }
.dk9-knob__arc {
    fill: none;
    stroke: var(--dk9-accent);
    stroke-width: 6;                          /* mais grosso, clicável visivelmente */
    stroke-linecap: round;
    transition: stroke-dasharray var(--dk9-slow) var(--dk9-ease),
                stroke var(--dk9-norm) var(--dk9-ease),
                filter var(--dk9-norm) var(--dk9-ease);
}
.dk9-knob__center {
    position: absolute; inset: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 50%;
    background: rgba(255,255,255,0.08);        /* parece botão SEM precisar de hover */
    color: var(--dk9-text);
    cursor: pointer;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background var(--dk9-norm), color var(--dk9-norm), transform var(--dk9-fast), border-color var(--dk9-norm);
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0; line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.dk9-knob__center i {
    font-size: 0.85rem;
    opacity: 0.55;
    margin-bottom: 1px;
    transition: color var(--dk9-norm), opacity var(--dk9-norm);
}
.dk9-knob__center span { font-size: 0.7rem; }
.dk9-knob__center:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.12);
    transform: scale(1.05);
}
.dk9-knob__center:active { transform: scale(0.95); }
.is-on .dk9-knob__center { color: var(--dk9-on); }
.is-on .dk9-knob__center i { color: var(--dk9-on); opacity: 1; }
.is-on .dk9-knob__arc { stroke: var(--dk9-on); filter: drop-shadow(0 0 4px var(--dk9-on-glow)); }
/* Donut: só display, sem cursor pointer, sem center clicável, span dentro */
.dk9-knob--display { cursor: default; }
.dk9-knob--display .dk9-knob__center { cursor: default; pointer-events: none; background: transparent; border: 0; box-shadow: none; }
.dk9-knob--display .dk9-knob__center:hover { transform: none; background: transparent; }
.dk9-knob__num { font-weight: 700; color: var(--dk9-text); font-variant-numeric: tabular-nums; font-size: 0.92rem; }

/* --- Meter (numérico grande) ------------------------------------------- */
.dk9-meter { display: flex; align-items: baseline; gap: 4px; }
.dk9-meter__num { font-size: 1.5rem; font-weight: 700; color: var(--dk9-text); font-variant-numeric: tabular-nums; }
.dk9-meter__unit { color: var(--dk9-text-dim); font-size: 0.85rem; }

/* Flash de "dado novo" no número do sensor (Meter/Donut) — disparado por @key quando o valor
   muda; NÃO toca no carregamento. Coberto pelo reduced-motion de `.dk9-card *`. */
.dk9-val-flash { animation: dk9-val-flash 0.6s var(--dk9-ease); }
@keyframes dk9-val-flash {
    0%   { color: var(--dk9-accent); text-shadow: 0 0 10px var(--dk9-accent); }
    100% { text-shadow: 0 0 0 transparent; }
}

/* --- Info: SÓ ícone (mensagem vai pro modal) --------------------------- */
.dk9-info-icon {
    font-size: 1.85rem;
    color: var(--dk9-info);
    transition: color var(--dk9-norm), filter var(--dk9-norm);
}

/* =============================================================================
   ▌▌▌ CARBON
   ========================================================================== */
.dk9-card--carbon {
    background: linear-gradient(180deg, #0a0e1a 0%, #131826 100%);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 2px 12px rgba(0,0,0,0.5);
}
.dk9-card--carbon:hover {
    border-color: rgba(0, 212, 255, 0.30);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0, 212, 255, 0.06);
}
.dk9-card--carbon .dk9-card__code {
    background: rgba(0, 212, 255, 0.08);
    color: #00d4ff;
    border-color: rgba(0, 212, 255, 0.30);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.30);
}
.dk9-card--carbon.is-on {
    border-color: rgba(0, 212, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.14) inset, 0 4px 14px rgba(0, 212, 255, 0.10);
}
.dk9-card--carbon.is-on .dk9-action--power { color: #00d4ff; }
.dk9-card--carbon.is-on .dk9-action--power i { filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.45)); }
.dk9-card--carbon .dk9-elev-btn { background: rgba(0, 212, 255, 0.10); color: #00d4ff; }
.dk9-card--carbon .dk9-elev-btn:hover { background: rgba(0, 212, 255, 0.22); }
.dk9-card--carbon .dk9-knob__arc { stroke: #00d4ff; }
.dk9-card--carbon.is-on .dk9-knob__arc { filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6)); }
.dk9-card--carbon.is-on .dk9-knob__center { color: #00d4ff; }
.dk9-card--carbon.is-on .dk9-status__icon { color: #00d4ff !important; filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5)); }

/* =============================================================================
   ▌▌▌ GLOW
   ========================================================================== */
.dk9-card--glow {
    background: linear-gradient(180deg, #181d31 0%, #1f2542 100%);
    border-color: rgba(255,255,255,0.10);
    transition: transform 280ms var(--dk9-ease), box-shadow 380ms var(--dk9-ease), border-color 280ms var(--dk9-ease), background 280ms var(--dk9-ease);
}
.dk9-card--glow:hover { transform: translateY(-2px) scale(1.008); }
.dk9-card--glow.is-on {
    border-color: rgba(255, 209, 102, 0.55);
    background: linear-gradient(180deg, #221b16 0%, #2a2118 100%);
    box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.30) inset, 0 0 22px rgba(255, 209, 102, 0.25), 0 16px 40px rgba(0,0,0,0.55);
    animation: dk9-glow-breathe 3.6s ease-in-out infinite;
}
.dk9-card--glow.is-on.dk9-card--group,
.dk9-card--glow.is-on.dk9-card--dimmer,
.dk9-card--glow.is-on.dk9-card--donut {
    border-color: rgba(110, 168, 255, 0.55);
    background: linear-gradient(180deg, #16203a 0%, #19284a 100%);
    box-shadow: 0 0 0 1px rgba(110, 168, 255, 0.30) inset, 0 0 22px rgba(110, 168, 255, 0.25), 0 16px 40px rgba(0,0,0,0.55);
}
.dk9-card--glow.is-on .dk9-action--power { color: #ffd166; }
.dk9-card--glow.is-on .dk9-action--power i { filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.50)); }
.dk9-card--glow.is-on.dk9-card--group .dk9-action--power,
.dk9-card--glow.is-on.dk9-card--dimmer .dk9-action--power { color: #6ea8ff; }
.dk9-card--glow.is-on.dk9-card--group .dk9-action--power i,
.dk9-card--glow.is-on.dk9-card--dimmer .dk9-action--power i { filter: drop-shadow(0 0 6px rgba(110, 168, 255, 0.50)); }
.dk9-card--glow.is-on .dk9-mini-btn { color: #ffd166; }
.dk9-card--glow.is-on.dk9-card--group .dk9-mini-btn { color: #6ea8ff; }
.dk9-card--glow.is-on .dk9-status__icon { color: #ffd166 !important; filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.50)); }
.dk9-card--glow.is-on .dk9-knob__arc { stroke: #6ea8ff; filter: drop-shadow(0 0 3px rgba(110, 168, 255, 0.40)); }
.dk9-card--glow.is-on .dk9-knob__center { color: #6ea8ff; }
@keyframes dk9-glow-breathe {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.30) inset, 0 0 18px rgba(255, 209, 102, 0.20), 0 16px 40px rgba(0,0,0,0.55); }
    50%      { box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.40) inset, 0 0 30px rgba(255, 209, 102, 0.35), 0 16px 40px rgba(0,0,0,0.55); }
}

/* =============================================================================
   ▌▌▌ STRIP
   ========================================================================== */
.dk9-card--strip {
    background: #161b2e;
    border: 1px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    padding-left: calc(var(--dk9-pad-x) + 8px);
    overflow: hidden;
}
.dk9-card--strip::before {
    content: "";
    position: absolute;
    top: 10px; bottom: 10px;
    left: 6px;
    width: 4px;
    border-radius: 4px;
    background: var(--dk9-strip-color, var(--dk9-cat-sensor));
    opacity: 0.35;
    transition: opacity var(--dk9-norm), width var(--dk9-fast), background var(--dk9-norm);
}
.dk9-card--strip:hover::before { width: 6px; opacity: 0.65; }
.dk9-card--strip.is-on::before { opacity: 1; box-shadow: 0 0 8px var(--dk9-strip-color, var(--dk9-cat-sensor)); }
.dk9-card--strip.is-on { background: #1a2138; }

.dk9-card--strip.dk9-card--toggle   { --dk9-strip-color: var(--dk9-cat-light); }
.dk9-card--strip.dk9-card--dimmer   { --dk9-strip-color: var(--dk9-cat-light); }
.dk9-card--strip.dk9-card--group    { --dk9-strip-color: var(--dk9-cat-group); }
.dk9-card--strip.dk9-card--elevator { --dk9-strip-color: var(--dk9-cat-window); }
.dk9-card--strip.dk9-card--status   { --dk9-strip-color: var(--dk9-cat-sensor); }
.dk9-card--strip.dk9-card--donut    { --dk9-strip-color: var(--dk9-cat-water); }
.dk9-card--strip.dk9-card--meter    { --dk9-strip-color: var(--dk9-cat-meter); }
.dk9-card--strip.dk9-card--info     { --dk9-strip-color: var(--dk9-cat-info); }

.dk9-card--strip.is-on .dk9-action--power { color: var(--dk9-strip-color, var(--dk9-on)); }
.dk9-card--strip.is-on .dk9-action--power i { filter: drop-shadow(0 0 8px var(--dk9-strip-color, var(--dk9-on))); }
.dk9-card--strip .dk9-mini-btn--on { color: var(--dk9-strip-color); }
.dk9-card--strip .dk9-elev-btn { background: color-mix(in srgb, var(--dk9-strip-color) 18%, transparent); color: var(--dk9-strip-color); }
.dk9-card--strip .dk9-elev-btn:hover { background: color-mix(in srgb, var(--dk9-strip-color) 32%, transparent); }
.dk9-card--strip .dk9-knob__arc { stroke: var(--dk9-strip-color); }
.dk9-card--strip.is-on .dk9-knob__center { color: var(--dk9-strip-color); }
.dk9-card--strip.is-on .dk9-status__icon { color: var(--dk9-strip-color) !important; filter: drop-shadow(0 0 8px var(--dk9-strip-color)); }
.dk9-card--strip .dk9-info-icon { color: var(--dk9-strip-color); }

/* =============================================================================
   Grid wrapper — usa min() pra nunca exigir mais largura do que o container tem
   ========================================================================== */
.dk9-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 10px;
}
.dk9-card-grid--dense { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

/* =============================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .dk9-card, .dk9-card *, .dk9-card__timer,
    .lang-switcher__menu, .theme-switcher__pop { animation: none !important; transition: none !important; }
}

/* ============ Language Switcher (compartilhado Studio+Home) ============ */
.lang-switcher { position: relative; display: inline-block; }
.lang-switcher__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px 11px;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
}
.lang-switcher__btn:hover { background: rgba(255, 255, 255, 0.08); }
.lang-switcher__flag { font-size: 1.05rem; }
.lang-switcher__code { font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.78rem; }
.lang-switcher__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: var(--dk9-card, #1a1f2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
    padding: 4px;
    z-index: 1000;
    /* Entrada suave (mesma do ThemeSwitcher acima) — coeso em Studio e Home. */
    animation: dk9-ts-in 0.18s cubic-bezier(.22, .61, .36, 1);
}
.lang-switcher__item {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    background: transparent;
    border: 0;
    padding: 7px 10px;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
}
.lang-switcher__item:hover { background: rgba(255, 255, 255, 0.06); }
.lang-switcher__item.is-active { background: rgba(255, 255, 255, 0.05); font-weight: 600; }
.lang-switcher__item i { margin-left: auto; color: #84e3a9; }

/* =============================================================================
   PasswordField — campo de senha com botão olhinho (compartilhado Studio + Home).
   ========================================================================== */
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 40px; }
.pwd-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; padding: 4px 8px; font-size: 16px; opacity: .85; color: inherit; }
.pwd-eye:hover { background: transparent; opacity: 1; }

/* =============================================================================
   ThemeSwitcher — popover com preview de PointCard (compartilhado Studio + Home).
   ========================================================================== */
.theme-switcher { position: relative; display: inline-block; }
.theme-switcher__toggle {
    background: transparent; border: 1px solid #2A2A33;
    color: #e8ecf7; padding: 6px 10px; border-radius: 8px; cursor: pointer;
    font-size: 1.05rem; line-height: 1;
}
.theme-switcher__toggle:hover { background: #232a36; border-color: #3a4360; }
.theme-switcher__pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    width: 540px; max-width: calc(100vw - 32px);
    background: #14182A; border: 1px solid #2A2A33; border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    padding: 14px;
    animation: dk9-ts-in 0.18s cubic-bezier(.22,.61,.36,1);
}
.theme-switcher__outside {
    position: fixed; inset: 0; z-index: 59;
    background: transparent; cursor: default;
}
@keyframes dk9-ts-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ts-section { margin-bottom: 14px; }
.ts-section > header {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.8px;
    color: #6b7397; margin-bottom: 8px; padding: 0 2px;
}
.ts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ts-opt {
    text-align: left;
    background: #1a1f2a; border: 2px solid transparent; border-radius: 10px;
    padding: 10px; cursor: pointer; color: #e8ecf7;
    transition: border-color 0.15s, background 0.15s;
}
.ts-opt:hover { background: #232a36; }
.ts-opt.is-active { border-color: var(--dk9-accent, #6ea8ff); background: #1d2334; }
.ts-opt__name { font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }
.ts-opt__preview { pointer-events: none; }   /* clique vai pro botão pai, não pro card */

.ts-densities { display: flex; gap: 8px; }
.ts-density {
    flex: 1;
    background: #1a1f2a; border: 2px solid transparent; border-radius: 10px;
    padding: 10px; cursor: pointer; color: #e8ecf7;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: border-color 0.15s, background 0.15s;
}
.ts-density:hover { background: #232a36; }
.ts-density.is-active { border-color: var(--dk9-accent, #6ea8ff); background: #1d2334; }
.ts-footer {
    display: flex; align-items: center; gap: 8px;
    border-top: 1px solid #2A2A33; padding-top: 10px; margin-top: 8px;
}
.ts-footer > .muted, .ts-footer > .err { flex: 1; font-size: 0.85rem; }
.ts-footer .err { color: #e25c5c; }

/* LanguageSwitcher backdrop — pra clique-fora-fecha. Já tinha o markup mas
   estava sem CSS no Home (Studio tinha local). Compartilhado aqui. */
.lang-switcher__backdrop {
    position: fixed; inset: 0; z-index: 999;
    background: transparent; cursor: default;
}

/* ── Rodapé de banner — a IMAGEM centralizada, obrigatória (sem título nem botão de esconder).
      FIXO no rodapé da tela (sempre visível, sem precisar rolar); altura limitada pra não ocupar
      demais. Some só quando não há banner. ── */
.dk9-banner-footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; justify-content: center; align-items: center;
    padding: 6px 14px;
    background: var(--dk9-panel, #1b1b22);
    border-top: 1px solid var(--dk9-border, rgba(255,255,255,.12));
    box-shadow: 0 -4px 18px rgba(0,0,0,.35);
}
.dk9-banner-footer__cta { display: inline-flex; line-height: 0; }
.dk9-banner-footer__img { max-width: 100%; max-height: 64px; width: auto; height: auto; border-radius: 6px; display: block; }
/* Reserva, no fim do documento, a mesma altura do rodapé fixo (imagem 64px + paddings + borda)
   pra que o conteúdo final de QUALQUER tela role acima do banner em vez de ficar escondido. */
.dk9-banner-footer__spacer { height: 84px; flex: none; }

/* ── Seletor de cor padrão (ColorPalette) — quadradinhos pré-definidos + RGB avançado ── */
.dk9-palette { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.dk9-palette__sw {
    width: 24px; height: 24px; border-radius: 6px; cursor: pointer; padding: 0;
    border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}
.dk9-palette__sw:hover { transform: scale(1.08); }
.dk9-palette__sw.is-sel { border-color: var(--dk9-text, #fff); box-shadow: 0 0 0 2px var(--dk9-accent, #6ea8ff); }

/* ===== Paginador padrão (<Pager>) — compartilhado Studio/Home/ROOT ===== */
.dk9-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 16px 0 4px;
    flex-wrap: wrap;
}
.dk9-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(127, 127, 127, .28);
    background: rgba(127, 127, 127, .10);
    color: inherit;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s, border-color .15s;
}
.dk9-pager__btn:hover:not(:disabled) { background: rgba(127, 127, 127, .20); border-color: rgba(127, 127, 127, .45); }
.dk9-pager__btn:disabled { opacity: .35; cursor: not-allowed; }
.dk9-pager__info { font-size: 13px; opacity: .75; min-width: 120px; text-align: center; }
.dk9-pager__goto { display: inline-flex; align-items: center; gap: 6px; }
.dk9-pager__input {
    width: 56px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(127, 127, 127, .28);
    background: rgba(127, 127, 127, .10);
    color: inherit;
    text-align: right;
    padding: 0 8px;
    font-size: 14px;
    color-scheme: dark; /* combobox/spinner nativos seguem o tema escuro do app */
}
.dk9-pager__input:focus { outline: 2px solid #4FC3F7; outline-offset: 1px; }

/* ═══════════════ FilePicker — botão padrão de "escolher arquivo" ═══════════════
   Vive AQUI (CSS global compartilhado, carregado pelos 3 programas) e não num `FilePicker.razor.css`
   isolado: nenhum dos App.razor linka o bundle de CSS isolado (`<Assembly>.styles.css`), então aquele
   arquivo NUNCA era aplicado — o <input type=file> nativo aparecia cru (botão cinza do navegador +
   "Nenhum arquivo escolhido" atropelando o layout) em toda tela que usa o componente.
   Regra: estilo de componente compartilhado do DK9 vai no CSS global, não em .razor.css. */
.dk9-file {
    position: relative;             /* âncora do input escondido — sem isto ele "vaza" pela tela */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--field-border, var(--border, #3a3f47));
    border-radius: 8px;
    background: var(--field, var(--surface-2, #2a2f37));
    color: var(--text, #e8e8e8);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
    user-select: none;
    overflow: hidden;               /* o texto nativo do input não escapa da caixa */
    transition: border-color .12s ease, background .12s ease;
}
.dk9-file:hover { border-color: #4FC3F7; }
.dk9-file--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Esconde o <input type=file> nativo (o rótulo/ícone do componente é a interface visível).
   Não usar display:none: alguns navegadores deixam de disparar o clique do label. */
.dk9-file input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}