/* Shared sign-in layout for /login and /admin: brand panel + form panel, split on wide screens. */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--surface); }
.auth-form { display: flex; flex-direction: column; padding: 32px clamp(20px, 6vw, 88px); }
.auth-form .logo { height: 52px; width: auto; align-self: flex-start; }
.auth-form main { flex: 1; display: flex; flex-direction: column; justify-content: center; width: min(420px, 100%); margin: 0 auto; padding: 40px 0; }
.auth-form h1 { margin: 0 0 6px; font-size: 30px; font-weight: 800; color: var(--text); }
.auth-form .sub { margin: 0 0 30px; color: var(--muted); font-size: 15px; }
.auth-tag { align-self: flex-start; margin-bottom: 18px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.auth form { display: grid; gap: 18px; }
.auth label.in { display: grid; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.auth .box { position: relative; display: flex; align-items: center; }
.auth .box > svg { position: absolute; inset-inline-start: 14px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.auth .box input { width: 100%; font: inherit; font-size: 16px; padding: 14px 46px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); text-align: start; transition: border-color .15s, box-shadow .15s; }
.auth .box input::placeholder { color: var(--muted); opacity: .7; }
.auth .box input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.auth .eye { position: absolute; inset-inline-end: 8px; border: 0; background: none; padding: 8px; cursor: pointer; color: var(--muted); display: grid; place-items: center; border-radius: 8px; }
.auth .eye svg { width: 20px; height: 20px; }
.auth .eye:hover { color: var(--text); }
.auth .err { color: var(--danger); font-weight: 700; font-size: 14px; min-height: 1.4em; margin: -6px 0 -6px; }
.auth .btn { border-radius: 12px; padding: 15px 18px; font-size: 16px; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 70%, transparent); }
.auth .btn[disabled] { opacity: .65; cursor: progress; }
.auth .help { text-align: center; font-size: 14px; color: var(--muted); margin-top: 6px; }
.auth-form footer { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.auth-art { position: relative; overflow: hidden; margin: 14px; border-radius: 28px; color: #fff; padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background: radial-gradient(120% 80% at 100% 0%, #8a5cf6 0%, transparent 60%), radial-gradient(90% 70% at 0% 100%, #22c55e33 0%, transparent 60%), linear-gradient(160deg, #3b22d6, #17123a); }
.auth-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 75%); pointer-events: none; }
.auth-art > * { position: relative; }
.auth-art .mark { width: 64px; height: 64px; }
.auth-art h2 { margin: 0 0 12px; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.35; font-weight: 800; }
.auth-art p { margin: 0; font-size: 17px; opacity: .85; max-width: 32em; }
.auth-art ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.auth-art li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.auth-art li i { flex: none; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.14); display: grid; place-items: center; font-style: normal; }
.auth-art li i::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }

/* Floating order card: a live loop of "preparing" -> "ready" (driven by login.html). */
.auth-art .peek { align-self: flex-start; width: min(360px, 100%); background: rgba(255,255,255,.96); color: #17123a; border-radius: 20px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); transform: rotate(-2deg); animation: bob 6s ease-in-out infinite; transition: opacity .45s, translate .45s cubic-bezier(.2,.8,.2,1); }
.auth-art .peek.in { opacity: 0; translate: 0 24px; transition: none; }
.auth-art .peek.out { opacity: 0; translate: 0 -24px; }
.auth-art .peek > div { flex: 1; min-width: 0; }
.auth-art .peek b { display: block; font-size: 16px; }
.auth-art .peek span { font-size: 13px; color: #6b6585; }
.auth-art .peek em { flex: none; font-style: normal; font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; color: #12a150; background: #e3f6eb; transition: color .3s, background .3s; }
.auth-art .peek.prep em { color: #b26b00; background: #fdf0d9; }
.auth-art .peek .bell { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #5b3df5; display: grid; place-items: center; }
.auth-art .peek .bell img { width: 32px; height: 32px; transform-origin: 50% 15%; }
.auth-art .peek.ready .bell img { animation: ring 1s ease-in-out 2; }
.auth-art .peek .bell i { position: absolute; inset: 0; border-radius: 12px; border: 2px solid #22c55e; opacity: 0; }
.auth-art .peek.ready .bell i { animation: pulse 1.4s ease-out 2; }
.auth-art .peek .bar { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: #efebff; overflow: hidden; }
.auth-art .peek .bar s { display: block; height: 100%; width: 100%; background: #22c55e; transform-origin: right; transition: transform .3s; }
.auth-art .peek.prep .bar s { background: #f5a524; transform: scaleX(.15); animation: fill 3s ease-out forwards; }
@keyframes fill { to { transform: scaleX(.92); } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
@keyframes pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes bob { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }
/* Entrance: headline and points rise in on load. */
.auth-art h2, .auth-art p, .auth-art li { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.auth-art p { animation-delay: .1s; }
.auth-art li:nth-child(1) { animation-delay: .2s; } .auth-art li:nth-child(2) { animation-delay: .3s; } .auth-art li:nth-child(3) { animation-delay: .4s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .auth-art *, .auth-art .peek { animation: none !important; transition: none !important; } }
.auth-art.admin { background: radial-gradient(110% 80% at 100% 0%, #3b22d6 0%, transparent 60%), linear-gradient(160deg, #221a52, #0d0a22); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-form { padding: 24px 20px; }
  .auth-form main { justify-content: flex-start; padding: 48px 0 32px; }
}