body.section-dashboard,
body.user-dashboard-page { --page-accent: var(--v-accent-dashboard, #38bdf8); --page-accent-rgb: var(--v-accent-dashboard-rgb, 56,189,248); }
body.section-stats,
body.user-stats-page { --page-accent: var(--v-accent-stats, #06b6d4); --page-accent-rgb: var(--v-accent-stats-rgb, 6,182,212); }
body.section-media,
body.user-media-page,
body.media-gallery-page { --page-accent: var(--v-accent-media, #22c55e); --page-accent-rgb: var(--v-accent-media-rgb, 34,197,94); }
body.section-upload,
body.user-upload-page { --page-accent: var(--v-accent-upload, #f59e0b); --page-accent-rgb: var(--v-accent-upload-rgb, 245,158,11); }
body.section-account,
body.user-account-page { --page-accent: var(--v-accent-account, #fbbf24); --page-accent-rgb: var(--v-accent-account-rgb, 251,191,36); }
body.section-profile,
body.user-profile-page { --page-accent: var(--v-accent-profile, #34d399); --page-accent-rgb: var(--v-accent-profile-rgb, 52,211,153); }
body.section-settings,
body.section-theme,
body.user-settings-page,
body.user-theme-page,
body.theme-settings-page,
body.user-theme-settings-page { --page-accent: var(--v-accent-settings, #a78bfa); --page-accent-rgb: var(--v-accent-settings-rgb, 167,139,250); }
body.section-apps,
body.user-apps-page { --page-accent: var(--v-accent-apps, #8b5cf6); --page-accent-rgb: var(--v-accent-apps-rgb, 139,92,246); }

.panel { --panel-accent: var(--page-accent, var(--v-accent)); --panel-accent-rgb: var(--page-accent-rgb, var(--v-accent-rgb)); }
.dashboard-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--v-panel-gap); }
.panel-dashboard-card { min-height: 100%; }
.dashboard-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.panel-theme-content { display: grid; gap: 14px; }

/* Dashboard overview grid contract:
   Grid children must not inherit vertical stacked-panel spacing. */
.dashboard-overview-grid {
  align-items: stretch;
}

.dashboard-overview-grid > .panel,
.dashboard-overview-grid > .panel + .panel,
.dashboard-overview-grid > .panel-dashboard-card,
.dashboard-overview-grid > .panel-dashboard-card + .panel-dashboard-card {
  margin-top: 0;
  align-self: stretch;
  transform: none;
}

.dashboard-overview-grid > .panel-dashboard-card {
  height: 100%;
}

/* Auth/Login page contract.
   Auth pages use central theme-core + theme tokens. No embedded login CSS. */
body.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(var(--v-accent-rgb), .14), transparent 34rem),
    var(--v-bg);
  color: var(--v-text);
}

.login-layout {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
}

.login-container {
  width: min(100%, 440px);
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-lg, var(--v-radius));
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    var(--v-surface);
  box-shadow: var(--v-shadow);
}

.login-container h1 {
  margin: 0;
  color: var(--v-text-strong);
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  line-height: 1.05;
  text-align: center;
}

.login-logo {
  justify-self: center;
  margin-bottom: 4px;
}

.login-logo .logo-inner {
  width: 92px;
  height: 92px;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form .form-row {
  display: grid;
  gap: 7px;
}

.login-form label {
  color: var(--v-text-muted);
  font-size: .92rem;
}

.login-form input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  background: rgba(0,0,0,.18);
  color: var(--v-text);
}

.login-form input:focus {
  outline: none;
  border-color: var(--v-accent-border, rgba(var(--v-accent-rgb), .42));
  box-shadow: 0 0 0 3px rgba(var(--v-accent-rgb), .16);
}

.login-form .form-actions {
  display: flex;
  justify-content: stretch;
  margin-top: 4px;
}

.login-form button,
.login-form .btn {
  width: 100%;
}

.login-secondary {
  margin: 0;
  text-align: center;
  color: var(--v-text-muted);
}

.login-secondary a {
  color: var(--v-text-strong);
}

.error-message,
.success-message {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--v-radius-sm);
}

.error-message {
  border: 1px solid rgba(248,113,113,.34);
  background: rgba(248,113,113,.11);
  color: #fecaca;
}

.success-message {
  border: 1px solid rgba(34,197,94,.34);
  background: rgba(34,197,94,.11);
  color: #bbf7d0;
}

@media (max-width: 560px) {
  .login-layout {
    padding: 18px;
    place-items: start center;
  }

  .login-container {
    padding: 24px 20px;
  }

  .login-logo .logo-inner {
    width: 78px;
    height: 78px;
  }
}

/* Auth logo on dark login cards: invert only on auth/login pages. */
.login-logo .logo-circle,
.login-logo .logo-v {
  filter: brightness(0) invert(1);
  opacity: .96;
}