/* Product surfaces share the homepage identity, with a compact UI type scale. */
body { font-family: Manrope, Arial, sans-serif; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, .dialog-title { letter-spacing: -.03em; font-weight: 800; }
.card-title, .account-settings-heading .card-title, .app-overview h1,
.login-sky-dock .card-title {
  max-width: 100%;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.panel-stack { gap: 20px; }
.panel-stack > .panel-stack { gap: 10px; }
.eyebrow { font-size: .8125rem; text-transform: none; letter-spacing: 0; font-weight: 700; margin: 0; }
.status-copy, .card-sub { font-size: .9375rem; line-height: 1.7; }

/* Keep navigation in the document flow, with the same wordmark as the homepage. */
.topbar, .account-settings-page .topbar {
  position: relative;
  align-items: center;
  min-height: 104px;
  padding: 24px max(40px, calc((100% - 1160px) / 2));
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 25px; font-weight: 800; letter-spacing: -.04em; gap: 10px; }
.menu-button, .theme-toggle-icon, .notification-button,
.account-settings-page .menu-button, .account-settings-page .theme-toggle-icon,
.account-settings-page .notification-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}
.theme-toggle[aria-pressed="true"] { background: transparent; }
.menu-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 8px #00000012; }
.menu-panel a { font-size: .875rem; font-weight: 700; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.page-shell, .account-settings-shell {
  width: min(calc(100% - 80px), 960px);
  padding: 48px 0 64px;
  min-height: 0;
  align-items: flex-start;
}
.page-panel { padding: 0; border: 0; border-radius: 0; background: transparent; }
.page-panel--wide { width: 100%; }
.page-panel--narrow { padding-block: 24px; }
.scheduler-main {
  width: min(calc(100% - 80px), 1160px);
  padding: 48px 0 64px;
  gap: 32px;
}
.scheduler-main > section + section { margin-top: 0; }
.dashboard-home .app-overview {
  padding: 0 0 28px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.dashboard-title-image-slot { width: 72px; background: var(--yellow); }
.user-email { font-size: .875rem; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.dashboard-home .task-section { border-radius: 12px; padding: 28px; background: var(--bg); }
.dashboard-home .section-heading h2 { font-size: 1.25rem; font-weight: 800; }
.dashboard-home .scheduler-main .action-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 0;
  box-shadow: none;
  font-size: .9375rem;
}
.dashboard-home .scheduler-main .action-card:last-child { border-bottom: 0; }
.dashboard-home .scheduler-main .action-card:hover { background: var(--soft); color: var(--accent); }
.dashboard-home .scheduler-main .action-card::after { content: "→"; color: var(--accent); }

/* A single button vocabulary, matching the homepage's blue primary action. */
.ghost, .nav-link, .primary, .submit-btn, .connect, a.primary {
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 44px;
  padding: 10px 16px;
  box-shadow: none;
  font-size: .875rem;
  font-weight: 700;
  background: var(--bg);
}
.ghost:hover, .connect:hover { background: var(--soft); border-color: var(--accent); color: var(--accent); }
.primary, button.primary, a.primary, .submit-btn, .scheduler-main .create-post-button {
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 7px;
  color: #fff;
  box-shadow: none;
  font-size: .875rem;
  font-weight: 700;
}
.primary:hover, button.primary:hover, a.primary:hover, .submit-btn:hover,
.scheduler-main .create-post-button:hover, .scheduler-main .create-post-button:focus-visible {
  background: #193bc7;
  border-color: #193bc7;
  color: #fff;
}
.primary:active, .ghost:active, .connect:active { transform: translateY(1px); box-shadow: none; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  background-color: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: .9375rem;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label { font-size: .875rem; letter-spacing: 0; text-transform: none; }
.connect.connected-badge { border: 1px solid var(--success); color: var(--success); background: var(--bg); box-shadow: none; border-radius: 7px; }
.connect.select-page-button { background: var(--yellow); color: #182023; border-color: var(--yellow); }
.platform-logo { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; }
.platform-logo svg { width: 24px; height: 24px; }
.platform-info { display: flex; align-items: center; gap: 14px; }
.platform-name { font-weight: 700; font-size: 1rem; }
.platform-name .status-label { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 400; color: var(--muted); }
.platform-name .status-label.hidden { display: none; }
.platform-card { padding: 20px 0; align-items: center; border-bottom: 1px solid var(--line); }
.platform-card:last-child { border-bottom: 0; }
.platform-list { margin-top: 4px; gap: 0; }
.subscription-tier-list, .payment-provider-list, .failed-posts-list,
.pending-posts-list, .notifications-list { border: 1px solid var(--line); border-radius: 12px; padding-inline: 24px; }
.subscription-tier { padding-block: 24px; align-items: center; }
.subscription-tier-name { font-size: 1.0625rem; font-weight: 800; }
.subscription-tier-price { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
.subscription-tier ul { font-size: .875rem; line-height: 1.9; }
.subscription-tier .primary { align-self: center; }
.scheduler-main .tag-entry input { border: 0; border-radius: 0; background: transparent; }
.scheduler-main .compose-dialog, .disconnect-dialog { border-radius: 12px; background: var(--bg); }
.scheduler-main .dialog-title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.login-sky-dock .login-art, .signout-frame .login-art { border-radius: 12px; }
.signout-sky-main { padding-top: 48px; }
.footer { font-size: .75rem; padding-block: 32px; gap: 14px 24px; }

@media (max-width: 800px) {
  .topbar, .account-settings-page .topbar { padding-inline: 28px; gap: 14px; }
  .page-shell, .account-settings-shell, .scheduler-main { width: calc(100% - 56px); padding: 32px 0 48px; }
  .dashboard-home .scheduler-main { padding-top: 32px; }
  .app-overview { grid-template-columns: minmax(0, 1fr); }
  .account-bar { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .topbar, .account-settings-page .topbar { min-height: 82px; padding: 16px 20px; gap: 10px; }
  .menu-topbar.has-auth-logout, .menu-topbar:has(.auth-logout-button) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .brand, .account-settings-page .brand { font-size: 22px; gap: 8px; }
  .page-shell, .account-settings-shell, .scheduler-main { width: calc(100% - 40px); }
  .card-title, .account-settings-heading .card-title, .app-overview h1, .login-sky-dock .card-title { font-size: 1.75rem; }
  .dashboard-home .task-section { padding: 20px; }
  .dashboard-title-image-slot { width: 56px; }
  .dashboard-home .dashboard-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "posts" "account"; }
  .subscription-tier-list, .payment-provider-list, .failed-posts-list, .pending-posts-list, .notifications-list { padding-inline: 16px; }
  .subscription-tier { grid-template-columns: minmax(0, 1fr); }
  .subscription-tier .primary { justify-self: start; }
  .footer { align-items: center; }
}
@media (max-width: 380px) {
  .topbar, .account-settings-page .topbar { padding-inline: 12px; gap: 8px; }
  .brand, .account-settings-page .brand { font-size: 17px; gap: 6px; }
  .brand::before { width: 21px; }
  .topbar-actions { gap: 4px; }
  .page-shell, .account-settings-shell, .scheduler-main { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Keep sign-out available when the compact header wraps. */
@media (max-width: 600px) {
  .topbar.menu-topbar, .dashboard-home .topbar.menu-topbar,
  .account-settings-page .topbar.menu-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: none;
  }
  .dashboard-home .topbar .menu-shell,
  .dashboard-home .topbar .brand,
  .dashboard-home .topbar .topbar-actions { grid-area: auto; }
  .topbar .auth-logout-button, .account-settings-page .topbar .auth-logout-button {
    display: inline-flex;
    grid-area: auto;
    grid-column: 2 / -1;
    justify-self: end;
  }
}