/** * Reconnect — shared shell: fixed gradient (does not scroll) + standalone page styling aligned with install. * Usage: first child of should be . * Main content wrapper needs .reconnect-page-foreground (or equivalent z-index stacking). */ *, *::before, *::after { box-sizing: border-box; } .reconnect-fixed-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; min-height: 100dvh; z-index: 0; pointer-events: none; background: linear-gradient(165deg, #f0eef5 0%, #e8eaf6 42%, #fce4ec 100%); } html[data-theme="dark"] .reconnect-fixed-bg { background: linear-gradient(165deg, #0f0d14 0%, #161222 48%, #1a1218 100%); } .reconnect-page-foreground { position: relative; z-index: 1; } /* Overscroll / iOS: solid edge color behind fixed layer */ html.reconnect-standalone { -webkit-text-size-adjust: 100%; background-color: #f0eef5; } html[data-theme="dark"].reconnect-standalone { background-color: #0f0d14; } /* --- Signup (invite) page --- */ /* Content must sit in .reconnect-signup-main.reconnect-page-foreground (sibling after .reconnect-fixed-bg), not on body — otherwise the fixed gradient can stack above the form in some browsers. */ body.reconnect-signup-body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; line-height: 1.45; color: #16161f; background: transparent; } .reconnect-signup-body .reconnect-signup-main { padding: 1rem max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); max-width: 420px; margin-left: auto; margin-right: auto; } body.reconnect-signup-body h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.35rem; color: #16161f; } .reconnect-signup-body .reconnect-signup-main > p:not(.error):not(.muted) { margin: 0 0 1rem; font-size: 0.9375rem; color: #64748b; line-height: 1.5; } body.reconnect-signup-body label { display: block; margin-top: 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; } body.reconnect-signup-body label:first-of-type { margin-top: 0; } body.reconnect-signup-body input:not([type="checkbox"]):not([type="radio"]), body.reconnect-signup-body select { width: 100%; margin-top: 0.3rem; padding: 0.5rem 0.7rem; font-size: 16px; min-height: 42px; border: 1px solid #e8e6ed; border-radius: 10px; background: #faf9fc; color: #16161f; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } /* Terms step checkboxes: keep compact (full-width text-field rules do not apply). */ body.reconnect-signup-body .terms-accept-check input[type="checkbox"] { width: 0.95rem; height: 0.95rem; min-height: 0; margin-top: 0.15rem; padding: 0; flex-shrink: 0; accent-color: #e91e63; border-radius: 4px; } body.reconnect-signup-body input:not([type="checkbox"]):not([type="radio"]):focus, body.reconnect-signup-body select:focus { outline: none; border-color: #e91e63; background: #fff; box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.12); } body.reconnect-signup-body button[type="submit"] { width: 100%; margin-top: 1.15rem; min-height: 44px; padding: 0.6rem 1rem; font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: #fff; background: #e91e63; border: none; border-radius: 10px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.1s; } body.reconnect-signup-body button[type="submit"]:hover { background: #c2185b; } body.reconnect-signup-body button[type="submit"]:active { transform: scale(0.98); } body.reconnect-signup-body .error { padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.8125rem; margin: 1rem 0; background: #fef2f2; border: 1px solid #fecdd3; color: #b91c1c; line-height: 1.45; } body.reconnect-signup-body .muted { color: #64748b; font-size: 0.8125rem; margin-top: 1rem; line-height: 1.5; } /* --- Admin panel --- */ body.reconnect-admin-body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; line-height: 1.45; color: #16161f; background: transparent; padding: 1rem max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); max-width: 720px; margin-left: auto; margin-right: auto; } body.reconnect-admin-body h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.35rem; } body.reconnect-admin-body .sub { color: #64748b; font-size: 0.8125rem; margin-bottom: 1.25rem; line-height: 1.5; } body.reconnect-admin-body .card { background: #fff; padding: 1.15rem 1.2rem 1.25rem; border-radius: 14px; box-shadow: 0 8px 32px rgba(22, 22, 31, 0.06); border: 1px solid rgba(255, 255, 255, 0.7); margin-bottom: 1rem; } body.reconnect-admin-body .card h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.65rem; } body.reconnect-admin-body label { display: block; margin-top: 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; } body.reconnect-admin-body input[type="text"], body.reconnect-admin-body input[type="password"], body.reconnect-admin-body input[type="email"], body.reconnect-admin-body textarea, body.reconnect-admin-body select { width: 100%; padding: 0.5rem 0.7rem; margin-top: 0.3rem; border: 1px solid #e8e6ed; border-radius: 10px; font-size: 16px; min-height: 42px; background: #faf9fc; color: #16161f; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } body.reconnect-admin-body textarea { min-height: 100px; font-family: ui-monospace, monospace; font-size: 0.85rem; } body.reconnect-admin-body input:focus, body.reconnect-admin-body textarea:focus, body.reconnect-admin-body select:focus { outline: none; border-color: #e91e63; background: #fff; box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.12); } body.reconnect-admin-body button, body.reconnect-admin-body .btn { padding: 0.5rem 1rem; margin: 0.25rem 0.25rem 0.25rem 0; border: none; border-radius: 10px; cursor: pointer; font-size: 0.9rem; min-height: 44px; font-family: inherit; font-weight: 600; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.1s; } body.reconnect-admin-body button:active, body.reconnect-admin-body .btn:active { transform: scale(0.98); } body.reconnect-admin-body .btn-primary { background: #e91e63; color: #fff; } body.reconnect-admin-body .btn-primary:hover { background: #c2185b; } body.reconnect-admin-body .btn-secondary { background: #e8e6ed; color: #334155; } body.reconnect-admin-body .btn-secondary:hover { background: #dce0e8; } body.reconnect-admin-body .msg { padding: 0.65rem 0.85rem; border-radius: 10px; margin-bottom: 1rem; font-size: 0.875rem; line-height: 1.45; } body.reconnect-admin-body .msg.ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; } body.reconnect-admin-body .msg.err { background: #fef2f2; border: 1px solid #fecdd3; color: #b91c1c; } body.reconnect-admin-body table { width: 100%; border-collapse: collapse; } body.reconnect-admin-body th, body.reconnect-admin-body td { text-align: left; padding: 0.5rem 0.35rem; border-bottom: 1px solid #e8e6ed; font-size: 0.875rem; } body.reconnect-admin-body th { font-weight: 600; color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } body.reconnect-admin-body .status { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; } body.reconnect-admin-body .status.on { background: #fce4ec; color: #c2185b; } body.reconnect-admin-body .status.off { background: #ecfdf5; color: #047857; } body.reconnect-admin-body .log-preview { background: #f8f7fb; padding: 0.75rem; border-radius: 10px; font-size: 0.8rem; max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-all; border: 1px solid #e8e6ed; } body.reconnect-admin-body .health-item { padding: 0.75rem 0; border-bottom: 1px solid #e8e6ed; } body.reconnect-admin-body .health-item:last-child { border-bottom: none; } body.reconnect-admin-body .health-item .health-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; } body.reconnect-admin-body .health-item .health-label { font-weight: 600; } body.reconnect-admin-body .health-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; } body.reconnect-admin-body .health-badge.ok { background: #d1fae5; color: #047857; } body.reconnect-admin-body .health-badge.warning { background: #fef3c7; color: #b45309; } body.reconnect-admin-body .health-badge.error { background: #fee2e2; color: #b91c1c; } body.reconnect-admin-body .health-msg { font-size: 0.9rem; color: #334155; margin-bottom: 0.35rem; } body.reconnect-admin-body .health-fix { font-size: 0.85rem; color: #64748b; margin-bottom: 0.35rem; } body.reconnect-admin-body .health-fix strong { color: #334155; } @media (max-width: 640px) { body.reconnect-admin-body { padding: 1rem max(0.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)); } body.reconnect-admin-body .card { padding: 1rem; } body.reconnect-admin-body h1 { font-size: 1.25rem; } body.reconnect-admin-body .card h2 { font-size: 1rem; } body.reconnect-admin-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.reconnect-admin-body table th, body.reconnect-admin-body table td { white-space: nowrap; font-size: 0.8rem; } body.reconnect-admin-body .log-preview { max-height: 200px; } }