/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/auth-assets/579c1fb1-e63f-4986-8c3c-a9667c995423.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/auth-assets/82d2ae66-3ee1-4625-9e6c-7a738a06d769.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/auth-assets/2553756a-0af1-43b9-b0ff-b6d4e4b081ff.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/auth-assets/feef09d7-37c5-4d4e-90a2-cd0e72af70e6.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/auth-assets/a463fe0c-66ec-42ab-b62c-9871ea084fb7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/auth-assets/e354bf88-979b-49ad-81af-d544fa1f8de4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/auth-assets/579c1fb1-e63f-4986-8c3c-a9667c995423.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/auth-assets/82d2ae66-3ee1-4625-9e6c-7a738a06d769.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/auth-assets/2553756a-0af1-43b9-b0ff-b6d4e4b081ff.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/auth-assets/feef09d7-37c5-4d4e-90a2-cd0e72af70e6.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/auth-assets/a463fe0c-66ec-42ab-b62c-9871ea084fb7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/auth-assets/e354bf88-979b-49ad-81af-d544fa1f8de4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/auth-assets/579c1fb1-e63f-4986-8c3c-a9667c995423.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/auth-assets/82d2ae66-3ee1-4625-9e6c-7a738a06d769.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/auth-assets/2553756a-0af1-43b9-b0ff-b6d4e4b081ff.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/auth-assets/feef09d7-37c5-4d4e-90a2-cd0e72af70e6.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/auth-assets/a463fe0c-66ec-42ab-b62c-9871ea084fb7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/auth-assets/e354bf88-979b-49ad-81af-d544fa1f8de4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* PetraCore Parking — Design Tokens
 * Import in any HTML: <link rel="stylesheet" href="colors_and_type.css">
 * Brand sans is Montserrat (loaded locally from /fonts/). For mono, load:
 *   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 *   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
 * (Adjust the relative path to fonts/Montserrat-VariableFont_wght.ttf if your file lives in a subfolder.)
 */

