/* Per-screen styles for the signed-in app. */

/* ---- Dashboard --------------------------------------------------------- */

/* Template picker — three cards, each a video still under an editorial scrim,
   with a category tag and the source filename. The card is the signature: a
   quiet still that warms and lifts on hover, revealing a preview affordance. */
.tmpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.tmpl {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.tmpl:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 160, 99, 0.32);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.tmpl__shot {
  position: relative;
  /* 16:9, matching the clips (all three are 1920x1080/1280x720). The old
     fixed 200px height made the well ~2.6:1 on wide screens and cover-crop
     cut a third of every frame — presenters lost their heads (owner flagged
     it, 2026-07-25). Aspect-locked, the video fits the frame exactly. */
  aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(150deg, #223026 0%, #12160f 100%);
}
/* The looping template clip fills the tile and scales gently on hover, under
   the scrim so the tag and filename stay legible. */
.tmpl__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.tmpl:hover .tmpl__vid { transform: scale(1.05); }
/* Editorial scrim: dark at the base for the filename, a touch at the top for
   the tag, and clear through the middle so the footage reads. */
.tmpl__shot::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(8, 7, 5, 0.85) 0%, rgba(8, 7, 5, 0) 42%),
    linear-gradient(to bottom, rgba(8, 7, 5, 0.45) 0%, rgba(8, 7, 5, 0) 28%);
  pointer-events: none;
}

.tmpl__tag {
  position: absolute; top: 13px; left: 13px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 10, 8, 0.55); color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
}
.tmpl__tag.is-popular { color: var(--gold-bright); border-color: rgba(201, 160, 99, 0.4); }
.tmpl__tag.is-sports { color: #86d2ff; border-color: rgba(134, 210, 255, 0.35); }
.tmpl__tag.is-flagship { color: #e6c98f; border-color: rgba(230, 201, 143, 0.4); }

.tmpl__file {
  position: absolute; left: 14px; bottom: 13px; right: 14px; z-index: 2;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tmpl__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.tmpl__t { margin: 0; font-family: var(--font-display); font-size: 23px; font-weight: 400; letter-spacing: 0.01em; color: var(--cream); }
.tmpl__d { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.5); }

.tmpl__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 22px; }
.tmpl__credits { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.tmpl__credits b { font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.tmpl__credits .icon { width: 13px; color: var(--gold); }

.tmpl__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206; font-size: 12px; font-weight: 600; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  transition: transform var(--hover) var(--ease), box-shadow var(--hover) var(--ease);
}
.tmpl__btn .icon { width: 13px; transition: transform var(--hover) var(--ease); }
.tmpl__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201, 160, 99, 0.3); }
.tmpl__btn:hover .icon { transform: translateX(3px); }

/* Recent projects — compact 4-up thumbnail row. */
.recents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Display only — these are a preview of recent work, not links. The hover
   lift went with the anchor: an element that rises under the cursor reads as
   clickable, which is exactly what it is not. */
.recent { padding: 0 0 14px; overflow: hidden; }
.recent__shot {
  position: relative; display: grid; place-items: center;
  /* 16:9 like the stills (all four ds-*.jpg are 760x424) — the fixed 120px
     height cover-cropped nearly half of each picture. Same owner-requested
     fix as .tmpl__shot above. */
  aspect-ratio: 16 / 9; background: linear-gradient(158deg, #2b2a26, #14130f);
  background-size: cover; background-position: center;
}
.recent__shot .play { width: 40px; height: 40px; }
.recent__shot .play .icon { width: 14px; }
.recent__n { margin: 12px 14px 5px; font-size: 13.5px; font-weight: 500; color: var(--white); }
.recent__m { margin: 0 14px; font-size: 11.5px; color: rgba(255, 255, 255, 0.42); }

/* Two-box dashboard header: Face Swap (left) and PropAI (right), each with a
   working upload dropzone. */
.dashboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.dashbox {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.dashbox__head { display: flex; align-items: flex-start; gap: 13px; }

.dashbox__i {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px;
  background: rgba(201, 160, 99, 0.12);
  color: var(--gold);
}
.dashbox__i .icon { width: 19px; }

.dashbox__t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16.5px; font-weight: 500; color: var(--white); }
.dashbox__tag {
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid rgba(201, 160, 99, 0.32);
  background: rgba(201, 160, 99, 0.09);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold);
}
.dashbox__s { margin: 5px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.48); }

/* The empty upload column. A real <label> over a hidden file input, so a
   click opens the picker; interactive.ts adds drag-drop and filename echo. */
.dashbox__drop {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px;
  min-height: 150px;
  padding: 22px 16px;
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease);
}
.dashbox__drop:hover,
.dashbox__drop.is-drag {
  border-color: rgba(201, 160, 99, 0.5);
  background: rgba(201, 160, 99, 0.05);
}
.dashbox__dropi {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7);
}
.dashbox__dropi .icon { width: 17px; }
.dashbox__dropt { font-size: 14px; font-weight: 500; color: var(--white); }
.dashbox__drops { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.42); }
.dashbox__drops u { color: var(--gold); }
.dashbox__drop.is-filled .dashbox__dropi { background: rgba(63, 158, 77, 0.2); color: #8fdc63; }

.hero-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 240px;
  overflow: hidden;
}

/* Triple-scoped so app-polish's `.app .shot { position: relative }` cannot
   outrank OR tie it (polish imports later, so a tie loses) — if this
   loses, the art becomes a grid item, steals the right column, and wraps
   the generating card onto its own row. */
.app .hero-banner .hero-banner__art {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Left-to-right scrim so the copy stays legible over the full-bleed image. */
.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to right,
    rgba(10, 9, 7, 0.92) 0%,
    rgba(10, 9, 7, 0.6) 34%,
    rgba(10, 9, 7, 0.15) 60%,
    rgba(10, 9, 7, 0) 100%
  );
  pointer-events: none;
}

.hero-banner__copy {
  position: relative;
  z-index: 1;
  padding: 26px 30px;
}

.tagpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 13px;
  color: var(--white);
}

.tagpill .icon { width: 13px; color: var(--gold); }

.hero-banner__copy h2 {
  margin: 18px 0 21px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--white);
}

.hero-banner__copy h2 em { font-style: normal; color: var(--gold-bright); }

.hero-banner__btns { display: flex; gap: 12px; }

.gencard {
  position: relative;
  z-index: 1;
  margin: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(10, 9, 7, 0.82);
}

.gencard h3 { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--white); }
.gencard__name { margin: 12px 0 9px; font-size: 13.5px; color: rgba(255,255,255,0.62); }
.gencard__time { margin: 8px 0 12px; font-size: 12px; color: rgba(255,255,255,0.42); }
.gencard__thumb { display: block; height: 76px; border-radius: 8px; }

