.th-notice { position: fixed; top: 14px; left: 50%; transform: translate(-50%, -12px); opacity: 0; z-index: 2000; display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100vw - 24px)); padding: 10px 14px 10px 16px; border: 1px solid var(--border, #2a3644); border-radius: 14px; background: var(--surface-2, #1a2431); color: var(--text, #e8edf2); font-size: 14px; line-height: 1.45; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); transition: opacity .18s ease, transform .18s ease; }
.th-notice[hidden] { display: none; }
.th-notice.show { opacity: 1; transform: translate(-50%, 0); }
.th-notice-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted, #8a9bad); }
.th-notice[data-kind="offline"] .th-notice-dot, .th-notice[data-kind="server"] .th-notice-dot { background: var(--accent, #ff6a1a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #ff6a1a) 22%, transparent); animation: th-notice-pulse 1.6s ease-in-out infinite; }
.th-notice-text { flex: 1 1 auto; min-width: 0; }
.th-notice-btn { flex: none; border: 1px solid var(--border, #2a3644); background: transparent; color: var(--text, #e8edf2); border-radius: 8px; padding: 5px 12px; font: 600 13px inherit; cursor: pointer; }
.th-notice-btn:hover { background: var(--surface, #141c27); }
.th-notice-x { flex: none; border: 0; background: transparent; color: var(--muted, #8a9bad); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
@keyframes th-notice-pulse { 50% { opacity: .45; } }
@media (max-width: 640px) { .th-notice { top: 8px; font-size: 13px; } }