.portal-page { min-height: 100vh; background: #0c1218; color: #e6eef7; }
.portal-header { position: sticky; top: 0; padding: 14px 0; background: rgba(12,18,24,.82); border-bottom: 1px solid #2b3f54; backdrop-filter: blur(18px); }
.portal-nav { display: flex; align-items: center; gap: 18px; }
.portal-nav > a, .portal-link-button { color: #9ab0c5; background: none; border: 0; text-decoration: none; font-size: 12px; font-weight: 700; cursor: pointer; }
.portal-nav > a:hover, .portal-link-button:hover { color: #52ccff; }
.portal-main, .profile-main, .editor-main, .admin-main { padding-block: 64px 100px; }
.profile-loading { display: grid; min-height: 55vh; place-items: center; }
.profile-sheet { overflow: hidden; background: linear-gradient(180deg,#16202c,#111a24); border: 1px solid #2b3f54; border-radius: 25px; box-shadow: 0 30px 80px rgba(0,0,0,.38); }
.profile-banner { position: relative; height: clamp(220px,32vw,390px); overflow: hidden; background: radial-gradient(circle at 25% 25%,rgba(39,179,255,.35),transparent 40%),radial-gradient(circle at 75% 70%,rgba(0,255,136,.2),transparent 42%),#101a24; }
.profile-banner img { width: 100%; height: 100%; object-fit: cover; }
.profile-banner-grid { position: absolute; inset: 0; background: linear-gradient(transparent 60%,#16202c),linear-gradient(rgba(39,179,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(39,179,255,.045) 1px,transparent 1px); background-size: auto,42px 42px,42px 42px; }
.profile-overview { position: relative; display: flex; align-items: flex-end; gap: 22px; padding: 0 34px 25px; margin-top: -62px; }
.profile-avatar-frame { position: relative; z-index: 2; flex: 0 0 124px; width: 124px; height: 124px; padding: 4px; background: linear-gradient(135deg,#27b3ff,#50ffc2); border-radius: 50%; box-shadow: 0 15px 35px rgba(0,0,0,.42); }
.profile-avatar-frame img { width: 100%; height: 100%; object-fit: cover; background: #16202c; border: 5px solid #111a24; border-radius: 50%; }
.profile-avatar-frame.small { width: 96px; height: 96px; flex-basis: 96px; margin-inline: auto; }
.profile-heading { min-width: 0; flex: 1; padding-bottom: 5px; }
.profile-heading h1 { margin: 3px 0; color: #fff; font-size: clamp(29px,4vw,48px); line-height: 1.1; }
.profile-heading > bdi { color: #9ab0c5; font: 600 13px/1.4 "Inter Local",sans-serif; }
.profile-heading p { margin: 7px 0 0; color: #c8d8e7; font-size: 13px; }
.profile-rank { display: inline-flex; padding: 5px 9px; color: #07131a; background: linear-gradient(135deg,#27b3ff,#50ffc2); border-radius: 7px; font-size: 9px; font-weight: 800; }
.portal-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 16px; color: #07131a; background: linear-gradient(135deg,#27b3ff,#50ffc2); border: 1px solid transparent; border-radius: 11px; box-shadow: 0 7px 20px rgba(39,179,255,.18); text-decoration: none; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .2s ease,box-shadow .2s ease; }
.portal-button:hover { transform: translateY(-2px); box-shadow: 0 11px 28px rgba(39,179,255,.28); }
.portal-button.secondary { color: #c8d8e7; background: #16202c; border-color: #2b3f54; box-shadow: none; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 34px 26px; }
.profile-badge { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 8px; color: #e6eef7; background: #111a24; border: 1px solid #2b3f54; border-radius: 11px; text-decoration: none; font-size: 10px; font-weight: 750; cursor: pointer; transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.profile-badge img { width: 29px; height: 29px; }
.profile-badge:hover { z-index: 5; transform: translateY(-3px); }
.profile-badge::after { content: attr(data-description); position: absolute; z-index: 20; inset: auto 0 calc(100% + 10px); width: min(260px,70vw); padding: 11px 13px; color: #dfeaf4; background: #071018; border: 1px solid #2b3f54; border-radius: 10px; box-shadow: 0 16px 35px rgba(0,0,0,.45); font-size: 10px; font-weight: 500; line-height: 1.7; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .18s ease,transform .18s ease; }
.profile-badge:hover::after,.profile-badge:focus::after { opacity: 1; transform: translateY(0); }
.badge-genesis { border-color: rgba(255,190,11,.6); box-shadow: 0 0 22px rgba(255,190,11,.2),inset 0 0 18px rgba(255,190,11,.04); animation: genesis-glow 2.8s ease-in-out infinite; }
.badge-royal { border-color: rgba(255,190,11,.4); }
.badge-monthly { border-color: rgba(80,180,255,.45); }
.badge-manager { border-color: rgba(39,179,255,.42); }
.badge-senior { border-color: rgba(184,79,255,.42); }
.badge-builder { border-color: rgba(245,158,11,.42); }
.badge-staff { border-color: rgba(0,255,136,.38); }
.profile-content-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.65fr); gap: 16px; padding: 0 34px 34px; }
.portal-card { position: relative; background: linear-gradient(180deg,#16202c,#111a24); border: 1px solid #2b3f54; border-radius: 17px; box-shadow: 0 14px 35px rgba(0,0,0,.2); }
.about-card,.profile-content-grid aside { padding: 24px; }
.portal-kicker { color: #52ccff; font: 800 10px/1.2 "Inter Local",sans-serif; letter-spacing: .13em; }
.about-card > p { margin: 14px 0 0; color: #c8d8e7; line-height: 2; white-space: pre-wrap; }
.empty-copy { margin-top: 14px; color: #71879b; font-size: 12px; }
.social-links { display: grid; gap: 9px; margin-top: 14px; }
.social-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; color: #dce8f2; background: rgba(12,18,24,.55); border: 1px solid #2b3f54; border-radius: 10px; text-decoration: none; font-size: 11px; transition: border-color .2s ease,transform .2s ease; }
.social-link:hover { border-color: #27b3ff; transform: translateX(-2px); }
.social-link bdi { color: #8299ae; font: 500 9px/1.2 "Inter Local",sans-serif; }
.portal-error { max-width: 620px; margin: 80px auto; padding: 40px; text-align: center; }
.portal-error h1 { margin: 14px 0; }
.portal-error p { color: #9ab0c5; }
.portal-error .portal-button { margin: 9px 4px 0; }
.auth-error-main { display: grid; min-height: 100vh; place-items: center; }

.editor-heading { max-width: 760px; margin-bottom: 27px; }
.editor-heading h1 { margin: 9px 0; color: #fff; font-size: clamp(34px,5vw,58px); line-height: 1.08; }
.editor-heading p { color: #9ab0c5; }
.editor-heading.compact h2 { margin: 8px 0; font-size: 30px; }
.editor-grid { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 20px; align-items: start; }
.profile-form { padding: 27px; }
.profile-form section + section { margin-top: 32px; padding-top: 25px; border-top: 1px solid #2b3f54; }
.profile-form h2,.admin-profile-editor h2 { margin: 0 0 16px; font-size: 18px; }
.profile-form label,.admin-profile-editor label,.badge-editor label { display: grid; gap: 7px; margin-top: 13px; color: #9ab0c5; font-size: 11px; }
.profile-form label > span { justify-self: end; color: #60778c; }
.profile-form textarea,.profile-form input,.admin-main input,.admin-main select,.badge-editor textarea { width: 100%; color: #e6eef7; background: #0c1218; border: 1px solid #2b3f54; border-radius: 10px; outline: 0; padding: 11px 12px; resize: vertical; }
.profile-form textarea:focus,.profile-form input:focus,.admin-main input:focus,.admin-main select:focus,.badge-editor textarea:focus { border-color: #27b3ff; box-shadow: 0 0 0 3px rgba(39,179,255,.1); }
.form-hint { color: #71879b; font-size: 10px; }
.prefixed-input { display: flex; align-items: center; margin-top: 10px; overflow: hidden; background: #0c1218; border: 1px solid #2b3f54; border-radius: 10px; direction: ltr; }
.prefixed-input span { flex: 0 0 auto; padding-inline-start: 12px; color: #71879b; font: 600 10px/1 "Inter Local",sans-serif; }
.prefixed-input input { border: 0; box-shadow: none!important; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.form-message { min-height: 20px; color: #50ffc2; font-size: 11px; }
.form-message.error { color: #ff8d82; }
.account-summary { position: sticky; top: 100px; padding: 27px; text-align: center; }
.account-summary h2 { margin: 15px 0 2px; }
.account-summary > bdi { color: #9ab0c5; }
.account-summary > span { display: block; margin-top: 9px; color: #52ccff; font-size: 11px; }
.mini-badges { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.mini-badges img { width: 35px; height: 35px; }

.admin-profile-editor { padding: 27px; }
.atlas-identity-status { margin: 16px 0 4px; padding: 11px 13px; color: #9ab0c5; background: rgba(12,18,24,.62); border: 1px solid #2b3f54; border-radius: 10px; direction: ltr; font: 650 10px/1.5 "Inter Local",sans-serif; text-align: left; }
.atlas-identity-status.linked { color: #82f4c8; border-color: rgba(80,255,194,.3); background: rgba(80,255,194,.055); }
.profile-cache-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0 2px; padding: 16px; background: rgba(12,18,24,.62); border: 1px solid #2b3f54; border-radius: 12px; }
.profile-cache-controls h2 { margin: 0 0 5px; }
.profile-cache-controls p { margin: 0; color: #8299ae; font-size: 10px; line-height: 1.6; }
.profile-cache-controls .portal-button { flex: 0 0 auto; }
.portal-button:disabled { cursor: wait; opacity: .58; transform: none; }
.manual-media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 16px 0 28px; }
.manual-media-card { overflow: hidden; background: rgba(12,18,24,.62); border: 1px solid #2b3f54; border-radius: 14px; transition: border-color .2s ease,box-shadow .2s ease; }
.manual-media-card.override-active { border-color: rgba(80,255,194,.42); box-shadow: 0 0 24px rgba(80,255,194,.07); }
.manual-media-preview { overflow: hidden; background: #091019; }
.manual-media-preview.avatar { display: grid; height: 150px; place-items: center; }
.manual-media-preview.avatar img { width: 108px; height: 108px; object-fit: cover; border: 4px solid #25394b; border-radius: 50%; }
.manual-media-preview.banner { height: 150px; }
.manual-media-preview.banner img { width: 100%; height: 100%; object-fit: cover; }
.manual-media-copy { padding: 17px; }
.manual-media-copy h3 { margin: 0 0 5px; color: #fff; }
.manual-media-copy > p { min-height: 32px; margin: 0 0 12px; color: #8299ae; font-size: 10px; line-height: 1.6; }
.manual-media-copy input[type="file"] { width: 100%; padding: 9px; color: #9ab0c5; background: #0c1218; border: 1px dashed #36506a; border-radius: 9px; font-size: 10px; }
.manual-media-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.upload-track { overflow: hidden; height: 6px; margin-top: 13px; background: #071018; border-radius: 999px; }
.upload-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#27b3ff,#50ffc2); border-radius: inherit; transition: width .18s ease; }
.manual-media-copy > small { display: block; min-height: 15px; margin-top: 5px; color: #8299ae; direction: ltr; text-align: right; }
.admin-select-row { display: flex; align-items: end; gap: 12px; }
.admin-select-row label { flex: 1; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 16px 0 28px; }
.admin-badge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.badge-check { position: relative; display: flex!important; align-items: center; grid-template-columns: none!important; gap: 10px!important; margin: 0!important; padding: 11px; color: #c8d8e7!important; background: #0c1218; border: 1px solid #2b3f54; border-radius: 11px; cursor: pointer; }
.badge-check:has(input:checked) { border-color: #27b3ff; background: rgba(39,179,255,.08); }
.badge-check input { position: absolute; opacity: 0; }
.badge-check img { width: 36px; height: 36px; }
.badge-catalog-section { margin-top: 60px; }
.badge-editor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.badge-editor { padding: 20px; }
.badge-editor-head { display: flex; align-items: center; gap: 11px; }
.badge-editor-head img { width: 45px; height: 45px; }
.badge-editor-head h3 { margin: 0; }

.badge-directory-main,.badge-detail-main { padding-block: 68px 110px; }
.badge-hero { max-width: 760px; margin-bottom: 36px; }
.badge-hero h1 { margin: 10px 0 14px; color: #fff; font-size: clamp(38px,6vw,72px); line-height: 1.05; letter-spacing: -.04em; }
.badge-hero p { max-width: 650px; margin: 0; color: #9ab0c5; font-size: 14px; line-height: 2; }
.badge-directory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.badge-directory-card { position: relative; overflow: hidden; background: linear-gradient(145deg,rgba(22,32,44,.98),rgba(12,18,24,.98)); border: 1px solid #2b3f54; border-radius: 20px; box-shadow: 0 18px 45px rgba(0,0,0,.24); transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.badge-directory-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 0%,rgba(39,179,255,.12),transparent 44%); opacity: .8; }
.badge-directory-card:hover { transform: translateY(-4px); border-color: rgba(82,204,255,.55); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.badge-directory-card.badge-genesis::before { background: radial-gradient(circle at 8% 0%,rgba(255,190,11,.2),transparent 48%); }
.badge-directory-card.badge-royal::before,.badge-directory-card.badge-builder::before { background: radial-gradient(circle at 8% 0%,rgba(245,158,11,.15),transparent 48%); }
.badge-directory-card.badge-senior::before { background: radial-gradient(circle at 8% 0%,rgba(184,79,255,.15),transparent 48%); }
.badge-directory-copy { position: relative; display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 17px; min-height: 198px; padding: 24px; color: inherit; text-decoration: none; }
.badge-directory-copy > img { width: 76px; height: 76px; filter: drop-shadow(0 10px 17px rgba(0,0,0,.35)); transition: transform .3s ease; }
.badge-directory-card:hover .badge-directory-copy > img { transform: translateY(-3px) rotate(-2deg) scale(1.04); }
[dir="rtl"] .badge-directory-card:hover .badge-directory-copy > img { transform: translateY(-3px) rotate(2deg) scale(1.04); }
.badge-importance { display: block; margin-bottom: 8px; color: #52ccff; font: 800 9px/1.2 "Inter Local",sans-serif; letter-spacing: .12em; }
.badge-directory-copy h2 { margin: 0 0 9px; color: #fff; font-size: 20px; }
.badge-directory-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: #9ab0c5; font-size: 11px; line-height: 1.85; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.badge-recipients { position: relative; display: flex; align-items: center; min-height: 65px; padding: 13px 24px; color: #c8d8e7; background: rgba(7,16,24,.62); border-top: 1px solid rgba(43,63,84,.8); text-decoration: none; }
.badge-recipients.empty { color: #71879b; font-size: 10px; }
.badge-recipients small { margin-inline-start: auto; color: #8299ae; font-size: 9px; }
.badge-recipient { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 11px; font-weight: 750; }
.badge-recipient img { width: 37px; height: 37px; object-fit: cover; background: #16202c; border: 2px solid #25394b; border-radius: 50%; }
.badge-recipients.multiple .badge-recipient + .badge-recipient { margin-inline-start: -10px; }
.badge-recipients.multiple .badge-recipient img { box-shadow: 0 0 0 3px #0c141d; }

.badge-detail-hero { position: relative; display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 35px; overflow: hidden; margin-bottom: 58px; padding: 42px; background: radial-gradient(circle at 8% 8%,rgba(39,179,255,.18),transparent 38%),linear-gradient(145deg,#16202c,#0c1218); border: 1px solid #2b3f54; border-radius: 26px; box-shadow: 0 28px 70px rgba(0,0,0,.32); }
.badge-detail-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(82,204,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(82,204,255,.035) 1px,transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg,#000,transparent 78%); }
.badge-detail-icon { position: relative; z-index: 1; display: grid; width: 150px; height: 150px; place-items: center; background: rgba(7,16,24,.66); border: 1px solid #2b3f54; border-radius: 26px; box-shadow: inset 0 0 25px rgba(82,204,255,.06),0 18px 38px rgba(0,0,0,.3); }
.badge-detail-icon img { width: 108px; height: 108px; filter: drop-shadow(0 13px 20px rgba(0,0,0,.4)); }
.badge-detail-hero > div:last-child { position: relative; z-index: 1; }
.badge-detail-hero h1 { margin: 8px 0 11px; color: #fff; font-size: clamp(34px,5vw,62px); line-height: 1.05; letter-spacing: -.035em; }
.badge-detail-hero p { max-width: 700px; margin: 0; color: #abc0d2; font-size: 13px; line-height: 1.95; }
.badge-award-count { display: inline-flex; margin-top: 18px; padding: 7px 10px; color: #52ccff; background: rgba(39,179,255,.08); border: 1px solid rgba(39,179,255,.28); border-radius: 8px; font-size: 10px; font-weight: 750; }
.badge-staff-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.badge-staff-card { position: relative; overflow: hidden; min-width: 0; color: inherit; background: linear-gradient(180deg,#16202c,#111a24); border: 1px solid #2b3f54; border-radius: 18px; box-shadow: 0 15px 38px rgba(0,0,0,.22); text-decoration: none; transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.badge-staff-card:hover { transform: translateY(-5px); border-color: #27b3ff; box-shadow: 0 23px 50px rgba(0,0,0,.34); }
.badge-staff-banner { height: 112px; background: radial-gradient(circle at 20% 10%,rgba(39,179,255,.35),transparent 45%),radial-gradient(circle at 80% 80%,rgba(80,255,194,.18),transparent 44%),#101a24; }
.badge-staff-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.badge-staff-card:hover .badge-staff-banner img { transform: scale(1.035); }
.badge-staff-avatar { position: absolute; top: 76px; inset-inline-start: 19px; width: 72px; height: 72px; object-fit: cover; background: #16202c; border: 4px solid #111a24; border-radius: 50%; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.badge-staff-body { min-height: 116px; padding: 45px 20px 20px; }
.badge-staff-body h3 { overflow: hidden; margin: 0 0 3px; color: #fff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.badge-staff-body bdi { display: block; overflow: hidden; color: #8198ac; font: 600 10px/1.5 "Inter Local",sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.badge-staff-body span { display: inline-flex; margin-top: 10px; padding: 5px 8px; color: #08141b; background: linear-gradient(135deg,#27b3ff,#50ffc2); border-radius: 6px; font-size: 8px; font-weight: 850; }
.empty-awards { padding: 30px; color: #8198ac; text-align: center; }

@keyframes genesis-glow { 50% { box-shadow: 0 0 34px rgba(255,190,11,.34),inset 0 0 20px rgba(255,190,11,.08); transform: translateY(-1px); } }

@media (max-width:800px) {
  .profile-main,.editor-main,.admin-main { padding-block: 35px 70px; }
  .profile-banner { height: 220px; }
  .profile-overview { align-items: flex-start; flex-wrap: wrap; padding-inline: 18px; }
  .profile-avatar-frame { width: 100px; height: 100px; flex-basis: 100px; }
  .profile-heading { padding-top: 55px; }
  .profile-overview > .portal-button { margin-inline-start: 122px; }
  .profile-badges,.profile-content-grid { padding-inline: 18px; }
  .profile-content-grid,.editor-grid { grid-template-columns: 1fr; }
  .account-summary { position: static; order: -1; }
  .admin-badge-grid,.badge-editor-grid { grid-template-columns: 1fr; }
  .badge-directory-main,.badge-detail-main { padding-block: 40px 75px; }
  .badge-directory-grid { grid-template-columns: 1fr; }
  .badge-detail-hero { grid-template-columns: 105px minmax(0,1fr); gap: 24px; padding: 30px; }
  .badge-detail-icon { width: 105px; height: 105px; border-radius: 20px; }
  .badge-detail-icon img { width: 78px; height: 78px; }
  .badge-staff-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .portal-nav > a:first-child { display: none; }
  .profile-banner { height: 175px; }
  .profile-overview { margin-top: -48px; gap: 13px; }
  .profile-avatar-frame { width: 82px; height: 82px; flex-basis: 82px; }
  .profile-heading { padding-top: 48px; }
  .profile-heading h1 { font-size: 25px; }
  .profile-overview > .portal-button { width: 100%; margin-inline-start: 0; }
  .two-fields { grid-template-columns: 1fr; }
  .admin-select-row { align-items: stretch; flex-direction: column; }
  .profile-cache-controls { align-items: stretch; flex-direction: column; }
  .manual-media-grid { grid-template-columns: 1fr; }
  .badge-hero { margin-bottom: 25px; }
  .badge-directory-copy { grid-template-columns: 57px minmax(0,1fr); min-height: 0; padding: 19px; }
  .badge-directory-copy > img { width: 57px; height: 57px; }
  .badge-recipients { padding-inline: 19px; }
  .badge-detail-hero { grid-template-columns: 1fr; padding: 24px; }
  .badge-detail-icon { width: 92px; height: 92px; }
  .badge-detail-icon img { width: 69px; height: 69px; }
  .badge-staff-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion:reduce) { .badge-genesis { animation: none; } }