/* ─── PREMIUM DARK DESIGN TOKENS (ABYSS THEME) ─── */
 :root {
     --bg-base: #07090f;
     --bg-subtle: #0f1423;
     --bg-surface: #141a2e;
     --text-main: #ffffff;
     --text-muted: #94a3b8;
     --border-light: rgba(255, 255, 255, 0.15);
     --input-bg: var(--bg-subtle);
     --brand-gold: #fbbf24;
     --brand-gold-light: #fde047;
     --brand-gold-dark: #d97706;
     --brand-primary: var(--brand-gold);
     --brand-gradient: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold-dark));

     /* Mesh Gradient Tokens */
     --mesh-color-1: rgba(124, 58, 237, 0.15);
     --mesh-color-2: rgba(251, 191, 36, 0.20);
     --mesh-color-3: rgba(88, 28, 135, 0.20);

     /* Shadows & UI */
     --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
     --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.5);
     --shadow-glow: 0 10px 30px -10px rgba(251, 191, 36, 0.25);
     --shadow-float: 0 20px 40px rgba(0, 0, 0, 0.8);

     --font-main: 'Plus Jakarta Sans', sans-serif;
     --transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     --radius-md: 13px;
     --radius-lg: 26px;
     --radius-full: 9999px;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }


 a {
     text-decoration: none;
     color: var(--brand-primary);
     font-weight: 700;
     transition: var(--transition);
 }

 a:hover {
     color: var(--brand-primary-light);
     text-decoration: underline;
 }

 button {
     border: none;
     background: none;
     font-family: inherit;
     cursor: pointer;
     color: inherit;
     outline: none;
 }

 /* ─── UNIFORM BUTTONS LAYOUT ─── */
 .controls-container {
     width: 100%;
     max-width: 900px;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .demo-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 15px;
     width: 100%;
 }

 .demo-btn {
     padding: 12px 20px;
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-full);
     color: var(--text-main);
     font-weight: 700;
     font-size: 14px;
     transition: var(--transition);
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
 }

 .demo-btn.primary {
     color: var(--brand-primary);
     border-color: rgba(251, 191, 36, 0.3);
 }

 .demo-btn:hover {
     background: var(--bg-subtle);
     box-shadow: var(--shadow-glow);
     transform: translateY(-2px);
     border-color: var(--brand-primary);
 }

 /* ─── MODAL OVERLAY & CONTAINER ─── */
 .modal-overlay {
     position: fixed;
     inset: 0;
     z-index: 1000;
     background: rgba(7, 9, 15, 0.85);
     backdrop-filter: blur(12px);
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 20px;
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
     overflow-y: auto;
 }

 .modal-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .modal-container {
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-lg);
     width: 100%;
     max-width: 460px;
     position: relative;
     overflow: hidden;
     box-shadow: var(--shadow-float);
     transform: translateY(30px) scale(0.95);
     transition: var(--transition);
     padding: 35px;
     margin: auto;
 }

 .modal-overlay.active .modal-container {
     transform: translateY(0) scale(1);
 }

 /* Limit Alert Specific Modal Styling (With Golden Accentuation) */
 .alert-modal {
     max-width: 440px;
     padding: 0;
     border: 1px solid rgba(251, 191, 36, 0.35);
     /* Elegant Golden Outline */
     box-shadow: var(--shadow-float), var(--shadow-glow);
     /* Enhanced ambient gold drop glow */
 }

 .alert-content {
     padding: 35px 30px 25px 30px;
     text-align: center;
     position: relative;
     z-index: 1;
 }

 .alert-title {
     font-size: 1.6rem;
     font-weight: 500;
     color: var(--text-main);
     margin-bottom: 25px;
     letter-spacing: -0.02em;
 }

 .alert-message {
     font-size: 1.15rem;
     color: var(--text-muted);
     margin-bottom: 20px;
     font-weight: 400;
     line-height: 1.6;
 }

 .alert-message strong {
     color: var(--brand-primary);
     font-weight: 700;
 }

 /* Brand primary color on the key category bolding */

 .alert-divider {
     border-top: 1px solid var(--border-light);
     border-bottom: none;
     border-left: none;
     border-right: none;
     margin: 0;
 }

 .alert-footer {
     padding: 15px 25px;
     display: flex;
     justify-content: flex-end;
     background: rgba(0, 0, 0, 0.2);
     position: relative;
     z-index: 1;
 }

 .btn-text-close {
     color: var(--text-muted);
     font-size: 15px;
     font-weight: 500;
     transition: var(--transition);
     padding: 5px 15px;
 }

 .btn-text-close:hover {
     color: var(--brand-primary);
 }

 /* Mesh Background */
 .form-bg-mesh {
     position: absolute;
     inset: -20%;
     z-index: 0;
     background-image:
         radial-gradient(circle at 80% 10%, var(--mesh-color-1) 0%, transparent 50%),
         radial-gradient(circle at 20% 90%, var(--mesh-color-2) 0%, transparent 55%),
         radial-gradient(circle at 40% 40%, var(--mesh-color-3) 0%, transparent 60%);
     filter: blur(50px);
     animation: ambientDrift 15s ease-in-out infinite alternate;
     pointer-events: none;
 }

 @keyframes ambientDrift {
     0% {
         transform: scale(1) translate(0, 0);
     }

     50% {
         transform: scale(1.05) translate(3%, 4%);
     }

     100% {
         transform: scale(1.02) translate(-4%, 2%);
     }
 }

 /* Auth Close Button */
 .btn-close {
     position: absolute;
     top: 20px;
     right: 20px;
     z-index: 10;
     width: 36px !important;
     height: 36px !important;
     border-radius: 50% !important;
     background: rgba(255, 255, 255, 0.05) !important;
     border: 1px solid var(--border-light) !important;
     color: var(--text-muted) !important;
     display: grid;
     place-items: center;
     transition: var(--transition);
 }

 .btn-close:hover {
     background: rgba(255, 255, 255, 0.1) !important;
     color: var(--text-main) !important;
     transform: rotate(90deg);
 }

 /* ─── AUTH CONTENT ELEMENTS ─── */
 .modal-content {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
 }

 .modal-title {
     font-size: 1.75rem;
     font-weight: 900;
     color: var(--text-main);
     letter-spacing: -0.03em;
     margin-bottom: 6px;
 }

 .modal-subtitle {
     font-size: 0.95rem;
     color: var(--text-muted);
     margin-bottom: 24px;
     font-weight: 500;
 }

 /* Social Buttons */
 .social-auth {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     margin-bottom: 22px;
 }

 .btn-social {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 11px;
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-full);
     font-weight: 700;
     font-size: 14px;
     color: var(--text-main);
     transition: var(--transition);
     box-shadow: var(--shadow-sm);
 }

 .btn-social:hover {
     background: var(--bg-subtle);
     border-color: var(--brand-primary);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
     color: var(--brand-primary);
 }

 .btn-social.linkedin {
     color: #0a66c2;
 }

 .btn-social:hover.linkedin {
     color: #0a66c2;
     border-color: #0a66c2;
 }

 /* Divider */
 .divider {
     display: flex;
     align-items: center;
     text-align: center;
     margin-bottom: 22px;
     color: var(--text-muted);
     font-size: 12px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 0.1em;
 }

 .divider::before,
 .divider::after {
     content: '';
     flex: 1;
     border-bottom: 1px solid var(--border-light);
 }

 .divider:not(:empty)::before {
     margin-right: 14px;
 }

 .divider:not(:empty)::after {
     margin-left: 14px;
 }

 /* Form Fields */
 .form-grid {
     display: grid;
     gap: 16px;
 }

 .name-fields {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
 }

 .input-group {
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .input-group label {
     font-size: 13px;
     font-weight: 800;
     color: var(--text-main);
 }

 .input-field {
     padding: 12px 16px !important;
     background: var(--input-bg);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-md) !important;
     font-size: 14px;
     color: var(--text-main);
     font-family: inherit;
     transition: var(--transition);
     box-shadow: var(--shadow-sm);
     outline: none;
     font-weight: 500;
     margin: 0 !important;
 }

 .input-field:focus {
     border-color: var(--brand-primary);
     box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.1);
     background: var(--bg-surface);
 }

 .input-field::placeholder {
     color: var(--text-muted);
     font-weight: 400;
     opacity: 0.6;
 }

 /* Helpers */
 .form-helpers {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 13px;
 }

 .checkbox-group {
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     color: var(--text-main);
     font-weight: 600;
 }

 .checkbox-group input[type="checkbox"] {
     appearance: none;
     width: 16px;
     height: 16px;
     border: 2px solid var(--border-light);
     border-radius: 4px;
     background: var(--bg-base);
     cursor: pointer;
     position: relative;
     transition: var(--transition);
 }

 .checkbox-group input[type="checkbox"]:checked {
     background: var(--brand-primary);
     border-color: var(--brand-primary);
 }

 .checkbox-group input[type="checkbox"]:checked::after {
     content: '';
     position: absolute;
     left: 4px;
     top: 1px;
     width: 4px;
     height: 8px;
     border: solid #000;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 /* Submit Button */
 .btn-submit {
     width: 100%;
     padding: 14px;
     margin-top: 6px;
     background: var(--brand-gradient);
     color: #000;
     border: 1px solid var(--border-light);
     border-radius: var(--radius-full);
     font-size: 15px;
     font-weight: 800;
     transition: var(--transition);
     box-shadow: var(--shadow-glow);
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 9px;
 }

 .btn-submit:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 40px -5px rgba(251, 191, 36, 0.4);
 }

 /* Auth Switcher */
 .auth-switch {
     text-align: center;
     margin-top: 22px;
     font-size: 14px;
     color: var(--text-muted);
     font-weight: 600;
 }

 .auth-switch button {
     color: var(--brand-primary);
     font-weight: 800;
     transition: var(--transition);
     margin-left: 5px;
 }

 .auth-switch button:hover {
     color: var(--brand-primary-hover);
     text-decoration: underline;
 }

 /* Animations */
 .fade-enter {
     animation: fadeInUp 0.4s var(--transition) forwards;
 }

 .fade-exit {
     display: none !important;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

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

 @media (max-width: 480px) {
     .name-fields {
         grid-template-columns: 1fr;
     }

     .social-auth {
         grid-template-columns: 1fr;
     }

     .modal-container {
         padding: 25px;
     }

     .alert-modal {
         padding: 0;
     }
 }