/* apps-upgrade.css — zyentora.in/apps/upgrade (Stage 5, Zyentora Apps).
   Built on redesign-tokens.css / redesign-components.css like /pricing.
   The app icon colours are each app's own identity colours (same values as
   apps.zyentora.in's apps-home.css), defined once here as tokens. */

:root {
  --app-uplifted-bg1: #0A0B0E;    --app-uplifted-bg2: #1B1E24;    --app-uplifted-ink: #E4C24C;    --app-uplifted-ink2: #C9A227;
  --app-edgemark-bg1: #7C6CF0;    --app-edgemark-bg2: #2AC9B8;    --app-edgemark-ink: #0A0D12;    --app-edgemark-ink2: #0A0D12;
  --app-apex-bg1: #04080F;        --app-apex-bg2: #0B1A2E;        --app-apex-ink: #00D4FF;        --app-apex-ink2: #FFB800;
  --app-wanderlight-bg1: #2E1D52; --app-wanderlight-bg2: #4B2E6F; --app-wanderlight-ink: #FFC54D; --app-wanderlight-ink2: #5EEAD4;
  --app-prompt-bg1: #0E0D12;      --app-prompt-bg2: #1F1C29;      --app-prompt-ink: #E8B04B;      --app-prompt-ink2: #9D7FE8;
  --app-meridian-bg1: #0D0D0F;    --app-meridian-bg2: #221E19;    --app-meridian-ink: #E8B876;    --app-meridian-ink2: #C99A5B;
  --app-onyx-bg1: #7C5CFC;        --app-onyx-bg2: #22D3C5;        --app-onyx-ink: #0A0A0F;        --app-onyx-ink2: #0A0A0F;
}

body { background: var(--color-background); color: var(--color-text-primary); font-family: var(--font-body); }

.up-back {
  margin-left: auto;
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.up-main { max-width: 600px; padding-block: var(--space-l) var(--space-xl); }

.up-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: var(--space-m);
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 640px) { .up-card { padding: var(--space-l); } }

.up-head { display: flex; align-items: center; gap: var(--space-s); }
.up-head .eyebrow { margin-bottom: 4px; }
.up-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.up-label { margin: 2px 0 0; color: var(--color-text-secondary); font-size: var(--type-small); }
.up-lede { margin: 0; color: var(--color-text-secondary); font-size: var(--type-body); line-height: var(--leading-body); }

.up-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--i-bg1), var(--i-bg2));
  color: var(--i-ink);
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.up-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.up-icon .fill { fill: currentColor; stroke: none; }
.up-icon .alt { color: var(--i-ink2); }
.up-icon--uplifted      { --i-bg1: var(--app-uplifted-bg1);    --i-bg2: var(--app-uplifted-bg2);    --i-ink: var(--app-uplifted-ink);    --i-ink2: var(--app-uplifted-ink2); }
.up-icon--edgemark      { --i-bg1: var(--app-edgemark-bg1);    --i-bg2: var(--app-edgemark-bg2);    --i-ink: var(--app-edgemark-ink);    --i-ink2: var(--app-edgemark-ink2); }
.up-icon--apex          { --i-bg1: var(--app-apex-bg1);        --i-bg2: var(--app-apex-bg2);        --i-ink: var(--app-apex-ink);        --i-ink2: var(--app-apex-ink2); }
.up-icon--wanderlight   { --i-bg1: var(--app-wanderlight-bg1); --i-bg2: var(--app-wanderlight-bg2); --i-ink: var(--app-wanderlight-ink); --i-ink2: var(--app-wanderlight-ink2); }
.up-icon--prompt-studio { --i-bg1: var(--app-prompt-bg1);      --i-bg2: var(--app-prompt-bg2);      --i-ink: var(--app-prompt-ink);      --i-ink2: var(--app-prompt-ink2); }
.up-icon--meridian      { --i-bg1: var(--app-meridian-bg1);    --i-bg2: var(--app-meridian-bg2);    --i-ink: var(--app-meridian-ink);    --i-ink2: var(--app-meridian-ink2); }
.up-icon--onyx          { --i-bg1: var(--app-onyx-bg1);        --i-bg2: var(--app-onyx-bg2);        --i-ink: var(--app-onyx-ink);        --i-ink2: var(--app-onyx-ink2); }

.up-features { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.up-features li { position: relative; padding-left: 28px; line-height: var(--leading-body); }
.up-features li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--color-success);
  border-bottom: 2px solid var(--color-success);
  transform: rotate(-45deg);
}

