/* Popup — компактное выпадающее окно */ * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; color: #333; min-width: 260px; } .popup { padding: 0; display: flex; flex-direction: column; } .popup-header { padding: 12px 18px; border-bottom: 1px solid #e0e0e0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; } .popup-title { font-weight: 600; font-size: 14px; } .popup-body { padding: 16px 18px; } .row { display: flex; align-items: center; margin-bottom: 16px; gap: 12px; } .row:last-of-type { margin-bottom: 0; } .row-btn { margin-top: 14px; margin-bottom: 4px; } .switch-row { cursor: pointer; user-select: none; justify-content: space-between; } .switch-wrap { flex-shrink: 0; position: relative; display: inline-block; } .switch-input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .switch-track { display: inline-block; width: 40px; height: 22px; border-radius: 11px; background: #cbd5e0; position: relative; transition: background 0.2s ease; } .switch-track::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; } .switch-input:checked + .switch-track { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .switch-input:checked + .switch-track::after { transform: translateX(18px); } .switch-row .label { flex: 1; line-height: 1.35; margin-right: 8px; } .btn { padding: 8px 16px; border: none; border-radius: 8px; font-size: 13px; cursor: pointer; font-weight: 500; } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; } .btn-primary:hover { opacity: 0.9; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .row-reload { margin-top: 8px; } .row-reload.hidden { display: none !important; } .btn-reload { background: #e2e8f0; color: #475569; } .btn-reload:hover { background: #cbd5e1; } .status-text { font-size: 12px; color: #666; } .status-text.success { color: #2e7d32; } .status-text.error { color: #c62828; } .popup-footer { padding: 12px 18px; border-top: 1px solid #e5e7eb; background: linear-gradient(180deg, #f8f9fc 0%, #eef0f5 100%); } .popup-footer .footer-link { display: inline-flex; align-items: center; gap: 6px; color: #5a67d8; text-decoration: none; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; } .popup-footer .footer-link:hover { background: rgba(102, 126, 234, 0.12); color: #434190; } .popup-footer .footer-link:active { background: rgba(102, 126, 234, 0.2); }