/* ═══════════════════════════════════════════════════════════
 *  css/pages/auth.css — Land of Profits
 *  Page-specific styles for auth.html.
 * ═══════════════════════════════════════════════════════════ */

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

      html,
      body {
        height: 100%;
        overflow: hidden;
      }
      body {
        font-family: var(--sans);
        background: var(--navy);
        display: flex;
        align-items: stretch;
      }

      /* ══ LAYOUT ══════════════════════════════════════════ */
      .page {
        display: flex;
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
      }

      /* ══ LEFT PANEL — Brand ═════════════════════════════ */
      .brand-panel {
        flex: 0 0 46%;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
      }

      /* Animated background */
      .brand-bg {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 80% 60% at 30% 30%,
            rgba(201, 169, 110, 0.18) 0%,
            transparent 60%
          ),
          radial-gradient(ellipse 60% 80% at 70% 70%, rgba(30, 46, 69, 0.8) 0%, transparent 70%),
          linear-gradient(145deg, #0d1b2e 0%, #162236 40%, #1e3050 70%, #0d1b2e 100%);
        animation: bgShift 12s ease-in-out infinite alternate;
      }
      @keyframes bgShift {
        0% {
          background-position: 0% 50%;
        }
        100% {
          background-position: 100% 50%;
        }
      }

      /* Decorative geometric lines */
      .brand-geo {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }
      .brand-geo svg {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
      }

      /* Floating particles */
      .particle {
        position: absolute;
        border-radius: 50%;
        background: var(--gold);
        opacity: 0;
        animation: float var(--dur, 8s) var(--delay, 0s) ease-in-out infinite;
      }
      @keyframes float {
        0%,
        100% {
          opacity: 0;
          transform: translateY(0) scale(0.5);
        }
        20% {
          opacity: var(--op, 0.15);
        }
        80% {
          opacity: var(--op, 0.15);
        }
        50% {
          transform: translateY(-40px) scale(1);
        }
      }

      .brand-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 48px 52px;
      }

      /* Logo */
      .brand-logo {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .logo-mark {
        width: 36px;
        height: 36px;
        background: var(--gold);
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .logo-mark svg {
        width: 18px;
        height: 18px;
        fill: var(--navy);
      }
      .logo-text {
        font-family: var(--serif);
        font-size: 20px;
        font-weight: 600;
        color: var(--white);
      }
      .logo-text span {
        color: var(--gold);
      }

      /* Brand headline */
      .brand-headline {
        margin-top: auto;
      }
      .brand-sup {
        font-size: 11px;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 600;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .brand-sup::before {
        content: '';
        display: block;
        width: 28px;
        height: 1px;
        background: var(--gold);
      }
      h1.brand-h1 {
        font-family: var(--serif);
        font-size: clamp(38px, 4vw, 56px);
        font-weight: 600;
        line-height: 1.05;
        color: var(--white);
        letter-spacing: -0.5px;
        margin-bottom: 20px;
      }
      h1.brand-h1 em {
        font-style: italic;
        color: var(--gold);
      }
      .brand-sub {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.48);
        font-weight: 300;
        line-height: 1.75;
        max-width: 320px;
        margin-bottom: 40px;
      }

      /* Stats row */
      .brand-stats {
        display: flex;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 28px;
      }
      .bstat {
        flex: 1;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }
      .bstat:last-child {
        border-right: none;
      }
      .bstat:first-child {
        padding-left: 0;
      }
      .bstat {
        padding: 0 20px;
      }
      .bstat:first-child {
        padding-left: 0;
      }
      .bs-num {
        font-family: var(--serif);
        font-size: 28px;
        font-weight: 700;
        color: var(--gold);
        line-height: 1;
        margin-bottom: 4px;
      }
      .bs-lbl {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.32);
        letter-spacing: 0.3px;
      }

      /* Testimonial quote */
      .brand-quote {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(201, 169, 110, 0.15);
        border-radius: var(--r16);
        padding: 22px 24px;
        margin-bottom: auto;
        animation: quoteReveal 0.6s var(--ease) 0.8s both;
      }
      @keyframes quoteReveal {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .bq-text {
        font-family: var(--serif);
        font-size: 16px;
        font-style: italic;
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.65;
        margin-bottom: 14px;
      }
      .bq-author {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .bq-ava {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        flex-shrink: 0;
      }
      .bq-name {
        font-size: 12.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.65);
      }
      .bq-role {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.3);
      }

      /* Country flags strip */
      .brand-countries {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 28px;
      }
      .brand-countries span {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.28);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-weight: 600;
        margin-right: 4px;
      }
      .flag {
        font-size: 18px;
        cursor: default;
        transition: transform 0.2s;
        display: inline-block;
      }
      .flag:hover {
        transform: scale(1.3);
      }

      /* ══ RIGHT PANEL — Auth form ════════════════════════ */
      .auth-panel {
        flex: 1;
        background: var(--cream);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 48px;
        overflow-y: auto;
        position: relative;
      }

      /* Subtle texture */
      .auth-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
        opacity: 0.4;
      }

      .auth-box {
        width: 100%;
        max-width: 420px;
        position: relative;
        z-index: 1;
      }

      /* Tab switcher */
      .auth-tabs {
        display: flex;
        background: var(--sand);
        border-radius: var(--r12);
        padding: 5px;
        margin-bottom: 32px;
        gap: 4px;
        position: relative;
      }
      .auth-tab {
        flex: 1;
        padding: 11px 16px;
        border-radius: var(--r8);
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s var(--ease);
        color: var(--slate);
        position: relative;
        z-index: 1;
        background: none;
        border: none;
        font-family: var(--sans);
      }
      .auth-tab.active {
        background: var(--white);
        color: var(--ink);
        box-shadow:
          0 2px 12px rgba(0, 0, 0, 0.08),
          0 0 0 1px rgba(0, 0, 0, 0.04);
        font-weight: 600;
      }
      .auth-tab:hover:not(.active) {
        color: var(--ink);
      }

      /* Panels */
      .auth-view {
        display: none;
        animation: panelIn 0.35s var(--ease) both;
      }
      .auth-view.active {
        display: block;
      }
      @keyframes panelIn {
        from {
          opacity: 0;
          transform: translateX(12px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* Auth header */
      .auth-header {
        margin-bottom: 28px;
      }
      .auth-title {
        font-family: var(--serif);
        font-size: clamp(26px, 3vw, 34px);
        font-weight: 600;
        color: var(--ink);
        line-height: 1.1;
        margin-bottom: 6px;
      }
      .auth-title em {
        font-style: italic;
        color: var(--mocha);
      }
      .auth-sub {
        font-size: 14px;
        color: var(--slate);
        font-weight: 300;
        line-height: 1.5;
      }

      /* ── Social buttons ── */
      .social-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 22px;
      }
      .social-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 11px 14px;
        border-radius: var(--r12);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s var(--ease);
        border: 1px solid var(--fog);
        background: var(--white);
        color: var(--ink);
        font-family: var(--sans);
      }
      .social-btn:hover {
        border-color: rgba(76, 55, 36, 0.2);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
      }
      .social-btn:active {
        transform: translateY(0);
        box-shadow: none;
      }
      .social-btn svg,
      .social-btn img {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }
      .social-btn.full {
        grid-column: span 2;
      }

      /* Social icon colors */
      .sb-google .icon-google {
        display: block;
      }
      .sb-apple {
        gap: 8px;
      }
      .sb-linkedin svg path {
        fill: #0a66c2;
      }
      .sb-microsoft svg path {
        fill: #f35325;
      }
      .sb-facebook svg path {
        fill: #1877f2;
      }
      .sb-instagram .ig-gradient {
        display: block;
      }
      .sb-twitter svg path {
        fill: #000;
      }
      .sb-whatsapp svg path {
        fill: #25d366;
      }

      /* Divider */
      .divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 22px;
      }
      .divider::before,
      .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--fog);
      }
      .divider span {
        font-size: 12px;
        color: var(--ghost);
        letter-spacing: 0.5px;
        white-space: nowrap;
      }

      /* ── Form fields ── */
      .field-group {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 22px;
      }
      .field {
        position: relative;
      }
      .field label {
        display: block;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--slate);
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 6px;
      }
      .field input {
        width: 100%;
        padding: 12px 16px;
        background: var(--white);
        border: 1.5px solid var(--fog);
        border-radius: var(--r12);
        font-family: var(--sans);
        font-size: 14px;
        color: var(--ink);
        outline: none;
        transition: all 0.2s var(--ease);
      }
      .field input:focus {
        border-color: var(--mocha);
        box-shadow: 0 0 0 3px rgba(76, 55, 36, 0.08);
      }
      .field input::placeholder {
        color: var(--ghost);
      }
      .field input.has-icon {
        padding-right: 44px;
      }

      /* Field icons */
      .field-icon {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--ghost);
        transition: color 0.15s;
      }
      .field-icon svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
      }
      .field-icon:hover {
        color: var(--mocha);
      }

      /* Input row */
      .input-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      /* Phone flag select */
      .phone-wrap {
        display: flex;
        gap: 8px;
      }
      .phone-code {
        flex: 0 0 80px;
        padding: 12px 10px;
        background: var(--white);
        border: 1.5px solid var(--fog);
        border-radius: var(--r12);
        font-family: var(--sans);
        font-size: 13.5px;
        color: var(--ink);
        outline: none;
        appearance: none;
        cursor: pointer;
        text-align: center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%239AAABB' stroke-width='1.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        padding-right: 24px;
      }
      .phone-code:focus {
        border-color: var(--mocha);
      }
      .phone-input {
        flex: 1;
      }

      /* I am a — role selector */
      .role-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 14px;
      }
      .role-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 8px;
        border-radius: var(--r12);
        border: 1.5px solid var(--fog);
        background: var(--white);
        cursor: pointer;
        transition: all 0.2s var(--ease);
        font-family: var(--sans);
      }
      .role-btn:hover {
        border-color: rgba(76, 55, 36, 0.25);
        background: var(--sand);
      }
      .role-btn.selected {
        border-color: var(--mocha);
        background: rgba(76, 55, 36, 0.06);
      }
      .role-btn .rb-icon {
        width: 32px;
        height: 32px;
        background: var(--sand);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
      }
      .role-btn.selected .rb-icon {
        background: var(--mocha);
      }
      .role-btn .rb-icon svg {
        width: 15px;
        height: 15px;
        stroke: var(--mocha);
        fill: none;
        stroke-width: 2;
      }
      .role-btn.selected .rb-icon svg {
        stroke: var(--white);
      }
      .role-btn .rb-lbl {
        font-size: 11px;
        font-weight: 500;
        color: var(--slate);
        text-align: center;
        line-height: 1.3;
      }
      .role-btn.selected .rb-lbl {
        color: var(--mocha);
      }

      /* Country selector */
      .country-select {
        width: 100%;
        padding: 12px 16px;
        background: var(--white);
        border: 1.5px solid var(--fog);
        border-radius: var(--r12);
        font-family: var(--sans);
        font-size: 14px;
        color: var(--ink);
        outline: none;
        appearance: none;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%239AAABB' stroke-width='1.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 36px;
        transition: all 0.2s;
      }
      .country-select:focus {
        border-color: var(--mocha);
        box-shadow: 0 0 0 3px rgba(76, 55, 36, 0.08);
      }

      /* Password strength */
      .pw-strength {
        margin-top: 8px;
        display: none;
      }
      .pw-strength.show {
        display: block;
      }
      .pw-bars {
        display: flex;
        gap: 4px;
        margin-bottom: 4px;
      }
      .pw-bar {
        height: 3px;
        flex: 1;
        border-radius: 2px;
        background: var(--fog);
        transition: background 0.3s;
      }
      .pw-bar.filled.weak {
        background: #e74c3c;
      }
      .pw-bar.filled.fair {
        background: #f39c12;
      }
      .pw-bar.filled.good {
        background: #27ae60;
      }
      .pw-bar.filled.strong {
        background: #1a7a4a;
      }
      .pw-hint {
        font-size: 11px;
        color: var(--ghost);
        transition: color 0.3s;
      }

      /* Terms */
      .terms-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
      }
      .custom-check {
        width: 18px;
        height: 18px;
        border: 1.5px solid var(--fog);
        border-radius: 5px;
        flex-shrink: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--white);
        transition: all 0.2s;
        margin-top: 1px;
      }
      .custom-check.checked {
        background: var(--mocha);
        border-color: var(--mocha);
      }
      .custom-check svg {
        width: 10px;
        height: 10px;
        stroke: white;
        fill: none;
        stroke-width: 2.5;
      }
      .terms-text {
        font-size: 12.5px;
        color: var(--slate);
        line-height: 1.5;
        font-weight: 300;
      }
      .terms-text a {
        color: var(--mocha);
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      /* Forgot password */
      .forgot-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
      }
      .remember-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .remember-row span {
        font-size: 13px;
        color: var(--slate);
        cursor: pointer;
        user-select: none;
      }
      .forgot-link {
        font-size: 13px;
        color: var(--mocha);
        font-weight: 500;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        background: none;
        border: none;
        font-family: var(--sans);
      }
      .forgot-link:hover {
        color: var(--mocha2);
      }

      /* ── CTA Button ── */
      .btn-auth {
        width: 100%;
        padding: 14px;
        border-radius: var(--r12);
        background: var(--navy);
        color: var(--white);
        font-family: var(--sans);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.25s var(--ease);
        position: relative;
        overflow: hidden;
        letter-spacing: 0.2px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin-bottom: 18px;
      }
      .btn-auth::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(201, 169, 110, 0.12) 50%,
          transparent 100%
        );
        transform: translateX(-100%);
        transition: transform 0.4s var(--ease);
      }
      .btn-auth:hover {
        background: var(--navy2);
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(13, 27, 46, 0.22);
      }
      .btn-auth:hover::before {
        transform: translateX(100%);
      }
      .btn-auth:active {
        transform: translateY(0);
        box-shadow: none;
      }
      .btn-auth svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
      }

      /* Loading state */
      .btn-auth.loading {
        pointer-events: none;
        opacity: 0.8;
      }
      .btn-auth .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        display: none;
      }
      .btn-auth.loading .spinner {
        display: block;
      }
      .btn-auth.loading .btn-text {
        display: none;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* Bottom link */
      .auth-switch {
        text-align: center;
        font-size: 13.5px;
        color: var(--slate);
      }
      .auth-switch button {
        background: none;
        border: none;
        color: var(--mocha);
        font-weight: 600;
        cursor: pointer;
        font-size: 13.5px;
        font-family: var(--sans);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .auth-switch button:hover {
        color: var(--mocha2);
      }

      /* Step indicator (signup multi-step) */
      .step-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 26px;
      }
      .si-step {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
      }
      .si-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--fog);
        transition: all 0.3s var(--ease);
      }
      .si-dot.active {
        background: var(--mocha);
        transform: scale(1.4);
      }
      .si-dot.done {
        background: var(--ok);
      }
      .si-line {
        width: 28px;
        height: 1px;
        background: var(--fog);
        transition: background 0.3s;
      }
      .si-line.done {
        background: var(--ok);
      }
      .si-label {
        font-size: 10.5px;
        color: var(--ghost);
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }

      /* Step panels */
      .signup-step {
        display: none;
      }
      .signup-step.active {
        display: block;
        animation: panelIn 0.3s var(--ease) both;
      }

      /* Progress bar */
      .progress-wrap {
        margin-bottom: 26px;
      }
      .progress-bar {
        height: 3px;
        background: var(--fog);
        border-radius: 2px;
        overflow: hidden;
      }
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--mocha), var(--gold));
        border-radius: 2px;
        transition: width 0.5s var(--ease);
      }

      /* Success state */
      .success-view {
        text-align: center;
        padding: 20px 0;
        display: none;
        animation: panelIn 0.4s var(--ease-spring) both;
      }
      .success-icon {
        width: 68px;
        height: 68px;
        background: rgba(46, 139, 87, 0.12);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
        animation: pop 0.5s var(--ease-spring) 0.1s both;
      }
      @keyframes pop {
        from {
          transform: scale(0);
        }
        to {
          transform: scale(1);
        }
      }
      .success-icon svg {
        width: 30px;
        height: 30px;
        stroke: var(--ok);
        fill: none;
        stroke-width: 2.5;
      }
      .success-title {
        font-family: var(--serif);
        font-size: 28px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 10px;
      }
      .success-msg {
        font-size: 14px;
        color: var(--slate);
        font-weight: 300;
        line-height: 1.7;
        margin-bottom: 28px;
      }
      .btn-continue {
        width: 100%;
        padding: 13px;
        background: var(--ok);
        color: var(--white);
        border: none;
        border-radius: var(--r12);
        font-family: var(--sans);
        font-size: 14.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
      }
      .btn-continue:hover {
        background: #27ae60;
        transform: translateY(-2px);
      }

      /* Validation feedback */
      .field-error {
        font-size: 11.5px;
        color: var(--err);
        margin-top: 5px;
        display: none;
        animation: slideIn 0.2s var(--ease) both;
      }
      .field-error.show {
        display: block;
      }
      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .field input.error {
        border-color: var(--err) !important;
      }
      .field input.valid {
        border-color: var(--ok) !important;
      }

      /* Input success checkmark */
      .field-valid {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
      }
      .field-valid.show {
        display: flex;
      }
      .field-valid svg {
        width: 16px;
        height: 16px;
        stroke: var(--ok);
        fill: none;
        stroke-width: 2.5;
      }

      /* Back button */
      .btn-back {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--slate);
        cursor: pointer;
        background: none;
        border: none;
        font-family: var(--sans);
        margin-bottom: 20px;
        transition: color 0.15s;
      }
      .btn-back:hover {
        color: var(--mocha);
      }
      .btn-back svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
      }

      /* OTP inputs */
      .otp-row {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin: 20px 0;
      }
      .otp-input {
        width: 52px;
        height: 58px;
        border: 1.5px solid var(--fog);
        border-radius: var(--r12);
        background: var(--white);
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 600;
        color: var(--ink);
        text-align: center;
        outline: none;
        transition: all 0.2s;
      }
      .otp-input:focus {
        border-color: var(--mocha);
        box-shadow: 0 0 0 3px rgba(76, 55, 36, 0.08);
      }
      .otp-input.filled {
        border-color: var(--mocha);
        background: rgba(76, 55, 36, 0.04);
      }

      /* Resend */
      .resend-row {
        text-align: center;
        font-size: 13px;
        color: var(--slate);
        margin-top: 10px;
      }
      .resend-btn {
        background: none;
        border: none;
        color: var(--mocha);
        font-weight: 600;
        cursor: pointer;
        font-size: 13px;
        font-family: var(--sans);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .resend-timer {
        color: var(--ghost);
      }

      /* Responsive */
      @media (max-width: 1000px) {
        .brand-panel {
          display: none;
        }
        .auth-panel {
          flex: 1;
          padding: 28px 24px;
        }
      }
      @media (max-width: 480px) {
        .social-grid {
          grid-template-columns: 1fr;
        }
        .social-btn.full {
          grid-column: span 1;
        }
        .input-row,
        .role-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ══ Scrollbar styling ══════════════════════════════ */
      .auth-panel::-webkit-scrollbar {
        width: 4px;
      }
      .auth-panel::-webkit-scrollbar-track {
        background: transparent;
      }
      .auth-panel::-webkit-scrollbar-thumb {
        background: var(--fog);
        border-radius: 2px;
      }