:root {
     --bg: #ffffff;
     --fg: #0a0a0a;
     --muted: #6b7280;
     --muted-2: #374151;
     --border: #e5e7eb;
     --card: #f9fafb;
     --brand-2: #0ea5e9;
     --shadow: 0 6px 24px rgba(0, 0, 0, .08);
     --radius: 14px;
 }

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

 html,
 body {
     height: 100%
 }

 body {
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
     background: var(--bg);
     color: var(--fg);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     moz-osx-font-smoothing: grayscale;
     display: grid;
     grid-template-rows: auto 1fr auto;
 }

 body::before {
     content: "";
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: -1;
     /* background-image:
         linear-gradient(rgba(213, 214, 216, 0.12) 2px, transparent 1px),
         linear-gradient(90deg, rgba(213, 214, 216, 0.12) 2px, transparent 1px); */

     /* --gap: 28px;

     --dot: 2px;

     --dot-color: rgba(213, 214, 216, 0.25);

     background-image: radial-gradient(circle at 1px 1px, var(--dot-color) var(--dot), transparent var(--dot)); */
     background-size: 28px 28px;
     background-position: center;
 }

 a {
     color: inherit;
     text-decoration: none
 }

 /* Top brand bar (simple) */
 .nav {
     padding: 16px 20px;
 }

 .brand {
     max-width: 1100px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 800;
 }

 .brand .dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--brand-2)
 }

 /* Auth layout */
 /* .auth {
     margin-top: 100px;
     display: grid;
     place-items: center;
     padding: 24px 20px 40px;
 } */


 .auth {
     min-height: 100dvh;
     display: flex;
     align-items: center;
     /* vertical */
     justify-content: center;
     /* horizontal */
     padding: 16px;
 }

 .auth-card {
     width: 100%;
     max-width: 460px;
     /* background: #fff; */
     /* border: 1px solid var(--border); */
     border-radius: 20px;
     /* box-shadow: var(--shadow); */
     padding: 22px;
 }

 .auth-head {
     text-align: center;
     margin-bottom: 12px;
 }

 .auth-head h1 {
     font-size: clamp(22px, 3vw, 28px);
     font-weight: 800;
     letter-spacing: -.01em;
     line-height: 1.15;
 }

 .auth-head p {
     color: var(--muted);
     font-size: .95rem;
     margin-top: 4px;
 }

 .btn,
 .btn-primary,
 .btn-ghost {
     appearance: none;
     border-radius: 12px;
     padding: 10px 14px;
     /* font-weight: 600; */
     cursor: pointer;
     transition: .2s;
     border: 1px solid var(--border);
     background: #fff;
     width: 100%;
 }

 .btn:hover,
 .btn-ghost:hover {
     box-shadow: var(--shadow)
 }

 .btn-primary {
     background: #111827;
     color: #fff;
     border-color: #111827;
     font-size: 20px;
 }

 .btn-primary:hover {
     transform: translateY(-1px);
     box-shadow: 0 8px 24px rgba(17, 24, 39, .18)
 }

 /* Google button (custom) */
 .btn-google {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     font-weight: 700;
 }

 .btn-google svg {
     width: 18px;
     height: 18px;
     flex: 0 0 18px
 }

 /* Divider */
 .divider {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     gap: 10px;
     color: var(--muted);
     font-size: .9rem;
     margin: 14px 0;
 }

 .divider::before,
 .divider::after {
     content: "";
     height: 1px;
     background: var(--border);
     display: block;
 }

 /* Form */
 .form {
     display: grid;
     gap: 12px;
 }

 .field {
     display: grid;
     gap: 6px
 }

 .label {
     font-weight: 600;
     font-size: .95rem
 }

 .input {
     width: 100%;
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 12px 12px;
     font-size: 1rem;
     background: #fff;
     outline: none;
 }

 .input:focus {
     border-color: #111827;
     box-shadow: 0 0 0 3px rgba(17, 24, 39, .08)
 }

 .row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     flex-wrap: wrap;
 }

 .muted {
     color: var(--muted);
     font-size: .92rem
 }

 .link {
     color: var(--muted-2);
     font-weight: 600;
     text-decoration: underline
 }

 .foot-note {
     text-align: center;
     color: var(--muted);
     font-size: .9rem;
     margin-top: 12px;
 }

 footer {
     padding: 18px 20px;
     color: var(--muted);
 }

 .foot {
     max-width: 1100px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     gap: 12px;
     flex-wrap: wrap;
 }

 @media (max-width: 480px) {
     .auth-card {
         padding: 18px
     }
 }

 .logo {

     height: 100px;
     width: 100px;
 }

 .signUpRow a {

     padding-top: 20px;
     text-align: center !important;
     margin: auto;
     text-decoration: none;
     font-size: 15px;
 }

 #displayMessages {

     margin-top: 50PX;
     text-align: center;
 }

 .logo-wrap {
     display: flex;
     justify-content: center;
     /* horizontal */
     align-items: center;
     /* vertical */
     /* optional sizing for the area you want to center in: */
     min-height: 120px;
     /* or 100vh to center on the page */
 }

 .latex-logo {
     color: #ff6b35;
     font-size: 45px;
 }

 @media (orientation: landscape) and (max-height: 603px){
  .auth{
    align-items: flex-start;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: clamp(8px, env(safe-area-inset-top, 0px), 16px); /* NOT env + 24px */
  }
  .auth-card{ margin-top: 0 !important; }
  .latex-logo{ margin-top: 0 !important; } /* overrides your 60px rule */
}


@media (max-height:701px) {
   .auth{
    align-items: flex-start;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: clamp(8px, env(safe-area-inset-top, 0px), 16px); /* NOT env + 24px */
  }

}