:root {
  color-scheme: dark;
  --navy: #020712;
  --navy-2: #061426;
  --navy-3: #0a2135;
  --cyan: #4fd6ff;
  --cyan-dark: #07536a;
  --gold: #d9ad45;
  --gold-bright: #fff1a6;
  --ink: #f5f9fc;
  --muted: #8fa7b7;
  --line: #4fd6ff38;
  --profile-primary: #00c7e8;
  --profile-secondary: #07182a;
  --profile-accent: #d9ad45;
  --display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: linear-gradient(90deg, #4fd6ff08 1px, transparent 1px) 0 0 / 72px 100%, radial-gradient(circle at 50% -10%, #0d66843d, transparent 40rem), linear-gradient(145deg, #020712, #061426 56%, #020712); color: var(--ink); font-family: Inter, Arial, sans-serif; }
button,input,textarea { font: inherit; }
button,a,.portal-file-button { -webkit-tap-highlight-color: transparent; }

.portal-header { align-items: center; background: #020712ed; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 92px; padding: 8px clamp(16px, 4vw, 64px); }
.portal-brand { align-items: center; display: flex; height: 76px; overflow: hidden; width: min(330px, 48vw); }
.portal-brand img { display: block; height: 155%; object-fit: contain; object-position: center; width: 100%; }
.portal-header nav { display: flex; gap: 8px; }
.portal-header nav a { border-bottom: 2px solid transparent; color: #c7d6df; font: 900 .75rem/1 var(--display); padding: 13px 10px; text-decoration: none; text-transform: uppercase; }
.portal-header nav a:hover,.portal-header nav a:focus-visible { border-color: var(--gold); color: #fff; }

.portal-shell { margin: 0 auto; padding: clamp(16px, 3vw, 44px); width: min(1540px, 100%); }
.portal-gate { background: radial-gradient(circle at 80% 20%, #4fd6ff25, transparent 24rem), linear-gradient(140deg, #071a2b, #020712); border: 1px solid var(--line); border-top: 5px solid var(--cyan); margin: 9vh auto; max-width: 760px; padding: clamp(28px, 6vw, 70px); text-align: center; }
.portal-gate h1 { font: 950 clamp(2.5rem, 7vw, 5.8rem)/.86 var(--display); margin: 8px 0 18px; text-transform: uppercase; }
.portal-gate p:not(.portal-kicker) { color: var(--muted); line-height: 1.6; }
.portal-gate code { color: var(--gold-bright); display: inline-block; font-weight: 900; margin-top: 8px; }
.portal-gate .portal-action { background: var(--cyan); color: #03111c; display: inline-flex; font: 950 .9rem/1 var(--display); margin-top: 14px; padding: 15px 20px; text-decoration: none; text-transform: uppercase; }
.portal-kicker,.portal-panel header span,.portal-activity header span { color: var(--gold); font: 950 .7rem/1 var(--display); margin: 0; text-transform: uppercase; }

.portal-dashboard { display: grid; gap: 18px; }
.portal-hero { background: radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--profile-primary) 28%, transparent), transparent 30rem), linear-gradient(110deg, color-mix(in srgb, var(--profile-secondary) 78%, #020712), #020712 76%); border: 1px solid color-mix(in srgb, var(--profile-primary) 55%, transparent); border-top: 5px solid var(--profile-primary); display: grid; grid-template-columns: minmax(260px, 34%) 1fr; min-height: 430px; overflow: hidden; position: relative; }
.portal-portrait { align-self: end; height: 100%; min-height: 420px; position: relative; }
.portal-portrait::after { background: linear-gradient(90deg, transparent 72%, #020712); content: ""; inset: 0; position: absolute; }
.portal-portrait img { display: block; height: 100%; object-fit: contain; object-position: center bottom; width: 100%; }
.portal-portrait-fallback { align-content: center; background: radial-gradient(circle, color-mix(in srgb, var(--profile-primary) 28%, transparent), transparent 58%); display: grid; height: 100%; justify-items: center; }
.portal-portrait-fallback strong { font: 950 7rem/.9 var(--display); text-shadow: 0 0 35px var(--profile-primary); }
.portal-identity { align-content: center; min-width: 0; padding: clamp(28px, 5vw, 70px); position: relative; z-index: 1; }
.portal-title-line { align-items: center; display: flex; gap: clamp(18px, 3vw, 42px); margin: 20px 0 30px; min-width: 0; }
.portal-title-line > div:last-child { min-width: 0; }
.portal-title-line span { color: var(--muted); font: 900 .9rem/1 var(--display); text-transform: uppercase; }
.portal-title-line h1 { font: 950 clamp(3rem, 6.2vw, 7.2rem)/.82 var(--display); margin: 7px 0 0; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.portal-number { align-items: center; color: var(--profile-accent); display: flex; flex: 0 1 230px; font: 950 clamp(4.5rem, 9vw, 9rem)/.8 var(--display); height: 160px; justify-content: center; max-width: 34%; min-width: 100px; overflow: hidden; text-shadow: 5px 5px #0008; }
.portal-number img { height: 100%; object-fit: contain; width: 100%; }
.portal-official-strip { border-block: 1px solid #ffffff1d; display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 15px 0; }
.portal-official-strip span { color: #c5d4dc; font-size: .78rem; font-weight: 850; text-transform: uppercase; }
.portal-official-strip span:first-child { color: var(--cyan); }

.portal-workspace { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.portal-panel,.portal-activity { background: linear-gradient(145deg, #071727f5, #020712fa); border: 1px solid var(--line); padding: clamp(20px, 3vw, 34px); }
.portal-panel > header,.portal-activity > header { border-bottom: 1px solid #ffffff14; margin-bottom: 20px; padding-bottom: 15px; }
.portal-panel h2,.portal-activity h2 { font: 950 clamp(1.6rem, 3vw, 2.8rem)/.92 var(--display); margin: 5px 0 0; text-transform: uppercase; }
.portal-media-panel,.portal-details-panel { grid-column: span 6; }
.portal-style-panel { grid-column: span 4; }
.portal-links-panel { grid-column: span 8; }
.portal-media-center-panel { grid-column: 1 / -1; }
.portal-garage-panel { grid-column: 1 / -1; }
.portal-media-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.portal-media-grid article { background: #020812; border: 1px solid #4fd6ff2c; display: grid; gap: 8px; padding: 12px; }
.portal-asset-preview { align-items: center; background: radial-gradient(circle, #4fd6ff1e, transparent 60%), #01050c; display: flex; height: 190px; justify-content: center; overflow: hidden; }
.portal-asset-preview img { height: 100%; object-fit: contain; width: 100%; }
.portal-asset-preview.portrait img { object-position: center bottom; }
.portal-number-text { color: var(--profile-accent); font: 950 5rem/1 var(--display); }
.portal-file-button,button { align-items: center; border: 0; cursor: pointer; display: inline-flex; font: 950 .75rem/1 var(--display); justify-content: center; min-height: 42px; padding: 12px 14px; text-transform: uppercase; }
.portal-file-button,#portalSave { background: var(--cyan); color: #02111d; }
.portal-file-button input { height: 1px; opacity: 0; position: absolute; width: 1px; }
button.ghost { background: #0b2133; border: 1px solid #4fd6ff38; color: #dcecf3; }
button.ghost.danger { border-color: #d9ad4559; color: #f4d98e; }
button:disabled,.portal-file-button.is-disabled { cursor: not-allowed; opacity: .45; }

.portal-form-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
label { color: #a9bdc8; display: grid; font-size: .72rem; font-weight: 900; gap: 7px; margin-bottom: 12px; text-transform: uppercase; }
input,textarea,select { background: #020812; border: 1px solid #4fd6ff38; border-radius: 0; color: #fff; min-width: 0; outline: none; padding: 12px; text-transform: none; }
input:focus,textarea:focus,select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px #4fd6ff18; }
select option { background: #071727; color: #fff; }
textarea { line-height: 1.55; resize: vertical; }
.portal-color-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.portal-color-grid label { background: #020812; border: 1px solid #4fd6ff2c; margin: 0; padding: 10px; }
.portal-color-grid input { height: 48px; padding: 2px; width: 100%; }
.portal-save-bar { align-items: center; background: #061727; border: 1px solid var(--line); bottom: 12px; display: flex; gap: 18px; grid-column: 1 / -1; justify-content: space-between; padding: 14px 18px; position: sticky; z-index: 8; }
.portal-save-bar p { color: #a8bbc6; margin: 0; }
#portalSave { min-width: 190px; }
.portal-activity > div { display: grid; gap: 1px; }
.portal-audit-row { align-items: center; background: #071522; border-left: 3px solid var(--cyan-dark); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
.portal-audit-row strong { display: block; text-transform: capitalize; }
.portal-audit-row small { color: var(--muted); }
.portal-audit-row time { color: var(--gold); font-size: .72rem; font-weight: 900; }
.portal-empty { color: var(--muted); padding: 18px; text-align: center; }
.portal-dashboard.is-locked .portal-save-bar { border-color: #d9ad4570; }

.portal-media-composer { align-items: end; display: grid; gap: 12px; grid-template-columns: 170px minmax(220px, .8fr) minmax(300px, 1.2fr); }
.portal-media-composer label { margin: 0; }
.portal-media-composer .portal-media-description { grid-column: 1 / span 2; }
.portal-media-composer button { background: var(--cyan); color: #02111d; min-height: 46px; }
.portal-panel-note { color: var(--muted); font-size: .78rem; margin: 14px 0 18px; }
.portal-media-list { display: grid; gap: 9px; }
.portal-media-item { align-items: center; background: #020812; border: 1px solid #4fd6ff2b; display: grid; gap: 14px; grid-template-columns: 120px minmax(0, 1fr) auto; padding: 12px; }
.portal-media-item.is-featured { border-color: #d9ad457a; box-shadow: inset 4px 0 #d9ad45; }
.portal-media-type { color: var(--cyan); display: grid; font: 950 .78rem/1 var(--display); gap: 8px; text-transform: uppercase; }
.portal-media-type span { color: var(--gold); font-size: .62rem; }
.portal-media-item > div:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.portal-media-item strong { overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.portal-media-item a { color: var(--cyan); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; text-decoration: none; white-space: nowrap; }
.portal-media-item p { color: var(--muted); font-size: .78rem; margin: 3px 0 0; }
.portal-media-actions { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.portal-media-actions button:only-child { grid-column: 1 / -1; }
.portal-media-empty { align-items: center; border: 1px dashed #4fd6ff45; color: var(--muted); display: grid; justify-items: center; min-height: 130px; padding: 24px; text-align: center; }
.portal-media-empty strong { color: #eaf8ff; font: 950 1.2rem/1 var(--display); text-transform: uppercase; }

.portal-garage-toolbar { align-items: end; display: grid; gap: 12px 16px; grid-template-columns: minmax(220px, 1fr) auto; margin-bottom: 18px; }
.portal-garage-toolbar label { margin: 0; }
.portal-garage-toolbar .portal-file-button { min-width: 210px; }
.portal-garage-toolbar p { color: var(--muted); font-size: .78rem; grid-column: 1 / -1; margin: 0; }
.portal-garage-gallery { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-garage-card { background: #020812; border: 1px solid #4fd6ff2c; display: grid; gap: 10px; min-width: 0; padding: 10px; }
.portal-garage-card.is-featured { border-color: #d9ad4580; box-shadow: inset 0 0 24px #d9ad4510; }
.portal-garage-image { aspect-ratio: 16 / 9; background: #01050c; min-height: 0; overflow: hidden; padding: 0; position: relative; width: 100%; }
.portal-garage-image img { height: 100%; object-fit: cover; transition: transform .25s ease; width: 100%; }
.portal-garage-image:hover img { transform: scale(1.025); }
.portal-garage-image span { background: #d9ad45; color: #03101d; font-size: .66rem; left: 8px; padding: 7px 9px; position: absolute; top: 8px; }
.portal-garage-card > div:not(.portal-garage-actions) { display: grid; gap: 3px; min-width: 0; }
.portal-garage-card > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-garage-card > div small { color: var(--muted); font-size: .67rem; text-transform: uppercase; }
.portal-garage-actions { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.portal-garage-actions button:only-child { grid-column: 1 / -1; }
.portal-garage-empty { align-items: center; border: 1px dashed #4fd6ff45; color: var(--muted); display: grid; grid-column: 1 / -1; justify-items: center; min-height: 170px; padding: 28px; text-align: center; }
.portal-garage-empty strong { color: #eaf8ff; font: 950 1.35rem/1 var(--display); text-transform: uppercase; }

@media (max-width: 900px) {
  .portal-hero { grid-template-columns: 1fr; }
  .portal-portrait { height: 340px; min-height: 0; }
  .portal-portrait::after { background: linear-gradient(transparent 72%, #020712); }
  .portal-identity { padding: 24px 18px 30px; }
  .portal-media-panel,.portal-details-panel,.portal-style-panel,.portal-links-panel,.portal-media-center-panel,.portal-garage-panel { grid-column: 1 / -1; }
  .portal-media-composer { grid-template-columns: 1fr 1fr; }
  .portal-media-composer .portal-media-url { grid-column: 1 / -1; }
  .portal-media-composer .portal-media-description { grid-column: 1 / -1; }
  .portal-garage-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .portal-header { align-items: stretch; flex-direction: column; padding: 4px 12px 10px; }
  .portal-brand { align-self: center; height: 70px; width: min(340px, 86vw); }
  .portal-header nav { justify-content: center; }
  .portal-shell { padding: 10px; }
  .portal-title-line { align-items: flex-end; gap: 12px; }
  .portal-number { flex-basis: 100px; font-size: 3.3rem; height: 88px; min-width: 74px; }
  .portal-title-line h1 { font-size: clamp(2.1rem, 11vw, 3.6rem); }
  .portal-media-grid,.portal-form-grid { grid-template-columns: 1fr; }
  .portal-garage-toolbar,.portal-garage-gallery { grid-template-columns: 1fr; }
  .portal-media-composer,.portal-media-item { grid-template-columns: 1fr; }
  .portal-media-composer .portal-media-url,.portal-media-composer .portal-media-description { grid-column: auto; }
  .portal-media-actions { grid-template-columns: 1fr 1fr; }
  .portal-garage-toolbar .portal-file-button { width: 100%; }
  .portal-color-grid { grid-template-columns: 1fr; }
  .portal-save-bar { align-items: stretch; bottom: 6px; flex-direction: column; }
  #portalSave { width: 100%; }
  .portal-audit-row { grid-template-columns: 1fr; }
}

.portal-career-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portal-career-objectives,.portal-career-payday,.portal-career-store { border: 1px solid #4fd6ff3d; border-radius: 4px; background: #07182aeb; }
.portal-career-objectives header,.portal-career-payday header,.portal-career-store > header { padding: 22px 24px; border-bottom: 1px solid #4fd6ff2e; }
.portal-career-objectives header span,.portal-career-payday header span,.portal-career-store > header span { color: #fff0a8; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.portal-career-objectives header h2,.portal-career-payday header h2,.portal-career-store > header h2 { margin: 5px 0 0; color: #fff; font: 950 1.65rem/1 var(--display); text-transform: uppercase; }
.portal-career-store > header p { margin: 8px 0 0; color: var(--muted); }
#portalObjectives,#portalPayday { display: grid; padding: 14px; gap: 8px; }
.portal-objective { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; min-height: 94px; align-content: center; padding: 15px 17px; border-left: 4px solid #28d7f2; background: #0a2035; }
.portal-objective.is-stretch,.portal-objective.is-momentum { border-left-color: #d6ad4b; }
.portal-objective.is-discipline { border-left-color: #8296a8; }
.portal-objective.is-racecraft { border-left-color: #71ffd4; }
.portal-objective span { color: var(--muted); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.portal-objective strong { grid-column: 1 / -1; color: #fff; }
.portal-objective p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.portal-objective small { color: #fff0a8; font-weight: 900; }
.portal-objective em { color: #28d7f2; font-size: .68rem; font-style: normal; font-weight: 900; text-align: right; text-transform: uppercase; }
.portal-objective.is-complete { background: #0c3439; }
.portal-objective.is-missed { opacity: .55; }
.portal-payday-total,#portalPayday p { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 11px 13px; color: #cdd9e3; background: #0a2035; }
.portal-payday-total { min-height: 68px; border-bottom: 2px solid #d6ad4b; }
.portal-payday-total strong { color: #71ffd4; font-size: 1.5rem; }
#portalPayday p strong { color: #fff0a8; white-space: nowrap; }
#portalPayday .is-negative { color: #ff9a9a; }
.portal-store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.portal-career-loadout { margin: 14px 14px 0; border: 1px solid #4fd6ff35; background: #04111f; }
.portal-career-loadout > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 15px; border-bottom: 1px solid #4fd6ff2e; }
.portal-career-loadout > header span { color: #fff0a8; font-weight: 950; text-transform: uppercase; }
.portal-career-loadout > header strong { color: #8fa9bc; font-size: .72rem; }
.portal-career-loadout > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: #4fd6ff24; }
.portal-career-loadout article { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 12px; min-height: 86px; padding: 12px 14px; background: #07182a; }
.portal-career-loadout article span { grid-column: 1; color: #54dfff; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.portal-career-loadout article strong { grid-column: 1; min-width: 0; overflow: hidden; color: #f3f7fb; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-career-loadout article button { grid-column: 2; grid-row: 1 / span 2; min-width: 105px; min-height: 38px; padding: 7px 10px; }
.portal-career-loadout article.is-custom { box-shadow: inset 3px 0 #d6ad4b; }
.portal-career-loadout article.is-default strong { color: #94a8b8; }
.portal-career-loadout article.is-default button:disabled { color: #061426; opacity: 1; background: #54dfff; }
.portal-store-filters { display: flex; gap: 7px; padding: 14px 14px 0; overflow-x: auto; }
.portal-store-filters button { flex: 0 0 auto; min-height: 36px; padding: 7px 12px; border: 1px solid #4fd6ff3b; color: #9fb4c4; background: #061426; }
.portal-store-filters button.is-active { border-color: #d6ad4b; color: #061426; background: #fff0a8; }
.portal-store-item { display: flex; min-height: 210px; flex-direction: column; justify-content: space-between; padding: 19px; border: 1px solid #4fd6ff2e; background: linear-gradient(135deg, #081a2c, #0a2940); }
.portal-store-item.rarity-rare { border-top: 3px solid #28d7f2; }
.portal-store-item.rarity-epic { border-top: 3px solid #d6ad4b; }
.portal-store-item.rarity-legendary { border-color: #fff0a88c; border-top: 3px solid #fff0a8; box-shadow: inset 0 0 24px #d6ad4b12; }
.portal-store-item.is-locked { filter: saturate(.55); }
.portal-store-item.is-owned { border-color: #d6ad4b8c; background: linear-gradient(135deg, #081a2c, #332812); }
.portal-store-item.is-equipped { border-color: #28d7f2; box-shadow: inset 0 0 30px #28d7f21c, 0 0 16px #28d7f21f; }
.portal-store-item span { color: #28d7f2; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.portal-store-item strong { display: block; margin: 7px 0; color: #fff; font: 900 1.25rem/1.05 var(--display); text-transform: uppercase; }
.portal-store-item p { margin: 0; color: var(--muted); line-height: 1.45; }
.portal-store-item > div > small { display: block; margin-top: 12px; color: #8ba1b2; font-weight: 800; }
.portal-store-meta { display: flex; justify-content: space-between; gap: 12px; }
.portal-store-meta em { color: #fff0a8; font-size: .65rem; font-style: normal; font-weight: 900; text-transform: uppercase; }
.portal-store-item footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.portal-store-item footer b { color: #fff0a8; font-size: 1.15rem; }
.portal-store-item footer button { min-width: 110px; }
.portal-store-item footer button:disabled { color: #061426; opacity: .8; background: #8296a8; }
.portal-store-item.is-owned footer button:disabled { background: #d6ad4b; }
.portal-store-item.is-equipped footer button:disabled { background: #28d7f2; }
.portal-store-item.is-collectible { min-height: 430px; overflow: hidden; position: relative; }
.portal-store-collectible { align-items: center; background: radial-gradient(circle, #28d7f226, transparent 68%); display: flex; height: 190px; justify-content: center; margin: -8px -8px 10px; overflow: hidden; }
.portal-store-collectible img { filter: drop-shadow(0 12px 18px #000b); height: 100%; object-fit: contain; transition: filter .25s ease, transform .25s ease; width: 100%; }
.portal-store-item.is-collectible:hover .portal-store-collectible img { filter: drop-shadow(0 14px 22px #000d) drop-shadow(0 0 13px #28d7f259); transform: scale(1.05); }
.portal-store-item.is-collectible.rarity-epic .portal-store-collectible { background: radial-gradient(circle, #d6ad4b30, transparent 68%); }
.portal-store-item.is-collectible.rarity-legendary .portal-store-collectible { background: radial-gradient(circle, #fff0a845, #d6ad4b13 42%, transparent 70%); }
.portal-payday-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-bottom: 12px; background: #4fd6ff20; }
.portal-payday-groups > div { padding: 9px 11px; background: #07182a; }
.portal-payday-groups span { display: block; color: var(--muted); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.portal-payday-groups strong { color: #71ffd4; font-size: .78rem; }
.portal-payday-groups strong.is-negative { color: #ff9a9a; }

.portal-career-level { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.portal-career-level strong { color: #fff0a8; font-size: 1.15rem; text-transform: uppercase; }
.portal-career-level span { color: #28d7f2; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.portal-career-level small { color: var(--muted); font-weight: 800; }
.portal-level-progress { width: min(420px,100%); height: 5px; margin-top: 8px; overflow: hidden; background: #ffffff17; }
.portal-level-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#28d7f2,#fff0a8); transition: width .45s ease; }
.career-payday-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 18px; opacity: 0; background: rgba(1, 7, 14, .9); backdrop-filter: blur(10px); transition: opacity .25s ease; }
.career-payday-overlay.is-visible { opacity: 1; }
.career-payday-overlay section { position: relative; width: min(620px, 100%); overflow: hidden; padding: 38px; border: 1px solid #d6ad4b; border-top: 5px solid #28d7f2; border-radius: 4px; text-align: center; color: #fff; background: radial-gradient(circle at 50% 15%, #0a628060, transparent 35%), linear-gradient(135deg, #061426, #091f34 65%, #3b2d0e); box-shadow: 0 35px 90px #000a, inset 0 -1px #fff0a87d; transform: translateY(20px) scale(.98); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.career-payday-overlay.is-visible section { transform: translateY(0) scale(1); }
.career-payday-overlay section::before { content: ""; position: absolute; inset: 0; opacity: .16; background: repeating-linear-gradient(110deg, transparent 0 24px, #fff0a8 25px 26px, transparent 27px 52px); pointer-events: none; }
.career-payday-overlay section > * { position: relative; z-index: 1; }
.career-payday-overlay section > span { color: #fff0a8; font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.career-payday-overlay h2 { margin: 7px 0 3px; font: 950 clamp(2.4rem, 8vw, 5rem)/.9 var(--display); text-transform: uppercase; }
.career-payday-overlay section > p { margin: 0; color: #b8cad8; text-transform: uppercase; }
.career-payday-result { display: grid; gap: 5px; margin: 28px 0 16px; padding: 24px; border: 1px solid #4fd6ff54; background: #020b14a8; }
.career-payday-result small,.career-payday-summary small { color: #9db1c1; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.career-payday-result strong { color: #71ffd4; font: 950 clamp(2.4rem, 8vw, 4.6rem)/1 var(--display); }
.career-payday-result strong.is-negative { color: #ff9a9a; }
.career-payday-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }
.career-payday-summary div { display: grid; gap: 5px; padding: 16px; background: #020b148c; }
.career-payday-summary strong { color: #fff0a8; font-size: 1.35rem; }
.career-payday-overlay button { min-width: 220px; }

@media (prefers-reduced-motion: reduce) {
  .career-payday-overlay,.career-payday-overlay section { transition: none; }
}

@media (max-width: 900px) {
  .portal-career-grid { grid-template-columns: 1fr; }
  .portal-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-career-loadout > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .portal-career-grid,.portal-store-grid { grid-template-columns: 1fr; }
  .portal-career-loadout > header { align-items: flex-start; flex-direction: column; }
  .portal-career-loadout > div { grid-template-columns: 1fr; }
  .portal-store-item { min-height: 190px; }
  .career-payday-overlay section { padding: 28px 18px; }
  .career-payday-summary { grid-template-columns: 1fr; }
}
.portal-casino-entry{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 26px;margin:14px 0;border:1px solid #c89b34;border-left:5px solid #1bd8f2;background:linear-gradient(105deg,#06131f,#0b3040 55%,#161409);color:#fff;text-decoration:none;text-transform:uppercase;box-shadow:0 10px 30px #0007}.portal-casino-entry span{color:#e7bb4b;font-size:11px;font-weight:900}.portal-casino-entry strong{font-size:22px}.portal-casino-entry small{color:#94adbb;text-transform:none}@media(max-width:720px){.portal-casino-entry{grid-template-columns:1fr;gap:6px}.portal-casino-entry small{line-height:1.4}}