.genrow { display: flex; align-items: center; gap: 11px; }
.bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.bar--lg { display: block; height: 7px; margin-top: 12px; }
.genpct { font-size: 12.5px; color: rgba(255,255,255,0.75); }

.toolrow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
}

.toolmini {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  text-decoration: none;
  transition: border-color var(--hover) var(--ease), transform var(--hover) var(--ease);
}

.toolmini:hover { transform: translateY(-2px); border-color: rgba(201,160,99,0.3); }

.toolmini__i {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(201,160,99,0.1);
  color: var(--gold);
}
.toolmini__i .icon { width: 19px; }
.toolmini__x { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.toolmini__t { font-size: 14.5px; font-weight: 500; color: var(--white); }
.toolmini__s { font-size: 12px; color: rgba(255,255,255,0.45); }

.dash-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; }

.workrow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.workcard { padding: 0 0 14px; overflow: hidden; }
.workcard__shot { position: relative; display: block; height: 108px; }
.workcard__shot b {
  position: absolute; top: 8px; right: 9px;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(0,0,0,0.6); font-size: 11px; color: #fff;
}
.workcard__t { margin: 12px 12px 9px; font-size: 13.5px; color: var(--white); }
.workcard .genrow { margin: 0 12px; }
.workcard__go { display: block; margin: 11px 12px 0; font-size: 12.5px; color: var(--gold); text-decoration: none; }

.newcard {
  display: grid; place-content: center; justify-items: center; gap: 9px;
  border-style: dashed; text-decoration: none;
  color: rgba(255,255,255,0.55); font-size: 13px;
}
.newcard .icon { width: 24px; }

.reclist { display: flex; flex-direction: column; gap: 11px; }
.recrow { display: flex; align-items: center; gap: 13px; padding: 11px; }
.recrow__shot { position: relative; display: grid; place-items: center; width: 96px; height: 56px; border-radius: 8px; flex-shrink: 0; }
.recrow__shot .play { width: 26px; height: 26px; }
.recrow__shot .play .icon { width: 11px; }
.recrow__x { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.recrow__t { font-size: 14.5px; color: var(--white); }
.recrow__m { font-size: 12px; color: rgba(255,255,255,0.45); }
.recrow__w { font-size: 12px; color: rgba(255,255,255,0.4); white-space: nowrap; }
.recrow__d { color: rgba(255,255,255,0.4); }
.recrow__d .icon { width: 16px; }

/* ---- Create Video ------------------------------------------------------ */

/* All scoped to .app — the marketing fourth page owns a different `.step`
   (a bordered card with an absolutely-positioned corner numeral) and it
   was leaking in here, stacking the number on top of its own label. */
.app .steps { display: flex; align-items: center; gap: 14px; padding: 16px 22px; margin-bottom: 16px; }
.app .step {
  display: flex;
  align-items: center;
  gap: 13px;
  /* Explicitly undo the fourth page's card treatment. */
  position: static;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.app .step__n {
  position: static;
  display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; background: rgba(255,255,255,0.08);
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 0;
  color: rgba(255,255,255,0.6);
}
.app .step.is-on .step__n { background: linear-gradient(150deg, var(--gold-bright), var(--gold)); color: #1a1206; font-weight: 600; }
.app .step__x { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app .step__x b { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.55); white-space: nowrap; }
.app .step.is-on .step__x b { color: var(--white); }
.app .step__x i { font-size: 11.5px; color: rgba(255,255,255,0.38); font-style: normal; white-space: nowrap; }
.app .step__line { flex: 1; height: 2px; background: rgba(255,255,255,0.09); }
.app .step__line.is-on { background: linear-gradient(90deg, var(--gold), rgba(201,160,99,0.15)); }

.create3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.create3__col { padding: 20px 20px; }
.create3__col + .create3__col { border-left: 1px solid rgba(255,255,255,0.07); }

.colhead { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 500; color: var(--white); }
.colhead__n {
  display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold));
  color: #1a1206; font-size: 12px; font-weight: 600;
}
.colsub { margin: 10px 0 16px; font-size: 12.5px; color: rgba(255,255,255,0.48); }

.drops { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.drop {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 12px 14px; border: 1px dashed rgba(255,255,255,0.14); border-radius: 12px;
  cursor: pointer; transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease);
}
.drop:hover, .drop.is-drag { border-color: rgba(201,160,99,0.5); background: rgba(201,160,99,0.05); }
.drop.is-filled { border-style: solid; border-color: rgba(63,158,77,0.4); }
.drop.is-filled .drop__i { background: rgba(63,158,77,0.2); color: #8fdc63; }
.drop__i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); }
.drop__i .icon { width: 15px; }
.drop b { margin-top: 12px; font-size: 13.5px; font-weight: 500; color: var(--white); }
.drop p { margin: 7px 0 0; font-size: 11.5px; color: rgba(255,255,255,0.45); }
.drop u { color: var(--gold); }
.drop__meta { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); width: 100%; font-size: 11px; color: rgba(255,255,255,0.32); }

.tips { margin-top: 14px; padding: 14px; border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; }
.tips__t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; color: var(--gold-bright); }
.tips__t .icon { width: 13px; }
.tips__row { display: flex; align-items: center; gap: 14px; }
.tips__row p { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.5); }
.tips__faces { display: flex; gap: 6px; flex-shrink: 0; }
.tips__faces i { position: relative; width: 46px; height: 56px; border-radius: 8px; }
.tips__faces i::after {
  content: ''; position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
}
.tips__faces .ok::after { background: #3f9e4d; }
.tips__faces .no::after { background: #c2413a; }

.fieldlab { margin: 18px 0 9px; font-size: 12.5px; color: rgba(255,255,255,0.55); }
.chips4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chips3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ratio, .dur {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px; border: 1px solid rgba(255,255,255,0.1); border-radius: 9px;
}
.ratio b, .dur b { font-size: 13px; font-weight: 500; color: var(--white); display: flex; align-items: center; gap: 4px; }
.ratio i, .dur i { font-size: 10.5px; font-style: normal; color: rgba(255,255,255,0.4); }
.dur b .icon { width: 12px; color: var(--gold); }
.ratio.is-on, .dur.is-on { border-color: var(--gold); background: rgba(201,160,99,0.09); }

.estcost { margin-top: 16px; padding: 16px; }
.estcost__top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,0.6); }
.estcost__n { margin: 9px 0 0; font-size: 31px; font-weight: 500; color: var(--white); }
.estcost__n i { font-size: 14px; font-style: normal; color: rgba(255,255,255,0.55); }

