:root {
  --page-bg: #f6f8fb
}

:root {
  --ink: #151923
}

:root {
  --muted: #687383
}

:root {
  --surface: #ffffff
}

:root {
  --line: #dbe3ee
}

:root {
  --unlock-main: #116b72
}

:root {
  --unlock-deep: #173852
}

:root {
  --unlock-soft: #d7f5ef
}

:root {
  --lock-main: #9c3152
}

:root {
  --lock-deep: #4a2548
}

:root {
  --lock-soft: #ffe3d8
}

:root {
  --motion-mobile: 250ms
}

:root {
  --motion-desktop: 150ms
}

* {
  box-sizing: border-box
}

html {
  min-height: 100%
}

body {
  min-height: 100vh
}

body {
  margin: 0
}

body {
  color: var(--ink)
}

body {
  background: linear-gradient(135deg, #f7fbff, #fff7f0 52%, #f5f8ff)
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}

body {
  letter-spacing: 0
}

button {
  font: inherit
}

input {
  font: inherit
}

button {
  border: 0
}

button {
  cursor: pointer
}

.app-shell {
  width: min(960px, calc(100% - 32px))
}

.app-shell {
  min-height: calc(100vh - 32px)
}

.app-shell {
  margin: 16px auto
}

.app-shell {
  display: grid
}

.app-shell {
  grid-template-rows: auto auto 1fr
}

.app-shell {
  gap: 18px
}

.app-shell {
  padding: 20px
}

.app-shell {
  border: 1px solid rgba(23, 56, 82, 0.12)
}

.app-shell {
  border-radius: 8px
}

.app-shell {
  background: rgba(255, 255, 255, 0.82)
}

.app-shell {
  box-shadow: 0 28px 90px rgba(31, 42, 68, 0.14)
}

.app-shell {
  backdrop-filter: blur(24px)
}

.tool-head {
  display: flex
}

.tool-head {
  align-items: center
}

.tool-head {
  justify-content: space-between
}

.tool-head {
  gap: 16px
}

.brand {
  display: flex
}

.brand {
  align-items: center
}

.brand {
  gap: 14px
}

.brand-mark {
  width: 58px
}

.brand-mark {
  height: 58px
}

.brand-mark {
  display: grid
}

.brand-mark {
  place-items: center
}

.brand-mark {
  border-radius: 8px
}

.brand-mark {
  color: #ffffff
}

.brand-mark {
  background: linear-gradient(135deg, var(--unlock-deep), var(--unlock-main))
}

.brand-mark {
  font-weight: 800
}

.brand-mark {
  font-size: 15px
}

.brand-mark {
  box-shadow: 0 18px 38px rgba(17, 107, 114, 0.22)
}

.mode-lock .brand-mark {
  background: linear-gradient(135deg, var(--lock-deep), var(--lock-main))
}

.mode-lock .brand-mark {
  box-shadow: 0 18px 38px rgba(156, 49, 82, 0.22)
}

.eyebrow {
  margin: 0 0 4px
}

.eyebrow {
  color: var(--muted)
}

.eyebrow {
  font-size: 13px
}

.eyebrow {
  font-weight: 700
}

.eyebrow {
  text-transform: uppercase
}

.brand-copy h1 {
  margin: 0
}

.brand-copy h1 {
  font-size: 32px
}

.brand-copy h1 {
  line-height: 1
}

.privacy-note {
  margin: 0
}

.privacy-note {
  color: var(--unlock-deep)
}

.privacy-note {
  font-size: 14px
}

.privacy-note {
  font-weight: 700
}

.privacy-note {
  background: var(--unlock-soft)
}

.privacy-note {
  border-radius: 8px
}

.privacy-note {
  padding: 10px 12px
}

.mode-lock .privacy-note {
  color: var(--lock-deep)
}

.mode-lock .privacy-note {
  background: var(--lock-soft)
}

.tabbar {
  position: relative
}

.tabbar {
  display: grid
}

.tabbar {
  grid-template-columns: repeat(2, 1fr)
}

.tabbar {
  gap: 0
}

.tabbar {
  padding: 5px
}

.tabbar {
  border: 1px solid var(--line)
}

.tabbar {
  border-radius: 8px
}

.tabbar {
  background: #eef3f8
}

.tabbar {
  overflow: hidden
}

.tab-button {
  position: relative
}

.tab-button {
  z-index: 1
}

.tab-button {
  min-height: 48px
}

.tab-button {
  border-radius: 7px
}

.tab-button {
  color: #536071
}

.tab-button {
  background: transparent
}

.tab-button {
  font-weight: 800
}

.tab-button {
  transition: color var(--motion-mobile) ease, transform var(--motion-mobile) ease
}

.tab-button.is-active {
  color: #ffffff
}

.tab-button:focus-visible {
  outline: 3px solid rgba(17, 107, 114, 0.28)
}

.tab-button:focus-visible {
  outline-offset: 2px
}

.tab-glider {
  position: absolute
}

.tab-glider {
  inset: 5px auto 5px 5px
}

.tab-glider {
  width: calc(50% - 5px)
}

.tab-glider {
  border-radius: 7px
}

.tab-glider {
  background: linear-gradient(135deg, var(--unlock-deep), var(--unlock-main))
}

.tab-glider {
  box-shadow: 0 12px 28px rgba(17, 107, 114, 0.26)
}

.tab-glider {
  transform: translateX(0)
}

.tab-glider {
  transition: transform var(--motion-mobile) cubic-bezier(0.22, 1, 0.36, 1), background var(--motion-mobile) ease
}

.mode-lock .tab-glider {
  transform: translateX(100%)
}

.mode-lock .tab-glider {
  background: linear-gradient(135deg, var(--lock-deep), var(--lock-main))
}

.mode-lock .tab-glider {
  box-shadow: 0 12px 28px rgba(156, 49, 82, 0.26)
}

.panel-stage {
  position: relative
}

.panel-stage {
  min-height: 610px
}

.panel-stage {
  overflow: hidden
}

.tool-panel {
  position: absolute
}

.tool-panel {
  inset: 0
}

.tool-panel {
  display: grid
}

.tool-panel {
  align-content: start
}

.tool-panel {
  gap: 16px
}

.tool-panel {
  padding: 26px
}

.tool-panel {
  border-radius: 8px
}

.tool-panel {
  border: 1px solid rgba(23, 56, 82, 0.12)
}

.tool-panel {
  background: linear-gradient(145deg, #ffffff, #effbf8)
}

.tool-panel {
  opacity: 0
}

.tool-panel {
  pointer-events: none
}

.tool-panel {
  transform: translateX(28px)
}

.tool-panel {
  transition: opacity var(--motion-mobile) ease, transform var(--motion-mobile) cubic-bezier(0.22, 1, 0.36, 1)
}

.tool-panel.is-active {
  opacity: 1
}

.tool-panel.is-active {
  pointer-events: auto
}

.tool-panel.is-active {
  transform: translateX(0)
}

.tool-panel[data-panel="lock"] {
  background: linear-gradient(145deg, #ffffff, #fff1e8)
}

.tool-panel[data-panel="lock"] {
  transform: translateX(-28px)
}

.tool-panel[data-panel="lock"].is-active {
  transform: translateX(0)
}

.panel-intro {
  max-width: 680px
}

.panel-intro {
  padding-bottom: 6px
}

.panel-kicker {
  margin: 0 0 8px
}

.panel-kicker {
  color: var(--unlock-main)
}

.panel-kicker {
  font-size: 14px
}

.panel-kicker {
  font-weight: 900
}

.panel-kicker {
  text-transform: uppercase
}

.tool-panel[data-panel="lock"] .panel-kicker {
  color: var(--lock-main)
}

.panel-intro h2 {
  margin: 0
}

.panel-intro h2 {
  max-width: 620px
}

.panel-intro h2 {
  color: #101826
}

.panel-intro h2 {
  font-size: 34px
}

.panel-intro h2 {
  line-height: 1.08
}

.panel-intro p:last-child {
  margin: 12px 0 0
}

.panel-intro p:last-child {
  color: var(--muted)
}

.panel-intro p:last-child {
  font-size: 16px
}

.panel-intro p:last-child {
  line-height: 1.5
}

.field-group {
  display: grid
}

.field-group {
  gap: 9px
}

.field-group {
  color: #283241
}

.field-group {
  font-weight: 800
}

.field-group span {
  font-size: 14px
}

.field-group input {
  width: 100%
}

.field-group input {
  min-height: 54px
}

.field-group input {
  border: 1px solid #cdd8e6
}

.field-group input {
  border-radius: 8px
}

.field-group input {
  background: rgba(255, 255, 255, 0.88)
}

.field-group input {
  padding: 13px 14px
}

.field-group input {
  color: var(--ink)
}

.field-group input {
  transition: border-color var(--motion-mobile) ease, box-shadow var(--motion-mobile) ease, transform var(--motion-mobile) ease
}

.field-group input:focus {
  outline: 0
}

.field-group input:focus {
  border-color: var(--unlock-main)
}

.field-group input:focus {
  box-shadow: 0 0 0 4px rgba(17, 107, 114, 0.13)
}

.tool-panel[data-panel="lock"] .field-group input:focus {
  border-color: var(--lock-main)
}

.tool-panel[data-panel="lock"] .field-group input:focus {
  box-shadow: 0 0 0 4px rgba(156, 49, 82, 0.13)
}

.action-button {
  min-height: 56px
}

.action-button {
  width: 100%
}

.action-button {
  border-radius: 8px
}

.action-button {
  color: #ffffff
}

.action-button {
  background: linear-gradient(135deg, var(--unlock-deep), var(--unlock-main))
}

.action-button {
  font-weight: 900
}

.action-button {
  box-shadow: 0 18px 38px rgba(17, 107, 114, 0.24)
}

.action-button {
  transition: transform var(--motion-mobile) ease, filter var(--motion-mobile) ease, box-shadow var(--motion-mobile) ease
}

.tool-panel[data-panel="lock"] .action-button {
  background: linear-gradient(135deg, var(--lock-deep), var(--lock-main))
}

.tool-panel[data-panel="lock"] .action-button {
  box-shadow: 0 18px 38px rgba(156, 49, 82, 0.24)
}

.action-button:disabled {
  cursor: wait
}

.action-button:disabled {
  opacity: 0.7
}

.action-button:focus-visible {
  outline: 3px solid rgba(17, 107, 114, 0.28)
}

.action-button:focus-visible {
  outline-offset: 3px
}

.local-copy {
  margin: 0
}

.local-copy {
  color: #596579
}

.local-copy {
  font-size: 14px
}

.local-copy {
  line-height: 1.5
}

.status {
  min-height: 58px
}

.status {
  display: flex
}

.status {
  align-items: center
}

.status {
  border-radius: 8px
}

.status {
  padding: 14px 16px
}

.status {
  color: #314053
}

.status {
  background: rgba(255, 255, 255, 0.72)
}

.status {
  border: 1px solid #dbe3ee
}

.status {
  line-height: 1.45
}

.status {
  overflow-wrap: anywhere
}

.status {
  transition: transform var(--motion-mobile) ease, background var(--motion-mobile) ease, border-color var(--motion-mobile) ease, color var(--motion-mobile) ease
}

.status.is-fresh {
  animation: status-pop var(--motion-mobile) ease
}

.status[data-state="processing"] {
  color: #173852
}

.status[data-state="processing"] {
  background: #e8f6ff
}

.status[data-state="success"] {
  color: #145443
}

.status[data-state="success"] {
  background: #dff8ec
}

.status[data-state="success"] {
  border-color: #91d9bd
}

.status[data-state="error"] {
  color: #7b1e31
}

.status[data-state="error"] {
  background: #ffe8ec
}

.status[data-state="error"] {
  border-color: #f0a7b4
}

@keyframes status-pop {
  0% {
    transform: translateY(4px)
  }

  100% {
    transform: translateY(0)
  }
}

@media (hover: hover) and (pointer: fine) {
  .tab-button {
    transition-duration: var(--motion-desktop)
  }

  .tab-button:hover {
    transform: translateY(-1px)
  }

  .field-group input {
    transition-duration: var(--motion-desktop)
  }

  .field-group input:hover {
    border-color: #aebed0
  }

  .action-button {
    transition-duration: var(--motion-desktop)
  }

  .action-button:hover {
    filter: brightness(1.04)
  }

  .action-button:hover {
    transform: translateY(-2px)
  }

  .action-button:active {
    transform: translateY(0)
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100% - 20px, 560px)
  }

  .app-shell {
    min-height: calc(100vh - 20px)
  }

  .app-shell {
    margin: 10px auto
  }

  .app-shell {
    padding: 14px
  }

  .tool-head {
    align-items: flex-start
  }

  .tool-head {
    flex-direction: column
  }

  .brand-mark {
    width: 50px
  }

  .brand-mark {
    height: 50px
  }

  .brand-copy h1 {
    font-size: 28px
  }

  .privacy-note {
    width: 100%
  }

  .panel-stage {
    min-height: 650px
  }

  .tool-panel {
    padding: 20px
  }

  .panel-intro h2 {
    font-size: 28px
  }

  .tab-button {
    min-height: 46px
  }
}

@media (max-width: 430px) {
  .app-shell {
    width: calc(100% - 12px)
  }

  .app-shell {
    margin: 6px auto
  }

  .app-shell {
    padding: 10px
  }

  .panel-stage {
    min-height: 690px
  }

  .tool-panel {
    padding: 16px
  }

  .panel-intro h2 {
    font-size: 24px
  }

  .panel-intro p:last-child {
    font-size: 15px
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 1ms
  }

  * {
    transition-duration: 1ms
  }
}