a.btn { font: inherit; color: var(--text); background: #101b30; border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; text-decoration: none; }
a.btn:hover { border-color: var(--accent); }
#s-next { color: var(--dim); margin-left: 4px; font-size: 12px; }
.player-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.player-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.player-row .dot.on { background: var(--accent); }
.port-table td.num, .port-table th.num { text-align: right; }
.trade-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.trade-row input { width: 72px; }
#news, #inbox-list { list-style: none; margin: 0; padding: 0; font-size: 12px; max-height: 200px; overflow-y: auto; }
#news li, #inbox-list li { margin: 3px 0; color: var(--dim); }
#inbox-list li b { color: var(--text); font-weight: normal; }
.pill { font-size: 12px; color: var(--warn); }
#banner-offline { color: var(--bad); }
@media (max-width: 760px) { a.btn { flex: 1 1 auto; min-height: 40px; text-align: center; line-height: 30px; } }
#device-qr { background: #fff; padding: 8px; border-radius: 6px; width: 232px; max-width: 100%; margin: 8px auto; line-height: 0; }
#device-qr svg { width: 100%; height: auto; display: block; }
#device-link { width: 100%; font-size: 13px; margin: 6px 0; }
dialog details { border-top: 1px solid var(--line); padding: 8px 0; margin: 8px 0 0; }