/**
 * Front-end-only chrome: the app bar shown above the Dashboard/My Designs
 * view, the login/no-access panels, and the full-viewport takeover used for
 * the Editor view (PRD follow-up: customers only ever see the front end,
 * never wp-admin — the editor needs to feel like a native full-screen app
 * regardless of which theme it's embedded in).
 */
.eps-frontend {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--eps-space-5) var(--eps-space-4);
}

.eps-frontend-appbar {
  display: flex;
  align-items: center;
  gap: var(--eps-space-4);
  padding: 10px 18px;
  margin-bottom: var(--eps-space-5);
  background: var(--eps-surface-translucent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius-lg);
  box-shadow: var(--eps-shadow-sm);
}
.eps-frontend-appbar__brand { font-weight: 700; font-size: 15px; white-space: nowrap; }
.eps-frontend-appbar__nav { display: flex; gap: 2px; }
.eps-frontend-appbar__nav a {
  font-family: var(--eps-font);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--eps-text-secondary);
  padding: 8px 14px;
  border-radius: var(--eps-radius-pill);
  transition: background var(--eps-duration-fast) var(--eps-ease), color var(--eps-duration-fast) var(--eps-ease);
}
.eps-frontend-appbar__nav a:hover { background: var(--eps-surface-sunken); color: var(--eps-text-primary); }
.eps-frontend-appbar__nav a.is-active { background: var(--eps-accent-soft); color: var(--eps-accent-strong); }
.eps-frontend-appbar__spacer { flex: 1; }
.eps-frontend-appbar__tier {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--eps-radius-pill);
  background: var(--eps-surface-sunken);
  color: var(--eps-text-secondary);
  white-space: nowrap;
}

.eps-frontend-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--eps-space-3);
  min-height: 50vh;
  text-align: center;
  padding: var(--eps-space-6);
  background: var(--eps-surface);
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius-lg);
}
.eps-frontend-gate h2 { font-size: 18px; font-weight: 700; margin: 0; }
.eps-frontend-gate p { color: var(--eps-text-secondary); max-width: 380px; margin: 0; font-size: 13px; }
.eps-frontend-gate form p.login-remember,
.eps-frontend-gate form p.login-submit { text-align: left; }
.eps-frontend-gate form label { font-size: 13px; color: var(--eps-text-secondary); }
.eps-frontend-gate form input[type="text"],
.eps-frontend-gate form input[type="password"] {
  font-family: var(--eps-font);
  padding: 8px 10px;
  border-radius: var(--eps-radius-sm);
  border: 1px solid var(--eps-border);
  width: 100%;
}
.eps-frontend-gate form input[type="submit"] {
  font-family: var(--eps-font);
  font-weight: 600;
  border-radius: var(--eps-radius-pill);
  padding: 8px 18px;
  border: 1px solid var(--eps-accent);
  background: var(--eps-accent);
  color: #fff;
  cursor: pointer;
}

/* Full-viewport takeover for the Editor view — deliberately escapes the
   theme's content container (header/footer sit behind it) so the design
   workspace reads as a native app, not a page embed. */
.eps-frontend-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--eps-bg);
}
.eps-frontend-fullscreen .eps-editor { min-height: 100vh; }
body.eps-fullscreen-active { overflow: hidden; }