/* ============================================================
   account-screen.css — ME › Account. Everything is scoped under .acc.
   Tokens used: --fd (Mona Sans), --fm (IBM Plex Mono).
   ============================================================ */

/* Full-width, not a centred column — same fix already applied to
   Wallet/Alerts ("I need it full screen.. end to end.. not in the
   center"), and asked for explicitly again here. */
.acc{padding:28px 32px 48px;color:#c9cdd6;font-family:var(--fd)}

/* ---- identity ---- */
.acc__id{display:flex;align-items:center;justify-content:space-between;gap:24px}
.acc__name{margin:0;font:600 24px/1.2 var(--fd);color:#fff;letter-spacing:-.01em}
.acc__email{margin:6px 0 0;font:400 13px/1 var(--fm);color:#8b92a8}
.acc__ghost{
  height:38px;padding:0 16px;border:0;border-radius:2px;cursor:pointer;background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font:500 12px/1 var(--fm);letter-spacing:.06em;color:#8b92a8;
}
.acc__ghost:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

/* ---- sections ---- */
.acc__sec{margin-top:36px}
.acc__h{margin:0 0 6px;font:500 13px/1.2 var(--fd);color:#8b92a8}
.acc__note{margin:14px 0 0;font:400 12.5px/1.5 var(--fd);color:#4e5568;max-width:70ch}

/* ---- plans ---- */
.acc__plans{border-top:1px solid rgba(255,255,255,.07)}
.acc__plan{
  display:grid;grid-template-columns:10px 1fr 150px 90px 92px;align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.acc__planDot{width:6px;height:6px;border-radius:50%;background:#2a2f3a}
.acc__plan.on .acc__planDot{background:var(--cc,#8b92a8);box-shadow:0 0 8px var(--cc,transparent)}
.acc__planName{display:flex;flex-direction:column;gap:3px;min-width:0;font:500 14px/1.2 var(--fd);color:#c9cdd6}
.acc__plan.on .acc__planName{color:#fff}
.acc__planMeta{font:400 11px/1.2 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:#4e5568}
.acc__planState{font:400 12px/1.2 var(--fm);color:#4e5568;white-space:nowrap}
.acc__plan.on .acc__planState{color:#8b92a8}
.acc__planPrice{font:500 15px/1 var(--fm);color:#8b92a8;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.acc__plan.on .acc__planPrice{color:#c9cdd6}
.acc__planBtn{height:34px;border:0;border-radius:2px;cursor:pointer;font:600 11.5px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.acc__planBtn--unlock{background:#eceef3;color:#08090d}
.acc__planBtn--unlock:hover{background:#fff}
.acc__planBtn--stop{background:transparent;color:#8b92a8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.acc__planBtn--stop:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.acc__planBtn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- telegram row / links ---- */
.acc__row{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);
}
.acc__tgDot{width:7px;height:7px;border-radius:50%;background:#2a2f3a}
.acc__tgDot.on{background:#3dd68c;box-shadow:0 0 8px rgba(61,214,140,.6)}
.acc__rowMain{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.acc__rowT{font:500 14px/1.2 var(--fd);color:#fff}
.acc__rowS{font:400 12px/1.2 var(--fd);color:#4e5568}
.acc__lnk{border:0;background:transparent;cursor:pointer;padding:6px 0;font:400 12.5px/1 var(--fm);letter-spacing:.04em;color:#8b92a8;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.15)}
/* Connect/Manage — a real button, not a dim underlined link lost next
   to the row's own quiet copy (Ateet, a screenshot of exactly that:
   "Highlight connect/disconnect button"). Own class, not .acc__lnk
   itself — Legal's own Terms/Privacy/Refunds/Disclaimer links below
   still use that one and stay understated on purpose. --cta (Connect,
   the state that actually needs attention — nothing is being
   delivered yet) gets this app's own established amber CTA fill,
   same colour Alerts' empty-state "Connect Telegram" button already
   uses; Manage (already connected, nothing urgent) stays a quieter
   bordered pill, same weight as the Log out button above it. */
.acc__tgBtn{
  flex:none;height:34px;padding:0 16px;border:0;border-radius:2px;cursor:pointer;
  background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  font:600 11.5px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:#c9cdd6;
}
.acc__tgBtn:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.acc__tgBtn--cta{background:#ff9a1f;color:#08090d;box-shadow:none}
.acc__tgBtn--cta:hover{background:#ffad47;color:#08090d}
.acc__tgBtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.acc__lnk:hover{color:#fff}
.acc__links{display:flex;gap:26px;padding:14px 0;border-top:1px solid rgba(255,255,255,.07)}

/* ---- mobile ---- */
@media (max-width:767px){
  .acc{padding:18px 16px 40px}
  .acc__plan{grid-template-columns:10px 1fr auto;grid-template-areas:"dot name btn" "dot state price";row-gap:6px}
  .acc__planDot{grid-area:dot}.acc__planName{grid-area:name}.acc__planBtn{grid-area:btn}
  .acc__planState{grid-area:state}.acc__planPrice{grid-area:price;text-align:right}
  .acc__links{flex-wrap:wrap;gap:14px 22px}
}