.application-hero{padding:28px 0 10px}.application-hero h1{font-size:clamp(44px,6vw,76px);line-height:.95;margin:12px 0;color:#f4f9fc}.application-showcase{position:relative;overflow:hidden;border-radius:20px;min-height:250px;border:1px solid rgba(80,195,240,.15);background:#071c28;margin:24px 0}.application-showcase-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.7);opacity:.48}.application-showcase-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,16,25,.96),rgba(3,16,25,.4))}.application-showcase-content{position:relative;z-index:2;padding:28px;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end}.application-showcase h2{font-size:34px;margin:8px 0;color:white}.application-status{display:inline-flex;padding:7px 10px;border-radius:99px;background:#061722;border:1px solid rgba(255,255,255,.12);font-size:9px;text-transform:uppercase;font-weight:900}.application-status.open{color:#74f1b3}.application-status.closed{color:#ff9aa8}.application-type-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.application-type-tabs a{padding:10px 14px;border-radius:10px;text-decoration:none;color:#88aabd;border:1px solid rgba(60,185,235,.14);background:rgba(255,255,255,.02);font-size:11px;font-weight:900}.application-type-tabs a.active,.application-type-tabs a:hover{background:#08364d;color:white}.application-history{display:grid;gap:9px}.application-history-item{padding:13px;border:1px solid rgba(60,185,235,.13);border-radius:11px;background:rgba(255,255,255,.022)}

.application-type-tabs{
  margin-bottom:20px;
  padding:5px;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:rgba(255,255,255,.015);
}
.application-type-tabs a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:8px;
  color:#91a9b5;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.application-type-tabs a.active{
  color:#e8f9ff;
  background:rgba(91,200,238,.08);
  border:1px solid rgba(91,200,238,.15);
}
.application-showcase{
  min-height:300px;
  margin-bottom:22px;
  border:1px solid var(--line-soft)!important;
  border-radius:18px!important;
  box-shadow:var(--shadow-panel);
}
.application-showcase-overlay{
  background:linear-gradient(90deg,rgba(3,13,19,.94),rgba(3,13,19,.58) 55%,rgba(3,13,19,.18))!important;
}
.application-showcase-content{
  max-width:650px;
  padding:34px!important;
}
.application-showcase-content h2{
  margin:12px 0 9px;
  font-size:30px!important;
  letter-spacing:-.03em;
}
.application-status{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border-radius:99px;
  font-size:8px!important;
  font-weight:900!important;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Premium application catalogue */
.application-catalogue{
  display:grid;
  gap:22px;
  margin-bottom:28px;
}
.application-banner-card{
  position:relative;
  min-height:310px;
  overflow:hidden;
  border:1px solid rgba(151,208,232,.16);
  border-radius:22px;
  background:#0a1822;
  box-shadow:0 26px 80px rgba(0,0,0,.28);
  cursor:pointer;
  isolation:isolate;
}
.application-banner-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--application-banner);
  background-size:cover;
  background-position:center;
  transform:scale(1.01);
  transition:transform .45s ease,filter .45s ease;
}
.application-banner-card:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(3,10,16,.95) 0%,rgba(3,10,16,.78) 42%,rgba(3,10,16,.24) 74%,rgba(3,10,16,.5) 100%),
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45));
}
.application-banner-card:hover:before{
  transform:scale(1.055);
  filter:saturate(1.08) brightness(1.04);
}
.application-banner-card:hover{
  border-color:rgba(101,213,255,.32);
}
.application-banner-content{
  min-height:310px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px 30px;
}
.application-banner-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}
.application-banner-badge,
.application-banner-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:99px;
  background:rgba(4,12,18,.64);
  backdrop-filter:blur(12px);
  color:#d8e8ef;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.application-banner-status.open{
  color:#9ff0c2;
  border-color:rgba(69,214,138,.24);
  background:rgba(20,84,52,.34);
}
.application-banner-status.closed{
  color:#ffb8c1;
  border-color:rgba(255,111,131,.25);
  background:rgba(94,30,42,.4);
}
.application-banner-main{
  max-width:720px;
}
.application-banner-title{
  margin:0;
  font-size:clamp(34px,4.5vw,62px);
  line-height:.98;
  letter-spacing:-.055em;
  text-shadow:0 8px 30px rgba(0,0,0,.42);
}
.application-banner-description{
  max-width:650px;
  margin:15px 0 0;
  color:#c0d2da;
  font-size:13px;
  line-height:1.72;
  text-shadow:0 3px 18px rgba(0,0,0,.65);
}
.application-banner-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
}
.application-banner-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.application-banner-meta span{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(4,12,18,.5);
  color:#a9c0cb;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.application-banner-view{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  background:rgba(4,12,18,.62);
  color:white;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
  backdrop-filter:blur(12px);
}
.application-banner-card:hover .application-banner-view{
  background:rgba(56,189,248,.14);
  border-color:rgba(101,213,255,.32);
}
.application-detail-panel{
  display:none;
  margin-bottom:26px;
}
.application-detail-panel.active{
  display:block;
}
.application-detail-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:18px;
}
.application-back-button{
  margin-bottom:16px;
}
.application-admin-hint{
  padding:14px 15px;
  border-radius:12px;
  border:1px solid rgba(56,189,248,.16);
  background:rgba(56,189,248,.055);
  color:#a9c3cf;
  font-size:10px;
  line-height:1.6;
}
@media(max-width:720px){
  .application-banner-card,.application-banner-content{min-height:360px}
  .application-banner-content{padding:22px}
  .application-banner-footer{align-items:flex-start;flex-direction:column}
  .application-banner-view{width:100%;justify-content:center}
}

