.web-companion-banner { position: sticky; top: 0; z-index: 9000; display: grid; grid-template-columns: 10px minmax(0,1fr) auto auto; align-items: center; gap: 8px 10px; width: 100%; margin: 0 0 12px; padding: 9px 12px; color: #dbeafe; background: rgba(9,26,43,.97); border: 1px solid rgba(56,189,248,.3); border-radius: 10px; box-shadow: 0 8px 24px rgba(2,6,23,.22); font: 11px/1.4 Inter, sans-serif; backdrop-filter: blur(12px); }
.web-companion-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,.65); }
.web-companion-banner.connected .web-companion-dot { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,.7); }
.web-companion-banner.disconnected .web-companion-dot { background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,.65); }
.web-companion-banner.checking .web-companion-dot { animation: companionPulse 1.2s infinite; }
.web-companion-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.web-companion-copy b { color: #e0f2fe; font-size: 12px; }
.web-companion-copy span { color: #94a3b8; white-space: normal; overflow-wrap: anywhere; }
.web-companion-banner button,.web-companion-guide button { border: 1px solid rgba(56,189,248,.45); border-radius: 8px; padding: 6px 9px; color: #67e8f9; background: rgba(8,145,178,.12); cursor: pointer; font: 700 10px/1.3 Inter,sans-serif; }
.web-companion-banner > button { min-width: 105px; white-space: nowrap; }
.web-companion-banner button:disabled { cursor: wait; opacity: .55; }
.web-companion-banner .web-companion-secondary { color: #a5b4fc; border-color: rgba(129,140,248,.35); }
.web-companion-guide { width: min(520px,calc(100vw - 32px)); padding: 0; color: #dbeafe; border: 1px solid rgba(34,211,238,.4); border-radius: 16px; background: #071827; box-shadow: 0 24px 80px rgba(2,6,23,.75); }
.web-companion-guide::backdrop { background: rgba(2,6,23,.72); backdrop-filter: blur(4px); }
.web-companion-guide form { position: relative; padding: 24px; }
.web-companion-guide h2 { margin: 0 0 8px; color: #67e8f9; font-size: 19px; }
.web-companion-guide p,.web-companion-guide li { color: #a9bdcf; font: 12px/1.65 Inter,sans-serif; }
.web-companion-guide ol { padding-left: 20px; }
.web-companion-guide code { padding: 2px 5px; border-radius: 4px; color: #f0f9ff; background: #132d42; }
.web-companion-guide button { margin: 8px 8px 0 0; }
.web-companion-download { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 10px 14px; color: #fff; border: 1px solid #0891b2; border-radius: 9px; background: linear-gradient(135deg,#0891b2,#2563eb); font: 800 12px/1.3 Inter,sans-serif; text-decoration: none; }
.web-companion-version { display: block; margin-top: 7px; color: #7892a8; font: 10px/1.4 Inter,sans-serif; }
.web-companion-guide .web-companion-close { position: absolute; top: 12px; right: 12px; margin: 0; padding: 2px 8px; font-size: 20px; }
body[data-runtime-platform="web"] .tool-update-card,
body[data-runtime-platform="web"] #headlessCompanionCheck,
body[data-runtime-platform="web"] #headlessCompanionLogin { display: none !important; }
@keyframes companionPulse { 50% { opacity: .35; transform: scale(.75); } }
@media (max-width:720px) { .web-companion-banner { position: relative; grid-template-columns: 10px minmax(0,1fr); padding: 9px; }.web-companion-banner > button { grid-column: 2; width: 100%; }.web-companion-guide form { padding: 20px; } }
@media (max-width:767px) {
  .web-companion-banner,
  .web-companion-guide { display: none !important; }
}