.top-actions { display: flex; align-items: center; gap: 18px; color: #ddd; font-size: 14px; }
.top-actions form { margin: 0; }
.connection-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 12px; background: #f6ecd7; }
.connection-strip.connected { background: #e4f0e9; }
.connection-strip p { margin: 4px 0 0; color: var(--muted); }
.notice { padding: 13px 16px; margin: 16px 0; border-radius: 9px; background: #d9ebe1; color: #1e6540; font-weight: 700; }
.connection-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.connection-details div { padding: 16px; border: 1px solid var(--line); border-radius: 9px; }
.connection-details small, .connection-details b { display: block; }
.connection-details small { margin-bottom: 5px; color: var(--muted); }
.publish-box { display: grid; gap: 12px; padding: 18px; margin-top: 20px; border-top: 1px solid var(--line); background: var(--stone); border-radius: 9px; }
.publication-log { margin-top: 15px; font-size: 12px; color: var(--muted); }
.status.published { background: #d9ebe1; color: #1e6540; }
@media (max-width: 800px) { .connection-details { grid-template-columns: 1fr; } .connection-strip { align-items: flex-start; flex-direction: column; } }