/* Sign-in pages: one look per kind of person.
 *   Nurse        green, photo on the left
 *   Admin        blue, photo on the right
 *   Super Admin  violet, full-screen photo with a glass card */
:root { --skin: #3b82f6; --skin-2: #1e40af; --skin-soft: #3b82f633; }
body.skin-nurse { --skin: #22c55e; --skin-2: #15803d; --skin-soft: #22c55e33; }
body.skin-admin { --skin: #3b82f6; --skin-2: #1d4ed8; --skin-soft: #3b82f633; }
body.skin-super { --skin: #a855f7; --skin-2: #6d28d9; --skin-soft: #a855f733; }
body { overflow-x: hidden; }

.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.skin-admin .login { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.skin-admin .login .art { order: 2; }

/* ── art panel ── */
.art { position: relative; overflow: hidden; color: #fff; background: #0a1020; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 3.5vw, 3.5rem); isolation: isolate; }
.art .photo { position: absolute; inset: -5%; z-index: -4; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; animation: kenburns 28s ease-in-out infinite alternate; will-change: transform; }
.art .photo.on { opacity: 1; }
.art .tint { position: absolute; inset: 0; z-index: -3; background:
  linear-gradient(165deg, rgba(8,13,24,.30) 0%, rgba(8,13,24,.78) 70%, rgba(8,13,24,.94) 100%),
  radial-gradient(90% 70% at 15% 10%, color-mix(in srgb, var(--skin) 38%, transparent), transparent 70%); }
.art .grid { position: absolute; inset: 0; z-index: -2; opacity: .5; background-image: linear-gradient(var(--skin-soft) 1px, transparent 1px), linear-gradient(90deg, var(--skin-soft) 1px, transparent 1px); background-size: 3.2rem 3.2rem; mask-image: radial-gradient(70% 60% at 30% 25%, #000, transparent); -webkit-mask-image: radial-gradient(70% 60% at 30% 25%, #000, transparent); }
.art .orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(48px); opacity: .55; animation: drift 14s ease-in-out infinite alternate; }
.art .o1 { width: 22rem; height: 22rem; left: -6rem; bottom: -6rem; background: var(--skin); }
.art .o2 { width: 16rem; height: 16rem; right: -4rem; top: 18%; background: var(--skin-2); animation-delay: -6s; }
.art .brand { padding: 0; } .art .brand .logo { height: clamp(2rem, 2.6vw, 3rem); width: auto; }
.art .ecg { position: absolute; left: -2%; width: 104%; top: 24%; height: 22%; opacity: .55; z-index: -1; }
.art .ecg path { stroke: var(--skin) !important; stroke-width: 2.6; filter: drop-shadow(0 0 6px var(--skin)); }
.art .copy { position: relative; max-width: 34rem; }
.art h2 { font-size: clamp(2rem, 3.6vw, 3.8rem); line-height: 1.04; letter-spacing: -.03em; }
.art .copy p { color: #c9d6ea; margin-top: 1rem; font-size: 1.05rem; max-width: 36ch; }
.art .badge-role { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .3rem .8rem; border-radius: 99rem; font-weight: 600; font-size: .85rem; background: color-mix(in srgb, var(--skin) 22%, transparent); border: 1px solid color-mix(in srgb, var(--skin) 60%, transparent); color: #fff; backdrop-filter: blur(6px); }
.art .badge-role i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--skin); box-shadow: 0 0 0 0 var(--skin); animation: ping 2s infinite; }
.credit { position: absolute; right: .9rem; bottom: .6rem; font-size: .68rem; color: #ffffff80; } .credit a { color: #ffffffb0; }

/* floating glass chips */
.chips { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.chip { position: absolute; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-radius: 1rem; background: rgba(14, 21, 37, .55); border: 1px solid #ffffff22; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -18px #000a; animation: float 7s ease-in-out infinite; }
.chip b { font: 650 1.5rem var(--font-display); line-height: 1; letter-spacing: -.02em; }
.chip small { display: block; color: #b6c4dc; font-size: .74rem; margin-top: .15rem; }
.chip .dot { width: 2.2rem; height: 2.2rem; border-radius: .7rem; display: grid; place-items: center; background: color-mix(in srgb, var(--skin) 28%, transparent); color: var(--skin); }
.chip .dot svg { width: 1.2rem; height: 1.2rem; }
.chip.c1 { right: 8%; top: 12%; } .chip.c2 { right: 14%; top: 46%; animation-delay: -2.4s; } .chip.c3 { left: 9%; top: 52%; animation-delay: -4.6s; }
.chip .heart { animation: beat 1s infinite; }

/* ── form panel ── */
.panel-wrap { display: grid; place-items: center; padding: 2rem; position: relative; }
.box { width: min(26rem, 100%); }
.box > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.box > :nth-child(2) { animation-delay: .06s; } .box > :nth-child(3) { animation-delay: .12s; } .box > :nth-child(4) { animation-delay: .18s; } .box > :nth-child(5) { animation-delay: .24s; }
.box .who { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; color: var(--skin); font-size: .9rem; margin-bottom: .8rem; }
.box .who i { width: 1.7rem; height: .3rem; border-radius: 9px; background: linear-gradient(90deg, var(--skin), var(--skin-2)); }
.box h1 { font-size: clamp(1.7rem, 2.2vw, 2.1rem); letter-spacing: -.03em; }
.box .sub { color: var(--ink-2); margin: .35rem 0 1.4rem; }
form { display: flex; flex-direction: column; gap: 1rem; }
.input:focus { outline: none; border-color: var(--skin); box-shadow: 0 0 0 .2rem var(--skin-soft); }
.btn.primary { background: linear-gradient(135deg, var(--skin), var(--skin-2)); border-color: transparent; box-shadow: 0 10px 24px -10px var(--skin); transition: transform .15s, box-shadow .15s, filter .15s; }
.btn.primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 28px -10px var(--skin); }
.pwrow { position: relative; } .pwrow .input { padding-right: 4.2rem; }
.peek { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--ink-2); font-weight: 600; padding: .35rem .6rem; border-radius: var(--r-s); }
.linkbtn { border: 0; background: none; color: var(--skin); font-weight: 600; padding: .3rem; } .linkbtn:hover { text-decoration: underline; }
.box a { color: var(--skin); }
.foot { margin-top: 2rem; color: var(--ink-3); font-size: .85rem; }

/* ── Super Admin: full-screen photo, centred glass card ── */
.skin-super .login { display: block; position: relative; }
.skin-super .login .art { position: absolute; inset: 0; padding: clamp(1.5rem, 3vw, 3rem); }
.skin-super .art .copy { display: none; }
.skin-super .chip.c1 { right: 6%; top: 14%; } .skin-super .chip.c2 { right: 8%; top: 70%; } .skin-super .chip.c3 { left: 6%; top: 66%; }
.skin-super .panel-wrap { position: relative; z-index: 2; min-height: 100vh; }
.skin-super .box { width: min(28rem, 100%); padding: 2.2rem; border-radius: 1.4rem; background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid color-mix(in srgb, var(--skin) 35%, var(--line)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 40px 90px -30px #000c, 0 0 0 1px #ffffff0a inset; }

@keyframes kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2%, -1.5%, 0); } }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(3rem, -2rem, 0) scale(1.15); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.7rem); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--skin) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 .7rem transparent; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .login, .skin-admin .login { grid-template-columns: 1fr; }
  .skin-admin .login .art { order: 0; }
  .art { min-height: 15rem; padding: 1.4rem; } .art .copy p, .chip.c2, .chip.c3 { display: none; } .art h2 { font-size: 1.7rem; }
  .art .ecg { top: 40%; } .chip.c1 { right: 5%; top: 14%; }
  .skin-super .login .art { position: relative; min-height: 13rem; inset: auto; }
  .skin-super .panel-wrap { min-height: auto; margin-top: -3rem; } .skin-super .box { padding: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .art .photo, .art .orb, .chip, .box > *, .chip .heart, .badge-role i { animation: none !important; } }