* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

:root {
   --purple: #bfa8e7;
   --purple-deep: #a47ce5;
   --purple-glow: #b1a0e8;
   --green: #c3e7bf;
   --green-light: #d8e7d8;
   --green-glow: #d7fae4;
   --cyan: #c7e6eb;

   .form-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
   }

   --bg-1: #d9e0fe;
   --bg-2: #dfb4b4;
   --bg-3: #cadbfc;
   --text: #0f172a;
   --muted: #64748b;
   --glass: rgba(255, 255, 255, 0.75);
}

html,
body {
   height: 100%;
}

/* Always respect the HTML 'hidden' attribute (phone-first flow hides password row) */
[hidden] {
   display: none !important;
}

body {
   background: var(--bg-1);
   color: var(--text);

   .actions {
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .link {
      background: transparent;
      border: none;
      padding: 0;
      color: #334155;
      font-size: 13px;
      text-decoration: underline;
      cursor: pointer;
   }

   .link:hover {
      color: #111827;
   }

   overflow: hidden;
   position: relative;
}

/* === Animated Background === */
.bg {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
}

/* Gradient mesh background */
.bg::before {
   content: "";
   position: absolute;
   inset: -50%;
   background:
      radial-gradient(ellipse 80% 50% at 20% 30%, rgba(124, 58, 237, 0.18) 0%, transparent 55%),
      radial-gradient(ellipse 60% 40% at 80% 70%, rgba(34, 197, 94, 0.14) 0%, transparent 55%),
      radial-gradient(ellipse 50% 30% at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 60%);
   animation: meshRotate 30s linear infinite;
}

@keyframes meshRotate {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

/* Floating orbs */
.orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(90px);
   opacity: 0.35;
   will-change: transform;
}

.orb-1 {
   width: 520px;
   height: 520px;
   top: -18%;
   left: -12%;
   background: radial-gradient(circle, rgba(124, 58, 237, 0.6) 0%, transparent 70%);
   animation: orbit1 20s ease-in-out infinite;
}

.orb-2 {
   width: 460px;
   height: 460px;
   bottom: -22%;
   right: -12%;
   background: radial-gradient(circle, rgba(34, 197, 94, 0.55) 0%, transparent 70%);
   animation: orbit2 18s ease-in-out infinite;
}

.orb-3 {
   width: 320px;
   height: 320px;
   top: 45%;
   left: 55%;
   background: radial-gradient(circle, rgba(6, 182, 212, 0.5) 0%, transparent 70%);
   animation: orbit3 15s ease-in-out infinite;
}

@keyframes orbit1 {

   0%,
   100% {
      transform: translate(0, 0) scale(1);
   }

   25% {
      transform: translate(50px, 30px) scale(1.05);
   }

   50% {
      transform: translate(30px, -20px) scale(0.95);
   }

   75% {
      transform: translate(-30px, 20px) scale(1.02);
   }
}

@keyframes orbit2 {

   0%,
   100% {
      transform: translate(0, 0) scale(1);
   }

   33% {
      transform: translate(-40px, -30px) scale(1.08);
   }

   66% {
      transform: translate(30px, 40px) scale(0.92);
   }
}

@keyframes orbit3 {

   0%,
   100% {
      transform: translate(-50%, -50%) scale(1);
   }

   50% {
      transform: translate(-50%, -50%) translateY(-30px) scale(1.1);
   }
}

/* Animated grid */
.grid {
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
   background-size: 70px 70px;
   mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 15%, transparent 70%);
   animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {

   0%,
   100% {
      opacity: 0.4;
   }

   50% {
      opacity: 0.7;
   }
}

/* Floating particles */
.bg::after {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(2px 2px at 20% 30%, rgba(124, 58, 237, 0.35), transparent),
      radial-gradient(2px 2px at 40% 70%, rgba(34, 197, 94, 0.35), transparent),
      radial-gradient(1px 1px at 60% 20%, rgba(15, 23, 42, 0.2), transparent),
      radial-gradient(2px 2px at 80% 50%, rgba(6, 182, 212, 0.3), transparent),
      radial-gradient(1px 1px at 10% 80%, rgba(124, 58, 237, 0.25), transparent),
      radial-gradient(1px 1px at 70% 90%, rgba(34, 197, 94, 0.25), transparent),
      radial-gradient(2px 2px at 30% 50%, rgba(15, 23, 42, 0.15), transparent),
      radial-gradient(1px 1px at 90% 10%, rgba(124, 58, 237, 0.3), transparent);
   background-size:
      260px 260px, 320px 320px, 210px 210px, 300px 300px,
      330px 330px, 250px 250px, 270px 270px, 230px 230px;
   animation: particlesDrift 40s linear infinite;
}

@keyframes particlesDrift {
   0% {
      transform: translateY(0) translateX(0);
   }

   100% {
      transform: translateY(-100px) translateX(50px);
   }
}

/* === Page Container === */
.page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   position: relative;
   z-index: 1;
}

