.tra-widget-status {
    font-family: Arial, sans-serif;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em 1.5em;
    min-width: 220px;
    box-shadow: 0 2px 8px #0001;
}
.tra-widget-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0.7em;
}
.tra-widget-row {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin-bottom: 0.2em;
    font-family: "Arial Rounded MT Bold", Arial, "Liberation Sans", sans-serif;
    font-size: 1.08em;
    letter-spacing: 0.01em;
}
.tra-widget-row.inactive {
    font-style: italic;
}
.tra-widget-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #bbb;
}
.tra-widget-dot.green { background: #4caf50; }
.tra-widget-dot.red   { background: #e53935; }
.tra-widget-dot.gray  { background: #bbb; }
.tra-widget-label {
    flex: 1;
    font-size: 1em;
    font-family: inherit;
    font-weight: bold;
    transition: color 0.1s;
}
.tra-widget-blink {
    animation: tra-blink 1s steps(2, start) infinite;
}
@keyframes tra-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}
.tra-widget-blink-text {
    color: #e53935 !important;
}
.tra-widget-blink-text-off {
    color: #222 !important;
}
.tra-widget-dot-blink-red {
    background: #e53935 !important;
    border-color: #e53935 !important;
}

body.dark-mode .tra-widget-status,
body.dark-mode .tra-widget-row,
body.dark-mode {
    background: #23272e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .tra-widget-row {
    background: #23272e;
    color: #f0f0f0 !important;
}

body.dark-mode .tra-widget-row:nth-child(even) {
    background: #262b33;
}

body.dark-mode .tra-widget-row.inactive {
    color: #b0b0b0 !important;
    background: #23272e;
    opacity: 0.85;
}

body.dark-mode .tra-widget-dot.green { background: #3fae5a; }
body.dark-mode .tra-widget-dot.red   { background: #e57373; }
body.dark-mode .tra-widget-dot.gray  { background: #888; }

body.dark-mode .tra-widget-status {
    border-color: #444;
    box-shadow: 0 2px 8px #0008;
}

body.dark-mode .tra-widget-label {
    color: #f0f0f0 !important;
}

#signalBlinkExample {
    display: none;
    margin-top: 8px;
    font-size: 1.05em;
    font-family: "Arial Rounded MT Bold", Arial, "Liberation Sans", sans-serif;
    font-weight: bold;
    letter-spacing: 0.01em;
}
#signalBlinkExample .tra-widget-dot.green.demo-blink {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #bbb;
    background: #4caf50;
    margin-right: 7px;
    box-shadow: 0 0 6px #2ecc40;
    animation: tra-blink 1s steps(2, start) infinite;
}
#signalBlinkExample .demo-blink-text {
    font-weight: bold;
    animation: demo-blink-text 1s steps(2, start) infinite;
    color: #e53935;
    transition: color 0.1s;
}
@keyframes demo-blink-text {
    0%, 100% { color: #e53935; }
    50% { color: #222; }
}