:root {
     --bg-main: #e9edf3;
     --left: #e9eef4;
     --blue-1: #1d4aa8;
     --blue-2: #173a8b;
     --text: #0d1320;
     --inv: #fff;
     --muted: #d6dcf4;
     --radius: 18px;
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     margin: 0;
     background: #0b0d12;
     color: #e7e9ee;
     font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 }

 img {
     max-width: 100%;
     display: block
 }

 /* ===== Floating header (centered, fixed) ===== */
 .floating-header {
     position: fixed;
     left: 50%;
     top: 14px;
     transform: translateX(-50%);
     width: max-content;
     max-width: 100%;
     /* min-width: 500px; */
     z-index: 1000;
     background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02));
     border: 1px solid #333;
     border-radius: 999px;
     padding: 10px 14px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
     backdrop-filter: saturate(140%) blur(6px);
     gap: 100px;
 }

 .QRimgHolder {
     width: 90px;
     height: 90px;
     padding: 5px;
     border-radius: 7px;
     border: 1px solid #333;
     margin: 10px auto;
}

 .QRimgHolder img {
     width: 100%;
     height: 100%;
 }

 .fh-brand {
     display: flex;
     align-items: center;
     gap: 10px
 }

 .fh-brand img {
     width: 46px;
     height: auto
 }

 .fh-brand img.fh-title {
     width: auto;
     height: 40px;
     filter: brightness(0) invert(1);
 }

 .fh-title {
     margin: 0;
     line-height: 1.25;
     font-weight: 800;
     font-size: 12.5px;
     letter-spacing: .12px;
 }

 .fh-login {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: linear-gradient(90deg, var(--accent), var(--accent-2));
     color: #fff;
     text-decoration: none;
     padding: 8px 12px;
     border-radius: 999px;
     font-weight: 700;
     font-size: 12px;
     box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
 }

 /* Spacer so the fixed header doesn’t overlap content */
 .page-pad {
     height: 72px
 }

 /* ===== Portrait Card (300×500, never wraps) ===== */
 .wrap {
     width: 100%;
     min-width: 300px;
     margin: 0 auto 32px;
     padding: 100px 0;
 }

 .card {
     width: var(--card-w);
     height: var(--card-h);
     background: #fff;
     color: var(--ink);
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: 0 18px 46px rgba(0, 0, 0, .35);
     position: relative;
     margin: 0 auto;
 }

 /* Top banner with dummy background image */
 .banner {
     position: relative;
     height: 30%;
     /* background: #0e2a62 url('../webImages/bg.jpg') center/cover no-repeat; */
     isolation: isolate;
 }

 .banner2 {
     position: absolute;

     width: 100%;
     height: 100%;
     background: #0e2a62 url('../webImages/bg-fw.jpg') center/cover no-repeat;
     isolation: isolate;
 }

 /* soft network dots overlay (optional) */
 .banner::after {
     content: "";
     position: absolute;
     inset: 0;
     background:
         radial-gradient(120px 120px at 15% 25%, rgba(255, 255, 255, .18), transparent 60%),
         radial-gradient(200px 180px at 85% 20%, rgba(255, 255, 255, .12), transparent 60%);
     mix-blend-mode: screen;
     pointer-events: none;
 }

 /* white wave that the avatar sits on */
 .curve {
     position: absolute;
     left: 0;
     right: 0;
     bottom: -1px;
     height: 140px;
     pointer-events: none;
     /* background:
         radial-gradient(100% 90% at 50% 10%, #fff 0 60%, transparent 62%) bottom/120% 140% no-repeat,
         linear-gradient(#fff, #fff); */
 }

 /* Big centered avatar */
 .avatar-wrap {
     position: absolute;
     left: 50%;
     bottom: -64px;
     transform: translateX(-50%);
     width: 175px;
     height: 175px;
     border-radius: 50%;
     background: #fff;
     display: grid;
     place-items: center;
     box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
 }

 .avatar {
     width: 150px;
     height: 150px;
     border-radius: 50%;
     border: 6px solid #fff;
     overflow: hidden;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
 }

 .avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position:top;
 }

 /* Content */
 .body {
     padding: 88px 18px 16px;
     position: relative;
 }

 .name {
     margin: 0;
     text-align: center;
     font-weight: 800;
     font-size: 22px
 }

 .batch {
     margin: 6px 0 16px;
     text-align: center;
     font-weight: 800
 }

 .row {
     margin: 5px 0;
     font-size: 13px;
     line-height: 1.55
 }

 .row b {
     font-weight: 800;
     color: #142488;
 }


 .thesis {
     margin-top: 6px;
     font-size: 14px
 }

 .id {
     margin-top: 8px;
     font-weight: 400
 }

 /* footer line */
 .foot {
     margin: 16px 0 0;
     font-size: 13px;
     color: #000;
     text-align: center;
     line-height: 1.45;
     position: absolute;
     bottom: 10px;
 }

 /* small side portrait (optional) — hidden since you asked for centered name */
 .mini {
     display: none
 }

 @media print {

     html,
     body {
         background: #fff
     }

     .card {
         box-shadow: none
     }
 }



 /* Login/register Page */
 /* ======================= CSS ======================= */
 :root {
     --bg: #0b0f17;
     --panel: #0b0d12;
     --panel-contrast: #131519;
     --text: #e8eefc;
     --accent: #001fe3;
     --accent-2: #0e1a5c;
     --ring: #2336a3;
     --shadow: 0 20px 40px rgba(0, 0, 0, .35);
     --radius: 20px;
     --speed: 700ms;
     --outline: 2px solid var(--ring);
     --grid: rgba(255, 255, 255, .06);
     --gap: clamp(16px, 3vw, 32px);
     --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
     --card-w: 400px;
     /* card width */
     --card-h: 600px;
     /* card height */
     --radius: 18px;
     --ink: #0c1730;
     --blue1: #174a9a;
     --blue2: #0e2e6d;
 }

 .split {
     min-height: 100dvh;
     display: grid;
     grid-template-columns: 1fr;
     gap: 0;
 }

 .hero {
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: flex-start;
     isolation: isolate;
     flex-direction: column;
 }

 .hero__art {
     position: absolute;
     inset: 0;
 }

 .grid {
     position: absolute;
     inset: 0;
     background:
         linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 40px 40px,
         linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 40px 40px;
     mask-image: radial-gradient(1000px 600px at 30% 20%, rgba(0, 0, 0, .75), transparent 70%);
 }

 .blob {
     position: absolute;
     filter: blur(40px);
     opacity: .8;
     animation: float 12s ease-in-out infinite;
 }

 .b1 {
     width: 520px;
     height: 520px;
     left: -80px;
     top: -60px;
     background: radial-gradient(circle at 30% 30%, #5d93ff, transparent 60%), radial-gradient(circle at 70% 70%, #54e1c2, transparent 60%);
 }

 .b2 {
     width: 420px;
     height: 420px;
     right: -80px;
     bottom: -60px;
     background: radial-gradient(circle at 40% 40%, #b57bff, transparent 60%), radial-gradient(circle at 70% 70%, #7aa2ff, transparent 60%);
     animation-delay: -6s;
 }

 .error {
     color: #c81e1e;
     font-size: 12px;
     margin-top: 6px;
     display: block;
 }

 [aria-invalid="true"] {
     outline: 2px solid #c81e1e;
     outline-offset: 2px;
 }


 @keyframes float {

     0%,
     100% {
         transform: translate3d(0, 0, 0)
     }

     50% {
         transform: translate3d(0, -12px, 0)
     }
 }

 .hero__copy {
     position: relative;
     z-index: 2;
     backdrop-filter: blur(2px);
     padding: clamp(24px, 5vw, 64px);
 }

 .hero__copy h1 {
     margin: 0 0 6px;
     font-size: clamp(28px, 5vw, 44px);
     letter-spacing: .2px;
     color: #171d29;
 }

 .hero__copy p {
     margin: 0;
     color: #343539;
 }

 /* Panel */
 .panel {
     display: grid;
     align-content: center;
     padding: clamp(24px, 5vw, 64px);
     background:
         radial-gradient(800px 400px at 120% 10%, #14203b 0%, transparent 40%),
         linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 20%),
         var(--panel);
 }

 .tabs {
     display: flex;
     gap: 10px;
     margin: 0 auto 18px;
     background: var(--panel-contrast);
     padding: 6px;
     border-radius: 999px;
     width: fit-content;
     box-shadow: var(--shadow);
 }

 .tab {
     appearance: none;
     border: 0;
     padding: 10px 18px;
     border-radius: 999px;
     cursor: pointer;
     background: transparent;
     color: var(--muted);
     font-weight: 600;
     letter-spacing: .2px;
 }

 .tab.is-active {
     background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02));
     color: var(--text);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 16px rgba(0, 0, 0, .3);
 }

 /* 3D Card Flip */
 .card3d {
     position: relative;
     width: min(520px, 90vw);
     height: 430px;
     margin-inline: auto;
     perspective: 1400px;
 }

 .face {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02));
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: clamp(18px, 3vw, 28px);
     backface-visibility: hidden;
     transform-style: preserve-3d;
     border: 1px solid rgba(255, 255, 255, .06);
     max-height: max-content;
 }

 .face--back {
     transform: rotateY(180deg)
 }

 .card3d.is-signup .face--front {
     transform: rotateY(180deg)
 }

 .card3d.is-signup .face--back {
     transform: rotateY(360deg)
 }

 .card3d .face {
     transition: transform var(--speed) cubic-bezier(.2, .7, .2, 1)
 }

 .form {
     display: grid;
     gap: 16px;
     margin-top: 8px
 }

 /* Floating labels */
 .field {
     position: relative
 }

 .field input {
     width: 100%;
     padding: 16px 14px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, .08);
     background: #0b0d12;
     color: var(--text);
     outline: none;
     font-size: 16px;
     transition: border-color .2s, box-shadow .2s, transform .2s;
 }

 .field input::placeholder {
     color: transparent
 }

 .field label {
     position: absolute;
     left: 12px;
     top: 12px;
     padding: 0 6px;
     color: var(--muted);
     pointer-events: none;
     transform-origin: left top;
     background: #0b0d12;
     border-radius: 6px;
     transition: transform .2s, color .2s, top .2s;
 }

 .field input:focus {
     border-color: var(--ring);
     box-shadow: 0 0 0 3px rgba(123, 164, 255, .15)
 }

 .field input:focus+label {
     color: var(--ring)
 }

 .field input:not(:placeholder-shown)+label,
 .field input:focus+label {
     transform: translateY(-20px) scale(.86);
     top: 6px;
 }

 /* Small helper link inside field row */
 .field__link {
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 13px;
     color: var(--accent);
     text-decoration: none;
     opacity: .9;
 }

 .field__link:hover {
     text-decoration: underline
 }

 /* Buttons */
 .btn {
     appearance: none;
     border: 0;
     border-radius: 12px;
     padding: 14px 16px;
     font-weight: 700;
     background: linear-gradient(90deg, var(--accent), var(--accent-2));
     color: #fff;
     cursor: pointer;
     transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
 }

 .btn:hover {
     filter: brightness(1.05)
 }

 .btn:active {
     transform: translateY(1px) scale(.99)
 }

 .btn:focus-visible {
     outline: var(--outline);
     outline-offset: 3px
 }

 .hint {
     text-align: center;
     color: var(--muted);
     font-size: 14px;
     margin: 4px 2px 0
 }

 .hint a {
     color: var(--accent)
 }

 /* Accessibility focus for tabs */
 .tab:focus-visible {
     outline: var(--outline)
 }

 /* Responsive */
 @media (max-width: 900px) {
     .split {
         grid-template-columns: 1fr;
     }

     .hero {
         min-height: 40vh;
         align-items: flex-end
     }

     .panel {
         min-height: 60vh;
     }
 }

 /* Login gallery */
 :root {
     --gold: #D4AF37;
     --black: #0b0b0c;
     --white: #fff;
 }

 .bm-gallery {
     padding: 30px 0;
     color: #fff;
     width: 100%;
 }

 .bm-gallery__title {
     margin: 0 0 18px;
     font-weight: 800;
     font-size: clamp(22px, 4vw, 34px);
 }

 /* Everything is scoped under .bm-swiper */
 .bm-swiper {
     --radius: 14px;
     padding: 10px;
 }

 .bm-swiper .bm-slide {
     height: auto;
 }

 .bm-swiper .bm-g-item {
     display: block;
     border-radius: 5px;
     overflow: hidden;
     position: relative;
     width: 160px;
     height: 160px;
 }

 .bm-swiper .bm-g-item img {
     object-fit: cover;
     display: block;
     width: 100%;
     height: 100%;
 }

 /* Controls (scoped) */
 .bm-swiper .swiper-button-prev,
 .bm-swiper .swiper-button-next {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(0, 0, 0, .45);
     color: var(--white);
     backdrop-filter: blur(4px);
 }

 .bm-swiper .swiper-button-prev::after,
 .bm-swiper .swiper-button-next::after {
     font-size: 16px;
 }

 .bm-swiper .swiper-button-prev:hover,
 .bm-swiper .swiper-button-next:hover {
     background: rgba(0, 0, 0, .6);
 }

 .bm-swiper .swiper-pagination-bullet {
     background: #ffffff66;
     opacity: 1;
 }

 .bm-swiper .swiper-pagination-bullet-active {
     background: var(--gold);
 }

 /* Fancybox tweak */
 .fancybox__container {
     --fancybox-bg: rgba(0, 0, 0, .96);
 }

 /* Profile page */













 /* Blue wave overlay */
 .right::before {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none;
     background:
         radial-gradient(60% 40% at 18% 8%, rgba(255, 255, 255, .14), transparent 60%),
         radial-gradient(40% 35% at 92% 32%, rgba(255, 255, 255, .10), transparent 60%),
         url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 600 360\" preserveAspectRatio=\"none\">\
  <defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\
    <stop offset=\"0\" stop-color=\"%23ffffff\" stop-opacity=\"0.18\"/>\
    <stop offset=\"1\" stop-color=\"%23ffffff\" stop-opacity=\"0\"/>\
  </linearGradient></defs>\
  <path d=\"M0,260 C160,210 220,320 380,270 C490,235 540,270 600,240 L600,360 L0,360 Z\" fill=\"url(%23g)\"/>\
  <path d=\"M0,180 C160,140 260,220 420,190 C520,170 560,190 600,170\" fill=\"none\" stroke=\"%23ffffff\" stroke-opacity=\"0.14\" stroke-width=\"2\"/>\
</svg>') center/cover no-repeat;
     mix-blend-mode: screen;
     opacity: .9;
 }