@adonis-agora/authkit-server 0.83.0 → 0.84.0

package/build/host/views/login.edge

@@ -19,7 +19,13 @@
         @end
 
         <div class="mt-6">
-          <label for="email" class="mb-1 block text-sm font-medium text-gray-700">{{ t('login.email_label') }}</label>
+          {{-- Selo "último usado": este dispositivo entrou por e-mail (senha, link, código ou passkey). --}}
+          <div class="mb-1 flex items-center justify-between">
+            <label for="email" class="block text-sm font-medium text-gray-700">{{ t('login.email_label') }}</label>
+            @if(['password', 'magic_link', 'otp', 'passkey'].includes(lastUsedLoginMethod))
+              <span class="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">{{ t('login.last_used') }}</span>
+            @end
+          </div>
           <input id="email" name="email" type="email" required autofocus
             autocomplete="{{ authMethods && authMethods.passkeyAutofill ? 'username webauthn' : 'username' }}"
             class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-hidden transition focus:border-gray-900 focus:ring-2 focus:ring-gray-900" />
@@ -49,7 +55,7 @@
 
         @each(provider in (authMethods && authMethods.social ? authMethods.social : []))
           <a href="/auth/{{ provider }}/redirect/{{ uid }}"
-            class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 mb-2">
+            class="relative flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 mb-2">
             @if(provider === 'google')
               <svg class="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
                 <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z"/>
@@ -61,6 +67,9 @@
             @else
               {{ t('login.social_provider', { provider: provider }) }}
             @end
+            @if(lastUsedLoginMethod === 'social:' + provider)
+              <span class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">{{ t('login.last_used') }}</span>
+            @end
           </a>
         @end
       @end
@@ -106,7 +115,12 @@
           @end
 
           <div class="mt-6">
-            <label for="password" class="mb-1 block text-sm font-medium text-gray-700">{{ t('login.password_label') }}</label>
+            <div class="mb-1 flex items-center justify-between">
+              <label for="password" class="block text-sm font-medium text-gray-700">{{ t('login.password_label') }}</label>
+              @if(lastUsedLoginMethod === 'password')
+                <span class="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">{{ t('login.last_used') }}</span>
+              @end
+            </div>
             <input id="password" name="password" type="password" required autofocus
               class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-hidden transition focus:border-gray-900 focus:ring-2 focus:ring-gray-900" />
           </div>
@@ -189,8 +203,11 @@
         <form method="POST" action="/auth/interaction/{{ uid }}/magic" class="mt-4">
           <input type="hidden" name="_csrf" value="{{ csrfToken }}">
           <button type="submit"
-            class="w-full rounded-lg border border-gray-300 py-2.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50">
+            class="relative w-full rounded-lg border border-gray-300 py-2.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50">
             {{ t('login.magic_link_button') }}
+            @if(lastUsedLoginMethod === 'magic_link' || lastUsedLoginMethod === 'otp')
+              <span class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">{{ t('login.last_used') }}</span>
+            @end
           </button>
         </form>
       @end
@@ -204,8 +221,11 @@
           <input type="hidden" name="response" id="passkey-response">
         </form>
         <button type="button" id="passkey-button"
-          class="mt-4 w-full rounded-lg border border-gray-300 py-2.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50">
+          class="relative mt-4 w-full rounded-lg border border-gray-300 py-2.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50">
           {{ t('login.passkey_button') }}
