/* Mentorrd account pages (sign in, sign up, verification, account settings).
   One centered card on a soft branded backdrop. Light + dark via tokens. */

/* ---------- Tokens ---------------------------------------------------- */

:root {
  color-scheme: light;

  --brand-50: #effcf9;
  --brand-100: #d2f5ee;
  --brand-200: #a5e9dc;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e59;

  --bg: #f6f8f8;
  --surface: #ffffff;
  --surface-muted: #f4f7f7;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --line: #e3e8ec;
  --line-strong: #cfd8de;

  --danger-50: #fef2f2;  --danger-200: #fecaca;  --danger-600: #dc2626;  --danger-700: #b91c1c;
  --warning-50: #fffbeb; --warning-200: #fde68a; --warning-700: #b45309;
  --success-50: #f0fdf4; --success-200: #bbf7d0; --success-700: #15803d;
  --info-50: #eff6ff;    --info-200: #bfdbfe;    --info-700: #1d4ed8;

  --glow-a: rgba(20, 184, 166, .16);
  --glow-b: rgba(59, 130, 246, .08);
  --card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .12);

  --radius: 12px;
  --radius-lg: 20px;
  --focus-ring: 0 0 0 4px rgba(20, 184, 166, .22);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --brand-50: rgba(20, 184, 166, .10);
    --brand-100: rgba(20, 184, 166, .18);
    --brand-200: rgba(20, 184, 166, .30);
    --brand-500: #2dd4bf;
    --brand-600: #2dd4bf;
    --brand-700: #5eead4;
    --brand-800: #99f6e4;

    --bg: #0b1416;
    --surface: #111c1f;
    --surface-muted: #16232a;
    --ink-900: #f1f5f9;
    --ink-700: #cbd5e1;
    --ink-500: #94a3b8;
    --ink-400: #7b8a9b;
    --ink-300: #475569;
    --line: #22323a;
    --line-strong: #2e424b;

    --danger-50: rgba(220, 38, 38, .12);  --danger-200: rgba(248, 113, 113, .35); --danger-600: #f87171; --danger-700: #fca5a5;
    --warning-50: rgba(245, 158, 11, .12); --warning-200: rgba(251, 191, 36, .35); --warning-700: #fcd34d;
    --success-50: rgba(34, 197, 94, .12);  --success-200: rgba(74, 222, 128, .35); --success-700: #86efac;
    --info-50: rgba(59, 130, 246, .12);    --info-200: rgba(96, 165, 250, .35);    --info-700: #93c5fd;

    --glow-a: rgba(45, 212, 191, .12);
    --glow-b: rgba(59, 130, 246, .08);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
    --focus-ring: 0 0 0 4px rgba(45, 212, 191, .25);
  }
  .topbar-logo img { filter: brightness(0) invert(1); opacity: .92; }
  .btn--primary { color: #042f2e; }
  .btn--primary:hover { color: #042f2e; }
}

/* ---------- Base ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(60rem 28rem at 50% -8rem, var(--glow-a), transparent 70%),
    radial-gradient(40rem 24rem at 100% 0, var(--glow-b), transparent 70%);
  background-repeat: no-repeat;
  color: var(--ink-700);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-600); font-weight: 600; text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -999px; top: .75rem; z-index: 10; padding: .5rem .875rem; border-radius: 8px; background: var(--surface); }
.skip-link:focus { left: .75rem; }

/* ---------- Shell ----------------------------------------------------- */

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
}

.topbar {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
}
.topbar-logo { display: inline-flex; border-radius: 6px; }
.topbar-logo img { height: 28px; width: auto; display: block; }

.topbar-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .875rem;
  color: var(--ink-500);
  white-space: nowrap;
}
.topbar-link a, .topbar-link .btn--link {
  padding: .5rem .875rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-900);
  font-size: .8125rem;
  font-weight: 600;
  min-height: 0;
  width: auto;
}
.topbar-link a:hover, .topbar-link .btn--link:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
  text-decoration: none;
}

.entrance-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 2.5rem;
}

.card {
  width: 100%;
  max-width: 440px;
  padding: 2.25rem 2.25rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}
.entrance-wide .card { max-width: 580px; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem .5rem;
  padding: 1.25rem 0 1.75rem;
  font-size: .8125rem;
  color: var(--ink-400);
}
.foot a { color: var(--ink-500); font-weight: 500; }
.foot-dot { color: var(--ink-300); }

/* ---------- Apps strip (below the card on sign in / sign up) --------- */