@font-face {
  font-family: "Montserrat";
  src: url("/auth-assets/montserrat-variable.ttf") format("truetype-variations"),
       url("/auth-assets/montserrat-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/auth-assets/montserrat-variable.ttf") format("truetype-variations"),
       url("/auth-assets/montserrat-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/auth-assets/montserrat-variable.ttf") format("truetype-variations"),
       url("/auth-assets/montserrat-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ──────────── Color: Brand ──────────── */
  --brand-900: #081A2E;
  --brand-800: #0B2238;
  --brand-700: #0F2A47;   /* primary surface */
  --brand-600: #15375E;   /* hover / gradient stop */
  --brand-500: #1F4A7A;
  --brand-400: #3B6BA0;
  --brand-300: #6B91BD;
  --brand-200: #A6BFD9;
  --brand-100: #D7E2EE;
  --brand-50:  #EEF3F9;

  /* ──────────── Color: Accent (signal green) ──────────── */
  --accent-700: #246A27;
  --accent-600: #368C39;
  --accent-500: #4CAF50;   /* primary accent */
  --accent-400: #71C174;
  --accent-300: #9FD0A1;
  --accent-200: #CAE2CB;
  --accent-100: #E9F1E9;

  /* Legacy amber kept available for warning status only */
  --amber-700: #B57808;
  --amber-500: #F2A413;
  --amber-100: #FDF1D6;

  /* ──────────── Color: Neutrals ──────────── */
  --gray-900: #0E1620;
  --gray-800: #1B2632;
  --gray-700: #2D3946;
  --gray-600: #4B5662;
  --gray-500: #6B7785;
  --gray-400: #97A1AE;
  --gray-300: #C8D0DA;
  --gray-200: #E4E8EE;
  --gray-100: #EDF0F4;
  --gray-50:  #F4F6F9;
  --white:    #FFFFFF;

  /* ──────────── Color: Semantic ──────────── */
  --bg:           var(--gray-50);
  --surface:      var(--white);
  --surface-2:    var(--gray-50);
  --border:       var(--gray-200);
  --border-strong:var(--gray-300);
  --fg:           var(--gray-900);
  --fg-muted:     var(--gray-600);
  --fg-soft:      var(--gray-500);
  --fg-on-brand:  var(--white);
  --fg-on-accent: var(--white);

  /* ──────────── Color: Status ──────────── */
  --success-700: #146444;
  --success-500: #1F8E5A;
  --success-100: #DDF2E7;

  --info-700:    #1F4FBE;
  --info-500:    #2F6FEB;
  --info-100:    #DCE8FD;

  --warn-700:    var(--amber-700);
  --warn-500:    var(--amber-500);
  --warn-100:    var(--amber-100);

  --danger-700:  #98301F;
  --danger-500:  #D6432F;
  --danger-100:  #FBE0DB;

  --waiting-700: #4B5662;
  --waiting-500: #6B7785;
  --waiting-100: var(--gray-100);

  --offline-700: #2D3946;
  --offline-500: #4B5662;
  --offline-100: var(--gray-100);

  /* ──────────── Type ──────────── */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizes (rem; 1rem = 16px) */
  --fs-display:  2.5rem;   /* 40 */
  --fs-h1:       2rem;     /* 32 */
  --fs-h2:       1.5rem;   /* 24 */
  --fs-h3:       1.25rem;  /* 20 */
  --fs-h4:       1.125rem; /* 18 */
  --fs-body:     1rem;     /* 16 */
  --fs-body-sm:  0.875rem; /* 14 */
  --fs-caption:  0.8125rem;/* 13 */
  --fs-micro:    0.75rem;  /* 12 */

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  /* ──────────── Spacing (4px base) ──────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-14: 56px;
  --sp-20: 80px;

  /* ──────────── Radii ──────────── */
  --radius-xs:   4px;  /* chips/tags */
  --radius-sm:   6px;
  --radius-md:   8px;  /* inputs, buttons */
  --radius-lg:   12px; /* cards */
  --radius-xl:   16px; /* modals */
  --radius-pill: 999px;

  /* ──────────── Shadows ──────────── */
  --shadow-1: 0 4px 12px rgba(15, 42, 71, 0.08);
  --shadow-2: 0 8px 24px rgba(15, 42, 71, 0.12);
  --shadow-3: 0 12px 40px rgba(15, 42, 71, 0.16);
  --shadow-focus: 0 0 0 2px var(--accent-500);

  /* ──────────── Motion ──────────── */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;

  /* ──────────── Layout ──────────── */
  --topbar-h:    56px;
  --bottomnav-h: 64px;
  --sidebar-w:   240px;
  --sidebar-collapsed-w: 72px;

  /* ──────────── Patterns ──────────── */
  --pattern-grid:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 24px 24px;

  --gradient-brand:
    linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 100%);
}