.application-banner-card[data-application-type="whitelist"]{
  min-height:350px;
  border-color:rgba(101,213,255,.26);
}
.application-banner-card[data-application-type="whitelist"] .application-banner-badge{
  color:#9fe7ff;
  border-color:rgba(101,213,255,.28);
  background:rgba(8,65,88,.5);
}
.application-banner-card[data-application-type="whitelist"] .application-banner-title:before{
  content:"Primary access";
  display:block;
  margin-bottom:10px;
  color:#7bd8fa;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.whitelist-direct-link{
  display:inline-flex;
  margin-top:12px;
  color:#79d9fb;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ==========================================================
   READABLE APPLICATION CARDS
   ========================================================== */
.application-catalogue{
  gap:28px!important;
}

.application-banner-card{
  min-height:390px!important;
  border-radius:24px!important;
}

.application-banner-card:after{
  background:
    linear-gradient(
      90deg,
      rgba(2,7,12,.98) 0%,
      rgba(2,7,12,.94) 30%,
      rgba(2,7,12,.76) 58%,
      rgba(2,7,12,.46) 78%,
      rgba(2,7,12,.62) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.14) 0%,
      rgba(0,0,0,.22) 46%,
      rgba(0,0,0,.72) 100%
    )!important;
}

.application-banner-content{
  min-height:390px!important;
  padding:32px 34px!important;
}

.application-banner-main{
  max-width:690px!important;
  padding:22px 24px!important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(90deg,rgba(2,8,13,.88),rgba(2,8,13,.56));
  backdrop-filter:blur(8px);
}

.application-banner-title{
  position:relative;
  z-index:2;
  max-width:100%!important;
  color:#fff!important;
  font-size:clamp(40px,5vw,68px)!important;
  line-height:.96!important;
  text-shadow:0 4px 22px rgba(0,0,0,.9)!important;
  overflow-wrap:anywhere;
}

.application-banner-title:after{
  display:none!important;
}

.application-banner-description{
  max-width:620px!important;
  margin-top:16px!important;
  color:#d5e2e8!important;
  font-size:13.5px!important;
  line-height:1.75!important;
  text-shadow:0 3px 12px rgba(0,0,0,.95)!important;
}

.application-banner-top{
  position:relative;
  z-index:3;
}