.field { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.field__lab { font-size: 12.5px; color: rgba(255,255,255,0.6); white-space: nowrap; }
.select {
  display: inline-flex; align-items: center; gap: 9px; flex: 1;
  height: 40px; padding: 0 13px;
  border: 1px solid rgba(255,255,255,0.11); border-radius: 10px;
  background: rgba(255,255,255,0.03); font-size: 13px; color: var(--white);
}
.select .icon { margin-left: auto; width: 11px; color: rgba(255,255,255,0.5); }
.select em { font-size: 11.5px; font-style: normal; color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.12); padding: 2px 7px; border-radius: 5px; }
.select--sm { flex: 0 0 auto; height: 40px; font-size: 13px; border-radius: 9px; }
.play--sm { width: 26px; height: 26px; }
.play--sm .icon { width: 11px; }
.voiceav { width: 26px; height: 26px; border-radius: 50%; }

.ownvoice, .applyrow { display: flex; gap: 12px; padding: 14px; margin-top: 12px; align-items: flex-start; }
.applyrow { align-items: center; }
.ownvoice__i { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: rgba(201,160,99,0.12); color: var(--gold); }
.ownvoice__i .icon { width: 12px; }
.ownvoice__t { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--white); }
.ownvoice__s { margin: 6px 0 0; font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,0.48); }
.ownvoice__m { margin: 6px 0 0; font-size: 11px; color: rgba(255,255,255,0.3); }
.ownvoice u { color: var(--gold); }
.newtag { display: inline-block; margin-left: 6px; padding: 2px 7px; border: 1px solid rgba(201,160,99,0.4); border-radius: 5px; font-size: 9.5px; letter-spacing: 0.08em; color: var(--gold-bright); }

.toggle { width: 46px; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.12); flex-shrink: 0; margin-left: auto; position: relative; transition: background-color var(--hover) var(--ease); }
.toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--hover) var(--ease); }
.toggle.is-on { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.toggle.is-on i { transform: translateX(20px); }

.genbar {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 58px; margin-top: 16px; border-radius: 12px;
  background: linear-gradient(100deg, #e8caa0, #cfa96a 60%, #b9924f);
  color: #1a1206; font-size: 16px; font-weight: 600;
}
.genbar__main { display: flex; align-items: center; gap: 11px; }
.genbar__main .icon { width: 18px; }
.genbar__draft { position: absolute; right: 14px; background: rgba(20,15,8,0.55); color: #fff; border-color: rgba(255,255,255,0.2); }

.trustrow { display: flex; justify-content: center; gap: 60px; margin-top: 22px; }
.trustrow span { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.trustrow .icon { width: 20px; color: var(--gold); }
.trustrow b { display: block; color: var(--white); font-weight: 500; }
.trustrow i { display: block; font-style: normal; font-size: 12px; color: rgba(255,255,255,0.42); }

/* ---- FIFA Pro Generator ------------------------------------------------- */

/* A focused single-tool page: the standard topbar steps aside so the generator
   owns the frame, the way the reference shows it. */
.main:has(.fifagen) .topbar { display: none; }

.fifagen { max-width: 680px; margin: 0 auto; padding-top: 4px; }

.fifagen__back {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 22px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 11px;
  color: rgba(255,255,255,0.75); text-decoration: none;
  transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease);
}
.fifagen__back:hover { border-color: rgba(201,160,99,0.4); background: rgba(201,160,99,0.06); }
.fifagen__backi { width: 12px; transform: rotate(90deg); }

.fifagen__head { display: flex; align-items: center; gap: 16px; }
.fifagen__badge {
  display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 15px;
  background: linear-gradient(150deg, rgba(201,160,99,0.28), rgba(201,160,99,0.1));
  border: 1px solid rgba(201,160,99,0.3);
  color: var(--gold-bright);
}
.fifagen__badge .icon { width: 26px; }
.fifagen__title { margin: 0; font-family: var(--font-display); font-size: 32px; font-weight: 400; color: var(--white); }
.fifagen__title em { font-style: italic; color: var(--gold-bright); }
.fifagen__sub { margin: 6px 0 0; font-size: 14px; color: rgba(255,255,255,0.5); }

.fifagen__meta { display: flex; flex-wrap: wrap; gap: 22px; margin: 20px 0 4px; }
.fifagen__meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.55); }
.fifagen__meta .icon { width: 14px; color: var(--gold); }

.fifagen__steps { display: flex; align-items: center; gap: 10px; margin: 22px 0 26px; }
.fstep {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.fstep.is-on {
  background: linear-gradient(150deg, var(--gold-bright), var(--gold));
  border-color: transparent; color: #1a1206; font-weight: 600;
}
.fstep__sep { color: rgba(255,255,255,0.28); font-size: 14px; }

.fifagen__lab {
  margin: 0 0 11px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
}

.fifagen__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  min-height: 190px; padding: 30px 20px;
  border: 1.5px dashed rgba(255,255,255,0.16); border-radius: 16px;
  background: rgba(255,255,255,0.015); cursor: pointer;
  transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease);
}
.fifagen__drop:hover, .fifagen__drop.is-drag { border-color: rgba(201,160,99,0.5); background: rgba(201,160,99,0.05); }
.fifagen__dropi { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.fifagen__dropi .icon { width: 20px; }
.fifagen__dropt { font-size: 14.5px; font-weight: 500; color: var(--white); }
.fifagen__drops { margin: 0; font-size: 13px; color: rgba(255,255,255,0.5); }
.fifagen__drops u { color: var(--gold); }
.fifagen__drop.is-filled .fifagen__dropi { background: rgba(63,158,77,0.2); color: #8fdc63; }
.fifagen__hint { margin: 12px 0 0; text-align: center; font-size: 12px; color: rgba(255,255,255,0.34); }

.fifagen__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 26px; }
.fifagen__cols .select { display: flex; width: 100%; height: 48px; }

.select--team { position: relative; cursor: pointer; }
.select--team select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0 34px 0 13px;
  border: none; border-radius: 10px; background: transparent;
  color: var(--white); font-size: 13px; font-family: var(--font-ui);
  appearance: none; cursor: pointer;
}
.select--team select:focus { outline: none; }
.select--team select option,
.select--team select optgroup { background: #17130f; color: var(--white); }
.select--team .icon { pointer-events: none; }

.fifagen__fmt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fmt {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02);
  font-size: 14px; color: rgba(255,255,255,0.7); cursor: pointer;
  transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease);
}
.fmt .icon { width: 16px; }
.fmt:hover { border-color: rgba(201,160,99,0.35); }
.fmt.is-on {
  background: linear-gradient(150deg, var(--gold-bright), var(--gold));
  border-color: transparent; color: #1a1206; font-weight: 600;
}

