/*
  Account-hub styles ONLY — the top chrome, launcher, tiles, rows, and legal section that are
  specific to the My Account screen and do NOT belong to any other MOSS app.

  The shared design tokens and base primitives (:root schemes/colours, body, .btn, .card, .wrap)
  live in ./shared/appearance.css, which is the extraction seam for `moss-shared`
  (see docs/shared-library.md). index.html links that file FIRST, then this one. Keep it that way:
  anything added here must be hub-specific; a token or primitive that other apps also need goes in
  the shared layer instead.
*/

/* ---- Account hub: top chrome, launcher, tiles, rows, legal ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.brand .mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: grid;
  place-items: center;
  color: var(--onacc);
  font-weight: 900;
  font-size: 14px;
}
.chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.iconbtn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card2);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.iconbtn:hover {
  border-color: var(--accent);
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: grid;
  place-items: center;
  color: var(--onacc);
}

.launcher {
  position: absolute;
  top: 52px;
  right: 0;
  width: 330px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  z-index: 10;
}
.ltitle {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 6px 8px;
}
.divider {
  border-bottom: 1px solid var(--line);
  margin: 8px 2px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.grid.two {
  grid-template-columns: repeat(2, 1fr);
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 6px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
}
.tile:hover {
  background: var(--card2);
}
.ic {
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
}
.tile .ic {
  width: 46px;
  height: 46px;
  font-size: 20px;
}
.logo-ic {
  background: transparent;
  overflow: hidden;
  padding: 0;
}
.logo-ic img {
  display: block;
  border-radius: 12px;
}
.nm {
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
}
.plan {
  font-size: 10.5px;
  color: var(--muted);
}
.plan.on {
  color: var(--accent);
}

.sub-muted {
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 14px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(94, 234, 212, 0.1);
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: middle;
  margin-left: 8px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.row:first-of-type {
  border-top: none;
}
.rl {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rl .ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.rname {
  font-weight: 650;
  font-size: 15px;
}
.rmeta {
  font-size: 12.5px;
  color: var(--muted);
}
.rmeta.on {
  color: var(--accent);
}

.legal {
  margin-top: 22px;
}
.sectitle {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 2px;
}
.lrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.lname {
  font-weight: 650;
  font-size: 14.5px;
}
.lmeta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.foot {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 16px;
  line-height: 1.5;
}