/* ──────────── Element styles ──────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); }

p { margin: 0; line-height: var(--lh-base); }

code, kbd, pre, samp { font-family: var(--font-mono); }

/* ──────────── Type utility classes ──────────── */
.t-display  { font-size: var(--fs-display); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-h1       { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-h2       { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }
.t-h3       { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.t-h4       { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.t-body     { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-base); }
.t-body-md  { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-base); }
.t-body-sm  { font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: var(--lh-base); }
.t-caption  { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--fg-muted); line-height: var(--lh-snug); }
.t-micro    { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--fg-muted); line-height: var(--lh-snug); }
.t-overline { font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-soft); }
.t-mono     { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.t-plate    { font-family: var(--font-mono); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.t-error    { color: var(--danger-500); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); }

.fg-muted { color: var(--fg-muted); }
.fg-soft  { color: var(--fg-soft); }



    body { background: var(--bg); }

    /* Page split */
    .auth-page {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow-x: hidden;
    }
    @media (max-width: 900px) {
      .auth-page { grid-template-columns: 1fr; min-height: 100vh; }
      .auth-aside { display: none !important; }
      .auth-main {
        background: #fff;
        padding: 24px 20px 40px;
        align-items: flex-start;
        min-height: 100vh;
      }
      .auth-card {
        width: 100%;
        max-width: 100%;
        background: #fff;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
      }
    }
    @media (max-width: 480px) {
      .auth-main { padding: 20px 16px 32px; }
      .auth-mobile-brand { margin-bottom: 20px; }
      .auth-title { font-size: 22px; }
      .auth-subtitle { font-size: 13px; margin-bottom: 20px; }
      .auth-tabs { margin-bottom: 20px; }
      .field { margin-bottom: 14px; }
      .input { font-size: 16px; /* prevents iOS zoom on focus */ }
      .btn-submit { height: 52px; font-size: 16px; }
      .otp-row { gap: 6px; margin: 4px 0 16px; }
      .otp-input { width: 100%; max-width: 56px; height: 56px; font-size: 22px; }
      .switch-mode { margin-top: 20px; font-size: 13px; flex-wrap: wrap; }
    }
    @media (max-width: 360px) {
      .auth-main { padding: 16px 14px 28px; }
      .auth-title { font-size: 20px; }
      .otp-row { gap: 4px; }
      .otp-input { height: 52px; font-size: 20px; max-width: 100%; }
      .input { padding-left: 36px; }
      .input-wrap .input-icon { left: 10px; }
    }

    /* ─── Left aside (brand) ─── */
    .auth-aside {
      background: linear-gradient(135deg, #0F2A47 0%, #15375E 100%);
      color: #fff;
      padding: 56px 64px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    .auth-aside::before {
      content: ""; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 32px 32px; pointer-events: none;
    }
    .auth-aside > * { position: relative; }
    .auth-brand { display: flex; align-items: center; gap: 12px; }
    .auth-brand img { height: 32px; }
    .auth-aside h1 {
      font-size: 40px; font-weight: 800; line-height: 1.1;
      letter-spacing: -0.02em; margin: 0;
      color: #fff;
      max-width: 460px;
    }
    .auth-aside h1 .accent { color: var(--accent-400); }
    .auth-aside .sub {
      font-size: 16px; color: rgba(255,255,255,0.7);
      max-width: 420px; margin-top: 16px; line-height: 1.5;
    }
    .auth-aside .copyright {
      font-family: var(--font-mono); font-size: 11px;
      color: rgba(255,255,255,0.4);
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .auth-features { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
    .auth-feature {
      display: flex; gap: 12px; align-items: flex-start;
      font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5;
    }
    .auth-feature .ico {
      flex-shrink: 0;
      width: 36px; height: 36px; border-radius: 8px;
      background: rgba(76, 175, 80, 0.16);
      color: var(--accent-400);
      display: grid; place-items: center;
    }
    .auth-feature b { color: #fff; font-weight: 600; display: block; margin-bottom: 2px; font-size: 14px; }

    /* ─── Right panel (form) ─── */
    .auth-main {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      background: var(--bg);
    }
    .auth-card {
      width: 100%;
      max-width: 420px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      box-shadow: var(--shadow-1);
    }
    .auth-mobile-brand {
      display: none;
      align-items: center; gap: 10px;
      margin-bottom: 24px;
    }
    .auth-mobile-brand img { height: 28px; filter: brightness(0) saturate(100%) invert(13%) sepia(40%) saturate(2148%) hue-rotate(193deg) brightness(94%) contrast(96%); }
    @media (max-width: 900px) { .auth-mobile-brand { display: flex; } }

    /* Tabs */
    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--gray-100);
      padding: 4px;
      border-radius: 10px;
      gap: 4px;
      margin-bottom: 28px;
    }
    .auth-tab {
      padding: 10px;
      text-align: center;
      border-radius: 8px;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--fg-muted);
      transition: all 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .auth-tab.active {
      background: #fff;
      color: var(--brand-700);
      box-shadow: 0 1px 3px rgba(15, 42, 71, 0.06);
    }

    .auth-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
    .auth-subtitle { font-size: 14px; color: var(--fg-muted); margin: 0 0 24px; }

    /* Form fields */
    .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .field-label {
      font-size: 13px; font-weight: 600; color: var(--gray-700);
      display: flex; justify-content: space-between; align-items: center;
    }
    .field-label .field-link {
      font-size: 12px; font-weight: 600; color: var(--brand-700);
      text-decoration: none;
    }
    .field-link:hover { color: var(--brand-600); }
    .input-wrap { position: relative; display: flex; align-items: center; }
    .input-wrap .input-icon {
      position: absolute; left: 12px;
      color: var(--fg-soft); display: inline-flex; pointer-events: none;
    }
    .input {
      width: 100%;
      height: 44px;
      padding: 0 14px 0 40px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: #fff;
      color: var(--fg);
      font-size: 15px;
      font-family: inherit;
      outline: none;
      transition: border-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1),
                  box-shadow 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .input.mono { font-family: var(--font-mono); }
    .input:focus { border-color: var(--brand-700); box-shadow: 0 0 0 2px var(--accent-500); }
    .input.error { border-color: var(--danger-500); }
    .input::placeholder { color: var(--fg-soft); }
    .input-action {
      position: absolute; right: 8px;
      width: 32px; height: 32px;
      background: transparent; border: 0; cursor: pointer;
      color: var(--fg-soft);
      display: grid; place-items: center; border-radius: 6px;
    }
    .input-action:hover { background: var(--gray-100); color: var(--fg); }
    .hint { font-size: 12px; color: var(--fg-muted); margin-top: -2px; }
    .err-msg { font-size: 12px; color: var(--danger-700); font-weight: 500; margin-top: -2px; display: flex; align-items: center; gap: 4px; }

    /* Password strength bar */
    .pw-strength { display: flex; gap: 4px; margin-top: 4px; }
    .pw-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--gray-200); transition: background 150ms; }
    .pw-bar.lvl-1 { background: var(--danger-500); }
    .pw-bar.lvl-2 { background: var(--amber-500); }
    .pw-bar.lvl-3 { background: var(--accent-500); }

    /* Checkbox */
    .check-row {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 13px; color: var(--fg-muted); line-height: 1.5;
      cursor: pointer; margin-bottom: 20px;
    }
    .check-row input {
      width: 18px; height: 18px; accent-color: var(--brand-700);
      margin-top: 1px; flex-shrink: 0;
    }
    .check-row a { color: var(--brand-700); text-decoration: none; font-weight: 500; }
    .check-row a:hover { text-decoration: underline; }

    /* Primary submit button */
    .btn-submit {
      width: 100%;
      height: 48px;
      background: var(--accent-500);
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      border: 0;
      border-radius: 10px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      font-family: inherit;
      transition: background 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .btn-submit:hover { background: var(--accent-600); }
    .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Divider */
    .divider {
      display: flex; align-items: center; gap: 12px;
      margin: 20px 0;
      font-size: 12px; color: var(--fg-soft);
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    }
    .divider::before, .divider::after {
      content: ""; flex: 1; height: 1px; background: var(--border);
    }

    /* Social buttons */
    .social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .btn-social {
      height: 44px;
      background: #fff;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      font-family: inherit; font-size: 14px; font-weight: 600;
      color: var(--fg);
      transition: background 150ms;
    }
    .btn-social:hover { background: var(--gray-50); }

.switch-mode {
      text-align: center; margin-top: 24px;
      font-size: 14px; color: var(--fg-muted);
    }
    .switch-mode button {
      background: transparent; border: 0; cursor: pointer;
      color: var(--brand-700); font-weight: 600; font-family: inherit;
      font-size: 14px; padding: 0;
    }
    .switch-mode button:hover { color: var(--brand-600); }

    /* OTP screen */
    .otp-row { display: flex; gap: 8px; justify-content: center; margin: 8px 0 20px; }
    .otp-input {
      width: 48px; height: 56px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 22px; font-weight: 600;
      background: #fff; outline: none;
    }
    .otp-input:focus { border-color: var(--brand-700); box-shadow: 0 0 0 2px var(--accent-500); }
    .otp-input.filled { background: var(--brand-50); border-color: var(--brand-300); }
    .otp-resend { text-align: center; font-size: 13px; color: var(--fg-muted); margin-bottom: 20px; }
    .otp-resend button { background: transparent; border: 0; cursor: pointer; color: var(--brand-700); font-weight: 600; font-family: inherit; font-size: 13px; padding: 0; }
  

/* Yii2 form binding */
.auth-card form { margin: 0; }
.auth-card .form-group { margin-bottom: 16px; }
.auth-card .field { margin-bottom: 16px; }
.auth-card .help-block, .auth-card .invalid-feedback { display: block; margin-top: 4px; font-size: 12px; color: var(--danger-500); }
.auth-card .has-error .input, .auth-card .is-invalid { border-color: var(--danger-500); }
.auth-card .hint-block { display: block; margin-top: 4px; font-size: 12px; color: var(--fg-soft); }
.auth-card a.auth-link, .auth-card .switch-mode a { background: transparent; border: 0; cursor: pointer; color: var(--brand-700); font-weight: 600; font-family: inherit; font-size: 14px; padding: 0; text-decoration: none; }
.auth-card a.auth-link:hover, .auth-card .switch-mode a:hover { color: var(--brand-600); text-decoration: none; }
.auth-card .auth-tab, .auth-card .auth-tab:hover { text-decoration: none; }
.auth-card .alert { border-radius: 10px; border: 1px solid var(--border); padding: 12px 14px; margin-bottom: 16px; font-size: 13px; }
.auth-card .alert-success { background: var(--success-100); color: var(--success-700); }
.auth-card .alert-danger, .auth-card .alert-error { background: var(--danger-100); color: var(--danger-700); }
.auth-card .alert-warning { background: var(--warn-100); color: var(--warn-700); }
.auth-card .alert-info { background: var(--info-100); color: var(--info-700); }

@font-face {
    font-family: "PetraCore Montserrat";
    src: url("/auth-assets/montserrat-variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.telegram-callout {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: 18px 0 22px;
    padding: 12px 14px;
    border: 1px solid #cfe0ef;
    border-radius: 8px;
    background: #eef6fc;
    color: var(--brand-700);
}

.telegram-callout-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #229ed9;
}

.telegram-callout b,
.telegram-callout span {
    display: block;
}

.telegram-callout b { font-size: 13px; }
.telegram-callout div > span { margin-top: 2px; font-size: 12px; color: var(--gray-600); }
.telegram-callout-link { font-size: 12px; font-weight: 700; color: var(--brand-700); white-space: nowrap; }
.telegram-register-note { margin-top: 14px; text-align: center; font-size: 12px; color: var(--gray-600); }
.telegram-register-note a { color: var(--brand-700); font-weight: 600; }

@media (max-width: 520px) {
    .telegram-callout { grid-template-columns: 36px minmax(0, 1fr); }
    .telegram-callout-link { grid-column: 2; }
}

@font-face {
    font-family: "PetraCore Montserrat";
    src: url("/auth-assets/montserrat-variable.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PetraCore Montserrat";
    src: url("/auth-assets/montserrat-variable.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PetraCore Montserrat";
    src: url("/auth-assets/montserrat-variable.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PetraCore Montserrat";
    src: url("/auth-assets/montserrat-variable.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-sans: "PetraCore Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
    font-synthesis: none;
}