/* Targeted polish kept separate so the main style sheet stays easy to scan. */
.update-orb { animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Real client screenshots in the showcase. */
.mock-screen > :not(.showcase-image) { display: none; }
.showcase-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.login-link { border: 0; background: transparent; color: #c7c4d7; font: 600 11px 'Space Grotesk', sans-serif; cursor: pointer; transition: .25s; }
.login-link:hover, .login-link.logged-in { color: #ab99ff; }
.buy-button { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(4, 4, 12, .74); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: .25s; }
.modal-backdrop.show { opacity: 1; visibility: visible; }
.modal-card { position: relative; width: min(100%, 510px); max-height: min(780px, 92vh); overflow: auto; padding: 38px; background: linear-gradient(145deg, rgba(39, 34, 76, .98), rgba(13, 13, 31, .99)); border: 1px solid rgba(170, 151, 255, .35); box-shadow: 0 30px 100px rgba(0, 0, 0, .65), 0 0 60px rgba(115, 83, 255, .16); transform: translateY(16px) scale(.98); transition: .25s; }
.modal-backdrop.show .modal-card { transform: none; }
.modal-card h2 { margin: 0; font: 600 clamp(32px, 6vw, 46px)/.94 'Space Grotesk', sans-serif; letter-spacing: -2.8px; }
.modal-card h2 span { color: #a792ff; }.modal-close { position: absolute; top: 17px; right: 18px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #eeeaff; font-size: 24px; line-height: 1; cursor: pointer; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 28px 0 20px; border-bottom: 1px solid rgba(183, 170, 255, .17); }.auth-tabs button { padding: 12px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #9290a2; font: 600 12px 'Space Grotesk', sans-serif; cursor: pointer; }.auth-tabs button.active { color: #fff; border-color: #967fff; }
.auth-form { display: grid; gap: 15px; }.auth-form.hidden { display: none; }.auth-form label { display: grid; gap: 8px; color: #c5c2d2; font: 600 10px 'Space Grotesk', sans-serif; letter-spacing: .7px; text-transform: uppercase; }.auth-form input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(185, 172, 255, .18); outline: none; background: rgba(8, 8, 21, .5); color: #f2efff; font: 14px Inter, sans-serif; }.auth-form input:focus { border-color: #9b85ff; box-shadow: 0 0 0 3px rgba(132, 105, 255, .13); }.auth-form .button { margin-top: 8px; border: 0; cursor: pointer; }.auth-form .button:disabled { opacity: .55; cursor: wait; }
.form-message { min-height: 18px; margin: 17px 0 0; color: #c7c3d6; font-size: 12px; line-height: 1.5; }.error-text { color: #ffacbb; }.auth-footnote, .hwid-note { margin: 21px 0 0; color: #858293; font-size: 10px; line-height: 1.7; }
.account-content { margin-top: 27px; }.account-email { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px; border: 1px solid rgba(187,172,255,.14); background: rgba(9,9,24,.43); }.account-email span { color: #8d86a7; font: 600 8px 'Space Grotesk', sans-serif; letter-spacing: 1px; }.account-email b { font: 500 13px Inter, sans-serif; }.account-email button { grid-column: 2; grid-row: 1 / 3; border: 0; background: transparent; color: #a895ff; font: 600 10px 'Space Grotesk', sans-serif; cursor: pointer; }.account-content h3 { margin: 30px 0 12px; font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: 1px; }.license-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; margin-top: 8px; border: 1px solid rgba(188,172,255,.16); background: linear-gradient(100deg, rgba(95,69,181,.17), rgba(19,18,42,.45)); }.license-card small { display: block; color: #aaa2ce; font: 600 8px 'Space Grotesk', sans-serif; letter-spacing: 1px; }.license-card b { display: block; margin: 8px 0 5px; color: #f1ecff; font: 600 15px 'Space Grotesk', sans-serif; letter-spacing: 1.2px; }.license-card span { color: #80dec1; font-size: 10px; }.reset-hwid { min-width: 105px; border: 1px solid rgba(162,143,255,.36); padding: 8px; background: transparent; color: #e5deff; font: 600 10px/1.4 'Space Grotesk', sans-serif; cursor: pointer; transition: .2s; }.reset-hwid:hover { border-color: #a58eff; background: rgba(135,107,244,.18); }.reset-hwid small { color: #9f8bff; margin-top: 2px; }.empty-state, .account-loading { color: #9a98a8; font-size: 12px; line-height: 1.7; }.toast { position: fixed; z-index: 110; bottom: 25px; left: 50%; max-width: min(90vw, 430px); transform: translate(-50%, 30px); padding: 13px 18px; background: #252145; border: 1px solid rgba(183,164,255,.35); color: #f0edff; opacity: 0; pointer-events: none; font-size: 12px; box-shadow: 0 15px 35px rgba(0,0,0,.4); transition: .3s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast.error { border-color: rgba(255,133,159,.55); background: #3d2032; }
@media (max-width: 700px) { .header-actions { gap: 10px; }.login-link { font-size: 10px; }.modal-card { padding: 30px 22px; }.license-card { align-items: flex-start; flex-direction: column; }.reset-hwid { width: 100%; }.header-actions .header-cta { display: none; } }