/*
 * Application shell.
 *
 * Element Plus ships component styles only, so the font, the page background
 * and the frame are set up here. The dark theme is Element Plus' own
 * dark/css-vars.css, activated by the `dark` class on <html>.
 * Everything inside the pages is stock Element Plus.
 */
body {
  margin: 0;
  font-family: var(--el-font-family);
  background: var(--el-bg-color-page);
  color: var(--el-text-color-primary);
}

.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--el-border-color);
}

.app-header .app-spacer { flex: 1; }

.app-brand {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.app-main { padding: 24px; }

/* The sign-in, consent and device pages are a single centred column. */
.app-narrow {
  max-width: 460px;
  margin: 0 auto;
}

/* A button rendered as a link must not keep the browser's underline. */
a.el-button { text-decoration: none; }

/*
 * Element Plus paints a divider label with --el-bg-color, but cards and
 * `border-card` tab bodies sit on --el-bg-color-overlay, so in dark mode the
 * label shows up as a lighter box. Match the surface it sits on.
 */
.el-card .el-divider__text,
.el-tabs--border-card .el-divider__text {
  background-color: var(--el-bg-color-overlay);
}