.apps-strip { margin-top: 1.75rem; text-align: center; max-width: 440px; }
.apps-strip-title { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; color: var(--ink-500); }
.apps-strip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.apps-strip-list li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .375rem .75rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .8125rem; font-weight: 500; color: var(--ink-700);
}
.app-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); }
.app-dot--apti { background: #6366f1; }
.app-dot--trait { background: #f59e0b; }
.app-dot--interview { background: #ec4899; }

/* ---------- Headings & text ------------------------------------------ */

.auth-head { margin-bottom: 1.5rem; }
.auth-head--center { text-align: center; }
.auth-head--center .status-icon { margin-bottom: 1rem; }

.auth-title, .entrance-main h1 {
  margin: 0 0 .375rem;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-900);
}
.auth-subtitle { margin: 0; color: var(--ink-500); font-size: .9375rem; }
.auth-text, .entrance-main p { margin: 0 0 1rem; color: var(--ink-500); font-size: .9375rem; }
.auth-text strong, .entrance-main p strong { color: var(--ink-900); }
.auth-section-title { margin: 1.5rem 0 .75rem; font-size: 1rem; font-weight: 700; color: var(--ink-900); }
.auth-footnote { margin: 1.5rem 0 0; text-align: center; font-size: .875rem; color: var(--ink-500); }

/* ---------- Alerts ---------------------------------------------------- */

.alert-stack { display: grid; gap: .625rem; margin-bottom: 1.25rem; }
.alert {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .75rem .875rem;
  border: 1px solid var(--info-200); border-radius: var(--radius);
  background: var(--info-50); color: var(--info-700);
  font-size: .875rem; line-height: 1.45;
}
.alert p { margin: 0; color: inherit; font-size: inherit; }
.alert svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: currentColor; }
.alert--error   { background: var(--danger-50);  border-color: var(--danger-200);  color: var(--danger-700); }
.alert--warning { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-700); }
.alert--success { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }

/* ---------- Forms ----------------------------------------------------- */

.auth-form { display: grid; gap: 1rem; }
.auth-form > p { margin: 0; }

.field { display: grid; gap: .375rem; margin: 0; }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.field label, .field-label { font-size: .875rem; font-weight: 600; color: var(--ink-900); }
.field-label-row a { font-size: .8125rem; font-weight: 500; }
.field-control { position: relative; }

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"],
.auth-form input[type="number"],
.auth-form input[type="url"],
.auth-form select,
.auth-form textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font: 500 1rem/1.4 var(--font);
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--ink-400); font-weight: 400; }
.field input:hover { border-color: var(--ink-300); }
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: var(--focus-ring);
}
.field--invalid input:not([type="checkbox"]):not([type="radio"]),
.field--invalid .phone-prefix { border-color: var(--danger-600); }
.field--invalid input:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .15); }

.field-control input.has-toggle { padding-right: 3rem; }
.password-toggle {
  position: absolute; top: 50%; right: .375rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-400); cursor: pointer;
}
.password-toggle:hover { color: var(--ink-700); background: var(--surface-muted); }
.password-toggle svg { width: 20px; height: 20px; fill: currentColor; }

.entrance-main .field p, .entrance-main .field ul { margin: 0; }
.field-hint, .entrance-main .field-hint { font-size: .8125rem; color: var(--ink-500); margin: 0; }
.field-hint ul { margin: 0; padding-left: 1.1rem; }
.field-errors { margin: 0; padding: 0; list-style: none; }
.field-errors li, .field-error { font-size: .8125rem; font-weight: 500; color: var(--danger-600); }

.field--check { display: flex; align-items: center; gap: .5rem; }
.field--check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand-600); }
.field--check label { font-weight: 500; color: var(--ink-500); }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* ---------- Buttons --------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 48px; padding: .75rem 1rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font: 600 .9375rem/1.2 var(--font);
  text-align: center; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { cursor: progress; opacity: .8; }

