/*========================================================
  Evaluator Access Experience — Super-Geometric UI Layer
  Isolated from the committee-approved official masthead.
========================================================*/
.evaluator-login-page {
  min-height: 100vh;
  margin: 0;
  background: #071a2e;
}

.evaluator-access-stage {
  --pointer-x: 0;
  --pointer-y: 0;
  position: relative;
  min-height: calc(100svh - 258px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(42px, 6vw, 88px) 24px;
  isolation: isolate;
  color: #f7f4ec;
  background:
    radial-gradient(circle at 82% 18%, rgba(190, 151, 79, .16), transparent 31%),
    radial-gradient(circle at 17% 78%, rgba(39, 110, 125, .18), transparent 34%),
    linear-gradient(135deg, #061524 0%, #091f38 48%, #061a2d 100%);
}

.evaluator-access-stage::before,
.evaluator-access-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.evaluator-access-stage::before {
  inset: 20px;
  border: 1px solid rgba(190, 151, 79, .22);
  clip-path: polygon(0 22px, 22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px));
}

.evaluator-access-stage::after {
  inset: 33px;
  border: 1px solid rgba(255, 255, 255, .045);
  clip-path: polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
}

.evaluator-parallax,
.parallax-layer,
.parallax-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.evaluator-parallax {
  z-index: -2;
  overflow: hidden;
}

.parallax-layer {
  will-change: transform;
  transition: transform 180ms ease-out;
}

.parallax-layer-grid {
  opacity: .46;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 82%);
  transform: translate3d(calc(var(--pointer-x) * -7px), calc(var(--pointer-y) * -7px), 0) scale(1.04);
}

.parallax-layer-orbits {
  inset: -16%;
  opacity: .58;
  background:
    repeating-radial-gradient(circle at 76% 24%, transparent 0 72px, rgba(190,151,79,.07) 73px 74px, transparent 75px 112px),
    repeating-radial-gradient(circle at 17% 76%, transparent 0 58px, rgba(93,174,185,.045) 59px 60px, transparent 61px 96px);
  transform: translate3d(calc(var(--pointer-x) * 13px), calc(var(--pointer-y) * 13px), 0) rotate(-7deg);
}

.parallax-layer-diamonds {
  inset: -10%;
  opacity: .34;
  background:
    linear-gradient(45deg, transparent 47%, rgba(190,151,79,.12) 48% 49%, transparent 50%) 0 0 / 118px 118px,
    linear-gradient(-45deg, transparent 47%, rgba(255,255,255,.045) 48% 49%, transparent 50%) 0 0 / 118px 118px;
  transform: translate3d(calc(var(--pointer-x) * -18px), calc(var(--pointer-y) * 18px), 0) scale(1.08);
}

.parallax-glow {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .23;
  will-change: transform;
}

.parallax-glow-one {
  inset: 10% auto auto 9%;
  background: #8b6a2b;
  transform: translate3d(calc(var(--pointer-x) * 24px), calc(var(--pointer-y) * 18px), 0);
}

.parallax-glow-two {
  inset: auto 8% 3% auto;
  background: #0f7180;
  transform: translate3d(calc(var(--pointer-x) * -21px), calc(var(--pointer-y) * -15px), 0);
}

.islamic-accent {
  position: absolute;
  z-index: -1;
  width: clamp(160px, 16vw, 260px);
  color: rgba(190, 151, 79, .2);
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(190,151,79,.06));
}

.islamic-accent-top {
  top: 28px;
  left: 22px;
  transform: translate3d(calc(var(--pointer-x) * -16px), calc(var(--pointer-y) * -10px), 0) rotate(11deg);
}

.islamic-accent-bottom {
  right: 28px;
  bottom: 18px;
  transform: translate3d(calc(var(--pointer-x) * 15px), calc(var(--pointer-y) * 12px), 0) rotate(34deg);
}

.evaluator-access-shell {
  position: relative;
  z-index: 2;
  width: min(1240px, 100%);
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .82fr);
  overflow: visible;
  border: 1px solid rgba(190, 151, 79, .32);
  border-radius: 32px;
  background: rgba(4, 18, 32, .58);
  box-shadow:
    0 42px 100px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255,255,255,.025) inset;
  backdrop-filter: blur(14px);
}

.evaluator-access-shell::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 23px;
  pointer-events: none;
}

.evaluator-access-story {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 84px);
  overflow: hidden;
  border-radius: 31px 0 0 31px;
  background:
    linear-gradient(150deg, rgba(7,26,46,.88), rgba(7,41,60,.72)),
    radial-gradient(circle at 80% 20%, rgba(190,151,79,.15), transparent 38%);
}

