.fish-login-page {overflow: hidden; } .fish-login-preview {position: fixed;inset: 0;pointer-events: none;user-select: none;filter: blur(7px);transform: scale(1.035);opacity: 0.72; } .fish-login-preview::after {content: "";position: absolute;inset: 0;background: rgba(9, 25, 47, 0.28); } .fish-login-preview .preview-main {padding: 8px clamp(18px, 5vw, 64px) 110px; } .fish-login-preview .preview-tiles {display: grid;gap: 18px;max-width: 760px;margin: 10px auto 0; } .fish-login-preview .preview-tile {display: flex;align-items: center;gap: 16px;background: #fff;border-radius: 22px;padding: 20px;box-shadow: var(--shadow); } .fish-login-preview .preview-chip {width: 52px;height: 52px;border-radius: 16px;display: grid;place-items: center;color: #fff; } .fish-login-preview .preview-chip.okoun {background: var(--okoun); } .fish-login-preview .preview-chip.stika {background: var(--stika); } .fish-login-preview .preview-label {flex: 1;font-size: 1.35rem;font-weight: 800; } .fish-login-preview .preview-label.okoun {color: var(--okoun); } .fish-login-preview .preview-label.stika {color: var(--stika); } .fish-login-preview .preview-count {font-size: 3.6rem;font-weight: 800;color: var(--head); } .fish-login-preview .preview-actions {display: grid;grid-template-columns: repeat(3, 1fr);gap: 12px;max-width: 760px;margin: 20px auto; } .fish-login-preview .preview-action {background: #fff;border-radius: 16px;padding: 20px 8px;text-align: center;font-weight: 750;box-shadow: var(--shadow-sm); } .fish-login-shade {position: fixed;inset: 0;background: linear-gradient(180deg, rgba(8, 25, 47, 0.12), rgba(8, 25, 47, 0.5)); } .fish-login-layer {position: relative;z-index: 2;width: 100%;min-height: 100dvh;display: grid;place-items: center;padding: 24px;overflow-y: auto; } .fish-login-card {width: min(100%, 430px);background: rgba(255, 255, 255, 0.97);border: 1px solid rgba(255, 255, 255, 0.8);border-radius: 24px;padding: 28px;box-shadow: 0 28px 70px -20px rgba(3, 13, 29, 0.75);backdrop-filter: blur(18px); } .fish-login-card .login-mark {width: 56px;height: 56px;margin: 0 auto 14px;border-radius: 18px;background: var(--navy);color: #fff;display: grid;place-items: center; } .fish-login-card .login-mark .fish {width: 39px; } .fish-login-card h1 {text-align: center;color: var(--head);font-size: 1.55rem;margin: 0; } .fish-login-card .login-lead {text-align: center;color: var(--muted);font-size: 0.9rem;margin: 7px 0 24px; } .fish-login-message {margin: 0 0 16px;padding: 11px 13px;border-radius: 11px;background: #fff1f0;border: 1px solid #f4c7c3;color: #9f241b;font-size: 0.84rem;font-weight: 650; } .fish-login-card form > div:not(.login-actions) {margin-bottom: 15px; } .fish-login-card label {display: block;margin: 0 0 6px;color: var(--ink);font-size: 0.86rem;font-weight: 750; } .fish-login-card input[type=text], .fish-login-card input[type=email], .fish-login-card input[type=password] {display: block;width: 100%;min-height: 50px;border: 1px solid #cdd9e4;border-radius: 13px;background: #f7fafc;color: var(--ink);padding: 10px 14px;font: inherit;user-select: text; } .fish-login-card input:focus {outline: none;border-color: var(--okoun);background: #fff;box-shadow: 0 0 0 4px var(--okoun-soft); } .fish-login-card .helptext {display: block;margin-top: 5px;color: var(--muted);font-size: 0.78rem; } .fish-login-card ul.errorlist {list-style: none;color: #b42318;font-size: 0.82rem;margin: 0 0 6px;padding: 0; } .fish-login-submit {width: 100%;min-height: 51px;border: 0;border-radius: 14px;background: var(--navy);color: #fff;font: inherit;font-weight: 800;cursor: pointer;box-shadow: var(--shadow-sm); } .fish-login-submit:hover {background: var(--navy2); } .fish-login-links {display: flex;justify-content: space-between;gap: 16px;margin-top: 18px;font-size: 0.85rem; } .fish-login-links a, .fish-socials a {color: var(--navy);font-weight: 700;text-decoration: none; } .fish-socials {margin-top: 18px;padding-top: 18px;border-top: 1px solid var(--hair);display: grid;gap: 9px;text-align: center; } .fish-socials form {margin: 0; } .fish-socials button {border: 1px solid var(--hair);border-radius: 12px;background: #fff;color: var(--navy);padding: 10px 14px;font: inherit;font-weight: 700;cursor: pointer; } @media (max-width: 520px) {.fish-login-layer {padding: 16px;}.fish-login-card {padding: 24px 20px;border-radius: 21px;}.fish-login-preview .brand span, .fish-login-preview .day {display: none;} }