.fifagen__gen { gap: 10px; text-decoration: none; }
.fifagen__gen .icon { width: 18px; }
.fifagen__foot { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,0.38); }

/* ---- My Videos ---------------------------------------------------------- */

.readybar { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; margin-bottom: 22px; border-color: rgba(126,217,87,0.16); }
.readybar__shot { position: relative; width: 152px; height: 68px; border-radius: 10px; flex-shrink: 0; overflow: hidden; }
.readybar__ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(63,158,77,0.22); color: #8fdc63; flex-shrink: 0; }
.readybar__ok .icon { width: 16px; }
.readybar__x { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.readybar__x b { font-size: 16px; font-weight: 500; color: var(--white); }
.readybar__meta { font-size: 12.5px; font-style: normal; color: rgba(255,255,255,0.45); }

/* Progress track — only present while generating. */
.readybar__track { height: 6px; margin-top: 4px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.readybar__fill { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width 220ms linear; }
.readybar__pct { font-size: 15px; font-weight: 600; color: var(--gold-bright); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Spinner that sits over the thumbnail while the job runs. */
.readybar__spin { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.25); border-top-color: var(--gold-bright); animation: readyspin 0.8s linear infinite; }
@keyframes readyspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .readybar__spin { animation: none; } }

/* State switching. Generating: spinner + track + percentage, no check, no
   Play/Download. Ready: check + action buttons, no spinner/track/percentage. */
.readybar.is-generating .readybar__ok,
.readybar.is-generating .readybar__play,
.readybar.is-generating .readybar__dl { display: none; }
.readybar.is-ready .readybar__spin,
.readybar.is-ready .readybar__track,
.readybar.is-ready .readybar__pct { display: none; }
.readybar.is-ready { border-color: rgba(126,217,87,0.16); }
.readybar.is-generating { border-color: rgba(201,160,99,0.22); }

.filterbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.tabs { display: flex; gap: 4px; padding: 5px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.02); }
.tab { padding: 9px 18px; border-radius: 9px; font-size: 14px; color: rgba(255,255,255,0.55); cursor: pointer; }
.tab.is-on { background: rgba(255,255,255,0.07); color: var(--white); }
.filters { display: flex; gap: 9px; }
.iconbtn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.11); border-radius: 9px; color: rgba(255,255,255,0.6); }
.iconbtn .icon { width: 17px; }

.vidgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.vidcard { padding: 0 0 12px; overflow: hidden; transition: transform var(--hover) var(--ease); }
.vidcard:hover { transform: translateY(-3px); }
.vidcard__shot { position: relative; display: grid; place-items: center; height: 160px; }
.vidcard__dur, .vidcard__tag {
  position: absolute; top: 9px; padding: 3px 8px; border-radius: 5px;
  background: rgba(0,0,0,0.62); font-size: 11px; font-weight: 500; color: #fff;
}
.vidcard__dur { left: 9px; }
.vidcard__tag { right: 9px; font-size: 9.5px; letter-spacing: 0.06em; }
.vidcard__shot .play { width: 44px; height: 44px; }
.vidcard__shot .play .icon { width: 16px; }
.vidcard__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold-bright) 55%, rgba(255,255,255,0.1) 55%); }
.vidcard__n { margin: 13px 13px 8px; font-size: 14.5px; color: var(--white); }
.vidcard__m { display: flex; align-items: center; gap: 6px; margin: 0 13px; font-size: 11.5px; color: rgba(255,255,255,0.42); }
.vidcard__m em { font-style: normal; opacity: 0.5; }
.status { margin-left: auto; padding: 2px 7px; border-radius: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; }
.status--ready { border: 1px solid rgba(126,217,87,0.4); color: #8fdc63; }
.status--draft { border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.6); }
.status--processing { border: 1px solid rgba(110,150,255,0.45); color: #8fa9ff; }
.vidcard__d { color: rgba(255,255,255,0.4); }
.vidcard__d .icon { width: 14px; }

/* Play + Download on every finished (READY) card. Rendered only for READY
   videos in pages.ts, so drafts and in-progress cards keep just the kebab.
   Requested addition — Play (gold) is the primary action, Download the
   quiet ghost beside it, both inset to the card's 13px gutter. */
.vidcard__acts { display: flex; gap: 8px; margin: 12px 13px 0; }
.vidcard__act {
  flex: 1 1 0;
  height: 34px;
  padding: 0;
  gap: 7px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
}
.vidcard__act .icon { width: 13px; }

.pager { display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
.pagebtn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; font-size: 14px; color: rgba(255,255,255,0.65); }
.pagebtn.is-on { background: rgba(201,160,99,0.16); border-color: rgba(201,160,99,0.4); color: var(--gold-bright); }
.pagebtn .icon { width: 11px; }
.rot-r { transform: rotate(90deg); }
.rot-l { transform: rotate(-90deg); }

/* ---- AI Tools ------------------------------------------------------------ */

.toolgrid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 18px; }
.toolcard { position: relative; padding: 0 0 16px; overflow: hidden; text-decoration: none; transition: transform var(--hover) var(--ease), border-color var(--hover) var(--ease); }
.toolcard:hover { transform: translateY(-3px); border-color: rgba(201,160,99,0.3); }
.toolcard__art { display: block; height: 232px; }
.toolcard__i {
  display: grid; place-items: center; width: 42px; height: 42px;
  margin: -21px 0 0 16px; position: relative;
  border: 1px solid rgba(201,160,99,0.3); border-radius: 11px;
  background: rgba(16,13,10,0.92); color: var(--gold);
}
.toolcard__i .icon { width: 19px; }
.toolcard__t { display: block; margin: 14px 16px 0; font-size: 16px; font-weight: 500; color: var(--white); }
.toolcard__row { display: flex; align-items: center; justify-content: space-between; margin: 8px 16px 0; }
.toolcard__row i { font-size: 12.5px; font-style: normal; color: rgba(255,255,255,0.45); }
.toolcard__go { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(201,160,99,0.35); border-radius: 50%; color: var(--gold); flex-shrink: 0; }
.toolcard__go .icon { width: 13px; }

/* ---- My Credits ---------------------------------------------------------- */

