/* Reference parity layer for the supplied PhantomPass screenshots. */
.login-screen {
  grid-template-columns:minmax(430px, 560px) minmax(720px, 1fr);
  gap:24px;
  height:100vh;
  overflow:hidden;
  padding:28px 50px 28px;
  background:
    radial-gradient(circle at 2% 96%, rgba(218,146,0,.2), transparent 23%),
    radial-gradient(circle at 92% 8%, rgba(218,146,0,.13), transparent 29%),
    linear-gradient(180deg, #020202, #050403);
}
.login-card {
  height:calc(100vh - 56px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(248,189,36,.3) transparent;
  align-content:start;
  gap:14px;
  padding:32px 52px 120px;
  border-radius:16px;
  border:none;
  background:
    radial-gradient(circle at 50% 0, rgba(248,189,36,.08), transparent 34%),
    linear-gradient(180deg, rgba(13,13,13,.95), rgba(4,4,4,.97));
}
.login-brand { margin-bottom:8px; }
.login-brand img {
  width:318px;
  max-width:100%;
  aspect-ratio:1.84;
  object-fit:contain;
  border-radius:0;
  filter:drop-shadow(0 0 22px rgba(248,189,36,.34));
}
.login-brand strong {
  display:block;
  margin-top:2px;
  color:#fff;
  font-size:36px;
  line-height:1;
  letter-spacing:0;
}
.login-brand strong span {
  color:var(--gold-2);
  font-size:inherit;
  font-weight:inherit;
  text-transform:none;
}
.login-brand sup { color:var(--gold); font-size:11px; margin-left:2px; }
.login-brand small {
  color:var(--gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}
.login-card h1 {
  font-size:36px;
  line-height:1.08;
}
.login-card p {
  margin:0 auto;
  line-height:1.5;
}
.login-form { display:grid; gap:10px; }
.login-field,
.token-field {
  min-height:52px;
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  padding:0 12px;
}
.login-field > span,
.token-field > span {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--gold);
  border-radius:8px;
  background:rgba(248,189,36,.08);
}
.login-field input,
.token-field input { border:0; padding:0; background:transparent; box-shadow:none; }
.token-field .icon-button {
  width:36px;
  height:36px;
  min-height:36px;
  color:var(--gold);
  border-color:rgba(248,189,36,.32);
  background:rgba(248,189,36,.08);
}
.login-options,
.login-divider,
.login-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.remember { display:flex; grid-template-columns:none; align-items:center; }
.remember input { width:auto; accent-color:var(--gold); }
.link-button { border:0; background:transparent; color:var(--gold); padding:0; min-height:auto; }
.login-divider:before,
.login-divider:after { content:""; flex:1; height:1px; background:rgba(255,255,255,.16); }
.google-button {
  min-height:52px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:var(--ink);
}
.google-button strong { color:#4285f4; font-size:22px; }
.signup-copy { font-size:16px; }
.login-footer {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:10;
  min-height:48px;
  padding:0 64px;
  border-top:1px solid rgba(248,189,36,.12);
  background:rgba(2,2,2,.92);
  backdrop-filter:blur(8px);
  color:#a9a29a;
}
.login-hero {
  height:calc(100vh - 56px);
  min-height:unset;
  border-radius:16px;
  border:none;
  background:
    linear-gradient(90deg, rgba(2,2,2,.98), rgba(2,2,2,.72) 43%, rgba(2,2,2,.16)),
    repeating-radial-gradient(circle at 77% 36%, rgba(248,189,36,.2) 0 1px, transparent 1px 70px),
    radial-gradient(circle at 79% 42%, rgba(248,189,36,.34), transparent 24%),
    image-set(url("/dashboard/phantompass-ghost-cutout.webp") type("image/webp"), url("/dashboard/phantompass-ghost-cutout.png") type("image/png")) right 7% top 28px / min(500px, 40vw) auto no-repeat,
    linear-gradient(135deg, #020202, #0b0904 58%, #020202);
}
.login-hero:after {
  content:"";
  position:absolute;
  right:12.5%;
  top:30%;
  width:210px;
  height:248px;
  display:grid;
  place-items:center;
  clip-path:polygon(50% 0, 92% 18%, 86% 70%, 50% 100%, 14% 70%, 8% 18%);
  background:
    radial-gradient(circle at 42% 41%, rgba(255,224,88,.95) 0 6px, transparent 7px),
    radial-gradient(circle at 58% 41%, rgba(255,224,88,.95) 0 6px, transparent 7px),
    radial-gradient(circle at 50% 56%, rgba(255,224,88,.35) 0 22px, transparent 23px),
    linear-gradient(160deg, rgba(255,214,91,.28), rgba(4,4,4,.93) 54%, rgba(248,189,36,.18));
  box-shadow:0 0 0 4px rgba(248,189,36,.92), 0 0 52px rgba(248,189,36,.42), inset 0 0 34px rgba(248,189,36,.24);
  transform:perspective(520px) rotateX(7deg);
}
.hero-orbit-icons {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.hero-orbit-icons span {
  position:absolute;
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  border:2px solid rgba(248,189,36,.42);
  border-radius:50%;
  color:var(--gold);
  background:radial-gradient(circle, rgba(248,189,36,.2), rgba(7,7,7,.72));
  box-shadow:0 0 28px rgba(248,189,36,.24), inset 0 0 18px rgba(248,189,36,.2);
  font-size:32px;
}
.hero-orbit-icons span:nth-child(1) { right:30.5%; top:27%; }
.hero-orbit-icons span:nth-child(2) { right:6%; top:22%; }
.hero-orbit-icons span:nth-child(3) { right:32%; top:47%; }
.hero-orbit-icons span:nth-child(4) { right:5.2%; top:49%; }
.hero-copy h2 { font-size:49px; }
.hero-copy p {
  max-width:560px;
  line-height:1.55;
}
.feature-strip {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  position:absolute;
  left:38px;
  right:38px;
  bottom:48px;
  z-index:2;
}
.feature-strip button {
  min-height:98px;
  display:grid;
  grid-template-columns:62px 1fr 18px;
  align-items:center;
  column-gap:18px;
  padding:16px 18px;
  border:1px solid rgba(248,189,36,.22);
  border-radius:14px;
  color:var(--ink);
  text-align:left;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(0,0,0,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 36px rgba(0,0,0,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
    rgba(0,0,0,.62);
}
.feature-strip button:hover {
  border-color:rgba(248,189,36,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 44px rgba(0,0,0,.36), 0 0 28px rgba(248,189,36,.12);
}
.feature-strip button:last-child { grid-column:1 / -1; }
.feature-strip button i {
  color:var(--gold);
  font-size:26px;
  font-style:normal;
  justify-self:end;
}
.feature-strip span {
  min-height:98px;
  display:grid;
  grid-template-columns:62px 1fr;
  align-items:center;
  column-gap:18px;
  padding:16px 18px;
}
.feature-strip span:last-child { grid-column:1 / -1; }
.feature-strip b {
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(248,189,36,.25);
  color:var(--gold);
  background:rgba(248,189,36,.09);
  font-size:28px;
}
.feature-strip b { grid-row:1 / 3; }
.feature-strip em { display:grid; gap:6px; font-style:normal; }
.feature-strip strong { grid-column:2 !important; font-size:20px; }
.feature-strip small { grid-column:2 !important; color:#c6bdb1; line-height:1.32; }

.app-shell { grid-template-columns:228px minmax(0, 1fr) 0; }
body.activity-open .app-shell { grid-template-columns:228px minmax(0, 1fr) 380px; }
.side-nav {
  padding:22px 18px 24px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.16)),
    image-set(url("/dashboard/phantompass-ghost-cutout.webp") type("image/webp"), url("/dashboard/phantompass-ghost-cutout.png") type("image/png")) center bottom 145px / 250px auto no-repeat,
    radial-gradient(circle at 50% 78%, rgba(248,189,36,.23), transparent 26%),
    linear-gradient(180deg, #050505, #080704 58%, #020202);
}
.brand-block { min-height:86px; margin-bottom:16px; }
.brand-block img { width:176px; aspect-ratio:1.84; object-fit:contain; }
.nav-list { gap:6px; }
.nav-item { min-height:36px; padding:8px 12px; border-radius:7px; font-size:14px; }
.nav-item.active { box-shadow:0 0 0 1px rgba(248,189,36,.42), inset 0 0 22px rgba(248,189,36,.14), 0 0 10px rgba(248,189,36,.1); }
.workspace { padding:26px 28px 32px; }
.topbar { margin-bottom:18px; }
.topbar-actions > .search-box,
.topbar-actions > .workspace-select,
.topbar-actions > .icon-button,
.topbar-actions > .user-menu {
  min-height:42px;
}
.title-block h1 { font-size:30px; }
.search-box { width:280px; }
.status-strip {
  display:flex;
}

.loading-state,
.state-banner {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:12px 14px;
  border:1px solid rgba(248,189,36,.22);
  border-radius:8px;
  background:rgba(248,189,36,.055);
}

.loading-state span {
  width:22px;
  height:22px;
  border:3px solid rgba(248,189,36,.24);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

.loading-state p,
.state-banner span {
  margin:0;
  color:var(--muted);
}

.state-banner {
  justify-content:space-between;
  flex-wrap:wrap;
}

.state-banner.warn {
  border-color:rgba(248,189,36,.32);
  background:rgba(248,189,36,.08);
}

@keyframes spin {
  to { transform:rotate(360deg); }
}