.panel-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2); gap: var(--space-2); flex-wrap: wrap; animation: fadeInDown var(--duration-normal) var(--ease-out); } .panel-header-left { display: flex; align-items: center; gap: var(--space-2); } .panel-header-right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .panel-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; transition: all var(--duration-normal) var(--ease-out); } .panel-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: panelIconColorCycle 12s ease-in-out infinite; } .panel-icon svg circle { fill: currentColor; stroke: none; } @keyframes panelIconColorCycle { 0%, 100% { stroke: rgba(255, 255, 255, 0.9); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.15)); } 25% { stroke: rgba(167, 139, 250, 1); filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.3)); } 50% { stroke: rgba(34, 211, 238, 1); filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.3)); } 75% { stroke: rgba(52, 211, 153, 1); filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.3)); } } .panel-title { font-size: var(--text-xl); font-weight: var(--font-semibold); white-space: nowrap; margin: 0; } .match-indicator { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success, #22c55e); margin-left: var(--space-2); flex-shrink: 0; opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); } .match-indicator.is-matched { display: inline-block; opacity: 1; animation: matchBlink 0.6s ease-in-out 5; } .match-indicator.is-fading { animation: none; opacity: 0; } @keyframes matchBlink { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } 50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 8px 4px rgba(34, 197, 94, 0.3); } } .panel-actions { display: flex; gap: var(--space-2); flex-shrink: 0; margin-bottom: var(--space-2); } .connection-status { display: flex; align-items: center; gap: var(--space-1); } .connection-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background-color: var(--color-text-muted); flex-shrink: 0; transition: all var(--duration-normal) var(--ease-out); } .connection-dot.is-online { background-color: var(--color-success); box-shadow: 0 0 6px var(--color-success), 0 0 12px var(--color-success); animation: statusDotPulse 2s ease-in-out infinite; } .connection-label { font-size: var(--text-xs); color: var(--color-text-muted); } @media (min-width: 900px) and (orientation: landscape), (min-width: 1025px), (min-width: 768px) and (orientation: landscape) { body { background: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), var(--color-bg-base); background-size: var(--grid-size) var(--grid-size); background-position: center center; } .app-container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-4); width: 100%; max-width: 1800px; margin: 0 auto; padding: var(--space-4); transform: none !important; transition: none; } .panel { flex: unset; width: auto; height: auto; padding: var(--space-4); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--panel-glow-idle), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: box-shadow var(--duration-slow) var(--ease-out); position: relative; overflow: hidden; } .panel:hover { box-shadow: var(--panel-glow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rgb-gradient); background-size: 200% 100%; animation: rgbBorderRotate 8s linear infinite; opacity: 0.6; } .edge-swipe { display: none !important; pointer-events: none !important; } .pip { display: none !important; } .mobile-only { display: none !important; } .mobile-top-nav { display: none !important; } .desktop-only { display: flex !important; } .panel-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.06); gap: var(--space-3); } .panel-header-left { display: flex; align-items: center; gap: var(--space-3); } .panel-header-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; flex: 1; justify-content: flex-end; } .panel-icon { width: 36px; height: 36px; cursor: pointer; } .panel-icon svg { stroke-width: 1.75; } .panel-icon:hover { transform: scale(1.1); animation: iconBounce 0.4s ease-out; } .panel-icon:hover svg { filter: brightness(1.3) drop-shadow(0 0 8px var(--color-primary)) drop-shadow(0 0 16px rgba(99, 102, 241, 0.5)); animation: iconLuminance 1.5s ease-in-out infinite; } .panel-header-left:hover .panel-icon svg { animation: iconLuminance 1.5s ease-in-out infinite; } .panel-title { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--color-text-primary); letter-spacing: 0.02em; text-shadow: 0 0 20px rgba(99, 102, 241, 0.15); } .panel-actions { display: none; } .call-controls { display: flex !important; } .panel-header-right .action-btn-desktop { order: -1; flex-shrink: 0; } .panel-header-right .call-status { margin-left: auto; } .panel-header-right .chat-toggle-btn { flex-shrink: 0; } .btn { position: relative; overflow: hidden; border: 1px solid transparent; } .btn .btn-icon { width: 22px; height: 22px; transition: transform var(--duration-fast) var(--ease-out); } .btn:hover:not(:disabled) .btn-icon { transform: scale(1.1); } .btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); border: 1px solid rgba(99, 102, 241, 0.3); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); transition: all var(--duration-fast) var(--ease-out); } .btn-primary:hover:not(:disabled) { box-shadow: var(--btn-neon-glow-hover); transform: translateY(-1px); border-color: rgba(99, 102, 241, 0.5); } .btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.98); box-shadow: var(--btn-neon-glow); } .btn-secondary { background: var(--color-bg-elevated); border: 1px solid var(--color-border); transition: all var(--duration-fast) var(--ease-out); } .btn-secondary:hover:not(:disabled) { background: var(--color-bg-surface); border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 0 12px rgba(99, 102, 241, 0.2); } .connection-status { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background: rgba(0, 0, 0, 0.3); border-radius: var(--radius-full); border: 1px solid var(--color-border); } .connection-dot { width: 12px; height: 12px; border-radius: var(--radius-full); transition: all var(--duration-normal) var(--ease-out); } .connection-dot.is-online { background: var(--color-success); box-shadow: 0 0 8px var(--color-success), 0 0 16px var(--color-success); animation: statusDotPulse 2s ease-in-out infinite; } .connection-label { font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); } .status-pill { background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); color: var(--color-primary-hover); font-weight: var(--font-medium); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); letter-spacing: 0.02em; } .game-host { flex: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-base); border: 1px solid rgba(99, 102, 241, 0.15); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5); position: relative; } .game-host::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius-md); box-shadow: inset 0 0 60px rgba(99, 102, 241, 0.05); } .game-host iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: var(--radius-md); } .video-grid { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .video-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-base); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); transition: all var(--duration-normal) var(--ease-out); } .video-tile:hover { border-color: rgba(99, 102, 241, 0.3); box-shadow: var(--video-glow), 0 4px 20px rgba(0, 0, 0, 0.4); } .video-tile.has-stream { border-color: rgba(34, 197, 94, 0.3); animation: videoActiveRing 3s ease-in-out infinite; } .video-tile-remote { flex: 1.5; min-height: 200px; } .video-tile-local { flex: 1; min-height: 150px; } .chat-toggle-btn { position: relative; } .chat-toggle-btn:hover:not(:disabled) { box-shadow: 0 0 16px rgba(99, 102, 241, 0.3); } .chat-badge { background: var(--color-error); box-shadow: 0 0 8px var(--color-error); } .name-label, .match-label { font-size: var(--text-sm); color: var(--color-text-secondary); padding: var(--space-1) var(--space-2); background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-sm); } .nav-segment { display: none; } .nav-title-icon { cursor: pointer; } } @media (min-width: 1400px) { .app-container { grid-template-columns: 1.3fr 0.7fr; gap: var(--space-6); padding: var(--space-6); } .panel { padding: var(--space-5); border-radius: var(--radius-xl); } .panel-title { font-size: var(--text-2xl); } .panel-icon { width: 40px; height: 40px; } .btn { padding: var(--space-3) var(--space-5); font-size: var(--text-base); } .btn .btn-icon { width: 24px; height: 24px; } .video-tile-remote { min-height: 280px; } .video-tile-local { min-height: 200px; } } @media (min-width: 1800px) { .app-container { max-width: 2000px; gap: var(--space-8); } .panel { padding: var(--space-6); } .panel-title { font-size: var(--text-3xl); letter-spacing: 0.03em; } .panel-icon { width: 44px; height: 44px; } .panel-icon svg { stroke-width: 1.5; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .app-container { transition: none !important; } .pip { transition: none !important; } .chat-drawer { transition: none !important; } .mobile-top-nav { animation: none; } .nav-segment::before, .nav-segment::after, .panel::before { animation: none; opacity: 0.3; } .panel-header-left:hover .panel-icon { animation: none; } .connection-dot.is-online { animation: none; } .video-tile.has-stream { animation: none; } .video-tile, .game-host, .preflight-content, .preflight-icon, .preflight-checklist, .preflight-actions { animation: none; } .stagger-children > * { animation: none; opacity: 1; } .btn-primary:hover:not(:disabled) { box-shadow: var(--btn-neon-glow); } } @media (prefers-contrast: high) { .panel { border-width: 2px; } .video-tile { border-width: 2px; } .btn, .nav-action-btn, .control-btn { border-width: 2px; } } .theme-toggle { position: fixed; bottom: var(--space-4); left: var(--space-4); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); cursor: pointer; z-index: var(--z-fixed); transition: all var(--duration-fast) var(--ease-out); box-shadow: var(--shadow-md); } .theme-toggle:hover { background: var(--color-hover); border-color: var(--color-border-strong); transform: scale(1.05); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle-icon { font-size: 1.25rem; transition: transform var(--duration-normal) var(--ease-spring); } .theme-toggle:hover .theme-toggle-icon { transform: rotate(15deg); } @media (max-width: 899px) { .theme-toggle { display: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; } .btn .btn-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn .btn-icon svg polygon { fill: currentColor; stroke: none; } .btn-primary { background-color: var(--color-primary); color: #fff; } .btn-primary:hover:not(:disabled) { background-color: var(--color-primary-hover); } .btn-primary:active:not(:disabled) { background-color: var(--color-primary-active); } .btn-secondary { background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); color: var(--color-text-primary); } .btn-secondary:hover:not(:disabled) { background-color: var(--color-hover); border-color: var(--color-border-strong); } .btn-retry { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); background: var(--color-error-subtle); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .btn-retry:hover { background: rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.6); } .btn-retry:focus-visible { outline: 2px solid var(--color-error); outline-offset: 2px; } .btn-link { padding: var(--space-2); background: none; border: none; color: var(--color-text-muted); font-size: var(--text-sm); cursor: pointer; transition: color var(--duration-fast) var(--ease-out); } .btn-link:hover { color: var(--color-text-primary); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background-color: transparent; border: none; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .btn-icon:hover { background-color: var(--color-hover); color: var(--color-text-primary); } .btn-icon:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-shortcut { display: none; margin-left: var(--space-2); padding: 2px 6px; font-size: var(--text-xs); font-family: var(--font-mono); font-weight: var(--font-medium); color: var(--color-text-muted); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--color-border); border-radius: var(--radius-xs); opacity: 0.7; transition: opacity var(--duration-fast) var(--ease-out); } @media (min-width: 900px) { .btn-shortcut { display: inline-block; } .btn:hover .btn-shortcut { opacity: 1; border-color: rgba(99, 102, 241, 0.4); } } .btn-neon { position: relative; overflow: visible; } @media (min-width: 900px) { .btn-neon::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: var(--rgb-gradient); background-size: 200% 100%; opacity: 0; z-index: -1; transition: opacity var(--duration-normal) var(--ease-out); filter: blur(8px); } .btn-neon:hover:not(:disabled)::before { opacity: 0.5; animation: rgbBorderRotate 3s linear infinite; } .btn-neon:focus-visible::before { opacity: 0.7; } .btn-primary.btn-neon:hover:not(:disabled) { box-shadow: 0 0 20px rgba(99, 102, 241, 0.5), 0 0 40px rgba(99, 102, 241, 0.3), 0 0 60px rgba(99, 102, 241, 0.1); } .btn-secondary.btn-neon:hover:not(:disabled) { border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 0 15px rgba(99, 102, 241, 0.3), 0 0 30px rgba(99, 102, 241, 0.15); } } .shortcut-toast { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%) translateY(100px); padding: var(--space-3) var(--space-5); background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), var(--panel-glow-idle); opacity: 0; pointer-events: none; z-index: var(--z-toast); transition: all var(--duration-slow) var(--ease-out); } .shortcut-toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } .shortcut-toast-content { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-primary); font-size: var(--text-sm); } .shortcut-toast-key { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 var(--space-2); background: rgba(99, 102, 241, 0.2); border: 1px solid rgba(99, 102, 241, 0.4); border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: var(--font-semibold); color: var(--color-primary-hover); box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); } [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: var(--space-2) var(--space-3); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-text-primary); white-space: nowrap; opacity: 0; pointer-events: none; z-index: var(--z-tooltip); transition: all var(--duration-fast) var(--ease-out); box-shadow: var(--shadow-md); } [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 899px) { [data-tooltip]::after { display: none; } } @media (min-width: 900px) { .video-tile::before, .video-tile::after { content: ''; position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 5; opacity: 0.4; transition: opacity var(--duration-normal) var(--ease-out); } .video-tile::before { top: 8px; left: 8px; border-top: 2px solid var(--color-primary); border-left: 2px solid var(--color-primary); border-radius: 4px 0 0 0; } .video-tile::after { bottom: 8px; right: 8px; border-bottom: 2px solid var(--color-primary); border-right: 2px solid var(--color-primary); border-radius: 0 0 4px 0; } .video-tile:hover::before, .video-tile:hover::after { opacity: 0.8; } .video-tile.has-stream::before, .video-tile.has-stream::after { border-color: var(--color-success); } .video-tile-remote .video-label { text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); } .video-tile-local .video-label { background: rgba(99, 102, 241, 0.2); border: 1px solid rgba(99, 102, 241, 0.3); } } .screen-guard-overlay { position: fixed; inset: 0; z-index: 9999; z-index: calc(var(--z-max, 100) + 10); display: flex; align-items: center; justify-content: center; padding: 24px; padding: var(--space-6, 24px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease-out; transition: opacity var(--duration-normal, 0.3s) var(--ease-out, ease-out), visibility var(--duration-normal, 0.3s) var(--ease-out, ease-out); -webkit-user-select: none; user-select: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .screen-guard-overlay.is-visible { opacity: 1; visibility: visible; } .screen-guard-unsupported { background: #000000; } .screen-guard-rotate { background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .screen-guard-content { max-width: 320px; width: 100%; text-align: center; animation: fadeInUp 0.5s ease-out; animation: fadeInUp var(--duration-slow, 0.5s) var(--ease-out, ease-out); } .screen-guard-icon { font-size: 4rem; margin-bottom: var(--space-4); filter: grayscale(0.2); } .screen-guard-rotate-icon { display: inline-block; animation: rotateHint 2s ease-in-out infinite; transform-origin: center center; } @keyframes rotateHint { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } } .screen-guard-title { font-size: var(--text-xl); font-weight: var(--font-bold); color: #ffffff; margin: 0 0 var(--space-3); line-height: var(--leading-tight); } .screen-guard-message { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); margin: 0; line-height: var(--leading-relaxed); } .screen-guard-hint { margin-top: var(--space-6); } .rotate-arrow { display: inline-block; font-size: 2.5rem; color: var(--color-primary); animation: rotateArrow 1.5s ease-in-out infinite; } @keyframes rotateArrow { 0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.7; } 50% { transform: rotate(90deg) scale(1.1); opacity: 1; } } html[data-screen-supported="false"] .app-container, html[data-screen-supported="false"] .mobile-top-nav, html[data-screen-supported="false"] .pip, html[data-screen-supported="false"] .chat-drawer, html[data-screen-supported="false"] .preflight-gate { visibility: hidden; pointer-events: none; } html[data-portrait-locked="true"] .app-container, html[data-portrait-locked="true"] .mobile-top-nav, html[data-portrait-locked="true"] .pip, html[data-portrait-locked="true"] .chat-drawer { visibility: hidden; pointer-events: none; } .preflight-error-section { margin-top: var(--space-4); padding: var(--space-4); background: var(--color-error-subtle); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md); text-align: left; } .preflight-error-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: var(--font-semibold); color: #fca5a5; margin: 0 0 var(--space-3); } .preflight-error-title .error-icon { font-size: 1.25rem; } .preflight-error-message { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-3); line-height: var(--leading-relaxed); } .preflight-error-list { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.8; } .preflight-error-list li { margin-bottom: var(--space-1); } .preflight-error-list strong { color: var(--color-text-primary); } .preflight-app-list { margin: var(--space-3) 0; padding: var(--space-3); background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-sm); } .preflight-app-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--color-text-primary); border-bottom: 1px solid var(--color-border); } .preflight-app-item:last-child { border-bottom: none; } .preflight-app-item .app-icon { font-size: 1.25rem; } .perm-status.status-notfound { color: var(--color-warning); background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); } .perm-status.status-inuse { color: #f97316; background: rgba(249, 115, 22, 0.1); border-color: rgba(249, 115, 22, 0.3); } .perm-status.status-hardware { color: #ef4444; background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); } .preflight-refresh-btn { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-primary); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .preflight-refresh-btn:hover { background: var(--color-hover); border-color: var(--color-border-strong); } .preflight-refresh-btn .btn-icon { width: 16px; height: 16px; }