.btn--primary { background: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(13, 148, 136, .25), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--primary:hover { background: var(--brand-700); color: #fff; }
.btn--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink-900); }
.btn--secondary:hover { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.btn--danger { background: var(--danger-600); color: #fff; }
.btn--danger:hover { background: var(--danger-700); color: #fff; }
.btn--link {
  width: auto; min-height: 0; padding: .25rem .375rem;
  background: none; border: 0; color: var(--brand-600); font-size: .875rem;
}
.btn--link:hover { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.btn--link[disabled] { color: var(--ink-400); cursor: not-allowed; text-decoration: none; }
.btn--sm { width: auto; min-height: 36px; padding: .4rem .875rem; font-size: .8125rem; border-radius: 10px; }
.btn--danger-link { color: var(--danger-600); }
.btn--danger-link:hover { color: var(--danger-700); }

.btn-stack { display: grid; gap: .75rem; margin-top: .5rem; }

.btn .spinner {
  display: none; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Social sign-in ------------------------------------------- */

.social-grid { display: grid; gap: .625rem; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 48px; padding: .625rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-900);
  font-size: .9375rem; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.social-btn:hover { border-color: var(--ink-300); background: var(--surface-muted); color: var(--ink-900); text-decoration: none; }
.social-btn img, .social-btn svg { width: 20px; height: 20px; flex: none; object-fit: contain; }

.divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.25rem 0;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-400);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Status pages (check inbox, confirmed, signed out…) ------- */

.status { text-align: center; }
.status .auth-text { max-width: 360px; margin-left: auto; margin-right: auto; }
.status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 1rem;
  border-radius: 16px; background: var(--brand-50); color: var(--brand-600);
}
.status-icon svg { width: 26px; height: 26px; fill: currentColor; }
.status-icon--success { background: var(--success-50); color: var(--success-700); }
.status-icon--warning { background: var(--warning-50); color: var(--warning-700); }
.status-icon--danger  { background: var(--danger-50);  color: var(--danger-600); }
.status .btn-stack { max-width: 320px; margin: 1.5rem auto 0; }

.email-chip {
  display: inline-block; max-width: 100%; padding: .25rem .625rem;
  border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--line);
  color: var(--ink-900); font-weight: 600; font-size: .875rem; overflow-wrap: anywhere;
}

.steps {
  margin: 1.25rem 0 0; padding: 1rem 1.125rem; text-align: left;
  border-radius: var(--radius); background: var(--surface-muted); border: 1px solid var(--line);
  font-size: .875rem; color: var(--ink-700);
}
.steps ol { margin: .375rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; }

/* ---------- Panels, tables, badges, choices -------------------------- */

.panel { margin-bottom: 1rem; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-muted); }
.panel h2 { font-size: 1rem; margin: 0 0 .75rem; color: var(--ink-900); }
.panel-actions { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.panel-actions .btn { width: auto; }
.entrance-main hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

.auth-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.auth-table th, .auth-table td { text-align: left; padding: .625rem .5rem; border-bottom: 1px solid var(--line); }
.auth-table th { color: var(--ink-500); font-weight: 600; }

.badge {
  display: inline-block; padding: .125rem .5rem; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-700);
  font-size: .75rem; font-weight: 600; vertical-align: middle;
}
.badge--success { background: var(--success-50); color: var(--success-700); }
.badge--warning { background: var(--warning-50); color: var(--warning-700); }
.badge--brand { background: var(--brand-100); color: var(--brand-800); }

.choice-list { border: 0; margin: 0; padding: 0; display: grid; gap: .625rem; }
.choice {
  display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--ink-300); }
.choice:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.choice input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand-600); }
.choice-body { display: grid; min-width: 0; }
.choice-title { font-weight: 600; color: var(--ink-900); font-size: .9375rem; }
.choice-meta { color: var(--ink-500); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-badges { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .25rem; }

/* ---------- Email / Mobile tabs -------------------------------------- */

.seg {
  display: none;
  grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 4px; margin-bottom: 1.25rem;
  background: var(--surface-muted); border: 1px solid var(--line); border-radius: 14px;
}
.has-js .seg { display: grid; }
.seg [role="tab"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 40px; padding: .5rem .75rem;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--ink-500); font: 600 .875rem/1 var(--font); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg [role="tab"] svg { width: 16px; height: 16px; fill: currentColor; }
.seg [role="tab"]:hover { color: var(--ink-900); }
.seg [role="tab"][aria-selected="true"] {
  background: var(--surface); color: var(--brand-700);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px var(--line);
}
.tab-panel { display: grid; gap: 1rem; }
.tab-panel + .tab-panel { margin-top: 1.5rem; }
.has-js .tab-panel + .tab-panel { margin-top: 0; }
.has-js .tab-panel[hidden], .has-js .tab-panel--inactive { display: none; }

/* ---------- Phone input ---------------------------------------------- */

.phone-control { display: flex; align-items: stretch; }
.phone-prefix {
  display: inline-flex; align-items: center; padding: 0 .875rem;
  border: 1px solid var(--line-strong); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--surface-muted); color: var(--ink-700); font-weight: 600; font-size: .9375rem;
}
.phone-control .phone-prefix + input { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1; min-width: 0; }
.phone-control.is-intl .phone-prefix { display: none; }
.phone-control.is-intl .phone-prefix + input { border-radius: var(--radius); }

/* ---------- One-time code -------------------------------------------- */

.auth-form input.code-input {
  min-height: 60px; text-align: center;
  font: 700 1.75rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .5em; text-indent: .5em;
}
.auth-form input.code-input::placeholder { color: var(--ink-300); letter-spacing: .5em; }
.code-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: 1rem; }
.code-hint { text-align: center; margin-top: 1.25rem !important; }
.inline-form { display: inline; margin: 0; }

