:root {
      --brand: #912D2D;
      --brand-2: #912D2D;
      --text: #222222;
      --muted: #717171;
      --line: #ebebeb;
      --bg: #ffffff;
      --card-shadow: 0 6px 20px rgba(0,0,0,0.08);
      --radius: 12px;
    }

    * { box-sizing: border-box; }

    html, body {
      height: 100%;
      margin: 0;
      background: #fff;
      color: var(--text);
      font-family: "Airbnb Cereal", "AirbnbCereal", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
    }

    .topbar { display:flex; align-items:center; justify-content:space-between; padding:8px 28px; border-bottom:1.5px solid var(--line); }
    .topbar-left { display:flex; align-items:center; gap:10px; }
    .logoimg { height:52px; width:auto; display:block; }
    .topbar-right { display:flex; gap:14px; align-items:center; color:var(--text); }
    .icon-btn { width:32px; height:32px; border:1px solid var(--line); border-radius:999px; display:grid; place-items:center; background:#fff; cursor:pointer; }
	
	@font-face{
	  font-family: "PB";
	  src: url("Assets/pb-font.ttf") format("truetype");
	  font-display: swap;
	  font-style: normal;
	}

	/* keep your existing .topbar rules; just add position:relative */
	.topbar { position: relative;
	z-index: 10; }

	.topbar-center{
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%); /* true middle of the topbar box */
	  margin-top: 4px;
	  pointer-events: none; /* avoid blocking clicks on underlying area */
	}

	.topbar-title{
	  pointer-events: auto;
	  font-family: "PB", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	  font-weight: 600;
	  font-size: 36px;
	  line-height: 1;
	  color: #762929;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  max-width: min(60vw, calc(100% - 240px));
	  letter-spacing: -0.03em; 
	}

    .wrapper { display:grid; place-items:start center; min-height:calc(100vh - 72px); padding-top:56px; }

    .card { width:760px; max-width:calc(100vw - 40px); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--card-shadow); background:#fff; }
    .card-inner { padding:28px 28px 24px; }
    .headline { text-align:center; font-size: 26px;
      font-weight: 700;
      font-family: 'MyTallFont', "Airbnb Cereal", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
      line-height: 1.15;
      letter-spacing: -0.03em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .section-divider { height:1px; background:var(--line); margin:18px 0 32px; }

    @font-face {
      font-family: 'MyTallFont';
      src: url('Assets/welcome3.ttf') format('truetype');
      font-weight: 200 700;
      font-style: normal;
      font-display: swap;
    }
    h1 {
      margin: 8px 0 24px;
      font-size: 26px;
      font-weight: 700;
      font-family: 'MyTallFont', "Airbnb Cereal", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
      line-height: 1.15;
      letter-spacing: -0.03em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .field { margin:14px 0; }
    .label-top { display:block; font-weight:600; font-size:14px; margin:0 0 6px 2px; color:var(--text); }
    .input {
      width:100%;
      height:52px;
      border:1px solid var(--line);
      border-radius:12px;
      padding:0 14px;
      display:flex;
      align-items:center;
      position:relative;
    }
    .input input {
      border:0;
      outline:0;
      flex:1;
      font-size:16px;
      background:transparent;
    }
    .input.has-toggle input{ padding-right:74px; }
    .show-btn{
      position:absolute;
      right:6px;
      top:50%;
      transform:translateY(-50%);
      border:0;
      background:transparent;
      color:#762929;
      font-weight:600;
      cursor:pointer;
      padding:6px 12px;
      border-radius:8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
    }
    .show-btn:focus-visible{
      outline:2px solid #000;
      outline-offset:2px;
    }
    .show-btn-icon{
      width:24px;
      height:auto;
      display:block;
    }
    .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      border:0;
    }

    .primary {
      display:grid;
      place-items:center;
      position:relative;
      margin-top:16px; width:100%; height:52px; border-radius:12px; border:0; cursor:pointer;
      background:#912D2D; color:#fff; font-weight:600; font-size:16px;
      transition: background-color 180ms ease-in-out, filter 120ms ease-in-out;
    }
    .primary:hover { background:#762929; }
    .primary:focus-visible { outline:2px solid #000; outline-offset:2px; }
    .primary:active { filter:brightness(0.96); }
    @media (prefers-reduced-motion: reduce) { .primary { transition:none; } }
    .btn-label{ grid-area:1/1; }
    .btn-spinner{
      grid-area:1/1;
      width:16px;
      height:16px;
      border:2px solid currentColor;
      border-right-color:transparent;
      border-radius:50%;
      animation:spin .7s linear infinite;
      display:none;
    }
    .primary.is-loading .btn-label{ visibility:hidden; }
    .primary.is-loading .btn-spinner{ display:inline-block; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .hr { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:18px 0 8px; color:var(--muted); font-size:12px; }
    .hr:before, .hr:after { content:""; height:1px; background:var(--line); display:block; }

    .oauth-list { display:grid; gap:12px; }
    .oauth-btn { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:52px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-weight:500; color:var(--text); text-align:center; font-size:16px; }
    .oauth-btn:hover { background:#fafafa; }
    .oauth-icon { position:absolute; left:14px; width:22px; height:22px; display:grid; place-items:center; }

	.oauth-btn.is-loading{
	  pointer-events: none;
	}

	/* Hide existing contents while loading */
	.oauth-btn.is-loading .oauth-icon,
	.oauth-btn.is-loading .oauth-label{
	  visibility: hidden; /* preserves layout so button doesn't jump */
	}

	/* Spinner host sits centered and only shows while loading */
	.oauth-btn .spinner{
	  position: absolute;
	  inset: 0;
	  display: none;
	  align-items: center;
	  justify-content: center;
	}
	.oauth-btn.is-loading .spinner{
	  display: flex;
	}

	/* The actual spinner ring */
	.oauth-btn .spinner::before{
	  content: "";
	  width: 20px;
	  height: 20px;
	  border: 2px solid currentColor;
	  border-right-color: transparent;
	  border-radius: 50%;
	  animation: pb-spin 0.8s linear infinite;
	}

	@keyframes pb-spin { to { transform: rotate(360deg); } }

	/* (Optional) Respect reduced motion */
	@media (prefers-reduced-motion: reduce){
	  .oauth-btn .spinner::before{ animation: none; }
	}

    .inline-cta { margin-top:12px; text-align:center; font-size:14px; color:var(--muted); }
    .inline-cta a { color:var(--text); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
    .inline-cta a:focus-visible { outline:2px solid #000; outline-offset:2px; border-radius:4px; }

    /* New bits for Sign in */
    .checkbox-row { display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
    .checkbox-row input[type="checkbox"] { width:18px; height:18px; }
    .checkbox-row label { font-size:14px; color:var(--text); user-select:none; }

    .bottom-actions { display:flex; justify-content:flex-end; margin-top:10px; }
    .quiet-link {
      appearance:none; background:none; border:0; padding:0; font:inherit; cursor:pointer;
      color:#4b65e9; text-decoration:none;
    }
    .quiet-link:focus-visible { outline:2px solid #000; outline-offset:2px; border-radius:4px; }

    @media (max-width:640px){ .card-inner{ padding:22px; } }

    /* Row holds toggle on the left and the link on the right */
    .options-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 10px 0 4px;
    }
    
    /* Accessible label wrapping the control + text */
    .switch {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        user-select: none;
    }
    
    /* Hide native checkbox but keep it accessible */
    .switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    :root{
        --track-w: 44px;   /* slider width */
        --track-h: 26px;   /* slider height */
        --thumb:   22px;   /* thumb diameter */
        --gap:      2px;   /* visual padding on each side */
        --border:   1px;   /* slider border thickness */
        --move: calc(var(--track-w) - var(--thumb) - (2 * var(--gap)) - (2 * var(--border)));
        --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
        --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      
      /* Track */
      .slider {
        width: var(--track-w);
        height: var(--track-h);
        background: #e9e9e9;
        border: 1px solid var(--line);
        border-radius: 999px;
        position: relative;
        transition: background-color 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
      }
      
      /* Thumb (centered vertically) */
      .slider::before {
        content: "";
        position: absolute;
        top: 50%;
        left: var(--gap);
        width: var(--thumb);
        height: var(--thumb);
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0,0,0,0.18);
        transform: translate(0, -50%);
        transition: transform 300ms var(--ease-spring), box-shadow 260ms var(--ease);
      }
      
      /* ON state — exact symmetry */
      .switch input:checked + .slider {
        background: var(--brand);
        border-color: var(--brand);
      }
      .switch input:checked + .slider::before {
        transform: translate(var(--move), -50%);
      }
      
    
    /* Focus state */
    .switch input:focus-visible + .slider {
        outline: 2px solid #000;
        outline-offset: 3px;
    }
    
    /* Label text next to the switch */
    .switch .switch-label {
        font-size: 14px;
        color: var(--text);
    }
    
    /* Keep your existing quiet-link; it now sits on the same row, right side */
    .quiet-link {
        appearance: none;
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        cursor: pointer;
        font-size: 14px;
        color: var(--text);
        text-decoration: none;   /* not underlined */
      }
      .quiet-link:focus-visible {
        outline: 2px solid #000;
        outline-offset: 2px;
        border-radius: 4px;
      }
    
    @media (prefers-reduced-motion: reduce) {
        .slider, .slider::before { transition: none; }
    }