/* iMonetary — the member sign-in screens, in the home page's material
   (2026-10-01): frosted glass, a beam of light along the card's edge, gold
   that moves like liquid metal, and the same deep light behind it all.
   Everything here is scoped to the sign-in steps (#screen-login,
   #screen-channel, #screen-otp): the dashboard (#screen-app) is untouched. */

@property --signin-beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --signin-metal { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.signin-ambient, .auth-home { display: none; }
body:has(#screen-login.active, #screen-channel.active, #screen-otp.active) .signin-ambient {
  display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% -5%, rgba(14, 31, 75, 0.95), transparent 65%),
    radial-gradient(45% 40% at 50% 42%, rgba(198, 161, 91, 0.12), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(26, 52, 128, 0.35), transparent 70%),
    linear-gradient(180deg, #071230 0%, #05060a 62%);
}
body:has(#screen-login.active, #screen-channel.active, #screen-otp.active) .signin-ambient::after {
  content: ''; position: absolute; inset: -50%; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body:has(#screen-login.active, #screen-channel.active, #screen-otp.active) { background: #05060a; }

/* Back to the site, opposite the language switch. */
body:has(#screen-login.active) .auth-home {
  display: inline-flex; align-items: center; gap: 7px; position: fixed; top: 22px; left: 22px; z-index: 200;
  padding: 6px 13px 6px 10px; border-radius: 999px; font-size: 12px; color: var(--mut); text-decoration: none;
  border: 1px solid var(--line); background: rgba(7, 10, 19, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .2s, border-color .2s;
}
body:has(#screen-login.active) .auth-home:hover { color: var(--ink); border-color: var(--gold-line); }
.auth-home svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.is-rtl:has(#screen-login.active) .auth-home { left: auto; right: 22px; padding: 6px 10px 6px 13px; }
body.is-rtl .auth-home svg { transform: scaleX(-1); }

/* The card: glass that catches the light, and a beam along its edge. */
.screen:not(#screen-app) .auth-card {
  border-radius: 28px;
  border-color: rgba(243, 239, 230, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    rgba(10, 15, 30, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.4), 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  isolation: isolate;
}
.screen:not(#screen-app) .auth-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--signin-beam), transparent 0deg 250deg, rgba(228, 197, 136, 0) 262deg,
    rgba(228, 197, 136, 0.85) 300deg, #fff6df 312deg, rgba(198, 161, 91, 0) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: signin-beam 7s linear infinite;
}
@keyframes signin-beam { to { --signin-beam: 360deg; } }

.screen:not(#screen-app) .field input {
  border-radius: 14px; background: rgba(5, 7, 14, 0.6); border-color: rgba(243, 239, 230, 0.12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); transition: border-color .25s, box-shadow .25s;
}
.screen:not(#screen-app) .field input:focus { border-color: #c6a15b; box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.35); }

/* The gold button, in liquid metal: a moving sheen and a molten ring. */
.screen:not(#screen-app) .btn-gold {
  position: relative; isolation: isolate; border-radius: 999px; padding: 14px 20px; color: #1a1206;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255, 248, 225, 0.7), transparent 45%),
    linear-gradient(180deg, #f3dca2 0%, #d6b066 42%, #a8803b 70%, #e2c27c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 6px rgba(90, 60, 15, 0.45),
    0 10px 30px -10px rgba(198, 161, 91, 0.55), 0 0 0 1px rgba(80, 56, 16, 0.6);
}
.screen:not(#screen-app) .btn-gold::before {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--signin-metal), #6b4e1c, #f7e7bc, #b48a42, #fff3d1, #7a5a22, #e7c98a, #6b4e1c);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(228, 197, 136, 0.45)); opacity: 0.85;
  animation: signin-metal 5.5s linear infinite;
}
.screen:not(#screen-app) .btn-gold::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: soft-light;
  animation: signin-sheen 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.screen:not(#screen-app) .btn-gold:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 6px rgba(90, 60, 15, 0.45), 0 16px 40px -12px rgba(228, 197, 136, 0.7), 0 0 0 1px rgba(80, 56, 16, 0.6); }
@keyframes signin-metal { to { --signin-metal: 360deg; } }
@keyframes signin-sheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.screen:not(#screen-app) .btn-ghost { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .screen:not(#screen-app) .auth-card::after, .screen:not(#screen-app) .btn-gold::before, .screen:not(#screen-app) .btn-gold::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .screen:not(#screen-app) .auth-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0c1226; }
}
@media (max-width: 520px) {
  body:has(#screen-login.active) .auth-home { top: 18px; left: 14px; }
  body.is-rtl:has(#screen-login.active) .auth-home { left: auto; right: 14px; }
}