.alt-method { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.alt-method > summary {
  cursor: pointer; list-style: none; text-align: center;
  color: var(--brand-600); font-weight: 600; font-size: .875rem;
}
.alt-method > summary::-webkit-details-marker { display: none; }
.alt-method > summary::after { content: " ▾"; font-size: .75em; }
.alt-method[open] > summary::after { content: " ▴"; }
.alt-method[open] > summary { margin-bottom: 1rem; }

/* ---------- Account overview ----------------------------------------- */

.account-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.account-row { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.125rem; background: var(--surface); }
.account-row + .account-row { border-top: 1px solid var(--line); }
.account-row-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand-700);
}
.account-row-icon svg { width: 20px; height: 20px; fill: currentColor; }
.account-row-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.account-row-label { flex-basis: 100%; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); }
.account-row-value { margin: 0; font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; }
.account-row-value--empty { font-weight: 500; color: var(--ink-400); }
.account-row .btn { width: auto; flex: none; }
.account-tip { margin-top: 1rem; }

/* ---------- Responsive ------------------------------------------------ */

@media (max-width: 520px) {
  .shell { padding: 0; }
  .topbar { padding: 1rem 1rem .5rem; }
  .topbar-link span { display: none; }
  .entrance-main { justify-content: flex-start; padding: .5rem 0 1.5rem; }
  .card { max-width: none; padding: 1.25rem 1rem 1.5rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .entrance-wide .card { max-width: none; }
  .apps-strip { padding: 0 1rem; margin-top: 1rem; }
  .auth-title, .entrance-main h1 { font-size: 1.375rem; }
  .account-row { flex-wrap: wrap; }
  .account-row .btn { margin-left: calc(40px + .875rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- App launcher ("/") ---------------------------------------- */

.entrance-launcher .card { max-width: 820px; padding: 2rem; }
.launcher-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem;
  flex-wrap: wrap; margin-bottom: 1.75rem;
}
.launcher-auth { display: flex; gap: .5rem; }
.credit-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .375rem .375rem .75rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-700); font-weight: 500; font-size: .875rem;
  white-space: nowrap;
}
.credit-pill:hover { border-color: var(--brand-500); text-decoration: none; color: var(--ink-900); }
.credit-pill svg { width: 18px; height: 18px; fill: #f59e0b; }
.credit-pill strong { color: var(--ink-900); }
.credit-pill-cta { padding: .25rem .625rem; border-radius: 999px; background: var(--brand-600); color: #fff; font-size: .75rem; font-weight: 700; }

.launcher-group + .launcher-group { margin-top: 1.5rem; }
.launcher-group-title {
  margin: 0 0 .75rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500);
}
.app-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem;
}
.app-tile {
  display: flex; align-items: center; gap: .875rem; height: 100%;
  padding: .875rem 1rem;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  color: inherit; font-weight: 400;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.app-tile:hover {
  text-decoration: none; color: inherit; border-color: var(--brand-200);
  box-shadow: 0 6px 20px -10px rgba(15, 23, 42, .25); transform: translateY(-1px);
}
.app-tile-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
}
.app-tile-icon svg { width: 22px; height: 22px; fill: currentColor; }
.app-tile-icon--teal   { background: rgba(20, 184, 166, .12); color: #0d9488; }
.app-tile-icon--blue   { background: rgba(10, 102, 194, .12); color: #0a66c2; }
.app-tile-icon--pink   { background: rgba(236, 72, 153, .12); color: #db2777; }
.app-tile-icon--indigo { background: rgba(99, 102, 241, .12); color: #4f46e5; }
.app-tile-icon--amber  { background: rgba(245, 158, 11, .14); color: #d97706; }
.app-tile-icon--violet { background: rgba(139, 92, 246, .12); color: #7c3aed; }
@media (prefers-color-scheme: dark) {
  .app-tile-icon--teal { color: #2dd4bf; } .app-tile-icon--blue { color: #60a5fa; }
  .app-tile-icon--pink { color: #f472b6; } .app-tile-icon--indigo { color: #818cf8; }
  .app-tile-icon--amber { color: #fbbf24; } .app-tile-icon--violet { color: #a78bfa; }
}
.app-tile-body { flex: 1; min-width: 0; display: grid; gap: .125rem; }
.app-tile-name { font-weight: 600; font-size: .9375rem; color: var(--ink-900); }
.app-tile-desc { font-size: .8125rem; line-height: 1.4; color: var(--ink-500); }
.app-tile-arrow { flex: none; width: 20px; height: 20px; fill: var(--ink-300); transition: fill .15s, transform .15s; }
.app-tile:hover .app-tile-arrow { fill: var(--brand-600); transform: translateX(2px); }

.launcher-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem;
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: .8125rem;
}
.launcher-foot-label { color: var(--ink-500); font-weight: 600; }
.launcher-foot a { font-weight: 500; }
.launcher-account { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }

@media (max-width: 520px) {
  .entrance-launcher .card { padding: 1rem; }
  .app-grid { grid-template-columns: 1fr; }
}