/* Shared by the pages visitors see before signing in (landing, sign in, register, shared deck; owner 2026-10-18): the buttons with the
   headline gradient, the gradient text and the theme picker of landing-theme.js. Colours come from landing-theme.js. */
/* buttons: the headline's gradient for the main action, an accent tint for the second (owner: more inviting than black and white) */
.lp-btn { height: 44px; padding: 0 20px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--text) !important; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn svg { width: 18px; height: 18px; }
.lp-btn.sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.lp-btn.big { height: 56px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.lp-btn.grad { border: 0; color: var(--onAccent) !important; background: linear-gradient(100deg, var(--accent), var(--sec)); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent); }
.lp-btn.grad:hover { box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 50%, transparent); }
.lp-gt { background: linear-gradient(90deg, var(--accent), var(--sec)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* theme picker: the app's palettes, the five colours and Auto / Dark / Light */
.lp-themewrap { position: relative; }
.lp-tbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.lp-tdot { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 50%, var(--sec) 50%); }
.lp-tpop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bar); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); width: 300px; }
.lp-tpop[hidden] { display: none; }
.lp-tpop .lab { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.lp-tpop .note { font-size: 12px; color: var(--muted); }
.lp-seg { display: flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.lp-seg button { flex: 1; height: 32px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; }
.lp-seg button.on { background: var(--accent); color: var(--onAccent); }
.lp-pips { display: flex; gap: 8px; }
.lp-pip { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; font: inherit; font-weight: 800; font-size: 13px; color: #14110a; cursor: pointer; }
.lp-pip.on { border-color: var(--text); box-shadow: 0 0 0 3px var(--bar) inset; }

.lp-tpop, .lp-tpop * { box-sizing: border-box; }
@media (max-width: 640px) { .lp-tpop { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; } }