/* Themed dialog component — drop-in replacement for native alert/confirm/prompt. Pulls colors from the site's existing CSS custom properties (defined in public/index.html ~lines 39-50 for the "professional" theme; other themes override the same vars). Tracks whatever data-theme is set on . */ .td-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 99999; animation: td-fade-in 150ms ease-out; } .td-backdrop.td-closing { animation: td-fade-out 150ms ease-in forwards; } @keyframes td-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes td-fade-out { from { opacity: 1; } to { opacity: 0; } } .td-panel { background: var(--bg-secondary, #161b22); color: var(--text-primary, #e6edf3); border: 1px solid var(--border-color, #30363d); border-radius: 12px; min-width: 320px; max-width: 480px; padding: 20px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); animation: td-pop-in 150ms ease-out; font-family: inherit; } @keyframes td-pop-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .td-title { margin: 0 0 8px 0; font-size: 15px; font-weight: 600; color: var(--text-primary, #e6edf3); } .td-message { margin: 0 0 16px 0; color: var(--text-primary, #e6edf3); white-space: pre-wrap; line-height: 1.4; font-size: 13px; } .td-input { width: 100%; box-sizing: border-box; background: var(--bg-tertiary, #21262d); color: var(--text-primary, #e6edf3); border: 1px solid var(--border-color, #30363d); border-radius: 6px; padding: 8px 12px; margin-bottom: 16px; font-family: inherit; font-size: 13px; } .td-input:focus { outline: none; border-color: var(--accent-cyan, #58a6ff); } textarea.td-input { min-height: 80px; resize: vertical; } .td-buttons { display: flex; gap: 8px; justify-content: flex-end; } .td-buttons button { padding: 8px 16px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; border: 1px solid var(--border-color, #30363d); min-width: 80px; } .td-btn-cancel { background: var(--bg-tertiary, #21262d); color: var(--text-primary, #e6edf3); } .td-btn-cancel:hover { background: var(--bg-card, #0d1117); } .td-btn-ok { background: var(--accent-cyan, #58a6ff); color: #fff; border-color: var(--accent-cyan, #58a6ff); } .td-btn-ok:hover { filter: brightness(1.1); } .td-variant-warning .td-btn-ok { background: var(--accent-orange, #d29922); border-color: var(--accent-orange, #d29922); } .td-variant-danger .td-btn-ok { background: var(--accent-red, #f85149); border-color: var(--accent-red, #f85149); } .td-variant-success .td-btn-ok { background: var(--accent-green, #3fb950); border-color: var(--accent-green, #3fb950); }