@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');



 *,

 *::before,

 *::after {

     box-sizing: border-box;

     margin: 0;

     padding: 0;

 }



 :root {

     --bg-deep: #0d0a2e;

     --bg-mid: #130f40;

     --panel: rgba(20, 16, 60, 0.82);

     --input-bg: #1e1856;

     --border: rgba(255, 255, 255, 0.10);

     --purple: #7c3aed;

     --purple-lt: #9d6cff;

     --blue-planet: #29d4f5;

     --btn-grad: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

     --text: #ffffff;

     --muted: rgba(255, 255, 255, 0.55);

     --accent: #7c3aed;

 }



 html,

 body {

     height: 100%;

     font-family: 'Inter', sans-serif;

     color: white;

     overflow-x: hidden;

 }



 /* Background scoped only to signin page */

 body.signin-page {

     background: url('../Images/Industry-01.jpg') no-repeat center center fixed;

     background-size: cover;

 }



 /* ─── STAR CANVAS ─── */

 #stars {

     display: none;

 }



 /* ─── PLANETS (CSS) ─── */

 .planet-wrap {

     display: none;

 }



 /* big blue planet – top left on desktop, top centre on mobile */

 .planet-blue {

     top: -120px;

     left: -120px;

     width: 520px;

     height: 520px;

     border-radius: 50%;

     background: radial-gradient(circle at 38% 38%, #87e8ff 0%, #29d4f5 30%, #1a6fa8 65%, #0b3060 100%);

     box-shadow: 0 0 80px 20px rgba(41, 212, 245, 0.25);

     overflow: visible;

 }



 /* ring */

 .planet-blue::after {

     content: '';

     position: absolute;

     top: 50%;

     left: 50%;

     transform: translate(-50%, -50%) rotateX(72deg);

     width: 700px;

     height: 700px;

     border-radius: 50%;

     border: 18px solid rgba(255, 255, 255, 0.12);

     box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);

 }



 /* purple moon */

 .planet-purple {

     bottom: 90px;

     left: 50px;

     width: 180px;

     height: 180px;

     border-radius: 50%;

     background: radial-gradient(circle at 38% 35%, #d8b4fe 0%, #9d6cff 35%, #5b21b6 70%, #2e0f6e 100%);

     box-shadow: 0 0 40px 10px rgba(157, 108, 255, 0.30);

 }



 /* small purple orb */

 .planet-sm {

     bottom: 220px;

     left: 340px;

     width: 90px;

     height: 90px;

     border-radius: 50%;

     background: radial-gradient(circle at 40% 38%, #c4b5fd 0%, #7c3aed 55%, #3b0764 100%);

     box-shadow: 0 0 20px 6px rgba(124, 58, 237, 0.28);

 }



 /* shooting stars */

 .shoot {

     display: none;

 }



 .shoot:nth-child(1) {

     top: 18%;

     left: 62%;

     transform: rotate(30deg);

     animation-delay: 0s;

 }



 .shoot:nth-child(2) {

     top: 35%;

     left: 30%;

     transform: rotate(30deg);

     animation-delay: 1.6s;

 }



 .shoot:nth-child(3) {

     top: 55%;

     left: 70%;

     transform: rotate(30deg);

     animation-delay: 0.9s;

 }



 @keyframes shoot {

     0% {

         opacity: 0;

         transform: rotate(30deg) translateY(0);

     }



     10% {

         opacity: 1;

     }



     60% {

         opacity: 0.6;

     }



     100% {

         opacity: 0;

         transform: rotate(30deg) translateY(120px);

     }

 }



 /* ─── PAGE SHELLS ─── */

 .page {

     position: relative;

     z-index: 1;

     min-height: 100vh;

     display: none;

 }



 .page.active {

     display: flex;

 }



 /* ─── DESKTOP: side-by-side ─── */

 @media (min-width: 769px) {

     .page {

         flex-direction: row;

         align-items: center;
         
         justify-content: center;

     }



     .left-panel {

         flex: 1;

         display: flex;

         align-items: flex-end;

         padding: 48px;

     }



     .right-panel {

         height: 470px;

         margin-top: 70px;

         border-radius: 20px;

         width: 480px;

         display: flex;

         flex-direction: column;

         justify-content: center;

         padding: 60px 64px;

         padding-top: 0%;

         background: rgba(13, 10, 46, 0.55);

         backdrop-filter: blur(12px);

     }

 }



 /* ─── MOBILE: single column ─── */

 @media (max-width: 768px) {

     .page {

         flex-direction: column;

         align-items: stretch;

     }



     .left-panel {

         display: none;

     }



     .right-panel {

         flex: 1;

         display: flex;

         flex-direction: column;

         justify-content: flex-start;

         padding: 80px 24px 40px;

     }

 }



 /* ─── NAV BAR ─── */

 .nav {

     position: fixed;

     top: 0;

     left: 0;

     right: 0;

     z-index: 10;

     display: flex;

     align-items: center;

     justify-content: space-between;

     padding: 18px 32px;

 }



 .nav-logo {

     display: flex;

     align-items: center;

     gap: 10px;

 }



 .logo-icon {

     width: 36px;

     height: 36px;

     border: 2px solid #fff;

     display: flex;

     align-items: center;

     justify-content: center;

     font-size: 18px;

     font-weight: 900;

     clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%);

     background: transparent;

 }



 .logo-text {

     line-height: 1.1;

 }



 .logo-text strong {

     font-size: 18px;

     font-weight: 700;

     letter-spacing: 0.02em;

 }



 .logo-text span {

     font-size: 10px;

     letter-spacing: 0.25em;

     color: var(--muted);

     display: block;

 }



 .nav-link {

     font-size: 13px;

     color: var(--muted);

     cursor: pointer;

     text-decoration: none;

 }



 .nav-link strong {

     color: #fff;

     margin-left: 4px;

     font-weight: 700;

 }



 /* ─── LEFT PANEL tagline ─── */

 .tagline p {

     font-size: 36px;

     font-weight: 900;

     line-height: 1.15;

     text-transform: uppercase;

 }



 .tagline p span {

     color: var(--purple-lt);

     display: block;

 }



 /* ─── RIGHT PANEL ─── */

 .form-title {

     font-size: clamp(20px, 7vw, 28px);

     font-weight: 900;

     text-transform: uppercase;

     letter-spacing: -0.01em;

     margin-bottom: 4px;

     text-align: center;

     color: white;

     margin-top: 40px;

     /* clear fixed nav */

 }



 @media (min-width: 769px) {

     .form-title {

         margin-top: 0;

     }

 }



 .field-label {

     font-size: 13px;

     font-weight: 600;

     margin-bottom: 10px;

     display: block;

 }



 .field {

     display: flex;

     align-items: center;

     gap: 10px;

     background: var(--input-bg);

     border: 1px solid var(--border);

     border-radius: 10px;

     padding: 14px 16px;

     margin-bottom: 11px;

     transition: border-color .2s;

 }



 .field:focus-within {

     border-color: var(--purple-lt);

 }



 .field svg {

     flex-shrink: 0;

     opacity: .5;

 }



 .field input,

 .field select {

     flex: 1;

     background: none;

     border: none;

     outline: none;

     font-size: 14px;

     color: white !important;

     font-family: inherit;

 }



 /* Autofill styling override */

 input:-webkit-autofill,

 input:-webkit-autofill:hover,

 input:-webkit-autofill:focus,

 input:-webkit-autofill:active {

     -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;

     -webkit-text-fill-color: white !important;

     transition: background-color 5000s ease-in-out 0s;

 }



 .field select {

     appearance: none;

     -webkit-appearance: none;

     -moz-appearance: none;

     cursor: pointer;

     background-repeat: no-repeat;

     background-position: right 4px center;

     padding-right: 24px;

 }



 .field select option {

     background-color: var(--bg-deep);

     color: white;

 }



 .field input::placeholder,

 .field select:invalid {

     color: var(--muted);

 }



 .btn-verify {

     background: var(--purple-lt);

     color: #fff;

     border: none;

     padding: 6px 14px;

     border-radius: 6px;

     font-size: 13px;

     font-weight: 600;

     cursor: pointer;

     transition: background .2s, opacity .2s;

 }



 .btn-verify:hover {

     opacity: 0.9;

 }



 .mobile-edit-row {

     display: flex;

     justify-content: space-between;

     align-items: center;

     margin: 0 4px 8px;

 }



 .mobile-edit-row span {

     font-size: 14px;

     font-weight: 500;

     color: var(--muted);

 }



 .btn-edit {

     background: none;

     border: none;

     color: var(--purple-lt);

     font-size: 13px;

     font-weight: 600;

     cursor: pointer;

     text-decoration: underline;

     padding: 0;

 }



 .btn-edit:hover {

     color: #fff;

 }



 .btn-primary {

     width: 100%;

     padding: 16px;

     background: var(--btn-grad);

     border: none;

     border-radius: 10px;

     color: #fff;

     font-size: 16px;

     font-weight: 600;

     cursor: pointer;

     margin-top: 4px;

     transition: opacity .2s, transform .15s;

 }



 .btn-primary:hover {

     opacity: .88;

     transform: translateY(-1px);

 }



 .btn-primary:active {

     transform: translateY(0);

 }



 .divider {

     display: flex;

     align-items: center;

     gap: 12px;

     margin: 20px 0 16px;

 }



 .divider span {

     font-size: 12px;

     color: var(--muted);

     white-space: nowrap;

 }



 .divider::before,

 .divider::after {

     content: '';

     flex: 1;

     height: 1px;

     background: var(--border);

 }



 .social-row {

     display: flex;

     gap: 12px;

     margin-bottom: 18px;

 }



 .btn-social {

     flex: 1;

     display: flex;

     align-items: center;

     justify-content: center;

     gap: 8px;

     padding: 13px;

     background: var(--input-bg);

     border: 1px solid var(--border);

     border-radius: 10px;

     color: #fff;

     font-size: 14px;

     font-weight: 500;

     cursor: pointer;

     transition: border-color .2s, background .2s;

 }



 .btn-social:hover {

     border-color: var(--purple-lt);

     background: rgba(124, 58, 237, 0.1);

 }



 .terms {

     font-size: 12px;
     margin-top: 4px;
     color: white;

 }



 .terms a {

     color: #818cf8;

     text-decoration: none;

 }



 .terms a:hover {

     text-decoration: underline;

 }



 .switch-msg {

     margin-top: 24px;

     text-align: center;

     font-size: 13px;

     color: var(--muted);

 }



 .switch-msg button {

     background: none;

     border: none;

     color: var(--purple-lt);

     font-size: 13px;

     font-weight: 600;

     cursor: pointer;

     margin-left: 4px;

 }



 .copyright {

     position: fixed;

     bottom: 16px;

     left: 0;

     right: 0;

     text-align: center;

     font-size: 11px;

     letter-spacing: 0.15em;

     color: rgba(255, 255, 255, 0.25);

     z-index: 1;

 }



 /* password toggle */

 .toggle-pw {

     background: none;

     border: none;

     cursor: pointer;

     color: var(--muted);

     display: flex;

     align-items: center;

     padding: 0;

 }



 .toggle-pw:hover {

     color: #fff;

 }



 /* error msg */

 .err {

     font-size: 11px;

     color: #f87171;

     margin: -8px 0 10px 4px;

     display: none;

 }



 /* ─── USER PROFILE DROPDOWN ─── */

 .user-dropdown {

     position: relative;

 }



 .user-btn {

     display: flex;

     align-items: center;

     gap: 12px;

     padding: 10px 16px;

     border-radius: 999px;

     border: 1px solid rgba(255, 255, 255, 0.15);

     background: rgba(255, 255, 255, 0.06);

     cursor: pointer;

     backdrop-filter: blur(8px);

     transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

 }



 .user-btn:hover {

     transform: translateY(-2px);

     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);

     border-color: #818cf8;

 }



 .user-btn .avatar {

     width: 40px;

     height: 40px;

     border-radius: 50%;

     background: var(--btn-grad);

     display: flex;

     align-items: center;

     justify-content: center;

     font-weight: 600;

     font-size: 16px;

     color: #fff;

 }



 .user-btn .fa-chevron-down {

     font-size: 12px;

     transition: transform 0.2s ease;

 }



 .user-btn.expanded .fa-chevron-down {

     transform: rotate(180deg);

 }



 .dropdown-menu {

     position: absolute;

     top: calc(100% + 10px);

     right: 0;

     min-width: 220px;

     background: #0d0a2e;

     border: 1px solid rgba(255, 255, 255, 0.15);

     border-radius: 12px;

     padding: 8px 0;

     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);

     backdrop-filter: blur(10px);

     z-index: 1000;

     opacity: 0;

     transform: translateY(-6px);

     pointer-events: none;

     transition: opacity 0.2s ease, transform 0.2s ease;

 }



 .dropdown-menu.show {

     opacity: 1;

     transform: translateY(0);

     pointer-events: auto;

 }



 .dropdown-item {

     display: flex;

     align-items: center;

     gap: 12px;

     padding: 12px 18px;

     color: var(--muted);

     font-size: 14px;

     text-decoration: none;

     cursor: pointer;

     transition: background 0.2s ease, color 0.2s ease;

     white-space: nowrap;

 }



 .dropdown-item:hover {

     background: rgba(255, 255, 255, 0.08);

     color: #fff;

 }



 .dropdown-item svg {

     width: 18px;

     height: 18px;

     flex-shrink: 0;

     stroke-width: 2px;

 }



 .dropdown-divider {

     height: 1px;

     background: rgba(255, 255, 255, 0.08);

     margin: 4px 0;

 }



 /* logout button */

 .dropdown-item.logout {

     color: #f87171;

 }



 .dropdown-item.logout:hover {

     background: rgba(248, 113, 113, 0.12);

     color: #fca5a5;

 }



 /* mobile */

 @media (max-width: 768px) {

     .user-btn {

         padding: 8px 12px;

     }



     .user-btn .avatar {

         width: 32px;

         height: 32px;

         font-size: 14px;

     }



     .dropdown-menu {

         right: -12px;

         min-width: 200px;

     }

 }



 /* ── Fade Animations ── */

 @keyframes fadeInLeft {

     from {
         opacity: 0;
         transform: translateX(-50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }

 }



 @keyframes fadeInRight {

     from {
         opacity: 0;
         transform: translateX(50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }

 }



 .fade-in-left {

     animation: fadeInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;

 }



 .fade-in-right {

     animation: fadeInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;

 }