:root {
  --ink: #162337;
  --muted: #718096;
  --line: #e5ebf2;
  --blue: #2e7df6;
  --navy: #163b70;
  --sky: #eaf4ff;
  --green: #1aa873;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #fff; }
button, a { font: inherit; }
button { cursor: pointer; }
.page-shell { max-width: 1260px; margin: 0 auto; padding: 0 54px; }
.details-view { display: block; }
.details-open .compact-view { display: flex; }
.details-open .details-view { display: block; }
.compact-view { min-height: calc(100vh - 91px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.identity-card { position: relative; z-index: 1; width: min(490px, 100%); min-height: 286px; padding: 27px 30px 21px; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.65); border-radius: 18px; background: linear-gradient(125deg, #176bd7 0%, #398de9 52%, #8bc8fa 100%); box-shadow: 0 28px 60px rgba(30, 105, 201, .25); transform: rotate(-2deg); }
.identity-card::before, .identity-card::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; pointer-events: none; }.identity-card::before { width: 430px; height: 220px; right: -130px; top: -85px; }.identity-card::after { width: 350px; height: 180px; right: -80px; top: -55px; }
.identity-card-top, .identity-card-body, .identity-card-footer { position: relative; z-index: 1; }.identity-card-top, .identity-card-footer { display: flex; align-items: center; justify-content: space-between; }.card-brand { font: 800 17px Manrope, sans-serif; letter-spacing: -.5px; }.card-brand > span:last-child { color: #d7edff; }.mini-mark { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 7px; border: 1px solid rgba(255,255,255,.65); border-radius: 7px; font: 800 15px Manrope; }.card-type, .compact-label { color: rgba(255,255,255,.7); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; }.identity-card-body { display: flex; align-items: center; gap: 23px; margin-top: 40px; }.compact-avatar-wrap { position: relative; flex: 0 0 auto; width: 99px; height: 99px; }.compact-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; border: 3px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 8px 18px rgba(12, 64, 133, .2); }.compact-check { position: absolute; right: 0; bottom: 3px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #22b480; font-size: 12px; font-weight: 700; }.compact-details h1 { margin: 7px 0 4px; color: #fff; font: 700 25px Manrope, sans-serif; letter-spacing: -1px; }.compact-details p { margin: 0; color: rgba(255,255,255,.76); font-size: 12px; }.compact-organisation { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 11px; }.compact-organisation span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; color: #17467f; background: #fff; font: 800 12px Manrope; }.identity-card-footer { margin-top: 32px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.68); font-size: 9px; letter-spacing: 1px; }.identity-card-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #63e0b2; box-shadow: 0 0 0 3px rgba(99,224,178,.2); }.compact-caption { position: relative; z-index: 1; margin: 36px 0 17px; color: #8796a8; font-size: 11px; }.details-button { position: relative; z-index: 1; min-width: 170px; padding: 13px 19px; border: 1px solid #d2e4f6; border-radius: 8px; color: var(--blue); background: #fff; box-shadow: 0 7px 18px rgba(45, 125, 246, .08); font-size: 11px; font-weight: 700; transition: .2s; }.details-button:hover { color: #fff; border-color: var(--blue); background: var(--blue); transform: translateY(-2px); }.details-button span { margin-left: 10px; font-size: 16px; vertical-align: -1px; }.compact-orbit { position: absolute; border: 1px solid #e2effb; border-radius: 50%; transform: rotate(-19deg); }.compact-orbit-one { width: 690px; height: 260px; }.compact-orbit-two { width: 500px; height: 340px; transform: rotate(34deg); border-color: #f0f6fc; }
.topbar { height: 91px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid #eef2f6; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; text-decoration: none; letter-spacing: -.7px; }
.brand > span:last-child span { color: var(--blue); }
.brand-mark { position: relative; display: inline-flex; align-items: center; gap: 3px; width: 29px; height: 24px; }
.brand-mark span { display: block; width: 7px; border-radius: 6px; background: var(--blue); transform: skew(-20deg); }
.brand-mark span:nth-child(1) { height: 12px; opacity: .5; }.brand-mark span:nth-child(2) { height: 20px; opacity: .75; }.brand-mark span:nth-child(3) { height: 24px; }
.secure-label { margin-left: auto; color: #8795a8; font-size: 12px; }.secure-label i, .live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: #39c695; border-radius: 50%; box-shadow: 0 0 0 4px #e5f8f1; }
.icon-button { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; width: 39px; height: 39px; color: #6c7c90; transition: .2s; }.icon-button:hover { border-color: var(--blue); color: var(--blue); }.icon-button svg { width: 17px; fill: currentColor; }
.hero { min-height: 316px; display: flex; align-items: center; position: relative; overflow: hidden; }.hero-copy { padding: 55px 0 47px; z-index: 1; }.eyebrow, .section-kicker { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 1.7px; margin: 0 0 17px; }.eyebrow-line { width: 28px; height: 2px; display: inline-block; vertical-align: middle; margin-right: 9px; background: var(--blue); }
h1 { margin: 0; font-family: Manrope, sans-serif; font-size: clamp(42px, 5vw, 64px); line-height: 1.03; letter-spacing: -3px; color: #1b2c43; } h1 em { color: var(--blue); font-style: normal; }.hero-text { max-width: 410px; color: #78879b; line-height: 1.6; font-size: 14px; margin: 20px 0 20px; }.scan-meta { color: #7f8da0; font-size: 11px; }.dot-separator { margin: 0 9px; color: #b1bfce; }
.orbit-art { position: absolute; width: 440px; height: 300px; right: 3%; top: 8px; }.orbit { position: absolute; border: 1px solid #dbeaf8; border-radius: 50%; transform: rotate(-24deg); }.orbit-one { width: 490px; height: 190px; top: 49px; left: -25px; }.orbit-two { width: 360px; height: 220px; top: 32px; left: 34px; transform: rotate(47deg); border-color: #edf4fb; }.art-card { position: absolute; width: 236px; height: 145px; left: 110px; top: 72px; padding: 19px; border: 1px solid rgba(255,255,255,.8); border-radius: 12px; color: #fff; background: linear-gradient(120deg, #1668d4, #73b8fa); box-shadow: 0 22px 45px rgba(38,117,218,.25); transform: rotate(-8deg); }.art-card:after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .24; background: repeating-linear-gradient(120deg, transparent 0 17px, #fff 18px 19px); }.art-logo { position: relative; font: 800 33px Manrope; z-index: 1; }.art-code { position: absolute; right: 17px; top: 23px; font-size: 9px; letter-spacing: 1px; }.art-chip { position: absolute; z-index: 1; right: 18px; bottom: 20px; width: 27px; height: 20px; border: 1px solid rgba(255,255,255,.7); border-radius: 4px; } #qrCode { position: absolute; right: 24px; bottom: -18px; width: 108px; height: 108px; padding: 5px; border-radius: 12px; background: rgba(255,255,255,.95); box-shadow: 0 15px 40px rgba(15,42,93,.24); }
.content-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }.card { border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 10px 32px rgba(38, 70, 103, .035); }.profile-card { padding: 29px 33px 23px; }.profile-heading { display: flex; align-items: center; gap: 18px; }.avatar-wrap { position: relative; width: 67px; height: 67px; flex: 0 0 auto; }.avatar-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 0 0 1px #dfe8f1; }.verified-badge { position: absolute; right: -2px; bottom: 1px; width: 20px; height: 20px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: bold; border: 2px solid #fff; border-radius: 50%; background: var(--green); }.verified-label { color: var(--green); font-size: 10px; font-weight: 700; margin-bottom: 5px; }.verified-label span { margin-right: 5px; }.profile-title h2 { margin: 0; color: #1a2b41; font: 700 23px Manrope; letter-spacing: -.8px; }.profile-title p { color: var(--muted); margin: 4px 0 0; font-size: 12px; }.more-button { align-self: flex-start; margin-left: auto; color: #a8b4c2; border: 0; background: transparent; letter-spacing: 2px; font-size: 15px; }.org-row { display: flex; align-items: center; gap: 11px; padding: 18px 0 17px; margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.org-icon, .northstar-logo { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: #fff; background: var(--navy); font: 800 16px Manrope; }.org-row strong, .org-row small { display: block; }.org-row strong { font-size: 12px; }.org-row small { color: var(--muted); font-size: 10px; margin-top: 3px; }.org-status { margin-left: auto; color: var(--green); border-radius: 20px; padding: 5px 10px; background: #ecfaf5; font-size: 10px; font-weight: 700; }.details-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 35px; padding-top: 20px; }.detail { display: flex; align-items: center; gap: 10px; min-width: 0; }.detail-icon { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; color: var(--blue); background: #eef6ff; border-radius: 7px; font-size: 10px; font-weight: 700; }.detail div { min-width: 0; }.detail small, .detail strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.detail small, .info-columns span { color: #8a98a9; font-size: 10px; margin-bottom: 4px; }.detail strong { font-size: 11px; }.copy-button { margin-left: auto; border: 0; color: var(--blue); background: none; font-size: 10px; font-weight: 700; }
.verification-card { padding: 25px 29px; background: linear-gradient(145deg, #fbfdff, #f5faff); }.card-topline { display: flex; justify-content: space-between; align-items: center; }.small-label { color: #8a99a9; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }.shield { display: grid; place-items: center; width: 26px; height: 26px; color: var(--blue); background: #e6f1ff; border-radius: 50%; font-size: 10px; }.status-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 25px; color: #fff; background: #20b17d; border-radius: 13px; font-weight: bold; font-size: 20px; box-shadow: 0 7px 17px #bdebdc; }.verification-card h3, .information-card h3, .contact-card h3 { color: #1b2d45; font: 700 17px Manrope; margin: 16px 0 7px; letter-spacing: -.4px; }.verification-card > p { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 0; max-width: 260px; }.confidence { margin-top: 24px; }.confidence > div:first-child { display: flex; justify-content: space-between; font-size: 10px; color: #8795a5; }.confidence strong { color: var(--green); }.progress { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 10px; background: #e6edf4; }.progress span { display: block; width: 98.7%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #39c996, #68d7ac); }.verified-time { margin-top: 22px; display: flex; align-items: center; gap: 7px; color: #8996a6; font-size: 9px; }.verified-time strong { color: #5e6f83; font-weight: 600; }.check-ring { display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid #9adfc5; color: var(--green); border-radius: 50%; }.outline-button { width: 100%; margin-top: 20px; padding: 11px; border: 1px solid #d3e3f3; border-radius: 7px; color: var(--blue); background: #fff; font-size: 10px; font-weight: 700; transition: .2s; }.outline-button:hover { border-color: var(--blue); background: #f3f8ff; }.outline-button span { margin-left: 7px; font-size: 14px; }
.lower-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; margin-top: 20px; }.information-card, .contact-card { padding: 25px 29px; }.section-header { display: flex; align-items: flex-start; justify-content: space-between; }.section-kicker { margin: 0 0 8px; font-size: 9px; }.information-card h3, .contact-card h3 { margin: 0; }.lock { color: #8998a9; font-size: 10px; }.lock:first-letter { color: var(--green); }.info-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 21px 35px; margin-top: 25px; }.info-columns span, .info-columns strong { display: block; }.info-columns strong { font-size: 11px; font-weight: 600; }.northstar-logo { border-radius: 50%; width: 35px; height: 35px; }.address { color: #718196; font-size: 11px; line-height: 1.7; margin: 20px 0 22px; }.text-link { color: var(--blue); font-size: 11px; font-weight: 700; text-decoration: none; }.text-link span { margin-left: 7px; font-size: 17px; vertical-align: -1px; }footer { display: flex; justify-content: space-between; gap: 15px; padding: 28px 2px 36px; color: #9ba8b7; font-size: 9px; }footer i { display: inline-block; width: 3px; height: 3px; margin: 0 6px 2px; background: #aab8c8; border-radius: 50%; }.footer-secure { color: #77ad98; }
.toast { position: fixed; left: 50%; bottom: 26px; padding: 11px 17px; color: #fff; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); border-radius: 8px; background: #1c3048; font-size: 11px; transition: .25s; box-shadow: 0 8px 25px #c5ced9; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) { .page-shell { padding: 0 20px; }.topbar { height: 74px; }.secure-label { display: none; }.compact-view { min-height: calc(100vh - 74px); }.identity-card { transform: rotate(0); }.hero { min-height: 405px; align-items: flex-start; }.hero-copy { padding-top: 52px; }.orbit-art { top: 225px; right: -72px; transform: scale(.72); transform-origin: top right; }.content-grid, .lower-grid { grid-template-columns: 1fr; }.profile-card { padding: 24px 20px; }.details-list { gap: 18px 14px; }.detail strong { font-size: 10px; }.verification-card { padding: 24px 20px; }.info-columns { gap: 20px 15px; }.information-card, .contact-card { padding: 24px 20px; }footer { flex-wrap: wrap; line-height: 1.6; }footer span:nth-child(2) { order: 3; flex-basis: 100%; } }
@media (max-width: 430px) { .details-list, .info-columns { grid-template-columns: 1fr; }.profile-heading { gap: 13px; }.profile-title h2 { font-size: 20px; }.profile-card { padding-left: 17px; padding-right: 17px; } }

.landing-body,
.register-body { background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); }
.landing-shell,
.register-shell { max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; }
.landing-topbar { border-bottom: 1px solid #e8eff7; }
.landing-hero,
.register-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; min-height: calc(100vh - 95px); }
.landing-copy,
.register-intro { max-width: 620px; }
.landing-actions,
.register-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.primary-button,
.secondary-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.primary-button { color: #fff; background: var(--blue); box-shadow: 0 12px 26px rgba(46, 125, 246, .22); }
.secondary-button { color: var(--blue); border: 1px solid #d3e5fb; background: #fff; }
.landing-points { display: grid; gap: 12px; padding: 0; margin: 24px 0 0; list-style: none; color: #5f6f85; }
.landing-points li { display: flex; align-items: center; gap: 10px; }
.landing-points span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--green); font-size: 11px; }
.landing-card,
.register-card { padding: 28px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 18px 50px rgba(20, 52, 92, .07); }
.landing-card { position: relative; overflow: hidden; }
.landing-card-badge { position: absolute; top: 20px; right: 20px; padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
.landing-card h2 { margin: 28px 0 8px; font: 800 28px Manrope, sans-serif; letter-spacing: -.8px; }
.landing-card p { color: var(--muted); line-height: 1.6; }
.landing-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.landing-mini-grid div { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f9fbff; }
.landing-mini-grid small { display: block; color: #8a99a9; font-size: 10px; margin-bottom: 4px; }
.landing-mini-grid strong { font-size: 12px; }
.register-card { width: 100%; max-width: 760px; margin-left: auto; }
.registration-form { display: block; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid label { display: grid; gap: 6px; }
.form-grid span { color: #6c7b8d; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.form-grid input { width: 100%; padding: 11px 12px; border: 1px solid #d5e0ec; border-radius: 8px; background: #fff; color: var(--ink); }
.register-message { display: none; margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 12px; }
.register-message.show { display: block; }
.register-message.success { color: #0d6b4c; background: #e8faf2; }
.register-message.error { color: #a63636; background: #fff0f0; }
@media (max-width: 900px) {
  .landing-hero,
  .register-layout { grid-template-columns: 1fr; min-height: auto; padding-top: 28px; }
  .register-card { margin-left: 0; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .landing-card,
  .register-card { padding: 22px; }
}

.profile-actions { margin-top: 18px; }
.small-button { width: auto; padding: 10px 14px; font-size: 10px; }
.edit-panel { margin-top: 18px; padding: 18px; border: 1px solid #d7e5f5; border-radius: 12px; background: #f8fbff; }
.edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.edit-grid label { display: grid; gap: 6px; }
.edit-grid span { color: #718198; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.edit-grid input { width: 100%; padding: 10px 12px; border: 1px solid #ced9e7; border-radius: 8px; background: #fff; }
.edit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 640px) {
  .edit-grid { grid-template-columns: 1fr; }
}

.superuser-auth-panel { margin-top: 16px; padding: 18px; border: 1px solid #d7e5f5; border-radius: 12px; background: #f8fbff; }
.auth-title { margin: 0 0 12px; color: #1b2d45; font-size: 12px; font-weight: 700; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.auth-grid label { display: grid; gap: 6px; }
.auth-grid span { color: #718198; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.auth-grid input { width: 100%; padding: 10px 12px; border: 1px solid #ced9e7; border-radius: 8px; background: #fff; }
@media (max-width: 640px) {
  .auth-grid { grid-template-columns: 1fr; }
}

.verification-card--warning {
  border-color: #f1b4b4;
  background: linear-gradient(145deg, #fff7f7, #fff0f0);
}
.verification-card--warning .status-icon {
  color: #fff;
  background: #d64545;
  box-shadow: 0 7px 17px rgba(214, 69, 69, .28);
}
.verification-card--warning .shield {
  color: #c73d3d;
  background: #ffe9e9;
}
.verification-card--warning .verified-time,
.verification-card--warning .confidence strong,
.verification-card--warning .verification-status--warning {
  color: #b42828;
}
.verification-card--warning .progress span {
  background: linear-gradient(90deg, #ef5a5a, #f58b8b);
}
.verification-card--warning .check-ring {
  color: #b42828;
  border-color: #f0a0a0;
}

.profile-card--warning,
.contact-card--warning,
.org-row--warning {
  border-color: #f1b4b4;
}
.profile-card--warning {
  box-shadow: 0 10px 32px rgba(170, 51, 51, .09);
}
.identity-card--warning {
  background: linear-gradient(125deg, #a83f3f 0%, #ca5b5b 52%, #f0a4a4 100%);
  box-shadow: 0 28px 60px rgba(146, 45, 45, .22);
}
.compact-view--warning .compact-check {
  background: #d64545;
}
.org-row--warning {
  border-top-color: #f0a0a0;
  border-bottom-color: #f0a0a0;
}
.org-status--warning {
  color: #b42828;
  background: #ffe9e9;
}
.contact-card--warning {
  background: linear-gradient(145deg, #fff7f7, #fff0f0);
}
.profile-card--warning .verified-badge,
.profile-card--warning .verified-label span,
.profile-card--warning .verified-label,
.identity-card--warning .compact-check,
.identity-card--warning .compact-details h1,
.identity-card--warning .card-brand,
.identity-card--warning .compact-organisation span,
.identity-card--warning .compact-details p,
.identity-card--warning .identity-card-footer {
  color: #fff;
}