.credtop { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.credtop--single { grid-template-columns: minmax(0,1fr); }
.balcard { padding: 22px 24px; }
.balcard__lab { margin: 0; font-size: 14px; color: rgba(255,255,255,0.6); }
.balcard__n { display: flex; align-items: center; gap: 13px; margin: 12px 0 0; font-size: 44px; font-weight: 500; color: var(--white); }
.balcard__n .gem .icon { width: 34px; }
.balcard__n i { font-size: 15px; font-style: normal; color: rgba(255,255,255,0.5); }
.balcard__foot { display: flex; justify-content: space-between; margin-top: 20px; font-size: 12.5px; color: rgba(255,255,255,0.45); }
.balcard__left { color: var(--gold-bright); }

.procard { position: relative; padding: 22px 24px; }
.procard__t { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; font-weight: 500; color: var(--white); }
.procard__t .icon { width: 19px; color: var(--gold); }
.procard__m { margin: 11px 0 0; font-size: 13px; color: rgba(255,255,255,0.5); }
.procard__go { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: rgba(255,255,255,0.4); }
.procard__go .icon { width: 18px; }

.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.statcard { display: flex; align-items: center; gap: 15px; padding: 20px 22px; }
.statcard__i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,0.05); color: var(--gold); flex-shrink: 0; }
.statcard__i .icon { width: 19px; }
.statcard i { display: block; font-size: 13px; font-style: normal; color: rgba(255,255,255,0.5); }
.statcard b { display: block; margin-top: 5px; font-size: 25px; font-weight: 500; color: var(--white); }
.statcard b em { font-size: 13px; font-style: normal; font-weight: 400; color: rgba(255,255,255,0.5); }

