/* /Components/Dashboard/AutomationRow.razor.rz.scp.css */
.automation-row[b-fw717mgciu] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    min-height: 4.55rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0.9rem;
    padding: 0.8rem 0.95rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.58));
    box-shadow: 0 0.7rem 1.6rem rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #f8fafc;
    backdrop-filter: blur(16px);
}

:deep(.dashboard-icon)[b-fw717mgciu] {
    color: var(--accent);
    font-size: 2.1rem;
    padding: 0.34rem;
    border-radius: 0.82rem;
    background: color-mix(in srgb, var(--accent) 11%, rgba(15, 23, 42, 0.72));
    box-shadow: 0 0 1.15rem color-mix(in srgb, var(--accent) 17%, transparent);
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 58%, transparent);
}

h3[b-fw717mgciu] {
    margin: 0;
    font-size: 1rem;
    font-weight: 680;
}

p[b-fw717mgciu] {
    margin: 0.2rem 0 0;
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.84rem;
}

:deep(.mud-switch)[b-fw717mgciu] {
    margin: 0;
}

:deep(.mud-switch-track)[b-fw717mgciu] {
    opacity: 1;
    background: rgba(148, 163, 184, 0.32) !important;
}

:deep(.mud-checked .mud-switch-track)[b-fw717mgciu] {
    background: linear-gradient(90deg, #65a30d, #86efac) !important;
}

:deep(.mud-switch-thumb)[b-fw717mgciu] {
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.3);
}

.accent-green[b-fw717mgciu] { --accent: #7ed957; }
.accent-blue[b-fw717mgciu] { --accent: #4ea1ff; }
.accent-yellow[b-fw717mgciu] { --accent: #facc15; }
/* /Components/Dashboard/BottomNavigation.razor.rz.scp.css */
.bottom-nav[b-8ma1ekk52i] {
    position: fixed;
    left: 0.9rem;
    right: 0.9rem;
    bottom: max(0.8rem, env(safe-area-inset-bottom));
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 1.45rem;
    padding: 0.65rem 0.35rem 0.55rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 12, 0.92));
    box-shadow: 0 -1rem 2.5rem rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(22px);
}

a[b-8ma1ekk52i] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.16rem;
    color: rgba(226, 232, 240, 0.62);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 650;
}

:deep(.dashboard-icon)[b-8ma1ekk52i] {
    font-size: 1.75rem;
    color: currentColor;
    text-shadow: 0 0 14px color-mix(in srgb, currentColor 45%, transparent);
}

a.active[b-8ma1ekk52i] {
    color: #7ed957;
}

a:nth-child(2)[b-8ma1ekk52i] { color: #facc15; }
a:nth-child(3)[b-8ma1ekk52i],
a:nth-child(4)[b-8ma1ekk52i] { color: #4ea1ff; }
a:nth-child(5)[b-8ma1ekk52i] { color: #c084fc; }
a:nth-child(6)[b-8ma1ekk52i] { color: #38bdf8; }
a:nth-child(7)[b-8ma1ekk52i] { color: #cbd5e1; }

a.active :deep(.dashboard-icon)[b-8ma1ekk52i] {
    padding: 0.18rem;
    border-radius: 0.75rem;
    background: rgba(126, 217, 87, 0.12);
    box-shadow: 0 0 1rem rgba(126, 217, 87, 0.26);
}

@media (min-width: 760px) {
    .bottom-nav[b-8ma1ekk52i] {
        left: 50%;
        right: auto;
        width: min(44rem, calc(100vw - 2rem));
        transform: translateX(-50%);
    }
}
/* /Components/Dashboard/DashboardHeader.razor.rz.scp.css */
.status-panel[b-lqmiv53d6f] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(112, 145, 180, 0.20);
    border-radius: 16px;
    background: rgba(7, 14, 25, 0.92);
    box-sizing: border-box;
}

.status-grid[b-lqmiv53d6f] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

:global(.status-card)[b-lqmiv53d6f] {
    --accent: #22d3ee;
    --accent-glow: rgba(34, 211, 238, 0.16);
    position: relative;
    min-width: 0;
    height: 116px;
    padding: 12px 14px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(120, 155, 195, 0.20);
    background:
        radial-gradient(circle at 88% 10%, var(--accent-glow), transparent 34%),
        linear-gradient(145deg, rgba(17, 28, 45, 0.98), rgba(10, 18, 31, 0.98));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

:global(.status-card-main)[b-lqmiv53d6f] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

:global(.status-icon)[b-lqmiv53d6f] {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

:global(.status-icon::before)[b-lqmiv53d6f] {
    content: "";
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(34, 211, 238, 0.07);
    filter: blur(6px);
    z-index: -1;
}

:global(.status-icon img)[b-lqmiv53d6f] {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.40));
}

:global(.status-icon.pool-icon)[b-lqmiv53d6f] {
    overflow: hidden;
}

:global(.status-icon.pool-icon img)[b-lqmiv53d6f] {
    width: 68px;
    height: 68px;
    object-fit: cover;
    object-position: center 38%;
    transform: scale(1.10);
}

:global(.status-content)[b-lqmiv53d6f] {
    min-width: 0;
    flex: 1;
}

:global(.status-title)[b-lqmiv53d6f] {
    margin: 0;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: #dce8f7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:global(.status-value)[b-lqmiv53d6f] {
    margin-top: 4px;
    font-size: 24px;
    line-height: 1;
    font-weight: 850;
    color: var(--accent, #22d3ee);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:global(.status-subtitle)[b-lqmiv53d6f] {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.25;
    color: #91a3ba;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:global(.status-chip)[b-lqmiv53d6f] {
    position: absolute;
    top: 9px;
    right: 10px;
    padding: 4px 7px;
    border-radius: 7px;
    background: rgba(20, 31, 49, 0.90);
    border: 1px solid rgba(120, 155, 195, 0.22);
    color: #aebed2;
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
}

:global(.status-extra)[b-lqmiv53d6f] {
    min-width: 0;
    width: 100%;
}

:global(.accent-cyan)[b-lqmiv53d6f] {
    --accent: #22d3ee;
    --accent-glow: rgba(34, 211, 238, 0.16);
}

:global(.accent-blue)[b-lqmiv53d6f] {
    --accent: #38bdf8;
    --accent-glow: rgba(56, 189, 248, 0.16);
}

:global(.accent-green)[b-lqmiv53d6f] {
    --accent: #22c55e;
    --accent-glow: rgba(34, 197, 94, 0.15);
}

:global(.accent-red)[b-lqmiv53d6f] {
    --accent: #ef4444;
    --accent-glow: rgba(239, 68, 68, 0.15);
}

:global(.accent-purple)[b-lqmiv53d6f] {
    --accent: #c084fc;
    --accent-glow: rgba(192, 132, 252, 0.16);
}

:global(.accent-yellow)[b-lqmiv53d6f] {
    --accent: #facc15;
    --accent-glow: rgba(250, 204, 21, 0.16);
}

.status-progress[b-lqmiv53d6f] {
    width: 100%;
    height: 5px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(148, 163, 184, 0.16);
}

.status-progress-fill[b-lqmiv53d6f] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

.mode-switch[b-lqmiv53d6f] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 8px;
}

.mode-button[b-lqmiv53d6f] {
    height: 23px;
    padding: 0 5px;
    border-radius: 6px;
    border: 1px solid rgba(120, 155, 195, 0.22);
    background: rgba(20, 31, 49, 0.90);
    color: #aebed2;
    font: inherit;
    font-size: 9px;
}

.mode-button.active[b-lqmiv53d6f] {
    border-color: rgba(34, 197, 94, 0.75);
    background: rgba(20, 83, 45, 0.55);
    color: #4ade80;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.18);
}

.sparkline-container[b-lqmiv53d6f] {
    width: 100%;
    height: 34px;
    margin-top: 7px;
    color: #22d3ee;
}

.sparkline-container.battery[b-lqmiv53d6f] {
    color: #22c55e;
}

:global(.sparkline)[b-lqmiv53d6f] {
    width: 100%;
    height: 34px;
    overflow: visible;
}

:global(.sparkline-fill)[b-lqmiv53d6f] {
    fill: currentColor;
    opacity: 0.14;
}

:global(.sparkline-line)[b-lqmiv53d6f] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px currentColor);
}

@media (max-width: 1100px) {
    .status-grid[b-lqmiv53d6f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .status-grid[b-lqmiv53d6f] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Dashboard/DeviceCard.razor.rz.scp.css */
.device-card[b-ydi565rmqn] {
    position: relative;
    min-height: 9.8rem;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1.05rem;
    padding: 1rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.58));
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    color: #f8fafc;
    backdrop-filter: blur(16px);
}

.device-icon :deep(.dashboard-icon)[b-ydi565rmqn] {
    color: var(--accent);
    font-size: 2.65rem;
    text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 58%, transparent);
}

.device-icon[b-ydi565rmqn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    background:
        radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 58%),
        color-mix(in srgb, var(--accent) 10%, rgba(15, 23, 42, 0.7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 1.4rem color-mix(in srgb, var(--accent) 18%, transparent);
}

h3[b-ydi565rmqn] {
    margin: 0.75rem 1.4rem 0.2rem 0;
    font-size: 1.15rem;
    font-weight: 650;
}

strong[b-ydi565rmqn] {
    display: block;
    color: var(--accent);
    font-size: 1.32rem;
    line-height: 1.1;
}

p[b-ydi565rmqn] {
    margin: 0.35rem 0 0;
    color: rgba(203, 213, 225, 0.72);
}

:deep(.chevron)[b-ydi565rmqn] {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    color: rgba(226, 232, 240, 0.62);
    transform: translateY(-50%);
}

.accent-green[b-ydi565rmqn] { --accent: #7ed957; }
.accent-blue[b-ydi565rmqn] { --accent: #4ea1ff; }
.accent-yellow[b-ydi565rmqn] { --accent: #facc15; }
.accent-purple[b-ydi565rmqn] { --accent: #c084fc; }
.accent-red[b-ydi565rmqn] { --accent: #f87171; }
/* /Components/Dashboard/HeaderCard.razor.rz.scp.css */
.header-card[b-ghnu395qrh] {
    --header-accent: #22d3ee;
    position: relative;
    min-height: 132px;
    height: 132px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(16, 24, 38, 0.92), rgba(9, 14, 24, 0.84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 38px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px) saturate(1.18);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.header-card[b-ghnu395qrh]::before {
    content: "";
    position: absolute;
    inset: -40% -18% auto auto;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--header-accent) 38%, transparent), transparent 68%);
    opacity: 0.8;
    pointer-events: none;
}

.header-card[b-ghnu395qrh]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.065), transparent 36%, transparent 70%, rgba(255, 255, 255, 0.025));
    pointer-events: none;
}

.header-card:hover[b-ghnu395qrh] {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--header-accent) 48%, rgba(255, 255, 255, 0.12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 48px rgba(0, 0, 0, 0.38), 0 0 30px color-mix(in srgb, var(--header-accent) 24%, transparent);
}

.header-card:hover .header-card-icon[b-ghnu395qrh] {
    transform: scale(1.08) translateY(-1px);
}

.header-card-main[b-ghnu395qrh],
.header-card-content[b-ghnu395qrh],
.header-card-extra[b-ghnu395qrh] {
    position: relative;
    z-index: 1;
}

.header-card-main[b-ghnu395qrh] {
    min-height: 70px;
}

.header-card-icon-wrap[b-ghnu395qrh] {
    position: relative;
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.2), transparent 38%), color-mix(in srgb, var(--header-accent) 16%, rgba(2, 6, 12, 0.48));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px color-mix(in srgb, var(--header-accent) 22%, transparent);
}

.header-card-icon[b-ghnu395qrh] {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 12px color-mix(in srgb, var(--header-accent) 38%, transparent));
    transition: transform 0.22s ease;
}

.header-card-title[b-ghnu395qrh] {
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
}

.header-card-value[b-ghnu395qrh] {
    margin: 0;
    color: var(--header-accent);
    font-size: clamp(2rem, 2.7vw, 40px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.05em;
    animation: header-card-count-b-ghnu395qrh 0.45s ease both;
}

.header-card-description[b-ghnu395qrh] {
    margin: 0;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.18;
}

.header-card-extra[b-ghnu395qrh] {
    margin-top: 10px;
}

.header-card-sun[b-ghnu395qrh] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 14px #facc15, 0 0 28px rgba(250, 204, 21, 0.55);
    animation: header-card-sun-pulse-b-ghnu395qrh 2.4s ease-in-out infinite;
}

.accent-cyan[b-ghnu395qrh] { --header-accent: #22d3ee; }
.accent-green[b-ghnu395qrh] { --header-accent: #22c55e; }
.accent-red[b-ghnu395qrh] { --header-accent: #ef4444; }
.accent-blue[b-ghnu395qrh] { --header-accent: #38bdf8; }
.accent-purple[b-ghnu395qrh] { --header-accent: #a855f7; }
.accent-yellow[b-ghnu395qrh] { --header-accent: #facc15; }

@keyframes header-card-count-b-ghnu395qrh {
    from {
        opacity: 0;
        transform: translateY(5px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes header-card-sun-pulse-b-ghnu395qrh {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    .header-card[b-ghnu395qrh] {
        height: auto;
        min-height: 118px;
        padding: 16px;
    }

    .header-card-icon-wrap[b-ghnu395qrh] {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
    }

    .header-card-icon[b-ghnu395qrh] {
        width: 58px;
        height: 58px;
    }

    .header-card-value[b-ghnu395qrh] {
        font-size: 1.85rem;
    }
}
/* /Components/Dashboard/MetricCard.razor.rz.scp.css */
.metric-card[b-dde6toss1c] {
    position: relative;
    min-height: 12.2rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1.15rem;
    padding: 1.05rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.76), rgba(15, 23, 42, 0.62));
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    backdrop-filter: blur(18px);
}

.metric-head[b-dde6toss1c] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(248, 250, 252, 0.9);
    font-weight: 700;
}

.metric-head :deep(.dashboard-icon)[b-dde6toss1c] {
    color: var(--accent);
    font-size: 2rem;
    padding: 0.35rem;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--accent) 12%, rgba(15, 23, 42, 0.7));
    box-shadow: 0 0 1.25rem color-mix(in srgb, var(--accent) 20%, transparent);
    text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}

.metric-card > strong[b-dde6toss1c] {
    display: block;
    margin-top: 1.55rem;
    font-size: clamp(1.8rem, 8vw, 2.55rem);
    line-height: 1;
    letter-spacing: -0.06em;
}

p[b-dde6toss1c] {
    margin: 0.4rem 0 0;
    color: rgba(203, 213, 225, 0.78);
}

.metric-chart[b-dde6toss1c] {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 48%;
    height: 4.5rem;
    color: var(--accent);
    opacity: 0.96;
}

polyline[b-dde6toss1c] {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.metric-footer[b-dde6toss1c] {
    position: absolute;
    left: 1.05rem;
    right: 1.05rem;
    bottom: 1rem;
}

.metric-footer strong[b-dde6toss1c] {
    display: block;
    font-size: 1.35rem;
    letter-spacing: -0.04em;
}

.metric-footer span[b-dde6toss1c] {
    color: rgba(203, 213, 225, 0.72);
}

.accent-green[b-dde6toss1c] { --accent: #7ed957; }
.accent-blue[b-dde6toss1c] { --accent: #4ea1ff; }
.accent-yellow[b-dde6toss1c] { --accent: #facc15; }
/* /Components/Dashboard/QuickActionCard.razor.rz.scp.css */
.quick-card[b-ku7f27b6uh] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.65rem;
    align-items: center;
    min-height: 5.1rem;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 0.9rem;
    padding: 0.8rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.68), rgba(15, 23, 42, 0.56));
    box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    color: #f8fafc;
    text-align: left;
    backdrop-filter: blur(15px);
}

:deep(.dashboard-icon)[b-ku7f27b6uh] {
    grid-row: 1 / span 2;
    color: var(--accent);
    font-size: 2rem;
    padding: 0.38rem;
    border-radius: 0.85rem;
    background:
        radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 58%),
        color-mix(in srgb, var(--accent) 9%, rgba(15, 23, 42, 0.72));
    box-shadow: 0 0 1.2rem color-mix(in srgb, var(--accent) 18%, transparent);
    text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}

span[b-ku7f27b6uh] {
    font-size: 0.8rem;
    font-weight: 700;
}

strong[b-ku7f27b6uh] {
    color: var(--accent);
    font-size: 0.83rem;
}

.accent-green[b-ku7f27b6uh] { --accent: #7ed957; }
.accent-blue[b-ku7f27b6uh] { --accent: #4ea1ff; }
.accent-yellow[b-ku7f27b6uh] { --accent: #facc15; }
.accent-red[b-ku7f27b6uh] { --accent: #f87171; }
/* /Components/Dashboard/WaterTankCard.razor.rz.scp.css */
.water-card[b-dv223cuhju] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.4rem;
    gap: 0.75rem;
    min-height: 12.2rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1.15rem;
    padding: 1.05rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.76), rgba(15, 23, 42, 0.62));
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    backdrop-filter: blur(18px);
}

.level-0[b-dv223cuhju] { --water-level: 0%; }
.level-10[b-dv223cuhju] { --water-level: 10%; }
.level-20[b-dv223cuhju] { --water-level: 20%; }
.level-30[b-dv223cuhju] { --water-level: 30%; }
.level-40[b-dv223cuhju] { --water-level: 40%; }
.level-50[b-dv223cuhju] { --water-level: 50%; }
.level-60[b-dv223cuhju] { --water-level: 60%; }
.level-70[b-dv223cuhju] { --water-level: 70%; }
.level-80[b-dv223cuhju] { --water-level: 80%; }
.level-90[b-dv223cuhju] { --water-level: 90%; }
.level-100[b-dv223cuhju] { --water-level: 100%; }

.metric-head[b-dv223cuhju] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(248, 250, 252, 0.9);
    font-weight: 700;
}

.metric-head :deep(.dashboard-icon)[b-dv223cuhju] {
    color: #4ea1ff;
    font-size: 2rem;
    padding: 0.35rem;
    border-radius: 0.8rem;
    background: rgba(78, 161, 255, 0.12);
    box-shadow: 0 0 1.25rem rgba(78, 161, 255, 0.22);
    text-shadow: 0 0 16px rgba(78, 161, 255, 0.65);
}

.water-info > strong[b-dv223cuhju] {
    display: block;
    margin-top: 1.55rem;
    font-size: clamp(1.8rem, 8vw, 2.55rem);
    line-height: 1;
    letter-spacing: -0.06em;
}

p[b-dv223cuhju],
.water-total span[b-dv223cuhju] {
    color: rgba(203, 213, 225, 0.74);
}

p[b-dv223cuhju] {
    margin: 0.4rem 0 1.55rem;
}

.water-total b[b-dv223cuhju] {
    display: block;
    font-size: 1.2rem;
}

.tank[b-dv223cuhju] {
    align-self: end;
    position: relative;
    height: 8.7rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 50% / 9%;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.72), rgba(148, 163, 184, 0.08), rgba(15, 23, 42, 0.72));
    box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, 0.38), 0 0 2.2rem rgba(14, 165, 233, 0.18);
}

.tank[b-dv223cuhju]::before,
.tank[b-dv223cuhju]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1.1rem;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.2);
    z-index: 2;
}

.tank[b-dv223cuhju]::before { top: -0.1rem; }
.tank[b-dv223cuhju]::after { bottom: -0.1rem; }

.water[b-dv223cuhju] {
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.25rem;
    height: var(--water-level);
    border-radius: 50% / 9%;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.96), rgba(2, 132, 199, 0.82));
    box-shadow: 0 0 2rem rgba(56, 189, 248, 0.5);
}

.shine[b-dv223cuhju] {
    position: absolute;
    inset: 0.8rem auto 0.8rem 1rem;
    width: 0.65rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent);
    opacity: 0.7;
}
/* /Components/Garten/GartenMap.razor.rz.scp.css */
.garden-wrapper[b-w8tzwm76c0] {
    position: relative;
    width: 100%;
    min-height: 650px;
    overflow: hidden;
    border: 1px solid #24313a;
    border-radius: 20px;
    background: radial-gradient(circle at top, #13221d 0%, #07100e 65%);
    box-shadow: 0 20px 55px rgb(0 0 0 / 35%);
}

.garden-map[b-w8tzwm76c0] {
    display: block;
    width: 100%;
    height: auto;
    min-height: 650px;
    aspect-ratio: 3 / 2;
}

.property-background[b-w8tzwm76c0] {
    fill: #10251a;
    stroke: #263e31;
    stroke-width: 3;
}

.area[b-w8tzwm76c0],
.building[b-w8tzwm76c0],
.path[b-w8tzwm76c0],
.flowers[b-w8tzwm76c0] {
    transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease;
    transform-box: fill-box;
    transform-origin: center;
}

.clickable[b-w8tzwm76c0] {
    cursor: pointer;
}

    .clickable:hover .building[b-w8tzwm76c0],
    .clickable:hover .area[b-w8tzwm76c0],
    .clickable:hover .path[b-w8tzwm76c0],
    .clickable:hover .flowers[b-w8tzwm76c0] {
        filter: brightness(1.25);
    }

    .clickable:focus-visible[b-w8tzwm76c0] {
        outline: 3px solid #67e88a;
        outline-offset: 2px;
    }

.area-group.selected .building[b-w8tzwm76c0],
.area-group.selected .pool[b-w8tzwm76c0],
.area-group.selected .flowers[b-w8tzwm76c0] {
    filter: brightness(1.3) drop-shadow(0 0 14px rgb(103 232 138 / 65%));
}

.area-group.selected .area.grass[b-w8tzwm76c0],
.area-group.selected .path[b-w8tzwm76c0] {
    filter: brightness(1.2);
}

.grass[b-w8tzwm76c0] {
    fill: #1e4a27;
    stroke: #2f6d39;
    stroke-width: 3;
    cursor: pointer;
}

.path[b-w8tzwm76c0] {
    fill: none;
    stroke: #a69a84;
    stroke-width: 58;
    stroke-linecap: round;
    opacity: 0.85;
    cursor: pointer;
}

.building[b-w8tzwm76c0] {
    stroke: #687477;
    stroke-width: 3;
    filter: url("#shadow");
}

.main-house[b-w8tzwm76c0] {
    fill: #30383b;
}

.flat-roof[b-w8tzwm76c0] {
    fill: #1f2528;
    pointer-events: none;
}

.veranda[b-w8tzwm76c0] {
    fill: #5b4634;
}

.sauna[b-w8tzwm76c0] {
    fill: #6a4732;
}

.billiard[b-w8tzwm76c0] {
    fill: #544332;
}

.grill[b-w8tzwm76c0] {
    fill: #604a32;
}

.dining[b-w8tzwm76c0] {
    fill: #4a3c32;
}

.table-football[b-w8tzwm76c0] {
    fill: #554535;
}

.pool[b-w8tzwm76c0] {
    stroke: #67e8f9;
    stroke-width: 4;
    filter: url("#shadow");
}

.billiard-table[b-w8tzwm76c0] {
    fill: #087f5b;
    stroke: #d6b16b;
    stroke-width: 3;
    pointer-events: none;
}

.flowers[b-w8tzwm76c0] {
    fill: #b73f78;
    stroke: #ff9bc8;
    stroke-width: 2;
    cursor: pointer;
}

.number[b-w8tzwm76c0],
.label[b-w8tzwm76c0],
.small-label[b-w8tzwm76c0],
.flower-number[b-w8tzwm76c0],
.lawn-number[b-w8tzwm76c0],
.lawn-label[b-w8tzwm76c0],
.path-number[b-w8tzwm76c0],
.path-label[b-w8tzwm76c0] {
    fill: #ffffff;
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
}

.number[b-w8tzwm76c0] {
    font-size: 25px;
    font-weight: 800;
}

.label[b-w8tzwm76c0] {
    font-size: 20px;
    font-weight: 700;
}

.small-label[b-w8tzwm76c0] {
    font-size: 15px;
}

.flower-number[b-w8tzwm76c0] {
    font-size: 17px;
    font-weight: 700;
}

.lawn-number[b-w8tzwm76c0] {
    font-size: 35px;
    font-weight: 800;
}

.lawn-label[b-w8tzwm76c0] {
    font-size: 24px;
    font-weight: 700;
}

.path-number[b-w8tzwm76c0] {
    font-size: 20px;
    font-weight: 800;
}

.path-label[b-w8tzwm76c0] {
    font-size: 16px;
    font-weight: 600;
}

.status[b-w8tzwm76c0] {
    stroke: #06100c;
    stroke-width: 3;
    pointer-events: none;
}

.status-on[b-w8tzwm76c0] {
    fill: #39ff88;
    filter: drop-shadow(0 0 8px #39ff88);
}

.status-off[b-w8tzwm76c0] {
    fill: #f05252;
}

/* Detailfenster oben rechts */
.area-popup[b-w8tzwm76c0] {
    position: absolute;
    top: 24px;
    right: 24px;
    width: min(340px, calc(100% - 48px));
    padding: 22px;
    color: #f7faf9;
    border: 1px solid #354840;
    border-radius: 16px;
    background: rgb(8 18 16 / 94%);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 45px rgb(0 0 0 / 45%);
    animation: popup-fade-in-b-w8tzwm76c0 160ms ease-out;
}

@keyframes popup-fade-in-b-w8tzwm76c0 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

    .area-popup h3[b-w8tzwm76c0] {
        margin: 0 35px 8px 0;
        color: #72e68e;
    }

.popup-status[b-w8tzwm76c0] {
    margin: 0 0 14px;
    color: #b7c4bd;
    font-size: 0.85rem;
}

.status-label[b-w8tzwm76c0] {
    color: #8a9a92;
}

.close-button[b-w8tzwm76c0] {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 0;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.action-button[b-w8tzwm76c0] {
    width: 100%;
    margin-top: 10px;
    padding: 12px 15px;
    color: #07100e;
    font-weight: 700;
    border: 0;
    border-radius: 10px;
    background: #67e88a;
    cursor: pointer;
    transition: filter 120ms ease, background 120ms ease;
}

    .action-button:hover[b-w8tzwm76c0] {
        filter: brightness(1.08);
    }

    .action-button.is-on[b-w8tzwm76c0] {
        background: #ffd166;
    }

    .action-button.secondary[b-w8tzwm76c0] {
        flex: 0 0 auto;
        width: 48px;
        color: #f7faf9;
        background: #2a3a34;
    }

        .action-button.secondary:disabled[b-w8tzwm76c0] {
            opacity: 0.4;
            cursor: not-allowed;
        }

.player-actions[b-w8tzwm76c0] {
    display: flex;
    gap: 10px;
}

    .player-actions .action-button:not(.secondary)[b-w8tzwm76c0] {
        flex: 1;
    }

.system-overview[b-w8tzwm76c0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.system-row[b-w8tzwm76c0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgb(255 255 255 / 4%);
}

    .system-row span[b-w8tzwm76c0] {
        color: #b7c4bd;
        font-size: 0.85rem;
    }

    .system-row strong[b-w8tzwm76c0] {
        color: #ffd166;
    }

@media (max-width: 900px) {

    .garden-wrapper[b-w8tzwm76c0],
    .garden-map[b-w8tzwm76c0] {
        min-height: 500px;
    }

    .area-popup[b-w8tzwm76c0] {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
    }
}

/* 16:9 Smart-Display Optimierung */
@media (min-width: 1400px) and (max-height: 900px) {
    .garden-wrapper[b-w8tzwm76c0],
    .garden-map[b-w8tzwm76c0] {
        min-height: 0;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.garden-shell[b-mmby3feq9p] {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.18), transparent 28rem),
        radial-gradient(circle at 100% 4%, rgba(139, 92, 246, 0.16), transparent 30rem),
        linear-gradient(135deg, var(--app-bg-deep), var(--app-bg));
    color: var(--garden-ink);
    max-width: 100%;
    overflow-x: clip;
}

.garden-sidebar[b-mmby3feq9p] {
    background: linear-gradient(180deg, rgba(3, 7, 18, 0.96), rgba(8, 19, 36, 0.94));
    border-right: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-lg);
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    max-height: 100dvh;
}

.garden-main[b-mmby3feq9p] {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.garden-topbar[b-mmby3feq9p] {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.25rem;
}

.garden-topbar h1[b-mmby3feq9p] {
    margin: 0;
    font-size: clamp(1.7rem, 3.5vw, 2.8rem);
    color: var(--app-text);
    font-weight: 700;
    letter-spacing: -0.055em;
}

.garden-content[b-mmby3feq9p] {
    padding: 0 1rem 2rem;
    max-width: 100%;
    overflow-x: clip;
}

.status-pill[b-mmby3feq9p] {
    align-items: center;
    backdrop-filter: blur(1rem);
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid var(--garden-border);
    border-radius: 999px;
    box-shadow: var(--garden-shadow-soft);
    display: inline-flex;
    gap: 0.5rem;
    min-height: 2.7rem;
    padding: 0.6rem 0.9rem;
    color: var(--app-text-muted);
    font-weight: 700;
}

.status-dot[b-mmby3feq9p] {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0.25rem rgba(34, 197, 94, 0.18);
}

@media (min-width: 760px) {
    .garden-shell[b-mmby3feq9p] {
        display: grid;
        grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
    }

    .garden-sidebar[b-mmby3feq9p] {
        position: sticky;
        top: 0;
        height: 100vh;
    }

    .garden-topbar[b-mmby3feq9p] {
        padding: 1.75rem clamp(1.5rem, 3vw, 2.75rem) 1rem;
    }

    .garden-content[b-mmby3feq9p] {
        padding: 0 clamp(1.5rem, 3vw, 2.75rem) 2.75rem;
    }
}

@media (max-width: 759.98px) {
    .garden-sidebar[b-mmby3feq9p] {
        border-radius: 0 0 1.5rem 1.5rem;
        max-height: none;
    }

    .garden-content[b-mmby3feq9p] {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
}

@media (max-width: 520px) {
    .garden-topbar[b-mmby3feq9p] {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 1rem;
    }
}

#blazor-error-ui[b-mmby3feq9p] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-mmby3feq9p] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-3hhmsvn3aj] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1rem;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.78%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.55rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-3hhmsvn3aj] {
    background-color: rgba(255, 255, 255, 0.24);
}

.brand-area[b-3hhmsvn3aj] {
    min-height: 4.5rem;
    padding: 1rem 1rem 0.75rem;
    flex-shrink: 0;
}

.brand[b-3hhmsvn3aj] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
}

.brand:hover[b-3hhmsvn3aj] {
    color: #fff;
}

.brand-icon[b-3hhmsvn3aj] {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.26), rgba(16, 185, 129, 0.3));
    color: #ecfeff;
}

.brand strong[b-3hhmsvn3aj],
.brand small[b-3hhmsvn3aj] {
    display: block;
}

.brand small[b-3hhmsvn3aj] {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
}

.nav-list[b-3hhmsvn3aj] {
    display: grid;
    gap: 0.35rem;
    padding: 0 1rem 1rem;
}

.nav-group-label[b-3hhmsvn3aj] {
    color: rgba(203, 213, 225, 0.58);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0.85rem 0 0.25rem 0.35rem;
    text-transform: uppercase;
}

.nav-list[b-3hhmsvn3aj]  .nav-app-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--app-radius-md);
    color: rgba(255, 255, 255, 0.76);
    display: flex;
    gap: 0.8rem;
    min-height: 3.35rem;
    padding: 0.65rem 0.8rem;
    text-decoration: none;
    transition: background var(--app-transition-normal) var(--app-ease-standard), border-color var(--app-transition-normal) var(--app-ease-standard), transform var(--app-transition-normal) var(--app-ease-standard);
}

.nav-list[b-3hhmsvn3aj]  .nav-app-link.active {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(139, 92, 246, 0.22));
    border-color: rgba(255, 255, 255, 0.18);
    color: white;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0.85rem 1.8rem rgba(0, 0, 0, 0.18);
}

