.preflight-gate { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: flex-start; justify-content: center; background: var(--color-bg-base); padding: var(--space-4); overflow-y: auto; -webkit-overflow-scrolling: touch; } .preflight-gate.is-open { display: flex; } .preflight-content { width: 100%; max-width: 440px; padding: var(--space-6) var(--space-4); text-align: center; margin: auto 0; flex-shrink: 0; animation: fadeInUp var(--duration-slow) var(--ease-out); } .preflight-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: var(--space-4); animation: bounceIn var(--duration-slower) var(--ease-spring); } .preflight-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: preflightIconColor 8s ease-in-out infinite; } @keyframes preflightIconColor { 0%, 100% { stroke: rgba(255, 255, 255, 0.95); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.25)); } 33% { stroke: rgba(167, 139, 250, 1); filter: drop-shadow(0 0 16px rgba(167, 139, 250, 0.5)); } 66% { stroke: rgba(34, 211, 238, 1); filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.5)); } } .preflight-title { font-size: var(--text-2xl); font-weight: var(--font-semibold); margin: 0 0 var(--space-3); color: var(--color-text-primary); } .preflight-desc { font-size: var(--text-base); color: var(--color-text-secondary); margin: 0 0 var(--space-6); line-height: var(--leading-relaxed); } .preflight-checklist { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); animation: fadeInUp var(--duration-slow) var(--ease-out) var(--stagger-2); } .perm-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); background: var(--color-hover); border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-out); } .perm-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-primary); } .perm-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .perm-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: permIconColor 8s ease-in-out infinite; } @keyframes permIconColor { 0%, 100% { stroke: rgba(255, 255, 255, 0.9); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.15)); } 50% { stroke: rgba(167, 139, 250, 1); filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.3)); } } .perm-status { font-size: var(--text-sm); font-weight: var(--font-medium); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-muted); background: var(--color-hover); transition: all var(--duration-normal) var(--ease-out); } .perm-status.status-granted { color: var(--color-success); background: var(--color-success-subtle); } .perm-status.status-blocked { color: var(--color-error); background: var(--color-error-subtle); } .perm-status.status-notfound { color: var(--color-warning); background: var(--color-warning-subtle); } .perm-status.status-pending { color: var(--color-primary); background: var(--color-primary-subtle); animation: pulse 2s var(--ease-in-out) infinite; } .preflight-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); animation: fadeInUp var(--duration-slow) var(--ease-out) var(--stagger-3); } .btn-large { height: var(--touch-target-ideal); font-size: var(--text-base); padding: 0 var(--space-6); } .preflight-blocked-hint { font-size: var(--text-sm); color: var(--color-error); background: var(--color-error-subtle); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-4); line-height: var(--leading-relaxed); animation: shake 0.5s var(--ease-out); } .preflight-help-toggle { font-size: var(--text-sm); color: var(--color-text-muted); background: none; border: none; cursor: pointer; padding: var(--space-2); transition: color var(--duration-fast) var(--ease-out); } .preflight-help-toggle:hover { color: var(--color-text-primary); } .preflight-help-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } .preflight-help { display: none; text-align: left; margin-top: var(--space-4); margin-bottom: var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); } .preflight-help.is-expanded { display: block; animation: fadeInUp var(--duration-normal) var(--ease-out); } .help-platform-guide { margin-bottom: var(--space-4); padding: var(--space-3); background: var(--color-primary-subtle); border: 1px solid var(--color-primary-muted); border-radius: var(--radius-md); } .help-platform-guide:empty { display: none; } .help-platform-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-primary); margin: 0 0 var(--space-3); display: flex; align-items: center; gap: var(--space-2); } .help-platform-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; } .help-platform-steps li { position: relative; padding-left: 32px; margin-bottom: var(--space-3); font-size: var(--text-base); color: var(--color-text-primary); line-height: var(--leading-relaxed); } .help-platform-steps li:last-child { margin-bottom: 0; } .help-platform-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; background: var(--color-primary); color: white; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); display: flex; align-items: center; justify-content: center; } .help-platform-steps strong { color: var(--color-primary-hover); background: var(--color-primary-subtle); padding: 1px 6px; border-radius: var(--radius-sm); } .help-all-platforms { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3); } .help-all-platforms summary { font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; padding: var(--space-2) 0; user-select: none; transition: color var(--duration-fast) var(--ease-out); } .help-all-platforms summary:hover { color: var(--color-text-primary); } .help-all-platforms[open] summary { margin-bottom: var(--space-3); } .help-section { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); } .help-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .help-section h4 { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); margin: 0 0 var(--space-2); } .help-section ol { margin: 0; padding-left: 20px; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.7; } .help-section ol li { margin-bottom: var(--space-1); } .help-section ol strong { color: var(--color-text-primary); } @media (max-height: 600px) { .preflight-content { padding-top: var(--space-4); padding-bottom: var(--space-6); margin: 0; } .preflight-icon { width: 56px; height: 56px; margin-bottom: var(--space-3); } .preflight-title { font-size: var(--text-xl); } .preflight-desc { font-size: var(--text-sm); margin-bottom: var(--space-4); } }