.application-banner-footer{
  position:relative;
  z-index:3;
}

.application-banner-badge,
.application-banner-status,
.application-banner-meta span,
.application-banner-view{
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}

.application-banner-view{
  min-height:46px!important;
  padding:0 18px!important;
  background:rgba(2,10,16,.82)!important;
}

.application-banner-card:hover .application-banner-view{
  background:rgba(17,82,108,.82)!important;
}

.application-banner-card[data-application-type="whitelist"]{
  min-height:420px!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-content{
  min-height:420px!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-main{
  max-width:760px!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-title:before{
  margin-bottom:12px!important;
  color:#7edcff!important;
  text-shadow:none!important;
}

@media(max-width:760px){
  .application-banner-card,
  .application-banner-content,
  .application-banner-card[data-application-type="whitelist"],
  .application-banner-card[data-application-type="whitelist"] .application-banner-content{
    min-height:470px!important;
  }

  .application-banner-content{
    padding:22px!important;
  }

  .application-banner-main{
    padding:18px!important;
  }

  .application-banner-title{
    font-size:40px!important;
  }
}

/* ==========================================================
   APPLICATION ARTWORK VISIBILITY FIX
   Keeps the left copy readable without covering the banner.
   ========================================================== */

.application-banner-card{
  min-height:410px!important;
  background:#061018!important;
}

.application-banner-card:before{
  background-position:center right!important;
  transform:scale(1.005)!important;
  filter:saturate(.92) brightness(.9);
}

.application-banner-card:hover:before{
  transform:scale(1.025)!important;
  filter:saturate(1) brightness(.96)!important;
}

/* Only darken the copy side. Keep the right side visibly photographic. */
.application-banner-card:after{
  background:
    linear-gradient(
      90deg,
      rgba(2,7,11,.98) 0%,
      rgba(2,7,11,.96) 24%,
      rgba(2,7,11,.86) 42%,
      rgba(2,7,11,.48) 57%,
      rgba(2,7,11,.13) 72%,
      rgba(2,7,11,.04) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.04) 50%,
      rgba(0,0,0,.32) 100%
    )!important;
}

.application-banner-content{
  min-height:410px!important;
  padding:28px 30px!important;
}

/* Confine copy to the left half so the artwork remains visible. */
.application-banner-main{
  width:min(48%,620px)!important;
  max-width:620px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
}

/* Smaller, controlled title instead of filling the entire image. */
.application-banner-title{
  max-width:100%!important;
  font-size:clamp(34px,4vw,56px)!important;
  line-height:.98!important;
  letter-spacing:-.048em!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-shadow:
    0 3px 14px rgba(0,0,0,.96),
    0 10px 40px rgba(0,0,0,.72)!important;
}

.application-banner-description{
  max-width:540px!important;
  color:#d8e5ea!important;
  font-size:13px!important;
  line-height:1.7!important;
}

/* Keep footer controls away from the visible centre artwork. */
.application-banner-footer{
  align-items:flex-end!important;
}

.application-banner-meta{
  max-width:48%!important;
}

.application-banner-view{
  margin-left:auto!important;
  background:rgba(2,10,16,.76)!important;
  backdrop-filter:blur(10px)!important;
}

/* Whitelist uses the same controlled layout. */
.application-banner-card[data-application-type="whitelist"],
.application-banner-card[data-application-type="whitelist"] .application-banner-content{
  min-height:430px!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-main{
  width:min(50%,650px)!important;
  max-width:650px!important;
}

/* If the source artwork itself contains large lettering, this keeps it on
   the visible right while the real portal title stays separate on the left. */
.application-banner-card[data-application-type="staff"]:before,
.application-banner-card[data-application-type="whitelist"]:before,
.application-banner-card[data-application-type="gang"]:before{
  background-position:68% center!important;
}

@media(max-width:980px){
  .application-banner-main{
    width:min(58%,600px)!important;
  }

  .application-banner-meta{
    max-width:58%!important;
  }
}

@media(max-width:760px){
  .application-banner-card,
  .application-banner-content,
  .application-banner-card[data-application-type="whitelist"],
  .application-banner-card[data-application-type="whitelist"] .application-banner-content{
    min-height:500px!important;
  }

  .application-banner-card:before{
    background-position:center!important;
  }

  .application-banner-card:after{
    background:
      linear-gradient(
        180deg,
        rgba(2,7,11,.28) 0%,
        rgba(2,7,11,.48) 38%,
        rgba(2,7,11,.94) 67%,
        rgba(2,7,11,.99) 100%
      )!important;
  }

  .application-banner-content{
    justify-content:space-between!important;
  }

  .application-banner-main,
  .application-banner-card[data-application-type="whitelist"] .application-banner-main{
    width:100%!important;
    max-width:100%!important;
    margin-top:auto!important;
    padding-top:120px!important;
  }

  .application-banner-title{
    font-size:38px!important;
  }

  .application-banner-meta{
    max-width:100%!important;
  }

  .application-banner-footer{
    align-items:stretch!important;
  }
}

/* ==========================================================
   STAFF APPLICATION — REFERENCE-MATCHED CINEMATIC CARD
   ========================================================== */
.application-banner-card[data-application-type="staff"]{
  min-height:330px!important;
  border-radius:24px!important;
  border-color:rgba(214,174,82,.28)!important;
  background:#0a1117!important;
}

.application-banner-card[data-application-type="staff"]:before{
  background-position:center!important;
  background-size:cover!important;
  transform:scale(1.002)!important;
  filter:saturate(.92) brightness(.9)!important;
}

.application-banner-card[data-application-type="staff"]:after{
  background:
    linear-gradient(
      180deg,
      rgba(2,8,13,.08) 0%,
      rgba(2,8,13,.05) 42%,
      rgba(2,8,13,.52) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2,8,13,.18) 0%,
      rgba(2,8,13,.06) 38%,
      rgba(2,8,13,.04) 68%,
      rgba(2,8,13,.18) 100%
    )!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-content{
  min-height:330px!important;
  padding:28px 32px!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-top{
  align-items:flex-start!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-badge{
  min-height:32px!important;
  padding:0 13px!important;
  border-radius:99px!important;
  border-color:rgba(214,174,82,.3)!important;
  background:rgba(37,26,8,.72)!important;
  color:#f3cf7a!important;
  box-shadow:0 8px 28px rgba(0,0,0,.26)!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-status{
  position:relative!important;
  min-height:38px!important;
  padding:0 16px!important;
  border-radius:99px!important;
  background:rgba(12,20,29,.82)!important;
  color:#ffb6c0!important;
  border-color:rgba(255,111,131,.22)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.28)!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-status:before{
  content:"Status";
  margin-right:12px;
  color:#748a96;
}

.application-banner-card[data-application-type="staff"] .application-banner-main{
  width:min(48%,620px)!important;
  max-width:620px!important;
  margin-top:auto!important;
  margin-bottom:10px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-title{
  max-width:520px!important;
  font-size:34px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  text-shadow:
    0 4px 16px rgba(0,0,0,.98),
    0 10px 34px rgba(0,0,0,.7)!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-description{
  max-width:650px!important;
  margin-top:16px!important;
  color:#d6e1e7!important;
  font-size:12.5px!important;
  line-height:1.7!important;
  text-shadow:0 4px 18px rgba(0,0,0,.96)!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-footer{
  align-items:center!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-meta{
  display:none!important;
}

.application-banner-card[data-application-type="staff"] .application-banner-view{
  min-height:38px!important;
  margin-left:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:10px!important;
  text-shadow:0 4px 18px rgba(0,0,0,.9)!important;
}

.application-banner-card[data-application-type="staff"]:hover .application-banner-view{
  background:transparent!important;
  color:#8be2ff!important;
}

.application-banner-card[data-application-type="staff"]:hover:before{
  transform:scale(1.018)!important;
  filter:saturate(1) brightness(.95)!important;
}

@media(max-width:760px){
  .application-banner-card[data-application-type="staff"],
  .application-banner-card[data-application-type="staff"] .application-banner-content{
    min-height:450px!important;
  }

  .application-banner-card[data-application-type="staff"] .application-banner-main{
    width:100%!important;
    max-width:100%!important;
    padding-top:145px!important;
  }

  .application-banner-card[data-application-type="staff"] .application-banner-title{
    font-size:36px!important;
  }

  .application-banner-card[data-application-type="staff"] .application-banner-footer{
    align-items:flex-end!important;
  }
}

/* ==========================================================
   WHITELIST APPLICATION — CINEMATIC REFERENCE STYLE
   ========================================================== */
.application-banner-card[data-application-type="whitelist"]{
  min-height:350px!important;
  border-radius:24px!important;
  border-color:rgba(91,200,238,.3)!important;
  background:#08131b!important;
}

.application-banner-card[data-application-type="whitelist"]:before{
  background-position:center!important;
  background-size:cover!important;
  transform:scale(1.002)!important;
  filter:saturate(.95) brightness(.9)!important;
}

.application-banner-card[data-application-type="whitelist"]:after{
  background:
    linear-gradient(
      180deg,
      rgba(2,8,13,.08) 0%,
      rgba(2,8,13,.05) 42%,
      rgba(2,8,13,.54) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2,8,13,.2) 0%,
      rgba(2,8,13,.07) 38%,
      rgba(2,8,13,.04) 68%,
      rgba(2,8,13,.18) 100%
    )!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-content{
  min-height:350px!important;
  padding:28px 32px!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-badge{
  min-height:32px!important;
  padding:0 13px!important;
  border-radius:99px!important;
  border-color:rgba(91,200,238,.34)!important;
  background:rgba(7,49,67,.72)!important;
  color:#a5ebff!important;
  box-shadow:0 8px 28px rgba(0,0,0,.26)!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-status{
  min-height:38px!important;
  padding:0 16px!important;
  border-radius:99px!important;
  background:rgba(8,24,34,.82)!important;
  color:#a7efc5!important;
  border-color:rgba(69,214,138,.22)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.28)!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-status:before{
  content:"Status";
  margin-right:12px;
  color:#748a96;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-main{
  width:min(50%,650px)!important;
  max-width:650px!important;
  margin-top:auto!important;
  margin-bottom:10px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-title{
  max-width:560px!important;
  font-size:36px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  text-shadow:
    0 4px 16px rgba(0,0,0,.98),
    0 10px 34px rgba(0,0,0,.7)!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-title:before{
  content:"";
  display:none!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-description{
  max-width:640px!important;
  margin-top:16px!important;
  color:#d8e5ea!important;
  font-size:12.5px!important;
  line-height:1.7!important;
  text-shadow:0 4px 18px rgba(0,0,0,.96)!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-meta{
  display:none!important;
}

.application-banner-card[data-application-type="whitelist"] .application-banner-view{
  min-height:38px!important;
  margin-left:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:10px!important;
  text-shadow:0 4px 18px rgba(0,0,0,.9)!important;
}

.application-banner-card[data-application-type="whitelist"]:hover .application-banner-view{
  background:transparent!important;
  color:#8be2ff!important;
}

.application-banner-card[data-application-type="whitelist"]:hover:before{
  transform:scale(1.018)!important;
  filter:saturate(1.02) brightness(.96)!important;
}

@media(max-width:760px){
  .application-banner-card[data-application-type="whitelist"],
  .application-banner-card[data-application-type="whitelist"] .application-banner-content{
    min-height:460px!important;
  }

  .application-banner-card[data-application-type="whitelist"] .application-banner-main{
    width:100%!important;
    max-width:100%!important;
    padding-top:145px!important;
  }

  .application-banner-card[data-application-type="whitelist"] .application-banner-title{
    font-size:36px!important;
  }
}