.histlist { padding: 4px 0; }
.histrow { display: flex; align-items: center; gap: 15px; padding: 13px 20px; }
.histrow + .histrow { border-top: 1px solid rgba(255,255,255,0.05); }
.histrow__i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.histrow__i .icon { width: 15px; }
.histrow__i.up { background: rgba(201,160,99,0.14); color: var(--gold); }
.histrow__i.down { background: rgba(126,217,87,0.14); color: #8fdc63; }
.histrow__x { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.histrow__x b { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--white); }
.histrow__x i { font-size: 12px; font-style: normal; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.5); }
.histrow__v { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; color: #e07a70; }
.histrow__v.pos { color: #8fdc63; }
.histrow__d { color: rgba(255,255,255,0.35); }
.histrow__d .icon { width: 15px; }

/* ---- Buy-credits promo popup (promo__*) ----------------------------------- */

.promo {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity 200ms var(--ease);
}
.promo[hidden] { display: none; }
.promo.is-open { opacity: 1; }
.promo__scrim { position: absolute; inset: 0; background: rgba(4, 3, 2, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.promo__card {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 37% 1fr;
  grid-template-areas: "gem body" "perks perks";
  column-gap: 30px;
  width: min(880px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  padding: 34px 38px 26px;
  border-radius: 24px;
  background:
    radial-gradient(90% 70% at 78% -12%, rgba(201, 160, 99, 0.2), transparent 52%),
    linear-gradient(165deg, #15110c, #0a0806 68%);
  box-shadow:
    0 50px 110px -34px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(201, 160, 99, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 60px -20px rgba(201, 160, 99, 0.14);
  transform: translateY(16px) scale(0.975); transition: transform 260ms var(--ease);
  animation: promoglow 3.6s ease-in-out infinite;
}
@keyframes promoglow {
  0%, 100% {
    box-shadow:
      0 50px 110px -34px rgba(0, 0, 0, 0.92),
      0 0 0 1px rgba(201, 160, 99, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 0 60px -20px rgba(201, 160, 99, 0.14);
  }
  50% {
    box-shadow:
      0 50px 110px -34px rgba(0, 0, 0, 0.92),
      0 0 0 1px rgba(201, 160, 99, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 70px -18px rgba(201, 160, 99, 0.22),
      0 0 60px -12px rgba(201, 160, 99, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) { .promo__card { animation: none; } }

/* Corner badge — the card scrolls internally on short viewports, so a
   diagonal ribbon that bleeds past the edge would get clipped by that
   overflow. A pill anchored just inside the corner reads the same way
   without depending on the card's bounding box. */
.promo__ribbon {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}
/* Gold hairline that reads as a thin gradient bezel rather than a flat border. */
.promo__card::before {
  content: ''; position: absolute; inset: 0; border-radius: 24px; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(240, 205, 140, 0.55), rgba(201, 160, 99, 0.08) 40%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.promo.is-open .promo__card { transform: translateY(0) scale(1); }

.promo__x {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%;
  background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.7); cursor: pointer;
  transition: background-color var(--hover) var(--ease), color var(--hover) var(--ease);
}
.promo__x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.promo__x .icon { width: 16px; }

.promo__gem { grid-area: gem; position: relative; display: grid; place-items: center; }
.promo__gem::before {
  content: ''; position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 84%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 200, 143, 0.38), transparent 60%);
}
/* Glowing podium the gem floats above. */
.promo__gem::after {
  content: ''; position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  width: 58%; height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(230, 200, 143, 0.5), rgba(201, 160, 99, 0.14) 45%, transparent 72%);
  filter: blur(2px);
}
.promo__gem img {
  position: relative; z-index: 1; width: 74%; max-width: 210px; object-fit: contain;
  filter: drop-shadow(0 22px 50px rgba(230, 200, 143, 0.55));
  animation: promofloat 5.5s ease-in-out infinite;
}
@keyframes promofloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .promo__gem img { animation: none; } }

.promo__body { grid-area: body; min-width: 0; padding-top: 4px; }
.promo__tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border: 1px solid rgba(201, 160, 99, 0.4); border-radius: 999px;
  background: rgba(201, 160, 99, 0.1); color: var(--gold-bright);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.promo__tag .icon { width: 13px; }
.promo__t { margin: 16px 0 0; font-family: var(--font-display); font-size: 42px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.03; color: var(--white); }
.promo__t em {
  font-style: normal;
  background: linear-gradient(180deg, #f6e0b0 5%, var(--gold-bright) 55%, #b98d3f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.promo__s { margin: 9px 0 22px; font-size: 14.5px; color: rgba(255, 255, 255, 0.55); }

.promo__price {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 22px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(201, 160, 99, 0.07), rgba(0, 0, 0, 0.32));
  border: 1px solid rgba(201, 160, 99, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.promo__lab { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.promo__old { margin: 2px 0 12px; font-size: 20px; color: rgba(255, 255, 255, 0.4); text-decoration: line-through; }
.promo__new { margin: 2px 0 0; font-family: var(--font-display); font-size: 34px; font-weight: 500; color: var(--gold-bright); line-height: 1; }
.promo__off { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.promo__seal {
  position: relative; display: grid; place-content: center; text-align: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(201, 160, 99, 0.22), rgba(201, 160, 99, 0.05) 70%);
  border: 1.5px solid rgba(240, 205, 140, 0.6);
  box-shadow: 0 0 0 4px rgba(201, 160, 99, 0.06), 0 8px 22px -10px rgba(201, 160, 99, 0.5);
}
/* Inner dotted ring — the "stamp" detail. */
.promo__seal::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  border: 1.5px dotted rgba(240, 205, 140, 0.45);
}
.promo__seal b { font-family: var(--font-display); font-size: 27px; font-weight: 500; color: var(--white); line-height: 1; }
.promo__seal i { display: block; margin-top: 2px; font-size: 11px; font-style: normal; letter-spacing: 0.22em; text-indent: 0.22em; color: var(--gold-bright); }
.promo__off em { font-size: 12px; font-style: normal; color: var(--gold-bright); }

.promo__credits {
  display: flex; align-items: center; gap: 14px; margin-top: 12px;
  padding: 14px 22px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(201, 160, 99, 0.07), rgba(0, 0, 0, 0.32));
  border: 1px solid rgba(201, 160, 99, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.promo__credits .gemimg { width: 40px; height: 40px; }
.promo__creditsX { display: flex; flex-direction: column; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.promo__creditsX b { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--white); line-height: 1.1; }
.promo__creditsX i { margin-top: 3px; font-size: 12.5px; font-style: normal; color: rgba(255, 255, 255, 0.45); }

.promo__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; margin-top: 16px; border-radius: 13px;
  background: linear-gradient(100deg, var(--gold-bright), var(--gold));
  color: #1a1206; font-size: 16px; font-weight: 700; text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(201, 160, 99, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--hover) var(--ease), box-shadow var(--hover) var(--ease);
}
.promo__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(201, 160, 99, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.promo__cta .icon { width: 17px; }
.promo__all {
  display: block; margin-top: 12px; text-align: center; text-decoration: none;
  font-size: 13px; color: rgba(255, 255, 255, 0.5);
  transition: color var(--hover) var(--ease);
}
.promo__all:hover { color: var(--gold-bright); text-decoration: underline; }

.promo__perks {
  grid-area: perks;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.promo__perk { display: flex; flex-direction: column; gap: 8px; }
.promo__perkI {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(201, 160, 99, 0.3); color: var(--gold-bright);
  background: radial-gradient(circle at 50% 30%, rgba(201, 160, 99, 0.16), rgba(201, 160, 99, 0.03));
}
.promo__perkI .icon { width: 17px; }
.promo__perkX b { display: block; font-size: 13.5px; font-weight: 500; color: var(--white); }
.promo__perkX i { display: block; margin-top: 4px; font-size: 12px; font-style: normal; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }

@media (max-width: 760px) {
  .promo__card { grid-template-columns: 1fr; grid-template-areas: "gem" "body" "perks"; }
  .promo__gem img { max-width: 150px; }
  .promo__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Help & Support (hs-*) ------------------------------------------------ */

.hs-hero {
  position: relative; overflow: hidden;
  padding: 30px 32px;
  background:
    radial-gradient(120% 160% at 85% -30%, rgba(201, 160, 99, 0.16), transparent 55%),
    linear-gradient(160deg, rgba(24, 20, 16, 0.6), rgba(11, 9, 8, 0.6));
}
.hs-hero h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--white); }
.hs-hero > p { margin: 8px 0 20px; font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.hs-search {
  display: flex; align-items: center; gap: 11px;
  max-width: 560px; height: 50px; padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease);
}
.hs-search:focus-within { border-color: rgba(201, 160, 99, 0.55); background: rgba(0, 0, 0, 0.4); }
.hs-search .icon { width: 18px; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.hs-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  color: var(--white); font-family: inherit; font-size: 14.5px;
}
.hs-search input::placeholder { color: rgba(255, 255, 255, 0.38); }

.hs-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.hs-topic {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 20px 22px 18px; text-decoration: none;
  transition: transform var(--hover) var(--ease), border-color var(--hover) var(--ease);
}
.hs-topic:hover { transform: translateY(-3px); border-color: rgba(201, 160, 99, 0.35); }
.hs-topic__i {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 11px; color: var(--gold-bright);
  background: rgba(201, 160, 99, 0.12); border: 1px solid rgba(201, 160, 99, 0.2);
}
.hs-topic__i .icon { width: 21px; }
.hs-topic b { font-size: 15.5px; font-weight: 500; color: var(--white); }
.hs-topic i { margin-top: 6px; font-size: 13px; font-style: normal; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }
.hs-topic__n {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 12.5px; color: var(--gold-bright);
}
.hs-topic__n .icon { width: 14px; transition: transform var(--hover) var(--ease); }
.hs-topic:hover .hs-topic__n .icon { transform: translateX(3px); }

.hs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 20px; }
.hs-side { display: flex; flex-direction: column; gap: 20px; }

.hs-faq { padding: 10px 26px; }
.hs-faq h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 500; color: var(--white); }
.hs-faqitem { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.hs-faqitem:last-child { border-bottom: none; }
.hs-faqitem summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 0; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 500; color: var(--white);
}
.hs-faqitem summary::-webkit-details-marker { display: none; }
.hs-faqitem__c { display: grid; place-items: center; color: rgba(255, 255, 255, 0.45); transition: transform var(--hover) var(--ease); flex-shrink: 0; }
.hs-faqitem__c .icon { width: 13px; }
.hs-faqitem[open] .hs-faqitem__c { transform: rotate(180deg); color: var(--gold-bright); }
.hs-faqitem p { margin: 0 0 18px; padding-right: 30px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); }

.hs-contact { padding: 26px 24px; text-align: center; }
.hs-contact__i {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 50%; color: var(--gold-bright);
  background: rgba(201, 160, 99, 0.12); border: 1px solid rgba(201, 160, 99, 0.22);
}
.hs-contact__i .icon { width: 22px; }
.hs-contact h3 { margin: 0; font-size: 16px; font-weight: 500; color: var(--white); }
.hs-contact > p { margin: 8px 0 18px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.55); }
.hs-contact__btn { width: 100%; }
.hs-contact__btn .icon { width: 15px; }
.hs-contact__rows { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.hs-contact__rows span { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.hs-contact__rows i { display: grid; place-items: center; color: var(--gold-bright); }
.hs-contact__rows .icon { width: 14px; }

.hs-status { display: flex; align-items: center; gap: 10px; padding: 16px 22px; font-size: 13px; color: rgba(255, 255, 255, 0.65); }
.hs-status__dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.16); }

@media (max-width: 1080px) {
  .hs-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Settings ------------------------------------------------------------- */

.setgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.setcol { display: flex; flex-direction: column; gap: 22px; }
.setblock { padding: 22px 24px; }
.setblock h3 { margin: 0 0 4px; font-size: 18px; font-weight: 500; color: var(--white); }

.profrow { display: flex; align-items: center; gap: 16px; padding: 18px 0; }
.who__av--lg { width: 56px; height: 56px; font-size: 21px; }
.profrow__x { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.profrow__x b { font-size: 17px; font-weight: 500; color: var(--white); }
.profrow__x i { display: flex; align-items: center; gap: 9px; font-size: 13px; font-style: normal; color: rgba(255,255,255,0.45); }

.setrow { display: flex; align-items: center; gap: 16px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.setrow__i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.05); color: var(--gold); flex-shrink: 0; }
.setrow__i .icon { width: 17px; }
.setrow__x { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.setrow__x b { font-size: 14.5px; font-weight: 500; color: var(--white); }
.setrow__x i { font-size: 12.5px; font-style: normal; color: rgba(255,255,255,0.45); }

.segmented { display: inline-flex; padding: 4px; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; background: rgba(255,255,255,0.03); }
.segmented span { padding: 7px 18px; border-radius: 999px; font-size: 13.5px; color: rgba(255,255,255,0.55); }
.segmented .is-on { background: linear-gradient(150deg, var(--gold-bright), var(--gold)); color: #1a1206; font-weight: 500; }
.chips4--sm { flex: 0 0 auto; display: inline-grid; grid-template-columns: repeat(4, 72px); }

.billrow { display: flex; align-items: center; gap: 16px; padding: 16px; margin-top: 14px; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; }
.billrow__i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(201,160,99,0.12); color: var(--gold); flex-shrink: 0; }
.billrow__i .icon { width: 18px; }

.danger { border-color: rgba(200,70,60,0.28); }
.danger .billrow { border-color: rgba(200,70,60,0.2); }
.danger__t { color: rgba(255,255,255,0.85) !important; }
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; flex-shrink: 0;
  border: 1px solid rgba(214,80,70,0.5); border-radius: 999px;
  background: rgba(214,80,70,0.08); color: #e07a70; font-size: 14px; text-decoration: none;
}
.btn-danger .icon { width: 15px; }

/* ---- Buy Credits ---------------------------------------------------------- */

.buywrap { text-align: center; padding-top: 6px; }

/* Declared here rather than borrowed from fourth.css — the app must not
   depend on a marketing stylesheet it has nothing else to do with. */
.app .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.app .eyebrow i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.buyeyebrow { justify-content: center; }
.buytitle { margin: 14px 0 0; font-family: var(--font-display); font-size: 62px; font-weight: 400; color: var(--cream); }
.buytitle em { font-style: italic; color: var(--gold-bright); }
.buysub { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.6); }
.buysub b { color: var(--gold-bright); font-weight: 500; }

.protoggle { display: flex; align-items: center; gap: 16px; max-width: 660px; margin: 30px auto 0; padding: 18px 22px; text-align: left; }
.protoggle__i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(201,160,99,0.12); color: var(--gold); flex-shrink: 0; }
.protoggle__i .icon { width: 20px; }

.packgrid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; margin-top: 34px; }
.pack { position: relative; padding: 34px 12px 22px; text-align: center; }
.pack.is-on { border-color: rgba(201,160,99,0.55); box-shadow: 0 0 34px rgba(201,160,99,0.14); }
.pack__flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold));
  color: #1a1206; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
}
.pack__gem { position: relative; display: inline-flex; color: var(--gold-bright); }
.pack__gem .icon { width: 40px; filter: drop-shadow(0 0 12px rgba(230,200,143,0.5)); }

/* Sparkle treatment shared by the pack gems and the large perk gem: a soft
   pulsing halo behind the stone and a few 4-point glints that twinkle around
   it. Pure CSS — no extra art. */
.gemfx .gemimg {
  position: relative; z-index: 1;
  animation: gemfloat 6.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes gemfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.gemfx::before {
  content: ''; position: absolute; inset: -14%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 200, 143, 0.18) 0%, rgba(230, 200, 143, 0) 68%);
  animation: gemhalo 3.4s ease-in-out infinite; pointer-events: none;
}
.spark {
  position: absolute; z-index: 2; width: 7px; height: 7px;
  background: radial-gradient(circle, #fff 0%, #ffe6ad 42%, rgba(255, 210, 130, 0) 72%);
  clip-path: polygon(50% 0%, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0% 50%, 43% 43%);
  filter: drop-shadow(0 0 3px rgba(255, 220, 150, 0.7));
  opacity: 0; transform: scale(0.3);
  animation: twinkle 2.8s ease-in-out infinite; pointer-events: none;
}
.spark--1 { top: 6%;  right: 8%;  width: 8px; height: 8px; animation-delay: 0s; }
.spark--2 { bottom: 14%; left: 6%; width: 5px; height: 5px; animation-delay: 1s; }
.spark--3 { top: 46%;  right: 0%;  width: 4px; height: 4px; animation-delay: 1.9s; }
.perkbar__gem .spark--1 { width: 12px; height: 12px; }
.perkbar__gem .spark--2 { width: 8px;  height: 8px; }
.perkbar__gem .spark--3 { width: 6px;  height: 6px; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50%      { opacity: 0.85; transform: scale(1) rotate(45deg); }
}
@keyframes gemhalo {
  0%, 100% { opacity: 0.5; transform: scale(0.94); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .spark, .gemfx::before, .gemfx .gemimg { animation: none; }
  .spark { opacity: 0.9; transform: scale(1); }
}

/* The LUMIQ credit stone. The source render sits on a black backdrop, so
   `mix-blend-mode: screen` drops that black away and lets only the glowing
   gem read on the dark card. `object-fit: cover` with a high object-position
   frames the stone and crops out the pedestal below it. */
.gemimg {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(230, 200, 143, 0.4));
  transition: transform var(--hover) var(--ease), filter var(--hover) var(--ease);
}

.pack:hover .gemimg {
  filter: drop-shadow(0 14px 26px rgba(230, 200, 143, 0.6)) brightness(1.06);
}

.gemimg--lg { width: 88px; height: 88px; }
.gemimg--bal { width: 52px; height: 52px; }
.gemimg--side { width: 30px; height: 30px; filter: drop-shadow(0 3px 8px rgba(230, 200, 143, 0.35)); }
.gemimg--pill { width: 20px; height: 20px; filter: drop-shadow(0 2px 5px rgba(230, 200, 143, 0.3)); }
.pack__n { margin: 16px 0 0; font-size: 34px; font-weight: 400; color: var(--white); }
.pack__l { margin: 2px 0 0; font-size: 13px; color: rgba(255,255,255,0.55); }
.pack__v { margin: 10px 0 0; font-size: 11.5px; font-family: ui-monospace, monospace; color: rgba(255,255,255,0.4); }
.pack__old { display: block; margin: 14px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.35); text-decoration: line-through; }
.pack__p {
  display: block; margin: 18px 8px 0; padding: 13px 0; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12); font-size: 17px; color: var(--white);
}
.pack__old + .pack__p { margin-top: 6px; }
.pack__p.is-on { background: linear-gradient(150deg, var(--gold-bright), var(--gold)); border-color: transparent; color: #1a1206; font-weight: 600; }
.pack__save { margin: 12px 0 0; font-size: 12.5px; color: var(--gold); }

.perkbar { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin-top: 30px; padding: 26px 150px 26px 30px; text-align: left; overflow: hidden; }
.perkcol { display: flex; align-items: flex-start; gap: 14px; }
.perkcol__i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.05); color: var(--gold); flex-shrink: 0; }
.perkcol__i .icon { width: 19px; }
.perkcol b { display: block; font-size: 14.5px; font-weight: 500; color: var(--white); }
.perkcol i { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; line-height: 1.55; color: rgba(255,255,255,0.45); }
.perkbar__gem { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); color: var(--gold-bright); }
.perkbar__gem .icon { width: 78px; filter: drop-shadow(0 0 22px rgba(230,200,143,0.45)); }
.perkbar__gem .gemimg--lg { filter: drop-shadow(0 8px 26px rgba(230, 200, 143, 0.5)); }