.nav-list[b-3hhmsvn3aj]  .nav-app-link:hover {
    background: rgba(148, 163, 184, 0.12);
    color: white;
    transform: translateX(0.15rem);
}

.nav-icon[b-3hhmsvn3aj] {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    color: #bae6fd;
}

.nav-list[b-3hhmsvn3aj]  .nav-app-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.nav-qr[b-3hhmsvn3aj] {
    display: grid;
    flex-shrink: 0;
    gap: 0.5rem;
    justify-items: center;
    margin: 0.5rem 1rem;
    padding: 1rem 0 max(0.75rem, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-qr-code[b-3hhmsvn3aj] {
    background: #ffffff;
    border-radius: 0.9rem;
    box-shadow: 0 0.75rem 1.75rem rgba(13, 36, 24, 0.35);
    display: grid;
    aspect-ratio: 1;
    width: 5.5rem;
    overflow: hidden;
    padding: 0.3rem;
    place-items: center;
}

.nav-qr-code svg[b-3hhmsvn3aj] {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
}

.nav-qr small[b-3hhmsvn3aj] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-align: center;
}

.nav-scrollable[b-3hhmsvn3aj] {
    display: none;
}

.nav-qr[b-3hhmsvn3aj] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-3hhmsvn3aj] {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.navbar-toggler:checked ~ .nav-qr[b-3hhmsvn3aj] {
    display: grid;
}

@media (min-width: 641px) {
    .navbar-toggler[b-3hhmsvn3aj] {
        display: none;
    }

    .nav-scrollable[b-3hhmsvn3aj] {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .nav-qr[b-3hhmsvn3aj] {
        display: grid;
    }
}

@media (max-width: 640.98px) {
    .brand-area[b-3hhmsvn3aj] {
        padding-right: 5rem;
    }

    .nav-scrollable[b-3hhmsvn3aj] {
        padding-bottom: 0.75rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-cdccf5d7lf],
.components-reconnect-repeated-attempt-visible[b-cdccf5d7lf],
.components-reconnect-failed-visible[b-cdccf5d7lf],
.components-pause-visible[b-cdccf5d7lf],
.components-resume-failed-visible[b-cdccf5d7lf],
.components-rejoining-animation[b-cdccf5d7lf] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-cdccf5d7lf],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-cdccf5d7lf],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-cdccf5d7lf],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-cdccf5d7lf],
#components-reconnect-modal.components-reconnect-retrying[b-cdccf5d7lf],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-cdccf5d7lf],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-cdccf5d7lf],
#components-reconnect-modal.components-reconnect-failed[b-cdccf5d7lf],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-cdccf5d7lf] {
    display: block;
}


#components-reconnect-modal[b-cdccf5d7lf] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-cdccf5d7lf 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-cdccf5d7lf 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-cdccf5d7lf 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-cdccf5d7lf]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-cdccf5d7lf 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-cdccf5d7lf {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-cdccf5d7lf {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-cdccf5d7lf {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-cdccf5d7lf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-cdccf5d7lf] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-cdccf5d7lf] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-cdccf5d7lf] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-cdccf5d7lf] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-cdccf5d7lf] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-cdccf5d7lf] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-cdccf5d7lf 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-cdccf5d7lf] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-cdccf5d7lf {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Billiard.razor.rz.scp.css */
.player-name-cell[b-nx8a1yaq0r] {
    align-items: center;
    display: inline-flex;
    gap: 0.65rem;
}

.match-player-row[b-nx8a1yaq0r] {
    align-items: center;
    color: #587062;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.match-player-row strong[b-nx8a1yaq0r] {
    color: #102116;
}

.avatar-cropper-backdrop[b-nx8a1yaq0r] {
    align-items: center;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 2000;
}

.avatar-cropper-modal[b-nx8a1yaq0r] {
    background: #f8fff9;
    border: 1px solid rgba(22, 101, 52, 0.18);
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.3);
    max-width: 42rem;
    padding: 1.25rem;
    width: min(100%, 42rem);
}

.avatar-cropper-stage[b-nx8a1yaq0r] {
    aspect-ratio: 1;
    background: #0f172a;
    border-radius: 1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    margin: 1rem auto;
    max-width: min(70vw, 32rem);
    overflow: hidden;
    position: relative;
    touch-action: none;
    width: 100%;
}

.avatar-cropper-stage canvas[b-nx8a1yaq0r] {
    cursor: grab;
    display: block;
    height: 100%;
    touch-action: none;
    width: 100%;
}

.avatar-cropper-stage canvas:active[b-nx8a1yaq0r] {
    cursor: grabbing;
}

.avatar-cropper-frame[b-nx8a1yaq0r] {
    border: 3px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.2), inset 0 0 0 1px rgba(22, 163, 74, 0.35);
    inset: 1.4rem;
    pointer-events: none;
    position: absolute;
}

.avatar-cropper-zoom[b-nx8a1yaq0r] {
    align-items: center;
    color: #24412d;
    display: flex;
    font-weight: 800;
    gap: 0.85rem;
    margin: 0.75rem 0 1rem;
}

.avatar-cropper-zoom input[b-nx8a1yaq0r] {
    accent-color: #16a34a;
    flex: 1;
}

.avatar-cropper-message[b-nx8a1yaq0r] {
    margin: 0.75rem 0 0;
}

.rules-modal-backdrop[b-nx8a1yaq0r] {
    align-items: center;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 2000;
}

.rules-modal[b-nx8a1yaq0r] {
    background: #f8fff9;
    border: 1px solid rgba(22, 101, 52, 0.18);
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.3);
    max-height: min(85vh, 42rem);
    max-width: 34rem;
    overflow-y: auto;
    padding: 1.25rem;
    width: min(100%, 34rem);
}

.rules-modal h4[b-nx8a1yaq0r] {
    color: #166534;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    margin: 1.1rem 0 0.35rem;
    text-transform: uppercase;
}

.rules-modal h4:first-of-type[b-nx8a1yaq0r] {
    margin-top: 0.25rem;
}

.rules-modal p[b-nx8a1yaq0r] {
    color: #24412d;
    margin: 0;
}

.rules-modal ul[b-nx8a1yaq0r] {
    color: #24412d;
    margin: 0.35rem 0 0;
    padding-left: 1.2rem;
}

.rules-modal li[b-nx8a1yaq0r] {
    margin: 0.35rem 0;
}

.rules-modal li strong[b-nx8a1yaq0r] {
    color: #102116;
}
/* /Components/Pages/BilliardKo.razor.rz.scp.css */
.ko-shell[b-wa3edyjbkz] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    background: radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 32%), #050910;
    color: #f8fafc;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ko-sidebar[b-wa3edyjbkz] {
    position: relative;
    min-height: 100vh;
    padding: 28px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(8, 13, 23, 0.96), rgba(4, 8, 14, 0.98));
    overflow: hidden;
}

.ko-brand[b-wa3edyjbkz] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
}

.ko-ball[b-wa3edyjbkz] {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #f8fafc 0 16%, #111827 18% 58%, #020617 100%);
    border: 2px solid rgba(168, 85, 247, 0.6);
    color: #111827;
    font-weight: 900;
    box-shadow: 0 0 28px rgba(168, 85, 247, 0.35);
}

.ko-brand strong[b-wa3edyjbkz],
.ko-brand small[b-wa3edyjbkz] {
    display: block;
}

.ko-brand strong[b-wa3edyjbkz] {
    font-size: 1.15rem;
    letter-spacing: 0.04em;
}

.ko-brand small[b-wa3edyjbkz] {
    color: #a855f7;
    font-size: 0.72rem;
    font-weight: 900;
}

.ko-nav[b-wa3edyjbkz] {
    display: grid;
    gap: 8px;
}

.ko-nav a[b-wa3edyjbkz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #b9c3d1;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
}

.ko-nav a.active[b-wa3edyjbkz],
.ko-nav a:hover[b-wa3edyjbkz] {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #fff;
    box-shadow: 0 12px 28px rgba(109, 40, 217, 0.35);
}

.ko-sidebar-image[b-wa3edyjbkz] {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 18px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    padding: 14px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, transparent, rgba(2, 6, 12, 0.94));
}

.ko-sidebar-image img[b-wa3edyjbkz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.48;
    filter: saturate(1.15);
}

.ko-sidebar-image strong[b-wa3edyjbkz],
.ko-sidebar-image span[b-wa3edyjbkz] {
    position: relative;
    z-index: 1;
}

.ko-sidebar-image strong[b-wa3edyjbkz],
.ko-sidebar-image span[b-wa3edyjbkz] {
    color: #a855f7;
    font-weight: 900;
}

.ko-main[b-wa3edyjbkz] {
    padding: 30px 28px;
    overflow: hidden;
}

.ko-topbar[b-wa3edyjbkz] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 24px;
}

.ko-topbar h1[b-wa3edyjbkz] {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2rem);
}

.ko-topbar span[b-wa3edyjbkz],
.ko-clock span[b-wa3edyjbkz],
.ko-muted[b-wa3edyjbkz] {
    color: #9aa8ba;
}

.ko-top-actions[b-wa3edyjbkz] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ko-clock[b-wa3edyjbkz] {
    display: grid;
    text-align: right;
    font-size: 0.78rem;
}

.ko-live[b-wa3edyjbkz],
.ko-card-button[b-wa3edyjbkz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.28);
}

.ko-grid[b-wa3edyjbkz] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
    gap: 18px;
}

