/* Step 61 — glassmorphism + neumorphism on the sign-up and sign-in pages.
   The colours are the brand's own (paper #FAFBF9, navy #000E36, emerald #12B886 / #0FA47F, blue #0064BD);
   only depth is added: frosted glass cards, soft raised / pressed surfaces, icons inside the fields,
   a glow on the field being typed in, and a show / hide password eye. */

/* Glass: a frosted, see-through card with a light edge. */
body.gd-auth .card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .56)) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .85) !important;
    box-shadow: 0 30px 70px -34px rgba(0, 14, 54, .38), 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(0, 14, 54, .04) !important;
    border-radius: 28px !important;
}
body.gd-auth .gd-auth__blob { opacity: .62; }

/* Neumorphism: fields pressed into the surface. */
body.gd-auth .form-control, body.gd-auth .form-select {
    background-color: #FAFBF9 !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    box-shadow: inset 4px 4px 9px rgba(0, 14, 54, .08), inset -4px -4px 9px rgba(255, 255, 255, .95) !important;
    transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
body.gd-auth .form-control:focus, body.gd-auth .form-select:focus {
    background-color: #FFFFFF !important;
    border-color: rgba(18, 184, 134, .55) !important;
    box-shadow: inset 2px 2px 5px rgba(0, 14, 54, .06), inset -2px -2px 5px rgba(255, 255, 255, .95), 0 0 0 4px rgba(18, 184, 134, .16), 0 0 22px -4px rgba(18, 184, 134, .45) !important;
}
body.gd-auth input[type="file"].form-control { padding-top: .45rem; }
body.gd-auth .form-control::file-selector-button { border: 0; border-radius: 10px; margin-right: .6rem; background: #FFFFFF; box-shadow: 3px 3px 7px rgba(0, 14, 54, .1), -3px -3px 7px #fff; }

/* Neumorphism: raised buttons that press in. */
body.gd-auth .btn { transition: transform .15s ease, box-shadow .2s ease; }
body.gd-auth .btn-primary, body.gd-auth .btn-success {
    box-shadow: 6px 6px 16px rgba(0, 14, 54, .18), -5px -5px 14px rgba(255, 255, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
body.gd-auth .btn-primary:hover, body.gd-auth .btn-success:hover { transform: translateY(-1px); box-shadow: 8px 10px 22px rgba(0, 14, 54, .22), -5px -5px 14px rgba(255, 255, 255, .95) !important; }
body.gd-auth .btn-primary:active, body.gd-auth .btn-success:active { transform: translateY(1px); box-shadow: inset 4px 4px 10px rgba(0, 14, 54, .28), inset -2px -2px 6px rgba(255, 255, 255, .2) !important; }
body.gd-auth .btn-outline-primary, body.gd-auth .btn-outline-secondary, body.gd-auth .btn-light {
    background: #FAFBF9; border-color: rgba(255, 255, 255, .9) !important;
    box-shadow: 5px 5px 12px rgba(0, 14, 54, .1), -5px -5px 12px rgba(255, 255, 255, .95) !important;
}
body.gd-auth .btn-outline-primary:active, body.gd-auth .btn-outline-secondary:active { box-shadow: inset 3px 3px 8px rgba(0, 14, 54, .12), inset -3px -3px 8px #fff !important; }

/* Icons inside the fields (left), like the reference designs. */

body.gd-auth input[name="first_name"].form-control, body.gd-auth input[name="last_name"].form-control, body.gd-auth input[name="name"].form-control, body.gd-auth input[name="identifier"].form-control, body.gd-auth input[autocomplete="name"].form-control { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355607D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-7%208-7s8%203%208%207%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="first_name"].form-control:focus, body.gd-auth input[name="last_name"].form-control:focus, body.gd-auth input[name="name"].form-control:focus, body.gd-auth input[name="identifier"].form-control:focus, body.gd-auth input[autocomplete="name"].form-control:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2312B886%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-7%208-7s8%203%208%207%22/%3E%3C/svg%3E"); }
body.gd-auth input[type="email"].form-control { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355607D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22/%3E%3C/svg%3E"); }
body.gd-auth input[type="email"].form-control:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2312B886%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22/%3E%3C/svg%3E"); }
body.gd-auth input[type="password"].form-control { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355607D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22/%3E%3C/svg%3E"); }
body.gd-auth input[type="password"].form-control:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2312B886%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="phone"].form-control, body.gd-auth input[type="tel"].form-control, body.gd-auth input[name="destination"].form-control { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355607D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202z%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="phone"].form-control:focus, body.gd-auth input[type="tel"].form-control:focus, body.gd-auth input[name="destination"].form-control:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2312B886%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202z%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="school_name"].form-control { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355607D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18M5%2021V10l7-5%207%205v11%22/%3E%3Cpath%20d%3D%22M10%2021v-5h4v5%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="school_name"].form-control:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2312B886%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18M5%2021V10l7-5%207%205v11%22/%3E%3Cpath%20d%3D%22M10%2021v-5h4v5%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="district"].form-control, body.gd-auth input[name="districts"].form-control, body.gd-auth input[name="location"].form-control { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355607D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-6.2-7-11a7%207%200%200%201%2014%200c0%204.8-7%2011-7%2011z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="district"].form-control:focus, body.gd-auth input[name="districts"].form-control:focus, body.gd-auth input[name="location"].form-control:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2312B886%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-6.2-7-11a7%207%200%200%201%2014%200c0%204.8-7%2011-7%2011z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="org_partner"].form-control, body.gd-auth input[name="position"].form-control { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355607D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%207V5a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="org_partner"].form-control:focus, body.gd-auth input[name="position"].form-control:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2312B886%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%207V5a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="reg_number"].form-control, body.gd-auth input[name="centre_number"].form-control { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355607D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2211%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M14%2010h4M14%2014h4M6%2016c.6-1.3%201.7-2%203-2s2.4.7%203%202%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="reg_number"].form-control:focus, body.gd-auth input[name="centre_number"].form-control:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2312B886%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2211%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M14%2010h4M14%2014h4M6%2016c.6-1.3%201.7-2%203-2s2.4.7%203%202%22/%3E%3C/svg%3E"); }
body.gd-auth input[name="first_name"].form-control, body.gd-auth input[name="last_name"].form-control, body.gd-auth input[name="name"].form-control, body.gd-auth input[name="identifier"].form-control, body.gd-auth input[autocomplete="name"].form-control, body.gd-auth input[type="email"].form-control, body.gd-auth input[type="password"].form-control, body.gd-auth input[name="phone"].form-control, body.gd-auth input[type="tel"].form-control, body.gd-auth input[name="destination"].form-control, body.gd-auth input[name="school_name"].form-control, body.gd-auth input[name="district"].form-control, body.gd-auth input[name="districts"].form-control, body.gd-auth input[name="location"].form-control, body.gd-auth input[name="org_partner"].form-control, body.gd-auth input[name="position"].form-control, body.gd-auth input[name="reg_number"].form-control, body.gd-auth input[name="centre_number"].form-control { background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }

/* Show / hide password (added by auth-ui.js). */
body.gd-auth .gd-pw { position: relative; }
body.gd-auth .gd-pw .form-control { padding-right: 46px !important; }
body.gd-auth .gd-pw__eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent;
    display: inline-flex; align-items: center; justify-content: center; color: #55607D; cursor: pointer; }
body.gd-auth .gd-pw__eye:hover { color: #0FA47F; background: rgba(18, 184, 134, .08); }
body.gd-auth .gd-pw__eye:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(18, 184, 134, .35); }
body.gd-auth .gd-pw__eye[aria-pressed="true"] { color: #0FA47F; box-shadow: inset 2px 2px 5px rgba(0, 14, 54, .1), inset -2px -2px 5px #fff; }

/* The dark side panel: glass layers on the navy. */
.gd-join__left { position: relative; isolation: isolate; border: 1px solid rgba(255, 255, 255, .1); }
.gd-join__left::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background: radial-gradient(60% 40% at 0% 100%, rgba(0, 100, 189, .35), transparent 70%); }
.gd-join__left::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.gd-join__slides { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: 22px 22px 46px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
.gd-join__dots { left: 22px; bottom: 18px; }
.gd-join__video { padding: 8px; border-radius: 26px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.gd-join__video video, .gd-join__video iframe { border-radius: 19px; }
.gd-join__kicker { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(126, 226, 192, .28); }
.gd-join__chips span { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.gd-join__icon { box-shadow: 0 12px 24px -12px rgba(18, 184, 134, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* "Who are you?" — raised soft cards that press in. */
body.gd-auth .gd-join-choice { background: #FAFBF9; border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 8px 8px 20px rgba(0, 14, 54, .09), -8px -8px 20px rgba(255, 255, 255, .95); }
body.gd-auth .gd-join-choice:hover, body.gd-auth .gd-join-choice:focus { border-color: rgba(18, 184, 134, .45);
    box-shadow: 12px 14px 28px rgba(0, 14, 54, .12), -8px -8px 20px rgba(255, 255, 255, .95), 0 0 0 4px rgba(18, 184, 134, .1); }
body.gd-auth .gd-join-choice:active { transform: translateY(0); box-shadow: inset 6px 6px 14px rgba(0, 14, 54, .1), inset -6px -6px 14px #fff; }
body.gd-auth .gd-join-choice__icon { background: #FAFBF9; box-shadow: 5px 5px 12px rgba(0, 14, 54, .1), -5px -5px 12px #fff, inset 0 0 0 1px rgba(255, 255, 255, .9); }

/* Alerts as frosted glass. */
body.gd-auth .alert { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 10px 24px -18px rgba(0, 14, 54, .35); }

/* Browsers without backdrop blur get a solid card, so text always stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.gd-auth .card { background: #FFFFFF !important; }
}
@media (prefers-reduced-motion: reduce) { body.gd-auth .btn, body.gd-auth .gd-join-choice { transition: none; } }

/* Phones: the slides sit on the page itself, so they keep their solid navy (white text stays readable). */
@media (max-width: 991.98px) {
    .gd-join__slides { background: linear-gradient(180deg, #000E36, #0A1E5C); border: 0; border-radius: 0 0 24px 24px; padding: 6px 22px 46px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 24px 40px -30px rgba(0, 14, 54, .6); }
    .gd-join__video { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .9); box-shadow: 0 18px 40px -28px rgba(0, 14, 54, .5); }
}

/* A shown password keeps its lock icon. */
body.gd-auth .gd-pw .form-control { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355607D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px; padding-left: 42px !important; }
body.gd-auth .gd-pw .form-control:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2312B886%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22/%3E%3C/svg%3E"); }

/* Step 64 — forms you can see. The page is a soft dimmed white, the form card is solid white with a coloured
   top edge, and every field has a light tint of its form's colour (school = emerald, parent = blue,
   counsellor = teal, partner = navy) with a clear border — so fields never melt into the card or the page.
   Only the brand's own colours are used. */
body.gd-auth { --f-rgb: 15, 164, 127; }
body.gd-form--parent { --f-rgb: 0, 100, 189; }
body.gd-form--counsellor { --f-rgb: 14, 158, 154; }
body.gd-form--partner { --f-rgb: 0, 14, 54; }
body.gd-auth {
    background:
        radial-gradient(60% 50% at 10% 10%, rgba(20, 184, 138, .16) 0%, rgba(20, 184, 138, 0) 70%),
        radial-gradient(50% 45% at 95% 90%, rgba(31, 111, 209, .12) 0%, rgba(31, 111, 209, 0) 70%),
        #EFF3F7 !important;
}
body.gd-auth .card {
    background: linear-gradient(180deg, rgba(var(--f-rgb), .07) 0, rgba(255, 255, 255, .97) 150px, rgba(255, 255, 255, .97) 100%) !important;
    border: 1px solid rgba(var(--f-rgb), .16) !important;
    box-shadow: inset 0 5px 0 rgb(var(--f-rgb)), 0 30px 70px -34px rgba(0, 14, 54, .38), 0 0 0 1px rgba(0, 14, 54, .03) !important;
}
body.gd-auth .form-control, body.gd-auth .form-select {
    background-color: rgba(var(--f-rgb), .07) !important;
    border: 1.5px solid rgba(var(--f-rgb), .28) !important;
    color: #000E36;
}
body.gd-auth .form-control::placeholder { color: #55607D; opacity: .8; }
body.gd-auth .form-control:hover, body.gd-auth .form-select:hover { border-color: rgba(var(--f-rgb), .5) !important; }
body.gd-auth .form-control:focus, body.gd-auth .form-select:focus {
    background-color: #FFFFFF !important;
    border-color: rgb(var(--f-rgb)) !important;
    box-shadow: 0 0 0 4px rgba(var(--f-rgb), .16), 0 0 20px -6px rgba(var(--f-rgb), .55) !important;
}
body.gd-auth .form-label { color: #000E36; }
body.gd-auth .gd-codeby__opt { background: rgba(var(--f-rgb), .05); border-color: rgba(var(--f-rgb), .25); }
body.gd-auth .btn-check:checked + .gd-codeby__opt { background: rgba(var(--f-rgb), .12); border-color: rgb(var(--f-rgb)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.gd-auth .card { background: #FFFFFF !important; }
}

/* Step 65 — the top of "Sign up your school": a title with its badge, the three steps as small raised cards,
   the price as a highlighted strip, and section headings with an icon and a line. Brand colours only. */
.gd-jhead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.gd-jhead__badge { flex: none; width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF; background: linear-gradient(135deg, #12B886, #0FA47F 45%, #0064BD);
    box-shadow: 0 12px 24px -12px rgba(15, 164, 127, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gd-jhead__title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: #000E36; margin: 2px 0 6px; }
.gd-jhead__lead { font-size: .95rem; line-height: 1.55; color: #55607D; margin: 0; }
.gd-jsteps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: none; }
.gd-jsteps__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 14px 12px; border-radius: 16px;
    background: #FFFFFF; border: 1px solid rgba(var(--f-rgb), .2);
    box-shadow: 6px 8px 18px -12px rgba(0, 14, 54, .25), -4px -4px 12px -8px #FFFFFF; }
.gd-jsteps__item + .gd-jsteps__item::before { content: ""; position: absolute; left: -10px; top: 31px; width: 10px; height: 2px; background: rgba(var(--f-rgb), .45); }
.gd-jsteps__num { position: absolute; top: 10px; right: 12px; font-size: .72rem; font-weight: 800; color: rgb(var(--f-rgb)); opacity: .55; }
.gd-jsteps__icon { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    color: rgb(var(--f-rgb)); background: rgba(var(--f-rgb), .1); box-shadow: inset 2px 2px 5px rgba(0, 14, 54, .06), inset -2px -2px 5px #FFFFFF; }
.gd-jsteps__text { font-size: .84rem; font-weight: 600; line-height: 1.35; color: #000E36; }
.gd-jprice { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 22px; border-radius: 18px;
    background: linear-gradient(120deg, rgba(15, 164, 127, .12), rgba(0, 100, 189, .1)); border: 1px solid rgba(15, 164, 127, .3); }
.gd-jprice__icon { flex: none; width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF;
    background: linear-gradient(135deg, #0FA47F, #0064BD); box-shadow: 0 10px 18px -10px rgba(0, 100, 189, .7); }
.gd-jprice__figs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: #000E36; font-size: .9rem; }
.gd-jprice__fig strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.gd-jprice__plus { font-weight: 800; color: #0FA47F; }
.gd-jprice__note { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .8rem; color: #55607D; }
.gd-jprice__note svg { color: #0FA47F; }
.gd-jsec { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-size: 1rem; font-weight: 800; color: #000E36; }
.gd-jsec::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--f-rgb), .45), rgba(var(--f-rgb), 0)); }
.gd-jsec__icon { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--f-rgb)); background: rgba(var(--f-rgb), .12); }
form > .gd-jsec:first-of-type { margin-top: 4px; }
@media (max-width: 575px) {
    .gd-jsteps { grid-template-columns: 1fr; }
    .gd-jsteps__item { flex-direction: row; align-items: center; }
    .gd-jsteps__item + .gd-jsteps__item::before { display: none; }
    .gd-jhead__title { font-size: 1.25rem; }
}
body.gd-auth .gd-jhead__title { font-weight: 800 !important; font-size: 1.5rem; color: #000E36; }
body.gd-auth h2.gd-jsec { font-weight: 800 !important; font-size: 1.02rem; }
.gd-jsteps__item { padding-right: 26px; }
@media (max-width: 575px) { body.gd-auth .gd-jhead__title { font-size: 1.25rem; } .gd-jhead__badge { width: 46px; height: 46px; border-radius: 15px; } }