.evaluator-access-story::before,
.evaluator-access-story::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.evaluator-access-story::before {
  width: 460px;
  height: 460px;
  left: -230px;
  bottom: -230px;
  border: 1px solid rgba(190,151,79,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(190,151,79,.025), 0 0 0 84px rgba(190,151,79,.018);
}

.evaluator-access-story::after {
  inset: 28px;
  border-inline-start: 1px solid rgba(190,151,79,.28);
  border-block-start: 1px solid rgba(190,151,79,.16);
  clip-path: polygon(0 0, 42% 0, 42% 1px, 1px 1px, 1px 72%, 0 72%);
}

.story-topline {
  position: absolute;
  top: 32px;
  right: 36px;
  display: flex;
  gap: 7px;
}

.story-topline span {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(190,151,79,.58);
  transform: rotate(45deg);
}

.story-copy,
.story-principles,
.story-seal {
  position: relative;
  z-index: 2;
  transform: translateZ(var(--depth, 0));
}

.story-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid rgba(190,151,79,.52);
  border-radius: 999px;
  color: #e4c77f;
  background: rgba(190,151,79,.08);
  font-weight: 800;
  box-shadow: 0 0 24px rgba(190,151,79,.07);
}

.story-copy h1 {
  max-width: 710px;
  margin: 22px 0 20px;
  color: #fffdf7;
  font-size: clamp(38px, 4vw, 63px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.7px;
  text-wrap: balance;
}

.story-copy p {
  max-width: 720px;
  margin: 0;
  color: rgba(247,244,236,.76);
  font-size: 18px;
  line-height: 2;
}

.story-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
}

.story-principle {
  min-height: 92px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.story-principle:hover {
  transform: translateY(-4px);
  border-color: rgba(190,151,79,.36);
  background: rgba(190,151,79,.07);
}

.story-principle strong,
.story-principle span {
  display: block;
}

.story-principle strong {
  margin-bottom: 6px;
  color: #e2c276;
  font-size: 17px;
}

.story-principle span {
  color: rgba(255,255,255,.64);
  font-size: 14px;
  line-height: 1.55;
}

.story-seal {
  position: absolute;
  left: 58px;
  bottom: 54px;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  color: #dcbf73;
  opacity: .75;
}

.seal-ring,
.seal-star {
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
}

.seal-ring {
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(220,191,115,.04), 0 0 0 14px rgba(220,191,115,.025);
}

.seal-star {
  inset: 15px;
  transform: rotate(45deg);
}

.story-seal b {
  position: relative;
  z-index: 2;
  font-size: 15px;
  letter-spacing: 1.2px;
}

.evaluator-login-card-wrap {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: clamp(30px, 4.2vw, 58px);
  perspective: 1400px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.08), transparent 38%),
    linear-gradient(155deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

.evaluator-login-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  position: relative;
  width: min(470px, 100%);
  min-height: 560px;
  padding: clamp(32px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(190,151,79,.62);
  border-radius: 26px;
  color: #15273a;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,241,231,.96)),
    #f8f5ed;
  box-shadow:
    0 34px 70px rgba(0,0,0,.34),
    0 9px 22px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.75) inset;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition: transform 180ms ease-out, box-shadow 220ms ease, border-color 220ms ease;
  will-change: transform;
}

.evaluator-login-card.is-hovered,
.evaluator-login-card:focus-within {
  --lift: -6px;
  border-color: rgba(215,181,104,.88);
  box-shadow:
    0 46px 90px rgba(0,0,0,.42),
    0 10px 28px rgba(0,0,0,.2),
    0 0 42px rgba(190,151,79,.11);
}

.evaluator-login-card::before,
.evaluator-login-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.evaluator-login-card::before {
  width: 230px;
  height: 230px;
  top: -145px;
  left: -125px;
  border: 1px solid rgba(169,128,55,.17);
  transform: rotate(45deg);
  box-shadow: 0 0 0 20px rgba(169,128,55,.025), 0 0 0 42px rgba(169,128,55,.018);
}

.evaluator-login-card::after {
  inset: auto 28px 26px auto;
  width: 54px;
  height: 54px;
  opacity: .18;
  border: 1px solid #8d6d30;
  transform: rotate(45deg);
}

.card-gold-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(153,115,50,.22);
  border-radius: 18px;
  clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
  pointer-events: none;
}

