.hub-journey { margin: 14px 0 18px; padding: 16px; border: 1px solid var(--border, #30343b); border-radius: 16px; background: var(--bg-card, #171a1e); }
.hub-journey h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; color: var(--text, #f2f4f7); }
.hub-journey p, .connection-state p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--text-sub, #b0b6c0); }
.journey-action { min-height: 46px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--accent, #e9a23b); color: #16130c; font: 700 14px/1.3 var(--font-body, sans-serif); cursor: pointer; }
.journey-action:hover { filter: brightness(1.08); }
.journey-action:focus-visible, .context-help:focus-visible { outline: 2px solid var(--text, #f2f4f7); outline-offset: 3px; }
.context-help { min-height: 42px; padding: 10px 14px; background: transparent; color: var(--text, #f2f4f7); border: 1px solid var(--border, #42464e); border-radius: 12px; font: 600 13px/1.3 var(--font-body, sans-serif); cursor: pointer; }
.section-help-row { display: flex; justify-content: flex-end; gap: 8px; margin: 10px 0; }
.connection-state { padding: 22px 16px; margin: 14px 0; background: var(--bg-card, #171a1e); border-radius: 16px; }
.connection-state h2 { margin: 0 0 10px; font-size: 20px; }
.connection-state[hidden] { display: none; }
.card-item .card-rank-lbl { font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; }
.card-item .card-stat { font-size: 12px !important; }
.card-item .card-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
#ctab-top { display: inline-flex !important; }
@media (max-width: 360px) { .hub-journey { padding: 14px; } .card-item .card-stat { padding: 3px 4px !important; } }