/* FINPROV Credential Experience — student wallet + staff studio */
:root {
  --ink: #0b1830; --ink-soft: #31405d; --muted: #66728a;
  --navy: #0b2454; --navy-deep: #061631; --blue: #176bda; --cyan: #19b9d2;
  --gold: #f0b84d; --mint: #26b892; --danger: #c93f50; --warn: #b56a13;
  --canvas: #f4f7fb; --card: #fff; --line: #e1e8f2;
  --radius: 20px; --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(6,22,49,.04), 0 8px 24px rgba(19,43,78,.06);
  --shadow: 0 24px 70px rgba(10,31,64,.13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--canvas); font: 15px/1.6 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.student-site { background: radial-gradient(circle at 8% 8%, rgba(25,185,210,.07), transparent 24rem), var(--canvas); }
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: none; }
:focus-visible { outline: 3px solid rgba(23,107,218,.35); outline-offset: 3px; border-radius: 6px; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.04; letter-spacing: -.045em; }
h2 { margin-bottom: 10px; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.025em; }
h3 { margin-bottom: 5px; font-size: 1rem; }
.subtitle,.muted { color: var(--muted); }
.lead { max-width: 58ch; color: var(--ink-soft); font-size: 1.04rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 11px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1; text-transform: uppercase; }
.eyebrow.light { color: #80e8f3; }
.eyebrow-dot,.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(38,184,146,.12); }