.ko-card[b-wa3edyjbkz] {
    min-height: 220px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(8, 13, 23, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 70px rgba(0, 0, 0, 0.24);
}

.ko-card-title[b-wa3edyjbkz] {
    color: #a855f7;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

.ko-versus-stage[b-wa3edyjbkz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    text-align: center;
}

.ko-versus-player[b-wa3edyjbkz] {
    display: grid;
    justify-items: center;
    gap: 7px;
}

.ko-winner-button[b-wa3edyjbkz] {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 12px 8px;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.ko-winner-button:hover:not(:disabled)[b-wa3edyjbkz] {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.55);
    background: rgba(168, 85, 247, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 24px rgba(168, 85, 247, 0.18);
}

.ko-winner-button:disabled[b-wa3edyjbkz] {
    cursor: default;
    opacity: 0.68;
}

.ko-versus-player strong[b-wa3edyjbkz] {
    font-size: 0.95rem;
}

.ko-versus-player span[b-wa3edyjbkz],
.ko-vs small[b-wa3edyjbkz],
.ko-vs span[b-wa3edyjbkz] {
    color: #aab8ca;
    font-size: 0.72rem;
}

.ko-vs[b-wa3edyjbkz] {
    display: grid;
    justify-items: center;
    gap: 7px;
}

.ko-vs strong[b-wa3edyjbkz] {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(168, 85, 247, 0.75);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

.ko-score-row[b-wa3edyjbkz] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 16px;
    text-align: center;
}

.ko-score-row strong[b-wa3edyjbkz] {
    justify-self: center;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.35);
    font-size: 1.6rem;
}

.ko-score-row span[b-wa3edyjbkz] {
    color: #aab8ca;
    font-size: 0.78rem;
}

.ko-action-message[b-wa3edyjbkz] {
    margin: 14px 0 0;
    color: #c4b5fd;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
}

.ko-bracket[b-wa3edyjbkz] {
    display: grid;
    grid-template-columns: repeat(var(--rounds, 3), minmax(130px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.ko-round h3[b-wa3edyjbkz] {
    margin: 0 0 10px;
    color: #c4b5fd;
    font-size: 0.78rem;
}

.ko-bracket-match[b-wa3edyjbkz] {
    display: grid;
    gap: 4px;
    margin-bottom: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ko-bracket-match.open[b-wa3edyjbkz] {
    border-color: rgba(168, 85, 247, 0.34);
}

.ko-bracket-match span[b-wa3edyjbkz] {
    overflow: hidden;
    color: #dbeafe;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ko-card-button[b-wa3edyjbkz] {
    width: 100%;
    min-height: 32px;
    margin-top: 10px;
    background: rgba(148, 163, 184, 0.1);
    box-shadow: none;
    font-size: 0.76rem;
}

.ko-table[b-wa3edyjbkz],
.ko-next-list[b-wa3edyjbkz],
.ko-break-list[b-wa3edyjbkz] {
    display: grid;
    gap: 8px;
}

.ko-table-row[b-wa3edyjbkz],
.ko-next-list > div[b-wa3edyjbkz],
.ko-break-list > div[b-wa3edyjbkz] {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.ko-table-row[b-wa3edyjbkz] {
    grid-template-columns: 28px 34px minmax(0, 1fr) 28px 28px 42px;
}

.ko-table-row strong[b-wa3edyjbkz],
.ko-break-list strong[b-wa3edyjbkz],
.ko-next-list strong[b-wa3edyjbkz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ko-table-row span:first-child[b-wa3edyjbkz],
.ko-break-list span:first-child[b-wa3edyjbkz] {
    color: #facc15;
    font-weight: 900;
}

.ko-table-row em[b-wa3edyjbkz],
.ko-next-list em[b-wa3edyjbkz],
.ko-break-list em[b-wa3edyjbkz] {
    color: #aab8ca;
    font-style: normal;
    font-size: 0.78rem;
}

.ko-table-row b[b-wa3edyjbkz],
.ko-break-list em[b-wa3edyjbkz] {
    color: #a855f7;
}

.ko-stats[b-wa3edyjbkz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ko-champion-state[b-wa3edyjbkz] {
    align-content: center;
    gap: 18px;
    min-height: 340px;
}

.ko-champion-state span[b-wa3edyjbkz] {
    color: #facc15;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ko-champion-state strong[b-wa3edyjbkz] {
    color: #f8fafc;
    font-size: clamp(1.4rem, 2.2vw, 2.1rem);
    text-shadow: 0 0 14px rgba(250, 204, 21, 0.36);
}

.ko-stats div[b-wa3edyjbkz] {
    min-height: 86px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(168, 85, 247, 0.18);
}

.ko-stats strong[b-wa3edyjbkz] {
    font-size: 1.8rem;
}

.ko-stats span[b-wa3edyjbkz] {
    color: #aab8ca;
    font-size: 0.78rem;
}

.ko-year-card[b-wa3edyjbkz] {
    grid-column: span 1;
}

.ko-year-empty[b-wa3edyjbkz] {
    min-height: 190px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    text-align: center;
    color: #aab8ca;
}

.ko-year-empty svg[b-wa3edyjbkz] {
    color: #facc15;
    font-size: 2rem;
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.4));
}

.ko-year-empty strong[b-wa3edyjbkz] {
    color: #f8fafc;
    font-size: 1.05rem;
}

.ko-year-leader[b-wa3edyjbkz] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(250, 204, 21, 0.28);
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.14), rgba(124, 58, 237, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 24px rgba(250, 204, 21, 0.1);
}

.ko-year-leader small[b-wa3edyjbkz],
.ko-year-leader span[b-wa3edyjbkz] {
    color: #cbd5e1;
    font-size: 0.76rem;
}

.ko-year-leader small[b-wa3edyjbkz] {
    color: #facc15;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ko-year-leader strong[b-wa3edyjbkz] {
    display: block;
    color: #fff;
    font-size: 1.25rem;
    margin: 3px 0;
}

.ko-year-list[b-wa3edyjbkz] {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.ko-year-row[b-wa3edyjbkz] {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.ko-year-row strong[b-wa3edyjbkz],
.ko-year-row span[b-wa3edyjbkz] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ko-year-row strong[b-wa3edyjbkz] {
    color: #f8fafc;
    font-size: 0.92rem;
}

.ko-year-row span[b-wa3edyjbkz] {
    color: #94a3b8;
    font-size: 0.72rem;
}

.ko-year-row em[b-wa3edyjbkz] {
    color: #a855f7;
    font-size: 1rem;
    font-style: normal;
    font-weight: 900;
}

.ko-next-list > div[b-wa3edyjbkz] {
    grid-template-columns: 50px minmax(0, 1fr) 28px minmax(0, 1fr) 70px;
}

.ko-break-list > div[b-wa3edyjbkz] {
    grid-template-columns: 24px 32px minmax(0, 1fr) 40px;
}

.ko-champion-state[b-wa3edyjbkz],
.ko-empty[b-wa3edyjbkz] {
    min-height: 220px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 10px;
}

.ko-empty[b-wa3edyjbkz] {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.7);
    padding: 30px;
}

.ko-empty.danger[b-wa3edyjbkz] {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.26);
}

.ko-ball[b-wa3edyjbkz] {
    position: relative;
}

.ko-ball-crown[b-wa3edyjbkz] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.7));
}

.ko-status-chip[b-wa3edyjbkz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}

.ko-status-chip.running[b-wa3edyjbkz] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.ko-status-chip.finished[b-wa3edyjbkz] {
    color: #a855f7;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.35);
}

.ko-status-dot[b-wa3edyjbkz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.ko-back[b-wa3edyjbkz] {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.ko-back:hover[b-wa3edyjbkz] {
    color: #f8fafc;
}

.ko-progress[b-wa3edyjbkz] {
    margin-top: 16px;
    display: grid;
    gap: 8px;
}

.ko-progress-labels[b-wa3edyjbkz] {
    display: flex;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 700;
}

.ko-progress-track[b-wa3edyjbkz] {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}

.ko-progress-fill[b-wa3edyjbkz] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    box-shadow: 0 0 14px rgba(124, 58, 237, 0.55);
    transition: width 0.3s ease;
}

.ko-table-chip[b-wa3edyjbkz] {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd !important;
    font-weight: 700;
}

.ko-bracket-match span[b-wa3edyjbkz] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ko-bracket-match span em[b-wa3edyjbkz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.18);
    color: #94a3b8;
    font-style: normal;
    font-size: 0.66rem;
    font-weight: 800;
}

.ko-bracket-match span.winner[b-wa3edyjbkz] {
    color: #22c55e;
    font-weight: 800;
}

.ko-bracket-match span.winner em[b-wa3edyjbkz] {
    background: rgba(34, 197, 94, 0.22);
    color: #22c55e;
}

.ko-round-final[b-wa3edyjbkz] {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
}

.ko-trophy[b-wa3edyjbkz] {
    font-size: 2.4rem;
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.55));
}

.ko-round-final span[b-wa3edyjbkz] {
    color: #facc15;
    font-weight: 900;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}

.ko-table-head[b-wa3edyjbkz] {
    display: grid;
    grid-template-columns: 28px 34px minmax(0, 1fr) 28px 28px 42px;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ko-rank[b-wa3edyjbkz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-weight: 900;
    color: #0b111d;
    background: rgba(148, 163, 184, 0.3);
}

.ko-rank-1[b-wa3edyjbkz] {
    background: linear-gradient(135deg, #facc15, #f59e0b);
}

.ko-rank-2[b-wa3edyjbkz] {
    background: linear-gradient(135deg, #e5e7eb, #94a3b8);
}

.ko-rank-3[b-wa3edyjbkz] {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    color: #fff;
}

.ko-stat-icon[b-wa3edyjbkz] {
    color: #a855f7;
    width: 26px;
    height: 26px;
}

@media (max-width: 1100px) {
    .ko-shell[b-wa3edyjbkz] {
        grid-template-columns: 1fr;
    }

    .ko-sidebar[b-wa3edyjbkz] {
        min-height: auto;
    }

    .ko-sidebar-image[b-wa3edyjbkz] {
        display: none;
    }

    .ko-grid[b-wa3edyjbkz] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .ko-main[b-wa3edyjbkz] {
        padding: 18px;
    }

    .ko-topbar[b-wa3edyjbkz],
    .ko-top-actions[b-wa3edyjbkz] {
        align-items: flex-start;
        flex-direction: column;
    }

    .ko-versus-stage[b-wa3edyjbkz],
    .ko-score-row[b-wa3edyjbkz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Cameras.razor.rz.scp.css */
.camera-header[b-lng5f4qsvv] {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.camera-status-pill[b-lng5f4qsvv] {
    align-items: center;
    background: rgba(34, 197, 94, 0.14);
    border-radius: 999px;
    color: #166534;
    display: inline-flex;
    font-weight: 850;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.camera-grid[b-lng5f4qsvv] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-bottom: 1.25rem;
}

.camera-card[b-lng5f4qsvv] {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1.4rem 3.5rem rgba(13, 36, 24, 0.09);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

.camera-card.selected[b-lng5f4qsvv] {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 1.4rem 3.5rem rgba(124, 58, 237, 0.16);
}

.camera-preview[b-lng5f4qsvv] {
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), transparent 45%), linear-gradient(135deg, #0f172a, #334155);
    color: #fff;
    display: grid;
    gap: 0.25rem;
    min-height: 10rem;
    padding: 1rem;
}

.camera-preview span[b-lng5f4qsvv] {
    font-size: 2.5rem;
}

.camera-preview small[b-lng5f4qsvv] {
    color: rgba(255, 255, 255, 0.76);
}

.camera-card-footer[b-lng5f4qsvv] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0.85rem 1rem;
}

.camera-card-footer small[b-lng5f4qsvv] {
    color: #587062;
}

.camera-state[b-lng5f4qsvv] {
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 850;
    padding: 0.35rem 0.6rem;
}

.camera-state.online[b-lng5f4qsvv] {
    background: rgba(34, 197, 94, 0.14);
    color: #166534;
}

.camera-state.offline[b-lng5f4qsvv] {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.camera-dashboard[b-lng5f4qsvv],
.camera-settings-grid[b-lng5f4qsvv] {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.8fr);
    margin-bottom: 1.25rem;
}

.camera-live-card[b-lng5f4qsvv] {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1.4rem 3.5rem rgba(13, 36, 24, 0.09);
    padding: 1.25rem;
}

.camera-live-placeholder[b-lng5f4qsvv] {
    align-items: center;
    background: linear-gradient(135deg, #020617, #1e293b);
    border-radius: 1.4rem;
    color: #fff;
    display: grid;
    gap: 0.3rem;
    min-height: 22rem;
    padding: 1.25rem;
    place-items: center;
    text-align: center;
}

.camera-live-placeholder span[b-lng5f4qsvv] {
    font-size: 4rem;
}

.camera-live-placeholder small[b-lng5f4qsvv] {
    color: rgba(255, 255, 255, 0.72);
}

.camera-url-preview[b-lng5f4qsvv] {
    margin-top: 1rem;
}

.camera-control-card[b-lng5f4qsvv] {
    align-self: start;
}

.camera-action-grid[b-lng5f4qsvv] {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.ptz-pad[b-lng5f4qsvv] {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1rem;
}

.ptz-pad button[b-lng5f4qsvv] {
    border: 1px solid rgba(17, 53, 31, 0.12);
    border-radius: 0.85rem;
    background: rgba(238, 245, 239, 0.78);
    font-size: 1.1rem;
    font-weight: 900;
    min-height: 2.8rem;
}

@media (max-width: 900px) {
    .camera-dashboard[b-lng5f4qsvv],
    .camera-settings-grid[b-lng5f4qsvv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .camera-header[b-lng5f4qsvv] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Dart.razor.rz.scp.css */
.dart-header .dart-scene[b-iamf8euqu8] {
    align-items: center;
    display: flex;
    font-size: clamp(4rem, 10vw, 7rem);
    justify-content: center;
}

.dart-status-grid[b-iamf8euqu8],
.dart-content-grid[b-iamf8euqu8] {
    display: grid;
    gap: 1rem;
}

.dart-status-grid[b-iamf8euqu8] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dart-content-grid[b-iamf8euqu8] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

.dart-status-card[b-iamf8euqu8] {
    min-height: 100%;
}

.current-user-chip.dart-online[b-iamf8euqu8] {
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
}

.current-user-chip.dart-offline[b-iamf8euqu8] {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

.dart-facts[b-iamf8euqu8] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1rem 0 0;
}

.dart-facts div[b-iamf8euqu8],
.dart-highlight-grid div[b-iamf8euqu8],
.dart-list-row[b-iamf8euqu8] {
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    padding: 0.8rem;
}

.dart-facts dt[b-iamf8euqu8],
.dart-highlight-grid small[b-iamf8euqu8],
.dart-list-row small[b-iamf8euqu8] {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dart-facts dd[b-iamf8euqu8] {
    color: #e2e8f0;
    font-weight: 700;
    margin: 0.25rem 0 0;
}

.dart-list[b-iamf8euqu8] {
    display: grid;
    gap: 0.65rem;
}

.dart-list-row[b-iamf8euqu8] {
    align-items: center;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: auto 1fr auto;
}

.dart-list-row.stack[b-iamf8euqu8],
.dart-list-row.ranking[b-iamf8euqu8] {
    align-items: start;
    grid-template-columns: auto 1fr;
}

.dart-list-row.stack span[b-iamf8euqu8],
.dart-list-row.ranking small[b-iamf8euqu8] {
    grid-column: 2;
}

.dart-rank[b-iamf8euqu8] {
    align-items: center;
    background: rgba(56, 189, 248, 0.16);
    border-radius: 999px;
    color: #7dd3fc;
    display: inline-flex;
    font-weight: 800;
    height: 2rem;
    justify-content: center;
    min-width: 2rem;
}

.dart-highlight-grid[b-iamf8euqu8] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dart-highlight-grid strong[b-iamf8euqu8] {
    color: #e2e8f0;
    display: block;
    font-size: 1.45rem;
    margin-top: 0.25rem;
}

.dart-highlight-grid span[b-iamf8euqu8],
.dart-list-row span[b-iamf8euqu8] {
    color: #cbd5e1;
}

@media (max-width: 900px) {
    .dart-status-grid[b-iamf8euqu8],
    .dart-content-grid[b-iamf8euqu8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dart-facts[b-iamf8euqu8],
    .dart-highlight-grid[b-iamf8euqu8],
    .dart-list-row[b-iamf8euqu8],
    .dart-list-row.stack[b-iamf8euqu8],
    .dart-list-row.ranking[b-iamf8euqu8] {
        grid-template-columns: 1fr;
    }

    .dart-list-row.stack span[b-iamf8euqu8],
    .dart-list-row.ranking small[b-iamf8euqu8] {
        grid-column: auto;
    }
}
/* /Components/Pages/GardenDashboard.razor.rz.scp.css */
.gd-mobile-shell[b-09thetqf2w] {
    display: none;
}

:global(html.dashboard-scroll-locked)[b-09thetqf2w],
:global(body.dashboard-scroll-locked)[b-09thetqf2w] {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

.gd-desktop-shell[b-09thetqf2w] {
    display: grid;
}

.gd-dashboard[b-09thetqf2w] {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 10px;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    overscroll-behavior: none;
    padding: 10px 12px 12px;
    box-sizing: border-box;
    background: #060a0e;
    color: #e6edf3;
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* Top bar */
.gd-topbar[b-09thetqf2w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 4px;
}

.gd-brand[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.gd-brand-icon[b-09thetqf2w] {
    font-size: 1.3rem;
}

.gd-brand-title em[b-09thetqf2w] {
    font-style: normal;
    color: #4ade80;
}

.gd-topbar-status[b-09thetqf2w] {
    display: flex;
    gap: 18px;
    color: #9fb0bf;
    font-size: 0.9rem;
}

.gd-topbar-chip[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gd-topbar-home[b-09thetqf2w] {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    color: #e6edf3;
    display: flex;
    height: 20px;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    width: 20px;
}

    .gd-topbar-home:hover[b-09thetqf2w] {
        background: rgba(74, 222, 128, 0.16);
        border-color: rgba(74, 222, 128, 0.36);
        color: #4ade80;
    }

.gd-display-toggle[b-09thetqf2w] {
    border: 1px solid rgba(56, 189, 248, 0.18);
    cursor: pointer;
    font-size: 0.78rem;
}

    .gd-display-toggle.active[b-09thetqf2w] {
        background: rgba(56, 189, 248, 0.18);
        border-color: rgba(56, 189, 248, 0.44);
        color: #38bdf8;
    }

/* Status cards */
.gd-dashboard-header-button[b-09thetqf2w] {
    width: 100%;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gd-dashboard-header-button:focus-visible[b-09thetqf2w] {
    outline: 2px solid rgba(34, 211, 238, 0.75);
    outline-offset: 4px;
    border-radius: 22px;
}

.gd-status-row[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.gd-status-card-dart[b-09thetqf2w] {
    color: inherit;
    text-decoration: none;
}

.gd-status-card-dart:hover[b-09thetqf2w] {
    border-color: rgba(56, 189, 248, 0.42);
    color: inherit;
}

.gd-status-card-dart .gd-status-card-hero[b-09thetqf2w] {
    align-items: center;
    color: rgba(56, 189, 248, 0.32);
    display: flex;
    font-size: 4rem;
    justify-content: center;
}

.gd-status-row.gd-compact-status[b-09thetqf2w],
.gd-status-row.gd-compact-energy-status[b-09thetqf2w] {
    align-items: stretch;
    background: linear-gradient(145deg, rgba(12, 20, 33, 0.96), rgba(6, 11, 19, 0.97));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.28);
    display: grid;
    gap: 0;
    min-height: 84px;
    overflow: hidden;
    padding: 8px 10px;
}

.gd-status-row.gd-compact-status[b-09thetqf2w] {
    grid-template-columns: 0.72fr 0.95fr 0.82fr 0.68fr auto;
}

.gd-status-row.gd-compact-energy-status[b-09thetqf2w] {
    grid-template-columns: 0.9fr 0.9fr 2.45fr 2.45fr;
}

.gd-compact-segment[b-09thetqf2w] {
    align-items: center;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0;
    color: inherit;
    display: flex;
    font: inherit;
    gap: 8px;
    min-width: 0;
    padding: 6px 10px;
    text-align: left;
    text-decoration: none;
}

    .gd-compact-segment:first-child[b-09thetqf2w] {
        border-left: 0;
        padding-left: 2px;
    }

    .gd-compact-segment:hover[b-09thetqf2w] {
        background: rgba(56, 189, 248, 0.045);
        color: inherit;
    }

.gd-compact-icon[b-09thetqf2w] {
    align-items: center;
    background: transparent;
    border-radius: 0;
    color: #38bdf8;
    display: flex;
    flex: 0 0 auto;
    height: 36px;
    justify-content: center;
    position: relative;
    width: 36px;
    overflow: visible;
    z-index: 1;
}

.gd-compact-icon .gd-reference-icon[b-09thetqf2w],
.gd-compact-sun .gd-reference-icon[b-09thetqf2w] {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.gd-compact-pump .gd-compact-icon[b-09thetqf2w] {
    background: transparent;
    color: #4ade80;
}

.gd-compact-pump[b-09thetqf2w],
.gd-compact-water[b-09thetqf2w],
.gd-compact-battery[b-09thetqf2w],
.gd-compact-solar[b-09thetqf2w],
.gd-compact-consumption[b-09thetqf2w],
.gd-compact-bms[b-09thetqf2w] {
    display: flex;
}

.gd-compact-pump .gd-compact-badge[b-09thetqf2w],
.gd-compact-water .gd-compact-bar[b-09thetqf2w] {
    margin-left: auto;
}

.gd-compact-water .gd-compact-bar[b-09thetqf2w] {
    align-self: center;
    width: 64px;
}

.gd-compact-energy-title .gd-compact-icon[b-09thetqf2w],
.gd-compact-sun[b-09thetqf2w] {
    background: transparent;
    color: #facc15;
}

.gd-compact-text[b-09thetqf2w] {
    display: grid;
    gap: 5px;
    min-width: 0;
}

    .gd-compact-text em[b-09thetqf2w] {
        color: #9aaabe;
        font-size: 0.64rem;
        font-style: normal;
        font-weight: 800;
        letter-spacing: 0.05em;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .gd-compact-text strong[b-09thetqf2w] {
        color: #e7eef8;
        font-size: 1.18rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.gd-compact-pool .gd-compact-text strong[b-09thetqf2w] {
    font-size: 1.36rem;
}

.gd-compact-pump .gd-compact-text strong[b-09thetqf2w] {
    color: #4ade80;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: -0.04em;
}

.gd-compact-water .gd-compact-text strong[b-09thetqf2w],
.gd-compact-mode .gd-compact-text strong[b-09thetqf2w],
.gd-compact-bms .gd-compact-text strong[b-09thetqf2w] {
    color: #38bdf8;
}

.gd-compact-consumption .gd-compact-text strong[b-09thetqf2w] {
    color: #c084fc;
}

.gd-compact-battery .gd-compact-text strong[b-09thetqf2w] {
    color: #86efac;
}

.gd-compact-solar .gd-compact-text strong[b-09thetqf2w] {
    color: #facc15;
}

.gd-compact-bms.discharging .gd-compact-text strong[b-09thetqf2w] {
    color: #f87171;
}

.gd-compact-bms.charging .gd-compact-text strong[b-09thetqf2w] {
    color: #4ade80;
}

.gd-compact-badge[b-09thetqf2w] {
    align-self: center;
    border-radius: 5px;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    padding: 5px 7px;
}

    .gd-compact-badge.on[b-09thetqf2w] {
        background: rgba(34, 197, 94, 0.22);
        color: #4ade80;
    }

    .gd-compact-badge.off[b-09thetqf2w] {
        background: rgba(148, 163, 184, 0.12);
        color: #94a3b8;
    }

.gd-compact-bar[b-09thetqf2w] {
    align-self: end;
    background: rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    display: block;
    height: 5px;
    margin-left: 0;
    overflow: hidden;
    width: 100%;
}

    .gd-compact-bar i[b-09thetqf2w] {
        background: linear-gradient(90deg, #38bdf8, #0ea5e9);
        display: block;
        height: 100%;
    }

.gd-compact-plot[b-09thetqf2w] {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: 1fr;
}

.gd-compact-metric-plot[b-09thetqf2w] {
    grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1.6fr);
}

.gd-compact-metric-value[b-09thetqf2w] {
    align-items: center;
    display: flex;
    gap: 10px;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

    .gd-compact-plot svg[b-09thetqf2w] {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
        height: 54px;
        min-width: 0;
        overflow: visible;
        width: 100%;
    }

.gd-compact-plot .gd-compact-text[b-09thetqf2w] {
    align-self: end;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    max-width: 52px;
    min-width: 0;
    text-align: center;
}

.gd-compact-plot .gd-compact-icon[b-09thetqf2w] {
    align-self: start;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin-top: 2px;
}

.gd-compact-metric-plot .gd-compact-icon[b-09thetqf2w] {
    align-self: center;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    margin-top: 0;
}

.gd-compact-metric-plot .gd-compact-text[b-09thetqf2w] {
    align-self: center;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    max-width: none;
    text-align: left;
}

.gd-compact-plot .gd-compact-text em[b-09thetqf2w] {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
}

.gd-compact-water-plot[b-09thetqf2w] {
    justify-self: end;
    width: clamp(190px, 16.666vw, 330px);
}

.gd-compact-water-plot .gd-mini-plot-line[b-09thetqf2w] {
    stroke: #38bdf8;
    stroke-width: 1.9;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.62));
}

.gd-compact-pool .gd-compact-text strong[b-09thetqf2w],
.gd-compact-pump .gd-compact-text strong[b-09thetqf2w],
.gd-compact-water .gd-compact-text strong[b-09thetqf2w],
.gd-compact-mode .gd-compact-text strong[b-09thetqf2w],
.gd-compact-consumption .gd-compact-text strong[b-09thetqf2w],
.gd-compact-battery .gd-compact-text strong[b-09thetqf2w],
.gd-compact-bms .gd-compact-text strong[b-09thetqf2w],
.gd-compact-solar .gd-compact-text strong[b-09thetqf2w] {
    font-size: clamp(1.28rem, 1.75vw, 1.72rem);
}

.gd-compact-plot .gd-mini-plot-line[b-09thetqf2w] {
    stroke: #38bdf8;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.72));
}

.gd-compact-plot-area[b-09thetqf2w] {
    fill: rgba(2, 8, 16, 0.48);
    stroke: rgba(148, 163, 184, 0.12);
    stroke-width: 1;
}

.gd-compact-plot-grid[b-09thetqf2w] {
    stroke: rgba(148, 163, 184, 0.14);
    stroke-dasharray: 2 4;
    stroke-width: 1;
}

.gd-compact-plot-axis[b-09thetqf2w] {
    stroke: rgba(148, 163, 184, 0.32);
    stroke-dasharray: 5 5;
    stroke-width: 1;
}

.gd-compact-plot-axis.top[b-09thetqf2w] {
    stroke: rgba(226, 232, 240, 0.44);
}

.gd-compact-plot-axis.middle[b-09thetqf2w] {
    stroke: rgba(148, 163, 184, 0.18);
}

.gd-compact-plot-axis.zero[b-09thetqf2w] {
    stroke: rgba(56, 189, 248, 0.42);
    stroke-dasharray: 6 4;
}

.gd-compact-plot-label[b-09thetqf2w] {
    fill: rgba(203, 213, 225, 0.82);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.03em;
    paint-order: stroke;
    stroke: rgba(2, 6, 12, 0.9);
    stroke-width: 2.6px;
}

.gd-compact-plot-label.top[b-09thetqf2w] {
    fill: rgba(241, 245, 249, 0.92);
}

.gd-compact-plot-label.middle[b-09thetqf2w] {
    fill: rgba(148, 163, 184, 0.74);
}

.gd-compact-battery-plot .gd-mini-plot-line[b-09thetqf2w] {
    stroke: #4ade80;
    filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.72));
}

.gd-compact-bms-plot .gd-bms-current-line-positive[b-09thetqf2w] {
    stroke: #22c55e;
    filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.72));
}

.gd-compact-bms-plot .gd-bms-current-line-negative[b-09thetqf2w] {
    stroke: #ef4444;
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.72));
}

.gd-bms-current-positive-area[b-09thetqf2w] {
    fill: rgba(34, 197, 94, 0.14);
}

.gd-bms-current-negative-area[b-09thetqf2w] {
    fill: rgba(249, 115, 22, 0.14);
}

/* Status detail popup (öffnet von oben nach unten) */
.gd-status-detail-overlay[b-09thetqf2w] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    background: rgba(4, 8, 12, 0.55);
    backdrop-filter: blur(3px);
    animation: gd-status-fade-b-09thetqf2w 0.2s ease;
}

.gd-status-detail[b-09thetqf2w] {
    width: min(1180px, 100%);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: linear-gradient(180deg, #0D1523, #0B1220);
    border: 1px solid #223247;
    border-radius: 14px;
    padding: 20px 22px 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    transform-origin: top center;
    animation: gd-status-drop-b-09thetqf2w 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes gd-status-fade-b-09thetqf2w {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gd-status-drop-b-09thetqf2w {
    from {
        opacity: 0;
        transform: translateY(-24px) scaleY(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

.gd-status-detail-head[b-09thetqf2w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.gd-status-detail-title[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #e8f1f8;
}

.gd-status-detail-logo[b-09thetqf2w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0, 200, 255, 0.16);
    color: #00C8FF;
}

.gd-status-detail-grid[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.gd-status-card[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid #223247;
    border-radius: 14px;
    background: rgba(13, 21, 35, 0.72);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}

/* Große, coole Hero-Grafik oben rechts in jeder Karte */
.gd-status-card-hero[b-09thetqf2w] {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.gd-status-card:hover .gd-status-card-hero[b-09thetqf2w] {
    transform: scale(1.06) translateY(-2px);
    opacity: 1;
}

.gd-reference-icon[b-09thetqf2w] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.45));
}

.gd-reference-icon.hero[b-09thetqf2w] {
    width: 88px;
    height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 18px rgba(0, 200, 255, 0.35));
}

.gd-status-card-hero.is-active .gd-reference-icon.hero[b-09thetqf2w] {
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(57, 211, 83, 0.55));
}

.gd-status-card-hero.is-off .gd-reference-icon.hero[b-09thetqf2w] {
    filter: grayscale(0.75) brightness(0.72) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
    opacity: 0.72;
}

.gd-status-card-mode .gd-status-card-hero.is-off .gd-reference-icon.hero[b-09thetqf2w] {
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 18px rgba(0, 200, 255, 0.35));
    opacity: 0.95;
}

.gd-status-card-pool-pump .gd-status-card-hero[b-09thetqf2w] {
    top: 6px;
    right: 10px;
    width: 118px;
    height: 118px;
}

.gd-status-card-pool-pump .gd-reference-icon.hero[b-09thetqf2w] {
    width: 118px;
    height: 118px;
}

.gd-status-card > header[b-09thetqf2w],
.gd-status-card > .gd-status-card-body[b-09thetqf2w] {
    position: relative;
    z-index: 2;
}

.gd-pool-pump-summary[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-right: 72px;
}

.gd-status-card-pool-pump .gd-status-card-body[b-09thetqf2w] {
    gap: 10px;
}

.gd-pool-pump-control-row[b-09thetqf2w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
}

.gd-pool-pump-state[b-09thetqf2w] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.gd-pool-pump-state small[b-09thetqf2w] {
    color: #728096;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.gd-pool-pump-state strong[b-09thetqf2w] {
    font-size: 0.98rem;
    line-height: 1;
}

.gd-pool-pump-state span[b-09thetqf2w] {
    color: #8fa1b6;
    font-size: 0.68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-pool-pump-controls[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, 62px);
    gap: 8px;
}

.gd-pool-pump-control[b-09thetqf2w] {
    min-height: 34px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.7);
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.gd-pool-pump-control:hover:not(:disabled)[b-09thetqf2w] {
    transform: translateY(-1px);
}

.gd-pool-pump-control.on.active[b-09thetqf2w],
.gd-pool-pump-control.on:hover:not(:disabled)[b-09thetqf2w] {
    border-color: rgba(57, 211, 83, 0.62);
    background: rgba(57, 211, 83, 0.16);
    color: #39d353;
    box-shadow: 0 0 16px rgba(57, 211, 83, 0.2);
}

.gd-pool-pump-control.off.active[b-09thetqf2w],
.gd-pool-pump-control.off:hover:not(:disabled)[b-09thetqf2w] {
    border-color: rgba(148, 163, 184, 0.36);
    background: rgba(148, 163, 184, 0.12);
    color: #e2e8f0;
}

.gd-pool-pump-control:disabled[b-09thetqf2w] {
    cursor: default;
    opacity: 0.78;
}

.gd-pool-pump-message[b-09thetqf2w] {
    color: #9fb0bf;
    font-size: 0.72rem;
    line-height: 1.2;
}

.gd-status-card-pool[b-09thetqf2w] { grid-column: span 2; }
.gd-status-card-pump[b-09thetqf2w] { grid-column: span 2; }
.gd-status-card-tank[b-09thetqf2w] { grid-column: span 2; }
.gd-status-card-mode[b-09thetqf2w] { grid-column: span 2; }
.gd-status-card-level[b-09thetqf2w] { grid-column: span 2; }
.gd-status-card-energy[b-09thetqf2w] { grid-column: span 2; }

.gd-status-card header[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #e8f1f8;
}

.gd-status-card-body[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

.gd-status-card-icon[b-09thetqf2w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: transparent;
    color: #9fb0bf;
    flex: 0 0 auto;
}

.gd-status-card-icon.pool[b-09thetqf2w] { background: rgba(0, 200, 255, 0.16); color: #00C8FF; }
.gd-status-card-icon.water[b-09thetqf2w] { background: rgba(59, 167, 255, 0.16); color: #3BA7FF; }
.gd-status-card-icon.green[b-09thetqf2w] { background: rgba(57, 211, 83, 0.16); color: #39D353; }
.gd-status-card-icon.off[b-09thetqf2w] { background: rgba(148, 163, 184, 0.14); color: #94a3b8; }
.gd-status-card-icon.amber[b-09thetqf2w] { background: rgba(255, 200, 61, 0.16); color: #FFC83D; }
.gd-status-card-icon.yellow[b-09thetqf2w] { background: rgba(250, 204, 21, 0.16); color: #facc15; }

/* Glassmorphism host for the custom dashboard visuals (size unchanged) */
.gd-status-card-icon[b-09thetqf2w] {
    background: transparent !important;
    border: 0;
    backdrop-filter: none;
    overflow: visible;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gd-status-card:hover .gd-status-card-icon[b-09thetqf2w] {
    transform: translateY(-1px) scale(1.04);
}

.gd-status-card-badge[b-09thetqf2w] {
    margin-left: auto;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.gd-status-card-badge.on[b-09thetqf2w] { background: rgba(57, 211, 83, 0.18); color: #39D353; box-shadow: 0 0 12px rgba(57, 211, 83, 0.35); }
.gd-status-card-badge.off[b-09thetqf2w] { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }

/* Metriken */
.gd-metric-lg[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gd-metric-lg small[b-09thetqf2w] {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: #6f8096;
    font-weight: 600;
}

.gd-metric-lg strong[b-09thetqf2w] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #eef4f9;
}

.gd-metric-inline[b-09thetqf2w] {
    display: flex;
    gap: 24px;
}

.gd-metric-sm[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gd-metric-sm small[b-09thetqf2w] {
    font-size: 0.64rem;
    letter-spacing: 0.07em;
    color: #6f8096;
    font-weight: 600;
}

.gd-metric-sm strong[b-09thetqf2w] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #eef4f9;
}

.gd-status-card-subtext[b-09thetqf2w] {
    font-size: 0.68rem;
    color: #6f8096;
}

.gd-status-card-note[b-09thetqf2w] {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: #6f8096;
}

/* Farb-Akzente */
.accent-pool[b-09thetqf2w] { color: #00C8FF !important; }
.accent-water[b-09thetqf2w] { color: #3BA7FF !important; }
.accent-green[b-09thetqf2w] { color: #39D353 !important; }
.accent-off[b-09thetqf2w] { color: #94a3b8 !important; }
.accent-solar[b-09thetqf2w] { color: #FFC83D !important; }
.accent-violet[b-09thetqf2w] { color: #B15EFF !important; }
.charging[b-09thetqf2w] { color: #39D353 !important; }
.discharging[b-09thetqf2w] { color: #FF9F45 !important; }
.standby[b-09thetqf2w] { color: #cbd5e1 !important; }

/* Füllstandsbalken */
.gd-status-card-bar[b-09thetqf2w] {
    position: relative;
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.gd-status-card-bar i[b-09thetqf2w] {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, #3BA7FF, #00C8FF);
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.5);
    transition: width 0.4s ease;
}

/* Plots */
.gd-spark[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gd-status-card-plot[b-09thetqf2w] {
    width: 100%;
    height: 56px;
    border-radius: 8px;
    background-image: linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
    background-size: 100% 25%, 20% 100%;
    background-position: 0 7px, 0 0;
}

.gd-status-card-plot.gd-plot-fill[b-09thetqf2w] {
    flex: 1 1 auto;
    height: auto;
    min-height: 60px;
}

.gd-status-card-plot .gd-mini-plot-line[b-09thetqf2w] {
    fill: none !important;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px currentColor);
}

.gd-status-card-plot polyline[b-09thetqf2w],
.gd-mini-plot-line[b-09thetqf2w] {
    fill: none !important;
}

.gd-status-card-plot.pool .gd-mini-plot-line[b-09thetqf2w] { stroke: #00C8FF; }
.gd-status-card-plot.water .gd-mini-plot-line[b-09thetqf2w] { stroke: #3BA7FF; }
.gd-status-card-plot.green .gd-mini-plot-line[b-09thetqf2w] { stroke: #39D353; }

.gd-status-card-plot.energy-24h[b-09thetqf2w] {
    min-height: 72px;
}

.gd-status-card-plot.energy-24h .gd-mini-plot-line[b-09thetqf2w] {
    stroke: #39D353;
    stroke-width: 3;
    filter: drop-shadow(0 0 5px rgba(57, 211, 83, 0.75));
}

.gd-status-card-bms-current[b-09thetqf2w] {
    grid-column: span 2;
}

.gd-bms-current-head[b-09thetqf2w] {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.gd-bms-time-switch[b-09thetqf2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.gd-bms-time-switch button[b-09thetqf2w] {
    min-width: 38px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 6px 8px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.gd-bms-time-switch button:hover[b-09thetqf2w],
.gd-bms-time-switch button.active[b-09thetqf2w] {
    border-color: rgba(34, 197, 94, 0.7);
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.18);
}

.gd-status-card-plot.bms-current-detail[b-09thetqf2w] {
    min-height: 92px;
    margin-top: 2px;
}

.gd-bms-detail-plot-area[b-09thetqf2w] {
    fill: rgba(15, 23, 42, 0.52);
    stroke: rgba(148, 163, 184, 0.16);
    stroke-width: 1;
}

.gd-bms-detail-grid[b-09thetqf2w] {
    stroke: rgba(148, 163, 184, 0.12);
    stroke-width: 1;
    stroke-dasharray: 2 5;
}

.gd-bms-detail-axis[b-09thetqf2w] {
    stroke: rgba(148, 163, 184, 0.18);
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.gd-bms-detail-axis.top[b-09thetqf2w] {
    stroke: rgba(34, 197, 94, 0.28);
}

.gd-bms-detail-axis.zero[b-09thetqf2w] {
    stroke: rgba(226, 232, 240, 0.34);
    stroke-dasharray: 0;
}

.gd-bms-detail-axis.bottom[b-09thetqf2w] {
    stroke: rgba(239, 68, 68, 0.28);
}

.gd-bms-detail-label[b-09thetqf2w] {
    fill: rgba(226, 232, 240, 0.72);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.04em;
    paint-order: stroke;
    stroke: rgba(2, 6, 12, 0.8);
    stroke-width: 2px;
}

.gd-bms-detail-label.top[b-09thetqf2w] {
    fill: rgba(187, 247, 208, 0.82);
}

.gd-bms-detail-label.bottom[b-09thetqf2w] {
    fill: rgba(254, 202, 202, 0.82);
}

.gd-status-card-plot.bms-current-detail .gd-bms-current-line-positive[b-09thetqf2w] {
    stroke: #22c55e;
    stroke-width: 3.1;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.72));
}

.gd-status-card-plot.bms-current-detail .gd-bms-current-line-negative[b-09thetqf2w] {
    stroke: #ef4444;
    stroke-width: 3.1;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.72));
}

.gd-status-card-plot.well-level-6h[b-09thetqf2w] {
    min-height: 72px;
    margin-top: 2px;
}

.gd-status-card-plot.well-level-6h .gd-mini-plot-line[b-09thetqf2w] {
    stroke: #ff2f35;
    stroke-width: 3.2;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    filter: drop-shadow(0 0 6px rgba(255, 47, 53, 0.7));
}

.gd-status-card-plot.tank-48h[b-09thetqf2w] {
    min-height: 72px;
    margin-top: 6px;
}

.gd-status-card-plot.tank-48h .gd-mini-plot-line[b-09thetqf2w] {
    stroke: #00c8ff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.75));
}

.gd-energy-axis[b-09thetqf2w] {
    stroke: rgba(57, 211, 83, 0.22);
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.gd-energy-axis.bottom[b-09thetqf2w] {
    stroke: rgba(148, 163, 184, 0.22);
}

.gd-energy-axis-label[b-09thetqf2w] {
    fill: rgba(220, 252, 231, 0.72);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.04em;
    paint-order: stroke;
    stroke: rgba(2, 6, 12, 0.8);
    stroke-width: 2px;
}

.gd-energy-axis-label.bottom[b-09thetqf2w] {
    fill: rgba(203, 213, 225, 0.68);
}

.gd-well-axis[b-09thetqf2w] {
    stroke: rgba(255, 47, 53, 0.2);
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.gd-well-axis.bottom[b-09thetqf2w] {
    stroke: rgba(148, 163, 184, 0.2);
}

.gd-well-axis-label[b-09thetqf2w] {
    fill: rgba(254, 202, 202, 0.72);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.04em;
    paint-order: stroke;
    stroke: rgba(2, 6, 12, 0.8);
    stroke-width: 2px;
}

.gd-well-axis-label.bottom[b-09thetqf2w] {
    fill: rgba(203, 213, 225, 0.68);
}

.gd-tank-axis[b-09thetqf2w] {
    stroke: rgba(0, 200, 255, 0.22);
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.gd-tank-axis.bottom[b-09thetqf2w] {
    stroke: rgba(148, 163, 184, 0.2);
}

.gd-tank-axis-label[b-09thetqf2w] {
    fill: rgba(186, 230, 253, 0.72);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.04em;
    paint-order: stroke;
    stroke: rgba(2, 6, 12, 0.8);
    stroke-width: 2px;
}

.gd-tank-axis-label.bottom[b-09thetqf2w] {
    fill: rgba(203, 213, 225, 0.68);
}

.gd-status-energy-metrics[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.gd-status-card-billiard[b-09thetqf2w] {
    grid-column: span 2;
}

.gd-status-card-billiard .gd-status-card-hero[b-09thetqf2w] {
    opacity: 0.78;
}

.gd-status-card-billiard .gd-reference-icon.hero[b-09thetqf2w] {
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 18px rgba(250, 204, 21, 0.35));
}

.gd-status-billiard-summary[b-09thetqf2w] {
    display: grid;
    gap: 14px 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 64px;
}

.gd-status-billiard-add[b-09thetqf2w] {
    align-items: center;
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.34);
    border-radius: 12px;
    color: #facc15;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    min-height: 42px;
    padding: 9px 12px;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.gd-status-billiard-add:hover[b-09thetqf2w] {
    background: rgba(250, 204, 21, 0.18);
    border-color: rgba(250, 204, 21, 0.52);
    transform: translateY(-1px);
}

.gd-status-billiard-add span[b-09thetqf2w] {
    font-size: 1rem;
    line-height: 1;
}

/* Modus-Umschalter */
.gd-pump-mode-summary[b-09thetqf2w] {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
    padding-right: 116px;
}

.gd-pump-start-interval[b-09thetqf2w] {
    background: rgba(57, 211, 83, 0.08);
    border: 1px solid rgba(57, 211, 83, 0.22);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 86px;
    padding: 8px 10px;
}

.gd-pump-start-interval small[b-09thetqf2w] {
    color: #6f8096;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.gd-pump-start-interval strong[b-09thetqf2w] {
    color: #39D353;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
}

.gd-pump-start-interval span[b-09thetqf2w] {
    color: #7f93aa;
    font-size: 0.62rem;
}

.gd-pump-mode-switch[b-09thetqf2w] {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.gd-pump-mode-button[b-09thetqf2w] {
    flex: 1;
    padding: 11px 0;
    border-radius: 12px;
    border: 1px solid #223247;
    background: rgba(255, 255, 255, 0.03);
    color: #cbd5e1;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gd-pump-mode-button:hover:not(:disabled)[b-09thetqf2w] {
    background: rgba(57, 211, 83, 0.1);
    border-color: rgba(57, 211, 83, 0.3);
}

.gd-pump-mode-button.active[b-09thetqf2w] {
    background: rgba(57, 211, 83, 0.16);
    border-color: rgba(57, 211, 83, 0.55);
    color: #39D353;
    box-shadow: 0 0 14px rgba(57, 211, 83, 0.25);
}

.gd-pump-mode-button:disabled[b-09thetqf2w] {
    opacity: 0.6;
    cursor: default;
}

.gd-pump-mode-message[b-09thetqf2w] {
    font-size: 0.72rem;
    color: #9fb0bf;
}

@media (max-width: 1200px) {
    .gd-status-detail-grid[b-09thetqf2w] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gd-status-card-pool[b-09thetqf2w],
    .gd-status-card-pump[b-09thetqf2w],
    .gd-status-card-tank[b-09thetqf2w],
    .gd-status-card-mode[b-09thetqf2w],
    .gd-status-card-level[b-09thetqf2w],
    .gd-status-card-energy[b-09thetqf2w] {
        grid-column: span 2;
    }
}

.gd-compact-sun[b-09thetqf2w] {
    align-items: center;
    border-radius: 999px;
    display: flex;
    flex: 0 0 auto;
    height: 28px;
    justify-content: center;
    overflow: visible;
    width: 28px;
}

@media (max-width: 1500px) {
    .gd-status-row.gd-compact-status[b-09thetqf2w] {
        grid-template-columns: 74px 104px 88px 74px auto;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .gd-status-row.gd-compact-energy-status[b-09thetqf2w] {
        grid-template-columns: 126px 126px minmax(300px, 1fr) minmax(300px, 1fr);
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

@media (min-width: 1000px) and (max-width: 1300px) and (min-height: 900px) {
    .gd-dashboard[b-09thetqf2w] {
        gap: 8px;
        padding: 8px 10px 10px;
    }

    .gd-topbar[b-09thetqf2w] {
        min-height: 30px;
        padding: 0 2px 2px;
    }

    .gd-brand[b-09thetqf2w] {
        gap: 8px;
        font-size: 0.98rem;
        letter-spacing: 0.065em;
    }

    .gd-brand-icon[b-09thetqf2w] {
        font-size: 1.12rem;
    }

    .gd-topbar-status[b-09thetqf2w] {
        align-items: center;
        gap: 11px;
        font-size: 0.8rem;
    }

    .gd-topbar-chip[b-09thetqf2w] {
        gap: 4px;
        white-space: nowrap;
    }

    .gd-topbar-home[b-09thetqf2w] {
        border-radius: 8px;
        height: 24px;
        width: 24px;
    }

    .gd-status-row.gd-compact-status[b-09thetqf2w] {
        grid-template-columns: 70px 102px 88px 72px auto;
        min-height: 72px;
        overflow-x: hidden;
        padding: 6px 8px;
        scrollbar-width: none;
    }

    .gd-status-row.gd-compact-energy-status[b-09thetqf2w] {
        grid-template-columns: 120px 120px minmax(258px, 1fr) minmax(258px, 1fr);
        min-height: 72px;
        overflow-x: hidden;
        padding: 6px 8px;
        scrollbar-width: none;
    }

    .gd-status-row.gd-compact-status[b-09thetqf2w]::-webkit-scrollbar,
    .gd-status-row.gd-compact-energy-status[b-09thetqf2w]::-webkit-scrollbar {
        display: none;
    }

    .gd-compact-segment[b-09thetqf2w] {
        gap: 6px;
        padding: 5px 7px;
    }

    .gd-compact-icon[b-09thetqf2w] {
        height: 30px;
        width: 30px;
    }

    .gd-compact-icon .gd-reference-icon[b-09thetqf2w],
    .gd-compact-sun .gd-reference-icon[b-09thetqf2w] {
        height: 81px !important;
        max-height: 81px !important;
        max-width: 81px !important;
        width: 81px !important;
    }

    .gd-compact-sun[b-09thetqf2w] {
        height: 26px;
        width: 26px;
    }

    .gd-compact-text[b-09thetqf2w] {
        gap: 4px;
    }

    .gd-compact-text em[b-09thetqf2w] {
        font-size: 0.58rem;
        letter-spacing: 0.035em;
    }

    .gd-compact-text strong[b-09thetqf2w],
    .gd-compact-pool .gd-compact-text strong[b-09thetqf2w],
    .gd-compact-pump .gd-compact-text strong[b-09thetqf2w],
    .gd-compact-mode .gd-compact-text strong[b-09thetqf2w],
    .gd-compact-consumption .gd-compact-text strong[b-09thetqf2w],
    .gd-compact-battery .gd-compact-text strong[b-09thetqf2w],
    .gd-compact-bms .gd-compact-text strong[b-09thetqf2w],
    .gd-compact-solar .gd-compact-text strong[b-09thetqf2w] {
        font-size: 0.98rem;
    }

    .gd-compact-badge[b-09thetqf2w] {
        border-radius: 7px;
        font-size: 0.55rem;
        padding: 4px 5px;
    }

    .gd-compact-water .gd-compact-bar[b-09thetqf2w] {
        width: 46px;
    }

    .gd-compact-plot[b-09thetqf2w] {
        gap: 6px;
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .gd-compact-metric-plot[b-09thetqf2w] {
        grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1.45fr);
    }

    .gd-compact-plot svg[b-09thetqf2w] {
        height: 44px;
    }
}

@media (max-width: 1050px) {
    .gd-status-row.gd-compact-status[b-09thetqf2w] {
        grid-template-columns: 74px 104px 88px 74px auto;
    }

    .gd-status-row.gd-compact-energy-status[b-09thetqf2w] {
        grid-template-columns: 126px 126px 286px 286px;
    }
}

.gd-status-card[b-09thetqf2w] {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 22, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.24);
    color: inherit;
    font: inherit;
    min-height: 128px;
    overflow: hidden;
    padding: 13px 14px;
    position: relative;
    text-decoration: none;
}

    .gd-status-card[b-09thetqf2w]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.16), transparent 34%);
        pointer-events: none;
    }

    .gd-status-card:hover[b-09thetqf2w] {
        border-color: rgba(56, 189, 248, 0.38);
        color: inherit;
    }

.gd-status-icon[b-09thetqf2w] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    flex-shrink: 0;
}

.gd-system-card[b-09thetqf2w] {
    display: grid;
    gap: 10px;
}

    .gd-system-card > *[b-09thetqf2w] {
        position: relative;
        z-index: 1;
    }

.gd-system-head[b-09thetqf2w] {
    align-items: center;
    display: flex;
    gap: 10px;
}

    .gd-system-head div[b-09thetqf2w] {
        display: grid;
        gap: 1px;
        min-width: 0;
    }

    .gd-system-head small[b-09thetqf2w] {
        color: #7dd3fc;
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .gd-system-head strong[b-09thetqf2w] {
        color: #e5edf7;
        font-size: 0.98rem;
        letter-spacing: -0.01em;
        line-height: 1.1;
    }

.gd-water-icon[b-09thetqf2w] {
    background: rgba(56, 189, 248, 0.16);
    color: #38bdf8;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.18);
}

.gd-pool-icon[b-09thetqf2w] {
    background: rgba(14, 165, 233, 0.18);
    color: #7dd3fc;
    box-shadow: 0 0 22px rgba(14, 165, 233, 0.2);
}

.gd-energy-icon-top[b-09thetqf2w] {
    background: rgba(250, 204, 21, 0.16);
    color: #facc15;
    box-shadow: 0 0 22px rgba(250, 204, 21, 0.18);
}

.gd-system-metrics[b-09thetqf2w] {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gd-system-metrics-two[b-09thetqf2w] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .gd-system-metrics span[b-09thetqf2w] {
        background: rgba(15, 23, 42, 0.72);
        border: 1px solid rgba(148, 163, 184, 0.1);
        border-radius: 12px;
        display: grid;
        gap: 1px;
        min-width: 0;
        padding: 7px 8px;
    }

    .gd-system-metrics em[b-09thetqf2w] {
        color: #7b8da3;
        font-size: 0.58rem;
        font-style: normal;
        font-weight: 800;
        letter-spacing: 0.06em;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .gd-system-metrics strong[b-09thetqf2w] {
        color: #e5edf7;
        font-size: 0.95rem;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .gd-system-metrics strong.on[b-09thetqf2w] {
            color: #4ade80;
        }

        .gd-system-metrics strong.off[b-09thetqf2w] {
            color: #94a3b8;
        }

        .gd-system-metrics strong.accent-blue[b-09thetqf2w] {
            color: #38bdf8;
        }

.gd-pump-runtime[b-09thetqf2w],
.gd-bms-status[b-09thetqf2w] {
    align-items: center;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 12px;
    color: #94a3b8;
    display: flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 7px;
    min-height: 34px;
    padding: 7px 9px;
}

    .gd-pump-runtime.on[b-09thetqf2w] {
        border-color: rgba(74, 222, 128, 0.24);
        color: #86efac;
    }

.gd-runtime-dot[b-09thetqf2w] {
    background: #94a3b8;
    border-radius: 999px;
    height: 8px;
    width: 8px;
}

.gd-pump-runtime.on .gd-runtime-dot[b-09thetqf2w] {
    animation: gdPulseDot-b-09thetqf2w 1.5s ease-in-out infinite;
    background: #22c55e;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.75);
}

.gd-bms-status span[b-09thetqf2w] {
    align-items: center;
    display: flex;
}

.gd-bms-status strong[b-09thetqf2w] {
    color: #e5edf7;
    font-size: 0.9rem;
}

.gd-bms-status em[b-09thetqf2w] {
    color: #7b8da3;
    font-style: normal;
    margin-left: auto;
}

.gd-bms-status.charging[b-09thetqf2w] {
    border-color: rgba(74, 222, 128, 0.24);
    color: #4ade80;
}

    .gd-bms-status.charging strong[b-09thetqf2w],
    .gd-bms-status.charging em[b-09thetqf2w] {
        color: #4ade80;
    }

.gd-bms-status.discharging[b-09thetqf2w] {
    border-color: rgba(248, 113, 113, 0.26);
    color: #f87171;
}

    .gd-bms-status.discharging strong[b-09thetqf2w],
    .gd-bms-status.discharging em[b-09thetqf2w] {
        color: #f87171;
    }

.gd-mini-plot[b-09thetqf2w] {
    display: grid;
    gap: 3px;
}

    .gd-mini-plot svg[b-09thetqf2w] {
        background: rgba(2, 6, 23, 0.38);
        border: 1px solid rgba(148, 163, 184, 0.08);
        border-radius: 10px;
        height: 42px;
        width: 100%;
    }

    .gd-mini-plot span[b-09thetqf2w] {
        color: #7b8da3;
        font-size: 0.66rem;
        font-weight: 700;
    }

.gd-mini-plot-fill[b-09thetqf2w] {
    fill: url(#gdWaterPlotFill);
    stroke: none;
}

.gd-mini-plot-line[b-09thetqf2w] {
    fill: none;
    stroke: #38bdf8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.gd-battery-plot .gd-mini-plot-line[b-09thetqf2w] {
    stroke: #facc15;
}

@keyframes gdPulseDot-b-09thetqf2w {
    0%, 100% {
        opacity: 0.65;
        transform: scale(0.88);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

.gd-water-status-card[b-09thetqf2w],
.gd-pool-status-card[b-09thetqf2w],
.gd-energy-status-card[b-09thetqf2w] {
    cursor: pointer;
}

.gd-status-split[b-09thetqf2w] {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
    margin-top: 2px;
}

    .gd-status-split span[b-09thetqf2w] {
        display: grid;
        gap: 1px;
    }

    .gd-status-split em[b-09thetqf2w] {
        color: #64748b;
        font-size: 0.62rem;
        font-style: normal;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .gd-status-split strong[b-09thetqf2w] {
        font-size: 0.94rem;
        line-height: 1.1;
    }

.gd-status-bar[b-09thetqf2w] {
    margin-top: 4px;
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

    .gd-status-bar i[b-09thetqf2w] {
        display: block;
        height: 100%;
        background: #38bdf8;
    }

/* Body grid: map | right column */
.gd-body[b-09thetqf2w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.gd-widget-layout-item[b-09thetqf2w],
.gd-widget-customized[b-09thetqf2w] {
    min-width: 0;
    min-height: 0;
}

:global(.gd-widget-move-handle)[b-09thetqf2w],
:global(.gd-widget-reset-button)[b-09thetqf2w],
:global(.gd-widget-resize-handle)[b-09thetqf2w] {
    display: none !important;
}

.gd-panel-title[b-09thetqf2w] {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7fa3bd;
    margin-bottom: 12px;
    font-weight: 600;
}

    .gd-panel-title.accent-purple[b-09thetqf2w] {
        color: #c084fc;
    }

    .gd-panel-title.accent-yellow[b-09thetqf2w] {
        color: #facc15;
    }

/* Left: Energy */
.gd-energy[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    background: #0d1520;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    min-height: 0;
    overflow: hidden;
    padding: 16px;
}

.gd-energy-row[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: inherit;
    text-decoration: none;
}

    .gd-energy-row:hover[b-09thetqf2w] {
        color: inherit;
    }

    .gd-energy-row.gd-bms-row.charging .gd-energy-icon[b-09thetqf2w] {
        background: rgba(34, 197, 94, 0.18);
        color: #4ade80;
    }

    .gd-energy-row.gd-bms-row.charging .gd-energy-detail strong[b-09thetqf2w] {
        color: #4ade80;
    }

    .gd-energy-row.gd-bms-row.discharging .gd-energy-icon[b-09thetqf2w] {
        background: rgba(239, 68, 68, 0.18);
        color: #f87171;
    }

    .gd-energy-row.gd-bms-row.discharging .gd-energy-detail strong[b-09thetqf2w] {
        color: #f87171;
    }

    .gd-energy-row.gd-bms-row.standby .gd-energy-icon[b-09thetqf2w] {
        background: rgba(148, 163, 184, 0.14);
        color: #94a3b8;
    }

    .gd-energy-row.gd-bms-row.standby .gd-energy-detail strong[b-09thetqf2w] {
        color: #94a3b8;
    }

.gd-energy-icon[b-09thetqf2w] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    flex-shrink: 0;
}

.gd-energy-detail[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
}

    .gd-energy-detail small[b-09thetqf2w] {
        color: #9fb0bf;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .gd-energy-detail strong[b-09thetqf2w] {
        font-size: 1.05rem;
        color: #4ade80;
    }

        .gd-energy-detail strong.on[b-09thetqf2w] {
            color: #4ade80;
        }

        .gd-energy-detail strong.off[b-09thetqf2w] {
            color: #94a3b8;
        }

    .gd-energy-detail .gd-energy-sub[b-09thetqf2w] {
        color: #64748b;
        font-size: 0.72rem;
    }

.gd-energy-arrow[b-09thetqf2w] {
    color: #4b5b6b;
}

.gd-energy-connector[b-09thetqf2w] {
    width: 1px;
    height: 14px;
    margin-left: 17px;
    background: rgba(74, 222, 128, 0.35);
}

/* Middle: Map with background image */
.gd-main[b-09thetqf2w] {
    position: relative;
    min-width: 0;
    min-height: 0;
    border-radius: 16px;
    overflow: hidden;
    overscroll-behavior: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.gd-map-image[b-09thetqf2w] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-image: var(--garden-map-background, url('/images/garden-map-background.png'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
    transition:
        background-size 1.45s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.2s ease;
    will-change: background-size, filter;
    z-index: 1;
}

.gd-room-zoom-active .gd-map-image[b-09thetqf2w] {
    background-position: var(--room-zoom-position, 43% 17%);
    background-size: var(--room-zoom-size, 420%);
    filter: saturate(1.08) brightness(0.72);
}

.gd-zoom-window[b-09thetqf2w] {
    align-items: center;
    background: rgba(250, 204, 21, 0.08);
    border: 2px solid rgba(250, 204, 21, 0.86);
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(2, 6, 12, 0.72), 0 0 24px rgba(250, 204, 21, 0.28);
    color: #fde68a;
    cursor: default;
    display: flex;
    font-size: 0.68rem;
    font-weight: 900;
    justify-content: center;
    letter-spacing: 0.06em;
    padding: 0;
    position: absolute;
    text-transform: uppercase;
    z-index: 8;
}

    .gd-zoom-window span[b-09thetqf2w] {
        background: rgba(2, 6, 12, 0.72);
        border-radius: 999px;
        cursor: move;
        left: 50%;
        padding: 4px 8px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }

    .gd-zoom-window i[b-09thetqf2w] {
        background: #facc15;
        border: 2px solid #020617;
        border-radius: 8px;
        bottom: -12px;
        box-shadow: 0 0 14px rgba(250, 204, 21, 0.8);
        cursor: nwse-resize;
        height: 24px;
        position: absolute;
        right: -12px;
        width: 24px;
    }

        .gd-zoom-window i[b-09thetqf2w]::after {
            color: #020617;
            content: "↘";
            display: block;
            font-size: 0.82rem;
            font-style: normal;
            font-weight: 900;
            line-height: 20px;
            text-align: center;
        }

.gd-room-zoom-active .gd-hotspot[b-09thetqf2w] {
    opacity: 0;
    pointer-events: none;
}

.gd-billiard-zoom-panel[b-09thetqf2w] {
    animation: gdBilliardPanelIn-b-09thetqf2w 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
    background: linear-gradient(145deg, rgba(8, 13, 20, 0.7), rgba(15, 23, 42, 0.58));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(250, 204, 21, 0.24);
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46), 0 0 42px rgba(250, 204, 21, 0.12);
    left: 7%;
    padding: 18px;
    position: absolute;
    top: 7%;
    width: min(620px, calc(100% - 60px));
    z-index: 18;
}

.gd-billiard-zoom-head[b-09thetqf2w] {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

    .gd-billiard-zoom-head span[b-09thetqf2w] {
        color: #facc15;
        display: block;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .gd-billiard-zoom-head strong[b-09thetqf2w] {
        color: #f8fafc;
        display: block;
        font-size: 1.28rem;
        margin-top: 2px;
    }

.gd-billiard-back-button[b-09thetqf2w],
.gd-billiard-action[b-09thetqf2w] {
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e6edf3;
    cursor: pointer;
    text-decoration: none;
}

.gd-billiard-back-button[b-09thetqf2w] {
    background: rgba(15, 23, 42, 0.82);
    border-radius: 999px;
    font-weight: 800;
    padding: 10px 14px;
}

    .gd-billiard-back-button:hover[b-09thetqf2w] {
        background: rgba(56, 189, 248, 0.16);
        border-color: rgba(56, 189, 248, 0.4);
        color: #bae6fd;
    }

.gd-billiard-zoom-actions[b-09thetqf2w] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

    .gd-billiard-zoom-actions.single[b-09thetqf2w] {
        grid-template-columns: minmax(0, 1fr);
    }

.gd-billiard-action[b-09thetqf2w] {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 130px;
    padding: 16px;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

    .gd-billiard-action:hover:not(:disabled)[b-09thetqf2w] {
        background: rgba(250, 204, 21, 0.12);
        border-color: rgba(250, 204, 21, 0.42);
        transform: translateY(-2px);
    }

    .gd-billiard-action:disabled[b-09thetqf2w] {
        cursor: progress;
        opacity: 0.72;
    }

    .gd-billiard-action span[b-09thetqf2w] {
        font-size: 1.65rem;
    }

    .gd-billiard-action strong[b-09thetqf2w] {
        color: #f8fafc;
        font-size: 1rem;
    }

    .gd-billiard-action small[b-09thetqf2w] {
        color: #94a3b8;
        line-height: 1.35;
    }

    .gd-billiard-action.primary[b-09thetqf2w] {
        background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(56, 189, 248, 0.1));
        border-color: rgba(250, 204, 21, 0.36);
    }

.gd-billiard-zoom-message[b-09thetqf2w] {
    background: rgba(2, 6, 12, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #cbd5e1;
    margin: 14px 0 0;
    padding: 10px 12px;
}

@keyframes gdBilliardPanelIn-b-09thetqf2w {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gd-dashboard.display-fit[b-09thetqf2w] {
    grid-template-rows: auto auto auto minmax(0, 1fr);
}

    .gd-dashboard.display-fit .gd-body[b-09thetqf2w] {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .gd-dashboard.display-fit .gd-main[b-09thetqf2w] {
        grid-column: 1;
        grid-row: 1;
        background: #02060c;
    }

    .gd-dashboard.display-fit .gd-map-image[b-09thetqf2w] {
        background-size: contain;
        background-color: #02060c;
    }

.gd-hotspot[b-09thetqf2w] {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(10, 15, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #f1f5f9;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1.3;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.45s ease;
}

.gd-hotspot.gd-widget-customized[b-09thetqf2w] {
    transform: none;
}

    .gd-hotspot:hover[b-09thetqf2w] {
        background: rgba(56, 189, 248, 0.35);
        border-color: #38bdf8;
        transform: translate(-50%, -50%) scale(1.05);
    }

    .gd-hotspot.unlocked[b-09thetqf2w] {
        cursor: grab;
        border-color: #facc15;
        background: rgba(250, 204, 21, 0.18);
        box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.35);
    }

        .gd-hotspot.unlocked:active[b-09thetqf2w] {
            cursor: grabbing;
        }

.gd-lock-toggle[b-09thetqf2w] {
    cursor: pointer;
    border: none;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .gd-lock-toggle.unlocked[b-09thetqf2w] {
        background: rgba(250, 204, 21, 0.2);
        color: #facc15;
    }

/* Popup */
.gd-area-popup-backdrop[b-09thetqf2w] {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(2, 6, 12, 0.22);
    backdrop-filter: blur(8px) saturate(0.86) brightness(0.82);
    -webkit-backdrop-filter: blur(8px) saturate(0.86) brightness(0.82);
    animation: gdPopupBackdropIn-b-09thetqf2w 0.18s ease-out both;
}

.gd-area-popup[b-09thetqf2w] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 260px;
    background: rgba(9, 14, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px;
    backdrop-filter: blur(8px);
    z-index: 21;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.52), 0 0 34px rgba(56, 189, 248, 0.12);
    animation: gdPopupIn-b-09thetqf2w 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gdPopupBackdropIn-b-09thetqf2w {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gdPopupIn-b-09thetqf2w {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

    .gd-area-popup.house[b-09thetqf2w] {
        width: min(520px, calc(100% - 32px));
    }

    .gd-area-popup.pool[b-09thetqf2w] {
        width: min(520px, calc(100% - 32px));
    }

    .gd-area-popup.kitchen[b-09thetqf2w] {
        width: min(500px, calc(100% - 32px));
    }

    .gd-area-popup.billiard[b-09thetqf2w] {
        width: min(620px, calc(100% - 32px));
        background:
            linear-gradient(120deg, rgba(2, 6, 12, 0.78), rgba(12, 17, 27, 0.82)),
            radial-gradient(circle at 12% 20%, rgba(250, 204, 21, 0.2), transparent 34%),
            radial-gradient(circle at 76% 80%, rgba(168, 85, 247, 0.14), transparent 32%);
        border-color: rgba(250, 204, 21, 0.26);
        box-shadow: 0 26px 90px rgba(0, 0, 0, 0.62), 0 0 36px rgba(250, 204, 21, 0.15);
    }

.gd-area-popup-head[b-09thetqf2w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.gd-close-button[b-09thetqf2w] {
    background: none;
    border: none;
    color: #9fb0bf;
    cursor: pointer;
    font-size: 0.9rem;
}

.gd-close-button.back[b-09thetqf2w] {
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 7px 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gd-billiard-popup[b-09thetqf2w] {
    display: grid;
    gap: 14px;
}

.gd-billiard-popup-title[b-09thetqf2w] {
    display: grid;
    gap: 4px;
}

.gd-billiard-popup-title span[b-09thetqf2w] {
    color: #facc15;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.gd-billiard-popup-title strong[b-09thetqf2w] {
    color: #f8fafc;
    font-size: 1.02rem;
    line-height: 1.1;
}

.gd-billiard-popup-actions[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 12px;
}

.gd-billiard-popup-action[b-09thetqf2w] {
    min-height: 116px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    color: #f8fafc;
    text-align: left;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.gd-billiard-popup-action:hover:not(:disabled)[b-09thetqf2w] {
    transform: translateY(-2px);
    border-color: rgba(250, 204, 21, 0.42);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 0 20px rgba(250, 204, 21, 0.12);
}

.gd-billiard-popup-action.primary[b-09thetqf2w] {
    border-color: rgba(250, 204, 21, 0.38);
    background: linear-gradient(145deg, rgba(250, 204, 21, 0.13), rgba(56, 189, 248, 0.06));
}

.gd-billiard-popup-action.ko[b-09thetqf2w] {
    border-color: rgba(168, 85, 247, 0.42);
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.2), rgba(15, 23, 42, 0.32));
}

.gd-billiard-ko-only[b-09thetqf2w] {
    min-height: 154px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(168, 85, 247, 0.46);
    background:
        radial-gradient(circle at 50% 20%, rgba(168, 85, 247, 0.28), transparent 42%),
        linear-gradient(145deg, rgba(124, 58, 237, 0.22), rgba(15, 23, 42, 0.42));
    color: #f8fafc;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.35), 0 0 28px rgba(168, 85, 247, 0.16);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.gd-billiard-ko-only:hover[b-09thetqf2w] {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(196, 181, 253, 0.72);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), 0 0 34px rgba(168, 85, 247, 0.26);
}

.gd-billiard-ko-only span[b-09thetqf2w] {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.55));
}

.gd-billiard-ko-only strong[b-09thetqf2w] {
    font-size: 1.08rem;
    font-weight: 900;
}

.gd-billiard-ko-only small[b-09thetqf2w] {
    color: #c4b5fd;
    font-size: 0.78rem;
}

.gd-billiard-popup-action.rating[b-09thetqf2w] {
    cursor: default;
}

.gd-billiard-popup-action:disabled[b-09thetqf2w] {
    opacity: 0.6;
    cursor: default;
}

.gd-billiard-popup-action span[b-09thetqf2w] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.3));
}

.gd-billiard-popup-action span img[b-09thetqf2w] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.gd-billiard-popup-action strong[b-09thetqf2w] {
    color: #f8fafc;
    font-size: 0.84rem;
    line-height: 1.18;
}

.gd-billiard-popup-action small[b-09thetqf2w] {
    color: #aab8ca;
    font-size: 0.72rem;
    line-height: 1.2;
}

@media (max-width: 760px) {
    .gd-billiard-popup-actions[b-09thetqf2w] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gd-area-popup-body p[b-09thetqf2w] {
    margin: 0 0 10px;
    color: #cbd5e1;
    font-size: 0.85rem;
}

.gd-house-metrics[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

    .gd-house-metrics div[b-09thetqf2w] {
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .gd-house-metrics small[b-09thetqf2w] {
        color: #9fb0bf;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .gd-house-metrics strong[b-09thetqf2w] {
        color: #e6edf3;
        font-size: 1rem;
    }

    .gd-house-metrics span[b-09thetqf2w] {
        color: #64748b;
        font-size: 0.75rem;
    }

.gd-pool-metrics[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

    .gd-pool-metrics div[b-09thetqf2w] {
        padding: 10px;
        border: 1px solid rgba(56, 189, 248, 0.18);
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(2, 6, 12, 0.28));
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .gd-pool-metrics small[b-09thetqf2w] {
        color: #9fb0bf;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .gd-pool-metrics strong[b-09thetqf2w] {
        color: #38bdf8;
        font-size: 1.1rem;
    }

        .gd-pool-metrics strong.on[b-09thetqf2w] {
            color: #4ade80;
        }

        .gd-pool-metrics strong.off[b-09thetqf2w] {
            color: #94a3b8;
        }

    .gd-pool-metrics span[b-09thetqf2w] {
        color: #94a3b8;
        font-size: 0.75rem;
    }

.gd-kitchen-metrics[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

    .gd-kitchen-metrics div[b-09thetqf2w] {
        padding: 10px;
        border: 1px solid rgba(250, 204, 21, 0.18);
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(2, 6, 12, 0.28));
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .gd-kitchen-metrics small[b-09thetqf2w],
    .gd-kitchen-label[b-09thetqf2w] {
        color: #9fb0bf;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .gd-kitchen-metrics strong[b-09thetqf2w] {
        color: #facc15;
        font-size: 1.05rem;
    }

        .gd-kitchen-metrics strong.on[b-09thetqf2w] {
            color: #4ade80;
        }

        .gd-kitchen-metrics strong.off[b-09thetqf2w] {
            color: #94a3b8;
        }

    .gd-kitchen-metrics span[b-09thetqf2w] {
        color: #94a3b8;
        font-size: 0.75rem;
    }

.gd-kitchen-section[b-09thetqf2w] {
    margin-top: 12px;
}

.gd-kitchen-theme-grid[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.gd-kitchen-theme[b-09thetqf2w],
.gd-kitchen-fan-levels button[b-09thetqf2w] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    cursor: pointer;
    font-weight: 700;
    padding: 8px 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .gd-kitchen-theme:hover[b-09thetqf2w],
    .gd-kitchen-fan-levels button:hover[b-09thetqf2w],
    .gd-kitchen-theme.active[b-09thetqf2w],
    .gd-kitchen-fan-levels button.active[b-09thetqf2w] {
        background: rgba(250, 204, 21, 0.16);
        border-color: rgba(250, 204, 21, 0.45);
        color: #facc15;
    }

.gd-kitchen-fan-levels[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.gd-house-plot[b-09thetqf2w] {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(2, 6, 12, 0.3);
}

.gd-pool-plot[b-09thetqf2w] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.68), rgba(8, 47, 73, 0.28));
}

.gd-pool-plot svg[b-09thetqf2w] {
    border-radius: 10px;
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
        rgba(2, 6, 12, 0.36);
    background-size: 100% 18px, 44px 100%, auto;
}

.gd-plot-grid[b-09thetqf2w] {
    stroke: rgba(148, 163, 184, 0.28);
    stroke-dasharray: 3 4;
    stroke-width: 1;
}

.gd-house-plot .gd-pool-temp-line[b-09thetqf2w] {
    stroke: #38bdf8;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.45));
}

.gd-house-plot .gd-pool-pump-line[b-09thetqf2w] {
    stroke: #4ade80;
    filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.45));
}

.gd-pool-plot-labels[b-09thetqf2w] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
}

.gd-house-plot-head[b-09thetqf2w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #9fb0bf;
    font-size: 0.75rem;
    margin-bottom: 6px;
}

    .gd-house-plot-head strong[b-09thetqf2w] {
        color: #38bdf8;
    }

.gd-house-plot svg[b-09thetqf2w] {
    width: 100%;
    height: 72px;
    display: block;
}

.gd-house-plot polyline[b-09thetqf2w] {
    fill: none;
    stroke: #38bdf8;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gd-house-plot:nth-of-type(3) polyline[b-09thetqf2w] {
    stroke: #4ade80;
}

/* Signup modal */
.gd-modal-backdrop[b-09thetqf2w] {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 12, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    backdrop-filter: blur(3px);
}

.gd-signup-modal[b-09thetqf2w] {
    width: min(420px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    background: #0d1620;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 18px;
    color: #e6edf3;
}

.gd-create-player-modal[b-09thetqf2w] {
    width: min(460px, 92vw);
    max-height: 84vh;
    overflow-y: auto;
    background:
        linear-gradient(145deg, rgba(13, 22, 32, 0.96), rgba(8, 13, 22, 0.96)),
        radial-gradient(circle at 18% 10%, rgba(250, 204, 21, 0.16), transparent 34%);
    border: 1px solid rgba(250, 204, 21, 0.22);
    border-radius: 18px;
    padding: 18px;
    color: #e6edf3;
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.62), 0 0 36px rgba(250, 204, 21, 0.12);
}

.gd-rating-modal[b-09thetqf2w] {
    width: min(560px, 92vw);
    max-height: 84vh;
    overflow-y: auto;
    background:
        linear-gradient(145deg, rgba(13, 22, 32, 0.96), rgba(8, 13, 22, 0.96)),
        radial-gradient(circle at 18% 8%, rgba(250, 204, 21, 0.18), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(168, 85, 247, 0.16), transparent 32%);
    border: 1px solid rgba(250, 204, 21, 0.24);
    border-radius: 18px;
    padding: 18px;
    color: #e6edf3;
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.62), 0 0 36px rgba(250, 204, 21, 0.14);
}

.gd-championship-modal[b-09thetqf2w] {
    width: min(680px, 94vw);
    max-height: 86vh;
    overflow-y: auto;
    background:
        linear-gradient(145deg, rgba(13, 22, 32, 0.97), rgba(8, 13, 22, 0.97)),
        radial-gradient(circle at 18% 8%, rgba(250, 204, 21, 0.18), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(168, 85, 247, 0.14), transparent 32%);
    border: 1px solid rgba(250, 204, 21, 0.24);
    border-radius: 18px;
    padding: 18px;
    color: #e6edf3;
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.62), 0 0 36px rgba(250, 204, 21, 0.14);
}

.gd-championship-help[b-09thetqf2w] {
    margin: 4px 0 14px;
    color: #aab8ca;
    font-size: 0.84rem;
}

.gd-championship-player-grid[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 430px;
    overflow-y: auto;
    padding-right: 4px;
}

.gd-championship-player-card[b-09thetqf2w] {
    display: grid;
    grid-template-columns: auto 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.gd-championship-player-card:hover[b-09thetqf2w] {
    transform: translateY(-1px);
    border-color: rgba(250, 204, 21, 0.28);
}

.gd-championship-player-card.selected[b-09thetqf2w] {
    border-color: rgba(250, 204, 21, 0.58);
    background: rgba(250, 204, 21, 0.1);
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.12);
}

.gd-championship-player-card input[b-09thetqf2w] {
    accent-color: #facc15;
}

.gd-championship-player-card span[b-09thetqf2w] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.gd-championship-player-card strong[b-09thetqf2w] {
    color: #f8fafc;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-championship-player-card small[b-09thetqf2w] {
    color: #9fb0bf;
    font-size: 0.7rem;
}

.gd-championship-actions[b-09thetqf2w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.gd-championship-actions > span[b-09thetqf2w] {
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 700;
}

.gd-rating-heroes[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 14px;
}

.gd-rating-hero[b-09thetqf2w] {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.gd-rating-hero.king[b-09thetqf2w] {
    border-color: rgba(250, 204, 21, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 22px rgba(250, 204, 21, 0.08);
}

.gd-rating-hero.champ[b-09thetqf2w] {
    border-color: rgba(168, 85, 247, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 22px rgba(168, 85, 247, 0.08);
}

.gd-rating-hero small[b-09thetqf2w] {
    color: #facc15;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gd-rating-hero strong[b-09thetqf2w] {
    color: #f8fafc;
    font-size: 1rem;
}

.gd-rating-hero span[b-09thetqf2w] {
    color: #aab8ca;
    font-size: 0.82rem;
}

.gd-rating-list[b-09thetqf2w] {
    display: grid;
    gap: 8px;
}

.gd-rating-row[b-09thetqf2w] {
    display: grid;
    grid-template-columns: 28px 38px minmax(0, 1fr) minmax(220px, auto);
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.gd-rating-rank[b-09thetqf2w] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
    font-size: 0.76rem;
    font-weight: 900;
}

.gd-rating-player-info[b-09thetqf2w] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.gd-rating-row strong[b-09thetqf2w] {
    min-width: 0;
    overflow: hidden;
    color: #f8fafc;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-rating-player-info small[b-09thetqf2w] {
    color: #39d353;
    font-size: 0.72rem;
    font-weight: 800;
}

.gd-rating-stats[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(4, minmax(42px, 1fr));
    gap: 6px;
    min-width: 0;
}

.gd-rating-stats span[b-09thetqf2w] {
    display: grid;
    gap: 1px;
    justify-items: center;
    padding: 5px 6px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.gd-rating-stats b[b-09thetqf2w] {
    color: #f8fafc;
    font-size: 0.8rem;
    line-height: 1;
}

.gd-rating-stats small[b-09thetqf2w] {
    color: #94a3b8;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (max-width: 620px) {
    .gd-rating-heroes[b-09thetqf2w] {
        grid-template-columns: 1fr;
    }

    .gd-rating-row[b-09thetqf2w] {
        grid-template-columns: 28px 38px minmax(0, 1fr);
    }

    .gd-rating-stats[b-09thetqf2w] {
        grid-column: 1 / -1;
    }
}

.gd-create-player-preview[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 16px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.gd-create-player-preview span[b-09thetqf2w] {
    color: #f8fafc;
    font-weight: 800;
}

.gd-create-player-field[b-09thetqf2w] {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    color: #aab8ca;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gd-create-player-field input[b-09thetqf2w],
.gd-create-player-file[b-09thetqf2w] {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    background: rgba(2, 6, 12, 0.52);
    color: #f8fafc;
    padding: 11px 12px;
    font-size: 0.9rem;
    outline: none;
}

.gd-create-player-field input:focus[b-09thetqf2w] {
    border-color: rgba(250, 204, 21, 0.55);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.12);
}

.gd-create-player-note[b-09thetqf2w],
.gd-create-player-message[b-09thetqf2w] {
    margin: 12px 0 0;
    color: #cbd5e1;
    font-size: 0.82rem;
}

.gd-create-player-message[b-09thetqf2w] {
    color: #fde68a;
}

.gd-create-player-actions[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.gd-signup-loading[b-09thetqf2w] {
    color: #9fb0bf;
    font-size: 0.9rem;
    text-align: center;
    padding: 20px 0;
}

.gd-signup-player-grid[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.gd-signup-player[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #e6edf3;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

    .gd-signup-player:hover:not(:disabled)[b-09thetqf2w] {
        background: rgba(74, 222, 128, 0.16);
        transform: translateY(-2px);
    }

    .gd-signup-player:disabled[b-09thetqf2w] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .gd-signup-player.busy[b-09thetqf2w] {
        opacity: 0.7;
    }

    .gd-signup-player span[b-09thetqf2w] {
        font-size: 0.82rem;
        text-align: center;
        word-break: break-word;
    }

    .gd-signup-player small[b-09thetqf2w] {
        color: #9fb0bf;
        font-size: 0.72rem;
        font-weight: 600;
    }

.gd-signup-message[b-09thetqf2w] {
    margin: 12px 0 0;
    color: #facc15;
    font-size: 0.85rem;
    text-align: center;
}

.gd-action-button[b-09thetqf2w] {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: none;
    background: #38bdf8;
    color: #061018;
    font-weight: 600;
    cursor: pointer;
}

    .gd-action-button.secondary[b-09thetqf2w] {
        background: rgba(255, 255, 255, 0.1);
        color: #e6edf3;
        margin-top: 6px;
    }

.gd-popup-actions[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Right column */
.gd-right[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.gd-side-card[b-09thetqf2w] {
    background: #0d1520;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.gd-side-card > *:not(.gd-side-symbol)[b-09thetqf2w] {
    position: relative;
    z-index: 2;
}

.gd-side-symbol[b-09thetqf2w] {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 82px;
    height: 82px;
    opacity: 0.52;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(250, 204, 21, 0.28));
}

.gd-side-symbol.sound[b-09thetqf2w] {
    opacity: 0.62;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.32));
}

.gd-side-symbol img[b-09thetqf2w] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gd-billiard-hero-card[b-09thetqf2w] {
    border-color: rgba(250, 204, 21, 0.18);
}

.gd-billiard-heroes[b-09thetqf2w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gd-billiard-hero[b-09thetqf2w] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 188px;
}

    .gd-billiard-hero:first-child[b-09thetqf2w] {
        border-color: rgba(250, 204, 21, 0.72);
        box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.22), 0 0 16px rgba(250, 204, 21, 0.24);
    }

    .gd-billiard-hero:nth-child(2)[b-09thetqf2w] {
        border-color: rgba(226, 232, 240, 0.72);
        box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.2), 0 0 16px rgba(226, 232, 240, 0.18);
    }

    .gd-billiard-hero[b-09thetqf2w]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(3, 7, 18, 0.88) 0%, rgba(3, 7, 18, 0.1) 38%, rgba(3, 7, 18, 0.9) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .gd-billiard-hero small[b-09thetqf2w] {
        color: #facc15;
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        position: relative;
        z-index: 3;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
        order: 1;
    }

    .gd-billiard-hero:nth-child(2) small[b-09thetqf2w] {
        color: #e2e8f0;
    }

    .gd-billiard-hero strong[b-09thetqf2w] {
        max-width: 100%;
        color: #e6edf3;
        font-size: 1.05rem;
        line-height: 1.05;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        z-index: 3;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
        order: 3;
        margin-top: auto;
    }

    .gd-billiard-hero span[b-09thetqf2w] {
        color: #dbeafe;
        font-size: 0.8rem;
        font-weight: 700;
        position: relative;
        z-index: 3;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
        order: 4;
    }

.gd-billiard-placeholder[b-09thetqf2w] {
    width: clamp(6.4rem, 8vw, 8.4rem);
    height: clamp(6.4rem, 8vw, 8.4rem);
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #facc15;
    font-size: 1.4rem;
    font-weight: 900;
}

.gd-sound-head[b-09thetqf2w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gd-bose-logo[b-09thetqf2w] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #9fb0bf;
}

.gd-spotify-row[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4ade80;
    font-size: 0.9rem;
    margin-bottom: 14px;
    text-decoration: none;
}

    .gd-spotify-row:hover[b-09thetqf2w] {
        color: #86efac;
    }

.gd-spotify-icon[b-09thetqf2w] {
    font-size: 1rem;
}

.gd-side-card-arrow[b-09thetqf2w] {
    margin-left: auto;
    color: #4b5b6b;
}

.gd-sound-track[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.gd-sound-cover[b-09thetqf2w] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(192, 132, 252, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    overflow: hidden;
}

    .gd-sound-cover img[b-09thetqf2w] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.gd-sound-meta[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

    .gd-sound-meta span[b-09thetqf2w] {
        color: #9fb0bf;
        font-size: 0.8rem;
    }

    .gd-sound-meta small[b-09thetqf2w] {
        color: #64748b;
        font-size: 0.7rem;
    }

.gd-sound-progress-bar[b-09thetqf2w] {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

    .gd-sound-progress-bar i[b-09thetqf2w] {
        display: block;
        height: 100%;
        background: #c084fc;
    }

.gd-sound-progress-labels[b-09thetqf2w] {
    display: flex;
    justify-content: space-between;
    color: #64748b;
    font-size: 0.7rem;
    margin-top: 4px;
}

.gd-sound-controls[b-09thetqf2w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
}

.gd-icon-button[b-09thetqf2w] {
    border: none;
    background: none;
    color: #cbd5e1;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.88;
}

    .gd-icon-button:disabled[b-09thetqf2w] {
        cursor: not-allowed;
        opacity: 0.35;
    }

    .gd-icon-button:not(:disabled):hover[b-09thetqf2w] {
        color: #ffffff;
        transform: translateY(-1px);
    }
}

.gd-icon-button-primary[b-09thetqf2w] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e6edf3;
    color: #061018;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.gd-sound-volume[b-09thetqf2w] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #9fb0bf;
    font-size: 0.72rem;
}

    .gd-sound-volume input[b-09thetqf2w] {
        accent-color: #c084fc;
        cursor: pointer;
        width: 100%;
    }

        .gd-sound-volume input:disabled[b-09thetqf2w] {
            cursor: not-allowed;
            opacity: 0.4;
        }

    .gd-sound-volume strong[b-09thetqf2w] {
        color: #e6edf3;
        font-size: 0.72rem;
        min-width: 2.2rem;
        text-align: right;
    }

.gd-game-card[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gd-game-head[b-09thetqf2w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gd-refresh-button[b-09thetqf2w] {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #9fb0bf;
    cursor: pointer;
}

.gd-game-block[b-09thetqf2w] {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.gd-game-title[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e6edf3;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.gd-game-symbol[b-09thetqf2w] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.45));
}

.gd-versus[b-09thetqf2w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.1);
    color: #dff6ff;
    font-size: 0.82rem;
    font-weight: 700;
}

    .gd-versus > strong[b-09thetqf2w] {
        color: #facc15;
        font-size: 0.72rem;
    }

.gd-versus-player[b-09thetqf2w] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 4px;
    text-align: left;
    transition: background 0.15s ease, transform 0.15s ease;
}

    .gd-versus-player:hover:not(:disabled)[b-09thetqf2w] {
        background: rgba(74, 222, 128, 0.16);
        transform: translateY(-1px);
    }

    .gd-versus-player:disabled[b-09thetqf2w] {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .gd-versus-player span:last-child[b-09thetqf2w] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.gd-team-avatars[b-09thetqf2w] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

    .gd-team-avatars .player-avatar + .player-avatar[b-09thetqf2w] {
        margin-left: -10px;
    }

.gd-queue-title[b-09thetqf2w] {
    margin-top: 10px;
    color: #9fb0bf;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.gd-queue-list[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

    .gd-queue-list li[b-09thetqf2w] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #cbd5e1;
        font-size: 0.82rem;
    }

    .gd-queue-list span[b-09thetqf2w] {
        width: 20px;
    height: 36px;
        border-radius: 999px;
        background: rgba(74, 222, 128, 0.15);
        color: #4ade80;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 800;
        flex-shrink: 0;
    }

.gd-game-empty[b-09thetqf2w] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.8rem;
}

.gd-game-message[b-09thetqf2w] {
    margin: 0;
    color: #facc15;
    font-size: 0.8rem;
}

.gd-activity-row[b-09thetqf2w] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.gd-activity-icon[b-09thetqf2w] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gd-activity-detail[b-09thetqf2w] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

    .gd-activity-detail span[b-09thetqf2w] {
        color: #9fb0bf;
        font-size: 0.8rem;
    }

.gd-signup-button[b-09thetqf2w] {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid #facc15;
    background: transparent;
    color: #facc15;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .gd-signup-button:hover[b-09thetqf2w] {
        background: rgba(250, 204, 21, 0.12);
    }

    .gd-activity-card .gd-activity-row:last-of-type[b-09thetqf2w] {
        margin-bottom: 8px;
    }

/* Responsive */
@media (max-width: 1200px) {
    .gd-status-row[b-09thetqf2w] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gd-billiard-zoom-panel[b-09thetqf2w] {
        top: 6%;
    }

    .gd-billiard-zoom-actions[b-09thetqf2w] {
        grid-template-columns: 1fr;
    }

    .gd-billiard-action[b-09thetqf2w] {
        min-height: 0;
    }

    .gd-body[b-09thetqf2w] {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .gd-right[b-09thetqf2w] {
        flex-direction: row;
    }

    .gd-side-card[b-09thetqf2w] {
        flex: 1;
    }
}

@media (max-width: 900px) {
    .gd-desktop-shell[b-09thetqf2w] {
        display: none;
    }

    .gd-mobile-shell[b-09thetqf2w] {
        background: radial-gradient(circle at 18% -4%, rgba(14, 165, 233, 0.16), transparent 34%), radial-gradient(circle at 85% -8%, rgba(34, 197, 94, 0.1), transparent 28%), linear-gradient(165deg, #050910, #0a111d 58%, #050910);
        box-sizing: border-box;
        color: #e8edf5;
        display: grid;
        gap: 0.95rem;
        min-height: 100vh;
        padding: 1rem 0.9rem 5.9rem;
    }

    .gd-mobile-head[b-09thetqf2w] {
        align-items: start;
        display: flex;
        justify-content: space-between;
        padding: 0.2rem 0.1rem;
    }

    .gd-mobile-head h2[b-09thetqf2w] {
        font-size: 2rem;
        font-weight: 900;
        letter-spacing: -0.03em;
        margin: 0;
    }

    .gd-mobile-head h2 span[b-09thetqf2w] {
        color: #d1deea;
        font-weight: 700;
    }

    .gd-mobile-head p[b-09thetqf2w] {
        color: #a9bbcb;
        font-size: 1rem;
        margin: 0.3rem 0 0;
    }

    .gd-mobile-weather[b-09thetqf2w] {
        align-items: center;
        color: #f8fafc;
        display: inline-flex;
        font-size: 1.55rem;
        font-weight: 700;
        gap: 0.35rem;
        margin-top: 0.25rem;
    }

    .gd-mobile-weather .smart-icon[b-09thetqf2w] {
        color: #facc15;
        height: 1.35rem;
        width: 1.35rem;
    }

    .gd-mobile-dashboard-cards[b-09thetqf2w] {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .gd-mobile-dashboard-cards .gd-status-card[b-09thetqf2w] {
        grid-column: auto;
        min-height: 0;
        padding: 0.95rem;
    }

    .gd-mobile-dashboard-cards .gd-status-card-hero[b-09thetqf2w] {
        height: 72px;
        right: 10px;
        top: 8px;
        width: 72px;
    }

    .gd-mobile-dashboard-cards .gd-reference-icon.hero[b-09thetqf2w] {
        height: 72px;
        width: 72px;
    }

    .gd-mobile-dashboard-cards .gd-status-card-pool-pump .gd-status-card-hero[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-status-card-pool-pump .gd-reference-icon.hero[b-09thetqf2w] {
        height: 96px;
        width: 96px;
    }

    .gd-mobile-dashboard-cards .gd-pool-pump-summary[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-status-billiard-summary[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-status-energy-metrics[b-09thetqf2w] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-right: 52px;
    }

    .gd-mobile-dashboard-cards .gd-pump-mode-summary[b-09thetqf2w] {
        padding-right: 70px;
    }

    .gd-mobile-dashboard-cards .gd-pool-pump-control-row[b-09thetqf2w] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .gd-mobile-dashboard-cards .gd-status-card-plot[b-09thetqf2w] {
        min-height: 68px;
    }

    .gd-mobile-hero[b-09thetqf2w] {
        background-image: linear-gradient(to bottom, rgba(2, 6, 14, 0.12), rgba(2, 6, 14, 0.74)), var(--garden-map-background, url('/images/garden-map-background.png'));
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1.35rem;
        box-shadow: 0 1.2rem 2rem rgba(2, 6, 23, 0.35);
        overflow: hidden;
        padding: 0.75rem;
    }

    .gd-mobile-kpi-grid[b-09thetqf2w] {
        display: grid;
        gap: 0.6rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 8rem;
    }

    .gd-mobile-kpi-card[b-09thetqf2w] {
        backdrop-filter: blur(10px);
        background: linear-gradient(145deg, rgba(10, 16, 26, 0.86), rgba(8, 13, 22, 0.82));
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 1.05rem;
        display: grid;
        gap: 0.18rem;
        min-width: 0;
        padding: 0.75rem;
    }

    .gd-mobile-kpi-card small[b-09thetqf2w] {
        align-items: center;
        color: #c7d6e5;
        display: inline-flex;
        font-size: 0.82rem;
        font-weight: 700;
        gap: 0.35rem;
    }

    .gd-mobile-kpi-card strong[b-09thetqf2w] {
        color: #f8fafc;
        font-size: 2rem;
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .gd-mobile-kpi-card span[b-09thetqf2w] {
        color: #8ca3b8;
        font-size: 0.8rem;
    }

    .gd-mobile-kpi-card em[b-09thetqf2w] {
        color: #8fde57;
        font-size: 0.96rem;
        font-style: normal;
        font-weight: 700;
        margin-top: 0.35rem;
    }

    .gd-mobile-section[b-09thetqf2w] {
        display: grid;
        gap: 0.55rem;
    }

    .gd-mobile-section h3[b-09thetqf2w] {
        font-size: 2rem;
        font-weight: 900;
        letter-spacing: -0.03em;
        margin: 0;
    }

    .gd-mobile-section-head[b-09thetqf2w] {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

    .gd-mobile-section-head a[b-09thetqf2w] {
        color: #d8e4ef;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
    }

    .gd-mobile-system-grid[b-09thetqf2w] {
        display: grid;
        gap: 0.55rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gd-mobile-system-card[b-09thetqf2w] {
        background: linear-gradient(145deg, rgba(20, 28, 40, 0.88), rgba(13, 20, 31, 0.92));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        color: #e8edf5;
        display: grid;
        gap: 0.2rem;
        min-width: 0;
        padding: 0.82rem;
        text-align: left;
        text-decoration: none;
    }

    .gd-mobile-system-card small[b-09thetqf2w] {
        color: #9cb2c7;
        font-size: 0.76rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .gd-mobile-system-card strong[b-09thetqf2w] {
        color: #79dc50;
        font-size: 1.8rem;
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .gd-mobile-system-card strong.accent-blue[b-09thetqf2w] {
        color: #38bdf8;
    }

    .gd-mobile-system-card strong.off[b-09thetqf2w] {
        color: #a1b4c6;
    }

    .gd-mobile-system-card span[b-09thetqf2w] {
        color: #8ea5b9;
        font-size: 0.84rem;
    }

    .gd-mobile-quick-grid[b-09thetqf2w] {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gd-mobile-quick-chip[b-09thetqf2w] {
        align-items: center;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        color: #ecf3fa;
        display: inline-flex;
        font-size: 0.86rem;
        font-weight: 700;
        gap: 0.34rem;
        justify-content: center;
        min-height: 2.55rem;
        padding: 0.4rem 0.7rem;
        text-decoration: none;
    }

    .gd-mobile-quick-chip .smart-icon[b-09thetqf2w] {
        height: 1rem;
        width: 1rem;
    }

    .gd-mobile-quick-chip em[b-09thetqf2w] {
        color: #8fdb58;
        font-style: normal;
        font-weight: 800;
    }

    .gd-mobile-quick-chip.danger em[b-09thetqf2w] {
        color: #f87171;
    }

    .gd-mobile-automation-list[b-09thetqf2w] {
        display: grid;
        gap: 0.5rem;
    }

    .gd-mobile-automation-list a[b-09thetqf2w] {
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.95rem;
        color: inherit;
        display: flex;
        gap: 0.55rem;
        justify-content: space-between;
        min-width: 0;
        padding: 0.72rem 0.82rem;
        text-decoration: none;
    }

    .gd-mobile-automation-icon[b-09thetqf2w] {
        align-items: center;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.65rem;
        display: inline-flex;
        flex: 0 0 auto;
        height: 2.2rem;
        justify-content: center;
        width: 2.2rem;
    }

    .gd-mobile-automation-icon .smart-icon[b-09thetqf2w] {
        height: 1.25rem;
        width: 1.25rem;
    }

    .gd-mobile-automation-list a > div[b-09thetqf2w] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .gd-mobile-automation-list em[b-09thetqf2w] {
        color: #8fde57;
        flex: 0 0 auto;
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 900;
    }

    .gd-mobile-automation-list strong[b-09thetqf2w] {
        color: #f1f6fb;
        display: block;
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }

    .gd-mobile-automation-list span[b-09thetqf2w] {
        color: #93aac0;
        display: block;
        font-size: 0.82rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gd-mobile-switch[b-09thetqf2w] {
        background: rgba(255, 255, 255, 0.16);
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        flex: 0 0 auto;
        height: 1.65rem;
        position: relative;
        width: 3rem;
    }

    .gd-mobile-switch[b-09thetqf2w]::before {
        background: #fff;
        border-radius: 50%;
        content: "";
        height: 1.3rem;
        left: 0.18rem;
        position: absolute;
        top: 0.17rem;
        width: 1.3rem;
    }

    .gd-mobile-switch.on[b-09thetqf2w] {
        background: rgba(134, 239, 92, 0.85);
    }

    .gd-mobile-switch.on[b-09thetqf2w]::before {
        left: calc(100% - 1.48rem);
    }

    .gd-mobile-bottom-nav[b-09thetqf2w] {
        backdrop-filter: blur(12px);
        background: rgba(10, 16, 28, 0.9);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        bottom: 0;
        display: grid;
        gap: 0.25rem;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        left: 0;
        padding: 0.5rem 0.5rem max(0.65rem, env(safe-area-inset-bottom));
        position: fixed;
        right: 0;
        z-index: 90;
    }

    .gd-mobile-bottom-nav a[b-09thetqf2w] {
        align-items: center;
        color: #9fb1c4;
        display: grid;
        font-size: 0.68rem;
        font-weight: 700;
        gap: 0.18rem;
        justify-items: center;
        min-height: 2.45rem;
        text-decoration: none;
    }

    .gd-mobile-bottom-nav a .smart-icon[b-09thetqf2w] {
        color: #8fa3b8;
        height: 1.15rem;
        width: 1.15rem;
    }

    .gd-mobile-bottom-nav a.active[b-09thetqf2w] {
        color: #95e35d;
    }

    .gd-mobile-bottom-nav a.active .smart-icon[b-09thetqf2w] {
        color: #95e35d;
    }
}

@media (max-width: 720px) {
    .gd-mobile-head h2[b-09thetqf2w] {
        font-size: 1.7rem;
    }

    .gd-mobile-dashboard-cards .gd-status-card[b-09thetqf2w] {
        padding: 0.85rem;
    }

    .gd-mobile-dashboard-cards .gd-pool-pump-summary[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-status-billiard-summary[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-status-energy-metrics[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-pump-mode-summary[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-pool-pump-control-row[b-09thetqf2w] {
        grid-template-columns: 1fr;
        padding-right: 0;
    }

    .gd-mobile-dashboard-cards .gd-pool-pump-controls[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-pump-mode-switch[b-09thetqf2w] {
        width: 100%;
    }

    .gd-mobile-bottom-nav[b-09thetqf2w] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 0.35rem;
    }
}

@media (max-width: 480px) {
    .gd-mobile-dashboard-cards .gd-status-card-hero[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-reference-icon.hero[b-09thetqf2w] {
        height: 58px;
        width: 58px;
    }

    .gd-mobile-dashboard-cards .gd-status-card-pool-pump .gd-status-card-hero[b-09thetqf2w],
    .gd-mobile-dashboard-cards .gd-status-card-pool-pump .gd-reference-icon.hero[b-09thetqf2w] {
        height: 72px;
        width: 72px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.garden-display[b-v9zjw1lslm] {
    background: radial-gradient(circle at 20% 10%, rgba(16, 185, 129, 0.12), transparent 45%), #0a0f14;
    border-radius: 1.25rem;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: calc(100vh - 2.5rem);
    overflow: hidden;
    padding: 1rem 1.25rem 1.25rem;
}

/* Topbar */
.garden-topbar[b-v9zjw1lslm] {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.garden-brand[b-v9zjw1lslm] {
    align-items: center;
    display: flex;
    gap: 0.65rem;
}

.garden-logo[b-v9zjw1lslm] {
    background: linear-gradient(135deg, #34d399, #10b981);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.9rem rgba(52, 211, 153, 0.5);
    height: 1.7rem;
    position: relative;
    width: 1.7rem;
}

.garden-logo[b-v9zjw1lslm]::after {
    color: #04120c;
    content: "\1F343";
    font-size: 1rem;
    inset: 0;
    line-height: 1.7rem;
    position: absolute;
    text-align: center;
}

.garden-title[b-v9zjw1lslm] {
    color: #f8fafc;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.garden-title em[b-v9zjw1lslm] {
    color: #34d399;
    font-style: normal;
}

.garden-topbar-status[b-v9zjw1lslm] {
    align-items: center;
    display: flex;
    gap: 0.6rem;
}

.topbar-chip[b-v9zjw1lslm] {
    align-items: center;
    color: #cbd5e1;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 600;
    gap: 0.35rem;
}

.topbar-chip.signal[b-v9zjw1lslm] {
    align-items: flex-end;
    gap: 0.15rem;
}

.topbar-chip.signal i[b-v9zjw1lslm] {
    background: #475569;
    border-radius: 1px;
    display: inline-block;
    width: 0.28rem;
}

.topbar-chip.signal i:nth-child(1)[b-v9zjw1lslm] { height: 0.4rem; }
.topbar-chip.signal i:nth-child(2)[b-v9zjw1lslm] { height: 0.65rem; }
.topbar-chip.signal i:nth-child(3)[b-v9zjw1lslm] { height: 0.9rem; }

.topbar-chip.signal.online i[b-v9zjw1lslm] { background: #34d399; }
.topbar-chip.signal.offline i[b-v9zjw1lslm] { background: #64748b; }

/* Body grid */
.garden-body[b-v9zjw1lslm] {
    display: grid;
    flex: 1;
    gap: 0.85rem;
    grid-template-columns: 15rem minmax(0, 1fr) 17rem;
    min-height: 0;
}

.panel-eyebrow[b-v9zjw1lslm] {
    color: #34d399;
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

/* Energy sidebar */
.garden-energy[b-v9zjw1lslm] {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
}

.energy-row[b-v9zjw1lslm] {
    align-items: center;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 0.75rem;
    color: inherit;
    display: flex;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.energy-row:hover[b-v9zjw1lslm] {
    border-color: rgba(52, 211, 153, 0.5);
    transform: translateY(-1px);
}

.energy-icon[b-v9zjw1lslm] {
    align-items: center;
    color: #34d399;
    display: flex;
    justify-content: center;
}

.energy-detail[b-v9zjw1lslm] {
    display: flex;
    flex: 1;
    flex-direction: column;
    line-height: 1.2;
}

.energy-detail small[b-v9zjw1lslm] {
    color: #94a3b8;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.energy-detail strong[b-v9zjw1lslm] {
    color: #34d399;
    font-size: 1.15rem;
}

.energy-detail span[b-v9zjw1lslm] {
    color: #94a3b8;
    font-size: 0.72rem;
}

.energy-arrow[b-v9zjw1lslm] {
    color: #64748b;
    font-size: 1.2rem;
}

/* Main column */
.garden-main[b-v9zjw1lslm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}

.garden-metrics[b-v9zjw1lslm] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(6, 1fr);
}

.metric-chip[b-v9zjw1lslm] {
    align-items: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.8rem;
    color: inherit;
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.metric-chip:hover[b-v9zjw1lslm] {
    border-color: rgba(52, 211, 153, 0.5);
}

.metric-icon[b-v9zjw1lslm] {
    color: #34d399;
    display: flex;
}

.metric-chip small[b-v9zjw1lslm] {
    color: #94a3b8;
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.metric-chip strong[b-v9zjw1lslm] {
    color: #f1f5f9;
    font-size: 0.95rem;
}

/* Map */
.garden-map[b-v9zjw1lslm] {
    border-radius: 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.garden-map-image[b-v9zjw1lslm] {
    background-color: #0f172a;
    background-image: linear-gradient(rgba(4, 12, 20, 0.15), rgba(4, 12, 20, 0.55)), url('/images/garten.jpg');
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1rem;
    height: 100%;
    min-height: 22rem;
    position: relative;
    width: 100%;
}

.map-marker[b-v9zjw1lslm] {
    align-items: center;
    color: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: absolute;
    text-decoration: none;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.marker-dot[b-v9zjw1lslm] {
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.7);
    border-radius: 50%;
    color: #f8fafc;
    display: flex;
    font-size: 0.72rem;
    font-weight: 700;
    height: 1.35rem;
    justify-content: center;
    width: 1.35rem;
}

.marker-label[b-v9zjw1lslm] {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 0.4rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.map-marker:hover .marker-dot[b-v9zjw1lslm] {
    background: #10b981;
    border-color: #34d399;
}

/* Side column */
.garden-side[b-v9zjw1lslm] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 0;
}

.side-card[b-v9zjw1lslm] {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 1rem;
    padding: 1rem;
}

.side-card-head[b-v9zjw1lslm] {
    align-items: center;
    color: inherit;
    display: flex;
    justify-content: space-between;
    text-decoration: none;
}

.side-card-arrow[b-v9zjw1lslm] {
    color: #64748b;
    font-size: 1.2rem;
}

.sound-track[b-v9zjw1lslm] {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    margin: 0.6rem 0;
}

.sound-cover[b-v9zjw1lslm] {
    border-radius: 0.6rem;
    height: 3.2rem;
    object-fit: cover;
    width: 3.2rem;
}

.sound-cover.placeholder[b-v9zjw1lslm] {
    align-items: center;
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    display: flex;
    justify-content: center;
}

.sound-meta[b-v9zjw1lslm] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.sound-meta strong[b-v9zjw1lslm] {
    color: #f8fafc;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sound-meta span[b-v9zjw1lslm] {
    color: #cbd5e1;
    font-size: 0.8rem;
}

.sound-meta small[b-v9zjw1lslm] {
    color: #94a3b8;
    font-size: 0.7rem;
}

.sound-progress[b-v9zjw1lslm] {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    height: 0.28rem;
    overflow: hidden;
}

.sound-progress i[b-v9zjw1lslm] {
    background: linear-gradient(90deg, #34d399, #10b981);
    display: block;
    height: 100%;
}

.side-empty[b-v9zjw1lslm] {
    align-items: center;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 0;
    text-align: center;
}

.activity-row[b-v9zjw1lslm] {
    align-items: center;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 0.75rem;
    color: inherit;
    display: flex;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.65rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.activity-row:hover[b-v9zjw1lslm] {
    border-color: rgba(52, 211, 153, 0.5);
}

.activity-icon[b-v9zjw1lslm] {
    color: #34d399;
    display: flex;
}

.activity-detail[b-v9zjw1lslm] {
    display: flex;
    flex: 1;
    flex-direction: column;
    line-height: 1.2;
}

.activity-detail strong[b-v9zjw1lslm] {
    color: #f8fafc;
    font-size: 0.92rem;
}

.activity-detail span[b-v9zjw1lslm] {
    color: #94a3b8;
    font-size: 0.75rem;
}

.activity-cta[b-v9zjw1lslm] {
    background: rgba(52, 211, 153, 0.15);
    border-radius: 0.5rem;
    color: #34d399;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
}

/* Tabs */
.garden-tabs[b-v9zjw1lslm] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(8, 1fr);
}

.garden-tab[b-v9zjw1lslm] {
    align-items: center;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0.9rem;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.4rem;
    letter-spacing: 0.03em;
    padding: 0.85rem 0.4rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.garden-tab span[b-v9zjw1lslm] {
    color: #94a3b8;
    display: flex;
    transition: color 0.15s ease;
}

.garden-tab span :deep(svg)[b-v9zjw1lslm],
.garden-tab span svg[b-v9zjw1lslm] {
    height: 1.6rem;
    width: 1.6rem;
}

.garden-tab:hover[b-v9zjw1lslm] {
    border-color: rgba(52, 211, 153, 0.5);
    color: #f8fafc;
}

.garden-tab:hover span[b-v9zjw1lslm] {
    color: #f8fafc;
}

.garden-tab.active[b-v9zjw1lslm] {
    background: rgba(52, 211, 153, 0.08);
    border-color: #34d399;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 0 1.1rem rgba(52, 211, 153, 0.35);
    color: #34d399;
}

.garden-tab.active span[b-v9zjw1lslm] {
    color: #34d399;
}

.garden-tab.tab-energy span[b-v9zjw1lslm] { color: #facc15; }
.garden-tab.tab-water span[b-v9zjw1lslm] { color: #38bdf8; }
.garden-tab.tab-pool span[b-v9zjw1lslm] { color: #22d3ee; }
.garden-tab.tab-sound span[b-v9zjw1lslm] { color: #a78bfa; }
.garden-tab.tab-leisure span[b-v9zjw1lslm] { color: #fb923c; }
.garden-tab.tab-places span[b-v9zjw1lslm] { color: #e2e8f0; }
.garden-tab.tab-settings span[b-v9zjw1lslm] { color: #e2e8f0; }

.garden-tab.tab-energy:hover span[b-v9zjw1lslm],
.garden-tab.tab-water:hover span[b-v9zjw1lslm],
.garden-tab.tab-pool:hover span[b-v9zjw1lslm],
.garden-tab.tab-sound:hover span[b-v9zjw1lslm],
.garden-tab.tab-leisure:hover span[b-v9zjw1lslm],
.garden-tab.tab-places:hover span[b-v9zjw1lslm],
.garden-tab.tab-settings:hover span[b-v9zjw1lslm] {
    color: #f8fafc;
}

@media (max-width: 1100px) {
    .garden-body[b-v9zjw1lslm] {
        grid-template-columns: 1fr;
    }

    .garden-energy[b-v9zjw1lslm] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .garden-energy .panel-eyebrow[b-v9zjw1lslm] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .garden-metrics[b-v9zjw1lslm] {
        grid-template-columns: repeat(3, 1fr);
    }

    .garden-energy[b-v9zjw1lslm] {
        grid-template-columns: 1fr;
    }

    .garden-tabs[b-v9zjw1lslm] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* /Components/Pages/Leagues.razor.rz.scp.css */
.league-page[b-7i7dhbl7r7] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #f8fafc;
}

.league-hero[b-7i7dhbl7r7],
.detail-card[b-7i7dhbl7r7],
.wizard-card[b-7i7dhbl7r7],
.league-list-panel[b-7i7dhbl7r7] {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(30, 41, 59, 0.58));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    border-radius: 28px;
    backdrop-filter: blur(18px);
}

.league-hero[b-7i7dhbl7r7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
}

.eyebrow[b-7i7dhbl7r7] {
    color: #a78bfa;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.primary-action[b-7i7dhbl7r7],
.action-row button[b-7i7dhbl7r7],
.entry-create button[b-7i7dhbl7r7] {
    border: 0;
    border-radius: 999px;
    padding: 0.75rem 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    font-weight: 700;
}

.league-layout[b-7i7dhbl7r7] {
    display: grid;
    grid-template-columns: minmax(260px, 330px) 1fr;
    gap: 1.2rem;
}

.league-list-panel[b-7i7dhbl7r7],
.league-workspace[b-7i7dhbl7r7],
.wizard-card[b-7i7dhbl7r7],
.detail-card[b-7i7dhbl7r7] {
    padding: 1rem;
}

.panel-heading[b-7i7dhbl7r7],
.league-title-row[b-7i7dhbl7r7],
.action-row[b-7i7dhbl7r7],
.live-strip[b-7i7dhbl7r7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.league-card[b-7i7dhbl7r7] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.72);
    color: inherit;
    text-align: left;
}

.league-card.selected[b-7i7dhbl7r7],
.standing-row.leader[b-7i7dhbl7r7] {
    border-color: rgba(34, 211, 238, 0.7);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25);
}

.wizard-grid[b-7i7dhbl7r7],
.tabs-grid[b-7i7dhbl7r7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.wizard-grid label[b-7i7dhbl7r7],
.entry-create[b-7i7dhbl7r7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

input[b-7i7dhbl7r7],
select[b-7i7dhbl7r7] {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 0.75rem 0.9rem;
    color: #e2e8f0;
    background: rgba(2, 6, 23, 0.65);
}

.tabs-grid article[b-7i7dhbl7r7],
.matchday-card[b-7i7dhbl7r7],
.entry-pill[b-7i7dhbl7r7],
.placement-row[b-7i7dhbl7r7],
.standing-row[b-7i7dhbl7r7] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.58);
    padding: 1rem;
}

.standing-row[b-7i7dhbl7r7],
.match-row[b-7i7dhbl7r7],
.entry-pill[b-7i7dhbl7r7],
.placement-row[b-7i7dhbl7r7] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.matchday-card[b-7i7dhbl7r7] {
    margin-top: 0.8rem;
}

.match-row[b-7i7dhbl7r7] {
    grid-template-columns: 1fr auto;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.season-badge[b-7i7dhbl7r7] {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.25);
}

.league-alert[b-7i7dhbl7r7],
.empty-state[b-7i7dhbl7r7] {
    color: #fecaca;
}

@media (max-width: 900px) {
    .league-layout[b-7i7dhbl7r7] {
        grid-template-columns: 1fr;
    }

    .league-hero[b-7i7dhbl7r7],
    .league-title-row[b-7i7dhbl7r7] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Logging.razor.rz.scp.css */
.logging-header[b-qaq0hmevkk] {
    align-items: center;
    display: grid;
    gap: clamp(0.9rem, 2.5vw, 1.5rem);
    grid-template-columns: auto 1fr auto;
}

@media (max-width: 640px) {
    .logging-header[b-qaq0hmevkk] {
        grid-template-columns: auto 1fr;
    }

    .logging-header .garden-button[b-qaq0hmevkk] {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

.logging-card[b-qaq0hmevkk] {
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.08);
}

.event-log-list[b-qaq0hmevkk] {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.event-log-entry[b-qaq0hmevkk] {
    background: rgba(248, 250, 252, 0.84);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.1rem;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(7rem, 0.18fr) minmax(0, 1fr);
    padding: 0.85rem;
}

.event-log-time[b-qaq0hmevkk] {
    display: grid;
    gap: 0.15rem;
}

.event-log-time strong[b-qaq0hmevkk],
.event-log-main h4[b-qaq0hmevkk] {
    color: #0f172a;
}

.event-log-time span[b-qaq0hmevkk],
.event-log-main p[b-qaq0hmevkk] {
    color: #587062;
}

.event-log-main[b-qaq0hmevkk] {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.event-log-main > div[b-qaq0hmevkk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.event-log-main h4[b-qaq0hmevkk],
.event-log-main p[b-qaq0hmevkk] {
    margin: 0;
}

.event-area[b-qaq0hmevkk],
.event-type[b-qaq0hmevkk],
.event-status[b-qaq0hmevkk] {
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 850;
    padding: 0.25rem 0.55rem;
}

.event-area[b-qaq0hmevkk] {
    background: rgba(22, 101, 52, 0.12);
    color: #166534;
}

.event-type[b-qaq0hmevkk] {
    background: rgba(14, 165, 233, 0.12);
    color: #075985;
}

.event-status[b-qaq0hmevkk] {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

@media (max-width: 680px) {
    .logging-header[b-qaq0hmevkk] {
        align-items: flex-start;
        flex-direction: column;
    }

    .event-log-entry[b-qaq0hmevkk] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Musik.razor.rz.scp.css */
.music-header[b-nkqlql6suf] {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.music-now-playing[b-nkqlql6suf] {
    align-items: center;
    background: linear-gradient(135deg, rgba(30, 215, 96, 0.16), rgba(15, 23, 42, 0.08));
    border: 1px solid rgba(30, 215, 96, 0.22);
    border-radius: 1.4rem;
    display: grid;
    gap: 0.15rem;
    min-width: 14rem;
    padding: 1rem;
    text-align: center;
}

.music-now-playing span[b-nkqlql6suf] {
    font-size: 2rem;
}

.music-now-playing small[b-nkqlql6suf],
.spotify-side-panel small[b-nkqlql6suf],
.spotify-playlist-card small[b-nkqlql6suf],
.recent-track-card small[b-nkqlql6suf],
.spotify-search-card p[b-nkqlql6suf],
.spotify-note-card p[b-nkqlql6suf] {
    color: #587062;
}

.spotify-shell[b-nkqlql6suf] {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    margin-bottom: 1.25rem;
}

.spotify-hero[b-nkqlql6suf] {
    background: radial-gradient(circle at top left, rgba(30, 215, 96, 0.42), transparent 34%), linear-gradient(135deg, #121212, #1f2937 56%, #064e3b);
    border-radius: 2rem;
    box-shadow: 0 1.5rem 3.5rem rgba(2, 6, 23, 0.24);
    color: #fff;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr);
    padding: clamp(1rem, 2.4vw, 2rem);
}

.album-art[b-nkqlql6suf] {
    align-items: center;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #1db954, #0f172a);
    border-radius: 1.5rem;
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.32);
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.album-art span[b-nkqlql6suf] {
    font-size: clamp(4rem, 9vw, 8rem);
}

.album-art img[b-nkqlql6suf],
.playlist-cover img[b-nkqlql6suf],
.recent-cover img[b-nkqlql6suf] {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.music-track-info[b-nkqlql6suf] {
    align-content: center;
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.music-track-info h3[b-nkqlql6suf] {
    font-size: clamp(2.2rem, 5vw, 5rem);
    line-height: 0.94;
    margin: 0;
    overflow-wrap: anywhere;
}

.music-track-info p[b-nkqlql6suf] {
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    margin: 0;
}

.spotify-hero-pills[b-nkqlql6suf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.spotify-hero-pills button[b-nkqlql6suf],
.spotify-hero-pills a[b-nkqlql6suf] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-weight: 900;
    padding: 0.55rem 0.85rem;
    text-decoration: none;
}

.spotify-hero-pills button:first-child[b-nkqlql6suf] {
    background: #1db954;
    color: #04130a;
}

.music-progress[b-nkqlql6suf] {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr auto;
}

.spotify-home-grid[b-nkqlql6suf] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
    margin-bottom: 1.25rem;
}

.spotify-home-card[b-nkqlql6suf] {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(24, 24, 24, 0.96));
    color: #fff;
    padding: 1rem;
}

.spotify-home-card p[b-nkqlql6suf],
.spotify-home-card small[b-nkqlql6suf] {
    color: rgba(255, 255, 255, 0.66);
}

.spotify-quick-grid[b-nkqlql6suf] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-top: 1rem;
}

.spotify-quick-card[b-nkqlql6suf] {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    color: #fff;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 3.8rem minmax(0, 1fr) auto;
    min-width: 0;
    overflow: hidden;
    padding: 0.55rem;
    text-align: left;
}

.spotify-quick-card:hover[b-nkqlql6suf],
.spotify-mini-track:hover[b-nkqlql6suf] {
    background: rgba(255, 255, 255, 0.14);
}

.spotify-quick-card .playlist-cover[b-nkqlql6suf] {
    border-radius: 0.55rem;
}

.spotify-quick-card strong[b-nkqlql6suf],
.spotify-mini-track strong[b-nkqlql6suf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spotify-quick-card > span[b-nkqlql6suf],
.spotify-mini-track > span[b-nkqlql6suf] {
    align-items: center;
    background: #1db954;
    border-radius: 999px;
    color: #04130a;
    display: flex;
    font-weight: 950;
    height: 2.2rem;
    justify-content: center;
    width: 2.2rem;
}

.spotify-mini-list[b-nkqlql6suf] {
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
}

.spotify-mini-track[b-nkqlql6suf] {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    color: #fff;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    padding: 0.45rem;
    text-align: left;
}

.music-progress div[b-nkqlql6suf] {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    height: 0.55rem;
    overflow: hidden;
}

.music-progress i[b-nkqlql6suf] {
    background: #1db954;
    display: block;
    height: 100%;
}

.music-controls[b-nkqlql6suf] {
    display: flex;
    gap: 0.85rem;
}

.music-controls button[b-nkqlql6suf] {
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.35rem;
    height: 3.2rem;
    width: 3.2rem;
}

.music-controls button.play[b-nkqlql6suf] {
    background: #1db954;
    color: #04130a;
    height: 3.8rem;
    width: 3.8rem;
}

.music-volume-control[b-nkqlql6suf] {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: auto minmax(8rem, 1fr) auto;
    padding: 0.7rem 1rem;
}

.music-volume-control span[b-nkqlql6suf],
.music-volume-control strong[b-nkqlql6suf] {
    font-weight: 900;
}

.music-volume-control input[b-nkqlql6suf],
.tv-volume-control input[b-nkqlql6suf] {
    accent-color: #1db954;
    width: 100%;
}

.spotify-side-panel[b-nkqlql6suf],
.spotify-search-card[b-nkqlql6suf],
.spotify-library-card[b-nkqlql6suf],
.spotify-note-card[b-nkqlql6suf] {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.6rem;
    box-shadow: 0 1rem 2.2rem rgba(15, 23, 42, 0.08);
}

.spotify-side-panel[b-nkqlql6suf] {
    background: rgba(255, 255, 255, 0.92);
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem;
}

.speaker-list[b-nkqlql6suf],
.speaker-list.compact[b-nkqlql6suf],
.speaker-select-panel[b-nkqlql6suf],
.recent-track-list[b-nkqlql6suf] {
    display: grid;
    gap: 0.65rem;
}

.spotify-device-select[b-nkqlql6suf] {
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(30, 215, 96, 0.28);
    border-radius: 0.8rem;
    color: #102116;
    font-weight: 850;
    padding: 0.65rem 0.75rem;
}

.spotify-device-list[b-nkqlql6suf] {
    display: grid;
    gap: 0.45rem;
    max-height: 14rem;
    overflow: auto;
}

.spotify-device-row[b-nkqlql6suf] {
    align-items: center;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 0.8rem;
    color: #102116;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    padding: 0.55rem 0.65rem;
    text-align: left;
}

.spotify-device-row.selected[b-nkqlql6suf] {
    background: rgba(220, 252, 231, 0.96);
    border-color: rgba(30, 215, 96, 0.36);
}

.spotify-device-row span[b-nkqlql6suf] {
    font-size: 1rem;
    line-height: 1;
}

.spotify-device-row strong[b-nkqlql6suf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spotify-device-row small[b-nkqlql6suf] {
    font-size: 0.78rem;
    text-align: right;
}

.speaker-card[b-nkqlql6suf] {
    align-items: center;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1rem;
    color: #102116;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: auto 1fr;
    padding: 0.8rem;
    text-align: left;
}

.speaker-card.selected[b-nkqlql6suf] {
    background: rgba(220, 252, 231, 0.92);
    border-color: rgba(30, 215, 96, 0.34);
}

.spotify-search-card[b-nkqlql6suf],
.spotify-library-card[b-nkqlql6suf],
.spotify-note-card[b-nkqlql6suf] {
    margin-bottom: 1.25rem;
}

.spotify-search-row[b-nkqlql6suf] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 1rem;
}

.spotify-suggestion-row[b-nkqlql6suf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.spotify-suggestion-row button[b-nkqlql6suf] {
    background: rgba(30, 215, 96, 0.12);
    border: 1px solid rgba(30, 215, 96, 0.24);
    border-radius: 999px;
    color: #166534;
    font-weight: 850;
    padding: 0.45rem 0.75rem;
}

.volume-preset-row[b-nkqlql6suf] {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, 1fr);
}

.volume-preset-row button[b-nkqlql6suf] {
    background: rgba(30, 215, 96, 0.12);
    border: 1px solid rgba(30, 215, 96, 0.24);
    border-radius: 999px;
    color: #166534;
    font-weight: 900;
    padding: 0.5rem 0.65rem;
}

.spotify-library-grid[b-nkqlql6suf] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
}

.spotify-card-grid[b-nkqlql6suf] {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    margin-top: 0.8rem;
}

.spotify-card-grid.search-results[b-nkqlql6suf] {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.spotify-playlist-card[b-nkqlql6suf] {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    color: #fff;
    display: grid;
    gap: 0.4rem;
    padding: 0.6rem;
    text-align: left;
    transition: transform 0.16s ease, background 0.16s ease;
}

.spotify-playlist-card:hover[b-nkqlql6suf] {
    background: #282828;
    transform: translateY(-0.12rem);
}

.spotify-playlist-card.selected[b-nkqlql6suf] {
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.88), #166534);
    border-color: rgba(30, 215, 96, 0.64);
}

.playlist-cover[b-nkqlql6suf],
.recent-cover[b-nkqlql6suf] {
    align-items: center;
    background: linear-gradient(135deg, #1db954, #334155);
    border-radius: 0.7rem;
    color: #fff;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.spotify-track-section[b-nkqlql6suf] {
    align-items: start;
}

.spotify-track-list[b-nkqlql6suf] {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.75rem;
    max-height: 32rem;
    overflow: auto;
    padding-right: 0.25rem;
}

.spotify-track-list.compact[b-nkqlql6suf] {
    max-height: 28rem;
}

.spotify-track-row[b-nkqlql6suf] {
    align-items: center;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 0.8rem;
    color: #102116;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    padding: 0.45rem;
    text-align: left;
}

.spotify-track-row:hover[b-nkqlql6suf] {
    background: rgba(220, 252, 231, 0.96);
    border-color: rgba(30, 215, 96, 0.3);
}

.spotify-track-row strong[b-nkqlql6suf],
.spotify-track-row small[b-nkqlql6suf] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spotify-track-row em[b-nkqlql6suf] {
    color: #587062;
    font-style: normal;
    font-weight: 800;
}

.playlist-cover[b-nkqlql6suf] {
    aspect-ratio: 1;
    font-size: 1.8rem;
}

.recent-track-card[b-nkqlql6suf] {
    align-items: center;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1rem;
    color: #102116;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2.8rem minmax(0, 1fr) auto;
    padding: 0.5rem;
    text-align: left;
    width: 100%;
}

.recent-cover[b-nkqlql6suf] {
    aspect-ratio: 1;
}

.recent-track-card strong[b-nkqlql6suf],
.spotify-playlist-card strong[b-nkqlql6suf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .spotify-shell[b-nkqlql6suf],
    .spotify-home-grid[b-nkqlql6suf],
    .spotify-library-grid[b-nkqlql6suf] {
        grid-template-columns: 1fr;
    }

    .spotify-hero[b-nkqlql6suf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .music-header[b-nkqlql6suf] {
        align-items: flex-start;
        flex-direction: column;
    }

    .spotify-search-row[b-nkqlql6suf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PlayerAvatar.razor.rz.scp.css */
.player-avatar[b-2qxab1t7kt] {
    align-items: center;
    background: linear-gradient(135deg, #14532d, #16a34a);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0.35rem 0.9rem rgba(13, 36, 24, 0.16);
    color: #fff;
    display: inline-grid;
    flex: 0 0 2.4rem;
    font-size: 0.8rem;
    font-weight: 900;
    height: 2.4rem;
    line-height: 1;
    max-height: 2.4rem;
    max-width: 2.4rem;
    min-height: 2.4rem;
    min-width: 2.4rem;
    overflow: visible;
    place-items: center;
    position: relative;
    width: 2.4rem;
}

.player-avatar.ko-current-avatar[b-2qxab1t7kt] {
    flex: 0 0 7rem;
    font-size: 2.2rem;
    height: 7rem;
    max-height: 7rem;
    max-width: 7rem;
    min-height: 7rem;
    min-width: 7rem;
    width: 7rem;
}

.player-avatar.ko-champion-avatar[b-2qxab1t7kt] {
    flex: 0 0 clamp(10rem, 18vw, 15rem);
    font-size: clamp(3rem, 5vw, 4.6rem);
    height: clamp(10rem, 18vw, 15rem);
    max-height: clamp(10rem, 18vw, 15rem);
    max-width: clamp(10rem, 18vw, 15rem);
    min-height: clamp(10rem, 18vw, 15rem);
    min-width: clamp(10rem, 18vw, 15rem);
    width: clamp(10rem, 18vw, 15rem);
}

.player-avatar.ko-champion-avatar.champion[b-2qxab1t7kt],
.player-avatar.ko-champion-avatar.rank-gold[b-2qxab1t7kt] {
    border-width: 4px;
    box-shadow: 0 0 0 0.2rem rgba(250, 204, 21, 0.78), 0 0 2rem rgba(250, 204, 21, 0.9);
}

.player-avatar.rank-gold[b-2qxab1t7kt] {
    border-color: #facc15;
    box-shadow: 0 0 0 0.14rem rgba(250, 204, 21, 0.72), 0 0 1.05rem rgba(250, 204, 21, 0.75);
}

.player-avatar.rank-silver[b-2qxab1t7kt] {
    border-color: #e5e7eb;
    box-shadow: 0 0 0 0.14rem rgba(226, 232, 240, 0.68), 0 0 0.95rem rgba(226, 232, 240, 0.58);
}

.player-avatar img[b-2qxab1t7kt] {
    border-radius: inherit;
    display: block;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.player-avatar.champion[b-2qxab1t7kt] {
    border-color: #facc15;
    box-shadow: 0 0 0 0.14rem rgba(250, 204, 21, 0.78), 0 0 1.2rem rgba(250, 204, 21, 0.85);
}

.player-avatar.gd-billiard-hero-avatar[b-2qxab1t7kt] {
    position: absolute;
    inset: 28px 5px 36px 5px;
    transform: none;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    flex-basis: auto;
    font-size: clamp(2rem, 3vw, 3rem);
    border: 2px solid #facc15;
    border-radius: 10px;
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.42);
    z-index: 0;
}

.player-avatar.gd-billiard-hero-avatar.rank-gold[b-2qxab1t7kt],
.player-avatar.gd-billiard-hero-avatar.champion[b-2qxab1t7kt] {
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.42);
}

.player-avatar.gd-billiard-hero-avatar.champion:not(.rank-gold)[b-2qxab1t7kt] {
    border-color: #e2e8f0;
    box-shadow: 0 0 14px rgba(226, 232, 240, 0.34);
}

.player-avatar i[b-2qxab1t7kt] {
    align-items: center;
    background: transparent;
    border: 0;
    bottom: 0;
    box-shadow: none;
    color: #713f12;
    display: inline-flex;
    font-size: 100%;
    font-style: normal;
    height: 50%;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 0;
    width: 50%;
    z-index: 2;
}
/* /Components/Pages/Players.razor.rz.scp.css */
.player-profile-toolbar[b-hgsi6q1id5] {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0;
}

.player-profile-grid[b-hgsi6q1id5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.player-profile-card[b-hgsi6q1id5] {
    display: grid;
    gap: .45rem;
    text-align: left;
    border: 0;
    color: inherit;
    cursor: pointer;
}

.avatar[b-hgsi6q1id5] {
    width: 3rem;
    height: 3rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0, 212, 255, .28), rgba(146, 88, 255, .3));
    font-weight: 800;
}

.chips[b-hgsi6q1id5],
.guest-chip[b-hgsi6q1id5] {
    opacity: .76;
    font-size: .85rem;
}

.profile-overview[b-hgsi6q1id5] {
    margin-top: 1rem;
}

.overview-tabs[b-hgsi6q1id5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
/* /Components/Pages/Strom.razor.rz.scp.css */
/* Kopfzeile */
.power-header[b-edi8u3gqo6] {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto;
}

.power-status-pill[b-edi8u3gqo6] {
    align-items: center;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-weight: 700;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

.power-status-pill .status-dot[b-edi8u3gqo6] {
    background: #94a3b8;
    border-radius: 50%;
    height: 0.7rem;
    width: 0.7rem;
}

.power-status-pill.running[b-edi8u3gqo6] {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.3);
    color: #15803d;
}

.power-status-pill.running .status-dot[b-edi8u3gqo6] {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
}

.power-status-pill.error[b-edi8u3gqo6] {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
    color: #b91c1c;
}

.power-status-pill.error .status-dot[b-edi8u3gqo6] {
    background: #dc2626;
}

/* Kennzahlen */
.power-metric-grid[b-edi8u3gqo6] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-bottom: 1.25rem;
}

.power-metric small[b-edi8u3gqo6] {
    color: #64748b;
    font-weight: 600;
}

.power-metric strong[b-edi8u3gqo6] {
    color: #0f172a;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
}

.power-metric p[b-edi8u3gqo6] {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0;
}

.power-progress[b-edi8u3gqo6] {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    height: 0.5rem;
    margin-top: 0.35rem;
    overflow: hidden;
    width: 100%;
}

.power-progress i[b-edi8u3gqo6] {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    border-radius: 999px;
    display: block;
    height: 100%;
}

/* Dashboard-Layout */
.power-dashboard[b-edi8u3gqo6] {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    margin-bottom: 1.25rem;
}

.power-plant-card[b-edi8u3gqo6],
.generator-control-card[b-edi8u3gqo6] {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.5rem;
    box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.08);
    padding: clamp(1rem, 2.5vw, 1.6rem);
}

.dess-online-dot[b-edi8u3gqo6] {
    background: #16a34a;
    border-radius: 50%;
    display: inline-block;
    height: 0.65rem;
    margin-right: 0.5rem;
    width: 0.65rem;
}

.dess-online-dot.offline[b-edi8u3gqo6] {
    background: #dc2626;
}

.current-user-chip[b-edi8u3gqo6] {
    background: rgba(14, 165, 233, 0.12);
    border-radius: 999px;
    color: #0369a1;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
}

/* Energiefluss */
.energy-flow[b-edi8u3gqo6] {
    margin-top: 1.1rem;
}

.energy-flow-track[b-edi8u3gqo6] {
    align-items: stretch;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr auto 1fr auto 1fr;
}

.energy-group[b-edi8u3gqo6] {
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.energy-group-title[b-edi8u3gqo6] {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.energy-node[b-edi8u3gqo6] {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 1.1rem;
    display: flex;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.energy-node-icon[b-edi8u3gqo6] {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.9rem;
    display: inline-flex;
    height: 2.6rem;
    justify-content: center;
    width: 2.6rem;
}

.energy-node-body[b-edi8u3gqo6] {
    display: grid;
    gap: 0.05rem;
}

.energy-node-body small[b-edi8u3gqo6] {
    color: #64748b;
    font-weight: 600;
}

.energy-node-body strong[b-edi8u3gqo6] {
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.1;
}

.energy-node-body em[b-edi8u3gqo6] {
    color: #94a3b8;
    font-size: 0.78rem;
    font-style: normal;
}

.energy-node.active[b-edi8u3gqo6] {
    box-shadow: 0 0.6rem 1.6rem rgba(15, 23, 42, 0.1);
}

.energy-node.solar.active[b-edi8u3gqo6] { border-color: rgba(245, 158, 11, 0.5); }
.energy-node.generator.active[b-edi8u3gqo6] { border-color: rgba(234, 88, 12, 0.5); }
.energy-node.load.active[b-edi8u3gqo6] { border-color: rgba(99, 102, 241, 0.5); }
.energy-node.inverter.primary[b-edi8u3gqo6] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.9));
    border-color: rgba(245, 158, 11, 0.4);
}

.energy-node.battery.charging[b-edi8u3gqo6] { border-color: rgba(22, 163, 74, 0.5); }
.energy-node.battery.charging .energy-node-body strong[b-edi8u3gqo6] { color: #15803d; }
.energy-node.battery.discharging[b-edi8u3gqo6] { border-color: rgba(234, 88, 12, 0.5); }
.energy-node.battery.discharging .energy-node-body strong[b-edi8u3gqo6] { color: #c2410c; }

.energy-flow-arrow[b-edi8u3gqo6] {
    align-self: center;
    color: #cbd5e1;
    display: inline-flex;
}

.energy-flow-arrow.active[b-edi8u3gqo6] {
    color: #f59e0b;
    animation: energyPulse-b-edi8u3gqo6 1.4s ease-in-out infinite;
}

@keyframes energyPulse-b-edi8u3gqo6 {
    0%, 100% { opacity: 0.4; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(3px); }
}

/* Detailraster */
.energy-detail-grid[b-edi8u3gqo6] {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-top: 1.1rem;
}

.energy-detail[b-edi8u3gqo6] {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.9rem;
    display: flex;
    gap: 0.65rem;
    padding: 0.65rem 0.8rem;
}

.energy-detail div[b-edi8u3gqo6] {
    display: grid;
}

.energy-detail strong[b-edi8u3gqo6] {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
}

.energy-detail small[b-edi8u3gqo6] {
    color: #64748b;
}

.energy-detail-icon[b-edi8u3gqo6] {
    align-items: center;
    border-radius: 0.7rem;
    display: inline-flex;
    height: 2.1rem;
    justify-content: center;
    width: 2.1rem;
}

.energy-detail-icon.battery[b-edi8u3gqo6] { background: rgba(22, 163, 74, 0.12); }
.energy-detail-icon.charge[b-edi8u3gqo6] { background: rgba(34, 197, 94, 0.12); }
.energy-detail-icon.discharge[b-edi8u3gqo6] { background: rgba(234, 88, 12, 0.12); }
.energy-detail-icon.power[b-edi8u3gqo6] { background: rgba(245, 158, 11, 0.12); }

/* Batteriezellen */
.battery-pack[b-edi8u3gqo6] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    margin-top: 1.2rem;
}

.battery-cell[b-edi8u3gqo6] {
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 0.8rem;
    display: grid;
    gap: 0.2rem;
    padding: 0.6rem;
    text-align: center;
}

.battery-cell span[b-edi8u3gqo6] {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

.battery-cell strong[b-edi8u3gqo6] {
    color: #15803d;
    font-weight: 800;
}

.battery-cell.warning[b-edi8u3gqo6] {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
}

.battery-cell.warning strong[b-edi8u3gqo6] {
    color: #b91c1c;
}

/* Generatorsteuerung */
.generator-mode-grid[b-edi8u3gqo6] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, 1fr);
    margin: 0.75rem 0;
}

.generator-mode[b-edi8u3gqo6] {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.9rem;
    cursor: pointer;
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0.5rem;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.generator-mode strong[b-edi8u3gqo6] {
    color: #0f172a;
    font-weight: 800;
}

.generator-mode small[b-edi8u3gqo6] {
    color: #64748b;
    font-size: 0.72rem;
}

.generator-mode.selected[b-edi8u3gqo6] {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.5);
}

.generator-summary[b-edi8u3gqo6] {
    align-items: center;
    background: #f8fafc;
    border-radius: 0.9rem;
    display: flex;
    justify-content: space-between;
    margin-top: 0.85rem;
    padding: 0.6rem 0.9rem;
}

.generator-summary span[b-edi8u3gqo6] {
    color: #64748b;
    font-weight: 600;
}

.generator-summary strong[b-edi8u3gqo6] {
    color: #0f172a;
    font-weight: 800;
}

/* Verlauf */
.power-plot-card[b-edi8u3gqo6] {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.5rem;
    box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.08);
    margin-bottom: 1.25rem;
    padding: clamp(1rem, 2.5vw, 1.6rem);
}

.plot-controls[b-edi8u3gqo6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.plot-window-nav[b-edi8u3gqo6],
.plot-range-picker[b-edi8u3gqo6] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.plot-window-nav button[b-edi8u3gqo6],
.plot-range-picker button[b-edi8u3gqo6] {
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0.7rem;
    color: #334155;
    cursor: pointer;
    font-weight: 600;
    min-height: 2.4rem;
    padding: 0.4rem 0.85rem;
}

.plot-window-nav button:disabled[b-edi8u3gqo6],
.plot-range-picker button:disabled[b-edi8u3gqo6] {
    opacity: 0.5;
}

.plot-range-picker button.selected[b-edi8u3gqo6] {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.5);
    color: #0369a1;
}

.plot-summary-grid[b-edi8u3gqo6] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin: 1rem 0;
}

.plot-summary-grid > div[b-edi8u3gqo6] {
    background: #f8fafc;
    border-radius: 0.9rem;
    display: grid;
    gap: 0.1rem;
    padding: 0.7rem 0.9rem;
}

.plot-summary-grid span[b-edi8u3gqo6] {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
}

.plot-summary-grid strong[b-edi8u3gqo6] {
    color: #0f172a;
    font-size: 1.3rem;
    font-weight: 800;
}

.plot-summary-grid small[b-edi8u3gqo6] {
    color: #94a3b8;
    font-size: 0.75rem;
}

.power-plot-wrap[b-edi8u3gqo6] {
    position: relative;
}

.power-history-plot[b-edi8u3gqo6] {
    height: clamp(11rem, 30vw, 17rem);
    width: 100%;
}

.plot-grid-line[b-edi8u3gqo6] {
    stroke: rgba(15, 23, 42, 0.08);
    stroke-width: 0.2;
}

.plot-area.consumption-area[b-edi8u3gqo6] { fill: url(#consumptionFill); }
.plot-area.battery-area[b-edi8u3gqo6] { fill: url(#batteryFill); }

.plot-line[b-edi8u3gqo6] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 0.7;
    vector-effect: non-scaling-stroke;
}

.plot-line.consumption[b-edi8u3gqo6] { stroke: #f97316; }
.plot-line.battery[b-edi8u3gqo6] { stroke: #22c55e; }
.plot-line.generator[b-edi8u3gqo6] { stroke: #6366f1; stroke-dasharray: 2 1.5; }

.plot-axis-label[b-edi8u3gqo6] {
    color: #94a3b8;
    font-size: 0.72rem;
}

.plot-axis-label.top[b-edi8u3gqo6] { margin-bottom: 0.25rem; }
.plot-axis-label.bottom[b-edi8u3gqo6] { margin-top: 0.25rem; }

.plot-legend[b-edi8u3gqo6] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.85rem;
}

.plot-legend span[b-edi8u3gqo6] {
    align-items: center;
    color: #475569;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.4rem;
}

.legend-dot[b-edi8u3gqo6] {
    border-radius: 50%;
    height: 0.7rem;
    width: 0.7rem;
}

.legend-dot.consumption[b-edi8u3gqo6] { background: #f97316; }
.legend-dot.battery[b-edi8u3gqo6] { background: #22c55e; }
.legend-dot.generator[b-edi8u3gqo6] { background: #6366f1; }

.plot-labels[b-edi8u3gqo6] {
    color: #94a3b8;
    display: flex;
    font-size: 0.72rem;
    justify-content: space-between;
    margin-top: 0.5rem;
}

/* Einstellungen unten */
.power-settings-grid[b-edi8u3gqo6] {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.bms-detail-grid[b-edi8u3gqo6] {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-top: 0.75rem;
}

.bms-detail-grid > div[b-edi8u3gqo6] {
    background: #f8fafc;
    border-radius: 0.9rem;
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.85rem;
}

.bms-detail-grid span[b-edi8u3gqo6] {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.bms-detail-grid strong[b-edi8u3gqo6] {
    color: #0f172a;
    font-weight: 800;
}

@media (max-width: 960px) {
    .power-dashboard[b-edi8u3gqo6] {
        grid-template-columns: 1fr;
    }

    .energy-flow-track[b-edi8u3gqo6] {
        grid-template-columns: 1fr;
    }

    .energy-flow-arrow[b-edi8u3gqo6] {
        justify-self: center;
        transform: rotate(90deg);
    }

    .energy-flow-arrow.active[b-edi8u3gqo6] {
        animation: none;
    }
}

@media (max-width: 560px) {
    .power-header[b-edi8u3gqo6] {
        grid-template-columns: 1fr;
    }

    .generator-mode-grid[b-edi8u3gqo6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Tournaments.razor.rz.scp.css */
.tournament-page[b-m3on0d1cbn] {
    display: grid;
    gap: 1.25rem;
    padding: 1rem;
}

.team-grid[b-m3on0d1cbn],
.groups-section[b-m3on0d1cbn],
.placements-section[b-m3on0d1cbn],
.double-elimination-view[b-m3on0d1cbn] {
    display: grid;
    gap: 1rem;
}

.team-card[b-m3on0d1cbn] {
    border-width: 2px;
}

.team-members[b-m3on0d1cbn] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.team-members span[b-m3on0d1cbn],
.qualification-qualified[b-m3on0d1cbn] {
    border-radius: 999px;
    background: rgba(34, 197, 94, .16);
    color: #bbf7d0;
    padding: .25rem .55rem;
}

.group-card[b-m3on0d1cbn],
.podium-card[b-m3on0d1cbn] {
    background: rgba(255, 255, 255, .07);
}

.qualification-eliminated[b-m3on0d1cbn] {
    opacity: .55;
}

.qualification-tiebreakrequired[b-m3on0d1cbn] {
    color: #fbbf24;
}

.double-elimination-view h3[b-m3on0d1cbn] {
    margin: 1rem 0 .25rem;
}

.tournament-hero[b-m3on0d1cbn],
.tournament-panel[b-m3on0d1cbn] {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(18, 26, 40, .94), rgba(10, 13, 22, .94));
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    color: #f6f8ff;
}

.tournament-hero[b-m3on0d1cbn] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.25rem, 2vw, 2rem);
}

.tournament-hero h1[b-m3on0d1cbn],
.tournament-panel h2[b-m3on0d1cbn],
.round-card h3[b-m3on0d1cbn] {
    margin: 0;
}

.eyebrow[b-m3on0d1cbn] {
    margin: 0 0 .35rem;
    color: #72f4ff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-stats[b-m3on0d1cbn] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.hero-stats span[b-m3on0d1cbn],
.status-pill[b-m3on0d1cbn],
.sport-badge[b-m3on0d1cbn],
.filter-chip[b-m3on0d1cbn] {
    border: 1px solid rgba(114, 244, 255, .26);
    border-radius: 999px;
    background: rgba(114, 244, 255, .08);
    padding: .5rem .75rem;
}

.tournament-grid[b-m3on0d1cbn] {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 2fr);
    gap: 1rem;
}

.tournament-panel[b-m3on0d1cbn] {
    padding: 1rem;
}

.panel-title-row[b-m3on0d1cbn],
.detail-header[b-m3on0d1cbn],
.detail-actions[b-m3on0d1cbn] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.primary-action[b-m3on0d1cbn],
.secondary-action[b-m3on0d1cbn],
.detail-tabs button[b-m3on0d1cbn],
.filter-chip[b-m3on0d1cbn],
.tournament-card[b-m3on0d1cbn] {
    min-height: 48px;
    border: 0;
    color: #f6f8ff;
    cursor: pointer;
}

.primary-action[b-m3on0d1cbn] {
    border-radius: 16px;
    background: linear-gradient(135deg, #7b61ff, #ff4d8d);
    padding: .8rem 1rem;
    font-weight: 900;
}

.secondary-action[b-m3on0d1cbn] {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    padding: .8rem 1rem;
    font-weight: 800;
}

.secondary-action:disabled[b-m3on0d1cbn] {
    opacity: .45;
    cursor: not-allowed;
}

.status-filters[b-m3on0d1cbn],
.detail-tabs[b-m3on0d1cbn] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
}

.filter-chip[b-m3on0d1cbn],
.detail-tabs button[b-m3on0d1cbn] {
    background: rgba(255, 255, 255, .06);
}

.filter-chip.active[b-m3on0d1cbn],
.detail-tabs button.active[b-m3on0d1cbn],
.tournament-card.selected[b-m3on0d1cbn] {
    border-color: rgba(114, 244, 255, .7);
    box-shadow: 0 0 22px rgba(114, 244, 255, .16);
}

.tournament-list[b-m3on0d1cbn],
.rounds-section[b-m3on0d1cbn],
.live-section[b-m3on0d1cbn],
.participant-grid[b-m3on0d1cbn] {
    display: grid;
    gap: .75rem;
}

.tournament-card[b-m3on0d1cbn],
.round-card[b-m3on0d1cbn],
.participant-card[b-m3on0d1cbn],
.live-card[b-m3on0d1cbn],
.wizard-empty[b-m3on0d1cbn],
.overview-grid > div[b-m3on0d1cbn],
.standing-row[b-m3on0d1cbn],
.match-row[b-m3on0d1cbn],
.participant-form[b-m3on0d1cbn] {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .055);
}

.tournament-card[b-m3on0d1cbn] {
    display: grid;
    gap: .35rem;
    width: 100%;
    padding: .9rem;
    text-align: left;
}

.progress-line[b-m3on0d1cbn] {
    overflow: hidden;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
}

.progress-line i[b-m3on0d1cbn] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #72f4ff, #7bff89);
}

.overview-grid[b-m3on0d1cbn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.overview-grid > div[b-m3on0d1cbn],
.wizard-empty[b-m3on0d1cbn],
.round-card[b-m3on0d1cbn],
.live-card[b-m3on0d1cbn],
.participant-card[b-m3on0d1cbn] {
    padding: 1rem;
}

.overview-grid span[b-m3on0d1cbn],
.match-row span[b-m3on0d1cbn],
.live-card small[b-m3on0d1cbn],
.participant-card small[b-m3on0d1cbn],
.tournament-card small[b-m3on0d1cbn] {
    color: rgba(246, 248, 255, .68);
}

.participant-form[b-m3on0d1cbn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    gap: .75rem;
    padding: .75rem;
    margin-bottom: .75rem;
}

.participant-form input[b-m3on0d1cbn] {
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(0, 0, 0, .22);
    color: #f6f8ff;
    padding: 0 .9rem;
}

.participant-grid[b-m3on0d1cbn] {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.participant-card[b-m3on0d1cbn] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .75rem;
}

.seed[b-m3on0d1cbn] {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(114, 244, 255, .14);
}

.match-row[b-m3on0d1cbn],
.standing-row[b-m3on0d1cbn] {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem;
    margin-top: .5rem;
}

.standing-row[b-m3on0d1cbn] {
    grid-template-columns: 44px minmax(0, 1fr) repeat(4, auto);
}

.tournament-alert[b-m3on0d1cbn],
.empty-state[b-m3on0d1cbn] {
    border: 1px solid rgba(255, 204, 102, .35);
    border-radius: 16px;
    background: rgba(255, 204, 102, .1);
    color: #ffe7ad;
    padding: 1rem;
}

@media (max-width: 1100px) {
    .tournament-grid[b-m3on0d1cbn],
    .overview-grid[b-m3on0d1cbn],
    .participant-form[b-m3on0d1cbn] {
        grid-template-columns: 1fr;
    }

    .tournament-hero[b-m3on0d1cbn] {
        align-items: stretch;
        flex-direction: column;
    }
}
/* /Components/Pages/TvMode.razor.rz.scp.css */
.tv-mode-page[b-1yv2ydx0lj] {
    background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.26), transparent 32%), radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.28), transparent 34%), linear-gradient(135deg, #020617, #082f49 48%, #052e16);
    color: #f8fafc;
    height: 100vh;
    overflow: hidden;
    padding: clamp(0.55rem, 1.1vw, 1.15rem);
    position: fixed;
    inset: 0;
}

.tv-mode-header[b-1yv2ydx0lj] {
    align-items: center;
    display: flex;
    height: 7.5vh;
    justify-content: space-between;
}

.tv-mode-header span[b-1yv2ydx0lj],
.tv-panel-title span[b-1yv2ydx0lj],
.tv-panel small[b-1yv2ydx0lj],
.tv-subline[b-1yv2ydx0lj],
.tv-track-info span[b-1yv2ydx0lj],
.tv-power-grid small[b-1yv2ydx0lj],
.tv-power-grid span[b-1yv2ydx0lj],
.tv-water-levels small[b-1yv2ydx0lj] {
    color: rgba(248, 250, 252, 0.72);
}

.tv-mode-header h1[b-1yv2ydx0lj] {
    font-size: clamp(2.1rem, 4.1vw, 4rem);
    line-height: 0.9;
    margin: 0;
}

.tv-mode-header-actions[b-1yv2ydx0lj] {
    align-items: center;
    display: flex;
    gap: 0.8rem;
}

.tv-page-switch[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
}

.tv-page-switch a[b-1yv2ydx0lj],
.tv-page-switch button[b-1yv2ydx0lj] {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: rgba(248, 250, 252, 0.82);
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    font-weight: 950;
    padding: 0.45rem 0.7rem;
    text-decoration: none;
    white-space: nowrap;
}

.tv-page-switch a.active[b-1yv2ydx0lj],
.tv-page-switch a:hover[b-1yv2ydx0lj],
.tv-page-switch button.active[b-1yv2ydx0lj],
.tv-page-switch button:hover[b-1yv2ydx0lj] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.tv-mode-header-actions button[b-1yv2ydx0lj],
.tv-dashboard-link[b-1yv2ydx0lj],
.tv-panel-title a[b-1yv2ydx0lj],
.tv-music-actions button[b-1yv2ydx0lj] {
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-weight: 900;
    padding: 0.55rem 0.85rem;
    text-decoration: none;
}

.tv-mode-grid.championship-active[b-1yv2ydx0lj] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.tv-championship-panel[b-1yv2ydx0lj] {
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.tv-mode-grid.championship-active .tv-water-panel[b-1yv2ydx0lj],
.tv-mode-grid.championship-active .tv-power-panel[b-1yv2ydx0lj],
.tv-mode-grid.championship-active .tv-kings-panel[b-1yv2ydx0lj],
.tv-mode-grid.championship-active .tv-music-panel[b-1yv2ydx0lj] {
    display: none;
}

.tv-mode-header-actions strong[b-1yv2ydx0lj] {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
}

.tv-mode-grid[b-1yv2ydx0lj] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1.12fr 1.12fr 0.9fr;
    grid-template-rows: 1.05fr 0.45fr 1fr;
    height: calc(92.5vh - clamp(0.55rem, 1.1vw, 1.15rem));
    min-height: 0;
}

.tv-game-panel:nth-of-type(1)[b-1yv2ydx0lj] {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.tv-game-panel:nth-of-type(2)[b-1yv2ydx0lj] {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.tv-water-panel[b-1yv2ydx0lj] {
    grid-column: 1;
    grid-row: 3;
}

.tv-power-panel[b-1yv2ydx0lj] {
    grid-column: 2;
    grid-row: 3;
}

.tv-panel[b-1yv2ydx0lj] {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
    display: grid;
    gap: 0.5rem;
    min-height: 0;
    overflow: hidden;
    padding: 0.75rem;
}

.tv-panel-large[b-1yv2ydx0lj] {
    align-content: start;
}

.tv-water-panel[b-1yv2ydx0lj],
.tv-power-panel[b-1yv2ydx0lj] {
    align-content: start;
}

.tv-water-panel[b-1yv2ydx0lj] {
    grid-template-rows: auto minmax(0, 1fr);
}

.tv-power-panel[b-1yv2ydx0lj] {
    grid-template-rows: auto minmax(0, 1fr);
}

.tv-music-panel[b-1yv2ydx0lj] {
    grid-column: 3;
    grid-row: 3;
    align-content: start;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: 100%;
    overflow: hidden;
}

.tv-kings-panel[b-1yv2ydx0lj] {
    align-content: start;
    grid-column: 3;
    grid-row: 1 / span 2;
    gap: 0.45rem;
}

.tv-panel-title[b-1yv2ydx0lj] {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.tv-panel-actions[b-1yv2ydx0lj] {
    align-items: center;
    display: flex;
    gap: 0.45rem;
}

.tv-panel-actions select[b-1yv2ydx0lj] {
    background: rgba(255, 255, 255, 0.95);
    border: 0;
    border-radius: 999px;
    color: #0f172a;
    font: inherit;
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    font-weight: 850;
    max-width: clamp(8rem, 12vw, 11rem);
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
}

.tv-panel-actions button[b-1yv2ydx0lj] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    font-weight: 950;
    min-height: 2.35rem;
    padding: 0.45rem 0.75rem;
    white-space: nowrap;
}

.tv-panel-actions button:disabled[b-1yv2ydx0lj],
.tv-winner-button:disabled[b-1yv2ydx0lj] {
    cursor: wait;
    opacity: 0.65;
}

.tv-panel-title span[b-1yv2ydx0lj] {
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tv-championship-summary[b-1yv2ydx0lj] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tv-championship-summary > div[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.9rem;
    display: grid;
    min-height: 3.4rem;
    padding: 0.55rem 0.75rem;
}

.tv-championship-summary .champion[b-1yv2ydx0lj] {
    gap: 0.6rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.tv-championship-summary small[b-1yv2ydx0lj],
.tv-ko-round h3[b-1yv2ydx0lj],
.tv-ko-player strong[b-1yv2ydx0lj] {
    text-transform: uppercase;
}

.tv-championship-summary strong[b-1yv2ydx0lj] {
    font-size: clamp(1rem, 1.55vw, 1.45rem);
    line-height: 1;
}

.tv-championship-table-stage[b-1yv2ydx0lj] {
    background: radial-gradient(circle at 12% 12%, rgba(34, 197, 94, 0.18), transparent 28%), radial-gradient(circle at right center, rgba(59, 130, 246, 0.24), transparent 30%), linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(8, 47, 73, 0.92));
    border: 1px solid rgba(45, 212, 191, 0.22);
    border-radius: 1.25rem;
    box-shadow: inset 0 0 2rem rgba(45, 212, 191, 0.08), 0 1.5rem 3rem rgba(0, 0, 0, 0.24);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.24fr);
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
    padding: 0.6rem;
}

.tv-championship-bracket[b-1yv2ydx0lj] {
    align-items: stretch;
    display: grid;
    gap: clamp(0.9rem, 1.6vw, 1.6rem);
    grid-template-columns: repeat(var(--round-count), minmax(13rem, 1fr));
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    padding: 0.4rem 0.25rem 1.6rem;
    scrollbar-color: rgba(147, 197, 253, 0.45) rgba(15, 23, 42, 0.35);
    scrollbar-width: thin;
}

.tv-championship-bracket[b-1yv2ydx0lj]::-webkit-scrollbar {
    height: 0.5rem;
    width: 0.5rem;
}

.tv-championship-bracket[b-1yv2ydx0lj]::-webkit-scrollbar-thumb {
    background: rgba(147, 197, 253, 0.45);
    border-radius: 999px;
}

.tv-championship-bracket[b-1yv2ydx0lj]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.35);
}

.tv-championship-round-column[b-1yv2ydx0lj] {
    display: grid;
    grid-template-rows: auto minmax(min-content, 1fr);
    min-height: 0;
    min-width: 13rem;
    position: relative;
}

.tv-championship-round-column h3[b-1yv2ydx0lj] {
    color: #dbeafe;
    font-size: clamp(0.68rem, 0.9vw, 0.85rem);
    font-weight: 950;
    letter-spacing: 0.04em;
    margin: 0 0 0.65rem;
    text-align: center;
    text-transform: uppercase;
}

.tv-championship-round-matches[b-1yv2ydx0lj] {
    align-content: center;
    display: grid;
    gap: clamp(0.9rem, 1.4vw, 1.4rem);
    grid-auto-rows: min-content;
    min-height: 0;
}

.tv-championship-match-card[b-1yv2ydx0lj] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 64, 175, 0.34));
    border: 1px solid rgba(147, 197, 253, 0.24);
    border-radius: 0.95rem;
    box-shadow: inset 0 0 1rem rgba(59, 130, 246, 0.1), 0 0.7rem 1.4rem rgba(0, 0, 0, 0.22);
    color: #eff6ff;
    display: grid;
    gap: 0.3rem;
    min-height: clamp(8.4rem, 13vh, 10rem);
    padding: 0.55rem;
    position: relative;
}

.tv-championship-round-column:not(:last-child) .tv-championship-match-card[b-1yv2ydx0lj]::after {
    background: linear-gradient(90deg, rgba(147, 197, 253, 0.68), rgba(45, 212, 191, 0.25));
    content: "";
    height: 2px;
    left: 100%;
    position: absolute;
    top: 50%;
    width: clamp(0.9rem, 1.6vw, 1.6rem);
}

.tv-championship-match-card small[b-1yv2ydx0lj] {
    color: #93c5fd;
    font-size: clamp(0.48rem, 0.65vw, 0.62rem);
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.tv-championship-match-card em[b-1yv2ydx0lj] {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fef3c7;
    display: block;
    font-size: clamp(0.48rem, 0.66vw, 0.62rem);
    font-style: normal;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    padding: 0.2rem;
    position: absolute;
    right: 0.35rem;
    top: 0.35rem;
    width: auto;
}

.tv-championship-player[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #f8fafc;
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 0.6rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 3.1rem;
    padding: 0.3rem 4.6rem 0.3rem 0.4rem;
    text-align: left;
    width: 100%;
}

.tv-championship-player[b-1yv2ydx0lj]  .player-avatar {
    flex-basis: 2.9rem;
    font-size: 1.16rem;
    height: 2.9rem;
    max-height: 2.9rem;
    max-width: 2.9rem;
    min-height: 2.9rem;
    min-width: 2.9rem;
    width: 2.9rem;
}

.tv-championship-player strong[b-1yv2ydx0lj] {
    font-size: clamp(1.24rem, 1.7vw, 1.56rem);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-championship-player:hover:not(:disabled) strong[b-1yv2ydx0lj] {
    color: #fef3c7;
}

.tv-championship-player:disabled[b-1yv2ydx0lj] {
    cursor: default;
}

.tv-championship-player.winner strong[b-1yv2ydx0lj] {
    color: #86efac;
}

.tv-championship-player.eliminated[b-1yv2ydx0lj] {
    filter: grayscale(0.85);
    opacity: 0.5;
}

.tv-champion-spotlight[b-1yv2ydx0lj] {
    align-content: stretch;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 0.9rem;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    justify-items: center;
    min-height: 0;
    padding: clamp(0.35rem, 0.7vw, 0.75rem);
    text-align: center;
}

.tv-champion-spotlight[b-1yv2ydx0lj]  .player-avatar {
    align-self: stretch;
    border-width: clamp(0.25rem, 0.45vw, 0.45rem);
    flex-basis: auto;
    font-size: clamp(12rem, 28vw, 24rem);
    height: 100%;
    justify-self: stretch;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.tv-champion-spotlight[b-1yv2ydx0lj]  .player-avatar img {
    height: 100%;
    max-height: none;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.tv-champion-spotlight[b-1yv2ydx0lj]  .player-avatar i {
    bottom: 1.5%;
    font-size: 50%;
    right: 1.5%;
}

.tv-champion-spotlight small[b-1yv2ydx0lj] {
    color: rgba(254, 243, 199, 0.8);
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    font-weight: 950;
    letter-spacing: 0.1em;
    margin-top: 0.55rem;
    text-transform: uppercase;
}

.tv-champion-spotlight strong[b-1yv2ydx0lj] {
    color: #fef3c7;
    font-size: clamp(1.3rem, 2.5vw, 2.2rem);
    line-height: 1;
    text-shadow: 0 0 1rem rgba(250, 204, 21, 0.45);
}

.tv-championship-actions[b-1yv2ydx0lj] {
    align-items: end;
    display: grid;
    gap: 0.45rem;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr 1fr;
}

.tv-ko-cup[b-1yv2ydx0lj] {
    filter: drop-shadow(0 0 2.6rem rgba(250, 204, 21, 0.95));
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 1;
}

.tv-championship-actions button[b-1yv2ydx0lj] {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
    padding: 0.55rem 0.75rem;
}

.tv-championship-actions button.danger[b-1yv2ydx0lj] {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(248, 113, 113, 0.55);
}

.tv-championship-actions button:disabled[b-1yv2ydx0lj] {
    cursor: not-allowed;
    opacity: 0.55;
}

.tv-match-card[b-1yv2ydx0lj] {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.16), rgba(34, 197, 94, 0.12));
    border: 1px solid rgba(250, 204, 21, 0.25);
    border-radius: 1rem;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 0.8rem;
}

.tv-king-card[b-1yv2ydx0lj] {
    align-items: center;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.28), rgba(180, 83, 9, 0.18));
    border: 1px solid rgba(250, 204, 21, 0.48);
    border-radius: 0.95rem;
    box-shadow: inset 0 0 1.25rem rgba(250, 204, 21, 0.12);
    display: flex;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.42rem 0.55rem;
}

.tv-kings-grid[b-1yv2ydx0lj] {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: 1fr;
    min-height: 0;
}

.tv-king-card.senior[b-1yv2ydx0lj],
.tv-king-card.champ[b-1yv2ydx0lj] {
    background: linear-gradient(135deg, rgba(226, 232, 240, 0.24), rgba(100, 116, 139, 0.16));
    border-color: rgba(226, 232, 240, 0.42);
}

.tv-king-card.champ[b-1yv2ydx0lj]  .player-avatar {
    border-color: #e5e7eb !important;
    box-shadow: 0 0 0 0.14rem rgba(226, 232, 240, 0.72), 0 0 1.05rem rgba(226, 232, 240, 0.72) !important;
}

.tv-king-card[b-1yv2ydx0lj]  .player-avatar {
    border-radius: 0.9rem;
    flex: 0 0 clamp(3.6rem, 6vw, 5.25rem);
    font-size: clamp(1.1rem, 2.1vw, 1.7rem);
    height: clamp(3.6rem, 6vw, 5.25rem);
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    width: clamp(3.6rem, 6vw, 5.25rem);
}

.tv-king-card div[b-1yv2ydx0lj] {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.tv-king-card small[b-1yv2ydx0lj] {
    color: #fde68a;
    font-size: clamp(0.66rem, 0.95vw, 0.82rem);
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tv-king-card.senior small[b-1yv2ydx0lj] {
    color: #e5e7eb;
}

.tv-king-card strong[b-1yv2ydx0lj] {
    color: #fef3c7;
    font-size: clamp(1.05rem, 1.65vw, 1.45rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.tv-king-card.senior strong[b-1yv2ydx0lj] {
    color: #f8fafc;
}

.tv-match-card small[b-1yv2ydx0lj] {
    grid-column: 1 / -1;
    text-transform: uppercase;
}

.tv-match-player[b-1yv2ydx0lj] {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    min-width: 0;
}

.tv-match-player.right[b-1yv2ydx0lj] {
    flex-direction: row-reverse;
    text-align: right;
}

.tv-match-player[b-1yv2ydx0lj]  .player-avatar {
    border-radius: 0.9rem;
    flex: 0 0 clamp(3.6rem, 6vw, 5.25rem);
    font-size: clamp(1.1rem, 2.1vw, 1.7rem);
    height: clamp(3.6rem, 6vw, 5.25rem);
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    width: clamp(3.6rem, 6vw, 5.25rem);
}

.tv-winner-button[b-1yv2ydx0lj] {
    background: transparent;
    border: 0;
    border-radius: 0.95rem;
    color: inherit;
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    padding: 0;
}

.tv-winner-button:hover[b-1yv2ydx0lj],
.tv-winner-button:focus-visible[b-1yv2ydx0lj] {
    outline: 3px solid rgba(34, 197, 94, 0.85);
    outline-offset: 0.18rem;
}

.tv-match-card strong[b-1yv2ydx0lj] {
    font-size: clamp(1.1rem, 1.95vw, 1.75rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.tv-match-card span[b-1yv2ydx0lj] {
    align-self: center;
    background: linear-gradient(135deg, #2563eb, #ef4444);
    border-radius: 999px;
    font-weight: 950;
    padding: 0.45rem 0.55rem;
}

.tv-empty-state[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1.1rem;
    color: rgba(248, 250, 252, 0.76);
    display: flex;
    font-size: clamp(1.15rem, 2vw, 1.75rem);
    font-weight: 900;
    justify-content: center;
    min-height: 7.5rem;
}

.tv-subline[b-1yv2ydx0lj] {
    font-weight: 850;
}

.tv-queue-list[b-1yv2ydx0lj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.tv-queue-player[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    display: flex;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
}

.tv-queue-player[b-1yv2ydx0lj]  .player-avatar {
    border-radius: 999px;
    flex: 0 0 clamp(1.7rem, 2.4vw, 2.25rem);
    font-size: clamp(0.65rem, 1vw, 0.85rem);
    height: clamp(1.7rem, 2.4vw, 2.25rem);
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    width: clamp(1.7rem, 2.4vw, 2.25rem);
}

.tv-queue-player span[b-1yv2ydx0lj] {
    color: #f8fafc;
    font-size: clamp(0.78rem, 1.1vw, 0.95rem);
    font-weight: 900;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-water-levels[b-1yv2ydx0lj] {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 1fr 1fr;
}

.tv-water-flow[b-1yv2ydx0lj] {
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.26), transparent 44%), linear-gradient(135deg, rgba(8, 47, 73, 0.64), rgba(6, 78, 59, 0.58));
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 1rem;
    display: grid;
    gap: 0.55rem;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
    padding: 0.6rem;
    position: relative;
}

.tv-water-main[b-1yv2ydx0lj] {
    align-items: center;
    display: grid;
    gap: 1.9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 0;
    position: relative;
}

.tv-water-lines[b-1yv2ydx0lj] {
    inset: 0;
    height: 100%;
    position: absolute;
    width: 100%;
}

.tv-water-lines path[b-1yv2ydx0lj] {
    fill: none;
    opacity: 0.94;
    stroke: rgba(148, 163, 184, 0.36);
    stroke-dasharray: 11 10;
    stroke-linecap: round;
    stroke-width: 8;
}

.tv-water-lines .source[b-1yv2ydx0lj] {
    d: path("M120 75 C165 75 195 75 238 75");
}

.tv-water-lines .tank[b-1yv2ydx0lj] {
    d: path("M282 75 C325 75 355 75 400 75");
}

.tv-water-lines path.active[b-1yv2ydx0lj] {
    animation: tv-water-dash-b-1yv2ydx0lj 1.15s linear infinite;
    stroke: #38bdf8;
}

.tv-water-lines .tank.active[b-1yv2ydx0lj] {
    stroke: #22c55e;
}

.tv-water-node[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 0.9rem;
    box-shadow: 0 0.8rem 1.8rem rgba(2, 6, 23, 0.24);
    color: #0f172a;
    display: grid;
    justify-items: center;
    min-height: clamp(5.2rem, 11vh, 6.5rem);
    padding: 0.42rem 0.55rem;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}

button.tv-water-node[b-1yv2ydx0lj] {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.tv-water-node > span[b-1yv2ydx0lj] {
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    line-height: 1;
}

.tv-water-node small[b-1yv2ydx0lj] {
    color: #64748b;
    font-size: clamp(0.56rem, 0.78vw, 0.7rem);
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tv-water-node strong[b-1yv2ydx0lj] {
    font-size: clamp(1.05rem, 1.9vw, 1.75rem);
    line-height: 1;
}

.tv-water-node em[b-1yv2ydx0lj] {
    color: #64748b;
    font-size: clamp(0.56rem, 0.82vw, 0.74rem);
    font-style: normal;
    font-weight: 800;
}

.tv-water-node.well[b-1yv2ydx0lj] {
    justify-self: center;
    left: auto;
    top: auto;
    width: 70%;
}

.tv-water-node.pump[b-1yv2ydx0lj] {
    background: linear-gradient(135deg, #0284c7, #14b8a6);
    color: #ecfeff;
    left: auto;
    top: auto;
}

.tv-water-node.pump small[b-1yv2ydx0lj],
.tv-water-node.pump em[b-1yv2ydx0lj] {
    color: rgba(236, 254, 255, 0.78);
}

.tv-water-node.pump.running[b-1yv2ydx0lj],
.tv-water-node.pump.mode-on[b-1yv2ydx0lj] {
    box-shadow: 0 0 2rem rgba(56, 189, 248, 0.48);
}

.tv-water-node.tank[b-1yv2ydx0lj] {
    justify-self: center;
    right: auto;
    top: auto;
    width: 70%;
}

.tv-pool-strip[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(2, 6, 23, 0.38);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 0.9rem;
    color: #f8fafc;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    padding: 0.45rem;
    position: relative;
    z-index: 2;
}

.tv-pool-strip > div[b-1yv2ydx0lj],
.tv-pool-pump[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    color: inherit;
    display: grid;
    gap: 0.15rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    text-align: left;
}

.tv-pool-strip span[b-1yv2ydx0lj],
.tv-pool-pump span[b-1yv2ydx0lj] {
    font-size: clamp(1rem, 1.6vw, 1.35rem);
}

.tv-pool-strip small[b-1yv2ydx0lj],
.tv-pool-pump small[b-1yv2ydx0lj] {
    color: rgba(248, 250, 252, 0.7);
    font-size: clamp(0.6rem, 0.8vw, 0.72rem);
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tv-pool-strip strong[b-1yv2ydx0lj],
.tv-pool-pump strong[b-1yv2ydx0lj] {
    font-size: clamp(0.78rem, 1.1vw, 0.95rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-pool-pump[b-1yv2ydx0lj] {
    cursor: pointer;
    font: inherit;
}

.tv-pool-pump.on[b-1yv2ydx0lj] {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(134, 239, 172, 0.36);
}

.tv-pool-pump.on small[b-1yv2ydx0lj] {
    color: #86efac;
}

.tv-pool-pump.off[b-1yv2ydx0lj] {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(252, 165, 165, 0.24);
}

.tv-pool-pump.off small[b-1yv2ydx0lj] {
    color: #fca5a5;
}

.tv-water-node.warning strong[b-1yv2ydx0lj] {
    color: #dc2626;
}

.tv-water-node.full strong[b-1yv2ydx0lj] {
    color: #16a34a;
}

.tv-mini-level[b-1yv2ydx0lj] {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 999px;
    height: clamp(2rem, 4vh, 2.8rem);
    overflow: hidden;
    position: absolute;
    right: 0.45rem;
    top: 0.55rem;
    width: 0.5rem;
}

.tv-mini-level i[b-1yv2ydx0lj] {
    background: linear-gradient(0deg, #0284c7, #38bdf8);
    bottom: 0;
    display: block;
    position: absolute;
    width: 100%;
}

.tv-mini-level.tank i[b-1yv2ydx0lj] {
    background: linear-gradient(0deg, #16a34a, #86efac);
}

.tv-pump-spin[b-1yv2ydx0lj] {
    animation: tv-pump-spin-b-1yv2ydx0lj 1.2s linear infinite;
}

@keyframes tv-water-dash-b-1yv2ydx0lj {
    to {
        stroke-dashoffset: -42;
    }
}

@keyframes tv-pump-spin-b-1yv2ydx0lj {
    to {
        transform: rotate(360deg);
    }
}

.tv-energy-flow[b-1yv2ydx0lj] {
    background: radial-gradient(circle at center, rgba(20, 184, 166, 0.24), transparent 42%), linear-gradient(135deg, rgba(248, 250, 252, 0.1), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 1rem;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.tv-energy-lines[b-1yv2ydx0lj] {
    inset: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.tv-energy-lines path[b-1yv2ydx0lj] {
    fill: none;
    opacity: 0.95;
    stroke: rgba(148, 163, 184, 0.35);
    stroke-linecap: round;
    stroke-width: 6;
}

.tv-energy-lines path.idle[b-1yv2ydx0lj],
.tv-energy-lines .battery.standby[b-1yv2ydx0lj] {
    stroke: rgba(148, 163, 184, 0.42);
}

.tv-energy-lines path.active[b-1yv2ydx0lj],
.tv-energy-lines .battery.charging[b-1yv2ydx0lj] {
    stroke: #22c55e;
}

.tv-energy-lines .battery.discharging[b-1yv2ydx0lj] {
    stroke: #ef4444;
}

.tv-energy-node[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 0.85rem;
    box-shadow: 0 0.8rem 1.8rem rgba(2, 6, 23, 0.22);
    color: #0f172a;
    display: grid;
    justify-items: center;
    padding: 0.42rem 0.55rem;
    position: absolute;
    text-align: center;
    width: 26%;
    z-index: 1;
}

.tv-energy-node span[b-1yv2ydx0lj] {
    font-size: clamp(1.05rem, 1.8vw, 1.55rem);
    line-height: 1;
}

.tv-energy-node small[b-1yv2ydx0lj] {
    color: #64748b;
    font-size: clamp(0.56rem, 0.78vw, 0.7rem);
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tv-energy-node strong[b-1yv2ydx0lj] {
    font-size: clamp(1.05rem, 1.85vw, 1.7rem);
    line-height: 1;
}

.tv-energy-node em[b-1yv2ydx0lj] {
    color: #64748b;
    font-size: clamp(0.58rem, 0.82vw, 0.74rem);
    font-style: normal;
    font-weight: 800;
}

.tv-energy-node.solar[b-1yv2ydx0lj] {
    left: 4%;
    top: 6%;
}

.tv-energy-node.generator[b-1yv2ydx0lj] {
    bottom: 6%;
    left: 4%;
}

.tv-energy-node.inverter[b-1yv2ydx0lj] {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ecfeff;
    left: 37%;
    top: 32%;
}

.tv-energy-node.inverter small[b-1yv2ydx0lj],
.tv-energy-node.inverter em[b-1yv2ydx0lj] {
    color: rgba(236, 254, 255, 0.78);
}

.tv-energy-node.load[b-1yv2ydx0lj] {
    right: 4%;
    top: 6%;
}

.tv-energy-node.battery[b-1yv2ydx0lj] {
    bottom: 6%;
    right: 4%;
}

.tv-energy-node.battery.charging strong[b-1yv2ydx0lj],
.tv-energy-node.battery.charging b[b-1yv2ydx0lj] {
    color: #16a34a;
}

.tv-energy-node.battery.discharging strong[b-1yv2ydx0lj],
.tv-energy-node.battery.discharging b[b-1yv2ydx0lj] {
    color: #dc2626;
}

.tv-water-levels > div[b-1yv2ydx0lj],
.tv-power-grid > div[b-1yv2ydx0lj] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.9rem;
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.48rem 0.55rem;
}

.tv-water-levels strong[b-1yv2ydx0lj],
.tv-power-grid strong[b-1yv2ydx0lj] {
    font-size: clamp(1.35rem, 2.35vw, 2.2rem);
    line-height: 1;
}

.tv-progress[b-1yv2ydx0lj] {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    height: 0.75rem;
    overflow: hidden;
}

.tv-progress i[b-1yv2ydx0lj] {
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    display: block;
    height: 100%;
}

.tv-progress.tank i[b-1yv2ydx0lj],
.tv-progress.music i[b-1yv2ydx0lj] {
    background: linear-gradient(90deg, #22c55e, #0ea5e9);
}

.tv-state-pill[b-1yv2ydx0lj] {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: clamp(0.95rem, 1.6vw, 1.25rem);
    font-weight: 950;
    gap: 0.45rem;
    justify-self: start;
    padding: 0.5rem 0.8rem;
}

.tv-pump-active[b-1yv2ydx0lj] {
    animation: tv-pump-pulse-b-1yv2ydx0lj 1s ease-in-out infinite;
    color: #86efac;
    filter: drop-shadow(0 0 0.45rem rgba(134, 239, 172, 0.9));
    font-size: 1.15em;
    line-height: 1;
}

.tv-water-footer[b-1yv2ydx0lj] {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    justify-content: space-between;
}

.tv-pump-counter[b-1yv2ydx0lj] {
    background: rgba(14, 165, 233, 0.14);
    border: 1px solid rgba(14, 165, 233, 0.22);
    border-radius: 0.85rem;
    display: grid;
    gap: 0.1rem;
    min-width: 6.8rem;
    padding: 0.5rem 0.65rem;
}

.tv-pump-counter span[b-1yv2ydx0lj],
.tv-pump-counter small[b-1yv2ydx0lj] {
    color: rgba(248, 250, 252, 0.72);
    font-size: 0.78rem;
    font-weight: 850;
}

.tv-pump-counter strong[b-1yv2ydx0lj] {
    font-size: clamp(1.15rem, 2vw, 1.9rem);
    line-height: 1;
}

.tv-state-pill.mode-on[b-1yv2ydx0lj],
.tv-state-pill.running[b-1yv2ydx0lj] {
    background: rgba(34, 197, 94, 0.22);
    color: #bbf7d0;
}

.tv-state-pill.mode-auto[b-1yv2ydx0lj] {
    background: rgba(14, 165, 233, 0.18);
    color: #bae6fd;
}

.tv-state-pill.mode-off[b-1yv2ydx0lj],
.tv-state-pill.idle[b-1yv2ydx0lj] {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
}

@keyframes tv-pump-pulse-b-1yv2ydx0lj {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.88);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

.tv-music-content[b-1yv2ydx0lj] {
    display: grid;
    align-items: stretch;
    gap: 0.65rem;
    grid-template-columns: minmax(5.4rem, 0.42fr) minmax(0, 1fr);
    min-height: 0;
}

.tv-album-art[b-1yv2ydx0lj] {
    align-items: center;
    align-self: stretch;
    background: linear-gradient(135deg, #14532d, #16a34a);
    border-radius: 1rem;
    display: flex;
    font-size: 2.4rem;
    justify-content: center;
    max-height: none;
    min-height: 0;
    overflow: hidden;
}

.tv-album-art img[b-1yv2ydx0lj] {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.tv-track-info[b-1yv2ydx0lj] {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.tv-music-controls[b-1yv2ydx0lj] {
    align-content: start;
    display: grid;
    gap: 0.42rem;
    min-height: 0;
    min-width: 0;
}

.tv-track-info strong[b-1yv2ydx0lj] {
    font-size: clamp(0.95rem, 1.45vw, 1.25rem);
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.tv-device-select[b-1yv2ydx0lj] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.9rem;
    display: grid;
    gap: 0.25rem;
    padding: 0.32rem 0.48rem;
}

.tv-device-select span[b-1yv2ydx0lj] {
    color: rgba(248, 250, 252, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tv-device-select select[b-1yv2ydx0lj] {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.75rem;
    color: #fff;
    font: inherit;
    font-weight: 850;
    min-width: 0;
    padding: 0.34rem 0.48rem;
    width: 100%;
}

.tv-music-actions[b-1yv2ydx0lj] {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: 1fr 1.2fr 1fr;
}

.tv-music-actions button[b-1yv2ydx0lj] {
    padding: 0.42rem 0.65rem;
}

.tv-music-actions button.primary[b-1yv2ydx0lj] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.tv-volume-control[b-1yv2ydx0lj] {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.34rem 0.5rem;
}

.tv-volume-control input[b-1yv2ydx0lj] {
    accent-color: #22c55e;
    width: 100%;
}

.tv-volume-control strong[b-1yv2ydx0lj] {
    font-weight: 950;
}

@media (max-width: 1200px) {
    .tv-mode-grid[b-1yv2ydx0lj] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .tv-game-panel:nth-of-type(1)[b-1yv2ydx0lj],
    .tv-game-panel:nth-of-type(2)[b-1yv2ydx0lj],
    .tv-water-panel[b-1yv2ydx0lj],
    .tv-power-panel[b-1yv2ydx0lj] {
        grid-column: auto;
        grid-row: auto;
    }

    .tv-music-panel[b-1yv2ydx0lj],
    .tv-kings-panel[b-1yv2ydx0lj] {
        display: none;
    }

}

/* Modern responsive Smart-Home TV overrides */
.tv-mode-page[b-1yv2ydx0lj] {
    background:
        radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.24), transparent 28rem),
        radial-gradient(circle at 96% 8%, rgba(16, 185, 129, 0.24), transparent 30rem),
        linear-gradient(135deg, #020617 0%, #082f49 48%, #042f2e 100%);
    color: #f8fafc;
}

.tv-mode-header[b-1yv2ydx0lj] {
    background: rgba(2, 6, 23, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.35rem;
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.22);
    gap: 0.75rem;
    min-height: 5.5rem;
    padding: 0.75rem 0.9rem;
}

.tv-mode-header h1[b-1yv2ydx0lj] {
    letter-spacing: -0.065em;
}

.tv-page-switch[b-1yv2ydx0lj] {
    backdrop-filter: blur(1rem);
    flex-wrap: wrap;
    justify-content: center;
}

.tv-page-switch a[b-1yv2ydx0lj],
.tv-page-switch button[b-1yv2ydx0lj],
.tv-mode-header-actions button[b-1yv2ydx0lj],
.tv-dashboard-link[b-1yv2ydx0lj],
.tv-panel-title a[b-1yv2ydx0lj],
.tv-music-actions button[b-1yv2ydx0lj],
.tv-panel-actions button[b-1yv2ydx0lj],
.tv-panel-actions a[b-1yv2ydx0lj],
.tv-championship-actions button[b-1yv2ydx0lj] {
    min-height: 2.75rem;
    touch-action: manipulation;
}

.tv-panel[b-1yv2ydx0lj] {
    backdrop-filter: blur(1.25rem);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(8, 47, 73, 0.62));
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 1.45rem;
}

.tv-panel-title span[b-1yv2ydx0lj] {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
}

.tv-panel-title .smart-icon[b-1yv2ydx0lj],
.tv-water-node .smart-icon[b-1yv2ydx0lj],
.tv-pool-strip .smart-icon[b-1yv2ydx0lj],
.tv-pool-pump .smart-icon[b-1yv2ydx0lj],
.tv-energy-node .smart-icon[b-1yv2ydx0lj],
.tv-album-art .smart-icon[b-1yv2ydx0lj],
.tv-volume-control .smart-icon[b-1yv2ydx0lj] {
    height: 1.25em;
    width: 1.25em;
}

.tv-water-node[b-1yv2ydx0lj],
.tv-energy-node[b-1yv2ydx0lj],
.tv-king-card[b-1yv2ydx0lj],
.tv-match-card[b-1yv2ydx0lj],
.tv-pool-strip > div[b-1yv2ydx0lj],
.tv-pool-pump[b-1yv2ydx0lj] {
    box-shadow: 0 0.9rem 2rem rgba(2, 6, 23, 0.2);
}

.tv-panel-actions[b-1yv2ydx0lj] {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tv-panel-actions select[b-1yv2ydx0lj] {
    min-height: 2.75rem;
}

.tv-match-card[b-1yv2ydx0lj] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(16, 185, 129, 0.14));
    border-color: rgba(125, 211, 252, 0.22);
}

.tv-empty-state[b-1yv2ydx0lj] {
    border: 1px dashed rgba(148, 163, 184, 0.32);
}

@media (min-width: 1201px) {
    .tv-mode-grid[b-1yv2ydx0lj] {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.08fr) minmax(18rem, 0.84fr);
    }
}

@media (max-width: 900px) {
    .tv-mode-page[b-1yv2ydx0lj] {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: auto;
        padding: 0.75rem;
        position: relative;
    }

    .tv-mode-header[b-1yv2ydx0lj] {
        align-items: stretch;
        display: grid;
        height: auto;
        position: sticky;
        top: 0.5rem;
        z-index: 5;
    }

    .tv-mode-header-actions[b-1yv2ydx0lj] {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .tv-mode-header-actions strong[b-1yv2ydx0lj] {
        font-size: clamp(1.55rem, 9vw, 2.5rem);
    }

    .tv-mode-grid[b-1yv2ydx0lj] {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        height: auto;
        margin-top: 0.85rem;
        overflow: visible;
    }

    .tv-game-panel:nth-of-type(1)[b-1yv2ydx0lj],
    .tv-game-panel:nth-of-type(2)[b-1yv2ydx0lj],
    .tv-water-panel[b-1yv2ydx0lj],
    .tv-power-panel[b-1yv2ydx0lj],
    .tv-kings-panel[b-1yv2ydx0lj],
    .tv-music-panel[b-1yv2ydx0lj],
    .tv-championship-panel[b-1yv2ydx0lj] {
        display: grid;
        grid-column: auto;
        grid-row: auto;
        min-height: auto;
    }

    .tv-music-panel[b-1yv2ydx0lj],
    .tv-kings-panel[b-1yv2ydx0lj] {
        display: grid;
    }

    .tv-panel[b-1yv2ydx0lj] {
        overflow: visible;
        padding: 0.85rem;
    }

    .tv-panel-title[b-1yv2ydx0lj] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .tv-panel-actions[b-1yv2ydx0lj] {
        justify-content: stretch;
        width: 100%;
    }

    .tv-panel-actions select[b-1yv2ydx0lj],
    .tv-panel-actions button[b-1yv2ydx0lj],
    .tv-panel-actions a[b-1yv2ydx0lj] {
        flex: 1 1 11rem;
    }

    .tv-match-card[b-1yv2ydx0lj] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tv-match-player[b-1yv2ydx0lj],
    .tv-match-player.right[b-1yv2ydx0lj] {
        flex-direction: column;
        text-align: center;
    }

    .tv-water-main[b-1yv2ydx0lj] {
        gap: 0.75rem;
        grid-template-columns: 1fr;
    }

    .tv-water-lines[b-1yv2ydx0lj],
    .tv-energy-lines[b-1yv2ydx0lj] {
        display: none;
    }

    .tv-water-node[b-1yv2ydx0lj],
    .tv-pool-strip[b-1yv2ydx0lj],
    .tv-energy-node[b-1yv2ydx0lj] {
        position: relative;
    }

    .tv-energy-flow[b-1yv2ydx0lj] {
        display: grid;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .tv-energy-node[b-1yv2ydx0lj] {
        inset: auto !important;
        width: 100%;
    }

    .tv-pool-strip[b-1yv2ydx0lj],
    .tv-music-content[b-1yv2ydx0lj] {
        grid-template-columns: 1fr;
    }

    .tv-album-art[b-1yv2ydx0lj] {
        min-height: 12rem;
    }
}

@media (max-width: 520px) {
    .tv-mode-page[b-1yv2ydx0lj] {
        padding: 0.5rem;
    }

    .tv-page-switch[b-1yv2ydx0lj],
    .tv-mode-header-actions[b-1yv2ydx0lj],
    .tv-panel-actions[b-1yv2ydx0lj],
    .tv-championship-actions[b-1yv2ydx0lj],
    .tv-music-actions[b-1yv2ydx0lj] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tv-page-switch a[b-1yv2ydx0lj],
    .tv-page-switch button[b-1yv2ydx0lj],
    .tv-mode-header-actions button[b-1yv2ydx0lj],
    .tv-dashboard-link[b-1yv2ydx0lj] {
        text-align: center;
    }

    .tv-mode-header-actions strong[b-1yv2ydx0lj],
    .tv-mode-header-actions small[b-1yv2ydx0lj] {
        grid-column: 1 / -1;
        text-align: center;
    }

    .tv-panel-actions select[b-1yv2ydx0lj] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Wasser.razor.rz.scp.css */
.water-header[b-367g40ivw9] {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.water-status-pill[b-367g40ivw9] {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 850;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.water-status-pill.auto[b-367g40ivw9] {
    background: rgba(14, 165, 233, 0.12);
    color: #075985;
}

.water-status-pill.running[b-367g40ivw9] {
    background: rgba(34, 197, 94, 0.14);
    color: #166534;
}

.water-status-pill.idle[b-367g40ivw9] {
    background: rgba(100, 116, 139, 0.14);
    color: #334155;
}

.water-status-pill.standby[b-367g40ivw9] {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.water-metric-grid[b-367g40ivw9],
.water-settings-grid[b-367g40ivw9] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-bottom: 1.25rem;
}

.water-metric p[b-367g40ivw9] {
    color: #587062;
    margin: 0;
}

.water-pump-count-card[b-367g40ivw9] {
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.95), rgba(239, 246, 255, 0.78));
    border-color: rgba(14, 165, 233, 0.22);
}

.water-pump-counter-card[b-367g40ivw9] {
    border: 1px solid rgba(14, 165, 233, 0.14);
    box-shadow: 0 1rem 2.2rem rgba(15, 23, 42, 0.08);
    margin-bottom: 1.25rem;
}

.water-pump-counter-grid[b-367g40ivw9] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-top: 1rem;
}

.water-pump-counter-grid div[b-367g40ivw9] {
    background: rgba(240, 249, 255, 0.72);
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 1.2rem;
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem;
}

.water-pump-counter-grid span[b-367g40ivw9],
.water-pump-counter-grid small[b-367g40ivw9] {
    color: #587062;
}

.water-pump-counter-grid strong[b-367g40ivw9] {
    color: #0f172a;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1;
}

.water-progress[b-367g40ivw9] {
    background: rgba(14, 165, 233, 0.12);
    border-radius: 999px;
    height: 0.7rem;
    overflow: hidden;
}

.water-progress i[b-367g40ivw9] {
    background: linear-gradient(90deg, #0ea5e9, #2563eb);
    display: block;
    height: 100%;
}

.water-progress.tank i[b-367g40ivw9] {
    background: linear-gradient(90deg, #22c55e, #0ea5e9);
}

.water-dashboard[b-367g40ivw9] {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.8fr);
    margin-bottom: 1.25rem;
}

.water-system-card[b-367g40ivw9] {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.6rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.82));
    box-shadow: 0 1.4rem 3.5rem rgba(13, 36, 24, 0.09);
    padding: 1.25rem;
}

.water-diagram[b-367g40ivw9] {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    margin-top: 1rem;
}

.water-node[b-367g40ivw9] {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 0.35rem;
    min-height: 9rem;
    padding: 1rem;
}

.water-node-icon[b-367g40ivw9] {
    font-size: 2.4rem;
}

.water-node small[b-367g40ivw9],
.water-flow span[b-367g40ivw9],
.water-safety-list span[b-367g40ivw9] {
    color: #587062;
}

.well-node[b-367g40ivw9] {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.pump-node[b-367g40ivw9] {
    grid-column: 3;
    grid-row: 1;
}

.tank-node[b-367g40ivw9] {
    grid-column: 5;
    grid-row: 1 / span 3;
}

.water-esp32-node[b-367g40ivw9] {
    grid-column: 3;
    grid-row: 3;
}

.pump-node.running[b-367g40ivw9],
.water-esp32-node.online[b-367g40ivw9] {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(240, 253, 244, 0.9);
}

.pump-node.standby[b-367g40ivw9],
.water-esp32-node.offline[b-367g40ivw9] {
    border-color: rgba(245, 158, 11, 0.34);
    background: rgba(255, 251, 235, 0.92);
}

.water-flow[b-367g40ivw9] {
    align-items: center;
    display: flex;
    font-size: 0.75rem;
    font-weight: 850;
    justify-content: center;
    letter-spacing: 0.08em;
    position: relative;
    text-transform: uppercase;
}

.water-flow[b-367g40ivw9]::before {
    background: linear-gradient(90deg, #94a3b8, #64748b);
    border-radius: 999px;
    content: "";
    height: 0.35rem;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.water-flow.running[b-367g40ivw9]::before {
    background: linear-gradient(90deg, #0ea5e9, #2563eb);
    box-shadow: 0 0 1rem rgba(14, 165, 233, 0.35);
}

.water-flow span[b-367g40ivw9] {
    background: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    position: relative;
}

.pump-flow[b-367g40ivw9] {
    grid-column: 2;
    grid-row: 1;
}

.tank-flow[b-367g40ivw9] {
    grid-column: 4;
    grid-row: 1;
}

.sensor-flow[b-367g40ivw9] {
    grid-column: 3;
    grid-row: 2;
    min-height: 2.25rem;
}

.sensor-flow[b-367g40ivw9]::before {
    height: 100%;
    left: 50%;
    right: auto;
    top: 0;
    transform: translateX(-50%);
    width: 0.35rem;
}

.water-vessel[b-367g40ivw9] {
    align-items: end;
    border: 2px solid rgba(15, 23, 42, 0.16);
    border-radius: 0 0 1rem 1rem;
    display: flex;
    height: 8rem;
    margin-top: 0.5rem;
    overflow: hidden;
    position: relative;
}

.water-vessel[b-367g40ivw9]::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent);
    content: "";
    inset: 0;
    position: absolute;
}

.water-vessel i[b-367g40ivw9] {
    background: linear-gradient(180deg, #38bdf8, #2563eb);
    display: block;
    width: 100%;
}

.tank-vessel[b-367g40ivw9] {
    border-radius: 1rem;
}

.water-control-card[b-367g40ivw9] {
    align-self: start;
}

.water-safety-list[b-367g40ivw9] {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.water-safety-list div[b-367g40ivw9] {
    align-items: center;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
}

.water-safety-list .safety-ok[b-367g40ivw9] {
    background: rgba(240, 253, 244, 0.9);
    border-color: rgba(34, 197, 94, 0.22);
}

.water-safety-list .safety-blocked[b-367g40ivw9] {
    background: rgba(255, 251, 235, 0.95);
    border-color: rgba(245, 158, 11, 0.26);
}

@media (max-width: 960px) {
    .water-dashboard[b-367g40ivw9],
    .water-diagram[b-367g40ivw9] {
        grid-template-columns: 1fr;
    }

    .well-node[b-367g40ivw9],
    .pump-node[b-367g40ivw9],
    .tank-node[b-367g40ivw9],
    .water-esp32-node[b-367g40ivw9],
    .pump-flow[b-367g40ivw9],
    .tank-flow[b-367g40ivw9],
    .sensor-flow[b-367g40ivw9] {
        grid-column: 1;
        grid-row: auto;
    }

    .water-flow[b-367g40ivw9] {
        min-height: 2rem;
    }

    .sensor-flow[b-367g40ivw9]::before,
    .water-flow[b-367g40ivw9]::before {
        height: 0.35rem;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
    }
}

@media (max-width: 560px) {
    .water-header[b-367g40ivw9] {
        align-items: flex-start;
        flex-direction: column;
    }

    .water-safety-list div[b-367g40ivw9] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }
}

.ewelink-card[b-367g40ivw9] {
    border: 1px solid rgba(14, 165, 233, 0.14);
    box-shadow: 0 1rem 2.2rem rgba(15, 23, 42, 0.08);
    margin-bottom: 1.25rem;
}

.ewelink-device-grid[b-367g40ivw9] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-top: 1rem;
}

.ewelink-device-card[b-367g40ivw9] {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.78));
    border: 1px solid rgba(100, 116, 139, 0.18);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
}

.ewelink-device-card.on[b-367g40ivw9] {
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(220, 252, 231, 0.7));
    border-color: rgba(34, 197, 94, 0.32);
}

.ewelink-device-card.offline[b-367g40ivw9] {
    opacity: 0.62;
}

.ewelink-device-head[b-367g40ivw9] {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.ewelink-device-head strong[b-367g40ivw9] {
    font-weight: 850;
}

.ewelink-status-dot[b-367g40ivw9] {
    border-radius: 999px;
    height: 0.7rem;
    width: 0.7rem;
}

.ewelink-status-dot.online[b-367g40ivw9] {
    background: #22c55e;
    box-shadow: 0 0 0 0.25rem rgba(34, 197, 94, 0.18);
}

.ewelink-status-dot.offline[b-367g40ivw9] {
    background: #94a3b8;
}

.ewelink-device-card small[b-367g40ivw9] {
    color: #587062;
}

.ewelink-power[b-367g40ivw9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    font-weight: 750;
    color: #0f5132;
}

.ewelink-toggle[b-367g40ivw9] {
    margin-top: auto;
    width: 100%;
}

.power-plot-wrap[b-367g40ivw9] {
    align-items: stretch;
    display: flex;
    gap: 0.6rem;
}

.plot-y-axis[b-367g40ivw9] {
    color: #64748b;
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    font-weight: 600;
    justify-content: space-between;
    min-width: 2.4rem;
    padding: 0.15rem 0;
    text-align: right;
}

.plot-canvas[b-367g40ivw9] {
    flex: 1;
    min-height: 12rem;
    position: relative;
}

.plot-canvas .water-history-plot[b-367g40ivw9] {
    height: 100%;
    width: 100%;
}

.plot-empty-state[b-367g40ivw9] {
    align-items: center;
    background: rgba(148, 163, 184, 0.08);
    border: 1px dashed rgba(100, 116, 139, 0.35);
    border-radius: 0.9rem;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    justify-content: center;
    min-height: 12rem;
    padding: 1.5rem;
    text-align: center;
}

.plot-empty-state strong[b-367g40ivw9] {
    color: #1e293b;
    font-size: 1rem;
}

.plot-empty-state span[b-367g40ivw9] {
    font-size: 0.85rem;
    max-width: 26rem;
}

.plot-error-state[b-367g40ivw9] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    color: #b91c1c;
}

.plot-error-state strong[b-367g40ivw9] {
    color: #991b1b;
}

.water-plot-card[b-367g40ivw9] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 1.6rem;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 34rem),
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.14), transparent 30rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86));
    box-shadow: 0 1.4rem 3.2rem rgba(15, 23, 42, 0.09);
    margin-bottom: 1.25rem;
    padding: 1.25rem;
}

.water-plot-card .section-title-row[b-367g40ivw9] {
    align-items: flex-start;
    gap: 1rem;
}

.plot-controls[b-367g40ivw9] {
    align-items: end;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.plot-window-nav[b-367g40ivw9],
.plot-range-picker[b-367g40ivw9] {
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
}

.plot-window-nav button[b-367g40ivw9],
.plot-range-picker button[b-367g40ivw9] {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-weight: 800;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.plot-window-nav button:hover:not(:disabled)[b-367g40ivw9],
.plot-range-picker button:hover:not(:disabled)[b-367g40ivw9] {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    transform: translateY(-1px);
}

.plot-window-nav button:disabled[b-367g40ivw9] {
    color: #cbd5e1;
    cursor: not-allowed;
}

.plot-range-picker button.selected[b-367g40ivw9] {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    box-shadow: 0 0.6rem 1.2rem rgba(37, 99, 235, 0.22);
    color: #fff;
}

.plot-summary-grid[b-367g40ivw9] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin: 1rem 0;
}

.water-summary-grid div[b-367g40ivw9] {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.2rem;
    display: grid;
    gap: 0.2rem;
    min-height: 5.8rem;
    padding: 0.95rem 1rem;
    position: relative;
    overflow: hidden;
}

.water-summary-grid div[b-367g40ivw9]::before {
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0.9;
    position: absolute;
    z-index: 0;
}

.water-summary-grid div > *[b-367g40ivw9] {
    position: relative;
    z-index: 1;
}

.water-summary-grid div:nth-child(1)[b-367g40ivw9]::before {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(186, 230, 253, 0.5));
}

.water-summary-grid div:nth-child(2)[b-367g40ivw9]::before {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(220, 252, 231, 0.65));
}

.water-summary-grid div:nth-child(3)[b-367g40ivw9]::before {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.14), rgba(243, 232, 255, 0.65));
}

.water-summary-grid span[b-367g40ivw9] {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.water-summary-grid strong[b-367g40ivw9] {
    color: #0f172a;
    font-size: clamp(1.35rem, 2.8vw, 2.25rem);
    line-height: 1;
}

.water-summary-grid small[b-367g40ivw9] {
    color: #64748b;
}

.power-plot-wrap[b-367g40ivw9] {
    background:
        linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        rgba(15, 23, 42, 0.035);
    background-size: 100% 25%, 10% 100%, auto;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.3rem;
    padding: 1rem;
}

.plot-canvas[b-367g40ivw9] {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 1rem;
    overflow: hidden;
}

.modern-history-plot[b-367g40ivw9] {
    filter: drop-shadow(0 0.4rem 0.6rem rgba(15, 23, 42, 0.08));
}

.plot-grid-line[b-367g40ivw9] {
    stroke: rgba(100, 116, 139, 0.28);
    stroke-dasharray: 1.5 2.5;
    stroke-width: 0.35;
}

.plot-area[b-367g40ivw9] {
    opacity: 1;
}

.well-area[b-367g40ivw9] {
    fill: url(#wellFill);
}

.tank-area[b-367g40ivw9] {
    fill: url(#tankFill);
}

.plot-line[b-367g40ivw9] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.35;
}

.plot-line.well-level[b-367g40ivw9] {
    stroke: #0ea5e9;
    filter: drop-shadow(0 0 0.45rem rgba(14, 165, 233, 0.35));
}

.plot-line.tank-level[b-367g40ivw9] {
    stroke: #22c55e;
    filter: drop-shadow(0 0 0.45rem rgba(34, 197, 94, 0.35));
}

.plot-legend[b-367g40ivw9] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    justify-content: center;
    margin-top: 1rem;
}

.plot-legend span[b-367g40ivw9] {
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
}

.legend-dot[b-367g40ivw9] {
    border-radius: 999px;
    display: inline-block;
    height: 0.7rem;
    width: 0.7rem;
}

.legend-dot.well-level[b-367g40ivw9] {
    background: #0ea5e9;
    box-shadow: 0 0 0 0.22rem rgba(14, 165, 233, 0.16);
}

.legend-dot.tank-level[b-367g40ivw9] {
    background: #22c55e;
    box-shadow: 0 0 0 0.22rem rgba(34, 197, 94, 0.16);
}

.plot-labels[b-367g40ivw9] {
    color: #64748b;
    display: flex;
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: space-between;
    margin: 0.75rem 3rem 0 3.4rem;
}

@media (max-width: 760px) {
    .water-plot-card .section-title-row[b-367g40ivw9],
    .plot-controls[b-367g40ivw9] {
        align-items: stretch;
        flex-direction: column;
    }

    .plot-window-nav[b-367g40ivw9],
    .plot-range-picker[b-367g40ivw9] {
        border-radius: 1rem;
        flex-wrap: wrap;
    }

    .plot-labels[b-367g40ivw9] {
        margin-left: 0;
        margin-right: 0;
    }
}

/* /Components/Visuals/BatteryVisual.razor.rz.scp.css */
.battery-visual[b-ps1ts7zvjk] {
    position: relative;
    width: var(--battery-size, 64px);
    height: var(--battery-size, 64px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.battery-visual-svg[b-ps1ts7zvjk] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.battery-visual-fill[b-ps1ts7zvjk] {
    transition: y 0.8s ease, height 0.8s ease;
}

.battery-visual.is-charging .battery-visual-fill[b-ps1ts7zvjk] {
    filter: drop-shadow(0 0 8px rgba(57, 211, 83, 0.75));
}

.battery-visual.is-discharging .battery-visual-fill[b-ps1ts7zvjk] {
    filter: drop-shadow(0 0 8px rgba(255, 90, 90, 0.7));
}

.battery-visual.is-charging .battery-visual-bolt[b-ps1ts7zvjk] {
    animation: battery-pulse-b-ps1ts7zvjk 1.4s ease-in-out infinite;
}

.battery-visual-value[b-ps1ts7zvjk] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #cfe9ff;
    text-shadow: 0 0 6px rgba(120, 200, 255, 0.5);
}

@keyframes battery-pulse-b-ps1ts7zvjk {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
/* /Components/Visuals/PoolVisual.razor.rz.scp.css */
.pool-visual[b-b6fo6iw24k] {
    position: relative;
    width: var(--pool-size, 64px);
    height: var(--pool-size, 64px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pool-visual-svg[b-b6fo6iw24k] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pool-visual-water[b-b6fo6iw24k] {
    filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.55));
    transition: filter 0.4s ease;
}

.pool-visual-ripple[b-b6fo6iw24k] {
    opacity: 0.85;
    animation: pool-ripple-b-b6fo6iw24k 3.2s ease-in-out infinite;
    transform-origin: center;
}

.pool-visual.is-active .pool-visual-water[b-b6fo6iw24k] {
    filter: drop-shadow(0 0 10px rgba(0, 200, 255, 0.85));
}

.pool-visual-value[b-b6fo6iw24k] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #9fe6ff;
    text-shadow: 0 0 6px rgba(0, 200, 255, 0.6);
}

@keyframes pool-ripple-b-b6fo6iw24k {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50% { transform: translateY(0.6px); opacity: 0.55; }
}
/* /Components/Visuals/PumpVisual.razor.rz.scp.css */
.pump-visual[b-rrmk6nggqs] {
    position: relative;
    width: var(--pump-size, 64px);
    height: var(--pump-size, 64px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pump-visual-svg[b-rrmk6nggqs] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pump-visual-body[b-rrmk6nggqs] {
    transition: filter 0.4s ease;
}

.pump-visual.is-on .pump-visual-body[b-rrmk6nggqs] {
    filter: drop-shadow(0 0 9px rgba(57, 211, 83, 0.8));
}

.pump-visual.is-off .pump-visual-svg[b-rrmk6nggqs] {
    filter: grayscale(0.85) brightness(0.72);
}

.pump-visual-rotor[b-rrmk6nggqs] {
    transform-origin: 27px 39px;
}

.pump-visual.is-on .pump-visual-rotor[b-rrmk6nggqs] {
    animation: pump-spin-b-rrmk6nggqs 1.15s linear infinite;
}

.pump-visual-value[b-rrmk6nggqs] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #7dffa8;
    text-shadow: 0 0 6px rgba(57, 211, 83, 0.6);
}

@keyframes pump-spin-b-rrmk6nggqs {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Visuals/SolarVisual.razor.rz.scp.css */
.solar-visual[b-vuvk216yp9] {
    position: relative;
    width: var(--solar-size, 64px);
    height: var(--solar-size, 64px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.solar-visual-svg[b-vuvk216yp9] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.solar-visual-sun[b-vuvk216yp9] {
    transform-origin: 44px 18px;
    transition: filter 0.4s ease;
    filter: grayscale(0.5) brightness(0.8);
}

.solar-visual.is-producing .solar-visual-sun[b-vuvk216yp9] {
    filter: drop-shadow(0 0 10px rgba(255, 200, 61, 0.85));
    animation: solar-glow-b-vuvk216yp9 2.6s ease-in-out infinite;
}

.solar-visual-value[b-vuvk216yp9] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #ffd66b;
    text-shadow: 0 0 6px rgba(255, 200, 61, 0.6);
}

@keyframes solar-glow-b-vuvk216yp9 {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 200, 61, 0.6)); }
    50% { filter: drop-shadow(0 0 14px rgba(255, 200, 61, 0.95)); }
}
/* /Components/Visuals/WaterTankVisual.razor.rz.scp.css */
.tank-visual[b-afp555r8wc] {
    position: relative;
    width: var(--tank-size, 64px);
    height: var(--tank-size, 64px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tank-visual-svg[b-afp555r8wc] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tank-visual-fill[b-afp555r8wc] {
    filter: drop-shadow(0 0 5px rgba(0, 200, 255, 0.5));
    transition: y 0.8s ease, height 0.8s ease;
}

.tank-visual-surface[b-afp555r8wc] {
    transition: cy 0.8s ease;
    animation: tank-shimmer-b-afp555r8wc 3s ease-in-out infinite;
}

.tank-visual.is-well .tank-visual-fill[b-afp555r8wc] {
    filter: drop-shadow(0 0 6px rgba(94, 240, 143, 0.5));
}

.tank-visual-value[b-afp555r8wc] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #9fe6ff;
    text-shadow: 0 0 6px rgba(0, 200, 255, 0.6);
}

@keyframes tank-shimmer-b-afp555r8wc {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.25; }
}