.up-period { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.up-period-btn {
  display: grid;
  gap: 4px;
  text-align: left;
  min-height: 88px;
  padding: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
}
.up-period-btn.active { border: 2px solid var(--color-text-primary); padding: calc(var(--space-s) - 1px); }
.up-period-btn:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
.up-period-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--type-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-secondary); }
.up-save { white-space: nowrap; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--color-accent-tint); color: var(--color-accent-dark); text-transform: none; letter-spacing: 0; }
.up-period-price { font-size: 22px; font-weight: var(--weight-semibold); }
.up-period-price small { font-size: var(--type-small); font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.up-period-note { font-size: var(--type-label); color: var(--color-text-secondary); }

.up-account { display: grid; gap: var(--space-xs); }
.up-step { margin: 0; font-weight: var(--weight-medium); }
.up-signed { margin: 0; font-size: var(--type-small); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.up-signed strong { color: var(--color-text-primary); }
.up-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.up-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.up-google:hover { background: var(--color-background); }
.up-google[hidden], .up-gsi[hidden] { display: none; }
.up-gsi { display: flex; justify-content: center; min-height: 44px; }
.up-google:focus-visible, .up-link:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }

.up-warn {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  background: rgba(197, 139, 27, 0.12);
  color: var(--color-warning-text);
  font-size: var(--type-small);
  line-height: var(--leading-body);
}
.up-info {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  background: var(--color-accent-tint);
  color: var(--color-text-primary);
  font-size: var(--type-small);
  line-height: var(--leading-body);
}
.up-pay:disabled { opacity: 0.45; cursor: not-allowed; }
.up-terms { margin: 0; font-size: var(--type-label); line-height: var(--leading-body); color: var(--color-text-secondary); }
.up-terms a { color: inherit; }

.up-success, .up-have { display: grid; gap: var(--space-s); }
.up-success h2, .up-have h2 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: var(--weight-semibold); }
.up-success p, .up-have p { margin: 0; line-height: var(--leading-body); color: var(--color-text-secondary); }
.up-actions { display: grid; gap: var(--space-xs); }
.up-actions .btn-primary, .up-actions .btn-secondary { padding-inline: var(--space-s); white-space: nowrap; }
@media (min-width: 640px) {
  .up-actions { grid-template-columns: 1fr 1fr; }
}

.up-secure { margin: var(--space-s) 0 0; text-align: center; font-size: var(--type-label); color: var(--color-text-secondary); }

.up-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  padding: var(--space-m) var(--container-margin) var(--space-l);
  font-size: var(--type-label);
  color: var(--color-text-secondary);
}
.up-footer a { color: inherit; }

.up-modal-actions { display: grid; gap: var(--space-xs); margin-top: var(--space-s); }
@media (min-width: 640px) { .up-modal-actions { grid-template-columns: 1fr 1fr; } }

/* ---------- /apps/<app> public app page (apps-app.js) ---------- */
.ap-main { max-width: 720px; }
.up-icon--sm { width: 44px; height: 44px; border-radius: 12px; }
.up-icon--sm svg { width: 24px; height: 24px; }
.ap-pill {
  display: inline-block;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  vertical-align: middle;
}
.ap-pill--live { background: var(--color-accent-tint); border-color: transparent; color: var(--color-accent-dark); }

.ap-plans { display: grid; gap: var(--space-s); }
@media (min-width: 640px) { .ap-plans { grid-template-columns: 1fr 1fr; } }
.ap-plan {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.ap-plan--pro { border: 2px solid var(--color-text-primary); padding: calc(var(--space-s) - 1px); }
.ap-plan h2 { margin: 0; font-size: var(--type-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-secondary); }
.ap-price { margin: 0; font-size: 22px; font-weight: var(--weight-semibold); }
.ap-price small { font-size: var(--type-small); font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.ap-or { display: block; font-size: var(--type-small); font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.ap-sub { margin: 0; font-size: var(--type-small); color: var(--color-text-secondary); }
.ap-plan .up-features { gap: 8px; font-size: var(--type-small); }

.ap-refer {
  margin-top: var(--space-m);
  padding: var(--space-m);
  border-radius: var(--radius-card);
  background: var(--color-accent-tint);
  display: grid;
  gap: var(--space-xs);
}
.ap-refer[hidden] { display: none; }
.ap-refer h2 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: var(--weight-semibold); }
.ap-refer p { margin: 0; line-height: var(--leading-body); }
.ap-refer-how { font-size: var(--type-small); color: var(--color-text-secondary); }
.ap-refer a { color: var(--color-text-primary); }

.ap-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
@media (min-width: 640px) { .ap-grid { grid-template-columns: repeat(2, 1fr); } }
.ap-tile {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  text-decoration: none;
  min-width: 0;
}
.ap-tile:hover { background: var(--color-background); }
.ap-tile:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
.ap-tile-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ap-tile-name { font-weight: var(--weight-semibold); }
.ap-tile-label { font-size: var(--type-small); color: var(--color-text-secondary); }