/* Student shell */
.site-header { position: sticky; z-index: 40; top: 0; color: #fff; background: rgba(7,24,53,.94); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 30px rgba(5,18,40,.14); backdrop-filter: blur(18px); }
.site-header .inner { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; min-height: 76px; margin: auto; padding: 10px 28px; }
.brand,.admin-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px rgba(9,35,78,.08), 0 8px 20px rgba(0,0,0,.18); }
.brand-logo { display: block; width: 38px; height: 38px; object-fit: contain; }
.brand-copy,.admin-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong,.admin-brand strong { font-size: 15px; letter-spacing: .12em; }
.brand-copy small,.admin-brand small { margin-top: 5px; color: #95a6c3; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 5px; }
.nav > a { padding: 9px 13px; border-radius: 10px; color: #bdc9dc; font-size: 13px; font-weight: 650; transition: .2s ease; }
.nav > a:hover,.nav > a.active { color: #fff; background: rgba(255,255,255,.1); }
.nav > a.active { box-shadow: inset 0 -2px #38c4dc; }
.nav-user { display: inline-flex; align-items: center; gap: 9px; margin-left: 8px; padding-left: 14px; color: #e5ebf5; font-size: 12px; border-left: 1px solid rgba(255,255,255,.15); }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #08214d; background: linear-gradient(135deg,#a7eff4,#47c5dc); font-weight: 900; text-transform: uppercase; }
.avatar.large { width: 43px; height: 43px; border-radius: 14px; }
.nav-signout { color: #8fa1bd !important; }
.nav-signin { padding: 10px 17px !important; color: #08214d !important; background: #fff !important; }
.nav-toggle,.admin-menu-toggle { display: none; width: 42px; height: 42px; padding: 11px; border: 0; border-radius: 10px; background: transparent; }
.nav-toggle span,.admin-menu-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: currentColor; }
.container { width: min(100% - 40px, 1200px); min-height: calc(100vh - 148px); margin: 0 auto; padding: 42px 0 76px; }
.container.narrow { max-width: 560px; }.container.mid { max-width: 820px; }.container.credential-page { max-width: 1280px; }
.site-footer { display: flex; justify-content: space-between; width: min(100% - 40px,1200px); margin: auto; padding: 22px 0 30px; color: #7c879a; font-size: 12px; border-top: 1px solid var(--line); }
.footer-trust { display: inline-flex; align-items: center; gap: 8px; }

/* Foundations */
.card { margin-bottom: 22px; padding: 28px; border: 1px solid rgba(215,225,238,.92); border-radius: var(--radius); background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); }
.page-head { margin-bottom: 28px; }.page-head h1 { font-size: clamp(2rem,4vw,3rem); }.page-head .subtitle { max-width: 60ch; }
.split-head,.admin-page-head,.section-heading,.card-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.credential-count { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.credential-count strong { color: var(--blue); font-size: 25px; line-height: 1; }.credential-count span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
label { display: block; margin: 17px 0 6px; color: #263754; font-size: 12px; font-weight: 800; letter-spacing: .025em; }
input[type=text],input[type=email],input[type=password],input[type=url],input[type=file],input[type=number],textarea,select { width: 100%; min-height: 46px; padding: 11px 13px; color: var(--ink); border: 1px solid #ccd7e7; border-radius: 11px; outline: 0; background: #fbfcfe; font: inherit; transition: .2s; }
textarea { min-height: 110px; resize: vertical; }
input:focus,textarea:focus,select:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(23,107,218,.11); }
.help { margin-top: 5px; color: var(--muted); font-size: 12px; }.errorlist { margin: 6px 0; padding-left: 18px; color: var(--danger); font-size: 13px; }
.btn,.linkedin-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 11px 18px; color: #fff; border: 0; border-radius: 11px; background: linear-gradient(135deg,#114dba,#177ade); box-shadow: 0 8px 20px rgba(23,107,218,.21); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .2s,box-shadow .2s,filter .2s; }
.btn:hover,.linkedin-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 13px 25px rgba(23,107,218,.25); }
.btn.secondary,.linkedin-btn.alt { color: var(--navy); border: 1px solid #cfdaea; background: #fff; box-shadow: none; }.btn.secondary:hover,.linkedin-btn.alt:hover { color: var(--navy); background: #f5f8fc; }
.btn.danger { background: var(--danger); box-shadow: none; }.btn.small { min-height: 34px; padding: 7px 11px; font-size: 12px; }.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }.linkedin-btn svg { width: 18px; fill: currentColor; }
.messages { margin: 0 0 22px; padding: 0; list-style: none; }.messages li,.alert { margin-bottom: 9px; padding: 13px 16px; border: 1px solid #c8d8ee; border-radius: 12px; color: #24466f; background: #eef5ff; box-shadow: var(--shadow-sm); }.messages .success { color: #126049; border-color: #b6e3d4; background: #eaf8f4; }.messages .warning { color: #81500e; border-color: #f0d4a8; background: #fff8e9; }.messages .error,.alert.error { color: #922f3c; border-color: #efc2c9; background: #fff0f2; }
.pill,.verified-chip { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 5px 10px; border-radius: 99px; color: #165841; background: #e4f7f0; font-size: 10px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }.pill.rev { color: #9d2e3c; background: #feecee; }.pill.pend { color: #8f5711; background: #fff1dd; }.pill .status-dot { width: 5px; height: 5px; box-shadow: none; }.pill.pend .status-dot { background: #dd8e25; }

/* Student dashboard */
.student-dashboard { padding-top: 28px; }
.home-hero { position: relative; display: grid; grid-template-columns: 1.12fr .88fr; min-height: 570px; margin-bottom: 70px; overflow: hidden; border-radius: 30px; color: #fff; background: linear-gradient(125deg,#06152f 0%,#0a2b64 59%,#0b3a73 100%); box-shadow: 0 28px 80px rgba(7,29,65,.24); isolation: isolate; }
.home-hero::before { position: absolute; inset: 0; z-index: -1; content: ""; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right,#000,transparent 75%); }
.hero-copy { align-self: center; padding: 60px 0 60px 64px; }.hero-copy h1 { max-width: 670px; margin: 7px 0 22px; color: #fff; font-size: clamp(2.7rem,5vw,4.6rem); }.hero-copy h1 span,.auth-story h1 span { color: #65d8e7; }.hero-copy .subtitle { max-width: 590px; color: #b9c9dd; font-size: 1.05rem; }.hero-copy .btn { color: #071b3f; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.2); }.hero-copy .btn.secondary { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }.hero-identity { display: flex; align-items: center; gap: 11px; margin-top: 40px; }.hero-identity > span:last-child { display: flex; flex-direction: column; }.hero-identity small { color: #8fa6c3; font-size: 11px; }.hero-identity strong { font-size: 13px; }
.hero-visual { position: relative; display: grid; place-items: center; min-width: 0; }.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(3px); }.hero-orb-one { top: -170px; right: -120px; width: 430px; height: 430px; background: rgba(20,194,215,.17); }.hero-orb-two { right: 25%; bottom: -220px; width: 390px; height: 390px; background: rgba(40,105,220,.24); }
.credential-preview { position: relative; width: min(82%,360px); min-height: 430px; padding: 29px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 26px; background: linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.055)); box-shadow: 0 35px 70px rgba(0,0,0,.27); backdrop-filter: blur(14px); transform: rotate(3deg); }.credential-preview::after { position: absolute; right: -80px; bottom: -100px; width: 250px; height: 250px; border: 1px solid rgba(101,216,231,.24); border-radius: 50%; content: ""; box-shadow: 0 0 0 30px rgba(101,216,231,.05),0 0 0 60px rgba(101,216,231,.03); }.preview-top,.preview-footer { display: flex; align-items: center; justify-content: space-between; }.preview-brand { font-size: 12px; font-weight: 900; letter-spacing: .13em; }.credential-preview .verified-chip { color: #adf1e0; border: 1px solid rgba(137,239,213,.25); background: rgba(38,184,146,.15); }.preview-seal { display: grid; place-items: center; width: 105px; height: 105px; margin: 46px 0 25px; border: 1px solid rgba(110,227,239,.4); border-radius: 50%; box-shadow: 0 0 0 10px rgba(102,219,233,.07),0 0 45px rgba(56,199,217,.23); }.preview-seal span { font-family: Georgia,serif; font-size: 52px; }.credential-preview > p { margin: 0; color: #71dbe7; font-size: 9px; font-weight: 800; letter-spacing: .17em; }.credential-preview h2 { margin: 7px 0 30px; color: #fff; font-size: 28px; }.preview-line { height: 1px; margin-bottom: 19px; background: rgba(255,255,255,.16); }.preview-footer { color: #9eb2cd; font-size: 10px; }.preview-footer strong { color: #fff; }.floating-tag { position: absolute; z-index: 2; padding: 8px 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; color: #fff; background: rgba(5,27,62,.72); box-shadow: 0 10px 25px rgba(0,0,0,.2); font-size: 10px; font-weight: 800; letter-spacing: .06em; backdrop-filter: blur(10px); }.tag-one { top: 22%; left: 2%; }.tag-two { right: 4%; bottom: 22%; }
.value-section { margin-bottom: 10px; }.section-heading { margin-bottom: 24px; }.section-heading h2 { margin: 0; font-size: 2rem; }.section-heading > p { max-width: 480px; margin: 0; color: var(--muted); }.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.value-card { display: flex; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); transition: .25s; }.value-card:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--shadow-sm); }.value-card p { margin: 0; color: var(--muted); font-size: 13px; }.value-icon,.quick-icon { display: grid; flex: 0 0 auto; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: #0f69cb; background: #e9f3ff; font-weight: 900; }

/* Badge index and detail */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 20px; }.badge-card { position: relative; display: flex; min-height: 440px; padding: 20px; flex-direction: column; overflow: hidden; color: inherit; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); transition: .28s cubic-bezier(.2,.8,.2,1); }.badge-card:hover { transform: translateY(-7px); border-color: #bdd1eb; box-shadow: var(--shadow); }.badge-card-top { display: flex; align-items: center; justify-content: space-between; }.badge-year { color: #8a95a7; font-size: 11px; font-weight: 800; }.badge-image-stage { position: relative; display: grid; min-height: 210px; place-items: center; }.badge-halo { position: absolute; width: 165px; height: 165px; border-radius: 50%; background: radial-gradient(circle,rgba(23,107,218,.13),rgba(25,185,210,.04) 55%,transparent 70%); }.badge-image-stage img { position: relative; z-index: 1; width: 165px; height: 165px; object-fit: contain; transition: transform .3s; }.badge-card:hover img { transform: scale(1.05) rotate(-2deg); }.badge-card-body { padding-top: 8px; border-top: 1px solid #eef2f7; }.badge-label { margin-bottom: 4px; color: var(--blue); font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }.badge-card .name { color: var(--ink); font-size: 18px; font-weight: 850; line-height: 1.25; }.badge-card .meta { margin-top: 7px; color: var(--muted); font-size: 11px; }.badge-card-cta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; color: var(--navy); font-size: 12px; font-weight: 850; }.badge-card-cta span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: var(--navy); }.badge-card.is-revoked { filter: grayscale(.35); }.empty-state { padding: 70px 30px; text-align: center; }.empty-state p { max-width: 540px; margin: 0 auto 24px; color: var(--muted); }.empty-icon { display: grid; width: 70px; height: 70px; margin: 0 auto 18px; place-items: center; border-radius: 22px; color: var(--blue); background: #eaf3ff; font-size: 32px; }
.credential-summary-card { padding: 20px 30px 34px; }.credential-kicker { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; }.credential-summary { display: grid; grid-template-columns: minmax(0,2fr) minmax(280px,.85fr); gap: 30px; }.credential-primary { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 30px; }.credential-artwork { position: relative; display: grid; min-height: 300px; place-items: center; overflow: hidden; border-radius: 20px; background: radial-gradient(circle at 50% 44%,#fff 0,#edf5ff 48%,#e4edf8 100%); }.credential-artwork::after { position: absolute; inset: 18px; border: 1px solid rgba(23,107,218,.09); border-radius: 50%; content: ""; }.credential-badge-image { position: relative; z-index: 1; width: 225px; height: 250px; object-fit: contain; filter: drop-shadow(0 18px 25px rgba(11,36,84,.13)); }.credential-details { min-width: 0; padding-top: 10px; }.credential-details h1 { font-size: clamp(2rem,4vw,3rem); }.credential-details .subtitle { margin-bottom: 20px; }.credential-learning { padding-left: 27px; border-left: 1px solid var(--line); }.credential-learning p { color: var(--ink-soft); }.credential-skills { display: flex; flex-wrap: wrap; gap: 7px; }.kv { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 22px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }.kv div { display: flex; min-width: 0; padding: 11px 13px; flex-direction: column; border-bottom: 1px solid var(--line); }.kv div:nth-child(odd) { border-right: 1px solid var(--line); }.kv .k { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.kv code { margin-top: 3px; overflow-wrap: anywhere; }.certificate-section > h2 { text-align: center; }.certificate-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }.certificate-item { min-width: 0; }.certificate-item h3 { min-height: 43px; text-align: center; }.credential-certificate { display: block; width: 100%; aspect-ratio: 1.414/1; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #f7f9fc; box-shadow: var(--shadow-sm); }.certificate-item .btn-row { justify-content: center; }.mt { margin-top: 18px; }.right { text-align: right; }code.url { color: #175aad; font-size: 11px; }

/* Auth */
.container.auth-page { display: grid; width: min(100% - 32px,1040px); min-height: calc(100dvh - 140px); place-items: center; padding: 28px 0; }.auth-shell { display: grid; width: 100%; grid-template-columns: 1.08fr .92fr; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 30px 90px rgba(6,22,49,.18); }.auth-story { position: relative; min-height: 590px; padding: 62px; overflow: hidden; color: #fff; background: linear-gradient(145deg,#06152f,#0a326d); }.auth-story::after { position: absolute; right: -130px; bottom: -180px; width: 420px; height: 420px; border: 1px solid rgba(101,216,231,.2); border-radius: 50%; content: ""; box-shadow: 0 0 0 50px rgba(101,216,231,.04),0 0 0 100px rgba(101,216,231,.025); }.auth-story h1 { margin-top: 70px; color: #fff; font-size: clamp(2.7rem,5vw,4.3rem); }.auth-story > p { max-width: 420px; color: #b5c5da; font-size: 1.02rem; }.auth-benefits { display: flex; margin-top: 34px; flex-direction: column; gap: 10px; color: #d9e5f4; font-size: 12px; font-weight: 700; }.auth-seal { position: absolute; z-index: 1; right: 55px; bottom: 48px; display: grid; width: 116px; height: 116px; place-items: center; color: #9aebf3; border: 1px solid rgba(101,216,231,.35); border-radius: 50%; box-shadow: 0 0 0 9px rgba(101,216,231,.05); }.auth-seal span { font: 50px/1 Georgia,serif; }.auth-seal small { margin-top: -25px; font-size: 7px; letter-spacing: .18em; }.auth-card { align-self: center; margin: 0; padding: 54px; border: 0; border-radius: 0; box-shadow: none; }.auth-card-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.auth-logo { width: 92px; height: 52px; object-fit: contain; }.auth-card-brand span { color: #8691a4; font-size: 9px; font-weight: 850; letter-spacing: .15em; }.auth-card h2 { font-size: 2rem; }.auth-card .btn { width: 100%; }.auth-security,.auth-alternate { margin: 25px 0 0; color: #8a95a6; font-size: 10px; text-align: center; }.auth-security span { color: var(--mint); }.otp-visual { display: flex; gap: 10px; margin-top: 40px; }.otp-visual span { display: grid; width: 42px; height: 52px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.07); font-size: 24px; }.auth-metric { position: absolute; bottom: 60px; display: flex; align-items: center; gap: 14px; }.auth-metric strong { color: #69ddea; font-size: 2.2rem; }.auth-metric span { max-width: 100px; color: #b8c8dc; font-size: 11px; }

.auth-shell,.auth-card { min-width: 0; max-width: 100%; }

/* Admin shell */
.admin-site { overflow-x: hidden; background: #f3f6fa; }.admin-shell { display: flex; min-height: 100vh; }.admin-sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; width: 252px; padding: 25px 17px 20px; flex-direction: column; color: #fff; background: linear-gradient(180deg,#071a3b,#06152f 70%,#041126); box-shadow: 12px 0 35px rgba(6,22,49,.09); }.admin-brand { margin: 0 9px 34px; }.admin-nav-label { margin: 17px 12px 7px; color: #667c9c; font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }.admin-nav { display: flex; flex-direction: column; gap: 3px; }.admin-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #9fb0ca; border-radius: 11px; font-size: 12px; font-weight: 650; transition: .18s; }.admin-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }.admin-nav a.active { color: #fff; background: linear-gradient(90deg,rgba(32,142,217,.3),rgba(32,142,217,.09)); box-shadow: inset 3px 0 #3ec5dc; }.nav-icon { display: grid; width: 24px; height: 24px; place-items: center; color: #77d5e3; font-size: 17px; }.sidebar-foot { display: flex; margin-top: auto; padding: 17px 10px 0; flex-direction: column; gap: 15px; border-top: 1px solid rgba(255,255,255,.08); }.sidebar-foot a { display: flex; justify-content: space-between; color: #9bacc5; font-size: 12px; font-weight: 700; }.sidebar-secure { display: flex; align-items: center; gap: 8px; color: #7690af; font-size: 9px; text-transform: uppercase; }.sidebar-secure .status-dot { width: 6px; height: 6px; box-shadow: none; }.admin-workspace { width: calc(100% - 252px); margin-left: 252px; }.admin-topbar { position: sticky; z-index: 30; top: 0; display: flex; height: 78px; padding: 0 34px; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfe6ef; background: rgba(255,255,255,.88); backdrop-filter: blur(15px); }.admin-topbar-copy,.admin-profile > span:last-child { display: flex; flex-direction: column; }.admin-topbar-copy small,.admin-profile small { color: #8a95a6; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.admin-topbar-copy strong { font-size: 15px; }.admin-profile { display: flex; align-items: center; gap: 10px; }.admin-profile .avatar { width: 36px; height: 36px; }.admin-profile strong { max-width: 180px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.admin-content { max-width: 1500px; margin: 0 auto; padding: 36px; }.admin-content h1 { font-size: clamp(2rem,3vw,2.8rem); }.admin-page-head { margin-bottom: 28px; }.admin-page-head p { margin: 0; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }.stat { display: flex; min-width: 0; padding: 20px; gap: 14px; color: inherit; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); transition: .2s; }.stat:hover { transform: translateY(-3px); border-color: #bdd1eb; box-shadow: 0 15px 32px rgba(11,36,84,.1); }.stat-icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; color: var(--blue); border-radius: 11px; background: #eaf3ff; font-size: 18px; }.stat .l { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.stat .n { margin: 2px 0; color: var(--ink); font-size: 28px; font-weight: 900; line-height: 1.1; letter-spacing: -.04em; }.stat small { display: block; overflow: hidden; color: #929cac; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.stat-primary { color: #fff; border-color: transparent; background: linear-gradient(135deg,#0b285c,#0e4d91); }.stat-primary .stat-icon { color: #81e2ec; background: rgba(255,255,255,.1); }.stat-primary .l,.stat-primary small { color: #acc0dc; }.stat-primary .n { color: #fff; }.stat-alert .stat-icon { color: #a86613; background: #fff2dd; }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0,2.1fr) minmax(280px,.8fr); gap: 20px; }.card-heading { align-items: center; margin-bottom: 15px; }.card-heading h2 { margin: 0; }.card-heading > a { font-size: 11px; font-weight: 800; }.recent-card { min-width: 0; }.quick-actions > a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; color: inherit; border-bottom: 1px solid var(--line); }.quick-actions > a:hover strong { color: var(--blue); }.quick-actions a > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }.quick-actions small { color: var(--muted); font-size: 10px; }.quick-actions b { color: #9aa5b6; }.revoked-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 18px; padding: 14px; border-radius: 12px; background: #f7f9fc; }.revoked-note strong { font-size: 22px; }.revoked-note span,.revoked-note a { font-size: 10px; }.revoked-note a { font-weight: 800; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }th,td { padding: 13px 12px; text-align: left; border-bottom: 1px solid #e9eef4; }th { color: #7d899c; background: #f7f9fc; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }tbody tr { transition: background .15s; }tbody tr:hover { background: #f8fafd; }.table-wrap { width: 100%; overflow-x: auto; border-radius: 12px; }.table-title { color: var(--ink); font-weight: 800; }.row-action { display: inline-grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--line); border-radius: 8px; }.empty-table { padding: 30px; color: var(--muted); text-align: center; }.course-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 18px; }.course-card { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }.course-card .name { font-weight: 850; }.course-card .meta { color: var(--muted); font-size: 11px; }.course-details { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }.course-details summary { color: var(--blue); font-size: 11px; font-weight: 800; cursor: pointer; }.course-details .details-less { display: none; }.course-details[open] .details-more { display: none; }.course-details[open] .details-less { display: inline; }.checkbox-list { max-height: 330px; padding: 10px 14px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; }.checkbox-list label { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 500; }.checkbox-list input { width: auto; }.inline-form { display: inline; }

/* Verification modal */
.verify-dialog { width: min(440px,calc(100% - 30px)); padding: 0; color: var(--ink); border: 0; border-radius: 22px; box-shadow: 0 30px 90px rgba(4,17,38,.35); }.verify-dialog::backdrop { background: rgba(4,17,38,.68); backdrop-filter: blur(5px); }.verify-dialog-close { position: absolute; z-index: 2; top: 12px; right: 14px; color: var(--muted); border: 0; background: none; font-size: 26px; cursor: pointer; }.verify-state { padding: 48px 35px 35px; text-align: center; }.verify-spinner { display: inline-block; width: 62px; height: 62px; border: 5px solid #e1eaf6; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }.verify-result-icon { display: inline-grid; width: 68px; height: 68px; place-items: center; color: #fff; border-radius: 50%; font-size: 34px; font-weight: 900; }.verify-result-icon.success { background: var(--mint); }.verify-result-icon.failure { background: var(--danger); }@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width:1100px) { .stat-grid { grid-template-columns: repeat(2,1fr); }.admin-dashboard-grid { grid-template-columns: 1fr; }.home-hero { grid-template-columns: 1fr 420px; }.hero-copy { padding-left: 45px; }.credential-summary { grid-template-columns: 1fr; }.credential-learning { padding: 25px 0 0; border-top: 1px solid var(--line); border-left: 0; } }
@media (max-width:900px) { .nav-toggle,.admin-menu-toggle { display: block; color: #fff; }.nav { position: absolute; top: calc(100% + 1px); right: 16px; left: 16px; display: none; padding: 12px; flex-direction: column; align-items: stretch; border: 1px solid rgba(255,255,255,.1); border-radius: 0 0 16px 16px; background: #071a3b; box-shadow: var(--shadow); }.student-nav-open .nav { display: flex; }.nav-user { margin: 5px 0; padding: 10px; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }.home-hero { grid-template-columns: 1fr; }.hero-copy { padding: 55px; }.hero-visual { display: none; }.value-grid { grid-template-columns: 1fr; }.auth-shell { max-width: 560px; grid-template-columns: 1fr; }.auth-story { display: none; }.admin-sidebar { transform: translateX(-105%); transition: transform .25s; }.admin-nav-open .admin-sidebar { transform: translateX(0); }.admin-workspace { width: 100%; margin-left: 0; }.admin-menu-toggle { color: var(--ink); }.admin-topbar-copy { margin-right: auto; margin-left: 12px; }.certificate-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:650px) { .site-header .inner { min-height: 66px; padding: 9px 18px; }.brand-mark { width: 40px; height: 40px; }.container { width: min(100% - 28px,1200px); padding: 25px 0 52px; }.site-footer { width: calc(100% - 28px); flex-direction: column; gap: 6px; }.home-hero { min-height: auto; border-radius: 22px; }.hero-copy { padding: 38px 25px; }.hero-copy h1 { font-size: 2.65rem; }.hero-copy .btn { width: 100%; }.hero-identity { margin-top: 30px; }.section-heading,.split-head,.admin-page-head { align-items: flex-start; flex-direction: column; }.section-heading > p { max-width: none; }.badge-grid { grid-template-columns: 1fr; }.badge-card { min-height: 420px; }.credential-summary-card { padding: 17px; }.credential-kicker { align-items: flex-start; flex-direction: column; gap: 8px; }.credential-primary { grid-template-columns: 1fr; }.credential-artwork { min-height: 260px; }.credential-details { padding: 0 5px; }.kv { grid-template-columns: 1fr; }.kv div:nth-child(odd) { border-right: 0; }.certificate-grid { grid-template-columns: 1fr; }.btn-row .btn,.btn-row .linkedin-btn { width: 100%; }.container.auth-page { min-height: calc(100dvh - 120px); }.auth-shell { border-radius: 20px; }.auth-card { padding: 35px 23px; }.auth-card-brand { margin-bottom: 35px; }.admin-topbar { height: 68px; padding: 0 16px; }.admin-profile > span:last-child { display: none; }.admin-content { padding: 25px 15px; }.stat-grid { grid-template-columns: 1fr; }.admin-page-head .btn { width: 100%; }.card { padding: 20px; }.recent-card { padding: 18px 10px; }.card-heading { padding: 0 8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto!important; transition: none!important; animation-duration: .01ms!important; } }

/* One-screen student dashboard */
.student-dashboard-page { height: 100vh; height: 100dvh; overflow: hidden; }
.student-dashboard-page .site-footer { display: none; }
.student-dashboard-page .site-header {
  position: fixed; inset: 0 0 auto; height: 76px;
}
.student-dashboard-page .student-dashboard {
  position: fixed; inset: 76px 0 0;
  width: min(100% - 40px,1200px); height: auto; min-height: 0;
  margin: 0 auto; padding-top: clamp(12px,2.4vh,22px); padding-bottom: clamp(12px,2.4vh,22px);
}
.student-dashboard-page .home-hero { height: 100%; min-height: 0; margin: 0; }
.student-dashboard-page .hero-copy { padding: clamp(26px,5vh,54px) 0 clamp(26px,5vh,54px) clamp(30px,4.5vw,64px); }
.student-dashboard-page .hero-copy h1 { margin-bottom: clamp(12px,2.3vh,22px); font-size: clamp(2.35rem,4.2vw,4.1rem); }
.student-dashboard-page .hero-copy .subtitle { margin-bottom: 0; font-size: clamp(.88rem,1.2vw,1.04rem); }
.student-dashboard-page .hero-identity { margin-top: clamp(16px,3vh,34px); }
.student-dashboard-page .credential-preview { height: clamp(315px,56vh,420px); min-height: 0; }
.student-dashboard-page .preview-seal { margin-top: clamp(20px,5vh,46px); margin-bottom: clamp(14px,3vh,25px); }

@media (min-width:901px) and (max-height:760px) {
  .student-dashboard-page .hero-copy h1 { font-size: clamp(2.2rem,3.8vw,3.6rem); }
  .student-dashboard-page .hero-copy .btn-row { margin-top: 14px; }
  .student-dashboard-page .credential-preview { height: min(390px,66vh); padding: 24px; }
  .student-dashboard-page .preview-seal { width: 88px; height: 88px; margin-top: 20px; }
  .student-dashboard-page .preview-seal span { font-size: 43px; }
  .student-dashboard-page .credential-preview h2 { margin-bottom: 18px; font-size: 24px; }
}

@media (max-width:900px) {
  .student-dashboard-page .student-dashboard { inset: 76px 0 0; height: auto; }
  .student-dashboard-page .hero-copy { padding: clamp(28px,6vh,52px); }
}

@media (max-width:650px) {
  .student-dashboard-page .site-header { height: 66px; }
  .student-dashboard-page .student-dashboard { inset: 66px 0 0; width: calc(100% - 28px); height: auto; padding: 12px 0; }
  .student-dashboard-page .hero-copy { padding: 28px 24px; }
  .student-dashboard-page .hero-copy h1 { font-size: clamp(2.05rem,10vw,2.7rem); }
  .student-dashboard-page .hero-copy .subtitle { font-size: .88rem; line-height: 1.5; }
  .student-dashboard-page .hero-identity { margin-top: 20px; }
}

@media (max-height:620px) {
  .student-dashboard-page .hero-identity { display: none; }
  .student-dashboard-page .hero-copy h1 { font-size: clamp(2rem,3.5vw,3rem); }
}

/* Keep the first credential fully visible while preserving normal page scrolling */
.credentials-index { padding-top: clamp(16px,2.6vh,28px); }
.credentials-index .page-head {
  align-items: center; margin-bottom: clamp(14px,2.2vh,20px);
}
.credentials-index .page-head h1 {
  margin-bottom: 4px; font-size: clamp(2rem,3.1vw,2.75rem);
}
.credentials-index .page-head .eyebrow { margin-bottom: 7px; }
.credentials-index .page-head .subtitle {
  max-width: none; margin-bottom: 0; line-height: 1.45;
}
.credentials-index .badge-card {
  min-height: 330px; padding: 16px 17px;
}
.credentials-index .badge-image-stage { min-height: 155px; }
.credentials-index .badge-halo { width: 140px; height: 140px; }
.credentials-index .badge-image-stage img { width: 138px; height: 138px; }
.credentials-index .badge-card-body { padding-top: 7px; }
.credentials-index .badge-card .name { font-size: 16px; }
.credentials-index .badge-card-cta { padding-top: 12px; }

@media (max-width:650px) {
  .credentials-index { padding-top: 20px; }
  .credentials-index .page-head { gap: 14px; }
  .credentials-index .credential-count { align-self: flex-start; }
  .credentials-index .badge-card { min-height: 350px; }
}

/* Compact, transparent badge presentation on credential pages */
.credential-page { padding-top: clamp(16px,2.4vh,28px); }
.credential-page .credential-summary-card { padding: 17px 24px 24px; }
.credential-page .credential-kicker {
  margin-bottom: 14px; padding-bottom: 11px;
}
.credential-page .credential-summary { gap: 24px; }
.credential-page .credential-primary {
  grid-template-columns: 215px minmax(0,1fr); gap: 24px;
}
.credential-page .credential-artwork {
  min-height: 245px; height: 245px; overflow: visible;
  background: transparent; border-radius: 0;
}
.credential-page .credential-artwork::after { display: none; }
.credential-page .credential-badge-image {
  width: 195px; height: 225px; filter: drop-shadow(0 14px 18px rgba(11,36,84,.16));
}
.credential-page .credential-details { padding-top: 3px; }
.credential-page .credential-details h1 {
  font-size: clamp(1.9rem,3.25vw,2.75rem); line-height: 1.08;
}
.credential-page .credential-details .subtitle { margin-bottom: 12px; }
.credential-page .credential-details .lead { margin: 10px 0 12px; }
.credential-page .kv { margin: 14px 0; }
.credential-page .kv div { padding: 8px 11px; }
.credential-page .credential-details .btn-row { margin-top: 10px; }

@media (max-width:650px) {
  .credential-page .credential-primary { grid-template-columns: 1fr; gap: 12px; }
  .credential-page .credential-artwork { min-height: 210px; height: 210px; }
  .credential-page .credential-badge-image { width: 180px; height: 200px; }
}

/* Authentication screens always fit the visible browser viewport */
.auth-screen { height: 100vh; height: 100dvh; overflow: hidden; }
.auth-screen .site-header { position: fixed; inset: 0 0 auto; height: 76px; }
.auth-screen .site-footer { display: none; }
.auth-screen .auth-page {
  position: fixed; inset: 76px 0 0;
  width: min(100% - 32px,1040px); height: auto; min-height: 0;
  margin: 0 auto; padding: clamp(12px,2.5vh,22px) 0;
  display: flex; flex-direction: column; justify-content: center;
}
.auth-screen .auth-page > .messages {
  position: absolute; z-index: 5; top: 12px; right: 18px;
  max-width: 360px; margin: 0;
}
.auth-screen .auth-shell {
  width: 100%; height: min(590px,calc(100dvh - 112px)); min-height: 0;
}
.auth-screen .auth-story { min-height: 0; height: 100%; padding: clamp(30px,4.4vw,62px); }
.auth-screen .auth-story h1 {
  margin-top: clamp(24px,5vh,62px);
  font-size: clamp(2.45rem,4.5vw,4.05rem);
}
.auth-screen .auth-card { max-height: 100%; padding: clamp(28px,4vw,54px); }
.auth-screen .auth-card-brand { margin-bottom: clamp(18px,3.8vh,42px); padding-bottom: 13px; }
.auth-screen .auth-card .subtitle { margin-bottom: 8px; }
.auth-screen .auth-card label { margin-top: 11px; }
.auth-screen .auth-card .btn-row { margin-top: 14px; }
.auth-screen .auth-security,.auth-screen .auth-alternate { margin-top: 16px; }

@media (max-height:720px) and (min-width:901px) {
  .auth-screen .auth-story h1 { margin-top: 20px; font-size: clamp(2.25rem,4vw,3.45rem); }
  .auth-screen .auth-benefits { margin-top: 20px; gap: 6px; }
  .auth-screen .auth-seal { right: 36px; bottom: 30px; width: 90px; height: 90px; }
  .auth-screen .auth-seal span { font-size: 40px; }
  .auth-screen .auth-card-brand { margin-bottom: 18px; }
  .auth-screen .auth-card h2 { font-size: 1.65rem; }
}

@media (max-width:900px) {
  .auth-screen .auth-shell { max-width: 560px; }
}

@media (max-width:650px) {
  .auth-screen .site-header { height: 66px; }
  .auth-screen .auth-page { inset: 66px 0 0; width: calc(100% - 24px); padding: 12px 0; }
  .auth-screen .auth-shell { height: min(560px,calc(100dvh - 90px)); }
  .auth-screen .auth-card { padding: 26px 22px; }
  .auth-screen .auth-page > .messages { top: 8px; right: 8px; left: 8px; max-width: none; }
}

/* The staff form has two fields, so it uses a tighter vertical rhythm */
.staff-auth-screen .auth-page { padding-top: 10px; padding-bottom: 10px; }
.staff-auth-screen .auth-shell { height: min(570px,calc(100dvh - 96px)); }
.staff-auth-screen .auth-card {
  padding-top: clamp(20px,3vh,34px); padding-bottom: clamp(20px,3vh,34px);
}
.staff-auth-screen .auth-card-brand {
  margin-bottom: clamp(10px,2vh,20px); padding-bottom: 9px;
}
.staff-auth-screen .auth-logo { height: 44px; }
.staff-auth-screen .auth-card .eyebrow { margin-bottom: 7px; }
.staff-auth-screen .auth-card h2 { margin-bottom: 7px; font-size: 1.75rem; }
.staff-auth-screen .auth-card .subtitle { margin-bottom: 4px; line-height: 1.45; }
.staff-auth-screen .auth-card label { margin-top: 7px; margin-bottom: 4px; }
.staff-auth-screen .auth-card input { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
.staff-auth-screen .auth-card .btn-row { margin-top: 10px; }
.staff-auth-screen .auth-card .btn { min-height: 42px; }
.staff-auth-screen .auth-security { margin-top: 10px; }

@media (max-height:650px) and (min-width:651px) {
  .staff-auth-screen .auth-story h1 { margin-top: 15px; font-size: 2.65rem; }
  .staff-auth-screen .auth-story > p { font-size: .9rem; }
  .staff-auth-screen .auth-metric { bottom: 24px; }
}

/* Staff workspace: profile belongs to the sidebar, not a desktop header */
.admin-nav {
  min-height: 0; padding-right: 3px; flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #294466 transparent;
}
.admin-nav::-webkit-scrollbar { width: 4px; }
.admin-nav::-webkit-scrollbar-thumb { border-radius: 99px; background: #294466; }
.sidebar-foot {
  margin-top: 12px; padding: 14px 9px 0; gap: 10px;
}
.sidebar-user { display: flex; min-width: 0; align-items: center; gap: 10px; }
.sidebar-user .avatar { width: 36px; height: 36px; border-radius: 11px; }
.sidebar-user > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.sidebar-user small {
  color: #7288a7; font-size: 8px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.sidebar-user strong {
  overflow: hidden; color: #eef4fc; font-size: 10px;
  text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-foot > a {
  padding: 8px 10px; color: #c4d0e1; border-radius: 9px;
  background: rgba(255,255,255,.055); font-size: 11px;
}
.sidebar-foot > a:hover { color: #fff; background: rgba(255,255,255,.1); }
.admin-mobile-bar { display: none; }

@media (max-width:900px) {
  .admin-mobile-bar {
    position: sticky; z-index: 30; top: 0; display: flex; height: 68px;
    padding: 0 18px; align-items: center; gap: 12px;
    border-bottom: 1px solid #dfe6ef; background: rgba(255,255,255,.92);
    backdrop-filter: blur(15px);
  }
  .admin-mobile-bar strong { font-size: 14px; }
}