+          @if(lastUsedLoginMethod === 'passkey')
+            <span class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">{{ t('login.last_used') }}</span>
+          @end
         </button>
         <p id="passkey-error" class="mt-3 hidden text-sm text-red-600">{{ t('mfa_challenge.passkey_error') }}</p>
         {{-- M12: script inline sem nonce é bloqueado por CSP `script-src 'self'` — extraído

package/build/host/views/partials/styles.edge

@@ -1,3 +1,3 @@
 {{-- Gerado por scripts/build_host_css.mjs — não editar à mão. --}}
 <style>/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-green-50:oklch(98.2% .018 155.826);--color-green-700:oklch(52.7% .154 150.069);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-blue-50:oklch(97% .014 254.604);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wide:.025em;--tracking-widest:.1em;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}button:not(:disabled),[role=button]:not(:disabled){cursor:pointer}}@layer components;@layer utilities{.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.my-6{margin-block:calc(var(--spacing) * 6)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-48{height:calc(var(--spacing) * 48)}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing) * 4)}.w-6{width:calc(var(--spacing) * 6)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-48{width:calc(var(--spacing) * 48)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.flex-1{flex:1}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blue-300{border-color:var(--color-blue-300)}.border-emerald-300{border-color:var(--color-emerald-300)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-900{border-color:var(--color-gray-900)}.border-red-200{border-color:var(--color-red-200)}.border-red-300{border-color:var(--color-red-300)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-600{background-color:var(--color-red-600)}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.4em\]{--tw-tracking:.4em;letter-spacing:.4em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-all{word-break:break-all}.text-amber-600{color:var(--color-amber-600)}.text-amber-800{color:var(--color-amber-800)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-600{color:var(--color-emerald-600)}.text-emerald-700{color:var(--color-emerald-700)}.text-emerald-800{color:var(--color-emerald-800)}.text-emerald-900{color:var(--color-emerald-900)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-700{color:var(--color-green-700)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-red-900{color:var(--color-red-900)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-amber-200{--tw-ring-color:var(--color-amber-200)}.ring-black\/5{--tw-ring-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.ring-black\/5{--tw-ring-color:color-mix(in oklab, var(--color-black) 5%, transparent)}}.ring-blue-200{--tw-ring-color:var(--color-blue-200)}.ring-emerald-200{--tw-ring-color:var(--color-emerald-200)}.ring-gray-900{--tw-ring-color:var(--color-gray-900)}.ring-red-200{--tw-ring-color:var(--color-red-200)}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.select-none{-webkit-user-select:none;user-select:none}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media (hover:hover){.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}}.focus\:border-gray-900:focus{border-color:var(--color-gray-900)}.focus\:border-red-600:focus{border-color:var(--color-red-600)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-gray-900:focus{--tw-ring-color:var(--color-gray-900)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}</style>
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-green-50:oklch(98.2% .018 155.826);--color-green-700:oklch(52.7% .154 150.069);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-blue-50:oklch(97% .014 254.604);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wide:.025em;--tracking-widest:.1em;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}button:not(:disabled),[role=button]:not(:disabled){cursor:pointer}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.top-1\/2{top:50%}.right-2{right:calc(var(--spacing) * 2)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.my-6{margin-block:calc(var(--spacing) * 6)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-48{height:calc(var(--spacing) * 48)}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing) * 4)}.w-6{width:calc(var(--spacing) * 6)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-48{width:calc(var(--spacing) * 48)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.flex-1{flex:1}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blue-300{border-color:var(--color-blue-300)}.border-emerald-300{border-color:var(--color-emerald-300)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-900{border-color:var(--color-gray-900)}.border-red-200{border-color:var(--color-red-200)}.border-red-300{border-color:var(--color-red-300)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-600{background-color:var(--color-red-600)}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.4em\]{--tw-tracking:.4em;letter-spacing:.4em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-all{word-break:break-all}.text-amber-600{color:var(--color-amber-600)}.text-amber-800{color:var(--color-amber-800)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-600{color:var(--color-emerald-600)}.text-emerald-700{color:var(--color-emerald-700)}.text-emerald-800{color:var(--color-emerald-800)}.text-emerald-900{color:var(--color-emerald-900)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-700{color:var(--color-green-700)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-red-900{color:var(--color-red-900)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-amber-200{--tw-ring-color:var(--color-amber-200)}.ring-black\/5{--tw-ring-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.ring-black\/5{--tw-ring-color:color-mix(in oklab, var(--color-black) 5%, transparent)}}.ring-blue-200{--tw-ring-color:var(--color-blue-200)}.ring-emerald-200{--tw-ring-color:var(--color-emerald-200)}.ring-gray-900{--tw-ring-color:var(--color-gray-900)}.ring-red-200{--tw-ring-color:var(--color-red-200)}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.select-none{-webkit-user-select:none;user-select:none}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media (hover:hover){.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}}.focus\:border-gray-900:focus{border-color:var(--color-gray-900)}.focus\:border-red-600:focus{border-color:var(--color-red-600)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-gray-900:focus{--tw-ring-color:var(--color-gray-900)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}</style>

package/build/src/define_config.d.ts

@@ -586,10 +586,18 @@ export interface LoginConfigInput {
      * idêntico ao de antes, e-mail idêntico). Ver `host/otp_login.ts`.
      */
     otp?: OtpLoginConfigInput;
+    /**
+     * Selo "último usado" na tela de login: o método com que este dispositivo
+     * entrou da última vez (senha, link, código, passkey, social) fica num cookie
+     * sem identidade e a tela o destaca. Por dispositivo, nunca por conta — não
+     * vaza como uma conta entra. Default: **ligado**. Ver `host/last_login_method.ts`.
+     */
+    lastUsedMethod?: boolean;
 }
 export interface ResolvedLoginConfig {
     requireVerifiedEmail: boolean;
     otp: ResolvedOtpLoginConfig;
+    lastUsedMethod: boolean;
 }
 export declare function resolveLogin(input?: LoginConfigInput): ResolvedLoginConfig;
 /**

package/build/src/define_config.js

@@ -154,6 +154,7 @@ export function resolveLogin(input) {
     return {
         requireVerifiedEmail: input?.requireVerifiedEmail ?? false,
         otp: resolveOtpLoginConfig(input?.otp),
+        lastUsedMethod: input?.lastUsedMethod ?? true,
     };
 }
 export function resolveRegistration(input) {

package/build/src/host/controllers/interaction_controller.js

@@ -10,6 +10,7 @@ import { beginCustomMfa, clearMfaFlow, customMfaViewProps, getMfaFlow, initializ
 import { sendMagicLinkEmail, sendOtpUnlockEmail } from '../default_mailer.js';
 import { normalizeEmailIdentifier } from '../email_identifier.js';
 import { translate } from '../i18n.js';
+import { readLastLoginMethod, rememberLastLoginMethod } from '../last_login_method.js';
 import { assertLoginAllowed, attemptPasswordLogin, isEmailUnverifiedBlock, } from '../login_attempt.js';
 import { magicChannelProp, normalizeLoginChannel } from '../login_channel.js';
 import { notifyLoginSuccess } from '../login_notify.js';
@@ -125,6 +126,7 @@ export default class AuthInteractionController {
                 message: maintenance.message ?? translate(cfg.messages, 'maintenance.default_message'),
             });
         }
+        rememberLastLoginMethod(ctx, cfg, `custom:${input.method}`);
         const gate = await this.secondFactorGate(ctx, cfg, account.id, details, input.method, input.factorId, input.remember, input.passwordless === true);
         if (gate.kind === 'challenge') {
             ctx.session.put(MFA_CUSTOM_PRIMARY_KEY, {
@@ -175,6 +177,8 @@ export default class AuthInteractionController {
             authMethods,
             magicLinkAvailable: authMethods.magicLink && magicLinkCapableConfig,
             otpEnabled,
+            // Selo "último usado": método com que ESTE dispositivo entrou da última vez.
+            lastUsedLoginMethod: readLastLoginMethod(ctx, cfg),
         };
     }
     /**
@@ -495,6 +499,7 @@ export default class AuthInteractionController {
         // Gate do 2º fator — a MESMA regra dos três caminhos de login (ver
         // `secondFactorGate`). Quando desafia, não finaliza a interaction: guarda o
         // accountId pendente e devolve a tela.
+        rememberLastLoginMethod(ctx, cfg, 'password');
         const gate = await this.secondFactorGate(ctx, cfg, acc.id, details, 'pwd');
         if (gate.kind === 'challenge')
             return gate.response;
@@ -1349,6 +1354,7 @@ export default class AuthInteractionController {
             });
         }
         // Conta com segundo fator não termina o login só com o e-mail.
+        rememberLastLoginMethod(ctx, cfg, 'magic_link');
         const magicGate = await this.secondFactorGate(ctx, cfg, acc.id, await service.interactions.details(ctx), 'email');
         if (magicGate.kind === 'challenge')
             return magicGate.response;
@@ -1471,6 +1477,7 @@ export default class AuthInteractionController {
                 clientId,
             });
             // Conta com segundo fator não termina o login só com o código do e-mail.
+            rememberLastLoginMethod(ctx, cfg, 'otp');
             const otpGate = await this.secondFactorGate(ctx, cfg, result.account.id, await service.interactions.details(ctx), 'email');
             if (otpGate.kind === 'challenge')
                 return otpGate.response;
@@ -1738,6 +1745,11 @@ export default class AuthInteractionController {
                 return ctx.response.redirect(`/auth/interaction/${ctx.request.param('uid')}`);
             return this.finishVerifiedMfa(ctx, cfg, details, 'webauthn', 'webauthn');
         }
+        // Passkey como fator PRIMÁRIO (passkey-first/autofill). Como 2º fator ela não
+        // é o método com que a pessoa se identificou — o selo fica com o primário.
+        if (ctx.session.get(MFA_PENDING_KEY) !== accountId) {
+            rememberLastLoginMethod(ctx, cfg, 'passkey');
+        }
         if (cfg.mfa) {
             const gate = await this.secondFactorGate(ctx, cfg, accountId, details, 'webauthn');
             if (gate.kind === 'challenge')
@@ -1845,6 +1857,7 @@ export default class AuthInteractionController {
         // Senha trocada: limpa o step e finaliza o login.
         ctx.session.forget(PASSWORD_EXPIRED_KEY);
         // Verifica se precisa de MFA mesmo após a troca — mesma regra do resto.
+        rememberLastLoginMethod(ctx, cfg, 'password');
         const expiredGate = await this.secondFactorGate(ctx, cfg, accountId, details, 'pwd');
         if (expiredGate.kind === 'challenge')
             return expiredGate.response;

package/build/src/host/controllers/registration_controller.js

@@ -7,6 +7,7 @@ import { guardBotProtection, resolveEffectiveBotProtection } from '../bot_protec
 import { brandFor } from '../branding.js';
 import { sendEmailVerificationEmail, sendMagicLinkEmail, sendPasswordResetEmail, } from '../default_mailer.js';
 import { translate } from '../i18n.js';
+import { rememberLastLoginMethod } from '../last_login_method.js';
 import { authkitOrigin } from '../origin.js';
 import { RuntimeSettings, resolveRuntimeSettings } from '../runtime_settings.js';
 import { resolveEffectiveAuthMethods, resolveEffectiveMaintenanceMode, resolveEffectiveRegistration, } from '../runtime_toggles.js';
@@ -165,6 +166,8 @@ export default class AuthRegistrationController {
             ip: ctx.request.ip?.() ?? null,
             clientId: details.params.client_id ?? null,
         });
+        // Conta nova entra por senha: o selo "último usado" já nasce no método certo.
+        rememberLastLoginMethod(ctx, cfg, 'password');
         // Finaliza a interaction como login (interactionFinished escreve o redirect 303 que
         // retoma o authorize; o form nativo da tela segue esse redirect no sucesso).
         const result = await service.interactions.login(ctx, {

package/build/src/host/controllers/social_controller.js

@@ -3,6 +3,7 @@ import { randomUUID } from 'node:crypto';
 import { supportsLoginMethodsPreference, supportsMagicLink, supportsPasskeys, supportsProviderIdentity, } from '../../accounts/account_store.js';
 import { resolveAccountRoles } from '../account_roles.js';
 import { normalizeEmailIdentifier } from '../email_identifier.js';
+import { rememberLastLoginMethod } from '../last_login_method.js';
 import { assertLoginAllowed } from '../login_attempt.js';
 import { resolveRuntimeSettingsOrNoop } from '../runtime_settings.js';
 import { resolveEffectiveAuthMethods } from '../runtime_toggles.js';
@@ -196,6 +197,7 @@ export default class AuthSocialController {
             }
         }
         ctx.session.forget(UID_SESSION_KEY);
+        rememberLastLoginMethod(ctx, cfg, `social:${provider}`);
         // 2º fator: o provider provou a identidade, mas quem cadastrou TOTP/passkey
         // aqui espera que o fator valha também neste caminho. O desafio mora no
         // interaction controller (mesmo gate de senha/magic link/OTP), então este

package/build/src/host/i18n.d.ts

@@ -50,6 +50,7 @@ export declare const DEFAULT_MESSAGES: {
     'login.magic_link_sent': string;
     'signup.magic_link_sent': string;
     'login.passkey_button': string;
+    'login.last_used': string;
     'login.otp_label': string;
     'login.otp_placeholder': string;
     'login.otp_submit': string;
@@ -809,6 +810,7 @@ export declare const PT_BR_MESSAGES: {
     'login.magic_link_sent': string;
     'signup.magic_link_sent': string;
     'login.passkey_button': string;
+    'login.last_used': string;
     'login.otp_label': string;
     'login.otp_placeholder': string;
     'login.otp_submit': string;

package/build/src/host/i18n.js

@@ -41,6 +41,8 @@ export const DEFAULT_MESSAGES = {
     'login.magic_link_sent': 'If the account exists, we sent you a login link.',
     'signup.magic_link_sent': 'Check your email — we sent you a link to finish creating your account.',
     'login.passkey_button': 'Sign in with a passkey',
+    // Selo do método com que este dispositivo entrou da última vez.
+    'login.last_used': 'Last used',
     // Login por OTP (código digitável).
     'login.otp_label': 'Enter the login code from the email',
     'login.otp_placeholder': '000000',
@@ -891,6 +893,7 @@ export const PT_BR_MESSAGES = {
     'login.magic_link_sent': 'Se a conta existir, enviamos um link de login.',
     'signup.magic_link_sent': 'Enviamos um link para o seu e-mail. Abra-o para concluir o cadastro.',
     'login.passkey_button': 'Entrar com passkey',
+    'login.last_used': 'Último usado',
     // Login por OTP (código digitável).
     'login.otp_label': 'Digite o código de login do e-mail',
     'login.otp_placeholder': '000000',

package/build/src/host/last_login_method.d.ts

@@ -0,0 +1,67 @@
+import type { HttpContext } from '@adonisjs/core/http';
+/**
+ * "Último método usado" no login (o selo "Last used" do Cloudflare, Vercel, Clerk…).
+ *
+ * O método fica num cookie DESTE DISPOSITIVO, não na conta. É de propósito:
+ *  - o passo 1 (identifier) ainda não sabe quem é o usuário, e é exatamente ali
+ *    que o selo mais ajuda ("da última vez você entrou com Google");
+ *  - guardar por conta e mostrar no passo 2 diria a quem digita um e-mail qualquer
+ *    como aquela conta entra — vazamento de enumeração. O cookie só conta ao
+ *    próprio browser o que ele mesmo fez.
+ *
+ * O cookie não carrega identidade nenhuma (nem e-mail, nem accountId), só o método.
+ * É puramente de SUPERFÍCIE: a tela destaca um botão, mas nada no fluxo muda — os
+ * métodos oferecidos continuam vindo de `authMethods`, e um valor adulterado no
+ * cookie só destaca outro botão (ou nenhum, se não passar na validação).
+ *
+ * Gravado quando o fator PRIMÁRIO é aceito. Numa conta com 2º fator, isso acontece
+ * antes do desafio de MFA: o selo responde "como você se identificou", que é o
+ * botão que a pessoa procura na próxima vez.
+ */
+/** Nome do cookie do último método de login. */
+export declare const LAST_LOGIN_METHOD_COOKIE = "authkit_last_login";
+/**
+ * Método de login primário. `social:<provider>` e `custom:<id>` carregam o id do
+ * provedor/método para a tela destacar o botão certo entre vários.
+ */
+export type LastLoginMethod = 'password' | 'magic_link' | 'otp' | 'passkey' | `social:${string}` | `custom:${string}`;
+/**
+ * Valida um valor lido do cookie. Só os métodos conhecidos passam; qualquer outra
+ * coisa (ausente, lixo, valor adulterado) vira `undefined` — sem selo.
+ */
+export declare function normalizeLastLoginMethod(raw: unknown): LastLoginMethod | undefined;
+/**
+ * Lê o último método deste dispositivo para a tela de login. Fail-safe: feature
+ * desligada, ctx sem cookies ou qualquer erro → `undefined` (sem selo).
+ */
+export declare function readLastLoginMethod(ctx: HttpContext, cfg: {
+    login?: {
+        lastUsedMethod?: boolean;
+    };
+}): LastLoginMethod | undefined;
+/**
+ * Registra o método primário que acabou de ser aceito. Grava via resposta do
+ * Adonis; quando o login termina no `interactionFinished` (que encerra a resposta
+ * crua), o `completeLogin` repassa o cookie pendente — ver
+ * {@link relayPendingCookies}. Best-effort: nunca derruba o login.
+ */
+export declare function rememberLastLoginMethod(ctx: HttpContext, cfg: {
+    login?: {
+        lastUsedMethod?: boolean;
+    };
+}, method: LastLoginMethod): void;
+/**
+ * Repassa os `Set-Cookie` que o handler gravou na resposta do Adonis para a
+ * resposta crua do Node.
+ *
+ * O Adonis só escreve os headers no `finish()`, depois do handler. Mas o
+ * `interactionFinished` do oidc-provider escreve o 303 e dá `res.end()` direto na
+ * resposta crua — quando o Adonis chega no `finish()`, a resposta já saiu e todo
+ * cookie gravado via `ctx.response.cookie()` no mesmo request é descartado em
+ * silêncio. Chamado pelo `completeLogin` logo antes do `interactionFinished`.
+ *
+ * Os cookies saem do Adonis ao serem repassados, então não há como irem em dobro.
+ * O `Set-Cookie` que o próprio oidc-provider grava depois é ACRESCENTADO aos
+ * existentes (a lib `cookies` do Koa preserva o header), então nada se perde.
+ */
+export declare function relayPendingCookies(ctx: HttpContext): void;

package/build/src/host/last_login_method.js

@@ -0,0 +1,119 @@
+/**
+ * "Último método usado" no login (o selo "Last used" do Cloudflare, Vercel, Clerk…).
+ *
+ * O método fica num cookie DESTE DISPOSITIVO, não na conta. É de propósito:
+ *  - o passo 1 (identifier) ainda não sabe quem é o usuário, e é exatamente ali
+ *    que o selo mais ajuda ("da última vez você entrou com Google");
+ *  - guardar por conta e mostrar no passo 2 diria a quem digita um e-mail qualquer
+ *    como aquela conta entra — vazamento de enumeração. O cookie só conta ao
+ *    próprio browser o que ele mesmo fez.
+ *
+ * O cookie não carrega identidade nenhuma (nem e-mail, nem accountId), só o método.
+ * É puramente de SUPERFÍCIE: a tela destaca um botão, mas nada no fluxo muda — os
+ * métodos oferecidos continuam vindo de `authMethods`, e um valor adulterado no
+ * cookie só destaca outro botão (ou nenhum, se não passar na validação).
+ *
+ * Gravado quando o fator PRIMÁRIO é aceito. Numa conta com 2º fator, isso acontece
+ * antes do desafio de MFA: o selo responde "como você se identificou", que é o
+ * botão que a pessoa procura na próxima vez.
+ */
+/** Nome do cookie do último método de login. */
+export const LAST_LOGIN_METHOD_COOKIE = 'authkit_last_login';
+/** Validade do cookie: 1 ano (renovado a cada login). */
+const LAST_LOGIN_METHOD_MAX_AGE = 365 * 24 * 60 * 60;
+const FIXED_METHODS = new Set(['password', 'magic_link', 'otp', 'passkey']);
+/** Ids de provedor/método: mesmo formato curto que vai em rota/config. */
+const QUALIFIED_METHOD = /^(social|custom):[a-z0-9][a-z0-9_-]{0,63}$/i;
+/**
+ * Valida um valor lido do cookie. Só os métodos conhecidos passam; qualquer outra
+ * coisa (ausente, lixo, valor adulterado) vira `undefined` — sem selo.
+ */
+export function normalizeLastLoginMethod(raw) {
+    if (typeof raw !== 'string')
+        return undefined;
+    if (FIXED_METHODS.has(raw) || QUALIFIED_METHOD.test(raw))
+        return raw;
+    return undefined;
+}
+/** `false` desliga a feature (`login.lastUsedMethod: false`); ausente = ligada. */
+function isEnabled(cfg) {
+    return cfg.login?.lastUsedMethod !== false;
+}
+/**
+ * Lê o último método deste dispositivo para a tela de login. Fail-safe: feature
+ * desligada, ctx sem cookies ou qualquer erro → `undefined` (sem selo).
+ */
+export function readLastLoginMethod(ctx, cfg) {
+    if (!isEnabled(cfg))
+        return undefined;
+    try {
+        return normalizeLastLoginMethod(ctx.request.plainCookie?.(LAST_LOGIN_METHOD_COOKIE));
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Registra o método primário que acabou de ser aceito. Grava via resposta do
+ * Adonis; quando o login termina no `interactionFinished` (que encerra a resposta
+ * crua), o `completeLogin` repassa o cookie pendente — ver
+ * {@link relayPendingCookies}. Best-effort: nunca derruba o login.
+ */
+export function rememberLastLoginMethod(ctx, cfg, method) {
+    if (!isEnabled(cfg))
+        return;
+    if (!normalizeLastLoginMethod(method))
+        return;
+    try {
+        ctx.response.plainCookie?.(LAST_LOGIN_METHOD_COOKIE, method, {
+            httpOnly: true,
+            sameSite: 'lax',
+            path: '/',
+            maxAge: LAST_LOGIN_METHOD_MAX_AGE,
+            secure: ctx.request.secure?.() ?? false,
+        });
+    }
+    catch {
+        // Selo é cosmético: falha ao gravar não interfere no login.
+    }
+}
+/**
+ * Repassa os `Set-Cookie` que o handler gravou na resposta do Adonis para a
+ * resposta crua do Node.
+ *
+ * O Adonis só escreve os headers no `finish()`, depois do handler. Mas o
+ * `interactionFinished` do oidc-provider escreve o 303 e dá `res.end()` direto na
+ * resposta crua — quando o Adonis chega no `finish()`, a resposta já saiu e todo
+ * cookie gravado via `ctx.response.cookie()` no mesmo request é descartado em
+ * silêncio. Chamado pelo `completeLogin` logo antes do `interactionFinished`.
+ *
+ * Os cookies saem do Adonis ao serem repassados, então não há como irem em dobro.
+ * O `Set-Cookie` que o próprio oidc-provider grava depois é ACRESCENTADO aos
+ * existentes (a lib `cookies` do Koa preserva o header), então nada se perde.
+ */
+export function relayPendingCookies(ctx) {
+    try {
+        const response = ctx.response;
+        const raw = response?.response;
+        if (!raw || typeof raw.setHeader !== 'function' || raw.headersSent)
+            return;
+        const pending = response.getHeader?.('set-cookie');
+        if (pending === undefined || pending === null)
+            return;
+        const toList = (value) => value === undefined || value === null
+            ? []
+            : Array.isArray(value)
+                ? value.map(String)
+                : [String(value)];
+        // O `getHeader` do Adonis também enxerga o que já está na resposta crua, então
+        // a lista pendente pode repetir o que lá está — dedup preservando a ordem.
+        const cookies = [...new Set([...toList(raw.getHeader?.('set-cookie')), ...toList(pending)])];
+        // O `removeHeader` do Adonis apaga também da resposta crua — por isso vem
+        // ANTES do `setHeader`, que regrava a lista completa.
+        response.removeHeader?.('set-cookie');
+        raw.setHeader('set-cookie', cookies);
+    }
+    catch {
+        // Repasse é best-effort: nunca derruba o login.
+    }
+}

package/build/src/provider/interaction_actions.js

@@ -1,5 +1,6 @@
 import { readActiveOrgFromHostCtx } from '../host/active_org_cookie.js';
 import { InteractionSessionLostException, isInteractionSessionLost, } from '../host/interaction_recovery.js';
+import { relayPendingCookies } from '../host/last_login_method.js';
 /**
  * Choke point ÚNICO de `interactionDetails`: converte o `SessionNotFound` do
  * `oidc-provider` (sessão de interaction perdida — caso NORMAL) na exceção
@@ -31,6 +32,7 @@ export function createInteractionActions(provider, deps) {
             const account = await deps.verifyCredentials(email, password);
             if (!account)
                 return { ok: false };
+            relayPendingCookies(ctx);
             await provider.interactionFinished(ctx.request.request, ctx.response.response, { login: { accountId: account.id } }, { mergeWithLastSubmission: false });
             return { ok: true };
         },
@@ -47,6 +49,10 @@ export function createInteractionActions(provider, deps) {
             // O campo `remember` é nativo do oidc-provider v9 — veja resume.js.
             if (extra?.remember === false)
                 login.remember = false;
+            // O `interactionFinished` encerra a resposta crua: os cookies que o handler
+            // gravou no Adonis (último método de login, dispositivo confiável) só saem
+            // se forem repassados antes.
+            relayPendingCookies(ctx);
             await provider.interactionFinished(ctx.request.request, ctx.response.response, { login }, { mergeWithLastSubmission: false });
             return { ok: true };
         },
@@ -75,6 +81,7 @@ export function createInteractionActions(provider, deps) {
                 }
             }
             const grantId = await grant.save();
+            relayPendingCookies(ctx);
             return provider.interactionFinished(ctx.request.request, ctx.response.response, { consent: { grantId } }, { mergeWithLastSubmission: true });
         },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adonis-agora/authkit-server",
-  "version": "0.83.0",
+  "version": "0.84.0",
   "description": "AdonisJS OIDC/OAuth2 provider (Identity Provider) toolkit: ejectable auth server with sessions, rate-limiting, MFA/TOTP, audit log, federated logout and OpenTelemetry metrics.",
   "license": "MIT",
   "author": "dudousxd",
@@ -116,7 +116,7 @@
     "qrcode": "1.5.4"
   },
   "devDependencies": {
-    "@adonis-agora/authkit-react": "0.25.2",
+    "@adonis-agora/authkit-react": "0.26.0",
     "@adonis-agora/durable": "0.53.0",
     "@adonis-agora/telescope": "0.23.0",
     "@adonisjs/ally": "6.3.2",