/* Glass-card variant of the auth page — layered over auth.css (preview). */
.auth-page { perspective: 1400px; }
.auth-card {
  width: min(440px, 100%); padding: 34px 34px 28px;
  background: linear-gradient(155deg, rgba(40, 62, 92, .46), rgba(8, 13, 22, .72) 55%, rgba(14, 24, 40, .6));
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  border: 0; border-radius: 0;
  /* chamfered top-left and bottom-right corners */
  clip-path: polygon(46px 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%, 0 46px);
  box-shadow: inset 0 0 0 1px rgba(170, 210, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .3s ease;
}
/* glowing corner tabs */
.auth-card::before, .auth-card::after {
  content: ""; position: absolute; width: 46px; height: 46px; pointer-events: none;
}
.auth-card::before { left: 0; top: 0;
  background: linear-gradient(135deg, rgba(51,188,248,.55), rgba(51,188,248,.05) 60%);
  clip-path: polygon(100% 0, 100% 2px, 2px 100%, 0 100%, 0 46px, 46px 0); }
.auth-card::after { right: 0; bottom: 0;
  background: linear-gradient(315deg, rgba(51,188,248,.55), rgba(51,188,248,.05) 60%);
  clip-path: polygon(0 100%, 0 calc(100% - 2px), calc(100% - 2px) 0, 100% 0, 100% 100%, 46px 100%); }
.auth-brand { margin-bottom: 18px; }

.auth-tabs { background: rgba(8, 14, 24, .55); border-color: rgba(159, 196, 232, .14); border-radius: 8px; }
.auth-tab { border-radius: 6px; }
.auth-tab.active { background: linear-gradient(180deg, rgba(51,188,248,.3), rgba(47,99,196,.3)); box-shadow: inset 0 0 0 1px rgba(51,188,248,.35); }

.auth-headline { font-size: 26px; background: linear-gradient(90deg, #fff, #7fd4ff 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-subhead { margin-bottom: 20px; }

.auth-label { letter-spacing: .06em; text-transform: none; font-size: 12px; font-weight: 600; color: #9fb4cc; }
.auth-input {
  padding: 12px 14px 12px 40px; border-radius: 10px; font-size: 14px;
  background-color: rgba(4, 9, 16, .55); border-color: rgba(159, 196, 232, .16);
  background-repeat: no-repeat; background-position: 13px 50%; background-size: 16px;
}
.auth-input:focus { box-shadow: 0 0 0 3px rgba(51, 188, 248, .16), 0 0 22px -4px rgba(51, 188, 248, .5); background-color: rgba(10, 24, 40, .7); }
.ic-user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8aa8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }
.ic-mail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8aa8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ic-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8aa8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }

/* sign-up: password + confirm side by side */
.auth-card[data-mode="signup"] .auth-pw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-card[data-mode="signup"] .auth-pw .auth-input { padding-right: 12px; }
.auth-card[data-mode="signup"] .auth-eye { display: none; }
.auth-card[data-mode="signup"] .auth-pw-row .auth-input { padding-left: 38px; }

.auth-submit {
  padding: 13px 16px; border-radius: 10px; color: #fff; letter-spacing: .01em;
  background: linear-gradient(180deg, #3ec4ff, #2a86e6);
  box-shadow: 0 8px 26px -8px rgba(51, 188, 248, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.auth-submit:not(:disabled)::after { content: " \2192"; }
.auth-google-btn { border-radius: 10px; padding: 11px 14px; background: rgba(255, 255, 255, .04); }

/* mode flip: content blanks, orb glows, card swings */
.auth-orb { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%; opacity: 0; pointer-events: none; z-index: 3; transform: scale(.5);
  background: radial-gradient(circle, rgba(127,212,255,.65) 0 14%, rgba(51,188,248,.35) 32%, rgba(47,99,196,.18) 55%, transparent 70%);
  box-shadow: 0 0 60px 10px rgba(51, 188, 248, .28), inset 0 0 0 1px rgba(127, 212, 255, .35);
  transition: opacity .3s ease, transform .3s ease; }
.auth-card > :not(.auth-orb) { transition: opacity .25s ease; }
.auth-card.turn-out { transform: rotateY(-16deg) scale(.97); }
.auth-card.turn-out > :not(.auth-orb) { opacity: 0; }
.auth-card.turn-out .auth-orb { opacity: 1; transform: scale(1); }
.auth-card.turn-in { animation: glass-in .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes glass-in { from { transform: rotateY(16deg) scale(.97); } to { transform: none; } }

@media (max-width: 460px) {
  .auth-card { padding: 28px 20px 24px; }
  .auth-card[data-mode="signup"] .auth-pw-row { grid-template-columns: 1fr; }
}