:root {
  --hp-bg: #f3f6fb;
  --hp-surface: rgba(255, 255, 255, .92);
  --hp-text: #172033;
  --hp-muted: #6b7588;
  --hp-brand: #4f7cff;
  --hp-brand-dark: #315ed8;
  --hp-border: #dfe6f0;
  --hp-radius: 16px;
}
body { background: var(--hp-bg); }
#layout, #layout-content, #layout-list, #layout-sidebar { background-color: transparent; }
#layout-menu { background: linear-gradient(180deg, #0f172a 0%, #18243a 100%); }
#layout-menu .popover-header, #layout-menu .menu a { color: #dbe5f5; }
#layout-menu .menu a.selected, #layout-menu .menu a:hover { background: rgba(79,124,255,.20); color: #fff; }
.listing, .menu.pagenav, .header, .toolbar, .iframe-wrapper, .content-frame {
  border-color: var(--hp-border) !important;
}
#login-form {
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(15,23,42,.20);
  background: var(--hp-surface);
  backdrop-filter: blur(18px);
  padding: 2rem;
}
.task-login.action-none {
  background:
    radial-gradient(circle at 15% 10%, rgba(79,124,255,.28), transparent 35%),
    radial-gradient(circle at 85% 85%, rgba(48,198,165,.18), transparent 34%),
    linear-gradient(145deg, #eef3ff 0%, #f7f9fc 48%, #eaf1fb 100%);
}
#login-form .button.mainaction, .btn-primary {
  background: linear-gradient(135deg, var(--hp-brand), var(--hp-brand-dark));
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(79,124,255,.25);
}
input, select, textarea, .custom-select { border-radius: 10px !important; }
.listing li, .listing tbody td { border-color: #e8edf4; }
@media (prefers-color-scheme: dark) {
  :root { --hp-bg: #0d1422; --hp-surface: rgba(21,31,49,.94); --hp-text: #e8eef8; --hp-muted: #9aa8bd; --hp-border: #2a3850; }
  body, #layout-content, #layout-list, #layout-sidebar { background: var(--hp-bg); color: var(--hp-text); }
  #login-form { color: var(--hp-text); border-color: rgba(255,255,255,.08); }
  .task-login.action-none { background: radial-gradient(circle at 20% 10%, #1d3261, transparent 38%), linear-gradient(145deg, #0a101b, #111a2a); }
}