@font-face {
  font-family: Roboto;
  src: url('./roboto-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.tsnext {
  --ts-page: #f2f2f2;
  --ts-surface: #fff;
  --ts-text: #121212;
  --ts-muted: #787878;
  --ts-placeholder: #ababab;
  --ts-input: #f7f7f7;
  --ts-segment: #ebebeb;
  --ts-hover: #dedede;
  --ts-pressed: #c4c4c4;
  --ts-primary: #ff5824;
  --ts-primary-hover: #fa3c00;
  --ts-link: #ff5824;
  --ts-danger: #f42f2f;
  --ts-success: #09b32b;
  --background: 0 0% 95%;
  --foreground: 0 0% 7%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --primary: 14 100% 57%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 92%;
  --secondary-foreground: 0 0% 7%;
  --muted: 0 0% 97%;
  --muted-foreground: 0 0% 47%;
  --accent: 0 0% 92%;
  --accent-foreground: 0 0% 7%;
  --border: 0 0% 87%;
  --input: 0 0% 97%;
  --ring: 14 100% 57%;
}

.tsnext.dark {
  --ts-page: #121212;
  --ts-surface: #2b2b2b;
  --ts-text: #fff;
  --ts-muted: #9b9b9b;
  --ts-placeholder: #717171;
  --ts-input: #363636;
  --ts-segment: #414141;
  --ts-hover: #4b4b4b;
  --ts-pressed: #5c5c5c;
  --ts-primary: #ed3800;
  --ts-primary-hover: #ff4105;
  --ts-link: #fb6b3d;
  --background: 0 0% 7%;
  --foreground: 0 0% 100%;
  --card: 0 0% 17%;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 17%;
  --popover-foreground: 0 0% 100%;
  --primary: 14 100% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 25%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 21%;
  --muted-foreground: 0 0% 61%;
  --accent: 0 0% 29%;
  --accent-foreground: 0 0% 100%;
  --border: 0 0% 29%;
  --input: 0 0% 21%;
  --ring: 14 100% 57%;
}

.tsnext body {
  margin: 0;
  min-height: 100vh;
  background: var(--ts-page);
  color: var(--ts-text);
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.tsnext [hidden] { display: none !important; }
.ts-auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 88px 24px;
}
.ts-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  width: 439px;
  max-width: 100%;
  padding: 32px;
  border-radius: 16px;
  background: var(--ts-surface);
}
.ts-card--wide { width: 500px; }
.ts-device-code { width: 100%; margin-top: 8px; padding: 16px; border-radius: 12px; background: var(--ts-input); text-align: center; }
.ts-device-code p { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--ts-muted); }
.ts-device-code strong { font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: 2px; overflow-wrap: anywhere; }
.ts-device-confirmation .ts-form { gap: 16px; }
.ts-device-hint { margin: 0; font-size: 14px; line-height: 20px; color: var(--ts-muted); }
.ts-permission-group { padding: 16px; border: 1px solid hsl(var(--border)); border-radius: 12px; }
.ts-permission-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 16px; font-weight: 500; line-height: 20px; }
.ts-permission-content { font-size: 14px; line-height: 20px; }
.ts-permission-content ul { margin: 0; padding: 0; list-style: none; }
.ts-device-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-device-actions .ts-button { padding-inline: 12px; }
@media (max-width: 420px) { .ts-device-actions { grid-template-columns: 1fr; } }
.ts-card-heading { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.ts-card h1 { margin: 0; font-size: 24px; font-weight: 500; line-height: 28px; text-align: center; letter-spacing: 0; }
.ts-subtitle { margin: 0; color: var(--ts-muted); text-align: center; font-size: 16px; line-height: 19px; overflow-wrap: anywhere; }
.ts-form { display: flex; flex-direction: column; gap: 24px; width: 100%; margin: 0; }
.ts-fields { display: flex; flex-direction: column; gap: 16px; width: 100%; }
/* Legacy forms use Tailwind spacing; keep field rows on the same 16px rhythm. */
.tsnext :is(.space-y-4, .space-y-5, .space-y-6) > :is(.form-item, .grid:has(> .form-item)) ~ :is(.form-item, .grid:has(> .form-item)) { margin-top: 16px; margin-bottom: 0; }
.tsnext .grid:has(> .form-item) { row-gap: 16px; }
.ts-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 375px; margin: 0 auto; }
.tsnext .form-item { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tsnext .form-item > *,
.tsnext .form-item > :not([hidden]) ~ :not([hidden]) { margin-top: 0; margin-bottom: 0; }
.tsnext .form-label { display: block; margin: 0; padding-left: 4px; font-size: 14px; line-height: 16px; font-weight: 500; color: var(--ts-text); }
.tsnext .input {
  display: block;
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--ts-input);
  color: var(--ts-text);
  font: inherit;
  box-shadow: none;
  outline: none;
}
.tsnext .input::placeholder { color: var(--ts-placeholder); opacity: 1; }
.tsnext .input:focus { border-color: var(--ts-primary); box-shadow: none; outline: none; }
.tsnext .input.input-validation-error, .tsnext .input[aria-invalid="true"] { border-color: var(--ts-danger); }
.tsnext .input:disabled { opacity: .5; cursor: not-allowed; }
.tsnext .input:-webkit-autofill { -webkit-text-fill-color: var(--ts-text); box-shadow: 0 0 0 100px var(--ts-input) inset; }
.tsnext .form-message { font-size: 14px; line-height: 16px; color: var(--ts-danger); padding-left: 4px; }
.tsnext .form-message:empty { display: none; }
.ts-password { position: relative; width: 100%; }
.ts-password .input { padding-right: 48px; }
.ts-password-toggle { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.ts-password-toggle img { width: 24px; height: 24px; }
.ts-password-toggle:hover { background: var(--ts-hover); }
.ts-password-toggle:active { background: var(--ts-pressed); }
.dark .ts-password-toggle img { filter: invert(1); }
.ts-button, .tsnext .btn-default, .tsnext .btn-outline, .tsnext .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--ts-primary);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ts-button { width: 100%; max-width: 375px; align-self: center; }
.ts-button:hover, .tsnext .btn-default:hover { background: var(--ts-primary-hover); }
.ts-button--secondary, .tsnext .btn-outline, .tsnext .btn-secondary { background: var(--ts-input); color: var(--ts-text); }
.ts-button--secondary:hover, .tsnext .btn-outline:hover, .tsnext .btn-secondary:hover { background: var(--ts-hover); }
.ts-button--plain { background: transparent; color: var(--ts-text); }
.ts-button--plain:hover { background: var(--ts-input); }
.ts-button:disabled, .tsnext .btn-default:disabled { opacity: .4; cursor: not-allowed; }
.tsnext :is(button:not(.input), a, summary, input:not(.input), select:not(.input)):focus-visible { outline: 2px solid var(--ts-primary); outline-offset: 3px; }
.ts-login-options { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; }
.ts-check { display: inline-flex; align-items: center; align-self: flex-start; flex-shrink: 0; min-height: 40px; gap: 8px; padding: 0; margin: 0; font-size: 16px; line-height: 19px; cursor: pointer; }
.ts-check-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 40px; border-radius: 8px; }
.tsnext .ts-check-icon > .checkbox { margin: 0; }
.ts-check-text { display: block; font-weight: 400; line-height: 19px; }
.ts-login-options > .ts-check { align-self: center; }
/* Figma: a 20px square inset 2px within the 24px icon slot. */
.tsnext .checkbox {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  margin: 2px;
  padding: 0;
  border: 2px solid #ababab;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: none;
}
.tsnext .checkbox:checked, .tsnext .checkbox:indeterminate { border-color: var(--ts-primary); background: var(--ts-primary); }
.tsnext .checkbox:checked {
  background-image: url('./check-mark.svg');
  background-position: center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
}
.tsnext .checkbox:indeterminate {
  background-image: linear-gradient(#fff, #fff);
  background-position: center;
  background-size: 10px 2px;
  background-repeat: no-repeat;
}
.tsnext .checkbox:disabled { border-color: var(--ts-segment); opacity: .6; cursor: not-allowed; }
.ts-forgot { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 16px; color: var(--ts-link); font-weight: 500; white-space: nowrap; border-radius: 8px; }
.ts-forgot:hover { background: var(--ts-input); }
.ts-text-link { color: var(--ts-link); text-align: center; }
.ts-text-link:hover { text-decoration: underline; }
.ts-segments { display: flex; width: 100%; padding: 4px; margin: 0; border: 0; border-radius: 12px; background: var(--ts-segment); }
.ts-segments label { flex: 1; position: relative; cursor: pointer; }
.ts-segments input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ts-segments span { display: flex; align-items: center; justify-content: center; height: 24px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 16px; }
.ts-segments input:checked + span { background: var(--ts-surface); }
.ts-segments input:focus-visible + span { outline: 2px solid var(--ts-primary); }
.ts-validation { width: 100%; border-radius: 8px; color: var(--ts-danger); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.ts-validation ul { list-style: none; padding: 0; margin: 0; }
.ts-card h1.ts-success, .ts-card h1.ts-error { display: flex; justify-content: center; align-items: center; gap: 8px; }
.ts-card h1.ts-success { color: var(--ts-success); font-size: 20px; line-height: 24px; }
.ts-card h1.ts-error { color: var(--ts-danger); }
.ts-card h1 img { width: 24px; height: 24px; flex-shrink: 0; }
.tsnext .ts-otp { text-align: center; font-size: 24px; letter-spacing: 8px; }
.ts-signout { position: absolute; width: 0; height: 0; border: 0; }
.ts-toolbar { position: absolute; top: 24px; right: 24px; display: flex; align-items: center; gap: 16px; z-index: 10; }
.auth-language-selector { margin: 0; }
.auth-language-selector__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.auth-language-selector__select { max-width: 170px; height: 40px; background: transparent; color: var(--ts-muted); border: 0; border-radius: 8px; padding: 0 24px 0 8px; font: inherit; font-size: 14px; cursor: pointer; }
.auth-language-selector__select option { color: var(--ts-text); background: var(--ts-surface); }
.ts-select { display: inline-block; position: relative; width: 180px; max-width: 100%; }
.ts-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 12px; background: var(--ts-input); color: var(--ts-text); font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.tsnext:not(.dark) .auth-language-selector .ts-select-trigger { background: var(--ts-surface); }
.ts-select-trigger::after { content: ''; flex-shrink: 0; width: 20px; height: 20px; background: var(--ts-muted); mask: url('./chevron.svg') center / contain no-repeat; transform: rotate(180deg); }
.ts-select-trigger[aria-expanded="true"]::after { transform: rotate(0); }
.ts-select-trigger:disabled { opacity: .5; cursor: not-allowed; }
.ts-select--field { display: block; width: 100%; min-width: 0; }
.ts-select--field .ts-select-trigger { display: flex; text-align: start; }
.ts-select--field .ts-select-list { width: 100%; max-width: 100%; }
.ts-select-list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1002; width: max-content; min-width: 100%; max-width: min(280px, calc(100vw - 32px)); max-height: min(360px, calc(100svh - 100px)); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none; border: .5px solid var(--ts-hover); border-radius: 12px; background: var(--ts-surface); box-shadow: 0 2px 24px #00000014, 0 0 2px #00000014; }
.ts-select-list [role="option"] { display: flex; align-items: center; min-height: 36px; padding: 8px 12px; border-radius: 4px; font-size: 14px; line-height: 20px; color: var(--ts-text); cursor: pointer; }
.ts-select-list [role="option"]:hover, .ts-select-list .is-active { background: var(--ts-hover); }
.ts-select-list [aria-selected="true"] { color: var(--ts-link); font-weight: 500; }
.ts-select-list [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ts-select--above .ts-select-list { top: auto; bottom: calc(100% + 4px); }
.dark .ts-select-list { background: var(--ts-input); border-color: #454545; }
.dark .ts-select-list [role="option"]:hover, .dark .ts-select-list .is-active { background: var(--ts-segment); }
.auth-theme-toggle { width: 72px; height: 40px; display: inline-flex; align-items: center; flex-shrink: 0; padding: 4px; position: relative; border: 0; border-radius: 999px; background: #f2f2f2; box-shadow: inset 0 0 0 1px #e6e6e6, 0 1px 3px #00000008; cursor: pointer; }
.auth-theme-toggle__thumb { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px #00000014; transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.dark .auth-theme-toggle { background: #0a0a0a; box-shadow: inset 0 0 0 1px #242424, 0 1px 3px #00000033; }
.dark .auth-theme-toggle__thumb { background: #2b2b2b; box-shadow: 0 1px 5px #00000047; }
.auth-theme-toggle[aria-checked="true"] .auth-theme-toggle__thumb { transform: translateX(32px); }
.auth-theme-toggle__option { position: relative; display: grid; place-items: center; width: 32px; height: 32px; color: #919191; }
.auth-theme-toggle__option--light { color: #121212; }
.auth-theme-toggle[aria-checked="true"] .auth-theme-toggle__option--dark { color: #fff; }
.auth-theme-toggle[aria-checked="true"] .auth-theme-toggle__option--light { color: #787878; }
.auth-theme-toggle__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-theme-toggle__icon--moon { transform: scaleX(-1); }
.ts-header { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding: 32px; padding-right: 320px; background: var(--ts-surface); }
.ts-brand { font-size: 20px; font-weight: 500; }
.ts-header nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.ts-header nav a:hover { color: var(--ts-link); }
.ts-workspace-page { display: flex; flex-direction: column; min-height: 100vh; }
.ts-mobile-menu { position: relative; flex-shrink: 0; }
.ts-mobile-menu-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; display: flex; flex-direction: column; align-items: stretch; width: 280px; max-width: calc(100vw - 48px); max-height: calc(100dvh - 88px); overflow-y: auto; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: 16px; background: var(--ts-surface); box-shadow: 0 8px 24px #00000024; }
.ts-mobile-menu-panel > .auth-theme-toggle { align-self: flex-start; }
.ts-workspace { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 32px 24px; }
[data-ts-workspace-header], [data-ts-workspace-footer] { background: var(--ts-surface); border-color: hsl(var(--border)); }
[data-ts-workspace-header] > nav, [data-ts-workspace-footer] > div { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 24px; }
.tsnext [data-ts-workspace-header] .btn-outline { width: auto; min-height: 40px; height: 40px; padding: 8px 16px; font-size: 14px; font-weight: 400; border: 1px solid hsl(var(--border)); background: transparent; }
[data-ts-workspace-header] details > .card { z-index: 60; background: var(--ts-surface); box-shadow: 0 2px 24px #00000014; }
[data-ts-workspace-footer] { margin-top: auto; }
.tsnext .card { border: 0; border-radius: 16px; box-shadow: none; }
.tsnext .card-title { font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: 0; }
.tsnext .card-description { font-size: 16px; line-height: 19px; }
.tsnext .text-primary { color: var(--ts-link); }
.ts-legacy { width: 500px; }
.ts-legacy > div { width: 100%; }
.ts-legacy > .py-8 { padding: 0; }
.ts-legacy .card { margin-top: 24px; }
.ts-legacy .card-header, .ts-legacy .card-content { padding: 0; }
.ts-legacy .card-header { margin-bottom: 24px; text-align: center; }
.ts-legacy .card-title { font-size: 16px; font-weight: 400; line-height: 19px; color: var(--ts-muted); }
.ts-legacy .form-label svg { display: none; }
.ts-legacy .btn-default { width: 100%; }
.ts-legacy .text-4xl { margin-bottom: 24px; }
.ts-legacy .alert-default, .ts-legacy .alert-destructive { border-radius: 12px; }

@media (max-width: 600px) {
  .ts-auth-main { padding: 88px 16px 64px; }
  .ts-card { padding: 24px; }
  .ts-card h1 { font-size: 22px; line-height: 26px; }
  .ts-toolbar { top: 16px; right: 16px; gap: 8px; }
  .ts-forgot { padding: 12px 0; font-size: 14px; }
  .ts-check { font-size: 14px; }
  .ts-login-options { flex-wrap: wrap; }
  .ts-header { padding: 80px 24px 24px; }
  .ts-workspace { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tsnext *, .tsnext *::before, .tsnext *::after { transition: none !important; scroll-behavior: auto !important; }
}