/* ---- Sign in -----------------------------------------------------------
   Full-bleed two-pane screen with no app furniture. Every class is `lgn`-
   prefixed and sits under `.app` because this stylesheet is part of one
   global bundle shared with the marketing site and PropAI. */

.app.lgn {
  min-height: 100vh;
  display: block;
  padding: 0;
  /* Requested redesign (2026-07-24): the sign-in pane was flat near-black.
     A warm espresso-charcoal base, lit by two soft gold blooms — one behind
     the wordmark and headline, one pooling from the lower-left — so the
     surface reads as intentionally lit rather than switched off. The right
     pane's photograph is opaque and covers this, so the glow only shows on
     the form side. Shared with the Create-account screen. */
  background:
    radial-gradient(72% 62% at 38% 24%, rgba(224, 186, 120, 0.14), transparent 62%),
    radial-gradient(58% 80% at 2% 106%, rgba(201, 160, 99, 0.08), transparent 55%),
    linear-gradient(158deg, #1c1712 0%, #140f0b 46%, #0c0a08 100%);
}

/* A hairline of warm light down the seam between the two panes lifts the
   join from a hard cut to a lit edge. */
.lgn__form {
  position: relative;
}
.lgn__wrap > .lgn__form::after {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(201, 160, 99, 0.22) 30%,
    rgba(201, 160, 99, 0.22) 70%,
    transparent
  );
}
@media (max-width: 900px) {
  /* No seam once the panes stack. */
  .lgn__wrap > .lgn__form::after { display: none; }
}