.card-header,
.evaluator-login-form,
.evaluator-security-note,
.evaluator-login-footer {
  position: relative;
  z-index: 2;
  transform: translateZ(28px);
}

.evaluator-access-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 13px;
  border: 1px solid rgba(126,92,37,.32);
  border-radius: 999px;
  color: #6d4f1d;
  background: rgba(190,151,79,.11);
  font-size: 14px;
  font-weight: 900;
}

.card-header h2 {
  margin: 15px 0 9px;
  color: #0b2136;
  font-size: 39px;
  line-height: 1.1;
  font-weight: 700;
}

.card-header p {
  margin: 0;
  color: #64707a;
  line-height: 1.8;
}

.evaluator-login-form {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.evaluator-field {
  display: grid;
  gap: 8px;
}

.evaluator-field label {
  color: #1e3345;
  font-size: 15px;
  font-weight: 800;
}

.evaluator-input-shell {
  position: relative;
  min-height: 54px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d5cdbb;
  border-radius: 13px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 2px 0 rgba(255,255,255,.8) inset;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.evaluator-field:focus-within .evaluator-input-shell {
  border-color: #ae8740;
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(174,135,64,.1),
    0 8px 22px rgba(31,50,65,.08);
  transform: translateY(-2px);
}

.evaluator-input-shell input {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 52px;
  padding: 11px 47px 11px 15px;
  border: 0;
  outline: 0;
  color: #0b2136;
  background: transparent;
  font: inherit;
  font-size: 17px;
}

.evaluator-input-shell input::selection {
  color: #fff;
  background: #7e612d;
}

.input-geometry {
  position: absolute;
  z-index: 1;
  right: 17px;
  width: 15px;
  height: 15px;
  border: 1px solid #a57e38;
  transform: rotate(45deg);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.evaluator-field:focus-within .input-geometry {
  background: rgba(190,151,79,.12);
  box-shadow: 0 0 14px rgba(174,135,64,.38);
  transform: rotate(90deg) scale(.9);
}

.password-visibility {
  position: absolute;
  z-index: 4;
  left: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #4f6170;
  background: transparent;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.password-visibility:hover,
.password-visibility:focus-visible {
  color: #745820;
  background: rgba(190,151,79,.12);
  transform: scale(1.06);
}

.password-visibility span {
  width: 17px;
  height: 11px;
  border: 1.7px solid currentColor;
  border-radius: 50% / 60%;
}

.password-visibility span::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.password-visibility[aria-pressed='true'] span::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-42deg);
}

.evaluator-form-message {
  min-height: 24px;
  padding: 0 2px;
  color: #8a2f2f;
  font-weight: 800;
  line-height: 1.6;
}

.evaluator-form-message.is-success { color: #236345; }
.evaluator-form-message.is-error { color: #962f35; }

.evaluator-login-submit {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid #9f7b37;
  border-radius: 13px;
  color: #fffdf7;
  background: linear-gradient(135deg, #0a243b, #0d344f 62%, #10293e);
  box-shadow: 0 12px 26px rgba(7,26,46,.2), 0 0 0 1px rgba(255,255,255,.06) inset;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.evaluator-login-submit::before,
.evaluator-login-submit::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.evaluator-login-submit::before {
  inset: -2px auto -2px -38%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.19), transparent);
  transform: skewX(-18deg);
  transition: left 480ms ease;
}

.evaluator-login-submit::after {
  inset: 7px;
  border: 1px solid rgba(224,195,124,.16);
  border-radius: 8px;
}

.evaluator-login-submit:hover,
.evaluator-login-submit:focus-visible {
  border-color: #d5b566;
  box-shadow: 0 17px 34px rgba(7,26,46,.27), 0 0 24px rgba(190,151,79,.17);
  transform: translateY(-3px);
}

.evaluator-login-submit:hover::before,
.evaluator-login-submit:focus-visible::before { left: 112%; }
.evaluator-login-submit:active { transform: translateY(0) scale(.992); }
.evaluator-login-submit:disabled { opacity: .62; cursor: wait; transform: none; }

.button-label,
.button-arrow { position: relative; z-index: 2; }
.button-arrow { color: #e6ca84; font-size: 22px; transition: transform 180ms ease; }
.evaluator-login-submit:hover .button-arrow { transform: translateX(-5px); }

.evaluator-security-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 24px;
  padding: 14px 15px;
  border: 1px solid rgba(117,92,48,.19);
  border-radius: 12px;
  background: rgba(234,226,206,.46);
}

.evaluator-security-note p {
  margin: 0;
  color: #596875;
  font-size: 13px;
  line-height: 1.75;
}

.security-mark {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid #9b7632;
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(155,118,50,.06);
}

.evaluator-login-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid rgba(118,103,76,.16);
  color: #66737d;
  font-size: 13px;
}

.evaluator-login-footer > span {
  width: 5px;
  height: 5px;
  border: 1px solid #aa813a;
  transform: rotate(45deg);
}

.evaluator-login-footer a {
  color: #18384f;
  font-weight: 800;
}

.evaluator-login-footer a:hover { color: #805f27; }
.evaluator-test-account summary { cursor: pointer; font-weight: 800; }
.evaluator-test-account code { display: block; margin-top: 8px; direction: ltr; color: #253b4b; font-size: 12px; }

@media (max-width: 1100px) {
  .evaluator-access-shell { grid-template-columns: 1fr; }
  .evaluator-access-story { min-height: 470px; border-radius: 31px 31px 0 0; }
  .story-seal { left: 58px; bottom: 44px; }
  .evaluator-login-card-wrap { padding-block: 48px; }
}

@media (max-width: 720px) {
  .evaluator-access-stage { min-height: auto; padding: 28px 12px 40px; }
  .evaluator-access-stage::before { inset: 8px; }
  .evaluator-access-stage::after { display: none; }
  .evaluator-access-shell { border-radius: 22px; }
  .evaluator-access-story { min-height: 430px; padding: 40px 26px 120px; border-radius: 21px 21px 0 0; }
  .story-copy h1 { font-size: 36px; }
  .story-copy p { font-size: 16px; }
  .story-principles { grid-template-columns: 1fr; margin-top: 30px; }
  .story-principle { min-height: 74px; }
  .story-seal { width: 72px; height: 72px; left: 34px; bottom: 30px; }
  .evaluator-login-card-wrap { padding: 24px 14px 34px; }
  .evaluator-login-card { min-height: auto; padding: 34px 24px; border-radius: 20px; transform: none !important; }
  .card-header h2 { font-size: 34px; }
  .evaluator-login-footer { align-items: flex-start; flex-direction: column; }
  .evaluator-login-footer > span { display: none; }
  .islamic-accent { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-layer,
  .parallax-glow,
  .islamic-accent,
  .evaluator-login-card,
  .story-principle,
  .evaluator-input-shell,
  .evaluator-login-submit,
  .button-arrow { transition: none !important; transform: none !important; }
  .evaluator-login-submit::before { display: none; }
}

/* Dual-path evaluator access: barcode card + existing username/password. */
.evaluator-card-access {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  margin: 22px 0 18px;
  padding: 17px 18px;
  border: 1px solid rgba(194, 154, 73, .42);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(12, 43, 72, .92), rgba(18, 57, 91, .78));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 30px rgba(1, 16, 30, .22);
  overflow: hidden;
}
.evaluator-card-access::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 14% 50%, rgba(207, 171, 95, .16), transparent 36%);
}
.evaluator-card-access-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f0dba7;
  font-size: 30px;
  border: 1px solid rgba(223, 190, 116, .55);
  background: rgba(2, 20, 38, .36);
  box-shadow: 0 0 22px rgba(207, 171, 95, .12);
}
.evaluator-card-access-copy { position: relative; z-index: 1; min-width: 0; }
.evaluator-card-access-copy h3 { margin: 0 0 4px; color: #fff; font-size: 17px; }
.evaluator-card-access-copy p { margin: 0; color: rgba(236, 242, 247, .78); font-size: 13px; line-height: 1.7; }
.evaluator-card-status {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 999px;
  color: #f1d99d;
  border: 1px solid rgba(223, 190, 116, .42);
  background: rgba(201, 159, 72, .08);
  font-size: 12px;
}
.evaluator-card-status.is-loading { color: #fff3ca; }
.evaluator-card-status.is-success { color: #d9ffeb; border-color: rgba(104, 209, 151, .58); background: rgba(40, 133, 85, .24); }
.evaluator-card-status.is-error { color: #ffe5e5; border-color: rgba(239, 137, 137, .62); background: rgba(154, 49, 49, .22); }
.evaluator-card-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.evaluator-login-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; color: rgba(119, 97, 55, .75); font-size: 12px; }
.evaluator-login-divider::before, .evaluator-login-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(166, 128, 59, .3), transparent); }
@media (max-width: 720px) {
  .evaluator-card-access { grid-template-columns: 48px 1fr; }
  .evaluator-card-status { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}