/* Login and register — same green-gold farm card as the reference screens */

body.gn-auth-page {
    margin: 0;
    color: #fff8e6;
    background: #06351c url('../images/home/farm.jpg') center 40% / cover no-repeat fixed;
}

body.gn-auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 30, 16, 0.55), rgba(4, 28, 16, 0.78));
}

body.gn-auth-page .page-bg,
body.gn-auth-page .ir-nav,
body.gn-auth-page .site-footer {
    display: none !important;
}

body.gn-auth-page .navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(6, 40, 22, 0.92);
    border-bottom: 1px solid rgba(240, 193, 74, 0.55);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

body.gn-auth-page .brand-logo {
    object-fit: cover !important;
    padding: 0 !important;
    background: #8a4e12 !important;
    border-radius: 50%;
}

body.gn-auth-page .brand-name,
body.gn-auth-page .brand-name-full,
body.gn-auth-page .brand-name-short {
    color: #fff6d4 !important;
    -webkit-text-fill-color: #fff6d4 !important;
    background: none !important;
}

body.gn-auth-page .brand-sub { color: #ffe08a; letter-spacing: 0.14em; }

body.gn-auth-page .brand { flex: 0 1 auto; }
body.gn-auth-page .brand-name-full { display: none; }
body.gn-auth-page .brand-name-short { display: inline; }

body.gn-auth-page .nav-links { gap: 4px; }

@media (max-width: 430px) {
    body.gn-auth-page .brand-text { display: none; }
    body.gn-auth-page .nav-link { padding: 8px 11px; }
}

body.gn-auth-page .nav-link {
    padding: 8px 10px;
    min-height: 36px;
    color: #fff6d4;
    font-size: 0.78rem;
    font-weight: 800;
}

body.gn-auth-page .nav-link.is-on,
body.gn-auth-page .nav-link:hover {
    background: linear-gradient(180deg, #ffe08a, #e0a82a);
    color: #12351f;
}

.gn-auth {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    margin: 0 auto;
    min-height: calc(100dvh - 72px);
    padding: 96px 0 28px;
    background: transparent;
}

.gn-sky i,
.gn-sky b {
    position: absolute;
    display: block;
}

.gn-sky i {
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 22px solid #0d4e28;
    top: 28px;
}

.gn-sky i::after {
    content: '';
    position: absolute;
    left: -14px;
    top: 18px;
    width: 28px;
    height: 18px;
    background: #8d5a2b;
    border-radius: 2px 2px 0 0;
}

.gn-sky i:first-child { left: 28px; }
.gn-sky i:nth-child(2) { right: 36px; top: 18px; }

.gn-sky b {
    width: 34px;
    height: 46px;
    border-radius: 20px 20px 4px 4px;
    background: #0e5a30;
    top: 46px;
}

.gn-sky b:nth-child(3) { left: 18%; }
.gn-sky b:nth-child(4) { right: 16%; top: 36px; height: 54px; }

.gn-logo {
    position: absolute;
    left: 50%;
    top: -78px;
    z-index: 3;
    width: min(158px, 44vw);
    transform: translateX(-50%);
}

.gn-logo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 32px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.gn-card {
    position: relative;
    z-index: 2;
    margin: 0 14px;
    padding: 86px 14px 16px;
    border-radius: 30px;
    background:
        radial-gradient(90px 50px at 8% 0%, rgba(120, 200, 110, 0.2), transparent 70%),
        radial-gradient(90px 50px at 92% 0%, rgba(120, 200, 110, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(16, 110, 58, 0.96), #084428 55%, #06341e);
    border: 1.5px solid rgba(240, 193, 74, 0.85);
    box-shadow:
        0 0 0 1px rgba(255, 230, 150, 0.18) inset,
        0 0 22px rgba(240, 193, 74, 0.22);
    animation: gnCardGlow 3.2s ease-in-out infinite;
}

.gn-card h1 {
    display: block;
}

.gn-badge {
    position: absolute;
    top: -28px;
    left: 50%;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border-radius: 18px;
    background: radial-gradient(circle at 40% 30%, #146b3c, #06351c);
    border: 2px solid #ffe08a;
    box-shadow: 0 0 18px rgba(240, 193, 74, 0.7);
    color: #fff6d4;
}

.gn-badge svg,
.gn-ico svg,
.gn-eye svg,
.gn-submit svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gn-card h1 {
    margin: 0;
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #f0c14a;
}

.gn-card h1 span { color: #f0c14a; }

.gn-card > p,
.gn-ref {
    margin: 8px auto 16px;
    max-width: 30ch;
    text-align: center;
    color: rgba(255, 248, 230, 0.86);
    font-size: 0.92rem;
    line-height: 1.4;
}

.gn-card > p::after,
.gn-ref::after {
    content: '';
    display: block;
    width: 72px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #f0c14a, transparent);
}

.gn-ref { color: #ffe08a; }
.gn-ref strong { color: #fff; }

.gn-saved[hidden] { display: none !important; }

.gn-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 18px;
    background: #fff8e6;
    border: 1.5px solid #e7c56a;
    box-shadow: none;
}

.gn-pick {
    min-height: 46px;
    border-radius: 14px;
    background: rgba(255, 248, 230, 0.16);
    border-color: rgba(240, 193, 74, 0.7);
}

.gn-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.gn-copy strong {
    color: #143226;
    font-size: 0.92rem;
    line-height: 1.1;
}

.gn-ico {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #0e6b38;
    border-radius: 12px;
    background: #e7f6ea;
}

.gn-ico svg { width: 20px; height: 20px; }

.gn-field input,
.gn-field select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #5c6b62;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
}

.gn-field input::placeholder { color: #8a948c; }

.gn-field:focus-within {
    border-color: #ffe08a;
    box-shadow: 0 0 0 3px rgba(240, 193, 74, 0.18);
}

.gn-field select {
    color: #fff8e6;
    appearance: none;
    font-size: 0.86rem;
}

.gn-eye {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(240, 193, 74, 0.45);
    border-radius: 50%;
    background: rgba(4, 32, 18, 0.45);
    color: #ffe08a;
    cursor: pointer;
}

.gn-eye svg { width: 22px; height: 22px; }

.gn-row,
.gn-agree {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 2px 4px 12px;
    color: #fff8e6;
    font-size: 0.78rem;
    font-weight: 700;
}

.gn-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gn-agree { justify-content: flex-start; margin-bottom: 12px; }

.gn-check input { accent-color: #f0c14a; }

.gn-row a,
.gn-switch a {
    color: #ffe08a;
    font-weight: 800;
    text-decoration: none;
}

.gn-forgot {
    flex: 0 0 auto;
    margin-left: 8px;
    color: #f0c14a;
    white-space: nowrap;
    font-size: 0.78rem;
}

.auth-msg:empty { display: none; }

.gn-card .auth-msg {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(180, 40, 40, 0.18);
    color: #ffd0d0;
    font-size: 0.82rem;
    font-weight: 700;
}

.gn-submit {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #1a1204;
    background: linear-gradient(180deg, #ffe27a, #f0c14a 45%, #e0a82a);
    box-shadow: 0 8px 0 #a97812, 0 12px 20px rgba(0, 0, 0, 0.25);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 800;
}

.gn-submit > svg { display: none; }

.gn-submit i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #12351f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe08a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M14 7l5 5-5 5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.gn-submit:disabled { opacity: 0.7; cursor: wait; }

.gn-switch {
    margin: 14px 0 4px;
    text-align: center;
    color: rgba(255, 248, 230, 0.8);
    font-size: 0.86rem;
    font-weight: 700;
}

@media (min-width: 700px) {
    .gn-auth { padding-top: 108px; }
    .gn-logo { width: 176px; top: -88px; }
}

@keyframes gnCardGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 230, 150, 0.18) inset, 0 0 16px rgba(240, 193, 74, 0.16); }
    50% { box-shadow: 0 0 0 1px rgba(255, 230, 150, 0.28) inset, 0 0 28px rgba(240, 193, 74, 0.38); }
}

@media (prefers-reduced-motion: reduce) {
    .gn-card { animation: none; }
}

/* Register — the farm poster is the page. Real fields sit on the painted inputs. */

body.auth-register-page {
    background: #0c3d22;
}

body.auth-register-page::before {
    display: none;
}

body.auth-register-page .navbar {
    display: none !important;
}

.rg-stage {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    margin: 0 auto;
}

.rg-frame {
    position: relative;
}

.rg-art {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.rg-back {
    position: absolute;
    left: 2.4%;
    top: 4.7%;
    z-index: 4;
    width: 12%;
    height: 8%;
    border-radius: 50%;
}

.rg-form {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.rg-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.rg-field {
    position: absolute;
    left: 19.35%;
    width: 61.3%;
    height: 6.15%;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 34% 0 18%;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
}

.rg-user { top: 35.9%; }
.rg-phone { top: 43.75%; }
.rg-pass { top: 51.55%; padding-right: 42%; }

body.auth-register-page .rg-field.field-box,
body.auth-register-page .rg-field.field-box:focus-within {
    min-height: 0;
    gap: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
}

.rg-ico,
.rg-ur { display: none; }

.rg-field input {
    position: absolute;
    left: 18%;
    top: 18%;
    width: 44%;
    height: 64%;
    border: 0;
    outline: 0;
    background: transparent !important;
    color: #1a3328;
    font: inherit;
    font-size: clamp(11px, 3.1vw, 15px);
    font-weight: 700;
}

.rg-field input:not(:placeholder-shown) {
    background: #fffdf8 !important;
    border-radius: 8px;
    padding: 0 6px;
}

.rg-field input::placeholder { color: transparent; }

.rg-eye {
    position: absolute;
    right: 3%;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

.rg-eye svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.rg-agree {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff6d4;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
}

.rg-agree input {
    accent-color: #f0c14a;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.rg-form .auth-msg {
    position: absolute;
    left: 14%;
    width: 72%;
    top: 31.2%;
    z-index: 5;
    text-align: center;
}

.rg-go {
    position: absolute;
    left: 22.5%;
    width: 55%;
    top: 63.2%;
    height: 5.15%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 34px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #1a2744;
    background: linear-gradient(180deg, #ffe98a 0%, #f6c43a 48%, #e7ae22 100%);
    box-shadow: 0 5px 0 #c48912, 0 10px 16px rgba(0, 0, 0, 0.22);
    font: inherit;
    font-size: clamp(0.82rem, 3.5vw, 1.05rem);
    font-weight: 800;
}

.rg-go svg {
    position: absolute;
    left: 10px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rg-go i {
    position: absolute;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #12351f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe08a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M14 7l5 5-5 5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.rg-go:disabled { opacity: 0.75; cursor: wait; }

.rg-ref {
    position: absolute;
    left: 50%;
    top: 31.4%;
    transform: translateX(-50%);
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(6, 40, 18, 0.72);
    color: #ffe08a;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.rg-login {
    margin: 0;
    padding: 42px 16px 22px;
    text-align: center;
    color: #fff6d4;
    font-size: 0.88rem;
    font-weight: 700;
}

.rg-login a {
    color: #ffe08a;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 380px) {
    .rg-ur { display: none; }
    .rg-agree { font-size: 0.62rem; }
}

/* Shared farm navbar + hanging sign for login and register */

body.gn-auth-page,
body.auth-register-page {
    overflow-x: hidden;
    background: #1d6a34 url('../images/home/farm.jpg') center 38% / cover no-repeat fixed !important;
}

body.gn-auth-page::before,
body.auth-register-page::before {
    display: block !important;
    background:
        linear-gradient(180deg, rgba(6, 42, 20, 0.82) 0 78px, rgba(8, 48, 18, 0.18) 180px, rgba(5, 32, 14, 0.55) 100%) !important;
}

body.gn-auth-page .navbar,
body.auth-register-page .navbar {
    display: none !important;
}

.fx-auth {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.fx-auth * {
    max-width: 100%;
}

.fx-sky {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.fx-sky i {
    position: absolute;
    top: -12vh;
    width: 16px;
    height: 11px;
    background: linear-gradient(135deg, #b6e36a, #3d9a3a);
    border-radius: 0 80% 0 80%;
    opacity: 0.8;
    animation: fxLeaf 10s linear infinite;
}

.fx-sky i:nth-child(1) { left: 6%; animation-duration: 11s; }
.fx-sky i:nth-child(2) { left: 28%; animation-duration: 13s; animation-delay: -4s; width: 12px; }
.fx-sky i:nth-child(3) { left: 70%; animation-duration: 9s; animation-delay: -2s; }
.fx-sky i:nth-child(4) { left: 88%; animation-duration: 12s; animation-delay: -6s; width: 13px; }

.fx-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-height: 58px;
    padding: 8px;
    background: linear-gradient(180deg, #0d532c, #08381c);
    border-bottom: 2px solid #e7c56a;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.fx-back {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff8e4;
    background: radial-gradient(circle at 40% 35%, #1c7a40, #0c4a26);
    border: 2px solid #f0c14a;
    box-shadow: 0 0 12px rgba(240, 193, 74, 0.45);
}

.fx-back svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fx-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.fx-words {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fx-words em {
    color: #fff6d8;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.72rem;
    line-height: 1.05;
}

.fx-brand img {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    object-fit: cover;
    object-position: center 18%;
    border-radius: 50%;
    border: 2px solid #f0c14a;
    box-shadow: 0 0 0 2px rgba(8, 40, 18, 0.4);
}

.fx-name {
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.86rem;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #f0c14a;
}

.fx-name span { color: #fff8e6; }

.fx-brand small {
    display: block;
    margin-top: 3px;
    color: #ffe7a4;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.fx-tag {
    text-align: right;
    color: #fff6d8 !important;
    -webkit-text-fill-color: #fff6d8 !important;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.68rem;
    line-height: 1.05;
}

.fx-tag b {
    color: #f0c14a;
    font-style: normal;
    animation: fxHeart 1.6s ease-in-out infinite;
}

.fx-hang {
    position: relative;
    z-index: 3;
    width: min(420px, calc(100% - 28px));
    max-width: calc(100% - 28px);
    min-width: 0;
    margin: 22px auto 28px;
    transform-origin: top center;
    animation: fxSway 5.5s ease-in-out infinite;
}

.fx-ropes {
    display: flex;
    justify-content: space-between;
    width: 62%;
    height: 28px;
    margin: 0 auto -6px;
}

.fx-ropes i {
    width: 3px;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(#e7c98a, #6a4520);
    box-shadow: 0 0 0 1px rgba(90, 50, 16, 0.35);
}

.fx-board {
    position: relative;
    padding: 8px 16px 16px;
    border-radius: 28px;
    background:
        radial-gradient(120px 40px at 12% 0%, rgba(170, 220, 110, 0.2), transparent 70%),
        radial-gradient(120px 40px at 88% 0%, rgba(170, 220, 110, 0.16), transparent 70%),
        linear-gradient(180deg, #14844a 0%, #0c5a30 42%, #084426 100%);
    border: 2px solid #f0c14a;
    box-shadow:
        0 0 0 1px rgba(255, 232, 160, 0.25) inset,
        0 0 26px rgba(240, 193, 74, 0.35),
        0 18px 30px rgba(0, 0, 0, 0.28);
}

.fx-wood {
    position: relative;
    width: min(300px, 92%);
    margin: -22px auto 8px;
    padding: 8px 18px 10px;
    text-align: center;
    color: #ffe7a3;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.35rem, 5.4vw, 1.9rem);
    line-height: 1.05;
    background: linear-gradient(180deg, #a56b32, #6d431c 55%, #4e3014);
    border: 2px solid #f0d090;
    border-radius: 6px 6px 16px 16px;
    box-shadow: 0 7px 0 #3d2610, 0 12px 16px rgba(0, 0, 0, 0.28);
}

.fx-wood::after {
    content: '';
    position: absolute;
    top: -8px;
    right: 18px;
    width: 16px;
    height: 10px;
    background: #7dbe4a;
    border-radius: 0 80% 0 80%;
    transform: rotate(28deg);
}

.fx-urdu,
.fx-lead {
    margin: 0 0 8px;
    text-align: center;
}

.fx-urdu {
    color: #ffe08a;
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 1.15rem;
    line-height: 1.8;
}

.fx-lead {
    color: rgba(255, 248, 230, 0.9);
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 0 8px;
    overflow-wrap: anywhere;
}

.fx-lead::after {
    content: '';
    display: block;
    width: 92px;
    height: 2px;
    margin: 8px auto 0;
    background: linear-gradient(90deg, transparent, #f0c14a, transparent);
}

.fx-ref {
    margin: 0 0 8px;
    text-align: center;
    color: #ffe08a;
    font-size: 0.78rem;
    font-weight: 800;
}

.fx-field,
body.gn-auth-page .fx-field.field-box,
body.gn-auth-page .fx-field.field-box:focus-within {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    margin: 0 0 10px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    background: #fffdf8;
    border: 1.5px solid #e6c56a;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    transform: none;
}

.fx-ico {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0f7a3c;
    color: #fff;
}

.fx-ico svg,
.fx-eye svg,
.fx-go svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fx-field input,
body.gn-auth-page .fx-field.field-box input {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    height: auto;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1c3328;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
}

.fx-field input::placeholder { color: #8d9992; }

.fx-ur {
    flex: 0 0 auto;
    color: #157a3e;
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
}

.fx-eye {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #146b38;
    cursor: pointer;
}

.fx-saved {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 12px;
}

.fx-saved > span {
    color: #ffe08a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fx-saved select {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid #f0c14a;
    background: rgba(255, 248, 230, 0.16);
    color: #fff8e6;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
}

.fx-row,
.fx-agree {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 4px 12px;
    color: #fff8e6;
    font-size: 0.75rem;
    font-weight: 800;
}

.fx-row {
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 4px;
}
.fx-check { display: flex; align-items: center; gap: 6px; }
.fx-check input,
.fx-agree input { accent-color: #f0c14a; flex: 0 0 auto; }

.fx-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px 4px;
    color: #fff8e6;
    font-size: 0.78rem;
    font-weight: 800;
}

.fx-forgot {
    display: block;
    margin: 0 4px 12px;
    color: #ffe08a;
    font-weight: 800;
    font-size: 0.78rem;
    text-decoration: none;
    text-align: left;
}

.fx-board .auth-msg {
    margin: 0 0 10px;
    text-align: center;
}

.fx-go {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 42px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #1a2744;
    background: linear-gradient(180deg, #ffe98a, #f3c23a 46%, #e2a820);
    box-shadow: 0 5px 0 #b8860b, 0 12px 18px rgba(0, 0, 0, 0.24);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
}

.fx-go svg { position: absolute; left: 16px; width: 18px; height: 18px; }

.fx-go i {
    position: absolute;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #12351f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe08a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M14 7l5 5-5 5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.fx-go::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.55) 50%, transparent 68%);
    transform: translateX(-120%);
    animation: fxShine 2.8s ease-in-out infinite;
}

.fx-go:disabled { opacity: 0.72; cursor: wait; }

.fx-switch {
    margin: 12px 0 2px;
    text-align: center;
    color: rgba(255, 248, 230, 0.88);
    font-size: 0.84rem;
    font-weight: 700;
}

.fx-switch a {
    color: #ffe08a;
    font-weight: 800;
    text-decoration: none;
}

@keyframes fxSway {
    0%, 100% { transform: rotate(-0.6deg); }
    50% { transform: rotate(0.6deg); }
}

@keyframes fxShine {
    0%, 55% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@keyframes fxLeaf {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(120vh) rotate(280deg); }
}

@keyframes fxHeart {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

@media (max-width: 390px) {
    .fx-tag { font-size: 0.62rem; }
    .fx-name { font-size: 0.78rem; }
}

@media (max-width: 420px) {
    .fx-ur { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-hang,
    .fx-sky i,
    .fx-go::after,
    .fx-tag b { animation: none; }
}