.lgn__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 100vh;
}

/* -- left pane: the form -- */
.lgn__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 48px 7vw;
  max-width: 620px;
  width: 100%;
  margin-left: auto;
}

.lgn__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-bottom: 6px;
}
.lgn__badge {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206;
  font-family: var(--font-display);
  font-size: 18px;
}
.lgn__mark {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--white);
}

.lgn__eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.lgn__t {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.lgn__sub {
  margin: 10px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* -- SSO -- */
.lgn__oauth { display: grid; gap: 10px; }
.lgn__sso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease), transform var(--hover) var(--ease);
}
.lgn__sso:hover {
  border-color: rgba(201, 160, 99, 0.42);
  background: rgba(201, 160, 99, 0.07);
  transform: translateY(-1px);
}
.lgn__ssoicon { width: 17px; height: 17px; flex-shrink: 0; }

.lgn__or {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.32);
}
.lgn__or::before,
.lgn__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

/* -- fields -- */
.lgn__fields { display: grid; gap: 16px; }
.lgn__field { display: grid; gap: 8px; }
.lgn__lbl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}
.lgn__forgot { font-size: 11.5px; color: var(--gold); text-decoration: none; }
.lgn__forgot:hover { color: var(--gold-bright); }

.lgn__input {
  height: 48px;
  padding: 0 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 14px;
  outline: none;
  transition: border-color var(--hover) var(--ease), box-shadow var(--hover) var(--ease);
}
.lgn__input::placeholder { color: rgba(255, 255, 255, 0.24); }
.lgn__input:focus {
  border-color: rgba(201, 160, 99, 0.55);
  box-shadow: 0 0 0 3px rgba(201, 160, 99, 0.12);
}

.lgn__remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.lgn__remember input { accent-color: var(--gold); width: 15px; height: 15px; }

.lgn__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #1a1206;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--hover) var(--ease), box-shadow var(--hover) var(--ease);
}
.lgn__submit .icon { width: 15px; transition: transform var(--hover) var(--ease); }
.lgn__submit:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(201, 160, 99, 0.32); }
.lgn__submit:hover .icon { transform: translateX(3px); }

.lgn__alt { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.45); }
.lgn__alt a { color: var(--gold); text-decoration: none; }
.lgn__alt a:hover { color: var(--gold-bright); }

.lgn__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.34);
  text-decoration: none;
  transition: color var(--hover) var(--ease);
}
.lgn__back .icon { width: 13px; transform: rotate(180deg); }
.lgn__back:hover { color: rgba(255, 255, 255, 0.7); }

/* -- right pane: the still -- */
.lgn__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
  padding: 54px;
  background-image: linear-gradient(to top, rgba(8, 7, 5, 0.92) 0%, rgba(8, 7, 5, 0.25) 55%, rgba(8, 7, 5, 0.45) 100%),
                    url('/prop-hero-wide.jpg');
  background-size: cover;
  background-position: center;
}
.lgn__qt {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0.005em;
  color: var(--cream);
  max-width: 22ch;
}
.lgn__qm {
  margin: 14px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.48);
}
.lgn__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}
.lgn__stats b { font-weight: 600; color: var(--gold-bright); }

@media (max-width: 900px) {
  .lgn__wrap { grid-template-columns: 1fr; }
  .lgn__aside { display: none; }
  .lgn__form { margin: 0 auto; padding: 40px 24px; }
}