.control-button.control-on {
    background: #178447;
    box-shadow: 0 0 0 2px rgba(23, 132, 71, .16);
}

.control-button.control-off {
    background: #e77c22;
    box-shadow: 0 0 0 2px rgba(231, 124, 34, .18);
}

.relay-state {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
}

.relay-state.state-on {
    background: #25a55f;
    box-shadow: 0 0 0 2px rgba(37, 165, 95, .22);
}

.relay-state.state-off {
    background: #d94b3d;
    box-shadow: 0 0 0 2px rgba(217, 75, 61, .22);
}

.relay-state.state-unknown {
    background: #9ba6a0;
    box-shadow: 0 0 0 2px rgba(155, 166, 160, .22);
}

.advisor-card { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-left: 4px solid #d89d27; border-radius: 13px; background: #fffaf0; }
.advisor-card.advisor-run { border-left-color: #25a55f; background: #f1faf4; }
.advisor-heading { display: flex; justify-content: space-between; gap: 16px; }
.advisor-heading span { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.advisor-heading h3 { margin: 5px 0 0; font: 600 20px Georgia, serif; }
.advisor-heading > small, .advisor-card > small, .advisor-card > p { color: var(--muted); }
.advisor-card > p { margin: 12px 0; }
.advisor-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 12px 0; }
.advisor-metrics > div { display: flex; flex-direction: column; padding: 11px; border-radius: 9px; background: rgba(255,255,255,.72); }
.advisor-metrics small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.advisor-metrics strong { margin-top: 4px; font-size: 15px; }
@media(max-width:600px) { .advisor-metrics { grid-template-columns: repeat(2,1fr); } .advisor-heading { flex-direction: column; } }