@use 'sass:math'; $bg: #f2f2f7; $text: #1c1c1e; $muted: #8e8e93; $primary: #007aff; $card: #ffffff; $border: #e5e5ea; $shadow: 0 8px 30px rgba(0,0,0,0.06); .login-container { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(180deg, #f5f7fb, #eef1f7); padding: 24px; } .login-card { width: min(960px, 100%); background: $card; border-radius: 24px; border: 1px solid $border; box-shadow: $shadow; padding: clamp(20px, 4vw, 40px); display: grid; grid-template-rows: auto auto auto auto; gap: 24px; } .brand { text-align: center; .logo { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; font-size: 42px; margin-bottom: 4px; } h1 { font-size: clamp(20px, 2vw, 26px); color: $text; margin: 0; } p { color: $muted; margin: 6px 0 0; } } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; .form-row { display: grid; gap: 8px; label { color: $text; font-weight: 600; } input { height: 44px; border: 1px solid $border; border-radius: 12px; padding: 0 14px; font-size: 16px; outline: none; background: $card; transition: box-shadow .2s ease, border-color .2s ease; &:focus { border-color: $primary; box-shadow: 0 0 0 4px color-mix(in srgb, $primary 12%, transparent); } } } .ios-primary { grid-column: 1 / -1; height: 46px; border: none; border-radius: 14px; background: $primary; color: white; font-weight: 600; letter-spacing: .3px; cursor: pointer; transition: transform .04s ease, filter .2s ease; &:active { transform: scale(.998); } &:disabled { filter: grayscale(.2) opacity(.8); cursor: not-allowed; } } } .quick-roles { .divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: $muted; &::before, &::after { content: ''; height: 1px; background: $border; display: block; } span { padding: 2px 8px; border-radius: 999px; background: #f7f7fa; font-size: 12px; } } .roles-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; .role-btn { height: 64px; border-radius: 14px; border: 1px solid $border; background: white; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; transition: box-shadow .2s ease, transform .04s ease, border-color .2s ease; .icon { font-size: 18px; } span:last-child { font-weight: 600; color: $text; } &:hover { border-color: color-mix(in srgb, $primary 20%, $border); box-shadow: 0 6px 18px rgba(0,0,0,.04); } &:active { transform: translateY(1px); } } } } .footer { display: flex; gap: 12px; align-items: center; justify-content: center; color: $muted; font-size: 12px; a { color: inherit; text-decoration: none; } } @media (max-width: 920px) { .form { grid-template-columns: 1fr; } .roles-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 520px) { .roles-grid { grid-template-columns: repeat(2, 1fr) !important; } }