/* === Login Card === */
.card {
   width: min(420px, 100%);
   background: var(--glass);
   border: 1px solid rgba(124, 58, 237, 0.12);
   border-radius: 28px;
   padding: 40px;
   backdrop-filter: blur(18px);
   position: relative;
   overflow: hidden;
   animation: cardAppear 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.04) inset,
      0 25px 50px -18px rgba(15, 23, 42, 0.25),
      0 0 90px -30px rgba(124, 58, 237, 0.25);
}

@keyframes cardAppear {
   0% {
      opacity: 0;
      transform: translateY(40px) scale(0.95);
      filter: blur(10px);
   }

   100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
   }
}

/* Card glow effect */
.card::before {
   content: "";
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: linear-gradient(135deg, var(--purple), var(--green), var(--cyan), var(--purple));
   background-size: 300% 300%;
   border-radius: 30px;
   z-index: -1;
   opacity: 0;
   animation: borderGlow 6s ease-in-out infinite;
   transition: opacity 0.5s ease;
}

.card:hover::before {
   opacity: 0.5;
}

@keyframes borderGlow {

   0%,
   100% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }
}

/* Card inner glow */
.card::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 55%;
   background: linear-gradient(180deg,
         rgba(124, 58, 237, 0.06) 0%,
         transparent 100%);
   border-radius: 28px 28px 0 0;
   pointer-events: none;
}

/* === Brand Section === */
.brand {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-bottom: 32px;
   position: relative;
   z-index: 1;
}

/* Clean logo without background */
.logo {
   width: 64px;
   height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   animation: logoFloat 4s ease-in-out infinite;
}

.logo::before {
   content: "";
   position: absolute;
   inset: -8px;
   background: radial-gradient(circle, rgba(168, 85, 247, 0.3), transparent 70%);
   border-radius: 50%;
   animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoFloat {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-4px);
   }
}

@keyframes logoPulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 0.5;
   }

   50% {
      transform: scale(1.15);
      opacity: 0.8;
   }
}

.logo img {
   width: 56px;
   height: 56px;
   object-fit: contain;
   position: relative;
   z-index: 1;
   filter: drop-shadow(0 4px 12px rgba(168, 85, 247, 0.4)) drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3));
   transition: transform 0.3s ease, filter 0.3s ease;
}

.logo:hover img {
   transform: scale(1.08) rotate(5deg);
   filter: drop-shadow(0 8px 20px rgba(168, 85, 247, 0.5)) drop-shadow(0 4px 8px rgba(34, 197, 94, 0.4));
}

.brand-text {
   flex: 1;
}

.greeting-banner {
   margin-bottom: 10px;
   padding: 12px 16px;
   border-radius: 12px;
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(34, 197, 94, 0.08) 100%);
   border: 1px solid rgba(99, 102, 241, 0.2);
   color: #4338ca;
   font-size: 15px;
   font-weight: 600;
   opacity: 0;
   transform: translateY(-6px);
   transition: opacity 0.28s ease, transform 0.28s ease;
}

.greeting-banner.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.password-help {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 12px;
   padding: 10px 14px;
   border-radius: 10px;
   background: rgba(251, 191, 36, 0.1);
   border: 1px solid rgba(251, 191, 36, 0.3);
   color: #92400e;
   font-size: 13px;
   line-height: 1.4;
}

.password-help-icon {
   flex-shrink: 0;
}

/* Footer */
.footer {
   margin-top: 24px;
   position: relative;
   z-index: 1;
}

.footer::before {
   content: "";
   display: block;
   width: 50px;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
   margin: 0 auto 12px;
}

.footer-copyright {
   text-align: center;
   font-size: 11px;
   color: #94a3b8;
   letter-spacing: 0.5px;
}

h1 {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 2px;
   color: #1e293b;
}

.brand-subtitle {
   color: #64748b;
   font-size: 13px;
   margin: 0;
}

/* Mode hint - подсказка под формой  */
.mode-hint {
   color: #4338ca;
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 16px;
   padding: 10px 14px;
   border-radius: 10px;
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
   border: 1px solid rgba(99, 102, 241, 0.15);
   line-height: 1.5;
   transition: opacity 0.22s ease, transform 0.22s ease;
}

.mode-hint.is-updating {
   opacity: 1;
   transform: translateY(0);
}

/* === Form === */
.form {
   display: grid;
   gap: 16px;
   position: relative;
   z-index: 1;
}

.form-row {
   display: flex;
   flex-direction: column;
   gap: 8px;
   overflow: hidden;
   max-height: 160px;
   opacity: 1;
   transform: translateY(0);
   transition: max-height 0.28s ease, opacity 0.24s ease, transform 0.24s ease, margin 0.28s ease;
}

.form-row-collapsed {
   max-height: 0;
   opacity: 0;
   transform: translateY(-6px);
   margin-top: -8px;
   pointer-events: none;
}

.form-row-visible {
   max-height: 160px;
   opacity: 1;
   transform: translateY(0);
   margin-top: 0;
   pointer-events: auto;
}

label {
   font-size: 13px;
   font-weight: 500;
   color: #475569;
   margin-bottom: -4px;
}

input {
   padding: 14px 16px;
   border-radius: 12px;
   border: 1.5px solid #e2e8f0;
   background: #fff;
   color: var(--text);
   font-size: 15px;
   transition: all 0.2s ease;
   position: relative;
}

input::placeholder {
   color: #94a3b8;
}

input:hover {
   border-color: #cbd5e1;
}

input:focus {
   outline: none;
   border-color: #6366f1;
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* === Button === */
button {
   margin-top: 8px;
   padding: 14px 24px;
   border-radius: 12px;
   border: none;
   background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
   color: white;
   font-weight: 600;
   font-size: 15px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: all 0.2s ease;
   box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

button:hover {
   background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

button:active {
   transform: translateY(0);
}

/* Button shine effect */
button::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg,
         transparent,
         rgba(255, 255, 255, 0.3),
         transparent);
   transition: left 0.5s ease;
}

button:hover::before {
   left: 100%;
}

/* Button ripple */
button::after {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
         rgba(255, 255, 255, 0.2) 0%,
         transparent 50%);
   opacity: 0;
   transition: opacity 0.3s ease;
}

button:hover::after {
   opacity: 1;
}

/* === Error Message === */
.error {
   margin-top: 16px;
   padding: 14px 16px;
   border-radius: 14px;
   background: rgba(239, 68, 68, 0.08);
   border: 1px solid rgba(239, 68, 68, 0.25);
   color: #dc2626;
   font-size: 13px;
   position: relative;
   z-index: 1;
   animation: errorShake 0.5s ease;
}

@keyframes errorShake {

   0%,
   100% {
      transform: translateX(0);
   }

   20%,
   60% {
      transform: translateX(-5px);
   }

   40%,
   80% {
      transform: translateX(5px);
   }
}

/* === Responsive === */
@media (max-width: 520px) {
   .page {
      padding: 16px;
   }

   .card {
      width: 100%;
      padding: 28px 22px;
      border-radius: 22px;
   }

   .brand {
      gap: 12px;
      margin-bottom: 24px;
   }

   .logo {
      width: 56px;
      height: 56px;
   }

   .logo img {
      width: 48px;
      height: 48px;
   }

   .mode-hint {
      font-size: 13px;
      padding: 8px 12px;
   }

   input,
   button {
      padding: 12px 14px;
   }
}

@media (max-width: 380px) {
   .card {
      padding: 24px 20px;
   }

   h1 {
      font-size: 20px;
   }

   p {
      font-size: 13px;
   }
}

/* === Accessibility === */
@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

/* === Loading State === */
button.loading {
   pointer-events: none;
   opacity: 0.8;
}

button.loading::after {
   content: "";
   position: absolute;
   width: 20px;
   height: 20px;
   border: 2px solid transparent;
   border-top-color: white;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   top: 50%;
   left: 50%;
   margin: -10px 0 0 -10px;
}

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

/* === App Picker (Preview Admin) === */
.app-picker {
   position: relative;
   z-index: 1;
   animation: pickerAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pickerAppear {
   0% {
      opacity: 0;
      transform: translateY(12px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

.app-picker-title {
   font-size: 15px;
   font-weight: 500;
   color: var(--muted);
   text-align: center;
   margin-bottom: 20px;
}

.app-picker-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

.app-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 22px 12px 18px;
   border: 1px solid rgba(124, 58, 237, 0.12);
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.55);
   backdrop-filter: blur(8px);
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   font-family: inherit;
   position: relative;
   overflow: hidden;
}

.app-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg,
      rgba(124, 58, 237, 0.06) 0%,
      rgba(34, 197, 94, 0.06) 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
   border-radius: 18px;
}

.app-card:hover {
   border-color: rgba(124, 58, 237, 0.3);
   transform: translateY(-3px);
   box-shadow:
      0 12px 28px rgba(124, 58, 237, 0.12),
      0 4px 10px rgba(15, 23, 42, 0.06);
}

.app-card:hover::before {
   opacity: 1;
}

.app-card:active {
   transform: translateY(-1px);
}

.app-card:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none !important;
   box-shadow: none !important;
}

.app-card .app-icon {
   font-size: 32px;
   position: relative;
   z-index: 1;
   transition: transform 0.3s ease;
}

.app-card:hover .app-icon {
   transform: scale(1.15);
}

.app-card .app-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--text);
   position: relative;
   z-index: 1;
}

.app-card .app-desc {
   font-size: 11px;
   color: var(--muted);
   position: relative;
   z-index: 1;
}

.app-card--loading {
   pointer-events: none;
}

.app-card--loading .app-icon {
   animation: spin 1s linear infinite;
}

.app-card--wide {
   grid-column: 1 / -1;
}

.app-picker-hint {
   margin-top: 18px;
   font-size: 12px;
   color: #92400e;
   text-align: center;
   padding: 10px 14px;
   background: rgba(251, 191, 36, 0.1);
   border-radius: 12px;
   border: 1px solid rgba(251, 191, 36, 0.2);
   line-height: 1.4;
}